@tonyclaw/agent-inspector 3.0.45 → 3.0.47

package/src/ui/router.tsx

@@ -0,0 +1,13 @@
+import { createRouter } from "@tanstack/react-router";
+import { getConfiguredBasePath } from "../lib/basePath";
+import { routeTree } from "./routeTree.gen";
+
+export function createUiRouter(basepath = getConfiguredBasePath()) {
+  return createRouter({
+    routeTree,
+    basepath,
+    scrollRestoration: false,
+  });
+}
+
+export const router = createUiRouter();

package/src/ui/routes/__root.tsx

@@ -0,0 +1,69 @@
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { useEffect, type ReactNode } from "react";
+import { SWRConfig } from "swr";
+import { SafeErrorBoundary, SafeRouteError } from "../../components/errors/SafeErrorBoundary";
+import { withBasePath } from "../../lib/basePath";
+import { installChunkLoadRecovery } from "../../lib/chunkLoadRecovery";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+  errorComponent: RootRouteErrorComponent,
+  notFoundComponent: RootNotFoundComponent,
+});
+
+function UiProviders({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <SWRConfig value={{ revalidateOnFocus: false, revalidateIfStale: false }}>{children}</SWRConfig>
+  );
+}
+
+function RootComponent() {
+  useEffect(() => installChunkLoadRecovery(), []);
+
+  return (
+    <UiProviders>
+      <SafeErrorBoundary
+        scope="root-render"
+        title="Agent Inspector could not continue"
+        description="The application stopped this render safely. Retry or reload Inspector."
+        variant="page"
+      >
+        <Outlet />
+      </SafeErrorBoundary>
+    </UiProviders>
+  );
+}
+
+function RootRouteErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <UiProviders>
+      <SafeRouteError error={error} reset={reset} scope="root-route" />
+    </UiProviders>
+  );
+}
+
+function RootNotFoundComponent() {
+  return (
+    <UiProviders>
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-center px-6 py-16">
+          <div className="rounded-lg border border-border/70 bg-card/60 p-8 shadow-sm">
+            <div className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
+              404
+            </div>
+            <h1 className="mt-3 text-2xl font-semibold">Page not found</h1>
+            <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
+              This route is not part of the Agent Inspector UI.
+            </p>
+            <a
+              href={withBasePath("/")}
+              className="mt-6 inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              Open Agent Inspector
+            </a>
+          </div>
+        </div>
+      </main>
+    </UiProviders>
+  );
+}

package/src/{routes → ui/routes}/index.tsx

@@ -1,10 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState, type JSX } from "react";
-import { SafeRouteError } from "../components/errors/SafeErrorBoundary";
-import { ProxyViewerContainer } from "../components/ProxyViewerContainer";
+import { SafeRouteError } from "../../components/errors/SafeErrorBoundary";
+import { ProxyViewerContainer } from "../../components/ProxyViewerContainer";
 
 export const Route = createFileRoute("/")({
-  ssr: false,
   component: ClientOnlyProxyViewerRoute,
   errorComponent: HomeRouteError,
 });

package/src/{routes → ui/routes}/session/$sessionId.tsx

@@ -1,16 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect, useState, type JSX } from "react";
-import { SafeRouteError } from "../../components/errors/SafeErrorBoundary";
-import { ProxyViewerContainer } from "../../components/ProxyViewerContainer";
-import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../lib/sessionUrl";
+import { SafeRouteError } from "../../../components/errors/SafeErrorBoundary";
+import { ProxyViewerContainer } from "../../../components/ProxyViewerContainer";
+import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../../lib/sessionUrl";
 
-/**
- * Per-session deep link: opens a page that is pre-scoped to a single
- * session id. The path segment is base64url-encoded so JSON session blobs
- * and Unicode project paths survive dev-server URL normalization.
- */
 export const Route = createFileRoute("/session/$sessionId")({
-  ssr: false,
   component: SessionViewerRoute,
   errorComponent: SessionRouteError,
   parseParams: (params) => ({
@@ -41,9 +35,9 @@ function ClientOnlySessionViewer({ sessionId }: { sessionId: string }): JSX.Elem
     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="border border-border bg-card shadow-sm rounded-[8px] px-4 py-8">
+          <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 session data...</p>
-            <p className="mt-3 inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all text-muted-foreground">
+            <p className="mt-3 inline-block max-w-full break-all rounded bg-muted px-3 py-1 font-mono text-xs text-muted-foreground">
               {sessionId}
             </p>
           </div>

package/src/ui/runtimeDiscovery.ts

@@ -0,0 +1,50 @@
+import { fetchWithTimeout } from "../lib/apiClient";
+import {
+  acceptBrowserRuntimeDiscovery,
+  resolveBrowserRuntimeForDocument,
+  type BrowserRuntimeResolution,
+} from "../lib/browserRuntimeResolver";
+
+const RUNTIME_DISCOVERY_TIMEOUT_MS = 2_000;
+type RuntimeDiscoveryRequest = () => Promise<Response>;
+
+function requestRuntimeDiscovery(): Promise<Response> {
+  return fetchWithTimeout("/api/runtime", RUNTIME_DISCOVERY_TIMEOUT_MS, {
+    cache: "no-store",
+  });
+}
+
+function discoveryFailure(issue: string): BrowserRuntimeResolution {
+  return {
+    ok: false,
+    source: "discovered",
+    code: "invalid",
+    issues: [issue],
+  };
+}
+
+/**
+ * Validate the backend discovery document before same-origin fallback values
+ * are exposed as verified Coding Agent endpoints. Injected/operator contracts
+ * are already schema-validated and need no discovery round trip.
+ */
+export async function validateBrowserRuntimeForStartup(
+  request: RuntimeDiscoveryRequest = requestRuntimeDiscovery,
+): Promise<BrowserRuntimeResolution> {
+  const fallback = resolveBrowserRuntimeForDocument();
+  if (!fallback.ok || fallback.source !== "composed-fallback") return fallback;
+
+  try {
+    const response = await request();
+    if (!response.ok) {
+      return discoveryFailure(
+        `Backend runtime discovery returned HTTP ${String(response.status)}.`,
+      );
+    }
+    const value: unknown = await response.json();
+    return acceptBrowserRuntimeDiscovery(fallback.runtime, value);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "unknown discovery failure";
+    return discoveryFailure(`Backend runtime discovery failed: ${message}`);
+  }
+}

package/styles/globals.css

@@ -2,6 +2,7 @@
 @import "tw-animate-css";
 @import "./themes.css";
 @plugin "@tailwindcss/typography";
+@source "../src";
 
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 @custom-variant eye-care (&:where([data-theme="eye-care"], [data-theme="eye-care"] *));