@tonyclaw/agent-inspector 4.0.1 → 4.0.2

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

@@ -1,268 +0,0 @@
-import type { ProviderConfig } from "../../../lib/providerContract";
-import type { CapturedLog } from "../../../contracts";
-import { getLogFormatAdapter, resolveLogFormat } from "../log-formats";
-import {
-  analyzeContextIntelligence,
-  type ContextHealth,
-  type ContextRiskLevel,
-  type ContextWindow,
-  type RoleUsage,
-} from "./contextIntelligence";
-import type { AnatomySegment } from "./types";
-
-export type SessionContextSnapshot = {
-  logId: number;
-  model: string;
-  timestamp: string;
-  contextWindow: ContextWindow;
-  estimatedInputTokens: number;
-  windowUsedTokens: number | null;
-  usagePercent: number | null;
-  riskLevel: ContextRiskLevel;
-  health: ContextHealth;
-  diagnostics: string[];
-  roleSegments: AnatomySegment[];
-  roleTotalTokens: number;
-};
-
-export type SessionModelContextSummary = {
-  model: string;
-  requestCount: number;
-  first: SessionContextSnapshot;
-  latest: SessionContextSnapshot;
-  peak: SessionContextSnapshot;
-  trendPercent: number | null;
-};
-
-export type SessionContextSummary = {
-  models: SessionModelContextSummary[];
-};
-
-type SummaryAccumulator = {
-  model: string;
-  requestCount: number;
-  first: SessionContextSnapshot;
-  latest: SessionContextSnapshot;
-  peak: SessionContextSnapshot;
-};
-
-type SnapshotCacheEntry = {
-  id: number;
-  rawRequestBody: string | null;
-  inputTokens: number | null;
-  model: string | null;
-  path: string;
-  apiFormat: CapturedLog["apiFormat"];
-  timestamp: string;
-  providersSignature: string;
-  snapshot: SessionContextSnapshot | null;
-};
-
-const snapshotCache = new WeakMap<CapturedLog, SnapshotCacheEntry>();
-
-function providerSignature(providers: readonly ProviderConfig[]): string {
-  return providers
-    .map((provider) => {
-      const metadata =
-        provider.modelMetadata
-          ?.map((entry) => `${entry.model}:${String(entry.contextWindow ?? "")}`)
-          .join(",") ?? "";
-      return `${provider.id}:${provider.updatedAt}:${provider.models.join(",")}:${metadata}`;
-    })
-    .join("|");
-}
-
-function parseRequestBody(rawBody: string | null): unknown | null {
-  if (rawBody === null) return null;
-  try {
-    const parsed: unknown = JSON.parse(rawBody);
-    return parsed;
-  } catch {
-    return null;
-  }
-}
-
-function roleUsageSegment(usage: RoleUsage): AnatomySegment {
-  return {
-    role: usage.role,
-    label: usage.label,
-    size: usage.tokens,
-    characters: usage.tokens * 4,
-    text: "",
-    path: `role:${usage.role}`,
-  };
-}
-
-function snapshotFromLog(
-  log: CapturedLog,
-  providers: readonly ProviderConfig[],
-): SessionContextSnapshot | null {
-  const parsed = parseRequestBody(log.rawRequestBody);
-  if (parsed === null) return null;
-
-  const adapter = getLogFormatAdapter(resolveLogFormat(log));
-  const segments = adapter.anatomySegments(parsed);
-  if (segments === null) return null;
-
-  const intelligence = analyzeContextIntelligence({
-    segments,
-    inputTokens: log.inputTokens ?? null,
-    parsed,
-    model: log.model,
-    providers,
-  });
-  const model = intelligence.model ?? log.model ?? "Unknown model";
-  const roleSegments = intelligence.roleUsages.map(roleUsageSegment);
-
-  return {
-    logId: log.id,
-    model,
-    timestamp: log.timestamp,
-    contextWindow: intelligence.contextWindow,
-    estimatedInputTokens: intelligence.estimatedInputTokens,
-    windowUsedTokens: intelligence.windowUsedTokens,
-    usagePercent: intelligence.usagePercent,
-    riskLevel: intelligence.riskLevel,
-    health: intelligence.health,
-    diagnostics: intelligence.diagnostics.map((diagnostic) => diagnostic.title),
-    roleSegments,
-    roleTotalTokens: roleSegments.reduce((sum, segment) => sum + segment.size, 0),
-  };
-}
-
-function cachedSnapshotFromLog(
-  log: CapturedLog,
-  providers: readonly ProviderConfig[],
-  providersSignature: string,
-): SessionContextSnapshot | null {
-  const cached = snapshotCache.get(log);
-  if (
-    cached !== undefined &&
-    cached.id === log.id &&
-    cached.rawRequestBody === log.rawRequestBody &&
-    cached.inputTokens === log.inputTokens &&
-    cached.model === log.model &&
-    cached.path === log.path &&
-    cached.apiFormat === log.apiFormat &&
-    cached.timestamp === log.timestamp &&
-    cached.providersSignature === providersSignature
-  ) {
-    return cached.snapshot;
-  }
-
-  const snapshot = snapshotFromLog(log, providers);
-  snapshotCache.set(log, {
-    id: log.id,
-    rawRequestBody: log.rawRequestBody,
-    inputTokens: log.inputTokens,
-    model: log.model,
-    path: log.path,
-    apiFormat: log.apiFormat,
-    timestamp: log.timestamp,
-    providersSignature,
-    snapshot,
-  });
-  return snapshot;
-}
-
-function isHigherPeak(candidate: SessionContextSnapshot, current: SessionContextSnapshot): boolean {
-  if (candidate.usagePercent !== null && current.usagePercent !== null) {
-    return candidate.usagePercent > current.usagePercent;
-  }
-  if (candidate.usagePercent !== null && current.usagePercent === null) return true;
-  if (candidate.usagePercent === null && current.usagePercent !== null) return false;
-  return candidate.estimatedInputTokens > current.estimatedInputTokens;
-}
-
-function riskRank(risk: ContextRiskLevel): number {
-  switch (risk) {
-    case "danger":
-      return 4;
-    case "watch":
-      return 3;
-    case "unknown":
-      return 2;
-    case "ok":
-      return 1;
-  }
-}
-
-function compareModelSummary(
-  left: SessionModelContextSummary,
-  right: SessionModelContextSummary,
-): number {
-  const riskDelta = riskRank(right.latest.riskLevel) - riskRank(left.latest.riskLevel);
-  if (riskDelta !== 0) return riskDelta;
-
-  const leftPeak = left.peak.usagePercent ?? -1;
-  const rightPeak = right.peak.usagePercent ?? -1;
-  const peakDelta = rightPeak - leftPeak;
-  if (peakDelta !== 0) return peakDelta;
-
-  return right.latest.logId - left.latest.logId;
-}
-
-function trendPercent(
-  first: SessionContextSnapshot,
-  latest: SessionContextSnapshot,
-): number | null {
-  if (first.usagePercent === null || latest.usagePercent === null) return null;
-  return (latest.usagePercent - first.usagePercent) * 100;
-}
-
-function logsInAscendingIdOrder(logs: readonly CapturedLog[]): readonly CapturedLog[] {
-  for (let index = 1; index < logs.length; index++) {
-    const previous = logs[index - 1];
-    const current = logs[index];
-    if (previous === undefined || current === undefined) continue;
-    if (previous.id > current.id) return [...logs].sort((left, right) => left.id - right.id);
-  }
-  return logs;
-}
-
-export function buildSessionContextSummary(
-  logs: readonly CapturedLog[],
-  providers: readonly ProviderConfig[] = [],
-): SessionContextSummary {
-  const sortedLogs = logsInAscendingIdOrder(logs);
-  const providersSignature = providerSignature(providers);
-  const byModel = new Map<string, SummaryAccumulator>();
-
-  for (const log of sortedLogs) {
-    const snapshot = cachedSnapshotFromLog(log, providers, providersSignature);
-    if (snapshot === null) continue;
-
-    const existing = byModel.get(snapshot.model);
-    if (existing === undefined) {
-      byModel.set(snapshot.model, {
-        model: snapshot.model,
-        requestCount: 1,
-        first: snapshot,
-        latest: snapshot,
-        peak: snapshot,
-      });
-      continue;
-    }
-
-    byModel.set(snapshot.model, {
-      model: existing.model,
-      requestCount: existing.requestCount + 1,
-      first: existing.first,
-      latest: snapshot,
-      peak: isHigherPeak(snapshot, existing.peak) ? snapshot : existing.peak,
-    });
-  }
-
-  const models = [...byModel.values()]
-    .map((entry) => ({
-      model: entry.model,
-      requestCount: entry.requestCount,
-      first: entry.first,
-      latest: entry.latest,
-      peak: entry.peak,
-      trendPercent: trendPercent(entry.first, entry.latest),
-    }))
-    .sort(compareModelSummary);
-
-  return { models };
-}

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

@@ -1,53 +0,0 @@
-/**
- * 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

@@ -1,41 +0,0 @@
-/**
- * Role of a request segment. Drives the segment's color in the context 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 request context 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`.
- */
-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`). */
-  path: string;
-};
-
-export const ANATOMY_ROLE_LABELS: Record<AnatomyRole, string> = {
-  system: "System",
-  user: "User",
-  assistant: "Assistant",
-  tool: "Tool Results",
-  tools: "Tool Definitions",
-};

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

@@ -1,114 +0,0 @@
-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/bodyHydration.ts

@@ -1,123 +0,0 @@
-import { ApiTimeoutError } from "../../lib/apiClient";
-import type { CapturedLog } from "../../contracts";
-
-export type FullBodyHydrationError = {
-  title: string;
-  detail: string;
-};
-
-const DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL =
-  "The compact log metadata is still available. Retry if the local server was restarting or the body store was briefly unavailable.";
-const DEFAULT_DETAIL_CACHE_LIMIT = 64;
-
-const hydratedLogCache = new Map<number, CapturedLog>();
-const hydratedLogInFlight = new Map<number, Promise<CapturedLog>>();
-
-export function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes.toLocaleString()} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
-}
-
-export function formatBodyHydrationFootprint(
-  requestBytes: number | null | undefined,
-  responseBytes: number | null | undefined,
-): string | null {
-  const parts: string[] = [];
-
-  if (requestBytes !== null && requestBytes !== undefined) {
-    parts.push(`Request ${formatBytes(requestBytes)}`);
-  }
-
-  if (responseBytes !== null && responseBytes !== undefined) {
-    parts.push(`Response ${formatBytes(responseBytes)}`);
-  }
-
-  return parts.length === 0 ? null : parts.join(" · ");
-}
-
-export function describeFullBodyHydrationError(error: unknown): FullBodyHydrationError {
-  if (error instanceof ApiTimeoutError) {
-    return {
-      title: "Full bodies timed out",
-      detail:
-        "The log store did not answer before the UI timeout. Compact metadata is still available; retry loading the bodies.",
-    };
-  }
-
-  if (error instanceof Error) {
-    const message = error.message.trim();
-    return {
-      title: "Full bodies could not be loaded",
-      detail: message === "" ? DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL : message,
-    };
-  }
-
-  return {
-    title: "Full bodies could not be loaded",
-    detail: DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL,
-  };
-}
-
-function detailCacheLimit(): number {
-  const raw = process.env["AGENT_INSPECTOR_UI_DETAIL_CACHE_LIMIT"];
-  if (raw === undefined || raw === "") return DEFAULT_DETAIL_CACHE_LIMIT;
-  const parsed = Number(raw);
-  if (!Number.isSafeInteger(parsed) || parsed < 1 || parsed > 1000) {
-    return DEFAULT_DETAIL_CACHE_LIMIT;
-  }
-  return parsed;
-}
-
-function rememberHydratedLog(log: CapturedLog): CapturedLog {
-  hydratedLogCache.delete(log.id);
-  hydratedLogCache.set(log.id, log);
-  while (hydratedLogCache.size > detailCacheLimit()) {
-    const oldest = hydratedLogCache.keys().next().value;
-    if (typeof oldest !== "number") break;
-    hydratedLogCache.delete(oldest);
-  }
-  return log;
-}
-
-export function readHydratedLogFromCache(logId: number): CapturedLog | null {
-  const cached = hydratedLogCache.get(logId);
-  if (cached === undefined) return null;
-  hydratedLogCache.delete(logId);
-  hydratedLogCache.set(logId, cached);
-  return cached;
-}
-
-export function deleteHydratedLogFromCache(logId: number): void {
-  hydratedLogCache.delete(logId);
-  hydratedLogInFlight.delete(logId);
-}
-
-export function clearHydratedLogCacheForTests(): void {
-  hydratedLogCache.clear();
-  hydratedLogInFlight.clear();
-}
-
-export function getHydratedLogCacheSizeForTests(): number {
-  return hydratedLogCache.size;
-}
-
-export async function getOrFetchHydratedLog(
-  logId: number,
-  fetcher: () => Promise<CapturedLog>,
-): Promise<CapturedLog> {
-  const cached = readHydratedLogFromCache(logId);
-  if (cached !== null) return cached;
-
-  const existing = hydratedLogInFlight.get(logId);
-  if (existing !== undefined) return await existing;
-
-  const pending = fetcher()
-    .then(rememberHydratedLog)
-    .finally(() => {
-      hydratedLogInFlight.delete(logId);
-    });
-  hydratedLogInFlight.set(logId, pending);
-  return await pending;
-}

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

@@ -1,50 +0,0 @@
-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;
-}