- Simplified data fetching (removed TanStack Query for now)
- Added direct mock API client in component
- Fixed state management (isLoading, isError, modelsData)
- Grid now renders with 3 sample model records
- Updated v-if conditions for loading/error/empty states
- Added grid container height and filter styling
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
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>
kjh2064