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>
2026-07-08 16:59:56 +09:00
parent 98d699d844
commit 63dd44a11b
41 changed files with 1078 additions and 43 deletions
@@ -0,0 +1,24 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { AppLayout } from './components/layout/AppLayout';
+import { Overview } from './pages/Overview';
+import { Runs } from './pages/Runs';
+import { Governance } from './pages/Governance';
+import { Security } from './pages/Security';
+import { Incidents } from './pages/Incidents';
+import { Traceability } from './pages/Traceability';
+
+export default function App() {
+  return (
+    <AppLayout>
+      <Routes>
+        <Route path="/" element={<Overview />} />
+        <Route path="/runs" element={<Runs />} />
+        <Route path="/governance" element={<Governance />} />
+        <Route path="/security" element={<Security />} />
+        <Route path="/incidents" element={<Incidents />} />
+        <Route path="/traceability" element={<Traceability />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </AppLayout>
+  );
+}
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-screen bg-gray-50">
+      <Sidebar />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-auto p-6 space-y-6">{children}</main>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { health } from '../../lib/api';
+export function Header() {
+  const { data } = useQuery({ queryKey: ['health'], queryFn: health });
+  const stale = data ? !data.ok : true;
+  return (
+    <header className="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6">
+      <h1 className="text-base font-semibold text-gray-800">CASAN Ops Console <span className="text-gray-400 font-normal">· read-only</span></h1>
+      <div className="flex items-center gap-3 text-xs">
+        <span className="text-gray-500">runs: {data?.runs ?? '—'}</span>
+        <span className={`px-2 py-1 rounded-full font-medium ${stale ? 'bg-orange-100 text-orange-700' : 'bg-green-100 text-green-700'}`}>
+          {stale ? `STALE${data?.metrics_age_s != null ? ` (${data.metrics_age_s}s)` : ''}` : 'LIVE'}
+        </span>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,20 @@
+import { NavLink } from 'react-router-dom';
+const NAV = [
+  ['/', 'Overview'], ['/runs', 'Runs'], ['/governance', 'Governance'],
+  ['/security', 'Security'], ['/incidents', 'Incidents'], ['/traceability', 'Traceability'],
+];
+export function Sidebar() {
+  return (
+    <aside className="w-56 bg-white border-r border-gray-200 flex-shrink-0">
+      <div className="h-14 flex items-center px-6 font-bold text-blue-600 border-b border-gray-200">CASAN</div>
+      <nav className="p-3 space-y-1">
+        {NAV.map(([to, label]) => (
+          <NavLink key={to} to={to} end={to === '/'}
+            className={({ isActive }) => `block px-3 py-2 rounded-lg text-sm ${isActive ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'}`}>
+            {label}
+          </NavLink>
+        ))}
+      </nav>
+    </aside>
+  );
+}
@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export function Card({ title, children, right }: { title?: string; children: ReactNode; right?: ReactNode }) {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+      {title && (
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">{title}</h2>
+          {right}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+export function StatTile({ label, value, sub }: { label: string; value: ReactNode; sub?: string }) {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+      <div className="text-xs text-gray-500">{label}</div>
+      <div className="text-2xl font-semibold text-gray-800 mt-1">{value}</div>
+      {sub && <div className="text-xs text-gray-400 mt-1">{sub}</div>}
+    </div>
+  );
+}
+const TONE: Record<string, string> = {
+  ok: 'bg-green-100 text-green-700', pass: 'bg-green-100 text-green-700', success: 'bg-green-100 text-green-700', allow: 'bg-green-100 text-green-700',
+  warn: 'bg-orange-100 text-orange-700', stale: 'bg-orange-100 text-orange-700',
+  fail: 'bg-red-100 text-red-700', failed: 'bg-red-100 text-red-700', denied: 'bg-red-100 text-red-700', blocked: 'bg-red-100 text-red-700', deny: 'bg-red-100 text-red-700', block: 'bg-red-100 text-red-700', crit: 'bg-red-100 text-red-700',
+};
+export function StatusBadge({ value }: { value: string }) {
+  const tone = TONE[String(value).toLowerCase()] ?? 'bg-gray-100 text-gray-600';
+  return <span className={`px-2 py-1 rounded-full text-xs font-medium ${tone}`}>{value}</span>;
+}
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -0,0 +1,44 @@
+// Single axios client for the read-only Ops Console API. Mirrors the OKR app's api.ts:
+// relative baseURL, unwrap response.data.data. All GET (read-only).
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL ?? '/api/v1',
+});
+
+async function get<T>(path: string): Promise<T> {
+  const res = await client.get(`/${path}`);
+  return res.data.data as T;
+}
+
+export interface Freshness { stale: boolean; age_s: number | null; stale_after_s: number }
+
+export interface Overview extends Freshness {
+  totals: {
+    runs: number; total_cost: number; avg_latency_ms: number; failures: number;
+    hallucination_signals: number; provider_tokens: number; provider_cost: number;
+    fallback_routes: number; tool_denies: number; action_blocks: number;
+  };
+  harness_signals: Record<string, Record<string, number | string>>;
+  audit_chain: { records: number; head: string | null; last_decision: string | null };
+}
+
+export const api = {
+  overview: () => get<Overview>('overview'),
+  runs: (limit = 50) => get<Freshness & { count: number; runs: any[] }>(`runs?limit=${limit}`),
+  governance: () => get<Freshness & { records: number; by_decision: Record<string, number>; head: string | null; recent: any[] }>('governance'),
+  security: () => get<Freshness & { verdicts: number; by_status: Record<string, number>; benign_fp: any; recent: any[] }>('security'),
+  incidents: () => get<Freshness & { total: number; kill_switch_scopes: string[]; incidents: any[] }>('incidents'),
+  traceability: () => get<Freshness & { matrix: any }>('traceability'),
+  cost: () => get<Freshness & { provider_tokens: number; provider_cost: number; by_provider: any[]; business_kpi: any }>('cost'),
+};
+
+// Health is raw (not enveloped) + carries HTTP status.
+export async function health(): Promise<{ ok: boolean; status: string; metrics_age_s: number | null; runs: number }> {
+  try {
+    const res = await axios.get('/healthz', { baseURL: '', validateStatus: () => true });
+    return { ok: res.status === 200, ...res.data };
+  } catch {
+    return { ok: false, status: 'unreachable', metrics_age_s: null, runs: 0 };
+  }
+}
@@ -0,0 +1,6 @@
+import { QueryClient } from '@tanstack/react-query';
+
+// Poll telemetry every 15s; read-only console tolerates brief staleness.
+export const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: 15_000, refetchInterval: 15_000, retry: 1 } },
+});
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { queryClient } from './lib/queryClient';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>,
+);
@@ -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>
+    </>
+  );
+}
@@ -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>
+    </>
+  );
+}
@@ -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>
+    </>
+  );
+}
@@ -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>
+  );
+}
@@ -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>}
+    </>
+  );
+}
@@ -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>
+    </>
+  );
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />