@tonyclaw/agent-inspector 3.0.4 → 3.0.6

package/.output/server/_ssr/{ProxyViewerContainer-CYmNmQK9.mjs → ProxyViewerContainer-Dp7Va9_T.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 DeleteInspectorGroupsResponseSchema, o as GroupEvidenceExportResultSchema, q as DeleteInspectorGroupResponseSchema, z as createPendingProviderTestResults, B as ProviderTestResultsSchema, E as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, F as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, u as maskApiKey, v as PATH_V1_MESSAGES, w as PATH_V1_CHAT_COMPLETIONS, x as PATH_V1_RESPONSES, r as providerHasContextMetadata, t as findProviderModelMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, H as resolveProviderContextWindow, j as getSessionPath, y as previewUpstreamUrl, K as KnowledgeCandidateSchema, J as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-CYjIsElo.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 DeleteInspectorGroupsResponseSchema, o as GroupEvidenceExportResultSchema, q as DeleteInspectorGroupResponseSchema, z as createPendingProviderTestResults, B as ProviderTestResultsSchema, E as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, F as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, u as PATH_V1_MESSAGES, v as PATH_V1_CHAT_COMPLETIONS, w as PATH_V1_RESPONSES, r as providerHasContextMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, H as resolveProviderContextWindow, j as getSessionPath, x as findProviderModelMetadata, y as previewUpstreamUrl, K as KnowledgeCandidateSchema, J as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-BJJ0VhsB.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 { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, R as RefreshCw, c as Trash2, S as Search, U as Upload, D as Download, F as FileBraces, 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, k as Flag, l as Siren, m as Timer, G as Gauge, L as LoaderCircle, n as Layers, o as Settings, M as Monitor, p as Scan, q as CircleAlert, r as Terminal, s as ArrowUpRight, t as ArrowDownRight, u as Cpu, v as FolderOpen, B as Bell, w as Clock3, x as ShieldAlert, E as EyeOff, y as Eye, z as ExternalLink, H as RotateCw, J as Clock, K as Pencil, N as MessageSquare, Z as Zap, W as Wrench, O as Brain, Q as Minus, V as CircleCheckBig, Y as CircleQuestionMark, _ as Server, $ as Lock, a0 as Wifi, a1 as WifiOff, a2 as CircleX, a3 as ShieldCheck, a4 as Save, a5 as FileSearch, a6 as CloudUpload, a7 as OctagonAlert, a8 as Radio, a9 as Globe, aa as FileTerminal, ab as ChevronsUp, ac as ChevronsDown, ad as FileDiff, ae as History, af as RotateCcw, ag as GitCompareArrows, ah as ArrowUp, ai as ArrowDown, aj as Ellipsis, ak as CodeXml, al as Blocks, am as MousePointerClick, an as FileText, ao as Rows3, ap as Columns2 } from "../_libs/lucide-react.mjs";
+import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, R as RefreshCw, c as Trash2, S as Search, U as Upload, D as Download, F as FileBraces, 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, k as Flag, l as Siren, m as Timer, G as Gauge, L as LoaderCircle, n as Layers, o as FlaskConical, p as Sparkles, q as Activity, B as Beaker, N as Network, r as Terminal, s as Settings, M as Monitor, t as Rocket, u as PackageCheck, v as Scan, w as CircleAlert, x as ArrowUpRight, y as ArrowDownRight, z as Cpu, E as FolderOpen, H as Bell, J as Clock3, K as ShieldAlert, O as EyeOff, Q as Eye, V as ExternalLink, W as Clock, Y as RotateCw, Z as Pencil, _ as MessageSquare, $ as Zap, a0 as Wrench, a1 as Brain, a2 as Minus, a3 as CircleCheckBig, a4 as CircleQuestionMark, a5 as Server, a6 as Lock, a7 as Wifi, a8 as WifiOff, a9 as CircleX, aa as ShieldCheck, ab as Save, ac as FileSearch, ad as CloudUpload, ae as OctagonAlert, af as Radio, ag as Globe, ah as FileTerminal, ai as ChevronsUp, aj as ChevronsDown, ak as FileDiff, al as History, am as RotateCcw, an as GitCompareArrows, ao as ArrowUp, ap as ArrowDown, aq as Ellipsis, ar as CodeXml, as as Blocks, at as MousePointerClick, au as FileText, av as Rows3, aw 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";
@@ -530,6 +530,8 @@ function normalizeAnthropicStopReason(value) {
     case "end_turn":
     case "tool_use":
       return value;
+    case "max_tokens":
+      return "length";
     default:
       return null;
   }
@@ -539,6 +541,8 @@ function normalizeOpenAIFinishReason(value) {
     case "stop":
     case "length":
       return value;
+    case "max_tokens":
+      return "length";
     default:
       return null;
   }
@@ -2302,27 +2306,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-DAYrKHKe.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-D6b6TZ-O.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-CdKvdXxk.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-D_KWQ1GY.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-BtmTUq7O.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-CPubXjMX.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-DuD_z5hd.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-CsTiNoOE.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-DpIV2wt_.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-Bgbzt23U.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-gcNJEB7y.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-10ciVGnc.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-gcNJEB7y.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-10ciVGnc.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -8361,6 +8365,119 @@ function ProviderTestCoverage({ provider }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "non-stream + stream" })
   ] });
 }
+function configuredFormatResults(provider, testResults) {
+  if (testResults === void 0) return [];
+  const results = [];
+  if (providerHasEndpoint(provider.anthropicBaseUrl)) {
+    results.push(testResults.anthropic);
+  }
+  if (providerHasEndpoint(provider.openaiBaseUrl)) {
+    results.push(testResults.openaiChat);
+  }
+  if (providerHasEndpoint(provider.openaiResponsesBaseUrl)) {
+    results.push(testResults.openaiResponses);
+  }
+  return results;
+}
+function summarizeTestResults(provider, testResults) {
+  const summary = { total: 0, passed: 0, failed: 0, testing: 0 };
+  for (const results of configuredFormatResults(provider, testResults)) {
+    for (const state of [results.nonStreaming, results.streaming]) {
+      if (isNotConfiguredState(state)) continue;
+      summary.total += 1;
+      if (hasSuccessField(state)) {
+        if (state.success) {
+          summary.passed += 1;
+        } else {
+          summary.failed += 1;
+        }
+      } else {
+        summary.testing += 1;
+      }
+    }
+  }
+  return summary;
+}
+function ProviderTestPill({
+  provider,
+  testResults,
+  isTesting
+}) {
+  const targets = providerTestTargets(provider);
+  const summary = summarizeTestResults(provider, testResults);
+  if (isTesting) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: "size-3 animate-spin" }),
+      "Testing"
+    ] });
+  }
+  if (targets.length === 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded border border-border/70 bg-muted/20 px-2 py-1 text-xs text-muted-foreground", children: "No endpoint" });
+  }
+  if (testResults === void 0 || summary.total === 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded border border-border/70 bg-muted/20 px-2 py-1 text-xs text-muted-foreground", children: "Not tested" });
+  }
+  if (summary.failed > 0) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-red-400/25 bg-red-500/[0.08] px-2 py-1 text-xs text-red-200", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "size-3" }),
+      summary.passed,
+      "/",
+      summary.total,
+      " passed"
+    ] });
+  }
+  if (summary.testing > 0 || summary.passed < summary.total) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "rounded border border-amber-300/25 bg-amber-400/[0.08] px-2 py-1 text-xs text-amber-100", children: [
+      "Partial ",
+      summary.passed,
+      "/",
+      summary.total
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "size-3" }),
+    "OK ",
+    summary.passed,
+    "/",
+    summary.total
+  ] });
+}
+function compactModelLabel(provider) {
+  const models = provider.models ?? [];
+  if (models.length === 0) return "No models configured";
+  const visible = models.slice(0, 2).join(", ");
+  const hiddenCount = models.length - 2;
+  return hiddenCount > 0 ? `${visible} +${hiddenCount} more` : visible;
+}
+function ModelChip({ provider, model }) {
+  const metadata = findProviderModelMetadata(provider, model);
+  const sourceLink = getModelSourceLink(metadata?.sourceUrl);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: model }),
+    metadata !== null && metadata.contextWindow !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-foreground/80", children: formatContextWindowTokens(metadata.contextWindow) }),
+    sourceLink !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "a",
+        {
+          href: sourceLink.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-0.5 rounded border border-border/70 bg-background/70 px-1 font-mono text-[10px] leading-4 text-muted-foreground transition-colors hover:text-foreground",
+          "aria-label": sourceLink.title,
+          children: sourceLink.label
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sourceLink.title })
+    ] }) })
+  ] });
+}
+function modelResultsLabel(testResults) {
+  const models = testResults?.models;
+  if (models === void 0) return null;
+  const count = Object.keys(models).length;
+  if (count === 0) return null;
+  return `${count} model${count === 1 ? "" : "s"} tested`;
+}
 function getErrorIcon(type) {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -8547,6 +8664,7 @@ function ProviderCard({
 }) {
   const [showApiKey, setShowApiKey] = reactExports.useState(false);
   const [copied, setCopied] = reactExports.useState(false);
+  const [showDetails, setShowDetails] = reactExports.useState(false);
   const [showModelResults, setShowModelResults] = reactExports.useState(false);
   function handleCopy() {
     void copyTextToClipboard(provider.apiKey).then((success) => {
@@ -8561,6 +8679,8 @@ function ProviderCard({
   const hasContextMetadata = providerHasContextMetadata(provider);
   const canRefreshMetadata = provider.modelMetadataUrl !== void 0 && provider.modelMetadataUrl.trim() !== "";
   const metadataImportLabel = canRefreshMetadata ? "Refresh" : "Import defaults";
+  const isTestingValue = isTesting ?? false;
+  const testedModelsLabel = modelResultsLabel(testResults);
   const providerSourceBadge = provider.source === "company" ? /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 rounded border border-cyan-300/20 bg-cyan-300/[0.08] px-1.5 py-0.5 text-xs text-cyan-100", children: "Company" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Company-provided API key" })
@@ -8571,65 +8691,53 @@ function ProviderCard({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      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" : ""}`,
+      className: `flex flex-col gap-3 rounded-[8px] border border-border bg-card p-4 shadow-sm 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: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium truncate", children: provider.name }),
-            providerSourceBadge,
-            providerSourceBadge === null && provider.source === "company" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0", children: "公司" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Company-provided API key" })
-            ] }) }),
-            providerSourceBadge === null && provider.source === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0", children: "个人" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Your personal API key" })
-            ] }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 space-y-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-medium", children: provider.name }),
+              providerSourceBadge
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-xs text-muted-foreground", children: compactModelLabel(provider) })
           ] }),
-          docsUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "a",
-            {
-              href: docsUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs",
-              title: "View API documentation",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Docs" })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ProviderTestPill,
+              {
+                provider,
+                testResults,
+                isTesting: isTestingValue
+              }
+            ),
+            docsUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "a",
+              {
+                href: docsUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground",
+                title: "View API documentation",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Docs" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderTestCoverage, { provider }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Key configured" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: provider.authHeader === "x-api-key" ? "x-api-key" : "Bearer" }),
+            testedModelsLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: testedModelsLabel }),
+            testResults?.testedAt !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+              formatTimeAgo(testResults.testedAt)
+            ] })
+          ] })
         ] }),
-        provider.models !== void 0 && provider.models.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-1", children: provider.models.map((m) => {
-          const metadata = findProviderModelMetadata(provider, m);
-          const sourceLink = getModelSourceLink(metadata?.sourceUrl);
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "span",
-            {
-              className: "inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: m }),
-                metadata !== null && metadata.contextWindow !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-foreground/80", children: formatContextWindowTokens(metadata.contextWindow) }),
-                sourceLink !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "a",
-                    {
-                      href: sourceLink.url,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "inline-flex items-center gap-0.5 rounded border border-border/70 bg-background/70 px-1 font-mono text-[10px] leading-4 text-muted-foreground transition-colors hover:text-foreground",
-                      "aria-label": sourceLink.title,
-                      children: sourceLink.label
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sourceLink.title })
-                ] }) })
-              ]
-            },
-            m
-          );
-        }) }),
         !hasContextMetadata && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border border-amber-500/25 bg-amber-500/6 px-2 py-1.5 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Context window metadata missing" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
@@ -8661,98 +8769,106 @@ function ProviderCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs text-muted-foreground bg-muted px-2 py-1 rounded flex-1 truncate", children: showApiKey ? provider.apiKey : maskApiKey(provider.apiKey) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
+        showDetails && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 border-t border-border/60 pt-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "flex-1 truncate rounded bg-muted px-2 py-1 text-xs text-muted-foreground", children: showApiKey ? provider.apiKey : maskApiKey(provider.apiKey) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowApiKey((s) => !s),
+                className: "p-1 text-muted-foreground transition-colors hover:text-foreground",
+                "aria-label": showApiKey ? "Hide API key" : "Show API key",
+                children: showApiKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                className: "p-1 text-muted-foreground transition-colors hover:text-foreground",
+                "aria-label": "Copy API key",
+                children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
+              }
+            )
+          ] }),
+          provider.models !== void 0 && provider.models.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-1", children: provider.models.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsx(ModelChip, { provider, model }, model)) }),
+          providerHasEndpoint(provider.anthropicBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ProviderEndpointSummary,
             {
-              type: "button",
-              onClick: () => setShowApiKey((s) => !s),
-              className: "text-muted-foreground hover:text-foreground transition-colors p-1",
-              "aria-label": showApiKey ? "Hide API key" : "Show API key",
-              children: showApiKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "size-4" })
+              label: "Anthropic",
+              baseUrl: provider.anthropicBaseUrl,
+              endpoint: PATH_V1_MESSAGES,
+              providerName: provider.name,
+              children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.anthropic })
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
+          providerHasEndpoint(provider.openaiBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ProviderEndpointSummary,
             {
-              type: "button",
-              onClick: handleCopy,
-              className: "text-muted-foreground hover:text-foreground transition-colors p-1",
-              "aria-label": "Copy API key",
-              children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-cyan-300" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
+              label: "Chat",
+              baseUrl: provider.openaiBaseUrl,
+              endpoint: PATH_V1_CHAT_COMPLETIONS,
+              providerName: provider.name,
+              children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openaiChat })
             }
-          )
-        ] }),
-        providerHasEndpoint(provider.anthropicBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ProviderEndpointSummary,
-          {
-            label: "Test: Anthropic",
-            baseUrl: provider.anthropicBaseUrl,
-            endpoint: PATH_V1_MESSAGES,
-            providerName: provider.name,
-            children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.anthropic })
-          }
-        ),
-        providerHasEndpoint(provider.openaiBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ProviderEndpointSummary,
-          {
-            label: "Test: Chat",
-            baseUrl: provider.openaiBaseUrl,
-            endpoint: PATH_V1_CHAT_COMPLETIONS,
-            providerName: provider.name,
-            children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openaiChat })
-          }
-        ),
-        providerHasEndpoint(provider.openaiResponsesBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ProviderEndpointSummary,
-          {
-            label: "Test: Responses",
-            baseUrl: provider.openaiResponsesBaseUrl,
-            endpoint: PATH_V1_RESPONSES,
-            providerName: provider.name,
-            children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openaiResponses })
-          }
-        ),
-        testResults?.testedAt !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-            "Tested ",
-            formatTimeAgo(testResults.testedAt)
+          ),
+          providerHasEndpoint(provider.openaiResponsesBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ProviderEndpointSummary,
+            {
+              label: "Responses",
+              baseUrl: provider.openaiResponsesBaseUrl,
+              endpoint: PATH_V1_RESPONSES,
+              providerName: provider.name,
+              children: testResults !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: testResults.openaiResponses })
+            }
+          ),
+          testResults?.models !== void 0 && Object.keys(testResults.models).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowModelResults((value) => !value),
+                className: "flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground",
+                children: [
+                  showModelResults ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
+                  "Model Test Results (",
+                  Object.keys(testResults.models).length,
+                  ")"
+                ]
+              }
+            ),
+            showModelResults && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse text-xs", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-2 py-1 text-left font-medium text-muted-foreground", children: "Model" }),
+                providerHasEndpoint(provider.anthropicBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-2 py-1 text-left font-medium text-muted-foreground", children: "Anthropic" }),
+                providerHasEndpoint(provider.openaiBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-2 py-1 text-left font-medium text-muted-foreground", children: "Chat" }),
+                providerHasEndpoint(provider.openaiResponsesBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "px-2 py-1 text-left font-medium text-muted-foreground", children: "Responses" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: Object.entries(testResults.models).map(([modelName, modelResult]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border/50 last:border-0", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-2 py-1 font-medium", children: modelName }),
+                providerHasEndpoint(provider.anthropicBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-2 py-1 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.anthropic }) }),
+                providerHasEndpoint(provider.openaiBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-2 py-1 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openaiChat }) }),
+                providerHasEndpoint(provider.openaiResponsesBaseUrl) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "px-2 py-1 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openaiResponses }) })
+              ] }, modelName)) })
+            ] }) })
           ] })
         ] }),
-        testResults?.models !== void 0 && Object.keys(testResults.models).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t pt-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 border-t pt-1 sm:flex-row sm:items-center sm:justify-between", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => setShowModelResults((value) => !value),
-              className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1",
+              onClick: () => setShowDetails((value) => !value),
+              className: "inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground",
+              "aria-expanded": showDetails,
               children: [
-                showModelResults ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
-                "Model Test Results (",
-                Object.keys(testResults.models).length,
-                ")"
+                showDetails ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3" }),
+                "Details"
               ]
             }
           ),
-          showModelResults && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full text-xs border-collapse", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Model" }),
-              provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Anthropic" }),
-              provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Chat" }),
-              provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "text-left py-1 px-2 font-medium text-muted-foreground", children: "Responses" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: Object.entries(testResults.models).map(([modelName, modelResult]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border/50 last:border-0", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 font-medium", children: modelName }),
-              provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.anthropic }) }),
-              provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openaiChat }) }),
-              provider.openaiResponsesBaseUrl !== void 0 && provider.openaiResponsesBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1 px-2 align-top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderFormatTestStatus, { results: modelResult.openaiResponses }) })
-            ] }, modelName)) })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 pt-1 border-t sm:flex-row sm:items-center sm:justify-between", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderTestCoverage, { provider }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
             onTest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               Button,
@@ -8761,10 +8877,10 @@ function ProviderCard({
                 size: "sm",
                 onClick: () => onTest(provider.id),
                 className: "text-xs h-7 gap-1",
-                disabled: isTesting ?? false,
+                disabled: isTestingValue,
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: `size-3 ${isTesting ?? false ? "animate-spin" : ""}` }),
-                  isTesting ?? false ? testingTimeLeft !== void 0 ? `Testing (${testingTimeLeft}s)` : "Testing..." : "Test"
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: `size-3 ${isTestingValue ? "animate-spin" : ""}` }),
+                  isTestingValue ? testingTimeLeft !== void 0 ? `Testing (${testingTimeLeft}s)` : "Testing..." : "Test"
                 ]
               }
             ),
@@ -8775,7 +8891,7 @@ function ProviderCard({
                 size: "sm",
                 onClick: () => onEdit(provider),
                 className: "text-xs h-7 gap-1",
-                disabled: isTesting ?? false,
+                disabled: isTestingValue,
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-3" }),
                   "Edit"
@@ -8789,7 +8905,7 @@ function ProviderCard({
                 size: "sm",
                 onClick: () => onDelete(provider.id),
                 className: "text-xs h-7 gap-1 text-destructive hover:text-destructive",
-                disabled: isTesting ?? false,
+                disabled: isTestingValue,
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3" }),
                   "Delete"
@@ -11000,6 +11116,322 @@ function ProxySettingsTab() {
     ] })
   ] });
 }
+const EcosystemPackageStateSchema = _enum([
+  "installed",
+  "update-available",
+  "available",
+  "planned",
+  "unknown"
+]);
+const EcosystemPackageSchema = object({
+  id: string(),
+  name: string(),
+  npmName: string(),
+  capability: string(),
+  description: string(),
+  workflow: string(),
+  installCommand: string(),
+  state: EcosystemPackageStateSchema,
+  installedVersion: string().nullable(),
+  latestVersion: string().nullable(),
+  primary: boolean()
+});
+const EcosystemRunnerPresetSchema = object({
+  id: string(),
+  name: string(),
+  validatedVersion: string(),
+  binary: string(),
+  modelFlag: string(),
+  variantFlag: string().nullable(),
+  tools: array(string()),
+  logDir: string(),
+  skillsDir: string(),
+  agentsDir: string()
+});
+const EcosystemPackagesResponseSchema = object({
+  checkedAt: string(),
+  packages: array(EcosystemPackageSchema),
+  runnerPresets: array(EcosystemRunnerPresetSchema)
+});
+const WORKFLOWS = [
+  {
+    id: "observe",
+    title: "Observe",
+    label: "Live",
+    description: "Capture IDE, process, session, turn, request, response, tools, and providers.",
+    metric: "Inspector core",
+    icon: Activity
+  },
+  {
+    id: "replay",
+    title: "Replay",
+    label: "Ready",
+    description: "Promote real logs into repeatable replay evidence without losing the raw context.",
+    metric: "Session asset",
+    icon: RefreshCw
+  },
+  {
+    id: "evaluate",
+    title: "Evaluate",
+    label: "Next",
+    description: "Use eval-harness to turn sessions into regression cases and provider bakeoffs.",
+    metric: "Eval loop",
+    icon: Beaker
+  },
+  {
+    id: "connect",
+    title: "Connect",
+    label: "MCP",
+    description: "Expose Inspector state to coding agents as queryable context and durable evidence.",
+    metric: "/api/mcp",
+    icon: Network
+  }
+];
+async function fetchEcosystemPackages(url) {
+  return fetchJson(
+    url,
+    EcosystemPackagesResponseSchema,
+    void 0,
+    (response) => `Failed to load ecosystem packages: ${String(response.status)}`
+  );
+}
+function stateLabel(state) {
+  switch (state) {
+    case "installed":
+      return "Installed";
+    case "update-available":
+      return "Update";
+    case "available":
+      return "Available";
+    case "planned":
+      return "Planned";
+    case "unknown":
+      return "Unknown";
+  }
+}
+function stateClassName(state) {
+  switch (state) {
+    case "installed":
+      return "border-emerald-400/20 bg-emerald-400/8 text-emerald-200";
+    case "update-available":
+      return "border-amber-400/20 bg-amber-400/8 text-amber-200";
+    case "available":
+      return "border-sky-400/20 bg-sky-400/8 text-sky-200";
+    case "planned":
+      return "border-white/10 bg-white/[0.04] text-white/55";
+    case "unknown":
+      return "border-white/10 bg-white/[0.04] text-white/45";
+  }
+}
+function versionLabel(pkg) {
+  if (pkg.installedVersion !== null && pkg.latestVersion !== null) {
+    if (pkg.installedVersion === pkg.latestVersion) return `v${pkg.installedVersion}`;
+    return `v${pkg.installedVersion} -> v${pkg.latestVersion}`;
+  }
+  if (pkg.installedVersion !== null) return `v${pkg.installedVersion}`;
+  if (pkg.latestVersion !== null) return `latest v${pkg.latestVersion}`;
+  return "not published";
+}
+function PackageStatusCard({ pkg }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", 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(PackageCheck, { className: "size-4 shrink-0 text-white/55" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-sm font-semibold", children: pkg.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 truncate font-mono text-[11px] text-white/35", children: pkg.npmName })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: cn("shrink-0", stateClassName(pkg.state)), variant: "outline", children: stateLabel(pkg.state) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 text-xs leading-5 text-muted-foreground", children: pkg.description }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2 text-[11px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-white/[0.035] px-2 py-1 font-mono text-white/50", children: versionLabel(pkg) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-white/[0.035] px-2 py-1 text-white/45", children: pkg.capability }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-white/[0.035] px-2 py-1 font-mono text-white/35", children: pkg.installCommand })
+    ] })
+  ] });
+}
+function WorkflowTile({ workflow }) {
+  const Icon2 = workflow.icon;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "size-4 shrink-0 text-cyan-200/75" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-sm font-semibold", children: workflow.title })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-white/[0.04] px-2 py-0.5 font-mono text-[10px] text-white/45", children: workflow.label })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 min-h-10 text-xs leading-5 text-muted-foreground", children: workflow.description }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 font-mono text-[11px] text-white/35", children: workflow.metric })
+  ] });
+}
+function buildSessionCommand(sessionId) {
+  if (sessionId === null) {
+    return 'npx @tonyclaw/eval-harness inspector-smoke --title "TonyClaw Lab smoke" --latest-log-limit 5';
+  }
+  return `npx @tonyclaw/eval-harness inspector-smoke --title "TonyClaw Lab smoke ${sessionId}" --latest-log-limit 5`;
+}
+function RunnerPresetCard({ preset }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", 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(Rocket, { className: "size-4 shrink-0 text-cyan-200/75" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncate text-sm font-semibold", children: preset.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 font-mono text-[11px] text-white/35", children: [
+          preset.binary,
+          " ",
+          preset.modelFlag,
+          preset.variantFlag !== null ? ` ${preset.variantFlag}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "border-white/10 bg-white/[0.04] text-white/55", children: [
+        "v",
+        preset.validatedVersion
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2 text-[11px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded bg-black/15 px-2 py-1 text-white/45", children: [
+        "logs/",
+        preset.logDir
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded bg-black/15 px-2 py-1 text-white/45", children: preset.tools.join(", ") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded bg-black/15 px-2 py-1 font-mono text-white/35", children: preset.skillsDir }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded bg-black/15 px-2 py-1 font-mono text-white/35", children: preset.agentsDir })
+    ] })
+  ] });
+}
+function AgentLabDialog({ currentSessionId, logCount }) {
+  const [open, setOpen] = reactExports.useState(false);
+  const [copied, setCopied] = reactExports.useState(false);
+  const [copiedPresets, setCopiedPresets] = reactExports.useState(false);
+  const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
+    revalidateOnFocus: false,
+    revalidateIfStale: false
+  });
+  const packages = response.data?.packages ?? [];
+  const runnerPresets = response.data?.runnerPresets ?? [];
+  const installedCount = reactExports.useMemo(
+    () => packages.filter((pkg) => pkg.state === "installed" || pkg.state === "update-available").length,
+    [packages]
+  );
+  const sessionCommand = buildSessionCommand(currentSessionId);
+  const presetsCommand = "npx @tonyclaw/eval-harness runner-presets";
+  const copySessionCommand = () => {
+    void copyTextToClipboard(sessionCommand).then(() => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    });
+  };
+  const copyPresetsCommand = () => {
+    void copyTextToClipboard(presetsCommand).then(() => {
+      setCopiedPresets(true);
+      window.setTimeout(() => setCopiedPresets(false), 1200);
+    });
+  };
+  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: INSPECTOR_ICON_TRIGGER_CLASS,
+        "aria-label": "TonyClaw Lab",
+        title: "TonyClaw Lab",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FlaskConical, { className: "size-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "TonyClaw Lab" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "flex max-h-[84vh] max-w-5xl flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Sparkles, { className: "size-4 text-cyan-200/80" }),
+        "TonyClaw Lab"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-y-auto pr-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-3 lg:grid-cols-[1.1fr_0.9fr]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "rounded-lg bg-white/[0.025] p-4 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold", children: "Session asset pipeline" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 max-w-2xl text-xs leading-5 text-muted-foreground", children: "Treat captured traffic as durable assets: observe it, replay it, evaluate it, and expose it back to agents through MCP." })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "border-cyan-300/20 bg-cyan-300/8 text-cyan-100", children: [
+                String(installedCount),
+                "/",
+                String(packages.length),
+                " packages"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: WORKFLOWS.map((workflow) => /* @__PURE__ */ jsxRuntimeExports.jsx(WorkflowTile, { workflow }, workflow.id)) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "rounded-lg bg-white/[0.025] p-4 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold", children: "Current session" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: currentSessionId === null ? "MCP smoke command" : currentSessionId })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: "outline", className: "border-white/10 bg-white/[0.04] text-white/55", children: [
+                String(logCount),
+                " logs"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 rounded-md bg-black/20 p-3 font-mono text-[11px] leading-5 text-white/55 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: sessionCommand }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", variant: "secondary", onClick: copySessionCommand, children: [
+                copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" }),
+                copied ? "Copied" : "Copy"
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", variant: "outline", onClick: copyPresetsCommand, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Beaker, { className: "size-3.5" }),
+                copiedPresets ? "Presets copied" : "Runner Presets"
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mt-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold", children: "Runner presets" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hidden items-center gap-1 font-mono text-[11px] text-muted-foreground sm:flex", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Terminal, { className: "size-3.5" }),
+              presetsCommand
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-4", children: [
+            runnerPresets.map((preset) => /* @__PURE__ */ jsxRuntimeExports.jsx(RunnerPresetCard, { preset }, preset.id)),
+            response.isLoading && runnerPresets.length === 0 && [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "h-32 animate-pulse rounded-lg bg-white/[0.025] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]"
+              },
+              index
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mt-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold", children: "TonyClaw packages" }),
+            response.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-[11px] text-muted-foreground", children: "checking npm..." })
+          ] }),
+          response.error !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-lg bg-red-500/8 p-3 text-xs text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]", children: "Package status is temporarily unavailable." }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [
+            packages.map((pkg) => /* @__PURE__ */ jsxRuntimeExports.jsx(PackageStatusCard, { pkg }, pkg.id)),
+            response.isLoading && packages.length === 0 && [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "h-36 animate-pulse rounded-lg bg-white/[0.025] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]"
+              },
+              index
+            ))
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
 function computeCacheTrends(groups) {
   const result = /* @__PURE__ */ new Map();
   for (const group of groups) {
@@ -13392,7 +13824,9 @@ function CrabFamily({
 }
 function BrandHeader({
   compact,
-  crabEntrancePhase
+  crabEntrancePhase,
+  currentSessionId,
+  logCount
 }) {
   if (compact) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_44px_rgba(0,0,0,0.18)] rounded-[8px] p-3", children: [
@@ -13413,6 +13847,7 @@ function BrandHeader({
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(AlertsDialog, {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(AgentLabDialog, { currentSessionId, logCount }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
         ] })
       ] }),
@@ -13440,6 +13875,7 @@ function BrandHeader({
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "justify-self-end flex items-center gap-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AlertsDialog, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AgentLabDialog, { currentSessionId, logCount }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
     ] })
   ] });
@@ -13903,10 +14339,19 @@ function ProxyViewer({
     },
     [onSessionChange]
   );
+  const labSessionId = pinnedSessionId !== void 0 ? pinnedSessionId : selectedSession === "__all__" ? null : selectedSession;
   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-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "bg-background/95 order-1 border-b border-white/[0.045] lg:sticky lg:top-0 lg:order-2 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BrandHeader, { compact: true, crabEntrancePhase }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          BrandHeader,
+          {
+            compact: true,
+            crabEntrancePhase,
+            currentSessionId: labSessionId,
+            logCount: logs.length
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarPanel, { label: "Session", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarMetric, { label: "Requests", value: logs.length }),