@tonyclaw/agent-inspector 3.0.15 → 3.0.16

package/src/components/ProxyViewer.tsx

@@ -2055,9 +2055,8 @@ export function ProxyViewer({
   const [importError, setImportError] = useState<string | null>(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deletingCurrentView, setDeletingCurrentView] = useState(false);
-  const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(
-    readStoredDetailsPanelCollapsed,
-  );
+  const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(true);
+  const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = useState(false);
   const [comparePair, setComparePair] = useState<[CapturedLog, CapturedLog] | null>(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = useState<"hidden" | "playing" | "done">(
     "hidden",
@@ -2099,11 +2098,17 @@ export function ProxyViewer({
   }, []);
 
   useEffect(() => {
+    setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
+    setDetailsPanelStorageLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (!detailsPanelStorageLoaded) return;
     window.localStorage.setItem(
       DETAILS_PANEL_COLLAPSED_STORAGE_KEY,
       detailsPanelCollapsed ? "1" : "0",
     );
-  }, [detailsPanelCollapsed]);
+  }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
 
   useEffect(() => {
     if (pinnedSessionId === undefined) {

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/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/.output/public/assets/index-CGpPRty8.js

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