test(app): verify pairing sheet autofocus

Root-owned dialogs could not present over a sibling native dialog on iOS. Use the existing app-wide sheet stack for both native presentation forms, and release the underlying keyboard when a new sheet opens.

.github/ci-paths.yml

@@ -34,6 +34,7 @@ hub:
   - "packages/server/src/server/hub/**"
 
 server:
+  - "plugins/**"
   - "packages/server/**"
   - "packages/app/e2e/support/fixtures/recording.*"
 

.github/workflows/ci.yml

@@ -117,9 +117,15 @@ jobs:
       - name: Build server stack
         run: npm run build:server
 
+      - name: Verify built-in plugins from built output
+        run: node --test scripts/builtin-plugins-dist.test.mjs
+
       - name: Typecheck all packages
         run: npm run typecheck
 
+      - name: Run website tests
+        run: npx vitest run packages/website/src --bail=1
+
       - name: Install website test browsers
         run: npx playwright install --with-deps chromium webkit
 
@@ -169,6 +175,10 @@ jobs:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
           OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
 
+      - name: Run built-in plugin tests
+        if: ${{ needs.changes.outputs.full != 'false' || needs.changes.outputs.server != 'false' }}
+        run: npm run test --workspace=@getpaseo/builtin-plugins
+
       - name: Run Hub CLI/daemon contract
         if: ${{ needs.changes.outputs.full == 'false' && needs.changes.outputs.server == 'false' && needs.changes.outputs.hub != 'false' }}
         run: npm run test:hub-cli-contract --workspace=@getpaseo/server

docs/agent-lifecycle.md

@@ -34,8 +34,8 @@ workflows all live in the CLI process, and the completion notification that woul
 agent never arrives. A runtime that dies mid-turn is reported by whatever is draining its stream, but
 between turns nothing is watching, so the agent sits at `idle` looking healthy while its background
 work is gone. Report that exit as a turn failure so the agent lands in `error` with a timeline entry.
-Only the Claude provider does this today; the others still report a death only when a turn happens to
-be in flight.
+Claude and OMP report exits between turns. OMP relaunches from its session file on the next prompt;
+the unfinished turn is lost.
 
 ### Cancellation
 

docs/design.md

@@ -193,7 +193,7 @@ Terminology:
 
 Loading is inline by default. `<LoadingSpinner size={14} color={foregroundMuted} />` sits next to the thing it relates to (`packages/app/src/screens/settings/providers-section.tsx:227-231`). Page-level loading is a centered `<LoadingSpinner size="large">` (`packages/app/src/screens/sessions-screen.tsx:69-72`). Card-level loading is a single short line, not a spinner. In-row dropdown items use `<DropdownMenuItem status="pending" pendingLabel="Removing...">`; the menu item handles its own pending state.
 
-Empty states are short noun phrases. Centered, muted, one or two lines. Sessions screen pairs the empty noun with a single ghost button to navigate back (`packages/app/src/screens/sessions-screen.tsx:74-81`); that pairing is the maximum elaboration. Illustrations and CTAs disguised as empty states are wrong.
+Screen-level empty states use a centered, muted noun phrase and at most one ghost button (`packages/app/src/screens/sessions-screen.tsx`). Sidebar list empty states use a quiet bordered card with a left-aligned `sm` title, a muted `sm` description, and `xs` `<Button>` actions. Use `secondary` for the primary action and `outline` for a secondary action (`packages/app/src/components/sidebar/empty-states.tsx`). Keep both forms short and free of illustrations.
 
 Inline errors are a single sentence in `palette.red[300]` `xs`, sitting under the field or inside the card it relates to (`packages/app/src/screens/settings/providers-section.tsx:115-119`).
 

docs/glossary.md

@@ -31,6 +31,9 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
 - **Agent profile** — A named launch bundle: provider, model, mode, thinking option, feature values, and free-text notes. Applying one writes those values into the **Agent controls** and is then forgotten — there is no selected profile, no default profile, and no drift tracking. The notes are written for orchestrating agents and are what the `list_profiles` MCP tool surfaces. Stored host-wide in daemon config as `agentProfiles`. UI: "Agent profiles". Code: `AgentProfile` (`packages/protocol/src/messages.ts:161`). Carries no system prompt, because a per-agent system prompt can only be set at creation. Forbidden: "Favourite", which this replaced.
 - **Terminal profile** — A named shell command a terminal can launch. Stored host-wide in daemon config as `terminalProfiles`. UI: "Terminal profiles". Code: `TerminalProfile` (`packages/protocol/src/messages.ts:135`), `resolveTerminalProfiles` (`packages/protocol/src/terminal-profiles.ts`). Also selectable as a New Workspace launch target, where the alternative is the chat agent.
 - **Provider** — Agent backend (Claude Code, Codex, Copilot, OpenCode, Pi, Oh My Pi). UI: "Provider". Code: `ProviderSnapshotEntry` (`packages/protocol/src/messages.ts:198`).
+- **Usage source** — Plugin registration that discovers accounts and fetches plan usage. Code: `UsageSourceRegistration` (`packages/plugin/src/server/usage.ts`).
+- **Report ID** — Stable daemon-composed identity for one source account: `<sourceId>:<accountKey>`. The source owns the account key; clients treat the whole ID as opaque. Code: `UsageReportEntry.id` (`packages/protocol/src/messages.ts`).
+- **Usage report** — A source's normalized usage for one account, including status and optional windows, balances, and details. Its entry carries the Report ID, account label, and fetch time. Code: `UsageReport` (`packages/plugin/src/server/usage.ts`).
 - **Model** — A specific LLM offered by a provider. UI: "Model" / "Select model". Code: `AgentModelDefinition` (`packages/protocol/src/messages.ts:187`).
 - **Tab** — UI surface representing one session inside a workspace. Not a conceptual unit; use **Agent session** when talking about the model. Code: `WorkspaceTabDescriptor` (`packages/app/src/screens/workspace/workspace-tabs-types.ts`).
 - **Terminal** — Workspace-scoped PTY shell streamed over the binary mux channel. UI: "Terminal". Code: `TerminalStreamFrame` (`packages/protocol/src/terminal-stream-protocol.ts`).

docs/plugins.md

@@ -36,7 +36,8 @@ The daemon stores directory sources under the root `plugins` object:
 }
 ```
 
-The plugin system is disabled unless `pluginsEnabled` is `true`. Changing that root field is
+Installed plugins are disabled unless `pluginsEnabled` is `true`. Built-in plugins remain active.
+Changing that root field is
 runtime-safe: run `paseo reload` after editing `config.json`. Enabling starts every configured,
 enabled plugin; disabling tears them all down without restarting the daemon. Plugin source entries
 remain lifecycle-owned and do not reload from manual config edits.
@@ -85,6 +86,15 @@ plugin before compiling and starting from disk. A failed reload stays failed; Pa
 the old code. Use `enable`, `disable`, and `remove` to manage one plugin. Removing a directory source
 never deletes it. The global `pluginsEnabled` switch remains available.
 
+## Built-in plugins
+
+Built-in plugins live in `plugins/<id>/` and ship with the daemon. Add a directory and one ID to
+`builtinPlugins` in `packages/server/src/server/plugins/builtin/index.ts`. The workspace, build
+copy, and CI checks cover every listed directory; unlisted directories do not load. Built-ins run
+in process, ignore `pluginsEnabled`, and do not appear in `config.json` or the installed plugin
+list. Their client bundles appear in the plugin catalog. Editing one in development requires a
+daemon restart. Directory, Git, and npm installs cannot use a built-in ID.
+
 ## Install a Git source
 
 GitHub repositories use an `owner/repository` shorthand. Other hosts use a Git URL. An existing
@@ -376,6 +386,12 @@ external `href` or `xlink:href` references are rejected. Fragment references suc
 allowed. Paseo reads and sanitizes the file when the plugin starts; the string is never an inline
 SVG or URL.
 
+## Usage sources
+
+Register a usage source from `index.server.ts` with `server.registerUsageSource()`. Import `UsageSourceRegistration` and normalization helpers from `@getpaseo/plugin/server/usage`. `input` is a Zod schema checked inside the plugin process before `fetch(input)` runs. `discover()` returns the inputs for accounts found on the host; an empty list omits the source from host usage. `fetch()` returns a report with a stable `account.key` so the daemon can deduplicate accounts and cache by source and input. A failed input or fetch becomes an error report for that source. `icon` uses the same sanitized SVG file rules as provider icons.
+
+The daemon calls discovery for `usage.list_reports`; the client gates this RPC on `server_info.features.usageSources`. The old `provider.usage.list` RPC maps discovered reports for older clients. See the [public usage source reference](../public-docs/plugins/reference.md#usage-sources) for the author contract and minimum version.
+
 ## Contribute buttons
 
 Header buttons and composer pills share the client-only descriptor and registration lifecycle in

docs/providers.md

@@ -197,26 +197,17 @@ promise for completion: equal results, including equal discovery timestamps, emi
 
 ---
 
-## Provider Usage Fetchers
+## Usage sources
 
-Provider plan usage is fetch-on-demand, not a daemon push subscription. The app calls `provider.usage.list.request` through React Query when the usage tooltip or Host Usage settings screen is shown, and the daemon returns the normalized `ProviderUsage` list directly.
+Usage is fetched on demand from plugin usage sources. Each source registers through `server.registerUsageSource()` with an input schema, `fetch(input)`, and optional `discover()`. The daemon discovers configured accounts, validates inputs in the plugin runtime, caches each source/input result for five minutes, and returns `usage.list_reports.response`. A source report has an account key, availability status, plan label, windows, balances, and details. Mark the window the app should show first with `headline: true`.
 
-To add plan usage for a provider, add `packages/server/src/services/quota-fetcher/providers/<provider>.ts` and register it in `packages/server/src/services/quota-fetcher/manifest.ts`. The provider file exports only its fetcher class; provider auth, endpoint constants, API schemas, and normalization helpers stay private in that file. A fetcher owns provider auth/API parsing and returns the generic shape:
+Create a built-in source under `plugins/<name>-usage-source/` with the same manifest, entry, `server/`, `shared/`, and `icon.svg` layout as an external plugin. Add its ID to `builtinPlugins` in `packages/server/src/server/plugins/builtin/index.ts`. Keep credential discovery, API parsing, and normalization inside the source; use helpers from `@getpaseo/plugin/server/usage`. The wire shape remains source agnostic. See [plugin usage sources](plugins.md#usage-sources).
 
-- `providerId`, `displayName`, `status`, and optional `planLabel`
-- any number of `windows` such as Session, Weekly, or Biweekly
-- optional `balances` for credits, USD, requests, or tokens
-- optional `details` for provider-specific rows
+`provider.usage.list` remains a compatibility RPC for older apps. It maps discovered reports to `ProviderUsage`. New clients use `usage.list_reports` after checking `server_info.features.usageSources`.
 
-Keep the protocol shape provider-agnostic. Do not add provider-specific renderers for new limit windows; labels and generic bars should carry the UI. API responses should be parsed and normalized with Zod inside the fetcher, while the protocol boundary stays strict so old/new client compatibility is explicit.
+### Credentials are read only
 
-Kimi Code usage follows the CLI-managed credential file at `KIMI_CODE_HOME` or `~/.kimi-code/credentials/kimi-code.json`; do not probe the legacy `~/.kimi` path as the primary source for current Kimi Code installs.
-
-Cursor usage reads the desktop `state.vscdb` token first, then `cursor-agent`'s `~/.config/cursor/auth.json`. Headless hosts only have the CLI file.
-
-### Usage fetchers are read-only on credentials
-
-A fetcher reads the provider's credential file and never writes it. On a 401 or 403 it returns `unavailable` and leaves refresh to the provider's own CLI: redeeming a refresh token in the fetcher invalidates the CLI's copy (refresh tokens are single-use), and rewriting the file through the fetcher's Zod schema drops any field the schema does not model, corrupting the file for the CLI.
+A source reads provider credentials without writing them. On 401 or 403 it returns `unavailable` and leaves refresh to the provider CLI. Redeeming a refresh token here would invalidate the CLI's copy; rewriting a parsed credential file could drop fields the source does not model.
 
 ---
 

fastlane/metadata/android/en-US/changelogs/100011.txt

@@ -1,10 +0,0 @@
-Added
-- Added Claude Sonnet 5.5 for Claude Code 2.1.284 and newer
-
-Fixed
-- Fixed OpenCode chats failing with "Variant unavailable" after switching to a model without the selected thinking level
-- Fixed rewinding a Codex chat dropping its custom provider and Paseo tools
-- Fixed streamed replies joining lines of code blocks and Mermaid diagrams until the chat reloads
-- Fixed a subagent opened from a split pane opening in a different pane
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100012.txt

@@ -1,10 +0,0 @@
-Added
-- Added Claude Sonnet 5.5 for Claude Code 2.1.284 and newer
-
-Fixed
-- Fixed OpenCode chats failing with "Variant unavailable" after switching to a model without the selected thinking level
-- Fixed rewinding a Codex chat dropping its custom provider and Paseo tools
-- Fixed streamed replies joining lines of code blocks and Mermaid diagrams until the chat reloads
-- Fixed a subagent opened from a split pane opening in a different pane
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100013.txt

@@ -1,10 +0,0 @@
-Added
-- Added Claude Sonnet 5.5 for Claude Code 2.1.284 and newer
-
-Fixed
-- Fixed OpenCode chats failing with "Variant unavailable" after switching to a model without the selected thinking level
-- Fixed rewinding a Codex chat dropping its custom provider and Paseo tools
-- Fixed streamed replies joining lines of code blocks and Mermaid diagrams until the chat reloads
-- Fixed a subagent opened from a split pane opening in a different pane
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100014.txt

@@ -1,10 +0,0 @@
-Added
-- Added Claude Sonnet 5.5 for Claude Code 2.1.284 and newer
-
-Fixed
-- Fixed OpenCode chats failing with "Variant unavailable" after switching to a model without the selected thinking level
-- Fixed rewinding a Codex chat dropping its custom provider and Paseo tools
-- Fixed streamed replies joining lines of code blocks and Mermaid diagrams until the chat reloads
-- Fixed a subagent opened from a split pane opening in a different pane
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100021.txt

@@ -1,8 +0,0 @@
-Fixed
-- Fixed OpenCode v2 turns longer than five minutes failing with UNDERRHEADERS_TIMEOUT
-- Fixed the context meter staying empty during OpenCode v2 turns and disappearing after them
-- Fixed OpenCode v2 question cards showing only the header and offering no typed answer
-- Fixed OpenCode v2 patch edits from GPT models showing as a raw Patch card instead of an edit diff
-- Fixed completed OpenCode v2 edits showing no diff
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100022.txt

@@ -1,8 +0,0 @@
-Fixed
-- Fixed OpenCode v2 turns longer than five minutes failing with UNDERRHEADERS_TIMEOUT
-- Fixed the context meter staying empty during OpenCode v2 turns and disappearing after them
-- Fixed OpenCode v2 question cards showing only the header and offering no typed answer
-- Fixed OpenCode v2 patch edits from GPT models showing as a raw Patch card instead of an edit diff
-- Fixed completed OpenCode v2 edits showing no diff
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100023.txt

@@ -1,8 +0,0 @@
-Fixed
-- Fixed OpenCode v2 turns longer than five minutes failing with UNDERRHEADERS_TIMEOUT
-- Fixed the context meter staying empty during OpenCode v2 turns and disappearing after them
-- Fixed OpenCode v2 question cards showing only the header and offering no typed answer
-- Fixed OpenCode v2 patch edits from GPT models showing as a raw Patch card instead of an edit diff
-- Fixed completed OpenCode v2 edits showing no diff
-
-Full notes: https://paseo.sh/changelog

fastlane/metadata/android/en-US/changelogs/100024.txt

@@ -1,8 +0,0 @@
-Fixed
-- Fixed OpenCode v2 turns longer than five minutes failing with UNDERRHEADERS_TIMEOUT
-- Fixed the context meter staying empty during OpenCode v2 turns and disappearing after them
-- Fixed OpenCode v2 question cards showing only the header and offering no typed answer
-- Fixed OpenCode v2 patch edits from GPT models showing as a raw Patch card instead of an edit diff
-- Fixed completed OpenCode v2 edits showing no diff
-
-Full notes: https://paseo.sh/changelog

knip.json

@@ -1,6 +1,10 @@
 {
   "$schema": "./node_modules/knip/schema.json",
   "workspaces": {
+    "plugins": {
+      "entry": ["**/index.{server,client}.{ts,tsx}", "**/*.test.ts"],
+      "project": ["**/*.{ts,tsx}"]
+    },
     ".": {
       "entry": ["scripts/**/*.{js,mjs,cjs,ts}"],
       "project": ["scripts/**/*.{js,mjs,cjs,ts}"]

nix/npm-deps.hash

@@ -1 +1 @@
-sha256-wHz2O/y9bAQsZVQGUMnSYbg40h5W5ogv0hg2Lq+/UrM=
+sha256-pVwIsufl/4VVcTiqJYbqy4hNnL2O5EBpl5DN5As+20c=

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "paseo",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "workspaces": [
+        "plugins",
         "packages/expo-two-way-audio",
         "packages/highlight",
         "packages/plugin",
@@ -6333,6 +6334,10 @@
       "resolved": "packages/app",
       "link": true
     },
+    "node_modules/@getpaseo/builtin-plugins": {
+      "resolved": "plugins",
+      "link": true
+    },
     "node_modules/@getpaseo/cli": {
       "resolved": "packages/cli",
       "link": true
@@ -36410,7 +36415,7 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "@codemirror/commands": "6.10.4",
         "@codemirror/language": "6.12.4",
@@ -37476,12 +37481,12 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/client": "0.10.2",
-        "@getpaseo/protocol": "0.10.2",
-        "@getpaseo/server": "0.10.2",
+        "@getpaseo/client": "0.10.0",
+        "@getpaseo/protocol": "0.10.0",
+        "@getpaseo/server": "0.10.0",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -37728,10 +37733,10 @@
     },
     "packages/client": {
       "name": "@getpaseo/client",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
-        "@getpaseo/protocol": "0.10.2",
-        "@getpaseo/relay": "0.10.2",
+        "@getpaseo/protocol": "0.10.0",
+        "@getpaseo/relay": "0.10.0",
         "zod": "^4.4.3"
       },
       "devDependencies": {
@@ -37742,7 +37747,7 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@getpaseo/cli": "*",
@@ -37986,7 +37991,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "license": "MIT",
       "devDependencies": {
         "@types/jest": "^29.5.14",
@@ -38882,7 +38887,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "@codemirror/language": "6.12.4",
         "@codemirror/legacy-modes": "^6.5.3",
@@ -38911,14 +38916,14 @@
     },
     "packages/plugin": {
       "name": "@getpaseo/plugin",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "@agentclientprotocol/sdk": "^1.4.0",
         "use-sync-external-store": "^1.6.0"
       },
       "devDependencies": {
-        "@getpaseo/client": "0.10.2",
-        "@getpaseo/protocol": "0.10.2",
+        "@getpaseo/client": "0.10.0",
+        "@getpaseo/protocol": "0.10.0",
         "@types/node": "^20.9.0",
         "@types/react": "~19.2.0",
         "react": "19.1.0",
@@ -38928,8 +38933,8 @@
         "zod": "^4.4.3"
       },
       "peerDependencies": {
-        "@getpaseo/client": "0.10.2",
-        "@getpaseo/protocol": "0.10.2",
+        "@getpaseo/client": "0.10.0",
+        "@getpaseo/protocol": "0.10.0",
         "react": "~19.1.0",
         "react-native": ">=0.81.5",
         "zod": "^4.4.3"
@@ -38951,7 +38956,7 @@
     },
     "packages/protocol": {
       "name": "@getpaseo/protocol",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "semver": "^7.8.5",
         "zod": "^4.4.3"
@@ -38978,7 +38983,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -39196,16 +39201,16 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.17.1",
         "@anthropic-ai/claude-agent-sdk": "0.3.246",
         "@anthropic-ai/sdk": "^0.104.2",
-        "@getpaseo/client": "0.10.2",
-        "@getpaseo/highlight": "0.10.2",
-        "@getpaseo/plugin": "0.10.2",
-        "@getpaseo/protocol": "0.10.2",
-        "@getpaseo/relay": "0.10.2",
+        "@getpaseo/client": "0.10.0",
+        "@getpaseo/highlight": "0.10.0",
+        "@getpaseo/plugin": "0.10.0",
+        "@getpaseo/protocol": "0.10.0",
+        "@getpaseo/relay": "0.10.0",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "1.29.0",
         "@opencode-ai/sdk": "1.14.46",
@@ -39238,6 +39243,7 @@
         "uuid": "^9.0.1",
         "which": "^5.0.0",
         "ws": "^8.14.2",
+        "yaml": "2.9.1",
         "zod": "^4.4.3"
       },
       "devDependencies": {
@@ -40096,6 +40102,21 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "packages/server/node_modules/yaml": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.1.tgz",
+      "integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "packages/server/node_modules/yocto-queue": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
@@ -40110,7 +40131,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.10.2",
+      "version": "0.10.0",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.29.1",
         "@cloudflare/workers-types": "^4.20260317.1",
@@ -41712,6 +41733,18 @@
           "optional": true
         }
       }
+    },
+    "plugins": {
+      "name": "@getpaseo/builtin-plugins",
+      "version": "0.0.0",
+      "dependencies": {
+        "@getpaseo/plugin": "*",
+        "zod": "^4.4.3"
+      },
+      "devDependencies": {
+        "@types/node": "^20.9.0",
+        "vitest": "^4.1.6"
+      }
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "private": true,
   "description": "Paseo: voice-controlled development environment for local AI coding agents",
   "keywords": [
@@ -21,6 +21,7 @@
     "url": "https://github.com/getpaseo/paseo.git"
   },
   "workspaces": [
+    "plugins",
     "packages/expo-two-way-audio",
     "packages/highlight",
     "packages/plugin",
@@ -66,7 +67,7 @@
     "watch:protocol": "npm run watch --workspace=@getpaseo/protocol",
     "watch:client": "tsc -p packages/client/tsconfig.json --watch --preserveWatchOutput",
     "typecheck": "npm run typecheck --workspaces --if-present",
-    "typecheck:server": "npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/protocol && npm run typecheck --workspace=@getpaseo/client && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli",
+    "typecheck:server": "npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/protocol && npm run typecheck --workspace=@getpaseo/client && npm run typecheck --workspace=@getpaseo/builtin-plugins && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli",
     "test": "npm run test --workspaces --if-present",
     "format": "oxfmt .",
     "format:files": "oxfmt",

packages/app/e2e/browser/agent-relative-time.spec.ts

@@ -0,0 +1,51 @@
+import { expect, test } from "../support/fixtures";
+import { openCommandCenter } from "../support/helpers/command-center";
+import { getServerId } from "../support/helpers/server-id";
+import { seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+import { openAgentRoute } from "../support/helpers/mock-agent";
+import { resetSeededPageState, openSessions } from "../support/helpers/archive-tab";
+import { closeSidebarDisplayPreferences, openSidebarDisplayPage } from "../support/helpers/sidebar";
+
+test("agent list age advances and command center says just now for a fresh agent", async ({
+  page,
+}) => {
+  const session = await seedMockAgentWorkspace({
+    repoPrefix: "agent-relative-time-",
+    title: "Relative time agent",
+  });
+  try {
+    await session.client.waitForAgentUpsert(session.agentId, (agent) => agent.status === "idle");
+    await resetSeededPageState(page);
+    await page.clock.install({ time: Date.now() });
+    await openSessions(page);
+
+    const row = page.getByTestId(`agent-row-${getServerId()}-${session.agentId}`);
+    await expect(row).toContainText("just now", { timeout: 30_000 });
+
+    const commandCenter = await openCommandCenter(page);
+    await commandCenter.getByTestId("command-center-input").fill("Relative time agent");
+    const agentResult = commandCenter.getByTestId(
+      `command-center-agent-${getServerId()}:${session.agentId}`,
+    );
+    await expect(agentResult.getByTestId("command-center-agent-subtitle")).toContainText(
+      "just now",
+    );
+    await page.keyboard.press("Escape");
+
+    await page.clock.fastForward("03:00");
+    await expect(row).toContainText("3m ago");
+
+    await openAgentRoute(page, session);
+    await page.getByTestId(`workspace-tab-agent_${session.agentId}`).first().hover();
+    await expect(page.getByTestId(`workspace-tab-tooltip-agent_${session.agentId}`)).toContainText(
+      "3m ago",
+    );
+
+    await openSidebarDisplayPage(page, "sidebar-display-show");
+    await page.getByRole("menuitem", { name: "Last activity", exact: true }).click();
+    await closeSidebarDisplayPreferences(page);
+    await expect(page.getByTestId("sidebar-workspace-timestamp").first()).toHaveText("3m");
+  } finally {
+    await session.cleanup();
+  }
+});

packages/app/e2e/browser/chat-outline.spec.ts

@@ -17,12 +17,14 @@ import {
   hoverChatOutlinePrompt,
   chatOutlineRail,
   movePointerOffChatOutline,
+  observePromptIndexRequests,
   pointAtChatOutlineRowEdge,
   pressEnterOnFocusedPrompt,
   splitCurrentPanelRight,
   withStreamingMarkdownOutline,
   expectReadingStreamedMarkdown,
 } from "../support/helpers/chat-outline";
+import { createCreationScenario } from "../support/helpers/creation";
 import {
   expectTimelineAtMaximumScrollWithPromptVisible,
   expectTimelinePromptNotMounted,
@@ -266,3 +268,21 @@ test.describe("desktop chat outline", () => {
     }
   });
 });
+
+test("indexes a new agent's prompts only once the agent exists", async ({ page }) => {
+  const promptIndex = await observePromptIndexRequests(page);
+  const creation = await createCreationScenario(page);
+  try {
+    await page.setViewportSize(WIDE_VIEWPORT);
+    await creation.openAgentDraft();
+    await creation.submitPrompt("Start an agent with an outline.");
+    await creation.expectPromptVisible();
+
+    const agentIds = await creation.agentIds();
+    expect(agentIds).toHaveLength(1);
+    await promptIndex.waitForRequestFor(agentIds[0]!);
+    expect(promptIndex.requestedAgentIds()).toEqual(agentIds);
+  } finally {
+    await creation.cleanup();
+  }
+});

packages/app/e2e/browser/codex-speed.spec.ts

@@ -0,0 +1,122 @@
+import path from "node:path";
+import { expect, test, type Page } from "../support/fixtures";
+import { seedWorkspace } from "../support/helpers/seed-client";
+import { openAgentRoute } from "../support/helpers/mock-agent";
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import { connectDaemonClient } from "../support/helpers/daemon-client-loader";
+
+// This fixture catalog advertises Ultrafast on Sol; another model offers Fast only.
+// The real daemon discovers both through the same Codex model/list boundary.
+test.use({
+  e2eDaemonConfig: {
+    version: 1,
+    agents: {
+      providers: {
+        codex: {
+          enabled: true,
+          command: [process.execPath, path.resolve("e2e/fixtures/catalog-codex.mjs")],
+        },
+        claude: { enabled: false },
+        copilot: { enabled: false },
+        opencode: { enabled: false },
+        pi: { enabled: false },
+        omp: { enabled: false },
+      },
+    },
+  },
+});
+
+async function openSpeedSelector(page: Page): Promise<void> {
+  const speed = page.getByRole("button", { name: /^(Select speed|Speed: .+)$/ });
+  const features = page.getByRole("button", { name: "Open agent features", exact: true });
+  const modelSettings = page.getByRole("button", { name: /^Select model \(/ });
+  await expect(speed.or(features).or(modelSettings).filter({ visible: true }).first()).toBeVisible({
+    timeout: 30_000,
+  });
+  if (!(await speed.isVisible())) {
+    if (await features.isVisible()) await features.click();
+    else await modelSettings.click();
+  }
+  await expect(speed).toBeVisible({ timeout: 30_000 });
+  await speed.click();
+  await expect(page.getByText("Normal", { exact: true }).last()).toBeVisible();
+}
+
+async function selectSpeed(page: Page, label: string): Promise<void> {
+  await page.getByRole("button", { name: label, exact: true }).last().click();
+  const toolbarTrigger = page.getByRole("button", { name: `Speed: ${label}`, exact: true });
+  const sheetTrigger = page.getByRole("button", { name: "Select speed", exact: true });
+  await expect(toolbarTrigger.or(sheetTrigger)).toBeVisible();
+  if (await toolbarTrigger.isVisible()) await expect(toolbarTrigger).toHaveText("");
+  else await expect(sheetTrigger).toContainText(label);
+}
+
+async function expectSpeedChoices(page: Page, choices: string[]): Promise<void> {
+  for (const choice of ["Normal", "Fast", "Ultrafast"]) {
+    const option = page.getByText(choice, { exact: true }).last();
+    if (choices.includes(choice)) {
+      await expect(option).toBeVisible();
+      await expect(option).toBeInViewport({ ratio: 1 });
+    } else await expect(option).not.toBeVisible();
+  }
+}
+
+async function switchAgentModel(agentId: string, modelId: string): Promise<void> {
+  const client = await connectDaemonClient<
+    Pick<DaemonClient, "setAgentModel" | "close" | "connect">
+  >({
+    clientIdPrefix: "codex-speed-model",
+  });
+  try {
+    await client.setAgentModel(agentId, modelId);
+  } finally {
+    await client.close();
+  }
+}
+
+for (const viewport of [
+  { name: "desktop", width: 1280, height: 850 },
+  { name: "compact", width: 390, height: 844 },
+]) {
+  test(`Codex catalog drives speed choices on ${viewport.name}`, async ({ page }, testInfo) => {
+    test.setTimeout(180_000);
+    await page.setViewportSize(viewport);
+    const workspace = await seedWorkspace({ repoPrefix: "codex-speed-" });
+    try {
+      const agent = await workspace.client.createAgent({
+        provider: "codex",
+        cwd: workspace.repoPath,
+        workspaceId: workspace.workspaceId,
+        title: "Speed settings",
+        model: "gpt-6.1-sol",
+        modeId: "full-access",
+        initialPrompt: "Get ready to work on this project.",
+      });
+      await openAgentRoute(page, { workspaceId: workspace.workspaceId, agentId: agent.id });
+      if (viewport.name === "desktop") {
+        const trigger = page.getByRole("button", { name: "Speed: Normal", exact: true });
+        await expect(trigger).toBeVisible({ timeout: 30_000 });
+        await expect(trigger).toHaveText("");
+        await page.screenshot({ path: testInfo.outputPath("desktop-normal-trigger.png") });
+      }
+      await openSpeedSelector(page);
+      await expectSpeedChoices(page, ["Normal", "Fast", "Ultrafast"]);
+      await page.screenshot({ path: testInfo.outputPath(`${viewport.name}-speed-options.png`) });
+      await selectSpeed(page, "Ultrafast");
+      await openSpeedSelector(page);
+      await expectSpeedChoices(page, ["Normal", "Fast", "Ultrafast"]);
+      await page.screenshot({
+        path: testInfo.outputPath(`${viewport.name}-ultrafast-selected.png`),
+      });
+      await selectSpeed(page, "Normal");
+      if (viewport.name === "desktop") {
+        await switchAgentModel(agent.id, "gpt-6-sol");
+        await openSpeedSelector(page);
+        await expectSpeedChoices(page, ["Normal", "Fast"]);
+        await page.screenshot({ path: testInfo.outputPath("desktop-fast-only.png") });
+      }
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+}

packages/app/e2e/browser/commit-diff-panel.spec.ts

@@ -87,7 +87,25 @@ test("commit history shows dates and shares diff layout preferences", async ({
   await expect(panel.getByTestId("git-diff-canvas")).toBeVisible();
 });
 
-async function createFeatureCommit(repoPath: string): Promise<void> {
+test("a fresh commit says just now and its age advances", async ({ page, withWorkspace }) => {
+  const workspace = await withWorkspace({ prefix: "commit-relative-time-" });
+  const committedAt = new Date();
+  await createFeatureCommit(workspace.repoPath, committedAt.toISOString());
+  await page.clock.install({ time: committedAt });
+  await workspace.navigateTo();
+
+  await openChangesTreePanel(page);
+  await page.getByRole("button", { name: /Commits/i }).click();
+  const row = page.locator('[data-testid^="commit-row-"]').filter({ hasText: COMMIT_SUBJECT });
+  await expect(row).toContainText("just now", { timeout: 30_000 });
+  await page.clock.fastForward("03:00");
+  await expect(row).toContainText("3m ago");
+});
+
+async function createFeatureCommit(
+  repoPath: string,
+  authorDate = "2020-01-15T12:00:00Z",
+): Promise<void> {
   execFileSync("git", ["checkout", "-b", "feature"], { cwd: repoPath, stdio: "ignore" });
   await writeFile(path.join(repoPath, "feature.txt"), "before\nafter\n");
   execFileSync("git", ["add", "feature.txt"], { cwd: repoPath, stdio: "ignore" });
@@ -96,8 +114,8 @@ async function createFeatureCommit(repoPath: string): Promise<void> {
     stdio: "ignore",
     env: {
       ...process.env,
-      GIT_AUTHOR_DATE: "2020-01-15T12:00:00Z",
-      GIT_COMMITTER_DATE: "2020-01-15T12:00:00Z",
+      GIT_AUTHOR_DATE: authorDate,
+      GIT_COMMITTER_DATE: authorDate,
     },
   });
 }

packages/app/e2e/browser/composer-autocomplete.spec.ts

@@ -10,6 +10,7 @@ import { daemonWsRoutePattern } from "../support/helpers/daemon-port";
 import { getServerId } from "../support/helpers/server-id";
 import { switchWorkspaceViaSidebar } from "../support/helpers/workspace-ui";
 import { expectMobileAgentSidebarVisible } from "../support/helpers/sidebar";
+import { expectNewWorkspaceProjectSelected } from "../support/helpers/new-workspace";
 
 const TEST_COMMANDS = [
   {
@@ -338,6 +339,16 @@ function expectPopoverFramesStable(frames: PopoverFrame[]): void {
   ).toBeUndefined();
 }
 
+function recordCommandRequestsByAgentId(page: Page): string[] {
+  const requests: string[] = [];
+  const record = ({ payload }: { payload: string | Buffer }) => {
+    if (typeof payload !== "string" || !payload.includes("list_commands_request")) return;
+    if (!payload.includes("draftConfig")) requests.push(payload);
+  };
+  page.on("websocket", (socket) => socket.on("framesent", record));
+  return requests;
+}
+
 function expectPopoverDoesNotDisappearAfterFirstVisible(frames: PopoverFrame[]): void {
   const firstVisibleIndex = frames.findIndex(
     (frame) =>
@@ -359,6 +370,25 @@ function expectPopoverDoesNotDisappearAfterFirstVisible(frames: PopoverFrame[]):
 }
 
 test.describe("Composer autocomplete", () => {
+  test("keeps New workspace off the running-agent command list before a project is chosen", async ({
+    page,
+  }) => {
+    const commandRequestsByAgentId = recordCommandRequestsByAgentId(page);
+
+    await page.goto("/new");
+    await expectNewWorkspaceProjectSelected(page, "Choose project");
+    await composerLocator(page).fill("/");
+
+    const popover = page
+      .getByTestId("composer-autocomplete-popover")
+      .filter({ visible: true })
+      .first();
+    await expect(popover).toContainText("Choose a project to see commands", { timeout: 30_000 });
+    await expect(popover).not.toContainText("/clear");
+    await expect(popover).not.toContainText("/exit");
+    expect(commandRequestsByAgentId).toEqual([]);
+  });
+
   test("stays visible after returning from app-wide routes", async ({ page }) => {
     await installListCommandsStub(page);
     const serverId = getServerId();

packages/app/e2e/browser/content-width.spec.ts

@@ -0,0 +1,70 @@
+import { test } from "../support/fixtures";
+import {
+  expectContentColumnWidth,
+  expectCustomContentWidthSetting,
+  expectDefaultContentWidthSetting,
+  openAppearanceSettings,
+  resetContentWidth,
+  setContentWidth,
+} from "../support/helpers/content-width";
+import { openFileExplorer, openFileFromExplorer } from "../support/helpers/file-explorer";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+
+const ULTRAWIDE_VIEWPORT = { width: 2560, height: 1080 };
+
+test("widens chat and Markdown files to the chosen content width and resets to the default", async ({
+  page,
+}, testInfo) => {
+  test.setTimeout(120_000);
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "content-width-",
+    title: "Content width",
+    initialPrompt: "Write a long paragraph.",
+  });
+
+  try {
+    await agent.client.waitForFinish(agent.agentId, 30_000);
+    await page.setViewportSize(ULTRAWIDE_VIEWPORT);
+    const assistantMessage = page.getByTestId("assistant-message").first();
+    const markdownPreview = page.getByTestId("markdown-preview-frame").first();
+
+    await test.step("chat starts at the default width", async () => {
+      await openAgentRoute(page, agent);
+      await expectContentColumnWidth(assistantMessage, { max: 820 });
+    });
+
+    await test.step("settings show the default without a reset", async () => {
+      await openAppearanceSettings(page);
+      await expectDefaultContentWidthSetting(page, 820);
+    });
+
+    await test.step("a custom width is saved and offers a reset", async () => {
+      await setContentWidth(page, 1600);
+      await expectCustomContentWidthSetting(page, 1600);
+      await page.screenshot({ path: testInfo.outputPath("settings-custom-width.png") });
+    });
+
+    await test.step("chat and Markdown files use the custom width", async () => {
+      await openAgentRoute(page, agent);
+      await expectContentColumnWidth(assistantMessage, { min: 1200, max: 1600 });
+      await page.screenshot({ path: testInfo.outputPath("chat-custom-width.png") });
+
+      await openFileExplorer(page);
+      await openFileFromExplorer(page, "README.md");
+      await expectContentColumnWidth(markdownPreview, { min: 1200, max: 1600 });
+      await page.screenshot({ path: testInfo.outputPath("markdown-custom-width.png") });
+    });
+
+    await test.step("reset returns to the default without storing it", async () => {
+      await openAppearanceSettings(page);
+      await resetContentWidth(page);
+      await expectDefaultContentWidthSetting(page, 820);
+
+      await openAgentRoute(page, agent);
+      await expectContentColumnWidth(assistantMessage, { max: 820 });
+      await page.screenshot({ path: testInfo.outputPath("chat-default-width.png") });
+    });
+  } finally {
+    await agent.cleanup();
+  }
+});

packages/app/e2e/browser/context-window-meter.spec.ts

@@ -0,0 +1,71 @@
+import type { Locator } from "@playwright/test";
+import { expect, test } from "../support/fixtures";
+import { expectComposerVisible } from "../support/helpers/composer";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+
+// Where the progress arc is painted, as its centroid relative to the ring's centre in pixels.
+// Reads the rendered pixels, so any rotation that does not reach the screen counts as none.
+async function progressArcCentroid(meter: Locator): Promise<{ x: number; y: number }> {
+  const ring = meter.locator("svg");
+  const progressColor = await ring
+    .locator("circle")
+    .last()
+    .evaluate((circle) => getComputedStyle(circle).stroke);
+  const screenshot = await ring.screenshot();
+  return ring.evaluate(
+    async (_svg, { png, color }) => {
+      const image = await createImageBitmap(
+        await (await fetch(`data:image/png;base64,${png}`)).blob(),
+      );
+      const canvas = new OffscreenCanvas(image.width, image.height);
+      const context = canvas.getContext("2d")!;
+      context.drawImage(image, 0, 0);
+      const { data } = context.getImageData(0, 0, image.width, image.height);
+      const [r, g, b] = color.match(/\d+/g)!.map(Number);
+      let sumX = 0;
+      let sumY = 0;
+      let count = 0;
+      for (let y = 0; y < image.height; y += 1) {
+        for (let x = 0; x < image.width; x += 1) {
+          const i = (y * image.width + x) * 4;
+          const distance =
+            Math.abs(data[i] - r) + Math.abs(data[i + 1] - g) + Math.abs(data[i + 2] - b);
+          if (distance < 40) {
+            sumX += x;
+            sumY += y;
+            count += 1;
+          }
+        }
+      }
+      if (count === 0) {
+        throw new Error(`No pixels painted in the progress colour ${color}`);
+      }
+      return { x: sumX / count - image.width / 2, y: sumY / count - image.height / 2 };
+    },
+    { png: screenshot.toString("base64"), color: progressColor },
+  );
+}
+
+test.describe("context window meter", () => {
+  test("draws usage clockwise from twelve o'clock", async ({ page }) => {
+    test.setTimeout(180_000);
+    // 32,000 of the mock's 128,000-token window: a quarter, from twelve to three o'clock.
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "context-window-meter-",
+      title: "Context window meter e2e",
+      initialPrompt: "emit 32000 byte file agent stream payload",
+    });
+    try {
+      await openAgentRoute(page, session);
+      await expectComposerVisible(page);
+      const meter = page.getByTestId("context-window-meter");
+      await expect(meter).toHaveAccessibleName(/25%/, { timeout: 30_000 });
+
+      const centroid = await progressArcCentroid(meter);
+      expect(centroid.x).toBeGreaterThan(1);
+      expect(centroid.y).toBeLessThan(-1);
+    } finally {
+      await session.cleanup();
+    }
+  });
+});

packages/app/e2e/browser/host-confirmation.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from "../support/fixtures";
+import { openSettings } from "../support/helpers/app";
+import { expectAppRoute } from "../support/helpers/route-assertions";
+import {
+  buildPairingLink,
+  cancelHostConfirmation,
+  connectToConfirmedHost,
+  expectHostConfirmationFor,
+  expectHostInHostPicker,
+  hostConfirmation,
+  openPairingLink,
+  saveLinkedHostBeforeLoad,
+  type LinkedHost,
+} from "../support/helpers/host-confirmation";
+
+// An unreachable relay: the link saves the host without connecting first.
+const linkedHost: LinkedHost = {
+  serverId: "srv_link_confirmation",
+  relayEndpoint: "127.0.0.1:59998",
+  daemonPublicKeyB64: "bGlua0NvbmZpcm1hdGlvbktleQ",
+};
+
+test("a pairing link for a new host asks before saving it", async ({ page }) => {
+  const link = buildPairingLink(linkedHost);
+
+  await test.step("Cancel saves nothing and stays on the page", async () => {
+    await openPairingLink(page, link);
+    await expectHostConfirmationFor(page, linkedHost);
+    await cancelHostConfirmation(page);
+    await expectAppRoute(page, "/settings/general");
+    await expectHostInHostPicker(page, linkedHost.serverId, "not listed");
+  });
+
+  await test.step("Connect saves the host and opens a project", async () => {
+    await openPairingLink(page, link);
+    await expectHostConfirmationFor(page, linkedHost);
+    await connectToConfirmedHost(page);
+    await expectAppRoute(page, "/open-project");
+    await openSettings(page);
+    await expectHostInHostPicker(page, linkedHost.serverId, "listed");
+  });
+});
+
+test("a pairing link for a saved host connects without asking", async ({ page }) => {
+  await saveLinkedHostBeforeLoad(page, linkedHost);
+
+  await openPairingLink(page, buildPairingLink(linkedHost));
+
+  await expectAppRoute(page, "/open-project", { timeout: 30_000 });
+  await expect(hostConfirmation(page)).toHaveCount(0);
+});

packages/app/e2e/browser/host-version-after-daemon-restart.spec.ts

@@ -0,0 +1,111 @@
+import type { Page } from "@playwright/test";
+import { expect, test } from "../support/fixtures";
+import { gotoAppShell, openSettings } from "../support/helpers/app";
+import { addConnectedHostAndReload } from "../support/helpers/hosts";
+import { openHostSection, selectSettingsHost } from "../support/helpers/settings";
+import { getServerId } from "../support/helpers/server-id";
+import {
+  startRestartableHostDaemon,
+  type RestartableHostDaemon,
+} from "../support/helpers/versioned-host-daemon";
+
+const PREVIOUS_VERSION = "0.8.0";
+const UPDATED_VERSION = "0.9.1";
+const HOST_LABEL = "Version restart QA";
+const NO_RELOAD_MARKER = "before-restart";
+
+interface ReloadMarkerWindow {
+  __paseoE2eHostVersionMarker?: string;
+}
+
+test.describe.configure({ timeout: 120_000 });
+
+let hostDaemon: RestartableHostDaemon | null = null;
+
+test.afterEach(async () => {
+  await hostDaemon?.dispose();
+  hostDaemon = null;
+});
+
+test("host page shows the restarted daemon's version without reloading", async ({ page }) => {
+  const host = await startRestartableHostDaemon(PREVIOUS_VERSION);
+  hostDaemon = host;
+  const otherHostVersion =
+    await test.step("the connected host reports its current daemon version", async () => {
+      await gotoAppShell(page);
+      await addConnectedHostAndReload(page, {
+        serverId: host.serverId,
+        label: HOST_LABEL,
+        port: host.port,
+      });
+      const version = await readHelpHostVersion(page, getServerId());
+      await expectHelpHostVersion(page, host.serverId, PREVIOUS_VERSION);
+      await openHostPage(page, host);
+      await expect(hostIdentity(page)).toContainText("Online");
+      await expect(hostVersionBadge(page, PREVIOUS_VERSION)).toBeVisible();
+      await markPageForNoReloadCheck(page, NO_RELOAD_MARKER);
+      return version;
+    });
+
+  await test.step("the last known version remains on the host page when the host stops", async () => {
+    await host.stop();
+    await expect(hostIdentity(page)).toContainText("Error");
+    await expect(hostVersionBadge(page, PREVIOUS_VERSION)).toBeVisible();
+  });
+
+  await test.step("the host daemon restarts on the new version", async () => {
+    await host.restartWithVersion(UPDATED_VERSION);
+  });
+
+  await test.step("the host page badge follows the new version", async () => {
+    await expect(hostVersionBadge(page, UPDATED_VERSION)).toBeVisible({ timeout: 30_000 });
+    await expect(hostVersionBadge(page, PREVIOUS_VERSION)).toHaveCount(0);
+    await page.getByRole("button", { name: "Back" }).click();
+    await expectHelpHostVersion(page, host.serverId, UPDATED_VERSION);
+    expect(await readHelpHostVersion(page, getServerId())).toBe(otherHostVersion);
+    await expectNoReloadSinceMarker(page);
+  });
+});
+
+async function readHelpHostVersion(page: Page, serverId: string): Promise<string> {
+  await page.getByTestId("sidebar-help").click();
+  const row = page.getByTestId(`sidebar-help-host-version-${serverId}`);
+  await expect(row).toBeVisible();
+  const text = await row.innerText();
+  await page.keyboard.press("Escape");
+  return text;
+}
+
+async function expectHelpHostVersion(page: Page, serverId: string, version: string): Promise<void> {
+  const text = await readHelpHostVersion(page, serverId);
+  expect(text).toContain(`v${version}`);
+}
+
+async function openHostPage(page: Page, host: RestartableHostDaemon): Promise<void> {
+  await openSettings(page);
+  await selectSettingsHost(page, host.serverId);
+  await openHostSection(page, host.serverId, "host");
+}
+
+function hostIdentity(page: Page) {
+  return page.getByTestId("host-page-identity");
+}
+
+function hostVersionBadge(page: Page, version: string) {
+  return hostIdentity(page).getByText(`v${version}`, { exact: true });
+}
+
+async function markPageForNoReloadCheck(page: Page, marker: string): Promise<void> {
+  // The marker has to cross into the page as an argument: the callback runs in the browser, so a
+  // captured Node-side constant is not defined there.
+  await page.evaluate((value) => {
+    (window as typeof window & ReloadMarkerWindow).__paseoE2eHostVersionMarker = value;
+  }, marker);
+}
+
+async function expectNoReloadSinceMarker(page: Page): Promise<void> {
+  const marker = await page.evaluate(
+    () => (window as typeof window & ReloadMarkerWindow).__paseoE2eHostVersionMarker ?? null,
+  );
+  expect(marker).toBe(NO_RELOAD_MARKER);
+}

packages/app/e2e/browser/import-session-flow.spec.ts

@@ -4,7 +4,7 @@ import { copyFile, mkdir, rm, utimes, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import path from "node:path";
 import type { TestInfo } from "@playwright/test";
-import { test, type Page } from "../support/fixtures";
+import { expect, test, type Page } from "../support/fixtures";
 import { ImportSessionFlow } from "../support/helpers/import-session";
 import {
   connectNewWorkspaceDaemonClient,
@@ -49,6 +49,7 @@ interface ImportFlowScenario {
   worktreeDirectory: string;
   unrelatedDirectory: string;
   importSessionId: string;
+  importSessionTimestamp: number;
   repoCleanup(): Promise<void>;
   unrelatedCleanup(): Promise<void>;
 }
@@ -94,7 +95,7 @@ test.beforeAll(async () => {
   };
   const reuseTarget = await openProjectViaDaemon(client, unrelated.path);
   const importSessionId = "fixture-custom-title";
-  await seedClaudeSessions({
+  const importSessionTimestamp = await seedClaudeSessions({
     projectRoot: repo.path,
     worktreeDirectory,
     unrelatedDirectory: unrelated.path,
@@ -108,6 +109,7 @@ test.beforeAll(async () => {
     worktreeDirectory,
     unrelatedDirectory: unrelated.path,
     importSessionId,
+    importSessionTimestamp,
     repoCleanup: repo.cleanup,
     unrelatedCleanup: unrelated.cleanup,
   };
@@ -122,6 +124,19 @@ test.afterAll(async () => {
   await rm(claudeConfigDirectory, { recursive: true, force: true });
 });
 
+test("an open Import Session row keeps its age current", async ({ page }) => {
+  await page.clock.install({ time: scenario.importSessionTimestamp + 60_000 });
+  const flow = new ImportSessionFlow(page);
+  await flow.openWorkspace(scenario.project.workspaceId, { width: 390, height: 844 });
+  await flow.revealMobileEntryPoint();
+  await flow.openGlobally();
+
+  const row = page.getByTestId(`import-session-session-claude-${scenario.importSessionId}`);
+  await expect(row).toContainText("1m ago");
+  await page.clock.fastForward("03:00");
+  await expect(row).toContainText("4m ago");
+});
+
 test("captures the compact import-session journey", async ({ page }, testInfo) => {
   const flow = new ImportSessionFlow(page);
   await flow.openWorkspace(scenario.project.workspaceId, { width: 390, height: 844 });
@@ -225,7 +240,7 @@ async function seedClaudeSessions(input: {
   worktreeDirectory: string;
   unrelatedDirectory: string;
   importSessionId: string;
-}): Promise<void> {
+}): Promise<number> {
   const sessions = [
     {
       cwd: input.projectRoot,
@@ -290,4 +305,5 @@ async function seedClaudeSessions(input: {
     const timestamp = new Date(newest - index * 60_000);
     await utimes(sessionPath, timestamp, timestamp);
   }
+  return newest;
 }

packages/app/e2e/browser/plugin-settings.spec.ts

@@ -14,6 +14,7 @@ import {
   expectConflictPreservesDraft,
   discardTitle,
   returnAndReopenSettings,
+  returnToPluginsPage,
   expectSettingsUnavailable,
 } from "../support/helpers/plugin-settings";
 
@@ -43,6 +44,11 @@ test("another client's save preserves a conflicting draft", async ({ page }) =>
   await discardTitle(page);
 });
 
+test("Back to plugins returns from a plugin settings screen", async ({ page }) => {
+  await openDisplaySettings(page);
+  await returnToPluginsPage(page);
+});
+
 test.describe("compact plugin settings", () => {
   test.use({ viewport: { width: 390, height: 844 } });
 

packages/app/e2e/browser/provider-settings-refresh.spec.ts

@@ -119,6 +119,25 @@ async function exerciseProviderSettingsStack(page: Page) {
 }
 
 test.describe("provider settings overlay stack", () => {
+  test("provider model update age says just now", async ({ page }) => {
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "provider-relative-time-",
+      title: "Provider relative time",
+    });
+    try {
+      await page.clock.install({ time: Date.now() });
+      await page.setViewportSize(MOBILE_VIEWPORT);
+      await openAgentRoute(page, session);
+      await expectComposerVisible(page);
+      await openProviderSettingsFromModelSelector(page);
+      await expect(page.getByText("Updated just now", { exact: true })).toBeVisible({
+        timeout: 30_000,
+      });
+    } finally {
+      await session.cleanup();
+    }
+  });
+
   test("provider settings covers the desktop model selector without closing it", async ({
     page,
   }) => {

packages/app/e2e/browser/provider-usage-settings.spec.ts

@@ -1,152 +0,0 @@
-import { expect, test } from "../support/fixtures";
-import { gotoAppShell, openSettings } from "../support/helpers/app";
-import { installProviderUsageFixture } from "../support/helpers/provider-usage";
-import { getServerId } from "../support/helpers/server-id";
-import { openSettingsHostSection } from "../support/helpers/settings";
-
-test.describe("provider usage settings", () => {
-  test("renders every provider returned by the daemon usage RPC", async ({ page }) => {
-    test.setTimeout(120_000);
-    const serverId = getServerId();
-    const usageFixture = await installProviderUsageFixture(page, [
-      {
-        fetchedAt: "2026-06-19T00:00:00.000Z",
-        providers: [
-          {
-            providerId: "claude",
-            displayName: "Claude",
-            status: "available",
-            planLabel: "Max 20x",
-            windows: [{ id: "session", label: "Session", usedPct: 7 }],
-          },
-          {
-            providerId: "codex",
-            displayName: "Codex",
-            status: "available",
-            planLabel: "Pro 20x",
-            windows: [{ id: "weekly", label: "Weekly", usedPct: 29 }],
-          },
-          {
-            providerId: "glm",
-            displayName: "GLM coding plan",
-            status: "available",
-            planLabel: "GLM coding plan",
-            sourceLabel: "OpenUsage 0.6.27",
-            windows: [
-              { id: "biweekly", label: "Biweekly", usedPct: 23 },
-              { id: "daily", label: "Daily", remainingPct: 30 },
-            ],
-            balances: [
-              { id: "credits", label: "Credits", remaining: 1234, unit: "credits" },
-              { id: "extra", label: "Extra usage", used: 5, limit: 20, unit: "usd" },
-            ],
-            details: [{ id: "valid", label: "Valid until", value: "2026-12-31" }],
-          },
-        ],
-      },
-    ]);
-
-    await gotoAppShell(page);
-    await openSettings(page);
-    expect(usageFixture.requestCount()).toBe(0);
-    await openSettingsHostSection(page, serverId, "usage");
-    await usageFixture.waitForRequestCount(1);
-
-    const card = page.getByTestId("provider-usage-card");
-    await expect(card).toBeVisible({ timeout: 10_000 });
-    await expect(card.getByText("Claude", { exact: true })).toBeVisible();
-    await expect(card.getByText("Codex", { exact: true })).toBeVisible();
-    await expect(card.getByText("GLM coding plan", { exact: true }).first()).toBeVisible();
-    await expect(card.getByText("Biweekly", { exact: true })).toBeVisible();
-    await expect(card.getByText("Daily", { exact: true })).toBeVisible();
-    await expect(card.getByText("70%")).toBeVisible();
-    await expect(card.getByText("Credits", { exact: true })).toBeVisible();
-    await expect(card.getByText("1,234 left", { exact: true })).toBeVisible();
-    await expect(card.getByText("Extra usage", { exact: true })).toBeVisible();
-    await expect(card.getByText("$5.00 / $20.00", { exact: true })).toBeVisible();
-    await expect(card.getByText("Valid until", { exact: true })).toBeVisible();
-    await expect(card.getByText("2026-12-31", { exact: true })).toBeVisible();
-    await expect(card.getByText(/OpenUsage 0\.6\.27/)).toBeVisible();
-  });
-
-  test("refresh invalidates and refetches usage", async ({ page }) => {
-    test.setTimeout(120_000);
-    const serverId = getServerId();
-    const usageFixture = await installProviderUsageFixture(page, [
-      {
-        fetchedAt: "2026-06-19T00:00:00.000Z",
-        providers: [
-          {
-            providerId: "glm",
-            displayName: "GLM coding plan",
-            status: "available",
-            planLabel: "GLM coding plan",
-            windows: [{ id: "biweekly", label: "Biweekly", usedPct: 23 }],
-          },
-        ],
-      },
-      {
-        fetchedAt: "2026-06-19T00:01:00.000Z",
-        providers: [
-          {
-            providerId: "glm",
-            displayName: "GLM coding plan",
-            status: "available",
-            planLabel: "GLM coding plan",
-            windows: [{ id: "biweekly", label: "Biweekly", usedPct: 64 }],
-          },
-        ],
-      },
-    ]);
-
-    await gotoAppShell(page);
-    await openSettings(page);
-    await openSettingsHostSection(page, serverId, "usage");
-    await usageFixture.waitForRequestCount(1);
-    await expect(page.getByText("23%")).toBeVisible({ timeout: 10_000 });
-
-    await page.getByRole("button", { name: "Refresh", exact: true }).click();
-    await usageFixture.waitForRequestCount(2);
-
-    expect(usageFixture.requestCount()).toBe(2);
-    await expect(page.getByText("64%")).toBeVisible();
-  });
-
-  test("one provider error does not collapse the usage list", async ({ page }) => {
-    test.setTimeout(120_000);
-    const serverId = getServerId();
-    await installProviderUsageFixture(page, [
-      {
-        fetchedAt: "2026-06-19T00:00:00.000Z",
-        providers: [
-          {
-            providerId: "claude",
-            displayName: "Claude",
-            status: "error",
-            planLabel: null,
-            windows: [],
-            error: "Claude auth expired",
-          },
-          {
-            providerId: "codex",
-            displayName: "Codex",
-            status: "available",
-            planLabel: "Pro 20x",
-            windows: [{ id: "weekly", label: "Weekly", usedPct: 71 }],
-          },
-        ],
-      },
-    ]);
-
-    await gotoAppShell(page);
-    await openSettings(page);
-    await openSettingsHostSection(page, serverId, "usage");
-
-    const card = page.getByTestId("provider-usage-card");
-    await expect(card).toBeVisible({ timeout: 10_000 });
-    await expect(card.getByText("Error", { exact: true })).toBeVisible();
-    await expect(card.getByText("Claude auth expired", { exact: true })).toBeVisible();
-    await expect(card.getByText("Codex", { exact: true })).toBeVisible();
-    await expect(card.getByText("71%")).toBeVisible();
-  });
-});

packages/app/e2e/browser/provider-usage-tooltip.spec.ts

@@ -1,113 +0,0 @@
-import { expect, test, type Page } from "../support/fixtures";
-import { expectComposerVisible } from "../support/helpers/composer";
-import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
-import { installProviderUsageFixture } from "../support/helpers/provider-usage";
-
-const MOBILE_VIEWPORT = { width: 390, height: 844 };
-
-async function openMockAgent(page: Page) {
-  await page.setViewportSize(MOBILE_VIEWPORT);
-  const session = await seedMockAgentWorkspace({
-    repoPrefix: "provider-usage-tooltip-",
-    title: "Provider usage tooltip e2e",
-    initialPrompt: "emit 1 coalesced agent stream update for provider usage tooltip.",
-  });
-  await openAgentRoute(page, session);
-  await expectComposerVisible(page);
-  await expect(page.getByTestId("context-window-meter")).toBeVisible({ timeout: 30_000 });
-  return session;
-}
-
-test.describe("provider usage tooltip", () => {
-  test("fetches usage when the context tooltip opens and renders the active provider", async ({
-    page,
-  }) => {
-    test.setTimeout(180_000);
-    const usageFixture = await installProviderUsageFixture(page, [
-      {
-        fetchedAt: "2026-06-19T00:00:00.000Z",
-        providers: [
-          {
-            providerId: "mock",
-            displayName: "Mock provider",
-            status: "available",
-            planLabel: "Test plan",
-            windows: [
-              {
-                id: "session",
-                label: "Session",
-                usedPct: 42,
-                remainingPct: 58,
-                resetsAt: "2026-06-19T05:00:00.000Z",
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-    const session = await openMockAgent(page);
-    try {
-      expect(usageFixture.requestCount()).toBe(0);
-
-      await page.getByTestId("context-window-meter").hover();
-      await usageFixture.waitForRequestCount(1);
-
-      await expect(page.getByText("Mock provider", { exact: true })).toBeVisible({
-        timeout: 10_000,
-      });
-      await expect(page.getByText("Test plan")).toBeVisible();
-      await expect(page.getByText("Session", { exact: true })).toBeVisible();
-      await expect(page.getByText("42%")).toBeVisible();
-    } finally {
-      await session.cleanup();
-    }
-  });
-
-  test("refreshes usage again each time the tooltip is shown", async ({ page }) => {
-    test.setTimeout(180_000);
-    const usageFixture = await installProviderUsageFixture(page, [
-      {
-        fetchedAt: "2026-06-19T00:00:00.000Z",
-        providers: [
-          {
-            providerId: "mock",
-            displayName: "Mock provider",
-            status: "available",
-            planLabel: "Test plan",
-            windows: [{ id: "session", label: "Session", usedPct: 41 }],
-          },
-        ],
-      },
-      {
-        fetchedAt: "2026-06-19T00:01:00.000Z",
-        providers: [
-          {
-            providerId: "mock",
-            displayName: "Mock provider",
-            status: "available",
-            planLabel: "Test plan",
-            windows: [{ id: "session", label: "Session", usedPct: 64 }],
-          },
-        ],
-      },
-    ]);
-    const session = await openMockAgent(page);
-    try {
-      const meter = page.getByTestId("context-window-meter");
-
-      await meter.hover();
-      await usageFixture.waitForRequestCount(1);
-      await expect(page.getByText("41%")).toBeVisible({ timeout: 10_000 });
-
-      await page.mouse.move(0, 0);
-      await expect(page.getByText("Mock provider", { exact: true })).toHaveCount(0);
-
-      await meter.hover();
-      await usageFixture.waitForRequestCount(2);
-      expect(usageFixture.requestCount()).toBe(2);
-      await expect(page.getByText("64%")).toBeVisible();
-    } finally {
-      await session.cleanup();
-    }
-  });
-});

packages/app/e2e/browser/schedules-relative-time.spec.ts

@@ -0,0 +1,118 @@
+import { expect, test, type Page } from "../support/fixtures";
+import { seedWorkspace, type SeededWorkspace } from "../support/helpers/seed-client";
+import { buildSchedulesRoute } from "../../src/utils/host-routes";
+
+interface ScheduleSeedClient {
+  scheduleCreate(input: {
+    prompt: string;
+    name?: string;
+    cadence: { type: "cron"; expression: string };
+    target: {
+      type: "new-agent";
+      config: {
+        provider: "mock";
+        cwd: string;
+        model: string;
+        modeId: string;
+        title: string;
+      };
+    };
+    runOnCreate: boolean;
+  }): Promise<{ schedule: { id: string; createdAt: string } | null; error: string | null }>;
+  schedulePause(input: { id: string }): Promise<{ error: string | null }>;
+  scheduleDelete(input: { id: string }): Promise<{ error: string | null }>;
+}
+
+interface SeededSchedule {
+  id: string;
+  createdAt: number;
+}
+
+async function seedPausedSchedule(
+  workspace: SeededWorkspace,
+  name: string,
+): Promise<SeededSchedule> {
+  const client = workspace.client as unknown as ScheduleSeedClient;
+  const result = await client.scheduleCreate({
+    prompt: "Say hello from the scheduled agent.",
+    name,
+    cadence: { type: "cron", expression: "0 9 * * *" },
+    target: {
+      type: "new-agent",
+      config: {
+        provider: "mock",
+        cwd: workspace.repoPath,
+        model: "ten-second-stream",
+        modeId: "load-test",
+        title: name,
+      },
+    },
+    runOnCreate: false,
+  });
+  if (!result.schedule) {
+    throw new Error(result.error ?? "Failed to seed schedule");
+  }
+  const { id, createdAt } = result.schedule;
+  const paused = await client.schedulePause({ id });
+  if (paused.error) {
+    throw new Error(paused.error);
+  }
+  return { id, createdAt: Date.parse(createdAt) };
+}
+
+async function deleteSeededSchedule(workspace: SeededWorkspace, id: string): Promise<void> {
+  const client = workspace.client as unknown as ScheduleSeedClient;
+  const result = await client.scheduleDelete({ id });
+  if (result.error) {
+    throw new Error(result.error);
+  }
+}
+
+/** Opens Schedules with the browser clock frozen at `time`, so the page cannot age it. */
+async function openSchedulesAt(page: Page, time: number): Promise<void> {
+  await page.clock.install({ time });
+  await page.goto(buildSchedulesRoute());
+}
+
+async function letTimePass(page: Page, duration: string): Promise<void> {
+  await page.clock.fastForward(duration);
+}
+
+async function expectScheduleRowText(page: Page, scheduleId: string, text: string): Promise<void> {
+  await expect(page.getByTestId(`schedule-row-${scheduleId}`)).toContainText(text, {
+    timeout: 30_000,
+  });
+}
+
+test.describe("Schedule relative timestamps", () => {
+  const cleanupTasks: Array<() => Promise<void>> = [];
+
+  test.afterEach(async () => {
+    const failures: unknown[] = [];
+    for (const cleanup of cleanupTasks.toReversed()) {
+      try {
+        await cleanup();
+      } catch (error) {
+        failures.push(error);
+      }
+    }
+    cleanupTasks.length = 0;
+    if (failures.length > 0) {
+      throw new AggregateError(failures, "Test cleanup failed");
+    }
+  });
+
+  test("an idle schedule row keeps its created age current", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "schedule-relative-time-", git: false });
+    cleanupTasks.push(() => workspace.cleanup());
+    const schedule = await seedPausedSchedule(workspace, `Relative time ${Date.now()}`);
+    cleanupTasks.push(() => deleteSeededSchedule(workspace, schedule.id));
+
+    await openSchedulesAt(page, schedule.createdAt);
+    await expectScheduleRowText(page, schedule.id, "Created just now");
+
+    await letTimePass(page, "03:00");
+
+    await expectScheduleRowText(page, schedule.id, "Created 3m ago");
+  });
+});

packages/app/e2e/browser/usage-composer-pill.spec.ts

@@ -0,0 +1,219 @@
+import type { UsageReportEntry } from "@getpaseo/protocol/messages";
+import { expect, test, type Page } from "../support/fixtures";
+import { expectComposerVisible, submitMessage } from "../support/helpers/composer";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+import { installUsageReportsFixture } from "../support/helpers/usage-reports";
+
+const REPORT_ID = "fixture:fixture-account";
+
+// Two hours reads "2h ago" for an hour, so the assertion cannot race the clock.
+function twoHoursAgo(): string {
+  return new Date(Date.now() - 2 * 60 * 60_000).toISOString();
+}
+
+function agentEntry(usedPct: number, fetchedAt = "2026-01-01T00:00:00.000Z"): UsageReportEntry {
+  return {
+    id: REPORT_ID,
+    account: { label: "Fixture account" },
+    fetchedAt,
+    sourceId: "fixture",
+    sourceLabel: "Fixture plan",
+    icon: '<svg viewBox="0 0 24 24"><rect width="24" height="24" fill="currentColor"/></svg>',
+    report: {
+      status: "available",
+      planLabel: "Test plan",
+      windows: [
+        { id: "session", label: "Session", usedPct: 3 },
+        { id: "weekly", label: "Weekly", usedPct, headline: true },
+      ],
+    },
+  };
+}
+
+async function openMockAgent(page: Page) {
+  const session = await seedMockAgentWorkspace({
+    repoPrefix: "usage-composer-pill-",
+    title: "Usage composer pill e2e",
+    initialPrompt: "emit 1 coalesced agent stream update for usage composer pill.",
+  });
+  await openAgentRoute(page, session);
+  await expectComposerVisible(page);
+  return session;
+}
+
+test.describe("usage composer pill", () => {
+  test("opens the cached report without a request and shows when it was fetched", async ({
+    page,
+  }) => {
+    test.setTimeout(180_000);
+    const usage = await installUsageReportsFixture(page, {
+      agentReportIds: [REPORT_ID],
+      lists: [[agentEntry(42, twoHoursAgo())]],
+    });
+    const session = await openMockAgent(page);
+    try {
+      const pill = page.getByTestId("usage-composer-pill");
+      await expect(pill).toContainText("42%", { timeout: 30_000 });
+      expect(usage.agentRequests()[0]).toEqual({ agentId: session.agentId });
+      expect(usage.listRequests()).toEqual([{ forceRefresh: false, reportIds: [REPORT_ID] }]);
+
+      await pill.click();
+      const popover = page.getByTestId("usage-composer-popover");
+      await expect(popover.getByText("Fixture plan", { exact: true })).toBeVisible();
+      await expect(popover.getByText("Test plan")).toBeVisible();
+      await expect(popover.getByText("42%")).toBeVisible();
+
+      await popover.getByTestId("usage-refresh").hover();
+      await expect(page.getByTestId("usage-freshness-tooltip")).toHaveText("Updated 2h ago");
+      await expect(popover.getByTestId("usage-freshness")).toHaveCount(0);
+      expect(usage.listRequests()).toHaveLength(1);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("refreshes only its report from the popover", async ({ page }) => {
+    test.setTimeout(180_000);
+    const usage = await installUsageReportsFixture(page, {
+      agentReportIds: [REPORT_ID],
+      lists: [[agentEntry(42, twoHoursAgo())], () => [agentEntry(64, new Date().toISOString())]],
+    });
+    const session = await openMockAgent(page);
+    try {
+      const pill = page.getByTestId("usage-composer-pill");
+      await expect(pill).toContainText("42%", { timeout: 30_000 });
+      await pill.click();
+      const popover = page.getByTestId("usage-composer-popover");
+      await expect(popover.getByText("42%")).toBeVisible();
+
+      await popover.getByTestId("usage-refresh").click();
+      await usage.waitForListRequests(2);
+      expect(usage.listRequests()).toEqual([
+        { forceRefresh: false, reportIds: [REPORT_ID] },
+        { forceRefresh: true, reportIds: [REPORT_ID] },
+      ]);
+      await expect(popover.getByText("64%")).toBeVisible();
+      await expect(pill).toContainText("64%");
+      await expect(popover.getByTestId("usage-refresh")).toBeEnabled();
+
+      // Pressing closes the tooltip; it reopens on the next hover.
+      await popover.getByText("Fixture plan", { exact: true }).hover();
+      await popover.getByTestId("usage-refresh").hover();
+      await expect(page.getByTestId("usage-freshness-tooltip")).toHaveText("Updated just now");
+      expect(usage.listRequests()).toHaveLength(2);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("keeps the previous report and says so when a refresh fails", async ({ page }) => {
+    test.setTimeout(180_000);
+    const usage = await installUsageReportsFixture(page, {
+      agentReportIds: [REPORT_ID],
+      lists: [
+        [agentEntry(42, twoHoursAgo())],
+        { error: "Usage source timed out" },
+        () => [agentEntry(64, new Date().toISOString())],
+      ],
+    });
+    const session = await openMockAgent(page);
+    try {
+      const pill = page.getByTestId("usage-composer-pill");
+      await expect(pill).toContainText("42%", { timeout: 30_000 });
+      await pill.click();
+      const popover = page.getByTestId("usage-composer-popover");
+      const refresh = popover.getByTestId("usage-refresh");
+
+      await refresh.click();
+      await usage.waitForListRequests(2);
+      await expect(popover.getByTestId("usage-refresh-error")).toHaveText(
+        "Unable to refresh usage",
+      );
+      await expect(popover.getByText("42%")).toBeVisible();
+      await expect(pill).toContainText("42%");
+
+      await refresh.click();
+      await usage.waitForListRequests(3);
+      await expect(popover.getByText("64%")).toBeVisible();
+      await expect(popover.getByTestId("usage-refresh-error")).toHaveCount(0);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("prints the freshness on the card where there is no hover", async ({ page }) => {
+    test.setTimeout(180_000);
+    await page.setViewportSize({ width: 390, height: 844 });
+    const usage = await installUsageReportsFixture(page, {
+      agentReportIds: [REPORT_ID],
+      lists: [[agentEntry(42, twoHoursAgo())]],
+    });
+    const session = await openMockAgent(page);
+    try {
+      const pill = page.getByTestId("usage-composer-pill");
+      await expect(pill).toContainText("42%", { timeout: 30_000 });
+      await pill.click();
+      const popover = page.getByTestId("usage-composer-popover");
+      await expect(popover.getByTestId("usage-freshness")).toHaveText("Updated 2h ago");
+      expect(usage.listRequests()).toHaveLength(1);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("re-resolves the report ID after a turn and reuses the cached report", async ({ page }) => {
+    test.setTimeout(180_000);
+    const usage = await installUsageReportsFixture(page, {
+      agentReportIds: [REPORT_ID],
+      lists: [[agentEntry(42)]],
+    });
+    const session = await openMockAgent(page);
+    try {
+      const pill = page.getByTestId("usage-composer-pill");
+      await expect(pill).toContainText("42%", { timeout: 30_000 });
+      const requestsBeforeTurn = usage.agentRequests().length;
+      const listRequestsBeforeTurn = usage.listRequests().length;
+
+      await submitMessage(page, "emit 1 coalesced agent stream update for usage composer pill.");
+
+      await usage.waitForAgentRequests(requestsBeforeTurn + 1);
+      expect(usage.agentRequests().at(-1)).toEqual({
+        agentId: session.agentId,
+      });
+      await expect(pill).toContainText("42%");
+      expect(usage.listRequests()).toHaveLength(listRequestsBeforeTurn);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("is hidden when the agent has no usage report", async ({ page }) => {
+    test.setTimeout(180_000);
+    const usage = await installUsageReportsFixture(page, { agentReportIds: [null] });
+    const session = await openMockAgent(page);
+    try {
+      await usage.waitForAgentRequests(1);
+      await expect(page.getByTestId("usage-composer-pill")).toHaveCount(0);
+      expect(usage.listRequests()).toHaveLength(0);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("is hidden on a host without usage sources", async ({ page }) => {
+    test.setTimeout(180_000);
+    const usage = await installUsageReportsFixture(page, {
+      usageSources: false,
+      agentReportIds: [REPORT_ID],
+      lists: [[agentEntry(42)]],
+    });
+    const session = await openMockAgent(page);
+    try {
+      await expect(page.getByTestId("context-window-meter")).toBeVisible({ timeout: 30_000 });
+      await expect(page.getByTestId("usage-composer-pill")).toHaveCount(0);
+      expect(usage.agentRequests()).toHaveLength(0);
+    } finally {
+      await session.cleanup();
+    }
+  });
+});

packages/app/e2e/browser/usage-screen.spec.ts

@@ -0,0 +1,156 @@
+import type { UsageReportEntry } from "@getpaseo/protocol/messages";
+import { expect, test } from "../support/fixtures";
+import { gotoAppShell } from "../support/helpers/app";
+import { getServerId } from "../support/helpers/server-id";
+import { installUsageReportsFixture } from "../support/helpers/usage-reports";
+
+// Two hours reads "2h ago" for an hour, so the assertion cannot race the clock.
+function twoHoursAgo(): string {
+  return new Date(Date.now() - 2 * 60 * 60_000).toISOString();
+}
+
+test.describe("usage screen", () => {
+  test("opens from the sidebar and groups reports under their host", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const usage = await installUsageReportsFixture(page, {
+      lists: [
+        [
+          {
+            id: "alpha:a",
+            account: {},
+            fetchedAt: twoHoursAgo(),
+            sourceId: "alpha",
+            sourceLabel: "Alpha plan",
+            report: {
+              status: "available",
+              windows: [{ id: "weekly", label: "Weekly", usedPct: 31, headline: true }],
+            },
+          },
+          {
+            id: "beta:b",
+            account: {},
+            fetchedAt: "2026-01-01T00:00:00.000Z",
+            sourceId: "beta",
+            sourceLabel: "Beta plan",
+            report: { status: "unavailable", windows: [] },
+          },
+        ],
+      ],
+    });
+
+    await gotoAppShell(page);
+    await page.locator('[data-testid="sidebar-usage"]:visible').first().click();
+    await expect(page).toHaveURL(/\/usage$/);
+    await usage.waitForListRequests(1);
+
+    const group = page.getByTestId(`usage-host-${serverId}`);
+    await expect(group.getByText("Alpha plan", { exact: true })).toBeVisible({ timeout: 10_000 });
+    await expect(group.getByText("31%")).toBeVisible();
+    await expect(group.getByText("Beta plan", { exact: true })).toBeVisible();
+    await expect(group.getByText("Unavailable", { exact: true })).toBeVisible();
+
+    await group.getByTestId("usage-refresh").first().hover();
+    await expect(page.getByTestId("usage-freshness-tooltip")).toHaveText("Updated 2h ago");
+    await expect(group.getByTestId("usage-freshness")).toHaveCount(0);
+  });
+
+  test("refreshes one report from its card", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const beta: UsageReportEntry = {
+      id: "beta:b",
+      account: {},
+      fetchedAt: twoHoursAgo(),
+      sourceId: "beta",
+      sourceLabel: "Beta plan",
+      report: {
+        status: "available",
+        windows: [{ id: "weekly", label: "Weekly", usedPct: 12, headline: true }],
+      },
+    };
+    const alpha = (usedPct: number, fetchedAt: string): UsageReportEntry => ({
+      id: "alpha:a",
+      account: {},
+      fetchedAt,
+      sourceId: "alpha",
+      sourceLabel: "Alpha plan",
+      report: {
+        status: "available",
+        windows: [{ id: "weekly", label: "Weekly", usedPct, headline: true }],
+      },
+    });
+    const usage = await installUsageReportsFixture(page, {
+      lists: [
+        [alpha(31, twoHoursAgo()), beta],
+        () => [
+          alpha(58, new Date().toISOString()),
+          { ...beta, fetchedAt: new Date().toISOString() },
+        ],
+      ],
+    });
+
+    await gotoAppShell(page);
+    await page.locator('[data-testid="sidebar-usage"]:visible').first().click();
+    const group = page.getByTestId(`usage-host-${serverId}`);
+    await expect(group.getByText("31%")).toBeVisible({ timeout: 10_000 });
+
+    const alphaRefresh = group.getByTestId("usage-refresh").first();
+    await alphaRefresh.click();
+    await usage.waitForListRequests(2);
+    expect(usage.listRequests()).toEqual([
+      { forceRefresh: false, reportIds: undefined },
+      { forceRefresh: true, reportIds: ["alpha:a"] },
+    ]);
+    await expect(group.getByText("58%")).toBeVisible();
+    await expect(group.getByText("12%")).toBeVisible();
+
+    await group.getByTestId("usage-refresh").nth(1).hover();
+    await expect(page.getByTestId("usage-freshness-tooltip")).toHaveText("Updated 2h ago");
+    await alphaRefresh.hover();
+    await expect(page.getByTestId("usage-freshness-tooltip")).toHaveText("Updated just now");
+  });
+
+  test("shows the host once it connects after a cold load on a phone", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const usage = await installUsageReportsFixture(page, {
+      lists: [
+        [
+          {
+            id: "alpha:a",
+            account: {},
+            fetchedAt: twoHoursAgo(),
+            sourceId: "alpha",
+            sourceLabel: "Alpha plan",
+            report: { status: "available", windows: [] },
+          },
+        ],
+      ],
+    });
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto("/usage");
+    await usage.waitForListRequests(1);
+
+    const group = page.getByTestId(`usage-host-${serverId}`);
+    await expect(group.getByText("Alpha plan", { exact: true })).toBeVisible({ timeout: 10_000 });
+    await expect(group.getByTestId("usage-freshness")).toHaveText("Updated 2h ago");
+  });
+
+  test("tells the user to update a host without usage sources", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const usage = await installUsageReportsFixture(page, { usageSources: false });
+
+    await gotoAppShell(page);
+    await page.locator('[data-testid="sidebar-usage"]:visible').first().click();
+
+    await expect(
+      page.getByTestId(`usage-host-${serverId}`).getByText("Update the host to see usage", {
+        exact: true,
+      }),
+    ).toBeVisible({ timeout: 10_000 });
+    expect(usage.listRequests()).toHaveLength(0);
+  });
+});

packages/app/e2e/browser/usage-settings.spec.ts

@@ -0,0 +1,136 @@
+import type { UsageReportEntry } from "@getpaseo/protocol/messages";
+import { expect, test } from "../support/fixtures";
+import { gotoAppShell, openSettings } from "../support/helpers/app";
+import { getServerId } from "../support/helpers/server-id";
+import { openSettingsHostSection } from "../support/helpers/settings";
+import { installUsageReportsFixture } from "../support/helpers/usage-reports";
+
+const ICON = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor"/></svg>';
+
+function report(input: {
+  sourceId: string;
+  sourceLabel: string;
+  report: Partial<UsageReportEntry["report"]>;
+}): UsageReportEntry {
+  return {
+    id: `${input.sourceId}:account`,
+    account: { label: input.sourceId === "alpha" ? "dev@example.com" : undefined },
+    fetchedAt: "2026-01-01T00:00:00.000Z",
+    sourceId: input.sourceId,
+    sourceLabel: input.sourceLabel,
+    icon: ICON,
+    report: {
+      status: "available",
+      windows: [],
+      ...input.report,
+    },
+  };
+}
+
+test.describe("usage settings", () => {
+  test("renders every report returned by usage.list_reports", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const usage = await installUsageReportsFixture(page, {
+      lists: [
+        [
+          report({
+            sourceId: "alpha",
+            sourceLabel: "Alpha plan",
+            report: {
+              planLabel: "Max",
+              windows: [{ id: "session", label: "Session", usedPct: 7, headline: true }],
+            },
+          }),
+          report({
+            sourceId: "beta",
+            sourceLabel: "Beta plan",
+            report: {
+              planLabel: "Coding plan",
+              windows: [
+                { id: "biweekly", label: "Biweekly", usedPct: 23 },
+                { id: "daily", label: "Daily", remainingPct: 30 },
+              ],
+              balances: [
+                { id: "credits", label: "Credits", remaining: 1234, unit: "credits" },
+                { id: "extra", label: "Extra usage", used: 5, limit: 20, unit: "usd" },
+              ],
+              details: [{ id: "valid", label: "Valid until", value: "2026-12-31" }],
+            },
+          }),
+          report({
+            sourceId: "gamma",
+            sourceLabel: "Gamma plan",
+            report: { status: "error", error: "Gamma auth expired" },
+          }),
+        ],
+      ],
+    });
+
+    await gotoAppShell(page);
+    await openSettings(page);
+    expect(usage.listRequests()).toHaveLength(0);
+    await openSettingsHostSection(page, serverId, "usage");
+    await usage.waitForListRequests(1);
+
+    const card = page.getByTestId("usage-card");
+    await expect(card.getByText("Alpha plan", { exact: true })).toBeVisible({ timeout: 10_000 });
+    await expect(card.getByText("dev@example.com", { exact: true })).toBeVisible();
+    await expect(card.getByText("Beta plan", { exact: true })).toBeVisible();
+    await expect(card.getByText("70%")).toBeVisible();
+    await expect(card.getByText("1,234 left", { exact: true })).toBeVisible();
+    await expect(card.getByText("$5.00 / $20.00", { exact: true })).toBeVisible();
+    await expect(card.getByText("2026-12-31", { exact: true })).toBeVisible();
+    await expect(card.getByText("Gamma auth expired", { exact: true })).toBeVisible();
+  });
+
+  test("refresh forces a fresh report", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const windows = (usedPct: number) => [{ id: "w", label: "Weekly", usedPct }];
+    const usage = await installUsageReportsFixture(page, {
+      lists: [
+        [
+          report({
+            sourceId: "alpha",
+            sourceLabel: "Alpha plan",
+            report: { windows: windows(23) },
+          }),
+        ],
+        [
+          report({
+            sourceId: "alpha",
+            sourceLabel: "Alpha plan",
+            report: { windows: windows(64) },
+          }),
+        ],
+      ],
+    });
+
+    await gotoAppShell(page);
+    await openSettings(page);
+    await openSettingsHostSection(page, serverId, "usage");
+    await expect(page.getByText("23%")).toBeVisible({ timeout: 10_000 });
+
+    await page.getByRole("button", { name: "Refresh", exact: true }).click();
+    await usage.waitForListRequests(2);
+
+    expect(usage.listRequests().at(-1)).toEqual({ forceRefresh: true });
+    await expect(page.getByText("64%")).toBeVisible();
+  });
+
+  test("asks to update a host without usage sources and never calls it", async ({ page }) => {
+    test.setTimeout(120_000);
+    const serverId = getServerId();
+    const usage = await installUsageReportsFixture(page, { usageSources: false });
+
+    await gotoAppShell(page);
+    await openSettings(page);
+    await openSettingsHostSection(page, serverId, "usage");
+
+    await expect(
+      page.getByTestId("usage-card").getByText("Update the host to see usage", { exact: true }),
+    ).toBeVisible({ timeout: 10_000 });
+    expect(usage.listRequests()).toHaveLength(0);
+  });
+});

packages/app/e2e/browser/worktree-restore.spec.ts

@@ -1,6 +1,7 @@
 import { randomUUID } from "node:crypto";
 import { execFileSync } from "node:child_process";
-import { existsSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
 import path from "node:path";
 import {
   restoreArchivedWorkspace,
@@ -354,6 +355,88 @@ test.describe("Worktree restore", () => {
       .toBeNull();
   });
 
+  test("restores a branchless workspace so its archived agent can be used again", async ({
+    page,
+  }) => {
+    const project = await openProjectViaDaemon(worktreeClient, tempRepo.path);
+    createdProjectIds.add(project.projectKey);
+    const backingWorktree = await createWorktreeViaDaemon(worktreeClient, {
+      cwd: tempRepo.path,
+      slug: `branchless-${randomUUID().slice(0, 8)}`,
+    });
+    createdProjectIds.add(backingWorktree.projectKey);
+    createdWorktreeDirectories.add(backingWorktree.workspaceDirectory);
+
+    execFileSync("git", ["switch", "--detach", "main"], {
+      cwd: backingWorktree.workspaceDirectory,
+      stdio: "pipe",
+    });
+    const created = await worktreeClient.createWorkspace({
+      source: { kind: "directory", path: backingWorktree.workspaceDirectory },
+      title: "Sample workspace",
+    });
+    if (!created.workspace) {
+      throw new Error(created.error ?? "Could not create the branchless workspace");
+    }
+    const workspaceId = created.workspace.id;
+    const agent = await createIdleAgent(client, {
+      cwd: backingWorktree.workspaceDirectory,
+      workspaceId,
+      title: "Archived agent",
+    });
+
+    await archiveWorkspaceFromDaemon(worktreeClient, backingWorktree.workspaceDirectory, {
+      scope: "worktree",
+    });
+    await expect
+      .poll(() => existsSync(backingWorktree.workspaceDirectory), { timeout: 30_000 })
+      .toBe(false);
+    await expect.poll(() => fetchAgentArchivedAt(client, agent.id)).not.toBeNull();
+
+    await gotoAppShell(page);
+    await waitForSidebarHydration(page);
+    await openSessions(page);
+    await page.getByTestId(`agent-row-${getServerId()}-${agent.id}`).click();
+    await expect(page.getByText("Workspace archived", { exact: true })).toBeVisible();
+    await expect(
+      page.getByText(
+        "Restore Sample workspace to return to its agents. A new branch will start from the saved base or the repository default.",
+        { exact: true },
+      ),
+    ).toBeVisible();
+    await captureBranchlessRestoreStep(page, "01-restore-workspace.png");
+
+    await page.getByRole("button", { name: "Restore", exact: true }).click();
+    await expect
+      .poll(() => existsSync(backingWorktree.workspaceDirectory), { timeout: 30_000 })
+      .toBe(true);
+    await expect(page.getByRole("button", { name: "Unarchive", exact: true })).toBeVisible({
+      timeout: 30_000,
+    });
+    await captureBranchlessRestoreStep(page, "02-unarchive-agent.png");
+
+    await page.getByRole("button", { name: "Unarchive", exact: true }).click();
+    await expect.poll(() => fetchAgentArchivedAt(client, agent.id)).toBeNull();
+    await expect(page.getByRole("textbox", { name: "Message agent..." })).toBeEditable();
+    await captureBranchlessRestoreStep(page, "03-agent-ready.png");
+
+    const restoredHead = execFileSync("git", ["rev-parse", "HEAD"], {
+      cwd: backingWorktree.workspaceDirectory,
+      encoding: "utf8",
+    }).trim();
+    const defaultHead = execFileSync("git", ["rev-parse", "main"], {
+      cwd: tempRepo.path,
+      encoding: "utf8",
+    }).trim();
+    expect(restoredHead).toBe(defaultHead);
+    expect(
+      execFileSync("git", ["branch", "--show-current"], {
+        cwd: backingWorktree.workspaceDirectory,
+        encoding: "utf8",
+      }).trim(),
+    ).toMatch(/^restored\//);
+  });
+
   test("restore failure stays visible and permits a successful retry", async ({ page }) => {
     const { agent, worktree } = await openArchivedWorkspaceFromHistory(page, "restore-retry");
     const displacedProjectPath = `${tempRepo.path}-temporarily-unavailable`;
@@ -422,6 +505,12 @@ test.describe("Worktree restore", () => {
   });
 });
 
+async function captureBranchlessRestoreStep(page: Page, filename: string): Promise<void> {
+  const screenshotDirectory = path.join(tmpdir(), "paseo-branchless-restore-evidence");
+  mkdirSync(screenshotDirectory, { recursive: true });
+  await page.screenshot({ path: path.join(screenshotDirectory, filename), fullPage: true });
+}
+
 function commitRestorableChange(cwd: string): void {
   writeFileSync(path.join(cwd, "restored-change.txt"), "preserved after restore\n");
   execFileSync("git", ["add", "restored-change.txt"], { cwd, stdio: "pipe" });

packages/app/e2e/fixtures/catalog-codex.mjs

@@ -0,0 +1,88 @@
+import readline from "node:readline";
+import { randomUUID } from "node:crypto";
+
+const fast = { id: "priority", name: "Fast", description: "Faster processing, increased usage" };
+const ultra = {
+  id: "ultrafast",
+  name: "Ultrafast",
+  description: "Lowest latency, increased usage",
+};
+const models = [
+  { id: "gpt-6.1-sol", displayName: "GPT-6.1 Sol", isDefault: true, serviceTiers: [fast, ultra] },
+  { id: "gpt-6-sol", displayName: "GPT-6 Sol", serviceTiers: [fast] },
+].map((model) =>
+  Object.assign(model, {
+    model: model.id,
+    defaultReasoningEffort: "medium",
+    supportedReasoningEfforts: [{ reasoningEffort: "medium", description: "Medium" }],
+  }),
+);
+
+function send(message) {
+  process.stdout.write(JSON.stringify(message) + "\n");
+}
+function respond(method, params) {
+  switch (method) {
+    case "initialize":
+      return {};
+    case "model/list":
+      return { data: models };
+    case "config/read":
+      return { config: { model: models[0].id, model_reasoning_effort: "medium" } };
+    case "collaborationMode/list":
+      return { data: [] };
+    case "skills/list":
+      return { data: [] };
+    case "thread/list":
+    case "thread/loaded/list":
+      return { data: [] };
+    case "thread/start":
+      return { thread: { id: randomUUID() }, model: params.model };
+    case "thread/resume":
+      return { thread: { id: params.threadId } };
+    case "thread/read":
+      return { thread: { id: params.threadId, turns: [] } };
+    case "turn/start": {
+      const turnId = randomUUID();
+      setTimeout(() => {
+        send({
+          method: "turn/started",
+          params: { threadId: params.threadId, turn: { id: turnId } },
+        });
+        send({
+          method: "item/completed",
+          params: {
+            threadId: params.threadId,
+            turnId,
+            item: {
+              id: randomUUID(),
+              type: "agentMessage",
+              text: "Ready to work on this project.",
+            },
+          },
+        });
+        send({
+          method: "turn/completed",
+          params: { threadId: params.threadId, turn: { id: turnId, status: "completed" } },
+        });
+      }, 50);
+      return { turn: { id: turnId } };
+    }
+    default:
+      throw new Error(`Unsupported Codex fixture request: ${method}`);
+  }
+}
+
+if (process.argv.includes("--version")) {
+  console.log("codex-cli 0.159.0");
+} else {
+  readline.createInterface({ input: process.stdin }).on("line", (line) => {
+    const request = JSON.parse(line);
+    if (request.id === undefined) return;
+    try {
+      send({ id: request.id, result: respond(request.method, request.params ?? {}) });
+    } catch (error) {
+      send({ id: request.id, error: { code: -32601, message: error.message } });
+    }
+  });
+}

packages/app/e2e/mobile/modal-sheet/README.md

@@ -90,3 +90,48 @@ a failed provider tap leaves its modal open, so dismiss it before the next run.
 journeys remain outside the default mobile suite, alongside the compact sheet journeys above.
 
 Keep generated screenshots, recordings, and run logs outside the repository.
+
+## Stacked adaptive sheets
+
+`stacked-pairing.ad` opens the welcome screen's pairing sheet and then the root-mounted host
+confirmation. It first types without tapping the input to verify autofocus, then cancels the
+confirmation, closes and reopens the underlying sheet, confirms again,
+and completes the password retry. `stacked-settings.ad` checks the same return and retry through
+Settings → add host → Direct connection → Advanced. Run both on phones and tablets so both the
+bottom sheet and centered dialog are exercised.
+
+Use a fresh English app with notification permission granted and first-use keyboard prompts
+already dismissed. Load this checkout from an isolated Metro. Start an isolated password-protected
+daemon and a local Wrangler relay with `--var 'PASEO_RELAY_UPSTREAM:'`; the checked-in upstream
+setting otherwise forwards traffic to the hosted relay, which drops password rejection replies.
+Set `PAIRING_LINK` to the daemon's `relay://` URI with an intentionally incorrect `password` query
+parameter, and `PASSWORD` to its correct password. This exercises password retry even while the
+daemon accepts relay connections with no credential.
+
+```sh
+agent-device replay packages/app/e2e/mobile/modal-sheet/stacked-pairing.ad \
+  --state-dir "$SHEET_QA_DEVICE_STATE" --session stacked-ipad --platform ios \
+  --udid "$SHEET_QA_IOS_UDID" \
+  --env PAIRING_LINK="$SHEET_QA_LINK" --env PASSWORD="$SHEET_QA_PASSWORD" \
+  --env OUT="$SHEET_QA_OUTPUT"
+```
+
+For Settings, first open Settings with Add host visible. With a saved host, open Switch host
+first. Use a second loopback spelling
+(`localhost` instead of `127.0.0.1`) for the same local relay so the saved host asks for confirmation
+of its changed connection. Pass that link to `stacked-settings.ad` with the same arguments.
+For an app with no saved hosts, use the original link; Add host is visible directly in Settings.
+
+Android uses the same journeys: copy each script outside the repository, change its context's
+`platform=ios` to `platform=android`, and pass `--serial` instead of `--udid`. Reverse both Metro
+(including the port advertised by its manifest) and the local relay ports. Keep driver state,
+artifacts, and sessions separate from other runs. These host-dependent journeys remain outside the
+default mobile suite, alongside the existing modal-sheet scripts.
+
+On iPhone, bulk replacement or bulk keyboard entry of the advanced URI field triggers a
+repeated-update error with both the parent and stacked-sheet implementations. Entering the complete
+URI one character at a time passed with both implementations; faster typing remains unverified.
+On iPad, replacing the field a second time appends text. For this Settings journey, use the
+native clipboard Paste menu, then continue the assertions manually. Dismiss the password keyboard
+with Done to submit when the Connect button is below the keyboard. The welcome pairing regression
+runs end to end without these adjustments.

packages/app/e2e/mobile/modal-sheet/stacked-pairing.ad

@@ -0,0 +1,50 @@
+# Fresh English app at Welcome, local relay host with PASSWORD, see README.md.
+# Run on phones and tablets: the confirmation lives at the root, outside the pairing sheet.
+context platform=ios timeout=180000 retries=0
+env APP_ID=sh.paseo.debug
+
+open "${APP_ID}"
+wait "id=\"welcome-paste-pairing-link\"" 20000
+screenshot "${OUT}/01-welcome.png"
+press "id=\"welcome-paste-pairing-link\""
+wait stable
+# Type without tapping the input: opening the sheet must retain its autofocus.
+wait "id=\"pair-link-input\"" 10000
+type "relay://"
+wait "id=\"pair-link-input\" value=\"relay://\"" 5000
+screenshot "${OUT}/20-pairing-autofocus-without-tap.png"
+fill "id=\"pair-link-input\"" "${PAIRING_LINK}"
+wait stable
+screenshot "${OUT}/02-pairing-input.png"
+press "id=\"pair-link-submit\""
+wait stable
+wait "id=\"host-confirmation-connect\"" 10000
+screenshot "${OUT}/03-confirmation-on-top.png"
+press "id=\"host-confirmation-cancel\""
+wait stable
+wait "id=\"pair-link-submit\" enabled=true" 10000
+screenshot "${OUT}/04-cancel-returns-to-pairing.png"
+# Close and reopen the underlying sheet, then edit it and submit again.
+press "id=\"pair-link-cancel\""
+wait stable
+wait "id=\"welcome-paste-pairing-link\"" 10000
+screenshot "${OUT}/05-underlying-sheet-closes.png"
+press "id=\"welcome-paste-pairing-link\""
+wait stable
+wait "id=\"pair-link-input\"" 10000
+fill "id=\"pair-link-input\"" "${PAIRING_LINK}"
+wait stable
+press "id=\"pair-link-submit\""
+wait stable
+wait "id=\"host-confirmation-connect\"" 10000
+screenshot "${OUT}/06-confirmation-reopens.png"
+press "id=\"host-confirmation-connect\""
+wait stable
+wait "id=\"pair-link-password-input\"" 20000
+screenshot "${OUT}/07-password-after-connect.png"
+fill "id=\"pair-link-password-input\"" "${PASSWORD}"
+wait stable
+press "id=\"pair-link-submit\""
+wait stable
+wait text "Open a folder on your machine" 30000
+screenshot "${OUT}/08-connected.png"

packages/app/e2e/mobile/modal-sheet/stacked-settings.ad

@@ -0,0 +1,46 @@
+# Settings with Add host visible: no saved hosts, or the host picker already open.
+context platform=ios timeout=180000 retries=0
+env APP_ID=sh.paseo.debug
+open "${APP_ID}"
+wait "id=\"settings-add-host\"" 20000
+screenshot "${OUT}/09-settings.png"
+press "id=\"settings-add-host\""
+wait stable
+wait "id=\"add-host-method-direct\"" 10000
+screenshot "${OUT}/10-add-host-methods.png"
+press "id=\"add-host-method-direct\""
+wait stable
+press "id=\"direct-host-advanced-toggle\""
+wait stable
+fill "id=\"direct-host-uri-input\"" "${PAIRING_LINK}"
+wait stable
+screenshot "${OUT}/11-add-host-relay-input.png"
+press "id=\"direct-host-submit\""
+wait stable
+wait "id=\"host-confirmation-connect\"" 10000
+screenshot "${OUT}/12-add-host-confirmation-on-top.png"
+press "id=\"host-confirmation-cancel\""
+wait stable
+wait "id=\"direct-host-submit\" enabled=true" 10000
+screenshot "${OUT}/13-cancel-returns-to-add-host.png"
+# Editing the underlying sheet proves it still accepts input after closing the top sheet.
+fill "id=\"direct-host-uri-input\"" "${PAIRING_LINK}"
+wait stable
+press "id=\"direct-host-submit\""
+wait stable
+wait "id=\"host-confirmation-connect\"" 10000
+screenshot "${OUT}/14-add-host-confirmation-reopens.png"
+press "id=\"host-confirmation-connect\""
+wait stable
+wait "id=\"direct-password-input\"" 20000
+screenshot "${OUT}/15-add-host-password.png"
+fill "id=\"direct-password-input\"" "${PASSWORD}"
+wait stable
+press "id=\"direct-host-submit\""
+wait stable
+open "${APP_ID}" "paseo://settings"
+wait "label=\"Connections\"" 10000
+press "label=\"Connections\""
+wait stable
+wait "id=\"host-page-connections-card\"" 30000
+screenshot "${OUT}/16-settings-connected.png"

packages/app/e2e/support/helpers/chat-outline.ts

@@ -3,6 +3,7 @@ import { openSettings } from "./app";
 import { openSettingsSection } from "./settings";
 import { runWorkspaceActionFromCommandCenter } from "./command-center-workspace-actions";
 import { seedMockAgentWorkspace, type MockAgentWorkspace } from "./mock-agent";
+import { loadSessionMessageReaders } from "./new-workspace";
 
 export async function withStreamingMarkdownOutline(
   run: (agent: MockAgentWorkspace) => Promise<void>,
@@ -229,3 +230,22 @@ async function requireBoundingBox(
   }
   return box;
 }
+
+export async function observePromptIndexRequests(page: Page) {
+  const frames = await loadSessionMessageReaders();
+  const agentIds: string[] = [];
+  page.on("websocket", (socket) => {
+    socket.on("framesent", ({ payload }) => {
+      const request = frames.client(payload);
+      if (request?.type === "agent.timeline.list_prompts.request") {
+        agentIds.push(request.agentId);
+      }
+    });
+  });
+  return {
+    async waitForRequestFor(agentId: string) {
+      await expect.poll(() => agentIds).toContain(agentId);
+    },
+    requestedAgentIds: () => [...new Set(agentIds)],
+  };
+}

packages/app/e2e/support/helpers/content-width.ts

@@ -0,0 +1,63 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+import { openSettings } from "./app";
+import { openSettingsSection } from "./settings";
+
+const APP_SETTINGS_KEY = "@paseo:app-settings";
+
+function contentWidthInput(page: Page): Locator {
+  return page.getByLabel("Content width in pixels", { exact: true });
+}
+
+function resetContentWidthButton(page: Page): Locator {
+  return page.getByRole("button", { name: "Reset content width to default", exact: true });
+}
+
+export async function openAppearanceSettings(page: Page): Promise<void> {
+  await openSettings(page);
+  await openSettingsSection(page, "appearance");
+}
+
+export async function setContentWidth(page: Page, width: number): Promise<void> {
+  const input = contentWidthInput(page);
+  await input.fill(String(width));
+  await input.press("Tab");
+}
+
+export async function resetContentWidth(page: Page): Promise<void> {
+  await resetContentWidthButton(page).click();
+}
+
+export async function expectDefaultContentWidthSetting(page: Page, width: number): Promise<void> {
+  await expect(contentWidthInput(page)).toHaveValue(String(width));
+  await expect(resetContentWidthButton(page)).toHaveCount(0);
+  await expect.poll(() => readStoredContentWidth(page)).toBeNull();
+}
+
+export async function expectCustomContentWidthSetting(page: Page, width: number): Promise<void> {
+  await expect(contentWidthInput(page)).toHaveValue(String(width));
+  await expect(resetContentWidthButton(page)).toBeVisible();
+  await expect.poll(() => readStoredContentWidth(page)).toBe(width);
+}
+
+/** Asserts the rendered width of a content-column element stays within `max` and above `min`. */
+export async function expectContentColumnWidth(
+  element: Locator,
+  bounds: { min?: number; max: number },
+): Promise<void> {
+  await expect(element).toBeVisible({ timeout: 30_000 });
+  await expect
+    .poll(async () => (await element.boundingBox())?.width ?? 0)
+    .toBeLessThanOrEqual(bounds.max);
+  await expect
+    .poll(async () => (await element.boundingBox())?.width ?? 0)
+    .toBeGreaterThan(bounds.min ?? 0);
+}
+
+async function readStoredContentWidth(page: Page): Promise<unknown> {
+  return page.evaluate((key) => {
+    const raw = localStorage.getItem(key);
+    return raw === null
+      ? undefined
+      : (JSON.parse(raw) as { contentMaxWidth?: unknown }).contentMaxWidth;
+  }, APP_SETTINGS_KEY);
+}

packages/app/e2e/support/helpers/creation.ts

@@ -206,6 +206,12 @@ export async function createCreationScenario(page: Page) {
         )
         .toBe(count);
     },
+    async agentIds() {
+      await requests.settled();
+      return (await project.client.fetchAgents()).entries
+        .filter(({ agent }) => agent.workspaceId === workspaceId)
+        .map(({ agent }) => agent.id);
+    },
     async expectAgentTitle(title: string) {
       await expect
         .poll(

packages/app/e2e/support/helpers/host-confirmation.ts

@@ -0,0 +1,95 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+
+const EXTRA_HOSTS_KEY = "@paseo:e2e-extra-hosts";
+
+export interface LinkedHost {
+  serverId: string;
+  relayEndpoint: string;
+  daemonPublicKeyB64: string;
+}
+
+/**
+ * A pairing link that opens on the settings page. `/` redirects to
+ * `/open-project` on its own, so starting in settings leaves the pairing link
+ * as the only thing that can move the app to `/open-project`.
+ */
+export function buildPairingLink(host: LinkedHost): string {
+  const offer = {
+    v: 2,
+    serverId: host.serverId,
+    daemonPublicKeyB64: host.daemonPublicKeyB64,
+    relay: { endpoint: host.relayEndpoint, useTls: false },
+  };
+  const encoded = Buffer.from(JSON.stringify(offer), "utf8").toString("base64url");
+  return `/settings/general#offer=${encoded}`;
+}
+
+/** Loads the app from a pairing link, the way opening the link in a browser does. */
+export async function openPairingLink(page: Page, link: string): Promise<void> {
+  // Leave the link's page first so the link always loads the app from scratch.
+  await page.goto("/");
+  await page.goto(link);
+}
+
+/** Saves a relay host before the app loads, as if it had been paired in an earlier session. */
+export async function saveLinkedHostBeforeLoad(page: Page, host: LinkedHost): Promise<void> {
+  await page.goto("/");
+  const nowIso = new Date().toISOString();
+  const connectionId = `relay:${host.relayEndpoint}`;
+  const savedHost = {
+    serverId: host.serverId,
+    label: host.serverId,
+    connections: [
+      {
+        id: connectionId,
+        type: "relay",
+        relayEndpoint: host.relayEndpoint,
+        useTls: false,
+        daemonPublicKeyB64: host.daemonPublicKeyB64,
+      },
+    ],
+    preferredConnectionId: connectionId,
+    createdAt: nowIso,
+    updatedAt: nowIso,
+  };
+  await page.evaluate(({ key, hosts }) => localStorage.setItem(key, JSON.stringify(hosts)), {
+    key: EXTRA_HOSTS_KEY,
+    hosts: [savedHost],
+  });
+}
+
+export function hostConfirmation(page: Page): Locator {
+  return page.getByTestId("host-confirmation");
+}
+
+export async function expectHostConfirmationFor(page: Page, host: LinkedHost): Promise<void> {
+  const sheet = hostConfirmation(page);
+  await expect(sheet.getByText("Connect to this host?", { exact: true })).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(sheet.getByTestId("host-confirmation-server-id")).toHaveText(host.serverId);
+  await expect(sheet.getByTestId("host-confirmation-relay")).toHaveText(host.relayEndpoint);
+}
+
+export async function cancelHostConfirmation(page: Page): Promise<void> {
+  await hostConfirmation(page).getByRole("button", { name: "Cancel", exact: true }).click();
+  await expect(hostConfirmation(page)).toHaveCount(0);
+}
+
+export async function connectToConfirmedHost(page: Page): Promise<void> {
+  await hostConfirmation(page).getByRole("button", { name: "Connect", exact: true }).click();
+  await expect(hostConfirmation(page)).toHaveCount(0);
+}
+
+/** Checks the host picker on the settings page the app is already showing. */
+export async function expectHostInHostPicker(
+  page: Page,
+  serverId: string,
+  expected: "listed" | "not listed",
+): Promise<void> {
+  await page.getByTestId("settings-host-picker").click();
+  await expect(page.getByTestId(`settings-host-picker-item-${serverId}`)).toHaveCount(
+    expected === "listed" ? 1 : 0,
+  );
+  await page.keyboard.press("Escape");
+}

packages/app/e2e/support/helpers/isolated-host-daemon.ts

@@ -41,6 +41,13 @@ async function getAvailablePort(): Promise<number> {
   });
 }
 
+export async function getAvailableHostDaemonPort(): Promise<number> {
+  const primaryPort = Number(process.env.E2E_DAEMON_PORT ?? 0);
+  let port = await getAvailablePort();
+  while (port === 6767 || port === 6768 || port === primaryPort) port = await getAvailablePort();
+  return port;
+}
+
 async function waitForServer(port: number, child: ChildProcess): Promise<void> {
   const deadline = Date.now() + 90_000;
   let lastError: unknown = null;
@@ -81,9 +88,7 @@ export async function startIsolatedHostDaemon(
   serverId: string,
   options: IsolatedHostDaemonOptions = {},
 ): Promise<IsolatedHostDaemon> {
-  const primaryPort = Number(process.env.E2E_DAEMON_PORT ?? 0);
-  let port = await getAvailablePort();
-  while (port === 6767 || port === 6768 || port === primaryPort) port = await getAvailablePort();
+  const port = await getAvailableHostDaemonPort();
 
   const metroPort = process.env.E2E_METRO_PORT;
   if (!metroPort) throw new Error("E2E_METRO_PORT is required to start an isolated host daemon");

packages/app/e2e/support/helpers/plugin-settings.ts

@@ -3,6 +3,8 @@ import { expect, test as base, type Page } from "../fixtures";
 import { gotoAppShell, openSettings } from "./app";
 import { goBackInSettings, openCompactSettings, openHostSection } from "./settings";
 import { getServerId } from "./server-id";
+import { expectAppRoute } from "./route-assertions";
+import { buildSettingsHostSectionRoute } from "@/utils/host-routes";
 import { connectNewWorkspaceDaemonClient } from "./new-workspace";
 
 type SettingsClient = Awaited<ReturnType<typeof connectNewWorkspaceDaemonClient>>;
@@ -105,6 +107,13 @@ export async function returnAndReopenSettings(page: Page) {
   await page.getByRole("menuitem", { name: "Display", exact: true }).click();
   await expect(page.getByRole("switch", { name: "Show metadata" })).toBeVisible();
 }
+export async function returnToPluginsPage(page: Page) {
+  await page.getByRole("button", { name: "Back to plugins", exact: true }).click();
+  await expectAppRoute(page, buildSettingsHostSectionRoute(getServerId(), "plugins"));
+  await expect(
+    page.getByRole("button", { name: "Actions for settings-example", exact: true }),
+  ).toBeVisible();
+}
 export async function expectSettingsUnavailable(page: Page) {
   await expect(
     page.getByText("This plugin settings screen is unavailable.", { exact: true }),

packages/app/e2e/support/helpers/provider-usage.ts

@@ -1,154 +0,0 @@
-import type { Page } from "@playwright/test";
-import type { ProviderUsage } from "@getpaseo/protocol/messages";
-import { daemonWsRoutePattern } from "./daemon-port";
-
-interface ProviderUsageFixturePayload {
-  fetchedAt: string;
-  providers: ProviderUsage[];
-}
-
-export interface ProviderUsageFixture {
-  requestCount(): number;
-  waitForRequestCount(count: number): Promise<void>;
-}
-
-type WebSocketMessage = string | Buffer;
-
-function parseJson(message: WebSocketMessage): unknown {
-  const raw = typeof message === "string" ? message : message.toString("utf8");
-  try {
-    return JSON.parse(raw);
-  } catch {
-    return null;
-  }
-}
-
-function getSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
-  const envelope = parseJson(message);
-  if (!envelope || typeof envelope !== "object") {
-    return null;
-  }
-  const maybeEnvelope = envelope as { type?: unknown; message?: unknown };
-  if (maybeEnvelope.type !== "session" || !maybeEnvelope.message) {
-    return null;
-  }
-  if (typeof maybeEnvelope.message !== "object") {
-    return null;
-  }
-  return maybeEnvelope.message as Record<string, unknown>;
-}
-
-function withProviderUsageFeature(message: WebSocketMessage): string | null {
-  const envelope = parseJson(message);
-  if (!envelope || typeof envelope !== "object") {
-    return null;
-  }
-  const maybeEnvelope = envelope as {
-    type?: unknown;
-    message?: {
-      type?: unknown;
-      payload?: Record<string, unknown>;
-    };
-  };
-  const payload = maybeEnvelope.message?.payload;
-  if (
-    maybeEnvelope.type !== "session" ||
-    maybeEnvelope.message?.type !== "status" ||
-    payload?.status !== "server_info"
-  ) {
-    return null;
-  }
-  return JSON.stringify({
-    ...maybeEnvelope,
-    message: {
-      ...maybeEnvelope.message,
-      payload: {
-        ...payload,
-        features: {
-          ...(typeof payload.features === "object" && payload.features !== null
-            ? payload.features
-            : {}),
-          providerUsageList: true,
-        },
-      },
-    },
-  });
-}
-
-export async function installProviderUsageFixture(
-  page: Page,
-  payloads: ProviderUsageFixturePayload[],
-): Promise<ProviderUsageFixture> {
-  let requests = 0;
-  const waiters: Array<{ count: number; resolve: () => void }> = [];
-
-  function notifyWaiters() {
-    for (const waiter of waiters.splice(0)) {
-      if (requests >= waiter.count) {
-        waiter.resolve();
-      } else {
-        waiters.push(waiter);
-      }
-    }
-  }
-
-  function payloadForRequest(): ProviderUsageFixturePayload {
-    const index = Math.min(requests - 1, payloads.length - 1);
-    const payload = payloads[index];
-    if (!payload) {
-      throw new Error("Provider usage fixture requires at least one payload.");
-    }
-    return payload;
-  }
-
-  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
-    const server = ws.connectToServer();
-
-    ws.onMessage((message) => {
-      const sessionMessage = getSessionMessage(message);
-      if (sessionMessage?.type === "provider.usage.list.request") {
-        requests += 1;
-        const requestId = sessionMessage.requestId;
-        if (typeof requestId !== "string") {
-          throw new Error("provider.usage.list.request missing requestId");
-        }
-        const payload = payloadForRequest();
-        notifyWaiters();
-        ws.send(
-          JSON.stringify({
-            type: "session",
-            message: {
-              type: "provider.usage.list.response",
-              payload: {
-                requestId,
-                fetchedAt: payload.fetchedAt,
-                providers: payload.providers,
-              },
-            },
-          }),
-        );
-        return;
-      }
-      server.send(message);
-    });
-
-    server.onMessage((message) => {
-      const serverInfo = typeof message === "string" ? withProviderUsageFeature(message) : null;
-      ws.send(serverInfo ?? message);
-    });
-  });
-
-  return {
-    requestCount() {
-      return requests;
-    },
-    waitForRequestCount(count: number) {
-      if (requests >= count) {
-        return Promise.resolve();
-      }
-      return new Promise<void>((resolve) => {
-        waiters.push({ count, resolve });
-      });
-    },
-  };
-}

packages/app/e2e/support/helpers/settings.ts

@@ -74,7 +74,7 @@ export async function openSettingsHostSection(
 }
 
 export async function expectSettingsHeader(page: Page, title: string): Promise<void> {
-  await expect(page.getByTestId("settings-detail-header-title")).toHaveText(title);
+  await expect(page.getByTestId("page-title")).toHaveText(title);
 }
 
 export async function openAddHostFlow(page: Page): Promise<void> {

packages/app/e2e/support/helpers/usage-reports.ts

@@ -0,0 +1,178 @@
+import type { Page } from "@playwright/test";
+import type { UsageReportEntry } from "@getpaseo/protocol/messages";
+import { daemonWsRoutePattern } from "./daemon-port";
+
+export interface UsageReportsFixture {
+  listRequests(): Array<{ forceRefresh: boolean; reportIds?: string[] }>;
+  agentRequests(): Array<{ agentId: string }>;
+  waitForListRequests(count: number): Promise<void>;
+  waitForAgentRequests(count: number): Promise<void>;
+}
+
+interface UsageReportsFixtureOptions {
+  /**
+   * Successive `usage.list_reports` responses; the last one repeats. `{ error }` fails that
+   * request; a function builds the response when the request arrives (e.g. a fresh `fetchedAt`).
+   */
+  lists?: Array<UsageListResponse | (() => UsageListResponse)>;
+  /** Successive agent report IDs; the last one repeats. */
+  agentReportIds?: Array<string | null>;
+  /** Advertise `features.usageSources`. False simulates a host from before usage sources. */
+  usageSources?: boolean;
+}
+
+type UsageListResponse = UsageReportEntry[] | { error: string };
+
+type WebSocketMessage = string | Buffer;
+
+function parseJson(message: WebSocketMessage): unknown {
+  const raw = typeof message === "string" ? message : message.toString("utf8");
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+function getSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
+  const envelope = parseJson(message) as { type?: unknown; message?: unknown } | null;
+  if (!envelope || envelope.type !== "session" || typeof envelope.message !== "object") {
+    return null;
+  }
+  return envelope.message as Record<string, unknown>;
+}
+
+function withUsageSourcesFeature(message: WebSocketMessage, enabled: boolean): string | null {
+  const envelope = parseJson(message) as {
+    type?: unknown;
+    message?: { type?: unknown; payload?: Record<string, unknown> };
+  } | null;
+  const payload = envelope?.message?.payload;
+  if (
+    envelope?.type !== "session" ||
+    envelope.message?.type !== "status" ||
+    payload?.status !== "server_info"
+  ) {
+    return null;
+  }
+  const features =
+    typeof payload.features === "object" && payload.features !== null ? payload.features : {};
+  return JSON.stringify({
+    ...envelope,
+    message: {
+      ...envelope.message,
+      payload: { ...payload, features: { ...features, usageSources: enabled } },
+    },
+  });
+}
+
+function pick<T>(values: T[], index: number): T {
+  const value = values[Math.min(index, values.length - 1)];
+  if (value === undefined) throw new Error("Usage fixture requires at least one response.");
+  return value;
+}
+
+function createCounter() {
+  let count = 0;
+  const waiters: Array<{ count: number; resolve: () => void }> = [];
+  return {
+    increment() {
+      count += 1;
+      for (const waiter of waiters.splice(0)) {
+        if (count >= waiter.count) waiter.resolve();
+        else waiters.push(waiter);
+      }
+    },
+    waitFor(target: number): Promise<void> {
+      if (count >= target) return Promise.resolve();
+      return new Promise((resolve) => waiters.push({ count: target, resolve }));
+    },
+  };
+}
+
+export async function installUsageReportsFixture(
+  page: Page,
+  options: UsageReportsFixtureOptions,
+): Promise<UsageReportsFixture> {
+  const listRequests: Array<{ forceRefresh: boolean; reportIds?: string[] }> = [];
+  const agentRequests: Array<{ agentId: string }> = [];
+  const listCounter = createCounter();
+  const agentCounter = createCounter();
+  const usageSources = options.usageSources ?? true;
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+
+    ws.onMessage((message) => {
+      const request = getSessionMessage(message);
+      const requestId = request?.requestId;
+      if (request?.type === "usage.list_reports.request" && typeof requestId === "string") {
+        listRequests.push({
+          forceRefresh: request.forceRefresh === true,
+          reportIds: Array.isArray(request.reportIds) ? (request.reportIds as string[]) : undefined,
+        });
+        const scripted = pick(options.lists ?? [[]], listRequests.length - 1);
+        const response = typeof scripted === "function" ? scripted() : scripted;
+        if ("error" in response) {
+          ws.send(
+            JSON.stringify({
+              type: "session",
+              message: {
+                type: "rpc_error",
+                payload: {
+                  requestId,
+                  requestType: "usage.list_reports.request",
+                  error: response.error,
+                  code: "transport",
+                },
+              },
+            }),
+          );
+          listCounter.increment();
+          return;
+        }
+        const ids = Array.isArray(request.reportIds) ? request.reportIds : null;
+        const reports = ids ? response.filter((entry) => ids.includes(entry.id)) : response;
+        ws.send(
+          JSON.stringify({
+            type: "session",
+            message: { type: "usage.list_reports.response", payload: { requestId, reports } },
+          }),
+        );
+        listCounter.increment();
+        return;
+      }
+      if (request?.type === "agent.resolve_usage_report.request" && typeof requestId === "string") {
+        agentRequests.push({
+          agentId: String(request.agentId),
+        });
+        const reportId = pick(options.agentReportIds ?? [null], agentRequests.length - 1);
+        ws.send(
+          JSON.stringify({
+            type: "session",
+            message: {
+              type: "agent.resolve_usage_report.response",
+              payload: { requestId, reportId },
+            },
+          }),
+        );
+        agentCounter.increment();
+        return;
+      }
+      server.send(message);
+    });
+
+    server.onMessage((message) => {
+      const serverInfo =
+        typeof message === "string" ? withUsageSourcesFeature(message, usageSources) : null;
+      ws.send(serverInfo ?? message);
+    });
+  });
+
+  return {
+    listRequests: () => [...listRequests],
+    agentRequests: () => [...agentRequests],
+    waitForListRequests: (count) => listCounter.waitFor(count),
+    waitForAgentRequests: (count) => agentCounter.waitFor(count),
+  };
+}

packages/app/e2e/support/helpers/versioned-host-daemon.ts

@@ -0,0 +1,176 @@
+import { mkdtemp, rm } from "node:fs/promises";
+import net from "node:net";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { getAvailableHostDaemonPort } from "./isolated-host-daemon";
+import { killProcessTree, spawnTsx } from "./spawn-node";
+
+const VERSIONED_DAEMON_ENTRYPOINT = path.resolve(
+  __dirname,
+  "../../../../server/src/server/test-utils/versioned-daemon.ts",
+);
+
+const READY_TIMEOUT_MS = 30_000;
+
+// A host daemon that can be replaced by a daemon reporting another version under the same
+// endpoint and serverId, the way an upgraded host comes back.
+export interface RestartableHostDaemon {
+  serverId: string;
+  port: number;
+  stop(): Promise<void>;
+  restartWithVersion(version: string): Promise<void>;
+  dispose(): Promise<void>;
+}
+
+export async function startRestartableHostDaemon(version: string): Promise<RestartableHostDaemon> {
+  const paseoHomeRoot = await mkdtemp(path.join(tmpdir(), "paseo-e2e-restartable-host-"));
+  const port = await getAvailableHostDaemonPort();
+  let current: VersionedHostDaemon | null = null;
+  async function dispose(): Promise<void> {
+    await current?.stop();
+    current = null;
+    await rm(paseoHomeRoot, { recursive: true, force: true });
+  }
+  try {
+    current = await startVersionedHostDaemon({ version, port, paseoHomeRoot });
+  } catch (error) {
+    await dispose();
+    throw error;
+  }
+  const { serverId } = current;
+
+  return {
+    serverId,
+    port,
+    async stop() {
+      await current?.stop();
+      current = null;
+      await waitForPortReleased(port);
+    },
+    async restartWithVersion(nextVersion) {
+      await current?.stop();
+      current = null;
+      await waitForPortReleased(port);
+      current = await startVersionedHostDaemon({ version: nextVersion, port, paseoHomeRoot });
+      if (current.serverId !== serverId) {
+        throw new Error(
+          `Restarted host daemon reported serverId ${current.serverId}, expected ${serverId}`,
+        );
+      }
+    },
+    dispose,
+  };
+}
+
+interface VersionedHostDaemon {
+  serverId: string;
+  port: number;
+  version: string;
+  stop(): Promise<void>;
+}
+
+interface VersionedHostDaemonOptions {
+  version: string;
+  port: number;
+  paseoHomeRoot: string;
+}
+
+// Starts the versioned test daemon on an explicit port with a caller-owned PASEO_HOME. The caller
+// removes the home root.
+async function startVersionedHostDaemon(
+  options: VersionedHostDaemonOptions,
+): Promise<VersionedHostDaemon> {
+  const child = spawnTsx(
+    VERSIONED_DAEMON_ENTRYPOINT,
+    [options.version, String(options.port), options.paseoHomeRoot],
+    { stdio: ["ignore", "pipe", "pipe", "ipc"] },
+  );
+  const ready = Promise.withResolvers<{ port: number; serverId: string }>();
+  let output = "";
+  child.stdout?.on("data", (chunk: Buffer) => {
+    output += chunk.toString("utf8");
+  });
+  child.stderr?.on("data", (chunk: Buffer) => {
+    output += chunk.toString("utf8");
+  });
+  child.once("error", ready.reject);
+  child.once("exit", () => {
+    ready.reject(
+      new Error(`Versioned daemon ${options.version} exited before reporting ready:\n${output}`),
+    );
+  });
+  child.once("message", (message) => {
+    if (!isReadyMessage(message)) {
+      ready.reject(new Error("Invalid versioned daemon startup message"));
+      return;
+    }
+    ready.resolve(message);
+  });
+  const timeout = setTimeout(
+    () =>
+      ready.reject(
+        new Error(
+          `Versioned daemon ${options.version} did not report ready within ${READY_TIMEOUT_MS}ms:\n${output}`,
+        ),
+      ),
+    READY_TIMEOUT_MS,
+  );
+
+  let stopped = false;
+  async function stop(): Promise<void> {
+    if (stopped) return;
+    stopped = true;
+    await killProcessTree(child);
+  }
+
+  try {
+    const readyMessage = await ready.promise;
+    if (readyMessage.port !== options.port) {
+      throw new Error(
+        `Versioned daemon ${options.version} bound port ${readyMessage.port}, expected ${options.port}`,
+      );
+    }
+    return {
+      serverId: readyMessage.serverId,
+      port: readyMessage.port,
+      version: options.version,
+      stop,
+    };
+  } catch (error) {
+    await stop();
+    throw error;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+// A replacement daemon can only bind the port the stopped daemon just released.
+async function waitForPortReleased(port: number, timeoutMs = 15_000): Promise<void> {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (await isPortAvailable(port)) return;
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  throw new Error(`Port ${port} was not released within ${timeoutMs}ms`);
+}
+
+function isReadyMessage(message: unknown): message is { port: number; serverId: string } {
+  return (
+    typeof message === "object" &&
+    message !== null &&
+    "port" in message &&
+    typeof message.port === "number" &&
+    "serverId" in message &&
+    typeof message.serverId === "string"
+  );
+}
+
+function isPortAvailable(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once("error", () => resolve(false));
+    server.listen(port, "127.0.0.1", () => {
+      server.close(() => resolve(true));
+    });
+  });
+}

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/app",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "private": true,
   "main": "index.ts",
   "scripts": {

packages/app/src/agent-stream/chat-outline/model.test.ts

@@ -12,7 +12,6 @@ describe("chat outline prompt index epoch", () => {
   it("accepts only the authoritative timeline epoch", () => {
     expect(shouldAcceptPromptIndexEpoch("epoch-2", "epoch-2")).toBe(true);
     expect(shouldAcceptPromptIndexEpoch("epoch-2", "epoch-1")).toBe(false);
-    expect(shouldAcceptPromptIndexEpoch(null, "epoch-1")).toBe(true);
   });
 });
 

packages/app/src/agent-stream/chat-outline/model.ts

@@ -2,11 +2,8 @@ import type { AgentTimelinePromptIndexPayload } from "@getpaseo/client/internal/
 
 export type ChatOutlinePrompt = AgentTimelinePromptIndexPayload["prompts"][number];
 
-export function shouldAcceptPromptIndexEpoch(
-  timelineEpoch: string | null,
-  indexEpoch: string,
-): boolean {
-  return timelineEpoch === null || timelineEpoch === indexEpoch;
+export function shouldAcceptPromptIndexEpoch(timelineEpoch: string, indexEpoch: string): boolean {
+  return timelineEpoch === indexEpoch;
 }
 
 /**

packages/app/src/agent-stream/chat-outline/use-chat-outline.test.tsx

@@ -37,6 +37,31 @@ describe("useChatOutline", () => {
     runtime.subscribeAgentTimeline.mockClear();
   });
 
+  it("waits for a served timeline before requesting its prompt index", async () => {
+    runtime.listAgentTimelinePrompts.mockResolvedValue({ epoch: "epoch-1", prompts: [] });
+    const viewportRef = createRef<StreamViewportHandle>();
+    const { rerender } = renderHook(
+      ({ agentId, timelineEpoch }) =>
+        useChatOutline({
+          agentId,
+          serverId: "server-1",
+          timelineEpoch,
+          tail: [],
+          head: [],
+          enabled: true,
+          viewportRef,
+          onJumpError: vi.fn(),
+        }),
+      { initialProps: { agentId: "draft_msg_1", timelineEpoch: null as string | null } },
+    );
+
+    expect(runtime.listAgentTimelinePrompts).not.toHaveBeenCalled();
+
+    rerender({ agentId: "agent-1", timelineEpoch: "epoch-1" });
+    await waitFor(() => expect(runtime.listAgentTimelinePrompts).toHaveBeenCalledTimes(1));
+    expect(runtime.listAgentTimelinePrompts).toHaveBeenCalledWith("agent-1");
+  });
+
   it("drops a late prompt index after the authoritative timeline epoch changes", async () => {
     const first = deferred<{ epoch: string; prompts: [] }>();
     const second = deferred<{

packages/app/src/agent-stream/chat-outline/use-chat-outline.ts

@@ -77,8 +77,10 @@ export function useChatOutline({
 
   useEffect(() => setIndex(null), [agentId, enabled, serverId, timelineEpoch]);
 
+  // Only a timeline the daemon has served can be indexed. A draft's optimistic stream has no
+  // epoch, and its id names no agent the daemon knows.
   useEffect(() => {
-    if (!isWeb || !enabled) {
+    if (!isWeb || !enabled || timelineEpoch === null) {
       setIndex(null);
       return;
     }

packages/app/src/agent-stream/strategy-web.test.tsx

@@ -1,6 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
+import { DEFAULT_CONTENT_MAX_WIDTH } from "@/styles/theme";
 import React from "react";
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
@@ -144,6 +145,7 @@ describe("createWebStreamStrategy", () => {
             listStyle: null,
             baseListContentContainerStyle: null,
             forwardListContentContainerStyle: null,
+            contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
           })}
         </>,
       );
@@ -187,6 +189,7 @@ describe("createWebStreamStrategy", () => {
           listStyle: null,
           baseListContentContainerStyle: null,
           forwardListContentContainerStyle: null,
+          contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
         }),
       );
     });
@@ -233,6 +236,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -291,6 +295,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     const unrevised = {
       contentById: new Set<string>(),
@@ -354,6 +359,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -429,6 +435,7 @@ describe("createWebStreamStrategy", () => {
           listStyle: null,
           baseListContentContainerStyle: null,
           forwardListContentContainerStyle: null,
+          contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
         }),
       );
     });
@@ -473,6 +480,7 @@ describe("createWebStreamStrategy", () => {
           listStyle: null,
           baseListContentContainerStyle: null,
           forwardListContentContainerStyle: null,
+          contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
         }),
       );
     });
@@ -553,6 +561,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -646,6 +655,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -755,6 +765,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -860,6 +871,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -959,6 +971,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -1056,6 +1069,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -1175,6 +1189,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -1408,6 +1423,7 @@ describe("createWebStreamStrategy", () => {
       listStyle: null,
       baseListContentContainerStyle: null,
       forwardListContentContainerStyle: null,
+      contentMaxWidth: DEFAULT_CONTENT_MAX_WIDTH,
     };
     const renderWithActivity = (active: boolean, input: StreamRenderInput = renderInput) => (
       <RetainedPanelActivity active={active}>{strategy.render(input)}</RetainedPanelActivity>

packages/app/src/agent-stream/strategy-web.tsx

@@ -303,6 +303,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     hasOlderHistory,
     olderHistoryProgressKey,
     scrollEnabled,
+    contentMaxWidth,
     isMobileBreakpoint,
   } = props;
   const historyVirtualized = useRevisedHistoryRows(
@@ -403,7 +404,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     getItemKey: (index: number) => segments.historyVirtualized[index]?.id ?? index,
     estimateSize: (index: number) => {
       const row = segments.historyVirtualized[index];
-      return row ? estimateStreamItemHeight(row) : 120;
+      return row ? estimateStreamItemHeight(row, contentMaxWidth) : 120;
     },
     measureElement: measureVirtualElement,
     rangeExtractor,

packages/app/src/agent-stream/strategy.ts

@@ -92,6 +92,8 @@ export interface StreamRenderInput {
   listStyle: StyleProp<ViewStyle>;
   baseListContentContainerStyle: StyleProp<ViewStyle>;
   forwardListContentContainerStyle: StyleProp<ViewStyle>;
+  // The chat column's max width. The web viewport estimates unmeasured row heights with it.
+  contentMaxWidth: number;
 }
 
 export interface ResolveStreamRenderStrategyInput {

packages/app/src/agent-stream/turn-footer.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useMemo, type ReactNode } from "react";
 import { View } from "react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { SPACING, type Theme } from "@/styles/theme";
 import type { TurnTiming } from "@/timeline/turn-time";
 import type { StreamItem } from "@/types/stream";
@@ -215,7 +214,7 @@ function TurnFooterRow({ children }: { children: ReactNode }) {
 const stylesheet = StyleSheet.create((theme) => ({
   streamItemWrapper: {
     width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
+    maxWidth: theme.contentMaxWidth,
     alignSelf: "center",
     paddingHorizontal: theme.spacing[2],
   },

packages/app/src/agent-stream/view.tsx

@@ -23,7 +23,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { MAX_CONTENT_WIDTH, useIsCompactFormFactor } from "@/constants/layout";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { useMutation } from "@tanstack/react-query";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { Check, ChevronDown, X } from "lucide-react-native";
@@ -55,7 +55,7 @@ import { useSessionStore } from "@/stores/session-store";
 import { useRevealedText } from "@/hooks/use-revealed-text";
 import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
 import { useLoadOlderAgentHistory } from "@/hooks/use-load-older-agent-history";
-import { useSettings } from "@/hooks/use-settings";
+import { resolveContentMaxWidth, useSettings } from "@/hooks/use-settings";
 import type { ToastApi } from "@/components/toast-host";
 import { returnToTimelineTail } from "./timeline-tail-navigation";
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
@@ -349,6 +349,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     const autoExpandReasoning = useSettings((settings) => settings.autoExpandReasoning);
     const toolCallDetailLevel = useSettings((settings) => settings.toolCallDetailLevel);
     const chatOutlineEnabled = useSettings((settings) => settings.chatOutlineEnabled);
+    const contentMaxWidth = useSettings(resolveContentMaxWidth);
     const viewportRef = useRef<StreamViewportHandle | null>(null);
     const pendingClientMessageIds = useMemo(
       () => new Set(pendingMessageSubmissions.map((submission) => submission.clientMessageId)),
@@ -1129,6 +1130,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
                 listStyle: stylesheet.list,
                 baseListContentContainerStyle: stylesheet.listContentContainer,
                 forwardListContentContainerStyle: stylesheet.forwardListContentContainer,
+                contentMaxWidth,
               })}
             </MessageOuterSpacingProvider>
             <ChatOutlineRail
@@ -1622,7 +1624,7 @@ const stylesheet = StyleSheet.create((theme) => ({
   },
   contentWrapper: {
     width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
+    maxWidth: theme.contentMaxWidth,
     alignSelf: "center",
     paddingHorizontal: theme.spacing[2],
   },
@@ -1643,7 +1645,7 @@ const stylesheet = StyleSheet.create((theme) => ({
   },
   streamItemWrapper: {
     width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
+    maxWidth: theme.contentMaxWidth,
     alignSelf: "center",
     paddingHorizontal: theme.spacing[2],
   },

packages/app/src/agent-stream/web-virtualization.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import { DEFAULT_CONTENT_MAX_WIDTH } from "@/styles/theme";
 import type { StreamItem } from "@/types/stream";
 import {
   clearAssistantImageMetadataCache,
@@ -123,8 +124,8 @@ describe("splitWebVirtualizedHistory", () => {
 
 describe("estimateStreamItemHeight", () => {
   it("uses compact estimates for collapsed tool sequence rows", () => {
-    expect(estimateStreamItemHeight(toolCall("tool", 1))).toBe(40);
-    expect(estimateStreamItemHeight(thought("thought", 2))).toBe(40);
+    expect(estimateStreamItemHeight(toolCall("tool", 1), DEFAULT_CONTENT_MAX_WIDTH)).toBe(40);
+    expect(estimateStreamItemHeight(thought("thought", 2), DEFAULT_CONTENT_MAX_WIDTH)).toBe(40);
   });
 
   it("uses a larger estimate for user messages with image attachments", () => {
@@ -146,7 +147,7 @@ describe("estimateStreamItemHeight", () => {
       ],
     };
 
-    expect(estimateStreamItemHeight(item)).toBe(220);
+    expect(estimateStreamItemHeight(item, DEFAULT_CONTENT_MAX_WIDTH)).toBe(220);
   });
 
   it("uses cached assistant image metadata when available", () => {
@@ -165,7 +166,7 @@ describe("estimateStreamItemHeight", () => {
       timestamp: createTimestamp(2),
     };
 
-    expect(estimateStreamItemHeight(item)).toBeGreaterThan(220);
+    expect(estimateStreamItemHeight(item, DEFAULT_CONTENT_MAX_WIDTH)).toBeGreaterThan(220);
   });
 });
 

packages/app/src/agent-stream/web-virtualization.ts

@@ -58,12 +58,12 @@ export interface WebVirtualizedHistoryWindow {
   mountedEntries: IndexedStreamItem[];
 }
 
-export function estimateStreamItemHeight(item: StreamItem): number {
+export function estimateStreamItemHeight(item: StreamItem, contentMaxWidth: number): number {
   switch (item.kind) {
     case "user_message":
       return item.images && item.images.length > 0 ? 220 : 96;
     case "assistant_message":
-      return estimateAssistantMessageHeightFromCache(item.text) ?? 220;
+      return estimateAssistantMessageHeightFromCache(item.text, contentMaxWidth) ?? 220;
     case "tool_call":
       return COLLAPSED_TOOL_SEQUENCE_ROW_HEIGHT_ESTIMATE;
     case "thought":

packages/app/src/app/_layout.tsx

@@ -45,6 +45,7 @@ import { WorkspaceSetupDialog } from "@/components/workspace-setup-dialog";
 import { WorkspaceShortcutTargetsSubscriber } from "@/components/workspace-shortcut-targets-subscriber";
 import { FloatingPanelPortalHost } from "@/components/ui/floating-panel-portal";
 import { HostChooserModal, useHostChooser } from "@/hosts/host-chooser";
+import { HostConfirmationSheet } from "@/hosts/host-confirmation-sheet";
 import {
   getIsElectronRuntime,
   HEADER_INNER_HEIGHT,
@@ -606,6 +607,7 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
         <CommandCenter />
         <AddProjectFlowHost />
         <HostChooserModal />
+        <HostConfirmationSheet />
         <ProviderSettingsHost />
         <WorkspaceSetupDialog />
         <KeyboardShortcutsDialog />
@@ -860,6 +862,7 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
       pathname === "/new" ||
       pathname === "/sessions" ||
       pathname === "/schedules" ||
+      pathname === "/usage" ||
       routeHasKnownHost);
 
   return <AppContainer chromeEnabled={shouldShowAppChrome}>{children}</AppContainer>;
@@ -892,6 +895,7 @@ function RootStack() {
         <Stack.Screen name="open-project" />
         <Stack.Screen name="sessions" />
         <Stack.Screen name="schedules" />
+        <Stack.Screen name="usage" />
         <Stack.Screen name="pair-scan" />
       </Stack.Protected>
       <Stack.Screen name="h/[serverId]" />

packages/app/src/app/pair-scan.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { useTranslation } from "react-i18next";
 import { Pressable, Text, View } from "react-native";
 import { useLocalSearchParams, useRouter, type Href } from "expo-router";
@@ -7,10 +7,12 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { CameraView, useCameraPermissions } from "expo-camera";
 import type { BarcodeScanningResult, BarcodeSettings } from "expo-camera";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
+import { openPairScan } from "@/hosts/pair-scan-model";
 import { buildHostRootRoute, buildSettingsHostRoute } from "@/utils/host-routes";
 import { isWeb } from "@/constants/platform";
 import { BackHeader } from "@/components/headers/back-header";
 import { PairLinkModal } from "@/components/pair-link-modal";
+import { Button } from "@/components/ui/button";
 
 const styles = StyleSheet.create((theme) => ({
   container: {
@@ -73,6 +75,9 @@ const styles = StyleSheet.create((theme) => ({
     borderBottomWidth: 4,
     borderBottomRightRadius: 12,
   },
+  scanAgainButton: {
+    marginTop: theme.spacing[6],
+  },
   helperText: {
     marginTop: theme.spacing[6],
     color: theme.colors.foregroundMuted,
@@ -108,16 +113,6 @@ const styles = StyleSheet.create((theme) => ({
   },
 }));
 
-function extractOfferUrlFromScan(result: BarcodeScanningResult): string | null {
-  const raw = typeof result.data === "string" ? result.data.trim() : "";
-  if (!raw) return null;
-
-  if (raw.includes("#offer=") || raw.includes("#connect=") || raw.startsWith("relay://"))
-    return raw;
-
-  return null;
-}
-
 export default function PairScanScreen() {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
@@ -129,9 +124,6 @@ export default function PairScanScreen() {
   const source = typeof params.source === "string" ? params.source : "settings";
 
   const [permission, requestPermission] = useCameraPermissions();
-  const [isPairing, setIsPairing] = useState(false);
-  const [scanError, setScanError] = useState<string | null>(null);
-  const [passwordOfferUrl, setPasswordOfferUrl] = useState<string | null>(null);
 
   const navigateToPairedHost = useCallback(
     (serverId: string) => {
@@ -144,6 +136,19 @@ export default function PairScanScreen() {
     [router, source],
   );
 
+  const [scan] = useState(() =>
+    openPairScan({
+      importConnectionLink: (link) =>
+        getHostRuntimeStore().importConnectionLink(
+          link,
+          source === "onboarding" ? "hostRoot" : "hostSettings",
+        ),
+      onConnected: navigateToPairedHost,
+    }),
+  );
+  const scanState = useSyncExternalStore(scan.subscribe, scan.getState, scan.getState);
+  useEffect(() => () => scan.close(), [scan]);
+
   const closeToSource = useCallback(() => {
     try {
       router.back();
@@ -159,30 +164,12 @@ export default function PairScanScreen() {
   }, [permission, requestPermission]);
 
   const handleScan = useCallback(
-    (result: BarcodeScanningResult) => {
-      if (isPairing) return;
-      const offerUrl = extractOfferUrlFromScan(result);
-      if (!offerUrl) return;
-
-      const store = getHostRuntimeStore();
-      if (passwordOfferUrl) return;
-      setIsPairing(true);
-      setScanError(null);
-      void store
-        .importConnectionLink(offerUrl, source === "onboarding" ? "hostRoot" : "hostSettings")
-        .then((outcome) => {
-          if (outcome.status === "connected") navigateToPairedHost(outcome.serverId);
-          else setPasswordOfferUrl(offerUrl);
-          return outcome;
-        })
-        .catch((error) => setScanError(error instanceof Error ? error.message : String(error)))
-        .finally(() => setIsPairing(false));
-    },
-    [isPairing, navigateToPairedHost, passwordOfferUrl, source],
+    (result: BarcodeScanningResult) =>
+      scan.scan(typeof result.data === "string" ? result.data : ""),
+    [scan],
   );
 
   const handleRouterBack = useCallback(() => router.back(), [router]);
-  const closePasswordModal = useCallback(() => setPasswordOfferUrl(null), []);
   const savePasswordPairing = useCallback(
     ({ serverId }: { serverId: string }) => navigateToPairedHost(serverId),
     [navigateToPairedHost],
@@ -240,24 +227,38 @@ export default function PairScanScreen() {
               barcodeScannerSettings={BARCODE_SCANNER_SETTINGS}
               onBarcodeScanned={handleScan}
             />
-            <View style={styles.overlay} pointerEvents="none">
+            <View style={styles.overlay} pointerEvents="box-none">
               <View style={styles.scanFrame}>
                 <View style={[styles.corner, styles.cornerTL]} />
                 <View style={[styles.corner, styles.cornerTR]} />
                 <View style={[styles.corner, styles.cornerBL]} />
                 <View style={[styles.corner, styles.cornerBR]} />
               </View>
-              {isPairing ? <Text style={helperTextStyle}>{t("pairing.scan.pairing")}</Text> : null}
-              {scanError ? <Text style={helperTextStyle}>{scanError}</Text> : null}
+              {scanState.status === "pairing" ? (
+                <Text style={helperTextStyle}>{t("pairing.scan.pairing")}</Text>
+              ) : null}
+              {scanState.status === "stopped" && scanState.error ? (
+                <Text style={helperTextStyle}>{scanState.error}</Text>
+              ) : null}
+              {scanState.status === "stopped" ? (
+                <Button
+                  style={styles.scanAgainButton}
+                  onPress={scan.scanAgain}
+                  testID="pair-scan-again"
+                >
+                  {t("pairing.connectionMethods.scanQr.title")}
+                </Button>
+              ) : null}
             </View>
           </View>
         )}
       </View>
       <PairLinkModal
-        visible={passwordOfferUrl !== null}
-        initialUrl={passwordOfferUrl ?? undefined}
-        initialPasswordRequired
-        onClose={closePasswordModal}
+        visible={scanState.status === "passwordRequired"}
+        passwordRequired={
+          scanState.status === "passwordRequired" ? scanState.passwordRequired : undefined
+        }
+        onClose={scan.closePassword}
         onSaved={savePasswordPairing}
       />
     </View>

packages/app/src/app/usage.tsx

@@ -0,0 +1,10 @@
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
+import { UsageScreen } from "@/usage";
+
+export default function UsageRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <UsageScreen />
+    </HostRouteBootstrapBoundary>
+  );
+}

packages/app/src/appearance/apply.test.ts

@@ -37,6 +37,7 @@ interface FakeTheme {
     "4xl": number;
   };
   lineHeight: { diff: number };
+  contentMaxWidth: number;
   colors: { foreground: string; syntax: Record<string, string> };
 }
 
@@ -56,6 +57,7 @@ function makeFakeTheme(): FakeTheme {
       "4xl": 26,
     },
     lineHeight: { diff: 22 },
+    contentMaxWidth: 820,
     colors: { foreground: "#fff", syntax: {} },
   };
 }
@@ -67,6 +69,7 @@ function makeInput(overrides: Partial<AppearanceInput> = {}): AppearanceInput {
     uiBaseFontSize: 14,
     contentFontSize: 15,
     codeFontSize: 12,
+    contentMaxWidth: 820,
     syntaxTheme: "one",
     ...overrides,
   };
@@ -102,6 +105,12 @@ describe("applyAppearance", () => {
     ]);
   });
 
+  it("patches the content max width into the theme", () => {
+    applyAppearance(makeInput({ contentMaxWidth: 1600 }));
+
+    expect(runCapturedUpdater().contentMaxWidth).toBe(1600);
+  });
+
   it("resolves an empty UI font family to the default stack", () => {
     applyAppearance(makeInput({ uiFontFamily: "" }));
 

packages/app/src/appearance/apply.ts

@@ -17,6 +17,7 @@ export interface AppearanceInput {
   uiBaseFontSize: number; // already clamped
   contentFontSize: number; // already clamped
   codeFontSize: number; // already clamped
+  contentMaxWidth: number; // already clamped, default resolved
   syntaxTheme: SyntaxThemeId;
 }
 
@@ -55,7 +56,7 @@ function scaleFontSize(
  * always current and makes ordering vs `setTheme`/`setAdaptiveThemes` irrelevant.
  *
  * The updater preserves the active theme wholesale (surfaces, accents,
- * terminal) and only patches the font ramp and syntax palette.
+ * terminal) and only patches the font ramp, content width, and syntax palette.
  * `updateTheme` replaces the stored theme rather than merging, so we spread
  * `...t` first.
  */
@@ -86,6 +87,7 @@ export function applyAppearance(input: AppearanceInput): void {
           fontFamily,
           fontSize,
           lineHeight,
+          contentMaxWidth: input.contentMaxWidth,
           colors: { ...t.colors, syntax: resolveSyntaxColors(input.syntaxTheme, t.colorScheme) },
         };
       }
@@ -94,6 +96,7 @@ export function applyAppearance(input: AppearanceInput): void {
         fontFamily,
         fontSize,
         lineHeight,
+        contentMaxWidth: input.contentMaxWidth,
         colors: { ...t.colors, syntax: resolveSyntaxColors(input.syntaxTheme, t.colorScheme) },
       };
     });

packages/app/src/appearance/provider.tsx

@@ -8,7 +8,12 @@ import {
   useState,
 } from "react";
 import { UnistylesRuntime } from "react-native-unistyles";
-import { DEFAULT_THEME_PREFERENCE, useAppSettings, type AppSettings } from "@/hooks/use-settings";
+import {
+  DEFAULT_THEME_PREFERENCE,
+  resolveContentMaxWidth,
+  useAppSettings,
+  type AppSettings,
+} from "@/hooks/use-settings";
 import {
   rememberPluginThemeHost,
   usePluginThemeCatalog,
@@ -68,6 +73,7 @@ export function AppearanceProvider({ children }: { children: ReactNode }) {
       uiBaseFontSize: settings.uiBaseFontSize,
       contentFontSize: settings.contentFontSize,
       codeFontSize: settings.codeFontSize,
+      contentMaxWidth: resolveContentMaxWidth({ contentMaxWidth: settings.contentMaxWidth }),
       syntaxTheme: settings.syntaxTheme,
     });
     setHasAppliedAppearance(true);
@@ -80,6 +86,7 @@ export function AppearanceProvider({ children }: { children: ReactNode }) {
     settings.uiBaseFontSize,
     settings.contentFontSize,
     settings.codeFontSize,
+    settings.contentMaxWidth,
     settings.syntaxTheme,
   ]);
 

packages/app/src/components/adaptive-modal-sheet.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { Modal, Platform, Pressable, Text, View } from "react-native";
+import { Keyboard, Pressable, Text, View } from "react-native";
 import type { DimensionValue, StyleProp, ViewStyle } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
@@ -19,7 +19,6 @@ import {
   type BottomSheetBackgroundProps,
 } from "@gorhom/bottom-sheet";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { ArrowLeft, Search, X } from "lucide-react-native";
 import {
   IsolatedBottomSheetModal,
@@ -75,11 +74,15 @@ export interface SheetHeader {
 
 const SCROLL_CONTENT_GROW = { flexGrow: 1 };
 const ABSOLUTE_FILL_STYLE = { ...StyleSheet.absoluteFillObject };
+const NATIVE_DIALOG_SNAP_POINTS = ["100%"];
 
 const styles = StyleSheet.create((theme) => ({
-  nativeModalRoot: {
+  nativeDialogSurface: {
     flex: 1,
   },
+  nativeDialogBackground: {
+    backgroundColor: "transparent",
+  },
   desktopOverlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0,0,0,0.55)",
@@ -471,7 +474,7 @@ export interface AdaptiveModalSheetProps {
   contentStyle?: StyleProp<ViewStyle>;
   /** Size compact sheet content to the live snap height instead of its largest snap point. */
   sizeContentToCurrentSnapPoint?: boolean;
-  /** Re-establishes caller-owned contexts inside the compact bottom-sheet portal. */
+  /** Re-establishes caller-owned contexts inside the native or compact sheet portal. */
   contextBridge?: ContextBridge | null;
 }
 
@@ -526,26 +529,26 @@ export function AdaptiveModalSheet({
     () => ({ backgroundColor: theme.colors.palette.zinc[600] }),
     [theme.colors.palette.zinc],
   );
+  useEffect(() => {
+    if (!isWeb && visible) {
+      // A newly opened sheet owns input. A keyboard belonging to the sheet below
+      // would cover controls in the new sheet, which has no focused input yet.
+      Keyboard.dismiss();
+    }
+  }, [visible]);
+
   const { sheetRef, handleSheetChange, handleSheetDismiss } = useIsolatedBottomSheetVisibility({
     visible,
-    isEnabled: isMobile,
+    isEnabled: isMobile || !isWeb,
     onClose,
   });
   const [shouldRenderWeb, setShouldRenderWeb] = useState(visible);
   const [isWebClosing, setIsWebClosing] = useState(false);
   const modalLayer = useGlobalWebOverlayLayer("modal", isWeb && !isMobile && shouldRenderWeb);
-  const nativeModalDismissNotifiedRef = useRef(!visible);
   const handleDismiss = useCallback(() => {
     handleSheetDismiss();
     onDismiss?.();
   }, [handleSheetDismiss, onDismiss]);
-  const notifyNativeModalDismiss = useCallback(() => {
-    if (nativeModalDismissNotifiedRef.current) {
-      return;
-    }
-    nativeModalDismissNotifiedRef.current = true;
-    onDismiss?.();
-  }, [onDismiss]);
 
   const renderBackdrop = useCallback(
     (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
@@ -592,12 +595,6 @@ export function AdaptiveModalSheet({
     onKeyDown: handleWebOverlayKeyDown,
   });
 
-  useEffect(() => {
-    if (visible) {
-      nativeModalDismissNotifiedRef.current = false;
-    }
-  }, [visible]);
-
   useEffect(() => {
     if (!isWeb || isMobile) return;
     if (visible) {
@@ -615,12 +612,6 @@ export function AdaptiveModalSheet({
     return () => window.clearTimeout(timeout);
   }, [visible, isMobile, onDismiss, shouldRenderWeb]);
 
-  useEffect(() => {
-    if (isWeb || isMobile || visible || Platform.OS !== "android") return;
-    const timeout = setTimeout(notifyNativeModalDismiss, 0);
-    return () => clearTimeout(timeout);
-  }, [visible, isMobile, notifyNativeModalDismiss]);
-
   if (isMobile) {
     const sheetContent = (
       <>
@@ -725,18 +716,28 @@ export function AdaptiveModalSheet({
   }
 
   return (
-    <Modal
-      transparent
-      animationType="fade"
-      visible={visible}
-      onRequestClose={onClose}
-      onDismiss={notifyNativeModalDismiss}
-      hardwareAccelerated
+    // Both native presentations share Gorhom's app-wide stack. Independent RN Modals
+    // present from their React ancestor's controller, so a root-owned sibling dialog
+    // cannot present while that controller already has a dialog open on iOS.
+    <IsolatedBottomSheetModal
+      ref={sheetRef}
+      contextBridge={contextBridge}
+      snapPoints={NATIVE_DIALOG_SNAP_POINTS}
+      index={0}
+      enableDynamicSizing={false}
+      onChange={handleSheetChange}
+      onDismiss={handleDismiss}
+      handleComponent={null}
+      backgroundStyle={styles.nativeDialogBackground}
+      enablePanDownToClose={false}
+      enableHandlePanningGesture={false}
+      enableContentPanningGesture={false}
+      keyboardBehavior="extend"
+      keyboardBlurBehavior="restore"
+      accessible={false}
+      presentation={presentation}
     >
-      {/* Android Modal opens a separate window outside the app's gesture root. */}
-      <GestureHandlerRootView style={styles.nativeModalRoot}>
-        {desktopContent}
-      </GestureHandlerRootView>
-    </Modal>
+      <View style={styles.nativeDialogSurface}>{desktopContent}</View>
+    </IsolatedBottomSheetModal>
   );
 }

packages/app/src/components/add-host-modal.tsx

@@ -294,11 +294,23 @@ export interface AddHostModalProps {
 }
 
 export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostModalProps) {
+  return (
+    <AddHostModalContent
+      key={String(visible)}
+      visible={visible}
+      onClose={onClose}
+      onCancel={onCancel}
+      onSaved={onSaved}
+    />
+  );
+}
+
+function AddHostModalContent({ visible, onClose, onCancel, onSaved }: AddHostModalProps) {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
   const daemons = useHosts();
-  const { probeAndUpsertDirectConnection, probeAndUpsertConnectionFromOfferUrl } =
-    useHostMutations();
+  const { probeAndUpsertDirectConnection, beginLinkPairing } = useHostMutations();
+  const [linkPairing] = useState(() => beginLinkPairing());
   const isMobile = useIsCompactFormFactor();
 
   const [isSaving, setIsSaving] = useState(false);
@@ -313,18 +325,6 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod
   const [inputResetKey, bumpInputResetKey] = useReducer((key: number) => key + 1, 0);
   const advancedTarget = useRef(new PairingTargetTracker("", true));
 
-  const clearInput = useCallback(() => {
-    setHost("");
-    setPort("6767");
-    setUseTls(false);
-    setPassword("");
-    setIsPasswordVisible(false);
-    setIsAdvancedOpen(false);
-    setAdvancedUri("");
-    advancedTarget.current = new PairingTargetTracker("", true);
-    bumpInputResetKey();
-  }, []);
-
   const connectIcon = useMemo(
     () => <Link2 size={16} color={theme.colors.accentForeground} />,
     [theme.colors.accentForeground],
@@ -358,29 +358,25 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod
   );
   const header = useMemo<SheetHeader>(() => ({ title: t("pairing.direct.title") }), [t]);
 
+  // Each open mounts a fresh form (see AddHostModal), so closing needs no reset.
   const handleClose = useCallback(() => {
     if (isSaving) return;
-    clearInput();
-    setErrorMessage("");
     onClose();
-  }, [isSaving, clearInput, onClose]);
+  }, [isSaving, onClose]);
 
   const handleCancel = useCallback(() => {
     if (isSaving) return;
-    clearInput();
-    setErrorMessage("");
     (onCancel ?? onClose)();
-  }, [isSaving, clearInput, onCancel, onClose]);
+  }, [isSaving, onCancel, onClose]);
 
   const handleSaveRelay = useCallback(
     async (relayUri: string) => {
       try {
         setIsSaving(true);
         setErrorMessage("");
-        const { profile, serverId, hostname } = await probeAndUpsertConnectionFromOfferUrl(
-          relayUri,
-          password || undefined,
-        );
+        const result = await linkPairing.submit(relayUri, password || undefined);
+        if (result.status === "cancelled") return;
+        const { profile, serverId, hostname } = result;
         const isNewHost = !daemons.some((daemon) => daemon.serverId === serverId);
         onSaved?.({ profile, serverId, hostname, isNewHost });
         handleClose();
@@ -396,9 +392,9 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod
       daemons,
       directConnectionLabels.invalidConnection,
       handleClose,
+      linkPairing,
       onSaved,
       password,
-      probeAndUpsertConnectionFromOfferUrl,
     ],
   );
 

packages/app/src/components/agent-list.tsx

@@ -14,7 +14,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { useIsCompactFormFactor } from "@/constants/layout";
-import { formatTimeAgo } from "@/utils/time";
+import { useTimeAgo } from "@/hooks/use-time-ago";
 import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
 import { useSessionStore } from "@/stores/session-store";
 import { Archive, ChevronRight } from "lucide-react-native";
@@ -181,7 +181,6 @@ function SessionRow({
 }) {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
-  const timeAgo = formatTimeAgo(agent.lastActivityAt);
   const agentKey = `${agent.serverId}:${agent.id}`;
   const isSelected = selectedAgentId === agentKey;
   const projectName = agent.projectPlacement?.projectName ?? "";
@@ -283,7 +282,7 @@ function SessionRow({
               testID={`agent-row-branch-${agent.serverId}-${agent.id}`}
             />
             <Text style={styles.sessionMetaSeparator}>·</Text>
-            <Text style={styles.sessionMetaText}>{timeAgo}</Text>
+            <AgentActivityTime date={agent.lastActivityAt} isMobile />
             {showHostColumn && agent.serverLabel ? (
               <>
                 <Text style={styles.sessionMetaSeparator}>·</Text>
@@ -316,9 +315,7 @@ function SessionRow({
             numberOfLines={1}
             testID={`agent-row-branch-${agent.serverId}-${agent.id}`}
           />
-          <Text style={styles.columnMetaFixed} numberOfLines={1}>
-            {timeAgo}
-          </Text>
+          <AgentActivityTime date={agent.lastActivityAt} isMobile={false} />
         </View>
       ) : null}
       <SessionRowTrailingAttention
@@ -330,6 +327,15 @@ function SessionRow({
   );
 }
 
+function AgentActivityTime({ date, isMobile }: { date: Date; isMobile: boolean }) {
+  const label = useTimeAgo(date);
+  return (
+    <Text style={isMobile ? styles.sessionMetaText : styles.columnMetaFixed} numberOfLines={1}>
+      {label}
+    </Text>
+  );
+}
+
 export function AgentList({
   agents,
   isRefreshing = false,

packages/app/src/components/archived-agent-callout.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { View, Text } from "react-native";
 import { useTranslation } from "react-i18next";
 import { StyleSheet } from "react-native-unistyles";
-import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { FOOTER_HEIGHT } from "@/constants/layout";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { KeyboardTranslateView } from "@/keyboard/shift";
 import { Button } from "@/components/ui/button";
@@ -77,7 +77,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
   },
   inputAreaContent: {
     width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
+    maxWidth: theme.contentMaxWidth,
   },
   callout: {
     flexDirection: "row",

packages/app/src/components/context-window-meter.tsx

@@ -1,11 +1,8 @@
-import { useCallback, useState } from "react";
 import { Pressable, Text, View } from "react-native";
 import Svg, { Circle } from "react-native-svg";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { ProviderUsageTooltipSection } from "@/provider-usage/tooltip-section";
-import { useProviderUsage } from "@/provider-usage/use-provider-usage";
 import { formatTokenCount } from "./context-window-meter.utils";
 
 interface ContextWindowMeterProps {
@@ -13,9 +10,6 @@ interface ContextWindowMeterProps {
   usedTokens: number | null;
   totalCostUsd?: number | null;
   showPercentage?: boolean;
-  serverId?: string;
-  /** The Paseo provider key, e.g. "claude", "gemini", "codex" */
-  provider?: string | null;
   /** Reserve the meter footprint and show a loading ring while usage is pending. */
   pending?: boolean;
   /** Optional glyph envelope for icon-toolbar alignment. */
@@ -101,30 +95,13 @@ export function ContextWindowMeter({
   usedTokens,
   totalCostUsd,
   showPercentage = false,
-  serverId,
-  provider,
   pending = false,
   glyphSize,
 }: ContextWindowMeterProps) {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const { view: providerUsageView, refresh: refreshProviderUsage } = useProviderUsage(
-    serverId ?? null,
-    { enabled: isTooltipOpen },
-  );
   const percentage =
     maxTokens !== null && usedTokens !== null ? getUsagePercentage(maxTokens, usedTokens) : null;
-  const handleTooltipOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      setIsTooltipOpen(nextOpen);
-      if (nextOpen) {
-        void refreshProviderUsage().catch(() => {});
-      }
-    },
-    [refreshProviderUsage],
-  );
-
   const geometry = getMeterGeometry(showPercentage, glyphSize);
 
   // No usage yet: reserve the footprint with a track-only ring while a session is
@@ -140,7 +117,6 @@ export function ContextWindowMeter({
           width={geometry.svgSize}
           height={geometry.svgSize}
           viewBox={`0 0 ${geometry.svgSize} ${geometry.svgSize}`}
-          style={styles.svg}
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
         >
@@ -167,13 +143,7 @@ export function ContextWindowMeter({
     typeof totalCostUsd === "number" ? formatSessionCost(totalCostUsd) : null;
 
   return (
-    <Tooltip
-      open={isTooltipOpen}
-      onOpenChange={handleTooltipOpenChange}
-      delayDuration={0}
-      enabledOnDesktop
-      enabledOnMobile
-    >
+    <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile>
       <TooltipTrigger asChild triggerRefProp="ref">
         <Pressable
           style={containerStyle}
@@ -187,7 +157,6 @@ export function ContextWindowMeter({
             width={svgSize}
             height={svgSize}
             viewBox={`0 0 ${svgSize} ${svgSize}`}
-            style={styles.svg}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
           >
@@ -209,6 +178,8 @@ export function ContextWindowMeter({
               strokeLinecap="round"
               strokeDasharray={circumference}
               strokeDashoffset={dashOffset}
+              // SVG strokes start at three o'clock; the ring reads clockwise from twelve.
+              transform={`rotate(-90 ${center} ${center})`}
             />
           </Svg>
           {showPercentage ? (
@@ -233,7 +204,6 @@ export function ContextWindowMeter({
               {t("contextWindow.sessionCost", { cost: formattedSessionCost })}
             </Text>
           ) : null}
-          <ProviderUsageTooltipSection view={providerUsageView} activeProviderId={provider} />
         </View>
       </TooltipContent>
     </Tooltip>
@@ -256,9 +226,6 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[1],
     borderRadius: theme.borderRadius.full,
   },
-  svg: {
-    transform: [{ rotate: "-90deg" }],
-  },
   percentageLabel: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.base,

packages/app/src/components/import-session-sheet.tsx

@@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
 import { getProviderIcon } from "@/components/provider-icons";
-import { formatTimeAgo } from "@/utils/time";
+import { useTimeAgo } from "@/hooks/use-time-ago";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import { useHostProjects } from "@/projects/host-projects";
@@ -309,7 +309,6 @@ function ImportSessionSheetRow({
   const { t } = useTranslation();
   const title = getSessionTitle(entry);
   const promptPreview = getPromptPreview(entry);
-  const lastActivity = formatTimeAgo(new Date(entry.lastActivityAt));
   const ProviderIcon = getProviderIcon(entry.providerId, serverId);
   const accessibilityState = useMemo(
     () => (disabled ? DISABLED_ACCESSIBILITY_STATE : undefined),
@@ -344,9 +343,11 @@ function ImportSessionSheetRow({
           <Text style={styles.rowTitle} numberOfLines={1}>
             {title}
           </Text>
-          <Text style={styles.rowMeta}>
-            {importing ? t("importSession.row.importing") : lastActivity}
-          </Text>
+          {importing ? (
+            <Text style={styles.rowMeta}>{t("importSession.row.importing")}</Text>
+          ) : (
+            <ImportSessionActivityTime date={entry.lastActivityAt} />
+          )}
         </View>
         <Text style={styles.rowPreview} numberOfLines={2}>
           {promptPreview}
@@ -365,6 +366,11 @@ function ImportSessionSheetRow({
   );
 }
 
+function ImportSessionActivityTime({ date }: { date: string }) {
+  const label = useTimeAgo(new Date(date));
+  return <Text style={styles.rowMeta}>{label}</Text>;
+}
+
 function SessionRows({
   serverId,
   entries,

packages/app/src/components/left-sidebar.tsx

@@ -1,5 +1,5 @@
 import { router } from "expo-router";
-import { FolderPlus, GitBranch, Import, Server, Settings, X } from "lucide-react-native";
+import { FolderPlus, Gauge, GitBranch, Import, Server, Settings, X } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import { memo, useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
@@ -47,7 +47,11 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useOwnsWindowChromeCorner, WindowChromeSafeArea } from "@/utils/desktop-window";
 import { useCloseAgentListGesture } from "@/mobile-panels/gestures";
 import { MobilePanelOverlay } from "@/mobile-panels/presentation";
-import { buildSettingsAddHostRoute, buildSettingsRoute } from "@/utils/host-routes";
+import {
+  buildSettingsAddHostRoute,
+  buildSettingsRoute,
+  buildUsageRoute,
+} from "@/utils/host-routes";
 import { openHostOverview } from "@/navigation/settings-navigation";
 import { SidebarAgentListSkeleton } from "./sidebar-agent-list-skeleton";
 import { SidebarCalloutSlot } from "./sidebar-callout-slot";
@@ -426,6 +430,25 @@ function SidebarHostPicker({
   );
 }
 
+function SidebarUsageButton({ theme }: { theme: SidebarTheme }) {
+  const { t } = useTranslation();
+  const isCompactLayout = useIsCompactFormFactor();
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
+  const handlePress = useCallback(() => {
+    if (isCompactLayout) showMobileAgent();
+    router.push(buildUsageRoute());
+  }, [isCompactLayout, showMobileAgent]);
+  return (
+    <FooterIconButton
+      onPress={handlePress}
+      testID="sidebar-usage"
+      label={t("settings.hostSections.usage")}
+      icon={Gauge}
+      theme={theme}
+    />
+  );
+}
+
 function IconTooltipContent({
   label,
   shortcutKeys,
@@ -489,6 +512,7 @@ function SidebarFooter({
           icon={Import}
           theme={theme}
         />
+        <SidebarUsageButton theme={theme} />
         <SidebarHelpMenu />
         <FooterIconButton
           onPress={handleSettings}

packages/app/src/components/page-layout/index.tsx

@@ -0,0 +1,71 @@
+import { useMemo, type ReactNode } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet } from "react-native-unistyles";
+import { BackHeader } from "@/components/headers/back-header";
+import { MenuHeader } from "@/components/headers/menu-header";
+import { useIsCompactFormFactor } from "@/constants/layout";
+
+interface PageLayoutProps {
+  title?: string;
+  /** Compact back button. Defaults to navigating back. */
+  onBack?: () => void;
+  testID?: string;
+  titleTestID?: string;
+  children: ReactNode;
+}
+
+/**
+ * A full-width page with a centered content column. On desktop the title is a
+ * document heading inside the page and the header only keeps the titlebar drag
+ * region and window controls; on compact the title moves into a back header.
+ */
+export function PageLayout({ title, onBack, testID, titleTestID, children }: PageLayoutProps) {
+  const isCompact = useIsCompactFormFactor();
+  const insets = useSafeAreaInsets();
+  const scrollContentStyle = useMemo(() => ({ paddingBottom: insets.bottom }), [insets.bottom]);
+  const showTitle = !isCompact && title !== undefined;
+
+  return (
+    <View style={styles.container}>
+      {isCompact ? <BackHeader title={title} onBack={onBack} /> : <MenuHeader borderless />}
+      <ScrollView style={styles.scroll} contentContainerStyle={scrollContentStyle} testID={testID}>
+        <View style={styles.content}>
+          {showTitle ? (
+            <View testID={titleTestID}>
+              <Text style={styles.title} testID="page-title">
+                {title}
+              </Text>
+            </View>
+          ) : null}
+          {children}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.surface0,
+  },
+  scroll: {
+    flex: 1,
+  },
+  content: {
+    padding: theme.spacing[4],
+    paddingTop: theme.spacing[6],
+    width: "100%",
+    maxWidth: 720,
+    alignSelf: "center",
+  },
+  title: {
+    // Line up with the section titles, which sit inset from their cards.
+    marginLeft: theme.spacing[1],
+    marginBottom: theme.spacing[6],
+    fontSize: theme.fontSize["4xl"],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+}));

packages/app/src/components/pair-link-modal.tsx

@@ -5,7 +5,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { Link } from "lucide-react-native";
 import type { HostProfile } from "@/types/host-connection";
-import { useHosts, useHostMutations } from "@/runtime/host-runtime";
+import { useHosts, useHostMutations, type PasswordRequiredPairing } from "@/runtime/host-runtime";
 import { parseRelayConnectionUri } from "@/utils/daemon-endpoints";
 import { parseConnectionOfferFromUrl } from "@getpaseo/protocol/connection-offer";
 import { AdaptiveModalSheet, AdaptiveTextInput, type SheetHeader } from "./adaptive-modal-sheet";
@@ -62,8 +62,8 @@ const styles = StyleSheet.create((theme) => ({
 
 export interface PairLinkModalProps {
   visible: boolean;
-  initialUrl?: string;
-  initialPasswordRequired?: boolean;
+  /** Continues a confirmed pairing whose host asked for a password. */
+  passwordRequired?: PasswordRequiredPairing;
   onClose: () => void;
   onCancel?: () => void;
   onSaved?: (result: {
@@ -76,18 +76,16 @@ export interface PairLinkModalProps {
 
 export function PairLinkModal({
   visible,
-  initialUrl,
-  initialPasswordRequired = false,
+  passwordRequired,
   onClose,
   onCancel,
   onSaved,
 }: PairLinkModalProps) {
   return (
     <PairLinkModalContent
-      key={`${visible}:${initialUrl ?? ""}:${initialPasswordRequired}`}
+      key={`${visible}:${passwordRequired?.link ?? ""}`}
       visible={visible}
-      initialUrl={initialUrl}
-      initialPasswordRequired={initialPasswordRequired}
+      passwordRequired={passwordRequired}
       onClose={onClose}
       onCancel={onCancel}
       onSaved={onSaved}
@@ -97,8 +95,7 @@ export function PairLinkModal({
 
 function PairLinkModalContent({
   visible,
-  initialUrl,
-  initialPasswordRequired = false,
+  passwordRequired,
   onClose,
   onCancel,
   onSaved,
@@ -106,7 +103,9 @@ function PairLinkModalContent({
   const { theme } = useUnistyles();
   const { t } = useTranslation();
   const daemons = useHosts();
-  const { probeAndUpsertConnectionFromOfferUrl } = useHostMutations();
+  const { beginLinkPairing } = useHostMutations();
+  const [pairing] = useState(() => passwordRequired?.pairing ?? beginLinkPairing());
+  const initialUrl = passwordRequired?.link;
   const isMobile = useIsCompactFormFactor();
 
   const offerUrlRef = useRef(initialUrl ?? "");
@@ -115,7 +114,7 @@ function PairLinkModalContent({
   const [isSaving, setIsSaving] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [password, setPassword] = useState("");
-  const [needsPassword, setNeedsPassword] = useState(initialPasswordRequired);
+  const [needsPassword, setNeedsPassword] = useState(passwordRequired !== undefined);
   const [passwordResetKey, resetPasswordInput] = useReducer((key: number) => key + 1, 0);
 
   const clearInput = useCallback(() => {
@@ -162,10 +161,9 @@ function PairLinkModalContent({
       try {
         setIsSaving(true);
         setErrorMessage("");
-        const { profile, serverId, hostname } = await probeAndUpsertConnectionFromOfferUrl(
-          raw,
-          password || undefined,
-        );
+        const result = await pairing.submit(raw, password || undefined);
+        if (result.status === "cancelled") return;
+        const { profile, serverId, hostname } = result;
         const isNewHost = !daemons.some((daemon) => daemon.serverId === serverId);
         onSaved?.({ profile, serverId, hostname, isNewHost });
         handleClose();
@@ -184,16 +182,7 @@ function PairLinkModalContent({
         setIsSaving(false);
       }
     },
-    [
-      daemons,
-      handleClose,
-      isMobile,
-      isSaving,
-      onSaved,
-      password,
-      t,
-      probeAndUpsertConnectionFromOfferUrl,
-    ],
+    [daemons, handleClose, isMobile, isSaving, onSaved, password, t, pairing],
   );
 
   const handleChangeOfferUrl = useCallback((next: string) => {

packages/app/src/components/provider-diagnostic-sheet.tsx

@@ -19,10 +19,10 @@ import { useToast } from "@/contexts/toast-context";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import { useDaemonConfig } from "@/hooks/use-daemon-config";
 import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
+import { useTimeAgo } from "@/hooks/use-time-ago";
 import { useHostRuntimeClient } from "@/runtime/host-runtime";
 import { settingsStyles } from "@/styles/settings";
 import { resolveProviderLabel } from "@/utils/provider-definitions";
-import { formatTimeAgo } from "@/utils/time";
 import { compareMatchScores, scoreTextFields } from "@getpaseo/protocol/search/text-match";
 import type { AgentModelDefinition, AgentProvider } from "@getpaseo/protocol/agent-types";
 import type { ProviderProfileModel } from "@getpaseo/protocol/provider-config";
@@ -409,7 +409,7 @@ interface ProviderModalBodyProps {
 }
 
 interface ProviderSheetFooterInput {
-  fetchedAtLabel: string | null;
+  fetchedAt: string | null;
   isCompact: boolean;
   modelsRefreshing: boolean;
   t: TFunction;
@@ -419,7 +419,7 @@ interface ProviderSheetFooterInput {
 }
 
 function renderProviderSheetFooter({
-  fetchedAtLabel,
+  fetchedAt,
   isCompact,
   modelsRefreshing,
   t,
@@ -430,16 +430,10 @@ function renderProviderSheetFooter({
   const contentStyle = isCompact ? sheetStyles.compactFooterContent : sheetStyles.footerContent;
   const actionsStyle = isCompact ? sheetStyles.compactFooterActions : sheetStyles.footerActions;
   const buttonStyle = isCompact ? sheetStyles.compactFooterButton : null;
-  const metaStyle = isCompact
-    ? [sheetStyles.footerMeta, sheetStyles.compactFooterMeta]
-    : sheetStyles.footerMeta;
-
   return (
     <View style={contentStyle}>
-      {fetchedAtLabel || !isCompact ? (
-        <Text style={metaStyle} numberOfLines={1}>
-          {fetchedAtLabel ? t("settings.providers.models.updated", { time: fetchedAtLabel }) : ""}
-        </Text>
+      {fetchedAt || !isCompact ? (
+        <ProviderUpdatedLabel fetchedAt={fetchedAt} isCompact={isCompact} />
       ) : null}
       <View style={actionsStyle}>
         <Button
@@ -477,6 +471,25 @@ function renderProviderSheetFooter({
   );
 }
 
+function ProviderUpdatedLabel({
+  fetchedAt,
+  isCompact,
+}: {
+  fetchedAt: string | null;
+  isCompact: boolean;
+}) {
+  const { t } = useTranslation();
+  const label = useTimeAgo(fetchedAt ? new Date(fetchedAt) : null);
+  const style = isCompact
+    ? [sheetStyles.footerMeta, sheetStyles.compactFooterMeta]
+    : sheetStyles.footerMeta;
+  return (
+    <Text style={style} numberOfLines={1}>
+      {fetchedAt ? t("settings.providers.models.updated", { time: label }) : ""}
+    </Text>
+  );
+}
+
 function ProviderModalBody(props: ProviderModalBodyProps) {
   const { t } = useTranslation();
   const {
@@ -609,18 +622,6 @@ export function ProviderDiagnosticSheet({
   });
   stableDiscoveredRef.current = nextDiscoveredCache;
 
-  const [clockTick, setClockTick] = useState(0);
-  useEffect(() => {
-    if (!visible) return;
-    const id = setInterval(() => setClockTick((tick) => tick + 1), 10_000);
-    return () => clearInterval(id);
-  }, [visible]);
-  const fetchedAtLabel = useMemo(() => {
-    if (!providerEntry?.fetchedAt) return null;
-    void clockTick;
-    return formatTimeAgo(new Date(providerEntry.fetchedAt));
-  }, [providerEntry?.fetchedAt, clockTick]);
-
   useEffect(() => {
     if (!visible) {
       setQuery("");
@@ -686,7 +687,7 @@ export function ProviderDiagnosticSheet({
         onClose={onClose}
         testID="provider-settings-sheet"
         footer={renderProviderSheetFooter({
-          fetchedAtLabel,
+          fetchedAt: providerEntry?.fetchedAt ?? null,
           isCompact,
           modelsRefreshing,
           t,

packages/app/src/components/provider-icons.ts

@@ -36,14 +36,14 @@ const CATALOG_ICON_SVGS = new Map(
 const catalogIconComponents = new Map<string, ProviderIconComponent>();
 const snapshotIconComponents = new Map<string, { svg: string; component: ProviderIconComponent }>();
 
+/** Renders a sanitized SVG string from a host catalog, tinted through `currentColor`. */
+export function SvgIcon({ svg, size, color }: ProviderIconProps & { svg: string }) {
+  return createElement(SvgXml, { xml: svg, width: size, height: size, color });
+}
+
 function createSvgIcon(provider: string, iconSvg: string): ProviderIconComponent {
   const SvgProviderIcon: ProviderIconComponent = ({ size, color }) =>
-    createElement(SvgXml, {
-      xml: iconSvg,
-      width: size,
-      height: size,
-      color,
-    });
+    SvgIcon({ svg: iconSvg, size, color });
   SvgProviderIcon.displayName = `SvgProviderIcon(${provider})`;
   return SvgProviderIcon;
 }

packages/app/src/components/schedules/schedule-row.tsx

@@ -22,7 +22,7 @@ import {
   resolveScheduleTitle,
   scheduleProductName,
 } from "@/utils/schedule-format";
-import { formatTimeAgo } from "@/utils/time";
+import { useTimeAgo } from "@/hooks/use-time-ago";
 import type { ScheduleSummary } from "@getpaseo/protocol/schedule/types";
 
 // Themed lucide wrappers — module-scope so only the icon re-renders on theme
@@ -96,16 +96,19 @@ function stateBadge(state: ScheduleDerivedState): {
 // Meta reads left-to-right as identity → history → future: how often, when it
 // was created, when it last ran, and (only while it can still run) when it runs
 // next. Status lives on the badge, never repeated here.
-function buildMeta(
-  schedule: ScheduleSummary,
-  state: ScheduleDerivedState,
-  serverName: string | undefined,
-  singleHost: boolean,
-): string {
+function buildMeta(input: {
+  schedule: ScheduleSummary;
+  state: ScheduleDerivedState;
+  createdAgo: string;
+  lastRunAgo: string;
+  serverName: string | undefined;
+  singleHost: boolean;
+}): string {
+  const { schedule, state, serverName, singleHost } = input;
   const parts = [
     formatCadence(schedule.cadence),
-    `Created ${formatTimeAgo(new Date(schedule.createdAt))}`,
-    schedule.lastRunAt ? `Last run ${formatTimeAgo(new Date(schedule.lastRunAt))}` : "Never run",
+    `Created ${input.createdAgo}`,
+    schedule.lastRunAt ? `Last run ${input.lastRunAgo}` : "Never run",
   ];
   if (state === "active") {
     const next = formatNextRun(schedule.nextRunAt);
@@ -119,6 +122,27 @@ function buildMeta(
   return parts.join(" · ");
 }
 
+function ScheduleMeta({
+  schedule,
+  state,
+  serverName,
+  singleHost,
+}: {
+  schedule: ScheduleSummary;
+  state: ScheduleDerivedState;
+  serverName: string | undefined;
+  singleHost: boolean;
+}) {
+  const createdAgo = useTimeAgo(new Date(schedule.createdAt));
+  const lastRunAgo = useTimeAgo(schedule.lastRunAt ? new Date(schedule.lastRunAt) : null);
+  const meta = buildMeta({ schedule, state, createdAgo, lastRunAgo, serverName, singleHost });
+  return (
+    <Text style={settingsStyles.rowHint} numberOfLines={1}>
+      {meta}
+    </Text>
+  );
+}
+
 /** Small provider glyph. Reads the icon color off a StyleSheet object so the
  * dynamic component (getProviderIcon) stays compliant without useUnistyles. */
 function ProviderGlyph({
@@ -168,7 +192,6 @@ export function ScheduleRow({
   const title = resolveScheduleTitle(schedule);
   const productName = scheduleProductName(schedule);
   const badge = stateBadge(state);
-  const meta = buildMeta(schedule, state, serverName, singleHost ?? false);
   const canRun = schedule.target.type === "new-agent" && (state === "active" || state === "paused");
 
   const rowStyle = useCallback(
@@ -206,9 +229,12 @@ export function ScheduleRow({
             <Text style={styles.target} numberOfLines={1}>
               {targetLabel}
             </Text>
-            <Text style={settingsStyles.rowHint} numberOfLines={1}>
-              {meta}
-            </Text>
+            <ScheduleMeta
+              schedule={schedule}
+              state={state}
+              serverName={serverName}
+              singleHost={singleHost ?? false}
+            />
           </View>
         </View>
 

packages/app/src/components/sidebar/empty-states.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { type ReactNode, useCallback } from "react";
 import { Import, Plus } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import { Text, View } from "react-native";
@@ -6,6 +6,28 @@ import { StyleSheet } from "react-native-unistyles";
 import { Button } from "@/components/ui/button";
 import { useSidebarViewStore } from "@/stores/sidebar-view-store";
 
+function SidebarEmptyStateCard({
+  testID,
+  title,
+  description,
+  children,
+}: {
+  testID: string;
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <View style={styles.card} testID={testID}>
+      <View style={styles.copy}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.description}>{description}</Text>
+      </View>
+      <View style={styles.actions}>{children}</View>
+    </View>
+  );
+}
+
 /**
  * The two things the sidebar's workspace list says when it has no rows.
  *
@@ -27,13 +49,15 @@ export function SidebarFilterEmptyState() {
   }, [clearLabelFilter, clearProjectFilters]);
 
   return (
-    <View style={styles.container} testID="sidebar-filter-empty-state">
-      <Text style={styles.title}>{t("sidebar.filterEmpty.title")}</Text>
-      <Text style={styles.description}>{t("sidebar.filterEmpty.description")}</Text>
-      <Button variant="ghost" size="sm" onPress={clearFilters}>
+    <SidebarEmptyStateCard
+      testID="sidebar-filter-empty-state"
+      title={t("sidebar.filterEmpty.title")}
+      description={t("sidebar.filterEmpty.description")}
+    >
+      <Button variant="secondary" size="xs" onPress={clearFilters}>
         {t("sidebar.filterEmpty.clear")}
       </Button>
-    </View>
+    </SidebarEmptyStateCard>
   );
 }
 
@@ -47,40 +71,44 @@ export function SidebarProjectEmptyState({
   const { t } = useTranslation();
 
   return (
-    <View style={styles.container} testID="sidebar-project-empty-state">
-      <Text style={styles.title}>{t("sidebar.project.empty.title")}</Text>
-      <Text style={styles.description}>{t("sidebar.project.empty.description")}</Text>
-      <Button variant="ghost" size="sm" leftIcon={Plus} onPress={onAddProject}>
+    <SidebarEmptyStateCard
+      testID="sidebar-project-empty-state"
+      title={t("sidebar.project.empty.title")}
+      description={t("sidebar.project.empty.description")}
+    >
+      <Button variant="secondary" size="xs" leftIcon={Plus} onPress={onAddProject}>
         {t("sidebar.actions.addProject")}
       </Button>
-      <Button variant="ghost" size="sm" leftIcon={Import} onPress={onImportSession}>
+      <Button variant="outline" size="xs" leftIcon={Import} onPress={onImportSession}>
         {t("importSession.title")}
       </Button>
-    </View>
+    </SidebarEmptyStateCard>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  container: {
-    marginHorizontal: theme.spacing[2],
-    marginTop: theme.spacing[4],
-    paddingTop: theme.spacing[6],
-    paddingBottom: theme.spacing[4],
-    paddingHorizontal: theme.spacing[4],
+  card: {
+    marginTop: theme.spacing[3],
+    padding: theme.spacing[4],
+    borderWidth: 1,
+    borderColor: theme.colors.border,
     borderRadius: theme.borderRadius.lg,
-    backgroundColor: theme.colors.surface0,
-    alignItems: "center",
-    gap: theme.spacing[3],
+  },
+  copy: {
+    gap: theme.spacing[1],
+  },
+  actions: {
+    flexDirection: "row",
+    gap: theme.spacing[2],
+    marginTop: theme.spacing[4],
   },
   title: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.medium,
-    textAlign: "center",
+    fontWeight: theme.fontWeight.normal,
   },
   description: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
-    textAlign: "center",
   },
 }));

packages/app/src/components/sidebar/workspace-trailing/index.tsx

@@ -4,7 +4,7 @@ import { DiffStat } from "@/components/diff-stat";
 import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
 import { useAppSettings } from "@/hooks/use-settings";
 import type { SidebarWorkspaceTrailing } from "@/hooks/use-settings";
-import { useCompactTimeAgo } from "@/hooks/use-compact-time-ago";
+import { useCompactTimeAgo } from "@/hooks/use-time-ago";
 
 export type { SidebarWorkspaceTrailing };
 

packages/app/src/components/ui/pane-content-toolbar.tsx

@@ -56,6 +56,8 @@ interface ToolbarButtonCommonProps extends Omit<
 > {
   children: ReactNode;
   label: string;
+  /** What the tooltip says when it is not the label, e.g. a status. Defaults to the label. */
+  tooltip?: ReactNode;
   selected?: boolean;
   compact?: boolean;
   shortcut?: ShortcutKey[][] | null;
@@ -76,6 +78,7 @@ type ToolbarButtonProps = ToolbarButtonCommonProps &
 export function ToolbarButton({
   children,
   label,
+  tooltip: tooltipBody,
   selected = false,
   compact = false,
   shortcut,
@@ -105,7 +108,7 @@ export function ToolbarButton({
   const tooltip = (
     <TooltipContent side={tooltipSide} align="center" offset={8}>
       <View style={styles.tooltipRow}>
-        <Text style={styles.tooltipText}>{label}</Text>
+        {tooltipBody ?? <Text style={styles.tooltipText}>{label}</Text>}
         {shortcut ? <Shortcut chord={shortcut} /> : null}
       </View>
     </TooltipContent>

packages/app/src/components/workspace-setup-dialog.tsx

@@ -462,7 +462,7 @@ export function WorkspaceSetupDialog() {
             cwd={sourceDirectory}
             clearDraft={chatDraft.clear}
             autoFocus
-            commandDraftConfig={composerState?.commandDraftConfig}
+            commandDraft={composerState?.commandDraft}
             agentControls={agentControlsWithDisabled}
             inputWrapperStyle={styles.composerInputWrapper}
           />

packages/app/src/composer/agent-controls/index.tsx

@@ -1357,6 +1357,10 @@ function DesktopFeatureItem({
   if (feature.type === "select") {
     const FeatureIcon = getAgentFeatureIcon(feature.icon);
     const selectedOption = feature.options.find((o) => o.id === feature.value);
+    const iconOnly = feature.desktopTrigger === "icon";
+    const tooltip = iconOnly
+      ? `${feature.label}: ${selectedOption?.label ?? feature.label}`
+      : getFeatureTooltip(feature);
     return (
       <>
         <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
@@ -1367,15 +1371,16 @@ function DesktopFeatureItem({
               surface="toolbar"
               label={feature.label}
               value={selectedOption?.label ?? feature.label}
+              showToolbarLabel={!iconOnly}
               open={openSelector === featureSelector}
               disabled={disabled}
               onPress={handleSelectPress}
-              accessibilityLabel={getFeatureTooltip(feature)}
+              accessibilityLabel={tooltip}
               testID={`agent-feature-${feature.id}`}
             />
           </TooltipTrigger>
           <TooltipContent side="top" align="center" offset={8}>
-            <Text style={styles.tooltipText}>{getFeatureTooltip(feature)}</Text>
+            <Text style={styles.tooltipText}>{tooltip}</Text>
           </TooltipContent>
         </Tooltip>
         <Combobox

packages/app/src/composer/dock/index.native.tsx

@@ -2,7 +2,8 @@ import { ComposerDockBackground } from "./internal/background";
 export { ComposerDockBackground } from "./internal/background";
 import { ScrollView } from "@/components/ui/scroll-view";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { HEADER_INNER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { HEADER_INNER_HEIGHT } from "@/constants/layout";
+import { resolveContentMaxWidth, useAppSettings } from "@/hooks/use-settings";
 import { KeyboardTranslateView } from "@/keyboard/shift";
 import { createContext, useCallback, useContext, type ReactNode } from "react";
 import { View, type LayoutChangeEvent, type ViewProps, StyleSheet } from "react-native";
@@ -89,6 +90,7 @@ export function ComposerDock({
   centered = false,
 }: ComposerDockProps) {
   const insets = useSafeAreaInsets();
+  const contentMaxWidth = resolveContentMaxWidth(useAppSettings().settings);
   // Preserve the existing centered form's visual balance on tablets.
   const bottomInset = centered ? HEADER_INNER_HEIGHT + 24 : 0;
   if (centered) {
@@ -98,7 +100,7 @@ export function ComposerDock({
         bottomInset={bottomInset}
         centered
       >
-        <KeyboardTranslateView style={dockStyles.centered}>
+        <KeyboardTranslateView style={[dockStyles.centered, { maxWidth: contentMaxWidth }]}>
           <ComposerViewportContent style={dockStyles.composer}>
             <ScrollView style={dockStyles.setup} keyboardShouldPersistTaps="handled">
               {content}
@@ -137,13 +139,15 @@ export function ComposerDock({
   );
 }
 
+// Plain React Native styles: these land on Reanimated views, which must not carry
+// theme-driven Unistyles (docs/unistyles.md). The content width arrives inline.
 const dockStyles = StyleSheet.create({
   viewport: { flex: 1, overflow: "hidden" },
   surface: { flex: 1 },
   content: { flex: 1, justifyContent: "flex-end" },
   composer: { width: "100%", flexShrink: 1 },
   centeredViewport: { flex: 1, alignItems: "center", justifyContent: "center" },
-  centered: { flexShrink: 1, width: "100%", maxWidth: MAX_CONTENT_WIDTH },
+  centered: { flexShrink: 1, width: "100%" },
   // Reserve the composer's own capped height before the setup scroll view shrinks.
   centeredComposer: { width: "100%", flexShrink: 0 },
   setup: { flexGrow: 0, flexShrink: 1, minHeight: 0 },

packages/app/src/composer/dock/index.tsx

@@ -1,8 +1,9 @@
 export { ComposerDockBackground } from "./internal/background";
 import { ScrollView } from "@/components/ui/scroll-view";
 import type { ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
-import { HEADER_INNER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 
 interface ComposerDockProps {
   children: [ReactNode, ReactNode, ReactNode?];
@@ -35,7 +36,7 @@ export function ComposerDock({
   );
 }
 
-const styles = StyleSheet.create({
+const styles = StyleSheet.create((theme) => ({
   surface: { flex: 1, overflow: "hidden" },
   content: { flex: 1, justifyContent: "flex-end" },
   composer: { width: "100%", flexShrink: 1 },
@@ -45,7 +46,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingBottom: HEADER_INNER_HEIGHT + 24,
   },
-  form: { flexShrink: 1, width: "100%", maxWidth: MAX_CONTENT_WIDTH },
+  form: { flexShrink: 1, width: "100%", maxWidth: theme.contentMaxWidth },
   centeredComposer: { flexShrink: 0 },
   setup: { flexGrow: 0, flexShrink: 1, minHeight: 0 },
-});
+}));

packages/app/src/composer/draft/input-draft.live.test.tsx

@@ -198,12 +198,15 @@ describe("useAgentInputDraft live contract", () => {
     });
 
     expect(getLatest().composerState?.agentControls.selectedProvider).toBe("codex");
-    expect(getLatest().composerState?.commandDraftConfig).toEqual({
-      provider: "codex",
-      cwd: "/repo",
-      modeId: "auto",
-      model: "gpt-5.4",
-      thinkingOptionId: "high",
+    expect(getLatest().composerState?.commandDraft).toEqual({
+      status: "ready",
+      config: {
+        provider: "codex",
+        cwd: "/repo",
+        modeId: "auto",
+        model: "gpt-5.4",
+        thinkingOptionId: "high",
+      },
     });
 
     const hydratedTextReplacement = getLatest().textReplacement;

packages/app/src/composer/draft/input-draft.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { hasDraftContent, resolveDraftKey } from "./input-draft-core";
 import {
-  buildDraftCommandConfig,
+  buildDraftCommandTarget,
   resolveEffectiveComposerModelId,
   resolveEffectiveComposerThinkingOptionId,
 } from "@/provider-selection/provider-selection";
@@ -124,46 +124,55 @@ describe("resolveEffectiveComposerThinkingOptionId", () => {
   });
 });
 
-describe("buildDraftComposerCommandConfig", () => {
-  it("returns undefined when cwd is empty", () => {
+describe("buildDraftCommandTarget", () => {
+  const codexSelection = {
+    provider: "codex",
+    modelId: "gpt-5.4",
+    modeId: "auto",
+    thinkingOptionId: "high",
+    availableModels: [],
+    modeOptions: [{ id: "auto", label: "Auto" }],
+  };
+
+  it("needs a project when cwd is empty", () => {
     expect(
-      buildDraftCommandConfig({
-        selection: {
-          provider: "codex",
-          modelId: "gpt-5.4",
-          modeId: "",
-          thinkingOptionId: "",
-          availableModels: [],
-          modeOptions: [],
-        },
+      buildDraftCommandTarget({
+        selection: codexSelection,
         cwd: "  ",
         effectiveModelId: "gpt-5.4",
         effectiveThinkingOptionId: "high",
       }),
-    ).toBeUndefined();
+    ).toEqual({ status: "needs-project" });
+  });
+
+  it("needs a provider when none is selected", () => {
+    expect(
+      buildDraftCommandTarget({
+        selection: { ...codexSelection, provider: null },
+        cwd: "/repo",
+        effectiveModelId: "",
+        effectiveThinkingOptionId: "",
+      }),
+    ).toEqual({ status: "needs-provider" });
   });
 
   it("builds the draft command config from derived composer state", () => {
     expect(
-      buildDraftCommandConfig({
-        selection: {
-          provider: "codex",
-          modelId: "gpt-5.4",
-          modeId: "auto",
-          thinkingOptionId: "high",
-          availableModels: [],
-          modeOptions: [{ id: "auto", label: "Auto" }],
-        },
+      buildDraftCommandTarget({
+        selection: codexSelection,
         cwd: "/repo",
         effectiveModelId: "gpt-5.4",
         effectiveThinkingOptionId: "high",
       }),
     ).toEqual({
-      provider: "codex",
-      cwd: "/repo",
-      modeId: "auto",
-      model: "gpt-5.4",
-      thinkingOptionId: "high",
+      status: "ready",
+      config: {
+        provider: "codex",
+        cwd: "/repo",
+        modeId: "auto",
+        model: "gpt-5.4",
+        thinkingOptionId: "high",
+      },
     });
   });
 });

packages/app/src/composer/draft/input-draft.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { UserComposerAttachment } from "@/attachments/types";
 import type { TextReplacement } from "@/composer/types";
 import type { DraftAgentControlsProps } from "@/composer/agent-controls";
-import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
+import type { DraftCommandTarget } from "@/hooks/use-agent-commands-query";
 import {
   useAgentFormState,
   type CreateAgentInitialValues,
@@ -16,7 +16,7 @@ import {
   type DraftKeyInput,
 } from "@/composer/draft/input-draft-core";
 import {
-  buildDraftCommandConfig,
+  buildDraftCommandTarget,
   resolveEffectiveComposerModelId,
   resolveEffectiveComposerThinkingOptionId,
   type ProviderSelectionState,
@@ -50,7 +50,7 @@ type DraftComposerState = UseAgentFormStateResult & {
   effectiveThinkingOptionId: string;
   featureValues: Record<string, unknown> | undefined;
   agentControls: DraftAgentControlsProps;
-  commandDraftConfig: DraftCommandConfig | undefined;
+  commandDraft: DraftCommandTarget;
 };
 
 export interface AgentInputDraft {
@@ -287,19 +287,16 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
     [applyProfileFeatureValues, formState],
   );
 
-  const commandDraftConfig = useMemo(
+  const commandDraft = useMemo(
     () =>
-      composerOptions
-        ? buildDraftCommandConfig({
-            selection: providerSelection,
-            cwd: workingDir,
-            effectiveModelId,
-            effectiveThinkingOptionId,
-            featureValues: draftFeatureValues,
-          })
-        : undefined,
+      buildDraftCommandTarget({
+        selection: providerSelection,
+        cwd: workingDir,
+        effectiveModelId,
+        effectiveThinkingOptionId,
+        featureValues: draftFeatureValues,
+      }),
     [
-      composerOptions,
       effectiveModelId,
       effectiveThinkingOptionId,
       draftFeatureValues,
@@ -325,10 +322,10 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
         onSetFeature: setDraftFeatureValue,
         onApplyAgentProfile: applyDraftAgentProfile,
       }),
-      commandDraftConfig,
+      commandDraft,
     };
   }, [
-    commandDraftConfig,
+    commandDraft,
     composerOptions,
     effectiveModelId,
     effectiveThinkingOptionId,
@@ -358,7 +355,6 @@ export const __private__ = {
   resolveDraftKey,
   resolveEffectiveComposerModelId,
   resolveEffectiveComposerThinkingOptionId,
-  buildDraftCommandConfig,
-  buildDraftComposerCommandConfig: buildDraftCommandConfig,
+  buildDraftCommandTarget,
   buildDraftAgentControls,
 };

packages/app/src/composer/draft/workspace-tab.tsx

@@ -40,11 +40,7 @@ import {
   useWorkspaceAttachmentsStore,
 } from "@/attachments/workspace-attachments-store";
 import type { UserMessageImageAttachment } from "@/types/stream";
-import {
-  COMPACT_FORM_FACTOR_WIDTH,
-  MAX_CONTENT_WIDTH,
-  useIsCompactFormFactor,
-} from "@/constants/layout";
+import { COMPACT_FORM_FACTOR_WIDTH, useIsCompactFormFactor } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
 import {
   buildWorkspaceTabPersistenceKey,
@@ -682,7 +678,7 @@ export function WorkspaceDraftAgentTab({
             autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
             autoFocusKey={String(draftInput.attachmentFocusRequestId)}
             onFocusInput={handleFocusInputCallback}
-            commandDraftConfig={composerState.commandDraftConfig}
+            commandDraft={composerState.commandDraft}
             agentControls={composerAgentControls}
             isCompactLayout={isCompactComposerLayout}
           />
@@ -737,7 +733,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   importPillContent: {
     width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
+    maxWidth: theme.contentMaxWidth,
     flexDirection: "row",
   },
   errorContainer: {

packages/app/src/composer/index.tsx

@@ -41,13 +41,14 @@ import {
   Paperclip,
 } from "lucide-react-native";
 import * as Clipboard from "expo-clipboard";
-import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
+import { FOOTER_HEIGHT } from "@/constants/layout";
 import {
   AgentControls,
   DraftAgentControls,
   type DraftAgentControlsProps,
 } from "@/composer/agent-controls";
 import { ContextWindowMeter } from "@/components/context-window-meter";
+import { UsageComposerPill } from "@/usage";
 import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
 import { selectAgentTurnPresentation, useSessionStore } from "@/stores/session-store";
 import { useFilePicker } from "@/hooks/use-file-picker";
@@ -61,7 +62,7 @@ import {
 } from "./input/input";
 import type { ImageAttachment, MessagePayload, TextReplacement } from "./types";
 import { ICON_SIZE, type Theme } from "@/styles/theme";
-import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
+import type { DraftCommandTarget } from "@/hooks/use-agent-commands-query";
 import { encodeImages } from "@/utils/encode-images";
 import { focusWithRetries } from "@/utils/web-focus";
 import {
@@ -274,7 +275,6 @@ function buildAgentStateSelector(serverId: string, agentId: string) {
       contextWindowUsedTokens: agent?.lastUsage?.contextWindowUsedTokens ?? null,
       totalCostUsd: agent?.lastUsage?.totalCostUsd ?? null,
       model: agent?.model ?? null,
-      provider: agent?.provider ?? null,
     };
   };
 }
@@ -284,8 +284,6 @@ function renderContextWindowMeter(
   contextWindowUsedTokens: number | null,
   totalCostUsd: number | null,
   showPercentage: boolean,
-  serverId: string,
-  provider: string | null,
   pending: boolean,
   glyphSize: number,
 ): ReactElement | null {
@@ -299,8 +297,6 @@ function renderContextWindowMeter(
       usedTokens={contextWindowUsedTokens}
       totalCostUsd={totalCostUsd}
       showPercentage={showPercentage}
-      serverId={serverId}
-      provider={provider}
       pending={pending}
       glyphSize={glyphSize}
     />
@@ -977,8 +973,8 @@ interface ComposerProps {
   autoFocusKey?: string;
   /** Callback to expose a focus function to parent components (desktop only). */
   onFocusInput?: (focus: () => void) => void;
-  /** Optional draft context for listing commands before an agent exists. */
-  commandDraftConfig?: DraftCommandConfig;
+  /** Draft context for listing commands before an agent exists. Omitted for running agents. */
+  commandDraft?: DraftCommandTarget;
   /** Called when a message is about to be sent (any path: keyboard, dictation, queued). */
   onMessageSent?: () => void;
   onComposerHeightChange?: (height: number) => void;
@@ -1268,7 +1264,7 @@ function ComposerContentImpl({
   autoFocus = false,
   autoFocusKey,
   onFocusInput,
-  commandDraftConfig,
+  commandDraft,
   onMessageSent,
   onComposerHeightChange,
   onAttentionInputFocus,
@@ -2085,8 +2081,6 @@ function ComposerContentImpl({
         contextWindowUsedTokens,
         agentState.totalCostUsd,
         false,
-        serverId,
-        agentState.provider,
         contextWindowPending,
         contextWindowMeterGlyphSize,
       ),
@@ -2094,15 +2088,18 @@ function ComposerContentImpl({
       contextWindowMaxTokens,
       contextWindowUsedTokens,
       agentState.totalCostUsd,
-      serverId,
-      agentState.provider,
       contextWindowPending,
       contextWindowMeterGlyphSize,
     ],
   );
   const beforeVoiceContent = useMemo(
-    () => resolveContextWindowPlacement(contextWindowMeter, hasAgent),
-    [contextWindowMeter, hasAgent],
+    () => (
+      <>
+        {resolveContextWindowPlacement(contextWindowMeter, hasAgent)}
+        {hasAgent ? <UsageComposerPill serverId={serverId} agentId={agentId} /> : null}
+      </>
+    ),
+    [agentId, contextWindowMeter, hasAgent, serverId],
   );
 
   const hasGithubAttachment = useMemo(
@@ -2349,7 +2346,7 @@ function ComposerContentImpl({
       setUserInput: replaceUserInput,
       serverId,
       agentId,
-      draftConfig: commandDraftConfig,
+      draft: commandDraft,
       canExecuteClientSlashCommand: buildOutgoingAttachments(attachments).length === 0,
       onClientSlashCommand: runClientSlashCommand,
       pluginClientSlashCommands,
@@ -2358,7 +2355,7 @@ function ComposerContentImpl({
       replaceUserInput,
       serverId,
       agentId,
-      commandDraftConfig,
+      commandDraft,
       buildOutgoingAttachments,
       attachments,
       runClientSlashCommand,
@@ -2545,7 +2542,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
   inputAreaContent: {
     flexShrink: 1,
     width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
+    maxWidth: theme.contentMaxWidth,
     gap: theme.spacing[3],
   },
   messageInputContainer: {

packages/app/src/composer/tracks.tsx

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/menu";
 import { StatusRing } from "@/components/status-ring";
 import { STATUS_RING_HALO_INSET } from "@/components/status-ring/geometry";
-import { MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
 import { getStatusDotColor } from "@/utils/status-dot-color";
 import { STATUS_INDICATOR_FILLED_DOT_SIZE } from "@/utils/status-indicator-geometry";
@@ -328,7 +327,7 @@ const styles = StyleSheet.create((theme) => {
     },
     track: {
       width: "100%",
-      maxWidth: MAX_CONTENT_WIDTH,
+      maxWidth: theme.contentMaxWidth,
       flexDirection: "row",
       alignItems: "center",
       gap: theme.spacing[1],