Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e51cafa570 | ||
|
|
54d7a542f7 | ||
|
|
970553bd8f | ||
|
|
b0458c4b91 | ||
|
|
8985ef9fff | ||
|
|
423d9edbfa | ||
|
|
f1914a5d0a | ||
|
|
7a7bc983e6 | ||
|
|
0bab009984 | ||
|
|
8085ad2f90 |
@@ -5,10 +5,15 @@ TWITTER_LITE_DB_PATH=/absolute/path/to/twitter-lite/.data/workspace.sqlite
|
|||||||
# Required when connecting Mastodon; keep this runtime file outside Git.
|
# Required when connecting Mastodon; keep this runtime file outside Git.
|
||||||
# TWITTER_LITE_CREDENTIAL_KEY_FILE=/absolute/path/to/credential-key
|
# TWITTER_LITE_CREDENTIAL_KEY_FILE=/absolute/path/to/credential-key
|
||||||
TWITTER_LITE_MASTODON_ORIGINS=https://fedi.yutakobayashi.com
|
TWITTER_LITE_MASTODON_ORIGINS=https://fedi.yutakobayashi.com
|
||||||
# Optional home Codex research prototype. Start pnpm codex:serve separately.
|
# Optional Codex research. The AI SDK provider manages its local app-server.
|
||||||
# TWITTER_LITE_CODEX_URL=ws://127.0.0.1:4500
|
# If your signed-in CLI uses a custom home, use the same path on the server.
|
||||||
|
# CODEX_HOME=/absolute/path/to/codex-home
|
||||||
|
# TWITTER_LITE_CODEX_PATH=/absolute/path/to/codex
|
||||||
# TWITTER_LITE_CODEX_MODEL=gpt-6-astra
|
# TWITTER_LITE_CODEX_MODEL=gpt-6-astra
|
||||||
# TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
|
# TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
|
||||||
|
|
||||||
# Optional initial owner setup code (32+ characters). Otherwise generated beside DB.
|
# Optional initial owner setup code (32+ characters). Otherwise generated beside DB.
|
||||||
# WORKSPACE_SETUP_TOKEN=
|
# WORKSPACE_SETUP_TOKEN=
|
||||||
|
|
||||||
|
# Optional real Jev reply evaluation through Vercel AI Gateway.
|
||||||
|
# AI_GATEWAY_API_KEY=
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
.env*
|
.env*
|
||||||
!.env.example
|
!.env.example
|
||||||
.output/
|
.output/
|
||||||
|
.tanstack/
|
||||||
dist/
|
dist/
|
||||||
node_modules/
|
node_modules/
|
||||||
playwright-report/
|
playwright-report/
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxfmt/configuration_schema.json",
|
||||||
|
"ignorePatterns": [".output/**", ".tanstack/**", "src/routeTree.gen.ts"]
|
||||||
|
}
|
||||||
@@ -1,9 +1,206 @@
|
|||||||
{
|
{
|
||||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
"categories": { "correctness": "off" },
|
"categories": {
|
||||||
|
"correctness": "error"
|
||||||
|
},
|
||||||
|
"options": {
|
||||||
|
"typeAware": true,
|
||||||
|
"typeCheck": true
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"eslint",
|
||||||
|
"typescript",
|
||||||
|
"unicorn",
|
||||||
|
"oxc",
|
||||||
|
"import",
|
||||||
|
"node",
|
||||||
|
"promise",
|
||||||
|
"react",
|
||||||
|
"react-perf",
|
||||||
|
"jsx-a11y"
|
||||||
|
],
|
||||||
"jsPlugins": ["@shadcn/lint"],
|
"jsPlugins": ["@shadcn/lint"],
|
||||||
"rules": {
|
"rules": {
|
||||||
"shadcn/no-raw-colors": "error"
|
"no-console": "error",
|
||||||
|
"no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"argsIgnorePattern": "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"typescript/consistent-type-exports": "error",
|
||||||
|
"typescript/consistent-type-imports": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"disallowTypeAnnotations": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"typescript/no-non-null-assertion": "error",
|
||||||
|
"typescript/no-explicit-any": "error",
|
||||||
|
"unicorn/no-useless-spread": "error",
|
||||||
|
"jsx-a11y/no-autofocus": "error",
|
||||||
|
"jsx-a11y/no-static-element-interactions": "error",
|
||||||
|
"jsx-a11y/prefer-tag-over-role": "off",
|
||||||
|
"react/exhaustive-deps": "error",
|
||||||
|
"react/purity": "error",
|
||||||
|
"react/rules-of-hooks": "error",
|
||||||
|
"react/set-state-in-effect": "error",
|
||||||
|
"shadcn/no-arbitrary-values": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"allow": ["layout"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"shadcn/no-inline-styles": "error",
|
||||||
|
"shadcn/no-raw-colors": "error",
|
||||||
|
"shadcn/no-restyle": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
"allow": ["layout"],
|
||||||
|
"contracts": [
|
||||||
|
{
|
||||||
|
"pattern": "^Sidebar$",
|
||||||
|
"allow": [
|
||||||
|
"layout",
|
||||||
|
"border-r",
|
||||||
|
"transition-none",
|
||||||
|
"inbox-sidebar",
|
||||||
|
"inbox-list-panel",
|
||||||
|
"support-sidebar",
|
||||||
|
"support-list"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarHeader$",
|
||||||
|
"allow": ["layout", "py-4", "gap-4", "border-b", "p-5"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarGroup$",
|
||||||
|
"allow": ["layout", "px-3"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarFooter$",
|
||||||
|
"allow": ["layout", "px-3", "pb-4"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarMenuButton$",
|
||||||
|
"allow": ["layout", "p-0"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Label$",
|
||||||
|
"allow": ["layout", "deck-checkbox"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Textarea$",
|
||||||
|
"allow": ["layout", "text-sm", "leading-7", "journal-summary"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^MessageScroller$",
|
||||||
|
"allow": ["layout", "research-conversation"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^MessageScrollerContent$",
|
||||||
|
"allow": ["layout", "gap-5", "p-4"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Marker$",
|
||||||
|
"allow": ["layout", "research-tool-message"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Message$",
|
||||||
|
"allow": ["layout", "research-message"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Collapsible$",
|
||||||
|
"allow": ["layout", "research-account-picker"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarProvider$",
|
||||||
|
"allow": [
|
||||||
|
"layout",
|
||||||
|
"workspace",
|
||||||
|
"home-workspace",
|
||||||
|
"inbox-workspace",
|
||||||
|
"vital-workspace",
|
||||||
|
"support-workspace",
|
||||||
|
"journal-workspace"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Button$",
|
||||||
|
"allow": ["layout", "auth-submit", "inbox-back", "support-back"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarInset$",
|
||||||
|
"allow": ["layout", "home-main", "inbox-reader", "support-main", "journal-main"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Input$",
|
||||||
|
"allow": ["layout", "pl-9"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^SidebarContent$",
|
||||||
|
"allow": ["layout", "gap-0"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pattern": "^Badge$",
|
||||||
|
"allow": ["layout", "deck-source-label"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"shadcn/no-unknown-classes": "error",
|
||||||
|
"shadcn/require-static-classes": "error"
|
||||||
},
|
},
|
||||||
"ignorePatterns": ["src/routeTree.gen.ts"]
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": ["scripts/**"],
|
||||||
|
"rules": {
|
||||||
|
"no-console": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["src/components/ui/**"],
|
||||||
|
"rules": {
|
||||||
|
"shadcn/no-arbitrary-values": "off",
|
||||||
|
"shadcn/no-restyle": "off",
|
||||||
|
"shadcn/require-static-classes": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["src/**/*.{test,spec}.{ts,tsx}", "tests/**/*.{ts,tsx}"],
|
||||||
|
"plugins": ["vitest"],
|
||||||
|
"rules": {
|
||||||
|
"typescript/unbound-method": "error",
|
||||||
|
"vitest/expect-expect": "error",
|
||||||
|
"vitest/no-conditional-expect": "error",
|
||||||
|
"vitest/no-standalone-expect": "error",
|
||||||
|
"vitest/require-mock-type-parameters": "error"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["e2e/**/*.{ts,tsx}"],
|
||||||
|
"rules": {
|
||||||
|
"react/rules-of-hooks": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ignorePatterns": [
|
||||||
|
"**/.pnpm-store/**",
|
||||||
|
"**/.direnv/**",
|
||||||
|
"**/node_modules/**",
|
||||||
|
"**/dist/**",
|
||||||
|
"**/build/**",
|
||||||
|
"**/coverage/**",
|
||||||
|
"**/playwright-report/**",
|
||||||
|
"**/test-results/**",
|
||||||
|
"**/.vercel/**",
|
||||||
|
"**/drizzle/**",
|
||||||
|
"**/*.tsbuildinfo",
|
||||||
|
".output/**",
|
||||||
|
".tanstack/**",
|
||||||
|
"src/routeTree.gen.ts",
|
||||||
|
"e2e/generated/**",
|
||||||
|
"src/features/storage/migrations.generated.ts"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,16 +8,25 @@ each dedicated workspace; its bottom avatar manages connected accounts.
|
|||||||
The interface is in English. User-entered text and external posts retain their
|
The interface is in English. User-entered text and external posts retain their
|
||||||
original language.
|
original language.
|
||||||
|
|
||||||
|
Home uses a Tiimo-inspired day flow with expandable activities and direct
|
||||||
|
controls for routine steps, tasks, replies and weight entries. Messages uses
|
||||||
|
a Beeper-inspired conversation layout with visible source messages, editable
|
||||||
|
drafts and a contextual side panel. These execution surfaces remain mocks;
|
||||||
|
their records share browser-session state and external sending is simulated.
|
||||||
|
Reply review can call Jev through Vercel AI Gateway when the server has
|
||||||
|
`AI_GATEWAY_API_KEY`. It checks the draft against the sample conversation;
|
||||||
|
Beeper synchronization and sending remain unconnected.
|
||||||
|
|
||||||
## Workspaces and current status
|
## Workspaces and current status
|
||||||
|
|
||||||
| Workspace | Route | Current implementation |
|
| Workspace | Route | Current implementation |
|
||||||
| --- | --- | --- |
|
| --------- | ---------- | ---------------------------------------------------------------------------------------------------------------------- |
|
||||||
| Home | `/` | State-derived daily brief, flexible tasks and routines, and natural-language action proposals. Local prototype. |
|
| Home | `/` | State-derived daily brief, flexible tasks and routines, and natural-language action proposals. Local prototype. |
|
||||||
| Messages | `/support` | Sample conversations, editable replies, scheduling previews, and deferral. Sending is simulated. |
|
| Messages | `/support` | Sample conversations, editable replies, scheduling previews, and deferral. Sending is simulated. |
|
||||||
| Journal | `/journal` | Notes, resume points, medication and weight entries, append-only corrections, and summary previews. Local prototype. |
|
| Journal | `/journal` | Notes, resume points, medication and weight entries, append-only corrections, and summary previews. Local prototype. |
|
||||||
| Reader | `/inbox` | Searchable sample articles and a responsive article reader. Recommendation from activity history is not connected yet. |
|
| Reader | `/inbox` | Searchable sample articles and a responsive article reader. Recommendation from activity history is not connected yet. |
|
||||||
| Vitals | `/vitals` | Body and Environment dashboards with sample readings, charts, and simulated controls. No health or device connection. |
|
| Vitals | `/vitals` | Body and Environment dashboards with sample readings, charts, and simulated controls. No health or device connection. |
|
||||||
| Research | `/deck` | Twitter and Mastodon columns, connected accounts, persistent decks, and optional Codex research chat. |
|
| Research | `/deck` | Twitter and Mastodon columns, connected accounts, persistent decks, and optional Codex research chat. |
|
||||||
|
|
||||||
Home, Messages, and Journal share in-memory state across navigation; reloading
|
Home, Messages, and Journal share in-memory state across navigation; reloading
|
||||||
resets it. The home input uses a deterministic English/Japanese interpreter to
|
resets it. The home input uses a deterministic English/Japanese interpreter to
|
||||||
@@ -27,6 +36,21 @@ connections, and chat history use server-side persistence.
|
|||||||
See [execution support](docs/execution-support.md) and the
|
See [execution support](docs/execution-support.md) and the
|
||||||
[vitals preview](docs/vitals-preview.md) for prototype scope.
|
[vitals preview](docs/vitals-preview.md) for prototype scope.
|
||||||
|
|
||||||
|
## URL state
|
||||||
|
|
||||||
|
Reader search and article selection, Messages views and conversations, Home
|
||||||
|
previews, account management, Journal review/correction views, and Vitals
|
||||||
|
navigation are represented in search parameters. Research uses deck, run, and
|
||||||
|
citation IDs. Reloading or browser Back/Forward restores the view while its
|
||||||
|
underlying data remains available. Login preserves the requested workspace URL.
|
||||||
|
|
||||||
|
Explicit selections add browser history; search input replaces it after a
|
||||||
|
300 ms debounce using TanStack Pacer. Navigation cancels pending search updates,
|
||||||
|
and IME composition waits until confirmed. URL navigation never submits prompts,
|
||||||
|
sends messages, or repeats device actions. Drafts, secrets, results, and task
|
||||||
|
contents remain outside the URL. Unsaved mock records and manual temporary
|
||||||
|
decks still disappear on reload; a URL does not persist their contents.
|
||||||
|
|
||||||
## Direction: personal context and execution
|
## Direction: personal context and execution
|
||||||
|
|
||||||
The intended connection with the separate private `life` / Rensheng repository
|
The intended connection with the separate private `life` / Rensheng repository
|
||||||
@@ -52,7 +76,7 @@ or change direction.
|
|||||||
- Native X search syntax, Top/Latest ranking, and optional `filter:follows`
|
- Native X search syntax, Top/Latest ranking, and optional `filter:follows`
|
||||||
- List discovery for the account selected in the column editor
|
- List discovery for the account selected in the column editor
|
||||||
- Column editing, ordering, deletion/undo, refresh, and cursor pagination
|
- Column editing, ordering, deletion/undo, refresh, and cursor pagination
|
||||||
- SQLite-backed shared decks, revision conflicts, and device-local selection
|
- SQLite-backed shared decks, revision conflicts, and URL-based selection
|
||||||
- Temporary views for exploration, with explicit saving
|
- Temporary views for exploration, with explicit saving
|
||||||
- Server-only encrypted Mastodon credentials and configurable Tailscale owner access
|
- Server-only encrypted Mastodon credentials and configurable Tailscale owner access
|
||||||
- Read-only post cards with source links, text, media, and quotes
|
- Read-only post cards with source links, text, media, and quotes
|
||||||
@@ -70,6 +94,8 @@ use opens account setup, followed by a short onboarding. Run
|
|||||||
`nix develop -c pnpm account:setup` on the server to obtain the private setup
|
`nix develop -c pnpm account:setup` on the server to obtain the private setup
|
||||||
code. See [owner login](docs/login.md) for configuration, sessions, and limits.
|
code. See [owner login](docs/login.md) for configuration, sessions, and limits.
|
||||||
|
|
||||||
|
`GET /health` returns `{"status":"ok"}` without authentication or database access.
|
||||||
|
|
||||||
## Requirements and setup
|
## Requirements and setup
|
||||||
|
|
||||||
Use Nix, or Node.js `>=22.12.0` with pnpm `11.9.0`. The committed `.npmrc`
|
Use Nix, or Node.js `>=22.12.0` with pnpm `11.9.0`. The committed `.npmrc`
|
||||||
@@ -106,7 +132,8 @@ nix develop -c pnpm dev
|
|||||||
nix develop -c pnpm dev:tailscale
|
nix develop -c pnpm dev:tailscale
|
||||||
nix develop -c pnpm generate:e2e-openapi
|
nix develop -c pnpm generate:e2e-openapi
|
||||||
nix develop -c pnpm lint
|
nix develop -c pnpm lint
|
||||||
nix develop -c pnpm lint:ui
|
nix develop -c pnpm format
|
||||||
|
nix develop -c pnpm format:check
|
||||||
nix develop -c pnpm typecheck
|
nix develop -c pnpm typecheck
|
||||||
nix develop -c pnpm knip
|
nix develop -c pnpm knip
|
||||||
nix develop -c pnpm test
|
nix develop -c pnpm test
|
||||||
@@ -116,27 +143,44 @@ nix develop -c pnpm build
|
|||||||
nix develop -c pnpm start
|
nix develop -c pnpm start
|
||||||
nix develop -c pnpm account:setup
|
nix develop -c pnpm account:setup
|
||||||
nix develop -c pnpm db:generate
|
nix develop -c pnpm db:generate
|
||||||
nix develop -c pnpm codex:serve
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Home Codex research prototype
|
## Home Codex research prototype
|
||||||
|
|
||||||
Run `codex login` as the host user, then keep `pnpm codex:serve` running separately
|
Run `codex login` as the host user. The backend uses Vercel AI SDK 7 and
|
||||||
from the web server. It starts a resident app-server at `ws://127.0.0.1:4500`
|
`ai-sdk-provider-codex-cli` 2.3 to manage a local Codex app-server over stdio.
|
||||||
using that user's existing Codex login. The launcher passes a small environment
|
A separate WebSocket service is no longer required. Use Codex CLI 0.156.0 or
|
||||||
allowlist, without the app's database, relay or SNS secret settings. Configured
|
newer; set an explicit executable path if it is not on PATH.
|
||||||
MCP servers are disabled for this process without changing the user's settings.
|
The child receives an environment allowlist; inherited MCP servers, hooks,
|
||||||
The prototype was developed against Codex CLI 0.156.1; its WebSocket and dynamic
|
web search and multi-agent execution are disabled for these research turns.
|
||||||
tool APIs are experimental.
|
The user's Codex settings are not changed.
|
||||||
|
|
||||||
Configure the web app with these values in `.env.local` (absolute report path):
|
Configure the web app in `.env.local`:
|
||||||
|
|
||||||
```dotenv
|
```dotenv
|
||||||
TWITTER_LITE_CODEX_URL=ws://127.0.0.1:4500
|
|
||||||
TWITTER_LITE_CODEX_MODEL=gpt-6-astra
|
TWITTER_LITE_CODEX_MODEL=gpt-6-astra
|
||||||
TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
|
TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
|
||||||
|
# Optional:
|
||||||
|
# TWITTER_LITE_CODEX_PATH=/absolute/path/to/codex
|
||||||
|
# CODEX_HOME=/absolute/path/to/codex-home
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If your CLI sets `CODEX_HOME`, set the same path in the server environment
|
||||||
|
(`.env.local` for development). A systemd service does not inherit your shell's
|
||||||
|
environment. Without it, research uses `~/.codex`, which may have different or
|
||||||
|
expired credentials. Authentication failures appear separately in chat; the
|
||||||
|
underlying error and conversation ID are logged on the server.
|
||||||
|
|
||||||
|
This provider does not register AI SDK `tools` as Codex dynamic tools.
|
||||||
|
The existing validated, account-scoped research functions are exposed through
|
||||||
|
its in-process `createSdkMcpServer` bridge instead. Streaming uses `streamText`
|
||||||
|
and `smoothStream` with 15 ms pacing and Japanese-aware chunking:
|
||||||
|
`/[\u3040-\u309F\u30A0-\u30FF]|\S+\s+/`.
|
||||||
|
Streamdown renders the Markdown and animates new text only while the final
|
||||||
|
assistant message is live; completed history is immediate and reduced-motion
|
||||||
|
preferences are respected. `@shadcn/helpers/ai-sdk` supplies deterministic
|
||||||
|
streaming fixtures for renderer tests.
|
||||||
|
|
||||||
Use the chat on the left while browsing horizontally scrollable deck columns on
|
Use the chat on the left while browsing horizontally scrollable deck columns on
|
||||||
the right. Messages continue the same Codex thread and include the currently
|
the right. Messages continue the same Codex thread and include the currently
|
||||||
open deck as context. The account selector controls which connections Codex can
|
open deck as context. The account selector controls which connections Codex can
|
||||||
@@ -152,15 +196,15 @@ Manual deck creation and column editing remain
|
|||||||
available. The backend handles tools even when the browser is closed.
|
available. The backend handles tools even when the browser is closed.
|
||||||
Use **New chat** to leave the current conversation and start a fresh Codex
|
Use **New chat** to leave the current conversation and start a fresh Codex
|
||||||
thread with your next message. The open deck and host reports remain available.
|
thread with your next message. The open deck and host reports remain available.
|
||||||
If a turn is running, stop it first. The conversation reset is shared across
|
A running turn continues in the background when you open another chat.
|
||||||
open devices. **Chat history** reopens saved conversations with their account
|
Selection belongs to the current URL; another browser does not change it. **Chat history** reopens saved conversations with their account
|
||||||
selection, deck and citations; the next message resumes the same Codex thread.
|
selection, deck and citations; the next message resumes the same Codex thread.
|
||||||
SQLite stores conversation snapshots and the active conversation selection.
|
SQLite stores conversation snapshots. Active selection is not stored globally.
|
||||||
Each turn is limited to 6 columns, 12 upstream requests shared between list
|
Each turn is limited to 6 columns, 12 upstream requests shared between list
|
||||||
discovery and post retrieval (at most 20 posts per fetch), and 15 minutes.
|
discovery and post retrieval (at most 20 posts per fetch), and 15 minutes.
|
||||||
The prototype accepts up to 100 messages per backend process.
|
The prototype accepts up to 100 messages per backend process.
|
||||||
SSE pushes conversation messages, tool activity and generated deck updates to
|
SSE pushes messages, tool activity and deck updates for the requested conversation
|
||||||
open browsers, without polling.
|
ID, without polling. Separate conversations have independent executions.
|
||||||
Codex replies render as Markdown, including tables, lists and code. Clicking a
|
Codex replies render as Markdown, including tables, lists and code. Clicking a
|
||||||
cited post link scrolls to its card and briefly highlights it. Loaded cards take
|
cited post link scrolls to its card and briefly highlights it. Loaded cards take
|
||||||
priority; otherwise the app shows the post captured during research in a column
|
priority; otherwise the app shows the post captured during research in a column
|
||||||
@@ -183,12 +227,11 @@ not independently verified. Report contents remain on the host filesystem;
|
|||||||
the app DB stores the conversation, thread ID, deck context and citation metadata.
|
the app DB stores the conversation, thread ID, deck context and citation metadata.
|
||||||
|
|
||||||
Browser disconnection does not cancel research; reconnecting restores the latest
|
Browser disconnection does not cancel research; reconnecting restores the latest
|
||||||
state through `/api/research/events`, under the same owner access checks as the
|
state through `/api/research/events?run=<id>`, under the same owner access checks as the
|
||||||
rest of the app. After a backend restart, unfinished turns appear as interrupted;
|
rest of the app. After a backend restart, unfinished turns appear as interrupted;
|
||||||
sending another message resumes the same thread. Before starting that message,
|
sending another message explicitly resumes the same thread through the provider.
|
||||||
the backend checks the resumed thread and interrupts any orphaned active turn.
|
|
||||||
It does not automatically rerun interrupted requests. Files already written remain.
|
It does not automatically rerun interrupted requests. Files already written remain.
|
||||||
Cancellation is explicit. The launcher and report directory must
|
Cancellation is explicit. The backend and report directory must
|
||||||
run under a user able to write those files. NixOS DynamicUser service integration
|
run under a user able to write those files. NixOS DynamicUser service integration
|
||||||
and dedicated service credentials are outside this prototype.
|
and dedicated service credentials are outside this prototype.
|
||||||
|
|
||||||
@@ -216,22 +259,31 @@ editing, ordering, and deletion; refresh stays available directly in each header
|
|||||||
|
|
||||||
Shared UI components live in `src/components/ui`; `components.json` configures
|
Shared UI components live in `src/components/ui`; `components.json` configures
|
||||||
the registry and theme entrypoint. Chat uses MessageScroller, Message, Bubble,
|
the registry and theme entrypoint. Chat uses MessageScroller, Message, Bubble,
|
||||||
Marker and InputGroup while retaining the existing Codex transport and saved
|
Marker and InputGroup with Streamdown, reconnectable snapshot SSE, and saved
|
||||||
conversation model. The icon rail switches between chat and deck management;
|
conversations. The icon rail switches between chat and deck management;
|
||||||
closing the mobile sheet or crossing the desktop breakpoint preserves chat
|
closing the mobile sheet or crossing the desktop breakpoint preserves chat
|
||||||
drafts, selected accounts and live deck updates. Theme colors are declared in
|
drafts, selected accounts and live deck updates. Theme colors are declared in
|
||||||
`src/ui.css`.
|
`src/ui.css`. The shared entrypoint `src/styles.css` loads the theme, tokens,
|
||||||
|
base styles and feature styles in that order, so the UI lint rules can resolve
|
||||||
|
application classes through the same stylesheet used by the app.
|
||||||
|
|
||||||
`pnpm lint` runs Biome and the UI checks. `pnpm lint:ui` runs
|
`pnpm lint` runs Oxlint with type-aware linting and TypeScript checking through
|
||||||
[@shadcn/lint](https://github.com/shadcn-ui/lint) through Oxlint. The
|
`oxlint-tsgolint`, including the
|
||||||
|
[@shadcn/lint](https://github.com/shadcn-ui/lint) UI checks. The
|
||||||
`shadcn/no-raw-colors` rule in `.oxlintrc.json` requires theme colors in JSX and
|
`shadcn/no-raw-colors` rule in `.oxlintrc.json` requires theme colors in JSX and
|
||||||
class helpers, including shared UI components. Layout values remain available
|
class helpers, including shared UI components. Layout values remain available
|
||||||
for the sidebar and deck. Biome continues to handle formatting and general
|
for the sidebar and deck. Component contracts allow only the existing workspace
|
||||||
code checks. Knip checks application usage while retaining the public exports
|
styles; Next.js-specific rules are omitted because this app uses TanStack Start.
|
||||||
|
`pnpm format` formats files with Oxfmt defaults, and
|
||||||
|
`pnpm format:check` checks formatting without changing files. Knip checks application usage while retaining the public exports
|
||||||
of registry components for composition. Additional design rules can be configured
|
of registry components for composition. Additional design rules can be configured
|
||||||
in `.oxlintrc.json`;
|
in `.oxlintrc.json`;
|
||||||
see the [available rules](https://github.com/shadcn-ui/lint#rules).
|
see the [available rules](https://github.com/shadcn-ui/lint#rules).
|
||||||
|
|
||||||
|
The database and OpenAPI generators format their output with Oxfmt. TanStack
|
||||||
|
Router owns the formatting of `src/routeTree.gen.ts`, which is excluded from
|
||||||
|
formatting; `pnpm check:routes` verifies that regeneration leaves it unchanged.
|
||||||
|
|
||||||
Create a deck for an investigation, then add columns for each perspective.
|
Create a deck for an investigation, then add columns for each perspective.
|
||||||
Choose a connected account and one of its supported sources. Account
|
Choose a connected account and one of its supported sources. Account
|
||||||
changes affect only the edited column. Matching source conditions and accounts
|
changes affect only the edited column. Matching source conditions and accounts
|
||||||
|
|||||||
@@ -1,32 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://biomejs.dev/schemas/2.5.3/schema.json",
|
|
||||||
"files": {
|
|
||||||
"includes": [
|
|
||||||
"**",
|
|
||||||
"!src/routeTree.gen.ts",
|
|
||||||
"!!**/.output",
|
|
||||||
"!!**/test-results"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"formatter": {
|
|
||||||
"enabled": true,
|
|
||||||
"indentStyle": "space"
|
|
||||||
},
|
|
||||||
"linter": {
|
|
||||||
"enabled": true,
|
|
||||||
"rules": {
|
|
||||||
"recommended": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"javascript": {
|
|
||||||
"formatter": {
|
|
||||||
"quoteStyle": "single",
|
|
||||||
"semicolons": "asNeeded"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"css": {
|
|
||||||
"parser": {
|
|
||||||
"tailwindDirectives": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
"tsx": true,
|
"tsx": true,
|
||||||
"tailwind": {
|
"tailwind": {
|
||||||
"config": "",
|
"config": "",
|
||||||
"css": "src/ui.css",
|
"css": "src/styles.css",
|
||||||
"baseColor": "neutral",
|
"baseColor": "neutral",
|
||||||
"cssVariables": true
|
"cssVariables": true
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,386 @@
|
|||||||
|
# External Codex publishing into the workspace
|
||||||
|
|
||||||
|
Proposal, 2026-09-28. No endpoints, timers, or inference jobs in this document
|
||||||
|
have been implemented. This supersedes the earlier proposal for app-managed
|
||||||
|
inference and an application-owned life filesystem adapter.
|
||||||
|
|
||||||
|
## Responsibility
|
||||||
|
|
||||||
|
External Codex reads Beeper and the life filesystem, reasons about them, and
|
||||||
|
maintains life under its existing Rensheng conventions. life remains the CRM
|
||||||
|
source of truth. The workspace accepts structured results, persists and displays
|
||||||
|
them, and records user decisions and requests. It does not need a new LLM loop,
|
||||||
|
CRM compiler, or Markdown editing engine.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart LR
|
||||||
|
T[Host timer or manual invocation] --> C[External Codex job]
|
||||||
|
B[Beeper API / CLI] --> C
|
||||||
|
C <-->|Read and maintain CRM| L[Rensheng / life files]
|
||||||
|
C -->|Publish structured results| P[Application write API]
|
||||||
|
P --> D[SQLite projections and user decisions]
|
||||||
|
D --> U[Home / Messages / CRM]
|
||||||
|
U -->|Requests and corrections| Q[Durable request inbox]
|
||||||
|
Q --> C
|
||||||
|
```
|
||||||
|
|
||||||
|
The existing Research chat can remain as-is. This design does not require
|
||||||
|
removing that feature or putting its runtime in charge of CRM automation.
|
||||||
|
Deterministic Beeper reads, live UI updates, and confirmed sends are ordinary
|
||||||
|
application integration code; they do not imply app-owned inference.
|
||||||
|
|
||||||
|
## What gbrain actually does
|
||||||
|
|
||||||
|
Inspected revision: `e78f1c38b947b053f3a46881340f74f316be855a`.
|
||||||
|
|
||||||
|
- Its [cron convention](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/skills/conventions/cron-via-minions.md)
|
||||||
|
assigns scheduling to the host. It explicitly describes a native cron
|
||||||
|
scheduler inside `jobs work` as not yet shipped.
|
||||||
|
- [Minions workers](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/minions/worker.ts)
|
||||||
|
handle durable execution, leases and retries. Job idempotency and prevention
|
||||||
|
of overlapping runs are separate concerns.
|
||||||
|
- [Autopilot](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/commands/autopilot.ts)
|
||||||
|
is a maintenance daemon, not a ready-made external Codex scheduler. The
|
||||||
|
built-in [subagent handler](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/minions/handlers/subagent.ts)
|
||||||
|
uses gbrain's own model/tool execution.
|
||||||
|
- Its [page write operation](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/ops/pages.ts)
|
||||||
|
uses request receipts, expected revisions and transactional writes. These are
|
||||||
|
useful patterns for publishing into this app without importing its entire stack.
|
||||||
|
|
||||||
|
## Scheduling proposal
|
||||||
|
|
||||||
|
Use one external systemd timer and oneshot service, or the existing host scheduler
|
||||||
|
if one already owns this workflow. Do not create schedules during research.
|
||||||
|
Start with a morning brief and periodic daytime refresh; exact cadence and job
|
||||||
|
timeout are deployment choices, not established product requirements.
|
||||||
|
|
||||||
|
The runner sets an explicit working directory and `CODEX_HOME`, prevents
|
||||||
|
concurrent runs, reads the app context revision, then invokes Codex to inspect
|
||||||
|
sources and prepare a result. It publishes through the application API and keeps
|
||||||
|
a private result file until acknowledgment so a network retry need not repeat
|
||||||
|
inference. Do not put credentials in prompts or command arguments.
|
||||||
|
|
||||||
|
Use separate identifiers for the scheduled occurrence and publish attempt. A
|
||||||
|
retry of an unchanged result keeps its `runId`; regeneration after a conflict
|
||||||
|
uses a new `runId`. Host logs expose started, finished and failed runs without
|
||||||
|
dumping messages. The UI can show the last successful publication and source
|
||||||
|
freshness; it should retain the previous good result when a new run fails.
|
||||||
|
|
||||||
|
Beeper events can later mark work dirty and coalesce a wake-up. Do not start one
|
||||||
|
Codex process per message. Natural-language requests can use the same external
|
||||||
|
worker path; a future wake-up signal should only notify that worker, not execute
|
||||||
|
browser-supplied shell text.
|
||||||
|
|
||||||
|
## Write interface
|
||||||
|
|
||||||
|
Start with HTTP and a small CLI wrapper that accepts JSON from a file/stdin.
|
||||||
|
Add an MCP wrapper only if useful for tool discovery; it must call the same
|
||||||
|
validated service. HTTP, CLI and MCP are access methods, not three state stores.
|
||||||
|
Avoid direct SQLite writes and an arbitrary SQL, shell or filesystem tool.
|
||||||
|
|
||||||
|
Proposed first contract, keeping the repository's camelCase JSON convention:
|
||||||
|
|
||||||
|
| Method and path | Caller | Purpose | Success |
|
||||||
|
| -------------------------- | --------------------- | ----------------------------------------------------------------------- | ------------------------- |
|
||||||
|
| `GET /api/agent-context` | Agent credential | Read revision, current projections, user decisions and pending requests | `200` |
|
||||||
|
| `POST /api/agent-results` | Agent credential | Atomically publish a validated result and complete referenced requests | `201`; exact replay `200` |
|
||||||
|
| `POST /api/agent-requests` | Owner browser session | Persist a natural-language request or a requested life correction | `201`; exact replay `200` |
|
||||||
|
|
||||||
|
Browser snapshot reads use the same application service under owner session
|
||||||
|
authentication. An optional `GET /api/agent-results/{runId}` receipt endpoint can
|
||||||
|
be added if exact POST replay is insufficient. No public API version prefix is
|
||||||
|
needed for this first coordinated client/server contract.
|
||||||
|
|
||||||
|
The agent credential is limited to context reads and result publication. It must
|
||||||
|
not approve a send, change login settings, or mark user decisions on the user's
|
||||||
|
behalf. The existing session, Tailscale and Origin middleware does not accept
|
||||||
|
this authentication flow today. Implement a narrowly scoped agent route branch
|
||||||
|
that verifies its own credential; do not add these paths as unauthenticated
|
||||||
|
exceptions or spoof a Tailscale identity. Use loopback locally, TLS remotely.
|
||||||
|
|
||||||
|
### Result shape
|
||||||
|
|
||||||
|
Illustrative payload, with fictional data:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"runId": "morning-2026-09-29-attempt-1",
|
||||||
|
"jobKey": "daily-brief",
|
||||||
|
"expectedRevision": 42,
|
||||||
|
"generatedAt": "2026-09-28T23:00:00Z",
|
||||||
|
"sourceRefs": [
|
||||||
|
{
|
||||||
|
"id": "life-person-example",
|
||||||
|
"kind": "life",
|
||||||
|
"path": "people/example.md",
|
||||||
|
"contentHash": "sha256:example",
|
||||||
|
"observedAt": "2026-09-28T22:59:00Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"brief": {
|
||||||
|
"date": "2026-09-29",
|
||||||
|
"timeZone": "Asia/Tokyo",
|
||||||
|
"text": "Start with the meeting reply.",
|
||||||
|
"evidenceIds": ["life-person-example"]
|
||||||
|
},
|
||||||
|
"people": [
|
||||||
|
{
|
||||||
|
"id": "person-example",
|
||||||
|
"name": "Example Person",
|
||||||
|
"context": "Discussing the next meeting.",
|
||||||
|
"evidenceIds": ["life-person-example"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"activities": [],
|
||||||
|
"replyDrafts": [],
|
||||||
|
"retractions": [],
|
||||||
|
"completedRequests": []
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`runId` and `jobKey` are required bounded strings; `expectedRevision` is a
|
||||||
|
nonnegative integer from the last context read. All timestamps are RFC 3339.
|
||||||
|
The server stamps `receivedAt` and authenticated publisher identity itself.
|
||||||
|
Dates used for the home brief include an explicit timezone.
|
||||||
|
|
||||||
|
People/activities/drafts are upserts with stable IDs, not position-based IDs or
|
||||||
|
display names. People are projections of life, not independently maintained CRM
|
||||||
|
facts. Activities use the typed contract below, with a title, references and
|
||||||
|
evidence IDs. Drafts include canonical target/account/chat IDs, reply target,
|
||||||
|
source message revision and candidate bodies/styles. Beeper evidence includes
|
||||||
|
target/account/chat/message IDs and observation time; life evidence includes a
|
||||||
|
relative path and content hash. A Git revision alone does not describe uncommitted
|
||||||
|
life edits. Source references are data, never filesystem access instructions.
|
||||||
|
|
||||||
|
The app validates structure, references, bounds and permissions; it does not
|
||||||
|
infer whether a CRM fact is true. Publisher-supplied evidence is provenance, not
|
||||||
|
proof that the app independently verified the original file or conversation.
|
||||||
|
|
||||||
|
Omitted `brief` leaves the brief unchanged; empty arrays perform no upserts.
|
||||||
|
Omission never deletes an existing item. Explicit typed retractions can withdraw
|
||||||
|
agent suggestions but cannot delete user-owned decisions. Reject unsupported
|
||||||
|
fields and nulls in this coordinated first version. Agree payload size, per-array
|
||||||
|
limits and bounded context pagination when implementing; do not accept unbounded
|
||||||
|
history or attachments through this endpoint.
|
||||||
|
|
||||||
|
### Atomic publication and conflicts
|
||||||
|
|
||||||
|
1. Scope receipts to authenticated publisher plus `runId`. Store a canonical
|
||||||
|
payload hash. A replay with the same payload returns the original receipt;
|
||||||
|
the same key with different content returns `409 idempotency_conflict`.
|
||||||
|
2. Check replay before checking the expected revision. A successful retry must
|
||||||
|
still work after unrelated later UI changes.
|
||||||
|
3. Validate the full result, check `expectedRevision`, write projections and the
|
||||||
|
receipt, and increment the context revision in one SQLite transaction.
|
||||||
|
A concurrent publish or user edit yields `409 revision_conflict` and no writes.
|
||||||
|
4. User edits, dismissals, completions and selections live separately from agent
|
||||||
|
suggestions. A new proposal cannot revive a dismissed action or replace a
|
||||||
|
user-edited draft. Context reads expose those decisions to Codex.
|
||||||
|
5. Emit a browser update only after commit. On reconnect, fetch a snapshot;
|
||||||
|
notifications are not the source of truth. A failed publication leaves the
|
||||||
|
previous brief intact.
|
||||||
|
|
||||||
|
Return `{runId, revision, receivedAt}` as the receipt. Keep deduplication receipts
|
||||||
|
for the MVP's lifetime; any future pruning must define a retry horizon first.
|
||||||
|
Retry transient transport failures with the exact payload and key. Conflicts
|
||||||
|
require a fresh context read and reconciliation, not blind retry.
|
||||||
|
|
||||||
|
Use a small stable error envelope such as
|
||||||
|
`{code, message, details, requestId}`: `400` malformed JSON, `401` invalid agent
|
||||||
|
credential, `403` forbidden operation, `409` conflicts, `413` oversized payload,
|
||||||
|
`422` invalid result structure, `429` throttling, and `5xx` transient server faults.
|
||||||
|
No partial successes. This is a new machine API; it need not refactor unrelated
|
||||||
|
existing UI error contracts.
|
||||||
|
|
||||||
|
## Returning user intent to Codex
|
||||||
|
|
||||||
|
The app must also expose what the user did. Otherwise the next scheduled run
|
||||||
|
cannot distinguish a stale suggestion from a deliberate dismissal or correction.
|
||||||
|
|
||||||
|
`POST /api/agent-requests` accepts a stable client `requestId`, a kind such as
|
||||||
|
`refresh`, `reply-draft`, or `crm-edit`, an optional entity ID/source revision,
|
||||||
|
and the user's text or requested edit. Persist before acknowledging. Repeated
|
||||||
|
IDs with identical bodies return the same request; mismatches return `409`.
|
||||||
|
|
||||||
|
A result links each completed request using
|
||||||
|
`completedRequests: [{requestId, sourceRefIds}]`. All source references must exist
|
||||||
|
in the publication; a `crm-edit` completion requires a life reference with the
|
||||||
|
resulting content hash. Reject completion of unknown or already cancelled
|
||||||
|
requests. This validates the claimed provenance link, not the file contents
|
||||||
|
independently.
|
||||||
|
|
||||||
|
A person-note edit appears as pending while external Codex applies it to life.
|
||||||
|
It becomes confirmed only after publication references that request and supplies
|
||||||
|
the resulting source revision. Failures keep the previous confirmed projection
|
||||||
|
and the pending request visible. Do not label an app-only edit as already saved
|
||||||
|
to life. Single-worker execution avoids requiring a job lease API for this MVP.
|
||||||
|
|
||||||
|
life changes and app publication are not one transaction. If the process stops
|
||||||
|
between them, the next run re-reads life and checks the request's outcome before
|
||||||
|
applying it again. Prefer desired-state edits over blind append operations and
|
||||||
|
preserve request provenance where the life workflow permits it.
|
||||||
|
|
||||||
|
Actual message sending remains a separate, revision-bound user command. Publishing
|
||||||
|
a draft or marking an agent request complete cannot send a message. Send results
|
||||||
|
can be exposed in the next agent context for Codex to update life.
|
||||||
|
|
||||||
|
## First useful slice
|
||||||
|
|
||||||
|
Implement context read and result publish, persist them, and render a published
|
||||||
|
brief plus a mixed activity list: weight entry, a simple optional task, routine
|
||||||
|
steps and a reply linked to published life context. Prove duplicate replay,
|
||||||
|
conflict handling, reload persistence and preservation
|
||||||
|
of user decisions with fixture data. Then run one external Codex job manually
|
||||||
|
before installing a timer. Add the request inbox when introducing on-demand
|
||||||
|
generation or CRM editing. This order gives the agent somewhere to write before
|
||||||
|
building automation around it.
|
||||||
|
|
||||||
|
The [Beeper Copilot captures](references/beeper-copilot/README.md) provide the UI
|
||||||
|
reference for those published results: conversation list, conversation body,
|
||||||
|
person context, evidence chips, reply candidates and explicit review.
|
||||||
|
|
||||||
|
## One activity list, different execution surfaces
|
||||||
|
|
||||||
|
Home should unify what the user needs to do, while preserving the right controls
|
||||||
|
for each activity. A shared task abstraction does not imply a universal checkbox
|
||||||
|
or a universal chat card. Activity ordering, deferral and visibility are shared;
|
||||||
|
execution and completion are domain-specific.
|
||||||
|
|
||||||
|
| Activity kind | Inline or expanded Home UI | Completion evidence |
|
||||||
|
| ------------- | --------------------------------------------------------------------- | ----------------------------------------------------------- |
|
||||||
|
| `task` | Concise title, optional detail, completion control | User marks it complete |
|
||||||
|
| `measurement` | Weight number field, unit, last recorded value/time, Save | A measurement record is saved |
|
||||||
|
| `reply` | Person, latest relevant message, reason to reply, draft editor/review | Send is confirmed; a larger exchange may remain waiting |
|
||||||
|
| `routine` | Ordered child activities and progress | Required children complete, or an explicit skip is recorded |
|
||||||
|
|
||||||
|
Use common fields such as `id`, `title`, `kind`, `evidenceIds`, `personId`,
|
||||||
|
`parentId`, `occurrenceKey`, and optional recommendation/order metadata. User
|
||||||
|
state (available, in progress, waiting, deferred, completed or skipped) is stored
|
||||||
|
separately from Codex's recommendation. Each kind has a validated payload and a
|
||||||
|
fixed application renderer; do not accept agent-generated executable UI or HTML.
|
||||||
|
|
||||||
|
`routine` and `optional` in the current Home sections are grouping/priority
|
||||||
|
choices, not exclusive UI types. A weight activity can be a morning routine step;
|
||||||
|
a reply can be optional today. A routine groups child activities rather than
|
||||||
|
duplicating their records. Home and Messages refer to the same reply activity ID,
|
||||||
|
so editing or finishing it in either surface is immediately consistent.
|
||||||
|
|
||||||
|
For example, an illustrative measurement activity published by Codex:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"id": "weight-2026-09-29",
|
||||||
|
"kind": "measurement",
|
||||||
|
"title": "Log weight",
|
||||||
|
"parentId": "morning-2026-09-29",
|
||||||
|
"occurrenceKey": "2026-09-29@Asia/Tokyo",
|
||||||
|
"payload": { "metric": "weight", "unit": "kg" },
|
||||||
|
"evidenceIds": []
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Codex chooses or recommends the activity; the user supplies the measured number.
|
||||||
|
The app saves the observation and its occurrence time without invoking inference.
|
||||||
|
Corrections preserve the observation history. Completion must reflect that save,
|
||||||
|
not merely a checked box. The agent can read this execution evidence on its next
|
||||||
|
run and maintain life accordingly; the app does not need to infer health advice.
|
||||||
|
|
||||||
|
Recurring activities need stable per-occurrence IDs: publishing tomorrow's
|
||||||
|
routine must not reopen today's completed one. Missing time slots are valid;
|
||||||
|
the user explicitly wants flexible daily ordering rather than a strict calendar.
|
||||||
|
A real appointment can still retain its explicit date/time.
|
||||||
|
|
||||||
|
Reply completion follows the confirmed send state, not draft generation, review
|
||||||
|
or merely pressing Send. A conversation can contain multiple distinct commitments;
|
||||||
|
Codex determines those relationships from sources. The application stores explicit
|
||||||
|
links and user choices without deciding that one reply resolves every commitment.
|
||||||
|
|
||||||
|
The resulting Home can place a weight input, a routine's next step, a reply
|
||||||
|
preview and a simple task together. Use a compact shared outer row and expand
|
||||||
|
the relevant controls in place; detailed conversation/CRM views remain available.
|
||||||
|
Natural-language entry creates an external-agent request, while direct numeric
|
||||||
|
entry, checkboxes and draft edits remain immediate deterministic UI operations.
|
||||||
|
|
||||||
|
## Routine execution and workstyle learning
|
||||||
|
|
||||||
|
The user wants to import ideal routines from life, track their execution in this
|
||||||
|
app, and use external Codex analysis to develop a workable personal workstyle.
|
||||||
|
This adds explicit execution analytics to the earlier reference-only routine
|
||||||
|
concept; it does not imply that all ideals are already practiced or due daily.
|
||||||
|
|
||||||
|
Keep three levels distinct:
|
||||||
|
|
||||||
|
1. **Routine definition:** life source, stable ID, definition revision, purpose,
|
||||||
|
trigger, steps, and completion rule. Codex publishes a structured projection.
|
||||||
|
2. **Trial/activation:** which version is currently being tried, applicable days
|
||||||
|
or situations, and the chosen scope. Importing an ideal into the catalog does
|
||||||
|
not silently activate every step as a daily obligation.
|
||||||
|
3. **Occurrence and observations:** the actual applicable occasion, its frozen
|
||||||
|
definition revision, user actions, recorded values, skips, and corrections.
|
||||||
|
The application is the source for execution history; life links to it rather
|
||||||
|
than maintaining a second completion ledger.
|
||||||
|
|
||||||
|
An approved routine definition can be instantiated deterministically by the app
|
||||||
|
on its recurrence or a user action such as starting/ending work. Codex need not
|
||||||
|
run every time a routine appears. Situational occurrences should come from an
|
||||||
|
explicit trigger or confirmed source, not an assumed event inferred by the UI.
|
||||||
|
Keep occurrence identity stable across delayed cron runs and retries. Do not
|
||||||
|
turn unfinished instances into an ever-growing daily backlog automatically.
|
||||||
|
|
||||||
|
Proposed operating loop:
|
||||||
|
|
||||||
|
- **Import:** Codex reads life and publishes a routine catalog with sources and
|
||||||
|
revisions. Show what is already active and what remains an ideal/candidate.
|
||||||
|
- **Try:** choose a small set and a review window, for example one or two weeks.
|
||||||
|
These durations and counts are starting suggestions, not fixed app rules.
|
||||||
|
- **Execute:** Home presents due/applicable occurrences with kind-specific UI.
|
||||||
|
Save completion evidence as part of the natural action: entering a value,
|
||||||
|
sending a reply, writing a resumption note, or completing a task. Optional
|
||||||
|
friction feedback can be one tap; reporting a reason is not required.
|
||||||
|
- **Review:** the application calculates counts from recorded events. External
|
||||||
|
Codex reads the counts and underlying evidence, relates them to life context,
|
||||||
|
and publishes a short review with observations, uncertainties and proposals.
|
||||||
|
- **Adjust:** the user adopts, modifies or rejects a proposal. Codex updates the
|
||||||
|
ideal/working procedure in life and publishes a new definition revision.
|
||||||
|
Historical occurrences retain their previous revision and completion rule.
|
||||||
|
|
||||||
|
A scheduled daily job can refresh the overview, while a weekly job reviews the
|
||||||
|
experiment. Neither creates additional inference inside the app. The publishing
|
||||||
|
contract will need versioned routine definitions and review artifacts alongside
|
||||||
|
activities; context reads must expose execution observations and aggregate counts.
|
||||||
|
Those are deterministic data contracts, not a new agent runtime.
|
||||||
|
|
||||||
|
### Metrics that preserve meaning
|
||||||
|
|
||||||
|
Show counts and denominators next to percentages. For each routine revision and
|
||||||
|
review window, report completed, partially completed, explicitly skipped,
|
||||||
|
deferred, not applicable, and unrecorded occurrences separately. A past due item
|
||||||
|
without an observation remains unrecorded, not verified non-execution.
|
||||||
|
|
||||||
|
A useful default is **recorded attainment = completed / applicable planned
|
||||||
|
occurrences**, accompanied by observation coverage. For example, 5 completed,
|
||||||
|
1 explicitly skipped and 1 unrecorded out of 7 applicable occasions yields 5/7
|
||||||
|
recorded attainment and 6/7 observed outcomes. It does not prove that the person
|
||||||
|
failed to act on the unrecorded occasion. If a resolved-outcome rate is also
|
||||||
|
shown, label its different denominator explicitly. Keep skipped occasions in
|
||||||
|
the planned denominator; exclude not-applicable ones with a recorded reason and
|
||||||
|
retain plan revisions so exclusions cannot silently rewrite prior performance.
|
||||||
|
|
||||||
|
Do not count a routine parent and every child as independent equivalent successes
|
||||||
|
in a global percentage. Analyze routines and steps at separate levels. Optional
|
||||||
|
ideas that were never scheduled/adopted do not belong in the planned denominator.
|
||||||
|
Explicitly record reduced/partial completion without silently calling it full
|
||||||
|
completion. Measurement adherence is about saving a measurement, not moving the
|
||||||
|
number in a preferred direction; reply counts do not measure relationship quality.
|
||||||
|
|
||||||
|
Attainment alone cannot establish usefulness. Add lightweight, optional feedback
|
||||||
|
on effort and whether a routine helped, plus domain-specific evidence such as a
|
||||||
|
resumption note being available next time. Compare versions over named periods
|
||||||
|
and show sample sizes. Codex can suggest one change to try next, but sparse
|
||||||
|
observations or coincident changes do not establish a causal improvement.
|
||||||
|
|
||||||
|
The review should answer: what was practical, where execution stopped, what was
|
||||||
|
useful, and what small change is worth trying next. Good outcomes can include
|
||||||
|
shortening, reducing frequency, changing the trigger, or retiring a routine.
|
||||||
|
Do not optimize a single global completion score at the expense of the purpose
|
||||||
|
of the work or the user's freedom to change the plan.
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
# Beeper integration research
|
||||||
|
|
||||||
|
Researched 2026-09-28. Proposal only; no integration was installed during research.
|
||||||
|
|
||||||
|
## Current direction
|
||||||
|
|
||||||
|
External Codex performs inference, reads Beeper, and reads/writes life under
|
||||||
|
Rensheng conventions. life is the CRM source of truth, serving the role Scrapbox
|
||||||
|
plays in Beeper Copilot. This application accepts structured publications and
|
||||||
|
provides the UI, persistent execution state, and user feedback. It does not need
|
||||||
|
a new CRM inference runtime or life filesystem editing engine.
|
||||||
|
|
||||||
|
Home combines routines, optional tasks, measurements and communication as
|
||||||
|
activities, with different controls for each kind. A weight entry, reply editor,
|
||||||
|
routine checklist and simple completion control belong in one daily overview.
|
||||||
|
|
||||||
|
See [external agent publishing](agent-publishing-design.md) for the concrete
|
||||||
|
contract and gbrain cron findings, and the
|
||||||
|
[Beeper Copilot screenshot gallery](references/beeper-copilot/README.md) for UI
|
||||||
|
references. This supersedes earlier proposals for app-managed inference and
|
||||||
|
direct app-to-life editing.
|
||||||
|
|
||||||
|
## Verified locally
|
||||||
|
|
||||||
|
- Beeper CLI 0.6.2 and Server run on UM790-Pro.
|
||||||
|
- Public `GET http://127.0.0.1:23373/v1/info` returned Beeper 4.3.149 on Linux,
|
||||||
|
running, remote access disabled and MCP enabled.
|
||||||
|
- Discovery exposes `/v0/mcp`, `/v1/ws`, and `/v1/spec`. The live OpenAPI
|
||||||
|
reports API version 5.0.0, distinct from the application/SDK version domains.
|
||||||
|
- The existing CLI target `um790` successfully retrieved server info using
|
||||||
|
`--read-only`. This is discovery verification, not proof of complete account
|
||||||
|
synchronization or successful message delivery.
|
||||||
|
- No private conversation bodies were fetched, and no Beeper configuration or
|
||||||
|
messages were changed. The screenshots contain public LP demonstrations.
|
||||||
|
|
||||||
|
The [official CLI](https://github.com/beeper/cli) supports headless Server as
|
||||||
|
well as Desktop. No additional GUI machine or remote tunnel is needed here.
|
||||||
|
|
||||||
|
## HTTP, WebSocket, MCP and CLI
|
||||||
|
|
||||||
|
| Interface | Role |
|
||||||
|
| -------------------------------------------- | -------------------------------------------------------------- |
|
||||||
|
| Beeper HTTP / CLI / SDK | Read messages, reconcile changes, perform approved sends |
|
||||||
|
| Beeper WebSocket | Live UI changes or a coalesced signal for the external worker |
|
||||||
|
| App write API, optionally wrapped as CLI/MCP | Receive Codex results without inference |
|
||||||
|
| App context/request API | Expose user decisions, pending requests and revisions |
|
||||||
|
| Browser HTTP + SSE | Persisted views, direct UI operations and update notifications |
|
||||||
|
|
||||||
|
Existing CLI authentication can be reused with bounded, fixed-argument
|
||||||
|
`api get` calls and `watch --target um790 --read-only --json`. Do not expose
|
||||||
|
arbitrary CLI/RPC command strings as agent tools. The
|
||||||
|
[official TypeScript SDK](https://github.com/beeper/desktop-api-js) is an alternative
|
||||||
|
after explicitly provisioning an application credential. Choose one transport
|
||||||
|
inside the adapter; automatic CLI/SDK fallback is unnecessary.
|
||||||
|
|
||||||
|
The [MCP guide](https://developers.beeper.com/desktop-api/mcp/) uses Streamable
|
||||||
|
HTTP. The [changelog](https://developers.beeper.com/desktop-api/changelog/) removes
|
||||||
|
the old Beeper MCP SSE transport; our own browser SSE can remain.
|
||||||
|
|
||||||
|
## Synchronization findings
|
||||||
|
|
||||||
|
The running server's `/v1/spec` explicitly states that WebSocket delivery is
|
||||||
|
at-most-once, has no replay after reconnect, and uses per-connection sequence
|
||||||
|
numbers. The [WebSocket guide](https://developers.beeper.com/desktop-api/websocket-experimental/)
|
||||||
|
also describes experimental status and best-effort payloads. HTTP reconciliation
|
||||||
|
is required after disconnects and periodically. Do not start Codex per message.
|
||||||
|
|
||||||
|
Subscribe before initial reconciliation, track changed chats during it, then
|
||||||
|
refetch those chats. Commit progress only after persistence. Use canonical
|
||||||
|
target/account/chat/message IDs and revisions or content hashes. Edited/deleted
|
||||||
|
evidence invalidates affected drafts. One missing list result does not prove
|
||||||
|
deletion. CLI watch webhooks are best-effort and can drop on queue overflow;
|
||||||
|
a same-machine worker avoids needing a webhook receiver, not the need to reconcile.
|
||||||
|
|
||||||
|
The [message API](https://developers.beeper.com/desktop-api-reference/resources/messages/methods/list/)
|
||||||
|
returns opaque cursors. life's backfill guide records missed/duplicated pages
|
||||||
|
when CLI message IDs were used as cursors, plus API order differing from timestamp
|
||||||
|
order. Do not stop pagination merely because a date boundary was crossed.
|
||||||
|
|
||||||
|
## Reference findings
|
||||||
|
|
||||||
|
### life
|
||||||
|
|
||||||
|
`life/briefs/2026-09-25-executive-support-design.md` describes source-backed reply
|
||||||
|
assistance, explicit review and durable personal context. Existing
|
||||||
|
`life/docs/beeper-backfill.md` and `life/scripts/beeper_backfill.py` implement
|
||||||
|
reviewed, resumable CLI backfill on this machine.
|
||||||
|
|
||||||
|
That helper is not a continuous inbox worker: discovery covers 100 recent chats,
|
||||||
|
pages require review/acknowledgment, and some quotes, forwarded messages and
|
||||||
|
attachments are deliberately excluded. Its output is not a complete conversation
|
||||||
|
view. Reuse its identity/provenance rules. Its guide warns that CLI 0.6.2 raw
|
||||||
|
`status --json` can expose credentials.
|
||||||
|
|
||||||
|
Codex should maintain existing life domain pages. The app displays published
|
||||||
|
CRM projections; user corrections return as durable requests to Codex. It must
|
||||||
|
distinguish pending corrections from confirmed life changes.
|
||||||
|
|
||||||
|
### gbrain
|
||||||
|
|
||||||
|
Inspected revision `e78f1c38b947b053f3a46881340f74f316be855a`. No Beeper-specific
|
||||||
|
connector was found. Its [open-loop design](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/docs/guides/open-loops.md)
|
||||||
|
informs requests, commitments, waiting and source freshness. Its
|
||||||
|
[sync implementation](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/connectors/sync.ts)
|
||||||
|
advances progress after successful ingestion. Apply those principles in the
|
||||||
|
external Codex workflow. The [publishing proposal](agent-publishing-design.md)
|
||||||
|
covers its host scheduler, job execution and transactional write patterns.
|
||||||
|
|
||||||
|
### Rensheng / OpenBrief
|
||||||
|
|
||||||
|
Inspected local revision `c06c4e3f290800752a0c252c84fbca0eed61e45d`.
|
||||||
|
Rensheng's [setup](https://github.com/yutakobayashidev/rensheng/blob/c06c4e3f290800752a0c252c84fbca0eed61e45d/docs/setup.md)
|
||||||
|
reuses existing source tools. OpenBrief's
|
||||||
|
[proposal-only MCP](https://github.com/yutakobayashidev/rensheng/blob/c06c4e3f290800752a0c252c84fbca0eed61e45d/crates/openbrief-app/src/mcp.rs)
|
||||||
|
and [snapshot transport design](https://github.com/yutakobayashidev/rensheng/blob/c06c4e3f290800752a0c252c84fbca0eed61e45d/docs/adr/0004-separate-acp-local-and-remote-transports.md)
|
||||||
|
are useful boundaries. Neither requires adopting its Rust application or
|
||||||
|
duplicating its filesystem workflow in this app.
|
||||||
|
|
||||||
|
### Beeper Copilot
|
||||||
|
|
||||||
|
The [LP](https://beeper-copilot-lp.vercel.app/) was inspected in Chromium at
|
||||||
|
desktop/mobile sizes. The three-pane view, person context, evidence chips and
|
||||||
|
reply review are concrete UI references, documented in the
|
||||||
|
[capture gallery](references/beeper-copilot/README.md). Its linked source repository
|
||||||
|
returned 404 to unauthenticated access; screenshots verify the LP presentation,
|
||||||
|
not backend behavior. Use life in the Scrapbox role. EventKit, macOS deployment
|
||||||
|
and the demo's relationship scoring are not requirements here.
|
||||||
|
|
||||||
|
## Sending
|
||||||
|
|
||||||
|
The [send API](https://developers.beeper.com/desktop-api-reference/resources/messages/methods/send/)
|
||||||
|
returns a pending ID, not delivery confirmation. Bind approval to exact draft
|
||||||
|
revision, recipient and reply target, then resolve pending IDs before marking
|
||||||
|
sent. The inspected schema does not document a client idempotency key, so local
|
||||||
|
deduplication cannot guarantee exactly-once delivery after an ambiguous failure.
|
||||||
|
|
||||||
|
Disable automatic send retries and reconcile uncertain results. The
|
||||||
|
[SDK defaults](https://github.com/beeper/desktop-api-js#retries) include retries on
|
||||||
|
transport errors and timeouts. Publishing a draft/activity must not send a message.
|
||||||
|
|
||||||
|
The current [execution support](execution-support.md) is still fictional and
|
||||||
|
in-memory. Establish the external agent's write interface and persistent typed
|
||||||
|
activities before installing scheduled automation.
|
||||||
@@ -36,13 +36,31 @@ the new communication and journal prototypes do not consume those accounts.
|
|||||||
|
|
||||||
## Daily home
|
## Daily home
|
||||||
|
|
||||||
`/` presents a greeting, a large input, and a flexible plan grouped as
|
`/` presents a greeting, a large input, and a Tiimo-inspired flexible day flow grouped as
|
||||||
Start here, Routines, and If there’s room. There are no fixed time slots.
|
Start here, Routines, and If there’s room. There are no fixed time slots.
|
||||||
Tasks can be reordered, completed, deferred, restored, or followed as routine
|
Tasks can be reordered, completed, deferred, restored, or followed as routine
|
||||||
steps. Communications can be reviewed directly in a home dialog; changes also
|
steps. Communications open their Messages page at
|
||||||
appear in `/support`. Journal entries and corrections appear on the home, and
|
`/support?view=all&conversation=<id>`; browser Back returns to the home with
|
||||||
|
shared outcomes intact. Journal entries and corrections appear on the home, and
|
||||||
reader samples open for reading. Research remains a separate work surface.
|
reader samples open for reading. Research remains a separate work surface.
|
||||||
|
|
||||||
|
Activity blocks expand in place into controls suited to their content: routine
|
||||||
|
steps, a task's next action and resumption note, or a weight input that records
|
||||||
|
an entry in Journal. Completed and deferred activities stay in their original positions with visible
|
||||||
|
status and undo controls. Measurements retain the recorded value in place, and
|
||||||
|
reply previews retain their outcome, so the user need not remember what was done. Expanded activity selection
|
||||||
|
uses the `activity` URL parameter. This remains a session-only mock; a reload
|
||||||
|
restores navigation, not recorded activity data.
|
||||||
|
|
||||||
|
Messages uses a Beeper-inspired person list and visible original conversation,
|
||||||
|
with reply drafting and review next to source-backed context. On narrow screens
|
||||||
|
the list and conversation become separate views. Inbox, set-aside, waiting and
|
||||||
|
archive filters describe communication state; a simulated reply does not prove
|
||||||
|
that a separate promise was fulfilled. References include the saved
|
||||||
|
[Beeper Copilot captures](references/beeper-copilot/README.md),
|
||||||
|
[Beeper Desktop](https://blog.beeper.com/2025/02/24/try-out-the-new-beeper-desktop-and-ios-beta/),
|
||||||
|
and [open-loop research](gbrain-open-loops-research.md).
|
||||||
|
|
||||||
The input currently uses a deterministic English/Japanese mock interpreter, not an LLM.
|
The input currently uses a deterministic English/Japanese mock interpreter, not an LLM.
|
||||||
It proposes typed actions for task creation/status/reordering, routine steps,
|
It proposes typed actions for task creation/status/reordering, routine steps,
|
||||||
contact reply/review or deferral, notes/weight/medication records, and navigation.
|
contact reply/review or deferral, notes/weight/medication records, and navigation.
|
||||||
@@ -62,3 +80,21 @@ The home greeting includes a short prose brief derived from current task and
|
|||||||
communication state. Completed or deferred items leave the brief; the next
|
communication state. Completed or deferred items leave the brief; the next
|
||||||
contact opens directly from the text. A current resumption note takes precedence
|
contact opens directly from the text. A current resumption note takes precedence
|
||||||
over the optional-task suggestion. This is local templated copy, not an LLM report.
|
over the optional-task suggestion. This is local templated copy, not an LLM report.
|
||||||
|
|
||||||
|
## Jev reply review
|
||||||
|
|
||||||
|
The message thread keeps the reply composer at the bottom on wide screens;
|
||||||
|
summary and source context live in the side panel. Expand Reply suggestions to
|
||||||
|
compare candidate wording before editing.
|
||||||
|
|
||||||
|
Opening Review reply calls an authenticated server function using AI SDK
|
||||||
|
`experimental_evaluate` with `typesafe-ai/jev`. Set `AI_GATEWAY_API_KEY` on
|
||||||
|
the server. The draft, recipient role, and original sample messages are sent
|
||||||
|
through Vercel AI Gateway to TypeSafe AI. The model evaluates whether the reply
|
||||||
|
answers the request, stays grounded, and uses an appropriate tone. The UI shows
|
||||||
|
boolean probabilities, not a calibrated pass/fail verdict or generated advice.
|
||||||
|
Editing the draft invalidates its evaluation. Missing configuration and provider
|
||||||
|
failures show an unavailable state; no mock approval is substituted. Review
|
||||||
|
results do not trigger sending, which remains a simulation.
|
||||||
|
|
||||||
|
See [Vercel’s Jev integration](https://vercel.com/changelog/typesafe-ai-jev-now-available-on-ai-gateway).
|
||||||
|
|||||||
@@ -0,0 +1,202 @@
|
|||||||
|
# gbrain open loops and personal execution support
|
||||||
|
|
||||||
|
Research, 2026-09-28. Source inspection at gbrain revision
|
||||||
|
`e78f1c38b947b053f3a46881340f74f316be855a`; upstream tests were read, not executed.
|
||||||
|
Application behavior below is proposed, not implemented. This supplements
|
||||||
|
[external Codex publishing](agent-publishing-design.md).
|
||||||
|
|
||||||
|
## What gbrain implements
|
||||||
|
|
||||||
|
### Scope: ingestion is broader than the open-loop engine
|
||||||
|
|
||||||
|
gbrain as a whole is not Gmail-only. Its implemented ingestion paths include:
|
||||||
|
|
||||||
|
- Google: Gmail, Calendar and Contacts.
|
||||||
|
- GitHub: issues, pull requests, comments, reviews and associated metadata.
|
||||||
|
- ChatGPT and Claude account history through live session-cookie connectors.
|
||||||
|
- Imported agent transcripts, including Codex, Claude Code, OpenClaw and Hermes,
|
||||||
|
plus consumer conversation exports.
|
||||||
|
- Markdown repositories and files, inbox-folder capture, CLI/MCP page writes,
|
||||||
|
and the HTTP ingest endpoint.
|
||||||
|
|
||||||
|
See [data ingestion](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/docs/guides/data-ingestion.md),
|
||||||
|
[GitHub source](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/docs/guides/github-source.md),
|
||||||
|
and the [live connector registry](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/connectors/registry.ts).
|
||||||
|
|
||||||
|
Custom ingestion extensions and agent-side service access are separate from
|
||||||
|
native synchronization. Documentation mentions Slack, iMessage and other
|
||||||
|
messaging services through external agent gateways; this does not establish
|
||||||
|
built-in history sync or open-loop detection for each service. No native Beeper
|
||||||
|
source was identified. The automatic open-loop detection path inspected below
|
||||||
|
is specifically wired to Google email threads, not every ingested page.
|
||||||
|
|
||||||
|
### Detection
|
||||||
|
|
||||||
|
Collection itself is implemented code, not an LLM asked to copy every item.
|
||||||
|
`gbrain sync --source <id>` dispatches to native Google/GitHub synchronization;
|
||||||
|
`gbrain connectors sync chatgpt` fetches conversation history and passes it to
|
||||||
|
the transcript importer. Agents can invoke these commands, but a scheduler can
|
||||||
|
invoke them directly without an interactive agent. Semantic extraction and
|
||||||
|
optional embeddings are separate model-using stages.
|
||||||
|
|
||||||
|
The [email recipe](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/recipes/email-to-brain.md)
|
||||||
|
explicitly says that earlier versions asked agents to build a collector script,
|
||||||
|
while current versions ship that logic in the native connector. The illustrative
|
||||||
|
`scripts/email-collector/email-collector.mjs` path in the deterministic-collectors
|
||||||
|
guide is not a shipped script at this revision. Agent-authored memory and custom
|
||||||
|
external integrations remain distinct ingestion paths; not every integration
|
||||||
|
mentioned in a recipe is a built-in connector.
|
||||||
|
|
||||||
|
The engine operates on Google/Gmail threads. It is not a ready-made Beeper
|
||||||
|
integration. It distinguishes five kinds of unfinished interaction:
|
||||||
|
|
||||||
|
| Kind | Detection |
|
||||||
|
| --------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| Unanswered inbound | Last substantive message is from someone else, owner is in To, at least 24 hours old |
|
||||||
|
| Unanswered outbound | Last substantive message is from owner, external To recipient exists, body contains ASCII `?`, at least 72 hours old |
|
||||||
|
| Commitment owed by me | LLM extracts an unresolved promise by the owner |
|
||||||
|
| Commitment owed to me | LLM extracts an unresolved promise by someone else |
|
||||||
|
| Decision pending | LLM extracts an explicit unresolved choice or question |
|
||||||
|
|
||||||
|
The [detector](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/google/loop-detect.ts)
|
||||||
|
filters machine senders, calendar system messages, self-only threads, muted
|
||||||
|
senders/threads, and inbound list mail or CC-only delivery. Outbound attribution
|
||||||
|
uses the first external To recipient. Evidence includes the last message ID and
|
||||||
|
up to 200 characters of its body.
|
||||||
|
|
||||||
|
These rules are useful candidate detection, not proof that a response is owed.
|
||||||
|
Inbound messages need not contain a request. Outbound requests without `?`,
|
||||||
|
including full-width Japanese `?`, can be missed. In group chat, a third party's
|
||||||
|
message is not evidence that the intended recipient answered.
|
||||||
|
|
||||||
|
The [LLM extractor](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/google/loops-extract.ts)
|
||||||
|
processes eligible threads whose newest message is within 30 days. It sends the
|
||||||
|
newest 12,000 characters, requesting structured direction, counterparty, promise,
|
||||||
|
due date and quotation. Spam/trash and machine-only conversations are excluded;
|
||||||
|
owner participation can override bulk-mail exclusions. Updates remain eligible
|
||||||
|
because they may contain invoices or contracts.
|
||||||
|
|
||||||
|
Important implementation limits:
|
||||||
|
|
||||||
|
- A malformed item rejects the whole parsed response before writes. This does
|
||||||
|
not make the subsequent facts, loops and graph writes one atomic transaction.
|
||||||
|
- A quotation is checked against the supplied text after whitespace
|
||||||
|
normalization. A mismatch removes the quotation **but retains the loop**.
|
||||||
|
- Commitment confidence is a fixed `0.85`; decision confidence is `0.8`.
|
||||||
|
Neither is a calibrated probability or a model-generated confidence estimate.
|
||||||
|
- LLM evidence references a page; it does not require a specific message ID.
|
||||||
|
- Date-only deadlines are stored at `23:59:59Z`, not the user's local end of day.
|
||||||
|
- Deduplication hashes thread, direction and generated text. A paraphrase can
|
||||||
|
produce a second loop for the same real-world promise.
|
||||||
|
|
||||||
|
## Resolution and persistence
|
||||||
|
|
||||||
|
The [store](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/loops/loops-store.ts)
|
||||||
|
keeps `open`, `done`, `dropped` and `stale`, with closure history.
|
||||||
|
|
||||||
|
- A change in whose turn it is automatically closes the appropriate
|
||||||
|
deterministic unanswered loop. Muting or a same-side reminder does not.
|
||||||
|
- Reply-driven closure applies only to `deterministic_thread` loops.
|
||||||
|
- LLM extraction upserts candidates. It does **not** reconcile previously
|
||||||
|
stored promises that disappear from a later extraction. Asking the model to
|
||||||
|
omit fulfilled promises is insufficient to close those records.
|
||||||
|
- Users can mark a loop done or dropped. Reprocessing the same observed activity
|
||||||
|
does not resurrect it; genuinely newer activity can reopen it.
|
||||||
|
- LLM loops become stale after a deadline is over 14 days past **and** activity
|
||||||
|
is over 14 days old, or after 90 days without activity. Stale is not fulfilled.
|
||||||
|
- Dedicated snooze/defer operations are absent. Mutes prevent future detection;
|
||||||
|
they do not close existing loops.
|
||||||
|
|
||||||
|
For example, “I will send the document Friday” and “Thanks!” can settle the
|
||||||
|
reply exchange while leaving the document promise open. Completion needs its
|
||||||
|
own evidence or the user's decision.
|
||||||
|
|
||||||
|
## Scheduling, freshness and ranking
|
||||||
|
|
||||||
|
The detector runs when
|
||||||
|
[Google source processing](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/google/google-source.ts)
|
||||||
|
loads a thread. Delta sync processes threads changed in Gmail history. No
|
||||||
|
dedicated elapsed-time reevaluation was found in that path: a thread skipped
|
||||||
|
inside the grace period may not be reconsidered merely because 24/72 hours pass,
|
||||||
|
until a full sync or another touch. This is a code-based inference, not a
|
||||||
|
reproduced runtime failure.
|
||||||
|
|
||||||
|
Extraction jobs use source, page slug and newest-message timestamp as their key.
|
||||||
|
Pending work has a 500-job ceiling per source. Overflow is logged, but a durable
|
||||||
|
backlog of excluded candidates is not maintained; another thread change may be
|
||||||
|
needed to enqueue them. Successful source sync therefore does not imply complete
|
||||||
|
or current inference results.
|
||||||
|
|
||||||
|
The [waiting operations](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/core/ops/loops.ts)
|
||||||
|
group loops by person, defaulting to three groups. Ranking combines loop count,
|
||||||
|
deadline proximity, age and backlinks to the person's page. It is not a
|
||||||
|
personal-capacity or action-readiness model. Retrieval considers up to 500
|
||||||
|
recent loops before ranking and reports truncation.
|
||||||
|
|
||||||
|
The [CLI](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/src/commands/loops.ts)
|
||||||
|
normally refuses a waiting report if all Google sources are over 24 hours stale.
|
||||||
|
One fresh source permits display, so per-source freshness still matters. Remote
|
||||||
|
operations omit quotations, deep links and entity context that trusted-local
|
||||||
|
calls may expose.
|
||||||
|
|
||||||
|
## Proposed application flow
|
||||||
|
|
||||||
|
Keep life as CRM truth and external Codex as the reasoning and filesystem writer.
|
||||||
|
The app accepts structured proposals and records user decisions and execution.
|
||||||
|
|
||||||
|
1. Beeper supplies conversation events. External scheduled Codex runs also
|
||||||
|
reconsider items whose review time has arrived, even without a new message.
|
||||||
|
2. Codex distinguishes a request, an accepted promise, an unanswered exchange
|
||||||
|
and a decision. A request must not automatically become an accepted obligation.
|
||||||
|
3. Publish candidates with stable identities, source message references,
|
||||||
|
observations, direction, counterparty and any real deadline. Avoid using
|
||||||
|
generated prose as the only identity.
|
||||||
|
4. Home selects a small set of actionable activities alongside routines and
|
||||||
|
measurements. Open loops are candidate context, not automatically today's list.
|
||||||
|
5. Replies open conversation and draft review; document promises open the actual
|
||||||
|
next action. Weight entries and routines retain their own execution controls.
|
||||||
|
6. Keep waiting items available outside the active list. A review date can bring
|
||||||
|
a follow-up back without pretending the other person's work is the user's task.
|
||||||
|
7. Record done, not needed, defer and corrections separately. Codex consumes
|
||||||
|
these decisions and maintains life. New messages alone should not override
|
||||||
|
an explicit rejection of the same obligation.
|
||||||
|
|
||||||
|
Track source observation and inference completion separately. An old successful
|
||||||
|
report can remain visible with its timestamp; incomplete coverage must not be
|
||||||
|
presented as certainty that nothing remains. Old promises should enter review,
|
||||||
|
not silently count as resolved.
|
||||||
|
|
||||||
|
## ADHD-oriented design hypothesis
|
||||||
|
|
||||||
|
The intended benefit is to externalize remembering, choosing, starting and
|
||||||
|
resuming work. These are product hypotheses for personal use, not evidence that
|
||||||
|
this application treats ADHD or that all people with ADHD need the same UI.
|
||||||
|
|
||||||
|
[NICE guidance](https://www.nice.org.uk/guidance/ng87/chapter/recommendations)
|
||||||
|
describes individually chosen environmental modifications, reducing distraction,
|
||||||
|
shorter periods of focus with breaks, and written support for verbal requests.
|
||||||
|
[NIMH guidance](https://www.nimh.nih.gov/health/publications/attention-deficit-hyperactivity-disorder-what-you-need-to-know)
|
||||||
|
includes routines, written reminders and breaking large tasks into manageable
|
||||||
|
steps. These support the general direction, not a specific dashboard layout.
|
||||||
|
|
||||||
|
Design hypotheses to evaluate:
|
||||||
|
|
||||||
|
- Show a few concrete next actions with the material needed to start. Three is
|
||||||
|
a possible initial display limit, not a clinically established number.
|
||||||
|
- Store the broader context out of the user's working memory while keeping it
|
||||||
|
retrievable. Do not turn every detected message into another decision to triage.
|
||||||
|
- Support restarting after an interruption: what was last done, what remains,
|
||||||
|
and a small next step. A missed day must not require clearing a wall of debt.
|
||||||
|
- Keep flexible routines while preserving genuine external deadlines. Hiding
|
||||||
|
real deadlines is different from avoiding a rigid minute-by-minute schedule.
|
||||||
|
- Let ordinary actions use direct controls; natural language is an additional
|
||||||
|
route, not a requirement to formulate a prompt before every action.
|
||||||
|
- Use restrained reminders and easy correction. False positives and repeated
|
||||||
|
resurfacing are additional work, even when recall improves.
|
||||||
|
- Review routine fit and effort as well as completion. Useful questions include
|
||||||
|
whether important promises were missed, whether suggestions were wrong, and
|
||||||
|
whether the app made starting or resuming easier. Avoid optimizing a completion
|
||||||
|
percentage at the cost of meaningful work or rest.
|
||||||
|
|
||||||
|
An initial trial can combine one routine, one genuine promise and one waiting
|
||||||
|
item, then review the actual friction before expanding automatic capture.
|
||||||
@@ -1,5 +1,8 @@
|
|||||||
# Home-agent research
|
# Home-agent research
|
||||||
|
|
||||||
|
Historical design: the WebSocket transport and global active selection described
|
||||||
|
here were replaced by the [AI SDK research runtime](../research-runtime.md).
|
||||||
|
|
||||||
## Product boundary
|
## Product boundary
|
||||||
|
|
||||||
The user starts a research task from the deck workspace. A home agent chooses
|
The user starts a research task from the deck workspace. A home agent chooses
|
||||||
|
|||||||
@@ -34,10 +34,10 @@ flowchart LR
|
|||||||
|
|
||||||
SQLiteを採用する案。端末が増えても、各端末がSQLを実行するのではなく、同じアプリサーバーへアクセスする。デッキ設定とOAuth情報の小さな更新には単一サーバーのSQLiteで始められると判断する。DBファイルを端末間コピーしたり、NAS上のファイルを複数サーバーから直接開いたりしない。
|
SQLiteを採用する案。端末が増えても、各端末がSQLを実行するのではなく、同じアプリサーバーへアクセスする。デッキ設定とOAuth情報の小さな更新には単一サーバーのSQLiteで始められると判断する。DBファイルを端末間コピーしたり、NAS上のファイルを複数サーバーから直接開いたりしない。
|
||||||
|
|
||||||
| 候補 | 今回の評価 |
|
| 候補 | 今回の評価 |
|
||||||
| --- | --- |
|
| -------------------- | ------------------------------------------------------------------------------------------------------------ |
|
||||||
| SQLite | 推奨。別DBサービス不要。ローカルディスク、短いトランザクション、マイグレーション、復元試験を用意する |
|
| SQLite | 推奨。別DBサービス不要。ローカルディスク、短いトランザクション、マイグレーション、復元試験を用意する |
|
||||||
| PostgreSQL | 複数アプリサーバーや大量の並列収集へ進む時に再評価。現時点では運用対象が増える |
|
| PostgreSQL | 複数アプリサーバーや大量の並列収集へ進む時に再評価。現時点では運用対象が増える |
|
||||||
| ブラウザDB+同期基盤 | 採用しない。今回必要なのはオンラインで同じサーバー状態を読むこと。オフライン同期エンジンを導入する必要はない |
|
| ブラウザDB+同期基盤 | 採用しない。今回必要なのはオンラインで同じサーバー状態を読むこと。オフライン同期エンジンを導入する必要はない |
|
||||||
|
|
||||||
SQLiteは同時書き込みが1つという制約がある。複数サーバー・高い書き込み並列度ではclient/server DBを検討する。[SQLiteの用途](https://www.sqlite.org/whentouse.html)
|
SQLiteは同時書き込みが1つという制約がある。複数サーバー・高い書き込み並列度ではclient/server DBを検討する。[SQLiteの用途](https://www.sqlite.org/whentouse.html)
|
||||||
@@ -52,14 +52,14 @@ OAuth callbackは固定のHTTPS URLにする。認可後に戻る主体はブラ
|
|||||||
|
|
||||||
## 保存モデル案
|
## 保存モデル案
|
||||||
|
|
||||||
| 保存対象 | 主な内容 |
|
| 保存対象 | 主な内容 |
|
||||||
| --- | --- |
|
| ------------------------ | ---------------------------------------------------------------------------------------- |
|
||||||
| `decks` | ID、名前、revision、更新日時 |
|
| `decks` | ID、名前、revision、更新日時 |
|
||||||
| `deck_columns` | ID、deck ID、並び順、connection ID、名前、platform固有のsource JSON |
|
| `deck_columns` | ID、deck ID、並び順、connection ID、名前、platform固有のsource JSON |
|
||||||
| `connections` | ID、platform、接続先origin、外部アカウントIDまたはrelay profile参照、表示名、接続状態 |
|
| `connections` | ID、platform、接続先origin、外部アカウントIDまたはrelay profile参照、表示名、接続状態 |
|
||||||
| `connection_credentials` | connection ID、暗号化したアクセストークン、鍵の識別子。通常の接続一覧とは分離 |
|
| `connection_credentials` | connection ID、暗号化したアクセストークン、鍵の識別子。通常の接続一覧とは分離 |
|
||||||
| `oauth_apps` | インスタンスorigin、callback・scope構成、client ID、暗号化したclient secret |
|
| `oauth_apps` | インスタンスorigin、callback・scope構成、client ID、暗号化したclient secret |
|
||||||
| `oauth_attempts` | 短時間有効なstate、開始ブラウザとの束縛、接続先、PKCE verifier、期限、一度限りの消費状態 |
|
| `oauth_attempts` | 短時間有効なstate、開始ブラウザとの束縛、接続先、PKCE verifier、期限、一度限りの消費状態 |
|
||||||
|
|
||||||
単一利用者なので、この段階ではusers/organizations/roles等のテーブルを作らない。
|
単一利用者なので、この段階ではusers/organizations/roles等のテーブルを作らない。
|
||||||
|
|
||||||
@@ -69,16 +69,16 @@ DBには秘密を暗号化して保存し、暗号鍵はDB外の実行時credent
|
|||||||
|
|
||||||
## PR単位のタスク
|
## PR単位のタスク
|
||||||
|
|
||||||
| ID | タスク | 依存 | 完了条件 |
|
| ID | タスク | 依存 | 完了条件 |
|
||||||
| --- | --- | --- | --- |
|
| --- | -------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| T0 | 実行環境とアクセス経路を固定 | なし | 本番HTTPS origin/callback候補を決め、PC・スマホから同じ利用者として接続。Serve以外からのヘッダー偽装を許さない構成を確認。対象Mastodonのバージョン・OAuthメタデータも調べる |
|
| T0 | 実行環境とアクセス経路を固定 | なし | 本番HTTPS origin/callback候補を決め、PC・スマホから同じ利用者として接続。Serve以外からのヘッダー偽装を許さない構成を確認。対象Mastodonのバージョン・OAuthメタデータも調べる |
|
||||||
| T1 | SQLiteと永続ディレクトリを導入 | T0 | 現行Node/Nixで動くdriver・migration方式を実証。`StateDirectory`等でDBを永続化。再起動・アプリ更新後も残り、バックアップから復元できる。依存追加時はflakeのpnpm hash更新まで行う |
|
| T1 | SQLiteと永続ディレクトリを導入 | T0 | 現行Node/Nixで動くdriver・migration方式を実証。`StateDirectory`等でDBを永続化。再起動・アプリ更新後も残り、バックアップから復元できる。依存追加時はflakeのpnpm hash更新まで行う |
|
||||||
| T2 | connectionモデルへTwitterを移行 | T1 | relay profile一覧から接続を作り、カラム・取得・キャッシュ・ページ送りがconnection IDを使う。2つのTwitter接続を混ぜずに並列表示。不明・削除済みの接続はエラーとして残す |
|
| T2 | connectionモデルへTwitterを移行 | T1 | relay profile一覧から接続を作り、カラム・取得・キャッシュ・ページ送りがconnection IDを使う。2つのTwitter接続を混ぜずに並列表示。不明・削除済みの接続はエラーとして残す |
|
||||||
| T3 | デッキをサーバー保存し端末間共有 | T1,T2 | PCで作ったデッキが別ブラウザコンテキストに表示。revision競合で上書きを拒否。WebMCPも同じ保存処理を使う。既存localStorageからの明示インポートを提供し、重複取り込みと既存DBの破壊を防ぐ |
|
| T3 | デッキをサーバー保存し端末間共有 | T1,T2 | PCで作ったデッキが別ブラウザコンテキストに表示。revision競合で上書きを拒否。WebMCPも同じ保存処理を使う。既存localStorageからの明示インポートを提供し、重複取り込みと既存DBの破壊を防ぐ |
|
||||||
| T4 | Mastodon OAuthとトークン保管 | T0,T1,T2 | 接続先登録→認可→callback→本人確認→暗号化保存。同一インスタンス2アカウント・別インスタンス・再接続・解除が動く。拒否/state不一致・期限切れ・再利用を検証 |
|
| T4 | Mastodon OAuthとトークン保管 | T0,T1,T2 | 接続先登録→認可→callback→本人確認→暗号化保存。同一インスタンス2アカウント・別インスタンス・再接続・解除が動く。拒否/state不一致・期限切れ・再利用を検証 |
|
||||||
| T5 | Mastodon取得と投稿正規化 | T4 | ユーザー投稿・リスト・ハッシュタグのカラムを実装し、全文検索を別の能力として扱う。CW・sensitiveメディア・boost・HTML本文を安全に表示。元投稿URLと取得インスタンスのローカルIDを区別 |
|
| T5 | Mastodon取得と投稿正規化 | T4 | ユーザー投稿・リスト・ハッシュタグのカラムを実装し、全文検索を別の能力として扱う。CW・sensitiveメディア・boost・HTML本文を安全に表示。元投稿URLと取得インスタンスのローカルIDを区別 |
|
||||||
| T6 | 複数接続UIとWebMCPを統合 | T3,T5 | 接続管理から追加・再接続・解除。カラムは接続に応じたsourceを選べる。Twitter/Mastodonを同じデッキに並べ、AIも接続一覧を発見して作成・取得できる |
|
| T6 | 複数接続UIとWebMCPを統合 | T3,T5 | 接続管理から追加・再接続・解除。カラムは接続に応じたsourceを選べる。Twitter/Mastodonを同じデッキに並べ、AIも接続一覧を発見して作成・取得できる |
|
||||||
| T7 | 2端末・障害・運用の通し検証 | T3,T4,T6 | 端末AのOAuth接続を端末Bで再認可せず利用。編集競合・接続失効・429・再起動・DB復元の検証。UI/API/WebMCP/ログにトークンが出ないことを確認 |
|
| T7 | 2端末・障害・運用の通し検証 | T3,T4,T6 | 端末AのOAuth接続を端末Bで再認可せず利用。編集競合・接続失効・429・再起動・DB復元の検証。UI/API/WebMCP/ログにトークンが出ないことを確認 |
|
||||||
|
|
||||||
各PRに必要な単体・統合テストを含める。T7までテストを先送りしない。
|
各PRに必要な単体・統合テストを含める。T7までテストを先送りしない。
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,9 @@
|
|||||||
# shadcn workspace migration
|
# shadcn workspace migration
|
||||||
|
|
||||||
|
> Tooling update: Biome has since been replaced by Oxlint for linting (including
|
||||||
|
> the shadcn rules) and Oxfmt for formatting. The checks recorded below describe
|
||||||
|
> the tooling used at the time of this migration; see README for current commands.
|
||||||
|
|
||||||
## Target
|
## Target
|
||||||
|
|
||||||
Replace the custom workspace UI with the Base UI version of shadcn sidebar-09
|
Replace the custom workspace UI with the Base UI version of shadcn sidebar-09
|
||||||
|
|||||||
@@ -0,0 +1,116 @@
|
|||||||
|
# Rensheng, gbrain and the personal workspace
|
||||||
|
|
||||||
|
Research and recommendation, 2026-09-28. No integration was installed or tested.
|
||||||
|
gbrain inspection: `e78f1c38b947b053f3a46881340f74f316be855a`.
|
||||||
|
Rensheng inspection: `c06c4e3f290800752a0c252c84fbca0eed61e45d`.
|
||||||
|
|
||||||
|
## Finding
|
||||||
|
|
||||||
|
There is substantial overlap. Memory, CRM, daily briefs, natural-language task
|
||||||
|
management and agent tools are not unique to this workspace. Its remaining
|
||||||
|
product hypothesis is a low-friction daily execution interface: turn personal
|
||||||
|
context into a few actionable choices, execute through appropriate controls,
|
||||||
|
retain actual outcomes, and improve routines from experience.
|
||||||
|
|
||||||
|
This hypothesis has not been demonstrated by the current mock. Home, Messages
|
||||||
|
and Journal still use in-memory prototype state; Beeper sending and life
|
||||||
|
integration are not connected. Research has real persisted decks and Codex chat.
|
||||||
|
See [current status](../README.md) and [execution prototype](execution-support.md).
|
||||||
|
|
||||||
|
## Honest comparison
|
||||||
|
|
||||||
|
| Concern | gbrain | Rensheng / life | This workspace |
|
||||||
|
| ------------------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
|
||||||
|
| Collection | Native Google/GitHub sync, chat-history connectors, imports and extension points | External agents and existing source tools; shared raw store remains planned | Real research connectors; communication integration proposed |
|
||||||
|
| Durable personal context | Pages, sourced facts, corrections, withdrawal, retrieval and graph | Small source-linked Markdown views, explicit user decisions and domain conventions | Should consume context, not own another CRM |
|
||||||
|
| Daily brief | Agent briefing skills | Briefs generated by external agents | State-derived prose prototype; externally published brief proposed |
|
||||||
|
| Tasks | Agent skill for add, complete, defer and remove in a structured task page | Procedures and context; execution tools retain occurrences | Direct routine/task controls, currently prototype |
|
||||||
|
| Execution by content type | No equivalent unified routine/measurement/reply screen identified in inspected UI | Separate OpenBrief implements attention handoff and return anchors | Content-specific execution controls are the intended focus |
|
||||||
|
| Routine learning | No equivalent occurrence-based routine review identified in inspected implementation | Stores chosen procedures and meaningful review conclusions | Durable events and statistics proposed, not implemented |
|
||||||
|
|
||||||
|
gbrain's [daily-task-manager skill](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/skills/daily-task-manager/SKILL.md)
|
||||||
|
defines stable task IDs, priority, completion archives and deferral. Its
|
||||||
|
[briefing skill](https://github.com/garrytan/gbrain/blob/e78f1c38b947b053f3a46881340f74f316be855a/skills/briefing/SKILL.md)
|
||||||
|
already addresses daily assistance. These are agent workflows, not evidence of
|
||||||
|
a unified execution app, but they are genuine alternatives for a user satisfied
|
||||||
|
with chat and linked source applications.
|
||||||
|
|
||||||
|
Rensheng is not uniquely local or agent-independent: gbrain also emphasizes
|
||||||
|
portable, sourced memory across agents. Rensheng's useful distinction here is
|
||||||
|
the deliberately small, directly readable context model and its operational
|
||||||
|
conventions. It does not ship a replacement for gbrain's complete ingestion and
|
||||||
|
retrieval infrastructure. See [Rensheng's comparison](https://github.com/yutakobayashidev/rensheng/blob/c06c4e3f290800752a0c252c84fbca0eed61e45d/COMPARISON.md).
|
||||||
|
|
||||||
|
## The nearer overlap: OpenBrief
|
||||||
|
|
||||||
|
The Rensheng repository also contains an implemented
|
||||||
|
[OpenBrief](https://github.com/yutakobayashidev/rensheng/blob/c06c4e3f290800752a0c252c84fbca0eed61e45d/docs/openbrief.md)
|
||||||
|
daemon, desktop app and mobile companion. It handles observations, bounded
|
||||||
|
briefs, agent proposals, confirmed decisions and return anchors. Thus resumption
|
||||||
|
support should not be described as absent from the existing Rensheng repository.
|
||||||
|
|
||||||
|
Before integrating that feature, choose one owner for its decisions and return
|
||||||
|
anchors. If OpenBrief remains active, this workspace should reference its
|
||||||
|
records rather than independently maintain conflicting copies. Reusing its
|
||||||
|
runtime is not automatically required: its ACP ownership and desktop collection
|
||||||
|
solve a narrower problem than this app's external-Codex publishing contract.
|
||||||
|
Actual compatibility needs a separate implementation check.
|
||||||
|
|
||||||
|
## Recommended division
|
||||||
|
|
||||||
|
- **Original systems:** messages, calendar events and source evidence.
|
||||||
|
- **life:** relationship context, explicit preferences, accepted goals and routine
|
||||||
|
definitions. External Codex maintains these files. Compiled claims remain
|
||||||
|
traceable to original evidence and user corrections.
|
||||||
|
- **External Codex:** interpretation, candidate selection, reply drafts and
|
||||||
|
periodic review. No new app-owned reasoning engine is required.
|
||||||
|
- **Workspace:** published suggestions, user choices, activity occurrences,
|
||||||
|
measurements and execution events, plus the controls to act on them.
|
||||||
|
- **gbrain, optional:** collection or retrieval infrastructure if a measured
|
||||||
|
source-coverage or search problem justifies operating it. Do not introduce a
|
||||||
|
second authoritative profile, task list and routine definition by default.
|
||||||
|
|
||||||
|
Durable context and execution events have different owners. Copy meaningful
|
||||||
|
outcomes into life through Codex; do not continuously reconcile two independently
|
||||||
|
editable task databases. If gbrain indexes life later, treat the indexed copy as
|
||||||
|
a projection and first verify its source-write behavior. This is an integration
|
||||||
|
proposal, not a tested read-only mode or a promise that whole-brain deployment
|
||||||
|
can be reduced to a dependency-free collector.
|
||||||
|
|
||||||
|
## Options and decision criteria
|
||||||
|
|
||||||
|
1. **Rensheng + Codex + existing apps:** lowest custom application upkeep. Prefer
|
||||||
|
this if a daily brief and source links already lead to action reliably.
|
||||||
|
2. **Rensheng + this workspace + Codex:** recommended experiment for the stated
|
||||||
|
need for routines, measurements and communication in one daily view. The
|
||||||
|
execution interface and recorded outcomes must earn their maintenance cost.
|
||||||
|
3. **Add gbrain underneath:** consider when collection, retrieval or cross-agent
|
||||||
|
memory becomes an observed bottleneck. Its connectors do not supply a native
|
||||||
|
Beeper integration or automatically replace external-Codex reasoning.
|
||||||
|
4. **gbrain + existing chat/source apps:** reasonable if generic memory, Gmail
|
||||||
|
waiting reports and conversational task management satisfy the actual need.
|
||||||
|
In that case, much of this workspace need not be built.
|
||||||
|
|
||||||
|
## Smallest useful experiment
|
||||||
|
|
||||||
|
Run a suggested one-to-two-week trial with one real life routine, one measurement
|
||||||
|
and a small set of real Beeper follow-ups. This duration is a practical starting
|
||||||
|
point, not a clinical protocol. Persist records before adding more mock screens.
|
||||||
|
|
||||||
|
Publish a short brief and actionable items through the proposed
|
||||||
|
[Codex interface](agent-publishing-design.md). Support direct execution, deferral
|
||||||
|
and correction. Keep reply completion distinct from fulfillment of a promise.
|
||||||
|
Retain events across reloads. Use observed results in one Codex-led review and
|
||||||
|
save only adopted routine changes to life.
|
||||||
|
|
||||||
|
Compare with the simpler baseline: Codex writes a daily brief to life and the
|
||||||
|
user acts through existing apps. Assess actual usefulness: easier starts and
|
||||||
|
returns, important commitments missed, false positives, correction effort,
|
||||||
|
and whether the workspace is opened without prompting. Completion rate can
|
||||||
|
support review but must preserve planned denominators, missing coverage and
|
||||||
|
routine-version changes. No specific UI is claimed to treat ADHD.
|
||||||
|
|
||||||
|
If the interface does not reduce friction, simplify to the baseline rather than
|
||||||
|
defend the project through feature count. Defer generic vector search, knowledge
|
||||||
|
graphs, a new agent framework, broad connector coverage and additional dashboard
|
||||||
|
expansion until this execution loop proves useful.
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
# Beeper Copilot UI reference captures
|
||||||
|
|
||||||
|
Source: <https://beeper-copilot-lp.vercel.app/>
|
||||||
|
|
||||||
|
Captured on 2026-09-28 with Chromium through agent-browser. These are screenshots
|
||||||
|
of the public landing page and its animated UI demonstrations, not screenshots
|
||||||
|
of a logged-in production application. Displayed people and conversations come
|
||||||
|
from that page, not this user's Beeper account. Animations can show different
|
||||||
|
stages between captures. No page contents were modified to create the images.
|
||||||
|
|
||||||
|
| Capture | Contents |
|
||||||
|
| ---------------------------------------------- | ---------------------------------------------------------------------------------- |
|
||||||
|
| [Desktop three-pane](desktop-three-pane.png) | Conversation list, conversation body/composer, person context; 1440 × 720 viewport |
|
||||||
|
| [Reply review](desktop-reply-review.png) | Three reply styles, selected candidate, approval button; 1440 × 1080 |
|
||||||
|
| [CRM and evidence](desktop-crm.png) | Person panel, evidence-backed fields, people board; 1440 × 1080 |
|
||||||
|
| [Features](desktop-features.png) | Unified inbox, ghost completion, review and reply suggestions; 1440 × 1080 |
|
||||||
|
| [Feedback](desktop-feedback.png) | Candidate comparison and writing-rule feedback; 1440 × 1080 |
|
||||||
|
| [Desktop hero](desktop-hero.png) | Landing-page introduction and part of the demo; 1440 × 1080 |
|
||||||
|
| [Desktop full page](desktop-full.png) | Entire landing page at 1440px wide |
|
||||||
|
| [Mobile hero](mobile-hero.png) | Landing-page layout at 390 × 844 |
|
||||||
|
| [Mobile conversation](mobile-conversation.png) | The demo's compressed conversation layout at 390 × 844 |
|
||||||
|
|
||||||
|
## Patterns to reuse
|
||||||
|
|
||||||
|
- Three coordinated panes: compact list, a dominant conversation, and persistent
|
||||||
|
person context. In this app the right pane should show Codex-published life
|
||||||
|
context, source references and pending user corrections.
|
||||||
|
- Compact network badges on identities and messages. Keep original conversation
|
||||||
|
identity available even when presenting a person across networks.
|
||||||
|
- A reply review sits near the conversation and composer. Candidate selection,
|
||||||
|
editing and confirmation remain visible steps; approval is distinct from
|
||||||
|
generating or inserting a suggestion.
|
||||||
|
- Evidence chips next to contextual statements provide a path back to messages
|
||||||
|
or the published life source reference.
|
||||||
|
- Suggested actions include their reason and can populate the appropriate
|
||||||
|
editor. The app can render externally produced suggestions without inference.
|
||||||
|
|
||||||
|
The LP's dense right panel and desktop three-pane arrangement are useful
|
||||||
|
references. Its mobile demo squeezes the columns and is not a good mobile
|
||||||
|
navigation model for this app: use list → conversation with an accessible context
|
||||||
|
panel instead. The LP's relationship-phase labels, coverage scores and confidence
|
||||||
|
percentages are demo product choices, not requirements for this personal CRM.
|
||||||
|
|
||||||
|
For Home, borrow the contextual presentation inside a reply activity rather than
|
||||||
|
embedding the full inbox. Weight logging needs a numeric input; a routine needs
|
||||||
|
steps; an optional task needs a simple completion control. These can coexist in
|
||||||
|
one activity list without forcing every activity into a chat layout.
|
||||||
|
|
||||||
|
See [external agent publishing](../../agent-publishing-design.md) for the proposed
|
||||||
|
producer/consumer boundary and typed activity contract.
|
||||||
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 342 KiB |
|
After Width: | Height: | Size: 275 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 322 KiB |
|
After Width: | Height: | Size: 365 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 158 KiB |
@@ -24,15 +24,15 @@ list, user-profile, and conversation pages are not provided.
|
|||||||
unique column IDs within each deck. Each column contains `id`, `title`,
|
unique column IDs within each deck. Each column contains `id`, `title`,
|
||||||
`connectionId`, and a platform-specific `source`.
|
`connectionId`, and a platform-specific `source`.
|
||||||
|
|
||||||
| Platform | Source kind | Conditions |
|
| Platform | Source kind | Conditions |
|
||||||
| --- | --- | --- |
|
| -------- | ----------- | ----------------------------------------------------------------------- |
|
||||||
| Twitter | `search` | Native `query`, `product` (`Top`/`Latest`), `following` |
|
| Twitter | `search` | Native `query`, `product` (`Top`/`Latest`), `following` |
|
||||||
| Twitter | `user` | `target`: handle or X/Twitter profile URL |
|
| Twitter | `user` | `target`: handle or X/Twitter profile URL |
|
||||||
| Twitter | `list` | `target`: numeric list ID or X/Twitter list URL |
|
| Twitter | `list` | `target`: numeric list ID or X/Twitter list URL |
|
||||||
| Mastodon | `search` | `query`; results depend on the instance's search configuration |
|
| Mastodon | `search` | `query`; results depend on the instance's search configuration |
|
||||||
| Mastodon | `user` | `target`: account handle or the connected instance's numeric account ID |
|
| Mastodon | `user` | `target`: account handle or the connected instance's numeric account ID |
|
||||||
| Mastodon | `list` | `target`: numeric list ID for the connected account |
|
| Mastodon | `list` | `target`: numeric list ID for the connected account |
|
||||||
| Mastodon | `hashtag` | `target`: tag without `#`, containing letters, numbers, or underscores |
|
| Mastodon | `hashtag` | `target`: tag without `#`, containing letters, numbers, or underscores |
|
||||||
|
|
||||||
`connectionId` is the account binding, distinct from a deck's name. Twitter
|
`connectionId` is the account binding, distinct from a deck's name. Twitter
|
||||||
connections resolve to profiles discovered from the configured relay.
|
connections resolve to profiles discovered from the configured relay.
|
||||||
@@ -76,9 +76,9 @@ in a transaction. A stale revision is rejected. Save failures remain visible
|
|||||||
and do not report unsaved edits as persisted.
|
and do not report unsaved edits as persisted.
|
||||||
|
|
||||||
Saved decks refresh on focus and every five seconds while visible. Refresh is
|
Saved decks refresh on focus and every five seconds while visible. Refresh is
|
||||||
held while an editor is open. Active selection is a local preference under
|
held while an editor is open. The `deck` URL parameter selects the active view;
|
||||||
`twitter-lite-active-deck`; selecting a deck does not switch another device's
|
selecting a deck does not switch another device's view. Browser history restores
|
||||||
view. Deleting the active deck selects a remaining one. When none remain, the
|
selection, and saved decks can be opened from a copied URL. Deleting the active deck selects a remaining one. When none remain, the
|
||||||
app opens an empty temporary view.
|
app opens an empty temporary view.
|
||||||
|
|
||||||
WebMCP-created views are temporary by default. Temporary copies of saved decks
|
WebMCP-created views are temporary by default. Temporary copies of saved decks
|
||||||
@@ -139,3 +139,10 @@ uses an isolated SQLite database and mock relay through real server functions
|
|||||||
to exercise shared decks across browser contexts, editing, persistence,
|
to exercise shared decks across browser contexts, editing, persistence,
|
||||||
pagination, and native WebMCP. Deterministic automated tests do not require
|
pagination, and native WebMCP. Deterministic automated tests do not require
|
||||||
live SNS credentials.
|
live SNS credentials.
|
||||||
|
|
||||||
|
## Conversation execution
|
||||||
|
|
||||||
|
The [research runtime](research-runtime.md) uses AI SDK and the Codex app-server
|
||||||
|
provider. Conversations are selected by URL, with per-conversation background
|
||||||
|
execution and reconnectable SSE. Opening New chat or another saved conversation
|
||||||
|
does not stop an existing turn or change another browser's selection.
|
||||||
|
|||||||
@@ -0,0 +1,58 @@
|
|||||||
|
# Research runtime
|
||||||
|
|
||||||
|
Research uses Vercel AI SDK 7 `streamText` with
|
||||||
|
`ai-sdk-provider-codex-cli` 2.3's app-server provider. The provider owns its local
|
||||||
|
stdio child, thread resumption, protocol decoding, and abort handling. The app
|
||||||
|
owns accepted requests, account-scoped tools, snapshots, and report validation.
|
||||||
|
The separate WebSocket launcher is removed.
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
|
||||||
|
The provider does not register AI SDK `tools` as Codex dynamic tools. Existing
|
||||||
|
research definitions and executors are exposed with `createSdkMcpServer` instead.
|
||||||
|
Validation, connected-account scope, request budgets, evidence tracking, and
|
||||||
|
read-only SNS behavior remain in `agent-tools.server.ts`. Provider execution is
|
||||||
|
one agent turn; there is no second AI SDK tool loop replaying those calls.
|
||||||
|
Only the registered research tools receive per-tool MCP approval overrides for
|
||||||
|
non-interactive execution. Shell approvals and external MCP servers remain
|
||||||
|
disabled. Failed or truncated Codex turns are treated as failures even when the
|
||||||
|
provider emits a finish event without an error event.
|
||||||
|
Resumed threads that already registered dynamic tools route their calls through
|
||||||
|
`onDynamicToolCall` to the same validated executor.
|
||||||
|
|
||||||
|
## Lifecycle and selection
|
||||||
|
|
||||||
|
The background runner is keyed by conversation ID. Acceptance saves the user
|
||||||
|
message before starting the model. A request ID identifies a new conversation
|
||||||
|
and deduplicates retries within the process. Overlapping turns of the same
|
||||||
|
conversation are rejected, while different conversations can run independently.
|
||||||
|
|
||||||
|
The URL selects a conversation. GET status and SSE subscribe to that ID;
|
||||||
|
selecting history never starts or cancels a turn. Reconnection sends the latest
|
||||||
|
complete snapshot. Closing a browser or changing its URL only detaches a viewer.
|
||||||
|
Only Stop, the execution timeout, or a server-side failure aborts generation.
|
||||||
|
Authentication expiry or logout closes the viewer's stream.
|
||||||
|
|
||||||
|
SQLite retains messages, thread IDs, generated decks, and citations. It no
|
||||||
|
longer stores a global active conversation pointer. Browser views cannot change
|
||||||
|
another browser's selection. After a backend restart, unfinished conversations
|
||||||
|
are marked interrupted and require an explicit follow-up. No turn is replayed
|
||||||
|
automatically. Reports remain files under the configured report root.
|
||||||
|
|
||||||
|
## Streaming presentation
|
||||||
|
|
||||||
|
The model stream uses `smoothStream` with 15 ms pacing and the supplied chunking
|
||||||
|
pattern `/[\u3040-\u309F\u30A0-\u30FF]|\S+\s+/`. The trailing buffer flushes at the
|
||||||
|
text-end event. The existing snapshot SSE remains the UI's reconnectable data
|
||||||
|
channel; an HTTP request's lifetime never owns the model execution.
|
||||||
|
|
||||||
|
Streamdown displays partial Markdown and animates only the latest live answer.
|
||||||
|
Completed messages render immediately. Reduced-motion preferences disable the
|
||||||
|
animation. HTML is skipped, unsafe link protocols are rejected, images remain
|
||||||
|
links, and retrieved post citations keep their deck navigation behavior.
|
||||||
|
`@shadcn/helpers/ai-sdk` provides deterministic streaming fixtures for UI tests.
|
||||||
|
|
||||||
|
References: [Codex provider](https://github.com/ben-vargas/ai-sdk-provider-codex-cli),
|
||||||
|
[AI SDK smoothing](https://ai-sdk.dev/docs/reference/ai-sdk-core/smooth-stream),
|
||||||
|
[Streamdown animation](https://streamdown.ai/docs/animation),
|
||||||
|
[shadcn AI SDK helpers](https://ui.shadcn.com/docs/helpers/ai-sdk).
|
||||||
@@ -9,12 +9,12 @@ tailnet HTTPS address after Mastodon authorization.
|
|||||||
|
|
||||||
## Runtime configuration
|
## Runtime configuration
|
||||||
|
|
||||||
| Variable | Value |
|
| Variable | Value |
|
||||||
| --- | --- |
|
| ---------------------------------- | --------------------------------------------------------- |
|
||||||
| `TWITTER_LITE_ORIGIN` | Exact Serve HTTPS origin, without a trailing slash |
|
| `TWITTER_LITE_ORIGIN` | Exact Serve HTTPS origin, without a trailing slash |
|
||||||
| `TWITTER_LITE_ALLOWED_LOGIN` | Owner's Tailscale login |
|
| `TWITTER_LITE_ALLOWED_LOGIN` | Owner's Tailscale login |
|
||||||
| `TWITTER_LITE_DB_PATH` | Absolute path to the SQLite database on local disk |
|
| `TWITTER_LITE_DB_PATH` | Absolute path to the SQLite database on local disk |
|
||||||
| `TWITTER_LITE_MASTODON_ORIGINS` | Comma-separated approved HTTPS instance origins |
|
| `TWITTER_LITE_MASTODON_ORIGINS` | Comma-separated approved HTTPS instance origins |
|
||||||
| `TWITTER_LITE_CREDENTIAL_KEY_FILE` | Runtime file containing 32 random bytes encoded as base64 |
|
| `TWITTER_LITE_CREDENTIAL_KEY_FILE` | Runtime file containing 32 random bytes encoded as base64 |
|
||||||
|
|
||||||
The credential key is required for Mastodon, but not for Twitter-only use.
|
The credential key is required for Mastodon, but not for Twitter-only use.
|
||||||
|
|||||||
@@ -89,14 +89,14 @@ The server input has two valid states:
|
|||||||
|
|
||||||
```ts
|
```ts
|
||||||
type InitialThreadInput = {
|
type InitialThreadInput = {
|
||||||
tweetId: string
|
tweetId: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
type ContinuedThreadInput = {
|
type ContinuedThreadInput = {
|
||||||
tweetId: string
|
tweetId: string;
|
||||||
conversationId: string
|
conversationId: string;
|
||||||
cursor: string
|
cursor: string;
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
All IDs must be decimal strings. Cursor values are opaque non-empty strings.
|
All IDs must be decimal strings. Cursor values are opaque non-empty strings.
|
||||||
@@ -106,11 +106,11 @@ The successful page shape is:
|
|||||||
|
|
||||||
```ts
|
```ts
|
||||||
type ThreadPage = {
|
type ThreadPage = {
|
||||||
tweets: Post[]
|
tweets: Post[];
|
||||||
focalPost?: Post
|
focalPost?: Post;
|
||||||
conversationId: string
|
conversationId: string;
|
||||||
nextCursor?: string
|
nextCursor?: string;
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
`focalPost` is present only on the initial page. All returned posts pass through
|
`focalPost` is present only on the initial page. All returned posts pass through
|
||||||
@@ -137,7 +137,7 @@ cannot rediscover the conversation root if the cursor page omits that reply.
|
|||||||
|
|
||||||
1. Validate the supplied `tweetId`, `conversationId`, and cursor.
|
1. Validate the supplied `tweetId`, `conversationId`, and cursor.
|
||||||
2. Call `getThreadPaged(conversationId, {
|
2. Call `getThreadPaged(conversationId, {
|
||||||
cursor, maxPages: 1, pageDelayMs: 0 })` once.
|
cursor, maxPages: 1, pageDelayMs: 0 })` once.
|
||||||
3. Return the sanitized tweets with the same conversation ID and new cursor.
|
3. Return the sanitized tweets with the same conversation ID and new cursor.
|
||||||
|
|
||||||
The original `tweetId` remains part of the query identity and validation
|
The original `tweetId` remains part of the query identity and validation
|
||||||
@@ -149,7 +149,10 @@ continuation requests.
|
|||||||
Extend the existing feed request union with:
|
Extend the existing feed request union with:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
{ kind: 'thread'; tweetId: string }
|
{
|
||||||
|
kind: "thread";
|
||||||
|
tweetId: string;
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
The thread query key includes the focal tweet ID. Its initial page parameter is
|
The thread query key includes the focal tweet ID. Its initial page parameter is
|
||||||
|
|||||||
@@ -68,16 +68,16 @@ Work spans two repositories and the Gitea package registry:
|
|||||||
Bird currently hard-codes `product: 'Latest'` in SearchTimeline requests. Add the following public contract:
|
Bird currently hard-codes `product: 'Latest'` in SearchTimeline requests. Add the following public contract:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
export type SearchProduct = 'Top' | 'Latest'
|
export type SearchProduct = "Top" | "Latest";
|
||||||
|
|
||||||
export interface SearchFetchOptions {
|
export interface SearchFetchOptions {
|
||||||
includeRaw?: boolean
|
includeRaw?: boolean;
|
||||||
product?: SearchProduct
|
product?: SearchProduct;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SearchPaginationOptions extends SearchFetchOptions {
|
export interface SearchPaginationOptions extends SearchFetchOptions {
|
||||||
maxPages?: number
|
maxPages?: number;
|
||||||
cursor?: string
|
cursor?: string;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -126,7 +126,7 @@ new TwitterClient({
|
|||||||
relayBaseUrl: process.env.TWITTER_RELAY_BASE_URL,
|
relayBaseUrl: process.env.TWITTER_RELAY_BASE_URL,
|
||||||
profileName: process.env.BIRD_PROFILE_NAME,
|
profileName: process.env.BIRD_PROFILE_NAME,
|
||||||
timeoutMs: 20_000,
|
timeoutMs: 20_000,
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
`TWITTER_RELAY_BASE_URL` is required. `BIRD_PROFILE_NAME` is optional but must be passed explicitly because the Bird library does not read that environment variable itself.
|
`TWITTER_RELAY_BASE_URL` is required. `BIRD_PROFILE_NAME` is optional but must be passed explicitly because the Bird library does not read that environment variable itself.
|
||||||
|
|||||||
@@ -16,3 +16,7 @@ as the anatomy illustration source and clipped in CSS. Source media:
|
|||||||
https://pbs.twimg.com/media/HTE4JWFWUAAnPBt.jpg
|
https://pbs.twimg.com/media/HTE4JWFWUAAnPBt.jpg
|
||||||
The rest of the interface is HTML/CSS with SVG data charts. Reference-specific
|
The rest of the interface is HTML/CSS with SVG data charts. Reference-specific
|
||||||
colors are scoped to `--vital-*` tokens in `vitals.css`.
|
colors are scoped to `--vital-*` tokens in `vitals.css`.
|
||||||
|
|
||||||
|
Sections, tabs, history, chart filters, and detail dialogs are URL state and
|
||||||
|
restore on reload or browser Back/Forward. Simulated climate control values
|
||||||
|
remain local; opening a URL never issues a device command.
|
||||||
|
|||||||
@@ -13,15 +13,15 @@ operations use the same access controls and persistence rules as the UI.
|
|||||||
|
|
||||||
## Workspace tools
|
## Workspace tools
|
||||||
|
|
||||||
| Tool | Input | Behavior |
|
| Tool | Input | Behavior |
|
||||||
| --- | --- | --- |
|
| ------------------ | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|
||||||
| `list_connections` | `{}` | Return connection IDs, platforms, origins, account IDs, display names, and states; never credentials |
|
| `list_connections` | `{}` | Return connection IDs, platforms, origins, account IDs, display names, and states; never credentials |
|
||||||
| `list_decks` | `{}` | Return saved decks and this tab's temporary views, `activeDeckId`, and `storageError` |
|
| `list_decks` | `{}` | Return saved decks and this tab's temporary views, `activeDeckId`, and `storageError` |
|
||||||
| `get_deck` | Optional `deckId` | Read the named or active view, including `persisted` and saved `revision` |
|
| `get_deck` | Optional `deckId` | Read the named or active view, including `persisted` and saved `revision` |
|
||||||
| `set_deck` | Optional `deckId` and `expectedRevision`, required `title` and `columns` | Without an ID, create a temporary view; with an ID, replace and activate that existing view |
|
| `set_deck` | Optional `deckId` and `expectedRevision`, required `title` and `columns` | Without an ID, create a temporary view; with an ID, replace and activate that existing view |
|
||||||
| `save_deck` | `deckId` | Explicitly persist a temporary view; an already saved deck is unchanged |
|
| `save_deck` | `deckId` | Explicitly persist a temporary view; an already saved deck is unchanged |
|
||||||
| `select_deck` | `deckId` | Activate a view; selection remains device-local |
|
| `select_deck` | `deckId` | Activate a view and update the URL; other tabs remain unchanged |
|
||||||
| `delete_deck` | `deckId`, optional `expectedRevision` | Discard a temporary view or delete a saved deck for all devices |
|
| `delete_deck` | `deckId`, optional `expectedRevision` | Discard a temporary view or delete a saved deck for all devices |
|
||||||
|
|
||||||
Read tools return the workspace's current client snapshot, not a fresh server
|
Read tools return the workspace's current client snapshot, not a fresh server
|
||||||
request. Saved definitions refresh on focus and while visible, except during
|
request. Saved definitions refresh on focus and while visible, except during
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { defineConfig } from 'drizzle-kit'
|
import { defineConfig } from "drizzle-kit";
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
dialect: 'sqlite',
|
dialect: "sqlite",
|
||||||
schema: './src/features/storage/schema.ts',
|
schema: "./src/features/storage/schema.ts",
|
||||||
out: './drizzle',
|
out: "./drizzle",
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
DROP TABLE `research_state`;
|
||||||
@@ -0,0 +1,657 @@
|
|||||||
|
{
|
||||||
|
"version": "6",
|
||||||
|
"dialect": "sqlite",
|
||||||
|
"id": "7a44ef34-89ad-4ab4-829d-f6669bd72471",
|
||||||
|
"prevId": "52f68a9d-b9da-4739-9635-b0b5e3e8040b",
|
||||||
|
"tables": {
|
||||||
|
"auth_sessions": {
|
||||||
|
"name": "auth_sessions",
|
||||||
|
"columns": {
|
||||||
|
"token_hash": {
|
||||||
|
"name": "token_hash",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"owner_id": {
|
||||||
|
"name": "owner_id",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"expires_at": {
|
||||||
|
"name": "expires_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"auth_sessions_owner_id_workspace_owner_id_fk": {
|
||||||
|
"name": "auth_sessions_owner_id_workspace_owner_id_fk",
|
||||||
|
"tableFrom": "auth_sessions",
|
||||||
|
"tableTo": "workspace_owner",
|
||||||
|
"columnsFrom": ["owner_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"auth_throttle": {
|
||||||
|
"name": "auth_throttle",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"attempts": {
|
||||||
|
"name": "attempts",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"reset_at": {
|
||||||
|
"name": "reset_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {
|
||||||
|
"auth_throttle_singleton": {
|
||||||
|
"name": "auth_throttle_singleton",
|
||||||
|
"value": "\"auth_throttle\".\"id\" = 1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"connection_credentials": {
|
||||||
|
"name": "connection_credentials",
|
||||||
|
"columns": {
|
||||||
|
"connection_id": {
|
||||||
|
"name": "connection_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"encrypted_token": {
|
||||||
|
"name": "encrypted_token",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"app_id": {
|
||||||
|
"name": "app_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"connection_credentials_connection_id_connections_id_fk": {
|
||||||
|
"name": "connection_credentials_connection_id_connections_id_fk",
|
||||||
|
"tableFrom": "connection_credentials",
|
||||||
|
"tableTo": "connections",
|
||||||
|
"columnsFrom": ["connection_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
},
|
||||||
|
"connection_credentials_app_id_oauth_apps_id_fk": {
|
||||||
|
"name": "connection_credentials_app_id_oauth_apps_id_fk",
|
||||||
|
"tableFrom": "connection_credentials",
|
||||||
|
"tableTo": "oauth_apps",
|
||||||
|
"columnsFrom": ["app_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "restrict",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"connections": {
|
||||||
|
"name": "connections",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"platform": {
|
||||||
|
"name": "platform",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"origin": {
|
||||||
|
"name": "origin",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"account_id": {
|
||||||
|
"name": "account_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"relay_profile": {
|
||||||
|
"name": "relay_profile",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"display_name": {
|
||||||
|
"name": "display_name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"name": "status",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {
|
||||||
|
"connections_account": {
|
||||||
|
"name": "connections_account",
|
||||||
|
"columns": ["platform", "origin", "account_id"],
|
||||||
|
"isUnique": true
|
||||||
|
},
|
||||||
|
"connections_relay_profile": {
|
||||||
|
"name": "connections_relay_profile",
|
||||||
|
"columns": ["origin", "relay_profile"],
|
||||||
|
"isUnique": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"deck_columns": {
|
||||||
|
"name": "deck_columns",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"deck_id": {
|
||||||
|
"name": "deck_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"position": {
|
||||||
|
"name": "position",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"connection_id": {
|
||||||
|
"name": "connection_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"name": "title",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"source": {
|
||||||
|
"name": "source",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {
|
||||||
|
"deck_columns_position": {
|
||||||
|
"name": "deck_columns_position",
|
||||||
|
"columns": ["deck_id", "position"],
|
||||||
|
"isUnique": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"foreignKeys": {
|
||||||
|
"deck_columns_deck_id_decks_id_fk": {
|
||||||
|
"name": "deck_columns_deck_id_decks_id_fk",
|
||||||
|
"tableFrom": "deck_columns",
|
||||||
|
"tableTo": "decks",
|
||||||
|
"columnsFrom": ["deck_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
},
|
||||||
|
"deck_columns_connection_id_connections_id_fk": {
|
||||||
|
"name": "deck_columns_connection_id_connections_id_fk",
|
||||||
|
"tableFrom": "deck_columns",
|
||||||
|
"tableTo": "connections",
|
||||||
|
"columnsFrom": ["connection_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "restrict",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {
|
||||||
|
"deck_columns_deck_id_id_pk": {
|
||||||
|
"columns": ["deck_id", "id"],
|
||||||
|
"name": "deck_columns_deck_id_id_pk"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {
|
||||||
|
"deck_columns_valid_position": {
|
||||||
|
"name": "deck_columns_valid_position",
|
||||||
|
"value": "\"deck_columns\".\"position\" >= 0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"decks": {
|
||||||
|
"name": "decks",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"name": "title",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"revision": {
|
||||||
|
"name": "revision",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false,
|
||||||
|
"default": 1
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {
|
||||||
|
"decks_positive_revision": {
|
||||||
|
"name": "decks_positive_revision",
|
||||||
|
"value": "\"decks\".\"revision\" >= 1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"legacy_imports": {
|
||||||
|
"name": "legacy_imports",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"payload_hash": {
|
||||||
|
"name": "payload_hash",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"deck_ids": {
|
||||||
|
"name": "deck_ids",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"oauth_apps": {
|
||||||
|
"name": "oauth_apps",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"origin": {
|
||||||
|
"name": "origin",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"redirect_uri": {
|
||||||
|
"name": "redirect_uri",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"scopes": {
|
||||||
|
"name": "scopes",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"client_id": {
|
||||||
|
"name": "client_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"encrypted_client_secret": {
|
||||||
|
"name": "encrypted_client_secret",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {
|
||||||
|
"oauth_apps_configuration": {
|
||||||
|
"name": "oauth_apps_configuration",
|
||||||
|
"columns": ["origin", "redirect_uri", "scopes"],
|
||||||
|
"isUnique": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"oauth_attempts": {
|
||||||
|
"name": "oauth_attempts",
|
||||||
|
"columns": {
|
||||||
|
"state_hash": {
|
||||||
|
"name": "state_hash",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"browser_hash": {
|
||||||
|
"name": "browser_hash",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"app_id": {
|
||||||
|
"name": "app_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"encrypted_verifier": {
|
||||||
|
"name": "encrypted_verifier",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"connection_id": {
|
||||||
|
"name": "connection_id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"expires_at": {
|
||||||
|
"name": "expires_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"consumed_at": {
|
||||||
|
"name": "consumed_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {
|
||||||
|
"oauth_attempts_app_id_oauth_apps_id_fk": {
|
||||||
|
"name": "oauth_attempts_app_id_oauth_apps_id_fk",
|
||||||
|
"tableFrom": "oauth_attempts",
|
||||||
|
"tableTo": "oauth_apps",
|
||||||
|
"columnsFrom": ["app_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
},
|
||||||
|
"oauth_attempts_connection_id_connections_id_fk": {
|
||||||
|
"name": "oauth_attempts_connection_id_connections_id_fk",
|
||||||
|
"tableFrom": "oauth_attempts",
|
||||||
|
"tableTo": "connections",
|
||||||
|
"columnsFrom": ["connection_id"],
|
||||||
|
"columnsTo": ["id"],
|
||||||
|
"onDelete": "cascade",
|
||||||
|
"onUpdate": "no action"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"research_sessions": {
|
||||||
|
"name": "research_sessions",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"name": "title",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"status": {
|
||||||
|
"name": "status",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"name": "updated_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"snapshot": {
|
||||||
|
"name": "snapshot",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {}
|
||||||
|
},
|
||||||
|
"workspace_owner": {
|
||||||
|
"name": "workspace_owner",
|
||||||
|
"columns": {
|
||||||
|
"id": {
|
||||||
|
"name": "id",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": true,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"name": "email",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"name": {
|
||||||
|
"name": "name",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"password_hash": {
|
||||||
|
"name": "password_hash",
|
||||||
|
"type": "text",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"onboarding_completed_at": {
|
||||||
|
"name": "onboarding_completed_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": false,
|
||||||
|
"autoincrement": false
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"name": "created_at",
|
||||||
|
"type": "integer",
|
||||||
|
"primaryKey": false,
|
||||||
|
"notNull": true,
|
||||||
|
"autoincrement": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"indexes": {},
|
||||||
|
"foreignKeys": {},
|
||||||
|
"compositePrimaryKeys": {},
|
||||||
|
"uniqueConstraints": {},
|
||||||
|
"checkConstraints": {
|
||||||
|
"workspace_owner_singleton": {
|
||||||
|
"name": "workspace_owner_singleton",
|
||||||
|
"value": "\"workspace_owner\".\"id\" = 1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"views": {},
|
||||||
|
"enums": {},
|
||||||
|
"_meta": {
|
||||||
|
"schemas": {},
|
||||||
|
"tables": {},
|
||||||
|
"columns": {}
|
||||||
|
},
|
||||||
|
"internal": {
|
||||||
|
"indexes": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -36,6 +36,13 @@
|
|||||||
"when": 1790589494499,
|
"when": 1790589494499,
|
||||||
"tag": "0004_good_natasha_romanoff",
|
"tag": "0004_good_natasha_romanoff",
|
||||||
"breakpoints": true
|
"breakpoints": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idx": 5,
|
||||||
|
"version": "6",
|
||||||
|
"when": 1790591720807,
|
||||||
|
"tag": "0005_salty_madripoor",
|
||||||
|
"breakpoints": true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,89 +1,88 @@
|
|||||||
import { basename, dirname, isAbsolute } from 'node:path'
|
import { basename, dirname, isAbsolute } from "node:path";
|
||||||
import AxeBuilder from '@axe-core/playwright'
|
import AxeBuilder from "@axe-core/playwright";
|
||||||
import { test as base } from '@playwright/test'
|
import { test as base } from "@playwright/test";
|
||||||
import {
|
import {
|
||||||
completeOnboarding,
|
completeOnboarding,
|
||||||
createOwner,
|
createOwner,
|
||||||
readAuthState,
|
readAuthState,
|
||||||
signIn,
|
signIn,
|
||||||
} from '../src/features/auth/auth.server'
|
} from "../src/features/auth/auth.server";
|
||||||
import { openDatabase } from '../src/features/storage/database.server'
|
import { openDatabase } from "../src/features/storage/database.server";
|
||||||
|
|
||||||
export const test = base.extend<{
|
export const test = base.extend<{
|
||||||
a11y: () => AxeBuilder
|
a11y: () => AxeBuilder;
|
||||||
resetDecks: undefined
|
resetDecks: undefined;
|
||||||
sessionToken: string
|
sessionToken: string;
|
||||||
}>({
|
}>({
|
||||||
// biome-ignore lint/correctness/noEmptyPattern: Playwright requires destructured fixture arguments.
|
// oxlint-disable-next-line no-empty-pattern -- Playwright requires destructured fixture arguments.
|
||||||
sessionToken: async ({}, use) => {
|
sessionToken: async ({}, use) => {
|
||||||
const path = process.env.TWITTER_LITE_E2E_DB_PATH
|
const path = process.env.TWITTER_LITE_E2E_DB_PATH;
|
||||||
if (!path || !basename(dirname(path)).startsWith('twitter-lite-e2e-'))
|
if (!path || !basename(dirname(path)).startsWith("twitter-lite-e2e-"))
|
||||||
throw new Error('Isolated E2E database is required.')
|
throw new Error("Isolated E2E database is required.");
|
||||||
const database = openDatabase(path)
|
const database = openDatabase(path);
|
||||||
const credentials = {
|
const credentials = {
|
||||||
email: '[email protected]',
|
email: "[email protected]",
|
||||||
password: 'E2E-only-passphrase-2026',
|
password: "E2E-only-passphrase-2026",
|
||||||
}
|
};
|
||||||
process.env.WORKSPACE_SETUP_TOKEN =
|
process.env.WORKSPACE_SETUP_TOKEN = "isolated-e2e-setup-token-not-for-production";
|
||||||
'isolated-e2e-setup-token-not-for-production'
|
|
||||||
const result = readAuthState(database).needsSetup
|
const result = readAuthState(database).needsSetup
|
||||||
? await createOwner(
|
? await createOwner(
|
||||||
{
|
{
|
||||||
...credentials,
|
...credentials,
|
||||||
name: 'Yuta',
|
name: "Yuta",
|
||||||
setupToken: process.env.WORKSPACE_SETUP_TOKEN,
|
setupToken: process.env.WORKSPACE_SETUP_TOKEN,
|
||||||
},
|
},
|
||||||
database,
|
database,
|
||||||
)
|
)
|
||||||
: await signIn(credentials, database)
|
: await signIn(credentials, database);
|
||||||
if (!result.owner.onboardingCompletedAt)
|
if (!result.owner.onboardingCompletedAt)
|
||||||
completeOnboarding(result.sessionToken, { name: 'Yuta' }, database)
|
completeOnboarding(result.sessionToken, { name: "Yuta" }, database);
|
||||||
database.$client.close()
|
database.$client.close();
|
||||||
await use(result.sessionToken)
|
await use(result.sessionToken);
|
||||||
},
|
},
|
||||||
storageState: async ({ sessionToken }, use) => {
|
storageState: async ({ sessionToken }, use) => {
|
||||||
await use({
|
await use({
|
||||||
cookies: [
|
cookies: [
|
||||||
{
|
{
|
||||||
name: 'workspace_session',
|
name: "workspace_session",
|
||||||
value: sessionToken,
|
value: sessionToken,
|
||||||
domain: '127.0.0.1',
|
domain: "127.0.0.1",
|
||||||
path: '/',
|
path: "/",
|
||||||
expires: Math.floor(Date.now() / 1000) + 3600,
|
expires: Math.floor(Date.now() / 1000) + 3600,
|
||||||
httpOnly: true,
|
httpOnly: true,
|
||||||
secure: false,
|
secure: false,
|
||||||
sameSite: 'Lax',
|
sameSite: "Lax",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
origins: [],
|
origins: [],
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
resetDecks: [
|
resetDecks: [
|
||||||
// biome-ignore lint/correctness/noEmptyPattern: Playwright requires destructured fixture arguments.
|
// oxlint-disable-next-line no-empty-pattern -- Playwright requires destructured fixture arguments.
|
||||||
async ({}, use) => {
|
async ({}, use) => {
|
||||||
const path = process.env.TWITTER_LITE_E2E_DB_PATH
|
const path = process.env.TWITTER_LITE_E2E_DB_PATH;
|
||||||
if (
|
if (
|
||||||
!path ||
|
!path ||
|
||||||
!isAbsolute(path) ||
|
!isAbsolute(path) ||
|
||||||
!basename(dirname(path)).startsWith('twitter-lite-e2e-') ||
|
!basename(dirname(path)).startsWith("twitter-lite-e2e-") ||
|
||||||
basename(path) !== 'workspace.sqlite'
|
basename(path) !== "workspace.sqlite"
|
||||||
)
|
)
|
||||||
throw new Error('Isolated E2E database is required.')
|
throw new Error("Isolated E2E database is required.");
|
||||||
const database = openDatabase(path).$client
|
const database = openDatabase(path).$client;
|
||||||
database.pragma('foreign_keys = ON')
|
database.pragma("foreign_keys = ON");
|
||||||
database.exec('DELETE FROM decks; DELETE FROM legacy_imports;')
|
database.exec("DELETE FROM decks; DELETE FROM legacy_imports;");
|
||||||
database.close()
|
database.close();
|
||||||
await use(undefined)
|
await use(undefined);
|
||||||
},
|
},
|
||||||
{ auto: true },
|
{ auto: true },
|
||||||
],
|
],
|
||||||
a11y: async ({ page }, use) => {
|
a11y: async ({ page }, use) => {
|
||||||
await use(() =>
|
await use(() =>
|
||||||
new AxeBuilder({ page })
|
new AxeBuilder({ page })
|
||||||
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
|
.withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
|
||||||
.disableRules(['meta-viewport']),
|
.disableRules(["meta-viewport"]),
|
||||||
)
|
);
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
export { expect } from '@playwright/test'
|
export { expect } from "@playwright/test";
|
||||||
|
|||||||
@@ -1,24 +1,20 @@
|
|||||||
import type { TweetLegacy } from '../generated/twitter-openapi/client.ts'
|
import type { TweetLegacy } from "../generated/twitter-openapi/client.ts";
|
||||||
|
|
||||||
interface TweetLegacyFixtureOptions {
|
interface TweetLegacyFixtureOptions {
|
||||||
conversationId?: string
|
conversationId?: string;
|
||||||
inReplyTo?: string
|
inReplyTo?: string;
|
||||||
replyCount?: number
|
replyCount?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const tweetLegacyFixture = (
|
export const tweetLegacyFixture = (
|
||||||
id: string,
|
id: string,
|
||||||
text: string,
|
text: string,
|
||||||
{
|
{ conversationId = id, inReplyTo, replyCount = 1 }: TweetLegacyFixtureOptions = {},
|
||||||
conversationId = id,
|
|
||||||
inReplyTo,
|
|
||||||
replyCount = 1,
|
|
||||||
}: TweetLegacyFixtureOptions = {},
|
|
||||||
): TweetLegacy => ({
|
): TweetLegacy => ({
|
||||||
bookmark_count: 0,
|
bookmark_count: 0,
|
||||||
bookmarked: false,
|
bookmarked: false,
|
||||||
conversation_id_str: conversationId,
|
conversation_id_str: conversationId,
|
||||||
created_at: 'Mon Jul 13 00:00:00 +0000 2026',
|
created_at: "Mon Jul 13 00:00:00 +0000 2026",
|
||||||
display_text_range: [0, text.length],
|
display_text_range: [0, text.length],
|
||||||
favorite_count: 3,
|
favorite_count: 3,
|
||||||
favorited: false,
|
favorited: false,
|
||||||
@@ -26,10 +22,10 @@ export const tweetLegacyFixture = (
|
|||||||
id_str: id,
|
id_str: id,
|
||||||
...(inReplyTo ? { in_reply_to_status_id_str: inReplyTo } : {}),
|
...(inReplyTo ? { in_reply_to_status_id_str: inReplyTo } : {}),
|
||||||
is_quote_status: false,
|
is_quote_status: false,
|
||||||
lang: 'ja',
|
lang: "ja",
|
||||||
quote_count: 0,
|
quote_count: 0,
|
||||||
reply_count: replyCount,
|
reply_count: replyCount,
|
||||||
retweet_count: 2,
|
retweet_count: 2,
|
||||||
retweeted: false,
|
retweeted: false,
|
||||||
user_id_str: '42',
|
user_id_str: "42",
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,63 +1,53 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
test('owner can open the app but missing or foreign identity is forbidden', async ({
|
test("owner can open the app but missing or foreign identity is forbidden", async ({ request }) => {
|
||||||
request,
|
expect((await request.get("/")).status()).toBe(200);
|
||||||
}) => {
|
expect((await request.get("/", { headers: { "Tailscale-User-Login": "" } })).status()).toBe(403);
|
||||||
expect((await request.get('/')).status()).toBe(200)
|
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await request.get('/', { headers: { 'Tailscale-User-Login': '' } })
|
await request.get("/", {
|
||||||
).status(),
|
headers: { "Tailscale-User-Login": "[email protected]" },
|
||||||
).toBe(403)
|
|
||||||
expect(
|
|
||||||
(
|
|
||||||
await request.get('/', {
|
|
||||||
headers: { 'Tailscale-User-Login': '[email protected]' },
|
|
||||||
})
|
})
|
||||||
).status(),
|
).status(),
|
||||||
).toBe(403)
|
).toBe(403);
|
||||||
})
|
});
|
||||||
|
|
||||||
test('mutations require exact Origin even with same-origin Fetch Metadata', async ({
|
test("mutations require exact Origin even with same-origin Fetch Metadata", async ({ request }) => {
|
||||||
request,
|
expect((await request.post("/")).status()).toBe(403);
|
||||||
}) => {
|
|
||||||
expect((await request.post('/')).status()).toBe(403)
|
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await request.post('/', {
|
await request.post("/", {
|
||||||
headers: {
|
headers: {
|
||||||
Origin: 'https://other.invalid',
|
Origin: "https://other.invalid",
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
"Sec-Fetch-Site": "same-origin",
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
).status(),
|
).status(),
|
||||||
).toBe(403)
|
).toBe(403);
|
||||||
})
|
});
|
||||||
|
|
||||||
test('server functions also reject foreign identity and cross-site calls', async ({
|
test("server functions also reject foreign identity and cross-site calls", async ({
|
||||||
page,
|
page,
|
||||||
request,
|
request,
|
||||||
}) => {
|
}) => {
|
||||||
const serverRequest = page.waitForRequest((request) =>
|
const serverRequest = page.waitForRequest((request) => request.url().includes("/_serverFn/"));
|
||||||
request.url().includes('/_serverFn/'),
|
await page.goto("/deck");
|
||||||
)
|
const url = (await serverRequest).url();
|
||||||
await page.goto('/deck')
|
|
||||||
const url = (await serverRequest).url()
|
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await request.get(url, {
|
await request.get(url, {
|
||||||
headers: {
|
headers: {
|
||||||
'Tailscale-User-Login': '[email protected]',
|
"Tailscale-User-Login": "[email protected]",
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
"Sec-Fetch-Site": "same-origin",
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
).status(),
|
).status(),
|
||||||
).toBe(403)
|
).toBe(403);
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await request.get(url, {
|
await request.get(url, {
|
||||||
headers: { 'Sec-Fetch-Site': 'cross-site' },
|
headers: { "Sec-Fetch-Site": "cross-site" },
|
||||||
})
|
})
|
||||||
).status(),
|
).status(),
|
||||||
).toBe(403)
|
).toBe(403);
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,172 +1,134 @@
|
|||||||
import { openDatabase } from '../../src/features/storage/database.server'
|
import { openDatabase } from "../../src/features/storage/database.server";
|
||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
const origin = 'http://127.0.0.1:4173'
|
const origin = "http://127.0.0.1:4173";
|
||||||
|
|
||||||
test('creates the owner once and enters onboarding with a real session', async ({
|
test("creates the owner once and enters onboarding with a real session", async ({
|
||||||
page,
|
page,
|
||||||
context,
|
context,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? '')
|
const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? "");
|
||||||
db.$client.exec('DELETE FROM workspace_owner; DELETE FROM auth_throttle;')
|
db.$client.exec("DELETE FROM workspace_owner; DELETE FROM auth_throttle;");
|
||||||
db.$client.close()
|
db.$client.close();
|
||||||
await context.clearCookies()
|
await context.clearCookies();
|
||||||
await page.goto('/', { waitUntil: 'networkidle' })
|
await page.goto("/", { waitUntil: "networkidle" });
|
||||||
await expect(page).toHaveURL(/\/setup$/)
|
await expect(page).toHaveURL(/\/setup$/);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await page.getByLabel('Your name', { exact: true }).fill('Yuta')
|
await page.getByLabel("Your name", { exact: true }).fill("Yuta");
|
||||||
await page.getByLabel('Email address').fill('[email protected]')
|
await page.getByLabel("Email address").fill("[email protected]");
|
||||||
await page
|
await page.getByLabel("Password", { exact: true }).fill("E2E-only-passphrase-2026");
|
||||||
.getByLabel('Password', { exact: true })
|
await page.getByLabel("Confirm password", { exact: true }).fill("E2E-only-passphrase-2026");
|
||||||
.fill('E2E-only-passphrase-2026')
|
await page.getByLabel("Setup code").fill("isolated-e2e-setup-token-not-for-production");
|
||||||
await page
|
await page.getByRole("button", { name: "Create account", exact: true }).click();
|
||||||
.getByLabel('Confirm password', { exact: true })
|
await expect(page).toHaveURL(/\/onboarding$/);
|
||||||
.fill('E2E-only-passphrase-2026')
|
await page.waitForLoadState("networkidle");
|
||||||
await page
|
await page.getByRole("button", { name: "Continue", exact: true }).click();
|
||||||
.getByLabel('Setup code')
|
await page.getByRole("button", { name: "Open workspace" }).click();
|
||||||
.fill('isolated-e2e-setup-token-not-for-production')
|
await expect(page.getByRole("heading", { name: "Good morning, Yuta" })).toBeVisible();
|
||||||
await page
|
});
|
||||||
.getByRole('button', { name: 'Create account', exact: true })
|
|
||||||
.click()
|
|
||||||
await expect(page).toHaveURL(/\/onboarding$/)
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
await page.getByRole('button', { name: 'Continue', exact: true }).click()
|
|
||||||
await page.getByRole('button', { name: 'Open workspace' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('heading', { name: 'Good morning, Yuta' }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('requires login for documents, server functions, and live updates', async ({
|
test("requires login for documents, server functions, and live updates", async ({
|
||||||
page,
|
page,
|
||||||
context,
|
context,
|
||||||
}) => {
|
}) => {
|
||||||
const serverRequest = page.waitForRequest((request) =>
|
const serverRequest = page.waitForRequest((request) => request.url().includes("/_serverFn/"));
|
||||||
request.url().includes('/_serverFn/'),
|
await page.goto("/deck");
|
||||||
)
|
const serverUrl = (await serverRequest).url();
|
||||||
await page.goto('/deck')
|
await context.clearCookies();
|
||||||
const serverUrl = (await serverRequest).url()
|
for (const path of ["/api/research/events", serverUrl]) {
|
||||||
await context.clearCookies()
|
|
||||||
for (const path of ['/api/research/events', serverUrl]) {
|
|
||||||
const result = await context.request.get(path, {
|
const result = await context.request.get(path, {
|
||||||
headers: { Origin: origin, 'Sec-Fetch-Site': 'same-origin' },
|
headers: { Origin: origin, "Sec-Fetch-Site": "same-origin" },
|
||||||
})
|
});
|
||||||
expect(result.status()).toBe(401)
|
expect(result.status()).toBe(401);
|
||||||
}
|
}
|
||||||
await page.goto('/journal')
|
await page.goto("/journal");
|
||||||
await expect(page).toHaveURL(/\/login$/)
|
await expect(page).toHaveURL(/\/login(?:\?|$)/);
|
||||||
await expect(
|
await expect(page.getByRole("heading", { name: "Welcome back." })).toBeVisible();
|
||||||
page.getByRole('heading', { name: 'Welcome back.' }),
|
await expect(page.getByRole("link", { name: "Journal", exact: true })).toHaveCount(0);
|
||||||
).toBeVisible()
|
});
|
||||||
await expect(
|
|
||||||
page.getByRole('link', { name: 'Journal', exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('signs in and revokes the session on sign out', async ({
|
test("signs in and revokes the session on sign out", async ({ page, context, a11y }) => {
|
||||||
page,
|
await context.clearCookies();
|
||||||
context,
|
await page.goto("/login", { waitUntil: "networkidle" });
|
||||||
a11y,
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
}) => {
|
await page.getByLabel("Email address").fill("[email protected]");
|
||||||
await context.clearCookies()
|
await page.getByLabel("Password", { exact: true }).fill("Wrong-passphrase-2026");
|
||||||
await page.goto('/login', { waitUntil: 'networkidle' })
|
await page.getByRole("button", { name: "Sign in", exact: true }).click();
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
await expect(page.getByRole("alert")).toContainText("Invalid email or password.");
|
||||||
await page.getByLabel('Email address').fill('[email protected]')
|
await page.getByLabel("Password", { exact: true }).fill("E2E-only-passphrase-2026");
|
||||||
await page
|
await page.getByRole("button", { name: "Sign in", exact: true }).click();
|
||||||
.getByLabel('Password', { exact: true })
|
await expect(page).toHaveURL(`${origin}/`);
|
||||||
.fill('Wrong-passphrase-2026')
|
await page.waitForLoadState("networkidle");
|
||||||
await page.getByRole('button', { name: 'Sign in', exact: true }).click()
|
const token = (await context.cookies()).find((cookie) => cookie.name === "workspace_session");
|
||||||
await expect(page.getByRole('alert')).toContainText(
|
expect(token?.httpOnly).toBe(true);
|
||||||
'Invalid email or password.',
|
expect(token?.sameSite).toBe("Lax");
|
||||||
)
|
await page.getByRole("button", { name: "Manage connected accounts" }).click();
|
||||||
await page
|
await page.getByRole("button", { name: "Sign out", exact: true }).click();
|
||||||
.getByLabel('Password', { exact: true })
|
await expect(page).toHaveURL(/\/login(?:\?|$)/);
|
||||||
.fill('E2E-only-passphrase-2026')
|
const replay = await context.request.get("/api/auth", {
|
||||||
await page.getByRole('button', { name: 'Sign in', exact: true }).click()
|
|
||||||
await expect(page).toHaveURL(`${origin}/`)
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const token = (await context.cookies()).find(
|
|
||||||
(cookie) => cookie.name === 'workspace_session',
|
|
||||||
)
|
|
||||||
expect(token?.httpOnly).toBe(true)
|
|
||||||
expect(token?.sameSite).toBe('Lax')
|
|
||||||
await page.getByRole('button', { name: 'Manage connected accounts' }).click()
|
|
||||||
await page.getByRole('button', { name: 'Sign out', exact: true }).click()
|
|
||||||
await expect(page).toHaveURL(/\/login$/)
|
|
||||||
const replay = await context.request.get('/api/auth', {
|
|
||||||
headers: { Cookie: `workspace_session=${token?.value}` },
|
headers: { Cookie: `workspace_session=${token?.value}` },
|
||||||
})
|
});
|
||||||
expect((await replay.json()).owner).toBeNull()
|
expect((await replay.json()).owner).toBeNull();
|
||||||
await page.goBack()
|
await page.goBack();
|
||||||
await expect(
|
await expect(page.getByRole("link", { name: "Home", exact: true })).toHaveCount(0);
|
||||||
page.getByRole('link', { name: 'Home', exact: true }),
|
});
|
||||||
).toHaveCount(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('requires onboarding and remembers its completion and name', async ({
|
test("requires onboarding and remembers its completion and name", async ({
|
||||||
page,
|
page,
|
||||||
request,
|
request,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? '')
|
const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? "");
|
||||||
db.$client
|
db.$client
|
||||||
.prepare(
|
.prepare("UPDATE workspace_owner SET onboarding_completed_at = NULL WHERE id = 1")
|
||||||
'UPDATE workspace_owner SET onboarding_completed_at = NULL WHERE id = 1',
|
.run();
|
||||||
)
|
|
||||||
.run()
|
|
||||||
try {
|
try {
|
||||||
expect((await request.get('/api/research/events')).status()).toBe(403)
|
expect((await request.get("/api/research/events")).status()).toBe(403);
|
||||||
await page.goto('/', { waitUntil: 'networkidle' })
|
await page.goto("/", { waitUntil: "networkidle" });
|
||||||
await expect(page).toHaveURL(/\/onboarding$/)
|
await expect(page).toHaveURL(/\/onboarding$/);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await page.getByLabel('What should we call you?').fill('Yuta Test')
|
await page.getByLabel("What should we call you?").fill("Yuta Test");
|
||||||
await page.getByRole('button', { name: 'Continue', exact: true }).click()
|
await page.getByRole("button", { name: "Continue", exact: true }).click();
|
||||||
await page.getByRole('button', { name: 'Open workspace' }).click()
|
await page.getByRole("button", { name: "Open workspace" }).click();
|
||||||
await expect(
|
await expect(page.getByRole("heading", { name: "Good morning, Yuta Test" })).toBeVisible();
|
||||||
page.getByRole('heading', { name: 'Good morning, Yuta Test' }),
|
await page.reload();
|
||||||
).toBeVisible()
|
await expect(page.getByRole("heading", { name: "Good morning, Yuta Test" })).toBeVisible();
|
||||||
await page.reload()
|
await page.goto("/onboarding");
|
||||||
await expect(
|
await expect(page).toHaveURL(`${origin}/`);
|
||||||
page.getByRole('heading', { name: 'Good morning, Yuta Test' }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page.goto('/onboarding')
|
|
||||||
await expect(page).toHaveURL(`${origin}/`)
|
|
||||||
} finally {
|
} finally {
|
||||||
db.$client
|
db.$client
|
||||||
.prepare(
|
.prepare("UPDATE workspace_owner SET name = ?, onboarding_completed_at = ? WHERE id = 1")
|
||||||
'UPDATE workspace_owner SET name = ?, onboarding_completed_at = ? WHERE id = 1',
|
.run("Yuta", Date.now());
|
||||||
)
|
db.$client.close();
|
||||||
.run('Yuta', Date.now())
|
|
||||||
db.$client.close()
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
test('rejects cross-origin login and further account registration', async ({
|
test("rejects cross-origin login and further account registration", async ({
|
||||||
request,
|
request,
|
||||||
page,
|
page,
|
||||||
context,
|
context,
|
||||||
}) => {
|
}) => {
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await request.post('/api/auth', {
|
await request.post("/api/auth", {
|
||||||
headers: { Origin: 'https://other.invalid' },
|
headers: { Origin: "https://other.invalid" },
|
||||||
data: { action: 'logout' },
|
data: { action: "logout" },
|
||||||
})
|
})
|
||||||
).status(),
|
).status(),
|
||||||
).toBe(403)
|
).toBe(403);
|
||||||
const result = await request.post('/api/auth', {
|
const result = await request.post("/api/auth", {
|
||||||
headers: { Origin: origin },
|
headers: { Origin: origin },
|
||||||
data: {
|
data: {
|
||||||
action: 'setup',
|
action: "setup",
|
||||||
email: '[email protected]',
|
email: "[email protected]",
|
||||||
name: 'Intruder',
|
name: "Intruder",
|
||||||
password: 'Long-enough-password',
|
password: "Long-enough-password",
|
||||||
setupToken: 'arbitrary-token',
|
setupToken: "arbitrary-token",
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
expect(result.status()).toBe(409)
|
expect(result.status()).toBe(409);
|
||||||
await context.clearCookies()
|
await context.clearCookies();
|
||||||
await page.goto('/setup')
|
await page.goto("/setup");
|
||||||
await expect(page).toHaveURL(/\/login$/)
|
await expect(page).toHaveURL(/\/login(?:\?|$)/);
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,70 +1,52 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
test('opens account management after hydration without inheriting real OAuth configuration', async ({
|
test("opens account management after hydration without inheriting real OAuth configuration", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Rename", includeHidden: true })).toBeEnabled();
|
||||||
page.getByRole('button', { name: 'Rename', includeHidden: true }),
|
const manage = page.getByRole("button", { name: "Manage connected accounts" });
|
||||||
).toBeEnabled()
|
|
||||||
const manage = page.getByRole('button', { name: 'Manage connected accounts' })
|
|
||||||
if (!(await manage.isVisible())) {
|
if (!(await manage.isVisible())) {
|
||||||
await page.getByRole('button', { name: 'Toggle sidebar' }).click()
|
await page.getByRole("button", { name: "Toggle sidebar" }).click();
|
||||||
}
|
}
|
||||||
await expect(manage).toBeEnabled()
|
await expect(manage).toBeEnabled();
|
||||||
await manage.click()
|
await manage.click();
|
||||||
const dialog = page.getByRole('dialog', { name: 'Connected accounts' })
|
const dialog = page.getByRole("dialog", { name: "Connected accounts" });
|
||||||
await expect(dialog).toBeVisible()
|
await expect(dialog).toBeVisible();
|
||||||
await expect(
|
await expect(dialog.getByText("No Mastodon servers have been configured yet.")).toBeVisible();
|
||||||
dialog.getByText('No Mastodon servers have been configured yet.'),
|
await expect(dialog.getByRole("button", { name: "Authorize with Mastodon" })).toHaveCount(0);
|
||||||
).toBeVisible()
|
await page.keyboard.press("Escape");
|
||||||
await expect(
|
await expect(dialog).toHaveCount(0);
|
||||||
dialog.getByRole('button', { name: 'Authorize with Mastodon' }),
|
await expect(manage).toBeFocused();
|
||||||
).toHaveCount(0)
|
});
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await expect(dialog).toHaveCount(0)
|
|
||||||
await expect(manage).toBeFocused()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('opens account management from the inbox footer and restores focus on close', async ({
|
test("opens account management from the inbox footer and restores focus on close", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/inbox')
|
await page.goto("/inbox");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
const manage = page.getByRole('button', { name: 'Manage connected accounts' })
|
const manage = page.getByRole("button", { name: "Manage connected accounts" });
|
||||||
await expect(manage).toBeVisible()
|
await expect(manage).toBeVisible();
|
||||||
await manage.click()
|
await manage.click();
|
||||||
const dialog = page.getByRole('dialog', { name: 'Connected accounts' })
|
const dialog = page.getByRole("dialog", { name: "Connected accounts" });
|
||||||
await expect(dialog).toBeVisible()
|
await expect(dialog).toBeVisible();
|
||||||
await expect(
|
await expect(dialog.getByText("No Mastodon servers have been configured yet.")).toBeVisible();
|
||||||
dialog.getByText('No Mastodon servers have been configured yet.'),
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
).toBeVisible()
|
await page.keyboard.press("Escape");
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
await expect(dialog).toHaveCount(0);
|
||||||
await page.keyboard.press('Escape')
|
await expect(manage).toBeFocused();
|
||||||
await expect(dialog).toHaveCount(0)
|
await expect(page.getByRole("textbox", { name: "Search articles" })).toBeVisible();
|
||||||
await expect(manage).toBeFocused()
|
});
|
||||||
await expect(
|
|
||||||
page.getByRole('textbox', { name: 'Search articles' }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('rejects an unbound OAuth callback without contacting an instance', async ({
|
test("rejects an unbound OAuth callback without contacting an instance", async ({ page }) => {
|
||||||
page,
|
await page.goto("/oauth/mastodon/callback?state=invalid&code=not-a-real-code");
|
||||||
}) => {
|
await expect(page).toHaveURL(/\/deck\?mastodon=failed$/);
|
||||||
await page.goto('/oauth/mastodon/callback?state=invalid&code=not-a-real-code')
|
await expect(page.getByRole("alert")).toContainText("Could not complete Mastodon authorization.");
|
||||||
await expect(page).toHaveURL(/\/deck\?mastodon=failed$/)
|
await expect(page.getByRole("button", { name: "Rename", includeHidden: true })).toBeEnabled();
|
||||||
await expect(page.getByRole('alert')).toContainText(
|
const manage = page.getByRole("button", { name: "Manage connected accounts" });
|
||||||
'Could not complete Mastodon authorization.',
|
|
||||||
)
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'Rename', includeHidden: true }),
|
|
||||||
).toBeEnabled()
|
|
||||||
const manage = page.getByRole('button', { name: 'Manage connected accounts' })
|
|
||||||
if (!(await manage.isVisible())) {
|
if (!(await manage.isVisible())) {
|
||||||
await page.getByRole('button', { name: 'Toggle sidebar' }).click()
|
await page.getByRole("button", { name: "Toggle sidebar" }).click();
|
||||||
}
|
}
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Manage connected accounts" })).toBeEnabled();
|
||||||
page.getByRole('button', { name: 'Manage connected accounts' }),
|
});
|
||||||
).toBeEnabled()
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,296 +1,230 @@
|
|||||||
import type { Page } from '@playwright/test'
|
import type { Page } from "@playwright/test";
|
||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
import { closeMobileSidebar, showDeckManagement } from '../workspace'
|
import { closeMobileSidebar, showDeckManagement } from "../workspace";
|
||||||
|
|
||||||
async function addColumn(
|
async function addColumn(
|
||||||
page: Page,
|
page: Page,
|
||||||
title: string,
|
title: string,
|
||||||
query: string,
|
query: string,
|
||||||
profile = 'e2e',
|
profile = "e2e",
|
||||||
kind = 'search',
|
kind = "search",
|
||||||
) {
|
) {
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
await page.getByRole('button', { name: 'Add column', exact: true }).click()
|
await page.getByRole("button", { name: "Add column", exact: true }).click();
|
||||||
const editor = page.getByRole('form', { name: 'Add column', exact: true })
|
const editor = page.getByRole("form", { name: "Add column", exact: true });
|
||||||
await editor.getByLabel('Column name', { exact: true }).fill(title)
|
await editor.getByLabel("Column name", { exact: true }).fill(title);
|
||||||
await editor
|
await editor
|
||||||
.getByRole('combobox', { name: 'Connection profile', exact: true })
|
.getByRole("combobox", { name: "Connection profile", exact: true })
|
||||||
.selectOption({ label: profile })
|
.selectOption({ label: profile });
|
||||||
|
await editor.getByRole("combobox", { name: "Column type", exact: true }).selectOption(kind);
|
||||||
await editor
|
await editor
|
||||||
.getByRole('combobox', { name: 'Column type', exact: true })
|
.getByLabel(kind === "search" ? "Twitter search query" : kind === "user" ? "User" : "List", {
|
||||||
.selectOption(kind)
|
exact: true,
|
||||||
await editor
|
})
|
||||||
.getByLabel(
|
.fill(query);
|
||||||
kind === 'search'
|
await editor.getByRole("button", { name: "Add and search" }).click();
|
||||||
? 'Twitter search query'
|
await closeMobileSidebar(page);
|
||||||
: kind === 'user'
|
|
||||||
? 'User'
|
|
||||||
: 'List',
|
|
||||||
{ exact: true },
|
|
||||||
)
|
|
||||||
.fill(query)
|
|
||||||
await editor.getByRole('button', { name: 'Add and search' }).click()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(
|
await expect(
|
||||||
page
|
page.getByRole("region", { name: title, exact: true }).locator("article").first(),
|
||||||
.getByRole('region', { name: title, exact: true })
|
).toBeVisible();
|
||||||
.locator('article')
|
|
||||||
.first(),
|
|
||||||
).toBeVisible()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
test.beforeEach(async ({ page }) => {
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Save as deck", exact: true })).toBeEnabled();
|
||||||
page.getByRole('button', { name: 'Save as deck', exact: true }),
|
await page.getByRole("button", { name: "Save as deck", exact: true }).click();
|
||||||
).toBeEnabled()
|
await showDeckManagement(page);
|
||||||
await page.getByRole('button', { name: 'Save as deck', exact: true }).click()
|
await expect(page.getByText("Saved to server · Shared across devices")).toBeVisible();
|
||||||
await showDeckManagement(page)
|
await closeMobileSidebar(page);
|
||||||
await expect(
|
});
|
||||||
page.getByText('Saved to server · Shared across devices'),
|
|
||||||
).toBeVisible()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('binds identical searches to independent profiles through paging, editing and reload', async ({
|
test("binds identical searches to independent profiles through paging, editing and reload", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await addColumn(page, '通常の接続', 'same-query')
|
await addColumn(page, "通常の接続", "same-query");
|
||||||
await addColumn(page, '別の接続', 'same-query', 'alternate')
|
await addColumn(page, "別の接続", "same-query", "alternate");
|
||||||
const first = page.getByRole('region', { name: '通常の接続', exact: true })
|
const first = page.getByRole("region", { name: "通常の接続", exact: true });
|
||||||
const second = page.getByRole('region', { name: '別の接続', exact: true })
|
const second = page.getByRole("region", { name: "別の接続", exact: true });
|
||||||
await expect(
|
await expect(first.getByText("Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
first.getByText('Latest · all page 1', { exact: true }),
|
await expect(second.getByText("alternate · Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
).toBeVisible()
|
await first.getByRole("button", { name: "Load more" }).click();
|
||||||
await expect(
|
await expect(first.locator("article")).toHaveCount(2);
|
||||||
second.getByText('alternate · Latest · all page 1', { exact: true }),
|
await expect(second.locator("article")).toHaveCount(1);
|
||||||
).toBeVisible()
|
await second.getByRole("button", { name: "Load more" }).click();
|
||||||
await first.getByRole('button', { name: 'Load more' }).click()
|
await expect(second.getByText("alternate · Latest · all page 2")).toBeVisible();
|
||||||
await expect(first.locator('article')).toHaveCount(2)
|
await second.getByRole("button", { name: "Actions for 別の接続" }).click();
|
||||||
await expect(second.locator('article')).toHaveCount(1)
|
await page.getByRole("menuitem", { name: "Edit", exact: true }).click();
|
||||||
await second.getByRole('button', { name: 'Load more' }).click()
|
|
||||||
await expect(
|
|
||||||
second.getByText('alternate · Latest · all page 2'),
|
|
||||||
).toBeVisible()
|
|
||||||
await second.getByRole('button', { name: 'Actions for 別の接続' }).click()
|
|
||||||
await page.getByRole('menuitem', { name: 'Edit', exact: true }).click()
|
|
||||||
await page
|
await page
|
||||||
.getByRole('combobox', { name: 'Connection profile', exact: true })
|
.getByRole("combobox", { name: "Connection profile", exact: true })
|
||||||
.selectOption({ label: 'e2e' })
|
.selectOption({ label: "e2e" });
|
||||||
await page.getByRole('button', { name: 'Save changes' }).click()
|
await page.getByRole("button", { name: "Save changes" }).click();
|
||||||
await expect(
|
await expect(second.getByText("Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
second.getByText('Latest · all page 1', { exact: true }),
|
await expect(second.getByText("alternate · Latest · all page 1")).toHaveCount(0);
|
||||||
).toBeVisible()
|
await page.reload();
|
||||||
await expect(second.getByText('alternate · Latest · all page 1')).toHaveCount(
|
await expect(second.getByText("Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
0,
|
await expect(first.locator("article")).toHaveCount(1);
|
||||||
)
|
});
|
||||||
await page.reload()
|
|
||||||
await expect(
|
|
||||||
second.getByText('Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(first.locator('article')).toHaveCount(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('creates, switches, renames and deletes persisted deck profiles', async ({
|
test("creates, switches, renames and deletes persisted deck profiles", async ({ page }) => {
|
||||||
|
await page.getByRole("button", { name: "Rename" }).click();
|
||||||
|
await page.getByLabel("Research topic / deck name").fill("最初の調査");
|
||||||
|
await page.getByRole("button", { name: "Save name" }).click();
|
||||||
|
await addColumn(page, "最初の観点", "first-deck");
|
||||||
|
await showDeckManagement(page);
|
||||||
|
await page.getByRole("button", { name: "Create deck", exact: true }).click();
|
||||||
|
await page.getByLabel("New deck name").fill("別の調査");
|
||||||
|
await page.getByRole("button", { name: "Create", exact: true }).click();
|
||||||
|
await expect(page.locator(".deck-column")).toHaveCount(0);
|
||||||
|
await addColumn(page, "別の観点", "second-deck", "alternate");
|
||||||
|
await showDeckManagement(page);
|
||||||
|
await page.getByLabel("Deck profile", { exact: true }).selectOption({ label: "最初の調査" });
|
||||||
|
await closeMobileSidebar(page);
|
||||||
|
await expect(page.locator(".deck-column h2")).toHaveText(["最初の観点"]);
|
||||||
|
await page.reload();
|
||||||
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("最初の調査");
|
||||||
|
await showDeckManagement(page);
|
||||||
|
await page.getByLabel("Deck profile", { exact: true }).selectOption({ label: "別の調査" });
|
||||||
|
await closeMobileSidebar(page);
|
||||||
|
await expect(page.locator(".deck-column h2")).toHaveText(["別の観点"]);
|
||||||
|
await showDeckManagement(page);
|
||||||
|
await page.getByRole("button", { name: "Delete deck", exact: true }).click();
|
||||||
|
await page.getByRole("button", { name: "Delete", exact: true }).click();
|
||||||
|
await page.reload();
|
||||||
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("最初の調査");
|
||||||
|
await showDeckManagement(page);
|
||||||
|
await expect(page.getByLabel("Deck profile", { exact: true }).locator("option")).toHaveCount(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("reads user and list timelines within columns and reorders, deletes and restores them", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await page.getByRole('button', { name: 'Rename' }).click()
|
await addColumn(page, "アカウント", "yuta", "alternate", "user");
|
||||||
await page.getByLabel('Research topic / deck name').fill('最初の調査')
|
await addColumn(page, "リストの投稿", "1234567890", "e2e", "list");
|
||||||
await page.getByRole('button', { name: 'Save name' }).click()
|
const user = page.getByRole("region", { name: "アカウント", exact: true });
|
||||||
await addColumn(page, '最初の観点', 'first-deck')
|
const list = page.getByRole("region", { name: "リストの投稿", exact: true });
|
||||||
await showDeckManagement(page)
|
await expect(user.getByText("alternate profile page 1")).toBeVisible();
|
||||||
await page.getByRole('button', { name: 'Create deck', exact: true }).click()
|
await expect(list.getByText("list page 1")).toBeVisible();
|
||||||
await page.getByLabel('New deck name').fill('別の調査')
|
await list.getByRole("button", { name: "Load more" }).click();
|
||||||
await page.getByRole('button', { name: 'Create', exact: true }).click()
|
await expect(list.getByText("list page 2")).toBeVisible();
|
||||||
await expect(page.locator('.deck-column')).toHaveCount(0)
|
await list.getByRole("button", { name: "Actions for リストの投稿" }).click();
|
||||||
await addColumn(page, '別の観点', 'second-deck', 'alternate')
|
await page.getByRole("menuitem", { name: "Move リストの投稿 left" }).click();
|
||||||
await showDeckManagement(page)
|
await expect(page.locator(".deck-column h2")).toHaveText(["リストの投稿", "アカウント"]);
|
||||||
await page
|
await list.getByRole("button", { name: "Actions for リストの投稿" }).click();
|
||||||
.getByLabel('Deck profile', { exact: true })
|
await page.getByRole("menuitem", { name: "Delete リストの投稿" }).click();
|
||||||
.selectOption({ label: '最初の調査' })
|
await page.getByRole("button", { name: "Undo" }).click();
|
||||||
await closeMobileSidebar(page)
|
await expect(page.locator(".deck-column h2")).toHaveText(["リストの投稿", "アカウント"]);
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['最初の観点'])
|
await page.reload();
|
||||||
await page.reload()
|
await expect(user.getByText("alternate profile page 1")).toBeVisible();
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('最初の調査')
|
await expect(list.getByText("list page 1")).toBeVisible();
|
||||||
await showDeckManagement(page)
|
});
|
||||||
await page
|
|
||||||
.getByLabel('Deck profile', { exact: true })
|
|
||||||
.selectOption({ label: '別の調査' })
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['別の観点'])
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await page.getByRole('button', { name: 'Delete deck', exact: true }).click()
|
|
||||||
await page.getByRole('button', { name: 'Delete', exact: true }).click()
|
|
||||||
await page.reload()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('最初の調査')
|
|
||||||
await showDeckManagement(page)
|
|
||||||
await expect(
|
|
||||||
page.getByLabel('Deck profile', { exact: true }).locator('option'),
|
|
||||||
).toHaveCount(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('reads user and list timelines within columns and reorders, deletes and restores them', async ({
|
test("keeps other columns usable when pagination fails and retries that column", async ({
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await addColumn(page, 'アカウント', 'yuta', 'alternate', 'user')
|
|
||||||
await addColumn(page, 'リストの投稿', '1234567890', 'e2e', 'list')
|
|
||||||
const user = page.getByRole('region', { name: 'アカウント', exact: true })
|
|
||||||
const list = page.getByRole('region', { name: 'リストの投稿', exact: true })
|
|
||||||
await expect(user.getByText('alternate profile page 1')).toBeVisible()
|
|
||||||
await expect(list.getByText('list page 1')).toBeVisible()
|
|
||||||
await list.getByRole('button', { name: 'Load more' }).click()
|
|
||||||
await expect(list.getByText('list page 2')).toBeVisible()
|
|
||||||
await list.getByRole('button', { name: 'Actions for リストの投稿' }).click()
|
|
||||||
await page.getByRole('menuitem', { name: 'Move リストの投稿 left' }).click()
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText([
|
|
||||||
'リストの投稿',
|
|
||||||
'アカウント',
|
|
||||||
])
|
|
||||||
await list.getByRole('button', { name: 'Actions for リストの投稿' }).click()
|
|
||||||
await page.getByRole('menuitem', { name: 'Delete リストの投稿' }).click()
|
|
||||||
await page.getByRole('button', { name: 'Undo' }).click()
|
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText([
|
|
||||||
'リストの投稿',
|
|
||||||
'アカウント',
|
|
||||||
])
|
|
||||||
await page.reload()
|
|
||||||
await expect(user.getByText('alternate profile page 1')).toBeVisible()
|
|
||||||
await expect(list.getByText('list page 1')).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps other columns usable when pagination fails and retries that column', async ({
|
|
||||||
page,
|
page,
|
||||||
}, testInfo) => {
|
}, testInfo) => {
|
||||||
await addColumn(page, '失敗する検索', `retry-deck-${testInfo.project.name}`)
|
await addColumn(page, "失敗する検索", `retry-deck-${testInfo.project.name}`);
|
||||||
await addColumn(page, '別の検索', 'independent-deck')
|
await addColumn(page, "別の検索", "independent-deck");
|
||||||
const failed = page.getByRole('region', { name: '失敗する検索', exact: true })
|
const failed = page.getByRole("region", { name: "失敗する検索", exact: true });
|
||||||
const other = page.getByRole('region', { name: '別の検索', exact: true })
|
const other = page.getByRole("region", { name: "別の検索", exact: true });
|
||||||
await failed.getByRole('button', { name: 'Load more' }).click()
|
await failed.getByRole("button", { name: "Load more" }).click();
|
||||||
await expect(failed.getByRole('alert')).toBeVisible()
|
await expect(failed.getByRole("alert")).toBeVisible();
|
||||||
await expect(failed.locator('article')).toHaveCount(1)
|
await expect(failed.locator("article")).toHaveCount(1);
|
||||||
await other.getByRole('button', { name: 'Load more' }).click()
|
await other.getByRole("button", { name: "Load more" }).click();
|
||||||
await expect(other.locator('article')).toHaveCount(2)
|
await expect(other.locator("article")).toHaveCount(2);
|
||||||
await failed.getByRole('button', { name: 'Retry' }).click()
|
await failed.getByRole("button", { name: "Retry" }).click();
|
||||||
await expect(failed.locator('article')).toHaveCount(2)
|
await expect(failed.locator("article")).toHaveCount(2);
|
||||||
})
|
});
|
||||||
|
|
||||||
test('keeps the deck and editor accessible within narrow viewports', async ({
|
test("keeps the deck and editor accessible within narrow viewports", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}, testInfo) => {
|
}, testInfo) => {
|
||||||
await addColumn(page, '日本語の反応', 'WebMCP lang:ja')
|
await addColumn(page, "日本語の反応", "WebMCP lang:ja");
|
||||||
await addColumn(page, '海外の反応', 'WebMCP lang:en', 'alternate')
|
await addColumn(page, "海外の反応", "WebMCP lang:en", "alternate");
|
||||||
await addColumn(page, '公式アカウント', 'OpenAI', 'e2e', 'user')
|
await addColumn(page, "公式アカウント", "OpenAI", "e2e", "user");
|
||||||
for (const width of [320, 375, 414, 768]) {
|
for (const width of [320, 375, 414, 768]) {
|
||||||
await page.setViewportSize({ width, height: 900 })
|
await page.setViewportSize({ width, height: 900 });
|
||||||
expect(
|
expect(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth)).toBe(
|
||||||
await page.evaluate(
|
false,
|
||||||
() => document.documentElement.scrollWidth > innerWidth,
|
);
|
||||||
),
|
expect(await page.evaluate(() => document.documentElement.scrollHeight <= innerHeight)).toBe(
|
||||||
).toBe(false)
|
true,
|
||||||
expect(
|
);
|
||||||
await page.evaluate(
|
const board = await page.locator(".deck-board").boundingBox();
|
||||||
() => document.documentElement.scrollHeight <= innerHeight,
|
expect(board).not.toBeNull();
|
||||||
),
|
expect((board?.y ?? 0) + (board?.height ?? 0)).toBeLessThanOrEqual(901);
|
||||||
).toBe(true)
|
|
||||||
const board = await page.locator('.deck-board').boundingBox()
|
|
||||||
expect(board).not.toBeNull()
|
|
||||||
expect((board?.y ?? 0) + (board?.height ?? 0)).toBeLessThanOrEqual(901)
|
|
||||||
}
|
}
|
||||||
await page.setViewportSize({
|
await page.setViewportSize({
|
||||||
width: testInfo.project.name === 'desktop' ? 1440 : 393,
|
width: testInfo.project.name === "desktop" ? 1440 : 393,
|
||||||
height: 900,
|
height: 900,
|
||||||
})
|
});
|
||||||
await expect(page.getByRole('navigation', { name: 'Columns' })).toHaveCount(0)
|
await expect(page.getByRole("navigation", { name: "Columns" })).toHaveCount(0);
|
||||||
await expect(
|
await expect(page.getByRole("heading", { name: "公式アカウント", exact: true })).toBeVisible();
|
||||||
page.getByRole('heading', { name: '公式アカウント', exact: true }),
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
).toBeVisible()
|
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
await page.screenshot({
|
await page.screenshot({
|
||||||
path: testInfo.outputPath('deck-populated.png'),
|
path: testInfo.outputPath("deck-populated.png"),
|
||||||
fullPage: true,
|
fullPage: true,
|
||||||
})
|
});
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
await page.getByRole('button', { name: 'Add column', exact: true }).click()
|
await page.getByRole("button", { name: "Add column", exact: true }).click();
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await page.screenshot({
|
await page.screenshot({
|
||||||
path: testInfo.outputPath('deck.png'),
|
path: testInfo.outputPath("deck.png"),
|
||||||
fullPage: true,
|
fullPage: true,
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
test('closes the column editor with Escape and restores focus without applying edits', async ({
|
test("closes the column editor with Escape and restores focus without applying edits", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
const opener = page.getByRole('button', { name: 'Add column', exact: true })
|
const opener = page.getByRole("button", { name: "Add column", exact: true });
|
||||||
await opener.click()
|
await opener.click();
|
||||||
await expect(
|
await expect(page.getByRole("dialog", { name: "Add column", exact: true })).toBeVisible();
|
||||||
page.getByRole('dialog', { name: 'Add column', exact: true }),
|
await page.getByLabel("Column name", { exact: true }).fill("キャンセルする観点");
|
||||||
).toBeVisible()
|
await page.keyboard.press("Escape");
|
||||||
await page
|
await expect(page.getByRole("dialog", { name: "Add column", exact: true })).toHaveCount(0);
|
||||||
.getByLabel('Column name', { exact: true })
|
await expect(opener).toBeFocused();
|
||||||
.fill('キャンセルする観点')
|
await expect(page.locator(".deck-column")).toHaveCount(0);
|
||||||
await page.keyboard.press('Escape')
|
await opener.click();
|
||||||
await expect(
|
await expect(page.getByLabel("Column name", { exact: true })).toHaveValue("");
|
||||||
page.getByRole('dialog', { name: 'Add column', exact: true }),
|
});
|
||||||
).toHaveCount(0)
|
|
||||||
await expect(opener).toBeFocused()
|
|
||||||
await expect(page.locator('.deck-column')).toHaveCount(0)
|
|
||||||
await opener.click()
|
|
||||||
await expect(page.getByLabel('Column name', { exact: true })).toHaveValue('')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('does not overwrite unreadable storage on reload', async ({ page }) => {
|
test("does not overwrite unreadable storage on reload", async ({ page }) => {
|
||||||
await page.evaluate(() =>
|
await page.evaluate(() => localStorage.setItem("twitter-lite-research-deck", "{broken"));
|
||||||
localStorage.setItem('twitter-lite-research-deck', '{broken'),
|
await page.reload();
|
||||||
)
|
await expect(page.getByRole("alert")).toContainText("Unable to load");
|
||||||
await page.reload()
|
expect(await page.evaluate(() => localStorage.getItem("twitter-lite-research-deck"))).toBe(
|
||||||
await expect(page.getByRole('alert')).toContainText('Unable to load')
|
"{broken",
|
||||||
expect(
|
);
|
||||||
await page.evaluate(() =>
|
});
|
||||||
localStorage.getItem('twitter-lite-research-deck'),
|
|
||||||
),
|
|
||||||
).toBe('{broken')
|
|
||||||
})
|
|
||||||
|
|
||||||
test('selects a list from the column profile catalog and refreshes it on profile change', async ({
|
test("selects a list from the column profile catalog and refreshes it on profile change", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
await page.getByRole('button', { name: 'Add column', exact: true }).click()
|
await page.getByRole("button", { name: "Add column", exact: true }).click();
|
||||||
await page.getByLabel('Column name', { exact: true }).fill('購読リスト')
|
await page.getByLabel("Column name", { exact: true }).fill("購読リスト");
|
||||||
await page
|
await page
|
||||||
.getByRole('combobox', { name: 'Connection profile', exact: true })
|
.getByRole("combobox", { name: "Connection profile", exact: true })
|
||||||
.selectOption({ label: 'e2e' })
|
.selectOption({ label: "e2e" });
|
||||||
|
await page.getByRole("combobox", { name: "Column type", exact: true }).selectOption("list");
|
||||||
|
await expect(page.getByRole("button", { name: "My E2E List", exact: true })).toBeVisible();
|
||||||
await page
|
await page
|
||||||
.getByRole('combobox', { name: 'Column type', exact: true })
|
.getByRole("combobox", { name: "Connection profile", exact: true })
|
||||||
.selectOption('list')
|
.selectOption({ label: "alternate" });
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "My E2E List", exact: true })).toHaveCount(0);
|
||||||
page.getByRole('button', { name: 'My E2E List', exact: true }),
|
await page.getByRole("button", { name: "Alternate List", exact: true }).click();
|
||||||
).toBeVisible()
|
await expect(page.getByLabel("List", { exact: true })).toHaveValue("1234567890");
|
||||||
await page
|
await page.getByRole("button", { name: "Add and search" }).click();
|
||||||
.getByRole('combobox', { name: 'Connection profile', exact: true })
|
await closeMobileSidebar(page);
|
||||||
.selectOption({ label: 'alternate' })
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'My E2E List', exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'Alternate List', exact: true })
|
|
||||||
.click()
|
|
||||||
await expect(page.getByLabel('List', { exact: true })).toHaveValue(
|
|
||||||
'1234567890',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: 'Add and search' }).click()
|
|
||||||
await closeMobileSidebar(page)
|
|
||||||
await expect(
|
await expect(
|
||||||
page
|
page
|
||||||
.getByRole('region', { name: '購読リスト', exact: true })
|
.getByRole("region", { name: "購読リスト", exact: true })
|
||||||
.getByText('list page 1', { exact: true }),
|
.getByText("list page 1", { exact: true }),
|
||||||
).toBeVisible()
|
).toBeVisible();
|
||||||
})
|
});
|
||||||
|
|
||||||
test('keeps an open draft through remote edits and rejects its stale save', async ({
|
test("keeps an open draft through remote edits and rejects its stale save", async ({
|
||||||
page,
|
page,
|
||||||
browser,
|
browser,
|
||||||
baseURL,
|
baseURL,
|
||||||
@@ -298,124 +232,96 @@ test('keeps an open draft through remote edits and rejects its stale save', asyn
|
|||||||
const other = await browser.newContext({
|
const other = await browser.newContext({
|
||||||
storageState: await page.context().storageState(),
|
storageState: await page.context().storageState(),
|
||||||
baseURL,
|
baseURL,
|
||||||
extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
|
extraHTTPHeaders: { "Tailscale-User-Login": "[email protected]" },
|
||||||
})
|
});
|
||||||
try {
|
try {
|
||||||
const device = await other.newPage()
|
const device = await other.newPage();
|
||||||
await device.goto('/deck')
|
await device.goto("/deck");
|
||||||
await page.getByRole('button', { name: 'Rename' }).click()
|
await page.getByRole("button", { name: "Rename" }).click();
|
||||||
await page.getByLabel('Research topic / deck name').fill('編集中の名前')
|
await page.getByLabel("Research topic / deck name").fill("編集中の名前");
|
||||||
await device.getByRole('button', { name: 'Rename' }).click()
|
await device.getByRole("button", { name: "Rename" }).click();
|
||||||
await device.getByLabel('Research topic / deck name').fill('別の端末の変更')
|
await device.getByLabel("Research topic / deck name").fill("別の端末の変更");
|
||||||
await device.getByRole('button', { name: 'Save name' }).click()
|
await device.getByRole("button", { name: "Save name" }).click();
|
||||||
await expect(device.getByRole('heading', { level: 1 })).toHaveText(
|
await expect(device.getByRole("heading", { level: 1 })).toHaveText("別の端末の変更");
|
||||||
'別の端末の変更',
|
await page.evaluate(() => window.dispatchEvent(new Event("focus")));
|
||||||
)
|
await expect(page.getByLabel("Research topic / deck name")).toHaveValue("編集中の名前");
|
||||||
await page.evaluate(() => window.dispatchEvent(new Event('focus')))
|
await page.getByRole("button", { name: "Save name" }).click();
|
||||||
await expect(page.getByLabel('Research topic / deck name')).toHaveValue(
|
await expect(page.getByRole("alert")).toContainText("This deck changed on another device");
|
||||||
'編集中の名前',
|
await expect(page.getByLabel("Research topic / deck name")).toHaveValue("編集中の名前");
|
||||||
)
|
await page.keyboard.press("Escape");
|
||||||
await page.getByRole('button', { name: 'Save name' }).click()
|
await page.getByRole("button", { name: "Reload latest deck" }).click();
|
||||||
await expect(page.getByRole('alert')).toContainText(
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("別の端末の変更");
|
||||||
'This deck changed on another device',
|
|
||||||
)
|
|
||||||
await expect(page.getByLabel('Research topic / deck name')).toHaveValue(
|
|
||||||
'編集中の名前',
|
|
||||||
)
|
|
||||||
await page.keyboard.press('Escape')
|
|
||||||
await page.getByRole('button', { name: 'Reload latest deck' }).click()
|
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
|
||||||
'別の端末の変更',
|
|
||||||
)
|
|
||||||
} finally {
|
} finally {
|
||||||
await other.close()
|
await other.close();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
test('imports old browser decks explicitly and avoids duplicate imports after retry', async ({
|
test("imports old browser decks explicitly and avoids duplicate imports after retry", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
const legacy = {
|
const legacy = {
|
||||||
version: 2,
|
version: 2,
|
||||||
activeDeckId: 'old',
|
activeDeckId: "old",
|
||||||
decks: [
|
decks: [
|
||||||
{
|
{
|
||||||
id: 'old',
|
id: "old",
|
||||||
title: '以前の調査',
|
title: "以前の調査",
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
id: 'a',
|
id: "a",
|
||||||
title: '以前の観点',
|
title: "以前の観点",
|
||||||
profileName: 'e2e',
|
profileName: "e2e",
|
||||||
source: {
|
source: {
|
||||||
platform: 'twitter',
|
platform: "twitter",
|
||||||
kind: 'search',
|
kind: "search",
|
||||||
query: 'WebMCP',
|
query: "WebMCP",
|
||||||
product: 'Latest',
|
product: "Latest",
|
||||||
following: false,
|
following: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
await page.evaluate(
|
await page.evaluate(
|
||||||
(legacy) =>
|
(legacy) => localStorage.setItem("twitter-lite-research-deck", JSON.stringify(legacy)),
|
||||||
localStorage.setItem(
|
|
||||||
'twitter-lite-research-deck',
|
|
||||||
JSON.stringify(legacy),
|
|
||||||
),
|
|
||||||
legacy,
|
legacy,
|
||||||
)
|
);
|
||||||
await page.reload()
|
await page.reload();
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
const selector = page.getByLabel('Deck profile', { exact: true })
|
const selector = page.getByLabel("Deck profile", { exact: true });
|
||||||
await expect(selector.locator('option')).toHaveCount(1)
|
await expect(selector.locator("option")).toHaveCount(1);
|
||||||
await closeMobileSidebar(page)
|
await closeMobileSidebar(page);
|
||||||
await page.getByRole('button', { name: 'Import legacy decks' }).click()
|
await page.getByRole("button", { name: "Import legacy decks" }).click();
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
await expect(selector.locator('option')).toHaveCount(2)
|
await expect(selector.locator("option")).toHaveCount(2);
|
||||||
await selector.selectOption({ label: '以前の調査' })
|
await selector.selectOption({ label: "以前の調査" });
|
||||||
await closeMobileSidebar(page)
|
await closeMobileSidebar(page);
|
||||||
await expect(
|
await expect(page.getByText("Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
page.getByText('Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page.evaluate(
|
await page.evaluate(
|
||||||
(legacy) =>
|
(legacy) => localStorage.setItem("twitter-lite-research-deck", JSON.stringify(legacy)),
|
||||||
localStorage.setItem(
|
|
||||||
'twitter-lite-research-deck',
|
|
||||||
JSON.stringify(legacy),
|
|
||||||
),
|
|
||||||
legacy,
|
legacy,
|
||||||
)
|
);
|
||||||
await page.reload()
|
await page.reload();
|
||||||
await page.getByRole('button', { name: 'Import legacy decks' }).click()
|
await page.getByRole("button", { name: "Import legacy decks" }).click();
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Import legacy decks" })).toHaveCount(0);
|
||||||
page.getByRole('button', { name: 'Import legacy decks' }),
|
await showDeckManagement(page);
|
||||||
).toHaveCount(0)
|
await expect(selector.locator("option")).toHaveCount(2);
|
||||||
await showDeckManagement(page)
|
});
|
||||||
await expect(selector.locator('option')).toHaveCount(2)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('preserves a new deck dialog and its draft across the mobile breakpoint', async ({
|
test("preserves a new deck dialog and its draft across the mobile breakpoint", async ({ page }) => {
|
||||||
page,
|
await showDeckManagement(page);
|
||||||
}) => {
|
await page.getByRole("button", { name: "Create deck", exact: true }).click();
|
||||||
await showDeckManagement(page)
|
const dialog = page.getByRole("dialog", { name: "Create deck", exact: true });
|
||||||
await page.getByRole('button', { name: 'Create deck', exact: true }).click()
|
await dialog.getByLabel("New deck name").fill("画面を回転しても残る調査");
|
||||||
const dialog = page.getByRole('dialog', { name: 'Create deck', exact: true })
|
|
||||||
await dialog.getByLabel('New deck name').fill('画面を回転しても残る調査')
|
|
||||||
for (const width of [1024, 375, 1024]) {
|
for (const width of [1024, 375, 1024]) {
|
||||||
await page.setViewportSize({ width, height: 900 })
|
await page.setViewportSize({ width, height: 900 });
|
||||||
await expect(dialog).toHaveCount(1)
|
await expect(dialog).toHaveCount(1);
|
||||||
await expect(dialog).toBeVisible()
|
await expect(dialog).toBeVisible();
|
||||||
await expect(dialog.getByLabel('New deck name')).toHaveValue(
|
await expect(dialog.getByLabel("New deck name")).toHaveValue("画面を回転しても残る調査");
|
||||||
'画面を回転しても残る調査',
|
await expect(page.locator("#new-deck-title")).toHaveCount(1);
|
||||||
)
|
|
||||||
await expect(page.locator('#new-deck-title')).toHaveCount(1)
|
|
||||||
}
|
}
|
||||||
await dialog.getByRole('button', { name: 'Create', exact: true }).click()
|
await dialog.getByRole("button", { name: "Create", exact: true }).click();
|
||||||
await expect(dialog).toHaveCount(0)
|
await expect(dialog).toHaveCount(0);
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("画面を回転しても残る調査");
|
||||||
'画面を回転しても残る調査',
|
});
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,139 +1,189 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
test('previews a natural-language memo and shares the executed record with journal', async ({
|
test("executes routine steps and records a measurement in the shared journal", async ({
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.goto('/')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const memo = '明日のレビューは導線から確認する'
|
|
||||||
await page.getByRole('textbox', { name: 'Home input' }).fill(`Note: ${memo}`)
|
|
||||||
await page.getByRole('button', { name: 'Preview action' }).click()
|
|
||||||
const execute = page.getByRole('button', { name: 'Apply', exact: true })
|
|
||||||
await expect(execute).toBeVisible()
|
|
||||||
await execute.click()
|
|
||||||
await page.getByRole('link', { name: 'Journal', exact: true }).first().click()
|
|
||||||
await expect(page.getByRole('article', { name: 'Note entry' })).toContainText(
|
|
||||||
memo,
|
|
||||||
)
|
|
||||||
await page.getByRole('link', { name: 'Home', exact: true }).first().click()
|
|
||||||
await expect(page.getByRole('textbox', { name: 'Home input' })).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps the home usable on narrow screens', async ({
|
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}, testInfo) => {
|
}, testInfo) => {
|
||||||
await page.goto('/')
|
await page.goto("/");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
for (const width of [320, 375, 768]) {
|
await page.getByRole("button", { name: /Morning routine 0 of 3/ }).click();
|
||||||
await page.setViewportSize({ width, height: 850 })
|
await expect(page).toHaveURL(/activity=task/);
|
||||||
await expect(
|
await page.getByRole("checkbox", { name: /Drink water/ }).check();
|
||||||
page.getByRole('textbox', { name: 'Home input' }),
|
await expect(page.getByRole("button", { name: "Finish routine" })).toBeDisabled();
|
||||||
).toBeVisible()
|
await page.getByRole("checkbox", { name: /Get ready/ }).check();
|
||||||
expect(
|
await page.getByRole("checkbox", { name: /Have breakfast/ }).check();
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
).toBe(width)
|
await page.screenshot({ path: testInfo.outputPath("home-routine.png"), fullPage: true });
|
||||||
await page.screenshot({ path: testInfo.outputPath(`home-${width}.png`) })
|
await page.getByRole("button", { name: "Finish routine" }).click();
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
await page.getByRole("button", { name: /Record weight A quick check-in/ }).click();
|
||||||
}
|
await page.getByRole("spinbutton", { name: "Weight", exact: true }).fill("65.2");
|
||||||
})
|
await page.getByRole("button", { name: "Save measurement" }).click();
|
||||||
|
await expect(
|
||||||
|
page.getByRole("button", { name: /Record weight Recorded · 65.2 kg/ }),
|
||||||
|
).toBeVisible();
|
||||||
|
await page.getByRole("link", { name: "Journal", exact: true }).first().click();
|
||||||
|
await expect(page.getByRole("article", { name: "Weight entry" })).toContainText("65.2 kg");
|
||||||
|
await page.getByRole("link", { name: "Home", exact: true }).first().click();
|
||||||
|
await expect(page.getByRole("button", { name: "Restore Morning routine" })).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
test('adds tasks only after confirmation and can defer and restore them', async ({
|
test("shows the day flow and conversation context at desktop width", async ({ page }, testInfo) => {
|
||||||
|
await page.setViewportSize({ width: 1440, height: 1080 });
|
||||||
|
await page.goto("/");
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
await expect(page.getByRole("region", { name: "Today’s plan" })).toBeVisible();
|
||||||
|
await page.screenshot({ path: testInfo.outputPath("home-desktop.png") });
|
||||||
|
await page.goto("/support?conversation=design-review");
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
await expect(page.getByRole("textbox", { name: "Reply", exact: true })).toBeVisible();
|
||||||
|
await page.screenshot({ path: testInfo.outputPath("messages-desktop.png") });
|
||||||
|
});
|
||||||
|
|
||||||
|
test("previews a natural-language memo and shares the executed record with journal", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/')
|
await page.goto("/");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
const input = page.getByRole('textbox', { name: 'Home input' })
|
const memo = "明日のレビューは導線から確認する";
|
||||||
const complete = page.getByRole('button', {
|
await page.getByRole("textbox", { name: "Home input" }).fill(`Note: ${memo}`);
|
||||||
name: 'Complete grocery shopping',
|
await page.getByRole("button", { name: "Preview action" }).click();
|
||||||
exact: true,
|
const execute = page.getByRole("button", { name: "Apply", exact: true });
|
||||||
})
|
await expect(execute).toBeVisible();
|
||||||
await input.fill('Add grocery shopping')
|
await execute.click();
|
||||||
await page.getByRole('button', { name: 'Preview action' }).click()
|
await page.getByRole("link", { name: "Journal", exact: true }).first().click();
|
||||||
await expect(complete).toHaveCount(0)
|
await expect(page.getByRole("article", { name: "Note entry" })).toContainText(memo);
|
||||||
await page.getByRole('button', { name: 'Apply', exact: true }).click()
|
await page.getByRole("link", { name: "Home", exact: true }).first().click();
|
||||||
await expect(complete).toBeVisible()
|
await expect(page.getByRole("textbox", { name: "Home input" })).toBeVisible();
|
||||||
await input.fill('Defer grocery shopping')
|
});
|
||||||
await page.getByRole('button', { name: 'Preview action' }).click()
|
|
||||||
await expect(complete).toBeVisible()
|
|
||||||
await page.getByRole('button', { name: 'Apply', exact: true }).click()
|
|
||||||
await expect(complete).toHaveCount(0)
|
|
||||||
await page.locator('.home-rest summary').click()
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'Restore grocery shopping', exact: true })
|
|
||||||
.click()
|
|
||||||
await complete.click()
|
|
||||||
await expect(complete).toHaveCount(0)
|
|
||||||
await page.locator('.home-rest summary').click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'Restore grocery shopping', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('resolves communication within home and carries the status to the shared queue', async ({
|
test("keeps the home usable on narrow screens", async ({ page, a11y }, testInfo) => {
|
||||||
|
await page.goto("/");
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
for (const width of [320, 375, 414, 768]) {
|
||||||
|
await page.setViewportSize({ width, height: 850 });
|
||||||
|
await expect(page.getByRole("textbox", { name: "Home input" })).toBeVisible();
|
||||||
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
|
await page.screenshot({ path: testInfo.outputPath(`home-${width}.png`) });
|
||||||
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test("adds tasks only after confirmation and can defer and restore them", async ({ page }) => {
|
||||||
|
await page.goto("/");
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
const input = page.getByRole("textbox", { name: "Home input" });
|
||||||
|
const complete = page.getByRole("button", {
|
||||||
|
name: "Complete grocery shopping",
|
||||||
|
exact: true,
|
||||||
|
});
|
||||||
|
await input.fill("Add grocery shopping");
|
||||||
|
await page.getByRole("button", { name: "Preview action" }).click();
|
||||||
|
await expect(complete).toHaveCount(0);
|
||||||
|
await page.getByRole("button", { name: "Apply", exact: true }).click();
|
||||||
|
await expect(complete).toBeVisible();
|
||||||
|
await input.fill("Defer grocery shopping");
|
||||||
|
await page.getByRole("button", { name: "Preview action" }).click();
|
||||||
|
await expect(complete).toBeVisible();
|
||||||
|
await page.getByRole("button", { name: "Apply", exact: true }).click();
|
||||||
|
await expect(complete).toHaveCount(0);
|
||||||
|
await page.getByRole("button", { name: "Restore grocery shopping", exact: true }).click();
|
||||||
|
await complete.click();
|
||||||
|
await expect(complete).toHaveCount(0);
|
||||||
|
await expect(
|
||||||
|
page.getByRole("button", { name: "Restore grocery shopping", exact: true }),
|
||||||
|
).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("opens a conversation page from home and retains outcomes on return", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/')
|
await page.goto("/");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
await page
|
const conversationLink = page.getByRole("link", { name: "Open conversation with Haruka Aoki" });
|
||||||
.getByRole('button', { name: 'Open conversation with Haruka Aoki' })
|
await expect(conversationLink).toHaveAttribute("href", /conversation=design-review/);
|
||||||
.click()
|
await conversationLink.click();
|
||||||
const dialog = page.getByRole('dialog', {
|
await expect(page).toHaveURL(/\/support\?.*conversation=design-review/);
|
||||||
name: 'Conversation with Haruka Aoki',
|
await expect(page.getByRole("dialog")).toHaveCount(0);
|
||||||
})
|
await expect(page.getByRole("textbox", { name: "Reply", exact: true })).toBeVisible();
|
||||||
await expect(
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
dialog.getByRole('textbox', { name: 'Reply', exact: true }),
|
await page.goBack();
|
||||||
).toBeVisible()
|
await expect(conversationLink).toBeVisible();
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
await page.goForward();
|
||||||
await dialog.getByRole('button', { name: 'Leave for later' }).click()
|
await expect(page.getByRole("textbox", { name: "Reply", exact: true })).toBeVisible();
|
||||||
await expect(dialog).toHaveCount(0)
|
await page.reload();
|
||||||
await expect(
|
await page.waitForLoadState("networkidle");
|
||||||
page.getByRole('button', { name: 'Open conversation with Haruka Aoki' }),
|
await expect(page.getByRole("textbox", { name: "Reply", exact: true })).toBeVisible();
|
||||||
).toHaveCount(0)
|
await page.getByRole("button", { name: "Leave for later" }).click();
|
||||||
await page
|
await page.getByRole("link", { name: "Home", exact: true }).first().click();
|
||||||
.getByRole('link', { name: 'Messages', exact: true })
|
await expect(conversationLink).toContainText("Set aside");
|
||||||
.first()
|
await conversationLink.click();
|
||||||
.click()
|
await expect(page).toHaveURL(/conversation=design-review/);
|
||||||
const rows = page.locator('.support-row')
|
await expect(page.getByRole("button", { name: "Move to Inbox" })).toBeVisible();
|
||||||
await expect(
|
await page.getByRole("button", { name: "Move to Inbox" }).click();
|
||||||
rows.filter({ hasText: 'Schedule next week’s design review' }),
|
const back = page.getByRole("button", { name: "Back to messages" });
|
||||||
).toHaveCount(0)
|
if (await back.isVisible()) await back.click();
|
||||||
await page.getByRole('button', { name: 'Later', exact: true }).click()
|
await page.getByRole("link", { name: "Home", exact: true }).first().click();
|
||||||
await rows.filter({ hasText: 'Schedule next week’s design review' }).click()
|
await expect(conversationLink).toBeVisible();
|
||||||
await page.getByRole('button', { name: 'Move to Now' }).click()
|
});
|
||||||
const back = page.getByRole('button', { name: 'Back to messages' })
|
|
||||||
if (await back.isVisible()) await back.click()
|
|
||||||
await page.getByRole('link', { name: 'Home', exact: true }).first().click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'Open conversation with Haruka Aoki' }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('updates the prose brief as priorities change and opens the referenced conversation', async ({
|
test("updates the prose brief as priorities change and opens the referenced conversation", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/')
|
await page.goto("/");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
const brief = page.getByRole('region', { name: 'Daily brief' })
|
const brief = page.getByRole("region", { name: "Daily brief" });
|
||||||
await expect(brief).toContainText('Review the documents')
|
await expect(brief).toContainText("Review the documents");
|
||||||
await expect(brief).toContainText('4 conversations')
|
await expect(brief).toContainText("3 conversations");
|
||||||
|
await page.getByRole("button", { name: "Complete Review the documents", exact: true }).click();
|
||||||
|
await expect(brief).not.toContainText("Review the documents");
|
||||||
|
await brief.getByRole("button", { name: "Reply to Haruka Aoki" }).click();
|
||||||
|
await page.getByRole("button", { name: "Leave for later" }).click();
|
||||||
|
await page.getByRole("link", { name: "Home", exact: true }).first().click();
|
||||||
|
await expect(brief).toContainText("2 conversations");
|
||||||
|
await expect(brief).not.toContainText("Haruka Aoki");
|
||||||
|
await page.getByRole("textbox", { name: "Home input" }).fill("再開地点:資料の2ページ目から");
|
||||||
|
await page.getByRole("button", { name: "Preview action" }).click();
|
||||||
|
await page.getByRole("button", { name: "Apply", exact: true }).click();
|
||||||
|
await expect(brief).toContainText("資料の2ページ目から");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("keeps completed actions in their original positions with visible outcomes", async ({
|
||||||
|
page,
|
||||||
|
a11y,
|
||||||
|
}, testInfo) => {
|
||||||
|
await page.goto("/");
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
const titles = page.locator(".execution-flow-title");
|
||||||
|
const before = await titles.allTextContents();
|
||||||
|
await page.getByRole("button", { name: "Complete Review the documents", exact: true }).click();
|
||||||
|
await expect(
|
||||||
|
page.getByRole("button", { name: "Restore Review the documents", exact: true }),
|
||||||
|
).toHaveAttribute("aria-pressed", "true");
|
||||||
|
await expect(
|
||||||
|
page.getByRole("button", { name: "Review the documents Completed", exact: true }),
|
||||||
|
).toBeVisible();
|
||||||
|
await page.getByRole("link", { name: "Open conversation with Haruka Aoki" }).click();
|
||||||
|
await page.getByRole("button", { name: "Review reply", exact: true }).click();
|
||||||
await page
|
await page
|
||||||
.getByRole('button', { name: 'Complete Review the documents', exact: true })
|
.getByRole("dialog", { name: "Review reply", exact: true })
|
||||||
.click()
|
.getByRole("button", { name: "Try sending" })
|
||||||
await expect(brief).not.toContainText('Review the documents')
|
.click();
|
||||||
await brief.getByRole('button', { name: 'Reply to Haruka Aoki' }).click()
|
await page.getByRole("link", { name: "Home", exact: true }).first().click();
|
||||||
const dialog = page.getByRole('dialog', {
|
await expect(
|
||||||
name: 'Conversation with Haruka Aoki',
|
page.getByRole("link", { name: "Open conversation with Haruka Aoki" }),
|
||||||
exact: true,
|
).toContainText("Reply recorded");
|
||||||
})
|
await page.getByRole("button", { name: /Record weight A quick check-in/ }).click();
|
||||||
await dialog.getByRole('button', { name: 'Leave for later' }).click()
|
await page.getByRole("spinbutton", { name: "Weight", exact: true }).fill("65.2");
|
||||||
await expect(brief).toContainText('3 conversations')
|
await page.getByRole("button", { name: "Save measurement" }).click();
|
||||||
await expect(brief).not.toContainText('Haruka Aoki')
|
await expect(
|
||||||
await page
|
page.getByRole("button", { name: /Record weight Recorded · 65.2 kg/ }),
|
||||||
.getByRole('textbox', { name: 'Home input' })
|
).toBeVisible();
|
||||||
.fill('再開地点:資料の2ページ目から')
|
expect(await titles.allTextContents()).toEqual(before);
|
||||||
await page.getByRole('button', { name: 'Preview action' }).click()
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await page.getByRole('button', { name: 'Apply', exact: true }).click()
|
await page.screenshot({ path: testInfo.outputPath("completion-in-place.png") });
|
||||||
await expect(brief).toContainText('資料の2ページ目から')
|
await page.getByRole("button", { name: "Restore Review the documents", exact: true }).click();
|
||||||
})
|
await expect(
|
||||||
|
page.getByRole("button", { name: "Complete Review the documents", exact: true }),
|
||||||
|
).toHaveAttribute("aria-pressed", "false");
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,101 +1,75 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
test('selects articles and keeps the reader focused on their content', async ({
|
test("selects articles and keeps the reader focused on their content", async ({ page }) => {
|
||||||
page,
|
await page.goto("/inbox");
|
||||||
}) => {
|
await page.waitForLoadState("networkidle");
|
||||||
await page.goto('/inbox')
|
const rows = page.locator(".inbox-article-row");
|
||||||
await page.waitForLoadState('networkidle')
|
await expect(rows).toHaveCount(9);
|
||||||
const rows = page.locator('.inbox-article-row')
|
const articleTitle = "Context for an agent can be brief";
|
||||||
await expect(rows).toHaveCount(9)
|
await rows.filter({ hasText: articleTitle }).click();
|
||||||
const articleTitle = 'Context for an agent can be brief'
|
const reader = page.getByRole("article", { name: articleTitle, exact: true });
|
||||||
await rows.filter({ hasText: articleTitle }).click()
|
await expect(reader).toBeVisible();
|
||||||
const reader = page.getByRole('article', { name: articleTitle, exact: true })
|
await expect(reader.getByRole("heading", { name: articleTitle, exact: true })).toBeVisible();
|
||||||
await expect(reader).toBeVisible()
|
|
||||||
await expect(
|
await expect(
|
||||||
reader.getByRole('heading', { name: articleTitle, exact: true }),
|
reader.getByText("Start with a one-sentence goal, then add the constraints that must hold.", {
|
||||||
).toBeVisible()
|
exact: false,
|
||||||
|
}),
|
||||||
|
).toBeVisible();
|
||||||
|
await expect(page.getByText("FOR YOU", { exact: true })).toHaveCount(0);
|
||||||
|
await expect(page.getByText("Mock", { exact: true })).toHaveCount(0);
|
||||||
|
await expect(page.getByText("Why this article", { exact: true })).toHaveCount(0);
|
||||||
|
await expect(page.getByRole("button", { name: /For you|Read later|Unread only/ })).toHaveCount(0);
|
||||||
|
const back = page.getByRole("button", { name: "Back to articles" });
|
||||||
|
if (await back.isVisible()) await back.click();
|
||||||
|
await rows.filter({ hasText: "Three columns create a rhythm for reading" }).click();
|
||||||
await expect(
|
await expect(
|
||||||
reader.getByText(
|
page.getByRole("article", {
|
||||||
'Start with a one-sentence goal, then add the constraints that must hold.',
|
name: "Three columns create a rhythm for reading",
|
||||||
{ exact: false },
|
|
||||||
),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(page.getByText('FOR YOU', { exact: true })).toHaveCount(0)
|
|
||||||
await expect(page.getByText('Mock', { exact: true })).toHaveCount(0)
|
|
||||||
await expect(page.getByText('Why this article', { exact: true })).toHaveCount(
|
|
||||||
0,
|
|
||||||
)
|
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: /For you|Read later|Unread only/ }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
const back = page.getByRole('button', { name: 'Back to articles' })
|
|
||||||
if (await back.isVisible()) await back.click()
|
|
||||||
await rows
|
|
||||||
.filter({ hasText: 'Three columns create a rhythm for reading' })
|
|
||||||
.click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('article', {
|
|
||||||
name: 'Three columns create a rhythm for reading',
|
|
||||||
exact: true,
|
exact: true,
|
||||||
}),
|
}),
|
||||||
).toBeVisible()
|
).toBeVisible();
|
||||||
})
|
});
|
||||||
|
|
||||||
test('recovers from empty search and shares navigation with Research', async ({
|
test("recovers from empty search and shares navigation with Research", async ({ page, a11y }) => {
|
||||||
page,
|
await page.goto("/inbox");
|
||||||
a11y,
|
await page.waitForLoadState("networkidle");
|
||||||
}) => {
|
const rows = page.locator(".inbox-article-row");
|
||||||
await page.goto('/inbox')
|
await page.getByRole("textbox", { name: "Search articles" }).fill("nonexistent-query-xyz");
|
||||||
await page.waitForLoadState('networkidle')
|
await expect(rows).toHaveCount(0);
|
||||||
const rows = page.locator('.inbox-article-row')
|
await expect(page.getByText("No articles found", { exact: true })).toBeVisible();
|
||||||
await page
|
await page.getByRole("button", { name: "Clear search" }).click();
|
||||||
.getByRole('textbox', { name: 'Search articles' })
|
await expect(rows).toHaveCount(9);
|
||||||
.fill('nonexistent-query-xyz')
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await expect(rows).toHaveCount(0)
|
await expect(page.getByRole("button", { name: "Edit interests", exact: true })).toHaveCount(0);
|
||||||
await expect(
|
await page.getByRole("link", { name: "Research", exact: true }).click();
|
||||||
page.getByText('No articles found', { exact: true }),
|
await expect(page).toHaveURL(/\/deck$/);
|
||||||
).toBeVisible()
|
await page.getByRole("link", { name: "Reader", exact: true }).click();
|
||||||
await page.getByRole('button', { name: 'Clear search' }).click()
|
await expect(page).toHaveURL(/\/inbox$/);
|
||||||
await expect(rows).toHaveCount(9)
|
await expect(rows).toHaveCount(9);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
});
|
||||||
await expect(
|
|
||||||
page.getByRole('button', { name: 'Edit interests', exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await page.getByRole('link', { name: 'Research', exact: true }).click()
|
|
||||||
await expect(page).toHaveURL(/\/deck$/)
|
|
||||||
await page.getByRole('link', { name: 'Reader', exact: true }).click()
|
|
||||||
await expect(page).toHaveURL(/\/inbox$/)
|
|
||||||
await expect(rows).toHaveCount(9)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('keeps article navigation readable without horizontal overflow', async ({
|
test("keeps article navigation readable without horizontal overflow", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}, testInfo) => {
|
}, testInfo) => {
|
||||||
await page.goto('/inbox')
|
await page.goto("/inbox");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
for (const width of [320, 375, 414, 768]) {
|
for (const width of [320, 375, 414, 768]) {
|
||||||
await page.setViewportSize({ width, height: 850 })
|
await page.setViewportSize({ width, height: 850 });
|
||||||
await expect(
|
await expect(page.getByRole("textbox", { name: "Search articles" })).toBeVisible();
|
||||||
page.getByRole('textbox', { name: 'Search articles' }),
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
).toBeVisible()
|
await page.locator(".inbox-article-row").first().click();
|
||||||
expect(
|
const reader = page.getByRole("article", {
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
name: "Thinking in the browser: a new workflow with AI agents",
|
||||||
).toBe(width)
|
|
||||||
await page.locator('.inbox-article-row').first().click()
|
|
||||||
const reader = page.getByRole('article', {
|
|
||||||
name: 'Thinking in the browser: a new workflow with AI agents',
|
|
||||||
exact: true,
|
exact: true,
|
||||||
})
|
});
|
||||||
await expect(reader).toBeVisible()
|
await expect(reader).toBeVisible();
|
||||||
expect(
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.screenshot({
|
await page.screenshot({
|
||||||
path: testInfo.outputPath(`inbox-reader-${width}.png`),
|
path: testInfo.outputPath(`inbox-reader-${width}.png`),
|
||||||
})
|
});
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
const back = page.getByRole('button', { name: 'Back to articles' })
|
const back = page.getByRole("button", { name: "Back to articles" });
|
||||||
if (await back.isVisible()) await back.click()
|
if (await back.isVisible()) await back.click();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,351 +1,378 @@
|
|||||||
import type { DeckColumn } from '../../src/features/decks/model'
|
import type { DeckColumn } from "../../src/features/decks/model";
|
||||||
import type { ResearchRun } from '../../src/features/research/model'
|
import type { ResearchRun } from "../../src/features/research/model";
|
||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
import {
|
import { closeMobileSidebar, showDeckManagement, showResearch } from "../workspace";
|
||||||
closeMobileSidebar,
|
|
||||||
showDeckManagement,
|
|
||||||
showResearch,
|
|
||||||
} from '../workspace'
|
|
||||||
|
|
||||||
test('pushes the current research snapshot on each SSE connection', async ({
|
test("pushes the current research snapshot on each SSE connection", async ({ page }) => {
|
||||||
page,
|
await page.goto("/deck");
|
||||||
}) => {
|
|
||||||
await page.goto('/deck')
|
|
||||||
const snapshots = await page.evaluate(async () => {
|
const snapshots = await page.evaluate(async () => {
|
||||||
const connect = () =>
|
const connect = () =>
|
||||||
new Promise<unknown>((resolve, reject) => {
|
new Promise<unknown>((resolve, reject) => {
|
||||||
const events = new EventSource('/api/research/events')
|
const events = new EventSource("/api/research/events");
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
events.close()
|
events.close();
|
||||||
reject(new Error('SSE timed out'))
|
reject(new Error("SSE timed out"));
|
||||||
}, 5000)
|
}, 5000);
|
||||||
events.onmessage = (event) => {
|
events.onmessage = (event) => {
|
||||||
clearTimeout(timer)
|
clearTimeout(timer);
|
||||||
events.close()
|
events.close();
|
||||||
resolve(JSON.parse(event.data))
|
resolve(JSON.parse(event.data));
|
||||||
}
|
};
|
||||||
events.onerror = () => {
|
events.onerror = () => {
|
||||||
clearTimeout(timer)
|
clearTimeout(timer);
|
||||||
events.close()
|
events.close();
|
||||||
reject(new Error('SSE failed'))
|
reject(new Error("SSE failed"));
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
return [await connect(), await connect()]
|
return [await connect(), await connect()];
|
||||||
})
|
});
|
||||||
expect(snapshots).toEqual([
|
expect(snapshots).toEqual([
|
||||||
{ configured: false, run: null, history: [] },
|
{ configured: false, run: null, history: [] },
|
||||||
{ configured: false, run: null, history: [] },
|
{ configured: false, run: null, history: [] },
|
||||||
])
|
]);
|
||||||
})
|
});
|
||||||
|
|
||||||
test('restores the conversation and growing temporary deck from reconnect snapshots', async ({
|
test("restores the conversation and growing temporary deck from reconnect snapshots", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
await page.getByRole('button', { name: 'Add column', exact: true }).click()
|
await page.getByRole("button", { name: "Add column", exact: true }).click();
|
||||||
const accounts = page.getByRole('combobox', {
|
const accounts = page.getByRole("combobox", {
|
||||||
name: 'Connection profile',
|
name: "Connection profile",
|
||||||
exact: true,
|
exact: true,
|
||||||
})
|
});
|
||||||
await accounts.selectOption({ label: 'e2e' })
|
await accounts.selectOption({ label: "e2e" });
|
||||||
const connectionId = await accounts.inputValue()
|
const connectionId = await accounts.inputValue();
|
||||||
await page.keyboard.press('Escape')
|
await page.keyboard.press("Escape");
|
||||||
await closeMobileSidebar(page)
|
await closeMobileSidebar(page);
|
||||||
const run: ResearchRun = {
|
const run: ResearchRun = {
|
||||||
id: '36ad8cc7-318c-46ae-94fa-28d30336f027',
|
id: "36ad8cc7-318c-46ae-94fa-28d30336f027",
|
||||||
threadId: 'conversation-test',
|
threadId: "conversation-test",
|
||||||
connectionIds: [connectionId],
|
connectionIds: [connectionId],
|
||||||
topic: '既存の観点を使って調査して',
|
topic: "既存の観点を使って調査して",
|
||||||
status: 'running',
|
status: "running",
|
||||||
startedAt: Date.now(),
|
startedAt: Date.now(),
|
||||||
deckVersion: 1,
|
deckVersion: 1,
|
||||||
citations: [],
|
citations: [],
|
||||||
message: '既存の検索条件を再利用しています。',
|
message: "既存の検索条件を再利用しています。",
|
||||||
messages: [
|
messages: [
|
||||||
{ id: 'user-1', role: 'user', text: '既存の観点を使って調査して' },
|
{ id: "user-1", role: "user", text: "既存の観点を使って調査して" },
|
||||||
{ id: 'tool-1', role: 'tool', text: 'list_decks: 完了' },
|
{ id: "tool-1", role: "tool", text: "list_decks: 完了" },
|
||||||
{
|
{
|
||||||
id: 'assistant-1',
|
id: "assistant-1",
|
||||||
role: 'assistant',
|
role: "assistant",
|
||||||
text: '既存の検索条件を再利用しています。',
|
text: "既存の検索条件を再利用しています。",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
deck: {
|
deck: {
|
||||||
id: 'generated-plan',
|
id: "generated-plan",
|
||||||
title: '会話からの調査',
|
title: "会話からの調査",
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
id: 'one',
|
id: "one",
|
||||||
title: '最初の観点',
|
title: "最初の観点",
|
||||||
connectionId,
|
connectionId,
|
||||||
source: {
|
source: {
|
||||||
platform: 'twitter',
|
platform: "twitter",
|
||||||
kind: 'search',
|
kind: "search",
|
||||||
query: 'WebMCP',
|
query: "WebMCP",
|
||||||
product: 'Latest',
|
product: "Latest",
|
||||||
following: false,
|
following: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
await page.route('**/api/research/events', (route) =>
|
await page.route("**/api/research/events*", (route) =>
|
||||||
route.fulfill({
|
route.fulfill({
|
||||||
contentType: 'text/event-stream',
|
contentType: "text/event-stream",
|
||||||
body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
|
body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
|
||||||
}),
|
}),
|
||||||
)
|
);
|
||||||
await page.reload()
|
await page.goto(`/deck?run=${run.id}`);
|
||||||
await showResearch(page)
|
await showResearch(page);
|
||||||
const conversation = page.getByRole('log', { name: 'Research conversation' })
|
const conversation = page.getByRole("log", { name: "Research conversation" });
|
||||||
await expect(conversation).toContainText('既存の観点を使って調査して')
|
await expect(conversation).toContainText("既存の観点を使って調査して");
|
||||||
await expect(conversation).toContainText('list_decks: 完了')
|
await expect(conversation).toContainText("list_decks: 完了");
|
||||||
await expect(conversation).toContainText('既存の検索条件を再利用しています。')
|
await expect(conversation).toContainText("既存の検索条件を再利用しています。");
|
||||||
await expect(
|
await expect(conversation.locator('[data-slot="bubble-content"]')).not.toHaveCSS(
|
||||||
conversation.locator('[data-slot="bubble-content"]'),
|
"background-color",
|
||||||
).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
"rgba(0, 0, 0, 0)",
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['最初の観点'])
|
);
|
||||||
run.deckVersion = 2
|
await expect(page.locator(".deck-column h2")).toHaveText(["最初の観点"]);
|
||||||
run.status = 'complete'
|
run.deckVersion = 2;
|
||||||
|
run.status = "complete";
|
||||||
run.messages.push({
|
run.messages.push({
|
||||||
id: 'assistant-2',
|
id: "assistant-2",
|
||||||
role: 'assistant',
|
role: "assistant",
|
||||||
text: '比較する観点を追加しました。',
|
text: "比較する観点を追加しました。",
|
||||||
})
|
});
|
||||||
run.deck?.columns.push({
|
run.deck?.columns.push({
|
||||||
id: 'two',
|
id: "two",
|
||||||
title: '比較の観点',
|
title: "比較の観点",
|
||||||
connectionId,
|
connectionId,
|
||||||
source: {
|
source: {
|
||||||
platform: 'twitter',
|
platform: "twitter",
|
||||||
kind: 'search',
|
kind: "search",
|
||||||
query: 'WebMCP lang:ja',
|
query: "WebMCP lang:ja",
|
||||||
product: 'Latest',
|
product: "Latest",
|
||||||
following: false,
|
following: false,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
await page.reload()
|
await page.reload();
|
||||||
await showResearch(page)
|
await showResearch(page);
|
||||||
await expect(conversation).toContainText('既存の観点を使って調査して')
|
await expect(conversation).toContainText("既存の観点を使って調査して");
|
||||||
await expect(conversation).toContainText('比較する観点を追加しました。')
|
await expect(conversation).toContainText("比較する観点を追加しました。");
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText([
|
await expect(page.locator(".deck-column h2")).toHaveText(["最初の観点", "比較の観点"]);
|
||||||
'最初の観点',
|
await closeMobileSidebar(page);
|
||||||
'比較の観点',
|
await expect(page.getByRole("button", { name: "Save as deck", exact: true })).toBeEnabled();
|
||||||
])
|
await showResearch(page);
|
||||||
await closeMobileSidebar(page)
|
const accountPicker = page.getByRole("button", {
|
||||||
await expect(
|
name: "Connected accounts · 1",
|
||||||
page.getByRole('button', { name: 'Save as deck', exact: true }),
|
});
|
||||||
).toBeEnabled()
|
await accountPicker.click();
|
||||||
await showResearch(page)
|
await expect(accountPicker).toHaveAttribute("aria-expanded", "true");
|
||||||
const accountPicker = page.getByRole('button', {
|
await expect(page.getByRole("checkbox", { name: "e2e · Twitter" })).toBeChecked();
|
||||||
name: 'Connected accounts · 1',
|
await accountPicker.click();
|
||||||
})
|
await expect(accountPicker).toHaveAttribute("aria-expanded", "false");
|
||||||
await accountPicker.click()
|
await page.getByLabel("Message", { exact: true }).fill("この観点を詳しく");
|
||||||
await expect(accountPicker).toHaveAttribute('aria-expanded', 'true')
|
await expect(page.getByRole("button", { name: "Send", exact: true })).toBeEnabled();
|
||||||
await expect(
|
await page.getByRole("button", { name: "Close sidebar", exact: true }).click();
|
||||||
page.getByRole('checkbox', { name: 'e2e · Twitter' }),
|
run.deckVersion = 3;
|
||||||
).toBeChecked()
|
if (run.deck) run.deck.title = "閉じている間に更新された調査";
|
||||||
await accountPicker.click()
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("閉じている間に更新された調査", {
|
||||||
await expect(accountPicker).toHaveAttribute('aria-expanded', 'false')
|
timeout: 15000,
|
||||||
await page.getByLabel('Message', { exact: true }).fill('この観点を詳しく')
|
});
|
||||||
await expect(
|
await showResearch(page);
|
||||||
page.getByRole('button', { name: 'Send', exact: true }),
|
await expect(page.getByLabel("Message", { exact: true })).toHaveValue("この観点を詳しく");
|
||||||
).toBeEnabled()
|
await page.setViewportSize({ width: 600, height: 900 });
|
||||||
await page.getByRole('button', { name: 'Close sidebar', exact: true }).click()
|
await expect(page.locator('[data-sidebar="sidebar"][data-mobile="true"]')).toHaveCount(1);
|
||||||
run.deckVersion = 3
|
await showResearch(page);
|
||||||
if (run.deck) run.deck.title = '閉じている間に更新された調査'
|
await expect(page.getByLabel("Message", { exact: true })).toHaveValue("この観点を詳しく");
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
await page.getByRole("button", { name: "Connected accounts · 1" }).click();
|
||||||
'閉じている間に更新された調査',
|
await page.getByRole("checkbox", { name: "e2e · Twitter" }).uncheck();
|
||||||
{ timeout: 15000 },
|
await page.setViewportSize({ width: 1100, height: 900 });
|
||||||
)
|
await expect(page.locator('[data-sidebar="sidebar"][data-mobile="true"]')).toHaveCount(0);
|
||||||
await showResearch(page)
|
await showResearch(page);
|
||||||
await expect(page.getByLabel('Message', { exact: true })).toHaveValue(
|
await expect(page.getByLabel("Message", { exact: true })).toHaveValue("この観点を詳しく");
|
||||||
'この観点を詳しく',
|
await page.getByRole("button", { name: "Connected accounts · 0" }).click();
|
||||||
)
|
await expect(page.getByRole("checkbox", { name: "e2e · Twitter" })).not.toBeChecked();
|
||||||
await page.setViewportSize({ width: 600, height: 900 })
|
await page.setViewportSize({ width: 600, height: 900 });
|
||||||
await expect(
|
await expect(page.locator('[data-sidebar="sidebar"][data-mobile="true"]')).toHaveCount(1);
|
||||||
page.locator('[data-sidebar="sidebar"][data-mobile="true"]'),
|
await showResearch(page);
|
||||||
).toHaveCount(1)
|
await expect(page.getByLabel("Message", { exact: true })).toHaveValue("この観点を詳しく");
|
||||||
await showResearch(page)
|
await page.getByRole("button", { name: "Connected accounts · 0" }).click();
|
||||||
await expect(page.getByLabel('Message', { exact: true })).toHaveValue(
|
await expect(page.getByRole("checkbox", { name: "e2e · Twitter" })).not.toBeChecked();
|
||||||
'この観点を詳しく',
|
});
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: 'Connected accounts · 1' }).click()
|
|
||||||
await page.getByRole('checkbox', { name: 'e2e · Twitter' }).uncheck()
|
|
||||||
await page.setViewportSize({ width: 1100, height: 900 })
|
|
||||||
await expect(
|
|
||||||
page.locator('[data-sidebar="sidebar"][data-mobile="true"]'),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(page.getByLabel('Message', { exact: true })).toHaveValue(
|
|
||||||
'この観点を詳しく',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: 'Connected accounts · 0' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('checkbox', { name: 'e2e · Twitter' }),
|
|
||||||
).not.toBeChecked()
|
|
||||||
await page.setViewportSize({ width: 600, height: 900 })
|
|
||||||
await expect(
|
|
||||||
page.locator('[data-sidebar="sidebar"][data-mobile="true"]'),
|
|
||||||
).toHaveCount(1)
|
|
||||||
await showResearch(page)
|
|
||||||
await expect(page.getByLabel('Message', { exact: true })).toHaveValue(
|
|
||||||
'この観点を詳しく',
|
|
||||||
)
|
|
||||||
await page.getByRole('button', { name: 'Connected accounts · 0' }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('checkbox', { name: 'e2e · Twitter' }),
|
|
||||||
).not.toBeChecked()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('rejects a different tailnet owner at the SSE endpoint', async ({
|
test("rejects a different tailnet owner at the SSE endpoint", async ({ request }) => {
|
||||||
request,
|
const response = await request.get("/api/research/events", {
|
||||||
}) => {
|
headers: { "Tailscale-User-Login": "[email protected]" },
|
||||||
const response = await request.get('/api/research/events', {
|
});
|
||||||
headers: { 'Tailscale-User-Login': '[email protected]' },
|
expect(response.status()).toBe(403);
|
||||||
})
|
});
|
||||||
expect(response.status()).toBe(403)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('renders Markdown and reveals an unloaded citation in an offscreen deck column', async ({
|
test("renders Markdown and reveals an unloaded citation in an offscreen deck column", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
await page.emulateMedia({ reducedMotion: 'reduce' })
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
await showDeckManagement(page)
|
await showDeckManagement(page);
|
||||||
await page.getByRole('button', { name: 'Add column', exact: true }).click()
|
await page.getByRole("button", { name: "Add column", exact: true }).click();
|
||||||
const accounts = page.getByRole('combobox', {
|
const accounts = page.getByRole("combobox", {
|
||||||
name: 'Connection profile',
|
name: "Connection profile",
|
||||||
exact: true,
|
exact: true,
|
||||||
})
|
});
|
||||||
await accounts.selectOption({ label: 'e2e' })
|
await accounts.selectOption({ label: "e2e" });
|
||||||
const connectionId = await accounts.inputValue()
|
const connectionId = await accounts.inputValue();
|
||||||
await page.keyboard.press('Escape')
|
await page.keyboard.press("Escape");
|
||||||
await closeMobileSidebar(page)
|
await closeMobileSidebar(page);
|
||||||
const source: DeckColumn = {
|
const source: DeckColumn = {
|
||||||
id: 'citation-column-2',
|
id: "citation-column-2",
|
||||||
title: '引用の観点',
|
title: "引用の観点",
|
||||||
connectionId,
|
connectionId,
|
||||||
source: {
|
source: {
|
||||||
platform: 'twitter',
|
platform: "twitter",
|
||||||
kind: 'search',
|
kind: "search",
|
||||||
query: 'citation-query-2',
|
query: "citation-query-2",
|
||||||
product: 'Latest',
|
product: "Latest",
|
||||||
following: false,
|
following: false,
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
const columns: DeckColumn[] = ['概要', '比較'].map((title, index) => ({
|
const columns: DeckColumn[] = ["概要", "比較"].map((title, index) => ({
|
||||||
id: `citation-column-${index}`,
|
id: `citation-column-${index}`,
|
||||||
title,
|
title,
|
||||||
connectionId,
|
connectionId,
|
||||||
source: {
|
source: {
|
||||||
platform: 'twitter',
|
platform: "twitter",
|
||||||
kind: 'search',
|
kind: "search",
|
||||||
query: `citation-query-${index}`,
|
query: `citation-query-${index}`,
|
||||||
product: 'Latest',
|
product: "Latest",
|
||||||
following: false,
|
following: false,
|
||||||
},
|
},
|
||||||
}))
|
}));
|
||||||
columns.push(source)
|
columns.push(source);
|
||||||
const run: ResearchRun = {
|
const run: ResearchRun = {
|
||||||
id: '973ae084-18ed-4674-8899-c75851e51d1b',
|
id: "973ae084-18ed-4674-8899-c75851e51d1b",
|
||||||
topic: '引用を確認',
|
topic: "引用を確認",
|
||||||
status: 'complete',
|
status: "complete",
|
||||||
startedAt: Date.now(),
|
startedAt: Date.now(),
|
||||||
deckVersion: 1,
|
deckVersion: 1,
|
||||||
message: '',
|
message: "",
|
||||||
deck: { id: 'citation-deck', title: '引用付きの調査', columns },
|
deck: { id: "citation-deck", title: "引用付きの調査", columns },
|
||||||
messages: [
|
messages: [
|
||||||
{
|
{
|
||||||
id: 'answer',
|
id: "answer",
|
||||||
role: 'assistant',
|
role: "assistant",
|
||||||
text: '## 調査結果\n\n**重要な発見**です。\n\n- [根拠の投稿](https://x.com/author/status/123456789?s=20)\n\n| 観点 | 結果 |\n| --- | --- |\n| 投稿 | 確認済み |\n\n`コード`も表示します。',
|
text: "## 調査結果\n\n**重要な発見**です。\n\n- [根拠の投稿](https://x.com/author/status/123456789?s=20)\n\n| 観点 | 結果 |\n| --- | --- |\n| 投稿 | 確認済み |\n\n`コード`も表示します。",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
citations: [
|
citations: [
|
||||||
{
|
{
|
||||||
column: source,
|
column: source,
|
||||||
post: {
|
post: {
|
||||||
key: 'twitter:123456789',
|
key: "twitter:123456789",
|
||||||
nativeId: '123456789',
|
nativeId: "123456789",
|
||||||
platform: 'twitter',
|
platform: "twitter",
|
||||||
url: 'https://twitter.com/author/status/123456789',
|
url: "https://twitter.com/author/status/123456789",
|
||||||
text: 'AIが調査時に取得した引用本文',
|
text: "AIが調査時に取得した引用本文",
|
||||||
author: { name: '引用元の著者', handle: 'author' },
|
author: { name: "引用元の著者", handle: "author" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
await page.route('**/api/research/events', (route) =>
|
await page.route("**/api/research/events*", (route) =>
|
||||||
route.fulfill({
|
route.fulfill({
|
||||||
contentType: 'text/event-stream',
|
contentType: "text/event-stream",
|
||||||
body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
|
body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
|
||||||
}),
|
}),
|
||||||
)
|
);
|
||||||
await page.reload()
|
await page.goto(`/deck?run=${run.id}`);
|
||||||
await showResearch(page)
|
await showResearch(page);
|
||||||
const chat = page.getByRole('log', { name: 'Research conversation' })
|
const chat = page.getByRole("log", { name: "Research conversation" });
|
||||||
await expect(chat.getByRole('heading', { name: '調査結果' })).toBeVisible()
|
await expect(chat.getByRole("heading", { name: "調査結果" })).toBeVisible();
|
||||||
await expect(chat.getByRole('heading', { name: '調査結果' })).toHaveCSS(
|
await expect(chat.getByRole("heading", { name: "調査結果" })).toHaveCSS("font-weight", "600");
|
||||||
'font-weight',
|
await expect(chat.locator("ul")).toHaveCSS("list-style-type", "disc");
|
||||||
'600',
|
await expect(chat.locator("strong").filter({ hasText: "重要な発見" })).toBeVisible();
|
||||||
)
|
await expect(chat.getByRole("table")).toBeVisible();
|
||||||
await expect(chat.locator('ul')).toHaveCSS('list-style-type', 'disc')
|
await expect(page.getByText("AIが調査時に取得した引用本文", { exact: true })).toHaveCount(0);
|
||||||
await expect(
|
await chat.getByRole("link", { name: "根拠の投稿" }).click();
|
||||||
chat.locator('strong').filter({ hasText: '重要な発見' }),
|
|
||||||
).toBeVisible()
|
|
||||||
await expect(chat.getByRole('table')).toBeVisible()
|
|
||||||
await expect(
|
|
||||||
page.getByText('AIが調査時に取得した引用本文', { exact: true }),
|
|
||||||
).toHaveCount(0)
|
|
||||||
await chat.getByRole('link', { name: '根拠の投稿' }).click()
|
|
||||||
const card = page.locator(
|
const card = page.locator(
|
||||||
'.research-post[data-post-url="https://twitter.com/author/status/123456789"]',
|
'.research-post[data-post-url="https://twitter.com/author/status/123456789"]',
|
||||||
)
|
);
|
||||||
await expect(card).toBeVisible()
|
await expect(card).toBeVisible();
|
||||||
await expect(card).toHaveClass(/citation-highlight/)
|
await expect(card).toHaveClass(/citation-highlight/);
|
||||||
await expect(card).toBeFocused()
|
await expect(card).toBeFocused();
|
||||||
await expect(card).toContainText('Post saved during research')
|
await expect(card).toContainText("Post saved during research");
|
||||||
await expect(card).toContainText('AIが調査時に取得した引用本文')
|
await expect(card).toContainText("AIが調査時に取得した引用本文");
|
||||||
expect(
|
expect(
|
||||||
await page.locator('.deck-board').evaluate((element) => element.scrollLeft),
|
await page.locator(".deck-board").evaluate((element) => element.scrollLeft),
|
||||||
).toBeGreaterThan(0)
|
).toBeGreaterThan(0);
|
||||||
expect(page.context().pages()).toHaveLength(1)
|
expect(page.context().pages()).toHaveLength(1);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
await expect(page).toHaveURL(/citation=twitter%3A123456789/);
|
||||||
})
|
const bookmarked = new URL(page.url());
|
||||||
|
bookmarked.searchParams.set("run", run.id);
|
||||||
|
bookmarked.searchParams.set("deck", "citation-deck");
|
||||||
|
const submitted: string[] = [];
|
||||||
|
page.on("request", (request) => {
|
||||||
|
if (request.method() === "POST") submitted.push(request.url());
|
||||||
|
});
|
||||||
|
await page.goto(bookmarked.toString());
|
||||||
|
await expect(card).toBeVisible();
|
||||||
|
await expect(card).toHaveClass(/citation-highlight/);
|
||||||
|
await expect(page).toHaveURL(/citation=twitter%3A123456789/);
|
||||||
|
await expect(page.locator(".deck-column")).toHaveCount(3);
|
||||||
|
expect(submitted).toEqual([]);
|
||||||
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
test('explains unconfigured Codex and prevents starting research without affecting the deck', async ({
|
test("explains unconfigured Codex and prevents starting research without affecting the deck", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
const heading = page.getByRole('heading', { level: 1 })
|
const heading = page.getByRole("heading", { level: 1 });
|
||||||
await expect(heading).toBeVisible()
|
await expect(heading).toBeVisible();
|
||||||
const originalTitle = await heading.textContent()
|
const originalTitle = await heading.textContent();
|
||||||
await showResearch(page)
|
await showResearch(page);
|
||||||
const panel = page.getByRole('complementary', { name: 'Research chat' })
|
const panel = page.getByRole("complementary", { name: "Research chat" });
|
||||||
await expect(panel).toBeVisible()
|
await expect(panel).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
panel.getByText(
|
panel.getByText("The connection to Codex on your home server is not configured."),
|
||||||
'The connection to Codex on your home server is not configured.',
|
).toBeVisible();
|
||||||
),
|
await expect(panel.getByRole("button", { name: "Send", exact: true })).toBeDisabled();
|
||||||
).toBeVisible()
|
await expect(panel.getByLabel("Message", { exact: true })).toBeDisabled();
|
||||||
await expect(
|
const accessibility = await a11y().analyze();
|
||||||
panel.getByRole('button', { name: 'Send', exact: true }),
|
expect(accessibility.violations).toEqual([]);
|
||||||
).toBeDisabled()
|
await closeMobileSidebar(page);
|
||||||
await expect(panel.getByLabel('Message', { exact: true })).toBeDisabled()
|
await expect(heading).toHaveText(originalTitle ?? "");
|
||||||
const accessibility = await a11y().analyze()
|
await showDeckManagement(page);
|
||||||
expect(accessibility.violations).toEqual([])
|
await page.getByRole("button", { name: "Create deck", exact: true }).click();
|
||||||
await closeMobileSidebar(page)
|
await page.getByLabel("New deck name").fill("手動の調査");
|
||||||
await expect(heading).toHaveText(originalTitle ?? '')
|
await page.getByRole("button", { name: "Create", exact: true }).click();
|
||||||
await showDeckManagement(page)
|
await closeMobileSidebar(page);
|
||||||
await page.getByRole('button', { name: 'Create deck', exact: true }).click()
|
await expect(heading).toHaveText("手動の調査");
|
||||||
await page.getByLabel('New deck name').fill('手動の調査')
|
await showResearch(page);
|
||||||
await page.getByRole('button', { name: 'Create', exact: true }).click()
|
await expect(panel).toBeVisible();
|
||||||
await closeMobileSidebar(page)
|
});
|
||||||
await expect(heading).toHaveText('手動の調査')
|
|
||||||
await showResearch(page)
|
test("keeps browser conversation selection independent and restores it on reload", async ({
|
||||||
await expect(panel).toBeVisible()
|
page,
|
||||||
})
|
browser,
|
||||||
|
context,
|
||||||
|
}) => {
|
||||||
|
const { openDatabase } = await import("../../src/features/storage/database.server");
|
||||||
|
const { createResearchStore } = await import("../../src/features/research/repository.server");
|
||||||
|
const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? "");
|
||||||
|
const store = createResearchStore(db);
|
||||||
|
const first = crypto.randomUUID();
|
||||||
|
const second = crypto.randomUUID();
|
||||||
|
for (const [id, text] of [
|
||||||
|
[first, "Browser one conversation"],
|
||||||
|
[second, "Browser two conversation"],
|
||||||
|
] as const) {
|
||||||
|
store.save({
|
||||||
|
id,
|
||||||
|
topic: text,
|
||||||
|
status: "complete",
|
||||||
|
startedAt: Date.now(),
|
||||||
|
deckVersion: 0,
|
||||||
|
message: text,
|
||||||
|
messages: [{ id: `${id}-message`, role: "assistant", text }],
|
||||||
|
citations: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const other = await browser.newContext({
|
||||||
|
storageState: await context.storageState(),
|
||||||
|
extraHTTPHeaders: { "Tailscale-User-Login": "[email protected]" },
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
const secondPage = await other.newPage();
|
||||||
|
await page.goto(`/deck?run=${first}`, { waitUntil: "domcontentloaded" });
|
||||||
|
await showResearch(page);
|
||||||
|
await secondPage.goto(`/deck?run=${second}`, {
|
||||||
|
waitUntil: "domcontentloaded",
|
||||||
|
});
|
||||||
|
await showResearch(secondPage);
|
||||||
|
await expect(page.getByRole("log", { name: "Research conversation" })).toContainText(
|
||||||
|
"Browser one conversation",
|
||||||
|
);
|
||||||
|
await expect(secondPage.getByRole("log", { name: "Research conversation" })).toContainText(
|
||||||
|
"Browser two conversation",
|
||||||
|
);
|
||||||
|
await secondPage.getByRole("button", { name: "New chat", exact: true }).click();
|
||||||
|
await expect(secondPage).toHaveURL(/run=new/);
|
||||||
|
await page.reload({ waitUntil: "domcontentloaded" });
|
||||||
|
await showResearch(page);
|
||||||
|
await expect(page).toHaveURL(new RegExp(`run=${first}`));
|
||||||
|
await expect(page.getByRole("log", { name: "Research conversation" })).toContainText(
|
||||||
|
"Browser one conversation",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
await other.close();
|
||||||
|
db.$client.prepare("DELETE FROM research_sessions WHERE id IN (?, ?)").run(first, second);
|
||||||
|
db.$client.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,158 +1,133 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
const reviewSubject = 'Schedule next week’s design review'
|
const reviewSubject = "Schedule next week’s design review";
|
||||||
const coffeeSubject = 'Catch up over coffee'
|
const coffeeSubject = "Catch up over coffee";
|
||||||
|
|
||||||
test('reviews an edited reply and keeps the simulated result in history', async ({
|
test("reviews an edited reply and keeps the simulated result in history", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/support')
|
await page.goto("/support");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
const rows = page.locator('.support-row')
|
const rows = page.locator(".support-row");
|
||||||
await expect(rows).toHaveCount(3)
|
await expect(rows).toHaveCount(3);
|
||||||
await rows.filter({ hasText: reviewSubject }).click()
|
await rows.filter({ hasText: reviewSubject }).click();
|
||||||
await page.getByRole('button', { name: 'Polite', exact: true }).click()
|
await page.locator(".conversation-suggestions summary:visible").click();
|
||||||
const reply = page.getByRole('textbox', { name: 'Reply', exact: true })
|
await page.getByRole("button", { name: /^Polite/ }).click();
|
||||||
await expect(reply).toHaveValue(/Thank you for sharing/)
|
const reply = page.getByRole("textbox", { name: "Reply", exact: true });
|
||||||
const edited =
|
await expect(reply).toHaveValue(/Thank you for sharing/);
|
||||||
'I reviewed the materials. Let’s discuss the first-time experience.'
|
const edited = "I reviewed the materials. Let’s discuss the first-time experience.";
|
||||||
await reply.fill(edited)
|
await reply.fill(edited);
|
||||||
const slot = 'Mon, Oct 5, 14:00–14:30'
|
await page.locator(".conversation-scheduling summary:visible").click();
|
||||||
await page
|
const slot = "Mon, Oct 5, 14:00–14:30";
|
||||||
.getByRole('combobox', { name: 'Suggested times' })
|
await page.getByRole("combobox", { name: "Suggested times" }).selectOption(slot);
|
||||||
.selectOption(slot)
|
await page.getByRole("button", { name: "Add to reply" }).click();
|
||||||
await page.getByRole('button', { name: 'Add to reply' }).click()
|
await expect(reply).toHaveValue(`${edited}\n\nWould ${slot} work for you?`);
|
||||||
await expect(reply).toHaveValue(`${edited}\n\nWould ${slot} work for you?`)
|
await page.getByRole("button", { name: "Review reply" }).click();
|
||||||
await page.getByRole('button', { name: 'Review reply' }).click()
|
const dialog = page.getByRole("dialog", { name: "Review reply" });
|
||||||
const dialog = page.getByRole('dialog', { name: 'Review reply' })
|
await expect(dialog).toContainText(edited);
|
||||||
await expect(dialog).toContainText(edited)
|
await expect(dialog).toContainText(slot);
|
||||||
await expect(dialog).toContainText(slot)
|
await expect(dialog).toContainText("No message will be sent");
|
||||||
await expect(dialog).toContainText('No message will be sent')
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
await dialog.getByRole("button", { name: "Back", exact: true }).click();
|
||||||
await dialog.getByRole('button', { name: 'Back', exact: true }).click()
|
await expect(reply).toHaveValue(new RegExp(edited));
|
||||||
await expect(reply).toHaveValue(new RegExp(edited))
|
await page.getByRole("button", { name: "Review reply" }).click();
|
||||||
await page.getByRole('button', { name: 'Review reply' }).click()
|
await dialog.getByRole("button", { name: "Try sending" }).click();
|
||||||
await dialog.getByRole('button', { name: 'Try sending' }).click()
|
await expect(dialog).toHaveCount(0);
|
||||||
await expect(dialog).toHaveCount(0)
|
await expect(rows.filter({ hasText: reviewSubject })).toHaveCount(0);
|
||||||
await expect(rows.filter({ hasText: reviewSubject })).toHaveCount(0)
|
await page.getByRole("button", { name: "Archive", exact: true }).click();
|
||||||
await page.getByRole('button', { name: 'History', exact: true }).click()
|
await rows.filter({ hasText: reviewSubject }).click();
|
||||||
await rows.filter({ hasText: reviewSubject }).click()
|
await expect(page.locator(".support-outcome")).toContainText(edited);
|
||||||
await expect(page.locator('.support-outcome')).toContainText(edited)
|
await expect(page.locator(".support-outcome")).toContainText(slot);
|
||||||
await expect(page.locator('.support-outcome')).toContainText(slot)
|
});
|
||||||
})
|
|
||||||
|
|
||||||
test('defers a conversation and restores it to the current queue', async ({
|
test("defers a conversation and restores it to the current queue", async ({ page }) => {
|
||||||
page,
|
await page.goto("/support");
|
||||||
}) => {
|
await page.waitForLoadState("networkidle");
|
||||||
await page.goto('/support')
|
const rows = page.locator(".support-row");
|
||||||
await page.waitForLoadState('networkidle')
|
await rows.filter({ hasText: coffeeSubject }).click();
|
||||||
const rows = page.locator('.support-row')
|
|
||||||
await rows.filter({ hasText: coffeeSubject }).click()
|
|
||||||
await page
|
await page
|
||||||
.getByRole('textbox', { name: 'Reply', exact: true })
|
.getByRole("textbox", { name: "Reply", exact: true })
|
||||||
.fill('土曜の予定を確認してから返事するね。')
|
.fill("土曜の予定を確認してから返事するね。");
|
||||||
await page.getByRole('button', { name: 'Leave for later' }).click()
|
await page.getByRole("button", { name: "Leave for later" }).click();
|
||||||
await expect(rows.filter({ hasText: coffeeSubject })).toHaveCount(0)
|
await expect(rows.filter({ hasText: coffeeSubject })).toHaveCount(0);
|
||||||
await page.getByRole('button', { name: 'Later', exact: true }).click()
|
await page.getByRole("button", { name: "Set aside", exact: true }).click();
|
||||||
await rows.filter({ hasText: coffeeSubject }).click()
|
await rows.filter({ hasText: coffeeSubject }).click();
|
||||||
await expect(
|
await expect(page.getByRole("textbox", { name: "Reply", exact: true })).toHaveValue(
|
||||||
page.getByRole('textbox', { name: 'Reply', exact: true }),
|
"土曜の予定を確認してから返事するね。",
|
||||||
).toHaveValue('土曜の予定を確認してから返事するね。')
|
);
|
||||||
await page.getByRole('button', { name: 'Move to Now' }).click()
|
await page.getByRole("button", { name: "Move to Inbox" }).click();
|
||||||
const back = page.getByRole('button', { name: 'Back to messages' })
|
const back = page.getByRole("button", { name: "Back to messages" });
|
||||||
if (await back.isVisible()) await back.click()
|
if (await back.isVisible()) await back.click();
|
||||||
await expect(rows.filter({ hasText: coffeeSubject })).toBeVisible()
|
await expect(rows.filter({ hasText: coffeeSubject })).toBeVisible();
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Inbox", exact: true })).toHaveAttribute(
|
||||||
page.getByRole('button', { name: 'Now', exact: true }),
|
"aria-pressed",
|
||||||
).toHaveAttribute('aria-pressed', 'true')
|
"true",
|
||||||
})
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test('keeps corrections as new records and summarizes only selected current facts', async ({
|
test("keeps corrections as new records and summarizes only selected current facts", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}) => {
|
||||||
await page.goto('/journal')
|
await page.goto("/journal");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Save entry", exact: true })).toBeDisabled();
|
||||||
page.getByRole('button', { name: 'Save entry', exact: true }),
|
await page.getByRole("textbox", { name: "Entry text" }).fill("次はレビュー資料の導線を確認する");
|
||||||
).toBeDisabled()
|
await page.getByRole("button", { name: "Save entry", exact: true }).click();
|
||||||
|
await expect(page.getByRole("article", { name: "Note entry" })).toContainText(
|
||||||
|
"Occurred: Unknown",
|
||||||
|
);
|
||||||
|
await page.getByRole("button", { name: "Weight", exact: true }).click();
|
||||||
|
await page.getByRole("spinbutton", { name: "Weight", exact: true }).fill("65.2");
|
||||||
|
await page.getByRole("textbox", { name: "Source" }).fill("自宅の体重計");
|
||||||
|
await page.getByRole("button", { name: "Save entry", exact: true }).click();
|
||||||
await page
|
await page
|
||||||
.getByRole('textbox', { name: 'Entry text' })
|
.getByRole("article", { name: "Weight entry" })
|
||||||
.fill('次はレビュー資料の導線を確認する')
|
.getByRole("button", { name: "Correct" })
|
||||||
await page.getByRole('button', { name: 'Save entry', exact: true }).click()
|
.click();
|
||||||
await expect(page.getByRole('article', { name: 'Note entry' })).toContainText(
|
const correction = page.getByRole("dialog", { name: "Correct entry" });
|
||||||
'Occurred: Unknown',
|
await correction.getByRole("spinbutton", { name: "Weight", exact: true }).fill("65.8");
|
||||||
)
|
await correction.getByRole("button", { name: "Add correction" }).click();
|
||||||
await page.getByRole('button', { name: 'Weight', exact: true }).click()
|
const weights = page.getByRole("article", { name: "Weight entry" });
|
||||||
await page
|
await expect(weights).toHaveCount(2);
|
||||||
.getByRole('spinbutton', { name: 'Weight', exact: true })
|
await expect(weights.filter({ hasText: "65.2 kg" })).toContainText("Original");
|
||||||
.fill('65.2')
|
await expect(weights.filter({ hasText: "65.8 kg" })).toContainText("Correction");
|
||||||
await page.getByRole('textbox', { name: 'Source' }).fill('自宅の体重計')
|
await page.getByRole("button", { name: "Summarize entries", exact: true }).click();
|
||||||
await page.getByRole('button', { name: 'Save entry', exact: true }).click()
|
const review = page.getByRole("dialog", { name: "Summarize entries" });
|
||||||
await page
|
const summary = review.getByRole("textbox", { name: "Entry summary" });
|
||||||
.getByRole('article', { name: 'Weight entry' })
|
await expect(summary).toHaveValue(/65.8 kg/);
|
||||||
.getByRole('button', { name: 'Correct' })
|
await expect(summary).not.toHaveValue(/65.2 kg/);
|
||||||
.click()
|
await expect(summary).toHaveValue(/Source: 自宅の体重計/);
|
||||||
const correction = page.getByRole('dialog', { name: 'Correct entry' })
|
await expect(summary).toHaveValue(/Entries with an unknown event time: 2 entries/);
|
||||||
await correction
|
await review.getByRole("checkbox", { name: /次はレビュー資料/ }).uncheck();
|
||||||
.getByRole('spinbutton', { name: 'Weight', exact: true })
|
await expect(summary).not.toHaveValue(/次はレビュー資料/);
|
||||||
.fill('65.8')
|
|
||||||
await correction.getByRole('button', { name: 'Add correction' }).click()
|
|
||||||
const weights = page.getByRole('article', { name: 'Weight entry' })
|
|
||||||
await expect(weights).toHaveCount(2)
|
|
||||||
await expect(weights.filter({ hasText: '65.2 kg' })).toContainText('Original')
|
|
||||||
await expect(weights.filter({ hasText: '65.8 kg' })).toContainText(
|
|
||||||
'Correction',
|
|
||||||
)
|
|
||||||
await page
|
|
||||||
.getByRole('button', { name: 'Summarize entries', exact: true })
|
|
||||||
.click()
|
|
||||||
const review = page.getByRole('dialog', { name: 'Summarize entries' })
|
|
||||||
const summary = review.getByRole('textbox', { name: 'Entry summary' })
|
|
||||||
await expect(summary).toHaveValue(/65.8 kg/)
|
|
||||||
await expect(summary).not.toHaveValue(/65.2 kg/)
|
|
||||||
await expect(summary).toHaveValue(/Source: 自宅の体重計/)
|
|
||||||
await expect(summary).toHaveValue(
|
|
||||||
/Entries with an unknown event time: 2 entries/,
|
|
||||||
)
|
|
||||||
await review.getByRole('checkbox', { name: /次はレビュー資料/ }).uncheck()
|
|
||||||
await expect(summary).not.toHaveValue(/次はレビュー資料/)
|
|
||||||
await expect(summary).toHaveValue(
|
await expect(summary).toHaveValue(
|
||||||
/Medication and weight are unknown for periods without entries/,
|
/Medication and weight are unknown for periods without entries/,
|
||||||
)
|
);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
})
|
});
|
||||||
|
|
||||||
test('fits communication and journal interactions in narrow screens', async ({
|
test("fits communication and journal interactions in narrow screens", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}) => {
|
}, testInfo) => {
|
||||||
for (const width of [320, 375, 768]) {
|
for (const width of [320, 375, 414, 768]) {
|
||||||
await page.setViewportSize({ width, height: 850 })
|
await page.setViewportSize({ width, height: 850 });
|
||||||
await page.goto('/support')
|
await page.goto("/support");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
expect(
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
await page.locator(".support-row").first().click();
|
||||||
).toBe(width)
|
await expect(page.getByRole("textbox", { name: "Reply", exact: true })).toBeVisible();
|
||||||
await page.locator('.support-row').first().click()
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
await expect(
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
page.getByRole('textbox', { name: 'Reply', exact: true }),
|
await page.screenshot({ path: testInfo.outputPath(`messages-${width}.png`) });
|
||||||
).toBeVisible()
|
const back = page.getByRole("button", { name: "Back to messages" });
|
||||||
expect(
|
if (await back.isVisible()) await back.click();
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
await page.getByRole("link", { name: "Journal", exact: true }).click();
|
||||||
).toBe(width)
|
await page.getByRole("button", { name: "Weight", exact: true }).click();
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
await expect(page.getByRole("spinbutton", { name: "Weight", exact: true })).toBeVisible();
|
||||||
const back = page.getByRole('button', { name: 'Back to messages' })
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
if (await back.isVisible()) await back.click()
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await page.getByRole('link', { name: 'Journal', exact: true }).click()
|
|
||||||
await page.getByRole('button', { name: 'Weight', exact: true }).click()
|
|
||||||
await expect(
|
|
||||||
page.getByRole('spinbutton', { name: 'Weight', exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
|
test("restores article selection with browser history and reload", async ({ page }) => {
|
||||||
|
await page.goto("/inbox", { waitUntil: "networkidle" });
|
||||||
|
const rows = page.locator(".inbox-article-row");
|
||||||
|
const heading = await rows.nth(1).locator(".inbox-row-title").innerText();
|
||||||
|
await rows.nth(1).click();
|
||||||
|
await expect(page.locator(".inbox-article-title")).toHaveText(heading);
|
||||||
|
const selectedUrl = page.url();
|
||||||
|
expect(new URL(selectedUrl).searchParams.get("article")).toBeTruthy();
|
||||||
|
await page.reload({ waitUntil: "networkidle" });
|
||||||
|
await expect(page.locator(".inbox-article-title")).toHaveText(heading ?? "");
|
||||||
|
await page.goBack();
|
||||||
|
await expect(page.locator(".inbox-workspace")).toHaveAttribute("data-reading", "false");
|
||||||
|
await page.goForward();
|
||||||
|
await expect(page).toHaveURL(selectedUrl);
|
||||||
|
await expect(page.locator(".inbox-article-title")).toHaveText(heading ?? "");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("restores search and replaces typing history", async ({ page }) => {
|
||||||
|
await page.goto("/", { waitUntil: "networkidle" });
|
||||||
|
await page.getByRole("link", { name: "Reader", exact: true }).click();
|
||||||
|
const search = page.getByRole("textbox", { name: "Search articles" });
|
||||||
|
await search.pressSequentially("browser");
|
||||||
|
await expect(search).toHaveValue("browser");
|
||||||
|
await expect.poll(() => new URL(page.url()).searchParams.get("q")).toBe("browser");
|
||||||
|
const count = await page.locator(".inbox-article-row").count();
|
||||||
|
await page.reload({ waitUntil: "networkidle" });
|
||||||
|
await expect(search).toHaveValue("browser");
|
||||||
|
await expect(page.locator(".inbox-article-row")).toHaveCount(count);
|
||||||
|
await page.goBack();
|
||||||
|
await expect(page).toHaveURL("http://127.0.0.1:4173/");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("restores account dialog without losing underlying article", async ({ page }) => {
|
||||||
|
await page.goto("/inbox", { waitUntil: "networkidle" });
|
||||||
|
await page.getByRole("button", { name: "Manage connected accounts" }).click();
|
||||||
|
await expect.poll(() => new URL(page.url()).searchParams.get("accounts")).toBe("true");
|
||||||
|
await page.reload({ waitUntil: "networkidle" });
|
||||||
|
await expect(page.getByRole("dialog")).toBeVisible();
|
||||||
|
await page.goBack();
|
||||||
|
await expect(page.getByRole("dialog")).toHaveCount(0);
|
||||||
|
await page.goForward();
|
||||||
|
await expect(page.getByRole("dialog")).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("restores a message view and conversation from its URL", async ({ page }) => {
|
||||||
|
await page.goto("/support", { waitUntil: "networkidle" });
|
||||||
|
await page.getByRole("button", { name: "All", exact: true }).click();
|
||||||
|
const row = page.locator(".support-row").nth(1);
|
||||||
|
const heading = await row.locator("span").first().innerText();
|
||||||
|
await row.click();
|
||||||
|
await expect(page.locator(".support-toolbar > span").first()).toHaveText(heading);
|
||||||
|
const url = page.url();
|
||||||
|
expect(new URL(url).searchParams.get("view")).toBe("all");
|
||||||
|
expect(new URL(url).searchParams.get("conversation")).toBeTruthy();
|
||||||
|
await page.reload({ waitUntil: "networkidle" });
|
||||||
|
await expect(page.locator(".support-toolbar > span").first()).toHaveText(heading ?? "");
|
||||||
|
await expect(page.locator(".support-workspace")).toHaveAttribute("data-reading", "true");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("keeps a deep link through login", async ({ page, context }) => {
|
||||||
|
await context.clearCookies();
|
||||||
|
await page.goto("/inbox?q=browser", { waitUntil: "networkidle" });
|
||||||
|
await expect(page).toHaveURL(/\/login\?returnTo=/);
|
||||||
|
await page.getByLabel("Email address").fill("[email protected]");
|
||||||
|
await page.getByLabel("Password", { exact: true }).fill("E2E-only-passphrase-2026");
|
||||||
|
await page.getByRole("button", { name: "Sign in", exact: true }).click();
|
||||||
|
await expect(page).toHaveURL(/\/inbox\?q=browser$/);
|
||||||
|
await expect(page.getByRole("textbox", { name: "Search articles" })).toHaveValue("browser");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("debounces search and cancels pending input on history navigation", async ({ page }) => {
|
||||||
|
await page.goto("/support", { waitUntil: "networkidle" });
|
||||||
|
await page.getByRole("button", { name: "All", exact: true }).click();
|
||||||
|
await expect(page).toHaveURL(/view=all/);
|
||||||
|
await page.clock.install();
|
||||||
|
const input = page.getByRole("textbox", { name: "Search messages" });
|
||||||
|
await input.fill("not-committed");
|
||||||
|
await expect(input).toHaveValue("not-committed");
|
||||||
|
expect(new URL(page.url()).searchParams.has("q")).toBe(false);
|
||||||
|
await page.clock.runFor(200);
|
||||||
|
expect(new URL(page.url()).searchParams.has("q")).toBe(false);
|
||||||
|
await page.goBack();
|
||||||
|
await expect(page).toHaveURL("http://127.0.0.1:4173/support");
|
||||||
|
await page.clock.runFor(400);
|
||||||
|
await expect(input).toHaveValue("");
|
||||||
|
expect(new URL(page.url()).searchParams.has("q")).toBe(false);
|
||||||
|
await input.fill("final search");
|
||||||
|
await page.clock.runFor(300);
|
||||||
|
await expect.poll(() => new URL(page.url()).searchParams.get("q")).toBe("final search");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("waits for IME composition to finish before searching", async ({ page }) => {
|
||||||
|
await page.goto("/inbox", { waitUntil: "networkidle" });
|
||||||
|
await page.clock.install();
|
||||||
|
const input = page.getByRole("textbox", { name: "Search articles" });
|
||||||
|
await input.dispatchEvent("compositionstart");
|
||||||
|
await input.fill("browser");
|
||||||
|
await page.clock.runFor(1000);
|
||||||
|
await expect(input).toHaveValue("browser");
|
||||||
|
expect(new URL(page.url()).searchParams.has("q")).toBe(false);
|
||||||
|
await input.dispatchEvent("compositionend", { data: "browser" });
|
||||||
|
await page.clock.runFor(300);
|
||||||
|
await expect.poll(() => new URL(page.url()).searchParams.get("q")).toBe("browser");
|
||||||
|
});
|
||||||
@@ -1,115 +1,124 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
test('filters body systems and opens lab history', async ({ page, a11y }) => {
|
test("filters body systems and opens lab history", async ({ page, a11y }) => {
|
||||||
await page.goto('/vitals')
|
await page.goto("/vitals");
|
||||||
await page.waitForLoadState('networkidle')
|
await page.waitForLoadState("networkidle");
|
||||||
await expect(
|
await expect(page.getByRole("heading", { name: "Body", exact: true })).toBeVisible();
|
||||||
page.getByRole('heading', { name: 'Body', exact: true }),
|
const systems = page.locator(".vital-system-card");
|
||||||
).toBeVisible()
|
await expect(systems).toHaveCount(8);
|
||||||
const systems = page.locator('.vital-system-card')
|
|
||||||
await expect(systems).toHaveCount(8)
|
|
||||||
await page
|
await page
|
||||||
.locator('.vital-body-page > .vital-tabs')
|
.getByRole("group", { name: "Body systems", exact: true })
|
||||||
.getByRole('button', { name: 'Cardiovascular', exact: true })
|
.getByRole("button", { name: "Cardiovascular", exact: true })
|
||||||
.click()
|
.click();
|
||||||
await expect(systems).toHaveCount(1)
|
await expect(systems).toHaveCount(1);
|
||||||
await systems.first().click()
|
await expect(page).toHaveURL(/vitalTab=Cardiovascular/);
|
||||||
const dialog = page.getByRole('dialog', { name: 'Cardiovascular' })
|
await page.reload();
|
||||||
await expect(dialog).toContainText('68')
|
await page.waitForLoadState("networkidle");
|
||||||
await dialog
|
await expect(systems).toHaveCount(1);
|
||||||
.getByRole('button', { name: 'Close', exact: true })
|
await systems.first().click();
|
||||||
.last()
|
const dialog = page.getByRole("dialog", { name: "Cardiovascular" });
|
||||||
.click()
|
await expect(dialog).toContainText("68");
|
||||||
await page.getByRole('button', { name: 'Lab history', exact: true }).click()
|
await page.goBack();
|
||||||
await expect(page.locator('.vital-history')).toContainText('Jul 28')
|
await expect(dialog).not.toBeVisible();
|
||||||
await expect(page.locator('.vital-history')).toContainText('93')
|
await page.goForward();
|
||||||
await page.getByRole('button', { name: 'Systems', exact: true }).click()
|
await expect(dialog).toBeVisible();
|
||||||
|
await dialog.getByRole("button", { name: "Close", exact: true }).last().click();
|
||||||
|
await page.getByRole("button", { name: "Lab history", exact: true }).click();
|
||||||
|
await expect(page.locator(".vital-history")).toContainText("Jul 28");
|
||||||
|
await expect(page.locator(".vital-history")).toContainText("93");
|
||||||
|
await page.reload();
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
await expect(page.locator(".vital-history")).toContainText("Jul 28");
|
||||||
|
await page.getByRole("button", { name: "Systems", exact: true }).click();
|
||||||
await page
|
await page
|
||||||
.locator('.vital-body-page > .vital-tabs')
|
.getByRole("group", { name: "Body systems", exact: true })
|
||||||
.getByRole('button', { name: 'Overview', exact: true })
|
.getByRole("button", { name: "Overview", exact: true })
|
||||||
.click()
|
.click();
|
||||||
await expect(systems).toHaveCount(8)
|
await expect(systems).toHaveCount(8);
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
})
|
});
|
||||||
|
|
||||||
test('explores environment charts and simulated climate controls', async ({
|
test("explores environment charts and simulated climate controls", async ({ page, a11y }) => {
|
||||||
page,
|
await page.goto("/vitals");
|
||||||
a11y,
|
await page.waitForLoadState("networkidle");
|
||||||
}) => {
|
const menu = page.getByRole("button", { name: "Open Health menu" });
|
||||||
await page.goto('/vitals')
|
if (await menu.isVisible()) await menu.click();
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
const menu = page.getByRole('button', { name: 'Open Health menu' })
|
|
||||||
if (await menu.isVisible()) await menu.click()
|
|
||||||
await page
|
await page
|
||||||
.getByRole('complementary', { name: 'Health navigation' })
|
.getByRole("complementary", { name: "Health navigation" })
|
||||||
.getByRole('button', { name: 'Environment', exact: true })
|
.getByRole("button", { name: "Environment", exact: true })
|
||||||
.click()
|
.click();
|
||||||
await expect(
|
await expect(page.getByRole("heading", { name: "Environment", exact: true })).toBeVisible();
|
||||||
page.getByRole('heading', { name: 'Environment', exact: true }),
|
await page.getByRole("button", { name: "7D", exact: true }).click();
|
||||||
).toBeVisible()
|
|
||||||
await page.getByRole('button', { name: '7D', exact: true }).click()
|
|
||||||
await page
|
await page
|
||||||
.getByRole('group', { name: 'Trend metric' })
|
.getByRole("group", { name: "Trend metric" })
|
||||||
.getByRole('button', { name: 'CO₂', exact: true })
|
.getByRole("button", { name: "CO₂", exact: true })
|
||||||
.click()
|
.click();
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole('img', { name: '7D CO₂ simulated environmental readings' }),
|
page.getByRole("img", { name: "7D CO₂ simulated environmental readings" }),
|
||||||
).toBeVisible()
|
).toBeVisible();
|
||||||
await page
|
await page.reload();
|
||||||
.locator('.vital-metric')
|
await page.waitForLoadState("networkidle");
|
||||||
.filter({ hasText: 'Room temperature' })
|
|
||||||
.click()
|
|
||||||
const dialog = page.getByRole('dialog', { name: 'Room temperature' })
|
|
||||||
await expect(dialog).toContainText('64.0')
|
|
||||||
await dialog.getByRole('button', { name: 'Back to overview' }).click()
|
|
||||||
await page.getByRole('button', { name: 'Sync now', exact: true }).click()
|
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole('status').filter({ hasText: 'Sample readings refreshed' }),
|
page.getByRole("img", { name: "7D CO₂ simulated environmental readings" }),
|
||||||
).toBeVisible()
|
).toBeVisible();
|
||||||
expect((await a11y().analyze()).violations).toEqual([])
|
await page.locator(".vital-metric").filter({ hasText: "Room temperature" }).click();
|
||||||
await page
|
const dialog = page.getByRole("dialog", { name: "Room temperature" });
|
||||||
.getByRole('button', { name: 'Climate control', exact: true })
|
await expect(dialog).toContainText("64.0");
|
||||||
.click()
|
await page.reload();
|
||||||
await page.getByRole('button', { name: 'Cool', exact: true }).click()
|
await page.waitForLoadState("networkidle");
|
||||||
|
await expect(dialog).toContainText("64.0");
|
||||||
|
await dialog.getByRole("button", { name: "Back to overview" }).click();
|
||||||
|
await page.getByRole("button", { name: "Sync now", exact: true }).click();
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole('button', { name: 'Cool', exact: true }),
|
page.getByRole("status").filter({ hasText: "Sample readings refreshed" }),
|
||||||
).toHaveAttribute('aria-pressed', 'true')
|
).toBeVisible();
|
||||||
const temperature = page.getByRole('slider', { name: 'Target temperature' })
|
expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await temperature.focus()
|
await page.getByRole("button", { name: "Climate control", exact: true }).click();
|
||||||
await temperature.press('ArrowRight')
|
await page.getByRole("button", { name: "Cool", exact: true }).click();
|
||||||
await expect(temperature).toHaveValue('69')
|
await expect(page.getByRole("button", { name: "Cool", exact: true })).toHaveAttribute(
|
||||||
await page.getByRole('button', { name: 'Air purifier · On' }).click()
|
"aria-pressed",
|
||||||
await expect(
|
"true",
|
||||||
page.getByRole('button', { name: 'Air purifier · Off' }),
|
);
|
||||||
).toHaveAttribute('aria-pressed', 'false')
|
const temperature = page.getByRole("slider", { name: "Target temperature" });
|
||||||
})
|
await temperature.focus();
|
||||||
|
await temperature.press("ArrowRight");
|
||||||
|
await expect(temperature).toHaveValue("69");
|
||||||
|
await page.getByRole("button", { name: "Air purifier · On" }).click();
|
||||||
|
await expect(page.getByRole("button", { name: "Air purifier · Off" })).toHaveAttribute(
|
||||||
|
"aria-pressed",
|
||||||
|
"false",
|
||||||
|
);
|
||||||
|
await page.reload();
|
||||||
|
await page.waitForLoadState("networkidle");
|
||||||
|
await expect(temperature).toHaveValue("68");
|
||||||
|
await expect(page.getByRole("button", { name: "Auto", exact: true })).toHaveAttribute(
|
||||||
|
"aria-pressed",
|
||||||
|
"true",
|
||||||
|
);
|
||||||
|
await expect(page.getByRole("button", { name: "Air purifier · On" })).toHaveAttribute(
|
||||||
|
"aria-pressed",
|
||||||
|
"true",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test('keeps both dashboards within the viewport', async ({
|
test("keeps both dashboards within the viewport", async ({ page }, testInfo) => {
|
||||||
page,
|
await page.goto("/vitals");
|
||||||
}, testInfo) => {
|
await page.waitForLoadState("networkidle");
|
||||||
await page.goto('/vitals')
|
|
||||||
await page.waitForLoadState('networkidle')
|
|
||||||
for (const width of [375, 768, 1440]) {
|
for (const width of [375, 768, 1440]) {
|
||||||
await page.setViewportSize({ width, height: 1000 })
|
await page.setViewportSize({ width, height: 1000 });
|
||||||
expect(
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
await page.screenshot({ path: testInfo.outputPath(`body-${width}.png`) });
|
||||||
).toBe(width)
|
const menu = page.getByRole("button", { name: "Open Health menu" });
|
||||||
await page.screenshot({ path: testInfo.outputPath(`body-${width}.png`) })
|
if (await menu.isVisible()) await menu.click();
|
||||||
const menu = page.getByRole('button', { name: 'Open Health menu' })
|
const navigation = page.getByRole("complementary", {
|
||||||
if (await menu.isVisible()) await menu.click()
|
name: "Health navigation",
|
||||||
const navigation = page.getByRole('complementary', {
|
});
|
||||||
name: 'Health navigation',
|
await navigation.getByRole("button", { name: "Environment", exact: true }).click();
|
||||||
})
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
await navigation
|
|
||||||
.getByRole('button', { name: 'Environment', exact: true })
|
|
||||||
.click()
|
|
||||||
expect(
|
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.screenshot({
|
await page.screenshot({
|
||||||
path: testInfo.outputPath(`environment-${width}.png`),
|
path: testInfo.outputPath(`environment-${width}.png`),
|
||||||
})
|
});
|
||||||
if (await menu.isVisible()) await menu.click()
|
if (await menu.isVisible()) await menu.click();
|
||||||
await navigation.getByRole('button', { name: 'Body', exact: true }).click()
|
await navigation.getByRole("button", { name: "Body", exact: true }).click();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,30 +1,28 @@
|
|||||||
import type { Page } from '@playwright/test'
|
import type { Page } from "@playwright/test";
|
||||||
import Database from 'better-sqlite3'
|
import Database from "better-sqlite3";
|
||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
|
|
||||||
type NativeTesting = {
|
type NativeTesting = {
|
||||||
listTools(): { name: string }[]
|
listTools(): { name: string }[];
|
||||||
executeTool(name: string, input: string): Promise<string | null>
|
executeTool(name: string, input: string): Promise<string | null>;
|
||||||
}
|
};
|
||||||
type ToolResult = {
|
type ToolResult = {
|
||||||
content: { type: string; text: string }[]
|
content: { type: string; text: string }[];
|
||||||
isError?: boolean
|
isError?: boolean;
|
||||||
}
|
};
|
||||||
test.use({
|
test.use({
|
||||||
launchOptions: {
|
launchOptions: {
|
||||||
executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
|
executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
|
||||||
args: ['--enable-blink-features=WebMCP,WebMCPTesting'],
|
args: ["--enable-blink-features=WebMCP,WebMCPTesting"],
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
async function toolNames(page: Page) {
|
async function toolNames(page: Page) {
|
||||||
return page.evaluate(() =>
|
return page.evaluate(() =>
|
||||||
(
|
(navigator as Navigator & { modelContextTesting: NativeTesting }).modelContextTesting
|
||||||
navigator as Navigator & { modelContextTesting: NativeTesting }
|
|
||||||
).modelContextTesting
|
|
||||||
.listTools()
|
.listTools()
|
||||||
.map((tool) => tool.name)
|
.map((tool) => tool.name)
|
||||||
.sort(),
|
.sort(),
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
async function executeTool(
|
async function executeTool(
|
||||||
page: Page,
|
page: Page,
|
||||||
@@ -37,296 +35,249 @@ async function executeTool(
|
|||||||
navigator as Navigator & { modelContextTesting: NativeTesting }
|
navigator as Navigator & { modelContextTesting: NativeTesting }
|
||||||
).modelContextTesting.executeTool(name, JSON.stringify(input)),
|
).modelContextTesting.executeTool(name, JSON.stringify(input)),
|
||||||
{ name, input },
|
{ name, input },
|
||||||
)
|
);
|
||||||
expect(result).not.toBeNull()
|
expect(result).not.toBeNull();
|
||||||
return JSON.parse(result ?? '{}')
|
return JSON.parse(result ?? "{}");
|
||||||
}
|
}
|
||||||
function decoded(result: ToolResult) {
|
function decoded(result: ToolResult) {
|
||||||
return JSON.parse(result.content[0]?.text ?? '{}')
|
return JSON.parse(result.content[0]?.text ?? "{}");
|
||||||
}
|
}
|
||||||
const column = (title: string, connectionId: string) => ({
|
const column = (title: string, connectionId: string) => ({
|
||||||
title,
|
title,
|
||||||
connectionId,
|
connectionId,
|
||||||
source: { kind: 'search', query: 'WebMCP' },
|
source: { kind: "search", query: "WebMCP" },
|
||||||
})
|
});
|
||||||
function savedCount() {
|
function savedCount() {
|
||||||
const db = new Database(process.env.TWITTER_LITE_E2E_DB_PATH ?? '', {
|
const db = new Database(process.env.TWITTER_LITE_E2E_DB_PATH ?? "", {
|
||||||
readonly: true,
|
readonly: true,
|
||||||
})
|
});
|
||||||
try {
|
try {
|
||||||
return db.prepare('SELECT count(*) AS count FROM decks').get()
|
return db.prepare("SELECT count(*) AS count FROM decks").get();
|
||||||
} finally {
|
} finally {
|
||||||
db.close()
|
db.close();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let accounts: Record<string, string>
|
let accounts: Record<string, string>;
|
||||||
let pageErrors: string[]
|
let pageErrors: string[];
|
||||||
test.beforeEach(async ({ page }) => {
|
test.beforeEach(async ({ page }) => {
|
||||||
pageErrors = []
|
pageErrors = [];
|
||||||
page.on('pageerror', (error) => pageErrors.push(error.message))
|
page.on("pageerror", (error) => pageErrors.push(error.message));
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
await expect
|
await expect
|
||||||
.poll(() => toolNames(page))
|
.poll(() => toolNames(page))
|
||||||
.toEqual([
|
.toEqual([
|
||||||
'delete_deck',
|
"delete_deck",
|
||||||
'get_column_posts',
|
"get_column_posts",
|
||||||
'get_deck',
|
"get_deck",
|
||||||
'list_connections',
|
"list_connections",
|
||||||
'list_decks',
|
"list_decks",
|
||||||
'load_more_column',
|
"load_more_column",
|
||||||
'save_deck',
|
"save_deck",
|
||||||
'select_deck',
|
"select_deck",
|
||||||
'set_deck',
|
"set_deck",
|
||||||
])
|
]);
|
||||||
await expect
|
await expect
|
||||||
.poll(
|
.poll(async () => decoded(await executeTool(page, "list_connections")).connections?.length)
|
||||||
async () =>
|
.toBe(2);
|
||||||
decoded(await executeTool(page, 'list_connections')).connections
|
|
||||||
?.length,
|
|
||||||
)
|
|
||||||
.toBe(2)
|
|
||||||
accounts = Object.fromEntries(
|
accounts = Object.fromEntries(
|
||||||
decoded(await executeTool(page, 'list_connections')).connections.map(
|
decoded(await executeTool(page, "list_connections")).connections.map(
|
||||||
(connection: { displayName: string; id: string }) => [
|
(connection: { displayName: string; id: string }) => [connection.displayName, connection.id],
|
||||||
connection.displayName,
|
|
||||||
connection.id,
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
)
|
);
|
||||||
})
|
});
|
||||||
test.afterEach(() => expect(pageErrors).toEqual([]))
|
test.afterEach(() => expect(pageErrors).toEqual([]));
|
||||||
|
|
||||||
test('creates temporary research, edits it, persists explicitly and reopens it on another device', async ({
|
test("creates temporary research, edits it, persists explicitly and reopens it on another device", async ({
|
||||||
page,
|
page,
|
||||||
browser,
|
browser,
|
||||||
baseURL,
|
baseURL,
|
||||||
}) => {
|
}) => {
|
||||||
const created = await executeTool(page, 'set_deck', {
|
const created = await executeTool(page, "set_deck", {
|
||||||
title: 'WebMCPの反応',
|
title: "WebMCPの反応",
|
||||||
columns: [
|
columns: [
|
||||||
{ ...column('日本語', accounts.e2e ?? ''), id: 'new' },
|
{ ...column("日本語", accounts.e2e ?? ""), id: "new" },
|
||||||
column('別の接続', accounts.alternate ?? ''),
|
column("別の接続", accounts.alternate ?? ""),
|
||||||
],
|
],
|
||||||
})
|
});
|
||||||
expect(created.isError).not.toBe(true)
|
expect(created.isError).not.toBe(true);
|
||||||
const deck = decoded(created).deck
|
const deck = decoded(created).deck;
|
||||||
expect(deck.persisted).toBe(false)
|
expect(deck.persisted).toBe(false);
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
expect(savedCount()).toEqual({ count: 0 });
|
||||||
await expect(
|
await expect(page.getByText("alternate · Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
page.getByText('alternate · Latest · all page 1', { exact: true }),
|
|
||||||
).toBeVisible()
|
|
||||||
await page
|
await page
|
||||||
.getByRole('region', { name: '日本語', exact: true })
|
.getByRole("region", { name: "日本語", exact: true })
|
||||||
.getByRole('button', { name: 'Actions for 日本語' })
|
.getByRole("button", { name: "Actions for 日本語" })
|
||||||
.click()
|
.click();
|
||||||
await page.getByRole('menuitem', { name: 'Edit', exact: true }).click()
|
await page.getByRole("menuitem", { name: "Edit", exact: true }).click();
|
||||||
const replaced = await executeTool(page, 'set_deck', {
|
const replaced = await executeTool(page, "set_deck", {
|
||||||
deckId: deck.id,
|
deckId: deck.id,
|
||||||
title: '更新した調査',
|
title: "更新した調査",
|
||||||
columns: [deck.columns[1]],
|
columns: [deck.columns[1]],
|
||||||
})
|
});
|
||||||
expect(replaced.isError).not.toBe(true)
|
expect(replaced.isError).not.toBe(true);
|
||||||
await expect(page.getByRole('dialog')).toHaveCount(0)
|
await expect(page.getByRole("dialog")).toHaveCount(0);
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
expect(savedCount()).toEqual({ count: 0 });
|
||||||
expect(
|
expect((await executeTool(page, "save_deck", { deckId: deck.id })).isError).not.toBe(true);
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
expect((await executeTool(page, "save_deck", { deckId: deck.id })).isError).not.toBe(true);
|
||||||
).not.toBe(true)
|
expect(savedCount()).toEqual({ count: 1 });
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(savedCount()).toEqual({ count: 1 })
|
|
||||||
const other = await browser.newContext({
|
const other = await browser.newContext({
|
||||||
storageState: await page.context().storageState(),
|
storageState: await page.context().storageState(),
|
||||||
baseURL,
|
baseURL,
|
||||||
extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
|
extraHTTPHeaders: { "Tailscale-User-Login": "[email protected]" },
|
||||||
})
|
});
|
||||||
try {
|
try {
|
||||||
const device = await other.newPage()
|
const device = await other.newPage();
|
||||||
await device.goto('/deck')
|
await device.goto("/deck");
|
||||||
await expect(device.getByRole('heading', { level: 1 })).toHaveText(
|
await expect(device.getByRole("heading", { level: 1 })).toHaveText("更新した調査");
|
||||||
'更新した調査',
|
|
||||||
)
|
|
||||||
await expect(
|
await expect(
|
||||||
device.getByText('alternate · Latest · all page 1', { exact: true }),
|
device.getByText("alternate · Latest · all page 1", { exact: true }),
|
||||||
).toBeVisible()
|
).toBeVisible();
|
||||||
} finally {
|
} finally {
|
||||||
await other.close()
|
await other.close();
|
||||||
}
|
}
|
||||||
await page.reload()
|
await page.reload();
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("更新した調査");
|
||||||
'更新した調査',
|
});
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('requires revisions for saved mutations and rejects stale overwrites', async ({
|
test("requires revisions for saved mutations and rejects stale overwrites", async ({ page }) => {
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const deck = decoded(
|
const deck = decoded(
|
||||||
await executeTool(page, 'set_deck', { title: '保存済み', columns: [] }),
|
await executeTool(page, "set_deck", { title: "保存済み", columns: [] }),
|
||||||
).deck
|
).deck;
|
||||||
await executeTool(page, 'save_deck', { deckId: deck.id })
|
await executeTool(page, "save_deck", { deckId: deck.id });
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await executeTool(page, 'set_deck', {
|
await executeTool(page, "set_deck", {
|
||||||
deckId: deck.id,
|
deckId: deck.id,
|
||||||
title: '変更',
|
title: "変更",
|
||||||
columns: [],
|
columns: [],
|
||||||
})
|
})
|
||||||
).isError,
|
).isError,
|
||||||
).toBe(true)
|
).toBe(true);
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await executeTool(page, 'set_deck', {
|
await executeTool(page, "set_deck", {
|
||||||
deckId: deck.id,
|
deckId: deck.id,
|
||||||
expectedRevision: 1,
|
expectedRevision: 1,
|
||||||
title: '変更',
|
title: "変更",
|
||||||
columns: [],
|
columns: [],
|
||||||
})
|
})
|
||||||
).isError,
|
).isError,
|
||||||
).not.toBe(true)
|
).not.toBe(true);
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await executeTool(page, 'set_deck', {
|
await executeTool(page, "set_deck", {
|
||||||
deckId: deck.id,
|
deckId: deck.id,
|
||||||
expectedRevision: 1,
|
expectedRevision: 1,
|
||||||
title: '古い変更',
|
title: "古い変更",
|
||||||
columns: [],
|
columns: [],
|
||||||
})
|
})
|
||||||
).isError,
|
).isError,
|
||||||
).toBe(true)
|
).toBe(true);
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('変更')
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("変更");
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await executeTool(page, 'delete_deck', {
|
await executeTool(page, "delete_deck", {
|
||||||
deckId: deck.id,
|
deckId: deck.id,
|
||||||
expectedRevision: 1,
|
expectedRevision: 1,
|
||||||
})
|
})
|
||||||
).isError,
|
).isError,
|
||||||
).toBe(true)
|
).toBe(true);
|
||||||
expect(
|
expect(
|
||||||
(
|
(
|
||||||
await executeTool(page, 'delete_deck', {
|
await executeTool(page, "delete_deck", {
|
||||||
deckId: deck.id,
|
deckId: deck.id,
|
||||||
expectedRevision: 2,
|
expectedRevision: 2,
|
||||||
})
|
})
|
||||||
).isError,
|
).isError,
|
||||||
).not.toBe(true)
|
).not.toBe(true);
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
expect(savedCount()).toEqual({ count: 0 });
|
||||||
})
|
});
|
||||||
|
|
||||||
test('keeps temporary views independent and loses only unsaved views on reload', async ({
|
test("keeps temporary views independent and loses only unsaved views on reload", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
const first = decoded(
|
const first = decoded(
|
||||||
await executeTool(page, 'set_deck', { title: '一時の調査A', columns: [] }),
|
await executeTool(page, "set_deck", { title: "一時の調査A", columns: [] }),
|
||||||
).deck
|
).deck;
|
||||||
const second = decoded(
|
const second = decoded(
|
||||||
await executeTool(page, 'set_deck', { title: '一時の調査B', columns: [] }),
|
await executeTool(page, "set_deck", { title: "一時の調査B", columns: [] }),
|
||||||
).deck
|
).deck;
|
||||||
await executeTool(page, 'select_deck', { deckId: first.id })
|
await executeTool(page, "select_deck", { deckId: first.id });
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("一時の調査A");
|
||||||
'一時の調査A',
|
await executeTool(page, "delete_deck", { deckId: second.id });
|
||||||
)
|
|
||||||
await executeTool(page, 'delete_deck', { deckId: second.id })
|
|
||||||
expect(
|
expect(
|
||||||
decoded(await executeTool(page, 'list_decks')).decks.some(
|
decoded(await executeTool(page, "list_decks")).decks.some(
|
||||||
(deck: { id: string }) => deck.id === second.id,
|
(deck: { id: string }) => deck.id === second.id,
|
||||||
),
|
),
|
||||||
).toBe(false)
|
).toBe(false);
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
expect(savedCount()).toEqual({ count: 0 });
|
||||||
await page.reload()
|
await page.reload();
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("New research");
|
||||||
'New research',
|
});
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('rejects invalid input without changing the active view', async ({
|
test("rejects invalid input without changing the active view", async ({ page }) => {
|
||||||
page,
|
await executeTool(page, "set_deck", {
|
||||||
}) => {
|
title: "残す調査",
|
||||||
await executeTool(page, 'set_deck', {
|
columns: [column("残す観点", accounts.e2e ?? "")],
|
||||||
title: '残す調査',
|
});
|
||||||
columns: [column('残す観点', accounts.e2e ?? '')],
|
const duplicate = { ...column("不正", accounts.e2e ?? ""), id: "duplicate" };
|
||||||
})
|
|
||||||
const duplicate = { ...column('不正', accounts.e2e ?? ''), id: 'duplicate' }
|
|
||||||
for (const columns of [
|
for (const columns of [
|
||||||
[duplicate, duplicate],
|
[duplicate, duplicate],
|
||||||
[column('不明', 'missing')],
|
[column("不明", "missing")],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
...column('不正', accounts.e2e ?? ''),
|
...column("不正", accounts.e2e ?? ""),
|
||||||
source: { kind: 'list', target: 'invalid' },
|
source: { kind: "list", target: "invalid" },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
]) {
|
]) {
|
||||||
expect(
|
expect((await executeTool(page, "set_deck", { title: "変更しない", columns })).isError).toBe(
|
||||||
(await executeTool(page, 'set_deck', { title: '変更しない', columns }))
|
true,
|
||||||
.isError,
|
);
|
||||||
).toBe(true)
|
await expect(page.locator(".deck-column h2")).toHaveText(["残す観点"]);
|
||||||
await expect(page.locator('.deck-column h2')).toHaveText(['残す観点'])
|
|
||||||
}
|
}
|
||||||
expect(savedCount()).toEqual({ count: 0 })
|
expect(savedCount()).toEqual({ count: 0 });
|
||||||
})
|
});
|
||||||
|
|
||||||
test('keeps failed temporary saves visible and allows retry without duplicate decks', async ({
|
test("keeps failed temporary saves visible and allows retry without duplicate decks", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
const deck = decoded(
|
const deck = decoded(
|
||||||
await executeTool(page, 'set_deck', { title: '未保存の調査', columns: [] }),
|
await executeTool(page, "set_deck", { title: "未保存の調査", columns: [] }),
|
||||||
).deck
|
).deck;
|
||||||
await page.route('**/_serverFn/**', (route) =>
|
await page.route("**/_serverFn/**", (route) =>
|
||||||
route.request().method() === 'POST' ? route.abort() : route.continue(),
|
route.request().method() === "POST" ? route.abort() : route.continue(),
|
||||||
)
|
);
|
||||||
expect(
|
expect((await executeTool(page, "save_deck", { deckId: deck.id })).isError).toBe(true);
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
await expect(page.getByRole("heading", { level: 1 })).toHaveText("未保存の調査");
|
||||||
).toBe(true)
|
expect(decoded(await executeTool(page, "get_deck")).deck.persisted).toBe(false);
|
||||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText(
|
await page.unroute("**/_serverFn/**");
|
||||||
'未保存の調査',
|
expect((await executeTool(page, "save_deck", { deckId: deck.id })).isError).not.toBe(true);
|
||||||
)
|
expect(savedCount()).toEqual({ count: 1 });
|
||||||
expect(decoded(await executeTool(page, 'get_deck')).deck.persisted).toBe(
|
});
|
||||||
false,
|
|
||||||
)
|
|
||||||
await page.unroute('**/_serverFn/**')
|
|
||||||
expect(
|
|
||||||
(await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
|
|
||||||
).not.toBe(true)
|
|
||||||
expect(savedCount()).toEqual({ count: 1 })
|
|
||||||
})
|
|
||||||
|
|
||||||
test('reads and pages bound accounts without mixing sibling columns', async ({
|
test("reads and pages bound accounts without mixing sibling columns", async ({ page }) => {
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
const deck = decoded(
|
const deck = decoded(
|
||||||
await executeTool(page, 'set_deck', {
|
await executeTool(page, "set_deck", {
|
||||||
title: '接続を比較',
|
title: "接続を比較",
|
||||||
columns: [
|
columns: [column("通常", accounts.e2e ?? ""), column("別の接続", accounts.alternate ?? "")],
|
||||||
column('通常', accounts.e2e ?? ''),
|
|
||||||
column('別の接続', accounts.alternate ?? ''),
|
|
||||||
],
|
|
||||||
}),
|
}),
|
||||||
).deck
|
).deck;
|
||||||
await expect(
|
await expect(page.getByText("alternate · Latest · all page 1", { exact: true })).toBeVisible();
|
||||||
page.getByText('alternate · Latest · all page 1', { exact: true }),
|
const id = deck.columns[1].id;
|
||||||
).toBeVisible()
|
const loaded = decoded(await executeTool(page, "get_column_posts", { columnId: id }));
|
||||||
const id = deck.columns[1].id
|
expect(loaded.column.connectionId).toBe(accounts.alternate);
|
||||||
const loaded = decoded(
|
|
||||||
await executeTool(page, 'get_column_posts', { columnId: id }),
|
|
||||||
)
|
|
||||||
expect(loaded.column.connectionId).toBe(accounts.alternate)
|
|
||||||
expect(loaded.posts.map((post: { text: string }) => post.text)).toEqual([
|
expect(loaded.posts.map((post: { text: string }) => post.text)).toEqual([
|
||||||
'alternate · Latest · all page 1',
|
"alternate · Latest · all page 1",
|
||||||
])
|
]);
|
||||||
const more = decoded(
|
const more = decoded(await executeTool(page, "load_more_column", { columnId: id }));
|
||||||
await executeTool(page, 'load_more_column', { columnId: id }),
|
expect(more).toMatchObject({ loadedCount: 2, offset: 1, hasMore: false });
|
||||||
)
|
|
||||||
expect(more).toMatchObject({ loadedCount: 2, offset: 1, hasMore: false })
|
|
||||||
expect(more.posts.map((post: { text: string }) => post.text)).toEqual([
|
expect(more.posts.map((post: { text: string }) => post.text)).toEqual([
|
||||||
'alternate · Latest · all page 2',
|
"alternate · Latest · all page 2",
|
||||||
])
|
]);
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole('region', { name: '通常', exact: true }).locator('article'),
|
page.getByRole("region", { name: "通常", exact: true }).locator("article"),
|
||||||
).toHaveCount(1)
|
).toHaveCount(1);
|
||||||
await executeTool(page, 'set_deck', { title: '別の一時ビュー', columns: [] })
|
await executeTool(page, "set_deck", { title: "別の一時ビュー", columns: [] });
|
||||||
expect(
|
expect((await executeTool(page, "get_column_posts", { columnId: id })).isError).toBe(true);
|
||||||
(await executeTool(page, 'get_column_posts', { columnId: id })).isError,
|
});
|
||||||
).toBe(true)
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,41 +1,35 @@
|
|||||||
import { expect, test } from '../fixtures'
|
import { expect, test } from "../fixtures";
|
||||||
import { closeMobileSidebar, showResearch } from '../workspace'
|
import { closeMobileSidebar, showResearch } from "../workspace";
|
||||||
|
|
||||||
test('keeps the sidebar, composer and deck reachable at compact widths', async ({
|
test("keeps the sidebar, composer and deck reachable at compact widths", async ({
|
||||||
page,
|
page,
|
||||||
a11y,
|
a11y,
|
||||||
}, testInfo) => {
|
}, testInfo) => {
|
||||||
await page.goto('/deck')
|
await page.goto("/deck");
|
||||||
for (const width of [320, 375, 414, 768]) {
|
for (const width of [320, 375, 414, 768]) {
|
||||||
await page.setViewportSize({ width, height: 850 })
|
await page.setViewportSize({ width, height: 850 });
|
||||||
await showResearch(page)
|
await showResearch(page);
|
||||||
const chat = page.getByRole('complementary', { name: 'Research chat' })
|
const chat = page.getByRole("complementary", { name: "Research chat" });
|
||||||
await expect(chat).toBeVisible()
|
await expect(chat).toBeVisible();
|
||||||
const composer = chat.getByRole('textbox', {
|
const composer = chat.getByRole("textbox", {
|
||||||
name: 'Message',
|
name: "Message",
|
||||||
exact: true,
|
exact: true,
|
||||||
})
|
});
|
||||||
await expect(composer).toBeVisible()
|
await expect(composer).toBeVisible();
|
||||||
const bounds = await composer.boundingBox()
|
const bounds = await composer.boundingBox();
|
||||||
if (!bounds) throw new Error('Composer must have a visible bounding box')
|
if (!bounds) throw new Error("Composer must have a visible bounding box");
|
||||||
expect(bounds.x).toBeGreaterThanOrEqual(0)
|
expect(bounds.x).toBeGreaterThanOrEqual(0);
|
||||||
expect(bounds.x + bounds.width).toBeLessThanOrEqual(width)
|
expect(bounds.x + bounds.width).toBeLessThanOrEqual(width);
|
||||||
expect(bounds.y + bounds.height).toBeLessThanOrEqual(850)
|
expect(bounds.y + bounds.height).toBeLessThanOrEqual(850);
|
||||||
expect(
|
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBe(width);
|
||||||
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
||||||
).toBe(width)
|
|
||||||
await page.screenshot({
|
await page.screenshot({
|
||||||
path: testInfo.outputPath(`workspace-${width}.png`),
|
path: testInfo.outputPath(`workspace-${width}.png`),
|
||||||
})
|
});
|
||||||
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([]);
|
||||||
await closeMobileSidebar(page)
|
await closeMobileSidebar(page);
|
||||||
}
|
}
|
||||||
await page.getByRole('button', { name: 'Toggle sidebar' }).click()
|
await page.getByRole("button", { name: "Toggle sidebar" }).click();
|
||||||
await expect(
|
await expect(page.getByRole("complementary", { name: "Research chat" })).toBeHidden();
|
||||||
page.getByRole('complementary', { name: 'Research chat' }),
|
await page.getByRole("button", { name: "Research chat", exact: true }).click();
|
||||||
).toBeHidden()
|
await expect(page.getByRole("complementary", { name: "Research chat" })).toBeVisible();
|
||||||
await page.getByRole('button', { name: 'Research chat', exact: true }).click()
|
});
|
||||||
await expect(
|
|
||||||
page.getByRole('complementary', { name: 'Research chat' }),
|
|
||||||
).toBeVisible()
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,33 +1,32 @@
|
|||||||
import { createServer } from 'node:http'
|
import { createServer } from "node:http";
|
||||||
import { tweetLegacyFixture } from './fixtures/twitter.ts'
|
import { tweetLegacyFixture } from "./fixtures/twitter.ts";
|
||||||
|
|
||||||
const portValue = process.env.TWITTER_LITE_MOCK_RELAY_PORT
|
const portValue = process.env.TWITTER_LITE_MOCK_RELAY_PORT;
|
||||||
const port = Number(portValue)
|
const port = Number(portValue);
|
||||||
|
|
||||||
if (!portValue || !Number.isInteger(port) || port < 1) {
|
if (!portValue || !Number.isInteger(port) || port < 1) {
|
||||||
throw new Error('TWITTER_LITE_MOCK_RELAY_PORT must be a valid port')
|
throw new Error("TWITTER_LITE_MOCK_RELAY_PORT must be a valid port");
|
||||||
}
|
}
|
||||||
|
|
||||||
const failedRetryQueries = new Set()
|
const failedRetryQueries = new Set();
|
||||||
const rootByTarget = new Map([
|
const rootByTarget = new Map([
|
||||||
['1001', '1000'],
|
["1001", "1000"],
|
||||||
['2001', '2000'],
|
["2001", "2000"],
|
||||||
['3001', '3000'],
|
["3001", "3000"],
|
||||||
])
|
]);
|
||||||
const targetByRoot = new Map([
|
const targetByRoot = new Map([
|
||||||
['1000', '1001'],
|
["1000", "1001"],
|
||||||
['2000', '2001'],
|
["2000", "2001"],
|
||||||
['3000', '3001'],
|
["3000", "3001"],
|
||||||
])
|
]);
|
||||||
const failedThreadRoots = new Set()
|
const failedThreadRoots = new Set();
|
||||||
|
|
||||||
const isRecord = (value) =>
|
const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
|
||||||
value !== null && typeof value === 'object' && !Array.isArray(value)
|
|
||||||
|
|
||||||
const tweetResult = (
|
const tweetResult = (
|
||||||
id,
|
id,
|
||||||
text,
|
text,
|
||||||
username = 'yuta',
|
username = "yuta",
|
||||||
{ conversationId = id, inReplyTo, replyCount = 1 } = {},
|
{ conversationId = id, inReplyTo, replyCount = 1 } = {},
|
||||||
) => ({
|
) => ({
|
||||||
rest_id: id,
|
rest_id: id,
|
||||||
@@ -39,14 +38,14 @@ const tweetResult = (
|
|||||||
core: {
|
core: {
|
||||||
user_results: {
|
user_results: {
|
||||||
result: {
|
result: {
|
||||||
rest_id: '42',
|
rest_id: "42",
|
||||||
legacy: { screen_name: username, name: 'Yuta' },
|
legacy: { screen_name: username, name: "Yuta" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const tweet = (id, text, username = 'yuta', options) => ({
|
const tweet = (id, text, username = "yuta", options) => ({
|
||||||
entryId: `tweet-${id}`,
|
entryId: `tweet-${id}`,
|
||||||
content: {
|
content: {
|
||||||
itemContent: {
|
itemContent: {
|
||||||
@@ -55,149 +54,140 @@ const tweet = (id, text, username = 'yuta', options) => ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const cursor = (value) => ({
|
const cursor = (value) => ({
|
||||||
entryId: 'cursor-bottom',
|
entryId: "cursor-bottom",
|
||||||
content: { cursorType: 'Bottom', value },
|
content: { cursorType: "Bottom", value },
|
||||||
})
|
});
|
||||||
|
|
||||||
const send = (response, payload, status = 200, headers = {}) => {
|
const send = (response, payload, status = 200, headers = {}) => {
|
||||||
response.writeHead(status, {
|
response.writeHead(status, {
|
||||||
'content-type': 'application/json; charset=utf-8',
|
"content-type": "application/json; charset=utf-8",
|
||||||
...headers,
|
...headers,
|
||||||
})
|
});
|
||||||
response.end(JSON.stringify(payload))
|
response.end(JSON.stringify(payload));
|
||||||
}
|
};
|
||||||
|
|
||||||
const fail = (response, status, message, headers) =>
|
const fail = (response, status, message, headers) =>
|
||||||
send(response, { errors: [{ message }] }, status, headers)
|
send(response, { errors: [{ message }] }, status, headers);
|
||||||
|
|
||||||
const variablesFrom = (url) => {
|
const variablesFrom = (url) => {
|
||||||
const encoded = url.searchParams.get('variables')
|
const encoded = url.searchParams.get("variables");
|
||||||
if (!encoded) throw new Error('variables are required')
|
if (!encoded) throw new Error("variables are required");
|
||||||
const variables = JSON.parse(encoded)
|
const variables = JSON.parse(encoded);
|
||||||
if (!isRecord(variables)) throw new Error('variables must be an object')
|
if (!isRecord(variables)) throw new Error("variables must be an object");
|
||||||
return variables
|
return variables;
|
||||||
}
|
};
|
||||||
|
|
||||||
const jsonBodyFrom = async (request) => {
|
const jsonBodyFrom = async (request) => {
|
||||||
let body = ''
|
let body = "";
|
||||||
for await (const chunk of request) {
|
for await (const chunk of request) {
|
||||||
body += chunk
|
body += chunk;
|
||||||
if (body.length > 1_000_000) throw new Error('request body is too large')
|
if (body.length > 1_000_000) throw new Error("request body is too large");
|
||||||
}
|
}
|
||||||
const parsed = JSON.parse(body)
|
const parsed = JSON.parse(body);
|
||||||
if (!isRecord(parsed)) throw new Error('JSON body must be an object')
|
if (!isRecord(parsed)) throw new Error("JSON body must be an object");
|
||||||
return parsed
|
return parsed;
|
||||||
}
|
};
|
||||||
|
|
||||||
const timeline = (entries) => ({ instructions: [{ entries }] })
|
const timeline = (entries) => ({ instructions: [{ entries }] });
|
||||||
|
|
||||||
const server = createServer(async (request, response) => {
|
const server = createServer(async (request, response) => {
|
||||||
const url = new URL(request.url ?? '/', `http://127.0.0.1:${port}`)
|
const url = new URL(request.url ?? "/", `http://127.0.0.1:${port}`);
|
||||||
if (request.method === 'GET' && url.pathname === '/profiles') {
|
if (request.method === "GET" && url.pathname === "/profiles") {
|
||||||
send(response, { profiles: ['e2e', 'alternate'] })
|
send(response, { profiles: ["e2e", "alternate"] });
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const operation = [
|
const operation = [
|
||||||
'UserByScreenName',
|
"UserByScreenName",
|
||||||
'UserTweets',
|
"UserTweets",
|
||||||
'TweetDetail',
|
"TweetDetail",
|
||||||
'SearchTimeline',
|
"SearchTimeline",
|
||||||
'ListsManagementPageTimeline',
|
"ListsManagementPageTimeline",
|
||||||
'ListLatestTweetsTimeline',
|
"ListLatestTweetsTimeline",
|
||||||
].find((name) => url.pathname.endsWith(`/${name}`))
|
].find((name) => url.pathname.endsWith(`/${name}`));
|
||||||
|
|
||||||
if (!operation) {
|
if (!operation) {
|
||||||
fail(response, 501, 'unsupported read operation')
|
fail(response, 501, "unsupported read operation");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const expectedMethod = operation === 'SearchTimeline' ? 'POST' : 'GET'
|
const expectedMethod = operation === "SearchTimeline" ? "POST" : "GET";
|
||||||
if (request.method !== expectedMethod) {
|
if (request.method !== expectedMethod) {
|
||||||
fail(response, 405, `expected ${expectedMethod}`, {
|
fail(response, 405, `expected ${expectedMethod}`, {
|
||||||
allow: expectedMethod,
|
allow: expectedMethod,
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const profileName = request.headers['x-profile-name']
|
const profileName = request.headers["x-profile-name"];
|
||||||
if (profileName !== 'e2e' && profileName !== 'alternate') {
|
if (profileName !== "e2e" && profileName !== "alternate") {
|
||||||
fail(response, 403, 'invalid profile')
|
fail(response, 403, "invalid profile");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let variables
|
let variables;
|
||||||
try {
|
try {
|
||||||
variables = variablesFrom(url)
|
variables = variablesFrom(url);
|
||||||
} catch {
|
} catch {
|
||||||
fail(response, 400, 'malformed variables')
|
fail(response, 400, "malformed variables");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (operation === 'UserByScreenName') {
|
if (operation === "UserByScreenName") {
|
||||||
if (
|
if (typeof variables.screen_name !== "string" || variables.screen_name.length === 0) {
|
||||||
typeof variables.screen_name !== 'string' ||
|
fail(response, 400, "screen_name is required");
|
||||||
variables.screen_name.length === 0
|
return;
|
||||||
) {
|
|
||||||
fail(response, 400, 'screen_name is required')
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
user: {
|
user: {
|
||||||
result: {
|
result: {
|
||||||
rest_id: '42',
|
rest_id: "42",
|
||||||
legacy: { screen_name: variables.screen_name, name: 'Yuta' },
|
legacy: { screen_name: variables.screen_name, name: "Yuta" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (operation === 'UserTweets') {
|
if (operation === "UserTweets") {
|
||||||
const expectedCursor =
|
const expectedCursor = variables.cursor === undefined || variables.cursor === "user-next";
|
||||||
variables.cursor === undefined || variables.cursor === 'user-next'
|
if (variables.userId !== "42" || variables.count !== 20 || !expectedCursor) {
|
||||||
if (
|
fail(response, 400, "invalid user timeline variables");
|
||||||
variables.userId !== '42' ||
|
return;
|
||||||
variables.count !== 20 ||
|
|
||||||
!expectedCursor
|
|
||||||
) {
|
|
||||||
fail(response, 400, 'invalid user timeline variables')
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
const secondPage = variables.cursor === 'user-next'
|
const secondPage = variables.cursor === "user-next";
|
||||||
const firstPageText =
|
const firstPageText = profileName === "alternate" ? "alternate profile page 1" : "user page 1";
|
||||||
profileName === 'alternate' ? 'alternate profile page 1' : 'user page 1'
|
|
||||||
const entries = secondPage
|
const entries = secondPage
|
||||||
? [tweet('1010', 'user page 2')]
|
? [tweet("1010", "user page 2")]
|
||||||
: [
|
: [
|
||||||
tweet('1001', firstPageText, 'yuta', {
|
tweet("1001", firstPageText, "yuta", {
|
||||||
conversationId: '1000',
|
conversationId: "1000",
|
||||||
}),
|
}),
|
||||||
cursor('user-next'),
|
cursor("user-next"),
|
||||||
]
|
];
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
user: { result: { timeline: { timeline: timeline(entries) } } },
|
user: { result: { timeline: { timeline: timeline(entries) } } },
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (operation === 'ListsManagementPageTimeline') {
|
if (operation === "ListsManagementPageTimeline") {
|
||||||
if (variables.count !== 100) {
|
if (variables.count !== 100) {
|
||||||
fail(response, 400, 'invalid lists management variables')
|
fail(response, 400, "invalid lists management variables");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const features = url.searchParams.get('features')
|
const features = url.searchParams.get("features");
|
||||||
try {
|
try {
|
||||||
if (!features || !isRecord(JSON.parse(features))) throw new Error()
|
if (!features || !isRecord(JSON.parse(features))) throw new Error();
|
||||||
} catch {
|
} catch {
|
||||||
fail(response, 400, 'invalid lists management feature lock')
|
fail(response, 400, "invalid lists management feature lock");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
@@ -210,28 +200,26 @@ const server = createServer(async (request, response) => {
|
|||||||
{
|
{
|
||||||
content: {
|
content: {
|
||||||
clientEventInfo: {
|
clientEventInfo: {
|
||||||
component: 'suggest_owned_subscribed_list',
|
component: "suggest_owned_subscribed_list",
|
||||||
},
|
},
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
item: {
|
item: {
|
||||||
itemContent: {
|
itemContent: {
|
||||||
list: {
|
list: {
|
||||||
id_str: '1234567890',
|
id_str: "1234567890",
|
||||||
name:
|
name:
|
||||||
profileName === 'alternate'
|
profileName === "alternate" ? "Alternate List" : "My E2E List",
|
||||||
? 'Alternate List'
|
description: "Accounts selected for testing",
|
||||||
: 'My E2E List',
|
|
||||||
description: 'Accounts selected for testing',
|
|
||||||
member_count: 10,
|
member_count: 10,
|
||||||
mode: 'Public',
|
mode: "Public",
|
||||||
created_at: 1_704_067_200_000,
|
created_at: 1_704_067_200_000,
|
||||||
user_results: {
|
user_results: {
|
||||||
result: {
|
result: {
|
||||||
rest_id: '42',
|
rest_id: "42",
|
||||||
core: {
|
core: {
|
||||||
screen_name: 'yuta',
|
screen_name: "yuta",
|
||||||
name: 'Yuta',
|
name: "Yuta",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -249,66 +237,65 @@ const server = createServer(async (request, response) => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
errors: [{ message: 'optional banner field failed' }],
|
errors: [{ message: "optional banner field failed" }],
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (operation === 'ListLatestTweetsTimeline') {
|
if (operation === "ListLatestTweetsTimeline") {
|
||||||
const expectedCursor =
|
const expectedCursor = variables.cursor === undefined || variables.cursor === "list-next";
|
||||||
variables.cursor === undefined || variables.cursor === 'list-next'
|
|
||||||
if (
|
if (
|
||||||
typeof variables.listId !== 'string' ||
|
typeof variables.listId !== "string" ||
|
||||||
!/^\d+$/.test(variables.listId) ||
|
!/^\d+$/.test(variables.listId) ||
|
||||||
variables.count !== 20 ||
|
variables.count !== 20 ||
|
||||||
!expectedCursor
|
!expectedCursor
|
||||||
) {
|
) {
|
||||||
fail(response, 400, 'invalid list timeline variables')
|
fail(response, 400, "invalid list timeline variables");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const secondPage = variables.cursor === 'list-next'
|
const secondPage = variables.cursor === "list-next";
|
||||||
const entries = secondPage
|
const entries = secondPage
|
||||||
? [tweet('3010', 'list page 2', 'listed')]
|
? [tweet("3010", "list page 2", "listed")]
|
||||||
: [tweet('3001', 'list page 1', 'listed'), cursor('list-next')]
|
: [tweet("3001", "list page 1", "listed"), cursor("list-next")];
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
list: { tweets_timeline: { timeline: timeline(entries) } },
|
list: { tweets_timeline: { timeline: timeline(entries) } },
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (operation === 'TweetDetail') {
|
if (operation === "TweetDetail") {
|
||||||
const focalTweetId = variables.focalTweetId
|
const focalTweetId = variables.focalTweetId;
|
||||||
if (typeof focalTweetId !== 'string' || !/^\d+$/.test(focalTweetId)) {
|
if (typeof focalTweetId !== "string" || !/^\d+$/.test(focalTweetId)) {
|
||||||
fail(response, 400, 'invalid focalTweetId')
|
fail(response, 400, "invalid focalTweetId");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const features = url.searchParams.get('features')
|
const features = url.searchParams.get("features");
|
||||||
const fieldToggles = url.searchParams.get('fieldToggles')
|
const fieldToggles = url.searchParams.get("fieldToggles");
|
||||||
try {
|
try {
|
||||||
if (!features || !isRecord(JSON.parse(features))) throw new Error()
|
if (!features || !isRecord(JSON.parse(features))) throw new Error();
|
||||||
if (!fieldToggles || !isRecord(JSON.parse(fieldToggles))) {
|
if (!fieldToggles || !isRecord(JSON.parse(fieldToggles))) {
|
||||||
throw new Error()
|
throw new Error();
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
fail(response, 400, 'invalid TweetDetail feature locks')
|
fail(response, 400, "invalid TweetDetail feature locks");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const targetRoot = rootByTarget.get(focalTweetId)
|
const targetRoot = rootByTarget.get(focalTweetId);
|
||||||
if (targetRoot && variables.cursor === undefined) {
|
if (targetRoot && variables.cursor === undefined) {
|
||||||
const noReplies = focalTweetId === '3001'
|
const noReplies = focalTweetId === "3001";
|
||||||
const text = noReplies
|
const text = noReplies
|
||||||
? 'no replies'
|
? "no replies"
|
||||||
: focalTweetId === '1001'
|
: focalTweetId === "1001"
|
||||||
? 'user page 1'
|
? "user page 1"
|
||||||
: 'retry focal'
|
: "retry focal";
|
||||||
const result = tweetResult(focalTweetId, text, 'focus', {
|
const result = tweetResult(focalTweetId, text, "focus", {
|
||||||
conversationId: targetRoot,
|
conversationId: targetRoot,
|
||||||
inReplyTo: targetRoot,
|
inReplyTo: targetRoot,
|
||||||
replyCount: noReplies ? 0 : 1,
|
replyCount: noReplies ? 0 : 1,
|
||||||
})
|
});
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
tweetResult: { result },
|
tweetResult: { result },
|
||||||
@@ -316,7 +303,7 @@ const server = createServer(async (request, response) => {
|
|||||||
instructions: [
|
instructions: [
|
||||||
{
|
{
|
||||||
entries: [
|
entries: [
|
||||||
tweet(focalTweetId, text, 'focus', {
|
tweet(focalTweetId, text, "focus", {
|
||||||
conversationId: targetRoot,
|
conversationId: targetRoot,
|
||||||
inReplyTo: targetRoot,
|
inReplyTo: targetRoot,
|
||||||
replyCount: noReplies ? 0 : 1,
|
replyCount: noReplies ? 0 : 1,
|
||||||
@@ -326,47 +313,43 @@ const server = createServer(async (request, response) => {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const targetId = targetByRoot.get(focalTweetId)
|
const targetId = targetByRoot.get(focalTweetId);
|
||||||
if (!targetId) {
|
if (!targetId) {
|
||||||
fail(response, 400, 'unsupported TweetDetail fixture')
|
fail(response, 400, "unsupported TweetDetail fixture");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const expectedCursor = `thread-next:${focalTweetId}`
|
const expectedCursor = `thread-next:${focalTweetId}`;
|
||||||
if (variables.cursor !== undefined && variables.cursor !== expectedCursor) {
|
if (variables.cursor !== undefined && variables.cursor !== expectedCursor) {
|
||||||
fail(response, 400, 'invalid thread cursor')
|
fail(response, 400, "invalid thread cursor");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if (variables.cursor && focalTweetId === '3000') {
|
if (variables.cursor && focalTweetId === "3000") {
|
||||||
fail(response, 500, 'zero-reply thread must not request a continuation')
|
fail(response, 500, "zero-reply thread must not request a continuation");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if (
|
if (variables.cursor && focalTweetId === "2000" && !failedThreadRoots.has(focalTweetId)) {
|
||||||
variables.cursor &&
|
failedThreadRoots.add(focalTweetId);
|
||||||
focalTweetId === '2000' &&
|
fail(response, 503, "transient thread fixture failure");
|
||||||
!failedThreadRoots.has(focalTweetId)
|
return;
|
||||||
) {
|
|
||||||
failedThreadRoots.add(focalTweetId)
|
|
||||||
fail(response, 503, 'transient thread fixture failure')
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const entries = variables.cursor
|
const entries = variables.cursor
|
||||||
? [
|
? [
|
||||||
tweet(`${focalTweetId}3`, 'thread page 2', 'reply2', {
|
tweet(`${focalTweetId}3`, "thread page 2", "reply2", {
|
||||||
conversationId: focalTweetId,
|
conversationId: focalTweetId,
|
||||||
inReplyTo: targetId,
|
inReplyTo: targetId,
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
: focalTweetId === '3000'
|
: focalTweetId === "3000"
|
||||||
? [
|
? [
|
||||||
tweet(focalTweetId, 'thread root', 'root', {
|
tweet(focalTweetId, "thread root", "root", {
|
||||||
conversationId: focalTweetId,
|
conversationId: focalTweetId,
|
||||||
}),
|
}),
|
||||||
tweet(targetId, 'no replies', 'focus', {
|
tweet(targetId, "no replies", "focus", {
|
||||||
conversationId: focalTweetId,
|
conversationId: focalTweetId,
|
||||||
inReplyTo: focalTweetId,
|
inReplyTo: focalTweetId,
|
||||||
replyCount: 0,
|
replyCount: 0,
|
||||||
@@ -374,28 +357,23 @@ const server = createServer(async (request, response) => {
|
|||||||
cursor(expectedCursor),
|
cursor(expectedCursor),
|
||||||
]
|
]
|
||||||
: [
|
: [
|
||||||
tweet(focalTweetId, 'thread root', 'root', {
|
tweet(focalTweetId, "thread root", "root", {
|
||||||
conversationId: focalTweetId,
|
conversationId: focalTweetId,
|
||||||
}),
|
}),
|
||||||
tweet(
|
tweet(targetId, focalTweetId === "1000" ? "user page 1" : "retry focal", "focus", {
|
||||||
targetId,
|
conversationId: focalTweetId,
|
||||||
focalTweetId === '1000' ? 'user page 1' : 'retry focal',
|
inReplyTo: focalTweetId,
|
||||||
'focus',
|
}),
|
||||||
{
|
tweet(`${focalTweetId}2`, "thread page 1", "reply1", {
|
||||||
conversationId: focalTweetId,
|
|
||||||
inReplyTo: focalTweetId,
|
|
||||||
},
|
|
||||||
),
|
|
||||||
tweet(`${focalTweetId}2`, 'thread page 1', 'reply1', {
|
|
||||||
conversationId: focalTweetId,
|
conversationId: focalTweetId,
|
||||||
inReplyTo: targetId,
|
inReplyTo: targetId,
|
||||||
}),
|
}),
|
||||||
cursor(expectedCursor),
|
cursor(expectedCursor),
|
||||||
]
|
];
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
tweetResult: {
|
tweetResult: {
|
||||||
result: tweetResult(focalTweetId, 'thread root', 'root', {
|
result: tweetResult(focalTweetId, "thread root", "root", {
|
||||||
conversationId: focalTweetId,
|
conversationId: focalTweetId,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
@@ -403,67 +381,62 @@ const server = createServer(async (request, response) => {
|
|||||||
instructions: [{ entries }],
|
instructions: [{ entries }],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
if (variables.cursor && focalTweetId === '2000') {
|
if (variables.cursor && focalTweetId === "2000") {
|
||||||
failedThreadRoots.delete(focalTweetId)
|
failedThreadRoots.delete(focalTweetId);
|
||||||
}
|
}
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const contentType = request.headers['content-type'] ?? ''
|
const contentType = request.headers["content-type"] ?? "";
|
||||||
if (!/^application\/json(?:\s*;|$)/i.test(contentType)) {
|
if (!/^application\/json(?:\s*;|$)/i.test(contentType)) {
|
||||||
fail(response, 400, 'SearchTimeline requires JSON')
|
fail(response, 400, "SearchTimeline requires JSON");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let body
|
let body;
|
||||||
try {
|
try {
|
||||||
body = await jsonBodyFrom(request)
|
body = await jsonBodyFrom(request);
|
||||||
} catch {
|
} catch {
|
||||||
fail(response, 400, 'malformed JSON body')
|
fail(response, 400, "malformed JSON body");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const rawQuery = variables.rawQuery
|
const rawQuery = variables.rawQuery;
|
||||||
const expectedCursor =
|
const expectedCursor =
|
||||||
variables.cursor === undefined ||
|
variables.cursor === undefined || variables.cursor === `search-next:${rawQuery}`;
|
||||||
variables.cursor === `search-next:${rawQuery}`
|
|
||||||
if (
|
if (
|
||||||
typeof rawQuery !== 'string' ||
|
typeof rawQuery !== "string" ||
|
||||||
rawQuery.length === 0 ||
|
rawQuery.length === 0 ||
|
||||||
variables.count !== 20 ||
|
variables.count !== 20 ||
|
||||||
variables.querySource !== 'typed_query' ||
|
variables.querySource !== "typed_query" ||
|
||||||
!['Top', 'Latest'].includes(variables.product) ||
|
!["Top", "Latest"].includes(variables.product) ||
|
||||||
!expectedCursor ||
|
!expectedCursor ||
|
||||||
!isRecord(body.features) ||
|
!isRecord(body.features) ||
|
||||||
typeof body.queryId !== 'string' ||
|
typeof body.queryId !== "string" ||
|
||||||
body.queryId.length === 0 ||
|
body.queryId.length === 0 ||
|
||||||
Object.hasOwn(body, 'variables')
|
Object.hasOwn(body, "variables")
|
||||||
) {
|
) {
|
||||||
fail(response, 400, 'invalid search request')
|
fail(response, 400, "invalid search request");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const secondPage = variables.cursor !== undefined
|
const secondPage = variables.cursor !== undefined;
|
||||||
if (
|
if (secondPage && rawQuery.startsWith("retry-") && !failedRetryQueries.has(rawQuery)) {
|
||||||
secondPage &&
|
failedRetryQueries.add(rawQuery);
|
||||||
rawQuery.startsWith('retry-') &&
|
fail(response, 503, "transient fixture failure");
|
||||||
!failedRetryQueries.has(rawQuery)
|
return;
|
||||||
) {
|
|
||||||
failedRetryQueries.add(rawQuery)
|
|
||||||
fail(response, 503, 'transient fixture failure')
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
if (secondPage && rawQuery.startsWith('slow-')) {
|
if (secondPage && rawQuery.startsWith("slow-")) {
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1_200))
|
await new Promise((resolve) => setTimeout(resolve, 1_200));
|
||||||
}
|
}
|
||||||
|
|
||||||
const follows = rawQuery.includes('filter:follows') ? 'follows' : 'all'
|
const follows = rawQuery.includes("filter:follows") ? "follows" : "all";
|
||||||
const label = `${profileName === 'alternate' ? 'alternate · ' : ''}${variables.product} · ${follows}`
|
const label = `${profileName === "alternate" ? "alternate · " : ""}${variables.product} · ${follows}`;
|
||||||
const id = encodeURIComponent(rawQuery)
|
const id = encodeURIComponent(rawQuery);
|
||||||
const entries = secondPage
|
const entries = secondPage
|
||||||
? [tweet(`s-${id}-2`, `${label} page 2`)]
|
? [tweet(`s-${id}-2`, `${label} page 2`)]
|
||||||
: [tweet(`s-${id}-1`, `${label} page 1`), cursor(`search-next:${rawQuery}`)]
|
: [tweet(`s-${id}-1`, `${label} page 1`), cursor(`search-next:${rawQuery}`)];
|
||||||
|
|
||||||
send(response, {
|
send(response, {
|
||||||
data: {
|
data: {
|
||||||
@@ -471,7 +444,7 @@ const server = createServer(async (request, response) => {
|
|||||||
search_timeline: { timeline: timeline(entries) },
|
search_timeline: { timeline: timeline(entries) },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
server.listen(port, '127.0.0.1')
|
server.listen(port, "127.0.0.1");
|
||||||
|
|||||||
@@ -1,39 +1,33 @@
|
|||||||
import { expect, type Page } from '@playwright/test'
|
import { expect, type Page } from "@playwright/test";
|
||||||
|
|
||||||
export async function showDeckManagement(page: Page) {
|
export async function showDeckManagement(page: Page) {
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Rename", includeHidden: true })).toBeEnabled();
|
||||||
page.getByRole('button', { name: 'Rename', includeHidden: true }),
|
const navigation = page.getByRole("button", {
|
||||||
).toBeEnabled()
|
name: "Deck manager",
|
||||||
const navigation = page.getByRole('button', {
|
|
||||||
name: 'Deck manager',
|
|
||||||
exact: true,
|
exact: true,
|
||||||
})
|
});
|
||||||
if (!(await navigation.isVisible())) {
|
if (!(await navigation.isVisible())) {
|
||||||
await page.getByRole('button', { name: 'Toggle sidebar' }).click()
|
await page.getByRole("button", { name: "Toggle sidebar" }).click();
|
||||||
}
|
}
|
||||||
await navigation.click()
|
await navigation.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function showResearch(page: Page) {
|
export async function showResearch(page: Page) {
|
||||||
await expect(
|
await expect(page.getByRole("button", { name: "Rename", includeHidden: true })).toBeEnabled();
|
||||||
page.getByRole('button', { name: 'Rename', includeHidden: true }),
|
const navigation = page.getByRole("button", {
|
||||||
).toBeEnabled()
|
name: "Research chat",
|
||||||
const navigation = page.getByRole('button', {
|
|
||||||
name: 'Research chat',
|
|
||||||
exact: true,
|
exact: true,
|
||||||
})
|
});
|
||||||
if (!(await navigation.isVisible())) {
|
if (!(await navigation.isVisible())) {
|
||||||
await page.getByRole('button', { name: 'Toggle sidebar' }).click()
|
await page.getByRole("button", { name: "Toggle sidebar" }).click();
|
||||||
}
|
}
|
||||||
await navigation.click()
|
await navigation.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function closeMobileSidebar(page: Page) {
|
export async function closeMobileSidebar(page: Page) {
|
||||||
const sheet = page.locator('[data-mobile="true"][data-sidebar="sidebar"]')
|
const sheet = page.locator('[data-mobile="true"][data-sidebar="sidebar"]');
|
||||||
if (await sheet.isVisible()) {
|
if (await sheet.isVisible()) {
|
||||||
await page
|
await page.getByRole("button", { name: "Close sidebar", exact: true }).click();
|
||||||
.getByRole('button', { name: 'Close sidebar', exact: true })
|
await expect(sheet).toBeHidden();
|
||||||
.click()
|
|
||||||
await expect(sheet).toBeHidden()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
inherit (finalAttrs) pname version src;
|
inherit (finalAttrs) pname version src;
|
||||||
pnpm = pkgs.pnpm_11;
|
pnpm = pkgs.pnpm_11;
|
||||||
fetcherVersion = 4;
|
fetcherVersion = 4;
|
||||||
hash = "sha256-+DqNt+58TrI0W8SU//JNdYYJtCdKNIG7gfWRxno36QQ=";
|
hash = "sha256-60nQAoDWoO15P7TFLhABqGNYpJy/R+w+Zz3oo7qD8dM=";
|
||||||
};
|
};
|
||||||
|
|
||||||
nativeBuildInputs = with pkgs; [
|
nativeBuildInputs = with pkgs; [
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { KnipConfig } from 'knip'
|
import type { KnipConfig } from "knip";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
entry: ['playwright.config.ts', 'e2e/**/*.test.ts', 'e2e/mock-relay.mjs'],
|
entry: ["playwright.config.ts", "e2e/**/*.test.ts", "e2e/mock-relay.mjs"],
|
||||||
playwright: false,
|
playwright: false,
|
||||||
} satisfies KnipConfig
|
} satisfies KnipConfig;
|
||||||
|
|||||||
@@ -1,64 +1,61 @@
|
|||||||
import { defineConfig, defineTransformer } from 'orval'
|
import { defineConfig, defineTransformer } from "orval";
|
||||||
|
|
||||||
const selectedTag = 'twitter-lite-e2e'
|
const selectedTag = "twitter-lite-e2e";
|
||||||
const selectedOperationIds = new Set([
|
const selectedOperationIds = new Set([
|
||||||
'getUserByScreenName',
|
"getUserByScreenName",
|
||||||
'getUserTweets',
|
"getUserTweets",
|
||||||
'getTweetDetail',
|
"getTweetDetail",
|
||||||
'getSearchTimeline',
|
"getSearchTimeline",
|
||||||
'getListLatestTweetsTimeline',
|
"getListLatestTweetsTimeline",
|
||||||
])
|
]);
|
||||||
|
|
||||||
const selectE2eOperations = defineTransformer((document) => {
|
const selectE2eOperations = defineTransformer((document) => {
|
||||||
const foundOperationIds = new Set<string>()
|
const foundOperationIds = new Set<string>();
|
||||||
|
|
||||||
for (const pathItem of Object.values(document.paths ?? {})) {
|
for (const pathItem of Object.values(document.paths ?? {})) {
|
||||||
if (!pathItem || typeof pathItem !== 'object') continue
|
if (!pathItem || typeof pathItem !== "object") continue;
|
||||||
|
|
||||||
for (const candidate of Object.values(pathItem)) {
|
for (const candidate of Object.values(pathItem)) {
|
||||||
if (
|
if (
|
||||||
!candidate ||
|
!candidate ||
|
||||||
typeof candidate !== 'object' ||
|
typeof candidate !== "object" ||
|
||||||
Array.isArray(candidate) ||
|
Array.isArray(candidate) ||
|
||||||
!('operationId' in candidate)
|
!("operationId" in candidate)
|
||||||
) {
|
) {
|
||||||
continue
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const operation = candidate as {
|
const operation = candidate as {
|
||||||
operationId?: string
|
operationId?: string;
|
||||||
tags?: string[]
|
tags?: string[];
|
||||||
}
|
};
|
||||||
|
|
||||||
if (
|
if (operation.operationId && selectedOperationIds.has(operation.operationId)) {
|
||||||
operation.operationId &&
|
foundOperationIds.add(operation.operationId);
|
||||||
selectedOperationIds.has(operation.operationId)
|
operation.tags = [...(operation.tags ?? []), selectedTag];
|
||||||
) {
|
|
||||||
foundOperationIds.add(operation.operationId)
|
|
||||||
operation.tags = [...(operation.tags ?? []), selectedTag]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const missingOperationIds = [...selectedOperationIds].filter(
|
const missingOperationIds = [...selectedOperationIds].filter(
|
||||||
(operationId) => !foundOperationIds.has(operationId),
|
(operationId) => !foundOperationIds.has(operationId),
|
||||||
)
|
);
|
||||||
if (missingOperationIds.length > 0) {
|
if (missingOperationIds.length > 0) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`twitter-openapi is missing selected operations: ${missingOperationIds.join(', ')}`,
|
`twitter-openapi is missing selected operations: ${missingOperationIds.join(", ")}`,
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return document
|
return document;
|
||||||
})
|
});
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
twitterOpenApi: {
|
twitterOpenApi: {
|
||||||
input: {
|
input: {
|
||||||
target:
|
target:
|
||||||
'https://raw.githubusercontent.com/fa0311/twitter-openapi/590dae5c9f8575abc91d3774946bfe6f23960aba/dist/docs/openapi-3.0.yaml',
|
"https://raw.githubusercontent.com/fa0311/twitter-openapi/590dae5c9f8575abc91d3774946bfe6f23960aba/dist/docs/openapi-3.0.yaml",
|
||||||
filters: {
|
filters: {
|
||||||
mode: 'include',
|
mode: "include",
|
||||||
tags: [selectedTag],
|
tags: [selectedTag],
|
||||||
},
|
},
|
||||||
override: {
|
override: {
|
||||||
@@ -67,9 +64,9 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
clean: true,
|
clean: true,
|
||||||
client: 'fetch',
|
client: "fetch",
|
||||||
mode: 'single',
|
mode: "single",
|
||||||
target: './e2e/generated/twitter-openapi/client.ts',
|
target: "./e2e/generated/twitter-openapi/client.ts",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -2,56 +2,41 @@
|
|||||||
"name": "twitter-lite",
|
"name": "twitter-lite",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"packageManager": "[email protected]",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=22.12.0"
|
|
||||||
},
|
|
||||||
"knip": {
|
|
||||||
"ignoreBinaries": [
|
|
||||||
"codex"
|
|
||||||
],
|
|
||||||
"ignore": [
|
|
||||||
"e2e/generated/**"
|
|
||||||
],
|
|
||||||
"ignoreIssues": {
|
|
||||||
"src/components/ui/**": [
|
|
||||||
"exports"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"imports": {
|
"imports": {
|
||||||
"#/*": "./src/*"
|
"#/*": "./src/*"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"codex:serve": "node scripts/serve-codex.mjs",
|
"db:generate": "drizzle-kit generate && node scripts/bundle-migrations.mjs && oxfmt --write src/features/storage/migrations.generated.ts",
|
||||||
"db:generate": "drizzle-kit generate && node scripts/bundle-migrations.mjs && biome format --write src/features/storage/migrations.generated.ts",
|
|
||||||
"db:backup": "tsx scripts/backup-database.ts",
|
"db:backup": "tsx scripts/backup-database.ts",
|
||||||
"dev": "vite dev --host 127.0.0.1 --port 3000",
|
"dev": "vite dev --host 127.0.0.1 --port 3000",
|
||||||
"dev:tailscale": "vite dev --host 127.0.0.1 --port 3000",
|
"dev:tailscale": "vite dev --host 127.0.0.1 --port 3000",
|
||||||
"generate:e2e-openapi": "orval --config orval.config.ts --formatter biome --fail-on-warnings",
|
"generate:e2e-openapi": "orval --config orval.config.ts --fail-on-warnings && oxfmt --write e2e/generated",
|
||||||
"generate-routes": "node scripts/generate-routes.mjs",
|
"generate-routes": "node scripts/generate-routes.mjs",
|
||||||
"check:routes": "pnpm generate-routes && git diff --exit-code -- src/routeTree.gen.ts",
|
"check:routes": "pnpm generate-routes && git diff --exit-code -- src/routeTree.gen.ts",
|
||||||
"build": "vite build && node scripts/build-tools.mjs",
|
"build": "vite build && node scripts/build-tools.mjs",
|
||||||
"start": "HOST=127.0.0.1 node .output/server/index.mjs",
|
"start": "HOST=127.0.0.1 node .output/server/index.mjs",
|
||||||
"typecheck": "tsc --noEmit",
|
"typecheck": "tsc --noEmit",
|
||||||
"lint": "biome check . && pnpm lint:ui",
|
"lint": "oxlint",
|
||||||
"knip": "knip",
|
"knip": "knip",
|
||||||
"format": "biome check --write .",
|
"format": "oxfmt --write .",
|
||||||
"test": "vitest run",
|
"test": "vitest run",
|
||||||
"test:watch": "vitest",
|
"test:watch": "vitest",
|
||||||
"test:e2e": "playwright test",
|
"test:e2e": "playwright test",
|
||||||
"test:live": "TWITTER_LITE_LIVE=1 vitest run tests/live/relay.test.ts",
|
"test:live": "TWITTER_LITE_LIVE=1 vitest run tests/live/relay.test.ts",
|
||||||
"lint:ui": "oxlint src",
|
"account:setup": "node --env-file-if-exists=.env.local --import tsx scripts/account-setup.ts",
|
||||||
"account:setup": "node --env-file-if-exists=.env.local --import tsx scripts/account-setup.ts"
|
"format:check": "oxfmt --check ."
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@base-ui/react": "1.8.0",
|
"@base-ui/react": "1.8.0",
|
||||||
"@shadcn/react": "^0.3.1",
|
"@shadcn/react": "^0.3.1",
|
||||||
|
"@tanstack/react-pacer": "^0.23.0",
|
||||||
"@tanstack/react-query": "5.101.2",
|
"@tanstack/react-query": "5.101.2",
|
||||||
"@tanstack/react-router": "1.170.17",
|
"@tanstack/react-router": "1.170.17",
|
||||||
"@tanstack/react-router-ssr-query": "1.167.1",
|
"@tanstack/react-router-ssr-query": "1.167.1",
|
||||||
"@tanstack/react-start": "1.168.27",
|
"@tanstack/react-start": "1.168.27",
|
||||||
"@yuta/bird": "0.10.1",
|
"@yuta/bird": "0.10.1",
|
||||||
|
"ai": "7.0.118",
|
||||||
|
"ai-sdk-provider-codex-cli": "2.3.0",
|
||||||
"better-sqlite3": "13.0.3",
|
"better-sqlite3": "13.0.3",
|
||||||
"class-variance-authority": "0.7.1",
|
"class-variance-authority": "0.7.1",
|
||||||
"cn": "^0.4.0",
|
"cn": "^0.4.0",
|
||||||
@@ -60,18 +45,18 @@
|
|||||||
"nitro": "3.0.260610-beta",
|
"nitro": "3.0.260610-beta",
|
||||||
"react": "19.2.7",
|
"react": "19.2.7",
|
||||||
"react-dom": "19.2.7",
|
"react-dom": "19.2.7",
|
||||||
"react-markdown": "10.1.0",
|
|
||||||
"remark-gfm": "4.0.1",
|
"remark-gfm": "4.0.1",
|
||||||
"sanitize-html": "2.17.7",
|
"sanitize-html": "2.17.7",
|
||||||
"shadcn": "4.21.0",
|
"shadcn": "4.21.0",
|
||||||
|
"streamdown": "^2.6.0",
|
||||||
"tw-animate-css": "1.4.0",
|
"tw-animate-css": "1.4.0",
|
||||||
"usewebmcp": "5.1.0",
|
"usewebmcp": "5.1.0",
|
||||||
"zod": "4.4.3"
|
"zod": "4.4.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@axe-core/playwright": "4.11.1",
|
"@axe-core/playwright": "4.11.1",
|
||||||
"@biomejs/biome": "2.5.3",
|
|
||||||
"@playwright/test": "1.61.1",
|
"@playwright/test": "1.61.1",
|
||||||
|
"@shadcn/helpers": "0.2.0",
|
||||||
"@shadcn/lint": "^0.2.0",
|
"@shadcn/lint": "^0.2.0",
|
||||||
"@tailwindcss/vite": "^4.3.3",
|
"@tailwindcss/vite": "^4.3.3",
|
||||||
"@testing-library/dom": "10.4.1",
|
"@testing-library/dom": "10.4.1",
|
||||||
@@ -87,11 +72,27 @@
|
|||||||
"jsdom": "29.1.1",
|
"jsdom": "29.1.1",
|
||||||
"knip": "6.27.0",
|
"knip": "6.27.0",
|
||||||
"orval": "8.24.0",
|
"orval": "8.24.0",
|
||||||
|
"oxfmt": "^0.70.0",
|
||||||
"oxlint": "^1.85.0",
|
"oxlint": "^1.85.0",
|
||||||
|
"oxlint-tsgolint": "^7.0.2003",
|
||||||
"tailwindcss": "^4.3.3",
|
"tailwindcss": "^4.3.3",
|
||||||
"tsx": "4.23.12",
|
"tsx": "4.23.12",
|
||||||
"typescript": "7.0.2",
|
"typescript": "7.0.2",
|
||||||
"vite": "8.1.4",
|
"vite": "8.1.4",
|
||||||
"vitest": "4.1.10"
|
"vitest": "4.1.10"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.12.0"
|
||||||
|
},
|
||||||
|
"packageManager": "[email protected]",
|
||||||
|
"knip": {
|
||||||
|
"ignore": [
|
||||||
|
"e2e/generated/**"
|
||||||
|
],
|
||||||
|
"ignoreIssues": {
|
||||||
|
"src/components/ui/**": [
|
||||||
|
"exports"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,32 @@
|
|||||||
import { mkdtempSync } from 'node:fs'
|
import { mkdtempSync } from "node:fs";
|
||||||
import { tmpdir } from 'node:os'
|
import { tmpdir } from "node:os";
|
||||||
import { join } from 'node:path'
|
import { join } from "node:path";
|
||||||
import { defineConfig, devices } from '@playwright/test'
|
import { defineConfig, devices } from "@playwright/test";
|
||||||
|
|
||||||
const appPort = 4173
|
const appPort = 4173;
|
||||||
const relayPort = 6911
|
const relayPort = 6911;
|
||||||
const chromiumExecutable = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE
|
const chromiumExecutable = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE;
|
||||||
const databasePath =
|
const databasePath =
|
||||||
process.env.TWITTER_LITE_E2E_DB_PATH ??
|
process.env.TWITTER_LITE_E2E_DB_PATH ??
|
||||||
join(mkdtempSync(join(tmpdir(), 'twitter-lite-e2e-')), 'workspace.sqlite')
|
join(mkdtempSync(join(tmpdir(), "twitter-lite-e2e-")), "workspace.sqlite");
|
||||||
process.env.TWITTER_LITE_E2E_DB_PATH = databasePath
|
process.env.TWITTER_LITE_E2E_DB_PATH = databasePath;
|
||||||
|
|
||||||
if (!chromiumExecutable) {
|
if (!chromiumExecutable) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'PLAYWRIGHT_CHROMIUM_EXECUTABLE is required; run E2E tests with `nix develop -c pnpm test:e2e`.',
|
"PLAYWRIGHT_CHROMIUM_EXECUTABLE is required; run E2E tests with `nix develop -c pnpm test:e2e`.",
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
testDir: './e2e',
|
testDir: "./e2e",
|
||||||
fullyParallel: false,
|
fullyParallel: false,
|
||||||
workers: 1,
|
workers: 1,
|
||||||
use: {
|
use: {
|
||||||
baseURL: `http://127.0.0.1:${appPort}`,
|
baseURL: `http://127.0.0.1:${appPort}`,
|
||||||
extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
|
extraHTTPHeaders: { "Tailscale-User-Login": "[email protected]" },
|
||||||
launchOptions: { executablePath: chromiumExecutable },
|
launchOptions: { executablePath: chromiumExecutable },
|
||||||
screenshot: 'only-on-failure',
|
screenshot: "only-on-failure",
|
||||||
trace: 'retain-on-failure',
|
trace: "retain-on-failure",
|
||||||
},
|
},
|
||||||
webServer: [
|
webServer: [
|
||||||
{
|
{
|
||||||
@@ -36,14 +36,14 @@ export default defineConfig({
|
|||||||
timeout: 120_000,
|
timeout: 120_000,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
command: `WORKSPACE_SETUP_TOKEN=isolated-e2e-setup-token-not-for-production TWITTER_LITE_CODEX_URL= TWITTER_LITE_REPORT_ROOT= TWITTER_LITE_CODEX_MODEL= TWITTER_LITE_MASTODON_ORIGINS= TWITTER_LITE_CREDENTIAL_KEY_FILE= TWITTER_LITE_DB_PATH=${databasePath} TWITTER_LITE_ORIGIN=http://127.0.0.1:${appPort} [email protected] TWITTER_RELAY_BASE_URL=http://127.0.0.1:${relayPort} BIRD_PROFILE_NAME=e2e pnpm exec vite dev --host 127.0.0.1 --port ${appPort} --strictPort`,
|
command: `WORKSPACE_SETUP_TOKEN=isolated-e2e-setup-token-not-for-production TWITTER_LITE_CODEX_PATH= TWITTER_LITE_REPORT_ROOT= TWITTER_LITE_CODEX_MODEL= TWITTER_LITE_MASTODON_ORIGINS= TWITTER_LITE_CREDENTIAL_KEY_FILE= TWITTER_LITE_DB_PATH=${databasePath} TWITTER_LITE_ORIGIN=http://127.0.0.1:${appPort} [email protected] TWITTER_RELAY_BASE_URL=http://127.0.0.1:${relayPort} BIRD_PROFILE_NAME=e2e pnpm exec vite dev --host 127.0.0.1 --port ${appPort} --strictPort`,
|
||||||
port: appPort,
|
port: appPort,
|
||||||
reuseExistingServer: false,
|
reuseExistingServer: false,
|
||||||
timeout: 120_000,
|
timeout: 120_000,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
projects: [
|
projects: [
|
||||||
{ name: 'desktop', use: { ...devices['Desktop Chrome'] } },
|
{ name: "desktop", use: { ...devices["Desktop Chrome"] } },
|
||||||
{ name: 'mobile', use: { ...devices['Pixel 7'] } },
|
{ name: "mobile", use: { ...devices["Pixel 7"] } },
|
||||||
],
|
],
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
import { getSetupToken, readAuthState } from '../src/features/auth/auth.server'
|
import { getSetupToken, readAuthState } from "../src/features/auth/auth.server";
|
||||||
|
|
||||||
if (!readAuthState().needsSetup) {
|
if (!readAuthState().needsSetup) {
|
||||||
console.error(
|
console.error("This workspace already has an owner. Sign in with your existing account.");
|
||||||
'This workspace already has an owner. Sign in with your existing account.',
|
process.exitCode = 1;
|
||||||
)
|
|
||||||
process.exitCode = 1
|
|
||||||
} else {
|
} else {
|
||||||
console.log(
|
console.log("Open /setup in your workspace and enter this one-time setup code:");
|
||||||
'Open /setup in your workspace and enter this one-time setup code:',
|
console.log(getSetupToken());
|
||||||
)
|
|
||||||
console.log(getSetupToken())
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
import { backupDatabase } from '../src/features/storage/backup.server'
|
import { backupDatabase } from "../src/features/storage/backup.server";
|
||||||
|
|
||||||
const source = process.env.TWITTER_LITE_DB_PATH
|
const source = process.env.TWITTER_LITE_DB_PATH;
|
||||||
const destination = process.argv[2]
|
const destination = process.argv[2];
|
||||||
if (!source || !destination || process.argv.length !== 3) {
|
if (!source || !destination || process.argv.length !== 3) {
|
||||||
console.error(
|
console.error("Usage: TWITTER_LITE_DB_PATH=/absolute/app.db pnpm db:backup /absolute/backup.db");
|
||||||
'Usage: TWITTER_LITE_DB_PATH=/absolute/app.db pnpm db:backup /absolute/backup.db',
|
process.exitCode = 1;
|
||||||
)
|
|
||||||
process.exitCode = 1
|
|
||||||
} else {
|
} else {
|
||||||
await backupDatabase(source, destination)
|
await backupDatabase(source, destination);
|
||||||
console.log(`Backup verified: ${destination}`)
|
console.log(`Backup verified: ${destination}`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import { build } from 'vite'
|
import { build } from "vite";
|
||||||
|
|
||||||
for (const entry of ['backup-database', 'account-setup']) {
|
for (const entry of ["backup-database", "account-setup"]) {
|
||||||
await build({
|
await build({
|
||||||
configFile: false,
|
configFile: false,
|
||||||
build: {
|
build: {
|
||||||
ssr: `scripts/${entry}.ts`,
|
ssr: `scripts/${entry}.ts`,
|
||||||
outDir: '.output/server/tools',
|
outDir: ".output/server/tools",
|
||||||
emptyOutDir: false,
|
emptyOutDir: false,
|
||||||
rollupOptions: { external: ['better-sqlite3'] },
|
rollupOptions: { external: ["better-sqlite3"] },
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { writeFileSync } from 'node:fs'
|
import { writeFileSync } from "node:fs";
|
||||||
import { readMigrationFiles } from 'drizzle-orm/migrator'
|
import { readMigrationFiles } from "drizzle-orm/migrator";
|
||||||
|
|
||||||
const migrations = readMigrationFiles({
|
const migrations = readMigrationFiles({
|
||||||
migrationsFolder: new URL('../drizzle', import.meta.url).pathname,
|
migrationsFolder: new URL("../drizzle", import.meta.url).pathname,
|
||||||
})
|
});
|
||||||
writeFileSync(
|
writeFileSync(
|
||||||
new URL('../src/features/storage/migrations.generated.ts', import.meta.url),
|
new URL("../src/features/storage/migrations.generated.ts", import.meta.url),
|
||||||
`// Generated by pnpm db:generate. Do not edit.\nexport const migrations = ${JSON.stringify(migrations, null, 2)}\n`,
|
`// Generated by pnpm db:generate. Do not edit.\nexport const migrations = ${JSON.stringify(migrations, null, 2)}\n`,
|
||||||
)
|
);
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
|
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
|
||||||
import { createServer } from 'vite'
|
import { createServer } from "vite";
|
||||||
|
|
||||||
const server = await createServer({
|
const server = await createServer({
|
||||||
configFile: false,
|
configFile: false,
|
||||||
plugins: [tanstackStart()],
|
plugins: [tanstackStart()],
|
||||||
server: { middlewareMode: true },
|
server: { middlewareMode: true },
|
||||||
})
|
});
|
||||||
await server.close()
|
await server.close();
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
import { spawn, spawnSync } from 'node:child_process'
|
|
||||||
import { mkdir } from 'node:fs/promises'
|
|
||||||
import { homedir } from 'node:os'
|
|
||||||
import { resolve } from 'node:path'
|
|
||||||
|
|
||||||
// This process is independent of Vite / the web backend. Keep it running while
|
|
||||||
// restarting the app. Codex owns its own login and refreshes that login normally.
|
|
||||||
const reportRoot = resolve(
|
|
||||||
process.env.TWITTER_LITE_REPORT_ROOT || '.data/research',
|
|
||||||
)
|
|
||||||
const endpoint = new URL(
|
|
||||||
process.env.TWITTER_LITE_CODEX_URL || 'ws://127.0.0.1:4500',
|
|
||||||
)
|
|
||||||
if (
|
|
||||||
endpoint.protocol !== 'ws:' ||
|
|
||||||
endpoint.hostname !== '127.0.0.1' ||
|
|
||||||
endpoint.username ||
|
|
||||||
endpoint.password
|
|
||||||
) {
|
|
||||||
throw new Error('The prototype Codex endpoint must be ws://127.0.0.1:<port>.')
|
|
||||||
}
|
|
||||||
await mkdir(reportRoot, { recursive: true, mode: 0o700 })
|
|
||||||
const env = {
|
|
||||||
HOME: homedir(),
|
|
||||||
PATH: process.env.PATH,
|
|
||||||
CODEX_HOME: process.env.CODEX_HOME || resolve(homedir(), '.codex'),
|
|
||||||
}
|
|
||||||
for (const name of [
|
|
||||||
'LANG',
|
|
||||||
'LC_ALL',
|
|
||||||
'SSL_CERT_FILE',
|
|
||||||
'SSL_CERT_DIR',
|
|
||||||
'NIX_SSL_CERT_FILE',
|
|
||||||
'TMPDIR',
|
|
||||||
]) {
|
|
||||||
if (process.env[name]) env[name] = process.env[name]
|
|
||||||
}
|
|
||||||
// Enumerate the effective config, including CLI-wrapper and project settings.
|
|
||||||
// Keep this output private: MCP transport settings can contain credentials.
|
|
||||||
const configured = spawnSync('codex', ['mcp', 'list', '--json'], {
|
|
||||||
cwd: reportRoot,
|
|
||||||
env,
|
|
||||||
encoding: 'utf8',
|
|
||||||
timeout: 15_000,
|
|
||||||
maxBuffer: 4 * 1024 * 1024,
|
|
||||||
})
|
|
||||||
let mcpOverrides
|
|
||||||
try {
|
|
||||||
if (configured.error || configured.status !== 0) throw new Error()
|
|
||||||
const servers = JSON.parse(configured.stdout)
|
|
||||||
if (!Array.isArray(servers)) throw new Error()
|
|
||||||
mcpOverrides = servers.flatMap((server) => {
|
|
||||||
if (
|
|
||||||
typeof server?.name !== 'string' ||
|
|
||||||
!/^[A-Za-z0-9_-]+$/.test(server.name)
|
|
||||||
)
|
|
||||||
throw new Error()
|
|
||||||
return ['-c', `mcp_servers.${server.name}.enabled=false`]
|
|
||||||
})
|
|
||||||
} catch {
|
|
||||||
throw new Error(
|
|
||||||
'Could not inspect Codex MCP configuration safely. Check codex mcp list locally.',
|
|
||||||
)
|
|
||||||
}
|
|
||||||
const child = spawn(
|
|
||||||
'codex',
|
|
||||||
[
|
|
||||||
// Keep overrides before the subcommand so they merge with wrapper settings.
|
|
||||||
'-c',
|
|
||||||
'shell_environment_policy.inherit="none"',
|
|
||||||
'-c',
|
|
||||||
'features.multi_agent=false',
|
|
||||||
'-c',
|
|
||||||
'features.hooks=false',
|
|
||||||
'-c',
|
|
||||||
'web_search="disabled"',
|
|
||||||
...mcpOverrides,
|
|
||||||
'app-server',
|
|
||||||
'--listen',
|
|
||||||
endpoint.origin,
|
|
||||||
],
|
|
||||||
{ cwd: reportRoot, env, stdio: 'inherit' },
|
|
||||||
)
|
|
||||||
child.on('error', () => {
|
|
||||||
console.error(
|
|
||||||
'Could not start Codex. Install codex and run codex login first.',
|
|
||||||
)
|
|
||||||
process.exitCode = 1
|
|
||||||
})
|
|
||||||
child.on('exit', (code) => {
|
|
||||||
process.exitCode = code ?? 1
|
|
||||||
})
|
|
||||||
for (const signal of ['SIGINT', 'SIGTERM'])
|
|
||||||
process.on(signal, () => child.kill(signal))
|
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
:root {
|
||||||
|
--canvas: var(--color-canvas);
|
||||||
|
--surface: var(--color-paper-2);
|
||||||
|
--paper: var(--color-paper);
|
||||||
|
--ink: var(--color-ink);
|
||||||
|
--accent-hover: var(--color-accent-hover);
|
||||||
|
--control-border: var(--color-control-rule);
|
||||||
|
--error: var(--color-error);
|
||||||
|
color: var(--ink);
|
||||||
|
background: var(--canvas);
|
||||||
|
color-scheme: dark;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 14px;
|
||||||
|
font-synthesis: none;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-width: 320px;
|
||||||
|
overflow-x: clip;
|
||||||
|
background: var(--canvas);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--primary);
|
||||||
|
text-underline-offset: 0.18em;
|
||||||
|
}
|
||||||
|
a:active {
|
||||||
|
color: var(--accent-hover);
|
||||||
|
}
|
||||||
|
:focus-visible {
|
||||||
|
outline: var(--rule-active) solid var(--color-focus);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 0;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: var(--text-display-s);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
.handle {
|
||||||
|
display: block;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace .reader {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.sidebar-note {
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
/* Respect reduced motion over registry component animation utilities. */
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
/* Respect reduced motion over registry component transition utilities. */
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Columns3, MessageSquare, PanelLeftClose } from 'lucide-react'
|
import { Columns3, MessageSquare, PanelLeftClose } from "lucide-react";
|
||||||
import { type CSSProperties, type ReactNode, useState } from 'react'
|
import { type CSSProperties, type ReactNode, useState } from "react";
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
SidebarInset,
|
SidebarInset,
|
||||||
@@ -8,16 +8,16 @@ import {
|
|||||||
SidebarProvider,
|
SidebarProvider,
|
||||||
SidebarTrigger,
|
SidebarTrigger,
|
||||||
useSidebar,
|
useSidebar,
|
||||||
} from '#/components/ui/sidebar'
|
} from "#/components/ui/sidebar";
|
||||||
import { TooltipProvider } from '#/components/ui/tooltip'
|
import { TooltipProvider } from "#/components/ui/tooltip";
|
||||||
import { WorkspaceNavigation } from '#/components/workspace-navigation'
|
import { WorkspaceNavigation } from "#/components/workspace-navigation";
|
||||||
|
|
||||||
type ShellProps = {
|
type ShellProps = {
|
||||||
hasTemporaryDecks: boolean
|
hasTemporaryDecks: boolean;
|
||||||
sidebar: ReactNode
|
sidebar: ReactNode;
|
||||||
researchChat: (closeMobileSidebar: () => void) => ReactNode
|
researchChat: (closeMobileSidebar: () => void) => ReactNode;
|
||||||
children: ReactNode
|
children: ReactNode;
|
||||||
}
|
};
|
||||||
|
|
||||||
export function AppShell(props: ShellProps) {
|
export function AppShell(props: ShellProps) {
|
||||||
return (
|
return (
|
||||||
@@ -26,29 +26,24 @@ export function AppShell(props: ShellProps) {
|
|||||||
className="workspace h-dvh min-h-0 overflow-hidden"
|
className="workspace h-dvh min-h-0 overflow-hidden"
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
'--sidebar-width': '25rem',
|
"--sidebar-width": "25rem",
|
||||||
'--sidebar-width-icon': '4rem',
|
"--sidebar-width-icon": "4rem",
|
||||||
} as CSSProperties
|
} as CSSProperties
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Workspace {...props} />
|
<Workspace {...props} />
|
||||||
</SidebarProvider>
|
</SidebarProvider>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Workspace({
|
function Workspace({ sidebar, researchChat, children, hasTemporaryDecks }: ShellProps) {
|
||||||
sidebar,
|
const [panel, setPanel] = useState<"chat" | "decks">("chat");
|
||||||
researchChat,
|
const { setOpen, setOpenMobile, isMobile } = useSidebar();
|
||||||
children,
|
|
||||||
hasTemporaryDecks,
|
|
||||||
}: ShellProps) {
|
|
||||||
const [panel, setPanel] = useState<'chat' | 'decks'>('chat')
|
|
||||||
const { setOpen, setOpenMobile, isMobile } = useSidebar()
|
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{ id: 'chat', title: 'Research chat', icon: MessageSquare },
|
{ id: "chat", title: "Research chat", icon: MessageSquare },
|
||||||
{ id: 'decks', title: 'Deck manager', icon: Columns3 },
|
{ id: "decks", title: "Deck manager", icon: Columns3 },
|
||||||
] as const
|
] as const;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -62,10 +57,8 @@ function Workspace({
|
|||||||
<SidebarMenuItem>
|
<SidebarMenuItem>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
aria-label="Close sidebar"
|
aria-label="Close sidebar"
|
||||||
tooltip={{ children: 'Close sidebar', hidden: false }}
|
tooltip={{ children: "Close sidebar", hidden: false }}
|
||||||
onClick={() =>
|
onClick={() => (isMobile ? setOpenMobile(false) : setOpen(false))}
|
||||||
isMobile ? setOpenMobile(false) : setOpen(false)
|
|
||||||
}
|
|
||||||
className="size-10 justify-center p-0"
|
className="size-10 justify-center p-0"
|
||||||
>
|
>
|
||||||
<PanelLeftClose />
|
<PanelLeftClose />
|
||||||
@@ -80,9 +73,9 @@ function Workspace({
|
|||||||
tooltip={{ children: item.title, hidden: false }}
|
tooltip={{ children: item.title, hidden: false }}
|
||||||
isActive={panel === item.id}
|
isActive={panel === item.id}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setPanel(item.id)
|
setPanel(item.id);
|
||||||
if (isMobile) setOpenMobile(true)
|
if (isMobile) setOpenMobile(true);
|
||||||
else setOpen(true)
|
else setOpen(true);
|
||||||
}}
|
}}
|
||||||
className="size-10 justify-center p-0"
|
className="size-10 justify-center p-0"
|
||||||
>
|
>
|
||||||
@@ -92,23 +85,14 @@ function Workspace({
|
|||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
))}
|
))}
|
||||||
</WorkspaceNavigation>
|
</WorkspaceNavigation>
|
||||||
<Sidebar
|
<Sidebar collapsible="none" className="min-w-0 flex-1 group-data-[collapsible=icon]:hidden">
|
||||||
collapsible="none"
|
<div className={panel === "chat" ? "flex min-h-0 flex-1 flex-col" : "hidden"}>
|
||||||
className="min-w-0 flex-1 group-data-[collapsible=icon]:hidden"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
panel === 'chat' ? 'flex min-h-0 flex-1 flex-col' : 'hidden'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{researchChat(() => setOpenMobile(false))}
|
{researchChat(() => setOpenMobile(false))}
|
||||||
</div>
|
</div>
|
||||||
<section
|
<section
|
||||||
aria-label="Deck manager"
|
aria-label="Deck manager"
|
||||||
className={
|
className={
|
||||||
panel === 'decks'
|
panel === "decks" ? "flex min-h-0 flex-1 flex-col overflow-y-auto p-4" : "hidden"
|
||||||
? 'flex min-h-0 flex-1 flex-col overflow-y-auto p-4'
|
|
||||||
: 'hidden'
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<h2 className="mb-4 text-base font-semibold">Decks</h2>
|
<h2 className="mb-4 text-base font-semibold">Decks</h2>
|
||||||
@@ -120,17 +104,12 @@ function Workspace({
|
|||||||
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-3">
|
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-3">
|
||||||
<SidebarTrigger aria-label="Toggle sidebar" />
|
<SidebarTrigger aria-label="Toggle sidebar" />
|
||||||
<span className="text-sm font-medium">Research</span>
|
<span className="text-sm font-medium">Research</span>
|
||||||
<span className="ml-auto text-xs text-muted-foreground">
|
<span className="ml-auto text-xs text-muted-foreground">Research workspace</span>
|
||||||
Research workspace
|
|
||||||
</span>
|
|
||||||
</header>
|
</header>
|
||||||
<section
|
<section className="reader flex min-h-0 min-w-0 flex-1 flex-col" aria-label="Decks">
|
||||||
className="reader flex min-h-0 min-w-0 flex-1 flex-col"
|
|
||||||
aria-label="Decks"
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</section>
|
</section>
|
||||||
</SidebarInset>
|
</SidebarInset>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { Icon } from './icon'
|
import { Icon } from "./icon";
|
||||||
import { Button } from './ui/button'
|
import { Button } from "./ui/button";
|
||||||
import {
|
import {
|
||||||
DialogClose,
|
DialogClose,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
Dialog as DialogRoot,
|
Dialog as DialogRoot,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from './ui/dialog'
|
} from "./ui/dialog";
|
||||||
|
|
||||||
export function Dialog({
|
export function Dialog({
|
||||||
title,
|
title,
|
||||||
@@ -15,21 +15,21 @@ export function Dialog({
|
|||||||
children,
|
children,
|
||||||
className,
|
className,
|
||||||
}: {
|
}: {
|
||||||
title: string
|
title: string;
|
||||||
className?: string
|
className?: string;
|
||||||
onClose: () => void
|
onClose: () => void;
|
||||||
children: React.ReactNode
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<DialogRoot
|
<DialogRoot
|
||||||
open
|
open
|
||||||
onOpenChange={(open) => {
|
onOpenChange={(open) => {
|
||||||
if (!open) onClose()
|
if (!open) onClose();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DialogContent
|
<DialogContent
|
||||||
showCloseButton={false}
|
showCloseButton={false}
|
||||||
className={cn('max-h-[calc(100dvh-2rem)] overflow-y-auto', className)}
|
className={cn("max-h-[calc(100dvh-2rem)] overflow-y-auto", className)}
|
||||||
aria-describedby={undefined}
|
aria-describedby={undefined}
|
||||||
>
|
>
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
@@ -50,5 +50,5 @@ export function Dialog({
|
|||||||
{children}
|
{children}
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</DialogRoot>
|
</DialogRoot>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
const paths = {
|
const paths = {
|
||||||
columns: 'M3 4h7v16H3z M14 4h7v16h-7z',
|
columns: "M3 4h7v16H3z M14 4h7v16h-7z",
|
||||||
hashtag: 'M10 3 8 21 M17 3l-2 18 M4 9h16 M3 15h16',
|
hashtag: "M10 3 8 21 M17 3l-2 18 M4 9h16 M3 15h16",
|
||||||
search: 'M21 21l-5-5 M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0',
|
search: "M21 21l-5-5 M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0",
|
||||||
user: 'M20 21v-2a7 7 0 0 0-14 0v2 M17 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0',
|
user: "M20 21v-2a7 7 0 0 0-14 0v2 M17 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0",
|
||||||
list: 'M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01',
|
list: "M8 6h13 M8 12h13 M8 18h13 M3 6h.01 M3 12h.01 M3 18h.01",
|
||||||
plus: 'M12 5v14 M5 12h14',
|
plus: "M12 5v14 M5 12h14",
|
||||||
close: 'M6 6l12 12 M18 6 6 18',
|
close: "M6 6l12 12 M18 6 6 18",
|
||||||
refresh: 'M20 7v5h-5 M4 17v-5h5 M6 6a8 8 0 0 1 14 6 M4 12a8 8 0 0 0 14 6',
|
refresh: "M20 7v5h-5 M4 17v-5h5 M6 6a8 8 0 0 1 14 6 M4 12a8 8 0 0 0 14 6",
|
||||||
more: 'M5 12h.01 M12 12h.01 M19 12h.01',
|
more: "M5 12h.01 M12 12h.01 M19 12h.01",
|
||||||
arrow: 'M7 17 17 7 M7 7h10v10',
|
arrow: "M7 17 17 7 M7 7h10v10",
|
||||||
edit: 'm16 3 5 5-12 12H4v-5z M14 5l5 5',
|
edit: "m16 3 5 5-12 12H4v-5z M14 5l5 5",
|
||||||
trash: 'M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7',
|
trash: "M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7",
|
||||||
} as const
|
} as const;
|
||||||
|
|
||||||
export function Icon({ name }: { name: keyof typeof paths }) {
|
export function Icon({ name }: { name: keyof typeof paths }) {
|
||||||
return (
|
return (
|
||||||
@@ -28,5 +28,5 @@ export function Icon({ name }: { name: keyof typeof paths }) {
|
|||||||
>
|
>
|
||||||
<path d={paths[name]} />
|
<path d={paths[name]} />
|
||||||
</svg>
|
</svg>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,49 +1,44 @@
|
|||||||
import type { ReactNode } from 'react'
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
const URL = /(https?:\/\/[^\s]+)/g
|
const URL = /(https?:\/\/[^\s]+)/g;
|
||||||
const HTML_ENTITY = /&(?:#(\d+)|#x([\da-f]+)|amp|apos|gt|lt|quot);/gi
|
const HTML_ENTITY = /&(?:#(\d+)|#x([\da-f]+)|amp|apos|gt|lt|quot);/gi;
|
||||||
const NAMED_ENTITIES: Record<string, string> = {
|
const NAMED_ENTITIES: Record<string, string> = {
|
||||||
'&': '&',
|
"&": "&",
|
||||||
''': "'",
|
"'": "'",
|
||||||
'>': '>',
|
">": ">",
|
||||||
'<': '<',
|
"<": "<",
|
||||||
'"': '"',
|
""": '"',
|
||||||
}
|
};
|
||||||
function decodeHtmlEntities(text: string): string {
|
function decodeHtmlEntities(text: string): string {
|
||||||
return text.replace(HTML_ENTITY, (entity, decimal, hexadecimal) => {
|
return text.replace(HTML_ENTITY, (entity, decimal, hexadecimal) => {
|
||||||
if (!decimal && !hexadecimal) {
|
if (!decimal && !hexadecimal) {
|
||||||
return NAMED_ENTITIES[entity.toLowerCase()] ?? entity
|
return NAMED_ENTITIES[entity.toLowerCase()] ?? entity;
|
||||||
}
|
}
|
||||||
|
|
||||||
const codePoint = Number.parseInt(decimal ?? hexadecimal, decimal ? 10 : 16)
|
const codePoint = Number.parseInt(decimal ?? hexadecimal, decimal ? 10 : 16);
|
||||||
return codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : entity
|
return codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : entity;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function linkedText(text: string): ReactNode[] {
|
function linkedText(text: string): ReactNode[] {
|
||||||
const decoded = decodeHtmlEntities(text)
|
const decoded = decodeHtmlEntities(text);
|
||||||
const parts: ReactNode[] = []
|
const parts: ReactNode[] = [];
|
||||||
let cursor = 0
|
let cursor = 0;
|
||||||
for (const match of decoded.matchAll(URL)) {
|
for (const match of decoded.matchAll(URL)) {
|
||||||
const href = match[0]
|
const href = match[0];
|
||||||
const start = match.index
|
const start = match.index;
|
||||||
if (start > cursor) parts.push(decoded.slice(cursor, start))
|
if (start > cursor) parts.push(decoded.slice(cursor, start));
|
||||||
parts.push(
|
parts.push(
|
||||||
<a
|
<a href={href} key={`link-${start}`} rel="noreferrer noopener" target="_blank">
|
||||||
href={href}
|
|
||||||
key={`link-${start}`}
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{href}
|
{href}
|
||||||
</a>,
|
</a>,
|
||||||
)
|
);
|
||||||
cursor = start + href.length
|
cursor = start + href.length;
|
||||||
}
|
}
|
||||||
if (cursor < decoded.length) parts.push(decoded.slice(cursor))
|
if (cursor < decoded.length) parts.push(decoded.slice(cursor));
|
||||||
return parts
|
return parts;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function PostText({ text }: { text: string }) {
|
export function PostText({ text }: { text: string }) {
|
||||||
return <>{linkedText(text)}</>
|
return <>{linkedText(text)}</>;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,106 +1,90 @@
|
|||||||
import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
|
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function Avatar({
|
function Avatar({
|
||||||
className,
|
className,
|
||||||
size = 'default',
|
size = "default",
|
||||||
...props
|
...props
|
||||||
}: AvatarPrimitive.Root.Props & {
|
}: AvatarPrimitive.Root.Props & {
|
||||||
size?: 'default' | 'sm' | 'lg'
|
size?: "default" | "sm" | "lg";
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<AvatarPrimitive.Root
|
<AvatarPrimitive.Root
|
||||||
data-slot="avatar"
|
data-slot="avatar"
|
||||||
data-size={size}
|
data-size={size}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
|
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
||||||
return (
|
return (
|
||||||
<AvatarPrimitive.Image
|
<AvatarPrimitive.Image
|
||||||
data-slot="avatar-image"
|
data-slot="avatar-image"
|
||||||
className={cn(
|
className={cn("aspect-square size-full rounded-full object-cover", className)}
|
||||||
'aspect-square size-full rounded-full object-cover',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AvatarFallback({
|
function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: AvatarPrimitive.Fallback.Props) {
|
|
||||||
return (
|
return (
|
||||||
<AvatarPrimitive.Fallback
|
<AvatarPrimitive.Fallback
|
||||||
data-slot="avatar-fallback"
|
data-slot="avatar-fallback"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
|
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
|
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-slot="avatar-badge"
|
data-slot="avatar-badge"
|
||||||
className={cn(
|
className={cn(
|
||||||
'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
|
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
|
||||||
'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
|
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
||||||
'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
|
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
||||||
'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
|
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="avatar-group"
|
data-slot="avatar-group"
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
|
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AvatarGroupCount({
|
function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="avatar-group-count"
|
data-slot="avatar-group-count"
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
|
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
|
||||||
Avatar,
|
|
||||||
AvatarBadge,
|
|
||||||
AvatarFallback,
|
|
||||||
AvatarGroup,
|
|
||||||
AvatarGroupCount,
|
|
||||||
AvatarImage,
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,40 +1,37 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
import { mergeProps } from "@base-ui/react/merge-props";
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
import { useRender } from "@base-ui/react/use-render";
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
|
|
||||||
const badgeVariants = cva(
|
const badgeVariants = cva(
|
||||||
'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
|
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||||
secondary:
|
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||||
'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
|
|
||||||
destructive:
|
destructive:
|
||||||
'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
|
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||||
outline:
|
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||||
'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
|
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||||
ghost:
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
|
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function Badge({
|
function Badge({
|
||||||
className,
|
className,
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
render,
|
render,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
|
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'span',
|
defaultTagName: "span",
|
||||||
props: mergeProps<'span'>(
|
props: mergeProps<"span">(
|
||||||
{
|
{
|
||||||
className: cn(badgeVariants({ variant }), className),
|
className: cn(badgeVariants({ variant }), className),
|
||||||
},
|
},
|
||||||
@@ -42,10 +39,10 @@ function Badge({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'badge',
|
slot: "badge",
|
||||||
variant,
|
variant,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Badge, badgeVariants }
|
export { Badge, badgeVariants };
|
||||||
|
|||||||
@@ -1,54 +1,54 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
import { mergeProps } from "@base-ui/react/merge-props";
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
import { useRender } from "@base-ui/react/use-render";
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="bubble-group"
|
data-slot="bubble-group"
|
||||||
className={cn('flex min-w-0 flex-col gap-2', className)}
|
className={cn("flex min-w-0 flex-col gap-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const bubbleVariants = cva(
|
const bubbleVariants = cva(
|
||||||
'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',
|
"group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default:
|
||||||
'*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',
|
"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
|
||||||
secondary:
|
secondary:
|
||||||
'*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',
|
"*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
|
||||||
muted:
|
muted:
|
||||||
'*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',
|
"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
|
||||||
tinted:
|
tinted:
|
||||||
'*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',
|
"*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
|
||||||
outline:
|
outline:
|
||||||
'*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30',
|
"*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
|
||||||
ghost:
|
ghost:
|
||||||
'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50',
|
"border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
|
||||||
destructive:
|
destructive:
|
||||||
'*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',
|
"*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function Bubble({
|
function Bubble({
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
align = 'start',
|
align = "start",
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> &
|
}: React.ComponentProps<"div"> &
|
||||||
VariantProps<typeof bubbleVariants> & {
|
VariantProps<typeof bubbleVariants> & {
|
||||||
align?: 'start' | 'end'
|
align?: "start" | "end";
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -58,20 +58,16 @@ function Bubble({
|
|||||||
className={cn(bubbleVariants({ variant }), className)}
|
className={cn(bubbleVariants({ variant }), className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function BubbleContent({
|
function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">) {
|
||||||
className,
|
|
||||||
render,
|
|
||||||
...props
|
|
||||||
}: useRender.ComponentProps<'div'>) {
|
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'div',
|
defaultTagName: "div",
|
||||||
props: mergeProps<'div'>(
|
props: mergeProps<"div">(
|
||||||
{
|
{
|
||||||
className: cn(
|
className: cn(
|
||||||
'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50',
|
"w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
|
||||||
className,
|
className,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@@ -79,39 +75,39 @@ function BubbleContent({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'bubble-content',
|
slot: "bubble-content",
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const bubbleReactionsVariants = cva(
|
const bubbleReactionsVariants = cva(
|
||||||
'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0',
|
"absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
side: {
|
side: {
|
||||||
top: 'top-0 -translate-y-3/4',
|
top: "top-0 -translate-y-3/4",
|
||||||
bottom: 'bottom-0 translate-y-3/4',
|
bottom: "bottom-0 translate-y-3/4",
|
||||||
},
|
},
|
||||||
align: {
|
align: {
|
||||||
start: 'left-3',
|
start: "left-3",
|
||||||
end: 'right-3',
|
end: "right-3",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
side: 'bottom',
|
side: "bottom",
|
||||||
align: 'end',
|
align: "end",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function BubbleReactions({
|
function BubbleReactions({
|
||||||
side = 'bottom',
|
side = "bottom",
|
||||||
align = 'end',
|
align = "end",
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
align?: 'start' | 'end'
|
align?: "start" | "end";
|
||||||
side?: 'top' | 'bottom'
|
side?: "top" | "bottom";
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -121,7 +117,7 @@ function BubbleReactions({
|
|||||||
className={cn(bubbleReactionsVariants({ side, align }), className)}
|
className={cn(bubbleReactionsVariants({ side, align }), className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Bubble, BubbleContent, BubbleGroup, BubbleReactions }
|
export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };
|
||||||
|
|||||||
@@ -1,48 +1,48 @@
|
|||||||
import { Button as ButtonPrimitive } from '@base-ui/react/button'
|
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
|
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||||
outline:
|
outline:
|
||||||
'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
|
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||||
secondary:
|
secondary:
|
||||||
'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||||
ghost:
|
ghost:
|
||||||
'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
|
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||||
destructive:
|
destructive:
|
||||||
'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
|
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default:
|
default:
|
||||||
'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||||
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||||
icon: 'size-8',
|
icon: "size-8",
|
||||||
'icon-xs':
|
"icon-xs":
|
||||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||||
'icon-sm':
|
"icon-sm":
|
||||||
'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||||
'icon-lg': 'size-9',
|
"icon-lg": "size-9",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
size: 'default',
|
size: "default",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function Button({
|
function Button({
|
||||||
className,
|
className,
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
size = 'default',
|
size = "default",
|
||||||
...props
|
...props
|
||||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||||
return (
|
return (
|
||||||
@@ -51,7 +51,7 @@ function Button({
|
|||||||
className={cn(buttonVariants({ variant, size, className }))}
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Button, buttonVariants }
|
export { Button, buttonVariants };
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
|
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { CheckIcon } from 'lucide-react'
|
import { CheckIcon } from "lucide-react";
|
||||||
|
|
||||||
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
||||||
return (
|
return (
|
||||||
<CheckboxPrimitive.Root
|
<CheckboxPrimitive.Root
|
||||||
data-slot="checkbox"
|
data-slot="checkbox"
|
||||||
className={cn(
|
className={cn(
|
||||||
'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary',
|
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -19,7 +19,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
|||||||
<CheckIcon />
|
<CheckIcon />
|
||||||
</CheckboxPrimitive.Indicator>
|
</CheckboxPrimitive.Indicator>
|
||||||
</CheckboxPrimitive.Root>
|
</CheckboxPrimitive.Root>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Checkbox }
|
export { Checkbox };
|
||||||
|
|||||||
@@ -1,19 +1,15 @@
|
|||||||
import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
|
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
|
||||||
|
|
||||||
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
|
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
|
||||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
|
function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
|
||||||
return (
|
return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
|
||||||
<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
|
function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
|
||||||
return (
|
return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />;
|
||||||
<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Collapsible, CollapsibleContent, CollapsibleTrigger }
|
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
||||||
|
|||||||
@@ -1,39 +1,36 @@
|
|||||||
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
|
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { XIcon } from 'lucide-react'
|
import { XIcon } from "lucide-react";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
import { Button } from "#/components/ui/button.tsx";
|
||||||
|
|
||||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
||||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogOverlay({
|
function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: DialogPrimitive.Backdrop.Props) {
|
|
||||||
return (
|
return (
|
||||||
<DialogPrimitive.Backdrop
|
<DialogPrimitive.Backdrop
|
||||||
data-slot="dialog-overlay"
|
data-slot="dialog-overlay"
|
||||||
className={cn(
|
className={cn(
|
||||||
'fixed inset-0 isolate z-50 bg-overlay duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
|
"fixed inset-0 isolate z-50 bg-overlay duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogContent({
|
function DialogContent({
|
||||||
@@ -42,7 +39,7 @@ function DialogContent({
|
|||||||
showCloseButton = true,
|
showCloseButton = true,
|
||||||
...props
|
...props
|
||||||
}: DialogPrimitive.Popup.Props & {
|
}: DialogPrimitive.Popup.Props & {
|
||||||
showCloseButton?: boolean
|
showCloseButton?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<DialogPortal>
|
<DialogPortal>
|
||||||
@@ -50,7 +47,7 @@ function DialogContent({
|
|||||||
<DialogPrimitive.Popup
|
<DialogPrimitive.Popup
|
||||||
data-slot="dialog-content"
|
data-slot="dialog-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -59,13 +56,7 @@ function DialogContent({
|
|||||||
{showCloseButton && (
|
{showCloseButton && (
|
||||||
<DialogPrimitive.Close
|
<DialogPrimitive.Close
|
||||||
data-slot="dialog-close"
|
data-slot="dialog-close"
|
||||||
render={
|
render={<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm" />}
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="absolute top-2 right-2"
|
|
||||||
size="icon-sm"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<XIcon />
|
<XIcon />
|
||||||
<span className="sr-only">Close</span>
|
<span className="sr-only">Close</span>
|
||||||
@@ -73,17 +64,13 @@ function DialogContent({
|
|||||||
)}
|
)}
|
||||||
</DialogPrimitive.Popup>
|
</DialogPrimitive.Popup>
|
||||||
</DialogPortal>
|
</DialogPortal>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
|
||||||
data-slot="dialog-header"
|
);
|
||||||
className={cn('flex flex-col gap-2', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogFooter({
|
function DialogFooter({
|
||||||
@@ -91,52 +78,47 @@ function DialogFooter({
|
|||||||
showCloseButton = false,
|
showCloseButton = false,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
showCloseButton?: boolean
|
showCloseButton?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="dialog-footer"
|
data-slot="dialog-footer"
|
||||||
className={cn(
|
className={cn(
|
||||||
'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
|
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{showCloseButton && (
|
{showCloseButton && (
|
||||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
<DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
|
||||||
Close
|
|
||||||
</DialogPrimitive.Close>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||||
return (
|
return (
|
||||||
<DialogPrimitive.Title
|
<DialogPrimitive.Title
|
||||||
data-slot="dialog-title"
|
data-slot="dialog-title"
|
||||||
className={cn('text-base leading-none font-medium', className)}
|
className={cn("text-base leading-none font-medium", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogDescription({
|
function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: DialogPrimitive.Description.Props) {
|
|
||||||
return (
|
return (
|
||||||
<DialogPrimitive.Description
|
<DialogPrimitive.Description
|
||||||
data-slot="dialog-description"
|
data-slot="dialog-description"
|
||||||
className={cn(
|
className={cn(
|
||||||
'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
|
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -150,4 +132,4 @@ export {
|
|||||||
DialogPortal,
|
DialogPortal,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
DialogTrigger,
|
DialogTrigger,
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,34 +1,31 @@
|
|||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import { Menu as MenuPrimitive } from '@base-ui/react/menu'
|
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { CheckIcon, ChevronRightIcon } from 'lucide-react'
|
import { CheckIcon, ChevronRightIcon } from "lucide-react";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
||||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
||||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
||||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuContent({
|
function DropdownMenuContent({
|
||||||
align = 'start',
|
align = "start",
|
||||||
alignOffset = 0,
|
alignOffset = 0,
|
||||||
side = 'bottom',
|
side = "bottom",
|
||||||
sideOffset = 4,
|
sideOffset = 4,
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: MenuPrimitive.Popup.Props &
|
}: MenuPrimitive.Popup.Props &
|
||||||
Pick<
|
Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
|
||||||
MenuPrimitive.Positioner.Props,
|
|
||||||
'align' | 'alignOffset' | 'side' | 'sideOffset'
|
|
||||||
>) {
|
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.Portal>
|
<MenuPrimitive.Portal>
|
||||||
<MenuPrimitive.Positioner
|
<MenuPrimitive.Positioner
|
||||||
@@ -41,18 +38,18 @@ function DropdownMenuContent({
|
|||||||
<MenuPrimitive.Popup
|
<MenuPrimitive.Popup
|
||||||
data-slot="dropdown-menu-content"
|
data-slot="dropdown-menu-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
|
"z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
</MenuPrimitive.Positioner>
|
</MenuPrimitive.Positioner>
|
||||||
</MenuPrimitive.Portal>
|
</MenuPrimitive.Portal>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
||||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuLabel({
|
function DropdownMenuLabel({
|
||||||
@@ -60,29 +57,29 @@ function DropdownMenuLabel({
|
|||||||
inset,
|
inset,
|
||||||
...props
|
...props
|
||||||
}: MenuPrimitive.GroupLabel.Props & {
|
}: MenuPrimitive.GroupLabel.Props & {
|
||||||
inset?: boolean
|
inset?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.GroupLabel
|
<MenuPrimitive.GroupLabel
|
||||||
data-slot="dropdown-menu-label"
|
data-slot="dropdown-menu-label"
|
||||||
data-inset={inset}
|
data-inset={inset}
|
||||||
className={cn(
|
className={cn(
|
||||||
'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',
|
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuItem({
|
function DropdownMenuItem({
|
||||||
className,
|
className,
|
||||||
inset,
|
inset,
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
...props
|
...props
|
||||||
}: MenuPrimitive.Item.Props & {
|
}: MenuPrimitive.Item.Props & {
|
||||||
inset?: boolean
|
inset?: boolean;
|
||||||
variant?: 'default' | 'destructive'
|
variant?: "default" | "destructive";
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.Item
|
<MenuPrimitive.Item
|
||||||
@@ -95,11 +92,11 @@ function DropdownMenuItem({
|
|||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
||||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuSubTrigger({
|
function DropdownMenuSubTrigger({
|
||||||
@@ -108,7 +105,7 @@ function DropdownMenuSubTrigger({
|
|||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
}: MenuPrimitive.SubmenuTrigger.Props & {
|
||||||
inset?: boolean
|
inset?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.SubmenuTrigger
|
<MenuPrimitive.SubmenuTrigger
|
||||||
@@ -123,13 +120,13 @@ function DropdownMenuSubTrigger({
|
|||||||
{children}
|
{children}
|
||||||
<ChevronRightIcon className="ml-auto" />
|
<ChevronRightIcon className="ml-auto" />
|
||||||
</MenuPrimitive.SubmenuTrigger>
|
</MenuPrimitive.SubmenuTrigger>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuSubContent({
|
function DropdownMenuSubContent({
|
||||||
align = 'start',
|
align = "start",
|
||||||
alignOffset = -3,
|
alignOffset = -3,
|
||||||
side = 'right',
|
side = "right",
|
||||||
sideOffset = 0,
|
sideOffset = 0,
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
@@ -138,7 +135,7 @@ function DropdownMenuSubContent({
|
|||||||
<DropdownMenuContent
|
<DropdownMenuContent
|
||||||
data-slot="dropdown-menu-sub-content"
|
data-slot="dropdown-menu-sub-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
"w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
align={align}
|
align={align}
|
||||||
@@ -147,7 +144,7 @@ function DropdownMenuSubContent({
|
|||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuCheckboxItem({
|
function DropdownMenuCheckboxItem({
|
||||||
@@ -157,7 +154,7 @@ function DropdownMenuCheckboxItem({
|
|||||||
inset,
|
inset,
|
||||||
...props
|
...props
|
||||||
}: MenuPrimitive.CheckboxItem.Props & {
|
}: MenuPrimitive.CheckboxItem.Props & {
|
||||||
inset?: boolean
|
inset?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.CheckboxItem
|
<MenuPrimitive.CheckboxItem
|
||||||
@@ -180,16 +177,11 @@ function DropdownMenuCheckboxItem({
|
|||||||
</span>
|
</span>
|
||||||
{children}
|
{children}
|
||||||
</MenuPrimitive.CheckboxItem>
|
</MenuPrimitive.CheckboxItem>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
||||||
return (
|
return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
|
||||||
<MenuPrimitive.RadioGroup
|
|
||||||
data-slot="dropdown-menu-radio-group"
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuRadioItem({
|
function DropdownMenuRadioItem({
|
||||||
@@ -198,7 +190,7 @@ function DropdownMenuRadioItem({
|
|||||||
inset,
|
inset,
|
||||||
...props
|
...props
|
||||||
}: MenuPrimitive.RadioItem.Props & {
|
}: MenuPrimitive.RadioItem.Props & {
|
||||||
inset?: boolean
|
inset?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.RadioItem
|
<MenuPrimitive.RadioItem
|
||||||
@@ -220,36 +212,30 @@ function DropdownMenuRadioItem({
|
|||||||
</span>
|
</span>
|
||||||
{children}
|
{children}
|
||||||
</MenuPrimitive.RadioItem>
|
</MenuPrimitive.RadioItem>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuSeparator({
|
function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: MenuPrimitive.Separator.Props) {
|
|
||||||
return (
|
return (
|
||||||
<MenuPrimitive.Separator
|
<MenuPrimitive.Separator
|
||||||
data-slot="dropdown-menu-separator"
|
data-slot="dropdown-menu-separator"
|
||||||
className={cn('-mx-1 my-1 h-px bg-border', className)}
|
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownMenuShortcut({
|
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'span'>) {
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-slot="dropdown-menu-shortcut"
|
data-slot="dropdown-menu-shortcut"
|
||||||
className={cn(
|
className={cn(
|
||||||
'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
|
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -268,4 +254,4 @@ export {
|
|||||||
DropdownMenuSubContent,
|
DropdownMenuSubContent,
|
||||||
DropdownMenuSubTrigger,
|
DropdownMenuSubTrigger,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,49 +1,49 @@
|
|||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
|
|
||||||
function Empty({ className, ...props }: React.ComponentProps<'div'>) {
|
function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="empty"
|
data-slot="empty"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
|
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="empty-header"
|
data-slot="empty-header"
|
||||||
className={cn('flex max-w-sm flex-col items-center gap-2', className)}
|
className={cn("flex max-w-sm flex-col items-center gap-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const emptyMediaVariants = cva(
|
const emptyMediaVariants = cva(
|
||||||
'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-transparent',
|
default: "bg-transparent",
|
||||||
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function EmptyMedia({
|
function EmptyMedia({
|
||||||
className,
|
className,
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
|
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="empty-icon"
|
data-slot="empty-icon"
|
||||||
@@ -51,50 +51,43 @@ function EmptyMedia({
|
|||||||
className={cn(emptyMediaVariants({ variant, className }))}
|
className={cn(emptyMediaVariants({ variant, className }))}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="empty-title"
|
data-slot="empty-title"
|
||||||
className={cn('text-sm font-medium tracking-tight', className)}
|
className={cn("text-sm font-medium tracking-tight", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
|
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="empty-description"
|
data-slot="empty-description"
|
||||||
className={cn(
|
className={cn(
|
||||||
'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
|
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
|
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="empty-content"
|
data-slot="empty-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
|
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
|
||||||
Empty,
|
|
||||||
EmptyContent,
|
|
||||||
EmptyDescription,
|
|
||||||
EmptyHeader,
|
|
||||||
EmptyMedia,
|
|
||||||
EmptyTitle,
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
import { Button } from "#/components/ui/button.tsx";
|
||||||
import { Input } from '#/components/ui/input.tsx'
|
import { Input } from "#/components/ui/input.tsx";
|
||||||
import { Textarea } from '#/components/ui/textarea.tsx'
|
import { Textarea } from "#/components/ui/textarea.tsx";
|
||||||
|
|
||||||
function InputGroup({ className, ...props }: React.ComponentProps<'fieldset'>) {
|
function InputGroup({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||||
return (
|
return (
|
||||||
<fieldset
|
<fieldset
|
||||||
data-slot="input-group"
|
data-slot="input-group"
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
|
"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const inputGroupAddonVariants = cva(
|
const inputGroupAddonVariants = cva(
|
||||||
@@ -26,72 +26,65 @@ const inputGroupAddonVariants = cva(
|
|||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
align: {
|
align: {
|
||||||
'inline-start':
|
"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
||||||
'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
|
"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
||||||
'inline-end':
|
"block-start":
|
||||||
'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
|
"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
||||||
'block-start':
|
"block-end":
|
||||||
'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
|
"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
|
||||||
'block-end':
|
|
||||||
'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
align: 'inline-start',
|
align: "inline-start",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function InputGroupAddon({
|
function InputGroupAddon({
|
||||||
className,
|
className,
|
||||||
align = 'inline-start',
|
align = "inline-start",
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'fieldset'> &
|
}: React.ComponentProps<"fieldset"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||||
VariantProps<typeof inputGroupAddonVariants>) {
|
|
||||||
return (
|
return (
|
||||||
// biome-ignore lint/a11y/useKeyWithClickEvents: Pointer convenience only; the text control remains independently keyboard-focusable.
|
// oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- Pointer convenience only; the text control remains independently keyboard-focusable.
|
||||||
<fieldset
|
<fieldset
|
||||||
data-slot="input-group-addon"
|
data-slot="input-group-addon"
|
||||||
data-align={align}
|
data-align={align}
|
||||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
if ((e.target as HTMLElement).closest('button')) {
|
if ((e.target as HTMLElement).closest("button")) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
e.currentTarget.parentElement?.querySelector('input')?.focus()
|
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
||||||
}}
|
}}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const inputGroupButtonVariants = cva(
|
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
||||||
'flex items-center gap-2 text-sm shadow-none',
|
variants: {
|
||||||
{
|
size: {
|
||||||
variants: {
|
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
||||||
size: {
|
sm: "",
|
||||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
||||||
sm: '',
|
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||||
'icon-xs':
|
|
||||||
'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
|
|
||||||
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
size: 'xs',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
defaultVariants: {
|
||||||
|
size: "xs",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
function InputGroupButton({
|
function InputGroupButton({
|
||||||
className,
|
className,
|
||||||
type = 'button',
|
type = "button",
|
||||||
variant = 'ghost',
|
variant = "ghost",
|
||||||
size = 'xs',
|
size = "xs",
|
||||||
...props
|
...props
|
||||||
}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
|
}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
|
||||||
VariantProps<typeof inputGroupButtonVariants> & {
|
VariantProps<typeof inputGroupButtonVariants> & {
|
||||||
type?: 'button' | 'submit' | 'reset'
|
type?: "button" | "submit" | "reset";
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
@@ -101,10 +94,10 @@ function InputGroupButton({
|
|||||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
|
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -113,39 +106,33 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
|
|||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function InputGroupInput({
|
function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'input'>) {
|
|
||||||
return (
|
return (
|
||||||
<Input
|
<Input
|
||||||
data-slot="input-group-control"
|
data-slot="input-group-control"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
|
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function InputGroupTextarea({
|
function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'textarea'>) {
|
|
||||||
return (
|
return (
|
||||||
<Textarea
|
<Textarea
|
||||||
data-slot="input-group-control"
|
data-slot="input-group-control"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
|
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -155,4 +142,4 @@ export {
|
|||||||
InputGroupInput,
|
InputGroupInput,
|
||||||
InputGroupText,
|
InputGroupText,
|
||||||
InputGroupTextarea,
|
InputGroupTextarea,
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
import { Input as InputPrimitive } from '@base-ui/react/input'
|
import { Input as InputPrimitive } from "@base-ui/react/input";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
return (
|
return (
|
||||||
<InputPrimitive
|
<InputPrimitive
|
||||||
type={type}
|
type={type}
|
||||||
data-slot="input"
|
data-slot="input"
|
||||||
className={cn(
|
className={cn(
|
||||||
'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
|
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Input }
|
export { Input };
|
||||||
|
|||||||
@@ -1,20 +1,20 @@
|
|||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function Label({ className, ...props }: React.ComponentProps<'label'>) {
|
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
||||||
return (
|
return (
|
||||||
// biome-ignore lint/a11y/noLabelWithoutControl: Association and content are supplied by the caller through props.
|
// oxlint-disable-next-line jsx-a11y/label-has-associated-control -- Association and content are supplied by the caller through props.
|
||||||
<label
|
<label
|
||||||
data-slot="label"
|
data-slot="label"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Label }
|
export { Label };
|
||||||
|
|||||||
@@ -1,32 +1,32 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
import { mergeProps } from "@base-ui/react/merge-props";
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
import { useRender } from "@base-ui/react/use-render";
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
const markerVariants = cva(
|
const markerVariants = cva(
|
||||||
"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
|
"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: '',
|
default: "",
|
||||||
separator:
|
separator:
|
||||||
'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border',
|
"before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
|
||||||
border: 'border-b border-border pb-2',
|
border: "border-b border-border pb-2",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function Marker({
|
function Marker({
|
||||||
className,
|
className,
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
render,
|
render,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {
|
}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'div',
|
defaultTagName: "div",
|
||||||
props: mergeProps<'div'>(
|
props: mergeProps<"div">(
|
||||||
{
|
{
|
||||||
className: cn(markerVariants({ variant, className })),
|
className: cn(markerVariants({ variant, className })),
|
||||||
},
|
},
|
||||||
@@ -34,37 +34,34 @@ function Marker({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'marker',
|
slot: "marker",
|
||||||
variant,
|
variant,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {
|
function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-slot="marker-icon"
|
data-slot="marker-icon"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className={cn(
|
className={cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className)}
|
||||||
"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {
|
function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-slot="marker-content"
|
data-slot="marker-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
|
"min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Marker, MarkerContent, MarkerIcon, markerVariants }
|
export { Marker, MarkerContent, MarkerIcon, markerVariants };
|
||||||
|
|||||||
@@ -1,20 +1,20 @@
|
|||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
MessageScroller as MessageScrollerPrimitive,
|
MessageScroller as MessageScrollerPrimitive,
|
||||||
useMessageScroller,
|
useMessageScroller,
|
||||||
useMessageScrollerScrollable,
|
useMessageScrollerScrollable,
|
||||||
useMessageScrollerVisibility,
|
useMessageScrollerVisibility,
|
||||||
} from '@shadcn/react/message-scroller'
|
} from "@shadcn/react/message-scroller";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { ArrowDownIcon } from 'lucide-react'
|
import { ArrowDownIcon } from "lucide-react";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
import { Button } from "#/components/ui/button.tsx";
|
||||||
|
|
||||||
function MessageScrollerProvider(
|
function MessageScrollerProvider(
|
||||||
props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,
|
props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,
|
||||||
) {
|
) {
|
||||||
return <MessageScrollerPrimitive.Provider {...props} />
|
return <MessageScrollerPrimitive.Provider {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageScroller({
|
function MessageScroller({
|
||||||
@@ -25,12 +25,12 @@ function MessageScroller({
|
|||||||
<MessageScrollerPrimitive.Root
|
<MessageScrollerPrimitive.Root
|
||||||
data-slot="message-scroller"
|
data-slot="message-scroller"
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',
|
"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageScrollerViewport({
|
function MessageScrollerViewport({
|
||||||
@@ -41,12 +41,12 @@ function MessageScrollerViewport({
|
|||||||
<MessageScrollerPrimitive.Viewport
|
<MessageScrollerPrimitive.Viewport
|
||||||
data-slot="message-scroller-viewport"
|
data-slot="message-scroller-viewport"
|
||||||
className={cn(
|
className={cn(
|
||||||
'size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible',
|
"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageScrollerContent({
|
function MessageScrollerContent({
|
||||||
@@ -56,10 +56,10 @@ function MessageScrollerContent({
|
|||||||
return (
|
return (
|
||||||
<MessageScrollerPrimitive.Content
|
<MessageScrollerPrimitive.Content
|
||||||
data-slot="message-scroller-content"
|
data-slot="message-scroller-content"
|
||||||
className={cn('flex h-max min-h-full flex-col gap-6', className)}
|
className={cn("flex h-max min-h-full flex-col gap-6", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageScrollerItem({
|
function MessageScrollerItem({
|
||||||
@@ -72,24 +72,24 @@ function MessageScrollerItem({
|
|||||||
data-slot="message-scroller-item"
|
data-slot="message-scroller-item"
|
||||||
scrollAnchor={scrollAnchor}
|
scrollAnchor={scrollAnchor}
|
||||||
className={cn(
|
className={cn(
|
||||||
'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',
|
"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageScrollerButton({
|
function MessageScrollerButton({
|
||||||
direction = 'end',
|
direction = "end",
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
render,
|
render,
|
||||||
variant = 'secondary',
|
variant = "secondary",
|
||||||
size = 'icon-sm',
|
size = "icon-sm",
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
|
}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
|
||||||
Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
|
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
||||||
return (
|
return (
|
||||||
<MessageScrollerPrimitive.Button
|
<MessageScrollerPrimitive.Button
|
||||||
data-slot="message-scroller-button"
|
data-slot="message-scroller-button"
|
||||||
@@ -98,7 +98,7 @@ function MessageScrollerButton({
|
|||||||
data-size={size}
|
data-size={size}
|
||||||
direction={direction}
|
direction={direction}
|
||||||
className={cn(
|
className={cn(
|
||||||
'absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180',
|
"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
render={render ?? <Button variant={variant} size={size} />}
|
render={render ?? <Button variant={variant} size={size} />}
|
||||||
@@ -108,12 +108,12 @@ function MessageScrollerButton({
|
|||||||
<>
|
<>
|
||||||
<ArrowDownIcon />
|
<ArrowDownIcon />
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
{direction === 'end' ? 'Scroll to end' : 'Scroll to start'}
|
{direction === "end" ? "Scroll to end" : "Scroll to start"}
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</MessageScrollerPrimitive.Button>
|
</MessageScrollerPrimitive.Button>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -126,4 +126,4 @@ export {
|
|||||||
useMessageScroller,
|
useMessageScroller,
|
||||||
useMessageScrollerScrollable,
|
useMessageScrollerScrollable,
|
||||||
useMessageScrollerVisibility,
|
useMessageScrollerVisibility,
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,91 +1,84 @@
|
|||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="message-group"
|
data-slot="message-group"
|
||||||
className={cn('flex min-w-0 flex-col gap-2', className)}
|
className={cn("flex min-w-0 flex-col gap-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Message({
|
function Message({
|
||||||
className,
|
className,
|
||||||
align = 'start',
|
align = "start",
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {
|
}: React.ComponentProps<"div"> & { align?: "start" | "end" }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="message"
|
data-slot="message"
|
||||||
data-align={align}
|
data-align={align}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',
|
"group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {
|
function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="message-avatar"
|
data-slot="message-avatar"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8',
|
"flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageContent({ className, ...props }: React.ComponentProps<'div'>) {
|
function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="message-content"
|
data-slot="message-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',
|
"flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="message-header"
|
data-slot="message-header"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0',
|
"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="message-footer"
|
data-slot="message-footer"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',
|
"flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
|
||||||
Message,
|
|
||||||
MessageAvatar,
|
|
||||||
MessageContent,
|
|
||||||
MessageFooter,
|
|
||||||
MessageGroup,
|
|
||||||
MessageHeader,
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,20 +1,16 @@
|
|||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { ChevronDownIcon } from 'lucide-react'
|
import { ChevronDownIcon } from "lucide-react";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
|
type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
|
||||||
size?: 'sm' | 'default'
|
size?: "sm" | "default";
|
||||||
}
|
};
|
||||||
|
|
||||||
function NativeSelect({
|
function NativeSelect({ className, size = "default", ...props }: NativeSelectProps) {
|
||||||
className,
|
|
||||||
size = 'default',
|
|
||||||
...props
|
|
||||||
}: NativeSelectProps) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/native-select relative w-fit has-[select:disabled]:opacity-50',
|
"group/native-select relative w-fit has-[select:disabled]:opacity-50",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
data-slot="native-select-wrapper"
|
data-slot="native-select-wrapper"
|
||||||
@@ -32,33 +28,27 @@ function NativeSelect({
|
|||||||
data-slot="native-select-icon"
|
data-slot="native-select-icon"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function NativeSelectOption({
|
function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'option'>) {
|
|
||||||
return (
|
return (
|
||||||
<option
|
<option
|
||||||
data-slot="native-select-option"
|
data-slot="native-select-option"
|
||||||
className={cn('bg-[Canvas] text-[CanvasText]', className)}
|
className={cn("bg-[Canvas] text-[CanvasText]", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function NativeSelectOptGroup({
|
function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'optgroup'>) {
|
|
||||||
return (
|
return (
|
||||||
<optgroup
|
<optgroup
|
||||||
data-slot="native-select-optgroup"
|
data-slot="native-select-optgroup"
|
||||||
className={cn('bg-[Canvas] text-[CanvasText]', className)}
|
className={cn("bg-[Canvas] text-[CanvasText]", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
|
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
|
||||||
|
|||||||
@@ -1,22 +1,18 @@
|
|||||||
import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
|
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
|
|
||||||
function Separator({
|
function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
|
||||||
className,
|
|
||||||
orientation = 'horizontal',
|
|
||||||
...props
|
|
||||||
}: SeparatorPrimitive.Props) {
|
|
||||||
return (
|
return (
|
||||||
<SeparatorPrimitive
|
<SeparatorPrimitive
|
||||||
data-slot="separator"
|
data-slot="separator"
|
||||||
orientation={orientation}
|
orientation={orientation}
|
||||||
className={cn(
|
className={cn(
|
||||||
'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
|
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Separator }
|
export { Separator };
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
|
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { XIcon } from 'lucide-react'
|
import { XIcon } from "lucide-react";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
import { Button } from "#/components/ui/button.tsx";
|
||||||
|
|
||||||
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
||||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
||||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
||||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
||||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
||||||
@@ -25,25 +25,25 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
|||||||
<SheetPrimitive.Backdrop
|
<SheetPrimitive.Backdrop
|
||||||
data-slot="sheet-overlay"
|
data-slot="sheet-overlay"
|
||||||
className={cn(
|
className={cn(
|
||||||
'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
|
"fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetContent({
|
function SheetContent({
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
side = 'right',
|
side = "right",
|
||||||
showCloseButton = true,
|
showCloseButton = true,
|
||||||
keepMounted = false,
|
keepMounted = false,
|
||||||
...props
|
...props
|
||||||
}: SheetPrimitive.Popup.Props & {
|
}: SheetPrimitive.Popup.Props & {
|
||||||
side?: 'top' | 'right' | 'bottom' | 'left'
|
side?: "top" | "right" | "bottom" | "left";
|
||||||
showCloseButton?: boolean
|
showCloseButton?: boolean;
|
||||||
keepMounted?: boolean
|
keepMounted?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<SheetPortal keepMounted={keepMounted}>
|
<SheetPortal keepMounted={keepMounted}>
|
||||||
@@ -52,7 +52,7 @@ function SheetContent({
|
|||||||
data-slot="sheet-content"
|
data-slot="sheet-content"
|
||||||
data-side={side}
|
data-side={side}
|
||||||
className={cn(
|
className={cn(
|
||||||
'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
|
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -61,13 +61,7 @@ function SheetContent({
|
|||||||
{showCloseButton && (
|
{showCloseButton && (
|
||||||
<SheetPrimitive.Close
|
<SheetPrimitive.Close
|
||||||
data-slot="sheet-close"
|
data-slot="sheet-close"
|
||||||
render={
|
render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm" />}
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="absolute top-3 right-3"
|
|
||||||
size="icon-sm"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<XIcon />
|
<XIcon />
|
||||||
<span className="sr-only">Close</span>
|
<span className="sr-only">Close</span>
|
||||||
@@ -75,50 +69,47 @@ function SheetContent({
|
|||||||
)}
|
)}
|
||||||
</SheetPrimitive.Popup>
|
</SheetPrimitive.Popup>
|
||||||
</SheetPortal>
|
</SheetPortal>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sheet-header"
|
data-slot="sheet-header"
|
||||||
className={cn('flex flex-col gap-0.5 p-4', className)}
|
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sheet-footer"
|
data-slot="sheet-footer"
|
||||||
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
||||||
return (
|
return (
|
||||||
<SheetPrimitive.Title
|
<SheetPrimitive.Title
|
||||||
data-slot="sheet-title"
|
data-slot="sheet-title"
|
||||||
className={cn('text-base font-medium text-foreground', className)}
|
className={cn("text-base font-medium text-foreground", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SheetDescription({
|
function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: SheetPrimitive.Description.Props) {
|
|
||||||
return (
|
return (
|
||||||
<SheetPrimitive.Description
|
<SheetPrimitive.Description
|
||||||
data-slot="sheet-description"
|
data-slot="sheet-description"
|
||||||
className={cn('text-sm text-muted-foreground', className)}
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -130,4 +121,4 @@ export {
|
|||||||
SheetHeader,
|
SheetHeader,
|
||||||
SheetTitle,
|
SheetTitle,
|
||||||
SheetTrigger,
|
SheetTrigger,
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,51 +1,47 @@
|
|||||||
import { mergeProps } from '@base-ui/react/merge-props'
|
import { mergeProps } from "@base-ui/react/merge-props";
|
||||||
import { useRender } from '@base-ui/react/use-render'
|
import { useRender } from "@base-ui/react/use-render";
|
||||||
import { cva, type VariantProps } from 'class-variance-authority'
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import { PanelLeftIcon } from 'lucide-react'
|
import { PanelLeftIcon } from "lucide-react";
|
||||||
import * as React from 'react'
|
import * as React from "react";
|
||||||
import { Button } from '#/components/ui/button.tsx'
|
import { Button } from "#/components/ui/button.tsx";
|
||||||
import { Input } from '#/components/ui/input.tsx'
|
import { Input } from "#/components/ui/input.tsx";
|
||||||
import { Separator } from '#/components/ui/separator.tsx'
|
import { Separator } from "#/components/ui/separator.tsx";
|
||||||
import {
|
import {
|
||||||
Sheet,
|
Sheet,
|
||||||
SheetContent,
|
SheetContent,
|
||||||
SheetDescription,
|
SheetDescription,
|
||||||
SheetHeader,
|
SheetHeader,
|
||||||
SheetTitle,
|
SheetTitle,
|
||||||
} from '#/components/ui/sheet.tsx'
|
} from "#/components/ui/sheet.tsx";
|
||||||
import { Skeleton } from '#/components/ui/skeleton.tsx'
|
import { Skeleton } from "#/components/ui/skeleton.tsx";
|
||||||
import {
|
import { Tooltip, TooltipContent, TooltipTrigger } from "#/components/ui/tooltip.tsx";
|
||||||
Tooltip,
|
import { useIsMobile } from "#/hooks/use-mobile.ts";
|
||||||
TooltipContent,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from '#/components/ui/tooltip.tsx'
|
|
||||||
import { useIsMobile } from '#/hooks/use-mobile.ts'
|
|
||||||
|
|
||||||
const SIDEBAR_WIDTH = '16rem'
|
const SIDEBAR_WIDTH = "16rem";
|
||||||
const SIDEBAR_WIDTH_MOBILE = 'min(25rem, 100vw)'
|
const SIDEBAR_WIDTH_MOBILE = "min(25rem, 100vw)";
|
||||||
const SIDEBAR_WIDTH_ICON = '3rem'
|
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||||
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
||||||
|
|
||||||
type SidebarContextProps = {
|
type SidebarContextProps = {
|
||||||
state: 'expanded' | 'collapsed'
|
state: "expanded" | "collapsed";
|
||||||
open: boolean
|
open: boolean;
|
||||||
setOpen: (open: boolean) => void
|
setOpen: (open: boolean) => void;
|
||||||
openMobile: boolean
|
openMobile: boolean;
|
||||||
setOpenMobile: (open: boolean) => void
|
setOpenMobile: (open: boolean) => void;
|
||||||
isMobile: boolean
|
isMobile: boolean;
|
||||||
toggleSidebar: () => void
|
toggleSidebar: () => void;
|
||||||
}
|
};
|
||||||
|
|
||||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
const SidebarContext = React.createContext<SidebarContextProps | null>(null);
|
||||||
|
|
||||||
function useSidebar() {
|
function useSidebar() {
|
||||||
const context = React.useContext(SidebarContext)
|
const context = React.useContext(SidebarContext);
|
||||||
if (!context) {
|
if (!context) {
|
||||||
throw new Error('useSidebar must be used within a SidebarProvider.')
|
throw new Error("useSidebar must be used within a SidebarProvider.");
|
||||||
}
|
}
|
||||||
|
|
||||||
return context
|
return context;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarProvider({
|
function SidebarProvider({
|
||||||
@@ -56,54 +52,51 @@ function SidebarProvider({
|
|||||||
style,
|
style,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
defaultOpen?: boolean
|
defaultOpen?: boolean;
|
||||||
open?: boolean
|
open?: boolean;
|
||||||
onOpenChange?: (open: boolean) => void
|
onOpenChange?: (open: boolean) => void;
|
||||||
}) {
|
}) {
|
||||||
const isMobile = useIsMobile()
|
const isMobile = useIsMobile();
|
||||||
const [openMobile, setOpenMobile] = React.useState(false)
|
const [openMobile, setOpenMobile] = React.useState(false);
|
||||||
|
|
||||||
// This is the internal state of the sidebar.
|
// This is the internal state of the sidebar.
|
||||||
// We use openProp and setOpenProp for control from outside the component.
|
// We use openProp and setOpenProp for control from outside the component.
|
||||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
const [_open, _setOpen] = React.useState(defaultOpen);
|
||||||
const open = openProp ?? _open
|
const open = openProp ?? _open;
|
||||||
const setOpen = React.useCallback(
|
const setOpen = React.useCallback(
|
||||||
(value: boolean | ((value: boolean) => boolean)) => {
|
(value: boolean | ((value: boolean) => boolean)) => {
|
||||||
const openState = typeof value === 'function' ? value(open) : value
|
const openState = typeof value === "function" ? value(open) : value;
|
||||||
if (setOpenProp) {
|
if (setOpenProp) {
|
||||||
setOpenProp(openState)
|
setOpenProp(openState);
|
||||||
} else {
|
} else {
|
||||||
_setOpen(openState)
|
_setOpen(openState);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setOpenProp, open],
|
[setOpenProp, open],
|
||||||
)
|
);
|
||||||
|
|
||||||
// Helper to toggle the sidebar.
|
// Helper to toggle the sidebar.
|
||||||
const toggleSidebar = React.useCallback(() => {
|
const toggleSidebar = React.useCallback(() => {
|
||||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
||||||
}, [isMobile, setOpen])
|
}, [isMobile, setOpen]);
|
||||||
|
|
||||||
// Adds a keyboard shortcut to toggle the sidebar.
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const handleKeyDown = (event: KeyboardEvent) => {
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
if (
|
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
||||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
event.preventDefault();
|
||||||
(event.metaKey || event.ctrlKey)
|
toggleSidebar();
|
||||||
) {
|
|
||||||
event.preventDefault()
|
|
||||||
toggleSidebar()
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
window.addEventListener('keydown', handleKeyDown)
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||||
}, [toggleSidebar])
|
}, [toggleSidebar]);
|
||||||
|
|
||||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||||
// This makes it easier to style the sidebar with Tailwind classes.
|
// This makes it easier to style the sidebar with Tailwind classes.
|
||||||
const state = open ? 'expanded' : 'collapsed'
|
const state = open ? "expanded" : "collapsed";
|
||||||
|
|
||||||
const contextValue = React.useMemo<SidebarContextProps>(
|
const contextValue = React.useMemo<SidebarContextProps>(
|
||||||
() => ({
|
() => ({
|
||||||
@@ -116,7 +109,7 @@ function SidebarProvider({
|
|||||||
toggleSidebar,
|
toggleSidebar,
|
||||||
}),
|
}),
|
||||||
[state, open, setOpen, isMobile, openMobile, toggleSidebar],
|
[state, open, setOpen, isMobile, openMobile, toggleSidebar],
|
||||||
)
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SidebarContext.Provider value={contextValue}>
|
<SidebarContext.Provider value={contextValue}>
|
||||||
@@ -124,13 +117,13 @@ function SidebarProvider({
|
|||||||
data-slot="sidebar-wrapper"
|
data-slot="sidebar-wrapper"
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
'--sidebar-width': SIDEBAR_WIDTH,
|
"--sidebar-width": SIDEBAR_WIDTH,
|
||||||
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||||
...style,
|
...style,
|
||||||
} as React.CSSProperties
|
} as React.CSSProperties
|
||||||
}
|
}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
|
"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -138,37 +131,37 @@ function SidebarProvider({
|
|||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</SidebarContext.Provider>
|
</SidebarContext.Provider>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Sidebar({
|
function Sidebar({
|
||||||
side = 'left',
|
side = "left",
|
||||||
variant = 'sidebar',
|
variant = "sidebar",
|
||||||
collapsible = 'offcanvas',
|
collapsible = "offcanvas",
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
dir,
|
dir,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
side?: 'left' | 'right'
|
side?: "left" | "right";
|
||||||
variant?: 'sidebar' | 'floating' | 'inset'
|
variant?: "sidebar" | "floating" | "inset";
|
||||||
collapsible?: 'offcanvas' | 'icon' | 'none'
|
collapsible?: "offcanvas" | "icon" | "none";
|
||||||
}) {
|
}) {
|
||||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
||||||
|
|
||||||
if (collapsible === 'none') {
|
if (collapsible === "none") {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar"
|
data-slot="sidebar"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
|
"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
@@ -183,28 +176,26 @@ function Sidebar({
|
|||||||
className="w-(--sidebar-width)! max-w-none! bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
className="w-(--sidebar-width)! max-w-none! bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||||
} as React.CSSProperties
|
} as React.CSSProperties
|
||||||
}
|
}
|
||||||
side={side}
|
side={side}
|
||||||
>
|
>
|
||||||
<SheetHeader className="sr-only">
|
<SheetHeader className="sr-only">
|
||||||
<SheetTitle>Workspace</SheetTitle>
|
<SheetTitle>Workspace</SheetTitle>
|
||||||
<SheetDescription>
|
<SheetDescription>Research chat and deck management</SheetDescription>
|
||||||
Research chat and deck management
|
|
||||||
</SheetDescription>
|
|
||||||
</SheetHeader>
|
</SheetHeader>
|
||||||
<div className="flex h-full w-full flex-row">{children}</div>
|
<div className="flex h-full w-full flex-row">{children}</div>
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="group peer hidden text-sidebar-foreground md:block"
|
className="group peer hidden text-sidebar-foreground md:block"
|
||||||
data-state={state}
|
data-state={state}
|
||||||
data-collapsible={state === 'collapsed' ? collapsible : ''}
|
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||||
data-variant={variant}
|
data-variant={variant}
|
||||||
data-side={side}
|
data-side={side}
|
||||||
data-slot="sidebar"
|
data-slot="sidebar"
|
||||||
@@ -213,23 +204,23 @@ function Sidebar({
|
|||||||
<div
|
<div
|
||||||
data-slot="sidebar-gap"
|
data-slot="sidebar-gap"
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
|
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||||
'group-data-[collapsible=offcanvas]:w-0',
|
"group-data-[collapsible=offcanvas]:w-0",
|
||||||
'group-data-[side=right]:rotate-180',
|
"group-data-[side=right]:rotate-180",
|
||||||
variant === 'floating' || variant === 'inset'
|
variant === "floating" || variant === "inset"
|
||||||
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||||
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-container"
|
data-slot="sidebar-container"
|
||||||
data-side={side}
|
data-side={side}
|
||||||
className={cn(
|
className={cn(
|
||||||
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
|
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
|
||||||
// Adjust the padding for floating and inset variants.
|
// Adjust the padding for floating and inset variants.
|
||||||
variant === 'floating' || variant === 'inset'
|
variant === "floating" || variant === "inset"
|
||||||
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||||
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
|
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -243,15 +234,11 @@ function Sidebar({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarTrigger({
|
function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
|
||||||
className,
|
const { toggleSidebar } = useSidebar();
|
||||||
onClick,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Button>) {
|
|
||||||
const { toggleSidebar } = useSidebar()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
@@ -261,19 +248,19 @@ function SidebarTrigger({
|
|||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
className={cn(className)}
|
className={cn(className)}
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
onClick?.(event)
|
onClick?.(event);
|
||||||
toggleSidebar()
|
toggleSidebar();
|
||||||
}}
|
}}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<PanelLeftIcon />
|
<PanelLeftIcon />
|
||||||
<span className="sr-only">Toggle Sidebar</span>
|
<span className="sr-only">Toggle Sidebar</span>
|
||||||
</Button>
|
</Button>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
|
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||||
const { toggleSidebar } = useSidebar()
|
const { toggleSidebar } = useSidebar();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -284,118 +271,112 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
|
|||||||
onClick={toggleSidebar}
|
onClick={toggleSidebar}
|
||||||
title="Toggle Sidebar"
|
title="Toggle Sidebar"
|
||||||
className={cn(
|
className={cn(
|
||||||
'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
|
"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
||||||
'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
|
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||||
'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||||
'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
|
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
|
||||||
'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
|
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||||
'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
|
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
|
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||||
return (
|
return (
|
||||||
<main
|
<main
|
||||||
data-slot="sidebar-inset"
|
data-slot="sidebar-inset"
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
|
"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarInput({
|
function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Input>) {
|
|
||||||
return (
|
return (
|
||||||
<Input
|
<Input
|
||||||
data-slot="sidebar-input"
|
data-slot="sidebar-input"
|
||||||
data-sidebar="input"
|
data-sidebar="input"
|
||||||
className={cn('h-8 w-full bg-background shadow-none', className)}
|
className={cn("h-8 w-full bg-background shadow-none", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-header"
|
data-slot="sidebar-header"
|
||||||
data-sidebar="header"
|
data-sidebar="header"
|
||||||
className={cn('flex flex-col gap-2 p-2', className)}
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-footer"
|
data-slot="sidebar-footer"
|
||||||
data-sidebar="footer"
|
data-sidebar="footer"
|
||||||
className={cn('flex flex-col gap-2 p-2', className)}
|
className={cn("flex flex-col gap-2 p-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarSeparator({
|
function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof Separator>) {
|
|
||||||
return (
|
return (
|
||||||
<Separator
|
<Separator
|
||||||
data-slot="sidebar-separator"
|
data-slot="sidebar-separator"
|
||||||
data-sidebar="separator"
|
data-sidebar="separator"
|
||||||
className={cn('mx-2 w-auto bg-sidebar-border', className)}
|
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
|
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-content"
|
data-slot="sidebar-content"
|
||||||
data-sidebar="content"
|
data-sidebar="content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
|
"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
|
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-group"
|
data-slot="sidebar-group"
|
||||||
data-sidebar="group"
|
data-sidebar="group"
|
||||||
className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarGroupLabel({
|
function SidebarGroupLabel({
|
||||||
className,
|
className,
|
||||||
render,
|
render,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
|
}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'div',
|
defaultTagName: "div",
|
||||||
props: mergeProps<'div'>(
|
props: mergeProps<"div">(
|
||||||
{
|
{
|
||||||
className: cn(
|
className: cn(
|
||||||
'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
|
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
className,
|
className,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@@ -403,23 +384,23 @@ function SidebarGroupLabel({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'sidebar-group-label',
|
slot: "sidebar-group-label",
|
||||||
sidebar: 'group-label',
|
sidebar: "group-label",
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarGroupAction({
|
function SidebarGroupAction({
|
||||||
className,
|
className,
|
||||||
render,
|
render,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
|
}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'button',
|
defaultTagName: "button",
|
||||||
props: mergeProps<'button'>(
|
props: mergeProps<"button">(
|
||||||
{
|
{
|
||||||
className: cn(
|
className: cn(
|
||||||
'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
|
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
className,
|
className,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@@ -427,87 +408,84 @@ function SidebarGroupAction({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'sidebar-group-action',
|
slot: "sidebar-group-action",
|
||||||
sidebar: 'group-action',
|
sidebar: "group-action",
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarGroupContent({
|
function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-group-content"
|
data-slot="sidebar-group-content"
|
||||||
data-sidebar="group-content"
|
data-sidebar="group-content"
|
||||||
className={cn('w-full text-sm', className)}
|
className={cn("w-full text-sm", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
|
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
return (
|
return (
|
||||||
<ul
|
<ul
|
||||||
data-slot="sidebar-menu"
|
data-slot="sidebar-menu"
|
||||||
data-sidebar="menu"
|
data-sidebar="menu"
|
||||||
className={cn('flex w-full min-w-0 flex-col gap-0', className)}
|
className={cn("flex w-full min-w-0 flex-col gap-0", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
|
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
data-slot="sidebar-menu-item"
|
data-slot="sidebar-menu-item"
|
||||||
data-sidebar="menu-item"
|
data-sidebar="menu-item"
|
||||||
className={cn('group/menu-item relative', className)}
|
className={cn("group/menu-item relative", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const sidebarMenuButtonVariants = cva(
|
const sidebarMenuButtonVariants = cva(
|
||||||
'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
|
"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||||
outline:
|
outline:
|
||||||
'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
|
"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-8 text-sm',
|
default: "h-8 text-sm",
|
||||||
sm: 'h-7 text-xs',
|
sm: "h-7 text-xs",
|
||||||
lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
|
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
size: 'default',
|
size: "default",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
|
|
||||||
function SidebarMenuButton({
|
function SidebarMenuButton({
|
||||||
render,
|
render,
|
||||||
isActive = false,
|
isActive = false,
|
||||||
variant = 'default',
|
variant = "default",
|
||||||
size = 'default',
|
size = "default",
|
||||||
tooltip,
|
tooltip,
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'button'> &
|
}: useRender.ComponentProps<"button"> &
|
||||||
React.ComponentProps<'button'> & {
|
React.ComponentProps<"button"> & {
|
||||||
isActive?: boolean
|
isActive?: boolean;
|
||||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||||
const { isMobile, state } = useSidebar()
|
const { isMobile, state } = useSidebar();
|
||||||
const comp = useRender({
|
const comp = useRender({
|
||||||
defaultTagName: 'button',
|
defaultTagName: "button",
|
||||||
props: mergeProps<'button'>(
|
props: mergeProps<"button">(
|
||||||
{
|
{
|
||||||
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
||||||
},
|
},
|
||||||
@@ -515,21 +493,21 @@ function SidebarMenuButton({
|
|||||||
),
|
),
|
||||||
render: !tooltip ? render : <TooltipTrigger render={render} />,
|
render: !tooltip ? render : <TooltipTrigger render={render} />,
|
||||||
state: {
|
state: {
|
||||||
slot: 'sidebar-menu-button',
|
slot: "sidebar-menu-button",
|
||||||
sidebar: 'menu-button',
|
sidebar: "menu-button",
|
||||||
size,
|
size,
|
||||||
active: isActive,
|
active: isActive,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
if (!tooltip) {
|
if (!tooltip) {
|
||||||
return comp
|
return comp;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof tooltip === 'string') {
|
if (typeof tooltip === "string") {
|
||||||
tooltip = {
|
tooltip = {
|
||||||
children: tooltip,
|
children: tooltip,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -538,11 +516,11 @@ function SidebarMenuButton({
|
|||||||
<TooltipContent
|
<TooltipContent
|
||||||
side="right"
|
side="right"
|
||||||
align="center"
|
align="center"
|
||||||
hidden={state !== 'collapsed' || isMobile}
|
hidden={state !== "collapsed" || isMobile}
|
||||||
{...tooltip}
|
{...tooltip}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuAction({
|
function SidebarMenuAction({
|
||||||
@@ -550,18 +528,18 @@ function SidebarMenuAction({
|
|||||||
render,
|
render,
|
||||||
showOnHover = false,
|
showOnHover = false,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'button'> &
|
}: useRender.ComponentProps<"button"> &
|
||||||
React.ComponentProps<'button'> & {
|
React.ComponentProps<"button"> & {
|
||||||
showOnHover?: boolean
|
showOnHover?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'button',
|
defaultTagName: "button",
|
||||||
props: mergeProps<'button'>(
|
props: mergeProps<"button">(
|
||||||
{
|
{
|
||||||
className: cn(
|
className: cn(
|
||||||
'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
|
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
showOnHover &&
|
showOnHover &&
|
||||||
'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
|
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
|
||||||
className,
|
className,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@@ -569,112 +547,101 @@ function SidebarMenuAction({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'sidebar-menu-action',
|
slot: "sidebar-menu-action",
|
||||||
sidebar: 'menu-action',
|
sidebar: "menu-action",
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuBadge({
|
function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'div'>) {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-menu-badge"
|
data-slot="sidebar-menu-badge"
|
||||||
data-sidebar="menu-badge"
|
data-sidebar="menu-badge"
|
||||||
className={cn(
|
className={cn(
|
||||||
'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
|
"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuSkeleton({
|
function SidebarMenuSkeleton({
|
||||||
className,
|
className,
|
||||||
showIcon = false,
|
showIcon = false,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<'div'> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
showIcon?: boolean
|
showIcon?: boolean;
|
||||||
}) {
|
}) {
|
||||||
// Random width between 50 to 90%.
|
// Random width between 50 to 90%.
|
||||||
const [width] = React.useState(() => {
|
const [width] = React.useState(() => {
|
||||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||||
})
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="sidebar-menu-skeleton"
|
data-slot="sidebar-menu-skeleton"
|
||||||
data-sidebar="menu-skeleton"
|
data-sidebar="menu-skeleton"
|
||||||
className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
|
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{showIcon && (
|
{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
|
||||||
<Skeleton
|
|
||||||
className="size-4 rounded-md"
|
|
||||||
data-sidebar="menu-skeleton-icon"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Skeleton
|
<Skeleton
|
||||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||||
data-sidebar="menu-skeleton-text"
|
data-sidebar="menu-skeleton-text"
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
'--skeleton-width': width,
|
"--skeleton-width": width,
|
||||||
} as React.CSSProperties
|
} as React.CSSProperties
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
|
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||||
return (
|
return (
|
||||||
<ul
|
<ul
|
||||||
data-slot="sidebar-menu-sub"
|
data-slot="sidebar-menu-sub"
|
||||||
data-sidebar="menu-sub"
|
data-sidebar="menu-sub"
|
||||||
className={cn(
|
className={cn(
|
||||||
'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
|
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuSubItem({
|
function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<'li'>) {
|
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
data-slot="sidebar-menu-sub-item"
|
data-slot="sidebar-menu-sub-item"
|
||||||
data-sidebar="menu-sub-item"
|
data-sidebar="menu-sub-item"
|
||||||
className={cn('group/menu-sub-item relative', className)}
|
className={cn("group/menu-sub-item relative", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarMenuSubButton({
|
function SidebarMenuSubButton({
|
||||||
render,
|
render,
|
||||||
size = 'md',
|
size = "md",
|
||||||
isActive = false,
|
isActive = false,
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: useRender.ComponentProps<'a'> &
|
}: useRender.ComponentProps<"a"> &
|
||||||
React.ComponentProps<'a'> & {
|
React.ComponentProps<"a"> & {
|
||||||
size?: 'sm' | 'md'
|
size?: "sm" | "md";
|
||||||
isActive?: boolean
|
isActive?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return useRender({
|
return useRender({
|
||||||
defaultTagName: 'a',
|
defaultTagName: "a",
|
||||||
props: mergeProps<'a'>(
|
props: mergeProps<"a">(
|
||||||
{
|
{
|
||||||
className: cn(
|
className: cn(
|
||||||
'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
|
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
||||||
className,
|
className,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@@ -682,12 +649,12 @@ function SidebarMenuSubButton({
|
|||||||
),
|
),
|
||||||
render,
|
render,
|
||||||
state: {
|
state: {
|
||||||
slot: 'sidebar-menu-sub-button',
|
slot: "sidebar-menu-sub-button",
|
||||||
sidebar: 'menu-sub-button',
|
sidebar: "menu-sub-button",
|
||||||
size,
|
size,
|
||||||
active: isActive,
|
active: isActive,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
@@ -715,4 +682,4 @@ export {
|
|||||||
SidebarSeparator,
|
SidebarSeparator,
|
||||||
SidebarTrigger,
|
SidebarTrigger,
|
||||||
useSidebar,
|
useSidebar,
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
|
|
||||||
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
|
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-slot="skeleton"
|
data-slot="skeleton"
|
||||||
className={cn('animate-pulse rounded-md bg-muted', className)}
|
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Skeleton }
|
export { Skeleton };
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
import type * as React from 'react'
|
import type * as React from "react";
|
||||||
|
|
||||||
function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
|
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||||
return (
|
return (
|
||||||
<textarea
|
<textarea
|
||||||
data-slot="textarea"
|
data-slot="textarea"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
|
"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Textarea }
|
export { Textarea };
|
||||||
|
|||||||
@@ -1,42 +1,30 @@
|
|||||||
'use client'
|
"use client";
|
||||||
|
|
||||||
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
|
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
||||||
import { cn } from 'cn'
|
import { cn } from "cn";
|
||||||
|
|
||||||
function TooltipProvider({
|
function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
|
||||||
delay = 0,
|
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
|
||||||
...props
|
|
||||||
}: TooltipPrimitive.Provider.Props) {
|
|
||||||
return (
|
|
||||||
<TooltipPrimitive.Provider
|
|
||||||
data-slot="tooltip-provider"
|
|
||||||
delay={delay}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
||||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
||||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
function TooltipContent({
|
function TooltipContent({
|
||||||
className,
|
className,
|
||||||
side = 'top',
|
side = "top",
|
||||||
sideOffset = 4,
|
sideOffset = 4,
|
||||||
align = 'center',
|
align = "center",
|
||||||
alignOffset = 0,
|
alignOffset = 0,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: TooltipPrimitive.Popup.Props &
|
}: TooltipPrimitive.Popup.Props &
|
||||||
Pick<
|
Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
|
||||||
TooltipPrimitive.Positioner.Props,
|
|
||||||
'align' | 'alignOffset' | 'side' | 'sideOffset'
|
|
||||||
>) {
|
|
||||||
return (
|
return (
|
||||||
<TooltipPrimitive.Portal>
|
<TooltipPrimitive.Portal>
|
||||||
<TooltipPrimitive.Positioner
|
<TooltipPrimitive.Positioner
|
||||||
@@ -49,7 +37,7 @@ function TooltipContent({
|
|||||||
<TooltipPrimitive.Popup
|
<TooltipPrimitive.Popup
|
||||||
data-slot="tooltip-content"
|
data-slot="tooltip-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -59,7 +47,7 @@ function TooltipContent({
|
|||||||
</TooltipPrimitive.Popup>
|
</TooltipPrimitive.Popup>
|
||||||
</TooltipPrimitive.Positioner>
|
</TooltipPrimitive.Positioner>
|
||||||
</TooltipPrimitive.Portal>
|
</TooltipPrimitive.Portal>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
|
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
||||||
|
|||||||
@@ -1,15 +1,7 @@
|
|||||||
import { Link, useLocation, useRouteContext } from '@tanstack/react-router'
|
import { Link, useLocation, useRouteContext } from "@tanstack/react-router";
|
||||||
import {
|
import { Activity, House, Inbox, Layers3, MessagesSquare, NotebookPen, Search } from "lucide-react";
|
||||||
Activity,
|
import type { ReactNode } from "react";
|
||||||
House,
|
import { Avatar, AvatarFallback } from "#/components/ui/avatar";
|
||||||
Inbox,
|
|
||||||
Layers3,
|
|
||||||
MessagesSquare,
|
|
||||||
NotebookPen,
|
|
||||||
Search,
|
|
||||||
} from 'lucide-react'
|
|
||||||
import { type ReactNode, useState } from 'react'
|
|
||||||
import { Avatar, AvatarFallback } from '#/components/ui/avatar'
|
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
SidebarContent,
|
SidebarContent,
|
||||||
@@ -21,62 +13,62 @@ import {
|
|||||||
SidebarMenuButton,
|
SidebarMenuButton,
|
||||||
SidebarMenuItem,
|
SidebarMenuItem,
|
||||||
SidebarSeparator,
|
SidebarSeparator,
|
||||||
} from '#/components/ui/sidebar'
|
} from "#/components/ui/sidebar";
|
||||||
import { ConnectionManagerDialog } from '#/features/connections/connection-manager-dialog'
|
import { ConnectionManagerDialog } from "#/features/connections/connection-manager-dialog";
|
||||||
|
import { useUrlState } from "#/features/navigation/use-url-state";
|
||||||
|
|
||||||
type WorkspaceNavigationProps = {
|
type WorkspaceNavigationProps = {
|
||||||
children?: ReactNode
|
children?: ReactNode;
|
||||||
footer?: ReactNode
|
footer?: ReactNode;
|
||||||
hasTemporaryDecks?: boolean
|
hasTemporaryDecks?: boolean;
|
||||||
}
|
};
|
||||||
|
|
||||||
export function WorkspaceNavigation({
|
export function WorkspaceNavigation({
|
||||||
children,
|
children,
|
||||||
footer,
|
footer,
|
||||||
hasTemporaryDecks,
|
hasTemporaryDecks,
|
||||||
}: WorkspaceNavigationProps) {
|
}: WorkspaceNavigationProps) {
|
||||||
const { auth } = useRouteContext({ from: '__root__' })
|
const { auth } = useRouteContext({ from: "__root__" });
|
||||||
const [managingAccounts, setManagingAccounts] = useState(false)
|
const [search, updateSearch] = useUrlState();
|
||||||
const pathname = useLocation({ select: (location) => location.pathname })
|
const managingAccounts = search.accounts;
|
||||||
|
const setManagingAccounts = (open: boolean) => updateSearch({ accounts: open || undefined });
|
||||||
|
const pathname = useLocation({ select: (location) => location.pathname });
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{ title: 'Home', to: '/', icon: House, active: pathname === '/' },
|
{ title: "Home", to: "/", icon: House, active: pathname === "/" },
|
||||||
{
|
{
|
||||||
title: 'Vitals',
|
title: "Vitals",
|
||||||
to: '/vitals',
|
to: "/vitals",
|
||||||
icon: Activity,
|
icon: Activity,
|
||||||
active: pathname === '/vitals',
|
active: pathname === "/vitals",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Messages',
|
title: "Messages",
|
||||||
to: '/support',
|
to: "/support",
|
||||||
icon: MessagesSquare,
|
icon: MessagesSquare,
|
||||||
active: pathname === '/support',
|
active: pathname === "/support",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Journal',
|
title: "Journal",
|
||||||
to: '/journal',
|
to: "/journal",
|
||||||
icon: NotebookPen,
|
icon: NotebookPen,
|
||||||
active: pathname === '/journal',
|
active: pathname === "/journal",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Reader',
|
title: "Reader",
|
||||||
to: '/inbox',
|
to: "/inbox",
|
||||||
icon: Inbox,
|
icon: Inbox,
|
||||||
active: pathname === '/inbox',
|
active: pathname === "/inbox",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Research',
|
title: "Research",
|
||||||
to: '/deck',
|
to: "/deck",
|
||||||
icon: Search,
|
icon: Search,
|
||||||
active: pathname === '/deck',
|
active: pathname === "/deck",
|
||||||
},
|
},
|
||||||
] as const
|
] as const;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sidebar
|
<Sidebar collapsible="none" className="w-16! shrink-0 border-r">
|
||||||
collapsible="none"
|
|
||||||
className="workspace-navigation w-16! shrink-0 border-r"
|
|
||||||
>
|
|
||||||
<SidebarHeader className="items-center py-4">
|
<SidebarHeader className="items-center py-4">
|
||||||
<div
|
<div
|
||||||
className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
|
className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
|
||||||
@@ -94,7 +86,7 @@ export function WorkspaceNavigation({
|
|||||||
<SidebarMenuItem key={item.to}>
|
<SidebarMenuItem key={item.to}>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
aria-label={item.title}
|
aria-label={item.title}
|
||||||
aria-current={item.active ? 'page' : undefined}
|
aria-current={item.active ? "page" : undefined}
|
||||||
tooltip={{ children: item.title, hidden: false }}
|
tooltip={{ children: item.title, hidden: false }}
|
||||||
isActive={item.active}
|
isActive={item.active}
|
||||||
render={<Link to={item.to} />}
|
render={<Link to={item.to} />}
|
||||||
@@ -125,14 +117,12 @@ export function WorkspaceNavigation({
|
|||||||
<SidebarMenuItem>
|
<SidebarMenuItem>
|
||||||
<SidebarMenuButton
|
<SidebarMenuButton
|
||||||
aria-label="Manage connected accounts"
|
aria-label="Manage connected accounts"
|
||||||
tooltip={{ children: 'Manage connected accounts', hidden: false }}
|
tooltip={{ children: "Manage connected accounts", hidden: false }}
|
||||||
className="size-10 justify-center p-0"
|
className="size-10 justify-center p-0"
|
||||||
onClick={() => setManagingAccounts(true)}
|
onClick={() => setManagingAccounts(true)}
|
||||||
>
|
>
|
||||||
<Avatar className="size-8">
|
<Avatar className="size-8">
|
||||||
<AvatarFallback>
|
<AvatarFallback>{auth.owner?.name.slice(0, 1).toUpperCase()}</AvatarFallback>
|
||||||
{auth.owner?.name.slice(0, 1).toUpperCase()}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</SidebarMenuButton>
|
</SidebarMenuButton>
|
||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
@@ -145,5 +135,5 @@ export function WorkspaceNavigation({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,45 +1,42 @@
|
|||||||
type AccessConfig = { origin: string } & (
|
type AccessConfig = { origin: string } & (
|
||||||
| { mode: 'tailscale'; allowedLogin: string }
|
| { mode: "tailscale"; allowedLogin: string }
|
||||||
| { mode: 'none' }
|
| { mode: "none" }
|
||||||
)
|
);
|
||||||
|
|
||||||
export function readAccessConfig(): AccessConfig | null {
|
export function readAccessConfig(): AccessConfig | null {
|
||||||
const origin = process.env.TWITTER_LITE_ORIGIN
|
const origin = process.env.TWITTER_LITE_ORIGIN;
|
||||||
const mode = process.env.TWITTER_LITE_AUTH_MODE ?? 'tailscale'
|
const mode = process.env.TWITTER_LITE_AUTH_MODE ?? "tailscale";
|
||||||
const allowedLogin = process.env.TWITTER_LITE_ALLOWED_LOGIN
|
const allowedLogin = process.env.TWITTER_LITE_ALLOWED_LOGIN;
|
||||||
if (!origin || (mode !== 'tailscale' && mode !== 'none')) return null
|
if (!origin || (mode !== "tailscale" && mode !== "none")) return null;
|
||||||
try {
|
try {
|
||||||
const url = new URL(origin)
|
const url = new URL(origin);
|
||||||
const secure = url.protocol === 'https:'
|
const secure = url.protocol === "https:";
|
||||||
const local = url.protocol === 'http:' && url.hostname === '127.0.0.1'
|
const local = url.protocol === "http:" && url.hostname === "127.0.0.1";
|
||||||
if ((!secure && !local) || url.origin !== origin) return null
|
if ((!secure && !local) || url.origin !== origin) return null;
|
||||||
if (mode === 'none') return { origin, mode }
|
if (mode === "none") return { origin, mode };
|
||||||
if (!allowedLogin?.trim()) return null
|
if (!allowedLogin?.trim()) return null;
|
||||||
return { origin, mode, allowedLogin }
|
return { origin, mode, allowedLogin };
|
||||||
} catch {
|
} catch {
|
||||||
return null
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Use loopback behind Serve for identity, or a private network for mode none. */
|
/** Use loopback behind Serve for identity, or a private network for mode none. */
|
||||||
export function checkAccess(
|
export function checkAccess(request: Request, config: AccessConfig | null): Response | null {
|
||||||
request: Request,
|
|
||||||
config: AccessConfig | null,
|
|
||||||
): Response | null {
|
|
||||||
if (!config) {
|
if (!config) {
|
||||||
return new Response('Access configuration is required.', { status: 503 })
|
return new Response("Access configuration is required.", { status: 503 });
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
config.mode === 'tailscale' &&
|
config.mode === "tailscale" &&
|
||||||
request.headers.get('Tailscale-User-Login') !== config.allowedLogin
|
request.headers.get("Tailscale-User-Login") !== config.allowedLogin
|
||||||
) {
|
) {
|
||||||
return new Response('Forbidden', { status: 403 })
|
return new Response("Forbidden", { status: 403 });
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
!['GET', 'HEAD', 'OPTIONS'].includes(request.method) &&
|
!["GET", "HEAD", "OPTIONS"].includes(request.method) &&
|
||||||
request.headers.get('Origin') !== config.origin
|
request.headers.get("Origin") !== config.origin
|
||||||
) {
|
) {
|
||||||
return new Response('Forbidden', { status: 403 })
|
return new Response("Forbidden", { status: 403 });
|
||||||
}
|
}
|
||||||
return null
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,171 +1,147 @@
|
|||||||
// @vitest-environment node
|
// @vitest-environment node
|
||||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||||
import { checkAccess, readAccessConfig } from './policy.server'
|
import { checkAccess, readAccessConfig } from "./policy.server";
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
mode: 'tailscale' as const,
|
mode: "tailscale" as const,
|
||||||
origin: 'https://deck.invalid',
|
origin: "https://deck.invalid",
|
||||||
allowedLogin: '[email protected]',
|
allowedLogin: "[email protected]",
|
||||||
}
|
};
|
||||||
|
|
||||||
beforeEach(() => vi.stubEnv('TWITTER_LITE_AUTH_MODE', undefined))
|
beforeEach(() => vi.stubEnv("TWITTER_LITE_AUTH_MODE", undefined));
|
||||||
afterEach(() => vi.unstubAllEnvs())
|
afterEach(() => vi.unstubAllEnvs());
|
||||||
|
|
||||||
describe('access boundary', () => {
|
describe("access boundary", () => {
|
||||||
it.each([
|
it.each([undefined, "tailscale"])("requires an owner in identity mode: %s", (mode) => {
|
||||||
undefined,
|
vi.stubEnv("TWITTER_LITE_AUTH_MODE", mode);
|
||||||
'tailscale',
|
vi.stubEnv("TWITTER_LITE_ORIGIN", config.origin);
|
||||||
])('requires an owner in identity mode: %s', (mode) => {
|
vi.stubEnv("TWITTER_LITE_ALLOWED_LOGIN", "");
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', mode)
|
expect(readAccessConfig()).toBeNull();
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
|
});
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
|
|
||||||
expect(readAccessConfig()).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
it.each(["", "off", "NONE"])("fails closed for an unknown auth mode: %s", (mode) => {
|
||||||
'',
|
vi.stubEnv("TWITTER_LITE_AUTH_MODE", mode);
|
||||||
'off',
|
vi.stubEnv("TWITTER_LITE_ORIGIN", config.origin);
|
||||||
'NONE',
|
vi.stubEnv("TWITTER_LITE_ALLOWED_LOGIN", config.allowedLogin);
|
||||||
])('fails closed for an unknown auth mode: %s', (mode) => {
|
expect(checkAccess(new Request(config.origin), readAccessConfig())?.status).toBe(503);
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', mode)
|
});
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
|
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
|
|
||||||
expect(
|
|
||||||
checkAccess(new Request(config.origin), readAccessConfig())?.status,
|
|
||||||
).toBe(503)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('allows private-proxy navigation without an identity only when explicitly configured', () => {
|
it("allows private-proxy navigation without an identity only when explicitly configured", () => {
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', 'none')
|
vi.stubEnv("TWITTER_LITE_AUTH_MODE", "none");
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
|
vi.stubEnv("TWITTER_LITE_ORIGIN", config.origin);
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
|
vi.stubEnv("TWITTER_LITE_ALLOWED_LOGIN", "");
|
||||||
const access = readAccessConfig()
|
const access = readAccessConfig();
|
||||||
expect(access).toEqual({ origin: config.origin, mode: 'none' })
|
expect(access).toEqual({ origin: config.origin, mode: "none" });
|
||||||
expect(checkAccess(new Request(config.origin), access)).toBeNull()
|
expect(checkAccess(new Request(config.origin), access)).toBeNull();
|
||||||
})
|
});
|
||||||
|
|
||||||
it('still requires a configured origin without identity authentication', () => {
|
it("still requires a configured origin without identity authentication", () => {
|
||||||
vi.stubEnv('TWITTER_LITE_AUTH_MODE', 'none')
|
vi.stubEnv("TWITTER_LITE_AUTH_MODE", "none");
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', '')
|
vi.stubEnv("TWITTER_LITE_ORIGIN", "");
|
||||||
expect(readAccessConfig()).toBeNull()
|
expect(readAccessConfig()).toBeNull();
|
||||||
})
|
});
|
||||||
|
|
||||||
it.each([
|
it.each(["POST", "PUT", "PATCH", "DELETE"])(
|
||||||
'POST',
|
"requires exact Origin without identity authentication for %s",
|
||||||
'PUT',
|
(method) => {
|
||||||
'PATCH',
|
const access = { origin: config.origin, mode: "none" as const };
|
||||||
'DELETE',
|
expect(checkAccess(new Request(config.origin, { method }), access)?.status).toBe(403);
|
||||||
])('requires exact Origin without identity authentication for %s', (method) => {
|
expect(
|
||||||
const access = { origin: config.origin, mode: 'none' as const }
|
checkAccess(
|
||||||
expect(
|
new Request(config.origin, {
|
||||||
checkAccess(new Request(config.origin, { method }), access)?.status,
|
method,
|
||||||
).toBe(403)
|
headers: {
|
||||||
expect(
|
Origin: "https://other.invalid",
|
||||||
checkAccess(
|
"Sec-Fetch-Site": "same-origin",
|
||||||
new Request(config.origin, {
|
},
|
||||||
method,
|
}),
|
||||||
headers: {
|
access,
|
||||||
Origin: 'https://other.invalid',
|
)?.status,
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
).toBe(403);
|
||||||
},
|
expect(
|
||||||
}),
|
checkAccess(
|
||||||
access,
|
new Request(config.origin, {
|
||||||
)?.status,
|
method,
|
||||||
).toBe(403)
|
headers: { Origin: config.origin },
|
||||||
expect(
|
}),
|
||||||
checkAccess(
|
access,
|
||||||
new Request(config.origin, {
|
),
|
||||||
method,
|
).toBeNull();
|
||||||
headers: { Origin: config.origin },
|
},
|
||||||
}),
|
);
|
||||||
access,
|
|
||||||
),
|
|
||||||
).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('fails closed when the deployment is not configured', () => {
|
it("fails closed when the deployment is not configured", () => {
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', '')
|
vi.stubEnv("TWITTER_LITE_ORIGIN", "");
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
|
vi.stubEnv("TWITTER_LITE_ALLOWED_LOGIN", "");
|
||||||
expect(readAccessConfig()).toBeNull()
|
expect(readAccessConfig()).toBeNull();
|
||||||
expect(checkAccess(new Request(config.origin), null)?.status).toBe(503)
|
expect(checkAccess(new Request(config.origin), null)?.status).toBe(503);
|
||||||
})
|
});
|
||||||
|
|
||||||
it.each([
|
it.each(["", "https://deck.invalid/path", "http://deck.invalid", "not a URL"])(
|
||||||
'',
|
"rejects an invalid configured origin: %s",
|
||||||
'https://deck.invalid/path',
|
(origin) => {
|
||||||
'http://deck.invalid',
|
vi.stubEnv("TWITTER_LITE_ORIGIN", origin);
|
||||||
'not a URL',
|
vi.stubEnv("TWITTER_LITE_ALLOWED_LOGIN", config.allowedLogin);
|
||||||
])('rejects an invalid configured origin: %s', (origin) => {
|
expect(readAccessConfig()).toBeNull();
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', origin)
|
},
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
|
);
|
||||||
expect(readAccessConfig()).toBeNull()
|
|
||||||
})
|
|
||||||
|
|
||||||
it.each([
|
it.each(["https://deck.invalid", "http://127.0.0.1:4173"])(
|
||||||
'https://deck.invalid',
|
"accepts an explicit deployment origin: %s",
|
||||||
'http://127.0.0.1:4173',
|
(origin) => {
|
||||||
])('accepts an explicit deployment origin: %s', (origin) => {
|
vi.stubEnv("TWITTER_LITE_ORIGIN", origin);
|
||||||
vi.stubEnv('TWITTER_LITE_ORIGIN', origin)
|
vi.stubEnv("TWITTER_LITE_ALLOWED_LOGIN", config.allowedLogin);
|
||||||
vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
|
expect(readAccessConfig()).toEqual({ ...config, origin });
|
||||||
expect(readAccessConfig()).toEqual({ ...config, origin })
|
},
|
||||||
})
|
);
|
||||||
|
|
||||||
it.each([
|
it.each([undefined, "[email protected]", "[email protected], [email protected]"])(
|
||||||
undefined,
|
"rejects absent, foreign, or ambiguous identities: %s",
|
||||||
'[email protected]',
|
(login) => {
|
||||||
'[email protected], [email protected]',
|
const headers = new Headers();
|
||||||
])('rejects absent, foreign, or ambiguous identities: %s', (login) => {
|
if (login) headers.set("Tailscale-User-Login", login);
|
||||||
const headers = new Headers()
|
expect(checkAccess(new Request(config.origin, { headers }), config)?.status).toBe(403);
|
||||||
if (login) headers.set('Tailscale-User-Login', login)
|
},
|
||||||
expect(
|
);
|
||||||
checkAccess(new Request(config.origin, { headers }), config)?.status,
|
|
||||||
).toBe(403)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('permits owner navigation back from an OAuth provider without Origin', () => {
|
it("permits owner navigation back from an OAuth provider without Origin", () => {
|
||||||
const request = new Request(
|
const request = new Request(`${config.origin}/oauth/mastodon/callback?code=code`, {
|
||||||
`${config.origin}/oauth/mastodon/callback?code=code`,
|
headers: {
|
||||||
{
|
"Tailscale-User-Login": config.allowedLogin,
|
||||||
headers: {
|
"Sec-Fetch-Site": "cross-site",
|
||||||
'Tailscale-User-Login': config.allowedLogin,
|
|
||||||
'Sec-Fetch-Site': 'cross-site',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
)
|
});
|
||||||
expect(checkAccess(request, config)).toBeNull()
|
expect(checkAccess(request, config)).toBeNull();
|
||||||
})
|
});
|
||||||
|
|
||||||
it.each([
|
it.each(["POST", "PUT", "PATCH", "DELETE"])(
|
||||||
'POST',
|
"requires exact Origin for %s even with same-origin Fetch Metadata",
|
||||||
'PUT',
|
(method) => {
|
||||||
'PATCH',
|
const headers = {
|
||||||
'DELETE',
|
"Tailscale-User-Login": config.allowedLogin,
|
||||||
])('requires exact Origin for %s even with same-origin Fetch Metadata', (method) => {
|
"Sec-Fetch-Site": "same-origin",
|
||||||
const headers = {
|
};
|
||||||
'Tailscale-User-Login': config.allowedLogin,
|
expect(checkAccess(new Request(config.origin, { method, headers }), config)?.status).toBe(
|
||||||
'Sec-Fetch-Site': 'same-origin',
|
403,
|
||||||
}
|
);
|
||||||
expect(
|
expect(
|
||||||
checkAccess(new Request(config.origin, { method, headers }), config)
|
checkAccess(
|
||||||
?.status,
|
new Request(config.origin, {
|
||||||
).toBe(403)
|
method,
|
||||||
expect(
|
headers: { ...headers, Origin: "https://other.invalid" },
|
||||||
checkAccess(
|
}),
|
||||||
new Request(config.origin, {
|
config,
|
||||||
method,
|
)?.status,
|
||||||
headers: { ...headers, Origin: 'https://other.invalid' },
|
).toBe(403);
|
||||||
}),
|
expect(
|
||||||
config,
|
checkAccess(
|
||||||
)?.status,
|
new Request(config.origin, {
|
||||||
).toBe(403)
|
method,
|
||||||
expect(
|
headers: { ...headers, Origin: config.origin },
|
||||||
checkAccess(
|
}),
|
||||||
new Request(config.origin, {
|
config,
|
||||||
method,
|
),
|
||||||
headers: { ...headers, Origin: config.origin },
|
).toBeNull();
|
||||||
}),
|
},
|
||||||
config,
|
);
|
||||||
),
|
});
|
||||||
).toBeNull()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,34 +1,34 @@
|
|||||||
export type SafeOwner = {
|
export type SafeOwner = {
|
||||||
id: number
|
id: number;
|
||||||
email: string
|
email: string;
|
||||||
name: string
|
name: string;
|
||||||
onboardingCompletedAt: number | null
|
onboardingCompletedAt: number | null;
|
||||||
}
|
};
|
||||||
|
|
||||||
export type AuthState = { needsSetup: boolean; owner: SafeOwner | null }
|
export type AuthState = { needsSetup: boolean; owner: SafeOwner | null };
|
||||||
|
|
||||||
type AuthInput =
|
type AuthInput =
|
||||||
| { action: 'login'; email: string; password: string }
|
| { action: "login"; email: string; password: string }
|
||||||
| {
|
| {
|
||||||
action: 'setup'
|
action: "setup";
|
||||||
email: string
|
email: string;
|
||||||
password: string
|
password: string;
|
||||||
name: string
|
name: string;
|
||||||
setupToken: string
|
setupToken: string;
|
||||||
}
|
}
|
||||||
| { action: 'logout' }
|
| { action: "logout" }
|
||||||
| { action: 'onboard'; name: string }
|
| { action: "onboard"; name: string };
|
||||||
|
|
||||||
export async function authRequest(input: AuthInput): Promise<AuthState> {
|
export async function authRequest(input: AuthInput): Promise<AuthState> {
|
||||||
const response = await fetch('/api/auth', {
|
const response = await fetch("/api/auth", {
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
credentials: 'same-origin',
|
credentials: "same-origin",
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify(input),
|
body: JSON.stringify(input),
|
||||||
})
|
});
|
||||||
const result = await response.json()
|
const result = await response.json();
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(result.error || 'Something went wrong. Please try again.')
|
throw new Error(result.error || "Something went wrong. Please try again.");
|
||||||
}
|
}
|
||||||
return result
|
return result;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { ArrowRight, LockKeyhole } from 'lucide-react'
|
import { ArrowRight, LockKeyhole } from "lucide-react";
|
||||||
import { type FormEvent, type ReactNode, useState } from 'react'
|
import { type FormEvent, type ReactNode, useState } from "react";
|
||||||
import { Button } from '#/components/ui/button'
|
import { Button } from "#/components/ui/button";
|
||||||
import { Input } from '#/components/ui/input'
|
import { Input } from "#/components/ui/input";
|
||||||
import { Label } from '#/components/ui/label'
|
import { Label } from "#/components/ui/label";
|
||||||
import { authRequest } from './auth-client'
|
import { authRequest } from "./auth-client";
|
||||||
import './auth.css'
|
import { safeReturnTo } from "./return-to";
|
||||||
|
|
||||||
export function AuthFrame({ children }: { children: ReactNode }) {
|
export function AuthFrame({ children }: { children: ReactNode }) {
|
||||||
return (
|
return (
|
||||||
@@ -17,78 +17,70 @@ export function AuthFrame({ children }: { children: ReactNode }) {
|
|||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function LoginPage() {
|
export function LoginPage() {
|
||||||
return <CredentialsForm setup={false} />
|
return <CredentialsForm setup={false} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SetupPage() {
|
export function SetupPage() {
|
||||||
return <CredentialsForm setup />
|
return <CredentialsForm setup />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formText(data: FormData, name: string) {
|
||||||
|
const value = data.get(name);
|
||||||
|
return typeof value === "string" ? value : "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function CredentialsForm({ setup }: { setup: boolean }) {
|
function CredentialsForm({ setup }: { setup: boolean }) {
|
||||||
const [pending, setPending] = useState(false)
|
const [pending, setPending] = useState(false);
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
async function submit(event: FormEvent<HTMLFormElement>) {
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
||||||
event.preventDefault()
|
event.preventDefault();
|
||||||
if (pending) return
|
if (pending) return;
|
||||||
const data = new FormData(event.currentTarget)
|
const data = new FormData(event.currentTarget);
|
||||||
const email = String(data.get('email') ?? '').trim()
|
const email = formText(data, "email").trim();
|
||||||
const password = String(data.get('password') ?? '')
|
const password = formText(data, "password");
|
||||||
if (setup && password !== data.get('confirmPassword')) {
|
if (setup && password !== data.get("confirmPassword")) {
|
||||||
setError('Passwords do not match.')
|
setError("Passwords do not match.");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
setPending(true)
|
setPending(true);
|
||||||
setError('')
|
setError("");
|
||||||
try {
|
try {
|
||||||
const state = await authRequest(
|
const state = await authRequest(
|
||||||
setup
|
setup
|
||||||
? {
|
? {
|
||||||
action: 'setup',
|
action: "setup",
|
||||||
email,
|
email,
|
||||||
password,
|
password,
|
||||||
name: String(data.get('name') ?? '').trim(),
|
name: formText(data, "name").trim(),
|
||||||
setupToken: String(data.get('setupToken') ?? '').trim(),
|
setupToken: formText(data, "setupToken").trim(),
|
||||||
}
|
}
|
||||||
: { action: 'login', email, password },
|
: { action: "login", email, password },
|
||||||
)
|
);
|
||||||
if (!state.owner?.onboardingCompletedAt) {
|
if (!state.owner?.onboardingCompletedAt) {
|
||||||
window.location.assign('/onboarding')
|
window.location.assign("/onboarding");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const returnTo = new URLSearchParams(window.location.search).get(
|
const returnTo = new URLSearchParams(window.location.search).get("returnTo");
|
||||||
'returnTo',
|
window.location.assign(safeReturnTo(returnTo));
|
||||||
)
|
|
||||||
const destination =
|
|
||||||
returnTo &&
|
|
||||||
['/', '/deck', '/support', '/journal', '/inbox', '/vitals'].includes(
|
|
||||||
returnTo,
|
|
||||||
)
|
|
||||||
? returnTo
|
|
||||||
: '/'
|
|
||||||
window.location.assign(destination)
|
|
||||||
} catch (cause) {
|
} catch (cause) {
|
||||||
setError(
|
setError(cause instanceof Error ? cause.message : "Unable to sign in. Please try again.");
|
||||||
cause instanceof Error
|
setPending(false);
|
||||||
? cause.message
|
|
||||||
: 'Unable to sign in. Please try again.',
|
|
||||||
)
|
|
||||||
setPending(false)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthFrame>
|
<AuthFrame>
|
||||||
<header className="auth-heading">
|
<header className="auth-heading">
|
||||||
<h1>{setup ? 'Make yourself at home.' : 'Welcome back.'}</h1>
|
<h1>{setup ? "Make yourself at home." : "Welcome back."}</h1>
|
||||||
<p>
|
<p>
|
||||||
{setup
|
{setup
|
||||||
? 'Create the owner account for your personal workspace.'
|
? "Create the owner account for your personal workspace."
|
||||||
: 'Sign in to your personal workspace.'}
|
: "Sign in to your personal workspace."}
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<form onSubmit={submit} className="auth-form" aria-busy={pending}>
|
<form onSubmit={submit} className="auth-form" aria-busy={pending}>
|
||||||
@@ -123,11 +115,11 @@ function CredentialsForm({ setup }: { setup: boolean }) {
|
|||||||
id="password"
|
id="password"
|
||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
autoComplete={setup ? 'new-password' : 'current-password'}
|
autoComplete={setup ? "new-password" : "current-password"}
|
||||||
required
|
required
|
||||||
minLength={setup ? 15 : undefined}
|
minLength={setup ? 15 : undefined}
|
||||||
maxLength={128}
|
maxLength={128}
|
||||||
aria-describedby={setup ? 'password-hint' : undefined}
|
aria-describedby={setup ? "password-hint" : undefined}
|
||||||
disabled={pending}
|
disabled={pending}
|
||||||
/>
|
/>
|
||||||
{setup && (
|
{setup && (
|
||||||
@@ -173,27 +165,22 @@ function CredentialsForm({ setup }: { setup: boolean }) {
|
|||||||
{error}
|
{error}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button type="submit" size="lg" disabled={pending} className="auth-submit">
|
||||||
type="submit"
|
|
||||||
size="lg"
|
|
||||||
disabled={pending}
|
|
||||||
className="auth-submit"
|
|
||||||
>
|
|
||||||
{pending
|
{pending
|
||||||
? setup
|
? setup
|
||||||
? 'Creating account…'
|
? "Creating account…"
|
||||||
: 'Signing in…'
|
: "Signing in…"
|
||||||
: setup
|
: setup
|
||||||
? 'Create account'
|
? "Create account"
|
||||||
: 'Sign in'}
|
: "Sign in"}
|
||||||
<ArrowRight aria-hidden="true" />
|
<ArrowRight aria-hidden="true" />
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
<p className="auth-footnote">
|
<p className="auth-footnote">
|
||||||
{setup
|
{setup
|
||||||
? 'This workspace has one owner. Connections can be added later.'
|
? "This workspace has one owner. Connections can be added later."
|
||||||
: 'A private workspace. Access is limited to its owner.'}
|
: "A private workspace. Access is limited to its owner."}
|
||||||
</p>
|
</p>
|
||||||
</AuthFrame>
|
</AuthFrame>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,93 +1,83 @@
|
|||||||
import { createHash, randomBytes, scrypt, timingSafeEqual } from 'node:crypto'
|
import { createHash, randomBytes, scrypt, timingSafeEqual } from "node:crypto";
|
||||||
import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
|
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
|
||||||
import { dirname, isAbsolute } from 'node:path'
|
import { dirname, isAbsolute } from "node:path";
|
||||||
import { eq, lte } from 'drizzle-orm'
|
import { eq, lte } from "drizzle-orm";
|
||||||
import { type AppDatabase, getDatabase } from '../storage/database.server'
|
import { type AppDatabase, getDatabase } from "../storage/database.server";
|
||||||
import { authSessions, authThrottle, workspaceOwner } from '../storage/schema'
|
import { authSessions, authThrottle, workspaceOwner } from "../storage/schema";
|
||||||
import type { SafeOwner } from './auth-client'
|
import type { SafeOwner } from "./auth-client";
|
||||||
|
|
||||||
export const SESSION_MAX_AGE_SECONDS = 30 * 24 * 60 * 60
|
export const SESSION_MAX_AGE_SECONDS = 30 * 24 * 60 * 60;
|
||||||
const derive = (password: string, salt: string) =>
|
const derive = (password: string, salt: string) =>
|
||||||
new Promise<Buffer>((resolve, reject) =>
|
new Promise<Buffer>((resolve, reject) =>
|
||||||
scrypt(password, salt, 64, scryptOptions, (error, key) =>
|
scrypt(password, salt, 64, scryptOptions, (error, key) =>
|
||||||
error ? reject(error) : resolve(key),
|
error ? reject(error) : resolve(key),
|
||||||
),
|
),
|
||||||
)
|
);
|
||||||
const scryptOptions = { N: 2 ** 17, r: 8, p: 1, maxmem: 256 * 1024 * 1024 }
|
const scryptOptions = { N: 2 ** 17, r: 8, p: 1, maxmem: 256 * 1024 * 1024 };
|
||||||
const throttleWindow = 15 * 60_000
|
const throttleWindow = 15 * 60_000;
|
||||||
|
|
||||||
export class AuthError extends Error {
|
export class AuthError extends Error {
|
||||||
constructor(
|
constructor(
|
||||||
public status: number,
|
public status: number,
|
||||||
message: string,
|
message: string,
|
||||||
) {
|
) {
|
||||||
super(message)
|
super(message);
|
||||||
this.name = 'AuthError'
|
this.name = "AuthError";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const hash = (value: string) => createHash('sha256').update(value).digest('hex')
|
const hash = (value: string) => createHash("sha256").update(value).digest("hex");
|
||||||
const equal = (left: string, right: string) =>
|
const equal = (left: string, right: string) =>
|
||||||
timingSafeEqual(Buffer.from(hash(left)), Buffer.from(hash(right)))
|
timingSafeEqual(Buffer.from(hash(left)), Buffer.from(hash(right)));
|
||||||
function safeOwner(owner: typeof workspaceOwner.$inferSelect): SafeOwner {
|
function safeOwner(owner: typeof workspaceOwner.$inferSelect): SafeOwner {
|
||||||
return {
|
return {
|
||||||
id: owner.id,
|
id: owner.id,
|
||||||
email: owner.email,
|
email: owner.email,
|
||||||
name: owner.name,
|
name: owner.name,
|
||||||
onboardingCompletedAt: owner.onboardingCompletedAt,
|
onboardingCompletedAt: owner.onboardingCompletedAt,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
export function readAuthState(database = getDatabase()) {
|
export function readAuthState(database = getDatabase()) {
|
||||||
return {
|
return {
|
||||||
needsSetup: !database
|
needsSetup: !database.select({ id: workspaceOwner.id }).from(workspaceOwner).get(),
|
||||||
.select({ id: workspaceOwner.id })
|
};
|
||||||
.from(workspaceOwner)
|
|
||||||
.get(),
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/** Bootstrap secret is read only by the server or operator CLI, never sent to clients. */
|
/** Bootstrap secret is read only by the server or operator CLI, never sent to clients. */
|
||||||
export function getSetupToken() {
|
export function getSetupToken() {
|
||||||
const configured = process.env.WORKSPACE_SETUP_TOKEN
|
const configured = process.env.WORKSPACE_SETUP_TOKEN;
|
||||||
if (configured) {
|
if (configured) {
|
||||||
if (configured.length < 32)
|
if (configured.length < 32)
|
||||||
throw new AuthError(
|
throw new AuthError(503, "The setup token must contain at least 32 characters.");
|
||||||
503,
|
return configured;
|
||||||
'The setup token must contain at least 32 characters.',
|
|
||||||
)
|
|
||||||
return configured
|
|
||||||
}
|
}
|
||||||
const dbPath = process.env.TWITTER_LITE_DB_PATH
|
const dbPath = process.env.TWITTER_LITE_DB_PATH;
|
||||||
if (!dbPath || !isAbsolute(dbPath))
|
if (!dbPath || !isAbsolute(dbPath))
|
||||||
throw new AuthError(503, 'Configure a workspace database or setup token.')
|
throw new AuthError(503, "Configure a workspace database or setup token.");
|
||||||
const path = `${dbPath}.setup-token`
|
const path = `${dbPath}.setup-token`;
|
||||||
mkdirSync(dirname(path), { recursive: true, mode: 0o700 })
|
mkdirSync(dirname(path), { recursive: true, mode: 0o700 });
|
||||||
try {
|
try {
|
||||||
writeFileSync(path, randomBytes(32).toString('base64url'), {
|
writeFileSync(path, randomBytes(32).toString("base64url"), {
|
||||||
mode: 0o600,
|
mode: 0o600,
|
||||||
flag: 'wx',
|
flag: "wx",
|
||||||
})
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
|
if ((error as NodeJS.ErrnoException).code !== "EEXIST") throw error;
|
||||||
}
|
}
|
||||||
const token = readFileSync(path, 'utf8').trim()
|
const token = readFileSync(path, "utf8").trim();
|
||||||
if (token.length < 32)
|
if (token.length < 32) throw new AuthError(503, "The workspace setup token is invalid.");
|
||||||
throw new AuthError(503, 'The workspace setup token is invalid.')
|
return token;
|
||||||
return token
|
|
||||||
}
|
}
|
||||||
function consumeAttempt(database: AppDatabase) {
|
function consumeAttempt(database: AppDatabase) {
|
||||||
database.transaction(
|
database.transaction(
|
||||||
(tx) => {
|
(tx) => {
|
||||||
const now = Date.now()
|
const now = Date.now();
|
||||||
const current = tx.select().from(authThrottle).get()
|
const current = tx.select().from(authThrottle).get();
|
||||||
if (current && current.resetAt > now) {
|
if (current && current.resetAt > now) {
|
||||||
if (current.attempts >= 10)
|
if (current.attempts >= 10)
|
||||||
throw new AuthError(
|
throw new AuthError(429, "Too many attempts. Please try again in 15 minutes.");
|
||||||
429,
|
|
||||||
'Too many attempts. Please try again in 15 minutes.',
|
|
||||||
)
|
|
||||||
tx.update(authThrottle)
|
tx.update(authThrottle)
|
||||||
.set({ attempts: current.attempts + 1 })
|
.set({ attempts: current.attempts + 1 })
|
||||||
.where(eq(authThrottle.id, 1))
|
.where(eq(authThrottle.id, 1))
|
||||||
.run()
|
.run();
|
||||||
} else {
|
} else {
|
||||||
tx.insert(authThrottle)
|
tx.insert(authThrottle)
|
||||||
.values({ id: 1, attempts: 1, resetAt: now + throttleWindow })
|
.values({ id: 1, attempts: 1, resetAt: now + throttleWindow })
|
||||||
@@ -95,21 +85,18 @@ function consumeAttempt(database: AppDatabase) {
|
|||||||
target: authThrottle.id,
|
target: authThrottle.id,
|
||||||
set: { attempts: 1, resetAt: now + throttleWindow },
|
set: { attempts: 1, resetAt: now + throttleWindow },
|
||||||
})
|
})
|
||||||
.run()
|
.run();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ behavior: 'immediate' },
|
{ behavior: "immediate" },
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
function session(
|
function session(
|
||||||
database: Pick<AppDatabase, 'insert' | 'delete'>,
|
database: Pick<AppDatabase, "insert" | "delete">,
|
||||||
owner: typeof workspaceOwner.$inferSelect,
|
owner: typeof workspaceOwner.$inferSelect,
|
||||||
) {
|
) {
|
||||||
const sessionToken = randomBytes(32).toString('base64url')
|
const sessionToken = randomBytes(32).toString("base64url");
|
||||||
database
|
database.delete(authSessions).where(lte(authSessions.expiresAt, Date.now())).run();
|
||||||
.delete(authSessions)
|
|
||||||
.where(lte(authSessions.expiresAt, Date.now()))
|
|
||||||
.run()
|
|
||||||
database
|
database
|
||||||
.insert(authSessions)
|
.insert(authSessions)
|
||||||
.values({
|
.values({
|
||||||
@@ -117,125 +104,106 @@ function session(
|
|||||||
ownerId: owner.id,
|
ownerId: owner.id,
|
||||||
expiresAt: Date.now() + SESSION_MAX_AGE_SECONDS * 1000,
|
expiresAt: Date.now() + SESSION_MAX_AGE_SECONDS * 1000,
|
||||||
})
|
})
|
||||||
.run()
|
.run();
|
||||||
database.delete(authThrottle).where(eq(authThrottle.id, 1)).run()
|
database.delete(authThrottle).where(eq(authThrottle.id, 1)).run();
|
||||||
return { sessionToken, owner: safeOwner(owner) }
|
return { sessionToken, owner: safeOwner(owner) };
|
||||||
}
|
}
|
||||||
function cleanName(name: string) {
|
function cleanName(name: string) {
|
||||||
const cleaned = name.trim()
|
const cleaned = name.trim();
|
||||||
if (!cleaned || cleaned.length > 80)
|
if (!cleaned || cleaned.length > 80)
|
||||||
throw new AuthError(400, 'Enter a name of up to 80 characters.')
|
throw new AuthError(400, "Enter a name of up to 80 characters.");
|
||||||
return cleaned
|
return cleaned;
|
||||||
}
|
}
|
||||||
export async function createOwner(
|
export async function createOwner(
|
||||||
input: { email: string; password: string; name: string; setupToken: string },
|
input: { email: string; password: string; name: string; setupToken: string },
|
||||||
database = getDatabase(),
|
database = getDatabase(),
|
||||||
) {
|
) {
|
||||||
if (!readAuthState(database).needsSetup)
|
if (!readAuthState(database).needsSetup)
|
||||||
throw new AuthError(
|
throw new AuthError(409, "This workspace is already set up. Please sign in.");
|
||||||
409,
|
consumeAttempt(database);
|
||||||
'This workspace is already set up. Please sign in.',
|
|
||||||
)
|
|
||||||
consumeAttempt(database)
|
|
||||||
if (!equal(input.setupToken, getSetupToken()))
|
if (!equal(input.setupToken, getSetupToken()))
|
||||||
throw new AuthError(401, 'Invalid setup credentials.')
|
throw new AuthError(401, "Invalid setup credentials.");
|
||||||
const email = input.email.trim().toLowerCase()
|
const email = input.email.trim().toLowerCase();
|
||||||
if (email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
|
if (email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
|
||||||
throw new AuthError(400, 'Enter a valid email address.')
|
throw new AuthError(400, "Enter a valid email address.");
|
||||||
if (input.password.length < 15 || input.password.length > 128)
|
if (input.password.length < 15 || input.password.length > 128)
|
||||||
throw new AuthError(400, 'Use a password between 15 and 128 characters.')
|
throw new AuthError(400, "Use a password between 15 and 128 characters.");
|
||||||
const name = cleanName(input.name)
|
const name = cleanName(input.name);
|
||||||
const salt = randomBytes(16).toString('hex')
|
const salt = randomBytes(16).toString("hex");
|
||||||
const derived = (await derive(input.password, salt)) as Buffer
|
const derived = (await derive(input.password, salt)) as Buffer;
|
||||||
return database.transaction(
|
return database.transaction(
|
||||||
(tx) => {
|
(tx) => {
|
||||||
if (tx.select().from(workspaceOwner).get())
|
if (tx.select().from(workspaceOwner).get())
|
||||||
throw new AuthError(
|
throw new AuthError(409, "This workspace is already set up. Please sign in.");
|
||||||
409,
|
|
||||||
'This workspace is already set up. Please sign in.',
|
|
||||||
)
|
|
||||||
const owner = {
|
const owner = {
|
||||||
id: 1,
|
id: 1,
|
||||||
email,
|
email,
|
||||||
name,
|
name,
|
||||||
passwordHash: `${salt}:${derived.toString('hex')}`,
|
passwordHash: `${salt}:${derived.toString("hex")}`,
|
||||||
onboardingCompletedAt: null,
|
onboardingCompletedAt: null,
|
||||||
createdAt: Date.now(),
|
createdAt: Date.now(),
|
||||||
}
|
};
|
||||||
tx.insert(workspaceOwner).values(owner).run()
|
tx.insert(workspaceOwner).values(owner).run();
|
||||||
return session(tx, owner)
|
return session(tx, owner);
|
||||||
},
|
},
|
||||||
{ behavior: 'immediate' },
|
{ behavior: "immediate" },
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
export async function signIn(
|
export async function signIn(input: { email: string; password: string }, database = getDatabase()) {
|
||||||
input: { email: string; password: string },
|
consumeAttempt(database);
|
||||||
database = getDatabase(),
|
const owner = database.select().from(workspaceOwner).get();
|
||||||
) {
|
|
||||||
consumeAttempt(database)
|
|
||||||
const owner = database.select().from(workspaceOwner).get()
|
|
||||||
if (input.password.length > 128 || input.email.length > 254)
|
if (input.password.length > 128 || input.email.length > 254)
|
||||||
throw new AuthError(401, 'Invalid email or password.')
|
throw new AuthError(401, "Invalid email or password.");
|
||||||
const [salt = '', expected = ''] = owner?.passwordHash.split(':') ?? [
|
const [salt = "", expected = ""] = owner?.passwordHash.split(":") ?? [
|
||||||
'0'.repeat(32),
|
"0".repeat(32),
|
||||||
'0'.repeat(128),
|
"0".repeat(128),
|
||||||
]
|
];
|
||||||
const actual = (await derive(input.password, salt)) as Buffer
|
const actual = (await derive(input.password, salt)) as Buffer;
|
||||||
if (
|
if (
|
||||||
!owner ||
|
!owner ||
|
||||||
!equal(input.email.trim().toLowerCase(), owner.email) ||
|
!equal(input.email.trim().toLowerCase(), owner.email) ||
|
||||||
!timingSafeEqual(actual, Buffer.from(expected, 'hex'))
|
!timingSafeEqual(actual, Buffer.from(expected, "hex"))
|
||||||
)
|
)
|
||||||
throw new AuthError(401, 'Invalid email or password.')
|
throw new AuthError(401, "Invalid email or password.");
|
||||||
return session(database, owner)
|
return session(database, owner);
|
||||||
}
|
}
|
||||||
export function getSession(
|
export function getSession(token: string | undefined, database = getDatabase()): SafeOwner | null {
|
||||||
token: string | undefined,
|
if (!token || token.length > 128) return null;
|
||||||
database = getDatabase(),
|
|
||||||
): SafeOwner | null {
|
|
||||||
if (!token || token.length > 128) return null
|
|
||||||
const found = database
|
const found = database
|
||||||
.select()
|
.select()
|
||||||
.from(authSessions)
|
.from(authSessions)
|
||||||
.where(eq(authSessions.tokenHash, hash(token)))
|
.where(eq(authSessions.tokenHash, hash(token)))
|
||||||
.get()
|
.get();
|
||||||
if (!found) return null
|
if (!found) return null;
|
||||||
if (found.expiresAt <= Date.now()) {
|
if (found.expiresAt <= Date.now()) {
|
||||||
database
|
database.delete(authSessions).where(eq(authSessions.tokenHash, found.tokenHash)).run();
|
||||||
.delete(authSessions)
|
return null;
|
||||||
.where(eq(authSessions.tokenHash, found.tokenHash))
|
|
||||||
.run()
|
|
||||||
return null
|
|
||||||
}
|
}
|
||||||
const owner = database
|
const owner = database
|
||||||
.select()
|
.select()
|
||||||
.from(workspaceOwner)
|
.from(workspaceOwner)
|
||||||
.where(eq(workspaceOwner.id, found.ownerId))
|
.where(eq(workspaceOwner.id, found.ownerId))
|
||||||
.get()
|
.get();
|
||||||
return owner ? safeOwner(owner) : null
|
return owner ? safeOwner(owner) : null;
|
||||||
}
|
}
|
||||||
export function signOut(token: string | undefined, database = getDatabase()) {
|
export function signOut(token: string | undefined, database = getDatabase()) {
|
||||||
if (token)
|
if (token)
|
||||||
database
|
database
|
||||||
.delete(authSessions)
|
.delete(authSessions)
|
||||||
.where(eq(authSessions.tokenHash, hash(token)))
|
.where(eq(authSessions.tokenHash, hash(token)))
|
||||||
.run()
|
.run();
|
||||||
}
|
}
|
||||||
export function completeOnboarding(
|
export function completeOnboarding(
|
||||||
token: string,
|
token: string,
|
||||||
input: { name: string },
|
input: { name: string },
|
||||||
database = getDatabase(),
|
database = getDatabase(),
|
||||||
): SafeOwner {
|
): SafeOwner {
|
||||||
const owner = getSession(token, database)
|
const owner = getSession(token, database);
|
||||||
if (!owner) throw new AuthError(401, 'Please sign in.')
|
if (!owner) throw new AuthError(401, "Please sign in.");
|
||||||
const update = {
|
const update = {
|
||||||
name: cleanName(input.name),
|
name: cleanName(input.name),
|
||||||
onboardingCompletedAt: owner.onboardingCompletedAt ?? Date.now(),
|
onboardingCompletedAt: owner.onboardingCompletedAt ?? Date.now(),
|
||||||
}
|
};
|
||||||
database
|
database.update(workspaceOwner).set(update).where(eq(workspaceOwner.id, owner.id)).run();
|
||||||
.update(workspaceOwner)
|
return { ...owner, ...update };
|
||||||
.set(update)
|
|
||||||
.where(eq(workspaceOwner.id, owner.id))
|
|
||||||
.run()
|
|
||||||
return { ...owner, ...update }
|
|
||||||
}
|
}
|
||||||
|
|||||||