@tonyclaw/agent-inspector 3.1.32 → 4.0.2

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

@@ -1,383 +0,0 @@
-import {
-  type CSSProperties,
-  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 "../../contracts";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
-import { getCrabVariant } from "../ui/crab-variants";
-import type { CacheTrendEntry } from "./cacheTrend";
-import { LogEntry } from "./LogEntry";
-import {
-  dispatchLogFocusRequest,
-  LOG_FOCUS_REQUEST_EVENT,
-  readLogFocusRequest,
-  type LogFocusRequest,
-} from "./logFocus";
-import { ThreadConnector } from "./ThreadConnector";
-import { extractToolTraceEvents, isTurnCollapsible, type TurnEntry } from "./viewerState";
-
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
-export type PendingTurnFocusRequest = LogFocusRequest & {
-  nonce: number;
-};
-
-export type TurnGroupProps = {
-  entries: TurnEntry[];
-  viewMode: "simple" | "full";
-  strip: boolean;
-  slowResponseThresholdSeconds: number;
-  cacheTrends?: Map<number, CacheTrendEntry>;
-  onCompareWithPrevious: (log: CapturedLog) => void;
-  comparisonPredecessors: Map<number, CapturedLog>;
-  turnIndex?: number;
-  timeDisplayFormat: TimeDisplayFormat;
-  pendingFocusRequest?: PendingTurnFocusRequest;
-  /** Show client PID/project metadata on each log row. */
-  showLogClientMetadata?: boolean;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-export const TurnGroup = memo(function TurnGroup({
-  entries,
-  viewMode,
-  strip,
-  slowResponseThresholdSeconds,
-  cacheTrends,
-  onCompareWithPrevious,
-  comparisonPredecessors,
-  turnIndex = 0,
-  timeDisplayFormat,
-  pendingFocusRequest,
-  showLogClientMetadata = true,
-}: TurnGroupProps): JSX.Element {
-  const lastIdx = entries.length - 1;
-  const lastStop = entries[lastIdx]?.stopReason ?? null;
-  const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
-  const isPending = entries[lastIdx]?.log.responseStatus === null;
-  const isSingleLog = entries.length === 1;
-  const collapsible = isTurnCollapsible(entries.length);
-  const [collapsed, setCollapsed] = useState(false);
-
-  // Auto-collapse when the turn finishes (transitions from incomplete to complete)
-  const prevCompleteRef = useRef(false);
-  useEffect(() => {
-    if (!collapsible) {
-      setCollapsed(false);
-    } else if (isComplete && !prevCompleteRef.current) {
-      setCollapsed(true);
-    }
-    prevCompleteRef.current = isComplete;
-  }, [collapsible, isComplete]);
-
-  useEffect(() => {
-    const handleLogFocusRequest = (event: Event): void => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (!entries.some((entry) => entry.log.id === request.logId)) return;
-      if (collapsible) setCollapsed(false);
-    };
-
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [collapsible, entries]);
-
-  useEffect(() => {
-    if (pendingFocusRequest === undefined) return undefined;
-    if (!entries.some((entry) => entry.log.id === pendingFocusRequest.logId)) return undefined;
-    if (collapsible) setCollapsed(false);
-
-    const timer = window.setTimeout(() => {
-      dispatchLogFocusRequest({
-        logId: pendingFocusRequest.logId,
-        tab: pendingFocusRequest.tab,
-        source: "virtualizer",
-      });
-    }, 0);
-
-    return () => window.clearTimeout(timer);
-  }, [collapsible, entries, pendingFocusRequest]);
-
-  const toggleCollapse = useCallback(() => {
-    if (collapsible) setCollapsed((prev) => !prev);
-  }, [collapsible]);
-
-  // Aggregate totals for collapsed summary
-  const aggregate = useMemo(() => {
-    let totalInput = 0;
-    let totalOutput = 0;
-    let maxElapsed: number | null = null;
-    let hasTokens = false;
-    for (const e of entries) {
-      if (e.log.inputTokens !== null) {
-        totalInput += e.log.inputTokens;
-        hasTokens = true;
-      }
-      if (e.log.outputTokens !== null) {
-        totalOutput += e.log.outputTokens;
-        hasTokens = true;
-      }
-      if (e.log.elapsedMs !== null) {
-        maxElapsed = maxElapsed === null ? e.log.elapsedMs : Math.max(maxElapsed, e.log.elapsedMs);
-      }
-    }
-    return {
-      totalInput,
-      totalOutput,
-      hasTokens,
-      maxElapsed,
-    };
-  }, [entries, lastIdx]);
-
-  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.008]" : "bg-cyan-300/[0.008]";
-  const aggregateIsSlow =
-    aggregate.maxElapsed !== null &&
-    slowResponseThresholdSeconds > 0 &&
-    aggregate.maxElapsed > slowResponseThresholdSeconds * 1000;
-  const toolEventsByLogId = useMemo(() => {
-    const events = new Map<number, ReturnType<typeof extractToolTraceEvents>>();
-    for (const entry of entries) {
-      const extracted = extractToolTraceEvents(entry.log);
-      if (extracted.length > 0) events.set(entry.log.id, extracted);
-    }
-    return events;
-  }, [entries]);
-
-  // ResizeObserver re-renders connectors when any LogEntry height changes
-  const [layoutVersion, setLayoutVersion] = useState(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    let raf = 0;
-    const ro = new ResizeObserver(() => {
-      window.cancelAnimationFrame(raf);
-      raf = window.requestAnimationFrame(() => setLayoutVersion((v) => v + 1));
-    });
-    ro.observe(el);
-    return () => {
-      ro.disconnect();
-      window.cancelAnimationFrame(raf);
-    };
-  }, []);
-
-  const firstLogId = entries[0]?.log.id ?? turnIndex;
-  const turnLabel = `Turn ${String(turnIndex + 1)}`;
-  const CollapsedCrab = useMemo(() => getCrabVariant(firstLogId % 12), [firstLogId]);
-  const containmentStyle = useMemo<CSSProperties>(
-    () => ({
-      contentVisibility: "auto",
-      containIntrinsicSize: collapsed ? "48px" : "160px",
-    }),
-    [collapsed],
-  );
-
-  return (
-    <div
-      ref={containerRef}
-      style={containmentStyle}
-      tabIndex={collapsed ? undefined : 0}
-      role={collapsed ? undefined : "group"}
-      aria-label={collapsed ? undefined : turnLabel}
-      data-nav-id={collapsed ? undefined : `turn-${String(firstLogId)}`}
-      className={cn(
-        "rounded-[8px] transition-[background-color,box-shadow]",
-        isPending ? "bg-amber-300/[0.018] shadow-[0_0_0_1px_rgba(252,211,77,0.035)]" : "",
-        !collapsed &&
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
-      )}
-    >
-      {collapsed ? (
-        <div
-          data-nav-id={`turn-collapsed-${String(firstLogId)}`}
-          data-nav-action="expand"
-          role="button"
-          tabIndex={0}
-          className="flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg"
-          onClick={toggleCollapse}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              toggleCollapse();
-            }
-          }}
-        >
-          <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
-            <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <CollapsedCrab
-              className={cn(
-                "size-3.5",
-                isPending
-                  ? "animate-crab-crawl text-amber-300/80"
-                  : "animate-crab-appear text-emerald-400",
-                isPending
-                  ? "drop-shadow-[0_0_4px_rgba(252,211,77,0.42)]"
-                  : "drop-shadow-[0_0_4px_rgba(52,211,153,0.45)]",
-              )}
-            />
-            <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-px bg-muted-foreground/14 h-full" />
-            </div>
-            {isComplete ? (
-              <CollapsedCrab
-                className={cn(
-                  "size-3.5 animate-crab-settle text-amber-400",
-                  "drop-shadow-[0_0_4px_rgba(251,191,36,0.45)]",
-                )}
-              />
-            ) : (
-              <span title="Current end of open turn" aria-label="Current end of open turn">
-                <CollapsedCrab
-                  className={cn(
-                    "size-3.5 text-cyan-300/85",
-                    isPending ? "animate-crab-crawl" : "animate-crab-appear",
-                    "drop-shadow-[0_0_4px_rgba(103,232,249,0.4)]",
-                  )}
-                />
-              </span>
-            )}
-          </div>
-
-          {/* Summary content - hidden for single-log turns. */}
-          {entries.length > 1 && (
-            <div
-              className={cn(
-                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs",
-                "bg-card/80 transition-colors hover:bg-card",
-                bgClass,
-              )}
-            >
-              <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70">
-                {turnLabel}
-              </span>
-
-              {/* ID range */}
-              <span
-                className="text-blue-300/85 font-mono font-semibold tabular-nums shrink-0"
-                title={`Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
-                  entries[lastIdx]?.log.id ?? "?",
-                )}`}
-              >
-                #{entries[0]?.sessionLogNumber ?? "?"} ~ #
-                {entries[lastIdx]?.sessionLogNumber ?? "?"}
-              </span>
-
-              {/* Request count */}
-              <span className="text-muted-foreground shrink-0">
-                {entries.length} request{entries.length > 1 ? "s" : ""}
-              </span>
-
-              {/* Elapsed - slowest single request in the turn (not the sum) */}
-              {aggregate.maxElapsed !== null && (
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span
-                        className={cn(
-                          "flex items-center gap-1 shrink-0",
-                          aggregateIsSlow ? "text-amber-400" : "text-muted-foreground",
-                        )}
-                      >
-                        <Clock className="size-3" />
-                        <span className="font-mono tabular-nums">
-                          {formatElapsed(aggregate.maxElapsed)}
-                        </span>
-                        {aggregateIsSlow && (
-                          <AlertTriangle className="size-3" aria-label="Slow response" />
-                        )}
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {aggregateIsSlow
-                        ? `Slow response: ${formatElapsed(
-                            aggregate.maxElapsed,
-                          )} exceeds ${formatElapsed(slowResponseThresholdSeconds * 1000)}`
-                        : "Slowest request in this turn"}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-
-              {/* Tokens */}
-              {aggregate.hasTokens && (
-                <span className="flex items-center gap-1 shrink-0">
-                  <Zap className="size-3 text-muted-foreground" />
-                  <span className="font-mono tabular-nums">
-                    <span className="text-blue-400">IN {formatTokens(aggregate.totalInput)}</span>
-                    {" / "}
-                    <span className="text-amber-400">
-                      OUT {formatTokens(aggregate.totalOutput)}
-                    </span>
-                  </span>
-                </span>
-              )}
-
-              {/* Spacer */}
-              <span className="flex-1 min-w-0" />
-
-              <span
-                className="bg-white/[0.045] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-text-strong"
-                aria-hidden="true"
-              >
-                <ChevronRight className="size-4 shrink-0" />
-              </span>
-            </div>
-          )}
-        </div>
-      ) : (
-        /* ---- Expanded: full entries ---- */
-        entries.map((entry, visibleIdx) => {
-          const { log, stopReason: reason } = entry;
-          const isTurnStart = visibleIdx === 0;
-
-          return (
-            <div key={log.id} className="flex items-stretch">
-              <ThreadConnector
-                stopReason={reason}
-                isPending={log.responseStatus === null}
-                isFirst={visibleIdx === 0}
-                isTurnStart={isTurnStart}
-                isOnlyEntry={isSingleLog}
-                isOpenTurnTail={visibleIdx === lastIdx && !isComplete}
-                crabIndex={log.id % 12}
-                collapsible={collapsible && isTurnStart}
-                onToggle={toggleCollapse}
-              />
-              <div className={cn("flex-1 min-w-0 mb-0.5 rounded-[8px]", bgClass)}>
-                <LogEntry
-                  log={log}
-                  displayNumber={entry.sessionLogNumber}
-                  viewMode={viewMode}
-                  strip={strip}
-                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-                  timeDisplayFormat={timeDisplayFormat}
-                  cacheTrend={cacheTrends?.get(log.id) ?? null}
-                  showClientMetadata={showLogClientMetadata}
-                  toolEvents={toolEventsByLogId.get(log.id)}
-                  onCompareWithPrevious={
-                    comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
-                  }
-                />
-              </div>
-            </div>
-          );
-        })
-      )}
-    </div>
-  );
-});

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

@@ -1,156 +0,0 @@
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
-import { type JSX, useEffect, useMemo, useState } from "react";
-import type { CapturedLog } from "../../contracts";
-import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
-import type { CacheTrendEntry } from "./cacheTrend";
-import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
-import { TurnGroup } from "./TurnGroup";
-import type { PendingTurnFocusRequest } from "./TurnGroup";
-import type { TurnGroupData } from "./viewerState";
-
-const VIRTUALIZE_TURN_THRESHOLD = 24;
-const ESTIMATED_TURN_HEIGHT = 132;
-const VIRTUAL_OVERSCAN = 8;
-
-type TurnGroupListProps = {
-  turnGroups: TurnGroupData[];
-  viewMode: "simple" | "full";
-  strip: boolean;
-  slowResponseThresholdSeconds: number;
-  cacheTrends?: Map<number, CacheTrendEntry>;
-  onCompareWithPrevious: (log: CapturedLog) => void;
-  comparisonPredecessors: Map<number, CapturedLog>;
-  timeDisplayFormat: TimeDisplayFormat;
-  /** Show client PID/project metadata on each log row. */
-  showLogClientMetadata?: boolean;
-};
-
-type PendingVirtualFocusRequest = PendingTurnFocusRequest & {
-  turnIndex: number;
-};
-
-export function shouldVirtualizeTurnGroups(turnCount: number): boolean {
-  return turnCount > VIRTUALIZE_TURN_THRESHOLD;
-}
-
-export function findTurnGroupIndexForLog(
-  turnGroups: readonly TurnGroupData[],
-  logId: number,
-): number | null {
-  for (let index = 0; index < turnGroups.length; index++) {
-    const group = turnGroups[index];
-    if (group === undefined) continue;
-    if (group.entries.some((entry) => entry.log.id === logId)) return index;
-  }
-  return null;
-}
-
-function buildLogTurnIndex(turnGroups: readonly TurnGroupData[]): Map<number, number> {
-  const result = new Map<number, number>();
-  for (let index = 0; index < turnGroups.length; index++) {
-    const group = turnGroups[index];
-    if (group === undefined) continue;
-    for (const entry of group.entries) {
-      result.set(entry.log.id, index);
-    }
-  }
-  return result;
-}
-
-function renderTurnGroup(
-  turnGroup: TurnGroupData,
-  props: TurnGroupListProps,
-  pendingFocusRequest?: PendingTurnFocusRequest,
-): JSX.Element {
-  return (
-    <TurnGroup
-      key={turnGroup.turnIndex}
-      entries={turnGroup.entries}
-      viewMode={props.viewMode}
-      strip={props.strip}
-      slowResponseThresholdSeconds={props.slowResponseThresholdSeconds}
-      timeDisplayFormat={props.timeDisplayFormat}
-      cacheTrends={props.cacheTrends}
-      onCompareWithPrevious={props.onCompareWithPrevious}
-      comparisonPredecessors={props.comparisonPredecessors}
-      turnIndex={turnGroup.turnIndex}
-      pendingFocusRequest={pendingFocusRequest}
-      showLogClientMetadata={props.showLogClientMetadata}
-    />
-  );
-}
-
-export function TurnGroupList(props: TurnGroupListProps): JSX.Element {
-  if (!shouldVirtualizeTurnGroups(props.turnGroups.length)) {
-    return <>{props.turnGroups.map((turnGroup) => renderTurnGroup(turnGroup, props))}</>;
-  }
-
-  return <VirtualizedTurnGroupList {...props} />;
-}
-
-function VirtualizedTurnGroupList(props: TurnGroupListProps): JSX.Element {
-  const { turnGroups } = props;
-  const [pendingFocusRequest, setPendingFocusRequest] = useState<PendingVirtualFocusRequest | null>(
-    null,
-  );
-
-  const virtualizer = useWindowVirtualizer({
-    count: turnGroups.length,
-    estimateSize: () => ESTIMATED_TURN_HEIGHT,
-    overscan: VIRTUAL_OVERSCAN,
-    getItemKey: (index) => turnGroups[index]?.turnIndex ?? index,
-  });
-
-  const turnIndexByLogId = useMemo(() => buildLogTurnIndex(turnGroups), [turnGroups]);
-
-  useEffect(() => {
-    const handleLogFocusRequest = (event: Event): void => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (request.source === "virtualizer") return;
-
-      const turnIndex = turnIndexByLogId.get(request.logId);
-      if (turnIndex === undefined) return;
-      virtualizer.scrollToIndex(turnIndex, { align: "center" });
-      setPendingFocusRequest((previous) => ({
-        ...request,
-        turnIndex,
-        nonce: previous === null ? 1 : previous.nonce + 1,
-      }));
-    };
-
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [turnIndexByLogId, virtualizer]);
-
-  return (
-    <div
-      className="relative w-full"
-      style={{ height: `${virtualizer.getTotalSize()}px` }}
-      data-virtualized-turn-list="true"
-    >
-      {virtualizer.getVirtualItems().map((virtualItem) => {
-        const turnGroup = turnGroups[virtualItem.index];
-        if (turnGroup === undefined) return null;
-        const itemFocusRequest =
-          pendingFocusRequest !== null && pendingFocusRequest.turnIndex === virtualItem.index
-            ? pendingFocusRequest
-            : undefined;
-
-        return (
-          <div
-            key={virtualItem.key}
-            data-index={virtualItem.index}
-            ref={virtualizer.measureElement}
-            className="absolute left-0 top-0 w-full"
-            style={{ transform: `translateY(${virtualItem.start}px)` }}
-          >
-            {renderTurnGroup(turnGroup, props, itemFocusRequest)}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,8 +0,0 @@
-export function preferredScrollBehavior(reducedMotion: boolean): ScrollBehavior {
-  return reducedMotion ? "auto" : "smooth";
-}
-
-export function browserPrefersReducedMotion(): boolean {
-  if (typeof window === "undefined") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}