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

frontend/src/features/models/pages/ModelsList.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 { useModelsList } from '../composables/useModels'
+import { useModelsList, type Model } from '../composables/useModels'
 import type { ModelListParams } from '../composables/useModels'
+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.models.list'),
 )
 
+const modelColumns = computed(() => toUiGridColumns(screenDef.value?.grid?.columnDefs ?? []))
+
 // Search and filter state
 const searchQuery = ref('')
 const phaseFilter = ref('all')
@@ -82,6 +82,11 @@ const handleRowClick = (modelId: string) => {
   router.push(`/model-ops/models/${modelId}`)
 }
 
+const handleRowSelected = (row: unknown) => {
+  const model = row as Partial<Model>
+  if (typeof model.modelId === 'string') handleRowClick(model.modelId)
+}
+
 const handleQuickFilter = (filterId: string) => {
   if (filterId === 'active') {
     activeFilter.value = activeFilter.value === 'active' ? 'all' : 'active'
@@ -116,7 +121,7 @@ onUnmounted(() => {
 
 <template>
   <div v-if="screenDef" class="models-list">
-    <KbxListPage
+    <KsListPage
       :screen="screenDef"
       :data-state="dataState"
       :loading="dataState === 'pending'"
@@ -127,9 +132,9 @@ onUnmounted(() => {
     >
       <!-- Header Actions -->
       <template #header-actions>
-        <KbxButton
+        <KsButton
           label="New Model"
-          variant="primary"
+          severity="primary"
           @click="handleNewModel"
         />
       </template>
@@ -138,14 +143,15 @@ onUnmounted(() => {
       <template #search>
         <div class="models-search">
           <div class="search-row">
-            <KbxInput
+            <KsTextField
               v-model="searchQuery"
+              label="Model search"
               placeholder="Search by model name..."
               @keydown.enter="handleSearch"
             />
-            <KbxButton
+            <KsButton
               label="Search"
-              variant="default"
+              severity="secondary"
               @click="handleSearch"
             />
           </div>
@@ -172,15 +178,15 @@ onUnmounted(() => {
 
       <!-- Content Area -->
       <template #content>
-        <KbxDataGrid
+        <KsDataGrid
           v-if="screenDef.grid && modelsQuery.data.value?.items"
-          :columns="modelsQuery.data.value?.items.length ? screenDef.grid.columnDefs : []"
+          :columns="modelsQuery.data.value?.items.length ? modelColumns : []"
           :rows="modelsQuery.data.value?.items || []"
           :loading="modelsQuery.isPending.value"
-          @row-click="handleRowClick"
+          @row-selected="handleRowSelected"
         />
       </template>
-    </KbxListPage>
+    </KsListPage>
   </div>
 </template>