spine-framework 0.4.4 → 0.5.0-rc.4

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

@@ -1,12 +1,27 @@
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/PromptConfigDetailPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/pages/admin/PromptConfigDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="Defines the PromptConfigDetailPage React page file, imports dependencies, and declares the PromptConfig interface"]
-// CIL[DOC-RESPONSIBILITY responsibility="Top-of-file module documentation and dependency imports for the prompt config admin detail page"]
-// CIL[DOC-CONTEXT module="prompt-config-admin" layer="page" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.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/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts"]
-// CIL[DOC-CONTRACT inputs="none" outputs="none" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Imports React hooks, router hooks, UI components, API hooks, and utility modules; exports no runtime logic"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="developers"]
+/**
+ * @module   PromptConfigDetailPage
+ * @audience internal
+ * @layer    app-specific
+ * @stability stable
+ *
+ * This module represents the Prompt Configuration Detail page in the admin section of the application, allowing users to view and edit prompt configurations. It integrates various UI components and hooks to manage state and API interactions. INVARIANT: The user must have appropriate permissions to access this page.
+ *
+ * @seeAlso EntitySelect (provides entity selection functionality).
+ * @seeAlso useApi (custom hook for API interactions).
+ * @seeAlso PageInstructions (displays instructions for the page).
+ *
+ * @cil-generated
+ */
+
+
+
+
+
+
+
+
+
 
 
 
@@ -21,6 +36,7 @@ import { Input } from '../../components/ui/input'
 import { Textarea } from '../../components/ui/textarea'
 import { Checkbox } from '../../components/ui/checkbox'
 import { Label } from '../../components/ui/label'
+import { AppSelect } 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'
@@ -28,23 +44,31 @@ import { ArrowLeft, FileText, AlertCircle } from 'lucide-react'
 import { useApi } from '../../hooks/useApi'
 import { apiFetch } from '../../lib/api'
 import { formatDateTime } from '../../lib/utils'
-import { PageInstructions } from '../../components/admin/PageInstructions'
-
-// CIL[DOC-VECTOR type="context" content="purpose='Defines the PromptConfigDetailPage React page file, imports dependencies, and declares the PromptConfig interface'; No verified external callers; imports: .framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/textarea.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/PromptConfigDetailPage.tsx:module_header:module_header"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/PromptConfigDetailPage.tsx:PromptConfig:interface" type="interface" identity="PromptConfig" parent="~/.framework/src/pages/admin/PromptConfigDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="Type definition for prompt configuration records used by the detail page and API"]
-// CIL[DOC-RESPONSIBILITY responsibility="Declare the shape of prompt configuration data"]
-// CIL[DOC-CONTEXT module="prompt-config-admin" layer="domain" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.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/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/PromptConfigDetailPage.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="PromptConfig type interface" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Describes fields for prompt configuration including metadata, model settings, escalation, and runtime options"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+/**
+ * The PromptConfig interface defines the structure for configuration settings related to prompts in the application. It encapsulates various properties that control the behavior and characteristics of prompts used in the system.
+ *
+ * @sideEffects none
+ * @stability   stable
+ * @cil-generated
+ */
 interface PromptConfig {
   id: string
   name: string
@@ -74,22 +98,37 @@ interface PromptConfig {
   created_at: string
   updated_at: string
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Type definition for prompt configuration records used by the detail page and API'; No verified external callers; imports: .framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/textarea.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/PromptConfigDetailPage.tsx:PromptConfig:interface"]
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/PromptConfigDetailPage.tsx:PromptConfigDetailPage:component" type="component" identity="PromptConfigDetailPage" parent="~/.framework/src/pages/admin/PromptConfigDetailPage.tsx"]
-// CIL[DOC-MACRO purpose="Admin page for creating and editing prompt configurations"]
-// CIL[DOC-RESPONSIBILITY responsibility="Render a form for prompt config fields, load existing config, validate JSON, and submit to API"]
-// CIL[DOC-CONTEXT module="prompt-config-admin" layer="page" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/alert.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/skeleton.tsx,.framework/src/components/ui/textarea.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/PromptConfigDetailPage.tsx"]
-// CIL[DOC-CONTRACT inputs="URL id param (optional), apiFetch, useApi hook" outputs="Rendered form UI, API save requests" errors="API fetch/save failures, invalid JSON input" side_effects="Updates form state, calls navigate, shows alert"]
-// CIL[DOC-MICRO logic_summary="Loads prompt config by id, initialises form state, validates JSON arrays/objects, submits create or patch request, and renders card-based form sections"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+/**
+ * The PromptConfigDetailPage component manages the creation and editing of prompt configurations in an admin interface. It fetches existing configurations or initializes a new one based on the provided ID.
+ *
+ * @macro       Component for managing prompt configuration details in an admin panel.
+ * @micro       Uses React hooks to manage state and side effects for form handling and API interactions.
+ * @outputSpec  JSX.Element
+ * @throws      Error — if the API fetch fails
+ * @sideEffects Makes API calls to fetch and submit prompt configurations.
+ * @stability   stable
+ * @calls       useParams, useNavigate, useApi, apiFetch
+ * @errorHandling throws an error if the API fetch fails
+ * @cil-generated
+ */
 export function PromptConfigDetailPage() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -120,6 +159,7 @@ export function PromptConfigDetailPage() {
     is_active: true
   })
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
 
   const { data: config, loading, error } = useApi<PromptConfig>(
     async () => {
@@ -164,6 +204,7 @@ export function PromptConfigDetailPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsSubmitting(true)
+    setFormError(null)
     try {
       let parsedKnowledgeSources: any[]
       let parsedAvailableTools: any[]
@@ -213,7 +254,7 @@ export function PromptConfigDetailPage() {
       const result = await response.json()
       if (isCreateMode) { navigate(`/spine-framework/admin/configs/prompts/${result.config_id || result.id}`) } else { navigate(-1) }
     } catch (err: any) {
-      alert(err.message)
+      setFormError(err.message)
     } finally {
       setIsSubmitting(false)
     }
@@ -255,57 +296,6 @@ export function PromptConfigDetailPage() {
           {isCreateMode ? 'Create Prompt Config' : config?.name || 'Prompt Config'}
         </h1>
       </div>
-
-      <PageInstructions
-        description="Create and manage prompt configurations that define LLM behavior."
-        sections={[
-          { title: 'What this prompt config controls', content: 'A prompt config stores the prompt body, model settings, escalation rules, knowledge sources, available tools, tool constraints, and metadata that AI agents and chat interfaces use at runtime.' },
-          { title: 'Fields explained', content: <ul className="list-disc pl-4 space-y-1">
-            <li><strong>Name *</strong> — string, required. The display and lookup name.</li>
-            <li><strong>Slug *</strong> — string, required. The unique key callers use to select this config.</li>
-            <li><strong>Description</strong> — string, optional. Human-readable purpose.</li>
-            <li><strong>App ID</strong> — uuid, optional. Links this config to a specific app; editable only when creating.</li>
-            <li><strong>System Prompt</strong> — text. Optional base system instructions.</li>
-            <li><strong>Context Template</strong> — text. The prompt body; may include variable placeholders.</li>
-            <li><strong>Model</strong> — string, default gpt-4o. The model to use for this prompt.</li>
-            <li><strong>Temperature</strong> — number, default 0.7. Sampling temperature.</li>
-            <li><strong>Max Tokens</strong> — number, default 4000. Token limit for the response.</li>
-            <li><strong>Is Multi Turn</strong> — checkbox, default true. Whether the prompt supports conversation history.</li>
-            <li><strong>Max History Messages</strong> — number, default 20. Number of prior messages to include.</li>
-            <li><strong>Confidence Threshold</strong> — number, optional. Minimum confidence before taking action.</li>
-            <li><strong>Escalation Action / Target</strong> — strings, optional. Where to route low-confidence results.</li>
-            <li><strong>Output Mode / Field</strong> — strings, optional. How and where to emit the model output.</li>
-            <li><strong>Requires Review</strong> — checkbox, default false. Whether outputs need human review.</li>
-            <li><strong>Knowledge Sources</strong> — JSON array, default []. Data sources the prompt can draw from.</li>
-            <li><strong>Available Tools</strong> — JSON array, default []. Tool definitions the prompt can invoke.</li>
-            <li><strong>Tool Constraints</strong> — JSON object, default {}. Rules restricting tool use.</li>
-            <li><strong>Metadata</strong> — JSON object, default {}. Extra structured data attached to the config.</li>
-            <li><strong>Active</strong> — checkbox, default true. Inactive configs are not returned as candidates.</li>
-          </ul> },
-          { title: 'Options and values', content: <ul className="list-disc pl-4 space-y-1">
-            <li><strong>Model</strong> defaults to <em>gpt-4o</em> if left blank.</li>
-            <li><strong>Temperature</strong> can be any number; 0 is deterministic, higher values produce more random output.</li>
-            <li><strong>JSON fields</strong> must contain valid JSON. Arrays are expected for <em>Knowledge Sources</em> and <em>Available Tools</em>; objects are expected for <em>Tool Constraints</em> and <em>Metadata</em>.</li>
-            <li><strong>Active</strong>: when checked, callers can select this config by slug or default lookup.</li>
-          </ul> },
-          { title: 'Downstream impact', content: <ul className="list-disc pl-4 space-y-1">
-            <li>AI agents and pipelines look up prompts by slug. Missing or inactive configs break those calls.</li>
-            <li>Context Template variables must be supplied by callers; unresolved placeholders remain literal in the rendered text.</li>
-            <li>Malformed JSON in the JSON fields will prevent save and may break runtime callers expecting arrays or objects.</li>
-          </ul> },
-          { title: 'How to create, save, and validate', content: <ol className="list-decimal pl-4 space-y-1">
-            <li>In create mode, enter the required <em>Name</em> and <em>Slug</em>. Optionally set <em>App ID</em>.</li>
-            <li>Fill the <em>Context Template</em> prompt body, model defaults, and any optional escalation/output fields.</li>
-            <li>Paste valid JSON into the four JSON textareas. Click <strong>Create</strong> or <strong>Update</strong> to save.</li>
-          </ol> },
-          { title: 'Common mistakes', content: <ul className="list-disc pl-4 space-y-1">
-            <li>Leaving <em>Slug</em> empty or duplicating an existing slug.</li>
-            <li>Entering JSON arrays as a string or leaving a JSON field completely blank.</li>
-            <li>Setting <em>Max Tokens</em> or <em>Max History Messages</em> to 0 or non-numeric values.</li>
-          </ul> },
-        ]}
-      />
-
       <form onSubmit={handleSubmit} className="space-y-6">
         <Card>
           <CardHeader>
@@ -334,11 +324,10 @@ export function PromptConfigDetailPage() {
               </div>
               {isCreateMode && (
                 <div className="space-y-2">
-                  <Label>App ID</Label>
-                  <Input
+                  <Label>App</Label>
+                  <AppSelect
                     value={formData.app_id}
-                    onChange={(e) => setFormData({ ...formData, app_id: e.target.value })}
-                    placeholder="00000000-0000-0000-0000-000000000000"
+                    onChange={(v) => setFormData({ ...formData, app_id: v })}
                   />
                 </div>
               )}
@@ -424,6 +413,13 @@ export function PromptConfigDetailPage() {
 
 
 
+/**
+ * The constant 'v' captures the value from an event target, typically from a user input field, to facilitate the handling of user input in the component's state management.
+ *
+ * @sideEffects none
+ * @stability   stable
+ * @cil-generated
+ */
                     const v = e.target.value
 
                     setFormData({ ...formData, confidence_threshold: v === '' ? '' : Number(v) })
@@ -577,6 +573,7 @@ export function PromptConfigDetailPage() {
         )}
 
         <div className="flex items-center justify-end gap-3">
+          {formError && <p className="text-sm text-red-600 mr-auto">{formError}</p>}
           <Button type="button" variant="secondary" onClick={() => navigate(-1)}>
             Cancel
           </Button>
@@ -588,13 +585,14 @@ export function PromptConfigDetailPage() {
     </div>
   )
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Admin page for creating and editing prompt configurations'; No verified external callers; imports: .framework/src/components/ui/button.tsx,.framework/src/components/ui/input.tsx,.framework/src/components/ui/textarea.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/PromptConfigDetailPage.tsx:PromptConfigDetailPage:component"]
 
 
 
+
+
+
+
+
+
+

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

@@ -1,12 +1,29 @@
 // CIL[BEGIN stable_id="~/.framework/src/pages/admin/PromptConfigsPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/pages/admin/PromptConfigsPage.tsx"]
-// CIL[DOC-MACRO purpose="Admin prompt config list page module header"]
-// CIL[DOC-RESPONSIBILITY responsibility="Imports React dependencies and admin UI components for prompt configuration management"]
-// CIL[DOC-CONTEXT module="admin-prompt-configs" layer="pages" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.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="none" outputs="none" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Imports React, UI icons, components, hooks, and utilities for the prompt configs page" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="ai-rag"]
+/**
+ * @module   PromptConfigsPage
+ * @audience both
+ * @layer    shared-core
+ * @stability stable
+ *
+ * This module represents the Prompt Configurations page in the admin section of the application, allowing administrators to manage prompt configurations effectively. It utilizes various UI components and hooks to provide a responsive interface for listing and sorting configurations.
+ * INVARIANT: The user must have admin privileges to access this page.
+ *
+ * @seeAlso LoadingSpinner (provides loading feedback for async operations).
+ * @seeAlso Button (used for triggering actions on the page).
+ * @seeAlso AdminListPage (base component for displaying lists in the admin section).
+ * @seeAlso SortableTableHeader (enables sorting functionality for table headers).
+ *
+ * @cil-generated
+ */
+
+
+
+
+
+
+
+
+
 
 
 
@@ -14,6 +31,7 @@
 
 
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Plus, FileText, CheckCircle, Star, Cpu, MessageSquare } from 'lucide-react';
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
 import { Button } from '../../components/ui/button'
@@ -22,23 +40,32 @@ import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
 import { formatDateTime } from '../../lib/utils'
 import { useApi } from '../../hooks/useApi'
 import { apiFetch } from '../../lib/api'
-
-// CIL[DOC-VECTOR type="context" content="purpose='Admin prompt config list page module header'; No verified external callers; imports: .framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/admin/AdminListPage.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/PromptConfigsPage.tsx:module_header:module_header"]
-// CIL[BEGIN stable_id="~/.framework/src/pages/admin/PromptConfigsPage.tsx:PromptConfig:interface" type="interface" identity="PromptConfig" parent="~/.framework/src/pages/admin/PromptConfigsPage.tsx"]
-// CIL[DOC-MACRO purpose="PromptConfig TypeScript interface definition"]
-// CIL[DOC-RESPONSIBILITY responsibility="Declares the shape of prompt configuration records used by the admin page"]
-// CIL[DOC-CONTEXT module="admin-prompt-configs" layer="types" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.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/PromptConfigsPage.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="PromptConfig type" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Defines optional and required fields for prompt config records including model settings, status, and audit timestamps" 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/PromptConfigsPage.tsx:PromptConfig:interface" type="interface" identity="PromptConfig" parent="~/.framework/src/pages/admin/PromptConfigsPage.tsx"]
+/**
+ * The PromptConfig interface defines the structure for configuration objects related to prompts in the application. It encapsulates various properties that dictate the behavior and metadata of prompts.
+ *
+ * @sideEffects none
+ * @stability   internal
+ * @cil-generated
+ */
 interface PromptConfig {
   id: string
   name: string
@@ -49,33 +76,48 @@ interface PromptConfig {
   max_tokens?: number
   is_multi_turn?: boolean
   is_active: boolean
-  is_default?: boolean
-  prompt_type?: string
-  category?: string
+  is_system?: boolean
+  output_mode?: string
   app_id?: string
   app?: any
   created_by?: string
   created_at: string
   updated_at: string
 }
-// CIL[DOC-VECTOR type="context" content="purpose='PromptConfig TypeScript interface definition'; No verified external callers; imports: .framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/admin/AdminListPage.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/PromptConfigsPage.tsx:PromptConfig:interface"]
 
-// CIL[BEGIN stable_id="~/.framework/src/pages/admin/PromptConfigsPage.tsx:PromptConfigsPage:component" type="component" identity="PromptConfigsPage" parent="~/.framework/src/pages/admin/PromptConfigsPage.tsx"]
-// CIL[DOC-MACRO purpose="Renders the admin prompt configurations list page"]
-// CIL[DOC-RESPONSIBILITY responsibility="Loads prompt configs, applies filters and sorting, and renders an AdminListPage with stats and table"]
-// CIL[DOC-CONTEXT module="admin-prompt-configs" layer="pages" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.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/PromptConfigsPage.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="JSX element" errors="useApi error if API fetch fails" side_effects="window navigation on row click"]
-// CIL[DOC-MICRO logic_summary="Fetches prompt configs, filters by search, status, and type, sorts by selected key, and renders stat cards and sortable table rows" 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/PromptConfigsPage.tsx:PromptConfigsPage:component" type="component" identity="PromptConfigsPage" parent="~/.framework/src/pages/admin/PromptConfigsPage.tsx"]
+/**
+ * The PromptConfigsPage component manages the display and filtering of prompt configuration settings in the admin interface. It allows users to search, sort, and navigate to detailed views of prompt configurations.
+ *
+ * @macro       Admin interface component for managing prompt configurations.
+ * @micro       Utilizes state management for search and sorting, and fetches data from an external API.
+ * @outputSpec  JSX.Element — renders the UI for managing prompt configurations.
+ * @throws      Error — if the API fetch fails
+ * @sideEffects Fetches prompt configurations from an external API.
+ * @stability   internal
+ * @calls       useApi, apiFetch, useNavigate
+ * @errorHandling throws an error if the API fetch fails
+ * @cil-generated
+ */
 export function PromptConfigsPage() {
+  const navigate = useNavigate()
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedStatus, setSelectedStatus] = useState('all')
   const [selectedType, setSelectedType] = useState('all')
@@ -99,11 +141,11 @@ export function PromptConfigsPage() {
     const matchesStatus = selectedStatus === 'all' || 
       (selectedStatus === 'active' && config.is_active) ||
       (selectedStatus === 'inactive' && !config.is_active)
-    const matchesType = selectedType === 'all' || config.prompt_type === selectedType
+    const matchesType = selectedType === 'all' || config.output_mode === selectedType
     return matchesSearch && matchesStatus && matchesType
   })
 
-  const promptTypes = Array.from(new Set((promptConfigs || []).map(c => c.prompt_type).filter(Boolean)))
+  const promptTypes = Array.from(new Set((promptConfigs || []).map(c => c.output_mode).filter(Boolean)))
 
   const handleSort = (key: string) => {
     if (sortKey === key) {
@@ -115,7 +157,7 @@ export function PromptConfigsPage() {
   }
 
   const handleRowClick = (config: PromptConfig) => {
-    window.location.href = `/spine-framework/admin/configs/prompts/${config.id}`
+    navigate(`/spine-framework/admin/configs/prompts/${config.id}`)
   }
 
   const sortedConfigs = [...(filteredPromptConfigs || [])].sort((a, b) => {
@@ -149,8 +191,8 @@ export function PromptConfigsPage() {
       iconColor: 'text-green-500'
     },
     {
-      title: 'Default',
-      value: (promptConfigs || []).filter(c => c.is_default).length,
+      title: 'System',
+      value: (promptConfigs || []).filter(c => c.is_system).length,
       icon: Star,
       iconColor: 'text-yellow-500'
     },
@@ -181,7 +223,7 @@ export function PromptConfigsPage() {
       onChange: (v: string) => setSelectedStatus(v)
     },
     {
-      label: 'Type',
+      label: 'Output',
       value: selectedType,
       options: typeOptions,
       onChange: (v: string) => setSelectedType(v)
@@ -231,8 +273,8 @@ export function PromptConfigsPage() {
                 onSort={handleSort}
               />
               <SortableTableHeader
-                title="Type"
-                sortKey="prompt_type"
+                title="Output"
+                sortKey="output_mode"
                 currentSortKey={sortKey}
                 currentSortDirection={sortDirection}
                 onSort={handleSort}
@@ -246,7 +288,7 @@ export function PromptConfigsPage() {
               />
               <SortableTableHeader
                 title="Settings"
-                sortKey="is_default"
+                sortKey="is_system"
                 currentSortKey={sortKey}
                 currentSortDirection={sortDirection}
                 onSort={handleSort}
@@ -287,7 +329,7 @@ export function PromptConfigsPage() {
                   </span>
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm text-slate-600 capitalize">{config.prompt_type || 'General'}</span>
+                  <span className="text-sm text-slate-600 capitalize">{config.output_mode || '—'}</span>
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${
@@ -300,8 +342,8 @@ export function PromptConfigsPage() {
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
                   <div className="flex gap-1">
-                    {config.is_default && (
-                      <span className="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-yellow-100 text-yellow-700">Default</span>
+                    {config.is_system && (
+                      <span className="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-yellow-100 text-yellow-700">System</span>
                     )}
                     {config.is_multi_turn && (
                       <span className="inline-flex px-1.5 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-700">Multi-turn</span>
@@ -322,10 +364,10 @@ export function PromptConfigsPage() {
     </AdminListPage>
   )
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Renders the admin prompt configurations list page'; No verified external callers; imports: .framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/admin/AdminListPage.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/PromptConfigsPage.tsx:PromptConfigsPage:component"]
+// CIL[END stable_id="~/.framework/src/pages/admin/PromptConfigsPage.tsx:PromptConfigsPage:component"]
+
+
+
+
+
+