nuxt-observe 0.0.2

package/dist/runtime/app/composables/useObserveStats.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'vue';
+import type { StatsResponse } from '../../shared/schema/stats.js';
+export interface UseObserveStatsReturn {
+    data: Ref<StatsResponse | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+}
+/**
+ * The one stats fetch behind every chart. Keyed explicitly so the overview and
+ * metrics pages share a single request; the reactive query means changing the
+ * period or the selected observable refetches automatically.
+ */
+export declare function useObserveStats(): UseObserveStatsReturn;

package/dist/runtime/app/composables/useObserveStats.js

@@ -0,0 +1,23 @@
+import { computed } from "vue";
+import { useFetch } from "#imports";
+import { useObservePeriod } from "./useObservePeriod.js";
+import { useObserveScope } from "./useObserveScope.js";
+export function useObserveStats() {
+  const { period } = useObservePeriod();
+  const { serviceSlug, groupSlug } = useObserveScope();
+  const query = computed(() => ({
+    period: period.value,
+    ...serviceSlug.value ? { service: serviceSlug.value } : {},
+    ...groupSlug.value ? { group: groupSlug.value } : {}
+  }));
+  const { data, pending, error, refresh } = useFetch(
+    "/api/observe/stats",
+    { key: "observe:stats", query }
+  );
+  return {
+    data,
+    pending,
+    error,
+    refresh
+  };
+}

package/dist/runtime/app/composables/useObserveUsers.d.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue';
+import type { UserPick, UserDetail } from '../../shared/schema/provisioning.js';
+import type { CreateUserInput, PatchUserInput, UserAssignmentsInput } from '../../shared/auth/schema.js';
+export interface UseObserveUsersReturn {
+    data: Ref<UserPick[] | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+    create: (input: CreateUserInput) => Promise<UserDetail>;
+    update: (id: string, patch: PatchUserInput) => Promise<UserDetail>;
+    remove: (id: string) => Promise<{
+        ok: true;
+    }>;
+}
+/**
+ * Admin-only user list plus the CRUD mutations. The list source follows the active provider
+ * (DB rows when the db provider is active, config-seeded otherwise); the mutations target the
+ * DB routes and are only meaningful under the db provider.
+ */
+export declare function useObserveUsers(): UseObserveUsersReturn;
+export interface UseObserveUserDetailReturn {
+    data: Ref<UserDetail | null | undefined>;
+    pending: Ref<boolean>;
+    error: Ref<Error | null | undefined>;
+    refresh: () => Promise<void>;
+    saveAssignments: (input: UserAssignmentsInput) => Promise<UserDetail>;
+}
+/** Single-user detail keyed by id, plus the assignment-replace mutation, for the edit page. */
+export declare function useObserveUserDetail(id: string): UseObserveUserDetailReturn;

package/dist/runtime/app/composables/useObserveUsers.js

@@ -0,0 +1,33 @@
+import { useFetch } from "#imports";
+export function useObserveUsers() {
+  const { data, pending, error, refresh } = useFetch(
+    "/api/observe/users",
+    { key: "observe:users" }
+  );
+  const create = (input) => $fetch("/api/observe/users", { method: "POST", body: input });
+  const update = (id, patch) => $fetch(`/api/observe/users/${id}`, { method: "PATCH", body: patch });
+  const remove = (id) => $fetch(`/api/observe/users/${id}`, { method: "DELETE" });
+  return {
+    data,
+    pending,
+    error,
+    refresh,
+    create,
+    update,
+    remove
+  };
+}
+export function useObserveUserDetail(id) {
+  const { data, pending, error, refresh } = useFetch(
+    `/api/observe/users/${id}`,
+    { key: `observe:user:${id}` }
+  );
+  const saveAssignments = (input) => $fetch(`/api/observe/users/${id}/assignments`, { method: "PUT", body: input });
+  return {
+    data,
+    pending,
+    error,
+    refresh,
+    saveAssignments
+  };
+}

package/dist/runtime/app/layouts/observe.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_70: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_70) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/layouts/observe.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useRuntimeConfig, useUserSession, useRoute, navigateTo, useObserveAbility, useObserveMigrations } from "#imports";
+const { prefix, loginPath } = useRuntimeConfig().public.observe;
+const { user, fetch: fetchSession } = useUserSession();
+const { can } = useObserveAbility();
+const canManageMigrations = can("migrations.manage");
+const migrations = canManageMigrations ? useObserveMigrations() : null;
+const bannerDismissed = ref(false);
+const showMigrationBanner = computed(
+  () => canManageMigrations && !bannerDismissed.value && (migrations?.status.value?.pendingDestructive ?? 0) > 0
+);
+const pendingDestructive = computed(() => migrations?.status.value?.pendingDestructive ?? 0);
+const navItems = computed(() => {
+  const items = [];
+  if (can("stats.read")) {
+    items.push({ label: "Overview", icon: "i-lucide-layout-dashboard", to: prefix });
+    items.push({ label: "Metrics", icon: "i-lucide-chart-line", to: `${prefix}/metrics` });
+  }
+  if (can("logs.read")) {
+    items.push({ label: "Logs", icon: "i-lucide-scroll-text", to: `${prefix}/logs` });
+    items.push({ label: "Errors", icon: "i-lucide-bug", to: `${prefix}/errors` });
+    items.push({ label: "Journeys", icon: "i-lucide-waypoints", to: `${prefix}/journey` });
+  }
+  if (can("stats.read")) {
+    items.push({ label: "Activity", icon: "i-lucide-activity", to: `${prefix}/activity` });
+    items.push({ label: "Rollout", icon: "i-lucide-rocket", to: `${prefix}/rollout` });
+  }
+  if (can("services.read")) {
+    items.push({ label: "Provisioning", icon: "i-lucide-settings", to: `${prefix}/settings` });
+  }
+  if (can("users.manage")) {
+    items.push({ label: "Users", icon: "i-lucide-users", to: `${prefix}/settings/users` });
+  }
+  if (can("migrations.manage")) {
+    items.push({ label: "Migrations", icon: "i-lucide-database", to: `${prefix}/settings/migrations` });
+  }
+  return items;
+});
+async function logout() {
+  await $fetch("/api/observe/auth/logout", { method: "POST" });
+  await fetchSession();
+  await navigateTo(loginPath);
+}
+const route = useRoute();
+const TITLES = {
+  "observe-metrics": "Metrics",
+  "observe-activity": "Activity",
+  "observe-logs": "Logs",
+  "observe-log-detail": "Log detail",
+  "observe-errors": "Errors",
+  "observe-error-detail": "Error detail",
+  "observe-journey": "Journey",
+  "observe-rollout": "Rollout",
+  "observe-settings": "Provisioning",
+  "observe-settings-services": "Services",
+  "observe-settings-service-detail": "Service",
+  "observe-settings-groups": "Groups",
+  "observe-settings-group-detail": "Group",
+  "observe-settings-users": "Users",
+  "observe-settings-user-detail": "User",
+  "observe-settings-migrations": "Migrations"
+};
+const navbarTitle = computed(() => TITLES[route.name] ?? "Overview");
+const userMenuItems = computed(() => [[
+  { label: user.value?.name ?? "", type: "label" },
+  { label: "Sign out", icon: "i-lucide-log-out", onSelect: logout }
+]]);
+</script>
+
+<template>
+  <UDashboardGroup>
+    <UDashboardSidebar
+      collapsible
+      :min-size="12"
+      :default-size="15"
+    >
+      <template #header>
+        <span class="text-sm font-semibold truncate">nuxt-observe</span>
+      </template>
+
+      <UNavigationMenu
+        :items="navItems"
+        orientation="vertical"
+        class="w-full"
+      />
+
+      <template #footer>
+        <UDropdownMenu
+          :items="userMenuItems"
+          class="w-full"
+        >
+          <UButton
+            variant="ghost"
+            color="neutral"
+            block
+            class="justify-start"
+          >
+            <UUser
+              :name="user?.name"
+              :description="user?.role"
+              size="sm"
+            />
+          </UButton>
+        </UDropdownMenu>
+      </template>
+    </UDashboardSidebar>
+
+    <UDashboardPanel>
+      <template #header>
+        <UDashboardNavbar :title="navbarTitle">
+          <template #right>
+            <ObserveServiceSwitcher />
+            <ObservePeriodSelector />
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <UAlert
+          v-if="showMigrationBanner"
+          color="warning"
+          variant="subtle"
+          icon="i-lucide-database"
+          class="mb-4"
+          :title="`Database migration required: ${pendingDestructive} pending`"
+          description="A destructive schema migration is awaiting review."
+          :actions="[{ label: 'Review', color: 'warning', variant: 'soft', to: `${prefix}/settings/migrations` }]"
+          close
+          @update:open="(v) => {
+  if (!v) bannerDismissed = true;
+}"
+        />
+        <slot />
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>

package/dist/runtime/app/layouts/observe.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_70: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_70) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/middleware/observe-auth.global.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Guard dashboard-prefix routes. Exempt the login path itself and any route outside the
+ * prefix (the module targets a dedicated app, so a blanket global guard is safe). Reads
+ * prefix/loginPath from public runtimeConfig — no hard-coded '/observe'.
+ *
+ * CP5 gates on logged-in vs not only. Capability/assignment enforcement is CP6.
+ */
+declare const _default: import("#app").RouteMiddleware;
+export default _default;

package/dist/runtime/app/middleware/observe-auth.global.js

@@ -0,0 +1,8 @@
+import { defineNuxtRouteMiddleware, useRuntimeConfig, useUserSession, navigateTo } from "#imports";
+export default defineNuxtRouteMiddleware((to) => {
+  const { prefix, loginPath } = useRuntimeConfig().public.observe;
+  if (!to.path.startsWith(prefix)) return;
+  if (to.path === loginPath) return;
+  const { loggedIn } = useUserSession();
+  if (!loggedIn.value) return navigateTo(loginPath);
+});

package/dist/runtime/app/pages/activity.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/activity.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from "vue";
+import { useObserveActivity } from "../composables/useObserveActivity";
+const { data, pending, error, dimension, sort, q } = useObserveActivity();
+const dimensionItems = [
+  { label: "Auto (route or feature)", value: "auto" },
+  { label: "Route", value: "route" },
+  { label: "Feature", value: "feature" }
+];
+const num = new Intl.NumberFormat("en");
+const coverage = computed(() => {
+  const d = data.value;
+  if (!d || d.total === 0) return "";
+  return `${num.format(d.withKey)} of ${num.format(d.total)} events carry a key`;
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      title="Failed to load activity"
+      :description="error.message"
+    />
+
+    <template v-else>
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <USelectMenu
+          v-model="dimension"
+          :items="dimensionItems"
+          value-key="value"
+          :search-input="false"
+          icon="i-lucide-layers"
+          class="w-56"
+        />
+        <span
+          v-if="coverage"
+          class="text-xs text-muted"
+        >{{ coverage }}</span>
+      </div>
+
+      <ObserveActivityTable
+        v-model:sort="sort"
+        v-model:q="q"
+        :items="data?.items ?? []"
+        :total="data?.total ?? 0"
+        :degraded="data?.degraded ?? false"
+        :pending="pending"
+      />
+    </template>
+  </div>
+</template>

package/dist/runtime/app/pages/activity.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/error-detail.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/error-detail.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRuntimeConfig } from "#imports";
+import { useObserveErrorGroup } from "../composables/useObserveErrors";
+import { formatRelative } from "../../shared/utils/format-relative";
+const route = useRoute();
+const { prefix } = useRuntimeConfig().public.observe;
+const fingerprint = route.params.fingerprint;
+const { data, pending, error, page, limit } = useObserveErrorGroup(fingerprint);
+const header = computed(() => data.value?.header);
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+function absTime(ms) {
+  return new Date(ms).toLocaleString();
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UButton
+      variant="ghost"
+      color="neutral"
+      icon="i-lucide-arrow-left"
+      label="Errors"
+      :to="`${prefix}/errors`"
+    />
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      title="Failed to load error"
+      :description="error.message"
+    />
+
+    <template v-else-if="header">
+      <!-- Header card. -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex flex-wrap items-center gap-2">
+            <ObserveLogLevelBadge :level="header.worstLevel" />
+            <UBadge
+              v-if="header.regressed"
+              color="warning"
+              variant="subtle"
+              icon="i-lucide-trending-up"
+            >
+              Regressed
+            </UBadge>
+            <span
+              v-if="header.code"
+              class="text-xs text-muted tabular-nums"
+            >code {{ header.code }}</span>
+          </div>
+          <div>
+            <h1 class="text-lg font-semibold text-highlighted break-words">
+              <span v-if="header.name">{{ header.name }}: </span>{{ header.message ?? header.fingerprint }}
+            </h1>
+            <p class="text-xs text-muted font-mono mt-1">
+              {{ header.fingerprint }}
+            </p>
+          </div>
+          <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
+            <div>
+              <div class="text-xs text-muted">
+                Events
+              </div>
+              <div class="font-medium tabular-nums">
+                {{ compact.format(header.count) }}
+              </div>
+            </div>
+            <div>
+              <div class="text-xs text-muted">
+                Services
+              </div>
+              <div
+                class="font-medium truncate"
+                :title="header.apps.join(', ')"
+              >
+                {{ header.apps.join(", ") || "\u2014" }}
+              </div>
+            </div>
+            <div>
+              <div class="text-xs text-muted">
+                First seen
+              </div>
+              <div
+                class="font-medium"
+                :title="absTime(header.firstSeen)"
+              >
+                {{ formatRelative(header.firstSeen) }}
+              </div>
+            </div>
+            <div>
+              <div class="text-xs text-muted">
+                Last seen
+              </div>
+              <div
+                class="font-medium"
+                :title="absTime(header.lastSeen)"
+              >
+                {{ formatRelative(header.lastSeen) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Occurrences over time. -->
+      <ObserveVolumeChart
+        :buckets="data?.series ?? []"
+        :bucket-ms="data?.bucketMs ?? 1"
+        :pending="pending"
+      />
+
+      <!-- Breakdowns. -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+        <section>
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-muted mb-2">
+            By version
+          </h2>
+          <UCard :ui="{ body: 'p-0 sm:p-0' }">
+            <ul class="divide-y divide-default">
+              <li
+                v-for="v in data?.versions ?? []"
+                :key="v.version"
+                class="flex items-center justify-between px-4 py-2 text-sm"
+              >
+                <span class="truncate">{{ v.version }}</span>
+                <span class="text-muted tabular-nums">{{ compact.format(v.count) }}</span>
+              </li>
+              <li
+                v-if="!data?.versions?.length"
+                class="px-4 py-3 text-sm text-muted"
+              >
+                No versioned occurrences.
+              </li>
+            </ul>
+          </UCard>
+        </section>
+
+        <section>
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-muted mb-2">
+            By service
+          </h2>
+          <UCard :ui="{ body: 'p-0 sm:p-0' }">
+            <ul class="divide-y divide-default">
+              <li
+                v-for="s in data?.services ?? []"
+                :key="s.serviceId ?? 'unknown'"
+                class="flex items-center justify-between px-4 py-2 text-sm"
+              >
+                <span class="truncate">{{ s.name ?? s.slug ?? s.serviceId ?? "\u2014" }}</span>
+                <span class="text-muted tabular-nums">{{ compact.format(s.count) }}</span>
+              </li>
+              <li
+                v-if="!data?.services?.length"
+                class="px-4 py-3 text-sm text-muted"
+              >
+                No service occurrences.
+              </li>
+            </ul>
+          </UCard>
+        </section>
+      </div>
+
+      <!-- Raw occurrences: each row links to the CP9 log detail. -->
+      <section>
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-muted mb-2">
+          Occurrences
+        </h2>
+        <ObserveLogsTable
+          :rows="data?.occurrences ?? []"
+          :total="data?.occurrencesTotal ?? 0"
+          :page="page"
+          :limit="limit"
+          :pending="pending"
+          @update:page="page = $event"
+        />
+      </section>
+    </template>
+
+    <div
+      v-else-if="pending"
+      class="space-y-4"
+    >
+      <USkeleton class="h-40 w-full" />
+      <USkeleton class="h-60 w-full" />
+    </div>
+  </div>
+</template>

package/dist/runtime/app/pages/error-detail.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/errors.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/errors.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useObserveErrors } from "../composables/useObserveErrors";
+const { data, pending, error, q, sort, page, limit } = useObserveErrors();
+const sortItems = [
+  { label: "Recently seen", value: "recent" },
+  { label: "Most events", value: "count" },
+  { label: "First seen", value: "first" }
+];
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      title="Failed to load errors"
+      :description="error.message"
+    />
+
+    <template v-else>
+      <div class="flex flex-wrap items-center gap-3">
+        <UInput
+          v-model="q"
+          icon="i-lucide-search"
+          placeholder="Search error messages"
+          class="max-w-xs grow"
+        />
+        <USelect
+          v-model="sort"
+          :items="sortItems"
+          value-key="value"
+          class="w-44"
+        />
+      </div>
+
+      <ObserveErrorsTable
+        :rows="data?.groups ?? []"
+        :total="data?.total ?? 0"
+        :page="page"
+        :limit="limit"
+        :pending="pending"
+        @update:page="page = $event"
+      />
+    </template>
+  </div>
+</template>

package/dist/runtime/app/pages/errors.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/journey.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;