@tonyclaw/agent-inspector 3.1.32 → 4.0.2

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

@@ -1,299 +0,0 @@
-import {
-  Blocks,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Code2,
-  Copy,
-  FileText,
-  Globe,
-  MoreHorizontal,
-  MousePointerClick,
-  Search,
-  Terminal,
-  Wrench,
-} from "lucide-react";
-import { memo, Suspense, 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 { safeJsonValue } from "../ui/json-viewer-bulk";
-import { ScrollArea } from "../ui/scroll-area";
-import type {
-  RequestToolCategory,
-  RequestToolDefinition,
-  RequestToolsSummary,
-} from "./requestTools";
-import { LazyJsonViewer } from "./lazy";
-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-transparent bg-blue-400/5 text-blue-300",
-  shell: "border-transparent bg-teal-400/5 text-teal-300",
-  browser: "border-transparent bg-cyan-400/5 text-cyan-300",
-  web: "border-transparent bg-sky-400/5 text-sky-300",
-  mcp: "border-transparent bg-violet-400/5 text-violet-300",
-  code: "border-transparent bg-emerald-400/5 text-emerald-300",
-  other: "border-transparent 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="bg-white/[0.035] rounded-[8px]">
-        <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="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors 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>
-          {open && (
-            <div className="space-y-2 bg-white/[0.025] 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="bg-black/[0.16] max-h-64 rounded-[8px] p-2">
-                  <Suspense
-                    fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
-                  >
-                    <LazyJsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
-                  </Suspense>
-                </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);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-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="bg-black/[0.10] mb-3 overflow-hidden rounded-[8px]">
-      <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 text-muted-foreground hover:text-cyan-100"
-          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 bg-white/[0.025] 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 bg-black/10 px-3 py-3">
-          <label className="bg-white/[0.045] hover:bg-white/[0.075] flex h-8 items-center gap-2 rounded-md 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/ResponseView.tsx

@@ -1,202 +0,0 @@
-import { AlertTriangle, Zap } from "lucide-react";
-import type { JSX } from "react";
-import { memo, useEffect, useState } from "react";
-import { useMemo } from "react";
-import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
-import type { ApiFormat } from "../../contracts";
-import { AnswerMarkdown } from "./AnswerMarkdown";
-import { formatViewFor } from "./formats";
-import { getLogFormatAdapter } from "./log-formats";
-
-export type ResponseViewProps = {
-  responseText: string | null;
-  responseStatus: number | null;
-  streaming: boolean;
-  inputTokens: number | null;
-  outputTokens: number | null;
-  cacheCreationInputTokens?: number | null;
-  cacheReadInputTokens?: number | null;
-  apiFormat?: ApiFormat;
-  /** SSE error message from streaming response */
-  error?: string | null;
-  focusedToolIndex?: number | null;
-  toolFocusNonce?: number;
-};
-
-function getStatusClasses(category: StatusCategory): string {
-  switch (category) {
-    case "success":
-      return "text-emerald-400";
-    case "client_error":
-      return "text-amber-400";
-    case "server_error":
-      return "text-red-400";
-    case "pending":
-      return "text-muted-foreground";
-  }
-}
-
-function StatusIndicator({ status }: { status: number | null }): JSX.Element {
-  const category = getStatusCategory(status);
-  const classes = getStatusClasses(category);
-
-  if (status === null) {
-    return <span className="text-xs text-muted-foreground italic">pending</span>;
-  }
-
-  return (
-    <span className={cn("flex items-center gap-1 text-xs font-mono font-semibold", classes)}>
-      {category === "server_error" && <AlertTriangle className="size-3" />}
-      {status}
-    </span>
-  );
-}
-
-function ErrorResponseView({ text }: { text: string }): JSX.Element {
-  return (
-    <div className="rounded-md border border-red-500/30 bg-red-500/5 p-3">
-      <pre className="text-xs text-red-300 whitespace-pre-wrap font-mono leading-relaxed overflow-auto max-h-[60vh]">
-        {text}
-      </pre>
-    </div>
-  );
-}
-
-function MarkdownFallbackView({ text }: { text: string }): JSX.Element {
-  return <AnswerMarkdown text={text} />;
-}
-
-const RESPONSE_AUTO_PARSE_MAX_CHARS = 1024 * 1024;
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-export const ResponseView = memo(function ResponseView({
-  responseText,
-  responseStatus,
-  streaming,
-  inputTokens,
-  outputTokens,
-  cacheCreationInputTokens,
-  cacheReadInputTokens,
-  apiFormat,
-  error,
-  focusedToolIndex = null,
-  toolFocusNonce = 0,
-}: ResponseViewProps): JSX.Element {
-  const resolvedFormat = apiFormat ?? "unknown";
-  const [parseLargeResponse, setParseLargeResponse] = useState(false);
-  const shouldDeferStructuredParse =
-    responseText !== null && responseText.length > RESPONSE_AUTO_PARSE_MAX_CHARS;
-  const responseTextForStructuredParse =
-    responseText === null || (shouldDeferStructuredParse && !parseLargeResponse)
-      ? null
-      : responseText;
-  const parsed = useMemo(
-    () =>
-      getLogFormatAdapter(resolvedFormat).analyzeResponse(responseTextForStructuredParse).parsed,
-    [resolvedFormat, responseTextForStructuredParse],
-  );
-
-  useEffect(() => {
-    setParseLargeResponse(false);
-  }, [responseText]);
-
-  if (responseText === null && error === undefined) {
-    return (
-      <div className="flex items-center gap-2 py-3">
-        <StatusIndicator status={responseStatus} />
-        <span className="text-xs text-muted-foreground italic">No response</span>
-      </div>
-    );
-  }
-
-  const isHttpError = responseStatus !== null && responseStatus >= 400;
-
-  if (isHttpError) {
-    return (
-      <div className="space-y-2">
-        <StatusIndicator status={responseStatus} />
-        <ErrorResponseView text={responseText ?? ""} />
-        {error !== undefined && error !== null && (
-          <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
-            <div className="font-semibold text-destructive mb-1">SSE Error</div>
-            <div className="text-muted-foreground font-mono">{error}</div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  if (error !== undefined && error !== null) {
-    return (
-      <div className="space-y-2">
-        <StatusIndicator status={responseStatus} />
-        <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
-          <div className="font-semibold text-destructive mb-1">SSE Error</div>
-          <div className="text-muted-foreground font-mono">{error}</div>
-        </div>
-        {responseText !== null && (
-          <div className="mt-2">
-            <ErrorResponseView text={responseText} />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  if (parsed !== null) {
-    return (
-      <div className="space-y-2">
-        <StatusIndicator status={responseStatus} />
-        {formatViewFor(resolvedFormat, parsed, { focusedToolIndex, toolFocusNonce })}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center gap-2">
-        <StatusIndicator status={responseStatus} />
-        {streaming && (inputTokens !== null || outputTokens !== null) && (
-          <span className="flex items-center gap-1 text-muted-foreground text-xs">
-            <Zap className="size-3" />
-            <span className="font-mono tabular-nums">
-              {inputTokens !== null ? formatTokens(inputTokens) : "—"} in /{" "}
-              {outputTokens !== null ? formatTokens(outputTokens) : "—"} out
-            </span>
-            {cacheCreationInputTokens !== null &&
-              cacheCreationInputTokens !== undefined &&
-              cacheCreationInputTokens > 0 && (
-                <span className="font-mono tabular-nums text-emerald-400">
-                  KV Cache +{formatTokens(cacheCreationInputTokens)}
-                </span>
-              )}
-            {cacheReadInputTokens !== null &&
-              cacheReadInputTokens !== undefined &&
-              cacheReadInputTokens > 0 && (
-                <span className="font-mono tabular-nums text-purple-400">
-                  KV Cache ~{formatTokens(cacheReadInputTokens)}
-                </span>
-              )}
-          </span>
-        )}
-      </div>
-      {shouldDeferStructuredParse && !parseLargeResponse && (
-        <div className="rounded-md border border-amber-300/20 bg-amber-300/[0.06] px-3 py-2 text-xs text-muted-foreground">
-          <div className="mb-2">
-            This response is {responseText.length.toLocaleString()} characters, so structured
-            parsing is deferred to keep the UI responsive. The final Response remains available here
-            without rendering the raw event stream by default.
-          </div>
-          <button
-            type="button"
-            className="rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            onClick={() => setParseLargeResponse(true)}
-          >
-            Parse full structured response
-          </button>
-        </div>
-      )}
-      <MarkdownFallbackView text={responseText ?? ""} />
-    </div>
-  );
-});

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

@@ -1,61 +0,0 @@
-import { type JSX } from "react";
-import { cn } from "../../lib/utils";
-
-export type SessionLoadProgress = {
-  label: string;
-  elapsedMs: number;
-  timeoutMs: number;
-  loadedLogs: number;
-  loadedPages: number;
-};
-
-function formatDurationSeconds(ms: number): string {
-  return `${Math.max(0, Math.ceil(ms / 1000)).toString()}s`;
-}
-
-export function SessionLoadProgressBar({
-  progress,
-}: {
-  progress: SessionLoadProgress;
-}): JSX.Element {
-  const elapsedRatio = Math.min(1, progress.elapsedMs / progress.timeoutMs);
-  const percent = Math.max(4, Math.round(elapsedRatio * 100));
-  const remainingMs = Math.max(0, progress.timeoutMs - progress.elapsedMs);
-  const nearTimeout = elapsedRatio >= 0.75;
-  const details = [
-    progress.loadedLogs > 0 ? `${progress.loadedLogs.toString()} logs` : null,
-    progress.loadedPages > 0
-      ? `${progress.loadedPages.toString()} page${progress.loadedPages === 1 ? "" : "s"}`
-      : null,
-    `${formatDurationSeconds(remainingMs)} before timeout`,
-  ].filter((item): item is string => item !== null);
-  const valueText = `${progress.label}: ${details.join(", ")}`;
-
-  return (
-    <div className="min-w-0 space-y-1 px-1 pb-1">
-      <div className="flex min-w-0 items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground">
-        <span className="min-w-0 truncate">{progress.label}</span>
-        <span className={cn("shrink-0 tabular-nums", nearTimeout && "text-amber-300")}>
-          {details.join(" / ")}
-        </span>
-      </div>
-      <div
-        role="progressbar"
-        aria-label={progress.label}
-        aria-valuemin={0}
-        aria-valuemax={progress.timeoutMs}
-        aria-valuenow={Math.min(progress.elapsedMs, progress.timeoutMs)}
-        aria-valuetext={valueText}
-        className="h-1.5 overflow-hidden rounded-full bg-white/[0.06]"
-      >
-        <div
-          className={cn(
-            "h-full rounded-full transition-all duration-300 motion-reduce:transition-none",
-            nearTimeout ? "bg-amber-300/80" : "bg-cyan-300/70",
-          )}
-          style={{ width: `${percent.toString()}%` }}
-        />
-      </div>
-    </div>
-  );
-}