spine-framework 0.3.124 → 0.3.126

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

@@ -0,0 +1,731 @@
+
+// CIL[BEGIN chunk_id="flexiblepipelinepage_module_header_1784191730" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies for FlexiblePipelinePage.tsx"]
+// CIL[DOC-RESPONSIBILITY responsibility="Set up module imports and external references"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/principal.ts\",\".framework/functions/_shared/schema-utils.ts\",\"custom/apps/portal/pages/ContentPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="module imports" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports React hooks, router, apiFetch, UI components, and 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, .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/principal.ts, .framework/functions/_shared/schema-utils.ts, custom/apps/portal/pages/ContentPage.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 { 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 { Alert, AlertDescription } from '@core/components/ui/alert'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@core/components/ui/tabs'
+import {
+  CheckCircle2,
+  RefreshCw,
+  Play,
+  AlertTriangle,
+  TrendingUp,
+  GitBranch,
+  Clock,
+  FileText,
+  Zap,
+  Sparkles,
+  Info,
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FileCode2,
+} from 'lucide-react'
+
+
+import { PageInstructions } from '../../../components/admin/PageInstructions'
+// CIL[END chunk_id="flexiblepipelinepage_module_header_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_filepipelinestate_1784191730" type="interface" identity="FilePipelineState" parent="none"]
+// CIL[DOC-MACRO purpose="Define the FilePipelineState data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for file pipeline state"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" 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="FilePipelineState type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares file path, status, completed/ready/blocked steps, and progress 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 FilePipelineState {
+  file_path: string
+  current_status: string
+  completed_steps: number[]
+  ready_for: number[]
+  blocked_by: number[]
+  progress_percentage: number
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_filepipelinestate_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_pipelinestatus_1784191730" type="interface" identity="PipelineStatus" parent="none"]
+// CIL[DOC-MACRO purpose="Define the PipelineStatus data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for overall pipeline status"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" 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="PipelineStatus type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares project id, files array, step summary, and overall progress" 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 PipelineStatus {
+  project_id: string
+  files: FilePipelineState[]
+  step_summary: Record<number, { completed: number; pending: number; in_progress: number }>
+  overall_progress: number
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_pipelinestatus_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_filesreadyforstep_1784191730" type="interface" identity="FilesReadyForStep" parent="none"]
+// CIL[DOC-MACRO purpose="Define the FilesReadyForStep data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for step-ready files"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" 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="FilesReadyForStep type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares step metadata and an array of file readiness records" 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 FilesReadyForStep {
+  ok: boolean
+  project_id: string
+  step: number
+  step_name: string
+  prerequisites: number[]
+  target_status: string
+  file_count: number
+  files: Array<{
+    file_path: string
+    status: string
+    chunk_count: number
+    completed_steps: number[]
+    ready_for: number[]
+    blocked_by: number[]
+    can_proceed: boolean
+    blocking_reasons: string[]
+  }>
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_filesreadyforstep_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_bottleneckanalysis_1784191730" type="interface" identity="BottleneckAnalysis" parent="none"]
+// CIL[DOC-MACRO purpose="Define the BottleneckAnalysis data shape"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a TypeScript type contract for bottleneck analysis"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" 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="BottleneckAnalysis type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Declares bottlenecks, recommendations, optimal processing order, and summary" 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 BottleneckAnalysis {
+  project_id: string
+  bottlenecks: Array<{
+    step: number
+    step_name: string
+    ready: number
+    blocked: number
+    blocking_reasons: string[]
+  }>
+  recommendations: Array<{
+    step: number
+    action: string
+    priority: 'high' | 'medium' | 'low'
+  }>
+  optimal_processing_order: Array<{
+    file_path: string
+    suggested_next_step: number | null
+  }>
+  summary: {
+    total_files: number
+    bottleneck_count: number
+    ready_for_processing: number
+  }
+}
+
+
+// CIL[END chunk_id="flexiblepipelinepage_bottleneckanalysis_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_step_labels_1784191730" type="constant" identity="STEP_LABELS" parent="none"]
+// CIL[DOC-MACRO purpose="Map pipeline step numbers to labels"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide human-readable labels for pipeline steps"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Record<number,string> step labels" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines a constant mapping step numbers to display labels" 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 STEP_LABELS: Record<number, string> = {
+  4: 'Chunk',
+  5: 'First-Pass Docs',
+  6: 'Embed (1st Pass)',
+  8: 'Second-Pass Docs',
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_step_labels_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_step_colors_1784191730" type="constant" identity="STEP_COLORS" parent="none"]
+// CIL[DOC-MACRO purpose="Map pipeline step numbers to color classes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide Tailwind color classes for pipeline steps"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Record<number,string> Tailwind classes" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines a constant mapping step numbers to Tailwind color classes" 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 STEP_COLORS: Record<number, string> = {
+  4: 'bg-blue-100 text-blue-700',
+  5: 'bg-purple-100 text-purple-700',
+  6: 'bg-green-100 text-green-700',
+  8: 'bg-violet-100 text-violet-700',
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_step_colors_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_priority_colors_1784191730" type="constant" identity="PRIORITY_COLORS" parent="none"]
+// CIL[DOC-MACRO purpose="Map priority levels to color classes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide Tailwind color classes for priority levels"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Record<string,string> Tailwind classes" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines a constant mapping priority levels to Tailwind color classes" 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 PRIORITY_COLORS: Record<string, string> = {
+  high: 'bg-red-100 text-red-700',
+  medium: 'bg-yellow-100 text-yellow-700',
+  low: 'bg-gray-100 text-gray-700',
+}
+
+
+// CIL[END chunk_id="flexiblepipelinepage_priority_colors_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_fileprogresscard_1784191730" type="function" identity="FileProgressCard" parent="none"]
+// CIL[DOC-MACRO purpose="Render a file progress card"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display file status, progress, and the next actionable step"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX element" errors="none" side_effects="calls onProcess callback when user clicks process"]
+// CIL[DOC-MICRO logic_summary="Renders file badges, a progress bar, and a process button for the next step" 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 FileProgressCard({ file, onProcess }: { 
+  file: FilePipelineState
+  onProcess: (filePath: string, step: number) => void 
+}) {
+  const nextStep = file.ready_for[0]
+  const canProceed = nextStep !== undefined
+
+  return (
+    <Card className="mb-2">
+      <CardContent className="p-4">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <FileText className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium font-mono">{file.file_path}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="outline" className="text-xs">
+              {file.current_status}
+            </Badge>
+            <Badge className="text-xs bg-blue-100 text-blue-700">
+              {Math.round(file.progress_percentage)}%
+            </Badge>
+          </div>
+        </div>
+
+        <Progress value={file.progress_percentage} className="mb-3 h-2" />
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span>Completed: {file.completed_steps.join(', ') || 'None'}</span>
+            {file.ready_for.length > 0 && (
+              <span>• Ready for: {file.ready_for.join(', ')}</span>
+            )}
+            {file.blocked_by.length > 0 && (
+              <span>• Blocked by: {file.blocked_by.join(', ')}</span>
+            )}
+          </div>
+          
+          {canProceed && (
+            <Button 
+              size="sm" 
+              onClick={() => onProcess(file.file_path, nextStep)}
+              className="h-6 text-xs"
+            >
+              <Play className="h-3 w-3 mr-1" />
+              {STEP_LABELS[nextStep]}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_fileprogresscard_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_stepsummarycard_1784191730" type="function" identity="StepSummaryCard" parent="none"]
+// CIL[DOC-MACRO purpose="Render a step summary card"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display step completion metrics and a batch process button"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX element" errors="none" side_effects="calls onProcess callback when user clicks process"]
+// CIL[DOC-MICRO logic_summary="Renders step icon, label, progress bar, and a button to process pending files" 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 StepSummaryCard({ step, summary, onProcess }: {
+  step: number
+  summary: { completed: number; pending: number; in_progress: number }
+  onProcess: (step: number) => void
+}) {
+  const total = summary.completed + summary.pending + summary.in_progress
+  const progress = total > 0 ? (summary.completed / total) * 100 : 0
+
+  return (
+    <Card className="mb-3">
+      <CardContent className="p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <div className={`h-8 w-8 rounded-full flex items-center justify-center text-xs font-bold ${STEP_COLORS[step]}`}>
+              {step}
+            </div>
+            <div>
+              <h4 className="text-sm font-medium">{STEP_LABELS[step]}</h4>
+              <p className="text-xs text-muted-foreground">
+                {summary.completed} completed, {summary.pending} ready, {summary.in_progress} in progress
+              </p>
+            </div>
+          </div>
+          <Badge className={STEP_COLORS[step]}>
+            {Math.round(progress)}%
+          </Badge>
+        </div>
+
+        <Progress value={progress} className="mb-3 h-2" />
+
+        {summary.pending > 0 && (
+          <Button 
+            size="sm" 
+            onClick={() => onProcess(step)}
+            className="w-full"
+            variant="outline"
+          >
+            <Play className="h-3 w-3 mr-1" />
+            Process {summary.pending} ready files
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_stepsummarycard_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_bottleneckalert_1784191730" type="function" identity="BottleneckAlert" parent="none"]
+// CIL[DOC-MACRO purpose="Render a bottleneck alert"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a bottleneck with blocking reasons and priority"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders an alert with step name, ready/blocked counts, blocking reasons, and a high-priority badge" 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 BottleneckAlert({ bottleneck }: { bottleneck: BottleneckAnalysis['bottlenecks'][0] }) {
+  return (
+    <Alert className="mb-3">
+      <AlertTriangle className="h-4 w-4" />
+      <AlertDescription>
+        <div className="flex items-center justify-between">
+          <div>
+            <span className="font-medium">{bottleneck.step_name}</span>
+            <span className="text-sm text-muted-foreground ml-2">
+              {bottleneck.ready} ready, {bottleneck.blocked} blocked
+            </span>
+          </div>
+          <Badge className={PRIORITY_COLORS.high}>
+            High Priority
+          </Badge>
+        </div>
+        {bottleneck.blocking_reasons.length > 0 && (
+          <div className="mt-2 text-xs text-muted-foreground">
+            <strong>Blocking issues:</strong>
+            <ul className="list-disc list-inside mt-1">
+              {bottleneck.blocking_reasons.map((reason, i) => (
+                <li key={i}>{reason}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+// CIL[END chunk_id="flexiblepipelinepage_bottleneckalert_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_recommendationcard_1784191730" type="function" identity="RecommendationCard" parent="none"]
+// CIL[DOC-MACRO purpose="Render a recommendation card"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display a pipeline recommendation with its priority"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders a recommendation with step, action text, and a priority badge" 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 RecommendationCard({ recommendation }: { recommendation: BottleneckAnalysis['recommendations'][0] }) {
+  return (
+    <Card className="mb-2">
+      <CardContent className="p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm">Step {recommendation.step}</span>
+            <span className="text-sm text-muted-foreground">{recommendation.action}</span>
+          </div>
+          <Badge className={PRIORITY_COLORS[recommendation.priority]}>
+            {recommendation.priority}
+          </Badge>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+
+// CIL[END chunk_id="flexiblepipelinepage_recommendationcard_1784191730"]
+// CIL[BEGIN chunk_id="flexiblepipelinepage_flexiblepipelinepage_1784191730" type="function" identity="FlexiblePipelinePage" parent="none"]
+// CIL[DOC-MACRO purpose="Render the flexible pipeline dashboard"]
+// CIL[DOC-RESPONSIBILITY responsibility="Load pipeline status, ready files, and bottlenecks; render tabbed UI"]
+// CIL[DOC-CONTEXT module="cortex.pages.cil" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX element" errors="none" side_effects="fetches data via apiFetch, registers React effects, logs API errors"]
+// CIL[DOC-MICRO logic_summary="Loads pipeline status, per-step ready files, and bottlenecks; renders overview, files, steps, and bottlenecks tabs" 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 FlexiblePipelinePage() {
+  const { id: projectId } = useParams<{ id: string }>()
+  
+  const [pipelineStatus, setPipelineStatus] = useState<PipelineStatus | null>(null)
+  const [readyFiles, setReadyFiles] = useState<Record<number, FilesReadyForStep>>({})
+  const [bottlenecks, setBottlenecks] = useState<BottleneckAnalysis | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState('overview')
+
+  const loadPipelineStatus = useCallback(async () => {
+    if (!projectId) return
+    
+    try {
+      const response = await apiFetch(`/api/cil-pipeline?action=get_pipeline_status`, {
+        method: 'POST',
+        body: JSON.stringify({ project_id: projectId })
+      })
+      const data = await response.json()
+      setPipelineStatus(data)
+    } catch (error) {
+      console.error('Failed to load pipeline status:', error)
+    }
+  }, [projectId])
+
+  const loadReadyFiles = useCallback(async () => {
+    if (!projectId) return
+    
+    const steps = [4, 5, 6, 8]
+    const results: Record<number, FilesReadyForStep> = {}
+    
+    for (const step of steps) {
+      try {
+        const response = await apiFetch(`/api/cil-pipeline?action=get_files_ready_for_step`, {
+          method: 'POST',
+          body: JSON.stringify({ project_id: projectId, step, include_blocking_info: true })
+        })
+        const data = await response.json()
+        results[step] = data
+      } catch (error) {
+        console.error(`Failed to load ready files for step ${step}:`, error)
+      }
+    }
+    
+    setReadyFiles(results)
+  }, [projectId])
+
+  const loadBottlenecks = useCallback(async () => {
+    if (!projectId) return
+    
+    try {
+      const response = await apiFetch(`/api/cil-pipeline?action=get_pipeline_bottlenecks`, {
+        method: 'POST',
+        body: JSON.stringify({ project_id: projectId })
+      })
+      const data = await response.json()
+      setBottlenecks(data)
+    } catch (error) {
+      console.error('Failed to load bottlenecks:', error)
+    }
+  }, [projectId])
+
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true)
+      await Promise.all([
+        loadPipelineStatus(),
+        loadReadyFiles(),
+        loadBottlenecks()
+      ])
+      setLoading(false)
+    }
+    
+    loadData()
+  }, [loadPipelineStatus, loadReadyFiles, loadBottlenecks])
+
+  const handleProcessFile = useCallback(async (filePath: string, step: number) => {
+    console.log(`Processing ${filePath} for step ${step}`)
+
+
+  }, [])
+
+  const handleProcessStep = useCallback(async (step: number) => {
+    const files = readyFiles[step]?.files || []
+    console.log(`Processing ${files.length} files for step ${step}`)
+
+  }, [readyFiles])
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-32 w-full" />
+      </div>
+    )
+  }
+
+  if (!pipelineStatus) {
+    return (
+      <Alert>
+        <AlertTriangle className="h-4 w-4" />
+        <AlertDescription>
+          Failed to load pipeline status. Please try refreshing the page.
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Flexible Pipeline</h1>
+          <p className="text-muted-foreground">
+            True iterative processing with dependency-aware file selection
+          </p>
+        </div>
+        <Button onClick={() => window.location.reload()} variant="outline">
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      <PageInstructions
+        description="View the flexible pipeline status and identify bottlenecks."
+        sections={[
+          { title: 'What this page is for', content: 'This page shows the dependency-aware file processing pipeline for the selected CIL project, including overall progress and per-step status.' },
+          { title: 'How to read this page', content: 'The Overall Progress card shows the completion percentage and counts for total, complete, and in-progress files. Tabs provide Overview, Files, Steps, and Bottlenecks views.' },
+          { title: 'How to use this page', content: 'Switch tabs to inspect step summaries, individual file progress, and which files are ready for the next step. Use the Process buttons to advance selected files.' },
+          { title: 'Important notes', content: 'Bottlenecks are files that cannot proceed until another step completes. Refresh the page to see live progress during ingestion.' },
+        ]}
+      />
+
+      
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5" />
+            Overall Progress
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Pipeline Completion</span>
+              <Badge className="bg-green-100 text-green-700">
+                {Math.round(pipelineStatus.overall_progress)}%
+              </Badge>
+            </div>
+            <Progress value={pipelineStatus.overall_progress} className="h-3" />
+            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+              <span>{pipelineStatus.files.length} files total</span>
+              <span>•</span>
+              <span>{pipelineStatus.files.filter(f => f.progress_percentage === 100).length} complete</span>
+              <span>•</span>
+              <span>{pipelineStatus.files.filter(f => f.progress_percentage < 100).length} in progress</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="files">Files</TabsTrigger>
+          <TabsTrigger value="steps">Steps</TabsTrigger>
+          <TabsTrigger value="bottlenecks">Bottlenecks</TabsTrigger>
+        </TabsList>
+
+        
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {Object.entries(pipelineStatus.step_summary).map(([step, summary]) => (
+              <StepSummaryCard
+                key={step}
+                step={parseInt(step)}
+                summary={summary}
+                onProcess={handleProcessStep}
+              />
+            ))}
+          </div>
+        </TabsContent>
+
+        
+        <TabsContent value="files" className="space-y-4">
+          <div className="space-y-2">
+            {pipelineStatus.files.map((file) => (
+              <FileProgressCard
+                key={file.file_path}
+                file={file}
+                onProcess={handleProcessFile}
+              />
+            ))}
+          </div>
+        </TabsContent>
+
+        
+        <TabsContent value="steps" className="space-y-4">
+          {Object.entries(readyFiles).map(([step, data]) => (
+            <Card key={step}>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs font-bold ${STEP_COLORS[parseInt(step)]}`}>
+                    {step}
+                  </div>
+                  {STEP_LABELS[parseInt(step)]}
+                  <Badge variant="outline">
+                    {data.file_count} files ready
+                  </Badge>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {data.files.map((file) => (
+                    <div key={file.file_path} className="flex items-center justify-between p-2 border rounded">
+                      <div className="flex items-center gap-2">
+                        <FileText className="h-4 w-4 text-muted-foreground" />
+                        <span className="text-sm font-mono">{file.file_path}</span>
+                        {file.can_proceed ? (
+                          <Badge className="bg-green-100 text-green-700">Ready</Badge>
+                        ) : (
+                          <Badge variant="outline">Blocked</Badge>
+                        )}
+                      </div>
+                      <Button
+                        size="sm"
+                        onClick={() => handleProcessFile(file.file_path, parseInt(step))}
+                        disabled={!file.can_proceed}
+                        className="h-6 text-xs"
+                      >
+                        <Play className="h-3 w-3 mr-1" />
+                        Process
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </TabsContent>
+
+        
+        <TabsContent value="bottlenecks" className="space-y-4">
+          {bottlenecks?.bottlenecks.map((bottleneck) => (
+            <BottleneckAlert key={bottleneck.step} bottleneck={bottleneck} />
+          ))}
+          
+          {bottlenecks?.recommendations && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <GitBranch className="h-5 w-5" />
+                  Recommendations
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {bottlenecks.recommendations.map((rec, i) => (
+                    <RecommendationCard key={i} recommendation={rec} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+// CIL[END chunk_id="flexiblepipelinepage_flexiblepipelinepage_1784191730"]