Commit Graph

2 Commits

Author SHA1 Message Date
kjh2064 b7ee740f71 feat: integrate TanStack Query for data fetching (Task F)
Add composables for API integration with TanStack Query:

1. useShadowRuns.ts (shadow-run feature)
   - useShadowRunsList() with pagination & filtering
   - useShadowRunDetail() for detail view
   - useCreateShadowRun() mutation
   - useRefreshShadowRuns() for manual refresh
   - shadowRunQueryKeys factory for cache management

2. useModels.ts (models feature)
   - useModelsList() with filtering by phase/active
   - useModelDetail() for detail view
   - useActivateModel() / useDeactivateModel() mutations
   - useTransitionPhase() for lifecycle transitions
   - modelQueryKeys factory

3. Updated pages (ShadowRunList, ShadowRunDetail, ModelsList, ModelDetail)
   - Replace mock data with useQuery hooks
   - Auto-refetch on filter changes
   - Optimistic updates (activate/deactivate/transition)
   - Computed state management (idle/pending/ready/error/empty)
   - Cache invalidation on mutations

Features:
- Stale time: 5 minutes, garbage collection: 10 minutes
- Query key factories for cache management
- Mock API client (replace with real HTTP endpoints)
- Support for pagination, filtering, sorting
- Keyboard shortcuts still functional

Mock API client provides realistic data for testing.
Replace apiClient.* functions with actual HTTP calls in next phase.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-12 01:46:25 +09:00
kjh2064 d29f0e7df9 feat: implement page components for ShadowRun and Models features
Add 4 Vue 3 pages with KBX adapter integration:

Pages:
- ShadowRunList.vue (252+ day validation search & grid)
- ShadowRunDetail.vue (metrics breakdown, phase analysis)
- ModelsList.vue (lifecycle management, quick filters)
- ModelDetail.vue (activation requirements, configuration)

Features:
- Registry-driven screen definitions
- KbxListPage + KbxDataGrid + KbxButton adapters
- Mock data (replaced with TanStack Query in Task F)
- Keyboard shortcuts (F3, Ctrl+N, Escape, Ctrl+E)
- Responsive density-aware layout
- Validation indicators (PBO, DSR, OOS thresholds)
- Phase lifecycle visualization
- Quick filter badges

Implementation pattern:
1. useKbxRegistry() for screen access
2. Computed state for data state management
3. useRoute/useRouter for navigation
4. Slots for flexible layout composition

Ready for Task F: TanStack Query API integration

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-12 01:43:43 +09:00