@tonyclaw/agent-inspector 2.0.35 → 2.0.37

package/src/components/ProxyViewer.tsx

@@ -1,5 +1,15 @@
 import { type JSX, useCallback, useEffect, useMemo, useRef, useState, Suspense } from "react";
-import { ArrowDownRight, ArrowLeft, ArrowUpRight, Check, Copy, Download, Plus } from "lucide-react";
+import {
+  ArrowDownRight,
+  ArrowLeft,
+  ArrowUpRight,
+  Check,
+  Copy,
+  Download,
+  FileJson,
+  Plus,
+  Trash2,
+} from "lucide-react";
 
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip, type ExportMode } from "../lib/export-logs";
@@ -43,6 +53,22 @@ export function shouldShowRawExport(captureMode: CaptureMode): boolean {
   return captureMode === "full";
 }
 
+export type ExportActionVisibility = {
+  redacted: boolean;
+  raw: boolean;
+};
+
+export function getExportActionVisibility(
+  captureMode: CaptureMode,
+  logCount: number,
+): ExportActionVisibility {
+  const hasLogs = logCount > 0;
+  return {
+    redacted: hasLogs,
+    raw: hasLogs && shouldShowRawExport(captureMode),
+  };
+}
+
 function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut: number } {
   let totalIn = 0;
   let totalOut = 0;
@@ -714,7 +740,7 @@ export function ProxyViewer({
   );
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
   const comparisonPredecessors = useMemo(() => buildValidPredecessors(groups), [groups]);
-  const showRawExport = shouldShowRawExport(captureMode);
+  const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
   const handleCompareWithPrevious = useCallback(
     (log: CapturedLog) => {
       const predecessor = comparisonPredecessors.get(log.id);
@@ -881,7 +907,7 @@ export function ProxyViewer({
                 : ""}
             </span>
           )}
-          {logs.length > 0 && showRawExport && (
+          {exportActionVisibility.redacted && (
             <button
               type="button"
               onClick={() => {
@@ -901,26 +927,34 @@ export function ProxyViewer({
               )}
             </button>
           )}
-          {logs.length > 0 && (
+          {exportActionVisibility.raw && (
             <button
               type="button"
               onClick={() => {
                 void handleExport("raw");
               }}
               disabled={exporting !== null}
-              className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed rounded-md hover:bg-muted"
+              className="h-8 px-2.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
               title="Export raw logs without redaction"
             >
-              {exporting === "raw" ? "Exporting..." : "Raw"}
+              {exporting === "raw" ? (
+                <span>Exporting...</span>
+              ) : (
+                <>
+                  <FileJson className="size-3.5" />
+                  <span>Raw</span>
+                </>
+              )}
             </button>
           )}
           <button
             type="button"
             onClick={onClearAll}
-            className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted"
+            className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
             title="Clear all logs"
           >
-            Clear
+            <Trash2 className="size-3.5" />
+            <span>Clear</span>
           </button>
         </div>
         {exportError !== null && (

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

@@ -18,6 +18,7 @@ import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { ConfirmDialog } from "../ui/confirm-dialog";
+import { resolveLogFormat } from "./log-formats";
 
 const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
   anthropic: "Anthropic",
@@ -231,11 +232,13 @@ export type ConversationGroupData = {
 };
 
 export function getGroupApiFormat(logs: CapturedLog[]): "anthropic" | "openai" | "unknown" {
-  const firstNonUnknown = logs.find((l) => l.apiFormat !== "unknown");
-  if (firstNonUnknown !== undefined) {
-    return firstNonUnknown.apiFormat;
+  for (const log of logs) {
+    const apiFormat = resolveLogFormat(log);
+    if (apiFormat !== "unknown") {
+      return apiFormat;
+    }
   }
-  return logs[0]?.apiFormat ?? "unknown";
+  return "unknown";
 }
 
 /**
@@ -248,8 +251,9 @@ export function hasMixedApiFormat(logs: CapturedLog[]): boolean {
   let hasAnthropic = false;
   let hasOpenai = false;
   for (const log of logs) {
-    if (log.apiFormat === "anthropic") hasAnthropic = true;
-    else if (log.apiFormat === "openai") hasOpenai = true;
+    const apiFormat = resolveLogFormat(log);
+    if (apiFormat === "anthropic") hasAnthropic = true;
+    else if (apiFormat === "openai") hasOpenai = true;
     if (hasAnthropic && hasOpenai) return true;
   }
   return false;

package/src/proxy/formats/registry.ts

@@ -31,6 +31,12 @@ class FormatRegistryImpl {
     return format === undefined ? undefined : this.handlers.get(format);
   }
 
+  /** Get the wire format matching a request path without requiring handlers. */
+  getFormatByPath(path: string): RequestFormat | undefined {
+    const messagesPath = path.split("?")[0] ?? "";
+    return this.pathMap.get(messagesPath);
+  }
+
   /** Detect format from request body content */
   detectFormat(rawBody: string | null): RequestFormat {
     if (rawBody === null) return "unknown";
@@ -57,7 +63,7 @@ export function formatForPath(path: string): FormatHandler | null {
  * simple message-only calls.
  */
 export function requestFormatForPath(path: string): RequestFormat {
-  return formatForPath(path)?.format ?? "unknown";
+  return formatRegistry.getFormatByPath(path) ?? "unknown";
 }
 
 // Register known paths

package/src/proxy/store.ts

@@ -34,6 +34,7 @@ import type { SessionInfo, SessionLogSummary } from "../lib/sessionInfoContract"
 import { buildSessionInfo, buildSessionLogSummary } from "./sessionInfo";
 import type { CapturedLog } from "./schemas";
 import { CapturedLogSchema } from "./schemas";
+import { requestFormatForPath } from "./formats/registry";
 import {
   clearSessionRegistry,
   getLogSessionId,
@@ -109,14 +110,16 @@ function evictOldestIfNeeded(): void {
   }
 }
 
-function normalizeLogSession(log: CapturedLog): CapturedLog {
+function normalizeLog(log: CapturedLog): CapturedLog {
   const sessionId = getLogSessionId(log);
-  if (sessionId === log.sessionId) return log;
-  return { ...log, sessionId };
+  const pathFormat = requestFormatForPath(log.path);
+  const apiFormat = pathFormat === "unknown" ? log.apiFormat : pathFormat;
+  if (sessionId === log.sessionId && apiFormat === log.apiFormat) return log;
+  return { ...log, sessionId, apiFormat };
 }
 
 function addToCache(log: CapturedLog): void {
-  const cachedLog = normalizeLogSession(log);
+  const cachedLog = normalizeLog(log);
   // If updating an existing entry, remove first to reset insertion order
   if (memoryCache.has(cachedLog.id)) {
     memoryCache.delete(cachedLog.id);
@@ -174,12 +177,12 @@ export async function addTestLogEntry(entry: Omit<CapturedLog, "id">): Promise<C
     isTest: entry.isTest,
   });
 
-  const log: CapturedLog = {
+  const log: CapturedLog = normalizeLog({
     id,
     ...entry,
     sessionId: session.id,
     streamingChunksPath,
-  };
+  });
 
   await runWithLogWriteLock(async () => {
     const logFile = getCurrentLogFile();
@@ -218,7 +221,7 @@ export async function createLog(
     clientInfo,
   });
 
-  const log: CapturedLog = {
+  const log: CapturedLog = normalizeLog({
     id,
     timestamp: new Date().toISOString(),
     method,
@@ -249,7 +252,7 @@ export async function createLog(
     clientCwd: clientInfo?.cwd ?? null,
     clientProjectFolder: clientInfo?.projectFolder ?? null,
     streamingChunksPath: null,
-  };
+  });
 
   // Write to disk and update index
   await runWithLogWriteLock(async () => {
@@ -308,7 +311,7 @@ export async function getLogById(id: number): Promise<CapturedLog | null> {
         const parsed: unknown = JSON.parse(line);
         const result = CapturedLogSchema.safeParse(parsed);
         if (result.success) {
-          const log = normalizeLogSession(result.data);
+          const log = normalizeLog(result.data);
           addToCache(log);
           observeSessionLog(log);
           return log;
@@ -348,7 +351,7 @@ async function scanLogFileForId(filePath: string, id: number): Promise<CapturedL
         if (desc !== undefined && typeof desc.value === "number" && desc.value === id) {
           const result = CapturedLogSchema.safeParse(parsed);
           if (result.success) {
-            lastMatch = normalizeLogSession(result.data);
+            lastMatch = normalizeLog(result.data);
             if (result.data.responseStatus !== null) {
               return lastMatch;
             }
@@ -412,7 +415,7 @@ async function visitPersistedLogFile(
         const parsed: unknown = JSON.parse(line);
         const result = CapturedLogSchema.safeParse(parsed);
         if (result.success) {
-          const log = normalizeLogSession(result.data);
+          const log = normalizeLog(result.data);
           visitor(log);
         }
       } catch {

package/src/router.tsx

@@ -6,9 +6,26 @@ export function getRouter() {
     routeTree,
     scrollRestoration: false,
   });
+  attachServerSsrStoreCompatibility(router);
   return router;
 }
 
+function attachServerSsrStoreCompatibility(
+  router: Readonly<{ state: Readonly<{ matches: unknown }> }>,
+): void {
+  const existingStores = Object.getOwnPropertyDescriptor(router, "stores");
+  if (existingStores !== undefined) return;
+
+  Object.defineProperty(router, "stores", {
+    configurable: true,
+    value: {
+      matches: {
+        get: () => router.state.matches,
+      },
+    },
+  });
+}
+
 declare module "@tanstack/react-router" {
   interface Register {
     router: ReturnType<typeof getRouter>;

package/.output/public/assets/_sessionId-DkhHqlzB.js

@@ -1 +0,0 @@
-import{R as s,j as e}from"./main-eD8hEOHT.js";import{P as i}from"./ProxyViewerContainer-BVlcRirf.js";function t(){const{sessionId:o}=s.useParams();return e.jsx(i,{initialSessionId:o},o)}export{t as component};

package/.output/public/assets/index-AiQY20d7.js

@@ -1 +0,0 @@
-import{P as o}from"./ProxyViewerContainer-BVlcRirf.js";import"./main-eD8hEOHT.js";const r=o;export{r as component};