@tonyclaw/agent-inspector 2.0.6 → 2.0.8

package/src/components/proxy-viewer/RequestToolsPanel.tsx

@@ -0,0 +1,292 @@
+import {
+  Blocks,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Code2,
+  Copy,
+  FileText,
+  Globe,
+  MoreHorizontal,
+  MousePointerClick,
+  Search,
+  Terminal,
+  Wrench,
+} from "lucide-react";
+import { memo, useMemo, useState, type JSX } from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Collapsible, CollapsibleContent } from "../ui/collapsible";
+import { JsonViewer } from "../ui/json-viewer";
+import { safeJsonValue } from "../ui/json-viewer-bulk";
+import { ScrollArea } from "../ui/scroll-area";
+import type {
+  RequestToolCategory,
+  RequestToolDefinition,
+  RequestToolsSummary,
+} from "./requestTools";
+import { useCopyFeedback } from "./useCopyFeedback";
+
+type RequestToolsProps = {
+  summary: RequestToolsSummary | null;
+  calledToolNames: readonly string[];
+};
+
+const CATEGORY_LABELS: Record<RequestToolCategory, string> = {
+  file: "file",
+  shell: "shell",
+  browser: "browser",
+  web: "web",
+  mcp: "MCP",
+  code: "code",
+  other: "other",
+};
+
+const CATEGORY_CLASSES: Record<RequestToolCategory, string> = {
+  file: "border-blue-400/20 bg-blue-400/5 text-blue-300",
+  shell: "border-teal-400/20 bg-teal-400/5 text-teal-300",
+  browser: "border-cyan-400/20 bg-cyan-400/5 text-cyan-300",
+  web: "border-sky-400/20 bg-sky-400/5 text-sky-300",
+  mcp: "border-violet-400/20 bg-violet-400/5 text-violet-300",
+  code: "border-emerald-400/20 bg-emerald-400/5 text-emerald-300",
+  other: "border-muted-foreground/20 bg-muted/30 text-muted-foreground",
+};
+
+function CategoryIcon({ category }: { category: RequestToolCategory }): JSX.Element {
+  switch (category) {
+    case "file":
+      return <FileText className="size-3.5" />;
+    case "shell":
+      return <Terminal className="size-3.5" />;
+    case "browser":
+      return <MousePointerClick className="size-3.5" />;
+    case "web":
+      return <Globe className="size-3.5" />;
+    case "mcp":
+      return <Blocks className="size-3.5" />;
+    case "code":
+      return <Code2 className="size-3.5" />;
+    case "other":
+      return <MoreHorizontal className="size-3.5" />;
+  }
+}
+
+function RequiredParameters({ names }: { names: readonly string[] }): JSX.Element | null {
+  if (names.length === 0) return null;
+  return (
+    <div className="flex min-w-0 flex-wrap items-center gap-1">
+      <span className="text-[10px] uppercase tracking-wide text-muted-foreground">required</span>
+      {names.slice(0, 4).map((name) => (
+        <Badge
+          key={name}
+          variant="outline"
+          className="h-5 max-w-36 truncate rounded-md px-1.5 py-0 font-mono text-[10px]"
+        >
+          {name}
+        </Badge>
+      ))}
+      {names.length > 4 && (
+        <span className="font-mono text-[10px] text-muted-foreground">+{names.length - 4}</span>
+      )}
+    </div>
+  );
+}
+
+function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolean }): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const nameCopy = useCopyFeedback(tool.name);
+  const hasDetails =
+    tool.description !== null || tool.requiredParameters.length > 0 || tool.schema !== null;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="rounded-md border border-border/60 bg-background/40">
+        <div className="flex min-w-0 items-center gap-2 px-2.5 py-2">
+          <button
+            type="button"
+            className="flex min-w-0 flex-1 items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => setOpen((value) => !value)}
+            aria-expanded={open}
+            disabled={!hasDetails}
+          >
+            <CategoryIcon category={tool.category} />
+            <span className="min-w-0 truncate font-mono text-xs font-semibold text-foreground/90">
+              {tool.name}
+            </span>
+            {called && (
+              <Badge
+                variant="outline"
+                className="h-5 rounded-md border-emerald-400/20 bg-emerald-400/5 px-1.5 py-0 text-[10px] text-emerald-300"
+              >
+                called
+              </Badge>
+            )}
+            <span className="font-mono text-[10px] text-muted-foreground">
+              {tool.parameterCount} params
+            </span>
+            {tool.descriptionPreview !== null && (
+              <span className="hidden min-w-0 truncate text-xs text-muted-foreground md:inline">
+                {tool.descriptionPreview}
+              </span>
+            )}
+            <span className="flex-1" />
+            {hasDetails &&
+              (open ? (
+                <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
+              ))}
+          </button>
+          <button
+            type="button"
+            className="inline-flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={nameCopy.copy}
+            aria-label={nameCopy.copied ? "Copied tool name" : "Copy tool name"}
+          >
+            {nameCopy.copied ? (
+              <Check className="size-3.5 text-emerald-400" />
+            ) : (
+              <Copy className="size-3.5" />
+            )}
+          </button>
+        </div>
+        <CollapsibleContent>
+          <div className="space-y-2 border-t border-border/60 px-2.5 py-2">
+            {tool.description !== null && (
+              <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
+            )}
+            <RequiredParameters names={tool.requiredParameters} />
+            {tool.schema !== null && (
+              <ScrollArea className="max-h-64 rounded-md border border-border/60 bg-muted/20 p-2">
+                <JsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
+              </ScrollArea>
+            )}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+function matchesQuery(tool: RequestToolDefinition, query: string): boolean {
+  if (query.length === 0) return true;
+  const haystack = `${tool.name} ${tool.description ?? ""} ${CATEGORY_LABELS[tool.category]}`
+    .toLowerCase()
+    .trim();
+  return haystack.includes(query);
+}
+
+export const RequestTools = memo(function RequestTools({
+  summary,
+  calledToolNames,
+}: RequestToolsProps): JSX.Element | null {
+  const [expanded, setExpanded] = useState(false);
+  const [query, setQuery] = useState("");
+  const calledNames = useMemo(() => new Set(calledToolNames), [calledToolNames]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleTools = useMemo(
+    () =>
+      summary === null ? [] : summary.tools.filter((tool) => matchesQuery(tool, normalizedQuery)),
+    [normalizedQuery, summary],
+  );
+
+  if (summary === null) return null;
+
+  const previewTools = summary.tools.slice(0, 6);
+  const hiddenPreviewCount = summary.tools.length - previewTools.length;
+
+  return (
+    <section className="mb-3 rounded-lg border border-border/70 bg-muted/20">
+      <div className="flex min-w-0 flex-wrap items-center gap-2 px-3 py-2">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <Wrench className="size-4 shrink-0 text-sky-300/80" />
+          <div className="min-w-0">
+            <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+              <span className="text-sm font-semibold text-foreground">Request Tools</span>
+              <Badge variant="outline" className="h-5 rounded-md px-1.5 py-0 font-mono text-[10px]">
+                {summary.tools.length}
+              </Badge>
+              {summary.toolChoiceLabel !== null && (
+                <Badge
+                  variant="outline"
+                  className="h-5 rounded-md px-1.5 py-0 font-mono text-[10px] text-muted-foreground"
+                >
+                  tool_choice: {summary.toolChoiceLabel}
+                </Badge>
+              )}
+            </div>
+            <div className="mt-1 flex min-w-0 flex-wrap gap-1">
+              {summary.categories.map((category) => (
+                <Badge
+                  key={category.category}
+                  variant="outline"
+                  className={cn(
+                    "h-5 rounded-md px-1.5 py-0 font-mono text-[10px]",
+                    CATEGORY_CLASSES[category.category],
+                  )}
+                >
+                  {category.count} {CATEGORY_LABELS[category.category]}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2"
+          onClick={() => setExpanded((value) => !value)}
+          aria-expanded={expanded}
+        >
+          {expanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
+          {expanded ? "Hide" : "Show"}
+        </Button>
+      </div>
+
+      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-border/60 px-3 py-2">
+        {previewTools.map((tool) => (
+          <Badge
+            key={tool.name}
+            variant="outline"
+            className={cn(
+              "h-5 max-w-44 truncate rounded-md px-1.5 py-0 font-mono text-[10px]",
+              calledNames.has(tool.name) && "border-emerald-400/20 text-emerald-300",
+            )}
+          >
+            {tool.name}
+          </Badge>
+        ))}
+        {hiddenPreviewCount > 0 && (
+          <span className="font-mono text-[10px] leading-5 text-muted-foreground">
+            +{hiddenPreviewCount}
+          </span>
+        )}
+      </div>
+
+      {expanded && (
+        <div className="space-y-2 border-t border-border/60 px-3 py-3">
+          <label className="flex h-8 items-center gap-2 rounded-md border border-border/70 bg-background/50 px-2 text-xs">
+            <Search className="size-3.5 shrink-0 text-muted-foreground" />
+            <input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Filter tools"
+              className="min-w-0 flex-1 bg-transparent font-mono text-xs outline-none placeholder:text-muted-foreground/70"
+            />
+          </label>
+          <div className="grid gap-1.5">
+            {visibleTools.length > 0 ? (
+              visibleTools.map((tool) => (
+                <ToolRow key={tool.name} tool={tool} called={calledNames.has(tool.name)} />
+              ))
+            ) : (
+              <p className="py-2 text-xs text-muted-foreground">No matching tools</p>
+            )}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+});

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

@@ -2,6 +2,13 @@ import { Info } from "lucide-react";
 import { type JSX, useMemo, useState } from "react";
 import { cn, formatTokens } from "../../../lib/utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import {
+  analyzeContextIntelligence,
+  CONTEXT_USAGE_THRESHOLDS,
+  type ContextDiagnostic,
+  type ContextIntelligence,
+  type ContextRiskLevel,
+} from "./contextIntelligence";
 import { ROLE_COLOR_CLASSES, SegmentBar } from "./SegmentBar";
 import { ANATOMY_ROLE_LABELS, type AnatomyRole, type AnatomySegment } from "./types";
 
@@ -10,6 +17,8 @@ export type RequestAnatomyProps = {
   parsed: unknown | null;
   /** Server-reported input token count, or `null` if unknown. */
   inputTokens: number | null;
+  /** Model name from the captured log; falls back to the parsed request body when omitted. */
+  model?: string | null;
   /** Optional callback fired when the user activates a concrete request segment. */
   onSegmentActivate?: (segment: AnatomySegment) => void;
   /** Pre-computed segments; if provided, `parsed` is ignored. */
@@ -35,6 +44,20 @@ const VIEW_MODE_OPTIONS: Array<{ value: ContextViewMode; label: string }> = [
   { value: "segment", label: "By Segment" },
 ];
 
+const RISK_CLASS: Record<ContextRiskLevel, string> = {
+  unknown: "bg-muted-foreground/50",
+  ok: "bg-emerald-500/70",
+  watch: "bg-amber-400/75",
+  danger: "bg-red-500/80",
+};
+
+const RISK_TEXT_CLASS: Record<ContextRiskLevel, string> = {
+  unknown: "text-muted-foreground",
+  ok: "text-emerald-400",
+  watch: "text-amber-300",
+  danger: "text-red-300",
+};
+
 function formatPercent(value: number): string {
   if (value >= 10) return `${value.toFixed(0)}%`;
   if (value >= 1) return `${value.toFixed(1)}%`;
@@ -42,6 +65,157 @@ function formatPercent(value: number): string {
   return "0%";
 }
 
+function formatUsagePercent(value: number | null): string {
+  if (value === null) return "Unknown";
+  return formatPercent(value * 100);
+}
+
+function formatRemainingTokens(value: number | null): string {
+  if (value === null) return "Unknown";
+  if (value < 0) return `-${formatTokens(Math.abs(value))}`;
+  return formatTokens(value);
+}
+
+function formatContextLimit(intelligence: ContextIntelligence): string {
+  if (intelligence.contextWindow.tokens === null) return "Unknown";
+  return formatTokens(intelligence.contextWindow.tokens);
+}
+
+function formatContextSource(intelligence: ContextIntelligence): string {
+  switch (intelligence.contextWindow.source) {
+    case "request":
+      return intelligence.contextWindow.label;
+    case "model-rule":
+      return intelligence.contextWindow.label;
+    case "unknown":
+      return intelligence.model === null
+        ? intelligence.contextWindow.label
+        : `${intelligence.contextWindow.label}: ${intelligence.model}`;
+  }
+}
+
+function diagnosticTone(diagnostic: ContextDiagnostic): string {
+  switch (diagnostic.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 ContextIntelligenceStrip({
+  intelligence,
+}: {
+  intelligence: ContextIntelligence;
+}): JSX.Element {
+  const usageWidth =
+    intelligence.usagePercent === null ? 0 : Math.max(1, intelligence.usagePercent * 100);
+  const outputReserveLabel =
+    intelligence.outputReserveTokens === null
+      ? "No output reserve"
+      : `Output reserve ${formatTokens(intelligence.outputReserveTokens)}`;
+  const largestRole = intelligence.largestRole;
+
+  return (
+    <div className="space-y-2">
+      <div className="grid gap-x-4 gap-y-2 border-y border-border/60 py-2 text-xs sm:grid-cols-4">
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium uppercase text-muted-foreground">Window</div>
+          <div className="mt-0.5 truncate font-mono text-foreground">
+            {formatContextLimit(intelligence)}
+          </div>
+          <div className="truncate text-[11px] text-muted-foreground">
+            {formatContextSource(intelligence)}
+          </div>
+        </div>
+
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium uppercase text-muted-foreground">Used</div>
+          <div className={cn("mt-0.5 font-mono", RISK_TEXT_CLASS[intelligence.riskLevel])}>
+            {formatUsagePercent(intelligence.usagePercent)}
+          </div>
+          <div className="truncate text-[11px] text-muted-foreground">{outputReserveLabel}</div>
+        </div>
+
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium uppercase text-muted-foreground">Remaining</div>
+          <div className="mt-0.5 font-mono text-foreground">
+            {formatRemainingTokens(intelligence.remainingAfterReserveTokens)}
+          </div>
+          <div className="truncate text-[11px] text-muted-foreground">
+            Input only {formatRemainingTokens(intelligence.remainingInputTokens)}
+          </div>
+        </div>
+
+        <div className="min-w-0">
+          <div className="text-[10px] font-medium uppercase text-muted-foreground">Largest</div>
+          {largestRole === null ? (
+            <div className="mt-0.5 text-muted-foreground">Unknown</div>
+          ) : (
+            <>
+              <div className="mt-0.5 flex min-w-0 items-center gap-1.5">
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "size-2.5 shrink-0 rounded-[2px]",
+                    ROLE_COLOR_CLASSES[largestRole.role],
+                  )}
+                />
+                <span className="truncate text-foreground">{largestRole.label}</span>
+              </div>
+              <div className="truncate font-mono text-[11px] text-muted-foreground">
+                {formatPercent(largestRole.percent * 100)} | ~{formatTokens(largestRole.tokens)}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {intelligence.contextWindow.tokens !== null && (
+        <div className="space-y-1.5">
+          <div className="relative h-2 overflow-hidden rounded-full bg-muted/40">
+            <div
+              className={cn("h-full rounded-full", RISK_CLASS[intelligence.riskLevel])}
+              style={{ width: `${String(usageWidth)}%` }}
+            />
+            <div
+              aria-hidden="true"
+              className="absolute top-0 h-full w-px bg-amber-200/70"
+              style={{ left: `${String(CONTEXT_USAGE_THRESHOLDS.watch * 100)}%` }}
+            />
+            <div
+              aria-hidden="true"
+              className="absolute top-0 h-full w-px bg-red-200/80"
+              style={{ left: `${String(CONTEXT_USAGE_THRESHOLDS.danger * 100)}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-[10px] text-muted-foreground">
+            <span>Context window</span>
+            <span>
+              Watch {formatUsagePercent(CONTEXT_USAGE_THRESHOLDS.watch)} / Danger{" "}
+              {formatUsagePercent(CONTEXT_USAGE_THRESHOLDS.danger)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {intelligence.diagnostics.length > 0 && (
+        <div className="grid gap-1.5 sm:grid-cols-2">
+          {intelligence.diagnostics.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>
+      )}
+    </div>
+  );
+}
+
 function aggregateByRole(segments: AnatomySegment[]): AnatomySegment[] {
   const result: AnatomySegment[] = [];
   for (const role of ROLE_ORDER) {
@@ -76,6 +250,7 @@ function topContributors(segments: AnatomySegment[]): AnatomySegment[] {
 export function RequestAnatomy({
   parsed,
   inputTokens,
+  model = null,
   onSegmentActivate,
   segments: providedSegments,
 }: RequestAnatomyProps): JSX.Element | null {
@@ -93,6 +268,18 @@ export function RequestAnatomy({
     () => (segments === null ? [] : topContributors(segments)),
     [segments],
   );
+  const intelligence = useMemo(
+    () =>
+      segments === null
+        ? null
+        : analyzeContextIntelligence({
+            segments,
+            inputTokens,
+            parsed,
+            model,
+          }),
+    [inputTokens, model, parsed, segments],
+  );
 
   const showDivergenceWarning = useMemo(() => {
     if (segments === null) return false;
@@ -115,6 +302,12 @@ export function RequestAnatomy({
   const segmentCountLabel = `${String(segments.length)} segment${segments.length === 1 ? "" : "s"}`;
   const providerInputLabel =
     inputTokens === null ? "Provider input unknown" : `Provider input ${formatTokens(inputTokens)}`;
+  const contextLimitLabel =
+    intelligence === null ? "Limit unknown" : `Limit ${formatContextLimit(intelligence)}`;
+  const usageLabel =
+    intelligence === null
+      ? "Usage unknown"
+      : `${formatUsagePercent(intelligence.usagePercent)} used`;
 
   return (
     <TooltipProvider delayDuration={150}>
@@ -123,7 +316,8 @@ export function RequestAnatomy({
           <div className="min-w-0">
             <div className="text-sm font-semibold text-foreground">Request Context</div>
             <div className={cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass)}>
-              Estimated ~{formatTokens(total)} tokens | {providerInputLabel} | {segmentCountLabel}
+              Estimated ~{formatTokens(total)} tokens | {providerInputLabel} | {contextLimitLabel} |{" "}
+              {usageLabel} | {segmentCountLabel}
             </div>
           </div>
 
@@ -172,6 +366,8 @@ export function RequestAnatomy({
           </div>
         )}
 
+        {intelligence !== null && <ContextIntelligenceStrip intelligence={intelligence} />}
+
         <SegmentBar
           segments={displayedSegments}
           totalTokens={displayedTotal}