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/shadow-run/pages/ShadowRunList.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 { useShadowRunsList } from '../composables/useShadowRuns'
+import type { ShadowRunListParams } from '../composables/useShadowRuns'
 
 const route = useRoute()
 const router = useRouter()
@@ -26,69 +28,52 @@ const dateRangeEnd = ref('')
 const currentPage = ref(1)
 const pageSize = ref(50)
 
-// Mock data state (replace with actual API query)
-const isLoading = ref(false)
-const error = ref<string | null>(null)
+// Query parameters
+const queryParams = computed<ShadowRunListParams>(() => ({
+  page: currentPage.value,
+  pageSize: pageSize.value,
+  search: searchQuery.value || undefined,
+  status: statusFilter.value === 'all' ? undefined : statusFilter.value,
+  dateStart: dateRangeStart.value || undefined,
+  dateEnd: dateRangeEnd.value || undefined,
+}))
+
+// TanStack Query hook
+const shadowRunsQuery = useShadowRunsList(queryParams.value)
 
 const dataState = computed<'idle' | 'pending' | 'ready' | 'error' | 'empty'>(() => {
-  if (isLoading.value) return 'pending'
-  if (error.value) return 'error'
-  if (shadowRuns.value.length === 0) return 'empty'
+  if (shadowRunsQuery.isPending.value) return 'pending'
+  if (shadowRunsQuery.isError.value) return 'error'
+  if (shadowRunsQuery.data.value?.items.length === 0) return 'empty'
   return 'ready'
 })
 
-// Mock shadow runs data (will be replaced with TanStack Query)
-const shadowRuns = ref([
-  {
-    runId: '00000000-0000-0000-0000-000000000001',
-    modelName: 'Alpha Strategy',
-    windowStart: '2024-01-02',
-    windowEnd: '2024-09-10',
-    tradingDays: 187,
-    totalReturn: 12.5,
-    sharpeRatio: 1.8,
-    pbo: 15.2,
-    dsr: 96.5,
-    oos: 1.8,
-    status: 'completed',
-    createdAt: '2026-08-01',
-  },
-  {
-    runId: '00000000-0000-0000-0000-000000000002',
-    modelName: 'Beta Model',
-    windowStart: '2024-01-02',
-    windowEnd: '2024-09-10',
-    tradingDays: 187,
-    totalReturn: -2.3,
-    sharpeRatio: -0.5,
-    pbo: 42.1,
-    dsr: 45.2,
-    oos: 3.2,
-    status: 'completed',
-    createdAt: '2026-08-02',
-  },
-])
-
 // Quick filters
-const quickFilters = computed(() => [
-  { id: 'all', label: 'All', active: statusFilter.value === 'all', badge: shadowRuns.value.length },
-  { id: 'valid', label: 'Valid', active: statusFilter.value === 'valid', badge: 1 },
-  { id: 'review', label: 'Review', active: statusFilter.value === 'review', badge: 1 },
-])
+const quickFilters = computed(() => {
+  const total = shadowRunsQuery.data.value?.total || 0
+  return [
+    { id: 'all', label: 'All', active: statusFilter.value === 'all', badge: total },
+    { id: 'valid', label: 'Valid', active: statusFilter.value === 'valid', badge: 1 },
+    { id: 'review', label: 'Review', active: statusFilter.value === 'review', badge: 1 },
+  ]
+})
 
 // Summary items
-const summaryItems = computed(() => [
-  { label: 'Total Runs', value: shadowRuns.value.length },
-  { label: 'Valid', value: 1 },
-  { label: 'Avg Sharpe', value: '0.65' },
-])
+const summaryItems = computed(() => {
+  const items = shadowRunsQuery.data.value?.items || []
+  const validCount = items.filter(r => r.pbo <= 20 && r.dsr >= 95 && r.oos <= 2.5).length
+  const avgSharpe = items.length > 0 ? (items.reduce((sum, r) => sum + r.sharpeRatio, 0) / items.length).toFixed(2) : '0'
+
+  return [
+    { label: 'Total Runs', value: items.length },
+    { label: 'Valid', value: validCount },
+    { label: 'Avg Sharpe', value: avgSharpe },
+  ]
+})
 
 // Actions
 const handleSearch = () => {
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-  }, 500)
+  shadowRunsQuery.refetch()
 }
 
 const handleNewRun = () => {
@@ -101,6 +86,7 @@ const handleRowClick = (runId: string) => {
 
 const handleQuickFilter = (filterId: string) => {
   statusFilter.value = filterId
+  currentPage.value = 1
 }
 
 const handleRefresh = () => {
@@ -118,7 +104,6 @@ const handleKeydown = (e: KeyboardEvent) => {
   }
 }
 
-// Lifecycle
 onMounted(() => {
   window.addEventListener('keydown', handleKeydown)
 })
@@ -126,8 +111,6 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeydown)
 })
-
-import { onMounted, onUnmounted } from 'vue'
 </script>
 
 <template>
@@ -189,11 +172,11 @@ import { onMounted, onUnmounted } from 'vue'
       <!-- Content Area -->
       <template #content>
         <KbxDataGrid
-          v-if="screenDef.grid"
+          v-if="screenDef.grid && shadowRunsQuery.data.value?.items"
           :columns="screenDef.grid.columnDefs"
-          :rows="shadowRuns"
-          :loading="isLoading"
-          @row-click="(runId) => handleRowClick(runId)"
+          :rows="shadowRunsQuery.data.value.items"
+          :loading="shadowRunsQuery.isPending.value"
+          @row-click="handleRowClick"
         />
       </template>
     </KbxListPage>