@nurix/etna 0.18.19 → 0.18.20

package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx

@@ -0,0 +1,249 @@
+// skills/design/data/operator-pack/exemplars/create-edit.tsx
+// personality-invariant: composition anchor, not a look source.
+import { useState, type FormEvent, type ReactNode } from "react";
+import { TriangleAlert, CircleCheck, Plus, RotateCcw } from "lucide-react";
+import { Sheet, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription } from "@nurix/components/sheet";
+import { Button } from "@nurix/components/button";
+import { Input } from "@nurix/components/input";
+import { NumberInput } from "@nurix/components/number-input";
+import { Switch } from "@nurix/components/switch";
+import { Checkbox } from "@nurix/components/checkbox";
+import { Label } from "@nurix/components/label";
+import { Badge } from "@nurix/components/badge";
+import { Kbd } from "@nurix/components/kbd";
+import { Skeleton } from "@nurix/components/skeleton";
+import { EmptyState } from "@nurix/components/empty-state";
+import { Alert, AlertTitle, AlertDescription } from "@nurix/components/alert";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@nurix/components/native-select";
+import { RadioGroupSegmented, RadioGroupSegmentedItem } from "@nurix/components/radio-group";
+
+export type RuleSurfaceStatus = "loading" | "empty" | "error" | "degraded" | "ready";
+export type ThresholdDirection = "above" | "below";
+type FormPhase = "form" | "preview" | "success";
+type SubmitStatus = "idle" | "submitting" | "failed";
+type FieldErrors = Partial<Record<keyof AlertRuleDraft, string>>;
+
+export interface NotifyChannel { id: string; label: string; kind: "email" | "webhook" | "pager"; }
+export interface MetricOption { slug: string; label: string; unit: string; }
+export interface SubmitOutcome { ok: boolean; message?: string; }
+
+export interface AlertRuleDraft {
+  name: string; metricSlug: string; direction: ThresholdDirection;
+  threshold: number | null; channelIds: string[]; enabled: boolean;
+}
+
+export interface CreateEditRuleSurfaceProps {
+  mode: "create" | "edit"; status: RuleSurfaceStatus; open: boolean;
+  metrics: MetricOption[]; channels: NotifyChannel[]; metricsCachedAt?: string | null;
+  initial?: Partial<AlertRuleDraft>; onSubmit: (draft: AlertRuleDraft) => Promise<SubmitOutcome>;
+  onCancel: () => void; onAddChannel: () => void; onRetryLoad: () => void;
+}
+
+const BLANK_DRAFT: AlertRuleDraft = { name: "", metricSlug: "", direction: "above", threshold: null, channelIds: [], enabled: true };
+
+// Collect blocking errors for the whole draft; re-run on every render so blur and submit share one source.
+function validate(draft: AlertRuleDraft): FieldErrors {
+  const errors: FieldErrors = {};
+  if (draft.name.trim().length < 3) errors.name = "Name the rule (3 characters or more) so it's findable in the alert list.";
+  if (!draft.metricSlug) errors.metricSlug = "Choose the metric this rule watches.";
+  if (draft.threshold == null) errors.threshold = "Set the threshold value to compare against.";
+  if (draft.channelIds.length === 0) errors.channelIds = "Add at least one channel so alerts have somewhere to go.";
+  return errors;
+}
+
+// Label-over-input wrapper: the visible label, the control, then an inline error (or hint) below.
+function Field({ id, label, hint, error, htmlFor, children }: { id: string; label: string; hint?: string; error?: string; htmlFor?: string; children: ReactNode }) {
+  return (
+    <div className="grid gap-1.5">
+      <Label id={`${id}-label`} htmlFor={htmlFor} className="text-sm font-medium">{label}</Label>
+      {children}
+      {error ? <p id={`${id}-error`} className="text-sm text-destructive">{error}</p> : hint ? <p className="text-sm text-muted-foreground">{hint}</p> : null}
+    </div>
+  );
+}
+// One label/value row inside the preview summary.
+function PreviewRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[8rem_1fr] gap-4">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="text-foreground">{children}</dd>
+    </div>
+  );
+}
+// The create/edit alert-rule surface: a side sheet that opens beside the alert list and returns to it on close.
+export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
+  const { mode, status, open, metrics, channels, metricsCachedAt, onSubmit, onCancel, onAddChannel, onRetryLoad } = props;
+  const [draft, setDraft] = useState<AlertRuleDraft>(() => ({ ...BLANK_DRAFT, ...props.initial }));
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [attempted, setAttempted] = useState(false);
+  const [phase, setPhase] = useState<FormPhase>("form");
+  const [submitStatus, setSubmitStatus] = useState<SubmitStatus>("idle");
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const errors = validate(draft);
+  const metric = metrics.find((m) => m.slug === draft.metricSlug);
+  const selectedChannels = channels.filter((c) => draft.channelIds.includes(c.id));
+  const isForm = status === "ready" || status === "degraded";
+  const busy = submitStatus === "submitting";
+  function patch<K extends keyof AlertRuleDraft>(key: K, value: AlertRuleDraft[K]) { setDraft((d) => ({ ...d, [key]: value })); }
+  function blur(key: keyof AlertRuleDraft) { setTouched((t) => ({ ...t, [key]: true })); }
+  const show = (key: keyof AlertRuleDraft): string | undefined => ((attempted || touched[key]) && errors[key]) || undefined;
+  // Validate the whole draft; a clean draft advances to the preview-then-commit step.
+  function handlePreview(event: FormEvent) {
+    event.preventDefault();
+    setAttempted(true);
+    setSubmitError(null);
+    if (Object.keys(errors).length === 0) setPhase("preview");
+  }
+  // Commit the reviewed draft; failure returns to the form with entries preserved and the reason inline.
+  async function handleConfirm() {
+    setSubmitStatus("submitting");
+    const outcome = await onSubmit(draft);
+    if (outcome.ok) { setSubmitStatus("idle"); setPhase("success"); }
+    else { setSubmitStatus("failed"); setSubmitError(outcome.message ?? "The alerting service rejected the rule."); setPhase("form"); }
+  }
+  function reset() { setDraft({ ...BLANK_DRAFT }); setTouched({}); setAttempted(false); setSubmitStatus("idle"); setSubmitError(null); setPhase("form"); }
+  return (
+    <Sheet open={open} onOpenChange={(next) => { if (!next) onCancel(); }}>
+      <SheetContent side="right" size="lg" data-density-step="looser">
+        <SheetHeader showDivider>
+          <SheetTitle>{mode === "create" ? "New alert rule" : "Edit alert rule"}</SheetTitle>
+          <SheetDescription>Watches one metric and notifies your channels when it crosses a threshold.</SheetDescription>
+        </SheetHeader>
+        <SheetBody>
+          {status === "loading" && (
+            <div className="grid gap-6" aria-hidden="true">
+              {[0, 1, 2, 3].map((i) => <div key={i} className="grid gap-2"><Skeleton className="h-4 w-28" /><Skeleton className="h-9 w-full" /></div>)}
+            </div>
+          )}
+          {status === "error" && (
+            <div className="grid justify-items-center gap-4 py-8 text-center" role="alert">
+              <TriangleAlert className="size-8 text-destructive" />
+              <p className="text-base font-semibold text-foreground">Couldn't load this rule</p>
+              <p className="max-w-sm text-sm text-muted-foreground">The alerting service didn't respond, so its current settings aren't available. Retry, or close and reopen it from the alert list.</p>
+              <Button variant="outline" onClick={onRetryLoad}><RotateCcw className="size-4" /> Retry</Button>
+            </div>
+          )}
+          {status === "empty" && (
+            <EmptyState
+              icon={<Plus className="size-6 text-muted-foreground" />}
+              title="No notification channels yet"
+              description="An alert rule needs somewhere to send alerts. Add a channel, then come back to finish this rule."
+              action={<Button onClick={onAddChannel}><Plus className="size-4" /> Add a channel</Button>}
+            />
+          )}
+          {isForm && phase === "form" && (
+            <form id="rule-form" onSubmit={handlePreview} className="grid gap-6">
+              {status === "degraded" && (
+                <Alert role="status" aria-live="polite">
+                  <TriangleAlert className="size-4" /><AlertTitle>Metric list may be stale</AlertTitle>
+                  <AlertDescription>The metrics service is unreachable, so this is a cached catalog from {metricsCachedAt}. A metric added since then won't appear here yet.</AlertDescription>
+                </Alert>
+              )}
+              {submitStatus === "failed" && submitError && (
+                <Alert variant="destructive" role="alert">
+                  <TriangleAlert className="size-4" /><AlertTitle>Rule not created</AlertTitle>
+                  <AlertDescription>{submitError} Your entries are preserved, adjust and try again.</AlertDescription>
+                </Alert>
+              )}
+              <Field id="name" label="Rule name" htmlFor="name" error={show("name")}>
+                <Input id="name" value={draft.name} placeholder="API error rate over 2 percent" onChange={(e) => patch("name", e.target.value)} onBlur={() => blur("name")} aria-invalid={show("name") ? true : undefined} aria-describedby={show("name") ? "name-error" : undefined} />
+              </Field>
+              <Field id="metric" label="Metric" htmlFor="metric" error={show("metricSlug")}>
+                <Select value={draft.metricSlug} onValueChange={(v) => { patch("metricSlug", v); blur("metricSlug"); }}>
+                  <SelectTrigger id="metric" aria-invalid={show("metricSlug") ? true : undefined}><SelectValue placeholder="Choose a metric to watch" /></SelectTrigger>
+                  <SelectContent>{metrics.map((m) => <SelectItem key={m.slug} value={m.slug}>{m.label}</SelectItem>)}</SelectContent>
+                </Select>
+              </Field>
+              <div className="grid grid-cols-2 gap-4">
+                <Field id="direction" label="Condition">
+                  <RadioGroupSegmented value={draft.direction} aria-labelledby="direction-label" onValueChange={(v) => patch("direction", v as ThresholdDirection)}>
+                    <RadioGroupSegmentedItem value="above">Above</RadioGroupSegmentedItem>
+                    <RadioGroupSegmentedItem value="below">Below</RadioGroupSegmentedItem>
+                  </RadioGroupSegmented>
+                </Field>
+                <Field id="threshold" label={`Threshold${metric ? ` (${metric.unit})` : ""}`} htmlFor="threshold" error={show("threshold")}>
+                  <NumberInput id="threshold" className="tabular-nums" value={draft.threshold} step={0.5} allowDecimals onSave={(v) => patch("threshold", v)} onBlur={() => blur("threshold")} aria-invalid={show("threshold") ? true : undefined} aria-describedby={show("threshold") ? "threshold-error" : undefined} />
+                </Field>
+              </div>
+              <Field id="channels" label="Notify channels" error={show("channelIds")}>
+                <div className="grid gap-2" role="group" aria-labelledby="channels-label">
+                  {channels.map((c) => (
+                    <Label key={c.id} className="flex items-center gap-3 text-sm font-normal">
+                      <Checkbox checked={draft.channelIds.includes(c.id)} onCheckedChange={(v) => { patch("channelIds", v ? [...draft.channelIds, c.id] : draft.channelIds.filter((id) => id !== c.id)); blur("channelIds"); }} />
+                      <span className="text-foreground">{c.label}</span>
+                      <Badge variant="outline" className="ml-auto">{c.kind}</Badge>
+                    </Label>
+                  ))}
+                </div>
+              </Field>
+              <Field id="enabled" label="Enable on save">
+                <div className="flex items-center gap-3">
+                  <Switch checked={draft.enabled} aria-labelledby="enabled-label" onCheckedChange={(v) => patch("enabled", v)} />
+                  <span className="text-sm text-muted-foreground">{draft.enabled ? "Starts evaluating as soon as it's created." : "Saved paused, enable it later from the alert list."}</span>
+                </div>
+              </Field>
+            </form>
+          )}
+          {isForm && phase === "preview" && (
+            <div className="grid gap-4">
+              <p className="text-base font-semibold text-foreground">Review before creating</p>
+              <dl className="grid gap-3 text-sm">
+                <PreviewRow label="Rule"><span className="font-medium text-foreground">{draft.name}</span></PreviewRow>
+                <PreviewRow label="Condition">{metric?.label} goes {draft.direction} <span className="font-mono tabular-nums">{draft.threshold}</span> {metric?.unit}</PreviewRow>
+                <PreviewRow label="Channels">{selectedChannels.map((c) => c.label).join(", ")}</PreviewRow>
+                <PreviewRow label="State">{draft.enabled ? "Enabled on create" : "Created paused"}</PreviewRow>
+              </dl>
+              <p className="text-sm text-muted-foreground">A rule that pages is hard to unsend, so confirm the scope before creating.</p>
+            </div>
+          )}
+          {isForm && phase === "success" && (
+            <div className="grid justify-items-center gap-4 py-8 text-center" role="status" aria-live="polite">
+              <CircleCheck className="size-8 text-success" />
+              <p className="text-base font-semibold text-foreground">Alert rule created</p>
+              <p className="max-w-sm text-sm text-muted-foreground">{draft.name} is {draft.enabled ? "live and evaluating now" : "saved and paused"}. It notifies <span className="tabular-nums">{selectedChannels.length}</span> channel{selectedChannels.length === 1 ? "" : "s"} when it fires.</p>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" onClick={onCancel}>View rule</Button>
+                <Button onClick={reset}>Create another rule</Button>
+              </div>
+            </div>
+          )}
+        </SheetBody>
+        {isForm && phase !== "success" && (
+          <SheetFooter showDivider>
+            <div className="flex w-full items-center justify-between gap-4">
+              <p className="text-sm text-muted-foreground" role="status" aria-live="polite">
+                {busy ? "Creating rule" : phase === "form" ? <>Press <Kbd size="sm">Enter</Kbd> to review before creating.</> : "Nothing is created until you confirm."}
+              </p>
+              <div className="flex items-center gap-2">
+                {phase === "form" ? (
+                  <>
+                    <Button type="button" variant="ghost" onClick={onCancel}>Cancel</Button>
+                    <Button type="submit" form="rule-form" size="lg">{mode === "create" ? "Create rule" : "Save changes"}</Button>
+                  </>
+                ) : (
+                  <>
+                    <Button type="button" variant="ghost" onClick={() => setPhase("form")} disabled={busy}>Back to edit</Button>
+                    <Button type="button" size="lg" onClick={handleConfirm} disabled={busy}>{busy ? "Creating rule" : "Confirm and create"}</Button>
+                  </>
+                )}
+              </div>
+            </div>
+          </SheetFooter>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// exemplar fixture data — seeded, domain-shaped
+export const metricCatalog: MetricOption[] = [
+  { slug: "api_error_rate", label: "API error rate", unit: "%" },
+  { slug: "p95_latency", label: "p95 response time", unit: "ms" },
+  { slug: "queue_depth", label: "Ingest queue depth", unit: "jobs" },
+];
+
+export const notifyChannels: NotifyChannel[] = [
+  { id: "ch_oncall_primary", label: "On-call primary", kind: "pager" },
+  { id: "ch_platform_alerts", label: "#platform-alerts", kind: "webhook" },
+  { id: "ch_sre_mailing", label: "sre-team mailing list", kind: "email" },
+];

package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx

@@ -0,0 +1,248 @@
+// skills/design/data/operator-pack/exemplars/dashboard.tsx — personality-invariant: composition anchor, not a look source.
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  Activity, ArrowDown, ArrowUp, ArrowUpRight, ChevronsUpDown, CircleAlert,
+  Clock, Database, Plug, RefreshCw, TriangleAlert,
+} from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@nurix/components/alert";
+import { Badge } from "@nurix/components/badge";
+import { Button } from "@nurix/components/button";
+import { EmptyState } from "@nurix/components/empty-state";
+import { Skeleton } from "@nurix/components/skeleton";
+import {
+  Statistics, StatisticsActions, StatisticsCaption, StatisticsDescription, StatisticsFooter,
+  StatisticsHeader, StatisticsHeading, StatisticsIcon, StatisticsLegend, StatisticsLegendItem,
+  StatisticsLink, StatisticsMetric, StatisticsSegmentedBar, StatisticsSparkline, StatisticsTitle,
+  StatisticsTrend, StatisticsUnit, StatisticsValue, type StatisticsSegment,
+} from "@nurix/components/statistics";
+
+type SurfaceStatus = "loading" | "ready" | "empty" | "error";
+type SortKey = "records" | "errorRate";
+type SortDir = "asc" | "desc";
+type Health = "healthy" | "elevated" | "failing";
+interface KpiDatum { key: string; label: string; value: string; unit?: string; trend: number; invertTrend?: boolean; spark: number[]; chart: string; stale?: boolean }
+interface ConnectorRow { id: string; name: string; kind: string; records: number; errorRate: number; health: Health }
+export interface OperationsDashboardProps {
+  status?: SurfaceStatus; degraded?: boolean; kpis?: KpiDatum[]; connectors?: ConnectorRow[];
+  lastUpdated?: string; onRefresh?: () => void; onRetry?: () => void; onConnectSource?: () => void;
+}
+const TIMEFRAMES = [{ key: "24h", label: "24h" }, { key: "7d", label: "7d" }, { key: "30d", label: "30d" }] as const;
+const HEALTH: Record<Health, { label: string; className: string; icon: ReactNode }> = {
+  healthy: { label: "Healthy", className: "text-success", icon: <Activity className="size-4" aria-hidden /> },
+  elevated: { label: "Elevated", className: "text-warning", icon: <TriangleAlert className="size-4" aria-hidden /> },
+  failing: { label: "Failing", className: "text-destructive", icon: <CircleAlert className="size-4" aria-hidden /> },
+};
+// Signed percentage for a KPI trend chip.
+const formatPct = (n: number) => `${n > 0 ? "+" : ""}${n.toFixed(1)}%`;
+// KPI stat card: headline value, trend, and a per-metric sparkline; the degraded metric shows a cached marker instead.
+function KpiCard({ kpi }: { kpi: KpiDatum }) {
+  return (
+    <Statistics variant="card" size="md" className="gap-3">
+      <StatisticsHeader>
+        <StatisticsHeading><StatisticsTitle size="sm">{kpi.label}</StatisticsTitle></StatisticsHeading>
+        <StatisticsActions>{kpi.stale
+          ? <Badge variant="outline" className="gap-1 text-warning"><Clock className="size-3" aria-hidden /> Cached</Badge>
+          : <StatisticsIcon variant="primary" tone="soft" size="sm"><Activity className="size-4" aria-hidden /></StatisticsIcon>}</StatisticsActions>
+      </StatisticsHeader>
+      <StatisticsMetric>
+        <StatisticsValue className="tabular-nums">{kpi.value}{/* mock */}</StatisticsValue>
+        {kpi.unit ? <StatisticsUnit>{kpi.unit}</StatisticsUnit> : null}
+        {kpi.trend !== 0 ? <StatisticsTrend value={kpi.trend} invert={kpi.invertTrend} pill format={formatPct} /> : null}
+      </StatisticsMetric>
+      <StatisticsFooter>
+        {kpi.stale
+          ? <StatisticsCaption className="text-warning">Last cached at 14:12</StatisticsCaption>
+          : <StatisticsSparkline data={kpi.spark} color={kpi.chart} height={28} className="w-full" />}
+      </StatisticsFooter>
+    </Statistics>
+  );
+}
+// One sortable, right-aligned numeric column header carrying its aria-sort state and a keyboard-native toggle.
+function SortHeader({ label, sortKey, active, dir, onSort }: { label: string; sortKey: SortKey; active: boolean; dir: SortDir; onSort: (k: SortKey) => void }) {
+  const ariaSort: "none" | "ascending" | "descending" = active ? (dir === "asc" ? "ascending" : "descending") : "none";
+  return (
+    <th scope="col" aria-sort={ariaSort} className="py-2 pr-4 text-right font-medium">
+      <button type="button" onClick={() => onSort(sortKey)} aria-label={`Sort by ${label}`}
+        className="inline-flex items-center gap-1 rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        {label}
+        {active ? (dir === "asc" ? <ArrowUp className="size-3" aria-hidden /> : <ArrowDown className="size-3" aria-hidden />) : <ChevronsUpDown className="size-3" aria-hidden />}
+      </button>
+    </th>
+  );
+}
+// The connectors breakdown: a bounded top-volume table with sortable numeric columns and per-row health.
+function ConnectorsTile({ connectors }: { connectors: ConnectorRow[] }) {
+  const [sortKey, setSortKey] = useState<SortKey>("records");
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
+  const rows = useMemo(() => [...connectors].sort((a, b) => (sortDir === "asc" ? a[sortKey] - b[sortKey] : b[sortKey] - a[sortKey])), [connectors, sortKey, sortDir]);
+  const onSort = (k: SortKey) => k === sortKey ? setSortDir((d) => (d === "asc" ? "desc" : "asc")) : (setSortKey(k), setSortDir("desc"));
+  return (
+    <Statistics variant="outline" className="gap-4">
+      <StatisticsHeader>
+        <StatisticsHeading>
+          <StatisticsTitle size="sm">Connectors by volume</StatisticsTitle>
+          <StatisticsDescription>Top sources in the selected range.</StatisticsDescription>
+        </StatisticsHeading>
+        <StatisticsActions>
+          <StatisticsLink href="/connectors" className="inline-flex items-center gap-1 text-primary">All connectors <ArrowUpRight className="size-4" aria-hidden /></StatisticsLink>
+        </StatisticsActions>
+      </StatisticsHeader>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border text-left text-muted-foreground">
+              <th scope="col" className="py-2 pr-4 font-medium">Connector</th>
+              <SortHeader label="Records" sortKey="records" active={sortKey === "records"} dir={sortDir} onSort={onSort} />
+              <SortHeader label="Error rate" sortKey="errorRate" active={sortKey === "errorRate"} dir={sortDir} onSort={onSort} />
+              <th scope="col" className="py-2 pl-4 font-medium">Health</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((c) => (
+              <tr key={c.id} className="border-b border-border last:border-0">
+                <td className="py-2 pr-4">
+                  <div className="flex items-center gap-2">
+                    <Database className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <span className="truncate font-medium text-foreground">{c.name}</span>
+                    <span className="shrink-0 font-mono text-muted-foreground">{c.kind}</span>
+                  </div>
+                </td>
+                <td className="py-2 pr-4 text-right tabular-nums">{c.records.toLocaleString()}</td>
+                <td className="py-2 pr-4 text-right tabular-nums">{c.errorRate.toFixed(2)}%</td>
+                <td className="py-2 pl-4"><span className={`inline-flex items-center gap-1 ${HEALTH[c.health].className}`}>{HEALTH[c.health].icon}{HEALTH[c.health].label}</span></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Statistics>
+  );
+}
+// Loading skeleton mirroring the real shape: four KPI cards over two breakdown tiles.
+function DashboardSkeleton() {
+  return (
+    <div className="flex flex-col gap-6" aria-hidden>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="flex flex-col gap-3 rounded-lg border border-border p-4">
+            <Skeleton className="h-4 w-24" /><Skeleton className="h-8 w-32" /><Skeleton className="h-7 w-full" />
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        {[0, 1].map((i) => (
+          <div key={i} className="flex flex-col gap-4 rounded-lg border border-border p-4">
+            <Skeleton className="h-4 w-40" /><Skeleton className="h-16 w-full" /><Skeleton className="h-4 w-3/4" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+// Ingestion-operations overview: a read-mostly KPI + breakdown dashboard with every lifecycle state reachable via the status prop.
+export function OperationsDashboard(props: OperationsDashboardProps) {
+  const { status = "ready", degraded = false, lastUpdated = "14:32:08", onRefresh, onRetry, onConnectSource } = props;
+  const kpis = props.kpis ?? DEFAULT_KPIS;
+  const connectors = props.connectors ?? DEFAULT_CONNECTORS;
+  const [timeframe, setTimeframe] = useState<string>("24h");
+  return (
+    <main className="flex min-h-[100dvh] flex-col bg-background text-foreground" data-density-step="looser">
+      <header className="flex flex-col gap-2 border-b border-border px-6 py-4">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <h1 className="text-xl font-medium text-foreground">Ingestion operations</h1>
+            <p className="text-sm text-muted-foreground">Cross-connector health for the data platform.</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2" role="group" aria-label="Time range">
+              {TIMEFRAMES.map((tf) => (
+                <Button key={tf.key} size="sm" variant={tf.key === timeframe ? "secondary" : "ghost"} aria-pressed={tf.key === timeframe} onClick={() => setTimeframe(tf.key)}>{tf.label}</Button>
+              ))}
+            </div>
+            <Button size="sm" variant="secondary" onClick={onRefresh}><RefreshCw className="size-4" aria-hidden /> Refresh</Button>
+          </div>
+        </div>
+        <p role="status" aria-live="polite" className="text-xs text-muted-foreground">{status === "loading" ? "Loading ingestion overview…" : status === "error" ? "Overview failed to load."
+          : <>Updated <span className="font-mono">{lastUpdated}</span>{degraded ? " · latency source stale" : ""}</>}</p>
+      </header>
+      <div className="flex flex-col gap-6 px-6 py-6">
+        {status === "loading" ? <DashboardSkeleton /> : null}
+        {status === "error" ? (
+          <Alert variant="destructive" role="alert">
+            <TriangleAlert className="size-4" aria-hidden />
+            <AlertTitle>Overview failed to load</AlertTitle>
+            <AlertDescription>
+              The metrics service did not answer within the request timeout, usually a transient gateway hiccup. Retry now, or check the metrics service status if it keeps failing.
+              <span className="mt-3 block"><Button size="sm" variant="secondary" onClick={onRetry}><RefreshCw className="size-4" aria-hidden /> Retry</Button></span>
+            </AlertDescription>
+          </Alert>
+        ) : null}
+        {status === "empty" ? (
+          <EmptyState icon={<Plug className="size-6 text-muted-foreground" aria-hidden />} title="No connectors yet"
+            description="Connect a data source to start ingesting records. Throughput, failure rates, and latency appear here once the first batch runs."
+            action={<Button size="sm" onClick={onConnectSource}><Plug className="size-4" aria-hidden /> Connect a source</Button>} />
+        ) : null}
+        {status === "ready" ? (
+          <>
+            {degraded ? (
+              <Alert role="status">
+                <Clock className="size-4" aria-hidden />
+                <AlertTitle>Latency source unreachable</AlertTitle>
+                <AlertDescription>The p95 processing panel is showing the last cached value from 14:12. Every other panel is live.</AlertDescription>
+              </Alert>
+            ) : null}
+            <section className="flex flex-col gap-3" aria-labelledby="kpi-heading">
+              <h2 id="kpi-heading" className="text-sm font-medium text-muted-foreground">Today at a glance</h2>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">{kpis.map((kpi) => <KpiCard key={kpi.key} kpi={kpi} />)}</div>
+            </section>
+            <section className="flex flex-col gap-3" aria-labelledby="breakdown-heading">
+              <h2 id="breakdown-heading" className="text-sm font-medium text-muted-foreground">Breakdowns</h2>
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <Statistics variant="outline" className="gap-4">
+                  <StatisticsHeader>
+                    <StatisticsHeading>
+                      <StatisticsTitle size="sm">Batches by outcome</StatisticsTitle>
+                      <StatisticsDescription>Last 24 hours across all connectors.</StatisticsDescription>
+                    </StatisticsHeading>
+                    <StatisticsActions>
+                      <StatisticsLink href="/batches" className="inline-flex items-center gap-1 text-primary">Open batches <ArrowUpRight className="size-4" aria-hidden /></StatisticsLink>
+                    </StatisticsActions>
+                  </StatisticsHeader>
+                  <StatisticsSegmentedBar segments={OUTCOME_SEGMENTS} />
+                  <StatisticsLegend>
+                    {OUTCOME_SEGMENTS.map((s, i) => (
+                      <StatisticsLegendItem key={i} color={s.color} label={s.label} value={<span className="tabular-nums">{s.value.toLocaleString()}</span>} />
+                    ))}
+                  </StatisticsLegend>
+                </Statistics>
+                <ConnectorsTile connectors={connectors} />
+              </div>
+            </section>
+          </>
+        ) : null}
+      </div>
+    </main>
+  );
+}
+
+// exemplar fixture data — seeded, domain-shaped
+const FIXTURE_SEED = 6820;
+const DEFAULT_KPIS: KpiDatum[] = [
+  { key: "throughput", label: "Records ingested", value: "1,284,930", unit: "today", trend: 6.4, spark: [820, 910, 880, 1020, 1180, 1240, 1284], chart: "var(--chart-1)" },
+  { key: "failures", label: "Batch failure rate", value: "0.42", unit: "%", trend: 1.8, invertTrend: true, spark: [0.3, 0.28, 0.35, 0.31, 0.4, 0.44, 0.42], chart: "var(--chart-5)" },
+  { key: "latency", label: "p95 processing", value: "312", unit: "ms", trend: -4.1, spark: [360, 352, 341, 338, 330, 318, 312], chart: "var(--chart-2)", stale: true },
+  { key: "connectors", label: "Active connectors", value: "18", unit: "of 21", trend: 0, spark: [17, 17, 18, 18, 18, 17, 18], chart: "var(--chart-3)" },
+];
+const OUTCOME_SEGMENTS: StatisticsSegment[] = [
+  { label: "Succeeded", value: 8420, color: "var(--chart-3)" },
+  { label: "Retried", value: 612, color: "var(--chart-4)" },
+  { label: "Failed", value: 148, color: "var(--chart-5)" },
+];
+const DEFAULT_CONNECTORS: ConnectorRow[] = [
+  { id: "cn_stripe_events", name: "Stripe billing events", kind: "webhook", records: 486210, errorRate: 0.08, health: "healthy" },
+  { id: "cn_salesforce_crm", name: "Salesforce CRM accounts and opportunities", kind: "rest", records: 312440, errorRate: 0.31, health: "healthy" },
+  { id: "cn_postgres_orders", name: "Postgres orders replica", kind: "cdc", records: 274900, errorRate: 1.94, health: "elevated" },
+  { id: "cn_segment_web", name: "Segment web analytics", kind: "stream", records: 158030, errorRate: 0.12, health: "healthy" },
+  { id: "cn_zendesk_tickets", name: "Zendesk support tickets", kind: "rest", records: 42110, errorRate: 6.71, health: "failing" },
+  { id: "cn_s3_archive", name: "S3 nightly archive export", kind: "batch", records: 11240, errorRate: 0, health: "healthy" },
+];