@tonyclaw/llm-inspector 1.15.1 → 1.16.0

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

@@ -209,6 +209,7 @@ export const LogEntry = memo(function ({
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
   const [headersDiff, setHeadersDiff] = useState<boolean>(false);
   const [requestDiff, setRequestDiff] = useState<boolean>(false);
+  const [activeTab, setActiveTab] = useState("request");
   const resolvedFormat = resolveLogFormat(log);
   const adapter = getLogFormatAdapter(resolvedFormat);
   const requestAnalysis = useMemo(
@@ -232,7 +233,7 @@ export const LogEntry = memo(function ({
 
   return (
     <TooltipProvider>
-      <div className="border border-border rounded-lg mb-1.5 overflow-hidden">
+      <div className="border border-border rounded-lg mb-1 overflow-hidden">
         <LogEntryHeader
           log={log}
           messageCount={requestAnalysis.messageCount}
@@ -245,7 +246,7 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
-            <Tabs defaultValue="request">
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
               <TabsList className="mx-4 mt-2">
                 {viewMode === "full" && (
                   <Tooltip>
@@ -289,42 +290,65 @@ export const LogEntry = memo(function ({
 
               {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
                 <TabsContent value="raw-request">
-                  <div className="px-4 py-3">
-                    <div className="flex justify-end mb-2">
-                      <CopyButton
-                        text={log.rawRequestBody}
-                        label="Copy Raw Request"
-                        copied={rawRequestCopy.copied}
-                        onCopy={rawRequestCopy.copy}
-                      />
+                  {activeTab === "raw-request" && (
+                    <div className="px-4 py-3">
+                      <div className="flex justify-end mb-2">
+                        <CopyButton
+                          text={log.rawRequestBody}
+                          label="Copy Raw Request"
+                          copied={rawRequestCopy.copied}
+                          onCopy={rawRequestCopy.copy}
+                        />
+                      </div>
+                      {log.rawRequestBody !== null ? (
+                        <JsonViewerFromString text={log.rawRequestBody} defaultExpandDepth={1} />
+                      ) : (
+                        <p className="text-xs text-muted-foreground italic">No request body</p>
+                      )}
                     </div>
-                    {log.rawRequestBody !== null ? (
-                      <JsonViewerFromString text={log.rawRequestBody} defaultExpandDepth={1} />
-                    ) : (
-                      <p className="text-xs text-muted-foreground italic">No request body</p>
-                    )}
-                  </div>
+                  )}
                 </TabsContent>
               )}
 
               <TabsContent value="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 && (
+                {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
@@ -333,172 +357,161 @@ export const LogEntry = memo(function ({
                             className="h-7 text-xs"
                             onClick={(e) => {
                               e.stopPropagation();
-                              onCompareWithPrevious(log);
+                              setReplayOpen(true);
                             }}
                           >
-                            <GitCompareArrows className="size-3 mr-1" />
-                            Diff with Previous
+                            <RotateCcw className="size-3 mr-1" />
+                            Replay
                           </Button>
                         </TooltipTrigger>
-                        <TooltipContent>
-                          Compare this request with the immediately preceding one
-                        </TooltipContent>
+                        <TooltipContent>Re-send this request to the provider</TooltipContent>
                       </Tooltip>
+                      <CopyButton
+                        text={displayedRequestBody}
+                        label="Copy Request"
+                        copied={requestCopy.copied}
+                        onCopy={requestCopy.copy}
+                      />
+                    </div>
+                    {requestDiff ? (
+                      <RequestDiffContent
+                        rawBody={log.rawRequestBody}
+                        displayedBody={displayedRequestBody}
+                        emptyLabel="No transformation applied — raw and sent request bodies are identical."
+                      />
+                    ) : displayedRequestBody !== null ? (
+                      <JsonViewerFromString text={displayedRequestBody} defaultExpandDepth={1} />
+                    ) : (
+                      <p className="text-xs text-muted-foreground italic">No request body</p>
                     )}
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setReplayOpen(true);
-                          }}
-                        >
-                          <RotateCcw className="size-3 mr-1" />
-                          Replay
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>Re-send this request to the provider</TooltipContent>
-                    </Tooltip>
-                    <CopyButton
-                      text={displayedRequestBody}
-                      label="Copy Request"
-                      copied={requestCopy.copied}
-                      onCopy={requestCopy.copy}
-                    />
                   </div>
-                  {requestDiff ? (
-                    <RequestDiffContent
-                      rawBody={log.rawRequestBody}
-                      displayedBody={displayedRequestBody}
-                      emptyLabel="No transformation applied — raw and sent request bodies are identical."
-                    />
-                  ) : displayedRequestBody !== null ? (
-                    <JsonViewerFromString text={displayedRequestBody} defaultExpandDepth={1} />
-                  ) : (
-                    <p className="text-xs text-muted-foreground italic">No request body</p>
-                  )}
-                </div>
+                )}
               </TabsContent>
 
               {viewMode === "full" && (
                 <TabsContent value="headers">
-                  <div className="px-4 py-3">
-                    <div className="flex justify-end gap-2 mb-2">
-                      {shouldShowHeadersDiffButton(
-                        viewMode,
-                        log.rawHeaders !== undefined && Object.keys(log.rawHeaders).length > 0,
-                      ) && (
-                        <DiffToggleButton
-                          active={headersDiff}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setHeadersDiff(!headersDiff);
-                          }}
+                  {activeTab === "headers" && (
+                    <div className="px-4 py-3">
+                      <div className="flex justify-end gap-2 mb-2">
+                        {shouldShowHeadersDiffButton(
+                          viewMode,
+                          log.rawHeaders !== undefined && Object.keys(log.rawHeaders).length > 0,
+                        ) && (
+                          <DiffToggleButton
+                            active={headersDiff}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setHeadersDiff(!headersDiff);
+                            }}
+                          />
+                        )}
+                      </div>
+                      {headersDiff ? (
+                        <HeadersDiffContent
+                          rawHeaders={log.rawHeaders}
+                          headers={log.headers}
+                          emptyLabel="No transformation applied — raw and processed headers are identical."
                         />
+                      ) : log.headers && Object.keys(log.headers).length > 0 ? (
+                        <div className="space-y-1 font-mono text-xs">
+                          {Object.entries(log.headers)
+                            .sort(([a], [b]) => a.localeCompare(b))
+                            .map(([key, value]) => (
+                              <div key={key} className="flex gap-2">
+                                <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
+                                  {key}:
+                                </span>
+                                <span className="text-muted-foreground truncate" title={value}>
+                                  {value}
+                                </span>
+                              </div>
+                            ))}
+                        </div>
+                      ) : (
+                        <p className="text-xs text-muted-foreground italic">No headers captured</p>
                       )}
                     </div>
-                    {headersDiff ? (
-                      <HeadersDiffContent
-                        rawHeaders={log.rawHeaders}
-                        headers={log.headers}
-                        emptyLabel="No transformation applied — raw and processed headers are identical."
-                      />
-                    ) : log.headers && Object.keys(log.headers).length > 0 ? (
-                      <div className="space-y-1 font-mono text-xs">
-                        {Object.entries(log.headers)
-                          .sort(([a], [b]) => a.localeCompare(b))
-                          .map(([key, value]) => (
-                            <div key={key} className="flex gap-2">
-                              <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
-                                {key}:
-                              </span>
-                              <span className="text-muted-foreground truncate" title={value}>
-                                {value}
-                              </span>
-                            </div>
-                          ))}
-                      </div>
-                    ) : (
-                      <p className="text-xs text-muted-foreground italic">No headers captured</p>
-                    )}
-                  </div>
+                  )}
                 </TabsContent>
               )}
 
               {viewMode === "full" && (
                 <TabsContent value="raw-headers">
-                  <div className="px-4 py-3">
-                    {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
-                      <div className="space-y-1 font-mono text-xs">
-                        {Object.entries(log.rawHeaders)
-                          .sort(([a], [b]) => a.localeCompare(b))
-                          .map(([key, value]) => (
-                            <div key={key} className="flex gap-2">
-                              <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
-                                {key}:
-                              </span>
-                              <span className="text-muted-foreground truncate" title={value}>
-                                {value}
-                              </span>
-                            </div>
-                          ))}
-                      </div>
-                    ) : (
-                      <p className="text-xs text-muted-foreground italic">
-                        No raw headers captured
-                      </p>
-                    )}
-                  </div>
+                  {activeTab === "raw-headers" && (
+                    <div className="px-4 py-3">
+                      {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
+                        <div className="space-y-1 font-mono text-xs">
+                          {Object.entries(log.rawHeaders)
+                            .sort(([a], [b]) => a.localeCompare(b))
+                            .map(([key, value]) => (
+                              <div key={key} className="flex gap-2">
+                                <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
+                                  {key}:
+                                </span>
+                                <span className="text-muted-foreground truncate" title={value}>
+                                  {value}
+                                </span>
+                              </div>
+                            ))}
+                        </div>
+                      ) : (
+                        <p className="text-xs text-muted-foreground italic">
+                          No raw headers captured
+                        </p>
+                      )}
+                    </div>
+                  )}
                 </TabsContent>
               )}
 
               <TabsContent value="raw">
-                <div className="px-4 py-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>
-                      <div className="text-muted-foreground font-mono">{log.error}</div>
+                {activeTab === "raw" && (
+                  <div className="px-4 py-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>
+                        <div className="text-muted-foreground font-mono">{log.error}</div>
+                      </div>
+                    )}
+                    <div className="flex justify-end">
+                      <CopyButton
+                        text={log.responseText}
+                        label="Copy Response"
+                        copied={responseCopy.copied}
+                        onCopy={responseCopy.copy}
+                      />
                     </div>
-                  )}
-                  <div className="flex justify-end">
-                    <CopyButton
-                      text={log.responseText}
-                      label="Copy Response"
-                      copied={responseCopy.copied}
-                      onCopy={responseCopy.copy}
-                    />
+                    {log.responseText !== null ? (
+                      <JsonViewerFromString text={log.responseText} defaultExpandDepth={1} />
+                    ) : (
+                      <p className="text-xs text-muted-foreground italic">No response</p>
+                    )}
+                    {log.streaming === true && (
+                      <StreamingChunkSequence
+                        logId={log.id}
+                        truncated={log.streamingChunksPath !== null}
+                      />
+                    )}
                   </div>
-                  {log.responseText !== null ? (
-                    <JsonViewerFromString text={log.responseText} defaultExpandDepth={1} />
-                  ) : (
-                    <p className="text-xs text-muted-foreground italic">No response</p>
-                  )}
-                  {log.streaming === true && (
-                    <StreamingChunkSequence
-                      logId={log.id}
-                      truncated={log.streamingChunksPath !== null}
-                    />
-                  )}
-                </div>
+                )}
               </TabsContent>
 
               <TabsContent value="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>
+                {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>
+                )}
               </TabsContent>
             </Tabs>
           </div>