feat(plan-13): read-only Ops Console (NestJS API + React UI) — Track 1

Real web Control Panel over CASAN harness telemetry (Level-3 casan-platform component).
Read-only ("Đọc ≠ Ghi"): no settings writes, no gate bypass. Management/RBAC/approval are
Track 2/3 (future, Plan-14). Additive — harness gate untouched (64/0/3).

packages/casan-control-panel/
- backend/ (NestJS, ESM, /api/v1 + ok() envelope): TelemetryReader (jsonl/json, missing→[],
  never fabricates) + TelemetryService (aggregations mirroring generate-agentops-dashboard.py)
  + endpoints overview/runs(+:traceId)/governance/security/incidents/tools/traceability/
  drift/cost, and /healthz (stale-aware 200/503, fail-loud like dashboard-server.py). App
  root + telemetry paths resolve via casan-paths-style marker walk-up (.specify OR
  packages/casan-harness) + honor CASAN_DASHBOARD_* env. Binds 127.0.0.1; refuses
  non-loopback under CASAN_PROFILE=prod. @Inject token so DI works under tsc AND tsx.
  Tests (node native runner) 7/0: reader parse/missing, app-root, overview shape on real
  repo state, freshness/stale fail-loud.
- frontend/ (React+Vite+Tailwind+TanStack, port 5174, proxies to :3010): AppLayout +
  Sidebar + Header (LIVE/STALE badge from /healthz) + pages Overview/Runs/Governance/
  Security/Incidents/Traceability. axios client unwraps ok() envelope. build green.

Wiring: root workspaces + `console:*` scripts. packaging/levels.json + casan-platform
README: platform preview now lists the Ops Console as an implemented component.

Verified: backend build + test 7/0; frontend tsc + vite build; API serves REAL data
(runs=6, provider_tokens=5556, action_blocks=7); /healthz 503 stale → 200 after touch.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/casan-control-panel/frontend/src/pages/Governance.tsx

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { Card, StatTile, StatusBadge } from '../components/ui/Card';
+
+export function Governance() {
+  const { data, isLoading } = useQuery({ queryKey: ['governance'], queryFn: api.governance });
+  if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
+  return (
+    <>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatTile label="Audit records" value={data.records} />
+        {Object.entries(data.by_decision).map(([k, v]) => <StatTile key={k} label={k} value={v as number} />)}
+      </div>
+      <Card title="Recent governance decisions" right={<span className="text-xs text-gray-400">head {data.head?.slice(0, 12) ?? '—'}…</span>}>
+        <div className="overflow-x-auto"><table className="w-full text-sm">
+          <thead><tr className="text-left text-gray-500 border-b border-gray-200"><th className="py-2">time</th><th>action</th><th>actor</th><th>risk</th><th>decision</th></tr></thead>
+          <tbody>{data.recent.map((r: any, i: number) => (
+            <tr key={i} className="border-b border-gray-100">
+              <td className="py-2 text-gray-500">{r.timestamp?.replace('T',' ').replace('Z','')}</td>
+              <td className="text-gray-700">{r.action}</td><td>{r.actor}</td><td>{r.risk_level}</td>
+              <td><StatusBadge value={r.decision ?? '—'} /></td>
+            </tr>))}</tbody>
+        </table></div>
+      </Card>
+    </>
+  );
+}

packages/casan-control-panel/frontend/src/pages/Incidents.tsx

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { Card, StatTile, StatusBadge } from '../components/ui/Card';
+
+export function Incidents() {
+  const { data, isLoading } = useQuery({ queryKey: ['incidents'], queryFn: api.incidents });
+  if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
+  return (
+    <>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+        <StatTile label="Incidents" value={data.total} />
+        <StatTile label="Kill-switch scopes" value={data.kill_switch_scopes.length} sub={data.kill_switch_scopes.join(', ') || 'none'} />
+      </div>
+      <Card title="Incident log">
+        <div className="overflow-x-auto"><table className="w-full text-sm">
+          <thead><tr className="text-left text-gray-500 border-b border-gray-200"><th className="py-2">time</th><th>event</th><th>severity</th><th>scope</th><th>action</th></tr></thead>
+          <tbody>{data.incidents.map((r: any, i: number) => (
+            <tr key={i} className="border-b border-gray-100">
+              <td className="py-2 text-gray-500">{r.timestamp?.replace('T',' ').replace('Z','')}</td>
+              <td className="text-gray-700">{r.event}</td><td><StatusBadge value={r.severity ?? '—'} /></td>
+              <td>{r.scope}</td><td>{r.action}</td>
+            </tr>))}</tbody>
+        </table></div>
+      </Card>
+    </>
+  );
+}

packages/casan-control-panel/frontend/src/pages/Overview.tsx

@@ -0,0 +1,37 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { Card, StatTile, StatusBadge } from '../components/ui/Card';
+
+export function Overview() {
+  const { data, isLoading, isError } = useQuery({ queryKey: ['overview'], queryFn: api.overview });
+  if (isLoading) return <div className="text-gray-500">Loading…</div>;
+  if (isError || !data) return <div className="text-red-600">Cannot reach Ops Console API.</div>;
+  const t = data.totals;
+  return (
+    <>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatTile label="Runs" value={t.runs} />
+        <StatTile label="Failures" value={t.failures} />
+        <StatTile label="Total cost (est)" value={`$${t.total_cost.toFixed(4)}`} sub={`${t.provider_tokens} provider tokens`} />
+        <StatTile label="Avg latency" value={`${t.avg_latency_ms} ms`} />
+        <StatTile label="Fallback routes" value={t.fallback_routes} />
+        <StatTile label="Tool denies" value={t.tool_denies} />
+        <StatTile label="Action blocks" value={t.action_blocks} />
+        <StatTile label="Hallucination signals" value={t.hallucination_signals} />
+      </div>
+      <Card title="Harness signals (real counts)">
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
+          {Object.entries(data.harness_signals).map(([h, sig]) => (
+            <div key={h} className="border border-gray-200 rounded-lg p-3">
+              <div className="font-medium text-gray-700">{h}</div>
+              <div className="text-gray-500 mt-1">{Object.entries(sig).map(([k, v]) => `${k}: ${v}`).join(' · ')}</div>
+            </div>
+          ))}
+        </div>
+      </Card>
+      <Card title="Audit chain" right={<StatusBadge value={data.audit_chain.last_decision ?? 'n/a'} />}>
+        <div className="text-sm text-gray-600">records: {data.audit_chain.records} · head: <code className="text-xs">{data.audit_chain.head?.slice(0, 16) ?? '—'}…</code></div>
+      </Card>
+    </>
+  );
+}

packages/casan-control-panel/frontend/src/pages/Runs.tsx

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { Card, StatusBadge } from '../components/ui/Card';
+
+export function Runs() {
+  const { data, isLoading } = useQuery({ queryKey: ['runs'], queryFn: () => api.runs(100) });
+  if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
+  return (
+    <Card title={`Recent runs (${data.count})`}>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead><tr className="text-left text-gray-500 border-b border-gray-200">
+            <th className="py-2">time</th><th>step</th><th>status</th><th>latency</th><th>tokens</th><th>cost</th>
+          </tr></thead>
+          <tbody>
+            {data.runs.map((r: any, i: number) => (
+              <tr key={i} className="border-b border-gray-100">
+                <td className="py-2 text-gray-500">{r.timestamp?.replace('T', ' ').replace('Z', '')}</td>
+                <td className="text-gray-700">{r.step ?? r.harness}</td>
+                <td><StatusBadge value={r.status ?? '—'} /></td>
+                <td>{r.latency_ms ?? '—'} ms</td>
+                <td>{r.total_tokens ?? '—'}</td>
+                <td>${Number(r.cost_estimate ?? 0).toFixed(5)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+}

packages/casan-control-panel/frontend/src/pages/Security.tsx

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { Card, StatTile } from '../components/ui/Card';
+
+export function Security() {
+  const { data, isLoading } = useQuery({ queryKey: ['security'], queryFn: api.security });
+  if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
+  const fp = data.benign_fp;
+  return (
+    <>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatTile label="H4 verdicts" value={data.verdicts} />
+        {Object.entries(data.by_status).map(([k, v]) => <StatTile key={k} label={k} value={v as number} />)}
+      </div>
+      {fp && <Card title="Benign / false-positive budget">
+        <pre className="text-xs text-gray-600 overflow-x-auto">{JSON.stringify(fp, null, 2)}</pre>
+      </Card>}
+    </>
+  );
+}

packages/casan-control-panel/frontend/src/pages/Traceability.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api';
+import { Card, StatTile, StatusBadge } from '../components/ui/Card';
+
+export function Traceability() {
+  const { data, isLoading } = useQuery({ queryKey: ['traceability'], queryFn: api.traceability });
+  if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
+  const m = data.matrix;
+  if (!m) return <Card title="Traceability"><div className="text-gray-500">No traceability-matrix.json yet.</div></Card>;
+  return (
+    <>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatTile label="Requirements" value={m.summary?.requirements ?? '—'} />
+        <StatTile label="Passed" value={m.summary?.passed ?? '—'} />
+        <StatTile label="Failed" value={m.summary?.failed ?? '—'} />
+      </div>
+      <Card title="FR → code → test">
+        <div className="overflow-x-auto"><table className="w-full text-sm">
+          <thead><tr className="text-left text-gray-500 border-b border-gray-200"><th className="py-2">FR</th><th>name</th><th>status</th><th>code</th><th>tests</th></tr></thead>
+          <tbody>{(m.matrix ?? []).map((r: any) => (
+            <tr key={r.id} className="border-b border-gray-100">
+              <td className="py-2 font-medium text-gray-700">{r.id}</td><td>{r.name}</td>
+              <td><StatusBadge value={r.status} /></td>
+              <td>{r.code?.length ?? 0}</td><td>{r.tests?.length ?? 0}</td>
+            </tr>))}</tbody>
+        </table></div>
+      </Card>
+    </>
+  );
+}