orbital-command 0.2.0 → 1.0.0

package/src/views/QualityGates.tsx

@@ -1,1012 +0,0 @@
-import { useState, useMemo, useEffect, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import {
-  ShieldCheck, ArrowRight, CheckCircle2, XCircle, MinusCircle,
-  AlertTriangle, Clock, Terminal, Shield, ShieldAlert, Eye, Cog,
-} from 'lucide-react';
-import { formatDistanceToNow } from 'date-fns';
-import {
-  BarChart, Bar, XAxis, YAxis, Tooltip as RechartsTooltip,
-  ResponsiveContainer, Cell, AreaChart, Area, CartesianGrid,
-  PieChart, Pie, Legend,
-} from 'recharts';
-import { useScopes } from '@/hooks/useScopes';
-import { useTransitionReadiness } from '@/hooks/useTransitionReadiness';
-import { useGates } from '@/hooks/useGates';
-import { useViolations } from '@/hooks/useViolations';
-import { useEnforcementRules } from '@/hooks/useEnforcementRules';
-import { useWorkflow } from '@/hooks/useWorkflow';
-import { GateIndicator } from '@/components/GateIndicator';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import type { Scope, GateStatus, HookStatus, EnforcementRule, ViolationTrendPoint, OrbitalEvent } from '@/types';
-
-function formatGateName(name: string): string {
-  return name.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
-const ENFORCEMENT_COLORS: Record<string, string> = {
-  blocker: 'text-red-400 bg-red-500/10 border-red-500/20',
-  advisor: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
-  operator: 'text-cyan-400 bg-cyan-500/10 border-cyan-500/20',
-  silent: 'text-zinc-400 bg-zinc-500/10 border-zinc-500/20',
-};
-
-const CATEGORY_LABELS: Record<string, string> = {
-  guard: 'GUARD', gate: 'GATE', lifecycle: 'LIFECYCLE', observer: 'OBSERVER',
-};
-
-const CATEGORY_ICON: Record<string, typeof Shield> = {
-  guard: Shield, gate: ShieldAlert, lifecycle: Cog, observer: Eye,
-};
-
-// ─── Main Page ──────────────────────────────────────────────
-
-export function QualityGates() {
-  const { scopes } = useScopes();
-  const { engine } = useWorkflow();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [selectedScopeId, setSelectedScopeId] = useState<number | null>(() => {
-    const param = searchParams.get('scope');
-    return param ? Number(param) : null;
-  });
-
-  useEffect(() => {
-    if (selectedScopeId != null) {
-      setSearchParams({ scope: String(selectedScopeId) }, { replace: true });
-    }
-  }, [selectedScopeId, setSearchParams]);
-
-  const activeScopes = useMemo(() => {
-    return scopes
-      .filter((s) => !engine.isTerminalStatus(s.status) && s.status !== 'icebox' && !s.is_ghost)
-      .sort((a, b) => a.id - b.id);
-  }, [scopes, engine]);
-
-  const scopesByStatus = useMemo(() => {
-    const map = new Map<string, Scope[]>();
-    for (const scope of activeScopes) {
-      const existing = map.get(scope.status) ?? [];
-      existing.push(scope);
-      map.set(scope.status, existing);
-    }
-    return map;
-  }, [activeScopes]);
-
-  const effectiveScopeId = selectedScopeId ?? activeScopes[0]?.id ?? null;
-  const { readiness, loading: readinessLoading } = useTransitionReadiness(effectiveScopeId);
-  const selectedScope = activeScopes.find((s) => s.id === effectiveScopeId);
-
-  return (
-    <div className="flex-1 min-h-0 overflow-y-auto space-y-6">
-      {/* ═══ Section 1: Transition Readiness ═══ */}
-      <section>
-        <div className="mb-4 flex items-center gap-3">
-          <ShieldCheck className="h-4 w-4 text-primary" />
-          <h1 className="text-xl font-light">Safeguards</h1>
-          {readiness && (
-            <Badge variant="secondary">
-              {readiness.transitions.filter((t) => t.ready).length}/{readiness.transitions.length} ready
-            </Badge>
-          )}
-        </div>
-
-        {/* Scope Selector */}
-        <div className="mb-4 flex flex-wrap gap-1.5">
-          {engine.getLists()
-            .filter((l) => !engine.isTerminalStatus(l.id) && l.id !== 'icebox' && scopesByStatus.has(l.id))
-            .map((list) => (
-              <div key={list.id} className="flex items-center gap-1">
-                <span className="mr-0.5 text-[10px] uppercase tracking-wider text-muted-foreground/50">
-                  {list.label}
-                </span>
-                {(scopesByStatus.get(list.id) ?? []).map((scope) => (
-                  <button
-                    key={scope.id}
-                    onClick={() => setSelectedScopeId(scope.id)}
-                    className={cn(
-                      'rounded border px-2 py-0.5 text-xs font-mono transition-all',
-                      scope.id === effectiveScopeId
-                        ? 'border-primary/50 bg-primary/10 text-primary'
-                        : 'border-border/50 bg-surface-light/30 text-muted-foreground hover:border-primary/30 hover:text-foreground',
-                    )}
-                  >
-                    {String(scope.id).padStart(3, '0')}
-                  </button>
-                ))}
-                <span className="mx-1.5 text-border">|</span>
-              </div>
-            ))}
-          {activeScopes.length === 0 && (
-            <span className="text-xs text-muted-foreground">No active scopes</span>
-          )}
-        </div>
-
-        {/* Scope Readiness Overview Chart */}
-        {activeScopes.length > 0 && (
-          <ScopeReadinessOverview
-            scopes={activeScopes}
-            selectedId={effectiveScopeId}
-            onSelect={setSelectedScopeId}
-          />
-        )}
-
-        {/* Transition Cards + Scope Sidebar */}
-        {effectiveScopeId && selectedScope && (
-          <div className="grid gap-5 lg:grid-cols-3">
-            <div className="lg:col-span-2 space-y-4">
-              {readinessLoading ? (
-                <div className="flex h-32 items-center justify-center">
-                  <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-                </div>
-              ) : readiness && readiness.transitions.length > 0 ? (
-                readiness.transitions.map((transition) => (
-                  <TransitionCard
-                    key={`${transition.from}-${transition.to}`}
-                    transition={transition}
-                    scopeId={effectiveScopeId}
-                  />
-                ))
-              ) : (
-                <Card>
-                  <CardContent className="py-8 text-center">
-                    <CheckCircle2 className="mx-auto mb-3 h-8 w-8 text-muted-foreground/50" />
-                    <p className="text-sm text-muted-foreground">
-                      No forward transitions from <span className="font-mono">{selectedScope.status}</span>
-                    </p>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-
-            <div className="space-y-4">
-              <ScopeInfoCard scope={selectedScope} />
-              {readiness && readiness.transitions.length > 0 && readiness.transitions[0].gates.length > 0 && (
-                <CIGatesCard gates={readiness.transitions[0].gates} />
-              )}
-            </div>
-          </div>
-        )}
-      </section>
-
-      {/* ═══ Section 2: Rule Configuration ═══ */}
-      <RuleConfigSection />
-
-      {/* ═══ Section 3: Enforcement Activity ═══ */}
-      <EnforcementActivitySection />
-
-      {/* ═══ Section 4: CI Gates ═══ */}
-      <GlobalCISection />
-    </div>
-  );
-}
-
-// ─── Section: Scope Info ────────────────────────────────────
-
-function ScopeInfoCard({ scope }: { scope: Scope }) {
-  const id = String(scope.id).padStart(3, '0');
-  const title = scope.title.length > 30 ? scope.title.slice(0, 30) + '...' : scope.title;
-
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-mono">{id} {title}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-2 text-xs">
-        <div className="flex justify-between">
-          <span className="text-muted-foreground">Status</span>
-          <Badge variant="outline" className="text-[10px]">{scope.status}</Badge>
-        </div>
-        {scope.priority && (
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">Priority</span>
-            <span>{scope.priority}</span>
-          </div>
-        )}
-        {scope.blocked_by.length > 0 && (
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">Blocked by</span>
-            <span className="font-mono text-amber-400">
-              {scope.blocked_by.map((bid) => String(bid).padStart(3, '0')).join(', ')}
-            </span>
-          </div>
-        )}
-        {Object.keys(scope.sessions).length > 0 && (
-          <div className="pt-1 border-t border-border/50">
-            <span className="text-muted-foreground text-[10px] uppercase tracking-wider">Sessions</span>
-            {Object.entries(scope.sessions).map(([key, ids]) => (
-              <div key={key} className="flex justify-between mt-1">
-                <span className="text-muted-foreground">{key}</span>
-                <span className="font-mono text-[10px]">{ids.length} recorded</span>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-function CIGatesCard({ gates }: { gates: Array<{ gate_name: string; status: string; duration_ms: number | null }> }) {
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle className="text-sm">CI Gates</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-0.5">
-        {gates.map((gate) => (
-          <div key={gate.gate_name} className="flex items-center gap-2 py-0.5">
-            <GateIndicator status={gate.status as GateStatus} />
-            <span className="flex-1 text-[11px]">{formatGateName(gate.gate_name)}</span>
-            {gate.duration_ms != null && (
-              <span className="font-mono text-[10px] text-muted-foreground">
-                {(gate.duration_ms / 1000).toFixed(1)}s
-              </span>
-            )}
-          </div>
-        ))}
-      </CardContent>
-    </Card>
-  );
-}
-
-// ─── Section: Transition Card ───────────────────────────────
-
-function TransitionCard({
-  transition,
-  scopeId,
-}: {
-  transition: import('@/types').TransitionReadiness;
-  scopeId: number;
-}) {
-  const [dispatching, setDispatching] = useState(false);
-  const command = transition.edge.command?.replace('{id}', String(scopeId)) ?? null;
-
-  async function handleDispatch() {
-    if (!command) return;
-    setDispatching(true);
-    try {
-      await fetch('/api/orbital/dispatch', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          scope_id: scopeId,
-          command,
-          transition: { from: transition.from, to: transition.to },
-        }),
-      });
-    } catch {
-      // dispatch error
-    } finally {
-      setDispatching(false);
-    }
-  }
-
-  return (
-    <Card className={cn('transition-all', transition.ready ? 'border-bid-green/20' : 'border-border')}>
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Badge variant="outline" className="text-[10px] font-mono">{transition.from}</Badge>
-            <ArrowRight className="h-3 w-3 text-muted-foreground" />
-            <Badge variant="outline" className="text-[10px] font-mono">{transition.to}</Badge>
-            <span className="text-xs text-muted-foreground ml-1">{transition.edge.label}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            {transition.ready && (
-              <Badge className="bg-bid-green/10 text-bid-green border-bid-green/20 text-[10px]">Ready</Badge>
-            )}
-            {command && transition.edge.dispatchOnly && (
-              <Button
-                size="sm"
-                variant={transition.ready ? 'default' : 'outline'}
-                className="h-6 text-[11px] gap-1"
-                disabled={!transition.ready || dispatching}
-                onClick={handleDispatch}
-              >
-                <Terminal className="h-3 w-3" />
-                {dispatching ? 'Dispatching...' : 'Dispatch'}
-              </Button>
-            )}
-          </div>
-        </div>
-        {command && (
-          <code className="text-[10px] font-mono text-muted-foreground/60 mt-1">{command}</code>
-        )}
-      </CardHeader>
-      <CardContent className="space-y-3">
-        {transition.hooks.length > 0 && (
-          <div>
-            <span className="text-[10px] uppercase tracking-wider text-muted-foreground/50 mb-1.5 block">
-              Workflow Hooks
-            </span>
-            <div className="space-y-1">
-              {transition.hooks.map((hook) => (
-                <HookStatusRow key={hook.id} hook={hook} />
-              ))}
-            </div>
-          </div>
-        )}
-        {transition.edge.checklist && transition.edge.checklist.length > 0 && (
-          <div>
-            <span className="text-[10px] uppercase tracking-wider text-muted-foreground/50 mb-1.5 block">Checklist</span>
-            <div className="space-y-1">
-              {transition.edge.checklist.map((item, idx) => (
-                <div key={idx} className="flex items-start gap-2 text-xs text-muted-foreground">
-                  <MinusCircle className="h-3 w-3 mt-0.5 flex-shrink-0 text-muted-foreground/40" />
-                  <span>{item}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-        {transition.blockers.length > 0 && (
-          <div className="rounded border border-red-500/20 bg-red-500/5 p-2">
-            <div className="flex items-center gap-1.5 mb-1">
-              <AlertTriangle className="h-3 w-3 text-red-400" />
-              <span className="text-[10px] font-medium text-red-400">
-                {transition.blockers.length} Blocker{transition.blockers.length !== 1 ? 's' : ''}
-              </span>
-            </div>
-            {transition.blockers.map((blocker, idx) => (
-              <p key={idx} className="text-[11px] text-red-400/80 ml-4.5">{blocker}</p>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-function HookStatusRow({ hook }: { hook: HookStatus }) {
-  const statusIcon = hook.status === 'pass'
-    ? <CheckCircle2 className="h-3.5 w-3.5 text-bid-green" />
-    : hook.status === 'fail'
-      ? <XCircle className="h-3.5 w-3.5 text-red-400" />
-      : <MinusCircle className="h-3.5 w-3.5 text-muted-foreground/50" />;
-
-  return (
-    <div className="flex items-center gap-2 rounded px-2 py-1 hover:bg-surface-light/50">
-      {statusIcon}
-      <span className="flex-1 text-xs">{hook.label}</span>
-      <Badge
-        variant="outline"
-        className={cn('text-[9px] px-1.5 py-0 h-4 border', ENFORCEMENT_COLORS[hook.enforcement])}
-      >
-        {CATEGORY_LABELS[hook.category]}
-      </Badge>
-      {hook.reason && (
-        <span className="text-[10px] text-muted-foreground/60 max-w-[200px] truncate">{hook.reason}</span>
-      )}
-    </div>
-  );
-}
-
-// ─── Section: Rule Configuration ────────────────────────────
-
-function RuleConfigSection() {
-  const { data: rulesData, loading } = useEnforcementRules();
-
-  if (loading || !rulesData || rulesData.rules.length === 0) return null;
-
-  return (
-    <section>
-      <div className="mb-3 flex items-center gap-3">
-        <Shield className="h-4 w-4 text-muted-foreground" />
-        <h2 className="text-base font-light">Rule Configuration</h2>
-      </div>
-
-      {/* Summary strip + Donut */}
-      <div className="mb-4 grid gap-4 lg:grid-cols-4">
-        <div className="lg:col-span-3 flex flex-wrap items-center gap-3 rounded-lg border border-border/50 bg-surface-light/20 px-4 py-2 self-start">
-          <SummaryChip count={rulesData.summary.guards} label="guards" color="text-red-400" />
-          <SummaryChip count={rulesData.summary.gates} label="gates" color="text-amber-400" />
-          <SummaryChip count={rulesData.summary.lifecycle} label="lifecycle" color="text-cyan-400" />
-          <SummaryChip count={rulesData.summary.observers} label="observers" color="text-zinc-400" />
-          <span className="text-border">|</span>
-          <span className="text-xs text-muted-foreground">
-            {rulesData.totalEdges} edge{rulesData.totalEdges !== 1 ? 's' : ''}
-          </span>
-        </div>
-        <Card className="flex items-center justify-center">
-          <CardContent className="p-2">
-            <HookCategoryDonut summary={rulesData.summary} />
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Matrix */}
-      <Card>
-        <CardContent className="p-0">
-          <div className="overflow-x-auto">
-            <table className="w-full text-xs">
-              <thead>
-                <tr className="border-b border-border text-left text-[10px] text-muted-foreground uppercase tracking-wider">
-                  <th className="px-4 py-2 font-medium">Hook</th>
-                  <th className="px-4 py-2 font-medium">Category</th>
-                  <th className="px-4 py-2 font-medium">Level</th>
-                  <th className="px-4 py-2 font-medium">Edges</th>
-                  <th className="px-4 py-2 font-medium text-right">Violations</th>
-                  <th className="px-4 py-2 font-medium text-right">Overrides</th>
-                  <th className="px-4 py-2 font-medium text-right">Last Fired</th>
-                </tr>
-              </thead>
-              <tbody>
-                {rulesData.rules.map((rule) => (
-                  <RuleRow key={rule.hook.id} rule={rule} />
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </CardContent>
-      </Card>
-    </section>
-  );
-}
-
-function RuleRow({ rule }: { rule: EnforcementRule }) {
-  const Icon = CATEGORY_ICON[rule.hook.category] ?? Shield;
-  return (
-    <tr className="border-b border-border/30 last:border-0 hover:bg-surface-light/30">
-      <td className="px-4 py-2">
-        <div className="flex items-center gap-1.5">
-          <Icon className="h-3 w-3 text-muted-foreground/50" />
-          <span className="font-medium">{rule.hook.label}</span>
-        </div>
-      </td>
-      <td className="px-4 py-2">
-        <Badge variant="outline" className={cn('text-[9px] border', ENFORCEMENT_COLORS[rule.enforcement])}>
-          {rule.hook.category}
-        </Badge>
-      </td>
-      <td className="px-4 py-2">
-        <span className={cn('text-[10px]', ENFORCEMENT_COLORS[rule.enforcement]?.split(' ')[0])}>
-          {rule.enforcement}
-        </span>
-      </td>
-      <td className="px-4 py-2">
-        {rule.edges.length > 0 ? (
-          <div className="flex flex-wrap gap-1">
-            {rule.edges.slice(0, 3).map((e, idx) => (
-              <span key={idx} className="inline-flex items-center gap-0.5 text-[9px] text-muted-foreground font-mono">
-                {e.from}<ArrowRight className="h-2 w-2" />{e.to}
-              </span>
-            ))}
-            {rule.edges.length > 3 && (
-              <span className="text-[9px] text-muted-foreground">+{rule.edges.length - 3}</span>
-            )}
-          </div>
-        ) : (
-          <span className="text-[9px] text-muted-foreground">-</span>
-        )}
-      </td>
-      <td className="px-4 py-2 text-right font-mono">
-        {rule.stats.violations > 0 ? (
-          <span className="text-red-400">{rule.stats.violations}</span>
-        ) : (
-          <span className="text-muted-foreground/40">0</span>
-        )}
-      </td>
-      <td className="px-4 py-2 text-right font-mono">
-        {rule.stats.overrides > 0 ? (
-          <span className="text-amber-400">{rule.stats.overrides}</span>
-        ) : (
-          <span className="text-muted-foreground/40">0</span>
-        )}
-      </td>
-      <td className="px-4 py-2 text-right text-muted-foreground/60">
-        {rule.stats.last_triggered
-          ? formatDistanceToNow(new Date(rule.stats.last_triggered), { addSuffix: true })
-          : '-'}
-      </td>
-    </tr>
-  );
-}
-
-// ─── Section: Enforcement Activity ──────────────────────────
-
-function EnforcementActivitySection() {
-  const { byRule, overrides, totalViolations, totalOverrides, loading: violationsLoading } = useViolations();
-  const { trend, loading: trendLoading } = useEnforcementRules();
-
-  const [recentViolations, setRecentViolations] = useState<OrbitalEvent[]>([]);
-  const fetchRecent = useCallback(async () => {
-    try {
-      const res = await fetch('/api/orbital/events?type=VIOLATION&limit=15');
-      if (res.ok) setRecentViolations(await res.json());
-    } catch { /* ok */ }
-  }, []);
-  useEffect(() => { fetchRecent(); }, [fetchRecent]);
-
-  const overrideRate = (totalViolations + totalOverrides) > 0
-    ? Math.round((totalOverrides / (totalViolations + totalOverrides)) * 100) : 0;
-
-  const isLoading = violationsLoading || trendLoading;
-
-  return (
-    <section>
-      {/* Header with inline stats */}
-      <div className="mb-3 flex items-center gap-3 flex-wrap">
-        <ShieldAlert className="h-4 w-4 text-red-400" />
-        <h2 className="text-base font-light">Enforcement Activity</h2>
-        <div className="flex items-center gap-3 ml-auto text-xs">
-          <span><span className="text-red-400 font-medium">{totalViolations}</span> <span className="text-muted-foreground">violations</span></span>
-          <span><span className="text-amber-400 font-medium">{totalOverrides}</span> <span className="text-muted-foreground">overrides</span></span>
-          <span className={cn('font-medium', overrideRate > 50 ? 'text-amber-400' : 'text-muted-foreground')}>{overrideRate}% <span className="font-normal text-muted-foreground">override rate</span></span>
-        </div>
-      </div>
-
-      {isLoading ? (
-        <div className="flex h-20 items-center justify-center">
-          <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-        </div>
-      ) : (
-        <div className="grid gap-4 lg:grid-cols-2">
-          {/* Left: charts */}
-          <div className="space-y-4">
-            <ViolationsVsOverridesChart byRule={byRule} overrides={overrides} />
-            <ViolationTrendChart trend={trend} />
-          </div>
-
-          {/* Right: tables */}
-          <div className="space-y-4">
-            <Card>
-              <CardHeader className="pb-1"><CardTitle className="text-sm">Recent Violations</CardTitle></CardHeader>
-              <CardContent className={recentViolations.length > 0 ? 'p-0' : undefined}>
-                {recentViolations.length === 0 ? (
-                  <p className="text-xs text-muted-foreground text-center py-3">No violations recorded</p>
-                ) : (
-                  <div className="overflow-x-auto">
-                    <table className="w-full text-xs">
-                      <thead>
-                        <tr className="border-b border-border text-left text-[10px] text-muted-foreground uppercase tracking-wider">
-                          <th className="px-3 py-1.5 font-medium">Rule</th>
-                          <th className="px-3 py-1.5 font-medium">Scope</th>
-                          <th className="px-3 py-1.5 font-medium">Outcome</th>
-                          <th className="px-3 py-1.5 font-medium text-right">Time</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {recentViolations.map((v) => {
-                          const data = v.data as Record<string, string>;
-                          return (
-                            <tr key={v.id} className="border-b border-border/30 last:border-0 hover:bg-surface-light/30">
-                              <td className="px-3 py-1 font-mono text-red-400">{data?.rule ?? '-'}</td>
-                              <td className="px-3 py-1 font-mono text-muted-foreground">
-                                {v.scope_id ? String(v.scope_id).padStart(3, '0') : '-'}
-                              </td>
-                              <td className="px-3 py-1">
-                                <Badge variant="outline" className="text-[9px] border-red-500/30 text-red-400">
-                                  {data?.outcome ?? 'blocked'}
-                                </Badge>
-                              </td>
-                              <td className="px-3 py-1 text-right text-muted-foreground/60">
-                                {v.timestamp ? formatDistanceToNow(new Date(v.timestamp), { addSuffix: true }) : '-'}
-                              </td>
-                            </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="pb-1"><CardTitle className="text-sm">Recent Overrides</CardTitle></CardHeader>
-              <CardContent>
-                {overrides.length === 0 ? (
-                  <p className="text-xs text-muted-foreground text-center py-3">No overrides recorded</p>
-                ) : (
-                  <div className="space-y-1.5">
-                    {overrides.slice(0, 8).map((o, idx) => (
-                      <div key={idx} className="rounded border border-amber-500/20 bg-amber-500/5 px-2.5 py-1.5">
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-[11px] font-medium text-amber-400">{o.rule ?? 'unknown'}</span>
-                          <span className="flex-shrink-0 text-[9px] text-muted-foreground/50">
-                            {o.date ? formatDistanceToNow(new Date(o.date), { addSuffix: true }) : '-'}
-                          </span>
-                        </div>
-                        {o.reason && <p className="mt-0.5 text-[10px] text-muted-foreground line-clamp-1">{o.reason}</p>}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}
-
-// ─── Section: Global CI ─────────────────────────────────────
-
-function GlobalCISection() {
-  const { gates, stats, loading } = useGates();
-
-  const totalPassed = stats.reduce((sum, s) => sum + s.passed, 0);
-  const totalRuns = stats.reduce((sum, s) => sum + s.total, 0);
-  const passRate = totalRuns > 0 ? Math.round((totalPassed / totalRuns) * 100) : 0;
-  const passing = gates.filter((g) => g.status === 'pass').length;
-
-  return (
-    <section>
-      {/* Header with inline pass rate */}
-      <div className="mb-3 flex items-center gap-3 flex-wrap">
-        <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
-        <h2 className="text-base font-light">CI Gates</h2>
-        {gates.length > 0 && (
-          <Badge variant="secondary" className="text-[10px]">{passing}/{gates.length} passing</Badge>
-        )}
-        {totalRuns > 0 && (
-          <div className="ml-auto flex items-center gap-2">
-            <span className="text-xs text-muted-foreground">Pass rate</span>
-            <span className="text-sm font-medium">{passRate}%</span>
-            <div className="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
-              <div className="h-full rounded-full bg-bid-green transition-all" style={{ width: `${passRate}%` }} />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {loading ? (
-        <div className="flex h-20 items-center justify-center">
-          <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-        </div>
-      ) : (
-        <div className="grid gap-4 lg:grid-cols-2">
-          {/* Latest run */}
-          <Card>
-            <CardHeader className="pb-1"><CardTitle className="text-sm">Latest Run</CardTitle></CardHeader>
-            <CardContent>
-              {gates.length === 0 ? (
-                <p className="text-xs text-muted-foreground text-center py-3">
-                  No gate results yet. Run <code className="rounded bg-muted px-1">/test-checks</code> to populate.
-                </p>
-              ) : (
-                <div className="space-y-0.5">
-                  {gates.map((gate) => (
-                    <div key={gate.id} className="flex items-center gap-3 rounded px-2 py-0.5 hover:bg-surface-light/50">
-                      <GateIndicator status={gate.status as GateStatus} />
-                      <span className="flex-1 text-[11px]">{formatGateName(gate.gate_name)}</span>
-                      {gate.duration_ms != null && (
-                        <span className="font-mono text-[10px] text-muted-foreground">{(gate.duration_ms / 1000).toFixed(1)}s</span>
-                      )}
-                      <span className="text-[10px] text-muted-foreground/50">
-                        <Clock className="inline h-2.5 w-2.5 mr-0.5" />
-                        {formatDistanceToNow(new Date(gate.run_at), { addSuffix: true })}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Charts: history + duration */}
-          <div className="space-y-4">
-            <Card>
-              <CardHeader className="pb-1"><CardTitle className="text-sm">Gate History</CardTitle></CardHeader>
-              <CardContent>
-                {stats.length === 0 ? (
-                  <ChartEmpty height={120} message="No history data" />
-                ) : (
-                  <ResponsiveContainer width="100%" height={Math.max(120, stats.length * 18)}>
-                    <BarChart
-                      data={stats.map((s) => ({ name: s.gate_name.replace(/-/g, ' ').slice(0, 12), passed: s.passed, failed: s.failed }))}
-                      layout="vertical" margin={{ left: 0, right: 10, top: 0, bottom: 0 }}
-                    >
-                      <XAxis type="number" hide />
-                      <YAxis dataKey="name" type="category" width={85}
-                        tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-                      <RechartsTooltip contentStyle={{
-                        background: 'hsl(var(--card))', border: '1px solid hsl(var(--border))',
-                        borderRadius: '6px', fontSize: '11px',
-                      }} />
-                      <Bar dataKey="passed" stackId="a" radius={[0, 0, 0, 0]}>
-                        {stats.map((_, idx) => <Cell key={idx} fill="#00c853" />)}
-                      </Bar>
-                      <Bar dataKey="failed" stackId="a" radius={[0, 4, 4, 0]}>
-                        {stats.map((_, idx) => <Cell key={idx} fill="#ff1744" />)}
-                      </Bar>
-                    </BarChart>
-                  </ResponsiveContainer>
-                )}
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="pb-1"><CardTitle className="text-sm">Gate Duration</CardTitle></CardHeader>
-              <CardContent>
-                {!gates.some((g) => g.duration_ms != null) ? (
-                  <ChartEmpty height={120} message="No duration data" />
-                ) : (
-                  <ResponsiveContainer width="100%" height={Math.max(120, gates.filter((g) => g.duration_ms != null).length * 18)}>
-                    <BarChart
-                      data={gates
-                        .filter((g) => g.duration_ms != null)
-                        .map((g) => ({
-                          name: g.gate_name.replace(/-/g, ' ').slice(0, 12),
-                          seconds: Number((g.duration_ms! / 1000).toFixed(1)),
-                          status: g.status,
-                        }))}
-                      layout="vertical" margin={{ left: 0, right: 10, top: 0, bottom: 0 }}
-                    >
-                      <XAxis type="number" unit="s" tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-                      <YAxis dataKey="name" type="category" width={85}
-                        tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-                      <RechartsTooltip
-                        formatter={(val: number) => [`${val}s`, 'Duration']}
-                        contentStyle={{
-                          background: 'hsl(var(--card))', border: '1px solid hsl(var(--border))',
-                          borderRadius: '6px', fontSize: '11px',
-                        }}
-                      />
-                      <Bar dataKey="seconds" radius={[0, 4, 4, 0]}>
-                        {gates.filter((g) => g.duration_ms != null).map((g, idx) => (
-                          <Cell key={idx} fill={g.status === 'pass' ? '#00c85340' : g.status === 'fail' ? '#ff174440' : '#06b6d440'} />
-                        ))}
-                      </Bar>
-                    </BarChart>
-                  </ResponsiveContainer>
-                )}
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}
-
-// ─── Shared Components ──────────────────────────────────────
-
-function SummaryChip({ count, label, color }: { count: number; label: string; color: string }) {
-  return (
-    <span className="flex items-center gap-1">
-      <span className={cn('text-sm font-medium', color)}>{count}</span>
-      <span className="text-[11px] text-muted-foreground">{label}</span>
-    </span>
-  );
-}
-
-
-// ─── Chart: Scope Readiness Overview ────────────────────────
-
-function ScopeReadinessOverview({
-  scopes,
-}: {
-  scopes: Scope[];
-  selectedId: number | null;
-  onSelect: (id: number) => void;
-}) {
-  // For each scope, we show a mini readiness indicator
-  // Fetch readiness for all active scopes would be expensive,
-  // so we show a distribution bar based on scope status position in the workflow
-  const { engine } = useWorkflow();
-  const lists = engine.getLists().filter((l) => !engine.isTerminalStatus(l.id) && l.id !== 'icebox');
-  const statusCounts = new Map<string, number>();
-  for (const scope of scopes) {
-    statusCounts.set(scope.status, (statusCounts.get(scope.status) ?? 0) + 1);
-  }
-
-  const chartData = lists
-    .filter((l) => statusCounts.has(l.id))
-    .map((l) => ({
-      name: l.label,
-      count: statusCounts.get(l.id) ?? 0,
-      color: l.hex,
-    }));
-
-  if (chartData.length === 0) return null;
-
-  return (
-    <Card className="mb-4">
-      <CardHeader className="pb-1">
-        <CardTitle className="text-sm">Scope Distribution</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ResponsiveContainer width="100%" height={100}>
-          <BarChart data={chartData} margin={{ left: 0, right: 10, top: 5, bottom: 0 }}>
-            <XAxis dataKey="name" tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }} />
-            <YAxis allowDecimals={false} tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} width={20} />
-            <RechartsTooltip
-              contentStyle={{
-                background: 'hsl(var(--card))', border: '1px solid hsl(var(--border))',
-                borderRadius: '6px', fontSize: '11px',
-              }}
-            />
-            <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-              {chartData.map((d, idx) => <Cell key={idx} fill={d.color} fillOpacity={0.7} />)}
-            </Bar>
-          </BarChart>
-        </ResponsiveContainer>
-      </CardContent>
-    </Card>
-  );
-}
-
-// ─── Chart: Hook Category Donut ─────────────────────────────
-
-const CATEGORY_DONUT_COLORS: Record<string, string> = {
-  guards: '#EF4444',
-  gates: '#F59E0B',
-  lifecycle: '#3B82F6',
-  observers: '#71717A',
-};
-
-function HookCategoryDonut({ summary }: { summary: { guards: number; gates: number; lifecycle: number; observers: number } }) {
-  const data = [
-    { name: 'Guards', value: summary.guards },
-    { name: 'Gates', value: summary.gates },
-    { name: 'Lifecycle', value: summary.lifecycle },
-    { name: 'Observers', value: summary.observers },
-  ].filter((d) => d.value > 0);
-
-  const colors = [
-    CATEGORY_DONUT_COLORS.guards,
-    CATEGORY_DONUT_COLORS.gates,
-    CATEGORY_DONUT_COLORS.lifecycle,
-    CATEGORY_DONUT_COLORS.observers,
-  ];
-
-  const total = data.reduce((sum, d) => sum + d.value, 0);
-
-  return (
-    <div className="relative">
-      <ResponsiveContainer width={120} height={120}>
-        <PieChart>
-          <Pie
-            data={data}
-            cx="50%"
-            cy="50%"
-            innerRadius={32}
-            outerRadius={50}
-            paddingAngle={3}
-            dataKey="value"
-            stroke="none"
-          >
-            {data.map((_, idx) => <Cell key={idx} fill={colors[idx]} fillOpacity={0.8} />)}
-          </Pie>
-          <RechartsTooltip
-            contentStyle={{
-              background: 'hsl(var(--card))', border: '1px solid hsl(var(--border))',
-              borderRadius: '6px', fontSize: '11px',
-            }}
-          />
-        </PieChart>
-      </ResponsiveContainer>
-      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-        <span className="text-lg font-light text-foreground">{total}</span>
-      </div>
-    </div>
-  );
-}
-
-// ─── Empty overlay for charts ───────────────────────────────
-
-function ChartEmpty({ height, message }: { height: number; message: string }) {
-  return (
-    <div className="relative">
-      <div style={{ height }} className="opacity-30">
-        <ResponsiveContainer width="100%" height={height}>
-          <BarChart data={[{ name: '', value: 0 }]} layout="vertical" margin={{ left: 10, right: 20, top: 0, bottom: 0 }}>
-            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.4} />
-            <XAxis type="number" domain={[0, 10]} tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-            <YAxis dataKey="name" type="category" width={80} tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-      <div className="absolute inset-0 flex items-center justify-center">
-        <span className="text-xs text-muted-foreground">{message}</span>
-      </div>
-    </div>
-  );
-}
-
-// ─── Chart: Violations vs Overrides ─────────────────────────
-
-function ViolationsVsOverridesChart({
-  byRule,
-  overrides,
-}: {
-  byRule: Array<{ rule: string; count: number }>;
-  overrides: Array<{ rule: string }>;
-}) {
-  const overrideCountByRule = new Map<string, number>();
-  for (const o of overrides) {
-    const rule = o.rule ?? 'unknown';
-    overrideCountByRule.set(rule, (overrideCountByRule.get(rule) ?? 0) + 1);
-  }
-
-  const chartData = byRule.map((r) => ({
-    name: String(r.rule ?? 'unknown').slice(0, 22),
-    violations: r.count,
-    overrides: overrideCountByRule.get(String(r.rule)) ?? 0,
-  }));
-
-  const empty = chartData.length === 0;
-
-  return (
-    <Card>
-      <CardHeader className="pb-2"><CardTitle className="text-sm">Violations vs Overrides by Rule</CardTitle></CardHeader>
-      <CardContent>
-        {empty ? (
-          <ChartEmpty height={120} message="No violation data yet" />
-        ) : (
-          <ResponsiveContainer width="100%" height={Math.max(140, chartData.length * 30)}>
-            <BarChart data={chartData} layout="vertical" margin={{ left: 10, right: 20, top: 0, bottom: 0 }}>
-              <XAxis type="number" hide />
-              <YAxis dataKey="name" type="category" width={150}
-                tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))' }} />
-              <RechartsTooltip contentStyle={{
-                background: 'hsl(var(--card))', border: '1px solid hsl(var(--border))',
-                borderRadius: '6px', fontSize: '11px',
-              }} />
-              <Legend verticalAlign="top" height={24} iconSize={8}
-                wrapperStyle={{ fontSize: '10px', color: 'hsl(var(--muted-foreground))' }} />
-              <Bar dataKey="violations" stackId="a" fill="#EF4444" fillOpacity={0.8} radius={[0, 0, 0, 0]} />
-              <Bar dataKey="overrides" stackId="a" fill="#F59E0B" fillOpacity={0.8} radius={[0, 4, 4, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-// ─── Chart: Violation Trend ─────────────────────────────────
-
-function ViolationTrendChart({ trend }: { trend: ViolationTrendPoint[] }) {
-  const dailyTotals = new Map<string, number>();
-  for (const point of trend) {
-    dailyTotals.set(point.day, (dailyTotals.get(point.day) ?? 0) + point.count);
-  }
-  const chartData = [...dailyTotals.entries()]
-    .map(([day, count]) => ({ day: day.slice(5), count }))
-    .slice(-30);
-
-  const empty = chartData.length < 2;
-
-  return (
-    <Card>
-      <CardHeader className="pb-2"><CardTitle className="text-sm">Violation Trend (30d)</CardTitle></CardHeader>
-      <CardContent>
-        {empty ? (
-          <div className="relative">
-            <div style={{ height: 120 }} className="opacity-30">
-              <ResponsiveContainer width="100%" height={120}>
-                <AreaChart data={[{ day: '', count: 0 }]} margin={{ left: 0, right: 10, top: 5, bottom: 0 }}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.4} />
-                  <XAxis dataKey="day" tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-                  <YAxis domain={[0, 10]} tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} width={30} />
-                </AreaChart>
-              </ResponsiveContainer>
-            </div>
-            <div className="absolute inset-0 flex items-center justify-center">
-              <span className="text-xs text-muted-foreground">No trend data yet</span>
-            </div>
-          </div>
-        ) : (
-          <ResponsiveContainer width="100%" height={140}>
-            <AreaChart data={chartData} margin={{ left: 0, right: 10, top: 5, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
-              <XAxis dataKey="day" tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} />
-              <YAxis tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))' }} width={30} />
-              <RechartsTooltip contentStyle={{
-                background: 'hsl(var(--card))', border: '1px solid hsl(var(--border))',
-                borderRadius: '6px', fontSize: '11px',
-              }} />
-              <Area type="monotone" dataKey="count" stroke="#EF4444" fill="#EF444420" strokeWidth={1.5} />
-            </AreaChart>
-          </ResponsiveContainer>
-        )}
-      </CardContent>
-    </Card>
-  );
-}