@tonyclaw/agent-inspector 3.0.29 → 3.0.30

package/.output/server/{_sessionId-CwGXPD4C.mjs → _sessionId-C5S3pGZd.mjs}

@@ -1,29 +1,30 @@
 import { j as jsxRuntimeExports, r as reactExports } from "./_libs/react.mjs";
-import { P as ProxyViewerContainer } from "./_ssr/ProxyViewerContainer-DUgxRNbj.mjs";
-import { R as Route$K } from "./_ssr/router-BYlePDj8.mjs";
-import "./_libs/jszip.mjs";
-import "./_libs/react-dom.mjs";
-import "node:fs";
-import "node:buffer";
-import "node:path";
+import { P as ProxyViewerContainer } from "./_ssr/ProxyViewerContainer-CvsUmbJ3.mjs";
+import { R as Route$K } from "./_ssr/router-GKvrwifJ.mjs";
 import "node:crypto";
+import "node:path";
+import "node:fs";
 import "node:child_process";
+import "node:buffer";
 import "node:url";
 import "crypto";
 import "node:util";
 import "node:net";
 import "./_libs/modelcontextprotocol__server.mjs";
+import "./_libs/jszip.mjs";
 import "node:os";
 import "./_libs/swr.mjs";
 import "./_libs/use-sync-external-store.mjs";
 import "./_libs/dequal.mjs";
-import "./_libs/clsx.mjs";
-import "./_libs/tailwind-merge.mjs";
-import "./_libs/class-variance-authority.mjs";
 import "./_libs/tanstack__react-virtual.mjs";
+import "./_libs/react-dom.mjs";
+import "util";
+import "async_hooks";
+import "stream";
 import "./_libs/tanstack__virtual-core.mjs";
+import "./_libs/class-variance-authority.mjs";
+import "./_libs/clsx.mjs";
 import "./_libs/diff.mjs";
-import "./_libs/three.mjs";
 import "./_libs/lucide-react.mjs";
 import "./_libs/zod.mjs";
 import "./_libs/radix-ui__react-select.mjs";
@@ -77,7 +78,9 @@ import "node:stream";
 import "./_libs/tanstack__history.mjs";
 import "node:stream/web";
 import "./_libs/isbot.mjs";
+import "./_libs/tailwind-merge.mjs";
 import "node:fs/promises";
+import "node:worker_threads";
 import "node:readline";
 import "./_libs/conf.mjs";
 import "node:process";
@@ -99,10 +102,7 @@ import "./_libs/mimic-function.mjs";
 import "./_libs/semver.mjs";
 import "./_libs/uint8array-extras.mjs";
 import "node:dns/promises";
-import "node:worker_threads";
-import "util";
-import "async_hooks";
-import "stream";
+import "node:assert/strict";
 import "./_libs/readable-stream.mjs";
 import "events";
 import "node:string_decoder";

package/.output/server/_sessionId-g6D69lKq.mjs

@@ -0,0 +1,81 @@
+import { j as jsxRuntimeExports } from "./_libs/react.mjs";
+import { S as SafeRouteError } from "./_ssr/router-GKvrwifJ.mjs";
+import "node:crypto";
+import "node:path";
+import "node:fs";
+import "node:child_process";
+import "node:buffer";
+import "node:url";
+import "crypto";
+import "node:util";
+import "node:net";
+import "./_libs/modelcontextprotocol__server.mjs";
+import "./_libs/jszip.mjs";
+import "node:os";
+import "./_libs/tanstack__react-router.mjs";
+import "./_libs/tanstack__router-core.mjs";
+import "./_libs/cookie-es.mjs";
+import "./_libs/seroval.mjs";
+import "./_libs/seroval-plugins.mjs";
+import "node:stream";
+import "./_libs/tanstack__history.mjs";
+import "node:stream/web";
+import "./_libs/react-dom.mjs";
+import "util";
+import "async_hooks";
+import "stream";
+import "./_libs/isbot.mjs";
+import "./_libs/swr.mjs";
+import "./_libs/use-sync-external-store.mjs";
+import "./_libs/dequal.mjs";
+import "./_libs/class-variance-authority.mjs";
+import "./_libs/clsx.mjs";
+import "./_libs/tailwind-merge.mjs";
+import "node:fs/promises";
+import "node:worker_threads";
+import "node:readline";
+import "./_libs/conf.mjs";
+import "node:process";
+import "node:assert";
+import "./_libs/dot-prop.mjs";
+import "./_libs/env-paths.mjs";
+import "./_libs/atomically.mjs";
+import "node:events";
+import "./_libs/stubborn-fs.mjs";
+import "./_libs/stubborn-utils.mjs";
+import "./_libs/when-exit.mjs";
+import "./_libs/ajv.mjs";
+import "./_libs/fast-deep-equal.mjs";
+import "./_libs/json-schema-traverse.mjs";
+import "./_libs/fast-uri.mjs";
+import "./_libs/ajv-formats.mjs";
+import "./_libs/debounce-fn.mjs";
+import "./_libs/mimic-function.mjs";
+import "./_libs/semver.mjs";
+import "./_libs/uint8array-extras.mjs";
+import "node:dns/promises";
+import "node:assert/strict";
+import "./_libs/zod.mjs";
+import "./_libs/readable-stream.mjs";
+import "events";
+import "node:string_decoder";
+import "./_libs/process-nextick-args.mjs";
+import "./_libs/isarray.mjs";
+import "./_libs/safe-buffer.mjs";
+import "buffer";
+import "./_libs/core-util-is.mjs";
+import "./_libs/inherits.mjs";
+import "./_libs/util-deprecate.mjs";
+import "./_libs/lie.mjs";
+import "./_libs/immediate.mjs";
+import "./_libs/setimmediate.mjs";
+import "./_libs/pako.mjs";
+function SessionRouteError({
+  error,
+  reset
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SafeRouteError, { error, reset, scope: "session-route" });
+}
+export {
+  SessionRouteError as errorComponent
+};

package/.output/server/_ssr/{CompareDrawer-R_P1-VNr.mjs → CompareDrawer-CqUmGHal.mjs}

@@ -1,11 +1,11 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { g as getLogFormatAdapter, r as resolveLogFormat, a as getConversationId, c as cn, B as Badge, f as formatTokens, b as copyTextToClipboard, L as LazyJsonViewerFromString } from "./ProxyViewerContainer-DUgxRNbj.mjs";
-import "./router-BYlePDj8.mjs";
-import "node:fs";
-import "node:buffer";
-import "node:path";
+import { m as cn, x as formatTokens, y as copyTextToClipboard } from "./router-GKvrwifJ.mjs";
+import { g as getLogFormatAdapter, r as resolveLogFormat, a as getConversationId, B as Badge, L as LazyJsonViewerFromString } from "./ProxyViewerContainer-CvsUmbJ3.mjs";
 import "node:crypto";
+import "node:path";
+import "node:fs";
 import "node:child_process";
+import "node:buffer";
 import "node:url";
 import "crypto";
 import "node:util";
@@ -13,19 +13,68 @@ import "node:net";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import "node:os";
+import { X, aD as Rows3, aE as Columns2, ad as Minus, H as Plus, a0 as Pencil, t as ChevronRight, aF as Equal, d as Check, l as Copy } from "../_libs/lucide-react.mjs";
+import "../_libs/tanstack__react-router.mjs";
+import "../_libs/tanstack__router-core.mjs";
+import "../_libs/cookie-es.mjs";
+import "../_libs/seroval.mjs";
+import "../_libs/seroval-plugins.mjs";
+import "node:stream";
+import "../_libs/tanstack__history.mjs";
+import "node:stream/web";
 import "../_libs/react-dom.mjs";
-import { X, aF as Rows3, aG as Columns2, af as Minus, g as Plus, aa as Pencil, m as ChevronRight, aH as Equal, b as Check, j as Copy } from "../_libs/lucide-react.mjs";
+import "util";
+import "async_hooks";
+import "stream";
+import "../_libs/isbot.mjs";
 import "../_libs/swr.mjs";
 import "../_libs/use-sync-external-store.mjs";
 import "../_libs/dequal.mjs";
+import "../_libs/class-variance-authority.mjs";
 import "../_libs/clsx.mjs";
 import "../_libs/tailwind-merge.mjs";
-import "../_libs/class-variance-authority.mjs";
+import "node:fs/promises";
+import "node:worker_threads";
+import "node:readline";
+import "../_libs/conf.mjs";
+import "node:process";
+import "node:assert";
+import "../_libs/dot-prop.mjs";
+import "../_libs/env-paths.mjs";
+import "../_libs/atomically.mjs";
+import "node:events";
+import "../_libs/stubborn-fs.mjs";
+import "../_libs/stubborn-utils.mjs";
+import "../_libs/when-exit.mjs";
+import "../_libs/ajv.mjs";
+import "../_libs/fast-deep-equal.mjs";
+import "../_libs/json-schema-traverse.mjs";
+import "../_libs/fast-uri.mjs";
+import "../_libs/ajv-formats.mjs";
+import "../_libs/debounce-fn.mjs";
+import "../_libs/mimic-function.mjs";
+import "../_libs/semver.mjs";
+import "../_libs/uint8array-extras.mjs";
+import "node:dns/promises";
+import "node:assert/strict";
+import "../_libs/zod.mjs";
+import "../_libs/readable-stream.mjs";
+import "events";
+import "node:string_decoder";
+import "../_libs/process-nextick-args.mjs";
+import "../_libs/isarray.mjs";
+import "../_libs/safe-buffer.mjs";
+import "buffer";
+import "../_libs/core-util-is.mjs";
+import "../_libs/inherits.mjs";
+import "../_libs/util-deprecate.mjs";
+import "../_libs/lie.mjs";
+import "../_libs/immediate.mjs";
+import "../_libs/setimmediate.mjs";
+import "../_libs/pako.mjs";
 import "../_libs/tanstack__react-virtual.mjs";
 import "../_libs/tanstack__virtual-core.mjs";
 import "../_libs/diff.mjs";
-import "../_libs/three.mjs";
-import "../_libs/zod.mjs";
 import "../_libs/radix-ui__react-select.mjs";
 import "../_libs/radix-ui__number.mjs";
 import "../_libs/radix-ui__primitive.mjs";
@@ -68,55 +117,6 @@ import "../_libs/@radix-ui/react-use-is-hydrated+[...].mjs";
 import "../_libs/radix-ui__react-tooltip.mjs";
 import "../_libs/radix-ui__react-collapsible.mjs";
 import "../_libs/radix-ui__react-scroll-area.mjs";
-import "../_libs/tanstack__react-router.mjs";
-import "../_libs/tanstack__router-core.mjs";
-import "../_libs/cookie-es.mjs";
-import "../_libs/seroval.mjs";
-import "../_libs/seroval-plugins.mjs";
-import "node:stream";
-import "../_libs/tanstack__history.mjs";
-import "node:stream/web";
-import "../_libs/isbot.mjs";
-import "node:fs/promises";
-import "node:readline";
-import "../_libs/conf.mjs";
-import "node:process";
-import "node:assert";
-import "../_libs/dot-prop.mjs";
-import "../_libs/env-paths.mjs";
-import "../_libs/atomically.mjs";
-import "node:events";
-import "../_libs/stubborn-fs.mjs";
-import "../_libs/stubborn-utils.mjs";
-import "../_libs/when-exit.mjs";
-import "../_libs/ajv.mjs";
-import "../_libs/fast-deep-equal.mjs";
-import "../_libs/json-schema-traverse.mjs";
-import "../_libs/fast-uri.mjs";
-import "../_libs/ajv-formats.mjs";
-import "../_libs/debounce-fn.mjs";
-import "../_libs/mimic-function.mjs";
-import "../_libs/semver.mjs";
-import "../_libs/uint8array-extras.mjs";
-import "node:dns/promises";
-import "node:worker_threads";
-import "util";
-import "async_hooks";
-import "stream";
-import "../_libs/readable-stream.mjs";
-import "events";
-import "node:string_decoder";
-import "../_libs/process-nextick-args.mjs";
-import "../_libs/isarray.mjs";
-import "../_libs/safe-buffer.mjs";
-import "buffer";
-import "../_libs/core-util-is.mjs";
-import "../_libs/inherits.mjs";
-import "../_libs/util-deprecate.mjs";
-import "../_libs/lie.mjs";
-import "../_libs/immediate.mjs";
-import "../_libs/setimmediate.mjs";
-import "../_libs/pako.mjs";
 const ROOT_PATH = "";
 function formatPath(segments) {
   if (segments.length === 0) return ROOT_PATH;
@@ -287,6 +287,8 @@ function previewNode(node, maxLen = 80) {
   if (s.length > maxLen) s = `${s.slice(0, maxLen - 1)}…`;
   return s;
 }
+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";
+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)]";
 function nodeToJsonString(node, indent = 2) {
   return JSON.stringify(nodeToJsonValue(node), null, indent);
 }
@@ -362,23 +364,23 @@ function groupContiguousEquals(ops) {
 const KIND_VISUAL = {
   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: {
@@ -449,15 +451,15 @@ function UnifiedOpRow({
   const preview = op.kind === "changed" ? [
     {
       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-muted-foreground" }];
+  ] : op.kind === "added" ? [{ 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 !== "";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -520,7 +522,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-muted-foreground/50 hover:text-foreground hover:bg-muted"
+                    justCopied ? "text-status-success" : "text-muted-foreground/50 hover:text-foreground hover:bg-muted"
                   ),
                   "aria-label": justCopied ? "Copied" : "Copy",
                   title: justCopied ? "Copied!" : "Copy",
@@ -557,12 +559,12 @@ function ExpandedSubtree({ op }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-5 mt-2 text-xs text-muted-foreground/70 italic", children: "Primitive values are shown inline above." });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-rose-500/30 rounded p-2 bg-rose-500/5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase tracking-wider text-rose-500 mb-1", children: "Old" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-status-danger/30 bg-status-danger/5 p-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-status-danger", children: "Old" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(LazyJsonStringView, { text: nodeToJsonString(op.left), defaultExpandDepth: 0 })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-emerald-500/30 rounded p-2 bg-emerald-500/5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase tracking-wider text-emerald-500 mb-1", children: "New" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-status-success/30 bg-status-success/5 p-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 text-[10px] uppercase tracking-wider text-status-success", children: "New" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(LazyJsonStringView, { text: nodeToJsonString(op.right), defaultExpandDepth: 0 })
     ] })
   ] });
@@ -586,7 +588,7 @@ function SummaryChips({
         disabled: counts.removed === 0,
         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-border text-muted-foreground/40 cursor-not-allowed"
+          counts.removed > 0 ? "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",
         children: [
@@ -604,7 +606,7 @@ function SummaryChips({
         disabled: counts.added === 0,
         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-border text-muted-foreground/40 cursor-not-allowed"
+          counts.added > 0 ? "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",
         children: [
@@ -622,7 +624,7 @@ function SummaryChips({
         disabled: counts.changed === 0,
         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-border text-muted-foreground/40 cursor-not-allowed"
+          counts.changed > 0 ? "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",
         children: [
@@ -689,23 +691,23 @@ function SideSummary({
           variant: "outline",
           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"
+            side === "left" ? "border-status-danger/40 text-status-danger" : "border-status-success/40 text-status-success"
           ),
           children: side === "left" ? "← Left" : "Right →"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-blue-400/80", title: `Log ID ${String(log.id)}`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-status-info", title: `Log ID ${String(log.id)}`, children: [
         "#",
         displayNumber
       ] }),
-      log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono leading-snug text-muted-foreground", children: log.model })
+      log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate font-mono leading-snug text-muted-foreground", children: log.model })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 text-muted-foreground font-mono", children: [
-      log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-400", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 font-mono text-muted-foreground", children: [
+      log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-status-success", children: [
         "KV Cache +",
         formatTokens(log.cacheCreationInputTokens)
       ] }),
-      log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-purple-400", children: [
+      log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-status-accent", children: [
         "KV Cache ~",
         formatTokens(log.cacheReadInputTokens)
       ] }),
@@ -724,6 +726,9 @@ function CompareDrawer({
   rightDisplayNumber,
   onClose
 }) {
+  const panelRef = reactExports.useRef(null);
+  const closeButtonRef = reactExports.useRef(null);
+  const previousActiveElementRef = reactExports.useRef(null);
   const ops = reactExports.useMemo(() => {
     const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
       left.rawRequestBody
@@ -812,6 +817,8 @@ function CompareDrawer({
     }
   };
   reactExports.useEffect(() => {
+    previousActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    closeButtonRef.current?.focus();
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -821,8 +828,32 @@ function CompareDrawer({
     return () => {
       document.removeEventListener("keydown", onKey);
       document.body.style.overflow = prevOverflow;
+      previousActiveElementRef.current?.focus();
     };
   }, [onClose]);
+  const handlePanelKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key !== "Tab") return;
+    const panel = panelRef.current;
+    if (panel === null) return;
+    const focusable = Array.from(
+      panel.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (first === void 0 || last === void 0) 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";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -846,23 +877,25 @@ function CompareDrawer({
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "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,
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4 px-4 py-3 border-b border-border", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex gap-4 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: COMPARE_RESPONSIVE_HEADER_CLASS_NAME, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: left, side: "left", displayNumber: leftDisplayNumber }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: right, side: "right", displayNumber: rightDisplayNumber })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-start", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ModeToggle, { mode, onChange: setMode }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "button",
                     {
+                      ref: closeButtonRef,
                       type: "button",
                       onClick: onClose,
                       "aria-label": "Close",
@@ -872,7 +905,7 @@ function CompareDrawer({
                   )
                 ] })
               ] }),
-              !sameSession && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border", children: "Heads up: the two selected logs are from different sessions." }),
+              !sameSession && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-border bg-warning/10 px-4 py-1.5 text-xs text-foreground", children: "Heads up: the two selected logs are from different sessions." }),
               allEqual ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto flex items-center justify-center text-muted-foreground text-sm", children: "The two Request payloads are identical." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChips, { counts, onJumpTo: jumpToKind }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: bodyRef, className: "flex-1 min-h-0 overflow-y-auto", children: mode === "unified" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 space-y-0.5", children: grouped.map((g, i) => {
@@ -925,8 +958,8 @@ function SplitBody({
   leftDisplayNumber,
   rightDisplayNumber
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("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", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-compare-layout": "responsive-split", className: COMPARE_RESPONSIVE_SPLIT_CLASS_NAME, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("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)]", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Path" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { title: `Log ID ${String(left.id)}`, children: [
         "Left (Log #",
@@ -944,7 +977,7 @@ function SplitBody({
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            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",
             children: [
               g.ops.length,
               " equal siblings collapsed — switch to Unified to expand"
@@ -958,7 +991,7 @@ function SplitBody({
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            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)]",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs truncate", title: op.path, children: op.path }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) }),
@@ -972,10 +1005,10 @@ function SplitBody({
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-emerald-300/90", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-status-success", children: [
                 "+ ",
                 previewNode(op.value, 400)
               ] })
@@ -988,10 +1021,10 @@ function SplitBody({
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-rose-300/90 line-through", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-status-danger line-through", children: [
                 "− ",
                 previewNode(op.value, 400)
               ] })
@@ -1003,12 +1036,12 @@ function SplitBody({
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          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",
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-rose-300/90 break-all line-through", children: previewNode(op.left, 400) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-emerald-300/90 break-all", children: previewNode(op.right, 400) })
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono break-all text-status-danger line-through", children: previewNode(op.left, 400) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono break-all text-status-success", children: previewNode(op.right, 400) })
             ] })
           ]
         },
@@ -1018,5 +1051,7 @@ function SplitBody({
   ] });
 }
 export {
+  COMPARE_RESPONSIVE_HEADER_CLASS_NAME,
+  COMPARE_RESPONSIVE_SPLIT_CLASS_NAME,
   CompareDrawer
 };