@tonyclaw/agent-inspector 3.0.29 → 3.0.31

package/src/components/proxy-viewer/CompareDrawer.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from "react";
-import type { JSX } from "react";
+import type { JSX, KeyboardEvent as ReactKeyboardEvent } from "react";
 import {
   Check,
   ChevronRight,
@@ -46,6 +46,11 @@ type ChangedOp = Extract<DiffOp, { kind: "changed" }>;
 
 type DiffMode = "unified" | "split";
 
+export const COMPARE_RESPONSIVE_HEADER_CLASS_NAME =
+  "flex flex-col gap-3 border-b border-border px-3 py-3 sm:flex-row sm:items-start sm:gap-4 sm:px-4";
+export const COMPARE_RESPONSIVE_SPLIT_CLASS_NAME =
+  "grid min-w-0 grid-cols-1 gap-x-2 gap-y-0.5 px-3 py-2 text-xs md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]";
+
 /** Walk the JsonNode tree and pretty-print it back to a JSON string for the
  *  expanded-equal-subtree view. The node is a plain object structure so
  *  `JSON.stringify` produces correct output. */
@@ -162,23 +167,23 @@ const KIND_VISUAL: Record<
 > = {
   added: {
     icon: Plus,
-    accent: "text-emerald-600 dark:text-emerald-400",
-    bg: "bg-emerald-500/5 hover:bg-emerald-500/10",
-    border: "border-l-emerald-500",
+    accent: "text-status-success",
+    bg: "bg-status-success/5 hover:bg-status-success/10",
+    border: "border-l-status-success",
     label: "ADDED",
   },
   removed: {
     icon: Minus,
-    accent: "text-rose-600 dark:text-rose-400",
-    bg: "bg-rose-500/5 hover:bg-rose-500/10",
-    border: "border-l-rose-500",
+    accent: "text-status-danger",
+    bg: "bg-status-danger/5 hover:bg-status-danger/10",
+    border: "border-l-status-danger",
     label: "REMOVED",
   },
   changed: {
     icon: Pencil,
-    accent: "text-amber-600 dark:text-amber-400",
-    bg: "bg-amber-500/5 hover:bg-amber-500/10",
-    border: "border-l-amber-500",
+    accent: "text-status-watch",
+    bg: "bg-status-watch/5 hover:bg-status-watch/10",
+    border: "border-l-status-watch",
     label: "CHANGED",
   },
   equal: {
@@ -294,19 +299,19 @@ function UnifiedOpRow({
       ? [
           {
             text: previewNode(op.left, 400),
-            tone: "text-rose-700 dark:text-rose-300 line-through",
+            tone: "text-status-danger line-through",
           },
-          { text: previewNode(op.right, 400), tone: "text-emerald-700 dark:text-emerald-300" },
+          { text: previewNode(op.right, 400), tone: "text-status-success" },
         ]
       : op.kind === "removed"
         ? [
             {
               text: previewNode(op.value, 400),
-              tone: "text-rose-700 dark:text-rose-300 line-through",
+              tone: "text-status-danger line-through",
             },
           ]
         : op.kind === "added"
-          ? [{ text: previewNode(op.value, 400), tone: "text-emerald-700 dark:text-emerald-300" }]
+          ? [{ text: previewNode(op.value, 400), tone: "text-status-success" }]
           : [{ text: previewNode(op.value, 400), tone: "text-muted-foreground" }];
 
   const justCopied = copiedPath === op.path && op.path !== "";
@@ -376,7 +381,7 @@ function UnifiedOpRow({
             className={cn(
               "shrink-0 p-1 rounded transition-colors cursor-pointer inline-flex items-center justify-center",
               justCopied
-                ? "text-emerald-500"
+                ? "text-status-success"
                 : "text-muted-foreground/50 hover:text-foreground hover:bg-muted",
             )}
             aria-label={justCopied ? "Copied" : "Copy"}
@@ -427,12 +432,12 @@ function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.E
   }
   return (
     <div className="pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
-      <div className="border border-rose-500/30 rounded p-2 bg-rose-500/5">
-        <div className="text-[10px] uppercase tracking-wider text-rose-500 mb-1">Old</div>
+      <div className="rounded border border-status-danger/30 bg-status-danger/5 p-2">
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-status-danger">Old</div>
         <LazyJsonStringView text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
       </div>
-      <div className="border border-emerald-500/30 rounded p-2 bg-emerald-500/5">
-        <div className="text-[10px] uppercase tracking-wider text-emerald-500 mb-1">New</div>
+      <div className="rounded border border-status-success/30 bg-status-success/5 p-2">
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-status-success">New</div>
         <LazyJsonStringView text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
       </div>
     </div>
@@ -461,7 +466,7 @@ function SummaryChips({
         className={cn(
           "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
           counts.removed > 0
-            ? "border-rose-500/40 text-rose-600 dark:text-rose-400 bg-rose-500/10 hover:bg-rose-500/20"
+            ? "border-status-danger/40 bg-status-danger/10 text-status-danger hover:bg-status-danger/20"
             : "border-border text-muted-foreground/40 cursor-not-allowed",
         )}
         title={counts.removed > 0 ? "Jump to first removed" : "No removals"}
@@ -476,7 +481,7 @@ function SummaryChips({
         className={cn(
           "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
           counts.added > 0
-            ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20"
+            ? "border-status-success/40 bg-status-success/10 text-status-success hover:bg-status-success/20"
             : "border-border text-muted-foreground/40 cursor-not-allowed",
         )}
         title={counts.added > 0 ? "Jump to first added" : "No additions"}
@@ -491,7 +496,7 @@ function SummaryChips({
         className={cn(
           "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
           counts.changed > 0
-            ? "border-amber-500/40 text-amber-600 dark:text-amber-400 bg-amber-500/10 hover:bg-amber-500/20"
+            ? "border-status-watch/40 bg-status-watch/10 text-status-watch hover:bg-status-watch/20"
             : "border-border text-muted-foreground/40 cursor-not-allowed",
         )}
         title={counts.changed > 0 ? "Jump to first changed" : "No changes"}
@@ -563,27 +568,29 @@ function SideSummary({
           className={cn(
             "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
             side === "left"
-              ? "border-rose-500/40 text-rose-400"
-              : "border-emerald-500/40 text-emerald-400",
+              ? "border-status-danger/40 text-status-danger"
+              : "border-status-success/40 text-status-success",
           )}
         >
           {side === "left" ? "← Left" : "Right →"}
         </Badge>
-        <span className="font-mono text-blue-400/80" title={`Log ID ${String(log.id)}`}>
+        <span className="font-mono text-status-info" title={`Log ID ${String(log.id)}`}>
           #{displayNumber}
         </span>
         {log.model !== null && (
-          <span className="font-mono leading-snug text-muted-foreground">{log.model}</span>
+          <span className="min-w-0 truncate font-mono leading-snug text-muted-foreground">
+            {log.model}
+          </span>
         )}
       </div>
-      <div className="flex items-center gap-3 text-muted-foreground font-mono">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 font-mono text-muted-foreground">
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <span className="text-emerald-400">
+          <span className="text-status-success">
             KV Cache +{formatTokens(log.cacheCreationInputTokens)}
           </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="text-purple-400">
+          <span className="text-status-accent">
             KV Cache ~{formatTokens(log.cacheReadInputTokens)}
           </span>
         )}
@@ -605,6 +612,9 @@ export function CompareDrawer({
   rightDisplayNumber,
   onClose,
 }: CompareDrawerProps): JSX.Element {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const previousActiveElementRef = useRef<HTMLElement | null>(null);
   // Memoize the diff so re-renders (e.g. parent re-renders) don't recompute.
   const ops = useMemo<DiffOp[]>(() => {
     const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
@@ -716,8 +726,12 @@ export function CompareDrawer({
     }
   };
 
-  // Esc keybinding + body scroll lock while the drawer is open.
+  // Esc keybinding, initial focus, focus restoration, and body scroll lock while open.
   useEffect(() => {
+    previousActiveElementRef.current =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    closeButtonRef.current?.focus();
+
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
     };
@@ -727,9 +741,36 @@ export function CompareDrawer({
     return () => {
       document.removeEventListener("keydown", onKey);
       document.body.style.overflow = prevOverflow;
+      previousActiveElementRef.current?.focus();
     };
   }, [onClose]);
 
+  const handlePanelKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>): void => {
+    event.stopPropagation();
+    if (event.key !== "Tab") return;
+
+    const panel = panelRef.current;
+    if (panel === null) return;
+    const focusable = Array.from(
+      panel.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    );
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (first === undefined || last === undefined) return;
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+    if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
   const sameSession = getConversationId(left) === getConversationId(right);
   const allEqual = ops.length === 1 && ops[0]?.kind === "equal";
 
@@ -751,22 +792,24 @@ export function CompareDrawer({
 
       {/* Drawer panel */}
       <div
+        ref={panelRef}
         className={cn(
-          "relative bg-background border-l border-border shadow-xl",
+          "relative overflow-x-hidden bg-background border-l border-border shadow-xl",
           "w-full md:w-[70vw] max-w-[1100px] flex flex-col h-full",
         )}
         onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
+        onKeyDown={handlePanelKeyDown}
       >
         {/* Header */}
-        <div className="flex items-start gap-4 px-4 py-3 border-b border-border">
-          <div className="flex-1 flex gap-4 min-w-0">
+        <div className={COMPARE_RESPONSIVE_HEADER_CLASS_NAME}>
+          <div className="grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
             <SideSummary log={left} side="left" displayNumber={leftDisplayNumber} />
             <SideSummary log={right} side="right" displayNumber={rightDisplayNumber} />
           </div>
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-start">
             <ModeToggle mode={mode} onChange={setMode} />
             <button
+              ref={closeButtonRef}
               type="button"
               onClick={onClose}
               aria-label="Close"
@@ -778,7 +821,7 @@ export function CompareDrawer({
         </div>
 
         {!sameSession && (
-          <div className="px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border">
+          <div className="border-b border-border bg-warning/10 px-4 py-1.5 text-xs text-foreground">
             Heads up: the two selected logs are from different sessions.
           </div>
         )}
@@ -835,7 +878,7 @@ export function CompareDrawer({
   );
 }
 
-/** Legacy 3-column (path | left | right) view, retained as a toggle option. */
+/** Three-column on wide screens and a bounded stacked comparison on narrow screens. */
 function SplitBody({
   grouped,
   left,
@@ -850,9 +893,9 @@ function SplitBody({
   rightDisplayNumber: number;
 }): JSX.Element {
   return (
-    <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs">
+    <div data-compare-layout="responsive-split" className={COMPARE_RESPONSIVE_SPLIT_CLASS_NAME}>
       {/* Column headers */}
-      <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground">
+      <div className="col-span-1 mb-2 grid grid-cols-1 gap-x-2 gap-y-1 border-b border-border pb-2 text-[10px] uppercase tracking-wider text-muted-foreground md:col-span-3 md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]">
         <span>Path</span>
         <span title={`Log ID ${String(left.id)}`}>Left (Log #{leftDisplayNumber})</span>
         <span title={`Log ID ${String(right.id)}`}>Right (Log #{rightDisplayNumber})</span>
@@ -864,7 +907,7 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 px-2 py-1 text-xs text-muted-foreground/60"
+              className="col-span-1 px-2 py-1 text-xs text-muted-foreground/60 md:col-span-3"
             >
               {g.ops.length} equal siblings collapsed — switch to Unified to expand
             </div>
@@ -876,7 +919,7 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground"
+              className="col-span-1 grid min-w-0 grid-cols-1 gap-x-2 gap-y-1 px-2 py-0.5 text-muted-foreground md:col-span-3 md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]"
             >
               <span className="font-mono text-xs truncate" title={op.path}>
                 {op.path}
@@ -895,10 +938,10 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-emerald-400/70 bg-emerald-500/5"
+              className="col-span-1 rounded border-l-2 border-l-status-success bg-status-success/5 px-2 py-1 text-xs md:col-span-3"
             >
               <div className="font-mono text-xs text-muted-foreground mb-0.5">{op.path}</div>
-              <div className="font-mono break-all text-emerald-300/90">
+              <div className="font-mono break-all text-status-success">
                 + {previewNode(op.value, 400)}
               </div>
             </div>
@@ -909,10 +952,10 @@ function SplitBody({
             <div
               // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
               key={i}
-              className="col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-rose-400/70 bg-rose-500/5"
+              className="col-span-1 rounded border-l-2 border-l-status-danger bg-status-danger/5 px-2 py-1 text-xs md:col-span-3"
             >
               <div className="font-mono text-xs text-muted-foreground mb-0.5">{op.path}</div>
-              <div className="font-mono break-all text-rose-300/90 line-through">
+              <div className="font-mono break-all text-status-danger line-through">
                 − {previewNode(op.value, 400)}
               </div>
             </div>
@@ -922,14 +965,14 @@ function SplitBody({
           <div
             // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
             key={i}
-            className="col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5"
+            className="col-span-1 rounded border-l-2 border-l-status-watch bg-status-watch/5 px-2 py-1 text-xs md:col-span-3"
           >
             <div className="font-mono text-xs text-muted-foreground mb-1">{op.path}</div>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="font-mono text-rose-300/90 break-all line-through">
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <div className="font-mono break-all text-status-danger line-through">
                 {previewNode(op.left, 400)}
               </div>
-              <div className="font-mono text-emerald-300/90 break-all">
+              <div className="font-mono break-all text-status-success">
                 {previewNode(op.right, 400)}
               </div>
             </div>

package/src/components/proxy-viewer/LiveConnectionStatus.tsx

@@ -0,0 +1,186 @@
+import { type JSX } from "react";
+import { CircleStop, RefreshCw } from "lucide-react";
+import { cn } from "../../lib/utils";
+import type { LiveConnectionPhase, LiveConnectionState } from "./liveConnectionState";
+
+type ConnectionPresentation = {
+  label: string;
+  description: string;
+  toneClass: string;
+  dotClass: string;
+  canRetry: boolean;
+  canStop: boolean;
+};
+
+function formatLastSuccess(lastSuccessAt: number | null): string | null {
+  if (lastSuccessAt === null) return null;
+  return new Date(lastSuccessAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function buildDescription(state: LiveConnectionState, message: string, hasLogs: boolean): string {
+  const lastSuccess = formatLastSuccess(state.lastSuccessAt);
+  const retry = state.retryCount > 0 ? ` Retry ${state.retryCount.toString()}.` : "";
+  const retained = hasLogs ? " Captured logs remain visible." : "";
+  const lastUpdate = lastSuccess === null ? "" : ` Last update ${lastSuccess}.`;
+  return `${message}${lastUpdate}${retry}${retained}`;
+}
+
+function presentationForStatus(
+  status: LiveConnectionPhase,
+  state: LiveConnectionState,
+  hasLogs: boolean,
+): ConnectionPresentation {
+  switch (status) {
+    case "connecting":
+      return {
+        label: "Connecting",
+        description: buildDescription(state, "Waiting for the first live update.", hasLogs),
+        toneClass: "border-cyan-400/20 bg-cyan-500/8 text-cyan-100",
+        dotClass: "bg-cyan-300 animate-pulse motion-reduce:animate-none",
+        canRetry: false,
+        canStop: false,
+      };
+    case "live":
+      return {
+        label: "Live",
+        description: buildDescription(state, "Live updates are current.", hasLogs),
+        toneClass: "border-emerald-400/20 bg-emerald-500/8 text-emerald-100",
+        dotClass: "bg-emerald-300",
+        canRetry: false,
+        canStop: false,
+      };
+    case "reconnecting":
+      return {
+        label: "Reconnecting",
+        description: buildDescription(state, "Live updates were interrupted.", hasLogs),
+        toneClass: "border-amber-400/20 bg-amber-500/8 text-amber-100",
+        dotClass: "bg-amber-300 animate-pulse motion-reduce:animate-none",
+        canRetry: true,
+        canStop: true,
+      };
+    case "stale":
+      return {
+        label: "Stale data",
+        description: buildDescription(state, "Live updates have not resumed.", hasLogs),
+        toneClass: "border-orange-400/25 bg-orange-500/10 text-orange-100",
+        dotClass: "bg-orange-300",
+        canRetry: true,
+        canStop: true,
+      };
+    case "offline":
+      return {
+        label: "Offline",
+        description: buildDescription(
+          state,
+          state.errorMessage ?? "Live updates are paused.",
+          hasLogs,
+        ),
+        toneClass: "border-slate-400/20 bg-slate-500/10 text-slate-200",
+        dotClass: "bg-slate-400",
+        canRetry: true,
+        canStop: false,
+      };
+    case "error":
+      return {
+        label: "Connection error",
+        description: buildDescription(
+          state,
+          state.errorMessage ?? "The live stream reported a recoverable error.",
+          hasLogs,
+        ),
+        toneClass: "border-red-400/25 bg-red-500/10 text-red-100",
+        dotClass: "bg-red-300",
+        canRetry: true,
+        canStop: true,
+      };
+  }
+}
+
+export function LiveConnectionBadge({ state }: { state: LiveConnectionState }): JSX.Element {
+  const presentation = presentationForStatus(state.status, state, false);
+  const lastSuccess = formatLastSuccess(state.lastSuccessAt);
+  const retryLabel = state.retryCount > 0 ? `Retry ${state.retryCount.toString()}` : null;
+
+  return (
+    <span
+      role="status"
+      aria-label={presentation.description}
+      data-connection-state={state.status}
+      className={cn(
+        "inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium",
+        presentation.toneClass,
+      )}
+    >
+      <span className={cn("size-1.5 shrink-0 rounded-full", presentation.dotClass)} />
+      <span className="shrink-0">{presentation.label}</span>
+      {retryLabel !== null && (
+        <span className="hidden truncate text-current/70 sm:inline">{retryLabel}</span>
+      )}
+      {lastSuccess !== null && (
+        <span className="hidden truncate font-mono text-[10px] text-current/65 md:inline">
+          Last {lastSuccess}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export function LiveConnectionStatus({
+  state,
+  hasLogs,
+  onRetry,
+  onStop,
+}: {
+  state: LiveConnectionState;
+  hasLogs: boolean;
+  onRetry: () => void;
+  onStop: () => void;
+}): JSX.Element {
+  const presentation = presentationForStatus(state.status, state, hasLogs);
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      data-connection-state={state.status}
+      className={cn(
+        "mt-2 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border px-3 py-2 text-xs",
+        presentation.toneClass,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span className={cn("size-2 shrink-0 rounded-full", presentation.dotClass)} />
+        <span className="shrink-0 font-semibold">{presentation.label}</span>
+        <span className="min-w-0 text-current/75">{presentation.description}</span>
+      </div>
+      {(presentation.canRetry || presentation.canStop) && (
+        <div className="flex shrink-0 items-center gap-1.5">
+          {presentation.canRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="inline-flex h-7 items-center gap-1 rounded-md bg-black/15 px-2 font-medium transition-colors hover:bg-black/25 focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none"
+            >
+              <RefreshCw className="size-3" />
+              Retry now
+            </button>
+          )}
+          {presentation.canStop && (
+            <button
+              type="button"
+              onClick={onStop}
+              className="inline-flex h-7 items-center gap-1 rounded-md px-2 text-current/70 transition-colors hover:bg-black/15 hover:text-current focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none"
+            >
+              <CircleStop className="size-3" />
+              Stop retrying
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}