V13-FE-005: restore direct UI components and harden grid provider

frontend/src/features/shadow-run/pages/ShadowRunList.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 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 { useRouter } from 'vue-router'
+import KsListPage from '@shared/ui/components/KsListPage.vue'
+import { KsButton, KsDataGrid, KsTextField } from '@shared/ui/components'
 import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
-import { useShadowRunsList } from '../composables/useShadowRuns'
+import { useShadowRunsList, type ShadowRun } from '../composables/useShadowRuns'
 import type { ShadowRunListParams } from '../composables/useShadowRuns'
+import { toUiGridColumns } from '@shared/ui/gridColumnAdapter'
 
-const route = useRoute()
 const router = useRouter()
 const registry = useKbxRegistry()
 
@@ -18,6 +16,8 @@ const screenDef = computed(() =>
   registry.getScreen('model-ops.shadow-run.list'),
 )
 
+const shadowRunColumns = computed(() => toUiGridColumns(screenDef.value?.grid?.columnDefs ?? []))
+
 // Search and filter state
 const searchQuery = ref('')
 const statusFilter = ref('all')
@@ -84,6 +84,11 @@ const handleRowClick = (runId: string) => {
   router.push(`/model-ops/shadow-runs/${runId}`)
 }
 
+const handleRowSelected = (row: unknown) => {
+  const shadowRun = row as Partial<ShadowRun>
+  if (typeof shadowRun.runId === 'string') handleRowClick(shadowRun.runId)
+}
+
 const handleQuickFilter = (filterId: string) => {
   statusFilter.value = filterId
   currentPage.value = 1
@@ -115,7 +120,7 @@ onUnmounted(() => {
 
 <template>
   <div v-if="screenDef" class="shadow-run-list">
-    <KbxListPage
+    <KsListPage
       :screen="screenDef"
       :data-state="dataState"
       :loading="dataState === 'pending'"
@@ -126,9 +131,9 @@ onUnmounted(() => {
     >
       <!-- Header Actions -->
       <template #header-actions>
-        <KbxButton
+        <KsButton
           label="New Shadow Run"
-          variant="primary"
+          severity="primary"
           @click="handleNewRun"
         />
       </template>
@@ -137,26 +142,29 @@ onUnmounted(() => {
       <template #search>
         <div class="shadow-run-search">
           <div class="search-row">
-            <KbxInput
+            <KsTextField
               v-model="searchQuery"
+              label="Shadow run search"
               placeholder="Search by model name..."
               @keydown.enter="handleSearch"
             />
-            <KbxButton
+            <KsButton
               label="Search"
-              variant="default"
+              severity="secondary"
               @click="handleSearch"
             />
           </div>
           <div class="search-row">
-            <KbxInput
+            <KsTextField
               v-model="dateRangeStart"
               type="date"
+              label="Start date"
               placeholder="Start Date"
             />
-            <KbxInput
+            <KsTextField
               v-model="dateRangeEnd"
               type="date"
+              label="End date"
               placeholder="End Date"
             />
             <select v-model="statusFilter" class="status-filter">
@@ -171,15 +179,15 @@ onUnmounted(() => {
 
       <!-- Content Area -->
       <template #content>
-        <KbxDataGrid
+        <KsDataGrid
           v-if="screenDef.grid && shadowRunsQuery.data.value?.items"
-          :columns="shadowRunsQuery.data.value?.items.length ? screenDef.grid.columnDefs : []"
+          :columns="shadowRunsQuery.data.value?.items.length ? shadowRunColumns : []"
           :rows="shadowRunsQuery.data.value?.items || []"
           :loading="shadowRunsQuery.isPending.value"
-          @row-click="handleRowClick"
+          @row-selected="handleRowSelected"
         />
       </template>
-    </KbxListPage>
+    </KsListPage>
   </div>
 </template>