@tonyclaw/agent-inspector 2.0.43 → 2.1.0

package/src/components/ProxyViewerContainer.tsx

@@ -1,10 +1,15 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type JSX } from "react";
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
+import { fetchJson } from "../lib/apiClient";
 import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
-import { ProxyViewer, type SessionMembershipEvidence } from "./ProxyViewer";
+import {
+  ProxyViewer,
+  type LogPaginationControls,
+  type SessionMembershipEvidence,
+} from "./ProxyViewer";
 import { dispatchLogFocusRequest } from "./proxy-viewer/logFocus";
 
 type SSEUpdate =
@@ -28,6 +33,24 @@ const SSEUpdateSchema = z.union([
   }),
 ]);
 
+const LogCursorPageSchema = z.object({
+  logs: z.array(CapturedLogSchema),
+  total: z.number().int().nonnegative(),
+  limit: z.number().int().positive(),
+  hasOlder: z.boolean(),
+  hasNewer: z.boolean(),
+  oldestLogId: z.number().int().positive().nullable(),
+  newestLogId: z.number().int().positive().nullable(),
+});
+
+type LogCursorPage = z.infer<typeof LogCursorPageSchema>;
+
+type SessionPageRequest =
+  | { kind: "newest" }
+  | { kind: "oldest" }
+  | { kind: "older"; beforeLogId: number }
+  | { kind: "newer"; afterLogId: number };
+
 function buildSessionMembershipEvidence(
   groups: readonly InspectorGroup[],
   sessionId: string,
@@ -89,6 +112,7 @@ const DEBOUNCE_MS = 50;
 const HASH_SCROLL_ATTEMPTS = 12;
 const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
+const SESSION_PAGE_LIMIT = 100;
 
 function buildLogsStreamUrl(sessionId: string | undefined): string {
   const params = new URLSearchParams();
@@ -100,6 +124,31 @@ function buildLogsStreamUrl(sessionId: string | undefined): string {
   return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
 }
 
+function buildSessionLogsPageUrl(sessionId: string, request: SessionPageRequest): string {
+  const params = new URLSearchParams({
+    cursor: "1",
+    compact: "1",
+    limit: String(SESSION_PAGE_LIMIT),
+    sessionId,
+  });
+
+  switch (request.kind) {
+    case "oldest":
+      params.set("anchor", "oldest");
+      break;
+    case "older":
+      params.set("beforeLogId", String(request.beforeLogId));
+      break;
+    case "newer":
+      params.set("afterLogId", String(request.afterLogId));
+      break;
+    case "newest":
+      break;
+  }
+
+  return `/api/logs?${params.toString()}`;
+}
+
 function buildLogIndex(logs: readonly CapturedLog[]): Map<number, number> {
   const idx = new Map<number, number>();
   for (let i = 0; i < logs.length; i++) {
@@ -138,10 +187,13 @@ export function ProxyViewerContainer({
   const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
   const [error, setError] = useState<string | null>(null);
   const [streamInitialized, setStreamInitialized] = useState(initialSessionId === undefined);
+  const [logPage, setLogPage] = useState<LogCursorPage | null>(null);
+  const [sessionPageLoading, setSessionPageLoading] = useState(initialSessionId !== undefined);
   const [sessionMemberships, setSessionMemberships] = useState<SessionMembershipEvidence[]>([]);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const handledHashRef = useRef<string | null>(null);
+  const sessionPageRequestIdRef = useRef(0);
 
   // O(1) log lookup by id
   const logIndexRef = useRef<Map<number, number>>(new Map());
@@ -245,6 +297,37 @@ export function ProxyViewerContainer({
     };
   }, [initialSessionId, scheduleUpdate]);
 
+  const loadSessionPage = useCallback(
+    (request: SessionPageRequest) => {
+      if (initialSessionId === undefined) return;
+
+      const requestId = sessionPageRequestIdRef.current + 1;
+      sessionPageRequestIdRef.current = requestId;
+      setSessionPageLoading(true);
+      setError(null);
+
+      void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema)
+        .then((page) => {
+          if (sessionPageRequestIdRef.current !== requestId) return;
+          const nextLogs = page.logs;
+          logIndexRef.current = buildLogIndex(nextLogs);
+          setAllLogs(nextLogs);
+          setLogPage(page);
+          setSelectedSession(initialSessionId);
+          setSessionPageLoading(false);
+          setError(null);
+        })
+        .catch((err: unknown) => {
+          if (sessionPageRequestIdRef.current !== requestId) return;
+          setAllLogs([]);
+          setLogPage(null);
+          setSessionPageLoading(false);
+          setError(err instanceof Error ? err.message : "Failed to load session logs");
+        });
+    },
+    [initialSessionId],
+  );
+
   useEffect(() => {
     if (initialSessionId === undefined) {
       setSessionMemberships([]);
@@ -273,6 +356,12 @@ export function ProxyViewerContainer({
   }, [initialSessionId]);
 
   useEffect(() => {
+    if (initialSessionId === undefined) return;
+    loadSessionPage({ kind: "newest" });
+  }, [initialSessionId, loadSessionPage]);
+
+  useEffect(() => {
+    if (initialSessionId !== undefined) return undefined;
     connectSSE();
     return () => {
       if (eventSourceRef.current) {
@@ -288,7 +377,7 @@ export function ProxyViewerContainer({
         flushTimerRef.current = null;
       }
     };
-  }, [connectSSE]);
+  }, [connectSSE, initialSessionId]);
 
   useEffect(() => {
     const hash = window.location.hash;
@@ -402,6 +491,48 @@ export function ProxyViewerContainer({
   // Read the strip config once at the container so the virtualized list does
   // not need N independent SWR subscriptions per row.
   const { strip, captureMode, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
+  const loadOldestPage = useCallback(() => {
+    loadSessionPage({ kind: "oldest" });
+  }, [loadSessionPage]);
+  const loadNewestPage = useCallback(() => {
+    loadSessionPage({ kind: "newest" });
+  }, [loadSessionPage]);
+  const loadOlderPage = useCallback(() => {
+    const firstLog = allLogs[0];
+    const beforeLogId = logPage?.oldestLogId ?? firstLog?.id ?? null;
+    if (beforeLogId === null) return;
+    loadSessionPage({ kind: "older", beforeLogId });
+  }, [allLogs, loadSessionPage, logPage]);
+  const loadNewerPage = useCallback(() => {
+    const lastLog = allLogs[allLogs.length - 1];
+    const afterLogId = logPage?.newestLogId ?? lastLog?.id ?? null;
+    if (afterLogId === null) return;
+    loadSessionPage({ kind: "newer", afterLogId });
+  }, [allLogs, loadSessionPage, logPage]);
+  const pagination = useMemo<LogPaginationControls | undefined>(() => {
+    if (initialSessionId === undefined) return undefined;
+    return {
+      isLoading: sessionPageLoading,
+      total: logPage?.total ?? null,
+      pageSize: logPage?.limit ?? SESSION_PAGE_LIMIT,
+      hasOlder: logPage?.hasOlder ?? false,
+      hasNewer: logPage?.hasNewer ?? false,
+      oldestLogId: logPage?.oldestLogId ?? null,
+      newestLogId: logPage?.newestLogId ?? null,
+      onOldest: loadOldestPage,
+      onOlder: loadOlderPage,
+      onNewer: loadNewerPage,
+      onNewest: loadNewestPage,
+    };
+  }, [
+    initialSessionId,
+    loadNewestPage,
+    loadNewerPage,
+    loadOlderPage,
+    loadOldestPage,
+    logPage,
+    sessionPageLoading,
+  ]);
 
   return (
     <>
@@ -421,7 +552,8 @@ export function ProxyViewerContainer({
         onModelChange={setSelectedModel}
         onClearAll={handleClearAll}
         onClearGroup={handleClearGroup}
-        isLoading={initialSessionId !== undefined && !streamInitialized}
+        isLoading={initialSessionId === undefined ? !streamInitialized : sessionPageLoading}
+        pagination={pagination}
         sessionMemberships={sessionMemberships}
         viewMode={viewMode}
         onViewModeChange={setViewMode}

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/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),
             };
           }
         }