feat: analytics parity — tool cost, date ranges, budgets, query explorer, replay, snapshots (v2.4.0)

Analytics parity phases 2–7 (docs/plans/analytics-parity/), built on
138e706 and ported onto v2.3.1:
- Cost by AI tool (?tool= on cost/analytics/stats/workflows, by_tool,
  Codex fast/priority and flex tiers, agenthub_cost_usd_total{tool,model})
- Date ranges (from/to) on cost/analytics/workflows; Analytics range select
  with Today / This week (Monday) / This month (1st) / 7d / 30d / 90d / All /
  Custom; workflow filters carried into workflow-stats.js (read worker)
- Budgets and cost alerts as alert rule types (alert_rules rebuilt without
  its rule_type CHECK), GET /api/budgets/status, rule preview, spend pace,
  status-bar budget chip; rules stay editable in place
- Query Explorer (/query, allowlisted sort, CSV/JSON export) and scheduled
  reports (report_definitions/report_runs, Settings → Reports)
- Session Replay tab and immutable snapshots (session_snapshots, /snapshot/:token)
- Remote Codex sync, push ingest with a hashed token, privacy redaction and
  ignored folders (Settings → Data), Cursor sessions (no cost)
- Read-only MCP server, statusline, Grafana/Prometheus files

Also: resizable sidebar, pet run/wave animations, the workspace home keeps a
half-typed prompt, and the pre-commit hook runs only the related tests for a
small commit.

client/src/App.tsx

@@ -82,6 +82,12 @@ 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 }))
+);
+const QueryExplorer = lazy(() =>
+  import("./pages/QueryExplorer").then((m) => ({ default: m.QueryExplorer }))
+);
 
 function PageFallback() {
   const { t } = useTranslation();
@@ -158,6 +164,22 @@ export default function App() {
                 </Page>
               }
             />
+            <Route
+              path="snapshot/:token"
+              element={
+                <Page>
+                  <SnapshotView />
+                </Page>
+              }
+            />
+            <Route
+              path="query"
+              element={
+                <Page>
+                  <QueryExplorer />
+                </Page>
+              }
+            />
             <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/DocumentTitle.tsx

@@ -28,6 +28,8 @@ export function DocumentTitle() {
     title = t("workspace");
   } else if (path.startsWith("/settings")) {
     title = t("settings");
+  } else if (path.startsWith("/query")) {
+    title = t("query");
   } else if (path !== "/") {
     title = t("notFound");
   }

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

@@ -69,6 +69,7 @@ import {
   ChevronUp,
   ChevronDown,
   FolderTree,
+  TableProperties,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
@@ -83,6 +84,7 @@ function isUpdatePayload(x: unknown): x is UpdateStatusPayload {
 const NAV_KEYS = [
   { to: "/", icon: LayoutDashboard, key: "nav:dashboard" },
   { to: "/sessions", icon: FolderOpen, key: "nav:sessions" },
+  { to: "/query", icon: TableProperties, key: "nav:query" },
 ] as const;
 
 // SmartGift wordmark, replacing the old text subtitle. Remote URLs: the logo is
@@ -170,6 +172,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 +186,8 @@ export function Sidebar({
   onConnectionOpenChange,
   onUpdateAvailableChange,
   drawer,
+  width = 240,
+  resizing = false,
 }: SidebarProps) {
   const { t } = useTranslation();
   const asideRef = useRef<HTMLElement>(null);
@@ -423,8 +431,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";
@@ -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/__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/lanes/WorkspaceHome.tsx

@@ -125,7 +125,23 @@ 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();

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

@@ -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,6 +224,23 @@ describe("WorkspaceHome", () => {
     );
   });
 
+  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, Router/Permission/Worktree under it", async () => {
     renderHome();
     await screen.findByTestId("workspace-recent-s-live");

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__/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,61 @@
   "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": {
+    "title": "Query Explorer",
+    "subtitle": "Filter sessions, events and agents, then export what you see.",
+    "entity": "Data",
+    "entities": {
+      "sessions": "Sessions",
+      "events": "Events",
+      "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/nav.json

@@ -67,6 +67,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 +82,15 @@
     "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",
+  "query": "Query Explorer",
   "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

@@ -561,6 +561,11 @@
     "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).",
@@ -802,6 +807,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 +852,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/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,61 @@
   "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": {
+    "title": "Truy vấn dữ liệu",
+    "subtitle": "Lọc phiên, sự kiện và agent, rồi xuất đúng những gì đang thấy.",
+    "entity": "Dữ liệu",
+    "entities": {
+      "sessions": "Phiên",
+      "events": "Sự kiện",
+      "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/nav.json

@@ -67,6 +67,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 +82,15 @@
     "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",
+  "query": "Truy vấ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

@@ -561,6 +561,11 @@
     "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ộ).",
@@ -802,6 +807,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 +852,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/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__/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,29 @@ export const api = {
       /** DELETE /api/settings/codex-hooks — AgentHub's own hooks only */
       remove: () => request<CodexHooksStatus>("/settings/codex-hooks", { method: "DELETE" }),
     },
+    /** 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 +1293,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 +1302,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 +1424,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()}`);
     },
@@ -2066,6 +2112,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"),
@@ -2329,9 +2393,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. */
@@ -4172,6 +4292,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 +4312,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 +4329,25 @@ 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/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/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",
@@ -105,6 +119,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" },

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

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/QueryExplorer.tsx

@@ -0,0 +1,341 @@
+/**
+ * @file QueryExplorer.tsx
+ * @description `/query`: filter sessions, events or 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`, capped server-side).
+ * @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 { QueryEntity, QueryPage } from "../lib/types";
+
+const PAGE_SIZE = 50;
+const ENTITIES: QueryEntity[] = ["sessions", "events", "agents"];
+const STATUSES: Record<QueryEntity, string[]> = {
+  sessions: ["active", "completed", "error", "abandoned"],
+  events: [],
+  agents: ["working", "waiting", "completed", "error"],
+};
+
+export function QueryExplorer() {
+  const { t } = useTranslation("analytics");
+  const aiTools = useAiTools();
+  const [scope] = useDataScope();
+  const [entity, setEntity] = useState<QueryEntity>("sessions");
+  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 });
+    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 });
+  }, [entity, 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 switchEntity = (v: QueryEntity) => {
+    setEntity(v);
+    setStatus("");
+    setSort("");
+    setDir("desc");
+    setOffset(0);
+    setPage(null);
+  };
+  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;
+  const statuses = STATUSES[entity];
+
+  return (
+    <div className="animate-fade-in space-y-5">
+      <div>
+        <h1 className="text-lg font-semibold text-fg-primary">{t("query.title")}</h1>
+        <p className="text-sm text-fg-muted">{t("query.subtitle")}</p>
+      </div>
+
+      <div className="card p-4 flex flex-wrap items-end gap-3">
+        <div className="w-36">
+          <Select
+            value={entity}
+            onChange={switchEntity}
+            label={t("query.entity")}
+            options={ENTITIES.map((v) => ({ value: v, label: t(`query.entities.${v}`) }))}
+          />
+        </div>
+        <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>
+        {statuses.length > 0 && (
+          <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 =
+                        (entity === "sessions" && c === "id") || 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/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"` — 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,8 @@ 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 { Skeleton } from "../components/Skeleton";
 import { AlertsNotifications } from "../components/AlertsNotifications";
 import {
@@ -962,6 +964,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">

client/src/pages/SettingsHub.tsx

@@ -33,6 +33,8 @@ import {
   Database,
   Info,
   Bot,
+  Camera,
+  CalendarClock,
   Coins,
   GitBranch,
   KeyRound,
@@ -47,6 +49,8 @@ import { AiToolConfig } from "./AiToolConfig";
 import { AiRouterConfig } from "./AiRouterConfig";
 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";
@@ -223,6 +227,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",

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/__tests__/QueryExplorer.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * @file QueryExplorer.test.tsx
+ * @description The Query Explorer page: it renders a page of rows with session
+ * links, sorts by an allowed column on a header click (flipping on a second),
+ * switches entity, and points both export links at the current 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 { QueryExplorer } from "../QueryExplorer";
+
+const page = (entity: string, rows: Record<string, string>[]) => ({
+  entity,
+  columns: Object.keys(rows[0] ?? {}),
+  sortable: entity === "sessions" ? ["started_at", "name"] : ["created_at"],
+  statuses: [],
+  rows,
+  total: rows.length,
+  limit: 50,
+  offset: 0,
+  export_cap: 50000,
+});
+const lastParams = () => {
+  const calls = query.page.mock.calls;
+  return calls[calls.length - 1]![0] as URLSearchParams;
+};
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  vi.clearAllMocks();
+  query.page.mockImplementation((p: URLSearchParams) =>
+    Promise.resolve(
+      p.get("entity") === "events"
+        ? page("events", [{ id: "1", session_id: "sess-abcdef12", created_at: "2026-10-01" }])
+        : page("sessions", [{ id: "sess-abcdef12", name: "first", started_at: "2026-10-01" }])
+    )
+  );
+});
+
+describe("QueryExplorer", () => {
+  it("shows rows, sorts by an allowed column and exports the filter", async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <QueryExplorer />
+      </MemoryRouter>
+    );
+    expect(await screen.findByText("first")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "sess-abc" })).toHaveAttribute(
+      "href",
+      "/sessions/sess-abcdef12"
+    );
+    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("sort=name");
+    expect(csv.getAttribute("href")).toContain("format=csv");
+  });
+
+  it("switches entity and drops the status filter for events", async () => {
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter>
+        <QueryExplorer />
+      </MemoryRouter>
+    );
+    await screen.findByText("first");
+    expect(screen.getByRole("button", { name: /Status/ })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /^Data/ }));
+    await user.click(screen.getByRole("option", { name: "Events" }));
+    await waitFor(() => expect(lastParams().get("entity")).toBe("events"));
+    expect(screen.queryByRole("button", { name: /Status/ })).toBeNull();
+  });
+});

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

@@ -9,7 +9,7 @@
  */
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { settleConfirm, subscribeConfirm, type PendingConfirm } from "../../lib/confirm";
 
@@ -44,6 +44,14 @@ vi.mock("../../lib/api", async (importOriginal) => {
         clearData: () => clearData(),
         gc: vi.fn(async () => ({ reaped: [], capped: [] })),
         exportData: () => "/api/settings/export",
+        pushToken: { get: vi.fn(async () => ({ enabled: false, env_owned: false })) },
+        privacy: {
+          get: vi.fn(async () => ({
+            redact_secrets: false,
+            ignore_cwd: [],
+            env_owned: { redact_secrets: false, ignore_cwd: false },
+          })),
+        },
       },
     },
   };
@@ -112,7 +120,7 @@ describe("Settings", () => {
     const dialog = screen.getByRole("dialog", { name: /clear all data/i });
     const yes = screen.getByRole("button", { name: /yes, clear all/i });
     expect(yes).toBeDisabled();
-    await user.type(screen.getByRole("textbox"), "clear all data");
+    await user.type(within(dialog).getByRole("textbox"), "clear all data");
     expect(yes).toBeEnabled();
     await user.click(yes);
     await waitFor(() => expect(clearData).toHaveBeenCalled());

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

@@ -0,0 +1,131 @@
+/**
+ * @file SnapshotView.test.tsx
+ * @description The read-only `/snapshot/:token` page renders the frozen payload
+ * without reading live session data, and Settings → Snapshots lists and
+ * deletes snapshots behind a confirm.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { SnapshotView } from "../SnapshotView";
+import { SnapshotSettings } from "../../components/settings/SnapshotSettings";
+
+const stats = {
+  session_id: "s1",
+  total_events: 2,
+  events_by_type: [],
+  tools_used: [{ tool_name: "Read", count: 2 }],
+  error_count: 0,
+  first_event_at: "2026-10-01T10:00:00.000Z",
+  last_event_at: "2026-10-01T10:00:01.000Z",
+  agents: { total: 1, main: 1, subagent: 0, compaction: 0, by_status: {} },
+  subagent_types: [],
+  tokens: { input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_write_tokens: 0 },
+};
+
+const sessionStats = vi.fn();
+const remove = vi.fn(() => Promise.resolve({ ok: true }));
+
+vi.mock("../../lib/api", () => ({
+  api: {
+    sessions: { stats: (...a: unknown[]) => sessionStats(...a) },
+    snapshots: {
+      get: vi.fn(() =>
+        Promise.resolve({
+          snapshot: { id: 1, token: "tok", session_id: "s1", created_at: "2026-10-02T00:00:00Z" },
+          payload: {
+            version: 1,
+            captured_at: "2026-10-02T00:00:00.000Z",
+            redacted: { file_paths: true },
+            session: {
+              id: "s1",
+              name: "Frozen session",
+              status: "completed",
+              cwd: "[redacted]",
+              model: null,
+              started_at: "2026-10-01T10:00:00.000Z",
+              ended_at: null,
+              metadata: null,
+            },
+            agents: [],
+            events: [
+              {
+                id: 1,
+                session_id: "s1",
+                agent_id: null,
+                event_type: "SessionStart",
+                tool_name: null,
+                summary: "start",
+                data: null,
+                created_at: "2026-10-01T10:00:00.000Z",
+              },
+              {
+                id: 2,
+                session_id: "s1",
+                agent_id: null,
+                event_type: "Stop",
+                tool_name: null,
+                summary: "stop",
+                data: null,
+                created_at: "2026-10-01T10:00:01.000Z",
+              },
+            ],
+            stats,
+            cost: { total_cost: 0, breakdown: [] },
+          },
+        })
+      ),
+      list: vi.fn(() =>
+        Promise.resolve({
+          snapshots: [
+            {
+              id: 7,
+              token: "tok7",
+              session_id: "s1",
+              created_at: "2026-10-02T00:00:00Z",
+              session_name: "Frozen session",
+              redacted: true,
+              event_count: 2,
+            },
+          ],
+        })
+      ),
+      remove: (...a: unknown[]) => remove(...(a as [])),
+    },
+  },
+}));
+
+describe("SnapshotView", () => {
+  it("renders the frozen session and its replay, never the live stats", async () => {
+    render(
+      <MemoryRouter initialEntries={["/snapshot/tok"]}>
+        <Routes>
+          <Route path="/snapshot/:token" element={<SnapshotView />} />
+        </Routes>
+      </MemoryRouter>
+    );
+    expect(await screen.findByText("Frozen session")).toBeTruthy();
+    expect(screen.getByText("Paths redacted")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /Replay/ }));
+    expect(screen.getByTestId("event-replay")).toBeTruthy();
+    expect(sessionStats).not.toHaveBeenCalled();
+  });
+});
+
+describe("SnapshotSettings", () => {
+  it("lists snapshots and deletes one after confirming", async () => {
+    render(
+      <MemoryRouter>
+        <SnapshotSettings />
+      </MemoryRouter>
+    );
+    expect(await screen.findByText("Frozen session")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+    const buttons = screen.getAllByRole("button", { name: "Delete" });
+    fireEvent.click(buttons[buttons.length - 1]!);
+    await waitFor(() => expect(remove).toHaveBeenCalledWith(7));
+    await waitFor(() => expect(screen.queryByText("Frozen session")).toBeNull());
+  });
+});

client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap

@@ -3133,6 +3133,92 @@ exports[`screen snapshots > Dashboard 1`] = `
         <div
           class="flex items-center gap-2 flex-shrink-0"
         >
+          <div
+            class="w-40"
+          >
+            <div
+              class="relative"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Date range"
+                class="w-full flex items-center justify-between gap-2 bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] text-fg-primary focus:outline-none focus:border-accent focus-visible:ring-2 focus-visible:ring-accent/40 hover:bg-surface-3 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+                title="Date range"
+                type="button"
+              >
+                <span
+                  class="flex min-w-0 items-center gap-2"
+                >
+                  <span
+                    class="truncate"
+                  >
+                    All time
+                  </span>
+                </span>
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m6 9 6 6 6-6"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            class="w-44"
+          >
+            <div
+              class="relative"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="AI tool"
+                class="w-full flex items-center justify-between gap-2 bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] text-fg-primary focus:outline-none focus:border-accent focus-visible:ring-2 focus-visible:ring-accent/40 hover:bg-surface-3 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+                title="AI tool"
+                type="button"
+              >
+                <span
+                  class="flex min-w-0 items-center gap-2"
+                >
+                  <span
+                    class="truncate"
+                  >
+                    All AI tools
+                  </span>
+                </span>
+                <svg
+                  aria-hidden="true"
+                  class="lucide lucide-chevron-down w-3.5 h-3.5 text-fg-muted flex-shrink-0"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m6 9 6 6 6-6"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
           <button
             class="btn-ghost"
           >
@@ -5296,6 +5382,110 @@ exports[`screen snapshots > Dashboard 1`] = `
               No cost data yet.
             </p>
           </div>
+          <div
+            class="card p-5"
+          >
+            <h3
+              class="text-sm font-medium text-fg-secondary mb-5"
+            >
+              Spend pace
+            </h3>
+            <div
+              class="space-y-3"
+            >
+              <div
+                class="flex justify-between items-center py-2 border-b border-border last:border-0"
+              >
+                <span
+                  class="text-xs text-fg-secondary"
+                  title="Average cost per day over the last 7 days, today included"
+                >
+                  Burn rate (7-day avg / day)
+                </span>
+                <span
+                  class="text-sm font-mono font-medium text-status-success"
+                >
+                  <span
+                    class="relative inline-block cursor-default"
+                  >
+                    $0.00
+                  </span>
+                </span>
+              </div>
+              <div
+                class="flex justify-between items-center py-2 border-b border-border last:border-0"
+              >
+                <span
+                  class="text-xs text-fg-secondary"
+                >
+                  Month to date
+                </span>
+                <span
+                  class="text-sm font-mono font-medium text-status-success"
+                >
+                  <span
+                    class="relative inline-block cursor-default"
+                  >
+                    $0.00
+                  </span>
+                </span>
+              </div>
+              <div
+                class="flex justify-between items-center py-2 border-b border-border last:border-0"
+              >
+                <span
+                  class="text-xs text-fg-secondary"
+                  title="Month to date plus the 7-day pace for each day left"
+                >
+                  Forecast for this month
+                </span>
+                <span
+                  class="text-sm font-mono font-medium text-status-success"
+                >
+                  <span
+                    class="relative inline-block cursor-default"
+                  >
+                    $0.00
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="card p-5"
+          >
+            <h3
+              class="text-sm font-medium text-fg-secondary mb-5"
+            >
+              Budgets
+            </h3>
+            <p
+              class="text-sm text-fg-muted"
+            >
+              No spend budget yet.
+               
+              <a
+                class="text-accent hover:underline"
+                href="/settings/notifications"
+              >
+                Add one in Settings → Notifications
+              </a>
+            </p>
+          </div>
+          <div
+            class="card p-5"
+          >
+            <h3
+              class="text-sm font-medium text-fg-secondary mb-5"
+            >
+              Cost by AI tool
+            </h3>
+            <p
+              class="text-sm text-fg-muted"
+            >
+              No cost data yet.
+            </p>
+          </div>
           <div
             class="card p-5"
           >
@@ -5795,6 +5985,38 @@ exports[`screen snapshots > Session detail 1`] = `
           </button>
         </div>
       </div>
+      <div
+        class="flex flex-wrap items-center justify-end gap-1"
+      >
+        <button
+          class="btn-ghost text-xs"
+          title="Freeze this session into a read-only copy with a share link"
+          type="button"
+        >
+          <svg
+            class="lucide lucide-camera h-4 w-4"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"
+            />
+            <circle
+              cx="12"
+              cy="13"
+              r="3"
+            />
+          </svg>
+          Snapshot
+        </button>
+      </div>
       <button
         aria-label="Refresh"
         class="btn-ghost"
@@ -5930,6 +6152,52 @@ exports[`screen snapshots > Session detail 1`] = `
         </svg>
         Timeline (0/0)
       </button>
+      <button
+        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-fg-muted hover:text-fg-secondary"
+      >
+        <svg
+          class="lucide lucide-film w-4 h-4"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            height="18"
+            rx="2"
+            width="18"
+            x="3"
+            y="3"
+          />
+          <path
+            d="M7 3v18"
+          />
+          <path
+            d="M3 7.5h4"
+          />
+          <path
+            d="M3 12h18"
+          />
+          <path
+            d="M3 16.5h4"
+          />
+          <path
+            d="M17 3v18"
+          />
+          <path
+            d="M17 7.5h4"
+          />
+          <path
+            d="M17 16.5h4"
+          />
+        </svg>
+        Replay
+      </button>
     </div>
     <div>
       <div
@@ -6913,7 +7181,7 @@ exports[`screen snapshots > Settings — about 1`] = `
             <p
               class="text-[10px] text-status-warning/90 mt-1"
             >
-              UI build v2.3.1 (rebuild client to match)
+              UI build v2.4.0 (rebuild client to match)
             </p>
           </div>
           <div
@@ -8443,6 +8711,266 @@ exports[`screen snapshots > Settings — data 1`] = `
         </div>
       </div>
     </section>
+    <div
+      class="scroll-mt-24"
+      id="push-ingest"
+    >
+      <section
+        class="card p-5"
+      >
+        <h3
+          class="text-sm font-semibold text-fg-primary"
+        >
+          <span
+            class="flex items-center gap-2"
+          >
+            <svg
+              class="lucide lucide-key-round w-4 h-4 text-fg-muted"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+              />
+              <circle
+                cx="16.5"
+                cy="7.5"
+                fill="currentColor"
+                r=".5"
+              />
+            </svg>
+            Push ingest
+          </span>
+        </h3>
+        <p
+          class="mt-0.5 text-xs text-fg-muted"
+        >
+          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:&lt;name&gt;) and show live status and events; their token cost needs the transcripts, which only an SSH source brings.
+        </p>
+        <div
+          class="mt-2"
+        >
+          <div
+            class="space-y-3 py-2"
+          >
+            <div
+              class="flex flex-wrap items-center gap-2"
+            >
+              <span
+                class="text-xs text-fg-muted"
+              >
+                Off — no token yet
+              </span>
+              <button
+                class="btn-primary text-xs disabled:opacity-40"
+                type="button"
+              >
+                <svg
+                  class="lucide lucide-refresh-cw w-3.5 h-3.5"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+                  />
+                  <path
+                    d="M21 3v5h-5"
+                  />
+                  <path
+                    d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+                  />
+                  <path
+                    d="M8 16H3v5"
+                  />
+                </svg>
+                Create token
+              </button>
+            </div>
+            <p
+              class="text-xs text-fg-muted"
+            >
+              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:
+            </p>
+            <div
+              class="relative"
+            >
+              <pre
+                class="text-[11px] font-mono bg-surface-1 border border-border rounded-lg p-3 overflow-x-auto text-fg-secondary"
+              >
+                #!/bin/sh
+# ~/.claude/agenthub-push.sh &lt;HookEvent&gt; — a Claude Code hook command:
+#   "command": "sh ~/.claude/agenthub-push.sh PreToolUse"
+# ~/.claude/agenthub-push.header (chmod 600) holds one line:
+#   Authorization: Bearer &lt;token&gt;
+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 "http://localhost/api/hooks/ingest-batch" \\
+    -H "@$HOME/.claude/agenthub-push.header" \\
+    -H "Content-Type: application/json" --data-binary @-
+exit 0
+              </pre>
+              <button
+                class="btn-ghost text-xs absolute top-1.5 right-1.5"
+                title="Copy"
+                type="button"
+              >
+                <svg
+                  class="lucide lucide-copy w-3.5 h-3.5"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    height="14"
+                    rx="2"
+                    ry="2"
+                    width="14"
+                    x="8"
+                    y="8"
+                  />
+                  <path
+                    d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                  />
+                </svg>
+              </button>
+            </div>
+            <p
+              class="text-xs text-fg-muted"
+            >
+              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.
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+    <div
+      class="scroll-mt-24"
+      id="privacy"
+    >
+      <section
+        class="card p-5"
+      >
+        <h3
+          class="text-sm font-semibold text-fg-primary"
+        >
+          <span
+            class="flex items-center gap-2"
+          >
+            <svg
+              class="lucide lucide-shield-check w-4 h-4 text-fg-muted"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+              />
+              <path
+                d="m9 12 2 2 4-4"
+              />
+            </svg>
+            Privacy
+          </span>
+        </h3>
+        <p
+          class="mt-0.5 text-xs text-fg-muted"
+        >
+          What AgentHub keeps from hooks and imported history. Both are off by default and apply to new data only.
+        </p>
+        <div
+          class="mt-2"
+        >
+          <div
+            class="flex justify-between gap-4 border-b border-border/60 last:border-b-0 py-3 items-center"
+          >
+            <div
+              class="min-w-0"
+            >
+              <p
+                class="text-sm text-fg-secondary"
+              >
+                Redact secrets before storing
+              </p>
+              <p
+                class="mt-0.5 text-xs text-fg-muted"
+              >
+                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.
+              </p>
+            </div>
+            <div
+              class="shrink-0"
+            >
+              <button
+                aria-checked="false"
+                aria-label="Redact secrets before storing"
+                class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50 bg-border-light ring-1 ring-inset ring-fg-muted/80"
+                role="switch"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="inline-block h-4 w-4 rounded-full bg-white shadow transition-transform translate-x-0.5"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            class="py-3 space-y-2"
+          >
+            <label
+              class="block text-sm text-fg-secondary"
+              for="privacy-ignore"
+            >
+              Ignored folders
+            </label>
+            <p
+              class="text-xs text-fg-muted"
+            >
+              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.
+            </p>
+            <textarea
+              class="input w-full font-mono text-xs min-h-[72px]"
+              id="privacy-ignore"
+              placeholder="/home/you/clients/secret-project
+~/private"
+            />
+            <button
+              class="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled=""
+              type="button"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
     <section
       class="card p-5 space-y-4 scroll-mt-24"
       id="cleanup"

client/src/pages/__tests__/screens.snapshot.test.tsx

@@ -318,6 +318,7 @@ vi.mock("../../lib/api", async (importOriginal) => {
         totalCost: r(cost),
         sessionCost: r(cost),
       },
+      budgets: { status: r({ budgets: [] }) },
       settings: {
         info: r(settingsInfo),
         claudeHome: {
@@ -328,6 +329,19 @@ vi.mock("../../lib/api", async (importOriginal) => {
         reimport: r({ ok: true, imported: 0, skipped: 0, errors: 0 }),
         reinstallHooks: r({ ok: true, hooks: { installed: true, hooks: {} } }),
         resetPricing: r({ ok: true, pricing: [] }),
+        pushToken: {
+          get: r({ enabled: false, env_owned: false }),
+          rotate: r({ token: "t", enabled: true, env_owned: false }),
+          revoke: r({ enabled: false, env_owned: false }),
+        },
+        privacy: {
+          get: r({
+            redact_secrets: false,
+            ignore_cwd: [],
+            env_owned: { redact_secrets: false, ignore_cwd: false },
+          }),
+          save: r({ ok: true }),
+        },
         exportData: () => "/api/settings/export",
         cleanup: r({
           ok: true,
@@ -483,6 +497,7 @@ vi.mock("../../lib/push", () => ({
 }));
 
 // Page components (imported after the mocks above; vi.mock is hoisted).
+import { api } from "../../lib/api";
 import { Dashboard } from "../Dashboard";
 import { Sessions } from "../Sessions";
 import { SessionDetail } from "../SessionDetail";
@@ -570,6 +585,19 @@ describe("screen snapshots", () => {
     const headings = [...container.querySelectorAll("h2")].map((h) => h.textContent);
     expect(headings).toContain(i18n.t("workflows:title"));
   });
+  it("Dashboard Analytics reads its date range from ?range=", async () => {
+    localStorage.removeItem("dashboard_tab");
+    render(
+      <MemoryRouter initialEntries={["/?tab=analytics&range=7d"]}>
+        <Dashboard />
+      </MemoryRouter>
+    );
+    await settle();
+    const range = { from: "2026-06-04", to: "2026-06-10" };
+    expect(api.analytics.get).toHaveBeenCalledWith({ tool: "", range });
+    expect(api.pricing.totalCost).toHaveBeenCalledWith({ tool: "", range });
+    expect(screen.getByRole("button", { name: /Date range/ })).toHaveTextContent("Last 7 days");
+  });
   it("Sessions", async () => {
     await snapshot(<Sessions />, "/sessions");
   });