spine-framework 0.3.125 → 0.3.126

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

@@ -0,0 +1,616 @@
+// CIL[BEGIN chunk_id="cilgraphpage_module_header_1784193942" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Imports and dependencies for the CIL graph visualization page"]
+// CIL[DOC-RESPONSIBILITY responsibility="Declare external libraries, hooks, UI components, and icons used by CILGraphPage"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="imported modules and types" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Aggregates React, react-router, XYFlow, dagre, internal api/hooks, UI primitives, 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, .framework/src/pages/admin/RolesPage.tsx, \."]
+// 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 {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  type Node,
+  type Edge,
+  type Connection,
+  MarkerType,
+  Panel,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import dagre from 'dagre'
+import { apiFetch } from '@core/lib/api'
+import { Button } from '@core/components/ui/button'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@core/components/ui/select'
+import { RefreshCw, ChevronRight, ZoomIn, Layers } from 'lucide-react'
+
+
+
+import { PageInstructions } from '../../../components/admin/PageInstructions'
+// CIL[END chunk_id="cilgraphpage_module_header_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_node_width_1784193942" type="constant" identity="NODE_WIDTH" parent="none"]
+// CIL[DOC-MACRO purpose="Define default width for chunk graph nodes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide constant node width used in layout and rendering"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="NODE_WIDTH number" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares a fixed width of 180 pixels for chunk nodes." 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/functions/_shared/principal.ts, .framework/functions/_shared/schema-utils.ts, .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, \."]
+// 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"]
+const NODE_WIDTH  = 180
+// CIL[END chunk_id="cilgraphpage_node_width_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_node_height_1784193942" type="constant" identity="NODE_HEIGHT" parent="none"]
+// CIL[DOC-MACRO purpose="Define default height for chunk graph nodes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide constant node height used in layout and rendering"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="NODE_HEIGHT number" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares a fixed height of 60 pixels for chunk nodes." 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/functions/_shared/principal.ts, .framework/functions/_shared/schema-utils.ts, .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, \."]
+// 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"]
+const NODE_HEIGHT = 60
+// CIL[END chunk_id="cilgraphpage_node_height_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_file_width_1784193942" type="constant" identity="FILE_WIDTH" parent="none"]
+// CIL[DOC-MACRO purpose="Define default width for file graph nodes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide constant file node width used in layout and rendering"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="FILE_WIDTH number" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares a fixed width of 200 pixels for file nodes." 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/functions/_shared/principal.ts, .framework/functions/_shared/schema-utils.ts, .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, \."]
+// 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"]
+const FILE_WIDTH  = 200
+// CIL[END chunk_id="cilgraphpage_file_width_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_file_height_1784193942" type="constant" identity="FILE_HEIGHT" parent="none"]
+// CIL[DOC-MACRO purpose="Define default height for file graph nodes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide constant file node height used in layout and rendering"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/schema-utils.ts\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="FILE_HEIGHT number" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares a fixed height of 40 pixels for file nodes." 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/functions/_shared/principal.ts, .framework/functions/_shared/schema-utils.ts, .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, \."]
+// 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"]
+const FILE_HEIGHT = 40
+
+// CIL[END chunk_id="cilgraphpage_file_height_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_viewmode_1784193942" type="type" identity="ViewMode" parent="none"]
+// CIL[DOC-MACRO purpose="Enumerate valid graph view modes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Type alias restricting view mode values"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="ViewMode union type" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines allowed view modes for the graph: files, chunks, or mixed." 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"]
+type ViewMode = 'files' | 'chunks' | 'mixed'
+
+// CIL[END chunk_id="cilgraphpage_viewmode_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_layoutgraph_1784193942" type="function" identity="layoutGraph" parent="none"]
+// CIL[DOC-MACRO purpose="Compute directed graph layout for React Flow nodes and edges"]
+// CIL[DOC-RESPONSIBILITY responsibility="Arrange nodes using Dagre left-to-right layout and return positioned elements"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="{nodes: Node[]; edges: Edge[]}" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Builds a dagre graph, sets LR options, adds nodes/edges with dynamic widths/heights, runs layout, then centers each node by subtracting half its size." notable_decisions="['Uses file dimensions for file nodes and chunk dimensions otherwise','Centers node positions by subtracting half width/height']"]
+// 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 layoutGraph(nodes: Node[], edges: Edge[]): { nodes: Node[]; edges: Edge[] } {
+  const g = new dagre.graphlib.Graph()
+  g.setDefaultEdgeLabel(() => ({}))
+  g.setGraph({ rankdir: 'LR', nodesep: 40, ranksep: 80 })
+
+  for (const node of nodes) {
+    g.setNode(node.id, { width: node.data?.isFile ? FILE_WIDTH : NODE_WIDTH, height: node.data?.isFile ? FILE_HEIGHT : NODE_HEIGHT })
+  }
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target)
+  }
+
+  dagre.layout(g)
+
+  const positionedNodes = nodes.map(node => {
+    const pos = g.node(node.id)
+    const w = node.data?.isFile ? FILE_WIDTH : NODE_WIDTH
+    const h = node.data?.isFile ? FILE_HEIGHT : NODE_HEIGHT
+    return { ...node, position: { x: pos.x - w / 2, y: pos.y - h / 2 } }
+  })
+
+  return { nodes: positionedNodes, edges }
+}
+
+
+
+// CIL[END chunk_id="cilgraphpage_layoutgraph_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_chunk_type_colors_1784193942" type="constant" identity="CHUNK_TYPE_COLORS" parent="none"]
+// CIL[DOC-MACRO purpose="Map chunk types to display colors"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide color palette for graph legend and node styling"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Record<string,string> color map" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Color lookup table mapping chunk type strings to hex colors for nodes and legend." 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"]
+const CHUNK_TYPE_COLORS: Record<string, string> = {
+  function:  '#6366F1', 
+  class:     '#8B5CF6', 
+  interface: '#10B981', 
+  type:      '#06B6D4', 
+  component: '#F59E0B', 
+  hook:      '#EC4899', 
+  route:     '#EF4444', 
+  config:    '#64748B', 
+}
+
+// CIL[END chunk_id="cilgraphpage_chunk_type_colors_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_nodecolor_1784193942" type="function" identity="nodeColor" parent="none"]
+// CIL[DOC-MACRO purpose="Resolve a display color for a graph node"]
+// CIL[DOC-RESPONSIBILITY responsibility="Return the appropriate color based on file, dead-code, or chunk type"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="hex color string" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Returns slate for file nodes, gray for dead code, or CHUNK_TYPE_COLORS lookup with an indigo fallback." notable_decisions="['Falls back to indigo when chunk type has no mapped color']"]
+// 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 nodeColor(node: Node): string {
+  if (node.data?.isFile) return '#1E293B'
+  if (node.data?.is_dead_code) return '#94A3B8'
+  return CHUNK_TYPE_COLORS[node.data?.chunk_type as string] || '#6366F1'
+}
+
+
+
+// CIL[END chunk_id="cilgraphpage_nodecolor_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_projectgraph_1784193942" type="interface" identity="ProjectGraph" parent="none"]
+// CIL[DOC-MACRO purpose="Describe the shape of the project graph API response"]
+// CIL[DOC-RESPONSIBILITY responsibility="Define the TypeScript contract for nodes and edges data"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="ProjectGraph interface" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares nodes containing files and chunks arrays and edges containing imports and calls arrays, using any for metadata extensibility." notable_decisions="['Uses any types for flexible API schema']"]
+// 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 ProjectGraph {
+  nodes: {
+    files: any[]
+    chunks: any[]
+  }
+  edges: {
+    imports: { source_id: string; target_id: string; metadata?: any }[]
+    calls: { source_id: string; target_id: string; metadata?: any }[]
+  }
+}
+
+// CIL[END chunk_id="cilgraphpage_projectgraph_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_buildflowgraph_1784193942" type="function" identity="buildFlowGraph" parent="none"]
+// CIL[DOC-MACRO purpose="Build React Flow nodes and edges from project graph data"]
+// CIL[DOC-RESPONSIBILITY responsibility="Transform ProjectGraph into React Flow elements per view mode"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="{nodes: Node[]; edges: Edge[]}" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Constructs file and chunk nodes with styling, adds import and call edges, and applies layoutGraph to position the flow graph." notable_decisions="['Dashed edges for imports','Separate branching for files/chunks/mixed views','Labels call edges with callee_name']"]
+// 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 buildFlowGraph(graph: ProjectGraph, viewMode: ViewMode): { nodes: Node[]; edges: Edge[] } {
+  const nodes: Node[] = []
+  const edges: Edge[] = []
+
+  if (viewMode === 'files' || viewMode === 'mixed') {
+    for (const file of graph.nodes.files) {
+      nodes.push({
+        id: file.id,
+        type: 'default',
+        position: { x: 0, y: 0 },
+        data: {
+          label: file.file_path.split('/').pop() || file.file_path,
+          isFile: true,
+          file_path: file.file_path,
+          language: file.language,
+          chunk_count: file.chunk_count,
+          is_dead_code: file.is_dead_code,
+        },
+        style: {
+          background: file.is_dead_code ? '#64748B' : '#0F172A',
+          color: '#F8FAFC',
+          border: `2px solid ${file.is_dead_code ? '#475569' : '#334155'}`,
+          borderRadius: '6px',
+          fontSize: '11px',
+          fontFamily: 'monospace',
+          padding: '6px 10px',
+          width: FILE_WIDTH,
+        },
+      })
+    }
+
+    for (const imp of graph.edges.imports) {
+      edges.push({
+        id: `imp-${imp.source_id}-${imp.target_id}`,
+        source: imp.source_id,
+        target: imp.target_id,
+        type: 'smoothstep',
+        style: { stroke: '#334155', strokeWidth: 1.5, strokeDasharray: '4,3' },
+        markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12, color: '#334155' },
+        label: imp.metadata?.symbols?.slice(0, 2).join(', ') || '',
+        labelStyle: { fontSize: 9, fill: '#94A3B8' },
+      })
+    }
+  }
+
+  if (viewMode === 'chunks' || viewMode === 'mixed') {
+    for (const chunk of graph.nodes.chunks) {
+      const color = chunk.is_dead_code ? '#94A3B8' : (CHUNK_TYPE_COLORS[chunk.chunk_type] || '#6366F1')
+      nodes.push({
+        id: chunk.id,
+        type: 'default',
+        position: { x: 0, y: 0 },
+        data: {
+          label: chunk.chunk_name,
+          isFile: false,
+          chunk_type: chunk.chunk_type,
+          file_path: chunk.file_path,
+          doc_confidence: chunk.doc_confidence,
+          boundary_confidence: chunk.boundary_confidence,
+          is_dead_code: chunk.is_dead_code,
+          stored_hash: chunk.stored_hash,
+        },
+        style: {
+          background: color + '22',
+          color: '#1E293B',
+          border: `2px solid ${color}`,
+          borderRadius: '8px',
+          fontSize: '11px',
+          fontFamily: 'monospace',
+          padding: '8px 12px',
+          width: NODE_WIDTH,
+          opacity: chunk.is_dead_code ? 0.5 : 1,
+        },
+      })
+    }
+
+    for (const call of graph.edges.calls) {
+      edges.push({
+        id: `call-${call.source_id}-${call.target_id}`,
+        source: call.source_id,
+        target: call.target_id,
+        type: 'smoothstep',
+        style: { stroke: '#6366F1', strokeWidth: 1.5 },
+        markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12, color: '#6366F1' },
+        label: call.metadata?.callee_name || '',
+        labelStyle: { fontSize: 9, fill: '#6366F1' },
+      })
+    }
+  }
+
+  return layoutGraph(nodes, edges)
+}
+
+
+
+// CIL[END chunk_id="cilgraphpage_buildflowgraph_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_nodedetailpanel_1784193942" type="function" identity="NodeDetailPanel" parent="none"]
+// CIL[DOC-MACRO purpose="Render metadata for a selected graph node"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display file or chunk details and a link to the chunk contract page"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a placeholder or file/chunk metadata, including badges for dead code, doc confidence, and stored hash, plus a contract link." notable_decisions="['Casts node.data as any for flexible field access']"]
+// 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 NodeDetailPanel({
+  node,
+  projectId,
+}: {
+  node: Node | null
+  projectId: string
+}) {
+  const appPath = (path: string) => '/spine-framework/admin' + (path.startsWith('/') ? path : '/' + path)
+  if (!node) {
+    return (
+      <div className="p-3 text-xs text-muted-foreground">
+        Click a node to inspect it
+      </div>
+    )
+  }
+
+  const d = node.data as any
+
+  if (d.isFile) {
+    return (
+      <div className="p-3 space-y-2 text-xs">
+        <div className="font-mono font-bold truncate" title={d.file_path}>{d.file_path}</div>
+        <div className="text-muted-foreground">{d.language} · {d.chunk_count ?? '?'} chunks</div>
+        {d.is_dead_code && <Badge variant="destructive" className="text-xs">Dead Code</Badge>}
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-3 space-y-2 text-xs">
+      <div className="font-mono font-bold">{d.label}</div>
+      <div className="text-muted-foreground truncate">{d.file_path}</div>
+      <div className="flex gap-1 flex-wrap">
+        <Badge variant="secondary" className="text-xs">{d.chunk_type}</Badge>
+        {d.is_dead_code && <Badge variant="destructive" className="text-xs">Dead</Badge>}
+        {d.doc_confidence === 'human_verified' && <Badge variant="default" className="text-xs bg-green-600">Verified</Badge>}
+        {d.doc_confidence === 'ai_generated' && <Badge variant="outline" className="text-xs">AI Docs</Badge>}
+        {!d.stored_hash && <Badge variant="outline" className="text-xs text-amber-600 border-amber-300">No Hash</Badge>}
+      </div>
+      <a
+        href={appPath(`/cil/${projectId}/chunks/${node.id}`)}
+        className="block text-indigo-600 hover:underline font-medium"
+      >
+        Open Contract →
+      </a>
+    </div>
+  )
+}
+
+
+
+// CIL[END chunk_id="cilgraphpage_nodedetailpanel_1784193942"]
+// CIL[BEGIN chunk_id="cilgraphpage_cilgraphpage_1784193942" type="component" identity="CILGraphPage" parent="none"]
+// CIL[DOC-MACRO purpose="Main interactive page for the CIL project graph"]
+// CIL[DOC-RESPONSIBILITY responsibility="Fetch graph data, manage React Flow state, and render the graph with controls"]
+// CIL[DOC-CONTEXT module="cortex:cil-graph" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="swallows fetch errors silently" side_effects="calls apiFetch and updates React state"]
+// CIL[DOC-MICRO logic_summary="Loads project graph and title, builds React Flow elements, handles view mode and selection, and renders the graph, legend, and inspector panel." notable_decisions="['Silently catches API errors','Hides React Flow attribution','Refreshes on button click']"]
+// 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 CILGraphPage() {
+  const { id: projectId } = useParams<{ id: string }>()
+  const appPath = (path: string) => '/spine-framework/admin' + (path.startsWith('/') ? path : '/' + path)
+  const [nodes, setNodes, onNodesChange] = useNodesState([])
+  const [edges, setEdges, onEdgesChange] = useEdgesState([])
+  const [loading, setLoading] = useState(true)
+  const [viewMode, setViewMode] = useState<ViewMode>('chunks')
+  const [selectedNode, setSelectedNode] = useState<Node | null>(null)
+  const [stats, setStats] = useState({ files: 0, chunks: 0, imports: 0, calls: 0 })
+  const [projectTitle, setProjectTitle] = useState('')
+
+  const loadGraph = useCallback(async () => {
+    if (!projectId) return
+    setLoading(true)
+    try {
+      const [graphRes, projectRes] = await Promise.all([
+        apiFetch(`/api/cil-graph?action=get_project_graph&project_id=${projectId}`),
+        apiFetch(`/api/cil-project?action=get&id=${projectId}`),
+      ])
+      const graphData = await graphRes.json()
+      const projectData = await projectRes.json()
+
+      const graph: ProjectGraph = graphData?.data || graphData
+      const project = projectData?.project || projectData?.data?.project
+
+      if (project?.title) setProjectTitle(project.title)
+
+      const { nodes: flowNodes, edges: flowEdges } = buildFlowGraph(graph, viewMode)
+      setNodes(flowNodes)
+      setEdges(flowEdges)
+      setStats({
+        files: graph.nodes.files.length,
+        chunks: graph.nodes.chunks.length,
+        imports: graph.edges.imports.length,
+        calls: graph.edges.calls.length,
+      })
+    } catch {
+    } finally {
+      setLoading(false)
+    }
+  }, [projectId, viewMode])
+
+  useEffect(() => { loadGraph() }, [loadGraph])
+
+  const onConnect = useCallback(
+    (params: Connection) => setEdges(eds => addEdge(params, eds)),
+    [setEdges]
+  )
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-4">
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-[600px] rounded-xl" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-64px)]">
+      {}
+      <div className="flex items-center justify-between px-4 py-2 border-b bg-background shrink-0 gap-4 flex-wrap">
+        <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" />
+          <a href={appPath(`/cil/${projectId}/ingest`)} className="hover:underline">{projectTitle || 'Project'}</a>
+          <ChevronRight className="h-3 w-3" />
+          <span>Graph</span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <span className="font-mono">{stats.files} files</span>
+            <span>·</span>
+            <span className="font-mono">{stats.chunks} chunks</span>
+            <span>·</span>
+            <span className="font-mono">{stats.calls} calls</span>
+            <span>·</span>
+            <span className="font-mono">{stats.imports} imports</span>
+          </div>
+
+          <Select value={viewMode} onValueChange={v => setViewMode(v as ViewMode)}>
+            <SelectTrigger className="h-7 w-28 text-xs">
+              <Layers className="h-3 w-3 mr-1" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="chunks">Chunks</SelectItem>
+              <SelectItem value="files">Files</SelectItem>
+              <SelectItem value="mixed">Mixed</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Button size="sm" variant="outline" onClick={loadGraph} className="h-7 text-xs">
+            <RefreshCw className="h-3 w-3 mr-1" />
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <PageInstructions
+        description="Explore the file and chunk call graph for a project."
+        sections={[
+          { title: 'What this page is for', content: 'This page visualizes import links between files and call links between chunks for the selected CIL project.' },
+          { title: 'How to read this page', content: 'The React Flow canvas shows nodes and edges. The legend explains colors by chunk type. The Inspector panel on the right displays details for the selected node.' },
+          { title: 'How to use this page', content: 'Switch the view mode to files or chunks. Click a node to see its details in the inspector. Pan, zoom, and use the minimap to navigate large graphs.' },
+          { title: 'Important notes', content: 'The graph is only available after Pass 1 and Pass 2 ingestion complete. Empty graphs mean no imports or calls were detected yet.' },
+        ]}
+      />
+
+      {}
+      <div className="flex flex-1 min-h-0">
+        <div className="flex-1">
+          {nodes.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+              <div className="text-center space-y-2">
+                <ZoomIn className="h-10 w-10 mx-auto opacity-20" />
+                <p>No {viewMode === 'files' ? 'files' : 'chunks'} found.</p>
+                <p className="text-xs">Run Pass 1 + Pass 2 ingestion first.</p>
+              </div>
+            </div>
+          ) : (
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onNodeClick={(_evt, node) => setSelectedNode(node)}
+              fitView
+              fitViewOptions={{ padding: 0.15 }}
+              minZoom={0.1}
+              maxZoom={2}
+              proOptions={{ hideAttribution: true }}
+            >
+              <Background color="#E2E8F0" gap={20} size={1} />
+              <Controls />
+              <MiniMap
+                nodeColor={nodeColor}
+                style={{ background: '#F8FAFC', border: '1px solid #E2E8F0' }}
+                pannable
+                zoomable
+              />
+
+              {}
+              <Panel position="bottom-left">
+                <div className="bg-background/90 backdrop-blur border rounded-lg p-2 text-xs space-y-1 shadow-sm">
+                  {Object.entries(CHUNK_TYPE_COLORS).map(([type, color]) => (
+                    <div key={type} className="flex items-center gap-1.5">
+                      <div className="w-3 h-3 rounded-sm shrink-0" style={{ background: color + '44', border: `1.5px solid ${color}` }} />
+                      <span className="text-muted-foreground">{type}</span>
+                    </div>
+                  ))}
+                  {viewMode !== 'chunks' && (
+                    <div className="flex items-center gap-1.5 pt-1 border-t">
+                      <div className="w-3 h-3 rounded-sm shrink-0 bg-slate-900" />
+                      <span className="text-muted-foreground">file</span>
+                    </div>
+                  )}
+                </div>
+              </Panel>
+            </ReactFlow>
+          )}
+        </div>
+
+        {}
+        <div className="w-56 border-l bg-muted/30 shrink-0 overflow-y-auto">
+          <div className="p-2 border-b bg-background">
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Inspector</p>
+          </div>
+          <NodeDetailPanel node={selectedNode} projectId={projectId!} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// CIL[END chunk_id="cilgraphpage_cilgraphpage_1784193942"]