@tonyclaw/agent-inspector 2.0.9 → 2.0.11

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

@@ -1,11 +1,16 @@
 import { Info } from "lucide-react";
 import { type JSX, useMemo, useState } from "react";
 import { cn, formatTokens } from "../../../lib/utils";
+import { useProviders } from "../../../lib/useProviders";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
 import {
   analyzeContextIntelligence,
   CONTEXT_USAGE_THRESHOLDS,
   type ContextDiagnostic,
+  type DuplicateContextGroup,
+  type DuplicateContextSegment,
+  type ContextHealth,
+  type ContextHealthLevel,
   type ContextIntelligence,
   type ContextRiskLevel,
 } from "./contextIntelligence";
@@ -29,6 +34,8 @@ type ContextViewMode = "role" | "segment";
 
 const DIVERGENCE_AMBER_THRESHOLD = 0.25;
 const TOP_CONTRIBUTOR_COUNT = 5;
+const DUPLICATE_GROUP_DISPLAY_COUNT = 4;
+const DUPLICATE_SEGMENT_DISPLAY_COUNT = 6;
 const ROLE_ORDER: AnatomyRole[] = ["system", "user", "assistant", "tool", "tools"];
 
 const ROLE_DESCRIPTIONS: Record<AnatomyRole, string> = {
@@ -58,6 +65,18 @@ const RISK_TEXT_CLASS: Record<ContextRiskLevel, string> = {
   danger: "text-red-300",
 };
 
+const HEALTH_BADGE_CLASS: Record<ContextHealthLevel, string> = {
+  ok: "border-emerald-400/30 bg-emerald-400/8 text-emerald-200",
+  optimizable: "border-amber-400/30 bg-amber-400/8 text-amber-100",
+  risk: "border-red-400/35 bg-red-500/10 text-red-100",
+};
+
+const HEALTH_LABEL: Record<ContextHealthLevel, string> = {
+  ok: "OK",
+  optimizable: "Optimizable",
+  risk: "Risk",
+};
+
 function formatPercent(value: number): string {
   if (value >= 10) return `${value.toFixed(0)}%`;
   if (value >= 1) return `${value.toFixed(1)}%`;
@@ -85,6 +104,8 @@ function formatContextSource(intelligence: ContextIntelligence): string {
   switch (intelligence.contextWindow.source) {
     case "request":
       return intelligence.contextWindow.label;
+    case "provider":
+      return intelligence.contextWindow.label;
     case "model-rule":
       return intelligence.contextWindow.label;
     case "unknown":
@@ -103,6 +124,33 @@ function diagnosticTone(diagnostic: ContextDiagnostic): string {
   }
 }
 
+function formatContextHealth(health: ContextHealth): string {
+  const label = HEALTH_LABEL[health.level];
+  if (health.level === "ok") return label;
+  const countLabel =
+    health.level === "risk"
+      ? `${String(health.opportunityCount)} signal${health.opportunityCount === 1 ? "" : "s"}`
+      : `${String(health.opportunityCount)} opportunit${
+          health.opportunityCount === 1 ? "y" : "ies"
+        }`;
+  if (health.reclaimableTokens <= 0) return `${label} | ${countLabel}`;
+  return `${label} | ${countLabel} | ~${formatTokens(health.reclaimableTokens)} tokens`;
+}
+
+function ContextHealthBadge({ health }: { health: ContextHealth }): JSX.Element {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 max-w-full items-center rounded border px-1.5 font-mono text-[10px]",
+        HEALTH_BADGE_CLASS[health.level],
+      )}
+      aria-label={`Context health ${formatContextHealth(health)}`}
+    >
+      <span className="truncate">{formatContextHealth(health)}</span>
+    </span>
+  );
+}
+
 function ContextIntelligenceStrip({
   intelligence,
 }: {
@@ -115,6 +163,10 @@ 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");
 
   return (
     <div className="space-y-2">
@@ -199,9 +251,9 @@ function ContextIntelligenceStrip({
         </div>
       )}
 
-      {intelligence.diagnostics.length > 0 && (
+      {visibleDiagnostics.length > 0 && (
         <div className="grid gap-1.5 sm:grid-cols-2">
-          {intelligence.diagnostics.map((diagnostic) => (
+          {visibleDiagnostics.map((diagnostic) => (
             <div
               key={`${diagnostic.kind}-${diagnostic.title}`}
               className={cn("rounded border px-2 py-1.5 text-xs", diagnosticTone(diagnostic))}
@@ -216,6 +268,116 @@ function ContextIntelligenceStrip({
   );
 }
 
+function resolveDuplicateSegment(
+  duplicateSegment: DuplicateContextSegment,
+  segments: readonly AnatomySegment[],
+): AnatomySegment | null {
+  return segments.find((segment) => segment.path === duplicateSegment.path) ?? null;
+}
+
+function DuplicateContentPanel({
+  groups,
+  segments,
+  onSegmentActivate,
+}: {
+  groups: readonly DuplicateContextGroup[];
+  segments: readonly AnatomySegment[];
+  onSegmentActivate?: (segment: AnatomySegment) => void;
+}): JSX.Element | null {
+  if (groups.length === 0) return null;
+
+  const visibleGroups = groups.slice(0, DUPLICATE_GROUP_DISPLAY_COUNT);
+  const hiddenGroupCount = groups.length - visibleGroups.length;
+  const totalRepeatedTokens = groups.reduce((sum, group) => sum + group.repeatedTokens, 0);
+
+  return (
+    <section className="space-y-2 rounded border border-border/70 bg-muted/15 p-2">
+      <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">
+          {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>
+
+              {group.preview.length > 0 && (
+                <div className="ml-7 line-clamp-2 break-words rounded bg-background/40 px-2 py-1 font-mono text-[11px] leading-4 text-muted-foreground">
+                  {group.preview}
+                </div>
+              )}
+
+              <div className="ml-7 flex flex-wrap gap-1">
+                {visibleSegments.map((duplicateSegment, segmentIndex) => {
+                  const target = resolveDuplicateSegment(duplicateSegment, segments);
+                  const activate =
+                    target === null || onSegmentActivate === undefined
+                      ? undefined
+                      : onSegmentActivate;
+                  const label = `${duplicateSegment.label} ~${formatTokens(
+                    duplicateSegment.tokens,
+                  )}`;
+                  if (activate === undefined || target === null) {
+                    return (
+                      <span
+                        key={`${duplicateSegment.path}-${segmentIndex}`}
+                        className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground"
+                        title={label}
+                      >
+                        <span className="truncate">{label}</span>
+                      </span>
+                    );
+                  }
+                  return (
+                    <button
+                      key={`${duplicateSegment.path}-${segmentIndex}`}
+                      type="button"
+                      onClick={() => activate(target)}
+                      className="inline-flex h-6 max-w-40 items-center rounded border border-border/60 px-1.5 text-[11px] text-muted-foreground hover:border-border hover:bg-muted/40 hover:text-foreground"
+                      title="Jump to this duplicate block"
+                    >
+                      <span className="truncate">{label}</span>
+                    </button>
+                  );
+                })}
+                {hiddenSegmentCount > 0 && (
+                  <span className="inline-flex h-6 items-center rounded border border-border/40 px-1.5 font-mono text-[11px] text-muted-foreground/70">
+                    +{String(hiddenSegmentCount)}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {hiddenGroupCount > 0 && (
+        <div className="border-t border-border/50 pt-2 font-mono text-[11px] text-muted-foreground">
+          +{String(hiddenGroupCount)} more duplicate group{hiddenGroupCount === 1 ? "" : "s"}
+        </div>
+      )}
+    </section>
+  );
+}
+
 function aggregateByRole(segments: AnatomySegment[]): AnatomySegment[] {
   const result: AnatomySegment[] = [];
   for (const role of ROLE_ORDER) {
@@ -254,6 +416,7 @@ export function RequestAnatomy({
   onSegmentActivate,
   segments: providedSegments,
 }: RequestAnatomyProps): JSX.Element | null {
+  const { providers } = useProviders();
   const [viewMode, setViewMode] = useState<ContextViewMode>("role");
   const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
   const total = useMemo(
@@ -277,8 +440,9 @@ export function RequestAnatomy({
             inputTokens,
             parsed,
             model,
+            providers,
           }),
-    [inputTokens, model, parsed, segments],
+    [inputTokens, model, parsed, providers, segments],
   );
 
   const showDivergenceWarning = useMemo(() => {
@@ -314,7 +478,10 @@ export function RequestAnatomy({
       <div className="px-4 py-3 space-y-3" data-testid="anatomy-root">
         <div className="flex flex-wrap items-start justify-between gap-3">
           <div className="min-w-0">
-            <div className="text-sm font-semibold text-foreground">Request Context</div>
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <div className="text-sm font-semibold text-foreground">Request Context</div>
+              {intelligence !== null && <ContextHealthBadge health={intelligence.health} />}
+            </div>
             <div className={cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass)}>
               Estimated ~{formatTokens(total)} tokens | {providerInputLabel} | {contextLimitLabel} |{" "}
               {usageLabel} | {segmentCountLabel}
@@ -368,6 +535,14 @@ export function RequestAnatomy({
 
         {intelligence !== null && <ContextIntelligenceStrip intelligence={intelligence} />}
 
+        {intelligence !== null && (
+          <DuplicateContentPanel
+            groups={intelligence.duplicateGroups}
+            segments={segments}
+            onSegmentActivate={onSegmentActivate}
+          />
+        )}
+
         <SegmentBar
           segments={displayedSegments}
           totalTokens={displayedTotal}