spine-framework 0.3.124 → 0.3.126

package/.framework/src/pages/admin/IntegratedDashboard.tsx

@@ -1,13 +1,20 @@
-/**
- * @module src/pages/admin/IntegratedDashboard
- * @audience installer
- * @layer frontend-page
- * @stability testing
- *
- * A dashboard page that properly integrates with the Spine admin layout.
- * Uses the existing sidebar and content structure.
- */
 
+
+// CIL[BEGIN chunk_id="integrateddashboard_module_header_1783668265" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies for IntegratedDashboard component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Import React hooks and comprehensive UI components"]
+// CIL[DOC-CONTEXT module="IntegratedDashboard" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Imported modules" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports React state management and extensive UI component library" 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: .framework/src/components/ui/dialog.tsx, .framework/src/components/ui/table-primitives.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, 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 { useState } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card'
 import { Button } from '../../components/ui/button'
@@ -60,7 +67,21 @@ import {
   Calendar,
   Clock
 } from 'lucide-react'
-
+// CIL[END chunk_id="integrateddashboard_module_header_1783668265"]
+// CIL[BEGIN chunk_id="integrateddashboard_function_integrateddashboard_1783668265" type="function" identity="IntegratedDashboard" parent="none"]
+// CIL[DOC-MACRO purpose="Main IntegratedDashboard component implementation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render comprehensive admin dashboard with stats, activity, and settings"]
+// CIL[DOC-CONTEXT module="IntegratedDashboard" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React component" errors="none" side_effects="State management"]
+// CIL[DOC-MICRO logic_summary="Creates full-featured dashboard with metrics cards, activity feed, and tabbed content" 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/components/ui/dialog.tsx, .framework/src/components/ui/table-primitives.tsx, custom/apps/portal/pages/ContentPage.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"]
 export function IntegratedDashboard() {
   const [selectedTab, setSelectedTab] = useState('overview')
   const [searchQuery, setSearchQuery] = useState('')
@@ -68,7 +89,6 @@ export function IntegratedDashboard() {
 
   return (
     <div className="flex-1 space-y-6">
-      {/* Page Header */}
       <div className="flex items-center justify-between">
         <div>
           <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
@@ -88,7 +108,6 @@ export function IntegratedDashboard() {
         </div>
       </div>
 
-      {/* Search and Filter Bar */}
       <Card>
         <CardContent className="pt-6">
           <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
@@ -115,7 +134,6 @@ export function IntegratedDashboard() {
         </CardContent>
       </Card>
 
-      {/* Stats Cards */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <Card className="relative overflow-hidden">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -178,7 +196,6 @@ export function IntegratedDashboard() {
         </Card>
       </div>
 
-      {/* Main Content Tabs */}
       <Tabs value={selectedTab} onValueChange={setSelectedTab} className="space-y-4">
         <TabsList className="grid w-full grid-cols-4">
           <TabsTrigger value="overview">Overview</TabsTrigger>
@@ -189,7 +206,6 @@ export function IntegratedDashboard() {
         
         <TabsContent value="overview" className="space-y-4">
           <div className="grid gap-6 lg:grid-cols-3">
-            {/* Recent Activity */}
             <Card className="lg:col-span-2">
               <CardHeader>
                 <CardTitle>Recent Activity</CardTitle>
@@ -235,7 +251,6 @@ export function IntegratedDashboard() {
               </CardContent>
             </Card>
             
-            {/* Quick Actions */}
             <Card>
               <CardHeader>
                 <CardTitle>Quick Actions</CardTitle>
@@ -400,3 +415,4 @@ export function IntegratedDashboard() {
     </div>
   )
 }
+// CIL[END chunk_id="integrateddashboard_function_integrateddashboard_1783668265"]

package/.framework/src/pages/admin/IntegrationDetailPage.tsx

@@ -1,6 +1,22 @@
-/**
- * @module src/pages/admin/IntegrationDetailPage
- */
+
+
+
+
+// CIL[BEGIN chunk_id="integrationdetailpage_module_header_1783668265" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies for IntegrationDetailPage component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Import React hooks, routing, API hooks, and UI components"]
+// CIL[DOC-CONTEXT module="IntegrationDetailPage" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Imported modules" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports React state management, routing, API hooks, UI components" 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: .framework/src/components/ui/dialog.tsx, .framework/src/components/ui/table-primitives.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, 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 { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { apiFetch } from '../../lib/api'
@@ -15,26 +31,55 @@ import { Skeleton } from '../../components/ui/skeleton'
 import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert'
 import { Modal } from '../../components/ui/Modal'
 import { Badge } from '../../components/ui/badge'
-import { ArrowLeft, Pencil, Trash2, CheckCircle, XCircle, AlertTriangle, AlertCircle } from 'lucide-react'
-import { formatDateTime } from '../../lib/utils'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/ui/collapsible'
+import { ArrowLeft, Pencil, Trash2, CheckCircle, XCircle, AlertTriangle, AlertCircle, ChevronDown } from 'lucide-react'
 
+// CIL[END chunk_id="integrationdetailpage_module_header_1783668265"]
+// CIL[BEGIN chunk_id="integrationdetailpage_interface_integration_1783668265" type="interface" identity="Integration" parent="none"]
+// CIL[DOC-MACRO purpose="Define Integration data structure"]
+// CIL[DOC-RESPONSIBILITY responsibility="Type definition for integration objects"]
+// CIL[DOC-CONTEXT module="IntegrationDetailPage" layer="types" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/functions/_shared/schema-utils.ts\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Integration interface type" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines complete integration structure with config and sync status" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: types. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/functions/_shared/schema-utils.ts, .framework/functions/_shared/principal.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 Integration {
   id: string
   name: string
   provider: string
+  version?: string
   integration_type: 'webhook' | 'api' | 'database' | 'file' | 'custom'
   description?: string
   config: Record<string, any>
+  credentials?: Record<string, any>
   is_active: boolean
   is_system?: boolean
+  is_configured?: boolean
   created_at: string
   updated_at: string
-  account_id: string
-  last_sync?: string
-  sync_status?: 'success' | 'failed' | 'pending'
-  error_message?: string
+  account_id: string | null
 }
-
+// CIL[END chunk_id="integrationdetailpage_interface_integration_1783668265"]
+// CIL[BEGIN chunk_id="integrationdetailpage_constant_integration_types_1783668265" type="constant" identity="INTEGRATION_TYPES" parent="none"]
+// CIL[DOC-MACRO purpose="Define integration type options"]
+// CIL[DOC-RESPONSIBILITY responsibility="Configure available integration type choices"]
+// CIL[DOC-CONTEXT module="IntegrationDetailPage" layer="constants" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/migrations/025_retype_threads_messages.sql\",\".framework/functions/_shared/schema-utils.ts\",\".framework/functions/_shared/principal.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Integration type options" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines webhook, API, database, file, and custom integration types" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: constants. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, .framework/migrations/025_retype_threads_messages.sql, .framework/functions/_shared/schema-utils.ts, .framework/functions/_shared/principal.ts, \."]
+// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
+// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
+// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 const INTEGRATION_TYPES = [
   { value: 'webhook', label: 'Webhook' },
   { value: 'api', label: 'API' },
@@ -42,7 +87,21 @@ const INTEGRATION_TYPES = [
   { value: 'file', label: 'File' },
   { value: 'custom', label: 'Custom' }
 ]
-
+// CIL[END chunk_id="integrationdetailpage_constant_integration_types_1783668265"]
+// CIL[BEGIN chunk_id="integrationdetailpage_function_integrationdetailpage_1783668265" type="function" identity="IntegrationDetailPage" parent="none"]
+// CIL[DOC-MACRO purpose="Main IntegrationDetailPage component implementation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render integration detail view with create/edit/delete functionality"]
+// CIL[DOC-CONTEXT module="IntegrationDetailPage" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/ui/table-primitives.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React component" errors="API failures" side_effects="Navigation, API calls"]
+// CIL[DOC-MICRO logic_summary="Manages CRUD operations for integrations with form validation and state management" 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/components/ui/dialog.tsx, .framework/src/components/ui/table-primitives.tsx, custom/apps/portal/pages/ContentPage.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"]
 export function IntegrationDetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -53,7 +112,7 @@ export function IntegrationDetailPage() {
   const [isEditing, setIsEditing] = useState(isCreateMode)
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const [formData, setFormData] = useState({
-    name: '', provider: '', integration_type: 'api' as const, description: '', config: '{}', is_active: true
+    name: '', provider: '', version: '', integration_type: 'api' as const, description: '', config: '{}', credentials: '{}', is_active: true
   })
 
   useEffect(() => {
@@ -72,8 +131,11 @@ export function IntegrationDetailPage() {
         const data = result.data
         setIntegration(data)
         setFormData({
-          name: data.name, provider: data.provider, integration_type: data.integration_type,
-          description: data.description || '', config: JSON.stringify(data.config, null, 2), is_active: data.is_active
+          name: data.name, provider: data.provider, version: data.version || '', integration_type: data.integration_type,
+          description: data.description || '',
+          config: JSON.stringify(data.config || {}, null, 2),
+          credentials: JSON.stringify(data.credentials || {}, null, 2),
+          is_active: data.is_active
         })
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to load integration')
@@ -88,9 +150,12 @@ export function IntegrationDetailPage() {
     try {
       let parsedConfig = {}
       try { parsedConfig = JSON.parse(formData.config) } catch { throw new Error('Invalid JSON in config') }
+      let parsedCredentials = {}
+      try { parsedCredentials = JSON.parse(formData.credentials) } catch { throw new Error('Invalid JSON in credentials') }
       const url = isCreateMode ? '/api/integrations?action=create' : `/api/integrations?action=update&id=${id}`
       const method = isCreateMode ? 'POST' : 'PATCH'
-      const response = await apiFetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...formData, config: parsedConfig }) })
+      const body = { ...formData, config: parsedConfig, credentials: parsedCredentials }
+      const response = await apiFetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
       if (!response.ok) throw new Error('Failed to save integration')
       if (isCreateMode) {
         const result = await response.json()
@@ -126,13 +191,68 @@ export function IntegrationDetailPage() {
     <Alert variant="destructive"><AlertCircle className="h-4 w-4" /><AlertTitle>Error</AlertTitle><AlertDescription>{error}</AlertDescription></Alert>
   )
 
-  const getStatusIcon = (status?: string) => {
-    switch (status) {
-      case 'success': return <CheckCircle className="h-4 w-4 text-green-500" />
-      case 'failed': return <XCircle className="h-4 w-4 text-red-500" />
-      case 'pending': return <AlertTriangle className="h-4 w-4 text-yellow-500" />
-      default: return null
+  const typeInstructions = [
+    {
+      type: 'api',
+      title: 'API integration',
+      description: 'For outbound REST calls such as OpenAI, custom LLM providers, or generic HTTP endpoints. Set config.outbound_adapter and credentials.api_token.',
+      config: {
+        outbound_adapter: 'adapters/openai-outbound',
+        base_url: 'https://api.openai.com/v1',
+        models: { chat: 'gpt-4o-mini', embedding: 'text-embedding-3-small' }
+      },
+      credentials: { api_token: { source: 'env_var', value: 'OPENAI_API_KEY' } }
+    },
+    {
+      type: 'webhook',
+      title: 'Webhook integration',
+      description: 'For inbound HTTP events. Define the adapter that will handle the webhook and any events it listens to. Credentials usually hold a signing secret or API key.',
+      config: {
+        inbound_adapter: 'adapters/generic-webhook-inbound',
+        events: ['my.event']
+      },
+      credentials: { signing_secret: { source: 'env_var', value: 'WEBHOOK_SECRET' } }
+    },
+    {
+      type: 'database',
+      title: 'Database integration',
+      description: 'For external database reads/writes. Use env_var sources for host, port, database, and a credentials field for the password.',
+      config: {
+        adapter: 'adapters/postgres-outbound',
+        host_env_var: 'DB_HOST',
+        port_env_var: 'DB_PORT',
+        database_env_var: 'DB_NAME'
+      },
+      credentials: { password: { source: 'env_var', value: 'DB_PASSWORD' } }
+    },
+    {
+      type: 'file',
+      title: 'File / storage integration',
+      description: 'For S3, GCS, or other object storage. Provide bucket and region in config and access keys in credentials.',
+      config: {
+        adapter: 'adapters/s3-outbound',
+        bucket: 'my-bucket',
+        region: 'us-east-1'
+      },
+      credentials: {
+        access_key_id: { source: 'env_var', value: 'AWS_ACCESS_KEY_ID' },
+        secret_access_key: { source: 'env_var', value: 'AWS_SECRET_ACCESS_KEY' }
+      }
+    },
+    {
+      type: 'custom',
+      title: 'Custom integration',
+      description: 'For any integration not covered above. Point config.outbound_adapter or config.inbound_adapter to a custom function path and define the credentials fields your adapter expects.',
+      config: {
+        outbound_adapter: 'custom/apps/myapp/functions/my-adapter'
+      },
+      credentials: { api_token: { source: 'env_var', value: 'MY_CUSTOM_TOKEN' } }
     }
+  ]
+
+  const getStatusIcon = (configured?: boolean) => {
+    if (configured) return <CheckCircle className="h-4 w-4 text-green-500" />
+    return <AlertTriangle className="h-4 w-4 text-yellow-500" />
   }
 
   return (
@@ -156,27 +276,63 @@ export function IntegrationDetailPage() {
         )}
       </div>
 
+      <Card>
+        <CardContent className="p-4">
+          <Collapsible>
+            <CollapsibleTrigger className="group flex w-full items-center justify-between text-sm font-medium text-slate-700">
+              <span>Integration setup instructions</span>
+              <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="space-y-4 pt-4">
+              <p className="text-sm text-slate-600">
+                Integrations connect Spine to external services. <code>Configuration (JSON)</code> defines the adapter and runtime settings. <code>Credentials (JSON)</code> stores secrets as either <code>env_var</code> (an environment variable name) or <code>value</code> (the literal secret). Fill in the fields for your integration type, save, and the broker will use them on the next call.
+              </p>
+              <div className="space-y-2">
+                {typeInstructions.map((t) => (
+                  <Collapsible key={t.type}>
+                    <CollapsibleTrigger className="group flex w-full items-center justify-between border-b py-2 text-sm font-medium text-slate-700">
+                      <span>{t.title}</span>
+                      <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="space-y-2 pt-2">
+                      <p className="text-sm text-slate-600">{t.description}</p>
+                      <div className="space-y-1">
+                        <div className="text-xs font-medium text-slate-500">Config template</div>
+                        <pre className="text-xs bg-muted p-2 rounded overflow-auto font-mono">{JSON.stringify(t.config, null, 2)}</pre>
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-xs font-medium text-slate-500">Credentials template</div>
+                        <pre className="text-xs bg-muted p-2 rounded overflow-auto font-mono">{JSON.stringify(t.credentials, null, 2)}</pre>
+                      </div>
+                    </CollapsibleContent>
+                  </Collapsible>
+                ))}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </CardContent>
+      </Card>
+
       <Card><CardContent className="p-6">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground">Basic Info</h3>
             <div className="space-y-2"><Label>Name</Label>{isEditing ? <Input value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} /> : <div className="text-sm">{integration?.name}</div>}</div>
             <div className="space-y-2"><Label>Provider</Label>{isEditing ? <Input value={formData.provider} onChange={e => setFormData({...formData, provider: e.target.value})} /> : <div className="text-sm">{integration?.provider}</div>}</div>
+            <div className="space-y-2"><Label>Version</Label>{isEditing ? <Input value={formData.version} onChange={e => setFormData({...formData, version: e.target.value})} /> : <div className="text-sm">{integration?.version || '—'}</div>}</div>
             <div className="space-y-2"><Label>Type</Label>{isEditing ? <Select value={formData.integration_type} onValueChange={v => setFormData({...formData, integration_type: v as any})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{INTEGRATION_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}</SelectContent></Select> : <Badge>{integration?.integration_type}</Badge>}</div>
             <div className="space-y-2"><Label>Active</Label>{isEditing ? <div className="flex items-center gap-2"><Checkbox id="active" checked={formData.is_active} onCheckedChange={c => setFormData({...formData, is_active: c === true})} /><Label htmlFor="active">Enabled</Label></div> : <div className="text-sm">{integration?.is_active ? 'Yes' : 'No'}</div>}</div>
           </div>
           <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground">Sync Status</h3>
+            <h3 className="text-sm font-medium text-muted-foreground">Status</h3>
             {!isCreateMode && (
-              <>
-                <div className="flex justify-between items-center"><span className="text-sm text-muted-foreground">Status</span><div className="flex items-center gap-2">{getStatusIcon(integration?.sync_status)}<span className="text-sm capitalize">{integration?.sync_status || '—'}</span></div></div>
-                <div className="flex justify-between items-center"><span className="text-sm text-muted-foreground">Last Sync</span><span className="text-sm">{integration?.last_sync ? formatDateTime(integration.last_sync) : '—'}</span></div>
-              </>
+              <div className="flex justify-between items-center"><span className="text-sm text-muted-foreground">Configured</span><div className="flex items-center gap-2">{getStatusIcon(integration?.is_configured)}<span className="text-sm capitalize">{integration?.is_configured ? 'Configured' : 'Pending'}</span></div></div>
             )}
             <div className="space-y-2"><Label>Description</Label>{isEditing ? <Textarea value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})} rows={3} /> : <div className="text-sm">{integration?.description || '—'}</div>}</div>
           </div>
         </div>
         <div className="mt-6 space-y-2"><Label>Configuration (JSON)</Label>{isEditing ? <Textarea value={formData.config} onChange={e => setFormData({...formData, config: e.target.value})} rows={8} className="font-mono text-sm" /> : <pre className="text-sm bg-muted p-3 rounded overflow-auto">{JSON.stringify(integration?.config || {}, null, 2)}</pre>}</div>
+        <div className="mt-6 space-y-2"><Label>Credentials (JSON)</Label>{isEditing ? <Textarea value={formData.credentials} onChange={e => setFormData({...formData, credentials: e.target.value})} rows={8} className="font-mono text-sm" /> : <pre className="text-sm bg-muted p-3 rounded overflow-auto">{JSON.stringify(integration?.credentials || {}, null, 2)}</pre>}</div>
       </CardContent></Card>
 
       <Modal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} title="Delete Integration" description="Are you sure you want to delete this integration?" size="sm">
@@ -185,3 +341,4 @@ export function IntegrationDetailPage() {
     </div>
   )
 }
+// CIL[END chunk_id="integrationdetailpage_function_integrationdetailpage_1783668265"]

package/.framework/src/pages/admin/IntegrationsPage.tsx

@@ -1,18 +1,21 @@
-/**
- * @module src/pages/admin/IntegrationsPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for third-party integrations (integration instances).
- * Fetches all integration instances via `/api/integrations?action=list`,
- * applies client-side search, status filter, and sort. Renders inside
- * `AdminListPage`. Row clicks navigate to
- * `/spine-framework/admin/configs/integrations/:id`.
- *
- * @seeAlso src/pages/admin/IntegrationDetailPage.tsx
- */
 
+
+
+// CIL[BEGIN chunk_id="integrationspage_module_header_1783668265" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies for IntegrationsPage component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Import React hooks, UI components, and utilities"]
+// CIL[DOC-CONTEXT module="IntegrationsPage" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Imported modules" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports React state management, UI components, API hooks, 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: .framework/src/components/ui/dialog.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.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 } from 'react'
 import { Link, CheckCircle, AlertTriangle, Settings, Cog } from 'lucide-react';
 import { formatDateTime } from '../../lib/utils'
@@ -20,7 +23,21 @@ import { apiFetch } from '../../lib/api'
 import { AdminListPage } from '../../components/admin/AdminListPage'
 import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
 import { useApi } from '../../hooks/useApi'
-
+// CIL[END chunk_id="integrationspage_module_header_1783668265"]
+// CIL[BEGIN chunk_id="integrationspage_interface_integration_1783668265" type="interface" identity="Integration" parent="none"]
+// CIL[DOC-MACRO purpose="Define Integration data structure"]
+// CIL[DOC-RESPONSIBILITY responsibility="Type definition for integration objects"]
+// CIL[DOC-CONTEXT module="IntegrationsPage" layer="types" related_files="[\".framework/functions/_shared/schema-utils.ts\",\".framework/functions/_shared/principal.ts\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Integration interface type" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines complete integration structure with sync status and metadata" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: types. Direct callers: 0. Direct calls: 0. Related files: .framework/functions/_shared/schema-utils.ts, .framework/functions/_shared/principal.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 Integration {
   id: string
   name: string
@@ -46,7 +63,21 @@ interface Integration {
     email: string
   }
 }
-
+// CIL[END chunk_id="integrationspage_interface_integration_1783668265"]
+// CIL[BEGIN chunk_id="integrationspage_function_integrationspage_1783668265" type="function" identity="IntegrationsPage" parent="none"]
+// CIL[DOC-MACRO purpose="Main IntegrationsPage component implementation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render integrations management interface with filtering, sorting, and stats"]
+// CIL[DOC-CONTEXT module="IntegrationsPage" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React component" errors="API failures" side_effects="Navigation, API calls"]
+// CIL[DOC-MICRO logic_summary="Manages state, fetches integrations, handles filtering/sorting, renders table" 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/components/ui/dialog.tsx, custom/apps/portal/pages/ContentPage.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"]
 export function IntegrationsPage() {
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedStatus, setSelectedStatus] = useState('all')
@@ -54,7 +85,6 @@ export function IntegrationsPage() {
   const [sortKey, setSortKey] = useState('name')
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
 
-  // Fetch integrations from API
   const { data: integrations, loading, error } = useApi<Integration[]>(
     async ({ signal }: { signal?: AbortSignal }) => {
       const response = await apiFetch('/api/integrations?action=list', { signal })
@@ -78,7 +108,6 @@ export function IntegrationsPage() {
 
   const types = Array.from(new Set((integrations || []).map(i => i.integration_type)))
 
-  // Helper functions
   const getStatusBadge = (integration: Integration) => {
     if (!integration.is_active) {
       return <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-slate-100 text-slate-800">Inactive</span>
@@ -105,7 +134,6 @@ export function IntegrationsPage() {
     window.location.href = `/spine-framework/admin/configs/integrations/${integration.id}`
   }
 
-  // Sort integrations
   const sortedIntegrations = [...(filteredIntegrations || [])].sort((a, b) => {
     let aValue: any = a[sortKey as keyof Integration]
     let bValue: any = b[sortKey as keyof Integration]
@@ -299,3 +327,4 @@ export function IntegrationsPage() {
     </AdminListPage>
   )
 }
+// CIL[END chunk_id="integrationspage_function_integrationspage_1783668265"]

package/.framework/src/pages/admin/InvitesPage.tsx

@@ -1,26 +1,59 @@
-/**
- * @module src/pages/admin/InvitesPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * System-level invite management page for system_admin.
- * Shows invites for the spine-system account scoped to system_admin role only.
- * Rendered at /spine-framework/admin/access/invites
- *
- * @seeAlso src/components/shared/InviteManager.tsx
- */
 
+
+
+// CIL[BEGIN chunk_id="invitespage_module_header_1783668265" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies for InvitesPage component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Import React and shared components"]
+// CIL[DOC-CONTEXT module="InvitesPage" layer="presentation" related_files="[\".framework/src/components/layout/Sidebar.tsx\",\".framework/src/components/ui/dialog.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Imported modules" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Imports React, InviteManager component, and auth context" 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: .framework/src/components/layout/Sidebar.tsx, .framework/src/components/ui/dialog.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.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 React from 'react'
 import { InviteManager } from '../../components/shared/InviteManager'
 import { useAuth } from '../../contexts/AuthContext'
-
+// CIL[END chunk_id="invitespage_module_header_1783668265"]
+// CIL[BEGIN chunk_id="invitespage_constant_framework_roles_1783668265" type="constant" identity="FRAMEWORK_ROLES" parent="none"]
+// CIL[DOC-MACRO purpose="Define framework admin roles"]
+// CIL[DOC-RESPONSIBILITY responsibility="Configure available system admin roles"]
+// CIL[DOC-CONTEXT module="InvitesPage" layer="constants" related_files="[\".framework/src/pages/admin/RolesPage.tsx\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Role constants" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Defines system admin role with slug and name" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: constants. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/RolesPage.tsx, .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/pages/admin/TypeDetailPage.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 FRAMEWORK_ROLES = [
   { slug: 'system_admin', name: 'System Admin' },
 ]
 
 const FRAMEWORK_ROLE_SLUGS = FRAMEWORK_ROLES.map(r => r.slug).join(',')
-
+// CIL[END chunk_id="invitespage_constant_framework_roles_1783668265"]
+// CIL[BEGIN chunk_id="invitespage_function_invitespage_1783668265" type="function" identity="InvitesPage" parent="none"]
+// CIL[DOC-MACRO purpose="Main InvitesPage component implementation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render invite management interface for system admins"]
+// CIL[DOC-CONTEXT module="InvitesPage" layer="presentation" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/layout/Sidebar.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React component" errors="Auth context errors" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Renders page header and InviteManager with framework roles" 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/components/ui/dialog.tsx, .framework/src/components/layout/Sidebar.tsx, custom/apps/portal/pages/ContentPage.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"]
 export function InvitesPage() {
   const { user } = useAuth()
 
@@ -42,3 +75,4 @@ export function InvitesPage() {
     </div>
   )
 }
+// CIL[END chunk_id="invitespage_function_invitespage_1783668265"]