@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,265 +0,0 @@
-import { memo, Suspense, useState, useEffect, useMemo, useRef, type JSX } from "react";
-import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
-import { z } from "zod";
-import { Badge } from "../ui/badge";
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import { StreamingChunkSchema, type StreamingChunk } from "../../contracts";
-import { fetchJsonWithTimeout } from "../../lib/apiClient";
-import { LazyJsonViewer } from "./lazy";
-
-export type StreamingChunkSequenceProps = {
-  logId: number;
-  truncated?: boolean;
-};
-
-type ChunkState =
-  | { status: "idle" }
-  | { status: "loading" }
-  | { status: "success"; chunks: StreamingChunk[] }
-  | { status: "error"; message: string };
-
-type ChunkGroup = {
-  index: number;
-  chunks: StreamingChunk[];
-};
-
-const StreamingChunksResponseSchema = z.object({
-  chunks: z.array(StreamingChunkSchema),
-  truncated: z.boolean().optional(),
-});
-
-const CHUNK_FETCH_TIMEOUT_MS = 10_000;
-const INITIAL_VISIBLE_GROUPS = 80;
-const GROUP_PAGE_SIZE = 80;
-const INITIAL_VISIBLE_CHUNKS_PER_GROUP = 40;
-const CHUNK_PAGE_SIZE = 40;
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-export const StreamingChunkSequence = memo(function StreamingChunkSequence({
-  logId,
-  truncated,
-}: StreamingChunkSequenceProps): JSX.Element {
-  const [containerExpanded, setContainerExpanded] = useState(false);
-  const [chunkState, setChunkState] = useState<ChunkState>({ status: "idle" });
-  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
-  const [visibleGroupCount, setVisibleGroupCount] = useState(INITIAL_VISIBLE_GROUPS);
-  const [visibleChunksByGroup, setVisibleChunksByGroup] = useState<Map<number, number>>(new Map());
-  const loadedLogIdRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    setExpandedIndices(new Set());
-    setVisibleGroupCount(INITIAL_VISIBLE_GROUPS);
-    setVisibleChunksByGroup(new Map());
-    setChunkState({ status: "idle" });
-    loadedLogIdRef.current = null;
-  }, [logId]);
-
-  useEffect(() => {
-    if (!containerExpanded) return;
-    if (loadedLogIdRef.current === logId) return;
-
-    const controller = new AbortController();
-    setChunkState({ status: "loading" });
-
-    void fetchJsonWithTimeout(
-      `/api/logs/${logId}/chunks`,
-      StreamingChunksResponseSchema,
-      CHUNK_FETCH_TIMEOUT_MS,
-      { signal: controller.signal },
-      () => "Chunks not found",
-    )
-      .then((data) => {
-        loadedLogIdRef.current = logId;
-        setChunkState({ status: "success", chunks: data.chunks });
-      })
-      .catch((error: unknown) => {
-        if (error instanceof DOMException && error.name === "AbortError") return;
-        loadedLogIdRef.current = null;
-        setChunkState({
-          status: "error",
-          message: error instanceof Error ? error.message : "Chunk data unavailable",
-        });
-      });
-
-    return () => {
-      controller.abort();
-    };
-  }, [containerExpanded, logId]);
-
-  const groups = useMemo<ChunkGroup[]>(() => {
-    if (chunkState.status !== "success") return [];
-
-    const map = new Map<number, StreamingChunk[]>();
-    for (const chunk of chunkState.chunks) {
-      const existing = map.get(chunk.index);
-      if (existing) {
-        existing.push(chunk);
-      } else {
-        map.set(chunk.index, [chunk]);
-      }
-    }
-
-    return Array.from(map.entries())
-      .map(([index, chunks]) => ({ index, chunks }))
-      .sort((a, b) => a.index - b.index);
-  }, [chunkState]);
-
-  const visibleGroups = groups.slice(0, visibleGroupCount);
-  const hiddenGroupCount = Math.max(groups.length - visibleGroups.length, 0);
-
-  const toggleIndex = (index: number) => {
-    setExpandedIndices((prev) => {
-      const next = new Set(prev);
-      if (next.has(index)) {
-        next.delete(index);
-      } else {
-        next.add(index);
-      }
-      return next;
-    });
-  };
-
-  const showMoreGroups = () => {
-    setVisibleGroupCount((count) => Math.min(count + GROUP_PAGE_SIZE, groups.length));
-  };
-
-  const showMoreChunks = (group: ChunkGroup) => {
-    setVisibleChunksByGroup((prev) => {
-      const next = new Map(prev);
-      const current = next.get(group.index) ?? INITIAL_VISIBLE_CHUNKS_PER_GROUP;
-      next.set(group.index, Math.min(current + CHUNK_PAGE_SIZE, group.chunks.length));
-      return next;
-    });
-  };
-
-  function renderBody(): JSX.Element {
-    if (chunkState.status === "idle" || chunkState.status === "loading") {
-      return (
-        <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
-          <Loader2 className="size-3 animate-spin" />
-          <span>Loading chunks...</span>
-        </div>
-      );
-    }
-
-    if (chunkState.status === "error") {
-      return <div className="py-2 text-xs text-muted-foreground italic">{chunkState.message}</div>;
-    }
-
-    return (
-      <div className="p-2 space-y-1">
-        <div className="text-[10px] text-muted-foreground font-mono mb-2">
-          {groups.length} index group{groups.length !== 1 ? "s" : ""} available
-        </div>
-        {visibleGroups.map((group) => {
-          const isExpanded = expandedIndices.has(group.index);
-          const visibleChunkCount =
-            visibleChunksByGroup.get(group.index) ?? INITIAL_VISIBLE_CHUNKS_PER_GROUP;
-          const visibleChunks = group.chunks.slice(0, visibleChunkCount);
-          const hiddenChunkCount = Math.max(group.chunks.length - visibleChunks.length, 0);
-          return (
-            <div key={group.index} className="rounded border border-border bg-background">
-              <button
-                type="button"
-                className="flex items-center gap-2 w-full px-2 py-1.5 text-left hover:bg-muted/50 transition-colors cursor-pointer"
-                onClick={() => toggleIndex(group.index)}
-              >
-                {isExpanded ? (
-                  <ChevronDown className="size-3 text-muted-foreground" />
-                ) : (
-                  <ChevronRight className="size-3 text-muted-foreground" />
-                )}
-                <span className="text-[10px] text-muted-foreground font-mono">
-                  [{group.index}] {group.chunks[0]?.type ?? ""}
-                </span>
-                <span className="text-[10px] text-muted-foreground font-mono">
-                  {group.chunks.length} chunk{group.chunks.length !== 1 ? "s" : ""}
-                </span>
-              </button>
-              {isExpanded && (
-                <div className="px-2 pb-2 space-y-1">
-                  {visibleChunks.map((chunk, chunkOrdinal) => (
-                    <div
-                      key={`${chunk.index}:${chunk.timestamp}:${chunk.type}:${chunkOrdinal}`}
-                      className="rounded border border-border bg-muted/20 p-2"
-                    >
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="text-[10px] text-muted-foreground font-mono">
-                          +{chunk.timestamp}ms
-                        </span>
-                        <span className="text-[10px] text-muted-foreground font-mono">
-                          {chunk.type}
-                        </span>
-                      </div>
-                      <Suspense
-                        fallback={
-                          <div className="text-xs text-muted-foreground">Loading JSON...</div>
-                        }
-                      >
-                        <LazyJsonViewer data={chunk} defaultExpandDepth={0} showCopy />
-                      </Suspense>
-                    </div>
-                  ))}
-                  {hiddenChunkCount > 0 && (
-                    <button
-                      type="button"
-                      className="mt-1 rounded-md border border-border bg-background px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                      onClick={() => showMoreChunks(group)}
-                    >
-                      Show {Math.min(CHUNK_PAGE_SIZE, hiddenChunkCount)} more chunk
-                      {Math.min(CHUNK_PAGE_SIZE, hiddenChunkCount) !== 1 ? "s" : ""}
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          );
-        })}
-        {hiddenGroupCount > 0 && (
-          <button
-            type="button"
-            className="rounded-md border border-border bg-background px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            onClick={showMoreGroups}
-          >
-            Show {Math.min(GROUP_PAGE_SIZE, hiddenGroupCount)} more SSE group
-            {Math.min(GROUP_PAGE_SIZE, hiddenGroupCount) !== 1 ? "s" : ""}
-          </button>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1">
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-              onClick={() => setContainerExpanded((v) => !v)}
-            >
-              {containerExpanded ? (
-                <ChevronDown className="size-3" />
-              ) : (
-                <ChevronRight className="size-3" />
-              )}
-              <span>Raw SSE Events</span>
-              <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 font-mono ml-1">
-                {logId}
-                {truncated === true ? "+" : ""}
-              </Badge>
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>Server-Sent Events streaming chunks from the provider</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
-      {containerExpanded === true ? (
-        <div className="rounded-md border border-border bg-muted/20 overflow-auto max-h-64">
-          {renderBody()}
-        </div>
-      ) : null}
-    </div>
-  );
-});

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

@@ -1,165 +0,0 @@
-import { type JSX, type KeyboardEvent, type MouseEvent, useMemo } from "react";
-import { isTurnBoundary, type StopReason } from "../../lib/stopReason";
-import { cn } from "../../lib/utils";
-import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
-
-export type ThreadConnectorProps = {
-  stopReason: StopReason;
-  isPending: boolean;
-  isFirst: boolean;
-  /** True when this entry starts a new turn (first overall, or after end_turn/stop). */
-  isTurnStart: boolean;
-  /** True when this entry is the turn's only request. */
-  isOnlyEntry?: boolean;
-  /** True when this is the latest request in a turn that has not reached a real boundary. */
-  isOpenTurnTail?: boolean;
-  /** Seed for crab variant selection (0-11). */
-  crabIndex?: number;
-  /** When true the crab is clickable (collapse / expand a turn). */
-  collapsible?: boolean;
-  onToggle?: () => void;
-};
-
-function boundaryTitle(stopReason: StopReason): string {
-  switch (stopReason) {
-    case "end_turn":
-      return "End of Turn (Anthropic)";
-    case "stop":
-      return "End of Turn (OpenAI)";
-    case "length":
-      return "End of Turn (length limit)";
-    case "tool_use":
-    case null:
-      return "End of Turn";
-  }
-}
-
-function crabShellClass(interactive: boolean): string {
-  return interactive ? "cursor-pointer transition-transform hover:scale-110" : "";
-}
-
-export function ThreadConnector({
-  stopReason,
-  isPending,
-  isFirst,
-  isTurnStart,
-  isOnlyEntry = false,
-  isOpenTurnTail = false,
-  crabIndex = 0,
-  collapsible = false,
-  onToggle,
-}: ThreadConnectorProps): JSX.Element {
-  const isBoundary = isTurnBoundary(stopReason);
-  const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
-  const isRunning = isPending && !isBoundary;
-  const interactive = collapsible && onToggle !== undefined;
-  const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
-  const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
-
-  const handleCrabClick = (event: MouseEvent<HTMLSpanElement>): void => {
-    if (!interactive || onToggle === undefined) return;
-    event.stopPropagation();
-    onToggle();
-  };
-
-  const handleCrabKeyDown = (event: KeyboardEvent<HTMLSpanElement>): void => {
-    if (!interactive || onToggle === undefined) return;
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    onToggle();
-  };
-
-  return (
-    <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
-      <div className="flex justify-center h-[calc(0.75rem-8px)]">
-        {!isFirst && <div className="w-px bg-muted-foreground/18 h-full" />}
-      </div>
-
-      {isFusedBoundary ? (
-        <span
-          role={interactive ? "button" : undefined}
-          tabIndex={interactive ? 0 : undefined}
-          title="Single-request turn"
-          className={crabShellClass(interactive)}
-          onClick={handleCrabClick}
-          onKeyDown={handleCrabKeyDown}
-        >
-          <FusedCrab
-            className={cn(
-              "size-3.5 text-[#80FF00]",
-              "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]",
-            )}
-          />
-        </span>
-      ) : isBoundary ? (
-        <span
-          role={interactive ? "button" : undefined}
-          tabIndex={interactive ? 0 : undefined}
-          title={boundaryTitle(stopReason)}
-          className={crabShellClass(interactive)}
-          onClick={handleCrabClick}
-          onKeyDown={handleCrabKeyDown}
-        >
-          <Crab
-            className={cn(
-              "size-3.5 text-amber-400",
-              "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
-            )}
-          />
-        </span>
-      ) : isTurnStart ? (
-        <span
-          role={interactive ? "button" : undefined}
-          tabIndex={interactive ? 0 : undefined}
-          title="Start of turn"
-          className={crabShellClass(interactive)}
-          onClick={handleCrabClick}
-          onKeyDown={handleCrabKeyDown}
-        >
-          <Crab
-            className={cn(
-              "size-3.5 text-emerald-400",
-              "animate-crab-appear",
-              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
-            )}
-          />
-        </span>
-      ) : isOpenTurnTail ? (
-        <span
-          title={isPending ? "Current end of open turn (processing)" : "Current end of open turn"}
-        >
-          <Crab
-            className={cn(
-              "size-3.5 text-cyan-300/85",
-              isRunning ? "animate-crab-crawl" : "animate-crab-appear",
-              "drop-shadow-[0_0_4px_rgba(103,232,249,0.4)]",
-            )}
-          />
-        </span>
-      ) : isRunning ? (
-        <span title="Processing">
-          <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
-        </span>
-      ) : (
-        <span title="Request in turn">
-          <Crab className="size-3.5 text-muted-foreground/40" />
-        </span>
-      )}
-
-      <div className="flex-1 flex justify-center min-h-0">
-        {!isBoundary && !isOpenTurnTail && (
-          <div
-            className={cn(
-              "w-0.5 h-full",
-              isPending
-                ? "border-dashed bg-transparent border-l border-muted-foreground/14"
-                : "bg-muted-foreground/18",
-            )}
-          />
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,64 +0,0 @@
-import { type JSX, type MouseEvent } from "react";
-import { Wrench } from "lucide-react";
-import type { ToolTraceEvent } from "./viewerState";
-import { dispatchLogFocusRequest } from "./logFocus";
-
-type ToolTraceEventsProps = {
-  events: ToolTraceEvent[];
-};
-
-const VISIBLE_TOOL_LIMIT = 3;
-
-function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
-  const handleClick = (clickEvent: MouseEvent<HTMLButtonElement>): void => {
-    clickEvent.stopPropagation();
-    dispatchLogFocusRequest({
-      logId: event.logId,
-      tab: "response",
-      toolCallIndex: event.index,
-    });
-  };
-
-  return (
-    <button
-      type="button"
-      className="inline-flex h-5 min-w-0 max-w-[8.5rem] items-center rounded px-1.5 text-[10px] text-muted-foreground transition-colors hover:bg-background/65 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      onClick={handleClick}
-      onKeyDown={(keyEvent) => keyEvent.stopPropagation()}
-      aria-label={`Open response tool call ${event.name}`}
-      title={event.name}
-    >
-      <span className="min-w-0 truncate font-mono font-semibold">{event.name}</span>
-    </button>
-  );
-}
-
-export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
-  if (events.length === 0) return null;
-  const visibleEvents = events.slice(0, VISIBLE_TOOL_LIMIT);
-  const hiddenCount = Math.max(0, events.length - visibleEvents.length);
-  return (
-    <span
-      className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 overflow-hidden rounded-md border border-cyan-300/10 bg-cyan-300/[0.055] px-1 sm:max-w-[26rem]"
-      role="group"
-      aria-label={`${events.length} response tool ${events.length === 1 ? "call" : "calls"}`}
-      onClick={(clickEvent) => clickEvent.stopPropagation()}
-      onKeyDown={(keyEvent) => keyEvent.stopPropagation()}
-    >
-      <span className="inline-flex h-5 shrink-0 items-center gap-1 px-1 font-mono text-[9px] font-semibold uppercase text-cyan-300">
-        <Wrench className="size-3" />
-        Call {events.length}
-      </span>
-      <span className="flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden">
-        {visibleEvents.map((event) => (
-          <ToolTraceEventChip key={event.id} event={event} />
-        ))}
-        {hiddenCount > 0 && (
-          <span className="inline-flex h-5 shrink-0 items-center rounded px-1 font-mono text-[10px] font-semibold text-muted-foreground">
-            +{hiddenCount}
-          </span>
-        )}
-      </span>
-    </span>
-  );
-}