spine-framework 0.3.125 → 0.3.126

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

@@ -0,0 +1,196 @@
+// CIL[BEGIN chunk_id="deliveriespage_module_header_1784200009" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Admin page for webhook deliveries ledger"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render a filterable, sortable list of webhook_deliveries"]
+// CIL[DOC-CONTEXT module="DeliveriesPage" layer="presentation" related_files="[".framework/functions/deliveries.ts",".framework/src/components/admin/AdminListPage.tsx",".framework/src/apps/admin/index.tsx",".framework/src/components/admin/AdminSidebar.tsx"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React component" errors="API failures" side_effects="API calls, navigation"]
+// CIL[DOC-MICRO logic_summary="Fetches deliveries from /api/deliveries, filters by direction/status, and renders a table." notable_decisions="["Manual retry is not wired in the first pass; the action column is a placeholder."]"]
+// CIL[DOC-CONFIDENCE pass="first" score="0.8" flags="none"]
+// CIL[DOC-STABILITY stability="experimental"]
+// CIL[DOC-AUDIENCE audience="developer"]
+// CIL[DOC-VECTOR type="context" content="Layer: presentation. Direct callers: 0. Direct calls: 0. Related files: .framework/functions/deliveries.ts, .framework/src/components/admin/AdminListPage.tsx, .framework/src/apps/admin/index.tsx, .framework/src/components/admin/AdminSidebar.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="Requires /api/deliveries endpoint."]
+// CIL[DOC-VECTOR type="implementation_pattern" content="Standard admin list page."]
+// CIL[DOC-VECTOR type="user_journey" content="Admin monitors inbound and outbound webhook attempts."]
+
+import { useState } from 'react'
+import { RefreshCw, Truck, Inbox } from 'lucide-react'
+import { formatDateTime } from '../../lib/utils'
+import { apiFetch } from '../../lib/api'
+import { AdminListPage } from '../../components/admin/AdminListPage'
+import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
+import { useApi } from '../../hooks/useApi'
+
+interface Delivery {
+  id: string
+  direction: 'inbound' | 'outbound'
+  status: 'pending' | 'processing' | 'delivered' | 'failed'
+  integration_id: string
+  api_key_id?: string
+  record_id?: string
+  action_slug?: string
+  handler_name?: string
+  external_id?: string
+  attempt_count: number
+  max_attempts: number
+  next_attempt_at?: string
+  last_error?: string
+  response_status?: number
+  duration_ms?: number
+  created_at: string
+  updated_at: string
+}
+
+export function DeliveriesPage() {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedStatus, setSelectedStatus] = useState('all')
+  const [selectedDirection, setSelectedDirection] = useState('all')
+  const [sortKey, setSortKey] = useState('created_at')
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
+
+  const { data: deliveries, loading, error, refetch } = useApi<Delivery[]>(
+    async () => {
+      const response = await apiFetch('/api/deliveries')
+      if (!response.ok) throw new Error('Failed to fetch deliveries')
+      const result = await response.json()
+      return (result.data || result) as Delivery[]
+    },
+    { immediate: true }
+  )
+
+  const filtered = (deliveries || []).filter(d => {
+    const matchesSearch = d.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         (d.handler_name || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         (d.action_slug || '').toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesStatus = selectedStatus === 'all' || d.status === selectedStatus
+    const matchesDirection = selectedDirection === 'all' || d.direction === selectedDirection
+    return matchesSearch && matchesStatus && matchesDirection
+  })
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDirection('asc')
+    }
+  }
+
+  const sorted = [...(filtered || [])].sort((a, b) => {
+    let aValue: any = a[sortKey as keyof Delivery]
+    let bValue: any = b[sortKey as keyof Delivery]
+
+    if (typeof aValue === 'string') {
+      return sortDirection === 'asc'
+        ? aValue.localeCompare(bValue)
+        : bValue.localeCompare(aValue)
+    }
+
+    if (typeof aValue === 'number') {
+      return sortDirection === 'asc' ? aValue - bValue : bValue - aValue
+    }
+
+    return 0
+  })
+
+  const statsCards = [
+    {
+      title: 'Total',
+      value: (deliveries || []).length,
+      icon: Truck,
+      iconColor: 'text-blue-500'
+    },
+    {
+      title: 'Pending',
+      value: (deliveries || []).filter(d => d.status === 'pending').length,
+      icon: RefreshCw,
+      iconColor: 'text-yellow-500'
+    },
+    {
+      title: 'Delivered',
+      value: (deliveries || []).filter(d => d.status === 'delivered').length,
+      icon: Inbox,
+      iconColor: 'text-green-500'
+    }
+  ]
+
+  const filters = [
+    {
+      label: 'Direction',
+      value: selectedDirection,
+      options: [
+        { value: 'all', label: 'All' },
+        { value: 'inbound', label: 'Inbound' },
+        { value: 'outbound', label: 'Outbound' }
+      ],
+      onChange: setSelectedDirection
+    },
+    {
+      label: 'Status',
+      value: selectedStatus,
+      options: [
+        { value: 'all', label: 'All Status' },
+        { value: 'pending', label: 'Pending' },
+        { value: 'processing', label: 'Processing' },
+        { value: 'delivered', label: 'Delivered' },
+        { value: 'failed', label: 'Failed' }
+      ],
+      onChange: setSelectedStatus
+    }
+  ]
+
+  return (
+    <AdminListPage
+      title="Deliveries"
+      description="Inbound and outbound webhook delivery attempts"
+      searchPlaceholder="Search deliveries..."
+      searchValue={searchTerm}
+      onSearchChange={setSearchTerm}
+      filters={filters}
+      statsCards={statsCards}
+      loading={loading}
+      error={error}
+      emptyMessage="No deliveries found"
+      emptyIcon={Truck}
+    >
+      <table className="min-w-full divide-y divide-slate-200">
+        <thead className="bg-slate-50">
+          <tr>
+            <SortableTableHeader title="Direction" sortKey="direction" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+            <SortableTableHeader title="Status" sortKey="status" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+            <SortableTableHeader title="Integration" sortKey="integration_id" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+            <SortableTableHeader title="Handler/Action" sortKey="handler_name" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+            <SortableTableHeader title="Attempts" sortKey="attempt_count" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+            <SortableTableHeader title="Next Attempt" sortKey="next_attempt_at" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+            <SortableTableHeader title="Created" sortKey="created_at" currentSortKey={sortKey} currentSortDirection={sortDirection} onSort={handleSort} />
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-slate-200">
+          {sorted.map((d) => (
+            <tr key={d.id} className="hover:bg-slate-50">
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-900 capitalize">{d.direction}</td>
+              <td className="px-6 py-4 whitespace-nowrap">
+                <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${
+                  d.status === 'delivered' ? 'bg-green-100 text-green-700' :
+                  d.status === 'failed' ? 'bg-red-100 text-red-700' :
+                  d.status === 'processing' ? 'bg-blue-100 text-blue-700' :
+                  'bg-yellow-100 text-yellow-700'
+                }`}>
+                  {d.status}
+                </span>
+              </td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 font-mono truncate max-w-[180px]">{d.integration_id}</td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{d.handler_name || d.action_slug || '—'}</td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{d.attempt_count} / {d.max_attempts}</td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{d.next_attempt_at ? formatDateTime(d.next_attempt_at) : '—'}</td>
+              <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{formatDateTime(d.created_at)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </AdminListPage>
+  )
+}
+
+// CIL[END chunk_id="deliveriespage_module_header_1784200009"]

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

@@ -1,13 +1,20 @@
-/**
- * @module src/pages/admin/DesignedPage
- * @audience installer
- * @layer frontend-page
- * @stability testing
- *
- * A properly designed page with left navigation and content area.
- * Demonstrates shadcn components in a real application context.
- */
 
+
+// CIL[BEGIN chunk_id="designedpage_module_header_1783668265" type="module_header" identity="module_header" parent="none"]
+// CIL[DOC-MACRO purpose="Import dependencies for DesignedPage component"]
+// CIL[DOC-RESPONSIBILITY responsibility="Import React hooks and comprehensive UI components"]
+// CIL[DOC-CONTEXT module="DesignedPage" 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 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/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 { useState } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card'
 import { Button } from '../../components/ui/button'
@@ -73,7 +80,21 @@ import {
   Shield,
   Zap
 } from 'lucide-react'
-
+// CIL[END chunk_id="designedpage_module_header_1783668265"]
+// CIL[BEGIN chunk_id="designedpage_function_designedpage_1783668265" type="function" identity="DesignedPage" parent="none"]
+// CIL[DOC-MACRO purpose="Main DesignedPage component implementation"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render comprehensive admin dashboard with sidebar, header, and main content"]
+// CIL[DOC-CONTEXT module="DesignedPage" 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="none" side_effects="State management"]
+// CIL[DOC-MICRO logic_summary="Creates full-featured dashboard UI with navigation, stats, tables, and settings" 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 DesignedPage() {
   const [selectedTab, setSelectedTab] = useState('overview')
   const [searchQuery, setSearchQuery] = useState('')
@@ -82,7 +103,6 @@ export function DesignedPage() {
 
   return (
     <div className="flex min-h-screen bg-background">
-      {/* Left Navigation */}
       <div className="w-64 flex-shrink-0 border-r border-border bg-card">
         <div className="flex h-16 items-center px-6 border-b border-border">
           <div className="flex items-center gap-2">
@@ -141,9 +161,7 @@ export function DesignedPage() {
         </nav>
       </div>
 
-      {/* Main Content Area */}
       <div className="flex-1 flex flex-col min-w-0">
-        {/* Header */}
         <header className="h-16 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex-shrink-0">
           <div className="flex h-16 items-center justify-between px-6">
             <div className="flex items-center gap-4">
@@ -195,10 +213,8 @@ export function DesignedPage() {
           </div>
         </header>
 
-        {/* Page Content */}
         <main className="flex-1 overflow-auto p-6">
           <div className="max-w-7xl mx-auto space-y-6">
-            {/* Stats Cards */}
             <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -253,7 +269,6 @@ export function DesignedPage() {
               </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>
@@ -264,7 +279,6 @@ export function DesignedPage() {
               
               <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>
@@ -310,7 +324,6 @@ export function DesignedPage() {
                     </CardContent>
                   </Card>
                   
-                  {/* Quick Actions */}
                   <Card>
                     <CardHeader>
                       <CardTitle>Quick Actions</CardTitle>
@@ -489,3 +502,4 @@ export function DesignedPage() {
     </div>
   )
 }
+// CIL[END chunk_id="designedpage_function_designedpage_1783668265"]