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:
2026-08-15 10:47:04 +09:00
parent 8974d6087c
commit 81bcd58dcd
3 changed files with 520 additions and 4 deletions
+4 -4
View File
@@ -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]