@tonyclaw/agent-inspector 2.0.0

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

@@ -0,0 +1,196 @@
+import { type JSX, memo, useMemo } from "react";
+import { cn, formatTokens } from "../../../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import type { AnatomyRole, AnatomySegment } from "./types";
+
+const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
+  system: "bg-sky-500/70",
+  user: "bg-emerald-500/70",
+  assistant: "bg-violet-500/70",
+  tool: "bg-amber-500/70",
+  tools: "bg-slate-500/70",
+};
+
+const ROLE_FOCUS_RING: Record<AnatomyRole, string> = {
+  system: "focus-visible:ring-sky-300",
+  user: "focus-visible:ring-emerald-300",
+  assistant: "focus-visible:ring-violet-300",
+  tool: "focus-visible:ring-amber-300",
+  tools: "focus-visible:ring-slate-300",
+};
+
+const MAX_VISIBLE_SEGMENTS = 12;
+const MIN_SEGMENT_PERCENT = 1;
+
+const TOOLTIP_PREVIEW_LIMIT = 80;
+const LABEL_TRUNCATE_LIMIT = 24;
+
+function truncateLabel(label: string): string {
+  if (label.length <= LABEL_TRUNCATE_LIMIT) return label;
+  return `${label.slice(0, LABEL_TRUNCATE_LIMIT - 1)}…`;
+}
+
+function truncatePreview(text: string): string {
+  const singleLine = text.replace(/\s+/g, " ").trim();
+  if (singleLine.length <= TOOLTIP_PREVIEW_LIMIT) return singleLine;
+  return `${singleLine.slice(0, TOOLTIP_PREVIEW_LIMIT)}…`;
+}
+
+export type SegmentBarProps = {
+  segments: ReadonlyArray<AnatomySegment>;
+  totalTokens: number;
+  onActivate?: (segment: AnatomySegment) => void;
+};
+
+/**
+ * Render a horizontal stacked bar showing the relative size of each
+ * request segment, with role-based color, per-segment labels, and
+ * an overflow pill that aggregates any segments beyond the visible
+ * cap. Click or keyboard activation (Enter / Space) calls `onActivate`.
+ */
+export const SegmentBar = memo(function SegmentBar({
+  segments,
+  totalTokens,
+  onActivate,
+}: SegmentBarProps): JSX.Element {
+  const total = useMemo(() => {
+    if (totalTokens > 0) return totalTokens;
+    return segments.reduce((sum, s) => sum + s.size, 0);
+  }, [segments, totalTokens]);
+
+  const visibleSegments = segments.slice(0, MAX_VISIBLE_SEGMENTS);
+  const overflowSegments = segments.slice(MAX_VISIBLE_SEGMENTS);
+  const overflowSize = overflowSegments.reduce((sum, s) => sum + s.size, 0);
+  const overflowCount = overflowSegments.length;
+  const overflowStartIndex = MAX_VISIBLE_SEGMENTS;
+  const overflowEndIndex = overflowStartIndex + overflowCount - 1;
+  const hasOverflow = overflowCount > 0;
+
+  const visibleTotal = useMemo(
+    () => visibleSegments.reduce((sum, s) => sum + s.size, 0),
+    [visibleSegments],
+  );
+
+  const ariaLabel = useMemo(
+    () =>
+      `Request anatomy: ~${formatTokens(total)} tokens across ${segments.length} segment${segments.length === 1 ? "" : "s"}`,
+    [segments.length, total],
+  );
+
+  if (segments.length === 0 || total <= 0) {
+    return <div role="img" aria-label={ariaLabel} className="h-6" />;
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <div role="img" aria-label={ariaLabel} className="flex flex-col gap-1.5">
+        <div
+          className="relative flex h-6 w-full overflow-hidden rounded border border-border/40 bg-muted/30"
+          data-testid="anatomy-segment-bar"
+        >
+          {visibleSegments.map((segment, index) => {
+            const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
+            const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+            return (
+              <Tooltip key={`${segment.path}-${index}`}>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => onActivate?.(segment)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onActivate?.(segment);
+                      }
+                    }}
+                    data-anatomy-path={segment.path}
+                    aria-label={`${segment.label}, ~${formatTokens(segment.size)} tokens`}
+                    className={cn(
+                      "h-full border-r border-background/80 last:border-r-0",
+                      "opacity-90 hover:opacity-100 focus:opacity-100",
+                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                      ROLE_COLOR_CLASSES[segment.role],
+                      ROLE_FOCUS_RING[segment.role],
+                    )}
+                    style={{ width: `${percent}%` }}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-sm text-xs p-2 space-y-0.5">
+                  <div className="font-semibold">
+                    {segment.label} · ~{formatTokens(segment.size)} tokens
+                  </div>
+                  <div className="text-muted-foreground">
+                    {segment.characters.toLocaleString()} chars
+                  </div>
+                  {segment.text.length > 0 && (
+                    <div className="text-muted-foreground/90 break-words whitespace-pre-wrap">
+                      {truncatePreview(segment.text)}
+                    </div>
+                  )}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+          {hasOverflow && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  role="img"
+                  aria-label={`${overflowCount} additional segments`}
+                  className="flex h-full items-center justify-center bg-muted-foreground/30 px-1.5 text-[10px] font-mono text-background"
+                  style={{
+                    width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%`,
+                  }}
+                >
+                  … +{overflowCount}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {overflowCount} more segment{overflowCount === 1 ? "" : "s"} (indices{" "}
+                {overflowStartIndex}–{overflowEndIndex})
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="flex w-full gap-1 text-[10px] text-muted-foreground">
+          {visibleSegments.map((segment, index) => {
+            const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
+            const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+            return (
+              <div
+                key={`label-${segment.path}-${index}`}
+                className="flex flex-col gap-0.5 truncate"
+                style={{ width: `${percent}%` }}
+                title={`${segment.label} · ~${formatTokens(segment.size)} tokens`}
+              >
+                <span className="truncate font-mono text-foreground/80">
+                  {truncateLabel(segment.label)}
+                </span>
+                <span className="truncate font-mono text-muted-foreground/70">
+                  ~{formatTokens(segment.size)}
+                </span>
+              </div>
+            );
+          })}
+          {hasOverflow && (
+            <div
+              className="flex flex-col gap-0.5 truncate text-muted-foreground"
+              style={{ width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%` }}
+            >
+              <span className="truncate font-mono text-foreground/60">… +{overflowCount}</span>
+              <span className="truncate font-mono text-muted-foreground/60">
+                ~{formatTokens(overflowSize)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Spacer to maintain minimum bar height for tiny segments */}
+        {visibleTotal < total * 0.1 && <div className="h-0" />}
+      </div>
+    </TooltipProvider>
+  );
+});

package/src/components/proxy-viewer/anatomy/tokenEstimate.ts

@@ -0,0 +1,53 @@
+/**
+ * Blended 4-chars-per-token heuristic with CJK / emoji adjustment.
+ *
+ * Rationale: Anthropic and OpenAI both document ~4 chars/token for
+ * English / Latin / punctuation. CJK characters, Hangul, kana, fullwidth
+ * forms, and emoji tokenize roughly 1:1 in practice. We use a simple
+ * two-bucket counter rather than a full BPE tokenizer to keep the
+ * estimate cheap and synchronous — the result is shown with a leading
+ * `~` so the user is never misled about precision.
+ */
+
+/** A single Unicode code-point character from `text`. */
+function forEachCodePoint(text: string, visit: (ch: string) => void): void {
+  // `Array.from` iterates by code point, so surrogate pairs and
+  // combining marks stay together.
+  for (const ch of Array.from(text)) {
+    visit(ch);
+  }
+}
+
+const CJK_REGEX = /[\u3000-\u9FFF\uAC00-\uD7FF\uF900-\uFAFF\uFF00-\uFFEF\u{1F300}-\u{1FAFF}]/u;
+
+/**
+ * Estimate the token count of a piece of text.
+ *
+ * - CJK / Hangul / kana / fullwidth / emoji → 1 token per character
+ * - Everything else → 1 token per 4 characters, rounded up
+ *
+ * Returns 0 for the empty string.
+ */
+export function estimateTokens(text: string): number {
+  if (text.length === 0) return 0;
+  let cjk = 0;
+  let other = 0;
+  forEachCodePoint(text, (ch) => {
+    if (CJK_REGEX.test(ch)) {
+      cjk += 1;
+    } else {
+      other += 1;
+    }
+  });
+  return Math.ceil(cjk * 1) + Math.ceil(other / 4);
+}
+
+/** Count Unicode code points in a string (graphemes ≈ characters for our purposes). */
+export function countCharacters(text: string): number {
+  if (text.length === 0) return 0;
+  let n = 0;
+  forEachCodePoint(text, () => {
+    n += 1;
+  });
+  return n;
+}

package/src/components/proxy-viewer/anatomy/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Role of a request segment. Drives the segment's color in the anatomy bar.
+ *
+ * - `system`: the system prompt (Anthropic `system`, or leading system-role message in OpenAI)
+ * - `user`: a user-role message
+ * - `assistant`: an assistant-role message
+ * - `tool`: a tool-role message (OpenAI only — Anthropic uses tool_result blocks inside user messages)
+ * - `tools`: the synthetic "tool definitions" segment that aggregates the `tools` array
+ */
+export type AnatomyRole = "system" | "user" | "assistant" | "tool" | "tools";
+
+/**
+ * A single segment of a request as visualized in the Anatomy tab.
+ *
+ * `path` is a JSON-pointer-style path into the parsed body
+ * (e.g. `/system`, `/messages/0`, `/tools`). The path is opaque to
+ * consumers — it is matched against the same path emitted by the
+ * request analyzer, and is used to drive click-to-jump in the
+ * `JsonViewer`. A `null` path is allowed for the synthetic `tools`
+ * segment in the rare case where the tools array cannot be located.
+ */
+export type AnatomySegment = {
+  /** Stable role used for color and label prefix. */
+  role: AnatomyRole;
+  /** Human-readable short label shown below the segment (e.g. "system", "[3] user", "tools"). */
+  label: string;
+  /** Estimated token count for this segment. Drives bar width. */
+  size: number;
+  /** Character count for this segment (raw text length). Used in the tooltip. */
+  characters: number;
+  /** Raw text of the segment used to compute `size`. Used in the tooltip preview. */
+  text: string;
+  /**
+   * JSON-pointer-style path into the parsed body (e.g. `/messages/3`).
+   * `null` when the segment does not correspond to a single node
+   * (e.g. the synthetic `tools` segment that aggregates the array).
+   */
+  path: string;
+};

package/src/components/proxy-viewer/anatomy/useAnatomyJump.ts

@@ -0,0 +1,114 @@
+import { type RefObject, useCallback, useRef } from "react";
+import type { AnatomySegment } from "./types";
+
+const HIGHLIGHT_DURATION_MS = 1200;
+/**
+ * Cap on the number of animation frames we are willing to wait
+ * before giving up on finding the target row. Each frame is
+ * ~16ms at 60Hz, so 12 frames gives ~200ms — enough headroom for
+ * the cascade of `useEffect` -> `setExpanded` calls that fires
+ * for each ancestor on the way down to the target.
+ */
+const MAX_HIGHLIGHT_ATTEMPTS = 12;
+
+/**
+ * Build a `jumpToSegment` callback that:
+ *
+ * 1. Optionally switches the active tab to the Request tab (so the
+ *    target row is in the DOM and visible).
+ * 2. Asks the JSON viewer to expand the path's ancestors via the
+ *    `expandToPath` prop (which is reset to `null` shortly after).
+ * 3. Polls via `requestAnimationFrame` for the target row to appear
+ *    (the cascade of `useEffect` -> `setExpanded` calls needs
+ *    multiple frames for deep paths), then scrolls the matching
+ *    row into view and applies a 1.2 s primary-color ring
+ *    highlight via a temporary class toggle.
+ */
+export function useAnatomyJump(options: {
+  /** Ref to the DOM root that contains the JSON tree rows. */
+  containerRef: RefObject<HTMLElement | null>;
+  /** Setter for the `JsonViewer`'s `expandToPath` prop. */
+  setExpandToPath: (path: string | null) => void;
+  /**
+   * Optional hook called before the DOM lookup so the caller can
+   * make the Request tab active. The hook should be synchronous
+   * (it triggers a React state update which is flushed by the
+   * subsequent `requestAnimationFrame`).
+   */
+  ensureTabActive?: () => void;
+  highlightMs?: number;
+}): (segment: AnatomySegment) => void {
+  const { containerRef, setExpandToPath, ensureTabActive, highlightMs } = options;
+  const highlightTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  return useCallback(
+    (segment: AnatomySegment) => {
+      ensureTabActive?.();
+
+      // Trigger the JSON viewer to expand ancestors of this path.
+      // We pass the same path; the JsonViewer resets the prop via
+      // the caller clearing the state after the scroll lands.
+      setExpandToPath(segment.path);
+
+      const applyHighlight = (target: HTMLElement): void => {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+        target.classList.add(
+          "ring-2",
+          "ring-primary/60",
+          "ring-offset-1",
+          "ring-offset-background",
+          "rounded-sm",
+          "transition-shadow",
+        );
+        if (highlightTimer.current !== null) clearTimeout(highlightTimer.current);
+        highlightTimer.current = setTimeout(() => {
+          target.classList.remove(
+            "ring-2",
+            "ring-primary/60",
+            "ring-offset-1",
+            "ring-offset-background",
+            "rounded-sm",
+            "transition-shadow",
+          );
+          // Clear the expand signal AFTER the highlight fades so the
+          // user sees the tree in its final (expanded) state, not
+          // suddenly collapsing the moment we release control.
+          setExpandToPath(null);
+        }, highlightMs ?? HIGHLIGHT_DURATION_MS);
+      };
+
+      const escape = (value: string): string => {
+        if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+          return CSS.escape(value);
+        }
+        return value.replace(/(["'\\[\](){}])/g, "\\$1");
+      };
+      const selector = `[data-anatomy-path="${escape(segment.path)}"]`;
+
+      const tryFindTarget = (attemptsLeft: number): void => {
+        const container = containerRef.current;
+        if (container !== null) {
+          const target = container.querySelector<HTMLElement>(selector);
+          if (target !== null) {
+            applyHighlight(target);
+            return;
+          }
+        }
+        if (attemptsLeft > 0) {
+          window.requestAnimationFrame(() => tryFindTarget(attemptsLeft - 1));
+        } else {
+          // Path not in the DOM after a generous wait — reset state
+          // and bail. This is the right behavior for malformed paths
+          // (e.g. when the format adapter returns a path that does
+          // not exist in the current request body).
+          setExpandToPath(null);
+        }
+      };
+
+      // Wait one frame for the tab-switch / expandToPath state
+      // update to commit before we start probing the DOM.
+      window.requestAnimationFrame(() => tryFindTarget(MAX_HIGHLIGHT_ATTEMPTS));
+    },
+    [containerRef, ensureTabActive, highlightMs, setExpandToPath],
+  );
+}

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

@@ -0,0 +1,50 @@
+import type { ConversationGroupData } from "./ConversationHeader";
+
+/**
+ * Trend direction for a single cache token field, comparing the current log
+ * to the previous log in the same conversation group.
+ */
+export type CacheTrend = { direction: "up" | "down"; delta: number };
+
+/**
+ * Per-log trend entry. `creation` covers `cacheCreationInputTokens`,
+ * `read` covers `cacheReadInputTokens`. Each field is `null` when there is
+ * no previous log to compare against, when the current log has no value for
+ * the field, or when the values are equal (no visual change).
+ */
+export type CacheTrendEntry = { creation: CacheTrend | null; read: CacheTrend | null };
+
+/**
+ * Build a `logId -> CacheTrendEntry` map for every log that has a previous
+ * log in its conversation group. Pure: does not mutate `groups`. Walks each
+ * group in array order (which is the timestamp-sorted order produced by
+ * `groupLogsByConversation`), so "previous log" is the adjacent entry in
+ * that order.
+ */
+export function computeCacheTrends(groups: ConversationGroupData[]): Map<number, CacheTrendEntry> {
+  const result = new Map<number, CacheTrendEntry>();
+
+  for (const group of groups) {
+    const logs = group.logs;
+    for (let i = 1; i < logs.length; i++) {
+      const prev = logs[i - 1];
+      const curr = logs[i];
+      if (prev === undefined || curr === undefined) continue;
+
+      result.set(curr.id, {
+        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
+        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens),
+      });
+    }
+  }
+
+  return result;
+}
+
+function compareField(previous: number | null, current: number | null): CacheTrend | null {
+  if (current === null) return null;
+  if (previous === null) return null;
+  if (current > previous) return { direction: "up", delta: current - previous };
+  if (current < previous) return { direction: "down", delta: previous - current };
+  return null;
+}