@tonyclaw/agent-inspector 2.0.5 → 2.0.6

package/.output/server/{_sessionId-DWCTasJU.mjs → _sessionId-B-x9fRY3.mjs}

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "./_libs/react.mjs";
-import { P as ProxyViewerContainer } from "./_ssr/ProxyViewerContainer-DRl51s_n.mjs";
-import { R as Route$p } from "./_ssr/router-Dl7oh0zx.mjs";
+import { P as ProxyViewerContainer } from "./_ssr/ProxyViewerContainer-CYm2Dw19.mjs";
+import { R as Route$p } from "./_ssr/router-DGPt3MUc.mjs";
 import "./_libs/jszip.mjs";
 import "./_libs/modelcontextprotocol__server.mjs";
 import "./_libs/swr.mjs";

package/.output/server/_ssr/{CompareDrawer-DhrN1uC2.mjs → CompareDrawer-BQVNsAY2.mjs}

@@ -1,7 +1,7 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { g as getLogFormatAdapter, r as resolveLogFormat, a as getConversationId, c as cn, B as Badge, f as formatTokens } from "./ProxyViewerContainer-DRl51s_n.mjs";
-import { JsonViewerFromString } from "./json-viewer-DDU55MLK.mjs";
-import "./router-Dl7oh0zx.mjs";
+import { g as getLogFormatAdapter, r as resolveLogFormat, a as getConversationId, c as cn, B as Badge, f as formatTokens } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import { JsonViewerFromString } from "./json-viewer-d4obyRaA.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import { X, a1 as Rows3, a2 as Columns2, n as Minus, P as Plus, m as Pencil, f as ChevronRight, a3 as Equal, C as Check, a as Copy } from "../_libs/lucide-react.mjs";

package/.output/server/_ssr/{ProxyViewerContainer-DRl51s_n.mjs → ProxyViewerContainer-CYm2Dw19.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as DEFAULT_TIME_DISPLAY_FORMAT, b as RuntimeConfigSchema, r as requestFormatForPath, e as createPendingProviderTestResults, P as ProviderTestResultsSchema, f as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, T as TimeDisplayFormatSchema, g as getSessionPath, h as ProviderConfigSchema, K as KnowledgeCandidateSchema, s as stripClaudeCodeBillingHeader, d as safeGetOwnProperty, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, c as AnthropicRequestSchema } from "./router-Dl7oh0zx.mjs";
+import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as DEFAULT_TIME_DISPLAY_FORMAT, b as RuntimeConfigSchema, r as requestFormatForPath, e as createPendingProviderTestResults, P as ProviderTestResultsSchema, f as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, T as TimeDisplayFormatSchema, g as getSessionPath, h as ProviderConfigSchema, K as KnowledgeCandidateSchema, s as stripClaudeCodeBillingHeader, d as safeGetOwnProperty, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, c as AnthropicRequestSchema } from "./router-DGPt3MUc.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -295,7 +295,7 @@ function getStatusCategory(status) {
   if (status >= 500) return "server_error";
   return "pending";
 }
-const version = "2.0.5";
+const version = "2.0.6";
 const packageJson = {
   version
 };
@@ -1356,27 +1356,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-DhrN1uC2.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-BQVNsAY2.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-BQT_ygxC.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-CaMQBc79.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-DS2tZOgq.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy--P5arRH2.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-e0kL2C3x.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-RtFwNvgD.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-BJG-m7xs.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-B5HPkzab.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-DDU55MLK.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-d4obyRaA.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-DDU55MLK.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-d4obyRaA.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -2570,7 +2570,7 @@ const LogEntry = reactExports.memo(function({
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }),
           shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
-          anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "anatomy", children: "Anatomy" }),
+          anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "anatomy", children: "Context" }),
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
         ] }),
@@ -2587,7 +2587,7 @@ const LogEntry = reactExports.memo(function({
           {
             rawBody: log.rawRequestBody,
             displayedBody: displayedRequestBody,
-            emptyLabel: "No transformation applied — raw and sent request bodies are identical."
+            emptyLabel: "No transformation applied; raw and sent request bodies are identical."
           }
         ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: requestJsonRef, children: displayedRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : requestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           LazyJsonViewer,
@@ -2627,7 +2627,7 @@ const LogEntry = reactExports.memo(function({
             {
               rawHeaders: log.rawHeaders,
               headers: log.headers,
-              emptyLabel: "No transformation applied — raw and processed headers are identical."
+              emptyLabel: "No transformation applied; raw and processed headers are identical."
             }
           ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [

package/.output/server/_ssr/{ReplayDialog-BQT_ygxC.mjs → ReplayDialog-CaMQBc79.mjs}

@@ -1,10 +1,10 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { u as useProviders, D as Dialog, b as DialogContent, d as DialogHeader, e as DialogTitle, T as Tabs, h as TabsList, i as TabsTrigger, j as TabsContent, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent, o as Button } from "./ProxyViewerContainer-DRl51s_n.mjs";
-import { ResponseView } from "./ResponseView-e0kL2C3x.mjs";
-import "./router-Dl7oh0zx.mjs";
+import { u as useProviders, D as Dialog, b as DialogContent, d as DialogHeader, e as DialogTitle, T as Tabs, h as TabsList, i as TabsTrigger, j as TabsContent, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent, o as Button } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import { ResponseView } from "./ResponseView-RtFwNvgD.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
-import "./json-viewer-DDU55MLK.mjs";
+import "./json-viewer-d4obyRaA.mjs";
 import { I as RotateCcw } from "../_libs/lucide-react.mjs";
 import { d as object, c as boolean, n as number, b as string } from "../_libs/zod.mjs";
 import "../_libs/swr.mjs";

package/.output/server/_ssr/{RequestAnatomy-DS2tZOgq.mjs → RequestAnatomy--P5arRH2.mjs}

@@ -1,6 +1,6 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { k as TooltipProvider, f as formatTokens, c as cn, l as Tooltip, m as TooltipTrigger, n as TooltipContent } from "./ProxyViewerContainer-DRl51s_n.mjs";
-import "./router-Dl7oh0zx.mjs";
+import { f as formatTokens, k as TooltipProvider, c as cn, l as Tooltip, m as TooltipTrigger, n as TooltipContent } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import { a4 as Info } from "../_libs/lucide-react.mjs";
@@ -112,6 +112,13 @@ import "../_libs/lie.mjs";
 import "../_libs/immediate.mjs";
 import "../_libs/setimmediate.mjs";
 import "../_libs/pako.mjs";
+const ANATOMY_ROLE_LABELS = {
+  system: "System",
+  user: "User",
+  assistant: "Assistant",
+  tool: "Tool Results",
+  tools: "Tool Definitions"
+};
 const ROLE_COLOR_CLASSES = {
   system: "bg-sky-500/70",
   user: "bg-emerald-500/70",
@@ -132,35 +139,43 @@ const TOOLTIP_PREVIEW_LIMIT = 80;
 const LABEL_TRUNCATE_LIMIT = 24;
 function truncateLabel(label) {
   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) {
   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$1(value) {
+  if (value >= 10) return `${value.toFixed(0)}%`;
+  if (value >= 1) return `${value.toFixed(1)}%`;
+  if (value > 0) return "<1%";
+  return "0%";
 }
 const SegmentBar = reactExports.memo(function SegmentBar2({
   segments,
   totalTokens,
+  showLabels = true,
   onActivate
 }) {
   const total = reactExports.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 !== void 0;
   const visibleTotal = reactExports.useMemo(
-    () => visibleSegments.reduce((sum, s) => sum + s.size, 0),
+    () => visibleSegments.reduce((sum, segment) => sum + segment.size, 0),
     [visibleSegments]
   );
   const ariaLabel = reactExports.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]
   );
   if (segments.length === 0 || total <= 0) {
@@ -176,39 +191,47 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
           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$1(rawPercent)}, ~${formatTokens(
+              segment.size
+            )} tokens`;
             return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: interactive ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
                   type: "button",
                   role: "button",
                   tabIndex: 0,
-                  onClick: () => onActivate?.(segment),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      onActivate?.(segment);
+                  onClick: () => onActivate(segment),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.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}%` }
+                  "aria-label": ariaText,
+                  className: segmentClassName,
+                  style: segmentStyle
                 }
-              ) }),
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-label": ariaText, className: segmentClassName, style: segmentStyle }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { side: "bottom", className: "max-w-sm text-xs p-2 space-y-0.5", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold", children: [
                   segment.label,
-                  " · ~",
+                  " - ",
+                  formatPercent$1(rawPercent),
+                  " - ~",
                   formatTokens(segment.size),
-                  " tokens"
+                  " ",
+                  "tokens"
                 ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: ANATOMY_ROLE_LABELS[segment.role] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: [
                   segment.characters.toLocaleString(),
                   " chars"
@@ -228,7 +251,7 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
                   width: `${Math.max(MIN_SEGMENT_PERCENT, overflowSize / total * 100)}%`
                 },
                 children: [
-                  "… +",
+                  "... +",
                   overflowCount
                 ]
               }
@@ -240,7 +263,7 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
               " (indices",
               " ",
               overflowStartIndex,
-              "–",
+              "-",
               overflowEndIndex,
               ")"
             ] })
@@ -248,7 +271,7 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full gap-1 text-[10px] text-muted-foreground", children: [
+    showLabels && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full gap-1 text-[10px] text-muted-foreground", children: [
       visibleSegments.map((segment, index) => {
         const rawPercent = total > 0 ? segment.size / total * 100 : 0;
         const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
@@ -257,11 +280,14 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
           {
             className: "flex flex-col gap-0.5 truncate",
             style: { width: `${percent}%` },
-            title: `${segment.label} · ~${formatTokens(segment.size)} tokens`,
+            title: `${segment.label} - ${formatPercent$1(rawPercent)} - ~${formatTokens(
+              segment.size
+            )} tokens`,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-mono text-foreground/80", children: truncateLabel(segment.label) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate font-mono text-muted-foreground/70", children: [
-                "~",
+                formatPercent$1(rawPercent),
+                " - ~",
                 formatTokens(segment.size)
               ] })
             ]
@@ -276,7 +302,7 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
           style: { width: `${Math.max(MIN_SEGMENT_PERCENT, overflowSize / total * 100)}%` },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate font-mono text-foreground/60", children: [
-              "… +",
+              "... +",
               overflowCount
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate font-mono text-muted-foreground/60", children: [
@@ -291,61 +317,205 @@ const SegmentBar = reactExports.memo(function SegmentBar2({
   ] }) });
 });
 const DIVERGENCE_AMBER_THRESHOLD = 0.25;
+const TOP_CONTRIBUTOR_COUNT = 5;
+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" }
+];
+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 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,
   onSegmentActivate,
   segments: providedSegments
 }) {
+  const [viewMode, setViewMode] = reactExports.useState("role");
   const segments = reactExports.useMemo(() => providedSegments ?? null, [providedSegments]);
-  const total = reactExports.useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
+  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 showDivergenceWarning = reactExports.useMemo(() => {
-    if (segments === null || segments === void 0) 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 = reactExports.useMemo(() => {
-    if (inputTokens === null) return "text-muted-foreground";
-    if (showDivergenceWarning) return "text-amber-400";
-    return "text-muted-foreground";
-  }, [inputTokens, showDivergenceWarning]);
-  if (segments === null || segments === void 0) {
-    return null;
-  }
-  if (segments.length === 0) {
-    return null;
-  }
-  if (parsed === null && providedSegments === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-2", "data-testid": "anatomy-root", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-foreground", children: [
-        "~",
-        formatTokens(total),
-        " tokens"
-      ] }),
-      inputTokens !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn("font-mono tabular-nums", summaryColorClass), children: [
-        "(server: ",
-        formatTokens(inputTokens),
-        ")"
+  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)}`;
+  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.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Request Context" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass), children: [
+          "Estimated ~",
+          formatTokens(total),
+          " tokens | ",
+          providerInputLabel,
+          " | ",
+          segmentCountLabel
+        ] })
       ] }),
-      showDivergenceWarning && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__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 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",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "size-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "max-w-xs text-xs", children: "Bar uses a token estimate heuristic (~4 ASCII chars / token, ~1 CJK / emoji char per token). The server's reported value is the source of truth for cost." })
-      ] })
+        /* @__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."
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SegmentBar, { segments, totalTokens: total, onActivate: 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 {

package/.output/server/_ssr/{ResponseView-e0kL2C3x.mjs → ResponseView-RtFwNvgD.mjs}

@@ -1,7 +1,7 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { g as getLogFormatAdapter, f as formatTokens, c as cn, p as getStatusCategory, B as Badge, s as safeJsonValue } from "./ProxyViewerContainer-DRl51s_n.mjs";
-import { JsonViewer } from "./json-viewer-DDU55MLK.mjs";
-import "./router-Dl7oh0zx.mjs";
+import { g as getLogFormatAdapter, f as formatTokens, c as cn, p as getStatusCategory, B as Badge, s as safeJsonValue } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import { JsonViewer } from "./json-viewer-d4obyRaA.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import { Z as Zap, j as TriangleAlert, a5 as CircleStop, B as Brain, b as ChevronDown, f as ChevronRight, T as Terminal } from "../_libs/lucide-react.mjs";

package/.output/server/_ssr/{StreamingChunkSequence-BJG-m7xs.mjs → StreamingChunkSequence-B5HPkzab.mjs}

@@ -1,7 +1,7 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { k as TooltipProvider, l as Tooltip, m as TooltipTrigger, B as Badge, n as TooltipContent } from "./ProxyViewerContainer-DRl51s_n.mjs";
-import { JsonViewer } from "./json-viewer-DDU55MLK.mjs";
-import "./router-Dl7oh0zx.mjs";
+import { k as TooltipProvider, l as Tooltip, m as TooltipTrigger, B as Badge, n as TooltipContent } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import { JsonViewer } from "./json-viewer-d4obyRaA.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import { b as ChevronDown, f as ChevronRight, L as LoaderCircle } from "../_libs/lucide-react.mjs";

package/.output/server/_ssr/{index-Dea3OeRw.mjs → index-CZIKZU43.mjs}

@@ -1,6 +1,6 @@
-import { P as ProxyViewerContainer } from "./ProxyViewerContainer-DRl51s_n.mjs";
+import { P as ProxyViewerContainer } from "./ProxyViewerContainer-CYm2Dw19.mjs";
 import "../_libs/react.mjs";
-import "./router-Dl7oh0zx.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import "../_libs/swr.mjs";

package/.output/server/_ssr/index.mjs

@@ -198,7 +198,7 @@ function getResponse() {
   return event.res;
 }
 async function getStartManifest(matchedRoutes) {
-  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-m-FJNBVf.mjs");
+  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-BzH4pNaI.mjs");
   const startManifest = tsrStartManifest();
   const rootRoute = startManifest.routes[rootRouteId] = startManifest.routes[rootRouteId] || {};
   rootRoute.assets = rootRoute.assets || [];
@@ -767,7 +767,7 @@ let entriesPromise;
 let baseManifestPromise;
 let cachedFinalManifestPromise;
 async function loadEntries() {
-  const routerEntry = await import("./router-Dl7oh0zx.mjs").then((n) => n.i);
+  const routerEntry = await import("./router-DGPt3MUc.mjs").then((n) => n.i);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }

package/.output/server/_ssr/{json-viewer-DDU55MLK.mjs → json-viewer-d4obyRaA.mjs}

@@ -1,6 +1,6 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { q as parseJsonText, c as cn, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent } from "./ProxyViewerContainer-DRl51s_n.mjs";
-import "./router-Dl7oh0zx.mjs";
+import { q as parseJsonText, c as cn, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
 import { C as Check, a as Copy, b as ChevronDown, f as ChevronRight, y as ChevronsDown } from "../_libs/lucide-react.mjs";