@tonyclaw/llm-inspector 1.16.3 → 1.16.5

package/src/components/ui/json-viewer-bulk.ts

@@ -0,0 +1,97 @@
+import { useCallback, useMemo, useState, useTransition } from "react";
+
+type JsonPrimitive = string | number | boolean | null;
+export type JsonValue =
+  | JsonPrimitive
+  | ReadonlyArray<JsonValue>
+  | Readonly<{ [key: string]: JsonValue }>;
+
+export type JsonExpansionPolicy = {
+  depth: number;
+};
+
+export function getJsonExpansionPolicy(_value: JsonValue): JsonExpansionPolicy {
+  return { depth: Number.POSITIVE_INFINITY };
+}
+
+export type JsonBulkExpansion = {
+  parsedData: JsonValue | null;
+  policy: JsonExpansionPolicy | null;
+  isExpanded: boolean;
+  toggle: () => void;
+  isPending: boolean;
+  bulkDepth: number;
+  bulkRevision: number;
+};
+
+type ParsedJsonText =
+  | {
+      kind: "json";
+      data: JsonValue;
+    }
+  | {
+      kind: "text";
+    };
+
+export function parseJsonText(text: string): ParsedJsonText {
+  try {
+    const parsed: unknown = JSON.parse(text);
+    return { kind: "json", data: safeJsonValue(parsed) };
+  } catch {
+    return { kind: "text" };
+  }
+}
+
+export function useJsonBulkExpansion(text: string | null): JsonBulkExpansion {
+  const parsed = useMemo(() => (text === null ? null : parseJsonText(text)), [text]);
+  const parsedData = parsed?.kind === "json" ? parsed.data : null;
+  const policy = useMemo(
+    () => (parsedData === null ? null : getJsonExpansionPolicy(parsedData)),
+    [parsedData],
+  );
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [bulkDepth, setBulkDepth] = useState(0);
+  const [bulkRevision, setBulkRevision] = useState(0);
+  const [isPending, startTransition] = useTransition();
+
+  const toggle = useCallback(() => {
+    const nextExpanded = !isExpanded;
+    const targetDepth = nextExpanded && policy !== null ? policy.depth : 0;
+    startTransition(() => {
+      setIsExpanded(nextExpanded);
+      setBulkDepth(targetDepth);
+      setBulkRevision((current) => current + 1);
+    });
+  }, [isExpanded, policy]);
+
+  return { parsedData, policy, isExpanded, toggle, isPending, bulkDepth, bulkRevision };
+}
+
+export function safeJsonValue(value: unknown): JsonValue {
+  if (value === null || value === undefined) return null;
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+      return value;
+    case "boolean":
+      return value;
+    case "object": {
+      if (Array.isArray(value)) {
+        return value.map((item: unknown) => safeJsonValue(item));
+      }
+      const result: Record<string, JsonValue> = {};
+      for (const key of Object.keys(value)) {
+        const descriptor = Object.getOwnPropertyDescriptor(value, key);
+        result[key] = safeJsonValue(descriptor?.value);
+      }
+      return result;
+    }
+    case "bigint":
+    case "symbol":
+    case "function":
+    case "undefined":
+      return String(value);
+  }
+  return null;
+}

package/src/components/ui/json-viewer.tsx

@@ -1,11 +1,11 @@
-import { Check, ChevronDown, ChevronRight, ChevronsDown, ChevronsUp, Copy } from "lucide-react";
-import { type JSX, memo, useState } from "react";
+import { Check, ChevronDown, ChevronRight, ChevronsDown, Copy } from "lucide-react";
+import { type JSX, memo, useEffect, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "../../lib/utils";
+import { Button } from "./button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
-
-type JsonPrimitive = string | number | boolean | null;
-type JsonValue = JsonPrimitive | ReadonlyArray<JsonValue> | Readonly<{ [key: string]: JsonValue }>;
+import type { JsonValue } from "./json-viewer-bulk";
+import { parseJsonText, safeJsonValue } from "./json-viewer-bulk";
 
 type DataType = "string" | "number" | "boolean" | "null" | "array" | "object";
 
@@ -33,31 +33,16 @@ function isExpandable(value: JsonValue): boolean {
   return value !== null && (Array.isArray(value) || typeof value === "object");
 }
 
-function getPropertyValue(obj: object, key: string): unknown {
-  const descriptor = Object.getOwnPropertyDescriptor(obj, key);
-  if (descriptor === undefined) return undefined;
-  return descriptor.value;
-}
-
 function getEntries(value: JsonValue): ReadonlyArray<readonly [string, JsonValue]> {
   if (Array.isArray(value)) {
-    return value.map((item, index) => [String(index), item] as const);
+    return value.map((item, index): readonly [string, JsonValue] => [String(index), item]);
   }
   if (typeof value === "object" && value !== null) {
-    return Object.keys(value).map((key) => {
-      const raw = getPropertyValue(value, key);
-      return [key, safeJsonValue(raw)] as const;
-    });
+    return Object.entries(value);
   }
   return [];
 }
 
-function getItemCount(value: JsonValue): number {
-  if (Array.isArray(value)) return value.length;
-  if (typeof value === "object" && value !== null) return Object.keys(value).length;
-  return 0;
-}
-
 const STRING_TRUNCATE_LIMIT = 120;
 
 function StringValue({ text }: { text: string }): JSX.Element {
@@ -204,18 +189,17 @@ type JsonNodeProps = {
   level: number;
   defaultExpandDepth: number;
   isArrayItem: boolean;
+  /** Full JSON-pointer-style path to this node (e.g. "/messages/3"). */
+  path: string;
+  /** When set, ancestors of this path auto-expand for one render. */
+  expandTargetPath: string | null;
+  /** Set of paths that should expose `data-anatomy-path` on their row. */
+  anatomyPaths: Set<string> | null;
 };
 
-function hasExpandableDescendant(value: JsonValue): boolean {
-  if (!isExpandable(value)) return false;
-  return getEntries(value).some(([, v]) => isExpandable(v));
-}
-
 function ExpandCollapseButton({
-  allExpanded,
   onClick,
 }: {
-  allExpanded: boolean;
   onClick: (e: React.MouseEvent) => void;
 }): JSX.Element {
   return (
@@ -223,13 +207,9 @@ function ExpandCollapseButton({
       type="button"
       onClick={onClick}
       className="opacity-0 group-hover/row:opacity-100 hover:bg-muted p-0.5 rounded transition-opacity shrink-0"
-      title={allExpanded ? "Collapse all" : "Expand all"}
+      title="Expand all descendants"
     >
-      {allExpanded ? (
-        <ChevronsUp className="size-3.5 text-muted-foreground" />
-      ) : (
-        <ChevronsDown className="size-3.5 text-muted-foreground" />
-      )}
+      <ChevronsDown className="size-3.5 text-muted-foreground" />
     </button>
   );
 }
@@ -240,34 +220,70 @@ const JsonNode = memo(function JsonNode({
   level,
   defaultExpandDepth,
   isArrayItem,
+  path,
+  expandTargetPath,
+  anatomyPaths,
 }: JsonNodeProps): JSX.Element {
-  const [expanded, setExpanded] = useState(level < defaultExpandDepth);
+  // A node is an ancestor of the target if the target starts with this
+  // node's path followed by a path separator. The root path is "" and
+  // is an ancestor of every non-empty path.
+  const isAncestorOfTarget = useMemo(() => {
+    if (expandTargetPath === null) return false;
+    if (path === "") return expandTargetPath.length > 0;
+    return expandTargetPath === path || expandTargetPath.startsWith(`${path}/`);
+  }, [expandTargetPath, path]);
+
+  const initialExpanded = level < defaultExpandDepth || (isAncestorOfTarget && isExpandable(value));
+
+  const [expanded, setExpanded] = useState(initialExpanded);
+  // Re-evaluate on every render so a freshly-changed expandTargetPath
+  // immediately auto-expands a previously-collapsed ancestor.
+  useEffect(() => {
+    if (isAncestorOfTarget && isExpandable(value) && !expanded) {
+      setExpanded(true);
+    }
+    // We deliberately only react to expandTargetPath changes here.
+  }, [expandTargetPath]);
+
   const [childResetKey, setChildResetKey] = useState(0);
   const [childDepthOverride, setChildDepthOverride] = useState<number | null>(null);
-  const [allExpanded, setAllExpanded] = useState(false);
   const expandable = isExpandable(value);
+  const fullyExpanded = childDepthOverride === Number.POSITIVE_INFINITY;
+  const entries = useMemo(() => getEntries(value), [value]);
+  const hasExpandableChild = useMemo(
+    () => entries.some(([, child]) => isExpandable(child)),
+    [entries],
+  );
 
   const dataType = classifyValue(value);
   const openBracket = dataType === "array" ? "[" : "{";
   const closeBracket = dataType === "array" ? "]" : "}";
 
-  function toggleDeepExpansion(): void {
-    if (allExpanded) {
-      setExpanded(false);
-      setChildDepthOverride(0);
-      setChildResetKey((k) => k + 1);
-      setAllExpanded(false);
+  const hasAnatomyPath = anatomyPaths !== null && anatomyPaths.has(path);
+
+  function expandAllDeep(): void {
+    setExpanded(true);
+    setChildDepthOverride(Number.POSITIVE_INFINITY);
+    setChildResetKey((k) => k + 1);
+  }
+
+  function collapseToDefault(): void {
+    setExpanded(false);
+    setChildDepthOverride(0);
+    setChildResetKey((k) => k + 1);
+  }
+
+  function handleRowToggle(): void {
+    if (fullyExpanded) {
+      collapseToDefault();
     } else {
-      setExpanded(true);
-      setChildDepthOverride(Number.POSITIVE_INFINITY);
-      setChildResetKey((k) => k + 1);
-      setAllExpanded(true);
+      setExpanded(!expanded);
     }
   }
 
   function handleExpandAll(e: React.MouseEvent): void {
     e.stopPropagation();
-    toggleDeepExpansion();
+    expandAllDeep();
   }
 
   const effectiveChildDepth = childDepthOverride ?? defaultExpandDepth;
@@ -279,29 +295,19 @@ const JsonNode = memo(function JsonNode({
           "flex items-start gap-1 py-0.5 px-1 -ml-1 rounded-sm group/row",
           expandable && "cursor-pointer hover:bg-muted/50",
         )}
-        onClick={
-          expandable
-            ? () => {
-                if (expanded) {
-                  setAllExpanded(false);
-                }
-                setExpanded(!expanded);
-              }
-            : undefined
-        }
+        data-anatomy-path={hasAnatomyPath ? path : undefined}
+        onClick={expandable ? handleRowToggle : undefined}
         onKeyDown={
           expandable
             ? (e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
-                  setExpanded(!expanded);
+                  handleRowToggle();
                 }
               }
             : undefined
         }
-        onDoubleClick={
-          expandable && hasExpandableDescendant(value) ? () => toggleDeepExpansion() : undefined
-        }
+        onDoubleClick={expandable && hasExpandableChild ? () => expandAllDeep() : undefined}
         role={expandable ? "button" : undefined}
         tabIndex={expandable ? 0 : undefined}
       >
@@ -328,7 +334,7 @@ const JsonNode = memo(function JsonNode({
             {openBracket}
             <span className="text-muted-foreground/60 text-xs">
               {" "}
-              {getItemCount(value)} {getItemCount(value) === 1 ? "item" : "items"} {closeBracket}
+              {entries.length} {entries.length === 1 ? "item" : "items"} {closeBracket}
             </span>
           </span>
         ) : (
@@ -337,15 +343,15 @@ const JsonNode = memo(function JsonNode({
           </span>
         )}
 
-        {expandable && hasExpandableDescendant(value) && (
-          <ExpandCollapseButton allExpanded={allExpanded} onClick={handleExpandAll} />
+        {expandable && hasExpandableChild && !fullyExpanded && (
+          <ExpandCollapseButton onClick={handleExpandAll} />
         )}
         <CopyButton value={value} />
       </div>
 
       {expandable && expanded && (
         <div className="pl-4" key={childResetKey}>
-          {getEntries(value).map(([key, childValue]) => (
+          {entries.map(([key, childValue]) => (
             <JsonNode
               key={key}
               name={key}
@@ -353,6 +359,9 @@ const JsonNode = memo(function JsonNode({
               level={level + 1}
               defaultExpandDepth={effectiveChildDepth}
               isArrayItem={dataType === "array"}
+              path={path === "" ? `/${key}` : `${path}/${key}`}
+              expandTargetPath={expandTargetPath}
+              anatomyPaths={anatomyPaths}
             />
           ))}
           <div className="text-muted-foreground py-0.5 px-1">{closeBracket}</div>
@@ -367,15 +376,38 @@ export type JsonViewerProps = {
   defaultExpandDepth?: number;
   className?: string;
   showCopy?: boolean;
+  bulkDepth?: number;
+  bulkRevision?: number;
+  /**
+   * Set of JSON-pointer-style paths whose row should expose a
+   * `data-anatomy-path` attribute. Used by the Anatomy view to
+   * locate rows for click-to-jump. When `null` or `undefined`,
+   * no `data-anatomy-path` attribute is emitted (zero cost).
+   */
+  anatomyPaths?: Set<string> | null;
+  /**
+   * When set, every ancestor of this path in the tree auto-expands
+   * for one render so the target row becomes visible. The hook
+   * flips this back to `null` after the scroll lands.
+   */
+  expandToPath?: string | null;
 };
 
 export function JsonViewer({
   data,
-  defaultExpandDepth = 2,
+  defaultExpandDepth = 0,
   className,
   showCopy = false,
+  bulkDepth: controlledBulkDepth,
+  bulkRevision: controlledBulkRevision,
+  anatomyPaths = null,
+  expandToPath = null,
 }: JsonViewerProps): JSX.Element {
   const expandable = isExpandable(data);
+  const entries = useMemo(() => getEntries(data), [data]);
+
+  const bulkDepth = controlledBulkDepth ?? defaultExpandDepth;
+  const bulkRevision = controlledBulkRevision ?? 0;
 
   if (!expandable) {
     return (
@@ -396,17 +428,26 @@ export function JsonViewer({
   return (
     <TooltipProvider>
       <div className={cn("font-mono text-xs leading-relaxed", className)}>
-        {showCopy && <CopyValueButton value={data} />}
-        {getEntries(data).map(([key, childValue]) => (
-          <JsonNode
-            key={key}
-            name={key}
-            value={childValue}
-            level={0}
-            defaultExpandDepth={defaultExpandDepth}
-            isArrayItem={isArray}
-          />
-        ))}
+        {showCopy && (
+          <div className="mb-2 flex items-center justify-end gap-2">
+            <CopyValueButton value={data} />
+          </div>
+        )}
+        <div key={bulkRevision}>
+          {entries.map(([key, childValue]) => (
+            <JsonNode
+              key={key}
+              name={key}
+              value={childValue}
+              level={0}
+              defaultExpandDepth={bulkDepth}
+              isArrayItem={isArray}
+              path={`/${key}`}
+              expandTargetPath={expandToPath}
+              anatomyPaths={anatomyPaths}
+            />
+          ))}
+        </div>
       </div>
     </TooltipProvider>
   );
@@ -418,54 +459,24 @@ export type JsonViewerFromStringProps = {
   className?: string;
 };
 
-export function JsonViewerFromString({
+export const JsonViewerFromString = memo(function JsonViewerFromString({
   text,
-  defaultExpandDepth = 2,
+  defaultExpandDepth = 0,
   className,
 }: JsonViewerFromStringProps): JSX.Element {
-  try {
-    const parsed: unknown = JSON.parse(text);
+  const parsed = useMemo(() => parseJsonText(text), [text]);
+
+  if (parsed.kind === "json") {
     return (
       <JsonViewer
-        data={safeJsonValue(parsed)}
+        data={parsed.data}
         defaultExpandDepth={defaultExpandDepth}
         className={className}
       />
     );
-  } catch {
-    return (
-      <pre className={cn("font-mono text-xs whitespace-pre-wrap break-words", className)}>
-        {text}
-      </pre>
-    );
   }
-}
 
-export function safeJsonValue(value: unknown): JsonValue {
-  if (value === null || value === undefined) return null;
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return value;
-    case "boolean":
-      return value;
-    case "object": {
-      if (Array.isArray(value)) {
-        return value.map((item: unknown) => safeJsonValue(item));
-      }
-      const result: Record<string, JsonValue> = {};
-      for (const key of Object.keys(value)) {
-        const descriptor = Object.getOwnPropertyDescriptor(value, key);
-        result[key] = safeJsonValue(descriptor?.value);
-      }
-      return result;
-    }
-    case "bigint":
-    case "symbol":
-    case "function":
-    case "undefined":
-      return String(value);
-  }
-  return null;
-}
+  return (
+    <pre className={cn("font-mono text-xs whitespace-pre-wrap break-words", className)}>{text}</pre>
+  );
+});

package/src/lib/utils.ts

@@ -6,9 +6,8 @@ export function cn(...inputs: ClassValue[]): string {
 }
 
 export function formatTokens(count: number): string {
-  if (count >= 1_048_576) return (count / 1_048_576).toFixed(1).replace(/\.0$/, "") + "M";
-  if (count >= 1024) return (count / 1024).toFixed(1).replace(/\.0$/, "") + "K";
-  return count.toString();
+  if (count >= 1_000_000) return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  return (count / 1000).toFixed(1).replace(/\.0$/, "") + "K";
 }
 
 export type StatusCategory = "success" | "client_error" | "server_error" | "pending";

package/src/routes/api/logs.stream.ts

@@ -11,20 +11,10 @@ export const Route = createFileRoute("/api/logs/stream")({
         const model = url.searchParams.get("model") ?? undefined;
 
         let controllerRef: ReadableStreamDefaultController<Uint8Array> | null = null;
-
-        // Send heartbeat comment every 30s to keep connection alive
-        const heartbeat = setInterval(() => {
-          if (controllerRef) {
-            try {
-              controllerRef.enqueue(new TextEncoder().encode(": heartbeat\n\n"));
-            } catch {
-              // Stream closed
-            }
-          }
-        }, 30000);
+        let cleanedUp = false;
 
         const unsubscribe = onLogUpdate((log: CapturedLog) => {
-          if (!controllerRef) return;
+          if (controllerRef === null) return;
           // Filter by session/model if specified
           if (sessionId !== undefined && log.sessionId !== sessionId) return;
           if (model !== undefined && log.model !== model) return;
@@ -32,10 +22,32 @@ export const Route = createFileRoute("/api/logs/stream")({
             const data = `data: ${JSON.stringify({ type: "update", log })}\n\n`;
             controllerRef.enqueue(new TextEncoder().encode(data));
           } catch {
-            // Stream closed
+            cleanup();
           }
         });
 
+        const cleanup = (): void => {
+          if (cleanedUp) return;
+          cleanedUp = true;
+          clearInterval(heartbeat);
+          unsubscribe();
+          controllerRef = null;
+          request.signal.removeEventListener("abort", cleanup);
+        };
+
+        // Send heartbeat comment every 30s to keep connection alive
+        const heartbeat = setInterval(() => {
+          if (controllerRef !== null) {
+            try {
+              controllerRef.enqueue(new TextEncoder().encode(": heartbeat\n\n"));
+            } catch {
+              cleanup();
+            }
+          }
+        }, 30000);
+
+        request.signal.addEventListener("abort", cleanup, { once: true });
+
         const stream = new ReadableStream<Uint8Array>({
           start(controller) {
             controllerRef = controller;
@@ -45,9 +57,7 @@ export const Route = createFileRoute("/api/logs/stream")({
             controller.enqueue(new TextEncoder().encode(initData));
           },
           cancel() {
-            clearInterval(heartbeat);
-            unsubscribe();
-            controllerRef = null;
+            cleanup();
           },
         });