spine-framework 0.4.3 → 0.5.0-rc.4

package/.framework/src/components/runtime/DataDetailPage.tsx

@@ -1,40 +1,71 @@
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataDetailPage.tsx:module_header:module_header"]
-// CIL[DOC-MACRO purpose="Module-level imports and component entry point for the runtime data detail page."]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide React imports, route and UI component dependencies, and declare the DataDetailPage module."]
-// CIL[DOC-CONTEXT module="runtime" layer="presentation" related_files=".framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/SchemaDetailForm.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/hooks/useEntityRecord.ts"]
-// CIL[DOC-CONTRACT inputs="none" outputs="rendered DataDetailPage component and imported dependencies" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Imports React hooks, router hooks, the useEntityRecord hook, and child UI components; contains no runtime logic." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="developers, maintainers"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataDetailPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/runtime/DataDetailPage.tsx"]
+/**
+ * @module   DataDetailPage
+ * @audience both
+ * @layer    shared-core
+ * @stability stable
+ *
+ * This module provides the DataDetailPage component, which displays detailed information about a specific entity record. It integrates various UI components and hooks to fetch and manage the entity's data, allowing users to view and edit details seamlessly.
+ * INVARIANT: The entity record must exist for the page to render correctly.
+ *
+ * @seeAlso useEntityRecord (fetches the entity data needed for display).
+ * @seeAlso DataDetailHeader (renders the header for the detail page).
+ * @seeAlso SchemaDetailForm (provides the form for editing entity details).
+ *
+ * @cil-generated
+ */
+
+
+
+
+
+
+
+
+
 
 
 
 import { useState, useEffect } from 'react'
-import { useParams, useSearchParams } from 'react-router-dom'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { useEntityRecord } from '../../hooks/useEntityRecord'
 import { DataDetailHeader } from './DataDetailHeader'
 import { SchemaDetailForm } from './SchemaDetailForm'
 import { Button } from '../ui/button'
 import { Card, CardContent } from '../ui/card'
 import { Skeleton } from '../ui/skeleton'
-
-// CIL[DOC-VECTOR type="context" content="purpose='Module-level imports and component entry point for the runtime data 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/runtime/DataDetailPage.tsx:module_header:module_header"]
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataDetailPage.tsx:datadetailpage:function"]
-// CIL[DOC-MACRO purpose="Render a detail/edit page for a runtime entity record using its design schema and the useEntityRecord hook."]
-// CIL[DOC-RESPONSIBILITY responsibility="Fetch and display a record, handle create/edit/delete flows, field changes, and cancel/save/delete actions, and render the detail form."]
-// CIL[DOC-CONTEXT module="runtime" layer="presentation" related_files=".framework/src/components/runtime/DataDetailHeader.tsx,.framework/src/components/runtime/DataDetailPage.tsx,.framework/src/components/runtime/SchemaDetailForm.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/hooks/useEntityRecord.ts"]
-// CIL[DOC-CONTRACT inputs="URL params (entity, id, typeSlug), search params (edit)" outputs="JSX for loading, error, or detail form" errors="Failed to load record or schema; save/delete errors bubble via useEntityRecord" side_effects="Updates search params; navigates on create/cancel/delete; calls useEntityRecord save/delete; uses browser confirm dialog"]
-// CIL[DOC-MICRO logic_summary="Uses useParams and useSearchParams, derives recordId and isCreating/isEditing, builds a config for useEntityRecord, initializes formData from schema sections, and handles field change, edit, save, delete, and cancel actions." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataDetailPage.tsx:DataDetailPage:component" type="component" identity="DataDetailPage" parent="~/.framework/src/components/runtime/DataDetailPage.tsx"]
+/**
+ * The DataDetailPage component manages the display and editing of detailed records for various entities in the application. It handles navigation, data fetching, and form state management based on the entity type and record ID.
+ *
+ * @macro       Component responsible for rendering and managing entity detail views.
+ * @micro       Utilizes React hooks for state management and side effects, and dynamically configures based on entity parameters.
+ * @outputSpec  JSX.Element
+ * @sideEffects Fetches data from the API, updates URL search parameters, and navigates to different routes.
+ * @stability   internal
+ * @calls       useNavigate, useParams, useSearchParams, useEntityRecord
+ * @cil-generated
+ */
 export function DataDetailPage() {
+  const navigate = useNavigate()
   const { entity, id, typeSlug } = useParams<{ entity: string; id: string; typeSlug?: string }>()
   const [searchParams, setSearchParams] = useSearchParams()
   
@@ -120,7 +151,7 @@ export function DataDetailPage() {
   
   const handleCancel = () => {
     if (isCreating) {
-      window.location.href = `/spine-framework/admin/runtime/${entity}`
+      navigate(`/spine-framework/admin/runtime/${entity}`)
     } else {
       setSearchParams({})
       if (record && view) {
@@ -146,14 +177,14 @@ export function DataDetailPage() {
     if (!isCreating) {
       setSearchParams({})
     } else {
-      window.location.href = `/spine-framework/admin/runtime/${entity}`
+      navigate(`/spine-framework/admin/runtime/${entity}`)
     }
   }
   
   const handleDelete = async () => {
     if (confirm(`Are you sure you want to delete this ${config?.entity?.slice(0, -1) || 'record'}?`)) {
       await deleteRecord()
-      window.location.href = `/spine-framework/admin/runtime/${entity}`
+      navigate(`/spine-framework/admin/runtime/${entity}`)
     }
   }
   
@@ -186,6 +217,8 @@ export function DataDetailPage() {
         entity={config.entity}
         icon={config.icon}
         title={isCreating ? `New ${config.entity.slice(0, -1)}` : recordTitle}
+// CIL[END stable_id="~/.framework/src/components/runtime/DataDetailPage.tsx:DataDetailPage:component"]
+
         isEditing={isEditing}
         isCreating={isCreating}
         onEdit={handleEdit}
@@ -209,10 +242,9 @@ export function DataDetailPage() {
     </div>
   )
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Render a detail/edit page for a runtime entity record using its design schema and the useEntityRecord hook.'; 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/runtime/DataDetailPage.tsx:datadetailpage:function"]
+
+
+
+
+
+

package/.framework/src/components/runtime/DataHeader.tsx

@@ -1,61 +1,108 @@
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataHeader.tsx:module_header:module_header" type="module_header" identity="module_header" parent="none"]
-// CIL[DOC-MACRO purpose="Provide the module-level imports and dependencies for the DataHeader runtime component."]
-// CIL[DOC-RESPONSIBILITY responsibility="Import React, the Button component, and the lucide-react icon library used by DataHeader."]
-// CIL[DOC-CONTEXT module="runtime-data-header" layer="ui" related_files=".framework/src/components/ui/button.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="imported modules available to the file" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Imports React, the local Button component, and the full lucide-react icon library." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="ui-developers"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataHeader.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/runtime/DataHeader.tsx"]
+/**
+ * @module   DataHeader
+ * @audience both
+ * @layer    shared-core
+ * @stability stable
+ *
+ * This module defines the DataHeader component, which is responsible for rendering the header section of the data display interface in the application. It leverages React for UI rendering and integrates with React Router for navigation. INVARIANT: The component must always receive valid data props to render correctly.
+ *
+ * @seeAlso button.tsx (provides UI button functionality).
+ * @seeAlso react-router-dom (enables navigation within the app).
+ * @seeAlso lucide-react (provides iconography used in the component).
+ *
+ * @cil-generated
+ */
+
+
+
+
+
+
+
+
+
 
 
 
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Button } from '../ui/button'
 import * as Icons from 'lucide-react'
+// CIL[END stable_id="~/.framework/src/components/runtime/DataHeader.tsx:module_header:module_header"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
-// CIL[DOC-VECTOR type="context" content="purpose='Provide the module-level imports and dependencies for the DataHeader runtime component.'; No verified external callers; imports: .framework/src/components/ui/button.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/runtime/DataHeader.tsx:module_header:module_header"]
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataHeader.tsx:dataheaderprops:interface" type="interface" identity="DataHeaderProps" parent="none"]
-// CIL[DOC-MACRO purpose="Define the prop contract for the DataHeader component."]
-// CIL[DOC-RESPONSIBILITY responsibility="Describe the expected properties for rendering a DataHeader: title, icon, description, and newButtonHref."]
-// CIL[DOC-CONTEXT module="runtime-data-header" layer="ui" related_files=".framework/src/components/runtime/DataHeader.tsx,.framework/src/components/ui/button.tsx"]
-// CIL[DOC-CONTRACT inputs="none" outputs="DataHeaderProps TypeScript interface" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Declares a TypeScript interface with title, icon, description, and newButtonHref fields." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
 
+
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataHeader.tsx:DataHeaderProps:interface" type="interface" identity="DataHeaderProps" parent="~/.framework/src/components/runtime/DataHeader.tsx"]
+/**
+ * DataHeaderProps defines the properties required for rendering a data header component, providing essential metadata such as title, icon, description, and a link for a new button.
+ *
+ * @sideEffects none
+ * @stability   internal
+ * @cil-generated
+ */
 interface DataHeaderProps {
   title: string
   icon: string
   description: string
   newButtonHref: string
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Define the prop contract for the DataHeader component.'; No verified external callers; imports: .framework/src/components/ui/button.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/runtime/DataHeader.tsx:dataheaderprops:interface"]
-
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataHeader.tsx:dataheader:function" type="function" identity="DataHeader" parent="none"]
-// CIL[DOC-MACRO purpose="Render a page header with an icon, title, description, and a New action button."]
-// CIL[DOC-RESPONSIBILITY responsibility="Display the header for a data list page and provide a primary CTA linking to the new resource form."]
-// CIL[DOC-CONTEXT module="runtime-data-header" layer="ui" related_files=".framework/src/components/runtime/DataHeader.tsx,.framework/src/components/ui/button.tsx"]
-// CIL[DOC-CONTRACT inputs="title: string, icon: string, description: string, newButtonHref: string" outputs="Rendered JSX header with icon and button" errors="none" side_effects="sets window.location.href on button click, looks up icon from lucide-react"]
-// CIL[DOC-MICRO logic_summary="Resolves a dynamic lucide-react icon component, renders a title, description, and a button labeled with the singular title." notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
+// CIL[END stable_id="~/.framework/src/components/runtime/DataHeader.tsx:DataHeaderProps:interface"]
+
+
+
+
+
+
+
+
+
+
+
+
 
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataHeader.tsx:DataHeader:component" type="component" identity="DataHeader" parent="~/.framework/src/components/runtime/DataHeader.tsx"]
+/**
+ * DataHeader is a React component that displays a header with a title, icon, and description, along with a button to create a new item. It facilitates navigation to a specified URL when the button is clicked.
+ *
+ * @macro       Header component for displaying metadata and navigation options.
+ * @micro       Dynamically selects an icon component based on the provided icon name.
+ * @inputSpec
+ *   title: string (required) — the title to display in the header.
+ *   icon: string (required) — the name of the icon to display.
+ *   description: string (optional) — a brief description displayed under the title.
+ *   newButtonHref: string (required) — the URL to navigate to when the button is clicked.
+ * @outputSpec  JSX.Element — renders a header with title, icon, description, and a button.
+ * @sideEffects navigates to a new URL when the button is clicked.
+ * @stability   internal
+ * @calls       useNavigate
+ * @cil-generated
+ */
 export function DataHeader({ title, icon, description, newButtonHref }: DataHeaderProps) {
+  const navigate = useNavigate()
   // Dynamically get the icon component
   const IconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[icon] || Icons.Box
 
@@ -74,7 +121,9 @@ export function DataHeader({ title, icon, description, newButtonHref }: DataHead
       </div>
 
       <Button
-        onClick={() => window.location.href = newButtonHref}
+        onClick={() => navigate(newButtonHref)}
+// CIL[END stable_id="~/.framework/src/components/runtime/DataHeader.tsx:DataHeader:component"]
+
         className="flex items-center gap-2"
       >
         <Icons.Plus className="h-4 w-4" />
@@ -83,10 +132,9 @@ export function DataHeader({ title, icon, description, newButtonHref }: DataHead
     </div>
   )
 }
-// CIL[DOC-VECTOR type="context" content="purpose='Render a page header with an icon, title, description, and a New action button.'; No verified external callers; imports: .framework/src/components/ui/button.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/runtime/DataHeader.tsx:dataheader:function"]
+
+
+
+
+
+

package/.framework/src/components/runtime/DataListPage.tsx

@@ -15,18 +15,16 @@ import { DataHeader } from './DataHeader'
 import { DataStats } from './DataStats'
 import { DataFilters } from './DataFilters'
 import { DataTable } from './DataTable'
-import { PageInstructions } from '../admin/PageInstructions'
 import { Card, CardContent } from '../ui/card'
 import { Skeleton } from '../ui/skeleton'
+// CIL[END stable_id="~/.framework/src/components/runtime/DataListPage.tsx:module_header:module_header"]
 // CIL[DOC-VECTOR type="context" content="purpose='Import the hooks and child components used by the DataListPage runtime list view'; No verified external callers; imports: .framework/src/hooks/useListSchema.ts,.framework/src/hooks/useEntityList.ts,.framework/src/components/runtime/DataHeader.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/runtime/DataListPage.tsx:module_header:module_header"]
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataListPage.tsx:DataListPage:component" type="component" identity="DataListPage" parent="~/.framework/src/components/runtime/DataListPage.tsx"]
 // CIL[DOC-MACRO purpose="Render a schema-driven list page for runtime entity records with stats, filters, and a sortable data table"]
 // CIL[DOC-RESPONSIBILITY responsibility="Fetch the list schema, build the column/filter configuration, load entity list data, and render header/stats/filters/table with loading and error states"]
 // CIL[DOC-CONTEXT module="components/runtime" layer="runtime" related_files=".framework/src/components/admin/PageInstructions.tsx,.framework/src/components/runtime/DataFilters.tsx,.framework/src/components/runtime/DataHeader.tsx,.framework/src/components/runtime/DataListPage.tsx,.framework/src/components/runtime/DataStats.tsx,.framework/src/components/runtime/DataTable.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/hooks/useEntityList.ts,.framework/src/hooks/useListSchema.ts"]
@@ -35,6 +33,7 @@ import { Skeleton } from '../ui/skeleton'
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
 
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataListPage.tsx:DataListPage:component" type="component" identity="DataListPage" parent="~/.framework/src/components/runtime/DataListPage.tsx"]
 export function DataListPage() {
   const { entity, typeSlug } = useParams<{ entity: string; typeSlug?: string }>()
 
@@ -120,28 +119,6 @@ export function DataListPage() {
         description={`Manage ${config.entity}`}
         newButtonHref={`/spine-framework/admin/runtime/${entity}/new`}
       />
-
-      <PageInstructions
-        sections={[
-          {
-            title: 'What this page is for',
-            content: `This page is a schema-driven list for ${config.entity} records. It displays the records stored in the system, their field values, and current status based on the type definition.`,
-          },
-          {
-            title: 'How to find records',
-            content: `Use the filters above the table to narrow results. Click any column header to sort ascending or descending. The available columns and filters are defined by the type schema.`,
-          },
-          {
-            title: 'How to create, view, and edit records',
-            content: `Click the New button in the top-right to create a new ${config.entity}. Click any row to open its detail view. From the detail view you can edit field values or delete the record. Some records may have restricted permissions based on your role.`,
-          },
-          {
-            title: 'Understanding the stats',
-            content: `The cards above the table show summary counts and key metrics for this record type. Use them to quickly assess volume and status before drilling into the list.`,
-          },
-        ]}
-      />
-
       <DataStats
         stats={config.list.stats}
         data={data}
@@ -170,10 +147,10 @@ export function DataListPage() {
     </div>
   )
 }
+// CIL[END stable_id="~/.framework/src/components/runtime/DataListPage.tsx:DataListPage:component"]
 // CIL[DOC-VECTOR type="context" content="purpose='Render a schema-driven list page for runtime entity records with stats, filters, and a sortable data table'; No verified external callers; imports: .framework/src/hooks/useListSchema.ts,.framework/src/hooks/useEntityList.ts,.framework/src/components/runtime/DataHeader.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/runtime/DataListPage.tsx:DataListPage:component"]

package/.framework/src/components/runtime/DataStats.tsx

@@ -1,4 +1,4 @@
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:module_header:module_header"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/runtime/DataStats.tsx"]
 // CIL[DOC-MACRO purpose="Module header for the DataStats runtime component"]
 // CIL[DOC-RESPONSIBILITY responsibility="Declare imports and dependencies for the DataStats component"]
 // CIL[DOC-CONTEXT module="DataStats" layer="runtime" related_files=".framework/src/components/ui/card.tsx,.framework/src/types/types.ts"]
@@ -13,6 +13,7 @@
 import { EntityStat } from '../../types/types'
 import { Card, CardContent } from '../ui/card'
 import * as Icons from 'lucide-react'
+// CIL[END stable_id="~/.framework/src/components/runtime/DataStats.tsx:module_header:module_header"]
 
 // CIL[DOC-VECTOR type="context" content="purpose='Module header for the DataStats runtime component'; No verified external callers; imports: .framework/src/types/types.ts,.framework/src/components/ui/card.tsx"]
 // CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
@@ -20,9 +21,7 @@ import * as Icons from 'lucide-react'
 // 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/runtime/DataStats.tsx:module_header:module_header"]
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:datastatsprops:interface"]
 // CIL[DOC-MACRO purpose="DataStats component prop type"]
 // CIL[DOC-RESPONSIBILITY responsibility="Define the shape of props accepted by DataStats"]
 // CIL[DOC-CONTEXT module="DataStats" layer="runtime" related_files=".framework/src/components/runtime/DataStats.tsx,.framework/src/components/ui/card.tsx,.framework/src/types/types.ts"]
@@ -30,22 +29,22 @@ import * as Icons from 'lucide-react'
 // CIL[DOC-MICRO logic_summary="Type-only interface for DataStats props." notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:DataStatsProps:interface" type="interface" identity="DataStatsProps" parent="~/.framework/src/components/runtime/DataStats.tsx"]
 interface DataStatsProps {
   stats: EntityStat[]
   data: any[]
   loading?: boolean
 }
+// CIL[END stable_id="~/.framework/src/components/runtime/DataStats.tsx:DataStatsProps:interface"]
 // CIL[DOC-VECTOR type="context" content="purpose='DataStats component prop type'; No verified external callers; imports: .framework/src/types/types.ts,.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/runtime/DataStats.tsx:datastatsprops:interface"]
 
 
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:colormap:constant"]
 // CIL[DOC-MACRO purpose="Color style mapping for stat cards"]
 // CIL[DOC-RESPONSIBILITY responsibility="Provide Tailwind CSS class combinations for color themes"]
 // CIL[DOC-CONTEXT module="DataStats" layer="runtime" related_files=".framework/src/components/runtime/DataStats.tsx,.framework/src/components/ui/card.tsx,.framework/src/types/types.ts"]
@@ -53,6 +52,7 @@ interface DataStatsProps {
 // CIL[DOC-MICRO logic_summary="Record mapping semantic color names to background/text utility classes." notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:colorMap:constant" type="constant" identity="colorMap" parent="~/.framework/src/components/runtime/DataStats.tsx"]
 const colorMap: Record<string, string> = {
   blue: 'bg-blue-500/10 text-blue-500',
   green: 'bg-green-500/10 text-green-500',
@@ -61,17 +61,16 @@ const colorMap: Record<string, string> = {
   purple: 'bg-purple-500/10 text-purple-500',
   gray: 'bg-muted text-muted-foreground'
 }
+// CIL[END stable_id="~/.framework/src/components/runtime/DataStats.tsx:colorMap:constant"]
 // CIL[DOC-VECTOR type="context" content="purpose='Color style mapping for stat cards'; No verified external callers; imports: .framework/src/types/types.ts,.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/runtime/DataStats.tsx:colormap:constant"]
 
 
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:datastats:function"]
 // CIL[DOC-MACRO purpose="Render data statistics cards"]
 // CIL[DOC-RESPONSIBILITY responsibility="Calculate and display entity statistics as a responsive grid of cards"]
 // CIL[DOC-CONTEXT module="DataStats" layer="runtime" related_files=".framework/src/components/runtime/DataStats.tsx,.framework/src/components/ui/card.tsx,.framework/src/types/types.ts"]
@@ -79,6 +78,7 @@ const colorMap: Record<string, string> = {
 // CIL[DOC-MICRO logic_summary="Maps stats to calculated values; uses colorMap and dynamic icon for each card." notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataStats.tsx:DataStats:component" type="component" identity="DataStats" parent="~/.framework/src/components/runtime/DataStats.tsx"]
 export function DataStats({ stats, data, loading }: DataStatsProps) {
   const calculateStat = (stat: EntityStat): number => {
     if (!data) return 0
@@ -90,9 +90,9 @@ export function DataStats({ stats, data, loading }: DataStatsProps) {
         return data.filter(item => {
           if (!stat.filter) return true
           return Object.entries(stat.filter).every(([key, value]) => {
-            const itemValue = key.includes('.') 
+            const itemValue = key.includes('.')
               ? key.split('.').reduce((obj, k) => obj?.[k], item)
-              : item[key]
+              : (item[key] ?? item.data?.[key])
             return itemValue === value
           })
         }).length
@@ -130,10 +130,10 @@ export function DataStats({ stats, data, loading }: DataStatsProps) {
     </div>
   )
 }
+// CIL[END stable_id="~/.framework/src/components/runtime/DataStats.tsx:DataStats:component"]
 // CIL[DOC-VECTOR type="context" content="purpose='Render data statistics cards'; No verified external callers; imports: .framework/src/types/types.ts,.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/runtime/DataStats.tsx:datastats:function"]

package/.framework/src/components/runtime/DataTable.tsx

@@ -15,6 +15,7 @@ import { useNavigate } from 'react-router-dom'
 import { EntityColumn } from '../../types/types'
 import { formatDateTime } from '../../lib/utils'
 import {
+// CIL[END stable_id="~/.framework/src/components/runtime/DataTable.tsx:module_header:module_header"]
   Table,
   TableBody,
   TableCell,
@@ -34,10 +35,8 @@ import * as Icons from 'lucide-react'
 // 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/runtime/DataTable.tsx:module_header:module_header"]
 
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataTable.tsx:DataTableProps:interface" type="interface" identity="DataTableProps" parent="~/.framework/src/components/runtime/DataTable.tsx"]
 // CIL[DOC-MACRO purpose="TypeScript props contract for the DataTable component"]
 // CIL[DOC-RESPONSIBILITY responsibility="Defines the expected properties passed to DataTable, including columns, data, sort handlers, and state flags."]
 // CIL[DOC-CONTEXT module="components/runtime" layer="component" related_files=".framework/src/components/runtime/DataTable.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/components/ui/table.tsx,.framework/src/lib/utils.ts,.framework/src/types/types.ts"]
@@ -45,6 +44,7 @@ import * as Icons from 'lucide-react'
 // CIL[DOC-MICRO logic_summary="Declares the DataTableProps interface consumed by the DataTable React component." notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataTable.tsx:DataTableProps:interface" type="interface" identity="DataTableProps" parent="~/.framework/src/components/runtime/DataTable.tsx"]
 interface DataTableProps {
   columns: EntityColumn[]
   data: any[]
@@ -57,16 +57,15 @@ interface DataTableProps {
   emptyMessage: string
   emptyIcon: string
 }
+// CIL[END stable_id="~/.framework/src/components/runtime/DataTable.tsx:DataTableProps:interface"]
 // CIL[DOC-VECTOR type="context" content="purpose='TypeScript props contract for the DataTable component'; No verified external callers; imports: .framework/src/types/types.ts,.framework/src/lib/utils.ts,.framework/src/components/ui/table.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/runtime/DataTable.tsx:DataTableProps:interface"]
 
 
-// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataTable.tsx:DataTable:component" type="component" identity="DataTable" parent="~/.framework/src/components/runtime/DataTable.tsx"]
 // CIL[DOC-MACRO purpose="Renders a sortable, clickable data table for runtime records with loading, error, and empty states"]
 // CIL[DOC-RESPONSIBILITY responsibility="Displays tabular data, handles sorting, row navigation, and loading/error/empty UI states."]
 // CIL[DOC-CONTEXT module="components/runtime" layer="component" related_files=".framework/src/components/runtime/DataTable.tsx,.framework/src/components/ui/badge.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/ui/card.tsx,.framework/src/components/ui/skeleton.tsx,.framework/src/components/ui/table.tsx,.framework/src/lib/utils.ts,.framework/src/types/types.ts"]
@@ -74,6 +73,7 @@ interface DataTableProps {
 // CIL[DOC-MICRO logic_summary="Renders skeleton, error, empty, or table views; uses renderCell to format timestamp, badge, and truncated text; handles ascending/descending sort and row navigation." notable_decisions="[]"]
 // CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
 // CIL[DOC-STABILITY stability="stable"]
+// CIL[BEGIN stable_id="~/.framework/src/components/runtime/DataTable.tsx:DataTable:component" type="component" identity="DataTable" parent="~/.framework/src/components/runtime/DataTable.tsx"]
 export function DataTable({ 
   columns, 
   data, 
@@ -112,13 +112,15 @@ export function DataTable({
   const renderCell = (column: EntityColumn, row: any) => {
     const value = column.key.includes('.')
       ? column.key.split('.').reduce((obj, k) => obj?.[k], row)
-      : row[column.key]
-    
-    if (column.type === 'timestamp' && value) {
+      : (row[column.key] ?? row.data?.[column.key])
+
+    const displayType = column.display_type || column.type
+
+    if (displayType === 'timestamp' && value) {
       return formatDateTime(value)
     }
-    
-    if (column.type === 'badge' && column.badgeColors) {
+
+    if (displayType === 'badge' && column.badgeColors) {
       const colorClass = column.badgeColors[value?.toString()] || 'bg-muted text-muted-foreground'
       return (
         <Badge variant="secondary" className={colorClass}>
@@ -217,10 +219,10 @@ export function DataTable({
     </Card>
   )
 }
+// CIL[END stable_id="~/.framework/src/components/runtime/DataTable.tsx:DataTable:component"]
 // CIL[DOC-VECTOR type="context" content="purpose='Renders a sortable, clickable data table for runtime records with loading, error, and empty states'; No verified external callers; imports: .framework/src/types/types.ts,.framework/src/lib/utils.ts,.framework/src/components/ui/table.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/runtime/DataTable.tsx:DataTable:component"]