@tonyclaw/agent-inspector 2.1.15 → 2.1.17

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 = {
@@ -75,7 +81,7 @@ const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
 
 const TAB_TRIGGER_CLASS =
-  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-cyan-400/[0.05] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-cyan-300/[0.04] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+  "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:border-white/10 hover:bg-white/[0.045] hover:text-foreground data-[state=active]:border-cyan-200/25 data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 
 function createEmptyBodyPreviewState(totalBytes: number | null = null): BodyPreviewState {
   return {
@@ -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;
@@ -140,7 +190,7 @@ function ExpandedPanel({
   return (
     <div
       className={cn(
-        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-cyan-300/10 bg-[#05070a] p-3 shadow-[0_16px_45px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.05)]",
+        "border border-border bg-card shadow-sm inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
         className,
       )}
     >
@@ -151,7 +201,7 @@ function ExpandedPanel({
 
 function EmptyState({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <div className="rounded-md border border-dashed border-white/10 bg-white/[0.02] px-3 py-5 text-center text-xs italic text-muted-foreground">
+    <div className="border border-border bg-muted/40 rounded-md border-dashed px-3 py-5 text-center text-xs italic text-muted-foreground">
       {children}
     </div>
   );
@@ -159,7 +209,7 @@ function EmptyState({ children }: { children: ReactNode }): JSX.Element {
 
 function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <pre className="inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-white/10 bg-black/30 p-3 font-mono text-xs leading-relaxed text-muted-foreground">
+    <pre className="border border-border bg-card shadow-sm inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground">
       {children}
     </pre>
   );
@@ -231,7 +281,7 @@ function BodyPreviewNotice({
             type="button"
             variant="outline"
             size="sm"
-            className="h-7 border-white/10 bg-black/20 text-xs text-cyan-100 hover:border-cyan-300/35 hover:bg-cyan-400/10"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-cyan-100"
             onClick={onLoadMore}
           >
             {actionLabel}
@@ -257,13 +307,13 @@ function HeaderRows({
   if (entries.length === 0) return <EmptyState>{emptyLabel}</EmptyState>;
 
   return (
-    <div className="overflow-hidden rounded-md border border-white/10 bg-black/20 font-mono text-xs">
+    <div className="border border-border bg-card shadow-sm overflow-hidden rounded-[8px] font-mono text-xs">
       {entries.map(([key, value]) => (
         <div
           key={key}
-          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/5 last:border-b-0"
+          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/10 last:border-b-0"
         >
-          <div className="min-w-0 truncate border-r border-white/5 bg-white/[0.03] px-2.5 py-2 font-semibold text-cyan-200">
+          <div className="min-w-0 truncate border-r border-white/10 bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200">
             {key}
           </div>
           <div className="min-w-0 truncate px-2.5 py-2 text-muted-foreground" title={value}>
@@ -297,6 +347,8 @@ export type LogEntryProps = {
   cacheTrend?: CacheTrendEntry | null;
   /** Callback to open CompareDrawer with this log and its immediate predecessor. */
   onCompareWithPrevious?: (log: CapturedLog) => void;
+  /** Show client PID/project metadata on the log header row. */
+  showClientMetadata?: boolean;
 };
 
 function DiffToggleButton({
@@ -316,7 +368,7 @@ function DiffToggleButton({
             "h-8 border-white/10 text-xs shadow-none",
             active
               ? "bg-cyan-300 text-black hover:bg-cyan-200"
-              : "bg-[#0a0d11] text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100",
+              : "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-cyan-100",
           )}
           onClick={onClick}
           aria-pressed={active}
@@ -370,6 +422,7 @@ export const LogEntry = memo(function ({
   timeDisplayFormat,
   cacheTrend = null,
   onCompareWithPrevious,
+  showClientMetadata = true,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
@@ -378,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),
   );
@@ -390,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;
@@ -432,7 +491,7 @@ export const LogEntry = memo(function ({
   );
 
   // 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
+  // Only build the string when there's at least one entry; empty headers would
   // otherwise copy "{}", which is misleading.
   const headersText = useMemo(
     () =>
@@ -628,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) {
@@ -640,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]);
@@ -652,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,
@@ -662,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 () => {
@@ -681,6 +753,7 @@ export const LogEntry = memo(function ({
     log.id,
     log.rawRequestBodyBytes,
     log.responseTextBytes,
+    bodyHydrationRetryNonce,
   ]);
 
   useEffect(() => {
@@ -718,16 +791,16 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div
         className={cn(
-          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
+          "border border-border bg-card shadow-sm relative mb-2 overflow-hidden rounded-[8px] transition-[background-color,border-color,box-shadow]",
           expanded
-            ? "border-cyan-300/25 shadow-[0_24px_80px_rgba(0,0,0,0.34),0_0_0_1px_rgba(103,232,249,0.04),inset_0_1px_0_rgba(255,255,255,0.06)]"
-            : "border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.16)] hover:border-cyan-300/15",
+            ? "border-cyan-200/25 shadow-[0_24px_80px_rgba(0,0,0,0.36),0_0_0_1px_rgba(103,232,249,0.05),inset_0_1px_0_rgba(255,255,255,0.14)]"
+            : "hover:border-cyan-200/18",
         )}
       >
         <div
           className={cn(
             "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
-            expanded ? "bg-cyan-300/45 shadow-[0_0_20px_rgba(103,232,249,0.28)]" : "bg-white/10",
+            expanded ? "bg-cyan-200/55 shadow-[0_0_20px_rgba(103,232,249,0.26)]" : "bg-white/12",
           )}
           aria-hidden="true"
         />
@@ -744,6 +817,7 @@ export const LogEntry = memo(function ({
           onToggle={handleToggleExpanded}
           cacheTrend={cacheTrend}
           slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          showClientMetadata={showClientMetadata}
           timeDisplayFormat={timeDisplayFormat}
           activeTab={activeTab}
           tabActions={tabActions}
@@ -758,18 +832,18 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div
-            className="relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2"
+            className="relative border-t border-white/10 bg-black/[0.18] pt-2"
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
           >
             <div
-              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-cyan-300/[0.035] to-transparent"
+              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/[0.05] to-transparent"
               aria-hidden="true"
             />
             <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
               <TabsList
                 variant="line"
-                className="inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-cyan-300/10 bg-black/10 p-0"
+                className="border border-border bg-muted/40 inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
               >
                 {viewMode === "full" && (
                   <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
@@ -808,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"
@@ -839,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"
@@ -978,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"
@@ -1022,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"