From 5b02fcad3a3b7e69e680d1ea3f94bf7023d91b19 Mon Sep 17 00:00:00 2001
From: David McKay <david@copilotkit.ai>
Date: Wed, 16 Sep 2026 13:10:27 -0700
Subject: [PATCH 1/2] perf: reuse web builds and defer route and preview work

---
 .github/workflows/ci.yml                      |  18 +-
 app/package.json                              |   2 +-
 app/scripts/build-cache.ts                    | 265 +++++++++++++
 app/scripts/serve-or-build.ts                 |  70 ++++
 app/src/components/computer/computer-view.tsx |   9 +-
 app/src/components/computer/live-screen.tsx   |  87 ++--
 .../components/computer/preview-visibility.ts |  45 +++
 app/tests/build-cache.test.ts                 | 251 ++++++++++++
 .../computer-preview-visibility.test.tsx      | 370 ++++++++++++++++++
 app/tests/router.test.ts                      |  87 ++++
 app/vite.config.ts                            |  87 +++-
 11 files changed, 1261 insertions(+), 30 deletions(-)
 create mode 100644 app/scripts/build-cache.ts
 create mode 100644 app/scripts/serve-or-build.ts
 create mode 100644 app/src/components/computer/preview-visibility.ts
 create mode 100644 app/tests/build-cache.test.ts
 create mode 100644 app/tests/computer-preview-visibility.test.tsx

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 49ad03394..908e3eb98 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -246,6 +246,22 @@ jobs:
       # files before their tests are registered.
       - run: bun run test:ci
 
+  startup:
+    name: startup (${{ matrix.os }})
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [macos-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: 1.3.14
+      - run: bun test app/tests/build-cache.test.ts
+
   python-harness:
     name: python harness regressions
     runs-on: ubuntu-latest
@@ -492,7 +508,7 @@ jobs:
     name: verify
     runs-on: ubuntu-latest
     if: always()
-    needs: [static, deployables, chart, test, python-harness, build, migrations, image, component-dockerfiles]
+    needs: [static, deployables, chart, test, startup, python-harness, build, migrations, image, component-dockerfiles]
     steps:
       - name: Require every check
         env:
diff --git a/app/package.json b/app/package.json
index dbb1c8faf..b2b91451b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build": "bun --bun node_modules/vite/bin/vite.js build",
     "dev": "bun --bun node_modules/vite/bin/vite.js",
-    "serve": "bun run build && bun serve.ts",
+    "serve": "bun scripts/serve-or-build.ts && bun serve.ts",
     "prebuild": "bun run --cwd .. generate:app-config",
     "predev": "bun run --cwd .. generate:app-config",
     "pretypecheck": "bun run --cwd .. generate:app-config",
diff --git a/app/scripts/build-cache.ts b/app/scripts/build-cache.ts
new file mode 100644
index 000000000..44056dbcb
--- /dev/null
+++ b/app/scripts/build-cache.ts
@@ -0,0 +1,265 @@
+import { createHash } from "node:crypto";
+import type { Stats } from "node:fs";
+import { readdir, readFile, stat, writeFile } from "node:fs/promises";
+import { basename, join, relative, resolve, sep } from "node:path";
+
+const MANIFEST_VERSION = 1;
+const MANIFEST_NAME = ".openbot-build-cache.json";
+
+export type BuildCachePaths = {
+  rootDir: string;
+  appDir: string;
+};
+
+type BuildCacheEnv = Record<string, string | undefined>;
+
+type BuildCacheManifest = {
+  version: number;
+  key: string;
+};
+
+type InputFile = {
+  path: string;
+  absolutePath: string;
+};
+
+const sourceExtensions = new Set([
+  ".css",
+  ".html",
+  ".js",
+  ".jsx",
+  ".json",
+  ".mjs",
+  ".cjs",
+  ".ts",
+  ".tsx",
+  ".yaml",
+  ".yml",
+]);
+
+export function buildCacheManifestPath({ appDir }: BuildCachePaths): string {
+  return join(appDir, "dist", MANIFEST_NAME);
+}
+
+function slashPath(path: string): string {
+  return path.split(sep).join("/");
+}
+
+function hasSourceExtension(path: string): boolean {
+  const name = basename(path);
+  if (name === "bun.lock") return true;
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 && sourceExtensions.has(name.slice(dot));
+}
+
+async function existingFile(path: string): Promise<boolean> {
+  try {
+    const info = await stat(path);
+    return info.isFile();
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === "ENOENT") return false;
+    throw error;
+  }
+}
+
+async function readJson(path: string): Promise<unknown> {
+  return JSON.parse(await readFile(path, "utf8"));
+}
+
+function versionFromPackageJson(json: unknown): string {
+  if (
+    json &&
+    typeof json === "object" &&
+    "version" in json &&
+    typeof json.version === "string"
+  ) {
+    return json.version;
+  }
+  return "";
+}
+
+async function collectFiles(
+  base: string,
+  options: {
+    prefix: string;
+    include: (path: string, info: Stats) => boolean;
+    skipDirectory?: (path: string) => boolean;
+  },
+): Promise<InputFile[]> {
+  const files: InputFile[] = [];
+
+  async function visit(directory: string) {
+    const entries = await readdir(directory, { withFileTypes: true });
+    for (const entry of entries) {
+      const absolutePath = join(directory, entry.name);
+      if (entry.isDirectory()) {
+        if (!options.skipDirectory?.(absolutePath)) await visit(absolutePath);
+        continue;
+      }
+      if (!entry.isFile()) continue;
+      const info = await stat(absolutePath);
+      if (!options.include(absolutePath, info)) continue;
+      files.push({
+        path: `${options.prefix}/${slashPath(relative(base, absolutePath))}`,
+        absolutePath,
+      });
+    }
+  }
+
+  try {
+    await visit(base);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === "ENOENT") return [];
+    throw error;
+  }
+  return files;
+}
+
+function tenantPackageDir(rootDir: string, env: BuildCacheEnv): string {
+  const configured = env.TENANT_PACKAGE_DIR;
+  if (!configured) return join(rootDir, "examples", "fintech");
+  return resolve(rootDir, "server", configured);
+}
+
+function viteEnvironment(env: BuildCacheEnv): Record<string, string> {
+  const values: Record<string, string> = {};
+  for (const [key, value] of Object.entries(env)) {
+    if (
+      value !== undefined &&
+      (key === "BUN_ENV" ||
+        key === "MODE" ||
+        key === "NODE_ENV" ||
+        key === "TENANT_PACKAGE_DIR" ||
+        key.startsWith("VITE_"))
+    ) {
+      values[key] = value;
+    }
+  }
+  return values;
+}
+
+async function collectBuildInputs(
+  { rootDir, appDir }: BuildCachePaths,
+  env: BuildCacheEnv,
+): Promise<InputFile[]> {
+  const resolvedRoot = resolve(rootDir);
+  const resolvedApp = resolve(appDir);
+  const tenantDir = tenantPackageDir(resolvedRoot, env);
+
+  const explicit = [
+    join(resolvedRoot, "bun.lock"),
+    join(resolvedRoot, "package.json"),
+    join(resolvedApp, "package.json"),
+    join(resolvedApp, "vite.config.ts"),
+    join(resolvedApp, "index.html"),
+  ];
+  const explicitFiles = (
+    await Promise.all(
+      explicit.map(async (absolutePath) =>
+        (await existingFile(absolutePath))
+          ? {
+              path: slashPath(relative(resolvedRoot, absolutePath)),
+              absolutePath,
+            }
+          : null,
+      ),
+    )
+  ).filter((file): file is InputFile => file !== null);
+
+  const sourceFiles = await collectFiles(join(resolvedApp, "src"), {
+    prefix: "app/src",
+    include: (path) => hasSourceExtension(path),
+    skipDirectory: (path) => basename(path) === "node_modules",
+  });
+  const tenantFiles = await collectFiles(tenantDir, {
+    prefix: `tenant/${slashPath(relative(resolvedRoot, tenantDir))}`,
+    include: (path) => hasSourceExtension(path),
+    skipDirectory: (path) => basename(path) === "node_modules",
+  });
+
+  return [...explicitFiles, ...sourceFiles, ...tenantFiles].sort(
+    (left, right) => left.path.localeCompare(right.path),
+  );
+}
+
+export async function buildCacheKey(
+  paths: BuildCachePaths,
+  env: BuildCacheEnv,
+): Promise<string> {
+  const hash = createHash("sha256");
+  const rootPackage = await readJson(join(paths.rootDir, "package.json")).catch(
+    () => null,
+  );
+  const appPackage = await readJson(join(paths.appDir, "package.json")).catch(
+    () => null,
+  );
+
+  hash.update(
+    JSON.stringify({
+      manifestVersion: MANIFEST_VERSION,
+      rootVersion: versionFromPackageJson(rootPackage),
+      appVersion: versionFromPackageJson(appPackage),
+      env: viteEnvironment(env),
+    }),
+  );
+
+  for (const input of await collectBuildInputs(paths, env)) {
+    hash.update("\0");
+    hash.update(input.path);
+    hash.update("\0");
+    hash.update(await readFile(input.absolutePath));
+  }
+
+  return hash.digest("hex");
+}
+
+export async function readBuildCacheManifest(
+  paths: BuildCachePaths,
+): Promise<BuildCacheManifest | null> {
+  try {
+    const raw = JSON.parse(
+      await readFile(buildCacheManifestPath(paths), "utf8"),
+    );
+    if (
+      raw &&
+      typeof raw === "object" &&
+      raw.version === MANIFEST_VERSION &&
+      typeof raw.key === "string"
+    ) {
+      return raw;
+    }
+    return null;
+  } catch (error) {
+    if (
+      (error as NodeJS.ErrnoException).code === "ENOENT" ||
+      error instanceof SyntaxError
+    ) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+export async function writeBuildCacheManifest(
+  paths: BuildCachePaths,
+  env: BuildCacheEnv,
+): Promise<void> {
+  await writeFile(
+    buildCacheManifestPath(paths),
+    `${JSON.stringify({
+      version: MANIFEST_VERSION,
+      key: await buildCacheKey(paths, env),
+    })}\n`,
+  );
+}
+
+export async function isReusableBuild(
+  paths: BuildCachePaths,
+  env: BuildCacheEnv,
+): Promise<boolean> {
+  if (!(await existingFile(join(paths.appDir, "dist", "index.html")))) {
+    return false;
+  }
+  const manifest = await readBuildCacheManifest(paths);
+  return manifest?.key === (await buildCacheKey(paths, env));
+}
diff --git a/app/scripts/serve-or-build.ts b/app/scripts/serve-or-build.ts
new file mode 100644
index 000000000..4f8e4129f
--- /dev/null
+++ b/app/scripts/serve-or-build.ts
@@ -0,0 +1,70 @@
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  isReusableBuild,
+  writeBuildCacheManifest,
+  type BuildCachePaths,
+} from "./build-cache";
+
+type RunCommand = (command: string[], cwd: string) => Promise<void>;
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const defaultAppDir = resolve(scriptDir, "..");
+const defaultRootDir = resolve(defaultAppDir, "..");
+
+function pathsFromEnvironment(): BuildCachePaths {
+  return {
+    rootDir: process.env.OPENBOT_BUILD_CACHE_ROOT_DIR
+      ? resolve(process.env.OPENBOT_BUILD_CACHE_ROOT_DIR)
+      : defaultRootDir,
+    appDir: process.env.OPENBOT_BUILD_CACHE_APP_DIR
+      ? resolve(process.env.OPENBOT_BUILD_CACHE_APP_DIR)
+      : defaultAppDir,
+  };
+}
+
+async function run(command: string[], cwd: string) {
+  const child = Bun.spawn({
+    cmd: command,
+    cwd,
+    env: process.env,
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+  const exitCode = await child.exited;
+  if (exitCode !== 0) {
+    throw new Error(`${command.join(" ")} exited with ${exitCode}`);
+  }
+}
+
+export async function prepareProductionBuild(
+  paths: BuildCachePaths,
+  runCommand: RunCommand = run,
+): Promise<"reused" | "rebuilt"> {
+  await runCommand(
+    [process.execPath, "run", "--cwd", paths.rootDir, "generate:app-config"],
+    paths.rootDir,
+  );
+
+  if (await isReusableBuild(paths, process.env)) {
+    console.log("Reusing app/dist from build cache");
+    return "reused";
+  }
+
+  console.log("Building app/dist because the build cache is stale or missing");
+  await runCommand(
+    [
+      process.execPath,
+      "--bun",
+      join("node_modules", "vite", "bin", "vite.js"),
+      "build",
+    ],
+    paths.appDir,
+  );
+  await writeBuildCacheManifest(paths, process.env);
+  return "rebuilt";
+}
+
+if (import.meta.main) {
+  await prepareProductionBuild(pathsFromEnvironment());
+}
diff --git a/app/src/components/computer/computer-view.tsx b/app/src/components/computer/computer-view.tsx
index a0990604e..c31179b6a 100644
--- a/app/src/components/computer/computer-view.tsx
+++ b/app/src/components/computer/computer-view.tsx
@@ -14,6 +14,7 @@ import {
 } from "@/lib/computers/screen";
 import { ChannelAvatar } from "../channels/avatar";
 import { LiveScreen } from "./live-screen";
+import { useElementVisible, usePageVisible } from "./preview-visibility";
 
 /** Explicit blank-browser URLs use placeholder artwork; missing URL fields are treated as real pages. */
 function isBlankBrowser(shot: Screenshot): boolean {
@@ -228,6 +229,8 @@ export function ComputerView({
   const [secret, setSecret] = useState("");
   const [secretProblem, setSecretProblem] = useState<string | null>(null);
   const [sendingSecret, setSendingSecret] = useState(false);
+  const pageVisible = usePageVisible();
+  const [previewRef, previewIntersecting] = useElementVisible<HTMLElement>();
   const driving = control?.holder === "human";
   /** Read by the polling loop without restarting it on control changes. */
   const drivingRef = useRef(false);
@@ -277,6 +280,7 @@ export function ComputerView({
   const [, setFrameArrived] = useState(0);
 
   const settled = !active && (finished || Boolean(knownPage));
+  const visualVisible = pageVisible && (expanded || previewIntersecting);
 
   /*
    * The frame this turn's page was showing, fetched once and then kept.
@@ -317,6 +321,7 @@ export function ComputerView({
   // biome-ignore lint/correctness/useExhaustiveDependencies: `secretPending` intentionally restarts settled polling.
   useEffect(() => {
     if (settled) return;
+    if (!visualVisible) return;
     const mine = ++generation.current;
     let timer: ReturnType<typeof setTimeout>;
     // Consecutive identical frames observed during post-action settling.
@@ -364,7 +369,7 @@ export function ComputerView({
       generation.current++;
       clearTimeout(timer);
     };
-  }, [computerId, active, intervalMs, secretPending, settled]);
+  }, [computerId, active, intervalMs, secretPending, settled, visualVisible]);
 
   /** Poll control state independently from screenshot polling so help/secret prompts surface. */
   useEffect(() => {
@@ -452,7 +457,7 @@ export function ComputerView({
 
   return (
     <>
-      <figure className="overflow-hidden rounded-2xl border">
+      <figure ref={previewRef} className="overflow-hidden rounded-2xl border">
         {/* Inline preview remains in transcript; click opens a readable full-size view. */}
         <button
           type="button"
diff --git a/app/src/components/computer/live-screen.tsx b/app/src/components/computer/live-screen.tsx
index 0a05d62aa..56d4c729c 100644
--- a/app/src/components/computer/live-screen.tsx
+++ b/app/src/components/computer/live-screen.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { socketUrl } from "@/lib/socket-url";
+import { currentPageVisible } from "./preview-visibility";
 import { pageCoordinates } from "./take-the-wheel";
 
 /**
@@ -48,6 +49,12 @@ type Props = {
   onProblem?: (problem: string | null) => void;
 };
 
+type FrameMessage = {
+  data: string;
+  width: number;
+  height: number;
+};
+
 export function LiveScreen({ computerId, driving, onProblem }: Props) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const socketRef = useRef<WebSocket | null>(null);
@@ -55,6 +62,10 @@ export function LiveScreen({ computerId, driving, onProblem }: Props) {
   const localKeyUps = useRef(new Set<string>());
   /** The size of the frames Chrome is sending, which is what input coordinates are relative to. */
   const frameSize = useRef<{ width: number; height: number } | null>(null);
+  /** Latest validated encoded frame. Hidden tabs keep only this, never decoded bitmaps. */
+  const latestFrame = useRef<FrameMessage | null>(null);
+  /** Monotonic guard so a slow older decode cannot replace a newer frame. */
+  const latestFrameId = useRef(0);
   const [connected, setConnected] = useState(false);
 
   useEffect(() => {
@@ -66,6 +77,50 @@ export function LiveScreen({ computerId, driving, onProblem }: Props) {
     socketRef.current = socket;
     let closed = false;
 
+    const drawFrame = async (frame: FrameMessage, frameId: number) => {
+      /**
+       * Decoded off the main thread and drawn as a bitmap.
+       *
+       * `createImageBitmap` rather than assigning a data URI to an `<img>`: the image path decodes
+       * synchronously on the main thread for every frame, which at screencast rates is the difference
+       * between a smooth page and one that stutters while you are trying to click something on it.
+       */
+      try {
+        const binary = Uint8Array.from(atob(frame.data), (c) =>
+          c.charCodeAt(0),
+        );
+        const bitmap = await createImageBitmap(
+          new Blob([binary], { type: "image/jpeg" }),
+        );
+        if (
+          closed ||
+          frameId !== latestFrameId.current ||
+          !currentPageVisible()
+        ) {
+          bitmap.close();
+          return;
+        }
+        const canvas = canvasRef.current;
+        if (!canvas) {
+          bitmap.close();
+          return;
+        }
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+        bitmap.close();
+      } catch {
+        // Ignore a single corrupt frame; the next frame replaces it.
+      }
+    };
+
+    const drawLatestFrame = () => {
+      if (!currentPageVisible()) return;
+      const frame = latestFrame.current;
+      if (!frame) return;
+      void drawFrame(frame, latestFrameId.current);
+    };
+
     socket.onopen = () => {
       setConnected(true);
       onProblem?.(null);
@@ -132,39 +187,21 @@ export function LiveScreen({ computerId, driving, onProblem }: Props) {
         width: message.width ?? 1280,
         height: message.height ?? 800,
       };
+      const frame = { data: message.data, width, height };
+      latestFrame.current = frame;
+      const frameId = ++latestFrameId.current;
 
-      /**
-       * Decoded off the main thread and drawn as a bitmap.
-       *
-       * `createImageBitmap` rather than assigning a data URI to an `<img>`: the image path decodes
-       * synchronously on the main thread for every frame, which at screencast rates is the difference
-       * between a smooth page and one that stutters while you are trying to click something on it.
-       */
-      try {
-        const binary = Uint8Array.from(atob(message.data), (c) =>
-          c.charCodeAt(0),
-        );
-        const bitmap = await createImageBitmap(
-          new Blob([binary], { type: "image/jpeg" }),
-        );
-        if (closed) {
-          bitmap.close();
-          return;
-        }
-        canvas.width = bitmap.width;
-        canvas.height = bitmap.height;
-        canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
-        bitmap.close();
-      } catch {
-        // Ignore a single corrupt frame; the next frame replaces it.
-      }
+      if (!currentPageVisible()) return;
+      void drawFrame(frame, frameId);
     };
 
+    document.addEventListener("visibilitychange", drawLatestFrame);
     socket.onerror = () => onProblem?.("The live screen could not be reached.");
     socket.onclose = () => setConnected(false);
 
     return () => {
       closed = true;
+      document.removeEventListener("visibilitychange", drawLatestFrame);
       socket.close();
       socketRef.current = null;
     };
diff --git a/app/src/components/computer/preview-visibility.ts b/app/src/components/computer/preview-visibility.ts
new file mode 100644
index 000000000..f8a480432
--- /dev/null
+++ b/app/src/components/computer/preview-visibility.ts
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+export function currentPageVisible(): boolean {
+  if (typeof document === "undefined") return true;
+  return document.visibilityState !== "hidden" && !document.hidden;
+}
+
+export function usePageVisible(): boolean {
+  const [visible, setVisible] = useState(currentPageVisible);
+
+  useEffect(() => {
+    const update = () => setVisible(currentPageVisible());
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+
+  return visible;
+}
+
+export function useElementVisible<T extends Element>(): [
+  (node: T | null) => void,
+  boolean,
+] {
+  const [node, setNode] = useState<T | null>(null);
+  const [visible, setVisible] = useState(() => {
+    if (typeof window === "undefined") return true;
+    return !("IntersectionObserver" in window);
+  });
+
+  useEffect(() => {
+    if (!node) return;
+    if (!("IntersectionObserver" in window)) {
+      setVisible(true);
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      setVisible(Boolean(entry?.isIntersecting));
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+
+  return [setNode, visible];
+}
diff --git a/app/tests/build-cache.test.ts b/app/tests/build-cache.test.ts
new file mode 100644
index 000000000..23657182f
--- /dev/null
+++ b/app/tests/build-cache.test.ts
@@ -0,0 +1,251 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtemp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  buildCacheManifestPath,
+  isReusableBuild,
+  readBuildCacheManifest,
+  writeBuildCacheManifest,
+} from "../scripts/build-cache";
+
+const serveOrBuildScript = new URL(
+  "../scripts/serve-or-build.ts",
+  import.meta.url,
+);
+const serveOrBuildScriptPath = fileURLToPath(serveOrBuildScript);
+
+async function withProject(
+  callback: (paths: { rootDir: string; appDir: string }) => Promise<void>,
+) {
+  const rootDir = await mkdtemp(join(tmpdir(), "openbot-build-cache-"));
+  const appDir = join(rootDir, "app");
+  try {
+    await mkdir(join(appDir, "src/lib/generated"), { recursive: true });
+    await mkdir(join(appDir, "dist"), { recursive: true });
+    await mkdir(join(rootDir, "examples/brand"), { recursive: true });
+    await writeFile(join(rootDir, "package.json"), '{"version":"1.2.3"}\n');
+    await writeFile(join(rootDir, "bun.lock"), "lock-a\n");
+    await writeFile(join(appDir, "package.json"), '{"version":"0.0.0"}\n');
+    await writeFile(join(appDir, "vite.config.ts"), "export default {}\n");
+    await writeFile(join(appDir, "index.html"), '<div id="root"></div>\n');
+    await writeFile(join(appDir, "src/main.tsx"), "console.log('a')\n");
+    await writeFile(
+      join(appDir, "src/lib/generated/application-config.ts"),
+      "export const appConfig = { brand: { tenantId: 'a' } };\n",
+    );
+    await writeFile(join(rootDir, "examples/brand/brand.yaml"), "name: A\n");
+    await writeFile(join(appDir, "dist/index.html"), "<html></html>\n");
+    await callback({ rootDir, appDir });
+  } finally {
+    await rm(rootDir, { recursive: true, force: true });
+  }
+}
+
+describe("production build cache", () => {
+  test("the package serve script validates the build before starting the native Bun server", async () => {
+    const packageJson = JSON.parse(
+      await readFile(new URL("../package.json", import.meta.url), "utf8"),
+    );
+
+    expect(packageJson.scripts.serve).toBe(
+      "bun scripts/serve-or-build.ts && bun serve.ts",
+    );
+  });
+
+  test("accepts a build only when the manifest and index match the current inputs", async () => {
+    await withProject(async (paths) => {
+      await writeBuildCacheManifest(paths, {
+        TENANT_PACKAGE_DIR: "../examples/brand",
+        VITE_PUBLIC_NAME: "OpenBot",
+      });
+
+      expect(
+        await isReusableBuild(paths, {
+          TENANT_PACKAGE_DIR: "../examples/brand",
+          VITE_PUBLIC_NAME: "OpenBot",
+        }),
+      ).toBe(true);
+    });
+  });
+
+  test.each([
+    ["source", "app/src/main.tsx", "console.log('b')\n"],
+    ["lockfile", "bun.lock", "lock-b\n"],
+    ["root package version", "package.json", '{"version":"1.2.4"}\n'],
+    ["app package manifest", "app/package.json", '{"version":"0.0.1"}\n'],
+    ["tenant branding", "examples/brand/brand.yaml", "name: B\n"],
+  ] as const)(
+    "rejects a build when %s changes",
+    async (_name, path, contents) => {
+      await withProject(async (paths) => {
+        const env = { TENANT_PACKAGE_DIR: "../examples/brand" };
+        await writeBuildCacheManifest(paths, env);
+
+        await writeFile(join(paths.rootDir, path), contents);
+
+        expect(await isReusableBuild(paths, env)).toBe(false);
+      });
+    },
+  );
+
+  test("rejects a build when Vite-exposed environment changes", async () => {
+    await withProject(async (paths) => {
+      await writeBuildCacheManifest(paths, { VITE_PUBLIC_NAME: "OpenBot" });
+
+      expect(
+        await isReusableBuild(paths, { VITE_PUBLIC_NAME: "Changed" }),
+      ).toBe(false);
+    });
+  });
+
+  test("rejects missing, corrupt, and stale manifests", async () => {
+    await withProject(async (paths) => {
+      expect(await isReusableBuild(paths, {})).toBe(false);
+
+      await writeFile(buildCacheManifestPath(paths), "{ nope");
+      expect(await isReusableBuild(paths, {})).toBe(false);
+
+      await writeBuildCacheManifest(paths, {});
+      const manifest = await readBuildCacheManifest(paths);
+      await writeFile(
+        buildCacheManifestPath(paths),
+        JSON.stringify({ ...manifest, version: -1 }),
+      );
+      expect(await isReusableBuild(paths, {})).toBe(false);
+    });
+  });
+
+  test("rejects a manifest when dist/index.html is missing", async () => {
+    await withProject(async (paths) => {
+      await writeBuildCacheManifest(paths, {});
+      await rm(join(paths.appDir, "dist/index.html"));
+
+      expect(await isReusableBuild(paths, {})).toBe(false);
+    });
+  });
+
+  test("the startup script regenerates config but skips Vite for a valid build", async () => {
+    await withProject(async (paths) => {
+      await mkdir(join(paths.rootDir, "scripts"), { recursive: true });
+      await mkdir(join(paths.appDir, "node_modules/vite/bin"), {
+        recursive: true,
+      });
+      await writeFile(
+        join(paths.rootDir, "package.json"),
+        JSON.stringify({
+          version: "1.2.3",
+          scripts: { "generate:app-config": "bun scripts/generate.ts" },
+        }),
+      );
+      await writeFile(
+        join(paths.rootDir, "scripts/generate.ts"),
+        [
+          'import { appendFile } from "node:fs/promises";',
+          `await appendFile(${JSON.stringify(join(paths.rootDir, "startup.log"))}, "generate\\n");`,
+        ].join("\n"),
+      );
+      await writeFile(
+        join(paths.appDir, "node_modules/vite/bin/vite.js"),
+        [
+          'import { appendFile } from "node:fs/promises";',
+          `await appendFile(${JSON.stringify(join(paths.rootDir, "startup.log"))}, "build\\n");`,
+        ].join("\n"),
+      );
+      const env = {
+        ...process.env,
+        OPENBOT_BUILD_CACHE_ROOT_DIR: paths.rootDir,
+        OPENBOT_BUILD_CACHE_APP_DIR: paths.appDir,
+      };
+      await writeBuildCacheManifest(paths, env);
+
+      const child = Bun.spawn({
+        cmd: [process.execPath, serveOrBuildScriptPath],
+        env,
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      const [exitCode] = await Promise.all([
+        child.exited,
+        new Response(child.stderr).text(),
+      ]);
+
+      expect(exitCode).toBe(0);
+      expect(await readFile(join(paths.rootDir, "startup.log"), "utf8")).toBe(
+        "generate\n",
+      );
+    });
+  });
+
+  test("the startup script invokes Vite and refreshes the manifest for a stale build", async () => {
+    await withProject(async (paths) => {
+      await mkdir(join(paths.rootDir, "scripts"), { recursive: true });
+      await mkdir(join(paths.appDir, "node_modules/vite/bin"), {
+        recursive: true,
+      });
+      await writeFile(
+        join(paths.rootDir, "package.json"),
+        JSON.stringify({
+          version: "1.2.3",
+          scripts: { "generate:app-config": "bun scripts/generate.ts" },
+        }),
+      );
+      await writeFile(
+        join(paths.rootDir, "scripts/generate.ts"),
+        [
+          'import { appendFile } from "node:fs/promises";',
+          `await appendFile(${JSON.stringify(join(paths.rootDir, "startup.log"))}, "generate\\n");`,
+        ].join("\n"),
+      );
+      await writeFile(
+        join(paths.appDir, "node_modules/vite/bin/vite.js"),
+        [
+          'import { appendFile } from "node:fs/promises";',
+          `await appendFile(${JSON.stringify(join(paths.rootDir, "startup.log"))}, "build\\n");`,
+          `await Bun.write(${JSON.stringify(join(paths.appDir, "dist/index.html"))}, "<html>rebuilt</html>\\n");`,
+        ].join("\n"),
+      );
+      const env = {
+        ...process.env,
+        OPENBOT_BUILD_CACHE_ROOT_DIR: paths.rootDir,
+        OPENBOT_BUILD_CACHE_APP_DIR: paths.appDir,
+      };
+      await writeBuildCacheManifest(paths, env);
+      await writeFile(join(paths.appDir, "src/main.tsx"), "console.log('b')\n");
+
+      const child = Bun.spawn({
+        cmd: [process.execPath, serveOrBuildScriptPath],
+        env,
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      const [exitCode] = await Promise.all([
+        child.exited,
+        new Response(child.stderr).text(),
+      ]);
+
+      expect(exitCode).toBe(0);
+      expect(await readFile(join(paths.rootDir, "startup.log"), "utf8")).toBe(
+        "generate\nbuild\n",
+      );
+      expect(await isReusableBuild(paths, env)).toBe(true);
+
+      const second = Bun.spawn({
+        cmd: [process.execPath, serveOrBuildScriptPath],
+        env,
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      const [secondExitCode] = await Promise.all([
+        second.exited,
+        new Response(second.stderr).text(),
+      ]);
+
+      expect(secondExitCode).toBe(0);
+      expect(await readFile(join(paths.rootDir, "startup.log"), "utf8")).toBe(
+        "generate\nbuild\ngenerate\n",
+      );
+    });
+  });
+});
diff --git a/app/tests/computer-preview-visibility.test.tsx b/app/tests/computer-preview-visibility.test.tsx
new file mode 100644
index 000000000..c9d727a96
--- /dev/null
+++ b/app/tests/computer-preview-visibility.test.tsx
@@ -0,0 +1,370 @@
+import { afterAll, afterEach, beforeAll, expect, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { ComputerView } from "@/components/computer/computer-view";
+import { LiveScreen } from "@/components/computer/live-screen";
+
+class SocketDouble {
+  static readonly OPEN = 1;
+  static readonly CLOSED = 3;
+  static latest: SocketDouble | undefined;
+
+  readyState = SocketDouble.OPEN;
+  onopen: (() => void) | null = null;
+  onmessage: ((event: { data: string }) => void) | null = null;
+  onerror: (() => void) | null = null;
+  onclose: (() => void) | null = null;
+  readonly sent: Record<string, unknown>[] = [];
+
+  constructor(_url: string) {
+    SocketDouble.latest = this;
+    queueMicrotask(() => this.onopen?.());
+  }
+
+  send(payload: string) {
+    this.sent.push(JSON.parse(payload) as Record<string, unknown>);
+  }
+
+  close() {
+    this.readyState = SocketDouble.CLOSED;
+    this.onclose?.();
+  }
+}
+
+type ObserverEntry = {
+  observer: IntersectionObserverDouble;
+  target: Element;
+};
+
+class IntersectionObserverDouble {
+  static observed: ObserverEntry[] = [];
+
+  constructor(
+    private readonly callback: IntersectionObserverCallback,
+    _options?: IntersectionObserverInit,
+  ) {}
+
+  observe(target: Element) {
+    IntersectionObserverDouble.observed.push({ observer: this, target });
+  }
+
+  unobserve(target: Element) {
+    IntersectionObserverDouble.observed =
+      IntersectionObserverDouble.observed.filter(
+        (entry) => entry.observer !== this || entry.target !== target,
+      );
+  }
+
+  disconnect() {
+    IntersectionObserverDouble.observed =
+      IntersectionObserverDouble.observed.filter(
+        (entry) => entry.observer !== this,
+      );
+  }
+
+  fire(target: Element, isIntersecting: boolean) {
+    this.callback(
+      [
+        {
+          target,
+          isIntersecting,
+          intersectionRatio: isIntersecting ? 1 : 0,
+        } as IntersectionObserverEntry,
+      ],
+      this as unknown as IntersectionObserver,
+    );
+  }
+}
+
+let originalWebSocket: typeof WebSocket;
+let originalCreateImageBitmap: typeof createImageBitmap | undefined;
+let originalFetch: typeof fetch;
+let originalIntersectionObserver: typeof IntersectionObserver | undefined;
+let originalCanvasGetContext: typeof HTMLCanvasElement.prototype.getContext;
+let originalImageDecode: typeof HTMLImageElement.prototype.decode | undefined;
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+  originalWebSocket = globalThis.WebSocket;
+  originalCreateImageBitmap = globalThis.createImageBitmap;
+  originalFetch = globalThis.fetch;
+  originalIntersectionObserver = globalThis.IntersectionObserver;
+  originalCanvasGetContext = HTMLCanvasElement.prototype.getContext;
+  originalImageDecode = HTMLImageElement.prototype.decode;
+  globalThis.WebSocket = SocketDouble as unknown as typeof WebSocket;
+  globalThis.IntersectionObserver =
+    IntersectionObserverDouble as unknown as typeof IntersectionObserver;
+});
+
+afterEach(() => {
+  cleanup();
+  SocketDouble.latest = undefined;
+  IntersectionObserverDouble.observed = [];
+  globalThis.fetch = originalFetch;
+  if (originalCreateImageBitmap) {
+    globalThis.createImageBitmap = originalCreateImageBitmap;
+  } else {
+    Reflect.deleteProperty(globalThis, "createImageBitmap");
+  }
+  HTMLCanvasElement.prototype.getContext = originalCanvasGetContext;
+  if (originalImageDecode) {
+    HTMLImageElement.prototype.decode = originalImageDecode;
+  } else {
+    Reflect.deleteProperty(HTMLImageElement.prototype, "decode");
+  }
+  setVisibility("visible");
+});
+
+afterAll(() => {
+  globalThis.WebSocket = originalWebSocket;
+  globalThis.fetch = originalFetch;
+  if (originalIntersectionObserver) {
+    globalThis.IntersectionObserver = originalIntersectionObserver;
+  } else {
+    Reflect.deleteProperty(globalThis, "IntersectionObserver");
+  }
+  if (originalCreateImageBitmap) {
+    globalThis.createImageBitmap = originalCreateImageBitmap;
+  } else {
+    Reflect.deleteProperty(globalThis, "createImageBitmap");
+  }
+  HTMLCanvasElement.prototype.getContext = originalCanvasGetContext;
+  if (originalImageDecode) {
+    HTMLImageElement.prototype.decode = originalImageDecode;
+  } else {
+    Reflect.deleteProperty(HTMLImageElement.prototype, "decode");
+  }
+  GlobalRegistrator.unregister();
+});
+
+function setVisibility(state: DocumentVisibilityState) {
+  Object.defineProperty(document, "visibilityState", {
+    configurable: true,
+    get: () => state,
+  });
+  Object.defineProperty(document, "hidden", {
+    configurable: true,
+    get: () => state !== "visible",
+  });
+}
+
+function sendFrame(socket: SocketDouble, data: string) {
+  socket.onmessage?.({
+    data: JSON.stringify({
+      type: "frame",
+      data,
+      width: 320,
+      height: 200,
+    }),
+  });
+}
+
+test("hidden live screen keeps the stream open and draws the latest hidden frame when visible again", async () => {
+  setVisibility("hidden");
+  let decodes = 0;
+  let draws = 0;
+  globalThis.createImageBitmap = (async () => {
+    decodes += 1;
+    return { width: 320, height: 200, close() {} } as ImageBitmap;
+  }) as typeof createImageBitmap;
+  HTMLCanvasElement.prototype.getContext = (() =>
+    ({
+      drawImage: () => (draws += 1),
+    }) as unknown as CanvasRenderingContext2D) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+
+  render(<LiveScreen computerId="hidden-live" driving />);
+  await waitFor(() => expect(SocketDouble.latest).toBeDefined());
+  const socket = SocketDouble.latest as SocketDouble;
+
+  sendFrame(socket, "AAAA");
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
+  expect(decodes).toBe(0);
+  expect(draws).toBe(0);
+  expect(socket.readyState).toBe(SocketDouble.OPEN);
+
+  setVisibility("visible");
+  await act(async () => {
+    document.dispatchEvent(new Event("visibilitychange"));
+  });
+
+  await waitFor(() => expect(decodes).toBe(1));
+  expect(draws).toBe(1);
+  expect(socket.readyState).toBe(SocketDouble.OPEN);
+});
+
+test("an older pending live screen decode cannot replace a newer frame", async () => {
+  type PendingDecode = {
+    bitmap: ImageBitmap & { label: string };
+    resolve: (bitmap: ImageBitmap & { label: string }) => void;
+  };
+  const pending: PendingDecode[] = [];
+  const drawn: string[] = [];
+  globalThis.createImageBitmap = (() =>
+    new Promise((resolve) => {
+      const label = pending.length === 0 ? "first" : "second";
+      pending.push({
+        bitmap: {
+          width: 320,
+          height: 200,
+          label,
+          close() {},
+        } as ImageBitmap & {
+          label: string;
+        },
+        resolve: resolve as PendingDecode["resolve"],
+      });
+    })) as typeof createImageBitmap;
+  HTMLCanvasElement.prototype.getContext = (() =>
+    ({
+      drawImage: (bitmap: ImageBitmap & { label?: string }) => {
+        drawn.push(bitmap.label ?? "unknown");
+      },
+    }) as unknown as CanvasRenderingContext2D) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+
+  render(<LiveScreen computerId="pending-live" driving />);
+  await waitFor(() => expect(SocketDouble.latest).toBeDefined());
+  const socket = SocketDouble.latest as SocketDouble;
+
+  sendFrame(socket, "AAAA");
+  sendFrame(socket, "BBBB");
+  await waitFor(() => expect(pending.length).toBe(2));
+
+  pending[1].resolve(pending[1].bitmap);
+  await waitFor(() => expect(drawn).toEqual(["second"]));
+
+  pending[0].resolve(pending[0].bitmap);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
+  expect(drawn).toEqual(["second"]);
+});
+
+test("hidden computer preview pauses screenshot polling while control polling continues", async () => {
+  setVisibility("hidden");
+  const paths: string[] = [];
+  globalThis.fetch = (async (input) => {
+    const path = String(input);
+    paths.push(path);
+    if (path.endsWith("/control")) {
+      return Response.json({
+        holder: "bot",
+        since: new Date(0).toISOString(),
+        requested: false,
+      });
+    }
+    if (path.endsWith("/screenshot")) {
+      return Response.json({
+        base64: "AAAA",
+        width: 320,
+        height: 200,
+        capturedAt: new Date(0).toISOString(),
+        url: "https://example.com",
+      });
+    }
+    return new Response("not found", { status: 404 });
+  }) as typeof fetch;
+
+  render(<ComputerView computerId="hidden-preview" active intervalMs={10} />);
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 30));
+  });
+
+  expect(paths.some((path) => path.endsWith("/control"))).toBe(true);
+  expect(paths.some((path) => path.endsWith("/screenshot"))).toBe(false);
+});
+
+test("offscreen computer preview starts screenshot polling when it intersects", async () => {
+  const paths: string[] = [];
+  globalThis.fetch = (async (input) => {
+    const path = String(input);
+    paths.push(path);
+    if (path.endsWith("/control")) {
+      return Response.json({
+        holder: "bot",
+        since: new Date(0).toISOString(),
+        requested: false,
+      });
+    }
+    if (path.endsWith("/screenshot")) {
+      return Response.json({
+        base64: "AAAA",
+        width: 320,
+        height: 200,
+        capturedAt: new Date(0).toISOString(),
+        url: "https://example.com",
+      });
+    }
+    return new Response("not found", { status: 404 });
+  }) as typeof fetch;
+
+  render(
+    <ComputerView computerId="offscreen-preview" active intervalMs={10} />,
+  );
+  const entry = IntersectionObserverDouble.observed.at(0);
+  expect(entry).toBeDefined();
+  await act(async () => {
+    entry?.observer.fire(entry.target, false);
+    await new Promise((resolve) => setTimeout(resolve, 30));
+  });
+  expect(paths.some((path) => path.endsWith("/screenshot"))).toBe(false);
+
+  await act(async () => {
+    entry?.observer.fire(entry.target, true);
+  });
+
+  await waitFor(() =>
+    expect(paths.some((path) => path.endsWith("/screenshot"))).toBe(true),
+  );
+});
+
+test("computer preview does not decode a screenshot response that lands after the page is hidden", async () => {
+  let resolveScreenshot: ((response: Response) => void) | undefined;
+  let decodes = 0;
+  HTMLImageElement.prototype.decode = () => {
+    decodes += 1;
+    return Promise.resolve();
+  };
+  globalThis.fetch = (async (input) => {
+    const path = String(input);
+    if (path.endsWith("/control")) {
+      return Response.json({
+        holder: "bot",
+        since: new Date(0).toISOString(),
+        requested: false,
+      });
+    }
+    if (path.endsWith("/screenshot")) {
+      return new Promise<Response>((resolve) => {
+        resolveScreenshot = resolve;
+      });
+    }
+    return new Response("not found", { status: 404 });
+  }) as typeof fetch;
+
+  render(<ComputerView computerId="pending-preview" active intervalMs={10} />);
+  const entry = IntersectionObserverDouble.observed.at(0);
+  expect(entry).toBeDefined();
+  await act(async () => {
+    entry?.observer.fire(entry.target, true);
+  });
+  await waitFor(() => expect(resolveScreenshot).toBeDefined());
+
+  await act(async () => {
+    setVisibility("hidden");
+    document.dispatchEvent(new Event("visibilitychange"));
+  });
+  resolveScreenshot?.(
+    Response.json({
+      base64: "AAAA",
+      width: 320,
+      height: 200,
+      capturedAt: new Date(0).toISOString(),
+      url: "https://example.com",
+    }),
+  );
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+  expect(decodes).toBe(0);
+});
diff --git a/app/tests/router.test.ts b/app/tests/router.test.ts
index 70b8f6bf8..cbe89a031 100644
--- a/app/tests/router.test.ts
+++ b/app/tests/router.test.ts
@@ -1,12 +1,99 @@
 import { expect, test } from "bun:test";
 import { router } from "../src/router";
+import {
+  routeBuildRollupOutputOptions,
+  routeCodeSplittingOptions,
+  selectOpenBotManualChunk,
+  selectedRouteSplitBehavior,
+} from "../vite.config";
 
 test("provides the generated index route", () => {
   expect(router.routesByPath["/"]?.fullPath).toBe("/");
 });
 
+test("provides the generated sign-in and chat routes", () => {
+  expect(router.routesByPath["/sign"]?.fullPath).toBe("/sign");
+  expect(router.routesByPath["/channel/$channelId"]?.fullPath).toBe(
+    "/channel/$channelId",
+  );
+});
+
 test("provides the protected credential administration route", () => {
   expect(router.routesByPath["/admin/credentials"]?.fullPath).toBe(
     "/admin/credentials",
   );
 });
+
+test("splits route components without splitting loaders or providers", () => {
+  expect(routeCodeSplittingOptions.defaultBehavior).toEqual([]);
+  expect(selectedRouteSplitBehavior({ routeId: "/sign" })).toEqual([
+    ["component"],
+  ]);
+  expect(
+    selectedRouteSplitBehavior({ routeId: "/_authed/_app/channel/$channelId" }),
+  ).toEqual([["component"]]);
+  expect(selectedRouteSplitBehavior({ routeId: "/admin/credentials" })).toEqual(
+    [["component"]],
+  );
+  expect(
+    selectedRouteSplitBehavior({ routeId: "/settings/connected-accounts/" }),
+  ).toEqual([["component"]]);
+  expect(selectedRouteSplitBehavior({ routeId: "/" })).toBeUndefined();
+});
+
+test("uses explicit manual chunks for route components", () => {
+  expect(routeBuildRollupOutputOptions.onlyExplicitManualChunks).toBe(true);
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/app/src/routes/sign.tsx?tsr-split=component",
+    ),
+  ).toBe("route-sign");
+  expect(
+    selectOpenBotManualChunk(
+      "C:\\repo\\app\\src\\routes\\_authed\\_app\\channel\\$channelId.tsx?tsr-split=component",
+    ),
+  ).toBe("route-chat-core");
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/app/src/routes/_authed/admin/credentials.tsx?tsr-split=component",
+    ),
+  ).toBe("route-admin");
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/app/src/routes/_authed/settings/connected-accounts/index.tsx?tsr-split=component",
+    ),
+  ).toBe("route-settings");
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/app/src/routes/_authed/_app/agents/index.tsx?tsr-split=component",
+    ),
+  ).toBe("route-app-secondary");
+});
+
+test("does not manually chunk lazy content or dependencies", () => {
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/app/src/routes/_authed/_app/channel/$channelId.tsx?tsr-split=loader",
+    ),
+  ).toBeUndefined();
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/app/src/components/markdown/lazy-mermaid.tsx",
+    ),
+  ).toBeUndefined();
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/node_modules/.bun/mermaid@11.12.1/node_modules/mermaid/dist/mermaid.core.mjs",
+    ),
+  ).toBeUndefined();
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/node_modules/.bun/@copilotkit+react-core@1.70.1/node_modules/@copilotkit/react-core/dist/index.js",
+    ),
+  ).toBeUndefined();
+  expect(
+    selectOpenBotManualChunk(
+      "/repo/node_modules/.bun/react-dom@19.2.0/node_modules/react-dom/client.js",
+    ),
+  ).toBeUndefined();
+});
diff --git a/app/vite.config.ts b/app/vite.config.ts
index aa32c26ca..97f49d91b 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -91,10 +91,90 @@ const serving = {
   },
 };
 
+type RouteSplitGroupings = Array<
+  Array<
+    "component" | "pendingComponent" | "errorComponent" | "notFoundComponent"
+  >
+>;
+
+const componentRouteSplit: RouteSplitGroupings = [["component"]];
+
+export function selectedRouteSplitBehavior({
+  routeId,
+}: {
+  routeId: string;
+}): RouteSplitGroupings | undefined {
+  if (routeId === "/" || routeId.startsWith("/__root")) {
+    return undefined;
+  }
+  return componentRouteSplit;
+}
+
+export const routeCodeSplittingOptions = {
+  defaultBehavior: [],
+  splitBehavior: selectedRouteSplitBehavior,
+};
+
+function normalizedModuleId(id: string): string {
+  return id.replaceAll("\\", "/");
+}
+
+function routeComponentSplitPath(id: string): string | undefined {
+  const normalized = normalizedModuleId(id);
+  const [filePath, query = ""] = normalized.split("?");
+  if (new URLSearchParams(query).get("tsr-split") !== "component") {
+    return undefined;
+  }
+  const routesMarker = "/src/routes/";
+  const routesIndex = filePath.lastIndexOf(routesMarker);
+  if (routesIndex === -1) {
+    return undefined;
+  }
+  return filePath.slice(routesIndex + routesMarker.length);
+}
+
+export function selectOpenBotManualChunk(id: string): string | undefined {
+  const routePath = routeComponentSplitPath(id);
+  if (!routePath) {
+    return undefined;
+  }
+  if (routePath === "sign.tsx") {
+    return "route-sign";
+  }
+  if (
+    routePath === "_authed.tsx" ||
+    routePath === "_authed/_app.tsx" ||
+    routePath.startsWith("_authed/_app/channel/")
+  ) {
+    return "route-chat-core";
+  }
+  if (routePath.startsWith("_authed/admin/")) {
+    return "route-admin";
+  }
+  if (routePath.startsWith("_authed/settings/")) {
+    return "route-settings";
+  }
+  if (
+    routePath.startsWith("_authed/_app/") ||
+    routePath === "_authed/onboarding.tsx"
+  ) {
+    return "route-app-secondary";
+  }
+  return undefined;
+}
+
+export const routeBuildRollupOutputOptions = {
+  onlyExplicitManualChunks: true,
+  manualChunks: selectOpenBotManualChunk,
+};
+
 export default defineConfig({
   plugins: [
     announceServerPort(apiPort.port),
-    tanstackRouter(),
+    tanstackRouter({
+      autoCodeSplitting: true,
+      codeSplittingOptions: routeCodeSplittingOptions,
+    }),
     react(),
     tailwindcss(),
   ],
@@ -105,4 +185,9 @@ export default defineConfig({
   },
   server: serving,
   preview: serving,
+  build: {
+    rollupOptions: {
+      output: routeBuildRollupOutputOptions,
+    },
+  },
 });

From b836174e42a9235cf303170b0d1cd281922b33cd Mon Sep 17 00:00:00 2001
From: David McKay <david@copilotkit.ai>
Date: Wed, 16 Sep 2026 13:16:31 -0700
Subject: [PATCH 2/2] ci: install dependencies for startup regression checks

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 908e3eb98..c192001ba 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -260,6 +260,7 @@ jobs:
       - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
           bun-version: 1.3.14
+      - run: bun install --frozen-lockfile
       - run: bun test app/tests/build-cache.test.ts
 
   python-harness: