@tonyclaw/agent-inspector 2.0.11 → 2.0.13

package/.output/server/_ssr/RequestAnatomy-to_rezzu.mjs

@@ -0,0 +1,882 @@
+import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
+import { u as useProviders, p as analyzeContextIntelligence, f as formatTokens, k as TooltipProvider, c as cn, l as Tooltip, m as TooltipTrigger, n as TooltipContent, S as SegmentBar, R as ROLE_COLOR_CLASSES, A as ANATOMY_ROLE_LABELS, q as formatContextWindowTokens, C as CONTEXT_USAGE_THRESHOLDS } from "./ProxyViewerContainer-Co-WKq6u.mjs";
+import "./router-RDBAF-Iu.mjs";
+import "../_libs/modelcontextprotocol__server.mjs";
+import "../_libs/jszip.mjs";
+import { ac as Info, b as ChevronDown, f as ChevronRight } from "../_libs/lucide-react.mjs";
+import "../_libs/swr.mjs";
+import "../_libs/use-sync-external-store.mjs";
+import "../_libs/dequal.mjs";
+import "../_libs/clsx.mjs";
+import "../_libs/tailwind-merge.mjs";
+import "../_libs/class-variance-authority.mjs";
+import "../_libs/radix-ui__react-dialog.mjs";
+import "../_libs/radix-ui__primitive.mjs";
+import "../_libs/radix-ui__react-compose-refs.mjs";
+import "../_libs/radix-ui__react-context.mjs";
+import "../_libs/radix-ui__react-id.mjs";
+import "../_libs/@radix-ui/react-use-layout-effect+[...].mjs";
+import "../_libs/@radix-ui/react-use-controllable-state+[...].mjs";
+import "../_libs/@radix-ui/react-dismissable-layer+[...].mjs";
+import "../_libs/radix-ui__react-primitive.mjs";
+import "../_libs/react-dom.mjs";
+import "util";
+import "async_hooks";
+import "stream";
+import "crypto";
+import "../_libs/radix-ui__react-slot.mjs";
+import "../_libs/@radix-ui/react-use-callback-ref+[...].mjs";
+import "../_libs/@radix-ui/react-use-escape-keydown+[...].mjs";
+import "../_libs/radix-ui__react-focus-scope.mjs";
+import "../_libs/radix-ui__react-portal.mjs";
+import "../_libs/radix-ui__react-presence.mjs";
+import "../_libs/radix-ui__react-focus-guards.mjs";
+import "../_libs/react-remove-scroll.mjs";
+import "tslib";
+import "../_libs/react-remove-scroll-bar.mjs";
+import "../_libs/react-style-singleton.mjs";
+import "../_libs/get-nonce.mjs";
+import "../_libs/use-sidecar.mjs";
+import "../_libs/use-callback-ref.mjs";
+import "../_libs/aria-hidden.mjs";
+import "../_libs/diff.mjs";
+import "../_libs/tanstack__react-virtual.mjs";
+import "../_libs/tanstack__virtual-core.mjs";
+import "../_libs/radix-ui__react-select.mjs";
+import "../_libs/radix-ui__number.mjs";
+import "../_libs/radix-ui__react-collection.mjs";
+import "../_libs/radix-ui__react-direction.mjs";
+import "../_libs/radix-ui__react-popper.mjs";
+import "../_libs/floating-ui__react-dom.mjs";
+import "../_libs/floating-ui__dom.mjs";
+import "../_libs/floating-ui__core.mjs";
+import "../_libs/floating-ui__utils.mjs";
+import "../_libs/radix-ui__react-arrow.mjs";
+import "../_libs/radix-ui__react-use-size.mjs";
+import "../_libs/radix-ui__react-use-previous.mjs";
+import "../_libs/@radix-ui/react-visually-hidden+[...].mjs";
+import "../_libs/react-markdown.mjs";
+import "../_libs/devlop.mjs";
+import "../_libs/unified.mjs";
+import "../_libs/bail.mjs";
+import "../_libs/extend.mjs";
+import "../_libs/is-plain-obj.mjs";
+import "../_libs/trough.mjs";
+import "../_libs/vfile.mjs";
+import "../_libs/vfile-message.mjs";
+import "../_libs/unist-util-stringify-position.mjs";
+import "node:process";
+import "node:path";
+import "node:url";
+import "../_libs/remark-parse.mjs";
+import "../_libs/mdast-util-from-markdown.mjs";
+import "../_libs/micromark-util-decode-numeric-character-reference+[...].mjs";
+import "../_libs/micromark-util-decode-string.mjs";
+import "../_libs/decode-named-character-reference+[...].mjs";
+import "../_libs/character-entities.mjs";
+import "../_libs/micromark-util-normalize-identifier+[...].mjs";
+import "../_libs/micromark.mjs";
+import "../_libs/micromark-util-combine-extensions+[...].mjs";
+import "../_libs/micromark-util-chunked.mjs";
+import "../_libs/micromark-factory-space.mjs";
+import "../_libs/micromark-util-character.mjs";
+import "../_libs/micromark-core-commonmark.mjs";
+import "../_libs/micromark-util-classify-character+[...].mjs";
+import "../_libs/micromark-util-resolve-all.mjs";
+import "../_libs/micromark-util-subtokenize.mjs";
+import "../_libs/micromark-factory-destination.mjs";
+import "../_libs/micromark-factory-label.mjs";
+import "../_libs/micromark-factory-title.mjs";
+import "../_libs/micromark-factory-whitespace.mjs";
+import "../_libs/micromark-util-html-tag-name.mjs";
+import "../_libs/mdast-util-to-string.mjs";
+import "../_libs/remark-rehype.mjs";
+import "../_libs/mdast-util-to-hast.mjs";
+import "../_libs/ungap__structured-clone.mjs";
+import "../_libs/micromark-util-sanitize-uri.mjs";
+import "../_libs/unist-util-position.mjs";
+import "../_libs/trim-lines.mjs";
+import "../_libs/unist-util-visit.mjs";
+import "../_libs/unist-util-visit-parents.mjs";
+import "../_libs/unist-util-is.mjs";
+import "../_libs/hast-util-to-jsx-runtime.mjs";
+import "../_libs/comma-separated-tokens.mjs";
+import "../_libs/property-information.mjs";
+import "../_libs/space-separated-tokens.mjs";
+import "../_libs/style-to-js.mjs";
+import "../_libs/style-to-object.mjs";
+import "../_libs/inline-style-parser.mjs";
+import "../_libs/hast-util-whitespace.mjs";
+import "../_libs/estree-util-is-identifier-name.mjs";
+import "../_libs/html-url-attributes.mjs";
+import "../_libs/zod.mjs";
+import "../_libs/radix-ui__react-tooltip.mjs";
+import "../_libs/radix-ui__react-tabs.mjs";
+import "../_libs/radix-ui__react-roving-focus.mjs";
+import "../_libs/radix-ui__react-collapsible.mjs";
+import "../_libs/radix-ui__react-scroll-area.mjs";
+import "../_libs/tanstack__react-router.mjs";
+import "../_libs/tiny-warning.mjs";
+import "../_libs/tanstack__router-core.mjs";
+import "../_libs/cookie-es.mjs";
+import "../_libs/tanstack__history.mjs";
+import "../_libs/tiny-invariant.mjs";
+import "../_libs/seroval.mjs";
+import "../_libs/seroval-plugins.mjs";
+import "node:stream/web";
+import "node:stream";
+import "../_libs/isbot.mjs";
+import "node:fs";
+import "node:fs/promises";
+import "node:buffer";
+import "node:child_process";
+import "../_libs/conf.mjs";
+import "node:util";
+import "node:crypto";
+import "node:assert";
+import "../_libs/dot-prop.mjs";
+import "../_libs/env-paths.mjs";
+import "node:os";
+import "../_libs/atomically.mjs";
+import "../_libs/stubborn-fs.mjs";
+import "../_libs/stubborn-utils.mjs";
+import "../_libs/when-exit.mjs";
+import "../_libs/ajv.mjs";
+import "../_libs/fast-deep-equal.mjs";
+import "../_libs/json-schema-traverse.mjs";
+import "../_libs/fast-uri.mjs";
+import "../_libs/ajv-formats.mjs";
+import "../_libs/debounce-fn.mjs";
+import "../_libs/mimic-function.mjs";
+import "../_libs/semver.mjs";
+import "../_libs/uint8array-extras.mjs";
+import "node:worker_threads";
+import "../_libs/readable-stream.mjs";
+import "events";
+import "node:string_decoder";
+import "../_libs/process-nextick-args.mjs";
+import "../_libs/isarray.mjs";
+import "../_libs/safe-buffer.mjs";
+import "buffer";
+import "../_libs/core-util-is.mjs";
+import "../_libs/inherits.mjs";
+import "../_libs/util-deprecate.mjs";
+import "../_libs/lie.mjs";
+import "../_libs/immediate.mjs";
+import "../_libs/setimmediate.mjs";
+import "../_libs/pako.mjs";
+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 = ["system", "user", "assistant", "tool", "tools"];
+const ROLE_DESCRIPTIONS = {
+  system: "instructions",
+  user: "user turns",
+  assistant: "assistant turns",
+  tool: "tool results",
+  tools: "tool schemas"
+};
+const VIEW_MODE_OPTIONS = [
+  { value: "role", label: "By Role" },
+  { value: "segment", label: "By Segment" }
+];
+const RISK_CLASS = {
+  unknown: "bg-muted-foreground/50",
+  ok: "bg-emerald-500/70",
+  watch: "bg-amber-400/75",
+  danger: "bg-red-500/80"
+};
+const RISK_TEXT_CLASS = {
+  unknown: "text-muted-foreground",
+  ok: "text-emerald-400",
+  watch: "text-amber-300",
+  danger: "text-red-300"
+};
+const HEALTH_BADGE_CLASS = {
+  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 = {
+  ok: "OK",
+  optimizable: "Optimizable",
+  risk: "Risk"
+};
+function formatPercent(value) {
+  if (value >= 10) return `${value.toFixed(0)}%`;
+  if (value >= 1) return `${value.toFixed(1)}%`;
+  if (value > 0) return "<1%";
+  return "0%";
+}
+function formatUsagePercent(value) {
+  if (value === null) return "Unknown";
+  return formatPercent(value * 100);
+}
+function formatRemainingTokens(value) {
+  if (value === null) return "Unknown";
+  if (value < 0) return `-${formatTokens(Math.abs(value))}`;
+  return formatTokens(value);
+}
+function formatContextLimit(intelligence) {
+  if (intelligence.contextWindow.tokens === null) return "Unknown";
+  return formatContextWindowTokens(intelligence.contextWindow.tokens);
+}
+function formatContextSource(intelligence) {
+  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) {
+  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) {
+  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 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "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)}`,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: formatContextHealth(health) })
+    }
+  );
+}
+function roleUsageTokens(intelligence, role) {
+  return intelligence.roleUsages.find((usage) => usage.role === role)?.tokens ?? 0;
+}
+function roleUsagePercent(intelligence, role) {
+  return intelligence.roleUsages.find((usage) => usage.role === role)?.percent ?? 0;
+}
+function estimatedSaving(tokens, ratio) {
+  if (tokens <= 0) return null;
+  const saving = Math.round(tokens * ratio);
+  return saving > 0 ? saving : null;
+}
+function largestSegmentForRole(segments, role) {
+  return [...segments].filter((segment) => segment.role === role).sort((left, right) => right.size - left.size)[0] ?? null;
+}
+function largestSegmentForHistory(segments) {
+  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, segments) {
+  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) {
+  const saving = groups.reduce((sum, group) => sum + group.repeatedTokens, 0);
+  return saving > 0 ? saving : null;
+}
+function historyTokens(intelligence) {
+  return roleUsageTokens(intelligence, "user") + roleUsageTokens(intelligence, "assistant") + roleUsageTokens(intelligence, "tool");
+}
+function advisorItemFromDiagnostic({
+  diagnostic,
+  intelligence,
+  segments
+}) {
+  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
+}) {
+  const items = [];
+  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
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "space-y-2 rounded border border-border/70 bg-muted/15 p-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-foreground", children: "Context Advisor" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono text-[11px] text-muted-foreground", children: [
+        String(items.length),
+        " issue",
+        items.length === 1 ? "" : "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2", children: items.map((item) => {
+      const target = item.target;
+      const canJump = target !== null && onSegmentActivate !== void 0;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: cn("rounded border px-2 py-1.5 text-xs", advisorTone(item.severity)),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: item.title }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-0.5 text-[11px] text-muted-foreground", children: [
+                "Impact: ",
+                item.impact
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-0.5 text-[11px] text-muted-foreground", children: [
+                "Action: ",
+                item.action
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+              item.savingTokens !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-[11px] text-muted-foreground", children: [
+                "Save ~",
+                formatTokens(item.savingTokens)
+              ] }),
+              canJump && target !== null && onSegmentActivate !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "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",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
+                    "Jump"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        },
+        item.key
+      );
+    }) })
+  ] });
+}
+function ContextIntelligenceStrip({
+  intelligence,
+  segments,
+  onSegmentActivate
+}) {
+  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 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-x-4 gap-y-2 border-y border-border/60 py-2 text-xs sm:grid-cols-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase text-muted-foreground", children: "Window" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 truncate font-mono text-foreground", children: formatContextLimit(intelligence) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: formatContextSource(intelligence) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase text-muted-foreground", children: "Used" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("mt-0.5 font-mono", RISK_TEXT_CLASS[intelligence.riskLevel]), children: formatUsagePercent(intelligence.usagePercent) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: outputReserveLabel })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase text-muted-foreground", children: "Remaining" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 font-mono text-foreground", children: formatRemainingTokens(intelligence.remainingAfterReserveTokens) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "truncate text-[11px] text-muted-foreground", children: [
+          "Input only ",
+          formatRemainingTokens(intelligence.remainingInputTokens)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium uppercase text-muted-foreground", children: "Largest" }),
+        largestRole === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 text-muted-foreground", children: "Unknown" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "size-2.5 shrink-0 rounded-[2px]",
+                  ROLE_COLOR_CLASSES[largestRole.role]
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-foreground", children: largestRole.label })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "truncate font-mono text-[11px] text-muted-foreground", children: [
+            formatPercent(largestRole.percent * 100),
+            " | ~",
+            formatTokens(largestRole.tokens)
+          ] })
+        ] })
+      ] })
+    ] }),
+    intelligence.contextWindow.tokens !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-2 overflow-hidden rounded-full bg-muted/40", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full", RISK_CLASS[intelligence.riskLevel]),
+            style: { width: `${String(usageWidth)}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-0 h-full w-px bg-amber-200/70",
+            style: { left: `${String(CONTEXT_USAGE_THRESHOLDS.watch * 100)}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-0 h-full w-px bg-red-200/80",
+            style: { left: `${String(CONTEXT_USAGE_THRESHOLDS.danger * 100)}%` }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Context window" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+          "Watch ",
+          formatUsagePercent(CONTEXT_USAGE_THRESHOLDS.watch),
+          " / Danger",
+          " ",
+          formatUsagePercent(CONTEXT_USAGE_THRESHOLDS.danger)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ContextAdvisorPanel, { items: advisorItems, onSegmentActivate })
+  ] });
+}
+function resolveDuplicateSegment(duplicateSegment, segments) {
+  return segments.find((segment) => segment.path === duplicateSegment.path) ?? null;
+}
+function DuplicateContentPanel({
+  groups,
+  segments,
+  onSegmentActivate
+}) {
+  const [expanded, setExpanded] = reactExports.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 /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "space-y-2 rounded border border-border/70 bg-muted/15 p-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "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",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
+            expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-xs font-medium text-foreground", children: "Duplicate Content" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-[11px] text-muted-foreground", children: [
+            String(groups.length),
+            " group",
+            groups.length === 1 ? "" : "s",
+            " | ~",
+            formatTokens(totalRepeatedTokens),
+            " repeated"
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: visibleGroups.map((group, groupIndex) => {
+        const visibleSegments = group.segments.slice(0, DUPLICATE_SEGMENT_DISPLAY_COUNT);
+        const hiddenSegmentCount = group.segments.length - visibleSegments.length;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "space-y-1.5 border-t border-border/50 pt-2 first:border-t-0 first:pt-0",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-5 shrink-0 text-right font-mono text-muted-foreground/70", children: String(groupIndex + 1) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-foreground", children: group.firstLabel }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "shrink-0 font-mono text-muted-foreground", children: [
+                  "x",
+                  String(group.count),
+                  " | ~",
+                  formatTokens(group.repeatedTokens),
+                  " saved"
+                ] })
+              ] }),
+              group.preview.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: group.preview }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ml-7 flex flex-wrap gap-1", children: [
+                visibleSegments.map((duplicateSegment, segmentIndex) => {
+                  const target = resolveDuplicateSegment(duplicateSegment, segments);
+                  const activate = target === null || onSegmentActivate === void 0 ? void 0 : onSegmentActivate;
+                  const label = `${duplicateSegment.label} ~${formatTokens(
+                    duplicateSegment.tokens
+                  )}`;
+                  if (activate === void 0 || target === null) {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "span",
+                      {
+                        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,
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: label })
+                      },
+                      `${duplicateSegment.path}-${segmentIndex}`
+                    );
+                  }
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      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",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: label })
+                    },
+                    `${duplicateSegment.path}-${segmentIndex}`
+                  );
+                }),
+                hiddenSegmentCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex h-6 items-center rounded border border-border/40 px-1.5 font-mono text-[11px] text-muted-foreground/70", children: [
+                  "+",
+                  String(hiddenSegmentCount)
+                ] })
+              ] })
+            ]
+          },
+          group.key
+        );
+      }) }),
+      hiddenGroupCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border/50 pt-2 font-mono text-[11px] text-muted-foreground", children: [
+        "+",
+        String(hiddenGroupCount),
+        " more duplicate group",
+        hiddenGroupCount === 1 ? "" : "s"
+      ] })
+    ] })
+  ] });
+}
+function aggregateByRole(segments) {
+  const result = [];
+  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) {
+  return [...segments].sort((a, b) => b.size - a.size).slice(0, TOP_CONTRIBUTOR_COUNT);
+}
+function RequestAnatomy({
+  parsed,
+  inputTokens,
+  model = null,
+  onSegmentActivate,
+  segments: providedSegments
+}) {
+  const { providers } = useProviders();
+  const [viewMode, setViewMode] = reactExports.useState("role");
+  const segments = reactExports.useMemo(() => providedSegments ?? null, [providedSegments]);
+  const total = reactExports.useMemo(
+    () => (segments ?? []).reduce((sum, segment) => sum + segment.size, 0),
+    [segments]
+  );
+  const roleSegments = reactExports.useMemo(
+    () => segments === null ? [] : aggregateByRole(segments),
+    [segments]
+  );
+  const topSegments = reactExports.useMemo(
+    () => segments === null ? [] : topContributors(segments),
+    [segments]
+  );
+  const intelligence = reactExports.useMemo(
+    () => segments === null ? null : analyzeContextIntelligence({
+      segments,
+      inputTokens,
+      parsed,
+      model,
+      providers
+    }),
+    [inputTokens, model, parsed, providers, segments]
+  );
+  const showDivergenceWarning = reactExports.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 === void 0) 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 : void 0;
+  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 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", "data-testid": "anatomy-root", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Request Context" }),
+          intelligence !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ContextHealthBadge, { health: intelligence.health })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass), children: [
+          "Estimated ~",
+          formatTokens(total),
+          " tokens | ",
+          providerInputLabel,
+          " | ",
+          contextLimitLabel,
+          " |",
+          " ",
+          usageLabel,
+          " | ",
+          segmentCountLabel
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "inline-flex shrink-0 rounded border border-border bg-muted/20 p-0.5",
+          role: "group",
+          "aria-label": "Context breakdown mode",
+          children: VIEW_MODE_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              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"
+              ),
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      )
+    ] }),
+    showDivergenceWarning && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center gap-1.5 text-xs text-amber-400", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center hover:text-amber-300",
+            "aria-label": "Token estimate differs from provider input",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "size-3.5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "max-w-xs text-xs", children: "The bar uses a local token estimate. Provider input tokens remain the source of truth for billing and context-window usage." })
+      ] }),
+      "Estimate differs from provider-reported input."
+    ] }),
+    intelligence !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ContextIntelligenceStrip,
+      {
+        intelligence,
+        segments,
+        onSegmentActivate
+      }
+    ),
+    intelligence !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DuplicateContentPanel,
+      {
+        groups: intelligence.duplicateGroups,
+        segments,
+        onSegmentActivate
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SegmentBar,
+      {
+        segments: displayedSegments,
+        totalTokens: displayedTotal,
+        showLabels: viewMode === "segment",
+        onActivate: activateSegment
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px] text-muted-foreground", children: roleSegments.map((segment) => {
+      const percent = total > 0 ? segment.size / total * 100 : 0;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("size-2.5 rounded-[2px]", ROLE_COLOR_CLASSES[segment.role])
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: segment.label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground/70", children: formatPercent(percent) })
+      ] }, segment.role);
+    }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-medium text-foreground", children: "Top Contributors" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-1", children: topSegments.map((segment, index) => {
+        const percent = total > 0 ? segment.size / total * 100 : 0;
+        const activate = onSegmentActivate;
+        const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-5 shrink-0 text-right font-mono text-muted-foreground/70", children: String(index + 1) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-2.5 shrink-0 rounded-[2px]",
+                ROLE_COLOR_CLASSES[segment.role]
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: segment.label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "shrink-0 font-mono text-muted-foreground", children: [
+            formatPercent(percent),
+            " | ~",
+            formatTokens(segment.size)
+          ] })
+        ] });
+        if (activate !== void 0) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              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",
+              children: content
+            },
+            `${segment.path}-${index}`
+          );
+        }
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "flex h-7 items-center gap-2 rounded px-1.5 text-xs text-muted-foreground",
+            children: content
+          },
+          `${segment.path}-${index}`
+        );
+      }) })
+    ] })
+  ] }) });
+}
+export {
+  RequestAnatomy
+};