@nurix/etna 0.19.11 → 0.19.12

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

@@ -1,225 +0,0 @@
-// skills/design/data/operator-pack/exemplars/dashboard.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
-// Surface: brand-forward (delight-allowing)
-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 { BarGraph, type BarGraphData } from "@nurix/components/bar-graph";
-import { LineGraph, type LineGraphData } from "@nurix/components/line-graph";
-import {
-  Statistics, StatisticsActions, StatisticsCaption, StatisticsDescription, StatisticsFooter,
-  StatisticsHeader, StatisticsHeading, StatisticsIcon, StatisticsMetric,
-  StatisticsSparkline, StatisticsTitle, StatisticsTrend, StatisticsUnit, StatisticsValue,
-} 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 on a raised (elevation.md) panel; the degraded metric shows a cached marker instead.
-function KpiCard({ kpi }: { kpi: KpiDatum }) {
-  return (
-    <Statistics variant="card" size="md" className="gap-3 bg-surface-raised shadow-md">
-      <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>
-  );
-}
-// The focal hero: the one display-step metric this surface exists to answer, on an elevation.lg raised panel with an optional wash tint, its trend read through the chart tokens.
-function ThroughputHero({ total, trend }: { total: string; trend: LineGraphData }) {
-  return (
-    <section aria-labelledby="hero-heading" className="flex flex-col gap-4 rounded-xl bg-surface-raised p-6 shadow-lg lg:flex-row lg:items-center lg:justify-between" style={{ backgroundImage: "var(--wash-surface, transparent)" }}>
-      <div className="flex flex-col gap-1">
-        <h2 id="hero-heading" className="text-small font-medium text-muted-foreground">Records ingested today</h2>
-        <div className="flex items-baseline gap-3"><span className="text-display tabular-nums text-foreground">{total}{/* mock */}</span><span className="inline-flex items-center gap-1 text-success"><ArrowUp className="size-4" aria-hidden /><span className="tabular-nums">6.4%</span></span></div>
-        <p className="text-body text-muted-foreground">Across every connector, versus the same window yesterday.</p>
-      </div>
-      <div className="min-w-0 lg:w-1/2"><LineGraph data={trend} height="sm" filled colors={["var(--chart-1)", "var(--chart-2)"]} /></div>
-    </section>
-  );
-}
-// 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 on a raised (elevation.md) panel, sortable numeric columns, 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 bg-surface-raised shadow-md">
-      <StatisticsHeader>
-        <StatisticsHeading><StatisticsTitle size="sm">Connectors by volume</StatisticsTitle><StatisticsDescription>Top sources in the selected range.</StatisticsDescription></StatisticsHeading>
-      </StatisticsHeader>
-      <div className="overflow-x-auto">
-        <table className="w-full text-small">
-          <thead>
-            <tr className="border-b border-border text-left text-caption 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="whitespace-nowrap py-2 pl-2 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-2"><span className={`inline-flex items-center gap-1 whitespace-nowrap ${HEALTH[c.health].className}`}>{HEALTH[c.health].icon}{HEALTH[c.health].label}</span></td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </Statistics>
-  );
-}
-// The ingest-health strip: per-day request outcome, its status roles wired through the BarGraph map; the graph and tally fill the card.
-function HealthStripTile({ days }: { days: BarGraphData[] }) {
-  const tally = days.reduce((acc, d) => { const s = d.bar[0]?.status ?? "empty"; acc[s] = (acc[s] ?? 0) + 1; return acc; }, {} as Record<string, number>);
-  return (
-    <Statistics variant="outline" className="gap-4 bg-surface-raised shadow-md">
-      <StatisticsHeader>
-        <StatisticsHeading><StatisticsTitle size="sm">Ingest health</StatisticsTitle><StatisticsDescription>Daily request outcome over the last twelve days.</StatisticsDescription></StatisticsHeading>
-        <StatisticsActions><a href="/incidents" className="inline-flex items-center gap-1 text-caption text-primary">Incidents <ArrowUpRight className="size-4" aria-hidden /></a></StatisticsActions>
-      </StatisticsHeader>
-      <div className="flex-1"><BarGraph data={days} height="lg" roundedCorners="all" colors={{ success: "var(--success)", degraded: "var(--warning)", error: "var(--destructive)", info: "var(--primary)", empty: "var(--muted-foreground)" }} /></div>
-      <StatisticsFooter>
-        <StatisticsCaption className="flex flex-wrap items-center gap-3 tabular-nums">
-          <span className="text-success">{tally.success ?? 0} healthy</span><span className="text-warning">{tally.degraded ?? 0} degraded</span><span className="text-destructive">{tally.error ?? 0} errored</span><span>across {days.length} days</span>
-        </StatisticsCaption>
-      </StatisticsFooter>
-    </Statistics>
-  );
-}
-// Loading skeleton mirroring the real shape: a hero band, four KPI cards, then two breakdown tiles.
-function DashboardSkeleton() {
-  return (
-    <div className="flex flex-col gap-6" aria-hidden>
-      <Skeleton className="h-28 w-full rounded-xl" />
-      <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 hero + 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 font-sans 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-h1 text-foreground">Ingestion operations</h1>
-            <p className="text-small 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-caption 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}
-            <ThroughputHero total="1,284,930" trend={THROUGHPUT_TREND} />
-            <section className="flex flex-col gap-3" aria-labelledby="kpi-heading">
-              <h2 id="kpi-heading" className="text-small font-medium text-muted-foreground">Today at a glance</h2>
-              <div className="motion-stagger 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-small font-medium text-muted-foreground">Breakdowns</h2>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2"><HealthStripTile days={INGEST_HEALTH} /><ConnectorsTile connectors={connectors} /></div>
-            </section>
-          </>
-        ) : null}
-      </div>
-    </main>
-  );
-}
-
-// exemplar fixture data — seeded, domain-shaped
-export 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 THROUGHPUT_TREND: LineGraphData = {
-  labels: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
-  series: [{ name: "Ingested", values: [820, 910, 880, 1020, 1180, 1240, 1284] }, { name: "Queued", values: [140, 120, 210, 90, 160, 130, 118] }],
-};
-const INGEST_HEALTH: BarGraphData[] = ["Jun 23", "Jun 24", "Jun 25", "Jun 26", "Jun 27", "Jun 28", "Jun 29", "Jun 30", "Jul 01", "Jul 02", "Jul 03", "Jul 04"].map((day, i) => {
-  const status = i === 6 ? "error" : i === 3 || i === 9 ? "degraded" : "success";
-  const value = status === "success" ? "100.0% healthy" : status === "degraded" ? "97.4% degraded" : "91.2% errored";
-  return { day, bar: [{ status, height: 100 }], card: [{ status, value }], events: [] };
-});
-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

@@ -1,249 +0,0 @@
-// skills/design/data/operator-pack/exemplars/entity-detail.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
-// Surface: brand-forward (delight-allowing)
-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 { ArrowRight, 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 ActivityEvent { id: string; at: string; actor: string; summary: string; ref: string }
-export interface ServiceMetric { label: string; value: string; unit: string; note: string; tone: string }
-export interface ConfigPatch { replicas: number }
-export interface EntityDetailProps {
-  service: Service | null; instances: Instance[]; deployments: Deployment[]; activity?: ActivityEvent[]; metrics?: ServiceMetric[];
-  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, tab bar, and metrics strip, never a centered spinner.
-function DetailSkeleton() {
-  return (
-    <div className="min-h-[100dvh] bg-background p-6 font-sans">
-      <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 grid grid-cols-2 gap-4 xl:grid-cols-4">{[0, 1, 2, 3].map((i) => <Skeleton key={i} className="h-20 w-full" />)}</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 font-sans">
-      <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 on the overlay ladder; 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" className="bg-surface-overlay shadow-overlay">
-        <SheetHeader>
-          <SheetTitle className="text-h3">Edit configuration</SheetTitle><SheetDescription className="text-small">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-small text-destructive">{replicaError}</p>}
-          </div>
-          <p role="status" aria-live="polite" className="min-h-4 text-small 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: a raised identity header (its brand-forward region), a furnished overview (metrics strip, config, activity preview, instance summary), tabbed related views, 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 metrics = props.metrics ?? SERVICE_METRICS;
-  const activity = props.activity ?? RECENT_ACTIVITY;
-  const [tab, setTab] = useState("overview");
-  const [editOpen, setEditOpen] = useState(false);
-  const byStatus = instances.reduce((acc, i) => { acc[i.status] = (acc[i.status] ?? 0) + 1; return acc; }, {} as Record<string, number>);
-  const regions = [...new Set(instances.map((i) => i.region))];
-  // 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 font-sans text-foreground">
-      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border bg-surface-raised p-6 shadow-sm">
-        <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-h1">{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-small 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">
-            <div className="mt-4 flex flex-col gap-6">
-              <section aria-labelledby="ov-health">
-                <h2 id="ov-health" className="mb-3 text-h3">Service health <span className="text-caption font-normal text-muted-foreground">sample data</span></h2>
-                <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">{/* mock: fixture-supplied readings, not authoritative production statistics */}
-                  {metrics.map((m) => (
-                    <Card key={m.label} className="flex flex-col gap-1 p-4"><span className="text-caption text-muted-foreground">{m.label}</span>
-                      <span className="flex items-baseline gap-1"><span className="text-h2 tabular-nums">{m.value}</span><span className="text-caption text-muted-foreground">{m.unit}</span></span><span className={`text-caption ${m.tone}`}>{m.note}</span>
-                    </Card>
-                  ))}
-                </div>
-              </section>
-              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-                <section aria-labelledby="ov-config">
-                  <h2 id="ov-config" className="mb-3 text-h3">Configuration</h2>
-                  <Card><CardContent className="p-0"><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-small"><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>
-                <div className="flex flex-col gap-6">
-                  <section aria-labelledby="ov-activity">
-                    <div className="mb-3 flex items-center justify-between"><h2 id="ov-activity" className="text-h3">Recent activity</h2><Button variant="ghost" size="sm" onClick={() => setTab("activity")}>All activity <ArrowRight className="h-4 w-4" /></Button></div>
-                    <Card><CardContent className="p-0"><ol className="divide-y divide-border">
-                      {activity.map((ev) => (
-                        <li key={ev.id} className="flex items-baseline gap-3 px-4 py-2 text-small">
-                          <time className="shrink-0 font-mono tabular-nums text-muted-foreground">{ev.at}</time><span className="min-w-0 flex-1 truncate">{ev.summary} <span className="text-muted-foreground">by {ev.actor}</span></span><span className="shrink-0 font-mono text-muted-foreground">{ev.ref}</span>
-                        </li>
-                      ))}
-                    </ol></CardContent></Card>
-                  </section>
-                  <section aria-labelledby="ov-instances">
-                    <div className="mb-3 flex items-center justify-between"><h2 id="ov-instances" className="text-h3">Instances</h2><Button variant="ghost" size="sm" onClick={() => setTab("instances")}>All instances <ArrowRight className="h-4 w-4" /></Button></div>
-                    <Card><CardContent className="flex flex-wrap items-center gap-x-6 gap-y-2 p-4 text-small">
-                      <span className="flex items-center gap-1.5 text-success"><CircleCheck className="h-4 w-4" /><span className="tabular-nums">{byStatus.running ?? 0}</span> running</span><span className="flex items-center gap-1.5 text-warning"><RefreshCw className="h-4 w-4" /><span className="tabular-nums">{byStatus.starting ?? 0}</span> starting</span><span className="flex items-center gap-1.5 text-destructive"><CircleX className="h-4 w-4" /><span className="tabular-nums">{byStatus.unknown ?? 0}</span> unknown</span><span className="text-muted-foreground">across {regions.length} regions (<span className="font-mono">{regions.join(", ")}</span>)</span>
-                    </CardContent></Card>
-                  </section>
-                </div>
-              </div>
-            </div>
-          </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-small 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 RECENT_ACTIVITY: ActivityEvent[] = [
-  { id: "act-91", at: "07-03 14:22", actor: "m.okonkwo", summary: "Deployed 2026.7.3-a19f to production", ref: "dep_5a1" },
-  { id: "act-90", at: "07-03 11:05", actor: "autoscaler", summary: "Scaled replicas 4 to 6 on sustained queue depth", ref: "evt_88c2" },
-  { id: "act-89", at: "07-02 16:48", actor: "s.delacroix", summary: "Config change: LOG_LEVEL info to warn", ref: "cfg_7719" },
-  { id: "act-88", at: "07-02 09:14", actor: "monitor", summary: "Alert fired: p95 latency above 250 ms for 12 minutes", ref: "alr_5520" },
-  { id: "act-87", at: "07-01 18:40", actor: "priya.nair", summary: "Rolled back 2026.7.1-77b0 after elevated 5xx", ref: "dep_4f7" },
-  { id: "act-86", at: "07-01 07:03", actor: "health-collector", summary: "Instance checkout-api-0000aa marked unknown after 3 failed probes", ref: "evt_4411" },
-];
-export const SERVICE_METRICS: ServiceMetric[] = [
-  { label: "Uptime, 30 days", value: "99.92", unit: "%", note: "target 99.90", tone: "text-success" },
-  { label: "Error rate", value: "1.84", unit: "%", note: "elevated last hour", tone: "text-warning" },
-  { label: "Throughput", value: "412", unit: "req/s", note: "peak 590 today", tone: "text-muted-foreground" },
-  { label: "p95 latency", value: "268", unit: "ms", note: "SLO 250 ms", tone: "text-warning" },
-];
-export const emptyInstances: Instance[] = [];
-export const emptyDeployments: Deployment[] = [];