@tonyclaw/agent-inspector 2.0.10 → 2.0.12

package/src/components/providers/ProviderForm.tsx

@@ -2,7 +2,7 @@ import { type JSX, useState, useEffect, useRef } from "react";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
-import type { ProviderConfig } from "../../proxy/providers";
+import type { ProviderConfig, ProviderModelMetadata } from "../../lib/providerContract";
 import { maskApiKey } from "../../lib/mask";
 
 // Known provider presets - maps provider name keywords to their API URLs
@@ -38,7 +38,7 @@ const MINIMAX_MODELS = [
 ];
 
 // Alibaba model options
-const ALIBABA_MODELS = ["glm-5", "glm-5.1", "qwen3.6-plus", "qwen3.7-max"];
+const ALIBABA_MODELS = ["glm-5", "glm-5.1", "glm-5.2", "qwen3.6-plus", "qwen3.7-max"];
 
 type ProviderFormProps = {
   provider?: ProviderConfig;
@@ -50,11 +50,58 @@ type ProviderFormProps = {
     openaiBaseUrl?: string;
     apiDocsUrl?: string;
     modelMetadataUrl?: string;
+    modelMetadata?: ProviderModelMetadata[];
     source?: "company" | "personal";
   }) => void;
   onCancel: () => void;
 };
 
+type ModelMetadataDraft = {
+  contextWindow: string;
+  outputLimit: string;
+};
+
+function emptyMetadataDraft(): ModelMetadataDraft {
+  return { contextWindow: "", outputLimit: "" };
+}
+
+function normalizeModelName(value: string): string {
+  return value.trim().toLowerCase().replace(/\s+/g, "-");
+}
+
+function findModelMetadata(
+  provider: ProviderConfig | undefined,
+  model: string,
+): ProviderModelMetadata | null {
+  const normalized = normalizeModelName(model);
+  return (
+    provider?.modelMetadata?.find(
+      (metadata) => normalizeModelName(metadata.model) === normalized,
+    ) ?? null
+  );
+}
+
+function createMetadataDrafts(
+  provider: ProviderConfig | undefined,
+  models: readonly string[],
+): ModelMetadataDraft[] {
+  return models.map((model) => {
+    const metadata = findModelMetadata(provider, model);
+    return {
+      contextWindow: metadata?.contextWindow?.toString() ?? "",
+      outputLimit: metadata?.outputLimit?.toString() ?? "",
+    };
+  });
+}
+
+function readPositiveIntegerInput(value: string): number | null {
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  const parsed = Number(trimmed);
+  if (!Number.isInteger(parsed) || parsed <= 0) return null;
+  return parsed;
+}
+
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
   const [name, setName] = useState(provider?.name ?? "");
   const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
@@ -64,6 +111,12 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   const [models, setModels] = useState<string[]>(
     initialModels !== undefined && initialModels.length > 0 ? initialModels : [""],
   );
+  const [modelMetadataDrafts, setModelMetadataDrafts] = useState<ModelMetadataDraft[]>(() =>
+    createMetadataDrafts(
+      provider,
+      initialModels !== undefined && initialModels.length > 0 ? initialModels : [""],
+    ),
+  );
   const [activeTab, setActiveTab] = useState<"anthropic" | "openai">("anthropic");
   const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(provider?.anthropicBaseUrl ?? "");
   const [openaiBaseUrl, setOpenaiBaseUrl] = useState(provider?.openaiBaseUrl ?? "");
@@ -111,7 +164,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (provider) {
       setName(provider.name);
       setApiKey(provider.apiKey);
-      setModels((provider.models?.length ?? 0) > 0 ? provider.models : [""]);
+      const nextModels = (provider.models?.length ?? 0) > 0 ? provider.models : [""];
+      setModels(nextModels);
+      setModelMetadataDrafts(createMetadataDrafts(provider, nextModels));
       setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
       setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
       setApiDocsUrl(provider.apiDocsUrl ?? "");
@@ -168,6 +223,21 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (modelMetadataUrl.trim() && !isValidUrl(modelMetadataUrl.trim())) {
       newErrors.modelMetadataUrl = "Invalid URL format";
     }
+    modelMetadataDrafts.forEach((draft, index) => {
+      const contextWindow = readPositiveIntegerInput(draft.contextWindow);
+      const outputLimit = readPositiveIntegerInput(draft.outputLimit);
+      if (draft.contextWindow.trim() !== "" && contextWindow === null) {
+        newErrors[`modelMetadata.${index}.contextWindow`] =
+          "Context window must be a positive integer";
+      }
+      if (draft.outputLimit.trim() !== "" && outputLimit === null) {
+        newErrors[`modelMetadata.${index}.outputLimit`] = "Output limit must be a positive integer";
+      }
+      if (contextWindow !== null && outputLimit !== null && outputLimit > contextWindow) {
+        newErrors[`modelMetadata.${index}.outputLimit`] =
+          "Output limit should not exceed context window";
+      }
+    });
     if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim()) {
       newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
     }
@@ -184,6 +254,68 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     }
   }
 
+  function updateModel(index: number, value: string): void {
+    setModels((prev) => {
+      const next = [...prev];
+      next[index] = value;
+      return next;
+    });
+  }
+
+  function updateMetadataDraft(index: number, patch: Partial<ModelMetadataDraft>): void {
+    setModelMetadataDrafts((prev) => {
+      const next = [...prev];
+      next[index] = { ...(next[index] ?? emptyMetadataDraft()), ...patch };
+      return next;
+    });
+  }
+
+  function removeModel(index: number): void {
+    setModels((prev) => prev.filter((_, idx) => idx !== index));
+    setModelMetadataDrafts((prev) => prev.filter((_, idx) => idx !== index));
+  }
+
+  function addModel(): void {
+    setModels((prev) => [...prev, ""]);
+    setModelMetadataDrafts((prev) => [...prev, emptyMetadataDraft()]);
+  }
+
+  function buildModelMetadata(): ProviderModelMetadata[] | undefined {
+    const now = new Date().toISOString();
+    const metadata: ProviderModelMetadata[] = [];
+
+    models.forEach((model, index) => {
+      const trimmedModel = model.trim();
+      if (trimmedModel === "") return;
+      const draft = modelMetadataDrafts[index] ?? emptyMetadataDraft();
+      const contextWindow = readPositiveIntegerInput(draft.contextWindow);
+      const outputLimit = readPositiveIntegerInput(draft.outputLimit);
+      if (contextWindow === null && outputLimit === null) return;
+
+      const existing = findModelMetadata(provider, trimmedModel);
+      if (
+        existing !== null &&
+        existing.contextWindow === (contextWindow ?? undefined) &&
+        existing.outputLimit === (outputLimit ?? undefined)
+      ) {
+        metadata.push({ ...existing, model: trimmedModel });
+        return;
+      }
+
+      const entry: ProviderModelMetadata = {
+        model: trimmedModel,
+        source: "manual",
+        updatedAt: now,
+      };
+      if (contextWindow !== null) entry.contextWindow = contextWindow;
+      if (outputLimit !== null) entry.outputLimit = outputLimit;
+      metadata.push(entry);
+    });
+
+    if (metadata.length > 0) return metadata;
+    return provider?.modelMetadata !== undefined ? [] : undefined;
+  }
+
   function handleSubmit(e: React.FormEvent): void {
     e.preventDefault();
     if (!validate()) return;
@@ -197,6 +329,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         openaiBaseUrl: openaiBaseUrl.trim() || undefined,
         apiDocsUrl: apiDocsUrl.trim() || undefined,
         modelMetadataUrl: modelMetadataUrl.trim() || undefined,
+        modelMetadata: buildModelMetadata(),
         source,
       });
     } finally {
@@ -320,91 +453,123 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         <label className="text-sm font-medium">
           Models <span className="text-destructive">*</span>
         </label>
-        {models.map((m, i) => (
-          <div
-            key={i}
-            ref={(el) => {
-              modelRowRefs.current[i] = el;
-            }}
-            className="flex items-center gap-2"
-          >
-            <div className="relative flex-1">
-              <input
-                type="text"
-                value={m}
-                onChange={(e) => {
-                  setModels((prev) => {
-                    const next = [...prev];
-                    next[i] = e.target.value;
-                    return next;
-                  });
-                }}
-                placeholder={isMiniMax || isAlibaba ? "Type or select a model..." : "Model name"}
-                className="w-full rounded-md border border-input bg-background px-4 py-3 pr-8 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"
-              />
-              {(isMiniMax || isAlibaba) && (
-                <>
+        {models.map((m, i) => {
+          const draft = modelMetadataDrafts[i] ?? emptyMetadataDraft();
+          const contextWindowError = errors[`modelMetadata.${i}.contextWindow`];
+          const outputLimitError = errors[`modelMetadata.${i}.outputLimit`];
+          return (
+            <div
+              key={i}
+              ref={(el) => {
+                modelRowRefs.current[i] = el;
+              }}
+              className="space-y-2 rounded-md border border-border bg-muted/10 p-2"
+            >
+              <div className="flex items-center gap-2">
+                <div className="relative flex-1">
+                  <input
+                    type="text"
+                    value={m}
+                    onChange={(e) => updateModel(i, e.target.value)}
+                    placeholder={
+                      isMiniMax || isAlibaba ? "Type or select a model..." : "Model name"
+                    }
+                    className="w-full rounded-md border border-input bg-background px-4 py-3 pr-8 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"
+                  />
+                  {(isMiniMax || isAlibaba) && (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => setOpenModelDropdown(openModelDropdown === i ? null : i)}
+                        className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors p-1 z-10"
+                        aria-label="Show model suggestions"
+                      >
+                        <ChevronDown className="size-4" />
+                      </button>
+                      {openModelDropdown === i && (
+                        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-popover border border-border rounded-md shadow-md max-h-48 overflow-y-auto">
+                          {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((opt) => (
+                            <button
+                              key={opt}
+                              type="button"
+                              onClick={() => {
+                                updateModel(i, opt);
+                                setOpenModelDropdown(null);
+                              }}
+                              className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                            >
+                              {opt}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+                {models.length > 1 && (
                   <button
                     type="button"
-                    onClick={() => setOpenModelDropdown(openModelDropdown === i ? null : i)}
-                    className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors p-1 z-10"
-                    aria-label="Show model suggestions"
+                    onClick={() => removeModel(i)}
+                    className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0"
+                    aria-label="Remove model"
                   >
-                    <ChevronDown className="size-4" />
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M3 6h18" />
+                      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                    </svg>
                   </button>
-                  {openModelDropdown === i && (
-                    <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-popover border border-border rounded-md shadow-md max-h-48 overflow-y-auto">
-                      {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((opt) => (
-                        <button
-                          key={opt}
-                          type="button"
-                          onClick={() => {
-                            setModels((prev) => {
-                              const next = [...prev];
-                              next[i] = opt;
-                              return next;
-                            });
-                            setOpenModelDropdown(null);
-                          }}
-                          className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
-                        >
-                          {opt}
-                        </button>
-                      ))}
-                    </div>
+                )}
+              </div>
+
+              <div className="grid gap-2 sm:grid-cols-2">
+                <label className="space-y-1 text-xs text-muted-foreground">
+                  <span>Context Window</span>
+                  <input
+                    type="number"
+                    min={1}
+                    step={1000}
+                    value={draft.contextWindow}
+                    onChange={(e) => updateMetadataDraft(i, { contextWindow: e.target.value })}
+                    placeholder="e.g. 1048576"
+                    className="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px]"
+                  />
+                  {contextWindowError !== undefined && (
+                    <span className="block text-destructive">{contextWindowError}</span>
+                  )}
+                </label>
+                <label className="space-y-1 text-xs text-muted-foreground">
+                  <span>Output Limit</span>
+                  <input
+                    type="number"
+                    min={1}
+                    step={1000}
+                    value={draft.outputLimit}
+                    onChange={(e) => updateMetadataDraft(i, { outputLimit: e.target.value })}
+                    placeholder="e.g. 8192"
+                    className="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-xs text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px]"
+                  />
+                  {outputLimitError !== undefined && (
+                    <span className="block text-destructive">{outputLimitError}</span>
                   )}
-                </>
-              )}
+                </label>
+              </div>
             </div>
-            {models.length > 1 && (
-              <button
-                type="button"
-                onClick={() => setModels((prev) => prev.filter((_, idx) => idx !== i))}
-                className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0"
-                aria-label="Remove model"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M3 6h18" />
-                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-                </svg>
-              </button>
-            )}
-          </div>
-        ))}
+          );
+        })}
         <button
           type="button"
-          onClick={() => setModels((prev) => [...prev, ""])}
+          onClick={addModel}
           className="text-xs text-primary hover:underline flex items-center gap-1"
         >
           + Add Model

package/src/components/providers/ProvidersPanel.tsx

@@ -8,7 +8,11 @@ import { ConfirmDialog } from "../ui/confirm-dialog";
 import { ProviderCard } from "./ProviderCard";
 import { ProviderForm } from "./ProviderForm";
 import { parseJsonResponse, readApiError } from "../../lib/apiClient";
-import { ProviderConfigSchema, type ProviderConfig } from "../../lib/providerContract";
+import {
+  ProviderConfigSchema,
+  type ProviderConfig,
+  type ProviderModelMetadata,
+} from "../../lib/providerContract";
 import {
   createFailedProviderTestResults,
   createPendingProviderTestResults,
@@ -48,6 +52,7 @@ type ProviderFormData = {
   openaiBaseUrl?: string;
   apiDocsUrl?: string;
   modelMetadataUrl?: string;
+  modelMetadata?: ProviderModelMetadata[];
   source?: "company" | "personal";
 };
 
@@ -60,6 +65,7 @@ function createProviderPayload(data: ProviderFormData) {
     openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : undefined,
     apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : undefined,
     modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : undefined,
+    modelMetadata: data.modelMetadata,
     source: data.source,
   };
 }

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

@@ -1,4 +1,4 @@
-import { useState, memo, useMemo } from "react";
+import { useState, memo, useEffect, useMemo } from "react";
 import type { JSX } from "react";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import type { CapturedLog } from "../../proxy/schemas";
@@ -11,6 +11,7 @@ import {
 import { TurnGroup } from "./TurnGroup";
 import { AgentTraceSummary } from "./AgentTraceSummary";
 import type { CacheTrendEntry } from "./cacheTrend";
+import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
 import { buildTurnGroups, shouldRenderConversationContent } from "./viewerState";
 
 export type ConversationGroupProps = {
@@ -74,6 +75,22 @@ export const ConversationGroup = memo(function ({
 
   // Pre-compute stop reasons for each log — used by turnIndices
   const turnGroups = useMemo(() => buildTurnGroups(group.logs), [group.logs]);
+
+  useEffect(() => {
+    const handleLogFocusRequest = (event: Event): void => {
+      if (standalone) return;
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (!group.logs.some((log) => log.id === request.logId)) return;
+      setExpanded(true);
+    };
+
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [group.logs, standalone]);
+
   return (
     <div className="mb-2">
       {!standalone && (

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

@@ -25,6 +25,7 @@ import { LogEntryHeader } from "./LogEntryHeader";
 import { RequestTools } from "./RequestToolsPanel";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
+import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest, type LogFocusTab } from "./logFocus";
 import {
   shouldShowHeadersDiffButton,
   shouldShowRawRequestTab,
@@ -40,6 +41,15 @@ function TabFallback(): JSX.Element {
   return <div className="h-1" aria-hidden="true" />;
 }
 
+function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] | null): string {
+  switch (tab) {
+    case "anatomy":
+      return anatomySegments === null ? "request" : "anatomy";
+    case "request":
+      return "request";
+  }
+}
+
 export type LogEntryProps = {
   log: CapturedLog;
   viewMode?: "simple" | "full";
@@ -302,6 +312,21 @@ export const LogEntry = memo(function ({
     setActiveTab(anatomySegments !== null ? "anatomy" : "request");
   }, [anatomySegments, expanded]);
 
+  useEffect(() => {
+    const handleLogFocusRequest = (event: Event): void => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (request.logId !== log.id) return;
+      setExpanded(true);
+      setActiveTab(resolveFocusedTab(request.tab, anatomySegments));
+    };
+
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [anatomySegments, log.id]);
+
   return (
     <TooltipProvider>
       <div className="border border-border rounded-lg mb-1 overflow-hidden">

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

@@ -9,6 +9,7 @@ import { ProviderLogo, detectProvider, type Provider } from "../providers/Provid
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
+import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
 import { ThreadConnector } from "./ThreadConnector";
 import { ToolTraceEvents } from "./ToolTraceEvents";
 import { extractToolTraceEvents, isTurnCollapsible, type TurnEntry } from "./viewerState";
@@ -60,6 +61,20 @@ export const TurnGroup = memo(function TurnGroup({
     prevCompleteRef.current = isComplete;
   }, [collapsible, isComplete]);
 
+  useEffect(() => {
+    const handleLogFocusRequest = (event: Event): void => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (!entries.some((entry) => entry.log.id === request.logId)) return;
+      if (collapsible) setCollapsed(false);
+    };
+
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [collapsible, entries]);
+
   const toggleCollapse = useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
   }, [collapsible]);