nuxt-observe 0.0.2

package/README.md

@@ -0,0 +1,92 @@
+# nuxt-observe
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Self-hosted observability + service-registry dashboard module for Nuxt.
+
+- [✨  Release Notes](/CHANGELOG.md)
+
+## Features
+
+- 📊  Self-hosted observability dashboard, mounted at a configurable prefix
+- 🩺  Health endpoint under `/api/observe`
+- 🧩  Zero-config: works out of the box, tune via the `observe` key or `nuxt-observe.config.ts`
+
+## Quick Setup
+
+Install the module in your Nuxt application:
+
+```bash
+npx nuxt module add nuxt-observe
+```
+
+Then open the dashboard at `/observe` (change the mount path via `observe.prefix`).
+
+## Documentation
+
+Full documentation lives in [`docs/`](./docs) and is built with VitePress:
+
+```bash
+# Start the docs dev server
+pnpm docs:dev
+
+# Build the static docs site
+pnpm docs:build
+
+# Preview the built site
+pnpm docs:preview
+```
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+
+  ```bash
+  # Install dependencies
+  pnpm install
+
+  # Generate type stubs
+  pnpm dev:prepare
+
+  # Develop with the playground
+  pnpm dev
+
+  # Build the playground
+  pnpm dev:build
+
+  # Run ESLint
+  pnpm lint
+
+  # Run the fast unit suite (Vitest, node env)
+  pnpm test
+  pnpm test:watch
+
+  # Run the Nuxt integration suite (boots the fixture app, exercises the endpoints)
+  pnpm test:nuxt
+
+  # Run the Playwright dashboard e2e suite (needs `npx playwright install chromium` once)
+  pnpm test:e2e
+
+  # Release new version
+  pnpm release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-observe/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/nuxt-observe
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-observe.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/nuxt-observe
+
+[license-src]: https://img.shields.io/npm/l/nuxt-observe.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nuxt-observe
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '../dist/runtime/shared/types/module-options.js';
+export { ModuleOptions } from '../dist/runtime/shared/types/module-options.js';
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-observe",
+  "configKey": "observe",
+  "version": "0.0.2",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,393 @@
+import { defineNuxtModule, createResolver, updateRuntimeConfig, addServerImports, addComponentsDir, addImportsDir, addLayout, addServerHandler, addServerPlugin, extendPages, addRouteMiddleware, addTypeTemplate } from '@nuxt/kit';
+import { readFileSync } from 'node:fs';
+import { defu } from 'defu';
+import { DEFAULT_OPTIONS, OBSERVE_API_BASE } from '../dist/runtime/shared/types/module-options.js';
+import { loadObserveConfig } from '../dist/runtime/shared/utils/observe-config.js';
+import { zObserveSeedConfig } from '../dist/runtime/shared/schema/registry.js';
+import { observeUserSchema } from '../dist/runtime/shared/auth/schema.js';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-observe",
+    configKey: "observe"
+  },
+  // Declare @nuxt/ui as a module dependency rather than installing it imperatively
+  // with installModule(). @nuxt/ui@4 pulls in @nuxt/icon (+ fonts/color-mode) via
+  // its own `moduleDependencies`, and Nuxt only recurses into those when @nuxt/ui
+  // is itself resolved as a dependency. A bare installModule('@nuxt/ui') skips that
+  // recursion, so @nuxt/icon never registers its `#build/nuxt-icon-client-bundle`
+  // template and every @nuxt/ui page 500s on the missing virtual module.
+  moduleDependencies: {
+    "@nuxt/ui": {},
+    // nuxt-auth-utils: cookie sessions + scrypt hashPassword/verifyPassword, exposed
+    // as Nitro server auto-imports (it has no importable subpath). Registered here for
+    // consistency with the @nuxt/ui pattern above.
+    "nuxt-auth-utils": {}
+  },
+  // Defaults live in DEFAULT_OPTIONS and are merged in setup() with defu, so we
+  // can still tell a user-set key from a default in later checkpoints.
+  defaults: {},
+  async setup(_options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.alias = nuxt.options.alias || {};
+    nuxt.options.alias["#observe/config"] = resolver.resolve("./runtime/options");
+    nuxt.options.alias["#observe/schema"] = resolver.resolve("./runtime/shared/schema/index");
+    nuxt.options.alias["#observe/server"] = resolver.resolve("./runtime/server");
+    nuxt.options.alias["#observe/app"] = resolver.resolve("./runtime/app");
+    const fileConfig = await loadObserveConfig(nuxt.options.rootDir);
+    const options = defu(fileConfig ?? {}, _options, DEFAULT_OPTIONS);
+    const prefix = options.prefix;
+    const pkg = JSON.parse(readFileSync(resolver.resolve("../package.json"), "utf-8"));
+    const version = pkg.version ?? "0.0.0";
+    const seed = zObserveSeedConfig.parse({
+      services: options.services,
+      groups: options.groups
+    });
+    const validatedAuthUsers = (options.auth?.users ?? []).map((u, i) => {
+      const r = observeUserSchema.safeParse(u);
+      if (!r.success) {
+        const who = u?.name ?? "?";
+        throw new Error(`[observe] invalid auth user #${i} (${who}): ${r.error.issues[0]?.message}`);
+      }
+      return r.data;
+    });
+    const dbPath = options.database.path;
+    const jwtOpt = options.auth?.jwt;
+    const jwtConfig = jwtOpt ? {
+      enabled: jwtOpt.enabled ?? false,
+      algorithms: jwtOpt.algorithms ?? ["HS256"],
+      secret: jwtOpt.secret ?? "",
+      publicKey: jwtOpt.publicKey ?? "",
+      jwksUri: jwtOpt.jwksUri ?? "",
+      issuer: jwtOpt.issuer ?? "",
+      audience: jwtOpt.audience ?? "",
+      clockTolerance: jwtOpt.clockTolerance ?? "",
+      roleClaim: jwtOpt.roleClaim ?? "observe_role",
+      subjectClaim: jwtOpt.subjectClaim ?? "sub",
+      assignmentsClaim: jwtOpt.assignmentsClaim ?? "observe_assignment",
+      roleMap: jwtOpt.roleMap ?? {},
+      claimsSource: jwtOpt.claimsSource ?? "token"
+    } : void 0;
+    updateRuntimeConfig({
+      observe: {
+        version,
+        retentionDays: options.retentionDays,
+        database: { path: dbPath },
+        ingest: options.ingest,
+        // CP13 rollout regression thresholds (server-only, nothing secret). Read in the
+        // regressions handler via useRuntimeConfig(event).observe.rollout.regression.
+        rollout: {
+          regression: { minEvents: 50, errorRateDelta: 0.05, errorRateMultiplier: 1.5, baselineWindowMs: 864e5 }
+        },
+        // CP14 error-grouping regression heuristic thresholds (server-only). Read in the
+        // errors handlers via useRuntimeConfig(event).observe.errors.
+        errors: { activeWindowMs: 864e5, regressionGapMs: 2592e5 },
+        services: seed.services ?? [],
+        groups: seed.groups ?? [],
+        // Server-only auth block: provider selection + the validated user seed
+        // (passwordHash / passwordEnv only). No plaintext, no public exposure.
+        auth: {
+          provider: options.auth?.provider ?? "config",
+          users: validatedAuthUsers,
+          ...jwtConfig ? { jwt: jwtConfig } : {}
+        }
+      },
+      public: {
+        observe: {
+          prefix,
+          apiBase: OBSERVE_API_BASE,
+          // What the login page + global middleware need; provider/users stay server-side.
+          loginPath: `${prefix}/login`,
+          // Optional override for the copy-paste ingest snippet on reverse-proxied installs.
+          ingestBaseUrl: options.ingest?.ingestBaseUrl ?? ""
+        }
+      }
+    });
+    nuxt.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.experimental = defu(nitroConfig.experimental, { database: true, tasks: true });
+      nitroConfig.database = defu(nitroConfig.database, {
+        observe: { connector: "better-sqlite3", options: { path: dbPath } }
+      });
+      nitroConfig.tasks = defu(nitroConfig.tasks, {
+        "observe:purge": {
+          handler: resolver.resolve("./runtime/server/tasks/purge"),
+          description: "Delete observe logs older than retentionDays"
+        },
+        // Manual/one-shot backfill (NOT scheduled): recompute error fingerprints for rows
+        // with a NULL or non-v1 fingerprint, run on demand or after an algorithm bump.
+        "observe:backfill-fingerprints": {
+          handler: resolver.resolve("./runtime/server/tasks/backfill-fingerprints"),
+          description: "Recompute error fingerprints for rows with NULL or non-v1 fingerprint"
+        }
+      });
+      nitroConfig.scheduledTasks = defu(nitroConfig.scheduledTasks, {
+        "0 * * * *": ["observe:purge"]
+      });
+    });
+    addServerImports([
+      { name: "getApiKeyFromEvent", from: resolver.resolve("./runtime/server/utils/api-keys") },
+      { name: "resolveServiceIdByKey", from: resolver.resolve("./runtime/server/utils/api-keys") },
+      { name: "requireObserveSession", from: resolver.resolve("./runtime/server/utils/require-observe-session") },
+      { name: "getAuthProvider", from: resolver.resolve("./runtime/server/auth/provider") },
+      // CP6 RBAC: the choke point + scope helpers host-app routes (and CP7-CP11) compose.
+      { name: "requireCapability", from: resolver.resolve("./runtime/server/utils/authz") },
+      { name: "serviceScopeFilter", from: resolver.resolve("./runtime/server/utils/authz") },
+      { name: "assertServiceInScope", from: resolver.resolve("./runtime/server/utils/authz") },
+      { name: "getAllowedServiceIds", from: resolver.resolve("./runtime/server/utils/authz") }
+    ]);
+    nuxt.options.css = nuxt.options.css || [];
+    nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
+    addComponentsDir({
+      path: resolver.resolve("./runtime/app/components"),
+      pathPrefix: false,
+      global: true
+    });
+    addImportsDir(resolver.resolve("./runtime/app/composables"));
+    addLayout({
+      src: resolver.resolve("./runtime/app/layouts/observe.vue"),
+      filename: "observe-layout.vue"
+    }, "observe");
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/health`,
+      handler: resolver.resolve("./runtime/server/api/observe/health.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/ingest`,
+      handler: resolver.resolve("./runtime/server/api/observe/ingest")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/ingest/frogger`,
+      handler: resolver.resolve("./runtime/server/api/observe/ingest/frogger")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/auth/login`,
+      handler: resolver.resolve("./runtime/server/api/observe/auth/login.post")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/auth/logout`,
+      handler: resolver.resolve("./runtime/server/api/observe/auth/logout.post")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/auth/me`,
+      handler: resolver.resolve("./runtime/server/api/observe/auth/me.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/overview`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/overview.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/stats`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/stats.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/activity`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/activity.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/logs`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/logs.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/logs/:id`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/logs/[id].get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/facets`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/facets.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/journey`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/journey.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/errors`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/errors/index.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/errors/:fingerprint`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/errors/[fingerprint].get")
+    });
+    addServerHandler({ route: `${OBSERVE_API_BASE}/rollout/versions`, method: "get", handler: resolver.resolve("./runtime/server/api/observe/rollout/versions.get") });
+    addServerHandler({ route: `${OBSERVE_API_BASE}/rollout/compare`, method: "get", handler: resolver.resolve("./runtime/server/api/observe/rollout/compare.get") });
+    addServerHandler({ route: `${OBSERVE_API_BASE}/rollout/regressions`, method: "get", handler: resolver.resolve("./runtime/server/api/observe/rollout/regressions.get") });
+    const provisioningRoutes = [
+      { route: `${OBSERVE_API_BASE}/services`, method: "get", handler: "./runtime/server/api/observe/services/index.get" },
+      { route: `${OBSERVE_API_BASE}/services`, method: "post", handler: "./runtime/server/api/observe/services/index.post" },
+      { route: `${OBSERVE_API_BASE}/services/:id`, method: "get", handler: "./runtime/server/api/observe/services/[id].get" },
+      { route: `${OBSERVE_API_BASE}/services/:id`, method: "patch", handler: "./runtime/server/api/observe/services/[id].patch" },
+      { route: `${OBSERVE_API_BASE}/services/:id`, method: "delete", handler: "./runtime/server/api/observe/services/[id].delete" },
+      { route: `${OBSERVE_API_BASE}/services/:id/restore`, method: "post", handler: "./runtime/server/api/observe/services/[id]/restore.post" },
+      { route: `${OBSERVE_API_BASE}/services/:id/keys`, method: "get", handler: "./runtime/server/api/observe/services/[id]/keys/index.get" },
+      { route: `${OBSERVE_API_BASE}/services/:id/keys`, method: "post", handler: "./runtime/server/api/observe/services/[id]/keys/index.post" },
+      { route: `${OBSERVE_API_BASE}/services/:id/keys/:keyId`, method: "delete", handler: "./runtime/server/api/observe/services/[id]/keys/[keyId].delete" },
+      { route: `${OBSERVE_API_BASE}/services/:id/keys/:keyId/rotate`, method: "post", handler: "./runtime/server/api/observe/services/[id]/keys/[keyId]/rotate.post" },
+      { route: `${OBSERVE_API_BASE}/services/:id/assignments`, method: "put", handler: "./runtime/server/api/observe/services/[id]/assignments.put" },
+      { route: `${OBSERVE_API_BASE}/groups`, method: "get", handler: "./runtime/server/api/observe/groups/index.get" },
+      { route: `${OBSERVE_API_BASE}/groups`, method: "post", handler: "./runtime/server/api/observe/groups/index.post" },
+      { route: `${OBSERVE_API_BASE}/groups/:id`, method: "get", handler: "./runtime/server/api/observe/groups/[id].get" },
+      { route: `${OBSERVE_API_BASE}/groups/:id`, method: "patch", handler: "./runtime/server/api/observe/groups/[id].patch" },
+      { route: `${OBSERVE_API_BASE}/groups/:id`, method: "delete", handler: "./runtime/server/api/observe/groups/[id].delete" },
+      { route: `${OBSERVE_API_BASE}/groups/:id/services`, method: "put", handler: "./runtime/server/api/observe/groups/[id]/services.put" },
+      { route: `${OBSERVE_API_BASE}/groups/:id/assignments`, method: "put", handler: "./runtime/server/api/observe/groups/[id]/assignments.put" },
+      { route: `${OBSERVE_API_BASE}/users`, method: "get", handler: "./runtime/server/api/observe/users/index.get" },
+      { route: `${OBSERVE_API_BASE}/users`, method: "post", handler: "./runtime/server/api/observe/users/index.post" },
+      { route: `${OBSERVE_API_BASE}/users/:id`, method: "get", handler: "./runtime/server/api/observe/users/[id].get" },
+      { route: `${OBSERVE_API_BASE}/users/:id`, method: "patch", handler: "./runtime/server/api/observe/users/[id].patch" },
+      { route: `${OBSERVE_API_BASE}/users/:id`, method: "delete", handler: "./runtime/server/api/observe/users/[id].delete" },
+      { route: `${OBSERVE_API_BASE}/users/:id/assignments`, method: "put", handler: "./runtime/server/api/observe/users/[id]/assignments.put" }
+    ];
+    for (const r of provisioningRoutes) {
+      addServerHandler({ route: r.route, method: r.method, handler: resolver.resolve(r.handler) });
+    }
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/migrations`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/observe/migrations/index.get")
+    });
+    addServerHandler({
+      route: `${OBSERVE_API_BASE}/migrations/run`,
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/observe/migrations/run.post")
+    });
+    addServerPlugin(resolver.resolve("./runtime/server/plugins/observe-migrate.server"));
+    nuxt.options.pages = true;
+    extendPages((pages) => {
+      pages.unshift({
+        name: "observe-overview",
+        path: prefix,
+        file: resolver.resolve("./runtime/app/pages/overview.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-metrics",
+        path: `${prefix}/metrics`,
+        file: resolver.resolve("./runtime/app/pages/metrics.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-activity",
+        path: `${prefix}/activity`,
+        file: resolver.resolve("./runtime/app/pages/activity.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-logs",
+        path: `${prefix}/logs`,
+        file: resolver.resolve("./runtime/app/pages/logs.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-log-detail",
+        path: `${prefix}/logs/:id`,
+        file: resolver.resolve("./runtime/app/pages/log-detail.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-journey",
+        path: `${prefix}/journey`,
+        file: resolver.resolve("./runtime/app/pages/journey.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-errors",
+        path: `${prefix}/errors`,
+        file: resolver.resolve("./runtime/app/pages/errors.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-error-detail",
+        path: `${prefix}/errors/:fingerprint`,
+        file: resolver.resolve("./runtime/app/pages/error-detail.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-rollout",
+        path: `${prefix}/rollout`,
+        file: resolver.resolve("./runtime/app/pages/rollout.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings",
+        path: `${prefix}/settings`,
+        file: resolver.resolve("./runtime/app/pages/settings/index.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-services",
+        path: `${prefix}/settings/services`,
+        file: resolver.resolve("./runtime/app/pages/settings/services.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-service-detail",
+        path: `${prefix}/settings/services/:id`,
+        file: resolver.resolve("./runtime/app/pages/settings/service-detail.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-groups",
+        path: `${prefix}/settings/groups`,
+        file: resolver.resolve("./runtime/app/pages/settings/groups.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-group-detail",
+        path: `${prefix}/settings/groups/:id`,
+        file: resolver.resolve("./runtime/app/pages/settings/group-detail.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-migrations",
+        path: `${prefix}/settings/migrations`,
+        file: resolver.resolve("./runtime/app/pages/settings/migrations.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-users",
+        path: `${prefix}/settings/users`,
+        file: resolver.resolve("./runtime/app/pages/settings/users/index.vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-settings-user-detail",
+        path: `${prefix}/settings/users/:id`,
+        file: resolver.resolve("./runtime/app/pages/settings/users/[id].vue"),
+        meta: { layout: "observe" }
+      });
+      pages.push({
+        name: "observe-login",
+        path: `${prefix}/login`,
+        file: resolver.resolve("./runtime/app/pages/login.vue")
+      });
+    });
+    addRouteMiddleware({
+      name: "observe-auth",
+      path: resolver.resolve("./runtime/app/middleware/observe-auth.global"),
+      global: true
+    });
+    const principalTypePath = resolver.resolve("./runtime/shared/auth/types");
+    addTypeTemplate({
+      filename: "types/observe-session.d.ts",
+      getContents: () => [
+        `import type { Principal } from '${principalTypePath}'`,
+        `declare module '#auth-utils' {`,
+        `  interface User extends Principal {}`,
+        `  interface UserSession { user: User, loggedInAt: number }`,
+        `}`,
+        `export {}`,
+        ``
+      ].join("\n")
+    }, { nuxt: true, nitro: true });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/app/assets/css/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";@import "@nuxt/ui";@source "../../";:root{--observe-viz-1:#2a78d6;--observe-viz-2:#1baf7a;--observe-viz-3:#eda100;--observe-viz-4:#008300;--observe-viz-5:#4a3aa7;--observe-viz-6:#e34948;--observe-viz-7:#e87ba4;--observe-viz-8:#eb6834;--observe-viz-muted:var(--ui-color-neutral-300)}.dark{--observe-viz-1:#3987e5;--observe-viz-2:#199e70;--observe-viz-3:#c98500;--observe-viz-4:#008300;--observe-viz-5:#9085e9;--observe-viz-6:#e66767;--observe-viz-7:#d55181;--observe-viz-8:#d95926;--observe-viz-muted:var(--ui-color-neutral-600)}.observe-chart text{fill:var(--ui-text-muted);font-size:11px}.observe-chart .domain{stroke:var(--ui-border-accented)}.observe-chart .tick line{stroke:none}.observe-chart .observe-grid line{shape-rendering:crispedges;stroke:var(--ui-border)}.observe-chart .observe-crosshair{shape-rendering:crispedges;stroke:var(--ui-border-accented)}.observe-chart-tooltip{background:var(--ui-bg-elevated);border-radius:var(--ui-radius);box-shadow:0 0 0 1px var(--ui-border),0 4px 12px rgba(0,0,0,.12);font-size:.75rem;line-height:1.4;max-width:16rem;padding:.5rem .625rem;pointer-events:none;position:absolute;z-index:10}.observe-chart-tooltip-title{color:var(--ui-text-muted);margin-bottom:.25rem}.observe-chart-tooltip-row{align-items:center;display:flex;gap:.375rem;white-space:nowrap}.observe-chart-tooltip-key{border-radius:1.5px;flex:none;height:3px;width:10px}.observe-chart-tooltip-value{color:var(--ui-text-highlighted);font-variant-numeric:tabular-nums;font-weight:600}.observe-chart-tooltip-label{color:var(--ui-text-muted)}

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

@@ -0,0 +1,13 @@
+import type { OverviewActivityItem } from '../../shared/schema/overview.js';
+/**
+ * Compact live feed for the overview's narrow column: one line per event (level dot,
+ * message, age) with an internal scroll so the page stays short. Errors get a second
+ * meta line; everything else keeps its detail in the row tooltip. Alarm colours are
+ * reserved for error/warn so the column stays quiet next to the services table.
+ */
+type __VLS_Props = {
+    items: 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/ObserveActivityFeed.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { levelName } from "../../shared/schema/levels";
+import { formatRelative } from "../../shared/utils/format-relative";
+defineProps({
+  items: { type: Array, required: true }
+});
+const LEVEL_DOTS = {
+  0: "bg-error",
+  1: "bg-warning",
+  3: "bg-info"
+};
+function rowTitle(item) {
+  const parts = [levelName(item.level), item.service];
+  if (item.route) parts.push(item.route);
+  const who = item.user ?? item.session;
+  if (who) parts.push(who);
+  if (item.traceId) parts.push(`trace ${item.traceId}`);
+  return parts.join(" \xB7 ");
+}
+</script>
+
+<template>
+  <section>
+    <div class="flex items-baseline justify-between mb-2">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+        Activity
+      </h2>
+      <span
+        v-if="items.length"
+        class="text-xs text-muted"
+      >latest {{ items.length }}</span>
+    </div>
+
+    <UCard :ui="{ body: 'p-0 sm:p-0' }">
+      <p
+        v-if="items.length === 0"
+        class="text-sm text-muted p-4"
+      >
+        No events in this window.
+      </p>
+
+      <ul
+        v-else
+        class="divide-y divide-default max-h-[32rem] overflow-y-auto"
+      >
+        <li
+          v-for="(item, i) in items"
+          :key="i"
+          class="px-4 py-2 flex items-start gap-2.5"
+          :title="rowTitle(item)"
+        >
+          <span
+            class="size-2 rounded-full shrink-0 mt-1.5"
+            :class="LEVEL_DOTS[item.level] ?? 'bg-accented'"
+          />
+          <div class="min-w-0 flex-1">
+            <p class="text-sm truncate">
+              <span
+                v-if="item.errorName"
+                class="font-medium"
+              >{{ item.errorName }}: </span>{{ item.message }}
+            </p>
+            <p
+              v-if="item.level === 0"
+              class="text-xs text-muted mt-0.5 truncate"
+            >
+              {{ item.service }}<span v-if="item.route"> · {{ item.route }}</span><span v-if="item.user || item.session"> · {{ item.user ?? item.session }}</span>
+            </p>
+          </div>
+          <span class="text-xs text-muted shrink-0 tabular-nums mt-0.5">
+            {{ formatRelative(item.time) }}
+          </span>
+        </li>
+      </ul>
+    </UCard>
+  </section>
+</template>

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

@@ -0,0 +1,13 @@
+import type { OverviewActivityItem } from '../../shared/schema/overview.js';
+/**
+ * Compact live feed for the overview's narrow column: one line per event (level dot,
+ * message, age) with an internal scroll so the page stays short. Errors get a second
+ * meta line; everything else keeps its detail in the row tooltip. Alarm colours are
+ * reserved for error/warn so the column stays quiet next to the services table.
+ */
+type __VLS_Props = {
+    items: 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/ObserveActivityTable.d.vue.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;