@tonyclaw/agent-inspector 2.1.13 → 2.1.15

package/src/components/providers/ProviderForm.tsx

@@ -6,6 +6,7 @@ import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig, ProviderModelMetadata } from "../../lib/providerContract";
 import { copyTextToClipboard } from "../../lib/clipboard";
 import { maskApiKey } from "../../lib/mask";
+import { buildUpstreamUrl } from "../../lib/upstreamUrl";
 import { formatContextWindowInput, parseContextWindowTokensInput } from "../../lib/utils";
 
 const ZHIPU_PROVIDER_KEYWORDS = ["zhipu", "zhipuai", "bigmodel", "z.ai", "zai", "glm"];
@@ -16,17 +17,27 @@ const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "z.ai coding",
   "zai coding",
 ];
+const ANTHROPIC_MESSAGES_ENDPOINT = "/v1/messages";
+const OPENAI_CHAT_COMPLETIONS_ENDPOINT = "/v1/chat/completions";
+const OPENAI_RESPONSES_ENDPOINT = "/v1/responses";
 
 // Known provider presets - maps provider name keywords to their API URLs
 const KNOWN_PROVIDER_PRESETS: Record<
   string,
-  { anthropicBaseUrl?: string; openaiBaseUrl?: string; apiDocsUrl?: string }
+  {
+    anthropicBaseUrl?: string;
+    openaiBaseUrl?: string;
+    openaiResponsesBaseUrl?: string;
+    apiDocsUrl?: string;
+  }
 > = {
   deepseek: {
     openaiBaseUrl: "https://api.deepseek.com",
   },
   minimax: {
     anthropicBaseUrl: "https://api.minimaxi.com/anthropic",
+    openaiBaseUrl: "https://api.minimaxi.com",
+    openaiResponsesBaseUrl: "https://api.minimaxi.com",
     apiDocsUrl: "https://platform.minimaxi.com/docs/api-reference/api-overview",
   },
   "zhipu coding": {
@@ -122,6 +133,7 @@ type ProviderFormProps = {
     models: string[];
     anthropicBaseUrl?: string;
     openaiBaseUrl?: string;
+    openaiResponsesBaseUrl?: string;
     apiDocsUrl?: string;
     modelMetadataUrl?: string;
     modelMetadata?: ProviderModelMetadata[];
@@ -254,6 +266,38 @@ function readPositiveIntegerInput(value: string): number | null {
   return parsed;
 }
 
+function stripEndpointSuffix(value: string | undefined, endpoint: string): string {
+  if (value === undefined) return "";
+  const trimmed = value.trim();
+  const normalized = trimmed.replace(/\/+$/, "");
+  return normalized.endsWith(endpoint)
+    ? normalized.slice(0, -endpoint.length).replace(/\/+$/, "")
+    : trimmed;
+}
+
+function previewEndpointUrl(baseUrl: string, endpoint: string): string | null {
+  const trimmed = baseUrl.trim();
+  return trimmed === "" ? null : buildUpstreamUrl(trimmed, endpoint);
+}
+
+function EndpointUrlPreview({
+  baseUrl,
+  endpoint,
+}: {
+  baseUrl: string;
+  endpoint: string;
+}): JSX.Element | null {
+  const finalUrl = previewEndpointUrl(baseUrl, endpoint);
+  if (finalUrl === null) return null;
+
+  return (
+    <div className="rounded-md border border-border/70 bg-muted/35 px-3 py-2 text-xs">
+      <div className="text-muted-foreground">Final URL</div>
+      <div className="break-all font-mono text-foreground">{finalUrl}</div>
+    </div>
+  );
+}
+
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
   const [name, setName] = useState(provider?.name ?? "");
   const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
@@ -270,8 +314,15 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     ),
   );
   const [activeTab, setActiveTab] = useState<"anthropic" | "openai">("anthropic");
-  const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(provider?.anthropicBaseUrl ?? "");
-  const [openaiBaseUrl, setOpenaiBaseUrl] = useState(provider?.openaiBaseUrl ?? "");
+  const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(
+    stripEndpointSuffix(provider?.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT),
+  );
+  const [openaiBaseUrl, setOpenaiBaseUrl] = useState(
+    stripEndpointSuffix(provider?.openaiBaseUrl, OPENAI_CHAT_COMPLETIONS_ENDPOINT),
+  );
+  const [openaiResponsesBaseUrl, setOpenaiResponsesBaseUrl] = useState(
+    stripEndpointSuffix(provider?.openaiResponsesBaseUrl, OPENAI_RESPONSES_ENDPOINT),
+  );
   const [apiDocsUrl, setApiDocsUrl] = useState(provider?.apiDocsUrl ?? "");
   const [modelMetadataUrl, setModelMetadataUrl] = useState(provider?.modelMetadataUrl ?? "");
   const [source, setSource] = useState<"company" | "personal" | undefined>(provider?.source);
@@ -298,6 +349,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   // Track if URL fields have been manually edited (to avoid overriding user edits)
   const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = useState(false);
   const [manualOpenaiUrlOverride, setManualOpenaiUrlOverride] = useState(false);
+  const [manualOpenaiResponsesUrlOverride, setManualOpenaiResponsesUrlOverride] = useState(false);
 
   // Check if MiniMax is detected
   const isMiniMax = name.toLowerCase().includes("minimax");
@@ -331,13 +383,21 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       const nextModels = (provider.models?.length ?? 0) > 0 ? provider.models : [""];
       setModels(nextModels);
       setModelMetadataDrafts(createMetadataDrafts(provider, nextModels));
-      setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
-      setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
+      setAnthropicBaseUrl(
+        stripEndpointSuffix(provider.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT),
+      );
+      setOpenaiBaseUrl(
+        stripEndpointSuffix(provider.openaiBaseUrl, OPENAI_CHAT_COMPLETIONS_ENDPOINT),
+      );
+      setOpenaiResponsesBaseUrl(
+        stripEndpointSuffix(provider.openaiResponsesBaseUrl, OPENAI_RESPONSES_ENDPOINT),
+      );
       setApiDocsUrl(provider.apiDocsUrl ?? "");
       setModelMetadataUrl(provider.modelMetadataUrl ?? "");
       setSource(provider.source);
       setManualAnthropicUrlOverride(false);
       setManualOpenaiUrlOverride(false);
+      setManualOpenaiResponsesUrlOverride(false);
     }
   }, [provider]);
 
@@ -352,6 +412,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         if (preset.openaiBaseUrl !== undefined && !manualOpenaiUrlOverride) {
           setOpenaiBaseUrl(preset.openaiBaseUrl);
         }
+        if (preset.openaiResponsesBaseUrl !== undefined && !manualOpenaiResponsesUrlOverride) {
+          setOpenaiResponsesBaseUrl(preset.openaiResponsesBaseUrl);
+        }
         if (preset.apiDocsUrl !== undefined && !apiDocsUrl) {
           setApiDocsUrl(preset.apiDocsUrl);
         }
@@ -394,6 +457,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
       newErrors.openaiBaseUrl = "Invalid URL format";
     }
+    if (openaiResponsesBaseUrl.trim() && !isValidUrl(openaiResponsesBaseUrl.trim())) {
+      newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+    }
     if (modelMetadataUrl.trim() && !isValidUrl(modelMetadataUrl.trim())) {
       newErrors.modelMetadataUrl = "Invalid URL format";
     }
@@ -412,7 +478,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           "Output limit should not exceed context window";
       }
     });
-    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim()) {
+    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim() && !openaiResponsesBaseUrl.trim()) {
       newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
     }
     setErrors(newErrors);
@@ -546,6 +612,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         models: models.map((m) => m.trim()).filter((m) => m !== ""),
         anthropicBaseUrl: anthropicBaseUrl.trim() || undefined,
         openaiBaseUrl: openaiBaseUrl.trim() || undefined,
+        openaiResponsesBaseUrl: openaiResponsesBaseUrl.trim() || undefined,
         apiDocsUrl: apiDocsUrl.trim() || undefined,
         modelMetadataUrl: modelMetadataUrl.trim() || undefined,
         modelMetadata: buildModelMetadata(),
@@ -878,50 +945,99 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
             Anthropic Base URL
           </label>
-          <input
-            id="provider-anthropic-base-url"
-            type="text"
-            value={anthropicBaseUrl}
-            onChange={(e) => {
-              setManualAnthropicUrlOverride(true);
-              setAnthropicBaseUrl(e.target.value);
-            }}
-            placeholder="https://api.anthropic.com"
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-          />
+          <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+            <input
+              id="provider-anthropic-base-url"
+              type="text"
+              value={anthropicBaseUrl}
+              onChange={(e) => {
+                setManualAnthropicUrlOverride(true);
+                setAnthropicBaseUrl(e.target.value);
+              }}
+              placeholder="https://api.anthropic.com"
+              className="min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+              {ANTHROPIC_MESSAGES_ENDPOINT}
+            </span>
+          </div>
           {errors.anthropicBaseUrl !== undefined && (
             <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
           )}
+          <EndpointUrlPreview baseUrl={anthropicBaseUrl} endpoint={ANTHROPIC_MESSAGES_ENDPOINT} />
           <p className="text-xs text-muted-foreground">
-            Anthropic-compatible endpoint URL. Leave empty if this provider does not support
-            Anthropic format.
+            Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic
+            format.
           </p>
         </div>
       )}
 
       {activeTab === "openai" && (
-        <div className="space-y-2">
-          <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
-            OpenAI Base URL
-          </label>
-          <input
-            id="provider-openai-base-url"
-            type="text"
-            value={openaiBaseUrl}
-            onChange={(e) => {
-              setManualOpenaiUrlOverride(true);
-              setOpenaiBaseUrl(e.target.value);
-            }}
-            placeholder="https://api.openai.com/v1"
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-          />
-          {errors.openaiBaseUrl !== undefined && (
-            <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
-          )}
-          <p className="text-xs text-muted-foreground">
-            OpenAI-compatible endpoint URL. Leave empty if this provider does not support OpenAI
-            format.
-          </p>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
+              OpenAI Chat Base URL
+            </label>
+            <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+              <input
+                id="provider-openai-base-url"
+                type="text"
+                value={openaiBaseUrl}
+                onChange={(e) => {
+                  setManualOpenaiUrlOverride(true);
+                  setOpenaiBaseUrl(e.target.value);
+                }}
+                placeholder="https://api.openai.com"
+                className="min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+                {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+              </span>
+            </div>
+            {errors.openaiBaseUrl !== undefined && (
+              <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
+            )}
+            <EndpointUrlPreview
+              baseUrl={openaiBaseUrl}
+              endpoint={OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+            />
+            <p className="text-xs text-muted-foreground">
+              OpenAI Chat Completions-compatible base URL. Leave empty if this provider only
+              supports the Responses API.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="provider-openai-responses-base-url" className="text-sm font-medium">
+              OpenAI Responses Base URL
+            </label>
+            <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+              <input
+                id="provider-openai-responses-base-url"
+                type="text"
+                value={openaiResponsesBaseUrl}
+                onChange={(e) => {
+                  setManualOpenaiResponsesUrlOverride(true);
+                  setOpenaiResponsesBaseUrl(e.target.value);
+                }}
+                placeholder="https://api.openai.com"
+                className="min-w-0 flex-1 bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+                {OPENAI_RESPONSES_ENDPOINT}
+              </span>
+            </div>
+            {errors.openaiResponsesBaseUrl !== undefined && (
+              <p className="text-xs text-destructive">{errors.openaiResponsesBaseUrl}</p>
+            )}
+            <EndpointUrlPreview
+              baseUrl={openaiResponsesBaseUrl}
+              endpoint={OPENAI_RESPONSES_ENDPOINT}
+            />
+            <p className="text-xs text-muted-foreground">
+              Optional Responses-compatible base URL. Set only when the provider supports the
+              Responses API.
+            </p>
+          </div>
         </div>
       )}
 

package/src/components/providers/ProvidersPanel.tsx

@@ -51,6 +51,7 @@ type ProviderFormData = {
   models: string[];
   anthropicBaseUrl?: string;
   openaiBaseUrl?: string;
+  openaiResponsesBaseUrl?: string;
   apiDocsUrl?: string;
   modelMetadataUrl?: string;
   modelMetadata?: ProviderModelMetadata[];
@@ -64,6 +65,8 @@ function createProviderPayload(data: ProviderFormData) {
     models: data.models,
     anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : undefined,
     openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : undefined,
+    openaiResponsesBaseUrl:
+      (data.openaiResponsesBaseUrl?.length ?? 0) > 0 ? data.openaiResponsesBaseUrl : undefined,
     apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : undefined,
     modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : undefined,
     modelMetadata: data.modelMetadata,
@@ -407,7 +410,8 @@ export function ProvidersPanel({
           (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") ||
           JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) ||
           (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") ||
-          (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "");
+          (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "") ||
+          (data.openaiResponsesBaseUrl ?? "") !== (editingProvider.openaiResponsesBaseUrl ?? "");
         if (criticalFieldsChanged) {
           await runTest(updated.id);
         }

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

@@ -146,11 +146,29 @@ function firstToolLog(logs: CapturedLog[]): CapturedLog | null {
   return null;
 }
 
+function buildDisplayNumberByLogId(logs: readonly CapturedLog[]): Map<number, number> {
+  const result = new Map<number, number>();
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === undefined) continue;
+    result.set(log.id, index + 1);
+  }
+  return result;
+}
+
+function displayLogNumber(
+  logId: number,
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): string {
+  return String(displayNumberByLogId.get(logId) ?? logId);
+}
+
 function buildTraceInsights(input: {
   logs: CapturedLog[];
   scopeId: string;
   summary: TraceSummary;
   candidates: KnowledgeCandidate[];
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): TraceInsight[] {
   const insights: TraceInsight[] = [
     {
@@ -170,7 +188,7 @@ function buildTraceInsights(input: {
       title: `${String(input.summary.toolCallCount)} tool call${
         input.summary.toolCallCount === 1 ? "" : "s"
       }`,
-      detail: `First tool evidence at #${String(toolLog.id)}`,
+      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
       logId: toolLog.id,
     });
   }
@@ -180,7 +198,7 @@ function buildTraceInsights(input: {
     insights.push({
       kind: "failure",
       title: `Failure #${String(failure.responseStatus)}`,
-      detail: `First failed request is #${String(failure.id)}`,
+      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
       logId: failure.id,
     });
   }
@@ -190,7 +208,7 @@ function buildTraceInsights(input: {
     insights.push({
       kind: "slow",
       title: `Slowest ${formatElapsed(input.summary.maxElapsedMs)}`,
-      detail: `Max latency observed at #${String(slowest.id)}`,
+      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
       logId: slowest.id,
     });
   }
@@ -291,12 +309,16 @@ function previewText(value: string, maxLength: number): string {
   return `${normalized.slice(0, maxLength - 3)}...`;
 }
 
-function logRangeLabel(logIds: number[]): string {
+function logRangeLabel(
+  logIds: number[],
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): string {
   const first = logIds[0];
   const last = logIds[logIds.length - 1];
   if (first === undefined) return "No evidence logs";
-  if (last === undefined || first === last) return `#${String(first)}`;
-  return `#${String(first)}-#${String(last)}`;
+  const firstLabel = displayLogNumber(first, displayNumberByLogId);
+  if (last === undefined || first === last) return `#${firstLabel}`;
+  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
 }
 
 function tagsToText(tags: string[]): string {
@@ -316,12 +338,14 @@ function CandidateItem({
   isUpdating,
   onPromoteCandidate,
   onUpdateCandidate,
+  displayNumberByLogId,
 }: {
   candidate: KnowledgeCandidate;
   isPromoting: boolean;
   isUpdating: boolean;
   onPromoteCandidate: (candidateId: string) => void;
   onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): JSX.Element {
   const [editing, setEditing] = useState(false);
   const [draftType, setDraftType] = useState<KnowledgeCandidate["type"]>(candidate.type);
@@ -484,7 +508,7 @@ function CandidateItem({
       <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
         <span className="inline-flex items-center gap-1">
           <FileSearch className="size-3" />
-          {logRangeLabel(candidate.logIds)}
+          {logRangeLabel(candidate.logIds, displayNumberByLogId)}
         </span>
         <span className="inline-flex items-center gap-1">
           <ShieldCheck className="size-3" />
@@ -504,20 +528,24 @@ function CandidateItem({
         )}
       </div>
       <div className="mt-1 flex flex-wrap items-center gap-1.5">
-        {candidate.logIds.map((logId) => (
-          <a
-            key={logId}
-            href={`#${getLogAnchor(logId)}`}
-            onClick={(event) => {
-              event.preventDefault();
-              jumpToLog(logId);
-            }}
-            className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label={`Jump to evidence log ${String(logId)}`}
-          >
-            #{logId}
-          </a>
-        ))}
+        {candidate.logIds.map((logId) => {
+          const displayNumber = displayLogNumber(logId, displayNumberByLogId);
+          return (
+            <a
+              key={logId}
+              href={`#${getLogAnchor(logId)}`}
+              onClick={(event) => {
+                event.preventDefault();
+                jumpToLog(logId);
+              }}
+              className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`Jump to evidence log ${displayNumber}`}
+              title={`Log ID ${String(logId)}`}
+            >
+              #{displayNumber}
+            </a>
+          );
+        })}
         <span className="flex-1" />
         {canEdit && (
           <Button
@@ -560,12 +588,14 @@ function CandidateList({
   updatingCandidateIds,
   onPromoteCandidate,
   onUpdateCandidate,
+  displayNumberByLogId,
 }: {
   candidates: KnowledgeCandidate[];
   promotingCandidateIds: ReadonlySet<string>;
   updatingCandidateIds: ReadonlySet<string>;
   onPromoteCandidate: (candidateId: string) => void;
   onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): JSX.Element | null {
   if (candidates.length === 0) return null;
   return (
@@ -578,6 +608,7 @@ function CandidateList({
           isUpdating={updatingCandidateIds.has(candidate.id)}
           onPromoteCandidate={onPromoteCandidate}
           onUpdateCandidate={onUpdateCandidate}
+          displayNumberByLogId={displayNumberByLogId}
         />
       ))}
     </div>
@@ -608,9 +639,10 @@ export function AgentTraceSummary({
     () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
     [candidates.length, logs, slowResponseThresholdSeconds],
   );
+  const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(logs), [logs]);
   const traceInsights = useMemo(
-    () => buildTraceInsights({ logs, scopeId, summary, candidates }),
-    [candidates, logs, scopeId, summary],
+    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
+    [candidates, displayNumberByLogId, logs, scopeId, summary],
   );
   const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
   const timeRange = useMemo(
@@ -870,6 +902,7 @@ export function AgentTraceSummary({
           updatingCandidateIds={updatingCandidateIds}
           onPromoteCandidate={promoteCandidate}
           onUpdateCandidate={updateCandidate}
+          displayNumberByLogId={displayNumberByLogId}
         />
       )}
     </section>

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

@@ -1,5 +1,6 @@
-import type { JSX } from "react";
-import ReactMarkdown from "react-markdown";
+import { lazy, Suspense, type JSX } from "react";
+
+const LazyReactMarkdown = lazy(() => import("react-markdown"));
 
 const ANSWER_MARKDOWN_CLASS =
   "prose prose-sm dark:prose-invert max-w-none text-[13px] leading-[1.65] " +
@@ -10,7 +11,11 @@ const ANSWER_MARKDOWN_CLASS =
 export function AnswerMarkdown({ text }: { text: string }): JSX.Element {
   return (
     <div className={ANSWER_MARKDOWN_CLASS}>
-      <ReactMarkdown>{text}</ReactMarkdown>
+      <Suspense
+        fallback={<span className="text-xs text-muted-foreground">Loading Markdown...</span>}
+      >
+        <LazyReactMarkdown>{text}</LazyReactMarkdown>
+      </Suspense>
     </div>
   );
 }