@tonyclaw/agent-inspector 2.0.41 → 2.0.43

package/.output/server/_ssr/{ProxyViewerContainer-CXA7iH3H.mjs → ProxyViewerContainer-B7SR9mrD.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { 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, v as packageJson, i as GroupEvidenceExportResultSchema, j as DeleteInspectorGroupResponseSchema, d as RuntimeConfigSchema, P as ProviderConfigSchema, f as apiFormatForPath, n as createPendingProviderTestResults, o as ProviderTestResultsSchema, q as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, r as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, m as maskApiKey, k as providerHasContextMetadata, l as findProviderModelMetadata, g as getSessionPath, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, t as resolveProviderContextWindow, K as KnowledgeCandidateSchema, h as stripClaudeCodeBillingHeader, u as isPlainRecord, G as GroupEvidenceReadResponseSchema, I as InspectorGroupsListResponseSchema } from "./router-ChJIVv7-.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, v as packageJson, i as GroupEvidenceExportResultSchema, j as DeleteInspectorGroupResponseSchema, d as RuntimeConfigSchema, P as ProviderConfigSchema, f as apiFormatForPath, n as createPendingProviderTestResults, o as ProviderTestResultsSchema, q as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, r as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, m as maskApiKey, k as providerHasContextMetadata, l as findProviderModelMetadata, g as getSessionPath, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, t as resolveProviderContextWindow, K as KnowledgeCandidateSchema, h as stripClaudeCodeBillingHeader, u as isPlainRecord, G as GroupEvidenceReadResponseSchema } from "./router-B2d1LUx6.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";
@@ -629,7 +629,7 @@ function DialogOverlay({
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       ),
       ...props
@@ -1937,19 +1937,19 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-nkVa9epn.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-CFElCSYY.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-CK71-ucq.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-DfKapj0k.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-DDCUJJ3X.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-CUxTCg31.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-C6ZA7V3B.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-BXY0w197.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-DW5v_o6G.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-CzMnES9H.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
@@ -3505,6 +3505,9 @@ function resolveFocusedTab(tab, anatomySegments) {
       return "request";
   }
 }
+function shouldHydrateLogBody(log) {
+  return log.bodyContentMode === "compact" || log.bodyContentMode === "truncated";
+}
 function DiffToggleButton({
   active,
   onClick
@@ -3561,40 +3564,43 @@ const LogEntry = reactExports.memo(function({
   const [requestDiff, setRequestDiff] = reactExports.useState(false);
   const [activeTab, setActiveTab] = reactExports.useState("request");
   const [expandToPath, setExpandToPath] = reactExports.useState(null);
+  const [hydratedLog, setHydratedLog] = reactExports.useState(null);
+  const [bodyHydrationState, setBodyHydrationState] = reactExports.useState("idle");
   const requestJsonRef = reactExports.useRef(null);
-  const resolvedFormat = resolveLogFormat(log);
+  const displayLog = hydratedLog ?? log;
+  const resolvedFormat = resolveLogFormat(displayLog);
   const adapter = getLogFormatAdapter(resolvedFormat);
   const requestAnalysis = reactExports.useMemo(
-    () => adapter.analyzeRequest(log.rawRequestBody),
-    [adapter, log.rawRequestBody]
+    () => adapter.analyzeRequest(displayLog.rawRequestBody),
+    [adapter, displayLog.rawRequestBody]
   );
   const responseAnalysis = reactExports.useMemo(
-    () => adapter.analyzeResponse(log.responseText),
-    [adapter, log.responseText]
+    () => adapter.analyzeResponse(displayLog.responseText),
+    [adapter, displayLog.responseText]
   );
   const strippedRequestBody = reactExports.useMemo(() => {
-    if (!strip || resolvedFormat !== "anthropic" || log.rawRequestBody === null) {
+    if (!strip || resolvedFormat !== "anthropic" || displayLog.rawRequestBody === null) {
       return null;
     }
-    return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
-  }, [log.rawRequestBody, resolvedFormat, strip]);
-  const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
+    return stripClaudeCodeBillingHeader(displayLog.rawRequestBody).body;
+  }, [displayLog.rawRequestBody, resolvedFormat, strip]);
+  const displayedRequestBody = strippedRequestBody ?? displayLog.rawRequestBody;
   const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
-  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
-  const responseExpansion = useJsonBulkExpansion(log.responseText);
+  const rawRequestExpansion = useJsonBulkExpansion(displayLog.rawRequestBody);
+  const responseExpansion = useJsonBulkExpansion(displayLog.responseText);
   const headersText = reactExports.useMemo(
-    () => log.headers && Object.keys(log.headers).length > 0 ? JSON.stringify(log.headers, null, 2) : null,
-    [log.headers]
+    () => displayLog.headers && Object.keys(displayLog.headers).length > 0 ? JSON.stringify(displayLog.headers, null, 2) : null,
+    [displayLog.headers]
   );
   const rawHeadersText = reactExports.useMemo(
-    () => log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? JSON.stringify(log.rawHeaders, null, 2) : null,
-    [log.rawHeaders]
+    () => displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0 ? JSON.stringify(displayLog.rawHeaders, null, 2) : null,
+    [displayLog.rawHeaders]
   );
   const requestCopy = useCopyFeedback(displayedRequestBody);
-  const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
+  const rawRequestCopy = useCopyFeedback(displayLog.rawRequestBody);
   const headersCopy = useCopyFeedback(headersText);
   const rawHeadersCopy = useCopyFeedback(rawHeadersText);
-  const responseCopy = useCopyFeedback(log.responseText);
+  const responseCopy = useCopyFeedback(displayLog.responseText);
   const tabActions = reactExports.useMemo(
     () => ({
       request: {
@@ -3614,15 +3620,15 @@ const LogEntry = reactExports.memo(function({
           resolvedFormat,
           viewMode,
           strip,
-          log.rawRequestBody !== null
+          displayLog.rawRequestBody !== null
         ) ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) } : void 0,
         diffWithPrevious: onCompareWithPrevious === void 0 ? void 0 : () => {
-          onCompareWithPrevious(log);
+          onCompareWithPrevious(displayLog);
         }
       },
       "raw-request": {
         copyLabel: "Copy raw request",
-        copyText: log.rawRequestBody,
+        copyText: displayLog.rawRequestBody,
         copyCopied: rawRequestCopy.copied,
         onCopy: rawRequestCopy.copy,
         expansion: {
@@ -3648,7 +3654,7 @@ const LogEntry = reactExports.memo(function({
       },
       raw: {
         copyLabel: "Copy response",
-        copyText: log.responseText,
+        copyText: displayLog.responseText,
         copyCopied: responseCopy.copied,
         onCopy: responseCopy.copy,
         expansion: {
@@ -3663,14 +3669,15 @@ const LogEntry = reactExports.memo(function({
       requestCopy,
       requestExpansion,
       requestDiff,
-      log.rawRequestBody,
+      displayLog,
+      displayLog.rawRequestBody,
       rawRequestCopy,
       rawRequestExpansion,
       headersText,
       headersCopy,
       rawHeadersText,
       rawHeadersCopy,
-      log.responseText,
+      displayLog.responseText,
       responseCopy,
       responseExpansion,
       resolvedFormat,
@@ -3687,7 +3694,7 @@ const LogEntry = reactExports.memo(function({
     () => parseRequestTools(requestExpansion.parsedData),
     [requestExpansion.parsedData]
   );
-  const warnings = log.warnings ?? [];
+  const warnings = displayLog.warnings ?? [];
   const anatomyPaths = reactExports.useMemo(() => {
     if (anatomySegments === null) return void 0;
     return new Set(anatomySegments.map((s) => s.path));
@@ -3706,6 +3713,28 @@ const LogEntry = reactExports.memo(function({
     }
     setExpanded(nextExpanded);
   }, [anatomySegments, expanded]);
+  reactExports.useEffect(() => {
+    setHydratedLog(null);
+    setBodyHydrationState("idle");
+  }, [log.id]);
+  reactExports.useEffect(() => {
+    if (!expanded) return;
+    if (!shouldHydrateLogBody(log)) return;
+    if (hydratedLog !== null || bodyHydrationState !== "idle") return;
+    let cancelled = false;
+    setBodyHydrationState("loading");
+    void fetchJson(`/api/logs/${String(log.id)}`, CapturedLogSchema).then((fullLog) => {
+      if (cancelled) return;
+      setHydratedLog(fullLog);
+      setBodyHydrationState("idle");
+    }).catch(() => {
+      if (cancelled) return;
+      setBodyHydrationState("failed");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [bodyHydrationState, expanded, hydratedLog, log.bodyContentMode, log.id]);
   reactExports.useEffect(() => {
     const handleLogFocusRequest = (event) => {
       const request = readLogFocusRequest(event);
@@ -3724,7 +3753,7 @@ const LogEntry = reactExports.memo(function({
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         LogEntryHeader,
         {
-          log,
+          log: displayLog,
           messageCount: requestAnalysis.messageCount,
           toolCount: requestAnalysis.toolCount,
           expanded,
@@ -3749,15 +3778,17 @@ const LogEntry = reactExports.memo(function({
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
         ] }),
-        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: log.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: displayLog.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           LazyJsonViewer,
           {
             data: rawRequestExpansion.parsedData,
             bulkDepth: rawRequestExpansion.bulkDepth,
             bulkRevision: rawRequestExpansion.bulkRevision
           }
-        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: log.rawRequestBody }) }) }),
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: displayLog.rawRequestBody }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
+          bodyHydrationState === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 rounded border border-border bg-muted/30 p-3 text-xs text-muted-foreground", children: "Loading full request and response bodies..." }),
+          bodyHydrationState === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200", children: "Full request and response bodies could not be loaded. Compact metadata is still available." }),
           warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 font-semibold text-amber-300", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
@@ -3775,7 +3806,7 @@ const LogEntry = reactExports.memo(function({
           requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             RequestDiffContent,
             {
-              rawBody: log.rawRequestBody,
+              rawBody: displayLog.rawRequestBody,
               displayedBody: displayedRequestBody,
               emptyLabel: "No transformation applied; raw and sent request bodies are identical."
             }
@@ -3794,8 +3825,8 @@ const LogEntry = reactExports.memo(function({
           LazyRequestAnatomy,
           {
             parsed: requestExpansion.parsedData,
-            inputTokens: log.inputTokens ?? null,
-            model: log.model,
+            inputTokens: displayLog.inputTokens ?? null,
+            model: displayLog.model,
             segments: anatomySegments,
             onSegmentActivate: jumpToAnatomySegment
           }
@@ -3803,7 +3834,7 @@ const LogEntry = reactExports.memo(function({
         viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
             viewMode,
-            log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
+            displayLog.rawHeaders !== void 0 && Object.keys(displayLog.rawHeaders).length > 0
           ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             DiffToggleButton,
             {
@@ -3817,11 +3848,11 @@ const LogEntry = reactExports.memo(function({
           headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             HeadersDiffContent,
             {
-              rawHeaders: log.rawHeaders,
-              headers: log.headers,
+              rawHeaders: displayLog.rawHeaders,
+              headers: displayLog.headers,
               emptyLabel: "No transformation applied; raw and processed headers are identical."
             }
-          ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+          ) : displayLog.headers && Object.keys(displayLog.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(displayLog.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
               key,
               ":"
@@ -3829,7 +3860,7 @@ const LogEntry = reactExports.memo(function({
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
           ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
         ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(displayLog.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
             key,
             ":"
@@ -3837,44 +3868,44 @@ const LogEntry = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
         ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3 space-y-3", children: [
-          log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
+          displayLog.error !== void 0 && displayLog.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: displayLog.error })
           ] }),
-          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          displayLog.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             LazyJsonViewerFromString,
             {
-              text: log.responseText,
+              text: displayLog.responseText,
               defaultExpandDepth: 0,
               bulkDepth: responseExpansion.bulkDepth,
               bulkRevision: responseExpansion.bulkRevision
             }
           ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
-          log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          displayLog.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             LazyStreamingChunkSequence,
             {
-              logId: log.id,
-              truncated: log.streamingChunksPath !== null
+              logId: displayLog.id,
+              truncated: displayLog.streamingChunksPath !== null
             }
           ) })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           LazyResponseView,
           {
-            responseText: log.responseText,
-            responseStatus: log.responseStatus,
-            streaming: log.streaming,
-            inputTokens: log.inputTokens,
-            outputTokens: log.outputTokens,
-            cacheCreationInputTokens: log.cacheCreationInputTokens,
-            cacheReadInputTokens: log.cacheReadInputTokens,
+            responseText: displayLog.responseText,
+            responseStatus: displayLog.responseStatus,
+            streaming: displayLog.streaming,
+            inputTokens: displayLog.inputTokens,
+            outputTokens: displayLog.outputTokens,
+            cacheCreationInputTokens: displayLog.cacheCreationInputTokens,
+            cacheReadInputTokens: displayLog.cacheReadInputTokens,
             apiFormat: resolvedFormat,
-            error: log.error
+            error: displayLog.error
           }
         ) }) }) })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyReplayDialog, { log: displayLog, open: replayOpen, onOpenChange: setReplayOpen }) })
   ] });
 });
 function ThreadConnector({
@@ -6217,21 +6248,24 @@ function MemberRow({ row }) {
   const errors = session?.errorCount ?? null;
   const tokens = session?.tokenUsage.total ?? null;
   const firstChunkMs = log?.firstChunkMs ?? null;
+  const sessionLabel = firstNonEmpty(member.label, member.sessionId);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b border-border last:border-0", 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-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "a",
-          {
-            href: sessionPath,
-            target: "_blank",
-            rel: "noreferrer",
-            className: "min-w-0 truncate font-mono text-xs text-primary hover:underline",
-            children: firstNonEmpty(member.label, member.sessionId)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3 shrink-0 text-muted-foreground" })
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "a",
+        {
+          href: sessionPath,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "inline-flex max-w-full min-w-0 items-center gap-2 rounded-sm font-mono text-xs text-primary outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "aria-label": `Open session ${sessionLabel}`,
+          title: `Open session ${sessionLabel}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate", children: sessionLabel }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3 shrink-0 text-muted-foreground" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 truncate text-[11px] text-muted-foreground", children: displayText(member.agent) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "max-w-52 px-3 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate", children: providerModel(member) }) }),
@@ -8450,6 +8484,7 @@ function SettingsDialog() {
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "providers", children: "Providers" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "proxy", children: "Proxy" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "storage", children: "Storage" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "mcp", children: "MCP" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "onboarding", children: "Onboarding" })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex-1 overflow-x-hidden overflow-y-auto pr-3", children: [
@@ -8471,6 +8506,7 @@ function SettingsDialog() {
           ) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "proxy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProxySettingsTab, {}) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "storage", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StorageSettingsTab, {}) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "mcp", children: /* @__PURE__ */ jsxRuntimeExports.jsx(McpSettingsTab, {}) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "onboarding", children: /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingSettingsTab, {}) })
         ] })
       ] })
@@ -8720,6 +8756,129 @@ function OnboardingSettingsTab() {
     ] })
   ] });
 }
+function McpSettingsTab() {
+  const [copiedId, setCopiedId] = reactExports.useState(null);
+  const origin = reactExports.useMemo(() => {
+    if (typeof window === "undefined") return "http://localhost:25947";
+    return window.location.origin;
+  }, []);
+  const endpoint = `${origin}/api/mcp`;
+  const values = reactExports.useMemo(
+    () => [
+      { id: "mcp-url", label: "Streamable HTTP MCP URL", value: endpoint },
+      {
+        id: "stdio",
+        label: "Stdio bridge command",
+        value: `agent-inspector-mcp stdio --url ${endpoint}`
+      },
+      {
+        id: "doctor",
+        label: "Bridge doctor",
+        value: `agent-inspector-mcp doctor --url ${endpoint}`
+      },
+      {
+        id: "readonly",
+        label: "Readonly mode",
+        value: "AGENT_INSPECTOR_MCP_READONLY=1 agent-inspector"
+      },
+      {
+        id: "capabilities",
+        label: "Capabilities resource",
+        value: "inspector://mcp/capabilities"
+      },
+      {
+        id: "context",
+        label: "Current context resource",
+        value: "inspector://context/current"
+      },
+      {
+        id: "streamable-json",
+        label: "Streamable HTTP JSON",
+        value: JSON.stringify(
+          {
+            mcpServers: {
+              "agent-inspector": {
+                type: "streamableHttp",
+                url: endpoint
+              }
+            }
+          },
+          null,
+          2
+        )
+      },
+      {
+        id: "stdio-json",
+        label: "Stdio MCP JSON",
+        value: JSON.stringify(
+          {
+            mcpServers: {
+              "agent-inspector": {
+                command: "agent-inspector-mcp",
+                args: ["stdio", "--url", endpoint]
+              }
+            }
+          },
+          null,
+          2
+        )
+      },
+      {
+        id: "opencode-local",
+        label: "OpenCode local MCP",
+        value: JSON.stringify(
+          {
+            mcp: {
+              "agent-inspector": {
+                type: "local",
+                command: ["agent-inspector-mcp", "stdio", "--url", endpoint],
+                enabled: true
+              }
+            }
+          },
+          null,
+          2
+        )
+      },
+      {
+        id: "codex-toml",
+        label: "Codex TOML",
+        value: `[mcp_servers.agent-inspector]
+command = "agent-inspector-mcp"
+args = ["stdio", "--url", "${endpoint}"]`
+      }
+    ],
+    [endpoint]
+  );
+  const handleCopy = reactExports.useCallback((id, value) => {
+    void copyTextToClipboard(value).then((success) => {
+      if (!success) return;
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 1600);
+    });
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 space-y-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Terminal, { className: "size-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold", children: "MCP access" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Use Streamable HTTP when the client supports URL-based MCP. Use the stdio bridge only for stdio-only clients. Configure one entry for the same Inspector instance." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "If the MCP client runs in another container or host, replace localhost with a reachable host/IP and verify the network path." })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2", children: values.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CopyableSetupValue,
+      {
+        id: item.id,
+        label: item.label,
+        value: item.value,
+        copiedId,
+        onCopy: handleCopy
+      },
+      item.id
+    )) })
+  ] });
+}
 function ProxySettingsTab() {
   const {
     strip,
@@ -10173,6 +10332,99 @@ function formatContextWindow(summary) {
   if (tokens === null) return "Context window unknown";
   return `Context window ${formatContextWindowTokens(tokens)}`;
 }
+const MEMBER_METADATA_KEYS = [
+  "score",
+  "decision",
+  "final_status",
+  "validation_pass_ratio",
+  "semantic_memory_score",
+  "opencode_exit",
+  "actual_model",
+  "run_dir",
+  "workspace",
+  "project_dir",
+  "work_dir"
+];
+function formatMetadataValue(value) {
+  if (typeof value === "string") return value.length > 0 ? value : null;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (value === null) return null;
+  return JSON.stringify(value);
+}
+function getMemberMetadataRows(member) {
+  const rows = [];
+  for (const key of MEMBER_METADATA_KEYS) {
+    const value = member.metadata[key];
+    if (value === void 0) continue;
+    const formatted = formatMetadataValue(value);
+    if (formatted !== null) rows.push({ key, value: formatted });
+  }
+  return rows;
+}
+function SessionMembershipPanel({
+  memberships
+}) {
+  if (memberships.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-md border border-border bg-muted/10 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-foreground", children: "Group Member Evidence" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono text-[10px] text-muted-foreground", children: [
+        memberships.length,
+        " group",
+        memberships.length === 1 ? "" : "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: memberships.map((membership) => {
+      const member = membership.member;
+      const metadataRows = getMemberMetadataRows(member);
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: "truncate font-medium text-foreground",
+              title: membership.groupTitle,
+              children: membership.groupTitle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] uppercase text-muted-foreground", children: membership.groupStatus }),
+          member.status !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-[10px] text-muted-foreground", children: [
+            "member ",
+            member.status
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", title: member.sessionId, children: truncateSessionId(member.sessionId) }),
+          member.label !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: member.label }),
+          member.provider !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: member.provider }),
+          member.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: member.model }),
+          member.runId !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", title: member.runId, children: [
+            "run ",
+            truncateSessionId(member.runId)
+          ] })
+        ] }),
+        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",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-[10px] text-muted-foreground", children: row.key }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "truncate font-mono text-[11px] text-foreground",
+                  title: row.value,
+                  children: row.value
+                }
+              )
+            ]
+          },
+          row.key
+        )) })
+      ] }, `${membership.groupId}:${member.id}`);
+    }) })
+  ] });
+}
 function formatRequestCount(count) {
   return `${count} ${count === 1 ? "request" : "requests"}`;
 }
@@ -10578,6 +10830,8 @@ function ProxyViewer({
   strip,
   slowResponseThresholdSeconds,
   timeDisplayFormat,
+  isLoading = false,
+  sessionMemberships = [],
   hideSessionFilter = false,
   pinnedSessionId
 }) {
@@ -10731,6 +10985,7 @@ function ProxyViewer({
           showBackLink: sessionContextScope.showBackLink
         }
       ),
+      hasSessionContext && pinnedSessionId !== void 0 && sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
         !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
@@ -10822,9 +11077,10 @@ function ProxyViewer({
       exportError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: exportError })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: logs.length === 0 ? selectedSession !== "__all__" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: "Session not found" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: isLoading ? "Loading session data..." : "Session not found" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-mono bg-muted px-3 py-1 rounded inline-block max-w-[500px] break-all", children: truncateSessionId(selectedSession) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs", children: [
+      sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-3xl text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }) }),
+      !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs", children: [
         "This session may have been cleared or never existed.",
         " ",
         hideSessionFilter ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/", className: "underline hover:text-foreground transition-colors", children: "Back to all sessions" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10882,6 +11138,25 @@ const SSEUpdateSchema = union([
     log: CapturedLogSchema
   })
 ]);
+function buildSessionMembershipEvidence(groups, sessionId) {
+  const memberships = [];
+  for (const group of groups) {
+    for (const member of group.members) {
+      if (member.sessionId !== sessionId) continue;
+      memberships.push({
+        groupId: group.id,
+        groupTitle: group.title,
+        groupKind: group.kind,
+        groupStatus: group.status,
+        groupTask: group.task,
+        groupProject: group.project,
+        groupEvidence: group.evidence,
+        member
+      });
+    }
+  }
+  return memberships;
+}
 function extractSessions(logs) {
   const set = /* @__PURE__ */ new Set();
   for (const l of logs) {
@@ -10909,9 +11184,13 @@ const HASH_SCROLL_ATTEMPTS = 12;
 const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
 function buildLogsStreamUrl(sessionId) {
-  if (sessionId === void 0) return "/api/logs/stream";
-  const params = new URLSearchParams({ sessionId });
-  return `/api/logs/stream?${params.toString()}`;
+  const params = new URLSearchParams();
+  if (sessionId !== void 0) {
+    params.set("sessionId", sessionId);
+    params.set("compact", "1");
+  }
+  const query = params.toString();
+  return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
 }
 function buildLogIndex(logs) {
   const idx = /* @__PURE__ */ new Map();
@@ -10933,6 +11212,8 @@ function ProxyViewerContainer({
   const [selectedModel, setSelectedModel] = reactExports.useState("__all__");
   const [viewMode, setViewMode] = reactExports.useState("simple");
   const [error, setError] = reactExports.useState(null);
+  const [streamInitialized, setStreamInitialized] = reactExports.useState(initialSessionId === void 0);
+  const [sessionMemberships, setSessionMemberships] = reactExports.useState([]);
   const eventSourceRef = reactExports.useRef(null);
   const reconnectTimeoutRef = reactExports.useRef(null);
   const handledHashRef = reactExports.useRef(null);
@@ -10979,6 +11260,7 @@ function ProxyViewerContainer({
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
     }
+    setStreamInitialized(false);
     const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
     es.onmessage = (event) => {
@@ -11000,6 +11282,7 @@ function ProxyViewerContainer({
           const nextLogs = trimClientLogs(update.logs);
           logIndexRef.current = buildLogIndex(nextLogs);
           setAllLogs(nextLogs);
+          setStreamInitialized(true);
           setError(null);
         } else if (update.type === "update") {
           scheduleUpdate(update.log);
@@ -11010,6 +11293,7 @@ function ProxyViewerContainer({
     };
     es.onerror = () => {
       setError("SSE connection lost, reconnecting...");
+      setStreamInitialized(true);
       es.close();
       if (reconnectTimeoutRef.current !== null) {
         clearTimeout(reconnectTimeoutRef.current);
@@ -11017,6 +11301,27 @@ function ProxyViewerContainer({
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
     };
   }, [initialSessionId, scheduleUpdate]);
+  reactExports.useEffect(() => {
+    if (initialSessionId === void 0) {
+      setSessionMemberships([]);
+      return;
+    }
+    let cancelled = false;
+    void fetch("/api/groups").then(async (response) => {
+      if (!response.ok) return null;
+      const raw = await response.json();
+      const parsed = InspectorGroupsListResponseSchema.safeParse(raw);
+      return parsed.success ? parsed.data.groups : null;
+    }).then((groups) => {
+      if (cancelled || groups === null) return;
+      setSessionMemberships(buildSessionMembershipEvidence(groups, initialSessionId));
+    }).catch(() => {
+      if (!cancelled) setSessionMemberships([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [initialSessionId]);
   reactExports.useEffect(() => {
     connectSSE();
     return () => {
@@ -11147,6 +11452,8 @@ function ProxyViewerContainer({
         onModelChange: setSelectedModel,
         onClearAll: handleClearAll,
         onClearGroup: handleClearGroup,
+        isLoading: initialSessionId !== void 0 && !streamInitialized,
+        sessionMemberships,
         viewMode,
         onViewModeChange: setViewMode,
         captureMode,