@tonyclaw/agent-inspector 2.1.15 → 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

@@ -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

@@ -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;

package/src/components/providers/ProvidersPanel.tsx

@@ -521,7 +521,7 @@ export function ProvidersPanel({
   if (showForm || editingProvider) {
     return (
       <div className="space-y-4">
-        <div className="flex items-center justify-between sticky top-0 bg-background z-10 pb-2">
+        <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-10 flex items-center justify-between rounded-[8px] px-3 py-2">
           <h3 className="text-lg font-medium">
             {editingProvider ? "Edit Provider" : "Add New Provider"}
           </h3>
@@ -540,7 +540,7 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between sticky top-0 z-10 bg-background pb-2">
+      <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-10 flex items-center justify-between rounded-[8px] px-3 py-2">
         <h3 className="text-lg font-medium">Providers</h3>
         <div className="flex items-center gap-2">
           <TooltipProvider>
@@ -608,7 +608,7 @@ export function ProvidersPanel({
       </div>
 
       {configPath !== null && (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-md px-3 py-2">
+        <div className="border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-xs text-muted-foreground">
           <span className="shrink-0">Config:</span>
           <span className="font-mono truncate" title={configPath}>
             {configPath}
@@ -644,14 +644,14 @@ export function ProvidersPanel({
       )}
 
       {error !== null && (
-        <div className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
+        <div className="border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-sm text-destructive">
           <AlertCircle className="size-4 shrink-0" />
           {error}
         </div>
       )}
 
       {providers.length === 0 ? (
-        <div className="text-center py-12 space-y-3">
+        <div className="border border-border bg-card shadow-sm space-y-3 rounded-[8px] py-12 text-center">
           <p className="text-sm text-muted-foreground">No providers configured yet.</p>
           <Button onClick={() => setShowForm(true)} variant="outline" size="sm">
             <Plus className="size-4" />
@@ -660,7 +660,7 @@ export function ProvidersPanel({
         </div>
       ) : (
         <div className="space-y-3">
-          <div className="flex gap-1 border-b border-border">
+          <div className="border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1">
             {(["all", "personal", "company"] as const).map((tab) => (
               <TooltipProvider key={tab}>
                 <Tooltip>

package/src/components/providers/SettingsDialog.tsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
+import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
@@ -61,7 +62,13 @@ export function SettingsDialog(): JSX.Element {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost" size="icon" className="size-8">
+        <Button
+          variant="ghost"
+          size="icon"
+          className={INSPECTOR_ICON_TRIGGER_CLASS}
+          aria-label="Settings"
+          title="Settings"
+        >
           <Settings className="size-4" />
           <span className="sr-only">Settings</span>
         </Button>
@@ -226,25 +233,25 @@ function StorageSettingsTab(): JSX.Element {
             copiedId={copiedId}
             onCopy={handleCopy}
           />
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">In-memory logs</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.memoryCount.toLocaleString()} loaded
             </div>
           </div>
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">Log files</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.logFileCount.toLocaleString()} files / {formatBytes(stats.logBytes)}
             </div>
           </div>
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">Streaming chunks</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.chunkFileCount.toLocaleString()} files / {formatBytes(stats.chunkBytes)}
             </div>
           </div>
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
             <div className="font-medium">Session archives</div>
             <div className="mt-1 font-mono text-muted-foreground">
               {stats.sessionArchiveFileCount.toLocaleString()} files /{" "}
@@ -274,7 +281,7 @@ function CopyableSetupValue({
 }): JSX.Element {
   const copied = copiedId === id;
   return (
-    <div className="min-w-0 rounded-md border border-border bg-muted/20 px-3 py-2">
+    <div className="border border-border bg-muted/40 min-w-0 rounded-md px-3 py-2">
       <div className="mb-1 text-xs font-medium text-muted-foreground">{label}</div>
       <div className="flex min-w-0 items-center gap-2">
         <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">{value}</code>