@tonyclaw/agent-inspector 3.0.44 → 3.0.46

package/src/ui/bootstrap.ts

@@ -0,0 +1,167 @@
+import { AGENT_INSPECTOR_BASE_PATH_META_NAME } from "../lib/basePath";
+import { THEME_MODE_STORAGE_KEY } from "../lib/themeMode";
+import {
+  UI_SCALE_AUTO_LARGE_WIDTH,
+  UI_SCALE_AUTO_MAX_DPR,
+  UI_SCALE_AUTO_MEDIUM_WIDTH,
+  UI_SCALE_MINIMUM_COMPACT_FONT_SIZE,
+  UI_SCALE_STORAGE_KEY,
+} from "../lib/uiScale";
+
+export const UI_BASE_PATH_BOOTSTRAP_PLACEHOLDER = "__AGENT_INSPECTOR_BASE_PATH_BOOTSTRAP__";
+export const UI_BASE_PATH_META_PLACEHOLDER = "__AGENT_INSPECTOR_BASE_PATH__";
+export const UI_RUNTIME_CSP_BOOTSTRAP_PLACEHOLDER = "__AGENT_INSPECTOR_RUNTIME_CSP_BOOTSTRAP__";
+export const UI_THEME_BOOTSTRAP_PLACEHOLDER = "__AGENT_INSPECTOR_THEME_BOOTSTRAP__";
+export const UI_SCALE_BOOTSTRAP_PLACEHOLDER = "__AGENT_INSPECTOR_UI_SCALE_BOOTSTRAP__";
+
+export const basePathBootstrapScript = `
+(function () {
+  var placeholder = "__AGENT_INSPECTOR_" + "BASE_PATH__";
+  var meta = document.querySelector('meta[name="${AGENT_INSPECTOR_BASE_PATH_META_NAME}"]');
+  var base = document.querySelector("base");
+
+  function normalize(value) {
+    var trimmed = typeof value === "string" ? value.trim() : "";
+    if (trimmed === "" || trimmed === "/") return "";
+    return "/" + trimmed.replace(/^\\/+|\\/+$/g, "");
+  }
+
+  function inferFromKnownUiRoute() {
+    var pathname = window.location.pathname;
+    var sessionMarker = "/session/";
+    var sessionIndex = pathname.indexOf(sessionMarker);
+    if (sessionIndex >= 0) return normalize(pathname.slice(0, sessionIndex));
+    return normalize(pathname.replace(/\\/index\\.html$/, ""));
+  }
+
+  function runtimeBasePath() {
+    var runtime = window.__AGENT_INSPECTOR_RUNTIME__;
+    if (
+      runtime !== null &&
+      typeof runtime === "object" &&
+      runtime.ui !== null &&
+      typeof runtime.ui === "object" &&
+      typeof runtime.ui.basePath === "string"
+    ) {
+      return runtime.ui.basePath;
+    }
+    return null;
+  }
+
+  var configured = meta === null ? placeholder : meta.getAttribute("content");
+  var runtimePath = runtimeBasePath();
+  var basePath = configured !== null && configured !== placeholder
+    ? normalize(configured)
+    : runtimePath === null
+      ? inferFromKnownUiRoute()
+      : normalize(runtimePath);
+  var baseHref = basePath === "" ? "/" : basePath + "/";
+
+  if (meta !== null) meta.setAttribute("content", basePath === "" ? "/" : basePath);
+  if (base !== null) base.setAttribute("href", baseHref);
+})();
+`;
+
+export const runtimeCspBootstrapScript = `
+(function () {
+  var runtime = window.__AGENT_INSPECTOR_RUNTIME__;
+  var controlBaseUrl = runtime !== null && typeof runtime === "object" &&
+    runtime.control !== null && typeof runtime.control === "object" &&
+    typeof runtime.control.baseUrl === "string"
+      ? runtime.control.baseUrl
+      : null;
+  var controlOrigin = null;
+  if (controlBaseUrl !== null) {
+    try {
+      var parsed = new URL(controlBaseUrl);
+      if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+        controlOrigin = parsed.origin;
+      }
+    } catch (error) {}
+  }
+  var uiOrigin = new URL(document.baseURI).origin;
+  var connectSources = controlOrigin === null || controlOrigin === uiOrigin
+    ? "'self'"
+    : "'self' " + controlOrigin;
+  var policy = [
+    "default-src 'self'",
+    "base-uri 'self'",
+    "connect-src " + connectSources,
+    "font-src 'self' data:",
+    "form-action 'self'",
+    "img-src 'self' data: blob:",
+    "object-src 'none'",
+    "script-src 'self' 'unsafe-inline'",
+    "style-src 'self' 'unsafe-inline'",
+    "worker-src 'self' blob:"
+  ].join("; ");
+  var meta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
+  if (meta === null) {
+    meta = document.createElement("meta");
+    meta.setAttribute("http-equiv", "Content-Security-Policy");
+    document.head.appendChild(meta);
+  }
+  meta.setAttribute("content", policy);
+})();
+`;
+
+export const themeModeBootstrapScript = `
+(function () {
+  try {
+    var storedThemeMode = window.localStorage.getItem("${THEME_MODE_STORAGE_KEY}");
+    var themeMode = storedThemeMode === "light" || storedThemeMode === "eye-care"
+      ? storedThemeMode
+      : "dark";
+    document.documentElement.dataset.theme = themeMode;
+  } catch (error) {
+    document.documentElement.dataset.theme = "dark";
+  }
+})();
+`;
+
+export const uiScaleBootstrapScript = `
+(function () {
+  try {
+    var storedUiScale = window.localStorage.getItem("${UI_SCALE_STORAGE_KEY}");
+    var uiScalePreference = storedUiScale === "100" || storedUiScale === "125" || storedUiScale === "150"
+      ? storedUiScale
+      : "auto";
+    var resolvedUiScale = 1;
+    if (uiScalePreference === "125") resolvedUiScale = 1.25;
+    if (uiScalePreference === "150") resolvedUiScale = 1.5;
+    if (uiScalePreference === "auto") {
+      var viewportWidth = Number.isFinite(window.innerWidth) && window.innerWidth > 0
+        ? window.innerWidth
+        : 1280;
+      var rawScreenWidth = typeof window.screen === "undefined"
+        ? viewportWidth
+        : window.screen.availWidth;
+      var screenWidth = Number.isFinite(rawScreenWidth) && rawScreenWidth > 0
+        ? rawScreenWidth
+        : viewportWidth;
+      var rawDevicePixelRatio = window.devicePixelRatio;
+      var devicePixelRatio = Number.isFinite(rawDevicePixelRatio) && rawDevicePixelRatio > 0
+        ? rawDevicePixelRatio
+        : 1;
+      var availableWidth = Math.min(viewportWidth, screenWidth);
+      if (devicePixelRatio <= ${String(UI_SCALE_AUTO_MAX_DPR)} && availableWidth >= ${String(UI_SCALE_AUTO_LARGE_WIDTH)}) {
+        resolvedUiScale = 1.25;
+      } else if (devicePixelRatio <= ${String(UI_SCALE_AUTO_MAX_DPR)} && availableWidth >= ${String(UI_SCALE_AUTO_MEDIUM_WIDTH)}) {
+        resolvedUiScale = 1.125;
+      }
+    }
+    var root = document.documentElement;
+    root.dataset.uiScale = uiScalePreference;
+    root.dataset.uiScaleResolved = String(Math.round(resolvedUiScale * 100));
+    root.style.setProperty("--inspector-ui-scale", String(resolvedUiScale));
+    root.style.setProperty("--inspector-root-font-size", String(16 * resolvedUiScale) + "px");
+    root.style.setProperty("--inspector-font-9", String(Math.max(${String(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE)}, 9 * resolvedUiScale)) + "px");
+    root.style.setProperty("--inspector-font-10", String(Math.max(${String(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE)}, 10 * resolvedUiScale)) + "px");
+    root.style.setProperty("--inspector-font-11", String(Math.max(${String(UI_SCALE_MINIMUM_COMPACT_FONT_SIZE)}, 11 * resolvedUiScale)) + "px");
+    root.style.setProperty("--inspector-font-13", String(13 * resolvedUiScale) + "px");
+  } catch (error) {
+    document.documentElement.dataset.uiScale = "auto";
+    document.documentElement.dataset.uiScaleResolved = "100";
+  }
+})();
+`;

package/src/ui/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="agent-inspector-base-path" content="__AGENT_INSPECTOR_BASE_PATH__" />
+    <base href="/" />
+    <script>
+      __AGENT_INSPECTOR_BASE_PATH_BOOTSTRAP__
+    </script>
+    <script vite-ignore src="./runtime-config.js"></script>
+    <script>
+      try {
+        window.__AGENT_INSPECTOR_RUNTIME__ = __AGENT_INSPECTOR_RUNTIME_JSON__;
+      } catch (error) {
+        window.__AGENT_INSPECTOR_RUNTIME__ = window.__AGENT_INSPECTOR_RUNTIME_CONFIG__ || {};
+      }
+    </script>
+    <script>
+      __AGENT_INSPECTOR_RUNTIME_CSP_BOOTSTRAP__
+    </script>
+    <script>
+      __AGENT_INSPECTOR_BASE_PATH_BOOTSTRAP__
+    </script>
+    <script>
+      __AGENT_INSPECTOR_THEME_BOOTSTRAP__
+    </script>
+    <script>
+      __AGENT_INSPECTOR_UI_SCALE_BOOTSTRAP__
+    </script>
+    <link rel="icon" type="image/svg+xml" href="../assets/favicon.svg" />
+    <title>Agent Inspector</title>
+  </head>
+  <body>
+    <div id="root"><p role="status">Connecting to Agent Inspector…</p></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/ui/logsStreamClient.ts

@@ -0,0 +1,20 @@
+import {
+  buildControlRuntimeUrl,
+  resolveBrowserRuntimeForDocument,
+} from "../lib/browserRuntimeResolver";
+
+export function buildLogsStreamUrl(sessionId: string | undefined): string | null {
+  const params = new URLSearchParams({ compact: "1" });
+  if (sessionId !== undefined) {
+    params.set("sessionId", sessionId);
+  }
+  const runtime = resolveBrowserRuntimeForDocument();
+  if (!runtime.ok) return null;
+  return buildControlRuntimeUrl(runtime.runtime, `/api/logs/stream?${params.toString()}`);
+}
+
+export function openLogsEventSource(sessionId: string | undefined): EventSource | null {
+  const url = buildLogsStreamUrl(sessionId);
+  if (url === null) return null;
+  return new EventSource(url);
+}

package/src/ui/main.tsx

@@ -0,0 +1,13 @@
+import { RouterProvider } from "@tanstack/react-router";
+import { createRoot } from "react-dom/client";
+import "../index.css";
+import { router } from "./router";
+import { validateBrowserRuntimeForStartup } from "./runtimeDiscovery";
+
+const rootElement = document.getElementById("root");
+
+if (rootElement !== null) {
+  createRoot(rootElement).render(<RouterProvider router={router} />);
+}
+
+void validateBrowserRuntimeForStartup();

package/src/ui/public/runtime-config.js

@@ -0,0 +1,2 @@
+/* global window */
+window.__AGENT_INSPECTOR_RUNTIME_CONFIG__ = window.__AGENT_INSPECTOR_RUNTIME_CONFIG__ || {};

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"] *));