feat: v2.5.5 — AI Router renamed AI Proxy, reload onto new builds, update no longer spins

AI Proxy (was AI Router):
- server/lib/ai-proxies.js, proxy-apply.js, routes/ai-proxies.js mounted at
  /api/ai-proxies and the old /api/ai-routers; `router` still accepted on the
  start routes; profiles move to <CLAUDE_HOME>/agenthub-proxies/
- dashboard_runs.router renamed in place to proxy: an older build on the same
  DB fails on that column, so dev and prod sharing one DB update together
- a proxy's baseUrl stored as its root (a typed /v1 made /v1/v1/messages);
  Test probes Claude /v1/messages and Codex /v1/responses
- Settings → AI Proxy (/settings/ai-router redirects), ProxyPicker

Updates:
- every tab reloads onto the new UI build when its WebSocket reconnects to a
  server of another version (lib/newBuildReload.ts, once per version)
- Update now stops waiting on a plugin chain that failed or pulled nothing
  (the old server never goes down), and reloads as soon as a new version answers

Also:
- a pane whose command exits at once says so (EPANEEXITED) instead of
  "Command failed: tmux set-option … mouse on"
- the pane drag preview draws where the pane actually lands

.env.example

@@ -131,6 +131,20 @@
 # liveness/stale sweeps (which skip them). (default: 600000 = 10min).
 #   DASHBOARD_REMOTE_ACTIVE_WINDOW_MS=600000
 
+# ── Privacy and push ingest (Settings → Data) ────────────────────────────────
+# All three are normally saved from Settings into the settings file; set here,
+# they are pinned and the Settings page shows them read-only.
+# Redact secrets (API keys, tokens, bearer headers, private keys, password=…)
+# from stored event payloads and summaries: 1 = on (default: off).
+#   AGENTHUB_REDACT_SECRETS=1
+# Folders whose hooks are dropped whole (and skipped by the history import and
+# the Codex reader) — absolute paths, ':'-separated (';' on Windows); a folder
+# and everything under it.
+#   AGENTHUB_IGNORE_CWD=/home/you/clients/secret:/home/you/private
+# SHA-256 (hex) of the token POST /api/hooks/ingest-batch accepts. Unset = push
+# ingest off. Settings → Data → Push ingest makes the token and stores only this.
+#   AGENTHUB_PUSH_TOKEN_SHA256=
+
 # ── Lanes (durable parallel-work units and managed git worktrees) ────────────
 # Directory dashboard-managed worktrees are provisioned under. It is also the
 # boundary safety check 2 resolves every destructive lane path against: nothing

.gitignore

@@ -78,3 +78,6 @@ __pycache__/
 
 # JetBrains IDE config — machine-specific, never shared
 .idea/
+
+# Prometheus bearer token for docker-compose.monitoring.yml (docs/MONITORING.md)
+monitoring/prometheus/dashboard-token

.husky/pre-commit

@@ -1,7 +1,9 @@
 #!/usr/bin/env sh
 #
-# Pre-commit: auto-format staged files, then run the full test suite.
-# The commit is ABORTED unless every test passes.
+# Pre-commit: auto-format staged files, then run the tests the commit needs —
+# both full suites for a big or risky commit, only the related tests for a
+# small one, none for docs alone (see step 2). The commit is ABORTED unless
+# every test it runs passes.
 #
 # Activated via `core.hooksPath=.husky` (set by the package.json "prepare"
 # script on `npm install`). No husky/lint-staged runtime required.
@@ -44,13 +46,13 @@ fi
 # is deterministic: it fails both runs and still blocks the commit. This keeps
 # the gate strict without making commits a dice roll on machine load.
 run_suite() {
-  # $1 = human label, $2 = npm script
+  # $1 = human label, $2 = shell command
   echo "🧪 Running $1 tests..."
-  if npm run "$2"; then
+  if sh -c "$2"; then
     return 0
   fi
   echo "⚠️  $1 suite failed — retrying once to rule out machine-load flakiness..."
-  if npm run "$2"; then
+  if sh -c "$2"; then
     echo "✅ $1 suite passed on retry — treating the first failure as a load flake."
     echo "   If this keeps happening, the flaky test above deserves a real fix."
     return 0
@@ -59,7 +61,68 @@ run_suite() {
   return 1
 }
 
-run_suite backend test:server
-run_suite frontend test:client
+# The frontend suite needs NODE_ENV=test: a shell exporting
+# NODE_ENV=production gets React's production build, where act() throws.
+CLIENT_FULL="NODE_ENV=test npm run test:client"
 
-echo "✅ Formatting applied and all tests passed — proceeding with commit."
+# How much to run. A small commit runs only the tests that touch what it
+# stages; a big or risky one runs both full suites, as does
+# AGENTHUB_FULL_TESTS=1. Docs alone (*.md, docs/) run nothing.
+#   client/ files  → `vitest related`: vitest's own import graph.
+#   anything else  → every server/__tests__ file that names the file's module
+#                    (a string match: wide on purpose, `db` reaches most).
+# ponytail: name matching misses a test that reaches a module only through
+# another one; the full run before a release still catches that.
+SMALL_MAX=10
+CODE="$(git diff --cached --name-only --diff-filter=ACMRD | grep -vE '\.md$|^docs/' || true)"
+COUNT=$(printf '%s\n' "$CODE" | grep -c . || true)
+FULL=0
+[ "${AGENTHUB_FULL_TESTS:-0}" = "1" ] && FULL=1
+[ "$COUNT" -gt "$SMALL_MAX" ] && FULL=1
+# A dependency, build/test config, this hook or a deleted file can break
+# anything, whatever imports it.
+if printf '%s\n' "$CODE" | grep -qE '(^|/)package(-lock)?\.json$|(^|/)(vite|vitest|tailwind|postcss|tsconfig)[^/]*$|^\.husky/|^scripts/test-server\.js$'; then
+  FULL=1
+fi
+if git diff --cached --name-only --diff-filter=D | grep -vE '\.md$|^docs/' | grep -q .; then
+  FULL=1
+fi
+
+if [ "$COUNT" -eq 0 ]; then
+  echo "📝 Docs only — no tests to run."
+elif [ "$FULL" = "1" ]; then
+  echo "🧪 Full run ($COUNT code files staged)."
+  run_suite backend "npm run test:server"
+  run_suite frontend "$CLIENT_FULL"
+else
+  echo "🧪 Small commit ($COUNT code files) — running the related tests only."
+  OTHER="$(printf '%s\n' "$CODE" | grep -v '^client/' || true)"
+  CLIENT="$(printf '%s\n' "$CODE" | grep '^client/' | sed 's|^client/||' || true)"
+
+  if [ -n "$OTHER" ]; then
+    RELATED="$(
+      printf '%s\n' "$OTHER" | while IFS= read -r f; do
+        case "$f" in
+          server/__tests__/*.test.js) echo "$f" ;;
+          *)
+            name="$(basename "$f")"
+            name="${name%.*}"
+            grep -lF -- "$name" server/__tests__/*.test.js 2>/dev/null || true
+            ;;
+        esac
+      done | sort -u | tr '\n' ' '
+    )"
+    if [ -n "$RELATED" ]; then
+      run_suite "backend ($(echo $RELATED | wc -w) files)" "node scripts/test-server.js $RELATED"
+    else
+      echo "⏭️  No server test names a staged file — backend skipped."
+    fi
+  fi
+
+  if [ -n "$CLIENT" ]; then
+    LIST="$(printf '%s\n' "$CLIENT" | tr '\n' ' ')"
+    run_suite "frontend (related)" "cd client && NODE_ENV=test NODE_OPTIONS=--no-experimental-webstorage npx vitest related --run --passWithNoTests $LIST"
+  fi
+fi
+
+echo "✅ Formatting applied and the tests passed — proceeding with commit."

ARCHITECTURE.md

@@ -325,8 +325,9 @@ graph TD
 | `routes/analytics.js`     | Extended analytics — token totals, tool usage counts, daily event/session trends, agent type distribution. The client-side analytics heatmap grid is aligned to a Sunday start for correct day-of-week positioning                                                                                                                                                                                                                                                                                                                   |
 | `routes/pricing.js`       | Model pricing CRUD (list/upsert/delete) and per-session / global cost calculation with pattern-based model matching. `PUT /api/pricing` upserts a rule and accepts optional time-limited **introductory** rates (`intro_*_per_mtok` + `intro_until`): usage on/before the cutoff date prices at the intro rate, after it at the standard rate — the calculator picks the effective rate per usage day (`ratesForBucket`), so a promo like Sonnet 5's launch discount is correct before AND after the cutoff, retroactively. Intro columns are written only when the caller sends them (a standard-rate edit never disturbs a promo). Cost is computed per token bucket — keyed by (model, speed, inference_geo, service_tier) — applying fast-mode premium, US data-residency (1.1x), and Batch (0.5x) modifiers, the 5m/1h cache-write split, plus server-tool surcharges (web search $10/1k; code execution estimated by container-time with the monthly free-hours allowance; web fetch free). `attachAgentCosts`/`agentOwnCost` reuse the same calculator to price each agent's `metadata.tokens` for the per-agent `cost` on agent-list responses. Feature rates + modifier math live in `lib/pricing-constants.js`; usage normalization in `lib/token-usage.js` |
 | `routes/settings.js`      | System info (DB size, hook status, server uptime, transcript cache stats), data export as one versioned JSON bundle and matching import/restore (`POST /api/settings/import` via `server/lib/data-transfer.js` — idempotent, session-atomic, non-destructive; consolidates machines), session cleanup (abandon stale, purge old), clear all data (including the fired-alert feed and webhook delivery log; alert *rules* and webhook *targets* are preserved as user configuration), reset pricing, reinstall hooks                                                                                                                                                                                                                                                                                                                                           |
-| `routes/alerts.js`        | HTTP surface for the rules-based alerting engine: alert-rule CRUD (`GET/POST /api/alerts/rules`, `PATCH/DELETE /api/alerts/rules/:id` — rule_type is immutable after creation, config re-validated against the stored type on PATCH), the fired-alert feed (`GET /api/alerts` with `?unacked=true` + pagination, response carries `total` and `unacked` counts), and acknowledgement (`POST /api/alerts/:id/ack`, `POST /api/alerts/ack-all`, broadcasting `alert_updated`). Every rule mutation calls `invalidateRuleCache()` so the evaluation engine picks up changes immediately |
-| `lib/alerts.js`           | Rule evaluation engine for the alerting feature. Four rule types: `event_pattern` (match `event_type` / `tool_name` / `summary_contains`, optionally requiring ≥ `count` matching events within `window_minutes` — counted via a dynamically built, statement-cached SQL query), `token_threshold` (session total tokens ≥ `total_tokens`, only evaluated on token-bearing events: PostToolUse / Stop / SubagentStop / SessionEnd), `inactivity` (active session whose `updated_at` — bumped on every ingested event — is older than `minutes`), and `status_duration` (agent stuck in `working`/`waiting` with no activity for `minutes`, joined against active sessions). Event-driven types run via `evaluateEvent()` called from `routes/hooks.js` **after** the ingest transaction commits and the HTTP response is sent — alerting can never slow down or fail hook ingestion, and `evaluateEvent` is itself fully try/catch-guarded per rule. Time-based types run via `sweepTimeRules()` on a 60 s unref'd interval (same pattern as the hooks watchdog). `fireAlert()` applies per-(rule, session, agent) cooldown dedup (`cooldown_seconds`, default 300) by checking the most recent `alert_events` row for the scope, then persists and broadcasts `alert_triggered`. Enabled rules are cached in memory (hook ingest is hot) and invalidated on every CRUD mutation. `validateRuleConfig()` normalizes + validates type-specific config and is shared with the routes. After persisting and broadcasting a fired alert, `fireAlert()` hands it to `lib/webhooks.js` `dispatchAlert()` fire-and-forget (lazy-required to keep the module graph acyclic) — webhook delivery never blocks or fails alert firing |
+| `routes/alerts.js`        | HTTP surface for the rules-based alerting engine: alert-rule CRUD (`GET/POST /api/alerts/rules`, `PATCH/DELETE /api/alerts/rules/:id` — rule_type is immutable after creation, config re-validated against the stored type on PATCH), the fired-alert feed (`GET /api/alerts` with `?unacked=true` + pagination, response carries `total` and `unacked` counts), and acknowledgement (`POST /api/alerts/:id/ack`, `POST /api/alerts/ack-all`, broadcasting `alert_updated`), and the read-only dry run `POST /api/alerts/rules/preview` (`{rule_type, config, days?, cooldown_seconds?}` → what `previewRule` says it would have fired over the last `days`, 1–90, default 7). Every rule mutation calls `invalidateRuleCache()` so the evaluation engine picks up changes immediately |
+| `routes/budgets.js` + `lib/budgets.js` | Spend budgets: a budget IS an alert rule of type `budget` (CRUD through `/api/alerts/rules`). `lib/budgets.js` computes a period's bounds in the user's local time (`tz_offset` saved with the rule; day / week from Monday / month), its spend priced like `GET /api/pricing/cost` by the day tokens were spent (via `dailyTokenRows` + `costWhere`, scoped to `tool`/`lane`), and the pace projection to the period's end; `GET /api/budgets/status` lists every enabled budget with `spend`, `pct`, `projected` and the thresholds `crossed` |
+| `lib/alerts.js`           | Rule evaluation engine for the alerting feature. Six rule types — `cost_threshold` (a session's cost ≥ `usd`, on token-bearing events like `token_threshold`) and `budget` (on the sweep: each of `thresholds` % of `limit_usd` for the current `period` fires ONCE per period, deduped on `details.period_start` + `details.threshold` and bypassing the cooldown) plus the four original ones: `event_pattern` (match `event_type` / `tool_name` / `summary_contains`, optionally requiring ≥ `count` matching events within `window_minutes` — counted via a dynamically built, statement-cached SQL query), `token_threshold` (session total tokens ≥ `total_tokens`, only evaluated on token-bearing events: PostToolUse / Stop / SubagentStop / SessionEnd), `inactivity` (active session whose `updated_at` — bumped on every ingested event — is older than `minutes`), and `status_duration` (agent stuck in `working`/`waiting` with no activity for `minutes`, joined against active sessions). Event-driven types run via `evaluateEvent()` called from `routes/hooks.js` **after** the ingest transaction commits and the HTTP response is sent — alerting can never slow down or fail hook ingestion, and `evaluateEvent` is itself fully try/catch-guarded per rule. Time-based types run via `sweepTimeRules()` on a 60 s unref'd interval (same pattern as the hooks watchdog). `fireAlert()` applies per-(rule, session, agent) cooldown dedup (`cooldown_seconds`, default 300) by checking the most recent `alert_events` row for the scope, then persists and broadcasts `alert_triggered`. Enabled rules are cached in memory (hook ingest is hot) and invalidated on every CRUD mutation. `validateRuleConfig()` normalizes + validates type-specific config and is shared with the routes. After persisting and broadcasting a fired alert, `fireAlert()` hands it to `lib/webhooks.js` `dispatchAlert()` fire-and-forget (lazy-required to keep the module graph acyclic) — webhook delivery never blocks or fails alert firing |
 | `routes/webhooks.js`      | HTTP surface for universal webhook targets: target CRUD (`GET/POST /api/webhooks`, `PATCH/DELETE /api/webhooks/:id` — `type` is immutable after creation), a redacted provider catalog (`GET /api/webhooks/providers`, drives the UI form), a synchronous test probe (`POST /api/webhooks/:id/test` — always 200, the `ok` flag carries the downstream delivery result), and a per-target delivery log (`GET /api/webhooks/:id/deliveries`). Validation is registry-driven: required URL (per provider), per-provider config fields, https enforcement, generic-family secret/headers. **Security**: target URLs are masked (host + last 4 chars) and secret config fields + custom-header values are redacted in every response — full URLs, signing secrets, and credentials (routing keys, api keys, bot tokens) are stored server-side and never leave the server. PATCH uses "set-flag" semantics (omit `url`/`secret`/`headers`/`config` to leave unchanged); `config` is merged over the existing config so one field can change without re-sending secrets. Every mutation calls `invalidateWebhookCache()` |
 | `lib/webhook-providers.js`| Declarative registry of the 14 first-class providers (+ generic). Each entry declares a `family` (`chat` / `api` / `generic`), a payload `format`ter, URL resolution (`urlFrom(config)` for Telegram/Opsgenie that derive the endpoint, `defaultUrl` for PagerDuty, or a user-supplied URL), optional `authFrom(config)` headers (Opsgenie GenieKey), and the credential `fields` the UI renders + the route validates. Formatters emit each platform's native body: Slack Block Kit, Discord embed, Teams Adaptive Card wrapped in the Power Automate Workflows `{ type: "message", attachments: [...] }` envelope (the legacy O365-connector MessageCard transport was retired May 2026), Google Chat text, Mattermost/Rocket.Chat Slack-style attachments, Telegram sendMessage (HTML), PagerDuty Events API v2 (with `dedup_key`), Opsgenie Alert API, Splunk On-Call/VictorOps, and the generic `{ event, alert }` envelope. A provider may also declare `verifyResponse(body)` to veto a 2xx that actually signals failure (Splunk On-Call returns 200 with `result:"failure"`). `publicProviders()` returns the redacted catalog. Adding a provider = one registry entry + a formatter — no route or delivery changes |
 | `lib/webhooks.js`         | Universal webhook delivery engine driven by the provider registry. `buildRequest()` resolves the URL, formats the provider-native payload, and assembles headers (provider auth headers + generic-family custom headers + optional HMAC-SHA256 signature via `X-Webhook-Signature` / `X-Webhook-Timestamp`). `dispatchAlert()` fans a fired alert out to every enabled, in-scope target (optional per-rule scoping via `rule_ids`); each `deliver()` POSTs with an `AbortController` timeout and bounded retry/backoff (retries transport errors / 429 / 5xx, never other 4xx) and records the attempt-chain outcome in `webhook_deliveries` (pruned to the newest 2000 rows). Delivery is detached and fully fail-safe — it never throws into the alert path. Enabled targets are cached like alert rules; tunables (`WEBHOOK_TIMEOUT_MS`, `WEBHOOK_MAX_ATTEMPTS`, `WEBHOOK_RETRY_BASE_MS`) are env-overridable. `sendTest()` awaits a synthetic delivery for the test endpoint |
@@ -351,8 +352,8 @@ graph TD
 | `server/lib/archive.js`     | Safe archive extraction: `.zip` via `adm-zip`, `.tar`/`.tar.gz`/`.tgz` via `tar`, plain `.gz` via `zlib` in streaming mode. Every entry is validated through `safeJoin` which rejects absolute paths and `..` traversal before any bytes are written. Enforces a hard extraction cap (`MAX_EXTRACT_BYTES`, default 4 GB, tunable via `AGENTHUB_IMPORT_MAX_EXTRACT_BYTES`) with `ExtractionLimitError` surfaced as HTTP 413 from the upload route — defense against zip/tar/gzip bombs. Also provides `detectKind` for filename-based dispatch and `mkTempDir`/`rmTempDir` helpers |
 | `server/lib/remote-sync.js` | **Remote Data Sources** — live remote/multi-machine data collection over SSH. Mirrors the remote's `~/.claude/projects` via **scp** (or `wsl.exe` + `tar` for WSL-hosted Claude on Windows SSH) into a **sandboxed per-source staging dir** under the data dir, then feeds it through the **same** importer used for local history (`importFromDirectory` from `scripts/import-history.js`) and tags every imported session with the source id (`sessions.source`). Also runs the connectivity probe behind the test route. Auth **defers entirely to the host SSH stack** (ssh-agent / `~/.ssh/config` / identity file) — **no secrets are ever stored**; every shell-out uses `execFile`/`spawn` argument arrays (never a shell string), and `StrictHostKeyChecking` is left at its SSH default. Background poller `DASHBOARD_REMOTE_SYNC_MS` (default 15000); add/re-enable triggers immediate pull. Sync timeout `DASHBOARD_REMOTE_SYNC_TIMEOUT_MS` (default 600000); connectivity-test timeout `DASHBOARD_REMOTE_TEST_TIMEOUT_MS` (default 15000). Broadcasts `remote_source.status`, `remote_data.updated`, and per-session `session_created`/`session_updated` on successful sync. After each pull, `reconcileRemoteSessionStatus` sets each source session's live status from the mirror — newest JSONL event timestamp within `DASHBOARD_REMOTE_ACTIVE_WINDOW_MS` (default 600000 = 10 min) ⇒ `active`, otherwise `completed`. Remote sessions get no live hooks and are excluded from every local liveness/stale heuristic (all gated on `source = 'local'`), so this reconciliation is the sole owner of their active/completed lifecycle |
 | `server/routes/remote-sources.js` | HTTP surface for **Remote Data Sources**: `GET /api/remote-sources` (list), `POST /api/remote-sources` (create), `PATCH /api/remote-sources/:id`, `DELETE /api/remote-sources/:id` (`?purge=true` also deletes that source's imported sessions), `POST /api/remote-sources/:id/test` (SSH connectivity probe), and `POST /api/remote-sources/:id/sync` (on-demand pull). Delegates the pull/validation to `remote-sync.js`; broadcasts `remote_source.status` on every transition |
-| `server/lib/source-filter.js` | Parses the optional `?sources=` query param (comma-separated source ids) into SQL predicates + bind params, shared by the data endpoints (`GET /api/sessions`, `/api/events`, `/api/agents`, `/api/stats`, `/api/analytics`) so a client **data-scope** selection narrows every query consistently. No filter → the existing unscoped queries run unchanged |
-| `server/lib/scoped-stats.js` | Source-scoped variants of the stats/analytics aggregates, used **only** when a `?sources=` scope filter is active — the unscoped fast paths in `routes/stats.js` / `routes/analytics.js` are untouched when no scope is set |
+| `server/lib/source-filter.js` | Parses the optional `?sources=` query param (comma-separated source ids) and `?tool=` (an AI tool id; `parseScope` folds both into one predicate over `sessions`) into SQL predicates + bind params, shared by the data endpoints (`GET /api/sessions`, `/api/events`, `/api/agents`, `/api/stats`, `/api/analytics`) so a client **data-scope** selection narrows every query consistently. No filter → the existing unscoped queries run unchanged |
+| `server/lib/scoped-stats.js` | Scoped variants of the stats/analytics aggregates, used **only** when a `?sources=` or `?tool=` scope filter is active — the unscoped fast paths in `routes/stats.js` / `routes/analytics.js` are untouched when no scope is set |
 | `lib/cc-discovery.js`     | Read-only discovery of every Claude Code config surface for the Config Explorer page. Pure file reads; never writes. Surfaces: skills (`<root>/skills/<name>/SKILL.md`), subagents (`<root>/agents/*.md`), slash commands (`<root>/commands/*.md`), output styles (`<root>/output-styles/*.md`), plugins (`<CLAUDE_HOME>/plugins/installed_plugins.json` joined with `enabledPlugins` in settings + per-plugin `contributes` counts **and** `contributes.items`, which names every skill / subagent / command / output style the plugin ships — each surface read from the conventional install subdirectory *and* from whatever path `plugin.json` declares for that key, with declared paths outside the plugin's own install dir dropped by `isUnder()`, so a plugin that lists its commands explicitly and keeps `commands/` empty no longer reports zero + `plugin.json` metadata), marketplaces (`known_marketplaces.json` enriched with each `marketplace.json`), MCP servers (top-level + per-project from `~/.claude.json`), hooks (across user / project / project-local settings.json), keybindings (`<CLAUDE_HOME>/keybindings.json`), statusline config + `statusline.py` / `statusline-command.sh` content, hook scripts dir (`<CLAUDE_HOME>/hooks/`), settings (with secret-key redaction matching `/token\|secret\|password\|api[_-]?key\|auth/i`), memory (`CLAUDE.md` at user + project **plus** the per-project file-based auto-memory store — every `*.md` under `~/.claude/projects/<slug>/memory/`, returned as `scope:"auto-memory"` items carrying `project`, `name`, `isIndex`, and parsed `frontmatter`, so a `MEMORY.md` index and one file per remembered fact, often 100+, all surface). Path containment via `isUnder()` — every read must resolve under CLAUDE_HOME, project `.claude/`, or be a project CLAUDE.md. 256 KB read cap. Minimal YAML frontmatter parser handles `key: value` + quoted strings + indented continuation lines |
 | `lib/cc-mutate.js`        | Create / overwrite / delete for the **low-risk text-file surfaces only** (skills, subagents, slash commands, output styles, memory — including the per-project file-based auto-memory store, mutated via `scope: "auto-memory"`, `type: "auto-memory"`, `project`, `name`, with its backups landing in `<memory-dir>/.cc-config-backups/auto-memory/`), plus `writeKeybindings()` for the structured `keybindings.json` editor (read-modify-write that preserves top-level metadata, rejects duplicate contexts/keys, and backs up to `<CLAUDE_HOME>/cc-config-backups/keybindings/`). Plugins, MCP, hooks-in-settings, and `settings.json` files are NEVER written from here — they have concurrent-write races with the live Claude Code CLI. Every mutation creates a timestamped backup at `<root>/cc-config-backups/<type>/<base>.<ISO>.bak[.dir]` BEFORE the change — backups land outside the directories Claude Code scans, so a deleted skill cannot resurface as a backup-named one. Writes are atomic: temp file in same dir → fsync → `renameSync`. Tmp removed on every failure path. Skill dirs are backed up whole (preserving bundled assets) before recursive removal. Strict `name` regex (`^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$`), 256 KB content cap, double-checked path containment via `isUnder()` |
 | `lib/cc-reload.js`        | Types `/reload-plugins` / `/reload-skills` into the Claude Code sessions the dashboard already has open, over `tmux send-keys` (reusing `tmux.js`'s `sendText`). Both slash commands are scoped BY CLAUDE CODE to the session that runs them, so a session cannot be reloaded from the outside and no background process can do it on a session's behalf — typing into a live pane is the only real mechanism. Deliberately spawns NO `claude` process: a one-shot `claude -p "/reload-plugins"` would reload only its own short-lived session, exit, and leave a junk session in the dashboard's history, so this module creates no sessions at all. Skips panes sitting at a shell prompt (the text would run as a shell command) and addresses `claude` lanes only, since Codex has no such command. Sends to a busy pane on purpose — tmux queues the keystrokes into the REPL's input buffer, so a late reload still lands, where skipping busy panes would leave exactly the sessions in active use running stale code. The command set is a fixed constant, never caller-supplied: a pane's stdin is an arbitrary-code boundary. Never throws |
@@ -367,6 +368,7 @@ graph TD
 | `lib/codex-hooks.js`     | AgentHub's hooks in Codex's `$CODEX_HOME/hooks.json`, installed/removed only on a click (`GET/POST/DELETE /api/settings/codex-hooks`): one group per event through the stable forwarder `$CODEX_HOME/agenthub-hook.sh`, whose content `refreshScript()` rewrites at every start; trust is read from Codex's `config.toml`, never written. See **Codex hooks** under Codex Lane Status, Sessions and Hooks. |
 | `lib/antigravity-home.js` | Where agy keeps its data: `~/.gemini` (`AGENTHUB_GEMINI_DIR` overrides it), the CLI's `antigravity-cli/` under it. agy has no home override of its own. |
 | `lib/antigravity-usage.js` | Antigravity CLI sessions and tokens from agy's `conversations/<id>.db` (read-only, every `DASHBOARD_ANTIGRAVITY_POLL_MS`): protobuf `ModelUsageStats` per `gen_metadata` row, the workspace from `trajectory_metadata_blob`, name/start from the transcript. Also sets a quiet session's lane idle. See **Antigravity Sessions and Hooks**. |
+| `lib/cursor-usage.js` | Cursor sessions (no tokens: Cursor's transcripts carry none) from `~/.cursor/projects/*/agent-transcripts/<id>/<id>.jsonl`, every `DASHBOARD_CURSOR_POLL_MS`. See **Cursor Sessions**. |
 | `lib/antigravity-hooks.js` | AgentHub's named hook `agenthub` in `~/.gemini/config/hooks.json` (`GET/POST/DELETE /api/settings/antigravity-hooks`): PreInvocation, PostToolUse and Stop through the stable forwarder `~/.gemini/config/agenthub-hook.sh`, which answers `{}`. Never PreToolUse. |
 | `routes/codex-config.js`  | HTTP surface for the Codex Config panel. Read endpoints for every surface (skills, agents, rules, memory, config, mcp, plugins, marketplaces, file, overview) plus mutation endpoints (`PUT /file`, `DELETE /file` delegating to `codex-mutate.js`; `POST /mcp/{add,remove}`, `/plugins/action`, `/marketplaces/{add,action}` delegating to `codex-cli.js`), plus `GET /backups`. Every successful mutation broadcasts `codex_config_changed` over the WebSocket so an open Codex settings tab refetches without polling. All errors return structured `{error: {code, message}}` shapes |
 | `lib/tmux.js`             | Wrapper around tmux CLI for session management. `createSession(sessionName, cwd)` creates a new tmux session in the specified working directory. `sendCommand(sessionName, command)` sends a command into the session. `killSession(sessionName)` terminates the session. `listSessions()` returns all active sessions. Session management is the foundation for the PTY transport layer |
@@ -850,7 +852,7 @@ erDiagram
     alert_rules {
         TEXT id PK "UUID"
         TEXT name "User-facing rule name"
-        TEXT rule_type "event_pattern|inactivity|status_duration|token_threshold"
+        TEXT rule_type "event_pattern|inactivity|status_duration|token_threshold|cost_threshold|budget (no CHECK; validated in lib/alerts.js)"
         TEXT config "Type-specific JSON config"
         INTEGER enabled "1|0"
         INTEGER cooldown_seconds "Per-scope dedup window, default 300"
@@ -1731,6 +1733,29 @@ is ever inferred.
 
 ---
 
+## Cursor Sessions
+
+`server/lib/cursor-usage.js` (`startCursorUsagePoll`, every
+`DASHBOARD_CURSOR_POLL_MS`, default 15000, `0` disables) reads the agent
+transcripts Cursor writes — the CLI (`cursor-agent`) and the editor's agent both —
+at `~/.cursor/projects/<project slug>/agent-transcripts/<id>/<id>.jsonl`
+(`AGENTHUB_CURSOR_DIR` overrides `~/.cursor`). Each becomes a `sessions` row with
+`tool = 'cursor'`: id = file name, name = the first `<user_query>` line (60
+chars), start = the file's birth time (mtime where there is none), `active`
+while it was written in the last two minutes, else `completed` at its last
+write. The cwd is the project slug walked back onto the filesystem (every
+non-alphanumeric character is a `-` in the slug, so only a path that still
+exists resolves); otherwise it stays NULL. `cursor_transcripts` holds the mtime
+read, so a session the user deleted stays deleted until Cursor writes to it again.
+
+**No tokens, no model, no cost.** A transcript line is `{role, message:{content}}`
+or `{type: "turn_ended"}` — no usage, no model id, no timestamps — so a Cursor
+session has no `token_usage` rows. The editor's `state.vscdb` keeps a
+`tokenCount` per chat bubble and a display model name (`GPT`, `default`, a BYOK
+name); AgentHub does not read it. No Cursor hooks are installed.
+
+---
+
 ## Agent Extension Layer
 
 The repository includes a triple extension strategy:
@@ -2271,8 +2296,8 @@ The same shape is used by `GET /status`, `POST /check`, and the `update_status`
 | Ahead of the newest release | `{update_available:false, dev_build:true, commits_ahead_of_release:N}` | Sidebar reads `Dev build · N ahead`; modal suppressed (a dev build is not an available update). |
 | Shallow clone (incl. the plugin cache) | `{shallow_clone:true, commits_behind_release:null, commits_ahead_of_release:null, dev_build:false}` | No commit badge is rendered at all — the numbers would be graft artefacts. Version compare still decides `update_available`. |
 | Newer release, ordinary checkout | `{update_available:true, situation:"release_available", latest_release:"vX.Y.Z", manual_command:"...git fetch origin --tags && git merge --ff-only vX.Y.Z..."}` | Modal opens titled with the release version, links its notes, and shows **Update now**. |
-| Newer release, plugin-cache install | `{update_available:true, situation:"plugin_managed", install_kind:"plugin", plugin_marketplace:"sg", plugin_name:"agenthub", manual_command:"claude plugin marketplace update sg && ..."}` | Modal opens WITH **Update now**; `POST /apply` answers `200 {applied:true, mode:"plugin"}` and the detached chain pulls the new version and re-bootstraps. The modal notes that an already-open Claude Code session still needs `/reload-plugins` for new skills/commands. |
-| Plugin chain ran but nothing was published | `{last_plugin_update:{ok:true, step:"already_current"}}` | The old server keeps running, untouched; no restart, no error banner. |
+| Newer release, plugin-cache install | `{update_available:true, situation:"plugin_managed", install_kind:"plugin", plugin_marketplace:"sg", plugin_name:"agenthub", manual_command:"claude plugin marketplace update sg && ..."}` | Modal opens WITH **Update now**; `POST /apply` answers `200 {applied:true, mode:"plugin"}` and the detached chain pulls the new version and re-bootstraps. The modal notes that an already-open Claude Code session still needs `/reload-plugins` for new skills/commands. It then polls `status` and reloads once the old server went down and answered again, or as soon as a different `local_version` answers; a verdict of this chain (`finished_at` after the click) that is `ok:false` or `already_current` ends the wait and shows it, since the old server then never goes down. Independently, every tab reloads itself onto the new UI build when its WebSocket reconnects to a server whose `/api/health` `version` is not the bundle's (`client/src/lib/newBuildReload.ts`, once per version). |
+| Plugin chain ran but nothing was published | `{last_plugin_update:{ok:true, step:"already_current"}}` | The old server keeps running, untouched; no restart, no error banner — a tab waiting on **Update now** stops waiting and says nothing new was pulled. |
 | Plugin chain mid-handover | `{last_plugin_update:{ok:true, step:"bootstrap", note:"the new plugin version is installed; the server is being handed over"}}` | Written BEFORE the handover on purpose: that step retires the process tree the helper hangs off, and a helper killed there would otherwise leave `last_plugin_update: null` for an update that succeeded. Overwritten by `done` when the helper survives. |
 | Plugin chain failed (no `claude` on PATH, `npm ci` broke, bootstrap died) | `{last_plugin_update:{ok:false, step:"resolve_claude"\|"plugin_update"\|"bootstrap", error:"..."}}` | Danger banner in the modal naming the failed step. A `bootstrap` failure means the old server was already stopped, so the verdict says to run `/agenthub-update` to recover — and it is read back by whichever server comes up next, because it lives outside the cache. |
 | Plugin `/apply` with nothing newer published | 409 `{reason:"plugin_managed", release_check:"ok"}` | No chain is spawned. Message names the newest release and points at `/agenthub-update` to force a refresh. |

INSTALL.md

@@ -117,9 +117,10 @@ echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc   # where the plugin put
   `node:sqlite`); a checkout still runs on Node 20. The `agenthub` launcher
   pins the node that installed it and falls back to `node` on `PATH` when a
   `brew upgrade` or `nvm` switch deletes that binary.
-- **Starts at login by itself (LaunchAgent).** The plugin bootstrap installs
-  `~/Library/LaunchAgents/io.smartgift.agenthub.plist` (a checkout: `agenthub
-  service install`), so the dashboard comes back after every login with no
+- **Starts at login once you turn it on (LaunchAgent).** Off by default; with
+  Settings → About → **Start AgentHub automatically** on, the plugin bootstrap
+  installs `~/Library/LaunchAgents/io.smartgift.agenthub.plist` (a checkout:
+  the same switch, or `agenthub service install`), so the dashboard comes back after every login with no
   Claude Code session, and launchd restarts it if it dies. Lane panes survive
   a restart of the server. Its output goes to `~/Library/Logs/agenthub.log`.
   A LaunchAgent needs a login at the Mac itself; over SSH only, or when

README.md

@@ -86,6 +86,12 @@ Internal build — all rights reserved.
   notification type can pick its own.
 - **A CLI for all of it** (`agenthub`, plus `agenthub repl`), a PWA install, and
   a UI in English, Vietnamese, Chinese and Korean.
+- **Outside the dashboard, all opt-in:** a read-only MCP server
+  (`claude mcp add agenthub -- agenthub mcp`, [docs/MCP.md](docs/MCP.md)), a
+  Claude Code statusline with session and today's cost
+  (`agenthub statusline install`, [docs/STATUSLINE.md](docs/STATUSLINE.md)), and
+  Prometheus rules + Grafana boards for `/api/metrics`
+  (`docker-compose.monitoring.yml`, [docs/MONITORING.md](docs/MONITORING.md)).
 
 ## Prerequisites
 
@@ -197,7 +203,10 @@ agenthub service uninstall     # disable and remove it
 On Linux, `agenthub service install` also tries `loginctl enable-linger` so the service
 starts on a cold boot, before anyone logs in; if that needs elevated rights on
 your machine it prints the `sudo loginctl enable-linger <user>` command to run
-once yourself. Plugin installs get the same persistence automatically — see
+once yourself. The same is a switch in the dashboard — Settings → About →
+**Start AgentHub automatically** (off by default; it enables or disables the
+unit and never stops the running server). Plugin installs get it only once
+that switch is on — see
 [Auto-start on boot](docs/PLUGINS.md#auto-start-on-boot) in `docs/PLUGINS.md`.
 
 ## The CLI
@@ -268,6 +277,13 @@ for a session the hooks report on (a long tool call writes nothing, and after a
 Stop agy may still be waiting for you), after two minutes for one without
 hooks. Antigravity workspaces carry no pipeline either.
 
+**Cursor** sessions — the Cursor CLI's and the Cursor editor's agent chats — are
+read from Cursor's agent transcripts
+(`~/.cursor/projects/*/agent-transcripts/`, every `DASHBOARD_CURSOR_POLL_MS` ms,
+default 15000) and appear in Sessions with a **Cursor CLI** badge. Cursor writes
+no token counts or model ids there, so a Cursor session shows no tokens and no
+cost.
+
 **Pipelines are dormant.** AgentHub ships no pipeline template, so a workspace has no
 stages until you drop a template JSON into `DASHBOARD_PIPELINES_DIR` (see
 [`docs/LANES.md`](docs/LANES.md#custom-pipeline-templates)); until then
@@ -314,7 +330,13 @@ npm run test:server    # node:test
 npm run test:client    # Vitest
 ```
 
-Both must be green before a commit; the pre-commit hook runs them plus Prettier.
+Both must be green before a commit. The pre-commit hook (`.husky/pre-commit`)
+runs Prettier, then the tests the commit needs: both full suites for a big or
+risky commit (over 10 code files, a dependency, build/test config or the hook
+itself, a deleted file), only the related tests for a small one (`vitest
+related` for `client/`, the server test files that name each other staged
+module), nothing for docs alone. `AGENTHUB_FULL_TESTS=1 git commit …` forces
+both full suites.
 
 ## Layout
 
@@ -323,6 +345,8 @@ Both must be green before a commit; the pre-commit hook runs them plus Prettier.
 | `server/` | Express API, SQLite schema, hook ingest, workspace and worktree libraries |
 | `client/` | React 18 + Vite + Tailwind dashboard |
 | `bin/agenthub.js` | CLI |
+| `mcp/`, `statusline/` | Read-only MCP server and Claude Code statusline (opt-in) |
+| `monitoring/` | Prometheus config/rules and Grafana boards for `/api/metrics` |
 | `docs/` | Architecture, API, workspaces, database |
 | `plugins/` | Claude Code plugins shipped with the dashboard |
 

README.vi.md

@@ -176,7 +176,10 @@ agenthub service uninstall     # disable và gỡ bỏ
 `agenthub service install` cũng thử chạy `loginctl enable-linger` để service khởi
 động được cả khi cold boot (chưa ai login); nếu máy cần quyền cao hơn, lệnh
 này sẽ in ra `sudo loginctl enable-linger <user>` để bạn tự chạy một lần.
-Bản cài qua plugin cũng được tự khởi động tương tự — xem
+Trong dashboard cũng có công tắc tương ứng — Settings → About → **Tự động khởi
+động AgentHub** (mặc định tắt; chỉ enable/disable unit, không bao giờ dừng
+server đang chạy). Bản cài qua plugin chỉ được tự khởi động khi công tắc này
+bật — xem
 [Auto-start on boot](docs/PLUGINS.md#auto-start-on-boot) trong
 `docs/PLUGINS.md`.
 
@@ -269,8 +272,13 @@ npm run test:server    # node:test
 npm run test:client    # Vitest
 ```
 
-Cả hai phải xanh (pass) trước khi commit; pre-commit hook chạy chúng cộng
-thêm Prettier.
+Cả hai phải xanh (pass) trước khi commit. Pre-commit hook (`.husky/pre-commit`)
+chạy Prettier, rồi chạy những test mà commit cần: cả hai bộ đầy đủ cho commit
+lớn hoặc rủi ro (hơn 10 file code, đổi dependency, cấu hình build/test hay
+chính hook, có xoá file), chỉ test liên quan cho commit nhỏ (`vitest related`
+cho `client/`, các file test server có nhắc tới module được stage), và không
+chạy test nào nếu chỉ sửa tài liệu. `AGENTHUB_FULL_TESTS=1 git commit …` buộc
+chạy cả hai bộ đầy đủ.
 
 ## Cấu trúc thư mục
 

bin/agenthub.js

@@ -141,21 +141,10 @@ function termWidth() {
 /**
  * Resolve the dashboard base URL. Env override first (matches the hook
  * handler's contract), then the live-server discovery file, then the default
- * port. The discovery module is best-effort and never throws.
+ * port — shared with the MCP server and the statusline (`dashboard-url.js`).
  */
 function baseUrl() {
-  const envPort = process.env.CLAUDE_DASHBOARD_PORT || process.env.DASHBOARD_PORT;
-  if (envPort) return `http://127.0.0.1:${envPort}`;
-  try {
-    const { resolveDashboardPort } = require(
-      path.join(REPO_ROOT, "server", "lib", "server-info.js")
-    );
-    const port = resolveDashboardPort();
-    if (port) return `http://127.0.0.1:${port}`;
-  } catch {
-    /* discovery unavailable — fall through to the default */
-  }
-  return "http://127.0.0.1:4820";
+  return require(path.join(REPO_ROOT, "server", "lib", "dashboard-url.js")).dashboardUrl();
 }
 
 /** Thrown when the dashboard server does not answer — the dispatcher decides
@@ -1037,6 +1026,8 @@ async function cmdRemoteSources(flags, positional) {
       ssh_port: flags.port != null ? Number(flags.port) : null,
       identity_file: flags.identity != null ? String(flags.identity) : null,
       remote_home: flags["remote-home"] != null ? String(flags["remote-home"]) : null,
+      sync_codex: !!flags.codex,
+      remote_codex_home: flags["codex-home"] != null ? String(flags["codex-home"]) : null,
       enabled: flags.disabled ? false : true,
     };
     const r = await post("/api/remote-sources", body);
@@ -2797,7 +2788,7 @@ const COMMAND_GROUPS = [
       [
         "remote-sources add",
         "",
-        "--label X --host user@host [--port N --identity path --remote-home path]",
+        "--label X --host user@host [--port N --identity path --remote-home path --codex --codex-home path]",
       ],
       ["remote-sources test <id>", "", "Probe SSH connectivity to a source"],
       ["remote-sources sync [id]", "", "Pull history now (all sources if id omitted)"],
@@ -2917,6 +2908,22 @@ const COMMAND_GROUPS = [
       ],
     ],
   ],
+  [
+    "Integrations",
+    [
+      [
+        "mcp",
+        "",
+        "Run the read-only MCP server on stdio (claude mcp add agenthub -- agenthub mcp)",
+      ],
+      ["statusline", "", "Render the Claude Code statusline from the JSON on stdin"],
+      [
+        "statusline install|uninstall",
+        "[--force]",
+        "Add/remove AgentHub's statusLine in ~/.claude/settings.json (--force: replace or remove another one)",
+      ],
+    ],
+  ],
   [
     "Administration",
     [
@@ -3664,8 +3671,43 @@ const SUBCOMMANDS = {
   pricing: ["set", "delete", "reset"],
   webhooks: ["test"],
   import: ["rescan", "path"],
+  statusline: ["install", "uninstall"],
 };
 
+/** `agenthub statusline install|uninstall [--force]` — the user's settings.json. */
+function cmdStatusline(sub, flags) {
+  const { install, uninstall } = require(path.join(REPO_ROOT, "statusline", "install.js"));
+  const { getSettingsPath } = require(path.join(REPO_ROOT, "server", "lib", "claude-home.js"));
+  const file = getSettingsPath();
+  const force = Boolean(flags.force);
+  const r = sub === "install" ? install(file, { force }) : uninstall(file, { force });
+  const prev = r.previous ? JSON.stringify(r.previous) : "";
+  switch (r.status) {
+    case "installed":
+      console.log(`${c.green("✔")} statusLine set in ${file}: ${r.command}`);
+      if (prev) console.log(c.dim(`  replaced ${prev} (backup beside the file)`));
+      console.log(c.dim("  Claude Code picks it up on the next prompt."));
+      return;
+    case "unchanged":
+      console.log(`statusLine already set in ${file}: ${r.command}`);
+      return;
+    case "removed":
+      console.log(`${c.green("✔")} statusLine removed from ${file} (backup beside the file)`);
+      return;
+    case "absent":
+      console.log(`No statusLine in ${file}.`);
+      return;
+    case "foreign":
+      console.error(c.red(`✖ ${file} has a statusLine that is not AgentHub's: ${prev}`));
+      console.error(
+        c.dim(
+          `  Re-run with --force to ${sub === "install" ? "replace" : "remove"} it (a backup is kept).`
+        )
+      );
+      process.exitCode = 1;
+  }
+}
+
 /** Run one parsed command. Returns the handler's promise; may throw
  *  ServerDownError (for the caller's offline routing) or call process.exit
  *  for usage/validation failures. `cmd === "repl"` is handled by the entry
@@ -3800,6 +3842,16 @@ async function runCommand(argv) {
       process.exitCode = 1;
       return;
     }
+    case "mcp":
+      return require(path.join(REPO_ROOT, "mcp", "server.js")).main();
+    case "statusline":
+      if (rest[0] === "install" || rest[0] === "uninstall") return cmdStatusline(rest[0], flags);
+      if (rest[0]) {
+        console.error("usage: agenthub statusline [install|uninstall [--force]]");
+        process.exitCode = 1;
+        return;
+      }
+      return require(path.join(REPO_ROOT, "statusline", "statusline.js")).main();
     case "open":
       return cmdOpen();
     case "version":

client/README.md

@@ -199,13 +199,17 @@ client/
 │   │   │   ├── ClaudeAgentHubSettings.tsx   # Claude Code → Overview: CLAUDE_HOME, hook status, pricing
 │   │   │   ├── HomeDirSetting.tsx           # CLAUDE_HOME / CODEX_HOME editor (env-owned warning)
 │   │   │   ├── CodexHooksSettings.tsx       # Codex → Overview → Codex hooks card
+│   │   │   ├── ReportSettings.tsx           # Settings → Reports: scheduled report definitions, Run now, run history + downloads
 │   │   │   └── AntigravityHooksSettings.tsx # Antigravity → Antigravity hooks card
 │   │   └── workflows/      # Dashboard → Analytics → Workflow panels: own-pipeline stats + D3 analytics (11 files)
 │   │
 │   ├── pages/              # Route pages
-│   │   ├── Dashboard.tsx      # Monitor / Analytics / Health tabs
+│   │   ├── Dashboard.tsx      # Monitor / Analytics / Health tabs; Analytics' date range (Today/This week from Monday/This month from the 1st/7d/30d/90d/All/Custom, `?range=`, lib/dateRange.ts) narrows its headline, cost and token cards
+│   │   ├── History.tsx        # /sessions tab shell (?view=): Sessions · Events (ActivityFeed) · Agents (AgentsTable)
+│   │   ├── AgentsTable.tsx    # /sessions?view=agents (the old /query redirects here): filter agents, sort, page, export CSV/JSON (GET /api/query?entity=agents)
 │   │   ├── Sessions.tsx       # Filterable table; shows each session's real name (synced live from the transcript), falls back to the short ID
-│   │   ├── SessionDetail.tsx  # Agent tree + event timeline + Conversation tab (slash-command pills & output, inline rename markers)
+│   │   ├── SessionDetail.tsx  # Agent tree + event timeline + Conversation tab (slash-command pills & output, inline rename markers) + Replay tab (EventReplay) + Snapshot action
+│   │   ├── SnapshotView.tsx   # Read-only /snapshot/:token page over a frozen session payload
 │   │   ├── ActivityFeed.tsx  # Real-time event log; row click expands payload; Session btn navigates
 │   │   ├── Workflows.tsx      # Workflow analytics, rendered in Dashboard → Analytics → Workflow
 │   │   ├── Settings.tsx
@@ -255,7 +259,7 @@ graph TB
     Detail[SessionDetail<br/>agent hierarchy + timeline]
     Feed[ActivityFeed<br/>streaming event log]
     Workflows[Workflows<br/>Analytics → Workflow sub-tab:<br/>lane pipelines + D3 analytics]
-    Settings[SettingsHub /settings/:section<br/>General · Appearance · Notifications<br/>Agents: AI tools, Claude Code, Codex, each catalog tool<br/>Routing: AI Router, Pricing · Git: credentials, worktree suggestions]
+    Settings[SettingsHub /settings/:section<br/>General · Appearance · Notifications<br/>Agents: AI tools, Claude Code, Codex, each catalog tool<br/>Routing: AI Proxy · Cost: Pricing · Git: credentials, worktree suggestions]
 
     App --> Layout
     Layout --> Dashboard & Sessions & Detail & Feed & Settings
@@ -501,6 +505,8 @@ function App() {
           <Route index element={<Dashboard />} />
           <Route path="sessions" element={<History />} />
           <Route path="sessions/:id" element={<SessionDetail />} />
+          {/* legacy path - the Query Explorer is now the Agents tab on /sessions */}
+          <Route path="query" element={<Navigate to="/sessions?view=agents" replace />} />
           {/* legacy path - the activity feed is now a tab on /sessions */}
           <Route path="activity" element={<Navigate to="/sessions?view=events" replace />} />
           <Route path="workflows" element={<Navigate to="/?tab=analytics&sub=workflow" replace />} />

client/src/App.tsx

@@ -71,6 +71,7 @@ import { useWebSocket } from "./hooks/useWebSocket";
 import { useNotifications } from "./hooks/useNotifications";
 import { eventBus } from "./lib/eventBus";
 import { copyOnCtrlShiftC } from "./lib/keys";
+import { reloadOnNewBuild } from "./lib/newBuildReload";
 import type { WSMessage } from "./lib/types";
 
 // The heavy pages (xterm, the diff viewer, the settings editors) load on first
@@ -82,6 +83,9 @@ const SettingsHub = lazy(() =>
 const SessionDetail = lazy(() =>
   import("./pages/SessionDetail").then((m) => ({ default: m.SessionDetail }))
 );
+const SnapshotView = lazy(() =>
+  import("./pages/SnapshotView").then((m) => ({ default: m.SnapshotView }))
+);
 
 function PageFallback() {
   const { t } = useTranslation();
@@ -129,6 +133,10 @@ export default function App() {
     return () => window.removeEventListener("vite:preloadError", onPreloadError);
   }, []);
 
+  // The server came back as a newer version (any tab, any way it was updated):
+  // load its UI build instead of leaving the user to press F5.
+  useEffect(() => reloadOnNewBuild(), []);
+
   // Ctrl+Shift+C is copy here (Linux terminal habit), not the browser's inspector.
   useEffect(() => {
     window.addEventListener("keydown", copyOnCtrlShiftC, true);
@@ -158,6 +166,15 @@ export default function App() {
                 </Page>
               }
             />
+            <Route
+              path="snapshot/:token"
+              element={
+                <Page>
+                  <SnapshotView />
+                </Page>
+              }
+            />
+            <Route path="query" element={<Navigate to="/sessions?view=agents" replace />} />
             <Route path="activity" element={<Navigate to="/sessions?view=events" replace />} />
             <Route
               path="workflows"

client/src/components/AlertsNotifications.tsx

@@ -70,6 +70,8 @@ import {
   BellOff,
   Check,
   CheckCheck,
+  ChevronDown,
+  Eye,
   ListChecks,
   Pencil,
   Plus,
@@ -87,9 +89,10 @@ import { ConfirmModal } from "./ConfirmModal";
 import { Checkbox } from "./Checkbox";
 import { FieldHelp } from "./FieldHelp";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "./ContextMenu";
-import { timeAgo } from "../lib/format";
+import { fmtCost, timeAgo } from "../lib/format";
 import { toast } from "../lib/toast";
-import type { AlertEvent, AlertRule, AlertRuleType, WSMessage } from "../lib/types";
+import { useAiTools } from "../hooks/useAiTools";
+import type { AlertEvent, AlertRule, AlertRuleType, RulePreview, WSMessage } from "../lib/types";
 
 const PAGE_SIZE = 25;
 
@@ -124,6 +127,8 @@ const RULE_TYPES: AlertRuleType[] = [
   "inactivity",
   "status_duration",
   "token_threshold",
+  "cost_threshold",
+  "budget",
 ];
 
 type TabKey = "rules" | "channels" | "activity";
@@ -139,6 +144,11 @@ interface RuleFormState {
   minutes: string;
   status: "working" | "waiting";
   total_tokens: string;
+  usd: string;
+  period: "day" | "week" | "month";
+  limit_usd: string;
+  thresholds: string;
+  budget_tool: string;
   cooldown_seconds: string;
 }
 
@@ -153,6 +163,11 @@ const EMPTY_FORM: RuleFormState = {
   minutes: "10",
   status: "working",
   total_tokens: "1000000",
+  usd: "5",
+  period: "month",
+  limit_usd: "100",
+  thresholds: "80, 100",
+  budget_tool: "",
   cooldown_seconds: "300",
 };
 
@@ -171,12 +186,28 @@ function formFromRule(rule: AlertRule): RuleFormState {
     minutes: str(c.minutes, EMPTY_FORM.minutes),
     status: c.status === "waiting" ? "waiting" : "working",
     total_tokens: str(c.total_tokens, EMPTY_FORM.total_tokens),
+    usd: str(c.usd, EMPTY_FORM.usd),
+    period: c.period === "day" || c.period === "week" ? c.period : "month",
+    limit_usd: str(c.limit_usd, EMPTY_FORM.limit_usd),
+    thresholds: Array.isArray(c.thresholds) ? c.thresholds.join(", ") : EMPTY_FORM.thresholds,
+    budget_tool: str(c.tool, ""),
     cooldown_seconds: String(rule.cooldown_seconds),
   };
 }
 
 const errText = (err: unknown) => (err instanceof Error ? err.message : String(err));
 
+/** "80, 100" → [80, 100]; null when any part is not a whole percent 1..1000. */
+function parseThresholds(text: string): number[] | null {
+  const parts = text
+    .split(",")
+    .map((p) => p.trim())
+    .filter(Boolean);
+  const nums = parts.map((p) => Number(p));
+  if (nums.length === 0 || nums.length > 10) return null;
+  return nums.every((n) => Number.isInteger(n) && n > 0 && n <= 1000) ? nums : null;
+}
+
 function buildConfig(form: RuleFormState): AlertRule["config"] {
   switch (form.rule_type) {
     case "event_pattern": {
@@ -198,6 +229,18 @@ function buildConfig(form: RuleFormState): AlertRule["config"] {
       return { status: form.status, minutes: parseFloat(form.minutes) };
     case "token_threshold":
       return { total_tokens: parseInt(form.total_tokens, 10) };
+    case "cost_threshold":
+      return { usd: parseFloat(form.usd) };
+    case "budget": {
+      const config: AlertRule["config"] = {
+        period: form.period,
+        limit_usd: parseFloat(form.limit_usd),
+        thresholds: parseThresholds(form.thresholds) ?? [80, 100],
+        tz_offset: new Date().getTimezoneOffset(),
+      };
+      if (form.budget_tool) config.tool = form.budget_tool;
+      return config;
+    }
   }
 }
 
@@ -225,6 +268,14 @@ function describeRule(rule: AlertRule, t: (key: string, opts?: Record<string, un
       return t("ruleDesc.statusDuration", { status: c.status, minutes: c.minutes });
     case "token_threshold":
       return t("ruleDesc.tokenThreshold", { tokens: (c.total_tokens ?? 0).toLocaleString() });
+    case "cost_threshold":
+      return t("ruleDesc.costThreshold", { usd: fmtCost(c.usd ?? 0) });
+    case "budget":
+      return t("ruleDesc.budget", {
+        limit: fmtCost(c.limit_usd ?? 0),
+        period: t(`periods.${c.period ?? "month"}`),
+        thresholds: (c.thresholds ?? []).join("%, ") + "%",
+      });
   }
 }
 
@@ -244,6 +295,9 @@ export function AlertsNotifications() {
   const [formError, setFormError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
   const [confirmRule, setConfirmRule] = useState<AlertRule | null>(null);
+  const [preview, setPreview] = useState<RulePreview | null>(null);
+  const [previewing, setPreviewing] = useState(false);
+  const aiTools = useAiTools();
   const ruleCtx = useContextMenu<AlertRule>();
   // A rule-menu item: close the menu, then act on the rule it was opened on.
   const pickRule = (fn: (rule: AlertRule) => unknown) => () => {
@@ -322,10 +376,35 @@ export function AlertsNotifications() {
     });
   }, [loadAlerts]);
 
-  const set = (patch: Partial<RuleFormState>) => setForm((prev) => ({ ...prev, ...patch }));
+  // Any edit makes a shown preview stale.
+  const set = (patch: Partial<RuleFormState>) => {
+    setPreview(null);
+    setForm((prev) => ({ ...prev, ...patch }));
+  };
+
+  const onPreview = async () => {
+    if (previewing) return;
+    setPreviewing(true);
+    setFormError(null);
+    try {
+      const cooldown = parseInt(form.cooldown_seconds, 10);
+      setPreview(
+        await api.alerts.rules.preview({
+          rule_type: form.rule_type,
+          config: buildConfig(form),
+          cooldown_seconds: Number.isFinite(cooldown) && cooldown >= 0 ? cooldown : 300,
+        })
+      );
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPreviewing(false);
+    }
+  };
 
   const closeForm = () => {
     setForm(EMPTY_FORM);
+    setPreview(null);
     setEditingId(null);
     setFormOpen(false);
     setFormError(null);
@@ -333,6 +412,7 @@ export function AlertsNotifications() {
 
   const openEditRule = (rule: AlertRule) => {
     setForm(formFromRule(rule));
+    setPreview(null);
     setEditingId(rule.id);
     setFormError(null);
     setFormOpen(true);
@@ -417,7 +497,10 @@ export function AlertsNotifications() {
         (countVal <= 1 || (Number.isFinite(windowVal) && windowVal > 0)))) &&
     ((form.rule_type !== "inactivity" && form.rule_type !== "status_duration") ||
       (Number.isFinite(minutesVal) && minutesVal > 0)) &&
-    (form.rule_type !== "token_threshold" || (Number.isFinite(tokensVal) && tokensVal > 0));
+    (form.rule_type !== "token_threshold" || (Number.isFinite(tokensVal) && tokensVal > 0)) &&
+    (form.rule_type !== "cost_threshold" || parseFloat(form.usd) > 0) &&
+    (form.rule_type !== "budget" ||
+      (parseFloat(form.limit_usd) > 0 && parseThresholds(form.thresholds) !== null));
 
   const TABS: { key: TabKey; label: string; icon: typeof ListChecks; badge?: number }[] = [
     {
@@ -680,6 +763,100 @@ export function AlertsNotifications() {
                 </div>
               )}
 
+              {form.rule_type === "cost_threshold" && (
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                  <label className="block text-xs text-fg-secondary">
+                    <span className="inline-flex items-center gap-1">
+                      {t("rules.form.usd")}
+                      <FieldHelp description={t("rules.help.usd")} />
+                    </span>
+                    <input
+                      type="number"
+                      min={0}
+                      step="0.01"
+                      value={form.usd}
+                      onChange={(e) => set({ usd: e.target.value })}
+                      className="input mt-1 w-full"
+                    />
+                  </label>
+                </div>
+              )}
+
+              {form.rule_type === "budget" && (
+                <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+                  <label className="block text-xs text-fg-secondary">
+                    <span className="inline-flex items-center gap-1">
+                      {t("rules.form.period")}
+                      <FieldHelp description={t("rules.help.period")} />
+                    </span>
+                    <div className="relative mt-1">
+                      <select
+                        value={form.period}
+                        onChange={(e) => set({ period: e.target.value as RuleFormState["period"] })}
+                        className="input w-full appearance-none pr-8"
+                      >
+                        {(["day", "week", "month"] as const).map((p) => (
+                          <option key={p} value={p}>
+                            {t(`periods.${p}`)}
+                          </option>
+                        ))}
+                      </select>
+                      <ChevronDown className="w-3.5 h-3.5 absolute right-2.5 top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none" />
+                    </div>
+                  </label>
+                  <label className="block text-xs text-fg-secondary">
+                    <span className="inline-flex items-center gap-1">
+                      {t("rules.form.limitUsd")}
+                      <FieldHelp description={t("rules.help.limitUsd")} />
+                    </span>
+                    <input
+                      type="number"
+                      min={0}
+                      step="0.01"
+                      value={form.limit_usd}
+                      onChange={(e) => set({ limit_usd: e.target.value })}
+                      className="input mt-1 w-full"
+                    />
+                  </label>
+                  <label className="block text-xs text-fg-secondary">
+                    <span className="inline-flex items-center gap-1">
+                      {t("rules.form.thresholds")}
+                      <FieldHelp description={t("rules.help.thresholds")} />
+                    </span>
+                    <input
+                      type="text"
+                      value={form.thresholds}
+                      onChange={(e) => set({ thresholds: e.target.value })}
+                      placeholder="80, 100"
+                      className="input mt-1 w-full"
+                    />
+                  </label>
+                  <label className="block text-xs text-fg-secondary">
+                    <span className="inline-flex items-center gap-1">
+                      {t("rules.form.budgetTool")}
+                      <FieldHelp description={t("rules.help.budgetTool")} />
+                    </span>
+                    <div className="relative mt-1">
+                      <select
+                        value={form.budget_tool}
+                        onChange={(e) => set({ budget_tool: e.target.value })}
+                        className="input w-full appearance-none pr-8"
+                      >
+                        <option value="">{t("rules.form.allTools")}</option>
+                        {aiTools.tools.map((x) => (
+                          <option key={x.id} value={x.id}>
+                            {x.label}
+                          </option>
+                        ))}
+                      </select>
+                      <ChevronDown className="w-3.5 h-3.5 absolute right-2.5 top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none" />
+                    </div>
+                  </label>
+                </div>
+              )}
+
+              {preview && <RulePreviewResult preview={preview} />}
+
               <div className="flex flex-wrap items-end justify-between gap-3">
                 <label className="block text-xs text-fg-secondary">
                   <span className="mb-1.5 flex items-center gap-1">
@@ -701,14 +878,29 @@ export function AlertsNotifications() {
                     </span>
                   )}
                 </label>
-                <button
-                  onClick={onSaveRule}
-                  disabled={!canSubmit || saving}
-                  className="btn-primary inline-flex items-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  {editingId ? <Check className="w-3.5 h-3.5" /> : <Plus className="w-3.5 h-3.5" />}
-                  {saving ? t("rules.saving") : editingId ? t("rules.save") : t("rules.create")}
-                </button>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={onPreview}
+                    disabled={!canSubmit || previewing}
+                    title={t("rules.previewHint")}
+                    className="btn-ghost border border-border inline-flex items-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Eye className="w-3.5 h-3.5" />
+                    {previewing ? t("rules.previewing") : t("rules.preview")}
+                  </button>
+                  <button
+                    onClick={onSaveRule}
+                    disabled={!canSubmit || saving}
+                    className="btn-primary inline-flex items-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {editingId ? (
+                      <Check className="w-3.5 h-3.5" />
+                    ) : (
+                      <Plus className="w-3.5 h-3.5" />
+                    )}
+                    {saving ? t("rules.saving") : editingId ? t("rules.save") : t("rules.create")}
+                  </button>
+                </div>
               </div>
               {formError && <p className="text-xs text-status-danger">{formError}</p>}
             </div>
@@ -927,3 +1119,51 @@ export function AlertsNotifications() {
     </div>
   );
 }
+
+/** What a rule would have fired, from POST /api/alerts/rules/preview. */
+function RulePreviewResult({ preview }: { preview: RulePreview }) {
+  const { t } = useTranslation("alerts");
+  if (!preview.supported) {
+    return <p className="text-xs text-fg-muted">{t("rules.previewUnsupported")}</p>;
+  }
+  if (preview.periods) {
+    return (
+      <div className="rounded-md border border-border bg-surface-1 p-2 text-xs space-y-1">
+        <p className="text-fg-secondary">{t("rules.previewBudget")}</p>
+        {preview.periods.map((p) => (
+          <div key={p.period_start} className="flex justify-between gap-3 font-mono">
+            <span className="text-fg-muted">{p.period_start}</span>
+            <span className="text-fg-secondary">
+              {fmtCost(p.spend)} · {Math.round(p.pct)}%
+            </span>
+            <span className={p.crossed.length ? "text-status-warning" : "text-fg-muted"}>
+              {p.crossed.length ? p.crossed.map((c) => `${c}%`).join(" ") : "—"}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className="rounded-md border border-border bg-surface-1 p-2 text-xs space-y-1">
+      <p className="text-fg-secondary">
+        {t("rules.previewResult", {
+          fires: preview.fires,
+          sessions: preview.sessions,
+          days: preview.window_days,
+        })}
+      </p>
+      {preview.samples.map((s, i) => (
+        <div key={i} className="flex justify-between gap-3 font-mono text-fg-muted">
+          <Link
+            to={`/sessions/${encodeURIComponent(s.session_id)}`}
+            className="truncate hover:text-accent"
+          >
+            {s.session_id.slice(0, 8)}
+          </Link>
+          <span>{timeAgo(s.at)}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

client/src/components/ConfirmModal.tsx

@@ -85,14 +85,14 @@ export function ConfirmModal({
     >
       <div
         ref={panelRef}
-        className="relative w-full max-w-md rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
+        className="relative flex max-h-full w-full max-w-md flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
         onClick={(e) => e.stopPropagation()}
         role="dialog"
         aria-modal="true"
         aria-labelledby={titleId}
         aria-describedby={message ? messageId : undefined}
       >
-        <div className="flex items-start gap-3 p-5">
+        <div className="flex min-h-0 items-start gap-3 overflow-y-auto p-5">
           {destructive && (
             <div className="w-9 h-9 rounded-lg bg-status-danger/10 border border-status-danger/20 flex items-center justify-center flex-shrink-0">
               <AlertTriangle className="w-4.5 h-4.5 text-status-danger" aria-hidden />

client/src/components/EventReplay.tsx

@@ -0,0 +1,289 @@
+/**
+ * @file EventReplay.tsx
+ * @description The session Replay tab: a scrubber over a session's recorded
+ * events (play/pause, 0.5×–5×, step, jump, arrow keys), a lifecycle mini-map
+ * whose markers jump the cursor, the state derived up to the cursor
+ * (`lib/replay.ts`) and the selected event through EventDetail. Fed a list of
+ * events, so the live analysis page and a frozen snapshot share it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useState, type KeyboardEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Pause, Play, SkipBack, SkipForward, StepBack, StepForward } from "lucide-react";
+import { api } from "../lib/api";
+import {
+  chronological,
+  lifecycleMarkers,
+  replayState,
+  LIFECYCLE_TYPES,
+  REPLAY_SPEEDS,
+  REPLAY_STEP_MS,
+} from "../lib/replay";
+import { buildEventTitle } from "../lib/event-grouping";
+import type { AgentInfo } from "../lib/event-grouping";
+import { formatDateTimeFull, formatMs } from "../lib/format";
+import type { DashboardEvent } from "../lib/types";
+import { AgentStatusBadge } from "./StatusBadge";
+import { EventDetail } from "./EventDetail";
+
+/** The newest this many events are replayed; older ones are left out. */
+export const REPLAY_MAX_EVENTS = 5000;
+const PAGE = 500;
+
+/** A session's events in playback order (the newest REPLAY_MAX_EVENTS). */
+export async function loadReplayEvents(
+  sessionId: string
+): Promise<{ events: DashboardEvent[]; total: number }> {
+  const all: DashboardEvent[] = [];
+  let total = 0;
+  do {
+    const r = await api.events.list({ session_id: sessionId, limit: PAGE, offset: all.length });
+    total = r.total;
+    if (r.events.length === 0) break;
+    all.push(...r.events);
+  } while (all.length < Math.min(total, REPLAY_MAX_EVENTS));
+  return { events: chronological(all.slice(0, REPLAY_MAX_EVENTS)), total };
+}
+
+const MARKER_COLOR: Record<string, string> = {
+  SessionStart: "bg-status-success",
+  UserPromptSubmit: "bg-accent",
+  Compaction: "bg-status-warning",
+  SubagentStop: "bg-violet-500",
+  APIError: "bg-status-danger",
+  Stop: "bg-fg-muted",
+};
+
+const btn =
+  "inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg-primary disabled:opacity-40 disabled:cursor-not-allowed";
+
+export function EventReplay({
+  events: raw,
+  total,
+  agentInfoById,
+  sessionNameById,
+}: {
+  events: DashboardEvent[];
+  /** The session's full event count, when more than `events` were recorded. */
+  total?: number;
+  agentInfoById: Map<string, AgentInfo>;
+  sessionNameById: Map<string, string>;
+}) {
+  const { t } = useTranslation("sessions");
+  const events = useMemo(() => chronological(raw), [raw]);
+  const markers = useMemo(() => lifecycleMarkers(events), [events]);
+  const last = events.length - 1;
+  const [cursor, setCursor] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [speed, setSpeed] = useState<number>(1);
+  const at = Math.min(cursor, Math.max(0, last));
+  const state = useMemo(() => replayState(events, at), [events, at]);
+  const event = events[at];
+
+  useEffect(() => {
+    if (!playing) return;
+    if (at >= last) {
+      setPlaying(false);
+      return;
+    }
+    const timer = setTimeout(() => setCursor((c) => Math.min(c + 1, last)), REPLAY_STEP_MS / speed);
+    return () => clearTimeout(timer);
+  }, [playing, at, last, speed]);
+
+  if (!event) return <p className="text-sm text-fg-muted">{t("detail.noEvents")}</p>;
+
+  const go = (i: number) => setCursor(Math.max(0, Math.min(last, i)));
+  const toggle = () => {
+    if (!playing && at >= last) setCursor(0);
+    setPlaying((p) => !p);
+  };
+  const onKey = (e: KeyboardEvent) => {
+    // The slider steps itself on arrow keys; only the rest is ours there.
+    const onSlider = e.target instanceof HTMLInputElement;
+    if (e.key === " " && !(e.target instanceof HTMLButtonElement)) {
+      e.preventDefault();
+      toggle();
+    } else if (onSlider) return;
+    else if (e.key === "ArrowLeft") go(at - 1);
+    else if (e.key === "ArrowRight") go(at + 1);
+    else if (e.key === "Home") go(0);
+    else if (e.key === "End") go(last);
+    else return;
+    e.preventDefault();
+  };
+  const markerLabel = (type: string) => t(`replay.marker.${type}`);
+  const present = LIFECYCLE_TYPES.filter((k) => markers.some((m) => m.type === k));
+
+  return (
+    <div
+      className="space-y-4 outline-none"
+      tabIndex={0}
+      onKeyDown={onKey}
+      role="group"
+      aria-label={t("replay.label")}
+      data-testid="event-replay"
+    >
+      {total != null && total > events.length && (
+        <p className="text-xs text-fg-muted">
+          {t("replay.truncated", { shown: events.length, total })}
+        </p>
+      )}
+
+      <div className="card space-y-3 p-4">
+        <div className="flex flex-wrap items-center gap-1">
+          <button type="button" className={btn} onClick={() => go(0)} title={t("replay.start")}>
+            <SkipBack className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            className={btn}
+            onClick={() => go(at - 1)}
+            disabled={at <= 0}
+            title={t("replay.back")}
+          >
+            <StepBack className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            className={`${btn} bg-accent/15 text-accent`}
+            onClick={toggle}
+            title={playing ? t("replay.pause") : t("replay.play")}
+            aria-pressed={playing}
+          >
+            {playing ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+          </button>
+          <button
+            type="button"
+            className={btn}
+            onClick={() => go(at + 1)}
+            disabled={at >= last}
+            title={t("replay.forward")}
+          >
+            <StepForward className="h-4 w-4" />
+          </button>
+          <button type="button" className={btn} onClick={() => go(last)} title={t("replay.end")}>
+            <SkipForward className="h-4 w-4" />
+          </button>
+          <div
+            className="ml-2 flex items-center gap-0.5"
+            role="group"
+            aria-label={t("replay.speed")}
+          >
+            {REPLAY_SPEEDS.map((s) => (
+              <button
+                key={s}
+                type="button"
+                onClick={() => setSpeed(s)}
+                aria-pressed={speed === s}
+                className={`rounded px-2 py-1 text-xs font-mono ${
+                  speed === s
+                    ? "bg-accent/15 text-accent"
+                    : "text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+                }`}
+              >
+                {s}×
+              </button>
+            ))}
+          </div>
+          <span className="ml-auto font-mono text-xs text-fg-muted">
+            {t("replay.position", { at: at + 1, n: events.length })} ·{" "}
+            {formatDateTimeFull(event.created_at)}
+          </span>
+        </div>
+
+        <input
+          type="range"
+          min={0}
+          max={last}
+          value={at}
+          onChange={(e) => go(Number(e.target.value))}
+          aria-label={t("replay.scrubber")}
+          className="w-full accent-[rgb(var(--accent))]"
+        />
+
+        <div
+          className="relative h-4 rounded bg-surface-2"
+          role="group"
+          aria-label={t("replay.minimap")}
+        >
+          <div
+            className="pointer-events-none absolute inset-y-0 w-px bg-fg-primary"
+            style={{ left: `${last > 0 ? (at / last) * 100 : 0}%` }}
+          />
+          {markers.map((m) => (
+            <button
+              key={m.index}
+              type="button"
+              onClick={() => go(m.index)}
+              title={`${markerLabel(m.type)} · #${m.index + 1}`}
+              aria-label={`${markerLabel(m.type)} · #${m.index + 1}`}
+              className={`absolute inset-y-0 w-1.5 -translate-x-1/2 rounded-sm opacity-80 hover:opacity-100 ${MARKER_COLOR[m.type]}`}
+              style={{ left: `${m.pct}%` }}
+            />
+          ))}
+        </div>
+        {present.length > 0 && (
+          <div className="flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-fg-muted">
+            {present.map((k) => (
+              <span key={k} className="inline-flex items-center gap-1">
+                <span className={`h-2 w-2 rounded-sm ${MARKER_COLOR[k]}`} />
+                {markerLabel(k)}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-6">
+        <Tile label={t("replay.state.status")}>
+          {state.status ? <AgentStatusBadge status={state.status} /> : "-"}
+        </Tile>
+        <Tile label={t("replay.state.tool")}>
+          <span className="font-mono">{state.currentTool ?? "-"}</span>
+        </Tile>
+        <Tile label={t("replay.state.prompts")}>{state.prompts}</Tile>
+        <Tile label={t("replay.state.errors")}>{state.errors}</Tile>
+        <Tile label={t("replay.state.compactions")}>{state.compactions}</Tile>
+        <Tile label={t("replay.state.elapsed")}>{formatMs(state.elapsedMs)}</Tile>
+      </div>
+      {state.toolCounts.length > 0 && (
+        <div
+          className="flex flex-wrap gap-1.5"
+          role="group"
+          aria-label={t("replay.state.toolCounts")}
+        >
+          {state.toolCounts.map((x) => (
+            <span
+              key={x.tool}
+              className="rounded bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary"
+            >
+              {x.tool} ×{x.count}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="card overflow-hidden">
+        <div className="border-b border-border px-5 py-3 text-sm text-fg-secondary">
+          <span className="mr-2 font-mono text-xs text-fg-muted">#{at + 1}</span>
+          {buildEventTitle(event)}
+        </div>
+        <EventDetail
+          event={event}
+          agentInfoById={agentInfoById}
+          sessionNameById={sessionNameById}
+        />
+      </div>
+    </div>
+  );
+}
+
+function Tile({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="rounded-lg border border-border bg-surface-2 px-3 py-2">
+      <div className="text-[10px] uppercase tracking-wider text-fg-muted">{label}</div>
+      <div className="mt-1 text-sm font-semibold text-fg-primary">{children}</div>
+    </div>
+  );
+}

client/src/components/EventTimeline.tsx

@@ -0,0 +1,135 @@
+/**
+ * @file EventTimeline.tsx
+ * @description A session's events as a flat, expandable list — one row per
+ * event (age, status badge, origin · title, tool), opening into EventDetail.
+ * Used by the session analysis page's Timeline tab and the read-only snapshot
+ * page.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AgentStatusBadge } from "./StatusBadge";
+import { EventDetail } from "./EventDetail";
+import {
+  agentOriginLabel,
+  buildEventTitle,
+  buildOriginLabel,
+  projectFromCwd,
+  projectFromEvent,
+  statusFromEventType,
+} from "../lib/event-grouping";
+import type { AgentInfo } from "../lib/event-grouping";
+import { timeAgo } from "../lib/format";
+import type { DashboardEvent } from "../lib/types";
+
+export function EventTimeline({
+  events,
+  agentInfoById,
+  sessionNameById,
+  fallbackCwd,
+}: {
+  events: DashboardEvent[];
+  agentInfoById: Map<string, AgentInfo>;
+  sessionNameById: Map<string, string>;
+  /** The session's cwd, for events that carry none of their own. */
+  fallbackCwd?: string | null;
+}) {
+  const { t } = useTranslation("sessions");
+  const [expandedEvents, setExpandedEvents] = useState<Set<number>>(() => new Set());
+
+  function toggleEvent(id: number) {
+    setExpandedEvents((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  // Precompute project per event so flat-row rendering doesn't re-parse JSON.
+  const projectByEventId = useMemo(() => {
+    const map = new Map<number, string | null>();
+    for (const e of events) map.set(e.id, projectFromEvent(e));
+    return map;
+  }, [events]);
+
+  return (
+    <div className="card overflow-hidden">
+      <div className="divide-y divide-border max-h-[600px] overflow-y-auto overflow-x-auto">
+        {events.map((event, i) => {
+          const key = event.id ?? i;
+          const isOpen = event.id != null && expandedEvents.has(event.id);
+          return (
+            // Off-screen rows skip layout/paint (a long timeline is not virtualized).
+            <div
+              key={key}
+              style={
+                isOpen
+                  ? undefined
+                  : { contentVisibility: "auto", containIntrinsicSize: "auto 45px" }
+              }
+            >
+              <button
+                type="button"
+                onClick={() => event.id != null && toggleEvent(event.id)}
+                aria-expanded={isOpen}
+                aria-label={
+                  isOpen ? t("common:eventDetail.collapse") : t("common:eventDetail.expand")
+                }
+                className="w-full text-left px-5 py-3 flex items-center gap-4 hover:bg-surface-4 transition-colors min-w-0 cursor-pointer"
+              >
+                <span
+                  className={`text-fg-muted text-[10px] w-3 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
+                  aria-hidden="true"
+                >
+                  ▶
+                </span>
+                <div className="w-16 text-[11px] text-fg-muted font-mono flex-shrink-0">
+                  {timeAgo(event.created_at)}
+                </div>
+                <AgentStatusBadge status={statusFromEventType(event.event_type)} />
+                {(() => {
+                  // Session is implicit on this page - project is
+                  // still shown so the row identifies the working
+                  // directory when you share / search. Events without
+                  // their own cwd (e.g. TurnDuration) fall back to the
+                  // session's cwd so every row carries the dir prefix.
+                  const project =
+                    projectByEventId.get(event.id) ?? projectFromCwd(fallbackCwd) ?? null;
+                  const origin = buildOriginLabel(
+                    project,
+                    null,
+                    agentOriginLabel(event.agent_id, agentInfoById)
+                  );
+                  return (
+                    <span className="text-sm text-fg-secondary flex-1 truncate">
+                      {origin && (
+                        <span className="text-fg-muted mr-1" title={event.agent_id ?? undefined}>
+                          {origin} ·
+                        </span>
+                      )}
+                      {buildEventTitle(event)}
+                    </span>
+                  );
+                })()}
+                {event.tool_name && (
+                  <span className="text-[11px] px-2 py-0.5 bg-surface-2 rounded text-fg-muted font-mono">
+                    {event.tool_name}
+                  </span>
+                )}
+              </button>
+              {isOpen && (
+                <EventDetail
+                  event={event}
+                  agentInfoById={agentInfoById}
+                  sessionNameById={sessionNameById}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

client/src/components/Layout.tsx

@@ -12,6 +12,11 @@
  * written back on every toggle. Failures to access storage are swallowed so a
  * private-browsing quota error never breaks the UI.
  *
+ * ## Sidebar width
+ * The expanded sidebar's right edge drags (or takes ←/→) between
+ * {@link SIDEBAR_MIN} and {@link SIDEBAR_MAX} px — never past 40% of the
+ * window — kept in `agenthub.sidebar.width`; a double-click resets it.
+ *
  * ## Narrow viewports
  * With no stored preference the sidebar starts collapsed below `lg` (see
  * {@link loadCollapsed}). Below `md` it leaves the flow entirely: a menu
@@ -79,6 +84,26 @@ import { UpdateNotifier } from "./UpdateNotifier";
 import { Sagi } from "./Sagi/Sagi";
 import { StatusBar } from "./StatusBar";
 
+const WIDTH_KEY = "agenthub.sidebar.width";
+/** The default width, and the narrowest the edge drags to. */
+export const SIDEBAR_MIN = 240;
+/** Wide enough for long workspace names on a large screen, no wider. */
+export const SIDEBAR_MAX = 480;
+
+/** A width inside the bounds, and at most 40% of the window. */
+export function clampSidebar(px: number): number {
+  const max = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, window.innerWidth * 0.4));
+  return Math.round(Math.min(max, Math.max(SIDEBAR_MIN, px)));
+}
+
+function loadWidth(): number {
+  try {
+    const n = Number(localStorage.getItem(WIDTH_KEY));
+    if (n) return clampSidebar(n);
+  } catch {}
+  return SIDEBAR_MIN;
+}
+
 /** Below Tailwind's `md`: the sidebar becomes an off-canvas drawer. */
 export const DRAWER_QUERY = "(max-width: 767.98px)";
 
@@ -112,7 +137,17 @@ export function Layout({ wsConnected }: LayoutProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const closeDrawer = useCallback(() => setDrawerOpen(false), []);
   const { pathname, search } = useLocation();
-  const sidebarWidth = drawer ? "0rem" : collapsed ? "4.25rem" : "15rem";
+  const [width, setWidth] = useState(loadWidth);
+  const [resizing, setResizing] = useState(false);
+  const sidebarWidth = drawer ? "0rem" : collapsed ? "4.25rem" : `${width}px`;
+
+  const saveWidth = useCallback((px: number) => {
+    const next = clampSidebar(px);
+    setWidth(next);
+    try {
+      localStorage.setItem(WIDTH_KEY, String(next));
+    } catch {}
+  }, []);
 
   // A pick in the drawer navigates; the drawer has done its job.
   useEffect(closeDrawer, [pathname, search, closeDrawer]);
@@ -153,11 +188,52 @@ export function Layout({ wsConnected }: LayoutProps) {
         connectionOpen={connectionOpen}
         onConnectionOpenChange={setConnectionOpen}
         onUpdateAvailableChange={setUpdateAvailable}
+        width={width}
+        resizing={resizing}
       />
+      {!drawer && !collapsed && (
+        <div
+          role="separator"
+          tabIndex={0}
+          aria-orientation="vertical"
+          aria-valuenow={width}
+          aria-valuemin={SIDEBAR_MIN}
+          aria-valuemax={SIDEBAR_MAX}
+          aria-label={t("resizeSidebar")}
+          title={t("resizeSidebar")}
+          data-testid="sidebar-resize"
+          className={`fixed top-0 bottom-0 z-30 w-1.5 -translate-x-1/2 cursor-col-resize outline-none transition-colors hover:bg-accent/40 focus-visible:bg-accent/60 ${
+            resizing ? "bg-accent/60" : ""
+          }`}
+          style={{ left: width }}
+          onPointerDown={(e) => {
+            e.preventDefault();
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            setResizing(true);
+          }}
+          onPointerMove={(e) => {
+            if (resizing) setWidth(clampSidebar(e.clientX));
+          }}
+          onPointerUp={(e) => {
+            if (!resizing) return;
+            setResizing(false);
+            saveWidth(e.clientX);
+          }}
+          onPointerCancel={() => setResizing(false)}
+          onDoubleClick={() => saveWidth(SIDEBAR_MIN)}
+          onKeyDown={(e) => {
+            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+            e.preventDefault();
+            saveWidth(width + (e.key === "ArrowRight" ? 16 : -16));
+          }}
+        />
+      )}
       <main
         id="main-content"
         tabIndex={-1}
-        className="min-h-screen min-w-0 pb-6 transition-[margin-left,width] duration-200 outline-none"
+        className={`min-h-screen min-w-0 pb-6 duration-200 outline-none ${
+          resizing ? "" : "transition-[margin-left,width]"
+        }`}
         style={{
           marginLeft: sidebarWidth,
           width: `calc(100% - ${sidebarWidth})`,

client/src/components/RemoteSources.tsx

@@ -1,7 +1,8 @@
 /**
  * @file RemoteSources.tsx
  * @description Settings UI for the Remote Data Sources feature: manage the SSH
- * machines this dashboard pulls Claude Code history from, and choose the global
+ * machines this dashboard pulls Claude Code (and, opted in per source, Codex)
+ * history from, and choose the global
  * "data scope" (which machines' data the whole app shows).
  *
  * Backs `server/routes/remote-sources.js` via {@link api.remoteSources} and the
@@ -97,6 +98,8 @@ const EMPTY_FORM: RemoteSourceInput = {
   ssh_port: null,
   identity_file: "",
   remote_home: "",
+  sync_codex: false,
+  remote_codex_home: "",
   enabled: true,
 };
 
@@ -219,6 +222,8 @@ export function RemoteSources() {
       ssh_port: s.ssh_port,
       identity_file: s.identity_file || "",
       remote_home: s.remote_home || "",
+      sync_codex: !!s.sync_codex,
+      remote_codex_home: s.remote_codex_home || "",
       enabled: s.enabled,
     });
     setEditingId(s.id);
@@ -242,6 +247,8 @@ export function RemoteSources() {
       ssh_port: form.ssh_port ? Number(form.ssh_port) : null,
       identity_file: form.identity_file?.trim() ? form.identity_file.trim() : null,
       remote_home: form.remote_home?.trim() ? form.remote_home.trim() : null,
+      sync_codex: !!form.sync_codex,
+      remote_codex_home: form.remote_codex_home?.trim() ? form.remote_codex_home.trim() : null,
       enabled: form.enabled,
     };
     try {
@@ -591,6 +598,31 @@ export function RemoteSources() {
               </p>
             </div>
           </div>
+          <Checkbox
+            checked={!!form.sync_codex}
+            onChange={(v) => setForm((f) => ({ ...f, sync_codex: v }))}
+            label={t("remoteSources.fieldSyncCodex", "Also pull Codex sessions")}
+            labelClassName="text-sm text-fg-secondary"
+          />
+          {form.sync_codex && (
+            <div>
+              <label className="block text-xs text-fg-muted mb-1">
+                {t("remoteSources.fieldRemoteCodexHome", "Remote Codex home (optional)")}
+              </label>
+              <input
+                className="input w-full font-mono"
+                placeholder="~/.codex"
+                value={form.remote_codex_home ?? ""}
+                onChange={(e) => setForm((f) => ({ ...f, remote_codex_home: e.target.value }))}
+              />
+              <p className="mt-1 text-[11px] text-fg-muted leading-snug">
+                {t(
+                  "remoteSources.fieldRemoteCodexHomeHint",
+                  "Default ~/.codex (wsl:~/.codex when the Claude home is in WSL). Its sessions/ folder is copied, and the sessions show up as Codex sessions of this source, with their tokens and cost."
+                )}
+              </p>
+            </div>
+          )}
           <Checkbox
             checked={!!form.enabled}
             onChange={(v) => setForm((f) => ({ ...f, enabled: v }))}
@@ -674,6 +706,9 @@ export function RemoteSources() {
                       {s.host}
                       {s.ssh_port ? `:${s.ssh_port}` : ""}
                       {s.remote_home ? ` · ${s.remote_home}` : ""}
+                      {s.sync_codex
+                        ? ` · ${t("remoteSources.codexOn", "+ Codex")}${s.remote_codex_home ? ` (${s.remote_codex_home})` : ""}`
+                        : ""}
                     </div>
                     <div className="text-[11px] text-fg-muted mt-1">
                       {s.last_sync_at
@@ -689,9 +724,19 @@ export function RemoteSources() {
                         ` · ${t("remoteSources.syncOnRemote", "{{n}} on remote", {
                           n: s.last_sync_counts.sessions_tagged,
                         })}`}
+                      {s.last_sync_counts?.codex_sessions != null &&
+                        ` · ${t("remoteSources.syncCodex", "{{n}} Codex", {
+                          n: s.last_sync_counts.codex_sessions,
+                        })}`}
                     </div>
-                    {s.status === "error" && s.last_error && (
-                      <div className="text-[11px] text-status-danger mt-1 break-words">
+                    {/* A sync that pulled one CLI's history but not the other's is
+                        `ok` with the other's failure in last_error. */}
+                    {s.last_error && (s.status === "error" || s.status === "ok") && (
+                      <div
+                        className={`text-[11px] mt-1 break-words ${
+                          s.status === "error" ? "text-status-danger" : "text-status-warning"
+                        }`}
+                      >
                         {s.last_error}
                       </div>
                     )}

client/src/components/Sagi/PetSprite.tsx

@@ -5,7 +5,10 @@
  * animation state (idle, run right, run left, waving, jumping, failed,
  * waiting, running, review) — played one row at a time by Sagi's mood; an
  * uploaded image is shown still and bobs with the same `data-mood` CSS as
- * Sagi. Reduced motion holds the row's first frame. A sprite that fails to
+ * Sagi. An `action` (dragged left/right, hovered) plays the run-left/run-right
+ * or waving row over the mood's, like Codex's own pet. Each row steps at its
+ * own pace and holds its last frame longer, so a loop breathes instead of
+ * spinning. Reduced motion holds the row's first frame. A sprite that fails to
  * load (deleted from another browser) calls `onBroken`, so the mascot falls
  * back to Sagi instead of an empty box.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -30,11 +33,28 @@ const ROW: Record<Mood, number> = {
   worried: 5, // failed
   disconnected: 5,
 };
+/** What the user is doing to the pet, which outranks its mood. */
+export type PetAction = "run-left" | "run-right" | "wave";
+const ACTION_ROW: Record<PetAction, number> = { "run-right": 1, "run-left": 2, wave: 3 };
+/** Per row: ms per frame, and ms the last frame is held before the loop restarts. */
+const PACE: [number, number][] = [
+  [220, 1400], // idle: a breath, then a pause
+  [120, 120], // run right — keeps up with the drag
+  [120, 120], // run left
+  [180, 400], // waving
+  [160, 700], // jumping
+  [200, 1200], // failed
+  [220, 900], // waiting
+  [170, 400], // running (working)
+  [220, 900], // review
+];
+const SLEEP_PACE: [number, number] = [450, 2000];
 
 export function PetSprite({
   id,
   kind,
   mood,
+  action,
   size,
   reducedMotion,
   onBroken,
@@ -42,23 +62,36 @@ export function PetSprite({
   id: string;
   kind: "codex" | "image";
   mood: Mood;
+  action?: PetAction | null;
   size: number;
   reducedMotion: boolean;
   onBroken: () => void;
 }) {
   const url = api.pets.spriteUrl(id);
-  const row = ROW[mood] ?? 0;
+  const row = action ? ACTION_ROW[action] : (ROW[mood] ?? 0);
+  const sleeping = !action && mood === "sleeping";
   const [frame, setFrame] = useState(0);
 
   useEffect(() => {
     setFrame(0);
     if (kind !== "codex" || reducedMotion) return;
-    const timer = window.setInterval(
-      () => setFrame((f) => (f + 1) % (FRAMES[row] ?? 1)),
-      mood === "sleeping" ? 400 : 125
-    );
-    return () => window.clearInterval(timer);
-  }, [kind, row, mood, reducedMotion]);
+    const count = FRAMES[row] ?? 1;
+    const [step, hold] = sleeping ? SLEEP_PACE : (PACE[row] ?? [200, 200]);
+    let f = 0;
+    let timer = 0;
+    const tick = () => {
+      timer = window.setTimeout(
+        () => {
+          f = (f + 1) % count;
+          setFrame(f);
+          tick();
+        },
+        f === count - 1 ? hold : step
+      );
+    };
+    tick();
+    return () => window.clearTimeout(timer);
+  }, [kind, row, sleeping, reducedMotion]);
 
   // A background image reports no error of its own: probe it once.
   useEffect(() => {

client/src/components/Sagi/Sagi.tsx

@@ -203,6 +203,7 @@ export function Sagi() {
   const [open, setOpen] = useState(false);
   // The right-click pet menu (`PetMenu.tsx`).
   const [menu, setMenu] = useState(false);
+  const [hover, setHover] = useState(false);
   const reducedMotion = usePrefersReducedMotion();
   const navigate = useNavigate();
   const brain = useSagiBrain();
@@ -331,6 +332,8 @@ export function Sagi() {
         className="sagi-avatar-btn"
         data-dragging={place.dragging ? "1" : "0"}
         style={{ left: place.left, top: place.top, width: size, height: size }}
+        onPointerEnter={() => setHover(true)}
+        onPointerLeave={() => setHover(false)}
         onPointerDown={place.onPointerDown}
         onPointerMove={place.onPointerMove}
         onPointerUp={place.onPointerUp}
@@ -358,6 +361,8 @@ export function Sagi() {
             id={pet.id}
             kind={pet.kind}
             mood={brain.mood}
+            // Dragged → runs that way; hovered → waves (Codex's pet does both).
+            action={place.moving ? `run-${place.moving}` : hover ? "wave" : null}
             size={size}
             reducedMotion={reducedMotion}
             // Deleted elsewhere, or unreadable: back to Sagi.

client/src/components/Sagi/__tests__/Pets.test.tsx

@@ -94,6 +94,8 @@ describe("PetSprite", () => {
     expect(sprite.dataset.row).toBe("7");
     expect(sprite.style.backgroundPosition).toBe("0px -728px");
     act(() => vi.advanceTimersByTime(130));
+    expect(sprite.style.backgroundPosition).toBe("0px -728px"); // slower than 125 ms
+    act(() => vi.advanceTimersByTime(50));
     expect(sprite.style.backgroundPosition).toBe("-96px -728px");
     rerender(
       <PetSprite
@@ -108,6 +110,45 @@ describe("PetSprite", () => {
     expect(screen.getByTestId("pet-sprite").dataset.row).toBe("5");
   });
 
+  it("runs the way it is dragged and waves on hover, over its mood", () => {
+    const props = {
+      id: "cp-goku",
+      kind: "codex" as const,
+      mood: "thinking" as const,
+      size: 208,
+      reducedMotion: false,
+      onBroken: () => {},
+    };
+    const { rerender } = render(<PetSprite {...props} action="run-left" />);
+    expect(screen.getByTestId("pet-sprite").dataset.row).toBe("2");
+    rerender(<PetSprite {...props} action="run-right" />);
+    expect(screen.getByTestId("pet-sprite").dataset.row).toBe("1");
+    rerender(<PetSprite {...props} action="wave" />);
+    expect(screen.getByTestId("pet-sprite").dataset.row).toBe("3");
+    rerender(<PetSprite {...props} action={null} />);
+    expect(screen.getByTestId("pet-sprite").dataset.row).toBe("7");
+  });
+
+  it("holds a loop's last frame before starting over", () => {
+    render(
+      <PetSprite
+        id="cp-goku"
+        kind="codex"
+        mood="idle"
+        size={208}
+        reducedMotion={false}
+        onBroken={() => {}}
+      />
+    );
+    const sprite = screen.getByTestId("pet-sprite");
+    act(() => vi.advanceTimersByTime(5 * 220)); // idle: 6 frames → on the last one
+    expect(sprite.style.backgroundPosition).toBe("-960px 0px");
+    act(() => vi.advanceTimersByTime(1000));
+    expect(sprite.style.backgroundPosition).toBe("-960px 0px");
+    act(() => vi.advanceTimersByTime(400));
+    expect(sprite.style.backgroundPosition).toBe("0px 0px");
+  });
+
   it("holds the first frame under reduced motion", () => {
     render(
       <PetSprite

client/src/components/Sagi/__tests__/Sagi.test.tsx

@@ -5,7 +5,16 @@
  */
 
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { render, screen, fireEvent, act, cleanup, within } from "@testing-library/react";
+import {
+  render,
+  renderHook,
+  screen,
+  fireEvent,
+  act,
+  cleanup,
+  within,
+} from "@testing-library/react";
+import { useSagiPosition } from "../useSagiPosition";
 import { MemoryRouter } from "react-router-dom";
 import { Sagi } from "../Sagi";
 import { eventBus } from "../../../lib/eventBus";
@@ -192,3 +201,22 @@ describe("Sagi widget", () => {
     expect(JSON.parse(localStorage.getItem("agent-dashboard-sagi-pos") || "{}").side).toBe("left");
   });
 });
+
+describe("useSagiPosition moving", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("names the drag's direction and settles once the pointer rests", () => {
+    const { result } = renderHook(() => useSagiPosition(68));
+    const target = { setPointerCapture() {}, releasePointerCapture() {} };
+    const ev = (x: number) =>
+      ({ button: 0, pointerId: 1, clientX: x, clientY: 300, currentTarget: target }) as never;
+    act(() => result.current.onPointerDown(ev(500)));
+    act(() => result.current.onPointerMove(ev(480)));
+    expect(result.current.moving).toBe("left");
+    act(() => result.current.onPointerMove(ev(520)));
+    expect(result.current.moving).toBe("right");
+    act(() => vi.advanceTimersByTime(400));
+    expect(result.current.moving).toBeNull();
+  });
+});

client/src/components/Sagi/useSagiPosition.ts

@@ -7,6 +7,8 @@
  *   viewport fraction so it survives resizes). A small movement threshold tells
  *   a drag apart from a tap so dragging never opens the panel. The arrow keys
  *   move a focused avatar too (WCAG 2.5.7): ←/→ dock it to an edge, ↑/↓ step it.
+ *   `moving` names the way it is heading — while dragged (cleared once the
+ *   pointer rests) and during the glide to its edge — so a pet can run that way.
  *   It never rests over the fixed bottom status bar; by default it docks
  *   bottom-right just above it.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -83,6 +85,8 @@ const DRAG_THRESHOLD = 5;
 const STATUS_BAR = 24;
 // One arrow-key step, in px.
 const KEY_STEP = 40;
+// A held but unmoving drag stops running after this; also the snap glide's length.
+const MOVE_SETTLE_MS = 300;
 
 const vw = () => (typeof window !== "undefined" ? window.innerWidth : 1024);
 const vh = () => (typeof window !== "undefined" ? window.innerHeight : 768);
@@ -109,6 +113,8 @@ export interface SagiPlacement {
   /** True when the avatar sits in the lower half - flyouts open upward. */
   openUp: boolean;
   dragging: boolean;
+  /** The way the avatar is moving horizontally right now, if it is. */
+  moving: "left" | "right" | null;
   onPointerDown: (e: ReactPointerEvent) => void;
   onPointerMove: (e: ReactPointerEvent) => void;
   onPointerUp: (e: ReactPointerEvent) => void;
@@ -123,6 +129,15 @@ export function useSagiPosition(size: number = SAGI_SIZE): SagiPlacement {
   const [pos, setPos] = useState<SagiPos>(() => sagiPrefs.getPos() ?? defaultPos());
   const [drag, setDrag] = useState<{ left: number; top: number } | null>(null);
   const [, force] = useState(0); // re-derive resting coords on resize
+  const [moving, setMoving] = useState<"left" | "right" | null>(null);
+  const moveTimer = useRef(0);
+  const lastX = useRef(0);
+  const heading = useCallback((dir: "left" | "right" | null) => {
+    window.clearTimeout(moveTimer.current);
+    setMoving(dir);
+    if (dir) moveTimer.current = window.setTimeout(() => setMoving(null), MOVE_SETTLE_MS);
+  }, []);
+  useEffect(() => () => window.clearTimeout(moveTimer.current), []);
 
   const draggedRef = useRef(false);
   const startRef = useRef<{ px: number; py: number; left: number; top: number } | null>(null);
@@ -152,6 +167,7 @@ export function useSagiPosition(size: number = SAGI_SIZE): SagiPlacement {
         /* capture unsupported - window-free fallback still works via props */
       }
       startRef.current = { px: e.clientX, py: e.clientY, left: screen.left, top: screen.top };
+      lastX.current = e.clientX;
       movedRef.current = false;
     },
     [screen.left, screen.top]
@@ -172,8 +188,14 @@ export function useSagiPosition(size: number = SAGI_SIZE): SagiPlacement {
       );
       liveRef.current = { left, top };
       setDrag({ left, top });
+      // Ignore a pixel of jitter; a steady push keeps re-arming the settle timer.
+      const stepX = e.clientX - lastX.current;
+      if (Math.abs(stepX) >= 2) {
+        lastX.current = e.clientX;
+        heading(stepX > 0 ? "right" : "left");
+      }
     },
-    [size]
+    [size, heading]
   );
 
   const onPointerUp = useCallback(
@@ -193,12 +215,15 @@ export function useSagiPosition(size: number = SAGI_SIZE): SagiPlacement {
         sagiPrefs.setPos(next);
         setPos(next);
         setDrag(null); // leave drag mode; resting coords (with transition) take over
+        // Run along the glide to the edge, when there is a real distance to cover.
+        const glide = restingScreen(next, size).left - live.left;
+        heading(Math.abs(glide) > size / 2 ? (glide > 0 ? "right" : "left") : null);
       }
       liveRef.current = null;
       startRef.current = null;
       movedRef.current = false;
     },
-    [size]
+    [size, heading]
   );
 
   const onKeyDown = useCallback(
@@ -214,10 +239,11 @@ export function useSagiPosition(size: number = SAGI_SIZE): SagiPlacement {
       }
       if (!next) return;
       e.preventDefault();
+      if (next.side !== pos.side) heading(next.side);
       sagiPrefs.setPos(next);
       setPos(next);
     },
-    [pos, size]
+    [pos, size, heading]
   );
 
   const consumeDrag = useCallback(() => {
@@ -233,6 +259,7 @@ export function useSagiPosition(size: number = SAGI_SIZE): SagiPlacement {
     side: pos.side,
     openUp: screen.top + size / 2 > vh() / 2,
     dragging: drag !== null,
+    moving,
     onPointerDown,
     onPointerMove,
     onPointerUp,

client/src/components/SessionOverview.tsx

@@ -76,6 +76,8 @@ import type { Agent, Session, SessionStats } from "../lib/types";
 interface SessionOverviewProps {
   session: Session;
   agents: Agent[];
+  /** Frozen stats (a session snapshot): shown as given, never fetched or refreshed. */
+  stats?: SessionStats;
 }
 
 /** Throttle window for stats refresh - coalesces bursts of hook events into one fetch. */
@@ -160,18 +162,19 @@ function ToolUsageRow({ toolName, count, max }: { toolName: string; count: numbe
   );
 }
 
-export function SessionOverview({ session, agents }: SessionOverviewProps) {
+export function SessionOverview({ session, agents, stats: frozen }: SessionOverviewProps) {
   const { t } = useTranslation("sessions");
-  const [stats, setStats] = useState<SessionStats | null>(null);
+  const [fetched, setStats] = useState<SessionStats | null>(null);
+  const stats = frozen ?? fetched;
   const fetchingRef = useRef(false);
 
   // Tick clock every 30s so a still-active session's "duration" tile stays current.
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
-    if (session.status !== "active") return;
+    if (frozen || session.status !== "active") return;
     const id = window.setInterval(() => setNow(Date.now()), 30_000);
     return () => window.clearInterval(id);
-  }, [session.status]);
+  }, [frozen, session.status]);
 
   // A refresh asked for while one is in flight is not dropped: it runs once
   // when the current one settles (that is the throttle's trailing call).
@@ -198,6 +201,7 @@ export function SessionOverview({ session, agents }: SessionOverviewProps) {
 
   // Initial load + reload when the session id changes.
   useEffect(() => {
+    if (frozen) return;
     fetchStats();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session.id]);
@@ -206,6 +210,7 @@ export function SessionOverview({ session, agents }: SessionOverviewProps) {
   // stream still refreshes) and again after a reconnect.
   useLiveRefresh(() => void fetchStats(), {
     throttleMs: REFRESH_THROTTLE_MS,
+    enabled: !frozen,
     match: (msg) => {
       if (isRemoteDataRefreshMessage(msg)) return true;
       if (

client/src/components/Sidebar.tsx

@@ -170,6 +170,10 @@ interface SidebarProps {
   onUpdateAvailableChange?: (available: boolean) => void;
   /** Set on a narrow viewport: the sidebar is an off-canvas drawer. */
   drawer?: { open: boolean; onClose: () => void };
+  /** Expanded width in px, chosen by dragging its edge (see Layout). */
+  width?: number;
+  /** True while that edge is dragged: no width transition lagging the pointer. */
+  resizing?: boolean;
 }
 
 export function Sidebar({
@@ -180,6 +184,8 @@ export function Sidebar({
   onConnectionOpenChange,
   onUpdateAvailableChange,
   drawer,
+  width = 240,
+  resizing = false,
 }: SidebarProps) {
   const { t } = useTranslation();
   const asideRef = useRef<HTMLElement>(null);
@@ -423,8 +429,9 @@ export function Sidebar({
                 ? "visible translate-x-0 shadow-2xl transition-transform"
                 : "invisible -translate-x-full transition-[transform,visibility]"
             }`
-          : `z-30 transition-[width] duration-200 ${collapsed ? "w-[4.25rem]" : "w-60"}`
+          : `z-30 duration-200 ${resizing ? "" : "transition-[width]"} ${collapsed ? "w-[4.25rem]" : ""}`
       }`}
+      style={drawer || collapsed ? undefined : { width }}
     >
       <div className="px-3 py-4 border-b border-border flex-shrink-0">
         <div className="flex flex-col items-center justify-center">

client/src/components/SnapshotButton.tsx

@@ -0,0 +1,84 @@
+/**
+ * @file SnapshotButton.tsx
+ * @description The session analysis page's **Snapshot** action: confirms with a
+ * "redact file paths" choice, freezes the session through `POST
+ * /api/snapshots`, copies the `/snapshot/<token>` link and offers it inline.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Camera } from "lucide-react";
+import { api } from "../lib/api";
+import { ConfirmModal } from "./ConfirmModal";
+import { Checkbox } from "./Checkbox";
+import { CopyButton } from "./event-views/primitives";
+
+export function snapshotUrl(token: string): string {
+  return `${window.location.origin}/snapshot/${token}`;
+}
+
+export function SnapshotButton({ sessionId }: { sessionId: string }) {
+  const { t } = useTranslation("sessions");
+  const [open, setOpen] = useState(false);
+  const [redact, setRedact] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [token, setToken] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const create = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { snapshot } = await api.snapshots.create(sessionId, { filePaths: redact });
+      setToken(snapshot.token);
+      navigator.clipboard?.writeText(snapshotUrl(snapshot.token)).catch(() => undefined);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-1">
+      {token && (
+        <span className="inline-flex items-center gap-1 text-xs text-fg-secondary">
+          <Link to={`/snapshot/${token}`} className="text-accent hover:underline">
+            {t("snapshot.open")}
+          </Link>
+          <CopyButton text={snapshotUrl(token)} />
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        title={t("snapshot.hint")}
+        className="btn-ghost text-xs"
+      >
+        <Camera className="h-4 w-4" />
+        {t("snapshot.create")}
+      </button>
+      {error && (
+        <p role="alert" className="basis-full text-right text-[11px] text-status-danger">
+          {error}
+        </p>
+      )}
+      <ConfirmModal
+        open={open}
+        title={t("snapshot.title")}
+        message={t("snapshot.body")}
+        confirmLabel={t("snapshot.confirm")}
+        cancelLabel={t("snapshot.cancel")}
+        destructive={false}
+        busy={busy}
+        onConfirm={() => void create()}
+        onCancel={() => setOpen(false)}
+      >
+        <Checkbox checked={redact} onChange={setRedact} label={t("snapshot.redactPaths")} />
+      </ConfirmModal>
+    </div>
+  );
+}

client/src/components/StatusBar.tsx

@@ -23,10 +23,10 @@
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { RefreshCw, RotateCcw, Wifi, WifiOff } from "lucide-react";
 import { api, type RunHandle } from "../lib/api";
-import type { CostResult, ToolQuota } from "../lib/types";
+import type { BudgetStatus, CostResult, ToolQuota } from "../lib/types";
 import { fmt, fmtCostFull, formatModelName, timeAgo } from "../lib/format";
 import { AiToolIcon } from "./AiToolIcon";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
@@ -208,7 +208,7 @@ function QuotaPanel({
       onMouseLeave={onLeave}
       onFocus={onEnter}
       onBlur={onLeave}
-      className="fixed bottom-7 right-2 z-[9999] w-[19rem] max-w-[calc(100vw-1rem)] rounded-lg border border-border bg-surface-2 px-3 py-2.5 text-[11px] leading-snug text-fg-primary shadow-lg shadow-black/20"
+      className="fixed bottom-7 right-2 z-[9999] max-h-[calc(100vh-2.5rem)] w-[19rem] max-w-[calc(100vw-1rem)] overflow-y-auto rounded-lg border border-border bg-surface-2 px-3 py-2.5 text-[11px] leading-snug text-fg-primary shadow-lg shadow-black/20"
     >
       <div className="mb-2 font-semibold">{t("statusBar.quotaTitle")}</div>
       {groups.map(([id, list]) => (
@@ -342,6 +342,8 @@ export function StatusBar({
   const [laneCost, setLaneCost] = useState<CostResult | null>(null);
   const [sessionCost, setSessionCost] = useState<CostResult | null>(null);
   const [runs, setRuns] = useState<RunHandle[]>([]);
+  // The budget furthest past one of its thresholds, if any.
+  const [budget, setBudget] = useState<BudgetStatus | null>(null);
   const location = useLocation();
   const shown = selectedFrom(location.pathname, location.search);
   const lane = shown.lane;
@@ -381,6 +383,13 @@ export function StatusBar({
         .totalCost({ date: localDate() })
         .then((r) => live && setToday(r))
         .catch(() => undefined);
+      api.budgets
+        .status()
+        .then(({ budgets }) => {
+          const hit = budgets.filter((b) => b.crossed.length > 0).sort((a, b) => b.pct - a.pct);
+          if (live) setBudget(hit[0] ?? null);
+        })
+        .catch(() => undefined);
       if (lane !== null) {
         api.pricing
           .totalCost({ lane })
@@ -470,6 +479,20 @@ export function StatusBar({
           r={sessionCost}
         />
       )}
+      {budget && (
+        <Link
+          to="/?tab=analytics&sub=cost"
+          data-testid="status-bar-budget"
+          title={t("statusBar.budgetTitle", {
+            name: budget.name,
+            spend: usd(budget.spend),
+            limit: usd(budget.config.limit_usd ?? 0),
+          })}
+          className={`tabular-nums hover:underline ${budget.pct >= 100 ? "text-status-danger" : "text-status-warning"}`}
+        >
+          {t("statusBar.budget", { pct: Math.round(budget.pct) })}
+        </Link>
+      )}
       <QuotaChips />
     </footer>
   );

client/src/components/UpdateNotifier.tsx

@@ -85,6 +85,7 @@ import { Download, X, Copy, Check, RefreshCw, Zap, ExternalLink } from "lucide-r
 import { api } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import { copyText } from "../lib/clipboard";
+import { toast } from "../lib/toast";
 import { useDialog } from "../hooks/useDialog";
 import type { UpdateStatusPayload, WSMessage } from "../lib/types";
 
@@ -264,22 +265,41 @@ export function UpdateNotifier() {
    *   stretch, so polling naively would get a 200 from the process we are
    *   waiting to replace and reload onto the same old bundle.
    */
-  const pollUntilBack = useCallback((requireDownFirst = false) => {
-    let sawDown = !requireDownFirst;
-    const attempt = () => {
-      api.updates
-        .status()
-        .then(() => {
-          if (sawDown) window.location.reload();
-          else setTimeout(attempt, 1500);
-        })
-        .catch(() => {
-          sawDown = true;
-          setTimeout(attempt, 1500);
-        });
-    };
-    setTimeout(attempt, 1500);
-  }, []);
+  const pollUntilBack = useCallback(
+    (requireDownFirst = false, fromVersion: string | null = null) => {
+      let sawDown = !requireDownFirst;
+      // Its own verdicts only: an older plugin-update.json is still on disk
+      // until this chain writes one (5 s slack for a clock a little behind).
+      const since = Date.now() - 5000;
+      const attempt = () => {
+        api.updates
+          .status()
+          .then((s) => {
+            const v = s.last_plugin_update;
+            const mine = !!v?.finished_at && Date.parse(v.finished_at) >= since;
+            // A failed step, or nothing to pull, leaves the OLD server up: it
+            // never goes down, so waiting for that spun "Restarting…" forever.
+            if (requireDownFirst && v && mine && (v.ok === false || v.step === "already_current")) {
+              syncFromPayload(s);
+              setRestarting(false);
+              if (v.ok) toast.info(t("pluginAlreadyCurrent"));
+              return;
+            }
+            // A new version answering is back too, even if a poll never
+            // landed in the short gap between the old server and the new one.
+            const moved = !!fromVersion && !!s.local_version && s.local_version !== fromVersion;
+            if (sawDown || moved) window.location.reload();
+            else setTimeout(attempt, 1500);
+          })
+          .catch(() => {
+            sawDown = true;
+            setTimeout(attempt, 1500);
+          });
+      };
+      setTimeout(attempt, 1500);
+    },
+    [syncFromPayload, t]
+  );
 
   const applyNow = async () => {
     if (applying || restarting) return;
@@ -292,7 +312,7 @@ export function UpdateNotifier() {
         setRestarting(true);
         // mode "plugin": the old server lingers while the chain installs, so
         // only treat a reachable server as "back" after it has gone away once.
-        pollUntilBack(result.mode === "plugin");
+        pollUntilBack(result.mode === "plugin", status?.local_version ?? null);
         return;
       }
       setError(
@@ -330,7 +350,7 @@ export function UpdateNotifier() {
           longest label is a whole sentence ("restarting the dashboard…"). */}
       <div
         ref={panelRef}
-        className="w-full max-w-2xl card shadow-2xl animate-slide-up overflow-hidden"
+        className="w-full max-w-2xl max-h-full flex flex-col card shadow-2xl animate-slide-up overflow-hidden"
       >
         {/* Header */}
         <div className="flex items-start justify-between gap-3 px-5 py-4 border-b border-border">
@@ -370,7 +390,7 @@ export function UpdateNotifier() {
         </div>
 
         {/* Body */}
-        <div className="px-5 py-4 space-y-3">
+        <div className="min-h-0 overflow-y-auto px-5 py-4 space-y-3">
           <p className="text-sm text-fg-secondary leading-relaxed">
             {pluginManaged ? t("pluginAutoNote") : release ? t("releaseLead") : t("lead")}
           </p>

client/src/components/__tests__/AlertsNotifications.spend.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * @file Tests for the alert rule form's spend rules: a budget rule is built
+ * from period / limit / thresholds / AI tool (plus the browser's timezone
+ * offset), Preview shows what it would have fired without saving it, and
+ * Create saves the same config.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+
+vi.mock("../../lib/api", () => ({
+  api: {
+    alerts: {
+      list: vi.fn().mockResolvedValue({ alerts: [], total: 0, unacked: 0, limit: 50, offset: 0 }),
+      rules: {
+        list: vi.fn().mockResolvedValue({ rules: [] }),
+        create: vi.fn().mockResolvedValue({ rule: {} }),
+        preview: vi.fn().mockResolvedValue({
+          supported: true,
+          window_days: 7,
+          fires: 1,
+          sessions: 0,
+          samples: [],
+          periods: [
+            {
+              period_start: "2026-09-01",
+              period_end: "2026-09-30",
+              spend: 120,
+              pct: 120,
+              crossed: [80, 100],
+            },
+            {
+              period_start: "2026-10-01",
+              period_end: "2026-10-31",
+              spend: 10,
+              pct: 10,
+              crossed: [],
+            },
+          ],
+        }),
+      },
+    },
+    aiTools: {
+      list: vi.fn().mockResolvedValue({
+        tools: [{ id: "codex", label: "Codex" }],
+        default: "claude",
+      }),
+    },
+  },
+}));
+
+import { api } from "../../lib/api";
+import { AlertsNotifications } from "../AlertsNotifications";
+
+describe("AlertsNotifications — spend rules", () => {
+  it("previews and creates a budget rule", async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <AlertsNotifications />
+      </MemoryRouter>
+    );
+    await user.click(await screen.findByText("Add rule"));
+    await user.type(screen.getByPlaceholderText("e.g. Error burst"), "Monthly");
+    const selects = screen.getAllByRole("combobox");
+    await user.selectOptions(selects[0]!, "budget");
+    await user.selectOptions(screen.getByDisplayValue("month"), "week");
+    const limit = screen.getByDisplayValue("100");
+    await user.clear(limit);
+    await user.type(limit, "50");
+    await screen.findByRole("option", { name: "Codex" });
+    await user.selectOptions(screen.getByDisplayValue("All AI tools"), "codex");
+
+    await user.click(screen.getByRole("button", { name: /Preview/ }));
+    const config = {
+      period: "week",
+      limit_usd: 50,
+      thresholds: [80, 100],
+      tz_offset: new Date().getTimezoneOffset(),
+      tool: "codex",
+    };
+    expect(api.alerts.rules.preview).toHaveBeenCalledWith({
+      rule_type: "budget",
+      config,
+      cooldown_seconds: 300,
+    });
+    expect(await screen.findByText("2026-09-01")).toBeInTheDocument();
+    expect(screen.getByText("80% 100%")).toBeInTheDocument();
+    expect(api.alerts.rules.create).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole("button", { name: /Create rule/ }));
+    expect(api.alerts.rules.create).toHaveBeenCalledWith({
+      name: "Monthly",
+      rule_type: "budget",
+      config,
+      cooldown_seconds: 300,
+    });
+  });
+});

client/src/components/__tests__/EventReplay.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * @file EventReplay.test.tsx
+ * @description The Replay tab's controls: step, jump, arrow keys, a lifecycle
+ * marker jumping the cursor, playback advancing on a timer, and the derived
+ * state following the cursor.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { EventReplay } from "../EventReplay";
+import type { DashboardEvent } from "../../lib/types";
+
+function ev(id: number, event_type: string, tool_name: string | null = null): DashboardEvent {
+  return {
+    id,
+    session_id: "s1",
+    agent_id: "a1",
+    event_type,
+    tool_name,
+    summary: `${event_type} ${tool_name ?? ""}`.trim(),
+    data: null,
+    created_at: new Date(Date.UTC(2026, 9, 1, 10, 0, id)).toISOString(),
+  } as DashboardEvent;
+}
+
+// Given newest first, as the events API answers: the replay orders them itself.
+const events = [
+  ev(4, "Stop"),
+  ev(3, "PostToolUse", "Bash"),
+  ev(2, "PreToolUse", "Bash"),
+  ev(1, "SessionStart"),
+];
+
+function renderReplay() {
+  return render(
+    <MemoryRouter>
+      <EventReplay events={events} agentInfoById={new Map()} sessionNameById={new Map()} />
+    </MemoryRouter>
+  );
+}
+
+const position = () => screen.getByText(/^\d+ \/ 4/);
+
+afterEach(() => vi.useRealTimers());
+
+describe("EventReplay", () => {
+  it("starts at the first event and steps with the buttons", () => {
+    renderReplay();
+    expect(position().textContent).toMatch(/^1 \/ 4/);
+    fireEvent.click(screen.getByTitle("Step forward (→)"));
+    fireEvent.click(screen.getByTitle("Step forward (→)"));
+    expect(position().textContent).toMatch(/^3 \/ 4/);
+    expect(screen.getByText("Bash ×1")).toBeTruthy();
+    fireEvent.click(screen.getByTitle("Jump to end (End)"));
+    expect(position().textContent).toMatch(/^4 \/ 4/);
+    fireEvent.click(screen.getByTitle("Jump to start (Home)"));
+    expect(position().textContent).toMatch(/^1 \/ 4/);
+  });
+
+  it("moves on arrow keys and jumps from a lifecycle marker", () => {
+    renderReplay();
+    const root = screen.getByTestId("event-replay");
+    fireEvent.keyDown(root, { key: "ArrowRight" });
+    expect(position().textContent).toMatch(/^2 \/ 4/);
+    // The in-flight tool at the PreToolUse.
+    expect(screen.getByText("Running tool").nextSibling?.textContent).toBe("Bash");
+    fireEvent.keyDown(root, { key: "End" });
+    expect(position().textContent).toMatch(/^4 \/ 4/);
+    fireEvent.click(screen.getByRole("button", { name: "Session start · #1" }));
+    expect(position().textContent).toMatch(/^1 \/ 4/);
+  });
+
+  it("plays to the end at the chosen speed", () => {
+    vi.useFakeTimers();
+    renderReplay();
+    fireEvent.click(screen.getByRole("button", { name: "5×" }));
+    fireEvent.click(screen.getByTitle("Play (Space)"));
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    expect(position().textContent).toMatch(/^2 \/ 4/);
+    // One step per tick: each step schedules the next.
+    for (let i = 0; i < 3; i++) {
+      act(() => {
+        vi.advanceTimersByTime(100);
+      });
+    }
+    expect(position().textContent).toMatch(/^4 \/ 4/);
+    expect(screen.getByTitle("Play (Space)")).toBeTruthy();
+  });
+});

client/src/components/__tests__/Layout.test.tsx

@@ -3,7 +3,8 @@
  * @description Responsive shell: with no stored preference the sidebar starts
  * collapsed below `lg`, and below `md` it becomes an off-canvas drawer opened
  * from a menu button — a modal dialog that Escape and the backdrop close,
- * handing focus back to the button.
+ * handing focus back to the button. The expanded sidebar's edge resizes it
+ * within its bounds and remembers the width.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -16,7 +17,7 @@ vi.mock("../UpdateNotifier", () => ({ UpdateNotifier: () => null }));
 vi.mock("../StatusBar", () => ({ StatusBar: () => null }));
 vi.mock("../WorkspaceTree", () => ({ WorkspaceTree: () => null }));
 
-import { Layout, DRAWER_QUERY } from "../Layout";
+import { Layout, DRAWER_QUERY, SIDEBAR_MIN, SIDEBAR_MAX } from "../Layout";
 import { loadCollapsed, SIDEBAR_STORAGE_KEY } from "../Sidebar";
 
 function viewport(width: number) {
@@ -34,6 +35,7 @@ function viewport(width: number) {
 afterEach(() => {
   vi.unstubAllGlobals();
   localStorage.removeItem(SIDEBAR_STORAGE_KEY);
+  localStorage.removeItem("agenthub.sidebar.width");
 });
 
 describe("loadCollapsed", () => {
@@ -95,3 +97,47 @@ describe("Layout drawer", () => {
     expect(screen.getByRole("main").style.marginLeft).toBe("4.25rem");
   });
 });
+
+describe("Layout sidebar width", () => {
+  it("the edge drags within bounds, is remembered, and a double-click resets it", () => {
+    viewport(1440);
+    vi.stubGlobal("innerWidth", 2560);
+    render(
+      <MemoryRouter>
+        <Layout wsConnected />
+      </MemoryRouter>
+    );
+    const edge = screen.getByTestId("sidebar-resize");
+    const main = screen.getByRole("main");
+    expect(main.style.marginLeft).toBe(`${SIDEBAR_MIN}px`);
+
+    fireEvent.pointerDown(edge, { pointerId: 1 });
+    fireEvent.pointerMove(edge, { clientX: 360 });
+    fireEvent.pointerUp(edge, { clientX: 360 });
+    expect(main.style.marginLeft).toBe("360px");
+    expect(screen.getByTestId("sidebar").style.width).toBe("360px");
+    expect(localStorage.getItem("agenthub.sidebar.width")).toBe("360");
+
+    fireEvent.pointerDown(edge, { pointerId: 1 });
+    fireEvent.pointerUp(edge, { clientX: 2000 });
+    expect(main.style.marginLeft).toBe(`${SIDEBAR_MAX}px`);
+
+    fireEvent.keyDown(edge, { key: "ArrowLeft" });
+    expect(main.style.marginLeft).toBe(`${SIDEBAR_MAX - 16}px`);
+
+    fireEvent.doubleClick(edge);
+    expect(main.style.marginLeft).toBe(`${SIDEBAR_MIN}px`);
+  });
+
+  it("never wider than 40% of the window", () => {
+    viewport(1100);
+    vi.stubGlobal("innerWidth", 1100);
+    localStorage.setItem("agenthub.sidebar.width", "480");
+    render(
+      <MemoryRouter>
+        <Layout wsConnected />
+      </MemoryRouter>
+    );
+    expect(screen.getByRole("main").style.marginLeft).toBe("440px");
+  });
+});

client/src/components/__tests__/StatusBar.test.tsx

@@ -111,6 +111,21 @@ vi.mock("../../lib/api", () => ({
         daily_costs: [],
       })),
     },
+    budgets: {
+      status: vi.fn().mockResolvedValue({
+        budgets: [
+          { id: "b1", name: "Quiet", config: { limit_usd: 100 }, spend: 10, pct: 10, crossed: [] },
+          {
+            id: "b2",
+            name: "Monthly",
+            config: { limit_usd: 100 },
+            spend: 85,
+            pct: 85,
+            crossed: [80],
+          },
+        ],
+      }),
+    },
   },
 }));
 
@@ -142,6 +157,14 @@ describe("StatusBar", () => {
     expect(screen.getByRole("status")).toHaveTextContent("Live · 1 need you");
   });
 
+  it("flags the budget furthest past a threshold, linking to the cost analytics", async () => {
+    at("/", <StatusBar wsConnected left="0" onConnectionClick={() => {}} />);
+    const chip = await screen.findByTestId("status-bar-budget");
+    expect(chip.textContent).toBe("Budget 85%");
+    expect(chip.getAttribute("href")).toBe("/?tab=analytics&sub=cost");
+    expect(chip.getAttribute("title")).toBe("Monthly: $85.00 of $100.00 this period");
+  });
+
   it("says Disconnected when the socket is down", () => {
     at("/", <StatusBar wsConnected={false} left="0" onConnectionClick={() => {}} />);
     expect(screen.getByRole("button", { name: /Disconnected/ })).toBeInTheDocument();

client/src/components/__tests__/UpdateNotifier.test.tsx

@@ -222,6 +222,40 @@ describe("UpdateNotifier — Update now", () => {
   });
 });
 
+describe("UpdateNotifier — plugin chain verdict", () => {
+  it("stops Restarting when the chain fails and the old server stays up", async () => {
+    const PLUGIN: UpdateStatusPayload = {
+      ...BASE_STATUS,
+      situation: "plugin_managed",
+      install_kind: "plugin",
+      plugin_marketplace: "sg",
+      plugin_name: "agenthub",
+      commits_behind: 0,
+      local_version: "1.5.0",
+      release_check: "ok",
+      latest_release: "v1.6.0",
+    };
+    statusMock.mockResolvedValue(PLUGIN);
+    applyMock.mockResolvedValue({ ...PLUGIN, applied: true, mode: "plugin" });
+    render(<UpdateNotifier />);
+    await userEvent.click(await screen.findByText(i18n.t("updates:updateNow")));
+    await screen.findAllByText(i18n.t("updates:pluginUpdating"));
+
+    // The old server answers again, now carrying this chain's failed verdict.
+    statusMock.mockResolvedValue({
+      ...PLUGIN,
+      last_plugin_update: {
+        ok: false,
+        step: "plugin_update",
+        error: "boom",
+        finished_at: new Date().toISOString(),
+      },
+    });
+    expect(await screen.findByText(/plugin_update/, {}, { timeout: 4000 })).toBeInTheDocument();
+    expect(screen.queryByText(i18n.t("updates:pluginUpdating"))).not.toBeInTheDocument();
+  });
+});
+
 describe("UpdateNotifier — closing vs skipping", () => {
   it("Escape only closes for now; Skip this version is the persistent dismiss", async () => {
     const { unmount } = render(<UpdateNotifier />);

client/src/components/__tests__/WorkspaceTree.test.tsx

@@ -88,7 +88,7 @@ vi.mock("../../lib/api", async (importOriginal) => {
         list: vi.fn(async () => ({ tools: [], default: "claude" })),
         iconUrl: () => "",
       },
-      aiRouters: { list: vi.fn(async () => ({ routers: [] })) },
+      aiProxies: { list: vi.fn(async () => ({ items: [] })) },
     },
   };
 });

client/src/components/config/ConfirmDeleteModal.tsx

@@ -67,7 +67,7 @@ export function ConfirmDeleteModal<
         aria-modal="true"
         aria-labelledby="cc-confirm-delete-title"
         aria-describedby="cc-confirm-delete-body"
-        className="relative w-full max-w-lg rounded-xl border border-status-danger/40 bg-surface-1"
+        className="relative flex max-h-full w-full max-w-lg flex-col rounded-xl border border-status-danger/40 bg-surface-1"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
@@ -76,7 +76,7 @@ export function ConfirmDeleteModal<
             {t("edit.confirmDelete")}
           </span>
         </div>
-        <div className="p-4 space-y-3">
+        <div className="min-h-0 overflow-y-auto p-4 space-y-3">
           <p id="cc-confirm-delete-body" className="text-xs text-fg-secondary leading-relaxed">
             {t("edit.confirmDeleteBody")}
           </p>

client/src/components/lanes/LaneChangesPanel.tsx

@@ -248,6 +248,7 @@ function TreeNodes({
               type="button"
               data-tree-status={mark?.letter ?? (e.changed ? "dir" : undefined)}
               data-tree-kept={isKept || undefined}
+              data-tree-ignored={e.ignored || undefined}
               onClick={() => (e.dir ? onToggleDir(e.path) : onOpenFile(e.path))}
               onContextMenu={onMenu && ((ev) => onMenu(ev, e))}
               style={{ paddingLeft: `${depth * 0.9 + 0.25}rem` }}
@@ -255,11 +256,13 @@ function TreeNodes({
               className={`flex w-full items-center gap-1 rounded px-1 py-0.5 text-left font-mono text-[11px] hover:bg-surface-2 ${
                 isKept
                   ? "bg-kept/10 text-kept"
-                  : mark
-                    ? mark.tone
-                    : e.changed
-                      ? "text-status-warning"
-                      : "text-fg-primary"
+                  : e.ignored
+                    ? "text-kept"
+                    : mark
+                      ? mark.tone
+                      : e.changed
+                        ? "text-status-warning"
+                        : "text-fg-primary"
               } ${active === e.path ? "!bg-surface-4" : ""}`}
             >
               {e.dir ? (
@@ -495,7 +498,9 @@ function ChangeRow({
   return (
     <li
       className="group flex items-baseline gap-1"
-      style={depth ? { paddingLeft: `${depth * 0.9}rem` } : undefined}
+      // A file has no chevron: reserve its 1rem so the letter lines up
+      // with a sibling folder's icon, one step inside the parent folder.
+      style={{ paddingLeft: `${depth + 1}rem` }}
       onContextMenu={(e) => onMenu(e, f)}
     >
       <button
@@ -571,10 +576,7 @@ function ChangeTreeNodes({
         const open = !collapsed.has(key);
         return (
           <li key={d.path}>
-            <div
-              className="group flex items-center gap-1"
-              style={{ paddingLeft: `${depth * 0.9}rem` }}
-            >
+            <div className="group flex items-center gap-1" style={{ paddingLeft: `${depth}rem` }}>
               <button
                 type="button"
                 aria-expanded={open}

client/src/components/lanes/SessionResumeButton.tsx

@@ -26,15 +26,20 @@ import { ConfirmModal } from "../ConfirmModal";
 import { startInFreeTabDetailed } from "./startSession";
 import { liveRunFor, sessionWorktreeName } from "./WorkspaceSessionList";
 
+/** A path without its trailing separators — `/` or a Windows `\`. */
+const strip = (p: string) => p.replace(/[\\/]+$/, "");
+
 /** The workspace of this tool whose folder holds `cwd` most deeply — the
  *  same path-boundary rule the server binds hook sessions with. */
 export function owningLane(cwd: string, tool: string, lanes: Lane[]): Lane | null {
   let best: Lane | null = null;
+  const target = strip(cwd);
   for (const l of lanes) {
     if (l.tool !== tool) continue;
-    const root = l.cwd.replace(/\/+$/, "");
-    if (cwd !== root && !cwd.startsWith(root + "/")) continue;
-    if (!best || root.length > best.cwd.replace(/\/+$/, "").length) best = l;
+    const root = strip(l.cwd);
+    if (target !== root && !target.startsWith(root + "/") && !target.startsWith(root + "\\"))
+      continue;
+    if (!best || root.length > strip(best.cwd).length) best = l;
   }
   return best;
 }
@@ -74,7 +79,7 @@ export function SessionResumeButton({
         owningLane(session.cwd, tool, lanes));
   if (!lane || runs === null) return null;
   const run = liveRunFor(lane, runs, session.id);
-  const same = (a: string, b: string) => a.replace(/\/+$/, "") === b.replace(/\/+$/, "");
+  const same = (a: string, b: string) => strip(a) === strip(b);
   // Its own worktree counts too: the server resumes it there (`claude
   // --worktree` sessions), and refuses one whose worktree is gone.
   const resumable =

client/src/components/lanes/WorkspaceHome.tsx

@@ -7,7 +7,7 @@
  * `ConsoleTabs.tsx`). Inside
  * the box, like Claude Desktop's: AI (the session's own tool, the workspace's
  * by default) and one Model chip (`ModelMenu`: the tool's own list or the
- * router's models, plus Effort); under it the quieter choices — AI Router
+ * proxy's models, plus Effort); under it the quieter choices — AI Proxy
  * (Native or a profile), Permission (Claude's mode, Codex's sandbox/approval,
  * a catalog tool's bypass) and Local / New worktree — the workspace's Recents — the sessions it
  * owns and has not archived (`?lane=&archived=0`, with each one's state dot,
@@ -58,7 +58,7 @@ import { useAiTools } from "../../hooks/useAiTools";
 import { useProjectTreePrefs } from "../../lib/projectTreePrefs";
 import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "../run/RunSetup";
 import { AiToolIcon } from "../AiToolIcon";
-import { RouterPicker, routerArg, useAiRouters, useSessionRouter } from "../run/RouterPicker";
+import { ProxyPicker, proxyArg, useAiProxies, useSessionProxy } from "../run/ProxyPicker";
 import { Select } from "../Select";
 import { MarkdownPreview } from "../MarkdownPreview";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./WorkspaceRowMenu";
@@ -125,27 +125,43 @@ function HomeBody({
   const entry = aiTools.byId(tool);
   const claude = tool === "claude";
   const codex = tool === "codex";
-  const [prompt, setPrompt] = useState("");
+  // The half-typed prompt survives leaving the page or the workspace.
+  const draftKey = `agenthub.workspace.draft.${lane.id}`;
+  const [prompt, setPrompt] = useState(() => {
+    try {
+      return localStorage.getItem(draftKey) ?? "";
+    } catch {
+      return "";
+    }
+  });
+  useEffect(() => {
+    try {
+      if (prompt) localStorage.setItem(draftKey, prompt);
+      else localStorage.removeItem(draftKey);
+    } catch {
+      /* storage unavailable: the draft just does not survive */
+    }
+  }, [draftKey, prompt]);
   const [images, setImages] = useState<PromptImage[]>([]);
-  const [router, setRouter] = useSessionRouter();
-  const routers = useAiRouters();
-  // Claude and Codex, also before the catalog has loaded (as RouterPicker).
-  const routerCapable = entry?.routerCapable ?? (claude || codex);
+  const [proxy, setProxy] = useSessionProxy();
+  const proxies = useAiProxies();
+  // Claude and Codex, also before the catalog has loaded (as ProxyPicker).
+  const proxyCapable = entry?.proxyCapable ?? (claude || codex);
   // A profile picked for a tool that can use one; its models replace the tool's own.
-  const profile = routerCapable
-    ? (routers?.find((r) => r.name === router && !r.builtin) ?? null)
+  const profile = proxyCapable
+    ? (proxies?.find((r) => r.name === proxy && !r.builtin) ?? null)
     : null;
-  const routerModels: ModelChoice[] | undefined = profile
+  const proxyModels: ModelChoice[] | undefined = profile
     ? [
         ...new Set(
           [profile.model, profile.models.opus, profile.models.sonnet, profile.models.haiku].filter(
-            Boolean
+            (m): m is string => !!m
           )
         ),
       ].map((id) => ({ id, label: id }))
     : undefined;
   // The tool's default model (also when the catalog arrives after mount); on
-  // a router, the router's own default. A new tool or router drops the pick.
+  // a proxy, the proxy's own default. A new tool or proxy drops the pick.
   const defaultModel = profile ? "" : (entry?.defaultModel ?? "");
   const [model, setModel] = useState(defaultModel);
   useEffect(() => setModel(defaultModel), [defaultModel, tool, profile?.name]);
@@ -303,7 +319,7 @@ function HomeBody({
         // Only a different tool is named: the workspace's own keeps starting
         // even after it was disabled in Settings.
         ...(tool !== lane.tool ? { tool } : {}),
-        ...routerArg(routerCapable, router),
+        ...proxyArg(proxyCapable, proxy),
         ...(hasModel && model ? { model } : {}),
         ...(claude ? { permissionMode: mode } : {}),
         ...(codex ? { sandbox, approval } : {}),
@@ -517,7 +533,7 @@ function HomeBody({
                   value={model}
                   onChange={setModel}
                   tool={tool}
-                  choices={routerModels}
+                  choices={proxyModels}
                   {...(hasEffort ? { effort, onEffortChange: setEffort } : {})}
                 />
               )}
@@ -540,12 +556,12 @@ function HomeBody({
           data-testid="workspace-home-options"
           className="mt-1.5 flex flex-wrap items-center gap-0.5 px-1"
         >
-          <RouterPicker
+          <ProxyPicker
             variant="ghost"
             tool={tool}
-            routers={routers}
-            value={router}
-            onChange={setRouter}
+            proxies={proxies}
+            value={proxy}
+            onChange={setProxy}
           />
           {claude && (
             <Select<PermissionMode>

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -66,9 +66,10 @@ export function liveRunFor(lane: Lane, runs: RunHandle[], sessionId: string): Ru
 /** The name of the git worktree a session ran in (`claude --worktree` puts it
  *  at `<repo>/.claude/worktrees/<name>`), or null for one in the folder. */
 export function sessionWorktreeName(lane: Lane, s: Session): string | null {
-  const strip = (p: string) => p.replace(/\/+$/, "");
+  // Either separator: a Windows cwd is `D:\repo\.claude\worktrees\<name>`.
+  const strip = (p: string) => p.replace(/[\\/]+$/, "");
   if (!s.cwd || strip(s.cwd) === strip(lane.cwd)) return null;
-  return /\/\.claude\/worktrees\/([^/]+)\/?$/.exec(s.cwd)?.[1] ?? null;
+  return /[\\/]\.claude[\\/]worktrees[\\/]([^\\/]+)[\\/]?$/.exec(s.cwd)?.[1] ?? null;
 }
 
 /** A session row's dot: waiting for the user, failed, held by a live pane, or

client/src/components/lanes/__tests__/AddLaneModal.test.tsx

@@ -31,7 +31,7 @@ vi.mock("../../../lib/api", () => ({
       profileInit: vi.fn(),
       mcpSync: vi.fn(),
     },
-    aiRouters: { list: vi.fn() },
+    aiProxies: { list: vi.fn() },
     aiTools: { list: vi.fn(), iconUrl: (id: string) => `/api/ai-tools/${id}/icon` },
     run: { start: vi.fn() },
   },
@@ -50,7 +50,7 @@ const tool = (id: string, label: string, over: Partial<AiTool> = {}): AiTool =>
   prompt: { mode: "argv" },
   resume: false,
   bypass: false,
-  routerCapable: false,
+  proxyCapable: false,
   install: null,
   update: null,
   modelFlag: false,
@@ -62,8 +62,8 @@ const tool = (id: string, label: string, over: Partial<AiTool> = {}): AiTool =>
 const TOOLS: AiToolsView = {
   default: "claude",
   tools: [
-    tool("claude", "Claude Code", { launcher: "claude", routerCapable: true, prompt: null }),
-    tool("codex", "Codex", { launcher: "codex", routerCapable: true, prompt: null }),
+    tool("claude", "Claude Code", { launcher: "claude", proxyCapable: true, prompt: null }),
+    tool("codex", "Codex", { launcher: "codex", proxyCapable: true, prompt: null }),
     tool("gemini", "Gemini"),
     tool("aider", "Aider", { installed: false, path: null }),
     tool("grok", "Grok", { enabled: false }),
@@ -158,7 +158,7 @@ beforeEach(() => {
     .mockReset()
     .mockResolvedValue({ scaffolded: false, reason: "no detectable Node.js project" });
   vi.mocked(api.lanes.mcpSync).mockReset().mockResolvedValue({ servers: [], profilesSeeded: [] });
-  vi.mocked(api.aiRouters.list).mockReset();
+  vi.mocked(api.aiProxies.list).mockReset();
 });
 
 describe("AddLaneModal — picking an existing branch (issue #34)", () => {
@@ -639,12 +639,12 @@ describe("AddLaneModal — create/update readme", () => {
   });
 });
 
-describe("AddLaneModal — no router here", () => {
-  it("asks for no AI Router: a new session picks its own", async () => {
+describe("AddLaneModal — no proxy here", () => {
+  it("asks for no AI Proxy: a new session picks its own", async () => {
     renderModal({});
     await screen.findByRole("button", { name: /Claude Code.*Default/ });
-    expect(screen.queryByRole("radio", { name: "AI Router" })).toBeNull();
-    expect(api.aiRouters.list).not.toHaveBeenCalled();
+    expect(screen.queryByRole("radio", { name: "AI Proxy" })).toBeNull();
+    expect(api.aiProxies.list).not.toHaveBeenCalled();
   });
 });
 

client/src/components/lanes/__tests__/LaneCard.test.tsx

@@ -28,7 +28,7 @@ vi.mock("../../../lib/api", () => ({
     locks: {
       list: vi.fn(),
     },
-    aiRouters: {
+    aiProxies: {
       list: vi.fn(),
     },
     run: {
@@ -45,10 +45,10 @@ beforeEach(() => {
   // stack, so the runtime strip and its button stay absent unless a test opts in.
   vi.mocked(api.lanes.runtime).mockReset();
   vi.mocked(api.lanes.runtime).mockResolvedValue({ available: false });
-  // Only the built-in profile by default: a user who never opened the AI Router
+  // Only the built-in profile by default: a user who never opened the AI Proxy
   // tab has nothing to switch between, so the row stays out of every other test.
-  vi.mocked(api.aiRouters.list).mockReset();
-  vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [] });
+  vi.mocked(api.aiProxies.list).mockReset();
+  vi.mocked(api.aiProxies.list).mockResolvedValue({ items: [] });
 });
 vi.mocked(api.locks.list).mockReset();
 vi.mocked(api.locks.list).mockResolvedValue({ locks: [] });

client/src/components/lanes/__tests__/WorkspaceHome.test.tsx

@@ -2,8 +2,8 @@
  * @file WorkspaceHome.test.tsx
  * @description The workspace home: a new session starts in the first free
  * pane slot and opens it, on the AI tool picked for it (the workspace's by
- * default), AI and Model in the box and AI Router / Permission / Worktree
- * under it (the router's models on a router), all-busy is refused, Recents open a live pane or the
+ * default), AI and Model in the box and AI Proxy / Permission / Worktree
+ * under it (the proxy's models on a proxy), all-busy is refused, Recents open a live pane or the
  * transcript (never a resume), instructions save, context files upload and
  * remove, a folder is added with the repo's untracked worktrees suggested
  * (minus hidden sources), an unsupported tool is said so, and memory opens
@@ -117,7 +117,7 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         })),
       },
       aiTools: { list: vi.fn(async () => ({ tools: [], default: "claude" })), iconUrl: () => "" },
-      aiRouters: { list: vi.fn(async () => ({ items: [] })) },
+      aiProxies: { list: vi.fn(async () => ({ items: [] })) },
     },
   };
 });
@@ -193,7 +193,9 @@ describe("freeSlot / paneRunId", () => {
   it("picks the first slot no live run of this lane holds", () => {
     expect(freeSlot(1, [])).toBe(0);
     expect(freeSlot(1, runs)).toBe(1);
-    const all = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((slot) => ({ laneId: 1, slot, status: "running" }) as RunHandle);
+    const all = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(
+      (slot) => ({ laneId: 1, slot, status: "running" }) as RunHandle
+    );
     expect(freeSlot(1, all)).toBeNull();
     expect(freeSlot(1, all.slice(0, 4))).toBe(4);
     expect(freeSlot(2, all)).toBe(0);
@@ -222,7 +224,24 @@ describe("WorkspaceHome", () => {
     );
   });
 
-  it("keeps AI and Model (with effort) in the box, Router/Permission/Worktree under it", async () => {
+  it("keeps a half-typed prompt per workspace across a remount, and drops it once sent", async () => {
+    const user = userEvent.setup();
+    const first = renderHome();
+    await screen.findByTestId("workspace-recent-s-live");
+    await user.type(screen.getByLabelText("How can I help you today?"), "long draft");
+    first.unmount();
+    const other = renderHome(lane({ id: 2 }));
+    await screen.findByTestId("workspace-recent-s-live");
+    expect(screen.getByLabelText("How can I help you today?")).toHaveValue("");
+    other.unmount();
+    renderHome();
+    await screen.findByTestId("workspace-recent-s-live");
+    expect(screen.getByLabelText("How can I help you today?")).toHaveValue("long draft");
+    await user.click(screen.getByTestId("workspace-home-start"));
+    await waitFor(() => expect(localStorage.getItem("agenthub.workspace.draft.1")).toBeNull());
+  });
+
+  it("keeps AI and Model (with effort) in the box, Proxy/Permission/Worktree under it", async () => {
     renderHome();
     await screen.findByTestId("workspace-recent-s-live");
     const labels = (id: string) =>
@@ -233,7 +252,7 @@ describe("WorkspaceHome", () => {
       ].map((x) => x.getAttribute("aria-label"));
     expect(labels("workspace-home-composer")).toEqual(["AI", "model"]);
     expect(labels("workspace-home-options")).toEqual([
-      "AI Router",
+      "AI Proxy",
       "Permission mode",
       expect.stringContaining("own git worktree"),
     ]);
@@ -244,8 +263,8 @@ describe("WorkspaceHome", () => {
     vi.mocked(api.aiTools.list).mockResolvedValue({
       default: "claude",
       tools: [
-        { id: "claude", label: "Claude Code", launcher: "claude", routerCapable: true },
-        { id: "codex", label: "Codex", launcher: "codex", routerCapable: true, bypass: true },
+        { id: "claude", label: "Claude Code", launcher: "claude", proxyCapable: true },
+        { id: "codex", label: "Codex", launcher: "codex", proxyCapable: true, bypass: true },
         { id: "cursor", label: "Cursor CLI", installed: false, enabled: true },
       ].map((x) => ({ installed: true, enabled: true, ...x })),
     } as never);
@@ -270,9 +289,9 @@ describe("WorkspaceHome", () => {
     __resetAiTools();
   });
 
-  it("offers the router's models on a router, and sends the router", async () => {
-    localStorage.setItem("agenthub.session.router", "glm");
-    vi.mocked(api.aiRouters.list).mockResolvedValueOnce({
+  it("offers the proxy's models on a proxy, and sends the proxy", async () => {
+    localStorage.setItem("agenthub.session.proxy", "glm");
+    vi.mocked(api.aiProxies.list).mockResolvedValueOnce({
       items: [
         { name: "native", label: "Native", builtin: true, models: {} },
         {
@@ -297,7 +316,7 @@ describe("WorkspaceHome", () => {
     expect(api.lanes.action).toHaveBeenCalledWith(
       1,
       "start",
-      expect.objectContaining({ router: "glm" })
+      expect.objectContaining({ proxy: "glm" })
     );
   });
 

client/src/components/lanes/__tests__/sessionPaths.test.ts

@@ -0,0 +1,33 @@
+/**
+ * @file Tests that a session finds its workspace and its `claude --worktree`
+ * name by folder on Windows paths (`D:\…`) as well as POSIX ones — the
+ * transcript page's Resume/Fork/Open pane hid on Windows when they matched
+ * on "/" only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect } from "vitest";
+import type { Lane, Session } from "../../../lib/types";
+import { owningLane } from "../SessionResumeButton";
+import { sessionWorktreeName } from "../WorkspaceSessionList";
+
+const lane = (id: number, cwd: string) => ({ id, cwd, tool: "claude" }) as Lane;
+
+describe("session paths", () => {
+  it("finds the deepest owning workspace with either separator", () => {
+    const lanes = [lane(1, "D:\\Project"), lane(2, "D:\\Project\\Hobby\\"), lane(3, "/home/u/app")];
+    expect(owningLane("D:\\Project\\Hobby\\tri-vi-portfolio", "claude", lanes)?.id).toBe(2);
+    expect(owningLane("D:\\Project\\Hobby", "claude", lanes)?.id).toBe(2);
+    expect(owningLane("D:\\ProjectX", "claude", lanes)).toBeNull();
+    expect(owningLane("/home/u/app/src", "claude", lanes)?.id).toBe(3);
+  });
+
+  it("reads a worktree name from a Windows or POSIX session folder", () => {
+    const at = (cwd: string) => ({ cwd }) as Session;
+    expect(
+      sessionWorktreeName(lane(1, "D:\\repo"), at("D:\\repo\\.claude\\worktrees\\fix-a"))
+    ).toBe("fix-a");
+    expect(sessionWorktreeName(lane(1, "/r"), at("/r/.claude/worktrees/fix-b/"))).toBe("fix-b");
+    expect(sessionWorktreeName(lane(1, "D:\\repo"), at("D:\\repo\\"))).toBeNull();
+  });
+});

client/src/components/run/ConsoleTabs.tsx

@@ -14,7 +14,7 @@
  * toasts. The `+` menu opens a new tab in the free slot the server picks
  * (`slot: "auto"`) — a plain shell (`POST /api/lanes/:id/start {shell: true}`)
  * or an installed, enabled AI tool started bare on its default model, no
- * prompt (a prompt, router or worktree is still the workspace home's prompt
+ * prompt (a prompt, proxy or worktree is still the workspace home's prompt
  * box) — plus a link to Settings → Agents. Ten sessions is the server's limit
  * (`MAX_PANE_SLOT`). The bar is the console's only header: Home (the
  * workspace's home) at its left end, `actions` (the single pane's split menus)
@@ -51,13 +51,7 @@ import { AiToolIcon } from "../AiToolIcon";
 import { freeSlot, startInFreeTab } from "../lanes/startSession";
 import { PANE_DRAG_TYPE, RunIcon, startPaneDrag, type GroupsUpdate } from "./PaneGrid";
 import { insertionIndex } from "../../lib/laneOrderStorage";
-import {
-  type PaneGroups,
-  detachSlot,
-  groupOf,
-  leaves,
-  reorderGroups,
-} from "../../lib/paneLayout";
+import { type PaneGroups, detachSlot, groupOf, leaves, reorderGroups } from "../../lib/paneLayout";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 
 type AiToolsState = ReturnType<typeof useAiTools>;

client/src/components/run/PaneGrid.tsx

@@ -106,20 +106,27 @@ export function usePaneGroups(laneId: number | null): [PaneGroups, GroupsUpdate]
   return [current.groups, update];
 }
 
-type Zone = Edge | "center";
+export type Zone = Edge | "center";
 const pct = (r: Rect) => ({
   left: `${r.x * 100}%`,
   top: `${r.y * 100}%`,
   width: `${r.w * 100}%`,
   height: `${r.h * 100}%`,
 });
-/** The half (or the whole) of a pane a drop zone would fill. */
-function zoneRect(r: Rect, zone: Zone): Rect {
-  if (zone === "left") return { ...r, w: r.w / 2 };
-  if (zone === "right") return { ...r, x: r.x + r.w / 2, w: r.w / 2 };
-  if (zone === "top") return { ...r, h: r.h / 2 };
-  if (zone === "bottom") return { ...r, y: r.y + r.h / 2, h: r.h / 2 };
-  return r;
+/** What dropping `src` on a pane's zone does: the center swaps, an edge
+ *  splits. The drop applies it and the preview draws it, so they agree. */
+export function applyDrop(l: PaneLayout, src: number, slot: number, zone: Zone): PaneLayout {
+  return zone === "center" ? swapInLayout(l, src, slot) : moveInLayout(l, src, slot, zone);
+}
+
+/** Where `src` would land, or null for a drop that changes nothing. A pane
+ *  already shown leaves its place first, so its target grows before the
+ *  split — the target's own half is not where it lands. */
+export function dropPreview(l: PaneLayout, src: number, slot: number, zone: Zone): Rect | null {
+  if (src === slot) return null;
+  const next = applyDrop(l, src, slot, zone);
+  if (next === l) return null;
+  return layoutRects(next.root).panes.find((p) => p.slot === src) ?? null;
 }
 
 /** A small anchored menu: a trigger button and a list that closes on a pick,
@@ -323,7 +330,7 @@ export function PaneGrid({
 }) {
   const { t } = useTranslation("lanes");
   const gridRef = useRef<HTMLDivElement>(null);
-  const [drop, setDrop] = useState<{ slot: number; zone: Zone } | null>(null);
+  const [drop, setDrop] = useState<{ src: number; slot: number; zone: Zone } | null>(null);
   const { panes, dividers } = layoutRects(layout.root);
   const shown = leaves(layout.root);
   const rectOf = new Map(panes.map((p) => [p.slot, p]));
@@ -391,6 +398,8 @@ export function PaneGrid({
     return { slot: p.slot, zone: dist < 0.25 ? edge : "center" };
   };
 
+  const preview = drop && dropPreview(layout, drop.src, drop.slot, drop.zone);
+
   const isPaneDrag = (e: React.DragEvent) =>
     dragSlot !== null || !!e.dataTransfer?.types?.includes(PANE_DRAG_TYPE);
 
@@ -404,7 +413,10 @@ export function PaneGrid({
         e.preventDefault();
         if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
         const z = zoneAt(e);
-        setDrop((d) => (d?.slot === z?.slot && d?.zone === z?.zone ? d : z));
+        const next = z && dragSlot !== null ? { src: dragSlot, ...z } : null;
+        setDrop((d) =>
+          d?.src === next?.src && d?.slot === next?.slot && d?.zone === next?.zone ? d : next
+        );
       }}
       onDragLeave={(e) => {
         if (!gridRef.current?.contains(e.relatedTarget as Node | null)) setDrop(null);
@@ -417,11 +429,7 @@ export function PaneGrid({
         dragSlot = null;
         setDrop(null);
         if (!z || !Number.isInteger(src) || src === z.slot) return;
-        onChange((l) =>
-          z.zone === "center"
-            ? swapInLayout(l, src, z.slot)
-            : moveInLayout(l, src, z.slot, z.zone as Edge)
-        );
+        onChange((l) => applyDrop(l, src, z.slot, z.zone));
       }}
     >
       {mounted.map((slot) => {
@@ -561,11 +569,11 @@ export function PaneGrid({
           }
         />
       ))}
-      {drop && rectOf.has(drop.slot) && (
+      {preview && (
         <div
           data-testid="pane-drop-preview"
           className="pointer-events-none absolute z-20 rounded-md border-2 border-accent/60 bg-accent/15 transition-all duration-100"
-          style={pct(zoneRect(rectOf.get(drop.slot) as Rect, drop.zone))}
+          style={pct(preview)}
         />
       )}
     </div>

client/src/components/run/ProxyPicker.tsx

@@ -0,0 +1,104 @@
+/**
+ * @file ProxyPicker.tsx
+ * @description The AI Proxy a NEW session starts on — a session's choice, not
+ * its workspace's (`proxy` on `POST /api/lanes/:id/start`, `server/lib/proxy-apply.js`):
+ * Native or one of the saved profiles (`useAiProxies`, which the caller also
+ * reads to list the proxy's models). A tool that cannot use a proxy (only
+ * Claude and Codex can) shows Native, disabled. The last pick is remembered
+ * for the next session (`agenthub.session.proxy`; the pre-rename
+ * `agenthub.session.router` is still read when that is unset).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type AiProxy } from "../../lib/api";
+import { useAiTools } from "../../hooks/useAiTools";
+import { Select } from "../Select";
+
+const KEY = "agenthub.session.proxy";
+const LEGACY_KEY = "agenthub.session.router";
+
+/** The remembered pick, `"native"` by default. */
+export function useSessionProxy(): [string, (v: string) => void] {
+  const [value, setValue] = useState(() => {
+    try {
+      return localStorage.getItem(KEY) || localStorage.getItem(LEGACY_KEY) || "native";
+    } catch {
+      return "native";
+    }
+  });
+  const set = (v: string) => {
+    setValue(v);
+    try {
+      localStorage.setItem(KEY, v);
+    } catch {
+      /* storage off — the pick still holds for this page */
+    }
+  };
+  return [value, set];
+}
+
+/** The saved profiles (Native included), null until they arrive. */
+export function useAiProxies(): AiProxy[] | null {
+  const [proxies, setProxies] = useState<AiProxy[] | null>(null);
+  useEffect(() => {
+    let alive = true;
+    api.aiProxies
+      .list()
+      .then((r) => alive && setProxies(r.items))
+      .catch(() => alive && setProxies([]));
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return proxies;
+}
+
+/** What to send as `proxy` for `tool`: nothing for native or a tool that has none. */
+export function proxyArg(proxyCapable: boolean | undefined, proxy: string): { proxy?: string } {
+  return proxyCapable && proxy && proxy !== "native" ? { proxy } : {};
+}
+
+export function ProxyPicker({
+  tool,
+  proxies,
+  value,
+  onChange,
+  variant,
+}: {
+  variant?: "field" | "ghost";
+  tool: string;
+  /** From `useAiProxies`. */
+  proxies: AiProxy[] | null;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const aiTools = useAiTools();
+  const capable = aiTools.byId(tool)?.proxyCapable ?? (tool === "claude" || tool === "codex");
+  const native = t("proxy.native", { tool: aiTools.label(tool) });
+
+  // A remembered profile that has since been deleted falls back to native,
+  // or the start would be refused for a proxy the user cannot see.
+  useEffect(() => {
+    if (proxies && value !== "native" && !proxies.some((r) => r.name === value)) onChange("native");
+  }, [proxies, value, onChange]);
+
+  const options =
+    capable && proxies?.length
+      ? proxies.map((r) => ({ value: r.name, label: r.builtin ? native : r.label }))
+      : [{ value: "native", label: native }];
+  return (
+    <div data-testid="proxy-picker">
+      <Select<string>
+        value={capable ? value : "native"}
+        onChange={onChange}
+        options={options}
+        disabled={!capable}
+        variant={variant}
+        label={t("proxy.label")}
+      />
+    </div>
+  );
+}

client/src/components/run/RouterPicker.tsx

@@ -1,102 +0,0 @@
-/**
- * @file RouterPicker.tsx
- * @description The AI Router a NEW session starts on — a session's choice, not
- * its workspace's (`router` on `POST /api/lanes/:id/start`, `server/lib/router-apply.js`):
- * Native or one of the saved profiles (`useAiRouters`, which the caller also
- * reads to list the router's models). A tool that cannot use a router (only
- * Claude and Codex can) shows Native, disabled. The last pick is remembered
- * for the next session (`agenthub.session.router`).
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { api, type AiRouter } from "../../lib/api";
-import { useAiTools } from "../../hooks/useAiTools";
-import { Select } from "../Select";
-
-const KEY = "agenthub.session.router";
-
-/** The remembered pick, `"native"` by default. */
-export function useSessionRouter(): [string, (v: string) => void] {
-  const [value, setValue] = useState(() => {
-    try {
-      return localStorage.getItem(KEY) || "native";
-    } catch {
-      return "native";
-    }
-  });
-  const set = (v: string) => {
-    setValue(v);
-    try {
-      localStorage.setItem(KEY, v);
-    } catch {
-      /* storage off — the pick still holds for this page */
-    }
-  };
-  return [value, set];
-}
-
-/** The saved profiles (Native included), null until they arrive. */
-export function useAiRouters(): AiRouter[] | null {
-  const [routers, setRouters] = useState<AiRouter[] | null>(null);
-  useEffect(() => {
-    let alive = true;
-    api.aiRouters
-      .list()
-      .then((r) => alive && setRouters(r.items))
-      .catch(() => alive && setRouters([]));
-    return () => {
-      alive = false;
-    };
-  }, []);
-  return routers;
-}
-
-/** What to send as `router` for `tool`: nothing for native or a tool that has none. */
-export function routerArg(routerCapable: boolean | undefined, router: string): { router?: string } {
-  return routerCapable && router && router !== "native" ? { router } : {};
-}
-
-export function RouterPicker({
-  tool,
-  routers,
-  value,
-  onChange,
-  variant,
-}: {
-  variant?: "field" | "ghost";
-  tool: string;
-  /** From `useAiRouters`. */
-  routers: AiRouter[] | null;
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  const { t } = useTranslation(["lanes"]);
-  const aiTools = useAiTools();
-  const capable = aiTools.byId(tool)?.routerCapable ?? (tool === "claude" || tool === "codex");
-  const native = t("router.native", { tool: aiTools.label(tool) });
-
-  // A remembered profile that has since been deleted falls back to native,
-  // or the start would be refused for a router the user cannot see.
-  useEffect(() => {
-    if (routers && value !== "native" && !routers.some((r) => r.name === value)) onChange("native");
-  }, [routers, value, onChange]);
-
-  const options =
-    capable && routers?.length
-      ? routers.map((r) => ({ value: r.name, label: r.builtin ? native : r.label }))
-      : [{ value: "native", label: native }];
-  return (
-    <div data-testid="router-picker">
-      <Select<string>
-        value={capable ? value : "native"}
-        onChange={onChange}
-        options={options}
-        disabled={!capable}
-        variant={variant}
-        label={t("router.label")}
-      />
-    </div>
-  );
-}

client/src/components/run/RunSetup.tsx

@@ -10,7 +10,7 @@
  *     (`POST /api/run/drop-image`);
  *   - `CwdAutocomplete` — the folder field the Add-workspace modal uses;
  *   - `ModelPicker` — a tool's own model list (`GET /api/ai-tools/:id/models`)
- *     or a fixed one (an AI Router's models), plus Custom…;
+ *     or a fixed one (an AI Proxy's models), plus Custom…;
  *   - `ModelMenu` — the same list as ONE composer chip, Claude Desktop's
  *     "Sonnet 5.5 · Medium": the main models with their hints, the rest under
  *     More models, Custom…, and the Effort slider (Faster → Smarter, a reset
@@ -671,7 +671,7 @@ const MODEL_CUSTOM = "__custom__";
 /**
  * The models `tool` can start on, the inherit entry (`""`) first: the tool's
  * own list (Codex's models cache, Claude's aliases named after the newest
- * version, a catalog tool's vendor rows), or `fixed` (a router's models);
+ * version, a catalog tool's vendor rows), or `fixed` (a proxy's models);
  * Claude's static aliases only when the server cannot answer. `loaded` once
  * the list is final.
  */
@@ -707,7 +707,7 @@ export function ModelPicker({
   value: string;
   onChange: (s: string) => void;
   tool: LaneTool;
-  /** A fixed list instead of the tool's own — an AI Router's models. */
+  /** A fixed list instead of the tool's own — an AI Proxy's models. */
   choices?: ModelChoice[];
   variant?: "field" | "ghost";
 }) {
@@ -781,7 +781,7 @@ export function ModelMenu({
   value: string;
   onChange: (s: string) => void;
   tool: LaneTool;
-  /** A fixed list instead of the tool's own — an AI Router's models. */
+  /** A fixed list instead of the tool's own — an AI Proxy's models. */
   choices?: ModelChoice[];
   /** Omitted for a tool that takes no effort. */
   effort?: EffortLevel;

client/src/components/run/__tests__/LaneConsolePane.test.tsx

@@ -31,7 +31,7 @@ vi.mock("../../../lib/api", () => ({
       action: vi.fn(),
       list: vi.fn(),
     },
-    aiRouters: { list: vi.fn().mockResolvedValue({ items: [] }) },
+    aiProxies: { list: vi.fn().mockResolvedValue({ items: [] }) },
     aiTools: {
       list: vi.fn().mockResolvedValue({ default: "claude", tools: [] }),
       models: vi.fn().mockResolvedValue({ flag: true, models: [], defaultModel: null }),

client/src/components/run/__tests__/PaneGrid.test.ts

@@ -0,0 +1,36 @@
+/**
+ * @file PaneGrid.test.ts
+ * @description The pane drop preview: it draws where the dragged pane will
+ * actually land (`dropPreview` over `applyDrop`), not half of the target's
+ * current box, and nothing for a drop that changes nothing.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it } from "vitest";
+import { dropPreview } from "../PaneGrid";
+import { pane, split, type PaneLayout } from "../../../lib/paneLayout";
+
+const AB: PaneLayout = { root: split("row", pane(0), pane(1)), focus: 0 };
+
+describe("dropPreview", () => {
+  it("a shown pane leaves its place first: A onto B's top is the whole top half", () => {
+    expect(dropPreview(AB, 0, 1, "top")).toEqual({ slot: 0, x: 0, y: 0, w: 1, h: 0.5 });
+  });
+
+  it("a pane from another tab splits the target's current box", () => {
+    expect(dropPreview(AB, 2, 1, "bottom")).toEqual({ slot: 2, x: 0.5, y: 0.5, w: 0.5, h: 0.5 });
+  });
+
+  it("the center swaps into the target's box", () => {
+    expect(dropPreview(AB, 0, 1, "center")).toEqual({ slot: 0, x: 0.5, y: 0, w: 0.5, h: 1 });
+  });
+
+  it("nothing on its own pane or on a refused move", () => {
+    expect(dropPreview(AB, 0, 0, "left")).toBeNull();
+    const full: PaneLayout = {
+      root: split("row", split("col", pane(0), pane(1)), split("col", pane(2), pane(3))),
+      focus: 0,
+    };
+    expect(dropPreview(full, 5, 0, "left")).toBeNull();
+  });
+});

client/src/components/run/__tests__/ProxyPicker.test.tsx

@@ -1,16 +1,16 @@
 /**
- * @file RouterPicker.test.tsx
- * @description The per-session AI Router picker: Native plus the saved
- * profiles, Native alone and disabled on a tool that cannot use a router,
+ * @file ProxyPicker.test.tsx
+ * @description The per-session AI Proxy picker: Native plus the saved
+ * profiles, Native alone and disabled on a tool that cannot use a proxy,
  * remembering the pick, and falling back to Native when the remembered
- * profile is gone; plus `routerArg`, which never sends native.
+ * profile is gone; plus `proxyArg`, which never sends native.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { act, render, renderHook, screen, waitFor } from "@testing-library/react";
-import type { AiRouter } from "../../../lib/api";
+import type { AiProxy } from "../../../lib/api";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { RouterPicker, routerArg, useAiRouters, useSessionRouter } from "../RouterPicker";
+import { ProxyPicker, proxyArg, useAiProxies, useSessionProxy } from "../ProxyPicker";
 import { api } from "../../../lib/api";
 
 vi.mock("../../../lib/api", async (importOriginal) => {
@@ -22,67 +22,72 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         list: vi.fn().mockResolvedValue({
           default: "claude",
           tools: [
-            { id: "claude", label: "Claude Code", routerCapable: true },
-            { id: "gemini", label: "Gemini", routerCapable: false },
+            { id: "claude", label: "Claude Code", proxyCapable: true },
+            { id: "gemini", label: "Gemini", proxyCapable: false },
           ].map((x) => ({ ...x, installed: true, enabled: true })),
         }),
       },
-      aiRouters: { list: vi.fn() },
+      aiProxies: { list: vi.fn() },
     },
   };
 });
 
-const native = { name: "native", label: "Native", builtin: true } as AiRouter;
-const nine = { name: "9router", label: "9Router", builtin: false } as AiRouter;
+const native = { name: "native", label: "Native", builtin: true } as AiProxy;
+const nine = { name: "9router", label: "9Router", builtin: false } as AiProxy;
 
 beforeEach(() => {
   localStorage.clear();
-  vi.mocked(api.aiRouters.list)
+  vi.mocked(api.aiProxies.list)
     .mockReset()
     .mockResolvedValue({ items: [native, nine] } as never);
 });
 
-describe("RouterPicker", () => {
+describe("ProxyPicker", () => {
   it("lists the saved profiles for a tool that can use one", async () => {
     render(
-      <RouterPicker tool="claude" routers={[native, nine]} value="9router" onChange={() => {}} />
+      <ProxyPicker tool="claude" proxies={[native, nine]} value="9router" onChange={() => {}} />
     );
     expect(await screen.findByText("9Router")).toBeInTheDocument();
   });
 
-  it("shows Native, disabled, on a tool with no endpoint to point at a router", () => {
+  it("shows Native, disabled, on a tool with no endpoint to point at a proxy", () => {
     render(
-      <RouterPicker tool="gemini" routers={[native, nine]} value="9router" onChange={() => {}} />
+      <ProxyPicker tool="gemini" proxies={[native, nine]} value="9router" onChange={() => {}} />
     );
-    const picker = screen.getByTestId("router-picker");
+    const picker = screen.getByTestId("proxy-picker");
     expect(picker.querySelector("button")).toBeDisabled();
     expect(picker).not.toHaveTextContent("9Router");
   });
 
   it("falls back to Native when the remembered profile is gone", async () => {
     const onChange = vi.fn();
-    render(<RouterPicker tool="claude" routers={[native]} value="deleted" onChange={onChange} />);
+    render(<ProxyPicker tool="claude" proxies={[native]} value="deleted" onChange={onChange} />);
     await waitFor(() => expect(onChange).toHaveBeenCalledWith("native"));
   });
 
-  it("useAiRouters reads the saved profiles once", async () => {
-    const { result } = renderHook(() => useAiRouters());
+  it("useAiProxies reads the saved profiles once", async () => {
+    const { result } = renderHook(() => useAiProxies());
     await waitFor(() => expect(result.current).toEqual([native, nine]));
-    expect(api.aiRouters.list).toHaveBeenCalledTimes(1);
+    expect(api.aiProxies.list).toHaveBeenCalledTimes(1);
   });
 });
 
-describe("useSessionRouter / routerArg", () => {
+describe("useSessionProxy / proxyArg", () => {
   it("remembers the last pick for the next session", () => {
-    const first = renderHook(() => useSessionRouter());
+    const first = renderHook(() => useSessionProxy());
     expect(first.result.current[0]).toBe("native");
     act(() => first.result.current[1]("9router"));
-    expect(renderHook(() => useSessionRouter()).result.current[0]).toBe("9router");
+    expect(renderHook(() => useSessionProxy()).result.current[0]).toBe("9router");
   });
 
-  it("sends a router only for a capable tool and never native", () => {
-    expect(routerArg(true, "9router")).toEqual({ router: "9router" });
-    expect(routerArg(true, "native")).toEqual({});
-    expect(routerArg(false, "9router")).toEqual({});
+  it("still reads the pick remembered before the rename", () => {
+    localStorage.setItem("agenthub.session.router", "9router");
+    expect(renderHook(() => useSessionProxy()).result.current[0]).toBe("9router");
+  });
+
+  it("sends a proxy only for a capable tool and never native", () => {
+    expect(proxyArg(true, "9router")).toEqual({ proxy: "9router" });
+    expect(proxyArg(true, "native")).toEqual({});
+    expect(proxyArg(false, "9router")).toEqual({});
   });
 });

client/src/components/run/__tests__/RunSetup.test.tsx

@@ -4,7 +4,7 @@
  * `PromptEditor`'s `/` and `@` autocomplete (Enter picks while the list is
  * open, `/` only where slash commands apply), Shift/Alt+Enter newlines, a
  * pasted image shown as a thumbnail and sent as its saved path, and `ModelPicker` — a tool's own
- * list from the server, a fixed list (an AI Router's models) when given one,
+ * list from the server, a fixed list (an AI Proxy's models) when given one,
  * and Custom…, which is a sentinel, never a model id — and `ModelMenu`, the
  * same list as one chip: aliases up front, pinned versions under More models,
  * plus the effort slider.
@@ -211,7 +211,7 @@ describe("ModelPicker", () => {
     expect(await screen.findByText("GPT-6-Sol")).toBeTruthy();
   });
 
-  it("offers only a fixed list when given one (an AI Router's models)", async () => {
+  it("offers only a fixed list when given one (an AI Proxy's models)", async () => {
     render(
       <ModelPicker
         value=""

client/src/components/settings/AutostartSettings.tsx

@@ -0,0 +1,58 @@
+/**
+ * @file AutostartSettings — Settings → About's "Start automatically" switch:
+ * whether the dashboard starts at boot/login through the per-user service
+ * (systemd `--user` unit, or a LaunchAgent on macOS), over
+ * `GET/PUT /api/settings/autostart`. Off by default; a change never starts or
+ * stops the running server.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type AutostartStatus } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function AutostartSettings() {
+  const { t } = useTranslation("settings");
+  const [status, setStatus] = useState<AutostartStatus | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    api.settings.autostart
+      .get()
+      .then(setStatus)
+      .catch(() => {});
+  }, []);
+
+  const change = async (enabled: boolean) => {
+    setSaving(true);
+    try {
+      setStatus(await api.settings.autostart.set(enabled));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const note = !status
+    ? undefined
+    : !status.available
+      ? t("autostart.unavailable")
+      : status.foreign
+        ? t("autostart.foreign")
+        : t(`autostart.desc_${status.kind}`);
+
+  return (
+    <SettingsSection id="autostart" title={t("autostart.title")}>
+      <SettingsSwitchRow
+        label={t("autostart.label")}
+        description={note}
+        checked={!!status?.enabled}
+        disabled={!status?.available || status.foreign || saving}
+        onChange={(v) => void change(v)}
+      />
+    </SettingsSection>
+  );
+}

client/src/components/settings/PricingSettings.tsx

@@ -4,7 +4,7 @@
  * computed from — as shown on a tool's Settings tab (Overview for Claude Code
  * and Codex, the Antigravity tab itself): Claude
  * Code's shows `claude-…` rows, Codex's shows OpenAI rows (`gpt-…`, `o<n>…`,
- * `codex-…`), Antigravity's Gemini rows (`gemini-…`). It is ONE table (a router model can serve either tool), so a
+ * `codex-…`), Antigravity's Gemini rows (`gemini-…`). It is ONE table (a proxy model can serve either tool), so a
  * **Show all models** switch lists every row, and a row added outside the
  * filter turns it on rather than vanishing. Reset Defaults reseeds Claude's
  * rates, so only the Claude tab offers it; the server re-fetches any row the

client/src/components/settings/PrivacySettings.tsx

@@ -0,0 +1,111 @@
+/**
+ * @file PrivacySettings.tsx
+ * @description Settings → Data → Privacy: the two opt-in ingest controls of
+ * `server/lib/privacy.js` — redact secrets (API keys, tokens, bearer headers,
+ * private keys, `password=…`) from the payloads and summaries AgentHub stores,
+ * and a list of folders whose hooks are dropped whole (one absolute path per
+ * line; a folder and everything under it). Both persist through
+ * `PUT /api/settings/privacy`; one the environment set is shown read-only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AlertTriangle, ShieldCheck } from "lucide-react";
+import { api } from "../../lib/api";
+import type { PrivacySettings as PrivacyState } from "../../lib/api";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+const lines = (text: string) =>
+  text
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean);
+
+export function PrivacySettings() {
+  const { t } = useTranslation("settings");
+  const [state, setState] = useState<PrivacyState | null>(null);
+  const [draft, setDraft] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const apply = (s: PrivacyState) => {
+    setState(s);
+    setDraft(s.ignore_cwd.join("\n"));
+  };
+
+  useEffect(() => {
+    api.settings.privacy
+      .get()
+      .then(apply)
+      .catch(() => undefined);
+  }, []);
+
+  async function save(patch: { redact_secrets?: boolean; ignore_cwd?: string[] }) {
+    setSaving(true);
+    setError(null);
+    try {
+      apply(await api.settings.privacy.save(patch));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const listChanged = !!state && lines(draft).join("\n") !== state.ignore_cwd.join("\n");
+
+  return (
+    <div id="privacy" className="scroll-mt-24">
+      <SettingsSection
+        title={
+          <span className="flex items-center gap-2">
+            <ShieldCheck className="w-4 h-4 text-fg-muted" />
+            {t("privacy.title")}
+          </span>
+        }
+        description={t("privacy.description")}
+      >
+        <SettingsSwitchRow
+          label={t("privacy.redact")}
+          description={t("privacy.redactHint")}
+          checked={!!state?.redact_secrets}
+          disabled={!state || saving || state.env_owned.redact_secrets}
+          onChange={(v) => void save({ redact_secrets: v })}
+        />
+        <div className="py-3 space-y-2">
+          <label htmlFor="privacy-ignore" className="block text-sm text-fg-secondary">
+            {t("privacy.ignore")}
+          </label>
+          <p className="text-xs text-fg-muted">{t("privacy.ignoreHint")}</p>
+          <textarea
+            id="privacy-ignore"
+            className="input w-full font-mono text-xs min-h-[72px]"
+            placeholder={"/home/you/clients/secret-project\n~/private"}
+            value={draft}
+            disabled={!state || state.env_owned.ignore_cwd}
+            onChange={(e) => {
+              setDraft(e.target.value);
+              setError(null);
+            }}
+          />
+          <button
+            type="button"
+            className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled={saving || !listChanged}
+            onClick={() => void save({ ignore_cwd: lines(draft) })}
+          >
+            {saving ? t("homeDir.saving") : t("homeDir.save")}
+          </button>
+          {error && <p className="text-xs text-status-danger">{error}</p>}
+          {(state?.env_owned.redact_secrets || state?.env_owned.ignore_cwd) && (
+            <p className="text-xs text-status-warning flex items-start gap-1.5">
+              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-px" />
+              {t("privacy.envOwned")}
+            </p>
+          )}
+        </div>
+      </SettingsSection>
+    </div>
+  );
+}

client/src/components/settings/PushIngestSettings.tsx

@@ -0,0 +1,170 @@
+/**
+ * @file PushIngestSettings.tsx
+ * @description Settings → Data → Push ingest: the bearer token that opens
+ * `POST /api/hooks/ingest-batch`, for a machine this dashboard cannot reach
+ * over SSH, so the machine pushes its hooks instead. Off until a token is
+ * created; the token is shown once, right after it is made (only its hash is
+ * stored), and can be rotated or revoked. Also shows a forwarder script for
+ * the other machine — its token in a header file, never on a command line.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AlertTriangle, Copy, KeyRound, RefreshCw, Trash2 } from "lucide-react";
+import { api } from "../../lib/api";
+import type { PushTokenStatus } from "../../lib/api";
+import { ConfirmModal } from "../ConfirmModal";
+import { SettingsSection } from "./SettingsRow";
+
+const copyText = (text: string) => navigator.clipboard?.writeText(text).catch(() => undefined);
+
+/** The forwarder for the pushing machine; `origin` is how it reaches this dashboard. */
+function forwarder(origin: string) {
+  return `#!/bin/sh
+# ~/.claude/agenthub-push.sh <HookEvent> — a Claude Code hook command:
+#   "command": "sh ~/.claude/agenthub-push.sh PreToolUse"
+# ~/.claude/agenthub-push.header (chmod 600) holds one line:
+#   Authorization: Bearer <token>
+jq -c --arg t "$1" --arg s "$(hostname -s)" \\
+  '{source: $s, events: [{hook_type: $t, data: .}]}' |
+  curl -s -m 5 -o /dev/null -X POST "${origin}/api/hooks/ingest-batch" \\
+    -H "@$HOME/.claude/agenthub-push.header" \\
+    -H "Content-Type: application/json" --data-binary @-
+exit 0`;
+}
+
+export function PushIngestSettings() {
+  const { t } = useTranslation("settings");
+  const [status, setStatus] = useState<PushTokenStatus | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Rotating a live token or revoking one asks first.
+  const [confirm, setConfirm] = useState<"rotate" | "revoke" | null>(null);
+
+  useEffect(() => {
+    api.settings.pushToken
+      .get()
+      .then(setStatus)
+      .catch(() => undefined);
+  }, []);
+
+  async function run(fn: () => Promise<void>) {
+    setConfirm(null);
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+  const rotate = () =>
+    run(async () => {
+      const r = await api.settings.pushToken.rotate();
+      setToken(r.token);
+      setStatus({ enabled: r.enabled, env_owned: r.env_owned });
+    });
+  const revoke = () =>
+    run(async () => {
+      setStatus(await api.settings.pushToken.revoke());
+      setToken(null);
+    });
+
+  const script = forwarder(window.location.origin);
+
+  return (
+    <div id="push-ingest" className="scroll-mt-24">
+      <SettingsSection
+        title={
+          <span className="flex items-center gap-2">
+            <KeyRound className="w-4 h-4 text-fg-muted" />
+            {t("pushIngest.title")}
+          </span>
+        }
+        description={t("pushIngest.description")}
+      >
+        <div className="space-y-3 py-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <span
+              className={`text-xs ${status?.enabled ? "text-status-success" : "text-fg-muted"}`}
+            >
+              {status?.enabled ? t("pushIngest.on") : t("pushIngest.off")}
+            </span>
+            <button
+              type="button"
+              className="btn-primary text-xs disabled:opacity-40"
+              disabled={busy || !status || status.env_owned}
+              onClick={() => (status?.enabled ? setConfirm("rotate") : void rotate())}
+            >
+              <RefreshCw className="w-3.5 h-3.5" />
+              {status?.enabled ? t("pushIngest.rotate") : t("pushIngest.create")}
+            </button>
+            {status?.enabled && (
+              <button
+                type="button"
+                className="btn-ghost text-xs text-status-danger disabled:opacity-40"
+                disabled={busy || status.env_owned}
+                onClick={() => setConfirm("revoke")}
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+                {t("pushIngest.revoke")}
+              </button>
+            )}
+          </div>
+          {token && (
+            <div className="rounded-lg border border-status-warning/25 bg-status-warning/10 p-3 space-y-2">
+              <p className="text-xs text-status-warning">{t("pushIngest.shownOnce")}</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 min-w-0 break-all text-xs text-fg-primary">{token}</code>
+                <button
+                  type="button"
+                  className="btn-ghost text-xs"
+                  title={t("pushIngest.copy")}
+                  onClick={() => void copyText(token)}
+                >
+                  <Copy className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          )}
+          {status?.env_owned && (
+            <p className="text-xs text-status-warning flex items-start gap-1.5">
+              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-px" />
+              {t("pushIngest.envOwned")}
+            </p>
+          )}
+          <p className="text-xs text-fg-muted">{t("pushIngest.reachHint")}</p>
+          <div className="relative">
+            <pre className="text-[11px] font-mono bg-surface-1 border border-border rounded-lg p-3 overflow-x-auto text-fg-secondary">
+              {script}
+            </pre>
+            <button
+              type="button"
+              className="btn-ghost text-xs absolute top-1.5 right-1.5"
+              title={t("pushIngest.copy")}
+              onClick={() => void copyText(script)}
+            >
+              <Copy className="w-3.5 h-3.5" />
+            </button>
+          </div>
+          <p className="text-xs text-fg-muted">{t("pushIngest.limits")}</p>
+          {error && <p className="text-xs text-status-danger">{error}</p>}
+        </div>
+        <ConfirmModal
+          open={confirm !== null}
+          title={t(confirm === "revoke" ? "pushIngest.revokeConfirm" : "pushIngest.rotateConfirm")}
+          confirmLabel={t(confirm === "revoke" ? "pushIngest.revoke" : "pushIngest.rotate")}
+          cancelLabel={t("common:cancel")}
+          destructive={confirm === "revoke"}
+          busy={busy}
+          onConfirm={() => void (confirm === "revoke" ? revoke() : rotate())}
+          onCancel={() => setConfirm(null)}
+        />
+      </SettingsSection>
+    </div>
+  );
+}

client/src/components/settings/ReportSettings.tsx

@@ -0,0 +1,394 @@
+/**
+ * @file ReportSettings.tsx
+ * @description Settings → Reports: scheduled report definitions (`/api/reports`)
+ * — create/edit (name, window, daily/weekly + weekday, local hour, HTML/JSON),
+ * enable switch, Run now, a confirmed Delete, and each report's run history
+ * with download links. Every row action is also on a right-click menu. The
+ * browser's timezone offset is saved with the definition, so its hour is the
+ * user's local hour.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Download, History, Pencil, Play, Plus, Trash2 } from "lucide-react";
+import { api } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import type { ReportDefinition, ReportInput, ReportRun } from "../../lib/types";
+import { Checkbox } from "../Checkbox";
+import { ConfirmModal } from "../ConfirmModal";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { Select } from "../Select";
+import { Switch } from "../Switch";
+import { SettingsSection } from "./SettingsRow";
+
+const EMPTY: ReportInput = {
+  name: "",
+  window_days: 7,
+  frequency: "weekly",
+  hour: 8,
+  weekday: 1,
+  tz_offset: 0,
+  formats: ["html"],
+  enabled: true,
+};
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+const pad = (n: number) => String(n).padStart(2, "0");
+
+export function ReportSettings() {
+  const { t, i18n } = useTranslation("settings");
+  const [items, setItems] = useState<ReportDefinition[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  /** The form: a new report (id null) or the one being edited. */
+  const [form, setForm] = useState<{ id: number | null; value: ReportInput } | null>(null);
+  const [deleting, setDeleting] = useState<ReportDefinition | null>(null);
+  const [busy, setBusy] = useState<number | "form" | null>(null);
+  const [history, setHistory] = useState<{ id: number; runs: ReportRun[] } | null>(null);
+  const ctx = useContextMenu<ReportDefinition>();
+
+  const weekday = (d: number) =>
+    new Intl.DateTimeFormat(i18n.resolvedLanguage ?? i18n.language, { weekday: "long" }).format(
+      new Date(Date.UTC(2026, 0, 4 + d))
+    );
+  const fail = (err: unknown) => setError(err instanceof Error ? err.message : String(err));
+
+  const load = useCallback(() => {
+    api.reports
+      .list()
+      .then((r) => setItems(r.reports))
+      .catch(fail);
+  }, []);
+  useEffect(load, [load]);
+
+  const showHistory = async (id: number) => {
+    try {
+      const r = await api.reports.runs(id);
+      setHistory({ id, runs: r.runs });
+    } catch (err) {
+      fail(err);
+    }
+  };
+
+  const save = async () => {
+    if (!form) return;
+    setBusy("form");
+    const value = { ...form.value, tz_offset: new Date().getTimezoneOffset() };
+    try {
+      if (form.id === null) await api.reports.create(value);
+      else await api.reports.update(form.id, value);
+      setForm(null);
+      setError(null);
+      load();
+    } catch (err) {
+      fail(err);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const toggle = async (r: ReportDefinition, enabled: boolean) => {
+    try {
+      await api.reports.update(r.id, { enabled });
+      load();
+    } catch (err) {
+      fail(err);
+    }
+  };
+
+  const runNow = async (r: ReportDefinition) => {
+    setBusy(r.id);
+    try {
+      const { run } = await api.reports.run(r.id);
+      if (run.status === "error") setError(run.error);
+      load();
+      if (history?.id === r.id) await showHistory(r.id);
+    } catch (err) {
+      fail(err);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const remove = async () => {
+    if (!deleting) return;
+    try {
+      await api.reports.remove(deleting.id);
+      if (history?.id === deleting.id) setHistory(null);
+      load();
+    } catch (err) {
+      fail(err);
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  const edit = (r: ReportDefinition) =>
+    setForm({
+      id: r.id,
+      value: {
+        name: r.name,
+        window_days: r.window_days,
+        frequency: r.frequency,
+        hour: r.hour,
+        weekday: r.weekday,
+        tz_offset: r.tz_offset,
+        formats: r.formats,
+        enabled: r.enabled,
+      },
+    });
+  const pick = (fn: (r: ReportDefinition) => void) => () => {
+    const r = ctx.menu?.item;
+    ctx.close();
+    if (r) fn(r);
+  };
+  const schedule = (r: ReportInput) =>
+    [
+      r.frequency === "daily"
+        ? t("reports.everyDay", { time: `${pad(r.hour)}:00` })
+        : t("reports.everyWeek", { day: weekday(r.weekday), time: `${pad(r.hour)}:00` }),
+      t("reports.window", { count: r.window_days }),
+      r.formats.map((f) => f.toUpperCase()).join(", "),
+    ].join(" · ");
+
+  const set = (patch: Partial<ReportInput>) =>
+    setForm((f) => (f ? { ...f, value: { ...f.value, ...patch } } : f));
+  const toggleFormat = (f: "html" | "json", on: boolean) =>
+    set({
+      formats: on
+        ? [...(form?.value.formats ?? []), f]
+        : (form?.value.formats ?? []).filter((x) => x !== f),
+    });
+
+  return (
+    <SettingsSection title={t("reports.title")} description={t("reports.description")}>
+      {error && (
+        <p role="alert" className="py-2 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+
+      {form ? (
+        <div
+          className="my-2 space-y-3 rounded-md border border-border p-3"
+          data-testid="report-form"
+        >
+          <label className="block text-xs text-fg-muted">
+            {t("reports.name")}
+            <input
+              className="input mt-1 w-full text-sm"
+              value={form.value.name}
+              maxLength={200}
+              onChange={(e) => set({ name: e.target.value })}
+            />
+          </label>
+          <div className="flex flex-wrap items-end gap-3">
+            <label className="text-xs text-fg-muted">
+              {t("reports.windowDays")}
+              <input
+                type="number"
+                min={1}
+                max={366}
+                className="input mt-1 block w-24 text-sm"
+                value={form.value.window_days}
+                onChange={(e) => set({ window_days: Math.trunc(Number(e.target.value)) })}
+              />
+            </label>
+            <div className="w-36">
+              <Select
+                value={form.value.frequency}
+                onChange={(v) => set({ frequency: v })}
+                label={t("reports.frequency")}
+                options={[
+                  { value: "daily", label: t("reports.daily") },
+                  { value: "weekly", label: t("reports.weekly") },
+                ]}
+              />
+            </div>
+            {form.value.frequency === "weekly" && (
+              <div className="w-40">
+                <Select
+                  value={String(form.value.weekday)}
+                  onChange={(v) => set({ weekday: Number(v) })}
+                  label={t("reports.weekday")}
+                  options={[1, 2, 3, 4, 5, 6, 0].map((d) => ({
+                    value: String(d),
+                    label: weekday(d),
+                  }))}
+                />
+              </div>
+            )}
+            <div className="w-28">
+              <Select
+                value={String(form.value.hour)}
+                onChange={(v) => set({ hour: Number(v) })}
+                label={t("reports.hour")}
+                options={HOURS.map((h) => ({ value: String(h), label: `${pad(h)}:00` }))}
+              />
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-4">
+            <Checkbox
+              checked={form.value.formats.includes("html")}
+              onChange={(v) => toggleFormat("html", v)}
+              label="HTML"
+            />
+            <Checkbox
+              checked={form.value.formats.includes("json")}
+              onChange={(v) => toggleFormat("json", v)}
+              label="JSON"
+            />
+          </div>
+          <p className="text-[11px] text-fg-muted">{t("reports.windowHint")}</p>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              className="btn-primary text-xs"
+              disabled={
+                busy === "form" || !form.value.name.trim() || form.value.formats.length === 0
+              }
+              onClick={() => void save()}
+            >
+              {t("reports.save")}
+            </button>
+            <button type="button" className="btn-ghost text-xs" onClick={() => setForm(null)}>
+              {t("reports.cancel")}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          className="btn-ghost my-2 text-xs"
+          onClick={() => setForm({ id: null, value: { ...EMPTY, name: t("reports.defaultName") } })}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          {t("reports.add")}
+        </button>
+      )}
+
+      {items?.length === 0 && <p className="py-2 text-sm text-fg-muted">{t("reports.empty")}</p>}
+      {items && items.length > 0 && (
+        <ul className="divide-y divide-border/60" data-testid="report-list">
+          {items.map((r) => (
+            <li key={r.id} onContextMenu={(e) => ctx.open(e, r)} className="py-2.5">
+              <div className="flex items-center gap-3">
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm text-fg-secondary">{r.name}</p>
+                  <p className="text-[11px] text-fg-muted">{schedule(r)}</p>
+                  {r.last_run && (
+                    <p
+                      className={`text-[11px] ${
+                        r.last_run.status === "error" ? "text-status-danger" : "text-fg-muted"
+                      }`}
+                    >
+                      {t("reports.lastRun", { at: formatDateTime(r.last_run.created_at) })}
+                      {r.last_run.status === "error" && ` · ${r.last_run.error ?? ""}`}
+                    </p>
+                  )}
+                </div>
+                <Switch
+                  checked={r.enabled}
+                  onChange={(v) => void toggle(r, v)}
+                  label={t("reports.enabled")}
+                  title={t("reports.enabled")}
+                />
+                <button
+                  type="button"
+                  className="btn-ghost text-xs"
+                  disabled={busy === r.id}
+                  onClick={() => void runNow(r)}
+                  title={t("reports.runNow")}
+                  aria-label={t("reports.runNow")}
+                >
+                  <Play className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  className="btn-ghost text-xs"
+                  onClick={() => (history?.id === r.id ? setHistory(null) : void showHistory(r.id))}
+                  title={t("reports.history")}
+                  aria-label={t("reports.history")}
+                >
+                  <History className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  className="btn-ghost text-xs"
+                  onClick={() => edit(r)}
+                  title={t("reports.edit")}
+                  aria-label={t("reports.edit")}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  className="btn-ghost text-xs text-status-danger"
+                  onClick={() => setDeleting(r)}
+                  title={t("reports.delete")}
+                  aria-label={t("reports.delete")}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+              {history?.id === r.id && (
+                <ul
+                  className="mt-2 space-y-1 border-l border-border pl-3"
+                  data-testid="report-runs"
+                >
+                  {history.runs.length === 0 && (
+                    <li className="text-[11px] text-fg-muted">{t("reports.noRuns")}</li>
+                  )}
+                  {history.runs.map((run) => (
+                    <li key={run.id} className="flex flex-wrap items-center gap-2 text-[11px]">
+                      <span className="text-fg-secondary">{formatDateTime(run.created_at)}</span>
+                      <span className="text-fg-muted">
+                        {t(`reports.trigger.${run.trigger}`)} · {run.window_from} → {run.window_to}
+                      </span>
+                      {run.status === "error" ? (
+                        <span className="text-status-danger">{run.error}</span>
+                      ) : (
+                        run.files.map((f) => (
+                          <a
+                            key={f}
+                            href={api.reports.fileUrl(r.id, run.id, f)}
+                            download
+                            className="inline-flex items-center gap-0.5 text-accent hover:underline"
+                            title={t("reports.download", { format: f.toUpperCase() })}
+                          >
+                            <Download className="h-3 w-3" />
+                            {f.toUpperCase()}
+                          </a>
+                        ))
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {ctx.menu && (
+        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="report-menu">
+          <MenuItem onSelect={pick((r) => void runNow(r))}>{t("reports.runNow")}</MenuItem>
+          <MenuItem onSelect={pick((r) => void showHistory(r.id))}>{t("reports.history")}</MenuItem>
+          <MenuItem onSelect={pick(edit)}>{t("reports.edit")}</MenuItem>
+          <MenuSeparator />
+          <MenuItem danger onSelect={pick(setDeleting)}>
+            {t("reports.delete")}
+          </MenuItem>
+        </ContextMenu>
+      )}
+      <ConfirmModal
+        open={deleting !== null}
+        title={t("reports.deleteTitle")}
+        message={t("reports.deleteBody")}
+        confirmLabel={t("reports.delete")}
+        cancelLabel={t("reports.cancel")}
+        onConfirm={() => void remove()}
+        onCancel={() => setDeleting(null)}
+      />
+    </SettingsSection>
+  );
+}

client/src/components/settings/SnapshotSettings.tsx

@@ -0,0 +1,142 @@
+/**
+ * @file SnapshotSettings.tsx
+ * @description Settings → Snapshots: every frozen session (`GET
+ * /api/snapshots`), each with Open, Copy link and a confirmed Delete — the
+ * buttons and the same actions on a right-click menu. Snapshots survive Clear
+ * Data, so this is the one place they go away.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { ExternalLink, ShieldCheck, Trash2 } from "lucide-react";
+import { api } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import type { SessionSnapshotInfo } from "../../lib/types";
+import { ConfirmModal } from "../ConfirmModal";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { CopyButton } from "../event-views/primitives";
+import { snapshotUrl } from "../SnapshotButton";
+import { SettingsSection } from "./SettingsRow";
+
+export function SnapshotSettings() {
+  const { t } = useTranslation("settings");
+  const [items, setItems] = useState<SessionSnapshotInfo[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<SessionSnapshotInfo | null>(null);
+  const [busy, setBusy] = useState(false);
+  const ctx = useContextMenu<SessionSnapshotInfo>();
+  const navigate = useNavigate();
+
+  const load = useCallback(() => {
+    api.snapshots
+      .list()
+      .then((r) => setItems(r.snapshots))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+  }, []);
+  useEffect(load, [load]);
+
+  const remove = async () => {
+    if (!deleting) return;
+    setBusy(true);
+    try {
+      await api.snapshots.remove(deleting.id);
+      setItems((xs) => xs?.filter((x) => x.id !== deleting.id) ?? null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+      setDeleting(null);
+    }
+  };
+  const pick = (fn: (s: SessionSnapshotInfo) => void) => () => {
+    const s = ctx.menu?.item;
+    ctx.close();
+    if (s) fn(s);
+  };
+
+  return (
+    <SettingsSection title={t("snapshots.title")} description={t("snapshots.description")}>
+      {error && (
+        <p role="alert" className="py-2 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+      {items?.length === 0 && <p className="py-2 text-sm text-fg-muted">{t("snapshots.empty")}</p>}
+      {items && items.length > 0 && (
+        <ul className="divide-y divide-border/60" data-testid="snapshot-list">
+          {items.map((s) => (
+            <li
+              key={s.id}
+              onContextMenu={(e) => ctx.open(e, s)}
+              className="flex items-center gap-3 py-2.5"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-fg-secondary">
+                  {s.session_name || s.session_id.slice(0, 8)}
+                </p>
+                <p className="flex items-center gap-2 text-[11px] text-fg-muted">
+                  <span>{formatDateTime(s.created_at)}</span>
+                  <span>· {t("snapshots.events", { n: s.event_count ?? 0 })}</span>
+                  {s.redacted && (
+                    <span
+                      className="inline-flex items-center gap-0.5"
+                      title={t("snapshots.redacted")}
+                    >
+                      <ShieldCheck className="h-3 w-3" />
+                      {t("snapshots.redacted")}
+                    </span>
+                  )}
+                </p>
+              </div>
+              <Link
+                to={`/snapshot/${s.token}`}
+                className="btn-ghost text-xs"
+                title={t("snapshots.open")}
+              >
+                <ExternalLink className="h-3.5 w-3.5" />
+              </Link>
+              <CopyButton text={snapshotUrl(s.token)} />
+              <button
+                type="button"
+                onClick={() => setDeleting(s)}
+                className="btn-ghost text-xs text-status-danger"
+                title={t("snapshots.delete")}
+                aria-label={t("snapshots.delete")}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {ctx.menu && (
+        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="snapshot-menu">
+          <MenuItem onSelect={pick((s) => navigate(`/snapshot/${s.token}`))}>
+            {t("snapshots.open")}
+          </MenuItem>
+          <MenuItem
+            onSelect={pick((s) => void navigator.clipboard?.writeText(snapshotUrl(s.token)))}
+          >
+            {t("snapshots.copyLink")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem danger onSelect={pick(setDeleting)}>
+            {t("snapshots.delete")}
+          </MenuItem>
+        </ContextMenu>
+      )}
+      <ConfirmModal
+        open={deleting !== null}
+        title={t("snapshots.deleteTitle")}
+        message={t("snapshots.deleteBody")}
+        confirmLabel={t("snapshots.delete")}
+        cancelLabel={t("snapshots.cancel")}
+        busy={busy}
+        onConfirm={() => void remove()}
+        onCancel={() => setDeleting(null)}
+      />
+    </SettingsSection>
+  );
+}

client/src/components/settings/__tests__/AiToolsSettings.test.tsx

@@ -49,7 +49,7 @@ const tool = (id: string, label: string, over: Partial<AiTool> = {}): AiTool =>
   prompt: { mode: "argv" },
   resume: false,
   bypass: false,
-  routerCapable: false,
+  proxyCapable: false,
   install: null,
   update: null,
   modelFlag: false,

client/src/components/settings/__tests__/PushIngestSettings.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * @file PushIngestSettings.test.tsx
+ * @description Settings → Data → Push ingest and Privacy: a created token is
+ * shown once (a reload shows only that push is on), and the ignored-folder
+ * list is saved one path per line with blank lines dropped.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import i18n from "i18next";
+
+const { pushToken, privacy } = vi.hoisted(() => ({
+  pushToken: { get: vi.fn(), rotate: vi.fn(), revoke: vi.fn() },
+  privacy: { get: vi.fn(), save: vi.fn() },
+}));
+vi.mock("../../../lib/api", () => ({ api: { settings: { pushToken, privacy } } }));
+
+import { PushIngestSettings } from "../PushIngestSettings";
+import { PrivacySettings } from "../PrivacySettings";
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  vi.clearAllMocks();
+});
+
+describe("PushIngestSettings", () => {
+  it("shows a new token once, and never on a fresh load", async () => {
+    const user = userEvent.setup();
+    pushToken.get.mockResolvedValue({ enabled: false, env_owned: false });
+    pushToken.rotate.mockResolvedValue({ token: "ahp_secret", enabled: true, env_owned: false });
+    const view = render(<PushIngestSettings />);
+    await user.click(await screen.findByRole("button", { name: /Create token/ }));
+    expect(await screen.findByText("ahp_secret")).toBeInTheDocument();
+    view.unmount();
+
+    pushToken.get.mockResolvedValue({ enabled: true, env_owned: false });
+    render(<PushIngestSettings />);
+    expect(await screen.findByRole("button", { name: /Rotate token/ })).toBeInTheDocument();
+    expect(screen.queryByText("ahp_secret")).toBeNull();
+  });
+});
+
+describe("PrivacySettings", () => {
+  it("saves the ignored folders one per line", async () => {
+    const user = userEvent.setup();
+    const state = {
+      redact_secrets: false,
+      ignore_cwd: [],
+      env_owned: { redact_secrets: false, ignore_cwd: false },
+    };
+    privacy.get.mockResolvedValue(state);
+    privacy.save.mockImplementation((p) => Promise.resolve({ ok: true, ...state, ...p }));
+    render(<PrivacySettings />);
+    const box = await screen.findByLabelText("Ignored folders");
+    await user.type(box, "/a/b{enter}{enter}/c");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(privacy.save).toHaveBeenCalledWith({ ignore_cwd: ["/a/b", "/c"] }));
+  });
+});

client/src/components/settings/__tests__/ReportSettings.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * @file ReportSettings.test.tsx
+ * @description Settings → Reports: a new report is saved with the browser's
+ * timezone offset, Run now runs it, and History lists the runs with download
+ * links built from the report and run ids.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import i18n from "i18next";
+
+const { reports } = vi.hoisted(() => ({
+  reports: {
+    list: vi.fn(),
+    create: vi.fn(),
+    update: vi.fn(),
+    remove: vi.fn(),
+    run: vi.fn(),
+    runs: vi.fn(),
+    fileUrl: (id: number, runId: number, f: string) => `/api/reports/${id}/runs/${runId}/${f}`,
+  },
+}));
+vi.mock("../../../lib/api", () => ({ api: { reports } }));
+
+import { ReportSettings } from "../ReportSettings";
+
+const DEF = {
+  id: 3,
+  name: "Weekly summary",
+  window_days: 7,
+  frequency: "weekly" as const,
+  hour: 8,
+  weekday: 1,
+  tz_offset: 0,
+  formats: ["html" as const, "json" as const],
+  enabled: true,
+  created_at: "2026-10-01T00:00:00Z",
+  last_slot: null,
+  last_run: null,
+};
+const RUN = {
+  id: 9,
+  report_id: 3,
+  created_at: "2026-10-05T01:00:00Z",
+  trigger: "manual" as const,
+  status: "ok" as const,
+  window_from: "2026-09-28",
+  window_to: "2026-10-04",
+  files: ["html", "json"],
+  error: null,
+};
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  vi.clearAllMocks();
+});
+
+describe("ReportSettings", () => {
+  it("creates a report with the browser's timezone offset", async () => {
+    const user = userEvent.setup();
+    reports.list.mockResolvedValueOnce({ reports: [] }).mockResolvedValue({ reports: [DEF] });
+    reports.create.mockResolvedValue({ report: DEF });
+    render(<ReportSettings />);
+    await user.click(await screen.findByRole("button", { name: /New report/ }));
+    await user.click(screen.getByRole("checkbox", { name: "JSON" }));
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() =>
+      expect(reports.create).toHaveBeenCalledWith({
+        name: "Weekly summary",
+        window_days: 7,
+        frequency: "weekly",
+        hour: 8,
+        weekday: 1,
+        tz_offset: new Date().getTimezoneOffset(),
+        formats: ["html", "json"],
+        enabled: true,
+      })
+    );
+    expect(await screen.findByText(/last 7 days · HTML, JSON/)).toBeInTheDocument();
+  });
+
+  it("runs a report now and lists its runs with download links", async () => {
+    const user = userEvent.setup();
+    reports.list.mockResolvedValue({ reports: [DEF] });
+    reports.run.mockResolvedValue({ run: RUN });
+    reports.runs.mockResolvedValue({ runs: [RUN] });
+    render(<ReportSettings />);
+    await user.click(await screen.findByRole("button", { name: "Run now" }));
+    expect(reports.run).toHaveBeenCalledWith(3);
+    await user.click(screen.getByRole("button", { name: "History" }));
+    const link = await screen.findByRole("link", { name: /HTML/ });
+    expect(link).toHaveAttribute("href", "/api/reports/3/runs/9/html");
+    expect(screen.getByText(/2026-09-28 → 2026-10-04/)).toBeInTheDocument();
+  });
+});

client/src/i18n/locales/en/alerts.json

@@ -7,20 +7,26 @@
     "event_pattern": "Event pattern",
     "inactivity": "Inactivity",
     "status_duration": "Stuck agent",
-    "token_threshold": "Token threshold"
+    "token_threshold": "Token threshold",
+    "cost_threshold": "Cost threshold",
+    "budget": "Spend budget"
   },
   "ruleTypeHints": {
     "event_pattern": "Fires when an ingested event matches the pattern. Set a count above 1 to require N matching events within a time window (e.g. more than 5 errors in 2 minutes).",
     "inactivity": "Fires when an active session has received no events for the configured number of minutes.",
     "status_duration": "Fires when an agent has remained in the selected status with no activity for the configured number of minutes.",
-    "token_threshold": "Fires when a session's total token usage (input + output + cache) exceeds the threshold."
+    "token_threshold": "Fires when a session's total token usage (input + output + cache) exceeds the threshold.",
+    "cost_threshold": "Fires when a session's cost reaches the amount, priced like the session's own cost.",
+    "budget": "Fires once per period at each threshold of a spend limit — per day, week or month in your local time, optionally for one AI tool."
   },
   "ruleDesc": {
     "eventPattern": "Matches {{pattern}}",
     "eventPatternCount": "≥{{count}} × {{pattern}} within {{window}} min",
     "inactivity": "No session activity for {{minutes}} min",
     "statusDuration": "Agent stuck in {{status}} for {{minutes}} min",
-    "tokenThreshold": "Session tokens exceed {{tokens}}"
+    "tokenThreshold": "Session tokens exceed {{tokens}}",
+    "costThreshold": "Session cost reaches {{usd}}",
+    "budget": "{{limit}} per {{period}} · alerts at {{thresholds}}"
   },
   "rules": {
     "title": "Alert rules",
@@ -48,7 +54,13 @@
       "agentStatus": "Agent status",
       "minutes": "Minutes",
       "totalTokens": "Total tokens",
-      "cooldown": "Cooldown (seconds)"
+      "cooldown": "Cooldown (seconds)",
+      "usd": "Cost (USD)",
+      "period": "Period",
+      "limitUsd": "Limit (USD)",
+      "thresholds": "Alert at (%)",
+      "budgetTool": "AI tool",
+      "allTools": "All AI tools"
     },
     "deleteTitle": "Delete alert rule?",
     "help": {
@@ -63,8 +75,19 @@
       "minutesInactivity": "Fire when an active session has had no events for this many minutes (a stalled or forgotten session).",
       "minutesStatus": "Fire when an agent stays in the selected status with no activity for this many minutes (a stuck agent).",
       "totalTokens": "Fire when a session's cumulative tokens (input + output + cache read + cache write) cross this number. e.g. 1000000 = 1M tokens.",
-      "cooldown": "Minimum seconds between repeat alerts for the same rule + session + agent. Prevents noisy duplicates. Default 300 (5 min); 0 = no cooldown."
+      "cooldown": "Minimum seconds between repeat alerts for the same rule + session + agent. Prevents noisy duplicates. Default 300 (5 min); 0 = no cooldown.",
+      "usd": "A session reaching this many US dollars fires the alert.",
+      "period": "Day starts at your local midnight, week on Monday, month on the 1st.",
+      "limitUsd": "The spend limit for one period, in US dollars.",
+      "thresholds": "Percents of the limit, comma-separated, e.g. 50, 80, 100. Each fires once per period.",
+      "budgetTool": "Count only this AI tool's sessions."
     },
+    "preview": "Preview",
+    "previewing": "Checking…",
+    "previewHint": "What this rule would have fired over the last 7 days — nothing is saved or sent",
+    "previewResult": "Would have fired {{fires}} times in {{sessions}} sessions over the last {{days}} days.",
+    "previewBudget": "Spend per period (this one and the five before it):",
+    "previewUnsupported": "This rule type cannot be replayed from history.",
     "edit": "Edit rule",
     "save": "Save rule",
     "typeFixed": "A rule's type cannot be changed — create a new rule instead.",
@@ -81,6 +104,11 @@
     "emptyDescription": "Alerts fired by your rules will appear here in real time.",
     "emptyUnacked": "Everything is acknowledged. New alerts will appear here as they fire."
   },
+  "periods": {
+    "day": "day",
+    "week": "week",
+    "month": "month"
+  },
   "errors": {
     "loadRules": "Could not load alert rules: {{error}}",
     "loadAlerts": "Could not load alerts: {{error}}",

client/src/i18n/locales/en/analytics.json

@@ -51,6 +51,56 @@
   "last7Days": "Last 7 days",
   "less": "Less",
   "more": "More",
+  "toolFilter": "AI tool",
+  "allTools": "All AI tools",
+  "costByTool": "Cost by AI tool",
+  "spendPace": "Spend pace",
+  "burnRate": "Burn rate (7-day avg / day)",
+  "burnRateHint": "Average cost per day over the last 7 days, today included",
+  "monthToDate": "Month to date",
+  "forecastMonth": "Forecast for this month",
+  "forecastHint": "Month to date plus the 7-day pace for each day left",
+  "budgets": "Budgets",
+  "noBudgets": "No spend budget yet.",
+  "addBudget": "Add one in Settings → Notifications",
+  "projected": "projected",
+  "projectedHint": "This period's spend at the current pace, carried to its end",
+  "range": "Date range",
+  "rangePreset": {
+    "today": "Today",
+    "week": "This week",
+    "month": "This month",
+    "7d": "Last 7 days",
+    "30d": "Last 30 days",
+    "90d": "Last 90 days",
+    "all": "All time",
+    "custom": "Custom"
+  },
+  "rangeFrom": "From",
+  "rangeTo": "To",
+  "query": {
+    "entities": {
+      "agents": "Agents"
+    },
+    "search": "Search",
+    "searchPlaceholder": "Search text…",
+    "status": "Status",
+    "allStatuses": "All statuses",
+    "cwd": "Folder",
+    "cwdPlaceholder": "/path/to/project",
+    "from": "From",
+    "to": "To",
+    "sortBy": "Sort by {{column}}",
+    "exportCsv": "Export CSV",
+    "exportJson": "Export JSON",
+    "exportNote": "An export holds the whole filter, up to {{cap}} rows.",
+    "exportTruncated": "{{total}} rows match; the export holds the first {{cap}}.",
+    "rows": "{{from}}–{{to}} of {{total}}",
+    "prev": "Previous page",
+    "next": "Next page",
+    "empty": "Nothing matches these filters.",
+    "reset": "Reset filters"
+  },
   "tokensExCacheReads": "Tokens (excl. cache reads)",
   "cacheReadsSub": "+{{reads}} cache reads · {{pct}}% hit rate",
   "avgPerWeekday30d": "Average per weekday, last 30 days"

client/src/i18n/locales/en/lanes.json

@@ -215,8 +215,8 @@
   "proof.ticketReport": "Task report",
   "renameLabel": "Rename this workspace",
   "reorderHint": "Drag to reorder · Alt+←/→",
-  "router.native": "Native ({{tool}})",
-  "router.label": "AI Router",
+  "proxy.native": "Native ({{tool}})",
+  "proxy.label": "AI Proxy",
   "runtime.boot": "▶ up",
   "runtime.busy.down": "stopping…",
   "runtime.busy.up": "booting…",

client/src/i18n/locales/en/nav.json

@@ -1,6 +1,7 @@
 {
   "activityFeed": "Activity Feed",
   "agentBoard": "Kanban Board",
+  "agents": "Agents",
   "analytics": "Analytics",
   "avg": "avg",
   "brand": "AgentHub",
@@ -67,6 +68,8 @@
     "today": "Today {{cost}}",
     "workspace": "Workspace {{cost}}",
     "session": "Session {{cost}}",
+    "budget": "Budget {{pct}}%",
+    "budgetTitle": "{{name}}: {{spend}} of {{limit}} this period",
     "tokens": "({{tokens}} Tokens)",
     "quotaUsed": "{{pct}}% used",
     "quotaTitle": "Usage",
@@ -80,10 +83,14 @@
     "quotaProfileExpired": "Sign-in expired: use Check quota in Claude Code → Profiles to refresh it",
     "quotaSignInExpires": "Sign-in expires in {{time}}",
     "quotaSignInExpired": "Sign-in expired",
-    "quotaWindow": { "wk": "Week", "mo": "Month" }
+    "quotaWindow": {
+      "wk": "Week",
+      "mo": "Month"
+    }
   },
   "version": "Version",
   "openMenu": "Open menu",
+  "resizeSidebar": "Resize sidebar (double-click to reset)",
   "closeMenu": "Close menu",
   "sidebar": "Sidebar",
   "now": "now"

client/src/i18n/locales/en/sessions.json

@@ -54,6 +54,55 @@
     "copyId": "Copy session ID",
     "copyFolder": "Copy folder path"
   },
+  "replay": {
+    "tab": "Replay",
+    "loading": "Loading events…",
+    "label": "Session replay",
+    "truncated": "Replaying the newest {{shown}} of {{total}} events.",
+    "start": "Jump to start (Home)",
+    "back": "Step back (←)",
+    "play": "Play (Space)",
+    "pause": "Pause (Space)",
+    "forward": "Step forward (→)",
+    "end": "Jump to end (End)",
+    "speed": "Playback speed",
+    "position": "{{at}} / {{n}}",
+    "scrubber": "Event position",
+    "minimap": "Lifecycle markers",
+    "marker": {
+      "SessionStart": "Session start",
+      "UserPromptSubmit": "Prompt",
+      "Compaction": "Compaction",
+      "SubagentStop": "Subagent done",
+      "APIError": "API error",
+      "Stop": "Turn end"
+    },
+    "state": {
+      "status": "Status",
+      "tool": "Running tool",
+      "prompts": "Prompts",
+      "errors": "Errors",
+      "compactions": "Compactions",
+      "elapsed": "Elapsed",
+      "toolCounts": "Tool calls so far"
+    }
+  },
+  "snapshot": {
+    "create": "Snapshot",
+    "hint": "Freeze this session into a read-only copy with a share link",
+    "title": "Create a snapshot",
+    "body": "Freezes this session as it is now — its agents, events, stats and cost — into a read-only copy under a private link. Later activity does not change it, and it survives Clear Data.",
+    "redactPaths": "Redact file paths (working directory, transcript and file paths)",
+    "confirm": "Create and copy link",
+    "cancel": "Cancel",
+    "open": "Open snapshot",
+    "notFound": "Snapshot not found",
+    "banner": "Snapshot taken {{date}}",
+    "bannerBody": "A read-only copy of the session as it was then. Nothing here updates.",
+    "redacted": "Paths redacted",
+    "openLive": "Open live session",
+    "timeline": "Timeline ({{n}})"
+  },
   "exportCsv": "CSV",
   "exportJson": "JSON",
   "exportCapped": "The file holds {{shown}} of {{total}} sessions (the export limit) — narrow the filters to export the rest.",

client/src/i18n/locales/en/settings.json

@@ -303,6 +303,14 @@
     "typeToConfirm": "Type “{{phrase}}” to confirm:",
     "phrase": "clear all data"
   },
+  "autostart": {
+    "title": "Startup",
+    "label": "Start AgentHub automatically",
+    "desc_systemd": "Run the dashboard as a systemd --user service, so it starts at boot without Claude Code being opened. Turning it off keeps the running server up.",
+    "desc_launchd": "Run the dashboard as a LaunchAgent, so it starts at login without Claude Code being opened. Turning it off keeps the running server up.",
+    "unavailable": "Not available here: needs systemd --user on Linux, or a GUI login on macOS.",
+    "foreign": "A service named agenthub that AgentHub did not write already exists — AgentHub leaves it alone."
+  },
   "about": {
     "title": "About",
     "description": "Server runtime information.",
@@ -561,16 +569,21 @@
     "deleteAndPurge": "Remove + delete data",
     "removeKeep": "Remove (keep data)",
     "remoteSourceBadgeTitle": "Collected from a remote machine",
+    "fieldSyncCodex": "Also pull Codex sessions",
+    "fieldRemoteCodexHome": "Remote Codex home (optional)",
+    "fieldRemoteCodexHomeHint": "Default ~/.codex (wsl:~/.codex when the Claude home is in WSL). Its sessions/ folder is copied, and the sessions show up as Codex sessions of this source, with their tokens and cost.",
+    "codexOn": "+ Codex",
+    "syncCodex": "{{n}} Codex",
     "fieldLabelPlaceholder": "Dev box"
   },
   "cursorPathsNote": "Informational: Cursor sessions count here too — Cursor happens to use the same ~/.claude paths as Claude Code (locally and on synced remotes).",
-  "aiRouter": {
-    "title": "AI Router",
+  "aiProxy": {
+    "title": "AI Proxy",
     "description": "For example 9Router, OpenRouter or a self-hosted gateway. Save one here, then pick it for a session in the workspace prompt box.",
     "add": "Add profile",
     "edit": "Edit",
     "remove": "Remove",
-    "empty": "No router profile saved yet. Native runs against the vendor's own API.",
+    "empty": "No proxy profile saved yet. Native runs against the vendor's own API.",
     "builtinHint": "Built in — this is the vendor's own API, and it cannot be edited or removed.",
     "colLabel": "Profile",
     "colBaseUrl": "Endpoint",
@@ -579,16 +592,16 @@
     "keySet": "Saved",
     "keyMissing": "None",
     "fieldLabel": "Name",
-    "fieldLabelHint": "What you will see in the workspace form. Free text.",
+    "fieldLabelHint": "What you will see in the session's AI Proxy picker. Free text.",
     "fieldBaseUrl": "Base URL",
-    "fieldBaseUrlHint": "The router's OpenAI/Anthropic-compatible endpoint, e.g. http://localhost:20128/v1",
+    "fieldBaseUrlHint": "The proxy's root URL, without /v1 — e.g. http://localhost:20128. Claude Code adds /v1/messages and Codex /v1/responses; a /v1 you type is dropped.",
     "fieldApiKey": "API key",
     "fieldApiKeyHint": "Stored on this machine at 0600 and never sent back to the browser.",
     "fieldApiKeyKeep": "Leave blank to keep the saved key.",
     "fieldModel": "Model",
-    "fieldModelHint": "Used for every tier unless you override one below. Many routers accept one symbolic name.",
+    "fieldModelHint": "Used for every tier unless you override one below. Many proxies accept one symbolic name.",
     "fieldBehavesAs": "Behaves as (Claude Code)",
-    "fieldBehavesAsHint": "Optional. The Claude model id Claude Code should treat this router's model names as (effort defaults, context window), e.g. claude-opus-5-5. Fill it in when Claude Code says a model isn't described by its model catalog, and name the model the router really sends to. While set, it replaces your own modelPicker setting in these sessions.",
+    "fieldBehavesAsHint": "Optional. The Claude model id Claude Code should treat this proxy's model names as (effort defaults, context window), e.g. claude-opus-5-5. Fill it in when Claude Code says a model isn't described by its model catalog, and name the model the proxy really sends to. While set, it replaces your own modelPicker setting in these sessions.",
     "perTier": "Per-tier overrides",
     "perTierHint": "Leave a field blank to use the model above.",
     "tier": {
@@ -600,12 +613,12 @@
     },
     "save": "Save",
     "cancel": "Cancel",
-    "removeConfirm": "Remove the profile \"{{label}}\"? Every workspace using it is reset to the vendor's own API right away — on disk and in the dashboard.",
+    "removeConfirm": "Remove the profile \"{{label}}\"? Its session files go with it, and a session that ran on it resumes on the vendor's own API.",
     "loading": "Loading profiles…",
     "test": "Test",
     "testing": "Testing…",
-    "testOk": "The endpoint answered — {{model}} is reachable with this key.",
-    "testFailed": "No answer ({{status}}): {{message}}"
+    "testOk": "answered — {{model}} is reachable with this key.",
+    "testFailed": "no answer ({{status}}): {{message}}"
   },
   "aiTools": {
     "title": "AI Tools",
@@ -687,7 +700,7 @@
   },
   "codexHome": {
     "title": "CODEX_HOME",
-    "description": "Root directory for Codex config and session journals. The dashboard reads it, writes AI Router layers into it, and starts every codex workspace with it.",
+    "description": "Root directory for Codex config and session journals. The dashboard reads it, writes AI Proxy layers into it, and starts every codex workspace with it.",
     "restartNote": "A codex workspace already running keeps the home it started with, and shows as idle, until it is restarted.",
     "placeholder": "/path/to/codex-home"
   },
@@ -779,8 +792,8 @@
       "tool": {
         "description": "{{tool}}: path, usage, default model and config files."
       },
-      "aiRouter": {
-        "title": "AI Router",
+      "aiProxy": {
+        "title": "AI Proxy",
         "description": "Endpoints that stand in front of Claude Code and Codex."
       },
       "pricing": {
@@ -802,6 +815,14 @@
       "about": {
         "title": "About",
         "description": "Server version, uptime and runtime."
+      },
+      "snapshots": {
+        "title": "Snapshots",
+        "description": "Frozen, read-only copies of sessions, each behind its own link."
+      },
+      "reports": {
+        "title": "Reports",
+        "description": "Analytics summaries written on a schedule, as HTML or JSON."
       }
     },
     "backPrevious": "Back",
@@ -839,6 +860,79 @@
     "enable": "Enable",
     "disable": "Disable"
   },
+  "snapshots": {
+    "title": "Session snapshots",
+    "description": "Created from a session's page with Snapshot. They survive Clear Data; delete them here.",
+    "empty": "No snapshots yet.",
+    "events": "{{n}} events",
+    "redacted": "Paths redacted",
+    "open": "Open",
+    "copyLink": "Copy link",
+    "delete": "Delete",
+    "deleteTitle": "Delete this snapshot?",
+    "deleteBody": "Its link stops working. The session itself is not touched.",
+    "cancel": "Cancel"
+  },
+  "pushIngest": {
+    "title": "Push ingest",
+    "description": "For a machine this dashboard cannot reach over SSH: it pushes its own hooks to POST /api/hooks/ingest-batch with a token made here. Its sessions are tagged with the name it sends (push:<name>) and show live status and events; their token cost needs the transcripts, which only an SSH source brings.",
+    "on": "On — a token exists",
+    "off": "Off — no token yet",
+    "create": "Create token",
+    "rotate": "Rotate token",
+    "revoke": "Revoke",
+    "rotateConfirm": "Make a new token? The current one stops working at once.",
+    "revokeConfirm": "Revoke the token and turn push ingest off?",
+    "shownOnce": "Copy this token now: only its hash is stored, so it is never shown again.",
+    "copy": "Copy",
+    "envOwned": "AGENTHUB_PUSH_TOKEN_SHA256 is set by the environment the dashboard started in; change it there.",
+    "reachHint": "The other machine must reach this dashboard: start it with DASHBOARD_HOST (and DASHBOARD_ALLOWED_HOSTS for its name). Over plain http the token crosses the network readable — use it only on a network you trust, or behind TLS. The forwarder below keeps the token in a header file, never on a command line:",
+    "limits": "At most 500 events and 1 MB per request. A hook for a session another source owns is refused; transcript paths are dropped (they name files on the sender). Codex hooks are taken; Antigravity hooks are not."
+  },
+  "privacy": {
+    "title": "Privacy",
+    "description": "What AgentHub keeps from hooks and imported history. Both are off by default and apply to new data only.",
+    "redact": "Redact secrets before storing",
+    "redactHint": "API keys and tokens of known shapes, bearer headers, private keys and password=/TOKEN= values in event payloads and summaries become [redacted]. The transcripts on disk are the CLIs' own files and are not changed.",
+    "ignore": "Ignored folders",
+    "ignoreHint": "One absolute path per line. Hooks from these folders, and anything under them, are dropped whole; history import and the Codex reader skip their sessions. AGENTHUB_IGNORE_CWD sets the same list.",
+    "envOwned": "A value here is set by the environment the dashboard started in, and cannot be changed from this page."
+  },
+  "reports": {
+    "title": "Scheduled reports",
+    "description": "A summary of the last days — sessions, events, tokens, cost by model and by AI tool, top tools, budgets — written as HTML or JSON on a schedule. Reports and their history survive Clear Data.",
+    "add": "New report",
+    "defaultName": "Weekly summary",
+    "empty": "No scheduled report yet.",
+    "name": "Name",
+    "windowDays": "Days covered",
+    "frequency": "Frequency",
+    "daily": "Daily",
+    "weekly": "Weekly",
+    "weekday": "Day",
+    "hour": "Time",
+    "windowHint": "A report covers the full days before the day it runs, at this browser's time zone.",
+    "save": "Save",
+    "cancel": "Cancel",
+    "enabled": "Enabled",
+    "runNow": "Run now",
+    "history": "History",
+    "edit": "Edit",
+    "delete": "Delete",
+    "everyDay": "Every day at {{time}}",
+    "everyWeek": "Every {{day}} at {{time}}",
+    "window_one": "last {{count}} day",
+    "window_other": "last {{count}} days",
+    "lastRun": "Last run {{at}}",
+    "noRuns": "No runs yet.",
+    "trigger": {
+      "schedule": "Scheduled",
+      "manual": "Manual"
+    },
+    "download": "Download {{format}}",
+    "deleteTitle": "Delete this report?",
+    "deleteBody": "Its schedule, its run history and the files it wrote are deleted."
+  },
   "prefsBackup": {
     "title": "This browser's preferences",
     "description": "Theme, language, notification settings, pet, sidebar and workspace layout are kept in this browser. Save them to a file to move them to another browser, or restore them from one.",

client/src/i18n/locales/en/updates.json

@@ -25,6 +25,7 @@
   "releaseUnavailable": "Could not read the latest release from the repository ({{reason}}); fell back to comparing commits.",
   "pluginAutoNote": "This dashboard is installed as a Claude Code plugin. \"Update now\" pulls the new plugin version, reinstalls the runtime, and restarts the server for you — it takes a few minutes. Newly added skills and slash commands only appear in an already-open Claude Code session after you run /reload-plugins there.",
   "pluginUpdating": "Pulling the new plugin version and reinstalling the runtime — this takes a few minutes, the page reloads itself when the new server is up...",
+  "pluginAlreadyCurrent": "No newer plugin version was pulled, so the running dashboard was left as it is.",
   "lastPluginUpdateFailed": "The last plugin update failed at step \"{{step}}\": {{error}} — run /agenthub-update in Claude Code to recover.",
   "restartingShort": "Restarting…",
   "installedTitle": "Version {{version}} is installed but not running",

client/src/i18n/locales/vi/alerts.json

@@ -7,20 +7,26 @@
     "event_pattern": "Mẫu sự kiện",
     "inactivity": "Không hoạt động",
     "status_duration": "Agent bị kẹt",
-    "token_threshold": "Ngưỡng token"
+    "token_threshold": "Ngưỡng token",
+    "cost_threshold": "Ngưỡng chi phí",
+    "budget": "Ngân sách chi tiêu"
   },
   "ruleTypeHints": {
     "event_pattern": "Kích hoạt khi một sự kiện khớp với mẫu. Đặt số lần lớn hơn 1 để yêu cầu N sự kiện khớp trong khung thời gian (ví dụ: hơn 5 lỗi trong 2 phút).",
     "inactivity": "Kích hoạt khi một phiên đang hoạt động không nhận được sự kiện nào trong số phút đã cấu hình.",
     "status_duration": "Kích hoạt khi một agent giữ nguyên trạng thái đã chọn mà không có hoạt động trong số phút đã cấu hình.",
-    "token_threshold": "Kích hoạt khi tổng mức dùng token của phiên (đầu vào + đầu ra + bộ nhớ đệm) vượt ngưỡng."
+    "token_threshold": "Kích hoạt khi tổng mức dùng token của phiên (đầu vào + đầu ra + bộ nhớ đệm) vượt ngưỡng.",
+    "cost_threshold": "Kích hoạt khi chi phí của một phiên chạm mức này, tính giá như chi phí riêng của phiên.",
+    "budget": "Kích hoạt một lần mỗi kỳ ở từng ngưỡng của hạn mức chi tiêu — theo ngày, tuần hoặc tháng theo giờ địa phương, có thể chỉ cho một công cụ AI."
   },
   "ruleDesc": {
     "eventPattern": "Khớp {{pattern}}",
     "eventPatternCount": "≥{{count}} × {{pattern}} trong {{window}} phút",
     "inactivity": "Phiên không hoạt động trong {{minutes}} phút",
     "statusDuration": "Agent kẹt ở trạng thái {{status}} trong {{minutes}} phút",
-    "tokenThreshold": "Token của phiên vượt {{tokens}}"
+    "tokenThreshold": "Token của phiên vượt {{tokens}}",
+    "costThreshold": "Chi phí phiên chạm {{usd}}",
+    "budget": "{{limit}} mỗi {{period}} · cảnh báo ở {{thresholds}}"
   },
   "rules": {
     "title": "Quy tắc cảnh báo",
@@ -48,7 +54,13 @@
       "agentStatus": "Trạng thái agent",
       "minutes": "Phút",
       "totalTokens": "Tổng token",
-      "cooldown": "Thời gian chờ (giây)"
+      "cooldown": "Thời gian chờ (giây)",
+      "usd": "Chi phí (USD)",
+      "period": "Kỳ",
+      "limitUsd": "Hạn mức (USD)",
+      "thresholds": "Cảnh báo ở (%)",
+      "budgetTool": "Công cụ AI",
+      "allTools": "Mọi công cụ AI"
     },
     "deleteTitle": "Xóa quy tắc cảnh báo?",
     "help": {
@@ -63,8 +75,19 @@
       "minutesInactivity": "Kích hoạt khi một phiên đang hoạt động không có sự kiện nào trong bấy nhiêu phút (phiên bị treo hoặc bị quên).",
       "minutesStatus": "Kích hoạt khi agent ở trạng thái đã chọn mà không có hoạt động trong bấy nhiêu phút (agent bị kẹt).",
       "totalTokens": "Kích hoạt khi tổng token của phiên (input + output + cache read + cache write) vượt số này. vd 1000000 = 1 triệu token.",
-      "cooldown": "Số giây tối thiểu giữa các cảnh báo lặp cho cùng quy tắc + phiên + agent. Tránh trùng lặp gây nhiễu. Mặc định 300 (5 phút); 0 = không có thời gian chờ."
+      "cooldown": "Số giây tối thiểu giữa các cảnh báo lặp cho cùng quy tắc + phiên + agent. Tránh trùng lặp gây nhiễu. Mặc định 300 (5 phút); 0 = không có thời gian chờ.",
+      "usd": "Một phiên chạm số đô la này sẽ kích hoạt cảnh báo.",
+      "period": "Ngày bắt đầu lúc nửa đêm giờ địa phương, tuần từ thứ Hai, tháng từ ngày 1.",
+      "limitUsd": "Hạn mức chi tiêu cho một kỳ, tính bằng đô la Mỹ.",
+      "thresholds": "Phần trăm hạn mức, cách nhau bằng dấu phẩy, vd 50, 80, 100. Mỗi ngưỡng kích hoạt một lần mỗi kỳ.",
+      "budgetTool": "Chỉ tính các phiên của công cụ AI này."
     },
+    "preview": "Xem trước",
+    "previewing": "Đang kiểm tra…",
+    "previewHint": "Quy tắc này lẽ ra đã kích hoạt những gì trong 7 ngày qua — không lưu, không gửi gì",
+    "previewResult": "Lẽ ra đã kích hoạt {{fires}} lần ở {{sessions}} phiên trong {{days}} ngày qua.",
+    "previewBudget": "Chi tiêu mỗi kỳ (kỳ này và năm kỳ trước):",
+    "previewUnsupported": "Loại quy tắc này không phát lại được từ lịch sử.",
     "edit": "Sửa quy tắc",
     "save": "Lưu quy tắc",
     "typeFixed": "Không đổi được loại của quy tắc — hãy tạo quy tắc mới.",
@@ -81,6 +104,11 @@
     "emptyDescription": "Cảnh báo do các quy tắc của bạn kích hoạt sẽ hiển thị tại đây theo thời gian thực.",
     "emptyUnacked": "Tất cả đã được xác nhận. Cảnh báo mới sẽ hiển thị tại đây khi được kích hoạt."
   },
+  "periods": {
+    "day": "ngày",
+    "week": "tuần",
+    "month": "tháng"
+  },
   "errors": {
     "loadRules": "Không tải được quy tắc cảnh báo: {{error}}",
     "loadAlerts": "Không tải được cảnh báo: {{error}}",

client/src/i18n/locales/vi/analytics.json

@@ -51,6 +51,56 @@
   "last7Days": "7 ngày gần nhất",
   "less": "Ít",
   "more": "Nhiều",
+  "toolFilter": "Công cụ AI",
+  "allTools": "Mọi công cụ AI",
+  "costByTool": "Chi phí theo công cụ AI",
+  "spendPace": "Nhịp chi tiêu",
+  "burnRate": "Tốc độ đốt (TB 7 ngày / ngày)",
+  "burnRateHint": "Chi phí trung bình mỗi ngày trong 7 ngày qua, tính cả hôm nay",
+  "monthToDate": "Từ đầu tháng",
+  "forecastMonth": "Dự báo cả tháng",
+  "forecastHint": "Từ đầu tháng cộng nhịp 7 ngày cho mỗi ngày còn lại",
+  "budgets": "Ngân sách",
+  "noBudgets": "Chưa có ngân sách chi tiêu.",
+  "addBudget": "Thêm trong Cài đặt → Thông báo",
+  "projected": "dự kiến",
+  "projectedHint": "Chi tiêu kỳ này theo nhịp hiện tại, kéo đến cuối kỳ",
+  "range": "Khoảng thời gian",
+  "rangePreset": {
+    "today": "Hôm nay",
+    "week": "Tuần này",
+    "month": "Tháng này",
+    "7d": "7 ngày qua",
+    "30d": "30 ngày qua",
+    "90d": "90 ngày qua",
+    "all": "Toàn bộ",
+    "custom": "Tùy chọn"
+  },
+  "rangeFrom": "Từ ngày",
+  "rangeTo": "Đến ngày",
+  "query": {
+    "entities": {
+      "agents": "Agent"
+    },
+    "search": "Tìm kiếm",
+    "searchPlaceholder": "Tìm văn bản…",
+    "status": "Trạng thái",
+    "allStatuses": "Mọi trạng thái",
+    "cwd": "Thư mục",
+    "cwdPlaceholder": "/duong/dan/du-an",
+    "from": "Từ ngày",
+    "to": "Đến ngày",
+    "sortBy": "Sắp xếp theo {{column}}",
+    "exportCsv": "Xuất CSV",
+    "exportJson": "Xuất JSON",
+    "exportNote": "Tệp xuất chứa toàn bộ kết quả lọc, tối đa {{cap}} dòng.",
+    "exportTruncated": "{{total}} dòng khớp; tệp xuất chỉ chứa {{cap}} dòng đầu.",
+    "rows": "{{from}}–{{to}} / {{total}}",
+    "prev": "Trang trước",
+    "next": "Trang sau",
+    "empty": "Không có dữ liệu khớp bộ lọc.",
+    "reset": "Đặt lại bộ lọc"
+  },
   "tokensExCacheReads": "Token (trừ đọc cache)",
   "cacheReadsSub": "+{{reads}} token đọc cache · tỉ lệ trúng {{pct}}%",
   "avgPerWeekday30d": "Trung bình theo thứ trong tuần, 30 ngày qua"

client/src/i18n/locales/vi/lanes.json

@@ -215,8 +215,8 @@
   "proof.ticketReport": "Báo cáo nhiệm vụ",
   "renameLabel": "Đổi tên workspace này",
   "reorderHint": "Kéo để sắp xếp · Alt+←/→",
-  "router.native": "Native ({{tool}})",
-  "router.label": "AI Router",
+  "proxy.native": "Native ({{tool}})",
+  "proxy.label": "AI Proxy",
   "runtime.boot": "▶ chạy",
   "runtime.busy.down": "đang dừng…",
   "runtime.busy.up": "đang khởi động…",

client/src/i18n/locales/vi/nav.json

@@ -1,6 +1,7 @@
 {
   "activityFeed": "Luồng hoạt động",
   "agentBoard": "Bảng Kanban",
+  "agents": "Agent",
   "analytics": "Phân tích",
   "avg": "TB",
   "brand": "AgentHub",
@@ -67,6 +68,8 @@
     "today": "Hôm nay {{cost}}",
     "workspace": "Workspace {{cost}}",
     "session": "Session {{cost}}",
+    "budget": "Ngân sách {{pct}}%",
+    "budgetTitle": "{{name}}: {{spend}} / {{limit}} kỳ này",
     "tokens": "({{tokens}} Tokens)",
     "quotaUsed": "đã dùng {{pct}}%",
     "quotaTitle": "Mức dùng",
@@ -80,10 +83,14 @@
     "quotaProfileExpired": "Đăng nhập đã hết hạn: bấm Kiểm tra quota trong Claude Code → Profiles để làm mới",
     "quotaSignInExpires": "Đăng nhập hết hạn sau {{time}}",
     "quotaSignInExpired": "Đăng nhập đã hết hạn",
-    "quotaWindow": { "wk": "Tuần", "mo": "Tháng" }
+    "quotaWindow": {
+      "wk": "Tuần",
+      "mo": "Tháng"
+    }
   },
   "version": "Phiên bản",
   "openMenu": "Mở menu",
+  "resizeSidebar": "Kéo để đổi độ rộng sidebar (nhấp đúp để đặt lại)",
   "closeMenu": "Đóng menu",
   "sidebar": "Thanh bên",
   "now": "bây giờ"

client/src/i18n/locales/vi/sessions.json

@@ -53,6 +53,55 @@
     "copyId": "Sao chép ID session",
     "copyFolder": "Sao chép đường dẫn thư mục"
   },
+  "replay": {
+    "tab": "Phát lại",
+    "loading": "Đang tải sự kiện…",
+    "label": "Phát lại phiên",
+    "truncated": "Đang phát lại {{shown}} sự kiện mới nhất trong {{total}}.",
+    "start": "Về đầu (Home)",
+    "back": "Lùi một bước (←)",
+    "play": "Phát (Space)",
+    "pause": "Tạm dừng (Space)",
+    "forward": "Tiến một bước (→)",
+    "end": "Đến cuối (End)",
+    "speed": "Tốc độ phát",
+    "position": "{{at}} / {{n}}",
+    "scrubber": "Vị trí sự kiện",
+    "minimap": "Mốc vòng đời",
+    "marker": {
+      "SessionStart": "Bắt đầu phiên",
+      "UserPromptSubmit": "Prompt",
+      "Compaction": "Nén ngữ cảnh",
+      "SubagentStop": "Subagent xong",
+      "APIError": "Lỗi API",
+      "Stop": "Kết thúc lượt"
+    },
+    "state": {
+      "status": "Trạng thái",
+      "tool": "Công cụ đang chạy",
+      "prompts": "Prompt",
+      "errors": "Lỗi",
+      "compactions": "Lần nén",
+      "elapsed": "Đã trôi qua",
+      "toolCounts": "Số lần gọi công cụ đến lúc này"
+    }
+  },
+  "snapshot": {
+    "create": "Snapshot",
+    "hint": "Đóng băng phiên này thành một bản chỉ đọc kèm liên kết chia sẻ",
+    "title": "Tạo snapshot",
+    "body": "Đóng băng phiên như hiện tại — agent, sự kiện, thống kê và chi phí — thành một bản chỉ đọc dưới một liên kết riêng. Hoạt động sau đó không làm nó thay đổi, và nó vẫn còn sau khi Xóa dữ liệu.",
+    "redactPaths": "Che đường dẫn (thư mục làm việc, transcript và đường dẫn tệp)",
+    "confirm": "Tạo và sao chép liên kết",
+    "cancel": "Hủy",
+    "open": "Mở snapshot",
+    "notFound": "Không tìm thấy snapshot",
+    "banner": "Snapshot chụp lúc {{date}}",
+    "bannerBody": "Bản chỉ đọc của phiên tại thời điểm đó. Không có gì ở đây được cập nhật.",
+    "redacted": "Đã che đường dẫn",
+    "openLive": "Mở phiên đang có",
+    "timeline": "Dòng thời gian ({{n}})"
+  },
   "exportCsv": "CSV",
   "exportJson": "JSON",
   "exportCapped": "Tệp chỉ gồm {{shown}} trên {{total}} phiên (giới hạn xuất) — hãy thu hẹp bộ lọc để xuất phần còn lại.",

client/src/i18n/locales/vi/settings.json

@@ -303,6 +303,14 @@
     "typeToConfirm": "Gõ “{{phrase}}” để xác nhận:",
     "phrase": "xóa toàn bộ dữ liệu"
   },
+  "autostart": {
+    "title": "Khởi động",
+    "label": "Tự động khởi động AgentHub",
+    "desc_systemd": "Chạy dashboard bằng systemd --user service để nó tự bật khi khởi động máy, không cần mở Claude Code. Tắt đi thì server đang chạy vẫn giữ nguyên.",
+    "desc_launchd": "Chạy dashboard bằng LaunchAgent để nó tự bật khi đăng nhập, không cần mở Claude Code. Tắt đi thì server đang chạy vẫn giữ nguyên.",
+    "unavailable": "Không khả dụng ở đây: cần systemd --user trên Linux, hoặc phiên đăng nhập GUI trên macOS.",
+    "foreign": "Đã có một service tên agenthub không do AgentHub tạo — AgentHub không đụng vào."
+  },
   "about": {
     "title": "Giới thiệu",
     "description": "Thông tin runtime của máy chủ.",
@@ -561,16 +569,21 @@
     "deleteAndPurge": "Xóa + xóa dữ liệu",
     "removeKeep": "Xóa (giữ dữ liệu)",
     "remoteSourceBadgeTitle": "Được thu thập từ một máy từ xa",
+    "fieldSyncCodex": "Kéo cả phiên Codex",
+    "fieldRemoteCodexHome": "Thư mục Codex trên máy từ xa (tùy chọn)",
+    "fieldRemoteCodexHomeHint": "Mặc định ~/.codex (wsl:~/.codex khi thư mục Claude nằm trong WSL). Thư mục sessions/ của nó được sao chép về, và các phiên hiện ra như phiên Codex của nguồn này, kèm token và chi phí.",
+    "codexOn": "+ Codex",
+    "syncCodex": "{{n}} Codex",
     "fieldLabelPlaceholder": "Máy dev"
   },
   "cursorPathsNote": "Chỉ mang tính thông tin: phiên Cursor cũng được tính — Cursor tình cờ dùng cùng đường dẫn ~/.claude với Claude Code (cục bộ và trên máy từ xa đã đồng bộ).",
-  "aiRouter": {
-    "title": "AI Router",
+  "aiProxy": {
+    "title": "AI Proxy",
     "description": "Ví dụ 9Router, OpenRouter hoặc gateway tự dựng. Lưu ở đây rồi chọn cho từng session ở ô nhập prompt của workspace.",
     "add": "Thêm profile",
     "edit": "Sửa",
     "remove": "Xoá",
-    "empty": "Chưa lưu profile router nào. Native là chạy thẳng vào API của hãng.",
+    "empty": "Chưa lưu profile proxy nào. Native là chạy thẳng vào API của hãng.",
     "builtinHint": "Dựng sẵn — đây là API của chính hãng, không sửa và không xoá được.",
     "colLabel": "Profile",
     "colBaseUrl": "Endpoint",
@@ -579,16 +592,16 @@
     "keySet": "Đã lưu",
     "keyMissing": "Chưa có",
     "fieldLabel": "Tên",
-    "fieldLabelHint": "Tên bạn sẽ thấy trong form tạo workspace. Gõ tự do.",
+    "fieldLabelHint": "Tên bạn sẽ thấy trong ô chọn AI Proxy của session. Gõ tự do.",
     "fieldBaseUrl": "Base URL",
-    "fieldBaseUrlHint": "Endpoint tương thích OpenAI/Anthropic của router, ví dụ http://localhost:20128/v1",
+    "fieldBaseUrlHint": "URL gốc của proxy, không có /v1 — ví dụ http://localhost:20128. Claude Code tự thêm /v1/messages, Codex tự thêm /v1/responses; /v1 bạn gõ vào sẽ được bỏ đi.",
     "fieldApiKey": "API key",
     "fieldApiKeyHint": "Lưu trên máy này ở quyền 0600, không bao giờ gửi ngược về trình duyệt.",
     "fieldApiKeyKeep": "Để trống nếu muốn giữ key đã lưu.",
     "fieldModel": "Model",
-    "fieldModelHint": "Dùng cho mọi bậc trừ khi bạn ghi đè bên dưới. Nhiều router chỉ cần một tên tượng trưng.",
+    "fieldModelHint": "Dùng cho mọi bậc trừ khi bạn ghi đè bên dưới. Nhiều proxy chỉ cần một tên tượng trưng.",
     "fieldBehavesAs": "Hoạt động như (Claude Code)",
-    "fieldBehavesAsHint": "Không bắt buộc. Model id của Claude mà Claude Code dùng để hiểu các tên model của router này (mặc định effort, context window), ví dụ claude-opus-5-5. Điền khi Claude Code báo một model không có trong model catalog của nó, và chọn đúng model router thật sự chuyển tới. Khi đã đặt, nó thay thiết lập modelPicker của bạn trong các phiên này.",
+    "fieldBehavesAsHint": "Không bắt buộc. Model id của Claude mà Claude Code dùng để hiểu các tên model của proxy này (mặc định effort, context window), ví dụ claude-opus-5-5. Điền khi Claude Code báo một model không có trong model catalog của nó, và chọn đúng model proxy thật sự chuyển tới. Khi đã đặt, nó thay thiết lập modelPicker của bạn trong các phiên này.",
     "perTier": "Ghi đè theo từng bậc",
     "perTierHint": "Để trống một ô là dùng model ở trên.",
     "tier": {
@@ -600,12 +613,12 @@
     },
     "save": "Lưu",
     "cancel": "Huỷ",
-    "removeConfirm": "Xoá profile \"{{label}}\"? Mọi workspace đang dùng nó sẽ được đưa về API gốc của hãng ngay lập tức — cả trên đĩa lẫn trong dashboard.",
+    "removeConfirm": "Xoá profile \"{{label}}\"? Các file session của nó bị xoá theo, và một session từng chạy trên nó sẽ resume bằng API gốc của hãng.",
     "loading": "Đang tải danh sách profile…",
     "test": "Kiểm tra",
     "testing": "Đang kiểm tra…",
-    "testOk": "Endpoint đã trả lời — {{model}} dùng được với key này.",
-    "testFailed": "Không trả lời ({{status}}): {{message}}"
+    "testOk": "đã trả lời — {{model}} dùng được với key này.",
+    "testFailed": "không trả lời ({{status}}): {{message}}"
   },
   "aiTools": {
     "title": "AI Tools",
@@ -687,7 +700,7 @@
   },
   "codexHome": {
     "title": "CODEX_HOME",
-    "description": "Thư mục gốc chứa config và nhật ký phiên của Codex. Dashboard đọc từ đây, ghi layer AI Router vào đây, và mở mọi workspace codex với thư mục này.",
+    "description": "Thư mục gốc chứa config và nhật ký phiên của Codex. Dashboard đọc từ đây, ghi layer AI Proxy vào đây, và mở mọi workspace codex với thư mục này.",
     "restartNote": "Workspace codex đang chạy vẫn dùng thư mục cũ, và hiện là idle, cho tới khi được khởi động lại.",
     "placeholder": "/đường-dẫn/tới/codex-home"
   },
@@ -779,8 +792,8 @@
       "tool": {
         "description": "{{tool}}: đường dẫn, mức dùng, mô hình mặc định và file cấu hình."
       },
-      "aiRouter": {
-        "title": "AI Router",
+      "aiProxy": {
+        "title": "AI Proxy",
         "description": "Các endpoint đứng trước Claude Code và Codex."
       },
       "pricing": {
@@ -802,6 +815,14 @@
       "about": {
         "title": "Giới thiệu",
         "description": "Phiên bản máy chủ, thời gian hoạt động và môi trường chạy."
+      },
+      "snapshots": {
+        "title": "Snapshot",
+        "description": "Các bản sao chỉ đọc, đã đóng băng của phiên, mỗi bản có liên kết riêng."
+      },
+      "reports": {
+        "title": "Báo cáo",
+        "description": "Bản tóm tắt phân tích ghi ra theo lịch, dạng HTML hoặc JSON."
       }
     },
     "backPrevious": "Quay lại",
@@ -839,6 +860,79 @@
     "enable": "Bật",
     "disable": "Tắt"
   },
+  "snapshots": {
+    "title": "Snapshot phiên",
+    "description": "Tạo từ trang của phiên bằng nút Snapshot. Chúng vẫn còn sau khi Xóa dữ liệu; xóa chúng ở đây.",
+    "empty": "Chưa có snapshot nào.",
+    "events": "{{n}} sự kiện",
+    "redacted": "Đã che đường dẫn",
+    "open": "Mở",
+    "copyLink": "Sao chép liên kết",
+    "delete": "Xóa",
+    "deleteTitle": "Xóa snapshot này?",
+    "deleteBody": "Liên kết của nó sẽ không dùng được nữa. Bản thân phiên không bị ảnh hưởng.",
+    "cancel": "Hủy"
+  },
+  "pushIngest": {
+    "title": "Đẩy dữ liệu về (push ingest)",
+    "description": "Cho máy mà dashboard không SSH tới được: máy đó tự đẩy hook của nó tới POST /api/hooks/ingest-batch bằng token tạo ở đây. Các phiên được gắn tên máy gửi lên (push:<tên>) và có trạng thái, sự kiện trực tiếp; chi phí token cần transcript, thứ chỉ nguồn SSH mang về.",
+    "on": "Đang bật — đã có token",
+    "off": "Đang tắt — chưa có token",
+    "create": "Tạo token",
+    "rotate": "Đổi token",
+    "revoke": "Thu hồi",
+    "rotateConfirm": "Tạo token mới? Token hiện tại ngừng hoạt động ngay.",
+    "revokeConfirm": "Thu hồi token và tắt push ingest?",
+    "shownOnce": "Hãy sao chép token này ngay: chỉ bản băm của nó được lưu, nên nó không bao giờ hiện lại.",
+    "copy": "Sao chép",
+    "envOwned": "AGENTHUB_PUSH_TOKEN_SHA256 được đặt bởi môi trường khởi động dashboard; hãy đổi nó ở đó.",
+    "reachHint": "Máy kia phải truy cập được dashboard này: khởi động với DASHBOARD_HOST (và DASHBOARD_ALLOWED_HOSTS cho tên của nó). Qua http thường, token đi trên mạng ở dạng đọc được — chỉ dùng trong mạng tin cậy, hoặc sau TLS. Script chuyển tiếp dưới đây giữ token trong một tệp header, không bao giờ trên dòng lệnh:",
+    "limits": "Tối đa 500 sự kiện và 1 MB mỗi yêu cầu. Hook cho phiên thuộc nguồn khác bị từ chối; đường dẫn transcript bị bỏ (chúng trỏ tới tệp trên máy gửi). Nhận hook Codex; không nhận hook Antigravity."
+  },
+  "privacy": {
+    "title": "Quyền riêng tư",
+    "description": "Những gì AgentHub giữ lại từ hook và lịch sử nhập vào. Cả hai mặc định tắt và chỉ áp dụng cho dữ liệu mới.",
+    "redact": "Che bí mật trước khi lưu",
+    "redactHint": "Khóa API và token có dạng đã biết, header bearer, khóa riêng và giá trị password=/TOKEN= trong payload và tóm tắt sự kiện được thay bằng [redacted]. Transcript trên đĩa là tệp của chính CLI và không bị thay đổi.",
+    "ignore": "Thư mục bỏ qua",
+    "ignoreHint": "Mỗi dòng một đường dẫn tuyệt đối. Hook từ các thư mục này, và mọi thứ bên trong, bị bỏ hoàn toàn; việc nhập lịch sử và bộ đọc Codex cũng bỏ qua phiên của chúng. AGENTHUB_IGNORE_CWD đặt cùng danh sách này.",
+    "envOwned": "Một giá trị ở đây do môi trường khởi động dashboard đặt, và không thể đổi từ trang này."
+  },
+  "reports": {
+    "title": "Báo cáo định kỳ",
+    "description": "Bản tóm tắt những ngày gần nhất — phiên, sự kiện, token, chi phí theo model và theo công cụ AI, công cụ dùng nhiều nhất, ngân sách — ghi ra HTML hoặc JSON theo lịch. Báo cáo và lịch sử chạy được giữ lại khi Xóa dữ liệu.",
+    "add": "Báo cáo mới",
+    "defaultName": "Tóm tắt hằng tuần",
+    "empty": "Chưa có báo cáo định kỳ nào.",
+    "name": "Tên",
+    "windowDays": "Số ngày",
+    "frequency": "Tần suất",
+    "daily": "Hằng ngày",
+    "weekly": "Hằng tuần",
+    "weekday": "Ngày",
+    "hour": "Giờ",
+    "windowHint": "Báo cáo gồm các ngày trọn vẹn trước ngày chạy, theo múi giờ của trình duyệt này.",
+    "save": "Lưu",
+    "cancel": "Hủy",
+    "enabled": "Bật",
+    "runNow": "Chạy ngay",
+    "history": "Lịch sử",
+    "edit": "Sửa",
+    "delete": "Xóa",
+    "everyDay": "Mỗi ngày lúc {{time}}",
+    "everyWeek": "Mỗi {{day}} lúc {{time}}",
+    "window_one": "{{count}} ngày gần nhất",
+    "window_other": "{{count}} ngày gần nhất",
+    "lastRun": "Lần chạy gần nhất {{at}}",
+    "noRuns": "Chưa chạy lần nào.",
+    "trigger": {
+      "schedule": "Theo lịch",
+      "manual": "Thủ công"
+    },
+    "download": "Tải {{format}}",
+    "deleteTitle": "Xóa báo cáo này?",
+    "deleteBody": "Lịch chạy, lịch sử chạy và các tệp nó đã ghi sẽ bị xóa."
+  },
   "prefsBackup": {
     "title": "Tùy chọn của trình duyệt này",
     "description": "Giao diện, ngôn ngữ, cài đặt thông báo, thú cưng, thanh bên và bố cục không gian làm việc được lưu trong trình duyệt này. Lưu chúng ra tệp để chuyển sang trình duyệt khác, hoặc khôi phục từ tệp.",

client/src/i18n/locales/vi/updates.json

@@ -25,6 +25,7 @@
   "releaseUnavailable": "Không đọc được bản phát hành mới nhất từ repo ({{reason}}); đã quay về so sánh theo commit.",
   "pluginAutoNote": "Dashboard này cài dạng plugin của Claude Code. Bấm \"Cập nhật ngay\" sẽ tự tải bản plugin mới, cài lại runtime và khởi động lại server — mất vài phút. Riêng skill và slash command mới thì session Claude Code đang mở chỉ thấy sau khi bạn chạy /reload-plugins ở đó.",
   "pluginUpdating": "Đang tải bản plugin mới và cài lại runtime — mất vài phút, trang sẽ tự reload khi server mới lên...",
+  "pluginAlreadyCurrent": "Không có phiên bản plugin mới nào được tải về, nên dashboard đang chạy được giữ nguyên.",
   "lastPluginUpdateFailed": "Lần cập nhật plugin trước thất bại ở bước \"{{step}}\": {{error}} — chạy /agenthub-update trong Claude Code để khắc phục.",
   "restartingShort": "Đang khởi động lại…",
   "installedTitle": "Đã cài bản {{version}} nhưng chưa chạy",

client/src/lib/__tests__/burnRate.test.ts

@@ -0,0 +1,26 @@
+/**
+ * @file Tests for spendPace — the 7-day burn rate, month to date and the
+ * month-end forecast built from the daily cost series.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, expect, it } from "vitest";
+import { spendPace } from "../burnRate";
+
+describe("spendPace", () => {
+  it("averages the last 7 days and carries the pace to month end", () => {
+    const daily = [
+      { date: "2026-09-28", cost: 70 }, // before the 7-day window (09-29..10-05)
+      { date: "2026-09-30", cost: 7 }, // inside the window, last month
+      { date: "2026-10-01", cost: 7 },
+      { date: "2026-10-05", cost: 14 },
+      { date: "2026-10-06", cost: 99 }, // after today: ignored
+    ];
+    const p = spendPace(daily, "2026-10-05");
+    expect(p.perDay7).toBe(4); // (7 + 7 + 14) / 7
+    expect(p.monthToDate).toBe(21);
+    expect(p.forecastMonth).toBe(21 + 4 * 26); // 26 days left in October
+  });
+  it("is all zero with no spend", () => {
+    expect(spendPace([], "2026-02-28")).toEqual({ perDay7: 0, monthToDate: 0, forecastMonth: 0 });
+  });
+});

client/src/lib/__tests__/dateRange.test.ts

@@ -0,0 +1,47 @@
+/**
+ * @file dateRange.test.ts
+ * @description The Analytics range presets: `?range=` parsing, a preset's
+ * local bounds (week from Monday, month from the 1st), a custom range, and the query params `applyRange` sets.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it } from "vitest";
+import { applyRange, parsePreset, rangeDates } from "../dateRange";
+
+describe("dateRange", () => {
+  const today = new Date(2026, 9, 5, 12); // local 2026-10-05
+
+  it("parses presets, defaulting to all", () => {
+    expect(parsePreset("30d")).toBe("30d");
+    expect(parsePreset("1y")).toBe("all");
+    expect(parsePreset(null)).toBe("all");
+  });
+
+  it("gives a preset's local bounds, today included", () => {
+    expect(rangeDates("7d", {}, today)).toEqual({ from: "2026-09-29", to: "2026-10-05" });
+    expect(rangeDates("90d", {}, today).from).toBe("2026-07-08");
+    expect(rangeDates("all", {}, today)).toEqual({});
+  });
+
+  it("starts the week on Monday and the month on the 1st", () => {
+    const wed = new Date(2026, 9, 7, 12);
+    const sun = new Date(2026, 9, 11, 12);
+    expect(rangeDates("today", {}, wed)).toEqual({ from: "2026-10-07", to: "2026-10-07" });
+    expect(rangeDates("week", {}, wed)).toEqual({ from: "2026-10-05", to: "2026-10-07" });
+    expect(rangeDates("week", {}, sun)).toEqual({ from: "2026-10-05", to: "2026-10-11" });
+    expect(rangeDates("week", {}, today)).toEqual({ from: "2026-10-05", to: "2026-10-05" });
+    expect(rangeDates("month", {}, wed)).toEqual({ from: "2026-10-01", to: "2026-10-07" });
+    expect(rangeDates("custom", { from: "2026-01-01", to: "" }, today)).toEqual({
+      from: "2026-01-01",
+      to: undefined,
+    });
+  });
+
+  it("sets from/to and tz_offset only when there is a bound", () => {
+    expect(applyRange(new URLSearchParams(), {}).toString()).toBe("");
+    const qs = applyRange(new URLSearchParams(), { from: "2026-01-01" });
+    expect(qs.get("from")).toBe("2026-01-01");
+    expect(qs.has("to")).toBe(false);
+    expect(qs.get("tz_offset")).toBe(String(new Date().getTimezoneOffset()));
+  });
+});

client/src/lib/__tests__/newBuildReload.test.ts

@@ -0,0 +1,58 @@
+/**
+ * @file Tests for newBuildReload: after a reconnect the tab reloads once when
+ * the server's version is not this bundle's, never on the first connect,
+ * never for the same version, and not twice for one version.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { eventBus } from "../eventBus";
+import { reloadOnNewBuild } from "../newBuildReload";
+
+const flush = () => new Promise((r) => setTimeout(r, 0));
+
+function setup(serverVersion: string) {
+  const reload = vi.fn();
+  const store = new Map<string, string>();
+  const storage = {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, v),
+  };
+  const off = reloadOnNewBuild({
+    bundle: "2.5.4",
+    health: () => Promise.resolve({ version: serverVersion }),
+    reload,
+    storage,
+  });
+  return { reload, off };
+}
+
+let off: (() => void) | undefined;
+afterEach(() => off?.());
+
+describe("reloadOnNewBuild", () => {
+  it("reloads once after a reconnect onto a new version", async () => {
+    const s = setup("2.5.5");
+    off = s.off;
+    eventBus.setConnected(true); // first connect: nothing to compare against yet
+    await flush();
+    expect(s.reload).not.toHaveBeenCalled();
+    eventBus.setConnected(false);
+    eventBus.setConnected(true);
+    await flush();
+    expect(s.reload).toHaveBeenCalledTimes(1);
+    eventBus.setConnected(false); // same version again: a failed UI build must not loop
+    eventBus.setConnected(true);
+    await flush();
+    expect(s.reload).toHaveBeenCalledTimes(1);
+  });
+
+  it("stays put when the server is this bundle's version", async () => {
+    const s = setup("2.5.4");
+    off = s.off;
+    eventBus.setConnected(false);
+    eventBus.setConnected(true);
+    await flush();
+    expect(s.reload).not.toHaveBeenCalled();
+  });
+});

client/src/lib/__tests__/replay.test.ts

@@ -0,0 +1,96 @@
+/**
+ * @file replay.test.ts
+ * @description Unit tests for the Replay tab's pure derivations: playback
+ * order, lifecycle markers and the session state at a cursor.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect } from "vitest";
+import { chronological, lifecycleMarkers, replayState } from "../replay";
+import type { DashboardEvent } from "../types";
+
+let nextId = 1;
+function ev(event_type: string, sec: number, tool_name: string | null = null, agent = "main") {
+  return {
+    id: nextId++,
+    session_id: "s",
+    agent_id: agent,
+    event_type,
+    tool_name,
+    summary: null,
+    data: null,
+    created_at: new Date(Date.UTC(2026, 9, 1, 10, 0, sec)).toISOString(),
+  } as unknown as DashboardEvent;
+}
+
+const events = [
+  ev("SessionStart", 0),
+  ev("UserPromptSubmit", 1),
+  ev("PreToolUse", 2, "Read"),
+  ev("PostToolUse", 3, "Read"),
+  ev("PreToolUse", 4, "Bash"),
+  ev("PreToolUse", 5, "Read", "sub"),
+  ev("APIError", 6),
+  ev("PostToolUse", 7, "Bash"),
+  ev("Stop", 8),
+];
+
+describe("chronological", () => {
+  it("orders by time, then id", () => {
+    const tie = [ev("Stop", 9), ev("Stop", 9)];
+    const out = chronological([tie[1]!, events[2]!, tie[0]!, events[0]!]);
+    expect(out.map((e) => e.id)).toEqual([events[0]!.id, events[2]!.id, tie[0]!.id, tie[1]!.id]);
+  });
+});
+
+describe("lifecycleMarkers", () => {
+  it("marks lifecycle events at their sequence position", () => {
+    const m = lifecycleMarkers(events);
+    expect(m.map((x) => x.type)).toEqual(["SessionStart", "UserPromptSubmit", "APIError", "Stop"]);
+    expect(m[0]!.pct).toBe(0);
+    expect(m[3]!.pct).toBe(100);
+    expect(m[2]!.index).toBe(6);
+  });
+
+  it("handles a single event", () => {
+    expect(lifecycleMarkers([events[0]!])).toEqual([{ index: 0, type: "SessionStart", pct: 0 }]);
+  });
+});
+
+describe("replayState", () => {
+  it("is empty for no events", () => {
+    const s = replayState([], 0);
+    expect(s.status).toBeNull();
+    expect(s.currentTool).toBeNull();
+    expect(s.toolCounts).toEqual([]);
+  });
+
+  it("tracks the tool in flight and counts up to the cursor", () => {
+    const at4 = replayState(events, 4);
+    expect(at4.currentTool).toBe("Bash");
+    expect(at4.status).toBe("working");
+    expect(at4.prompts).toBe(1);
+    expect(at4.toolCounts).toEqual([
+      { tool: "Bash", count: 1 },
+      { tool: "Read", count: 1 },
+    ]);
+    expect(at4.elapsedMs).toBe(4000);
+
+    const at6 = replayState(events, 6);
+    expect(at6.currentTool).toBe("Read"); // the subagent's, newest still open
+    expect(at6.errors).toBe(1);
+    expect(at6.status).toBe("error");
+    expect(at6.toolCounts[0]).toEqual({ tool: "Read", count: 2 });
+  });
+
+  it("closes a finished tool and an ended turn", () => {
+    expect(replayState(events, 3).currentTool).toBeNull();
+    // Stop on main leaves only the subagent's Read open.
+    expect(replayState(events, 8).currentTool).toBe("Read");
+    expect(replayState(events, 8).status).toBe("waiting");
+  });
+
+  it("clamps a cursor past the end", () => {
+    expect(replayState(events, 99).elapsedMs).toBe(8000);
+  });
+});

client/src/lib/api.ts

@@ -387,6 +387,8 @@ import type {
   AlertEvent,
   AlertRule,
   Analytics,
+  BudgetStatus,
+  RulePreview,
   CodexHooksStatus,
   AntigravityHooksStatus,
   CostResult,
@@ -424,10 +426,17 @@ import type {
   WorkflowRun,
   WorkflowRunsResponse,
   WorkflowRunDetail,
+  SessionSnapshotInfo,
+  SessionSnapshotPayload,
+  QueryPage,
+  ReportDefinition,
+  ReportInput,
+  ReportRun,
 } from "./types";
 
 import { activeSourcesParam } from "./dataScope";
 import i18n from "i18next";
+import { applyRange, type DateRange } from "./dateRange";
 
 // Root path all endpoint paths are appended to. Kept relative (no host) so the
 // same client bundle works behind the Vite dev proxy and in same-origin prod.
@@ -979,10 +988,15 @@ export const api = {
      * day, the viewer's timezone offset is sent so the daily buckets align to
      * the user's local midnight.
      *
+     * @param opts.tool Only sessions of this AI tool (`sessions.tool`).
+     * @param opts.range Local `from`/`to` days: counts, tokens and cost follow
+     *   it; the daily series keep their own window.
      * @returns {@link Analytics} — the chart-ready analytics payload.
      */
-    get: () => {
+    get: (opts: { tool?: string; range?: DateRange } = {}) => {
       const qs = new URLSearchParams({ tz_offset: String(new Date().getTimezoneOffset()) });
+      if (opts.tool) qs.set("tool", opts.tool);
+      applyRange(qs, opts.range);
       applyScope(qs);
       return request<Analytics>(`/analytics?${qs.toString()}`);
     },
@@ -1100,6 +1114,41 @@ export const api = {
       /** DELETE /api/settings/codex-hooks — AgentHub's own hooks only */
       remove: () => request<CodexHooksStatus>("/settings/codex-hooks", { method: "DELETE" }),
     },
+    /** Start the dashboard at boot/login (systemd `--user` / LaunchAgent) — off
+     *  by default; a change never starts or stops the running server. */
+    autostart: {
+      /** GET /api/settings/autostart */
+      get: () => request<AutostartStatus>("/settings/autostart"),
+      /** PUT /api/settings/autostart */
+      set: (enabled: boolean) =>
+        request<AutostartStatus>("/settings/autostart", {
+          method: "PUT",
+          body: JSON.stringify({ enabled }),
+        }),
+    },
+    /** Opt-in secret redaction of stored payloads and the folders whose hooks
+     *  are dropped (`server/lib/privacy.js`). */
+    privacy: {
+      /** GET /api/settings/privacy */
+      get: () => request<PrivacySettings>("/settings/privacy"),
+      /** PUT /api/settings/privacy — any subset of the two fields */
+      save: (data: { redact_secrets?: boolean; ignore_cwd?: string[] }) =>
+        request<PrivacySettings & { ok: boolean }>("/settings/privacy", {
+          method: "PUT",
+          body: JSON.stringify(data),
+        }),
+    },
+    /** The bearer token for `POST /api/hooks/ingest-batch`. Only its hash is
+     *  stored: `rotate` returns the new token this once, `get` never does. */
+    pushToken: {
+      /** GET /api/settings/push-token */
+      get: () => request<PushTokenStatus>("/settings/push-token"),
+      /** POST /api/settings/push-token — a new token; the old one stops working */
+      rotate: () =>
+        request<PushTokenStatus & { token: string }>("/settings/push-token", { method: "POST" }),
+      /** DELETE /api/settings/push-token — push ingest off */
+      revoke: () => request<PushTokenStatus>("/settings/push-token", { method: "DELETE" }),
+    },
     /** AgentHub's named hook in `~/.gemini/config/hooks.json` for agy — changed
      *  only on a click; agy runs it with no trust step. */
     antigravityHooks: {
@@ -1256,6 +1305,8 @@ export const api = {
      * "all" (which means "no filter"), keeping the default URL param-free.
      *
      * @param status Optional lifecycle filter; "all" (or omitted) means no filter.
+     * @param tool Optional AI tool id (`sessions.tool`).
+     * @param range Optional local date range: sessions started in it.
      * @param sections Optional subset of the bundle to compute (`?sections=`);
      *   the server skips the rest, so a page reading a few cards asks for those.
      * @returns {@link WorkflowData} — the aggregated workflow-intelligence panel,
@@ -1263,10 +1314,14 @@ export const api = {
      */
     get: <K extends keyof WorkflowData = keyof WorkflowData>(
       status?: string,
+      tool?: string,
+      range?: DateRange,
       sections?: readonly K[]
     ) => {
       const qs = new URLSearchParams();
       if (status && status !== "all") qs.set("status", status);
+      if (tool) qs.set("tool", tool);
+      applyRange(qs, range);
       if (sections?.length) qs.set("sections", sections.join(","));
       const q = qs.toString();
       return request<Pick<WorkflowData, K>>(`/workflows${q ? `?${q}` : ""}`);
@@ -1381,15 +1436,18 @@ export const api = {
      *
      * @returns {@link CostResult} — the aggregate cost breakdown across sessions.
      */
-    totalCost: (opts: { lane?: number; date?: string } = {}) => {
+    totalCost: (opts: { lane?: number; date?: string; tool?: string; range?: DateRange } = {}) => {
       // Scope the aggregate to the active data-scope, exactly like the sessions /
       // stats / analytics endpoints — otherwise switching the Data scope selector
       // left the Dashboard "total cost" showing the un-narrowed global total.
-      // `lane`: only the sessions that workspace owns.
+      // `lane`: only the sessions that workspace owns; `tool`: one AI tool's.
       const qs = new URLSearchParams({ tz_offset: String(new Date().getTimezoneOffset()) });
       if (opts.lane !== undefined) qs.set("lane", String(opts.lane));
       // `date` (local YYYY-MM-DD): only that day's usage, breakdown included.
       if (opts.date) qs.set("date", opts.date);
+      if (opts.tool) qs.set("tool", opts.tool);
+      // `range`: total, breakdown and by_tool for those local days only.
+      applyRange(qs, opts.range);
       applyScope(qs);
       return request<CostResult>(`/pricing/cost?${qs.toString()}`);
     },
@@ -2041,13 +2099,6 @@ export const api = {
       }),
   },
 
-  // ──────────────────────────────── AI Router API ─────────────────────────────
-  /** Named AI Router endpoints (9Router, OpenRouter, a self-hosted gateway) a
-   *  lane can be pointed at instead of the vendor's own API. Managed in the
-   *  **AI Router** tab of Settings; attached to a lane when the lane is created.
-   *
-   *  No response here ever carries an API key — a saved profile reports only
-   *  `hasKey`. */
   /** AgentHub's own git credentials (issue #45), shared by every user of this
    *  install. No response ever carries a password — only `hasToken`. */
   gitCredentials: {
@@ -2066,6 +2117,24 @@ export const api = {
         { method: "DELETE" }
       ),
   },
+  /** Frozen session copies (`/api/snapshots`, `server/routes/snapshots.js`). */
+  snapshots: {
+    list: () => request<{ snapshots: SessionSnapshotInfo[] }>("/snapshots"),
+    /** Freeze a session; `filePaths` redacts paths before anything is stored. */
+    create: (sessionId: string, opts?: { filePaths?: boolean }) =>
+      request<{ snapshot: SessionSnapshotInfo }>("/snapshots", {
+        method: "POST",
+        body: JSON.stringify({
+          session_id: sessionId,
+          redact: { file_paths: opts?.filePaths === true },
+        }),
+      }),
+    get: (token: string) =>
+      request<{ snapshot: SessionSnapshotInfo; payload: SessionSnapshotPayload }>(
+        `/snapshots/${encodeURIComponent(token)}`
+      ),
+    remove: (id: number) => request<{ ok: true }>(`/snapshots/${id}`, { method: "DELETE" }),
+  },
   /** The mascot's custom pets (`/api/pets`, `server/lib/pets.js`). */
   pets: {
     list: () => request<PetList>("/pets"),
@@ -2143,37 +2212,44 @@ export const api = {
       return `${BASE}/ai-tools/${encodeURIComponent(id)}/icon${q}`;
     },
   },
-  aiRouters: {
-    /** GET /api/ai-routers - every profile, the built-in `native` one first. */
-    list: () => request<{ items: AiRouter[] }>("/ai-routers"),
-    /** POST /api/ai-routers - save a new profile. */
-    create: (body: AiRouterInput) =>
-      request<AiRouter>("/ai-routers", { method: "POST", body: JSON.stringify(body) }),
+  // ──────────────────────────────── AI Proxy API ──────────────────────────────
+  /** Named AI Proxy endpoints (9Router, OpenRouter, a self-hosted gateway) a
+   *  new session can run on instead of the vendor's own API. Managed in the
+   *  **AI Proxy** page of Settings; chosen per session (`proxy` on a start).
+   *
+   *  No response here ever carries an API key — a saved profile reports only
+   *  `hasKey`. */
+  aiProxies: {
+    /** GET /api/ai-proxies - every profile, the built-in `native` one first. */
+    list: () => request<{ items: AiProxy[] }>("/ai-proxies"),
+    /** POST /api/ai-proxies - save a new profile. */
+    create: (body: AiProxyInput) =>
+      request<AiProxy>("/ai-proxies", { method: "POST", body: JSON.stringify(body) }),
     /**
-     * PATCH /api/ai-routers/:name - change a saved profile. Omitting `apiKey`
+     * PATCH /api/ai-proxies/:name - change a saved profile. Omitting `apiKey`
      * keeps the stored one, which is what the edit form always does: it cannot
      * display a key, so it has none to send back.
      */
-    update: (name: string, body: Partial<AiRouterInput>) =>
-      request<AiRouter>(`/ai-routers/${encodeURIComponent(name)}`, {
+    update: (name: string, body: Partial<AiProxyInput>) =>
+      request<AiProxy>(`/ai-proxies/${encodeURIComponent(name)}`, {
         method: "PATCH",
         body: JSON.stringify(body),
       }),
     /**
-     * POST /api/ai-routers/test - ask the endpoint itself whether it works,
-     * before a profile that cannot reach anything is saved onto a lane.
+     * POST /api/ai-proxies/test - ask the endpoint itself whether it works
+     * for Claude Code and for Codex, before a session finds out it does not.
      */
-    test: (body: AiRouterTestInput) =>
-      request<AiRouterTestResult>("/ai-routers/test", {
+    test: (body: AiProxyTestInput) =>
+      request<AiProxyTestResult>("/ai-proxies/test", {
         method: "POST",
         body: JSON.stringify(body),
       }),
     /**
-     * DELETE /api/ai-routers/:name - also removes the session files that
+     * DELETE /api/ai-proxies/:name - also removes the session files that
      * copy its key.
      */
     remove: (name: string) =>
-      request<{ removed: string }>(`/ai-routers/${encodeURIComponent(name)}`, {
+      request<{ removed: string }>(`/ai-proxies/${encodeURIComponent(name)}`, {
         method: "DELETE",
       }),
   },
@@ -2329,9 +2405,65 @@ export const api = {
        */
       remove: (id: string) =>
         request<{ ok: true }>(`/alerts/rules/${encodeURIComponent(id)}`, { method: "DELETE" }),
+      /**
+       * POST /api/alerts/rules/preview - what a rule WOULD have fired over the
+       * last `days` (default 7) of recorded history. Saves and fires nothing.
+       */
+      preview: (body: {
+        rule_type: AlertRule["rule_type"];
+        config: AlertRule["config"];
+        cooldown_seconds?: number;
+        days?: number;
+      }) =>
+        request<RulePreview>("/alerts/rules/preview", {
+          method: "POST",
+          body: JSON.stringify(body),
+        }),
     },
   },
 
+  /** Spend budgets — `budget` alert rules — with their current-period spend. */
+  budgets: {
+    /** GET /api/budgets/status */
+    status: () => request<{ budgets: BudgetStatus[] }>("/budgets/status"),
+  },
+
+  /** Query Explorer (`GET /api/query`, `server/routes/query.js`). */
+  query: {
+    /** One page of the filtered rows; `params` are the page's filters. */
+    page: (params: URLSearchParams) =>
+      request<QueryPage>(`/query?${applyScope(new URLSearchParams(params)).toString()}`),
+    /** A download link for the whole filtered set (≤ `export_cap` rows). */
+    exportUrl: (params: URLSearchParams, format: "csv" | "json") => {
+      const qs = applyScope(new URLSearchParams(params));
+      qs.delete("limit");
+      qs.delete("offset");
+      qs.set("format", format);
+      return `${BASE}/query?${qs.toString()}`;
+    },
+  },
+
+  /** Scheduled reports (`/api/reports`, `server/lib/reports.js`). */
+  reports: {
+    list: () => request<{ reports: ReportDefinition[] }>("/reports"),
+    create: (body: ReportInput) =>
+      request<{ report: ReportDefinition }>("/reports", {
+        method: "POST",
+        body: JSON.stringify(body),
+      }),
+    update: (id: number, body: Partial<ReportInput>) =>
+      request<{ report: ReportDefinition }>(`/reports/${id}`, {
+        method: "PUT",
+        body: JSON.stringify(body),
+      }),
+    remove: (id: number) => request<{ ok: true }>(`/reports/${id}`, { method: "DELETE" }),
+    run: (id: number) => request<{ run: ReportRun }>(`/reports/${id}/run`, { method: "POST" }),
+    runs: (id: number) => request<{ runs: ReportRun[] }>(`/reports/${id}/runs`),
+    /** A run's file, as a download link. */
+    fileUrl: (id: number, runId: number, format: string) =>
+      `${BASE}/reports/${id}/runs/${runId}/${encodeURIComponent(format)}`,
+  },
+
   // ───────────────────────────────── Webhooks API ─────────────────────────────
   /** Outbound webhook target CRUD, provider metadata, test sends, and the
    *  per-target delivery log. */
@@ -3175,10 +3307,10 @@ export interface CcProfileUsage {
  *  user + project scope in one response. */
 export type CcScope = "user" | "project" | "all";
 
-/** The per-tier model names an AI Router profile carries. Each maps to one env
- *  var Claude Code reads; a router that names its models once fills them all
+/** The per-tier model names an AI Proxy profile carries. Each maps to one env
+ *  var Claude Code reads; a proxy that names its models once fills them all
  *  from the profile's `model`. */
-export interface AiRouterModels {
+export interface AiProxyModels {
   opus: string;
   sonnet: string;
   haiku: string;
@@ -3186,7 +3318,6 @@ export interface AiRouterModels {
   subagent: string;
 }
 
-/** One saved AI Router profile, as the API returns it — **never** with a key. */
 /** A saved git login, as the server reports it: never the password. */
 export interface GitCredential {
   protocol: "http" | "https";
@@ -3230,8 +3361,8 @@ export interface AiTool {
   resume: boolean;
   /** Offers the per-run "Bypass permissions" switch. */
   bypass: boolean;
-  /** Can use an AI Router profile (Claude, Codex); others are native only. */
-  routerCapable: boolean;
+  /** Can use an AI Proxy profile (Claude, Codex); others are native only. */
+  proxyCapable: boolean;
   /** What Install runs; null when the catalog names no install. */
   install: { kind: "npm"; package: string } | { kind: "script"; url: string } | null;
   /** What Update runs; `self` is the tool's own updater with these args. */
@@ -3289,37 +3420,47 @@ export interface AiToolJob {
   log: string;
 }
 
-export interface AiRouter {
-  /** Identifier, derived from the label. Stable: a lane stores this. */
+/** One saved AI Proxy profile, as the API returns it — **never** with a key. */
+export interface AiProxy {
+  /** Identifier, derived from the label. Stable: a session's run row stores it. */
   name: string;
   label: string;
   /** True only for the read-only `native` profile (the vendor's own API). */
   builtin: boolean;
-  /** Empty string for `native`, an http(s) URL otherwise. */
+  /** Empty string for `native`, else the proxy's http(s) ROOT, without `/v1`. */
   baseUrl: string;
   /** Whether a key is stored. The key itself never leaves the server. */
   hasKey: boolean;
+  /** "" for `native`, which has no model of its own. */
   model: string;
-  models: AiRouterModels;
-  /** Claude model id the router's own model names behave as; "" when unset. */
+  /** Empty for `native`. */
+  models: Partial<AiProxyModels>;
+  /** Claude model id the proxy's own model names behave as; "" when unset. */
   behavesAs?: string;
   savedAt?: string;
 }
 
-/** Outcome of POST /api/ai-routers/test. A router that answered with an error
- *  is still a successful HTTP call: `ok` is the ROUTER's verdict, `status` is
- *  its HTTP code (null when nothing answered at all), and `message` is its own
- *  words — truncated server-side, never the key. */
-export interface AiRouterTestResult {
+/** One probe of POST /api/ai-proxies/test. A proxy that answered with an
+ *  error is still a successful HTTP call: `ok` is the PROXY's verdict, `status`
+ *  is its HTTP code (null when nothing answered at all), and `message` is its
+ *  own words — truncated server-side, never the key. */
+export interface AiProxyProbe {
   ok: boolean;
   status: number | null;
   message: string;
 }
 
-/** Body for POST /api/ai-routers/test. `name` lets the server reuse the stored
+/** Outcome of POST /api/ai-proxies/test: Claude Code's `/v1/messages` and
+ *  Codex's `/v1/responses`, probed side by side. */
+export interface AiProxyTestResult {
+  claude: AiProxyProbe;
+  codex: AiProxyProbe;
+}
+
+/** Body for POST /api/ai-proxies/test. `name` lets the server reuse the stored
  *  key for a profile being edited — but only while `baseUrl` still matches the
  *  saved one, so a typed-in endpoint always needs a typed-in key. */
-export interface AiRouterTestInput {
+export interface AiProxyTestInput {
   baseUrl: string;
   model: string;
   apiKey?: string;
@@ -3327,14 +3468,14 @@ export interface AiRouterTestInput {
 }
 
 /** Body accepted when creating or updating a profile. */
-export interface AiRouterInput {
+export interface AiProxyInput {
   label: string;
   baseUrl: string;
   /** Omit on update to keep the stored key. */
   apiKey?: string;
   model: string;
   /** Any tier left out is filled from `model`. */
-  models?: Partial<AiRouterModels>;
+  models?: Partial<AiProxyModels>;
   /** A Claude model id; "" clears it. Omit on update to keep the stored one. */
   behavesAs?: string;
 }
@@ -3992,8 +4133,8 @@ export interface RunStartArgs {
   resumeLast?: boolean;
   /** Turn off the tool's permission prompts for THIS run (its catalog bypass args). */
   bypass?: boolean;
-  /** AI Router profile THIS session runs on; omitted = native, or a resume's own. */
-  router?: string;
+  /** AI Proxy profile THIS session runs on; omitted = native, or a resume's own. */
+  proxy?: string;
 }
 
 /** A lane's tmux-backed terminal run — one per lane, id is the tmux session
@@ -4172,6 +4313,10 @@ export interface RemoteSource {
   identity_file: string | null;
   /** Optional remote CLAUDE_HOME (default `~/.claude`). */
   remote_home: string | null;
+  /** Whether Codex history (`<remote_codex_home>/sessions`) is pulled too. */
+  sync_codex?: boolean;
+  /** Optional remote CODEX_HOME (default `~/.codex`). */
+  remote_codex_home?: string | null;
   /** Whether the background poller pulls this source. */
   enabled: boolean;
   /** Last known sync state. */
@@ -4188,6 +4333,9 @@ export interface RemoteSource {
     errors?: number;
     sessions_seen?: number;
     sessions_tagged?: number;
+    /** Codex journals read / sessions written, when Codex is pulled. */
+    codex_files?: number;
+    codex_sessions?: number;
   } | null;
   /** Live number of sessions currently attributed to this source. */
   session_count?: number;
@@ -4202,9 +4350,35 @@ export interface RemoteSourceInput {
   ssh_port?: number | null;
   identity_file?: string | null;
   remote_home?: string | null;
+  sync_codex?: boolean;
+  remote_codex_home?: string | null;
   enabled?: boolean;
 }
 
+/** GET /api/settings/autostart. `available` false: no systemd `--user` /
+ *  launchd GUI session here; `foreign`: a unit named agenthub AgentHub did not
+ *  write, which it never touches. */
+export interface AutostartStatus {
+  available: boolean;
+  kind: "systemd" | "launchd";
+  enabled: boolean;
+  foreign: boolean;
+}
+
+/** GET /api/settings/privacy. A field the environment set is `env_owned`
+ *  and cannot be saved from the dashboard. */
+export interface PrivacySettings {
+  redact_secrets: boolean;
+  ignore_cwd: string[];
+  env_owned: { redact_secrets: boolean; ignore_cwd: boolean };
+}
+
+/** GET /api/settings/push-token — whether push ingest is on; never the token. */
+export interface PushTokenStatus {
+  enabled: boolean;
+  env_owned: boolean;
+}
+
 /** Result of a connectivity probe (POST /:id/test). */
 export interface RemoteSourceTestResult {
   ok: boolean;

client/src/lib/burnRate.ts

@@ -0,0 +1,40 @@
+/**
+ * @file Spend pace from the daily cost series (`daily_costs` of GET
+ * /api/pricing/cost, already in local dates): the average cost per day over
+ * the last 7 days, the month to date, and a month-end forecast that carries
+ * that pace over the days left in the month.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export interface SpendPace {
+  /** Average cost per day over the 7 days ending today (today included). */
+  perDay7: number;
+  /** Spend since the 1st of this month. */
+  monthToDate: number;
+  /** monthToDate + perDay7 × the days left after today. */
+  forecastMonth: number;
+}
+
+/**
+ * @param daily `{date: "YYYY-MM-DD", cost}` per local day, any order.
+ * @param today Today's local date, `YYYY-MM-DD`.
+ */
+export function spendPace(daily: Array<{ date: string; cost: number }>, today: string): SpendPace {
+  const [y, m, d] = today.split("-").map(Number) as [number, number, number];
+  const day = (offset: number) => {
+    const t = new Date(Date.UTC(y, m - 1, d + offset));
+    return t.toISOString().slice(0, 10);
+  };
+  const weekStart = day(-6);
+  const monthStart = today.slice(0, 8) + "01";
+  let week = 0;
+  let mtd = 0;
+  for (const r of daily) {
+    if (r.date > today) continue;
+    if (r.date >= weekStart) week += r.cost;
+    if (r.date >= monthStart) mtd += r.cost;
+  }
+  const daysInMonth = new Date(Date.UTC(y, m, 0)).getUTCDate();
+  const perDay7 = week / 7;
+  return { perDay7, monthToDate: mtd, forecastMonth: mtd + perDay7 * (daysInMonth - d) };
+}

client/src/lib/dateRange.ts

@@ -0,0 +1,64 @@
+/**
+ * @file dateRange — the Analytics date range: the preset ids kept in `?range=`
+ * (today / this week from Monday / this month from the 1st / 7d / 30d / 90d /
+ * all / custom), and `rangeDates`, which turns a preset (or
+ * a custom from/to) into the local `YYYY-MM-DD` bounds sent as `from`/`to`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const RANGE_PRESETS = [
+  "today",
+  "week",
+  "month",
+  "7d",
+  "30d",
+  "90d",
+  "all",
+  "custom",
+] as const;
+export type RangePreset = (typeof RANGE_PRESETS)[number];
+
+/** Local, inclusive bounds; an absent end is open. */
+export interface DateRange {
+  from?: string;
+  to?: string;
+}
+
+/** A `?range=` value, or `all` for anything else. */
+export function parsePreset(v: string | null): RangePreset {
+  return (RANGE_PRESETS as readonly string[]).includes(v ?? "") ? (v as RangePreset) : "all";
+}
+
+/** `d` as a local `YYYY-MM-DD`. */
+export function localDate(d: Date): string {
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+}
+
+/** The bounds of a preset: `7d` = today and the 6 days before it; `week`
+ *  starts on Monday, `month` on the 1st, both ending today. */
+export function rangeDates(
+  preset: RangePreset,
+  custom: DateRange = {},
+  today: Date = new Date()
+): DateRange {
+  if (preset === "all") return {};
+  if (preset === "custom") {
+    return { from: custom.from || undefined, to: custom.to || undefined };
+  }
+  const start = new Date(today);
+  if (preset === "week") start.setDate(today.getDate() - ((today.getDay() + 6) % 7));
+  else if (preset === "month") start.setDate(1);
+  else if (preset !== "today") start.setDate(today.getDate() - (parseInt(preset, 10) - 1));
+  return { from: localDate(start), to: localDate(today) };
+}
+
+/** Set `from`/`to` (and `tz_offset`, which reads them) on a query string. */
+export function applyRange(qs: URLSearchParams, range?: DateRange): URLSearchParams {
+  if (range?.from) qs.set("from", range.from);
+  if (range?.to) qs.set("to", range.to);
+  if ((range?.from || range?.to) && !qs.has("tz_offset")) {
+    qs.set("tz_offset", String(new Date().getTimezoneOffset()));
+  }
+  return qs;
+}

client/src/lib/newBuildReload.ts

@@ -0,0 +1,46 @@
+/**
+ * @file newBuildReload.ts
+ * @description Reloads the tab onto the new UI build after the server was
+ * updated. Every update — the dashboard's own Update button in any tab,
+ * `/agenthub-update`, a restart onto a newer plugin — drops the WebSocket; when
+ * it comes back, `GET /api/health` names the server's version, and a version
+ * other than this bundle's `__APP_VERSION__` means the page is stale. At most
+ * one reload per version (sessionStorage), so a server whose UI build failed
+ * cannot make the tab reload on every reconnect.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { eventBus } from "./eventBus";
+
+const KEY = "agenthub.reloadedFor";
+
+export function reloadOnNewBuild({
+  bundle = __APP_VERSION__,
+  health = () => fetch("/api/health").then((r) => r.json() as Promise<{ version?: string }>),
+  reload = () => window.location.reload(),
+  storage = window.sessionStorage,
+}: {
+  bundle?: string;
+  health?: () => Promise<{ version?: string }>;
+  reload?: () => void;
+  storage?: Pick<Storage, "getItem" | "setItem">;
+} = {}): () => void {
+  let wasDown = false;
+  return eventBus.onConnection((up) => {
+    if (!up) {
+      wasDown = true;
+      return;
+    }
+    if (!wasDown) return;
+    wasDown = false;
+    health()
+      .then(({ version }) => {
+        if (!version || version === bundle || storage.getItem(KEY) === version) return;
+        storage.setItem(KEY, version);
+        reload();
+      })
+      .catch(() => {
+        /* the next reconnect asks again */
+      });
+  });
+}

client/src/lib/replay.ts

@@ -0,0 +1,124 @@
+/**
+ * @file replay.ts
+ * @description Pure derivations behind the session Replay tab: events in
+ * playback order, the lifecycle markers on its mini-map, and the state a
+ * session was in at a cursor (status, tool in flight, tool counts).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { AgentStatus, DashboardEvent } from "./types";
+import { statusFromEventType } from "./event-grouping";
+
+export const REPLAY_SPEEDS = [0.5, 1, 2, 5] as const;
+/** One event per this many ms at 1× — playback walks the sequence, not the
+ *  wall clock, so an hour-long pause does not stall the replay. */
+export const REPLAY_STEP_MS = 500;
+
+/** Event types drawn on the mini-map, in legend order. */
+export const LIFECYCLE_TYPES = [
+  "SessionStart",
+  "UserPromptSubmit",
+  "Compaction",
+  "SubagentStop",
+  "APIError",
+  "Stop",
+] as const;
+
+/** Oldest first; `id` breaks timestamp ties. */
+export function chronological(events: DashboardEvent[]): DashboardEvent[] {
+  return [...events].sort(
+    (a, b) => a.created_at.localeCompare(b.created_at) || (a.id ?? 0) - (b.id ?? 0)
+  );
+}
+
+export interface ReplayMarker {
+  index: number;
+  type: string;
+  /** Position on the mini-map, 0–100, matching the slider's scale. */
+  pct: number;
+}
+
+export function lifecycleMarkers(events: DashboardEvent[]): ReplayMarker[] {
+  const kinds = new Set<string>(LIFECYCLE_TYPES);
+  const last = Math.max(1, events.length - 1);
+  const out: ReplayMarker[] = [];
+  events.forEach((e, index) => {
+    if (kinds.has(e.event_type)) out.push({ index, type: e.event_type, pct: (index / last) * 100 });
+  });
+  return out;
+}
+
+export interface ReplayState {
+  status: AgentStatus | null;
+  /** The newest tool started and not yet finished at the cursor. */
+  currentTool: string | null;
+  /** Tool calls (PreToolUse) so far, most used first. */
+  toolCounts: { tool: string; count: number }[];
+  prompts: number;
+  errors: number;
+  compactions: number;
+  /** From the first event to the cursor's. */
+  elapsedMs: number;
+}
+
+/** The session as it stood after `events[cursor]` (events in playback order). */
+export function replayState(events: DashboardEvent[], cursor: number): ReplayState {
+  const end = Math.min(cursor, events.length - 1);
+  const open: { agent: string; tool: string }[] = [];
+  const counts = new Map<string, number>();
+  let prompts = 0;
+  let errors = 0;
+  let compactions = 0;
+  for (let i = 0; i <= end; i++) {
+    const e = events[i]!;
+    const agent = e.agent_id ?? "";
+    switch (e.event_type) {
+      case "PreToolUse":
+        if (e.tool_name) {
+          open.push({ agent, tool: e.tool_name });
+          counts.set(e.tool_name, (counts.get(e.tool_name) ?? 0) + 1);
+        }
+        break;
+      case "PostToolUse":
+      case "PostToolUseFailure": {
+        for (let j = open.length - 1; j >= 0; j--) {
+          if (open[j]!.agent === agent && open[j]!.tool === e.tool_name) {
+            open.splice(j, 1);
+            break;
+          }
+        }
+        if (e.event_type === "PostToolUseFailure") errors++;
+        break;
+      }
+      case "Stop":
+      case "SubagentStop":
+      case "SessionEnd":
+        // A turn that ended leaves nothing of that agent in flight.
+        for (let j = open.length - 1; j >= 0; j--) if (open[j]!.agent === agent) open.splice(j, 1);
+        break;
+      case "UserPromptSubmit":
+        prompts++;
+        break;
+      case "APIError":
+        errors++;
+        break;
+      case "Compaction":
+        compactions++;
+        break;
+    }
+  }
+  const first = events[0];
+  const at = end >= 0 ? events[end] : undefined;
+  return {
+    status: at ? statusFromEventType(at.event_type) : null,
+    currentTool: open[open.length - 1]?.tool ?? null,
+    toolCounts: [...counts]
+      .map(([tool, count]) => ({ tool, count }))
+      .sort((a, b) => b.count - a.count || a.tool.localeCompare(b.tool)),
+    prompts,
+    errors,
+    compactions,
+    elapsedMs:
+      first && at ? Math.max(0, Date.parse(at.created_at) - Date.parse(first.created_at)) : 0,
+  };
+}

client/src/lib/settingsSearch.ts

@@ -39,6 +39,20 @@ export const SETTINGS_INDEX: {
     to: "#language",
     keywords: ["english", "tiếng việt", "vietnamese", "ngôn ngữ"],
   },
+  {
+    section: "data",
+    titleKey: "pushIngest.title",
+    descKey: "pushIngest.description",
+    keywords: ["token", "push", "remote", "batch"],
+    to: "#push-ingest",
+  },
+  {
+    section: "data",
+    titleKey: "privacy.title",
+    descKey: "privacy.description",
+    keywords: ["redact", "secrets", "ignore", "folder", "cwd"],
+    to: "#privacy",
+  },
   {
     section: "data",
     titleKey: "lanesSection.title",
@@ -90,6 +104,12 @@ export const SETTINGS_INDEX: {
     titleKey: "about.title",
     keywords: ["version", "server", "database", "uptime"],
   },
+  {
+    section: "about",
+    titleKey: "autostart.label",
+    keywords: ["autostart", "boot", "login", "systemd", "launchd", "service"],
+    to: "#autostart",
+  },
   {
     section: "appearance",
     titleKey: "sagi.title",
@@ -105,6 +125,18 @@ export const SETTINGS_INDEX: {
     keywords: ["codex-pets", "upload", "import"],
     to: "#pet",
   },
+  {
+    section: "snapshots",
+    titleKey: "snapshots.title",
+    descKey: "snapshots.description",
+    keywords: ["share", "freeze", "link", "redact"],
+  },
+  {
+    section: "reports",
+    titleKey: "reports.title",
+    descKey: "reports.description",
+    keywords: ["schedule", "report", "email", "summary", "html", "json", "export"],
+  },
   { section: "appearance", titleKey: "appearance.mode", keywords: ["dark", "light", "system"] },
   { section: "appearance", titleKey: "appearance.darkThemes", keywords: ["theme", "colors"] },
   { section: "appearance", titleKey: "appearance.lightThemes" },
@@ -227,7 +259,7 @@ export const SETTINGS_INDEX: {
   { section: "agents/codex", titleKey: "codexConfig:tabs.plugins", to: "?tab=plugins" },
   { section: "agents/antigravity", titleKey: "antigravityHooks.title", keywords: ["agy", "hooks"] },
   { section: "agents/*", titleKey: "toolTab.defaultModel", keywords: ["model", "config"] },
-  { section: "ai-router", titleKey: "aiRouter.title", keywords: ["proxy", "endpoint", "key"] },
+  { section: "ai-proxy", titleKey: "aiProxy.title", keywords: ["router", "endpoint", "key"] },
   { section: "pricing", titleKey: "pricing.title", keywords: ["cost", "price", "tokens"] },
   { section: "git-credentials", titleKey: "gitCreds.title", keywords: ["login", "token"] },
   { section: "worktrees", titleKey: "worktrees.showUntracked", keywords: ["hide", "suggestions"] },

client/src/lib/types.ts

@@ -731,8 +731,8 @@ export interface Session {
   source?: string;
   /** The AI coding CLI that produced the session: `"claude"` (the default —
    * Claude Code's hooks and imported transcripts), `"codex"` (Codex's rollout
-   * journals and hooks) or `"antigravity"` (agy's conversation files and
-   * hooks). Attach/resume offer `claude` rows only. Maps to `sessions.tool`. */
+   * journals and hooks), `"antigravity"` (agy's conversation files and
+   * hooks) or `"cursor"` (Cursor's agent transcripts, no tokens). Attach/resume offer `claude` rows only. Maps to `sessions.tool`. */
   tool?: string;
   /** The workspace (lane id) that owns the session — the one whose pane held
    * it; null for a session no workspace started.
@@ -1204,6 +1204,9 @@ export interface CostResult {
   feature_costs?: CostFeatureCosts;
   /** Present only when at least one model had usage but no pricing rule. */
   unpriced_models?: UnpricedModel[];
+  /** Cost per AI tool (`sessions.tool`), most expensive first. Only
+   *  GET /api/pricing/cost sends it, not the per-session route. */
+  by_tool?: Array<{ tool: string; cost: number }>;
 }
 
 /** GET /api/pricing/quota: plan quota spent per native tool (server/lib/quota.js). */
@@ -1533,7 +1536,13 @@ export interface CodexConfigChangedPayload {
 /** Kind of condition an {@link AlertRule} evaluates. "event_pattern" and
  *  "token_threshold" are checked on every hook ingest; "inactivity" and
  *  "status_duration" are checked on a periodic server-side sweep. */
-export type AlertRuleType = "event_pattern" | "inactivity" | "status_duration" | "token_threshold";
+export type AlertRuleType =
+  | "event_pattern"
+  | "inactivity"
+  | "status_duration"
+  | "token_threshold"
+  | "cost_threshold"
+  | "budget";
 
 /**
  * Rule-type-specific settings for an {@link AlertRule}. Which fields apply
@@ -1544,6 +1553,9 @@ export type AlertRuleType = "event_pattern" | "inactivity" | "status_duration" |
  *  - inactivity: `minutes` of session silence before firing.
  *  - status_duration: `status` held continuously for `minutes`.
  *  - token_threshold: cumulative `total_tokens` for a session.
+ *  - cost_threshold: a session's cost reaching `usd`.
+ *  - budget: spend per `period` against `limit_usd`, firing each of
+ *    `thresholds` (percent) once per period, optionally for one `tool`/`lane`.
  */
 export interface AlertRuleConfig {
   /** event_pattern: exact `DashboardEvent.event_type` to match. */
@@ -1565,6 +1577,55 @@ export interface AlertRuleConfig {
   status?: "working" | "waiting";
   /** token_threshold: cumulative token count that triggers the alert. */
   total_tokens?: number;
+  /** cost_threshold: a session's cost in USD that triggers the alert. */
+  usd?: number;
+  /** budget: the period spend is measured over (local time). */
+  period?: "day" | "week" | "month";
+  /** budget: the period's limit in USD. */
+  limit_usd?: number;
+  /** budget: percents of the limit that fire, each once per period. */
+  thresholds?: number[];
+  /** budget: only this AI tool's sessions. */
+  tool?: string;
+  /** budget: only the sessions this workspace owns. */
+  lane?: number;
+  /** budget: the browser's getTimezoneOffset() when the rule was saved. */
+  tz_offset?: number;
+}
+
+/** One budget from GET /api/budgets/status: its rule plus current-period spend. */
+export interface BudgetStatus {
+  id: string;
+  name: string;
+  config: AlertRuleConfig;
+  /** Local dates (inclusive) of the current period. */
+  period_start: string;
+  period_end: string;
+  spend: number;
+  /** The spend at the current pace, carried to the period's end. */
+  projected: number;
+  /** Spend as a percent of `limit_usd`. */
+  pct: number;
+  /** Thresholds already reached this period, lowest first. */
+  crossed: number[];
+}
+
+/** POST /api/alerts/rules/preview — what a rule would have fired, read-only. */
+export interface RulePreview {
+  /** False for a type history cannot replay (status_duration). */
+  supported: boolean;
+  window_days: number;
+  fires: number;
+  sessions: number;
+  samples: Array<{ session_id: string; at: string } & Record<string, unknown>>;
+  /** budget only: the current period and the five before it. */
+  periods?: Array<{
+    period_start: string;
+    period_end: string;
+    spend: number;
+    pct: number;
+    crossed: number[];
+  }>;
 }
 
 /** A user-defined alert rule from GET/POST/PATCH /api/alerts/rules. Couples a
@@ -1927,6 +1988,89 @@ export interface SessionStats {
   };
 }
 
+/** A row of `GET /api/snapshots` — a frozen session, listed without its payload. */
+export interface SessionSnapshotInfo {
+  id: number;
+  /** The unguessable read token: `/snapshot/<token>`. */
+  token: string;
+  session_id: string;
+  created_at: string;
+  session_name?: string | null;
+  /** File paths were replaced at capture. */
+  redacted?: boolean;
+  event_count?: number;
+  /** Size of the stored payload, bytes. */
+  bytes?: number;
+}
+
+export type QueryEntity = "sessions" | "events" | "agents";
+
+/** `GET /api/query` — one page of an entity's filtered rows. */
+export interface QueryPage {
+  entity: QueryEntity;
+  /** Column names, in order (also the export's header). */
+  columns: string[];
+  /** The columns `sort` accepts. */
+  sortable: string[];
+  /** The values `status` accepts (none for events). */
+  statuses: string[];
+  rows: Record<string, string | number | null>[];
+  total: number;
+  limit: number;
+  offset: number;
+  /** An export holds at most this many rows. */
+  export_cap: number;
+}
+
+/** A scheduled report definition (`/api/reports`). */
+export interface ReportInput {
+  name: string;
+  /** Full local days before the run day. */
+  window_days: number;
+  frequency: "daily" | "weekly";
+  /** Local hour, 0–23. */
+  hour: number;
+  /** 0 = Sunday; weekly only. */
+  weekday: number;
+  /** getTimezoneOffset() of the browser that saved it. */
+  tz_offset: number;
+  formats: ("html" | "json")[];
+  enabled: boolean;
+}
+
+export interface ReportRun {
+  id: number;
+  report_id: number;
+  created_at: string;
+  trigger: "schedule" | "manual";
+  status: "ok" | "error";
+  window_from: string | null;
+  window_to: string | null;
+  /** The formats written. */
+  files: string[];
+  error: string | null;
+}
+
+export interface ReportDefinition extends ReportInput {
+  id: number;
+  created_at: string;
+  last_slot: string | null;
+  last_run?: ReportRun | null;
+}
+
+/** What `POST /api/snapshots` froze: the session as it stood at `captured_at`. */
+export interface SessionSnapshotPayload {
+  version: number;
+  captured_at: string;
+  redacted: { file_paths: boolean };
+  session: Session;
+  agents: Agent[];
+  /** Oldest first. */
+  events: DashboardEvent[];
+  stats: SessionStats;
+  cost: CostResult;
+}
+
 // ───── Workflow intelligence (events-derived) ─────
 // The analytics panels on the Workflows page. Every type below is COMPUTED by
 // the server from `DashboardEvent`/`Agent` rows (server/routes/workflows.js) -
@@ -2508,10 +2652,9 @@ export interface Lane {
   kind: "managed" | "adopted";
   /** The CLI this lane's runs spawn. Immutable once the lane exists. */
   tool: LaneTool;
-  /** Name of the AI Router profile this lane runs against, or null for the
-   *  vendor's own API. Unlike `tool` this IS changeable after creation, but
-   *  only through `POST /api/lanes/:id/router/apply` — the column and the
-   *  lane's own config on disk must move together. */
+  /** Legacy: the per-workspace AI Proxy (then "AI Router") profile. A proxy
+   *  is a session's choice now and the server empties this at every start, so
+   *  it is always null. */
   router_profile: string | null;
   /** For a managed worktree lane, the repo it was provisioned from. Null for
    *  an adopted lane (it IS a source repo, not a worktree of one). */
@@ -2764,6 +2907,8 @@ export interface LaneTreeEntry {
   status?: string;
   /** A folder with a changed or untracked file anywhere under it. */
   changed?: true;
+  /** Ignored by git (`.gitignore`) — drawn orange in the Files tree. */
+  ignored?: true;
 }
 
 /** One row of a rendered diff — both gutters already resolved server-side. */

client/src/pages/AgentsTable.tsx

@@ -0,0 +1,315 @@
+/**
+ * @file AgentsTable.tsx
+ * @description The Sessions page's **Agents** tab (`/sessions?view=agents`,
+ * where the old `/query` redirects): filter agents (free text, AI tool, status,
+ * local date range, folder subtree, plus the global data scope), sort by a
+ * column the server allows, page through the rows, and export the whole
+ * filtered set as CSV or JSON (`GET /api/query?entity=agents`, capped
+ * server-side). Sessions and events have their own tabs beside it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, Download, RotateCcw } from "lucide-react";
+import { api } from "../lib/api";
+import { applyRange } from "../lib/dateRange";
+import { useDataScope } from "../lib/dataScope";
+import { useAiTools } from "../hooks/useAiTools";
+import { Select } from "../components/Select";
+import type { QueryPage } from "../lib/types";
+
+const PAGE_SIZE = 50;
+const STATUSES = ["working", "waiting", "completed", "error"];
+
+export function AgentsTable() {
+  const { t } = useTranslation("analytics");
+  const aiTools = useAiTools();
+  const [scope] = useDataScope();
+  const [q, setQ] = useState("");
+  const [cwd, setCwd] = useState("");
+  const [typed, setTyped] = useState({ q: "", cwd: "" });
+  const [tool, setTool] = useState("");
+  const [status, setStatus] = useState("");
+  const [from, setFrom] = useState("");
+  const [to, setTo] = useState("");
+  const [sort, setSort] = useState("");
+  const [dir, setDir] = useState<"asc" | "desc">("desc");
+  const [offset, setOffset] = useState(0);
+  const [page, setPage] = useState<QueryPage | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Text filters wait for a pause in typing.
+  useEffect(() => {
+    const h = setTimeout(() => {
+      const next = { q: q.trim(), cwd: cwd.trim() };
+      setTyped((prev) => (prev.q === next.q && prev.cwd === next.cwd ? prev : next));
+      setOffset(0);
+    }, 300);
+    return () => clearTimeout(h);
+  }, [q, cwd]);
+
+  /** Every filter change starts over at the first page. */
+  const fresh =
+    <T,>(set: (v: T) => void) =>
+    (v: T) => {
+      set(v);
+      setOffset(0);
+    };
+
+  const filters = useMemo(() => {
+    const p = new URLSearchParams({ entity: "agents" });
+    if (typed.q) p.set("q", typed.q);
+    if (typed.cwd) p.set("cwd", typed.cwd);
+    if (tool) p.set("tool", tool);
+    if (status) p.set("status", status);
+    if (sort) {
+      p.set("sort", sort);
+      p.set("dir", dir);
+    }
+    return applyRange(p, { from: from || undefined, to: to || undefined });
+  }, [typed, tool, status, sort, dir, from, to]);
+
+  useEffect(() => {
+    let live = true;
+    const p = new URLSearchParams(filters);
+    p.set("limit", String(PAGE_SIZE));
+    p.set("offset", String(offset));
+    api.query
+      .page(p)
+      .then((r) => {
+        if (!live) return;
+        setPage(r);
+        setError(null);
+      })
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
+  }, [filters, offset, scope]);
+
+  const reset = () => {
+    setQ("");
+    setCwd("");
+    setTool("");
+    setStatus("");
+    setFrom("");
+    setTo("");
+    setSort("");
+    setDir("desc");
+    setOffset(0);
+  };
+  const sortedBy = sort || page?.sortable[0] || "";
+  // A click on the current column flips it; another column starts descending.
+  const sortOn = (col: string) => {
+    setDir(col === sortedBy && dir === "desc" ? "asc" : "desc");
+    setSort(col);
+    setOffset(0);
+  };
+
+  const total = page?.total ?? 0;
+  const cap = page?.export_cap ?? 50_000;
+
+  return (
+    <div className="animate-fade-in space-y-5">
+      {/* The tab bar names the view. */}
+      <h1 className="sr-only">{t("query.entities.agents")}</h1>
+
+      <div className="card p-4 flex flex-wrap items-end gap-3">
+        <input
+          className="input text-sm w-56"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder={t("query.searchPlaceholder")}
+          aria-label={t("query.search")}
+        />
+        <div className="w-40">
+          <Select
+            value={tool}
+            onChange={fresh(setTool)}
+            label={t("toolFilter")}
+            options={[
+              { value: "", label: t("allTools") },
+              ...aiTools.tools.map((x) => ({ value: x.id, label: x.label })),
+            ]}
+          />
+        </div>
+        <div className="w-40">
+          <Select
+            value={status}
+            onChange={fresh(setStatus)}
+            label={t("query.status")}
+            options={[
+              { value: "", label: t("query.allStatuses") },
+              ...STATUSES.map((s) => ({ value: s, label: t(`common:status.${s}`) })),
+            ]}
+          />
+        </div>
+        <input
+          type="date"
+          className="input text-sm"
+          value={from}
+          max={to || undefined}
+          onChange={(e) => fresh(setFrom)(e.target.value)}
+          aria-label={t("query.from")}
+          title={t("query.from")}
+        />
+        <input
+          type="date"
+          className="input text-sm"
+          value={to}
+          min={from || undefined}
+          onChange={(e) => fresh(setTo)(e.target.value)}
+          aria-label={t("query.to")}
+          title={t("query.to")}
+        />
+        <input
+          className="input text-sm w-56 font-mono"
+          value={cwd}
+          onChange={(e) => setCwd(e.target.value)}
+          placeholder={t("query.cwdPlaceholder")}
+          aria-label={t("query.cwd")}
+          title={t("query.cwd")}
+        />
+        <button type="button" className="btn-ghost" onClick={reset} title={t("query.reset")}>
+          <RotateCcw className="w-4 h-4" />
+          {t("query.reset")}
+        </button>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-xs text-fg-muted">
+          {total > cap
+            ? t("query.exportTruncated", {
+                total: total.toLocaleString(),
+                cap: cap.toLocaleString(),
+              })
+            : t("query.exportNote", { cap: cap.toLocaleString() })}
+        </p>
+        <div className="flex items-center gap-2">
+          <a className="btn-ghost" href={api.query.exportUrl(filters, "csv")} download>
+            <Download className="w-4 h-4" />
+            {t("query.exportCsv")}
+          </a>
+          <a className="btn-ghost" href={api.query.exportUrl(filters, "json")} download>
+            <Download className="w-4 h-4" />
+            {t("query.exportJson")}
+          </a>
+        </div>
+      </div>
+
+      {error && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error}
+        </p>
+      )}
+
+      {page && page.rows.length === 0 ? (
+        <p className="py-10 text-center text-sm text-fg-muted">{t("query.empty")}</p>
+      ) : (
+        page && (
+          <div className="card overflow-x-auto">
+            <table className="w-full text-sm" data-testid="query-table">
+              <thead>
+                <tr className="border-b border-border text-left">
+                  {page.columns.map((c) => {
+                    const sortable = page.sortable.includes(c);
+                    return (
+                      <th
+                        key={c}
+                        className="px-3 py-2 text-[11px] font-semibold text-fg-muted font-mono"
+                        aria-sort={
+                          c === sortedBy ? (dir === "asc" ? "ascending" : "descending") : undefined
+                        }
+                      >
+                        {sortable ? (
+                          <button
+                            type="button"
+                            onClick={() => sortOn(c)}
+                            className="inline-flex items-center gap-1 hover:text-fg-primary"
+                            title={t("query.sortBy", { column: c })}
+                          >
+                            {c}
+                            {c === sortedBy &&
+                              (dir === "asc" ? (
+                                <ArrowUp className="w-3 h-3" />
+                              ) : (
+                                <ArrowDown className="w-3 h-3" />
+                              ))}
+                          </button>
+                        ) : (
+                          c
+                        )}
+                      </th>
+                    );
+                  })}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {page.rows.map((r, i) => (
+                  <tr key={`${r.id}-${i}`} className="hover:bg-surface-4">
+                    {page.columns.map((c) => {
+                      const v = r[c];
+                      const sid = c === "session_id" ? v : null;
+                      return (
+                        <td
+                          key={c}
+                          className="px-3 py-1.5 max-w-[22rem] truncate text-fg-secondary"
+                          title={v == null ? undefined : String(v)}
+                        >
+                          {sid ? (
+                            <Link
+                              to={`/sessions/${encodeURIComponent(String(sid))}`}
+                              className="font-mono text-accent hover:underline"
+                            >
+                              {String(sid).slice(0, 8)}
+                            </Link>
+                          ) : (
+                            (v ?? "")
+                          )}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )
+      )}
+
+      {page && total > 0 && (
+        <div className="flex items-center justify-end gap-2 text-xs text-fg-muted">
+          <span>
+            {t("query.rows", {
+              from: (offset + 1).toLocaleString(),
+              to: Math.min(offset + PAGE_SIZE, total).toLocaleString(),
+              total: total.toLocaleString(),
+            })}
+          </span>
+          <button
+            type="button"
+            className="btn-ghost"
+            disabled={offset === 0}
+            onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+            title={t("query.prev")}
+            aria-label={t("query.prev")}
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            className="btn-ghost"
+            disabled={offset + PAGE_SIZE >= total}
+            onClick={() => setOffset(offset + PAGE_SIZE)}
+            title={t("query.next")}
+            aria-label={t("query.next")}
+          >
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/pages/AiProxyConfig.tsx

@@ -1,16 +1,16 @@
 /**
- * @file AiRouterConfig.tsx
- * @description The **AI Router** tab of Settings — CRUD for the named router
- * endpoints (9Router, OpenRouter, a self-hosted gateway) a lane can be pointed
- * at instead of the vendor's own API.
+ * @file AiProxyConfig.tsx
+ * @description The **AI Proxy** page of Settings — CRUD for the named proxy
+ * endpoints (9Router, OpenRouter, a self-hosted gateway) a session can run on
+ * instead of the vendor's own API.
  *
- * A NEW SESSION chooses its router (the workspace home's prompt box, a pane's
- * run form), not here. An edit here reaches the sessions already on a profile
+ * A NEW SESSION chooses its proxy (the workspace home's prompt box), not here. An edit here reaches the sessions already on a profile
  * (the server rewrites the file each reads), and a delete removes that file.
  *
  * The built-in `native` row is rendered read-only: it is the vendor's own API,
  * and it exists so that "go back to native" is the same operation as "use a
- * router" rather than a special case.
+ * proxy" rather than a special case. It has no model of its own (the
+ * session's model picker picks), so its Model cell reads "—".
  *
  * An API key is write-only here by design — the server never returns one, so
  * the form shows whether a key is saved, never the key.
@@ -21,28 +21,35 @@
  * A right-click on a profile row opens its Edit / Remove (plus Copy endpoint)
  * as a menu; the buttons stay.
  *
- * **Test** asks the endpoint itself before the profile is saved onto a lane.
+ * **Test** asks the endpoint itself, once as Claude Code would
+ * (`/v1/messages`) and once as Codex would (`/v1/responses`), one line each.
  * "Saved" and "works" are different claims, and the gap between them is only
- * ever discovered inside a lane's session otherwise, where the error surfaces
- * as a broken CLI rather than a bad URL.
+ * ever discovered inside a session otherwise, where the error surfaces as a
+ * broken CLI rather than a bad URL.
  *
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Plus, Pencil, Trash2, Lock } from "lucide-react";
-import { api, type AiRouter, type AiRouterInput, type AiRouterModels } from "../lib/api";
+import {
+  api,
+  type AiProxy,
+  type AiProxyInput,
+  type AiProxyModels,
+  type AiProxyProbe,
+} from "../lib/api";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../components/ContextMenu";
 import { confirmDialog } from "../lib/confirm";
 import { copyText } from "../lib/clipboard";
 import { useDialog } from "../hooks/useDialog";
 
-const TIERS: (keyof AiRouterModels)[] = ["opus", "sonnet", "haiku", "smallFast", "subagent"];
+const TIERS: (keyof AiProxyModels)[] = ["opus", "sonnet", "haiku", "smallFast", "subagent"];
 
-type FormState = Omit<AiRouterInput, "apiKey" | "models" | "behavesAs"> & {
+type FormState = Omit<AiProxyInput, "apiKey" | "models" | "behavesAs"> & {
   apiKey: string;
   behavesAs: string;
-  models: Partial<AiRouterModels>;
+  models: Partial<AiProxyModels>;
 };
 
 const emptyForm = (): FormState => ({
@@ -54,11 +61,11 @@ const emptyForm = (): FormState => ({
   behavesAs: "",
 });
 
-export function AiRouterConfig() {
+export function AiProxyConfig() {
   const { t } = useTranslation("settings");
-  const [items, setItems] = useState<AiRouter[]>([]);
+  const [items, setItems] = useState<AiProxy[]>([]);
   const [error, setError] = useState<string | null>(null);
-  const [editing, setEditing] = useState<AiRouter | null>(null);
+  const [editing, setEditing] = useState<AiProxy | null>(null);
   const [form, setForm] = useState(emptyForm());
   const [open, setOpen] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -66,14 +73,14 @@ export function AiRouterConfig() {
   const [formError, setFormError] = useState<string | null>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
   useDialog(open, dialogRef, () => setOpen(false));
-  // The router's own verdict on the form as it currently stands. Cleared on
-  // every field change: a green "works" left sitting above an edited base URL
-  // is a claim about a configuration that no longer exists.
-  const [testResult, setTestResult] = useState<{ ok: boolean; text: string } | null>(null);
+  // The proxy's own verdict on the form as it currently stands, one line per
+  // CLI. Cleared on every field change: a green "works" left sitting above an
+  // edited base URL is a claim about a configuration that no longer exists.
+  const [testResult, setTestResult] = useState<{ ok: boolean; text: string }[] | null>(null);
   const [testing, setTesting] = useState(false);
-  const ctx = useContextMenu<AiRouter>();
+  const ctx = useContextMenu<AiProxy>();
   // A menu item: close the menu, then act on the row it was opened on.
-  const pick = (fn: (item: AiRouter) => unknown) => () => {
+  const pick = (fn: (item: AiProxy) => unknown) => () => {
     const item = ctx.menu?.item;
     ctx.close();
     if (item) fn(item);
@@ -91,7 +98,7 @@ export function AiRouterConfig() {
   // vanish. Keeping the message untranslated is the cheaper half of the trade.
   const load = useCallback(async () => {
     try {
-      setItems((await api.aiRouters.list()).items);
+      setItems((await api.aiProxies.list()).items);
       setError(null);
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -114,7 +121,7 @@ export function AiRouterConfig() {
     setOpen(true);
   };
 
-  const startEdit = (item: AiRouter) => {
+  const startEdit = (item: AiProxy) => {
     setEditing(item);
     // No apiKey: the server never sent one. Blank means "keep what is stored".
     setForm({
@@ -129,7 +136,6 @@ export function AiRouterConfig() {
     setOpen(true);
   };
 
-  /** Report any lane the server could not re-point, or clear a stale report. */
   /**
    * Ask the endpoint itself. `name` is sent when editing so a profile whose key
    * the form cannot show is still testable — the server only honours it while
@@ -139,23 +145,23 @@ export function AiRouterConfig() {
     setTesting(true);
     setTestResult(null);
     try {
-      const result = await api.aiRouters.test({
+      const result = await api.aiProxies.test({
         baseUrl: form.baseUrl.trim(),
         model: form.model.trim(),
         ...(form.apiKey.trim() ? { apiKey: form.apiKey.trim() } : {}),
         ...(editing ? { name: editing.name } : {}),
       });
-      setTestResult({
-        ok: result.ok,
-        text: result.ok
-          ? t("aiRouter.testOk", { model: result.message })
-          : t("aiRouter.testFailed", {
-              status: result.status ?? "—",
-              message: result.message,
-            }),
+      const line = (cli: string, probe: AiProxyProbe) => ({
+        ok: probe.ok,
+        text: `${cli}: ${
+          probe.ok
+            ? t("aiProxy.testOk", { model: probe.message })
+            : t("aiProxy.testFailed", { status: probe.status ?? "—", message: probe.message })
+        }`,
       });
+      setTestResult([line("Claude Code", result.claude), line("Codex", result.codex)]);
     } catch (e) {
-      setTestResult({ ok: false, text: e instanceof Error ? e.message : String(e) });
+      setTestResult([{ ok: false, text: e instanceof Error ? e.message : String(e) }]);
     } finally {
       setTesting(false);
     }
@@ -167,13 +173,13 @@ export function AiRouterConfig() {
     try {
       // Send only the tiers that differ from the headline model, so the server
       // keeps filling the rest from it — that is what makes one symbolic name
-      // enough for a router that wants the same value everywhere.
-      const models: Partial<AiRouterModels> = {};
+      // enough for a proxy that wants the same value everywhere.
+      const models: Partial<AiProxyModels> = {};
       for (const tier of TIERS) {
         const value = (form.models[tier] || "").trim();
         if (value && value !== form.model.trim()) models[tier] = value;
       }
-      const body: AiRouterInput = {
+      const body: AiProxyInput = {
         label: form.label.trim(),
         baseUrl: form.baseUrl.trim(),
         model: form.model.trim(),
@@ -182,8 +188,8 @@ export function AiRouterConfig() {
       };
       if (form.apiKey.trim()) body.apiKey = form.apiKey.trim();
 
-      if (editing) await api.aiRouters.update(editing.name, body);
-      else await api.aiRouters.create(body);
+      if (editing) await api.aiProxies.update(editing.name, body);
+      else await api.aiProxies.create(body);
 
       setOpen(false);
       await load();
@@ -194,17 +200,17 @@ export function AiRouterConfig() {
     }
   };
 
-  const remove = async (item: AiRouter) => {
+  const remove = async (item: AiProxy) => {
     if (
       !(await confirmDialog({
-        title: t("aiRouter.removeConfirm", { label: item.label }),
-        confirmLabel: t("aiRouter.remove"),
+        title: t("aiProxy.removeConfirm", { label: item.label }),
+        confirmLabel: t("aiProxy.remove"),
       }))
     )
       return;
     setError(null);
     try {
-      await api.aiRouters.remove(item.name);
+      await api.aiProxies.remove(item.name);
       await load();
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -215,14 +221,14 @@ export function AiRouterConfig() {
     <div className="space-y-4">
       <div className="flex items-start justify-between gap-4">
         {/* The page header above already names the section. */}
-        <p className="max-w-2xl text-xs text-fg-muted">{t("aiRouter.description")}</p>
+        <p className="max-w-2xl text-xs text-fg-muted">{t("aiProxy.description")}</p>
         <button
           type="button"
           onClick={startAdd}
           className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-accent/40 bg-accent/15 px-3 py-1.5 text-xs font-medium text-accent transition-colors hover:bg-accent/25"
         >
           <Plus className="h-3.5 w-3.5" />
-          {t("aiRouter.add")}
+          {t("aiProxy.add")}
         </button>
       </div>
 
@@ -236,10 +242,10 @@ export function AiRouterConfig() {
         <table className="w-full text-left text-xs">
           <thead className="bg-surface-2 text-[10px] uppercase tracking-wider text-fg-muted">
             <tr>
-              <th className="px-3 py-2 font-medium">{t("aiRouter.colLabel")}</th>
-              <th className="px-3 py-2 font-medium">{t("aiRouter.colBaseUrl")}</th>
-              <th className="px-3 py-2 font-medium">{t("aiRouter.colModel")}</th>
-              <th className="px-3 py-2 font-medium">{t("aiRouter.colKey")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiProxy.colLabel")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiProxy.colBaseUrl")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiProxy.colModel")}</th>
+              <th className="px-3 py-2 font-medium">{t("aiProxy.colKey")}</th>
               <th className="px-3 py-2" />
             </tr>
           </thead>
@@ -257,27 +263,25 @@ export function AiRouterConfig() {
                   </span>
                   {item.builtin && (
                     <span className="mt-0.5 block text-[10px] text-fg-muted">
-                      {t("aiRouter.builtinHint")}
+                      {t("aiProxy.builtinHint")}
                     </span>
                   )}
                 </td>
                 <td className="px-3 py-2 font-mono text-[11px] text-fg-secondary">
                   {item.baseUrl || "—"}
                 </td>
-                <td className="px-3 py-2 font-mono text-[11px] text-fg-secondary">{item.model}</td>
+                <td className="px-3 py-2 font-mono text-[11px] text-fg-secondary">
+                  {item.model || "—"}
+                </td>
                 <td className="px-3 py-2 text-fg-secondary">
-                  {item.builtin
-                    ? "—"
-                    : item.hasKey
-                      ? t("aiRouter.keySet")
-                      : t("aiRouter.keyMissing")}
+                  {item.builtin ? "—" : item.hasKey ? t("aiProxy.keySet") : t("aiProxy.keyMissing")}
                 </td>
                 <td className="px-3 py-2 text-right">
                   {!item.builtin && (
                     <span className="inline-flex gap-1">
                       <button
                         type="button"
-                        aria-label={`${t("aiRouter.edit")} ${item.label}`}
+                        aria-label={`${t("aiProxy.edit")} ${item.label}`}
                         onClick={() => startEdit(item)}
                         className="rounded p-1 text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary"
                       >
@@ -285,7 +289,7 @@ export function AiRouterConfig() {
                       </button>
                       <button
                         type="button"
-                        aria-label={`${t("aiRouter.remove")} ${item.label}`}
+                        aria-label={`${t("aiProxy.remove")} ${item.label}`}
                         onClick={() => remove(item)}
                         className="rounded p-1 text-fg-muted transition-colors hover:bg-surface-3 hover:text-status-danger"
                       >
@@ -299,7 +303,7 @@ export function AiRouterConfig() {
             {(loading || items.length <= 1) && (
               <tr className="border-t border-border">
                 <td colSpan={5} className="px-3 py-4 text-center text-fg-muted">
-                  {loading ? t("aiRouter.loading") : t("aiRouter.empty")}
+                  {loading ? t("aiProxy.loading") : t("aiProxy.empty")}
                 </td>
               </tr>
             )}
@@ -307,8 +311,8 @@ export function AiRouterConfig() {
         </table>
       </div>
       {ctx.menu && (
-        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="ai-router-menu">
-          <MenuItem onSelect={pick(startEdit)}>{t("aiRouter.edit")}</MenuItem>
+        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="ai-proxy-menu">
+          <MenuItem onSelect={pick(startEdit)}>{t("aiProxy.edit")}</MenuItem>
           {ctx.menu.item.baseUrl && (
             <MenuItem onSelect={pick((item) => void copyText(item.baseUrl))}>
               {t("rowMenu.copyUrl")}
@@ -316,7 +320,7 @@ export function AiRouterConfig() {
           )}
           <MenuSeparator />
           <MenuItem danger onSelect={pick((item) => void remove(item))}>
-            {t("aiRouter.remove")}
+            {t("aiProxy.remove")}
           </MenuItem>
         </ContextMenu>
       )}
@@ -330,36 +334,36 @@ export function AiRouterConfig() {
             ref={dialogRef}
             role="dialog"
             aria-modal="true"
-            aria-labelledby="router-form-title"
+            aria-labelledby="proxy-form-title"
             className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
           >
-            <h3 id="router-form-title" className="mb-3 text-sm font-semibold text-fg-primary">
-              {editing ? t("aiRouter.edit") : t("aiRouter.add")}
+            <h3 id="proxy-form-title" className="mb-3 text-sm font-semibold text-fg-primary">
+              {editing ? t("aiProxy.edit") : t("aiProxy.add")}
             </h3>
 
             <div className="space-y-3">
               <Field
-                id="router-label"
-                label={t("aiRouter.fieldLabel")}
-                hint={t("aiRouter.fieldLabelHint")}
+                id="proxy-label"
+                label={t("aiProxy.fieldLabel")}
+                hint={t("aiProxy.fieldLabelHint")}
                 value={form.label}
                 onChange={(v) => setForm((f) => ({ ...f, label: v }))}
               />
               <Field
-                id="router-base-url"
-                label={t("aiRouter.fieldBaseUrl")}
-                hint={t("aiRouter.fieldBaseUrlHint")}
+                id="proxy-base-url"
+                label={t("aiProxy.fieldBaseUrl")}
+                hint={t("aiProxy.fieldBaseUrlHint")}
                 value={form.baseUrl}
                 mono
                 onChange={(v) => setForm((f) => ({ ...f, baseUrl: v }))}
               />
               <Field
-                id="router-api-key"
-                label={t("aiRouter.fieldApiKey")}
+                id="proxy-api-key"
+                label={t("aiProxy.fieldApiKey")}
                 hint={
                   editing && editing.hasKey
-                    ? t("aiRouter.fieldApiKeyKeep")
-                    : t("aiRouter.fieldApiKeyHint")
+                    ? t("aiProxy.fieldApiKeyKeep")
+                    : t("aiProxy.fieldApiKeyHint")
                 }
                 value={form.apiKey}
                 type="password"
@@ -367,17 +371,17 @@ export function AiRouterConfig() {
                 onChange={(v) => setForm((f) => ({ ...f, apiKey: v }))}
               />
               <Field
-                id="router-model"
-                label={t("aiRouter.fieldModel")}
-                hint={t("aiRouter.fieldModelHint")}
+                id="proxy-model"
+                label={t("aiProxy.fieldModel")}
+                hint={t("aiProxy.fieldModelHint")}
                 value={form.model}
                 mono
                 onChange={(v) => setForm((f) => ({ ...f, model: v }))}
               />
               <Field
-                id="router-behaves-as"
-                label={t("aiRouter.fieldBehavesAs")}
-                hint={t("aiRouter.fieldBehavesAsHint")}
+                id="proxy-behaves-as"
+                label={t("aiProxy.fieldBehavesAs")}
+                hint={t("aiProxy.fieldBehavesAsHint")}
                 value={form.behavesAs}
                 mono
                 placeholder="claude-opus-5-5"
@@ -386,15 +390,15 @@ export function AiRouterConfig() {
 
               <details className="rounded-lg border border-border bg-surface-2 p-2">
                 <summary className="cursor-pointer text-xs text-fg-secondary">
-                  {t("aiRouter.perTier")}
+                  {t("aiProxy.perTier")}
                 </summary>
-                <p className="mt-1 text-[10px] text-fg-muted">{t("aiRouter.perTierHint")}</p>
+                <p className="mt-1 text-[10px] text-fg-muted">{t("aiProxy.perTierHint")}</p>
                 <div className="mt-2 space-y-2">
                   {TIERS.map((tier) => (
                     <Field
                       key={tier}
-                      id={`router-model-${tier}`}
-                      label={t(`aiRouter.tier.${tier}`)}
+                      id={`proxy-model-${tier}`}
+                      label={t(`aiProxy.tier.${tier}`)}
                       value={form.models[tier] || ""}
                       mono
                       placeholder={form.model}
@@ -416,35 +420,36 @@ export function AiRouterConfig() {
               </p>
             )}
 
-            {testResult && (
+            {testResult?.map((r) => (
               <p
-                data-testid="router-test-result"
+                key={r.text}
+                data-testid="proxy-test-result"
                 className={`mt-3 rounded-md border px-3 py-2 text-xs ${
-                  testResult.ok
+                  r.ok
                     ? "border-status-success/40 bg-status-success/10 text-status-success"
                     : "border-status-danger/40 bg-status-danger/10 text-status-danger"
                 }`}
               >
-                {testResult.text}
+                {r.text}
               </p>
-            )}
+            ))}
 
             <div className="mt-4 flex items-center justify-end gap-2">
               <button
                 type="button"
-                data-testid="router-test"
+                data-testid="proxy-test"
                 onClick={test}
                 disabled={testing || busy || !form.baseUrl.trim() || !form.model.trim()}
                 className="mr-auto rounded-md border border-border-light px-3 py-1.5 text-xs text-fg-secondary transition-colors hover:text-fg-primary disabled:opacity-50"
               >
-                {testing ? t("aiRouter.testing") : t("aiRouter.test")}
+                {testing ? t("aiProxy.testing") : t("aiProxy.test")}
               </button>
               <button
                 type="button"
                 onClick={() => setOpen(false)}
                 className="rounded-md px-3 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-3"
               >
-                {t("aiRouter.cancel")}
+                {t("aiProxy.cancel")}
               </button>
               <button
                 type="button"
@@ -452,7 +457,7 @@ export function AiRouterConfig() {
                 disabled={busy || !form.label.trim() || !form.baseUrl.trim() || !form.model.trim()}
                 className="btn-primary px-3 py-1.5 text-xs"
               >
-                {t("aiRouter.save")}
+                {t("aiProxy.save")}
               </button>
             </div>
           </div>

client/src/pages/Dashboard.tsx

@@ -107,9 +107,15 @@ import { AgentStatusBadge } from "../components/StatusBadge";
 import { EmptyState } from "../components/EmptyState";
 import { Tip } from "../components/Tip";
 import { Skeleton } from "../components/Skeleton";
+import { Select } from "../components/Select";
+import { AiToolIcon } from "../components/AiToolIcon";
+import { useAiTools } from "../hooks/useAiTools";
+import { spendPace } from "../lib/burnRate";
+import { RANGE_PRESETS, parsePreset, rangeDates } from "../lib/dateRange";
 import { timeAgo, fmt, fmtCost, fmtCostFull, formatModelName } from "../lib/format";
 import { statusFromEventType } from "../lib/event-grouping";
 import type {
+  BudgetStatus,
   Stats,
   Agent,
   DashboardEvent,
@@ -700,6 +706,7 @@ function AnalyticsTab() {
   const { t, i18n } = useTranslation("analytics");
   const [data, setData] = useState<AnalyticsData | null>(null);
   const [costData, setCostData] = useState<CostResult | null>(null);
+  const [budgets, setBudgets] = useState<BudgetStatus[]>([]);
   const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
   const [loading, setLoading] = useState(true);
   // `?sub=` deep-links a sub-tab (the old /workflows route lands on `workflow`).
@@ -723,6 +730,28 @@ function AnalyticsTab() {
     );
   // Global data scope; a change re-runs `load` (api injects the `sources` param).
   const [scope] = useDataScope();
+  // One AI tool's sessions only ("" = every tool); a change re-runs `load`.
+  const [tool, setTool] = useState("");
+  const aiTools = useAiTools();
+  // The date range, kept in the URL (`?range=`, plus `from`/`to` when custom).
+  // Headline numbers, cost/token cards and by-model/by-tool follow it; the
+  // 52-week and 30-day charts keep their own windows.
+  const preset = parsePreset(params.get("range"));
+  const customFrom = params.get("from") ?? "";
+  const customTo = params.get("to") ?? "";
+  const { from: rangeFrom, to: rangeTo } = rangeDates(preset, { from: customFrom, to: customTo });
+  const range = useMemo(() => ({ from: rangeFrom, to: rangeTo }), [rangeFrom, rangeTo]);
+  const setRangeParam = (patch: Record<string, string>) =>
+    setParams(
+      (p) => {
+        for (const [k, v] of Object.entries(patch)) {
+          if (v) p.set(k, v);
+          else p.delete(k);
+        }
+        return p;
+      },
+      { replace: true }
+    );
 
   const [loadError, setLoadError] = useState<string | null>(null);
   // Responses can land out of order (a slow poll after a fast refresh); only
@@ -731,14 +760,16 @@ function AnalyticsTab() {
   const load = useCallback(async () => {
     const seq = ++loadSeq.current;
     try {
-      const [result, cost] = await Promise.all([
-        api.analytics.get(),
-        api.pricing.totalCost().catch(() => null),
+      const [result, cost, budgetRes] = await Promise.all([
+        api.analytics.get({ tool, range }),
+        api.pricing.totalCost({ tool, range }).catch(() => null),
+        api.budgets.status().catch(() => null),
       ]);
       if (seq !== loadSeq.current) return;
       setData(result);
       setCostData(cost);
       setLoadError(null);
+      if (budgetRes) setBudgets(budgetRes.budgets);
       setLastUpdate(new Date());
     } catch (err) {
       if (seq === loadSeq.current)
@@ -746,7 +777,7 @@ function AnalyticsTab() {
     } finally {
       if (seq === loadSeq.current) setLoading(false);
     }
-  }, [scope]);
+  }, [scope, tool, range]);
 
   useEffect(() => {
     load();
@@ -861,6 +892,7 @@ function AnalyticsTab() {
     dailyCostLast30[0] ?? { date: "", cost: 0 }
   );
   const totalCost30d = dailyCostLast30.reduce((sum, day) => sum + day.cost, 0);
+  const pace = spendPace(dailyCostsLocal, localDateStr(today));
   const costBreakdown = [...(costData?.breakdown ?? [])]
     .filter((b) => b.cost > 0)
     .sort((a, b) => b.cost - a.cost);
@@ -985,6 +1017,53 @@ function AnalyticsTab() {
           {lastUpdate.toLocaleTimeString()}
         </span>
         <div className="flex items-center gap-2 flex-shrink-0">
+          <div className="w-40">
+            <Select
+              value={preset}
+              onChange={(v) =>
+                setRangeParam(
+                  v === "custom"
+                    ? { range: v, from: rangeFrom ?? "", to: rangeTo ?? "" }
+                    : { range: v === "all" ? "" : v, from: "", to: "" }
+                )
+              }
+              label={t("range")}
+              options={RANGE_PRESETS.map((v) => ({ value: v, label: t(`rangePreset.${v}`) }))}
+            />
+          </div>
+          {preset === "custom" && (
+            <>
+              <input
+                type="date"
+                className="input text-sm"
+                value={customFrom}
+                max={customTo || undefined}
+                onChange={(e) => setRangeParam({ from: e.target.value })}
+                aria-label={t("rangeFrom")}
+                title={t("rangeFrom")}
+              />
+              <input
+                type="date"
+                className="input text-sm"
+                value={customTo}
+                min={customFrom || undefined}
+                onChange={(e) => setRangeParam({ to: e.target.value })}
+                aria-label={t("rangeTo")}
+                title={t("rangeTo")}
+              />
+            </>
+          )}
+          <div className="w-44">
+            <Select
+              value={tool}
+              onChange={setTool}
+              label={t("toolFilter")}
+              options={[
+                { value: "", label: t("allTools") },
+                ...aiTools.tools.map((x) => ({ value: x.id, label: x.label })),
+              ]}
+            />
+          </div>
           <button onClick={load} className="btn-ghost" disabled={loading}>
             <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
             {t("common:refresh")}
@@ -1353,6 +1432,107 @@ function AnalyticsTab() {
                   )}
                 </div>
 
+                {/* Spend pace: burn rate, month to date, month-end forecast */}
+                <div className="card p-5">
+                  <h3 className="text-sm font-medium text-fg-secondary mb-5">{t("spendPace")}</h3>
+                  <div className="space-y-3">
+                    {[
+                      { label: t("burnRate"), value: pace.perDay7, hint: t("burnRateHint") },
+                      { label: t("monthToDate"), value: pace.monthToDate },
+                      {
+                        label: t("forecastMonth"),
+                        value: pace.forecastMonth,
+                        hint: t("forecastHint"),
+                      },
+                    ].map(({ label, value, hint }) => (
+                      <div
+                        key={label}
+                        className="flex justify-between items-center py-2 border-b border-border last:border-0"
+                      >
+                        <span className="text-xs text-fg-secondary" title={hint}>
+                          {label}
+                        </span>
+                        <span className="text-sm font-mono font-medium text-status-success">
+                          <Tip raw={fmtCostFull(value)}>{fmtCost(value)}</Tip>
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Budgets (budget alert rules) */}
+                <div className="card p-5">
+                  <h3 className="text-sm font-medium text-fg-secondary mb-5">{t("budgets")}</h3>
+                  {budgets.length === 0 ? (
+                    <p className="text-sm text-fg-muted">
+                      {t("noBudgets")}{" "}
+                      <Link to="/settings/notifications" className="text-accent hover:underline">
+                        {t("addBudget")}
+                      </Link>
+                    </p>
+                  ) : (
+                    <div className="space-y-4">
+                      {budgets.map((b) => {
+                        const over = b.pct >= 100;
+                        const warn = b.crossed.length > 0;
+                        return (
+                          <div key={b.id} className="space-y-1.5">
+                            <div className="flex justify-between text-xs gap-2">
+                              <span className="text-fg-secondary truncate" title={b.name}>
+                                {b.name}
+                              </span>
+                              <span className="font-mono text-fg-secondary flex-shrink-0">
+                                {fmtCost(b.spend)} / {fmtCost(b.config.limit_usd ?? 0)}
+                              </span>
+                            </div>
+                            <div className="bg-surface-3 rounded-full h-2">
+                              <div
+                                className={`h-2 rounded-full ${over ? "bg-status-danger" : warn ? "bg-status-warning" : "bg-status-success"}`}
+                                style={{ width: `${Math.min(100, Math.max(2, b.pct))}%` }}
+                              />
+                            </div>
+                            <div className="flex justify-between text-[11px] text-fg-muted">
+                              <span>
+                                {b.period_start} → {b.period_end}
+                              </span>
+                              <span title={t("projectedHint")}>
+                                {t("projected")} {fmtCost(b.projected)}
+                              </span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* Cost by AI tool */}
+                <div className="card p-5">
+                  <h3 className="text-sm font-medium text-fg-secondary mb-5">{t("costByTool")}</h3>
+                  {(costData?.by_tool?.length ?? 0) > 0 ? (
+                    <div className="space-y-3">
+                      {(costData?.by_tool ?? []).map((b) => (
+                        <div key={b.tool} className="flex items-center gap-2">
+                          <AiToolIcon
+                            tool={{ id: b.tool, label: aiTools.label(b.tool) }}
+                            className="h-5 w-5"
+                          />
+                          <div className="flex-1 min-w-0">
+                            <CostBarRow
+                              label={aiTools.label(b.tool)}
+                              cost={b.cost}
+                              max={Math.max(costData?.by_tool?.[0]?.cost ?? 0, 0.0001)}
+                              color="bg-accent"
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-fg-muted">{t("noCostData")}</p>
+                  )}
+                </div>
+
                 {/* Cost by weekday */}
                 <div className="card p-5">
                   <h3 className="text-sm font-medium text-fg-secondary mb-1">
@@ -1471,7 +1651,7 @@ function AnalyticsTab() {
                 {/* The former Workflows page, folded into this sub-tab. */}
                 <RouteErrorBoundary>
                   <Suspense fallback={<AnalyticsChartsSkeleton />}>
-                    <Workflows embedded />
+                    <Workflows embedded tool={tool || undefined} range={range} />
                   </Suspense>
                 </RouteErrorBoundary>
               </div>
@@ -1605,7 +1785,7 @@ function SystemHealthTab() {
     try {
       const [infoRes, workflowRes] = await Promise.all([
         api.settings.info(),
-        api.workflows.get(undefined, HEALTH_SECTIONS),
+        api.workflows.get(undefined, undefined, undefined, HEALTH_SECTIONS),
       ]);
       setInfo(infoRes as any);
       setWorkflow(workflowRes);

client/src/pages/History.tsx

@@ -1,17 +1,19 @@
 /**
  * @file History.tsx
- * @description Tabbed shell for /sessions that hosts the two views over the same
- * event pipeline: the per-session list and the raw activity feed. The active tab
- * lives in the `?view=` query param, so `/activity` can redirect into it.
+ * @description Tabbed shell for /sessions that hosts the three views over the
+ * same data: the per-session list, the raw activity feed and the agents table.
+ * The active tab lives in the `?view=` query param, so `/activity` and the old
+ * `/query` Query Explorer can redirect into it.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import type { ComponentType } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Activity, FolderOpen } from "lucide-react";
+import { Activity, Bot, FolderOpen } from "lucide-react";
 import { PageTabs } from "../components/PageTabs";
 import { Sessions } from "./Sessions";
 import { ActivityFeed } from "./ActivityFeed";
+import { AgentsTable } from "./AgentsTable";
 
 interface HistoryView {
   id: string;
@@ -21,7 +23,7 @@ interface HistoryView {
 }
 
 /**
- * Sessions page shell: grouped sessions and the raw event stream as sibling tabs.
+ * Sessions page shell: sessions, the raw event stream and agents as sibling tabs.
  * @returns The tab bar plus the active view.
  */
 export function History() {
@@ -31,6 +33,7 @@ export function History() {
   const views: HistoryView[] = [
     { id: "sessions", label: t("sessions"), Icon: FolderOpen, Panel: Sessions },
     { id: "events", label: t("activityFeed"), Icon: Activity, Panel: ActivityFeed },
+    { id: "agents", label: t("agents"), Icon: Bot, Panel: AgentsTable },
   ];
   const defaultView = views[0]!;
   const active = views.find((v) => v.id === params.get("view")) ?? defaultView;

client/src/pages/SessionDetail.tsx

@@ -1,6 +1,6 @@
 /**
  * @file SessionDetail.tsx
- * @description Displays detailed information about a specific session, including its agents, events, and cost breakdown, with real-time updates and an expandable agent hierarchy view.
+ * @description Displays detailed information about a specific session, including its agents, events, and cost breakdown, with real-time updates and an expandable agent hierarchy view; a Replay tab scrubs through its events and a Snapshot action freezes it under a share link.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -28,7 +28,7 @@
  * - `../components/conversation/ConversationView`
  * - `../components/StatusBadge`
  * - `../lib/types`
- * - `../components/EventDetail`
+ * - `../components/EventTimeline`, `../components/EventReplay`, `../components/SnapshotButton`
  * - `../components/EventFilters`
  * - `../components/EventFiltersInfo`
  * - `../components/Skeleton`
@@ -79,6 +79,7 @@ import {
   Hourglass,
   X,
   Download,
+  Film,
 } from "lucide-react";
 import { api, type RunHandle } from "../lib/api";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
@@ -89,9 +90,12 @@ import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
 import { AgentCard } from "../components/AgentCard";
 import { SessionOverview } from "../components/SessionOverview";
 import { ConversationView } from "../components/conversation/ConversationView";
-import { SessionStatusBadge, AgentStatusBadge, REASON_ICONS } from "../components/StatusBadge";
+import { SessionStatusBadge, REASON_ICONS } from "../components/StatusBadge";
 import { SessionToolBadge } from "../components/SessionToolBadge";
 import { SessionResumeButton } from "../components/lanes/SessionResumeButton";
+import { SnapshotButton } from "../components/SnapshotButton";
+import { EventTimeline } from "../components/EventTimeline";
+import { EventReplay, loadReplayEvents } from "../components/EventReplay";
 import { CopyButton } from "../components/event-views/primitives";
 import {
   effectiveSessionStatus,
@@ -99,7 +103,6 @@ import {
   sessionAwaitingReason,
   AWAITING_REASON_CONFIG,
 } from "../lib/types";
-import { EventDetail } from "../components/EventDetail";
 import {
   EventFilters,
   isEmptyFilters,
@@ -110,14 +113,6 @@ import {
 import type { EventFiltersValue } from "../components/EventFilters";
 import { EventFiltersInfo } from "../components/EventFiltersInfo";
 import { Skeleton } from "../components/Skeleton";
-import {
-  agentOriginLabel,
-  buildEventTitle,
-  buildOriginLabel,
-  projectFromCwd,
-  projectFromEvent,
-  statusFromEventType,
-} from "../lib/event-grouping";
 import type { AgentInfo } from "../lib/event-grouping";
 import {
   formatDateTime,
@@ -139,7 +134,7 @@ import type {
 } from "../lib/types";
 import { WorkflowRunsPanel } from "../components/workflows/WorkflowRunsPanel";
 
-type DetailTab = "agents" | "conversation" | "timeline";
+type DetailTab = "agents" | "conversation" | "timeline" | "replay";
 
 const EVENTS_INITIAL_BATCH = 50;
 const EVENTS_MORE_BATCH = 500;
@@ -204,16 +199,18 @@ export function SessionDetail() {
   const [pendingTranscriptId, setPendingTranscriptId] = useState<string | null>(null);
   const [transcriptNotFound, setTranscriptNotFound] = useState(false);
   const notFoundTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [expandedEvents, setExpandedEvents] = useState<Set<number>>(() => new Set());
-
-  function toggleEvent(id: number) {
-    setExpandedEvents((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }
+  // The Replay tab's own copy: every event, oldest first, read on first visit.
+  const [replay, setReplay] = useState<{ events: DashboardEvent[]; total: number } | null>(null);
+  useEffect(() => {
+    if (activeTab !== "replay" || replay || !id) return;
+    let live = true;
+    loadReplayEvents(id)
+      .then((r) => live && setReplay(r))
+      .catch(() => live && setReplay({ events: [], total: 0 }));
+    return () => {
+      live = false;
+    };
+  }, [activeTab, replay, id]);
 
   // Refs let the websocket handler access latest state without re-subscribing.
   const eventApiParamsRef = useRef<Record<string, unknown> | null>(null);
@@ -427,13 +424,6 @@ export function SessionDetail() {
     return map;
   }, [session?.id, session?.name]);
 
-  // Precompute project per event so flat-row rendering doesn't re-parse JSON.
-  const projectByEventId = useMemo(() => {
-    const map = new Map<number, string | null>();
-    for (const e of events) map.set(e.id, projectFromEvent(e));
-    return map;
-  }, [events]);
-
   const loadEvents = useCallback(async () => {
     if (!eventApiParams) return;
     try {
@@ -680,6 +670,7 @@ export function SessionDetail() {
           ) : null;
         })()}
         <SessionResumeButton session={session} />
+        <SnapshotButton sessionId={session.id} />
         <button
           onClick={load}
           className="btn-ghost"
@@ -822,6 +813,20 @@ export function SessionDetail() {
           <List className="w-4 h-4" />
           {t("detail.timeline", { shown: events.length, total: eventsTotal })}
         </button>
+        <button
+          onClick={() => {
+            setActiveTab("replay");
+            setTranscriptNotFound(false);
+          }}
+          className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
+            activeTab === "replay"
+              ? "border-violet-500 text-violet-700 dark:text-violet-400"
+              : "border-transparent text-fg-muted hover:text-fg-secondary"
+          }`}
+        >
+          <Film className="w-4 h-4" />
+          {t("replay.tab")}
+        </button>
       </div>
 
       {/* Tab Content */}
@@ -1139,85 +1144,12 @@ export function SessionDetail() {
               {isEmptyFilters(filters) ? t("detail.noEvents") : t("common:eventFilters.noResults")}
             </p>
           ) : (
-            <div className="card overflow-hidden">
-              <div className="divide-y divide-border max-h-[600px] overflow-y-auto overflow-x-auto">
-                {events.map((event, i) => {
-                  const key = event.id ?? i;
-                  const isOpen = event.id != null && expandedEvents.has(event.id);
-                  return (
-                    // Off-screen rows skip layout/paint (a long timeline is not virtualized).
-                    <div
-                      key={key}
-                      style={
-                        isOpen
-                          ? undefined
-                          : { contentVisibility: "auto", containIntrinsicSize: "auto 45px" }
-                      }
-                    >
-                      <button
-                        type="button"
-                        onClick={() => event.id != null && toggleEvent(event.id)}
-                        aria-expanded={isOpen}
-                        aria-label={
-                          isOpen ? t("common:eventDetail.collapse") : t("common:eventDetail.expand")
-                        }
-                        className="w-full text-left px-5 py-3 flex items-center gap-4 hover:bg-surface-4 transition-colors min-w-0 cursor-pointer"
-                      >
-                        <span
-                          className={`text-fg-muted text-[10px] w-3 flex-shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
-                          aria-hidden="true"
-                        >
-                          ▶
-                        </span>
-                        <div className="w-16 text-[11px] text-fg-muted font-mono flex-shrink-0">
-                          {timeAgo(event.created_at)}
-                        </div>
-                        <AgentStatusBadge status={statusFromEventType(event.event_type)} />
-                        {(() => {
-                          // Session is implicit on this page - project is
-                          // still shown so the row identifies the working
-                          // directory when you share / search. Events without
-                          // their own cwd (e.g. TurnDuration) fall back to the
-                          // session's cwd so every row carries the dir prefix.
-                          const project =
-                            projectByEventId.get(event.id) ?? projectFromCwd(session?.cwd) ?? null;
-                          const origin = buildOriginLabel(
-                            project,
-                            null,
-                            agentOriginLabel(event.agent_id, agentInfoById)
-                          );
-                          return (
-                            <span className="text-sm text-fg-secondary flex-1 truncate">
-                              {origin && (
-                                <span
-                                  className="text-fg-muted mr-1"
-                                  title={event.agent_id ?? undefined}
-                                >
-                                  {origin} ·
-                                </span>
-                              )}
-                              {buildEventTitle(event)}
-                            </span>
-                          );
-                        })()}
-                        {event.tool_name && (
-                          <span className="text-[11px] px-2 py-0.5 bg-surface-2 rounded text-fg-muted font-mono">
-                            {event.tool_name}
-                          </span>
-                        )}
-                      </button>
-                      {isOpen && (
-                        <EventDetail
-                          event={event}
-                          agentInfoById={agentInfoById}
-                          sessionNameById={sessionNameById}
-                        />
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
+            <EventTimeline
+              events={events}
+              agentInfoById={agentInfoById}
+              sessionNameById={sessionNameById}
+              fallbackCwd={session?.cwd}
+            />
           )}
           {events.length < eventsTotal && (
             <div className="flex items-center justify-between mt-3 px-1">
@@ -1238,6 +1170,21 @@ export function SessionDetail() {
           )}
         </div>
       )}
+
+      {visitedTabs.has("replay") && (
+        <div hidden={activeTab !== "replay"}>
+          {replay ? (
+            <EventReplay
+              events={replay.events}
+              total={replay.total}
+              agentInfoById={agentInfoById}
+              sessionNameById={sessionNameById}
+            />
+          ) : (
+            <p className="text-sm text-fg-muted">{t("replay.loading")}</p>
+          )}
+        </div>
+      )}
     </div>
   );
 }

client/src/pages/Settings.tsx

@@ -1,6 +1,6 @@
 /**
  * @file Settings.tsx
- * @description The install-wide settings, as three pages of the Settings nav (`SettingsHub.tsx`): `section="data"` — total cost, database overview, workspace housekeeping (dry run first, confirm before a real run), import, remote sources, export, this browser's preferences backup, session cleanup (whole days ≥ 1, a dry-run count in its confirm) and the danger zone (typed confirmation) —, `section="about"` — system information — and `section="notifications"` — browser notifications (per-browser, with a reset) and alerts (server-wide). Server info (`/api/settings/info`) is read only by Data and About, refreshed on activity at most every 10 s. Language, theme and the pet live on the Appearance page (`components/settings/AppearanceSettings.tsx`); per-tool settings live in that tool's page under `/settings/agents/<id>`.
+ * @description The install-wide settings, as three pages of the Settings nav (`SettingsHub.tsx`): `section="data"` — total cost, database overview, workspace housekeeping (dry run first, confirm before a real run), import, remote sources, push ingest (`components/settings/PushIngestSettings.tsx`), privacy (`components/settings/PrivacySettings.tsx`), export, this browser's preferences backup, session cleanup (whole days ≥ 1, a dry-run count in its confirm) and the danger zone (typed confirmation) —, `section="about"` — the start-at-login switch (`AutostartSettings`) and system information — and `section="notifications"` — browser notifications (per-browser, with a reset) and alerts (server-wide). Server info (`/api/settings/info`) is read only by Data and About, refreshed on activity at most every 10 s. Language, theme and the pet live on the Appearance page (`components/settings/AppearanceSettings.tsx`); per-tool settings live in that tool's page under `/settings/agents/<id>`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -105,6 +105,9 @@ import { notify, playSound } from "../lib/notify";
 import { Tip } from "../components/Tip";
 import { ImportHistory } from "../components/ImportHistory";
 import { RemoteSources } from "../components/RemoteSources";
+import { PushIngestSettings } from "../components/settings/PushIngestSettings";
+import { PrivacySettings } from "../components/settings/PrivacySettings";
+import { AutostartSettings } from "../components/settings/AutostartSettings";
 import { Skeleton } from "../components/Skeleton";
 import { AlertsNotifications } from "../components/AlertsNotifications";
 import {
@@ -962,6 +965,10 @@ export function Settings({
             <RemoteSources />
           </section>
 
+          {/* ─── PUSH INGEST + PRIVACY (each its own anchored card) ─── */}
+          <PushIngestSettings />
+          <PrivacySettings />
+
           {/* ─── SESSION CLEANUP ─── */}
           <section id="cleanup" className="card p-5 space-y-4 scroll-mt-24">
             <div className="flex items-center gap-3">
@@ -1115,6 +1122,9 @@ export function Settings({
 
       {section === "about" && (
         <section id="about" className="scroll-mt-24">
+          <div className="mb-4">
+            <AutostartSettings />
+          </div>
           <p className="text-xs text-fg-muted mb-4">{t("about.description")}</p>
           {sysInfo ? (
             <div className="card p-5">
@@ -1219,7 +1229,7 @@ function ClearDataDialog({
         aria-modal="true"
         aria-labelledby="clear-data-title"
         aria-describedby="clear-data-body"
-        className="card w-full max-w-md space-y-4 border-status-danger/40 p-5"
+        className="card max-h-full w-full max-w-md space-y-4 overflow-y-auto border-status-danger/40 p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <h2

client/src/pages/SettingsHub.tsx

@@ -33,6 +33,8 @@ import {
   Database,
   Info,
   Bot,
+  Camera,
+  CalendarClock,
   Coins,
   GitBranch,
   KeyRound,
@@ -44,9 +46,11 @@ import { Settings } from "./Settings";
 import { CcConfig } from "./CcConfig";
 import { CodexConfig } from "./CodexConfig";
 import { AiToolConfig } from "./AiToolConfig";
-import { AiRouterConfig } from "./AiRouterConfig";
+import { AiProxyConfig } from "./AiProxyConfig";
 import { GitCredentialsConfig } from "./GitCredentialsConfig";
 import { AppearanceSettings } from "../components/settings/AppearanceSettings";
+import { SnapshotSettings } from "../components/settings/SnapshotSettings";
+import { ReportSettings } from "../components/settings/ReportSettings";
 import { AiToolsSettings } from "../components/settings/AiToolsSettings";
 import { PricingSettings } from "../components/settings/PricingSettings";
 import { WorktreeVisibilitySettings } from "../components/settings/WorktreeVisibilitySettings";
@@ -78,7 +82,7 @@ const LEGACY_TOOL: Record<string, string> = {
   dashboard: "appearance",
   "claude-code": "agents/claude-code",
   codex: "agents/codex",
-  "ai-router": "ai-router",
+  "ai-router": "ai-proxy",
   "git-credentials": "git-credentials",
 };
 
@@ -113,7 +117,12 @@ function toolNavIcon(id: string, label: string) {
   return Icon;
 }
 
-const MOVED: Record<string, string> = { general: "appearance", pet: "appearance#pet" };
+const MOVED: Record<string, string> = {
+  general: "appearance",
+  pet: "appearance#pet",
+  // The AI Router → AI Proxy rename.
+  "ai-router": "ai-proxy",
+};
 
 /** An unknown section: say so, then show Appearance. */
 function UnknownSection({ name }: { name: string }) {
@@ -223,6 +232,20 @@ export function SettingsHub() {
       ...s("appearance"),
       render: () => <AppearanceSettings />,
     },
+    {
+      id: "snapshots",
+      group: "general",
+      Icon: Camera,
+      ...s("snapshots"),
+      render: () => <SnapshotSettings />,
+    },
+    {
+      id: "reports",
+      group: "general",
+      Icon: CalendarClock,
+      ...s("reports"),
+      render: () => <ReportSettings />,
+    },
     {
       id: "notifications",
       group: "general",
@@ -272,11 +295,11 @@ export function SettingsHub() {
         render: () => <AiToolConfig key={x.id} toolId={x.id} />,
       })),
     {
-      id: "ai-router",
+      id: "ai-proxy",
       group: "routing",
       Icon: Router,
-      ...s("aiRouter"),
-      render: () => <AiRouterConfig />,
+      ...s("aiProxy"),
+      render: () => <AiProxyConfig />,
     },
     {
       id: "pricing",

client/src/pages/SnapshotView.tsx

@@ -0,0 +1,191 @@
+/**
+ * @file SnapshotView.tsx
+ * @description The read-only page `/snapshot/:token`: a session as it was frozen
+ * by `POST /api/snapshots` — header, SessionOverview fed the frozen stats, the
+ * agents, and the Replay / Timeline tabs over the frozen events. Nothing here
+ * reads live data.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Bot, Camera, Clock, DollarSign, Film, List, ShieldCheck } from "lucide-react";
+import { api } from "../lib/api";
+import type { AgentInfo } from "../lib/event-grouping";
+import { formatDateTime, fmtCostFull } from "../lib/format";
+import type { SessionSnapshotInfo, SessionSnapshotPayload } from "../lib/types";
+import { SessionOverview } from "../components/SessionOverview";
+import { AgentCard } from "../components/AgentCard";
+import { EventTimeline } from "../components/EventTimeline";
+import { EventReplay } from "../components/EventReplay";
+import { SessionStatusBadge } from "../components/StatusBadge";
+import { Skeleton } from "../components/Skeleton";
+
+type Tab = "overview" | "replay" | "timeline";
+
+export function SnapshotView() {
+  const { token = "" } = useParams<{ token: string }>();
+  const { t } = useTranslation("sessions");
+  const [data, setData] = useState<{
+    snapshot: SessionSnapshotInfo;
+    payload: SessionSnapshotPayload;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [tab, setTab] = useState<Tab>("overview");
+
+  useEffect(() => {
+    let live = true;
+    setData(null);
+    setError(null);
+    api.snapshots
+      .get(token)
+      .then((r) => live && setData(r))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
+  }, [token]);
+
+  const payload = data?.payload;
+  const agentInfoById = useMemo(() => {
+    const map = new Map<string, AgentInfo>();
+    for (const a of payload?.agents ?? []) map.set(a.id, a);
+    return map;
+  }, [payload]);
+  const sessionNameById = useMemo(() => {
+    const s = payload?.session;
+    return new Map(s ? [[s.id, s.name?.trim() || `Session ${s.id.slice(0, 8)}`]] : []);
+  }, [payload]);
+
+  if (error) {
+    return (
+      <div className="py-20 text-center">
+        <p className="mb-2 text-status-danger">{t("snapshot.notFound")}</p>
+        <p className="text-xs text-fg-muted">{error}</p>
+      </div>
+    );
+  }
+  if (!payload) {
+    return (
+      <div className="space-y-4" aria-busy="true">
+        <Skeleton className="h-6 w-64" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+    );
+  }
+
+  const { session, agents, events, stats, cost } = payload;
+  const tabs: { id: Tab; label: string; Icon: typeof Bot }[] = [
+    { id: "overview", label: `${t("detail.agents")} (${agents.length})`, Icon: Bot },
+    { id: "replay", label: t("replay.tab"), Icon: Film },
+    { id: "timeline", label: t("snapshot.timeline", { n: events.length }), Icon: List },
+  ];
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      <div className="flex items-start gap-3 rounded-lg border border-accent/30 bg-accent/10 px-4 py-2.5 text-sm">
+        <Camera className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
+        <div className="min-w-0 flex-1">
+          <div className="font-medium text-fg-primary">
+            {t("snapshot.banner", { date: formatDateTime(payload.captured_at) })}
+          </div>
+          <div className="text-[11px] text-fg-muted">{t("snapshot.bannerBody")}</div>
+        </div>
+        {payload.redacted.file_paths && (
+          <span className="inline-flex items-center gap-1 text-[11px] text-fg-secondary">
+            <ShieldCheck className="h-3.5 w-3.5" />
+            {t("snapshot.redacted")}
+          </span>
+        )}
+        <Link to={`/sessions/${session.id}`} className="text-[11px] text-accent hover:underline">
+          {t("snapshot.openLive")}
+        </Link>
+      </div>
+
+      <div>
+        <div className="mb-2 flex items-center gap-3">
+          <h2 className="text-xl font-semibold text-fg-primary">
+            {session.name || `${t("defaultName")}${session.id.slice(0, 8)}`}
+          </h2>
+          <SessionStatusBadge status={session.status} />
+        </div>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span className="rounded bg-surface-2 px-2 py-1 font-mono text-xs text-fg-muted">
+            {session.id.slice(0, 16)}
+          </span>
+          <span className="inline-flex items-center gap-1.5 rounded bg-surface-2 px-2 py-1 text-xs text-fg-secondary">
+            <Clock className="h-3 w-3 text-fg-muted" />
+            {formatDateTime(session.started_at)}
+          </span>
+          {cost.total_cost > 0 && (
+            <span className="inline-flex items-center gap-1.5 rounded bg-status-success/10 px-2 py-1 text-xs font-medium text-status-success">
+              <DollarSign className="h-3 w-3" />
+              {fmtCostFull(cost.total_cost).slice(1)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1 border-b border-border">
+        {tabs.map(({ id, label, Icon }) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => setTab(id)}
+            className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+              tab === id
+                ? "border-violet-500 text-violet-700 dark:text-violet-400"
+                : "border-transparent text-fg-muted hover:text-fg-secondary"
+            }`}
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "overview" && (
+        <div>
+          {/* Frozen: its duration ends at the capture, not at "now". */}
+          <SessionOverview
+            session={{ ...session, ended_at: session.ended_at ?? payload.captured_at }}
+            agents={agents}
+            stats={stats}
+          />
+          <div className="space-y-2">
+            {[...agents]
+              .sort((a, b) => (a.started_at || "").localeCompare(b.started_at || ""))
+              .map((a) => (
+                <AgentCard
+                  key={a.id}
+                  agent={a}
+                  session={{ ...session, cost: cost.total_cost }}
+                  // Without a handler the card opens the LIVE session.
+                  onClick={() => undefined}
+                />
+              ))}
+          </div>
+        </div>
+      )}
+      {tab === "replay" && (
+        <EventReplay
+          events={events}
+          agentInfoById={agentInfoById}
+          sessionNameById={sessionNameById}
+        />
+      )}
+      {tab === "timeline" &&
+        (events.length === 0 ? (
+          <p className="text-sm text-fg-muted">{t("detail.noEvents")}</p>
+        ) : (
+          <EventTimeline
+            events={[...events].reverse()}
+            agentInfoById={agentInfoById}
+            sessionNameById={sessionNameById}
+            fallbackCwd={session.cwd}
+          />
+        ))}
+    </div>
+  );
+}

client/src/pages/Workflows.tsx

@@ -75,6 +75,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { Workflow, RefreshCw, Download, AlertCircle, Info } from "lucide-react";
 import { api } from "../lib/api";
+import type { DateRange } from "../lib/dateRange";
 import { eventBus } from "../lib/eventBus";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
 import type { WorkflowData, WSMessage } from "../lib/types";
@@ -91,7 +92,11 @@ import { SkillUsagePanel } from "../components/workflows/SkillUsagePanel";
 
 type StatusFilter = "all" | "active" | "completed";
 
-export function Workflows({ embedded = false }: { embedded?: boolean } = {}) {
+export function Workflows({
+  embedded = false,
+  tool,
+  range,
+}: { embedded?: boolean; tool?: string; range?: DateRange } = {}) {
   const { t } = useTranslation("workflows");
   const [data, setData] = useState<WorkflowData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -108,7 +113,7 @@ export function Workflows({ embedded = false }: { embedded?: boolean } = {}) {
   const fetchData = useCallback(async () => {
     const seq = ++fetchSeq.current;
     try {
-      const result = await api.workflows.get(statusFilter);
+      const result = await api.workflows.get(statusFilter, tool, range);
       if (seq !== fetchSeq.current) return;
       setError(null);
       setData(result);
@@ -118,7 +123,7 @@ export function Workflows({ embedded = false }: { embedded?: boolean } = {}) {
     } finally {
       if (seq === fetchSeq.current) setLoading(false);
     }
-  }, [statusFilter]);
+  }, [statusFilter, tool, range?.from, range?.to]);
 
   const selectSession = useCallback((id: string | null) => {
     setSelectedSessionId(id);

client/src/pages/Workspace.tsx

@@ -925,10 +925,11 @@ export function Workspace() {
     <div
       className={
         sessionView
-          ? // Cancels Layout's page padding; the 1.5rem left is the status bar's.
-            "-m-5 flex h-[calc(100vh-1.5rem)] flex-col lg:-m-6"
+          ? // Cancels Layout's page padding; the 1.5rem left is the status bar's,
+            // plus the drawer's 2.75rem menu bar below `md` (issue #61).
+            "-m-5 flex h-[calc(100vh-1.5rem)] flex-col max-md:h-[calc(100vh-4.25rem)] lg:-m-6"
           : viewportLocked
-            ? "h-[calc(100vh-4rem)] lg:h-[calc(100vh-4.5rem)] flex flex-col gap-5"
+            ? "h-[calc(100vh-4rem)] max-md:h-[calc(100vh-6.75rem)] lg:h-[calc(100vh-4.5rem)] flex flex-col gap-5"
             : "space-y-5"
       }
     >

client/src/pages/__tests__/AgentsTable.test.tsx

@@ -0,0 +1,76 @@
+/**
+ * @file AgentsTable.test.tsx
+ * @description The Sessions page's Agents tab: it asks only for agents, renders
+ * a page of rows with session links, sorts by an allowed column on a header
+ * click (flipping on a second), and points both export links at the filter.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import i18n from "i18next";
+
+const { query } = vi.hoisted(() => ({
+  query: {
+    page: vi.fn(),
+    exportUrl: (p: URLSearchParams, f: string) => `/api/query?${p.toString()}&format=${f}`,
+  },
+}));
+vi.mock("../../lib/api", () => ({ api: { query } }));
+vi.mock("../../hooks/useAiTools", () => ({
+  useAiTools: () => ({ tools: [{ id: "codex", label: "Codex" }] }),
+}));
+
+import { AgentsTable } from "../AgentsTable";
+
+const lastParams = () => {
+  const calls = query.page.mock.calls;
+  return calls[calls.length - 1]![0] as URLSearchParams;
+};
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  vi.clearAllMocks();
+  query.page.mockResolvedValue({
+    entity: "agents",
+    columns: ["id", "session_id", "name", "started_at"],
+    sortable: ["started_at", "name"],
+    statuses: ["working", "waiting", "completed", "error"],
+    rows: [{ id: "a1", session_id: "sess-abcdef12", name: "first", started_at: "2026-10-01" }],
+    total: 1,
+    limit: 50,
+    offset: 0,
+    export_cap: 50000,
+  });
+});
+
+describe("AgentsTable", () => {
+  it("lists agents, sorts by an allowed column and exports the filter", async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <AgentsTable />
+      </MemoryRouter>
+    );
+    expect(await screen.findByText("first")).toBeInTheDocument();
+    expect(lastParams().get("entity")).toBe("agents");
+    expect(screen.getByRole("link", { name: "sess-abc" })).toHaveAttribute(
+      "href",
+      "/sessions/sess-abcdef12"
+    );
+    expect(screen.getByRole("button", { name: /Status/ })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "name" }));
+    await waitFor(() => expect(lastParams().get("sort")).toBe("name"));
+    expect(lastParams().get("dir")).toBe("desc");
+    await user.click(screen.getByRole("button", { name: "name" }));
+    await waitFor(() => expect(lastParams().get("dir")).toBe("asc"));
+    // A column outside `sortable` has no sort button.
+    expect(screen.queryByRole("button", { name: "id" })).toBeNull();
+    const csv = screen.getByRole("link", { name: /Export CSV/ });
+    expect(csv.getAttribute("href")).toContain("entity=agents");
+    expect(csv.getAttribute("href")).toContain("sort=name");
+    expect(csv.getAttribute("href")).toContain("format=csv");
+  });
+});

client/src/pages/__tests__/AiProxyConfig.test.tsx

@@ -0,0 +1,288 @@
+/**
+ * @file Tests for the AI Proxy settings page — listing profiles, creating one,
+ * and the two rules that keep a key safe: the form never shows one, and an
+ * edit that leaves the field blank must not send an empty key that would wipe
+ * the stored one.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AiProxyConfig } from "../AiProxyConfig";
+import { api } from "../../lib/api";
+import { settleConfirm, subscribeConfirm, type PendingConfirm } from "../../lib/confirm";
+
+vi.mock("../../lib/api", () => ({
+  api: {
+    aiProxies: {
+      list: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      remove: vi.fn(),
+      test: vi.fn(),
+    },
+  },
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, opts?: Record<string, unknown>) =>
+      opts && typeof opts.label === "string" ? `${key}:${opts.label}` : key,
+  }),
+}));
+
+const native = {
+  name: "native",
+  label: "Native (Claude / Codex)",
+  builtin: true,
+  baseUrl: "",
+  hasKey: false,
+  model: "",
+  models: {},
+};
+
+const nineRouter = {
+  ...native,
+  name: "9router",
+  label: "9Router",
+  builtin: false,
+  baseUrl: "http://localhost:20128/v1",
+  hasKey: true,
+  model: "Highest",
+  models: {
+    opus: "Highest",
+    sonnet: "Highest",
+    haiku: "Highest",
+    smallFast: "Highest",
+    subagent: "Highest",
+  },
+};
+
+beforeEach(() => {
+  vi.mocked(api.aiProxies.list)
+    .mockReset()
+    .mockResolvedValue({ items: [native] });
+  vi.mocked(api.aiProxies.create).mockReset().mockResolvedValue(nineRouter);
+  vi.mocked(api.aiProxies.update).mockReset().mockResolvedValue(nineRouter);
+  vi.mocked(api.aiProxies.remove).mockReset().mockResolvedValue({ removed: "9router" });
+  vi.mocked(api.aiProxies.test)
+    .mockReset()
+    .mockResolvedValue({
+      claude: { ok: true, status: 200, message: "Highest" },
+      codex: { ok: true, status: 200, message: "Highest" },
+    });
+});
+
+describe("AiProxyConfig", () => {
+  it("lists the built-in native profile with no edit or delete control", async () => {
+    render(<AiProxyConfig />);
+    expect(await screen.findByText("Native (Claude / Codex)")).toBeInTheDocument();
+    expect(screen.queryByLabelText(/aiProxy\.edit Native/)).toBeNull();
+    expect(screen.queryByLabelText(/aiProxy\.remove Native/)).toBeNull();
+  });
+
+  it("saves a new profile with the typed endpoint, key and model", async () => {
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldLabel"), "9Router");
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiProxy.fieldApiKey"), "sk-typed");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "Highest");
+    await user.click(screen.getByRole("button", { name: "aiProxy.save" }));
+
+    await waitFor(() =>
+      expect(api.aiProxies.create).toHaveBeenCalledWith({
+        label: "9Router",
+        baseUrl: "http://localhost:20128/v1",
+        model: "Highest",
+        // Every tier equals the headline model, so none is sent: the server
+        // fills them, which is what makes one field enough.
+        models: {},
+        behavesAs: "",
+        apiKey: "sk-typed",
+      })
+    );
+  });
+
+  it("sends the typed behavesAs, which maps the proxy's model names in Claude Code (#56)", async () => {
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldLabel"), "9Router");
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "agent");
+    await user.type(screen.getByLabelText("aiProxy.fieldBehavesAs"), "claude-opus-5-5");
+    await user.click(screen.getByRole("button", { name: "aiProxy.save" }));
+
+    await waitFor(() =>
+      expect(api.aiProxies.create).toHaveBeenCalledWith(
+        expect.objectContaining({ model: "agent", behavesAs: "claude-opus-5-5" })
+      )
+    );
+  });
+
+  it("sends only the tiers that differ from the headline model", async () => {
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldLabel"), "9Router");
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "Highest");
+    await user.type(screen.getByLabelText("aiProxy.tier.opus"), "PremiumCombo");
+    await user.click(screen.getByRole("button", { name: "aiProxy.save" }));
+
+    await waitFor(() =>
+      expect(api.aiProxies.create).toHaveBeenCalledWith(
+        expect.objectContaining({ models: { opus: "PremiumCombo" } })
+      )
+    );
+  });
+
+  it("never puts a stored key in the edit form, and omits it when left blank", async () => {
+    // The API cannot return a key, so an edit that sends `apiKey: ""` would
+    // silently erase the one on disk.
+    vi.mocked(api.aiProxies.list).mockResolvedValue({ items: [native, nineRouter] });
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByLabelText("aiProxy.edit 9Router"));
+    expect(screen.getByLabelText("aiProxy.fieldApiKey")).toHaveValue("");
+
+    await user.clear(screen.getByLabelText("aiProxy.fieldLabel"));
+    await user.type(screen.getByLabelText("aiProxy.fieldLabel"), "9Router nhà");
+    await user.click(screen.getByRole("button", { name: "aiProxy.save" }));
+
+    await waitFor(() => expect(api.aiProxies.update).toHaveBeenCalled());
+    const call = vi.mocked(api.aiProxies.update).mock.calls[0];
+    expect(call?.[1]).not.toHaveProperty("apiKey");
+  });
+
+  it("surfaces a server error instead of closing the form", async () => {
+    vi.mocked(api.aiProxies.create).mockRejectedValue(
+      new Error("baseUrl must be http:// or https://")
+    );
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldLabel"), "Bad");
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "file:///etc/passwd");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "x");
+    await user.click(screen.getByRole("button", { name: "aiProxy.save" }));
+
+    // Inside the dialog, not behind its scrim.
+    const dialog = screen.getByRole("dialog");
+    expect(await within(dialog).findByText(/must be http/)).toBeInTheDocument();
+  });
+
+  it("closes the form on Escape", async () => {
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+});
+
+describe("AiProxyConfig — testing an endpoint before saving it", () => {
+  it("sends the typed endpoint, key and model, and reports success", async () => {
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiProxy.fieldApiKey"), "sk-typed");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "Highest");
+    await user.click(screen.getByTestId("proxy-test"));
+
+    await waitFor(() =>
+      expect(api.aiProxies.test).toHaveBeenCalledWith({
+        baseUrl: "http://localhost:20128/v1",
+        model: "Highest",
+        apiKey: "sk-typed",
+      })
+    );
+    const lines = await screen.findAllByTestId("proxy-test-result");
+    expect(lines[0]).toHaveTextContent("Claude Code: aiProxy.testOk");
+    expect(lines[1]).toHaveTextContent("Codex: aiProxy.testOk");
+  });
+
+  it("names the profile being edited so the server can reuse its stored key", async () => {
+    vi.mocked(api.aiProxies.list).mockResolvedValue({ items: [native, nineRouter] });
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByLabelText(/aiProxy\.edit 9Router/));
+    await user.click(screen.getByTestId("proxy-test"));
+
+    await waitFor(() =>
+      expect(api.aiProxies.test).toHaveBeenCalledWith({
+        baseUrl: "http://localhost:20128/v1",
+        model: "Highest",
+        name: "9router",
+      })
+    );
+  });
+
+  it("shows the proxy's own refusal per CLI rather than claiming it works", async () => {
+    vi.mocked(api.aiProxies.test).mockResolvedValue({
+      claude: { ok: false, status: 401, message: "invalid api key" },
+      codex: { ok: true, status: 200, message: "Highest" },
+    });
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "Highest");
+    await user.click(screen.getByTestId("proxy-test"));
+
+    const [claude, codex] = await screen.findAllByTestId("proxy-test-result");
+    expect(claude).toHaveTextContent("Claude Code: aiProxy.testFailed");
+    expect(codex).toHaveTextContent("Codex: aiProxy.testOk");
+  });
+
+  it("drops a stale verdict as soon as a field changes", async () => {
+    render(<AiProxyConfig />);
+    const user = userEvent.setup();
+
+    await user.click(await screen.findByRole("button", { name: /aiProxy\.add/ }));
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "http://localhost:20128/v1");
+    await user.type(screen.getByLabelText("aiProxy.fieldModel"), "Highest");
+    await user.click(screen.getByTestId("proxy-test"));
+    expect(await screen.findAllByTestId("proxy-test-result")).toHaveLength(2);
+
+    await user.type(screen.getByLabelText("aiProxy.fieldBaseUrl"), "2");
+    await waitFor(() => expect(screen.queryAllByTestId("proxy-test-result")).toHaveLength(0));
+  });
+
+  it("opens a profile's Edit and Remove from a right-click; the built-in row has no menu", async () => {
+    vi.mocked(api.aiProxies.list).mockResolvedValue({ items: [native, nineRouter] });
+    let pending: PendingConfirm | null = null;
+    const off = subscribeConfirm((p) => (pending = p));
+    const user = userEvent.setup();
+    render(<AiProxyConfig />);
+    const row = (await screen.findByText("9Router")).closest("tr")!;
+
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByText(native.label) });
+    expect(screen.queryByRole("menu")).toBeNull();
+
+    await user.pointer({ keys: "[MouseRight]", target: row });
+    await user.click(screen.getByRole("menuitem", { name: "aiProxy.remove" }));
+    await waitFor(() => expect(pending?.title).toBe("aiProxy.removeConfirm:9Router"));
+    settleConfirm(false);
+    await waitFor(() => expect(pending).toBeNull());
+    expect(api.aiProxies.remove).not.toHaveBeenCalled();
+
+    await user.pointer({ keys: "[MouseRight]", target: row });
+    await user.click(screen.getByRole("menuitem", { name: "aiProxy.edit" }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    off();
+  });
+});

client/src/pages/__tests__/AiRouterConfig.test.tsx

@@ -1,290 +0,0 @@
-/**
- * @file Tests for the AI Router settings tab — listing profiles, creating one,
- * and the two rules that keep a key safe: the form never shows one, and an
- * edit that leaves the field blank must not send an empty key that would wipe
- * the stored one.
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { AiRouterConfig } from "../AiRouterConfig";
-import { api } from "../../lib/api";
-import { settleConfirm, subscribeConfirm, type PendingConfirm } from "../../lib/confirm";
-
-vi.mock("../../lib/api", () => ({
-  api: {
-    aiRouters: {
-      list: vi.fn(),
-      create: vi.fn(),
-      update: vi.fn(),
-      remove: vi.fn(),
-      test: vi.fn(),
-    },
-  },
-}));
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({
-    t: (key: string, opts?: Record<string, unknown>) =>
-      opts && typeof opts.label === "string" ? `${key}:${opts.label}` : key,
-  }),
-}));
-
-const native = {
-  name: "native",
-  label: "Native (Claude / Codex)",
-  builtin: true,
-  baseUrl: "",
-  hasKey: false,
-  model: "claude-sonnet-5",
-  models: {
-    opus: "claude-opus-5",
-    sonnet: "claude-sonnet-5",
-    haiku: "claude-haiku-4-5-20251001",
-    smallFast: "claude-haiku-4-5-20251001",
-    subagent: "claude-haiku-4-5-20251001",
-  },
-};
-
-const nineRouter = {
-  ...native,
-  name: "9router",
-  label: "9Router",
-  builtin: false,
-  baseUrl: "http://localhost:20128/v1",
-  hasKey: true,
-  model: "Highest",
-  models: {
-    opus: "Highest",
-    sonnet: "Highest",
-    haiku: "Highest",
-    smallFast: "Highest",
-    subagent: "Highest",
-  },
-};
-
-beforeEach(() => {
-  vi.mocked(api.aiRouters.list)
-    .mockReset()
-    .mockResolvedValue({ items: [native] });
-  vi.mocked(api.aiRouters.create).mockReset().mockResolvedValue(nineRouter);
-  vi.mocked(api.aiRouters.update).mockReset().mockResolvedValue(nineRouter);
-  vi.mocked(api.aiRouters.remove).mockReset().mockResolvedValue({ removed: "9router" });
-  vi.mocked(api.aiRouters.test)
-    .mockReset()
-    .mockResolvedValue({ ok: true, status: 200, message: "Highest" });
-});
-
-describe("AiRouterConfig", () => {
-  it("lists the built-in native profile with no edit or delete control", async () => {
-    render(<AiRouterConfig />);
-    expect(await screen.findByText("Native (Claude / Codex)")).toBeInTheDocument();
-    expect(screen.queryByLabelText(/aiRouter\.edit Native/)).toBeNull();
-    expect(screen.queryByLabelText(/aiRouter\.remove Native/)).toBeNull();
-  });
-
-  it("saves a new profile with the typed endpoint, key and model", async () => {
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router");
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
-    await user.type(screen.getByLabelText("aiRouter.fieldApiKey"), "sk-typed");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
-    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
-
-    await waitFor(() =>
-      expect(api.aiRouters.create).toHaveBeenCalledWith({
-        label: "9Router",
-        baseUrl: "http://localhost:20128/v1",
-        model: "Highest",
-        // Every tier equals the headline model, so none is sent: the server
-        // fills them, which is what makes one field enough.
-        models: {},
-        behavesAs: "",
-        apiKey: "sk-typed",
-      })
-    );
-  });
-
-  it("sends the typed behavesAs, which maps the router's model names in Claude Code (#56)", async () => {
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router");
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "agent");
-    await user.type(screen.getByLabelText("aiRouter.fieldBehavesAs"), "claude-opus-5-5");
-    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
-
-    await waitFor(() =>
-      expect(api.aiRouters.create).toHaveBeenCalledWith(
-        expect.objectContaining({ model: "agent", behavesAs: "claude-opus-5-5" })
-      )
-    );
-  });
-
-  it("sends only the tiers that differ from the headline model", async () => {
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router");
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
-    await user.type(screen.getByLabelText("aiRouter.tier.opus"), "PremiumCombo");
-    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
-
-    await waitFor(() =>
-      expect(api.aiRouters.create).toHaveBeenCalledWith(
-        expect.objectContaining({ models: { opus: "PremiumCombo" } })
-      )
-    );
-  });
-
-  it("never puts a stored key in the edit form, and omits it when left blank", async () => {
-    // The API cannot return a key, so an edit that sends `apiKey: ""` would
-    // silently erase the one on disk.
-    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByLabelText("aiRouter.edit 9Router"));
-    expect(screen.getByLabelText("aiRouter.fieldApiKey")).toHaveValue("");
-
-    await user.clear(screen.getByLabelText("aiRouter.fieldLabel"));
-    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "9Router nhà");
-    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
-
-    await waitFor(() => expect(api.aiRouters.update).toHaveBeenCalled());
-    const call = vi.mocked(api.aiRouters.update).mock.calls[0];
-    expect(call?.[1]).not.toHaveProperty("apiKey");
-  });
-
-  it("surfaces a server error instead of closing the form", async () => {
-    vi.mocked(api.aiRouters.create).mockRejectedValue(
-      new Error("baseUrl must be http:// or https://")
-    );
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldLabel"), "Bad");
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "file:///etc/passwd");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "x");
-    await user.click(screen.getByRole("button", { name: "aiRouter.save" }));
-
-    // Inside the dialog, not behind its scrim.
-    const dialog = screen.getByRole("dialog");
-    expect(await within(dialog).findByText(/must be http/)).toBeInTheDocument();
-  });
-
-  it("closes the form on Escape", async () => {
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    await user.keyboard("{Escape}");
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-  });
-});
-
-describe("AiRouterConfig — testing an endpoint before saving it", () => {
-  it("sends the typed endpoint, key and model, and reports success", async () => {
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
-    await user.type(screen.getByLabelText("aiRouter.fieldApiKey"), "sk-typed");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
-    await user.click(screen.getByTestId("router-test"));
-
-    await waitFor(() =>
-      expect(api.aiRouters.test).toHaveBeenCalledWith({
-        baseUrl: "http://localhost:20128/v1",
-        model: "Highest",
-        apiKey: "sk-typed",
-      })
-    );
-    expect(await screen.findByTestId("router-test-result")).toHaveTextContent("aiRouter.testOk");
-  });
-
-  it("names the profile being edited so the server can reuse its stored key", async () => {
-    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByLabelText(/aiRouter\.edit 9Router/));
-    await user.click(screen.getByTestId("router-test"));
-
-    await waitFor(() =>
-      expect(api.aiRouters.test).toHaveBeenCalledWith({
-        baseUrl: "http://localhost:20128/v1",
-        model: "Highest",
-        name: "9router",
-      })
-    );
-  });
-
-  it("shows the router's own refusal rather than claiming it works", async () => {
-    vi.mocked(api.aiRouters.test).mockResolvedValue({
-      ok: false,
-      status: 401,
-      message: "invalid api key",
-    });
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
-    await user.click(screen.getByTestId("router-test"));
-
-    expect(await screen.findByTestId("router-test-result")).toHaveTextContent(
-      "aiRouter.testFailed"
-    );
-  });
-
-  it("drops a stale verdict as soon as a field changes", async () => {
-    render(<AiRouterConfig />);
-    const user = userEvent.setup();
-
-    await user.click(await screen.findByRole("button", { name: /aiRouter\.add/ }));
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "http://localhost:20128/v1");
-    await user.type(screen.getByLabelText("aiRouter.fieldModel"), "Highest");
-    await user.click(screen.getByTestId("router-test"));
-    expect(await screen.findByTestId("router-test-result")).toBeInTheDocument();
-
-    await user.type(screen.getByLabelText("aiRouter.fieldBaseUrl"), "2");
-    await waitFor(() => expect(screen.queryByTestId("router-test-result")).toBeNull());
-  });
-
-  it("opens a profile's Edit and Remove from a right-click; the built-in row has no menu", async () => {
-    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
-    let pending: PendingConfirm | null = null;
-    const off = subscribeConfirm((p) => (pending = p));
-    const user = userEvent.setup();
-    render(<AiRouterConfig />);
-    const row = (await screen.findByText("9Router")).closest("tr")!;
-
-    await user.pointer({ keys: "[MouseRight]", target: screen.getByText(native.label) });
-    expect(screen.queryByRole("menu")).toBeNull();
-
-    await user.pointer({ keys: "[MouseRight]", target: row });
-    await user.click(screen.getByRole("menuitem", { name: "aiRouter.remove" }));
-    await waitFor(() => expect(pending?.title).toBe("aiRouter.removeConfirm:9Router"));
-    settleConfirm(false);
-    await waitFor(() => expect(pending).toBeNull());
-    expect(api.aiRouters.remove).not.toHaveBeenCalled();
-
-    await user.pointer({ keys: "[MouseRight]", target: row });
-    await user.click(screen.getByRole("menuitem", { name: "aiRouter.edit" }));
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    off();
-  });
-});

client/src/pages/__tests__/AiToolConfig.test.tsx

@@ -50,7 +50,7 @@ const GEMINI: AiTool = {
   prompt: { mode: "flag" },
   resume: false,
   bypass: true,
-  routerCapable: false,
+  proxyCapable: false,
   install: { kind: "npm", package: "@google/gemini-cli" },
   update: { kind: "npm" },
   modelFlag: true,