spine-framework 0.4.3 → 0.5.0-rc.4

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

@@ -1,12 +1,28 @@
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="Admin detail page for creating and editing scheduled timers."]
-// CIL[DOC-RESPONSIBILITY responsibility="Renders a form for viewing, creating, and editing timers, and submits changes to the timers API."]
-// CIL[DOC-CONTEXT module="admin" layer="page" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/checkbox.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/select.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/lib/api.ts,.framework/src/lib/utils.ts"]
-// CIL[DOC-CONTRACT inputs="timer id from URL (optional)" outputs="JSX rendering of the TimerDetailPage" errors="Displays API and JSON validation errors to the user" side_effects="Calls /api/timers endpoints and navigates on successful creation."]
-// CIL[DOC-MICRO logic_summary="Initializes form state, loads an existing timer when editing, validates JSON config and metadata, and renders the create/edit UI with PageInstructions." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="developer"]
+/**
+ * @module   TimerDetailPage
+ * @audience internal
+ * @layer    app-specific
+ * @stability stable
+ *
+ * The TimerDetailPage module is responsible for displaying and managing the details of a timer within the admin interface. It allows users to view, edit, and configure timer settings, leveraging various UI components for a seamless experience.
+ * INVARIANT: The user must have appropriate permissions to access this page.
+ *
+ * @seeAlso apiFetch (handles API requests for timer data).
+ * @seeAlso PageInstructions (provides guidance on using the page).
+ * @seeAlso EntitySelect (used for selecting related entities).
+ *
+ * @cil-generated
+ */
+
+
+
+
+
+
+
+
+
 
 
 
@@ -21,29 +37,39 @@ import { Textarea } from '../../components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select'
 import { Checkbox } from '../../components/ui/checkbox'
 import { Label } from '../../components/ui/label'
+import { AppSelect, PipelineSelect } from '../../components/admin/EntitySelect'
 import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'
 import { Skeleton } from '../../components/ui/skeleton'
 import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert'
 import { Badge } from '../../components/ui/badge'
 import { ArrowLeft, Clock, AlertCircle } from 'lucide-react'
 import { formatDateTime } from '../../lib/utils'
-import { PageInstructions } from '../../components/admin/PageInstructions'
-
-// CIL[DOC-VECTOR type="context" content="purpose='Admin detail page for creating and editing scheduled timers.'; No verified external callers; imports: .framework/src/lib/api.ts,.framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 // CIL[END stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:module_header:module_header"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:Timer:interface" type="interface" identity="Timer" parent="~/.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="TypeScript type contract for a Timer record."]
-// CIL[DOC-RESPONSIBILITY responsibility="Defines the shape and field types of timer data used by the detail page."]
-// CIL[DOC-CONTEXT module="admin" layer="model" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/checkbox.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/select.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-CONTRACT inputs="N/A" outputs="Timer interface declaration" errors="N/A" side_effects="N/A"]
-// CIL[DOC-MICRO logic_summary="Declares fields for id, name, description, app_id, timer_type, config, pipeline_id, metadata, is_active, created_at, and updated_at." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+/**
+ * The Timer interface defines the structure for timer objects used in the application, encapsulating properties related to timer configuration, state, and metadata. It serves as a blueprint for managing timers effectively within the system.
+ *
+ * @sideEffects none
+ * @stability   stable
+ * @cil-generated
+ */
 interface Timer {
   id: string
   name: string
@@ -57,47 +83,75 @@ interface Timer {
   created_at: string
   updated_at: string
 }
-// CIL[DOC-VECTOR type="context" content="purpose='TypeScript type contract for a Timer record.'; No verified external callers; imports: .framework/src/lib/api.ts,.framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 // CIL[END stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:Timer:interface"]
 
 
 
 
-// CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:timer_types:constant" type="constant" identity="timer_types" parent="~/.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="Provides the selectable options for timer type."]
-// CIL[DOC-RESPONSIBILITY responsibility="Supplies value/label pairs for the timer type select input."]
-// CIL[DOC-CONTEXT module="admin" layer="ui" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/checkbox.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/select.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-CONTRACT inputs="N/A" outputs="TIMER_TYPES array of {value, label} objects" errors="N/A" side_effects="N/A"]
-// CIL[DOC-MICRO logic_summary="Maps timer type keys interval, cron, and once to human-readable labels." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:TIMER_TYPES:constant" type="constant" identity="TIMER_TYPES" parent="~/.framework/src/pages/admin/TimerDetailPage.tsx"]
+/**
+ * TIMER_TYPES defines a set of timer configurations available in the application, providing options for interval-based, cron-based, and one-time timers. This constant is used to facilitate the selection of timer types in the user interface.
+ *
+ * @sideEffects none
+ * @stability   stable
+ * @cil-generated
+ */
 const TIMER_TYPES = [
   { value: 'interval', label: 'Interval' },
   { value: 'cron', label: 'Cron Expression' },
   { value: 'once', label: 'One-time' }
 ]
-// CIL[DOC-VECTOR type="context" content="purpose='Provides the selectable options for timer type.'; No verified external callers; imports: .framework/src/lib/api.ts,.framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
-// CIL[END stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:timer_types:constant"]
+// CIL[END stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:TIMER_TYPES:constant"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:TimerDetailPage:component" type="component" identity="TimerDetailPage" parent="~/.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="Renders the timer detail form and handles create/update logic."]
-// CIL[DOC-RESPONSIBILITY responsibility="Fetches timer data when editing, manages form state, validates JSON, and calls the timers API to save."]
-// CIL[DOC-CONTEXT module="admin" layer="page" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/checkbox.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/label.tsx,.framework/src/components/ui/select.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/TimerDetailPage.tsx"]
-// CIL[DOC-CONTRACT inputs="URL param id (optional) and user interactions via form fields" outputs="Rendered TimerDetailPage component with create/edit UI" errors="Displays fetch and save errors and validation errors for invalid JSON" side_effects="Fetches timer on mount, calls /api/timers create/update, and navigates after creation."]
-// CIL[DOC-MICRO logic_summary="Initializes form state, loads a timer in edit mode, parses config and metadata JSON, builds the save payload, conditionally renders editing or read-only fields, and renders PageInstructions." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+/**
+ * The TimerDetailPage component manages the creation and editing of timer configurations in an admin interface. It fetches existing timer data for editing or initializes a new timer for creation.
+ *
+ * @macro       Component responsible for displaying and managing timer details.
+ * @micro       Uses React hooks to manage state and side effects for fetching and saving timer data.
+ * @outputSpec  JSX.Element
+ * @throws      Error — Invalid config JSON, Error — Invalid metadata JSON
+ * @sideEffects Fetches timer data from an external API, saves timer data to an external API.
+ * @stability   stable
+ * @calls       apiFetch, useParams, useNavigate
+ * @errorHandling Sets error state on failure to fetch or save timer data.
+ * @cil-generated
+ */
 export function TimerDetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -111,7 +165,7 @@ export function TimerDetailPage() {
     description: '',
     app_id: '',
     timer_type: 'interval' as const,
-    config: JSON.stringify({ schedule: '', interval_seconds: 3600 }, null, 2),
+    config: JSON.stringify({ interval_minutes: 60 }, null, 2),
     pipeline_id: '',
     metadata: '{}',
     is_active: true
@@ -203,57 +257,18 @@ export function TimerDetailPage() {
           ) : !isCreateMode && <Button onClick={() => setIsEditing(true)}>Edit</Button>}
         </div>
       </div>
-
-      <PageInstructions
-        description="Schedule a timer to run actions at intervals, via cron, or once."
-        sections={[
-          { title: 'What this timer controls', content: 'A timer is a scheduled job that calls a target function or pipeline on an interval, a cron schedule, or one time. It is the Spine equivalent of a recurring or one-off background task.' },
-          { title: 'Fields explained', content: <ul className="list-disc pl-4 space-y-1">
-            <li><strong>Name</strong> — string. The display name. Missing name prevents saving.</li>
-            <li><strong>Type</strong> — select. interval, cron, or once. Controls which schedule field in Config is used and how the next run is calculated.</li>
-            <li><strong>App ID</strong> — string. Optional owning app UUID; blank means account-scoped.</li>
-            <li><strong>Pipeline ID</strong> — string. The pipeline to invoke when the timer fires.</li>
-            <li><strong>Active</strong> — checkbox. Inactive timers are skipped by the scheduler.</li>
-            <li><strong>Description</strong> — string. Optional notes.</li>
-            <li><strong>Config (JSON)</strong> — JSON. The timer schedule, e.g. { `{ "schedule": "0 */6 * * *" }` } for cron, { `{ "interval_seconds": 3600 }` } for interval, or { `{ "run_at": "2026-01-01T00:00:00Z" }` } for once.</li>
-            <li><strong>Metadata (JSON)</strong> — JSON. Optional metadata about the timer.</li>
-          </ul> },
-          { title: 'Options and values', content: <ul className="list-disc pl-4 space-y-1">
-            <li><strong>interval</strong>: config should contain interval_seconds.</li>
-            <li><strong>cron</strong>: config should contain a schedule cron expression like 0 */6 * * *.</li>
-            <li><strong>once</strong>: config should contain a run_at ISO timestamp.</li>
-          </ul> },
-          { title: 'Downstream impact', content: <ul className="list-disc pl-4 space-y-1">
-            <li>The scheduler uses the active flag and the timer_type/config fields to determine the next run and to enqueue the pipeline.</li>
-            <li>Pipeline ID must refer to an existing pipeline; otherwise the timer will fail with a missing handler.</li>
-          </ul> },
-          { title: 'How to create, save, and validate', content: <ol className="list-decimal pl-4 space-y-1">
-
-
-            <li>Pick the timer type and fill the Config JSON with the matching schedule. Enter the Pipeline ID and optional Metadata JSON.</li>
-            <li>Click Create to save or Edit then Save for existing timers.</li>
-            <li>Validation checks the name, timer type, and that Config and Metadata are valid JSON.</li>
-          </ol> },
-          { title: 'Common mistakes', content: <ul className="list-disc pl-4 space-y-1">
-            <li>Selecting cron but filling interval_seconds instead of a cron schedule.</li>
-            <li>Using an invalid cron expression, which the scheduler will not run.</li>
-            <li>Leaving Pipeline ID blank when the scheduler expects a pipeline to invoke.</li>
-          </ul> },
-        ]}
-      />
-
       <Card><CardContent className="p-6 space-y-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">Configuration</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">{timer?.name}</div>}</div>
-            <div className="space-y-2"><Label>App ID</Label>{isEditing ? <Input value={formData.app_id} onChange={e => setFormData({...formData, app_id: e.target.value})} placeholder="Optional app UUID" /> : <div className="text-sm font-mono">{timer?.app_id || '—'}</div>}</div>
+            <div className="space-y-2"><Label>App</Label>{isEditing ? <AppSelect value={formData.app_id} onChange={v => setFormData({...formData, app_id: v})} /> : <div className="text-sm font-mono">{timer?.app_id || '—'}</div>}</div>
             <div className="space-y-2"><Label>Type</Label>{isEditing ? <Select value={formData.timer_type} onValueChange={v => setFormData({...formData, timer_type: v as any})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{TIMER_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}</SelectContent></Select> : <Badge>{timer?.timer_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">{timer?.is_active ? 'Yes' : 'No'}</div>}</div>
           </div>
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground">Execution</h3>
-            <div className="space-y-2"><Label>Pipeline ID</Label>{isEditing ? <Input value={formData.pipeline_id} onChange={e => setFormData({...formData, pipeline_id: e.target.value})} placeholder="Pipeline to invoke" /> : <div className="text-sm font-mono">{timer?.pipeline_id || '—'}</div>}</div>
+            <div className="space-y-2"><Label>Pipeline</Label>{isEditing ? <PipelineSelect value={formData.pipeline_id} onChange={v => setFormData({...formData, pipeline_id: v})} /> : <div className="text-sm font-mono">{timer?.pipeline_id || '—'}</div>}</div>
           </div>
         </div>
         <div className="mt-6 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">{timer?.description || '—'}</div>}</div>
@@ -263,11 +278,13 @@ export function TimerDetailPage() {
     </div>
   )
 }
-
-// CIL[DOC-VECTOR type="context" content="purpose='Renders the timer detail form and handles create/update logic.'; No verified external callers; imports: .framework/src/lib/api.ts,.framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 // CIL[END stable_id="~/.framework/src/pages/admin/TimerDetailPage.tsx:TimerDetailPage:component"]
+
+
+
+
+
+
+
+
+

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

@@ -1,12 +1,28 @@
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimersPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/pages/admin/TimersPage.tsx"]
-// CIL[DOC-MACRO purpose="Timers admin page module: imports, types, and React component for managing scheduled and recurring tasks"]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide module-level setup and dependencies for the Timers admin UI page"]
-// CIL[DOC-CONTEXT module="admin/timers" layer="ui.page" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts"]
-// CIL[DOC-CONTRACT inputs="[]" outputs="[]" errors="[]" side_effects="[]"]
-// CIL[DOC-MICRO logic_summary="No runtime logic; groups imports and type definitions for the TimersPage component" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="admin-ui developers"]
+/**
+ * @module   TimersPage
+ * @audience both
+ * @layer    shared-core
+ * @stability stable
+ *
+ * The TimersPage module provides a user interface for managing timers within the admin section of the application. It leverages React hooks for state management and API interactions, allowing users to view, create, and manipulate timer entries.
+ * INVARIANT: The module expects a valid API context to function correctly.
+ *
+ * @seeAlso useApi (provides API interaction capabilities).
+ * @seeAlso LoadingSpinner (displays loading state).
+ * @seeAlso AdminListPage (displays a list of admin items).
+ *
+ * @cil-generated
+ */
+
+
+
+
+
+
+
+
+
 
 
 
@@ -21,22 +37,32 @@ import { Badge } from '../../components/ui/badge'
 import { formatDateTime } from '../../lib/utils'
 import { AdminListPage } from '../../components/admin/AdminListPage'
 import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-
-// CIL[DOC-VECTOR type="context" content="purpose='Timers admin page module: imports, types, and React component for managing scheduled and recurring tasks'; No verified external callers; imports: .framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/components/ui/LoadingSpinner.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 // CIL[END stable_id="~/.framework/src/pages/admin/TimersPage.tsx:module_header:module_header"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimersPage.tsx:Timer:interface" type="interface" identity="Timer" parent="~/.framework/src/pages/admin/TimersPage.tsx"]
-// CIL[DOC-MACRO purpose="Define the Timer data shape used by the admin timers page"]
-// CIL[DOC-RESPONSIBILITY responsibility="Describe the fields and configuration structure of a timer record"]
-// CIL[DOC-CONTEXT module="admin/timers" layer="ui.type" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/TimersPage.tsx"]
-// CIL[DOC-CONTRACT inputs="[]" outputs="Timer interface" errors="[]" side_effects="[]"]
-// CIL[DOC-MICRO logic_summary="TypeScript interface describing timer fields including scheduling config, execution stats, and ownership" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+/**
+ * The Timer interface defines the structure for timer objects used in the application, encapsulating their properties and configuration. It standardizes how timers are represented and managed within the system.
+ *
+ * @sideEffects none
+ * @stability   internal
+ * @cil-generated
+ */
 interface Timer {
   id: string
   name: string
@@ -62,22 +88,39 @@ interface Timer {
   success_count: number
   failure_count: number
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Define the Timer data shape used by the admin timers page'; No verified external callers; imports: .framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/components/ui/LoadingSpinner.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 // CIL[END stable_id="~/.framework/src/pages/admin/TimersPage.tsx:Timer:interface"]
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/TimersPage.tsx:TimersPage:component" type="component" identity="TimersPage" parent="~/.framework/src/pages/admin/TimersPage.tsx"]
-// CIL[DOC-MACRO purpose="Render the admin timers list page with search, filters, sorting, and execution statistics"]
-// CIL[DOC-RESPONSIBILITY responsibility="Display timers, enable search/filter/sort, show status cards, and navigate to create/edit/detail"]
-// CIL[DOC-CONTEXT module="admin/timers" layer="ui.component" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/TimersPage.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="JSX AdminListPage with a sortable timer table" errors="API request failures" side_effects="Navigates to timer detail on row click; fetches timer list from API"]
-// CIL[DOC-MICRO logic_summary="Fetches timer list, filters by search text, type and status, sorts by selected key, computes summary cards, and renders a table of timers" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+/**
+ * The TimersPage component manages the display and filtering of timer data in the admin interface. It allows users to search, filter by type and status, and sort timers.
+ *
+ * @macro       Component responsible for rendering and managing timer data in an admin UI.
+ * @micro       Utilizes a custom API hook to fetch timer data and applies client-side filtering based on user input.
+ * @outputSpec  JSX.Element - renders the TimersPage component with timer data and UI elements.
+ * @throws      Error — if the timer fetch fails
+ * @sideEffects Fetches timer data from an external API.
+ * @stability   internal
+ * @calls       useApi, apiFetch
+ * @errorHandling throws an error if the timer fetch fails
+ * @cil-generated
+ */
 export function TimersPage() {
   const navigate = useNavigate()
   const [searchTerm, setSearchTerm] = useState('')
@@ -88,27 +131,10 @@ export function TimersPage() {
 
   const { data: timers, loading, error, refetch } = useApi<Timer[]>(
     async ({ signal }: { signal?: AbortSignal }) => {
-      try {
-        console.log('Fetching timers...')
-        const response = await apiFetch('/api/timers?action=list', { signal })
-        console.log('Response status:', response.status)
-        
-        if (!response.ok) {
-          console.error('Response not ok:', response.statusText)
-          throw new Error(`Failed to fetch timers: ${response.statusText}`)
-        }
-        
-        const result = await response.json()
-        console.log('Raw API result:', result)
-        
-        const timers = result.data || result
-        console.log('Timers after processing:', timers)
-        
-        return timers
-      } catch (error) {
-        console.error('Error in TimersPage:', error)
-        throw error
-      }
+      const response = await apiFetch('/api/timers?action=list', { signal })
+      if (!response.ok) throw new Error('Failed to fetch timers')
+      const result = await response.json()
+      return result.data || result
     },
     { immediate: true }
   )
@@ -391,16 +417,18 @@ export function TimersPage() {
                 </td>
               </tr>
             ))}
+
           </tbody>
         </table>
       )}
     </AdminListPage>
   )
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Render the admin timers list page with search, filters, sorting, and execution statistics'; No verified external callers; imports: .framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/components/ui/LoadingSpinner.tsx"]
-// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
-// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
-// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 // CIL[END stable_id="~/.framework/src/pages/admin/TimersPage.tsx:TimersPage:component"]
+
+
+
+
+
+
+