@tonyclaw/agent-inspector 3.0.14 → 3.0.16

package/src/components/ProxyViewerContainer.tsx

@@ -2,7 +2,11 @@ import { useState, useEffect, useCallback, useRef, useMemo, useTransition, type
 import { z } from "zod";
 import { CapturedLogSchema, type CapturedLog } from "../contracts";
 import { fetchJson, fetchJsonWithTimeout } from "../lib/apiClient";
-import { InspectorGroupsListResponseSchema, type InspectorGroup } from "../lib/groupContract";
+import {
+  DeleteInspectorGroupsResponseSchema,
+  InspectorGroupsListResponseSchema,
+  type InspectorGroup,
+} from "../lib/groupContract";
 import { ImportLogsResponseSchema, type ImportLogsResponse } from "../lib/logImportContract";
 import { useStripConfig } from "../lib/useStripConfig";
 import { OnboardingBanner } from "./OnboardingBanner";
@@ -58,6 +62,11 @@ const DeleteLogsResponseSchema = z.object({
   sessionArchiveLogsDeleted: z.number().int().nonnegative().optional(),
 });
 
+type GroupCleanupResult = {
+  deleted: number;
+  ok: boolean;
+};
+
 type SessionPageRequest =
   | { kind: "newest" }
   | { kind: "oldest" }
@@ -190,6 +199,50 @@ function fetchSessionLogsPage(
   );
 }
 
+type SessionLogIdCollection = {
+  ids: number[];
+  truncated: boolean;
+};
+
+async function collectSessionLogIds(
+  sessionId: string,
+  onProgress: (logCount: number, pageCount: number) => void,
+): Promise<SessionLogIdCollection> {
+  const ids = new Set<number>();
+  let page = await fetchSessionLogsPage(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT);
+  for (const log of page.logs) {
+    ids.add(log.id);
+  }
+  onProgress(ids.size, 1);
+
+  let loadedPages = 1;
+  while (page.hasNewer && page.newestLogId !== null && loadedPages < MAX_SESSION_RELOAD_PAGES) {
+    page = await fetchSessionLogsPage(
+      sessionId,
+      { kind: "newer", afterLogId: page.newestLogId },
+      SESSION_RELOAD_PAGE_LIMIT,
+    );
+    for (const log of page.logs) {
+      ids.add(log.id);
+    }
+    loadedPages += 1;
+    onProgress(ids.size, loadedPages);
+  }
+
+  return { ids: [...ids], truncated: page.hasNewer };
+}
+
+async function deleteAllGroupsForFullHistoryDelete(): Promise<GroupCleanupResult> {
+  try {
+    const result = await fetchJson("/api/groups", DeleteInspectorGroupsResponseSchema, {
+      method: "DELETE",
+    });
+    return { deleted: result.deleted, ok: true };
+  } catch {
+    return { deleted: 0, ok: false };
+  }
+}
+
 export function mergeLogsById(
   previousLogs: readonly CapturedLog[],
   incomingLogs: readonly CapturedLog[],
@@ -685,27 +738,88 @@ export function ProxyViewerContainer({
     [showToast],
   );
 
-  const handleDeleteCurrentView = useCallback(
-    async (ids: number[]): Promise<void> => {
-      if (ids.length === 0) return;
-      const persistedIds = ids.filter((id) => Number.isInteger(id) && id >= 0);
+  const handleDeleteCurrentView = useCallback(async (): Promise<void> => {
+    const deleteRequestId = sessionPageRequestIdRef.current + 1;
+    sessionPageRequestIdRef.current = deleteRequestId;
+    setSessionPageLoading(true);
+    stopSessionLoadProgress();
+    dismissToast();
+
+    try {
+      if (selectedSession === "__all__") {
+        startSessionLoadProgress("Deleting stored history", deleteRequestId);
+        const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
+          method: "DELETE",
+        });
+        const groupCleanup = await deleteAllGroupsForFullHistoryDelete();
+        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
+        setAllLogs([]);
+        logIndexRef.current.clear();
+        setLogPage(null);
+        setKnownSessions([]);
+        setSessionMemberships([]);
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
+        const groupMessage = groupCleanup.ok
+          ? ` Cleared ${groupCleanup.deleted.toString()} group${
+              groupCleanup.deleted === 1 ? "" : "s"
+            }.`
+          : " Group cleanup failed; open Groups to retry Clear.";
+        showToast({
+          message: `Deleted ${result.cleared.toString()} stored log${
+            result.cleared === 1 ? "" : "s"
+          } across all sessions.${groupMessage}`,
+          tone: groupCleanup.ok ? "success" : "error",
+        });
+        return;
+      }
+
+      const sessionId = selectedSession;
+      startSessionLoadProgress("Deleting session history", deleteRequestId);
+      const collected = await collectSessionLogIds(sessionId, (logCount, pageCount) => {
+        updateSessionLoadProgress("Deleting session history", deleteRequestId, logCount, pageCount);
+      });
+      const idSet = new Set(collected.ids);
+      for (const log of allLogs) {
+        if (log.sessionId === sessionId) {
+          idSet.add(log.id);
+        }
+      }
+      const persistedIds = [...idSet].filter((id) => Number.isInteger(id) && id >= 0);
       if (persistedIds.length === 0) {
+        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
+        setAllLogs((prev) => {
+          const remaining = prev.filter((log) => log.sessionId !== sessionId);
+          logIndexRef.current = buildLogIndex(remaining);
+          return remaining;
+        });
+        setLogPage((prev) =>
+          prev === null
+            ? null
+            : {
+                ...prev,
+                logs: prev.logs.filter((log) => log.sessionId !== sessionId),
+              },
+        );
+        setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
         showToast({
-          message: "No persisted log records were found for this view.",
-          tone: "error",
+          message: "No stored log records were found for this session.",
+          tone: "success",
         });
         return;
       }
-      const idSet = new Set(persistedIds);
-      const removed = allLogs.filter((log) => idSet.has(log.id));
+
       const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
         method: "DELETE",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ ids: persistedIds }),
       });
 
+      if (sessionPageRequestIdRef.current !== deleteRequestId) return;
       setAllLogs((prev) => {
-        const remaining = prev.filter((log) => !idSet.has(log.id));
+        const remaining = prev.filter((log) => log.sessionId !== sessionId);
         logIndexRef.current = buildLogIndex(remaining);
         return remaining;
       });
@@ -714,19 +828,33 @@ export function ProxyViewerContainer({
           ? null
           : {
               ...prev,
-              logs: prev.logs.filter((log) => !idSet.has(log.id)),
+              logs: prev.logs.filter((log) => log.sessionId !== sessionId),
             },
       );
-      setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(removed)));
+      setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
+      setSessionPageLoading(false);
+      stopSessionLoadProgress();
       showToast({
         message: `Deleted ${result.cleared.toString()} stored log${
           result.cleared === 1 ? "" : "s"
-        } from the current view.`,
-        tone: "success",
+        } for this session${collected.truncated ? ". More history may remain." : "."}`,
+        tone: collected.truncated ? "error" : "success",
       });
-    },
-    [allLogs, showToast],
-  );
+    } finally {
+      if (sessionPageRequestIdRef.current === deleteRequestId) {
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
+      }
+    }
+  }, [
+    allLogs,
+    dismissToast,
+    selectedSession,
+    showToast,
+    startSessionLoadProgress,
+    stopSessionLoadProgress,
+    updateSessionLoadProgress,
+  ]);
 
   const handleReloadSession = useCallback(() => {
     if (initialSessionId !== undefined) {

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

@@ -1,18 +1,21 @@
 import { type JSX } from "react";
-import { Wrench } from "lucide-react";
+import { AlertTriangle, Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
 import { dispatchLogFocusRequest } from "./logFocus";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
+  warnings?: readonly string[];
 };
 
+const VISIBLE_TOOL_LIMIT = 4;
+
 function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
   return (
     <button
       type="button"
       key={event.id}
-      className="inline-flex min-w-0 items-center gap-1.5 rounded-md bg-white/[0.035] px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="inline-flex h-6 max-w-[11rem] min-w-0 items-center gap-1 rounded-md bg-white/[0.028] px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       onClick={() =>
         dispatchLogFocusRequest({
           logId: event.logId,
@@ -21,21 +24,44 @@ function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
         })
       }
       aria-label={`Open response tool call ${event.name}`}
-      title={`Open ${event.name} in Response`}
     >
-      <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
+      <Wrench className="size-3 shrink-0 text-sky-400/65" />
       <span className="min-w-0 truncate font-mono font-semibold">{event.name}</span>
     </button>
   );
 }
 
-export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
-  if (events.length === 0) return null;
+export function ToolTraceEvents({
+  events,
+  warnings = [],
+}: ToolTraceEventsProps): JSX.Element | null {
+  if (events.length === 0 && warnings.length === 0) return null;
+  const visibleEvents = events.slice(0, VISIBLE_TOOL_LIMIT);
+  const hiddenCount = Math.max(0, events.length - visibleEvents.length);
   return (
-    <div className="mx-3 mb-2 flex flex-wrap gap-1.5">
-      {events.map((event) => (
-        <ToolTraceEventChip key={event.id} event={event} />
-      ))}
+    <div className="mx-3 mb-2 flex min-w-0 items-center gap-1.5 overflow-hidden rounded-md bg-black/[0.10] px-2 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.025)]">
+      {events.length > 0 && (
+        <span className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-300/70">
+          <Wrench className="size-3" />
+          {events.length}
+        </span>
+      )}
+      {warnings.length > 0 && (
+        <span className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-amber-300/20 bg-amber-300/[0.08] px-1.5 font-mono text-[10px] font-semibold text-amber-100">
+          <AlertTriangle className="size-3" />
+          {warnings.length}
+        </span>
+      )}
+      <div className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+        {visibleEvents.map((event) => (
+          <ToolTraceEventChip key={event.id} event={event} />
+        ))}
+        {hiddenCount > 0 && (
+          <span className="inline-flex h-6 shrink-0 items-center rounded-md bg-white/[0.025] px-1.5 font-mono text-[11px] font-semibold text-muted-foreground">
+            +{hiddenCount}
+          </span>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -361,7 +361,10 @@ export const TurnGroup = memo(function TurnGroup({
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
                   }
                 />
-                <ToolTraceEvents events={toolEventsByLogId.get(log.id) ?? []} />
+                <ToolTraceEvents
+                  events={toolEventsByLogId.get(log.id) ?? []}
+                  warnings={log.warnings ?? []}
+                />
               </div>
             </div>
           );

package/src/lib/chunkLoadRecovery.ts

@@ -0,0 +1,83 @@
+const CHUNK_LOAD_RELOAD_AT_KEY = "agent-inspector.chunkLoadReloadAt";
+const CHUNK_LOAD_RELOAD_WINDOW_MS = 15_000;
+
+const CHUNK_LOAD_FAILURE_PATTERNS = [
+  "failed to fetch dynamically imported module",
+  "failed to load module script",
+  "importing a module script failed",
+  "error loading dynamically imported module",
+  "loading chunk",
+  "unable to preload css",
+];
+
+function messageFromReason(reason: unknown): string {
+  if (reason instanceof Error) {
+    return reason.message;
+  }
+
+  if (typeof reason === "string") {
+    return reason;
+  }
+
+  return "";
+}
+
+function isChunkLoadFailureMessage(message: string): boolean {
+  const normalizedMessage = message.toLowerCase();
+  return CHUNK_LOAD_FAILURE_PATTERNS.some((pattern) => normalizedMessage.includes(pattern));
+}
+
+function readLastReloadAt(): number {
+  const storedValue = window.sessionStorage.getItem(CHUNK_LOAD_RELOAD_AT_KEY);
+  if (storedValue === null) {
+    return 0;
+  }
+
+  const parsedValue = Number(storedValue);
+  return Number.isFinite(parsedValue) ? parsedValue : 0;
+}
+
+function reloadOnceForChunkFailure(): void {
+  const now = Date.now();
+  const lastReloadAt = readLastReloadAt();
+  if (now - lastReloadAt < CHUNK_LOAD_RELOAD_WINDOW_MS) {
+    return;
+  }
+
+  window.sessionStorage.setItem(CHUNK_LOAD_RELOAD_AT_KEY, String(now));
+  window.location.reload();
+}
+
+export function installChunkLoadRecovery(): () => void {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+
+  const handleUnhandledRejection = (event: PromiseRejectionEvent): void => {
+    const message = messageFromReason(event.reason);
+    if (!isChunkLoadFailureMessage(message)) {
+      return;
+    }
+
+    event.preventDefault();
+    reloadOnceForChunkFailure();
+  };
+
+  const handleError = (event: ErrorEvent): void => {
+    const message = event.message !== "" ? event.message : messageFromReason(event.error);
+    if (!isChunkLoadFailureMessage(message)) {
+      return;
+    }
+
+    event.preventDefault();
+    reloadOnceForChunkFailure();
+  };
+
+  window.addEventListener("unhandledrejection", handleUnhandledRejection);
+  window.addEventListener("error", handleError);
+
+  return () => {
+    window.removeEventListener("unhandledrejection", handleUnhandledRejection);
+    window.removeEventListener("error", handleError);
+  };
+}

package/src/proxy/formats/openai/codexMetadata.ts

@@ -0,0 +1,61 @@
+type CodexClientMetadata = {
+  sessionId: string | null;
+  threadId: string | null;
+  turnId: string | null;
+  installationId: string | null;
+  windowId: string | null;
+};
+
+const EMPTY_CODEX_CLIENT_METADATA: CodexClientMetadata = {
+  sessionId: null,
+  threadId: null,
+  turnId: null,
+  installationId: null,
+  windowId: null,
+};
+
+function readObjectField(value: unknown, field: string): unknown {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return undefined;
+  return Object.getOwnPropertyDescriptor(value, field)?.value;
+}
+
+function readStringField(value: unknown, field: string): string | null {
+  const fieldValue = readObjectField(value, field);
+  return typeof fieldValue === "string" && fieldValue.length > 0 ? fieldValue : null;
+}
+
+function parseNestedTurnMetadata(value: unknown): unknown {
+  if (typeof value !== "string" || value.length === 0) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+export function extractCodexClientMetadata(rawRequest: unknown): CodexClientMetadata {
+  const clientMetadata = readObjectField(rawRequest, "client_metadata");
+  if (clientMetadata === undefined) return EMPTY_CODEX_CLIENT_METADATA;
+
+  const turnMetadata = parseNestedTurnMetadata(
+    readObjectField(clientMetadata, "x-codex-turn-metadata"),
+  );
+
+  return {
+    sessionId:
+      readStringField(clientMetadata, "session_id") ?? readStringField(turnMetadata, "session_id"),
+    threadId:
+      readStringField(clientMetadata, "thread_id") ?? readStringField(turnMetadata, "thread_id"),
+    turnId: readStringField(clientMetadata, "turn_id") ?? readStringField(turnMetadata, "turn_id"),
+    installationId:
+      readStringField(clientMetadata, "x-codex-installation-id") ??
+      readStringField(turnMetadata, "installation_id"),
+    windowId:
+      readStringField(clientMetadata, "x-codex-window-id") ??
+      readStringField(turnMetadata, "window_id"),
+  };
+}
+
+export function extractCodexSessionId(rawRequest: unknown): string | null {
+  return extractCodexClientMetadata(rawRequest).sessionId;
+}

package/src/proxy/formats/openai/handler.ts

@@ -7,6 +7,7 @@ import {
   parseOpenAIResponse,
 } from "./schemas";
 import { extractOpenAIStream } from "./stream";
+import { extractCodexSessionId } from "./codexMetadata";
 
 function emptyTokens(): TokenUsage {
   return {
@@ -17,6 +18,11 @@ function emptyTokens(): TokenUsage {
   };
 }
 
+function headerSessionId(headers: Headers | undefined): string | null {
+  if (headers === undefined) return null;
+  return headers.get("x-agent-inspector-session-id") ?? headers.get("x-session-affinity");
+}
+
 export const OpenAIFormatHandler: FormatHandler = {
   format: "openai",
 
@@ -27,14 +33,14 @@ export const OpenAIFormatHandler: FormatHandler = {
       if (result.success) {
         return {
           model: result.data.model,
-          sessionId: headers?.get("x-session-affinity") ?? null,
+          sessionId: extractCodexSessionId(json) ?? headerSessionId(headers),
         };
       }
       const responsesResult = OpenAIResponsesRequestSchema.safeParse(json);
       if (responsesResult.success) {
         return {
           model: responsesResult.data.model,
-          sessionId: headers?.get("x-session-affinity") ?? null,
+          sessionId: extractCodexSessionId(json) ?? headerSessionId(headers),
         };
       }
       return null;

package/src/routes/__root.tsx

@@ -1,9 +1,10 @@
 /// <reference types="vite/client" />
 import { Outlet, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
-import type { ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { SWRConfig } from "swr";
 import faviconSvg from "../assets/favicon.svg?url";
 import appCss from "../index.css?url";
+import { installChunkLoadRecovery } from "../lib/chunkLoadRecovery";
 
 export const Route = createRootRoute({
   head: () => ({
@@ -22,6 +23,8 @@ export const Route = createRootRoute({
 });
 
 function RootComponent() {
+  useEffect(() => installChunkLoadRecovery(), []);
+
   return (
     <RootDocument>
       <Outlet />
@@ -57,11 +60,11 @@ function RootNotFoundComponent() {
 
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" suppressHydrationWarning={true}>
       <head>
         <HeadContent />
       </head>
-      <body>
+      <body suppressHydrationWarning={true}>
         <SWRConfig value={{ revalidateOnFocus: false, revalidateIfStale: false }}>
           {children}
         </SWRConfig>

package/src/routes/index.tsx

@@ -1,6 +1,30 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState, type JSX } from "react";
 import { ProxyViewerContainer } from "../components/ProxyViewerContainer";
 
 export const Route = createFileRoute("/")({
-  component: ProxyViewerContainer,
+  ssr: false,
+  component: ClientOnlyProxyViewerRoute,
 });
+
+function ClientOnlyProxyViewerRoute(): JSX.Element {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="mx-auto flex min-h-screen w-full max-w-2xl flex-col justify-center px-6 py-16 text-center">
+          <div className="rounded-[8px] border border-border bg-card px-4 py-8 shadow-sm">
+            <p className="text-sm font-medium text-muted-foreground">Loading Inspector...</p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return <ProxyViewerContainer />;
+}

package/src/routes/session/$sessionId.tsx

@@ -9,6 +9,7 @@ import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../lib/sessi
  * and Unicode project paths survive dev-server URL normalization.
  */
 export const Route = createFileRoute("/session/$sessionId")({
+  ssr: false,
   component: SessionViewerRoute,
   parseParams: (params) => ({
     sessionId: decodeSessionIdFromPath(params.sessionId),

package/styles/globals.css

@@ -44,6 +44,8 @@
   --animate-crab-appear: crab-appear 300ms ease-out;
   --animate-crab-settle: crab-settle 400ms ease-in-out;
   --animate-crab-piano-pop: crab-piano-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
+  --animate-crab-short-leg-body: crab-short-leg-body 720ms ease-in-out infinite;
+  --animate-crab-short-leg-step: crab-short-leg-step 360ms ease-in-out infinite;
 }
 
 :root {
@@ -165,10 +167,42 @@
   }
 }
 
+@keyframes crab-short-leg-body {
+  0%,
+  100% {
+    transform: translateY(0) rotate(-1deg);
+  }
+  25% {
+    transform: translateY(1px) rotate(1.5deg);
+  }
+  50% {
+    transform: translateY(-1px) rotate(-1.5deg);
+  }
+  75% {
+    transform: translateY(1px) rotate(1deg);
+  }
+}
+
+@keyframes crab-short-leg-step {
+  0%,
+  100% {
+    transform: translateY(0) scaleY(0.72) rotate(var(--crab-leg-rest, 0deg));
+    opacity: 0.42;
+  }
+  50% {
+    transform: translateY(3px) scaleY(1.15) rotate(var(--crab-leg-step, 0deg));
+    opacity: 0.9;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-crab-piano-pop {
     animation: none !important;
   }
+  .floating-crab-body,
+  .floating-crab-leg {
+    animation: none !important;
+  }
 }
 
 [data-deep-link-highlight="true"] {
@@ -205,6 +239,26 @@
 }
 
 @layer utilities {
+  .floating-crab-body {
+    animation: var(--animate-crab-short-leg-body);
+    transform-origin: 50% 74%;
+  }
+
+  .floating-crab-leg {
+    animation: var(--animate-crab-short-leg-step);
+    transform-origin: 50% 0%;
+  }
+
+  .floating-crab-leg-left {
+    --crab-leg-rest: -10deg;
+    --crab-leg-step: 14deg;
+  }
+
+  .floating-crab-leg-right {
+    --crab-leg-rest: 10deg;
+    --crab-leg-step: -14deg;
+  }
+
   .inspector-scrollbar {
     scrollbar-color: color-mix(in srgb, var(--muted-foreground) 32%, transparent) transparent;
     scrollbar-width: thin;