@tonyclaw/agent-inspector 3.0.29 → 3.0.31

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

@@ -10,6 +10,7 @@ import {
 import { ApiTimeoutError, fetchJsonWithTimeout } from "../../lib/apiClient";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn } from "../../lib/utils";
+import { LazyFeatureBoundary } from "../errors/SafeErrorBoundary";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
@@ -863,54 +864,92 @@ export const LogEntry = memo(function ({
               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="bg-white/[0.04] inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
-              >
-                {shouldShowRawHeadersTab(
-                  viewMode,
-                  displayLog.rawHeaders !== undefined &&
-                    Object.keys(displayLog.rawHeaders).length > 0,
-                ) && (
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
-                    Raw Headers
-                  </TabsTrigger>
-                )}
-                {shouldShowHeadersTab(
-                  viewMode,
-                  displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
-                ) && (
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="headers">
-                    Headers
+            <LazyFeatureBoundary feature="Log details">
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
+                <TabsList
+                  variant="line"
+                  className="bg-white/[0.04] inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
+                >
+                  {shouldShowRawHeadersTab(
+                    viewMode,
+                    displayLog.rawHeaders !== undefined &&
+                      Object.keys(displayLog.rawHeaders).length > 0,
+                  ) && (
+                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
+                      Raw Headers
+                    </TabsTrigger>
+                  )}
+                  {shouldShowHeadersTab(
+                    viewMode,
+                    displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
+                  ) && (
+                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="headers">
+                      Headers
+                    </TabsTrigger>
+                  )}
+                  {anatomySegments !== null && (
+                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="anatomy">
+                      Context
+                    </TabsTrigger>
+                  )}
+                  {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
+                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-request">
+                      Raw Request
+                    </TabsTrigger>
+                  )}
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="request">
+                    Request
                   </TabsTrigger>
-                )}
-                {anatomySegments !== null && (
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="anatomy">
-                    Context
+                  {viewMode === "full" && (
+                    <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw">
+                      Raw Response
+                    </TabsTrigger>
+                  )}
+                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="parsed">
+                    Response
                   </TabsTrigger>
-                )}
+                </TabsList>
+
                 {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-request">
-                    Raw Request
-                  </TabsTrigger>
-                )}
-                <TabsTrigger className={TAB_TRIGGER_CLASS} value="request">
-                  Request
-                </TabsTrigger>
-                {viewMode === "full" && (
-                  <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw">
-                    Raw Response
-                  </TabsTrigger>
+                  <TabsContent value="raw-request">
+                    {activeTab === "raw-request" && (
+                      <ExpandedPanel>
+                        <FullBodyHydrationNotice
+                          status={bodyHydrationStatus}
+                          error={bodyHydrationError}
+                          footprint={fullBodyHydrationFootprint}
+                          onRetry={retryFullBodyHydration}
+                        />
+                        {useChunkedBody && (
+                          <BodyPreviewNotice
+                            label="Request"
+                            state={requestPreview}
+                            expectedBytes={log.rawRequestBodyBytes ?? null}
+                            onLoadMore={() => loadBodyChunk("request", requestPreview.offset)}
+                          />
+                        )}
+                        {rawRequestBodyForView === null ? (
+                          <EmptyState>
+                            {useChunkedBody ? "Request preview is loading" : "No request body"}
+                          </EmptyState>
+                        ) : rawRequestExpansion.parsedData !== null ? (
+                          <Suspense fallback={<TabFallback />}>
+                            <LazyJsonViewer
+                              data={rawRequestExpansion.parsedData}
+                              bulkDepth={rawRequestExpansion.bulkDepth}
+                              bulkRevision={rawRequestExpansion.bulkRevision}
+                            />
+                          </Suspense>
+                        ) : (
+                          <RawTextBlock>{rawRequestBodyForView}</RawTextBlock>
+                        )}
+                      </ExpandedPanel>
+                    )}
+                  </TabsContent>
                 )}
-                <TabsTrigger className={TAB_TRIGGER_CLASS} value="parsed">
-                  Response
-                </TabsTrigger>
-              </TabsList>
 
-              {shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && (
-                <TabsContent value="raw-request">
-                  {activeTab === "raw-request" && (
+                <TabsContent value="request">
+                  {activeTab === "request" && (
                     <ExpandedPanel>
                       <FullBodyHydrationNotice
                         status={bodyHydrationStatus}
@@ -926,268 +965,237 @@ export const LogEntry = memo(function ({
                           onLoadMore={() => loadBodyChunk("request", requestPreview.offset)}
                         />
                       )}
-                      {rawRequestBodyForView === null ? (
-                        <EmptyState>
-                          {useChunkedBody ? "Request preview is loading" : "No request body"}
-                        </EmptyState>
-                      ) : rawRequestExpansion.parsedData !== null ? (
-                        <Suspense fallback={<TabFallback />}>
-                          <LazyJsonViewer
-                            data={rawRequestExpansion.parsedData}
-                            bulkDepth={rawRequestExpansion.bulkDepth}
-                            bulkRevision={rawRequestExpansion.bulkRevision}
-                          />
-                        </Suspense>
+                      {warnings.length > 0 && (
+                        <NoticeBlock tone="warning">
+                          <div className="flex items-center gap-2 font-semibold text-amber-300">
+                            <AlertTriangle className="size-3.5" />
+                            Tool schema warnings
+                          </div>
+                          <ul className="mt-2 space-y-1 text-muted-foreground">
+                            {warnings.map((warning) => (
+                              <li key={warning}>{warning}</li>
+                            ))}
+                          </ul>
+                        </NoticeBlock>
+                      )}
+                      <RequestTools
+                        summary={requestTools}
+                        calledToolNames={responseAnalysis.toolNames ?? []}
+                      />
+                      {/* All tab actions (Copy, Expand, Diff with Raw, Diff with
+                        Previous) live in the log header. The body is just
+                        the diff or JSON view, depending on toggle state. */}
+                      {requestDiff ? (
+                        <RequestDiffContent
+                          rawBody={displayLog.rawRequestBody}
+                          displayedBody={displayedRequestBody}
+                          emptyLabel="No transformation applied; raw and sent request bodies are identical."
+                        />
                       ) : (
-                        <RawTextBlock>{rawRequestBodyForView}</RawTextBlock>
+                        <div ref={requestJsonRef}>
+                          {displayedRequestBody === null ? (
+                            <EmptyState>
+                              {useChunkedBody ? "Request preview is loading" : "No request body"}
+                            </EmptyState>
+                          ) : requestExpansion.parsedData !== null ? (
+                            <Suspense fallback={<TabFallback />}>
+                              <LazyJsonViewer
+                                data={requestExpansion.parsedData}
+                                bulkDepth={requestExpansion.bulkDepth}
+                                bulkRevision={requestExpansion.bulkRevision}
+                                anatomyPaths={anatomyPaths}
+                                expandToPath={expandToPath}
+                              />
+                            </Suspense>
+                          ) : (
+                            <RawTextBlock>{displayedRequestBody}</RawTextBlock>
+                          )}
+                        </div>
                       )}
                     </ExpandedPanel>
                   )}
                 </TabsContent>
-              )}
 
-              <TabsContent value="request">
-                {activeTab === "request" && (
-                  <ExpandedPanel>
-                    <FullBodyHydrationNotice
-                      status={bodyHydrationStatus}
-                      error={bodyHydrationError}
-                      footprint={fullBodyHydrationFootprint}
-                      onRetry={retryFullBodyHydration}
-                    />
-                    {useChunkedBody && (
-                      <BodyPreviewNotice
-                        label="Request"
-                        state={requestPreview}
-                        expectedBytes={log.rawRequestBodyBytes ?? null}
-                        onLoadMore={() => loadBodyChunk("request", requestPreview.offset)}
-                      />
-                    )}
-                    {warnings.length > 0 && (
-                      <NoticeBlock tone="warning">
-                        <div className="flex items-center gap-2 font-semibold text-amber-300">
-                          <AlertTriangle className="size-3.5" />
-                          Tool schema warnings
-                        </div>
-                        <ul className="mt-2 space-y-1 text-muted-foreground">
-                          {warnings.map((warning) => (
-                            <li key={warning}>{warning}</li>
-                          ))}
-                        </ul>
-                      </NoticeBlock>
+                {anatomySegments !== null && (
+                  <TabsContent value="anatomy">
+                    {activeTab === "anatomy" && (
+                      <ExpandedPanel className="p-0">
+                        <Suspense fallback={<TabFallback />}>
+                          <LazyRequestAnatomy
+                            parsed={requestExpansion.parsedData}
+                            inputTokens={displayLog.inputTokens ?? null}
+                            model={displayLog.model}
+                            segments={anatomySegments}
+                            onSegmentActivate={jumpToAnatomySegment}
+                          />
+                        </Suspense>
+                      </ExpandedPanel>
                     )}
-                    <RequestTools
-                      summary={requestTools}
-                      calledToolNames={responseAnalysis.toolNames ?? []}
-                    />
-                    {/* All tab actions (Copy, Expand, Diff with Raw, Diff with
-                        Previous) live in the log header. The body is just
-                        the diff or JSON view, depending on toggle state. */}
-                    {requestDiff ? (
-                      <RequestDiffContent
-                        rawBody={displayLog.rawRequestBody}
-                        displayedBody={displayedRequestBody}
-                        emptyLabel="No transformation applied; raw and sent request bodies are identical."
-                      />
-                    ) : (
-                      <div ref={requestJsonRef}>
-                        {displayedRequestBody === null ? (
-                          <EmptyState>
-                            {useChunkedBody ? "Request preview is loading" : "No request body"}
-                          </EmptyState>
-                        ) : requestExpansion.parsedData !== null ? (
-                          <Suspense fallback={<TabFallback />}>
-                            <LazyJsonViewer
-                              data={requestExpansion.parsedData}
-                              bulkDepth={requestExpansion.bulkDepth}
-                              bulkRevision={requestExpansion.bulkRevision}
-                              anatomyPaths={anatomyPaths}
-                              expandToPath={expandToPath}
+                  </TabsContent>
+                )}
+
+                {shouldShowHeadersTab(
+                  viewMode,
+                  displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
+                ) && (
+                  <TabsContent value="headers">
+                    {activeTab === "headers" && (
+                      <ExpandedPanel>
+                        {/* Copy lives in the log header. */}
+                        <div className="flex justify-end gap-2 mb-2">
+                          {shouldShowHeadersDiffButton(
+                            viewMode,
+                            displayLog.rawHeaders !== undefined &&
+                              Object.keys(displayLog.rawHeaders).length > 0,
+                          ) && (
+                            <DiffToggleButton
+                              active={headersDiff}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setHeadersDiff(!headersDiff);
+                              }}
                             />
-                          </Suspense>
+                          )}
+                        </div>
+                        {headersDiff ? (
+                          <HeadersDiffContent
+                            rawHeaders={displayLog.rawHeaders}
+                            headers={displayLog.headers}
+                            emptyLabel="No transformation applied; raw and processed headers are identical."
+                          />
                         ) : (
-                          <RawTextBlock>{displayedRequestBody}</RawTextBlock>
+                          <HeaderRows
+                            headers={displayLog.headers}
+                            emptyLabel="No headers captured"
+                          />
                         )}
-                      </div>
+                      </ExpandedPanel>
                     )}
-                  </ExpandedPanel>
+                  </TabsContent>
                 )}
-              </TabsContent>
 
-              {anatomySegments !== null && (
-                <TabsContent value="anatomy">
-                  {activeTab === "anatomy" && (
-                    <ExpandedPanel className="p-0">
-                      <Suspense fallback={<TabFallback />}>
-                        <LazyRequestAnatomy
-                          parsed={requestExpansion.parsedData}
-                          inputTokens={displayLog.inputTokens ?? null}
-                          model={displayLog.model}
-                          segments={anatomySegments}
-                          onSegmentActivate={jumpToAnatomySegment}
+                {shouldShowRawHeadersTab(
+                  viewMode,
+                  displayLog.rawHeaders !== undefined &&
+                    Object.keys(displayLog.rawHeaders).length > 0,
+                ) && (
+                  <TabsContent value="raw-headers">
+                    {activeTab === "raw-headers" && (
+                      <ExpandedPanel>
+                        {/* Copy lives in the log header. */}
+                        <HeaderRows
+                          headers={displayLog.rawHeaders}
+                          emptyLabel="No raw headers captured"
                         />
-                      </Suspense>
-                    </ExpandedPanel>
-                  )}
-                </TabsContent>
-              )}
+                      </ExpandedPanel>
+                    )}
+                  </TabsContent>
+                )}
 
-              {shouldShowHeadersTab(
-                viewMode,
-                displayLog.headers !== undefined && Object.keys(displayLog.headers).length > 0,
-              ) && (
-                <TabsContent value="headers">
-                  {activeTab === "headers" && (
-                    <ExpandedPanel>
-                      {/* Copy lives in the log header. */}
-                      <div className="flex justify-end gap-2 mb-2">
-                        {shouldShowHeadersDiffButton(
-                          viewMode,
-                          displayLog.rawHeaders !== undefined &&
-                            Object.keys(displayLog.rawHeaders).length > 0,
-                        ) && (
-                          <DiffToggleButton
-                            active={headersDiff}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              setHeadersDiff(!headersDiff);
-                            }}
-                          />
-                        )}
-                      </div>
-                      {headersDiff ? (
-                        <HeadersDiffContent
-                          rawHeaders={displayLog.rawHeaders}
-                          headers={displayLog.headers}
-                          emptyLabel="No transformation applied; raw and processed headers are identical."
+                <TabsContent value="raw">
+                  {activeTab === "raw" && (
+                    <ExpandedPanel className="space-y-3">
+                      <FullBodyHydrationNotice
+                        status={bodyHydrationStatus}
+                        error={bodyHydrationError}
+                        footprint={fullBodyHydrationFootprint}
+                        onRetry={retryFullBodyHydration}
+                      />
+                      {useChunkedBody && (
+                        <BodyPreviewNotice
+                          label="Response"
+                          state={responsePreview}
+                          expectedBytes={log.responseTextBytes ?? null}
+                          onLoadMore={() => loadBodyChunk("response", responsePreview.offset)}
                         />
+                      )}
+                      {displayLog.error !== undefined && displayLog.error !== null && (
+                        <NoticeBlock tone="danger" title="SSE Error">
+                          <span className="font-mono">{displayLog.error}</span>
+                        </NoticeBlock>
+                      )}
+                      {responseTextForView !== null && responsePreviewShouldParse ? (
+                        <Suspense fallback={<TabFallback />}>
+                          <LazyJsonViewerFromString
+                            text={responseTextForView}
+                            defaultExpandDepth={0}
+                            bulkDepth={responseExpansion.bulkDepth}
+                            bulkRevision={responseExpansion.bulkRevision}
+                          />
+                        </Suspense>
+                      ) : responseTextForView !== null ? (
+                        <RawTextBlock>{responseTextForView}</RawTextBlock>
                       ) : (
-                        <HeaderRows headers={displayLog.headers} emptyLabel="No headers captured" />
+                        <EmptyState>
+                          {useChunkedBody ? "Response preview is loading" : "No response"}
+                        </EmptyState>
+                      )}
+                      {displayLog.streaming === true && (
+                        <Suspense fallback={<TabFallback />}>
+                          <LazyStreamingChunkSequence
+                            logId={displayLog.id}
+                            truncated={displayLog.streamingChunksPath !== null}
+                          />
+                        </Suspense>
                       )}
                     </ExpandedPanel>
                   )}
                 </TabsContent>
-              )}
 
-              {shouldShowRawHeadersTab(
-                viewMode,
-                displayLog.rawHeaders !== undefined &&
-                  Object.keys(displayLog.rawHeaders).length > 0,
-              ) && (
-                <TabsContent value="raw-headers">
-                  {activeTab === "raw-headers" && (
+                <TabsContent value="parsed">
+                  {activeTab === "parsed" && (
                     <ExpandedPanel>
-                      {/* Copy lives in the log header. */}
-                      <HeaderRows
-                        headers={displayLog.rawHeaders}
-                        emptyLabel="No raw headers captured"
+                      <FullBodyHydrationNotice
+                        status={bodyHydrationStatus}
+                        error={bodyHydrationError}
+                        footprint={fullBodyHydrationFootprint}
+                        onRetry={retryFullBodyHydration}
                       />
+                      {useChunkedBody && (
+                        <BodyPreviewNotice
+                          label="Response"
+                          state={responsePreview}
+                          expectedBytes={log.responseTextBytes ?? null}
+                          onLoadMore={() => loadBodyChunk("response", responsePreview.offset)}
+                        />
+                      )}
+                      {responsePreviewIsActive && !responsePreviewShouldParse ? (
+                        <RawTextBlock>{responseTextForView}</RawTextBlock>
+                      ) : (
+                        <Suspense fallback={<TabFallback />}>
+                          <LazyResponseView
+                            responseText={responseTextForView}
+                            responseStatus={displayLog.responseStatus}
+                            streaming={displayLog.streaming}
+                            inputTokens={displayLog.inputTokens}
+                            outputTokens={displayLog.outputTokens}
+                            cacheCreationInputTokens={displayLog.cacheCreationInputTokens}
+                            cacheReadInputTokens={displayLog.cacheReadInputTokens}
+                            apiFormat={resolvedFormat}
+                            error={displayLog.error}
+                            focusedToolIndex={focusedToolIndex}
+                            toolFocusNonce={toolFocusNonce}
+                          />
+                        </Suspense>
+                      )}
                     </ExpandedPanel>
                   )}
                 </TabsContent>
-              )}
-
-              <TabsContent value="raw">
-                {activeTab === "raw" && (
-                  <ExpandedPanel className="space-y-3">
-                    <FullBodyHydrationNotice
-                      status={bodyHydrationStatus}
-                      error={bodyHydrationError}
-                      footprint={fullBodyHydrationFootprint}
-                      onRetry={retryFullBodyHydration}
-                    />
-                    {useChunkedBody && (
-                      <BodyPreviewNotice
-                        label="Response"
-                        state={responsePreview}
-                        expectedBytes={log.responseTextBytes ?? null}
-                        onLoadMore={() => loadBodyChunk("response", responsePreview.offset)}
-                      />
-                    )}
-                    {displayLog.error !== undefined && displayLog.error !== null && (
-                      <NoticeBlock tone="danger" title="SSE Error">
-                        <span className="font-mono">{displayLog.error}</span>
-                      </NoticeBlock>
-                    )}
-                    {responseTextForView !== null && responsePreviewShouldParse ? (
-                      <Suspense fallback={<TabFallback />}>
-                        <LazyJsonViewerFromString
-                          text={responseTextForView}
-                          defaultExpandDepth={0}
-                          bulkDepth={responseExpansion.bulkDepth}
-                          bulkRevision={responseExpansion.bulkRevision}
-                        />
-                      </Suspense>
-                    ) : responseTextForView !== null ? (
-                      <RawTextBlock>{responseTextForView}</RawTextBlock>
-                    ) : (
-                      <EmptyState>
-                        {useChunkedBody ? "Response preview is loading" : "No response"}
-                      </EmptyState>
-                    )}
-                    {displayLog.streaming === true && (
-                      <Suspense fallback={<TabFallback />}>
-                        <LazyStreamingChunkSequence
-                          logId={displayLog.id}
-                          truncated={displayLog.streamingChunksPath !== null}
-                        />
-                      </Suspense>
-                    )}
-                  </ExpandedPanel>
-                )}
-              </TabsContent>
-
-              <TabsContent value="parsed">
-                {activeTab === "parsed" && (
-                  <ExpandedPanel>
-                    <FullBodyHydrationNotice
-                      status={bodyHydrationStatus}
-                      error={bodyHydrationError}
-                      footprint={fullBodyHydrationFootprint}
-                      onRetry={retryFullBodyHydration}
-                    />
-                    {useChunkedBody && (
-                      <BodyPreviewNotice
-                        label="Response"
-                        state={responsePreview}
-                        expectedBytes={log.responseTextBytes ?? null}
-                        onLoadMore={() => loadBodyChunk("response", responsePreview.offset)}
-                      />
-                    )}
-                    {responsePreviewIsActive && !responsePreviewShouldParse ? (
-                      <RawTextBlock>{responseTextForView}</RawTextBlock>
-                    ) : (
-                      <Suspense fallback={<TabFallback />}>
-                        <LazyResponseView
-                          responseText={responseTextForView}
-                          responseStatus={displayLog.responseStatus}
-                          streaming={displayLog.streaming}
-                          inputTokens={displayLog.inputTokens}
-                          outputTokens={displayLog.outputTokens}
-                          cacheCreationInputTokens={displayLog.cacheCreationInputTokens}
-                          cacheReadInputTokens={displayLog.cacheReadInputTokens}
-                          apiFormat={resolvedFormat}
-                          error={displayLog.error}
-                          focusedToolIndex={focusedToolIndex}
-                          toolFocusNonce={toolFocusNonce}
-                        />
-                      </Suspense>
-                    )}
-                  </ExpandedPanel>
-                )}
-              </TabsContent>
-            </Tabs>
+              </Tabs>
+            </LazyFeatureBoundary>
           </div>
         )}
       </div>
-      <Suspense fallback={null}>
-        <LazyReplayDialog
-          log={displayLog}
-          displayNumber={displayNumber}
-          open={replayOpen}
-          onOpenChange={setReplayOpen}
-        />
-      </Suspense>
+      <LazyFeatureBoundary feature="Replay">
+        <Suspense fallback={null}>
+          <LazyReplayDialog
+            log={displayLog}
+            displayNumber={displayNumber}
+            open={replayOpen}
+            onOpenChange={setReplayOpen}
+          />
+        </Suspense>
+      </LazyFeatureBoundary>
     </TooltipProvider>
   );
 });