feat: Models List page (T02 master-detail template) — second KBX v60 page
Implement ModelList.vue using KBX Foundation v60 master-detail pattern: - T02 Master-Detail template for model browsing - KbxScreenFrame wrapper with breadcrumb/title - Left side: Scrollable model list with metrics (PBO, DSR, Return) - Right side: Detail panel with performance metrics and configuration - KbxTemplateStateBoundary for async state management - Status indicators (Active/Inactive) with phase color coding - Metric cards (PBO, DSR, OOS) with validation hints - Configuration display (lookback, rebalance, risk limits) - Action buttons (View Results, Start Shadow Run, Edit Config) - Dark mode and responsive layout New files: - features/models/pages/ModelList.vue (T02 master-detail page) Updated: - features/models/registry.ts (import ScreenDefinition from @kbx/contracts) Uses existing useModelsList, useModelDetail composables with TanStack Query. Demo data: 3 models (Validate, Review, Mature phases). Fully integrated with KBX v60 component library. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,9 +3,9 @@
|
||||
* Define all screens in the models feature module
|
||||
*/
|
||||
|
||||
import type { KbxScreenDefinition } from '@shared/contracts/kbx-types'
|
||||
import type { ScreenDefinition } from '@kbx/contracts'
|
||||
|
||||
export const modelsListScreen: KbxScreenDefinition = {
|
||||
export const modelsListScreen: ScreenDefinition = {
|
||||
screenId: 'model-ops.models.list',
|
||||
title: 'Model Management',
|
||||
module: 'ModelOps',
|
||||
@@ -55,7 +55,7 @@ export const modelsListScreen: KbxScreenDefinition = {
|
||||
telemetry: { enabled: true },
|
||||
}
|
||||
|
||||
export const modelsDetailScreen: KbxScreenDefinition = {
|
||||
export const modelsDetailScreen: ScreenDefinition = {
|
||||
screenId: 'model-ops.models.detail',
|
||||
title: 'Model Details',
|
||||
module: 'ModelOps',
|
||||
@@ -93,4 +93,4 @@ export const modelsDetailScreen: KbxScreenDefinition = {
|
||||
/**
|
||||
* All screens in models module
|
||||
*/
|
||||
export const modelScreens: KbxScreenDefinition[] = [modelsListScreen, modelsDetailScreen]
|
||||
export const modelScreens: ScreenDefinition[] = [modelsListScreen, modelsDetailScreen]
|
||||
|
||||
Reference in New Issue
Block a user