@tonyclaw/agent-inspector 2.1.15 → 2.1.16

package/.output/server/_ssr/{ProxyViewerContainer-CRBkqFlJ.mjs → ProxyViewerContainer-N4J7uBCX.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, v as createPendingProviderTestResults, w as ProviderTestResultsSchema, x as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, y as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, j as getSessionPath, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, q as providerHasContextMetadata, r as findProviderModelMetadata, s as safeGetOwnProperty, K as KnowledgeCandidateSchema, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, z as resolveProviderContextWindow, u as buildUpstreamUrl, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema, B as isPlainRecord } from "./router-DVeuZFqI.mjs";
+import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, v as createPendingProviderTestResults, w as ProviderTestResultsSchema, x as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, y as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, q as providerHasContextMetadata, r as findProviderModelMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, z as resolveProviderContextWindow, j as getSessionPath, u as buildUpstreamUrl, K as KnowledgeCandidateSchema, B as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-CQ4Zxhmr.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -9,7 +9,7 @@ import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { u as useWindowVirtualizer, a as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
-import { I as Info, C as ChevronDown, a as Check, X, U as Upload, D as Download, F as FileBraces, T as Trash2, P as Plus, A as ArrowLeft, b as ChevronUp, c as Copy, d as ChevronsLeft, e as ChevronLeft, f as ChevronRight, g as ChevronsRight, h as Clapperboard, S as Siren, G as Gauge, L as LoaderCircle, R as RefreshCw, i as Layers, j as Settings, k as Scan, l as CircleAlert, m as Terminal, n as ArrowUpRight, o as ArrowDownRight, p as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, W as Wrench, q as TriangleAlert, B as Brain, r as Bell, s as Clock3, t as ShieldAlert, u as EyeOff, v as Eye, w as RotateCw, x as Pencil, y as CircleX, z as ShieldCheck, H as Save, J as FileSearch, K as CircleCheck, N as CloudUpload, O as Minus, Q as CircleCheckBig, V as CircleQuestionMark, Y as Server, _ as Lock, $ as Wifi, a0 as WifiOff, a1 as OctagonAlert, a2 as Radio, a3 as Globe, a4 as FileTerminal, a5 as ChevronsUp, a6 as ChevronsDown, a7 as FileDiff, a8 as History, a9 as RotateCcw, aa as Search, ab as GitCompareArrows, ac as ArrowUp, ad as ArrowDown, ae as Ellipsis, af as CodeXml, ag as Blocks, ah as MousePointerClick, ai as FileText, aj as Rows3, ak as Columns2 } from "../_libs/lucide-react.mjs";
+import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, U as Upload, D as Download, F as FileBraces, c as Trash2, P as Plus, A as ArrowLeft, d as ChevronUp, e as Copy, f as ChevronsLeft, g as ChevronLeft, h as ChevronRight, i as ChevronsRight, j as Clapperboard, S as Siren, G as Gauge, L as LoaderCircle, R as RefreshCw, k as Layers, l as Settings, M as Monitor, m as Scan, n as CircleAlert, o as Terminal, p as ArrowUpRight, q as ArrowDownRight, r as Cpu, s as FolderOpen, B as Bell, t as Clock3, u as ShieldAlert, E as EyeOff, v as Eye, w as ExternalLink, x as RotateCw, y as Clock, z as Pencil, H as MessageSquare, Z as Zap, W as Wrench, J as Brain, K as Minus, N as CircleCheckBig, O as CircleQuestionMark, Q as Server, V as Lock, Y as Wifi, _ as WifiOff, $ as CircleX, a0 as ShieldCheck, a1 as Save, a2 as FileSearch, a3 as CloudUpload, a4 as OctagonAlert, a5 as Radio, a6 as Globe, a7 as FileTerminal, a8 as ChevronsUp, a9 as ChevronsDown, aa as FileDiff, ab as History, ac as RotateCcw, ad as Search, ae as GitCompareArrows, af as ArrowUp, ag as ArrowDown, ah as Ellipsis, ai as CodeXml, aj as Blocks, ak as MousePointerClick, al as FileText, am as Rows3, an as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, d as object, a as array, l as literal, b as string, n as number, c as boolean, _ as _enum } from "../_libs/zod.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 import { R as Root2$1, L as List, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -862,7 +862,7 @@ function ClientLogo({
     "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,
@@ -890,12 +890,16 @@ const PROVIDER_MAP = {
   "o3-": "openai",
   "deepseek-": "deepseek",
   MiniMax: "minimax",
-  qwen: "qwen",
-  "glm-": "zhipuai"
+  qwen: "qwen"
 };
+function isGlmModel(modelLower) {
+  const normalized = modelLower.replace(/[_\s]+/g, "-");
+  return normalized.split(/[/:@]/).some((segment2) => segment2.startsWith("glm-"));
+}
 function detectProvider(model) {
   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;
@@ -1016,7 +1020,7 @@ function ProviderLogoStack({
         "span",
         {
           className: cn(
-            "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 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",
             index > 0 && "-ml-2"
           ),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: item.provider, className: "size-4" })
@@ -1024,7 +1028,7 @@ function ProviderLogoStack({
       ) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: item.tooltip })
     ] }, `${item.provider}-${String(index)}`)),
-    overflowCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "-ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/40 px-1 font-mono text-[10px] text-muted-foreground", children: [
+    overflowCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "border border-border bg-muted/40 -ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md px-1 font-mono text-[10px] text-muted-foreground", children: [
       "+",
       overflowCount
     ] })
@@ -1420,6 +1424,8 @@ function ConversationHeader({
   userAgent,
   clientPid,
   clientProjectFolder,
+  showClientIdentity = true,
+  showProcessMetadata = true,
   timeDisplayFormat,
   onClear
 }) {
@@ -1445,6 +1451,8 @@ function ConversationHeader({
   const hasUserAgent = userAgent !== null && userAgent !== void 0 && userAgent !== "";
   const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
   const clientTooltip = detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
+  const isFallbackConversation = conversationId.startsWith("PID:") || conversationId.includes("|");
+  const compactSessionLabel = conversationId.length > 24 ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12) : conversationId;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -1453,10 +1461,10 @@ function ConversationHeader({
       "data-nav-id": `conv-${conversationId}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
-        "hover:bg-muted/50",
+        "border border-border bg-card shadow-sm flex cursor-pointer items-center gap-3 rounded-[8px] px-3 py-2 transition-colors",
+        "hover:border-cyan-200/20",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
+        "sticky top-0 z-10 mb-2",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       onClick: onToggle,
@@ -1469,19 +1477,18 @@ function ConversationHeader({
       },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogoStack, { items: providerLogoItems, ariaLabel: "Models used in this session" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: ROW_CHEVRON_SLOT_CLASS, children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" }) }),
-        conversationId.startsWith("PID:") || conversationId.includes("|") ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        isFallbackConversation && showProcessMetadata ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           clientPid !== null && clientPid !== void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "span",
             {
-              className: "text-purple-400/90 font-mono text-xs font-semibold shrink-0",
+              className: "shrink-0 font-mono text-xs font-semibold text-violet-200",
               title: `PID ${clientPid}`,
               children: [
                 "PID ",
                 clientPid
               ]
             }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-400/90 font-mono text-xs font-semibold shrink-0", children: conversationId }),
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 font-mono text-xs font-semibold text-violet-200", children: conversationId }),
           clientProjectFolder !== null && clientProjectFolder !== void 0 && clientProjectFolder !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -1494,15 +1501,15 @@ function ConversationHeader({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
-              className: "text-purple-400/90 font-mono text-xs font-semibold shrink-0",
+              className: "shrink-0 font-mono text-xs font-semibold text-violet-200",
               title: conversationId,
-              children: conversationId.length > 24 ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12) : conversationId
+              children: isFallbackConversation ? "sessionless" : compactSessionLabel
             }
           ),
-          clientPid !== null && clientPid !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          showProcessMetadata && clientPid !== null && clientPid !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "span",
             {
-              className: "text-muted-foreground text-xs font-mono tabular-nums shrink-0 px-1.5 py-0.5 rounded border border-border bg-muted/40",
+              className: "border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground",
               title: `Client process ID ${clientPid}`,
               children: [
                 "PID ",
@@ -1511,7 +1518,7 @@ function ConversationHeader({
             }
           )
         ] }),
-        clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
             className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
@@ -1555,7 +1562,7 @@ function ConversationHeader({
             },
             "aria-label": `Open session ${conversationId} in a new tab`,
             title: "Open this session in a new tab",
-            className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer",
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3.5" })
           }
         ),
@@ -1566,10 +1573,18 @@ function ConversationHeader({
             onClick: handleClearClick,
             "aria-label": `Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`,
             title: "Clear this group",
-            className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer",
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" })
           }
         ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
+            "aria-hidden": "true",
+            children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ConfirmDialog,
           {
@@ -1589,10 +1604,10 @@ function ConversationHeader({
   );
 }
 function getConversationId(log) {
-  if (log.isTest === true) return "provider-test";
   if (log.sessionId !== null && log.sessionId !== "" && log.sessionId !== void 0) {
     return log.sessionId;
   }
+  if (log.isTest === true) return "provider-test";
   const hasPid = log.clientPid !== null && log.clientPid !== void 0;
   const hasFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== void 0;
   if (!hasPid && !hasFolder) return "default";
@@ -2269,27 +2284,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-BoxztaO7.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-CO-Ti5sg.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-Cc1dyDuK.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-J1VxC0In.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-CMGSsz5Z.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-DBH-F3rq.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-Cp10DM1D.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-DLFwV7Hd.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-B1VGxy3A.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-BywmuND0.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-zDE2rrmJ.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-DlQu0N1x.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-zDE2rrmJ.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-DlQu0N1x.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -2713,35 +2728,31 @@ function Badge({
   );
 }
 const STATUS_BADGE_CLASSES = {
-  success: "bg-emerald-400/[0.08] text-emerald-200 border-emerald-300/25",
+  success: "bg-slate-300/[0.08] text-slate-100 border-slate-300/20",
   client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
   server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
   pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25"
 };
 const STATUS_CUE_CLASSES = {
   success: {
-    frame: "border-emerald-300/20 bg-emerald-300/[0.06] text-emerald-100",
-    dot: "bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,0.8)]",
-    rail: "bg-emerald-300/45 shadow-[0_0_22px_rgba(110,231,183,0.28)]"
+    frame: "border-cyan-200/15 bg-white/[0.04] text-slate-100",
+    dot: "bg-cyan-200/80 shadow-[0_0_14px_rgba(125,211,252,0.65)]"
   },
   client_error: {
     frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
-    dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
-    rail: "bg-amber-300/50 shadow-[0_0_22px_rgba(252,211,77,0.28)]"
+    dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]"
   },
   server_error: {
     frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
-    dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
-    rail: "bg-rose-300/50 shadow-[0_0_22px_rgba(253,164,175,0.28)]"
+    dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]"
   },
   pending: {
     frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
-    dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
-    rail: "bg-cyan-300/50 shadow-[0_0_22px_rgba(103,232,249,0.28)]"
+    dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]"
   }
 };
-const HEADER_ACTION_BUTTON_CLASS = "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
-const TELEMETRY_CHIP_CLASS = "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]";
+const HEADER_ACTION_BUTTON_CLASS = "border border-input bg-background hover:bg-accent hover:text-accent-foreground size-8 text-muted-foreground shadow-none hover:text-cyan-100";
+const TELEMETRY_CHIP_CLASS = "border border-border bg-muted/40 flex h-7 items-center gap-1 rounded-md px-2 text-xs";
 function formatElapsed$3(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
@@ -2768,7 +2779,7 @@ function CacheTrendIndicator({ trend }) {
   const Icon2 = isUp ? ArrowUp : ArrowDown;
   const sign = isUp ? "+" : "-";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-0.5 text-muted-foreground tabular-nums", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: isUp ? "size-3 text-cyan-300" : "size-3 text-rose-400" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
       sign,
       formatTokens(trend.delta)
@@ -2787,6 +2798,7 @@ const LogEntryHeader = reactExports.memo(function({
   tabActions,
   onReplay,
   slowResponseThresholdSeconds = 0,
+  showClientMetadata = true,
   timeDisplayFormat
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -2812,8 +2824,8 @@ const LogEntryHeader = reactExports.memo(function({
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
         "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
-        expanded ? "bg-[linear-gradient(90deg,#0f1720_0%,#090d12_50%,#07090d_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]" : "bg-[#080b10] hover:bg-[#0b1016]",
-        "select-none before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/10",
+        expanded ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]" : "bg-transparent hover:bg-white/[0.035]",
+        "select-none before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-white/12",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       onClick: onToggle,
@@ -2824,22 +2836,11 @@ const LogEntryHeader = reactExports.memo(function({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "span",
-          {
-            className: cn(
-              "absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full transition-colors",
-              statusCue.rail
-            ),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: ROW_CHEVRON_SLOT_CLASS, children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
             className: cn(
-              "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-2 font-mono shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+              "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
               statusCue.frame
             ),
             children: [
@@ -2851,7 +2852,7 @@ const LogEntryHeader = reactExports.memo(function({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-muted-foreground text-xs shrink-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", title: log.timestamp, children: formatTimestamp$2(log.timestamp, timeDisplayFormat) })
         ] }),
@@ -2920,7 +2921,7 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Time to first streaming chunk" })
         ] }),
         log.streaming && tokenRateLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-emerald-300"), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: tokenRateLabel })
           ] }) }),
@@ -2938,7 +2939,7 @@ const LogEntryHeader = reactExports.memo(function({
                 ),
                 children: [
                   "IN ",
-                  log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"
+                  log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"
                 ]
               }
             ),
@@ -2952,7 +2953,7 @@ const LogEntryHeader = reactExports.memo(function({
                 ),
                 children: [
                   "OUT ",
-                  log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"
+                  log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"
                 ]
               }
             )
@@ -2960,7 +2961,7 @@ const LogEntryHeader = reactExports.memo(function({
         ] }),
         log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "shrink-0"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CacheTrendIndicator, { trend: cacheTrend?.creation ?? null }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-emerald-400", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums text-cyan-300", children: [
             "KV Cache +",
             formatTokens(log.cacheCreationInputTokens)
           ] })
@@ -2991,7 +2992,7 @@ const LogEntryHeader = reactExports.memo(function({
             ]
           }
         ),
-        (hasClientPid || hasClientProjectFolder) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        showClientMetadata && (hasClientPid || hasClientProjectFolder) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(FileTerminal, { className: "size-3" }),
             hasClientProjectFolder ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.clientProjectFolder }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
@@ -3074,7 +3075,7 @@ const LogEntryHeader = reactExports.memo(function({
                         className: HEADER_ACTION_BUTTON_CLASS,
                         onClick: action.onCopy,
                         "aria-label": action.copyCopied ? "Copied" : action.copyLabel,
-                        children: action.copyCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+                        children: action.copyCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
                       }
                     ) }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.copyCopied ? "Copied to clipboard" : action.copyLabel })
@@ -3097,6 +3098,14 @@ const LogEntryHeader = reactExports.memo(function({
               ] })
             ]
           }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
+            "aria-hidden": "true",
+            children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
+          }
         )
       ]
     }
@@ -3229,7 +3238,7 @@ function ToolRow({ tool, called }) {
   const [open, setOpen] = reactExports.useState(false);
   const nameCopy = useCopyFeedback(tool.name);
   const hasDetails = tool.description !== null || tool.requiredParameters.length > 0 || tool.schema !== null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm rounded-[8px]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2 px-2.5 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
@@ -3264,17 +3273,17 @@ function ToolRow({ tool, called }) {
         "button",
         {
           type: "button",
-          className: "inline-flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           onClick: nameCopy.copy,
           "aria-label": nameCopy.copied ? "Copied tool name" : "Copy tool name",
           children: nameCopy.copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: open && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: open && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-white/[0.025] px-2.5 py-2", children: [
       tool.description !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: tool.description }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredParameters, { names: tool.requiredParameters }),
-      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "border border-border bg-card shadow-sm max-h-64 rounded-[8px] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         reactExports.Suspense,
         {
           fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: "Loading JSON..." }),
@@ -3304,7 +3313,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
   if (summary === null) return null;
   const previewTools = summary.tools.slice(0, 6);
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mb-3 overflow-hidden rounded-md border border-white/10 bg-[#080b0f] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border border-border bg-card shadow-sm mb-3 overflow-hidden rounded-[8px]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-4 shrink-0 text-sky-300/80" }),
@@ -3348,7 +3357,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
           type: "button",
           variant: "ghost",
           size: "sm",
-          className: "h-7 border border-white/10 bg-black/20 px-2 text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100",
+          className: "h-7 px-2 text-muted-foreground hover:text-cyan-100",
           onClick: () => setExpanded((value) => !value),
           "aria-expanded": expanded,
           children: [
@@ -3358,7 +3367,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-black/10 px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-white/[0.025] px-3 py-2", children: [
       previewTools.map((tool) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         Badge,
         {
@@ -3376,8 +3385,8 @@ const RequestTools = reactExports.memo(function RequestTools2({
         hiddenPreviewCount
       ] })
     ] }),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-black/15 px-3 py-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex h-8 items-center gap-2 rounded-md border border-white/10 bg-[#06080b] px-2 text-xs", children: [
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-black/10 px-3 py-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 items-center gap-2 rounded-md px-2 text-xs", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "size-3.5 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
@@ -3582,7 +3591,7 @@ const FULL_LOG_HYDRATION_TIMEOUT_MS = 15e3;
 const BODY_CHUNK_TIMEOUT_MS = 15e3;
 const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
-const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-cyan-400/[0.05] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-cyan-300/[0.04] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:border-white/10 hover:bg-white/[0.045] hover:text-foreground data-[state=active]:border-cyan-200/25 data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 function createEmptyBodyPreviewState(totalBytes = null) {
   return {
     status: "idle",
@@ -3633,7 +3642,7 @@ function ExpandedPanel({
     "div",
     {
       className: cn(
-        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-cyan-300/10 bg-[#05070a] p-3 shadow-[0_16px_45px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.05)]",
+        "border border-border bg-card shadow-sm inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
         className
       ),
       children
@@ -3641,10 +3650,10 @@ function ExpandedPanel({
   );
 }
 function EmptyState({ children }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-dashed border-white/10 bg-white/[0.02] px-3 py-5 text-center text-xs italic text-muted-foreground", children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-muted/40 rounded-md border-dashed px-3 py-5 text-center text-xs italic text-muted-foreground", children });
 }
 function RawTextBlock({ children }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-white/10 bg-black/30 p-3 font-mono text-xs leading-relaxed text-muted-foreground", children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "border border-border bg-card shadow-sm inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground", children });
 }
 const NOTICE_TONE_CLASSES = {
   loading: "border-cyan-400/25 bg-cyan-400/[0.06] text-cyan-100",
@@ -3696,7 +3705,7 @@ function BodyPreviewNotice({
             type: "button",
             variant: "outline",
             size: "sm",
-            className: "h-7 border-white/10 bg-black/20 text-xs text-cyan-100 hover:border-cyan-300/35 hover:bg-cyan-400/10",
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-cyan-100",
             onClick: onLoadMore,
             children: actionLabel
           }
@@ -3711,12 +3720,12 @@ function HeaderRows({
 }) {
   const entries = headers === void 0 ? [] : Object.entries(headers).sort(([left], [right]) => left.localeCompare(right));
   if (entries.length === 0) return /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: emptyLabel });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden rounded-md border border-white/10 bg-black/20 font-mono text-xs", children: entries.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm overflow-hidden rounded-[8px] font-mono text-xs", children: entries.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: "grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/5 last:border-b-0",
+      className: "grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/10 last:border-b-0",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate border-r border-white/5 bg-white/[0.03] px-2.5 py-2 font-semibold text-cyan-200", children: key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate border-r border-white/10 bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200", children: key }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate px-2.5 py-2 text-muted-foreground", title: value, children: value })
       ]
     },
@@ -3735,7 +3744,7 @@ function DiffToggleButton({
         size: "sm",
         className: cn(
           "h-8 border-white/10 text-xs shadow-none",
-          active ? "bg-cyan-300 text-black hover:bg-cyan-200" : "bg-[#0a0d11] text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100"
+          active ? "bg-cyan-300 text-black hover:bg-cyan-200" : "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-cyan-100"
         ),
         onClick,
         "aria-pressed": active,
@@ -3775,7 +3784,8 @@ const LogEntry = reactExports.memo(function({
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   cacheTrend = null,
-  onCompareWithPrevious
+  onCompareWithPrevious,
+  showClientMetadata = true
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [replayOpen, setReplayOpen] = reactExports.useState(false);
@@ -4072,8 +4082,8 @@ const LogEntry = reactExports.memo(function({
       "div",
       {
         className: cn(
-          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
-          expanded ? "border-cyan-300/25 shadow-[0_24px_80px_rgba(0,0,0,0.34),0_0_0_1px_rgba(103,232,249,0.04),inset_0_1px_0_rgba(255,255,255,0.06)]" : "border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.16)] hover:border-cyan-300/15"
+          "border border-border bg-card shadow-sm relative mb-2 overflow-hidden rounded-[8px] transition-[background-color,border-color,box-shadow]",
+          expanded ? "border-cyan-200/25 shadow-[0_24px_80px_rgba(0,0,0,0.36),0_0_0_1px_rgba(103,232,249,0.05),inset_0_1px_0_rgba(255,255,255,0.14)]" : "hover:border-cyan-200/18"
         ),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4081,7 +4091,7 @@ const LogEntry = reactExports.memo(function({
             {
               className: cn(
                 "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
-                expanded ? "bg-cyan-300/45 shadow-[0_0_20px_rgba(103,232,249,0.28)]" : "bg-white/10"
+                expanded ? "bg-cyan-200/55 shadow-[0_0_20px_rgba(103,232,249,0.26)]" : "bg-white/12"
               ),
               "aria-hidden": "true"
             }
@@ -4104,6 +4114,7 @@ const LogEntry = reactExports.memo(function({
               onToggle: handleToggleExpanded,
               cacheTrend,
               slowResponseThresholdSeconds,
+              showClientMetadata,
               timeDisplayFormat,
               activeTab,
               tabActions,
@@ -4115,14 +4126,14 @@ const LogEntry = reactExports.memo(function({
           expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              className: "relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2",
+              className: "relative border-t border-white/10 bg-black/[0.18] pt-2",
               onClick: (e) => e.stopPropagation(),
               onKeyDown: (e) => e.stopPropagation(),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "div",
                   {
-                    className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-cyan-300/[0.035] to-transparent",
+                    className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/[0.05] to-transparent",
                     "aria-hidden": "true"
                   }
                 ),
@@ -4131,7 +4142,7 @@ const LogEntry = reactExports.memo(function({
                     TabsList,
                     {
                       variant: "line",
-                      className: "inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-cyan-300/10 bg-black/10 p-0",
+                      className: "border border-border bg-muted/40 inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1",
                       children: [
                         viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-headers", children: "Raw Headers" }),
                         viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "headers", children: "Headers" }),
@@ -4366,9 +4377,9 @@ function ThreadConnector({
       FusedCrab,
       {
         className: cn(
-          "size-3.5 text-[#80FF00]",
+          "size-3.5 text-cyan-300/90",
           "animate-crab-settle",
-          "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]"
+          "drop-shadow-[0_0_4px_rgba(103,232,249,0.35)]"
         )
       }
     ) }) : isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: boundaryTitle(stopReason), ...interactiveProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4384,9 +4395,9 @@ function ThreadConnector({
       Crab,
       {
         className: cn(
-          "size-3.5 text-emerald-400",
+          "size-3.5 text-cyan-300/85",
           "animate-crab-appear",
-          "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]"
+          "drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]"
         )
       }
     ) }) : isRunning ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Processing…", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: cn("size-3.5 text-amber-300/80", "animate-crab-crawl") }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: "size-3.5 text-muted-foreground/40" }) }),
@@ -4449,9 +4460,6 @@ function responseMayContainToolTrace(log, format) {
       return false;
   }
 }
-function shouldRenderConversationContent(standalone, expanded) {
-  return standalone || expanded;
-}
 function isTurnCollapsible(entryCount, isComplete, isPending) {
   return entryCount > 1 && isComplete && !isPending;
 }
@@ -4681,7 +4689,8 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   comparisonPredecessors,
   turnIndex = 0,
   timeDisplayFormat,
-  pendingFocusRequest
+  pendingFocusRequest,
+  showLogClientMetadata = true
 }) {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -4754,7 +4763,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   }, [entries, lastIdx]);
   const StartCrab = reactExports.useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
   const EndCrab = reactExports.useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
-  const bgClass = turnIndex % 2 === 0 ? "bg-[#070a0f]" : "bg-[#090d12]";
+  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
   const aggregateIsSlow = aggregate.maxElapsed !== null && slowResponseThresholdSeconds > 0 && aggregate.maxElapsed > slowResponseThresholdSeconds * 1e3;
   const toolEventsByLogId = reactExports.useMemo(() => {
     const events = /* @__PURE__ */ new Map();
@@ -4799,7 +4808,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
       "aria-label": collapsed ? void 0 : turnLabel,
       "data-nav-id": collapsed ? void 0 : `turn-${String(firstLogId)}`,
       className: cn(
-        "border rounded-lg transition-[border-color,box-shadow]",
+        "rounded-[8px] border transition-[border-color,box-shadow]",
         isPending ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]" : "border-transparent",
         !collapsed && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
@@ -4829,7 +4838,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                   {
                     role: "button",
                     tabIndex: 0,
-                    title: "Start of turn — click to expand",
+                    title: "Start of turn - click to expand",
                     className: "cursor-pointer",
                     onClick: (e) => {
                       e.stopPropagation();
@@ -4845,8 +4854,8 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                       StartCrab,
                       {
                         className: cn(
-                          "size-3.5 text-emerald-400",
-                          "animate-crab-appear drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]"
+                          "size-3.5 text-cyan-300/85",
+                          "animate-crab-appear drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]"
                         )
                       }
                     )
@@ -4858,7 +4867,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                   {
                     role: "button",
                     tabIndex: 0,
-                    title: "End of Turn — click to expand",
+                    title: "End of Turn - click to expand",
                     className: "cursor-pointer",
                     onClick: (e) => {
                       e.stopPropagation();
@@ -4887,6 +4896,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 {
                   className: cn(
                     "flex-1 min-w-0 mb-0.5 rounded-lg border border-cyan-300/10 py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+                    "border border-border bg-card shadow-sm",
                     bgClass
                   ),
                   children: [
@@ -4971,7 +4981,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 onToggle: toggleCollapse
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-[8px]", bgClass), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 LogEntry,
                 {
@@ -4982,6 +4992,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                   slowResponseThresholdSeconds,
                   timeDisplayFormat,
                   cacheTrend: cacheTrends?.get(log.id) ?? null,
+                  showClientMetadata: showLogClientMetadata,
                   onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
                 }
               ),
@@ -4995,7 +5006,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
 });
 const VIRTUALIZE_TURN_THRESHOLD = 24;
 const ESTIMATED_TURN_HEIGHT = 132;
-const VIRTUAL_OVERSCAN$1 = 8;
+const VIRTUAL_OVERSCAN = 8;
 function shouldVirtualizeTurnGroups(turnCount) {
   return turnCount > VIRTUALIZE_TURN_THRESHOLD;
 }
@@ -5023,7 +5034,8 @@ function renderTurnGroup(turnGroup, props, pendingFocusRequest) {
       onCompareWithPrevious: props.onCompareWithPrevious,
       comparisonPredecessors: props.comparisonPredecessors,
       turnIndex: turnGroup.turnIndex,
-      pendingFocusRequest
+      pendingFocusRequest,
+      showLogClientMetadata: props.showLogClientMetadata
     },
     turnGroup.turnIndex
   );
@@ -5042,7 +5054,7 @@ function VirtualizedTurnGroupList(props) {
   const virtualizer = useWindowVirtualizer({
     count: turnGroups.length,
     estimateSize: () => ESTIMATED_TURN_HEIGHT,
-    overscan: VIRTUAL_OVERSCAN$1,
+    overscan: VIRTUAL_OVERSCAN,
     getItemKey: (index) => turnGroups[index]?.turnIndex ?? index
   });
   const turnIndexByLogId = reactExports.useMemo(() => buildLogTurnIndex(turnGroups), [turnGroups]);
@@ -5350,7 +5362,7 @@ function CandidateItem({
     if (saved) setEditing(false);
   }, [candidate.id, draftContent, draftTags, draftTitle, draftType, onUpdateCandidate]);
   if (editing) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-border/80 bg-background/60 px-2.5 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm rounded-[8px] px-2.5 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "select",
@@ -5363,7 +5375,7 @@ function CandidateItem({
               );
               if (parsed.success) setDraftType(parsed.data);
             },
-            className: "h-7 rounded-md border border-input bg-background px-2 text-xs",
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs",
             "aria-label": "Candidate type",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "episode", children: "episode" }),
@@ -5379,7 +5391,7 @@ function CandidateItem({
             value: draftTitle,
             disabled: isUpdating,
             onChange: (event) => setDraftTitle(event.currentTarget.value),
-            className: "h-7 min-w-[220px] flex-1 rounded-md border border-input bg-background px-2 text-xs",
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 min-w-[220px] flex-1 rounded-md px-2 text-xs",
             "aria-label": "Candidate title"
           }
         )
@@ -5390,7 +5402,7 @@ function CandidateItem({
           value: draftContent,
           disabled: isUpdating,
           onChange: (event) => setDraftContent(event.currentTarget.value),
-          className: "min-h-28 rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed",
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground min-h-28 rounded-md px-2 py-1.5 font-mono text-[11px] leading-relaxed",
           "aria-label": "Candidate content"
         }
       ),
@@ -5400,7 +5412,7 @@ function CandidateItem({
           value: draftTags,
           disabled: isUpdating,
           onChange: (event) => setDraftTags(event.currentTarget.value),
-          className: "h-7 rounded-md border border-input bg-background px-2 text-xs",
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs",
           "aria-label": "Candidate tags"
         }
       ),
@@ -5734,7 +5746,7 @@ function AgentTraceSummary({
     []
   );
   if (logs.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mb-2 rounded-lg border border-border bg-muted/10 px-3 py-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border border-border bg-card shadow-sm mb-2 rounded-[8px] px-3 py-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-xs", children: [
       showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3.5 text-blue-400" }),
@@ -5882,13 +5894,15 @@ const ConversationGroup = reactExports.memo(function({
   onCompareWithPrevious,
   comparisonPredecessors,
   onClearGroup,
-  standalone = false,
-  hasPinnedSessionContext = false,
+  showClientIdentity = true,
+  showProcessMetadata = true,
+  showLogClientMetadata = true,
+  defaultExpanded = false,
   timeDisplayFormat,
   expanded: controlledExpanded,
   onExpandedChange
 }) {
-  const [internalExpanded, setInternalExpanded] = reactExports.useState(false);
+  const [internalExpanded, setInternalExpanded] = reactExports.useState(defaultExpanded);
   const expanded = controlledExpanded ?? internalExpanded;
   const setExpanded = reactExports.useCallback(
     (nextExpanded) => {
@@ -5900,18 +5914,20 @@ const ConversationGroup = reactExports.memo(function({
     },
     [onExpandedChange]
   );
+  reactExports.useEffect(() => {
+    if (!defaultExpanded || controlledExpanded !== void 0) return;
+    setInternalExpanded(true);
+  }, [controlledExpanded, defaultExpanded]);
   const stats = reactExports.useMemo(() => computeStats(group.logs), [group.logs]);
   const providers = reactExports.useMemo(() => collectProviders(group.logs), [group.logs]);
   const startTime = group.logs[0]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const isLoading = group.logs.some((log) => log.responseStatus === null);
-  const showTraceRollupMetrics = standalone && !hasPinnedSessionContext;
   const clientPid = reactExports.useMemo(() => getFirstClientPid(group.logs), [group.logs]);
   const clientProjectFolder = reactExports.useMemo(() => getFirstClientProjectFolder(group.logs), [group.logs]);
   const turnGroups = reactExports.useMemo(() => buildTurnGroups(group.logs), [group.logs]);
   reactExports.useEffect(() => {
     const handleLogFocusRequest = (event) => {
-      if (standalone) return;
       const request = readLogFocusRequest(event);
       if (request === null) return;
       if (!group.logs.some((log) => log.id === request.logId)) return;
@@ -5921,9 +5937,9 @@ const ConversationGroup = reactExports.memo(function({
     return () => {
       window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
     };
-  }, [group.logs, setExpanded, standalone]);
+  }, [group.logs, setExpanded]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-    !standalone && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
       ConversationHeader,
       {
         conversationId: group.conversationId,
@@ -5939,18 +5955,20 @@ const ConversationGroup = reactExports.memo(function({
         userAgent: group.logs[0]?.userAgent ?? null,
         clientPid,
         clientProjectFolder,
+        showClientIdentity,
+        showProcessMetadata,
         timeDisplayFormat,
         onClear: () => onClearGroup(group.logs.map((l) => l.id))
       }
     ),
-    shouldRenderConversationContent(standalone, expanded) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         AgentTraceSummary,
         {
           logs: group.logs,
           scopeId: group.conversationId,
           slowResponseThresholdSeconds,
-          showRollupMetrics: showTraceRollupMetrics,
+          showRollupMetrics: false,
           timeDisplayFormat
         }
       ),
@@ -5964,7 +5982,8 @@ const ConversationGroup = reactExports.memo(function({
           timeDisplayFormat,
           cacheTrends,
           onCompareWithPrevious,
-          comparisonPredecessors
+          comparisonPredecessors,
+          showLogClientMetadata
         }
       )
     ] })
@@ -6169,6 +6188,7 @@ function useAlertSummary() {
     mutate: response.mutate
   };
 }
+const INSPECTOR_ICON_TRIGGER_CLASS = "relative size-8 rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50";
 const ALERT_CATEGORIES = [
   "request-failure",
   "request-timeout",
@@ -6529,7 +6549,7 @@ function AlertsDialog() {
         type: "button",
         variant: "ghost",
         size: "icon",
-        className: "relative size-8",
+        className: INSPECTOR_ICON_TRIGGER_CLASS,
         "aria-label": "Alerts",
         title: "Alerts",
         children: [
@@ -6825,6 +6845,12 @@ function firstNonEmpty(...values) {
   }
   return "-";
 }
+function firstOptionalText(...values) {
+  for (const value of values) {
+    if (value !== null && value !== void 0 && value.trim().length > 0) return value;
+  }
+  return null;
+}
 function providerModel(member) {
   const provider = member.provider;
   const model = member.model;
@@ -6987,7 +7013,7 @@ function GroupsDialog() {
         type: "button",
         variant: "ghost",
         size: "icon",
-        className: "relative size-8",
+        className: INSPECTOR_ICON_TRIGGER_CLASS,
         "aria-label": "Evaluation groups",
         title: "Evaluation groups",
         children: [
@@ -7426,6 +7452,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 clientLabel2 = clientAppLabel(clientApp);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border last:border-0 hover:bg-muted/20", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("td", { className: "max-w-56 px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
@@ -7444,6 +7478,7 @@ function MemberRow({
             children: isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5" })
           }
         ),
+        clientLabel2 !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-5" }),
         canOpenLiveSession ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "a",
           {
@@ -8201,7 +8236,7 @@ function ProviderCard({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "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" : ""}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -8501,7 +8536,7 @@ const MINIMAX_MODELS = [
   "MiniMax M2.1-highspeed",
   "MiniMax M2"
 ];
-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"];
 const ZHIPU_MODELS = [
   "glm-5.2",
   "glm-5.1",
@@ -8625,7 +8660,7 @@ function EndpointUrlPreview({
 }) {
   const finalUrl = previewEndpointUrl(baseUrl, endpoint);
   if (finalUrl === null) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border/70 bg-muted/35 px-3 py-2 text-xs", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2 text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: "Final URL" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "break-all font-mono text-foreground", children: finalUrl })
   ] });
@@ -8938,7 +8973,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
           ),
           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",
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "—" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Unspecified" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "personal", children: "个人 (Personal)" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "company", children: "公司 (Company)" })
           ]
@@ -8960,7 +8995,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         }
       ),
       errors.modelMetadataUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.modelMetadataUrl }),
-      modelMetadataUrl.trim() === "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground", children: "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." }),
+      modelMetadataUrl.trim() === "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2 text-xs text-muted-foreground", children: "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." }),
       provider !== void 0 && !hasContextMetadata && modelMetadataUrl.trim() === "" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-amber-400", children: "This provider has no matching context metadata yet." }),
       modelMetadataUrl.trim() !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Agent Inspector will refresh model limits from this JSON registry after save." })
     ] }),
@@ -9025,7 +9060,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
             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",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex-1", children: [
@@ -9050,7 +9085,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" })
                       }
                     ),
-                    openModelDropdown === i && /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: suggestedModels.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    openModelDropdown === i && /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: suggestedModels.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                       "button",
                       {
                         type: "button",
@@ -9058,7 +9093,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
                           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]",
                         children: opt
                       },
                       opt
@@ -9180,7 +9215,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       errors.models !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.models })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
@@ -9210,7 +9245,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     ] }),
     activeTab === "anthropic" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-anthropic-base-url", className: "text-sm font-medium", children: "Anthropic Base URL" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("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]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("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]", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -9222,10 +9257,10 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
               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"
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground", children: ANTHROPIC_MESSAGES_ENDPOINT })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: ANTHROPIC_MESSAGES_ENDPOINT })
       ] }),
       errors.anthropicBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.anthropicBaseUrl }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(EndpointUrlPreview, { baseUrl: anthropicBaseUrl, endpoint: ANTHROPIC_MESSAGES_ENDPOINT }),
@@ -9234,7 +9269,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     activeTab === "openai" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-base-url", className: "text-sm font-medium", children: "OpenAI Chat Base URL" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("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]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("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]", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -9246,10 +9281,10 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
                 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"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_CHAT_COMPLETIONS_ENDPOINT })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: OPENAI_CHAT_COMPLETIONS_ENDPOINT })
         ] }),
         errors.openaiBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiBaseUrl }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9263,7 +9298,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-responses-base-url", className: "text-sm font-medium", children: "OpenAI Responses Base URL" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("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]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("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]", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -9275,10 +9310,10 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
                 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"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_RESPONSES_ENDPOINT })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: OPENAI_RESPONSES_ENDPOINT })
         ] }),
         errors.openaiResponsesBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiResponsesBaseUrl }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -9306,7 +9341,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Optional API documentation URL. If not set, uses known provider docs." })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky bottom-0 bg-card border-t flex gap-2 justify-end pt-2 pb-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-background/95 shadow-sm sticky bottom-0 flex justify-end gap-2 rounded-[8px] px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isSubmitting, children: "Cancel" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Saving..." : provider ? "Update Provider" : "Add Provider" })
     ] })
@@ -9717,7 +9752,7 @@ function ProvidersPanel({
   }
   if (showForm || editingProvider) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between sticky top-0 bg-background z-10 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium", children: editingProvider ? "Edit Provider" : "Add New Provider" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("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", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium", children: editingProvider ? "Edit Provider" : "Add New Provider" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProviderForm,
         {
@@ -9732,7 +9767,7 @@ function ProvidersPanel({
     ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between sticky top-0 z-10 bg-background pb-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("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", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium", children: "Providers" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
@@ -9799,7 +9834,7 @@ function ProvidersPanel({
         ] })
       ] })
     ] }),
-    configPath !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-md px-3 py-2", children: [
+    configPath !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("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", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: "Config:" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate", title: configPath, children: configPath }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
@@ -9822,18 +9857,18 @@ function ProvidersPanel({
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Copy config file path to clipboard" })
       ] }) })
     ] }),
-    error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2", children: [
+    error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-sm text-destructive", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "size-4 shrink-0" }),
       error
     ] }),
-    providers.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-12 space-y-3", children: [
+    providers.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm space-y-3 rounded-[8px] py-12 text-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "No providers configured yet." }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => setShowForm(true), variant: "outline", size: "sm", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
         "Add Your First Provider"
       ] })
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-1 border-b border-border", children: ["all", "personal", "company"].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1", children: ["all", "personal", "company"].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -9930,10 +9965,20 @@ function SettingsDialog() {
     []
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "size-8", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "size-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Settings" })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: INSPECTOR_ICON_TRIGGER_CLASS,
+        "aria-label": "Settings",
+        title: "Settings",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Settings, { className: "size-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Settings" })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] overflow-hidden flex flex-col", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Settings" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "flex-1 overflow-hidden", children: [
@@ -10064,14 +10109,14 @@ function StorageSettingsTab() {
           onCopy: handleCopy
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: "In-memory logs" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 font-mono text-muted-foreground", children: [
           stats.memoryCount.toLocaleString(),
           " loaded"
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Log files" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 font-mono text-muted-foreground", children: [
           stats.logFileCount.toLocaleString(),
@@ -10079,7 +10124,7 @@ function StorageSettingsTab() {
           formatBytes(stats.logBytes)
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Streaming chunks" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 font-mono text-muted-foreground", children: [
           stats.chunkFileCount.toLocaleString(),
@@ -10087,7 +10132,7 @@ function StorageSettingsTab() {
           formatBytes(stats.chunkBytes)
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Session archives" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 font-mono text-muted-foreground", children: [
           stats.sessionArchiveFileCount.toLocaleString(),
@@ -10108,7 +10153,7 @@ function CopyableSetupValue({
   onCopy
 }) {
   const copied = copiedId === id;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 rounded-md border border-border bg-muted/20 px-3 py-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 min-w-0 rounded-md px-3 py-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs text-foreground", children: value }),
@@ -10610,107 +10655,370 @@ function compareField(previous, current) {
   if (current < previous) return { direction: "down", delta: previous - current };
   return null;
 }
-const VIRTUALIZE_GROUP_THRESHOLD = 30;
-const ESTIMATED_GROUP_HEIGHT = 112;
-const VIRTUAL_OVERSCAN = 6;
-function shouldVirtualizeConversationGroups(groupCount) {
-  return groupCount > VIRTUALIZE_GROUP_THRESHOLD;
+function firstUserAgent(logs) {
+  for (const log of logs) {
+    const userAgent = log.userAgent;
+    if (userAgent !== null && userAgent !== void 0 && userAgent !== "") return userAgent;
+  }
+  return null;
 }
-function ConversationGroupList({
-  groups,
-  standalone,
-  ...groupProps
-}) {
-  if (!shouldVirtualizeConversationGroups(groups.length)) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: groups.map((group) => /* @__PURE__ */ jsxRuntimeExports.jsx(ConversationGroup, { group, standalone, ...groupProps }, group.id)) });
+function firstClientPid(logs) {
+  for (const log of logs) {
+    const clientPid = log.clientPid;
+    if (clientPid !== null && clientPid !== void 0) return clientPid;
+  }
+  return null;
+}
+function firstClientProjectFolder(logs) {
+  for (const log of logs) {
+    const projectFolder = log.clientProjectFolder;
+    if (projectFolder !== null && projectFolder !== void 0 && projectFolder !== "") {
+      return projectFolder;
+    }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(VirtualizedConversationGroupList, { groups, standalone, ...groupProps });
+  return null;
+}
+function groupClient(group) {
+  return detectClientApp({
+    userAgent: firstUserAgent(group.logs),
+    conversationId: group.conversationId,
+    clientProjectFolder: firstClientProjectFolder(group.logs)
+  });
 }
-function VirtualizedConversationGroupList({
+function fallbackClientLabel(userAgent) {
+  if (userAgent === null || userAgent === "") return "Unknown IDE";
+  const firstToken = userAgent.split(/[ /;]/)[0] ?? "";
+  if (firstToken === "") return "Unknown IDE";
+  return firstToken;
+}
+function clientLabel(client, userAgent) {
+  const knownLabel = clientAppLabel(client);
+  if (knownLabel !== null) return knownLabel;
+  return fallbackClientLabel(userAgent);
+}
+function bucketKey(value) {
+  if (value === null || value === "") return "unknown";
+  return String(value);
+}
+function ideKey(client, userAgent, projectFolder) {
+  if (client !== "unknown") return client;
+  return `unknown:${bucketKey(userAgent)}:${bucketKey(projectFolder)}`;
+}
+function processKey(clientPid, projectFolder) {
+  return `${bucketKey(clientPid)}:${bucketKey(projectFolder)}`;
+}
+function sortLogsByTimestamp(logs) {
+  return [...logs].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+}
+function firstTimestamp(logs) {
+  return sortLogsByTimestamp(logs)[0]?.timestamp ?? "";
+}
+function sortByFirstLogTime(items) {
+  return [...items].sort((a, b) => firstTimestamp(a.logs).localeCompare(firstTimestamp(b.logs)));
+}
+function buildConversationHierarchy(groups) {
+  const ideGroups = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const userAgent = firstUserAgent(group.logs);
+    const projectFolder = firstClientProjectFolder(group.logs);
+    const client = groupClient(group);
+    const currentIdeKey = ideKey(client, userAgent, projectFolder);
+    let ideGroup = ideGroups.get(currentIdeKey);
+    if (ideGroup === void 0) {
+      ideGroup = {
+        id: currentIdeKey,
+        client,
+        label: clientLabel(client, userAgent),
+        userAgent,
+        processes: /* @__PURE__ */ new Map(),
+        logs: []
+      };
+      ideGroups.set(currentIdeKey, ideGroup);
+    }
+    ideGroup.logs.push(...group.logs);
+    const clientPid = firstClientPid(group.logs);
+    const currentProcessKey = `${currentIdeKey}:${processKey(clientPid, projectFolder)}`;
+    let processGroup = ideGroup.processes.get(currentProcessKey);
+    if (processGroup === void 0) {
+      processGroup = {
+        id: currentProcessKey,
+        clientPid,
+        clientProjectFolder: projectFolder,
+        sessions: [],
+        logs: []
+      };
+      ideGroup.processes.set(currentProcessKey, processGroup);
+    }
+    processGroup.sessions.push(group);
+    processGroup.logs.push(...group.logs);
+  }
+  const hierarchy = [];
+  for (const ideGroup of ideGroups.values()) {
+    const processes = sortByFirstLogTime(
+      [...ideGroup.processes.values()].map((processGroup) => ({
+        id: processGroup.id,
+        clientPid: processGroup.clientPid,
+        clientProjectFolder: processGroup.clientProjectFolder,
+        sessions: sortByFirstLogTime(processGroup.sessions),
+        logs: sortLogsByTimestamp(processGroup.logs)
+      }))
+    );
+    hierarchy.push({
+      id: ideGroup.id,
+      client: ideGroup.client,
+      label: ideGroup.label,
+      userAgent: ideGroup.userAgent,
+      processes,
+      logs: sortLogsByTimestamp(ideGroup.logs)
+    });
+  }
+  return sortByFirstLogTime(hierarchy);
+}
+function formatTokenCount(count) {
+  if (count <= 0) return "0";
+  return formatTokens(count);
+}
+function tokenTotals(logs) {
+  let inputTokens = 0;
+  let outputTokens = 0;
+  for (const log of logs) {
+    if (log.inputTokens !== null && log.inputTokens !== void 0) inputTokens += log.inputTokens;
+    if (log.outputTokens !== null && log.outputTokens !== void 0) {
+      outputTokens += log.outputTokens;
+    }
+  }
+  return { inputTokens, outputTokens };
+}
+function countSessions(processes) {
+  let sessions = 0;
+  for (const processGroup of processes) {
+    sessions += processGroup.sessions.length;
+  }
+  return sessions;
+}
+function shortProjectPath(projectFolder) {
+  if (projectFolder === null || projectFolder === "") return null;
+  const parts = projectFolder.replaceAll("\\", "/").split("/").filter((part) => part !== "");
+  const leaf = parts[parts.length - 1];
+  if (leaf === void 0) return projectFolder;
+  const parent = parts[parts.length - 2];
+  if (parent === void 0) return leaf;
+  return `${parent}/${leaf}`;
+}
+function SummaryChip({
+  label,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "span",
+    {
+      className: cn(
+        "border border-border bg-muted/40 inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-white/35", children: label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums text-slate-100", children: value })
+      ]
+    }
+  );
+}
+function ConversationGroupList({
   groups,
-  standalone,
   ...groupProps
 }) {
-  const [expandedByGroupId, setExpandedByGroupId] = reactExports.useState(
-    () => /* @__PURE__ */ new Map()
+  const hierarchy = reactExports.useMemo(() => buildConversationHierarchy(groups), [groups]);
+  const [collapsedIdeIds, setCollapsedIdeIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
+  const [collapsedProcessIds, setCollapsedProcessIds] = reactExports.useState(
+    () => /* @__PURE__ */ new Set()
   );
-  const virtualizer = useWindowVirtualizer({
-    count: groups.length,
-    estimateSize: () => ESTIMATED_GROUP_HEIGHT,
-    overscan: VIRTUAL_OVERSCAN,
-    getItemKey: (index) => groups[index]?.id ?? index
-  });
-  const setGroupExpanded = reactExports.useCallback((groupId, expanded) => {
-    setExpandedByGroupId((previous) => {
-      const next = new Map(previous);
-      if (expanded) {
-        next.set(groupId, true);
+  const toggleIde = reactExports.useCallback((id) => {
+    setCollapsedIdeIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) {
+        next.delete(id);
       } else {
-        next.delete(groupId);
+        next.add(id);
       }
       return next;
     });
   }, []);
-  const indexByLogId = reactExports.useMemo(() => {
-    const result = /* @__PURE__ */ new Map();
-    for (let index = 0; index < groups.length; index++) {
-      const group = groups[index];
-      if (group === void 0) continue;
-      for (const log of group.logs) {
-        result.set(log.id, index);
+  const toggleProcess = reactExports.useCallback((id) => {
+    setCollapsedProcessIds((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
       }
-    }
-    return result;
-  }, [groups]);
-  reactExports.useEffect(() => {
-    const handleLogFocusRequest = (event) => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      const index = indexByLogId.get(request.logId);
-      if (index === void 0) return;
-      const group = groups[index];
-      if (group === void 0) return;
-      setGroupExpanded(group.id, true);
-      virtualizer.scrollToIndex(index, { align: "center" });
-    };
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [groups, indexByLogId, setGroupExpanded, virtualizer]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: hierarchy.map((ideGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    IdeGroupSection,
     {
-      className: "relative w-full",
-      style: { height: `${virtualizer.getTotalSize()}px` },
-      "data-virtualized-conversation-list": "true",
-      children: virtualizer.getVirtualItems().map((virtualItem) => {
-        const group = groups[virtualItem.index];
-        if (group === void 0) return null;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
+      group: ideGroup,
+      collapsed: collapsedIdeIds.has(ideGroup.id),
+      collapsedProcessIds,
+      onToggleIde: () => toggleIde(ideGroup.id),
+      onToggleProcess: toggleProcess,
+      conversationProps: groupProps
+    },
+    ideGroup.id
+  )) });
+}
+function IdeGroupSection({
+  group,
+  collapsed,
+  collapsedProcessIds,
+  onToggleIde,
+  onToggleProcess,
+  conversationProps
+}) {
+  const totals = tokenTotals(group.logs);
+  const sessionCount = countSessions(group.processes);
+  const logCount = group.logs.length;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "section",
+    {
+      className: cn("border border-border bg-card shadow-sm relative isolate rounded-[8px]"),
+      "data-ide-group": group.id,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
           {
-            "data-index": virtualItem.index,
-            ref: virtualizer.measureElement,
-            className: "absolute left-0 top-0 w-full",
-            style: { transform: `translateY(${virtualItem.start}px)` },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ConversationGroup,
-              {
-                group,
-                standalone,
-                expanded: expandedByGroupId.get(group.id) ?? false,
-                onExpandedChange: (expanded) => setGroupExpanded(group.id, expanded),
-                ...groupProps
-              }
-            )
+            type: "button",
+            className: "flex w-full min-w-0 items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-white/[0.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/45",
+            onClick: onToggleIde,
+            "aria-expanded": !collapsed,
+            children: [
+              group.client === "unknown" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-border bg-muted/40 inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Monitor, { className: "size-5" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: group.client, className: "size-10 rounded-[8px] text-cyan-100" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      className: "truncate text-sm font-semibold text-slate-50",
+                      title: group.userAgent ?? group.label,
+                      children: group.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded border border-cyan-200/15 bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75", children: "IDE" })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                    group.processes.length,
+                    " process",
+                    group.processes.length !== 1 ? "es" : ""
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                    sessionCount,
+                    " session",
+                    sessionCount !== 1 ? "s" : ""
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                    logCount,
+                    " log",
+                    logCount !== 1 ? "s" : ""
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 items-center gap-2 md:flex", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+            ]
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3 border-t border-white/10 px-3 pb-3 pt-3 sm:px-4", children: group.processes.map((processGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProcessGroupSection,
+          {
+            group: processGroup,
+            collapsed: collapsedProcessIds.has(processGroup.id),
+            onToggle: () => onToggleProcess(processGroup.id),
+            conversationProps
           },
-          virtualItem.key
-        );
-      })
+          processGroup.id
+        )) })
+      ]
     }
   );
 }
+function ProcessGroupSection({
+  group,
+  collapsed,
+  onToggle,
+  conversationProps
+}) {
+  const totals = tokenTotals(group.logs);
+  const projectLabel = shortProjectPath(group.clientProjectFolder);
+  const sessionCount = group.sessions.length;
+  const logCount = group.logs.length;
+  const processLabel = group.clientPid !== null && group.clientPid !== void 0 ? `PID ${group.clientPid}` : "process";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative pl-5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute bottom-0 left-2 top-0 w-px bg-white/12", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm overflow-hidden rounded-[8px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-white/[0.035] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/40",
+          onClick: onToggle,
+          "aria-expanded": !collapsed,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-border bg-muted/40 inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cpu, { className: "size-4" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs font-semibold tabular-nums text-slate-100", children: processLabel }),
+                projectLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground",
+                    title: group.clientProjectFolder ?? projectLabel,
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { className: "size-3 shrink-0" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-mono", children: projectLabel })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                  sessionCount,
+                  " session",
+                  sessionCount !== 1 ? "s" : ""
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                  logCount,
+                  " log",
+                  logCount !== 1 ? "s" : ""
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 items-center gap-2 md:flex", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+          ]
+        }
+      ),
+      !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border-t border-white/10 p-2 sm:p-3", children: group.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ConversationGroup,
+        {
+          group: session,
+          ...conversationProps,
+          showClientIdentity: false,
+          showLogClientMetadata: false,
+          showProcessMetadata: false
+        },
+        session.id
+      )) })
+    ] })
+  ] });
+}
 const NAV_ATTR = "data-nav-id";
 const NAV_ACTION_ATTR = "data-nav-action";
 function findNavItems(container) {
@@ -11874,13 +12182,13 @@ function slateStatusClass(status) {
     case "watch":
       return "border-amber-300/35 bg-amber-400/10 text-amber-100";
     case "clear":
-      return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+      return "border-slate-300/20 bg-slate-300/[0.08] text-slate-100";
   }
 }
 function SessionOpeningSlate({ stats }) {
   if (stats.requests === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 rounded-md border border-border bg-[#0c0d0f] shadow-[0_14px_50px_rgba(0,0,0,0.25)]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 border-b border-border/70 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm mb-4 rounded-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 border-b border-white/10 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Clapperboard, { className: "size-3.5 text-cyan-300" }),
         "Opening Slate"
@@ -11888,7 +12196,7 @@ function SessionOpeningSlate({ stats }) {
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 min-w-0 truncate font-mono text-sm font-semibold text-foreground", children: stats.modelLabel }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 truncate font-mono text-[11px] text-muted-foreground", children: stats.timeRange ?? "Timeline pending" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-b border-border/70 px-4 py-3 md:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-b border-white/10 px-4 py-3 md:border-b-0", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Status" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
@@ -11901,11 +12209,11 @@ function SessionOpeningSlate({ stats }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-b border-border/70 px-4 py-3 md:border-b-0 md:border-r", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-b border-white/10 px-4 py-3 md:border-b-0 md:border-r", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Requests" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 font-mono text-xl font-semibold text-foreground", children: stats.requests })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-border/70 px-4 py-3 md:border-r", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-white/10 px-4 py-3 md:border-r", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[10px] uppercase text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Siren, { className: "size-3 text-red-300" }),
         "Failure"
@@ -11989,7 +12297,7 @@ function sessionRiskBarClass(risk) {
     case "unknown":
       return "bg-muted-foreground/50";
     case "ok":
-      return "bg-emerald-400";
+      return "bg-cyan-300";
   }
 }
 function formatContextWindow(summary) {
@@ -12031,7 +12339,7 @@ function evidenceChipClass(value) {
     return "border-amber-300/35 bg-amber-400/10 text-amber-100";
   }
   if (normalized.includes("pass") || normalized.includes("complete") || normalized.includes("accept")) {
-    return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+    return "border-cyan-300/25 bg-cyan-400/10 text-cyan-100";
   }
   return "border-border/70 bg-background/70 text-muted-foreground";
 }
@@ -12064,13 +12372,13 @@ function SessionMembershipPanel({
   ].filter(
     (value) => value !== null && value.label.length > 0 && value.value.length > 0
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 overflow-hidden rounded-md border border-border bg-[#0c0d0f] text-xs", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm mb-3 rounded-[8px] text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         type: "button",
         onClick: () => setOpen((value) => !value),
-        className: "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/30",
+        className: "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-white/[0.04]",
         "aria-expanded": open,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -12099,7 +12407,7 @@ function SessionMembershipPanel({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border-t border-border/70 px-3 py-2", children: memberships.map((membership) => {
+    open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border-t border-white/10 px-3 py-2", children: memberships.map((membership) => {
       const member = membership.member;
       const metadataRows = getMemberMetadataRows(member);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
@@ -12131,7 +12439,7 @@ function SessionMembershipPanel({
         metadataRows.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1 sm:grid-cols-2 xl:grid-cols-3", children: metadataRows.map((row) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: "min-w-0 rounded border border-border/60 px-2 py-1",
+            className: "border border-border bg-muted/40 min-w-0 rounded-md px-2 py-1",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-[10px] text-muted-foreground", children: row.key }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -12175,7 +12483,7 @@ function LogPaginationButton({
       type: "button",
       onClick,
       disabled,
-      className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45",
+      className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45",
       title,
       children: [
         icon,
@@ -12196,7 +12504,7 @@ function LogPaginationBar({
     {
       className: cn(
         "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
-        embedded ? "border-t border-border/70 pt-2" : "mb-3 rounded-md border border-border bg-muted/10 px-2"
+        embedded ? "border-t border-white/10 pt-2" : "border border-border bg-card shadow-sm mb-3 rounded-[8px] px-2"
       ),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1", children: [
@@ -12264,7 +12572,7 @@ function sessionRiskClass(risk) {
     case "unknown":
       return "text-muted-foreground";
     case "ok":
-      return "text-emerald-300";
+      return "text-cyan-200";
   }
 }
 function sessionHealthClass(level) {
@@ -12274,7 +12582,7 @@ function sessionHealthClass(level) {
     case "optimizable":
       return "border-amber-400/25 bg-amber-400/8 text-amber-100";
     case "ok":
-      return "border-emerald-400/25 bg-emerald-400/8 text-emerald-100";
+      return "border-cyan-300/25 bg-cyan-400/8 text-cyan-100";
   }
 }
 function sessionHealthLabel(level) {
@@ -12325,14 +12633,14 @@ function CopyableCommand({ command }) {
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [command]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-center gap-2 bg-muted rounded-md px-3 py-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-blue-500 font-mono text-sm m-0", children: command }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "m-0 overflow-x-auto font-mono text-sm text-cyan-200", children: command }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         type: "button",
         onClick: handleCopy,
-        className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 cursor-pointer",
+        className: "shrink-0 cursor-pointer text-muted-foreground transition-colors hover:text-foreground",
         "aria-label": "Copy command",
         children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
       }
@@ -12341,14 +12649,30 @@ function CopyableCommand({ command }) {
 }
 function McpReadyBadge() {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex h-7 items-center gap-2 rounded-md border border-cyan-400/30 bg-cyan-500/10 px-2.5 font-mono text-[11px] font-medium text-cyan-300 shadow-[0_0_16px_rgba(34,211,238,0.08)]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-1.5 rounded-full bg-emerald-300 shadow-[0_0_8px_rgba(110,231,183,0.8)]" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "border border-border bg-muted/40 inline-flex h-7 items-center gap-2 rounded-md px-2.5 font-mono text-[11px] font-medium text-cyan-200", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-1.5 rounded-full bg-cyan-200 shadow-[0_0_8px_rgba(125,211,252,0.75)]" }),
       "MCP Ready",
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden text-cyan-200/70 sm:inline", children: "/api/mcp" })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { sideOffset: 8, className: "max-w-[320px] text-left leading-relaxed", children: "Coding agents can inspect logs, replay requests, test providers, and debug sessions through MCP at /api/mcp." })
   ] }) });
 }
+function SidebarPanel({
+  label,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: cn("border border-border bg-card shadow-sm rounded-[8px]", className), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-white/10 px-3 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-white/40", children: label }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-3", children })
+  ] });
+}
+function SidebarMetric({ label, value }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 min-w-0 rounded-md px-2 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate font-mono text-lg font-semibold leading-6 text-slate-100", children: value }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-white/35", children: label })
+  ] });
+}
 const CRAB_VARIANT_COLORS = [
   "text-amber-500",
   "text-rose-500",
@@ -12394,7 +12718,7 @@ function BrandHeader({
   crabEntrancePhase
 }) {
   if (compact) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pb-3", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm rounded-[8px] p-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CrabFamily, { compact: true, entrancePhase: crabEntrancePhase }),
@@ -12449,7 +12773,7 @@ function SessionContextLogButton({ label, logId }) {
     {
       type: "button",
       onClick: () => openLogContext(logId),
-      className: "inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+      className: "inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground",
       title: `Open Context for ${formatLogReference(logId)}`,
       children: [
         label,
@@ -12481,7 +12805,7 @@ function SessionContextProgressBar({
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "span",
         {
-          className: "relative block h-2.5 overflow-hidden rounded-full border border-border/70 bg-background transition-colors group-hover:border-foreground/30",
+          className: "relative block h-2.5 overflow-hidden rounded-full border border-white/10 bg-black/25 transition-colors group-hover:border-cyan-200/35",
           role: "meter",
           "aria-label": ariaLabel,
           "aria-valuemin": 0,
@@ -12518,7 +12842,7 @@ function SessionModelContextRow({ summary }) {
   const openLatestContext = () => {
     openLogContext(summary.latest.logId);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-x-4 gap-y-2 border-t border-border/60 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-x-4 gap-y-2 border-t border-white/10 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -12576,7 +12900,7 @@ function SessionModelContextRow({ summary }) {
               {
                 className: cn(
                   "size-3",
-                  trend !== null && trend > 0 ? "text-amber-300" : "text-emerald-300"
+                  trend !== null && trend > 0 ? "text-amber-300" : "text-cyan-300"
                 )
               }
             ),
@@ -12615,7 +12939,7 @@ function SessionContextSummaryPanel({
   summary
 }) {
   if (summary.models.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 border-t border-border/70 pt-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 border-t border-white/10 pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[11px] font-semibold uppercase tracking-normal text-muted-foreground", children: "Session Context" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono text-[10px] text-muted-foreground", children: [
@@ -12663,13 +12987,13 @@ function SessionContextBar({
       setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 rounded-md border border-border bg-muted/15 px-3 py-2 text-xs", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm mb-3 rounded-[8px] px-3 py-2 text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       showBackLink && /* @__PURE__ */ jsxRuntimeExports.jsx(
         "a",
         {
           href: "/",
-          className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
           "aria-label": "Back to all sessions",
           title: "Back to all sessions",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "size-3.5" })
@@ -12707,7 +13031,7 @@ function SessionContextBar({
         {
           type: "button",
           onClick: () => setDetailsOpen((value) => !value),
-          className: "inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background/60 px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground",
           "aria-expanded": detailsOpen,
           title: detailsOpen ? "Hide context details" : "Show context details",
           children: [
@@ -12721,7 +13045,7 @@ function SessionContextBar({
         {
           type: "button",
           onClick: handleCopyLink,
-          className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground",
           "aria-label": copied ? "Copied session link" : "Copy session link",
           title: copied ? "Copied session link" : "Copy session link",
           children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
@@ -12741,6 +13065,7 @@ function ProxyViewer({
   onModelChange,
   onClearAll,
   onClearGroup,
+  onNotify,
   onImportLogs,
   viewMode,
   captureMode,
@@ -12794,13 +13119,17 @@ function ProxyViewer({
       try {
         const result = await exportLogsAsZip(logs, mode);
         if (!result.ok) {
-          setExportError(result.message);
+          if (onNotify !== void 0) {
+            onNotify({ message: result.message, tone: "error" });
+          } else {
+            setExportError(result.message);
+          }
         }
       } finally {
         setExporting(null);
       }
     },
-    [logs]
+    [logs, onNotify]
   );
   const handleImportClick = reactExports.useCallback(() => {
     importInputRef.current?.click();
@@ -12815,16 +13144,24 @@ function ProxyViewer({
       setImportStatus(null);
       void onImportLogs(file).then((result) => {
         const skipped = result.skipped > 0 ? `, skipped ${String(result.skipped)}` : "";
-        setImportStatus(
-          `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`
-        );
+        const message = `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`;
+        if (onNotify !== void 0) {
+          onNotify({ message, tone: "success" });
+        } else {
+          setImportStatus(message);
+        }
       }).catch((err) => {
-        setImportError(err instanceof Error ? err.message : "Failed to import logs");
+        const message = err instanceof Error ? err.message : "Failed to import logs";
+        if (onNotify !== void 0) {
+          onNotify({ message, tone: "error" });
+        } else {
+          setImportError(message);
+        }
       }).finally(() => {
         setImporting(false);
       });
     },
-    [onImportLogs]
+    [onImportLogs, onNotify]
   );
   reactExports.useEffect(() => {
     setComparePair(null);
@@ -12869,38 +13206,38 @@ function ProxyViewer({
     },
     [comparisonPredecessors]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-h-screen w-full bg-[#070809] text-foreground", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-background min-h-screen w-full text-foreground", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid min-h-screen w-full grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "border-b border-border bg-[#090a0c] lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "bg-background border-b lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(BrandHeader, { compact: true, crabEntrancePhase }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-2 border-y border-border/70 py-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-lg font-semibold text-foreground", children: logs.length }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Requests" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-lg font-semibold text-foreground", children: formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Input" })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-lg font-semibold text-foreground", children: formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Output" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-semibold uppercase tracking-normal text-muted-foreground", children: "Workspace" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border bg-[#0c0d0f] px-3 py-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: "font-mono text-xs font-semibold text-purple-300",
-                title: activeScopeLabel,
-                children: activeScopeLabel
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: isPinnedSessionPage ? "Session workspace" : "Live workspace" })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Session", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarMetric, { label: "Requests", value: logs.length }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SidebarMetric,
+            {
+              label: "Input",
+              value: formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SidebarMetric,
+            {
+              label: "Output",
+              value: formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Workspace", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 rounded-md px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "truncate font-mono text-xs font-semibold text-cyan-100",
+              title: activeScopeLabel,
+              children: activeScopeLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: isPinnedSessionPage ? "Session workspace" : "Live workspace" })
+        ] }) }),
         hasSessionContext && sessionContextScope !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
           SessionContextBar,
           {
@@ -12914,26 +13251,25 @@ function ProxyViewer({
           }
         ),
         hasSessionContext && pinnedSessionId !== void 0 && sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-semibold uppercase tracking-normal text-muted-foreground", children: "Filters" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Filters", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
           !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-9 w-full text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
               sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-9 w-full text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
               models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
             ] })
           ] })
-        ] })
+        ] }) })
       ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 z-30 border-b border-border bg-[#08090b]/95 px-4 py-3 shadow-[0_12px_40px_rgba(0,0,0,0.24)] backdrop-blur lg:px-5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-background/95 shadow-sm sticky top-0 z-30 border-b px-4 py-3 lg:px-5", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-[180px] flex-1", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Logs" }),
@@ -12956,7 +13292,7 @@ function ProxyViewer({
                   type: "button",
                   onClick: handleImportClick,
                   disabled: importing,
-                  className: "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                  className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
                   title: "Import Agent Inspector export",
                   children: importing ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Importing..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3.5" }),
@@ -12973,7 +13309,7 @@ function ProxyViewer({
                   void handleExport("redacted");
                 },
                 disabled: exporting !== null,
-                className: "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
                 title: "Export redacted logs as JSON ZIP",
                 children: exporting === "redacted" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3.5" }),
@@ -12989,7 +13325,7 @@ function ProxyViewer({
                   void handleExport("raw");
                 },
                 disabled: exporting !== null,
-                className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
                 title: "Export raw logs without redaction",
                 children: exporting === "raw" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(FileBraces, { className: "size-3.5" }),
@@ -13002,7 +13338,7 @@ function ProxyViewer({
               {
                 type: "button",
                 onClick: onClearAll,
-                className: "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground",
                 title: "Clear all logs",
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
@@ -13012,13 +13348,13 @@ function ProxyViewer({
             )
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination, embedded: true }),
-          exportError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: exportError }),
-          importError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: importError }),
-          importStatus !== null && importError === null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200", children: importStatus })
+          onNotify === void 0 && exportError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: exportError }),
+          onNotify === void 0 && importError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: importError }),
+          onNotify === void 0 && importStatus !== null && importError === null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-cyan-400/25 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100", children: importStatus })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-4 lg:px-5", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SessionOpeningSlate, { stats: slateStats }),
-          logs.length === 0 ? selectedSession !== "__all__" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8", children: [
+          logs.length === 0 ? selectedSession !== "__all__" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: isLoading ? "Loading session data..." : "Session not found" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all", children: truncateSessionId(selectedSession) }),
             sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }) }),
@@ -13035,7 +13371,7 @@ function ProxyViewer({
                 }
               )
             ] })
-          ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-2xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8", children: [
+          ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No requests captured yet." }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" }),
@@ -13060,8 +13396,7 @@ function ProxyViewer({
                     onCompareWithPrevious: handleCompareWithPrevious,
                     comparisonPredecessors,
                     onClearGroup,
-                    standalone: groups.length === 1,
-                    hasPinnedSessionContext: hasSessionContext,
+                    defaultExpanded: groups.length === 1,
                     timeDisplayFormat
                   }
                 ) }),
@@ -13084,6 +13419,79 @@ function ProxyViewer({
     ) })
   ] });
 }
+const TRANSIENT_TOAST_AUTO_DISMISS_MS = 3e3;
+function createNextTransientToast(previous, input) {
+  return {
+    id: (previous?.id ?? 0) + 1,
+    message: input.message,
+    tone: input.tone ?? "error"
+  };
+}
+function useTransientToast() {
+  const [notice, setNotice] = reactExports.useState(null);
+  const showToast = reactExports.useCallback((input) => {
+    setNotice((previous) => createNextTransientToast(previous, input));
+  }, []);
+  const dismissToast = reactExports.useCallback(() => {
+    setNotice(null);
+  }, []);
+  reactExports.useEffect(() => {
+    if (notice === null) return void 0;
+    const timeout = window.setTimeout(() => {
+      setNotice(null);
+    }, TRANSIENT_TOAST_AUTO_DISMISS_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [notice]);
+  return { notice, showToast, dismissToast };
+}
+function TransientToast({
+  notice,
+  onDismiss
+}) {
+  if (notice === null) return null;
+  const isError = notice.tone === "error";
+  const Icon2 = isError ? TriangleAlert : CircleCheck;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      "aria-atomic": "true",
+      "aria-live": "polite",
+      className: "pointer-events-none fixed top-4 right-4 z-[100] w-[min(calc(100vw-2rem),26rem)]",
+      role: "status",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: cn(
+            "pointer-events-auto flex items-start gap-2 rounded-md border px-3 py-2 text-sm shadow-[0_18px_50px_rgba(0,0,0,0.45)] backdrop-blur",
+            isError ? "border-red-400/30 bg-[#16090b]/95 text-red-100" : "border-cyan-300/25 bg-[#071318]/95 text-cyan-100"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Icon2,
+              {
+                className: cn("mt-0.5 size-4 shrink-0", isError ? "text-red-300" : "text-cyan-200")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1 break-words leading-5", children: notice.message }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-current/70 transition-colors hover:bg-white/10 hover:text-current",
+                "aria-label": "Dismiss notification",
+                onClick: onDismiss,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
+              }
+            )
+          ]
+        },
+        notice.id
+      )
+    }
+  );
+}
 const SSEUpdateSchema = union([
   object({
     type: literal("init"),
@@ -13196,7 +13604,7 @@ function ProxyViewerContainer({
   const [allLogs, setAllLogs] = reactExports.useState([]);
   const [selectedSession, setSelectedSession] = reactExports.useState(initialSessionId ?? "__all__");
   const [selectedModel, setSelectedModel] = reactExports.useState("__all__");
-  const [error, setError] = reactExports.useState(null);
+  const { notice, showToast, dismissToast } = useTransientToast();
   const [streamInitialized, setStreamInitialized] = reactExports.useState(initialSessionId === void 0);
   const [logPage, setLogPage] = reactExports.useState(null);
   const [sessionPageLoading, setSessionPageLoading] = reactExports.useState(initialSessionId !== void 0);
@@ -13209,6 +13617,12 @@ function ProxyViewerContainer({
   const logIndexRef = reactExports.useRef(/* @__PURE__ */ new Map());
   const pendingUpdatesRef = reactExports.useRef([]);
   const flushTimerRef = reactExports.useRef(null);
+  const showErrorToast = reactExports.useCallback(
+    (message) => {
+      showToast({ message, tone: "error" });
+    },
+    [showToast]
+  );
   const logs = reactExports.useMemo(
     () => filterLogs(allLogs, selectedSession, selectedModel),
     [allLogs, selectedSession, selectedModel]
@@ -13264,7 +13678,7 @@ function ProxyViewerContainer({
         const parsed = 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;
@@ -13278,16 +13692,16 @@ 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) {
@@ -13295,14 +13709,14 @@ function ProxyViewerContainer({
       }
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
     };
-  }, [initialSessionId, scheduleUpdate]);
+  }, [dismissToast, initialSessionId, scheduleUpdate, showErrorToast]);
   const loadSessionPage = reactExports.useCallback(
     (request) => {
       if (initialSessionId === void 0) return;
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
-      setError(null);
+      dismissToast();
       void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema).then((page) => {
         if (sessionPageRequestIdRef.current !== requestId) return;
         const nextLogs = page.logs;
@@ -13311,16 +13725,16 @@ function ProxyViewerContainer({
         setLogPage(page);
         setSelectedSession(initialSessionId);
         setSessionPageLoading(false);
-        setError(null);
+        dismissToast();
       }).catch((err) => {
         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]
   );
   reactExports.useEffect(() => {
     if (initialSessionId === void 0) {
@@ -13426,64 +13840,70 @@ 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 = reactExports.useCallback((ids) => {
-    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 = reactExports.useCallback(
+    (ids) => {
+      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 = reactExports.useCallback(async (file) => {
-    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);
-    setError(null);
-    return result;
-  }, []);
+      })();
+    },
+    [dismissToast, showErrorToast]
+  );
+  const handleImportLogs = reactExports.useCallback(
+    async (file) => {
+      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]
+  );
   const { strip, captureMode, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
   const viewMode = captureMode;
   const loadOldestPage = reactExports.useCallback(() => {
@@ -13529,7 +13949,7 @@ function ProxyViewerContainer({
     sessionPageLoading
   ]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-md text-sm z-50", children: error }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TransientToast, { notice, onDismiss: dismissToast }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingBanner, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ProxyViewer,
@@ -13543,6 +13963,7 @@ function ProxyViewerContainer({
         onModelChange: setSelectedModel,
         onClearAll: handleClearAll,
         onClearGroup: handleClearGroup,
+        onNotify: showToast,
         onImportLogs: initialSessionId === void 0 ? handleImportLogs : void 0,
         isLoading: initialSessionId === void 0 ? !streamInitialized : sessionPageLoading,
         pagination,