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>

frontend/src/features/models/pages/ModelsList.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import KbxListPage from '@shared/ui/adapter/KbxListPage.vue'
 import KbxDataGrid from '@shared/ui/adapter/KbxDataGrid.vue'
 import KbxButton from '@shared/ui/adapter/KbxButton.vue'
 import KbxInput from '@shared/ui/adapter/KbxInput.vue'
 import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
+import { useModelsList } from '../composables/useModels'
+import type { ModelListParams } from '../composables/useModels'
 
 const route = useRoute()
 const router = useRouter()
@@ -25,84 +27,51 @@ const activeFilter = ref('all')
 const currentPage = ref(1)
 const pageSize = ref(50)
 
-// Mock data state
-const isLoading = ref(false)
-const error = ref<string | null>(null)
+// Query parameters
+const queryParams = computed<ModelListParams>(() => ({
+  page: currentPage.value,
+  pageSize: pageSize.value,
+  search: searchQuery.value || undefined,
+  phase: phaseFilter.value === 'all' ? undefined : phaseFilter.value,
+  active: activeFilter.value === 'active' ? true : undefined,
+}))
+
+// TanStack Query hook
+const modelsQuery = useModelsList(queryParams.value)
 
 const dataState = computed<'idle' | 'pending' | 'ready' | 'error' | 'empty'>(() => {
-  if (isLoading.value) return 'pending'
-  if (error.value) return 'error'
-  if (models.value.length === 0) return 'empty'
+  if (modelsQuery.isPending.value) return 'pending'
+  if (modelsQuery.isError.value) return 'error'
+  if (modelsQuery.data.value?.items.length === 0) return 'empty'
   return 'ready'
 })
 
-// Mock models data (will be replaced with TanStack Query)
-const models = ref([
-  {
-    modelId: '00000000-0000-0000-0000-000000000001',
-    name: 'Alpha Strategy v1',
-    phase: 'Validate',
-    active: false,
-    lastValidation: '2026-08-10',
-    pbo: 15.2,
-    dsr: 96.5,
-    returnMtd: 12.5,
-    createdAt: '2026-06-15',
-  },
-  {
-    modelId: '00000000-0000-0000-0000-000000000002',
-    name: 'Beta Model v2',
-    phase: 'Review',
-    active: false,
-    lastValidation: '2026-08-09',
-    pbo: 18.3,
-    dsr: 94.2,
-    returnMtd: 8.3,
-    createdAt: '2026-07-01',
-  },
-  {
-    modelId: '00000000-0000-0000-0000-000000000003',
-    name: 'Gamma Arbitrage',
-    phase: 'Mature',
-    active: true,
-    lastValidation: '2026-08-08',
-    pbo: 8.5,
-    dsr: 98.1,
-    returnMtd: 18.7,
-    createdAt: '2026-05-10',
-  },
-])
-
-// Phase counts
-const phaseCounts = computed(() => {
-  const counts: Record<string, number> = {}
-  models.value.forEach(m => {
-    counts[m.phase] = (counts[m.phase] || 0) + 1
-  })
-  return counts
+// Quick filters
+const quickFilters = computed(() => {
+  const items = modelsQuery.data.value?.items || []
+  return [
+    { id: 'all', label: 'All', active: phaseFilter.value === 'all', badge: items.length },
+    { id: 'active', label: 'Active', active: activeFilter.value === 'active', badge: items.filter(m => m.active).length },
+    { id: 'ready', label: 'Ready to Deploy', active: phaseFilter.value === 'ready', badge: 2 },
+  ]
 })
 
-// Quick filters
-const quickFilters = computed(() => [
-  { id: 'all', label: 'All', active: phaseFilter.value === 'all', badge: models.value.length },
-  { id: 'active', label: 'Active', active: activeFilter.value === 'active', badge: models.value.filter(m => m.active).length },
-  { id: 'ready', label: 'Ready to Deploy', active: phaseFilter.value === 'ready', badge: 2 },
-])
-
 // Summary items
-const summaryItems = computed(() => [
-  { label: 'Total Models', value: models.value.length },
-  { label: 'Active', value: models.value.filter(m => m.active).length },
-  { label: 'Ready to Deploy', value: 2 },
-  { label: 'Avg PBO', value: (models.value.reduce((sum, m) => sum + m.pbo, 0) / models.value.length).toFixed(1) },
-])
+const summaryItems = computed(() => {
+  const items = modelsQuery.data.value?.items || []
+  const avgPbo = items.length > 0 ? (items.reduce((sum, m) => sum + m.pbo, 0) / items.length).toFixed(1) : '0'
+
+  return [
+    { label: 'Total Models', value: items.length },
+    { label: 'Active', value: items.filter(m => m.active).length },
+    { label: 'Ready to Deploy', value: 2 },
+    { label: 'Avg PBO', value: avgPbo },
+  ]
+})
 
 // Actions
 const handleSearch = () => {
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-  }, 500)
+  modelsQuery.refetch()
 }
 
 const handleNewModel = () => {
@@ -136,8 +105,6 @@ const handleKeydown = (e: KeyboardEvent) => {
   }
 }
 
-import { onMounted, onUnmounted } from 'vue'
-
 onMounted(() => {
   window.addEventListener('keydown', handleKeydown)
 })
@@ -206,11 +173,11 @@ onUnmounted(() => {
       <!-- Content Area -->
       <template #content>
         <KbxDataGrid
-          v-if="screenDef.grid"
+          v-if="screenDef.grid && modelsQuery.data.value?.items"
           :columns="screenDef.grid.columnDefs"
-          :rows="models"
-          :loading="isLoading"
-          @row-click="(modelId) => handleRowClick(modelId)"
+          :rows="modelsQuery.data.value.items"
+          :loading="modelsQuery.isPending.value"
+          @row-click="handleRowClick"
         />
       </template>
     </KbxListPage>