@tonyclaw/agent-inspector 2.0.11 → 2.0.13

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

@@ -1,6 +1,6 @@
-import { Info } from "lucide-react";
+import { ChevronDown, ChevronRight, Info } from "lucide-react";
 import { type JSX, useMemo, useState } from "react";
-import { cn, formatTokens } from "../../../lib/utils";
+import { cn, formatContextWindowTokens, formatTokens } from "../../../lib/utils";
 import { useProviders } from "../../../lib/useProviders";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
 import {
@@ -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)}%`;
@@ -97,7 +113,7 @@ function formatRemainingTokens(value: number | null): string {
 
 function formatContextLimit(intelligence: ContextIntelligence): string {
   if (intelligence.contextWindow.tokens === null) return "Unknown";
-  return formatTokens(intelligence.contextWindow.tokens);
+  return formatContextWindowTokens(intelligence.contextWindow.tokens);
 }
 
 function formatContextSource(intelligence: ContextIntelligence): string {
@@ -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>
   );
 }
@@ -284,6 +525,8 @@ function DuplicateContentPanel({
   segments: readonly AnatomySegment[];
   onSegmentActivate?: (segment: AnatomySegment) => void;
 }): JSX.Element | null {
+  const [expanded, setExpanded] = useState(false);
+
   if (groups.length === 0) return null;
 
   const visibleGroups = groups.slice(0, DUPLICATE_GROUP_DISPLAY_COUNT);
@@ -292,87 +535,105 @@ function DuplicateContentPanel({
 
   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">Duplicate Content</div>
-        <div className="font-mono text-[11px] text-muted-foreground">
+      <button
+        type="button"
+        onClick={() => setExpanded((current) => !current)}
+        aria-expanded={expanded}
+        className="flex w-full flex-wrap items-center justify-between gap-2 rounded px-1 py-0.5 text-left transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+      >
+        <span className="inline-flex min-w-0 items-center gap-1.5">
+          {expanded ? (
+            <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
+          )}
+          <span className="truncate text-xs font-medium text-foreground">Duplicate Content</span>
+        </span>
+        <span className="font-mono text-[11px] text-muted-foreground">
           {String(groups.length)} group{groups.length === 1 ? "" : "s"} | ~
           {formatTokens(totalRepeatedTokens)} repeated
-        </div>
-      </div>
-
-      <div className="space-y-2">
-        {visibleGroups.map((group, groupIndex) => {
-          const visibleSegments = group.segments.slice(0, DUPLICATE_SEGMENT_DISPLAY_COUNT);
-          const hiddenSegmentCount = group.segments.length - visibleSegments.length;
-          return (
-            <div
-              key={group.key}
-              className="space-y-1.5 border-t border-border/50 pt-2 first:border-t-0 first:pt-0"
-            >
-              <div className="flex min-w-0 items-center gap-2 text-xs">
-                <span className="w-5 shrink-0 text-right font-mono text-muted-foreground/70">
-                  {String(groupIndex + 1)}
-                </span>
-                <span className="min-w-0 flex-1 truncate text-foreground">{group.firstLabel}</span>
-                <span className="shrink-0 font-mono text-muted-foreground">
-                  x{String(group.count)} | ~{formatTokens(group.repeatedTokens)} saved
-                </span>
-              </div>
+        </span>
+      </button>
+
+      {expanded && (
+        <>
+          <div className="space-y-2">
+            {visibleGroups.map((group, groupIndex) => {
+              const visibleSegments = group.segments.slice(0, DUPLICATE_SEGMENT_DISPLAY_COUNT);
+              const hiddenSegmentCount = group.segments.length - visibleSegments.length;
+              return (
+                <div
+                  key={group.key}
+                  className="space-y-1.5 border-t border-border/50 pt-2 first:border-t-0 first:pt-0"
+                >
+                  <div className="flex min-w-0 items-center gap-2 text-xs">
+                    <span className="w-5 shrink-0 text-right font-mono text-muted-foreground/70">
+                      {String(groupIndex + 1)}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate text-foreground">
+                      {group.firstLabel}
+                    </span>
+                    <span className="shrink-0 font-mono text-muted-foreground">
+                      x{String(group.count)} | ~{formatTokens(group.repeatedTokens)} saved
+                    </span>
+                  </div>
+
+                  {group.preview.length > 0 && (
+                    <div className="ml-7 line-clamp-2 break-words rounded bg-background/40 px-2 py-1 font-mono text-[11px] leading-4 text-muted-foreground">
+                      {group.preview}
+                    </div>
+                  )}
 
-              {group.preview.length > 0 && (
-                <div className="ml-7 line-clamp-2 break-words rounded bg-background/40 px-2 py-1 font-mono text-[11px] leading-4 text-muted-foreground">
-                  {group.preview}
-                </div>
-              )}
-
-              <div className="ml-7 flex flex-wrap gap-1">
-                {visibleSegments.map((duplicateSegment, segmentIndex) => {
-                  const target = resolveDuplicateSegment(duplicateSegment, segments);
-                  const activate =
-                    target === null || onSegmentActivate === undefined
-                      ? undefined
-                      : onSegmentActivate;
-                  const label = `${duplicateSegment.label} ~${formatTokens(
-                    duplicateSegment.tokens,
-                  )}`;
-                  if (activate === undefined || target === null) {
-                    return (
-                      <span
-                        key={`${duplicateSegment.path}-${segmentIndex}`}
-                        className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground"
-                        title={label}
-                      >
-                        <span className="truncate">{label}</span>
+                  <div className="ml-7 flex flex-wrap gap-1">
+                    {visibleSegments.map((duplicateSegment, segmentIndex) => {
+                      const target = resolveDuplicateSegment(duplicateSegment, segments);
+                      const activate =
+                        target === null || onSegmentActivate === undefined
+                          ? undefined
+                          : onSegmentActivate;
+                      const label = `${duplicateSegment.label} ~${formatTokens(
+                        duplicateSegment.tokens,
+                      )}`;
+                      if (activate === undefined || target === null) {
+                        return (
+                          <span
+                            key={`${duplicateSegment.path}-${segmentIndex}`}
+                            className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground"
+                            title={label}
+                          >
+                            <span className="truncate">{label}</span>
+                          </span>
+                        );
+                      }
+                      return (
+                        <button
+                          key={`${duplicateSegment.path}-${segmentIndex}`}
+                          type="button"
+                          onClick={() => activate(target)}
+                          className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground"
+                          title="Jump to this duplicate block"
+                        >
+                          <span className="truncate">{label}</span>
+                        </button>
+                      );
+                    })}
+                    {hiddenSegmentCount > 0 && (
+                      <span className="inline-flex h-6 items-center rounded border border-border/40 px-1.5 font-mono text-[11px] text-muted-foreground/70">
+                        +{String(hiddenSegmentCount)}
                       </span>
-                    );
-                  }
-                  return (
-                    <button
-                      key={`${duplicateSegment.path}-${segmentIndex}`}
-                      type="button"
-                      onClick={() => activate(target)}
-                      className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground"
-                      title="Jump to this duplicate block"
-                    >
-                      <span className="truncate">{label}</span>
-                    </button>
-                  );
-                })}
-                {hiddenSegmentCount > 0 && (
-                  <span className="inline-flex h-6 items-center rounded border border-border/40 px-1.5 font-mono text-[11px] text-muted-foreground/70">
-                    +{String(hiddenSegmentCount)}
-                  </span>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
 
-      {hiddenGroupCount > 0 && (
-        <div className="border-t border-border/50 pt-2 font-mono text-[11px] text-muted-foreground">
-          +{String(hiddenGroupCount)} more duplicate group{hiddenGroupCount === 1 ? "" : "s"}
-        </div>
+          {hiddenGroupCount > 0 && (
+            <div className="border-t border-border/50 pt-2 font-mono text-[11px] text-muted-foreground">
+              +{String(hiddenGroupCount)} more duplicate group{hiddenGroupCount === 1 ? "" : "s"}
+            </div>
+          )}
+        </>
       )}
     </section>
   );
@@ -533,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/src/components/proxy-viewer/anatomy/contextIntelligence.ts

@@ -167,7 +167,7 @@ const MODEL_CONTEXT_RULES: readonly ModelContextRule[] = [
   },
   {
     family: "DeepSeek V4",
-    tokens: 1_000_000,
+    tokens: 1_048_576,
     mode: "prefix",
     patterns: ["deepseek-v4-pro", "deepseek-v4-flash"],
   },
@@ -179,15 +179,33 @@ const MODEL_CONTEXT_RULES: readonly ModelContextRule[] = [
   },
   {
     family: "MiniMax M3",
-    tokens: 1_000_000,
+    tokens: 1_048_576,
     mode: "includes",
     patterns: ["minimax-m3"],
   },
   {
-    family: "MiniMax M2",
+    family: "MiniMax M2.7",
     tokens: 204_800,
     mode: "includes",
-    patterns: ["minimax-m2.7", "minimax-m2.5", "minimax-m2.1"],
+    patterns: ["minimax-m2.7"],
+  },
+  {
+    family: "MiniMax M2.5/M2.1",
+    tokens: 196_608,
+    mode: "includes",
+    patterns: ["minimax-m2.5", "minimax-m2.1"],
+  },
+  {
+    family: "GLM-5.2",
+    tokens: 1_048_576,
+    mode: "prefix",
+    patterns: ["glm-5.2"],
+  },
+  {
+    family: "GLM-5",
+    tokens: 202_752,
+    mode: "prefix",
+    patterns: ["glm-5", "glm-5.1"],
   },
 ];