@innertia-solutions/innertia-nuxt 0.1.55 → 0.1.56

package/components/Observability/Dashboard.vue

@@ -58,13 +58,16 @@ function fmtMs(ms) { return ms == null ? '—' : `${Number(ms).toLocaleString('e
       </div>
       <table v-else class="w-full text-sm">
         <thead><tr class="text-left text-muted-foreground">
-          <th class="py-1">Query</th><th class="py-1">Llamadas</th><th class="py-1">Media</th><th class="py-1">Total</th>
+          <th class="py-1 pr-4">Query</th>
+          <th class="py-1 pr-4 whitespace-nowrap">Llamadas</th>
+          <th class="py-1 pr-4 whitespace-nowrap">Media</th>
+          <th class="py-1 whitespace-nowrap">Total</th>
         </tr></thead>
         <tbody>
           <tr v-for="q in queries.data.value?.top ?? []" :key="q.id" class="border-t border-card-line">
-            <td class="py-1 font-mono text-xs">{{ q.query }}</td>
-            <td class="py-1">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
-            <td class="py-1">{{ fmtMs(q.mean_ms) }}</td>
+            <td class="py-1 pr-4 font-mono text-xs truncate max-w-md">{{ q.query }}</td>
+            <td class="py-1 pr-4">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
+            <td class="py-1 pr-4">{{ fmtMs(q.mean_ms) }}</td>
             <td class="py-1">{{ fmtMs(q.total_ms) }}</td>
           </tr>
         </tbody>

package/components/Observability/ErrorDetail.vue

@@ -0,0 +1,82 @@
+<script setup>
+// Detalle de un caso de error (Sentry-like): header + criticidad, timeline de
+// ocurrencias, stack trace, contexto del request y traces de muestra.
+const props = defineProps({
+  id: { type: [String, Number], required: true },
+})
+const emit = defineEmits(['back'])
+const api = useApi()
+
+const { data, pending } = await useAsyncData(
+  () => `obs-error-${props.id}`,
+  () => api.get(`platform/observability/errors/${props.id}`),
+  { watch: [() => props.id] },
+)
+
+const exceptionEvent = computed(() => (data.value?.events ?? []).find(e => e.type === 'exception'))
+const stackFrames = computed(() => exceptionEvent.value?.payload?.stack ?? exceptionEvent.value?.payload?.frames ?? [])
+
+const timelineSeries = computed(() => [{ name: 'Ocurrencias', data: (data.value?.timeline ?? []).map(d => d.count) }])
+const timelineCats = computed(() => (data.value?.timeline ?? []).map(d => d.day))
+
+const STATUS = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
+</script>
+
+<template>
+  <div class="space-y-5">
+    <button type="button" class="text-sm text-primary hover:underline" @click="emit('back')">← Volver a errores</button>
+
+    <div v-if="pending" class="py-10 text-center text-sm text-muted-foreground">Cargando…</div>
+
+    <template v-else-if="data">
+      <div class="rounded-card border border-card-line bg-card p-4">
+        <div class="flex flex-wrap items-center gap-2">
+          <span v-if="data.is_critical" class="rounded-full bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300 px-2 py-0.5 text-xs font-semibold">Crítico</span>
+          <span class="rounded-full bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-0.5 text-xs">{{ STATUS[data.case.status] ?? data.case.status }}</span>
+          <span class="text-xs text-muted-foreground">{{ data.case.times_seen }} ocurrencias</span>
+        </div>
+        <h2 class="mt-2 text-lg font-semibold text-foreground">{{ data.case.title }}</h2>
+        <p class="text-sm text-muted-foreground font-mono">{{ data.case.exception_class }}</p>
+        <p class="mt-1 text-xs text-muted-foreground">Primera vez: {{ data.case.first_seen }} · Última: {{ data.case.last_seen }}</p>
+      </div>
+
+      <section v-if="timelineCats.length">
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Ocurrencias (30 días)</h3>
+        <Chart type="bar" :series="timelineSeries" :categories="timelineCats" :height="160" />
+      </section>
+
+      <section v-if="data.trace" class="rounded-card border border-card-line bg-card p-4 text-sm">
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Contexto del request</h3>
+        <dl class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+          <div><dt class="text-muted-foreground inline">Ruta:</dt> <dd class="inline text-foreground">{{ data.trace.method }} {{ data.trace.route ?? data.trace.url }}</dd></div>
+          <div><dt class="text-muted-foreground inline">Status:</dt> <dd class="inline text-foreground">{{ data.trace.status ?? '—' }}</dd></div>
+          <div><dt class="text-muted-foreground inline">Usuario:</dt> <dd class="inline text-foreground">{{ data.trace.user_id ?? '—' }}</dd></div>
+          <div><dt class="text-muted-foreground inline">Tenant:</dt> <dd class="inline text-foreground">{{ data.trace.tenant ?? '—' }}</dd></div>
+          <div><dt class="text-muted-foreground inline">IP:</dt> <dd class="inline text-foreground">{{ data.trace.ip ?? '—' }}</dd></div>
+          <div><dt class="text-muted-foreground inline">Duración:</dt> <dd class="inline text-foreground">{{ data.trace.duration_ms != null ? data.trace.duration_ms + ' ms' : '—' }}</dd></div>
+        </dl>
+      </section>
+
+      <section v-if="stackFrames.length">
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Stack trace</h3>
+        <ol class="rounded-card border border-card-line bg-card divide-y divide-card-line text-xs font-mono">
+          <li v-for="(f, i) in stackFrames" :key="i" class="px-3 py-1.5">
+            <span class="text-foreground">{{ f.function ?? f.call ?? '' }}</span>
+            <span class="text-muted-foreground"> — {{ f.file ?? '' }}<span v-if="f.line">:{{ f.line }}</span></span>
+          </li>
+        </ol>
+      </section>
+      <section v-else-if="exceptionEvent">
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Excepción</h3>
+        <pre class="rounded-card border border-card-line bg-card p-3 text-xs whitespace-pre-wrap">{{ exceptionEvent.payload?.message ?? data.case.title }}</pre>
+      </section>
+
+      <section v-if="data.samples?.length">
+        <h3 class="mb-2 text-sm font-semibold text-foreground">Ocurrencias de muestra</h3>
+        <ul class="text-xs text-muted-foreground space-y-1">
+          <li v-for="s in data.samples" :key="s.trace_id">{{ s.occurred_at }} · {{ s.method }} {{ s.route ?? s.url }} · {{ s.status ?? '—' }}</li>
+        </ul>
+      </section>
+    </template>
+  </div>
+</template>

package/components/Observability/Errors.vue

@@ -1,14 +1,25 @@
 <script setup>
+// Lista de errores (casos) con filtros + criticidad + entrar al detalle.
+// Realtime: el Panel cambia `touchedAt` al recibir case.touched → recarga la tabla
+// (bump de :key). La suscripción vive en el Panel (useRealtime es singleton por canal).
+const props = defineProps({ touchedAt: { type: Number, default: 0 } })
 const api = useApi()
 const toast = useToast()
+
+const selectedId = ref(null)
 const reloadKey = ref(0)
 
 const columns = [
   { key: 'last_seen',       label: 'Última vez', sortable: true },
   { key: 'title',           label: 'Error' },
   { key: 'exception_class', label: 'Clase' },
-  { key: 'times_seen',      label: 'Veces' },
-  { key: 'status',          label: 'Estado' },
+  { key: 'times_seen',      label: 'Veces', sortable: true },
+  { key: 'status',          label: 'Estado', filterable: true, filterType: 'select',
+    filterOptions: [
+      { value: 'open', label: 'Abierto' },
+      { value: 'resolved', label: 'Resuelto' },
+      { value: 'ignored', label: 'Ignorado' },
+    ] },
   { key: 'actions',         label: '' },
 ]
 
@@ -23,22 +34,36 @@ async function setStatus(row, status) {
     toast.error(e?.data?.message ?? 'No se pudo cambiar el estado.')
   }
 }
+
+watch(() => props.touchedAt, () => { reloadKey.value++ })
 </script>
 
 <template>
-  <Table.Standard
-    :key="reloadKey"
-    name="observability-errors"
-    endpoint="platform/observability/errors"
-    :columns="columns"
-    search-placeholder="Buscar error…"
-  >
-    <template #status="{ value }">{{ statusLabels[value] ?? value }}</template>
-    <template #actions="{ row }">
-      <div class="flex gap-2">
-        <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'resolved')">Resolver</button>
-        <button class="text-xs text-muted-foreground hover:text-foreground" @click="setStatus(row, 'ignored')">Ignorar</button>
-      </div>
-    </template>
-  </Table.Standard>
+  <div>
+    <Observability.ErrorDetail v-if="selectedId" :id="selectedId" @back="selectedId = null" />
+
+    <Table.Standard
+      v-else
+      :key="reloadKey"
+      name="observability-errors"
+      endpoint="platform/observability/errors"
+      :columns="columns"
+      search-placeholder="Buscar error…"
+      @row-click="(row) => selectedId = row.id"
+    >
+      <template #title="{ row }">
+        <div class="flex items-center gap-2">
+          <span v-if="row.is_critical" class="inline-block size-2 rounded-full bg-red-500" title="Crítico" />
+          <span class="text-foreground">{{ row.title }}</span>
+        </div>
+      </template>
+      <template #status="{ value }">{{ statusLabels[value] ?? value }}</template>
+      <template #actions="{ row }">
+        <div class="flex gap-2">
+          <button class="text-xs text-muted-foreground hover:text-foreground" @click.stop="setStatus(row, 'resolved')">Resolver</button>
+          <button class="text-xs text-muted-foreground hover:text-foreground" @click.stop="setStatus(row, 'ignored')">Ignorar</button>
+        </div>
+      </template>
+    </Table.Standard>
+  </div>
 </template>

package/components/Observability/Overview.vue

@@ -0,0 +1,71 @@
+<script setup>
+// Overview pro: KPIs de errores (con criticidad), BD, slow queries y colas.
+// Refresca cada ~15s y en vivo cuando el Panel cambia `touchedAt` (case.touched).
+// La suscripción realtime vive en el Panel (useRealtime es singleton por canal).
+const props = defineProps({ touchedAt: { type: Number, default: 0 } })
+const api = useApi()
+
+const { data, refresh } = await useAsyncData('obs-overview', () => api.get('platform/observability/overview'))
+const timer = ref(null)
+
+onMounted(() => { timer.value = setInterval(refresh, 15_000) })
+onBeforeUnmount(() => { if (timer.value) clearInterval(timer.value) })
+
+watch(() => props.touchedAt, () => refresh())
+
+function fmtBytes(b) {
+  if (b == null) return '—'
+  const u = ['B', 'KB', 'MB', 'GB', 'TB']; let n = Number(b), i = 0
+  while (n >= 1024 && i < u.length - 1) { n /= 1024; i++ }
+  return `${n.toFixed(1)} ${u[i]}`
+}
+function fmtMs(ms) { return ms == null ? '—' : `${Number(ms).toLocaleString('es-CL')} ms` }
+</script>
+
+<template>
+  <div v-if="data" class="space-y-6">
+    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <Observability.MetricCard label="Errores abiertos" :value="data.errors.open"
+        :tone="data.errors.open > 0 ? 'warn' : 'good'"
+        :sublabel="`${data.errors.critical} críticos`" />
+      <Observability.MetricCard label="Críticos" :value="data.errors.critical"
+        :tone="data.errors.critical > 0 ? 'bad' : 'good'" />
+      <Observability.MetricCard label="Cache hit"
+        :value="data.database.cache_hit_ratio != null ? data.database.cache_hit_ratio + '%' : '—'"
+        :tone="(data.database.cache_hit_ratio ?? 100) >= 95 ? 'good' : 'warn'"
+        :sublabel="`BD: ${fmtBytes(data.database.database_bytes)}`" />
+      <Observability.MetricCard label="Colas"
+        :value="data.queue.pending ?? '—'"
+        :tone="(data.queue.failed ?? 0) > 0 ? 'bad' : 'neutral'"
+        :sublabel="`${data.queue.failed ?? 0} fallidos`" />
+    </div>
+
+    <div class="flex flex-wrap gap-2 text-xs">
+      <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Resueltos: <span class="font-semibold text-foreground">{{ data.errors.resolved }}</span></span>
+      <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Ignorados: <span class="font-semibold text-foreground">{{ data.errors.ignored }}</span></span>
+      <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Errores 24h (log): <span class="font-semibold text-foreground">{{ data.logs?.errors_24h ?? 0 }}</span></span>
+      <span class="rounded-full border border-card-line bg-card px-2.5 py-1 text-muted-foreground">Conexiones: <span class="font-semibold text-foreground">{{ data.database.connections.total ?? '—' }}/{{ data.database.connections.max ?? '—' }}</span></span>
+    </div>
+
+    <section>
+      <h3 class="mb-2 text-sm font-semibold text-foreground">Top consultas lentas</h3>
+      <table class="w-full text-sm">
+        <thead><tr class="text-left text-muted-foreground">
+          <th class="py-1 pr-4">Query</th>
+          <th class="py-1 pr-4 whitespace-nowrap">Llamadas</th>
+          <th class="py-1 pr-4 whitespace-nowrap">Media</th>
+          <th class="py-1 whitespace-nowrap">Total</th>
+        </tr></thead>
+        <tbody>
+          <tr v-for="q in data.slow_queries" :key="q.id" class="border-t border-card-line">
+            <td class="py-1 pr-4 font-mono text-xs truncate max-w-md">{{ q.query }}</td>
+            <td class="py-1 pr-4">{{ Number(q.calls).toLocaleString('es-CL') }}</td>
+            <td class="py-1 pr-4">{{ fmtMs(q.mean_ms) }}</td>
+            <td class="py-1">{{ fmtMs(q.total_ms) }}</td>
+          </tr>
+          <tr v-if="!data.slow_queries?.length"><td colspan="4" class="py-2 text-xs text-muted-foreground">Sin datos de consultas.</td></tr>
+        </tbody>
+      </table>
+    </section>
+  </div>
+</template>

package/components/Observability/Panel.vue

@@ -1,31 +1,43 @@
 <script setup>
-// Panel drop-in de observabilidad: sub-nav interna. Fase 1: BD (Dashboard nuevo),
-// Errores/Logs (componentes existentes), Archivos (placeholder Fase 3).
+// Panel drop-in de observabilidad. Overview es la landing; luego BD, Errores, Logs, Archivos.
+// Realtime: UNA sola suscripción al canal 'observability' acá (useRealtime es singleton
+// por canal; suscribir en cada tab se pisaría el handler). Al recibir case.touched se
+// bumpea `touchedAt` y los tabs (Overview/Errores) reaccionan por prop.
+const rt = useRealtime()
+const touchedAt = ref(0)
+
 const TABS = [
+  { key: 'overview', label: 'Resumen' },
   { key: 'database', label: 'Base de datos' },
   { key: 'errors',   label: 'Errores' },
   { key: 'logs',     label: 'Logs' },
   { key: 'files',    label: 'Archivos' },
 ]
-const active = ref('database')
+const active = ref('overview')
+
+onMounted(async () => {
+  try { await rt.connect(); rt.subscribe('observability', { 'case.touched': () => { touchedAt.value = Date.now() } }) } catch {}
+})
+onBeforeUnmount(() => rt.unsubscribe('observability'))
 </script>
 
 <template>
   <div class="space-y-5">
-    <nav class="flex gap-1 border-b border-card-line">
+    <nav class="flex gap-1 border-b border-card-line overflow-x-auto">
       <button v-for="t in TABS" :key="t.key" type="button" @click="active = t.key"
-        class="px-3 py-2 text-sm font-medium transition-colors -mb-px border-b-2"
+        class="px-3 py-2 text-sm font-medium transition-colors -mb-px border-b-2 whitespace-nowrap"
         :class="active === t.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'">
         {{ t.label }}
       </button>
     </nav>
 
+    <div v-show="active === 'overview'"><Observability.Overview :touched-at="touchedAt" /></div>
     <div v-show="active === 'database'"><Observability.Dashboard /></div>
-    <div v-show="active === 'errors'"><Observability.Errors /></div>
+    <div v-show="active === 'errors'"><Observability.Errors :touched-at="touchedAt" /></div>
     <div v-show="active === 'logs'"><Observability.Logs channel="operational" /></div>
     <div v-show="active === 'files'">
       <p class="rounded-card border border-dashed border-card-line p-8 text-center text-sm text-muted-foreground">
-        Visor de archivos de log — próximamente (Fase 3).
+        Visor de archivos de log — próximamente (Fase 4).
       </p>
     </div>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",