@tonyclaw/agent-inspector 2.0.41 → 2.0.43

package/src/components/ProxyViewerContainer.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type JSX } from "react";
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
+import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
-import { ProxyViewer } from "./ProxyViewer";
+import { ProxyViewer, type SessionMembershipEvidence } from "./ProxyViewer";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 
 type SSEUpdate =
@@ -27,6 +28,29 @@ const SSEUpdateSchema = z.union([
   }),
 ]);
 
+function buildSessionMembershipEvidence(
+  groups: readonly InspectorGroup[],
+  sessionId: string,
+): SessionMembershipEvidence[] {
+  const memberships: SessionMembershipEvidence[] = [];
+  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: CapturedLog[]): string[] {
   const set = new Set<string>();
   for (const l of logs) {
@@ -67,9 +91,13 @@ const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
-  if (sessionId === undefined) return "/api/logs/stream";
-  const params = new URLSearchParams({ sessionId });
-  return `/api/logs/stream?${params.toString()}`;
+  const params = new URLSearchParams();
+  if (sessionId !== undefined) {
+    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: readonly CapturedLog[]): Map<number, number> {
@@ -109,6 +137,8 @@ export function ProxyViewerContainer({
   const [selectedModel, setSelectedModel] = useState("__all__");
   const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
   const [error, setError] = useState<string | null>(null);
+  const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
+  const [sessionMemberships, setSessionMemberships] = useState<SessionMembershipEvidence[]>([]);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handledHashRef = useRef<string | null>(null);
@@ -169,6 +199,7 @@ export function ProxyViewerContainer({
       eventSourceRef.current.close();
     }
 
+    setStreamInitialized(false);
     const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
 
@@ -193,6 +224,7 @@ export 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);
@@ -204,6 +236,7 @@ export function ProxyViewerContainer({
 
     es.onerror = () => {
       setError("SSE connection lost, reconnecting...");
+      setStreamInitialized(true);
       es.close();
       if (reconnectTimeoutRef.current !== null) {
         clearTimeout(reconnectTimeoutRef.current);
@@ -212,6 +245,33 @@ export function ProxyViewerContainer({
     };
   }, [initialSessionId, scheduleUpdate]);
 
+  useEffect(() => {
+    if (initialSessionId === undefined) {
+      setSessionMemberships([]);
+      return;
+    }
+
+    let cancelled = false;
+    void fetch("/api/groups")
+      .then(async (response) => {
+        if (!response.ok) return null;
+        const raw: unknown = 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]);
+
   useEffect(() => {
     connectSSE();
     return () => {
@@ -361,6 +421,8 @@ export function ProxyViewerContainer({
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
         onClearGroup={handleClearGroup}
+        isLoading={initialSessionId !== undefined && !streamInitialized}
+        sessionMemberships={sessionMemberships}
         viewMode={viewMode}
         onViewModeChange={setViewMode}
         captureMode={captureMode}

package/src/components/groups/GroupsDialog.tsx

@@ -920,21 +920,22 @@ function MemberRow({ row }: { row: GroupMemberRow }): JSX.Element {
   const errors = session?.errorCount ?? null;
   const tokens = session?.tokenUsage.total ?? null;
   const firstChunkMs = log?.firstChunkMs ?? null;
+  const sessionLabel = firstNonEmpty(member.label, member.sessionId);
 
   return (
     <tr className="border-b border-border last:border-0">
       <td className="max-w-56 px-3 py-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <a
-            href={sessionPath}
-            target="_blank"
-            rel="noreferrer"
-            className="min-w-0 truncate font-mono text-xs text-primary hover:underline"
-          >
-            {firstNonEmpty(member.label, member.sessionId)}
-          </a>
+        <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}`}
+        >
+          <span className="min-w-0 truncate">{sessionLabel}</span>
           <ExternalLink className="size-3 shrink-0 text-muted-foreground" />
-        </div>
+        </a>
         <div className="mt-0.5 truncate text-[11px] text-muted-foreground">
           {displayText(member.agent)}
         </div>

package/src/components/providers/SettingsDialog.tsx

@@ -76,6 +76,7 @@ export function SettingsDialog(): JSX.Element {
             <TabsTrigger value="providers">Providers</TabsTrigger>
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
             <TabsTrigger value="storage">Storage</TabsTrigger>
+            <TabsTrigger value="mcp">MCP</TabsTrigger>
             <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
           </TabsList>
 
@@ -101,6 +102,9 @@ export function SettingsDialog(): JSX.Element {
             <TabsContent value="storage">
               <StorageSettingsTab />
             </TabsContent>
+            <TabsContent value="mcp">
+              <McpSettingsTab />
+            </TabsContent>
             <TabsContent value="onboarding">
               <OnboardingSettingsTab />
             </TabsContent>
@@ -390,6 +394,139 @@ function OnboardingSettingsTab(): JSX.Element {
   );
 }
 
+function McpSettingsTab(): JSX.Element {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const origin = useMemo(() => {
+    if (typeof window === "undefined") return "http://localhost:25947";
+    return window.location.origin;
+  }, []);
+  const endpoint = `${origin}/api/mcp`;
+  const values = 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]\ncommand = "agent-inspector-mcp"\nargs = ["stdio", "--url", "${endpoint}"]`,
+      },
+    ],
+    [endpoint],
+  );
+
+  const handleCopy = useCallback((id: string, value: string) => {
+    void copyTextToClipboard(value).then((success) => {
+      if (!success) return;
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 1600);
+    });
+  }, []);
+
+  return (
+    <div className="min-w-0 space-y-4">
+      <div className="flex items-center gap-2">
+        <Terminal className="size-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">MCP access</h3>
+      </div>
+      <div className="grid gap-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+        <div>
+          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.
+        </div>
+        <div>
+          If the MCP client runs in another container or host, replace localhost with a reachable
+          host/IP and verify the network path.
+        </div>
+      </div>
+      <div className="grid gap-2">
+        {values.map((item) => (
+          <CopyableSetupValue
+            key={item.id}
+            id={item.id}
+            label={item.label}
+            value={item.value}
+            copiedId={copiedId}
+            onCopy={handleCopy}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function ProxySettingsTab(): JSX.Element {
   const {
     strip,