feat: task 2.9 connection status + per-device staleness fade — Phase 2 done

- src/live/last-seen.ts: formatLastSeen(ts, now) — "now" / "Ns ago" /
  "Nm ago" / "HH:MM".
- src/live/use-staleness.ts: useStalenessTick(intervalMs=1000) hook
  re-renders subscribers every interval with the current epoch ms.
- src/ui/components/connection-chip.tsx: <ConnectionChip /> bottom-left,
  three states (connected / connecting+reconnecting / disconnected),
  aria-live polite + role status.
- src/map/layers/map-positions.tsx: every FeatureProps now carries
  staleSec; both symbol layers interpolate icon-opacity (and text-opacity
  on the non-selected layer) on staleSec — 0-60s full opacity,
  5min faded, 30min very faded. Update effect rebuilds features at the
  staleness tick rate (1Hz).
- src/routes/_authed/monitor.tsx: renders <ConnectionChip />.
- src/live/index.ts: re-exports formatLastSeen + useStalenessTick.

Strategy A (faded marker via interpolation) chosen over Strategy B
(separate warning-badge layer) per the task's open-question
resolution; simpler and easier to extend later.

Deviations:
1. stalenessTick is its own hook in src/live/use-staleness.ts rather
   than a property on the position store — keeps the store clean of
   UI-driven re-render concerns; the hook is reusable.
2. <DeviceLastSeen deviceId> standalone component skipped — the SPA
   doesn't have a sidebar yet (Phase 3.4); the per-marker fade IS the
   indicator for v1.

Bundle: main 396KB / 121KB gz — small bump from 2.8.

🎉 Phase 2 — Live monitoring map — complete. All 9 tasks shipped.
End-to-end: login -> /monitor -> event auto-selects -> snapshot
positions render -> live updates flow via WS through the rAF
coalescer -> staleness fades stale markers -> connection chip
surfaces WS state. Dogfood-blocking work for Rally Albania 2026 done.

src/ui/components/connection-chip.tsx

@@ -0,0 +1,55 @@
+import { formatLastSeen, useConnectionStore } from '@/live';
+import { cn } from '@/lib/utils';
+
+/**
+ * Subtle WS-status indicator. Sits bottom-left of the monitor route.
+ *
+ * Three visible states:
+ * - **Connected** — small green dot + muted "Live" label.
+ * - **Connecting / reconnecting** — amber pulsing dot + status word.
+ * - **Disconnected** — red dot + "Offline · last live HH:MM" so the
+ *   operator can see how long the gap has been.
+ *
+ * Designed to be ignorable when everything's fine and unmissable when
+ * it isn't — same posture as the design system's "live" pulse.
+ */
+export function ConnectionChip() {
+  const status = useConnectionStore((s) => s.status);
+  const lastConnectedAt = useConnectionStore((s) => s.lastConnectedAt);
+
+  return (
+    <div
+      className={cn(
+        'absolute bottom-3 left-3 z-10 flex items-center gap-2',
+        'bg-background/90 backdrop-blur-sm border border-border rounded-md px-2.5 py-1.5 shadow-sm',
+        'text-xs',
+      )}
+      aria-live="polite"
+      role="status"
+    >
+      {status === 'connected' && (
+        <>
+          <span className="size-2 rounded-full bg-green-600" aria-hidden />
+          <span className="text-muted-foreground">Live</span>
+        </>
+      )}
+      {(status === 'connecting' || status === 'reconnecting') && (
+        <>
+          <span className="size-2 rounded-full bg-amber-500 animate-pulse" aria-hidden />
+          <span className="text-muted-foreground">
+            {status === 'connecting' ? 'Connecting…' : 'Reconnecting…'}
+          </span>
+        </>
+      )}
+      {status === 'disconnected' && (
+        <>
+          <span className="size-2 rounded-full bg-destructive" aria-hidden />
+          <span className="text-destructive">
+            Offline
+            {lastConnectedAt ? <> · last live {formatLastSeen(lastConnectedAt)}</> : null}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}