spine-framework 0.4.3 → 0.5.0-rc.4

package/.framework/src/components/admin/EntitySelect.tsx

@@ -0,0 +1,181 @@
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * @module   EntitySelect
+ * @audience both
+ * @layer    shared-core
+ * @stability stable
+ *
+ * This module provides a React component for selecting entities within the admin interface, leveraging a native select dropdown. It fetches data from an API to populate the selection options, ensuring that the component reflects the current state of available entities.
+ * INVARIANT: The component must always receive valid API response data to function correctly.
+ *
+ * @seeAlso native-select (provides the UI component for selection).
+ * @seeAlso api (handles the data fetching required for populating the select options).
+ *
+ * @cil-generated
+ */
+
+import React, { useEffect, useState } from 'react'
+import { NativeSelect } from '../ui/native-select'
+import { apiFetch } from '../../lib/api'
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:module_header:module_header"]
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:Option:interface" type="interface" identity="Option" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * The Option interface defines the structure for an option item used in selection components. It provides a standardized way to represent selectable items with a value and a label.
+ *
+ * @sideEffects none
+ * @stability   internal
+ * @cil-generated
+ */
+interface Option {
+  value: string
+  label: string
+}
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:Option:interface"]
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:EntitySelectProps:interface" type="interface" identity="EntitySelectProps" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * EntitySelectProps defines the properties required for the EntitySelect component, facilitating the selection of entities from a specified endpoint. It allows for customization of the selection behavior and appearance.
+ *
+ * @sideEffects none
+ * @stability   internal
+ * @cil-generated
+ */
+interface EntitySelectProps {
+  endpoint: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  mapOption?: (row: any) => Option
+  className?: string
+}
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:EntitySelectProps:interface"]
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:defaultMap:function" type="function" identity="defaultMap" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * The defaultMap function transforms a row object into an Option object, providing a standard way to represent entities with a value and label. This is useful for creating dropdowns or selection lists in the admin interface.
+ *
+ * @inputSpec
+ *   row: any (required) — the row object containing entity data.
+ * @outputSpec  Option — an object with 'value' and 'label' properties.
+ * @sideEffects none
+ * @stability   internal
+ * @cil-generated
+ */
+const defaultMap = (row: any): Option => ({
+  value: row.id,
+  label: row.name || row.title || row.slug || row.id,
+})
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:defaultMap:function"]
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:EntitySelect:component" type="component" identity="EntitySelect" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * EntitySelect is a component that allows users to select an entity from a dynamically fetched list of options. It handles API data retrieval and state management to provide a user-friendly interface for entity selection.
+ *
+ * @macro       Dropdown component for selecting entities from an API-driven list.
+ * @micro       Fetches options from a specified endpoint and maps them using a provided mapping function.
+ * @inputSpec
+ *   endpoint: string (required) — the API endpoint to fetch options from.
+ *   value: string (optional) — the currently selected value.
+ *   onChange: function (required) — callback function to handle value changes.
+ *   placeholder: string (optional) — placeholder text for the dropdown.
+ *   mapOption: function (optional) — function to map API response items to dropdown options.
+ *   className: string (optional) — additional CSS class names for styling.
+ * @outputSpec  JSX.Element — renders a NativeSelect component with options.
+ * @sideEffects fetches data from an external API endpoint.
+ * @stability   internal
+ * @calls       apiFetch
+ * @errorHandling sets options to an empty array on fetch failure.
+ * @cil-generated
+ */
+export function EntitySelect({
+  endpoint,
+  value,
+  onChange,
+  placeholder = 'Select…',
+  mapOption = defaultMap,
+  className,
+}: EntitySelectProps) {
+  const [options, setOptions] = useState<Option[]>([])
+
+  useEffect(() => {
+    apiFetch(endpoint)
+      .then(r => r.json())
+      .then(data => {
+        const rows: any[] = data?.data || data?.items || data?.projects || data || []
+        setOptions(rows.map(mapOption))
+      })
+      .catch(() => setOptions([]))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [endpoint])
+
+  const known = options.some(o => o.value === value)
+
+  return (
+    <NativeSelect
+      value={value || ''}
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:EntitySelect:component"]
+
+      onChange={e => onChange(e.target.value)}
+      className={className}
+    >
+      <option value="">{placeholder}</option>
+      {value && !known && <option value={value}>{value}</option>}
+      {options.map(o => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </NativeSelect>
+  )
+}
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:AppSelect:component" type="component" identity="AppSelect" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * AppSelect is a specialized component for selecting applications in the admin interface, providing a predefined endpoint and placeholder to streamline the selection process.
+ *
+ * @macro       Component that facilitates app selection in the admin panel.
+ * @micro       Uses a fixed API endpoint to fetch a list of applications.
+ * @inputSpec
+ *   props: Omit<EntitySelectProps, 'endpoint' | 'placeholder'> — properties for the EntitySelect component.
+ * @outputSpec  JSX.Element — renders the EntitySelect component.
+ * @sideEffects none
+ * @stability   internal
+ * @calls       EntitySelect
+ * @cil-generated
+ */
+export function AppSelect(props: Omit<EntitySelectProps, 'endpoint' | 'placeholder'>) {
+  return <EntitySelect endpoint="/api/apps?action=list" placeholder="No app (global)" {...props} />
+}
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:AppSelect:component"]
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/EntitySelect.tsx:PipelineSelect:component" type="component" identity="PipelineSelect" parent="~/.framework/src/components/admin/EntitySelect.tsx"]
+/**
+ * PipelineSelect is a component that provides a dropdown for selecting a pipeline from a predefined list. It simplifies the usage of the EntitySelect component by pre-configuring the endpoint and placeholder specific to pipelines.
+ *
+ * @macro       Component that renders a selection interface for pipelines.
+ * @micro       Uses the EntitySelect component with a fixed API endpoint for fetching pipeline data.
+ * @inputSpec
+ *   props: Omit<EntitySelectProps, 'endpoint' | 'placeholder'> — properties for the EntitySelect component excluding endpoint and placeholder.
+ * @outputSpec  JSX.Element — renders the EntitySelect component.
+ * @sideEffects none
+ * @stability   internal
+ * @calls       EntitySelect
+ * @cil-generated
+ */
+export function PipelineSelect(props: Omit<EntitySelectProps, 'endpoint' | 'placeholder'>) {
+  return <EntitySelect endpoint="/api/pipelines?action=list" placeholder="Select a pipeline…" {...props} />
+}
+// CIL[END stable_id="~/.framework/src/components/admin/EntitySelect.tsx:PipelineSelect:component"]
+

package/.framework/src/components/admin/PageInstructions.tsx

@@ -1,145 +1,104 @@
-// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:module_header:module_header"]
-// CIL[DOC-MACRO purpose="Top-level module header for the PageInstructions React component."]
-// CIL[DOC-RESPONSIBILITY responsibility="Declare imports, exports, and the public surface of this module."]
-// CIL[DOC-CONTEXT module="admin" layer="components" related_files=".framework/src/components/ui/card.tsx,.framework/src/components/ui/collapsible.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="module exports" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Aggregates imports and exports for the collapsible page instructions UI component." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="module authors and consumers"]
-
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
 import * as React from 'react'
-import { ChevronDown } from 'lucide-react'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible'
-import { Card, CardContent } from '../ui/card'
-
-// CIL[DOC-VECTOR type="context" content="purpose='Top-level module header for the PageInstructions React component.'; No verified external callers; imports: .framework/src/components/ui/collapsible.tsx,.framework/src/components/ui/card.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"]
+import { BookOpen } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Button } from '../ui/button'
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../ui/sheet'
 // CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:module_header:module_header"]
 
-// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:cleancilmarkers:function"]
-// CIL[DOC-MACRO purpose="Remove CIL marker comments from rendered text nodes."]
-// CIL[DOC-RESPONSIBILITY responsibility="Sanitize raw content before rendering so CIL tags do not leak into the UI."]
-// CIL[DOC-CONTEXT module="admin" layer="components" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/collapsible.tsx"]
-// CIL[DOC-CONTRACT inputs="content: React.ReactNode" outputs="React.ReactNode with CIL comment lines removed" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Returns non-string content unchanged; for strings, removes lines starting with // CIL[, collapses excess blank lines, and trims." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:instructionModules:constant" type="constant" identity="instructionModules" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+const instructionModules = import.meta.glob('../../instructions/**/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:instructionModules:constant"]
 
-function cleanCilMarkers(content: React.ReactNode): React.ReactNode {
-  if (typeof content !== 'string') return content
-  return content
-    .split('\n')
-    .filter(line => !line.trim().startsWith('// CIL['))
-    .join('\n')
-    .replace(/\n{3,}/g, '\n\n')
-    .trim()
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:instructionDocs:constant" type="constant" identity="instructionDocs" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+const instructionDocs: Record<string, string> = {}
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:instructionDocs:constant"]
+for (const [path, content] of Object.entries(instructionModules)) {
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:key:constant" type="constant" identity="key" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+  const key = path.replace(/^.*instructions\//, '').replace(/\.md$/, '')
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:key:constant"]
+  if (key) instructionDocs[key] = content
 }
 
-// CIL[DOC-VECTOR type="context" content="purpose='Remove CIL marker comments from rendered text nodes.'; No verified external callers; imports: .framework/src/components/ui/collapsible.tsx,.framework/src/components/ui/card.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/components/admin/PageInstructions.tsx:cleancilmarkers:function"]
-
-// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:pageinstructionssection:interface"]
-// CIL[DOC-MACRO purpose="Type contract for a single collapsible section inside PageInstructions."]
-// CIL[DOC-RESPONSIBILITY responsibility="Define the title and content shape expected by the PageInstructions component."]
-// CIL[DOC-CONTEXT module="admin" layer="components" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/collapsible.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="TypeScript interface" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Declares a section with a string title and arbitrary React content." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-
-export interface PageInstructionsSection {
-  title: string
-  content: React.ReactNode
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:PAGE_TITLES:constant" type="constant" identity="PAGE_TITLES" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+const PAGE_TITLES: Record<string, string> = {
+  types: 'Types',
+  apps: 'Apps',
+  pipelines: 'Pipelines',
+  triggers: 'Triggers',
+  'ai-agents': 'AI Agents',
+  timers: 'Timers',
+  integrations: 'Integrations',
+  roles: 'Roles',
+  prompts: 'Prompt Configs',
+  'api-keys': 'API Keys',
+  deliveries: 'Deliveries',
+  'runtime-list': 'Records',
+  'runtime-detail': 'Record',
 }
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:PAGE_TITLES:constant"]
 
-// CIL[DOC-VECTOR type="context" content="purpose='Type contract for a single collapsible section inside PageInstructions.'; No verified external callers; imports: .framework/src/components/ui/collapsible.tsx,.framework/src/components/ui/card.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/components/admin/PageInstructions.tsx:pageinstructionssection:interface"]
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:displayTitle:function" type="function" identity="displayTitle" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+function displayTitle(pageKey: string): string {
+  return (
+    PAGE_TITLES[pageKey] ??
+    pageKey
+      .split(/[-_]/)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  )
+}
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:displayTitle:function"]
 
-// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:pageinstructionsprops:interface"]
-// CIL[DOC-MACRO purpose="Props interface for the PageInstructions component."]
-// CIL[DOC-RESPONSIBILITY responsibility="Document the public configuration options accepted by PageInstructions."]
-// CIL[DOC-CONTEXT module="admin" layer="components" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/collapsible.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="TypeScript interface" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Optional title, description node, and an array of sections." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:cleanMarkdown:function" type="function" identity="cleanMarkdown" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+function cleanMarkdown(markdown: string): string {
+  return markdown
+    .split('\n')
+    .filter((line) => !line.trim().startsWith('// CIL['))
+    .join('\n')
+    .trim()
+}
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:cleanMarkdown:function"]
 
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:PageInstructionsProps:interface" type="interface" identity="PageInstructionsProps" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
 export interface PageInstructionsProps {
+  pageKey: string
   title?: string
-  description?: React.ReactNode
-  sections?: PageInstructionsSection[]
 }
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:PageInstructionsProps:interface"]
 
-// CIL[DOC-VECTOR type="context" content="purpose='Props interface for the PageInstructions component.'; No verified external callers; imports: .framework/src/components/ui/collapsible.tsx,.framework/src/components/ui/card.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/components/admin/PageInstructions.tsx:pageinstructionsprops:interface"]
-
-// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:pageinstructions:function"]
-// CIL[DOC-MACRO purpose="Render a collapsible card containing optional description and instruction sections."]
-// CIL[DOC-RESPONSIBILITY responsibility="Display page-level help or instructions in a collapsible UI widget."]
-// CIL[DOC-CONTEXT module="admin" layer="components" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/collapsible.tsx"]
-// CIL[DOC-CONTRACT inputs="props: PageInstructionsProps" outputs="JSX element or null" errors="none" side_effects="renders UI"]
-// CIL[DOC-MICRO logic_summary="Returns null when no content is provided; otherwise renders a Card with a Collapsible trigger and filtered description/section content." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-
-export function PageInstructions({
-  title = 'Page instructions',
-  description,
-  sections,
-}: PageInstructionsProps) {
-  if (!description && (!sections || sections.length === 0)) return null
+// CIL[BEGIN stable_id="~/.framework/src/components/admin/PageInstructions.tsx:PageInstructions:component" type="component" identity="PageInstructions" parent="~/.framework/src/components/admin/PageInstructions.tsx"]
+export function PageInstructions({ pageKey, title }: PageInstructionsProps) {
+  const markdown = instructionDocs[pageKey]
+  if (!markdown) return null
 
   return (
-    <Card>
-      <CardContent className="p-4">
-        <Collapsible>
-          <CollapsibleTrigger className="group flex w-full items-center justify-between text-sm font-medium text-slate-700">
-            <span>{title}</span>
-            <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
-          </CollapsibleTrigger>
-          <CollapsibleContent className="space-y-4 pt-4">
-            {description && <div className="text-sm text-slate-600">{cleanCilMarkers(description)}</div>}
-            {sections && sections.length > 0 && (
-              <div className="space-y-3">
-                {sections.map((section, i) => (
-                  <div key={i}>
-                    <div className="text-sm font-semibold text-slate-700">{section.title}</div>
-                    <div className="mt-1 text-sm text-slate-600">{cleanCilMarkers(section.content)}</div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CollapsibleContent>
-        </Collapsible>
-      </CardContent>
-    </Card>
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-7 gap-1.5 px-2.5 text-xs text-muted-foreground hover:text-foreground">
+          <BookOpen className="h-3.5 w-3.5" />
+          Instructions
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-full sm:max-w-xl">
+        <SheetHeader className="border-b pr-12">
+          <SheetTitle>{title ?? displayTitle(pageKey)}</SheetTitle>
+          <SheetDescription className="sr-only">
+            Instructions and reference for this page
+          </SheetDescription>
+        </SheetHeader>
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">
+          <div className="prose prose-sm prose-slate max-w-none">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{cleanMarkdown(markdown)}</ReactMarkdown>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
   )
 }
-
-// CIL[DOC-VECTOR type="context" content="purpose='Render a collapsible card containing optional description and instruction sections.'; No verified external callers; imports: .framework/src/components/ui/collapsible.tsx,.framework/src/components/ui/card.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/components/admin/PageInstructions.tsx:pageinstructions:function"]
+// CIL[END stable_id="~/.framework/src/components/admin/PageInstructions.tsx:PageInstructions:component"]

package/.framework/src/components/app-shell/GenericAppShell.tsx

@@ -12,6 +12,7 @@ import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-
 import { AppRecord } from '../../hooks/useApps'
 import { GenericListPage } from './GenericListPage'
 import { GenericDetailPage } from './GenericDetailPage'
+import { useBranding } from '../../hooks/useBranding'
 // CIL[DOC-VECTOR type="context" content="purpose='Module imports and re-exports for the GenericAppShell component'; No verified external callers; imports: .framework/src/hooks/useApps.ts,.framework/src/components/app-shell/GenericListPage.tsx,.framework/src/components/app-shell/GenericDetailPage.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"]
@@ -76,6 +77,7 @@ export function GenericAppShell({ app }: GenericAppShellProps) {
   const navigate = useNavigate()
   const location = useLocation()
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const branding = useBranding()
 
   const navItems: NavItem[] = (app.nav_items || []) as NavItem[]
 
@@ -98,7 +100,7 @@ export function GenericAppShell({ app }: GenericAppShellProps) {
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
       `}>
         <div className="flex items-center gap-3 h-16 px-6 border-b border-slate-200">
-          <img src="/spine-logo.svg" alt="Spine Framework" className="h-8 w-auto shrink-0" />
+          <img src={branding.logo_url} alt={branding.app_name} className="h-8 w-auto shrink-0" />
           <div>
             <h2 className="font-semibold text-slate-900 text-sm">{app.name}</h2>
             {app.description && (

package/.framework/src/components/app-shell/GenericDetailPage.tsx

@@ -10,17 +10,17 @@
 
 import { useState, useEffect } from 'react'
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom'
+import { apiFetch } from '../../lib/api'
 import { useEntityRecord } from '../../hooks/useEntityRecord'
 import { DataDetailHeader } from '../runtime/DataDetailHeader'
 import { SchemaDetailForm } from '../runtime/SchemaDetailForm'
+// CIL[END stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:module_header:module_header"]
 // CIL[DOC-VECTOR type="context" content="purpose='Imports and module setup for the generic detail page'; No verified external callers; imports: .framework/src/hooks/useEntityRecord.ts,.framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/SchemaDetailForm.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/components/app-shell/GenericDetailPage.tsx:module_header:module_header"]
-// CIL[BEGIN stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:GenericDetailPageProps:interface" type="interface" identity="GenericDetailPageProps" parent="~/.framework/src/components/app-shell/GenericDetailPage.tsx"]
 // CIL[DOC-MACRO purpose="Props interface for GenericDetailPage"]
 // CIL[DOC-RESPONSIBILITY responsibility="Define the expected props for the detail page"]
 // CIL[DOC-CONTEXT module="app-shell" layer="framework" related_files=".framework/src/components/app-shell/GenericDetailPage.tsx,.framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/SchemaDetailForm.tsx,.framework/src/hooks/useEntityRecord.ts"]
@@ -28,21 +28,21 @@ import { SchemaDetailForm } from '../runtime/SchemaDetailForm'
 // CIL[DOC-MICRO logic_summary="TypeScript interface describing typeSlug, viewSlug, and isCreating" notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:GenericDetailPageProps:interface" type="interface" identity="GenericDetailPageProps" parent="~/.framework/src/components/app-shell/GenericDetailPage.tsx"]
 interface GenericDetailPageProps {
   typeSlug: string
   viewSlug?: string
   isCreating?: boolean
 }
+// CIL[END stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:GenericDetailPageProps:interface"]
 // CIL[DOC-VECTOR type="context" content="purpose='Props interface for GenericDetailPage'; No verified external callers; imports: .framework/src/hooks/useEntityRecord.ts,.framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/SchemaDetailForm.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/components/app-shell/GenericDetailPage.tsx:GenericDetailPageProps:interface"]
 
 
-// CIL[BEGIN stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:GenericDetailPage:component" type="component" identity="GenericDetailPage" parent="~/.framework/src/components/app-shell/GenericDetailPage.tsx"]
 // CIL[DOC-MACRO purpose="Render the generic detail page for an app type"]
 // CIL[DOC-RESPONSIBILITY responsibility="Display, edit, create, and delete records driven by a design schema"]
 // CIL[DOC-CONTEXT module="app-shell" layer="framework" related_files=".framework/src/components/app-shell/GenericDetailPage.tsx,.framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/SchemaDetailForm.tsx,.framework/src/hooks/useEntityRecord.ts"]
@@ -50,6 +50,7 @@ interface GenericDetailPageProps {
 // CIL[DOC-MICRO logic_summary="Load record with useEntityRecord, resolve detail view, initialize form data, and render DataDetailHeader and SchemaDetailForm" notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:GenericDetailPage:component" type="component" identity="GenericDetailPage" parent="~/.framework/src/components/app-shell/GenericDetailPage.tsx"]
 export function GenericDetailPage({ typeSlug, viewSlug, isCreating: forceCreate }: GenericDetailPageProps) {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -83,10 +84,31 @@ export function GenericDetailPage({ typeSlug, viewSlug, isCreating: forceCreate
     deleting
   } = useEntityRecord('items', id, config)
 
-  
-  const schema = record?.design_schema || null
-  const resolvedDetailView = viewSlug
-    ? schema?.views?.[viewSlug] || schema?.views?.default_detail
+  // In create mode there is no record to take a stamped design_schema from —
+  // resolve it from the type instead (get_type_schema RPC via /api/types).
+  const [typeSchema, setTypeSchema] = useState<any>(null)
+  const [schemaLoading, setSchemaLoading] = useState(false)
+  useEffect(() => {
+    if (!isCreating) return
+    let cancelled = false
+    setSchemaLoading(true)
+    apiFetch(`/api/types?action=schema&kind=item&slug=${encodeURIComponent(typeSlug)}`)
+      .then(async (res) => {
+        const result = await res.json()
+        const ds = (result.data ?? result)?.design_schema
+        if (!cancelled) setTypeSchema(ds && Object.keys(ds).length ? ds : null)
+      })
+      .catch(() => { if (!cancelled) setTypeSchema(null) })
+      .finally(() => { if (!cancelled) setSchemaLoading(false) })
+    return () => { cancelled = true }
+  }, [isCreating, typeSlug])
+
+  const schema = record?.design_schema || typeSchema || null
+  // nav_item `view` is a single slug shared by list + detail pages; a
+  // list-shaped view (fields, no sections) must not resolve here.
+  const namedView = viewSlug ? schema?.views?.[viewSlug] : null
+  const resolvedDetailView = namedView && (namedView.type === 'detail' || namedView.sections)
+    ? namedView
     : schema?.views?.default_detail
   const view = resolvedDetailView || null
 
@@ -175,7 +197,7 @@ export function GenericDetailPage({ typeSlug, viewSlug, isCreating: forceCreate
     }
   }
 
-  if (loading) {
+  if (loading || schemaLoading) {
     return (
       <div className="p-8 text-center">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
@@ -193,11 +215,13 @@ export function GenericDetailPage({ typeSlug, viewSlug, isCreating: forceCreate
     )
   }
 
-  if (!schema && !isCreating) {
+  if (!schema) {
     return (
       <div className="p-8 text-center">
         <h2 className="text-lg font-medium text-slate-900">No schema available</h2>
-        <p className="mt-2 text-sm text-slate-500">This record does not have a design_schema.</p>
+        <p className="mt-2 text-sm text-slate-500">
+          {isCreating ? `No design_schema found for type "${typeSlug}".` : 'This record does not have a design_schema.'}
+        </p>
       </div>
     )
   }
@@ -233,10 +257,10 @@ export function GenericDetailPage({ typeSlug, viewSlug, isCreating: forceCreate
     </div>
   )
 }
+// CIL[END stable_id="~/.framework/src/components/app-shell/GenericDetailPage.tsx:GenericDetailPage:component"]
 // CIL[DOC-VECTOR type="context" content="purpose='Render the generic detail page for an app type'; No verified external callers; imports: .framework/src/hooks/useEntityRecord.ts,.framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/SchemaDetailForm.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/components/app-shell/GenericDetailPage.tsx:GenericDetailPage:component"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]