@tonyclaw/agent-inspector 3.0.45 → 3.0.47

package/src/proxy/store.ts

@@ -29,6 +29,7 @@ import {
   listFilteredIndexEntries,
   listIndexEntries,
   rebuildIndex,
+  updateLogIndexEntryMetadata,
   type LogIndexEntry,
   type LogIndexSummary,
 } from "./logIndex";
@@ -42,7 +43,7 @@ import { CapturedLogSchema } from "./schemas";
 import { apiFormatForPath } from "./formats/registry";
 import type { ImportedLogDraft } from "./logImporter";
 import {
-  archiveSessionLog,
+  archiveSessionLogs,
   clearSessionArchives,
   deleteArchivedLogsByIds,
   findArchivedLogById,
@@ -55,6 +56,7 @@ import {
   PRIVATE_FILE_MODE,
   securePrivateFileSync,
 } from "./privateDataPath";
+import { recoverCapturedLogStorage } from "./jsonlRecovery";
 import {
   clearSessionRegistry,
   getLogSessionId,
@@ -162,6 +164,43 @@ type LogCursorPageIndex = {
 const logCursorPageIndexes: Map<string, LogCursorPageIndex> = new Map();
 let logCursorPageIndexBuildCount = 0;
 let sessionArchiveQueue: Promise<void> = Promise.resolve();
+const SESSION_ARCHIVE_BATCH_SIZE = 128;
+const SESSION_ARCHIVE_FLUSH_DELAY_MS = 10;
+let sessionArchiveBuffer: CapturedLog[] = [];
+let sessionArchiveFlushTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function drainSessionArchiveBuffer(): CapturedLog[] {
+  const logs = sessionArchiveBuffer;
+  sessionArchiveBuffer = [];
+  return logs;
+}
+
+function queueSessionArchiveFlush(): void {
+  const logs = drainSessionArchiveBuffer();
+  if (logs.length === 0) return;
+  sessionArchiveQueue = sessionArchiveQueue
+    .catch(() => undefined)
+    .then(async () => {
+      await archiveSessionLogs(logs);
+    })
+    .catch((err: unknown) => {
+      logger.warn("[store] Failed to archive session logs:", String(err));
+    });
+}
+
+function cancelSessionArchiveFlushTimer(): void {
+  if (sessionArchiveFlushTimeout === null) return;
+  clearTimeout(sessionArchiveFlushTimeout);
+  sessionArchiveFlushTimeout = null;
+}
+
+function scheduleSessionArchiveFlush(): void {
+  if (sessionArchiveFlushTimeout !== null) return;
+  sessionArchiveFlushTimeout = setTimeout(() => {
+    sessionArchiveFlushTimeout = null;
+    queueSessionArchiveFlush();
+  }, SESSION_ARCHIVE_FLUSH_DELAY_MS);
+}
 
 function cursorPageIndexKey(
   options: Pick<ListLogsCursorPageOptions, "sessionId" | "model" | "clientPid">,
@@ -233,8 +272,29 @@ function normalizeLog(log: CapturedLog): CapturedLog {
   const sessionId = getLogSessionId(log);
   const pathFormat = apiFormatForPath(log.path);
   const apiFormat = pathFormat === "unknown" ? log.apiFormat : pathFormat;
-  if (sessionId === log.sessionId && apiFormat === log.apiFormat) return log;
-  return { ...log, sessionId, apiFormat };
+  const captureIncomplete = log.captureIncomplete ?? false;
+  const droppedChunks = log.droppedChunks ?? 0;
+  const droppedBytes = log.droppedBytes ?? 0;
+  const captureIncompleteReason = log.captureIncompleteReason ?? null;
+  if (
+    sessionId === log.sessionId &&
+    apiFormat === log.apiFormat &&
+    log.captureIncomplete !== undefined &&
+    log.droppedChunks !== undefined &&
+    log.droppedBytes !== undefined &&
+    log.captureIncompleteReason !== undefined
+  ) {
+    return log;
+  }
+  return {
+    ...log,
+    sessionId,
+    apiFormat,
+    captureIncomplete,
+    droppedChunks,
+    droppedBytes,
+    captureIncompleteReason,
+  };
 }
 
 function addToCache(log: CapturedLog): void {
@@ -249,19 +309,20 @@ function addToCache(log: CapturedLog): void {
 }
 
 function archiveLogSnapshot(log: CapturedLog): void {
-  const archivedLog = normalizeLog(log);
-  sessionArchiveQueue = sessionArchiveQueue
-    .catch(() => undefined)
-    .then(async () => {
-      await archiveSessionLog(archivedLog);
-    })
-    .catch((err: unknown) => {
-      logger.warn("[store] Failed to archive session log:", String(err));
-    });
+  sessionArchiveBuffer.push(normalizeLog(log));
+  if (sessionArchiveBuffer.length >= SESSION_ARCHIVE_BATCH_SIZE) {
+    cancelSessionArchiveFlushTimer();
+    queueSessionArchiveFlush();
+  } else if (sessionArchiveBuffer.length === 1) {
+    scheduleSessionArchiveFlush();
+  }
 }
 
 export async function flushSessionArchiveWrites(): Promise<void> {
+  cancelSessionArchiveFlushTimer();
+  if (sessionArchiveBuffer.length > 0) queueSessionArchiveFlush();
   await sessionArchiveQueue;
+  if (sessionArchiveBuffer.length > 0) await flushSessionArchiveWrites();
 }
 
 function removeFromCache(id: number): void {
@@ -317,6 +378,10 @@ function compactLogFromIndexSummary(summary: LogIndexSummary): CapturedLog {
     rawRequestBodyBytes: summary.rawRequestBodyBytes,
     responseTextBytes: summary.responseTextBytes,
     bodyContentMode: "compact",
+    captureIncomplete: summary.captureIncomplete,
+    droppedChunks: summary.droppedChunks,
+    droppedBytes: summary.droppedBytes,
+    captureIncompleteReason: summary.captureIncompleteReason,
     warnings: summary.warnings,
     error: summary.error,
   });
@@ -441,6 +506,10 @@ export async function createLog(
     clientCwd: clientInfo?.cwd ?? null,
     clientProjectFolder: clientInfo?.projectFolder ?? null,
     streamingChunksPath: null,
+    captureIncomplete: false,
+    droppedChunks: 0,
+    droppedBytes: 0,
+    captureIncompleteReason: null,
   });
 
   // Write to disk and update index
@@ -466,6 +535,12 @@ export function finalizeLogUpdate(log: CapturedLog): void {
   emitLogUpdate(log);
 }
 
+/** Persist the terminal cache/session state and refresh both JSON and SQLite index summaries. */
+export async function persistFinalizedLogUpdate(log: CapturedLog): Promise<void> {
+  finalizeLogUpdate(log);
+  await updateLogIndexEntryMetadata(log);
+}
+
 async function getArchivedLogByIdForStore(id: number): Promise<CapturedLog | null> {
   await flushSessionArchiveWrites();
   const archivedLog = await findArchivedLogById(id);
@@ -543,24 +618,31 @@ async function scanLogFileForId(filePath: string, id: number): Promise<CapturedL
     crlfDelay: Infinity,
   });
 
+  let lineNumber = 0;
   for await (const line of fileStream) {
+    lineNumber += 1;
     if (line.trim() === "") continue;
+    let parsed: unknown;
     try {
-      const parsed: unknown = JSON.parse(line);
-      if (typeof parsed === "object" && parsed !== null) {
-        const desc = Object.getOwnPropertyDescriptor(parsed, "id");
-        if (desc !== undefined && typeof desc.value === "number" && desc.value === id) {
-          const result = CapturedLogSchema.safeParse(parsed);
-          if (result.success) {
-            lastMatch = normalizeLog(result.data);
-            if (result.data.responseStatus !== null) {
-              return lastMatch;
-            }
-          }
-        }
+      parsed = JSON.parse(line);
+    } catch (error) {
+      return await Promise.reject(
+        new Error(
+          `Malformed JSONL record in ${filePath} at line ${String(lineNumber)}: ${String(error)}`,
+        ),
+      );
+    }
+    const result = CapturedLogSchema.safeParse(parsed);
+    if (!result.success) {
+      return await Promise.reject(
+        new Error(`Invalid captured-log record in ${filePath} at line ${String(lineNumber)}`),
+      );
+    }
+    if (result.data.id === id) {
+      lastMatch = normalizeLog(result.data);
+      if (result.data.responseStatus !== null) {
+        return lastMatch;
       }
-    } catch {
-      // Skip malformed lines
     }
   }
 
@@ -597,6 +679,13 @@ async function visitPersistedLogs(visitor: PersistedLogVisitor): Promise<void> {
   const logDir = resolveLogDir();
   if (!existsSync(logDir)) return;
 
+  const recovery = await recoverCapturedLogStorage(logDir);
+  if (recovery.level === "unavailable") {
+    return await Promise.reject(
+      new Error(recovery.diagnostic ?? "Captured-log recovery blocked persisted-log reads"),
+    );
+  }
+
   try {
     const entries = await readdirCallback(logDir);
     const files = entries.filter((file) => file.endsWith(".jsonl")).sort();
@@ -605,6 +694,9 @@ async function visitPersistedLogs(visitor: PersistedLogVisitor): Promise<void> {
     }
   } catch (err) {
     logger.error("[store] Failed to list persisted logs:", String(err));
+    return await Promise.reject(
+      err instanceof Error ? err : new Error(`Failed to list persisted logs: ${String(err)}`),
+    );
   }
 }
 
@@ -620,21 +712,36 @@ async function visitPersistedLogFile(
       crlfDelay: Infinity,
     });
 
+    let lineNumber = 0;
     for await (const line of fileStream) {
+      lineNumber += 1;
       if (line.trim() === "") continue;
+      let parsed: unknown;
       try {
-        const parsed: unknown = JSON.parse(line);
-        const result = CapturedLogSchema.safeParse(parsed);
-        if (result.success) {
-          const log = normalizeLog(result.data);
-          visitor(log);
-        }
-      } catch {
-        // Skip malformed lines.
+        parsed = JSON.parse(line);
+      } catch (error) {
+        return await Promise.reject(
+          new Error(
+            `Malformed JSONL record in ${filePath} at line ${String(lineNumber)}: ${String(error)}`,
+          ),
+        );
       }
+      const result = CapturedLogSchema.safeParse(parsed);
+      if (!result.success) {
+        return await Promise.reject(
+          new Error(`Invalid captured-log record in ${filePath} at line ${String(lineNumber)}`),
+        );
+      }
+      const log = normalizeLog(result.data);
+      visitor(log);
     }
   } catch (err) {
     logger.error("[store] Failed to read persisted log file:", filePath, String(err));
+    return await Promise.reject(
+      err instanceof Error
+        ? err
+        : new Error(`Failed to read persisted log file ${filePath}: ${String(err)}`),
+    );
   }
 }
 

package/src/proxy/uiAssetServer.ts

@@ -0,0 +1,106 @@
+import { Buffer } from "node:buffer";
+import { readFile } from "node:fs/promises";
+import { extname, relative, resolve, sep } from "node:path";
+
+const CONTENT_TYPES: Readonly<Record<string, string>> = {
+  ".css": "text/css; charset=utf-8",
+  ".html": "text/html; charset=utf-8",
+  ".ico": "image/x-icon",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+};
+
+export type UiAsset = {
+  body: Buffer;
+  cacheControl: string;
+  contentType: string;
+  document: boolean;
+};
+
+function safeDecodedPath(pathname: string): string | null {
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(pathname);
+  } catch {
+    return null;
+  }
+  if (decoded.includes("\\") || decoded.includes("\0")) return null;
+  if (decoded.split("/").some((segment) => segment === "." || segment === "..")) return null;
+  return decoded;
+}
+
+function isInsideDirectory(path: string, directory: string): boolean {
+  const child = relative(directory, path);
+  return child === "" || (!child.startsWith("..") && !child.startsWith(sep));
+}
+
+function assetPath(uiDirectory: string, pathname: string): string | null {
+  const decoded = safeDecodedPath(pathname);
+  if (decoded === null) return null;
+  const target = resolve(uiDirectory, `.${decoded}`);
+  return isInsideDirectory(target, resolve(uiDirectory)) ? target : null;
+}
+
+async function readAsset(path: string): Promise<Buffer | null> {
+  try {
+    return await readFile(path);
+  } catch {
+    return null;
+  }
+}
+
+function contentTypeFor(path: string): string {
+  return CONTENT_TYPES[extname(path).toLowerCase()] ?? "application/octet-stream";
+}
+
+function isBackendNamespace(pathname: string): boolean {
+  return (
+    pathname === "/api" ||
+    pathname.startsWith("/api/") ||
+    pathname === "/proxy" ||
+    pathname.startsWith("/proxy/") ||
+    pathname === "/livez" ||
+    pathname === "/readyz"
+  );
+}
+
+function shouldUseDocumentFallback(pathname: string): boolean {
+  if (pathname === "/" || pathname.length === 0) return true;
+  const lastSegment = pathname.split("/").at(-1) ?? "";
+  return !lastSegment.includes(".");
+}
+
+export async function loadUiAsset(uiDirectory: string, pathname: string): Promise<UiAsset | null> {
+  if (isBackendNamespace(pathname)) return null;
+  const requestedPath = assetPath(uiDirectory, pathname);
+  if (requestedPath === null) return null;
+  const requestedBody = await readAsset(requestedPath);
+  if (requestedBody !== null) {
+    return {
+      body: requestedBody,
+      cacheControl: pathname.startsWith("/assets/")
+        ? "public, max-age=31536000, immutable"
+        : "no-cache",
+      contentType: contentTypeFor(requestedPath),
+      document: extname(requestedPath).toLowerCase() === ".html",
+    };
+  }
+  if (!shouldUseDocumentFallback(pathname)) return null;
+  const indexPath = resolve(uiDirectory, "index.html");
+  const indexBody = await readAsset(indexPath);
+  if (indexBody === null) return null;
+  return {
+    body: indexBody,
+    cacheControl: "no-store",
+    contentType: CONTENT_TYPES[".html"] ?? "text/html; charset=utf-8",
+    document: true,
+  };
+}

package/src/proxy/upstream.ts

@@ -55,8 +55,9 @@ export function selectUpstreamBase(route: ApiRoute, provider: ProviderConfig | n
   if (formatSpecificUrl !== undefined && formatSpecificUrl !== "") {
     return formatSpecificUrl;
   }
-  if (provider.baseUrl !== undefined && provider.baseUrl !== "") {
-    return provider.baseUrl;
+  const legacyBaseUrl = selectLegacyBaseUrl(route, provider);
+  if (legacyBaseUrl !== undefined) {
+    return legacyBaseUrl;
   }
 
   // Legacy records may only contain format. Keep this fallback for compatibility,
@@ -68,6 +69,22 @@ function nonEmptyUrl(value: string | undefined): string | undefined {
   return value !== undefined && value !== "" ? value : undefined;
 }
 
+function hasFormatSpecificUrlFields(provider: ProviderConfig): boolean {
+  return (
+    provider.anthropicBaseUrl !== undefined ||
+    provider.openaiBaseUrl !== undefined ||
+    provider.openaiResponsesBaseUrl !== undefined
+  );
+}
+
+function selectLegacyBaseUrl(route: ApiRoute, provider: ProviderConfig): string | undefined {
+  if (hasFormatSpecificUrlFields(provider)) return undefined;
+  const baseUrl = nonEmptyUrl(provider.baseUrl);
+  if (baseUrl === undefined) return undefined;
+  if (route.isOpenAI) return provider.format === "openai" ? baseUrl : undefined;
+  return provider.format === "anthropic" ? baseUrl : undefined;
+}
+
 function selectFormatSpecificUrl(route: ApiRoute, provider: ProviderConfig): string | undefined {
   if (!route.isOpenAI) return provider.anthropicBaseUrl;
   if (route.isResponses) {
@@ -76,6 +93,16 @@ function selectFormatSpecificUrl(route: ApiRoute, provider: ProviderConfig): str
   return provider.openaiBaseUrl;
 }
 
+/**
+ * Whether a model-matched Provider explicitly supports the protocol selected by the request path.
+ * Empty current-schema fields are deliberate opt-outs. Only a legacy record with no protocol URL
+ * fields may use baseUrl, and then only for the protocol declared by provider.format.
+ */
+export function providerSupportsApiRoute(route: ApiRoute, provider: ProviderConfig): boolean {
+  if (nonEmptyUrl(selectFormatSpecificUrl(route, provider)) !== undefined) return true;
+  return selectLegacyBaseUrl(route, provider) !== undefined;
+}
+
 export function setUpstreamHost(headers: Headers, upstreamBase: string): void {
   try {
     headers.set(HEADER_HOST, new URL(upstreamBase).host);

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__ || {};