@tonyclaw/agent-inspector 2.1.16 → 2.1.18

package/src/components/proxy-viewer/ConversationHeader.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { type ReactNode, useCallback, useState } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -21,6 +21,34 @@ import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLo
 import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
+const HEADER_ACTION_BUTTON_CLASS =
+  "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+
+function HeaderMetric({
+  icon,
+  children,
+  title,
+  className,
+}: {
+  icon: ReactNode;
+  children: ReactNode;
+  title?: string;
+  className?: string;
+}): JSX.Element {
+  return (
+    <span
+      className={cn(
+        "border border-border bg-muted/30 inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        className,
+      )}
+      title={title}
+    >
+      {icon}
+      <span className="min-w-0 font-mono tabular-nums">{children}</span>
+    </span>
+  );
+}
+
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;
@@ -112,6 +140,9 @@ export function ConversationHeader({
       ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
       : conversationId;
 
+  const timeLabel = formatTimestampRange(startTime, endTime, timeDisplayFormat);
+  const callsLabel = `${totalCalls} call${totalCalls !== 1 ? "s" : ""}`;
+
   return (
     <div
       role="button"
@@ -119,11 +150,11 @@ export function ConversationHeader({
       data-nav-id={`conv-${conversationId}`}
       data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
-        "border border-border bg-card shadow-sm flex cursor-pointer items-center gap-3 rounded-[8px] px-3 py-2 transition-colors",
+        "border border-border bg-card shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
         "hover:border-cyan-200/20",
         "select-none",
         "sticky top-0 z-10 mb-2",
-        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+        "focus-visible:ring-1 focus-visible:ring-cyan-300/35 focus-visible:outline-none",
       )}
       onClick={onToggle}
       onKeyDown={(e) => {
@@ -135,143 +166,133 @@ export function ConversationHeader({
       }}
     >
       {/* Provider logos: first visual element whenever model/provider logos are available. */}
-      <ProviderLogoStack items={providerLogoItems} ariaLabel="Models used in this session" />
+      <ProviderLogoStack
+        items={providerLogoItems}
+        ariaLabel="Models used in this session"
+        className="mt-0.5"
+      />
 
-      {/* Session identifier.
-          - Real session id (e.g. `sess_abc123...`) - render the id with the
-            standard ellipsis truncation; show `PID <n>` as a secondary pill
-            when we know the originating process.
-          - Fallback id (no sessionId was emitted) - the conversationId is
-            already a synthesized `PID:<n>|<folder>` marker; render the PID
-            as the primary identifier (purple, same weight as a real id)
-            and the project folder as a secondary muted label. */}
-      {isFallbackConversation && showProcessMetadata ? (
-        <>
-          {clientPid !== null && clientPid !== undefined ? (
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          {isFallbackConversation && showProcessMetadata ? (
+            clientPid !== null && clientPid !== undefined ? (
+              <span
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200"
+                title={`PID ${clientPid}`}
+              >
+                PID {clientPid}
+              </span>
+            ) : (
+              <span
+                className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200"
+                title={conversationId}
+              >
+                {conversationId}
+              </span>
+            )
+          ) : (
             <span
-              className="shrink-0 font-mono text-xs font-semibold text-violet-200"
-              title={`PID ${clientPid}`}
+              className="min-w-0 max-w-full truncate font-mono text-xs font-semibold text-violet-200"
+              title={conversationId}
             >
-              PID {clientPid}
-            </span>
-          ) : (
-            <span className="shrink-0 font-mono text-xs font-semibold text-violet-200">
-              {conversationId}
+              {isFallbackConversation ? "sessionless" : compactSessionLabel}
             </span>
           )}
-          {clientProjectFolder !== null &&
+
+          {!isFallbackConversation &&
+            showProcessMetadata &&
+            clientPid !== null &&
+            clientPid !== undefined && (
+              <span
+                className="border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
+                title={`Client process ID ${clientPid}`}
+              >
+                PID {clientPid}
+              </span>
+            )}
+
+          {isFallbackConversation &&
+            showProcessMetadata &&
+            clientProjectFolder !== null &&
             clientProjectFolder !== undefined &&
             clientProjectFolder !== "" && (
               <span
-                className="text-muted-foreground text-xs font-mono truncate max-w-[200px] shrink-0"
+                className="min-w-0 max-w-[240px] truncate font-mono text-xs text-muted-foreground"
                 title={clientProjectFolder}
               >
                 {clientProjectFolder}
               </span>
             )}
-        </>
-      ) : (
-        <>
-          <span
-            className="shrink-0 font-mono text-xs font-semibold text-violet-200"
-            title={conversationId}
-          >
-            {isFallbackConversation ? "sessionless" : compactSessionLabel}
-          </span>
-          {showProcessMetadata && clientPid !== null && clientPid !== undefined && (
+
+          {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              className="border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
-              title={`Client process ID ${clientPid}`}
+              className="border border-border bg-muted/30 inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground"
+              title={clientTooltip ?? clientDisplayLabel}
             >
-              PID {clientPid}
+              <ClientLogo client={clientApp} className="size-4 shrink-0" />
+              <span className="truncate font-mono tabular-nums">{clientDisplayLabel}</span>
             </span>
           )}
-        </>
-      )}
-
-      {/* Client app / User-Agent */}
-      {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
-        <span
-          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
-          title={clientTooltip ?? clientDisplayLabel}
-        >
-          <ClientLogo client={clientApp} className="size-5" />
-          <span className="font-mono tabular-nums truncate max-w-[120px]">
-            {clientDisplayLabel}
-          </span>
-        </span>
-      )}
-
-      {/* Time range */}
-      <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-        <Clock className="size-3" />
-        <span className="font-mono tabular-nums">
-          {formatTimestampRange(startTime, endTime, timeDisplayFormat)}
-        </span>
-      </span>
-
-      {/* Total calls */}
-      <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-        <MessageSquare className="size-3" />
-        <span className="font-mono tabular-nums">
-          {totalCalls} call{totalCalls !== 1 ? "s" : ""}
         </span>
-      </span>
 
-      {/* Token counts */}
-      <span className="flex items-center gap-1 text-xs shrink-0">
-        <Zap className="size-3 text-muted-foreground" />
-        <span className="font-mono tabular-nums">
-          <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
-          {" / "}
-          <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
+        <span className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5">
+          <HeaderMetric icon={<Clock className="size-3 shrink-0" />} title={timeLabel}>
+            {timeLabel}
+          </HeaderMetric>
+          <HeaderMetric icon={<MessageSquare className="size-3 shrink-0" />}>
+            {callsLabel}
+          </HeaderMetric>
+          <HeaderMetric icon={<Zap className="size-3 shrink-0" />} className="max-w-full">
+            <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
+            {" / "}
+            <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
+          </HeaderMetric>
         </span>
       </span>
 
-      {/* Spacer */}
-      <span className="flex-1 min-w-0" />
-
-      {/* Open this session in a new tab - deep link to /session/$id */}
-      <button
-        type="button"
-        onClick={handleOpenInNewTab}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleOpenInNewTab(e);
-          }
-        }}
-        aria-label={`Open session ${conversationId} in a new tab`}
-        title="Open this session in a new tab"
-        className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
-      >
-        <ExternalLink className="size-3.5" />
-      </button>
-
-      {/* Per-group Clear - does not toggle the group's expand state */}
-      {onClear !== undefined && (
+      <span className="flex shrink-0 items-start gap-1.5">
+        {/* Open this session in a new tab - deep link to /session/$id */}
         <button
           type="button"
-          onClick={handleClearClick}
-          aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
-          title="Clear this group"
-          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
+          onClick={handleOpenInNewTab}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleOpenInNewTab(e);
+            }
+          }}
+          aria-label={`Open session ${conversationId} in a new tab`}
+          title="Open this session in a new tab"
+          className={HEADER_ACTION_BUTTON_CLASS}
         >
-          <Trash2 className="size-3.5" />
+          <ExternalLink className="size-3.5" />
         </button>
-      )}
 
-      {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
-      <span
-        className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
-        aria-hidden="true"
-      >
-        {expanded ? (
-          <ChevronDown className="size-4 shrink-0" />
-        ) : isLoading ? (
-          <Loader2 className="size-4 shrink-0 animate-spin" />
-        ) : (
-          <ChevronRight className="size-4 shrink-0" />
+        {/* Per-group Clear - does not toggle the group's expand state */}
+        {onClear !== undefined && (
+          <button
+            type="button"
+            onClick={handleClearClick}
+            aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
+            title="Clear this group"
+            className={HEADER_ACTION_BUTTON_CLASS}
+          >
+            <Trash2 className="size-3.5" />
+          </button>
         )}
+
+        {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
+        <span
+          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+          aria-hidden="true"
+        >
+          {expanded ? (
+            <ChevronDown className="size-4 shrink-0" />
+          ) : isLoading ? (
+            <Loader2 className="size-4 shrink-0 animate-spin" />
+          ) : (
+            <ChevronRight className="size-4 shrink-0" />
+          )}
+        </span>
       </span>
 
       <ConfirmDialog

package/src/components/proxy-viewer/LogEntry.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, GitCompareArrows } from "lucide-react";
+import { AlertTriangle, GitCompareArrows, Loader2, RefreshCw } from "lucide-react";
 import { Suspense, type JSX, type ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
 import {
@@ -27,6 +27,12 @@ import {
 } from "./lazy";
 import type { AnatomySegment } from "./anatomy/types";
 import { useAnatomyJump } from "./anatomy/useAnatomyJump";
+import {
+  describeFullBodyHydrationError,
+  formatBodyHydrationFootprint,
+  formatBytes,
+  type FullBodyHydrationError,
+} from "./bodyHydration";
 import { computeHeadersDiff, computeRequestDiff, DiffView } from "./diff";
 import { LogEntryHeader } from "./LogEntryHeader";
 import { RequestTools } from "./RequestToolsPanel";
@@ -57,7 +63,7 @@ function resolveFocusedTab(tab: LogFocusTab, anatomySegments: AnatomySegment[] |
   }
 }
 
-type BodyHydrationState = "idle" | "loading" | "failed";
+type BodyHydrationStatus = "idle" | "loading" | "failed";
 type BodyChunkState = "idle" | "loading" | "success" | "failed";
 
 type BodyPreviewState = {
@@ -108,13 +114,6 @@ function shouldHydrateLogBody(log: CapturedLog): boolean {
   return isCompactBody(log) && !shouldUseChunkedBodyLoading(log);
 }
 
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes.toLocaleString()} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
-}
-
 function bodyPreviewErrorMessage(error: unknown): string {
   if (error instanceof ApiTimeoutError) {
     return "Body preview timed out. The log is still available on disk; try loading again.";
@@ -123,6 +122,57 @@ function bodyPreviewErrorMessage(error: unknown): string {
   return "Body preview could not be loaded.";
 }
 
+function FullBodyHydrationNotice({
+  status,
+  error,
+  footprint,
+  onRetry,
+}: {
+  status: BodyHydrationStatus;
+  error: FullBodyHydrationError | null;
+  footprint: string | null;
+  onRetry: () => void;
+}): JSX.Element | null {
+  switch (status) {
+    case "idle":
+      return null;
+    case "loading":
+      return (
+        <NoticeBlock tone="loading" title="Loading full bodies">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span className="flex min-w-0 items-center gap-2">
+              <Loader2 className="size-3.5 shrink-0 animate-spin text-cyan-200" />
+              <span>Loading full request and response bodies from the log store.</span>
+            </span>
+            {footprint !== null && (
+              <span className="rounded border border-cyan-300/15 bg-cyan-300/[0.06] px-2 py-0.5 font-mono text-[11px] text-cyan-100">
+                {footprint}
+              </span>
+            )}
+          </div>
+        </NoticeBlock>
+      );
+    case "failed":
+      return (
+        <NoticeBlock tone="warning" title={error?.title ?? "Full bodies could not be loaded"}>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <span>{error?.detail ?? "Compact metadata is still available."}</span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 gap-1.5 text-xs text-amber-100"
+              onClick={onRetry}
+            >
+              <RefreshCw className="size-3" />
+              Retry
+            </Button>
+          </div>
+        </NoticeBlock>
+      );
+  }
+}
+
 function bodyPreviewTextForView(enabled: boolean, state: BodyPreviewState): string | null {
   if (!enabled) return null;
   if (state.text !== "") return state.text;
@@ -381,7 +431,9 @@ export const LogEntry = memo(function ({
   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 [bodyHydrationStatus, setBodyHydrationStatus] = useState<BodyHydrationStatus>("idle");
+  const [bodyHydrationError, setBodyHydrationError] = useState<FullBodyHydrationError | null>(null);
+  const [bodyHydrationRetryNonce, setBodyHydrationRetryNonce] = useState(0);
   const [requestPreview, setRequestPreview] = useState<BodyPreviewState>(() =>
     createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null),
   );
@@ -393,6 +445,10 @@ export const LogEntry = memo(function ({
   const bodyHydrationInFlightRef = useRef(false);
   const displayLog = hydratedLog ?? log;
   const useChunkedBody = hydratedLog === null && shouldUseChunkedBodyLoading(log);
+  const fullBodyHydrationFootprint = useMemo(
+    () => formatBodyHydrationFootprint(log.rawRequestBodyBytes, log.responseTextBytes),
+    [log.rawRequestBodyBytes, log.responseTextBytes],
+  );
   const requestPreviewBody = bodyPreviewTextForView(useChunkedBody, requestPreview);
   const responsePreviewBody = bodyPreviewTextForView(useChunkedBody, responsePreview);
   const rawRequestBodyForView = displayLog.rawRequestBody ?? requestPreviewBody;
@@ -631,6 +687,14 @@ export const LogEntry = memo(function ({
     [log.id],
   );
 
+  const retryFullBodyHydration = useCallback(() => {
+    if (bodyHydrationInFlightRef.current) return;
+    setHydratedLog(null);
+    setBodyHydrationStatus("idle");
+    setBodyHydrationError(null);
+    setBodyHydrationRetryNonce((current) => current + 1);
+  }, []);
+
   const handleToggleExpanded = useCallback(() => {
     const nextExpanded = !expanded;
     if (nextExpanded) {
@@ -643,7 +707,9 @@ export const LogEntry = memo(function ({
     logIdRef.current = log.id;
     bodyHydrationInFlightRef.current = false;
     setHydratedLog(null);
-    setBodyHydrationState("idle");
+    setBodyHydrationStatus("idle");
+    setBodyHydrationError(null);
+    setBodyHydrationRetryNonce(0);
     setRequestPreview(createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null));
     setResponsePreview(createEmptyBodyPreviewState(log.responseTextBytes ?? null));
   }, [log.id, log.rawRequestBodyBytes, log.responseTextBytes]);
@@ -655,7 +721,8 @@ export const LogEntry = memo(function ({
 
     let cancelled = false;
     bodyHydrationInFlightRef.current = true;
-    setBodyHydrationState("loading");
+    setBodyHydrationStatus("loading");
+    setBodyHydrationError(null);
     void fetchJsonWithTimeout(
       `/api/logs/${String(log.id)}`,
       CapturedLogSchema,
@@ -665,12 +732,14 @@ export const LogEntry = memo(function ({
         if (cancelled) return;
         bodyHydrationInFlightRef.current = false;
         setHydratedLog(fullLog);
-        setBodyHydrationState("idle");
+        setBodyHydrationStatus("idle");
+        setBodyHydrationError(null);
       })
-      .catch(() => {
+      .catch((error: unknown) => {
         if (cancelled) return;
         bodyHydrationInFlightRef.current = false;
-        setBodyHydrationState("failed");
+        setBodyHydrationStatus("failed");
+        setBodyHydrationError(describeFullBodyHydrationError(error));
       });
 
     return () => {
@@ -684,6 +753,7 @@ export const LogEntry = memo(function ({
     log.id,
     log.rawRequestBodyBytes,
     log.responseTextBytes,
+    bodyHydrationRetryNonce,
   ]);
 
   useEffect(() => {
@@ -812,6 +882,12 @@ export const LogEntry = memo(function ({
                 <TabsContent value="raw-request">
                   {activeTab === "raw-request" && (
                     <ExpandedPanel>
+                      <FullBodyHydrationNotice
+                        status={bodyHydrationStatus}
+                        error={bodyHydrationError}
+                        footprint={fullBodyHydrationFootprint}
+                        onRetry={retryFullBodyHydration}
+                      />
                       {useChunkedBody && (
                         <BodyPreviewNotice
                           label="Request"
@@ -843,17 +919,12 @@ export const LogEntry = memo(function ({
               <TabsContent value="request">
                 {activeTab === "request" && (
                   <ExpandedPanel>
-                    {bodyHydrationState === "loading" && (
-                      <NoticeBlock tone="loading">
-                        Loading full request and response bodies...
-                      </NoticeBlock>
-                    )}
-                    {bodyHydrationState === "failed" && (
-                      <NoticeBlock tone="warning">
-                        Full request and response bodies could not be loaded. Compact metadata is
-                        still available.
-                      </NoticeBlock>
-                    )}
+                    <FullBodyHydrationNotice
+                      status={bodyHydrationStatus}
+                      error={bodyHydrationError}
+                      footprint={fullBodyHydrationFootprint}
+                      onRetry={retryFullBodyHydration}
+                    />
                     {useChunkedBody && (
                       <BodyPreviewNotice
                         label="Request"
@@ -982,6 +1053,12 @@ export const LogEntry = memo(function ({
               <TabsContent value="raw">
                 {activeTab === "raw" && (
                   <ExpandedPanel className="space-y-3">
+                    <FullBodyHydrationNotice
+                      status={bodyHydrationStatus}
+                      error={bodyHydrationError}
+                      footprint={fullBodyHydrationFootprint}
+                      onRetry={retryFullBodyHydration}
+                    />
                     {useChunkedBody && (
                       <BodyPreviewNotice
                         label="Response"
@@ -1026,6 +1103,12 @@ export const LogEntry = memo(function ({
               <TabsContent value="parsed">
                 {activeTab === "parsed" && (
                   <ExpandedPanel>
+                    <FullBodyHydrationNotice
+                      status={bodyHydrationStatus}
+                      error={bodyHydrationError}
+                      footprint={fullBodyHydrationFootprint}
+                      onRetry={retryFullBodyHydration}
+                    />
                     {useChunkedBody && (
                       <BodyPreviewNotice
                         label="Response"