@tonyclaw/llm-inspector 1.16.4 → 1.17.0

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

@@ -1,25 +1,40 @@
-import { Check, Copy, GitCompareArrows, RotateCcw } from "lucide-react";
-import type { JSX } from "react";
+import { Check, Copy, GitCompareArrows } from "lucide-react";
+import { Suspense, type JSX } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
-import { cn } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import {
-  JsonViewer,
-  JsonViewerFromString,
-  JsonExpansionButton,
-  useJsonBulkExpansion,
-} from "../ui/json-viewer";
+import { JsonExpansionButton } from "../ui/json-expansion-button";
+import { useJsonBulkExpansion } from "../ui/json-viewer-bulk";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import {
+  LazyJsonViewer,
+  LazyJsonViewerFromString,
+  LazyReplayDialog,
+  LazyRequestAnatomy,
+  LazyResponseView,
+  LazyStreamingChunkSequence,
+} from "./lazy";
+import type { AnatomySegment } from "./anatomy/types";
+import { useAnatomyJump } from "./anatomy/useAnatomyJump";
 import { computeHeadersDiff, computeRequestDiff, DiffView } from "./diff";
 import { LogEntryHeader } from "./LogEntryHeader";
-import { ReplayDialog } from "./ReplayDialog";
-import { ResponseView } from "./ResponseView";
-import { StreamingChunkSequence } from "./StreamingChunkSequence";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
+import {
+  shouldShowHeadersDiffButton,
+  shouldShowRawRequestTab,
+  shouldShowRequestDiffButton,
+} from "./logEntryVisibility";
+
+/**
+ * Lightweight fallback for lazy-loaded tabs. Renders an empty 1px-tall row so
+ * the layout doesn't jump while the chunk is fetching.
+ */
+function TabFallback(): JSX.Element {
+  return <div className="h-1" aria-hidden="true" />;
+}
 
 export type LogEntryProps = {
   log: CapturedLog;
@@ -30,6 +45,8 @@ export type LogEntryProps = {
    * cost).
    */
   strip: boolean;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds: number;
   /**
    * Per-log cache token trend, looked up in the viewer-level trend map.
    * `null` (or absent) means the header should render with no arrows.
@@ -39,46 +56,6 @@ export type LogEntryProps = {
   onCompareWithPrevious?: (log: CapturedLog) => void;
 };
 
-/**
- * Pure visibility rule for the "Raw Request" tab. Extracted so it can be
- * unit-tested without rendering React. The tab appears only when all three
- * are true: anthropic format, full view mode, strip toggle enabled.
- */
-export function shouldShowRawRequestTab(
-  apiFormat: string,
-  viewMode: "simple" | "full",
-  strip: boolean,
-): boolean {
-  return apiFormat === "anthropic" && viewMode === "full" && strip;
-}
-
-/**
- * Pure visibility rule for the "Diff with Raw" button in the Headers tab.
- * The button only makes sense when the user is in full mode (where the
- * `Raw Headers` tab is shown) and we actually captured raw headers.
- */
-export function shouldShowHeadersDiffButton(
-  viewMode: "simple" | "full",
-  hasRawHeaders: boolean,
-): boolean {
-  return viewMode === "full" && hasRawHeaders;
-}
-
-/**
- * Pure visibility rule for the "Diff with Raw" button in the Request tab.
- * Mirrors the conditions for the `Raw Request` tab itself: full mode plus
- * the strip toggle being on for an anthropic-format request. We also need
- * an actual raw request body to diff against.
- */
-export function shouldShowRequestDiffButton(
-  apiFormat: string,
-  viewMode: "simple" | "full",
-  strip: boolean,
-  hasRawRequest: boolean,
-): boolean {
-  return apiFormat === "anthropic" && viewMode === "full" && strip && hasRawRequest;
-}
-
 function CopyButton({
   text,
   label,
@@ -92,23 +69,25 @@ function CopyButton({
 }): JSX.Element | null {
   if (text === null) return null;
   return (
-    <button
-      type="button"
-      onClick={onCopy}
-      className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-muted"
-    >
-      {copied ? (
-        <>
-          <Check className="size-3 text-green-500" />
-          <span className="text-green-500">Copied!</span>
-        </>
-      ) : (
-        <>
-          <Copy className="size-3" />
-          <span>{label}</span>
-        </>
-      )}
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 text-xs"
+          onClick={onCopy}
+          aria-label={label}
+        >
+          {copied ? (
+            <Check className="size-3.5 mr-1 text-emerald-500" />
+          ) : (
+            <Copy className="size-3.5 mr-1" />
+          )}
+          {copied ? "Copied!" : label}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{copied ? "Copied to clipboard" : label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -122,20 +101,16 @@ function DiffToggleButton({
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
-          type="button"
+        <Button
+          variant={active ? "default" : "outline"}
+          size="sm"
+          className="h-8 text-xs"
           onClick={onClick}
           aria-pressed={active}
-          className={cn(
-            "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
-            active
-              ? "bg-primary/10 text-primary"
-              : "text-muted-foreground hover:text-foreground hover:bg-muted",
-          )}
         >
-          <GitCompareArrows className="size-3" />
+          <GitCompareArrows className="size-3.5 mr-1" />
           {active ? "Showing diff" : "Diff with Raw"}
-        </button>
+        </Button>
       </TooltipTrigger>
       <TooltipContent>
         {active ? "Hide diff view" : "Compare proxy output against the original raw version"}
@@ -207,6 +182,7 @@ export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
   strip,
+  slowResponseThresholdSeconds,
   cacheTrend = null,
   onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
@@ -215,6 +191,8 @@ export const LogEntry = memo(function ({
   const [headersDiff, setHeadersDiff] = useState<boolean>(false);
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState("request");
+  const [expandToPath, setExpandToPath] = useState<string | null>(null);
+  const requestJsonRef = useRef<HTMLDivElement | null>(null);
   const resolvedFormat = resolveLogFormat(log);
   const adapter = getLogFormatAdapter(resolvedFormat);
   const requestAnalysis = useMemo(
@@ -237,6 +215,24 @@ export const LogEntry = memo(function ({
   const responseCopy = useCopyFeedback(log.responseText);
   const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
   const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const anatomySegments = useMemo(
+    () =>
+      requestExpansion.parsedData !== null
+        ? adapter.anatomySegments(requestExpansion.parsedData)
+        : null,
+    [adapter, requestExpansion.parsedData],
+  );
+  const anatomyPaths = useMemo(() => {
+    if (anatomySegments === null) return undefined;
+    return new Set(anatomySegments.map((s) => s.path));
+  }, [anatomySegments]);
+  const jumpToAnatomySegment = useAnatomyJump({
+    containerRef: requestJsonRef,
+    setExpandToPath,
+    ensureTabActive: () => {
+      if (activeTab !== "request") setActiveTab("request");
+    },
+  });
 
   return (
     <TooltipProvider>
@@ -249,6 +245,31 @@ export const LogEntry = memo(function ({
           onToggle={() => setExpanded(!expanded)}
           responseToolNames={responseAnalysis.toolNames}
           cacheTrend={cacheTrend}
+          slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          onReplay={
+            onCompareWithPrevious === undefined
+              ? undefined
+              : () => {
+                  setReplayOpen(true);
+                }
+          }
+          onCopyRequest={
+            displayedRequestBody === null
+              ? undefined
+              : (e) => {
+                  requestCopy.copy(e);
+                }
+          }
+          requestCopied={requestCopy.copied}
+          onToggleRequestExpansion={requestExpansion.toggle}
+          requestExpansionState={
+            requestExpansion.policy === null
+              ? null
+              : {
+                  isExpanded: requestExpansion.isExpanded,
+                  isPending: requestExpansion.isPending,
+                }
+          }
         />
 
         {expanded && (
@@ -261,6 +282,7 @@ export const LogEntry = memo(function ({
                   <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
                 )}
                 <TabsTrigger value="request">Request</TabsTrigger>
+                {anatomySegments !== null && <TabsTrigger value="anatomy">Anatomy</TabsTrigger>}
                 {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
                 <TabsTrigger value="parsed">Response</TabsTrigger>
               </TabsList>
@@ -268,7 +290,7 @@ export const LogEntry = memo(function ({
               {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
                 <TabsContent value="raw-request">
                   {activeTab === "raw-request" && (
-                    <div className="px-4 py-3">
+                    <div className="px-4 pt-1 pb-3">
                       <div className="flex justify-end gap-2 mb-2">
                         <JsonExpansionButton
                           policy={rawRequestExpansion.policy}
@@ -286,11 +308,13 @@ export const LogEntry = memo(function ({
                       {log.rawRequestBody === null ? (
                         <p className="text-xs text-muted-foreground italic">No request body</p>
                       ) : rawRequestExpansion.parsedData !== null ? (
-                        <JsonViewer
-                          data={rawRequestExpansion.parsedData}
-                          bulkDepth={rawRequestExpansion.bulkDepth}
-                          bulkRevision={rawRequestExpansion.bulkRevision}
-                        />
+                        <Suspense fallback={<TabFallback />}>
+                          <LazyJsonViewer
+                            data={rawRequestExpansion.parsedData}
+                            bulkDepth={rawRequestExpansion.bulkDepth}
+                            bulkRevision={rawRequestExpansion.bulkRevision}
+                          />
+                        </Suspense>
                       ) : (
                         <pre className="font-mono text-xs whitespace-pre-wrap break-words">
                           {log.rawRequestBody}
@@ -303,100 +327,104 @@ export const LogEntry = memo(function ({
 
               <TabsContent value="request">
                 {activeTab === "request" && (
-                  <div className="px-4 py-3">
-                    <div className="flex justify-end gap-2 mb-2">
-                      {shouldShowRequestDiffButton(
-                        resolvedFormat,
-                        viewMode,
-                        strip,
-                        log.rawRequestBody !== null,
-                      ) && (
-                        <DiffToggleButton
-                          active={requestDiff}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setRequestDiff(!requestDiff);
-                          }}
-                        />
-                      )}
-                      {onCompareWithPrevious !== undefined && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="h-7 text-xs"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                onCompareWithPrevious(log);
-                              }}
-                            >
-                              <GitCompareArrows className="size-3 mr-1" />
-                              Diff with Previous
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            Compare this request with the immediately preceding one
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-7 text-xs"
+                  <div className="px-4 pt-1 pb-3">
+                    {/* Per-tab secondary actions (diff toggles, compare-with-previous).
+                        Replay / Copy / Expand-all JSON now live in the header. */}
+                    {(shouldShowRequestDiffButton(
+                      resolvedFormat,
+                      viewMode,
+                      strip,
+                      log.rawRequestBody !== null,
+                    ) ||
+                      onCompareWithPrevious !== undefined) && (
+                      <div className="flex justify-end gap-2 mb-2">
+                        {shouldShowRequestDiffButton(
+                          resolvedFormat,
+                          viewMode,
+                          strip,
+                          log.rawRequestBody !== null,
+                        ) && (
+                          <DiffToggleButton
+                            active={requestDiff}
                             onClick={(e) => {
                               e.stopPropagation();
-                              setReplayOpen(true);
+                              setRequestDiff(!requestDiff);
                             }}
-                          >
-                            <RotateCcw className="size-3 mr-1" />
-                            Replay
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>Re-send this request to the provider</TooltipContent>
-                      </Tooltip>
-                      <JsonExpansionButton
-                        policy={requestExpansion.policy}
-                        isExpanded={requestExpansion.isExpanded}
-                        isPending={requestExpansion.isPending}
-                        onToggle={requestExpansion.toggle}
-                      />
-                      <CopyButton
-                        text={displayedRequestBody}
-                        label="Copy"
-                        copied={requestCopy.copied}
-                        onCopy={requestCopy.copy}
-                      />
-                    </div>
+                          />
+                        )}
+                        {onCompareWithPrevious !== undefined && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-8 text-xs"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onCompareWithPrevious(log);
+                                }}
+                              >
+                                <GitCompareArrows className="size-3 mr-1" />
+                                Diff with Previous
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              Compare this request with the immediately preceding one
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
+                    )}
                     {requestDiff ? (
                       <RequestDiffContent
                         rawBody={log.rawRequestBody}
                         displayedBody={displayedRequestBody}
                         emptyLabel="No transformation applied — raw and sent request bodies are identical."
                       />
-                    ) : displayedRequestBody === null ? (
-                      <p className="text-xs text-muted-foreground italic">No request body</p>
-                    ) : requestExpansion.parsedData !== null ? (
-                      <JsonViewer
-                        data={requestExpansion.parsedData}
-                        bulkDepth={requestExpansion.bulkDepth}
-                        bulkRevision={requestExpansion.bulkRevision}
-                      />
                     ) : (
-                      <pre className="font-mono text-xs whitespace-pre-wrap break-words">
-                        {displayedRequestBody}
-                      </pre>
+                      <div ref={requestJsonRef}>
+                        {displayedRequestBody === null ? (
+                          <p className="text-xs text-muted-foreground italic">No request body</p>
+                        ) : requestExpansion.parsedData !== null ? (
+                          <Suspense fallback={<TabFallback />}>
+                            <LazyJsonViewer
+                              data={requestExpansion.parsedData}
+                              bulkDepth={requestExpansion.bulkDepth}
+                              bulkRevision={requestExpansion.bulkRevision}
+                              anatomyPaths={anatomyPaths}
+                              expandToPath={expandToPath}
+                            />
+                          </Suspense>
+                        ) : (
+                          <pre className="font-mono text-xs whitespace-pre-wrap break-words">
+                            {displayedRequestBody}
+                          </pre>
+                        )}
+                      </div>
                     )}
                   </div>
                 )}
               </TabsContent>
 
+              {anatomySegments !== null && (
+                <TabsContent value="anatomy">
+                  {activeTab === "anatomy" && (
+                    <Suspense fallback={<TabFallback />}>
+                      <LazyRequestAnatomy
+                        parsed={null}
+                        inputTokens={log.inputTokens ?? null}
+                        segments={anatomySegments}
+                        onSegmentActivate={jumpToAnatomySegment}
+                      />
+                    </Suspense>
+                  )}
+                </TabsContent>
+              )}
+
               {viewMode === "full" && (
                 <TabsContent value="headers">
                   {activeTab === "headers" && (
-                    <div className="px-4 py-3">
+                    <div className="px-4 pt-1 pb-3">
                       <div className="flex justify-end gap-2 mb-2">
                         {shouldShowHeadersDiffButton(
                           viewMode,
@@ -443,7 +471,7 @@ export const LogEntry = memo(function ({
               {viewMode === "full" && (
                 <TabsContent value="raw-headers">
                   {activeTab === "raw-headers" && (
-                    <div className="px-4 py-3">
+                    <div className="px-4 pt-1 pb-3">
                       {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">
                           {Object.entries(log.rawHeaders)
@@ -471,7 +499,7 @@ export const LogEntry = memo(function ({
 
               <TabsContent value="raw">
                 {activeTab === "raw" && (
-                  <div className="px-4 py-3 space-y-3">
+                  <div className="px-4 pt-1 pb-3 space-y-3">
                     {log.error !== undefined && log.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>
@@ -487,15 +515,19 @@ export const LogEntry = memo(function ({
                       />
                     </div>
                     {log.responseText !== null ? (
-                      <JsonViewerFromString text={log.responseText} defaultExpandDepth={0} />
+                      <Suspense fallback={<TabFallback />}>
+                        <LazyJsonViewerFromString text={log.responseText} defaultExpandDepth={0} />
+                      </Suspense>
                     ) : (
                       <p className="text-xs text-muted-foreground italic">No response</p>
                     )}
                     {log.streaming === true && (
-                      <StreamingChunkSequence
-                        logId={log.id}
-                        truncated={log.streamingChunksPath !== null}
-                      />
+                      <Suspense fallback={<TabFallback />}>
+                        <LazyStreamingChunkSequence
+                          logId={log.id}
+                          truncated={log.streamingChunksPath !== null}
+                        />
+                      </Suspense>
                     )}
                   </div>
                 )}
@@ -503,18 +535,20 @@ export const LogEntry = memo(function ({
 
               <TabsContent value="parsed">
                 {activeTab === "parsed" && (
-                  <div className="px-4 py-3">
-                    <ResponseView
-                      responseText={log.responseText}
-                      responseStatus={log.responseStatus}
-                      streaming={log.streaming}
-                      inputTokens={log.inputTokens}
-                      outputTokens={log.outputTokens}
-                      cacheCreationInputTokens={log.cacheCreationInputTokens}
-                      cacheReadInputTokens={log.cacheReadInputTokens}
-                      apiFormat={resolvedFormat}
-                      error={log.error}
-                    />
+                  <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}
+                        apiFormat={resolvedFormat}
+                        error={log.error}
+                      />
+                    </Suspense>
                   </div>
                 )}
               </TabsContent>
@@ -522,7 +556,9 @@ export const LogEntry = memo(function ({
           </div>
         )}
       </div>
-      <ReplayDialog log={log} open={replayOpen} onOpenChange={setReplayOpen} />
+      <Suspense fallback={null}>
+        <LazyReplayDialog log={log} open={replayOpen} onOpenChange={setReplayOpen} />
+      </Suspense>
     </TooltipProvider>
   );
 });