spine-framework 0.3.124 → 0.3.126

package/.framework/src/pages/admin/cil/CILDashboardPage.tsx

@@ -0,0 +1,699 @@
+// CIL[BEGIN chunk_id="cildashboardpage_module_header_1784193942" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies and icons for the CIL dashboard page"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provides module imports and icon references used by the page"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\".framework/functions/_shared/principal.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="module imports" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports React hooks, router, apiFetch, app path hook, UI components, and lucide icons" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-AUDIENCE audience="developer"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: custom/apps/cortex/pages/operations/OperationsDashboard.tsx, custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/functions/custom_cil-embeddings.ts, .framework/functions/_shared/principal.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+import { useEffect, useState, useCallback } from 'react'
+import { useParams } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { Card, CardContent, CardHeader, CardTitle } from '@core/components/ui/card'
+import { Button } from '@core/components/ui/button'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { Progress } from '@core/components/ui/progress'
+import {
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  Clock,
+  ChevronRight,
+  RefreshCw,
+  FileCode2,
+  Layers,
+  Zap,
+  Sparkles,
+  GitGraph,
+  Hash,
+  DollarSign,
+  Bot,
+  Search,
+  Play,
+  Settings2,
+} from 'lucide-react'
+
+
+
+import { PageInstructions } from '../../../components/admin/PageInstructions'
+// CIL[END chunk_id="cildashboardpage_module_header_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_projectstats_1784193942" type="interface" identity="ProjectStats" parent="none"]
+// CIL[DOC-MACRO purpose="Define the ProjectStats data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for project-level ingestion statistics"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="ProjectStats type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares file count, chunk count, proposal counts, ingestion cost, and last ingestion timestamp" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+interface ProjectStats {
+  file_count: number
+  chunk_count: number
+  proposal_count: number
+  approved_count: number
+  pending_review_count: number
+  total_ingestion_cost_usd: number
+  last_ingested_at: string | null
+}
+
+// CIL[END chunk_id="cildashboardpage_projectstats_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_embedstatus_1784193942" type="interface" identity="EmbedStatus" parent="none"]
+// CIL[DOC-MACRO purpose="Define the EmbedStatus data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for chunk embedding coverage"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="EmbedStatus type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares total, embedded, unembedded counts and coverage percentage" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+interface EmbedStatus {
+  total_chunks: number
+  embedded_chunks: number
+  coverage_pct: number
+  unembedded_chunks: number
+}
+
+// CIL[END chunk_id="cildashboardpage_embedstatus_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_docstatus_1784193942" type="interface" identity="DocStatus" parent="none"]
+// CIL[DOC-MACRO purpose="Define the DocStatus data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for documentation coverage"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="DocStatus type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares total, documented, undocumented, AI-generated, human-verified counts and coverage percentage" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+interface DocStatus {
+  total_chunks: number
+  documented_count: number
+  undocumented_count: number
+  ai_generated_count: number
+  human_verified_count: number
+  coverage_pct: number
+}
+
+// CIL[END chunk_id="cildashboardpage_docstatus_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_callmapstatus_1784193942" type="interface" identity="CallmapStatus" parent="none"]
+// CIL[DOC-MACRO purpose="Define the CallmapStatus data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for call graph link counts"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="CallmapStatus type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares import, call, export, and tested-by link counts" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/functions/_shared/principal.ts, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/functions/_shared/schema-utils.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+interface CallmapStatus {
+  import_links: number
+  call_links: number
+  export_links: number
+  total_links: number
+  tested_by_links?: number
+}
+
+// CIL[END chunk_id="cildashboardpage_callmapstatus_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_configstatus_1784193942" type="interface" identity="ConfigStatus" parent="none"]
+// CIL[DOC-MACRO purpose="Define the ConfigStatus data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for config extraction status"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="ConfigStatus type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares config item count and configures link count" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+interface ConfigStatus {
+  config_items: number
+  configures_links: number
+}
+
+// CIL[END chunk_id="cildashboardpage_configstatus_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_dashboarddata_1784193942" type="interface" identity="DashboardData" parent="none"]
+// CIL[DOC-MACRO purpose="Aggregate dashboard data types into a single view model"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for the dashboard's combined data state"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="DashboardData type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Groups project, embed, doc, callmap, and config status objects" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+interface DashboardData {
+  project: { id: string; title: string; data: ProjectStats } | null
+  embed: EmbedStatus | null
+  doc: DocStatus | null
+  callmap: CallmapStatus | null
+  config: ConfigStatus | null
+}
+
+
+
+// CIL[END chunk_id="cildashboardpage_dashboarddata_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_passcard_1784193942" type="function" identity="PassCard" parent="none"]
+// CIL[DOC-MACRO purpose="Render a pipeline pass card with status, label, description, and metric"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a single pipeline step's completion status and metric as a clickable card"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Selects a status color and icon config and renders a compact status card with an optional link" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+function PassCard({
+  number,
+  label,
+  icon: Icon,
+  description,
+  status,
+  metric,
+  href,
+}: {
+  number: string
+  label: string
+  icon: React.ElementType
+  description: string
+  status: 'complete' | 'partial' | 'empty' | 'unknown'
+  metric: string
+  href?: string
+}) {
+  const statusConfig = {
+    complete: { color: 'text-green-600', bg: 'bg-green-50 border-green-200', dot: 'bg-green-500', icon: CheckCircle2 },
+    partial:  { color: 'text-amber-600', bg: 'bg-amber-50 border-amber-200',  dot: 'bg-amber-500',  icon: AlertTriangle },
+    empty:    { color: 'text-slate-400', bg: 'bg-slate-50 border-slate-200',  dot: 'bg-slate-300',  icon: Clock },
+    unknown:  { color: 'text-slate-400', bg: 'bg-slate-50 border-slate-200',  dot: 'bg-slate-300',  icon: Clock },
+  }[status]
+
+  const StatusIcon = statusConfig.icon
+
+  return (
+    <div className={`rounded-lg border p-3 ${statusConfig.bg} flex items-start gap-3`}>
+      <div className={`mt-0.5 h-7 w-7 rounded-md flex items-center justify-center shrink-0 ${status === 'complete' ? 'bg-green-100' : status === 'partial' ? 'bg-amber-100' : 'bg-slate-100'}`}>
+        <Icon className={`h-4 w-4 ${statusConfig.color}`} />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="text-xs font-bold text-muted-foreground">Pass {number}</span>
+          <StatusIcon className={`h-3 w-3 ${statusConfig.color}`} />
+        </div>
+        <div className="text-sm font-medium truncate">{label}</div>
+        <div className="text-xs text-muted-foreground">{description}</div>
+        <div className={`text-xs font-mono mt-1 font-semibold ${statusConfig.color}`}>{metric}</div>
+      </div>
+      {href && (
+        <a href={href} className="shrink-0 text-xs text-muted-foreground hover:text-foreground">
+          <ChevronRight className="h-4 w-4" />
+        </a>
+      )}
+    </div>
+  )
+}
+
+
+
+// CIL[END chunk_id="cildashboardpage_passcard_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_stattile_1784193942" type="function" identity="StatTile" parent="none"]
+// CIL[DOC-MACRO purpose="Render a numeric statistic tile with label and optional subtext"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a single dashboard metric inside a styled Card"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a Card with a large value, label, optional sub, and icon" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+function StatTile({
+  label,
+  value,
+  sub,
+  icon: Icon,
+  accent = false,
+}: {
+  label: string
+  value: string | number
+  sub?: string
+  icon: React.ElementType
+  accent?: boolean
+}) {
+  return (
+    <Card className={accent ? 'border-indigo-200 bg-indigo-50/50' : ''}>
+      <CardContent className="pt-4 pb-3">
+        <div className="flex items-start justify-between">
+          <div>
+            <div className={`text-2xl font-bold tabular-nums ${accent ? 'text-indigo-700' : ''}`}>{value}</div>
+            <div className="text-xs text-muted-foreground mt-0.5">{label}</div>
+            {sub && <div className="text-xs text-muted-foreground mt-0.5">{sub}</div>}
+          </div>
+          <Icon className={`h-5 w-5 mt-1 ${accent ? 'text-indigo-400' : 'text-muted-foreground/50'}`} />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+
+
+// CIL[END chunk_id="cildashboardpage_stattile_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_coveragebar_1784193942" type="function" identity="CoverageBar" parent="none"]
+// CIL[DOC-MACRO purpose="Render a labeled progress bar for coverage metrics"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a percentage coverage value with a Progress bar"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a label, percentage, and shadcn Progress component" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+function CoverageBar({ label, pct, color = 'bg-indigo-500' }: { label: string; pct: number; color?: string }) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="font-mono font-semibold">{pct}%</span>
+      </div>
+      <Progress value={pct} className="h-2" />
+    </div>
+  )
+}
+
+
+
+// CIL[END chunk_id="cildashboardpage_coveragebar_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_driftalertcard_1784193942" type="function" identity="DriftAlertCard" parent="none"]
+// CIL[DOC-MACRO purpose="Check stored chunk hashes and list drifted chunks for a project"]
+// CIL[DOC-RESPONSIBILITY responsibility="Fetch chunk records, validate stored hashes, and render drift alerts with links"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="API or validation errors are swallowed" side_effects="Calls /api/admin-data and /api/cil-validate; sets local state"]
+// CIL[DOC-MICRO logic_summary="Lists cil_chunk items for the project, calls the validate endpoint, and displays any drifted chunks or an all-current status" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+function DriftAlertCard({ projectId, appPath }: { projectId: string; appPath: (p: string) => string }) {
+  const [driftChunks, setDriftChunks] = useState<any[] | null>(null)
+  const [checking, setChecking] = useState(false)
+
+  const checkDrift = async () => {
+    setChecking(true)
+    try {
+      
+      const res = await apiFetch(`/api/admin-data?action=list&entity=items&type_slug=cil_chunk&limit=200`)
+      const data = await res.json()
+      const chunks = (data?.data || data || []).filter(
+        (c: any) => c.data?.project_id === projectId && c.data?.stored_hash
+      )
+
+      if (!chunks.length) { setDriftChunks([]); return }
+
+      
+      const validateRes = await apiFetch('/api/cil-validate?action=validate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          chunks: chunks.slice(0, 50).map((c: any) => ({
+            chunk_id: c.id,
+            chunk_name: c.data?.chunk_name || '',
+            content: c.data?.code_content || '',
+          })),
+        }),
+      })
+      const vData = await validateRes.json()
+      const results = vData?.results || vData?.data?.results || []
+      setDriftChunks(results.filter((r: any) => r.status === 'drift_detected'))
+    } finally {
+      setChecking(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm flex items-center gap-1.5">
+            <Hash className="h-4 w-4" /> Hash Drift
+          </CardTitle>
+          <Button size="sm" variant="outline" onClick={checkDrift} disabled={checking} className="h-7 text-xs">
+            {checking ? <RefreshCw className="h-3 w-3 animate-spin" /> : <Hash className="h-3 w-3" />}
+            {checking ? 'Checking…' : 'Check Now'}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {driftChunks === null && (
+          <p className="text-xs text-muted-foreground">Click "Check Now" to validate all stored hashes against current code_content.</p>
+        )}
+        {driftChunks?.length === 0 && (
+          <div className="flex items-center gap-1.5 text-sm text-green-600">
+            <CheckCircle2 className="h-4 w-4" /> All hashes current
+          </div>
+        )}
+        {driftChunks && driftChunks.length > 0 && (
+          <div className="space-y-1.5">
+            <div className="flex items-center gap-1.5 text-sm text-red-600 mb-2">
+              <XCircle className="h-4 w-4" /> {driftChunks.length} chunk{driftChunks.length !== 1 ? 's' : ''} with drift
+            </div>
+            {driftChunks.slice(0, 5).map((r: any) => (
+              <a
+                key={r.chunk_id}
+                href={appPath(`/cil/${projectId}/chunks/${r.chunk_id}`)}
+                className="flex items-center gap-2 text-xs hover:bg-red-50 rounded p-1 group"
+              >
+                <XCircle className="h-3 w-3 text-red-500 shrink-0" />
+                <span className="font-mono truncate">{r.chunk_name}</span>
+                <ChevronRight className="h-3 w-3 text-muted-foreground opacity-0 group-hover:opacity-100 ml-auto" />
+              </a>
+            ))}
+            {driftChunks.length > 5 && (
+              <p className="text-xs text-muted-foreground">…and {driftChunks.length - 5} more</p>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+
+
+// CIL[END chunk_id="cildashboardpage_driftalertcard_1784193942"]
+// CIL[BEGIN chunk_id="cildashboardpage_cildashboardpage_1784193942" type="component" identity="CILDashboardPage" parent="none"]
+// CIL[DOC-MACRO purpose="Render the CIL project dashboard page"]
+// CIL[DOC-RESPONSIBILITY responsibility="Fetch project status and display pipeline passes, coverage, stats, graph links, drift alerts, and quick actions"]
+// CIL[DOC-CONTEXT module="cortex:cil-dashboard" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="Failed requests are ignored; empty states shown" side_effects="Calls /api/cil-project, /api/cil-embeddings, /api/cil-doc, /api/cil-callmap, and /api/cil-config; updates local state"]
+// CIL[DOC-MICRO logic_summary="Loads project, embedding, documentation, callmap, and config statuses in parallel, then renders stat tiles, coverage bars, pass cards, graph links, drift alerts, and quick action buttons" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: none."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+export default function CILDashboardPage() {
+  const { id: projectId } = useParams<{ id: string }>()
+  const appPath = (path: string) => '/spine-framework/admin' + (path.startsWith('/') ? path : '/' + path)
+  const [data, setData] = useState<DashboardData>({ project: null, embed: null, doc: null, callmap: null, config: null })
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    if (!projectId) return
+    setLoading(true)
+    try {
+      const [projectRes, embedRes, docRes, callmapRes, configRes] = await Promise.allSettled([
+        apiFetch(`/api/cil-project?action=get&id=${projectId}`).then(r => r.json()),
+        apiFetch(`/api/cil-embeddings?action=status&project_id=${projectId}`).then(r => r.json()),
+        apiFetch(`/api/cil-doc?action=gap_report&project_id=${projectId}`).then(r => r.json()),
+        apiFetch(`/api/cil-callmap?action=status&project_id=${projectId}`).then(r => r.json()),
+        apiFetch(`/api/cil-config?action=status&project_id=${projectId}`).then(r => r.json()),
+      ])
+
+      setData({
+        project: projectRes.status === 'fulfilled' ? (projectRes.value?.project || projectRes.value?.data?.project) : null,
+        embed:   embedRes.status === 'fulfilled'   ? (embedRes.value?.data   || embedRes.value)   : null,
+        doc:     docRes.status === 'fulfilled'     ? (docRes.value?.data     || docRes.value)     : null,
+        callmap: callmapRes.status === 'fulfilled' ? (callmapRes.value?.data || callmapRes.value) : null,
+        config:  configRes.status === 'fulfilled'  ? (configRes.value?.data  || configRes.value)  : null,
+      })
+    } finally {
+      setLoading(false)
+    }
+  }, [projectId])
+
+  useEffect(() => { load() }, [load])
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-4">
+        <Skeleton className="h-6 w-48" />
+        <div className="grid grid-cols-4 gap-4">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-24" />)}</div>
+        <div className="grid grid-cols-2 gap-4">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-32" />)}</div>
+      </div>
+    )
+  }
+
+  const project = data.project
+  const stats: ProjectStats = project?.data || { file_count: 0, chunk_count: 0, proposal_count: 0, approved_count: 0, pending_review_count: 0, total_ingestion_cost_usd: 0, last_ingested_at: null }
+  const embed   = data.embed   || { total_chunks: 0, embedded_chunks: 0, coverage_pct: 0, unembedded_chunks: 0 }
+  const doc     = data.doc     || { total_chunks: 0, documented_count: 0, undocumented_count: 0, ai_generated_count: 0, human_verified_count: 0, coverage_pct: 0 }
+  const callmap = data.callmap || { import_links: 0, call_links: 0, export_links: 0, total_links: 0, tested_by_links: 0 }
+  const config  = data.config  || { config_items: 0, configures_links: 0 }
+
+  const lastIngested = stats.last_ingested_at
+    ? new Date(stats.last_ingested_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+    : 'Never'
+
+  
+  const pass1Status = stats.file_count > 0 ? 'complete' : 'empty'
+  const pass2Status = stats.chunk_count > 0 ? 'complete' : (stats.file_count > 0 ? 'partial' : 'empty')
+  const pass3Status = embed.coverage_pct === 100 ? 'complete' : (embed.embedded_chunks > 0 ? 'partial' : 'empty') as any
+  const pass4Status = doc.coverage_pct === 100 ? 'complete' : (doc.documented_count > 0 ? 'partial' : 'empty') as any
+  const pass4bStatus = callmap.total_links > 0 ? 'complete' : 'empty' as any
+  const pass5Status = config.config_items > 0 ? (config.configures_links > 0 ? 'complete' : 'partial') : 'empty' as any
+
+  return (
+    <div className="p-6 space-y-6 max-w-5xl">
+      {}
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <a href={appPath('/cil')} className="hover:underline">Code Intelligence</a>
+        <ChevronRight className="h-3 w-3" />
+        <span>{project?.title || 'Project'}</span>
+        <ChevronRight className="h-3 w-3" />
+        <span>Dashboard</span>
+      </div>
+
+      {}
+      <div className="flex items-start justify-between flex-wrap gap-4">
+        <div>
+          <h1 className="text-2xl font-bold">{project?.title || 'Project Dashboard'}</h1>
+          <p className="text-xs text-muted-foreground font-mono mt-0.5">Last ingested: {lastIngested}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="outline" onClick={load} className="h-8 text-xs">
+            <RefreshCw className="h-3 w-3 mr-1" /> Refresh
+          </Button>
+          <Button size="sm" asChild className="h-8 text-xs">
+            <a href={appPath(`/cil/${projectId}/ingest`)}>
+              <Play className="h-3 w-3 mr-1" /> Run Pipeline
+            </a>
+          </Button>
+        </div>
+      </div>
+
+      <PageInstructions
+        description="Review CIL project health and ingestion coverage."
+        sections={[
+          { title: 'What this page is for', content: 'This page is the project-level overview for a CIL project. It displays stats, coverage, pipeline status, graph links, and drift alerts.' },
+          { title: 'How to read the cards', content: 'The top tiles show Files, Chunks, Pending Review, and cumulative LLM Cost. The Coverage card shows embedding and documentation coverage plus AI-generated, human-verified, and undocumented counts.' },
+          { title: 'How to read the pipeline', content: 'Pass cards summarize Discover Files, AST Chunk, Embed Chunks, AI Document, Call Map, and Config Extract. Each card shows status, counts, and a link to the relevant step.' },
+          { title: 'Important notes', content: 'Use Refresh to reload the dashboard and Run Pipeline to start or continue ingestion. A drift alert appears when stored hashes differ from current code.' },
+        ]}
+      />
+
+      {}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        <StatTile label="Files" value={stats.file_count.toLocaleString()} icon={FileCode2} />
+        <StatTile label="Chunks" value={stats.chunk_count.toLocaleString()} icon={Layers} accent />
+        <StatTile
+          label="Pending Review"
+          value={stats.pending_review_count}
+          icon={AlertTriangle}
+        />
+        <StatTile
+          label="LLM Cost"
+          value={`$${(stats.total_ingestion_cost_usd ?? 0).toFixed(4)}`}
+          sub="cumulative"
+          icon={DollarSign}
+        />
+      </div>
+
+      {}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm">Coverage</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <CoverageBar label={`Embeddings — ${embed.embedded_chunks} / ${embed.total_chunks} chunks`} pct={embed.coverage_pct} color="bg-indigo-500" />
+          <CoverageBar label={`Documentation — ${doc.documented_count} / ${doc.total_chunks} chunks`} pct={doc.coverage_pct} color="bg-emerald-500" />
+          <div className="pt-1 grid grid-cols-3 gap-3 text-xs text-center text-muted-foreground">
+            <div>
+              <div className="font-semibold text-blue-600">{doc.ai_generated_count}</div>
+              <div>AI Generated</div>
+            </div>
+            <div>
+              <div className="font-semibold text-green-600">{doc.human_verified_count}</div>
+              <div>Human Verified</div>
+            </div>
+            <div>
+              <div className="font-semibold text-slate-500">{doc.undocumented_count}</div>
+              <div>Undocumented</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {}
+      <div>
+        <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-3">Pipeline Status</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <PassCard
+            number="1" label="Discover Files" icon={FileCode2}
+            description="Walk repo, register cil_file items, compute hashes"
+            status={pass1Status}
+            metric={`${stats.file_count.toLocaleString()} files registered`}
+            href={appPath(`/cil/${projectId}/ingest`)}
+          />
+          <PassCard
+            number="2" label="AST Chunk" icon={Layers}
+            description="Parse files, propose chunk boundaries, write markers"
+            status={pass2Status}
+            metric={`${stats.chunk_count.toLocaleString()} chunks · ${stats.pending_review_count} pending`}
+            href={appPath(`/cil/${projectId}/ingest`)}
+          />
+          <PassCard
+            number="3" label="Embed Chunks" icon={Zap}
+            description="Semantic + structural + contract vector embeddings"
+            status={pass3Status}
+            metric={`${embed.coverage_pct}% coverage · ${embed.embedded_chunks} / ${embed.total_chunks}`}
+            href={appPath(`/cil/${projectId}/ingest`)}
+          />
+          <PassCard
+            number="4" label="AI Document" icon={Sparkles}
+            description="LLM-generated macro / micro / contract fields"
+            status={pass4Status}
+            metric={`${doc.coverage_pct}% coverage · $${(stats.total_ingestion_cost_usd ?? 0).toFixed(4)} spent`}
+            href={appPath(`/cil/${projectId}/ingest`)}
+          />
+          <PassCard
+            number="4b" label="Call Map" icon={GitGraph}
+            description="Import + call edges between files and chunks"
+            status={pass4bStatus}
+            metric={`${callmap.call_links.toLocaleString()} calls · ${callmap.import_links.toLocaleString()} imports`}
+            href={appPath(`/cil/${projectId}/graph`)}
+          />
+          <PassCard
+            number="5" label="Config Extract" icon={Settings2}
+            description="Config field contracts + cil_configures links"
+            status={pass5Status}
+            metric={`${config.config_items.toLocaleString()} config items · ${config.configures_links.toLocaleString()} links`}
+            href={appPath(`/cil/${projectId}/ingest`)}
+          />
+        </div>
+      </div>
+
+      {}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm flex items-center gap-1.5">
+              <GitGraph className="h-4 w-4" /> Graph Links
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {[
+              { label: 'Import links (file→file)', value: callmap.import_links },
+              { label: 'Call links (chunk→chunk)', value: callmap.call_links },
+              { label: 'Export links', value: callmap.export_links },
+              { label: 'Tested-by links', value: callmap.tested_by_links ?? 0 },
+            ].map(item => (
+              <div key={item.label} className="flex justify-between text-sm">
+                <span className="text-muted-foreground">{item.label}</span>
+                <span className="font-mono font-medium">{item.value.toLocaleString()}</span>
+              </div>
+            ))}
+            <div className="pt-2 flex gap-2">
+              <Button size="sm" variant="outline" className="flex-1 h-7 text-xs" asChild>
+                <a href={appPath(`/cil/${projectId}/graph`)}>
+                  <GitGraph className="h-3 w-3 mr-1" /> View Graph
+                </a>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {}
+        <DriftAlertCard projectId={projectId!} appPath={appPath} />
+      </div>
+
+      {}
+      <div>
+        <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-3">Quick Actions</h2>
+        <div className="flex flex-wrap gap-2">
+          <Button size="sm" variant="outline" asChild>
+            <a href={appPath(`/cil/search`)}>
+              <Search className="h-3.5 w-3.5 mr-1.5" /> Search Chunks
+            </a>
+          </Button>
+          <Button size="sm" variant="outline" asChild>
+            <a href={appPath(`/cil/${projectId}/agent`)}>
+              <Bot className="h-3.5 w-3.5 mr-1.5" /> Ask CIL Agent
+            </a>
+          </Button>
+          <Button size="sm" variant="outline" asChild>
+            <a href={appPath(`/cil/${projectId}/files`)}>
+              <Layers className="h-3.5 w-3.5 mr-1.5" /> Browse Files
+            </a>
+          </Button>
+          <Button size="sm" variant="outline" asChild>
+            <a href={appPath(`/cil/${projectId}/ingest`)}>
+              <Play className="h-3.5 w-3.5 mr-1.5" /> Run Ingestion
+            </a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// CIL[END chunk_id="cildashboardpage_cildashboardpage_1784193942"]