nuxt-observe 0.0.2

package/dist/runtime/app/components/charts/ObserveVersionCompareChart.client.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { select, scaleTime, scaleLinear, axisBottom, axisLeft, line, max } from "d3";
+import {
+  CHART_MARGIN,
+  CHART_HEIGHT,
+  formatPct,
+  bucketTimeFormatter,
+  createTooltip,
+  attachBucketInteraction,
+  seriesColorMap
+} from "./chart-core";
+const props = defineProps({
+  compare: { type: null, required: true },
+  pending: { type: Boolean, required: false }
+});
+const host = ref(null);
+const svgRef = ref(null);
+const bucketStarts = computed(() => props.compare?.buckets ?? []);
+const series = computed(() => props.compare?.series ?? []);
+const bucketMs = computed(() => bucketStarts.value.length > 1 ? bucketStarts.value[1] - bucketStarts.value[0] : 1);
+const hasData = computed(() => series.value.some((s) => s.volume.some((v) => v > 0)));
+const windowMs = computed(() => bucketStarts.value.length * bucketMs.value);
+const timeLabel = computed(() => bucketTimeFormatter(bucketMs.value, windowMs.value));
+const colorOf = computed(() => seriesColorMap(series.value.map((s) => ({ id: s.version, slug: s.version }))));
+const hitBuckets = computed(
+  () => bucketStarts.value.map((t) => ({ t, count: 0, errorCount: 0, warnCount: 0, byService: {} }))
+);
+const tableIndexes = computed(
+  () => bucketStarts.value.map((_, i) => i).filter((i) => series.value.some((s) => (s.volume[i] ?? 0) > 0))
+);
+let tooltip;
+let interaction;
+let resizeObserver;
+let crosshairEl = null;
+const hitState = { buckets: [], bucketMs: 1, xFor: () => 0, plotWidth: 1 };
+function draw() {
+  const svgEl = svgRef.value;
+  const hostEl = host.value;
+  if (!svgEl || !hostEl) return;
+  const width = hostEl.clientWidth;
+  if (width <= 0) return;
+  const plotW = Math.max(1, width - CHART_MARGIN.left - CHART_MARGIN.right);
+  const plotH = CHART_HEIGHT - CHART_MARGIN.top - CHART_MARGIN.bottom;
+  const svg = select(svgEl).attr("width", width).attr("height", CHART_HEIGHT);
+  svg.selectAll("*").remove();
+  crosshairEl = null;
+  const starts = bucketStarts.value;
+  hitState.buckets = hasData.value ? hitBuckets.value : [];
+  hitState.bucketMs = bucketMs.value;
+  hitState.plotWidth = plotW;
+  if (!starts.length || !hasData.value) return;
+  const t0 = starts[0];
+  const t1 = starts[starts.length - 1] + bucketMs.value;
+  const x = scaleTime().domain([new Date(t0), new Date(t1)]).range([0, plotW]);
+  const rateAt = (s, i) => (s.errorRate[i] ?? 0) * 100;
+  const maxRate = max(series.value, (s) => max(s.errorRate.map((r) => r * 100)) ?? 0) ?? 0;
+  const y = scaleLinear().domain([0, Math.min(100, Math.max(5, maxRate * 1.2))]).nice(4).range([plotH, 0]);
+  hitState.xFor = (t) => x(new Date(t));
+  const g = svg.append("g").attr("transform", `translate(${CHART_MARGIN.left},${CHART_MARGIN.top})`);
+  g.append("g").attr("class", "observe-grid").selectAll("line").data(y.ticks(4).filter((t) => t > 0)).join("line").attr("x1", 0).attr("x2", plotW).attr("y1", (d) => y(d)).attr("y2", (d) => y(d));
+  g.append("g").attr("transform", `translate(0,${plotH})`).call(axisBottom(x).ticks(Math.max(3, Math.min(8, Math.floor(plotW / 90)))).tickSizeOuter(0));
+  g.append("g").call(axisLeft(y).ticks(4).tickSize(0).tickPadding(8).tickFormat((d) => formatPct(+d))).call((sel) => sel.select(".domain").remove());
+  const cx = (i) => x(new Date(starts[i] + bucketMs.value / 2));
+  for (const s of series.value) {
+    const rateLine = line().defined((i) => (s.volume[i] ?? 0) > 0).x((i) => cx(i)).y((i) => y(rateAt(s, i)));
+    g.append("path").datum(starts.map((_, i) => i)).attr("d", rateLine).style("fill", "none").style("stroke", colorOf.value.get(s.version)).style("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+  }
+  crosshairEl = g.append("line").attr("class", "observe-crosshair").attr("y1", 0).attr("y2", plotH).style("display", "none").node();
+}
+function handleHit(bucket, index, cx) {
+  if (crosshairEl) {
+    crosshairEl.style.display = "";
+    crosshairEl.setAttribute("x1", String(cx));
+    crosshairEl.setAttribute("x2", String(cx));
+  }
+  const rows = series.value.map((s) => ({ version: s.version, v: s.volume[index] ?? 0, rate: (s.errorRate[index] ?? 0) * 100 })).filter((r) => r.v > 0).sort((a, b) => b.rate - a.rate).map((r) => ({ color: colorOf.value.get(r.version), label: r.version, value: formatPct(r.rate) }));
+  tooltip?.show(cx, timeLabel.value(bucket.t), rows.length ? rows : [{ label: "no events", value: "" }]);
+}
+function handleClear() {
+  if (crosshairEl) crosshairEl.style.display = "none";
+  tooltip?.hide();
+}
+onMounted(async () => {
+  await nextTick();
+  if (host.value) {
+    tooltip = createTooltip(host.value);
+    resizeObserver = new ResizeObserver(() => draw());
+    resizeObserver.observe(host.value);
+  }
+  if (svgRef.value) {
+    interaction = attachBucketInteraction(svgRef.value, hitState, handleHit, handleClear);
+  }
+  draw();
+});
+watch(() => props.compare, () => {
+  interaction?.clear();
+  draw();
+});
+onBeforeUnmount(() => {
+  interaction?.destroy();
+  tooltip?.destroy();
+  resizeObserver?.disconnect();
+  if (svgRef.value) select(svgRef.value).selectAll("*").remove();
+});
+</script>
+
+<template>
+  <section>
+    <div class="flex items-baseline justify-between gap-4 mb-2">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+        Error rate by version
+      </h2>
+      <div class="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs text-muted min-w-0">
+        <span
+          v-for="s in series"
+          :key="s.version"
+          class="flex items-center gap-1.5"
+        >
+          <span
+            class="size-2 rounded-full shrink-0"
+            :style="{ background: colorOf.get(s.version) }"
+          />
+          <span class="truncate max-w-32">{{ s.version }}</span>
+        </span>
+      </div>
+    </div>
+
+    <UCard :ui="{ body: 'p-2 sm:p-3' }">
+      <div
+        ref="host"
+        class="relative"
+      >
+        <svg
+          v-show="hasData"
+          ref="svgRef"
+          class="observe-chart block w-full transition-opacity"
+          :class="{ 'opacity-60': pending }"
+          tabindex="0"
+          role="img"
+          aria-label="Error rate percentage over time, one line per version. Use arrow keys to read values per time bucket."
+        />
+        <USkeleton
+          v-if="pending && !hasData"
+          class="h-60 w-full"
+        />
+        <p
+          v-else-if="!hasData"
+          class="h-60 flex items-center justify-center text-sm text-muted"
+        >
+          No versioned events in this window.
+        </p>
+
+        <div
+          v-if="hasData"
+          class="sr-only"
+        >
+          <table>
+            <caption>Error rate by version per time bucket</caption>
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th
+                  v-for="s in series"
+                  :key="s.version"
+                >
+                  {{ s.version }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="i in tableIndexes"
+                :key="i"
+              >
+                <td>{{ timeLabel(bucketStarts[i]) }}</td>
+                <td
+                  v-for="s in series"
+                  :key="s.version"
+                >
+                  {{ (s.volume[i] ?? 0) > 0 ? formatPct((s.errorRate[i] ?? 0) * 100) : "\u2014" }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </UCard>
+  </section>
+</template>

package/dist/runtime/app/components/charts/ObserveVersionCompareChart.client.vue.d.ts

@@ -0,0 +1,14 @@
+import type { VersionCompare } from '../../../shared/schema/rollout.js';
+/**
+ * Error rate by version (CP13): one line per version of its per-bucket error rate,
+ * drawn only across buckets where that version had events (d3 line.defined gaps), so a
+ * version live for part of the window does not read as 0% before it appeared. Mirrors
+ * the CP8 error-rate chart's lifecycle; .client.vue because d3 is SSR-unsafe.
+ */
+type __VLS_Props = {
+    compare: VersionCompare | null | undefined;
+    pending?: boolean;
+};
+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/charts/ObserveVolumeChart.client.d.vue.ts

@@ -0,0 +1,16 @@
+import type { StatsBucket } from '../../../shared/schema/stats.js';
+/**
+ * Stacked-bar volume over time, by level: errors (level 0) anchored at the baseline,
+ * warnings above, every other level as a muted remainder, so the stack sums to count.
+ * Level colors are the dashboard's status tokens (error/warning), never categorical
+ * slots. Client-only (d3 touches the DOM); colors ride CSS vars so light/dark needs
+ * no redraw.
+ */
+type __VLS_Props = {
+    buckets: StatsBucket[];
+    bucketMs: number;
+    pending?: boolean;
+};
+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/charts/ObserveVolumeChart.client.vue

@@ -0,0 +1,199 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { select, scaleTime, scaleLinear, axisBottom, axisLeft, max } from "d3";
+import {
+  CHART_MARGIN,
+  CHART_HEIGHT,
+  formatCount,
+  bucketTimeFormatter,
+  roundedTopRect,
+  createTooltip,
+  attachBucketInteraction
+} from "./chart-core";
+const props = defineProps({
+  buckets: { type: Array, required: true },
+  bucketMs: { type: Number, required: true },
+  pending: { type: Boolean, required: false }
+});
+const host = ref(null);
+const svgRef = ref(null);
+const hasData = computed(() => props.buckets.some((b) => b.count > 0));
+const windowMs = computed(() => props.buckets.length * props.bucketMs);
+const timeLabel = computed(() => bucketTimeFormatter(props.bucketMs, windowMs.value));
+const tableRows = computed(() => props.buckets.filter((b) => b.count > 0));
+const otherOf = (b) => b.count - b.errorCount - b.warnCount;
+let tooltip;
+let interaction;
+let resizeObserver;
+let crosshairEl = null;
+const hitState = { buckets: [], bucketMs: 1, xFor: () => 0, plotWidth: 1 };
+function draw() {
+  const svgEl = svgRef.value;
+  const hostEl = host.value;
+  if (!svgEl || !hostEl) return;
+  const width = hostEl.clientWidth;
+  if (width <= 0) return;
+  const plotW = Math.max(1, width - CHART_MARGIN.left - CHART_MARGIN.right);
+  const plotH = CHART_HEIGHT - CHART_MARGIN.top - CHART_MARGIN.bottom;
+  const svg = select(svgEl).attr("width", width).attr("height", CHART_HEIGHT);
+  svg.selectAll("*").remove();
+  crosshairEl = null;
+  const buckets = props.buckets;
+  hitState.buckets = hasData.value ? buckets : [];
+  hitState.bucketMs = props.bucketMs;
+  hitState.plotWidth = plotW;
+  if (!buckets.length || !hasData.value) return;
+  const t0 = buckets[0].t;
+  const t1 = buckets[buckets.length - 1].t + props.bucketMs;
+  const x = scaleTime().domain([new Date(t0), new Date(t1)]).range([0, plotW]);
+  const y = scaleLinear().domain([0, Math.max(1, max(buckets, (b) => b.count) ?? 0)]).nice(4).range([plotH, 0]);
+  hitState.xFor = (t) => x(new Date(t));
+  const g = svg.append("g").attr("transform", `translate(${CHART_MARGIN.left},${CHART_MARGIN.top})`);
+  const yTicks = y.ticks(4).filter(Number.isInteger);
+  g.append("g").attr("class", "observe-grid").selectAll("line").data(yTicks.filter((t) => t > 0)).join("line").attr("x1", 0).attr("x2", plotW).attr("y1", (d) => y(d)).attr("y2", (d) => y(d));
+  g.append("g").attr("transform", `translate(0,${plotH})`).call(axisBottom(x).ticks(Math.max(3, Math.min(8, Math.floor(plotW / 90)))).tickSizeOuter(0));
+  g.append("g").call(axisLeft(y).tickValues(yTicks).tickSize(0).tickPadding(8).tickFormat((d) => formatCount(+d))).call((sel) => sel.select(".domain").remove());
+  const bars = g.append("g");
+  for (const b of buckets) {
+    if (!b.count) continue;
+    const x0 = x(new Date(b.t));
+    const wFull = x(new Date(b.t + props.bucketMs)) - x0;
+    const gap = wFull >= 4 ? 2 : wFull >= 2 ? 1 : 0;
+    const w = Math.max(wFull - gap, Math.min(wFull, 1));
+    const segments = [
+      { v: b.errorCount, color: "var(--ui-error)" },
+      { v: b.warnCount, color: "var(--ui-warning)" },
+      { v: otherOf(b), color: "var(--observe-viz-muted)" }
+    ].filter((s) => s.v > 0);
+    let cursor = plotH;
+    segments.forEach((s, i) => {
+      const h = plotH - y(s.v);
+      const top = cursor - h;
+      if (i === segments.length - 1) {
+        bars.append("path").attr("d", roundedTopRect(x0, top, w, h, 3)).style("fill", s.color);
+      } else {
+        const drawnH = Math.max(h - 1, 0.5);
+        bars.append("rect").attr("x", x0).attr("y", cursor - drawnH).attr("width", w).attr("height", drawnH).style("fill", s.color);
+      }
+      cursor = top;
+    });
+  }
+  crosshairEl = g.append("line").attr("class", "observe-crosshair").attr("y1", 0).attr("y2", plotH).style("display", "none").node();
+}
+function handleHit(bucket, _index, cx) {
+  if (crosshairEl) {
+    crosshairEl.style.display = "";
+    crosshairEl.setAttribute("x1", String(cx));
+    crosshairEl.setAttribute("x2", String(cx));
+  }
+  tooltip?.show(cx, timeLabel.value(bucket.t), [
+    { color: "var(--ui-error)", label: "errors", value: formatCount(bucket.errorCount) },
+    { color: "var(--ui-warning)", label: "warnings", value: formatCount(bucket.warnCount) },
+    { color: "var(--observe-viz-muted)", label: "other", value: formatCount(otherOf(bucket)) },
+    { label: "total", value: formatCount(bucket.count) }
+  ]);
+}
+function handleClear() {
+  if (crosshairEl) crosshairEl.style.display = "none";
+  tooltip?.hide();
+}
+onMounted(async () => {
+  await nextTick();
+  if (host.value) {
+    tooltip = createTooltip(host.value);
+    resizeObserver = new ResizeObserver(() => draw());
+    resizeObserver.observe(host.value);
+  }
+  if (svgRef.value) {
+    interaction = attachBucketInteraction(svgRef.value, hitState, handleHit, handleClear);
+  }
+  draw();
+});
+watch(() => [props.buckets, props.bucketMs], () => {
+  interaction?.clear();
+  draw();
+});
+onBeforeUnmount(() => {
+  interaction?.destroy();
+  tooltip?.destroy();
+  resizeObserver?.disconnect();
+  if (svgRef.value) select(svgRef.value).selectAll("*").remove();
+});
+</script>
+
+<template>
+  <section>
+    <div class="flex items-baseline justify-between gap-4 mb-2">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+        Volume
+      </h2>
+      <div class="flex items-center gap-3 text-xs text-muted">
+        <span class="flex items-center gap-1.5">
+          <span class="size-2 rounded-full bg-error" />Errors
+        </span>
+        <span class="flex items-center gap-1.5">
+          <span class="size-2 rounded-full bg-warning" />Warnings
+        </span>
+        <span class="flex items-center gap-1.5">
+          <span
+            class="size-2 rounded-full"
+            style="background: var(--observe-viz-muted)"
+          />Other
+        </span>
+      </div>
+    </div>
+
+    <UCard :ui="{ body: 'p-2 sm:p-3' }">
+      <div
+        ref="host"
+        class="relative"
+      >
+        <svg
+          v-show="hasData"
+          ref="svgRef"
+          class="observe-chart block w-full transition-opacity"
+          :class="{ 'opacity-60': pending }"
+          tabindex="0"
+          role="img"
+          aria-label="Event volume over time, stacked by level. Use arrow keys to read values per time bucket."
+        />
+        <USkeleton
+          v-if="pending && !hasData"
+          class="h-60 w-full"
+        />
+        <p
+          v-else-if="!hasData"
+          class="h-60 flex items-center justify-center text-sm text-muted"
+        >
+          No events in this window.
+        </p>
+
+        <!-- sr-only on a wrapper div, never on the table: a <caption> belongs to the
+             table wrapper box and escapes the table's own overflow clip in Firefox. -->
+        <div
+          v-if="hasData"
+          class="sr-only"
+        >
+          <table>
+            <caption>Event volume by level per time bucket</caption>
+            <thead>
+              <tr><th>Time</th><th>Errors</th><th>Warnings</th><th>Other</th><th>Total</th></tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="b in tableRows"
+                :key="b.t"
+              >
+                <td>{{ timeLabel(b.t) }}</td>
+                <td>{{ b.errorCount }}</td>
+                <td>{{ b.warnCount }}</td>
+                <td>{{ otherOf(b) }}</td>
+                <td>{{ b.count }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </UCard>
+  </section>
+</template>

package/dist/runtime/app/components/charts/ObserveVolumeChart.client.vue.d.ts

@@ -0,0 +1,16 @@
+import type { StatsBucket } from '../../../shared/schema/stats.js';
+/**
+ * Stacked-bar volume over time, by level: errors (level 0) anchored at the baseline,
+ * warnings above, every other level as a muted remainder, so the stack sums to count.
+ * Level colors are the dashboard's status tokens (error/warning), never categorical
+ * slots. Client-only (d3 touches the DOM); colors ride CSS vars so light/dark needs
+ * no redraw.
+ */
+type __VLS_Props = {
+    buckets: StatsBucket[];
+    bucketMs: number;
+    pending?: boolean;
+};
+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/charts/chart-core.d.ts

@@ -0,0 +1,64 @@
+import type { StatsBucket } from '../../../shared/schema/stats.js';
+/**
+ * Shared internals for the CP8 d3 charts: geometry, formatters, the tooltip DOM,
+ * and the pointer/keyboard bucket-hit wiring. Not a component and not auto-imported;
+ * the chart .client.vue files import it relatively. All colors come from CSS custom
+ * properties (set in main.css / @nuxt/ui), so light/dark swaps without a redraw.
+ */
+export declare const CHART_MARGIN: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const CHART_HEIGHT = 240;
+export declare function formatCount(n: number): string;
+export declare function formatPct(n: number): string;
+/** Tooltip/table time label sized to the bucket: seconds for 15s buckets, date + time past a day-long window. */
+export declare function bucketTimeFormatter(bucketMs: number, windowMs: number): (t: number) => string;
+/** SVG path for a bar with rounded top corners and a square baseline. */
+export declare function roundedTopRect(x: number, y: number, w: number, h: number, r: number): string;
+export interface TooltipRow {
+    label: string;
+    value: string;
+    /** CSS color for the series key stroke; omit for un-keyed rows like totals */
+    color?: string;
+}
+export interface ChartTooltip {
+    /** cx is plot-relative px; the tooltip clamps itself inside the host */
+    show: (cx: number, title: string, rows: TooltipRow[]) => void;
+    hide: () => void;
+    destroy: () => void;
+}
+/**
+ * One absolutely-positioned tooltip per chart, built with textContent only —
+ * series/service names are untrusted data and never go through innerHTML.
+ */
+export declare function createTooltip(host: HTMLElement): ChartTooltip;
+export interface BucketHitState {
+    buckets: StatsBucket[];
+    bucketMs: number;
+    /** current x scale, updated by each draw */
+    xFor: (t: number) => number;
+    plotWidth: number;
+}
+export interface BucketInteraction {
+    destroy: () => void;
+    clear: () => void;
+}
+/**
+ * Pointer + keyboard bucket selection over an svg. The whole plot is the hit target
+ * (the crosshair finds the X); ArrowLeft/Right walk buckets on keyboard focus so the
+ * tooltip is reachable without a pointer. `state` is read live, so redraws only need
+ * to update it, never re-wire listeners.
+ */
+export declare function attachBucketInteraction(svg: SVGSVGElement, state: BucketHitState, onHit: (bucket: StatsBucket, index: number, cx: number) => void, onClear: () => void): BucketInteraction;
+/**
+ * Stable per-entity categorical slot assignment: slug-alphabetical over the visible
+ * set, so a service keeps its hue when the legend's volume order shifts between
+ * periods. 'other' always wears the muted fill, never a categorical slot.
+ */
+export declare function seriesColorMap(ids: Array<{
+    id: string;
+    slug: string;
+}>): Map<string, string>;

package/dist/runtime/app/components/charts/chart-core.js

@@ -0,0 +1,136 @@
+export const CHART_MARGIN = { top: 12, right: 16, bottom: 36, left: 44 };
+export const CHART_HEIGHT = 240;
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+export function formatCount(n) {
+  return compact.format(n);
+}
+export function formatPct(n) {
+  return `${n.toFixed(1)}%`;
+}
+export function bucketTimeFormatter(bucketMs, windowMs) {
+  const opts = windowMs > 864e5 ? { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" } : bucketMs < 6e4 ? { hour: "2-digit", minute: "2-digit", second: "2-digit" } : { hour: "2-digit", minute: "2-digit" };
+  const fmt = new Intl.DateTimeFormat("en", opts);
+  return (t) => fmt.format(new Date(t));
+}
+export function roundedTopRect(x, y, w, h, r) {
+  const radius = Math.max(0, Math.min(r, w / 2, h));
+  return `M${x},${y + h}V${y + radius}Q${x},${y} ${x + radius},${y}H${x + w - radius}Q${x + w},${y} ${x + w},${y + radius}V${y + h}Z`;
+}
+export function createTooltip(host) {
+  const el = document.createElement("div");
+  el.className = "observe-chart-tooltip";
+  el.style.display = "none";
+  host.appendChild(el);
+  return {
+    show(cx, title, rows) {
+      el.textContent = "";
+      const heading = document.createElement("div");
+      heading.className = "observe-chart-tooltip-title";
+      heading.textContent = title;
+      el.appendChild(heading);
+      for (const row of rows) {
+        const line = document.createElement("div");
+        line.className = "observe-chart-tooltip-row";
+        if (row.color) {
+          const key = document.createElement("span");
+          key.className = "observe-chart-tooltip-key";
+          key.style.backgroundColor = row.color;
+          line.appendChild(key);
+        }
+        const value = document.createElement("span");
+        value.className = "observe-chart-tooltip-value";
+        value.textContent = row.value;
+        const label = document.createElement("span");
+        label.className = "observe-chart-tooltip-label";
+        label.textContent = row.label;
+        line.appendChild(value);
+        line.appendChild(label);
+        el.appendChild(line);
+      }
+      el.style.display = "block";
+      const hostW = host.clientWidth;
+      const w = el.offsetWidth;
+      const left = Math.max(4, Math.min(cx + CHART_MARGIN.left + 12, hostW - w - 4));
+      el.style.left = `${left}px`;
+      el.style.top = "8px";
+    },
+    hide() {
+      el.style.display = "none";
+    },
+    destroy() {
+      el.remove();
+    }
+  };
+}
+export function attachBucketInteraction(svg, state, onHit, onClear) {
+  let index = -1;
+  const centerOf = (i) => {
+    const bucket = state.buckets[i];
+    return state.xFor(bucket.t + state.bucketMs / 2);
+  };
+  const hitAt = (i) => {
+    if (i < 0 || i >= state.buckets.length) return;
+    index = i;
+    onHit(state.buckets[i], i, centerOf(i));
+  };
+  const clear = () => {
+    index = -1;
+    onClear();
+  };
+  const onPointerMove = (e) => {
+    if (!state.buckets.length) return;
+    const rect = svg.getBoundingClientRect();
+    const px = e.clientX - rect.left - CHART_MARGIN.left;
+    const first = state.buckets[0].t;
+    const i = Math.round((pxToTime(px) - first - state.bucketMs / 2) / state.bucketMs);
+    hitAt(Math.max(0, Math.min(state.buckets.length - 1, i)));
+  };
+  const pxToTime = (px) => {
+    const first = state.buckets[0].t;
+    const last = state.buckets[state.buckets.length - 1].t + state.bucketMs;
+    return first + px / Math.max(1, state.plotWidth) * (last - first);
+  };
+  const onKeyDown = (e) => {
+    if (!state.buckets.length) return;
+    const lastIndex = state.buckets.length - 1;
+    let next;
+    if (e.key === "ArrowLeft") next = index < 0 ? lastIndex : Math.max(0, index - 1);
+    else if (e.key === "ArrowRight") next = index < 0 ? lastIndex : Math.min(lastIndex, index + 1);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = lastIndex;
+    else if (e.key === "Escape") {
+      clear();
+      return;
+    } else return;
+    e.preventDefault();
+    hitAt(next);
+  };
+  const onFocus = () => {
+    if (state.buckets.length && index < 0) hitAt(state.buckets.length - 1);
+  };
+  svg.addEventListener("pointermove", onPointerMove);
+  svg.addEventListener("pointerleave", clear);
+  svg.addEventListener("keydown", onKeyDown);
+  svg.addEventListener("focus", onFocus);
+  svg.addEventListener("blur", clear);
+  return {
+    clear,
+    destroy() {
+      svg.removeEventListener("pointermove", onPointerMove);
+      svg.removeEventListener("pointerleave", clear);
+      svg.removeEventListener("keydown", onKeyDown);
+      svg.removeEventListener("focus", onFocus);
+      svg.removeEventListener("blur", clear);
+    }
+  };
+}
+export function seriesColorMap(ids) {
+  const map = /* @__PURE__ */ new Map();
+  const real = ids.filter((s) => s.id !== "other");
+  const bySlug = [...real].sort((a, b) => a.slug.localeCompare(b.slug));
+  bySlug.forEach((s, i) => {
+    map.set(s.id, `var(--observe-viz-${i % 8 + 1})`);
+  });
+  map.set("other", "var(--observe-viz-muted)");
+  return map;
+}

package/dist/runtime/app/components/settings/ObserveApiKeyPanel.d.vue.ts

@@ -0,0 +1,8 @@
+/** List + mint/rotate/revoke for one service's ingest keys. Read-only unless canManage. */
+type __VLS_Props = {
+    serviceId: string;
+    canManage: boolean;
+};
+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;