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/ModelDetail.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import KbxButton from '@shared/ui/adapter/KbxButton.vue'
 import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
+import { useModelDetail, useActivateModel, useDeactivateModel, useTransitionPhase } from '../composables/useModels'
 
 const route = useRoute()
 const router = useRouter()
@@ -29,46 +30,27 @@ const phases = [
   'Manual Activation',
 ]
 
-// Mock model data (will be replaced with TanStack Query)
-const model = ref({
-  modelId: '00000000-0000-0000-0000-000000000001',
-  name: 'Alpha Strategy v1',
-  description: 'Quantitative trading strategy based on technical analysis',
-  phase: 'Validate',
+// TanStack Query hooks
+const modelQuery = useModelDetail(modelId.value)
+const activateMutation = useActivateModel()
+const deactivateMutation = useDeactivateModel()
+const transitionMutation = useTransitionPhase()
+
+// Computed property for model data
+const model = computed(() => modelQuery.data.value || {
+  modelId: modelId.value,
+  name: 'Loading...',
+  description: '',
+  phase: 'Freeze' as const,
   active: false,
-  lastValidation: '2026-08-10',
-  pbo: 15.2,
-  dsr: 96.5,
-  oos: 1.8,
-  returnMtd: 12.5,
-  createdAt: '2026-06-15',
-  updatedAt: '2026-08-10',
-  validationHistory: [
-    {
-      date: '2026-08-10',
-      phase: 'Validate',
-      pbo: 15.2,
-      dsr: 96.5,
-      oos: 1.8,
-      status: 'approved',
-    },
-    {
-      date: '2026-08-05',
-      phase: 'Review',
-      pbo: 16.1,
-      dsr: 95.2,
-      oos: 2.1,
-      status: 'approved',
-    },
-    {
-      date: '2026-07-28',
-      phase: 'Challenger',
-      pbo: 18.5,
-      dsr: 93.8,
-      oos: 2.9,
-      status: 'approved',
-    },
-  ],
+  lastValidation: '',
+  pbo: 0,
+  dsr: 0,
+  oos: 0,
+  returnMtd: 0,
+  createdAt: '',
+  updatedAt: '',
+  validationHistory: [],
   configuration: {
     lookbackPeriod: 252,
     rebalanceFrequency: 'daily',
@@ -78,9 +60,6 @@ const model = ref({
   },
 })
 
-const isLoading = ref(false)
-const error = ref<string | null>(null)
-
 // Find current phase index
 const currentPhaseIndex = computed(() => {
   return phases.findIndex(p => p === model.value.phase)
@@ -111,23 +90,25 @@ const handleEdit = () => {
   router.push(`/model-ops/models/${modelId.value}/edit`)
 }
 
-const handleActivate = () => {
+const handleActivate = async () => {
   if (canActivate.value) {
-    console.log('Activating model:', modelId.value)
+    await activateMutation.mutateAsync(modelId.value)
   }
 }
 
-const handleDeactivate = () => {
-  console.log('Deactivating model:', modelId.value)
+const handleDeactivate = async () => {
+  await deactivateMutation.mutateAsync(modelId.value)
 }
 
-const handlePhaseTransition = (newPhase: string) => {
+const handlePhaseTransition = async (newPhase: string) => {
   const currentIndex = currentPhaseIndex.value
   const newIndex = phases.indexOf(newPhase)
 
   if (newIndex > currentIndex) {
-    console.log(`Transitioning from ${model.value.phase} to ${newPhase}`)
-    model.value.phase = newPhase
+    await transitionMutation.mutateAsync({
+      modelId: modelId.value,
+      phase: newPhase as any,
+    })
   }
 }
 
@@ -141,8 +122,6 @@ const handleKeydown = (e: KeyboardEvent) => {
   }
 }
 
-import { onMounted, onUnmounted } from 'vue'
-
 onMounted(() => {
   window.addEventListener('keydown', handleKeydown)
 })