fix(app): keep the next queued message queued when one is sent now

Sending a queued message while the agent runs can replace its turn: the
daemon cancels the running turn and starts a new one for the sent message
(Interrupt, Queue-mode send now, and Steer on providers that cannot steer).
The app read the cancel as the agent stopping and immediately sent the next
queued message, which then replaced the turn just started for the first.

The queue now only drains when the agent is idle by the same rule the UI
uses for "working": no open turn and no sent message still waiting for the
provider to pick it up.

.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

CHANGELOG.md

@@ -1,33 +1,5 @@
 # Changelog
 
-## 0.10.2 - 2026-09-30
-
-### Fixed
-
-- Fixed OpenCode v2 turns longer than five minutes failing with `UND_ERR_HEADERS_TIMEOUT` ([#5674](https://github.com/getpaseo/paseo/pull/5674))
-- Fixed the context meter staying empty during OpenCode v2 turns and disappearing after them ([#5710](https://github.com/getpaseo/paseo/pull/5710) by [@mcowger](https://github.com/mcowger))
-- Fixed OpenCode v2 question cards showing only the header and offering no typed answer ([#5679](https://github.com/getpaseo/paseo/pull/5679))
-- Fixed OpenCode v2 patch edits from GPT models showing as a raw Patch card instead of an edit diff ([#5696](https://github.com/getpaseo/paseo/pull/5696))
-- Fixed completed OpenCode v2 edits showing no diff ([#5609](https://github.com/getpaseo/paseo/pull/5609))
-
-## 0.10.1 - 2026-09-29
-
-### Added
-
-- Added Claude Sonnet 5.5 for Claude Code 2.1.284 and newer ([#5583](https://github.com/getpaseo/paseo/pull/5583) by [@yangqi](https://github.com/yangqi))
-
-### Fixed
-
-- Fixed OpenCode chats failing with "Variant unavailable" after switching to a model without the selected thinking level ([#5587](https://github.com/getpaseo/paseo/pull/5587))
-- Fixed rewinding a Codex chat dropping its custom provider and Paseo tools ([#5345](https://github.com/getpaseo/paseo/pull/5345) by [@zbaibg](https://github.com/zbaibg))
-- Fixed streamed replies joining lines of code blocks and Mermaid diagrams until the chat reloads ([#5577](https://github.com/getpaseo/paseo/pull/5577))
-- Fixed a subagent opened from a split pane opening in a different pane ([#5451](https://github.com/getpaseo/paseo/pull/5451))
-- Fixed archiving a custom Codex provider's agent leaving its session in Import session ([#5572](https://github.com/getpaseo/paseo/pull/5572))
-- Fixed the `/` menu of a custom Codex provider with its own `CODEX_HOME` listing the daemon's prompts instead of its own ([#5450](https://github.com/getpaseo/paseo/pull/5450))
-- Fixed a background `send_agent_prompt` returning `idle` for a prompt the agent accepted ([#5386](https://github.com/getpaseo/paseo/pull/5386))
-- Fixed Windows file-link tooltips showing the full path for files inside the workspace ([#1987](https://github.com/getpaseo/paseo/pull/1987))
-- Fixed terminal profiles that run `cursor-agent` showing the generic terminal icon ([#5379](https://github.com/getpaseo/paseo/pull/5379))
-
 ## 0.10.0 - 2026-09-28
 
 ### Added

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

@@ -99,8 +99,6 @@ Pi RPC extension UI dialog requests (`select`, `input`, `editor`, `confirm`) are
 
 OpenCode adapters target v1.14.46 and v2.0.10. V2 rejects binaries older than the tested 2.0.10 SDK at runtime selection. Runtime selection uses the configured command and environment. A recognized version is cached until provider configuration reload; a failed, timed-out, or unrecognized probe retains the v1 path and retries detection on the next operation. Load v2 code and materialize its plugin only after positive v2 selection; v1 sessions remain undecorated. Keep upstream SDK types inside the version-specific adapter. OpenCode owns storage migration; a missing native session must fail resume rather than create a replacement. V2 has no native archive/unarchive operation: archiving affects Paseo only. V1 retains native archiving.
 
-Use OpenCode v2 execution events to trigger turn completion, with active-state and durable-log reconciliation after admission, reconnect, and while a turn remains active. Do not use `session.wait`: a healthy turn exceeding Node's HTTP headers deadline produces a transport error while OpenCode keeps working. The live event feed has no replay, and shutdown interruption preserves the previous idle outcome, so the session snapshot alone cannot recover missed execution events. Quiet streams are healthy: v2 heartbeats are SSE comments, not application events.
-
 V2.0.4 also removed the activation endpoint that gated a cold location, and a cold location registers its config-derived commands, skills, and providers asynchronously. Wait until `plugin.list` returns a populated inventory before reading the catalog or commands; an empty inventory means the location is still warming. Fail when the readiness deadline expires, including when an inventory request stalls.
 
 Paseo installs its OpenCode tool bridge through `OPENCODE_CONFIG_CONTENT`. V1 accepts a plugin file; v2 silently skips configured files and requires a package directory with a server entry point. Both versions use the daemon's private loopback bridge for caller-scoped tools. Bridge context lives only in daemon memory and is removed when the Paseo session closes. The content-addressed plugin artifacts contain no session data or secrets. V2 also needs this plugin when native Paseo tools are disabled: its prompt API has no structured-output format, so the plugin supplies a schema-validated final-answer tool.
@@ -197,26 +195,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-zhJ9vf0n5wmOP3Hg20vua91TWJcOIbm6kTSXCcryOlg=

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-message-submission.spec.ts

@@ -1282,6 +1282,49 @@ test.describe("Agent message submission", () => {
     }
   });
 
+  for (const behavior of ["Steer", "Interrupt"] as const) {
+    test(`keeps the next queued message queued after sending one now with ${behavior}`, async ({
+      page,
+    }, testInfo) => {
+      test.setTimeout(120_000);
+      const agent = await startRunningMockAgent(page, {
+        prefix: `queued-send-now-${behavior.toLowerCase()}-${testInfo.workerIndex}-`,
+        model: "one-minute-stream",
+        prompt: "Keep this turn active while the user sends a queued message now.",
+      });
+      const firstPrompt = "Send the first queued message now.";
+      const secondPrompt = "Keep the second queued message queued.";
+      try {
+        await (behavior === "Steer"
+          ? configureSteerInSettings(page)
+          : configureInterruptInSettings(page));
+        await page.goBack();
+        await expectComposerVisible(page);
+        await expectAgentReadyToInterrupt(page);
+        await queueMessage(page, firstPrompt);
+        await queueMessage(page, secondPrompt);
+        const sendNow = page.getByRole("button", { name: "Send queued message now" });
+        await expect(sendNow).toHaveCount(2);
+
+        await sendNow.first().click();
+
+        await expect(page.getByTestId("user-message").filter({ hasText: firstPrompt })).toHaveCount(
+          1,
+        );
+        await expect(
+          page.getByTestId("user-message").filter({ hasText: firstPrompt }),
+        ).toHaveAttribute("aria-busy", "false");
+        await expectAgentReadyToInterrupt(page);
+        await expect(sendNow).toHaveCount(1);
+        await expect(
+          page.getByTestId("user-message").filter({ hasText: secondPrompt }),
+        ).toHaveCount(0);
+      } finally {
+        await agent.cleanup();
+      }
+    });
+  }
+
   test("replays Claude-shaped steering inside one active turn", async ({ page }, testInfo) => {
     test.setTimeout(120_000);
     await replaySteeredSleepTurnInBrowser(page, testInfo, "claude");

packages/app/e2e/browser/file-editing.spec.ts

@@ -7,11 +7,7 @@ import {
   expectFileTabOpen,
 } from "../support/helpers/file-explorer";
 import { installDaemonWebSocketGate } from "../support/helpers/daemon-websocket-gate";
-import { gotoAppShell } from "../support/helpers/app";
 import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
-import { seedWorkspace } from "../support/helpers/seed-client";
-import { getServerId } from "../support/helpers/server-id";
-import { waitForSidebarHydration } from "../support/helpers/workspace-ui";
 
 const APP_SETTINGS_KEY = "@paseo:app-settings";
 
@@ -96,40 +92,6 @@ async function seedAgentWithFileLink(input: LinkedFile) {
 }
 
 test.describe("CodeMirror workspace file editing", () => {
-  test("shows an absolute POSIX assistant file link relative to the workspace on hover", async ({
-    page,
-  }) => {
-    const workspace = await seedWorkspace({ repoPrefix: "file-link-tooltip-" });
-    const filePath = path.join(workspace.repoPath, "src", "target.ts");
-    try {
-      const agent = await workspace.client.createAgent({
-        provider: "mock",
-        cwd: workspace.repoPath,
-        workspaceId: workspace.workspaceId,
-        title: "Absolute file link tooltip",
-        modeId: "load-test",
-        model: "e2e-fast-stream",
-        initialPrompt: "Show the file link",
-        featureValues: { mockAssistantResponse: `[Open target](${filePath}:42-45)` },
-      });
-      await gotoAppShell(page);
-      await waitForSidebarHydration(page);
-      const workspaceRow = page.getByTestId(
-        `sidebar-workspace-row-${getServerId()}:${workspace.workspaceId}`,
-      );
-      await expect(workspaceRow).toBeVisible({ timeout: 30_000 });
-      await workspaceRow.click();
-      await page.getByTestId(`workspace-tab-agent_${agent.id}`).filter({ visible: true }).click();
-
-      const fileLink = page.getByRole("link", { name: "Open target" }).first();
-      await expect(fileLink).toBeVisible({ timeout: 15_000 });
-      await fileLink.hover();
-      await expect(page.getByText("src/target.ts:42-45", { exact: true })).toBeVisible();
-    } finally {
-      await workspace.cleanup();
-    }
-  });
-
   test("renders a lockfile-sized read-only source with a bounded CodeMirror DOM", async ({
     page,
   }) => {

packages/app/e2e/browser/opencode-model-switch.real.spec.ts

@@ -1,78 +0,0 @@
-import { mkdtempSync } from "node:fs";
-import { tmpdir } from "node:os";
-import path from "node:path";
-import { test, expect, type Page } from "../support/fixtures";
-import { launchAgent, cleanupRewindFlow, type AgentHandle } from "../support/helpers/rewind-flow";
-import { submitMessage } from "../support/helpers/composer";
-
-const binary = process.env.OPENCODE_TEST_BINARY ?? "opencode";
-test.use({
-  e2eDaemonConfig: {
-    version: 1,
-    agents: { providers: { opencode: { enabled: true, command: [binary] } } },
-  },
-});
-
-async function selectMedium(page: Page) {
-  await page
-    .getByRole("button", { name: /^Select thinking option/ })
-    .filter({ visible: true })
-    .click();
-  await page.getByText("Medium", { exact: true }).filter({ visible: true }).click();
-  await expect(
-    page
-      .getByRole("button", { name: "Select thinking option (Medium)", exact: true })
-      .filter({ visible: true }),
-  ).toBeVisible();
-}
-async function selectLongcat(page: Page) {
-  await page
-    .getByRole("button", { name: /^Select model \(/ })
-    .filter({ visible: true })
-    .click();
-  await page
-    .getByText("LongCat 2.5 Preview Free", { exact: true })
-    .filter({ visible: true })
-    .click();
-}
-async function askForReply(handle: AgentHandle) {
-  await submitMessage(handle.page, "Reply exactly OK. Do not use tools.");
-  return handle.client.waitForFinish(handle.agentId, 120_000);
-}
-
-test("switching an existing OpenCode session clears unsupported thinking", async ({
-  page,
-}, testInfo) => {
-  test.setTimeout(240_000);
-  const cwd = mkdtempSync(path.join(tmpdir(), "paseo-variant-ui-"));
-  let handle: AgentHandle | undefined;
-  try {
-    handle = await launchAgent({
-      page,
-      cwd,
-      provider: "opencode",
-      mode: "full-access",
-      providerConfig: { model: "opencode/space-bunny-free" },
-    });
-    await selectMedium(page);
-    expect((await askForReply(handle)).status).toBe("idle");
-    await selectLongcat(page);
-    await expect(
-      page.getByRole("button", { name: /^Select thinking option/ }).filter({ visible: true }),
-    ).toHaveCount(0);
-    const finish = await askForReply(handle);
-    const screenshot = testInfo.outputPath("model-switch.png");
-    await page.screenshot({ path: screenshot });
-    await testInfo.attach("After switching to Longcat", {
-      path: screenshot,
-      contentType: "image/png",
-    });
-    expect(finish.status).toBe("idle");
-    expect(finish.final?.lastError).toBeFalsy();
-    await expect(
-      page.getByTestId("assistant-message").filter({ visible: true }).last(),
-    ).toContainText("OK");
-  } finally {
-    await cleanupRewindFlow({ handle, cwd });
-  }
-});

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/subagent-origin-pane.spec.ts

@@ -1,149 +0,0 @@
-import { writeFile } from "node:fs/promises";
-import path from "node:path";
-import { expect, test, type Page } from "../support/fixtures";
-import { runWorkspaceActionFromCommandCenter } from "../support/helpers/command-center-workspace-actions";
-import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
-import { seedWorkspace } from "../support/helpers/seed-client";
-import { openSubagentsTrack, seedParentWithSubagent } from "../support/helpers/subagents";
-
-const SETTINGS_KEY = "@paseo:app-settings";
-
-async function openParentInRightPane(page: Page, parentId: string, workspaceId: string) {
-  await page.setViewportSize({ width: 1400, height: 900 });
-  await openAgentRoute(page, { workspaceId, agentId: parentId });
-  await expect(page.getByTestId(`workspace-tab-agent_${parentId}`)).toBeVisible();
-  await page.getByTestId("workspace-pane-main").getByTestId("workspace-new-tab-button").click();
-  await page.getByTestId("workspace-new-tab-menu-agent").click();
-  await page.getByTestId(`workspace-tab-agent_${parentId}`).click();
-  await runWorkspaceActionFromCommandCenter(page, "Split pane right");
-  await page
-    .getByTestId("workspace-pane-main")
-    .getByTestId(`workspace-tab-agent_${parentId}`)
-    .click();
-  await page.keyboard.press("Meta+Alt+Shift+ArrowRight");
-
-  const left = page.getByTestId("workspace-pane-main");
-  const right = page
-    .locator('[data-testid^="workspace-pane-"]')
-    .filter({ has: page.getByTestId(`workspace-tab-agent_${parentId}`) });
-  await expect(left).toBeVisible();
-  await expect(right).toBeVisible();
-  await expect(right).not.toHaveAttribute("data-testid", "workspace-pane-main");
-  await left.locator('[data-testid^="workspace-tab-draft_"]').click();
-  return { left, right };
-}
-
-test.beforeEach(async ({ page }) => {
-  await page.addInitScript(() => {
-    Object.defineProperty(navigator, "platform", { get: () => "MacIntel" });
-  });
-});
-
-test("a subagent opened from a right-pane parent stays with its parent when left has focus", async ({
-  page,
-}) => {
-  const workspace = await seedWorkspace({ repoPrefix: "subagent-origin-pane-" });
-  try {
-    const pair = await seedParentWithSubagent(workspace, {
-      parentTitle: "Right parent",
-      childTitle: "Child agent",
-    });
-    const { left, right } = await openParentInRightPane(page, pair.parent.id, pair.workspaceId);
-    await openSubagentsTrack(page);
-    await page.getByTestId(`subagents-track-row-${pair.child.id}`).click();
-
-    await expect(right.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toBeVisible();
-    await expect(left.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toHaveCount(0);
-  } finally {
-    await workspace.cleanup();
-  }
-});
-
-test("the side preference opens a right-pane parent's subagent in the side pane", async ({
-  page,
-}) => {
-  await page.addInitScript((key) => {
-    localStorage.setItem(key, JSON.stringify({ openInSidePane: { subagents: true } }));
-  }, SETTINGS_KEY);
-  const workspace = await seedWorkspace({ repoPrefix: "subagent-side-preference-" });
-  try {
-    const pair = await seedParentWithSubagent(workspace, {
-      parentTitle: "Right parent",
-      childTitle: "Child agent",
-    });
-    const { left, right } = await openParentInRightPane(page, pair.parent.id, pair.workspaceId);
-    await openSubagentsTrack(page);
-    await page.getByTestId(`subagents-track-row-${pair.child.id}`).click();
-
-    const childPane = page
-      .locator('[data-testid^="workspace-pane-"]')
-      .filter({ has: page.getByTestId(`workspace-tab-agent_${pair.child.id}`) });
-    await expect(childPane).toBeVisible();
-    expect(await childPane.getAttribute("data-testid")).not.toBe(
-      await right.getAttribute("data-testid"),
-    );
-    await expect(childPane).not.toHaveAttribute("data-testid", "workspace-pane-main");
-    await expect(left.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toHaveCount(0);
-  } finally {
-    await workspace.cleanup();
-  }
-});
-
-test("opening an already-tabbed subagent reveals its left tab without a duplicate", async ({
-  page,
-}) => {
-  const workspace = await seedWorkspace({ repoPrefix: "subagent-existing-tab-" });
-  try {
-    const pair = await seedParentWithSubagent(workspace, {
-      parentTitle: "Right parent",
-      childTitle: "Child agent",
-    });
-    const { left, right } = await openParentInRightPane(page, pair.parent.id, pair.workspaceId);
-    await openSubagentsTrack(page);
-    await page.getByTestId(`subagents-track-row-${pair.child.id}`).click();
-    await expect(right.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toBeVisible();
-    await page.keyboard.press("Meta+Alt+Shift+ArrowLeft");
-    await expect(left.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toBeVisible();
-    await right.getByTestId(`workspace-tab-agent_${pair.parent.id}`).click();
-    await openSubagentsTrack(page);
-    await page.getByTestId(`subagents-track-row-${pair.child.id}`).click();
-
-    await expect(left.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toBeVisible();
-    await expect(right.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toHaveCount(0);
-    await expect(page.getByTestId(`workspace-tab-agent_${pair.child.id}`)).toHaveCount(1);
-  } finally {
-    await workspace.cleanup();
-  }
-});
-
-test("a preferred chat file link still opens beside its right-pane agent", async ({ page }) => {
-  const target = "linked.ts:3";
-  const workspace = await seedMockAgentWorkspace({
-    repoPrefix: "chat-file-origin-pane-",
-    title: "File link parent",
-    initialPrompt: [
-      "Generate a title and a git branch name for a coding agent from the user prompt and attachments.",
-      "Return JSON only with fields 'title' and 'branch'.",
-      "",
-      "<user-prompt>",
-      `Open \`${target}\` now`,
-      "</user-prompt>",
-    ].join("\n"),
-  });
-  try {
-    await writeFile(path.join(workspace.cwd, "linked.ts"), "one\ntwo\nthree\n", "utf8");
-    const { left, right } = await openParentInRightPane(
-      page,
-      workspace.agentId,
-      workspace.workspaceId,
-    );
-    const fileLink = right.getByText(target, { exact: true });
-    await expect(fileLink).toBeVisible({ timeout: 15_000 });
-    await fileLink.click();
-
-    await expect(right.getByTestId("workspace-tab-file_linked.ts")).toBeVisible();
-    await expect(left.getByTestId("workspace-tab-file_linked.ts")).toHaveCount(0);
-  } finally {
-    await workspace.cleanup();
-  }
-});

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/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/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/presentation.test.ts

@@ -210,17 +210,6 @@ describe("stream presentation through installed plugins", () => {
     expect(result.head).toMatchObject([{ text: "```ts\nconst a = 1;\n\nconst b = 2;" }]);
   });
 
-  // Codex streams a line break and the next line's indent as their own chunks.
-  it("keeps a line break when a chunk ends in the next line's indent", () => {
-    const harness = streamHarness();
-    harness.send(assistant("```mermaid\nflowchart TD\n    A[Start] --> B[Review]\n"));
-    harness.send(assistant("   "));
-    const result = harness.send(assistant(" B --> C[Finish]\n```"));
-    expect(result.head).toMatchObject([
-      { text: "```mermaid\nflowchart TD\n    A[Start] --> B[Review]\n    B --> C[Finish]\n```" },
-    ]);
-  });
-
   // One rendering path: a fetched message is the same block group as a streamed one,
   // which is what lets find, scroll-to-message and history reveal address it by id.
   // A link reference definition stays with the paragraph that uses it, so the split

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

@@ -112,10 +112,8 @@ export function createStreamPresentation() {
       const index = prefix.length + offset;
       let blockText = text;
       if (offset === textBlocks.length - 1) {
-        // The split drops trailing blank lines, including a line break followed only
-        // by the next line's indent. Keep them so the next append continues that line.
-        const trailingBlankLines = /\n\s*$/.exec(item.text)?.[0] ?? "";
-        blockText += trailingBlankLines;
+        const trailingNewlines = /\n+$/.exec(item.text)?.[0] ?? "";
+        blockText += trailingNewlines;
       }
       const existing = previous?.[index];
       const id = `${item.id}:block:${index}`;

packages/app/src/app/_layout.tsx

@@ -860,6 +860,7 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
       pathname === "/new" ||
       pathname === "/sessions" ||
       pathname === "/schedules" ||
+      pathname === "/usage" ||
       routeHasKnownHost);
 
   return <AppContainer chromeEnabled={shouldShowAppChrome}>{children}</AppContainer>;
@@ -892,6 +893,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/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/assistant-file-links/link.tsx

@@ -10,7 +10,6 @@ import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import { markdownCopyDataSet } from "@/assistant-selection-copy/markup";
 import { useAssistantFileLinkResolverContext } from "./provider";
 import type { AssistantFileLinkSource } from "./resolver";
-import { formatFileLinkTooltipPath } from "./tooltip-path";
 import { useFileLink } from "./use-file-link";
 
 interface AssistantMarkdownLinkProps {
@@ -35,7 +34,7 @@ export function AssistantMarkdownLink({
   const { configRef } = useAssistantFileLinkResolverContext();
   const workspaceRoot = configRef.current.workspaceRoot;
   const tooltipPath = useMemo(
-    () => (target ? formatFileLinkTooltipPath({ target, workspaceRoot }) : null),
+    () => (target ? formatInlinePathTargetForTooltip(target, workspaceRoot) : null),
     [target, workspaceRoot],
   );
   const linkPress = useMemo<AssistantLinkPress>(
@@ -128,6 +127,38 @@ export function AssistantMarkdownCodeLink({
   );
 }
 
+function formatInlinePathTargetForTooltip(
+  target: { path: string; lineStart?: number; lineEnd?: number },
+  workspaceRoot: string | undefined,
+): string {
+  let result = relativizePathToWorkspace(target.path, workspaceRoot);
+  if (target.lineStart) {
+    result += `:${target.lineStart}`;
+    if (target.lineEnd && target.lineEnd !== target.lineStart) {
+      result += `-${target.lineEnd}`;
+    }
+  }
+  return result;
+}
+
+function relativizePathToWorkspace(filePath: string, workspaceRoot: string | undefined): string {
+  if (!workspaceRoot) {
+    return filePath;
+  }
+  const root = workspaceRoot.replace(/\/+$/, "");
+  if (!root) {
+    return filePath;
+  }
+  if (filePath === root) {
+    return ".";
+  }
+  const prefix = `${root}/`;
+  if (filePath.startsWith(prefix)) {
+    return filePath.slice(prefix.length);
+  }
+  return filePath;
+}
+
 interface AssistantInlineCodePathLinkProps {
   content: string;
   inheritedStyles: TextStyle;

packages/app/src/assistant-file-links/tooltip-path.test.ts

@@ -1,59 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { formatFileLinkTooltipPath } from "./tooltip-path";
-
-describe("formatFileLinkTooltipPath", () => {
-  it("shows a Windows file path relative to its workspace regardless of separators", () => {
-    expect(
-      formatFileLinkTooltipPath({
-        target: {
-          path: "C:/Users/me/repo/src/app.ts",
-          lineStart: 12,
-          lineEnd: 20,
-        },
-        workspaceRoot: "C:\\Users\\me\\repo",
-      }),
-    ).toBe("src/app.ts:12-20");
-    expect(
-      formatFileLinkTooltipPath({
-        target: { path: "C:/src/app.ts", lineStart: 12 },
-        workspaceRoot: "C:\\",
-      }),
-    ).toBe("src/app.ts:12");
-  });
-
-  it("shows the workspace root as a dot", () => {
-    expect(
-      formatFileLinkTooltipPath({
-        target: { path: "/Users/me/repo" },
-        workspaceRoot: "/Users/me/repo",
-      }),
-    ).toBe(".");
-    expect(
-      formatFileLinkTooltipPath({
-        target: { path: "C:/Users/Me/Repo/", lineStart: 4 },
-        workspaceRoot: "c:\\users\\me\\repo",
-      }),
-    ).toBe(".:4");
-  });
-
-  it("keeps an absolute path outside the workspace", () => {
-    expect(
-      formatFileLinkTooltipPath({
-        target: { path: "/Users/me/notes.md" },
-        workspaceRoot: "/Users/me/repo",
-      }),
-    ).toBe("/Users/me/notes.md");
-    expect(
-      formatFileLinkTooltipPath({
-        target: { path: "C:/Users/me/notes.md", lineStart: 8 },
-        workspaceRoot: "C:\\Users\\me\\repo",
-      }),
-    ).toBe("C:/Users/me/notes.md:8");
-  });
-
-  it("keeps the target path when the workspace root is unavailable", () => {
-    expect(formatFileLinkTooltipPath({ target: { path: "src/app.ts", lineStart: 12 } })).toBe(
-      "src/app.ts:12",
-    );
-  });
-});

packages/app/src/assistant-file-links/tooltip-path.ts

@@ -1,30 +0,0 @@
-import {
-  isWorkspaceRootPath,
-  resolveWorkspaceFilePaths,
-  type WorkspaceFileLocation,
-} from "@/workspace/file-open";
-
-interface FormatFileLinkTooltipPathInput {
-  target: WorkspaceFileLocation;
-  workspaceRoot?: string;
-}
-
-export function formatFileLinkTooltipPath({
-  target,
-  workspaceRoot,
-}: FormatFileLinkTooltipPathInput): string {
-  const resolvedPaths = workspaceRoot
-    ? resolveWorkspaceFilePaths({ path: target.path, workspaceRoot })
-    : null;
-  const isWorkspaceRoot = workspaceRoot
-    ? isWorkspaceRootPath({ path: target.path, workspaceRoot })
-    : false;
-  let result = isWorkspaceRoot ? "." : (resolvedPaths?.relativePath ?? target.path);
-  if (target.lineStart) {
-    result += `:${target.lineStart}`;
-    if (target.lineEnd && target.lineEnd !== target.lineStart) {
-      result += `-${target.lineEnd}`;
-    }
-  }
-  return result;
-}

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
@@ -167,13 +144,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}
@@ -233,7 +204,6 @@ export function ContextWindowMeter({
               {t("contextWindow.sessionCost", { cost: formattedSessionCost })}
             </Text>
           ) : null}
-          <ProviderUsageTooltipSection view={providerUsageView} activeProviderId={provider} />
         </View>
       </TooltipContent>
     </Tooltip>

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/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/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/composer/index.tsx

@@ -48,6 +48,7 @@ import {
   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";
@@ -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}
     />
@@ -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(

packages/app/src/provider-usage/card.tsx

@@ -1,198 +0,0 @@
-import { useMemo } from "react";
-import { Text, View } from "react-native";
-import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { getProviderIcon } from "@/components/provider-icons";
-import { StatusBadge } from "@/components/ui/status-badge";
-import type { Theme } from "@/styles/theme";
-import { ProviderUsageBalanceBar } from "./balance-bar";
-import { formatAgo } from "./format";
-import type { ProviderUsage } from "./types";
-import { ProviderUsageWindowBar } from "./window-bar";
-
-interface ProviderUsageIconProps {
-  iconKey: string;
-  size: number;
-  color?: string;
-}
-
-function ProviderUsageIcon({ iconKey, size, color = "" }: ProviderUsageIconProps) {
-  const Icon = getProviderIcon(iconKey);
-  return <Icon size={size} color={color} />;
-}
-
-const ThemedProviderUsageIcon = withUnistyles(ProviderUsageIcon);
-
-const mutedIconColor = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
-
-function statusText(usage: ProviderUsage): string | null {
-  if (usage.status === "available") return null;
-  return usage.status === "error" ? "Error" : "Unavailable";
-}
-
-function footerText(usage: ProviderUsage): string | null {
-  const updated = formatAgo(usage.fetchedAt);
-  const parts = [usage.sourceLabel, updated ? `Updated ${updated}` : null].filter(
-    (part): part is string => typeof part === "string" && part.length > 0,
-  );
-  return parts.length > 0 ? parts.join(" · ") : null;
-}
-
-export function ProviderUsageCard({
-  usage,
-  compact = false,
-}: {
-  usage: ProviderUsage;
-  compact?: boolean;
-}) {
-  const status = statusText(usage);
-  const footer = footerText(usage);
-  const balances = usage.balances ?? [];
-  const details = usage.details ?? [];
-
-  const containerStyle = useMemo(
-    () => [styles.container, compact ? styles.containerCompact : styles.containerPadded],
-    [compact],
-  );
-  const dotStyle = useMemo(
-    () => [
-      styles.statusDot,
-      usage.status === "available" && styles.statusDotAvailable,
-      usage.status === "error" && styles.statusDotError,
-    ],
-    [usage.status],
-  );
-
-  return (
-    <View style={containerStyle}>
-      <View style={styles.header}>
-        <ThemedProviderUsageIcon iconKey={usage.providerId} size={14} uniProps={mutedIconColor} />
-        <Text style={styles.name} numberOfLines={1}>
-          {usage.displayName}
-        </Text>
-        {usage.planLabel ? <StatusBadge label={usage.planLabel} variant="muted" /> : null}
-        <View style={styles.headerSpacer} />
-        {status ? (
-          <View style={styles.statusRow}>
-            <View style={dotStyle} />
-            <Text style={styles.statusLabel}>{status}</Text>
-          </View>
-        ) : null}
-      </View>
-
-      {usage.error ? (
-        <Text style={styles.error} numberOfLines={3}>
-          {usage.error}
-        </Text>
-      ) : null}
-
-      {usage.windows.length > 0 || balances.length > 0 ? (
-        <View style={styles.bars}>
-          {usage.windows.map((window) => (
-            <ProviderUsageWindowBar key={window.id} window={window} />
-          ))}
-          {balances.map((balance) => (
-            <ProviderUsageBalanceBar key={balance.id} balance={balance} />
-          ))}
-        </View>
-      ) : null}
-
-      {details.length > 0 ? (
-        <View style={styles.details}>
-          {details.map((detail) => (
-            <View key={detail.id} style={styles.detailRow}>
-              <Text style={styles.detailLabel} numberOfLines={1}>
-                {detail.label}
-              </Text>
-              <Text style={styles.detailValue} numberOfLines={1}>
-                {detail.value}
-              </Text>
-            </View>
-          ))}
-        </View>
-      ) : null}
-
-      {footer ? (
-        <Text style={styles.footer} numberOfLines={1}>
-          {footer}
-        </Text>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    gap: theme.spacing[3],
-  },
-  containerPadded: {
-    gap: theme.spacing[4],
-    paddingVertical: theme.spacing[4],
-    paddingHorizontal: theme.spacing[4],
-  },
-  containerCompact: {
-    gap: theme.spacing[3],
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-  },
-  name: {
-    flexShrink: 1,
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.base,
-  },
-  headerSpacer: {
-    flex: 1,
-  },
-  statusRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1.5],
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: theme.colors.foregroundMuted,
-  },
-  statusDotAvailable: {
-    backgroundColor: theme.colors.statusSuccess,
-  },
-  statusDotError: {
-    backgroundColor: theme.colors.statusDanger,
-  },
-  statusLabel: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-  bars: {
-    gap: theme.spacing[3],
-  },
-  details: {
-    gap: theme.spacing[1],
-  },
-  detailRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    gap: theme.spacing[2],
-  },
-  detailLabel: {
-    flexShrink: 1,
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-  detailValue: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-  },
-  error: {
-    color: theme.colors.palette.red[300],
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.fontSize.sm * 1.4,
-  },
-  footer: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-}));

packages/app/src/provider-usage/copy.ts

@@ -1,18 +0,0 @@
-// User-facing copy for the provider-usage surfaces, centralized so localization
-// is a single-file change. INTEGRATION: move these into the i18n resources
-// (a `providerUsage` namespace across all locales) and swap to `t(...)` at the
-// call sites once the feature is wired to data. Kept inline for now because the
-// surfaces are not yet mounted and the locale files are being edited elsewhere.
-export const providerUsageCopy = {
-  title: "Plan usage",
-  refresh: "Refresh",
-  refreshing: "Refreshing...",
-  loading: "Loading usage...",
-  empty: "No usage data",
-  errorTitle: "Unable to load usage",
-  hostUnavailable: "Connect to this host to see provider usage",
-  hostUpgradeRequired: "Update the host to see provider usage",
-  clientUnavailable: "Host connection is not ready",
-  retry: "Try again",
-  tooltipLoading: "Loading plan usage…",
-} as const;

packages/app/src/provider-usage/settings-section.tsx

@@ -1,99 +0,0 @@
-import { RefreshCw } from "lucide-react-native";
-import { useMemo } from "react";
-import { Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-import { Alert } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { settingsStyles } from "@/styles/settings";
-import { SettingsSection } from "@/components/settings/headings/settings-section";
-import { providerUsageCopy } from "./copy";
-import { ProviderUsageList } from "./list";
-import type { ProviderUsageView } from "./types";
-
-export function ProviderUsageSettingsSection({
-  view,
-  onRefresh,
-}: {
-  view: ProviderUsageView;
-  onRefresh: () => void;
-}) {
-  const busy = view.kind === "loading" || (view.kind === "ready" && view.isRefreshing);
-
-  const refreshButton = useMemo(
-    () => (
-      <Button
-        variant="ghost"
-        size="sm"
-        leftIcon={RefreshCw}
-        loading={busy}
-        onPress={onRefresh}
-        accessibilityLabel={providerUsageCopy.refresh}
-      >
-        {busy ? providerUsageCopy.refreshing : providerUsageCopy.refresh}
-      </Button>
-    ),
-    [busy, onRefresh],
-  );
-
-  return (
-    <SettingsSection
-      title={providerUsageCopy.title}
-      testID="provider-usage-card"
-      trailing={refreshButton}
-    >
-      <ProviderUsageBody view={view} onRefresh={onRefresh} />
-    </SettingsSection>
-  );
-}
-
-function ProviderUsageBody({
-  view,
-  onRefresh,
-}: {
-  view: ProviderUsageView;
-  onRefresh: () => void;
-}) {
-  if (view.kind === "loading") {
-    return (
-      <View style={[settingsStyles.card, styles.emptyCard]}>
-        <Text style={styles.emptyText}>{providerUsageCopy.loading}</Text>
-      </View>
-    );
-  }
-
-  if (view.kind === "error") {
-    return (
-      <Alert
-        size="sm"
-        variant="error"
-        title={providerUsageCopy.errorTitle}
-        description={view.message}
-      >
-        <Button variant="outline" size="sm" onPress={onRefresh}>
-          {providerUsageCopy.retry}
-        </Button>
-      </Alert>
-    );
-  }
-
-  if (view.payload.providers.length === 0) {
-    return (
-      <View style={[settingsStyles.card, styles.emptyCard]}>
-        <Text style={styles.emptyText}>{providerUsageCopy.empty}</Text>
-      </View>
-    );
-  }
-
-  return <ProviderUsageList providers={view.payload.providers} />;
-}
-
-const styles = StyleSheet.create((theme) => ({
-  emptyCard: {
-    padding: theme.spacing[4],
-    alignItems: "center",
-  },
-  emptyText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.base,
-  },
-}));

packages/app/src/provider-usage/tooltip-section.tsx

@@ -1,75 +0,0 @@
-import { Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
-import { ProviderUsageCard } from "./card";
-import { providerUsageCopy } from "./copy";
-import type { ProviderUsage, ProviderUsageView } from "./types";
-
-function matchProvider(
-  providers: ProviderUsage[],
-  activeProviderId: string | null | undefined,
-): ProviderUsage | null {
-  if (!activeProviderId) return null;
-  const target = activeProviderId.toLowerCase();
-  return providers.find((usage) => usage.providerId.toLowerCase() === target) ?? null;
-}
-
-// Renders the active agent's provider usage inside the context-meter tooltip.
-// Returns nothing when the active provider has no usage entry, so the meter's
-// own context section stays the whole tooltip.
-export function ProviderUsageTooltipSection({
-  view,
-  activeProviderId,
-}: {
-  view: ProviderUsageView;
-  activeProviderId: string | null | undefined;
-}) {
-  if (view.kind === "loading") {
-    return (
-      <>
-        <View style={styles.divider} />
-        <Text style={styles.detail}>{providerUsageCopy.tooltipLoading}</Text>
-      </>
-    );
-  }
-
-  if (view.kind === "error") {
-    return (
-      <>
-        <View style={styles.divider} />
-        <Text style={styles.error}>{view.message}</Text>
-      </>
-    );
-  }
-
-  const usage = matchProvider(view.payload.providers, activeProviderId);
-  if (!usage) return null;
-
-  return (
-    <>
-      <View style={styles.divider} />
-      <ProviderUsageCard usage={usage} compact />
-    </>
-  );
-}
-
-const styles = StyleSheet.create((theme) => ({
-  divider: {
-    height: 1,
-    // Same token the popover draws its own outline with, so the rule reads as the
-    // popover's edge. `border` is invisible here (equals the popover background).
-    backgroundColor: theme.colors.borderAccent,
-    marginVertical: theme.spacing[2],
-    // Cancel the tooltip content's horizontal padding so the rule spans edge to edge.
-    marginHorizontal: -theme.spacing[2],
-  },
-  detail: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.fontSize.sm * 1.4,
-  },
-  error: {
-    color: theme.colors.palette.red[300],
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.fontSize.sm * 1.4,
-  },
-}));

packages/app/src/provider-usage/types.ts

@@ -1,26 +0,0 @@
-import type {
-  ProviderUsage,
-  ProviderUsageBalance,
-  ProviderUsageDetail,
-  ProviderUsageListResponseMessage,
-  ProviderUsageStatus,
-  ProviderUsageTone,
-  ProviderUsageWindow,
-} from "@getpaseo/protocol/messages";
-
-export type {
-  ProviderUsage,
-  ProviderUsageBalance,
-  ProviderUsageDetail,
-  ProviderUsageStatus,
-  ProviderUsageTone,
-  ProviderUsageWindow,
-};
-
-export type ProviderUsageBalanceUnit = ProviderUsageBalance["unit"];
-export type ProviderUsageListPayload = ProviderUsageListResponseMessage["payload"];
-
-export type ProviderUsageView =
-  | { kind: "loading" }
-  | { kind: "error"; message: string }
-  | { kind: "ready"; payload: ProviderUsageListPayload; isRefreshing: boolean };

packages/app/src/provider-usage/use-provider-usage.ts

@@ -1,103 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
-import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
-import { useSessionStore } from "@/stores/session-store";
-import { providerUsageCopy } from "./copy";
-import type { ProviderUsageListPayload, ProviderUsageView } from "./types";
-
-export const PROVIDER_USAGE_STALE_TIME_MS = 5 * 60 * 1000;
-
-type ProviderUsageClient = Pick<DaemonClient, "listProviderUsage">;
-
-export function providerUsageQueryKey(serverId: string | null | undefined) {
-  return ["providerUsage", serverId ?? ""] as const;
-}
-
-async function fetchProviderUsage(client: ProviderUsageClient): Promise<ProviderUsageListPayload> {
-  return client.listProviderUsage();
-}
-
-interface UseProviderUsageOptions {
-  enabled?: boolean;
-}
-
-export function useProviderUsage(
-  serverId: string | null | undefined,
-  options: UseProviderUsageOptions = {},
-): {
-  view: ProviderUsageView;
-  refresh: () => Promise<void>;
-  canFetch: boolean;
-} {
-  const queryClient = useQueryClient();
-  const client = useHostRuntimeClient(serverId ?? "");
-  const isConnected = useHostRuntimeIsConnected(serverId ?? "");
-  const supportsProviderUsage = useSessionStore(
-    (state) => state.sessions[serverId ?? ""]?.serverInfo?.features?.providerUsageList === true,
-  );
-  const queryKey = useMemo(() => providerUsageQueryKey(serverId), [serverId]);
-  const canFetch = Boolean(serverId && client && isConnected && supportsProviderUsage);
-  const enabled = Boolean((options.enabled ?? true) && canFetch);
-
-  const queryFn = useCallback(async () => {
-    if (!client) {
-      throw new Error(providerUsageCopy.clientUnavailable);
-    }
-    return fetchProviderUsage(client);
-  }, [client]);
-
-  const query = useQuery({
-    queryKey,
-    queryFn,
-    enabled,
-    staleTime: PROVIDER_USAGE_STALE_TIME_MS,
-    refetchOnMount: true,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-  });
-
-  const refresh = useCallback(async () => {
-    if (!canFetch) return;
-    await queryClient.invalidateQueries({ queryKey });
-    await queryClient.fetchQuery({
-      queryKey,
-      queryFn,
-      staleTime: PROVIDER_USAGE_STALE_TIME_MS,
-    });
-  }, [canFetch, queryClient, queryFn, queryKey]);
-
-  const view = useMemo<ProviderUsageView>(() => {
-    if (!serverId || !client || !isConnected) {
-      return { kind: "error", message: providerUsageCopy.hostUnavailable };
-    }
-    if (!supportsProviderUsage) {
-      return { kind: "error", message: providerUsageCopy.hostUpgradeRequired };
-    }
-    if (query.data) {
-      return {
-        kind: "ready",
-        payload: query.data,
-        isRefreshing: query.isFetching,
-      };
-    }
-    if (query.isError) {
-      return {
-        kind: "error",
-        message: query.error instanceof Error ? query.error.message : String(query.error),
-      };
-    }
-    return { kind: "loading" };
-  }, [
-    client,
-    isConnected,
-    query.data,
-    query.error,
-    query.isError,
-    query.isFetching,
-    serverId,
-    supportsProviderUsage,
-  ]);
-
-  return { view, refresh, canFetch };
-}

packages/app/src/runtime/host-runtime.test.ts

@@ -17,6 +17,7 @@ import type { AgentPermissionRequest } from "@getpaseo/protocol/agent-types";
 import type { HostConnection, HostProfile } from "@/types/host-connection";
 import { defaultHostAppearance } from "@/hosts/appearance";
 import { useSessionStore, type Agent } from "@/stores/session-store";
+import { createUserMessage } from "@/types/stream";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import { isAgentArchiving, setAgentArchiving } from "@/hooks/use-archive-agent";
 import { queryClient } from "@/data/query-client";
@@ -2799,6 +2800,91 @@ describe("HostRuntimeStore", () => {
     useSessionStore.getState().clearSession(host.serverId);
   });
 
+  it("keeps the next queued message while a sent message replaces the running turn", async () => {
+    const host = makeHost({
+      serverId: "srv_queue_replacement",
+      connections: [{ id: "direct:lan:6767", type: "directTcp", endpoint: "lan:6767" }],
+    });
+    const fakeClient = new FakeDaemonClient();
+    fakeClient.setConnectionState({ status: "connected" });
+    const running = makeFetchAgentsEntry({
+      id: "agent",
+      cwd: "/repo",
+      updatedAt: "2026-07-12T10:00:00.000Z",
+    });
+    fakeClient.fetchAgentsResponses.push(
+      makeFetchAgentsPayload({
+        entries: [{ ...running, agent: { ...running.agent, status: "running" } }],
+      }),
+    );
+    const store = new HostRuntimeStore({
+      deps: {
+        createClient: () => fakeClient as unknown as DaemonClient,
+        connectToDaemon: async () => ({
+          client: fakeClient as unknown as DaemonClient,
+          serverId: host.serverId,
+          hostname: null,
+        }),
+        getClientId: async () => "cid_queue_replacement",
+      },
+    });
+    const sessionStore = useSessionStore.getState();
+    sessionStore.initializeSession(host.serverId, fakeClient as unknown as DaemonClient, 1);
+    sessionStore.updateSessionServerInfo(host.serverId, {
+      serverId: host.serverId,
+      hostname: null,
+      version: null,
+      features: { canonicalSubmittedPrompts: true },
+    });
+    store.syncHosts([host]);
+    await waitForHostOnline(store, host.serverId);
+    await store.refreshAgentDirectory({ serverId: host.serverId, subscribe: {} });
+    store.applyAgentTurnLiveness(host.serverId, "agent", {
+      type: "stream_open",
+      turn: { turnId: "turn-1", startedAt: null },
+    });
+    sessionStore.setQueuedMessages(
+      host.serverId,
+      new Map([["agent", [{ id: "second", text: "keep me queued", attachments: [] }]]]),
+    );
+
+    // "Send now" on the first queued message is in flight; the daemon replaces the turn.
+    const sentNow = createUserMessage({
+      clientMessageId: "sent-now",
+      text: "sent now",
+      timestamp: new Date(),
+    });
+    sessionStore.beginAgentMessageSubmission(host.serverId, "agent", sentNow);
+    store.applyAgentTurnLiveness(host.serverId, "agent", {
+      type: "stream_close",
+      turnId: "turn-1",
+    });
+    store.applyAgentTurnLiveness(host.serverId, "agent", {
+      type: "stream_open",
+      turn: { turnId: "turn-2", startedAt: null },
+    });
+
+    expect(fakeClient.sentAgentMessages).toEqual([]);
+    expect(useSessionStore.getState().sessions[host.serverId]?.queuedMessages.get("agent")).toEqual(
+      [{ id: "second", text: "keep me queued", attachments: [] }],
+    );
+
+    // Once the replacement turn ends, the queue drains as usual.
+    sessionStore.acceptAgentMessageSubmission(host.serverId, "agent", "sent-now");
+    sessionStore.setAgentStreamState(host.serverId, "agent", {
+      acknowledgedClientMessageIds: ["sent-now"],
+    });
+    store.applyAgentTurnLiveness(host.serverId, "agent", {
+      type: "stream_close",
+      turnId: "turn-2",
+    });
+    await fakeClient.waitForSentMessages(1);
+    expect(fakeClient.sentAgentMessages.map(([, text]) => text)).toEqual(["keep me queued"]);
+
+    store.syncHosts([]);
+    useSessionStore.getState().clearSession(host.serverId);
+  });
+
   it("submits an automatically drained message through the submission producer", async () => {
     const host = makeHost({ serverId: "srv_drain_submission" });
     const fakeClient = new FakeDaemonClient();

packages/app/src/runtime/host-runtime.ts

@@ -49,6 +49,7 @@ import { readDesktopManagedLocalCredential } from "@/desktop/daemon/local-creden
 import { CLIENT_CAPS } from "@getpaseo/protocol/client-capabilities";
 import { BROWSER_AUTOMATION_COMMAND_NAMES } from "@getpaseo/protocol/browser-automation/rpc-schemas";
 import {
+  selectAgentTurnPresentation,
   useSessionStore,
   type Agent,
   type WorkspaceDescriptor,
@@ -2323,6 +2324,9 @@ export class HostRuntimeStore {
     if (!client || !queue?.length || session.initializingAgents.get(agentId) === true) {
       return;
     }
+    // A message sent while the agent runs can replace its turn. The replaced turn closes
+    // before the replacement opens, but the agent is still busy with the sent message.
+    if (selectAgentTurnPresentation(session, agentId).isActive) return;
     this.queuedAgentDrainInFlight.add(drainKey);
     const next = queue[0];
     void sendQueuedComposerMessageNow({
@@ -2653,21 +2657,22 @@ export function useHostRuntimeConnectionStatuses(
   serverIds: readonly string[],
 ): ReadonlyMap<string, HostRuntimeConnectionStatus> {
   const store = getHostRuntimeStore();
-  const version = useSyncExternalStore(
+  // The snapshot is the statuses themselves, joined into a string so React compares by
+  // value. A version counter read only for reactivity is dropped by the React Compiler.
+  const readStatuses = () =>
+    serverIds
+      .map((serverId) => store.getSnapshot(serverId)?.connectionStatus ?? "connecting")
+      .join("\n");
+  const statuses = useSyncExternalStore(
     (onStoreChange) => store.subscribeAll(onStoreChange),
-    () => store.getVersion(),
-    () => store.getVersion(),
+    readStatuses,
+    readStatuses,
   );
 
   return useMemo(() => {
-    // The aggregate version is the reactivity trigger; re-read snapshots on every host tick.
-    void version;
-    const entries: Array<[string, HostRuntimeConnectionStatus]> = serverIds.map((serverId) => [
-      serverId,
-      store.getSnapshot(serverId)?.connectionStatus ?? "connecting",
-    ]);
-    return new Map(entries);
-  }, [serverIds, store, version]);
+    const values = statuses.split("\n") as HostRuntimeConnectionStatus[];
+    return new Map(serverIds.map((serverId, index) => [serverId, values[index]]));
+  }, [serverIds, statuses]);
 }
 
 export function useHostRuntimeLastError(serverId: string): string | null {

packages/app/src/screens/settings-screen.tsx

@@ -71,7 +71,7 @@ import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 import { WindowChromeRegion, WindowChromeSafeArea } from "@/utils/desktop-window";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { BackHeader } from "@/components/headers/back-header";
-import { ScreenHeader } from "@/components/headers/screen-header";
+import { PageLayout } from "@/components/page-layout";
 import { AddHostMethodModal } from "@/components/add-host-method-modal";
 import { AddHostModal } from "@/components/add-host-modal";
 import { AddRemoteSshHostModal } from "@/components/add-remote-ssh-host-modal";
@@ -1305,30 +1305,25 @@ export default function SettingsScreen({ view, openAddHostIntent = null }: Setti
   }, []);
 
   const installedPlugins = useInstalledPlugins();
-  const detailHeader = ((): {
-    title: string;
-    titleAccessory?: ReactNode;
-  } | null => {
+  const detailTitle = ((): string | undefined => {
     if (view.kind === "plugin") {
       const screen = installedPlugins
         .find((plugin) => plugin.serverId === view.serverId && plugin.id === view.pluginId)
         ?.settingsScreens.find((candidate) => candidate.id === view.screenId);
-      return { title: `${view.pluginId} · ${screen?.title ?? t("settings.title")}` };
+      return `${view.pluginId} · ${screen?.title ?? t("settings.title")}`;
     }
     if (view.kind === "host") {
       const item = HOST_SECTION_ITEMS.find((s) => s.id === view.section);
-      if (!item) return null;
-      return { title: t(item.labelKey) };
+      return item ? t(item.labelKey) : undefined;
     }
     if (view.kind === "section") {
       const item = SIDEBAR_SECTION_ITEMS.find((s) => s.id === view.section);
-      if (!item) return null;
-      return { title: t(item.labelKey) };
+      return item ? t(item.labelKey) : undefined;
     }
     if (view.kind === "project") {
-      return { title: t("settings.projects") };
+      return t("settings.projects");
     }
-    return null;
+    return undefined;
   })();
 
   const content: ReactNode = (() => {
@@ -1399,15 +1394,6 @@ export default function SettingsScreen({ view, openAddHostIntent = null }: Setti
     );
   }
 
-  const desktopPageTitle = detailHeader ? (
-    <View style={styles.pageTitleRow}>
-      <Text style={styles.pageTitle} testID="settings-detail-header-title">
-        {detailHeader.title}
-      </Text>
-      {detailHeader.titleAccessory}
-    </View>
-  ) : null;
-
   const addHostModals = (
     <>
       <AddHostMethodModal
@@ -1464,14 +1450,9 @@ export default function SettingsScreen({ view, openAddHostIntent = null }: Setti
   if (isCompactLayout) {
     return (
       <View style={styles.container}>
-        <BackHeader
-          title={detailHeader?.title}
-          titleAccessory={detailHeader?.titleAccessory}
-          onBack={handleBackFromDetail}
-        />
-        <ScrollView style={styles.scrollView} contentContainerStyle={insetBottomStyle}>
-          <View style={styles.content}>{content}</View>
-        </ScrollView>
+        <PageLayout title={detailTitle} onBack={handleBackFromDetail}>
+          {content}
+        </PageLayout>
         {addHostModals}
       </View>
     );
@@ -1497,15 +1478,9 @@ export default function SettingsScreen({ view, openAddHostIntent = null }: Setti
         </WindowChromeRegion>
         <WindowChromeRegion corners="top-right">
           <View style={desktopStyles.contentPane} testID="settings-detail-pane">
-            {/* Keeps the titlebar drag region and window controls; the page
-                title lives in the content, like a document heading. */}
-            <ScreenHeader borderless />
-            <ScrollView style={styles.scrollView} contentContainerStyle={insetBottomStyle}>
-              <View style={styles.content}>
-                {desktopPageTitle}
-                {content}
-              </View>
-            </ScrollView>
+            <PageLayout title={detailTitle} titleTestID="settings-detail-header-title">
+              {content}
+            </PageLayout>
           </View>
         </WindowChromeRegion>
       </View>
@@ -1536,26 +1511,6 @@ const styles = StyleSheet.create((theme) => ({
   scrollView: {
     flex: 1,
   },
-  content: {
-    padding: theme.spacing[4],
-    paddingTop: theme.spacing[6],
-    width: "100%",
-    maxWidth: 720,
-    alignSelf: "center",
-  },
-  pageTitleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    // Line up with the section titles, which sit inset from their cards.
-    marginLeft: theme.spacing[1],
-    marginBottom: theme.spacing[6],
-  },
-  pageTitle: {
-    fontSize: theme.fontSize["4xl"],
-    fontWeight: theme.fontWeight.medium,
-    color: theme.colors.foreground,
-  },
   aboutValue: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.base,

packages/app/src/screens/settings/host-page.tsx

@@ -50,8 +50,7 @@ import {
   useHosts,
 } from "@/runtime/host-runtime";
 import { ProvidersSection } from "@/screens/settings/providers-section";
-import { ProviderUsageSettingsSection } from "@/provider-usage/settings-section";
-import { useProviderUsage } from "@/provider-usage/use-provider-usage";
+import { HostUsageSection } from "@/usage";
 import { HostAppearanceSection } from "@/screens/settings/host-appearance-section";
 import { SettingsSection } from "@/components/settings/headings/settings-section";
 import { useSessionStore } from "@/stores/session-store";
@@ -343,10 +342,6 @@ export function HostProvidersPage({ serverId }: { serverId: string }) {
 
 export function HostUsagePage({ serverId }: { serverId: string }) {
   const host = useHostProfile(serverId);
-  const { view: providerUsageView, refresh: refreshProviderUsage } = useProviderUsage(serverId);
-  const handleRefresh = useCallback(() => {
-    void refreshProviderUsage();
-  }, [refreshProviderUsage]);
 
   if (!host) {
     return <HostNotFound />;
@@ -354,7 +349,7 @@ export function HostUsagePage({ serverId }: { serverId: string }) {
 
   return (
     <View>
-      <ProviderUsageSettingsSection view={providerUsageView} onRefresh={handleRefresh} />
+      <HostUsageSection serverId={serverId} />
     </View>
   );
 }

packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx

@@ -69,6 +69,7 @@ import { RenderProfile } from "@/utils/render-profiler";
 import { TrailingActionScrim } from "@/components/ui/trailing-action-scrim";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import { useCompactTimeAgo } from "@/hooks/use-compact-time-ago";
+import { formatCompactTimeAgoAsProse } from "@/utils/time";
 import { buildWorkspaceKeyboardHandlerId } from "@/keyboard/handler-id";
 import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
 import { WorkspaceNewTabMenuContent } from "@/screens/workspace/workspace-new-tab-menu";
@@ -148,12 +149,6 @@ function formatAgentTooltipTitle(singleLineTitle: string): string {
   return `${singleLineTitle.slice(0, AGENT_TOOLTIP_TITLE_MAX_LENGTH - 1).trimEnd()}…`;
 }
 
-function formatAgentTooltipActivity(compactActivity: string): string {
-  if (compactActivity === "now") return "just now";
-  if (/^\d/.test(compactActivity)) return `${compactActivity} ago`;
-  return compactActivity;
-}
-
 function AgentTabTooltipBody({
   serverId,
   agentId,
@@ -169,7 +164,7 @@ function AgentTabTooltipBody({
     return state.agentLastActivity.get(agentId) ?? agent?.lastActivityAt ?? null;
   });
   const compactActivity = useCompactTimeAgo(lastActivityAt);
-  const activity = formatAgentTooltipActivity(compactActivity);
+  const activity = formatCompactTimeAgoAsProse(compactActivity);
 
   return (
     <View style={styles.tooltipAgentContent}>

packages/app/src/usage/balance-bar.tsx

@@ -2,14 +2,14 @@ import { useMemo } from "react";
 import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { clampPct, formatAmount, formatResetLabel } from "./format";
-import type { ProviderUsageBalance, ProviderUsageTone } from "./types";
+import type { UsageBalance, UsageTone } from "./types";
 
 interface ResolvedBalance {
   amountText: string;
   usedPct: number | null;
 }
 
-function resolveBalance(balance: ProviderUsageBalance): ResolvedBalance {
+function resolveBalance(balance: UsageBalance): ResolvedBalance {
   const { used, remaining, limit, unit } = balance;
   if (limit != null && limit > 0) {
     const usedAmount = used ?? (remaining != null ? limit - remaining : null);
@@ -26,7 +26,7 @@ function resolveBalance(balance: ProviderUsageBalance): ResolvedBalance {
   return { amountText: "—", usedPct: null };
 }
 
-function fillToneStyle(tone: ProviderUsageTone) {
+function fillToneStyle(tone: UsageTone) {
   switch (tone) {
     case "ok":
       return styles.fillOk;
@@ -39,7 +39,7 @@ function fillToneStyle(tone: ProviderUsageTone) {
   }
 }
 
-export function ProviderUsageBalanceBar({ balance }: { balance: ProviderUsageBalance }) {
+export function UsageBalanceBar({ balance }: { balance: UsageBalance }) {
   const { amountText, usedPct } = resolveBalance(balance);
   const tone = balance.tone ?? "default";
   const resetLabel = formatResetLabel(balance.resetsAt);

packages/app/src/usage/card.tsx

@@ -0,0 +1,308 @@
+import { RefreshCw } from "lucide-react-native";
+import { useMemo } from "react";
+import { Text, View, type StyleProp, type TextStyle } from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  iconButtonChromeGlyphSize,
+  mutedIconColorMapping,
+  smallIconButtonChromeFrameSize,
+} from "@/components/ui/icon-button-chrome";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ToolbarButton } from "@/components/ui/pane-content-toolbar";
+import { StatusBadge } from "@/components/ui/status-badge";
+import { useIsCompactFormFactor } from "@/constants/layout";
+import { isNative } from "@/constants/platform";
+import { useCompactTimeAgo } from "@/hooks/use-compact-time-ago";
+import { UsageBalanceBar } from "./balance-bar";
+import { usageCopy } from "./copy";
+import { formatUsageFreshness, type UsageRefresh } from "./model";
+import { useReportRefresh } from "./queries";
+import { UsageSourceIcon } from "./source-icon";
+import type { UsageReport, UsageReportEntry } from "./types";
+import { UsageWindowBar } from "./window-bar";
+
+function statusText(report: UsageReport): string | null {
+  if (report.status === "available") return null;
+  return report.status === "error" ? "Error" : "Unavailable";
+}
+
+const ThemedRefreshIcon = withUnistyles(RefreshCw);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+
+export function UsageCard({
+  serverId,
+  entry,
+  compact = false,
+}: {
+  serverId: string;
+  entry: UsageReportEntry;
+  compact?: boolean;
+}) {
+  const isCompact = useIsCompactFormFactor();
+  const { refresh, refreshState } = useReportRefresh(serverId, entry.id);
+  // Where there is no hover the freshness is printed on the card; elsewhere the Refresh tooltip.
+  const showsFreshnessInline = isNative || isCompact;
+  const usage = entry.report;
+  const status = statusText(usage);
+  const footer = entry.account.label ?? null;
+  const balances = usage.balances ?? [];
+  const details = usage.details ?? [];
+
+  const containerStyle = useMemo(
+    () => [styles.container, compact ? styles.containerCompact : styles.containerPadded],
+    [compact],
+  );
+  const dotStyle = useMemo(
+    () => [
+      styles.statusDot,
+      usage.status === "available" && styles.statusDotAvailable,
+      usage.status === "error" && styles.statusDotError,
+    ],
+    [usage.status],
+  );
+
+  return (
+    <View style={containerStyle}>
+      <View style={styles.header}>
+        <UsageSourceIcon svg={entry.icon ?? null} size={14} />
+        <Text style={styles.name} numberOfLines={1}>
+          {entry.sourceLabel}
+        </Text>
+        {usage.planLabel ? <StatusBadge label={usage.planLabel} variant="muted" /> : null}
+        <View style={styles.headerSpacer} />
+        {status ? (
+          <View style={styles.statusRow}>
+            <View style={dotStyle} />
+            <Text style={styles.statusLabel}>{status}</Text>
+          </View>
+        ) : null}
+        <UsageRefreshButton
+          sourceLabel={entry.sourceLabel}
+          fetchedAt={entry.fetchedAt}
+          refreshState={refreshState}
+          onRefresh={refresh}
+          compact={isCompact}
+        />
+      </View>
+
+      {usage.error ? (
+        <Text style={styles.error} numberOfLines={3}>
+          {usage.error}
+        </Text>
+      ) : null}
+
+      {usage.windows.length > 0 || balances.length > 0 ? (
+        <View style={styles.bars}>
+          {usage.windows.map((window) => (
+            <UsageWindowBar key={window.id} window={window} />
+          ))}
+          {balances.map((balance) => (
+            <UsageBalanceBar key={balance.id} balance={balance} />
+          ))}
+        </View>
+      ) : null}
+
+      {details.length > 0 ? (
+        <View style={styles.details}>
+          {details.map((detail) => (
+            <View key={detail.id} style={styles.detailRow}>
+              <Text style={styles.detailLabel} numberOfLines={1}>
+                {detail.label}
+              </Text>
+              <Text style={styles.detailValue} numberOfLines={1}>
+                {detail.value}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      {footer || showsFreshnessInline ? (
+        <View style={styles.footerRow}>
+          <Text style={styles.footer} numberOfLines={1}>
+            {footer}
+          </Text>
+          {showsFreshnessInline ? (
+            <UsageFreshness
+              fetchedAt={entry.fetchedAt}
+              style={styles.freshness}
+              testID="usage-freshness"
+            />
+          ) : null}
+        </View>
+      ) : null}
+
+      {refreshState === "failed" ? (
+        <Text style={styles.error} testID="usage-refresh-error">
+          {usageCopy.refreshFailed}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+/** Refreshes this one report. Its tooltip says when the report on screen was fetched. */
+function UsageRefreshButton({
+  sourceLabel,
+  fetchedAt,
+  refreshState,
+  onRefresh,
+  compact,
+}: {
+  sourceLabel: string;
+  fetchedAt: string;
+  refreshState: UsageRefresh;
+  onRefresh: () => void;
+  compact: boolean;
+}) {
+  const isPending = refreshState === "pending";
+  const iconSize = iconButtonChromeGlyphSize("small", compact);
+  const freshness = useMemo(
+    () => (
+      <UsageFreshness
+        fetchedAt={fetchedAt}
+        style={styles.tooltipText}
+        testID="usage-freshness-tooltip"
+      />
+    ),
+    [fetchedAt],
+  );
+  return (
+    <ToolbarButton
+      label={`${usageCopy.refresh} ${sourceLabel}`}
+      tooltip={freshness}
+      tooltipSide="top"
+      compact={compact}
+      disabled={isPending}
+      onPress={onRefresh}
+      style={compact ? styles.refreshButtonCompact : styles.refreshButton}
+      testID="usage-refresh"
+    >
+      {isPending ? (
+        <ThemedLoadingSpinner size={iconSize} uniProps={mutedIconColorMapping} />
+      ) : (
+        <ThemedRefreshIcon size={iconSize} uniProps={mutedIconColorMapping} />
+      )}
+    </ToolbarButton>
+  );
+}
+
+/** Its own component so the relative-time clock re-renders one `<Text>`, not the card. */
+function UsageFreshness({
+  fetchedAt,
+  style,
+  testID,
+}: {
+  fetchedAt: string;
+  style: StyleProp<TextStyle>;
+  testID: string;
+}) {
+  const elapsed = useCompactTimeAgo(new Date(fetchedAt));
+  return (
+    <Text style={style} numberOfLines={1} testID={testID}>
+      {formatUsageFreshness(elapsed)}
+    </Text>
+  );
+}
+
+// The Refresh glyph lands on the card's right rail and the header keeps its text height;
+// the button's larger hitbox overhangs both instead of pushing them.
+function iconHitboxOverhang(compact: boolean) {
+  const overhang =
+    (smallIconButtonChromeFrameSize(compact) - iconButtonChromeGlyphSize("small", compact)) / 2;
+  return { marginRight: -overhang, marginVertical: -overhang };
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    gap: theme.spacing[3],
+  },
+  containerPadded: {
+    gap: theme.spacing[4],
+    paddingVertical: theme.spacing[4],
+    paddingHorizontal: theme.spacing[4],
+  },
+  containerCompact: {
+    gap: theme.spacing[3],
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  name: {
+    flexShrink: 1,
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+  },
+  headerSpacer: {
+    flex: 1,
+  },
+  statusRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1.5],
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: theme.colors.foregroundMuted,
+  },
+  statusDotAvailable: {
+    backgroundColor: theme.colors.statusSuccess,
+  },
+  statusDotError: {
+    backgroundColor: theme.colors.statusDanger,
+  },
+  statusLabel: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+  bars: {
+    gap: theme.spacing[3],
+  },
+  details: {
+    gap: theme.spacing[1],
+  },
+  detailRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+  },
+  detailLabel: {
+    flexShrink: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+  detailValue: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+  },
+  error: {
+    color: theme.colors.palette.red[300],
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.fontSize.sm * 1.4,
+  },
+  footerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  footer: {
+    flex: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+  freshness: {
+    flexShrink: 0,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+  tooltipText: {
+    color: theme.colors.popoverForeground,
+    fontSize: theme.fontSize.sm,
+  },
+  refreshButton: iconHitboxOverhang(false),
+  refreshButtonCompact: iconHitboxOverhang(true),
+}));

packages/app/src/usage/composer-pill.tsx

@@ -0,0 +1,82 @@
+import { Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { MenuTriggerState } from "@/components/ui/menu";
+import {
+  isToolbarLabelTriggerHighlighted,
+  toolbarLabelTriggerStyle,
+  toolbarLabelTriggerTextStyle,
+} from "@/components/ui/toolbar-label-trigger";
+import { UsageCard } from "./card";
+import { usageCopy } from "./copy";
+import type { UsagePill } from "./model";
+import { useAgentUsage } from "./queries";
+import { UsageSourceIcon } from "./source-icon";
+
+function pillTriggerStyle(state: MenuTriggerState) {
+  return [toolbarLabelTriggerStyle(state), styles.trigger];
+}
+
+/**
+ * The agent's plan usage beside the composer controls. Opens the cached usage card;
+ * only the card's Refresh asks the source for a new report.
+ */
+export function UsageComposerPill({ serverId, agentId }: { serverId: string; agentId: string }) {
+  const { pill, entry } = useAgentUsage(serverId, agentId);
+
+  if (!pill || !entry) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        style={pillTriggerStyle}
+        accessibilityRole="button"
+        accessibilityLabel={`${pill.sourceLabel} ${usageCopy.planUsage}`}
+        testID="usage-composer-pill"
+      >
+        {(state) => (
+          <UsagePillContent pill={pill} highlighted={isToolbarLabelTriggerHighlighted(state)} />
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side="top"
+        align="end"
+        offset={8}
+        width={300}
+        testID="usage-composer-popover"
+        sheetTitle={usageCopy.planUsage}
+      >
+        <View style={styles.popover}>
+          <UsageCard serverId={serverId} entry={entry} compact />
+        </View>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function UsagePillContent({ pill, highlighted }: { pill: UsagePill; highlighted: boolean }) {
+  return (
+    <>
+      <UsageSourceIcon svg={pill.icon} size={14} />
+      {pill.text ? (
+        <Text style={toolbarLabelTriggerTextStyle(highlighted)} numberOfLines={1}>
+          {pill.text}
+        </Text>
+      ) : null}
+    </>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    height: 28,
+    flexShrink: 0,
+  },
+  popover: {
+    padding: theme.spacing[3],
+  },
+}));

packages/app/src/usage/copy.ts

@@ -0,0 +1,18 @@
+// User-facing copy for the usage surfaces, kept in one file so localization is a
+// single-file change.
+export const usageCopy = {
+  title: "Usage",
+  planUsage: "Plan usage",
+  refresh: "Refresh",
+  refreshing: "Refreshing...",
+  refreshFailed: "Unable to refresh usage",
+  updated: "Updated",
+  loading: "Loading usage...",
+  empty: "No usage data",
+  noHosts: "No connected hosts",
+  errorTitle: "Unable to load usage",
+  hostUnavailable: "Connect to this host to see usage",
+  hostUpgradeRequired: "Update the host to see usage",
+  clientUnavailable: "Host connection is not ready",
+  retry: "Try again",
+} as const;

packages/app/src/usage/format.ts

@@ -1,5 +1,5 @@
 import { formatTokenCount } from "@/components/context-window-meter.utils";
-import type { ProviderUsageBalanceUnit } from "./types";
+import type { UsageBalanceUnit } from "./types";
 
 export function clampPct(value: number): number {
   return Math.max(0, Math.min(100, value));
@@ -28,20 +28,7 @@ export function formatResetLabel(iso: string | null | undefined): string | null
   return rel === "now" ? "resetting now" : `resets ${rel}`;
 }
 
-export function formatAgo(iso: string | null | undefined): string | null {
-  if (!iso) return null;
-  const diffMs = Date.now() - new Date(iso).getTime();
-  if (!Number.isFinite(diffMs)) return null;
-  if (diffMs < 60_000) return "just now";
-  const diffMinutes = Math.floor(diffMs / 60_000);
-  const diffHours = Math.floor(diffMinutes / 60);
-  const diffDays = Math.floor(diffHours / 24);
-  if (diffDays > 0) return `${diffDays}d ago`;
-  if (diffHours > 0) return `${diffHours}h ago`;
-  return `${diffMinutes}m ago`;
-}
-
-export function formatAmount(value: number, unit: ProviderUsageBalanceUnit): string {
+export function formatAmount(value: number, unit: UsageBalanceUnit): string {
   switch (unit) {
     case "usd":
       return `$${value.toFixed(2)}`;

packages/app/src/usage/host-usage-section.tsx

@@ -0,0 +1,17 @@
+import { usageCopy } from "./copy";
+import { useHostUsage } from "./queries";
+import { UsageSection } from "./usage-section";
+
+/** A host's usage reports, for its settings page. */
+export function HostUsageSection({ serverId }: { serverId: string }) {
+  const { view, refresh } = useHostUsage(serverId);
+  return (
+    <UsageSection
+      serverId={serverId}
+      title={usageCopy.planUsage}
+      view={view}
+      onRefresh={refresh}
+      testID="usage-card"
+    />
+  );
+}

packages/app/src/usage/index.ts

@@ -0,0 +1,3 @@
+export { UsageComposerPill } from "./composer-pill";
+export { HostUsageSection } from "./host-usage-section";
+export { UsageScreen } from "./usage-screen";

packages/app/src/usage/list.tsx

@@ -2,16 +2,22 @@ import { Fragment } from "react";
 import { View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { settingsStyles } from "@/styles/settings";
-import { ProviderUsageCard } from "./card";
-import type { ProviderUsage } from "./types";
+import { UsageCard } from "./card";
+import type { UsageReportEntry } from "./types";
 
-export function ProviderUsageList({ providers }: { providers: ProviderUsage[] }) {
+export function UsageList({
+  serverId,
+  reports,
+}: {
+  serverId: string;
+  reports: UsageReportEntry[];
+}) {
   return (
     <View style={settingsStyles.card}>
-      {providers.map((usage, index) => (
-        <Fragment key={usage.providerId}>
+      {reports.map((entry, index) => (
+        <Fragment key={entry.id}>
           {index > 0 ? <View style={styles.divider} /> : null}
-          <ProviderUsageCard usage={usage} />
+          <UsageCard serverId={serverId} entry={entry} />
         </Fragment>
       ))}
     </View>

packages/app/src/usage/model.test.ts

@@ -0,0 +1,211 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatUsageFreshness,
+  groupUsageByHost,
+  replaceReport,
+  headlineWindow,
+  resolveUsagePill,
+  resolveUsageRefresh,
+  resolveUsageView,
+  type UsageQueryState,
+} from "./model";
+import type { UsageReportEntry, UsageWindow } from "./types";
+
+function entry(input: {
+  windows?: UsageWindow[];
+  planLabel?: string;
+  icon?: string;
+  sourceId?: string;
+}): UsageReportEntry {
+  return {
+    id: `${input.sourceId ?? "fixture"}:account-1`,
+    account: {},
+    fetchedAt: "2026-01-01T00:00:00.000Z",
+    sourceId: input.sourceId ?? "fixture",
+    sourceLabel: "Fixture source",
+    ...(input.icon ? { icon: input.icon } : {}),
+    report: {
+      status: "available",
+      ...(input.planLabel ? { planLabel: input.planLabel } : {}),
+      windows: input.windows ?? [],
+    },
+  };
+}
+
+function ready(data: UsageReportEntry[]): UsageQueryState {
+  return { data, error: null, isFetching: false };
+}
+
+describe("resolveUsagePill", () => {
+  it("shows the source icon and the headline window percent", () => {
+    const pill = resolveUsagePill({
+      supportsUsage: true,
+      entry: entry({
+        icon: "<svg/>",
+        windows: [
+          { id: "session", label: "Session", usedPct: 12 },
+          { id: "weekly", label: "Weekly", usedPct: 64.6, headline: true },
+        ],
+      }),
+    });
+
+    expect(pill).toEqual({ icon: "<svg/>", sourceLabel: "Fixture source", text: "65%" });
+  });
+
+  it("derives the headline percent from remaining percent", () => {
+    const pill = resolveUsagePill({
+      supportsUsage: true,
+      entry: entry({
+        windows: [{ id: "daily", label: "Daily", remainingPct: 30, headline: true }],
+      }),
+    });
+
+    expect(pill?.text).toBe("70%");
+  });
+
+  it("shows the plan label when no window is the headline", () => {
+    const pill = resolveUsagePill({
+      supportsUsage: true,
+      entry: entry({
+        planLabel: "Pro",
+        windows: [{ id: "session", label: "Session", usedPct: 40 }],
+      }),
+    });
+
+    expect(pill).toEqual({ icon: null, sourceLabel: "Fixture source", text: "Pro" });
+  });
+
+  it("shows only the icon with neither a headline window nor a plan label", () => {
+    const pill = resolveUsagePill({ supportsUsage: true, entry: entry({}) });
+
+    expect(pill).toEqual({ icon: null, sourceLabel: "Fixture source", text: null });
+  });
+
+  it("is hidden when the agent has no usage report", () => {
+    expect(resolveUsagePill({ supportsUsage: true, entry: null })).toBeNull();
+  });
+
+  it("is hidden on a host without usage sources, whatever data is cached", () => {
+    const cached = entry({ windows: [{ id: "w", label: "W", usedPct: 5, headline: true }] });
+
+    expect(resolveUsagePill({ supportsUsage: false, entry: cached })).toBeNull();
+  });
+});
+
+describe("headlineWindow", () => {
+  it("does not fall back to the first window", () => {
+    expect(headlineWindow(entry({ windows: [{ id: "a", label: "A", usedPct: 1 }] }).report)).toBe(
+      null,
+    );
+  });
+});
+
+describe("resolveUsageView", () => {
+  it("asks for a host update when the host lacks usage sources", () => {
+    expect(
+      resolveUsageView({ isConnected: true, supportsUsage: false, query: ready([entry({})]) }),
+    ).toEqual({ kind: "unavailable", message: "Update the host to see usage" });
+  });
+
+  it("asks for a connection before anything else", () => {
+    expect(
+      resolveUsageView({ isConnected: false, supportsUsage: false, query: undefined }),
+    ).toEqual({ kind: "unavailable", message: "Connect to this host to see usage" });
+  });
+
+  it("moves from loading to ready to error", () => {
+    const base = { isConnected: true, supportsUsage: true };
+    expect(resolveUsageView({ ...base, query: undefined })).toEqual({ kind: "loading" });
+    expect(
+      resolveUsageView({ ...base, query: { data: [], error: null, isFetching: true } }),
+    ).toEqual({ kind: "ready", reports: [], isRefreshing: true });
+    expect(
+      resolveUsageView({
+        ...base,
+        query: { data: undefined, error: new Error("boom"), isFetching: false },
+      }),
+    ).toEqual({ kind: "error", message: "boom" });
+  });
+});
+
+describe("groupUsageByHost", () => {
+  it("groups reports under each connected host in host order", () => {
+    const first = entry({ sourceId: "one" });
+    const second = entry({ sourceId: "two" });
+    const groups = groupUsageByHost(
+      [
+        { serverId: "b", label: "Beta", isConnected: true, supportsUsage: true },
+        { serverId: "offline", label: "Offline", isConnected: false, supportsUsage: true },
+        { serverId: "a", label: "Alpha", isConnected: true, supportsUsage: true },
+      ],
+      new Map([
+        ["a", ready([first])],
+        ["b", ready([second, first])],
+      ]),
+    );
+
+    expect(groups).toEqual([
+      {
+        serverId: "b",
+        label: "Beta",
+        view: { kind: "ready", reports: [second, first], isRefreshing: false },
+      },
+      {
+        serverId: "a",
+        label: "Alpha",
+        view: { kind: "ready", reports: [first], isRefreshing: false },
+      },
+    ]);
+  });
+
+  it("shows the update message in an old host's group", () => {
+    const groups = groupUsageByHost(
+      [
+        { serverId: "new", label: "New", isConnected: true, supportsUsage: true },
+        { serverId: "old", label: "Old", isConnected: true, supportsUsage: false },
+      ],
+      new Map([["new", ready([])]]),
+    );
+
+    expect(groups.map((group) => [group.label, group.view])).toEqual([
+      ["New", { kind: "ready", reports: [], isRefreshing: false }],
+      ["Old", { kind: "unavailable", message: "Update the host to see usage" }],
+    ]);
+  });
+});
+
+describe("formatUsageFreshness", () => {
+  it("says when the report was fetched", () => {
+    expect(formatUsageFreshness("now")).toBe("Updated just now");
+    expect(formatUsageFreshness("3m")).toBe("Updated 3m ago");
+    expect(formatUsageFreshness("Jan 15")).toBe("Updated Jan 15");
+  });
+});
+
+describe("resolveUsageRefresh", () => {
+  it("is pending while a refresh runs, even after an earlier failure", () => {
+    expect(resolveUsageRefresh({ isPending: true, error: new Error("boom") })).toBe("pending");
+  });
+
+  it("is failed after a refresh errors", () => {
+    expect(resolveUsageRefresh({ isPending: false, error: new Error("boom") })).toBe("failed");
+  });
+
+  it("is idle before and after a successful refresh", () => {
+    expect(resolveUsageRefresh({ isPending: false, error: null })).toBe("idle");
+  });
+});
+
+describe("replaceReport", () => {
+  const alpha = entry({ sourceId: "alpha", planLabel: "Old" });
+  const beta = entry({ sourceId: "beta" });
+
+  it("swaps only the refreshed report, in place", () => {
+    const refreshed = entry({ sourceId: "alpha", planLabel: "New" });
+    expect(replaceReport([alpha, beta], alpha.id, refreshed)).toEqual([refreshed, beta]);
+  });
+
+  it("drops a report the daemon no longer knows", () => {
+    expect(replaceReport([alpha, beta], alpha.id, null)).toEqual([beta]);
+  });
+});

packages/app/src/usage/model.ts

@@ -0,0 +1,126 @@
+import { formatCompactTimeAgoAsProse } from "@/utils/time";
+import { usageCopy } from "./copy";
+import type { UsageReport, UsageReportEntry, UsageView, UsageWindow } from "./types";
+
+export function usedPercent(window: UsageWindow): number | null {
+  if (window.usedPct != null) return window.usedPct;
+  if (window.remainingPct != null) return 100 - window.remainingPct;
+  return null;
+}
+
+/** The window the source marked as its headline. Sources own that choice; there is no fallback. */
+export function headlineWindow(report: UsageReport): UsageWindow | null {
+  return report.windows.find((window) => window.headline === true) ?? null;
+}
+
+export interface UsagePill {
+  icon: string | null;
+  sourceLabel: string;
+  /** Headline percent, else the plan label, else nothing beside the icon. */
+  text: string | null;
+}
+
+export function resolveUsagePill(input: {
+  supportsUsage: boolean;
+  entry: UsageReportEntry | null | undefined;
+}): UsagePill | null {
+  const { supportsUsage, entry } = input;
+  if (!supportsUsage || !entry) return null;
+  const window = headlineWindow(entry.report);
+  const percent = window ? usedPercent(window) : null;
+  return {
+    icon: entry.icon ?? null,
+    sourceLabel: entry.sourceLabel,
+    text:
+      percent != null
+        ? `${Math.round(Math.max(0, Math.min(100, percent)))}%`
+        : (entry.report.planLabel ?? null),
+  };
+}
+
+/** When a report was fetched, from its compact relative time: "Updated 3m ago". */
+export function formatUsageFreshness(compactTimeAgo: string): string {
+  return `${usageCopy.updated} ${formatCompactTimeAgoAsProse(compactTimeAgo)}`;
+}
+
+/** A user-requested refresh of one report. The previous report stays on screen throughout. */
+export type UsageRefresh = "idle" | "pending" | "failed";
+
+export function resolveUsageRefresh(mutation: {
+  isPending: boolean;
+  error: unknown;
+}): UsageRefresh {
+  if (mutation.isPending) return "pending";
+  if (mutation.error) return "failed";
+  return "idle";
+}
+
+/**
+ * A host's report list with one report swapped for its refreshed copy, in place.
+ * `null` means the daemon no longer knows the ID, so the report leaves the list.
+ */
+export function replaceReport(
+  reports: readonly UsageReportEntry[],
+  reportId: string,
+  refreshed: UsageReportEntry | null,
+): UsageReportEntry[] {
+  if (!refreshed) return reports.filter((report) => report.id !== reportId);
+  return reports.map((report) => (report.id === reportId ? refreshed : report));
+}
+
+export interface UsageQueryState {
+  data: UsageReportEntry[] | undefined;
+  error: unknown;
+  isFetching: boolean;
+}
+
+export function resolveUsageView(input: {
+  isConnected: boolean;
+  supportsUsage: boolean;
+  query: UsageQueryState | undefined;
+}): UsageView {
+  const { isConnected, supportsUsage, query } = input;
+  if (!isConnected) return { kind: "unavailable", message: usageCopy.hostUnavailable };
+  if (!supportsUsage) return { kind: "unavailable", message: usageCopy.hostUpgradeRequired };
+  if (query?.data) {
+    return { kind: "ready", reports: query.data, isRefreshing: query.isFetching };
+  }
+  if (query?.error) {
+    return {
+      kind: "error",
+      message: query.error instanceof Error ? query.error.message : String(query.error),
+    };
+  }
+  return { kind: "loading" };
+}
+
+export interface UsageHost {
+  serverId: string;
+  label: string;
+  isConnected: boolean;
+  supportsUsage: boolean;
+}
+
+export interface UsageHostGroup {
+  serverId: string;
+  label: string;
+  view: UsageView;
+}
+
+/** One group per connected host, in host order. */
+export function groupUsageByHost(
+  hosts: readonly UsageHost[],
+  queries: ReadonlyMap<string, UsageQueryState>,
+): UsageHostGroup[] {
+  return hosts
+    .filter((host) => host.isConnected)
+    .map((host) => ({
+      serverId: host.serverId,
+      label: host.label,
+      view: resolveUsageView({
+        isConnected: true,
+        supportsUsage: host.supportsUsage,
+        query: queries.get(host.serverId),
+      }),
+    }));
+}

packages/app/src/usage/queries.ts

@@ -0,0 +1,220 @@
+import { useCallback, useMemo } from "react";
+import { useMutation, useQueryClient, type QueryClient } from "@tanstack/react-query";
+import { useShallow } from "zustand/shallow";
+import { useFetchQueries, useFetchQuery } from "@/data/query";
+import {
+  getHostRuntimeStore,
+  useHostRuntimeConnectionStatuses,
+  useHostRuntimeIsConnected,
+  useHosts,
+} from "@/runtime/host-runtime";
+import { useSessionStore, type SessionState } from "@/stores/session-store";
+import { usageCopy } from "./copy";
+import {
+  groupUsageByHost,
+  replaceReport,
+  resolveUsagePill,
+  resolveUsageRefresh,
+  resolveUsageView,
+  type UsageHostGroup,
+  type UsagePill,
+  type UsageQueryState,
+  type UsageRefresh,
+} from "./model";
+import type { UsageReportEntry, UsageView } from "./types";
+
+// The daemon caches each report for five minutes, so re-reading it is cheap. Only
+// an explicit refresh passes `forceRefresh` and reaches the source's API.
+const REPORTS_STALE_TIME_MS = 60_000;
+
+function usageReportsQueryKey(serverId: string) {
+  return ["usage", "reports", serverId] as const;
+}
+
+function agentUsageQueryKey(serverId: string, agentId: string, model: string | null) {
+  return ["usage", "agent", serverId, agentId, model] as const;
+}
+
+function requireClient(serverId: string) {
+  const client = getHostRuntimeStore().getClient(serverId);
+  if (!client) throw new Error(usageCopy.clientUnavailable);
+  return client;
+}
+
+async function listReports(serverId: string, forceRefresh = false): Promise<UsageReportEntry[]> {
+  return (await requireClient(serverId).listUsageReports({ forceRefresh })).reports;
+}
+
+function reportQueryKey(serverId: string, reportId: string) {
+  return ["usage", "report", serverId, reportId] as const;
+}
+
+async function getReport(
+  serverId: string,
+  reportId: string,
+  forceRefresh = false,
+): Promise<UsageReportEntry | null> {
+  return (
+    (await requireClient(serverId).listUsageReports({ reportIds: [reportId], forceRefresh }))
+      .reports[0] ?? null
+  );
+}
+
+function supportsUsage(session: SessionState | undefined): boolean {
+  return session?.serverInfo?.features?.usageSources === true;
+}
+
+async function refreshReports(queryClient: QueryClient, serverId: string): Promise<void> {
+  await queryClient.fetchQuery({
+    queryKey: usageReportsQueryKey(serverId),
+    queryFn: async () => {
+      const reports = await listReports(serverId, true);
+      for (const report of reports)
+        queryClient.setQueryData(reportQueryKey(serverId, report.id), report);
+      return reports;
+    },
+    staleTime: 0,
+  });
+}
+
+function toQueryState(query: {
+  data: UsageReportEntry[] | undefined;
+  error: unknown;
+  isFetching: boolean;
+}): UsageQueryState {
+  return { data: query.data, error: query.error, isFetching: query.isFetching };
+}
+
+/** Usage reports for one host, as shown on its settings page. */
+export function useHostUsage(serverId: string): { view: UsageView; refresh: () => void } {
+  const queryClient = useQueryClient();
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const isSupported = useSessionStore((state) => supportsUsage(state.sessions[serverId]));
+  const query = useFetchQuery({
+    queryKey: usageReportsQueryKey(serverId),
+    queryFn: async () => {
+      const reports = await listReports(serverId);
+      for (const report of reports)
+        queryClient.setQueryData(reportQueryKey(serverId, report.id), report);
+      return reports;
+    },
+    enabled: isConnected && isSupported,
+    dataShape: "list",
+    staleTimeMs: REPORTS_STALE_TIME_MS,
+  });
+  const refresh = useCallback(() => {
+    void refreshReports(queryClient, serverId).catch(() => undefined);
+  }, [queryClient, serverId]);
+  const view = resolveUsageView({
+    isConnected,
+    supportsUsage: isSupported,
+    query: toQueryState(query),
+  });
+  return { view, refresh };
+}
+
+/** Usage reports for every connected host, grouped by host. */
+export function useUsageByHost(): {
+  groups: UsageHostGroup[];
+  refresh: (serverId: string) => void;
+} {
+  const queryClient = useQueryClient();
+  const hosts = useHosts();
+  const serverIds = useMemo(() => hosts.map((host) => host.serverId), [hosts]);
+  const connectionStatuses = useHostRuntimeConnectionStatuses(serverIds);
+  const supportedServerIds = useSessionStore(
+    useShallow((state) => serverIds.filter((serverId) => supportsUsage(state.sessions[serverId]))),
+  );
+  const usageHosts = useMemo(
+    () =>
+      hosts.map((host) => ({
+        serverId: host.serverId,
+        label: host.label,
+        isConnected: connectionStatuses.get(host.serverId) === "online",
+        supportsUsage: supportedServerIds.includes(host.serverId),
+      })),
+    [connectionStatuses, hosts, supportedServerIds],
+  );
+  const results = useFetchQueries<UsageReportEntry[]>(
+    usageHosts.map((host) => ({
+      queryKey: usageReportsQueryKey(host.serverId),
+      queryFn: () => listReports(host.serverId),
+      enabled: host.isConnected && host.supportsUsage,
+      dataShape: "list",
+      staleTimeMs: REPORTS_STALE_TIME_MS,
+    })),
+  );
+  const groups = groupUsageByHost(
+    usageHosts,
+    new Map(usageHosts.map((host, index) => [host.serverId, toQueryState(results[index])])),
+  );
+  const refresh = useCallback(
+    (serverId: string) => {
+      void refreshReports(queryClient, serverId).catch(() => undefined);
+    },
+    [queryClient],
+  );
+  return { groups, refresh };
+}
+
+/**
+ * The usage report for the account an agent is spending. The daemon resolves the
+ * report ID, which is re-resolved when the model changes (a new key) and when a
+ * turn completes (the query is paused while the agent runs, and its data is always
+ * stale, so resuming refetches). The report itself is read from the shared cache.
+ */
+export function useAgentUsage(
+  serverId: string,
+  agentId: string,
+): { pill: UsagePill | null; entry: UsageReportEntry | null } {
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const isSupported = useSessionStore((state) => supportsUsage(state.sessions[serverId]));
+  const { model, isRunning } = useSessionStore(
+    useShallow((state) => {
+      const agent = state.sessions[serverId]?.agents?.get(agentId);
+      return { model: agent?.model ?? null, isRunning: agent?.status === "running" };
+    }),
+  );
+  const identity = useFetchQuery({
+    queryKey: agentUsageQueryKey(serverId, agentId, model),
+    queryFn: async () =>
+      (await requireClient(serverId).resolveAgentUsageReport({ agentId })).reportId,
+    enabled: isConnected && isSupported && !isRunning,
+    dataShape: "value",
+    staleTimeMs: 0,
+  });
+  const reportId = identity.data ?? null;
+  const query = useFetchQuery({
+    queryKey: reportQueryKey(serverId, reportId ?? "none"),
+    queryFn: () => getReport(serverId, reportId!),
+    enabled: isConnected && isSupported && reportId !== null,
+    dataShape: "value",
+    staleTimeMs: REPORTS_STALE_TIME_MS,
+  });
+  const entry = isSupported ? (query.data ?? null) : null;
+  return { pill: resolveUsagePill({ supportsUsage: isSupported, entry }), entry };
+}
+
+/**
+ * Forces the source to fetch one report, and only that report. The result replaces
+ * the report wherever it is cached — its own entry and its host's list — so every
+ * surface showing it moves together; until then the previous report stays on screen.
+ */
+export function useReportRefresh(
+  serverId: string,
+  reportId: string,
+): { refresh: () => void; refreshState: UsageRefresh } {
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: () => getReport(serverId, reportId, true),
+    onSuccess: (report) => {
+      queryClient.setQueryData(reportQueryKey(serverId, reportId), report);
+      queryClient.setQueryData<UsageReportEntry[]>(usageReportsQueryKey(serverId), (reports) =>
+        reports ? replaceReport(reports, reportId, report) : reports,
+      );
+    },
+  });
+  const { mutate } = mutation;
+  const refresh = useCallback(() => mutate(), [mutate]);
+  return { refresh, refreshState: resolveUsageRefresh(mutation) };
+}

packages/app/src/usage/source-icon.tsx

@@ -0,0 +1,26 @@
+import { Gauge } from "lucide-react-native";
+import { withUnistyles } from "react-native-unistyles";
+import { SvgIcon } from "@/components/provider-icons";
+import type { Theme } from "@/styles/theme";
+
+function UsageSourceIconBase({
+  svg,
+  size,
+  color = "",
+}: {
+  svg: string | null;
+  size: number;
+  color?: string;
+}) {
+  if (!svg) return <Gauge size={size} color={color} />;
+  return <SvgIcon svg={svg} size={size} color={color} />;
+}
+
+const ThemedUsageSourceIcon = withUnistyles(UsageSourceIconBase);
+
+const mutedIconColor = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+/** The source's catalog SVG, or a generic gauge when the source ships none. */
+export function UsageSourceIcon({ svg, size }: { svg: string | null; size: number }) {
+  return <ThemedUsageSourceIcon svg={svg} size={size} uniProps={mutedIconColor} />;
+}

packages/app/src/usage/tone.ts

@@ -1,6 +1,6 @@
-import type { ProviderUsageTone } from "./types";
+import type { UsageTone } from "./types";
 
-export function deriveTone(usedPct: number | null | undefined): ProviderUsageTone {
+export function deriveTone(usedPct: number | null | undefined): UsageTone {
   if (usedPct == null) return "default";
   if (usedPct > 90) return "danger";
   if (usedPct >= 70) return "warning";

packages/app/src/usage/types.ts

@@ -0,0 +1,15 @@
+import type { ProviderUsageTone, UsageReportEntry } from "@getpaseo/protocol/messages";
+
+export type { UsageReportEntry };
+export type UsageReport = UsageReportEntry["report"];
+export type UsageTone = ProviderUsageTone;
+export type UsageWindow = UsageReport["windows"][number];
+export type UsageBalance = NonNullable<UsageReport["balances"]>[number];
+export type UsageBalanceUnit = UsageBalance["unit"];
+
+/** What a host's usage surface shows. `unavailable` is a host state, not a failed request. */
+export type UsageView =
+  | { kind: "unavailable"; message: string }
+  | { kind: "loading" }
+  | { kind: "error"; message: string }
+  | { kind: "ready"; reports: UsageReportEntry[]; isRefreshing: boolean };

packages/app/src/usage/usage-screen.tsx

@@ -0,0 +1,57 @@
+import { useCallback } from "react";
+import { useIsFocused } from "@react-navigation/native";
+import { router } from "expo-router";
+import { PageLayout } from "@/components/page-layout";
+import { usageCopy } from "./copy";
+import type { UsageHostGroup } from "./model";
+import { useUsageByHost } from "./queries";
+import { UsageMessage, UsageSection } from "./usage-section";
+
+// The screen is reachable by URL, so there may be no history to go back to.
+function leaveUsage(): void {
+  if (router.canGoBack()) {
+    router.back();
+    return;
+  }
+  router.replace("/");
+}
+
+export function UsageScreen() {
+  const isFocused = useIsFocused();
+  return (
+    <PageLayout title={usageCopy.title} onBack={leaveUsage} testID="usage-screen">
+      {isFocused ? <UsageScreenContent /> : null}
+    </PageLayout>
+  );
+}
+
+function UsageScreenContent() {
+  const { groups, refresh } = useUsageByHost();
+  return (
+    <>
+      {groups.length === 0 ? <UsageMessage text={usageCopy.noHosts} /> : null}
+      {groups.map((group) => (
+        <HostUsageGroup key={group.serverId} group={group} onRefresh={refresh} />
+      ))}
+    </>
+  );
+}
+
+function HostUsageGroup({
+  group,
+  onRefresh,
+}: {
+  group: UsageHostGroup;
+  onRefresh: (serverId: string) => void;
+}) {
+  const handleRefresh = useCallback(() => onRefresh(group.serverId), [group.serverId, onRefresh]);
+  return (
+    <UsageSection
+      serverId={group.serverId}
+      title={group.label}
+      view={group.view}
+      onRefresh={handleRefresh}
+      testID={`usage-host-${group.serverId}`}
+    />
+  );
+}

packages/app/src/usage/usage-section.tsx

@@ -0,0 +1,103 @@
+import { RefreshCw } from "lucide-react-native";
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { settingsStyles } from "@/styles/settings";
+import { SettingsSection } from "@/components/settings/headings/settings-section";
+import { usageCopy } from "./copy";
+import { UsageList } from "./list";
+import type { UsageView } from "./types";
+
+export function UsageSection({
+  serverId,
+  title,
+  view,
+  onRefresh,
+  testID,
+}: {
+  serverId: string;
+  title: string;
+  view: UsageView;
+  onRefresh: () => void;
+  testID?: string;
+}) {
+  const busy = view.kind === "loading" || (view.kind === "ready" && view.isRefreshing);
+
+  const refreshButton = useMemo(
+    () =>
+      view.kind === "unavailable" ? null : (
+        <Button
+          variant="ghost"
+          size="sm"
+          leftIcon={RefreshCw}
+          loading={busy}
+          onPress={onRefresh}
+          accessibilityLabel={usageCopy.refresh}
+        >
+          {busy ? usageCopy.refreshing : usageCopy.refresh}
+        </Button>
+      ),
+    [busy, onRefresh, view.kind],
+  );
+
+  return (
+    <SettingsSection title={title} testID={testID} trailing={refreshButton}>
+      <UsageBody serverId={serverId} view={view} onRefresh={onRefresh} />
+    </SettingsSection>
+  );
+}
+
+function UsageBody({
+  serverId,
+  view,
+  onRefresh,
+}: {
+  serverId: string;
+  view: UsageView;
+  onRefresh: () => void;
+}) {
+  if (view.kind === "unavailable") {
+    return <UsageMessage text={view.message} />;
+  }
+
+  if (view.kind === "loading") {
+    return <UsageMessage text={usageCopy.loading} />;
+  }
+
+  if (view.kind === "error") {
+    return (
+      <Alert size="sm" variant="error" title={usageCopy.errorTitle} description={view.message}>
+        <Button variant="outline" size="sm" onPress={onRefresh}>
+          {usageCopy.retry}
+        </Button>
+      </Alert>
+    );
+  }
+
+  if (view.reports.length === 0) {
+    return <UsageMessage text={usageCopy.empty} />;
+  }
+
+  return <UsageList serverId={serverId} reports={view.reports} />;
+}
+
+export function UsageMessage({ text }: { text: string }) {
+  return (
+    <View style={[settingsStyles.card, styles.emptyCard]}>
+      <Text style={styles.emptyText}>{text}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  emptyCard: {
+    padding: theme.spacing[4],
+    alignItems: "center",
+  },
+  emptyText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.base,
+  },
+}));

packages/app/src/usage/window-bar.tsx

@@ -2,16 +2,11 @@ import { useMemo } from "react";
 import { Text, View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { clampPct, formatPct, formatResetLabel } from "./format";
+import { usedPercent } from "./model";
 import { deriveTone } from "./tone";
-import type { ProviderUsageTone, ProviderUsageWindow } from "./types";
+import type { UsageTone, UsageWindow } from "./types";
 
-function resolveUsedPct(window: ProviderUsageWindow): number | null {
-  if (window.usedPct != null) return window.usedPct;
-  if (window.remainingPct != null) return 100 - window.remainingPct;
-  return null;
-}
-
-function fillToneStyle(tone: ProviderUsageTone) {
+function fillToneStyle(tone: UsageTone) {
   switch (tone) {
     case "ok":
       return styles.fillOk;
@@ -24,8 +19,8 @@ function fillToneStyle(tone: ProviderUsageTone) {
   }
 }
 
-export function ProviderUsageWindowBar({ window }: { window: ProviderUsageWindow }) {
-  const usedPct = resolveUsedPct(window);
+export function UsageWindowBar({ window }: { window: UsageWindow }) {
+  const usedPct = usedPercent(window);
   const tone = window.tone ?? deriveTone(usedPct);
 
   const fillWidth = clampPct(usedPct ?? 0);

packages/app/src/utils/host-routes.ts

@@ -428,6 +428,10 @@ export function buildSchedulesRoute() {
   return "/schedules" as const;
 }
 
+export function buildUsageRoute() {
+  return "/usage" as const;
+}
+
 export function buildOpenProjectRoute() {
   return "/open-project" as const;
 }

packages/app/src/utils/time.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect } from "vitest";
 import {
   describeCompactTimeAgo,
   formatCompactTimeAgo,
+  formatCompactTimeAgoAsProse,
   formatDuration,
   formatMessageTimestamp,
   formatTimeAgo,
@@ -63,6 +64,15 @@ describe("describeCompactTimeAgo", () => {
   });
 });
 
+describe("formatCompactTimeAgoAsProse", () => {
+  it("puts elapsed labels back into prose and leaves dates alone", () => {
+    expect(formatCompactTimeAgoAsProse("now")).toBe("just now");
+    expect(formatCompactTimeAgoAsProse("3m")).toBe("3m ago");
+    expect(formatCompactTimeAgoAsProse("2h")).toBe("2h ago");
+    expect(formatCompactTimeAgoAsProse("Jan 15")).toBe("Jan 15");
+  });
+});
+
 describe("formatDuration", () => {
   it("renders sub-minute durations as whole seconds", () => {
     expect(formatDuration(0)).toBe("0s");

packages/app/src/utils/time.ts

@@ -91,6 +91,16 @@ export function formatCompactTimeAgo(date: Date, now: Date = new Date()): string
   return describeCompactTimeAgo(date, now).label;
 }
 
+/**
+ * A compact label put back into a sentence, for a tooltip or a line with room for prose:
+ * "now" → "just now", "5m" → "5m ago", "Jan 15" stays a date.
+ */
+export function formatCompactTimeAgoAsProse(label: string): string {
+  if (label === "now") return "just now";
+  if (/^\d/.test(label)) return `${label} ago`;
+  return label;
+}
+
 /**
  * How many local midnights lie between two instants: 0 for the same day, 1 for yesterday.
  * Counted on the calendar rather than in elapsed time, so six days and 23 hours ago on

packages/app/src/workspace-tabs/open-beside.ts

@@ -4,7 +4,6 @@ import {
   collectAllPanes,
   DEFAULT_PANE_ID,
   findPaneById,
-  findPaneContainingTab,
   useWorkspaceLayoutStore,
   type WorkspaceTabPlacement,
 } from "@/stores/workspace-layout-store";
@@ -110,10 +109,6 @@ export function openWorkspaceTargetAtLocation(
   if (shouldOpenBeside && !targetAlreadyExists) {
     const paneId = store.ensureSidePane(input.workspaceKey);
     placement = paneId ? { mode: "prefer", paneId } : undefined;
-  } else if (!shouldOpenBeside && layout && input.parentTabId) {
-    // A target opened from a tab belongs in that tab's pane, whichever pane has focus.
-    const parentPane = findPaneContainingTab(layout.root, input.parentTabId);
-    placement = parentPane ? { mode: "prefer", paneId: parentPane.id } : undefined;
   }
   return store.openTab({
     workspaceKey: input.workspaceKey,

packages/app/src/workspace/file-open/index.test.ts

@@ -136,24 +136,6 @@ describe("resolveWorkspaceFilePaths", () => {
     });
   });
 
-  it("resolves files under a drive-root workspace without doubling the separator", () => {
-    expect(resolveWorkspaceFilePaths({ path: "C:/src/app.ts", workspaceRoot: "C:\\" })).toEqual({
-      absolutePath: "C:/src/app.ts",
-      relativePath: "src/app.ts",
-    });
-    expect(resolveWorkspaceFilePaths({ path: "src/app.ts", workspaceRoot: "C:\\" })).toEqual({
-      absolutePath: "C:/src/app.ts",
-      relativePath: "src/app.ts",
-    });
-  });
-
-  it("resolves files under the POSIX root workspace", () => {
-    expect(resolveWorkspaceFilePaths({ path: "/src/app.ts", workspaceRoot: "/" })).toEqual({
-      absolutePath: "/src/app.ts",
-      relativePath: "src/app.ts",
-    });
-  });
-
   it("returns null for home-relative paths that cannot be anchored", () => {
     expect(
       resolveWorkspaceFilePaths({ path: "~/notes.md", workspaceRoot: "/Users/me/repo" }),

packages/app/src/workspace/file-open/index.ts

@@ -129,17 +129,6 @@ function startsWithPath(value: string, prefix: string): boolean {
     : value.startsWith(prefix);
 }
 
-function pathWithinRoot(root: string, relativePath: string): string {
-  return root.endsWith("/") ? `${root}${relativePath}` : `${root}/${relativePath}`;
-}
-
-/** Whether an absolute path names the workspace directory itself. */
-export function isWorkspaceRootPath(input: { path: string; workspaceRoot: string }): boolean {
-  const path = normalizeAbsolutePath(input.path.trim().replace(/\\/g, "/"));
-  const root = normalizeAbsolutePath(input.workspaceRoot.trim().replace(/\\/g, "/"));
-  return path !== null && root !== null && pathsEqual(path, root);
-}
-
 export interface ResolvedWorkspaceFilePaths {
   /** Absolute path on the host, suitable for opening in an editor / file manager. */
   absolutePath: string;
@@ -170,7 +159,7 @@ export function resolveWorkspaceFilePaths(input: {
     if (pathsEqual(normalizedFile, workspaceRoot)) {
       return null;
     }
-    const prefix = pathWithinRoot(workspaceRoot, "");
+    const prefix = `${workspaceRoot}/`;
     const relativePath = startsWithPath(normalizedFile, prefix)
       ? normalizedFile.slice(prefix.length)
       : null;
@@ -185,5 +174,5 @@ export function resolveWorkspaceFilePaths(input: {
   if (!relativePath) {
     return null;
   }
-  return { absolutePath: pathWithinRoot(workspaceRoot, relativePath), relativePath };
+  return { absolutePath: `${workspaceRoot}/${relativePath}`, relativePath };
 }

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/cli",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Paseo CLI - control your AI coding agents from the command line",
   "bin": {
     "paseo": "bin/paseo"
@@ -28,9 +28,9 @@
   },
   "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",

packages/cli/tests/15-provider.test.ts

@@ -82,15 +82,10 @@ const EXPECTED_CLAUDE_MODELS = [
     model: "Opus 4.8",
     descriptionFragment: "Previous release",
   },
-  {
-    id: "claude-sonnet-5-5",
-    model: "Sonnet 5.5",
-    descriptionFragment: "Best for everyday tasks",
-  },
   {
     id: "claude-sonnet-5",
     model: "Sonnet 5",
-    descriptionFragment: "Previous release",
+    descriptionFragment: "Best for everyday tasks",
   },
   {
     id: "claude-opus-4-7[1m]",
@@ -435,7 +430,7 @@ try {
       "--quiet should print the same ordered model IDs returned by --json",
     );
     assert(
-      claudeModelsFromJson.some((m) => m.id === "claude-sonnet-5-5"),
+      claudeModelsFromJson.some((m) => m.id === "claude-sonnet-5"),
       "captured --json output should include the current Claude everyday model id",
     );
     console.log("✓ provider models --quiet outputs model IDs only\n");

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/client",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Paseo client SDK package",
   "files": [
     "dist",
@@ -39,8 +39,8 @@
     "test": "vitest run"
   },
   "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": {

packages/client/src/daemon-client.ts

@@ -94,6 +94,8 @@ import type {
   RefreshProvidersSnapshotResponseMessage,
   ProviderDiagnosticResponseMessage,
   ProviderUsageListResponseMessage,
+  UsageListReportsResponseMessage,
+  AgentResolveUsageReportResponseMessage,
   DaemonGetStatusResponse,
   DaemonGetPairingOfferResponse,
   DaemonConfigReloadResponse,
@@ -559,6 +561,8 @@ type GetProvidersSnapshotPayload = GetProvidersSnapshotResponseMessage["payload"
 type RefreshProvidersSnapshotPayload = RefreshProvidersSnapshotResponseMessage["payload"];
 type ProviderDiagnosticPayload = ProviderDiagnosticResponseMessage["payload"];
 type ProviderUsageListPayload = ProviderUsageListResponseMessage["payload"];
+type UsageListReportsPayload = UsageListReportsResponseMessage["payload"];
+type AgentResolveUsageReportPayload = AgentResolveUsageReportResponseMessage["payload"];
 type DaemonStatusPayload = DaemonGetStatusResponse["payload"];
 type DaemonPairingOfferPayload = DaemonGetPairingOfferResponse["payload"];
 type DiagnosticsPayload = DiagnosticsResponse["payload"];
@@ -5238,6 +5242,34 @@ export class DaemonClient {
     });
   }
 
+  async listUsageReports(options?: {
+    requestId?: string;
+    forceRefresh?: boolean;
+    reportIds?: string[];
+  }): Promise<UsageListReportsPayload> {
+    return this.sendNamespacedCorrelatedSessionRequest({
+      requestId: options?.requestId,
+      message: {
+        type: "usage.list_reports.request",
+        forceRefresh: options?.forceRefresh,
+        reportIds: options?.reportIds,
+      },
+    });
+  }
+
+  async resolveAgentUsageReport(options: {
+    agentId: string;
+    requestId?: string;
+  }): Promise<AgentResolveUsageReportPayload> {
+    return this.sendNamespacedCorrelatedSessionRequest({
+      requestId: options.requestId,
+      message: {
+        type: "agent.resolve_usage_report.request",
+        agentId: options.agentId,
+      },
+    });
+  }
+
   async listCommands(options: ListCommandsOptions): Promise<ListCommandsPayload>;
   async listCommands(agentId: string, requestId?: string): Promise<ListCommandsPayload>;
   async listCommands(

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/desktop",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "private": true,
   "description": "Paseo desktop app (Electron wrapper)",
   "homepage": "https://paseo.sh",

packages/expo-two-way-audio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/expo-two-way-audio",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Native module for two way audio streaming",
   "keywords": [
     "ExpoTwoWayAudio",

packages/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/highlight",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "files": [
     "dist",
     "!dist/**/*.map",

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/plugin",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Paseo plugin SDK package",
   "files": [
     "dist",
@@ -23,6 +23,11 @@
       "source": "./src/server/provider.ts",
       "default": "./dist/server/provider.js"
     },
+    "./server/usage": {
+      "types": "./dist/server/usage.d.ts",
+      "source": "./src/server/usage.ts",
+      "default": "./dist/server/usage.js"
+    },
     "./server/acp": {
       "types": "./dist/server/acp.d.ts",
       "source": "./src/server/acp.ts",
@@ -65,8 +70,8 @@
     "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",
@@ -76,8 +81,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"

packages/plugin/src/boundaries.test.ts

@@ -10,6 +10,7 @@ const entries = {
   ".": "shared",
   "./server": "server",
   "./server/provider": "server",
+  "./server/usage": "server",
   "./server/acp": "server",
   "./client": "client",
   "./client/host": "client",

packages/plugin/src/server/contracts.ts

@@ -3,6 +3,7 @@ import type { ZodType, input as ZodInput, output as ZodOutput } from "zod";
 import type { PluginRpcContract } from "../rpc.js";
 import type { PluginCleanup } from "../contracts.js";
 import type { ProviderRegistration } from "./provider.js";
+import type { UsageSourceRegistration } from "./usage.js";
 import type { PluginLifecycleRegistration } from "./lifecycle.js";
 
 export interface PluginHandlerContext {
@@ -38,6 +39,7 @@ export interface PluginServerContext extends PluginLifecycleRegistration {
     ) => ZodInput<OutputSchema> | Promise<ZodInput<OutputSchema>>,
   ): void;
   registerProvider(provider: ProviderRegistration): void;
+  registerUsageSource(source: UsageSourceRegistration): void;
 }
 
 export type PluginServerContribution = (server: PluginServerContext) => PluginCleanup;

packages/plugin/src/server/index.ts

@@ -1,3 +1,10 @@
+export type {
+  UsageSourceRegistration,
+  UsageReport,
+  UsageWindow,
+  UsageBalance,
+  UsageDetail,
+} from "./usage.js";
 export type {
   PluginHandlerContext,
   PluginServerContext,

packages/plugin/src/server/provider.ts

@@ -18,6 +18,7 @@ export const PROVIDER_CAPABILITIES = [
   "session.revert.files",
   "session.subsession",
   "session.unarchive",
+  "session.usage_reference",
   "permission",
   "permission.tool_policy",
   "timeline.plugin",
@@ -227,6 +228,7 @@ export type ProviderInput =
     }
   | { type: "session.prompt"; sessionId: string; prompt: ProviderPrompt }
   | { type: "session.interrupt"; requestId: string; sessionId: string }
+  | { type: "session.usage_reference"; requestId: string; sessionId: string }
   | {
       type: "session.permission";
       sessionId: string;
@@ -526,6 +528,11 @@ export type ProviderEvent =
   | { type: "catalog"; requestId: string; catalog: ProviderCatalog }
   | { type: "sessions"; requestId: string; sessions: ProviderSessionSummary[] }
   | { type: "request.completed"; requestId: string }
+  | {
+      type: "usage_reference";
+      requestId: string;
+      reference: { source: string; input: JsonValue } | null;
+    }
   | { type: "request.failed"; requestId: string; error: ProviderError }
   | {
       type: "session.opened";
@@ -609,6 +616,8 @@ export function requiredProviderCapabilities(input: ProviderInput): readonly Pro
     case "session.interrupt":
     case "session.close":
       return [];
+    case "session.usage_reference":
+      return ["session.usage_reference"];
     case "sessions":
       return ["session.list"];
     case "session.open": {
@@ -887,6 +896,13 @@ export const ProviderInputSchema: z.ZodType<ProviderInput> = z.discriminatedUnio
   z
     .object({ type: z.literal("session.interrupt"), requestId: idSchema, sessionId: idSchema })
     .strict(),
+  z
+    .object({
+      type: z.literal("session.usage_reference"),
+      requestId: idSchema,
+      sessionId: idSchema,
+    })
+    .strict(),
   z
     .object({
       type: z.literal("session.permission"),
@@ -1272,6 +1288,13 @@ export const ProviderEventSchema: z.ZodType<ProviderEvent> = z.discriminatedUnio
     })
     .strip(),
   z.object({ type: z.literal("request.completed"), requestId: idSchema }).strip(),
+  z
+    .object({
+      type: z.literal("usage_reference"),
+      requestId: idSchema,
+      reference: z.object({ source: idSchema, input: z.json() }).nullable(),
+    })
+    .strip(),
   z
     .object({ type: z.literal("request.failed"), requestId: idSchema, error: providerErrorSchema })
     .strip(),

packages/plugin/src/server/usage.test.ts

@@ -1,5 +1,41 @@
-import { describe, expect, it } from "vitest";
-import { balanceToneFromRemaining, toneFromUsedPct, usedPctOf } from "./usage.js";
+import { describe, expect, it, test } from "vitest";
+import {
+  balanceToneFromRemaining,
+  toneFromUsedPct,
+  usedPctOf,
+  windowFromUsedPct,
+} from "./usage.js";
+
+test("shared usage tones preserve the app threshold contract", () => {
+  expect([null, 69.9, 70, 90, 90.1].map(toneFromUsedPct)).toEqual([
+    "default",
+    "ok",
+    "warning",
+    "warning",
+    "danger",
+  ]);
+  expect([null, 0, 0.01].map(balanceToneFromRemaining)).toEqual(["default", "danger", "ok"]);
+});
+
+test("shared windows retain percentage, reset time, and optional headline", () => {
+  expect(windowFromUsedPct({ id: "a", label: "A", utilizationPct: 30, headline: true })).toEqual({
+    id: "a",
+    label: "A",
+    usedPct: 30,
+    remainingPct: 70,
+    resetsAt: null,
+    headline: true,
+  });
+  expect(windowFromUsedPct({ id: "b", label: "B", utilizationPct: null })).toEqual({
+    id: "b",
+    label: "B",
+    usedPct: null,
+    remainingPct: null,
+    resetsAt: null,
+  });
+  expect(usedPctOf(25, 100)).toBe(25);
+  expect(usedPctOf(25, 0)).toBeNull();
+});
 
 describe("toneFromUsedPct", () => {
   // Thresholds must match deriveTone in the app's provider-usage/tone.ts, which is what

packages/plugin/src/server/usage.ts

@@ -1,50 +1,55 @@
-import { z } from "zod";
-import type {
-  ProviderUsage,
-  ProviderUsageBalance,
-  ProviderUsageTone,
-  ProviderUsageWindow,
-} from "../../server/messages.js";
-import type { ProviderApiFetch } from "./provider.js";
+import { createHash } from "node:crypto";
+import type { ZodType } from "zod";
+import type { JsonValue } from "@getpaseo/protocol/agent-types";
 
-const PROVIDER_HTTP_TIMEOUT_MS = 15_000;
-
-export const ApiNumberSchema = z.coerce.number().finite();
-export const ApiNullableNumberSchema = z.preprocess(
-  (value) => (value == null ? null : value),
-  ApiNumberSchema.nullable(),
-);
-export const ApiOptionalStringSchema = z.preprocess(
-  (value) => (value == null ? undefined : value),
-  z.coerce.string().optional(),
-);
-
-export function fetchProviderApi(
-  fetchApi: ProviderApiFetch,
-  input: RequestInfo | URL,
-  init: RequestInit = {},
-): Promise<Response> {
-  return fetchApi(input, {
-    ...init,
-    signal: init.signal ?? AbortSignal.timeout(PROVIDER_HTTP_TIMEOUT_MS),
-  });
+export interface UsageWindow {
+  id: string;
+  label: string;
+  usedPct?: number | null;
+  remainingPct?: number | null;
+  resetsAt?: string | null;
+  runsOutAt?: string | null;
+  shortfallPct?: number | null;
+  tone?: "default" | "ok" | "warning" | "danger";
+  headline?: boolean;
 }
 
-export function unavailableUsage(provider: {
-  providerId: string;
-  displayName: string;
-  error?: string | null;
-}): ProviderUsage {
-  return {
-    providerId: provider.providerId,
-    displayName: provider.displayName,
-    status: provider.error ? "error" : "unavailable",
-    planLabel: null,
-    windows: [],
-    balances: [],
-    details: [],
-    error: provider.error ?? null,
-  };
+export interface UsageBalance {
+  id: string;
+  label: string;
+  used?: number | null;
+  remaining?: number | null;
+  limit?: number | null;
+  unit: "usd" | "credits" | "requests" | "tokens";
+  resetsAt?: string | null;
+  tone?: UsageWindow["tone"];
+}
+
+export interface UsageDetail {
+  id: string;
+  label: string;
+  value: string;
+  tone?: UsageWindow["tone"];
+}
+
+export interface UsageReport {
+  status: "available" | "unavailable" | "error";
+  planLabel?: string;
+  windows: UsageWindow[];
+  balances?: UsageBalance[];
+  details?: UsageDetail[];
+  error?: string;
+}
+
+export interface UsageSourceRegistration {
+  id: string;
+  label: string;
+  icon?: string;
+  input: ZodType;
+  /** Stable account identity, resolved without fetching usage. */
+  identify(input: unknown): Promise<{ key: string; label?: string } | null>;
+  fetch(input: unknown): Promise<UsageReport>;
+  discover?(): Promise<JsonValue[]>;
 }
 
 export function windowFromUsedPct(input: {
@@ -52,19 +57,19 @@ export function windowFromUsedPct(input: {
   label: string;
   utilizationPct: number | null | undefined;
   resetsAt?: string | null;
-  tone?: ProviderUsageWindow["tone"];
-}): ProviderUsageWindow {
+  tone?: UsageWindow["tone"];
+  headline?: boolean;
+}): UsageWindow {
   const usedPct = typeof input.utilizationPct === "number" ? input.utilizationPct : null;
-  const window: ProviderUsageWindow = {
+  const window: UsageWindow = {
     id: input.id,
     label: input.label,
     usedPct,
     remainingPct: usedPct === null ? null : Math.max(0, 100 - usedPct),
     resetsAt: input.resetsAt ?? null,
   };
-  if (input.tone) {
-    window.tone = input.tone;
-  }
+  if (input.tone) window.tone = input.tone;
+  if (input.headline) window.headline = true;
   return window;
 }
 
@@ -76,7 +81,7 @@ export function windowFromUsedPct(input: {
  * "default" because that is what every provider setting a tone has always sent, and it is
  * what the bars render today below their thresholds.
  */
-export function toneFromUsedPct(usedPct: number | null | undefined): ProviderUsageTone {
+export function toneFromUsedPct(usedPct: number | null | undefined): UsageWindow["tone"] {
   if (typeof usedPct !== "number") return "default";
   if (usedPct > 90) return "danger";
   if (usedPct >= 70) return "warning";
@@ -90,7 +95,7 @@ export function toneFromUsedPct(usedPct: number | null | undefined): ProviderUsa
  */
 export function balanceToneFromRemaining(
   remaining: number | null | undefined,
-): ProviderUsageBalance["tone"] {
+): UsageBalance["tone"] {
   if (typeof remaining !== "number") return "default";
   if (remaining <= 0) return "danger";
   return "ok";
@@ -105,7 +110,15 @@ export function usedPctOf(
   return (used / limit) * 100;
 }
 
-export function toIsoStringOrNull(timestampMs: number): string | null {
-  const date = new Date(timestampMs);
-  return Number.isFinite(date.getTime()) ? date.toISOString() : null;
+export function hashAccountKey(value: string): string {
+  return createHash("sha256").update(value).digest("hex");
+}
+
+export function unavailableUsage(): UsageReport {
+  return {
+    status: "unavailable",
+    windows: [],
+    balances: [],
+    details: [],
+  };
 }

packages/protocol/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/protocol",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Paseo shared protocol schemas and wire types",
   "files": [
     "dist",

packages/protocol/src/messages.ts

@@ -1774,6 +1774,18 @@ export const ProviderUsageListRequestMessageSchema = z.object({
   requestId: z.string(),
 });
 
+export const UsageListReportsRequestMessageSchema = z.object({
+  type: z.literal("usage.list_reports.request"),
+  requestId: z.string(),
+  reportIds: z.array(z.string()).optional(),
+  forceRefresh: z.boolean().optional(),
+});
+export const AgentResolveUsageReportRequestMessageSchema = z.object({
+  type: z.literal("agent.resolve_usage_report.request"),
+  requestId: z.string(),
+  agentId: z.string(),
+});
+
 export const ResumeAgentRequestMessageSchema = z.object({
   type: z.literal("resume_agent_request"),
   handle: AgentPersistenceHandleSchema,
@@ -3232,6 +3244,8 @@ export const SessionInboundMessageSchema = z.discriminatedUnion("type", [
   RefreshProvidersSnapshotRequestMessageSchema,
   ProviderDiagnosticRequestMessageSchema,
   ProviderUsageListRequestMessageSchema,
+  UsageListReportsRequestMessageSchema,
+  AgentResolveUsageReportRequestMessageSchema,
   ResumeAgentRequestMessageSchema,
   ImportAgentRequestMessageSchema,
   RefreshAgentRequestMessageSchema,
@@ -3534,6 +3548,7 @@ export const ServerInfoStatusPayloadSchema = z
         // COMPAT(hubAgentRpc): added in v0.8.0; remove gate after 2027-03-05.
         hubAgentRpc: z.boolean().optional(),
         providersSnapshot: z.boolean().optional(),
+        usageSources: z.boolean().optional(),
         // COMPAT(providersSnapshotCwd): added in v0.3.2, remove gate after 2027-02-10.
         providersSnapshotCwd: z.boolean().optional(),
         // COMPAT(directorySync): added in v0.3.x, remove gate after 2027-02-12.
@@ -6228,6 +6243,32 @@ export const ProviderUsageListResponseMessageSchema = z.object({
   }),
 });
 
+export const UsageReportSchema = z.object({
+  status: ProviderUsageStatusSchema,
+  planLabel: z.string().optional(),
+  windows: z.array(ProviderUsageWindowSchema.extend({ headline: z.boolean().optional() })),
+  balances: z.array(ProviderUsageBalanceSchema).optional(),
+  details: z.array(ProviderUsageDetailSchema).optional(),
+  error: z.string().optional(),
+});
+export const UsageReportEntrySchema = z.object({
+  id: z.string(),
+  account: z.object({ label: z.string().optional() }),
+  fetchedAt: z.string(),
+  sourceId: z.string(),
+  sourceLabel: z.string(),
+  icon: z.string().optional(),
+  report: UsageReportSchema,
+});
+export const UsageListReportsResponseMessageSchema = z.object({
+  type: z.literal("usage.list_reports.response"),
+  payload: z.object({ requestId: z.string(), reports: z.array(UsageReportEntrySchema) }),
+});
+export const AgentResolveUsageReportResponseMessageSchema = z.object({
+  type: z.literal("agent.resolve_usage_report.response"),
+  payload: z.object({ requestId: z.string(), reportId: z.string().nullable() }),
+});
+
 const AgentSlashCommandSchema = z.object({
   name: z.string(),
   description: z.string(),
@@ -6913,6 +6954,8 @@ export const SessionOutboundMessageSchema = z.discriminatedUnion("type", [
   RefreshProvidersSnapshotResponseMessageSchema,
   ProviderDiagnosticResponseMessageSchema,
   ProviderUsageListResponseMessageSchema,
+  UsageListReportsResponseMessageSchema,
+  AgentResolveUsageReportResponseMessageSchema,
   ListCommandsResponseSchema,
   ListTerminalsResponseSchema,
   TerminalsChangedSchema,
@@ -7091,6 +7134,12 @@ export type ProviderDiagnosticResponseMessage = z.infer<
   typeof ProviderDiagnosticResponseMessageSchema
 >;
 export type ProviderUsageTone = z.infer<typeof ProviderUsageToneSchema>;
+export type UsageReport = z.infer<typeof UsageReportSchema>;
+export type UsageReportEntry = z.infer<typeof UsageReportEntrySchema>;
+export type UsageListReportsResponseMessage = z.infer<typeof UsageListReportsResponseMessageSchema>;
+export type AgentResolveUsageReportResponseMessage = z.infer<
+  typeof AgentResolveUsageReportResponseMessageSchema
+>;
 export type ProviderUsageStatus = z.infer<typeof ProviderUsageStatusSchema>;
 export type ProviderUsage = z.infer<typeof ProviderUsageSchema>;
 export type ProviderUsageWindow = z.infer<typeof ProviderUsageWindowSchema>;

packages/relay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/relay",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Paseo relay for bridging daemon and client connections",
   "files": [
     "dist",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/server",
-  "version": "0.10.2",
+  "version": "0.10.0",
   "description": "Paseo backend server",
   "files": [
     "dist/server",
@@ -73,7 +73,7 @@
     "clean": "node ../../scripts/clean-package-dist.mjs",
     "build": "npm run build:lib && npm run build:scripts",
     "build:clean": "npm run clean && npm run build",
-    "build:lib": "tsc -p tsconfig.server.json --incremental false && node scripts/build-opencode-bridge-plugin.mjs && node -e \"const fs=require('node:fs'); fs.mkdirSync('dist/server/server/speech/providers/local/sherpa/assets',{recursive:true}); fs.copyFileSync('src/server/speech/providers/local/sherpa/assets/silero_vad.onnx','dist/server/server/speech/providers/local/sherpa/assets/silero_vad.onnx'); fs.cpSync('src/terminal/shell-integration','dist/server/terminal/shell-integration',{recursive:true}); fs.cpSync('src/terminal/shell-integration','dist/src/terminal/shell-integration',{recursive:true}); fs.copyFileSync('src/terminal/terminal-ts-loader.mjs','dist/server/terminal/terminal-ts-loader.mjs'); fs.rmSync('dist/server/skills',{recursive:true,force:true}); fs.cpSync('../../skills','dist/server/skills',{recursive:true});\"",
+    "build:lib": "tsc -p tsconfig.server.json --incremental false && node scripts/build-opencode-bridge-plugin.mjs && node -e \"const fs=require('node:fs'); fs.mkdirSync('dist/server/server/speech/providers/local/sherpa/assets',{recursive:true}); fs.copyFileSync('src/server/speech/providers/local/sherpa/assets/silero_vad.onnx','dist/server/server/speech/providers/local/sherpa/assets/silero_vad.onnx'); fs.cpSync('src/terminal/shell-integration','dist/server/terminal/shell-integration',{recursive:true}); fs.cpSync('src/terminal/shell-integration','dist/src/terminal/shell-integration',{recursive:true}); fs.copyFileSync('src/terminal/terminal-ts-loader.mjs','dist/server/terminal/terminal-ts-loader.mjs'); fs.rmSync('dist/server/skills',{recursive:true,force:true}); fs.cpSync('../../skills','dist/server/skills',{recursive:true}); fs.rmSync('dist/server/builtin-plugins',{recursive:true,force:true}); fs.cpSync('../../plugins','dist/server/builtin-plugins',{recursive:true,filter:(source)=>!source.split(require('node:path').sep).includes('node_modules')&&!/\\.(test|spec)\\.[cm]?[jt]sx?$/.test(source)&&!source.endsWith('.tsbuildinfo')});\"",
     "build:scripts": "tsc -p tsconfig.scripts.json --incremental false && node -e \"const fs=require('node:fs'); fs.mkdirSync('dist/scripts',{recursive:true}); fs.copyFileSync('scripts/mcp-stdio-socket-bridge-cli.mjs','dist/scripts/mcp-stdio-socket-bridge-cli.mjs');\"",
     "prepack": "npm run build:clean && npm --prefix ../.. run build:daemon-web-ui",
     "start": "node dist/scripts/supervisor-entrypoint.js",
@@ -107,11 +107,11 @@
     "@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",
@@ -144,6 +144,7 @@
     "uuid": "^9.0.1",
     "which": "^5.0.0",
     "ws": "^8.14.2",
+    "yaml": "2.9.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {

packages/server/src/server/agent/agent-manager.test.ts

@@ -4851,53 +4851,6 @@ test("persists live mode, model, and thinking changes without an external snapsh
   expect(persisted?.runtimeInfo?.model).toBe("gpt-5.4");
 });
 
-test("model changes persist the resolved thinking and fresh provider handle before another turn", async () => {
-  const workdir = mkdtempSync(join(tmpdir(), "agent-manager-model-selection-"));
-  class ModelSession extends TestAgentSession {
-    selection = { model: "source", thinkingOptionId: "medium" as string | undefined };
-    async setModel(model: string | null) {
-      this.selection = { model: model ?? "default", thinkingOptionId: undefined };
-      this.pushEvent({
-        type: "thinking_option_changed",
-        provider: "codex",
-        thinkingOptionId: null,
-      });
-    }
-    describePersistence() {
-      return { provider: "codex" as const, sessionId: this.id, metadata: { ...this.selection } };
-    }
-  }
-  class ModelClient extends TestAgentClient {
-    async createSession(config: AgentSessionConfig) {
-      return new ModelSession(config);
-    }
-  }
-  const storage = new AgentStorage(join(workdir, "agents"), logger);
-  const manager = new AgentManager({
-    clients: { codex: new ModelClient() },
-    registry: storage,
-    logger,
-  });
-  try {
-    const agent = await manager.createAgent(
-      { provider: "codex", cwd: workdir, model: "source", thinkingOptionId: "medium" },
-      undefined,
-      { workspaceId: undefined },
-    );
-    await manager.setAgentModel(agent.id, "target");
-    await manager.flush();
-    const stored = await storage.get(agent.id);
-    expect(stored?.config?.model).toBe("target");
-    expect(stored?.config?.thinkingOptionId).toBeUndefined();
-    expect(stored?.persistence?.metadata?.model).toBe("target");
-    expect(stored?.persistence?.metadata?.thinkingOptionId).toBeUndefined();
-  } finally {
-    for (const agent of manager.listAgents()) await manager.closeAgent(agent.id);
-    await manager.flush();
-    rmSync(workdir, { recursive: true, force: true });
-  }
-});
-
 test("later explicit config mutations win over events emitted by earlier mutations", async () => {
   const workdir = mkdtempSync(join(tmpdir(), "agent-manager-config-mutation-order-"));
   class ConfigMutationSession extends TestAgentSession {

packages/server/src/server/agent/agent-manager.ts

@@ -1943,7 +1943,6 @@ export class AgentManager {
     if (agent.runtimeInfo) {
       agent.runtimeInfo = { ...agent.runtimeInfo, model: normalizedModelId };
     }
-    this.refreshSessionPersistence(agent);
     this.touchUpdatedAt(agent);
     this.emitState(agent);
   }

packages/server/src/server/agent/agent-sdk-types.ts

@@ -660,6 +660,11 @@ export interface AgentPermissionResult {
   followUpPrompt?: AgentPromptInput;
 }
 
+export interface UsageReference {
+  source: string;
+  input: JsonValue;
+}
+
 export interface AgentSession {
   readonly provider: AgentProvider;
   readonly id: string | null;
@@ -668,6 +673,8 @@ export interface AgentSession {
   /** New provider-owned rows to commit on registration. streamHistory must also
    * replay them at their original timestamps; restored sessions omit old rows. */
   readonly initialTimeline?: ImportedTimelineEntry[];
+  /** Resolved at fetch time because model and credentials may change during a session. */
+  getUsageReference?(): Promise<UsageReference | null>;
   run(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<AgentRunResult>;
   startTurn(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<{ turnId: string }>;
   steerActiveTurn?(prompt: AgentPromptInput, options: SteerActiveTurnOptions): Promise<SteerResult>;

packages/server/src/server/agent/plugin-provider.test.ts

@@ -396,6 +396,24 @@ describe("PluginAgentClientRegistry", () => {
     await registry.shutdown();
   });
 
+  test("returns no usage reference when a plugin provider lacks the capability", async () => {
+    const harness = createProviderHarness();
+    const registry = new PluginAgentClientRegistry(createTestLogger());
+    registry.replace([harness.registration]);
+    const client = registry.clients()[harness.registration.id]!;
+    const session = await client.createSession({
+      provider: harness.registration.id,
+      cwd: "/workspace",
+    });
+    try {
+      expect(await session.getUsageReference?.()).toBeNull();
+      expect(harness.inputs.some((input) => input.type === "session.usage_reference")).toBe(false);
+    } finally {
+      await session.close();
+      registry.replace([]);
+    }
+  });
+
   test("terminalizes an active turn exactly once when its plugin provider is removed", async () => {
     const harness = createProviderHarness({ completeTurn: false });
     const registry = new PluginAgentClientRegistry(createTestLogger());