@tonyclaw/agent-inspector 2.0.0

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

@@ -0,0 +1,136 @@
+import { type JSX, useMemo } from "react";
+import { cn } from "../../lib/utils";
+import type { StopReason } from "../../lib/stopReason";
+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;
+  /** Seed for crab variant selection (0-11). */
+  crabIndex?: number;
+  /** When true the crab is clickable (collapse / expand a turn). */
+  collapsible?: boolean;
+  onToggle?: () => void;
+};
+
+/**
+ * Vertical timeline connector.  Top spacer uses a calc() that
+ * mixes rem (py-1 + half-line) and px (border) so the crab
+ * centre-line matches the LogEntry `#id` index regardless of the
+ * root font-size.  The bottom spacer is flex-1 so the outgoing
+ * line adapts to whatever height the LogEntry occupies.
+ */
+export function ThreadConnector({
+  stopReason,
+  isPending,
+  isFirst,
+  isTurnStart,
+  isOnlyEntry = false,
+  crabIndex = 0,
+  collapsible = false,
+  onToggle,
+}: ThreadConnectorProps): JSX.Element {
+  const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
+  const isRunning = isPending && !isBoundary;
+  const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
+  const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
+
+  const interactiveProps =
+    collapsible && onToggle
+      ? ({
+          role: "button" as const,
+          tabIndex: 0,
+          className: "cursor-pointer",
+          onClick: (e: React.MouseEvent) => {
+            e.stopPropagation();
+            onToggle();
+          },
+          onKeyDown: (e: React.KeyboardEvent) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onToggle();
+            }
+          },
+        } as const)
+      : ({} as const);
+
+  return (
+    <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
+      {/* Top spacer — crab centre must land on the LogEntry index midline.
+       *  Index midline from container top = border(1px) + py-1(0.25rem) + ½line(0.5rem)
+       *  = 1px + 0.75rem.  Crab centre = pt(2px) + spacer + 7px(half crab).
+       *  ∴ spacer = 0.75rem - 8px.  (at 16px root: 12-8=4px; 2+4+7=13px). */}
+      <div className="flex justify-center h-[calc(0.75rem-8px)]">
+        {!isFirst && <div className="w-0.5 bg-muted-foreground/30 h-full" />}
+      </div>
+
+      {/* Crab — pinned to the fixed offset above so it never drifts
+       *  when the LogEntry expands / collapses.  Clickable when the
+       *  turn is collapsible (replaces the old chevron toggle). */}
+      {isFusedBoundary ? (
+        <span title="Start and end of turn">
+          <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
+          title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
+          {...interactiveProps}
+        >
+          <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 title="Start of turn" {...interactiveProps}>
+          <Crab
+            className={cn(
+              "size-3.5 text-emerald-400",
+              "animate-crab-appear",
+              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+            )}
+          />
+        </span>
+      ) : isRunning ? (
+        <span title="Processing…">
+          <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
+        </span>
+      ) : (
+        <span>
+          <Crab className="size-3.5 text-muted-foreground/40" />
+        </span>
+      )}
+
+      {/* Bottom spacer — flex-1 fills whatever height the LogEntry
+       *  consumes (header + expanded content).  Turn boundaries have
+       *  no outgoing line. */}
+      <div className="flex-1 flex justify-center min-h-0">
+        {!isBoundary && (
+          <div
+            className={cn(
+              "w-0.5 h-full",
+              isPending
+                ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
+                : "bg-muted-foreground/30",
+            )}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,337 @@
+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 { cn, formatTokens } from "../../lib/utils";
+import type { CapturedLog } from "../../proxy/schemas";
+import { getCrabVariant } from "../ui/crab-variants";
+import { ProviderLogo, detectProvider, type Provider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import type { CacheTrendEntry } from "./cacheTrend";
+import { LogEntry } from "./LogEntry";
+import { ThreadConnector } from "./ThreadConnector";
+import { isTurnCollapsible, type TurnEntry } from "./viewerState";
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+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;
+};
+
+export const TurnGroup = memo(function TurnGroup({
+  entries,
+  viewMode,
+  strip,
+  slowResponseThresholdSeconds,
+  cacheTrends,
+  onCompareWithPrevious,
+  comparisonPredecessors,
+  turnIndex = 0,
+}: 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, isComplete, isPending);
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Auto-collapse when the turn finishes (transitions from incomplete → complete)
+  const prevCompleteRef = useRef(false);
+  useEffect(() => {
+    if (!collapsible) {
+      setCollapsed(false);
+    } else if (isComplete && !prevCompleteRef.current) {
+      setCollapsed(true);
+    }
+    prevCompleteRef.current = isComplete;
+  }, [collapsible, isComplete]);
+
+  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]);
+
+  // Unique providers across all entries (for collapsed model logos)
+  const uniqueProviders = useMemo(() => {
+    const seen = new Set<Provider>();
+    for (const e of entries) {
+      const p = detectProvider(e.log.model);
+      if (p !== "unknown") seen.add(p);
+    }
+    return [...seen];
+  }, [entries]);
+
+  // Crab variant creators for the dual-crab collapsed layout
+  const StartCrab = useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
+  const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
+
+  const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+  const aggregateIsSlow =
+    aggregate.maxElapsed !== null &&
+    slowResponseThresholdSeconds > 0 &&
+    aggregate.maxElapsed > slowResponseThresholdSeconds * 1000;
+
+  // ResizeObserver → re-render 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);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
+    >
+      {collapsed ? (
+        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
+        <div
+          data-nav-id={`turn-collapsed-${entries[0]?.log.id ?? turnIndex}`}
+          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();
+            }
+          }}
+        >
+          {/* Turn number */}
+          <div className="w-5 shrink-0 flex items-start pt-1.5">
+            <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
+              {turnIndex + 1}
+            </span>
+          </div>
+
+          {/* Dual-crab connector for collapsed multi-request turns. */}
+          <div className="w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5">
+            <div className="flex justify-center h-[calc(0.75rem-8px)]" />
+            <span
+              role="button"
+              tabIndex={0}
+              title="Start of turn — click to expand"
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCollapse();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleCollapse();
+                }
+              }}
+            >
+              <StartCrab
+                className={cn(
+                  "size-3.5 text-emerald-400",
+                  "animate-crab-appear drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+                )}
+              />
+            </span>
+
+            <div className="flex-1 flex justify-center min-h-0">
+              <div className="w-0.5 bg-muted-foreground/30 h-full" />
+            </div>
+
+            <span
+              role="button"
+              tabIndex={0}
+              title="End of Turn — click to expand"
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCollapse();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleCollapse();
+                }
+              }}
+            >
+              <EndCrab
+                className={cn(
+                  "size-3.5 text-amber-400",
+                  "animate-crab-settle drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
+                )}
+              />
+            </span>
+          </div>
+
+          {/* Summary content — hidden for single-log turns. */}
+          {entries.length > 1 && (
+            <div
+              className={cn(
+                "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs",
+                bgClass,
+              )}
+            >
+              {/* ID range */}
+              <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
+                #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
+              </span>
+
+              {/* Request count */}
+              <span className="text-muted-foreground shrink-0">
+                {entries.length} request{entries.length > 1 ? "s" : ""}
+              </span>
+
+              {/* Model logos — one per unique provider */}
+              {uniqueProviders.length > 0 && (
+                <span className="flex items-center gap-0.5 shrink-0">
+                  {uniqueProviders.map((p) => (
+                    <ProviderLogo key={p} provider={p} className="size-4" />
+                  ))}
+                </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" />
+
+              {/* Expand chevron */}
+              <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+            </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">
+              {isTurnStart ? (
+                <div className="w-5 shrink-0 flex items-start pt-1.5">
+                  <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
+                    {turnIndex + 1}
+                  </span>
+                </div>
+              ) : (
+                <div className="w-5 shrink-0" />
+              )}
+              <ThreadConnector
+                stopReason={reason}
+                isPending={log.responseStatus === null}
+                isFirst={visibleIdx === 0}
+                isTurnStart={isTurnStart}
+                isOnlyEntry={isSingleLog}
+                crabIndex={log.id % 12}
+                collapsible={collapsible && isTurnStart}
+                onToggle={toggleCollapse}
+              />
+              <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>
+                <LogEntry
+                  log={log}
+                  viewMode={viewMode}
+                  strip={strip}
+                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+                  cacheTrend={cacheTrends?.get(log.id) ?? null}
+                  onCompareWithPrevious={
+                    comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
+                  }
+                />
+              </div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,98 @@
+import { Info } from "lucide-react";
+import { type JSX, useMemo } from "react";
+import { cn, formatTokens } from "../../../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import { SegmentBar } from "./SegmentBar";
+import type { AnatomySegment } from "./types";
+
+export type RequestAnatomyProps = {
+  /** Parsed request body, or `null` if it cannot be parsed. */
+  parsed: unknown | null;
+  /** Server-reported input token count, or `null` if unknown. */
+  inputTokens: number | null;
+  /** Optional callback fired when the user activates a segment. */
+  onSegmentActivate?: (segment: AnatomySegment) => void;
+  /** Pre-computed segments; if provided, `parsed` is ignored. */
+  segments?: AnatomySegment[] | null;
+};
+
+const DIVERGENCE_AMBER_THRESHOLD = 0.25;
+
+/**
+ * Render the request anatomy view: a one-line summary plus the
+ * stacked segment bar. Returns `null` when the request cannot be
+ * parsed or the segment list is empty.
+ */
+export function RequestAnatomy({
+  parsed,
+  inputTokens,
+  onSegmentActivate,
+  segments: providedSegments,
+}: RequestAnatomyProps): JSX.Element | null {
+  // Caller is expected to pre-compute segments in production (see
+  // LogEntry). When called standalone, fall back to deriving from
+  // `parsed` directly using the unknown adapter is not appropriate —
+  // the caller is responsible for choosing the right adapter.
+  const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
+  const total = useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
+
+  // Show divergence warning when both estimate and server numbers exist.
+  const showDivergenceWarning = useMemo(() => {
+    if (segments === null || segments === undefined) return false;
+    if (inputTokens === null) return false;
+    if (total === 0) return false;
+    const ratio = Math.abs(inputTokens - total) / Math.max(inputTokens, total);
+    return ratio >= DIVERGENCE_AMBER_THRESHOLD;
+  }, [inputTokens, segments, total]);
+
+  const summaryColorClass = useMemo(() => {
+    if (inputTokens === null) return "text-muted-foreground";
+    if (showDivergenceWarning) return "text-amber-400";
+    return "text-muted-foreground";
+  }, [inputTokens, showDivergenceWarning]);
+
+  if (segments === null || segments === undefined) {
+    return null;
+  }
+  if (segments.length === 0) {
+    return null;
+  }
+  if (parsed === null && providedSegments === undefined) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <div className="px-4 py-3 space-y-2" data-testid="anatomy-root">
+        <div className="flex items-center gap-2 text-xs">
+          <span className="font-mono tabular-nums text-foreground">
+            ~{formatTokens(total)} tokens
+          </span>
+          {inputTokens !== null && (
+            <span className={cn("font-mono tabular-nums", summaryColorClass)}>
+              (server: {formatTokens(inputTokens)})
+            </span>
+          )}
+          {showDivergenceWarning && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="inline-flex items-center text-amber-400 hover:text-amber-300"
+                  aria-label="Token estimate diverges from server"
+                >
+                  <Info className="size-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs text-xs">
+                Bar uses a token estimate heuristic (~4 ASCII chars / token, ~1 CJK / emoji char per
+                token). The server&apos;s reported value is the source of truth for cost.
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+        <SegmentBar segments={segments} totalTokens={total} onActivate={onSegmentActivate} />
+      </div>
+    </TooltipProvider>
+  );
+}