@vaam-apps/ui 0.1.0

package/src/components/patterns/live-row.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn";
+import { TableRow, type TableRowProps } from "../primitives/table";
+import type { StatusHue } from "../status/status-tokens";
+
+export interface LiveRowProps extends TableRowProps {
+  /** Any value that changes to trigger a wash — pass the row's `@version`, an exact change key immune to clock skew. */
+  washTrigger: string | number;
+  /** The destination state's hue, so the wash tints toward where the row landed. */
+  washHue?: StatusHue;
+}
+
+const WASH_BG_CLASS: Record<StatusHue, string> = {
+  neutral: "bg-state-neutral-fg/10",
+  success: "bg-state-success-fg/10",
+  warning: "bg-state-warning-fg/10",
+  danger: "bg-state-danger-fg/10",
+  uncertain: "bg-state-uncertain-fg/10",
+  expired: "bg-state-expired-fg/10",
+  parked: "bg-state-parked-fg/10",
+};
+
+/**
+ * The row-level half of the design doc's `LiveTable`/`LiveRow` contract
+ * (§5.3, §6.5 rule 4): "in-place status change never moves a row" — this
+ * wraps `TableRow` with the 240ms wash-then-decay on a status change,
+ * nothing else moves or resizes. The full `LiveTable` (scroll-position-
+ * dependent buffered insertion, the sticky "N new" pill, sort-mode
+ * switching) is a later, screen-level task — this is the reusable unit it
+ * will be built on, shipped now so the wash behaviour isn't retrofitted
+ * per-screen later.
+ *
+ * Reduced motion (§3.8 rule 3): the wash becomes a static hold instead of
+ * a timed decay — the signal must survive, only the animation may not.
+ */
+export function LiveRow({
+  washTrigger,
+  washHue = "neutral",
+  className,
+  children,
+  ...props
+}: LiveRowProps) {
+  const [washing, setWashing] = useState(false);
+  const previousTrigger = useRef(washTrigger);
+  const reducedMotion =
+    typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  useEffect(() => {
+    if (previousTrigger.current === washTrigger) return;
+    previousTrigger.current = washTrigger;
+    setWashing(true);
+    const holdMs = reducedMotion ? 1200 : 400 + 240 + 600;
+    const timeout = setTimeout(() => setWashing(false), holdMs);
+    return () => clearTimeout(timeout);
+  }, [washTrigger, reducedMotion]);
+
+  return (
+    <TableRow
+      className={cn(
+        washing && [
+          WASH_BG_CLASS[washHue],
+          reducedMotion
+            ? "transition-none"
+            : "transition-colors duration-[var(--dur-state)] ease-out",
+        ],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TableRow>
+  );
+}

package/src/components/patterns/payload-inspector.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "../../lib/cn";
+// D18: `Tabs` was rebuilt as `ValueTabs` (Headless UI `TabGroup` behind a
+// value-based adapter) — aliased on import so nothing below this line
+// changes; see tabs.tsx's own module doc for the full mechanism.
+import {
+  ValueTabs as Tabs,
+  ValueTabsContent as TabsContent,
+  ValueTabsList as TabsList,
+  ValueTabsTrigger as TabsTrigger,
+} from "../primitives/tabs";
+
+export interface PayloadExchange {
+  direction: "request" | "response" | "callback";
+  method?: string;
+  url?: string;
+  status?: number;
+  durationMs?: number;
+  headers?: Record<string, string>;
+  body?: string;
+  error?: string;
+}
+
+export interface PayloadInspectorProps {
+  exchanges: PayloadExchange[];
+  defaultOpen?: number;
+  /** Bodies over this size collapse behind an explicit "load full payload" action. */
+  maxInlineBytes?: number;
+}
+
+function StatusChip({ status }: { status?: number | undefined }) {
+  if (status == null) return null;
+  const ok = status < 400;
+  return (
+    <span
+      className={cn(
+        "rounded-sm border px-1.5 py-0.5 font-mono text-caption",
+        ok
+          ? "border-edge text-muted-foreground"
+          : "border-state-danger-border text-state-danger-fg",
+      )}
+    >
+      {status}
+    </span>
+  );
+}
+
+function ExchangeBody({
+  exchange,
+  maxInlineBytes,
+}: {
+  exchange: PayloadExchange;
+  maxInlineBytes: number;
+}) {
+  const [forceLoad, setForceLoad] = useState(false);
+  const body = exchange.body ?? "";
+  const oversized = !forceLoad && body.length > maxInlineBytes;
+
+  return (
+    <Tabs defaultValue="body">
+      <TabsList>
+        <TabsTrigger value="body">Body</TabsTrigger>
+        <TabsTrigger value="headers">Headers</TabsTrigger>
+        {exchange.error != null && <TabsTrigger value="error">Error</TabsTrigger>}
+      </TabsList>
+      <TabsContent value="body">
+        {body.length === 0 ? (
+          <p className="py-3 text-caption text-subtle-foreground">No response body was recorded.</p>
+        ) : oversized ? (
+          <button
+            type="button"
+            onClick={() => setForceLoad(true)}
+            className="py-3 text-caption text-foreground underline"
+          >
+            Load full payload ({(body.length / 1024).toFixed(1)} KB)
+          </button>
+        ) : (
+          <pre className="max-h-96 overflow-auto rounded-sm bg-base-100 p-3 font-mono text-[12px] text-foreground">
+            {body}
+          </pre>
+        )}
+      </TabsContent>
+      <TabsContent value="headers">
+        {exchange.headers == null || Object.keys(exchange.headers).length === 0 ? (
+          <p className="py-3 text-caption text-subtle-foreground">No headers recorded.</p>
+        ) : (
+          <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 py-2 font-mono text-[12px]">
+            {Object.entries(exchange.headers).map(([key, value]) => (
+              <div key={key} className="contents">
+                <dt className="text-subtle-foreground">{key}</dt>
+                <dd className="break-all text-foreground">{value}</dd>
+              </div>
+            ))}
+          </dl>
+        )}
+      </TabsContent>
+      {exchange.error != null && (
+        <TabsContent value="error">
+          <pre className="max-h-96 overflow-auto rounded-sm border border-state-danger-border bg-state-danger-bg p-3 font-mono text-[12px] text-state-danger-fg">
+            {exchange.error}
+          </pre>
+        </TabsContent>
+      )}
+    </Tabs>
+  );
+}
+
+/**
+ * Raw provider request/response and DLR bodies, verbatim (design doc §5.3).
+ * No syntax-highlighting palette on purpose (§1.3): a rainbow JSON block
+ * would be the loudest thing on a diagnostic screen. Uses native
+ * `<details>` for the accordion behaviour — free keyboard/ARIA semantics,
+ * no extra Radix dependency needed for a plain expand/collapse.
+ */
+export function PayloadInspector({
+  exchanges,
+  defaultOpen = 0,
+  maxInlineBytes = 262144,
+}: PayloadInspectorProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {exchanges.map((exchange, i) => (
+        <details
+          // biome-ignore lint/suspicious/noArrayIndexKey: exchanges are a fixed, ordered, append-only log
+          key={i}
+          open={i === defaultOpen}
+          className="rounded-sm border border-edge bg-surface-2"
+        >
+          <summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-body">
+            <span className="font-mono text-micro text-muted-foreground">{exchange.direction}</span>
+            {exchange.method != null && (
+              <span className="font-mono text-caption text-foreground">{exchange.method}</span>
+            )}
+            {exchange.url != null && (
+              <span className="truncate font-mono text-caption text-subtle-foreground">
+                {exchange.url}
+              </span>
+            )}
+            <span className="ml-auto flex items-center gap-2">
+              <StatusChip status={exchange.status} />
+              {exchange.durationMs != null && (
+                <span className="font-mono text-caption text-subtle-foreground">
+                  {exchange.durationMs}ms
+                </span>
+              )}
+            </span>
+          </summary>
+          <div className="border-edge border-t px-3 pb-3">
+            <ExchangeBody exchange={exchange} maxInlineBytes={maxInlineBytes} />
+          </div>
+        </details>
+      ))}
+    </div>
+  );
+}

package/src/components/patterns/route-skeleton.tsx

@@ -0,0 +1,77 @@
+import { Skeleton } from "../primitives/skeleton";
+import { ScreenStack } from "./screen-layout";
+
+// #308's own mitigation half — a real, visible fallback for the
+// `<Suspense>` boundary every screen that reads `useSearchParams()`/
+// `useQueryStates()` (`nuqs`) must wrap itself in (Next.js requires this;
+// see AGENTS.md's own R6-adjacent note on `page.tsx` shells). The eight
+// screens that still need that boundary — `messages`, `webhooks`, `jobs`,
+// `workers`, `opt-outs`, `apps`, `users`, `audit-log` — used to pass
+// `fallback={null}`, which is exactly the shape #308 diagnosed: a
+// `<Suspense>` boundary is a real, load-bearing part of Next's streaming
+// SSR pipeline, and its reveal (the swap from the fallback to the real
+// tree) is `requestAnimationFrame`-gated by both React's own inline
+// completion script (`$RC` schedules `$RV` via rAF) and the hydration
+// retry that follows it. A backgrounded/non-composited tab — proven live
+// against this exact build, see the PR/issue thread — never runs that rAF
+// callback, so `fallback={null}` rendered as a permanently empty `<main>`
+// with zero signal that anything was ever wrong. This is NOT a fix for
+// that mechanism (nothing in application code can make a browser paint a
+// hidden tab), it only makes the wait visible instead of indistinguishable
+// from broken. Ordinary, foregrounded browser tabs reveal the real
+// boundary within one frame regardless, mitigation or not.
+//
+// One reusable component rather than nine bespoke skeletons — every
+// affected screen needs the same shape (a title bar, an optional filter
+// row, several table-row-shaped blocks), and `Skeleton` itself already
+// forbids shimmer (design doc §3.8/§5.2, see that primitive's own doc)
+// so there is no per-screen animation timing to keep in sync anyway. Per
+// R6, this lives in `@vaam-apps/ui`, not duplicated per route.
+
+export interface RouteSkeletonProps {
+  /** How many table-row-shaped blocks to render. Doesn't need to match the
+   * real screen's row height exactly (`Skeleton`'s own doc asks for that
+   * only where a skeleton stands in for an already-mounted, known-shape
+   * table) — this fallback exists for a `<main>` that hasn't rendered
+   * *anything* app-specific yet, not a loading row inside a mounted
+   * table. */
+  rows?: number;
+  /** Whether to render a filter-bar-shaped skeleton row above the table
+   * rows — most of the eight screens this serves have one (a search box,
+   * a couple of selects); a couple don't. */
+  withFilterBar?: boolean;
+}
+
+export function RouteSkeleton({ rows = 6, withFilterBar = true }: RouteSkeletonProps) {
+  return (
+    <ScreenStack>
+      {/* Not `ScreenHeader` here: its `title`/`description` slots render
+       * inside `<h1>`/`<p>`, and `<p>` cannot contain a block-level
+       * element like `Skeleton`'s own `<div>` — the browser's HTML parser
+       * gives `<p>` an implied end tag the instant it meets one (no such
+       * rule applies to `<h1>`), silently splitting `<p><div/></p>` into
+       * two siblings and reparenting the div outside the paragraph. That
+       * is a real, reproduced-live hydration-mismatch shape, not a
+       * hypothetical — found by rendering this exact component before
+       * this comment was written. A plain header block, skeleton bars as
+       * direct children, sidesteps it entirely. */}
+      <div className="flex flex-col gap-1">
+        <Skeleton className="h-7 w-48" />
+        <Skeleton className="h-4 w-80" />
+      </div>
+      {withFilterBar && (
+        <div className="flex flex-wrap items-center gap-2">
+          <Skeleton className="h-9 w-64" />
+          <Skeleton className="h-9 w-32" />
+          <Skeleton className="h-9 w-32" />
+        </div>
+      )}
+      <div className="flex flex-col gap-2">
+        {Array.from({ length: rows }, (_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: static placeholder rows, a fixed count, never reordered/removed individually.
+          <Skeleton key={i} className="h-11 w-full" />
+        ))}
+      </div>
+    </ScreenStack>
+  );
+}

package/src/components/patterns/screen-layout.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+// R6 (AGENTS.md): every route screen was hand-rolling the identical
+// `<div className="flex flex-col gap-6">` wrapper plus a
+// `<h1 className="font-medium text-foreground text-title">`/description
+// `<header>` pair — confirmed by grep, ten of eleven screens under
+// `frontends/apps/admin/app/*/*.tsx` had this exact pair before this file
+// existed. R6's own test ("if a second route would plausibly use it, it
+// belongs in `frontends/packages/ui`") is not a close call here. Extracted
+// verbatim from `jobs-screen.tsx`/`workers-screen.tsx`/`opt-outs-screen.tsx`
+// — same classes, not a redesign.
+//
+// New file, added while several route groups were being moved onto R6 in
+// parallel — expect another agent's PR to add an equivalent. If both land,
+// reconcile onto one of the two rather than keeping both: same shape,
+// different name is worse than either alone.
+
+export interface ScreenStackProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/** The page-level vertical rhythm every screen composes its sections into. */
+export function ScreenStack({ children, className }: ScreenStackProps) {
+  return <div className={cn("flex flex-col gap-6", className)}>{children}</div>;
+}
+
+export interface ScreenHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+}
+
+/** A screen's own `<h1>` + one-line description, styled once. */
+export function ScreenHeader({ title, description }: ScreenHeaderProps) {
+  return (
+    <header className="flex flex-col gap-1">
+      <h1 className="font-medium text-foreground text-title">{title}</h1>
+      {description != null && (
+        <p className="max-w-xl text-body text-muted-foreground">{description}</p>
+      )}
+    </header>
+  );
+}

package/src/components/patterns/stale-write-banner.tsx

@@ -0,0 +1,44 @@
+import { Button } from "../primitives/button";
+import { InlineBanner } from "./inline-banner";
+
+/**
+ * "Someone else changed this row since it loaded" — the banner for a
+ * `412 Precondition Failed` save.
+ *
+ * Shared rather than route-local because the thing it reports is not
+ * route-local: #59 gave `@version` to ten operator-editable models and
+ * threaded ETag/`If-Match` through the generated REST layer, so *every*
+ * edit screen in the console can lose this race. `apps/` and `users/` each
+ * hand-rolled it; the rest will need it as their edit screens land.
+ *
+ * The two hand-rolled copies differed in exactly one way — one hardcoded
+ * its sentence, the other took a `message` prop. The prop version is
+ * strictly more general, so it wins, with the hardcoded sentence as the
+ * default so the common case stays a one-line call.
+ *
+ * `warning`, not `danger`: nothing was lost and nothing is broken. The
+ * write was *refused* precisely so the other operator's edit survives —
+ * which is the mechanism working, not failing. Reloading resolves it.
+ * `packages/gateway/src/errors.ts`'s `isStaleWriteError` exists to
+ * distinguish this from a genuine conflict for the same reason.
+ */
+export function StaleWriteBanner({
+  message = "Someone else changed this row since it loaded. Reload to see their edit.",
+  onReload,
+}: {
+  message?: string | undefined;
+  onReload: () => void;
+}) {
+  return (
+    <InlineBanner variant="warning" className="flex items-center justify-between gap-3">
+      <span>{message}</span>
+      {/* `type="button"` is load-bearing, not boilerplate: both call sites
+          render this *inside* a `<form>`, where a button's default type is
+          `submit`. Dropping it would make "Reload" submit the very edit the
+          banner is warning has gone stale. */}
+      <Button type="button" variant="secondary" size="sm" onClick={onReload}>
+        Reload
+      </Button>
+    </InlineBanner>
+  );
+}

package/src/components/patterns/state-timeline.tsx

@@ -0,0 +1,229 @@
+import { Info } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+import { Skeleton } from "../primitives/skeleton";
+import { StateMark } from "../status/state-mark";
+import type { StatusSystem } from "../status/status-tokens";
+import { type PayloadExchange, PayloadInspector } from "./payload-inspector";
+
+export interface StateTransition<S extends string = string> {
+  toState: S;
+  /** ISO 8601 timestamp. */
+  at: string;
+  actor?: string;
+  providerKey?: string;
+  workerNode?: string;
+  attempt?: number;
+  maxAttempts?: number;
+  payload?: PayloadExchange[];
+}
+
+export interface StateTimelineProps<S extends string = string> {
+  transitions: StateTransition<S>[];
+  /** The state machine's presentation table — the same one its
+   * `createStatusPill` is bound to, so a timeline and a pill can never
+   * disagree about what a state looks like. */
+  system: StatusSystem<S>;
+  currentState: S;
+  /** Whether the timeline has stopped. Passed in rather than derived from
+   * `system[currentState].family`: terminality is the server's fact, and
+   * a presentational table is the wrong place to learn it from — see
+   * `status-tokens.ts`'s own warning. */
+  isTerminal: boolean;
+  /**
+   * Any IANA zone name, e.g. `"UTC"`, `"Africa/Douala"`, `"America/New_York"`.
+   * The UTC-offset suffix is derived from the zone and the instant, so it
+   * stays correct across DST and for zones this library has never heard
+   * of. (It used to be a two-value union with the suffix hard-coded as
+   * `"Z"` or `"+01"` — correct only for the two zones that union named.)
+   */
+  timezone?: string;
+  /**
+   * Per-state explanatory notes, rendered beneath the node that entered
+   * that state.
+   *
+   * The point is states that look like bugs to anyone who does not
+   * already know the product decision behind them — "we never learned the
+   * outcome, and deliberately will not retry". Without the note the
+   * operator's next move is to open a SQL client, which is the outcome a
+   * timeline exists to prevent. Supplied by the caller because the
+   * explanation is domain knowledge, not presentation.
+   */
+  annotations?: Partial<Record<S, string>> | undefined;
+}
+
+/**
+ * `2026-09-11 14:03:07 +01` — sortable, unambiguous, and carrying its own
+ * offset so a screenshot pasted into a ticket is still interpretable.
+ *
+ * The offset is read out of `Intl`'s own `shortOffset` part rather than
+ * assumed from the zone name: it is the only way to be right across DST
+ * and across zones this component has never been told about. `UTC` keeps
+ * its conventional `Z` rather than the `GMT` that `shortOffset` yields.
+ */
+function formatAbsolute(iso: string, timezone: string): string {
+  const date = new Date(iso);
+  const formatter = new Intl.DateTimeFormat("en-CA", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23",
+    timeZoneName: "shortOffset",
+  });
+  const parts = formatter.formatToParts(date);
+  const stamp = parts
+    .filter((part) => part.type !== "timeZoneName" && part.type !== "literal")
+    .reduce<string[]>((acc, part) => {
+      acc.push(part.value);
+      return acc;
+    }, []);
+  const [year, month, day, hour, minute, second] = stamp;
+  // "GMT+1" / "GMT-05:00" / "GMT" → "+01" / "-05:00" / "Z".
+  const raw = parts.find((part) => part.type === "timeZoneName")?.value ?? "";
+  const offset = raw === "GMT" ? "Z" : raw.replace(/^GMT/, "").replace(/^([+-])(\d)$/, "$10$2");
+  return `${year}-${month}-${day} ${hour}:${minute}:${second} ${offset}`;
+}
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `+${ms}ms`;
+  if (ms < 60_000) return `+${(ms / 1000).toFixed(3)}s`;
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return `+${minutes}m ${String(seconds).padStart(2, "0")}s`;
+  const hours = Math.floor(minutes / 60);
+  return `+${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
+}
+
+function AnnotationNode({ text }: { text: string }) {
+  return (
+    <li className="relative flex gap-3 pb-4 pl-0">
+      <div className="flex w-4 shrink-0 justify-center">
+        <Info size={14} strokeWidth={1.5} className="mt-0.5 text-muted-foreground" />
+      </div>
+      <div className="min-w-0 flex-1 rounded-sm border border-edge bg-surface-2 px-3 py-2 text-caption text-muted-foreground">
+        {text}
+      </div>
+    </li>
+  );
+}
+
+/**
+ * A record's transition history: one node per state entered, with elapsed
+ * time between them, optional per-transition metadata, and an optional
+ * payload inspector.
+ *
+ * Generic over the state machine — pass the same [`StatusSystem`] its
+ * pill is bound to. It used to be hard-wired to one application's message
+ * states, including that application's own explanatory notes and a
+ * two-value timezone union; all three are now the caller's.
+ */
+export function StateTimeline<S extends string>({
+  transitions,
+  system,
+  currentState,
+  isTerminal,
+  timezone = "UTC",
+  annotations,
+}: StateTimelineProps<S>) {
+  if (transitions.length === 0) {
+    return (
+      <ol className="flex flex-col gap-0">
+        {[0, 1, 2].map((i) => (
+          <li key={i} className="flex items-center gap-3 py-2">
+            <Skeleton className="h-4 w-4 rounded-full" />
+            <Skeleton className="h-4 w-40" />
+          </li>
+        ))}
+      </ol>
+    );
+  }
+
+  const rows: ReactNode[] = [];
+
+  transitions.forEach((transition, i) => {
+    const previous = transitions[i - 1];
+    const elapsedMs = previous
+      ? new Date(transition.at).getTime() - new Date(previous.at).getTime()
+      : null;
+    const meta = system[transition.toState];
+    const isLast = i === transitions.length - 1;
+
+    rows.push(
+      <li
+        key={`${transition.toState}-${transition.at}`}
+        className="relative flex gap-3 pb-6 last:pb-0"
+      >
+        <div className="flex w-4 shrink-0 flex-col items-center">
+          <StateMark meta={meta} size={16} className="text-foreground" />
+          {!isLast && <span className="mt-1 w-px flex-1 bg-[var(--state-mark-rail,var(--edge))]" />}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline justify-between gap-2">
+            <p className="font-medium text-body text-foreground">
+              {meta.label}{" "}
+              <span className="font-mono text-subtle-foreground">{transition.toState}</span>
+            </p>
+            <div className="shrink-0 text-right">
+              <p className="font-mono text-caption text-foreground">
+                {formatAbsolute(transition.at, timezone)}
+              </p>
+              {elapsedMs != null && (
+                <p className="font-mono text-caption text-subtle-foreground">
+                  {formatElapsed(elapsedMs)}
+                </p>
+              )}
+            </div>
+          </div>
+          {(transition.providerKey || transition.workerNode || transition.attempt) != null && (
+            <p className="mt-1 font-mono text-caption text-subtle-foreground">
+              {[
+                transition.providerKey,
+                transition.workerNode,
+                transition.attempt != null
+                  ? `attempt ${transition.attempt}${transition.maxAttempts ? `/${transition.maxAttempts}` : ""}`
+                  : null,
+              ]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+          )}
+          {transition.payload != null && transition.payload.length > 0 && (
+            <div className="mt-2">
+              <PayloadInspector exchanges={transition.payload} defaultOpen={-1} />
+            </div>
+          )}
+        </div>
+      </li>,
+    );
+
+    const annotation = annotations?.[transition.toState];
+    if (annotation != null) {
+      rows.push(<AnnotationNode key={`${transition.toState}-annotation`} text={annotation} />);
+    }
+  });
+
+  // In-flight cap (design doc §5.3): the rail continues past the last node
+  // as a dashed segment ending in the current-state glyph, so "still
+  // moving" is readable without parsing. A terminal timeline instead ends
+  // the last node's own rail segment (no trailing cap at all).
+  if (!isTerminal) {
+    rows.push(
+      <li key="in-flight-cap" className="relative flex gap-3">
+        <div className="flex w-4 shrink-0 justify-center">
+          <span className="h-6 w-px border-edge-strong border-l border-dashed" aria-hidden="true" />
+        </div>
+        <div className="flex items-center gap-2 text-caption text-subtle-foreground">
+          <StateMark meta={system[currentState]} size={12} className="text-muted-foreground" />
+          <span>still moving</span>
+        </div>
+      </li>,
+    );
+  }
+
+  return <ol className={cn("flex flex-col")}>{rows}</ol>;
+}

package/src/components/primitives/badge.tsx

@@ -0,0 +1,40 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+/**
+ * Non-status tags only: app name, provider key, role, environment, sender
+ * ID. Never use `Badge` for a message or job state — that's `StatusPill`'s
+ * job (design doc §5.2); mixing them is how the status language erodes.
+ *
+ * D11: `cva()` replaces the previous `variant === "x" && "..."` conditional
+ * chain, same classes. One deliberate D8 diff, not a byte-identical carry-
+ * over: the previous base string hard-coded `rounded-sm`, which fought
+ * daisyUI's own `.badge` rule (`border-radius: var(--radius-selector)`,
+ * confirmed by reading `daisyui/components/badge.css` directly) at equal
+ * specificity — a redundant override, not a deliberate choice, and for the
+ * wrong tier besides: `--radius-selector` (8px) is this register's
+ * small-control tier, `--radius-sm` now aliases `--radius-field` (12px).
+ * Dropping the override lets daisyUI's own class govern radius, which is
+ * exactly constraint 7 ("DaisyUI does the work") and the correct tier for
+ * a tag-sized control.
+ */
+export const badgeVariants = cva("badge font-mono text-caption", {
+  variants: {
+    variant: {
+      neutral: "badge-neutral",
+      outline: "badge-outline",
+    },
+  },
+  defaultVariants: { variant: "neutral" },
+});
+
+export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}