nuxt-observe 0.0.2

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

@@ -0,0 +1,92 @@
+<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: "time", accessorKey: "time", header: "Time", meta: { class: { td: "tabular-nums whitespace-nowrap text-muted" } } },
+  { id: "level", accessorKey: "level", header: "Level" },
+  { id: "service", accessorKey: "app", header: "Service" },
+  { id: "version", accessorKey: "version", header: "Version", meta: { class: { th: "hidden sm:table-cell", td: "hidden sm:table-cell text-muted" } } },
+  { id: "message", accessorKey: "message", header: "Message", meta: { class: { td: "max-w-md" } } },
+  { id: "where", header: "Where", meta: { class: { th: "hidden md:table-cell", td: "hidden md:table-cell text-muted" } } }
+];
+function absTime(ms) {
+  return new Date(ms).toLocaleString();
+}
+function onSelect(_e, row) {
+  return navigateTo(`${prefix}/logs/${row.original.id}`);
+}
+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 logs match these filters."
+      :meta="{ class: { tr: () => 'cursor-pointer' } }"
+      :on-select="onSelect"
+    >
+      <template #time-cell="{ row }">
+        <span :title="absTime(row.original.time)">{{ formatRelative(row.original.time) }}</span>
+      </template>
+
+      <template #level-cell="{ row }">
+        <ObserveLogLevelBadge :level="row.original.level" />
+      </template>
+
+      <template #service-cell="{ row }">
+        <span class="flex items-center gap-2 min-w-0">
+          <span class="font-medium truncate">{{ row.original.app || "\u2014" }}</span>
+          <span
+            v-if="row.original.env"
+            class="text-xs text-muted shrink-0"
+          >{{ row.original.env }}</span>
+        </span>
+      </template>
+
+      <template #version-cell="{ row }">
+        {{ row.original.version ?? "\u2014" }}
+      </template>
+
+      <template #message-cell="{ row }">
+        <span
+          class="block truncate"
+          :title="row.original.message"
+        >
+          <span
+            v-if="row.original.error_name"
+            class="font-medium"
+          >{{ row.original.error_name }}: </span>{{ row.original.message }}
+        </span>
+      </template>
+
+      <template #where-cell="{ row }">
+        <span class="block truncate">{{ row.original.route ?? row.original.feature ?? "\u2014" }}</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 }} events</span>
+      <UPagination
+        v-model:page="pageModel"
+        :total="total"
+        :items-per-page="limit"
+      />
+    </div>
+  </UCard>
+</template>

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

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

package/dist/runtime/app/components/ObservePeriodSelector.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/components/ObservePeriodSelector.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from "vue";
+import { PERIODS, periodToRange } from "../../shared/utils/period";
+import { useObservePeriod } from "../composables/useObservePeriod";
+const { period, setPeriod } = useObservePeriod();
+const items = PERIODS.map((p) => ({ label: periodToRange(p).label, value: p }));
+const selected = computed({
+  get: () => period.value,
+  set: (value) => setPeriod(value)
+});
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selected"
+    :items="items"
+    value-key="value"
+    :search-input="false"
+    icon="i-lucide-clock"
+    class="w-44"
+  />
+</template>

package/dist/runtime/app/components/ObservePeriodSelector.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/components/ObserveRegressionAlert.d.vue.ts

@@ -0,0 +1,12 @@
+import type { RegressionFinding } from '../../shared/schema/rollout.js';
+/**
+ * One severity-coloured alert per detected regression (CP13): names the candidate
+ * version, its error rate, the baseline it regressed against, and the delta. Pure
+ * @nuxt/ui, no d3, so it renders under SSR (unlike the .client charts).
+ */
+type __VLS_Props = {
+    finding: RegressionFinding;
+};
+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/ObserveRegressionAlert.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  finding: { type: Object, required: true }
+});
+const pct = (n) => `${(n * 100).toFixed(1)}%`;
+const color = computed(() => props.finding.severity === "critical" ? "error" : "warning");
+const title = computed(
+  () => `${props.finding.version} error rate ${pct(props.finding.errorRate)} (+${pct(props.finding.delta)})`
+);
+const description = computed(() => {
+  const f = props.finding;
+  const base = f.baselineVersion ? `Baseline ${f.baselineVersion} at ${pct(f.baselineErrorRate)}` : "No prior baseline";
+  const ratio = Number.isFinite(f.ratio) ? `, ${f.ratio.toFixed(1)}x` : "";
+  return `${base}${ratio}. ${f.sampleSize.toLocaleString()} events sampled.`;
+});
+</script>
+
+<template>
+  <UAlert
+    :color="color"
+    variant="subtle"
+    icon="i-lucide-trending-up"
+    :title="title"
+    :description="description"
+  />
+</template>

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

@@ -0,0 +1,12 @@
+import type { RegressionFinding } from '../../shared/schema/rollout.js';
+/**
+ * One severity-coloured alert per detected regression (CP13): names the candidate
+ * version, its error rate, the baseline it regressed against, and the delta. Pure
+ * @nuxt/ui, no d3, so it renders under SSR (unlike the .client charts).
+ */
+type __VLS_Props = {
+    finding: RegressionFinding;
+};
+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/ObserveServiceSwitcher.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/components/ObserveServiceSwitcher.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useUserSession, useState } from "#imports";
+import { useObserveOverview } from "../composables/useObserveOverview";
+import { useObserveScope } from "../composables/useObserveScope";
+const { user } = useUserSession();
+const { data } = useObserveOverview();
+const { scope, setScope } = useObserveScope();
+const seenServices = useState("observe:switcher-services", () => ({}));
+watch(data, (value) => {
+  if (!value) return;
+  for (const s of value.services) {
+    seenServices.value[s.slug] = s.name;
+  }
+}, { immediate: true });
+const ALL = "__all__";
+const items = computed(() => {
+  const assignment = user.value?.assignment;
+  const serviceSlugs = new Set(Object.keys(seenServices.value));
+  for (const slug of assignment?.services ?? []) {
+    if (slug !== "*") serviceSlugs.add(slug);
+  }
+  const groupSlugs = (assignment?.groups ?? []).filter((g) => g !== "*");
+  return [
+    { label: "All services", value: ALL, icon: "i-lucide-layers" },
+    ...groupSlugs.map((g) => ({ label: g, value: `group:${g}`, icon: "i-lucide-folder" })),
+    ...[...serviceSlugs].sort().map((slug) => ({
+      label: seenServices.value[slug] ?? slug,
+      value: slug,
+      icon: "i-lucide-server"
+    }))
+  ];
+});
+const selected = computed({
+  get: () => scope.value ?? ALL,
+  set: (value) => setScope(value === ALL ? null : value)
+});
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selected"
+    :items="items"
+    value-key="value"
+    :search-input="false"
+    icon="i-lucide-telescope"
+    class="w-48"
+  />
+</template>

package/dist/runtime/app/components/ObserveServiceSwitcher.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/components/ObserveServicesTable.d.vue.ts

@@ -0,0 +1,15 @@
+import type { OverviewServiceRollup } from '../../shared/schema/overview.js';
+/**
+ * Per-service rollup for the overview's wide column. Rows lead with a health dot
+ * (errors > warnings > clear), sort worst-first, and click-toggle the page's service
+ * scope, so the table doubles as a filter. Aggregate counts live in the section
+ * header here, not in stat cards.
+ */
+type __VLS_Props = {
+    services: OverviewServiceRollup[];
+    activeServices?: number;
+    activeVersions?: number;
+};
+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/ObserveServicesTable.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from "vue";
+import { formatRelative } from "../../shared/utils/format-relative";
+import { useObserveScope } from "../composables/useObserveScope";
+const props = defineProps({
+  services: { type: Array, required: true },
+  activeServices: { type: Number, required: false },
+  activeVersions: { type: Number, required: false }
+});
+const { serviceSlug, setScope } = useObserveScope();
+const sorted = computed(
+  () => [...props.services].sort(
+    (a, b) => b.errorCount - a.errorCount || b.warnCount - a.warnCount || b.lastSeen - a.lastSeen
+  )
+);
+const headerCounts = computed(() => {
+  const parts = [];
+  if (props.activeServices) parts.push(`${props.activeServices} active`);
+  if (props.activeVersions) parts.push(`${props.activeVersions} ${props.activeVersions === 1 ? "version" : "versions"}`);
+  return parts.join(" \xB7 ");
+});
+const numericHead = "text-right";
+const numericCell = "text-right tabular-nums";
+const columns = [
+  { id: "service", accessorKey: "name", header: "Service" },
+  { id: "events", accessorKey: "totalEvents", header: "Events", meta: { class: { th: numericHead, td: numericCell } } },
+  { id: "errors", accessorKey: "errorCount", header: "Errors", meta: { class: { th: numericHead, td: numericCell } } },
+  { id: "errorRate", accessorKey: "errorRate", header: "Error rate", meta: { class: { th: numericHead, td: `${numericCell} text-muted` } } },
+  {
+    id: "versions",
+    header: "Versions",
+    meta: { class: { th: `${numericHead} hidden sm:table-cell`, td: "text-right text-muted hidden sm:table-cell" } }
+  },
+  { id: "lastSeen", accessorKey: "lastSeen", header: "Last seen", meta: { class: { th: numericHead, td: `${numericCell} text-muted whitespace-nowrap` } } }
+];
+function healthClass(svc) {
+  if (svc.errorCount > 0) return "bg-error";
+  if (svc.warnCount > 0) return "bg-warning";
+  return "bg-success";
+}
+function rowClass(row) {
+  return serviceSlug.value === row.original.slug ? "bg-elevated/60" : "";
+}
+function onSelect(_e, row) {
+  const slug = row.original.slug;
+  setScope(serviceSlug.value === slug ? null : slug);
+}
+</script>
+
+<template>
+  <section>
+    <div class="flex items-baseline justify-between mb-2">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+        Services
+      </h2>
+      <span
+        v-if="headerCounts"
+        class="text-xs text-muted"
+      >{{ headerCounts }}</span>
+    </div>
+
+    <UCard :ui="{ body: 'p-0 sm:p-0' }">
+      <UTable
+        :data="sorted"
+        :columns="columns"
+        empty="No services with events in this window."
+        :meta="{ class: { tr: rowClass } }"
+        :on-select="onSelect"
+      >
+        <template #service-cell="{ row }">
+          <span
+            class="flex items-center gap-2 min-w-0"
+            :title="serviceSlug === row.original.slug ? 'Click to clear the filter' : `Filter the page to ${row.original.name}`"
+          >
+            <span
+              class="size-2 rounded-full shrink-0"
+              :class="healthClass(row.original)"
+            />
+            <span class="font-medium truncate">{{ row.original.name }}</span>
+            <span
+              v-if="row.original.env"
+              class="text-xs text-muted shrink-0"
+            >{{ row.original.env }}</span>
+          </span>
+        </template>
+
+        <template #errors-cell="{ row }">
+          <span :class="row.original.errorCount > 0 ? 'text-error font-medium' : 'text-muted'">
+            {{ row.original.errorCount }}
+          </span>
+        </template>
+
+        <template #errorRate-cell="{ row }">
+          {{ (row.original.errorRate * 100).toFixed(1) }}%
+        </template>
+
+        <template #versions-cell="{ row }">
+          <span :title="row.original.versions.join(', ')">
+            {{ row.original.versions.length || "n/a" }}
+          </span>
+        </template>
+
+        <template #lastSeen-cell="{ row }">
+          {{ formatRelative(row.original.lastSeen) }}
+        </template>
+      </UTable>
+    </UCard>
+  </section>
+</template>

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

@@ -0,0 +1,15 @@
+import type { OverviewServiceRollup } from '../../shared/schema/overview.js';
+/**
+ * Per-service rollup for the overview's wide column. Rows lead with a health dot
+ * (errors > warnings > clear), sort worst-first, and click-toggle the page's service
+ * scope, so the table doubles as a filter. Aggregate counts live in the section
+ * header here, not in stat cards.
+ */
+type __VLS_Props = {
+    services: OverviewServiceRollup[];
+    activeServices?: number;
+    activeVersions?: number;
+};
+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/ObserveStatCard.d.vue.ts

@@ -0,0 +1,14 @@
+/**
+ * A single stat tile (CP8): label + big value + optional icon/hint. The value keeps
+ * the font's proportional figures - tabular-nums is reserved for columns that must
+ * align vertically, and makes large standalone numbers look loose.
+ */
+type __VLS_Props = {
+    label: string;
+    value: string | number;
+    icon?: string;
+    hint?: 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/ObserveStatCard.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  value: { type: [String, Number], required: true },
+  icon: { type: String, required: false },
+  hint: { type: String, required: false }
+});
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-4 sm:p-4' }">
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0">
+        <p class="text-xs text-muted truncate">
+          {{ label }}
+        </p>
+        <p class="mt-1 text-2xl font-semibold text-highlighted truncate">
+          {{ value }}
+        </p>
+        <p
+          v-if="hint"
+          class="mt-1 text-xs text-muted truncate"
+        >
+          {{ hint }}
+        </p>
+      </div>
+      <UIcon
+        v-if="icon"
+        :name="icon"
+        class="size-5 text-dimmed shrink-0"
+      />
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,14 @@
+/**
+ * A single stat tile (CP8): label + big value + optional icon/hint. The value keeps
+ * the font's proportional figures - tabular-nums is reserved for columns that must
+ * align vertically, and makes large standalone numbers look loose.
+ */
+type __VLS_Props = {
+    label: string;
+    value: string | number;
+    icon?: string;
+    hint?: 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/charts/ObserveErrorRateChart.client.d.vue.ts

@@ -0,0 +1,15 @@
+import type { StatsBucket } from '../../../shared/schema/stats.js';
+/**
+ * Per-bucket error rate as a single 2px line (errorCount / count * 100, 0 for empty
+ * buckets) with a 10% area wash and an end dot carrying the latest value as the one
+ * direct label. Single series, so no legend box - the title names it. Wears the
+ * error status token: this series MEANS bad, so it never takes a categorical slot.
+ */
+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/ObserveErrorRateChart.client.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { select, scaleTime, scaleLinear, axisBottom, axisLeft, line, area, max } from "d3";
+import {
+  CHART_MARGIN,
+  CHART_HEIGHT,
+  formatCount,
+  formatPct,
+  bucketTimeFormatter,
+  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 rateOf = (b) => b.count ? b.errorCount / b.count * 100 : 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 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 maxRate = max(buckets, rateOf) ?? 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 cxOf = (b) => x(new Date(b.t + props.bucketMs / 2));
+  const rateArea = area().x(cxOf).y0(plotH).y1((b) => y(rateOf(b)));
+  g.append("path").datum(buckets).attr("d", rateArea).style("fill", "var(--ui-error)").style("opacity", 0.1);
+  const rateLine = line().x(cxOf).y((b) => y(rateOf(b)));
+  g.append("path").datum(buckets).attr("d", rateLine).style("fill", "none").style("stroke", "var(--ui-error)").style("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+  const last = buckets[buckets.length - 1];
+  const endX = cxOf(last);
+  const endY = y(rateOf(last));
+  g.append("circle").attr("cx", endX).attr("cy", endY).attr("r", 4).style("fill", "var(--ui-error)").style("stroke", "var(--ui-bg)").style("stroke-width", 2);
+  if (rateOf(last) > 0) {
+    g.append("text").attr("x", Math.min(endX - 8, plotW - 4)).attr("y", Math.max(endY - 8, 10)).attr("text-anchor", "end").text(formatPct(rateOf(last)));
+  }
+  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: "error rate", value: formatPct(rateOf(bucket)) },
+    { label: "errors", value: formatCount(bucket.errorCount) },
+    { label: "events", 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">
+        Error rate
+      </h2>
+    </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. 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>Error rate per time bucket</caption>
+            <thead>
+              <tr><th>Time</th><th>Error rate</th><th>Errors</th><th>Events</th></tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="b in tableRows"
+                :key="b.t"
+              >
+                <td>{{ timeLabel(b.t) }}</td>
+                <td>{{ formatPct(rateOf(b)) }}</td>
+                <td>{{ b.errorCount }}</td>
+                <td>{{ b.count }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </UCard>
+  </section>
+</template>