spine-framework 0.3.124 → 0.3.126

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

@@ -0,0 +1,571 @@
+// CIL[BEGIN chunk_id="cilsearchpage_module_header_1784193942" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies and icons for the CIL search page"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provides React hooks, apiFetch, app path hook, UI components, and icons used by the page"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" 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="none" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Sets up React hooks, apiFetch, useAppPath, UI card/button/input/select/label/badge 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, .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 { useState, useRef, useMemo } from 'react'
+import { apiFetch } from '@core/lib/api'
+import { Card, CardContent } from '@core/components/ui/card'
+import { Button } from '@core/components/ui/button'
+import { Badge } from '@core/components/ui/badge'
+import { Input } from '@core/components/ui/input'
+import { Label } from '@core/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@core/components/ui/select'
+import {
+  Search,
+  Zap,
+  FileCode2,
+  ChevronRight,
+  Code2,
+  RefreshCw,
+  AlertTriangle,
+} from 'lucide-react'
+
+
+
+import { PageInstructions } from '../../../components/admin/PageInstructions'
+// CIL[END chunk_id="cilsearchpage_module_header_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_searchresult_1784193942" type="interface" identity="SearchResult" parent="none"]
+// CIL[DOC-MACRO purpose="Define the shape of a search result chunk"]
+// CIL[DOC-RESPONSIBILITY responsibility="Declares the TypeScript interface for chunk data returned by the CIL search API"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="SearchResult type contract" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Describes id, chunk_name, file_path, macro, micro, chunk_type, doc_confidence, similarity, and match_type fields" 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, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/IntegrationsPage.tsx, .framework/functions/_shared/schema-utils.ts, custom/apps/cortex/functions/custom_cil-embeddings.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 SearchResult {
+  id: string
+  chunk_name: string
+  file_path: string
+  macro: string
+  micro?: string
+  chunk_type: string
+  doc_confidence: string
+  similarity: number | null
+  match_type: 'semantic' | 'text'
+}
+
+
+
+// CIL[END chunk_id="cilsearchpage_searchresult_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_chunk_type_colors_1784193942" type="constant" identity="CHUNK_TYPE_COLORS" parent="none"]
+// CIL[DOC-MACRO purpose="Map chunk types to Tailwind badge color classes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Supplies a color palette used by result cards to style chunk-type badges"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[\".framework/src/pages/admin/RolesPage.tsx\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\"custom/apps/portal/pages/ContentPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Record<string, string> color classes" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Maps each chunk type to background, text, and border utility classes for badge rendering" 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/RolesPage.tsx, custom/apps/cortex/functions/custom_cil-embeddings.ts, custom/apps/portal/pages/ContentPage.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 CHUNK_TYPE_COLORS: Record<string, string> = {
+  function:  'bg-indigo-100 text-indigo-700 border-indigo-200',
+  class:     'bg-violet-100 text-violet-700 border-violet-200',
+  interface: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+  type:      'bg-cyan-100 text-cyan-700 border-cyan-200',
+  component: 'bg-amber-100 text-amber-700 border-amber-200',
+  hook:      'bg-pink-100 text-pink-700 border-pink-200',
+  route:     'bg-red-100 text-red-700 border-red-200',
+  config:    'bg-slate-100 text-slate-700 border-slate-200',
+}
+
+// CIL[END chunk_id="cilsearchpage_chunk_type_colors_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_doc_confidence_label_1784193942" type="constant" identity="DOC_CONFIDENCE_LABEL" parent="none"]
+// CIL[DOC-MACRO purpose="Map documentation confidence keys to human labels and badge classes"]
+// CIL[DOC-RESPONSIBILITY responsibility="Supplies badge label and color config for documentation confidence states"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Record of label and className objects" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Maps human_verified, ai_generated, and unverified_legacy to display label and Tailwind className" 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: custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/RolesPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, custom/apps/cortex/functions/custom_cil-embeddings.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"]
+const DOC_CONFIDENCE_LABEL: Record<string, { label: string; className: string }> = {
+  human_verified: { label: 'Verified', className: 'bg-green-100 text-green-700 border-green-200' },
+  ai_generated:   { label: 'AI Docs',  className: 'bg-blue-100 text-blue-700 border-blue-200' },
+  unverified_legacy: { label: 'No Docs', className: 'bg-slate-100 text-slate-500 border-slate-200' },
+}
+
+// CIL[END chunk_id="cilsearchpage_doc_confidence_label_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_similaritybar_1784193942" type="function" identity="SimilarityBar" parent="none"]
+// CIL[DOC-MACRO purpose="Render a percentage bar for a similarity score"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display numeric similarity as a small indigo progress bar and percentage text"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.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="JSX.Element | null" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders null for null scores, otherwise a rounded percentage with an indigo progress bar" 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: custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.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"]
+function SimilarityBar({ score }: { score: number | null }) {
+  if (score === null) return null
+  const pct = Math.round(score * 100)
+  return (
+    <div className="flex items-center gap-1.5 shrink-0">
+      <div className="w-16 h-1.5 bg-muted rounded-full overflow-hidden">
+        <div
+          className="h-full bg-indigo-500 rounded-full"
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      <span className="text-xs text-muted-foreground tabular-nums">{pct}%</span>
+    </div>
+  )
+}
+
+// CIL[END chunk_id="cilsearchpage_similaritybar_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_resultcard_1784193942" type="function" identity="ResultCard" parent="none"]
+// CIL[DOC-MACRO purpose="Render a single search result as a link card"]
+// CIL[DOC-RESPONSIBILITY responsibility="Display chunk name, type badge, doc confidence badge, file path, macro snippet, and similarity bar"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Uses CHUNK_TYPE_COLORS and DOC_CONFIDENCE_LABEL to style badges, links to chunk detail via appPath, and renders SimilarityBar" 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 ResultCard({ result, projectId }: { result: SearchResult; projectId: string }) {
+  const appPath = (path: string) => '/spine-framework/admin' + (path.startsWith('/') ? path : '/' + path)
+  const typeClass = CHUNK_TYPE_COLORS[result.chunk_type] || CHUNK_TYPE_COLORS.config
+  const docCfg = DOC_CONFIDENCE_LABEL[result.doc_confidence] || DOC_CONFIDENCE_LABEL.unverified_legacy
+
+  return (
+    <a
+      href={appPath(`/cil/${projectId}/chunks/${result.id}`)}
+      className="block group"
+    >
+      <Card className="hover:shadow-md transition-shadow cursor-pointer group-hover:border-indigo-200">
+        <CardContent className="py-3 px-4">
+          <div className="flex items-start gap-3">
+            <Code2 className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+            <div className="flex-1 min-w-0 space-y-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="font-mono font-semibold text-sm group-hover:text-indigo-600 transition-colors">
+                  {result.chunk_name}
+                </span>
+                <span className={`text-xs px-1.5 py-0.5 rounded border ${typeClass}`}>
+                  {result.chunk_type}
+                </span>
+                <span className={`text-xs px-1.5 py-0.5 rounded border ${docCfg.className}`}>
+                  {docCfg.label}
+                </span>
+                {result.match_type === 'semantic' && (
+                  <span className="flex items-center gap-0.5 text-xs text-indigo-500">
+                    <Zap className="h-3 w-3" /> semantic
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground font-mono">
+                <FileCode2 className="h-3 w-3 shrink-0" />
+                <span className="truncate">{result.file_path}</span>
+              </div>
+              {result.macro && (
+                <p className="text-xs text-muted-foreground line-clamp-2">{result.macro}</p>
+              )}
+            </div>
+            <SimilarityBar score={result.similarity} />
+          </div>
+        </CardContent>
+      </Card>
+    </a>
+  )
+}
+
+
+
+// CIL[END chunk_id="cilsearchpage_resultcard_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_sortby_1784193942" type="type" identity="SortBy" parent="none"]
+// CIL[DOC-MACRO purpose="Union type for result sort keys"]
+// CIL[DOC-RESPONSIBILITY responsibility="Defines the allowed sort column identifiers for the search results"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="'relevance' | 'name' | 'file' | 'doc_confidence'" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Constrains sortBy state to four predefined string literals" 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 SortBy = 'relevance' | 'name' | 'file' | 'doc_confidence'
+// CIL[END chunk_id="cilsearchpage_sortby_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_chunktypefilter_1784193942" type="type" identity="ChunkTypeFilter" parent="none"]
+// CIL[DOC-MACRO purpose="Union type for chunk type filter values"]
+// CIL[DOC-RESPONSIBILITY responsibility="Defines the allowed chunk type filter options including 'all'"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="'all' | chunk type literals" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Constrains chunkTypeFilter state to 'all' or one of the supported chunk type strings" 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 ChunkTypeFilter = 'all' | 'function' | 'class' | 'interface' | 'type' | 'component' | 'hook' | 'route' | 'config'
+// CIL[END chunk_id="cilsearchpage_chunktypefilter_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_docconfidencefilter_1784193942" type="type" identity="DocConfidenceFilter" parent="none"]
+// CIL[DOC-MACRO purpose="Union type for documentation confidence filter values"]
+// CIL[DOC-RESPONSIBILITY responsibility="Defines the allowed doc confidence filter options"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="'all' | 'human_verified' | 'ai_generated' | 'unverified_legacy'" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Constrains docConfidenceFilter state to 'all' or one of the confidence level strings" 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 DocConfidenceFilter = 'all' | 'human_verified' | 'ai_generated' | 'unverified_legacy'
+
+// CIL[END chunk_id="cilsearchpage_docconfidencefilter_1784193942"]
+// CIL[BEGIN chunk_id="cilsearchpage_cilsearchpage_1784193942" type="component" identity="CILSearchPage" parent="none"]
+// CIL[DOC-MACRO purpose="Main page component for searching CIL chunks"]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide a UI for query input, search mode/limit/project filters, result filtering/sorting, and rendering results"]
+// CIL[DOC-CONTEXT module="cortex:cil-search" layer="presentation" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX.Element" errors="Displays error message string" side_effects="Calls apiFetch on search, sets React state"]
+// CIL[DOC-MICRO logic_summary="Manages query, projectId, mode, limit, chunkTypeFilter, docConfidenceFilter, and sortBy state; calls /api/cil-graph search endpoint; filters and sorts displayResults; renders controls, error, empty state, and ResultCard list" 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 CILSearchPage() {
+  const appPath = (path: string) => '/spine-framework/admin' + (path.startsWith('/') ? path : '/' + path)
+  const [query, setQuery] = useState('')
+  const [projectId, setProjectId] = useState('')
+  const [mode, setMode] = useState<'hybrid' | 'semantic' | 'text'>('hybrid')
+  const [limit, setLimit] = useState('20')
+  const [chunkTypeFilter, setChunkTypeFilter] = useState<ChunkTypeFilter>('all')
+  const [docConfidenceFilter, setDocConfidenceFilter] = useState<DocConfidenceFilter>('all')
+  const [sortBy, setSortBy] = useState<SortBy>('relevance')
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searched, setSearched] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleSearch = async () => {
+    if (!query.trim()) return
+    setLoading(true)
+    setError(null)
+    setSearched(true)
+
+    try {
+      const params = new URLSearchParams({
+        action: 'search',
+        q: query.trim(),
+        mode,
+        limit,
+      })
+      if (projectId) params.set('project_id', projectId)
+
+      const res = await apiFetch(`/api/cil-graph?${params.toString()}`)
+      const data = await res.json()
+      setResults(data?.results || data?.data?.results || [])
+    } catch (err) {
+      setError(String(err))
+      setResults([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  
+  const displayResults = useMemo(() => {
+    let r = [...results]
+    if (chunkTypeFilter !== 'all') r = r.filter(x => x.chunk_type === chunkTypeFilter)
+    if (docConfidenceFilter !== 'all') r = r.filter(x => x.doc_confidence === docConfidenceFilter)
+    if (sortBy === 'name') r.sort((a, b) => a.chunk_name.localeCompare(b.chunk_name))
+    else if (sortBy === 'file') r.sort((a, b) => a.file_path.localeCompare(b.file_path))
+    else if (sortBy === 'doc_confidence') {
+      const order: Record<string, number> = { human_verified: 0, ai_generated: 1, unverified_legacy: 2 }
+      r.sort((a, b) => (order[a.doc_confidence] ?? 3) - (order[b.doc_confidence] ?? 3))
+    }
+    
+    return r
+  }, [results, chunkTypeFilter, docConfidenceFilter, sortBy])
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') handleSearch()
+  }
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl">
+      {}
+      <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>Search</span>
+      </div>
+
+      <div>
+        <h1 className="text-2xl font-bold flex items-center gap-2">
+          <Search className="h-6 w-6 text-indigo-500" />
+          Chunk Search
+        </h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Semantic + text search across all indexed code chunks
+        </p>
+      </div>
+
+      <PageInstructions
+        description="Search the Code Intelligence Layer index by meaning or text."
+        sections={[
+          { title: 'What this page is for', content: 'This page lets you find indexed code chunks across projects using hybrid, semantic, or text search.' },
+          { title: 'How to use this page', content: 'Enter a query, choose a mode, and click the search button or press Enter. Use the Project ID, Type, Docs, and Sort filters to narrow results.' },
+          { title: 'How to read the results', content: 'Each result shows the chunk name, file, type, documentation confidence, and a relevance score. Semantic mode ranks by vector similarity; text mode matches literal terms.' },
+          { title: 'Important notes', content: 'Hybrid mode combines vector and text ranking. Filters can exclude results, and the count line indicates how many of the total results are displayed after filtering.' },
+        ]}
+      />
+
+      {}
+      <div className="space-y-3">
+        <div className="flex gap-2">
+          <Input
+            ref={inputRef}
+            placeholder="Describe what you're looking for, e.g. 'authenticate user and check roles'"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="flex-1"
+            autoFocus
+          />
+          <Button onClick={handleSearch} disabled={loading || !query.trim()}>
+            {loading ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <Search className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+
+        {}
+        <div className="flex items-center gap-4 flex-wrap">
+          <div className="flex items-center gap-2">
+            <Label className="text-xs text-muted-foreground">Mode</Label>
+            <Select value={mode} onValueChange={v => setMode(v as typeof mode)}>
+              <SelectTrigger className="h-7 w-28 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="hybrid">Hybrid</SelectItem>
+                <SelectItem value="semantic">Semantic</SelectItem>
+                <SelectItem value="text">Text</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="text-xs text-muted-foreground">Project ID</Label>
+            <Input
+              placeholder="(all projects)"
+              value={projectId}
+              onChange={e => setProjectId(e.target.value)}
+              className="h-7 w-48 text-xs font-mono"
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="text-xs text-muted-foreground">Limit</Label>
+            <Select value={limit} onValueChange={setLimit}>
+              <SelectTrigger className="h-7 w-16 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="20">20</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {}
+        <div className="flex items-center gap-4 flex-wrap">
+          <div className="flex items-center gap-2">
+            <Label className="text-xs text-muted-foreground">Type</Label>
+            <Select value={chunkTypeFilter} onValueChange={v => setChunkTypeFilter(v as ChunkTypeFilter)}>
+              <SelectTrigger className="h-7 w-32 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All types</SelectItem>
+                <SelectItem value="function">Function</SelectItem>
+                <SelectItem value="class">Class</SelectItem>
+                <SelectItem value="interface">Interface</SelectItem>
+                <SelectItem value="type">Type</SelectItem>
+                <SelectItem value="component">Component</SelectItem>
+                <SelectItem value="hook">Hook</SelectItem>
+                <SelectItem value="route">Route</SelectItem>
+                <SelectItem value="config">Config</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="text-xs text-muted-foreground">Docs</Label>
+            <Select value={docConfidenceFilter} onValueChange={v => setDocConfidenceFilter(v as DocConfidenceFilter)}>
+              <SelectTrigger className="h-7 w-32 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All docs</SelectItem>
+                <SelectItem value="human_verified">Verified</SelectItem>
+                <SelectItem value="ai_generated">AI Docs</SelectItem>
+                <SelectItem value="unverified_legacy">No Docs</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Label className="text-xs text-muted-foreground">Sort</Label>
+            <Select value={sortBy} onValueChange={v => setSortBy(v as SortBy)}>
+              <SelectTrigger className="h-7 w-32 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="relevance">Relevance</SelectItem>
+                <SelectItem value="name">Name A–Z</SelectItem>
+                <SelectItem value="file">File A–Z</SelectItem>
+                <SelectItem value="doc_confidence">Doc quality</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {(chunkTypeFilter !== 'all' || docConfidenceFilter !== 'all' || sortBy !== 'relevance') && (
+            <button
+              className="text-xs text-muted-foreground hover:text-foreground underline underline-offset-2"
+              onClick={() => { setChunkTypeFilter('all'); setDocConfidenceFilter('all'); setSortBy('relevance') }}
+            >
+              Reset filters
+            </button>
+          )}
+        </div>
+      </div>
+
+      {}
+      {error && (
+        <div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-lg border border-red-200">
+          <AlertTriangle className="h-4 w-4 shrink-0" />
+          {error}
+        </div>
+      )}
+
+      {searched && !loading && !error && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <p className="text-sm text-muted-foreground">
+              {displayResults.length === 0
+                ? (results.length > 0 ? `0 of ${results.length} results match filters` : 'No results found')
+                : `${displayResults.length}${displayResults.length !== results.length ? ` of ${results.length}` : ''} result${displayResults.length !== 1 ? 's' : ''}`}
+              {results.length > 0 && mode !== 'text' && (
+                <span className="ml-2 text-xs text-indigo-500 inline-flex items-center gap-0.5">
+                  <Zap className="h-3 w-3" /> semantic ranking active
+                </span>
+              )}
+            </p>
+            {results.length > 0 && (
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-6 text-xs"
+                onClick={() => { setResults([]); setSearched(false); setQuery(''); inputRef.current?.focus() }}
+              >
+                Clear
+              </Button>
+            )}
+          </div>
+
+          {displayResults.length === 0 && (
+            <div className="text-center py-12 text-muted-foreground space-y-2">
+              <Search className="h-10 w-10 mx-auto opacity-20" />
+              <p className="text-sm">No chunks match your query.</p>
+              {mode === 'semantic' && (
+                <p className="text-xs">Try switching to Hybrid mode to also search chunk names.</p>
+              )}
+              {mode !== 'semantic' && (
+                <p className="text-xs">Try a different query or run Pass 3 to generate embeddings first.</p>
+              )}
+            </div>
+          )}
+
+          {displayResults.map(result => (
+            <ResultCard key={result.id} result={result} projectId={projectId || result.id} />
+          ))}
+        </div>
+      )}
+
+      {!searched && (
+        <div className="text-center py-16 text-muted-foreground space-y-3">
+          <Search className="h-12 w-12 mx-auto opacity-15" />
+          <p className="text-sm">Search across all code chunks by purpose, inputs, or behaviour</p>
+          <div className="flex flex-wrap gap-2 justify-center">
+            {[
+              'handle authentication middleware',
+              'send email notification',
+              'validate JWT token',
+              'write embeddings to database',
+              'resolve type ID by slug',
+            ].map(suggestion => (
+              <button
+                key={suggestion}
+                className="text-xs px-3 py-1.5 rounded-full border hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+                onClick={() => { setQuery(suggestion); setTimeout(handleSearch, 10) }}
+              >
+                {suggestion}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// CIL[END chunk_id="cilsearchpage_cilsearchpage_1784193942"]