feat(frontend): TailStatusPill with reconnect button

2026-06-20 17:07:01 -06:00
parent e56a1eb503
commit f1407dbb1d
2 changed files with 306 additions and 0 deletions
@@ -0,0 +1,122 @@
+// ---------------------------------------------------------------------------
+// Live-tail status pill (sub-project 5, Phase 5 Task 21).
+//
+// Tiny presentational component used in the toolbar of `Claims`,
+// `Remittances`, and `ActivityLog` to surface the connection status of
+// `useTailStream`. Renders the existing `<Badge>` (variants from
+// `src/components/ui/badge.tsx`) plus a "Last event: 12s ago" subtitle
+// that re-ticks every second, plus a "↻ Reconnect" button that only
+// appears when the connection has visibly failed (`stalled` or `error`).
+//
+// Variant mapping (per spec):
+//   live            → success
+//   connecting      → warning
+//   reconnecting    → warning
+//   closed          → destructive
+//   stalled         → destructive
+//   error           → destructive
+// ---------------------------------------------------------------------------
+
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { TailStatus } from "@/hooks/useTailStream";
+
+export interface TailStatusPillProps {
+  status: TailStatus;
+  lastEventAt: Date | null;
+  onReconnect: () => void;
+}
+
+const STATUS_LABEL: Record<TailStatus, string> = {
+  connecting: "Connecting…",
+  live: "Live",
+  reconnecting: "Reconnecting…",
+  closed: "Closed",
+  stalled: "Stalled",
+  error: "Error",
+};
+
+type BadgeVariant = "success" | "warning" | "destructive";
+
+const STATUS_VARIANT: Record<TailStatus, BadgeVariant> = {
+  live: "success",
+  connecting: "warning",
+  reconnecting: "warning",
+  closed: "destructive",
+  stalled: "destructive",
+  error: "destructive",
+};
+
+/**
+ * Render a duration in seconds as a compact human label. We deliberately
+ * keep the units small — under a minute is the common case for a healthy
+ * tail (the stall detector fires at 30s, so anything beyond is a real
+ * outage the user will want to investigate).
+ */
+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`;
+}
+
+export function TailStatusPill({
+  status,
+  lastEventAt,
+  onReconnect,
+}: TailStatusPillProps): React.JSX.Element {
+  // Re-tick every second so the "Last event: 12s ago" subtitle stays
+  // current without the parent having to re-render. We mount the
+  // interval only once per pill instance.
+  const [now, setNow] = useState<number>(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const ageSeconds = lastEventAt
+    ? Math.max(0, Math.floor((now - lastEventAt.getTime()) / 1000))
+    : null;
+
+  const subtitle =
+    ageSeconds === null
+      ? "Last event: never"
+      : `Last event: ${formatAge(ageSeconds)} ago`;
+
+  // Only show the manual reconnect affordance when the connection has
+  // visibly failed. `closed` is reserved for the post-unmount state and
+  // is intentionally not actionable — the component is about to vanish.
+  const showReconnect = status === "stalled" || status === "error";
+
+  return (
+    <div
+      className="inline-flex items-center gap-2"
+      data-testid="tail-status-pill"
+    >
+      <Badge variant={STATUS_VARIANT[status]} aria-label={`tail status: ${status}`}>
+        {STATUS_LABEL[status]}
+      </Badge>
+      <span
+        className="text-xs text-muted-foreground"
+        data-testid="tail-status-pill-subtitle"
+      >
+        {subtitle}
+      </span>
+      {showReconnect && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onReconnect}
+          data-testid="tail-status-pill-reconnect"
+        >
+          ↻ Reconnect
+        </Button>
+      )}
+    </div>
+  );
+}