@tonyclaw/agent-inspector 2.0.4 → 2.0.6

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/components/ui/json-viewer.tsx

@@ -380,7 +380,7 @@ export type JsonViewerProps = {
   bulkRevision?: number;
   /**
    * Set of JSON-pointer-style paths whose row should expose a
-   * `data-anatomy-path` attribute. Used by the Anatomy view to
+   * `data-anatomy-path` attribute. Used by the Context view to
    * locate rows for click-to-jump. When `null` or `undefined`,
    * no `data-anatomy-path` attribute is emitted (zero cost).
    */

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();
 }

package/src/routes/api/knowledge.candidates.$candidateId.ts

@@ -0,0 +1,50 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { getCandidate, updateCandidateDraft } from "../../knowledge/candidateStore";
+import { KnowledgeCandidateSchema, KnowledgeCandidateTypeSchema } from "../../knowledge/types";
+
+const CandidateUpdateSchema = z
+  .object({
+    type: KnowledgeCandidateTypeSchema.optional(),
+    title: z.string().trim().min(1).max(160).optional(),
+    content: z.string().trim().min(1).max(12000).optional(),
+    tags: z.array(z.string().trim().min(1).max(64)).max(24).optional(),
+  })
+  .strict();
+
+const CandidateUpdateResponseSchema = z.object({
+  candidate: KnowledgeCandidateSchema,
+});
+
+export type CandidateUpdateResponse = z.infer<typeof CandidateUpdateResponseSchema>;
+
+export const Route = createFileRoute("/api/knowledge/candidates/$candidateId")({
+  server: {
+    handlers: {
+      PATCH: async ({ params, request }: { params: { candidateId: string }; request: Request }) => {
+        const existing = getCandidate(params.candidateId);
+        if (existing === null) {
+          return Response.json({ error: "Knowledge candidate not found" }, { status: 404 });
+        }
+        if (existing.status === "promoted") {
+          return Response.json(
+            { error: "Promoted knowledge candidates cannot be edited" },
+            { status: 409 },
+          );
+        }
+
+        const raw: unknown = await request.json().catch(() => null);
+        const parsed = CandidateUpdateSchema.safeParse(raw);
+        if (!parsed.success) {
+          return Response.json({ error: parsed.error.message }, { status: 400 });
+        }
+
+        const updated = updateCandidateDraft(existing.id, parsed.data);
+        if (updated === null) {
+          return Response.json({ error: "Knowledge candidate update failed" }, { status: 409 });
+        }
+        return Response.json({ candidate: updated } satisfies CandidateUpdateResponse);
+      },
+    },
+  },
+});

package/src/routes/api/knowledge.sessions.$sessionId.candidates.ts

@@ -1,13 +1,23 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { getFilteredLogs } from "../../proxy/store";
+import { getFilteredLogs, getLogSessionId } from "../../proxy/store";
 import { distillSessionCandidates } from "../../knowledge/distiller";
 import { saveCandidates } from "../../knowledge/candidateStore";
 
+function getCandidateScopeId(log: ReturnType<typeof getFilteredLogs>[number]): string {
+  return getLogSessionId(log) ?? "default";
+}
+
+function getLogsForCandidateScope(scopeId: string): ReturnType<typeof getFilteredLogs> {
+  const direct = getFilteredLogs(scopeId);
+  if (direct.length > 0) return direct;
+  return getFilteredLogs().filter((log) => getCandidateScopeId(log) === scopeId);
+}
+
 export const Route = createFileRoute("/api/knowledge/sessions/$sessionId/candidates")({
   server: {
     handlers: {
       POST: ({ params }: { params: { sessionId: string } }) => {
-        const logs = getFilteredLogs(params.sessionId);
+        const logs = getLogsForCandidateScope(params.sessionId);
         const candidates = saveCandidates(distillSessionCandidates(params.sessionId, logs));
         return Response.json({ candidates });
       },