@tonyclaw/agent-inspector 2.1.14 → 2.1.16

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

@@ -0,0 +1,132 @@
+import type { JSX } from "react";
+import { cn } from "../../lib/utils";
+
+export type ClientApp = "codex" | "opencode" | "mimo-code" | "claude-code" | "unknown";
+
+export type ClientAppDetectionInput = {
+  userAgent?: string | null;
+  conversationId?: string | null;
+  clientProjectFolder?: string | null;
+};
+
+const CLIENT_LABELS: Record<Exclude<ClientApp, "unknown">, string> = {
+  codex: "Codex",
+  opencode: "OpenCode",
+  "mimo-code": "MiMo Code",
+  "claude-code": "Claude Code",
+};
+
+function normalize(value: string | null | undefined): string {
+  return value?.toLowerCase() ?? "";
+}
+
+function matchesAny(value: string, candidates: readonly string[]): boolean {
+  for (const candidate of candidates) {
+    if (value.includes(candidate)) return true;
+  }
+  return false;
+}
+
+export function detectClientApp(input: ClientAppDetectionInput): ClientApp {
+  const haystack = [
+    normalize(input.userAgent),
+    normalize(input.conversationId),
+    normalize(input.clientProjectFolder),
+  ].join(" ");
+
+  if (matchesAny(haystack, ["mimocode", "mimo-code", "mimo code"])) return "mimo-code";
+  if (matchesAny(haystack, ["opencode", "open-code", "open code"])) return "opencode";
+  if (matchesAny(haystack, ["claude-code", "claude code", "claudecode"])) return "claude-code";
+  if (matchesAny(haystack, ["codex desktop", "codex-cli", "openai-codex", "codex"])) {
+    return "codex";
+  }
+
+  return "unknown";
+}
+
+export function clientAppLabel(client: ClientApp): string | null {
+  switch (client) {
+    case "codex":
+    case "opencode":
+    case "mimo-code":
+    case "claude-code":
+      return CLIENT_LABELS[client];
+    case "unknown":
+      return null;
+  }
+}
+
+function CodexMark(): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
+      <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" strokeWidth="2.2" />
+      <path
+        d="M14.8 8.6a4.8 4.8 0 1 0 0 6.8"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="2.2"
+      />
+    </svg>
+  );
+}
+
+function OpenCodeMark(): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
+      <path d="M7 4h10v16H7z" fill="none" stroke="currentColor" strokeWidth="2.2" />
+      <path d="M10 8h4M10 12h4M10 16h2" stroke="currentColor" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function MiMoCodeMark(): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
+      <path
+        d="M5 18V6h3.2l3.8 6.1L15.8 6H19v12h-3V11.3l-3.1 5h-1.8L8 11.3V18z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function ClaudeCodeMark(): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" className="size-full" aria-hidden="true">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21 10.95h3v3.1h-3v3.03h-1.49V20H18v-2.92h-1.49V20H15v-2.92H9V20H7.49v-2.92H6V20H4.49v-2.92H3v-3.03H0v-3.1h3V5h18v5.95zM6 10.95h1.49V8.1H6v2.85zm10.51 0H18V8.1h-1.49v2.85z"
+      />
+    </svg>
+  );
+}
+
+export function ClientLogo({
+  client,
+  className,
+}: {
+  client: ClientApp;
+  className?: string;
+}): JSX.Element | null {
+  const label = clientAppLabel(client);
+  if (label === null) return null;
+
+  return (
+    <span
+      className={cn(
+        "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}
+      title={label}
+    >
+      {client === "codex" && <CodexMark />}
+      {client === "opencode" && <OpenCodeMark />}
+      {client === "mimo-code" && <MiMoCodeMark />}
+      {client === "claude-code" && <ClaudeCodeMark />}
+    </span>
+  );
+}

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}
@@ -1173,19 +1191,24 @@ function LatestLogsPreview({ logs }: { logs: SessionLogSummary[] }): JSX.Element
         Latest logs
       </div>
       <div className="divide-y divide-border">
-        {visibleLogs.map((log) => (
-          <div
-            key={log.id}
-            className="grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]"
-          >
-            <span className="font-mono text-muted-foreground">#{log.id}</span>
-            <span className="min-w-0 truncate">
-              {displayText(log.model)} · {log.apiFormat} · {log.path}
-            </span>
-            <span className="font-mono text-muted-foreground">{formatMs(log.firstChunkMs)}</span>
-            <span className="font-mono text-muted-foreground">{formatMs(log.latencyMs)}</span>
-          </div>
-        ))}
+        {visibleLogs.map((log) => {
+          const displayNumber = log.sessionLogNumber ?? log.id;
+          return (
+            <div
+              key={log.id}
+              className="grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]"
+            >
+              <span className="font-mono text-muted-foreground" title={`Log ID ${String(log.id)}`}>
+                #{displayNumber}
+              </span>
+              <span className="min-w-0 truncate">
+                {displayText(log.model)} · {log.apiFormat} · {log.path}
+              </span>
+              <span className="font-mono text-muted-foreground">{formatMs(log.firstChunkMs)}</span>
+              <span className="font-mono text-muted-foreground">{formatMs(log.latencyMs)}</span>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

package/src/components/providers/ProviderCard.tsx

@@ -443,7 +443,7 @@ export function ProviderCard({
 
   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">

package/src/components/providers/ProviderForm.tsx

@@ -107,7 +107,7 @@ const MINIMAX_MODELS = [
 ];
 
 // Alibaba model options
-const ALIBABA_MODELS = ["glm-5", "glm-5.1", "glm-5.2", "qwen3.6-plus", "qwen3.7-max"];
+const ALIBABA_MODELS = ["qwen3.6-plus", "qwen3.7-max"];
 
 // ZhipuAI / Z.AI model options
 const ZHIPU_MODELS = [
@@ -291,7 +291,7 @@ function EndpointUrlPreview({
   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="border border-border bg-muted/40 rounded-md 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>
@@ -656,7 +656,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           }
           className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
         >
-          <option value="">—</option>
+          <option value="">Unspecified</option>
           <option value="personal">个人 (Personal)</option>
           <option value="company">公司 (Company)</option>
         </select>
@@ -681,7 +681,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           <p className="text-xs text-destructive">{errors.modelMetadataUrl}</p>
         )}
         {modelMetadataUrl.trim() === "" && (
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2 text-xs text-muted-foreground">
             Built-in limits cover DeepSeek v4 pro/flash, MiniMax M3/M2.7/M2.5/M2.1, and GLM coding
             models. Use a registry URL for private or custom model limits.
           </div>
@@ -751,7 +751,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
               ref={(el) => {
                 modelRowRefs.current[i] = el;
               }}
-              className="space-y-2 rounded-md border border-border bg-muted/10 p-2"
+              className="border border-border bg-card shadow-sm space-y-2 rounded-[8px] p-2"
             >
               <div className="flex items-center gap-2">
                 <div className="relative flex-1">
@@ -775,7 +775,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                         <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">
+                        <div className="bg-popover text-popover-foreground absolute left-0 right-0 top-full z-50 mt-1 max-h-48 overflow-y-auto rounded-md border shadow-md">
                           {suggestedModels.map((opt) => (
                             <button
                               key={opt}
@@ -784,7 +784,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                                 updateModel(i, opt);
                                 setOpenModelDropdown(null);
                               }}
-                              className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                              className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-white/[0.06]"
                             >
                               {opt}
                             </button>
@@ -899,7 +899,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       </div>
 
       <div className="space-y-2">
-        <div className="flex gap-1 border-b border-border">
+        <div className="border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1">
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -945,7 +945,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
             Anthropic 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]">
+          <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
             <input
               id="provider-anthropic-base-url"
               type="text"
@@ -955,9 +955,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                 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"
+              className="min-w-0 flex-1 bg-transparent 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">
+            <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
               {ANTHROPIC_MESSAGES_ENDPOINT}
             </span>
           </div>
@@ -978,7 +978,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <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]">
+            <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
               <input
                 id="provider-openai-base-url"
                 type="text"
@@ -988,9 +988,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   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"
+                className="min-w-0 flex-1 bg-transparent 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">
+              <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
                 {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
               </span>
             </div>
@@ -1010,7 +1010,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
             <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]">
+            <div className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
               <input
                 id="provider-openai-responses-base-url"
                 type="text"
@@ -1020,9 +1020,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
                   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"
+                className="min-w-0 flex-1 bg-transparent 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">
+              <span className="shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground">
                 {OPENAI_RESPONSES_ENDPOINT}
               </span>
             </div>
@@ -1058,7 +1058,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         </p>
       </div>
 
-      <div className="sticky bottom-0 bg-card border-t flex gap-2 justify-end pt-2 pb-2">
+      <div className="border border-border bg-background/95 shadow-sm sticky bottom-0 flex justify-end gap-2 rounded-[8px] px-3 py-2">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
           Cancel
         </Button>

package/src/components/providers/ProviderLogo.tsx

@@ -26,12 +26,17 @@ const PROVIDER_MAP: Record<string, Provider> = {
   "deepseek-": "deepseek",
   MiniMax: "minimax",
   qwen: "qwen",
-  "glm-": "zhipuai",
 };
 
+function isGlmModel(modelLower: string): boolean {
+  const normalized = modelLower.replace(/[_\s]+/g, "-");
+  return normalized.split(/[/:@]/).some((segment) => segment.startsWith("glm-"));
+}
+
 export function detectProvider(model: string | null): Provider {
   if (model === null) return "unknown";
   const modelLower = model.toLowerCase();
+  if (isGlmModel(modelLower)) return "zhipuai";
   for (const [prefix, provider] of Object.entries(PROVIDER_MAP)) {
     if (modelLower.startsWith(prefix.toLowerCase())) {
       return provider;