nuxt-observe 0.0.2

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

@@ -0,0 +1,187 @@
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig, useRouter } from "#imports";
+import { formatRelative } from "../../shared/utils/format-relative";
+import { useObservePeriod } from "../composables/useObservePeriod";
+import { useObserveScope } from "../composables/useObserveScope";
+const props = defineProps({
+  items: { type: Array, required: true },
+  total: { type: Number, required: true },
+  degraded: { type: Boolean, required: true },
+  pending: { type: Boolean, required: false },
+  compact: { type: Boolean, required: false }
+});
+const sort = defineModel("sort", { type: null, ...{ required: true } });
+const q = defineModel("q", { type: String, ...{ default: "" } });
+const ERROR_THRESHOLD = 0.05;
+const { prefix } = useRuntimeConfig().public.observe;
+const router = useRouter();
+const { period } = useObservePeriod();
+const { serviceSlug, groupSlug } = useObserveScope();
+const logsRouteExists = computed(() => router.hasRoute("observe-logs"));
+const showDim = computed(() => new Set(props.items.map((i) => i.dim)).size > 1);
+const numericHead = "text-right";
+const numericCell = "text-right tabular-nums";
+const columns = [
+  { id: "key", accessorKey: "key", header: "Route / Feature" },
+  { id: "count", accessorKey: "count", header: "Events", meta: { class: { th: numericHead, td: numericCell } } },
+  { id: "errors", accessorKey: "errors", header: "Errors", meta: { class: { th: numericHead, td: numericCell } } },
+  { id: "errorRate", accessorKey: "errorRate", header: "Error rate", meta: { class: { th: numericHead, td: numericCell } } },
+  { id: "lastSeen", accessorKey: "lastSeen", header: "Last seen", meta: { class: { th: numericHead, td: `${numericCell} text-muted whitespace-nowrap` } } }
+];
+const SORT_LABELS = {
+  count: "Events",
+  errors: "Errors",
+  errorRate: "Error rate",
+  lastSeen: "Last seen"
+};
+function ratioColor(rate) {
+  if (rate >= ERROR_THRESHOLD) return "error";
+  if (rate > 0) return "warning";
+  return "neutral";
+}
+function drillTo(item) {
+  return {
+    path: `${prefix}/logs`,
+    query: {
+      ...serviceSlug.value ? { service: serviceSlug.value } : {},
+      ...groupSlug.value ? { group: groupSlug.value } : {},
+      [item.dim]: item.key,
+      period: period.value
+    }
+  };
+}
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-0 sm:p-0' }">
+    <div
+      v-if="!compact"
+      class="flex items-center justify-between border-b border-default px-4 py-3"
+    >
+      <UInput
+        v-model="q"
+        icon="i-lucide-search"
+        placeholder="Filter keys"
+        class="w-56"
+      />
+    </div>
+
+    <div
+      v-if="degraded"
+      class="p-4"
+    >
+      <UAlert
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-route"
+        title="No route/feature data in these logs"
+        description="Events arrived in this window, but none carry the route or feature field that powers this view. The frogger companion checkpoint (CP15) will emit these automatically; until it lands, add route or feature to your log ctx and they will appear here."
+      />
+    </div>
+
+    <UTable
+      v-else
+      :data="items"
+      :columns="columns"
+      :loading="pending"
+      empty="No activity in this window."
+    >
+      <template #count-header>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 cursor-pointer hover:text-default"
+          @click="sort = 'count'"
+        >
+          {{ SORT_LABELS.count }}
+          <UIcon
+            v-if="sort === 'count'"
+            name="i-lucide-arrow-down"
+            class="size-3.5"
+          />
+        </button>
+      </template>
+      <template #errors-header>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 cursor-pointer hover:text-default"
+          @click="sort = 'errors'"
+        >
+          {{ SORT_LABELS.errors }}
+          <UIcon
+            v-if="sort === 'errors'"
+            name="i-lucide-arrow-down"
+            class="size-3.5"
+          />
+        </button>
+      </template>
+      <template #errorRate-header>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 cursor-pointer hover:text-default"
+          @click="sort = 'errorRate'"
+        >
+          {{ SORT_LABELS.errorRate }}
+          <UIcon
+            v-if="sort === 'errorRate'"
+            name="i-lucide-arrow-down"
+            class="size-3.5"
+          />
+        </button>
+      </template>
+      <template #lastSeen-header>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 cursor-pointer hover:text-default"
+          @click="sort = 'lastSeen'"
+        >
+          {{ SORT_LABELS.lastSeen }}
+          <UIcon
+            v-if="sort === 'lastSeen'"
+            name="i-lucide-arrow-down"
+            class="size-3.5"
+          />
+        </button>
+      </template>
+
+      <template #key-cell="{ row }">
+        <span class="flex items-center gap-2 min-w-0">
+          <NuxtLink
+            v-if="logsRouteExists"
+            :to="drillTo(row.original)"
+            class="font-mono text-sm truncate hover:text-primary"
+            :title="`View logs for ${row.original.key}`"
+          >{{ row.original.key }}</NuxtLink>
+          <span
+            v-else
+            class="font-mono text-sm truncate"
+            :title="row.original.key"
+          >{{ row.original.key }}</span>
+          <span
+            v-if="showDim"
+            class="text-xs text-muted shrink-0"
+          >{{ row.original.dim }}</span>
+        </span>
+      </template>
+
+      <template #errors-cell="{ row }">
+        <span :class="row.original.errors > 0 ? 'text-error font-medium' : 'text-muted'">
+          {{ row.original.errors }}
+        </span>
+      </template>
+
+      <template #errorRate-cell="{ row }">
+        <UBadge
+          :color="ratioColor(row.original.errorRate)"
+          variant="subtle"
+        >
+          {{ (row.original.errorRate * 100).toFixed(1) }}%
+        </UBadge>
+      </template>
+
+      <template #lastSeen-cell="{ row }">
+        {{ formatRelative(row.original.lastSeen) }}
+      </template>
+    </UTable>
+  </UCard>
+</template>

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

@@ -0,0 +1,30 @@
+import type { ActivityItem, ActivitySort } from '../../shared/schema/activity.js';
+/**
+ * The ranked top-hits list (CP10), styled to sit alongside ObserveServicesTable /
+ * ObserveLogsTable. Sort round-trips to the server (client-sorting a truncated top-N would
+ * be wrong), so the header buttons just set the sort model. Each key drills through to the
+ * logs explorer, gated on the route existing so the component is inert if CP9 is ever absent.
+ * Two empty-states: `degraded` (events exist but carry no route/feature, the CP15 emit gap)
+ * and the plain no-activity state.
+ */
+type __VLS_Props = {
+    items: ActivityItem[];
+    total: number;
+    degraded: boolean;
+    pending?: boolean;
+    compact?: boolean;
+};
+type __VLS_ModelProps = {
+    'sort': ActivitySort;
+    'q'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:sort": (value: "count" | "errors" | "errorRate" | "lastSeen") => any;
+    "update:q": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:sort"?: ((value: "count" | "errors" | "errorRate" | "lastSeen") => any) | undefined;
+    "onUpdate:q"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { Capability } from '../../shared/rbac/capabilities.js';
+/**
+ * Declarative slot gate: renders its default slot only when the current principal holds
+ * `capability` (optionally scoped to `serviceSlug`). Presentational only — see
+ * useObserveAbility; the server is the sole authority.
+ *
+ *   <ObserveCan capability="services.manage" :service-slug="svc.slug">
+ *     <UButton>Edit</UButton>
+ *   </ObserveCan>
+ */
+type __VLS_Props = {
+    capability: Capability;
+    serviceSlug?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,16 @@
+<script setup>
+import { computed } from "vue";
+import { useObserveAbility } from "../composables/useObserveAbility";
+const props = defineProps({
+  capability: { type: String, required: true },
+  serviceSlug: { type: String, required: false }
+});
+const { can, canForService } = useObserveAbility();
+const allowed = computed(
+  () => props.serviceSlug ? canForService(props.capability, props.serviceSlug) : can(props.capability)
+);
+</script>
+
+<template>
+  <slot v-if="allowed" />
+</template>

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

@@ -0,0 +1,27 @@
+import type { Capability } from '../../shared/rbac/capabilities.js';
+/**
+ * Declarative slot gate: renders its default slot only when the current principal holds
+ * `capability` (optionally scoped to `serviceSlug`). Presentational only — see
+ * useObserveAbility; the server is the sole authority.
+ *
+ *   <ObserveCan capability="services.manage" :service-slug="svc.slug">
+ *     <UButton>Edit</UButton>
+ *   </ObserveCan>
+ */
+type __VLS_Props = {
+    capability: Capability;
+    serviceSlug?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+import type { ErrorGroup } from '../../shared/schema/errors-query.js';
+/**
+ * The grouped-error list (CP14), styled to sit alongside ObserveLogsTable. Rows click
+ * through to the drill-down page; pagination is bound to the server `total`.
+ */
+type __VLS_Props = {
+    rows: ErrorGroup[];
+    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;

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

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from "vue";
+import { useRuntimeConfig, navigateTo } from "#imports";
+import { formatRelative } from "../../shared/utils/format-relative";
+const props = defineProps({
+  rows: { type: Array, required: true },
+  total: { type: Number, required: true },
+  page: { type: Number, required: true },
+  limit: { type: Number, required: true },
+  pending: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:page"]);
+const { prefix } = useRuntimeConfig().public.observe;
+const columns = [
+  { id: "level", accessorKey: "worstLevel", header: "Level" },
+  { id: "error", accessorKey: "message", header: "Error", meta: { class: { td: "max-w-md" } } },
+  { id: "count", accessorKey: "count", header: "Events", meta: { class: { th: "text-right", td: "text-right tabular-nums" } } },
+  { id: "services", header: "Services", meta: { class: { th: "hidden md:table-cell", td: "hidden md:table-cell text-muted" } } },
+  { id: "versions", header: "Versions", meta: { class: { th: "hidden lg:table-cell", td: "hidden lg:table-cell text-muted" } } },
+  { id: "lastSeen", accessorKey: "lastSeen", header: "Last seen", meta: { class: { td: "tabular-nums whitespace-nowrap text-muted" } } }
+];
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+function absTime(ms) {
+  return new Date(ms).toLocaleString();
+}
+function onSelect(_e, row) {
+  return navigateTo(`${prefix}/errors/${row.original.fingerprint}`);
+}
+const pageModel = computed({
+  get: () => props.page,
+  set: (p) => emit("update:page", p)
+});
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-0 sm:p-0' }">
+    <UTable
+      :data="rows"
+      :columns="columns"
+      :loading="pending"
+      empty="No errors in this window."
+      :meta="{ class: { tr: () => 'cursor-pointer' } }"
+      :on-select="onSelect"
+    >
+      <template #level-cell="{ row }">
+        <ObserveLogLevelBadge :level="row.original.worstLevel" />
+      </template>
+
+      <template #error-cell="{ row }">
+        <span class="flex items-center gap-2 min-w-0">
+          <span
+            class="block truncate"
+            :title="`${row.original.name ?? ''} ${row.original.message ?? ''}`.trim()"
+          >
+            <span
+              v-if="row.original.name"
+              class="font-medium"
+            >{{ row.original.name }}: </span>{{ row.original.message ?? row.original.fingerprint }}
+          </span>
+          <UBadge
+            v-if="row.original.regressed"
+            color="warning"
+            variant="subtle"
+            size="sm"
+            icon="i-lucide-trending-up"
+            class="shrink-0"
+          >
+            Regressed
+          </UBadge>
+        </span>
+      </template>
+
+      <template #count-cell="{ row }">
+        {{ compact.format(row.original.count) }}
+      </template>
+
+      <template #services-cell="{ row }">
+        <span
+          class="block truncate max-w-[16rem]"
+          :title="row.original.apps.join(', ')"
+        >{{ row.original.apps.join(", ") || "\u2014" }}</span>
+      </template>
+
+      <template #versions-cell="{ row }">
+        <span
+          class="block truncate max-w-[12rem]"
+          :title="row.original.versions.join(', ')"
+        >{{ row.original.versions.join(", ") || "\u2014" }}</span>
+      </template>
+
+      <template #lastSeen-cell="{ row }">
+        <span :title="absTime(row.original.lastSeen)">{{ formatRelative(row.original.lastSeen) }}</span>
+      </template>
+    </UTable>
+
+    <div class="flex items-center justify-between border-t border-default px-4 py-3">
+      <span class="text-xs text-muted tabular-nums">{{ total }} groups</span>
+      <UPagination
+        v-model:page="pageModel"
+        :total="total"
+        :items-per-page="limit"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,19 @@
+import type { ErrorGroup } from '../../shared/schema/errors-query.js';
+/**
+ * The grouped-error list (CP14), styled to sit alongside ObserveLogsTable. Rows click
+ * through to the drill-down page; pagination is bound to the server `total`.
+ */
+type __VLS_Props = {
+    rows: ErrorGroup[];
+    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;

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

@@ -0,0 +1,16 @@
+import type { OverviewStats, OverviewActivityItem } from '../../shared/schema/overview.js';
+/**
+ * The triage hero: a one-line health banner colour-coded by worst state, expanding
+ * to include the latest-error spotlight (who/what/when/where) only when there are
+ * errors in the window. Quiet when healthy, loud when broken. `detail` is the newest
+ * error-level activity item, used to enrich the spotlight with the actor fields
+ * stats.latestError does not carry.
+ */
+type __VLS_Props = {
+    stats?: OverviewStats;
+    periodLabel?: string;
+    detail?: OverviewActivityItem;
+};
+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/ObserveHealthHero.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from "vue";
+import { formatRelative } from "../../shared/utils/format-relative";
+const props = defineProps({
+  stats: { type: Object, required: false },
+  periodLabel: { type: String, required: false },
+  detail: { type: Object, required: false }
+});
+const state = computed(() => {
+  if (!props.stats) return "ok";
+  if (props.stats.errorCount > 0) return "error";
+  if (props.stats.warnCount > 0) return "warning";
+  return "ok";
+});
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const headline = computed(() => {
+  const s = props.stats;
+  if (!s) return "Loading";
+  if (s.errorCount > 0) {
+    return `${compact.format(s.errorCount)} ${s.errorCount === 1 ? "error" : "errors"} \xB7 ${(s.errorRate * 100).toFixed(1)}% error rate`;
+  }
+  if (s.warnCount > 0) {
+    return `No errors \xB7 ${compact.format(s.warnCount)} ${s.warnCount === 1 ? "warning" : "warnings"}`;
+  }
+  return "All clear";
+});
+const detailLine = computed(() => {
+  const s = props.stats;
+  if (!s) return "";
+  const parts = [];
+  if (s.errorCount > 0 && s.warnCount > 0) {
+    parts.push(`${compact.format(s.warnCount)} ${s.warnCount === 1 ? "warning" : "warnings"}`);
+  }
+  parts.push(`${compact.format(s.totalEvents)} ${s.totalEvents === 1 ? "event" : "events"}`);
+  if (props.periodLabel) parts.push(props.periodLabel.toLowerCase());
+  return parts.join(" \xB7 ");
+});
+const who = computed(() => props.detail?.user ?? props.detail?.session ?? "anonymous");
+</script>
+
+<template>
+  <section
+    class="rounded-lg ring p-4"
+    :class="{
+  'bg-error/5 ring-error/25': state === 'error',
+  'bg-warning/5 ring-warning/25': state === 'warning',
+  'bg-success/5 ring-success/20': state === 'ok'
+}"
+  >
+    <div class="flex items-center gap-3">
+      <span
+        class="size-2.5 rounded-full shrink-0"
+        :class="{
+  'bg-error': state === 'error',
+  'bg-warning': state === 'warning',
+  'bg-success': state === 'ok'
+}"
+      />
+      <p class="text-sm min-w-0 truncate">
+        <span class="font-semibold">{{ headline }}</span>
+        <span
+          v-if="detailLine"
+          class="text-muted"
+        > · {{ detailLine }}</span>
+      </p>
+    </div>
+
+    <div
+      v-if="stats?.latestError"
+      class="mt-3 rounded-md bg-default ring ring-error/20 p-3"
+    >
+      <p class="text-sm font-medium">
+        <span v-if="stats.latestError.name">{{ stats.latestError.name }}: </span>{{ stats.latestError.message }}
+      </p>
+      <dl class="mt-2 grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-2 text-xs">
+        <div>
+          <dt class="uppercase text-muted">
+            Who
+          </dt>
+          <dd class="mt-0.5 truncate">
+            {{ who }}
+          </dd>
+        </div>
+        <div>
+          <dt class="uppercase text-muted">
+            Where
+          </dt>
+          <dd class="mt-0.5 truncate">
+            {{ stats.latestError.service }}<span v-if="stats.latestError.route"> · {{ stats.latestError.route }}</span>
+          </dd>
+        </div>
+        <div>
+          <dt class="uppercase text-muted">
+            When
+          </dt>
+          <dd class="mt-0.5 tabular-nums">
+            {{ formatRelative(stats.latestError.time) }}
+          </dd>
+        </div>
+        <div>
+          <dt class="uppercase text-muted">
+            Trace
+          </dt>
+          <dd
+            class="mt-0.5 font-mono truncate"
+            :title="stats.latestError.traceId"
+          >
+            {{ stats.latestError.traceId ?? "n/a" }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,16 @@
+import type { OverviewStats, OverviewActivityItem } from '../../shared/schema/overview.js';
+/**
+ * The triage hero: a one-line health banner colour-coded by worst state, expanding
+ * to include the latest-error spotlight (who/what/when/where) only when there are
+ * errors in the window. Quiet when healthy, loud when broken. `detail` is the newest
+ * error-level activity item, used to enrich the spotlight with the actor fields
+ * stats.latestError does not carry.
+ */
+type __VLS_Props = {
+    stats?: OverviewStats;
+    periodLabel?: string;
+    detail?: OverviewActivityItem;
+};
+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/ObserveJourneySearch.d.vue.ts

@@ -0,0 +1,13 @@
+import type { JourneyMode } from '../../shared/schema/journey.js';
+/**
+ * The journey selector: a mode picker (trace/session/user) + an id box. Submitting
+ * navigates to the same page with ?mode=&key=, so the URL is the single source of
+ * truth (shareable, back-button-safe) and the page's fetch reacts to the change.
+ */
+type __VLS_Props = {
+    mode: JourneyMode;
+    keyValue: string;
+};
+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/ObserveJourneySearch.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useRuntimeConfig, navigateTo } from "#imports";
+const props = defineProps({
+  mode: { type: String, required: true },
+  keyValue: { type: String, required: true }
+});
+const { prefix } = useRuntimeConfig().public.observe;
+const localMode = ref(props.mode);
+const localKey = ref(props.keyValue);
+watch(() => props.mode, (v) => localMode.value = v);
+watch(() => props.keyValue, (v) => localKey.value = v);
+const modeItems = [
+  { label: "Trace", value: "trace" },
+  { label: "Session", value: "session" },
+  { label: "User", value: "user" }
+];
+const placeholder = {
+  trace: "32-hex trace id",
+  session: "session id",
+  user: "user id"
+};
+async function submit() {
+  const key = localKey.value.trim();
+  if (!key) return;
+  await navigateTo({ path: `${prefix}/journey`, query: { mode: localMode.value, key } });
+}
+</script>
+
+<template>
+  <form
+    class="flex flex-wrap items-center gap-2"
+    @submit.prevent="submit"
+  >
+    <USelect
+      v-model="localMode"
+      :items="modeItems"
+      value-key="value"
+      icon="i-lucide-waypoints"
+      class="w-36"
+    />
+    <UInput
+      v-model="localKey"
+      :placeholder="placeholder[localMode]"
+      icon="i-lucide-search"
+      class="w-80 font-mono"
+    />
+    <UButton
+      type="submit"
+      label="View journey"
+      icon="i-lucide-arrow-right"
+      :disabled="localKey.trim().length === 0"
+    />
+  </form>
+</template>

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

@@ -0,0 +1,13 @@
+import type { JourneyMode } from '../../shared/schema/journey.js';
+/**
+ * The journey selector: a mode picker (trace/session/user) + an id box. Submitting
+ * navigates to the same page with ?mode=&key=, so the URL is the single source of
+ * truth (shareable, back-button-safe) and the page's fetch reacts to the change.
+ */
+type __VLS_Props = {
+    mode: JourneyMode;
+    keyValue: string;
+};
+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;