@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,887 +0,0 @@
-import { ChevronDown, ChevronRight, Info } from "lucide-react";
-import { type JSX, useMemo, useState } from "react";
-import { cn, formatContextWindowTokens, formatTokens } from "../../../lib/utils";
-import { useProviders } from "../../../lib/useProviders";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
-import {
-  analyzeContextIntelligence,
-  CONTEXT_USAGE_THRESHOLDS,
-  type ContextDiagnostic,
-  type DuplicateContextGroup,
-  type DuplicateContextSegment,
-  type ContextHealth,
-  type ContextHealthLevel,
-  type ContextIntelligence,
-  type ContextRiskLevel,
-} from "./contextIntelligence";
-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;
-  /** Model name from the captured log; falls back to the parsed request body when omitted. */
-  model?: string | null;
-  /** 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 DUPLICATE_GROUP_DISPLAY_COUNT = 4;
-const DUPLICATE_SEGMENT_DISPLAY_COUNT = 6;
-const TOOL_SCHEMA_SAVINGS_RATIO = 0.25;
-const SYSTEM_PROMPT_SAVINGS_RATIO = 0.2;
-const HISTORY_SAVINGS_RATIO = 0.2;
-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" },
-];
-
-const RISK_CLASS: Record<ContextRiskLevel, string> = {
-  unknown: "bg-muted-foreground/50",
-  ok: "bg-emerald-500/70",
-  watch: "bg-amber-400/75",
-  danger: "bg-red-500/80",
-};
-
-const RISK_TEXT_CLASS: Record<ContextRiskLevel, string> = {
-  unknown: "text-muted-foreground",
-  ok: "text-emerald-400",
-  watch: "text-amber-300",
-  danger: "text-red-300",
-};
-
-const HEALTH_BADGE_CLASS: Record<ContextHealthLevel, string> = {
-  ok: "border-emerald-400/30 bg-emerald-400/8 text-emerald-200",
-  optimizable: "border-amber-400/30 bg-amber-400/8 text-amber-100",
-  risk: "border-red-400/35 bg-red-500/10 text-red-100",
-};
-
-const HEALTH_LABEL: Record<ContextHealthLevel, string> = {
-  ok: "OK",
-  optimizable: "Optimizable",
-  risk: "Risk",
-};
-
-type ContextAdvisorKind = ContextDiagnostic["kind"] | "context-pressure" | "context-window";
-
-type ContextAdvisorItem = {
-  key: string;
-  kind: ContextAdvisorKind;
-  severity: "watch" | "danger";
-  title: string;
-  impact: string;
-  action: string;
-  savingTokens: number | null;
-  target: AnatomySegment | null;
-};
-
-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 formatUsagePercent(value: number | null): string {
-  if (value === null) return "Unknown";
-  return formatPercent(value * 100);
-}
-
-function formatRemainingTokens(value: number | null): string {
-  if (value === null) return "Unknown";
-  if (value < 0) return `-${formatTokens(Math.abs(value))}`;
-  return formatTokens(value);
-}
-
-function formatContextLimit(intelligence: ContextIntelligence): string {
-  if (intelligence.contextWindow.tokens === null) return "Unknown";
-  return formatContextWindowTokens(intelligence.contextWindow.tokens);
-}
-
-function formatContextSource(intelligence: ContextIntelligence): string {
-  switch (intelligence.contextWindow.source) {
-    case "request":
-      return intelligence.contextWindow.label;
-    case "provider":
-      return intelligence.contextWindow.label;
-    case "model-rule":
-      return intelligence.contextWindow.label;
-    case "unknown":
-      return intelligence.model === null
-        ? intelligence.contextWindow.label
-        : `${intelligence.contextWindow.label}: ${intelligence.model}`;
-  }
-}
-
-function advisorTone(severity: ContextAdvisorItem["severity"]): string {
-  switch (severity) {
-    case "watch":
-      return "border-amber-400/30 bg-amber-400/8 text-amber-100";
-    case "danger":
-      return "border-red-400/35 bg-red-500/10 text-red-100";
-  }
-}
-
-function formatContextHealth(health: ContextHealth): string {
-  const label = HEALTH_LABEL[health.level];
-  if (health.level === "ok") return label;
-  const countLabel =
-    health.level === "risk"
-      ? `${String(health.opportunityCount)} signal${health.opportunityCount === 1 ? "" : "s"}`
-      : `${String(health.opportunityCount)} opportunit${
-          health.opportunityCount === 1 ? "y" : "ies"
-        }`;
-  if (health.reclaimableTokens <= 0) return `${label} | ${countLabel}`;
-  return `${label} | ${countLabel} | ~${formatTokens(health.reclaimableTokens)} tokens`;
-}
-
-function ContextHealthBadge({ health }: { health: ContextHealth }): JSX.Element {
-  return (
-    <span
-      className={cn(
-        "inline-flex h-5 max-w-full items-center rounded border px-1.5 font-mono text-[10px]",
-        HEALTH_BADGE_CLASS[health.level],
-      )}
-      aria-label={`Context health ${formatContextHealth(health)}`}
-    >
-      <span className="truncate">{formatContextHealth(health)}</span>
-    </span>
-  );
-}
-
-function roleUsageTokens(intelligence: ContextIntelligence, role: AnatomyRole): number {
-  return intelligence.roleUsages.find((usage) => usage.role === role)?.tokens ?? 0;
-}
-
-function roleUsagePercent(intelligence: ContextIntelligence, role: AnatomyRole): number {
-  return intelligence.roleUsages.find((usage) => usage.role === role)?.percent ?? 0;
-}
-
-function estimatedSaving(tokens: number, ratio: number): number | null {
-  if (tokens <= 0) return null;
-  const saving = Math.round(tokens * ratio);
-  return saving > 0 ? saving : null;
-}
-
-function largestSegmentForRole(
-  segments: readonly AnatomySegment[],
-  role: AnatomyRole,
-): AnatomySegment | null {
-  return (
-    [...segments]
-      .filter((segment) => segment.role === role)
-      .sort((left, right) => right.size - left.size)[0] ?? null
-  );
-}
-
-function largestSegmentForHistory(segments: readonly AnatomySegment[]): AnatomySegment | null {
-  return (
-    [...segments]
-      .filter(
-        (segment) =>
-          segment.role === "user" || segment.role === "assistant" || segment.role === "tool",
-      )
-      .sort((left, right) => right.size - left.size)[0] ?? null
-  );
-}
-
-function firstDuplicateTarget(
-  groups: readonly DuplicateContextGroup[],
-  segments: readonly AnatomySegment[],
-): AnatomySegment | null {
-  const firstGroup = groups[0] ?? null;
-  if (firstGroup === null) return null;
-  const firstSegment = firstGroup.segments[0] ?? null;
-  if (firstSegment === null) return null;
-  return resolveDuplicateSegment(firstSegment, segments);
-}
-
-function duplicateSaving(groups: readonly DuplicateContextGroup[]): number | null {
-  const saving = groups.reduce((sum, group) => sum + group.repeatedTokens, 0);
-  return saving > 0 ? saving : null;
-}
-
-function historyTokens(intelligence: ContextIntelligence): number {
-  return (
-    roleUsageTokens(intelligence, "user") +
-    roleUsageTokens(intelligence, "assistant") +
-    roleUsageTokens(intelligence, "tool")
-  );
-}
-
-function advisorItemFromDiagnostic({
-  diagnostic,
-  intelligence,
-  segments,
-}: {
-  diagnostic: ContextDiagnostic;
-  intelligence: ContextIntelligence;
-  segments: readonly AnatomySegment[];
-}): ContextAdvisorItem {
-  switch (diagnostic.kind) {
-    case "duplicate":
-      return {
-        key: "duplicate",
-        kind: "duplicate",
-        severity: diagnostic.severity,
-        title: "Duplicate content",
-        impact: diagnostic.detail,
-        action: "Remove repeated blocks or keep one canonical copy in the next request.",
-        savingTokens: duplicateSaving(intelligence.duplicateGroups),
-        target: firstDuplicateTarget(intelligence.duplicateGroups, segments),
-      };
-    case "tool-schema": {
-      const tokens = roleUsageTokens(intelligence, "tools");
-      const percent = roleUsagePercent(intelligence, "tools");
-      return {
-        key: "tool-schema",
-        kind: "tool-schema",
-        severity: diagnostic.severity,
-        title: "Tool schema pressure",
-        impact: `Tool definitions use ~${formatTokens(tokens)} tokens (${formatPercent(
-          percent * 100,
-        )}).`,
-        action: "Disable unused tools or shorten verbose schema descriptions.",
-        savingTokens: estimatedSaving(tokens, TOOL_SCHEMA_SAVINGS_RATIO),
-        target: largestSegmentForRole(segments, "tools"),
-      };
-    }
-    case "system-heavy": {
-      const tokens = roleUsageTokens(intelligence, "system");
-      const percent = roleUsagePercent(intelligence, "system");
-      return {
-        key: "system-heavy",
-        kind: "system-heavy",
-        severity: diagnostic.severity,
-        title: "Large system prompt",
-        impact: `System instructions use ~${formatTokens(tokens)} tokens (${formatPercent(
-          percent * 100,
-        )}).`,
-        action: "Compress repeated policy text and move stable guidance into reusable memory.",
-        savingTokens: estimatedSaving(tokens, SYSTEM_PROMPT_SAVINGS_RATIO),
-        target: largestSegmentForRole(segments, "system"),
-      };
-    }
-    case "history-bloat": {
-      const tokens = historyTokens(intelligence);
-      return {
-        key: "history-bloat",
-        kind: "history-bloat",
-        severity: diagnostic.severity,
-        title: "Conversation history growth",
-        impact: diagnostic.detail,
-        action: "Summarize older turns and trim resolved tool outputs before continuing.",
-        savingTokens: estimatedSaving(tokens, HISTORY_SAVINGS_RATIO),
-        target: largestSegmentForHistory(segments),
-      };
-    }
-  }
-}
-
-function buildContextAdvisorItems({
-  intelligence,
-  segments,
-}: {
-  intelligence: ContextIntelligence;
-  segments: readonly AnatomySegment[];
-}): ContextAdvisorItem[] {
-  const items: ContextAdvisorItem[] = [];
-
-  if (intelligence.riskLevel === "watch" || intelligence.riskLevel === "danger") {
-    items.push({
-      key: "context-pressure",
-      kind: "context-pressure",
-      severity: intelligence.riskLevel === "danger" ? "danger" : "watch",
-      title: "Context window pressure",
-      impact: `${formatUsagePercent(intelligence.usagePercent)} used, ${formatRemainingTokens(
-        intelligence.remainingAfterReserveTokens,
-      )} remaining after output reserve.`,
-      action: "Start with the largest context block, then remove duplicates or summarize history.",
-      savingTokens: null,
-      target: [...segments].sort((left, right) => right.size - left.size)[0] ?? null,
-    });
-  }
-
-  if (intelligence.contextWindow.source === "unknown") {
-    items.push({
-      key: "context-window",
-      kind: "context-window",
-      severity: "watch",
-      title: "Context window unknown",
-      impact: "Agent Inspector cannot calculate remaining space for this model.",
-      action: "Add model metadata in Provider settings so risk and remaining space are accurate.",
-      savingTokens: null,
-      target: null,
-    });
-  }
-
-  intelligence.diagnostics.forEach((diagnostic) => {
-    items.push(advisorItemFromDiagnostic({ diagnostic, intelligence, segments }));
-  });
-
-  return items;
-}
-
-function ContextAdvisorPanel({
-  items,
-  onSegmentActivate,
-}: {
-  items: readonly ContextAdvisorItem[];
-  onSegmentActivate?: (segment: AnatomySegment) => void;
-}): JSX.Element | null {
-  if (items.length === 0) return null;
-
-  return (
-    <section className="space-y-2 rounded border border-border/70 bg-muted/15 p-2">
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <div className="text-xs font-medium text-foreground">Context Advisor</div>
-        <div className="font-mono text-[11px] text-muted-foreground">
-          {String(items.length)} issue{items.length === 1 ? "" : "s"}
-        </div>
-      </div>
-      <div className="grid gap-2">
-        {items.map((item) => {
-          const target = item.target;
-          const canJump = target !== null && onSegmentActivate !== undefined;
-          return (
-            <div
-              key={item.key}
-              className={cn("rounded border px-2 py-1.5 text-xs", advisorTone(item.severity))}
-            >
-              <div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
-                <div className="min-w-0">
-                  <div className="font-medium">{item.title}</div>
-                  <div className="mt-0.5 text-[11px] text-muted-foreground">
-                    Impact: {item.impact}
-                  </div>
-                  <div className="mt-0.5 text-[11px] text-muted-foreground">
-                    Action: {item.action}
-                  </div>
-                </div>
-                <div className="flex shrink-0 items-center gap-1.5">
-                  {item.savingTokens !== null && (
-                    <span className="font-mono text-[11px] text-muted-foreground">
-                      Save ~{formatTokens(item.savingTokens)}
-                    </span>
-                  )}
-                  {canJump && target !== null && onSegmentActivate !== undefined && (
-                    <button
-                      type="button"
-                      onClick={() => onSegmentActivate(target)}
-                      className="inline-flex h-6 items-center gap-1 rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground"
-                      title="Jump to the most relevant context block"
-                    >
-                      <ChevronRight className="size-3" />
-                      Jump
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </section>
-  );
-}
-
-function ContextIntelligenceStrip({
-  intelligence,
-  segments,
-  onSegmentActivate,
-}: {
-  intelligence: ContextIntelligence;
-  segments: readonly AnatomySegment[];
-  onSegmentActivate?: (segment: AnatomySegment) => void;
-}): JSX.Element {
-  const usageWidth =
-    intelligence.usagePercent === null ? 0 : Math.max(1, intelligence.usagePercent * 100);
-  const outputReserveLabel =
-    intelligence.outputReserveTokens === null
-      ? "No output reserve"
-      : `Output reserve ${formatTokens(intelligence.outputReserveTokens)}`;
-  const largestRole = intelligence.largestRole;
-  const advisorItems = buildContextAdvisorItems({ intelligence, segments });
-
-  return (
-    <div className="space-y-2">
-      <div className="grid gap-x-4 gap-y-2 border-y border-border/60 py-2 text-xs sm:grid-cols-4">
-        <div className="min-w-0">
-          <div className="text-[10px] font-medium uppercase text-muted-foreground">Window</div>
-          <div className="mt-0.5 truncate font-mono text-foreground">
-            {formatContextLimit(intelligence)}
-          </div>
-          <div className="truncate text-[11px] text-muted-foreground">
-            {formatContextSource(intelligence)}
-          </div>
-        </div>
-
-        <div className="min-w-0">
-          <div className="text-[10px] font-medium uppercase text-muted-foreground">Used</div>
-          <div className={cn("mt-0.5 font-mono", RISK_TEXT_CLASS[intelligence.riskLevel])}>
-            {formatUsagePercent(intelligence.usagePercent)}
-          </div>
-          <div className="truncate text-[11px] text-muted-foreground">{outputReserveLabel}</div>
-        </div>
-
-        <div className="min-w-0">
-          <div className="text-[10px] font-medium uppercase text-muted-foreground">Remaining</div>
-          <div className="mt-0.5 font-mono text-foreground">
-            {formatRemainingTokens(intelligence.remainingAfterReserveTokens)}
-          </div>
-          <div className="truncate text-[11px] text-muted-foreground">
-            Input only {formatRemainingTokens(intelligence.remainingInputTokens)}
-          </div>
-        </div>
-
-        <div className="min-w-0">
-          <div className="text-[10px] font-medium uppercase text-muted-foreground">Largest</div>
-          {largestRole === null ? (
-            <div className="mt-0.5 text-muted-foreground">Unknown</div>
-          ) : (
-            <>
-              <div className="mt-0.5 flex min-w-0 items-center gap-1.5">
-                <span
-                  aria-hidden="true"
-                  className={cn(
-                    "size-2.5 shrink-0 rounded-[2px]",
-                    ROLE_COLOR_CLASSES[largestRole.role],
-                  )}
-                />
-                <span className="truncate text-foreground">{largestRole.label}</span>
-              </div>
-              <div className="truncate font-mono text-[11px] text-muted-foreground">
-                {formatPercent(largestRole.percent * 100)} | ~{formatTokens(largestRole.tokens)}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-
-      {intelligence.contextWindow.tokens !== null && (
-        <div className="space-y-1.5">
-          <div className="relative h-2 overflow-hidden rounded-full bg-muted/40">
-            <div
-              className={cn("h-full rounded-full", RISK_CLASS[intelligence.riskLevel])}
-              style={{ width: `${String(usageWidth)}%` }}
-            />
-            <div
-              aria-hidden="true"
-              className="absolute top-0 h-full w-px bg-amber-200/70"
-              style={{ left: `${String(CONTEXT_USAGE_THRESHOLDS.watch * 100)}%` }}
-            />
-            <div
-              aria-hidden="true"
-              className="absolute top-0 h-full w-px bg-red-200/80"
-              style={{ left: `${String(CONTEXT_USAGE_THRESHOLDS.danger * 100)}%` }}
-            />
-          </div>
-          <div className="flex justify-between text-[10px] text-muted-foreground">
-            <span>Context window</span>
-            <span>
-              Watch {formatUsagePercent(CONTEXT_USAGE_THRESHOLDS.watch)} / Danger{" "}
-              {formatUsagePercent(CONTEXT_USAGE_THRESHOLDS.danger)}
-            </span>
-          </div>
-        </div>
-      )}
-
-      <ContextAdvisorPanel items={advisorItems} onSegmentActivate={onSegmentActivate} />
-    </div>
-  );
-}
-
-function resolveDuplicateSegment(
-  duplicateSegment: DuplicateContextSegment,
-  segments: readonly AnatomySegment[],
-): AnatomySegment | null {
-  return segments.find((segment) => segment.path === duplicateSegment.path) ?? null;
-}
-
-function DuplicateContentPanel({
-  groups,
-  segments,
-  onSegmentActivate,
-}: {
-  groups: readonly DuplicateContextGroup[];
-  segments: readonly AnatomySegment[];
-  onSegmentActivate?: (segment: AnatomySegment) => void;
-}): JSX.Element | null {
-  const [expanded, setExpanded] = useState(false);
-
-  if (groups.length === 0) return null;
-
-  const visibleGroups = groups.slice(0, DUPLICATE_GROUP_DISPLAY_COUNT);
-  const hiddenGroupCount = groups.length - visibleGroups.length;
-  const totalRepeatedTokens = groups.reduce((sum, group) => sum + group.repeatedTokens, 0);
-
-  return (
-    <section className="space-y-2 rounded border border-border/70 bg-muted/15 p-2">
-      <button
-        type="button"
-        onClick={() => setExpanded((current) => !current)}
-        aria-expanded={expanded}
-        className="flex w-full flex-wrap items-center justify-between gap-2 rounded px-1 py-0.5 text-left transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
-      >
-        <span className="inline-flex min-w-0 items-center gap-1.5">
-          {expanded ? (
-            <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
-          )}
-          <span className="truncate text-xs font-medium text-foreground">Duplicate Content</span>
-        </span>
-        <span className="font-mono text-[11px] text-muted-foreground">
-          {String(groups.length)} group{groups.length === 1 ? "" : "s"} | ~
-          {formatTokens(totalRepeatedTokens)} repeated
-        </span>
-      </button>
-
-      {expanded && (
-        <>
-          <div className="space-y-2">
-            {visibleGroups.map((group, groupIndex) => {
-              const visibleSegments = group.segments.slice(0, DUPLICATE_SEGMENT_DISPLAY_COUNT);
-              const hiddenSegmentCount = group.segments.length - visibleSegments.length;
-              return (
-                <div
-                  key={group.key}
-                  className="space-y-1.5 border-t border-border/50 pt-2 first:border-t-0 first:pt-0"
-                >
-                  <div className="flex min-w-0 items-center gap-2 text-xs">
-                    <span className="w-5 shrink-0 text-right font-mono text-muted-foreground/70">
-                      {String(groupIndex + 1)}
-                    </span>
-                    <span className="min-w-0 flex-1 truncate text-foreground">
-                      {group.firstLabel}
-                    </span>
-                    <span className="shrink-0 font-mono text-muted-foreground">
-                      x{String(group.count)} | ~{formatTokens(group.repeatedTokens)} saved
-                    </span>
-                  </div>
-
-                  {group.preview.length > 0 && (
-                    <div className="ml-7 line-clamp-2 break-words rounded bg-background/40 px-2 py-1 font-mono text-[11px] leading-4 text-muted-foreground">
-                      {group.preview}
-                    </div>
-                  )}
-
-                  <div className="ml-7 flex flex-wrap gap-1">
-                    {visibleSegments.map((duplicateSegment, segmentIndex) => {
-                      const target = resolveDuplicateSegment(duplicateSegment, segments);
-                      const activate =
-                        target === null || onSegmentActivate === undefined
-                          ? undefined
-                          : onSegmentActivate;
-                      const label = `${duplicateSegment.label} ~${formatTokens(
-                        duplicateSegment.tokens,
-                      )}`;
-                      if (activate === undefined || target === null) {
-                        return (
-                          <span
-                            key={`${duplicateSegment.path}-${segmentIndex}`}
-                            className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground"
-                            title={label}
-                          >
-                            <span className="truncate">{label}</span>
-                          </span>
-                        );
-                      }
-                      return (
-                        <button
-                          key={`${duplicateSegment.path}-${segmentIndex}`}
-                          type="button"
-                          onClick={() => activate(target)}
-                          className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground"
-                          title="Jump to this duplicate block"
-                        >
-                          <span className="truncate">{label}</span>
-                        </button>
-                      );
-                    })}
-                    {hiddenSegmentCount > 0 && (
-                      <span className="inline-flex h-6 items-center rounded border border-border/40 px-1.5 font-mono text-[11px] text-muted-foreground/70">
-                        +{String(hiddenSegmentCount)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          {hiddenGroupCount > 0 && (
-            <div className="border-t border-border/50 pt-2 font-mono text-[11px] text-muted-foreground">
-              +{String(hiddenGroupCount)} more duplicate group{hiddenGroupCount === 1 ? "" : "s"}
-            </div>
-          )}
-        </>
-      )}
-    </section>
-  );
-}
-
-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 a request context breakdown: headline metrics, a stacked token bar,
- * role legend, and the largest individual context blocks.
- */
-export function RequestAnatomy({
-  parsed,
-  inputTokens,
-  model = null,
-  onSegmentActivate,
-  segments: providedSegments,
-}: RequestAnatomyProps): JSX.Element | null {
-  const { providers } = useProviders();
-  const [viewMode, setViewMode] = useState<ContextViewMode>("role");
-  const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
-  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],
-  );
-  const intelligence = useMemo(
-    () =>
-      segments === null
-        ? null
-        : analyzeContextIntelligence({
-            segments,
-            inputTokens,
-            parsed,
-            model,
-            providers,
-          }),
-    [inputTokens, model, parsed, providers, segments],
-  );
-
-  const showDivergenceWarning = useMemo(() => {
-    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]);
-
-  if (segments === null) 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)}`;
-  const contextLimitLabel =
-    intelligence === null ? "Limit unknown" : `Limit ${formatContextLimit(intelligence)}`;
-  const usageLabel =
-    intelligence === null
-      ? "Usage unknown"
-      : `${formatUsagePercent(intelligence.usagePercent)} used`;
-
-  return (
-    <TooltipProvider delayDuration={150}>
-      <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="flex min-w-0 flex-wrap items-center gap-2">
-              <div className="text-sm font-semibold text-foreground">Request Context</div>
-              {intelligence !== null && <ContextHealthBadge health={intelligence.health} />}
-            </div>
-            <div className={cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass)}>
-              Estimated ~{formatTokens(total)} tokens | {providerInputLabel} | {contextLimitLabel} |{" "}
-              {usageLabel} | {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 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">
-                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>
-        )}
-
-        {intelligence !== null && (
-          <ContextIntelligenceStrip
-            intelligence={intelligence}
-            segments={segments}
-            onSegmentActivate={onSegmentActivate}
-          />
-        )}
-
-        {intelligence !== null && (
-          <DuplicateContentPanel
-            groups={intelligence.duplicateGroups}
-            segments={segments}
-            onSegmentActivate={onSegmentActivate}
-          />
-        )}
-
-        <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>
-      </div>
-    </TooltipProvider>
-  );
-}