nuxt-observe 0.0.2

package/dist/runtime/app/components/ObserveJourneyTimeline.d.vue.ts

@@ -0,0 +1,14 @@
+import { type JourneyEvent, type JourneyMode } from '../../shared/schema/journey.js';
+/**
+ * The correlation waterfall (CP12). SSR-safe @nuxt/ui + CSS-grid lanes (no d3, no
+ * .client wrapper): each row is a metadata cell + a track whose marker sits at
+ * offsetMs / maxOffset. Trace mode nests rows by the parentId -> spanId span tree;
+ * session/user modes render a flat chronological list segmented by trace/session.
+ */
+type __VLS_Props = {
+    events: JourneyEvent[];
+    mode: JourneyMode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveJourneyTimeline.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
+import {
+  buildSpanTree,
+  flattenSpanTree
+} from "../../shared/schema/journey";
+const props = defineProps({
+  events: { type: Array, required: true },
+  mode: { type: String, required: true }
+});
+const { prefix } = useRuntimeConfig().public.observe;
+const rows = computed(() => {
+  if (props.mode === "trace") {
+    return flattenSpanTree(buildSpanTree(props.events)).map((f) => ({
+      type: "event",
+      key: f.event.id,
+      event: f.event,
+      depth: f.depth
+    }));
+  }
+  const out = [];
+  let seg;
+  for (const e of props.events) {
+    const cur = props.mode === "session" ? e.traceId : e.session;
+    if (cur !== seg) {
+      seg = cur;
+      out.push({
+        type: "divider",
+        key: `d-${e.id}`,
+        label: props.mode === "session" ? cur ? `trace ${cur}` : "no trace" : cur ? `session ${cur}` : "no session"
+      });
+    }
+    out.push({ type: "event", key: e.id, event: e, depth: 0 });
+  }
+  return out;
+});
+const maxOffset = computed(() => Math.max(1, ...props.events.map((e) => e.offsetMs)));
+function leftPct(offset) {
+  const pct = offset / maxOffset.value * 100;
+  return pct < 0 ? 0 : pct > 100 ? 100 : pct;
+}
+function fmtOffset(ms) {
+  if (ms < 1e3) return `+${ms}ms`;
+  if (ms < 1e4) return `+${(ms / 1e3).toFixed(2)}s`;
+  return `+${(ms / 1e3).toFixed(1)}s`;
+}
+const LEVEL_BG = {
+  0: "bg-error",
+  1: "bg-warning",
+  2: "bg-info",
+  3: "bg-info",
+  4: "bg-elevated",
+  5: "bg-elevated"
+};
+</script>
+
+<template>
+  <div
+    v-if="events.length === 0"
+    class="rounded-lg border border-default p-8 text-center text-sm text-muted"
+  >
+    No events to display.
+  </div>
+
+  <div
+    v-else
+    class="space-y-1"
+  >
+    <template
+      v-for="row in rows"
+      :key="row.key"
+    >
+      <div
+        v-if="row.type === 'divider'"
+        class="pt-3 pb-1 text-xs font-mono text-dimmed break-all"
+      >
+        {{ row.label }}
+      </div>
+
+      <NuxtLink
+        v-else
+        :to="`${prefix}/logs/${row.event.id}`"
+        class="group flex flex-col gap-1 rounded-md px-2 py-1.5 hover:bg-elevated/50 sm:grid sm:grid-cols-[minmax(0,22rem)_1fr] sm:items-center sm:gap-3"
+      >
+        <div
+          class="flex min-w-0 items-center gap-2"
+          :style="{ paddingLeft: `${row.depth * 16}px` }"
+        >
+          <ObserveLogLevelBadge :level="row.event.level" />
+          <UBadge
+            v-if="row.event.app"
+            color="neutral"
+            variant="subtle"
+            size="sm"
+          >
+            {{ row.event.app }}
+          </UBadge>
+          <span class="truncate text-sm group-hover:text-primary">{{ row.event.message }}</span>
+        </div>
+
+        <div class="relative h-5">
+          <div class="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-elevated" />
+          <div
+            class="absolute top-1/2 flex -translate-y-1/2 items-center gap-1.5"
+            :style="{ left: `${leftPct(row.event.offsetMs)}%` }"
+          >
+            <span
+              class="h-2.5 w-2.5 shrink-0 -translate-x-1/2 rounded-full ring-2 ring-default"
+              :class="LEVEL_BG[row.event.level] ?? 'bg-elevated'"
+              :title="`${fmtOffset(row.event.offsetMs)} \xB7 ${row.event.message}`"
+            />
+            <span class="whitespace-nowrap text-xs tabular-nums text-muted">{{ fmtOffset(row.event.offsetMs) }}</span>
+          </div>
+        </div>
+      </NuxtLink>
+    </template>
+  </div>
+</template>

package/dist/runtime/app/components/ObserveJourneyTimeline.vue.d.ts

@@ -0,0 +1,14 @@
+import { type JourneyEvent, type JourneyMode } from '../../shared/schema/journey.js';
+/**
+ * The correlation waterfall (CP12). SSR-safe @nuxt/ui + CSS-grid lanes (no d3, no
+ * .client wrapper): each row is a metadata cell + a track whose marker sits at
+ * offsetMs / maxOffset. Trace mode nests rows by the parentId -> spanId span tree;
+ * session/user modes render a flat chronological list segmented by trace/session.
+ */
+type __VLS_Props = {
+    events: JourneyEvent[];
+    mode: JourneyMode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogDetail.d.vue.ts

@@ -0,0 +1,12 @@
+import type { LogDetail } from '../../shared/schema/logs-query.js';
+/**
+ * Single-log detail. The stack is the most load-bearing element, so it renders first
+ * when present. The trace id links back into a trace-filtered explorer view - the CP12
+ * (journeys) extension point; session/user stay plain text until then.
+ */
+type __VLS_Props = {
+    log: LogDetail;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogDetail.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { formatRelative } from "../../shared/utils/format-relative";
+const props = defineProps({
+  log: { type: Object, required: true }
+});
+const { prefix } = useRuntimeConfig().public.observe;
+const heading = computed(
+  () => props.log.error?.name ? `${props.log.error.name}: ${props.log.message}` : props.log.message
+);
+function absTime(ms) {
+  return new Date(ms).toLocaleString();
+}
+const ctxPretty = computed(
+  () => props.log.ctx ? JSON.stringify(props.log.ctx, null, 2) : ""
+);
+const meta = computed(() => {
+  const l = props.log;
+  const rows = [
+    { label: "Time", value: `${absTime(l.time)} (${formatRelative(l.time)})` },
+    { label: "Received", value: absTime(l.received_at) }
+  ];
+  if (l.app || l.service_id) rows.push({ label: "Service", value: l.service_id ? `${l.app} \xB7 ${l.service_id}` : l.app });
+  if (l.route) rows.push({ label: "Route", value: l.route });
+  if (l.feature) rows.push({ label: "Feature", value: l.feature });
+  if (l.error?.code) rows.push({ label: "Error code", value: l.error.code });
+  return rows;
+});
+function journeyTo(mode, key) {
+  return `${prefix}/journey?mode=${mode}&key=${encodeURIComponent(key)}`;
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-center gap-2">
+      <ObserveLogLevelBadge :level="log.level" />
+      <UBadge
+        v-if="log.app"
+        color="neutral"
+        variant="subtle"
+      >
+        {{ log.app }}
+      </UBadge>
+      <UBadge
+        v-if="log.version"
+        color="neutral"
+        variant="subtle"
+      >
+        {{ log.version }}
+      </UBadge>
+      <UBadge
+        v-if="log.env"
+        color="neutral"
+        variant="subtle"
+      >
+        {{ log.env }}
+      </UBadge>
+    </div>
+
+    <h1 class="text-lg font-semibold break-words">
+      {{ heading }}
+    </h1>
+
+    <UCard
+      v-if="log.error?.stack"
+      :ui="{ body: 'p-0 sm:p-0' }"
+    >
+      <pre class="text-xs overflow-x-auto p-4 leading-relaxed">{{ log.error.stack }}</pre>
+    </UCard>
+
+    <UCard>
+      <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 text-sm">
+        <div
+          v-for="row in meta"
+          :key="row.label"
+          class="flex flex-col"
+        >
+          <dt class="text-xs uppercase tracking-wider text-muted">
+            {{ row.label }}
+          </dt>
+          <dd class="break-words">
+            {{ row.value }}
+          </dd>
+        </div>
+      </dl>
+    </UCard>
+
+    <UCard v-if="log.session || log.user">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted mb-2">
+        Correlation
+      </h2>
+      <div class="flex flex-wrap gap-2">
+        <UButton
+          v-if="log.session"
+          size="sm"
+          variant="subtle"
+          color="neutral"
+          icon="i-lucide-waypoints"
+          :label="`Session journey`"
+          :to="journeyTo('session', log.session)"
+        />
+        <UButton
+          v-if="log.user"
+          size="sm"
+          variant="subtle"
+          color="neutral"
+          icon="i-lucide-waypoints"
+          :label="`User journey`"
+          :to="journeyTo('user', log.user)"
+        />
+      </div>
+      <div class="mt-2 space-y-1 text-xs text-muted font-mono break-all">
+        <p v-if="log.session">
+          session {{ log.session }}
+        </p>
+        <p v-if="log.user">
+          user {{ log.user }}
+        </p>
+      </div>
+    </UCard>
+
+    <UCard v-if="log.trace">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted mb-2">
+        Trace
+      </h2>
+      <NuxtLink
+        v-if="log.trace.traceId"
+        :to="`${prefix}/logs?traceId=${log.trace.traceId}`"
+        class="text-primary hover:underline font-mono text-sm break-all"
+      >
+        {{ log.trace.traceId }}
+      </NuxtLink>
+      <p class="text-xs text-muted mt-1">
+        View all events in this trace
+      </p>
+      <div
+        v-if="log.trace.traceId"
+        class="mt-2"
+      >
+        <UButton
+          size="sm"
+          variant="subtle"
+          icon="i-lucide-waypoints"
+          label="View journey"
+          :to="`${prefix}/journey?mode=trace&key=${log.trace.traceId}`"
+        />
+      </div>
+      <div class="mt-2 space-y-1 text-xs text-muted font-mono break-all">
+        <p v-if="log.trace.spanId">
+          span {{ log.trace.spanId }}
+        </p>
+        <p v-if="log.trace.parentId">
+          parent {{ log.trace.parentId }}
+        </p>
+      </div>
+    </UCard>
+
+    <UCard
+      v-if="log.ctx"
+      :ui="{ body: 'p-0 sm:p-0' }"
+    >
+      <div class="px-4 pt-3">
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+          Context
+        </h2>
+      </div>
+      <pre class="text-xs overflow-x-auto p-4 leading-relaxed">{{ ctxPretty }}</pre>
+    </UCard>
+
+    <div
+      v-if="log.tags && log.tags.length"
+      class="flex flex-wrap gap-1.5"
+    >
+      <UBadge
+        v-for="tag in log.tags"
+        :key="tag"
+        color="neutral"
+        variant="outline"
+        size="sm"
+      >
+        {{ tag }}
+      </UBadge>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/ObserveLogDetail.vue.d.ts

@@ -0,0 +1,12 @@
+import type { LogDetail } from '../../shared/schema/logs-query.js';
+/**
+ * Single-log detail. The stack is the most load-bearing element, so it renders first
+ * when present. The trace id links back into a trace-filtered explorer view - the CP12
+ * (journeys) extension point; session/user stay plain text until then.
+ */
+type __VLS_Props = {
+    log: LogDetail;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogLevelBadge.d.vue.ts

@@ -0,0 +1,10 @@
+import type { BadgeProps } from '@nuxt/ui';
+type __VLS_Props = {
+    level: number;
+    size?: BadgeProps['size'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogLevelBadge.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { computed } from "vue";
+import { levelName } from "../../shared/schema/levels";
+const props = defineProps({
+  level: { type: Number, required: true },
+  size: { type: null, required: false, default: "sm" }
+});
+const COLORS = {
+  0: "error",
+  1: "warning",
+  2: "info",
+  3: "info",
+  4: "neutral",
+  5: "neutral"
+};
+const color = computed(() => COLORS[props.level] ?? "neutral");
+const label = computed(() => levelName(props.level));
+</script>
+
+<template>
+  <UBadge
+    :color="color"
+    :size="size"
+    variant="subtle"
+    class="uppercase tracking-wide"
+  >
+    {{ label }}
+  </UBadge>
+</template>

package/dist/runtime/app/components/ObserveLogLevelBadge.vue.d.ts

@@ -0,0 +1,10 @@
+import type { BadgeProps } from '@nuxt/ui';
+type __VLS_Props = {
+    level: number;
+    size?: BadgeProps['size'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogsFilterBar.d.vue.ts

@@ -0,0 +1,20 @@
+import type { LogsFilters } from '../composables/useObserveLogs.js';
+/**
+ * The logs explorer's own filters: level multi-select, version multi-select (fed by
+ * facets), debounced text search, and a trace chip. Service/group/period controls live
+ * in the navbar (Fact 4) and are never duplicated here. Emits partial patches upward;
+ * the composable owns the state + URL sync.
+ */
+type __VLS_Props = {
+    filters: LogsFilters;
+    versions: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    update: (args_0: Partial<LogsFilters>) => any;
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((args_0: Partial<LogsFilters>) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogsFilterBar.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { CANONICAL_LEVELS } from "../../shared/schema/levels";
+const props = defineProps({
+  filters: { type: Object, required: true },
+  versions: { type: Array, required: true }
+});
+const emit = defineEmits(["update", "clear"]);
+const levelItems = Object.entries(CANONICAL_LEVELS).map(([value, label]) => ({
+  label,
+  value: Number(value)
+}));
+const versionItems = computed(() => props.versions.map((v) => ({ label: v, value: v })));
+const selectedLevels = computed({
+  get: () => props.filters.levels,
+  set: (v) => emit("update", { levels: v })
+});
+const selectedVersions = computed({
+  get: () => props.filters.versions,
+  set: (v) => emit("update", { versions: v })
+});
+const qLocal = ref(props.filters.q);
+watch(() => props.filters.q, (v) => {
+  if (v !== qLocal.value) qLocal.value = v;
+});
+let timer;
+watch(qLocal, (v) => {
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => emit("update", { q: v }), 350);
+});
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+});
+const hasActive = computed(
+  () => props.filters.levels.length > 0 || props.filters.versions.length > 0 || props.filters.route != null || props.filters.feature != null || props.filters.q.length > 0 || props.filters.traceId != null
+);
+const traceShort = computed(
+  () => props.filters.traceId ? props.filters.traceId.slice(0, 12) : ""
+);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <USelectMenu
+      v-model="selectedLevels"
+      :items="levelItems"
+      value-key="value"
+      multiple
+      :search-input="false"
+      icon="i-lucide-signal"
+      placeholder="Level"
+      class="w-40"
+    />
+
+    <USelectMenu
+      v-model="selectedVersions"
+      :items="versionItems"
+      value-key="value"
+      multiple
+      :disabled="versionItems.length === 0"
+      icon="i-lucide-tag"
+      placeholder="Version"
+      class="w-40"
+    />
+
+    <UInput
+      v-model="qLocal"
+      icon="i-lucide-search"
+      placeholder="Search messages"
+      class="w-56"
+    />
+
+    <UBadge
+      v-if="filters.route"
+      color="neutral"
+      variant="subtle"
+      class="gap-1"
+    >
+      <span class="font-mono">route {{ filters.route }}</span>
+      <button
+        type="button"
+        class="cursor-pointer opacity-70 hover:opacity-100"
+        aria-label="Clear route filter"
+        @click="emit('update', { route: null })"
+      >
+        <UIcon name="i-lucide-x" />
+      </button>
+    </UBadge>
+
+    <UBadge
+      v-if="filters.feature"
+      color="neutral"
+      variant="subtle"
+      class="gap-1"
+    >
+      <span class="font-mono">feature {{ filters.feature }}</span>
+      <button
+        type="button"
+        class="cursor-pointer opacity-70 hover:opacity-100"
+        aria-label="Clear feature filter"
+        @click="emit('update', { feature: null })"
+      >
+        <UIcon name="i-lucide-x" />
+      </button>
+    </UBadge>
+
+    <UBadge
+      v-if="filters.traceId"
+      color="neutral"
+      variant="subtle"
+      class="gap-1"
+    >
+      <span class="font-mono">trace {{ traceShort }}…</span>
+      <button
+        type="button"
+        class="cursor-pointer opacity-70 hover:opacity-100"
+        aria-label="Clear trace filter"
+        @click="emit('update', { traceId: null })"
+      >
+        <UIcon name="i-lucide-x" />
+      </button>
+    </UBadge>
+
+    <UButton
+      v-if="hasActive"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      label="Clear"
+      icon="i-lucide-x"
+      @click="emit('clear')"
+    />
+  </div>
+</template>

package/dist/runtime/app/components/ObserveLogsFilterBar.vue.d.ts

@@ -0,0 +1,20 @@
+import type { LogsFilters } from '../composables/useObserveLogs.js';
+/**
+ * The logs explorer's own filters: level multi-select, version multi-select (fed by
+ * facets), debounced text search, and a trace chip. Service/group/period controls live
+ * in the navbar (Fact 4) and are never duplicated here. Emits partial patches upward;
+ * the composable owns the state + URL sync.
+ */
+type __VLS_Props = {
+    filters: LogsFilters;
+    versions: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    update: (args_0: Partial<LogsFilters>) => any;
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((args_0: Partial<LogsFilters>) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ObserveLogsTable.d.vue.ts

@@ -0,0 +1,20 @@
+import type { LogListItem } from '../../shared/schema/logs-query.js';
+/**
+ * The logs list, styled to sit alongside ObserveServicesTable. Rows click through to
+ * the detail page; pagination is bound to the server `total`. Heavy columns are already
+ * dropped server-side (LogListItem), so the wire stays lean.
+ */
+type __VLS_Props = {
+    rows: LogListItem[];
+    total: number;
+    page: number;
+    limit: number;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:page"?: ((args_0: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;