listo carga de datos en localstorage

nuxt4-app/app/pages/explorer.vue

@@ -32,29 +32,11 @@
           </UDropdownMenu>
         </UFieldGroup>
 
-        <!-- Refresh Controls (only shown when table is selected) -->
-        <div v-if="selectedTable && currentTableStore" class="flex items-center justify-between p-3 rounded-lg bg-[#1c140c] border border-[#3a2a16]">
-          <div class="flex flex-col gap-1">
-            <span class="text-xs font-medium text-[var(--brand-text-muted)]">
-              Última actualización: {{ currentTableStore.formattedLastUpdated }}
-            </span>
-            <span v-if="currentTableStore.isStale" class="text-xs text-yellow-400">
-              ⚠️ Los datos pueden estar desactualizados
-            </span>
-          </div>
-
-          <UButton
-            :loading="currentTableStore.isLoading"
-            :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c]' }"
-            size="sm"
-            @click="refreshTableData"
-          >
-            <template #leading>
-              <UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': currentTableStore.isLoading }" />
-            </template>
-            Actualizar datos
-          </UButton>
-        </div>
+        <!-- Metadata Card for selected table -->
+        <MetadatosCard
+          v-if="selectedTable"
+          :metadata="selectedTable"
+        />
       </div>
     </UCard>
 
@@ -214,12 +196,8 @@ const selectedTable = computed(() => {
   if (!metadata) return null
 
   return {
-    name: metadata.table,
-    label: `${metadata.table} (${metadata.rowCount || 0} registros)`,
-    rowCount: metadata.rowCount || 0,
-    primaryKey: metadata.primaryKey,
-    columns: metadata.columns || [],
-    ...metadata
+    ...metadata,
+    label: `${metadata.table} (${metadata.rowCount || 0} registros)`
   }
 })
 
@@ -241,7 +219,7 @@ const tableDropdownItems = computed((): DropdownMenuItem[] => {
   return metadataStore.allTables.map(metadata => ({
     label: `${metadata.table} (${metadata.rowCount || 0})`,
     icon: 'i-lucide-table',
-    onSelect: () => selectTable(metadata.table)
+    onSelect: () => selectTable(metadata.name)
   }))
 })