@tonyclaw/agent-inspector 2.1.14 → 2.1.16

package/.output/server/_ssr/{ProxyViewerContainer-CDfEE_w-.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-4bdm6Mt2.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 User, q as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, W as Wrench, r as TriangleAlert, B as Brain, s as Bell, t as Clock3, u as ShieldAlert, v as EyeOff, w as Eye, x as RotateCw, y as Pencil, z as CircleX, H as ShieldCheck, J as Save, K as FileSearch, N as CircleCheck, O as CloudUpload, Q as Minus, V as CircleCheckBig, Y as CircleQuestionMark, _ as Server, $ as Lock, a0 as Wifi, a1 as WifiOff, a2 as OctagonAlert, a3 as Radio, a4 as Globe, a5 as FileTerminal, a6 as ChevronsUp, a7 as ChevronsDown, a8 as FileDiff, a9 as History, aa as RotateCcw, ab as Search, ac as GitCompareArrows, ad as ArrowUp, ae as ArrowDown, af as Ellipsis, ag as CodeXml, ah as Blocks, ai as MousePointerClick, aj as FileText, ak as Rows3, al 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";
@@ -771,6 +771,111 @@ function ConfirmDialog({
     ] })
   ] }) });
 }
+const CLIENT_LABELS = {
+  codex: "Codex",
+  opencode: "OpenCode",
+  "mimo-code": "MiMo Code",
+  "claude-code": "Claude Code"
+};
+function normalize(value) {
+  return value?.toLowerCase() ?? "";
+}
+function matchesAny(value, candidates) {
+  for (const candidate of candidates) {
+    if (value.includes(candidate)) return true;
+  }
+  return false;
+}
+function detectClientApp(input) {
+  const haystack = [
+    normalize(input.userAgent),
+    normalize(input.conversationId),
+    normalize(input.clientProjectFolder)
+  ].join(" ");
+  if (matchesAny(haystack, ["mimocode", "mimo-code", "mimo code"])) return "mimo-code";
+  if (matchesAny(haystack, ["opencode", "open-code", "open code"])) return "opencode";
+  if (matchesAny(haystack, ["claude-code", "claude code", "claudecode"])) return "claude-code";
+  if (matchesAny(haystack, ["codex desktop", "codex-cli", "openai-codex", "codex"])) {
+    return "codex";
+  }
+  return "unknown";
+}
+function clientAppLabel(client) {
+  switch (client) {
+    case "codex":
+    case "opencode":
+    case "mimo-code":
+    case "claude-code":
+      return CLIENT_LABELS[client];
+    case "unknown":
+      return null;
+  }
+}
+function CodexMark() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", className: "size-full", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2.2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M14.8 8.6a4.8 4.8 0 1 0 0 6.8",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeWidth: "2.2"
+      }
+    )
+  ] });
+}
+function OpenCodeMark() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", className: "size-full", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7 4h10v16H7z", fill: "none", stroke: "currentColor", strokeWidth: "2.2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10 8h4M10 12h4M10 16h2", stroke: "currentColor", strokeLinecap: "round" })
+  ] });
+}
+function MiMoCodeMark() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", className: "size-full", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M5 18V6h3.2l3.8 6.1L15.8 6H19v12h-3V11.3l-3.1 5h-1.8L8 11.3V18z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function ClaudeCodeMark() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", className: "size-full", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M21 10.95h3v3.1h-3v3.03h-1.49V20H18v-2.92h-1.49V20H15v-2.92H9V20H7.49v-2.92H6V20H4.49v-2.92H3v-3.03H0v-3.1h3V5h18v5.95zM6 10.95h1.49V8.1H6v2.85zm10.51 0H18V8.1h-1.49v2.85z"
+    }
+  ) });
+}
+function ClientLogo({
+  client,
+  className
+}) {
+  const label = clientAppLabel(client);
+  if (label === null) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "span",
+    {
+      className: cn(
+        "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md p-1 text-cyan-100",
+        className
+      ),
+      "aria-label": label,
+      title: label,
+      children: [
+        client === "codex" && /* @__PURE__ */ jsxRuntimeExports.jsx(CodexMark, {}),
+        client === "opencode" && /* @__PURE__ */ jsxRuntimeExports.jsx(OpenCodeMark, {}),
+        client === "mimo-code" && /* @__PURE__ */ jsxRuntimeExports.jsx(MiMoCodeMark, {}),
+        client === "claude-code" && /* @__PURE__ */ jsxRuntimeExports.jsx(ClaudeCodeMark, {})
+      ]
+    }
+  );
+}
 const AnthropicLogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='0%206.603%201192.672%201193.397'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m233.96%20800.215%20234.684-131.678%203.947-11.436-3.947-6.363h-11.436l-39.221-2.416-134.094-3.624-116.296-4.832-112.67-6.04-28.35-6.04-26.577-35.035%202.738-17.477%2023.84-16.027%2034.147%202.98%2075.463%205.155%20113.235%207.812%2082.147%204.832%20121.692%2012.644h19.329l2.738-7.812-6.604-4.832-5.154-4.832-117.182-79.41-126.845-83.92-66.443-48.321-35.92-24.484-18.12-22.953-7.813-50.093%2032.618-35.92%2043.812%202.98%2011.195%202.98%2044.375%2034.147%2094.792%2073.37%20123.786%2091.167%2018.12%2015.06%207.249-5.154.886-3.624-8.135-13.61-67.329-121.692-71.838-123.785-31.974-51.302-8.456-30.765c-2.98-12.645-5.154-23.275-5.154-36.242l37.127-50.416%2020.537-6.604%2049.53%206.604%2020.86%2018.121%2030.765%2070.39%2049.852%20110.818%2077.315%20150.684%2022.631%2044.698%2012.08%2041.396%204.51%2012.645h7.813v-7.248l6.362-84.886%2011.759-104.215%2011.436-134.094%203.946-37.772%2018.685-45.262%2037.127-24.482%2028.994%2013.852%2023.839%2034.148-3.303%2022.067-14.174%2092.134-27.785%20144.323-18.121%2096.644h10.55l12.08-12.08%2048.887-64.913%2082.147-102.685%2036.242-40.752%2042.282-45.02%2027.14-21.423h51.303l37.772%2056.135-16.913%2057.986-52.832%2067.007-43.812%2056.779-62.82%2084.563-39.22%2067.651%203.623%205.396%209.343-.886%20141.906-30.201%2076.671-13.852%2091.49-15.705%2041.396%2019.329%204.51%2019.65-16.269%2040.189-97.852%2024.16-114.764%2022.954-170.9%2040.43-2.093%201.53%202.416%202.98%2076.993%207.248%2032.94%201.771h80.617l150.12%2011.195%2039.222%2025.933%2023.517%2031.732-3.946%2024.16-60.403%2030.766-81.503-19.33-190.228-45.26-65.235-16.27h-9.02v5.397l54.362%2053.154%2099.624%2089.96%20124.752%20115.973%206.362%2028.671-16.027%2022.63-16.912-2.415-109.611-82.47-42.282-37.127-95.758-80.618h-6.363v8.456l22.067%2032.296%20116.537%20175.167%206.04%2053.719-8.456%2017.476-30.201%2010.55-33.181-6.04-68.215-95.758-70.39-107.84-56.778-96.644-6.926%203.947-33.503%20360.886-15.705%2018.443-36.243%2013.852-30.201-22.953-16.027-37.127%2016.027-73.37%2019.329-95.758%2015.704-76.107%2014.175-94.55%208.456-31.41-.563-2.094-6.927.886-71.275%2097.852-108.402%20146.497-85.772%2091.812-20.537%208.134-35.597-18.443%203.301-32.94%2019.893-29.315%20118.712-151.007%2071.597-93.583%2046.228-54.04-.322-7.813h-2.738l-315.302%20204.725-56.135%207.248-24.16-22.63%202.98-37.128%2011.435-12.08%2094.792-65.236-.322.323z'%20fill='%23d97757'/%3e%3c/svg%3e";
 const OpenAILogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='-1%20-.1%20949.1%20959.8'%20width='2474'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m925.8%20456.3c10.4%2023.2%2017%2048%2019.7%2073.3%202.6%2025.3%201.3%2050.9-4.1%2075.8-5.3%2024.9-14.5%2048.8-27.3%2070.8-8.4%2014.7-18.3%2028.5-29.7%2041.2-11.3%2012.6-23.9%2024-37.6%2034-13.8%2010-28.5%2018.4-44.1%2025.3-15.5%206.8-31.7%2012-48.3%2015.4-7.8%2024.2-19.4%2047.1-34.4%2067.7-14.9%2020.6-33%2038.7-53.6%2053.6-20.6%2015-43.4%2026.6-67.6%2034.4-24.2%207.9-49.5%2011.8-75%2011.8-16.9.1-33.9-1.7-50.5-5.1-16.5-3.5-32.7-8.8-48.2-15.7s-30.2-15.5-43.9-25.5c-13.6-10-26.2-21.5-37.4-34.2-25%205.4-50.6%206.7-75.9%204.1-25.3-2.7-50.1-9.3-73.4-19.7-23.2-10.3-44.7-24.3-63.6-41.4s-35-37.1-47.7-59.1c-8.5-14.7-15.5-30.2-20.8-46.3s-8.8-32.7-10.6-49.6c-1.8-16.8-1.7-33.8.1-50.7%201.8-16.8%205.5-33.4%2010.8-49.5-17-18.9-31-40.4-41.4-63.6-10.3-23.3-17-48-19.6-73.3-2.7-25.3-1.3-50.9%204-75.8s14.5-48.8%2027.3-70.8c8.4-14.7%2018.3-28.6%2029.6-41.2s24-24%2037.7-34%2028.5-18.5%2044-25.3c15.6-6.9%2031.8-12%2048.4-15.4%207.8-24.3%2019.4-47.1%2034.3-67.7%2015-20.6%2033.1-38.7%2053.7-53.7%2020.6-14.9%2043.4-26.5%2067.6-34.4%2024.2-7.8%2049.5-11.8%2075-11.7%2016.9-.1%2033.9%201.6%2050.5%205.1s32.8%208.7%2048.3%2015.6c15.5%207%2030.2%2015.5%2043.9%2025.5%2013.7%2010.1%2026.3%2021.5%2037.5%2034.2%2024.9-5.3%2050.5-6.6%2075.8-4s50%209.3%2073.3%2019.6c23.2%2010.4%2044.7%2024.3%2063.6%2041.4%2018.9%2017%2035%2036.9%2047.7%2059%208.5%2014.6%2015.5%2030.1%2020.8%2046.3%205.3%2016.1%208.9%2032.7%2010.6%2049.6%201.8%2016.9%201.8%2033.9-.1%2050.8-1.8%2016.9-5.5%2033.5-10.8%2049.6%2017.1%2018.9%2031%2040.3%2041.4%2063.6zm-333.2%20426.9c21.8-9%2041.6-22.3%2058.3-39s30-36.5%2039-58.4c9-21.8%2013.7-45.2%2013.7-68.8v-223q-.1-.3-.2-.7-.1-.3-.3-.6-.2-.3-.5-.5-.3-.3-.6-.4l-80.7-46.6v269.4c0%202.7-.4%205.5-1.1%208.1-.7%202.7-1.7%205.2-3.1%207.6s-3%204.6-5%206.5a32.1%2032.1%200%200%201%20-6.5%205l-191.1%20110.3c-1.6%201-4.3%202.4-5.7%203.2%207.9%206.7%2016.5%2012.6%2025.5%2017.8%209.1%205.2%2018.5%209.6%2028.3%2013.2%209.8%203.5%2019.9%206.2%2030.1%208%2010.3%201.8%2020.7%202.7%2031.1%202.7%2023.6%200%2047-4.7%2068.8-13.8zm-455.1-151.4c11.9%2020.5%2027.6%2038.3%2046.3%2052.7%2018.8%2014.4%2040.1%2024.9%2062.9%2031s46.6%207.7%2070%204.6%2045.9-10.7%2066.4-22.5l193.2-111.5.5-.5q.2-.2.3-.6.2-.3.3-.6v-94l-233.2%20134.9c-2.4%201.4-4.9%202.4-7.5%203.2-2.7.7-5.4%201-8.2%201-2.7%200-5.4-.3-8.1-1-2.6-.8-5.2-1.8-7.6-3.2l-191.1-110.4c-1.7-1-4.2-2.5-5.6-3.4-1.8%2010.3-2.7%2020.7-2.7%2031.1s1%2020.8%202.8%2031.1c1.8%2010.2%204.6%2020.3%208.1%2030.1%203.6%209.8%208%2019.2%2013.2%2028.2zm-50.2-417c-11.8%2020.5-19.4%2043.1-22.5%2066.5s-1.5%2047.1%204.6%2070c6.1%2022.8%2016.6%2044.1%2031%2062.9%2014.4%2018.7%2032.3%2034.4%2052.7%2046.2l193.1%20111.6q.3.1.7.2h.7q.4%200%20.7-.2.3-.1.6-.3l81-46.8-233.2-134.6c-2.3-1.4-4.5-3.1-6.5-5a32.1%2032.1%200%200%201%20-5-6.5c-1.3-2.4-2.4-4.9-3.1-7.6-.7-2.6-1.1-5.3-1-8.1v-227.1c-9.8%203.6-19.3%208-28.3%2013.2-9%205.3-17.5%2011.3-25.5%2018-7.9%206.7-15.3%2014.1-22%2022.1-6.7%207.9-12.6%2016.5-17.8%2025.5zm663.3%20154.4c2.4%201.4%204.6%203%206.6%205%201.9%201.9%203.6%204.1%205%206.5%201.3%202.4%202.4%205%203.1%207.6.6%202.7%201%205.4.9%208.2v227.1c32.1-11.8%2060.1-32.5%2080.8-59.7%2020.8-27.2%2033.3-59.7%2036.2-93.7s-3.9-68.2-19.7-98.5-39.9-55.5-69.5-72.5l-193.1-111.6q-.3-.1-.7-.2h-.7q-.3.1-.7.2-.3.1-.6.3l-80.6%2046.6%20233.2%20134.7zm80.5-121h-.1v.1zm-.1-.1c5.8-33.6%201.9-68.2-11.3-99.7-13.1-31.5-35-58.6-63-78.2-28-19.5-61-30.7-95.1-32.2-34.2-1.4-68%206.9-97.6%2023.9l-193.1%20111.5q-.3.2-.5.5l-.4.6q-.1.3-.2.7-.1.3-.1.7v93.2l233.2-134.7c2.4-1.4%205-2.4%207.6-3.2%202.7-.7%205.4-1%208.1-1%202.8%200%205.5.3%208.2%201%202.6.8%205.1%201.8%207.5%203.2l191.1%20110.4c1.7%201%204.2%202.4%205.6%203.3zm-505.3-103.2c0-2.7.4-5.4%201.1-8.1.7-2.6%201.7-5.2%203.1-7.6%201.4-2.3%203-4.5%205-6.5%201.9-1.9%204.1-3.6%206.5-4.9l191.1-110.3c1.8-1.1%204.3-2.5%205.7-3.2-26.2-21.9-58.2-35.9-92.1-40.2-33.9-4.4-68.3%201-99.2%2015.5-31%2014.5-57.2%2037.6-75.5%2066.4-18.3%2028.9-28%2062.3-28%2096.5v223q.1.4.2.7.1.3.3.6.2.3.5.6.2.2.6.4l80.7%2046.6zm43.8%20294.7%20103.9%2060%20103.9-60v-119.9l-103.8-60-103.9%2060z'/%3e%3c/svg%3e";
 const DeepSeekLogoSvg = "data:image/svg+xml,%3csvg%20fill='none'%20height='1320'%20viewBox='3.771%206.973%2023.993%2017.652'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m27.501%208.469c-.252-.123-.36.111-.508.23-.05.04-.093.09-.135.135-.368.395-.797.652-1.358.621-.821-.045-1.521.213-2.14.842-.132-.776-.57-1.238-1.235-1.535-.349-.155-.701-.309-.944-.645-.171-.238-.217-.504-.303-.765-.054-.159-.108-.32-.29-.348-.197-.031-.274.135-.352.273-.31.567-.43%201.192-.419%201.825.028%201.421.628%202.554%201.82%203.36.136.093.17.186.128.321-.081.278-.178.547-.264.824-.054.178-.135.217-.324.14a5.448%205.448%200%200%201%20-1.719-1.169c-.848-.82-1.614-1.726-2.57-2.435-.225-.166-.449-.32-.681-.467-.976-.95.128-1.729.383-1.82.267-.096.093-.428-.77-.424s-1.653.293-2.659.677a2.782%202.782%200%200%201%20-.46.135%209.554%209.554%200%200%200%20-2.853-.1c-1.866.21-3.356%201.092-4.452%202.6-1.315%201.81-1.625%203.87-1.246%206.018.399%202.261%201.552%204.136%203.326%205.601%201.837%201.518%203.955%202.262%206.37%202.12%201.466-.085%203.1-.282%204.942-1.842.465.23.952.322%201.762.392.623.059%201.223-.031%201.687-.127.728-.154.677-.828.414-.953-2.132-.994-1.665-.59-2.09-.916%201.084-1.285%202.717-2.619%203.356-6.94.05-.343.007-.558%200-.837-.004-.168.034-.235.228-.254a4.084%204.084%200%200%200%201.529-.47c1.382-.757%201.938-1.997%202.07-3.485.02-.227-.004-.463-.243-.582zm-12.041%2013.391c-2.067-1.627-3.07-2.162-3.483-2.138-.387.021-.318.465-.233.754.089.285.205.482.368.732.113.166.19.414-.112.598-.666.414-1.823-.139-1.878-.166-1.347-.793-2.473-1.842-3.267-3.276-.765-1.38-1.21-2.861-1.284-4.441-.02-.383.093-.518.472-.586a4.692%204.692%200%200%201%201.514-.04c2.109.31%203.905%201.255%205.41%202.749.86.853%201.51%201.871%202.18%202.865.711%201.057%201.478%202.063%202.454%202.887.343.289.619.51.881.672-.792.088-2.117.107-3.022-.61zm.99-6.38a.304.304%200%201%201%20.609%200c0%20.17-.136.304-.306.304a.3.3%200%200%201%20-.303-.305zm3.077%201.581c-.197.08-.394.15-.584.159a1.246%201.246%200%200%201%20-.79-.252c-.27-.227-.463-.354-.546-.752a1.752%201.752%200%200%201%20.016-.582c.07-.324-.008-.531-.235-.72-.187-.155-.422-.196-.682-.196a.551.551%200%200%201%20-.252-.078c-.108-.055-.197-.19-.112-.356.027-.053.159-.183.19-.207.352-.201.758-.135%201.134.016.349.142.611.404.99.773.388.448.457.573.678.906.174.264.333.534.441.842.066.192-.02.35-.248.448z'%20fill='%234d6bfe'/%3e%3c/svg%3e";
@@ -785,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;
@@ -893,6 +1002,38 @@ function TooltipContent({
     }
   ) });
 }
+const MAX_VISIBLE_LOGOS = 3;
+const ROW_CHEVRON_SLOT_CLASS = "flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground";
+function ProviderLogoStack({
+  items,
+  ariaLabel,
+  className
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("flex h-8 w-12 shrink-0 items-center", className), "aria-hidden": "true" });
+  }
+  const visibleItems = items.slice(0, MAX_VISIBLE_LOGOS);
+  const overflowCount = items.length - visibleItems.length;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: cn("flex h-8 w-12 shrink-0 items-center", className), "aria-label": ariaLabel, children: [
+    visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: cn(
+            "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" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: item.tooltip })
+    ] }, `${item.provider}-${String(index)}`)),
+    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
+    ] })
+  ] }) });
+}
 function forEachCodePoint(text, visit) {
   for (const ch of Array.from(text)) {
     visit(ch);
@@ -1283,6 +1424,8 @@ function ConversationHeader({
   userAgent,
   clientPid,
   clientProjectFolder,
+  showClientIdentity = true,
+  showProcessMetadata = true,
   timeDisplayFormat,
   onClear
 }) {
@@ -1299,6 +1442,17 @@ function ConversationHeader({
     },
     [conversationId]
   );
+  const providerLogoItems = providers?.map(({ provider, models }) => ({
+    provider,
+    tooltip: models.length === 1 ? models[0] ?? provider : models.join(", ")
+  })) ?? [];
+  const clientApp = detectClientApp({ userAgent, conversationId, clientProjectFolder });
+  const detectedClientLabel = clientAppLabel(clientApp);
+  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",
     {
@@ -1307,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,
@@ -1322,19 +1476,19 @@ function ConversationHeader({
         }
       },
       children: [
-        expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" }),
-        conversationId.startsWith("PID:") || conversationId.includes("|") ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogoStack, { items: providerLogoItems, ariaLabel: "Models used in this session" }),
+        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",
             {
@@ -1347,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 ",
@@ -1364,28 +1518,17 @@ function ConversationHeader({
             }
           )
         ] }),
-        userAgent !== null && userAgent !== void 0 && userAgent !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
             className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
-            title: userAgent,
+            title: clientTooltip ?? clientDisplayLabel,
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "size-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", children: userAgent })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", children: clientDisplayLabel })
             ]
           }
         ),
-        providers !== void 0 && providers.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "span",
-          {
-            className: "flex items-center gap-0.5 shrink-0",
-            "aria-label": "Models used in this session",
-            children: providers.map(({ provider, models }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider, className: "size-4" }) }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: models.length === 1 ? models[0] : models.join(", ") })
-            ] }, provider))
-          }
-        ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatTimestampRange(startTime, endTime, timeDisplayFormat) })
@@ -1419,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" })
           }
         ),
@@ -1430,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,
           {
@@ -1453,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";
@@ -1519,6 +1670,33 @@ function readLogFocusRequest(event) {
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+function normalizeAnthropicStopReason(value) {
+  switch (value) {
+    case "end_turn":
+    case "tool_use":
+      return value;
+    default:
+      return null;
+  }
+}
+function normalizeOpenAIFinishReason(value) {
+  switch (value) {
+    case "stop":
+    case "length":
+      return value;
+    default:
+      return null;
+  }
+}
+function isResponsesLengthLimitReason(value) {
+  switch (value) {
+    case "max_output_tokens":
+    case "max_tokens":
+      return true;
+    default:
+      return false;
+  }
+}
 function extractStopReason(log) {
   if (log.responseText === null) return null;
   try {
@@ -1528,13 +1706,14 @@ function extractStopReason(log) {
     }
     if (!isRecord(json)) return null;
     if (typeof json.stop_reason === "string") {
-      if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
-        return json.stop_reason;
-      }
-      return null;
+      return normalizeAnthropicStopReason(json.stop_reason);
     }
-    if (Array.isArray(json.choices) && json.choices.length > 0 && isRecord(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
-      return "stop";
+    if (Array.isArray(json.choices)) {
+      for (const choice of json.choices) {
+        if (!isRecord(choice) || typeof choice.finish_reason !== "string") continue;
+        const reason = normalizeOpenAIFinishReason(choice.finish_reason);
+        if (reason !== null) return reason;
+      }
     }
     if (Array.isArray(json.output)) {
       for (const item of json.output) {
@@ -1546,13 +1725,19 @@ function extractStopReason(log) {
         return "stop";
       }
     }
+    if (json.status === "incomplete" && isRecord(json.incomplete_details)) {
+      const reason = json.incomplete_details.reason;
+      if (typeof reason === "string" && isResponsesLengthLimitReason(reason)) {
+        return "length";
+      }
+    }
     return null;
   } catch {
     return null;
   }
 }
 function isTurnBoundary(stopReason) {
-  return stopReason === "end_turn" || stopReason === "stop";
+  return stopReason === "end_turn" || stopReason === "stop" || stopReason === "length";
 }
 function SvgShell({
   className,
@@ -2099,27 +2284,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-ceW5VxMo.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-CO-Ti5sg.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-V0s_eEbR.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-J1VxC0In.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-f1ccwR9d.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-DBH-F3rq.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-BIRrqG4H.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-DLFwV7Hd.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-V3JFjCgX.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-BywmuND0.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-Dcnm0Ivf.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-DlQu0N1x.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-Dcnm0Ivf.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;
@@ -2543,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`;
@@ -2598,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)
@@ -2607,6 +2788,7 @@ function CacheTrendIndicator({ trend }) {
 }
 const LogEntryHeader = reactExports.memo(function({
   log,
+  displayNumber,
   messageCount = null,
   toolCount = null,
   expanded,
@@ -2616,6 +2798,7 @@ const LogEntryHeader = reactExports.memo(function({
   tabActions,
   onReplay,
   slowResponseThresholdSeconds = 0,
+  showClientMetadata = true,
   timeDisplayFormat
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -2641,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,
@@ -2653,34 +2836,23 @@ 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.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: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-1.5 rounded-full", statusCue.dot), "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[9px] font-semibold uppercase tracking-normal text-current/65", children: "Shot" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-semibold tabular-nums", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs font-semibold tabular-nums", title: `Log ID ${String(log.id)}`, children: [
                 "#",
-                log.id
+                displayNumber
               ] })
             ]
           }
         ),
-        /* @__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) })
         ] }),
@@ -2749,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 })
           ] }) }),
@@ -2767,7 +2939,7 @@ const LogEntryHeader = reactExports.memo(function({
                 ),
                 children: [
                   "IN ",
-                  log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"
+                  log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"
                 ]
               }
             ),
@@ -2781,7 +2953,7 @@ const LogEntryHeader = reactExports.memo(function({
                 ),
                 children: [
                   "OUT ",
-                  log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"
+                  log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"
                 ]
               }
             )
@@ -2789,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)
           ] })
@@ -2820,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: [
@@ -2903,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 })
@@ -2927,7 +3099,14 @@ const LogEntryHeader = reactExports.memo(function({
             ]
           }
         ),
-        expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
+        /* @__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" })
+          }
+        )
       ]
     }
   ) });
@@ -3059,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",
@@ -3094,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..." }),
@@ -3134,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" }),
@@ -3178,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: [
@@ -3188,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,
         {
@@ -3206,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",
@@ -3412,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",
@@ -3463,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
@@ -3471,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",
@@ -3526,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
           }
@@ -3541,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 })
       ]
     },
@@ -3565,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,
@@ -3599,12 +3778,14 @@ const HeadersDiffContent = reactExports.memo(function({
 });
 const LogEntry = reactExports.memo(function({
   log,
+  displayNumber,
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   cacheTrend = null,
-  onCompareWithPrevious
+  onCompareWithPrevious,
+  showClientMetadata = true
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [replayOpen, setReplayOpen] = reactExports.useState(false);
@@ -3901,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(
@@ -3910,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"
             }
@@ -3926,12 +4107,14 @@ const LogEntry = reactExports.memo(function({
             LogEntryHeader,
             {
               log: displayLog,
+              displayNumber,
               messageCount: requestAnalysis.messageCount,
               toolCount: requestAnalysis.toolCount,
               expanded,
               onToggle: handleToggleExpanded,
               cacheTrend,
               slowResponseThresholdSeconds,
+              showClientMetadata,
               timeDisplayFormat,
               activeTab,
               tabActions,
@@ -3943,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"
                   }
                 ),
@@ -3959,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" }),
@@ -4134,9 +4317,30 @@ const LogEntry = reactExports.memo(function({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyReplayDialog, { log: displayLog, open: replayOpen, onOpenChange: setReplayOpen }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      LazyReplayDialog,
+      {
+        log: displayLog,
+        displayNumber,
+        open: replayOpen,
+        onOpenChange: setReplayOpen
+      }
+    ) })
   ] });
 });
+function boundaryTitle(stopReason) {
+  switch (stopReason) {
+    case "end_turn":
+      return "End of Turn (Anthropic)";
+    case "stop":
+      return "End of Turn (OpenAI)";
+    case "length":
+      return "End of Turn (length limit)";
+    case "tool_use":
+    case null:
+      return "End of Turn";
+  }
+}
 function ThreadConnector({
   stopReason,
   isPending,
@@ -4147,7 +4351,7 @@ function ThreadConnector({
   collapsible = false,
   onToggle
 }) {
-  const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
   const Crab = reactExports.useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
@@ -4173,34 +4377,27 @@ 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",
+    ) }) : isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: boundaryTitle(stopReason), ...interactiveProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Crab,
       {
-        title: stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)",
-        ...interactiveProps,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Crab,
-          {
-            className: cn(
-              "size-3.5 text-amber-400",
-              "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]"
-            )
-          }
+        className: cn(
+          "size-3.5 text-amber-400",
+          "animate-crab-settle",
+          "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]"
         )
       }
-    ) : isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Start of turn", ...interactiveProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) }) : isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Start of turn", ...interactiveProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       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" }) }),
@@ -4263,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;
 }
@@ -4273,8 +4467,10 @@ function buildTurnGroups(logs) {
   const groups = [];
   let entries = [];
   let turnIndex = 0;
-  for (const log of logs) {
-    entries.push({ log, stopReason: extractStopReason(log) });
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === void 0) continue;
+    entries.push({ log, stopReason: extractStopReason(log), sessionLogNumber: index + 1 });
     const current = entries[entries.length - 1];
     if (current !== void 0 && isTurnBoundary(current.stopReason)) {
       groups.push({ entries, turnIndex });
@@ -4493,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;
@@ -4564,17 +4761,9 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
       maxElapsed
     };
   }, [entries, lastIdx]);
-  const uniqueProviders = reactExports.useMemo(() => {
-    const seen = /* @__PURE__ */ new Set();
-    for (const e of entries) {
-      const p = detectProvider(e.log.model);
-      if (p !== "unknown") seen.add(p);
-    }
-    return [...seen];
-  }, [entries]);
   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();
@@ -4619,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"
       ),
@@ -4649,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();
@@ -4665,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)]"
                         )
                       }
                     )
@@ -4678,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();
@@ -4707,21 +4896,31 @@ 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: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400/80 font-mono font-semibold tabular-nums shrink-0", children: [
-                      "#",
-                      entries[0]?.log.id ?? "?",
-                      " ~ #",
-                      entries[lastIdx]?.log.id ?? "?"
-                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: ROW_CHEVRON_SLOT_CLASS, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "span",
+                      {
+                        className: "text-blue-400/80 font-mono font-semibold tabular-nums shrink-0",
+                        title: `Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
+                          entries[lastIdx]?.log.id ?? "?"
+                        )}`,
+                        children: [
+                          "#",
+                          entries[0]?.sessionLogNumber ?? "?",
+                          " ~ #",
+                          entries[lastIdx]?.sessionLogNumber ?? "?"
+                        ]
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
                       entries.length,
                       " request",
                       entries.length > 1 ? "s" : ""
                     ] }),
-                    uniqueProviders.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-center gap-0.5 shrink-0", children: uniqueProviders.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: p, className: "size-4" }, p)) }),
                     aggregate.maxElapsed !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                         "span",
@@ -4755,8 +4954,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                         ] })
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" })
                   ]
                 }
               )
@@ -4783,16 +4981,18 @@ 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,
                 {
                   log,
+                  displayNumber: entry.sessionLogNumber,
                   viewMode,
                   strip,
                   slowResponseThresholdSeconds,
                   timeDisplayFormat,
                   cacheTrend: cacheTrends?.get(log.id) ?? null,
+                  showClientMetadata: showLogClientMetadata,
                   onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
                 }
               ),
@@ -4806,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;
 }
@@ -4834,7 +5034,8 @@ function renderTurnGroup(turnGroup, props, pendingFocusRequest) {
       onCompareWithPrevious: props.onCompareWithPrevious,
       comparisonPredecessors: props.comparisonPredecessors,
       turnIndex: turnGroup.turnIndex,
-      pendingFocusRequest
+      pendingFocusRequest,
+      showLogClientMetadata: props.showLogClientMetadata
     },
     turnGroup.turnIndex
   );
@@ -4853,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]);
@@ -4966,6 +5167,18 @@ function firstToolLog(logs) {
   }
   return null;
 }
+function buildDisplayNumberByLogId$1(logs) {
+  const result = /* @__PURE__ */ new Map();
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === void 0) continue;
+    result.set(log.id, index + 1);
+  }
+  return result;
+}
+function displayLogNumber(logId, displayNumberByLogId) {
+  return String(displayNumberByLogId.get(logId) ?? logId);
+}
 function buildTraceInsights(input) {
   const insights = [
     {
@@ -4980,7 +5193,7 @@ function buildTraceInsights(input) {
     insights.push({
       kind: "tool",
       title: `${String(input.summary.toolCallCount)} tool call${input.summary.toolCallCount === 1 ? "" : "s"}`,
-      detail: `First tool evidence at #${String(toolLog.id)}`,
+      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
       logId: toolLog.id
     });
   }
@@ -4989,7 +5202,7 @@ function buildTraceInsights(input) {
     insights.push({
       kind: "failure",
       title: `Failure #${String(failure.responseStatus)}`,
-      detail: `First failed request is #${String(failure.id)}`,
+      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
       logId: failure.id
     });
   }
@@ -4998,7 +5211,7 @@ function buildTraceInsights(input) {
     insights.push({
       kind: "slow",
       title: `Slowest ${formatElapsed$1(input.summary.maxElapsedMs)}`,
-      detail: `Max latency observed at #${String(slowest.id)}`,
+      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
       logId: slowest.id
     });
   }
@@ -5086,12 +5299,13 @@ function previewText(value, maxLength) {
   if (normalized.length <= maxLength) return normalized;
   return `${normalized.slice(0, maxLength - 3)}...`;
 }
-function logRangeLabel(logIds) {
+function logRangeLabel(logIds, displayNumberByLogId) {
   const first = logIds[0];
   const last = logIds[logIds.length - 1];
   if (first === void 0) return "No evidence logs";
-  if (last === void 0 || first === last) return `#${String(first)}`;
-  return `#${String(first)}-#${String(last)}`;
+  const firstLabel = displayLogNumber(first, displayNumberByLogId);
+  if (last === void 0 || first === last) return `#${firstLabel}`;
+  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
 }
 function tagsToText(tags) {
   return tags.join(", ");
@@ -5104,7 +5318,8 @@ function CandidateItem({
   isPromoting,
   isUpdating,
   onPromoteCandidate,
-  onUpdateCandidate
+  onUpdateCandidate,
+  displayNumberByLogId
 }) {
   const [editing, setEditing] = reactExports.useState(false);
   const [draftType, setDraftType] = reactExports.useState(candidate.type);
@@ -5147,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",
@@ -5160,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" }),
@@ -5176,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"
           }
         )
@@ -5187,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"
         }
       ),
@@ -5197,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"
         }
       ),
@@ -5273,7 +5488,7 @@ function CandidateItem({
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(FileSearch, { className: "size-3" }),
-        logRangeLabel(candidate.logIds)
+        logRangeLabel(candidate.logIds, displayNumberByLogId)
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldCheck, { className: "size-3" }),
@@ -5289,23 +5504,27 @@ function CandidateItem({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [
-      candidate.logIds.map((logId) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "a",
-        {
-          href: `#${getLogAnchor(logId)}`,
-          onClick: (event) => {
-            event.preventDefault();
-            jumpToLog(logId);
+      candidate.logIds.map((logId) => {
+        const displayNumber = displayLogNumber(logId, displayNumberByLogId);
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            href: `#${getLogAnchor(logId)}`,
+            onClick: (event) => {
+              event.preventDefault();
+              jumpToLog(logId);
+            },
+            className: "rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "aria-label": `Jump to evidence log ${displayNumber}`,
+            title: `Log ID ${String(logId)}`,
+            children: [
+              "#",
+              displayNumber
+            ]
           },
-          className: "rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "aria-label": `Jump to evidence log ${String(logId)}`,
-          children: [
-            "#",
-            logId
-          ]
-        },
-        logId
-      )),
+          logId
+        );
+      }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
       canEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(
         Button,
@@ -5345,7 +5564,8 @@ function CandidateList({
   promotingCandidateIds,
   updatingCandidateIds,
   onPromoteCandidate,
-  onUpdateCandidate
+  onUpdateCandidate,
+  displayNumberByLogId
 }) {
   if (candidates.length === 0) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1.5", children: candidates.map((candidate) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5355,7 +5575,8 @@ function CandidateList({
       isPromoting: promotingCandidateIds.has(candidate.id),
       isUpdating: updatingCandidateIds.has(candidate.id),
       onPromoteCandidate,
-      onUpdateCandidate
+      onUpdateCandidate,
+      displayNumberByLogId
     },
     candidate.id
   )) });
@@ -5384,9 +5605,10 @@ function AgentTraceSummary({
     () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
     [candidates.length, logs, slowResponseThresholdSeconds]
   );
+  const displayNumberByLogId = reactExports.useMemo(() => buildDisplayNumberByLogId$1(logs), [logs]);
   const traceInsights = reactExports.useMemo(
-    () => buildTraceInsights({ logs, scopeId, summary, candidates }),
-    [candidates, logs, scopeId, summary]
+    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
+    [candidates, displayNumberByLogId, logs, scopeId, summary]
   );
   const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
   const timeRange = reactExports.useMemo(
@@ -5524,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" }),
@@ -5614,7 +5836,8 @@ function AgentTraceSummary({
         promotingCandidateIds,
         updatingCandidateIds,
         onPromoteCandidate: promoteCandidate,
-        onUpdateCandidate: updateCandidate
+        onUpdateCandidate: updateCandidate,
+        displayNumberByLogId
       }
     )
   ] });
@@ -5671,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) => {
@@ -5689,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;
@@ -5710,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,
@@ -5728,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
         }
       ),
@@ -5753,7 +5982,8 @@ const ConversationGroup = reactExports.memo(function({
           timeDisplayFormat,
           cacheTrends,
           onCompareWithPrevious,
-          comparisonPredecessors
+          comparisonPredecessors,
+          showLogClientMetadata
         }
       )
     ] })
@@ -5958,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",
@@ -6318,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: [
@@ -6614,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;
@@ -6776,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: [
@@ -7215,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: [
@@ -7233,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",
           {
@@ -7380,28 +7626,31 @@ function LatestLogsPreview({ logs }) {
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-hidden rounded-md border border-border", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-border bg-muted/30 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Latest logs" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-border", children: visibleLogs.map((log) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-muted-foreground", children: [
-            "#",
-            log.id
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 truncate", children: [
-            displayText(log.model),
-            " · ",
-            log.apiFormat,
-            " · ",
-            log.path
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground", children: formatMs(log.firstChunkMs) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground", children: formatMs(log.latencyMs) })
-        ]
-      },
-      log.id
-    )) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "divide-y divide-border", children: visibleLogs.map((log) => {
+      const displayNumber = log.sessionLogNumber ?? log.id;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-muted-foreground", title: `Log ID ${String(log.id)}`, children: [
+              "#",
+              displayNumber
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 truncate", children: [
+              displayText(log.model),
+              " · ",
+              log.apiFormat,
+              " · ",
+              log.path
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground", children: formatMs(log.firstChunkMs) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground", children: formatMs(log.latencyMs) })
+          ]
+        },
+        log.id
+      );
+    }) })
   ] });
 }
 function MemberMetadata({ entries }) {
@@ -7987,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: [
@@ -8287,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",
@@ -8411,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 })
   ] });
@@ -8724,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)" })
           ]
@@ -8746,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." })
     ] }),
@@ -8811,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: [
@@ -8836,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",
@@ -8844,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
@@ -8966,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",
@@ -8996,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",
           {
@@ -9008,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 }),
@@ -9020,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",
             {
@@ -9032,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(
@@ -9049,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",
             {
@@ -9061,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(
@@ -9092,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" })
     ] })
@@ -9503,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,
         {
@@ -9518,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: [
@@ -9585,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: [
@@ -9608,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",
           {
@@ -9716,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: [
@@ -9850,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(),
@@ -9865,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(),
@@ -9873,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(),
@@ -9894,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 }),
@@ -10396,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 /* @__PURE__ */ jsxRuntimeExports.jsx(VirtualizedConversationGroupList, { groups, standalone, ...groupProps });
+  return null;
+}
+function firstClientProjectFolder(logs) {
+  for (const log of logs) {
+    const projectFolder = log.clientProjectFolder;
+    if (projectFolder !== null && projectFolder !== void 0 && projectFolder !== "") {
+      return projectFolder;
+    }
+  }
+  return null;
+}
+function groupClient(group) {
+  return detectClientApp({
+    userAgent: firstUserAgent(group.logs),
+    conversationId: group.conversationId,
+    clientProjectFolder: firstClientProjectFolder(group.logs)
+  });
+}
+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 VirtualizedConversationGroupList({
+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) {
@@ -11556,6 +12078,20 @@ function truncateSessionId(id) {
   if (id.length <= 30) return id;
   return `${id.slice(0, 12)}...${id.slice(-12)}`;
 }
+function buildDisplayNumberByLogId(groups) {
+  const result = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    for (let index = 0; index < group.logs.length; index += 1) {
+      const log = group.logs[index];
+      if (log === void 0) continue;
+      result.set(log.id, index + 1);
+    }
+  }
+  return result;
+}
+function displayNumberForLog(log, displayNumberByLogId) {
+  return displayNumberByLogId.get(log.id) ?? log.id;
+}
 function shouldShowRawExport(captureMode) {
   return captureMode === "full";
 }
@@ -11646,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"
@@ -11660,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",
@@ -11673,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"
@@ -11761,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) {
@@ -11803,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";
 }
@@ -11836,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: [
@@ -11871,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: [
@@ -11903,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(
@@ -11947,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,
@@ -11968,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: [
@@ -12036,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) {
@@ -12046,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) {
@@ -12097,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" })
       }
@@ -12113,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",
@@ -12166,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 }),
@@ -12221,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,
@@ -12253,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,
@@ -12290,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(
@@ -12348,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"
                 )
               }
             ),
@@ -12387,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: [
@@ -12435,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" })
@@ -12479,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: [
@@ -12493,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" })
@@ -12513,6 +13065,7 @@ function ProxyViewer({
   onModelChange,
   onClearAll,
   onClearGroup,
+  onNotify,
   onImportLogs,
   viewMode,
   captureMode,
@@ -12566,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();
@@ -12587,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);
@@ -12605,6 +13170,7 @@ function ProxyViewer({
     setComparePair(null);
   }, []);
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
+  const displayNumberByLogId = reactExports.useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
   const sessionContextScope = reactExports.useMemo(
     () => resolveSessionContextScope({ pinnedSessionId, selectedSession, sessions, logs }),
     [logs, pinnedSessionId, selectedSession, sessions]
@@ -12640,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,
           {
@@ -12685,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" }),
@@ -12727,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" }),
@@ -12744,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" }),
@@ -12760,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" }),
@@ -12773,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" }),
@@ -12783,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 }) }),
@@ -12806,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>" }),
@@ -12831,8 +13396,7 @@ function ProxyViewer({
                     onCompareWithPrevious: handleCompareWithPrevious,
                     comparisonPredecessors,
                     onClearGroup,
-                    standalone: groups.length === 1,
-                    hasPinnedSessionContext: hasSessionContext,
+                    defaultExpanded: groups.length === 1,
                     timeDisplayFormat
                   }
                 ) }),
@@ -12843,9 +13407,91 @@ function ProxyViewer({
         ] })
       ] })
     ] }),
-    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyCompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare }) })
+    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      LazyCompareDrawer,
+      {
+        left: comparePair[0],
+        right: comparePair[1],
+        leftDisplayNumber: displayNumberForLog(comparePair[0], displayNumberByLogId),
+        rightDisplayNumber: displayNumberForLog(comparePair[1], displayNumberByLogId),
+        onClose: closeCompare
+      }
+    ) })
   ] });
 }
+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"),
@@ -12958,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);
@@ -12971,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]
@@ -13026,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;
@@ -13040,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) {
@@ -13057,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;
@@ -13073,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) {
@@ -13188,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(() => {
@@ -13291,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,
@@ -13305,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,