@tonyclaw/agent-inspector 2.0.42 → 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/proxy-viewer/LogEntry.tsx

@@ -1,7 +1,8 @@
 import { AlertTriangle, GitCompareArrows } from "lucide-react";
 import { Suspense, type JSX } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
-import type { CapturedLog } from "../../contracts";
+import { CapturedLogSchema, type CapturedLog } from "../../contracts";
+import { fetchJson } from "../../lib/apiClient";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
@@ -50,6 +51,12 @@ function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] |
   }
 }
 
+type BodyHydrationState = "idle" | "loading" | "failed";
+
+function shouldHydrateLogBody(log: CapturedLog): boolean {
+  return log.bodyContentMode === "compact" || log.bodyContentMode === "truncated";
+}
+
 export type LogEntryProps = {
   log: CapturedLog;
   viewMode?: "simple" | "full";
@@ -144,53 +151,56 @@ export const LogEntry = memo(function ({
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState("request");
   const [expandToPath, setExpandToPath] = useState<string | null>(null);
+  const [hydratedLog, setHydratedLog] = useState<CapturedLog | null>(null);
+  const [bodyHydrationState, setBodyHydrationState] = useState<BodyHydrationState>("idle");
   const requestJsonRef = useRef<HTMLDivElement | null>(null);
-  const resolvedFormat = resolveLogFormat(log);
+  const displayLog = hydratedLog ?? log;
+  const resolvedFormat = resolveLogFormat(displayLog);
   const adapter = getLogFormatAdapter(resolvedFormat);
   const requestAnalysis = useMemo(
-    () => adapter.analyzeRequest(log.rawRequestBody),
-    [adapter, log.rawRequestBody],
+    () => adapter.analyzeRequest(displayLog.rawRequestBody),
+    [adapter, displayLog.rawRequestBody],
   );
   const responseAnalysis = useMemo(
-    () => adapter.analyzeResponse(log.responseText),
-    [adapter, log.responseText],
+    () => adapter.analyzeResponse(displayLog.responseText),
+    [adapter, displayLog.responseText],
   );
   const strippedRequestBody = 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);
 
   // Headers are rendered as a flat list, so we copy them as pretty-printed JSON.
   // Only build the string when there's at least one entry — empty headers would
   // otherwise copy "{}", which is misleading.
   const headersText = useMemo(
     () =>
-      log.headers && Object.keys(log.headers).length > 0
-        ? JSON.stringify(log.headers, null, 2)
+      displayLog.headers && Object.keys(displayLog.headers).length > 0
+        ? JSON.stringify(displayLog.headers, null, 2)
         : null,
-    [log.headers],
+    [displayLog.headers],
   );
   const rawHeadersText = useMemo(
     () =>
-      log.rawHeaders && Object.keys(log.rawHeaders).length > 0
-        ? JSON.stringify(log.rawHeaders, null, 2)
+      displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0
+        ? JSON.stringify(displayLog.rawHeaders, null, 2)
         : null,
-    [log.rawHeaders],
+    [displayLog.rawHeaders],
   );
 
   // One copy-feedback hook per JSON-bearing tab, so each tab can surface its
   // own Copy button in the header with independent "Copied!" feedback.
   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);
 
   // Per-tab action bundles consumed by the header. The header renders the
   // entry whose key matches `activeTab`. Tabs without an entry (Context,
@@ -214,7 +224,7 @@ export const LogEntry = memo(function ({
           resolvedFormat,
           viewMode,
           strip,
-          log.rawRequestBody !== null,
+          displayLog.rawRequestBody !== null,
         )
           ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) }
           : undefined,
@@ -222,12 +232,12 @@ export const LogEntry = memo(function ({
           onCompareWithPrevious === undefined
             ? undefined
             : () => {
-                onCompareWithPrevious(log);
+                onCompareWithPrevious(displayLog);
               },
       },
       "raw-request": {
         copyLabel: "Copy raw request",
-        copyText: log.rawRequestBody,
+        copyText: displayLog.rawRequestBody,
         copyCopied: rawRequestCopy.copied,
         onCopy: rawRequestCopy.copy,
         expansion: {
@@ -253,7 +263,7 @@ export const LogEntry = memo(function ({
       },
       raw: {
         copyLabel: "Copy response",
-        copyText: log.responseText,
+        copyText: displayLog.responseText,
         copyCopied: responseCopy.copied,
         onCopy: responseCopy.copy,
         expansion: {
@@ -268,14 +278,15 @@ export const LogEntry = memo(function ({
       requestCopy,
       requestExpansion,
       requestDiff,
-      log.rawRequestBody,
+      displayLog,
+      displayLog.rawRequestBody,
       rawRequestCopy,
       rawRequestExpansion,
       headersText,
       headersCopy,
       rawHeadersText,
       rawHeadersCopy,
-      log.responseText,
+      displayLog.responseText,
       responseCopy,
       responseExpansion,
       resolvedFormat,
@@ -295,7 +306,7 @@ export const LogEntry = memo(function ({
     () => parseRequestTools(requestExpansion.parsedData),
     [requestExpansion.parsedData],
   );
-  const warnings = log.warnings ?? [];
+  const warnings = displayLog.warnings ?? [];
   const anatomyPaths = useMemo(() => {
     if (anatomySegments === null) return undefined;
     return new Set(anatomySegments.map((s) => s.path));
@@ -316,6 +327,34 @@ export const LogEntry = memo(function ({
     setExpanded(nextExpanded);
   }, [anatomySegments, expanded]);
 
+  useEffect(() => {
+    setHydratedLog(null);
+    setBodyHydrationState("idle");
+  }, [log.id]);
+
+  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]);
+
   useEffect(() => {
     const handleLogFocusRequest = (event: Event): void => {
       const request = readLogFocusRequest(event);
@@ -335,7 +374,7 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div className="border border-border rounded-lg mb-1 overflow-hidden">
         <LogEntryHeader
-          log={log}
+          log={displayLog}
           messageCount={requestAnalysis.messageCount}
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
@@ -373,7 +412,7 @@ export const LogEntry = memo(function ({
                 <TabsContent value="raw-request">
                   {activeTab === "raw-request" && (
                     <div className="px-4 pt-1 pb-3">
-                      {log.rawRequestBody === null ? (
+                      {displayLog.rawRequestBody === null ? (
                         <p className="text-xs text-muted-foreground italic">No request body</p>
                       ) : rawRequestExpansion.parsedData !== null ? (
                         <Suspense fallback={<TabFallback />}>
@@ -385,7 +424,7 @@ export const LogEntry = memo(function ({
                         </Suspense>
                       ) : (
                         <pre className="font-mono text-xs whitespace-pre-wrap break-words">
-                          {log.rawRequestBody}
+                          {displayLog.rawRequestBody}
                         </pre>
                       )}
                     </div>
@@ -396,6 +435,17 @@ export const LogEntry = memo(function ({
               <TabsContent value="request">
                 {activeTab === "request" && (
                   <div className="px-4 pt-1 pb-3">
+                    {bodyHydrationState === "loading" && (
+                      <div className="mb-3 rounded border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
+                        Loading full request and response bodies...
+                      </div>
+                    )}
+                    {bodyHydrationState === "failed" && (
+                      <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200">
+                        Full request and response bodies could not be loaded. Compact metadata is
+                        still available.
+                      </div>
+                    )}
                     {warnings.length > 0 && (
                       <div className="mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs">
                         <div className="flex items-center gap-2 font-semibold text-amber-300">
@@ -418,7 +468,7 @@ export const LogEntry = memo(function ({
                         the diff or JSON view, depending on toggle state. */}
                     {requestDiff ? (
                       <RequestDiffContent
-                        rawBody={log.rawRequestBody}
+                        rawBody={displayLog.rawRequestBody}
                         displayedBody={displayedRequestBody}
                         emptyLabel="No transformation applied; raw and sent request bodies are identical."
                       />
@@ -453,8 +503,8 @@ export const LogEntry = memo(function ({
                     <Suspense fallback={<TabFallback />}>
                       <LazyRequestAnatomy
                         parsed={requestExpansion.parsedData}
-                        inputTokens={log.inputTokens ?? null}
-                        model={log.model}
+                        inputTokens={displayLog.inputTokens ?? null}
+                        model={displayLog.model}
                         segments={anatomySegments}
                         onSegmentActivate={jumpToAnatomySegment}
                       />
@@ -471,7 +521,8 @@ export const LogEntry = memo(function ({
                       <div className="flex justify-end gap-2 mb-2">
                         {shouldShowHeadersDiffButton(
                           viewMode,
-                          log.rawHeaders !== undefined && Object.keys(log.rawHeaders).length > 0,
+                          displayLog.rawHeaders !== undefined &&
+                            Object.keys(displayLog.rawHeaders).length > 0,
                         ) && (
                           <DiffToggleButton
                             active={headersDiff}
@@ -484,13 +535,13 @@ export const LogEntry = memo(function ({
                       </div>
                       {headersDiff ? (
                         <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 ? (
+                      ) : displayLog.headers && Object.keys(displayLog.headers).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">
-                          {Object.entries(log.headers)
+                          {Object.entries(displayLog.headers)
                             .sort(([a], [b]) => a.localeCompare(b))
                             .map(([key, value]) => (
                               <div key={key} className="flex gap-2">
@@ -516,9 +567,9 @@ export const LogEntry = memo(function ({
                   {activeTab === "raw-headers" && (
                     <div className="px-4 pt-1 pb-3">
                       {/* Copy lives in the log header. */}
-                      {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
+                      {displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">
-                          {Object.entries(log.rawHeaders)
+                          {Object.entries(displayLog.rawHeaders)
                             .sort(([a], [b]) => a.localeCompare(b))
                             .map(([key, value]) => (
                               <div key={key} className="flex gap-2">
@@ -544,16 +595,16 @@ export const LogEntry = memo(function ({
               <TabsContent value="raw">
                 {activeTab === "raw" && (
                   <div className="px-4 pt-1 pb-3 space-y-3">
-                    {log.error !== undefined && log.error !== null && (
+                    {displayLog.error !== undefined && displayLog.error !== null && (
                       <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
                         <div className="font-semibold text-destructive mb-1">SSE Error</div>
-                        <div className="text-muted-foreground font-mono">{log.error}</div>
+                        <div className="text-muted-foreground font-mono">{displayLog.error}</div>
                       </div>
                     )}
-                    {log.responseText !== null ? (
+                    {displayLog.responseText !== null ? (
                       <Suspense fallback={<TabFallback />}>
                         <LazyJsonViewerFromString
-                          text={log.responseText}
+                          text={displayLog.responseText}
                           defaultExpandDepth={0}
                           bulkDepth={responseExpansion.bulkDepth}
                           bulkRevision={responseExpansion.bulkRevision}
@@ -562,11 +613,11 @@ export const LogEntry = memo(function ({
                     ) : (
                       <p className="text-xs text-muted-foreground italic">No response</p>
                     )}
-                    {log.streaming === true && (
+                    {displayLog.streaming === true && (
                       <Suspense fallback={<TabFallback />}>
                         <LazyStreamingChunkSequence
-                          logId={log.id}
-                          truncated={log.streamingChunksPath !== null}
+                          logId={displayLog.id}
+                          truncated={displayLog.streamingChunksPath !== null}
                         />
                       </Suspense>
                     )}
@@ -579,15 +630,15 @@ export const LogEntry = memo(function ({
                   <div className="px-4 pt-1 pb-3">
                     <Suspense fallback={<TabFallback />}>
                       <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}
                       />
                     </Suspense>
                   </div>
@@ -598,7 +649,7 @@ export const LogEntry = memo(function ({
         )}
       </div>
       <Suspense fallback={null}>
-        <LazyReplayDialog log={log} open={replayOpen} onOpenChange={setReplayOpen} />
+        <LazyReplayDialog log={displayLog} open={replayOpen} onOpenChange={setReplayOpen} />
       </Suspense>
     </TooltipProvider>
   );

package/src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       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}

package/.output/public/assets/_sessionId-CbWEG5ej.js

@@ -1 +0,0 @@
-import{R as s,j as e}from"./main-DOy_Q96H.js";import{P as i}from"./ProxyViewerContainer-CE9pAX4c.js";function t(){const{sessionId:o}=s.useParams();return e.jsx(i,{initialSessionId:o},o)}export{t as component};