@tonyclaw/agent-inspector 2.0.3 → 2.0.5

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

@@ -1,32 +1,52 @@
 import { type JSX } from "react";
-import { ChevronRight, Wrench } from "lucide-react";
+import { Check, ChevronRight, Copy, Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
+import { useCopyFeedback } from "./useCopyFeedback";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
 };
 
+function ToolTraceEventRow({ event }: { event: ToolTraceEvent }): JSX.Element {
+  const argumentCopy = useCopyFeedback(event.argumentsText);
+  const canCopyArguments = event.argumentsText !== null;
+
+  return (
+    <div
+      key={event.id}
+      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs"
+    >
+      <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
+      <span className="font-mono font-semibold text-foreground/80">{event.name}</span>
+      {event.argumentsPreview !== null && (
+        <>
+          <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
+          <span className="min-w-0 truncate font-mono text-muted-foreground">
+            {event.argumentsPreview}
+          </span>
+        </>
+      )}
+      {canCopyArguments && (
+        <button
+          type="button"
+          className="ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-background/80 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/tool-trace:opacity-100 group-focus-within/tool-trace:opacity-100"
+          onClick={argumentCopy.copy}
+          aria-label={argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments"}
+          title={argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments"}
+        >
+          {argumentCopy.copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+        </button>
+      )}
+    </div>
+  );
+}
+
 export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
   if (events.length === 0) return null;
   return (
     <div className="mx-3 mb-2 grid gap-1.5">
       {events.map((event) => (
-        <div
-          key={event.id}
-          className="flex min-w-0 items-center gap-2 rounded-md border border-amber-500/20 bg-amber-500/5 px-2.5 py-1.5 text-xs"
-        >
-          <Wrench className="size-3.5 shrink-0 text-amber-400" />
-          <span className="font-mono font-semibold text-amber-300">{event.name}</span>
-          <span className="font-mono text-muted-foreground">#{event.logId}</span>
-          {event.argumentsPreview !== null && (
-            <>
-              <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
-              <span className="min-w-0 truncate font-mono text-muted-foreground">
-                {event.argumentsPreview}
-              </span>
-            </>
-          )}
-        </div>
+        <ToolTraceEventRow key={event.id} event={event} />
       ))}
     </div>
   );

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

@@ -1,6 +1,7 @@
 import { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AlertTriangle, ChevronRight, Clock, Zap } from "lucide-react";
 import { isTurnBoundary } from "../../lib/stopReason";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { getCrabVariant } from "../ui/crab-variants";
@@ -26,6 +27,7 @@ type TurnGroupProps = {
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
   turnIndex?: number;
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 export const TurnGroup = memo(function TurnGroup({
@@ -37,6 +39,7 @@ export const TurnGroup = memo(function TurnGroup({
   onCompareWithPrevious,
   comparisonPredecessors,
   turnIndex = 0,
+  timeDisplayFormat,
 }: TurnGroupProps): JSX.Element {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -134,15 +137,27 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, []);
 
+  const firstLogId = entries[0]?.log.id ?? turnIndex;
+  const turnLabel = `Turn ${String(turnIndex + 1)}`;
+
   return (
     <div
       ref={containerRef}
-      className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
+      tabIndex={collapsed ? undefined : 0}
+      role={collapsed ? undefined : "group"}
+      aria-label={collapsed ? undefined : turnLabel}
+      data-nav-id={collapsed ? undefined : `turn-${String(firstLogId)}`}
+      className={cn(
+        "border rounded-lg",
+        isPending ? "border-amber-500/10" : "border-transparent",
+        !collapsed &&
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+      )}
     >
       {collapsed ? (
         /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
         <div
-          data-nav-id={`turn-collapsed-${entries[0]?.log.id ?? turnIndex}`}
+          data-nav-id={`turn-collapsed-${String(firstLogId)}`}
           data-nav-action="expand"
           role="button"
           tabIndex={0}
@@ -331,6 +346,7 @@ export const TurnGroup = memo(function TurnGroup({
                   viewMode={viewMode}
                   strip={strip}
                   slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+                  timeDisplayFormat={timeDisplayFormat}
                   cacheTrend={cacheTrends?.get(log.id) ?? null}
                   onCompareWithPrevious={
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined

package/src/components/proxy-viewer/anatomy/SegmentBar.tsx

@@ -7,7 +7,7 @@ const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
   system: "bg-sky-500/70",
   user: "bg-emerald-500/70",
   assistant: "bg-violet-500/70",
-  tool: "bg-amber-500/70",
+  tool: "bg-sky-400/55",
   tools: "bg-slate-500/70",
 };
 
@@ -15,7 +15,7 @@ const ROLE_FOCUS_RING: Record<AnatomyRole, string> = {
   system: "focus-visible:ring-sky-300",
   user: "focus-visible:ring-emerald-300",
   assistant: "focus-visible:ring-violet-300",
-  tool: "focus-visible:ring-amber-300",
+  tool: "focus-visible:ring-sky-300",
   tools: "focus-visible:ring-slate-300",
 };
 

package/src/components/proxy-viewer/formats/anthropic/ContentBlocks.tsx

@@ -1,7 +1,7 @@
 import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
 import { type JSX, memo, useState } from "react";
-import ReactMarkdown from "react-markdown";
 import type { ResponseContentBlockType } from "../../../../proxy/schemas";
+import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
 import { JsonViewer } from "../../../ui/json-viewer";
@@ -30,9 +30,7 @@ function SystemReminderBlock({ text }: { text: string }): JSX.Element {
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="pl-4 pt-1">
-          <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-            <ReactMarkdown>{text}</ReactMarkdown>
-          </div>
+          <AnswerMarkdown text={text} />
         </div>
       </CollapsibleContent>
     </Collapsible>
@@ -50,11 +48,7 @@ export const TextBlock = memo(function TextBlock({ text }: { text: string }): JS
   return (
     <div className="space-y-2">
       {thinking !== null && <ThinkingBlock thinking={thinking} />}
-      {remainingText.length > 0 && (
-        <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-          <ReactMarkdown>{remainingText}</ReactMarkdown>
-        </div>
-      )}
+      {remainingText.length > 0 && <AnswerMarkdown text={remainingText} />}
       {thinking === null && remainingText.length === 0 && (
         <p className="text-xs text-muted-foreground italic">Empty text block</p>
       )}
@@ -113,9 +107,9 @@ export const ToolUseBlock = memo(function ToolUseBlock({
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-blue-500/40 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
-          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+      <div className="border-l-2 border-sky-400/25 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
           </Badge>

package/src/components/proxy-viewer/formats/anthropic/ResponseView.tsx

@@ -38,14 +38,14 @@ export const StructuredResponseViewAnthropic = memo(function StructuredResponseV
             response.usage.cache_creation_input_tokens !== null &&
             response.usage.cache_creation_input_tokens > 0 && (
               <span className="font-mono tabular-nums text-emerald-400">
-                Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
+                KV Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
               </span>
             )}
           {response.usage.cache_read_input_tokens !== undefined &&
             response.usage.cache_read_input_tokens !== null &&
             response.usage.cache_read_input_tokens > 0 && (
               <span className="font-mono tabular-nums text-purple-400">
-                Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
+                KV Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
               </span>
             )}
         </span>

package/src/components/proxy-viewer/formats/openai/ResponseView.tsx

@@ -1,8 +1,8 @@
 import { StopCircle, Terminal, Zap } from "lucide-react";
 import { memo, useState, type JSX } from "react";
-import ReactMarkdown from "react-markdown";
 import type { OpenAIResponse, OpenAIToolCall } from "../../../../proxy/schemas";
 import { formatTokens } from "../../../../lib/utils";
+import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { JsonViewer } from "../../../ui/json-viewer";
 import { safeJsonValue } from "../../../ui/json-viewer-bulk";
@@ -29,8 +29,8 @@ function parseToolArguments(raw: string | undefined): unknown {
 }
 
 /** One collapsible tool_use row, mirroring the Anthropic ToolUseBlock visual
- *  treatment (Terminal icon, blue accent, name as a Badge, JSON input in a
- *  scrollable JsonViewer). */
+ *  treatment (Terminal icon, soft tool accent, name as a Badge, JSON input in
+ *  a scrollable JsonViewer). */
 function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
   const [open, setOpen] = useState(false);
   const name = call.function.name ?? "(unnamed tool)";
@@ -38,9 +38,9 @@ function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-blue-500/40 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
-          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+      <div className="border-l-2 border-sky-400/25 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
           </Badge>
@@ -133,11 +133,7 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
               <div className="space-y-2">
                 {/* Show thinking from tags only if no reasoning_content field */}
                 {thinking !== null && !hasReasoningField && <ThinkingBlock thinking={thinking} />}
-                {remainingText.length > 0 && (
-                  <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-                    <ReactMarkdown>{remainingText}</ReactMarkdown>
-                  </div>
-                )}
+                {remainingText.length > 0 && <AnswerMarkdown text={remainingText} />}
               </div>
             );
           })()}
@@ -146,10 +142,10 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
           <OpenAIToolCallBlock key={call.id ?? `tc-${i}`} call={call} />
         ))}
         {message?.function_call !== null && message?.function_call !== undefined && (
-          <div className="border border-blue-500/30 rounded-md p-3 bg-blue-500/5">
-            <div className="text-xs text-blue-400 font-mono mb-1">function_call</div>
+          <div className="border border-sky-400/20 rounded-md p-3 bg-muted/20">
+            <div className="text-xs text-sky-400/80 font-mono mb-1">function_call</div>
             <div className="font-mono text-xs">
-              <span className="text-blue-300">{message.function_call.name}</span>
+              <span className="text-foreground/80">{message.function_call.name}</span>
               <span className="text-muted-foreground">({message.function_call.arguments})</span>
             </div>
           </div>

package/src/components/proxy-viewer/replayComparison.ts

@@ -0,0 +1,131 @@
+export type ReplayMetricValue = number | boolean | null;
+
+export type ReplayMetrics = {
+  status: number | null;
+  elapsedMs: number | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  responseBytes: number | null;
+  streaming: boolean;
+};
+
+export type ReplayMetricComparison = {
+  id: "status" | "elapsed" | "input" | "output" | "bytes" | "streaming";
+  label: string;
+  original: ReplayMetricValue;
+  replay: ReplayMetricValue;
+  delta: number | null;
+};
+
+type JsonObject = Record<string, unknown>;
+
+function isJsonObject(value: unknown): value is JsonObject {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function byteLength(value: string | null | undefined): number | null {
+  if (value === null || value === undefined) return null;
+  return new TextEncoder().encode(value).length;
+}
+
+export function readRequestModel(body: string): string | null {
+  try {
+    const parsed: unknown = JSON.parse(body);
+    if (!isJsonObject(parsed)) return null;
+    const model = parsed["model"];
+    return typeof model === "string" && model.length > 0 ? model : null;
+  } catch {
+    return null;
+  }
+}
+
+export function replaceRequestModel(
+  body: string,
+  model: string,
+): { body: string; error: string | null } {
+  try {
+    const parsed: unknown = JSON.parse(body);
+    if (!isJsonObject(parsed)) {
+      return { body, error: "Request body must be a JSON object." };
+    }
+    return {
+      body: JSON.stringify({ ...parsed, model }, null, 2),
+      error: null,
+    };
+  } catch {
+    return { body, error: "Request body must be valid JSON before changing the replay model." };
+  }
+}
+
+export function buildReplayMetrics(input: {
+  status: number | null | undefined;
+  elapsedMs: number | null | undefined;
+  inputTokens: number | null | undefined;
+  outputTokens: number | null | undefined;
+  responseText: string | null | undefined;
+  streaming: boolean | null | undefined;
+}): ReplayMetrics {
+  return {
+    status: input.status ?? null,
+    elapsedMs: input.elapsedMs ?? null,
+    inputTokens: input.inputTokens ?? null,
+    outputTokens: input.outputTokens ?? null,
+    responseBytes: byteLength(input.responseText),
+    streaming: input.streaming === true,
+  };
+}
+
+function numericDelta(original: number | null, replay: number | null): number | null {
+  if (original === null || replay === null) return null;
+  return replay - original;
+}
+
+export function buildReplayComparisons(
+  original: ReplayMetrics,
+  replay: ReplayMetrics,
+): ReplayMetricComparison[] {
+  return [
+    {
+      id: "status",
+      label: "Status",
+      original: original.status,
+      replay: replay.status,
+      delta: numericDelta(original.status, replay.status),
+    },
+    {
+      id: "elapsed",
+      label: "Elapsed",
+      original: original.elapsedMs,
+      replay: replay.elapsedMs,
+      delta: numericDelta(original.elapsedMs, replay.elapsedMs),
+    },
+    {
+      id: "input",
+      label: "Input",
+      original: original.inputTokens,
+      replay: replay.inputTokens,
+      delta: numericDelta(original.inputTokens, replay.inputTokens),
+    },
+    {
+      id: "output",
+      label: "Output",
+      original: original.outputTokens,
+      replay: replay.outputTokens,
+      delta: numericDelta(original.outputTokens, replay.outputTokens),
+    },
+    {
+      id: "bytes",
+      label: "Bytes",
+      original: original.responseBytes,
+      replay: replay.responseBytes,
+      delta: numericDelta(original.responseBytes, replay.responseBytes),
+    },
+    {
+      id: "streaming",
+      label: "Stream",
+      original: original.streaming,
+      replay: replay.streaming,
+      delta: null,
+    },
+  ];
+}

package/src/components/proxy-viewer/useKeyboardNavigation.ts

@@ -5,6 +5,11 @@ const NAV_ACTION_ATTR = "data-nav-action";
 
 export type NavAction = "toggle" | "expand" | "collapse";
 
+type KeyboardNavigationOptions = {
+  /** When true, Arrow/WASD navigation works even when focus is on the page body. */
+  pageWide?: boolean;
+};
+
 function findNavItems(container: HTMLElement): HTMLElement[] {
   return Array.from(container.querySelectorAll<HTMLElement>(`[${NAV_ATTR}]`));
 }
@@ -41,18 +46,40 @@ function safeItemAt(items: HTMLElement[], index: number): HTMLElement | null {
 
 function isEditableTarget(target: HTMLElement): boolean {
   const tag = target.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA") return true;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
   if (target.isContentEditable) return true;
   return false;
 }
 
+function isInteractiveTarget(target: HTMLElement): boolean {
+  const tag = target.tagName;
+  if (tag === "BUTTON" || tag === "A") return true;
+  if (isEditableTarget(target)) return true;
+  return target.closest("[role='button'],[role='menuitem'],[role='option']") !== null;
+}
+
+function isInOpenOverlay(target: HTMLElement): boolean {
+  if (target.closest("[role='dialog'],[role='menu'],[role='listbox']") !== null) return true;
+  return document.querySelector("[role='dialog'],[role='menu'],[role='listbox']") !== null;
+}
+
+function hasActiveTextSelection(): boolean {
+  const selection = window.getSelection();
+  if (selection === null) return false;
+  return selection.type === "Range" && selection.toString().length > 0;
+}
+
+function isLetterNavigationKey(event: KeyboardEvent, key: "W" | "A" | "S" | "D"): boolean {
+  return event.key === key && event.shiftKey;
+}
+
 /**
  * Enables keyboard navigation within a log-list container.
  *
  * Navigation keys:
- * - ArrowUp / Shift+W : previous item
- * - ArrowDown / Shift+S : next item
- * - ArrowLeft / Shift+A : collapse or move to prev item
+ * - ArrowUp / Shift+W : previous thread/turn/log item
+ * - ArrowDown / Shift+S : next thread/turn/log item
+ * - ArrowLeft / Shift+A : collapse or move to previous item
  * - ArrowRight / Shift+D : expand or move to next item
  * - Space : toggle expand/collapse
  *
@@ -66,17 +93,20 @@ export function useKeyboardNavigation(
   /** Ref to the outer focus-receiving wrapper (the one with tabIndex).
    *  Defaults to `containerRef` when omitted. */
   wrapperRef?: React.RefObject<HTMLElement | null>,
+  options: KeyboardNavigationOptions = {},
 ): void {
   const rootRef = wrapperRef ?? containerRef;
+  const pageWide = options.pageWide === true;
 
   const handleFocusContainer = useCallback(
     (e: FocusEvent) => {
       const container = containerRef.current;
+      const root = rootRef.current;
       if (!container) return;
+      if (!root) return;
       const target = e.target;
       if (!isFocusTarget(target)) return;
-      if (target !== rootRef.current) return;
-      if (!container.contains(target)) return;
+      if (target !== root) return;
       const items = findNavItems(container);
       const first = safeItemAt(items, 0);
       if (first !== null) focusAndScroll(first);
@@ -85,17 +115,27 @@ export function useKeyboardNavigation(
   );
 
   useEffect(() => {
-    const root = rootRef.current;
-    const container = containerRef.current;
-    if (!root || !container) return;
-
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+      const container = containerRef.current;
+      if (!container) return;
+
       const target = e.target;
       if (!isFocusTarget(target)) return;
 
-      if (!container.contains(target)) return;
-
       if (isEditableTarget(target)) return;
+      if (hasActiveTextSelection()) return;
+
+      const isInsideContainer = container.contains(target);
+      if (isInsideContainer && isInteractiveTarget(target) && !target.hasAttribute(NAV_ATTR)) {
+        return;
+      }
+
+      if (!isInsideContainer) {
+        if (!pageWide) return;
+        if (isInteractiveTarget(target) || isInOpenOverlay(target)) return;
+      }
 
       const items = findNavItems(container);
       if (items.length === 0) return;
@@ -108,7 +148,8 @@ export function useKeyboardNavigation(
       switch (e.key) {
         case "ArrowUp":
         case "W": {
-          if (e.key === "W" && !e.shiftKey) break;
+          if (e.shiftKey && e.key === "ArrowUp") break;
+          if (e.key === "W" && !isLetterNavigationKey(e, "W")) break;
           e.preventDefault();
           const prevIdx =
             currentIdx > 0 ? currentIdx - 1 : currentIdx === -1 ? items.length - 1 : -1;
@@ -121,7 +162,8 @@ export function useKeyboardNavigation(
         }
         case "ArrowDown":
         case "S": {
-          if (e.key === "S" && !e.shiftKey) break;
+          if (e.shiftKey && e.key === "ArrowDown") break;
+          if (e.key === "S" && !isLetterNavigationKey(e, "S")) break;
           e.preventDefault();
           const nextIdx =
             currentIdx < items.length - 1 ? currentIdx + 1 : currentIdx === -1 ? 0 : -1;
@@ -134,7 +176,8 @@ export function useKeyboardNavigation(
         }
         case "ArrowLeft":
         case "A": {
-          if (e.key === "A" && !e.shiftKey) break;
+          if (e.shiftKey && e.key === "ArrowLeft") break;
+          if (e.key === "A" && !isLetterNavigationKey(e, "A")) break;
           if (current === null) break;
           e.preventDefault();
           const action = getAction(current);
@@ -149,7 +192,8 @@ export function useKeyboardNavigation(
         }
         case "ArrowRight":
         case "D": {
-          if (e.key === "D" && !e.shiftKey) break;
+          if (e.shiftKey && e.key === "ArrowRight") break;
+          if (e.key === "D" && !isLetterNavigationKey(e, "D")) break;
           if (current === null) break;
           e.preventDefault();
           const action = getAction(current);
@@ -179,12 +223,10 @@ export function useKeyboardNavigation(
 
     document.addEventListener("keydown", handleKeyDown, { capture: true });
     return () => document.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [containerRef, rootRef]);
+  }, [containerRef, pageWide, rootRef]);
 
   useEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    root.addEventListener("focus", handleFocusContainer);
-    return () => root.removeEventListener("focus", handleFocusContainer);
-  }, [handleFocusContainer, rootRef]);
+    document.addEventListener("focusin", handleFocusContainer);
+    return () => document.removeEventListener("focusin", handleFocusContainer);
+  }, [handleFocusContainer]);
 }

package/src/components/proxy-viewer/viewerState.ts

@@ -40,6 +40,7 @@ export type ToolTraceEvent = {
   index: number;
   provider: "anthropic" | "openai";
   name: string;
+  argumentsText: string | null;
   argumentsPreview: string | null;
 };
 
@@ -118,6 +119,13 @@ function previewValue(value: unknown): string | null {
     : normalized;
 }
 
+function copyValue(value: unknown): string | null {
+  if (value === undefined || value === null) return null;
+  if (typeof value === "string") return value.length > 0 ? value : null;
+  const raw = JSON.stringify(value, null, 2);
+  return raw === undefined || raw.length === 0 ? null : raw;
+}
+
 function extractAnthropicToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
   const parsed = parseJsonResponse(log.responseText);
   const content = safeGetOwnProperty(parsed, "content");
@@ -129,13 +137,15 @@ function extractAnthropicToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
     if (type !== "tool_use") continue;
     const name = safeGetOwnProperty(block, "name");
     if (typeof name !== "string" || name.length === 0) continue;
+    const input = safeGetOwnProperty(block, "input");
     events.push({
       id: `${String(log.id)}-anthropic-tool-${String(events.length)}`,
       logId: log.id,
       index: events.length,
       provider: "anthropic",
       name,
-      argumentsPreview: previewValue(safeGetOwnProperty(block, "input")),
+      argumentsText: copyValue(input),
+      argumentsPreview: previewValue(input),
     });
   }
   return events;
@@ -155,13 +165,15 @@ function extractOpenAIToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
       const fn = safeGetOwnProperty(call, "function");
       const name = safeGetOwnProperty(fn, "name");
       if (typeof name !== "string" || name.length === 0) continue;
+      const args = safeGetOwnProperty(fn, "arguments");
       events.push({
         id: `${String(log.id)}-openai-tool-${String(events.length)}`,
         logId: log.id,
         index: events.length,
         provider: "openai",
         name,
-        argumentsPreview: previewValue(safeGetOwnProperty(fn, "arguments")),
+        argumentsText: copyValue(args),
+        argumentsPreview: previewValue(args),
       });
     }
   }

package/src/knowledge/candidateStore.ts

@@ -1,4 +1,12 @@
-import type { KnowledgeCandidate } from "./types";
+import type { KnowledgeCandidate, KnowledgeCandidateType } from "./types";
+import { redactCandidate } from "./redactor";
+
+export type CandidateDraftUpdate = {
+  type?: KnowledgeCandidateType;
+  title?: string;
+  content?: string;
+  tags?: string[];
+};
 
 const candidates = new Map<string, KnowledgeCandidate>();
 
@@ -58,6 +66,29 @@ export function markCandidateFailed(id: string, error: string): KnowledgeCandida
   return updated;
 }
 
+export function updateCandidateDraft(
+  id: string,
+  updates: CandidateDraftUpdate,
+): KnowledgeCandidate | null {
+  const existing = candidates.get(id);
+  if (existing === undefined) return null;
+  if (existing.status === "promoted") return null;
+
+  const updated = redactCandidate({
+    ...existing,
+    type: updates.type ?? existing.type,
+    title: updates.title ?? existing.title,
+    content: updates.content ?? existing.content,
+    tags: updates.tags ?? existing.tags,
+    status: "draft",
+    error: null,
+    openClawMemoryId: null,
+    updatedAt: new Date().toISOString(),
+  });
+  candidates.set(id, updated);
+  return updated;
+}
+
 export function _resetCandidatesForTests(): void {
   candidates.clear();
 }