Rerun CI after the website dev server timed out at startup

Switching an OpenCode v2 chat to another model carried the previous
model's variant over. OpenCode rejects a prompt whose variant the model
does not offer, so every message after the switch failed with
"Variant unavailable for <model>: medium". The variant now carries over
only when the new model offers it; otherwise it is cleared and the
cleared thinking option is reported to the agent.

Closes #5578

.github/ci-paths.yml

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

.github/workflows/ci.yml

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

docs/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

@@ -195,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.
 
 ---
 

knip.json

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

nix/npm-deps.hash

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

package-lock.json

@@ -10,6 +10,7 @@
       "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
@@ -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",
@@ -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

@@ -21,6 +21,7 @@
     "url": "https://github.com/getpaseo/paseo.git"
   },
   "workspaces": [
+    "plugins",
     "packages/expo-two-way-audio",
     "packages/highlight",
     "packages/plugin",
@@ -66,7 +67,7 @@
     "watch:protocol": "npm run watch --workspace=@getpaseo/protocol",
     "watch:client": "tsc -p packages/client/tsconfig.json --watch --preserveWatchOutput",
     "typecheck": "npm run typecheck --workspaces --if-present",
-    "typecheck:server": "npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/protocol && npm run typecheck --workspace=@getpaseo/client && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli",
+    "typecheck:server": "npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/protocol && npm run typecheck --workspace=@getpaseo/client && npm run typecheck --workspace=@getpaseo/builtin-plugins && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli",
     "test": "npm run test --workspaces --if-present",
     "format": "oxfmt .",
     "format:files": "oxfmt",

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

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

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

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

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

@@ -7,7 +7,11 @@ 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";
 
@@ -92,6 +96,40 @@ 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/host-version-after-daemon-restart.spec.ts

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

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

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

packages/app/e2e/browser/launcher-tab.spec.ts

@@ -250,6 +250,52 @@ test.describe("Tab creation", () => {
     await expect(page).toHaveURL(/\/settings\/hosts\/[^/]+\/terminals$/);
   });
 
+  test("Cursor CLI profile uses the Cursor icon in New tab and host settings", async ({ page }) => {
+    const guessed: TerminalProfile = {
+      id: "e2e-cursor-guessed",
+      name: "Cursor guessed",
+      command: "cursor-agent",
+      args: ["{{{prompt}}}"],
+    };
+    const explicit: TerminalProfile = {
+      ...guessed,
+      id: "e2e-cursor-explicit",
+      name: "Cursor explicit",
+      icon: "cursor",
+    };
+    const profileSeed = await seedTerminalProfiles([guessed, explicit]);
+
+    try {
+      await gotoWorkspace(page, workspace.workspaceId);
+      await page.getByTestId("workspace-new-tab-button").filter({ visible: true }).click();
+
+      const menu = page.getByTestId("workspace-new-tab-menu").filter({ visible: true });
+      const menuIconPath = (name: string) =>
+        menu
+          .getByRole("menuitem", { name })
+          .evaluate((element) => element.querySelector("svg path")?.getAttribute("d") ?? null);
+      const guessedMenuPath = await menuIconPath(guessed.name);
+      const explicitMenuPath = await menuIconPath(explicit.name);
+
+      await menu.getByTestId("workspace-new-tab-menu-edit-terminal-profiles").click();
+      await expect(page).toHaveURL(/\/settings\/hosts\/[^/]+\/terminals$/);
+
+      const settingsIconPath = (id: string) =>
+        page
+          .getByTestId(`terminal-profile-row-${id}`)
+          .evaluate((element) => element.querySelector("svg path")?.getAttribute("d") ?? null);
+      const guessedSettingsPath = await settingsIconPath(guessed.id);
+      const explicitSettingsPath = await settingsIconPath(explicit.id);
+
+      expect(explicitMenuPath).not.toBeNull();
+      expect(explicitSettingsPath).not.toBeNull();
+      expect.soft(guessedMenuPath, "New tab Cursor profile icon").toBe(explicitMenuPath);
+      expect.soft(guessedSettingsPath, "Settings Cursor profile icon").toBe(explicitSettingsPath);
+    } finally {
+      await profileSeed.restore();
+    }
+  });
+
   test("tab bar shows action buttons per pane", async ({ page }) => {
     await gotoWorkspace(page, workspace.workspaceId);
     await assertSingleNewTabButton(page);

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

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

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

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

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

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

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

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

packages/app/e2e/browser/subagent-origin-pane.spec.ts

@@ -0,0 +1,149 @@
+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/isolated-host-daemon.ts

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

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

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

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

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

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

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

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

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

packages/app/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,6 +10,7 @@ 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 {
@@ -34,7 +35,7 @@ export function AssistantMarkdownLink({
   const { configRef } = useAssistantFileLinkResolverContext();
   const workspaceRoot = configRef.current.workspaceRoot;
   const tooltipPath = useMemo(
-    () => (target ? formatInlinePathTargetForTooltip(target, workspaceRoot) : null),
+    () => (target ? formatFileLinkTooltipPath({ target, workspaceRoot }) : null),
     [target, workspaceRoot],
   );
   const linkPress = useMemo<AssistantLinkPress>(
@@ -127,38 +128,6 @@ 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

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

@@ -0,0 +1,30 @@
+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/agent-list.tsx

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

packages/app/src/components/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/import-session-sheet.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/app/src/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/contexts/session-context.tsx

@@ -32,6 +32,7 @@ import { useVoiceAudioEngineOptional, useVoiceRuntimeOptional } from "@/contexts
 import type { AudioPlaybackSource } from "@/voice/audio-engine-types";
 import {
   selectAgentTimelineState,
+  toDaemonServerInfo,
   useSessionStore,
   type SessionState,
 } from "@/stores/session-store";
@@ -318,24 +319,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     [serverId],
   );
 
-  useEffect(() => {
-    const serverInfo = client.getLastServerInfoMessage();
-    if (!serverInfo) {
-      return;
-    }
-
-    updateSessionServerInfo(serverId, {
-      serverId: serverInfo.serverId,
-      hostname: serverInfo.hostname,
-      version: serverInfo.version,
-      ...(serverInfo.desktopManaged !== undefined
-        ? { desktopManaged: serverInfo.desktopManaged }
-        : {}),
-      ...(serverInfo.capabilities ? { capabilities: serverInfo.capabilities } : {}),
-      ...(serverInfo.features ? { features: serverInfo.features } : {}),
-    });
-  }, [client, serverId, updateSessionServerInfo]);
-
   useEffect(() => {
     const unregister = voiceRuntime?.registerSession({
       serverId,
@@ -568,16 +551,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
       if (message.type !== "status") return;
       const serverInfo = parseServerInfoStatusPayload(message.payload);
       if (serverInfo) {
-        updateSessionServerInfo(serverId, {
-          serverId: serverInfo.serverId,
-          hostname: serverInfo.hostname,
-          version: serverInfo.version,
-          ...(serverInfo.desktopManaged !== undefined
-            ? { desktopManaged: serverInfo.desktopManaged }
-            : {}),
-          ...(serverInfo.capabilities ? { capabilities: serverInfo.capabilities } : {}),
-          ...(serverInfo.features ? { features: serverInfo.features } : {}),
-        });
+        updateSessionServerInfo(serverId, toDaemonServerInfo(serverInfo));
         return;
       }
     });

packages/app/src/git/commits-section/commit-row.tsx

@@ -4,14 +4,13 @@ import { StyleSheet } from "react-native-unistyles";
 import { ThemedChevron, chevronColorMapping } from "@/git/themed-chevron";
 import type { ClassifiedCheckoutCommit } from "@/git/use-commits-query";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
-import { formatTimeAgo } from "@/utils/time";
+import { useTimeAgo } from "@/hooks/use-time-ago";
 import { CommitGraphNode } from "./commit-graph-node";
 
 interface CommitRowProps {
   commit: ClassifiedCheckoutCommit;
   isFirst: boolean;
   isLast: boolean;
-  now: Date;
   onCommitPress: (sha: string) => void;
 }
 
@@ -26,7 +25,6 @@ export const CommitRow = memo(function CommitRow({
   commit,
   isFirst,
   isLast,
-  now,
   onCommitPress,
 }: CommitRowProps) {
   const handlePress = useCallback(() => {
@@ -49,7 +47,7 @@ export const CommitRow = memo(function CommitRow({
           {commit.subject}
         </Text>
       </View>
-      <Text style={styles.timestamp}>{formatTimeAgo(new Date(commit.authorDate), now)}</Text>
+      <CommitTimestamp authorDate={commit.authorDate} />
       <View style={styles.caret}>
         <ThemedChevron size={14} uniProps={chevronColorMapping} />
       </View>
@@ -57,6 +55,11 @@ export const CommitRow = memo(function CommitRow({
   );
 });
 
+function CommitTimestamp({ authorDate }: { authorDate: string }) {
+  const label = useTimeAgo(new Date(authorDate));
+  return <Text style={styles.timestamp}>{label}</Text>;
+}
+
 const styles = StyleSheet.create((theme) => ({
   row: {
     flexDirection: "row",

packages/app/src/git/commits-section/commits-section.tsx

@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { Pressable, Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "react-i18next";
-import { useRetainedPanelActive } from "@/components/retained-panel";
 import { useCheckoutCommitsQuery, type CheckoutCommitsQueryResult } from "@/git/use-commits-query";
 import { ThemedChevron, chevronColorMapping } from "@/git/themed-chevron";
 import { treeRowPaddingLeft } from "@/components/tree-primitives";
@@ -40,11 +39,9 @@ function CommitsSectionSkeleton() {
 
 function CommitsSectionContent({
   query,
-  now,
   onCommitPress,
 }: {
   query: Exclude<CheckoutCommitsQueryResult, { status: "unsupported" }>;
-  now: Date;
   onCommitPress: (sha: string) => void;
 }) {
   const { t } = useTranslation();
@@ -77,7 +74,6 @@ function CommitsSectionContent({
           commit={commit}
           isFirst={index === 0}
           isLast={index === workspaceCommits.length - 1}
-          now={now}
           onCommitPress={onCommitPress}
         />
       ))}
@@ -94,9 +90,6 @@ export function CommitsSection({
 }: CommitsSectionProps) {
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
-  const isPanelActive = useRetainedPanelActive();
-  const [now, setNow] = useState(() => new Date());
-  const displayNow = useMemo(() => (isPanelActive ? new Date() : now), [isPanelActive, now]);
   const query = useCheckoutCommitsQuery({
     serverId,
     cwd,
@@ -104,20 +97,9 @@ export function CommitsSection({
   });
 
   const handleToggleSection = useCallback(() => {
-    if (collapsed) {
-      setNow(new Date());
-    }
     onCollapsedChange?.(!collapsed);
   }, [collapsed, onCollapsedChange]);
 
-  useEffect(() => {
-    if (collapsed || !isPanelActive) {
-      return;
-    }
-    const interval = setInterval(() => setNow(new Date()), 10_000);
-    return () => clearInterval(interval);
-  }, [collapsed, isPanelActive]);
-
   const headerChevronStyle = useMemo(
     () => [styles.headerChevron, !collapsed && styles.headerChevronExpanded],
     [collapsed],
@@ -160,9 +142,7 @@ export function CommitsSection({
           </Text>
         )}
       </Pressable>
-      {collapsed ? null : (
-        <CommitsSectionContent query={query} now={displayNow} onCommitPress={onCommitPress} />
-      )}
+      {collapsed ? null : <CommitsSectionContent query={query} onCommitPress={onCommitPress} />}
     </View>
   );
 }

packages/app/src/hooks/use-time-ago.ts

@@ -1,6 +1,11 @@
 import { useEffect, useState } from "react";
 import { subscribeToRelativeTimeTick, type TickResolution } from "@/utils/relative-time-ticker";
-import { describeCompactTimeAgo } from "@/utils/time";
+import { describeCompactTimeAgo, describeTimeAgo, type RelativeTimeLabel } from "@/utils/time";
+
+/** A prose relative timestamp ("5m ago") that keeps itself current. See `useCompactTimeAgo`. */
+export function useTimeAgo(date: Date | null): string {
+  return useRelativeTimeLabel(date, describeTimeAgo);
+}
 
 /**
  * A compact relative timestamp that keeps itself current.
@@ -19,7 +24,14 @@ import { describeCompactTimeAgo } from "@/utils/time";
  *   never changes again.
  */
 export function useCompactTimeAgo(date: Date | null): string {
-  const [label, setLabel] = useState(() => (date ? describeCompactTimeAgo(date).label : ""));
+  return useRelativeTimeLabel(date, describeCompactTimeAgo);
+}
+
+function useRelativeTimeLabel(
+  date: Date | null,
+  describe: (date: Date) => RelativeTimeLabel,
+): string {
+  const [label, setLabel] = useState(() => (date ? describe(date).label : ""));
 
   // Keyed on the instant, not the Date object: the store parses a fresh Date on every payload, so
   // depending on identity would tear down and rebuild the subscription for an unchanged time.
@@ -32,13 +44,13 @@ export function useCompactTimeAgo(date: Date | null): string {
     }
 
     const source = new Date(time);
-    let current = describeCompactTimeAgo(source);
+    let current = describe(source);
     setLabel(current.label);
 
     let unsubscribe: (() => void) | null = null;
 
     const handleTick = () => {
-      const next = describeCompactTimeAgo(source);
+      const next = describe(source);
       if (next.label !== current.label) {
         setLabel(next.label);
       }
@@ -62,7 +74,7 @@ export function useCompactTimeAgo(date: Date | null): string {
     return () => {
       unsubscribe?.();
     };
-  }, [time]);
+  }, [time, describe]);
 
   return label;
 }

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

@@ -158,17 +158,28 @@ class FakeDaemonClient {
   }
 
   public ownedSubscriptions = true;
+  private daemonVersion: string | null = "0.8.0";
 
   getLastServerInfoMessage(): ReturnType<DaemonClient["getLastServerInfoMessage"]> {
+    if (this.daemonVersion === null) return null;
     return {
       status: "server_info",
       serverId: "srv_test",
       hostname: "test",
-      version: "0.8.0",
+      version: this.daemonVersion,
       features: { ownedSubscriptions: this.ownedSubscriptions },
     };
   }
 
+  // Like the real client, the server info is cleared while disconnected and replaced by the
+  // restarted daemon's handshake before the client reports connected again.
+  daemonRestartsAs(version: string): void {
+    this.daemonVersion = null;
+    this.setConnectionState({ status: "disconnected", reason: "Connection lost" });
+    this.daemonVersion = version;
+    this.setConnectionState({ status: "connected" });
+  }
+
   subscribeConnectionStatus(listener: (status: ConnectionState) => void): () => void {
     this.listeners.add(listener);
     listener(this.state);
@@ -2129,6 +2140,37 @@ describe("HostRuntimeStore", () => {
     expect(useSessionStore.getState().sessions[host.serverId]).toBeUndefined();
   });
 
+  it("shows the restarted daemon's version after the same client reconnects", async () => {
+    const host = makeHost({
+      serverId: "srv_restarted",
+      connections: [{ id: "direct:lan:6767", type: "directTcp", endpoint: "lan:6767" }],
+    });
+    const fakeClient = new FakeDaemonClient();
+    fakeClient.setConnectionState({ status: "connected" });
+    const store = new HostRuntimeStore({
+      deps: {
+        createClient: () => fakeClient as unknown as DaemonClient,
+        connectToDaemon: async ({ host: hostProfile }) => ({
+          client: fakeClient as unknown as DaemonClient,
+          serverId: hostProfile.serverId,
+          hostname: hostProfile.label ?? null,
+        }),
+        getClientId: async () => "cid_test_runtime",
+      },
+    });
+
+    store.syncHosts([host]);
+    await waitForHostOnline(store, host.serverId);
+    expect(useSessionStore.getState().sessions[host.serverId]?.serverInfo?.version).toBe("0.8.0");
+
+    fakeClient.daemonRestartsAs("0.9.1");
+
+    expect(store.getSnapshot(host.serverId)?.client).toBe(fakeClient);
+    expect(useSessionStore.getState().sessions[host.serverId]?.serverInfo?.version).toBe("0.9.1");
+
+    store.syncHosts([]);
+  });
+
   it("drains snapshot and buffered running transitions exactly once", async () => {
     const host = makeHost({
       serverId: "srv_legacy_transitions",

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

@@ -50,6 +50,7 @@ import { CLIENT_CAPS } from "@getpaseo/protocol/client-capabilities";
 import { BROWSER_AUTOMATION_COMMAND_NAMES } from "@getpaseo/protocol/browser-automation/rpc-schemas";
 import {
   useSessionStore,
+  toDaemonServerInfo,
   type Agent,
   type WorkspaceDescriptor,
   type ProjectDescriptor,
@@ -2266,6 +2267,13 @@ export class HostRuntimeStore {
     const sessionStore = useSessionStore.getState();
     sessionStore.initializeSession(serverId, snapshot.client, snapshot.clientGeneration);
     sessionStore.updateSessionClient(serverId, snapshot.client, snapshot.clientGeneration);
+    // A reconnect keeps the same client, so the daemon's handshake (a restart or upgrade can
+    // change its version and features) only reaches the store here. The client clears it while
+    // disconnected; keep the last known value until the next handshake.
+    const serverInfo = snapshot.client.getLastServerInfoMessage();
+    if (serverInfo) {
+      sessionStore.updateSessionServerInfo(serverId, toDaemonServerInfo(serverInfo));
+    }
   }
 
   private clearHostReplica(serverId: string): void {
@@ -2653,21 +2661,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

@@ -68,7 +68,8 @@ import type { Theme } from "@/styles/theme";
 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 { useCompactTimeAgo } from "@/hooks/use-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/stores/session-store.ts

@@ -285,6 +285,19 @@ export interface DaemonServerInfo {
   features?: ServerInfoStatusPayload["features"];
 }
 
+export function toDaemonServerInfo(serverInfo: ServerInfoStatusPayload): DaemonServerInfo {
+  return {
+    serverId: serverInfo.serverId,
+    hostname: serverInfo.hostname ?? null,
+    version: serverInfo.version ?? null,
+    ...(serverInfo.desktopManaged !== undefined
+      ? { desktopManaged: serverInfo.desktopManaged }
+      : {}),
+    ...(serverInfo.capabilities ? { capabilities: serverInfo.capabilities } : {}),
+    ...(serverInfo.features ? { features: serverInfo.features } : {}),
+  };
+}
+
 export interface AgentTimelineCursorState {
   epoch: string;
   startSeq: number;

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-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

@@ -1,7 +1,9 @@
 import { describe, it, expect } from "vitest";
 import {
   describeCompactTimeAgo,
+  describeTimeAgo,
   formatCompactTimeAgo,
+  formatCompactTimeAgoAsProse,
   formatDuration,
   formatMessageTimestamp,
   formatTimeAgo,
@@ -12,7 +14,8 @@ describe("formatTimeAgo", () => {
 
   it.each([
     ["2026-07-16T11:59:55.000Z", "just now"],
-    ["2026-07-16T11:59:30.000Z", "30s ago"],
+    ["2026-07-16T11:59:30.000Z", "just now"],
+    ["2026-07-16T11:59:00.000Z", "1m ago"],
     ["2026-07-16T11:55:00.000Z", "5m ago"],
     ["2026-07-16T10:00:00.000Z", "2h ago"],
     ["2026-07-13T12:00:00.000Z", "3d ago"],
@@ -22,6 +25,20 @@ describe("formatTimeAgo", () => {
   });
 });
 
+describe("describeTimeAgo", () => {
+  const now = new Date("2026-07-16T12:00:00.000Z");
+
+  it.each([
+    ["2026-07-16T11:59:30.000Z", "just now", "minute"],
+    ["2026-07-16T11:55:00.000Z", "5m ago", "minute"],
+    ["2026-07-16T10:00:00.000Z", "2h ago", "hour"],
+    ["2026-07-13T12:00:00.000Z", "3d ago", "day"],
+    ["2026-01-15T12:00:00.000Z", "Jan 15", "static"],
+  ] as const)("formats %s as %s at %s resolution", (date, label, resolution) => {
+    expect(describeTimeAgo(new Date(date), now)).toEqual({ label, resolution });
+  });
+});
+
 describe("describeCompactTimeAgo", () => {
   const now = new Date("2026-07-16T12:00:00.000Z");
 
@@ -63,6 +80,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

@@ -1,50 +1,10 @@
 /**
- * How long ago something was, before it's worded. The two formatters below share this so
- * their thresholds can't drift apart; they differ only in how much room they have to say it.
- *
- * `elapsed` takes an "ago" in prose, `now` and `date` read as absolutes and never do.
- */
-type Elapsed =
-  | { kind: "now" }
-  | { kind: "elapsed"; value: string }
-  | { kind: "date"; value: string };
-
-function describeElapsed(date: Date, now: Date): Elapsed {
-  const diffMs = now.getTime() - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHour = Math.floor(diffMin / 60);
-  const diffDay = Math.floor(diffHour / 24);
-
-  if (diffSec < 10) return { kind: "now" };
-  if (diffMin < 1) return { kind: "elapsed", value: `${diffSec}s` };
-  if (diffHour < 1) return { kind: "elapsed", value: `${diffMin}m` };
-  if (diffDay < 1) return { kind: "elapsed", value: `${diffHour}h` };
-  if (diffDay < 7) return { kind: "elapsed", value: `${diffDay}d` };
-
-  // For older dates, show abbreviated month and day
-  const month = date.toLocaleDateString("en-US", { month: "short" });
-  return { kind: "date", value: `${month} ${date.getDate()}` };
-}
-
-/**
- * Format a date as a human-friendly relative time string
- * Examples: "just now", "5m ago", "2h ago", "3d ago", "Jan 15"
- */
-export function formatTimeAgo(date: Date, now: Date = new Date()): string {
-  const elapsed = describeElapsed(date, now);
-  if (elapsed.kind === "now") return "just now";
-  if (elapsed.kind === "elapsed") return `${elapsed.value} ago`;
-  return elapsed.value;
-}
-
-/**
- * How often a compact label can change, which is all a caller needs to know to keep it honest.
+ * How often a relative label can change, which is all a caller needs to know to keep it honest.
  * `static` means it never will again.
  */
 export type RelativeTimeResolution = "minute" | "hour" | "day" | "static";
 
-export interface CompactTimeAgo {
+export interface RelativeTimeLabel {
   label: string;
   resolution: RelativeTimeResolution;
 }
@@ -56,41 +16,87 @@ const DAY_MS = 24 * HOUR_MS;
 const ABSOLUTE_AFTER_MS = 7 * DAY_MS;
 
 /**
- * The same instant with the prose removed, for somewhere with no room for it — a dense list
- * where the column is understood to be a timestamp and "ago" is the only word on the line.
- * Examples: "now", "5m", "2h", "3d", "Jan 15".
+ * How long ago something was, before it's worded. The prose and compact formatters share this so
+ * their thresholds can't drift apart; they differ only in how much room they have to say it.
+ *
+ * `elapsed` takes an "ago" in prose, `now` and `date` read as absolutes and never do.
  *
  * Deliberately never sub-minute. A seconds label is only correct for the second it was rendered,
  * so it either lies or forces a once-a-second re-render of a list that has nothing new to say.
  * Everything under a minute is "now", which is both true and stable.
  *
- * The resolution comes back with the label so a caller can wake at the rate the label actually
- * changes instead of guessing — see `useCompactTimeAgo`.
+ * The resolution comes back with the value so a caller can wake at the rate the label actually
+ * changes instead of guessing — see `useTimeAgo`.
  */
-export function describeCompactTimeAgo(date: Date, now: Date = new Date()): CompactTimeAgo {
+type Age =
+  | { kind: "now"; resolution: "minute" }
+  | { kind: "elapsed"; value: string; resolution: Exclude<RelativeTimeResolution, "static"> }
+  | { kind: "date"; value: string; resolution: "static" };
+
+function describeAge(date: Date, now: Date): Age {
   const elapsedMs = now.getTime() - date.getTime();
 
   if (elapsedMs < MINUTE_MS) {
-    return { label: "now", resolution: "minute" };
+    return { kind: "now", resolution: "minute" };
   }
   if (elapsedMs < HOUR_MS) {
-    return { label: `${Math.floor(elapsedMs / MINUTE_MS)}m`, resolution: "minute" };
+    return {
+      kind: "elapsed",
+      value: `${Math.floor(elapsedMs / MINUTE_MS)}m`,
+      resolution: "minute",
+    };
   }
   if (elapsedMs < DAY_MS) {
-    return { label: `${Math.floor(elapsedMs / HOUR_MS)}h`, resolution: "hour" };
+    return { kind: "elapsed", value: `${Math.floor(elapsedMs / HOUR_MS)}h`, resolution: "hour" };
   }
   if (elapsedMs < ABSOLUTE_AFTER_MS) {
-    return { label: `${Math.floor(elapsedMs / DAY_MS)}d`, resolution: "day" };
+    return { kind: "elapsed", value: `${Math.floor(elapsedMs / DAY_MS)}d`, resolution: "day" };
   }
 
   const month = date.toLocaleDateString("en-US", { month: "short" });
-  return { label: `${month} ${date.getDate()}`, resolution: "static" };
+  return { kind: "date", value: `${month} ${date.getDate()}`, resolution: "static" };
+}
+
+/**
+ * A human-friendly relative time, with the resolution it changes at.
+ * Examples: "just now", "5m ago", "2h ago", "3d ago", "Jan 15".
+ */
+export function describeTimeAgo(date: Date, now: Date = new Date()): RelativeTimeLabel {
+  const age = describeAge(date, now);
+  if (age.kind === "now") return { label: "just now", resolution: age.resolution };
+  if (age.kind === "elapsed") return { label: `${age.value} ago`, resolution: age.resolution };
+  return { label: age.value, resolution: age.resolution };
+}
+
+export function formatTimeAgo(date: Date, now: Date = new Date()): string {
+  return describeTimeAgo(date, now).label;
+}
+
+/**
+ * The same instant with the prose removed, for somewhere with no room for it — a dense list
+ * where the column is understood to be a timestamp and "ago" is the only word on the line.
+ * Examples: "now", "5m", "2h", "3d", "Jan 15".
+ */
+export function describeCompactTimeAgo(date: Date, now: Date = new Date()): RelativeTimeLabel {
+  const age = describeAge(date, now);
+  if (age.kind === "now") return { label: "now", resolution: age.resolution };
+  return { label: age.value, resolution: age.resolution };
 }
 
 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,6 +4,7 @@ import {
   collectAllPanes,
   DEFAULT_PANE_ID,
   findPaneById,
+  findPaneContainingTab,
   useWorkspaceLayoutStore,
   type WorkspaceTabPlacement,
 } from "@/stores/workspace-layout-store";
@@ -109,6 +110,10 @@ 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,6 +136,24 @@ 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,6 +129,17 @@ 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;
@@ -159,7 +170,7 @@ export function resolveWorkspaceFilePaths(input: {
     if (pathsEqual(normalizedFile, workspaceRoot)) {
       return null;
     }
-    const prefix = `${workspaceRoot}/`;
+    const prefix = pathWithinRoot(workspaceRoot, "");
     const relativePath = startsWithPath(normalizedFile, prefix)
       ? normalizedFile.slice(prefix.length)
       : null;
@@ -174,5 +185,5 @@ export function resolveWorkspaceFilePaths(input: {
   if (!relativePath) {
     return null;
   }
-  return { absolutePath: `${workspaceRoot}/${relativePath}`, relativePath };
+  return { absolutePath: pathWithinRoot(workspaceRoot, relativePath), relativePath };
 }

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/plugin/package.json

@@ -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",

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/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/protocol/src/terminal-profiles.test.ts

@@ -196,11 +196,13 @@ describe("guessTerminalProfileIcon", () => {
     ["/usr/local/bin/gemini", "gemini"],
     ["agy", "agy"],
     ["/usr/local/bin/agy", "agy"],
+    ["cursor-agent", "cursor"],
+    ["/usr/local/bin/cursor-agent", "cursor"],
   ])("guesses %s -> %s", (command, expected) => {
     expect(guessTerminalProfileIcon(command)).toBe(expected);
   });
 
-  it.each([["zsh"], ["bash"], ["fish"], [""], ["/usr/bin/foo"], ["cursor-agent"]])(
+  it.each([["zsh"], ["bash"], ["fish"], [""], ["/usr/bin/foo"], ["cursor-tool"]])(
     "returns undefined for unknown command %s",
     (command) => {
       expect(guessTerminalProfileIcon(command)).toBeUndefined();
@@ -219,6 +221,26 @@ describe("getTerminalProfileIcon", () => {
     expect(getTerminalProfileIcon(profile)).toBe("claude");
   });
 
+  it("shows the Cursor icon for a profile created in settings with the Cursor CLI", () => {
+    const profile = {
+      id: "profile_1",
+      name: "Cursor",
+      command: "cursor-agent",
+      args: [PROMPT_SENTINEL],
+    };
+    expect(getTerminalProfileIcon(profile)).toBe("cursor");
+  });
+
+  it("keeps an explicit icon over the Cursor CLI guess", () => {
+    const profile = {
+      id: "profile_1",
+      name: "Cursor",
+      command: "cursor-agent",
+      icon: "claude",
+    };
+    expect(getTerminalProfileIcon(profile)).toBe("claude");
+  });
+
   it("returns undefined when no icon is set and command is unknown", () => {
     const profile = { id: "1", name: "Foo", command: "zsh" };
     expect(getTerminalProfileIcon(profile)).toBeUndefined();

packages/protocol/src/terminal-profiles.ts

@@ -105,7 +105,14 @@ export function resolveTerminalProfileLaunch(
   return { name: profile.name, ...substitutePrompt(profile, prompt) };
 }
 
-const WELL_KNOWN_COMMAND_ICONS = new Map(KNOWN_PROVIDER_ICON_NAMES.map((name) => [name, name]));
+// CLIs whose binary is not named after their icon. Matching stays exact, so a
+// command only gets an icon when its whole base name is listed.
+const COMMAND_ICON_ALIASES: ReadonlyArray<[string, string]> = [["cursor-agent", "cursor"]];
+
+const WELL_KNOWN_COMMAND_ICONS = new Map([
+  ...KNOWN_PROVIDER_ICON_NAMES.map((name): [string, string] => [name, name]),
+  ...COMMAND_ICON_ALIASES,
+]);
 
 function getCommandBaseName(command: string): string {
   const lastSlash = command.lastIndexOf("/");

packages/server/package.json

@@ -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",
@@ -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-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/mcp-server.test.ts

@@ -3704,18 +3704,29 @@ class HeldTurnAgentSession implements AgentSession {
   readonly prompts: string[] = [];
   private readonly subscribers = new Set<(event: AgentStreamEvent) => void>();
   private activeTurnId: string | null = null;
+  private turnStartGate: Promise<void> | null = null;
 
   constructor(
     readonly provider: AgentProvider,
     private readonly holdTurns: boolean,
   ) {}
 
+  /** Hold the next turn's acknowledgment, as a provider awaiting its turn-start request does. */
+  holdTurnStart(): () => void {
+    let release!: () => void;
+    this.turnStartGate = new Promise((resolve) => {
+      release = resolve;
+    });
+    return release;
+  }
+
   async run(): Promise<AgentRunResult> {
     return { sessionId: this.id, finalText: "", timeline: [] };
   }
 
   async startTurn(prompt: AgentPromptInput): Promise<{ turnId: string }> {
     this.prompts.push(typeof prompt === "string" ? prompt : JSON.stringify(prompt));
+    await this.turnStartGate;
     const turnId = randomUUID();
     this.activeTurnId = turnId;
     setTimeout(() => {
@@ -4085,6 +4096,127 @@ describe("send_agent_prompt MCP tool", () => {
       await removeAgentStateDir(agentManager, storage, workdir);
     }
   });
+
+  it("reports a background prompt's accepted turn as running", async () => {
+    const workdir = await mkdtemp(join(tmpdir(), "mcp-background-send-status-"));
+    const storage = new AgentStorage(join(workdir, "agents"), logger);
+    const parentClient = new HeldTurnAgentClient("claude", false);
+    const childClient = new HeldTurnAgentClient("codex", true);
+    const agentManager = new AgentManager({
+      clients: { claude: parentClient, codex: childClient },
+      registry: storage,
+      logger,
+    });
+
+    try {
+      const parent = await agentManager.createAgent(
+        { provider: "claude", cwd: existingCwd },
+        undefined,
+        { workspaceId: "wks_parent" },
+      );
+      const child = await agentManager.createAgent(
+        { provider: "codex", cwd: existingCwd },
+        undefined,
+        { workspaceId: "wks_parent" },
+      );
+      const server = await createAgentMcpServer({
+        agentManager,
+        agentStorage: storage,
+        callerAgentId: parent.id,
+        providerSnapshotManager: createOpenCodeManager().manager,
+        logger,
+      });
+      const tool = registeredTool(server, "send_agent_prompt");
+      const childSession = childClient.sessions[0]!;
+      const acknowledgeTurnStart = childSession.holdTurnStart();
+
+      const pending = invokeToolWithParsedInput(tool, {
+        agentId: child.id,
+        prompt: "Follow up",
+      });
+      await vi.waitFor(() => expect(childSession.prompts).toEqual(["Follow up"]));
+      acknowledgeTurnStart();
+      const response = await pending;
+
+      expect(response.structuredContent).toMatchObject({ success: true, status: "running" });
+      expect(agentManager.getAgent(child.id)?.lifecycle).toBe("running");
+
+      childSession.finishTurn();
+      await vi.waitFor(() => {
+        const parentPrompts = parentClient.sessions[0]!.prompts;
+        expect(parentPrompts).toHaveLength(1);
+        expect(parentPrompts[0]).toContain(child.id);
+        expect(parentPrompts[0]).toContain("finished");
+      });
+    } finally {
+      await removeAgentStateDir(agentManager, storage, workdir);
+    }
+  });
+
+  it("accepts a background turn completed as the manager publishes its start", async () => {
+    const workdir = await mkdtemp(join(tmpdir(), "mcp-fast-background-send-"));
+    const storage = new AgentStorage(join(workdir, "agents"), logger);
+    const parentClient = new HeldTurnAgentClient("claude", false);
+    const childClient = new HeldTurnAgentClient("codex", true);
+    const agentManager = new AgentManager({
+      clients: { claude: parentClient, codex: childClient },
+      registry: storage,
+      logger,
+    });
+
+    try {
+      const parent = await agentManager.createAgent(
+        { provider: "claude", cwd: existingCwd },
+        undefined,
+        { workspaceId: "wks_parent" },
+      );
+      const child = await agentManager.createAgent(
+        { provider: "codex", cwd: existingCwd },
+        undefined,
+        { workspaceId: "wks_parent" },
+      );
+      const server = await createAgentMcpServer({
+        agentManager,
+        agentStorage: storage,
+        callerAgentId: parent.id,
+        providerSnapshotManager: createOpenCodeManager().manager,
+        logger,
+      });
+      let finished = false;
+      const unsubscribe = agentManager.subscribe(
+        (event) => {
+          if (
+            !finished &&
+            event.type === "agent_state" &&
+            event.agent.id === child.id &&
+            event.agent.lifecycle === "running"
+          ) {
+            finished = true;
+            childClient.sessions[0]!.finishTurn();
+          }
+        },
+        { agentId: child.id, replayState: false },
+      );
+
+      const response = await invokeToolWithParsedInput(
+        registeredTool(server, "send_agent_prompt"),
+        {
+          agentId: child.id,
+          prompt: "Fast reply",
+        },
+      );
+      unsubscribe();
+      expect(response.structuredContent).toMatchObject({ success: true, status: "idle" });
+      await vi.waitFor(() => {
+        const parentPrompts = parentClient.sessions[0]!.prompts;
+        expect(parentPrompts).toHaveLength(1);
+        expect(parentPrompts[0]).toContain(child.id);
+        expect(parentPrompts[0]).toContain("finished");
+      });
+    } finally {
+      await removeAgentStateDir(agentManager, storage, workdir);
+    }
+  });
 });
 
 describe("update_agent MCP tool", () => {

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());

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

@@ -51,6 +51,7 @@ import type {
   ProviderRefreshContext,
   SteerActiveTurnOptions,
   SteerResult,
+  UsageReference,
 } from "./agent-sdk-types.js";
 import {
   isDefaultAgentCreateConfigUnattended,
@@ -105,6 +106,20 @@ function providerError(error: ProviderError): Error {
   });
 }
 
+function isProviderRequestReply(
+  event: ProviderEvent,
+): event is Extract<
+  ProviderEvent,
+  { type: "request.completed" | "catalog" | "sessions" | "usage_reference" }
+> {
+  return (
+    event.type === "request.completed" ||
+    event.type === "catalog" ||
+    event.type === "sessions" ||
+    event.type === "usage_reference"
+  );
+}
+
 class ProviderRuntime {
   private connection: ProviderConnection | null = null;
   private connecting: Promise<ProviderConnection> | null = null;
@@ -356,11 +371,7 @@ class ProviderRuntime {
       this.failRequest(event);
       return;
     }
-    if (
-      event.type === "request.completed" ||
-      event.type === "catalog" ||
-      event.type === "sessions"
-    ) {
+    if (isProviderRequestReply(event)) {
       this.finishRequest(event);
       return;
     }
@@ -515,7 +526,10 @@ class ProviderRuntime {
   }
 
   private finishRequest(
-    event: Extract<ProviderEvent, { type: "request.completed" | "catalog" | "sessions" }>,
+    event: Extract<
+      ProviderEvent,
+      { type: "request.completed" | "catalog" | "sessions" | "usage_reference" }
+    >,
   ): void {
     const request = this.requests.get(event.requestId);
     if (!request) return;
@@ -554,6 +568,17 @@ class ProviderRuntimeSession {
     return this.capabilities;
   }
 
+  async getUsageReference(): Promise<UsageReference | null> {
+    if (!this.capabilities.includes("session.usage_reference")) return null;
+    const event = await this.runtime.complete({
+      type: "session.usage_reference",
+      requestId: randomUUID(),
+      sessionId: this.providerSessionId,
+    });
+    if (event.type !== "usage_reference") throw new Error("Invalid usage reference response");
+    return event.reference;
+  }
+
   onEvent(listener: (event: ProviderEvent) => void): () => void {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
@@ -1063,6 +1088,10 @@ class PluginAgentSession implements AgentSession {
     return agentCapabilities(this.bridge.negotiatedCapabilities);
   }
 
+  getUsageReference(): Promise<UsageReference | null> {
+    return this.bridge.getUsageReference();
+  }
+
   get features(): AgentFeature[] {
     return this.bridge.config.settings.map((setting) =>
       setting.type === "toggle"

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

@@ -60,6 +60,7 @@ const mockState = vi.hoisted(() => {
     isCommandAvailable: vi.fn(async (_command: string) => false),
     runtimeModels: new Map<string, AgentModelDefinition[]>(),
     cursorListFeaturesConfigs: [] as AgentSessionConfig[],
+    codexNativeArchiveCalls: [] as Array<{ state: "archive" | "restore"; handle: unknown }>,
     reset() {
       this.constructorArgs.claude = [];
       this.constructorArgs.codex = [];
@@ -73,6 +74,7 @@ const mockState = vi.hoisted(() => {
       this.isCommandAvailable.mockImplementation(async (_command: string) => false);
       this.runtimeModels.clear();
       this.cursorListFeaturesConfigs = [];
+      this.codexNativeArchiveCalls = [];
     },
   };
 });
@@ -171,6 +173,14 @@ vi.mock("./providers/codex-app-server-agent.js", () => ({
       };
     }
 
+    async archiveNativeSession(handle: unknown): Promise<void> {
+      mockState.codexNativeArchiveCalls.push({ state: "archive", handle });
+    }
+
+    async unarchiveNativeSession(handle: unknown): Promise<void> {
+      mockState.codexNativeArchiveCalls.push({ state: "restore", handle });
+    }
+
     async isAvailable(): Promise<boolean> {
       const command: { mode?: string; argv?: string[] } | undefined =
         typeof this.runtimeSettings === "object" && this.runtimeSettings !== null
@@ -651,6 +661,22 @@ test("new provider extending claude appears in registry", () => {
   expect(registry.zai.createClient(logger).provider).toBe("zai");
 });
 
+test("new provider extending codex archives and unarchives its native sessions", async () => {
+  const registry = buildProviderRegistry(logger, {
+    providerOverrides: { "my-codex": { extends: "codex", label: "My Codex" } },
+  });
+  const client = registry["my-codex"].createClient(logger);
+  const handle = { provider: "my-codex", sessionId: "thread-1", nativeHandle: "thread-1" };
+
+  await client.archiveNativeSession?.(handle);
+  await client.unarchiveNativeSession?.(handle);
+
+  expect(mockState.codexNativeArchiveCalls).toEqual([
+    { state: "archive", handle: { ...handle, provider: "codex" } },
+    { state: "restore", handle: { ...handle, provider: "codex" } },
+  ]);
+});
+
 test("built-in OMP override keeps the real OMP adapter enabled and launchable", async () => {
   const omp = new FakeOmp(["custom-omp"]);
   const registry = buildProviderRegistry(logger, {