@nurix/etna 0.18.19 → 0.18.21

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" },
+];

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

@@ -0,0 +1,245 @@
+// skills/design/data/operator-pack/exemplars/entity-detail.tsx
+// personality-invariant: composition anchor, not a look source.
+import { useEffect, useState } from "react";
+import { Button } from "@nurix/components/button";
+import { Badge } from "@nurix/components/badge";
+import { Card, CardContent } from "@nurix/components/card";
+import { Skeleton } from "@nurix/components/skeleton";
+import { EmptyState } from "@nurix/components/empty-state";
+import { Alert, AlertTitle, AlertDescription } from "@nurix/components/alert";
+import { Label } from "@nurix/components/label";
+import { Kbd } from "@nurix/components/kbd";
+import { Input } from "@nurix/components/input";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nurix/components/tabs";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose } from "@nurix/components/sheet";
+import { Table, defineColumn, type ColumnDefinition } from "@nurix/components/table";
+import { Boxes, CircleCheck, CircleX, Pencil, RefreshCw, Rocket, ScrollText, TriangleAlert } from "lucide-react";
+// A deployment-console service: a long-lived entity with many attributes, related instances, and deployment history (entity-detail).
+type ServiceHealth = "healthy" | "degraded" | "down";
+type SaveState = "idle" | "saving" | "saved" | "conflict";
+type LoadStatus = "ready" | "loading" | "error";
+export interface Service {
+  id: string; name: string; slug: string; environment: string; health: ServiceHealth;
+  owner: string; runtime: string; region: string; replicas: number; lastDeployedAt: string;
+}
+export interface Instance { id: string; region: string; version: string; status: string; cpuPercent: number; startedAt: string }
+export interface Deployment { id: string; version: string; actor: string; status: "succeeded" | "failed" | "rolled_back"; at: string }
+export interface ConfigPatch { replicas: number }
+export interface EntityDetailProps {
+  service: Service | null; instances: Instance[]; deployments: Deployment[];
+  status?: LoadStatus; metricsStale?: boolean; errorDetail?: string; saveState?: SaveState;
+  onRetry?: () => void; onDeploy?: () => void; onSaveConfig?: (patch: ConfigPatch) => void;
+}
+const HEALTH_META: Record<ServiceHealth, { label: string; cls: string; Icon: typeof CircleCheck }> = {
+  healthy: { label: "Healthy", cls: "text-success", Icon: CircleCheck },
+  degraded: { label: "Degraded", cls: "text-warning", Icon: TriangleAlert },
+  down: { label: "Down", cls: "text-destructive", Icon: CircleX },
+};
+const DEPLOY_LABEL: Record<Deployment["status"], string> = { succeeded: "Deployed", failed: "Deploy failed", rolled_back: "Rolled back" };
+const INSTANCE_STATUS = [{ value: "running", label: "Running" }, { value: "starting", label: "Starting" }, { value: "unknown", label: "Unknown" }];
+const instanceColumns: ColumnDefinition<Instance>[] = [
+  defineColumn<Instance>({ slug: "id", label: "Instance", type: "text", cell: (r) => <span className="font-mono tabular-nums">{r.id}</span> }),
+  defineColumn<Instance>({ slug: "region", label: "Region", type: "text" }),
+  defineColumn<Instance>({ slug: "version", label: "Version", type: "text", cell: (r) => <span className="font-mono">{r.version}</span> }),
+  defineColumn<Instance>({ slug: "status", label: "Status", type: "enum", component: "status", metadata: { options: INSTANCE_STATUS } }),
+  defineColumn<Instance>({ slug: "cpuPercent", label: "CPU", type: "number", metadata: { suffix: "%" } }),
+  defineColumn<Instance>({ slug: "startedAt", label: "Started", type: "date", metadata: { relativeFormat: true } }),
+];
+// Loading shell mirrors the header identity and tab bar, never a centered spinner.
+function DetailSkeleton() {
+  return (
+    <div className="min-h-[100dvh] bg-background p-6">
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-10 w-10 rounded-md" />
+        <div className="flex flex-col gap-2"><Skeleton className="h-5 w-48" /><Skeleton className="h-4 w-32" /></div>
+      </div>
+      <div className="mt-6 flex gap-2"><Skeleton className="h-8 w-24" /><Skeleton className="h-8 w-24" /><Skeleton className="h-8 w-24" /></div>
+      <div className="mt-6"><Skeleton className="h-40 w-full" /></div>
+    </div>
+  );
+}
+// Entity load failure states what happened, why, and the recovery path. Never a dead end.
+function DetailError({ detail, onRetry }: { detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="flex min-h-[100dvh] items-center justify-center bg-background p-6">
+      <Alert variant="destructive" className="max-w-md">
+        <CircleX className="h-4 w-4" />
+        <AlertTitle>Could not load this service</AlertTitle>
+        <AlertDescription>{detail ?? "The deployment API did not respond."} Retry the request, or open the platform status page if it keeps failing.</AlertDescription>
+        <div className="mt-3"><Button size="sm" onClick={onRetry}><RefreshCw className="h-4 w-4" /> Retry</Button></div>
+      </Alert>
+    </div>
+  );
+}
+// Config edit opens beside the work; the save path narrates saving, saved, and the concurrent-edit conflict.
+function EditConfigSheet({ service, open, onOpenChange, saveState, onSave }: {
+  service: Service; open: boolean; onOpenChange: (v: boolean) => void; saveState: SaveState; onSave?: (patch: ConfigPatch) => void;
+}) {
+  const [replicas, setReplicas] = useState(String(service.replicas));
+  const [replicaError, setReplicaError] = useState<string | null>(null);
+  const saving = saveState === "saving";
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right">
+        <SheetHeader>
+          <SheetTitle>Edit configuration</SheetTitle>
+          <SheetDescription>Changes apply on the next deploy of {service.slug}.</SheetDescription>
+        </SheetHeader>
+        <SheetBody className="flex flex-col gap-4">
+          {saveState === "conflict" && (
+            <Alert variant="destructive">
+              <TriangleAlert className="h-4 w-4" />
+              <AlertTitle>Configuration changed elsewhere</AlertTitle>
+              <AlertDescription>Another operator saved this service while you were editing. Reload to see their values before saving yours.</AlertDescription>
+            </Alert>
+          )}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="replicas">Desired replicas</Label>
+            <Input id="replicas" inputMode="numeric" value={replicas} aria-invalid={!!replicaError} onChange={(e) => setReplicas(e.target.value)}
+              onBlur={() => { const n = Number(replicas); setReplicaError(!Number.isInteger(n) || n < 1 ? "Enter a whole number of one or more." : null); }} />
+            {replicaError && <p className="text-sm text-destructive">{replicaError}</p>}
+          </div>
+          <p role="status" aria-live="polite" className="min-h-4 text-sm text-muted-foreground">
+            {saveState === "saving" && "Saving configuration…"}
+            {saveState === "saved" && "Configuration saved."}
+          </p>
+        </SheetBody>
+        <SheetFooter>
+          <SheetClose asChild><Button variant="secondary" size="sm">Cancel</Button></SheetClose>
+          <Button size="sm" disabled={saving || !!replicaError} onClick={() => onSave?.({ replicas: Number(replicas) })}>
+            {saving && <RefreshCw className="h-4 w-4" />} Save changes
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+// Service entity-detail: identity header, tabbed overview / instances / activity, edit in a side panel.
+export function EntityDetail(props: EntityDetailProps) {
+  const { service, instances, deployments, status = "ready", metricsStale = false, errorDetail, saveState = "idle", onRetry, onDeploy, onSaveConfig } = props;
+  const [tab, setTab] = useState("overview");
+  const [editOpen, setEditOpen] = useState(false);
+  // Keyboard parity for the Edit affordance: press E to open the config panel.
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      const el = e.target as HTMLElement | null;
+      if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) return;
+      if (e.key === "e" && !editOpen) { e.preventDefault(); setEditOpen(true); }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [editOpen]);
+  if (status === "loading") return <DetailSkeleton />;
+  if (status === "error" || !service) return <DetailError detail={errorDetail} onRetry={onRetry} />;
+  const health = HEALTH_META[service.health];
+  const attributes: { label: string; value: string; mono?: boolean; num?: boolean }[] = [
+    { label: "Environment", value: service.environment }, { label: "Runtime", value: service.runtime, mono: true },
+    { label: "Region", value: service.region, mono: true }, { label: "Owner", value: service.owner },
+    { label: "Desired replicas", value: String(service.replicas), num: true }, { label: "Last deployed", value: new Date(service.lastDeployedAt).toLocaleString(), num: true },
+  ];
+  return (
+    <div className="min-h-[100dvh] bg-background text-foreground">
+      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border p-6">
+        <div className="flex items-start gap-3">
+          <span className="grid h-10 w-10 place-items-center rounded-md bg-muted text-muted-foreground"><Boxes className="h-5 w-5" /></span>
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-xl font-medium">{service.name}</h1>
+              <Badge variant="outline" className={`gap-1 ${health.cls}`}><health.Icon className="h-3.5 w-3.5" /> {health.label}</Badge>
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">{service.slug} · {service.environment}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary" size="sm" onClick={() => setEditOpen(true)}><Pencil className="h-4 w-4" /> Edit config <Kbd className="ml-1">E</Kbd></Button>
+          <Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>
+        </div>
+      </header>
+      <div className="p-6">
+        {metricsStale && (
+          <Alert className="mb-4">
+            <TriangleAlert className="h-4 w-4 text-warning" />
+            <AlertTitle>Live health signals unavailable</AlertTitle>
+            <AlertDescription>The health collector is unreachable, so instance status and the figures below reflect the last cached snapshot and may be stale.</AlertDescription>
+          </Alert>
+        )}
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="instances">Instances</TabsTrigger>
+            <TabsTrigger value="activity">Activity</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview">
+            <section className="mt-4">
+              <h2 className="mb-3 text-sm font-medium">Configuration <span className="text-xs font-normal text-muted-foreground">sample data</span></h2>
+              <Card><CardContent className="p-0">
+                {/* mock: fixture-supplied values, not authoritative production readings */}
+                <dl className="divide-y divide-border">
+                  {attributes.map((a) => (
+                    <div key={a.label} className="flex items-center justify-between gap-4 px-4 py-3 text-sm">
+                      <dt className="text-muted-foreground">{a.label}</dt>
+                      <dd className={`${a.mono ? "font-mono" : ""} ${a.num ? "tabular-nums" : ""}`}>{a.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </CardContent></Card>
+            </section>
+          </TabsContent>
+          <TabsContent value="instances">
+            <div className="mt-4">
+              {instances.length === 0 ? (
+                <EmptyState icon={<Boxes className="h-10 w-10 text-muted-foreground" />} title="No running instances"
+                  description="This service has no instances in this environment yet. Deploy a build to bring the first one online."
+                  action={<Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>} />
+              ) : (
+                <Table data={instances} columns={instanceColumns} tableConfig={{ header: true, density: "compact" }} />
+              )}
+            </div>
+          </TabsContent>
+          <TabsContent value="activity">
+            <div className="mt-4">
+              {deployments.length === 0 ? (
+                <EmptyState icon={<ScrollText className="h-10 w-10 text-muted-foreground" />} title="No deployments recorded"
+                  description="Deployment history for this service appears here once the first build ships." />
+              ) : (
+                <ol className="flex flex-col">
+                  {deployments.map((d) => (
+                    <li key={d.id} className="flex items-center gap-3 border-b border-border py-3 text-sm last:border-0">
+                      {d.status === "succeeded" ? <CircleCheck className="h-4 w-4 text-success" /> : <CircleX className="h-4 w-4 text-destructive" />}
+                      <span className="font-mono">{d.version}</span>
+                      <span className="text-muted-foreground">{DEPLOY_LABEL[d.status]} by {d.actor}</span>
+                      <time className="ml-auto font-mono tabular-nums text-muted-foreground">{new Date(d.at).toLocaleString()}</time>
+                    </li>
+                  ))}
+                </ol>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+      <EditConfigSheet service={service} open={editOpen} onOpenChange={setEditOpen} saveState={saveState} onSave={onSaveConfig} />
+    </div>
+  );
+}
+// exemplar fixture data — seeded, domain-shaped
+export const FIXTURE_SEED = 7314;
+export const service: Service = {
+  id: "svc_0e9c1a7b", name: "checkout-api", slug: "checkout-api", environment: "production", health: "degraded",
+  owner: "payments-platform", runtime: "node20", region: "iad", replicas: 6, lastDeployedAt: "2026-07-03T14:22:00Z",
+};
+export const instances: Instance[] = [
+  { id: "checkout-api-7f4b21", region: "iad", version: "2026.7.3-a19f", status: "running", cpuPercent: 34, startedAt: "2026-07-03T14:23:00Z" },
+  { id: "checkout-api-9c02de", region: "iad", version: "2026.7.3-a19f", status: "running", cpuPercent: 51, startedAt: "2026-07-03T14:23:00Z" },
+  { id: "checkout-api-b73a10", region: "sfo", version: "2026.7.3-a19f", status: "running", cpuPercent: 47, startedAt: "2026-07-03T14:24:00Z" },
+  { id: "checkout-api-1de8ff", region: "sfo", version: "2026.6.28-c4e2-hotfix-billing-migration", status: "starting", cpuPercent: 0, startedAt: "2026-07-04T02:11:00Z" },
+  { id: "checkout-api-0000aa", region: "fra", version: "2026.6.28-c4e2", status: "unknown", cpuPercent: 0, startedAt: "2026-07-02T09:05:00Z" },
+  { id: "checkout-api-55b9c1", region: "fra", version: "2026.7.3-a19f", status: "running", cpuPercent: 62, startedAt: "2026-07-03T14:25:00Z" },
+];
+export const deployments: Deployment[] = [
+  { id: "dep_5a1", version: "2026.7.3-a19f", actor: "m.okonkwo", status: "succeeded", at: "2026-07-03T14:22:00Z" },
+  { id: "dep_4f7", version: "2026.7.1-77b0", actor: "priya.nair", status: "rolled_back", at: "2026-07-01T18:40:00Z" },
+  { id: "dep_4e2", version: "2026.6.28-c4e2", actor: "s.delacroix", status: "failed", at: "2026-06-28T22:05:00Z" },
+  { id: "dep_4b0", version: "2026.6.20-11ad", actor: "m.okonkwo", status: "succeeded", at: "2026-06-20T10:33:00Z" },
+];
+export const emptyInstances: Instance[] = [];
+export const emptyDeployments: Deployment[] = [];