@tonyclaw/agent-inspector 2.0.4 → 2.0.6

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

@@ -1,27 +1,77 @@
 import { Info } from "lucide-react";
-import { type JSX, useMemo } from "react";
+import { type JSX, useMemo, useState } 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";
+import { ROLE_COLOR_CLASSES, SegmentBar } from "./SegmentBar";
+import { ANATOMY_ROLE_LABELS, type AnatomyRole, 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. */
+  /** Optional callback fired when the user activates a concrete request segment. */
   onSegmentActivate?: (segment: AnatomySegment) => void;
   /** Pre-computed segments; if provided, `parsed` is ignored. */
   segments?: AnatomySegment[] | null;
 };
 
+type ContextViewMode = "role" | "segment";
+
 const DIVERGENCE_AMBER_THRESHOLD = 0.25;
+const TOP_CONTRIBUTOR_COUNT = 5;
+const ROLE_ORDER: AnatomyRole[] = ["system", "user", "assistant", "tool", "tools"];
+
+const ROLE_DESCRIPTIONS: Record<AnatomyRole, string> = {
+  system: "instructions",
+  user: "user turns",
+  assistant: "assistant turns",
+  tool: "tool results",
+  tools: "tool schemas",
+};
+
+const VIEW_MODE_OPTIONS: Array<{ value: ContextViewMode; label: string }> = [
+  { value: "role", label: "By Role" },
+  { value: "segment", label: "By Segment" },
+];
+
+function formatPercent(value: number): string {
+  if (value >= 10) return `${value.toFixed(0)}%`;
+  if (value >= 1) return `${value.toFixed(1)}%`;
+  if (value > 0) return "<1%";
+  return "0%";
+}
+
+function aggregateByRole(segments: AnatomySegment[]): AnatomySegment[] {
+  const result: AnatomySegment[] = [];
+  for (const role of ROLE_ORDER) {
+    const matching = segments.filter((segment) => segment.role === role);
+    if (matching.length === 0) continue;
+    const size = matching.reduce((sum, segment) => sum + segment.size, 0);
+    const characters = matching.reduce((sum, segment) => sum + segment.characters, 0);
+    const label = ANATOMY_ROLE_LABELS[role];
+    const text = `${matching.length} segment${matching.length === 1 ? "" : "s"} grouped as ${
+      ROLE_DESCRIPTIONS[role]
+    }`;
+    result.push({
+      role,
+      label,
+      size,
+      characters,
+      text,
+      path: `role:${role}`,
+    });
+  }
+  return result;
+}
+
+function topContributors(segments: AnatomySegment[]): AnatomySegment[] {
+  return [...segments].sort((a, b) => b.size - a.size).slice(0, TOP_CONTRIBUTOR_COUNT);
+}
 
 /**
- * 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.
+ * Render a request context breakdown: headline metrics, a stacked token bar,
+ * role legend, and the largest individual context blocks.
  */
 export function RequestAnatomy({
   parsed,
@@ -29,69 +79,170 @@ export function RequestAnatomy({
   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 [viewMode, setViewMode] = useState<ContextViewMode>("role");
   const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
-  const total = useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
+  const total = useMemo(
+    () => (segments ?? []).reduce((sum, segment) => sum + segment.size, 0),
+    [segments],
+  );
+  const roleSegments = useMemo(
+    () => (segments === null ? [] : aggregateByRole(segments)),
+    [segments],
+  );
+  const topSegments = useMemo(
+    () => (segments === null ? [] : topContributors(segments)),
+    [segments],
+  );
 
-  // Show divergence warning when both estimate and server numbers exist.
   const showDivergenceWarning = useMemo(() => {
-    if (segments === null || segments === undefined) return false;
+    if (segments === null) 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) return null;
+  if (segments.length === 0) return null;
+  if (parsed === null && providedSegments === undefined) return null;
 
-  if (segments === null || segments === undefined) {
-    return null;
-  }
-  if (segments.length === 0) {
-    return null;
-  }
-  if (parsed === null && providedSegments === undefined) {
-    return null;
-  }
+  const summaryColorClass =
+    inputTokens !== null && showDivergenceWarning ? "text-amber-400" : "text-muted-foreground";
+  const displayedSegments = viewMode === "role" ? roleSegments : segments;
+  const displayedTotal =
+    total > 0 ? total : displayedSegments.reduce((sum, item) => sum + item.size, 0);
+  const activateSegment = viewMode === "segment" ? onSegmentActivate : undefined;
+  const segmentCountLabel = `${String(segments.length)} segment${segments.length === 1 ? "" : "s"}`;
+  const providerInputLabel =
+    inputTokens === null ? "Provider input unknown" : `Provider input ${formatTokens(inputTokens)}`;
 
   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 && (
+      <div className="px-4 py-3 space-y-3" data-testid="anatomy-root">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="text-sm font-semibold text-foreground">Request Context</div>
+            <div className={cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass)}>
+              Estimated ~{formatTokens(total)} tokens | {providerInputLabel} | {segmentCountLabel}
+            </div>
+          </div>
+
+          <div
+            className="inline-flex shrink-0 rounded border border-border bg-muted/20 p-0.5"
+            role="group"
+            aria-label="Context breakdown mode"
+          >
+            {VIEW_MODE_OPTIONS.map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                aria-pressed={viewMode === option.value}
+                onClick={() => setViewMode(option.value)}
+                className={cn(
+                  "h-6 rounded-sm px-2 text-[11px] font-medium transition-colors",
+                  viewMode === option.value
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {showDivergenceWarning && (
+          <div className="inline-flex items-center gap-1.5 text-xs text-amber-400">
             <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"
+                  className="inline-flex items-center hover:text-amber-300"
+                  aria-label="Token estimate differs from provider input"
                 >
                   <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.
+                The bar uses a local token estimate. Provider input tokens remain the source of
+                truth for billing and context-window usage.
               </TooltipContent>
             </Tooltip>
-          )}
+            Estimate differs from provider-reported input.
+          </div>
+        )}
+
+        <SegmentBar
+          segments={displayedSegments}
+          totalTokens={displayedTotal}
+          showLabels={viewMode === "segment"}
+          onActivate={activateSegment}
+        />
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px] text-muted-foreground">
+          {roleSegments.map((segment) => {
+            const percent = total > 0 ? (segment.size / total) * 100 : 0;
+            return (
+              <div key={segment.role} className="inline-flex items-center gap-1.5">
+                <span
+                  aria-hidden="true"
+                  className={cn("size-2.5 rounded-[2px]", ROLE_COLOR_CLASSES[segment.role])}
+                />
+                <span>{segment.label}</span>
+                <span className="font-mono text-muted-foreground/70">{formatPercent(percent)}</span>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="text-xs font-medium text-foreground">Top Contributors</div>
+          <div className="grid gap-1">
+            {topSegments.map((segment, index) => {
+              const percent = total > 0 ? (segment.size / total) * 100 : 0;
+              const activate = onSegmentActivate;
+              const content = (
+                <>
+                  <span className="w-5 shrink-0 text-right font-mono text-muted-foreground/70">
+                    {String(index + 1)}
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "size-2.5 shrink-0 rounded-[2px]",
+                      ROLE_COLOR_CLASSES[segment.role],
+                    )}
+                  />
+                  <span className="min-w-0 flex-1 truncate text-left">{segment.label}</span>
+                  <span className="shrink-0 font-mono text-muted-foreground">
+                    {formatPercent(percent)} | ~{formatTokens(segment.size)}
+                  </span>
+                </>
+              );
+              if (activate !== undefined) {
+                return (
+                  <button
+                    key={`${segment.path}-${index}`}
+                    type="button"
+                    onClick={() => activate(segment)}
+                    className="flex h-7 items-center gap-2 rounded px-1.5 text-xs text-muted-foreground hover:bg-muted/40 hover:text-foreground"
+                    title="Jump to this request block"
+                  >
+                    {content}
+                  </button>
+                );
+              }
+              return (
+                <div
+                  key={`${segment.path}-${index}`}
+                  className="flex h-7 items-center gap-2 rounded px-1.5 text-xs text-muted-foreground"
+                >
+                  {content}
+                </div>
+              );
+            })}
+          </div>
         </div>
-        <SegmentBar segments={segments} totalTokens={total} onActivate={onSegmentActivate} />
       </div>
     </TooltipProvider>
   );

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

@@ -1,9 +1,9 @@
 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";
+import { ANATOMY_ROLE_LABELS, type AnatomyRole, type AnatomySegment } from "./types";
 
-const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
+export const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
   system: "bg-sky-500/70",
   user: "bg-emerald-500/70",
   assistant: "bg-violet-500/70",
@@ -21,59 +21,69 @@ const ROLE_FOCUS_RING: Record<AnatomyRole, string> = {
 
 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)}…`;
+  return `${label.slice(0, LABEL_TRUNCATE_LIMIT - 3)}...`;
 }
 
 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)}…`;
+  return `${singleLine.slice(0, TOOLTIP_PREVIEW_LIMIT)}...`;
+}
+
+function formatPercent(value: number): string {
+  if (value >= 10) return `${value.toFixed(0)}%`;
+  if (value >= 1) return `${value.toFixed(1)}%`;
+  if (value > 0) return "<1%";
+  return "0%";
 }
 
 export type SegmentBarProps = {
   segments: ReadonlyArray<AnatomySegment>;
   totalTokens: number;
+  showLabels?: boolean;
   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`.
+ * Render a horizontal stacked bar showing the relative size of each request
+ * context segment. Segment mode can activate a JSON path; aggregate modes stay
+ * static so they do not imply a misleading jump target.
  */
 export const SegmentBar = memo(function SegmentBar({
   segments,
   totalTokens,
+  showLabels = true,
   onActivate,
 }: SegmentBarProps): JSX.Element {
   const total = useMemo(() => {
     if (totalTokens > 0) return totalTokens;
-    return segments.reduce((sum, s) => sum + s.size, 0);
+    return segments.reduce((sum, segment) => sum + segment.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 overflowSize = overflowSegments.reduce((sum, segment) => sum + segment.size, 0);
   const overflowCount = overflowSegments.length;
   const overflowStartIndex = MAX_VISIBLE_SEGMENTS;
   const overflowEndIndex = overflowStartIndex + overflowCount - 1;
   const hasOverflow = overflowCount > 0;
+  const interactive = onActivate !== undefined;
 
   const visibleTotal = useMemo(
-    () => visibleSegments.reduce((sum, s) => sum + s.size, 0),
+    () => visibleSegments.reduce((sum, segment) => sum + segment.size, 0),
     [visibleSegments],
   );
 
   const ariaLabel = useMemo(
     () =>
-      `Request anatomy: ~${formatTokens(total)} tokens across ${segments.length} segment${segments.length === 1 ? "" : "s"}`,
+      `Request context: ~${formatTokens(total)} tokens across ${segments.length} segment${
+        segments.length === 1 ? "" : "s"
+      }`,
     [segments.length, total],
   );
 
@@ -91,36 +101,48 @@ export const SegmentBar = memo(function SegmentBar({
           {visibleSegments.map((segment, index) => {
             const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
             const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+            const segmentClassName = cn(
+              "h-full border-r border-background/80 last:border-r-0",
+              interactive
+                ? "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"
+                : "opacity-90",
+              ROLE_COLOR_CLASSES[segment.role],
+              interactive ? ROLE_FOCUS_RING[segment.role] : "",
+            );
+            const segmentStyle = { width: `${percent}%` };
+            const ariaText = `${segment.label}, ${formatPercent(rawPercent)}, ~${formatTokens(
+              segment.size,
+            )} tokens`;
             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}%` }}
-                  />
+                  {interactive ? (
+                    <button
+                      type="button"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => onActivate(segment)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          onActivate(segment);
+                        }
+                      }}
+                      data-anatomy-path={segment.path}
+                      aria-label={ariaText}
+                      className={segmentClassName}
+                      style={segmentStyle}
+                    />
+                  ) : (
+                    <span aria-label={ariaText} className={segmentClassName} style={segmentStyle} />
+                  )}
                 </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
+                    {segment.label} - {formatPercent(rawPercent)} - ~{formatTokens(segment.size)}{" "}
+                    tokens
                   </div>
+                  <div className="text-muted-foreground">{ANATOMY_ROLE_LABELS[segment.role]}</div>
                   <div className="text-muted-foreground">
                     {segment.characters.toLocaleString()} chars
                   </div>
@@ -144,51 +166,54 @@ export const SegmentBar = memo(function SegmentBar({
                     width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%`,
                   }}
                 >
-                  … +{overflowCount}
+                  ... +{overflowCount}
                 </div>
               </TooltipTrigger>
               <TooltipContent side="bottom" className="text-xs">
                 {overflowCount} more segment{overflowCount === 1 ? "" : "s"} (indices{" "}
-                {overflowStartIndex}–{overflowEndIndex})
+                {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 (
+        {showLabels && (
+          <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} - ${formatPercent(rawPercent)} - ~${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">
+                    {formatPercent(rawPercent)} - ~{formatTokens(segment.size)}
+                  </span>
+                </div>
+              );
+            })}
+            {hasOverflow && (
               <div
-                key={`label-${segment.path}-${index}`}
-                className="flex flex-col gap-0.5 truncate"
-                style={{ width: `${percent}%` }}
-                title={`${segment.label} · ~${formatTokens(segment.size)} tokens`}
+                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/80">
-                  {truncateLabel(segment.label)}
-                </span>
-                <span className="truncate font-mono text-muted-foreground/70">
-                  ~{formatTokens(segment.size)}
+                <span className="truncate font-mono text-foreground/60">... +{overflowCount}</span>
+                <span className="truncate font-mono text-muted-foreground/60">
+                  ~{formatTokens(overflowSize)}
                 </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>
+            )}
+          </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/types.ts

@@ -1,23 +1,21 @@
 /**
- * Role of a request segment. Drives the segment's color in the anatomy bar.
+ * 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
+ * - `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.
+ * 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`. A `null` path is allowed for the synthetic `tools`
- * segment in the rare case where the tools array cannot be located.
+ * 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. */
@@ -30,10 +28,14 @@ export type AnatomySegment = {
   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).
-   */
+  /** 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/formats/anthropic/ResponseView.tsx

@@ -38,14 +38,14 @@ export const StructuredResponseViewAnthropic = memo(function StructuredResponseV
             response.usage.cache_creation_input_tokens !== null &&
             response.usage.cache_creation_input_tokens > 0 && (
               <span className="font-mono tabular-nums text-emerald-400">
-                Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
+                KV Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
               </span>
             )}
           {response.usage.cache_read_input_tokens !== undefined &&
             response.usage.cache_read_input_tokens !== null &&
             response.usage.cache_read_input_tokens > 0 && (
               <span className="font-mono tabular-nums text-purple-400">
-                Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
+                KV Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
               </span>
             )}
         </span>

package/src/components/proxy-viewer/log-formats/anthropic.ts

@@ -155,7 +155,7 @@ export const anthropicLogFormatAdapter: LogFormatAdapter = {
     if (parsed === null || typeof parsed !== "object") return null;
     // We deliberately skip AnthropicRequestSchema validation here:
     // real Anthropic requests accept `system` as either a string or
-    // an array, and we want the Anatomy view to render even when the
+    // an array, and we want the Context view to render even when the
     // body shape is slightly off-schema (e.g. system: "string" vs
     // system: [{type:"text",text:"..."}]).
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

package/src/components/proxy-viewer/log-formats/openai.ts

@@ -128,7 +128,7 @@ export const openAILogFormatAdapter: LogFormatAdapter = {
   anatomySegments(parsed) {
     if (parsed === null || typeof parsed !== "object") return null;
     // We deliberately skip OpenAIRequestSchema validation here for the
-    // same reason as the Anthropic adapter: the Anatomy view should
+    // same reason as the Anthropic adapter: the Context view should
     // render even when the body shape is slightly off-schema. We only
     // need the top-level `messages` and `tools` arrays.
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

package/src/components/proxy-viewer/log-formats/types.ts

@@ -18,7 +18,7 @@ export type LogFormatAdapter = {
   analyzeRequest(rawBody: string | null): RequestAnalysis;
   analyzeResponse(responseText: string | null): ResponseAnalysis;
   /**
-   * Derive the ordered list of segments shown in the Anatomy tab for a
+   * Derive the ordered list of segments shown in the Context tab for a
    * parsed request body. Returns `null` when the body is `null` or fails
    * the format's schema (e.g. unknown format).
    */