feat(ui): cohesive frontend polish — design system + per-screen refinement

Distill the UI into a single, recognizable voice: a precision
instrument for one operator on one machine. Bloomberg-coded chrome,
warm-paper detail surfaces, mono-heavy numerics, with one editorial
serif accent for moments of weight.

Design system
- Three-font stack: Geist Sans (UI), Geist Mono (data), Instrument
  Serif (editorial display). No Inter, no system fonts.
- Two surfaces: dark chrome (--background, --accent, --signal) and
  warm paper detail surfaces (--surface, --surface-ink*).
- Inbox has its own Ticker Tape terminal palette (--tt-*).
- Shared component classes: .eyebrow, .mono, .display, .surface,
  .surface-2, .row-hover, .nav-active, .kbd, .editorial, .hairline.
- --m-* token aliases for the legacy drawer components so test-
  asserted class strings keep resolving to the same hue family.

Drawers (Claim + Remit)
- Editorial display face for totals (paid/adjustment amounts).
- Color-coded money tiles: green-tinted paid card, amber-tinted
  adjustment card when non-zero, muted otherwise.
- Tabs get accent-blue underline + CSS-driven active state.
- Validation banners with proper background opacity + ring-around-
  dot success badge.
- StateHistoryTimeline: dashed border, ring around dots, ↳ prefix
  for remit ids.
- DiagnosesList, PartiesGrid, MatchedRemitCard, CasAdjustmentsPanel:
  refined typography, dashed dividers, italic descriptions, mono
  amounts, font-semibold totals, hover row tints.

Inbox Ticker Tape
- Custom RowCheckbox with sr-only input + amber accent.
- Alternating row striping, hover tints, accent rail with inset
  shadow on selection.
- Refined sparkline with glow at high values.
- BulkBar: bottom-floating bar with amber count chip, larger shadow.
- CandidateBreakdown: animated progress bars with amber gradient.
- InboxHeader: Instrument Serif headline, mono day/date stamp,
  pulsing amber status dot.

Dialogs & search
- NewClaimDialog: editorial title, mono NPI/CPT/amount fields.
- SearchBar: refined input row with mono, footer with pulsing
  loading indicator.
- KeyboardCheatsheet: monogram icon chip, hover row states, refined
  eyebrow header.

Primitives
- StatusBadge / ClaimStateBadge: per-state dot indicators.
- SelectItem: data-[highlighted]:outline tokens for keyboard a11y.
- Table primitives: refined header treatment, hover/focus states.

Tests + build
- 354/354 tests passing across 59 files.
- Vite build clean (53.84 kB CSS / 560.86 kB JS).
- Eyebrow assertions updated to match the consolidated .eyebrow
  class (intact visual contract, abstracted class string).
- Badge variant tokens updated to the polished bg-muted/80 /
  /0.14 opacity scale.

src/components/StatusPill.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export type ConnectionStatus =
+  | "live"
+  | "connecting"
+  | "reconnecting"
+  | "closed"
+  | "stalled"
+  | "error";
+
+const STATUS_TONE: Record<
+  ConnectionStatus,
+  { dot: string; ring: string; label: string }
+> = {
+  live: {
+    dot: "bg-[hsl(var(--success))]",
+    ring: "ring-[hsl(var(--success))]/40",
+    label: "Live",
+  },
+  connecting: {
+    dot: "bg-[hsl(var(--signal))]",
+    ring: "ring-[hsl(var(--signal))]/40",
+    label: "Connecting",
+  },
+  reconnecting: {
+    dot: "bg-[hsl(var(--signal))]",
+    ring: "ring-[hsl(var(--signal))]/40",
+    label: "Reconnecting",
+  },
+  closed: {
+    dot: "bg-muted-foreground",
+    ring: "ring-muted-foreground/30",
+    label: "Closed",
+  },
+  stalled: {
+    dot: "bg-destructive",
+    ring: "ring-destructive/40",
+    label: "Stalled",
+  },
+  error: {
+    dot: "bg-destructive",
+    ring: "ring-destructive/40",
+    label: "Error",
+  },
+};
+
+/**
+ * Refined status pill with an animated dot. The dot pulses for any
+ * non-terminal status and stays solid for stable states. Sits inline
+ * with other header chrome and reads as a one-word status, not a
+ * multi-line status panel.
+ */
+export function StatusPill({
+  status,
+  label,
+  className,
+}: {
+  status: ConnectionStatus;
+  label?: string;
+  className?: string;
+}) {
+  const tone = STATUS_TONE[status];
+  const isPulsing =
+    status === "live" ||
+    status === "connecting" ||
+    status === "reconnecting";
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card/60 px-2.5 py-1 mono text-[10.5px] uppercase tracking-[0.14em]",
+        className
+      )}
+    >
+      <span
+        className={cn(
+          "relative inline-flex h-1.5 w-1.5 rounded-full",
+          tone.dot,
+          "ring-4",
+          tone.ring
+        )}
+      >
+        {isPulsing ? (
+          <span
+            className={cn(
+              "absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping",
+              tone.dot
+            )}
+          />
+        ) : null}
+      </span>
+      <span className="text-foreground/80">{label ?? tone.label}</span>
+    </span>
+  );
+}
+
+/**
+ * Re-tick every second so a "Last event: 12s ago" subtitle stays
+ * current without a parent re-render. Mount-once interval.
+ */
+export function useTickingNow(intervalMs = 1000): number {
+  const [now, setNow] = useState<number>(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+  return now;
+}
+
+export function formatAge(seconds: number): string {
+  if (seconds < 0) return "0s";
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m < 60) return s === 0 ? `${m}m` : `${m}m ${s}s`;
+  const h = Math.floor(m / 60);
+  return `${h}h ${m % 60}m`;
+}