@tonyclaw/agent-inspector 2.1.16 → 2.1.18

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

@@ -1,6 +1,6 @@
-import { type JSX, useMemo } from "react";
-import { cn } from "../../lib/utils";
+import { type JSX, type KeyboardEvent, type MouseEvent, useMemo } from "react";
 import { isTurnBoundary, type StopReason } from "../../lib/stopReason";
+import { cn } from "../../lib/utils";
 import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
@@ -32,13 +32,10 @@ function boundaryTitle(stopReason: StopReason): string {
   }
 }
 
-/**
- * Vertical timeline connector.  Top spacer uses a calc() that
- * mixes rem (py-1 + half-line) and px (border) so the crab
- * centre-line matches the LogEntry display number regardless of the
- * root font-size.  The bottom spacer is flex-1 so the outgoing
- * line adapts to whatever height the LogEntry occupies.
- */
+function crabShellClass(interactive: boolean): string {
+  return interactive ? "cursor-pointer transition-transform hover:scale-110" : "";
+}
+
 export function ThreadConnector({
   stopReason,
   isPending,
@@ -52,53 +49,55 @@ export function ThreadConnector({
   const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
+  const interactive = collapsible && onToggle !== undefined;
   const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
   const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
 
-  const interactiveProps =
-    collapsible && onToggle
-      ? ({
-          role: "button" as const,
-          tabIndex: 0,
-          className: "cursor-pointer",
-          onClick: (e: React.MouseEvent) => {
-            e.stopPropagation();
-            onToggle();
-          },
-          onKeyDown: (e: React.KeyboardEvent) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onToggle();
-            }
-          },
-        } as const)
-      : ({} as const);
+  const handleCrabClick = (event: MouseEvent<HTMLSpanElement>): void => {
+    if (!interactive || onToggle === undefined) return;
+    event.stopPropagation();
+    onToggle();
+  };
+
+  const handleCrabKeyDown = (event: KeyboardEvent<HTMLSpanElement>): void => {
+    if (!interactive || onToggle === undefined) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onToggle();
+  };
 
   return (
     <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
-      {/* Top spacer — crab centre must land on the LogEntry index midline.
-       *  Index midline from container top = border(1px) + py-1(0.25rem) + ½line(0.5rem)
-       *  = 1px + 0.75rem.  Crab centre = pt(2px) + spacer + 7px(half crab).
-       *  ∴ spacer = 0.75rem - 8px.  (at 16px root: 12-8=4px; 2+4+7=13px). */}
       <div className="flex justify-center h-[calc(0.75rem-8px)]">
         {!isFirst && <div className="w-0.5 bg-muted-foreground/30 h-full" />}
       </div>
 
-      {/* Crab — pinned to the fixed offset above so it never drifts
-       *  when the LogEntry expands / collapses.  Clickable when the
-       *  turn is collapsible (replaces the old chevron toggle). */}
       {isFusedBoundary ? (
-        <span title="Start and end of turn">
+        <span
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          title="Single-request turn"
+          className={crabShellClass(interactive)}
+          onClick={handleCrabClick}
+          onKeyDown={handleCrabKeyDown}
+        >
           <FusedCrab
             className={cn(
-              "size-3.5 text-cyan-300/90",
+              "size-3.5 text-[#80FF00]",
               "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(103,232,249,0.35)]",
+              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]",
             )}
           />
         </span>
       ) : isBoundary ? (
-        <span title={boundaryTitle(stopReason)} {...interactiveProps}>
+        <span
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          title={boundaryTitle(stopReason)}
+          className={crabShellClass(interactive)}
+          onClick={handleCrabClick}
+          onKeyDown={handleCrabKeyDown}
+        >
           <Crab
             className={cn(
               "size-3.5 text-amber-400",
@@ -108,28 +107,32 @@ export function ThreadConnector({
           />
         </span>
       ) : isTurnStart ? (
-        <span title="Start of turn" {...interactiveProps}>
+        <span
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          title="Start of turn"
+          className={crabShellClass(interactive)}
+          onClick={handleCrabClick}
+          onKeyDown={handleCrabKeyDown}
+        >
           <Crab
             className={cn(
-              "size-3.5 text-cyan-300/85",
+              "size-3.5 text-emerald-400",
               "animate-crab-appear",
-              "drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]",
+              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
             )}
           />
         </span>
       ) : isRunning ? (
-        <span title="Processing…">
+        <span title="Processing">
           <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
         </span>
       ) : (
-        <span>
+        <span title="Request in turn">
           <Crab className="size-3.5 text-muted-foreground/40" />
         </span>
       )}
 
-      {/* Bottom spacer — flex-1 fills whatever height the LogEntry
-       *  consumes (header + expanded content).  Turn boundaries have
-       *  no outgoing line. */}
       <div className="flex-1 flex justify-center min-h-0">
         {!isBoundary && (
           <div

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

@@ -13,9 +13,7 @@ import { isTurnBoundary } from "../../lib/stopReason";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
-import { getCrabVariant } from "../ui/crab-variants";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
-import { ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import {
@@ -145,10 +143,6 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, [entries, lastIdx]);
 
-  // Crab variant creators for the dual-crab collapsed layout
-  const StartCrab = useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
-  const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
-
   const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
   const aggregateIsSlow =
     aggregate.maxElapsed !== null &&
@@ -209,7 +203,6 @@ export const TurnGroup = memo(function TurnGroup({
       )}
     >
       {collapsed ? (
-        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
         <div
           data-nav-id={`turn-collapsed-${String(firstLogId)}`}
           data-nav-action="expand"
@@ -231,78 +224,38 @@ export const TurnGroup = memo(function TurnGroup({
             </span>
           </div>
 
-          {/* Dual-crab connector for collapsed multi-request turns. */}
-          <div className="w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5">
+          <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <span
-              role="button"
-              tabIndex={0}
-              title="Start of turn - click to expand"
-              className="cursor-pointer"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapse();
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleCollapse();
-                }
-              }}
-            >
-              <StartCrab
-                className={cn(
-                  "size-3.5 text-cyan-300/85",
-                  "animate-crab-appear drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]",
-                )}
-              />
-            </span>
-
+            <span className="size-2 rounded-full border border-cyan-300/45 bg-cyan-300/20" />
             <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-0.5 bg-muted-foreground/30 h-full" />
+              <div className="w-px bg-muted-foreground/25 h-full" />
             </div>
-
             <span
-              role="button"
-              tabIndex={0}
-              title="End of Turn - click to expand"
-              className="cursor-pointer"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapse();
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleCollapse();
-                }
-              }}
-            >
-              <EndCrab
-                className={cn(
-                  "size-3.5 text-amber-400",
-                  "animate-crab-settle drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
-                )}
-              />
-            </span>
+              className={cn(
+                "size-2 rounded-full border",
+                isComplete
+                  ? "border-amber-300/45 bg-amber-300/20"
+                  : "border-muted-foreground/30 bg-muted/30",
+              )}
+            />
           </div>
 
           {/* Summary content - hidden for single-log turns. */}
           {entries.length > 1 && (
             <div
               className={cn(
-                "flex-1 min-w-0 mb-0.5 rounded-lg border border-cyan-300/10 py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
-                "border border-border bg-card shadow-sm",
+                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+                "border border-border bg-card shadow-sm transition-colors hover:border-cyan-200/20",
                 bgClass,
               )}
             >
-              <span className={ROW_CHEVRON_SLOT_CLASS}>
-                <ChevronRight className="size-4 shrink-0" />
+              <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70">
+                {turnLabel}
               </span>
 
               {/* ID range */}
               <span
-                className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0"
+                className="text-blue-300/85 font-mono font-semibold tabular-nums shrink-0"
                 title={`Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
                   entries[lastIdx]?.log.id ?? "?",
                 )}`}
@@ -363,6 +316,13 @@ export const TurnGroup = memo(function TurnGroup({
 
               {/* Spacer */}
               <span className="flex-1 min-w-0" />
+
+              <span
+                className="border border-input bg-background inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
+                aria-hidden="true"
+              >
+                <ChevronRight className="size-4 shrink-0" />
+              </span>
             </div>
           )}
         </div>

package/src/components/proxy-viewer/bodyHydration.ts

@@ -0,0 +1,56 @@
+import { ApiTimeoutError } from "../../lib/apiClient";
+
+export type FullBodyHydrationError = {
+  title: string;
+  detail: string;
+};
+
+const DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL =
+  "The compact log metadata is still available. Retry if the local server was restarting or the body store was briefly unavailable.";
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes.toLocaleString()} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
+}
+
+export function formatBodyHydrationFootprint(
+  requestBytes: number | null | undefined,
+  responseBytes: number | null | undefined,
+): string | null {
+  const parts: string[] = [];
+
+  if (requestBytes !== null && requestBytes !== undefined) {
+    parts.push(`Request ${formatBytes(requestBytes)}`);
+  }
+
+  if (responseBytes !== null && responseBytes !== undefined) {
+    parts.push(`Response ${formatBytes(responseBytes)}`);
+  }
+
+  return parts.length === 0 ? null : parts.join(" · ");
+}
+
+export function describeFullBodyHydrationError(error: unknown): FullBodyHydrationError {
+  if (error instanceof ApiTimeoutError) {
+    return {
+      title: "Full bodies timed out",
+      detail:
+        "The log store did not answer before the UI timeout. Compact metadata is still available; retry loading the bodies.",
+    };
+  }
+
+  if (error instanceof Error) {
+    const message = error.message.trim();
+    return {
+      title: "Full bodies could not be loaded",
+      detail: message === "" ? DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL : message,
+    };
+  }
+
+  return {
+    title: "Full bodies could not be loaded",
+    detail: DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL,
+  };
+}

package/src/lib/providerTestContract.ts

@@ -72,22 +72,58 @@ const ProviderFormatTestResultsSchema = z.object({
   streaming: ProviderTestStateSchema,
 });
 
-const ModelTestResultsSchema = z.object({
-  anthropic: ProviderFormatTestResultsSchema,
-  openai: ProviderFormatTestResultsSchema,
-});
+export type ProviderFormatTestResults = z.infer<typeof ProviderFormatTestResultsSchema>;
 
-export const ProviderTestResultsSchema = z.object({
-  anthropic: ProviderFormatTestResultsSchema,
-  openai: ProviderFormatTestResultsSchema,
-  models: z.record(z.string(), ModelTestResultsSchema).optional(),
-  testedAt: z.string().optional(),
-});
+export function createNotConfiguredProviderFormatTestResults(): ProviderFormatTestResults {
+  return {
+    nonStreaming: { notConfigured: true },
+    streaming: { notConfigured: true },
+  };
+}
+
+const ModelTestResultsSchema = z
+  .object({
+    anthropic: ProviderFormatTestResultsSchema,
+    openai: ProviderFormatTestResultsSchema.optional(),
+    openaiChat: ProviderFormatTestResultsSchema.optional(),
+    openaiResponses: ProviderFormatTestResultsSchema.optional(),
+  })
+  .transform((value) => {
+    const openaiChat =
+      value.openaiChat ?? value.openai ?? createNotConfiguredProviderFormatTestResults();
+    return {
+      ...value,
+      openai: value.openai ?? openaiChat,
+      openaiChat,
+      openaiResponses: value.openaiResponses ?? createNotConfiguredProviderFormatTestResults(),
+    };
+  });
+
+export const ProviderTestResultsSchema = z
+  .object({
+    anthropic: ProviderFormatTestResultsSchema,
+    openai: ProviderFormatTestResultsSchema.optional(),
+    openaiChat: ProviderFormatTestResultsSchema.optional(),
+    openaiResponses: ProviderFormatTestResultsSchema.optional(),
+    models: z.record(z.string(), ModelTestResultsSchema).optional(),
+    testedAt: z.string().optional(),
+  })
+  .transform((value) => {
+    const openaiChat =
+      value.openaiChat ?? value.openai ?? createNotConfiguredProviderFormatTestResults();
+    return {
+      ...value,
+      openai: value.openai ?? openaiChat,
+      openaiChat,
+      openaiResponses: value.openaiResponses ?? createNotConfiguredProviderFormatTestResults(),
+    };
+  });
 
 export type ProviderTestErrorType = z.infer<typeof ProviderTestErrorTypeSchema>;
 export type ProviderTestDebug = z.infer<typeof ProviderTestDebugSchema>;
 export type ProviderTestResult = z.infer<typeof ProviderTestResultSchema>;
 export type ProviderTestState = z.infer<typeof ProviderTestStateSchema>;
+export type ProviderModelTestResults = z.infer<typeof ModelTestResultsSchema>;
 export type ProviderTestResults = z.infer<typeof ProviderTestResultsSchema>;
 
 export function createPendingProviderTestResults(): ProviderTestResults {
@@ -100,6 +136,14 @@ export function createPendingProviderTestResults(): ProviderTestResults {
       nonStreaming: { testing: true },
       streaming: { testing: true },
     },
+    openaiChat: {
+      nonStreaming: { testing: true },
+      streaming: { testing: true },
+    },
+    openaiResponses: {
+      nonStreaming: { testing: true },
+      streaming: { testing: true },
+    },
   };
 }
 
@@ -118,5 +162,7 @@ export function createFailedProviderTestResults(
   return {
     anthropic: createFormatResult(),
     openai: createFormatResult(),
+    openaiChat: createFormatResult(),
+    openaiResponses: createFormatResult(),
   };
 }

package/src/lib/providerTestPrompt.ts

@@ -1,17 +1,29 @@
 export type ProviderTestMode = "non-streaming" | "streaming";
+export type ProviderTestApiShape = "chat" | "responses";
 
 export type ProviderTestMessage = {
   role: "user";
   content: string;
 };
 
-export type ProviderTestRequestBody = {
+export type ProviderTestChatRequestBody = {
   model: string;
   messages: ProviderTestMessage[];
   max_tokens: number;
   stream: boolean;
 };
 
+export type ProviderTestResponsesRequestBody = {
+  model: string;
+  input: string;
+  max_output_tokens: number;
+  stream: boolean;
+};
+
+export type ProviderTestRequestBody =
+  | ProviderTestChatRequestBody
+  | ProviderTestResponsesRequestBody;
+
 const MEMORY_PROBE_FACTS = [
   "Project fact: Agent Inspector captures LLM traffic and turns it into Raw Trace, Session Episode, and Memory Candidate layers.",
   "Procedure: before release, run bun test, npm run typecheck, npm run lint, npm run build, and openspec validate --all --strict.",
@@ -63,7 +75,17 @@ export function buildProviderTestMessages(mode: ProviderTestMode): ProviderTestM
 export function buildProviderTestRequestBody(
   model: string,
   mode: ProviderTestMode,
+  apiShape: ProviderTestApiShape = "chat",
 ): ProviderTestRequestBody {
+  if (apiShape === "responses") {
+    return {
+      model,
+      input: buildProviderTestUserPrompt(mode),
+      max_output_tokens: maxTokensForMode(mode),
+      stream: mode === "streaming",
+    };
+  }
+
   const base = {
     model,
     messages: buildProviderTestMessages(mode),

package/src/lib/upstreamUrl.ts

@@ -1,9 +1,24 @@
 export const PATH_V1_CHAT_COMPLETIONS = "/v1/chat/completions";
 export const PATH_V1_RESPONSES = "/v1/responses";
+export const PATH_V1_MESSAGES = "/v1/messages";
+
+export type UpstreamUrlDiagnostic = {
+  severity: "info" | "warning";
+  message: string;
+};
+
+export type UpstreamUrlPreviewOptions = {
+  providerName?: string;
+};
+
+export type UpstreamUrlPreview = {
+  finalUrl: string;
+  diagnostics: UpstreamUrlDiagnostic[];
+};
 
 export function buildUpstreamUrl(upstreamBase: string, normalizedPath: string): string {
   const base = upstreamBase.endsWith("/") ? upstreamBase.slice(0, -1) : upstreamBase;
-  const endpointPath = normalizedPath.split("?")[0] ?? normalizedPath;
+  const endpointPath = endpointPathFor(normalizedPath);
   const queryIndex = normalizedPath.indexOf("?");
   const search = queryIndex >= 0 ? normalizedPath.slice(queryIndex) : "";
 
@@ -24,6 +39,62 @@ export function buildUpstreamUrl(upstreamBase: string, normalizedPath: string):
   return base + normalizedPath;
 }
 
+export function previewUpstreamUrl(
+  upstreamBase: string,
+  normalizedPath: string,
+  options: UpstreamUrlPreviewOptions = {},
+): UpstreamUrlPreview {
+  const base = upstreamBase.trim().replace(/\/+$/, "");
+  const endpointPath = endpointPathFor(normalizedPath);
+  const finalUrl = buildUpstreamUrl(base, normalizedPath);
+  const diagnostics: UpstreamUrlDiagnostic[] = [];
+  const exactEndpoint = endpointPath !== "" && base.endsWith(endpointPath);
+
+  if (exactEndpoint) {
+    diagnostics.push({
+      severity: "info",
+      message: "This already includes the exact endpoint; no duplicate suffix will be appended.",
+    });
+  } else if (isZhipuVersionedOpenAIBase(base) && isVersionedChatCompletionsPath(normalizedPath)) {
+    diagnostics.push({
+      severity: "info",
+      message: "Zhipu bases already include the API version; only /chat/completions is appended.",
+    });
+  } else if (base.endsWith("/v1") && normalizedPath.startsWith("/v1/")) {
+    diagnostics.push({
+      severity: "info",
+      message: "Base URL already ends with /v1; the suffix will not repeat /v1.",
+    });
+  }
+
+  if (isResponsesPath(endpointPath) && baseEndsWithChatEndpoint(base)) {
+    diagnostics.push({
+      severity: "warning",
+      message: "This looks like a Chat Completions endpoint, so Responses would append after it.",
+    });
+  }
+
+  if (isChatCompletionsPath(endpointPath) && baseEndsWithResponsesEndpoint(base)) {
+    diagnostics.push({
+      severity: "warning",
+      message: "This looks like a Responses endpoint, so Chat Completions would append after it.",
+    });
+  }
+
+  if (isResponsesPath(endpointPath) && isLikelyDeepSeekBase(base, options.providerName)) {
+    diagnostics.push({
+      severity: "warning",
+      message: "DeepSeek's official API does not currently expose OpenAI Responses.",
+    });
+  }
+
+  return { finalUrl, diagnostics };
+}
+
+function endpointPathFor(normalizedPath: string): string {
+  return normalizedPath.split("?")[0] ?? normalizedPath;
+}
+
 function isVersionedChatCompletionsPath(normalizedPath: string): boolean {
   return (
     normalizedPath === PATH_V1_CHAT_COMPLETIONS ||
@@ -32,6 +103,39 @@ function isVersionedChatCompletionsPath(normalizedPath: string): boolean {
   );
 }
 
+function isChatCompletionsPath(endpointPath: string): boolean {
+  return (
+    endpointPath === PATH_V1_CHAT_COMPLETIONS ||
+    endpointPath.startsWith(`${PATH_V1_CHAT_COMPLETIONS}/`)
+  );
+}
+
+function isResponsesPath(endpointPath: string): boolean {
+  return endpointPath === PATH_V1_RESPONSES || endpointPath.startsWith(`${PATH_V1_RESPONSES}/`);
+}
+
+function baseEndsWithChatEndpoint(base: string): boolean {
+  const normalized = base.toLowerCase();
+  return normalized.endsWith("/chat/completions");
+}
+
+function baseEndsWithResponsesEndpoint(base: string): boolean {
+  const normalized = base.toLowerCase();
+  return normalized.endsWith("/responses");
+}
+
+function isLikelyDeepSeekBase(base: string, providerName: string | undefined): boolean {
+  const provider = providerName?.toLowerCase();
+  if (provider !== undefined && provider.includes("deepseek")) return true;
+
+  try {
+    const parsed = new URL(base);
+    return parsed.hostname.toLowerCase().includes("deepseek");
+  } catch {
+    return base.toLowerCase().includes("deepseek");
+  }
+}
+
 function isZhipuVersionedOpenAIBase(base: string): boolean {
   try {
     const parsed = new URL(base);