@tonyclaw/agent-inspector 2.0.5 → 2.0.7

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

@@ -1,27 +1,77 @@
 import { Info } from "lucide-react";
-import { type JSX, useMemo } from "react";
+import { type JSX, useMemo, useState } from "react";
 import { cn, formatTokens } from "../../../lib/utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
-import { SegmentBar } from "./SegmentBar";
-import type { AnatomySegment } from "./types";
+import { ROLE_COLOR_CLASSES, SegmentBar } from "./SegmentBar";
+import { ANATOMY_ROLE_LABELS, type AnatomyRole, type AnatomySegment } from "./types";
 
 export type RequestAnatomyProps = {
   /** Parsed request body, or `null` if it cannot be parsed. */
   parsed: unknown | null;
   /** Server-reported input token count, or `null` if unknown. */
   inputTokens: number | null;
-  /** Optional callback fired when the user activates a segment. */
+  /** Optional callback fired when the user activates a concrete request segment. */
   onSegmentActivate?: (segment: AnatomySegment) => void;
   /** Pre-computed segments; if provided, `parsed` is ignored. */
   segments?: AnatomySegment[] | null;
 };
 
+type ContextViewMode = "role" | "segment";
+
 const DIVERGENCE_AMBER_THRESHOLD = 0.25;
+const TOP_CONTRIBUTOR_COUNT = 5;
+const ROLE_ORDER: AnatomyRole[] = ["system", "user", "assistant", "tool", "tools"];
+
+const ROLE_DESCRIPTIONS: Record<AnatomyRole, string> = {
+  system: "instructions",
+  user: "user turns",
+  assistant: "assistant turns",
+  tool: "tool results",
+  tools: "tool schemas",
+};
+
+const VIEW_MODE_OPTIONS: Array<{ value: ContextViewMode; label: string }> = [
+  { value: "role", label: "By Role" },
+  { value: "segment", label: "By Segment" },
+];
+
+function formatPercent(value: number): string {
+  if (value >= 10) return `${value.toFixed(0)}%`;
+  if (value >= 1) return `${value.toFixed(1)}%`;
+  if (value > 0) return "<1%";
+  return "0%";
+}
+
+function aggregateByRole(segments: AnatomySegment[]): AnatomySegment[] {
+  const result: AnatomySegment[] = [];
+  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: AnatomySegment[]): AnatomySegment[] {
+  return [...segments].sort((a, b) => b.size - a.size).slice(0, TOP_CONTRIBUTOR_COUNT);
+}
 
 /**
- * Render the request anatomy view: a one-line summary plus the
- * stacked segment bar. Returns `null` when the request cannot be
- * parsed or the segment list is empty.
+ * Render a request context breakdown: headline metrics, a stacked token bar,
+ * role legend, and the largest individual context blocks.
  */
 export function RequestAnatomy({
   parsed,
@@ -29,69 +79,170 @@ export function RequestAnatomy({
   onSegmentActivate,
   segments: providedSegments,
 }: RequestAnatomyProps): JSX.Element | null {
-  // Caller is expected to pre-compute segments in production (see
-  // LogEntry). When called standalone, fall back to deriving from
-  // `parsed` directly using the unknown adapter is not appropriate —
-  // the caller is responsible for choosing the right adapter.
+  const [viewMode, setViewMode] = useState<ContextViewMode>("role");
   const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
-  const total = useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
+  const total = useMemo(
+    () => (segments ?? []).reduce((sum, segment) => sum + segment.size, 0),
+    [segments],
+  );
+  const roleSegments = useMemo(
+    () => (segments === null ? [] : aggregateByRole(segments)),
+    [segments],
+  );
+  const topSegments = useMemo(
+    () => (segments === null ? [] : topContributors(segments)),
+    [segments],
+  );
 
-  // Show divergence warning when both estimate and server numbers exist.
   const showDivergenceWarning = useMemo(() => {
-    if (segments === null || segments === undefined) 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 = useMemo(() => {
-    if (inputTokens === null) return "text-muted-foreground";
-    if (showDivergenceWarning) return "text-amber-400";
-    return "text-muted-foreground";
-  }, [inputTokens, showDivergenceWarning]);
+  if (segments === null) return null;
+  if (segments.length === 0) return null;
+  if (parsed === null && providedSegments === undefined) return null;
 
-  if (segments === null || segments === undefined) {
-    return null;
-  }
-  if (segments.length === 0) {
-    return null;
-  }
-  if (parsed === null && providedSegments === undefined) {
-    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 : undefined;
+  const segmentCountLabel = `${String(segments.length)} segment${segments.length === 1 ? "" : "s"}`;
+  const providerInputLabel =
+    inputTokens === null ? "Provider input unknown" : `Provider input ${formatTokens(inputTokens)}`;
 
   return (
     <TooltipProvider delayDuration={150}>
-      <div className="px-4 py-3 space-y-2" data-testid="anatomy-root">
-        <div className="flex items-center gap-2 text-xs">
-          <span className="font-mono tabular-nums text-foreground">
-            ~{formatTokens(total)} tokens
-          </span>
-          {inputTokens !== null && (
-            <span className={cn("font-mono tabular-nums", summaryColorClass)}>
-              (server: {formatTokens(inputTokens)})
-            </span>
-          )}
-          {showDivergenceWarning && (
+      <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={cn("mt-0.5 text-xs font-mono tabular-nums", summaryColorClass)}>
+              Estimated ~{formatTokens(total)} tokens | {providerInputLabel} | {segmentCountLabel}
+            </div>
+          </div>
+
+          <div
+            className="inline-flex shrink-0 rounded border border-border bg-muted/20 p-0.5"
+            role="group"
+            aria-label="Context breakdown mode"
+          >
+            {VIEW_MODE_OPTIONS.map((option) => (
+              <button
+                key={option.value}
+                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",
+                )}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {showDivergenceWarning && (
+          <div className="inline-flex items-center gap-1.5 text-xs text-amber-400">
             <Tooltip>
               <TooltipTrigger asChild>
                 <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"
                 >
                   <Info className="size-3.5" />
                 </button>
               </TooltipTrigger>
               <TooltipContent className="max-w-xs text-xs">
-                Bar uses a token estimate heuristic (~4 ASCII chars / token, ~1 CJK / emoji char per
-                token). The server&apos;s reported value is the source of truth for cost.
+                The bar uses a local token estimate. Provider input tokens remain the source of
+                truth for billing and context-window usage.
               </TooltipContent>
             </Tooltip>
-          )}
+            Estimate differs from provider-reported input.
+          </div>
+        )}
+
+        <SegmentBar
+          segments={displayedSegments}
+          totalTokens={displayedTotal}
+          showLabels={viewMode === "segment"}
+          onActivate={activateSegment}
+        />
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px] text-muted-foreground">
+          {roleSegments.map((segment) => {
+            const percent = total > 0 ? (segment.size / total) * 100 : 0;
+            return (
+              <div key={segment.role} className="inline-flex items-center gap-1.5">
+                <span
+                  aria-hidden="true"
+                  className={cn("size-2.5 rounded-[2px]", ROLE_COLOR_CLASSES[segment.role])}
+                />
+                <span>{segment.label}</span>
+                <span className="font-mono text-muted-foreground/70">{formatPercent(percent)}</span>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="text-xs font-medium text-foreground">Top Contributors</div>
+          <div className="grid gap-1">
+            {topSegments.map((segment, index) => {
+              const percent = total > 0 ? (segment.size / total) * 100 : 0;
+              const activate = onSegmentActivate;
+              const content = (
+                <>
+                  <span className="w-5 shrink-0 text-right font-mono text-muted-foreground/70">
+                    {String(index + 1)}
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "size-2.5 shrink-0 rounded-[2px]",
+                      ROLE_COLOR_CLASSES[segment.role],
+                    )}
+                  />
+                  <span className="min-w-0 flex-1 truncate text-left">{segment.label}</span>
+                  <span className="shrink-0 font-mono text-muted-foreground">
+                    {formatPercent(percent)} | ~{formatTokens(segment.size)}
+                  </span>
+                </>
+              );
+              if (activate !== undefined) {
+                return (
+                  <button
+                    key={`${segment.path}-${index}`}
+                    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"
+                  >
+                    {content}
+                  </button>
+                );
+              }
+              return (
+                <div
+                  key={`${segment.path}-${index}`}
+                  className="flex h-7 items-center gap-2 rounded px-1.5 text-xs text-muted-foreground"
+                >
+                  {content}
+                </div>
+              );
+            })}
+          </div>
         </div>
-        <SegmentBar segments={segments} totalTokens={total} onActivate={onSegmentActivate} />
       </div>
     </TooltipProvider>
   );