@tonyclaw/agent-inspector 2.0.12 → 2.0.13

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

@@ -36,6 +36,9 @@ 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> = {
@@ -77,6 +80,19 @@ const HEALTH_LABEL: Record<ContextHealthLevel, string> = {
   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)}%`;
@@ -115,8 +131,8 @@ function formatContextSource(intelligence: ContextIntelligence): string {
   }
 }
 
-function diagnosticTone(diagnostic: ContextDiagnostic): string {
-  switch (diagnostic.severity) {
+function advisorTone(severity: ContextAdvisorItem["severity"]): string {
+  switch (severity) {
     case "watch":
       return "border-amber-400/30 bg-amber-400/8 text-amber-100";
     case "danger":
@@ -151,10 +167,250 @@ function ContextHealthBadge({ health }: { health: ContextHealth }): JSX.Element
   );
 }
 
+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);
@@ -163,10 +419,7 @@ function ContextIntelligenceStrip({
       ? "No output reserve"
       : `Output reserve ${formatTokens(intelligence.outputReserveTokens)}`;
   const largestRole = intelligence.largestRole;
-  const visibleDiagnostics =
-    intelligence.duplicateGroups.length === 0
-      ? intelligence.diagnostics
-      : intelligence.diagnostics.filter((diagnostic) => diagnostic.kind !== "duplicate");
+  const advisorItems = buildContextAdvisorItems({ intelligence, segments });
 
   return (
     <div className="space-y-2">
@@ -251,19 +504,7 @@ function ContextIntelligenceStrip({
         </div>
       )}
 
-      {visibleDiagnostics.length > 0 && (
-        <div className="grid gap-1.5 sm:grid-cols-2">
-          {visibleDiagnostics.map((diagnostic) => (
-            <div
-              key={`${diagnostic.kind}-${diagnostic.title}`}
-              className={cn("rounded border px-2 py-1.5 text-xs", diagnosticTone(diagnostic))}
-            >
-              <div className="font-medium">{diagnostic.title}</div>
-              <div className="mt-0.5 text-[11px] text-muted-foreground">{diagnostic.detail}</div>
-            </div>
-          ))}
-        </div>
-      )}
+      <ContextAdvisorPanel items={advisorItems} onSegmentActivate={onSegmentActivate} />
     </div>
   );
 }
@@ -553,7 +794,13 @@ export function RequestAnatomy({
           </div>
         )}
 
-        {intelligence !== null && <ContextIntelligenceStrip intelligence={intelligence} />}
+        {intelligence !== null && (
+          <ContextIntelligenceStrip
+            intelligence={intelligence}
+            segments={segments}
+            onSegmentActivate={onSegmentActivate}
+          />
+        )}
 
         {intelligence !== null && (
           <DuplicateContentPanel

package/.output/public/assets/RequestAnatomy-sL2FFo_N.js

@@ -1 +0,0 @@
-import{r as p,j as e}from"./main-FvIQopAy.js";import{c as M,u as A,F as U,f as u,s as W,b as f,t as H,v as B,w as G,S as F,G as $,H as q,I as K,K as k,L as V,h as Y}from"./ProxyViewerContainer-CTNNzXSa.js";const J=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]],X=M("info",J),Q=.25,Z=5,ee=4,te=6,se=["system","user","assistant","tool","tools"],re={system:"instructions",user:"user turns",assistant:"assistant turns",tool:"tool results",tools:"tool schemas"},ne=[{value:"role",label:"By Role"},{value:"segment",label:"By Segment"}],oe={unknown:"bg-muted-foreground/50",ok:"bg-emerald-500/70",watch:"bg-amber-400/75",danger:"bg-red-500/80"},ae={unknown:"text-muted-foreground",ok:"text-emerald-400",watch:"text-amber-300",danger:"text-red-300"},le={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"},de={ok:"OK",optimizable:"Optimizable",risk:"Risk"};function C(t){return t>=10?`${t.toFixed(0)}%`:t>=1?`${t.toFixed(1)}%`:t>0?"<1%":"0%"}function y(t){return t===null?"Unknown":C(t*100)}function T(t){return t===null?"Unknown":t<0?`-${u(Math.abs(t))}`:u(t)}function E(t){return t.contextWindow.tokens===null?"Unknown":K(t.contextWindow.tokens)}function ie(t){switch(t.contextWindow.source){case"request":return t.contextWindow.label;case"provider":return t.contextWindow.label;case"model-rule":return t.contextWindow.label;case"unknown":return t.model===null?t.contextWindow.label:`${t.contextWindow.label}: ${t.model}`}}function ce(t){switch(t.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 R(t){const r=de[t.level];if(t.level==="ok")return r;const o=t.level==="risk"?`${String(t.opportunityCount)} signal${t.opportunityCount===1?"":"s"}`:`${String(t.opportunityCount)} opportunit${t.opportunityCount===1?"y":"ies"}`;return t.reclaimableTokens<=0?`${r} | ${o}`:`${r} | ${o} | ~${u(t.reclaimableTokens)} tokens`}function ue({health:t}){return e.jsx("span",{className:f("inline-flex h-5 max-w-full items-center rounded border px-1.5 font-mono text-[10px]",le[t.level]),"aria-label":`Context health ${R(t)}`,children:e.jsx("span",{className:"truncate",children:R(t)})})}function xe({intelligence:t}){const r=t.usagePercent===null?0:Math.max(1,t.usagePercent*100),o=t.outputReserveTokens===null?"No output reserve":`Output reserve ${u(t.outputReserveTokens)}`,a=t.largestRole,x=t.duplicateGroups.length===0?t.diagnostics:t.diagnostics.filter(i=>i.kind!=="duplicate");return e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"grid gap-x-4 gap-y-2 border-y border-border/60 py-2 text-xs sm:grid-cols-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-[10px] font-medium uppercase text-muted-foreground",children:"Window"}),e.jsx("div",{className:"mt-0.5 truncate font-mono text-foreground",children:E(t)}),e.jsx("div",{className:"truncate text-[11px] text-muted-foreground",children:ie(t)})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-[10px] font-medium uppercase text-muted-foreground",children:"Used"}),e.jsx("div",{className:f("mt-0.5 font-mono",ae[t.riskLevel]),children:y(t.usagePercent)}),e.jsx("div",{className:"truncate text-[11px] text-muted-foreground",children:o})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-[10px] font-medium uppercase text-muted-foreground",children:"Remaining"}),e.jsx("div",{className:"mt-0.5 font-mono text-foreground",children:T(t.remainingAfterReserveTokens)}),e.jsxs("div",{className:"truncate text-[11px] text-muted-foreground",children:["Input only ",T(t.remainingInputTokens)]})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-[10px] font-medium uppercase text-muted-foreground",children:"Largest"}),a===null?e.jsx("div",{className:"mt-0.5 text-muted-foreground",children:"Unknown"}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mt-0.5 flex min-w-0 items-center gap-1.5",children:[e.jsx("span",{"aria-hidden":"true",className:f("size-2.5 shrink-0 rounded-[2px]",$[a.role])}),e.jsx("span",{className:"truncate text-foreground",children:a.label})]}),e.jsxs("div",{className:"truncate font-mono text-[11px] text-muted-foreground",children:[C(a.percent*100)," | ~",u(a.tokens)]})]})]})]}),t.contextWindow.tokens!==null&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"relative h-2 overflow-hidden rounded-full bg-muted/40",children:[e.jsx("div",{className:f("h-full rounded-full",oe[t.riskLevel]),style:{width:`${String(r)}%`}}),e.jsx("div",{"aria-hidden":"true",className:"absolute top-0 h-full w-px bg-amber-200/70",style:{left:`${String(k.watch*100)}%`}}),e.jsx("div",{"aria-hidden":"true",className:"absolute top-0 h-full w-px bg-red-200/80",style:{left:`${String(k.danger*100)}%`}})]}),e.jsxs("div",{className:"flex justify-between text-[10px] text-muted-foreground",children:[e.jsx("span",{children:"Context window"}),e.jsxs("span",{children:["Watch ",y(k.watch)," / Danger"," ",y(k.danger)]})]})]}),x.length>0&&e.jsx("div",{className:"grid gap-1.5 sm:grid-cols-2",children:x.map(i=>e.jsxs("div",{className:f("rounded border px-2 py-1.5 text-xs",ce(i)),children:[e.jsx("div",{className:"font-medium",children:i.title}),e.jsx("div",{className:"mt-0.5 text-[11px] text-muted-foreground",children:i.detail})]},`${i.kind}-${i.title}`))})]})}function me(t,r){return r.find(o=>o.path===t.path)??null}function fe({groups:t,segments:r,onSegmentActivate:o}){const[a,x]=p.useState(!1);if(t.length===0)return null;const i=t.slice(0,ee),c=t.length-i.length,h=t.reduce((s,l)=>s+l.repeatedTokens,0);return e.jsxs("section",{className:"space-y-2 rounded border border-border/70 bg-muted/15 p-2",children:[e.jsxs("button",{type:"button",onClick:()=>x(s=>!s),"aria-expanded":a,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:[e.jsxs("span",{className:"inline-flex min-w-0 items-center gap-1.5",children:[a?e.jsx(V,{className:"size-3.5 shrink-0 text-muted-foreground"}):e.jsx(Y,{className:"size-3.5 shrink-0 text-muted-foreground"}),e.jsx("span",{className:"truncate text-xs font-medium text-foreground",children:"Duplicate Content"})]}),e.jsxs("span",{className:"font-mono text-[11px] text-muted-foreground",children:[String(t.length)," group",t.length===1?"":"s"," | ~",u(h)," repeated"]})]}),a&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"space-y-2",children:i.map((s,l)=>{const b=s.segments.slice(0,te),w=s.segments.length-b.length;return e.jsxs("div",{className:"space-y-1.5 border-t border-border/50 pt-2 first:border-t-0 first:pt-0",children:[e.jsxs("div",{className:"flex min-w-0 items-center gap-2 text-xs",children:[e.jsx("span",{className:"w-5 shrink-0 text-right font-mono text-muted-foreground/70",children:String(l+1)}),e.jsx("span",{className:"min-w-0 flex-1 truncate text-foreground",children:s.firstLabel}),e.jsxs("span",{className:"shrink-0 font-mono text-muted-foreground",children:["x",String(s.count)," | ~",u(s.repeatedTokens)," saved"]})]}),s.preview.length>0&&e.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:s.preview}),e.jsxs("div",{className:"ml-7 flex flex-wrap gap-1",children:[b.map((d,g)=>{const v=me(d,r),j=v===null||o===void 0?void 0:o,N=`${d.label} ~${u(d.tokens)}`;return j===void 0||v===null?e.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:N,children:e.jsx("span",{className:"truncate",children:N})},`${d.path}-${g}`):e.jsx("button",{type:"button",onClick:()=>j(v),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:e.jsx("span",{className:"truncate",children:N})},`${d.path}-${g}`)}),w>0&&e.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(w)]})]})]},s.key)})}),c>0&&e.jsxs("div",{className:"border-t border-border/50 pt-2 font-mono text-[11px] text-muted-foreground",children:["+",String(c)," more duplicate group",c===1?"":"s"]})]})]})}function pe(t){const r=[];for(const o of se){const a=t.filter(s=>s.role===o);if(a.length===0)continue;const x=a.reduce((s,l)=>s+l.size,0),i=a.reduce((s,l)=>s+l.characters,0),c=q[o],h=`${a.length} segment${a.length===1?"":"s"} grouped as ${re[o]}`;r.push({role:o,label:c,size:x,characters:i,text:h,path:`role:${o}`})}return r}function he(t){return[...t].sort((r,o)=>o.size-r.size).slice(0,Z)}function ve({parsed:t,inputTokens:r,model:o=null,onSegmentActivate:a,segments:x}){const{providers:i}=A(),[c,h]=p.useState("role"),s=p.useMemo(()=>x??null,[x]),l=p.useMemo(()=>(s??[]).reduce((n,m)=>n+m.size,0),[s]),b=p.useMemo(()=>s===null?[]:pe(s),[s]),w=p.useMemo(()=>s===null?[]:he(s),[s]),d=p.useMemo(()=>s===null?null:U({segments:s,inputTokens:r,parsed:t,model:o,providers:i}),[r,o,t,i,s]),g=p.useMemo(()=>s===null||r===null||l===0?!1:Math.abs(r-l)/Math.max(r,l)>=Q,[r,s,l]);if(s===null||s.length===0||t===null&&x===void 0)return null;const v=r!==null&&g?"text-amber-400":"text-muted-foreground",j=c==="role"?b:s,N=l>0?l:j.reduce((n,m)=>n+m.size,0),_=c==="segment"?a:void 0,O=`${String(s.length)} segment${s.length===1?"":"s"}`,P=r===null?"Provider input unknown":`Provider input ${u(r)}`,z=d===null?"Limit unknown":`Limit ${E(d)}`,D=d===null?"Usage unknown":`${y(d.usagePercent)} used`;return e.jsx(W,{delayDuration:150,children:e.jsxs("div",{className:"px-4 py-3 space-y-3","data-testid":"anatomy-root",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-3",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex min-w-0 flex-wrap items-center gap-2",children:[e.jsx("div",{className:"text-sm font-semibold text-foreground",children:"Request Context"}),d!==null&&e.jsx(ue,{health:d.health})]}),e.jsxs("div",{className:f("mt-0.5 text-xs font-mono tabular-nums",v),children:["Estimated ~",u(l)," tokens | ",P," | ",z," |"," ",D," | ",O]})]}),e.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:ne.map(n=>e.jsx("button",{type:"button","aria-pressed":c===n.value,onClick:()=>h(n.value),className:f("h-6 rounded-sm px-2 text-[11px] font-medium transition-colors",c===n.value?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"),children:n.label},n.value))})]}),g&&e.jsxs("div",{className:"inline-flex items-center gap-1.5 text-xs text-amber-400",children:[e.jsxs(H,{children:[e.jsx(B,{asChild:!0,children:e.jsx("button",{type:"button",className:"inline-flex items-center hover:text-amber-300","aria-label":"Token estimate differs from provider input",children:e.jsx(X,{className:"size-3.5"})})}),e.jsx(G,{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."]}),d!==null&&e.jsx(xe,{intelligence:d}),d!==null&&e.jsx(fe,{groups:d.duplicateGroups,segments:s,onSegmentActivate:a}),e.jsx(F,{segments:j,totalTokens:N,showLabels:c==="segment",onActivate:_}),e.jsx("div",{className:"flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px] text-muted-foreground",children:b.map(n=>{const m=l>0?n.size/l*100:0;return e.jsxs("div",{className:"inline-flex items-center gap-1.5",children:[e.jsx("span",{"aria-hidden":"true",className:f("size-2.5 rounded-[2px]",$[n.role])}),e.jsx("span",{children:n.label}),e.jsx("span",{className:"font-mono text-muted-foreground/70",children:C(m)})]},n.role)})}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx("div",{className:"text-xs font-medium text-foreground",children:"Top Contributors"}),e.jsx("div",{className:"grid gap-1",children:w.map((n,m)=>{const I=l>0?n.size/l*100:0,S=a,L=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:"w-5 shrink-0 text-right font-mono text-muted-foreground/70",children:String(m+1)}),e.jsx("span",{"aria-hidden":"true",className:f("size-2.5 shrink-0 rounded-[2px]",$[n.role])}),e.jsx("span",{className:"min-w-0 flex-1 truncate text-left",children:n.label}),e.jsxs("span",{className:"shrink-0 font-mono text-muted-foreground",children:[C(I)," | ~",u(n.size)]})]});return S!==void 0?e.jsx("button",{type:"button",onClick:()=>S(n),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:L},`${n.path}-${m}`):e.jsx("div",{className:"flex h-7 items-center gap-2 rounded px-1.5 text-xs text-muted-foreground",children:L},`${n.path}-${m}`)})})]})]})})}export{ve as RequestAnatomy};

package/.output/public/assets/_sessionId-DEWzDQ8-.js

@@ -1 +0,0 @@
-import{R as s,j as e}from"./main-FvIQopAy.js";import{P as i}from"./ProxyViewerContainer-CTNNzXSa.js";function t(){const{sessionId:o}=s.useParams();return e.jsx(i,{initialSessionId:o},o)}export{t as component};

package/.output/public/assets/index-DGIIhZTn.js

@@ -1 +0,0 @@
-import{P as o}from"./ProxyViewerContainer-CTNNzXSa.js";import"./main-FvIQopAy.js";const r=o;export{r as component};