@tonyclaw/agent-inspector 2.0.42 → 2.1.0

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

@@ -170,7 +170,7 @@ export const LogEntryHeader = memo(function ({
         data-nav-id={`log-${log.id}`}
         data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
-          "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
+          "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-3 py-1.5 cursor-pointer transition-colors",
           "hover:bg-muted/50",
           "select-none",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
@@ -302,17 +302,23 @@ export const LogEntryHeader = memo(function ({
 
         {/* Token counts */}
         {hasTokens && (
-          <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className="flex min-w-0 items-center gap-1 text-xs sm:shrink-0">
             <Zap className="size-3 text-muted-foreground" />
-            <span className="font-mono tabular-nums">
+            <span className="flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums">
               <span
-                className={log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground"}
+                className={cn(
+                  "whitespace-nowrap",
+                  log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
+                )}
               >
                 IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"}
               </span>
-              {" / "}
+              <span className="text-muted-foreground">/</span>
               <span
-                className={log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground"}
+                className={cn(
+                  "whitespace-nowrap",
+                  log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
+                )}
               >
                 OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"}
               </span>

package/src/components/ui/crab-logo.tsx

@@ -40,56 +40,6 @@ export function CrabLogo({ className }: { className?: string }): JSX.Element {
       <line x1="9" y1="17.5" x2="8" y2="20.5" />
       <line x1="15" y1="17.5" x2="16" y2="20.5" />
       <line x1="17.5" y1="16" x2="19.5" y2="19.5" />
-      {/* Duanwu zongzi charms */}
-      <g>
-        <path
-          d="M5.6 17.7 L8.4 15.4 L10.8 18 C9.1 18.9 7.2 18.8 5.6 17.7 Z"
-          fill="#2f6b3f"
-          stroke="none"
-          opacity="0.95"
-        />
-        <path
-          d="M6.9 17.5 L8.4 16 L9.8 17.7 C8.9 18.1 7.8 18.1 6.9 17.5 Z"
-          fill="#6fb36f"
-          stroke="none"
-          opacity="0.95"
-        />
-        <path d="M8.4 16 L8.4 18.4" stroke="#d6b45f" strokeWidth="0.34" />
-        <circle cx="10.6" cy="17.75" r="0.36" fill="#c2412d" stroke="none" />
-      </g>
-      <g>
-        <path
-          d="M8 16.5 L11.9 13.6 L15.8 16.8 C13.3 18.4 10.4 18.3 8 16.5 Z"
-          fill="#2f6b3f"
-          stroke="none"
-          opacity="0.97"
-        />
-        <path
-          d="M9.8 16.3 L11.9 14.4 L14.3 16.5 C12.8 17.4 11.3 17.4 9.8 16.3 Z"
-          fill="#6fb36f"
-          stroke="none"
-          opacity="0.95"
-        />
-        <path d="M11.9 14.3 L11.9 17.8" stroke="#d6b45f" strokeWidth="0.42" />
-        <path d="M9.8 16.3 C11.2 15.8 12.9 15.9 14.3 16.5" stroke="#9fca78" strokeWidth="0.36" />
-        <circle cx="15.6" cy="16.75" r="0.43" fill="#c2412d" stroke="none" />
-      </g>
-      <g>
-        <path
-          d="M13.6 18.1 L16.2 15.7 L18.5 18.2 C17.1 19.1 15.2 19 13.6 18.1 Z"
-          fill="#2f6b3f"
-          stroke="none"
-          opacity="0.95"
-        />
-        <path
-          d="M14.8 17.9 L16.2 16.3 L17.5 18 C16.6 18.4 15.7 18.4 14.8 17.9 Z"
-          fill="#6fb36f"
-          stroke="none"
-          opacity="0.95"
-        />
-        <path d="M16.2 16.3 L16.2 18.6" stroke="#d6b45f" strokeWidth="0.34" />
-        <circle cx="18.35" cy="18.15" r="0.36" fill="#c2412d" stroke="none" />
-      </g>
     </svg>
   );
 }

package/src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
       {...props}

package/src/proxy/logIndex.ts

@@ -4,12 +4,56 @@ import { join, dirname } from "node:path";
 import { createInterface } from "node:readline";
 import { Buffer } from "node:buffer";
 import { resolveLogDir, logger } from "./logger";
+import type { ApiFormat, CapturedLog } from "./schemas";
+
+export type LogIndexSummary = {
+  id: number;
+  timestamp: string;
+  method: string;
+  path: string;
+  model: string | null;
+  sessionId: string | null;
+  responseStatus: number | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  cacheCreationInputTokens: number | null;
+  cacheReadInputTokens: number | null;
+  elapsedMs: number | null;
+  firstChunkMs: number | null;
+  totalStreamMs: number | null;
+  tokensPerSecond: number | null;
+  streaming: boolean;
+  userAgent: string | null;
+  origin: string | null;
+  apiFormat: ApiFormat;
+  isTest: boolean;
+  replayOfLogId: number | null;
+  providerName: string | null;
+  clientPort: number | null;
+  clientPid: number | null;
+  clientCwd: string | null;
+  clientProjectFolder: string | null;
+  streamingChunksPath: string | null;
+  rawRequestBodyBytes: number | null;
+  responseTextBytes: number | null;
+  warnings?: string[];
+  error: string | null;
+};
 
 export type LogIndexEntry = {
   id: number;
   file: string;
   byteOffset: number;
   byteLength: number;
+  sessionId?: string | null;
+  model?: string | null;
+  summary?: LogIndexSummary;
+};
+
+export type LogIndexEntryMetadata = {
+  sessionId: string | null;
+  model: string | null;
+  summary: LogIndexSummary;
 };
 
 type LogIndex = {
@@ -29,6 +73,50 @@ function getIndexPath(): string {
 
 let cachedIndex: LogIndex | null = null;
 
+function textByteLength(value: string | null): number | null {
+  return value === null ? null : Buffer.byteLength(value, "utf8");
+}
+
+export function createLogIndexEntryMetadata(log: CapturedLog): LogIndexEntryMetadata {
+  return {
+    sessionId: log.sessionId,
+    model: log.model,
+    summary: {
+      id: log.id,
+      timestamp: log.timestamp,
+      method: log.method,
+      path: log.path,
+      model: log.model,
+      sessionId: log.sessionId,
+      responseStatus: log.responseStatus,
+      inputTokens: log.inputTokens,
+      outputTokens: log.outputTokens,
+      cacheCreationInputTokens: log.cacheCreationInputTokens,
+      cacheReadInputTokens: log.cacheReadInputTokens,
+      elapsedMs: log.elapsedMs,
+      firstChunkMs: log.firstChunkMs ?? null,
+      totalStreamMs: log.totalStreamMs ?? null,
+      tokensPerSecond: log.tokensPerSecond ?? null,
+      streaming: log.streaming,
+      userAgent: log.userAgent,
+      origin: log.origin,
+      apiFormat: log.apiFormat,
+      isTest: log.isTest ?? false,
+      replayOfLogId: log.replayOfLogId ?? null,
+      providerName: log.providerName ?? null,
+      clientPort: log.clientPort ?? null,
+      clientPid: log.clientPid ?? null,
+      clientCwd: log.clientCwd ?? null,
+      clientProjectFolder: log.clientProjectFolder ?? null,
+      streamingChunksPath: log.streamingChunksPath ?? null,
+      rawRequestBodyBytes: log.rawRequestBodyBytes ?? textByteLength(log.rawRequestBody),
+      responseTextBytes: log.responseTextBytes ?? textByteLength(log.responseText),
+      warnings: log.warnings,
+      error: log.error ?? null,
+    },
+  };
+}
+
 function createEmptyIndex(): LogIndex {
   return {
     version: INDEX_VERSION,
@@ -100,9 +188,13 @@ export async function addToIndex(
   file: string,
   byteOffset: number,
   byteLength: number,
+  metadata?: LogIndexEntryMetadata,
 ): Promise<void> {
   const index = await loadIndex();
-  index.entries[id] = { id, file, byteOffset, byteLength };
+  index.entries[id] =
+    metadata === undefined
+      ? { id, file, byteOffset, byteLength }
+      : { id, file, byteOffset, byteLength, ...metadata };
   if (id > index.maxId) {
     index.maxId = id;
   }
@@ -154,6 +246,98 @@ type FileIndexResult = {
   maxId: number;
 };
 
+function readStringOrNullField(entry: object, field: string): string | null {
+  const desc = Object.getOwnPropertyDescriptor(entry, field);
+  if (desc === undefined) return null;
+  if (typeof desc.value === "string") return desc.value;
+  return null;
+}
+
+function readStringField(entry: object, field: string): string {
+  return readStringOrNullField(entry, field) ?? "";
+}
+
+function readNumberOrNullField(entry: object, field: string): number | null {
+  const desc = Object.getOwnPropertyDescriptor(entry, field);
+  if (desc === undefined) return null;
+  return typeof desc.value === "number" ? desc.value : null;
+}
+
+function readBooleanField(entry: object, field: string): boolean {
+  const desc = Object.getOwnPropertyDescriptor(entry, field);
+  if (desc === undefined) return false;
+  return typeof desc.value === "boolean" ? desc.value : false;
+}
+
+function readApiFormatField(entry: object): ApiFormat {
+  const value = readStringOrNullField(entry, "apiFormat");
+  switch (value) {
+    case "anthropic":
+      return "anthropic";
+    case "openai":
+      return "openai";
+    case "unknown":
+    case null:
+      return "unknown";
+    default:
+      return "unknown";
+  }
+}
+
+function readStringArrayField(entry: object, field: string): string[] | undefined {
+  const desc = Object.getOwnPropertyDescriptor(entry, field);
+  if (desc === undefined || !Array.isArray(desc.value)) return undefined;
+
+  const values: string[] = [];
+  for (const item of desc.value) {
+    if (typeof item !== "string") return undefined;
+    values.push(item);
+  }
+  return values;
+}
+
+function readTextByteLength(entry: object, bytesField: string, textField: string): number | null {
+  const explicitBytes = readNumberOrNullField(entry, bytesField);
+  if (explicitBytes !== null && explicitBytes >= 0) return explicitBytes;
+  return textByteLength(readStringOrNullField(entry, textField));
+}
+
+function readLogIndexSummary(entry: object, id: number): LogIndexSummary {
+  return {
+    id,
+    timestamp: readStringField(entry, "timestamp"),
+    method: readStringField(entry, "method"),
+    path: readStringField(entry, "path"),
+    model: readStringOrNullField(entry, "model"),
+    sessionId: readStringOrNullField(entry, "sessionId"),
+    responseStatus: readNumberOrNullField(entry, "responseStatus"),
+    inputTokens: readNumberOrNullField(entry, "inputTokens"),
+    outputTokens: readNumberOrNullField(entry, "outputTokens"),
+    cacheCreationInputTokens: readNumberOrNullField(entry, "cacheCreationInputTokens"),
+    cacheReadInputTokens: readNumberOrNullField(entry, "cacheReadInputTokens"),
+    elapsedMs: readNumberOrNullField(entry, "elapsedMs"),
+    firstChunkMs: readNumberOrNullField(entry, "firstChunkMs"),
+    totalStreamMs: readNumberOrNullField(entry, "totalStreamMs"),
+    tokensPerSecond: readNumberOrNullField(entry, "tokensPerSecond"),
+    streaming: readBooleanField(entry, "streaming"),
+    userAgent: readStringOrNullField(entry, "userAgent"),
+    origin: readStringOrNullField(entry, "origin"),
+    apiFormat: readApiFormatField(entry),
+    isTest: readBooleanField(entry, "isTest"),
+    replayOfLogId: readNumberOrNullField(entry, "replayOfLogId"),
+    providerName: readStringOrNullField(entry, "providerName"),
+    clientPort: readNumberOrNullField(entry, "clientPort"),
+    clientPid: readNumberOrNullField(entry, "clientPid"),
+    clientCwd: readStringOrNullField(entry, "clientCwd"),
+    clientProjectFolder: readStringOrNullField(entry, "clientProjectFolder"),
+    streamingChunksPath: readStringOrNullField(entry, "streamingChunksPath"),
+    rawRequestBodyBytes: readTextByteLength(entry, "rawRequestBodyBytes", "rawRequestBody"),
+    responseTextBytes: readTextByteLength(entry, "responseTextBytes", "responseText"),
+    warnings: readStringArrayField(entry, "warnings"),
+    error: readStringOrNullField(entry, "error"),
+  };
+}
+
 async function indexFile(filePath: string, file: string): Promise<FileIndexResult> {
   const entries: Record<number, LogIndexEntry> = {};
   let maxId = 0;
@@ -179,6 +363,9 @@ async function indexFile(filePath: string, file: string): Promise<FileIndexResul
               file,
               byteOffset,
               byteLength: lineBytes,
+              sessionId: readStringOrNullField(entry, "sessionId"),
+              model: readStringOrNullField(entry, "model"),
+              summary: readLogIndexSummary(entry, entryId),
             };
           }
         }