@tonyclaw/agent-inspector 2.1.15 → 2.1.17

package/src/components/ProxyViewerContainer.tsx

@@ -12,6 +12,7 @@ import {
   type SessionMembershipEvidence,
 } from "./ProxyViewer";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
+import { TransientToast, useTransientToast } from "./ui/transient-toast";
 
 type SSEUpdate =
   | {
@@ -185,7 +186,7 @@ export function ProxyViewerContainer({
   const [allLogs, setAllLogs] = useState<CapturedLog[]>([]);
   const [selectedSession, setSelectedSession] = useState(initialSessionId ?? "__all__");
   const [selectedModel, setSelectedModel] = useState("__all__");
-  const [error, setError] = useState<string | null>(null);
+  const { notice, showToast, dismissToast } = useTransientToast();
   const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
   const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
   const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
@@ -202,6 +203,12 @@ export function ProxyViewerContainer({
   // Debounce buffer for SSE updates
   const pendingUpdatesRef = useRef<CapturedLog[]>([]);
   const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showErrorToast = useCallback(
+    (message: string) => {
+      showToast({ message, tone: "error" });
+    },
+    [showToast],
+  );
 
   // Derived view: the logs the user actually sees. Recomputed only when the
   // underlying set or filter changes — never on every SSE message.
@@ -269,7 +276,7 @@ export function ProxyViewerContainer({
         const parsed: unknown = JSON.parse(rawData);
         const updateResult = SSEUpdateSchema.safeParse(parsed);
         if (!updateResult.success) {
-          setError("Failed to parse SSE data");
+          showErrorToast("Failed to parse SSE data");
           return;
         }
         const update = updateResult.data;
@@ -285,17 +292,17 @@ export function ProxyViewerContainer({
           logIndexRef.current = buildLogIndex(nextLogs);
           setAllLogs(nextLogs);
           setStreamInitialized(true);
-          setError(null);
+          dismissToast();
         } else if (update.type === "update") {
           scheduleUpdate(update.log);
         }
       } catch {
-        setError("Failed to parse SSE data");
+        showErrorToast("Failed to parse SSE data");
       }
     };
 
     es.onerror = () => {
-      setError("SSE connection lost, reconnecting...");
+      showErrorToast("SSE connection lost, reconnecting...");
       setStreamInitialized(true);
       es.close();
       if (reconnectTimeoutRef.current !== null) {
@@ -303,7 +310,7 @@ export function ProxyViewerContainer({
       }
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3000);
     };
-  }, [initialSessionId, scheduleUpdate]);
+  }, [dismissToast, initialSessionId, scheduleUpdate, showErrorToast]);
 
   const loadSessionPage = useCallback(
     (request: SessionPageRequest) => {
@@ -312,7 +319,7 @@ export function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
-      setError(null);
+      dismissToast();
 
       void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema)
         .then((page) => {
@@ -323,17 +330,17 @@ export function ProxyViewerContainer({
           setLogPage(page);
           setSelectedSession(initialSessionId);
           setSessionPageLoading(false);
-          setError(null);
+          dismissToast();
         })
         .catch((err: unknown) => {
           if (sessionPageRequestIdRef.current !== requestId) return;
           setAllLogs([]);
           setLogPage(null);
           setSessionPageLoading(false);
-          setError(err instanceof Error ? err.message : "Failed to load session logs");
+          showErrorToast(err instanceof Error ? err.message : "Failed to load session logs");
         });
     },
-    [initialSessionId],
+    [dismissToast, initialSessionId, showErrorToast],
   );
 
   useEffect(() => {
@@ -458,67 +465,73 @@ export function ProxyViewerContainer({
               }),
         });
         if (!res.ok) {
-          setError("Failed to clear logs");
+          showErrorToast("Failed to clear logs");
           return;
         }
         logIndexRef.current.clear();
         setAllLogs([]);
-        setError(null);
+        dismissToast();
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Unknown error clearing logs");
+        showErrorToast(err instanceof Error ? err.message : "Unknown error clearing logs");
       }
     })();
-  }, [allLogs, initialSessionId]);
-
-  const handleClearGroup = useCallback((ids: number[]) => {
-    if (ids.length === 0) return;
-    void (async () => {
-      try {
-        const res = await fetch("/api/logs", {
-          method: "DELETE",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ ids }),
-        });
-        if (!res.ok) {
-          setError("Failed to clear group");
-          return;
+  }, [allLogs, dismissToast, initialSessionId, showErrorToast]);
+
+  const handleClearGroup = useCallback(
+    (ids: number[]) => {
+      if (ids.length === 0) return;
+      void (async () => {
+        try {
+          const res = await fetch("/api/logs", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ ids }),
+          });
+          if (!res.ok) {
+            showErrorToast("Failed to clear group");
+            return;
+          }
+          const idSet = new Set(ids);
+          setAllLogs((prev) => {
+            const remaining = prev.filter((l) => !idSet.has(l.id));
+            logIndexRef.current = buildLogIndex(remaining);
+            return remaining;
+          });
+          dismissToast();
+        } catch (err) {
+          showErrorToast(err instanceof Error ? err.message : "Unknown error clearing group");
         }
-        const idSet = new Set(ids);
-        setAllLogs((prev) => {
-          const remaining = prev.filter((l) => !idSet.has(l.id));
-          logIndexRef.current = buildLogIndex(remaining);
-          return remaining;
-        });
-        setError(null);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Unknown error clearing group");
-      }
-    })();
-  }, []);
-
-  const handleImportLogs = useCallback(async (file: File): Promise<ImportLogsResponse> => {
-    const formData = new FormData();
-    formData.set("file", file);
-    const result = await fetchJson("/api/logs/import", ImportLogsResponseSchema, {
-      method: "POST",
-      body: formData,
-    });
+      })();
+    },
+    [dismissToast, showErrorToast],
+  );
 
-    setAllLogs((prev) => {
-      const importedIds = new Set(result.logs.map((log) => log.id));
-      const next = [...prev.filter((log) => !importedIds.has(log.id)), ...result.logs].sort(
-        (left, right) => left.id - right.id,
-      );
-      const trimmed = trimClientLogs(next);
-      logIndexRef.current = buildLogIndex(trimmed);
-      return trimmed;
-    });
-    setSelectedSession(result.sessionId);
-    setSelectedModel("__all__");
-    setLogPage(null);
-    setError(null);
-    return result;
-  }, []);
+  const handleImportLogs = useCallback(
+    async (file: File): Promise<ImportLogsResponse> => {
+      const formData = new FormData();
+      formData.set("file", file);
+      const result = await fetchJson("/api/logs/import", ImportLogsResponseSchema, {
+        method: "POST",
+        body: formData,
+      });
+
+      setAllLogs((prev) => {
+        const importedIds = new Set(result.logs.map((log) => log.id));
+        const next = [...prev.filter((log) => !importedIds.has(log.id)), ...result.logs].sort(
+          (left, right) => left.id - right.id,
+        );
+        const trimmed = trimClientLogs(next);
+        logIndexRef.current = buildLogIndex(trimmed);
+        return trimmed;
+      });
+      setSelectedSession(result.sessionId);
+      setSelectedModel("__all__");
+      setLogPage(null);
+      dismissToast();
+      return result;
+    },
+    [dismissToast],
+  );
 
   // Read the strip config once at the container so the virtualized list does
   // not need N independent SWR subscriptions per row.
@@ -569,11 +582,7 @@ export function ProxyViewerContainer({
 
   return (
     <>
-      {error !== null && (
-        <div className="fixed top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-md text-sm z-50">
-          {error}
-        </div>
-      )}
+      <TransientToast notice={notice} onDismiss={dismissToast} />
       <OnboardingBanner />
       <ProxyViewer
         logs={logs}
@@ -585,6 +594,7 @@ export function ProxyViewerContainer({
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
         onClearGroup={handleClearGroup}
+        onNotify={showToast}
         onImportLogs={initialSessionId === undefined ? handleImportLogs : undefined}
         isLoading={initialSessionId === undefined ? !streamInitialized : sessionPageLoading}
         pagination={pagination}

package/src/components/alerts/AlertsDialog.tsx

@@ -5,6 +5,7 @@ import { type AlertListFilters, useAlerts, useAlertSummary } from "../../lib/use
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
+import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
 import {
   Dialog,
   DialogContent,
@@ -477,7 +478,7 @@ export function AlertsDialog(): JSX.Element {
           type="button"
           variant="ghost"
           size="icon"
-          className="relative size-8"
+          className={INSPECTOR_ICON_TRIGGER_CLASS}
           aria-label="Alerts"
           title="Alerts"
         >

package/src/components/clients/ClientLogo.tsx

@@ -117,7 +117,7 @@ export function ClientLogo({
   return (
     <span
       className={cn(
-        "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 p-1 text-cyan-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+        "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-1 text-cyan-100",
         className,
       )}
       aria-label={label}

package/src/components/groups/GroupsDialog.tsx

@@ -14,6 +14,7 @@ import {
 import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
 import { cn } from "../../lib/utils";
 import { parseJsonResponse, readApiError } from "../../lib/apiClient";
 import {
@@ -29,6 +30,7 @@ import {
 import type { EvidenceReport } from "../../lib/runContract";
 import type { SessionLogSummary } from "../../lib/sessionInfoContract";
 import { getSessionPath } from "../../lib/sessionUrl";
+import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
 import { useGroupEvidence } from "../../lib/useGroupEvidence";
 import { useGroups } from "../../lib/useGroups";
 import { useCopyFeedback } from "../proxy-viewer/useCopyFeedback";
@@ -195,6 +197,13 @@ function firstNonEmpty(...values: Array<string | null>): string {
   return "-";
 }
 
+function firstOptionalText(...values: Array<string | null | undefined>): string | null {
+  for (const value of values) {
+    if (value !== null && value !== undefined && value.trim().length > 0) return value;
+  }
+  return null;
+}
+
 function providerModel(member: InspectorGroupMember): string {
   const provider = member.provider;
   const model = member.model;
@@ -400,7 +409,7 @@ export function GroupsDialog(): JSX.Element {
           type="button"
           variant="ghost"
           size="icon"
-          className="relative size-8"
+          className={INSPECTOR_ICON_TRIGGER_CLASS}
           aria-label="Evaluation groups"
           title="Evaluation groups"
         >
@@ -981,6 +990,14 @@ function MemberRow({
   const tokens = session?.tokenUsage.total ?? null;
   const firstChunkMs = log?.firstChunkMs ?? null;
   const sessionLabel = firstNonEmpty(member.label, member.sessionId);
+  const clientUserAgent = firstOptionalText(session?.clientUserAgent, log?.userAgent, member.agent);
+  const clientProjectFolder = session?.clientProjectFolder ?? null;
+  const clientApp = detectClientApp({
+    userAgent: clientUserAgent,
+    conversationId: member.sessionId,
+    clientProjectFolder,
+  });
+  const clientLabel = clientAppLabel(clientApp);
 
   return (
     <tr className="border-b border-border last:border-0 hover:bg-muted/20">
@@ -1003,6 +1020,7 @@ function MemberRow({
               <ChevronRight className="size-3.5" />
             )}
           </Button>
+          {clientLabel !== null && <ClientLogo client={clientApp} className="size-5" />}
           {canOpenLiveSession ? (
             <a
               href={sessionPath}

package/src/components/providers/ProviderCard.tsx

@@ -31,7 +31,15 @@ import {
   providerHasContextMetadata,
 } from "../../lib/providerModelMetadata";
 import { formatContextWindowTokens } from "../../lib/utils";
+import {
+  PATH_V1_CHAT_COMPLETIONS,
+  PATH_V1_MESSAGES,
+  PATH_V1_RESPONSES,
+  previewUpstreamUrl,
+  type UpstreamUrlDiagnostic,
+} from "../../lib/upstreamUrl";
 import type {
+  ProviderFormatTestResults,
   ProviderTestErrorType as ErrorType,
   ProviderTestResult as TestResult,
   ProviderTestResults as TestResults,
@@ -65,8 +73,6 @@ function isNotConfiguredState(result: ProviderTestState): result is { notConfigu
   return Object.prototype.hasOwnProperty.call(result, "notConfigured");
 }
 
-type ProviderFormatTestResults = TestResults["anthropic"];
-
 function hasText(value: string | undefined): value is string {
   return value !== undefined && value.trim() !== "";
 }
@@ -206,12 +212,12 @@ function ProviderFormatTestStatus({
   results: ProviderFormatTestResults;
 }): JSX.Element {
   return (
-    <div className="flex min-w-0 flex-col gap-2">
-      <div className="flex min-w-0 flex-col gap-1">
+    <div className="grid min-w-0 gap-2 sm:grid-cols-2">
+      <div className="min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
         <span className="text-[10px] text-muted-foreground">Non-stream</span>
         <TestStatus result={results.nonStreaming} />
       </div>
-      <div className="flex min-w-0 flex-col gap-1">
+      <div className="min-w-0 rounded-md border border-border/60 bg-muted/20 px-2 py-1.5">
         <span className="text-[10px] text-muted-foreground">Stream</span>
         <TestStatus result={results.streaming} />
       </div>
@@ -219,6 +225,56 @@ function ProviderFormatTestStatus({
   );
 }
 
+function EndpointDiagnosticLine({
+  diagnostic,
+}: {
+  diagnostic: UpstreamUrlDiagnostic;
+}): JSX.Element {
+  return (
+    <div className={diagnostic.severity === "warning" ? "text-amber-200" : "text-muted-foreground"}>
+      {diagnostic.message}
+    </div>
+  );
+}
+
+function ProviderEndpointSummary({
+  label,
+  baseUrl,
+  endpoint,
+  providerName,
+  children,
+}: {
+  label: string;
+  baseUrl: string;
+  endpoint: string;
+  providerName: string;
+  children?: ReactNode;
+}): JSX.Element {
+  const preview = previewUpstreamUrl(baseUrl, endpoint, { providerName });
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2 border-t border-border/60 pt-2 first:border-t-0 first:pt-0">
+      <div className="grid min-w-0 gap-1 text-xs sm:grid-cols-[104px_minmax(0,1fr)]">
+        <span className="font-medium text-muted-foreground">{label}</span>
+        <code className="min-w-0 break-all font-mono text-foreground/80">{baseUrl}</code>
+        <span className="text-[10px] uppercase text-muted-foreground/80">Final</span>
+        <code className="min-w-0 break-all font-mono text-foreground">{preview.finalUrl}</code>
+      </div>
+      {preview.diagnostics.length > 0 && (
+        <div className="space-y-1 text-xs">
+          {preview.diagnostics.map((diagnostic) => (
+            <EndpointDiagnosticLine
+              key={`${diagnostic.severity}:${diagnostic.message}`}
+              diagnostic={diagnostic}
+            />
+          ))}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -314,8 +370,8 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
-              <CheckCircle className="size-3" />
+            <div className="flex items-center gap-1 text-xs text-cyan-100 shrink-0">
+              <CheckCircle className="size-3 text-cyan-300" />
               <span>Connected</span>
               {tokenParts.length > 0 && (
                 <span className="text-muted-foreground">({displayTokens})</span>
@@ -440,15 +496,40 @@ export function ProviderCard({
   const canRefreshMetadata =
     provider.modelMetadataUrl !== undefined && provider.modelMetadataUrl.trim() !== "";
   const metadataImportLabel = canRefreshMetadata ? "Refresh" : "Import defaults";
+  const providerSourceBadge =
+    provider.source === "company" ? (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100">
+              Company
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Company-provided API key</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    ) : provider.source === "personal" ? (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="shrink-0 rounded border border-violet-300/20 bg-violet-300/[0.08] px-1.5 py-0.5 text-xs text-violet-100">
+              Personal
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Your personal API key</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    ) : null;
 
   return (
     <div
-      className={`border rounded-lg p-4 flex flex-col gap-3 bg-card transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`}
+      className={`border border-border bg-card shadow-sm flex flex-col gap-3 rounded-[8px] p-4 transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`}
     >
       <div className="flex items-start justify-between gap-2">
         <div className="flex items-center gap-2 min-w-0">
           <span className="font-medium truncate">{provider.name}</span>
-          {provider.source === "company" && (
+          {providerSourceBadge}
+          {providerSourceBadge === null && provider.source === "company" && (
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -460,7 +541,7 @@ export function ProviderCard({
               </Tooltip>
             </TooltipProvider>
           )}
-          {provider.source === "personal" && (
+          {providerSourceBadge === null && provider.source === "personal" && (
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -575,39 +656,47 @@ export function ProviderCard({
           className="text-muted-foreground hover:text-foreground transition-colors p-1"
           aria-label="Copy API key"
         >
-          {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+          {copied ? <Check className="size-4 text-cyan-300" /> : <Copy className="size-4" />}
         </button>
       </div>
 
       {provider.anthropicBaseUrl !== undefined && provider.anthropicBaseUrl !== "" && (
-        <div className="flex min-w-0 flex-col gap-2">
-          <div className="min-w-0 text-xs text-muted-foreground">
-            <span className="font-medium">Anthropic:</span>{" "}
-            <span className="truncate">{provider.anthropicBaseUrl}</span>
-          </div>
+        <ProviderEndpointSummary
+          label="Anthropic"
+          baseUrl={provider.anthropicBaseUrl}
+          endpoint={PATH_V1_MESSAGES}
+          providerName={provider.name}
+        >
           {testResults !== undefined && (
             <ProviderFormatTestStatus results={testResults.anthropic} />
           )}
-        </div>
+        </ProviderEndpointSummary>
       )}
 
       {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
-        <div className="flex min-w-0 flex-col gap-2">
-          <div className="min-w-0 text-xs text-muted-foreground">
-            <span className="font-medium">OpenAI Chat:</span>{" "}
-            <span className="truncate">{provider.openaiBaseUrl}</span>
-          </div>
-          {testResults !== undefined && <ProviderFormatTestStatus results={testResults.openai} />}
-        </div>
+        <ProviderEndpointSummary
+          label="OpenAI Chat"
+          baseUrl={provider.openaiBaseUrl}
+          endpoint={PATH_V1_CHAT_COMPLETIONS}
+          providerName={provider.name}
+        >
+          {testResults !== undefined && (
+            <ProviderFormatTestStatus results={testResults.openaiChat} />
+          )}
+        </ProviderEndpointSummary>
       )}
 
       {provider.openaiResponsesBaseUrl !== undefined && provider.openaiResponsesBaseUrl !== "" && (
-        <div className="flex min-w-0 flex-col gap-2">
-          <div className="min-w-0 text-xs text-muted-foreground">
-            <span className="font-medium">OpenAI Responses:</span>{" "}
-            <span className="truncate">{provider.openaiResponsesBaseUrl}</span>
-          </div>
-        </div>
+        <ProviderEndpointSummary
+          label="OpenAI Responses"
+          baseUrl={provider.openaiResponsesBaseUrl}
+          endpoint={PATH_V1_RESPONSES}
+          providerName={provider.name}
+        >
+          {testResults !== undefined && (
+            <ProviderFormatTestStatus results={testResults.openaiResponses} />
+          )}
+        </ProviderEndpointSummary>
       )}
 
       {testResults?.testedAt !== undefined && (
@@ -644,9 +733,15 @@ export function ProviderCard({
                       )}
                     {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
                       <th className="text-left py-1 px-2 font-medium text-muted-foreground">
-                        OpenAI
+                        Chat
                       </th>
                     )}
+                    {provider.openaiResponsesBaseUrl !== undefined &&
+                      provider.openaiResponsesBaseUrl !== "" && (
+                        <th className="text-left py-1 px-2 font-medium text-muted-foreground">
+                          Responses
+                        </th>
+                      )}
                   </tr>
                 </thead>
                 <tbody>
@@ -661,9 +756,15 @@ export function ProviderCard({
                         )}
                       {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
                         <td className="py-1 px-2 align-top">
-                          <ProviderFormatTestStatus results={modelResult.openai} />
+                          <ProviderFormatTestStatus results={modelResult.openaiChat} />
                         </td>
                       )}
+                      {provider.openaiResponsesBaseUrl !== undefined &&
+                        provider.openaiResponsesBaseUrl !== "" && (
+                          <td className="py-1 px-2 align-top">
+                            <ProviderFormatTestStatus results={modelResult.openaiResponses} />
+                          </td>
+                        )}
                     </tr>
                   ))}
                 </tbody>