feat: require owner login and add onboarding

Reviewed-on: #4

.env.example

@@ -1,2 +1,14 @@
 TWITTER_RELAY_BASE_URL=http://127.0.0.1:6900
-BIRD_PROFILE_NAME=
+TWITTER_LITE_ORIGIN=https://your-host.your-tailnet.ts.net
+TWITTER_LITE_ALLOWED_LOGIN=your-tailscale-login
+TWITTER_LITE_DB_PATH=/absolute/path/to/twitter-lite/.data/workspace.sqlite
+# Required when connecting Mastodon; keep this runtime file outside Git.
+# TWITTER_LITE_CREDENTIAL_KEY_FILE=/absolute/path/to/credential-key
+TWITTER_LITE_MASTODON_ORIGINS=https://fedi.yutakobayashi.com
+# Optional home Codex research prototype. Start pnpm codex:serve separately.
+# TWITTER_LITE_CODEX_URL=ws://127.0.0.1:4500
+# TWITTER_LITE_CODEX_MODEL=gpt-6-astra
+# TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
+
+# Optional initial owner setup code (32+ characters). Otherwise generated beside DB.
+# WORKSPACE_SETUP_TOKEN=

.gitignore

@@ -1,5 +1,6 @@
 .superpowers/
 .worktrees/
+/.*/skills/
 .env*
 !.env.example
 .output/
@@ -7,3 +8,5 @@ dist/
 node_modules/
 playwright-report/
 test-results/
+.data/
+*.setup-token

.hallmark/log.json

@@ -0,0 +1,49 @@
+[
+  {
+    "date": "2026-09-28",
+    "macrostructure": "daily home with natural-language composer and flexible plan",
+    "theme": "shadcn base-nova neutral",
+    "scope": "home",
+    "enrichment": "none",
+    "brief": "Greeting and large composer above time-free routines, tasks, contact actions and context; shared session state"
+  },
+  {
+    "date": "2026-09-28",
+    "macrostructure": "communication workbench and append-only journal",
+    "theme": "shadcn base-nova neutral",
+    "scope": "support",
+    "enrichment": "none",
+    "brief": "Compact execution support integrated with common sidebar, editable reply review and journal corrections"
+  },
+  {
+    "date": "2026-09-28",
+    "macrostructure": "sidebar-09 Inbox",
+    "theme": "shadcn base-nova neutral",
+    "scope": "inbox",
+    "enrichment": "none",
+    "brief": "Shared navigation with Twitter Lite, inferred-interest article list and reading pane; no manual interest settings"
+  },
+  {
+    "date": "2026-09-28",
+    "macrostructure": "sidebar-09 Workbench",
+    "theme": "shadcn base-nova neutral",
+    "scope": "app",
+    "enrichment": "none",
+    "brief": "Base UI icon rail and contextual sidebar with shadcn chat primitives and independent deck columns"
+  },
+  {
+    "date": "2026-09-24",
+    "macrostructure": "Workbench",
+    "theme": "custom",
+    "theme_axes": "dark navy / system sans / blue",
+    "enrichment": "none",
+    "brief": "Full-height TweetDeck-style research columns with compact sidebar and modal editors"
+  },
+  {
+    "date": "2026-07-26",
+    "macrostructure": "Workbench",
+    "theme": "Garden",
+    "enrichment": "none",
+    "brief": "Personal read-only research client with a soft, deliberate workspace"
+  }
+]

.hallmark/preflight.json

@@ -0,0 +1,10 @@
+{
+  "date": "2026-09-24",
+  "font_stack": "System sans; tokens.css",
+  "palette": "Dark navy and blue OKLCH tokens",
+  "motion": "motion-cut",
+  "spacing": "named token scale",
+  "framework": "React 19 + TanStack Start + Vite 8",
+  "preserve": ["deck data model", "profile binding", "WebMCP contracts"],
+  "override": "User requested TweetDeck-like full UI redesign instead of Garden reader"
+}

.oxlintrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "categories": { "correctness": "off" },
+  "jsPlugins": ["@shadcn/lint"],
+  "rules": {
+    "shadcn/no-raw-colors": "error"
+  },
+  "ignorePatterns": ["src/routeTree.gen.ts"]
+}

README.md

@@ -1,85 +1,296 @@
-# Twitter Lite
+# Personal Workspace
 
-Twitter Lite is an intentional, read-only X reader. It shows content only after
+A personal workspace for understanding the day, choosing the next action,
-you enter a user handle, profile URL, search query, or list URL, follow a
+keeping context, and exploring information. Home brings together a short brief,
-deliberate post detail link, or manually open a valid
+flexible tasks and routines, messages, notes, and reading. A shared sidebar opens
-`/:handle/status/:tweetId` URL.
+each dedicated workspace; its bottom avatar manages connected accounts.
 
-## Scope
+The interface is in English. User-entered text and external posts retain their
+original language.
 
-- User timelines and raw X search syntax
+## Workspaces and current status
-- Popular (`Top`) and chronological (`Latest`) search
-- Optional `filter:follows` search
-- Authenticated account list selection and list timelines from a deliberate URL or ID
-- Infinite cursor pagination with explicit retry
-- Deliberate post detail pages with the visible conversation
-- Infinite conversation loading with explicit continuation retry
-- Read-only cards for text, media, quotes, articles, and quiet engagement counts
 
-It intentionally has no home feed, recommendations, trends, notifications,
+| Workspace | Route | Current implementation |
-history, account directory, or write actions.
+| --- | --- | --- |
+| 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. |
+| 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. |
+| 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. |
 
-Post detail pages show only the selected post and its visible conversation;
+Home, Messages, and Journal share in-memory state across navigation; reloading
-they do not add related-post recommendations or an account-discovery surface.
+resets it. The home input uses a deterministic English/Japanese interpreter to
+preview an action before confirmation, rather than an LLM. Research decks,
+connections, and chat history use server-side persistence.
 
-## Routes
+See [execution support](docs/execution-support.md) and the
+[vitals preview](docs/vitals-preview.md) for prototype scope.
 
-- `/` shows the empty user input.
+## Direction: personal context and execution
-- `/:handle` shows a user timeline.
+
-- `/search?q=<query>&product=<Top|Latest>&following=<boolean>` shows search results.
+The intended connection with the separate private `life` / Rensheng repository
-- `/i/lists` shows the authenticated account's lists.
+is a loop: read relevant personal context, suggest useful next actions, record
-- `/i/lists/:listId` shows a list timeline.
+what happened, and compile meaningful outcomes back into durable context.
-- `/:handle/status/:tweetId` shows one selected post and its visible conversation.
+This integration is planned; the app does not currently read or update life.
+
+Rensheng would retain personal context, preferences, and the background of
+ongoing matters. This workspace would own its execution state and interaction
+history, with original conversations and appointments remaining in their source
+systems. Context should carry source references and verification dates.
+
+Interests are queries over activity history, not settings the user must maintain.
+Routines provide optional guidance rather than a daily completion quota. Home
+should help the user choose a manageable next step, with room to defer, dismiss,
+or change direction.
+
+## Research capabilities
+
+- Multiple named decks with up to six columns each
+- Twitter search, user timelines, and lists with independent relay accounts
+- Mastodon OAuth, multiple accounts, search, user, list, and hashtag columns
+- Native X search syntax, Top/Latest ranking, and optional `filter:follows`
+- List discovery for the account selected in the column editor
+- Column editing, ordering, deletion/undo, refresh, and cursor pagination
+- SQLite-backed shared decks, revision conflicts, and device-local selection
+- Temporary views for exploration, with explicit saving
+- Server-only encrypted Mastodon credentials and configurable Tailscale owner access
+- Read-only post cards with source links, text, media, and quotes
+- Experimental WebMCP tools to manage decks and read their columns
+- Optional resident Codex research chat, cited host-side Markdown reports,
+  and saved conversations with deck, account, and citation restoration
+
+Original-post links open their source site; SNS reply threads are not rendered
+inside the app. Bluesky, Threads, and Nostr connectors are not implemented.
+
+## Login and onboarding
+
+The workspace requires a single owner account with email and password. First
+use opens account setup, followed by a short onboarding. Run
+`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.
 
 ## Requirements and setup
 
 Use Nix, or Node.js `>=22.12.0` with pnpm `11.9.0`. The committed `.npmrc`
-routes the `@yuta` scope to the public Gitea Packages registry, where Bird
+routes the `@yuta` scope to the public Gitea Packages registry.
-`0.10.0` provides the required Top and Latest search interface.
 
 ```bash
 nix develop -c pnpm install --frozen-lockfile
 cp .env.example .env.local
 ```
 
-Set `TWITTER_RELAY_BASE_URL` in `.env.local` for Vite development, and set
+The Nix development shell installs Hallmark's agent skill for the supported
-`BIRD_PROFILE_NAME` when the relay has multiple profiles. Export the same
+local agent targets. Set the runtime configuration in `.env.local` for Vite
-values in the process environment before `start` or `test:live`:
+development, or export it before running the production server. In addition to
+the relay URL, configure the Serve origin, owner login, and an absolute SQLite
+path from `.env.example`. Mastodon needs an allowed instance and a runtime
+encryption key file; see [storage, OAuth and restore](docs/storage-and-oauth.md).
 
 ```bash
 export TWITTER_RELAY_BASE_URL=http://127.0.0.1:6900
-export BIRD_PROFILE_NAME=
 ```
 
-Both values are read by server-only code at runtime; neither value nor Bird is
+The app discovers available account profiles through the relay's `/profiles`
-sent to the browser.
+endpoint. Select a profile for each column. There is no global account selector,
+profile cookie, or application-level `BIRD_PROFILE_NAME` default. Requests
+validate that the bound profile still exists before fetching posts or lists.
+Bird and relay credentials stay on the server; saved deck definitions include
+stable connection IDs. The connection metadata resolves Twitter IDs to relay
+profiles; Mastodon credentials never go to the browser.
 
 ## Commands
 
 ```bash
 nix develop -c pnpm dev
 nix develop -c pnpm dev:tailscale
+nix develop -c pnpm generate:e2e-openapi
+nix develop -c pnpm lint
+nix develop -c pnpm lint:ui
+nix develop -c pnpm typecheck
 nix develop -c pnpm knip
 nix develop -c pnpm test
 nix develop -c pnpm test:e2e
 nix develop -c pnpm test:live
 nix develop -c pnpm build
 nix develop -c pnpm start
+nix develop -c pnpm account:setup
+nix develop -c pnpm db:generate
+nix develop -c pnpm codex:serve
 ```
 
-`test:e2e` is intentionally Nix-only and uses the system Chromium supplied by
+## Home Codex research prototype
-the dev shell. `test:live` is an explicit, opt-in smoke test that performs
-exactly one read-only Top search using the configured relay.
 
-Development binds to `127.0.0.1` by default. `dev:tailscale` binds to
+Run `codex login` as the host user, then keep `pnpm codex:serve` running separately
-`0.0.0.0`, so it exposes the app on LAN interfaces as well as Tailscale. Use it
+from the web server. It starts a resident app-server at `ws://127.0.0.1:4500`
-only on a trusted network and obtain the Tailscale address with
+using that user's existing Codex login. The launcher passes a small environment
-`tailscale ip -4`.
+allowlist, without the app's database, relay or SNS secret settings. Configured
+MCP servers are disabled for this process without changing the user's settings.
+The prototype was developed against Codex CLI 0.156.1; its WebSocket and dynamic
+tool APIs are experimental.
+
+Configure the web app with these values in `.env.local` (absolute report path):
+
+```dotenv
+TWITTER_LITE_CODEX_URL=ws://127.0.0.1:4500
+TWITTER_LITE_CODEX_MODEL=gpt-6-astra
+TWITTER_LITE_REPORT_ROOT=/absolute/path/to/twitter-lite/.data/research
+```
+
+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
+open deck as context. The account selector controls which connections Codex can
+use. It can inspect saved deck definitions and reuse them as temporary views,
+as well as create new views. `list_lists(connectionId)` discovers existing
+Twitter and Mastodon lists for a selected connected account; returned list IDs
+can be reused in list columns. It uses the same catalog as the manual editor
+(Twitter requests up to 100 lists; list discovery is not paginated).
+The default prompt asks Codex to inspect existing decks and the selected
+accounts' lists before planning new searches, then read relevant list columns
+for evidence. Follow-ups can reuse catalogs already fetched in the conversation.
+Manual deck creation and column editing remain
+available. The backend handles tools even when the browser is closed.
+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.
+If a turn is running, stop it first. The conversation reset is shared across
+open devices. **Chat history** reopens saved conversations with their account
+selection, deck and citations; the next message resumes the same Codex thread.
+SQLite stores conversation snapshots and the active conversation selection.
+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.
+The prototype accepts up to 100 messages per backend process.
+SSE pushes conversation messages, tool activity and generated deck updates to
+open browsers, without polling.
+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
+priority; otherwise the app shows the post captured during research in a column
+with matching source and account settings, creating a temporary citation deck
+when needed. These captured posts are labeled and do not change feed pagination
+or reveal sensitive content automatically. Other links still open externally;
+Ctrl/Cmd-click on a citation also opens the original site.
+Citation metadata stays with the saved conversation across reconnects,
+follow-up messages and server restarts. Markdown HTML is not executed and
+Markdown images are rendered as links.
+Reopening the page receives the latest state and restores the temporary deck.
+Later updates modify the same temporary view; they do not overwrite saved decks
+or switch away from another deck you are reading. Use the existing save button
+to persist a deck. The agent and visible columns currently fetch posts separately.
+
+Codex writes `<report root>/<run ID>/report.md` using its workspace file tools.
+The UI displays its host path after validating the file. A conversation or deck
+edit can finish without producing a report. Citation quality is model output,
+not independently verified. Report contents remain on the host filesystem;
+the app DB stores the conversation, thread ID, deck context and citation metadata.
+
+Browser disconnection does not cancel research; reconnecting restores the latest
+state through `/api/research/events`, under the same owner access checks as the
+rest of the app. After a backend restart, unfinished turns appear as interrupted;
+sending another message resumes the same thread. Before starting that message,
+the backend checks the resumed thread and interrupts any orphaned active turn.
+It does not automatically rerun interrupted requests. Files already written remain.
+Cancellation is explicit. The launcher and report directory must
+run under a user able to write those files. NixOS DynamicUser service integration
+and dedicated service credentials are outside this prototype.
+
+`test:e2e` uses the system Chromium supplied by the Nix dev shell. Playwright
+integration and Axe accessibility tests live under `e2e/`. A standalone mock
+HTTP relay exercises the production server-function boundary without contacting
+X or a personal relay. Orval generates API fixture types from a pinned
+[twitter-openapi specification](https://github.com/fa0311/twitter-openapi/commit/590dae5c9f8575abc91d3774946bfe6f23960aba).
+Generated files are committed; run `generate:e2e-openapi` only when changing
+the pin or selected operations. Runtime requests use Bird.
+
+`test:live` is an explicit, opt-in smoke test that performs one read-only Top
+search. For this standalone probe only, `BIRD_PROFILE_NAME` selects the account
+and `TWITTER_LITE_LIVE_QUERY` overrides the search text.
+
+## Deck workspace
+
+The interface uses shadcn/ui's Base UI components and Tailwind CSS v4, with a
+collapsible sidebar based on
+[sidebar-09](https://github.com/shadcn-ui/ui/tree/98a1fe67b439324ddc857f47fbdce056600a4329/apps/v4/registry/bases/base/blocks/sidebar-09).
+The workspace retains compact column headers and independently scrolling post
+columns. On narrow screens, the sidebar opens as a sheet. Add/edit forms use
+shadcn dialogs with Escape handling and focus restoration. Column menus contain
+editing, ordering, and deletion; refresh stays available directly in each header.
+
+Shared UI components live in `src/components/ui`; `components.json` configures
+the registry and theme entrypoint. Chat uses MessageScroller, Message, Bubble,
+Marker and InputGroup while retaining the existing Codex transport and saved
+conversation model. The icon rail switches between chat and deck management;
+closing the mobile sheet or crossing the desktop breakpoint preserves chat
+drafts, selected accounts and live deck updates. Theme colors are declared in
+`src/ui.css`.
+
+`pnpm lint` runs Biome and the UI checks. `pnpm lint:ui` runs
+[@shadcn/lint](https://github.com/shadcn-ui/lint) through Oxlint. The
+`shadcn/no-raw-colors` rule in `.oxlintrc.json` requires theme colors in JSX and
+class helpers, including shared UI components. Layout values remain available
+for the sidebar and deck. Biome continues to handle formatting and general
+code checks. Knip checks application usage while retaining the public exports
+of registry components for composition. Additional design rules can be configured
+in `.oxlintrc.json`;
+see the [available rules](https://github.com/shadcn-ui/lint#rules).
+
+Create a deck for an investigation, then add columns for each perspective.
+Choose a connected account and one of its supported sources. Account
+changes affect only the edited column. Matching source conditions and accounts
+share the query cache; different profiles never share posts or cursors.
+
+Saved decks live on the server and refresh across devices on focus and while
+visible. Conflicting revisions are rejected. Only the active deck is rendered
+and fetched; posts and cursors are not archived. The active selection stays
+local to the device.
+
+AI-created decks open as temporary views reconstructed from their saved chat
+on another device or after reload. Save a view to add it to the independent deck
+library, or make a temporary copy of a saved deck to experiment.
+Other unsaved temporary edits disappear on reload or navigation, including OAuth redirects.
+Existing version-2 browser decks have an explicit import action; invalid older
+data is left untouched. See [the deck model and persistence contract](docs/research-decks.md).
+
+## WebMCP
+
+A WebMCP-enabled browser exposes `list_connections`, `list_decks`, `get_deck`,
+`set_deck`, `save_deck`, `select_deck`, `delete_deck`, `get_column_posts`, and
+`load_more_column` on `/deck`. Discover connection IDs first.
+`set_deck` creates a temporary view when `deckId` is omitted. `save_deck`
+persists it. Replacing or deleting a saved deck requires its `expectedRevision`.
+
+Enable `chrome://flags/#enable-webmcp-testing`, restart Chrome, and open the
+local app. Use the
+[Model Context Tool Inspector](https://developer.chrome.com/docs/ai/webmcp#imitate_agent_chat_with_the_inspector_extension)
+to invoke tools. Registration uses native `document.modelContext` through
+`usewebmcp`; there is no polyfill or external MCP transport. Unsupported
+browsers retain the manual deck UI. See [tool contracts and verification](docs/webmcp-prototype.md).
+
+Development and `dev:tailscale` both bind to `127.0.0.1`. Native WebMCP needs a secure context;
+use a Tailscale Serve HTTPS origin for remote access, and allow its exact
+hostname through `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS` in the Vite process
+environment. HTTP and HTTPS origins have separate localStorage.
+
+Set `TWITTER_LITE_ORIGIN` to the exact public HTTPS origin (no trailing slash).
+The default `TWITTER_LITE_AUTH_MODE=tailscale` requires
+`TWITTER_LITE_ALLOWED_LOGIN` to be your Tailscale login. The app requires
+Serve's `Tailscale-User-Login` header and rejects other users. Keep the backend
+on localhost: the trusted Serve proxy supplies identity. Tagged clients do not
+provide user identity. Missing configuration fails closed; direct browser access
+to localhost does not supply the required identity. Playwright supplies an
+explicit fixture identity to its isolated test server.
+
+For a private, tailnet-only reverse proxy such as Traefik, explicitly set
+`TWITTER_LITE_AUTH_MODE=none` to disable the Tailscale identity check. This mode
+does not require `TWITTER_LITE_ALLOWED_LOGIN` or Tailscale identity headers.
+App login remains mandatory, including access to connected accounts and Codex.
+Bind the backend to loopback or its Tailscale address and restrict proxy
+access to the tailnet.
+Both modes require the exact configured `Origin` for state-changing requests,
+including chat and deck mutations. Missing origin or an unknown auth mode
+fails closed. Mastodon OAuth uses the configured public origin for its callback.
 
 ## NixOS service
 
-The flake provides both a production package and a NixOS module. Import the
+The flake provides a production package and a NixOS module:
-module and configure the relay:
 
 ```nix
 {
@@ -95,7 +306,10 @@ module and configure the relay:
           services.twitter-lite = {
             enable = true;
             relayBaseUrl = "http://127.0.0.1:6900";
-            # profileName = "default";
+            publicOrigin = "https://home.example-tailnet.ts.net";
+            allowedLogin = "your-tailscale-login";
+            mastodonOrigins = [ "https://fedi.yutakobayashi.com" ];
+            credentialKeyFile = "/var/lib/secrets/twitter-lite-key";
           };
         }
       ];
@@ -104,15 +318,15 @@ module and configure the relay:
 }
 ```
 
-The service listens on `127.0.0.1:3000` by default. Set
+The service listens on `127.0.0.1:3000`. Set
-`services.twitter-lite.host` or `services.twitter-lite.port` to change the
+`services.twitter-lite.port` to change the port; the host remains loopback.
-listener. The package can also be built directly with `nix build`.
+The module reserves `/var/lib/twitter-lite` with mode 0700 for persistent state.
+`credentialKeyFile` can reference a runtime secret file for SNS credentials;
+systemd loads it as a credential, separate from the database and Nix store.
+Profiles are selected in column definitions, not service options.
+The package can also be built directly with `nix build`.
 
 ## Reliability
 
 Bird uses X's internal GraphQL operations through the configured relay. Query
 IDs and response shapes can change without notice.
-
-Conversation pages use Bird's current per-page chronological ordering. Keeping
-X's original ranked branch order is deferred until Bird exposes that order
-without expanding the relay surface.

biome.json

@@ -8,9 +8,25 @@
       "!!**/test-results"
     ]
   },
-  "formatter": { "enabled": true, "indentStyle": "space" },
+  "formatter": {
-  "linter": { "enabled": true, "rules": { "recommended": true } },
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
   "javascript": {
-    "formatter": { "quoteStyle": "single", "semicolons": "asNeeded" }
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
   }
 }

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/ui.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "#/components",
+    "utils": "#/lib/utils",
+    "ui": "#/components/ui",
+    "lib": "#/lib",
+    "hooks": "#/hooks"
+  }
+}

docs/execution-support.md

@@ -0,0 +1,64 @@
+# Execution support prototype
+
+The shared sidebar opens `/support` (Messages) and `/journal` (Journal), alongside
+Reader and Research. These are UI-only prototypes with fictional contacts
+and in-memory state. Reloading resets the prototype state. Tasks, communication status, outcomes, and
+journal entries are shared between routes for the current browser session.
+No messages, calendar events, medical records, or Rensheng pages are written.
+
+## Reference and scope
+
+The functional reference is the user's life brief
+`briefs/2026-09-25-executive-support-design.md`, together with the public
+[Beeper Copilot concept](https://beeper-copilot-lp.vercel.app/).
+The prototype adopts the execution flows, not private facts from the life repo
+or the reference site's deployment and privacy claims.
+
+- Communication: unified conversations, a maximum of three initial actions,
+  deferral, waiting, dismissal, and a full list; source messages, summaries,
+  editable reply styles, explicit review, and simulated sending.
+- Scheduling: choosing a candidate and reviewing a simulated calendar entry.
+- Context: person notes with links back to the sample conversation and a local
+  record of the simulated outcome. No permanent trait or goal is inferred.
+- Journal: free notes, resumption points, user-entered medication and weight
+  records; occurrence and recording times, append-only corrections, and a
+  selectable summary preview for a consultation.
+
+The intended memory boundary remains Rensheng: execution events can eventually
+be compiled into durable context after source comparison and user correction.
+This prototype neither implements that compiler nor creates a second personal
+context database. Missing records remain unknown; there are no medication,
+dose, weight-target, or treatment recommendations.
+
+The UI uses existing shadcn Base UI components and neutral theme tokens.
+Shared account management continues to use the existing connection system;
+the new communication and journal prototypes do not consume those accounts.
+
+## Daily home
+
+`/` presents a greeting, a large input, and a flexible plan grouped as
+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
+steps. Communications can be reviewed directly in a home dialog; changes also
+appear in `/support`. Journal entries and corrections appear on the home, and
+reader samples open for reading. Research remains a separate work surface.
+
+The input currently uses a deterministic English/Japanese mock interpreter, not an LLM.
+It proposes typed actions for task creation/status/reordering, routine steps,
+contact reply/review or deferral, notes/weight/medication records, and navigation.
+Confirming a proposal dispatches the corresponding operation. Unknown or
+ambiguous input does not change state. Message sending still goes through the
+existing simulated review UI; this prototype performs no external send.
+
+Examples: `Add grocery shopping`, `Defer Morning routine`, `Reply to Aoki`,
+`Note: Resume from page 2`, `Weight: 65.2 kg`, and `Open Reader`.
+
+The interaction reference is [Tiimo visual planning](https://www.tiimoapp.com/product/visual-planning),
+reviewed on 2026-09-28: combined routines and tasks, flexible reordering, small
+steps, and natural-language planning. Unlike its timed scheduling options, this
+prototype deliberately keeps the day free of precise times as requested.
+
+The home greeting includes a short prose brief derived from current task and
+communication state. Completed or deferred items leave the brief; the next
+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.

docs/login.md

@@ -0,0 +1,65 @@
+# Owner login and onboarding
+
+This is a single-owner workspace. App login is mandatory for all workspace
+pages, server functions, and research streams. The existing Tailscale identity
+check is an optional outer boundary; `TWITTER_LITE_AUTH_MODE=none` disables only
+that outer check, not app login. Origin checks still protect mutations.
+
+## First use
+
+Start the server with its usual database and public-origin configuration, then
+run this on the server using the same database:
+
+```bash
+nix develop -c pnpm account:setup
+```
+
+The Nix package also provides `twitter-lite-setup`; run it with the service
+database path and filesystem permissions.
+
+The command loads `.env.local` when present. An exported `TWITTER_LITE_DB_PATH`
+takes precedence. It prints a setup code for `/setup`; keep that code private.
+The code is created in `<database path>.setup-token` with mode 0600, or supplied
+through `WORKSPACE_SETUP_TOKEN` (at least 32 characters). It is never returned
+by the app's public API. The owner account can be created only once, including
+when two setup requests arrive together. The code cannot register another
+account or reset an existing password after setup.
+
+Visit the app, enter the setup code, your name, email, and a password of 15–128
+characters. The email is a login identifier; this prototype does not verify it
+or send email. Choose your display name and finish the short onboarding to
+open Home. Onboarding completion and the name persist in SQLite. Home greets
+you by that name.
+
+## Sessions
+
+Passwords use salted scrypt hashes (N=2^17, r=8, p=1). Session cookies are
+HttpOnly, SameSite=Lax, host-only, and Secure for an HTTPS public origin.
+Only token hashes are stored in SQLite; sessions expire after 30 days.
+Setup and login share a persistent limit of 10 attempts per 15 minutes;
+successful authentication clears that limit.
+
+Open the avatar menu and choose **Sign out** to revoke the current session.
+Open research streams stop sending updates when the session is revoked or
+expires, with an idle check every 15 seconds. Other logged-in devices retain
+their own sessions. Authenticated responses are not cached.
+
+Account registration is closed once the owner exists. Multiple users,
+email-based password recovery, and account management are not implemented.
+Back up the SQLite database as described in [storage](storage-and-oauth.md).
+Home tasks, messages, and journal entries remain session-local prototypes;
+onboarding does not make those records persistent.
+
+## Implementation
+
+- `src/features/auth/auth.server.ts`: owner, password hashing, throttling, sessions.
+- `src/features/auth/gate.server.ts` and `src/start.ts`: request-level protection.
+- `/api/auth`: session state, setup, sign-in, onboarding, and sign-out.
+- Root route guard: client navigation and onboarding redirects.
+- `/setup`, `/login`, `/onboarding`: English forms using the existing UI system.
+
+Password and session handling follow the relevant
+[OWASP password storage](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html)
+and [session management](https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html)
+guidance. Tests cover invalid credentials, bootstrap ownership, expiry,
+revocation, request protection, and onboarding persistence.

docs/plans/2026-09-24-home-agent-research.md

@@ -0,0 +1,288 @@
+# Home-agent research
+
+## Product boundary
+
+The user starts a research task from the deck workspace. A home agent chooses
+sources, opens a temporary deck, reads posts and writes a cited Markdown report
+on the host. Twitter Lite provides the connected-account and deck tools; the
+agent owns research and report writing.
+
+SQLite stores conversation snapshots and the selected conversation alongside
+saved deck definitions and account credentials. Reports remain host Markdown;
+their contents are not copied into the DB. Adding a temporary deck to the saved
+deck library remains an explicit user action.
+
+## Proposed first implementation
+
+1. Add a topic and connected-account selection form to the deck workspace.
+2. Start one home Codex task with a dedicated output directory.
+3. Supply tools for connection discovery, temporary deck creation and bounded
+   post retrieval using the existing validators and platform services.
+4. Save conversation state and the latest generated deck in SQLite. SSE
+   sends the current snapshot on connection and pushes subsequent changes.
+   Reopened pages restore the temporary view; later definitions update the same
+   view. Closing that view does not delete the report or stop the agent.
+5. Have the agent write `report.md` in its per-task directory with original post
+   URLs, collection limits and failed sources. Show progress and the output
+   location in the app. No report-history UI or scheduled execution yet.
+
+Following the user's WebSocket question, the proposed transport is a persistent
+`codex app-server --listen ws://127.0.0.1:4500` connected to the Node backend,
+with dynamic tools handled by that backend. WebSocket transport is currently
+experimental in the official documentation. Native browser WebMCP is not a remote
+MCP endpoint: reuse application operations rather than assuming that host Codex
+can directly invoke a user's browser tools. No externally exposed Codex socket
+is necessary.
+
+## Decisions
+
+- Confirmed: use home Codex, rather than a separate OpenAI API integration.
+- Confirmed: report artifacts are host Markdown files written by the agent.
+- Prototyping: resident app-server over loopback WebSocket, using the existing
+  Codex login and model `gpt-6-astra`. No NixOS service migration in this step.
+- Configure a dedicated report root and Codex authentication store. Preserve
+  refreshed authentication for the service; do not put credentials in prompts
+  or copy application secrets into the child environment.
+- Keep manual execution bounded and cancellable. After restart, unfinished
+  conversations restore as interrupted. The next user message resumes the same
+  Codex thread after stopping any surviving orphan turn. No automatic rerun or
+  durable job queue is added.
+
+## Conversation workspace
+
+The next iteration places a persistent chat beside the horizontally scrollable
+deck. The browser displays user messages, public Codex agent messages and tool
+activity from app-server events. Each follow-up continues the existing thread
+and supplies the deck currently open in that browser. Internal reasoning is not
+part of this transcript.
+
+The agent can list and inspect saved decks within the selected account scope,
+then reuse their columns in a temporary view. Saved definitions remain unchanged
+until the user saves a view. Existing manual creation, selection, column editing
+and saving stay available alongside the chat.
+
+`list_lists(connectionId)` also exposes the manual editor's Twitter and Mastodon
+list catalogs. Discovery is read-only and checks the selected connected account
+before contacting either provider. Returned list IDs can be used directly in
+list-column sources. Discovery and post retrieval share the per-turn budget of
+12 upstream calls, including failures. Twitter requests up to 100 entries through
+the existing catalog service; discovery has no pagination yet.
+For Twitter, the agent prefers the selected connected account named `account2`
+for new columns and retrieval, resolving its ID through `list_connections`.
+It uses another selected account when `account2` is unavailable, lacks access
+(for example to a private list), or the user explicitly requests it. Existing
+columns retain their account bindings.
+
+The default agent instructions require this discovery at the start of research,
+before planning new searches. Relevant existing lists become candidate sources;
+their posts are retrieved through the regular column tool. Catalogs already read
+in the conversation can be reused, and explicit user instructions take priority.
+
+A conversational turn need not produce a research report: discussing a query or
+editing a deck is a valid completed turn. Reports, when requested, remain host
+Markdown files. SSE snapshots include the conversation and latest generated
+deck so reopening a page restores both without restarting work or polling.
+
+The chat header can reset an idle conversation. The next message starts a new
+Codex thread while retaining the browser's current deck as context. Reset pushes
+an empty conversation to every subscriber, preserves host reports and does not
+delete deck definitions. Active turns must be stopped first; a stale reset must
+not clear a newer conversation started on another device. The history selector
+can reopen previous conversations while idle, restoring the generated deck (or
+last supplied deck context), selected accounts and citations. Selection is shared
+through SSE. Stale selections are rejected just like stale resets.
+
+`research_sessions` stores the full public conversation snapshot and summary
+metadata; `research_state` stores the selected conversation, including an explicit
+blank selection for new chat. State is written before starting Codex and before
+publishing updates. DB write failures stop research and surface a save error.
+On restore, formerly active sessions become interrupted. `thread/resume` restores
+Codex's persisted dynamic tools. Recovery suppresses old turn notifications and
+tool calls, interrupts a still-running old turn, then starts the new message.
+
+## Markdown and source navigation
+
+Assistant messages use react-markdown with remark-gfm. Public tool messages and
+user input remain plain text. Markdown links retain their original URLs; a
+regular click on a known post navigates within the deck, while modified clicks
+and unrelated URLs retain external navigation.
+
+Successful agent post fetches capture the exact column definition and a public
+post projection in the saved conversation. The projection excludes raw
+provider responses, HTML, media and account credentials. References are retained
+across turns, updated per source/account/post identity and retained in chat history.
+The agent is instructed to cite exact returned post URLs in Markdown.
+
+Navigation prefers a loaded card, then a workspace column with the same source
+and connection. Missing sources open a one-column temporary deck. An unloaded
+reference is displayed as a labeled research-time post without altering the
+query cache or pagination. Cards receive focus, scroll into view and briefly
+highlight; reduced-motion settings are respected and sensitive content stays
+collapsed.
+
+## Verification
+
+- Protocol tests for dynamic-tool requests, failures, cancellation and process
+  exit, with no real model usage in ordinary tests.
+- Tool tests for selected connection scope, source validation, pagination limits
+  and temporary-only deck creation.
+- Browser test: start task, show generated temporary deck, retain manual save,
+  display progress and completion or failure.
+- Opt-in real home Codex run: retrieve real posts and verify a readable report
+  exists at the reported host location with original-source links.
+
+## Deployment boundary
+
+The currently used UM790-Pro runs the development server. The existing dotnix
+Twitter Lite service is configured on B450M-Pro4 with obsolete options and a
+different public route. Do not apply that configuration to this task implicitly.
+Service migration and backup scheduling need a concrete host configuration;
+they are separate from validating this first agent workflow.
+
+## References
+
+- [Codex App Server](https://learn.chatgpt.com/docs/app-server)
+- [Codex authentication](https://learn.chatgpt.com/docs/auth)
+- [Existing WebMCP contract](../webmcp-prototype.md)
+
+## Web-to-resident-Codex examples inspected
+
+Research on 2026-09-24; README and implementation inspection only, not runtime
+validation or adoption of these projects.
+
+- [Redex](https://github.com/ladnir/redex/tree/a8032c49d1c9cc79db9679ad06b94a72defe3ec7):
+  its Python HTTP/SSE bridge connects to a standalone Codex app-server through
+  WebSocket. `src/redex/app_server.py` initializes the connection and sends
+  `thread/resume` then `turn/start`; `src/redex/bridge.py` has a long-lived
+  `LiveEventHub` separate from browser SSE connections. Desktop shared-runtime
+  integration in this project's README requires its Codex fork; standalone
+  WebSocket usage does not. The bridge suppresses the Origin header on its
+  server-side connection because Codex rejects browser-style Origin headers.
+- [Pedregoneric/codex-webui](https://github.com/Pedregoneric/codex-webui/blob/5cbc718004c77657812f7151ae708e68cc6b398c/server.js):
+  a small personal/Tailscale-oriented example. One `CodexBridge` owns a long-lived
+  stdio child. Browser SSE close removes that subscriber, without killing Codex;
+  gateway shutdown does kill the child. This demonstrates that browser lifetime
+  independence is not itself a WebSocket feature. Its authentication is separate
+  from the existing Tailscale identity boundary used by Twitter Lite.
+- [OpenAI's Codex Web architecture](https://openai.com/index/unlocking-the-codex-harness/):
+  the February 2026 engineering article describes HTTP/SSE from browser to
+  backend, and a worker maintaining a long-lived app-server connection. The
+  backend owns task state so browser disconnection does not stop work. This is an
+  architectural reference, not evidence of today's exact hosted implementation.
+- [nathan-chappell/codex_web_ui](https://github.com/nathan-chappell/codex_web_ui/tree/79be149c427040d7fbb94246d841f705ab53ce9e):
+  the launcher starts a detached app-server on a private Unix socket. Its
+  TypeScript bridge performs a WebSocket upgrade over that socket. Browser
+  commands use HTTP RPC and events use SSE. Disconnecting an SSE subscriber does
+  not stop the bridge or Codex. Relevant files: `bin/codex-web-ui.js`,
+  `server/codexBridge.ts`, `server/appApi.ts`, `server/eventHub.ts`.
+- [seo-rii/codex-webui](https://github.com/seo-rii/codex-webui/tree/2619d78c55c6095aa8b9a7a1412fd0c7abf5e564):
+  the Rust gateway connects directly over Unix-socket WebSocket in current code,
+  despite older docs mentioning a proxy. It separates browser disconnect from
+  gateway-restart handoff and normal shutdown. Request-ID deduplication avoids
+  executing replayed mutations twice. Its dynamic-tool response handling is a
+  useful reference, but we did not find custom SNS-style tool registration to
+  reuse. Relevant files: `backend/src/codex_app_server.rs`,
+  `backend/src/ws_transport_support.rs`, `backend/src/runtime_request_support.rs`.
+
+The implementation should distinguish three events: browser disconnection,
+Twitter Lite backend restart, and Codex process restart. A WebSocket connection
+alone does not guarantee recovery across any of them. Agent tool requests should
+be handled by the backend so research can continue without the initiating tab.
+
+## Prototype verification
+
+- Implemented a loopback WebSocket client, background run controller, bounded
+  account/deck/post tools, and a sidebar research dialog. No schema migrations.
+- 261 unit/component tests passed (one existing opt-in live test skipped).
+- Relevant Playwright coverage: 17 desktop cases, 6 mobile WebMCP cases, and
+  11 mobile deck/research cases passed. The new sidebar action initially
+  overlapped another mobile control; it now uses the existing compact pattern.
+- Typecheck, lint, knip, and production build passed.
+- A real Codex 0.156.1 / gpt-6-astra run started from the browser. The browser
+  was closed, reopened, and observed the task continuing to completion.
+  Local verification supplied the trusted Serve identity and origin headers;
+  the tagged host cannot authenticate as the owner through Serve itself.
+- Codex generated two temporary columns, retrieved 20 Twitter posts and zero
+  Mastodon results, and wrote a Japanese report with original post links and
+  explicit limits on interpreting the empty Mastodon search. The report is
+  under the ignored `.data/research/<run ID>/report.md` directory.
+- Reopening the run's generated deck produced two temporary columns. Saved
+  user decks were not replaced, and the report was not inserted into SQLite.
+- After replacing polling with SSE, six desktop/mobile E2E cases passed for
+  initial snapshots, reconnect snapshots, owner checks and the unconfigured UI.
+- A second real run pushed a one-column deck to the page. After closing and
+  reopening the browser, the latest deck restored automatically and grew to two
+  columns through SSE. Codex then completed `report.md`. Same-view updates,
+  preserving saved decks, ordered asynchronous updates and late start responses
+  are also covered by component/controller tests.
+- The actual Codex launcher was restarted successfully with configured MCP
+  servers disabled; WebSocket `config/read` confirmed all seven disabled. Nix
+  wrapper config overrides must precede the `app-server` subcommand.
+
+## Conversation workspace verification
+
+- 270 unit/component tests and 40 desktop/mobile Playwright cases passed.
+  Typecheck, lint, knip and production build passed.
+- Browser coverage includes conversation/deck restoration from SSE snapshots,
+  manual deck editing and saving, narrow viewports and existing WebMCP tools.
+  Readiness checks wait for usable controls rather than network idleness because
+  the event stream intentionally stays connected.
+- A real three-message Codex conversation called `list_decks`, reused a manually
+  created column from the current-deck context, and edited that column after the
+  browser was closed and reopened. The app-server thread ID and generated deck
+  ID stayed unchanged; the deck advanced from version 1 to 2.
+- The live database had no saved decks, which Codex reported correctly. Saved
+  deck discovery/reuse with populated records is covered by isolated tool tests.
+  The live check did not add or change saved deck records or create a report.
+
+## List discovery verification
+
+- 279 unit/component tests passed (one opt-in live test skipped), with typecheck,
+  lint and production build passing. Tool tests cover both platforms, selected
+  account scope, empty lists, upstream failures, shared request limits and using
+  discovered IDs to create and fetch list columns.
+- A real browser-initiated Codex run discovered 54 lists for Twitter account1
+  and zero for Mastodon, then opened a temporary list column. Reopening the page
+  restored that deck and the conversation. Twitter account2 initially returned
+  an upstream `Dependency: Unspecified` error; a direct retry through the same
+  Bird catalog API returned three lists. A follow-up message in the same Codex
+  conversation then retried `list_lists` successfully and also reported three.
+
+## New-chat verification
+
+- 284 unit/component tests and eight desktop/mobile research E2E cases passed,
+  along with typecheck, lint and production build.
+- A real Codex check on a separate development server reset a completed chat
+  across two browser pages, cleared the draft and retained the current deck.
+  The next message used a different thread ID, contained only the new user
+  message and received the current deck context. The separate server avoided
+  interrupting research already running in the public workspace.
+
+## Markdown citation verification
+
+- The full suite passed 306 unit/component tests, with one opt-in test skipped.
+  Typecheck, lint, knip and production build passed. Follow-up card tests verify
+  re-scrolling when a captured post is replaced by its loaded feed result.
+- 42 desktop/mobile E2E cases passed, including Markdown tables and emphasis,
+  navigating to an offscreen column, captured-post display, focus/highlight,
+  accessibility and existing manual deck/WebMCP operations.
+- A real Codex run on a separate development server fetched 20 Twitter posts,
+  cited two in a Markdown response, and navigated from a citation to its card.
+  Closing and reopening the page preserved working citation navigation.
+- react-markdown 10.1.0 and remark-gfm 4.0.1 were added with the user's approval.
+  The pnpm dependency hash was updated and the x86_64-linux Nix package built.
+
+## Conversation persistence verification
+
+- SQLite repository tests reopen file-backed databases and verify conversation,
+  deck, account, citation and active-selection restoration, plus transaction rollback.
+- Runner tests recreate the service against the same database, resume its thread,
+  reject stale history switches, interrupt orphan turns and reject late orphan
+  events. Failed writes prevent new execution or stop further tool calls.
+- 52 desktop/mobile E2E cases passed. The final focused research suite passed
+  120 tests; typecheck, lint, knip and Nix packaging passed.
+- An actual Codex run captured 20 Twitter posts. A fresh Node process restored
+  that conversation and used the same Codex thread and dynamic tools to add a
+  second column, retaining all citations. Separate desktop/mobile browser
+  contexts restored the saved chat, navigated citations, shared history selection
+  through SSE and retained blank-new-chat selection across reload.

docs/plans/2026-09-24-mastodon-and-shared-decks.md

@@ -0,0 +1,141 @@
+# Mastodon複数アカウント・デッキ端末間共有の実装計画
+
+状態: 機能実装・検証済み。2026-09-24に現行コード・公式仕様・Elkを調査。Drizzle ORM 0.45.3＋Drizzle Kit 0.31.11＋better-sqlite3 13.0.3と、Tailscale Serveの本人情報による利用制限を採用。実機確認の範囲と運用上の引き継ぎは以下に記録する。
+
+## 実装・検証記録（2026-09-24）
+
+- T0〜T6の機能を実装。ユーザーのブラウザでTailscale経由のMastodon認可・callback復帰を確認。
+- サーバーはタグ付き端末なので、本人loginはSelf.UserIDから推測せず実際のユーザー情報で設定。タグ付き端末からの本人情報なしアクセスは引き続き拒否。
+- 単体・統合202件、Playwrightの共有デッキ／WebMCP／アクセス制限38件と接続管理／callback4件を検証。
+- 別ブラウザから保存済み認可を再利用し、実Mastodonを20件→40件へページ送り。同じ一時ビューでTwitter20件を取得。ブラウザエラーなし。確認用ビューは永続保存していない。
+- Nixパッケージ単体で起動・3マイグレーション・DB書込・バックアップを確認。依存hash更新済み。
+- 実アカウントでの接続はMastodon1件。同一インスタンスの複数アカウント・別インスタンス・再接続・解除・401競合・429はテストで検証し、実アカウントを増減させる破壊的試験は行っていない。
+- NixOSサービスの実機デプロイは行わず、モジュール・永続ディレクトリ・credential設定と運用手順を用意。試用用devサーバーを稼働。
+
+## 前提と到達点
+
+- 自分専用。自宅の1台でアプリを稼働し、複数の自分の端末からTailscale ServeのHTTPSで利用する。
+- 同じデッキにTwitterとMastodonを並べ、各カラムに接続アカウントを固定できる。
+- 端末AでOAuth接続とデッキ作成を済ませれば、端末Bでも同じ接続・デッキを使える。
+- デッキ定義・カラム順序・接続一覧を共有する。開いているデッキ、スクロール位置、編集中のフォームは端末ローカルとする案。
+- AIが調査ごとに作るデッキは一時ビューとして開き、必要なものだけ保存済みデッキにする。一時ビューは端末間共有の対象外。
+- 投稿の収集アーカイブ、AIサマリー、オフライン編集、他人との共同編集はこの増分に含めない。
+
+## 推奨構成
+
+```mermaid
+flowchart LR
+  A[PC / スマホ] --> B[Tailscale Serve HTTPS]
+  B --> C[Twitter Lite / localhost]
+  C --> D[(SQLite / 自宅のローカルディスク)]
+  C --> E[Twitter Safe Relay]
+  C --> F[Mastodon各インスタンス]
+```
+
+SQLiteを採用する案。端末が増えても、各端末がSQLを実行するのではなく、同じアプリサーバーへアクセスする。デッキ設定とOAuth情報の小さな更新には単一サーバーのSQLiteで始められると判断する。DBファイルを端末間コピーしたり、NAS上のファイルを複数サーバーから直接開いたりしない。
+
+| 候補 | 今回の評価 |
+| --- | --- |
+| SQLite | 推奨。別DBサービス不要。ローカルディスク、短いトランザクション、マイグレーション、復元試験を用意する |
+| PostgreSQL | 複数アプリサーバーや大量の並列収集へ進む時に再評価。現時点では運用対象が増える |
+| ブラウザDB＋同期基盤 | 採用しない。今回必要なのはオンラインで同じサーバー状態を読むこと。オフライン同期エンジンを導入する必要はない |
+
+SQLiteは同時書き込みが1つという制約がある。複数サーバー・高い書き込み並列度ではclient/server DBを検討する。[SQLiteの用途](https://www.sqlite.org/whentouse.html)
+
+## 認証と保存の境界
+
+アプリの利用許可とSNSアカウントのOAuthを分ける。最初は単一の私用ワークスペースとし、アプリ内のユーザー登録・パスワード管理は作らない。
+
+Tailscale Serveの本人情報を利用する場合は、自分のloginを許可し、バックエンドをlocalhostに束縛する。現在の試用用 `0.0.0.0` 起動を、そのまま本人情報ヘッダーを信頼する本番構成に持ち込まない。タグ付き端末のアクセスには通常のユーザー情報ヘッダーが付かないため、最初の実機確認に含める。Serveからの経路、利用許可、変更リクエストのOrigin検証を共通化する。[Tailscale Serve identity headers](https://tailscale.com/docs/features/tailscale-serve#identity-headers)
+
+OAuth callbackは固定のHTTPS URLにする。認可後に戻る主体はブラウザなので、その端末がtailnetへ到達できる構成を実機検証する。callbackのためにFunnelでアプリ全体を公開する方針は取らない。
+
+## 保存モデル案
+
+| 保存対象 | 主な内容 |
+| --- | --- |
+| `decks` | ID、名前、revision、更新日時 |
+| `deck_columns` | ID、deck ID、並び順、connection ID、名前、platform固有のsource JSON |
+| `connections` | ID、platform、接続先origin、外部アカウントIDまたはrelay profile参照、表示名、接続状態 |
+| `connection_credentials` | connection ID、暗号化したアクセストークン、鍵の識別子。通常の接続一覧とは分離 |
+| `oauth_apps` | インスタンスorigin、callback・scope構成、client ID、暗号化したclient secret |
+| `oauth_attempts` | 短時間有効なstate、開始ブラウザとの束縛、接続先、PKCE verifier、期限、一度限りの消費状態 |
+
+単一利用者なので、この段階ではusers/organizations/roles等のテーブルを作らない。
+
+カラムの現行 `profileName` を `connectionId` へ変更する。Twitterはconnectionにrelay profile名を保持し、トークンは引き続きrelay側で管理する。Mastodonは接続インスタンスoriginと `verify_credentials` のaccount IDで重複を判定する。表示handleを主キーにしない。同じインスタンスに別アカウントを追加でき、再接続時には既存のconnection IDを維持する。
+
+DBには秘密を暗号化して保存し、暗号鍵はDB外の実行時credentialファイルから読む。鍵やtokenをNix store・Git・ブラウザ・SSR payload・WebMCPに含めない。DBと鍵の両方が揃って復元できる手順を用意する。
+
+## PR単位のタスク
+
+| ID | タスク | 依存 | 完了条件 |
+| --- | --- | --- | --- |
+| T0 | 実行環境とアクセス経路を固定 | なし | 本番HTTPS origin/callback候補を決め、PC・スマホから同じ利用者として接続。Serve以外からのヘッダー偽装を許さない構成を確認。対象Mastodonのバージョン・OAuthメタデータも調べる |
+| T1 | SQLiteと永続ディレクトリを導入 | T0 | 現行Node/Nixで動くdriver・migration方式を実証。`StateDirectory`等でDBを永続化。再起動・アプリ更新後も残り、バックアップから復元できる。依存追加時はflakeのpnpm hash更新まで行う |
+| T2 | connectionモデルへTwitterを移行 | T1 | relay profile一覧から接続を作り、カラム・取得・キャッシュ・ページ送りがconnection IDを使う。2つのTwitter接続を混ぜずに並列表示。不明・削除済みの接続はエラーとして残す |
+| T3 | デッキをサーバー保存し端末間共有 | T1,T2 | PCで作ったデッキが別ブラウザコンテキストに表示。revision競合で上書きを拒否。WebMCPも同じ保存処理を使う。既存localStorageからの明示インポートを提供し、重複取り込みと既存DBの破壊を防ぐ |
+| T4 | Mastodon OAuthとトークン保管 | T0,T1,T2 | 接続先登録→認可→callback→本人確認→暗号化保存。同一インスタンス2アカウント・別インスタンス・再接続・解除が動く。拒否/state不一致・期限切れ・再利用を検証 |
+| T5 | Mastodon取得と投稿正規化 | T4 | ユーザー投稿・リスト・ハッシュタグのカラムを実装し、全文検索を別の能力として扱う。CW・sensitiveメディア・boost・HTML本文を安全に表示。元投稿URLと取得インスタンスのローカルIDを区別 |
+| T6 | 複数接続UIとWebMCPを統合 | T3,T5 | 接続管理から追加・再接続・解除。カラムは接続に応じたsourceを選べる。Twitter/Mastodonを同じデッキに並べ、AIも接続一覧を発見して作成・取得できる |
+| T7 | 2端末・障害・運用の通し検証 | T3,T4,T6 | 端末AのOAuth接続を端末Bで再認可せず利用。編集競合・接続失効・429・再起動・DB復元の検証。UI/API/WebMCP/ログにトークンが出ないことを確認 |
+
+各PRに必要な単体・統合テストを含める。T7までテストを先送りしない。
+
+推奨順序: `T0 → T1 → T2 → T3` で既存Twitterの端末間共有を先に完成。T3とT4は保存モデル確定後に並列作業可能。その後 `T4 → T5 → T6 → T7`。
+
+### T3: 同期の具体的な範囲
+
+- 保存済みデッキはDBを正本にし、クライアントキャッシュへ読み込む。保存中・保存失敗を区別し、サーバーが受理していない編集を「保存済み」と表示しない。
+- デッキ単位のrevisionを比較して、名前・カラム・順序を1トランザクションで更新。同じrevisionへの2回目の更新は競合として返す。
+- 初期案はフォーカス復帰時と表示中の軽い定期再取得。SSE/WebSocket/CRDTは導入しない。編集中の内容は自動更新で消さず、競合時に再読み込みを案内する。
+- 選択中デッキIDは端末ローカル。PCで別デッキを開いたためにスマホの画面まで勝手に切り替わる挙動を避ける。別端末から削除されたデッキを表示中なら、残りのデッキへ移動し通知する。
+- `get_deck`等はrevisionを返し、既存デッキを置換する `set_deck` は期待revisionを指定する。投稿読取ツールにはDB内の秘密を含めない。
+- localStorageインポートは一度限りの移行機能。DB完成後にlocalStorageへ書き戻す二重運用はしない。
+
+### T3/T6: AIが作る一時ビューと保存
+
+- 一時ビューと保存済みデッキは同じカラム定義・描画・接続参照を使う。別のプラットフォーム抽象や投稿取得経路は作らない。
+- AIによる新規作成は既定で一時ビュー。タブ内のメモリで保持し、DBへは書かない。複数の一時ビューを切り替えられ、UIに「一時」と「デッキとして保存」を表示する。再読み込みやタブを閉じると失われることを画面で明示する。
+- 保存操作は新規デッキをサーバーに作成する。成功後にその一時ビューを保存済みデッキへ置き換え、他の端末にも見えるようにする。失敗時は一時ビューを残し、再試行できる。二重クリック・同じ保存要求の再送で重複デッキを作らない。
+- 保存済みデッキから一時コピーを作って、AIが検索語・カラムを組み替えて試せる。元デッキは変更しない。初期実装では保存先は新規デッキとし、元デッキへのマージ機能は作らない。
+- WebMCPは一時ビューの作成・読取・編集・破棄と、明示的な保存を扱う。既存の保存済みデッキ更新には引き続き期待revisionを要求する。ツールの結果は一時か保存済みかを明示し、保存先を推測させない。
+- 一時ビューにも通常のカラム数制限と接続の検証を適用する。投稿内容や認証情報の保存は行わず、保存するのは名前・カラム・検索条件等の定義のみ。
+- 検証: AIの一時作成でDB件数が増えない、ページ送りできる、複数ビューを切り替えられる、保存後は別ブラウザから取得できる、保存失敗で内容を失わない、保存再送が重複しない、一時コピーの編集で元デッキを変更しない。
+
+### T4: OAuthの具体的な範囲
+
+- 初期対象はMastodon 4.3以降を提案。Authorization Code＋PKCE S256とstateを使い、旧版互換の分岐は作らない。Mastodonはconfidential clientを前提にしているためclient secretも必要。[OAuth仕様](https://docs.joinmastodon.org/spec/oauth/)
+- `POST /api/v1/apps`でインスタンスごとに登録。callback・scope構成と合わせて再利用する。[アプリ登録API](https://docs.joinmastodon.org/methods/apps/)
+- 閲覧用scopeに絞る。候補は `read:accounts read:statuses read:lists read:search`。実装したカラムのAPI要件と照合する。同一インスタンスへの別アカウント追加は `force_login=true` を使う。[OAuth API](https://docs.joinmastodon.org/methods/oauth/)
+- state/verifierは開始ブラウザに束縛し、期限付き・一度限りで検証。token交換と `verify_credentials` はサーバーで実施し、戻り先URLにtokenを含めない。[本人確認API](https://docs.joinmastodon.org/methods/accounts/#verify-account-credentials)
+- 接続解除・401からの再接続を実装。通常のMastodon tokenは自動失効しないため、汎用refresh token基盤を先に作らない。[OAuth tokens](https://docs.joinmastodon.org/api/oauth-tokens/)
+- 接続先入力をサーバーがfetchするため、origin・DNS解決先・redirectを検証する。初期は設定したインスタンスの許可リストに限定する案。OAuthやページ送りを家のLANへの汎用HTTP転送にしない。
+
+### T5/T6: プラットフォーム抽象化
+
+- 共通化するのはconnection参照、取得結果、エラー、継続ページの境界。全SNSへTwitterのTop/Latestや検索構文を要求しない。
+- source schemaはplatformとkindで分岐。MastodonのリストID・アカウントIDは接続インスタンスの文脈を持つ。接続変更時はリストを選び直す。
+- 投稿の同一性にはcanonical URIを使い、取得先のローカルstatus IDはAPI操作用に保持する。boostのwrapperと元投稿を区別する。
+- HTML本文は許可する要素・URLを制限して処理。CW・sensitiveを初期表示で尊重し、全文を単に既存のtextへ詰めない。
+- Mastodonの全文検索はインスタンスの検索環境次第。明示的な検索エラーと正常な空レスポンスを区別する。ただし4.5.3では検索バックエンド無効時も空配列を返すため、0件だけで全文検索への対応可否は判定できない。画面にも検索範囲が接続先の設定に依存することを表示する。[検索API](https://docs.joinmastodon.org/methods/search/)、[4.5.3の検索処理](https://github.com/mastodon/mastodon/blob/v4.5.3/app/services/search_service.rb)
+- ホームタイムライン、通知、Streamingは最初のカラムが動いてから別タスク。既存の調査カラムと手動ページ送りを先に完成する。
+
+## Elkから参考にする範囲
+
+調査対象commit: `8a90074fca9f316a0c71f7249b1a31f21829a987`。
+
+- インスタンス別のOAuth app登録・再利用: [server/utils/shared.ts](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/server/utils/shared.ts)
+- 認可URLと複数アカウント追加: [server/api/[server]/login.ts](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/server/api/%5Bserver%5D/login.ts)
+- アカウント本人確認・インスタンスと表示ドメインの区別: [app/composables/users.ts](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/app/composables/users.ts)
+
+ElkはOAuth app情報をサーバーに持つが、ユーザーtokenはcallback URLを経由してブラウザへ渡し、IndexedDBの `elk-users` に保存する。今回のサーバーtoken保管・端末間同期は別実装にする。[callback](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/server/api/%5Bserver%5D/oauth/%5Borigin%5D.ts)、[ユーザー保存](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/app/plugins/0.setup-users.ts)
+
+Elkのグローバルなcurrent accountの切り替えも、そのままカラムごとの並列取得には使わない。各カラムはconnection IDから独立したリクエスト文脈を得る。[Mastodonクライアント](https://github.com/elk-zone/elk/blob/8a90074fca9f316a0c71f7249b1a31f21829a987/app/composables/masto/masto.ts)
+
+## 後続タスク
+
+- Bluesky: 接続・認可方式を別途調査し、MastodonのOAuth仕様を流用しない。
+- Threads: アプリ登録・利用可能な読み取り権限・検索範囲を実機確認してからスコープを決める。
+- Nostr: relay集合・署名/鍵の扱いを別に設計し、OAuthに無理に合わせない。
+- AIサマリー/並列収集: 投稿snapshotと取得日時・クエリ・接続文脈を保存する別のデータモデルを追加する。今回は設定同期のDBに投稿アーカイブを混ぜない。

docs/plans/2026-09-28-shadcn-ui.md

@@ -0,0 +1,54 @@
+# shadcn workspace migration
+
+## Target
+
+Replace the custom workspace UI with the Base UI version of shadcn sidebar-09
+at commit 98a1fe67b439324ddc857f47fbdce056600a4329. Preserve its icon rail,
+contextual second sidebar and SidebarInset. Adapt the rail to research chat and
+deck management, keeping the research panel mounted so SSE state remains live.
+On small screens, use the sidebar Sheet and keep all actions reachable.
+
+Use official MessageScroller, Message, Bubble and Marker for the existing Codex
+conversation. Keep transport, history, retry, stop, account selection, Markdown
+and citation navigation. Use shadcn primitives for forms, dialogs, menus and
+post metadata throughout the app. Use Tailwind v4 and shared shadcn semantic
+tokens; remove legacy control styles that override primitives.
+
+Install @shadcn/lint with an executable design-token policy alongside Biome.
+Update README and Nix dependency hash as needed.
+
+## Verification
+
+- Typecheck, Biome, design lint, unit suite, production build, unused-code check.
+- Browser integration suite: decks, source editing, connections, conversation,
+  citation navigation, menus and keyboard focus.
+- Render desktop plus 320/375/414/768 px: rail collapse, mobile Sheet, independent
+  column scrolling, chat composer visibility, no document horizontal overflow.
+- Inspect screenshots and run Axe on relevant states.
+
+## Status
+
+Completed on 2026-09-28.
+
+- SidebarProvider, nested icon/context Sidebars and SidebarInset now implement
+  the referenced sidebar-09 structure; the mobile Sheet keeps its content mounted.
+- Research state and deck-dialog drafts live above the responsive shell. Closing
+  or resizing the sidebar preserves drafts, selected accounts and retry identity.
+- MessageScroller, Message, Bubble/BubbleContent, Marker/MarkerContent, InputGroup
+  and Collapsible replace the chat UI. Markdown list markers and headings remain
+  visible after Tailwind's reset; citation highlighting uses theme tokens.
+- Forms, dialogs, dropdown menus, avatars, badges and empty states use Base UI
+  shadcn components. No backend transport, storage or access contracts changed.
+- @shadcn/lint runs in pnpm lint and rejects raw palette colors. Nix dependency
+  hash and README/deck docs are updated.
+
+Verification: 336 unit tests passed (one explicit live-relay test skipped), all
+56 desktop/mobile E2E tests passed. After the final isolated chat styling fixes,
+all 10 research E2E tests and 22 related unit tests passed again. Typecheck,
+Biome/design lint, Knip, production build and the Nix package build passed.
+Browser checks covered 320/375/414/768px, rendered chat and post screenshots,
+Axe, dialog focus restoration, breakpoint draft preservation and closed-sidebar
+SSE deck updates. Automated browser tests use mock relay/research data.
+A subsequent dev-server smoke check through the Tailscale HTTPS URL confirmed
+the real relay displayed 14 posts across six columns without UI alerts.
+No production deployment was performed.

docs/research-decks.md

@@ -0,0 +1,141 @@
+# Research decks
+
+## Workspace
+
+`/deck` renders the research workspace; `/` is the integrated daily home. A collapsible shadcn/ui
+sidebar based on `sidebar-09` shares its navigation rail with the article reader
+at `/inbox`. Within Research, it switches between research chat and deck management.
+Deck management switches decks and adds columns. The avatar at the bottom of the
+shared sidebar opens connected-account management in a dialog from either workspace.
+Up to six ordered columns scroll independently; only the active deck
+mounts and fetches its columns. On mobile, the sidebar opens as a sheet.
+shadcn Base UI dialogs handle creation and editing, with Escape and focus
+restoration. Column menus offer editing, ordering, and deletion; refresh and
+pagination are manual. The adjacent chat uses MessageScroller, Message, Bubble,
+Marker and InputGroup with the existing research backend.
+
+Twitter and Mastodon can appear together, with different accounts in each
+column. Original-post links open their source site. Separate reader, search,
+list, user-profile, and conversation pages are not provided.
+
+## Definitions and connections
+
+`src/features/decks/model.ts` validates deck IDs, titles, ordered columns, and
+unique column IDs within each deck. Each column contains `id`, `title`,
+`connectionId`, and a platform-specific `source`.
+
+| Platform | Source kind | Conditions |
+| --- | --- | --- |
+| Twitter | `search` | Native `query`, `product` (`Top`/`Latest`), `following` |
+| Twitter | `user` | `target`: handle or X/Twitter profile URL |
+| Twitter | `list` | `target`: numeric list ID or X/Twitter list URL |
+| 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 | `list` | `target`: numeric list ID for the connected account |
+| Mastodon | `hashtag` | `target`: tag without `#`, containing letters, numbers, or underscores |
+
+`connectionId` is the account binding, distinct from a deck's name. Twitter
+connections resolve to profiles discovered from the configured relay.
+Mastodon connections identify accounts by instance origin and remote account
+ID; OAuth tokens stay encrypted on the server. The connection manager supports
+adding, reconnecting, and disconnecting Mastodon accounts. See
+[storage and OAuth](storage-and-oauth.md) for configuration and recovery.
+
+The editor discovers lists for the selected account. Changing accounts clears
+target-based conditions so an instance-local ID is not reused accidentally.
+Searches can retain conditions between accounts on the same platform. There is
+no global account selector or fallback to another account. Missing or
+disconnected bindings produce errors.
+
+The complete source and connection ID form query-cache identity. Equal
+conditions on the same connection share pages; different connections retain
+separate results and cursors. Deck synchronization does not poll post feeds.
+
+## Implementation boundaries
+
+- `column-editor.tsx` owns the title, connection binding, and final submission.
+- `column-source-editor.tsx` dispatches by platform and defines rebinding rules.
+- `twitter-source-editor.tsx` and `mastodon-source-editor.tsx` own each
+  platform's source selection, fields, and account-specific list discovery.
+- `use-research-feed.ts` dispatches requests and keys the cache by connection
+  and source. Server functions resolve credentials and fetch upstream pages.
+- `platforms/types.ts` defines normalized `ResearchPost` and `ResearchPage`
+  records consumed by cards and column tools, without raw provider responses
+  or credentials.
+
+Twitter posts use `twitter:<id>` keys. Mastodon posts use canonical status URIs
+for keys and retain the fetched instance's native status ID separately. Boosts
+keep the wrapper identity and identify the boosting account. Mastodon HTML is
+sanitized on the server; cards honor content warnings and sensitive media.
+
+## Saved decks and temporary views
+
+SQLite is authoritative for saved definitions. Creating a named deck through
+the UI saves it; subsequent saved-deck edits and deletions use a revision check
+in a transaction. A stale revision is rejected. Save failures remain visible
+and do not report unsaved edits as persisted.
+
+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
+`twitter-lite-active-deck`; selecting a deck does not switch another device's
+view. Deleting the active deck selects a remaining one. When none remain, the
+app opens an empty temporary view.
+
+WebMCP-created views are temporary by default. Temporary copies of saved decks
+also remain in this tab's memory. Editing them does not write to SQLite. The
+explicit save action replaces a temporary view with a shared saved deck,
+preserving its ID for idempotent retries. Failed saves retain temporary
+content. Temporary views disappear on reload or navigation, including OAuth
+redirects. Only definitions are saved: posts, cursors, and scroll positions
+are not archived.
+
+Research chats separately retain the agent-generated deck and last supplied
+deck context. Reopening a saved chat reconstructs a temporary view, including
+on another device or after a server restart. Chat citations retain a limited
+post projection for source navigation; this does not persist the deck's feed
+cache, pagination cursors, scroll positions or unsent manual edits.
+
+The UI offers an explicit, one-time import of valid version-2 data from
+`twitter-lite-research-deck` in localStorage. It resolves old relay profile
+names to connection IDs and creates new saved deck IDs transactionally. A
+server marker prevents repeated imports; different content after the first
+import is rejected. The browser copy is removed only after success. Invalid
+or unsupported data is left untouched. HTTP and HTTPS have separate browser
+storage, but authorized devices read the same server-backed decks.
+
+## WebMCP
+
+Use `list_connections` to discover bindings, then `set_deck` to create a
+temporary view. This example uses IDs returned by discovery:
+
+```json
+{
+  "title": "WebMCPの反応",
+  "columns": [
+    {
+      "title": "Twitter",
+      "connectionId": "twitter-connection-id",
+      "source": { "platform": "twitter", "kind": "search", "query": "WebMCP lang:ja" }
+    },
+    {
+      "title": "Mastodon",
+      "connectionId": "mastodon-connection-id",
+      "source": { "platform": "mastodon", "kind": "hashtag", "target": "WebMCP" }
+    }
+  ]
+}
+```
+
+Read the returned deck ID and call `save_deck` only when the view should be
+shared. Replacing a saved deck requires its `deckId` and `expectedRevision`;
+include every column to retain. Post loading is asynchronous and can fail
+independently of saving. See [all tool contracts](webmcp-prototype.md).
+
+## Verification
+
+Unit tests exercise source normalization, account-specific caches, OAuth,
+credential storage, revisions, import, and temporary-view behavior. Playwright
+uses an isolated SQLite database and mock relay through real server functions
+to exercise shared decks across browser contexts, editing, persistence,
+pagination, and native WebMCP. Deterministic automated tests do not require
+live SNS credentials.

docs/storage-and-oauth.md

@@ -0,0 +1,103 @@
+# Shared storage and Mastodon OAuth
+
+Personal Workspace runs as a single personal server behind Tailscale Serve. The
+backend binds to loopback. The configured Tailscale identity is an outer access
+check; a separate [owner login](login.md) is required in every deployment mode.
+Browser requests that change state must have the configured Origin. OAuth
+callbacks also pass the owner check; the browser must be able to reach the
+tailnet HTTPS address after Mastodon authorization.
+
+## Runtime configuration
+
+| Variable | Value |
+| --- | --- |
+| `TWITTER_LITE_ORIGIN` | Exact Serve HTTPS origin, without a trailing slash |
+| `TWITTER_LITE_ALLOWED_LOGIN` | Owner's Tailscale login |
+| `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_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.
+Generate it once, keep it outside Git and the Nix store, and retain it when
+updating the application. For example, with an existing private directory:
+
+```sh
+umask 077
+nix develop -c node --input-type=module -e 'import {randomBytes} from "node:crypto"; import {writeFileSync} from "node:fs"; writeFileSync("/absolute/private/credential-key", randomBytes(32).toString("base64") + "\n", {flag: "wx", mode: 0o600})'
+```
+
+The command refuses to replace an existing file. Losing the key makes saved
+SNS credentials unreadable. A separate protected backup of the key is needed
+alongside database backups.
+
+## Database and migrations
+
+Drizzle ORM 0.45.3, Drizzle Kit 0.31.11 and better-sqlite3 13.0.3 are pinned.
+The driver ships native prebuilds; dependency install scripts remain disabled.
+Both the actual Nix Node runtime and the built Nix package have been exercised
+with SQLite operations and the packaged backup command.
+
+`drizzle/` contains generated SQL and metadata. `pnpm db:generate` generates
+SQL and bundles it into TypeScript for the server. Commit both artifacts with
+schema changes. The server applies pending migrations under an immediate
+transaction before serving an authorized application request. It enables WAL,
+foreign keys and a five-second busy timeout. Deployment does not depend on a
+particular working directory or a separate migration command.
+
+Deck definitions, ordered columns, connection metadata, OAuth applications
+and short-lived OAuth attempts live in SQLite. Tokens, client secrets and
+PKCE verifiers are authenticated encrypted envelopes in separate fields.
+Their associated data binds each secret to its record and purpose. Public
+connection responses never select those fields.
+
+## Backups and restore
+
+Use the live SQLite backup API instead of copying only the main file while WAL
+is active. The destination must be an absolute path that does not already
+exist; backups are mode 0600 and pass a SQLite integrity check.
+
+```sh
+TWITTER_LITE_DB_PATH=/absolute/workspace.sqlite \
+  nix develop -c pnpm db:backup /absolute/backups/workspace-2026-09-24.sqlite
+```
+
+The Nix package exposes the same operation as `twitter-lite-backup`:
+
+```sh
+TWITTER_LITE_DB_PATH=/var/lib/twitter-lite/workspace.sqlite \
+  twitter-lite-backup /absolute/backups/workspace-2026-09-24.sqlite
+```
+
+Run it as an identity that can read the database and write the backup directory.
+On NixOS the application uses `DynamicUser`, `StateDirectory=twitter-lite` and
+mode 0700. The runtime key is passed with systemd `LoadCredential`.
+
+For restore, stop the service first. Preserve the current state directory as
+a separate recovery copy, then restore the verified backup as
+`workspace.sqlite` in a clean state directory with the service's ownership and
+permissions. Do not leave old `-wal` or `-shm` sidecars beside a restored main
+database. Restore the matching credential key separately, then start the
+service and verify decks and account access. Do not attempt to restore a newer
+schema into an older application version.
+
+## OAuth and instance support
+
+Initial support targets Mastodon 4.3+ with PKCE S256. The first configured
+instance, `https://fedi.yutakobayashi.com`, reported 4.5.3 and S256 on 2026-09-24.
+Only configured HTTPS origins with public DNS addresses are accepted; server
+requests pin the resolved address and refuse redirects.
+
+Each instance/callback/scope combination has an OAuth application. Authorization
+uses `read:accounts read:statuses read:lists read:search`, PKCE, a ten-minute
+one-use state and an HttpOnly browser-binding cookie. Tokens are exchanged and
+account identity is verified on the server. The callback URL never contains an
+access token. Same-instance accounts remain separate; reconnecting preserves
+the connection ID only for the same account.
+
+An expired token marks its connection unavailable until reconnected. Disconnect
+first revokes the token using the original OAuth application, then removes the
+local credential while retaining the connection reference used by saved decks.
+
+Search results depend on the instance's backend and indexing. A successful
+empty response does not prove full-text search is enabled: Mastodon 4.5.3 also
+returns empty status results when its search backend is disabled.

docs/superpowers/specs/2026-07-13-twitter-lite-design.md

@@ -175,10 +175,14 @@ None of these functions exposes the Bird client, arbitrary method names, arbitra
 
 ### Search Flow
 
-1. Trim and validate the raw query.
+1. Keep the raw query and structured author, period, language, content, and
-2. Append `filter:follows` when the following toggle is enabled and the operator is not already present.
+   exclusion controls in typed URL search parameters.
-3. Fetch one page with `getAllSearchResults(query, { product, cursor, maxPages: 1 })`.
+2. Compile selected controls into a deterministic advanced search expression
-4. Return normalized tweets and the next cursor.
+   using `from:`, `since:`, `until:`, `lang:`, and `filter:` operators.
+3. Trim and validate the compiled query, including its 512-character limit.
+4. Append `filter:follows` when the following toggle is enabled and the operator is not already present.
+5. Fetch one page with `getAllSearchResults(query, { product, cursor, maxPages: 1 })`.
+6. Return normalized tweets and the next cursor.
 
 Advanced X search grammar remains available because the raw query is otherwise passed unchanged.
 
@@ -207,7 +211,11 @@ The selected layout is **Focused Tabs**:
 - no content on first load;
 - results directly below the submitted controls.
 
-The User tab contains one target input and a Display button. The Search tab contains a query input, a Popular/Latest segmented control, a Following only checkbox, and a Search button.
+The User tab contains one target input and a Display button. The Search tab
+contains a query input; buttons that open inline author, period, language,
+content-type, and exclusion controls; removable active-condition chips; a
+collapsible compiled-query preview; a Popular/Latest segmented control; a
+Following only checkbox; and a Search button.
 
 Submitting a user target normalizes it to a handle and navigates to `/:handle`.
 Submitting a search updates the route's typed search parameters. Changing tabs
@@ -344,7 +352,9 @@ The work is complete when:
    target or query, following a post detail link, or manually opening a valid
    status URL.
 3. A valid handle or profile URL loads that user's posts.
-4. Search supports Top, Latest, and the follows filter.
+4. Search supports Top, Latest, the follows filter, and button-driven author,
+   period, language, content-type, reply, and repost conditions while preserving
+   raw advanced search syntax.
 5. Infinite scrolling continues cursor pages without a fixed limit and without duplicate posts.
 6. Relay credentials and Bird remain server-only.
 7. No excluded discovery or mutation feature is reachable.

docs/vitals-preview.md

@@ -0,0 +1,18 @@
+# Vitals reference preview
+
+`/vitals` recreates the Body and Environment screenshots attached to
+[Alan Shiflett’s post](https://x.com/AlanShiflett/status/2103524300158366183).
+The shared sidebar opens it as Vitals. Body categories and history, environment
+metric details, chart period/series selection, and simulated climate controls
+are interactive. Other screenshot navigation entries open a preview explanation.
+
+All scores, classifications, dates, readings, and connection indicators are
+reference/demo values, not the user's health or device data. No clinical
+assessment, data sync, or device command is performed. Obscured reference text
+remains a visual placeholder, not inferred medical content.
+
+`public/vitals/body-reference.jpg` is the post's second public image, retained
+as the anatomy illustration source and clipped in CSS. Source media:
+https://pbs.twimg.com/media/HTE4JWFWUAAnPBt.jpg
+The rest of the interface is HTML/CSS with SVG data charts. Reference-specific
+colors are scoped to `--vital-*` tokens in `vitals.css`.

docs/webmcp-prototype.md

@@ -0,0 +1,126 @@
+# WebMCP prototype
+
+## Registration
+
+The deck workspace exposes nine React-owned tools on `/` and `/deck`.
+`usewebmcp` handles native browser registration and cleanup. Tools become
+available after saved decks load. Connection discovery may still be pending;
+`list_connections` then returns `connections: null`.
+
+Registration uses `document.modelContext`; there is no polyfill or external
+MCP transport. Unsupported browsers retain the manual interface. All server
+operations use the same access controls and persistence rules as the UI.
+
+## Workspace tools
+
+| Tool | Input | Behavior |
+| --- | --- | --- |
+| `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` |
+| `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 |
+| `save_deck` | `deckId` | Explicitly persist a temporary view; an already saved deck is unchanged |
+| `select_deck` | `deckId` | Activate a view; selection remains device-local |
+| `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
+request. Saved definitions refresh on focus and while visible, except during
+editing. Replacing or deleting a saved deck requires `expectedRevision` from
+the definition being edited. A stale revision fails without overwriting the
+server. Use the UI's reload action after a conflict when a fresh definition
+is needed.
+
+`set_deck` accepts at most six columns, each with a title, `connectionId` from
+discovery, and a source. Connections must be connected and match the source
+platform. Optional column IDs preserve identity; omitted IDs are generated.
+Include every retained column: omitted columns are removed, and an empty array
+clears the view. A supplied deck ID must already exist.
+
+Twitter sources support `search`, `user`, and `list`. `platform` defaults to
+`twitter`; search requires `query` and defaults `product` to `Latest` and
+`following` to false. User/list targets accept handles or profile URLs and
+numeric list IDs or list URLs, respectively.
+
+Mastodon requires `platform: "mastodon"` and supports `search` (`query`),
+`user` (handle or instance-local account ID), `list` (account-local numeric
+list ID), and `hashtag` (tag without `#`). It does not accept Twitter ranking
+or following controls. Search availability and coverage depend on the
+instance; an empty successful result does not prove full-text support.
+
+## Mutation results and persistence
+
+`set_deck` returns `deck`, its actual `persisted` flag, and
+`posts: "loading-asynchronously"`. A new view exists only in tab memory until
+`save_deck` succeeds. Temporary views disappear on reload or navigation,
+including OAuth redirects. Saving keeps the ID, allowing an identical create
+request to be retried without duplicate decks. Failed saves keep temporary
+content; rejected updates do not replace the accepted saved definition.
+
+Successful mutations close unsaved editor forms. Deleting the active view
+selects a remaining one; deleting the last opens an empty temporary view.
+There is no tool-level deletion undo. Column requests may fail independently
+after a definition is applied or saved. Existing browser decks are imported
+only through the explicit UI import action, not through a tool side effect.
+
+## Column tools
+
+`get_column_posts` accepts `columnId`, `offset` (default 0, nonnegative integer),
+and `limit` (default 20, integer 1–50). It reads already loaded posts without a
+network request. Only columns mounted in the active view are available;
+select the view and allow it to render first.
+
+`load_more_column` accepts `columnId` and fetches or retries one continuation
+using the column's connection. Wait for initial loading or refresh to finish.
+Concurrent pagination joins the existing request. If the view or column
+changes during pagination, execution fails rather than returning results under
+the changed identity. At the end, no posts are appended and `hasMore` is false.
+
+Both return:
+
+- `column`: ID, title, connection ID, and source
+- `status`: `loading`, `ready`, or `error`, with `loading` and `error` details
+- `posts`: normalized records with original URLs, text, author, and available
+  media, quotes, content warnings, or boost information
+- `loadedCount`, `offset`, and `nextOffset` for slices of deduplicated posts
+- `hasMore`: whether the feed has an upstream continuation
+
+Continuation returns up to 20 newly appended posts. Use `nextOffset` with
+`get_column_posts` for additional already loaded records; use
+`load_more_column` for another upstream page. These are cache snapshots, not
+archived evidence.
+
+## Errors and annotations
+
+Results are JSON in an MCP text content block. Execution failures set
+`isError: true` with `code`, `message`, and `retryable: false`. Schema and
+connection-validation failures use `invalid-input`; other execution failures
+use `tool-error`. Column snapshots expose upstream errors separately in their
+`error` field. Empty successful queries are not errors.
+
+`list_connections`, `list_decks`, `get_deck`, and `get_column_posts` have
+`readOnlyHint: true`. `delete_deck` has `destructiveHint: true`; tools returning
+external posts mark them untrusted. Annotations describe behavior and do not
+grant authorization. No tool posts to or modifies an SNS account.
+
+## Browser setup and verification
+
+```sh
+nix develop -c pnpm test
+nix develop -c pnpm typecheck
+nix develop -c pnpm test:e2e e2e/integrations/webmcp.test.ts
+```
+
+E2E tests enable Chromium WebMCP/testing flags and invoke actual registered
+tools through `navigator.modelContextTesting`. Mock relay responses pass
+through real server functions and isolated database state.
+
+For interactive testing, enable `chrome://flags/#enable-webmcp-testing`,
+restart Chrome, and use Model Context Tool Inspector. Reload after changing
+browser support. Native WebMCP requires a secure context; use the configured
+Tailscale Serve HTTPS origin for remote access. Development also requires
+allowing its exact hostname through `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS`.
+The app's owner check still applies; direct localhost access does not supply
+Serve identity. See [runtime access configuration](storage-and-oauth.md).
+
+No production origin-trial token or external MCP-client bridge is configured.
+Browser cancellation does not guarantee cancellation of a shared feed request.

drizzle.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+  dialect: 'sqlite',
+  schema: './src/features/storage/schema.ts',
+  out: './drizzle',
+})

drizzle/0000_aspiring_bloodstorm.sql

@@ -0,0 +1,66 @@
+CREATE TABLE `connection_credentials` (
+	`connection_id` text PRIMARY KEY NOT NULL,
+	`encrypted_token` text NOT NULL,
+	`updated_at` integer NOT NULL,
+	FOREIGN KEY (`connection_id`) REFERENCES `connections`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `connections` (
+	`id` text PRIMARY KEY NOT NULL,
+	`platform` text NOT NULL,
+	`origin` text NOT NULL,
+	`account_id` text,
+	`relay_profile` text,
+	`display_name` text NOT NULL,
+	`status` text NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `connections_account` ON `connections` (`platform`,`origin`,`account_id`);--> statement-breakpoint
+CREATE UNIQUE INDEX `connections_relay_profile` ON `connections` (`origin`,`relay_profile`);--> statement-breakpoint
+CREATE TABLE `deck_columns` (
+	`id` text NOT NULL,
+	`deck_id` text NOT NULL,
+	`position` integer NOT NULL,
+	`connection_id` text NOT NULL,
+	`title` text NOT NULL,
+	`source` text NOT NULL,
+	PRIMARY KEY(`deck_id`, `id`),
+	FOREIGN KEY (`deck_id`) REFERENCES `decks`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`connection_id`) REFERENCES `connections`(`id`) ON UPDATE no action ON DELETE restrict,
+	CONSTRAINT "deck_columns_valid_position" CHECK("deck_columns"."position" >= 0)
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `deck_columns_position` ON `deck_columns` (`deck_id`,`position`);--> statement-breakpoint
+CREATE TABLE `decks` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text NOT NULL,
+	`revision` integer DEFAULT 1 NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	CONSTRAINT "decks_positive_revision" CHECK("decks"."revision" >= 1)
+);
+--> statement-breakpoint
+CREATE TABLE `oauth_apps` (
+	`id` text PRIMARY KEY NOT NULL,
+	`origin` text NOT NULL,
+	`redirect_uri` text NOT NULL,
+	`scopes` text NOT NULL,
+	`client_id` text NOT NULL,
+	`encrypted_client_secret` text NOT NULL,
+	`created_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `oauth_apps_configuration` ON `oauth_apps` (`origin`,`redirect_uri`,`scopes`);--> statement-breakpoint
+CREATE TABLE `oauth_attempts` (
+	`state_hash` text PRIMARY KEY NOT NULL,
+	`browser_hash` text NOT NULL,
+	`app_id` text NOT NULL,
+	`encrypted_verifier` text NOT NULL,
+	`connection_id` text,
+	`expires_at` integer NOT NULL,
+	`consumed_at` integer,
+	FOREIGN KEY (`app_id`) REFERENCES `oauth_apps`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`connection_id`) REFERENCES `connections`(`id`) ON UPDATE no action ON DELETE cascade
+);

drizzle/0001_many_fat_cobra.sql

@@ -0,0 +1 @@
+ALTER TABLE `connection_credentials` ADD `app_id` text REFERENCES oauth_apps(id);

drizzle/0002_fine_master_chief.sql

@@ -0,0 +1,6 @@
+CREATE TABLE `legacy_imports` (
+	`id` text PRIMARY KEY NOT NULL,
+	`payload_hash` text NOT NULL,
+	`deck_ids` text NOT NULL,
+	`created_at` integer NOT NULL
+);

drizzle/0003_romantic_scrambler.sql

@@ -0,0 +1,14 @@
+CREATE TABLE `research_sessions` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text NOT NULL,
+	`status` text NOT NULL,
+	`updated_at` integer NOT NULL,
+	`snapshot` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `research_state` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`active_session_id` text,
+	FOREIGN KEY (`active_session_id`) REFERENCES `research_sessions`(`id`) ON UPDATE no action ON DELETE set null,
+	CONSTRAINT "research_state_singleton" CHECK("research_state"."id" = 1)
+);

drizzle/0004_good_natasha_romanoff.sql

@@ -0,0 +1,23 @@
+CREATE TABLE `auth_sessions` (
+	`token_hash` text PRIMARY KEY NOT NULL,
+	`owner_id` integer NOT NULL,
+	`expires_at` integer NOT NULL,
+	FOREIGN KEY (`owner_id`) REFERENCES `workspace_owner`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `auth_throttle` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`attempts` integer NOT NULL,
+	`reset_at` integer NOT NULL,
+	CONSTRAINT "auth_throttle_singleton" CHECK("auth_throttle"."id" = 1)
+);
+--> statement-breakpoint
+CREATE TABLE `workspace_owner` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`email` text NOT NULL,
+	`name` text NOT NULL,
+	`password_hash` text NOT NULL,
+	`onboarding_completed_at` integer,
+	`created_at` integer NOT NULL,
+	CONSTRAINT "workspace_owner_singleton" CHECK("workspace_owner"."id" = 1)
+);

drizzle/meta/0000_snapshot.json

@@ -0,0 +1,424 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "42951f9a-6025-4e73-9155-764d25514ba8",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "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
+        },
+        "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"
+        }
+      },
+      "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"
+        }
+      }
+    },
+    "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": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0001_snapshot.json

@@ -0,0 +1,440 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "1455820b-8aec-4fcb-9790-c7d9f1fd908c",
+  "prevId": "42951f9a-6025-4e73-9155-764d25514ba8",
+  "tables": {
+    "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"
+        }
+      }
+    },
+    "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": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0002_snapshot.json

@@ -0,0 +1,478 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "ebfb67e2-a014-4d40-89e3-30c9b55cf047",
+  "prevId": "1455820b-8aec-4fcb-9790-c7d9f1fd908c",
+  "tables": {
+    "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": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0003_snapshot.json

@@ -0,0 +1,562 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "d021bc5b-2422-467a-ab92-2493da6e642a",
+  "prevId": "ebfb67e2-a014-4d40-89e3-30c9b55cf047",
+  "tables": {
+    "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": {}
+    },
+    "research_state": {
+      "name": "research_state",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "active_session_id": {
+          "name": "active_session_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "research_state_active_session_id_research_sessions_id_fk": {
+          "name": "research_state_active_session_id_research_sessions_id_fk",
+          "tableFrom": "research_state",
+          "tableTo": "research_sessions",
+          "columnsFrom": ["active_session_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {
+        "research_state_singleton": {
+          "name": "research_state_singleton",
+          "value": "\"research_state\".\"id\" = 1"
+        }
+      }
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0004_snapshot.json

@@ -0,0 +1,696 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "52f68a9d-b9da-4739-9635-b0b5e3e8040b",
+  "prevId": "d021bc5b-2422-467a-ab92-2493da6e642a",
+  "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": {}
+    },
+    "research_state": {
+      "name": "research_state",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "active_session_id": {
+          "name": "active_session_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "research_state_active_session_id_research_sessions_id_fk": {
+          "name": "research_state_active_session_id_research_sessions_id_fk",
+          "tableFrom": "research_state",
+          "tableTo": "research_sessions",
+          "columnsFrom": ["active_session_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {
+        "research_state_singleton": {
+          "name": "research_state_singleton",
+          "value": "\"research_state\".\"id\" = 1"
+        }
+      }
+    },
+    "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": {}
+  }
+}

drizzle/meta/_journal.json

@@ -0,0 +1,41 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1790234301369,
+      "tag": "0000_aspiring_bloodstorm",
+      "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1790234518415,
+      "tag": "0001_many_fat_cobra",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "6",
+      "when": 1790234736939,
+      "tag": "0002_fine_master_chief",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
+      "when": 1790242505709,
+      "tag": "0003_romantic_scrambler",
+      "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "6",
+      "when": 1790589494499,
+      "tag": "0004_good_natasha_romanoff",
+      "breakpoints": true
+    }
+  ]
+}

e2e/fixtures.ts

@@ -0,0 +1,89 @@
+import { basename, dirname, isAbsolute } from 'node:path'
+import AxeBuilder from '@axe-core/playwright'
+import { test as base } from '@playwright/test'
+import {
+  completeOnboarding,
+  createOwner,
+  readAuthState,
+  signIn,
+} from '../src/features/auth/auth.server'
+import { openDatabase } from '../src/features/storage/database.server'
+
+export const test = base.extend<{
+  a11y: () => AxeBuilder
+  resetDecks: undefined
+  sessionToken: string
+}>({
+  // biome-ignore lint/correctness/noEmptyPattern: Playwright requires destructured fixture arguments.
+  sessionToken: async ({}, use) => {
+    const path = process.env.TWITTER_LITE_E2E_DB_PATH
+    if (!path || !basename(dirname(path)).startsWith('twitter-lite-e2e-'))
+      throw new Error('Isolated E2E database is required.')
+    const database = openDatabase(path)
+    const credentials = {
+      email: '[email protected]',
+      password: 'E2E-only-passphrase-2026',
+    }
+    process.env.WORKSPACE_SETUP_TOKEN =
+      'isolated-e2e-setup-token-not-for-production'
+    const result = readAuthState(database).needsSetup
+      ? await createOwner(
+          {
+            ...credentials,
+            name: 'Yuta',
+            setupToken: process.env.WORKSPACE_SETUP_TOKEN,
+          },
+          database,
+        )
+      : await signIn(credentials, database)
+    if (!result.owner.onboardingCompletedAt)
+      completeOnboarding(result.sessionToken, { name: 'Yuta' }, database)
+    database.$client.close()
+    await use(result.sessionToken)
+  },
+  storageState: async ({ sessionToken }, use) => {
+    await use({
+      cookies: [
+        {
+          name: 'workspace_session',
+          value: sessionToken,
+          domain: '127.0.0.1',
+          path: '/',
+          expires: Math.floor(Date.now() / 1000) + 3600,
+          httpOnly: true,
+          secure: false,
+          sameSite: 'Lax',
+        },
+      ],
+      origins: [],
+    })
+  },
+  resetDecks: [
+    // biome-ignore lint/correctness/noEmptyPattern: Playwright requires destructured fixture arguments.
+    async ({}, use) => {
+      const path = process.env.TWITTER_LITE_E2E_DB_PATH
+      if (
+        !path ||
+        !isAbsolute(path) ||
+        !basename(dirname(path)).startsWith('twitter-lite-e2e-') ||
+        basename(path) !== 'workspace.sqlite'
+      )
+        throw new Error('Isolated E2E database is required.')
+      const database = openDatabase(path).$client
+      database.pragma('foreign_keys = ON')
+      database.exec('DELETE FROM decks; DELETE FROM legacy_imports;')
+      database.close()
+      await use(undefined)
+    },
+    { auto: true },
+  ],
+  a11y: async ({ page }, use) => {
+    await use(() =>
+      new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+        .disableRules(['meta-viewport']),
+    )
+  },
+})
+
+export { expect } from '@playwright/test'

e2e/fixtures/twitter.ts

@@ -0,0 +1,35 @@
+import type { TweetLegacy } from '../generated/twitter-openapi/client.ts'
+
+interface TweetLegacyFixtureOptions {
+  conversationId?: string
+  inReplyTo?: string
+  replyCount?: number
+}
+
+export const tweetLegacyFixture = (
+  id: string,
+  text: string,
+  {
+    conversationId = id,
+    inReplyTo,
+    replyCount = 1,
+  }: TweetLegacyFixtureOptions = {},
+): TweetLegacy => ({
+  bookmark_count: 0,
+  bookmarked: false,
+  conversation_id_str: conversationId,
+  created_at: 'Mon Jul 13 00:00:00 +0000 2026',
+  display_text_range: [0, text.length],
+  favorite_count: 3,
+  favorited: false,
+  full_text: text,
+  id_str: id,
+  ...(inReplyTo ? { in_reply_to_status_id_str: inReplyTo } : {}),
+  is_quote_status: false,
+  lang: 'ja',
+  quote_count: 0,
+  reply_count: replyCount,
+  retweet_count: 2,
+  retweeted: false,
+  user_id_str: '42',
+})

e2e/integrations/access.test.ts

@@ -0,0 +1,63 @@
+import { expect, test } from '../fixtures'
+
+test('owner can open the app but missing or foreign identity is forbidden', async ({
+  request,
+}) => {
+  expect((await request.get('/')).status()).toBe(200)
+  expect(
+    (
+      await request.get('/', { headers: { 'Tailscale-User-Login': '' } })
+    ).status(),
+  ).toBe(403)
+  expect(
+    (
+      await request.get('/', {
+        headers: { 'Tailscale-User-Login': '[email protected]' },
+      })
+    ).status(),
+  ).toBe(403)
+})
+
+test('mutations require exact Origin even with same-origin Fetch Metadata', async ({
+  request,
+}) => {
+  expect((await request.post('/')).status()).toBe(403)
+  expect(
+    (
+      await request.post('/', {
+        headers: {
+          Origin: 'https://other.invalid',
+          'Sec-Fetch-Site': 'same-origin',
+        },
+      })
+    ).status(),
+  ).toBe(403)
+})
+
+test('server functions also reject foreign identity and cross-site calls', async ({
+  page,
+  request,
+}) => {
+  const serverRequest = page.waitForRequest((request) =>
+    request.url().includes('/_serverFn/'),
+  )
+  await page.goto('/deck')
+  const url = (await serverRequest).url()
+  expect(
+    (
+      await request.get(url, {
+        headers: {
+          'Tailscale-User-Login': '[email protected]',
+          'Sec-Fetch-Site': 'same-origin',
+        },
+      })
+    ).status(),
+  ).toBe(403)
+  expect(
+    (
+      await request.get(url, {
+        headers: { 'Sec-Fetch-Site': 'cross-site' },
+      })
+    ).status(),
+  ).toBe(403)
+})

e2e/integrations/auth.test.ts

@@ -0,0 +1,172 @@
+import { openDatabase } from '../../src/features/storage/database.server'
+import { expect, test } from '../fixtures'
+
+const origin = 'http://127.0.0.1:4173'
+
+test('creates the owner once and enters onboarding with a real session', async ({
+  page,
+  context,
+  a11y,
+}) => {
+  const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? '')
+  db.$client.exec('DELETE FROM workspace_owner; DELETE FROM auth_throttle;')
+  db.$client.close()
+  await context.clearCookies()
+  await page.goto('/', { waitUntil: 'networkidle' })
+  await expect(page).toHaveURL(/\/setup$/)
+  expect((await a11y().analyze()).violations).toEqual([])
+  await page.getByLabel('Your name', { exact: true }).fill('Yuta')
+  await page.getByLabel('Email address').fill('[email protected]')
+  await page
+    .getByLabel('Password', { exact: true })
+    .fill('E2E-only-passphrase-2026')
+  await page
+    .getByLabel('Confirm password', { exact: true })
+    .fill('E2E-only-passphrase-2026')
+  await page
+    .getByLabel('Setup code')
+    .fill('isolated-e2e-setup-token-not-for-production')
+  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 ({
+  page,
+  context,
+}) => {
+  const serverRequest = page.waitForRequest((request) =>
+    request.url().includes('/_serverFn/'),
+  )
+  await page.goto('/deck')
+  const serverUrl = (await serverRequest).url()
+  await context.clearCookies()
+  for (const path of ['/api/research/events', serverUrl]) {
+    const result = await context.request.get(path, {
+      headers: { Origin: origin, 'Sec-Fetch-Site': 'same-origin' },
+    })
+    expect(result.status()).toBe(401)
+  }
+  await page.goto('/journal')
+  await expect(page).toHaveURL(/\/login$/)
+  await expect(
+    page.getByRole('heading', { name: 'Welcome back.' }),
+  ).toBeVisible()
+  await expect(
+    page.getByRole('link', { name: 'Journal', exact: true }),
+  ).toHaveCount(0)
+})
+
+test('signs in and revokes the session on sign out', async ({
+  page,
+  context,
+  a11y,
+}) => {
+  await context.clearCookies()
+  await page.goto('/login', { waitUntil: 'networkidle' })
+  expect((await a11y().analyze()).violations).toEqual([])
+  await page.getByLabel('Email address').fill('[email protected]')
+  await page
+    .getByLabel('Password', { exact: true })
+    .fill('Wrong-passphrase-2026')
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click()
+  await expect(page.getByRole('alert')).toContainText(
+    'Invalid email or password.',
+  )
+  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(`${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}` },
+  })
+  expect((await replay.json()).owner).toBeNull()
+  await page.goBack()
+  await expect(
+    page.getByRole('link', { name: 'Home', exact: true }),
+  ).toHaveCount(0)
+})
+
+test('requires onboarding and remembers its completion and name', async ({
+  page,
+  request,
+  a11y,
+}) => {
+  const db = openDatabase(process.env.TWITTER_LITE_E2E_DB_PATH ?? '')
+  db.$client
+    .prepare(
+      'UPDATE workspace_owner SET onboarding_completed_at = NULL WHERE id = 1',
+    )
+    .run()
+  try {
+    expect((await request.get('/api/research/events')).status()).toBe(403)
+    await page.goto('/', { waitUntil: 'networkidle' })
+    await expect(page).toHaveURL(/\/onboarding$/)
+    expect((await a11y().analyze()).violations).toEqual([])
+    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: 'Open workspace' }).click()
+    await expect(
+      page.getByRole('heading', { name: 'Good morning, Yuta Test' }),
+    ).toBeVisible()
+    await page.reload()
+    await expect(
+      page.getByRole('heading', { name: 'Good morning, Yuta Test' }),
+    ).toBeVisible()
+    await page.goto('/onboarding')
+    await expect(page).toHaveURL(`${origin}/`)
+  } finally {
+    db.$client
+      .prepare(
+        'UPDATE workspace_owner SET name = ?, onboarding_completed_at = ? WHERE id = 1',
+      )
+      .run('Yuta', Date.now())
+    db.$client.close()
+  }
+})
+
+test('rejects cross-origin login and further account registration', async ({
+  request,
+  page,
+  context,
+}) => {
+  expect(
+    (
+      await request.post('/api/auth', {
+        headers: { Origin: 'https://other.invalid' },
+        data: { action: 'logout' },
+      })
+    ).status(),
+  ).toBe(403)
+  const result = await request.post('/api/auth', {
+    headers: { Origin: origin },
+    data: {
+      action: 'setup',
+      email: '[email protected]',
+      name: 'Intruder',
+      password: 'Long-enough-password',
+      setupToken: 'arbitrary-token',
+    },
+  })
+  expect(result.status()).toBe(409)
+  await context.clearCookies()
+  await page.goto('/setup')
+  await expect(page).toHaveURL(/\/login$/)
+})

e2e/integrations/connections.test.ts

@@ -0,0 +1,70 @@
+import { expect, test } from '../fixtures'
+
+test('opens account management after hydration without inheriting real OAuth configuration', async ({
+  page,
+}) => {
+  await page.goto('/deck')
+  await expect(
+    page.getByRole('button', { name: 'Rename', includeHidden: true }),
+  ).toBeEnabled()
+  const manage = page.getByRole('button', { name: 'Manage connected accounts' })
+  if (!(await manage.isVisible())) {
+    await page.getByRole('button', { name: 'Toggle sidebar' }).click()
+  }
+  await expect(manage).toBeEnabled()
+  await manage.click()
+  const dialog = page.getByRole('dialog', { name: 'Connected accounts' })
+  await expect(dialog).toBeVisible()
+  await expect(
+    dialog.getByText('No Mastodon servers have been configured yet.'),
+  ).toBeVisible()
+  await expect(
+    dialog.getByRole('button', { name: 'Authorize with Mastodon' }),
+  ).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 ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/inbox')
+  await page.waitForLoadState('networkidle')
+  const manage = page.getByRole('button', { name: 'Manage connected accounts' })
+  await expect(manage).toBeVisible()
+  await manage.click()
+  const dialog = page.getByRole('dialog', { name: 'Connected accounts' })
+  await expect(dialog).toBeVisible()
+  await expect(
+    dialog.getByText('No Mastodon servers have been configured yet.'),
+  ).toBeVisible()
+  expect((await a11y().analyze()).violations).toEqual([])
+  await page.keyboard.press('Escape')
+  await expect(dialog).toHaveCount(0)
+  await expect(manage).toBeFocused()
+  await expect(
+    page.getByRole('textbox', { name: 'Search articles' }),
+  ).toBeVisible()
+})
+
+test('rejects an unbound OAuth callback without contacting an instance', async ({
+  page,
+}) => {
+  await page.goto('/oauth/mastodon/callback?state=invalid&code=not-a-real-code')
+  await expect(page).toHaveURL(/\/deck\?mastodon=failed$/)
+  await expect(page.getByRole('alert')).toContainText(
+    '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())) {
+    await page.getByRole('button', { name: 'Toggle sidebar' }).click()
+  }
+  await expect(
+    page.getByRole('button', { name: 'Manage connected accounts' }),
+  ).toBeEnabled()
+})

e2e/integrations/deck.test.ts

@@ -0,0 +1,421 @@
+import type { Page } from '@playwright/test'
+import { expect, test } from '../fixtures'
+import { closeMobileSidebar, showDeckManagement } from '../workspace'
+
+async function addColumn(
+  page: Page,
+  title: string,
+  query: string,
+  profile = 'e2e',
+  kind = 'search',
+) {
+  await showDeckManagement(page)
+  await page.getByRole('button', { name: 'Add column', exact: true }).click()
+  const editor = page.getByRole('form', { name: 'Add column', exact: true })
+  await editor.getByLabel('Column name', { exact: true }).fill(title)
+  await editor
+    .getByRole('combobox', { name: 'Connection profile', exact: true })
+    .selectOption({ label: profile })
+  await editor
+    .getByRole('combobox', { name: 'Column type', exact: true })
+    .selectOption(kind)
+  await editor
+    .getByLabel(
+      kind === 'search'
+        ? 'Twitter search query'
+        : kind === 'user'
+          ? 'User'
+          : 'List',
+      { exact: true },
+    )
+    .fill(query)
+  await editor.getByRole('button', { name: 'Add and search' }).click()
+  await closeMobileSidebar(page)
+  await expect(
+    page
+      .getByRole('region', { name: title, exact: true })
+      .locator('article')
+      .first(),
+  ).toBeVisible()
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/deck')
+  await expect(
+    page.getByRole('button', { name: 'Save as deck', exact: true }),
+  ).toBeEnabled()
+  await page.getByRole('button', { name: 'Save as deck', exact: true }).click()
+  await showDeckManagement(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 ({
+  page,
+}) => {
+  await addColumn(page, '通常の接続', 'same-query')
+  await addColumn(page, '別の接続', 'same-query', 'alternate')
+  const first = page.getByRole('region', { name: '通常の接続', exact: true })
+  const second = page.getByRole('region', { name: '別の接続', exact: true })
+  await expect(
+    first.getByText('Latest · all page 1', { exact: true }),
+  ).toBeVisible()
+  await expect(
+    second.getByText('alternate · Latest · all page 1', { exact: true }),
+  ).toBeVisible()
+  await first.getByRole('button', { name: 'Load more' }).click()
+  await expect(first.locator('article')).toHaveCount(2)
+  await expect(second.locator('article')).toHaveCount(1)
+  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
+    .getByRole('combobox', { name: 'Connection profile', exact: true })
+    .selectOption({ label: 'e2e' })
+  await page.getByRole('button', { name: 'Save changes' }).click()
+  await expect(
+    second.getByText('Latest · all page 1', { exact: true }),
+  ).toBeVisible()
+  await expect(second.getByText('alternate · Latest · all page 1')).toHaveCount(
+    0,
+  )
+  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 ({
+  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,
+}) => {
+  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,
+}, testInfo) => {
+  await addColumn(page, '失敗する検索', `retry-deck-${testInfo.project.name}`)
+  await addColumn(page, '別の検索', 'independent-deck')
+  const failed = page.getByRole('region', { name: '失敗する検索', exact: true })
+  const other = page.getByRole('region', { name: '別の検索', exact: true })
+  await failed.getByRole('button', { name: 'Load more' }).click()
+  await expect(failed.getByRole('alert')).toBeVisible()
+  await expect(failed.locator('article')).toHaveCount(1)
+  await other.getByRole('button', { name: 'Load more' }).click()
+  await expect(other.locator('article')).toHaveCount(2)
+  await failed.getByRole('button', { name: 'Retry' }).click()
+  await expect(failed.locator('article')).toHaveCount(2)
+})
+
+test('keeps the deck and editor accessible within narrow viewports', async ({
+  page,
+  a11y,
+}, testInfo) => {
+  await addColumn(page, '日本語の反応', 'WebMCP lang:ja')
+  await addColumn(page, '海外の反応', 'WebMCP lang:en', 'alternate')
+  await addColumn(page, '公式アカウント', 'OpenAI', 'e2e', 'user')
+  for (const width of [320, 375, 414, 768]) {
+    await page.setViewportSize({ width, height: 900 })
+    expect(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth > innerWidth,
+      ),
+    ).toBe(false)
+    expect(
+      await page.evaluate(
+        () => document.documentElement.scrollHeight <= innerHeight,
+      ),
+    ).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({
+    width: testInfo.project.name === 'desktop' ? 1440 : 393,
+    height: 900,
+  })
+  await expect(page.getByRole('navigation', { name: 'Columns' })).toHaveCount(0)
+  await expect(
+    page.getByRole('heading', { name: '公式アカウント', exact: true }),
+  ).toBeVisible()
+  expect((await a11y().analyze()).violations).toEqual([])
+  await page.screenshot({
+    path: testInfo.outputPath('deck-populated.png'),
+    fullPage: true,
+  })
+  await showDeckManagement(page)
+  await page.getByRole('button', { name: 'Add column', exact: true }).click()
+  expect((await a11y().analyze()).violations).toEqual([])
+  await page.screenshot({
+    path: testInfo.outputPath('deck.png'),
+    fullPage: true,
+  })
+})
+
+test('closes the column editor with Escape and restores focus without applying edits', async ({
+  page,
+}) => {
+  await showDeckManagement(page)
+  const opener = page.getByRole('button', { name: 'Add column', exact: true })
+  await opener.click()
+  await expect(
+    page.getByRole('dialog', { name: 'Add column', exact: true }),
+  ).toBeVisible()
+  await page
+    .getByLabel('Column name', { exact: true })
+    .fill('キャンセルする観点')
+  await page.keyboard.press('Escape')
+  await expect(
+    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 }) => {
+  await page.evaluate(() =>
+    localStorage.setItem('twitter-lite-research-deck', '{broken'),
+  )
+  await page.reload()
+  await expect(page.getByRole('alert')).toContainText('Unable to load')
+  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 ({
+  page,
+}) => {
+  await showDeckManagement(page)
+  await page.getByRole('button', { name: 'Add column', exact: true }).click()
+  await page.getByLabel('Column name', { exact: true }).fill('購読リスト')
+  await page
+    .getByRole('combobox', { name: 'Connection profile', exact: true })
+    .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
+    .getByRole('combobox', { name: 'Connection profile', exact: true })
+    .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(
+    page
+      .getByRole('region', { name: '購読リスト', exact: true })
+      .getByText('list page 1', { exact: true }),
+  ).toBeVisible()
+})
+
+test('keeps an open draft through remote edits and rejects its stale save', async ({
+  page,
+  browser,
+  baseURL,
+}) => {
+  const other = await browser.newContext({
+    storageState: await page.context().storageState(),
+    baseURL,
+    extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
+  })
+  try {
+    const device = await other.newPage()
+    await device.goto('/deck')
+    await page.getByRole('button', { name: 'Rename' }).click()
+    await page.getByLabel('Research topic / deck name').fill('編集中の名前')
+    await device.getByRole('button', { name: 'Rename' }).click()
+    await device.getByLabel('Research topic / deck name').fill('別の端末の変更')
+    await device.getByRole('button', { name: 'Save name' }).click()
+    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.getByRole('button', { name: 'Save name' }).click()
+    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: 'Reload latest deck' }).click()
+    await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+      '別の端末の変更',
+    )
+  } finally {
+    await other.close()
+  }
+})
+
+test('imports old browser decks explicitly and avoids duplicate imports after retry', async ({
+  page,
+}) => {
+  const legacy = {
+    version: 2,
+    activeDeckId: 'old',
+    decks: [
+      {
+        id: 'old',
+        title: '以前の調査',
+        columns: [
+          {
+            id: 'a',
+            title: '以前の観点',
+            profileName: 'e2e',
+            source: {
+              platform: 'twitter',
+              kind: 'search',
+              query: 'WebMCP',
+              product: 'Latest',
+              following: false,
+            },
+          },
+        ],
+      },
+    ],
+  }
+  await page.evaluate(
+    (legacy) =>
+      localStorage.setItem(
+        'twitter-lite-research-deck',
+        JSON.stringify(legacy),
+      ),
+    legacy,
+  )
+  await page.reload()
+  await showDeckManagement(page)
+  const selector = page.getByLabel('Deck profile', { exact: true })
+  await expect(selector.locator('option')).toHaveCount(1)
+  await closeMobileSidebar(page)
+  await page.getByRole('button', { name: 'Import legacy decks' }).click()
+  await showDeckManagement(page)
+  await expect(selector.locator('option')).toHaveCount(2)
+  await selector.selectOption({ label: '以前の調査' })
+  await closeMobileSidebar(page)
+  await expect(
+    page.getByText('Latest · all page 1', { exact: true }),
+  ).toBeVisible()
+  await page.evaluate(
+    (legacy) =>
+      localStorage.setItem(
+        'twitter-lite-research-deck',
+        JSON.stringify(legacy),
+      ),
+    legacy,
+  )
+  await page.reload()
+  await page.getByRole('button', { name: 'Import legacy decks' }).click()
+  await expect(
+    page.getByRole('button', { name: 'Import legacy decks' }),
+  ).toHaveCount(0)
+  await showDeckManagement(page)
+  await expect(selector.locator('option')).toHaveCount(2)
+})
+
+test('preserves a new deck dialog and its draft across the mobile breakpoint', async ({
+  page,
+}) => {
+  await showDeckManagement(page)
+  await page.getByRole('button', { name: 'Create deck', exact: true }).click()
+  const dialog = page.getByRole('dialog', { name: 'Create deck', exact: true })
+  await dialog.getByLabel('New deck name').fill('画面を回転しても残る調査')
+  for (const width of [1024, 375, 1024]) {
+    await page.setViewportSize({ width, height: 900 })
+    await expect(dialog).toHaveCount(1)
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByLabel('New deck name')).toHaveValue(
+      '画面を回転しても残る調査',
+    )
+    await expect(page.locator('#new-deck-title')).toHaveCount(1)
+  }
+  await dialog.getByRole('button', { name: 'Create', exact: true }).click()
+  await expect(dialog).toHaveCount(0)
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '画面を回転しても残る調査',
+  )
+})

e2e/integrations/home.test.ts

@@ -0,0 +1,139 @@
+import { expect, test } from '../fixtures'
+
+test('previews a natural-language memo and shares the executed record with 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,
+  a11y,
+}, testInfo) => {
+  await page.goto('/')
+  await page.waitForLoadState('networkidle')
+  for (const width of [320, 375, 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.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 ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/')
+  await page.waitForLoadState('networkidle')
+  await page
+    .getByRole('button', { name: 'Open conversation with Haruka Aoki' })
+    .click()
+  const dialog = page.getByRole('dialog', {
+    name: 'Conversation with Haruka Aoki',
+  })
+  await expect(
+    dialog.getByRole('textbox', { name: 'Reply', exact: true }),
+  ).toBeVisible()
+  expect((await a11y().analyze()).violations).toEqual([])
+  await dialog.getByRole('button', { name: 'Leave for later' }).click()
+  await expect(dialog).toHaveCount(0)
+  await expect(
+    page.getByRole('button', { name: 'Open conversation with Haruka Aoki' }),
+  ).toHaveCount(0)
+  await page
+    .getByRole('link', { name: 'Messages', exact: true })
+    .first()
+    .click()
+  const rows = page.locator('.support-row')
+  await expect(
+    rows.filter({ hasText: 'Schedule next week’s design review' }),
+  ).toHaveCount(0)
+  await page.getByRole('button', { name: 'Later', exact: true }).click()
+  await rows.filter({ hasText: 'Schedule next week’s design review' }).click()
+  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 ({
+  page,
+}) => {
+  await page.goto('/')
+  await page.waitForLoadState('networkidle')
+  const brief = page.getByRole('region', { name: 'Daily brief' })
+  await expect(brief).toContainText('Review the documents')
+  await expect(brief).toContainText('4 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()
+  const dialog = page.getByRole('dialog', {
+    name: 'Conversation with Haruka Aoki',
+    exact: true,
+  })
+  await dialog.getByRole('button', { name: 'Leave for later' }).click()
+  await expect(brief).toContainText('3 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ページ目から')
+})

e2e/integrations/inbox.test.ts

@@ -0,0 +1,101 @@
+import { expect, test } from '../fixtures'
+
+test('selects articles and keeps the reader focused on their content', async ({
+  page,
+}) => {
+  await page.goto('/inbox')
+  await page.waitForLoadState('networkidle')
+  const rows = page.locator('.inbox-article-row')
+  await expect(rows).toHaveCount(9)
+  const articleTitle = 'Context for an agent can be brief'
+  await rows.filter({ hasText: articleTitle }).click()
+  const reader = page.getByRole('article', { name: articleTitle, exact: true })
+  await expect(reader).toBeVisible()
+  await expect(
+    reader.getByRole('heading', { name: articleTitle, exact: true }),
+  ).toBeVisible()
+  await expect(
+    reader.getByText(
+      'Start with a one-sentence goal, then add the constraints that must hold.',
+      { 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,
+    }),
+  ).toBeVisible()
+})
+
+test('recovers from empty search and shares navigation with Research', async ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/inbox')
+  await page.waitForLoadState('networkidle')
+  const rows = page.locator('.inbox-article-row')
+  await page
+    .getByRole('textbox', { name: 'Search articles' })
+    .fill('nonexistent-query-xyz')
+  await expect(rows).toHaveCount(0)
+  await expect(
+    page.getByText('No articles found', { exact: true }),
+  ).toBeVisible()
+  await page.getByRole('button', { name: 'Clear search' }).click()
+  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 ({
+  page,
+  a11y,
+}, testInfo) => {
+  await page.goto('/inbox')
+  await page.waitForLoadState('networkidle')
+  for (const width of [320, 375, 414, 768]) {
+    await page.setViewportSize({ width, height: 850 })
+    await expect(
+      page.getByRole('textbox', { name: 'Search articles' }),
+    ).toBeVisible()
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).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,
+    })
+    await expect(reader).toBeVisible()
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBe(width)
+    await page.screenshot({
+      path: testInfo.outputPath(`inbox-reader-${width}.png`),
+    })
+    if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
+    const back = page.getByRole('button', { name: 'Back to articles' })
+    if (await back.isVisible()) await back.click()
+  }
+})

e2e/integrations/research.test.ts

@@ -0,0 +1,351 @@
+import type { DeckColumn } from '../../src/features/decks/model'
+import type { ResearchRun } from '../../src/features/research/model'
+import { expect, test } from '../fixtures'
+import {
+  closeMobileSidebar,
+  showDeckManagement,
+  showResearch,
+} from '../workspace'
+
+test('pushes the current research snapshot on each SSE connection', async ({
+  page,
+}) => {
+  await page.goto('/deck')
+  const snapshots = await page.evaluate(async () => {
+    const connect = () =>
+      new Promise<unknown>((resolve, reject) => {
+        const events = new EventSource('/api/research/events')
+        const timer = setTimeout(() => {
+          events.close()
+          reject(new Error('SSE timed out'))
+        }, 5000)
+        events.onmessage = (event) => {
+          clearTimeout(timer)
+          events.close()
+          resolve(JSON.parse(event.data))
+        }
+        events.onerror = () => {
+          clearTimeout(timer)
+          events.close()
+          reject(new Error('SSE failed'))
+        }
+      })
+    return [await connect(), await connect()]
+  })
+  expect(snapshots).toEqual([
+    { configured: false, run: null, history: [] },
+    { configured: false, run: null, history: [] },
+  ])
+})
+
+test('restores the conversation and growing temporary deck from reconnect snapshots', async ({
+  page,
+}) => {
+  await page.goto('/deck')
+  await showDeckManagement(page)
+  await page.getByRole('button', { name: 'Add column', exact: true }).click()
+  const accounts = page.getByRole('combobox', {
+    name: 'Connection profile',
+    exact: true,
+  })
+  await accounts.selectOption({ label: 'e2e' })
+  const connectionId = await accounts.inputValue()
+  await page.keyboard.press('Escape')
+  await closeMobileSidebar(page)
+  const run: ResearchRun = {
+    id: '36ad8cc7-318c-46ae-94fa-28d30336f027',
+    threadId: 'conversation-test',
+    connectionIds: [connectionId],
+    topic: '既存の観点を使って調査して',
+    status: 'running',
+    startedAt: Date.now(),
+    deckVersion: 1,
+    citations: [],
+    message: '既存の検索条件を再利用しています。',
+    messages: [
+      { id: 'user-1', role: 'user', text: '既存の観点を使って調査して' },
+      { id: 'tool-1', role: 'tool', text: 'list_decks: 完了' },
+      {
+        id: 'assistant-1',
+        role: 'assistant',
+        text: '既存の検索条件を再利用しています。',
+      },
+    ],
+    deck: {
+      id: 'generated-plan',
+      title: '会話からの調査',
+      columns: [
+        {
+          id: 'one',
+          title: '最初の観点',
+          connectionId,
+          source: {
+            platform: 'twitter',
+            kind: 'search',
+            query: 'WebMCP',
+            product: 'Latest',
+            following: false,
+          },
+        },
+      ],
+    },
+  }
+  await page.route('**/api/research/events', (route) =>
+    route.fulfill({
+      contentType: 'text/event-stream',
+      body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
+    }),
+  )
+  await page.reload()
+  await showResearch(page)
+  const conversation = page.getByRole('log', { name: 'Research conversation' })
+  await expect(conversation).toContainText('既存の観点を使って調査して')
+  await expect(conversation).toContainText('list_decks: 完了')
+  await expect(conversation).toContainText('既存の検索条件を再利用しています。')
+  await expect(
+    conversation.locator('[data-slot="bubble-content"]'),
+  ).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(page.locator('.deck-column h2')).toHaveText(['最初の観点'])
+  run.deckVersion = 2
+  run.status = 'complete'
+  run.messages.push({
+    id: 'assistant-2',
+    role: 'assistant',
+    text: '比較する観点を追加しました。',
+  })
+  run.deck?.columns.push({
+    id: 'two',
+    title: '比較の観点',
+    connectionId,
+    source: {
+      platform: 'twitter',
+      kind: 'search',
+      query: 'WebMCP lang:ja',
+      product: 'Latest',
+      following: false,
+    },
+  })
+  await page.reload()
+  await showResearch(page)
+  await expect(conversation).toContainText('既存の観点を使って調査して')
+  await expect(conversation).toContainText('比較する観点を追加しました。')
+  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)
+  const accountPicker = page.getByRole('button', {
+    name: 'Connected accounts · 1',
+  })
+  await accountPicker.click()
+  await expect(accountPicker).toHaveAttribute('aria-expanded', 'true')
+  await expect(
+    page.getByRole('checkbox', { name: 'e2e · Twitter' }),
+  ).toBeChecked()
+  await accountPicker.click()
+  await expect(accountPicker).toHaveAttribute('aria-expanded', 'false')
+  await page.getByLabel('Message', { exact: true }).fill('この観点を詳しく')
+  await expect(
+    page.getByRole('button', { name: 'Send', exact: true }),
+  ).toBeEnabled()
+  await page.getByRole('button', { name: 'Close sidebar', exact: true }).click()
+  run.deckVersion = 3
+  if (run.deck) run.deck.title = '閉じている間に更新された調査'
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '閉じている間に更新された調査',
+    { timeout: 15000 },
+  )
+  await showResearch(page)
+  await expect(page.getByLabel('Message', { exact: true })).toHaveValue(
+    'この観点を詳しく',
+  )
+  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 · 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 ({
+  request,
+}) => {
+  const response = await request.get('/api/research/events', {
+    headers: { 'Tailscale-User-Login': '[email protected]' },
+  })
+  expect(response.status()).toBe(403)
+})
+
+test('renders Markdown and reveals an unloaded citation in an offscreen deck column', async ({
+  page,
+  a11y,
+}) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' })
+  await page.goto('/deck')
+  await showDeckManagement(page)
+  await page.getByRole('button', { name: 'Add column', exact: true }).click()
+  const accounts = page.getByRole('combobox', {
+    name: 'Connection profile',
+    exact: true,
+  })
+  await accounts.selectOption({ label: 'e2e' })
+  const connectionId = await accounts.inputValue()
+  await page.keyboard.press('Escape')
+  await closeMobileSidebar(page)
+  const source: DeckColumn = {
+    id: 'citation-column-2',
+    title: '引用の観点',
+    connectionId,
+    source: {
+      platform: 'twitter',
+      kind: 'search',
+      query: 'citation-query-2',
+      product: 'Latest',
+      following: false,
+    },
+  }
+  const columns: DeckColumn[] = ['概要', '比較'].map((title, index) => ({
+    id: `citation-column-${index}`,
+    title,
+    connectionId,
+    source: {
+      platform: 'twitter',
+      kind: 'search',
+      query: `citation-query-${index}`,
+      product: 'Latest',
+      following: false,
+    },
+  }))
+  columns.push(source)
+  const run: ResearchRun = {
+    id: '973ae084-18ed-4674-8899-c75851e51d1b',
+    topic: '引用を確認',
+    status: 'complete',
+    startedAt: Date.now(),
+    deckVersion: 1,
+    message: '',
+    deck: { id: 'citation-deck', title: '引用付きの調査', columns },
+    messages: [
+      {
+        id: 'answer',
+        role: 'assistant',
+        text: '## 調査結果\n\n**重要な発見**です。\n\n- [根拠の投稿](https://x.com/author/status/123456789?s=20)\n\n| 観点 | 結果 |\n| --- | --- |\n| 投稿 | 確認済み |\n\n`コード`も表示します。',
+      },
+    ],
+    citations: [
+      {
+        column: source,
+        post: {
+          key: 'twitter:123456789',
+          nativeId: '123456789',
+          platform: 'twitter',
+          url: 'https://twitter.com/author/status/123456789',
+          text: 'AIが調査時に取得した引用本文',
+          author: { name: '引用元の著者', handle: 'author' },
+        },
+      },
+    ],
+  }
+  await page.route('**/api/research/events', (route) =>
+    route.fulfill({
+      contentType: 'text/event-stream',
+      body: `data: ${JSON.stringify({ configured: true, run })}\n\n`,
+    }),
+  )
+  await page.reload()
+  await showResearch(page)
+  const chat = page.getByRole('log', { name: 'Research conversation' })
+  await expect(chat.getByRole('heading', { name: '調査結果' })).toBeVisible()
+  await expect(chat.getByRole('heading', { name: '調査結果' })).toHaveCSS(
+    'font-weight',
+    '600',
+  )
+  await expect(chat.locator('ul')).toHaveCSS('list-style-type', 'disc')
+  await expect(
+    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(
+    '.research-post[data-post-url="https://twitter.com/author/status/123456789"]',
+  )
+  await expect(card).toBeVisible()
+  await expect(card).toHaveClass(/citation-highlight/)
+  await expect(card).toBeFocused()
+  await expect(card).toContainText('Post saved during research')
+  await expect(card).toContainText('AIが調査時に取得した引用本文')
+  expect(
+    await page.locator('.deck-board').evaluate((element) => element.scrollLeft),
+  ).toBeGreaterThan(0)
+  expect(page.context().pages()).toHaveLength(1)
+  expect((await a11y().analyze()).violations).toEqual([])
+})
+
+test('explains unconfigured Codex and prevents starting research without affecting the deck', async ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/deck')
+  const heading = page.getByRole('heading', { level: 1 })
+  await expect(heading).toBeVisible()
+  const originalTitle = await heading.textContent()
+  await showResearch(page)
+  const panel = page.getByRole('complementary', { name: 'Research chat' })
+  await expect(panel).toBeVisible()
+  await expect(
+    panel.getByText(
+      'The connection to Codex on your home server is not configured.',
+    ),
+  ).toBeVisible()
+  await expect(
+    panel.getByRole('button', { name: 'Send', exact: true }),
+  ).toBeDisabled()
+  await expect(panel.getByLabel('Message', { exact: true })).toBeDisabled()
+  const accessibility = await a11y().analyze()
+  expect(accessibility.violations).toEqual([])
+  await closeMobileSidebar(page)
+  await expect(heading).toHaveText(originalTitle ?? '')
+  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 closeMobileSidebar(page)
+  await expect(heading).toHaveText('手動の調査')
+  await showResearch(page)
+  await expect(panel).toBeVisible()
+})

e2e/integrations/support.test.ts

@@ -0,0 +1,158 @@
+import { expect, test } from '../fixtures'
+
+const reviewSubject = 'Schedule next week’s design review'
+const coffeeSubject = 'Catch up over coffee'
+
+test('reviews an edited reply and keeps the simulated result in history', async ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/support')
+  await page.waitForLoadState('networkidle')
+  const rows = page.locator('.support-row')
+  await expect(rows).toHaveCount(3)
+  await rows.filter({ hasText: reviewSubject }).click()
+  await page.getByRole('button', { name: 'Polite', exact: true }).click()
+  const reply = page.getByRole('textbox', { name: 'Reply', exact: true })
+  await expect(reply).toHaveValue(/Thank you for sharing/)
+  const edited =
+    'I reviewed the materials. Let’s discuss the first-time experience.'
+  await reply.fill(edited)
+  const slot = 'Mon, Oct 5, 14:00–14:30'
+  await page
+    .getByRole('combobox', { name: 'Suggested times' })
+    .selectOption(slot)
+  await page.getByRole('button', { name: 'Add to reply' }).click()
+  await expect(reply).toHaveValue(`${edited}\n\nWould ${slot} work for you?`)
+  await page.getByRole('button', { name: 'Review reply' }).click()
+  const dialog = page.getByRole('dialog', { name: 'Review reply' })
+  await expect(dialog).toContainText(edited)
+  await expect(dialog).toContainText(slot)
+  await expect(dialog).toContainText('No message will be sent')
+  expect((await a11y().analyze()).violations).toEqual([])
+  await dialog.getByRole('button', { name: 'Back', exact: true }).click()
+  await expect(reply).toHaveValue(new RegExp(edited))
+  await page.getByRole('button', { name: 'Review reply' }).click()
+  await dialog.getByRole('button', { name: 'Try sending' }).click()
+  await expect(dialog).toHaveCount(0)
+  await expect(rows.filter({ hasText: reviewSubject })).toHaveCount(0)
+  await page.getByRole('button', { name: 'History', exact: true }).click()
+  await rows.filter({ hasText: reviewSubject }).click()
+  await expect(page.locator('.support-outcome')).toContainText(edited)
+  await expect(page.locator('.support-outcome')).toContainText(slot)
+})
+
+test('defers a conversation and restores it to the current queue', async ({
+  page,
+}) => {
+  await page.goto('/support')
+  await page.waitForLoadState('networkidle')
+  const rows = page.locator('.support-row')
+  await rows.filter({ hasText: coffeeSubject }).click()
+  await page
+    .getByRole('textbox', { name: 'Reply', exact: true })
+    .fill('土曜の予定を確認してから返事するね。')
+  await page.getByRole('button', { name: 'Leave for later' }).click()
+  await expect(rows.filter({ hasText: coffeeSubject })).toHaveCount(0)
+  await page.getByRole('button', { name: 'Later', exact: true }).click()
+  await rows.filter({ hasText: coffeeSubject }).click()
+  await expect(
+    page.getByRole('textbox', { name: 'Reply', exact: true }),
+  ).toHaveValue('土曜の予定を確認してから返事するね。')
+  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 expect(rows.filter({ hasText: coffeeSubject })).toBeVisible()
+  await expect(
+    page.getByRole('button', { name: 'Now', exact: true }),
+  ).toHaveAttribute('aria-pressed', 'true')
+})
+
+test('keeps corrections as new records and summarizes only selected current facts', async ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/journal')
+  await page.waitForLoadState('networkidle')
+  await expect(
+    page.getByRole('button', { name: 'Save entry', exact: true }),
+  ).toBeDisabled()
+  await page
+    .getByRole('textbox', { name: 'Entry text' })
+    .fill('次はレビュー資料の導線を確認する')
+  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
+    .getByRole('article', { name: 'Weight entry' })
+    .getByRole('button', { name: 'Correct' })
+    .click()
+  const correction = page.getByRole('dialog', { name: 'Correct entry' })
+  await correction
+    .getByRole('spinbutton', { name: 'Weight', exact: true })
+    .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(
+    /Medication and weight are unknown for periods without entries/,
+  )
+  expect((await a11y().analyze()).violations).toEqual([])
+})
+
+test('fits communication and journal interactions in narrow screens', async ({
+  page,
+  a11y,
+}) => {
+  for (const width of [320, 375, 768]) {
+    await page.setViewportSize({ width, height: 850 })
+    await page.goto('/support')
+    await page.waitForLoadState('networkidle')
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBe(width)
+    await page.locator('.support-row').first().click()
+    await expect(
+      page.getByRole('textbox', { name: 'Reply', exact: true }),
+    ).toBeVisible()
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBe(width)
+    if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
+    const back = page.getByRole('button', { name: 'Back to messages' })
+    if (await back.isVisible()) await back.click()
+    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([])
+  }
+})

e2e/integrations/vitals.test.ts

@@ -0,0 +1,115 @@
+import { expect, test } from '../fixtures'
+
+test('filters body systems and opens lab history', async ({ page, a11y }) => {
+  await page.goto('/vitals')
+  await page.waitForLoadState('networkidle')
+  await expect(
+    page.getByRole('heading', { name: 'Body', exact: true }),
+  ).toBeVisible()
+  const systems = page.locator('.vital-system-card')
+  await expect(systems).toHaveCount(8)
+  await page
+    .locator('.vital-body-page > .vital-tabs')
+    .getByRole('button', { name: 'Cardiovascular', exact: true })
+    .click()
+  await expect(systems).toHaveCount(1)
+  await systems.first().click()
+  const dialog = page.getByRole('dialog', { name: 'Cardiovascular' })
+  await expect(dialog).toContainText('68')
+  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.getByRole('button', { name: 'Systems', exact: true }).click()
+  await page
+    .locator('.vital-body-page > .vital-tabs')
+    .getByRole('button', { name: 'Overview', exact: true })
+    .click()
+  await expect(systems).toHaveCount(8)
+  expect((await a11y().analyze()).violations).toEqual([])
+})
+
+test('explores environment charts and simulated climate controls', async ({
+  page,
+  a11y,
+}) => {
+  await page.goto('/vitals')
+  await page.waitForLoadState('networkidle')
+  const menu = page.getByRole('button', { name: 'Open Health menu' })
+  if (await menu.isVisible()) await menu.click()
+  await page
+    .getByRole('complementary', { name: 'Health navigation' })
+    .getByRole('button', { name: 'Environment', exact: true })
+    .click()
+  await expect(
+    page.getByRole('heading', { name: 'Environment', exact: true }),
+  ).toBeVisible()
+  await page.getByRole('button', { name: '7D', exact: true }).click()
+  await page
+    .getByRole('group', { name: 'Trend metric' })
+    .getByRole('button', { name: 'CO₂', exact: true })
+    .click()
+  await expect(
+    page.getByRole('img', { name: '7D CO₂ simulated environmental readings' }),
+  ).toBeVisible()
+  await page
+    .locator('.vital-metric')
+    .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(
+    page.getByRole('status').filter({ hasText: 'Sample readings refreshed' }),
+  ).toBeVisible()
+  expect((await a11y().analyze()).violations).toEqual([])
+  await page
+    .getByRole('button', { name: 'Climate control', exact: true })
+    .click()
+  await page.getByRole('button', { name: 'Cool', exact: true }).click()
+  await expect(
+    page.getByRole('button', { name: 'Cool', exact: true }),
+  ).toHaveAttribute('aria-pressed', 'true')
+  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')
+})
+
+test('keeps both dashboards within the viewport', async ({
+  page,
+}, testInfo) => {
+  await page.goto('/vitals')
+  await page.waitForLoadState('networkidle')
+  for (const width of [375, 768, 1440]) {
+    await page.setViewportSize({ width, height: 1000 })
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBe(width)
+    await page.screenshot({ path: testInfo.outputPath(`body-${width}.png`) })
+    const menu = page.getByRole('button', { name: 'Open Health menu' })
+    if (await menu.isVisible()) await menu.click()
+    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 page.screenshot({
+      path: testInfo.outputPath(`environment-${width}.png`),
+    })
+    if (await menu.isVisible()) await menu.click()
+    await navigation.getByRole('button', { name: 'Body', exact: true }).click()
+  }
+})

e2e/integrations/webmcp.test.ts

@@ -0,0 +1,332 @@
+import type { Page } from '@playwright/test'
+import Database from 'better-sqlite3'
+import { expect, test } from '../fixtures'
+
+type NativeTesting = {
+  listTools(): { name: string }[]
+  executeTool(name: string, input: string): Promise<string | null>
+}
+type ToolResult = {
+  content: { type: string; text: string }[]
+  isError?: boolean
+}
+test.use({
+  launchOptions: {
+    executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
+    args: ['--enable-blink-features=WebMCP,WebMCPTesting'],
+  },
+})
+async function toolNames(page: Page) {
+  return page.evaluate(() =>
+    (
+      navigator as Navigator & { modelContextTesting: NativeTesting }
+    ).modelContextTesting
+      .listTools()
+      .map((tool) => tool.name)
+      .sort(),
+  )
+}
+async function executeTool(
+  page: Page,
+  name: string,
+  input: Record<string, unknown> = {},
+): Promise<ToolResult> {
+  const result = await page.evaluate(
+    ({ name, input }) =>
+      (
+        navigator as Navigator & { modelContextTesting: NativeTesting }
+      ).modelContextTesting.executeTool(name, JSON.stringify(input)),
+    { name, input },
+  )
+  expect(result).not.toBeNull()
+  return JSON.parse(result ?? '{}')
+}
+function decoded(result: ToolResult) {
+  return JSON.parse(result.content[0]?.text ?? '{}')
+}
+const column = (title: string, connectionId: string) => ({
+  title,
+  connectionId,
+  source: { kind: 'search', query: 'WebMCP' },
+})
+function savedCount() {
+  const db = new Database(process.env.TWITTER_LITE_E2E_DB_PATH ?? '', {
+    readonly: true,
+  })
+  try {
+    return db.prepare('SELECT count(*) AS count FROM decks').get()
+  } finally {
+    db.close()
+  }
+}
+let accounts: Record<string, string>
+let pageErrors: string[]
+test.beforeEach(async ({ page }) => {
+  pageErrors = []
+  page.on('pageerror', (error) => pageErrors.push(error.message))
+  await page.goto('/deck')
+  await expect
+    .poll(() => toolNames(page))
+    .toEqual([
+      'delete_deck',
+      'get_column_posts',
+      'get_deck',
+      'list_connections',
+      'list_decks',
+      'load_more_column',
+      'save_deck',
+      'select_deck',
+      'set_deck',
+    ])
+  await expect
+    .poll(
+      async () =>
+        decoded(await executeTool(page, 'list_connections')).connections
+          ?.length,
+    )
+    .toBe(2)
+  accounts = Object.fromEntries(
+    decoded(await executeTool(page, 'list_connections')).connections.map(
+      (connection: { displayName: string; id: string }) => [
+        connection.displayName,
+        connection.id,
+      ],
+    ),
+  )
+})
+test.afterEach(() => expect(pageErrors).toEqual([]))
+
+test('creates temporary research, edits it, persists explicitly and reopens it on another device', async ({
+  page,
+  browser,
+  baseURL,
+}) => {
+  const created = await executeTool(page, 'set_deck', {
+    title: 'WebMCPの反応',
+    columns: [
+      { ...column('日本語', accounts.e2e ?? ''), id: 'new' },
+      column('別の接続', accounts.alternate ?? ''),
+    ],
+  })
+  expect(created.isError).not.toBe(true)
+  const deck = decoded(created).deck
+  expect(deck.persisted).toBe(false)
+  expect(savedCount()).toEqual({ count: 0 })
+  await expect(
+    page.getByText('alternate · Latest · all page 1', { exact: true }),
+  ).toBeVisible()
+  await page
+    .getByRole('region', { name: '日本語', exact: true })
+    .getByRole('button', { name: 'Actions for 日本語' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Edit', exact: true }).click()
+  const replaced = await executeTool(page, 'set_deck', {
+    deckId: deck.id,
+    title: '更新した調査',
+    columns: [deck.columns[1]],
+  })
+  expect(replaced.isError).not.toBe(true)
+  await expect(page.getByRole('dialog')).toHaveCount(0)
+  expect(savedCount()).toEqual({ count: 0 })
+  expect(
+    (await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
+  ).not.toBe(true)
+  expect(
+    (await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
+  ).not.toBe(true)
+  expect(savedCount()).toEqual({ count: 1 })
+  const other = await browser.newContext({
+    storageState: await page.context().storageState(),
+    baseURL,
+    extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
+  })
+  try {
+    const device = await other.newPage()
+    await device.goto('/deck')
+    await expect(device.getByRole('heading', { level: 1 })).toHaveText(
+      '更新した調査',
+    )
+    await expect(
+      device.getByText('alternate · Latest · all page 1', { exact: true }),
+    ).toBeVisible()
+  } finally {
+    await other.close()
+  }
+  await page.reload()
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '更新した調査',
+  )
+})
+
+test('requires revisions for saved mutations and rejects stale overwrites', async ({
+  page,
+}) => {
+  const deck = decoded(
+    await executeTool(page, 'set_deck', { title: '保存済み', columns: [] }),
+  ).deck
+  await executeTool(page, 'save_deck', { deckId: deck.id })
+  expect(
+    (
+      await executeTool(page, 'set_deck', {
+        deckId: deck.id,
+        title: '変更',
+        columns: [],
+      })
+    ).isError,
+  ).toBe(true)
+  expect(
+    (
+      await executeTool(page, 'set_deck', {
+        deckId: deck.id,
+        expectedRevision: 1,
+        title: '変更',
+        columns: [],
+      })
+    ).isError,
+  ).not.toBe(true)
+  expect(
+    (
+      await executeTool(page, 'set_deck', {
+        deckId: deck.id,
+        expectedRevision: 1,
+        title: '古い変更',
+        columns: [],
+      })
+    ).isError,
+  ).toBe(true)
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText('変更')
+  expect(
+    (
+      await executeTool(page, 'delete_deck', {
+        deckId: deck.id,
+        expectedRevision: 1,
+      })
+    ).isError,
+  ).toBe(true)
+  expect(
+    (
+      await executeTool(page, 'delete_deck', {
+        deckId: deck.id,
+        expectedRevision: 2,
+      })
+    ).isError,
+  ).not.toBe(true)
+  expect(savedCount()).toEqual({ count: 0 })
+})
+
+test('keeps temporary views independent and loses only unsaved views on reload', async ({
+  page,
+}) => {
+  const first = decoded(
+    await executeTool(page, 'set_deck', { title: '一時の調査A', columns: [] }),
+  ).deck
+  const second = decoded(
+    await executeTool(page, 'set_deck', { title: '一時の調査B', columns: [] }),
+  ).deck
+  await executeTool(page, 'select_deck', { deckId: first.id })
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '一時の調査A',
+  )
+  await executeTool(page, 'delete_deck', { deckId: second.id })
+  expect(
+    decoded(await executeTool(page, 'list_decks')).decks.some(
+      (deck: { id: string }) => deck.id === second.id,
+    ),
+  ).toBe(false)
+  expect(savedCount()).toEqual({ count: 0 })
+  await page.reload()
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    'New research',
+  )
+})
+
+test('rejects invalid input without changing the active view', async ({
+  page,
+}) => {
+  await executeTool(page, 'set_deck', {
+    title: '残す調査',
+    columns: [column('残す観点', accounts.e2e ?? '')],
+  })
+  const duplicate = { ...column('不正', accounts.e2e ?? ''), id: 'duplicate' }
+  for (const columns of [
+    [duplicate, duplicate],
+    [column('不明', 'missing')],
+    [
+      {
+        ...column('不正', accounts.e2e ?? ''),
+        source: { kind: 'list', target: 'invalid' },
+      },
+    ],
+  ]) {
+    expect(
+      (await executeTool(page, 'set_deck', { title: '変更しない', columns }))
+        .isError,
+    ).toBe(true)
+    await expect(page.locator('.deck-column h2')).toHaveText(['残す観点'])
+  }
+  expect(savedCount()).toEqual({ count: 0 })
+})
+
+test('keeps failed temporary saves visible and allows retry without duplicate decks', async ({
+  page,
+}) => {
+  const deck = decoded(
+    await executeTool(page, 'set_deck', { title: '未保存の調査', columns: [] }),
+  ).deck
+  await page.route('**/_serverFn/**', (route) =>
+    route.request().method() === 'POST' ? route.abort() : route.continue(),
+  )
+  expect(
+    (await executeTool(page, 'save_deck', { deckId: deck.id })).isError,
+  ).toBe(true)
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '未保存の調査',
+  )
+  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 ({
+  page,
+}) => {
+  const deck = decoded(
+    await executeTool(page, 'set_deck', {
+      title: '接続を比較',
+      columns: [
+        column('通常', accounts.e2e ?? ''),
+        column('別の接続', accounts.alternate ?? ''),
+      ],
+    }),
+  ).deck
+  await expect(
+    page.getByText('alternate · Latest · all page 1', { exact: true }),
+  ).toBeVisible()
+  const id = deck.columns[1].id
+  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([
+    'alternate · Latest · all page 1',
+  ])
+  const more = decoded(
+    await executeTool(page, 'load_more_column', { columnId: id }),
+  )
+  expect(more).toMatchObject({ loadedCount: 2, offset: 1, hasMore: false })
+  expect(more.posts.map((post: { text: string }) => post.text)).toEqual([
+    'alternate · Latest · all page 2',
+  ])
+  await expect(
+    page.getByRole('region', { name: '通常', exact: true }).locator('article'),
+  ).toHaveCount(1)
+  await executeTool(page, 'set_deck', { title: '別の一時ビュー', columns: [] })
+  expect(
+    (await executeTool(page, 'get_column_posts', { columnId: id })).isError,
+  ).toBe(true)
+})

e2e/integrations/workspace.test.ts

@@ -0,0 +1,41 @@
+import { expect, test } from '../fixtures'
+import { closeMobileSidebar, showResearch } from '../workspace'
+
+test('keeps the sidebar, composer and deck reachable at compact widths', async ({
+  page,
+  a11y,
+}, testInfo) => {
+  await page.goto('/deck')
+  for (const width of [320, 375, 414, 768]) {
+    await page.setViewportSize({ width, height: 850 })
+    await showResearch(page)
+    const chat = page.getByRole('complementary', { name: 'Research chat' })
+    await expect(chat).toBeVisible()
+    const composer = chat.getByRole('textbox', {
+      name: 'Message',
+      exact: true,
+    })
+    await expect(composer).toBeVisible()
+    const bounds = await composer.boundingBox()
+    if (!bounds) throw new Error('Composer must have a visible bounding box')
+    expect(bounds.x).toBeGreaterThanOrEqual(0)
+    expect(bounds.x + bounds.width).toBeLessThanOrEqual(width)
+    expect(bounds.y + bounds.height).toBeLessThanOrEqual(850)
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth),
+    ).toBe(width)
+    await page.screenshot({
+      path: testInfo.outputPath(`workspace-${width}.png`),
+    })
+    if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
+    await closeMobileSidebar(page)
+  }
+  await page.getByRole('button', { name: 'Toggle sidebar' }).click()
+  await expect(
+    page.getByRole('complementary', { name: 'Research chat' }),
+  ).toBeHidden()
+  await page.getByRole('button', { name: 'Research chat', exact: true }).click()
+  await expect(
+    page.getByRole('complementary', { name: 'Research chat' }),
+  ).toBeVisible()
+})

e2e/mock-relay.mjs

@@ -1,4 +1,5 @@
 import { createServer } from 'node:http'
+import { tweetLegacyFixture } from './fixtures/twitter.ts'
 
 const portValue = process.env.TWITTER_LITE_MOCK_RELAY_PORT
 const port = Number(portValue)
@@ -11,10 +12,12 @@ const failedRetryQueries = new Set()
 const rootByTarget = new Map([
   ['1001', '1000'],
   ['2001', '2000'],
+  ['3001', '3000'],
 ])
 const targetByRoot = new Map([
   ['1000', '1001'],
   ['2000', '2001'],
+  ['3000', '3001'],
 ])
 const failedThreadRoots = new Set()
 
@@ -25,18 +28,14 @@ const tweetResult = (
   id,
   text,
   username = 'yuta',
-  { conversationId = id, inReplyTo } = {},
+  { conversationId = id, inReplyTo, replyCount = 1 } = {},
 ) => ({
   rest_id: id,
-  legacy: {
+  legacy: tweetLegacyFixture(id, text, {
-    full_text: text,
+    conversationId,
-    created_at: 'Mon Jul 13 00:00:00 +0000 2026',
+    inReplyTo,
-    reply_count: 1,
+    replyCount,
-    retweet_count: 2,
+  }),
-    favorite_count: 3,
-    conversation_id_str: conversationId,
-    ...(inReplyTo ? { in_reply_to_status_id_str: inReplyTo } : {}),
-  },
   core: {
     user_results: {
       result: {
@@ -97,6 +96,11 @@ const timeline = (entries) => ({ instructions: [{ entries }] })
 
 const server = createServer(async (request, response) => {
   const url = new URL(request.url ?? '/', `http://127.0.0.1:${port}`)
+  if (request.method === 'GET' && url.pathname === '/profiles') {
+    send(response, { profiles: ['e2e', 'alternate'] })
+    return
+  }
+
   const operation = [
     'UserByScreenName',
     'UserTweets',
@@ -118,7 +122,8 @@ const server = createServer(async (request, response) => {
     })
     return
   }
-  if (request.headers['x-profile-name'] !== 'e2e') {
+  const profileName = request.headers['x-profile-name']
+  if (profileName !== 'e2e' && profileName !== 'alternate') {
     fail(response, 403, 'invalid profile')
     return
   }
@@ -164,10 +169,12 @@ const server = createServer(async (request, response) => {
       return
     }
     const secondPage = variables.cursor === 'user-next'
+    const firstPageText =
+      profileName === 'alternate' ? 'alternate profile page 1' : 'user page 1'
     const entries = secondPage
       ? [tweet('1010', 'user page 2')]
       : [
-          tweet('1001', 'user page 1', 'yuta', {
+          tweet('1001', firstPageText, 'yuta', {
             conversationId: '1000',
           }),
           cursor('user-next'),
@@ -211,7 +218,10 @@ const server = createServer(async (request, response) => {
                               itemContent: {
                                 list: {
                                   id_str: '1234567890',
-                                  name: 'My E2E List',
+                                  name:
+                                    profileName === 'alternate'
+                                      ? 'Alternate List'
+                                      : 'My E2E List',
                                   description: 'Accounts selected for testing',
                                   member_count: 10,
                                   mode: 'Public',
@@ -288,10 +298,16 @@ const server = createServer(async (request, response) => {
 
     const targetRoot = rootByTarget.get(focalTweetId)
     if (targetRoot && variables.cursor === undefined) {
-      const text = focalTweetId === '1001' ? 'user page 1' : 'retry focal'
+      const noReplies = focalTweetId === '3001'
+      const text = noReplies
+        ? 'no replies'
+        : focalTweetId === '1001'
+          ? 'user page 1'
+          : 'retry focal'
       const result = tweetResult(focalTweetId, text, 'focus', {
         conversationId: targetRoot,
         inReplyTo: targetRoot,
+        replyCount: noReplies ? 0 : 1,
       })
       send(response, {
         data: {
@@ -303,6 +319,7 @@ const server = createServer(async (request, response) => {
                   tweet(focalTweetId, text, 'focus', {
                     conversationId: targetRoot,
                     inReplyTo: targetRoot,
+                    replyCount: noReplies ? 0 : 1,
                   }),
                 ],
               },
@@ -323,6 +340,10 @@ const server = createServer(async (request, response) => {
       fail(response, 400, 'invalid thread cursor')
       return
     }
+    if (variables.cursor && focalTweetId === '3000') {
+      fail(response, 500, 'zero-reply thread must not request a continuation')
+      return
+    }
     if (
       variables.cursor &&
       focalTweetId === '2000' &&
@@ -340,6 +361,18 @@ const server = createServer(async (request, response) => {
             inReplyTo: targetId,
           }),
         ]
+      : focalTweetId === '3000'
+        ? [
+            tweet(focalTweetId, 'thread root', 'root', {
+              conversationId: focalTweetId,
+            }),
+            tweet(targetId, 'no replies', 'focus', {
+              conversationId: focalTweetId,
+              inReplyTo: focalTweetId,
+              replyCount: 0,
+            }),
+            cursor(expectedCursor),
+          ]
         : [
             tweet(focalTweetId, 'thread root', 'root', {
               conversationId: focalTweetId,
@@ -426,7 +459,7 @@ const server = createServer(async (request, response) => {
   }
 
   const follows = rawQuery.includes('filter:follows') ? 'follows' : 'all'
-  const label = `${variables.product} · ${follows}`
+  const label = `${profileName === 'alternate' ? 'alternate · ' : ''}${variables.product} · ${follows}`
   const id = encodeURIComponent(rawQuery)
   const entries = secondPage
     ? [tweet(`s-${id}-2`, `${label} page 2`)]

e2e/workspace.ts

@@ -0,0 +1,39 @@
+import { expect, type Page } from '@playwright/test'
+
+export async function showDeckManagement(page: Page) {
+  await expect(
+    page.getByRole('button', { name: 'Rename', includeHidden: true }),
+  ).toBeEnabled()
+  const navigation = page.getByRole('button', {
+    name: 'Deck manager',
+    exact: true,
+  })
+  if (!(await navigation.isVisible())) {
+    await page.getByRole('button', { name: 'Toggle sidebar' }).click()
+  }
+  await navigation.click()
+}
+
+export async function showResearch(page: Page) {
+  await expect(
+    page.getByRole('button', { name: 'Rename', includeHidden: true }),
+  ).toBeEnabled()
+  const navigation = page.getByRole('button', {
+    name: 'Research chat',
+    exact: true,
+  })
+  if (!(await navigation.isVisible())) {
+    await page.getByRole('button', { name: 'Toggle sidebar' }).click()
+  }
+  await navigation.click()
+}
+
+export async function closeMobileSidebar(page: Page) {
+  const sheet = page.locator('[data-mobile="true"][data-sidebar="sidebar"]')
+  if (await sheet.isVisible()) {
+    await page
+      .getByRole('button', { name: 'Close sidebar', exact: true })
+      .click()
+    await expect(sheet).toBeHidden()
+  }
+}

flake.lock

@@ -1,6 +1,78 @@
 {
   "nodes": {
+    "agent-skills-nix": {
+      "inputs": {
+        "home-manager": "home-manager",
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1783839654,
+        "narHash": "sha256-rn5DkeQ9PBaJTZl9juBtPnVawyN4B83tyz1VpiinQFo=",
+        "owner": "Kyure-A",
+        "repo": "agent-skills-nix",
+        "rev": "8326df98cf494dc515db99affa9ea9d2bd6666b6",
+        "type": "github"
+      },
+      "original": {
+        "owner": "Kyure-A",
+        "repo": "agent-skills-nix",
+        "type": "github"
+      }
+    },
+    "hallmark": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1780605762,
+        "narHash": "sha256-+yPIG1XdI6hhyOH48rd20+YlFrA9Gr416tPt1OoxfwQ=",
+        "owner": "Nutlope",
+        "repo": "hallmark",
+        "rev": "aeb42fb354ff4efa36ab475773a082315a3af2ce",
+        "type": "github"
+      },
+      "original": {
+        "owner": "Nutlope",
+        "repo": "hallmark",
+        "type": "github"
+      }
+    },
+    "home-manager": {
+      "inputs": {
+        "nixpkgs": [
+          "agent-skills-nix",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1783222121,
+        "narHash": "sha256-E/ElL373TO8lQ2aMvYyzN+k4xkVaUGoRqoa8AtM71tI=",
+        "owner": "nix-community",
+        "repo": "home-manager",
+        "rev": "a1645f40777620c4bd2b6d854b290c2fc354a266",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-community",
+        "repo": "home-manager",
+        "type": "github"
+      }
+    },
     "nixpkgs": {
+      "locked": {
+        "lastModified": 1783224372,
+        "narHash": "sha256-8i/87eeoqiGE4yOTjwSA3Eh/ziJRQEmd/unYU+K27sk=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "d407951447dcd00442e97087bf374aad70c04cea",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
       "locked": {
         "lastModified": 1783776592,
         "narHash": "sha256-UgCQzxeWI75XM8G+hPrPh+MKzEPjG3SpAj7dtqSbksA=",
@@ -18,7 +90,9 @@
     },
     "root": {
       "inputs": {
-        "nixpkgs": "nixpkgs"
+        "agent-skills-nix": "agent-skills-nix",
+        "hallmark": "hallmark",
+        "nixpkgs": "nixpkgs_2"
       }
     }
   },

flake.nix

@@ -2,8 +2,13 @@
   description = "Intentional X reader";
 
   inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+  inputs.agent-skills-nix.url = "github:Kyure-A/agent-skills-nix";
+  inputs.hallmark = {
+    url = "github:Nutlope/hallmark";
+    flake = false;
+  };
 
-  outputs = { self, nixpkgs, ... }:
+  outputs = inputs@{ self, nixpkgs, ... }:
     let
       systems = [ "x86_64-linux" "aarch64-linux" ];
       forAllSystems = nixpkgs.lib.genAttrs systems;
@@ -17,7 +22,7 @@
             inherit (finalAttrs) pname version src;
             pnpm = pkgs.pnpm_11;
             fetcherVersion = 4;
-            hash = "sha256-XWzEz145/ZJ9rv5vjLiRXlyVXr42URlcouiLVwhRwtE=";
+            hash = "sha256-+DqNt+58TrI0W8SU//JNdYYJtCdKNIG7gfWRxno36QQ=";
           };
 
           nativeBuildInputs = with pkgs; [
@@ -39,6 +44,10 @@
             cp -r .output/. $out/lib/twitter-lite/
             makeWrapper ${nixpkgs.lib.getExe pkgs.nodejs_22} $out/bin/twitter-lite \
               --add-flags "$out/lib/twitter-lite/server/index.mjs"
+            makeWrapper ${nixpkgs.lib.getExe pkgs.nodejs_22} $out/bin/twitter-lite-backup \
+              --add-flags "$out/lib/twitter-lite/server/tools/backup-database.js"
+            makeWrapper ${nixpkgs.lib.getExe pkgs.nodejs_22} $out/bin/twitter-lite-setup \
+              --add-flags "$out/lib/twitter-lite/server/tools/account-setup.js"
             runHook postInstall
           '';
 
@@ -55,10 +64,34 @@
         });
 
       devShells = forAllSystems (system:
-        let pkgs = import nixpkgs { inherit system; };
+        let
+          pkgs = import nixpkgs { inherit system; };
+          agentLib = inputs.agent-skills-nix.lib.agent-skills;
+          sources.hallmark = {
+            path = inputs.hallmark;
+            subdir = "skills";
+          };
+          catalog = agentLib.discoverCatalog sources;
+          allowlist = agentLib.allowlistFor {
+            inherit catalog sources;
+            enableAll = true;
+          };
+          selection = agentLib.selectSkills {
+            inherit catalog allowlist sources;
+            skills = { };
+          };
+          bundle = agentLib.mkBundle { inherit pkgs selection; };
+          localTargets = builtins.mapAttrs (_: target:
+            target // {
+              enable = true;
+            }) agentLib.defaultLocalTargets;
         in {
           default = pkgs.mkShell {
             packages = with pkgs; [ nodejs_22 pnpm chromium ];
+            shellHook = agentLib.mkShellHook {
+              inherit pkgs bundle;
+              targets = localTargets;
+            };
             PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "1";
             PLAYWRIGHT_CHROMIUM_EXECUTABLE =
               "${pkgs.chromium}/bin/chromium";
@@ -69,13 +102,13 @@
         let cfg = config.services.twitter-lite;
         in {
           options.services.twitter-lite = {
-            enable = lib.mkEnableOption "Twitter Lite";
+            enable = lib.mkEnableOption "Personal Workspace";
 
             package = lib.mkOption {
               type = lib.types.package;
               default = mkTwitterLite pkgs;
               defaultText = lib.literalExpression "twitter-lite.packages.\${pkgs.system}.default";
-              description = "Twitter Lite package to run.";
+              description = "Personal Workspace package to run.";
             };
 
             relayBaseUrl = lib.mkOption {
@@ -84,40 +117,61 @@
               description = "Base URL of the Twitter relay.";
             };
 
-            profileName = lib.mkOption {
+            publicOrigin = lib.mkOption {
-              type = lib.types.nullOr lib.types.nonEmptyStr;
+              type = lib.types.nonEmptyStr;
-              default = null;
+              example = "https://home.example-tailnet.ts.net";
-              example = "default";
+              description = "Exact Tailscale Serve HTTPS origin, without a trailing slash.";
-              description = "Relay profile to use when the relay has multiple profiles.";
             };
 
-            host = lib.mkOption {
+            allowedLogin = lib.mkOption {
               type = lib.types.nonEmptyStr;
-              default = "127.0.0.1";
+              description = "Tailscale login allowed to access this personal workspace.";
-              description = "Address on which Twitter Lite listens.";
+            };
+
+            credentialKeyFile = lib.mkOption {
+              type = lib.types.nullOr lib.types.str;
+              default = null;
+              example = "/var/lib/secrets/twitter-lite-key";
+              description = "Runtime file containing the base64-encoded 32-byte credential encryption key. Never put this key in the Nix store.";
+            };
+
+            mastodonOrigins = lib.mkOption {
+              type = lib.types.listOf lib.types.nonEmptyStr;
+              default = [ ];
+              example = [ "https://mastodon.social" ];
+              description = "Allowed Mastodon HTTPS origins, without trailing slashes.";
             };
 
             port = lib.mkOption {
               type = lib.types.port;
               default = 3000;
-              description = "Port on which Twitter Lite listens.";
+              description = "Port on which Personal Workspace listens.";
             };
           };
 
           config = lib.mkIf cfg.enable {
             systemd.services.twitter-lite = {
-              description = "Twitter Lite";
+              description = "Personal Workspace";
               after = [ "network.target" ];
               wantedBy = [ "multi-user.target" ];
               environment = {
-                HOST = cfg.host;
+                HOST = "127.0.0.1";
                 PORT = toString cfg.port;
                 TWITTER_RELAY_BASE_URL = cfg.relayBaseUrl;
-              } // lib.optionalAttrs (cfg.profileName != null) {
+                TWITTER_LITE_ORIGIN = cfg.publicOrigin;
-                BIRD_PROFILE_NAME = cfg.profileName;
+                TWITTER_LITE_ALLOWED_LOGIN = cfg.allowedLogin;
+                TWITTER_LITE_DB_PATH = "/var/lib/twitter-lite/workspace.sqlite";
+                TWITTER_LITE_MASTODON_ORIGINS = lib.concatStringsSep "," cfg.mastodonOrigins;
+              } // lib.optionalAttrs (cfg.credentialKeyFile != null) {
+                TWITTER_LITE_CREDENTIAL_KEY_FILE = "%d/credential-key";
               };
               serviceConfig = {
                 DynamicUser = true;
+                StateDirectory = "twitter-lite";
+                StateDirectoryMode = "0700";
+                UMask = "0077";
+                LoadCredential = lib.optional (cfg.credentialKeyFile != null)
+                  "credential-key:${cfg.credentialKeyFile}";
                 ExecStart = lib.getExe cfg.package;
                 Restart = "on-failure";
               };

knip.ts

@@ -1,10 +1,6 @@
 import type { KnipConfig } from 'knip'
 
 export default {
-  entry: [
+  entry: ['playwright.config.ts', 'e2e/**/*.test.ts', 'e2e/mock-relay.mjs'],
-    'playwright.config.ts',
-    'tests/e2e/**/*.spec.ts',
-    'tests/e2e/mock-relay.mjs',
-  ],
   playwright: false,
 } satisfies KnipConfig

orval.config.ts

@@ -0,0 +1,75 @@
+import { defineConfig, defineTransformer } from 'orval'
+
+const selectedTag = 'twitter-lite-e2e'
+const selectedOperationIds = new Set([
+  'getUserByScreenName',
+  'getUserTweets',
+  'getTweetDetail',
+  'getSearchTimeline',
+  'getListLatestTweetsTimeline',
+])
+
+const selectE2eOperations = defineTransformer((document) => {
+  const foundOperationIds = new Set<string>()
+
+  for (const pathItem of Object.values(document.paths ?? {})) {
+    if (!pathItem || typeof pathItem !== 'object') continue
+
+    for (const candidate of Object.values(pathItem)) {
+      if (
+        !candidate ||
+        typeof candidate !== 'object' ||
+        Array.isArray(candidate) ||
+        !('operationId' in candidate)
+      ) {
+        continue
+      }
+
+      const operation = candidate as {
+        operationId?: string
+        tags?: string[]
+      }
+
+      if (
+        operation.operationId &&
+        selectedOperationIds.has(operation.operationId)
+      ) {
+        foundOperationIds.add(operation.operationId)
+        operation.tags = [...(operation.tags ?? []), selectedTag]
+      }
+    }
+  }
+
+  const missingOperationIds = [...selectedOperationIds].filter(
+    (operationId) => !foundOperationIds.has(operationId),
+  )
+  if (missingOperationIds.length > 0) {
+    throw new Error(
+      `twitter-openapi is missing selected operations: ${missingOperationIds.join(', ')}`,
+    )
+  }
+
+  return document
+})
+
+export default defineConfig({
+  twitterOpenApi: {
+    input: {
+      target:
+        'https://raw.githubusercontent.com/fa0311/twitter-openapi/590dae5c9f8575abc91d3774946bfe6f23960aba/dist/docs/openapi-3.0.yaml',
+      filters: {
+        mode: 'include',
+        tags: [selectedTag],
+      },
+      override: {
+        transformer: selectE2eOperations,
+      },
+    },
+    output: {
+      clean: true,
+      client: 'fetch',
+      mode: 'single',
+      target: './e2e/generated/twitter-openapi/client.ts',
+    },
+  },
+})

package.json

@@ -6,48 +6,90 @@
   "engines": {
     "node": ">=22.12.0"
   },
+  "knip": {
+    "ignoreBinaries": [
+      "codex"
+    ],
+    "ignore": [
+      "e2e/generated/**"
+    ],
+    "ignoreIssues": {
+      "src/components/ui/**": [
+        "exports"
+      ]
+    }
+  },
   "imports": {
     "#/*": "./src/*"
   },
   "scripts": {
+    "codex:serve": "node scripts/serve-codex.mjs",
+    "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",
     "dev": "vite dev --host 127.0.0.1 --port 3000",
-    "dev:tailscale": "vite dev --host 0.0.0.0 --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-routes": "node scripts/generate-routes.mjs",
     "check:routes": "pnpm generate-routes && git diff --exit-code -- src/routeTree.gen.ts",
-    "build": "vite build",
+    "build": "vite build && node scripts/build-tools.mjs",
     "start": "HOST=127.0.0.1 node .output/server/index.mjs",
     "typecheck": "tsc --noEmit",
-    "lint": "biome check .",
+    "lint": "biome check . && pnpm lint:ui",
     "knip": "knip",
     "format": "biome check --write .",
     "test": "vitest run",
     "test:watch": "vitest",
     "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"
   },
   "dependencies": {
+    "@base-ui/react": "1.8.0",
+    "@shadcn/react": "^0.3.1",
     "@tanstack/react-query": "5.101.2",
     "@tanstack/react-router": "1.170.17",
     "@tanstack/react-router-ssr-query": "1.167.1",
     "@tanstack/react-start": "1.168.27",
     "@yuta/bird": "0.10.1",
+    "better-sqlite3": "13.0.3",
+    "class-variance-authority": "0.7.1",
+    "cn": "^0.4.0",
+    "drizzle-orm": "0.45.3",
+    "lucide-react": "1.48.0",
     "nitro": "3.0.260610-beta",
     "react": "19.2.7",
     "react-dom": "19.2.7",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1",
+    "sanitize-html": "2.17.7",
+    "shadcn": "4.21.0",
+    "tw-animate-css": "1.4.0",
+    "usewebmcp": "5.1.0",
     "zod": "4.4.3"
   },
   "devDependencies": {
+    "@axe-core/playwright": "4.11.1",
     "@biomejs/biome": "2.5.3",
     "@playwright/test": "1.61.1",
+    "@shadcn/lint": "^0.2.0",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
+    "@types/better-sqlite3": "9.6.0",
     "@types/node": "26.1.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
+    "@types/sanitize-html": "2.16.1",
     "@vitejs/plugin-react": "6.0.3",
+    "drizzle-kit": "0.31.11",
     "jsdom": "29.1.1",
     "knip": "6.27.0",
+    "orval": "8.24.0",
+    "oxlint": "^1.85.0",
+    "tailwindcss": "^4.3.3",
+    "tsx": "4.23.12",
     "typescript": "7.0.2",
     "vite": "8.1.4",
     "vitest": "4.1.10"

playwright.config.ts

@@ -1,8 +1,15 @@
+import { mkdtempSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
 import { defineConfig, devices } from '@playwright/test'
 
 const appPort = 4173
 const relayPort = 6911
 const chromiumExecutable = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE
+const databasePath =
+  process.env.TWITTER_LITE_E2E_DB_PATH ??
+  join(mkdtempSync(join(tmpdir(), 'twitter-lite-e2e-')), 'workspace.sqlite')
+process.env.TWITTER_LITE_E2E_DB_PATH = databasePath
 
 if (!chromiumExecutable) {
   throw new Error(
@@ -11,25 +18,26 @@ if (!chromiumExecutable) {
 }
 
 export default defineConfig({
-  testDir: './tests/e2e',
+  testDir: './e2e',
   fullyParallel: false,
   workers: 1,
   use: {
     baseURL: `http://127.0.0.1:${appPort}`,
+    extraHTTPHeaders: { 'Tailscale-User-Login': '[email protected]' },
     launchOptions: { executablePath: chromiumExecutable },
     screenshot: 'only-on-failure',
     trace: 'retain-on-failure',
   },
   webServer: [
     {
-      command: `TWITTER_LITE_MOCK_RELAY_PORT=${relayPort} node tests/e2e/mock-relay.mjs`,
+      command: `TWITTER_LITE_MOCK_RELAY_PORT=${relayPort} pnpm exec tsx e2e/mock-relay.mjs`,
       port: relayPort,
       reuseExistingServer: false,
       timeout: 120_000,
     },
     {
-      command: `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_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`,
-      url: `http://127.0.0.1:${appPort}`,
+      port: appPort,
       reuseExistingServer: false,
       timeout: 120_000,
     },

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 allowBuilds:
+  better-sqlite3: false
   esbuild: true

scripts/account-setup.ts

@@ -0,0 +1,13 @@
+import { getSetupToken, readAuthState } from '../src/features/auth/auth.server'
+
+if (!readAuthState().needsSetup) {
+  console.error(
+    'This workspace already has an owner. Sign in with your existing account.',
+  )
+  process.exitCode = 1
+} else {
+  console.log(
+    'Open /setup in your workspace and enter this one-time setup code:',
+  )
+  console.log(getSetupToken())
+}

scripts/backup-database.ts

@@ -0,0 +1,13 @@
+import { backupDatabase } from '../src/features/storage/backup.server'
+
+const source = process.env.TWITTER_LITE_DB_PATH
+const destination = process.argv[2]
+if (!source || !destination || process.argv.length !== 3) {
+  console.error(
+    'Usage: TWITTER_LITE_DB_PATH=/absolute/app.db pnpm db:backup /absolute/backup.db',
+  )
+  process.exitCode = 1
+} else {
+  await backupDatabase(source, destination)
+  console.log(`Backup verified: ${destination}`)
+}

scripts/build-tools.mjs

@@ -0,0 +1,13 @@
+import { build } from 'vite'
+
+for (const entry of ['backup-database', 'account-setup']) {
+  await build({
+    configFile: false,
+    build: {
+      ssr: `scripts/${entry}.ts`,
+      outDir: '.output/server/tools',
+      emptyOutDir: false,
+      rollupOptions: { external: ['better-sqlite3'] },
+    },
+  })
+}

scripts/bundle-migrations.mjs

@@ -0,0 +1,10 @@
+import { writeFileSync } from 'node:fs'
+import { readMigrationFiles } from 'drizzle-orm/migrator'
+
+const migrations = readMigrationFiles({
+  migrationsFolder: new URL('../drizzle', import.meta.url).pathname,
+})
+writeFileSync(
+  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`,
+)

scripts/serve-codex.mjs

@@ -0,0 +1,94 @@
+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))

src/components/app-shell.tsx

@@ -1,36 +1,136 @@
-import { Link } from '@tanstack/react-router'
+import { Columns3, MessageSquare, PanelLeftClose } from 'lucide-react'
+import { type CSSProperties, type ReactNode, useState } from 'react'
+import {
+  Sidebar,
+  SidebarInset,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from '#/components/ui/sidebar'
+import { TooltipProvider } from '#/components/ui/tooltip'
+import { WorkspaceNavigation } from '#/components/workspace-navigation'
 
-export function AppShell({
+type ShellProps = {
-  active,
+  hasTemporaryDecks: boolean
-  children,
+  sidebar: ReactNode
-}: {
+  researchChat: (closeMobileSidebar: () => void) => ReactNode
-  active?: 'user' | 'search' | 'list'
+  children: ReactNode
-  children: React.ReactNode
+}
-}) {
+
+export function AppShell(props: ShellProps) {
   return (
-    <main className="app">
+    <TooltipProvider delay={800}>
-      <header className="app-header">
+      <SidebarProvider
-        <p className="brand">TWITTER LITE</p>
+        className="workspace h-dvh min-h-0 overflow-hidden"
-        <nav aria-label="閲覧方法" className="tabs">
+        style={
-          <Link aria-current={active === 'user' ? 'page' : undefined} to="/">
+          {
-            ユーザー
+            '--sidebar-width': '25rem',
-          </Link>
+            '--sidebar-width-icon': '4rem',
-          <Link
+          } as CSSProperties
-            aria-current={active === 'search' ? 'page' : undefined}
+        }
-            search={{ q: '', product: 'Latest', following: false }}
-            to="/search"
       >
-            検索
+        <Workspace {...props} />
-          </Link>
+      </SidebarProvider>
-          <Link
+    </TooltipProvider>
-            aria-current={active === 'list' ? 'page' : undefined}
+  )
-            to="/i/lists"
+}
-          >
+
-            リスト
+function Workspace({
-          </Link>
+  sidebar,
-        </nav>
+  researchChat,
+  children,
+  hasTemporaryDecks,
+}: ShellProps) {
+  const [panel, setPanel] = useState<'chat' | 'decks'>('chat')
+  const { setOpen, setOpenMobile, isMobile } = useSidebar()
+  const navigation = [
+    { id: 'chat', title: 'Research chat', icon: MessageSquare },
+    { id: 'decks', title: 'Deck manager', icon: Columns3 },
+  ] as const
+
+  return (
+    <>
+      <Sidebar
+        collapsible="icon"
+        className="overflow-hidden transition-none *:data-[sidebar=sidebar]:flex-row"
+      >
+        <WorkspaceNavigation
+          hasTemporaryDecks={hasTemporaryDecks}
+          footer={
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                aria-label="Close sidebar"
+                tooltip={{ children: 'Close sidebar', hidden: false }}
+                onClick={() =>
+                  isMobile ? setOpenMobile(false) : setOpen(false)
+                }
+                className="size-10 justify-center p-0"
+              >
+                <PanelLeftClose />
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          }
+        >
+          {navigation.map((item) => (
+            <SidebarMenuItem key={item.id}>
+              <SidebarMenuButton
+                aria-label={item.title}
+                tooltip={{ children: item.title, hidden: false }}
+                isActive={panel === item.id}
+                onClick={() => {
+                  setPanel(item.id)
+                  if (isMobile) setOpenMobile(true)
+                  else setOpen(true)
+                }}
+                className="size-10 justify-center p-0"
+              >
+                <item.icon />
+                <span className="sr-only">{item.title}</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </WorkspaceNavigation>
+        <Sidebar
+          collapsible="none"
+          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))}
+          </div>
+          <section
+            aria-label="Deck manager"
+            className={
+              panel === 'decks'
+                ? 'flex min-h-0 flex-1 flex-col overflow-y-auto p-4'
+                : 'hidden'
+            }
+          >
+            <h2 className="mb-4 text-base font-semibold">Decks</h2>
+            <div className="flex flex-col gap-4">{sidebar}</div>
+          </section>
+        </Sidebar>
+      </Sidebar>
+      <SidebarInset className="min-w-0 overflow-hidden">
+        <header className="flex h-12 shrink-0 items-center gap-2 border-b px-3">
+          <SidebarTrigger aria-label="Toggle sidebar" />
+          <span className="text-sm font-medium">Research</span>
+          <span className="ml-auto text-xs text-muted-foreground">
+            Research workspace
+          </span>
         </header>
-      <section className="reader">{children}</section>
+        <section
-    </main>
+          className="reader flex min-h-0 min-w-0 flex-1 flex-col"
+          aria-label="Decks"
+        >
+          {children}
+        </section>
+      </SidebarInset>
+    </>
   )
 }

src/components/dialog.tsx

@@ -0,0 +1,54 @@
+import { cn } from 'cn'
+import { Icon } from './icon'
+import { Button } from './ui/button'
+import {
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  Dialog as DialogRoot,
+  DialogTitle,
+} from './ui/dialog'
+
+export function Dialog({
+  title,
+  onClose,
+  children,
+  className,
+}: {
+  title: string
+  className?: string
+  onClose: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <DialogRoot
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+    >
+      <DialogContent
+        showCloseButton={false}
+        className={cn('max-h-[calc(100dvh-2rem)] overflow-y-auto', className)}
+        aria-describedby={undefined}
+      >
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogClose
+          render={
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="absolute right-2 top-2"
+              aria-label="Close"
+            />
+          }
+        >
+          <Icon name="close" />
+        </DialogClose>
+        {children}
+      </DialogContent>
+    </DialogRoot>
+  )
+}

src/components/icon.tsx

@@ -0,0 +1,32 @@
+const paths = {
+  columns: 'M3 4h7v16H3z M14 4h7v16h-7z',
+  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',
+  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',
+  plus: 'M12 5v14 M5 12h14',
+  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',
+  more: 'M5 12h.01 M12 12h.01 M19 12h.01',
+  arrow: 'M7 17 17 7 M7 7h10v10',
+  edit: 'm16 3 5 5-12 12H4v-5z M14 5l5 5',
+  trash: 'M3 6h18 M9 6V3h6v3 M5 6l1 15h12l1-15 M10 10v7 M14 10v7',
+} as const
+
+export function Icon({ name }: { name: keyof typeof paths }) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={paths[name]} />
+    </svg>
+  )
+}

src/components/post-text.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+
+const URL = /(https?:\/\/[^\s]+)/g
+const HTML_ENTITY = /&(?:#(\d+)|#x([\da-f]+)|amp|apos|gt|lt|quot);/gi
+const NAMED_ENTITIES: Record<string, string> = {
+  '&amp;': '&',
+  '&apos;': "'",
+  '&gt;': '>',
+  '&lt;': '<',
+  '&quot;': '"',
+}
+function decodeHtmlEntities(text: string): string {
+  return text.replace(HTML_ENTITY, (entity, decimal, hexadecimal) => {
+    if (!decimal && !hexadecimal) {
+      return NAMED_ENTITIES[entity.toLowerCase()] ?? entity
+    }
+
+    const codePoint = Number.parseInt(decimal ?? hexadecimal, decimal ? 10 : 16)
+    return codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : entity
+  })
+}
+
+function linkedText(text: string): ReactNode[] {
+  const decoded = decodeHtmlEntities(text)
+  const parts: ReactNode[] = []
+  let cursor = 0
+  for (const match of decoded.matchAll(URL)) {
+    const href = match[0]
+    const start = match.index
+    if (start > cursor) parts.push(decoded.slice(cursor, start))
+    parts.push(
+      <a
+        href={href}
+        key={`link-${start}`}
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        {href}
+      </a>,
+    )
+    cursor = start + href.length
+  }
+  if (cursor < decoded.length) parts.push(decoded.slice(cursor))
+  return parts
+}
+
+export function PostText({ text }: { text: string }) {
+  return <>{linkedText(text)}</>
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,106 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: 'default' | 'sm' | 'lg'
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        'aspect-square size-full rounded-full object-cover',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      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',
+        '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=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+}

src/components/ui/badge.tsx

@@ -0,0 +1,51 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+
+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!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        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',
+        outline:
+          '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',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

src/components/ui/bubble.tsx

@@ -0,0 +1,127 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="bubble-group"
+      className={cn('flex min-w-0 flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+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',
+  {
+    variants: {
+      variant: {
+        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',
+        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%)]',
+        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%)]',
+        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)]',
+        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',
+        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',
+        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',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Bubble({
+  variant = 'default',
+  align = 'start',
+  className,
+  ...props
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof bubbleVariants> & {
+    align?: 'start' | 'end'
+  }) {
+  return (
+    <div
+      data-slot="bubble"
+      data-variant={variant}
+      data-align={align}
+      className={cn(bubbleVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function BubbleContent({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'div'>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        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',
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'bubble-content',
+    },
+  })
+}
+
+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',
+  {
+    variants: {
+      side: {
+        top: 'top-0 -translate-y-3/4',
+        bottom: 'bottom-0 translate-y-3/4',
+      },
+      align: {
+        start: 'left-3',
+        end: 'right-3',
+      },
+    },
+    defaultVariants: {
+      side: 'bottom',
+      align: 'end',
+    },
+  },
+)
+
+function BubbleReactions({
+  side = 'bottom',
+  align = 'end',
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  align?: 'start' | 'end'
+  side?: 'top' | 'bottom'
+}) {
+  return (
+    <div
+      data-slot="bubble-reactions"
+      data-align={align}
+      data-side={side}
+      className={cn(bubbleReactionsVariants({ side, align }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions }

src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+
+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",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+        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',
+        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',
+        ghost:
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        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',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          '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",
+        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',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/checkbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+import { cn } from 'cn'
+import { CheckIcon } from 'lucide-react'
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      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',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/collapsible.tsx

@@ -0,0 +1,19 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger }

src/components/ui/dialog.tsx

@@ -0,0 +1,153 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import { cn } from 'cn'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+import { Button } from '#/components/ui/button.tsx'
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        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',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      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',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-base leading-none font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,271 @@
+'use client'
+
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+import { cn } from 'cn'
+import { CheckIcon, ChevronRightIcon } from 'lucide-react'
+import type * as React from 'react'
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          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',
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = 'start',
+  alignOffset = -3,
+  side = 'right',
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      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',
+        className,
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+}

src/components/ui/empty.tsx

@@ -0,0 +1,100 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+
+function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn('flex max-w-sm flex-col items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        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",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function EmptyMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn('text-sm font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+}

src/components/ui/input-group.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+import type * as React from 'react'
+
+import { Button } from '#/components/ui/button.tsx'
+import { Input } from '#/components/ui/input.tsx'
+import { Textarea } from '#/components/ui/textarea.tsx'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="input-group"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          '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]',
+        'block-start':
+          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-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: {
+      align: 'inline-start',
+    },
+  },
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'fieldset'> &
+  VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Pointer convenience only; the text control remains independently keyboard-focusable.
+    <fieldset
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  'flex items-center gap-2 text-sm shadow-none',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: '',
+        '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',
+    },
+  },
+)
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset'
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+}

src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import { Input as InputPrimitive } from '@base-ui/react/input'
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
+  return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: Association and content are supplied by the caller through props.
+    <label
+      data-slot="label"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/marker.tsx

@@ -0,0 +1,70 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+import type * as React from 'react'
+
+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",
+  {
+    variants: {
+      variant: {
+        default: '',
+        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',
+        border: 'border-b border-border pb-2',
+      },
+    },
+  },
+)
+
+function Marker({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(markerVariants({ variant, className })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'marker',
+      variant,
+    },
+  })
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="marker-icon"
+      aria-hidden="true"
+      className={cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="marker-content"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Marker, MarkerContent, MarkerIcon, markerVariants }

src/components/ui/message-scroller.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import {
+  MessageScroller as MessageScrollerPrimitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from '@shadcn/react/message-scroller'
+import { cn } from 'cn'
+import { ArrowDownIcon } from 'lucide-react'
+import type * as React from 'react'
+import { Button } from '#/components/ui/button.tsx'
+
+function MessageScrollerProvider(
+  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,
+) {
+  return <MessageScrollerPrimitive.Provider {...props} />
+}
+
+function MessageScroller({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
+  return (
+    <MessageScrollerPrimitive.Root
+      data-slot="message-scroller"
+      className={cn(
+        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
+  return (
+    <MessageScrollerPrimitive.Viewport
+      data-slot="message-scroller-viewport"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
+  return (
+    <MessageScrollerPrimitive.Content
+      data-slot="message-scroller-content"
+      className={cn('flex h-max min-h-full flex-col gap-6', className)}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
+  return (
+    <MessageScrollerPrimitive.Item
+      data-slot="message-scroller-item"
+      scrollAnchor={scrollAnchor}
+      className={cn(
+        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageScrollerButton({
+  direction = 'end',
+  className,
+  children,
+  render,
+  variant = 'secondary',
+  size = 'icon-sm',
+  ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <MessageScrollerPrimitive.Button
+      data-slot="message-scroller-button"
+      data-direction={direction}
+      data-variant={variant}
+      data-size={size}
+      direction={direction}
+      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',
+        className,
+      )}
+      render={render ?? <Button variant={variant} size={size} />}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <ArrowDownIcon />
+          <span className="sr-only">
+            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}
+          </span>
+        </>
+      )}
+    </MessageScrollerPrimitive.Button>
+  )
+}
+
+export {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+}

src/components/ui/message.tsx

@@ -0,0 +1,91 @@
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="message-group"
+      className={cn('flex min-w-0 flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function Message({
+  className,
+  align = 'start',
+  ...props
+}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {
+  return (
+    <div
+      data-slot="message"
+      data-align={align}
+      className={cn(
+        'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="message-avatar"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="message-content"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="message-header"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="message-footer"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
+}

src/components/ui/native-select.tsx

@@ -0,0 +1,64 @@
+import { cn } from 'cn'
+import { ChevronDownIcon } from 'lucide-react'
+import type * as React from 'react'
+
+type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
+  size?: 'sm' | 'default'
+}
+
+function NativeSelect({
+  className,
+  size = 'default',
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        'group/native-select relative w-fit has-[select:disabled]:opacity-50',
+        className,
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-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 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDownIcon
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="native-select-icon"
+      />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<'option'>) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn('bg-[Canvas] text-[CanvasText]', className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<'optgroup'>) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn('bg-[Canvas] text-[CanvasText]', className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

src/components/ui/separator.tsx

@@ -0,0 +1,22 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
+import { cn } from 'cn'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/sheet.tsx

@@ -0,0 +1,133 @@
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
+import { cn } from 'cn'
+import { XIcon } from 'lucide-react'
+import type * as React from 'react'
+import { Button } from '#/components/ui/button.tsx'
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  keepMounted = false,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+  keepMounted?: boolean
+}) {
+  return (
+    <SheetPortal keepMounted={keepMounted}>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        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',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-base font-medium text-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+}

src/components/ui/sidebar.tsx

@@ -0,0 +1,718 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+import { PanelLeftIcon } from 'lucide-react'
+import * as React from 'react'
+import { Button } from '#/components/ui/button.tsx'
+import { Input } from '#/components/ui/input.tsx'
+import { Separator } from '#/components/ui/separator.tsx'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '#/components/ui/sheet.tsx'
+import { Skeleton } from '#/components/ui/skeleton.tsx'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#/components/ui/tooltip.tsx'
+import { useIsMobile } from '#/hooks/use-mobile.ts'
+
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = 'min(25rem, 100vw)'
+const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+    },
+    [setOpenProp, open],
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [toggleSidebar])
+
+  // 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.
+  const state = open ? 'expanded' : 'collapsed'
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          keepMounted
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width)! max-w-none! bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Workspace</SheetTitle>
+            <SheetDescription>
+              Research chat and deck management
+            </SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-row">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        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',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? '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',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      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',
+        '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',
+        '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=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('h-8 w-full bg-background shadow-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('mx-2 w-auto bg-sidebar-border', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        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',
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'sidebar-group-label',
+      sidebar: 'group-label',
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        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',
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'sidebar-group-action',
+      sidebar: 'group-action',
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-0', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+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',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        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)]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<'button'> &
+  React.ComponentProps<'button'> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props,
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: 'sidebar-menu-button',
+      sidebar: 'menu-button',
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<'button'> &
+  React.ComponentProps<'button'> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        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',
+          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',
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'sidebar-menu-action',
+      sidebar: 'menu-action',
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<'a'> &
+  React.ComponentProps<'a'> & {
+    size?: 'sm' | 'md'
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        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',
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'sidebar-menu-sub-button',
+      sidebar: 'menu-sub-button',
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from 'cn'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/components/ui/tooltip.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import { cn } from 'cn'
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          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',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

src/components/workspace-navigation.tsx

@@ -0,0 +1,149 @@
+import { Link, useLocation, useRouteContext } from '@tanstack/react-router'
+import {
+  Activity,
+  House,
+  Inbox,
+  Layers3,
+  MessagesSquare,
+  NotebookPen,
+  Search,
+} from 'lucide-react'
+import { type ReactNode, useState } from 'react'
+import { Avatar, AvatarFallback } from '#/components/ui/avatar'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+} from '#/components/ui/sidebar'
+import { ConnectionManagerDialog } from '#/features/connections/connection-manager-dialog'
+
+type WorkspaceNavigationProps = {
+  children?: ReactNode
+  footer?: ReactNode
+  hasTemporaryDecks?: boolean
+}
+
+export function WorkspaceNavigation({
+  children,
+  footer,
+  hasTemporaryDecks,
+}: WorkspaceNavigationProps) {
+  const { auth } = useRouteContext({ from: '__root__' })
+  const [managingAccounts, setManagingAccounts] = useState(false)
+  const pathname = useLocation({ select: (location) => location.pathname })
+  const navigation = [
+    { title: 'Home', to: '/', icon: House, active: pathname === '/' },
+    {
+      title: 'Vitals',
+      to: '/vitals',
+      icon: Activity,
+      active: pathname === '/vitals',
+    },
+    {
+      title: 'Messages',
+      to: '/support',
+      icon: MessagesSquare,
+      active: pathname === '/support',
+    },
+    {
+      title: 'Journal',
+      to: '/journal',
+      icon: NotebookPen,
+      active: pathname === '/journal',
+    },
+    {
+      title: 'Reader',
+      to: '/inbox',
+      icon: Inbox,
+      active: pathname === '/inbox',
+    },
+    {
+      title: 'Research',
+      to: '/deck',
+      icon: Search,
+      active: pathname === '/deck',
+    },
+  ] as const
+
+  return (
+    <Sidebar
+      collapsible="none"
+      className="workspace-navigation w-16! shrink-0 border-r"
+    >
+      <SidebarHeader className="items-center py-4">
+        <div
+          className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+          role="img"
+          aria-label="Workspace"
+        >
+          <Layers3 className="size-5" aria-hidden="true" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup className="px-3">
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navigation.map((item) => (
+                <SidebarMenuItem key={item.to}>
+                  <SidebarMenuButton
+                    aria-label={item.title}
+                    aria-current={item.active ? 'page' : undefined}
+                    tooltip={{ children: item.title, hidden: false }}
+                    isActive={item.active}
+                    render={<Link to={item.to} />}
+                    className="size-10 justify-center p-0"
+                  >
+                    <item.icon />
+                    <span className="sr-only">{item.title}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        {children && (
+          <>
+            <SidebarSeparator className="mx-3 w-auto" />
+            <SidebarGroup className="px-3">
+              <SidebarGroupContent>
+                <SidebarMenu>{children}</SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </>
+        )}
+      </SidebarContent>
+      <SidebarFooter className="items-center px-3 pb-4">
+        {footer && <SidebarMenu>{footer}</SidebarMenu>}
+        <SidebarMenu className="mt-2">
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              aria-label="Manage connected accounts"
+              tooltip={{ children: 'Manage connected accounts', hidden: false }}
+              className="size-10 justify-center p-0"
+              onClick={() => setManagingAccounts(true)}
+            >
+              <Avatar className="size-8">
+                <AvatarFallback>
+                  {auth.owner?.name.slice(0, 1).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      {managingAccounts && (
+        <ConnectionManagerDialog
+          onClose={() => setManagingAccounts(false)}
+          hasTemporaryDecks={hasTemporaryDecks}
+        />
+      )}
+    </Sidebar>
+  )
+}

src/features/access/policy.server.ts

@@ -0,0 +1,45 @@
+type AccessConfig = { origin: string } & (
+  | { mode: 'tailscale'; allowedLogin: string }
+  | { mode: 'none' }
+)
+
+export function readAccessConfig(): AccessConfig | null {
+  const origin = process.env.TWITTER_LITE_ORIGIN
+  const mode = process.env.TWITTER_LITE_AUTH_MODE ?? 'tailscale'
+  const allowedLogin = process.env.TWITTER_LITE_ALLOWED_LOGIN
+  if (!origin || (mode !== 'tailscale' && mode !== 'none')) return null
+  try {
+    const url = new URL(origin)
+    const secure = url.protocol === 'https:'
+    const local = url.protocol === 'http:' && url.hostname === '127.0.0.1'
+    if ((!secure && !local) || url.origin !== origin) return null
+    if (mode === 'none') return { origin, mode }
+    if (!allowedLogin?.trim()) return null
+    return { origin, mode, allowedLogin }
+  } catch {
+    return null
+  }
+}
+
+/** Use loopback behind Serve for identity, or a private network for mode none. */
+export function checkAccess(
+  request: Request,
+  config: AccessConfig | null,
+): Response | null {
+  if (!config) {
+    return new Response('Access configuration is required.', { status: 503 })
+  }
+  if (
+    config.mode === 'tailscale' &&
+    request.headers.get('Tailscale-User-Login') !== config.allowedLogin
+  ) {
+    return new Response('Forbidden', { status: 403 })
+  }
+  if (
+    !['GET', 'HEAD', 'OPTIONS'].includes(request.method) &&
+    request.headers.get('Origin') !== config.origin
+  ) {
+    return new Response('Forbidden', { status: 403 })
+  }
+  return null
+}

src/features/access/policy.test.ts

@@ -0,0 +1,171 @@
+// @vitest-environment node
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { checkAccess, readAccessConfig } from './policy.server'
+
+const config = {
+  mode: 'tailscale' as const,
+  origin: 'https://deck.invalid',
+  allowedLogin: '[email protected]',
+}
+
+beforeEach(() => vi.stubEnv('TWITTER_LITE_AUTH_MODE', undefined))
+afterEach(() => vi.unstubAllEnvs())
+
+describe('access boundary', () => {
+  it.each([
+    undefined,
+    'tailscale',
+  ])('requires an owner in identity mode: %s', (mode) => {
+    vi.stubEnv('TWITTER_LITE_AUTH_MODE', mode)
+    vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
+    vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
+    expect(readAccessConfig()).toBeNull()
+  })
+
+  it.each([
+    '',
+    'off',
+    'NONE',
+  ])('fails closed for an unknown auth mode: %s', (mode) => {
+    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', () => {
+    vi.stubEnv('TWITTER_LITE_AUTH_MODE', 'none')
+    vi.stubEnv('TWITTER_LITE_ORIGIN', config.origin)
+    vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
+    const access = readAccessConfig()
+    expect(access).toEqual({ origin: config.origin, mode: 'none' })
+    expect(checkAccess(new Request(config.origin), access)).toBeNull()
+  })
+
+  it('still requires a configured origin without identity authentication', () => {
+    vi.stubEnv('TWITTER_LITE_AUTH_MODE', 'none')
+    vi.stubEnv('TWITTER_LITE_ORIGIN', '')
+    expect(readAccessConfig()).toBeNull()
+  })
+
+  it.each([
+    'POST',
+    'PUT',
+    'PATCH',
+    'DELETE',
+  ])('requires exact Origin without identity authentication for %s', (method) => {
+    const access = { origin: config.origin, mode: 'none' as const }
+    expect(
+      checkAccess(new Request(config.origin, { method }), access)?.status,
+    ).toBe(403)
+    expect(
+      checkAccess(
+        new Request(config.origin, {
+          method,
+          headers: {
+            Origin: 'https://other.invalid',
+            'Sec-Fetch-Site': 'same-origin',
+          },
+        }),
+        access,
+      )?.status,
+    ).toBe(403)
+    expect(
+      checkAccess(
+        new Request(config.origin, {
+          method,
+          headers: { Origin: config.origin },
+        }),
+        access,
+      ),
+    ).toBeNull()
+  })
+
+  it('fails closed when the deployment is not configured', () => {
+    vi.stubEnv('TWITTER_LITE_ORIGIN', '')
+    vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', '')
+    expect(readAccessConfig()).toBeNull()
+    expect(checkAccess(new Request(config.origin), null)?.status).toBe(503)
+  })
+
+  it.each([
+    '',
+    'https://deck.invalid/path',
+    'http://deck.invalid',
+    'not a URL',
+  ])('rejects an invalid configured origin: %s', (origin) => {
+    vi.stubEnv('TWITTER_LITE_ORIGIN', origin)
+    vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
+    expect(readAccessConfig()).toBeNull()
+  })
+
+  it.each([
+    'https://deck.invalid',
+    'http://127.0.0.1:4173',
+  ])('accepts an explicit deployment origin: %s', (origin) => {
+    vi.stubEnv('TWITTER_LITE_ORIGIN', origin)
+    vi.stubEnv('TWITTER_LITE_ALLOWED_LOGIN', config.allowedLogin)
+    expect(readAccessConfig()).toEqual({ ...config, origin })
+  })
+
+  it.each([
+    undefined,
+    '[email protected]',
+    '[email protected], [email protected]',
+  ])('rejects absent, foreign, or ambiguous identities: %s', (login) => {
+    const headers = new Headers()
+    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', () => {
+    const request = new Request(
+      `${config.origin}/oauth/mastodon/callback?code=code`,
+      {
+        headers: {
+          'Tailscale-User-Login': config.allowedLogin,
+          'Sec-Fetch-Site': 'cross-site',
+        },
+      },
+    )
+    expect(checkAccess(request, config)).toBeNull()
+  })
+
+  it.each([
+    'POST',
+    'PUT',
+    'PATCH',
+    'DELETE',
+  ])('requires exact Origin for %s even with same-origin Fetch Metadata', (method) => {
+    const headers = {
+      'Tailscale-User-Login': config.allowedLogin,
+      'Sec-Fetch-Site': 'same-origin',
+    }
+    expect(
+      checkAccess(new Request(config.origin, { method, headers }), config)
+        ?.status,
+    ).toBe(403)
+    expect(
+      checkAccess(
+        new Request(config.origin, {
+          method,
+          headers: { ...headers, Origin: 'https://other.invalid' },
+        }),
+        config,
+      )?.status,
+    ).toBe(403)
+    expect(
+      checkAccess(
+        new Request(config.origin, {
+          method,
+          headers: { ...headers, Origin: config.origin },
+        }),
+        config,
+      ),
+    ).toBeNull()
+  })
+})

src/features/auth/auth-client.ts

@@ -0,0 +1,34 @@
+export type SafeOwner = {
+  id: number
+  email: string
+  name: string
+  onboardingCompletedAt: number | null
+}
+
+export type AuthState = { needsSetup: boolean; owner: SafeOwner | null }
+
+type AuthInput =
+  | { action: 'login'; email: string; password: string }
+  | {
+      action: 'setup'
+      email: string
+      password: string
+      name: string
+      setupToken: string
+    }
+  | { action: 'logout' }
+  | { action: 'onboard'; name: string }
+
+export async function authRequest(input: AuthInput): Promise<AuthState> {
+  const response = await fetch('/api/auth', {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  })
+  const result = await response.json()
+  if (!response.ok) {
+    throw new Error(result.error || 'Something went wrong. Please try again.')
+  }
+  return result
+}

src/features/auth/auth-page.tsx

@@ -0,0 +1,199 @@
+import { ArrowRight, LockKeyhole } from 'lucide-react'
+import { type FormEvent, type ReactNode, useState } from 'react'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import { Label } from '#/components/ui/label'
+import { authRequest } from './auth-client'
+import './auth.css'
+
+export function AuthFrame({ children }: { children: ReactNode }) {
+  return (
+    <main className="auth-page">
+      <div className="auth-panel">
+        <div className="auth-brand">
+          <LockKeyhole size={16} aria-hidden="true" />
+          Personal Workspace
+        </div>
+        {children}
+      </div>
+    </main>
+  )
+}
+
+export function LoginPage() {
+  return <CredentialsForm setup={false} />
+}
+
+export function SetupPage() {
+  return <CredentialsForm setup />
+}
+
+function CredentialsForm({ setup }: { setup: boolean }) {
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState('')
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (pending) return
+    const data = new FormData(event.currentTarget)
+    const email = String(data.get('email') ?? '').trim()
+    const password = String(data.get('password') ?? '')
+    if (setup && password !== data.get('confirmPassword')) {
+      setError('Passwords do not match.')
+      return
+    }
+    setPending(true)
+    setError('')
+    try {
+      const state = await authRequest(
+        setup
+          ? {
+              action: 'setup',
+              email,
+              password,
+              name: String(data.get('name') ?? '').trim(),
+              setupToken: String(data.get('setupToken') ?? '').trim(),
+            }
+          : { action: 'login', email, password },
+      )
+      if (!state.owner?.onboardingCompletedAt) {
+        window.location.assign('/onboarding')
+        return
+      }
+      const returnTo = new URLSearchParams(window.location.search).get(
+        'returnTo',
+      )
+      const destination =
+        returnTo &&
+        ['/', '/deck', '/support', '/journal', '/inbox', '/vitals'].includes(
+          returnTo,
+        )
+          ? returnTo
+          : '/'
+      window.location.assign(destination)
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : 'Unable to sign in. Please try again.',
+      )
+      setPending(false)
+    }
+  }
+
+  return (
+    <AuthFrame>
+      <header className="auth-heading">
+        <h1>{setup ? 'Make yourself at home.' : 'Welcome back.'}</h1>
+        <p>
+          {setup
+            ? 'Create the owner account for your personal workspace.'
+            : 'Sign in to your personal workspace.'}
+        </p>
+      </header>
+      <form onSubmit={submit} className="auth-form" aria-busy={pending}>
+        {setup && (
+          <div className="auth-field">
+            <Label htmlFor="name">Your name</Label>
+            <Input
+              id="name"
+              name="name"
+              autoComplete="given-name"
+              required
+              maxLength={80}
+              disabled={pending}
+            />
+          </div>
+        )}
+        <div className="auth-field">
+          <Label htmlFor="email">Email address</Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="username"
+            required
+            maxLength={254}
+            disabled={pending}
+          />
+        </div>
+        <div className="auth-field">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete={setup ? 'new-password' : 'current-password'}
+            required
+            minLength={setup ? 15 : undefined}
+            maxLength={128}
+            aria-describedby={setup ? 'password-hint' : undefined}
+            disabled={pending}
+          />
+          {setup && (
+            <p id="password-hint" className="auth-hint">
+              Use 15–128 characters. A few memorable words work well.
+            </p>
+          )}
+        </div>
+        {setup && (
+          <>
+            <div className="auth-field">
+              <Label htmlFor="confirmPassword">Confirm password</Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={15}
+                maxLength={128}
+                disabled={pending}
+              />
+            </div>
+            <div className="auth-field">
+              <Label htmlFor="setupToken">Setup code</Label>
+              <Input
+                id="setupToken"
+                name="setupToken"
+                type="password"
+                autoComplete="off"
+                required
+                aria-describedby="setup-hint"
+                disabled={pending}
+              />
+              <p id="setup-hint" className="auth-hint">
+                Use the setup code provided by your server administrator.
+              </p>
+            </div>
+          </>
+        )}
+        {error && (
+          <p className="auth-error" role="alert">
+            {error}
+          </p>
+        )}
+        <Button
+          type="submit"
+          size="lg"
+          disabled={pending}
+          className="auth-submit"
+        >
+          {pending
+            ? setup
+              ? 'Creating account…'
+              : 'Signing in…'
+            : setup
+              ? 'Create account'
+              : 'Sign in'}
+          <ArrowRight aria-hidden="true" />
+        </Button>
+      </form>
+      <p className="auth-footnote">
+        {setup
+          ? 'This workspace has one owner. Connections can be added later.'
+          : 'A private workspace. Access is limited to its owner.'}
+      </p>
+    </AuthFrame>
+  )
+}

src/features/auth/auth.css

@@ -0,0 +1,136 @@
+.auth-page {
+  min-height: 100svh;
+  display: grid;
+  place-items: center;
+  padding: 48px 24px;
+  background: var(--background);
+  color: var(--foreground);
+}
+.auth-panel {
+  width: 100%;
+  max-width: 390px;
+  min-width: 0;
+}
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  margin-bottom: 44px;
+}
+.auth-heading {
+  margin-bottom: 28px;
+}
+.auth-heading h1 {
+  font-size: 27px;
+  font-weight: 550;
+  letter-spacing: -0.8px;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.auth-heading p {
+  color: var(--muted-foreground);
+  font-size: 14px;
+  line-height: 1.6;
+  margin-top: 12px;
+}
+.auth-form {
+  display: grid;
+  gap: 20px;
+}
+.auth-field {
+  display: grid;
+  gap: 9px;
+}
+.auth-field input {
+  height: 40px;
+}
+.auth-hint,
+.auth-footnote,
+.auth-prototype {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--muted-foreground);
+}
+.auth-submit {
+  width: 100%;
+  margin-top: 4px;
+  justify-content: space-between;
+  padding-inline: 14px;
+}
+.auth-footnote {
+  margin-top: 24px;
+}
+.auth-error {
+  color: var(--destructive);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.auth-step {
+  color: var(--muted-foreground);
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+.auth-overview {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 28px;
+  display: grid;
+  gap: 24px;
+}
+.auth-overview li {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+.auth-overview svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--muted-foreground);
+}
+.auth-overview strong {
+  font-size: 14px;
+  font-weight: 500;
+}
+.auth-overview p {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--muted-foreground);
+  margin-top: 4px;
+}
+.auth-prototype {
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+}
+.auth-actions {
+  margin-top: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.auth-footer {
+  margin-top: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+.auth-footer span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+@media (max-width: 480px) {
+  .auth-page {
+    padding: 32px 24px;
+  }
+  .auth-brand {
+    margin-bottom: 36px;
+  }
+}

src/features/auth/auth.server.ts

@@ -0,0 +1,241 @@
+import { createHash, randomBytes, scrypt, timingSafeEqual } from 'node:crypto'
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname, isAbsolute } from 'node:path'
+import { eq, lte } from 'drizzle-orm'
+import { type AppDatabase, getDatabase } from '../storage/database.server'
+import { authSessions, authThrottle, workspaceOwner } from '../storage/schema'
+import type { SafeOwner } from './auth-client'
+
+export const SESSION_MAX_AGE_SECONDS = 30 * 24 * 60 * 60
+const derive = (password: string, salt: string) =>
+  new Promise<Buffer>((resolve, reject) =>
+    scrypt(password, salt, 64, scryptOptions, (error, key) =>
+      error ? reject(error) : resolve(key),
+    ),
+  )
+const scryptOptions = { N: 2 ** 17, r: 8, p: 1, maxmem: 256 * 1024 * 1024 }
+const throttleWindow = 15 * 60_000
+
+export class AuthError extends Error {
+  constructor(
+    public status: number,
+    message: string,
+  ) {
+    super(message)
+    this.name = 'AuthError'
+  }
+}
+const hash = (value: string) => createHash('sha256').update(value).digest('hex')
+const equal = (left: string, right: string) =>
+  timingSafeEqual(Buffer.from(hash(left)), Buffer.from(hash(right)))
+function safeOwner(owner: typeof workspaceOwner.$inferSelect): SafeOwner {
+  return {
+    id: owner.id,
+    email: owner.email,
+    name: owner.name,
+    onboardingCompletedAt: owner.onboardingCompletedAt,
+  }
+}
+export function readAuthState(database = getDatabase()) {
+  return {
+    needsSetup: !database
+      .select({ id: workspaceOwner.id })
+      .from(workspaceOwner)
+      .get(),
+  }
+}
+/** Bootstrap secret is read only by the server or operator CLI, never sent to clients. */
+export function getSetupToken() {
+  const configured = process.env.WORKSPACE_SETUP_TOKEN
+  if (configured) {
+    if (configured.length < 32)
+      throw new AuthError(
+        503,
+        'The setup token must contain at least 32 characters.',
+      )
+    return configured
+  }
+  const dbPath = process.env.TWITTER_LITE_DB_PATH
+  if (!dbPath || !isAbsolute(dbPath))
+    throw new AuthError(503, 'Configure a workspace database or setup token.')
+  const path = `${dbPath}.setup-token`
+  mkdirSync(dirname(path), { recursive: true, mode: 0o700 })
+  try {
+    writeFileSync(path, randomBytes(32).toString('base64url'), {
+      mode: 0o600,
+      flag: 'wx',
+    })
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+  }
+  const token = readFileSync(path, 'utf8').trim()
+  if (token.length < 32)
+    throw new AuthError(503, 'The workspace setup token is invalid.')
+  return token
+}
+function consumeAttempt(database: AppDatabase) {
+  database.transaction(
+    (tx) => {
+      const now = Date.now()
+      const current = tx.select().from(authThrottle).get()
+      if (current && current.resetAt > now) {
+        if (current.attempts >= 10)
+          throw new AuthError(
+            429,
+            'Too many attempts. Please try again in 15 minutes.',
+          )
+        tx.update(authThrottle)
+          .set({ attempts: current.attempts + 1 })
+          .where(eq(authThrottle.id, 1))
+          .run()
+      } else {
+        tx.insert(authThrottle)
+          .values({ id: 1, attempts: 1, resetAt: now + throttleWindow })
+          .onConflictDoUpdate({
+            target: authThrottle.id,
+            set: { attempts: 1, resetAt: now + throttleWindow },
+          })
+          .run()
+      }
+    },
+    { behavior: 'immediate' },
+  )
+}
+function session(
+  database: Pick<AppDatabase, 'insert' | 'delete'>,
+  owner: typeof workspaceOwner.$inferSelect,
+) {
+  const sessionToken = randomBytes(32).toString('base64url')
+  database
+    .delete(authSessions)
+    .where(lte(authSessions.expiresAt, Date.now()))
+    .run()
+  database
+    .insert(authSessions)
+    .values({
+      tokenHash: hash(sessionToken),
+      ownerId: owner.id,
+      expiresAt: Date.now() + SESSION_MAX_AGE_SECONDS * 1000,
+    })
+    .run()
+  database.delete(authThrottle).where(eq(authThrottle.id, 1)).run()
+  return { sessionToken, owner: safeOwner(owner) }
+}
+function cleanName(name: string) {
+  const cleaned = name.trim()
+  if (!cleaned || cleaned.length > 80)
+    throw new AuthError(400, 'Enter a name of up to 80 characters.')
+  return cleaned
+}
+export async function createOwner(
+  input: { email: string; password: string; name: string; setupToken: string },
+  database = getDatabase(),
+) {
+  if (!readAuthState(database).needsSetup)
+    throw new AuthError(
+      409,
+      'This workspace is already set up. Please sign in.',
+    )
+  consumeAttempt(database)
+  if (!equal(input.setupToken, getSetupToken()))
+    throw new AuthError(401, 'Invalid setup credentials.')
+  const email = input.email.trim().toLowerCase()
+  if (email.length > 254 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+    throw new AuthError(400, 'Enter a valid email address.')
+  if (input.password.length < 15 || input.password.length > 128)
+    throw new AuthError(400, 'Use a password between 15 and 128 characters.')
+  const name = cleanName(input.name)
+  const salt = randomBytes(16).toString('hex')
+  const derived = (await derive(input.password, salt)) as Buffer
+  return database.transaction(
+    (tx) => {
+      if (tx.select().from(workspaceOwner).get())
+        throw new AuthError(
+          409,
+          'This workspace is already set up. Please sign in.',
+        )
+      const owner = {
+        id: 1,
+        email,
+        name,
+        passwordHash: `${salt}:${derived.toString('hex')}`,
+        onboardingCompletedAt: null,
+        createdAt: Date.now(),
+      }
+      tx.insert(workspaceOwner).values(owner).run()
+      return session(tx, owner)
+    },
+    { behavior: 'immediate' },
+  )
+}
+export async function signIn(
+  input: { email: string; password: string },
+  database = getDatabase(),
+) {
+  consumeAttempt(database)
+  const owner = database.select().from(workspaceOwner).get()
+  if (input.password.length > 128 || input.email.length > 254)
+    throw new AuthError(401, 'Invalid email or password.')
+  const [salt = '', expected = ''] = owner?.passwordHash.split(':') ?? [
+    '0'.repeat(32),
+    '0'.repeat(128),
+  ]
+  const actual = (await derive(input.password, salt)) as Buffer
+  if (
+    !owner ||
+    !equal(input.email.trim().toLowerCase(), owner.email) ||
+    !timingSafeEqual(actual, Buffer.from(expected, 'hex'))
+  )
+    throw new AuthError(401, 'Invalid email or password.')
+  return session(database, owner)
+}
+export function getSession(
+  token: string | undefined,
+  database = getDatabase(),
+): SafeOwner | null {
+  if (!token || token.length > 128) return null
+  const found = database
+    .select()
+    .from(authSessions)
+    .where(eq(authSessions.tokenHash, hash(token)))
+    .get()
+  if (!found) return null
+  if (found.expiresAt <= Date.now()) {
+    database
+      .delete(authSessions)
+      .where(eq(authSessions.tokenHash, found.tokenHash))
+      .run()
+    return null
+  }
+  const owner = database
+    .select()
+    .from(workspaceOwner)
+    .where(eq(workspaceOwner.id, found.ownerId))
+    .get()
+  return owner ? safeOwner(owner) : null
+}
+export function signOut(token: string | undefined, database = getDatabase()) {
+  if (token)
+    database
+      .delete(authSessions)
+      .where(eq(authSessions.tokenHash, hash(token)))
+      .run()
+}
+export function completeOnboarding(
+  token: string,
+  input: { name: string },
+  database = getDatabase(),
+): SafeOwner {
+  const owner = getSession(token, database)
+  if (!owner) throw new AuthError(401, 'Please sign in.')
+  const update = {
+    name: cleanName(input.name),
+    onboardingCompletedAt: owner.onboardingCompletedAt ?? Date.now(),
+  }
+  database
+    .update(workspaceOwner)
+    .set(update)
+    .where(eq(workspaceOwner.id, owner.id))
+    .run()
+  return { ...owner, ...update }
+}

src/features/auth/auth.test.ts

@@ -0,0 +1,150 @@
+// @vitest-environment node
+import { mkdtempSync, readFileSync, rmSync, statSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { openDatabase } from '../storage/database.server'
+import { authSessions, authThrottle, workspaceOwner } from '../storage/schema'
+import {
+  completeOnboarding,
+  createOwner,
+  getSession,
+  getSetupToken,
+  readAuthState,
+  SESSION_MAX_AGE_SECONDS,
+  signIn,
+  signOut,
+} from './auth.server'
+
+let database: ReturnType<typeof openDatabase>
+const credentials = {
+  email: '[email protected]',
+  password: 'correct horse battery staple',
+  name: 'Owner',
+  setupToken: 's'.repeat(32),
+}
+beforeEach(() => {
+  database = openDatabase(':memory:')
+  vi.stubEnv('WORKSPACE_SETUP_TOKEN', credentials.setupToken)
+})
+afterEach(() => {
+  database.$client.close()
+  vi.unstubAllEnvs()
+  vi.restoreAllMocks()
+})
+describe('owner authentication', () => {
+  it('requires a private setup token and stores only derived credentials and session tokens', async () => {
+    expect(readAuthState(database)).toEqual({ needsSetup: true })
+    await expect(
+      createOwner({ ...credentials, setupToken: 'wrong' }, database),
+    ).rejects.toMatchObject({ status: 401 })
+    expect(readAuthState(database).needsSetup).toBe(true)
+    const result = await createOwner(credentials, database)
+    expect(readAuthState(database)).toEqual({ needsSetup: false })
+    expect(result.owner.email).toBe(credentials.email)
+    expect(result.owner).not.toHaveProperty('passwordHash')
+    expect(
+      database.select().from(workspaceOwner).get()?.passwordHash,
+    ).not.toContain(credentials.password)
+    expect(database.select().from(authSessions).get()?.tokenHash).not.toEqual(
+      result.sessionToken,
+    )
+    expect(getSession(result.sessionToken, database)).toEqual(result.owner)
+    await expect(createOwner(credentials, database)).rejects.toMatchObject({
+      status: 409,
+    })
+  })
+  it('only allows one owner even when setup requests race', async () => {
+    const results = await Promise.allSettled([
+      createOwner(credentials, database),
+      createOwner(credentials, database),
+    ])
+    expect(
+      results.filter((result) => result.status === 'fulfilled'),
+    ).toHaveLength(1)
+    expect(database.select().from(workspaceOwner).all()).toHaveLength(1)
+  })
+  it('checks the email and password and revokes logged-out sessions', async () => {
+    await createOwner(credentials, database)
+    await expect(
+      signIn({ ...credentials, password: 'wrong' }, database),
+    ).rejects.toMatchObject({
+      status: 401,
+      message: 'Invalid email or password.',
+    })
+    await expect(
+      signIn({ ...credentials, email: '[email protected]' }, database),
+    ).rejects.toMatchObject({
+      status: 401,
+      message: 'Invalid email or password.',
+    })
+    const result = await signIn(
+      { ...credentials, email: '[email protected]' },
+      database,
+    )
+    expect(database.select().from(authThrottle).all()).toHaveLength(0)
+    expect(getSession('invented', database)).toBeNull()
+    expect(getSession(result.sessionToken, database)).not.toBeNull()
+    signOut(result.sessionToken, database)
+    expect(getSession(result.sessionToken, database)).toBeNull()
+  })
+  it('expires sessions and stores onboarding completion', async () => {
+    const result = await createOwner(credentials, database)
+    expect(result.owner.onboardingCompletedAt).toBeNull()
+    const owner = completeOnboarding(
+      result.sessionToken,
+      { name: 'Yuta' },
+      database,
+    )
+    expect(owner.name).toBe('Yuta')
+    expect(owner.onboardingCompletedAt).toBeTypeOf('number')
+    expect(getSession(result.sessionToken, database)).toEqual(owner)
+    expect(() =>
+      completeOnboarding('invalid', { name: 'Other' }, database),
+    ).toThrow('Please sign in.')
+    vi.spyOn(Date, 'now').mockReturnValue(
+      Date.now() + SESSION_MAX_AGE_SECONDS * 1000 + 1,
+    )
+    expect(getSession(result.sessionToken, database)).toBeNull()
+    expect(database.select().from(authSessions).all()).toHaveLength(0)
+  })
+  it('bounds setup and login attempts persistently and permits retry after cooldown', async () => {
+    for (let index = 0; index < 10; index++)
+      await expect(
+        createOwner({ ...credentials, setupToken: 'wrong' }, database),
+      ).rejects.toMatchObject({ status: 401 })
+    await expect(signIn(credentials, database)).rejects.toMatchObject({
+      status: 429,
+    })
+    vi.spyOn(Date, 'now').mockReturnValue(Date.now() + 15 * 60_000 + 1)
+    await expect(createOwner(credentials, database)).resolves.toHaveProperty(
+      'sessionToken',
+    )
+  })
+  it('rejects short passwords and invalid identity fields', async () => {
+    await expect(
+      createOwner({ ...credentials, password: 'short' }, database),
+    ).rejects.toMatchObject({ status: 400 })
+    await expect(
+      createOwner({ ...credentials, email: 'invalid' }, database),
+    ).rejects.toMatchObject({ status: 400 })
+    await expect(
+      createOwner({ ...credentials, name: ' ' }, database),
+    ).rejects.toMatchObject({ status: 400 })
+  })
+  it('creates a stable local setup token with private file permissions', () => {
+    const directory = mkdtempSync(join(tmpdir(), 'workspace-setup-'))
+    try {
+      vi.stubEnv('WORKSPACE_SETUP_TOKEN', '')
+      const path = join(directory, 'workspace.sqlite')
+      vi.stubEnv('TWITTER_LITE_DB_PATH', path)
+      const token = getSetupToken()
+      expect(token.length).toBeGreaterThanOrEqual(32)
+      expect(getSetupToken()).toBe(token)
+      expect(readFileSync(`${path}.setup-token`, 'utf8')).toBe(token)
+      expect(statSync(`${path}.setup-token`).mode & 0o777).toBe(0o600)
+    } finally {
+      rmSync(directory, { recursive: true, force: true })
+    }
+  })
+})

src/features/auth/gate.server.ts

@@ -0,0 +1,36 @@
+import { getSession, readAuthState } from './auth.server'
+import { sessionToken } from './http.server'
+
+const publicPaths = new Set(['/login', '/setup', '/api/auth'])
+
+export function checkSessionAccess(request: Request): Response | null {
+  const url = new URL(request.url)
+  if (publicPaths.has(url.pathname)) return null
+  const owner = getSession(sessionToken(request))
+  if (owner?.onboardingCompletedAt) return null
+  if (owner && url.pathname === '/onboarding') return null
+  const document =
+    request.method === 'GET' &&
+    request.headers.get('accept')?.includes('text/html') &&
+    !url.pathname.startsWith('/api/') &&
+    !url.pathname.startsWith('/_serverFn/')
+  if (document) {
+    const location = owner
+      ? '/onboarding'
+      : readAuthState().needsSetup
+        ? '/setup'
+        : '/login'
+    return new Response(null, {
+      status: 303,
+      headers: { location, 'cache-control': 'no-store' },
+    })
+  }
+  return Response.json(
+    {
+      error: owner
+        ? 'Complete onboarding to continue.'
+        : 'Sign in to continue.',
+    },
+    { status: owner ? 403 : 401, headers: { 'cache-control': 'no-store' } },
+  )
+}

src/features/auth/http.server.ts

@@ -0,0 +1,103 @@
+import {
+  AuthError,
+  completeOnboarding,
+  createOwner,
+  getSession,
+  readAuthState,
+  SESSION_MAX_AGE_SECONDS,
+  signIn,
+  signOut,
+} from './auth.server'
+
+const SESSION_COOKIE = 'workspace_session'
+
+export function sessionToken(request: Request) {
+  return request.headers
+    .get('cookie')
+    ?.split(';')
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(`${SESSION_COOKIE}=`))
+    ?.slice(SESSION_COOKIE.length + 1)
+}
+
+export function authState(request: Request) {
+  return { ...readAuthState(), owner: getSession(sessionToken(request)) }
+}
+
+function cookie(token: string, clear = false) {
+  const secure = process.env.TWITTER_LITE_ORIGIN?.startsWith('https:')
+  return `${SESSION_COOKIE}=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${clear ? 0 : SESSION_MAX_AGE_SECONDS}${secure ? '; Secure' : ''}`
+}
+
+export async function authEndpoint(request: Request) {
+  const headers = new Headers({
+    'cache-control': 'no-store',
+    vary: 'Cookie',
+    'content-type': 'application/json',
+  })
+  try {
+    if (request.method === 'GET')
+      return Response.json(authState(request), { headers })
+    if (request.method !== 'POST')
+      return new Response(null, { status: 405, headers })
+    if (!request.headers.get('content-type')?.startsWith('application/json'))
+      throw new AuthError(400, 'Use a JSON request.')
+    const body = await request.text()
+    if (body.length > 8192) throw new AuthError(413, 'Request is too large.')
+    let data: Record<string, unknown>
+    try {
+      const parsed = JSON.parse(body)
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+        throw new Error('invalid body')
+      data = parsed
+    } catch {
+      throw new AuthError(400, 'Check the form and try again.')
+    }
+    const text = (key: string) =>
+      typeof data[key] === 'string' ? data[key] : ''
+    const oldToken = sessionToken(request)
+    switch (data.action) {
+      case 'setup':
+      case 'login': {
+        const result =
+          data.action === 'setup'
+            ? await createOwner({
+                email: text('email'),
+                password: text('password'),
+                name: text('name'),
+                setupToken: text('setupToken'),
+              })
+            : await signIn({ email: text('email'), password: text('password') })
+        signOut(oldToken)
+        headers.set('set-cookie', cookie(result.sessionToken))
+        return Response.json(
+          { needsSetup: false, owner: result.owner },
+          { headers },
+        )
+      }
+      case 'onboard': {
+        const owner = completeOnboarding(oldToken ?? '', { name: text('name') })
+        return Response.json({ needsSetup: false, owner }, { headers })
+      }
+      case 'logout':
+        signOut(oldToken)
+        headers.set('set-cookie', cookie('', true))
+        return Response.json(
+          { needsSetup: readAuthState().needsSetup, owner: null },
+          { headers },
+        )
+      default:
+        throw new AuthError(400, 'Unknown action.')
+    }
+  } catch (error) {
+    if (error instanceof AuthError)
+      return Response.json(
+        { error: error.message },
+        { status: error.status, headers },
+      )
+    return Response.json(
+      { error: 'Unable to complete the request. Please try again.' },
+      { status: 500, headers },
+    )
+  }
+}

src/features/auth/onboarding-page.tsx

@@ -0,0 +1,151 @@
+import { useRouteContext } from '@tanstack/react-router'
+import { ArrowRight, BookOpen, House, MessagesSquare } from 'lucide-react'
+import { type FormEvent, useState } from 'react'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import { Label } from '#/components/ui/label'
+import { authRequest } from './auth-client'
+import { AuthFrame } from './auth-page'
+
+export function OnboardingPage() {
+  const { auth } = useRouteContext({ from: '__root__' })
+  const [name, setName] = useState(auth.owner?.name ?? '')
+  const [step, setStep] = useState(1)
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState('')
+
+  async function finish() {
+    setPending(true)
+    setError('')
+    try {
+      await authRequest({ action: 'onboard', name: name.trim() })
+      window.location.assign('/')
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : 'Unable to save. Please try again.',
+      )
+      setPending(false)
+    }
+  }
+
+  async function signOut() {
+    setPending(true)
+    setError('')
+    try {
+      await authRequest({ action: 'logout' })
+      window.location.assign('/login')
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : 'Unable to sign out. Please try again.',
+      )
+      setPending(false)
+    }
+  }
+
+  function next(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!name.trim()) return
+    setStep(2)
+  }
+
+  return (
+    <AuthFrame>
+      <p className="auth-step">{step} of 2</p>
+      {step === 1 ? (
+        <>
+          <header className="auth-heading">
+            <h1>A little context, to start.</h1>
+            <p>Your day, conversations, and reading, together in one place.</p>
+          </header>
+          <form className="auth-form" onSubmit={next}>
+            <div className="auth-field">
+              <Label htmlFor="displayName">What should we call you?</Label>
+              <Input
+                id="displayName"
+                name="displayName"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                autoComplete="given-name"
+                required
+                maxLength={80}
+                disabled={pending}
+              />
+            </div>
+            <Button
+              type="submit"
+              className="auth-submit"
+              size="lg"
+              disabled={pending || !name.trim()}
+            >
+              Continue
+              <ArrowRight aria-hidden="true" />
+            </Button>
+          </form>
+        </>
+      ) : (
+        <>
+          <header className="auth-heading">
+            <h1>Start with today.</h1>
+            <p>You can take it one thing at a time.</p>
+          </header>
+          <ul className="auth-overview">
+            <li>
+              <House aria-hidden="true" />
+              <div>
+                <strong>A place to begin</strong>
+                <p>A brief and flexible tasks help you find your next step.</p>
+              </div>
+            </li>
+            <li>
+              <MessagesSquare aria-hidden="true" />
+              <div>
+                <strong>Room for the everyday</strong>
+                <p>Keep conversations and quick notes close at hand.</p>
+              </div>
+            </li>
+            <li>
+              <BookOpen aria-hidden="true" />
+              <div>
+                <strong>Follow your curiosity</strong>
+                <p>Explore reading and research alongside your day.</p>
+              </div>
+            </li>
+          </ul>
+          <p className="auth-prototype">
+            Home, contacts, notes, reading, and vitals currently use sample
+            data. You can add connections from your profile menu whenever you’re
+            ready.
+          </p>
+          <div className="auth-actions">
+            <Button
+              variant="ghost"
+              onClick={() => setStep(1)}
+              disabled={pending}
+            >
+              Back
+            </Button>
+            <Button size="lg" onClick={finish} disabled={pending}>
+              {pending ? 'Saving…' : 'Open workspace'}
+              <ArrowRight aria-hidden="true" />
+            </Button>
+          </div>
+        </>
+      )}
+      {error && (
+        <p className="auth-error" role="alert">
+          {error}
+        </p>
+      )}
+      <footer className="auth-footer">
+        <span>{auth.owner?.email}</span>
+        <Button variant="ghost" size="sm" onClick={signOut} disabled={pending}>
+          Sign out
+        </Button>
+      </footer>
+    </AuthFrame>
+  )
+}

src/features/auth/session.ts

@@ -0,0 +1,14 @@
+import { createIsomorphicFn } from '@tanstack/react-start'
+import type { AuthState } from './auth-client'
+
+export const loadAuthState = createIsomorphicFn()
+  .server(async (): Promise<AuthState> => {
+    const { getRequest } = await import('@tanstack/react-start/server')
+    const { authState } = await import('./http.server')
+    return authState(getRequest())
+  })
+  .client(async (): Promise<AuthState> => {
+    const response = await fetch('/api/auth', { cache: 'no-store' })
+    if (!response.ok) throw new Error('Unable to check your session.')
+    return response.json()
+  })

src/features/connections/connection-manager-dialog.tsx

@@ -0,0 +1,84 @@
+import { useQuery } from '@tanstack/react-query'
+import { useRouteContext } from '@tanstack/react-router'
+import { useServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import { Dialog } from '#/components/dialog'
+import { Button } from '#/components/ui/button'
+import { authRequest } from '#/features/auth/auth-client'
+import { ConnectionManager } from './connection-manager'
+import { loadConnections } from './server-functions'
+
+export function ConnectionManagerDialog({
+  onClose,
+  hasTemporaryDecks,
+}: {
+  onClose: () => void
+  hasTemporaryDecks?: boolean
+}) {
+  const { auth } = useRouteContext({ from: '__root__' })
+  const [signingOut, setSigningOut] = useState(false)
+  const [error, setError] = useState('')
+  async function logout() {
+    setSigningOut(true)
+    setError('')
+    try {
+      await authRequest({ action: 'logout' })
+      window.location.assign('/login')
+    } catch {
+      setError('Unable to sign out. Please try again.')
+      setSigningOut(false)
+    }
+  }
+  const fetchConnections = useServerFn(loadConnections)
+  const connections = useQuery({
+    queryKey: ['connections'],
+    queryFn: () => fetchConnections(),
+    retry: false,
+  })
+
+  return (
+    <Dialog
+      title="Connected accounts"
+      onClose={onClose}
+      className="sm:max-w-2xl"
+    >
+      <div className="mb-5 flex items-center justify-between gap-4 border-b pb-4">
+        <div className="min-w-0">
+          <p className="truncate font-medium">{auth.owner?.name}</p>
+          <p className="truncate text-sm text-muted-foreground">
+            {auth.owner?.email}
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          disabled={signingOut}
+          onClick={() => void logout()}
+        >
+          {signingOut ? 'Signing out…' : 'Sign out'}
+        </Button>
+      </div>
+      {error && <p role="alert">{error}</p>}
+      {connections.isPending ? (
+        <p role="status">Loading connected accounts…</p>
+      ) : connections.isError ? (
+        <div className="grid gap-3">
+          <p role="alert">Could not load connected accounts.</p>
+          <Button variant="outline" onClick={() => void connections.refetch()}>
+            Retry
+          </Button>
+        </div>
+      ) : (
+        <>
+          {connections.data.relayError && (
+            <p role="alert">{connections.data.relayError}</p>
+          )}
+          <ConnectionManager
+            connections={connections.data.connections}
+            onChanged={() => connections.refetch()}
+            hasTemporaryDecks={hasTemporaryDecks}
+          />
+        </>
+      )}
+    </Dialog>
+  )
+}

src/features/connections/connection-manager.css

@@ -0,0 +1,55 @@
+.connection-manager {
+  display: grid;
+  gap: 1rem;
+}
+.connection-manager-description,
+.connection-manager-note {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: 0.875rem;
+}
+.connection-manager-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+.connection-manager-list > li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-block: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+.connection-manager-account {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.connection-manager-account > span:not([data-slot="badge"]) {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+}
+.connection-manager-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+.connection-manager-add {
+  display: grid;
+  gap: 0.75rem;
+}
+.connection-manager-add h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+@media (max-width: 480px) {
+  .connection-manager-list > li {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}