diff --git a/apps/cli/package.json b/apps/cli/package.json
index 994710b0..214d2cb2 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -13,6 +13,7 @@
   "scripts": {
     "build": "esbuild src/index.ts --bundle --platform=node --format=cjs --external:esbuild --external:@babel/core --external:@babel/preset-typescript --external:babel-preset-solid --external:bufferutil --external:utf-8-validate --outfile=dist/index.js && chmod +x dist/index.js",
     "check": "tsc --noEmit",
+    "test:browser-companion": "node --test --experimental-strip-types tests/browser-companion-protocol.test.ts",
     "symlink:remove": "rm -f /opt/homebrew/bin/dapi",
     "symlink:create": "npm run build && ln -sf \"$PWD/dist/index.js\" /opt/homebrew/bin/dapi"
   },
diff --git a/apps/cli/src/browser-companion-protocol.ts b/apps/cli/src/browser-companion-protocol.ts
new file mode 100644
index 00000000..cb98c736
--- /dev/null
+++ b/apps/cli/src/browser-companion-protocol.ts
@@ -0,0 +1,81 @@
+export type BrowserCompanionCapabilities = {
+  readOnly: true;
+  browserDapi: false;
+  cloudAi: false;
+  persistentEdits: false;
+  htmlPaint: false;
+  media: "unsupported-phase-a";
+  webgpu: "browser-dependent";
+  fonts: "browser-dependent";
+  trustedProjectCode: true;
+};
+
+export type BrowserCompanionCommand =
+  | { kind: "browser-companion"; action: "prepare"; projectDir: string }
+  | { kind: "browser-companion"; action: "start"; projectDir: string; projectId?: string }
+  | { kind: "browser-companion"; action: "status" }
+  | { kind: "browser-companion"; action: "logs" }
+  | { kind: "browser-companion"; action: "stop" };
+
+export type BrowserCompanionLog = {
+  seq: number;
+  ts: number;
+  level: "debug" | "info" | "warning" | "error";
+  event: string;
+  data?: Record<string, unknown>;
+};
+
+export type BrowserCompanionRevisionIdentity = {
+  sessionId: string;
+  revision: number;
+  bundleHash: string;
+};
+
+export type BrowserCompanionStatus = {
+  active: boolean;
+  sessionId?: string;
+  origin?: string;
+  appVersion?: string;
+  buildHash?: string;
+  protocol?: number;
+  project?: { id: string; name: string; displayName: string };
+  rendererConnected?: boolean;
+  hostWindowVisible?: boolean;
+  hostWindowMode?: "hidden" | "minimized-fallback";
+  hostLocalOnly?: boolean;
+  revision?: number;
+  bundleHash?: string;
+  canonicalCompiled?: BrowserCompanionRevisionIdentity;
+  hostApplied?: BrowserCompanionRevisionIdentity;
+  browserApplied?: BrowserCompanionRevisionIdentity;
+  lifecycle?: "awaiting-renderer" | "awaiting-host-apply" | "awaiting-browser-apply" | "ready" | "disconnected-fresh-session-required" | "failed";
+  mountError?: string;
+  egressAttempts?: number;
+};
+
+export type BrowserCompanionStart = BrowserCompanionStatus & {
+  active: true;
+  url: string;
+  capabilities: BrowserCompanionCapabilities;
+  humanStep: string;
+};
+
+export type BrowserCompanionReply =
+  | { ok: true; data: BrowserCompanionStart | BrowserCompanionStatus | BrowserCompanionLog[] }
+  | { ok: false; error: string };
+
+export function isBrowserCompanionCommand(value: unknown): value is BrowserCompanionCommand {
+  if (!value || typeof value !== "object") return false;
+  const command = value as { kind?: unknown; action?: unknown; projectDir?: unknown; projectId?: unknown };
+  if (command.kind !== "browser-companion") return false;
+  if (command.action !== "prepare" && command.action !== "start" && command.action !== "status" && command.action !== "logs" && command.action !== "stop") return false;
+  const keys = Object.keys(value).sort();
+  if (command.action !== "prepare" && command.action !== "start") {
+    return keys.length === 2 && keys[0] === "action" && keys[1] === "kind";
+  }
+  const exactKeys = command.action === "prepare"
+    ? keys.join(",") === "action,kind,projectDir"
+    : keys.join(",") === "action,kind,projectDir" || keys.join(",") === "action,kind,projectDir,projectId";
+  return exactKeys && typeof command.projectDir === "string" && command.projectDir.length > 0 && command.projectDir.length <= 32_768 && !command.projectDir.includes("\0") &&
+    (command.action === "prepare" || command.projectId === undefined || (typeof command.projectId === "string" && command.projectId.length > 0 && command.projectId.length <= 256 && !command.projectId.includes("\0")));
+}
diff --git a/apps/cli/src/cli-client.ts b/apps/cli/src/cli-client.ts
index fc125a02..9f83de9c 100644
--- a/apps/cli/src/cli-client.ts
+++ b/apps/cli/src/cli-client.ts
@@ -12,6 +12,7 @@ import { observable } from "@trpc/server/observable";
 import { SOCKET_PATH } from "./protocol";
 import type { CliHandshake, CliHandshakeReply, CliReply, CliRequest } from "./protocol";
 import type { AppRouter } from "../../web/src/context/dapi";
+import type { BrowserCompanionCommand, BrowserCompanionReply } from "./browser-companion-protocol";
 
 const DEFAULT_TIMEOUT_MS = 60000;
 export const GENERATE_TIMEOUT_MS = 600000;
@@ -138,7 +139,7 @@ export const editor = createTRPCClient<AppRouter>({ links: [cliLink] });
 // Transport failures surface as TRPCClientError wrapping the socket error;
 // unwrap to reach errno codes like ENOENT/ECONNREFUSED.
 export function errnoCode(e: unknown): string | undefined {
-  if (!(e instanceof TRPCClientError)) return undefined;
+  if (!(e instanceof TRPCClientError)) return (e as NodeJS.ErrnoException | undefined)?.code;
   return (e.cause as NodeJS.ErrnoException | undefined)?.code;
 }
 
@@ -165,3 +166,23 @@ export async function waitForCliSocket(timeoutMs = 30000): Promise<void> {
     ? lastError
     : new Error("Timed out waiting for the app to start");
 }
+
+/** Main-owned companion management; no request is forwarded to either renderer. */
+export function browserCompanion(command: BrowserCompanionCommand, timeoutMs = 60_000): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const socket = connect(SOCKET_PATH);
+    let buffer = "";
+    socket.setEncoding("utf8");
+    socket.setTimeout(timeoutMs, () => socket.destroy(new Error("Timed out waiting for browser companion host")));
+    socket.on("connect", () => socket.end(JSON.stringify(command)));
+    socket.on("data", (chunk) => { buffer += chunk; });
+    socket.on("error", reject);
+    socket.on("end", () => {
+      try {
+        const reply = JSON.parse(buffer) as BrowserCompanionReply;
+        if (!reply.ok) throw new Error(reply.error);
+        resolve(reply.data);
+      } catch (error) { reject(error); }
+    });
+  });
+}
diff --git a/apps/cli/src/index.ts b/apps/cli/src/index.ts
index 184dac9b..d2ca117b 100644
--- a/apps/cli/src/index.ts
+++ b/apps/cli/src/index.ts
@@ -11,7 +11,7 @@ import { dirname, isAbsolute, join, resolve } from "node:path";
 import { Command } from "commander";
 import { version } from "../../../package.json";
 import { parseTime, TIME_FPS } from "@diffusionstudio/jsx";
-import { editor, errnoCode, EXPORT_TIMEOUT_MS, GENERATE_TIMEOUT_MS, waitForCliSocket } from "./cli-client";
+import { browserCompanion, editor, errnoCode, EXPORT_TIMEOUT_MS, GENERATE_TIMEOUT_MS, waitForCliSocket } from "./cli-client";
 import { listLocalFonts } from "./fonts";
 import { buildIssueBody, createIssue } from "./report";
 import { fetchVideo } from "./ytdlp";
@@ -331,10 +331,13 @@ async function checkNode(id: string): Promise<void> {
 }
 
 type OpenOptions = { background?: boolean };
+type BrowserOptions = { status?: boolean; logs?: boolean; stop?: boolean };
 
 /** `open -a` on a running app only activates it, so this is safe to always run. */
-function launchApp(background: boolean): Promise<boolean> {
-  const args = background ? ["-g", "-a", APP_NAME, "--args", "--hidden"] : ["-a", APP_NAME];
+function launchApp(background: boolean, companionHost = false): Promise<boolean> {
+  const args = background
+    ? ["-g", "-a", APP_NAME, "--args", "--hidden", ...(companionHost ? ["--browser-companion-host"] : [])]
+    : ["-a", APP_NAME];
   return new Promise((res) => execFile("open", args, (err) => res(!err)));
 }
 
@@ -359,6 +362,58 @@ async function openProject(path: string | undefined, opts: OpenOptions): Promise
   }
 }
 
+async function browserProject(path: string | undefined, opts: BrowserOptions): Promise<void> {
+  const actions = [opts.status, opts.logs, opts.stop].filter(Boolean).length;
+  if (actions > 1 || (actions && path)) {
+    console.error("Pass one of --status, --logs, or --stop without a project path.");
+    process.exit(1);
+  }
+  try {
+    if (opts.status) console.log(JSON.stringify(await browserCompanion({ kind: "browser-companion", action: "status" })));
+    else if (opts.logs) console.log(JSON.stringify(await browserCompanion({ kind: "browser-companion", action: "logs" })));
+    else if (opts.stop) console.log(JSON.stringify(await browserCompanion({ kind: "browser-companion", action: "stop" })));
+    else {
+      if (!path) {
+        console.error("A project folder is required: dapi browser <project>");
+        process.exit(1);
+      }
+      let running = false;
+      try {
+        await editor.ping.query();
+        running = true;
+      } catch (error) {
+        const code = errnoCode(error);
+        if (code !== "ENOENT" && code !== "ECONNREFUSED") throw error;
+      }
+      if (!running) {
+        const launched = process.platform === "darwin" && (await launchApp(true, true));
+        if (launched) await waitForCliSocket();
+        else await editor.ping.query();
+      }
+      const projectDir = resolve(path);
+      await browserCompanion({ kind: "browser-companion", action: "prepare", projectDir });
+      await waitForCliSocket();
+      const opened = await editor.open.mutate({ dir: projectDir });
+      const readyBy = Date.now() + 30_000;
+      while (true) {
+        const context = await editor.context.query();
+        if (context.projectDir === projectDir) break;
+        if (Date.now() >= readyBy) throw new Error("The hidden Electron renderer did not finish opening the project");
+        await new Promise((resolveWait) => setTimeout(resolveWait, 100));
+      }
+      const result = await browserCompanion({
+        kind: "browser-companion",
+        action: "start",
+        projectDir,
+        ...(opened.id ? { projectId: opened.id } : {}),
+      });
+      console.log(JSON.stringify(result));
+    }
+  } catch (error) {
+    handleSocketError(error);
+  }
+}
+
 async function context(): Promise<void> {
   try {
     const result = await editor.context.query();
@@ -621,6 +676,15 @@ program
   .option("-b, --background", "launch or keep the app in the background, without raising a window")
   .action((path: string | undefined, opts: OpenOptions) => openProject(path, opts));
 
+program
+  .command("browser")
+  .description("Open a read-only local browser companion backed by the hidden Electron host. Prints JSON; never opens an OS browser.")
+  .argument("[path]", "project folder for a new companion session")
+  .option("--status", "print companion and hidden-host status")
+  .option("--logs", "print structured companion logs")
+  .option("--stop", "stop the companion listener and release its resources")
+  .action((path: string | undefined, opts: BrowserOptions) => browserProject(path, opts));
+
 program
   .command("context")
   .alias("ctx")
diff --git a/apps/cli/src/protocol.ts b/apps/cli/src/protocol.ts
index d4d60007..474cc9e3 100644
--- a/apps/cli/src/protocol.ts
+++ b/apps/cli/src/protocol.ts
@@ -9,3 +9,4 @@
 // own repo.
 export * from "./cli-channels";
 export * from "./cli-socket-path";
+export * from "./browser-companion-protocol";
diff --git a/apps/cli/tests/browser-companion-protocol.test.ts b/apps/cli/tests/browser-companion-protocol.test.ts
new file mode 100644
index 00000000..fa2a9d25
--- /dev/null
+++ b/apps/cli/tests/browser-companion-protocol.test.ts
@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { isBrowserCompanionCommand } from "../src/browser-companion-protocol.ts";
+
+test("accepts the narrow companion lifecycle commands", () => {
+  assert.equal(isBrowserCompanionCommand({ kind: "browser-companion", action: "status" }), true);
+  assert.equal(isBrowserCompanionCommand({ kind: "browser-companion", action: "prepare", projectDir: "/trusted/project" }), true);
+  assert.equal(isBrowserCompanionCommand({ kind: "browser-companion", action: "logs" }), true);
+  assert.equal(isBrowserCompanionCommand({ kind: "browser-companion", action: "stop" }), true);
+  assert.equal(isBrowserCompanionCommand({
+    kind: "browser-companion",
+    action: "start",
+    projectDir: "/trusted/project",
+    projectId: "project-123",
+  }), true);
+  assert.equal(isBrowserCompanionCommand({
+    kind: "browser-companion",
+    action: "start",
+    projectDir: "/new/project",
+  }), true);
+});
+
+test("rejects malformed, overbroad, and authority-bearing messages", () => {
+  const rejected = [
+    null,
+    {},
+    { kind: "browser-companion", action: "prepare" },
+    { kind: "browser-companion", action: "prepare", projectDir: "/trusted/project", projectId: "unexpected" },
+    { kind: "browser-companion", action: "start", projectDir: "" },
+    { kind: "browser-companion", action: "start", projectDir: "/trusted/project", projectId: "" },
+    { kind: "browser-companion", action: "start", projectDir: "/trusted/project\0evil", projectId: "project-123" },
+    { kind: "browser-companion", action: "status", path: "/etc/passwd" },
+    { kind: "browser-companion", action: "write", projectDir: "/trusted/project", projectId: "project-123" },
+    { kind: "browser-companion", action: "dapi", procedure: "export" },
+  ];
+  for (const value of rejected) assert.equal(isBrowserCompanionCommand(value), false, JSON.stringify(value));
+});
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 20c0d2ba..99667394 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -18,6 +18,8 @@
     "stage:docs": "node scripts/stage-docs.mjs",
     "stage:skills": "node scripts/stage-skills.mjs",
     "check": "tsc --noEmit",
+    "test:browser-companion": "node --test --experimental-strip-types tests/browser-companion-*.test.ts",
+    "test:browser-companion:integration": "node --test tests/browser-companion-lifecycle.integration.mjs",
     "dev": "npm run build && electron-forge start",
     "package": "npm run build && npm run build:web && npm run stage:cli && npm run stage:docs && npm run stage:skills && electron-forge package",
     "make": "npm run build && npm run build:web && npm run stage:cli && npm run stage:docs && npm run stage:skills && electron-forge make",
@@ -31,6 +33,7 @@
     "@electron-forge/publisher-github": "^7.11.1",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^24.10.1",
+    "@types/ws": "^8.18.1",
     "electron": "^43.1.1",
     "typescript": "~5.9.3"
   },
@@ -44,6 +47,7 @@
     "nanoid": "^6.0.1",
     "ts-morph": "^28.0.0",
     "update-electron-app": "^3.0.0",
+    "ws": "^8.18.3",
     "yaml": "^2.9.0"
   }
 }
diff --git a/apps/desktop/src/browser-companion-capture.ts b/apps/desktop/src/browser-companion-capture.ts
new file mode 100644
index 00000000..8b828301
--- /dev/null
+++ b/apps/desktop/src/browser-companion-capture.ts
@@ -0,0 +1,88 @@
+/**
+ * One explicitly armed, root-scoped capture. A published value is retained
+ * only until its consumer takes it (or the deadline expires); publications
+ * while no capture is armed are ignored and retain nothing.
+ */
+export class OneShotCapture<T> {
+  private pending: {
+    key: string;
+    promise: Promise<T>;
+    resolve: (value: T) => void;
+    reject: (error: Error) => void;
+    timer: ReturnType<typeof setTimeout>;
+    published: boolean;
+    taken: boolean;
+  } | null = null;
+
+  arm(key: string, timeoutMs: number, timeoutMessage: string): void {
+    this.cancel("Companion bundle capture was superseded");
+
+    let resolveCapture!: (value: T) => void;
+    let rejectCapture!: (error: Error) => void;
+    const promise = new Promise<T>((resolve, reject) => {
+      resolveCapture = resolve;
+      rejectCapture = reject;
+    });
+    // A prepare/start client can disappear before consuming the capture.
+    // Keep that bounded rejection from becoming an unhandled process error.
+    void promise.catch(() => {});
+
+    const capture = {
+      key,
+      promise,
+      resolve: resolveCapture,
+      reject: rejectCapture,
+      timer: undefined as unknown as ReturnType<typeof setTimeout>,
+      published: false,
+      taken: false,
+    };
+    capture.timer = setTimeout(() => {
+      if (this.pending !== capture) return;
+      this.pending = null;
+      capture.reject(new Error(timeoutMessage));
+    }, timeoutMs);
+    this.pending = capture;
+  }
+
+  isArmedFor(key: string): boolean {
+    return this.pending?.key === key && !this.pending.published;
+  }
+
+  publish(key: string, value: T): boolean {
+    const capture = this.pending;
+    if (!capture || capture.key !== key || capture.published) return false;
+    capture.published = true;
+    capture.resolve(value);
+    if (capture.taken) this.release(capture);
+    return true;
+  }
+
+  take(key: string): Promise<T> {
+    const capture = this.pending;
+    if (!capture || capture.key !== key || capture.taken) {
+      return Promise.reject(new Error("No canonical renderer bundle capture is armed for this project"));
+    }
+    capture.taken = true;
+    if (capture.published) this.release(capture);
+    return capture.promise;
+  }
+
+  cancel(message = "Companion bundle capture was cancelled"): void {
+    const capture = this.pending;
+    if (!capture) return;
+    this.release(capture);
+    capture.reject(new Error(message));
+  }
+
+  inspect(): { armed: boolean; retainedValues: number } {
+    return {
+      armed: !!this.pending && !this.pending.published,
+      retainedValues: this.pending?.published ? 1 : 0,
+    };
+  }
+
+  private release(capture: NonNullable<OneShotCapture<T>["pending"]>): void {
+    if (this.pending === capture) this.pending = null;
+    clearTimeout(capture.timer);
+  }
+}
diff --git a/apps/desktop/src/browser-companion-security.ts b/apps/desktop/src/browser-companion-security.ts
new file mode 100644
index 00000000..907be3e6
--- /dev/null
+++ b/apps/desktop/src/browser-companion-security.ts
@@ -0,0 +1,58 @@
+import { isAbsolute, relative } from "node:path";
+import { timingSafeEqual } from "node:crypto";
+
+export type CompanionAuthenticationExpectation = {
+  capability: string;
+  buildHash: string;
+  protocol: number;
+  schemaHash: string;
+  appVersion: string;
+  capabilityConsumed: boolean;
+  rendererConnected: boolean;
+};
+
+export function exactCompanionOrigin(actual: string | undefined, expected: string): boolean {
+  return actual === expected;
+}
+
+export function isLoopbackCompanionUrl(value: string): boolean {
+  try {
+    const host = new URL(value).hostname;
+    return host === "127.0.0.1" || host === "localhost" || host === "[::1]";
+  } catch {
+    return false;
+  }
+}
+
+export function containedWebPath(root: string, candidate: string): boolean {
+  const rel = relative(root, candidate);
+  return rel === "" || (!rel.startsWith("..") && !isAbsolute(rel));
+}
+
+export function redactCompanionLog(text: string, sensitive: readonly string[]): string {
+  let result = text;
+  for (const value of sensitive) if (value) result = result.split(value).join("<redacted>");
+  return result
+    .replace(/\b(Bearer|Capability)\s+[A-Za-z0-9._~-]+/gi, "$1 <redacted>")
+    .replace(/(?:\/Users|\/home|\/private|\/tmp|[A-Za-z]:\\)[^\s"']+/g, "<redacted-path>");
+}
+
+function sameSecret(actual: unknown, expected: string): boolean {
+  if (typeof actual !== "string") return false;
+  const left = Buffer.from(actual);
+  const right = Buffer.from(expected);
+  return left.length === right.length && timingSafeEqual(left, right);
+}
+
+export function isCompanionAuthentication(value: unknown, expected: CompanionAuthenticationExpectation): boolean {
+  if (!value || typeof value !== "object" || expected.capabilityConsumed || expected.rendererConnected) return false;
+  const message = value as { type?: unknown; capability?: unknown; buildHash?: unknown; client?: unknown };
+  if (message.type !== "authenticate" || !sameSecret(message.capability, expected.capability) || message.buildHash !== expected.buildHash) return false;
+  if (!message.client || typeof message.client !== "object") return false;
+  const client = message.client as { protocol?: unknown; schemaHash?: unknown; appVersion?: unknown };
+  return client.protocol === expected.protocol && client.schemaHash === expected.schemaHash && client.appVersion === expected.appVersion;
+}
+
+export function isCompanionSemantic(value: unknown): value is "playback.play" | "playback.pause" | "playback.scrub" {
+  return value === "playback.play" || value === "playback.pause" || value === "playback.scrub";
+}
diff --git a/apps/desktop/src/browser-companion.ts b/apps/desktop/src/browser-companion.ts
new file mode 100644
index 00000000..1bc5ad49
--- /dev/null
+++ b/apps/desktop/src/browser-companion.ts
@@ -0,0 +1,728 @@
+import { app, type BrowserWindow } from "electron";
+import { createHash, randomBytes, randomUUID } from "node:crypto";
+import { createReadStream, watch, type FSWatcher } from "node:fs";
+import { readFile, readdir, stat } from "node:fs/promises";
+import { createServer, type IncomingMessage, type Server, type ServerResponse } from "node:http";
+import { extname, join, normalize, resolve } from "node:path";
+import { WebSocketServer, WebSocket } from "ws";
+
+import {
+  COMPANION_PROTOCOL_VERSION,
+  COMPANION_SCHEMA_HASH,
+  type CompanionCapabilities,
+  type CompanionSnapshot,
+} from "../../web/src/lib/companion-protocol";
+import {
+  getProject,
+} from "./projects";
+import {
+  containedWebPath,
+  exactCompanionOrigin,
+  isCompanionAuthentication,
+  isCompanionSemantic,
+  redactCompanionLog,
+} from "./browser-companion-security";
+import { OneShotCapture } from "./browser-companion-capture";
+
+import type {
+  BrowserCompanionCommand,
+  BrowserCompanionLog,
+  BrowserCompanionReply,
+  BrowserCompanionStart,
+  BrowserCompanionStatus,
+} from "@diffusionstudio/cli/protocol";
+import type { CompileResult, ProjectInfo } from "./main-channels";
+
+const MAX_LOGS = 2000;
+const MAX_RENDERER_MESSAGE = 1024 * 1024;
+const CAPABILITIES: CompanionCapabilities = {
+  readOnly: true,
+  browserDapi: false,
+  cloudAi: false,
+  persistentEdits: false,
+  htmlPaint: false,
+  media: "unsupported-phase-a",
+  webgpu: "browser-dependent",
+  fonts: "browser-dependent",
+};
+
+type RevisionIdentity = { sessionId: string; revision: number; bundleHash: string };
+type HostApplication = { root: string; sessionId: string; revision: number; bundleHash: string; ok: boolean; error?: string };
+type PendingUpdate = { identity: RevisionIdentity; snapshot: CompanionSnapshot };
+
+type Session = {
+  id: string;
+  root: string;
+  project: ProjectInfo;
+  capability: string;
+  buildHash: string;
+  origin: string;
+  revision: number;
+  canonicalCompiled: RevisionIdentity;
+  hostApplied: RevisionIdentity;
+  browserApplied: RevisionIdentity | null;
+  pendingUpdate: PendingUpdate | null;
+  mountError: string | null;
+  snapshot: CompanionSnapshot;
+  http: Server;
+  websocket: WebSocketServer;
+  renderer: WebSocket | null;
+  rendererEverConnected: boolean;
+  capabilityConsumed: boolean;
+  watcher: FSWatcher | null;
+  stopped: boolean;
+  canonicalGeneration: number;
+  updateChain: Promise<void>;
+  egressAttempts: number;
+  logs: BrowserCompanionLog[];
+  logSequence: number;
+  dockWasVisible: boolean;
+  hostWindowMode: "hidden" | "minimized-fallback";
+};
+
+let current: Session | null = null;
+let getHostWindow: () => BrowserWindow | null = () => null;
+let prepareHost: () => Promise<void> = async () => {};
+let releaseHost: () => Promise<void> = async () => {};
+let hostPrepared = false;
+let pendingHostEgress: string[] = [];
+let canonicalGeneration = 0;
+let preparedSession: { root: string; sessionId: string } | null = null;
+type CanonicalBundle = {
+  bundle: CompileResult;
+  bundleHash: string;
+  generation: number;
+  durationMs: number;
+  identity: RevisionIdentity;
+};
+const canonicalCapture = new OneShotCapture<CanonicalBundle>();
+const hostApplicationCapture = new OneShotCapture<HostApplication>();
+
+function bundleHash(bundle: CompileResult): string {
+  return createHash("sha256").update(bundle.ok ? bundle.code : `compile-error:\n${bundle.error}`).digest("hex");
+}
+
+export async function publishBrowserCompanionBundle(
+  root: string,
+  bundle: CompileResult,
+  durationMs: number,
+): Promise<RevisionIdentity | null> {
+  const session = current;
+  const relayToSession = !!session && session.root === root && !session.stopped;
+  // Normal desktop compilation is unchanged, but companion code retains no
+  // result unless a start explicitly armed this root or an active companion
+  // needs the watch update relayed.
+  const armedForStart = canonicalCapture.isArmedFor(root);
+  if (!armedForStart && !relayToSession) return null;
+
+  const compiledBundleHash = bundleHash(bundle);
+  const generation = ++canonicalGeneration;
+
+  if (!relayToSession || !session) {
+    if (!preparedSession || preparedSession.root !== root) {
+      throw new Error("Companion surface capture has no prepared session identity");
+    }
+    const identity = { sessionId: preparedSession.sessionId, revision: 1, bundleHash: compiledBundleHash };
+    canonicalCapture.publish(root, {
+      bundle,
+      bundleHash: compiledBundleHash,
+      generation,
+      durationMs,
+      identity,
+    });
+    return identity;
+  }
+
+  const publication = session.updateChain.then(async (): Promise<RevisionIdentity | null> => {
+    if (session.stopped || generation <= session.canonicalGeneration) return null;
+    session.canonicalGeneration = generation;
+    session.revision++;
+    const identity = { sessionId: session.id, revision: session.revision, bundleHash: compiledBundleHash };
+    session.canonicalCompiled = identity;
+    session.pendingUpdate = {
+      identity,
+      snapshot: await makeSnapshot(session, bundle, compiledBundleHash, session.revision),
+    };
+    session.mountError = bundle.ok ? null : "Canonical project compile failed";
+    log(session, bundle.ok ? "canonicalCompiled" : "canonicalCompileFailed", bundle.ok ? "info" : "error", {
+      ...identity,
+      durationMs,
+    });
+    if (!bundle.ok && session.renderer?.readyState === WebSocket.OPEN) {
+      session.renderer.send(JSON.stringify({ type: "fatal", error: "Canonical project compile failed; companion stopped applying updates" }));
+      session.renderer.close(1011, "Canonical compile failed");
+    }
+    return identity;
+  });
+  session.updateChain = publication.then(
+    () => undefined,
+    (error) => log(session, "project.bundle.relay.failed", "error", {
+      message: error instanceof Error ? error.message : String(error),
+    }),
+  );
+  return publication;
+}
+
+/** Exact hidden-renderer mount acknowledgement for the compiled bundle. */
+export function acknowledgeBrowserCompanionHostBundle(
+  root: string,
+  acknowledgement: { sessionId: string; revision: number; bundleHash: string; ok: boolean; error?: string },
+): void {
+  const application: HostApplication = { root, ...acknowledgement };
+  hostApplicationCapture.publish(root, application);
+
+  const session = current;
+  if (!session || session.stopped || session.root !== root) return;
+  session.updateChain = session.updateChain.then(() => {
+    const pending = session.pendingUpdate;
+    if (
+      !pending ||
+      pending.identity.sessionId !== acknowledgement.sessionId ||
+      pending.identity.revision !== acknowledgement.revision ||
+      pending.identity.bundleHash !== acknowledgement.bundleHash
+    ) {
+      log(session, "hostApplyRefused", "warning", {
+        sessionId: acknowledgement.sessionId,
+        revision: acknowledgement.revision,
+        bundleHash: acknowledgement.bundleHash,
+      });
+      return;
+    }
+    if (!acknowledgement.ok) {
+      session.mountError = redactCompanionLog(acknowledgement.error ?? "Hidden host mount failed", [session.root, session.capability]);
+      log(session, "hostApplyFailed", "error", {
+        revision: pending.identity.revision,
+        bundleHash: pending.identity.bundleHash,
+        message: session.mountError,
+      });
+      if (session.renderer?.readyState === WebSocket.OPEN) {
+        session.renderer.send(JSON.stringify({ type: "fatal", error: "Hidden host failed to mount the canonical bundle" }));
+        session.renderer.close(1011, "Hidden host mount failed");
+      }
+      return;
+    }
+    session.hostApplied = pending.identity;
+    session.snapshot = pending.snapshot;
+    session.pendingUpdate = null;
+    session.mountError = null;
+    log(session, "hostApplied", "info", pending.identity);
+    if (session.renderer?.readyState === WebSocket.OPEN) {
+      session.renderer.send(JSON.stringify({ type: "bundle", snapshot: session.snapshot }));
+    }
+  }).catch((error) => log(session, "hostApplyRelayFailed", "error", {
+    message: error instanceof Error ? error.message : String(error),
+  }));
+}
+
+export function resetBrowserCompanionHostEgressAudit(): void {
+  pendingHostEgress = [];
+}
+
+export function recordBrowserCompanionHostEgress(url: string): void {
+  let target = "invalid-url";
+  try { target = new URL(url).origin; } catch { /* redacted semantic target only */ }
+  if (current) {
+    current.egressAttempts++;
+    log(current, "host.network.egress.blocked", "error", { target });
+  } else if (pendingHostEgress.length < 100) pendingHostEgress.push(target);
+}
+
+export function configureBrowserCompanion(
+  window: () => BrowserWindow | null,
+  prepare: () => Promise<void>,
+  release: () => Promise<void>,
+): void {
+  getHostWindow = window;
+  prepareHost = prepare;
+  releaseHost = release;
+}
+
+function log(session: Session, event: string, level: BrowserCompanionLog["level"] = "info", data?: Record<string, unknown>): void {
+  const safe = data
+    ? JSON.parse(redactCompanionLog(JSON.stringify(data), [session.root, session.capability])) as Record<string, unknown>
+    : undefined;
+  session.logs.push({ seq: ++session.logSequence, ts: Date.now(), level, event, ...(safe ? { data: safe } : {}) });
+  if (session.logs.length > MAX_LOGS) session.logs.shift();
+}
+
+function status(session: Session | null): BrowserCompanionStatus {
+  if (!session) return { active: false, hostLocalOnly: hostPrepared };
+  const connected = session.renderer?.readyState === WebSocket.OPEN;
+  const canonicalReady =
+    session.hostApplied.sessionId === session.canonicalCompiled.sessionId &&
+    session.hostApplied.revision === session.canonicalCompiled.revision &&
+    session.hostApplied.bundleHash === session.canonicalCompiled.bundleHash;
+  const browserReady =
+    !!session.browserApplied &&
+    session.browserApplied.sessionId === session.canonicalCompiled.sessionId &&
+    session.browserApplied.revision === session.canonicalCompiled.revision &&
+    session.browserApplied.bundleHash === session.canonicalCompiled.bundleHash;
+  const lifecycle = session.mountError
+    ? "failed" as const
+    : !connected
+      ? session.rendererEverConnected || session.capabilityConsumed
+        ? "disconnected-fresh-session-required" as const
+        : "awaiting-renderer" as const
+      : !canonicalReady
+        ? "awaiting-host-apply" as const
+        : !browserReady
+          ? "awaiting-browser-apply" as const
+          : "ready" as const;
+  return {
+    active: true,
+    sessionId: session.id,
+    origin: session.origin,
+    appVersion: app.getVersion(),
+    buildHash: session.buildHash,
+    protocol: COMPANION_PROTOCOL_VERSION,
+    project: {
+      id: session.project.id,
+      name: session.project.name,
+      displayName: session.project.displayName,
+    },
+    rendererConnected: connected,
+    hostWindowVisible: getHostWindow()?.isVisible() ?? false,
+    hostWindowMode: session.hostWindowMode,
+    hostLocalOnly: true,
+    revision: session.revision,
+    bundleHash: session.canonicalCompiled.bundleHash,
+    canonicalCompiled: session.canonicalCompiled,
+    hostApplied: session.hostApplied,
+    ...(session.browserApplied ? { browserApplied: session.browserApplied } : {}),
+    lifecycle,
+    ...(session.mountError ? { mountError: session.mountError } : {}),
+    egressAttempts: session.egressAttempts,
+  };
+}
+
+function reply(data: BrowserCompanionStart | BrowserCompanionStatus | BrowserCompanionLog[]): BrowserCompanionReply {
+  return { ok: true, data };
+}
+
+export async function handleBrowserCompanionCommand(command: BrowserCompanionCommand): Promise<BrowserCompanionReply> {
+  try {
+    if (command.action === "prepare") {
+      await stopBrowserCompanion();
+      try {
+        await prepareHost();
+        hostPrepared = true;
+      } catch (error) {
+        await releaseHost();
+        throw error;
+      }
+      preparedSession = { root: command.projectDir, sessionId: randomUUID() };
+      canonicalCapture.arm(
+        command.projectDir,
+        30_000,
+        "The hidden Electron renderer did not publish a canonical project bundle in time",
+      );
+      hostApplicationCapture.arm(
+        command.projectDir,
+        30_000,
+        "The hidden Electron renderer did not acknowledge the canonical project mount in time",
+      );
+      return reply(status(current));
+    }
+    if (command.action === "status") return reply(status(current));
+    if (command.action === "logs") return reply(current?.logs ?? []);
+    if (command.action === "stop") {
+      await stopBrowserCompanion();
+      return reply(status(current));
+    }
+    try {
+      return reply(await startBrowserCompanion(command.projectDir, command.projectId));
+    } catch (error) {
+      await stopBrowserCompanion();
+      throw error;
+    }
+  } catch (error) {
+    return { ok: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+async function startBrowserCompanion(root: string, expectedProjectId?: string): Promise<BrowserCompanionStart> {
+  await stopBrowserCompanion(true);
+
+  const hostWindow = getHostWindow();
+  if (!hostWindow || hostWindow.isDestroyed()) {
+    canonicalCapture.cancel();
+    throw new Error("The Electron renderer host is not available");
+  }
+
+  // The hidden renderer opens and compiles first through the unchanged
+  // PROJECTS_COMPILE path. Main records that exact result and only relays it;
+  // the companion never owns a second compiler or project-write loop.
+  let canonical: CanonicalBundle;
+  let hostApplication: HostApplication;
+  try {
+    [canonical, hostApplication] = await Promise.all([
+      canonicalCapture.take(root),
+      hostApplicationCapture.take(root),
+    ]);
+  } catch (error) {
+    canonicalCapture.cancel();
+    hostApplicationCapture.cancel();
+    throw error;
+  }
+  const bundle = canonical.bundle;
+  if (!bundle.ok) throw new Error("The hidden Electron renderer could not compile the selected project");
+  if (
+    !hostApplication.ok ||
+    hostApplication.sessionId !== canonical.identity.sessionId ||
+    hostApplication.revision !== canonical.identity.revision ||
+    hostApplication.bundleHash !== canonical.bundleHash
+  ) {
+    throw new Error("The hidden Electron renderer did not mount the exact canonical project bundle");
+  }
+  const project = await getProject(root);
+  if (!project?.id) throw new Error("The Electron host could not establish a project identity");
+  if (expectedProjectId && project.id !== expectedProjectId) throw new Error("The requested project does not match the Electron-owned project identity");
+
+  const webRoot = join(app.getAppPath(), "web");
+  const buildHash = await hashWebBuild(webRoot);
+  const capability = randomBytes(32).toString("base64url");
+  const id = canonical.identity.sessionId;
+
+  let expectedOrigin = "";
+  const http = createServer((request, response) => serveWeb(webRoot, () => expectedOrigin, request, response));
+  const websocket = new WebSocketServer({ noServer: true, maxPayload: MAX_RENDERER_MESSAGE });
+  const provisional: Session = {
+    id, root, project, capability, buildHash, origin: "", revision: 1,
+    canonicalCompiled: canonical.identity,
+    hostApplied: canonical.identity,
+    browserApplied: null, pendingUpdate: null, mountError: null,
+    snapshot: null as unknown as CompanionSnapshot,
+    http, websocket, renderer: null, rendererEverConnected: false, capabilityConsumed: false, watcher: null,
+    stopped: false, canonicalGeneration: canonical.generation, updateChain: Promise.resolve(),
+    egressAttempts: pendingHostEgress.length, logs: [], logSequence: 0,
+    dockWasVisible: app.dock?.isVisible() ?? false,
+    hostWindowMode: "hidden",
+  };
+
+  provisional.snapshot = await makeSnapshot(provisional, bundle, canonical.bundleHash, 1);
+  bindWebSocket(provisional);
+  http.on("upgrade", (request, socket, head) => {
+    const url = new URL(request.url ?? "/", expectedOrigin || "http://127.0.0.1");
+    if (
+      url.pathname !== "/__companion/session" ||
+      request.headers.host !== new URL(expectedOrigin).host ||
+      !exactCompanionOrigin(request.headers.origin, expectedOrigin)
+    ) {
+      socket.write("HTTP/1.1 403 Forbidden\r\nConnection: close\r\n\r\n");
+      socket.destroy();
+      return;
+    }
+    websocket.handleUpgrade(request, socket, head, (client) => websocket.emit("connection", client));
+  });
+
+  await new Promise<void>((resolveListen, reject) => {
+    http.once("error", reject);
+    http.listen(0, "127.0.0.1", () => resolveListen());
+  });
+  const address = http.address();
+  if (!address || typeof address === "string") throw new Error("Companion did not receive a TCP port");
+  expectedOrigin = `http://127.0.0.1:${address.port}`;
+  provisional.origin = expectedOrigin;
+  provisional.snapshot = await makeSnapshot(provisional, bundle, canonical.bundleHash, 1);
+  try {
+    provisional.watcher = watch(root, { recursive: true }, (_event, filename) => {
+      if (!filename) return;
+      const path = filename.replace(/\\/g, "/");
+      if (path === "node_modules" || path.startsWith("node_modules/") || path === ".diffusion" || path.startsWith(".diffusion/")) return;
+      log(provisional, "source.changed", "info", { kind: extname(path).slice(1) || "unknown" });
+    });
+  } catch (error) {
+    await new Promise<void>((resolveClose) => http.close(() => resolveClose()));
+    websocket.close();
+    throw error;
+  }
+  provisional.watcher?.on("error", () => log(provisional, "source.watch.failed", "error"));
+  current = provisional;
+  preparedSession = null;
+  log(provisional, "canonicalCompiled", "info", { ...canonical.identity, durationMs: canonical.durationMs });
+  log(provisional, "hostApplied", "info", canonical.identity);
+  log(provisional, "companion.started", "info", { projectId: project.id, buildHash, protocol: COMPANION_PROTOCOL_VERSION });
+  for (const target of pendingHostEgress) log(provisional, "host.network.egress.blocked", "error", { target });
+  pendingHostEgress = [];
+
+  hostWindow.hide();
+  if (hostWindow.isVisible()) {
+    hostWindow.minimize();
+    provisional.hostWindowMode = "minimized-fallback";
+  }
+  app.dock?.hide();
+  log(provisional, provisional.hostWindowMode === "hidden" ? "host.hidden" : "host.minimized-fallback", "info", {
+    visible: hostWindow.isVisible(),
+  });
+
+  const url = `${expectedOrigin}/projects/${encodeURIComponent(project.id)}?companion-shell=1#companion=${capability}&build=${buildHash}`;
+  return {
+    ...status(provisional),
+    active: true,
+    url,
+    capabilities: { ...CAPABILITIES, trustedProjectCode: true },
+    humanStep:
+      "Open url in the Codex built-in browser. Phase A supports code-native projects only; local media is fail-closed and unavailable.",
+  };
+}
+
+async function hashWebBuild(root: string): Promise<string> {
+  const hash = createHash("sha256");
+  const visit = async (dir: string): Promise<void> => {
+    const entries = await readdir(dir, { withFileTypes: true });
+    entries.sort((left, right) => left.name.localeCompare(right.name));
+    for (const entry of entries) {
+      const path = join(dir, entry.name);
+      if (entry.isDirectory()) await visit(path);
+      else if (entry.isFile()) {
+        hash.update(path.slice(root.length).replace(/\\/g, "/"));
+        hash.update(await readFile(path));
+      }
+    }
+  };
+  await visit(root);
+  return hash.digest("hex").slice(0, 24);
+}
+
+async function makeSnapshot(
+  session: Session,
+  bundle: CompileResult,
+  compiledBundleHash: string,
+  revision: number,
+): Promise<CompanionSnapshot> {
+  const safeBundle = bundle.ok
+    ? bundle
+    : { ok: false as const, error: redactCompanionLog(bundle.error, [session.root, session.capability]) };
+  return {
+    protocol: COMPANION_PROTOCOL_VERSION,
+    schemaHash: COMPANION_SCHEMA_HASH,
+    appVersion: app.getVersion(),
+    buildHash: session.buildHash,
+    sessionId: session.id,
+    revision,
+    bundleHash: compiledBundleHash,
+    project: { id: session.project.id, name: session.project.name, displayName: session.project.displayName },
+    bundle: safeBundle,
+    capabilities: CAPABILITIES,
+  };
+}
+
+function bindWebSocket(session: Session): void {
+  session.websocket.on("connection", (client) => {
+    let authenticated = false;
+    const timer = setTimeout(() => client.close(1008, "Authentication timeout"), 10_000);
+    client.on("message", (raw) => {
+      let message: Record<string, unknown>;
+      try { message = JSON.parse(raw.toString()) as Record<string, unknown>; }
+      catch { client.close(1007, "Malformed message"); return; }
+
+      if (!authenticated) {
+        const valid = isCompanionAuthentication(message, {
+          capability: session.capability,
+          buildHash: session.buildHash,
+          protocol: COMPANION_PROTOCOL_VERSION,
+          schemaHash: COMPANION_SCHEMA_HASH,
+          appVersion: app.getVersion(),
+          capabilityConsumed: session.capabilityConsumed,
+          rendererConnected: session.renderer?.readyState === WebSocket.OPEN,
+        });
+        if (!valid) {
+          log(session, "renderer.authentication.refused", "warning");
+          client.send(JSON.stringify({ type: "fatal", error: "Companion protocol/build authentication mismatch" }));
+          client.close(1008, "Authentication refused");
+          return;
+        }
+        clearTimeout(timer);
+        authenticated = true;
+        session.capabilityConsumed = true;
+        session.renderer = client;
+        session.rendererEverConnected = true;
+        client.send(JSON.stringify({ type: "authenticated", snapshot: session.snapshot }));
+        log(session, "renderer.authenticated");
+        return;
+      }
+
+      if (client !== session.renderer) { client.close(1008, "Not active renderer"); return; }
+      if (message.type === "applied") {
+        const acknowledgement = message.acknowledgement as Partial<{
+          sessionId: string;
+          revision: number;
+          bundleHash: string;
+          ok: boolean;
+          error: string;
+        }> | undefined;
+        const exact =
+          acknowledgement?.sessionId === session.id &&
+          Number.isInteger(acknowledgement.revision) &&
+          acknowledgement?.revision === session.hostApplied.revision &&
+          acknowledgement?.bundleHash === session.hostApplied.bundleHash &&
+          typeof acknowledgement?.ok === "boolean";
+        if (!exact) {
+          log(session, "browserApplyRefused", "warning");
+          return;
+        }
+        if (!acknowledgement.ok) {
+          session.mountError = redactCompanionLog(
+            typeof acknowledgement.error === "string" ? acknowledgement.error : "Browser mount failed",
+            [session.root, session.capability],
+          );
+          log(session, "browserApplyFailed", "error", {
+            revision: acknowledgement.revision,
+            bundleHash: acknowledgement.bundleHash,
+            message: session.mountError,
+          });
+          client.send(JSON.stringify({ type: "fatal", error: "Browser failed to mount the canonical bundle" }));
+          client.close(1011, "Browser mount failed");
+          return;
+        }
+        const alreadyApplied = session.browserApplied;
+        if (
+          alreadyApplied?.sessionId === acknowledgement.sessionId &&
+          alreadyApplied?.revision === acknowledgement.revision &&
+          alreadyApplied?.bundleHash === acknowledgement.bundleHash
+        ) return;
+        session.browserApplied = {
+          sessionId: acknowledgement.sessionId!,
+          revision: acknowledgement.revision!,
+          bundleHash: acknowledgement.bundleHash!,
+        };
+        session.mountError = null;
+        log(session, "browserApplied", "info", session.browserApplied);
+      } else if (message.type === "semantic" && isCompanionSemantic(message.event)) {
+        const data = message.data as { time?: unknown } | undefined;
+        const time = data?.time;
+        if (typeof time !== "number" || !Number.isFinite(time) || time < 0) {
+          log(session, "renderer.semantic.refused", "warning");
+          return;
+        }
+        log(session, message.event, "info", { time: Math.round(time * 1000) / 1000 });
+      } else if (message.type === "renderer-log") {
+        const level = ["debug", "info", "warning", "error"].includes(String(message.level))
+          ? message.level as BrowserCompanionLog["level"] : "info";
+        log(session, "renderer.log", level, {
+          source: String(message.source ?? "renderer").slice(0, 80),
+          message: redactCompanionLog(String(message.message ?? "").slice(0, 4000), [session.root, session.capability]),
+        });
+      } else if (message.type === "outbound-attempt") {
+        session.egressAttempts++;
+        log(session, "network.egress.blocked", "error", {
+          kind: String(message.kind ?? "unknown").slice(0, 80),
+          target: String(message.target ?? "unknown").slice(0, 256),
+        });
+      } else {
+        log(session, "renderer.message.refused", "warning", { type: String(message.type) });
+      }
+    });
+    client.on("close", () => {
+      clearTimeout(timer);
+      if (session.renderer === client) session.renderer = null;
+      log(session, "renderer.disconnected");
+    });
+  });
+}
+
+function headers(response: ServerResponse, origin: string): void {
+  response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+  response.setHeader("Cross-Origin-Embedder-Policy", "credentialless");
+  response.setHeader("Cross-Origin-Resource-Policy", "same-origin");
+  response.setHeader("Referrer-Policy", "no-referrer");
+  response.setHeader("X-Content-Type-Options", "nosniff");
+  response.setHeader("Cache-Control", "no-store");
+  response.setHeader(
+    "Content-Security-Policy",
+    // Reconciler/TypeGPU and the explicitly trusted compiled project use
+    // new Function. This renderer is capability-limited, but project code is
+    // not a sandbox; unsafe-eval is therefore an explicit trust declaration.
+    "default-src 'self' blob: data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; " +
+      "img-src 'self' blob: data:; media-src 'self' blob: data:; font-src 'self' blob: data:; " +
+      `connect-src 'self' ${origin.replace(/^http:/, "ws:")}; worker-src 'self' blob:; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'`,
+  );
+}
+
+const MIME: Record<string, string> = {
+  ".html": "text/html; charset=utf-8", ".js": "text/javascript; charset=utf-8", ".css": "text/css; charset=utf-8",
+  ".json": "application/json", ".svg": "image/svg+xml", ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
+  ".woff": "font/woff", ".woff2": "font/woff2", ".wasm": "application/wasm", ".map": "application/json",
+};
+
+function serveWeb(webRoot: string, origin: () => string, request: IncomingMessage, response: ServerResponse): void {
+  const expected = origin();
+  headers(response, expected);
+  if (!expected || request.headers.host !== new URL(expected).host || (request.headers.origin !== undefined && request.headers.origin !== expected)) {
+    response.writeHead(421).end("Misdirected request");
+    return;
+  }
+  if (request.method !== "GET" && request.method !== "HEAD") {
+    response.setHeader("Allow", "GET, HEAD");
+    response.writeHead(405).end();
+    return;
+  }
+  const url = new URL(request.url ?? "/", expected);
+  if (url.pathname === "/__companion/health") {
+    response.setHeader("Content-Type", "application/json");
+    response.end(JSON.stringify({ ok: true, active: true }));
+    return;
+  }
+  let decoded: string;
+  try { decoded = decodeURIComponent(url.pathname); } catch { response.writeHead(400).end(); return; }
+  const requested = normalize(decoded).replace(/^[/\\]+/, "");
+  void (async () => {
+    const candidates = [requested || "index.html"];
+    // The packaged desktop build uses base=./. At /projects/:id its relative
+    // assets resolve below /projects/, so map that route-relative prefix back
+    // to the exact same build root instead of producing a second web build.
+    if (requested.startsWith("projects/")) candidates.push(requested.slice("projects/".length));
+    for (const candidate of candidates) {
+      if (await sendStatic(webRoot, candidate, request, response)) return;
+    }
+    if (extname(requested)) { response.writeHead(404).end(); return; }
+    if (!(await sendStatic(webRoot, "index.html", request, response))) response.writeHead(404).end();
+  })().catch(() => {
+    if (!response.headersSent) response.writeHead(500).end();
+    else response.destroy();
+  });
+}
+
+async function sendStatic(root: string, requested: string, request: IncomingMessage, response: ServerResponse): Promise<boolean> {
+  const path = resolve(root, requested);
+  if (!containedWebPath(root, path)) return false;
+  let info;
+  try { info = await stat(path); } catch { return false; }
+  if (!info.isFile()) return false;
+  response.setHeader("Content-Type", MIME[extname(path).toLowerCase()] ?? "application/octet-stream");
+  response.setHeader("Content-Length", info.size);
+  if (request.method === "HEAD") response.end();
+  else createReadStream(path).pipe(response);
+  return true;
+}
+
+export async function stopBrowserCompanion(preservePreparedCapture = false): Promise<void> {
+  if (!preservePreparedCapture) {
+    canonicalCapture.cancel();
+    hostApplicationCapture.cancel();
+    preparedSession = null;
+  }
+  const session = current;
+  if (!session) {
+    if (!preservePreparedCapture && hostPrepared) {
+      hostPrepared = false;
+      await releaseHost();
+    }
+    return;
+  }
+  current = null;
+  session.stopped = true;
+  session.watcher?.close();
+  if (session.renderer?.readyState === WebSocket.OPEN) {
+    session.renderer.send(JSON.stringify({ type: "stopped", sessionId: session.id }));
+    session.renderer.close(1001, "Companion stopped");
+  }
+  for (const client of session.websocket.clients) client.terminate();
+  await new Promise<void>((resolveClose) => session.http.close(() => resolveClose()));
+  session.websocket.close();
+  if (session.dockWasVisible) await app.dock?.show();
+  if (!preservePreparedCapture && hostPrepared) {
+    hostPrepared = false;
+    await releaseHost();
+  }
+}
diff --git a/apps/desktop/src/cli-server.ts b/apps/desktop/src/cli-server.ts
index c78cf301..c2325430 100644
--- a/apps/desktop/src/cli-server.ts
+++ b/apps/desktop/src/cli-server.ts
@@ -6,10 +6,13 @@ import { existsSync, unlinkSync } from "node:fs";
 import { createServer } from "node:net";
 import type { Server, Socket } from "node:net";
 import { app, BrowserWindow } from "electron";
-import { CLI_WIRE, SOCKET_PATH } from "@diffusionstudio/cli/protocol";
+import { CLI_WIRE, SOCKET_PATH, isBrowserCompanionCommand } from "@diffusionstudio/cli/protocol";
 import type { CliHandshake, CliHandshakeReply } from "@diffusionstudio/cli/protocol";
 import { mainBridge } from "./main-manager";
 import { MAIN_CHANNELS } from "./main-channels";
+import { handleBrowserCompanionCommand, stopBrowserCompanion } from "./browser-companion";
+
+const MAX_CONTROL_FRAME_BYTES = 64 * 1024;
 
 let cliServer: Server | null = null;
 let currentWindow: BrowserWindow | null = null;
@@ -105,26 +108,49 @@ export function startCliServer() {
   bindWindowLifecycle();
 
   cliServer = createServer({ allowHalfOpen: true }, (sock: Socket) => {
-    enableHeadless();
     let buf = "";
+    let oversized = false;
     sock.setEncoding("utf8");
     sock.setTimeout(60000, () => sock.destroy());
     sock.on("data", (chunk) => {
+      if (oversized) return;
       buf += chunk;
+      if (Buffer.byteLength(buf, "utf8") > MAX_CONTROL_FRAME_BYTES) {
+        oversized = true;
+        buf = "";
+      }
     });
     sock.on("end", async () => {
       sock.setTimeout(0);
-      let handshake: CliHandshake;
+      if (oversized) {
+        sock.end(JSON.stringify({ ok: false, error: "Control frame exceeds 64 KiB" }));
+        return;
+      }
+      let value: unknown;
       try {
-        handshake = JSON.parse(buf) as CliHandshake;
-        if (typeof handshake.port !== "number" || typeof handshake.token !== "string") {
-          throw new Error("Malformed handshake");
-        }
+        value = JSON.parse(buf) as unknown;
       } catch {
+        sock.end(JSON.stringify({ ok: false, error: "Invalid control message" }));
+        return;
+      }
+
+      if (isBrowserCompanionCommand(value)) {
+        const response = await handleBrowserCompanionCommand(value);
+        if (!sock.destroyed) sock.end(JSON.stringify(response));
+        return;
+      }
+
+      const handshake = value as Partial<CliHandshake>;
+      if (
+        typeof handshake.port !== "number" || !Number.isInteger(handshake.port) ||
+        handshake.port < 1 || handshake.port > 65535 ||
+        typeof handshake.token !== "string" || handshake.token.length < 16 || handshake.token.length > 256
+      ) {
         sock.end(JSON.stringify({ ok: false, error: "Invalid handshake" }));
         return;
       }
-      await deliverHandshake(handshake, sock);
+      enableHeadless();
+      await deliverHandshake(handshake as CliHandshake, sock);
     });
     sock.on("error", () => {
       // Client hung up; nothing to do.
@@ -139,6 +165,7 @@ export function startCliServer() {
 }
 
 export function stopCliServer() {
+  void stopBrowserCompanion();
   if (!cliServer) return;
   cliServer.close();
   cliServer = null;
diff --git a/apps/desktop/src/main-channels.ts b/apps/desktop/src/main-channels.ts
index 5df8bb83..bc6b1d36 100644
--- a/apps/desktop/src/main-channels.ts
+++ b/apps/desktop/src/main-channels.ts
@@ -55,6 +55,7 @@ export const MAIN_CHANNELS = {
   PROJECTS_DUPLICATE: "projects:duplicate",
   PROJECTS_DELETE: "projects:delete",
   PROJECTS_COMPILE: "projects:compile",
+  PROJECTS_BUNDLE_APPLIED: "projects:bundle-applied",
   PROJECTS_WRITE: "projects:write",
   PROJECTS_WATCH: "projects:watch",
   PROJECTS_UNWATCH: "projects:unwatch",
@@ -105,6 +106,17 @@ export type CompileResult =
   | { ok: true; code: string }
   | { ok: false; error: string };
 
+/** Exact identity assigned by main to a companion editor-surface mount. */
+export type CompanionMountIdentity = {
+  sessionId: string;
+  revision: number;
+  bundleHash: string;
+};
+
+export type CompileResponse = CompileResult & {
+  companionMount?: CompanionMountIdentity;
+};
+
 // Outcome of linking the bundled dapi CLI into PATH. "cancelled" means the
 // user dismissed the macOS admin prompt — not an error, not installed.
 export type CliInstallResult =
@@ -181,7 +193,14 @@ export type MainRequestMap = {
   };
   [MAIN_CHANNELS.PROJECTS_DUPLICATE]: { request: { dir: string }; response: ProjectInfo };
   [MAIN_CHANNELS.PROJECTS_DELETE]: { request: { dir: string }; response: void };
-  [MAIN_CHANNELS.PROJECTS_COMPILE]: { request: { dir: string }; response: CompileResult };
+  [MAIN_CHANNELS.PROJECTS_COMPILE]: {
+    request: { dir: string; companionSurfaceMount?: boolean };
+    response: CompileResponse;
+  };
+  [MAIN_CHANNELS.PROJECTS_BUNDLE_APPLIED]: {
+    request: { dir: string; sessionId: string; revision: number; bundleHash: string; ok: boolean; error?: string };
+    response: void;
+  };
   [MAIN_CHANNELS.PROJECTS_WRITE]: {
     request: { dir: string; edits: SourceEdit[] };
     response: WriteResult;
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index b965b054..33855900 100644
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -43,6 +43,15 @@ import {
 } from "./projects";
 import type { DeepLinkChannel } from "./main-channels";
 import type { LogEntry } from "@diffusionstudio/cli/protocol";
+import {
+  acknowledgeBrowserCompanionHostBundle,
+  configureBrowserCompanion,
+  publishBrowserCompanionBundle,
+  recordBrowserCompanionHostEgress,
+  resetBrowserCompanionHostEgressAudit,
+  stopBrowserCompanion,
+} from "./browser-companion";
+import { isLoopbackCompanionUrl } from "./browser-companion-security";
 
 const DEV_URL = "http://localhost:5173";
 const AUTH_PROTOCOL = "diffusion";
@@ -86,6 +95,65 @@ if (app.isPackaged && !process.argv.includes("--hidden")) {
 const openWrites = new Map<string, { handle: FileHandle; path: string }>();
 
 let mainWindow: BrowserWindow | null = null;
+let browserCompanionHostMode = isBrowserCompanionHostLaunch(process.argv);
+let browserCompanionRestoreUrl: string | null = null;
+configureBrowserCompanion(
+  () => mainWindow,
+  async () => {
+    resetBrowserCompanionHostEgressAudit();
+    installBrowserCompanionHostNetworkGuard();
+    if (browserCompanionHostMode && mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.hide();
+      await loadMainWindow(true);
+      return;
+    }
+    browserCompanionRestoreUrl = mainWindow && !mainWindow.isDestroyed()
+      ? mainWindow.webContents.getURL() || null
+      : null;
+    browserCompanionHostMode = true;
+    if (!mainWindow || mainWindow.isDestroyed()) {
+      createWindow(false);
+      return;
+    }
+    mainWindow.hide();
+    await loadMainWindow(true);
+  },
+  async () => {
+    const currentHash = mainWindow && !mainWindow.isDestroyed()
+      ? new URL(mainWindow.webContents.getURL()).hash || "#/"
+      : "#/";
+    browserCompanionHostMode = false;
+    uninstallBrowserCompanionHostNetworkGuard();
+    if (!mainWindow || mainWindow.isDestroyed()) return;
+    mainWindow.hide();
+    const restoreUrl = browserCompanionRestoreUrl;
+    browserCompanionRestoreUrl = null;
+    if (restoreUrl) await mainWindow.loadURL(restoreUrl);
+    // A process launched directly as a hidden companion has no pre-companion
+    // URL to restore. Keep its currently open project route while reloading
+    // without the local-only host identity so DAPI stays on that project.
+    else await loadMainWindow(false, currentHash);
+    mainWindow.hide();
+  },
+);
+
+let companionNetworkGuardInstalled = false;
+
+function installBrowserCompanionHostNetworkGuard(): void {
+  if (companionNetworkGuardInstalled) return;
+  companionNetworkGuardInstalled = true;
+  session.defaultSession.webRequest.onBeforeRequest({ urls: ["*://*/*"] }, (details, callback) => {
+    const loopback = isLoopbackCompanionUrl(details.url);
+    if (!loopback) recordBrowserCompanionHostEgress(details.url);
+    callback({ cancel: !loopback });
+  });
+}
+
+function uninstallBrowserCompanionHostNetworkGuard(): void {
+  if (!companionNetworkGuardInstalled) return;
+  session.defaultSession.webRequest.onBeforeRequest(null);
+  companionNetworkGuardInstalled = false;
+}
 
 // Deep links that arrived before the renderer could take them, keyed by the
 // channel they belong to so auth and checkout never drain each other's link.
@@ -122,6 +190,10 @@ function isHiddenLaunch(argv: string[]): boolean {
   return argv.includes("--hidden");
 }
 
+function isBrowserCompanionHostLaunch(argv: string[]): boolean {
+  return argv.includes("--browser-companion-host");
+}
+
 // diffusion://auth/callback → auth, diffusion://checkout/callback → checkout.
 function deepLinkChannel(url: string): DeepLinkChannel | null {
   let host: string;
@@ -188,6 +260,7 @@ function createWindow(show = true) {
       : { backgroundColor: "#1c1c1c" }),
     webPreferences: {
       preload: join(app.getAppPath(), "dist", "preload.js"),
+      additionalArguments: browserCompanionHostMode ? ["--browser-companion-host"] : [],
     },
   });
 
@@ -222,11 +295,21 @@ function createWindow(show = true) {
     mainWindow = null;
   });
 
-  if (!app.isPackaged) {
-    mainWindow.loadURL(DEV_URL);
-  } else {
-    mainWindow.loadFile(join(app.getAppPath(), "web", "index.html"));
-  }
+  void loadMainWindow();
+}
+
+async function loadMainWindow(resetRoute = false, routeHash?: string): Promise<void> {
+  if (!mainWindow || mainWindow.isDestroyed()) return;
+  const query = browserCompanionHostMode ? "?browser-companion-host=1" : "";
+  const hash = routeHash?.replace(/^#/, "") || (resetRoute ? "/" : undefined);
+  // Companion mode uses the packaged apps/web output even in development so
+  // the hidden host and ordinary browser execute the exact same files whose
+  // complete tree hash is exchanged during authentication.
+  if (!app.isPackaged && !browserCompanionHostMode) await mainWindow.loadURL(`${DEV_URL}${query}${hash ? `#${hash}` : ""}`);
+  else await mainWindow.loadFile(join(app.getAppPath(), "web", "index.html"), {
+    query: browserCompanionHostMode ? { "browser-companion-host": "1" } : {},
+    ...(hash ? { hash } : {}),
+  });
 }
 
 if (process.defaultApp && process.argv.length >= 2) {
@@ -243,8 +326,17 @@ if (app.requestSingleInstanceLock()) {
     if (url) deliverDeepLink(url);
 
     const hidden = isHiddenLaunch(argv);
+    if (isBrowserCompanionHostLaunch(argv) && !browserCompanionHostMode) {
+      browserCompanionHostMode = true;
+      if (mainWindow && !mainWindow.isDestroyed()) {
+        mainWindow.hide();
+        void loadMainWindow();
+      } else createWindow(false);
+      return;
+    }
     if (mainWindow && !mainWindow.isDestroyed()) {
       if (hidden) return;
+      app.dock?.show();
       if (mainWindow.isMinimized()) mainWindow.restore();
       mainWindow.show();
       mainWindow.focus();
@@ -291,7 +383,33 @@ if (app.requestSingleInstanceLock()) {
   mainBridge.handle(MAIN_CHANNELS.PROJECTS_RENAME, ({ dir, displayName }) => renameProject(dir, displayName));
   mainBridge.handle(MAIN_CHANNELS.PROJECTS_DUPLICATE, ({ dir }) => duplicateProject(dir));
   mainBridge.handle(MAIN_CHANNELS.PROJECTS_DELETE, ({ dir }) => deleteProject(dir));
-  mainBridge.handle(MAIN_CHANNELS.PROJECTS_COMPILE, ({ dir }) => compileProject(dir));
+  mainBridge.handle(MAIN_CHANNELS.PROJECTS_COMPILE, async ({ dir, companionSurfaceMount }) => {
+    const started = performance.now();
+    const bundle = await compileProject(dir);
+    if (!companionSurfaceMount) return bundle;
+    const companionMount = await publishBrowserCompanionBundle(
+      dir,
+      bundle,
+      Math.round(performance.now() - started),
+    );
+    return companionMount ? { ...bundle, companionMount } : bundle;
+  });
+  mainBridge.handle(MAIN_CHANNELS.PROJECTS_BUNDLE_APPLIED, ({ dir, sessionId, revision, bundleHash, ok, error }) => {
+    if (
+      !browserCompanionHostMode ||
+      !/^[0-9a-f-]{36}$/.test(sessionId) ||
+      !Number.isInteger(revision) ||
+      revision < 1 ||
+      !/^[a-f0-9]{64}$/.test(bundleHash)
+    ) return;
+    acknowledgeBrowserCompanionHostBundle(dir, {
+      sessionId,
+      revision,
+      bundleHash,
+      ok,
+      ...(error ? { error: error.slice(0, 4000) } : {}),
+    });
+  });
   mainBridge.handle(MAIN_CHANNELS.PROJECTS_WRITE, ({ dir, edits }) => writeProject(dir, edits));
   mainBridge.handle(MAIN_CHANNELS.PROJECTS_WATCH, ({ dir }, event) =>
     watchProject(BrowserWindow.fromWebContents(event.sender), dir),
@@ -346,6 +464,7 @@ if (app.requestSingleInstanceLock()) {
   });
 
   app.whenReady().then(() => {
+    if (browserCompanionHostMode) installBrowserCompanionHostNetworkGuard();
     if (!app.isPackaged && process.platform === "darwin") {
       const devIcon = nativeImage.createFromPath(join(app.getAppPath(), "assets", "icon-dev.png"));
       if (!devIcon.isEmpty()) app.dock?.setIcon(devIcon);
@@ -361,12 +480,13 @@ if (app.requestSingleInstanceLock()) {
 
     startCliServer();
     healSkillsLinks();
-    trackInstall();
+    if (!browserCompanionHostMode) trackInstall();
     createWindow(!isHiddenLaunch(process.argv));
   });
 
   app.on("before-quit", () => {
     unwatchAll();
+    void stopBrowserCompanion();
     stopCliServer();
   });
 
@@ -377,6 +497,7 @@ if (app.requestSingleInstanceLock()) {
   });
 
   app.on("activate", () => {
+    app.dock?.show();
     if (!mainWindow || mainWindow.isDestroyed()) {
       createWindow();
       return;
diff --git a/apps/desktop/src/preload.ts b/apps/desktop/src/preload.ts
index 688361ec..7fadc36d 100644
--- a/apps/desktop/src/preload.ts
+++ b/apps/desktop/src/preload.ts
@@ -17,6 +17,7 @@ const ALLOWED_MAIN_TO_RENDERER: ReadonlySet<string> = new Set([
 ]);
 
 contextBridge.exposeInMainWorld("desktop", {
+  browserCompanionHost: process.argv.includes("--browser-companion-host"),
   getPathForFile,
   platform: process.platform,
   send,
diff --git a/apps/desktop/tests/browser-companion-capture.test.ts b/apps/desktop/tests/browser-companion-capture.test.ts
new file mode 100644
index 00000000..8763fcb8
--- /dev/null
+++ b/apps/desktop/tests/browser-companion-capture.test.ts
@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { OneShotCapture } from "../src/browser-companion-capture.ts";
+
+test("inactive ordinary desktop publications retain no bundle", () => {
+  const capture = new OneShotCapture<{ code: string }>();
+  assert.equal(capture.publish("/project", { code: "ordinary desktop compile" }), false);
+  assert.deepEqual(capture.inspect(), { armed: false, retainedValues: 0 });
+});
+
+test("start, stop, and same-project restart each consume a fresh bounded capture", async () => {
+  const capture = new OneShotCapture<{ code: string }>();
+
+  capture.arm("/project", 1_000, "timed out");
+  assert.equal(capture.publish("/project", { code: "first compile" }), true);
+  assert.deepEqual(await capture.take("/project"), { code: "first compile" });
+  assert.deepEqual(capture.inspect(), { armed: false, retainedValues: 0 });
+
+  // A stopped companion leaves no reusable result. The identical project
+  // must be explicitly armed and publish again for the next start.
+  assert.equal(capture.publish("/project", { code: "compile while stopped" }), false);
+  capture.arm("/project", 1_000, "timed out");
+  const restarted = capture.take("/project");
+  assert.equal(capture.publish("/other", { code: "wrong project" }), false);
+  assert.equal(capture.publish("/project", { code: "fresh restart compile" }), true);
+  assert.deepEqual(await restarted, { code: "fresh restart compile" });
+  assert.deepEqual(capture.inspect(), { armed: false, retainedValues: 0 });
+});
+
+test("an abandoned capture expires and releases its retained value", async () => {
+  const capture = new OneShotCapture<{ code: string }>();
+  capture.arm("/project", 20, "capture expired");
+  assert.equal(capture.publish("/project", { code: "unclaimed" }), true);
+  assert.deepEqual(capture.inspect(), { armed: false, retainedValues: 1 });
+  await new Promise((resolve) => setTimeout(resolve, 30));
+  assert.deepEqual(capture.inspect(), { armed: false, retainedValues: 0 });
+});
diff --git a/apps/desktop/tests/browser-companion-lifecycle.integration.mjs b/apps/desktop/tests/browser-companion-lifecycle.integration.mjs
new file mode 100644
index 00000000..8bb3fa23
--- /dev/null
+++ b/apps/desktop/tests/browser-companion-lifecycle.integration.mjs
@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { resolve } from "node:path";
+import test from "node:test";
+
+const projectDir = process.env.DIFFUSION_COMPANION_TEST_PROJECT;
+const cli = resolve(import.meta.dirname, "../../cli/dist/index.js");
+
+function command(...args) {
+  const output = execFileSync(process.execPath, [cli, ...args], {
+    encoding: "utf8",
+    timeout: 60_000,
+  }).trim();
+  return JSON.parse(output);
+}
+
+test("live stop then same-project start gets a fresh session while DAPI survives", {
+  skip: projectDir ? false : "Set DIFFUSION_COMPANION_TEST_PROJECT and run a built local Electron host",
+}, () => {
+  const expected = resolve(projectDir);
+  command("browser", "--stop");
+  try {
+    const first = command("browser", expected);
+    assert.equal(first.active, true);
+    assert.equal(first.hostWindowVisible, false);
+    assert.equal(first.hostLocalOnly, true);
+    assert.equal(first.lifecycle, "awaiting-renderer");
+    assert.deepEqual(first.canonicalCompiled, first.hostApplied);
+    assert.equal(first.canonicalCompiled.sessionId, first.sessionId);
+    assert.equal(first.canonicalCompiled.revision, 1);
+
+    const firstStopped = command("browser", "--stop");
+    assert.deepEqual(firstStopped, { active: false, hostLocalOnly: false });
+    assert.equal(command("context").projectDir, expected);
+
+    const second = command("browser", expected);
+    assert.equal(second.active, true);
+    assert.equal(second.hostWindowVisible, false);
+    assert.equal(second.hostLocalOnly, true);
+    assert.equal(second.lifecycle, "awaiting-renderer");
+    assert.deepEqual(second.canonicalCompiled, second.hostApplied);
+    assert.equal(second.canonicalCompiled.sessionId, second.sessionId);
+    assert.equal(second.canonicalCompiled.revision, 1);
+    assert.equal(second.project.id, first.project.id);
+    assert.notEqual(second.sessionId, first.sessionId);
+    assert.notEqual(second.origin, first.origin);
+
+    const secondStopped = command("browser", "--stop");
+    assert.deepEqual(secondStopped, { active: false, hostLocalOnly: false });
+    assert.equal(command("context").projectDir, expected);
+  } finally {
+    command("browser", "--stop");
+  }
+});
diff --git a/apps/desktop/tests/browser-companion-security.test.ts b/apps/desktop/tests/browser-companion-security.test.ts
new file mode 100644
index 00000000..36451dde
--- /dev/null
+++ b/apps/desktop/tests/browser-companion-security.test.ts
@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolve } from "node:path";
+
+import {
+  containedWebPath,
+  exactCompanionOrigin,
+  isCompanionAuthentication,
+  isCompanionSemantic,
+  isLoopbackCompanionUrl,
+  redactCompanionLog,
+} from "../src/browser-companion-security.ts";
+
+test("origin matching is exact, including host spelling and port", () => {
+  const expected = "http://127.0.0.1:43127";
+  assert.equal(exactCompanionOrigin(expected, expected), true);
+  assert.equal(exactCompanionOrigin(undefined, expected), false);
+  assert.equal(exactCompanionOrigin("http://localhost:43127", expected), false);
+  assert.equal(exactCompanionOrigin("http://127.0.0.1:43128", expected), false);
+  assert.equal(exactCompanionOrigin(`${expected}.example.test`, expected), false);
+  assert.equal(exactCompanionOrigin("null", expected), false);
+});
+
+test("zero-egress host guard allows loopback only", () => {
+  assert.equal(isLoopbackCompanionUrl("http://127.0.0.1:5173/index.js"), true);
+  assert.equal(isLoopbackCompanionUrl("ws://localhost:5173/socket"), true);
+  assert.equal(isLoopbackCompanionUrl("http://[::1]:5173/"), true);
+  assert.equal(isLoopbackCompanionUrl("https://api.diffusion.studio/"), false);
+  assert.equal(isLoopbackCompanionUrl("https://localhost.example.test/"), false);
+  assert.equal(isLoopbackCompanionUrl("not a URL"), false);
+});
+
+test("static paths cannot escape into traversal or prefix siblings", () => {
+  const root = resolve("/srv/diffusion/web");
+  assert.equal(containedWebPath(root, resolve(root, "index.html")), true);
+  assert.equal(containedWebPath(root, root), true);
+  assert.equal(containedWebPath(root, resolve(root, "../web-evil/index.html")), false);
+  assert.equal(containedWebPath(root, resolve(root, "../../etc/passwd")), false);
+});
+
+test("semantic log allowlist rejects arbitrary renderer authority", () => {
+  assert.equal(isCompanionSemantic("playback.play"), true);
+  assert.equal(isCompanionSemantic("playback.pause"), true);
+  assert.equal(isCompanionSemantic("playback.scrub"), true);
+  assert.equal(isCompanionSemantic("project.write"), false);
+  assert.equal(isCompanionSemantic("dapi.call"), false);
+  assert.equal(isCompanionSemantic({ event: "playback.play" }), false);
+});
+
+test("logs redact the project root, capability, bearer values, and absolute paths", () => {
+  const root = "/Users/tester/Secret Project";
+  const capability = "one-time-capability-secret";
+  const redacted = redactCompanionLog(
+    `${root}/index.tsx ${capability} Bearer abc.def.ghi /tmp/private.mov C:\\Users\\tester\\private.mov`,
+    [root, capability],
+  );
+  assert.doesNotMatch(redacted, /Secret Project|one-time-capability-secret|abc\.def\.ghi|private\.mov/);
+  assert.match(redacted, /<redacted>/);
+});
+
+test("renderer authentication fails closed on every linkage mismatch and reuse", () => {
+  const expected = {
+    capability: "capability",
+    buildHash: "web-build",
+    protocol: 1,
+    schemaHash: "schema-v1",
+    appVersion: "0.204.0",
+    capabilityConsumed: false,
+    rendererConnected: false,
+  };
+  const message = {
+    type: "authenticate",
+    capability: "capability",
+    buildHash: "web-build",
+    client: { protocol: 1, schemaHash: "schema-v1", appVersion: "0.204.0" },
+  };
+  assert.equal(isCompanionAuthentication(message, expected), true);
+  assert.equal(isCompanionAuthentication({ ...message, capability: "wrong" }, expected), false);
+  assert.equal(isCompanionAuthentication({ ...message, buildHash: "wrong" }, expected), false);
+  assert.equal(isCompanionAuthentication({ ...message, client: { ...message.client, protocol: 2 } }, expected), false);
+  assert.equal(isCompanionAuthentication({ ...message, client: { ...message.client, schemaHash: "wrong" } }, expected), false);
+  assert.equal(isCompanionAuthentication({ ...message, client: { ...message.client, appVersion: "wrong" } }, expected), false);
+  assert.equal(isCompanionAuthentication(message, { ...expected, capabilityConsumed: true }), false);
+  assert.equal(isCompanionAuthentication(message, { ...expected, rendererConnected: true }), false);
+});
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index cffe3e68..e1c20687 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -62,6 +62,7 @@ export default [
       "node_modules/**",
       "dist/**",
       "dist-ssr/**",
+      "tests/companion-*.test.ts",
       "*.config.js",
       "*.config.ts",
     ],
diff --git a/apps/web/index.html b/apps/web/index.html
index fb4cb4f7..af0cc76d 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -5,6 +5,261 @@
     <link rel="icon" type="image/svg+xml" href="/mark.svg" />
     <script>
       (function () {
+        // A companion is another renderer of the Electron-owned project, not
+        // a browser host. Its capability stays in the fragment (never an HTTP
+        // request/referrer), is cleared immediately, and authenticates one
+        // narrow session WebSocket after the built web client supplies its
+        // protocol/app/schema versions.
+        var fragment = new URLSearchParams(location.hash.replace(/^#/, ""));
+        var companionShell = new URLSearchParams(location.search).has("companion-shell");
+        var capability = fragment.get("companion") || sessionStorage.getItem("diffusion-companion-capability");
+        var expectedBuildHash = fragment.get("build") || sessionStorage.getItem("diffusion-companion-build");
+        if (fragment.get("companion")) {
+          sessionStorage.setItem("diffusion-companion-capability", capability);
+          sessionStorage.setItem("diffusion-companion-build", expectedBuildHash || "");
+          history.replaceState(null, "", location.pathname + location.search);
+        }
+        if (capability && expectedBuildHash) {
+          document.documentElement.dataset.companion = "1";
+          var handlers = new Set();
+          var outbound = [];
+          var authenticated = false;
+          var activeSessionId = "";
+          var disconnectRedirecting = false;
+          var connectResolve;
+          var connectReject;
+          var NativeWebSocket = window.WebSocket;
+          var nativeFetch = window.fetch.bind(window);
+          var socket = new NativeWebSocket("ws://" + location.host + "/__companion/session");
+          var send = function (message) {
+            if (!authenticated && message.type !== "authenticate") { outbound.push(message); return; }
+            if (socket.readyState === NativeWebSocket.OPEN) socket.send(JSON.stringify(message));
+          };
+          var reloadDisconnectedShell = function () {
+            if (disconnectRedirecting) return;
+            disconnectRedirecting = true;
+            sessionStorage.removeItem("diffusion-companion-capability");
+            sessionStorage.removeItem("diffusion-companion-build");
+            document.documentElement.dataset.companionDisconnected = "1";
+            // A refused pre-auth replay must never fall through to the
+            // ordinary dashboard. Replace the document with a capability-free
+            // local shell; the inline bootstrap renders its disconnected state
+            // before the application module can mount.
+            location.replace("/?companion-shell=1");
+          };
+          var safeTarget = function (value) {
+            try {
+              var url = new URL(String(value), location.href);
+              return url.protocol === "blob:" || url.protocol === "data:" ? url.protocol : url.origin;
+            } catch (_error) { return "invalid-url"; }
+          };
+          var isLocal = function (value) {
+            try {
+              var url = new URL(String(value), location.href);
+              return url.protocol === "blob:" || url.protocol === "data:" ||
+                (url.hostname === "127.0.0.1" && url.port === location.port);
+            } catch (_error) { return false; }
+          };
+          var recordOutboundAttempt = function (kind, target) {
+            send({ type: "outbound-attempt", kind: kind, target: safeTarget(target) });
+          };
+          var api = Object.freeze({
+            enabled: true,
+            localOnly: true,
+            expectedBuildHash: expectedBuildHash,
+            connect: function (client) {
+              return new Promise(function (resolve, reject) {
+                connectResolve = resolve;
+                connectReject = reject;
+                var authenticate = function () { send({ type: "authenticate", capability: capability, buildHash: expectedBuildHash, client: client }); };
+                if (socket.readyState === NativeWebSocket.OPEN) authenticate();
+                else socket.addEventListener("open", authenticate, { once: true });
+              });
+            },
+            subscribe: function (handler) { handlers.add(handler); return function () { handlers.delete(handler); }; },
+            semantic: function (event, data) { send({ type: "semantic", event: event, data: data || {} }); },
+            applied: function (acknowledgement) { send({ type: "applied", acknowledgement: acknowledgement }); },
+            recordOutboundAttempt: recordOutboundAttempt
+          });
+          Object.defineProperty(window, "browserCompanion", {
+            value: api,
+            writable: false,
+            configurable: false,
+            enumerable: false
+          });
+          var nativeOpen = window.open.bind(window);
+          window.open = function (url, target, features) {
+            if (url && !isLocal(url)) {
+              recordOutboundAttempt("window.open", url);
+              return null;
+            }
+            return nativeOpen(url, target, features);
+          };
+          document.addEventListener("click", function (event) {
+            var element = event.target instanceof Element ? event.target.closest("a[href]") : null;
+            if (element && !isLocal(element.href)) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+              recordOutboundAttempt("navigation", element.href);
+            }
+          }, true);
+          if (window.navigation) {
+            window.navigation.addEventListener("navigate", function (event) {
+              if (!isLocal(event.destination.url) && event.canIntercept) {
+                event.preventDefault();
+                recordOutboundAttempt("navigation", event.destination.url);
+              }
+            });
+          }
+          if (navigator.sendBeacon) {
+            var nativeSendBeacon = navigator.sendBeacon.bind(navigator);
+            navigator.sendBeacon = function (url, data) {
+              if (!isLocal(url)) {
+                recordOutboundAttempt("sendBeacon", url);
+                return false;
+              }
+              return nativeSendBeacon(url, data);
+            };
+          }
+          var nativeXhrOpen = XMLHttpRequest.prototype.open;
+          XMLHttpRequest.prototype.open = function (method, url) {
+            if (!isLocal(url)) {
+              recordOutboundAttempt("xhr", url);
+              throw new Error("Non-loopback network access is disabled in companion local-only mode.");
+            }
+            return nativeXhrOpen.apply(this, arguments);
+          };
+          window.fetch = function (input, init) {
+            var target = input instanceof Request ? input.url : input;
+            if (!isLocal(target)) {
+              recordOutboundAttempt("fetch", target);
+              return Promise.reject(new Error("Non-loopback network access is disabled in companion local-only mode."));
+            }
+            return nativeFetch(input, init);
+          };
+          var guardedConstructor = function (name, Native, targetAt, allowLocal) {
+            if (!Native) return;
+            var Guarded = function () {
+              var args = Array.prototype.slice.call(arguments);
+              var target = args[targetAt];
+              if (!allowLocal(target)) {
+                recordOutboundAttempt(name, target);
+                throw new Error("Non-loopback network access is disabled in companion local-only mode.");
+              }
+              return Reflect.construct(Native, args, new.target || Native);
+            };
+            Guarded.prototype = Native.prototype;
+            Object.setPrototypeOf(Guarded, Native);
+            window[name] = Guarded;
+          };
+          guardedConstructor("WebSocket", NativeWebSocket, 0, isLocal);
+          guardedConstructor("EventSource", window.EventSource, 0, isLocal);
+          guardedConstructor("Worker", window.Worker, 0, isLocal);
+          guardedConstructor("SharedWorker", window.SharedWorker, 0, isLocal);
+
+          var guardUrlProperty = function (prototype, property, kind) {
+            if (!prototype) return;
+            var descriptor = Object.getOwnPropertyDescriptor(prototype, property);
+            if (!descriptor || !descriptor.get || !descriptor.set) return;
+            Object.defineProperty(prototype, property, {
+              configurable: descriptor.configurable,
+              enumerable: descriptor.enumerable,
+              get: descriptor.get,
+              set: function (value) {
+                if (value && !isLocal(value)) {
+                  recordOutboundAttempt(kind, value);
+                  throw new Error("Non-loopback resource loading is disabled in companion local-only mode.");
+                }
+                return descriptor.set.call(this, value);
+              }
+            });
+          };
+          guardUrlProperty(window.HTMLImageElement && HTMLImageElement.prototype, "src", "image");
+          guardUrlProperty(window.HTMLMediaElement && HTMLMediaElement.prototype, "src", "media");
+          guardUrlProperty(window.HTMLSourceElement && HTMLSourceElement.prototype, "src", "source");
+          guardUrlProperty(window.HTMLLinkElement && HTMLLinkElement.prototype, "href", "link");
+          guardUrlProperty(window.HTMLScriptElement && HTMLScriptElement.prototype, "src", "script");
+          guardUrlProperty(window.HTMLIFrameElement && HTMLIFrameElement.prototype, "src", "frame");
+          guardUrlProperty(window.HTMLFormElement && HTMLFormElement.prototype, "action", "form");
+
+          if (window.FontFace) {
+            var NativeFontFace = window.FontFace;
+            window.FontFace = function (family, source, descriptors) {
+              if (typeof source === "string") {
+                var urls = source.match(/url\((?:["']?)([^"')]+)(?:["']?)\)/g) || [];
+                urls.forEach(function (token) {
+                  var match = token.match(/url\((?:["']?)([^"')]+)(?:["']?)\)/);
+                  if (match && !isLocal(match[1])) {
+                    recordOutboundAttempt("font", match[1]);
+                    throw new Error("Remote font loading is disabled in companion local-only mode.");
+                  }
+                });
+              }
+              return new NativeFontFace(family, source, descriptors);
+            };
+            window.FontFace.prototype = NativeFontFace.prototype;
+            Object.setPrototypeOf(window.FontFace, NativeFontFace);
+          }
+          window.addEventListener("securitypolicyviolation", function (event) {
+            recordOutboundAttempt("csp:" + event.violatedDirective, event.blockedURI || "blocked");
+          });
+          ["debug", "info", "warn", "error"].forEach(function (level) {
+            var original = console[level].bind(console);
+            console[level] = function () {
+              var args = Array.prototype.slice.call(arguments);
+              original.apply(console, args);
+              var message = args.map(function (value) {
+                if (value instanceof Error) return value.name + ": " + value.message;
+                if (typeof value === "string") return value;
+                try { return JSON.stringify(value); } catch (_error) { return String(value); }
+              }).join(" ").slice(0, 4000);
+              send({ type: "renderer-log", level: level === "warn" ? "warning" : level, message: message, source: "console" });
+            };
+          });
+          window.addEventListener("error", function (event) {
+            send({ type: "renderer-log", level: "error", message: event.message || "Unhandled window error", source: "window.error" });
+          });
+          window.addEventListener("unhandledrejection", function (event) {
+            send({ type: "renderer-log", level: "error", message: event.reason instanceof Error ? event.reason.message : String(event.reason), source: "unhandledrejection" });
+          });
+          socket.addEventListener("message", function (event) {
+            var message;
+            try { message = JSON.parse(event.data); } catch (_error) { return; }
+            if (message.type === "authenticated") {
+              authenticated = true;
+              activeSessionId = message.snapshot && message.snapshot.sessionId || "";
+              sessionStorage.removeItem("diffusion-companion-capability");
+              sessionStorage.removeItem("diffusion-companion-build");
+              if (connectResolve) connectResolve(message.snapshot);
+              var held = outbound;
+              outbound = [];
+              held.forEach(send);
+              return;
+            }
+            if (message.type === "fatal") {
+              if (connectReject) connectReject(new Error(message.error));
+              reloadDisconnectedShell();
+              return;
+            }
+            handlers.forEach(function (handler) { handler(message); });
+          });
+          socket.addEventListener("close", function () {
+            var wasAuthenticated = authenticated;
+            authenticated = false;
+            sessionStorage.removeItem("diffusion-companion-capability");
+            sessionStorage.removeItem("diffusion-companion-build");
+            document.documentElement.dataset.companionDisconnected = "1";
+            if (connectReject) connectReject(new Error("Browser companion connection closed before authentication"));
+            handlers.forEach(function (handler) {
+              handler({ type: "disconnected", sessionId: activeSessionId, reason: "socket-closed" });
+            });
+            if (!wasAuthenticated) reloadDisconnectedShell();
+          });
+        } else if (companionShell) {
+          document.documentElement.dataset.companion = "1";
+          document.documentElement.dataset.companionDisconnected = "1";
+        }
+
         try {
           var apply = function (mode) {
             var resolved =
diff --git a/apps/web/package.json b/apps/web/package.json
index 619eba2a..700fdd99 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,6 +10,7 @@
     "build:desktop": "tsc -b && vite build --mode desktop --base=./ --outDir=../desktop/web",
     "preview": "vite preview",
     "check": "tsc -p tsconfig.app.json --noEmit",
+    "test:browser-companion": "node --test --experimental-strip-types tests/companion-*.test.ts",
     "lint": "eslint ."
   },
   "dependencies": {
diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index bb490a29..c3f68f79 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -35,7 +35,7 @@ function AuthGate(props: { children: JSX.Element }) {
           {props.children}
         </Show>
       </Show>
-      <Show when={!auth.isAuthenticated()}>
+      <Show when={!auth.isAuthenticated() && !auth.headless()}>
         <LoginPage />
       </Show>
     </Show>
diff --git a/apps/web/src/components/browser-companion-indicator.tsx b/apps/web/src/components/browser-companion-indicator.tsx
new file mode 100644
index 00000000..b161f0da
--- /dev/null
+++ b/apps/web/src/components/browser-companion-indicator.tsx
@@ -0,0 +1,56 @@
+import { Show, createEffect } from "solid-js";
+import { Cache, Computed, Geometry, Playback, getActiveEntity } from "@diffusionstudio/runtime";
+import { useWorld } from "@diffusionstudio/koota-solid";
+
+import { companionError, reportCompanionSemantic } from "@/lib/browser-companion";
+import { useEngineContext } from "@/engine";
+import { isBrowserCompanionRenderer } from "@/lib/companion-authority";
+
+export function BrowserCompanionIndicator() {
+  return (
+    <Show when={isBrowserCompanionRenderer()}>
+      <div class="fixed right-3 top-3 z-[90] flex items-center gap-2 rounded-md border border-border-strong bg-background/95 px-2.5 py-1.5 text-[11px] text-muted-foreground shadow-lg backdrop-blur">
+        <span class="font-medium text-foreground">Browser companion</span>
+        <span>Read-only · local-only</span>
+        <span>Phase A media unavailable</span>
+        <Show when={companionError()}><span class="text-destructive">{companionError()}</span></Show>
+      </div>
+    </Show>
+  );
+}
+
+/** Semantic diagnostics only: never records keys, pointers, paths, or source text. */
+export function BrowserCompanionSemanticReporter() {
+  const world = useWorld();
+  const engine = useEngineContext();
+  let initialized = false;
+  let lastPlaying = false;
+  let lastTime = 0;
+
+  createEffect(() => {
+    engine.frame();
+    if (!isBrowserCompanionRenderer()) return;
+    const scene = getActiveEntity(world);
+    if (!scene) return;
+    const playing = scene.get(Playback)?.playing ?? false;
+    const time = scene.get(Computed)?.localTimeInSeconds ?? 0;
+    if (!initialized) {
+      const children = scene.get(Cache)?.children ?? [];
+      console.info("[browser-companion] runtime.ready", JSON.stringify({
+        geometryNodes: world.query(Geometry).length,
+        sceneChildren: children.length,
+        keyframeTracks: children.reduce((count, child) => count + (child.get(Cache)?.keyframeTracks.length ?? 0), 0),
+      }));
+    }
+    if (initialized) {
+      if (playing !== lastPlaying) reportCompanionSemantic(playing ? "playback.play" : "playback.pause", { time });
+      else if (!playing && Math.abs(time - lastTime) > 1 / 120) {
+        reportCompanionSemantic("playback.scrub", { time });
+      }
+    }
+    initialized = true;
+    lastPlaying = playing;
+    lastTime = time;
+  });
+  return null;
+}
diff --git a/apps/web/src/components/canvas/canvas.tsx b/apps/web/src/components/canvas/canvas.tsx
index bdb2754b..351b9a06 100644
--- a/apps/web/src/components/canvas/canvas.tsx
+++ b/apps/web/src/components/canvas/canvas.tsx
@@ -13,11 +13,14 @@ import { DesktopAppBanner } from "./desktop-app-banner";
 import { toast } from "somoto"
 import { SceneInitOverlay } from "./scene-init-overlay";
 import { ASSET_DRAG_TYPE } from "@/components/sidebar-left/folder-item";
+import { Show } from "solid-js";
+import { companionUiCapabilities } from "@/lib/companion-capabilities";
 
 import type { Asset } from "@diffusionstudio/assets";
 
 export function Canvas() {
   const world = useWorld();
+  const capabilities = companionUiCapabilities();
 
   /**
    * Drops onto the canvas: library assets (dragged from the panel) land where
@@ -31,6 +34,7 @@ export function Canvas() {
   const handleDropEvent = async (event: DragEvent) => {
     event.preventDefault();
     event.stopPropagation();
+    if (!capabilities.assetWrite || !capabilities.projectWrite) return;
 
     const library = world.get(Library);
     if (!library) return;
@@ -77,8 +81,10 @@ export function Canvas() {
       >
         <Toolbar />
         <DesktopAppBanner />
-        <DrawOverlay />
-        <SceneInitOverlay />
+        <Show when={capabilities.projectWrite}>
+          <DrawOverlay />
+          <SceneInitOverlay />
+        </Show>
         <EngineCanvas />
         <CameraController />
       </div>
diff --git a/apps/web/src/components/canvas/desktop-app-banner.tsx b/apps/web/src/components/canvas/desktop-app-banner.tsx
index c1637fc1..9397ef83 100644
--- a/apps/web/src/components/canvas/desktop-app-banner.tsx
+++ b/apps/web/src/components/canvas/desktop-app-banner.tsx
@@ -10,6 +10,7 @@ import { createStoredSignal } from "@/lib/store";
 import { downloadDesktopApp } from "@/lib/desktop-app";
 import { track } from "@/lib/analytics";
 import { store } from "@/init";
+import { companionUiCapabilities } from "@/lib/companion-capabilities";
 
 const BANNER_IMAGE = new URL("@/assets/images/desktop-app-banner.png", import.meta.url).href;
 
@@ -19,6 +20,7 @@ const BANNER_IMAGE = new URL("@/assets/images/desktop-app-banner.png", import.me
  */
 export function DesktopAppBanner() {
   const { isDesktop } = useEditorApi();
+  const capabilities = companionUiCapabilities();
   const [dismissed, setDismissed] = createStoredSignal(
     store.define("canvas.desktop-app-banner-dismissed", false),
   );
@@ -31,7 +33,7 @@ export function DesktopAppBanner() {
   const handleDownload = () => downloadDesktopApp("canvas_banner");
 
   return (
-    <Show when={!dismissed() && !isDesktop}>
+    <Show when={capabilities.desktopPromotion && !dismissed() && !isDesktop}>
       <div class="absolute bottom-4 left-4 z-10 flex w-[220px] flex-col gap-1 rounded-md border border-border bg-background pb-3 shadow-[0px_0px_1px_2px_rgba(0,0,0,0.12),0px_4px_12px_8px_rgba(0,0,0,0.12)]">
         <div class="relative aspect-[220/122] w-full overflow-hidden rounded-t-md">
           <img src={BANNER_IMAGE} alt="" class="pointer-events-none size-full object-cover" />
diff --git a/apps/web/src/components/canvas/toolbar.tsx b/apps/web/src/components/canvas/toolbar.tsx
index bd4be2aa..d3662eda 100644
--- a/apps/web/src/components/canvas/toolbar.tsx
+++ b/apps/web/src/components/canvas/toolbar.tsx
@@ -21,11 +21,13 @@ import { Tool, ToolType } from "@diffusionstudio/runtime";
 import { useWorld } from "@diffusionstudio/koota-solid";
 import { useTool } from "@/engine";
 import { usePromptInput } from "@/context/prompt-input";
+import { companionUiCapabilities } from "@/lib/companion-capabilities";
 
 export function Toolbar() {
   const world = useWorld();
   const { promptInputOpen, promptInputConfig, openPromptInput, setPromptInputOpen } = usePromptInput();
   const selectedTool = useTool();
+  const capabilities = companionUiCapabilities();
 
   const handleToolChange = (tool: ToolType) => {
     world.set(Tool, { value: tool });
@@ -33,10 +35,10 @@ export function Toolbar() {
 
   return (
     <>
-      <Show when={promptInputOpen()}>
+      <Show when={capabilities.ai && promptInputOpen()}>
         <PromptInput initialConfig={promptInputConfig()} />
       </Show>
-      <Show when={!promptInputOpen()}>
+      <Show when={capabilities.ai && !promptInputOpen()}>
         <ActionBar openPromptInput={openPromptInput} />
       </Show>
       <div class="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-xl p-1.5 bg-background border border-border-strong flex gap-2 items-center z-10">
@@ -95,59 +97,65 @@ export function Toolbar() {
             </DropdownMenuPortal>
           </DropdownMenu>
         </div>
-        <Separator orientation="vertical" class="min-h-5" />
-        <Tooltip>
-          <TooltipTrigger
-            as={Button}
-            size="icon-square"
-            variant={selectedTool() === ToolType.SCENE ? 'default' : 'ghost'}
-            onClick={() => handleToolChange(ToolType.SCENE)}
-            class={selectedTool() === ToolType.SCENE ? 'text-foreground' : 'text-muted-foreground'}
-          >
-            <Icon name="frame" class="size-5" />
-          </TooltipTrigger>
-          <TooltipContent shortcut="F">Frame</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger
-            as={Button}
-            size="icon-square"
-            variant={selectedTool() === ToolType.RECT ? 'default' : 'ghost'}
-            onClick={() => handleToolChange(ToolType.RECT)}
-            class={selectedTool() === ToolType.RECT ? 'text-foreground' : 'text-muted-foreground'}
-          >
-            <Icon name="tool.rectangle" />
-          </TooltipTrigger>
-          <TooltipContent shortcut="R">Rectangle</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger
-            as={Button}
-            size="icon-square"
-            variant={selectedTool() === ToolType.TEXT ? 'default' : 'ghost'}
-            onClick={() => handleToolChange(ToolType.TEXT)}
-            class={selectedTool() === ToolType.TEXT ? 'text-foreground' : 'text-muted-foreground'}
-          >
-            <Icon name="tool.text" />
-          </TooltipTrigger>
-          <TooltipContent shortcut="T">Text</TooltipContent>
-        </Tooltip>
-        <Separator
-          orientation="vertical"
-          class="data-[orientation=vertical]:h-5 rounded-md"
-        />
-        <Tooltip>
-          <TooltipTrigger
-            as={Button}
-            size="icon-square"
-            class={promptInputOpen() ? 'text-foreground' : 'text-muted-foreground'}
-            variant={promptInputOpen() ? 'default' : 'ghost'}
-            onClick={() => setPromptInputOpen(!promptInputOpen())}
-          >
-            <Icon name="ai-generate" class="size-7" />
-          </TooltipTrigger>
-          <TooltipContent>AI generate</TooltipContent>
-        </Tooltip>
+        <Show when={capabilities.projectWrite || capabilities.ai}>
+          <Separator orientation="vertical" class="min-h-5" />
+        </Show>
+        <Show when={capabilities.projectWrite}>
+          <Tooltip>
+            <TooltipTrigger
+              as={Button}
+              size="icon-square"
+              variant={selectedTool() === ToolType.SCENE ? 'default' : 'ghost'}
+              onClick={() => handleToolChange(ToolType.SCENE)}
+              class={selectedTool() === ToolType.SCENE ? 'text-foreground' : 'text-muted-foreground'}
+            >
+              <Icon name="frame" class="size-5" />
+            </TooltipTrigger>
+            <TooltipContent shortcut="F">Frame</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              as={Button}
+              size="icon-square"
+              variant={selectedTool() === ToolType.RECT ? 'default' : 'ghost'}
+              onClick={() => handleToolChange(ToolType.RECT)}
+              class={selectedTool() === ToolType.RECT ? 'text-foreground' : 'text-muted-foreground'}
+            >
+              <Icon name="tool.rectangle" />
+            </TooltipTrigger>
+            <TooltipContent shortcut="R">Rectangle</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger
+              as={Button}
+              size="icon-square"
+              variant={selectedTool() === ToolType.TEXT ? 'default' : 'ghost'}
+              onClick={() => handleToolChange(ToolType.TEXT)}
+              class={selectedTool() === ToolType.TEXT ? 'text-foreground' : 'text-muted-foreground'}
+            >
+              <Icon name="tool.text" />
+            </TooltipTrigger>
+            <TooltipContent shortcut="T">Text</TooltipContent>
+          </Tooltip>
+        </Show>
+        <Show when={capabilities.ai}>
+          <Separator
+            orientation="vertical"
+            class="data-[orientation=vertical]:h-5 rounded-md"
+          />
+          <Tooltip>
+            <TooltipTrigger
+              as={Button}
+              size="icon-square"
+              class={promptInputOpen() ? 'text-foreground' : 'text-muted-foreground'}
+              variant={promptInputOpen() ? 'default' : 'ghost'}
+              onClick={() => setPromptInputOpen(!promptInputOpen())}
+            >
+              <Icon name="ai-generate" class="size-7" />
+            </TooltipTrigger>
+            <TooltipContent>AI generate</TooltipContent>
+          </Tooltip>
+        </Show>
       </div>
     </>
   );
diff --git a/apps/web/src/components/companion-authoring-boundary.tsx b/apps/web/src/components/companion-authoring-boundary.tsx
new file mode 100644
index 00000000..9c7424a2
--- /dev/null
+++ b/apps/web/src/components/companion-authoring-boundary.tsx
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { documentMutationsEnabled } from "@/lib/companion-capabilities";
+
+import type { ParentProps } from "solid-js";
+
+/**
+ * Native form semantics for the companion's read-only inspector. A disabled
+ * fieldset blocks pointer, keyboard, and accessibility SetValue activation
+ * for every descendant form control while leaving the exact same panels and
+ * displayed values in the tree. The document editor repeats the policy at
+ * the mutation funnel as defense in depth.
+ */
+export function CompanionAuthoringBoundary(props: ParentProps) {
+  const disabled = !documentMutationsEnabled();
+
+  // Keep the ordinary Electron/web component tree exactly as it was.
+  if (!disabled) return <>{props.children}</>;
+
+  return (
+    <fieldset
+      disabled={disabled}
+      inert={disabled}
+      aria-disabled={disabled}
+      data-companion-authoring-boundary={disabled ? "readonly" : "enabled"}
+      class="contents min-w-0 border-0 p-0 m-0 pointer-events-none"
+    >
+      {props.children}
+    </fieldset>
+  );
+}
diff --git a/apps/web/src/components/purchase-success.tsx b/apps/web/src/components/purchase-success.tsx
index 6a54221f..7c4ca86e 100644
--- a/apps/web/src/components/purchase-success.tsx
+++ b/apps/web/src/components/purchase-success.tsx
@@ -8,13 +8,14 @@ import { Show, createSignal, onCleanup, onMount } from "solid-js";
 import { Icon } from "@/components/ui/icon";
 import { mainBridge } from "@/lib/ipc";
 import { MAIN_CHANNELS } from "@desktop/main-channels";
+import { isLocalOnly } from "@/lib/local-only";
 
 export function PurchaseSuccess() {
   const [params, setParams] = useSearchParams();
   const [deepLinkSuccess, setDeepLinkSuccess] = createSignal(false);
 
   onMount(() => {
-    if (!window.desktop) return;
+    if (!window.desktop || isLocalOnly()) return;
 
     // Desktop returns from Stripe through a diffusion:// deep link rather than a
     // query param — the app window never navigates away in the first place.
diff --git a/apps/web/src/components/sidebar-left/project-menu/file-menu.tsx b/apps/web/src/components/sidebar-left/project-menu/file-menu.tsx
index 24ebd839..37edbb05 100644
--- a/apps/web/src/components/sidebar-left/project-menu/file-menu.tsx
+++ b/apps/web/src/components/sidebar-left/project-menu/file-menu.tsx
@@ -27,6 +27,7 @@ import { useProject } from "@/context/project";
 import { useExport } from "@/context/export";
 import { getDefaultExportTemplate } from "@/components/sidebar-right/inspector/export-templates";
 import { mimeTypeToExtension } from "@/utils";
+import { isCompanionExportDisabled } from "@/lib/companion-export";
 
 import type { Entity } from "koota";
 
@@ -103,18 +104,20 @@ export function FileMenu() {
         </DropdownMenuSub>
       </DropdownMenuGroup>
 
-      <DropdownMenuSeparator />
-
-      <DropdownMenuGroup>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent class="w-[246px]">
-              <FileExportMenu />
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-      </DropdownMenuGroup>
+      <Show when={!isCompanionExportDisabled()}>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent class="w-[246px]">
+                <FileExportMenu />
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+      </Show>
 
       <DropdownMenuSeparator />
 
diff --git a/apps/web/src/components/sidebar-left/project-menu/index.tsx b/apps/web/src/components/sidebar-left/project-menu/index.tsx
index 2d2735a5..36925fec 100644
--- a/apps/web/src/components/sidebar-left/project-menu/index.tsx
+++ b/apps/web/src/components/sidebar-left/project-menu/index.tsx
@@ -27,10 +27,12 @@ import { ViewMenu } from "./view-menu";
 import { ToolMenu } from "./tool-menu";
 import { AiCreditsMenu } from "./ai-credits-menu";
 import { HelpMenu } from "./help-menu";
+import { companionUiCapabilities } from "@/lib/companion-capabilities";
 
 export function ProjectMenu() {
   const navigate = useNavigate();
   const { isDesktop } = useEditorApi();
+  const capabilities = companionUiCapabilities();
 
   const handleOpenDashboard = () => {
     (document.activeElement as HTMLElement)?.blur?.();
@@ -47,6 +49,7 @@ export function ProjectMenu() {
    * key is bound here, with the item that offers it.
    */
   const handleShortcut = (event: KeyboardEvent) => {
+    if (!capabilities.projectWrite) return;
     if (!(event.metaKey || event.ctrlKey) || !event.shiftKey) return;
     if (event.key.toLowerCase() !== "d" || isInputTarget(event)) return;
 
@@ -74,33 +77,37 @@ export function ProjectMenu() {
         </DropdownMenuTrigger>
         <DropdownMenuPortal>
           <DropdownMenuContent class="w-[196px]">
-            <DropdownMenuGroup>
-              <DropdownMenuItem onSelect={handleOpenDashboard}>
-                Go to dashboard
-                <DropdownMenuShortcut>⇧⌘D</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
+            <Show when={capabilities.projectWrite}>
+              <DropdownMenuGroup>
+                <DropdownMenuItem onSelect={handleOpenDashboard}>
+                  Go to dashboard
+                  <DropdownMenuShortcut>⇧⌘D</DropdownMenuShortcut>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
 
-            <DropdownMenuSeparator />
+              <DropdownMenuSeparator />
+            </Show>
 
             <DropdownMenuGroup>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>File</DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent class="w-[196px]">
-                    <FileMenu />
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Edit</DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent class="w-[196px]">
-                    <EditMenu />
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
+              <Show when={capabilities.projectWrite}>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>File</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent class="w-[196px]">
+                      <FileMenu />
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Edit</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent class="w-[196px]">
+                      <EditMenu />
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </Show>
 
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger>View</DropdownMenuSubTrigger>
@@ -111,41 +118,51 @@ export function ProjectMenu() {
                 </DropdownMenuPortal>
               </DropdownMenuSub>
 
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Tool</DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent class="w-[172px]">
-                    <ToolMenu />
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
+              <Show when={capabilities.projectWrite}>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Tool</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent class="w-[172px]">
+                      <ToolMenu />
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </Show>
             </DropdownMenuGroup>
 
-            <DropdownMenuSeparator />
-
-            <DropdownMenuGroup>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>AI credits</DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent class="w-[188px]">
-                    <AiCreditsMenu />
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Help</DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent class="w-[188px]">
-                    <HelpMenu />
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
+            <Show when={capabilities.account || capabilities.externalNavigation}>
+              <DropdownMenuSeparator />
 
-              <DropdownMenuItem onSelect={handleOpenAccount}>Account</DropdownMenuItem>
-            </DropdownMenuGroup>
+              <DropdownMenuGroup>
+                <Show when={capabilities.ai}>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>AI credits</DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent class="w-[188px]">
+                        <AiCreditsMenu />
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                </Show>
+
+                <Show when={capabilities.externalNavigation}>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>Help</DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent class="w-[188px]">
+                        <HelpMenu />
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                </Show>
+
+                <Show when={capabilities.account}>
+                  <DropdownMenuItem onSelect={handleOpenAccount}>Account</DropdownMenuItem>
+                </Show>
+              </DropdownMenuGroup>
+            </Show>
 
-            <Show when={!isDesktop}>
+            <Show when={!isDesktop && capabilities.desktopPromotion}>
               <DropdownMenuSeparator />
 
               <DropdownMenuGroup>
diff --git a/apps/web/src/components/sidebar-left/sidebar-left.tsx b/apps/web/src/components/sidebar-left/sidebar-left.tsx
index a179fce4..9f9ee913 100644
--- a/apps/web/src/components/sidebar-left/sidebar-left.tsx
+++ b/apps/web/src/components/sidebar-left/sidebar-left.tsx
@@ -12,13 +12,17 @@ import { Icon } from "../ui/icon";
 import { ProjectMenu } from "./project-menu";
 import { useProject } from "@/context/project";
 import { cx } from "@/lib/cva";
+import { companionUiCapabilities } from "@/lib/companion-capabilities";
 
 export function SidebarLeft() {
+  const capabilities = companionUiCapabilities();
   return (
     <div class="flex flex-col h-full overflow-hidden">
       <ElectronHeader />
       <ProjectHeader />
-      <Assets />
+      <Show when={capabilities.assetWrite}>
+        <Assets />
+      </Show>
     </div>
   );
 }
@@ -50,6 +54,7 @@ type ProjectHeaderProps = {
 
 export function ProjectHeader(props: ProjectHeaderProps) {
   const project = useProject();
+  const capabilities = companionUiCapabilities();
   const [projectNameDraft, setProjectNameDraft] = createSignal<string | null>(null);
 
   const handleProjectNameInput = (event: InputEvent & { currentTarget: HTMLInputElement }) => {
@@ -94,16 +99,21 @@ export function ProjectHeader(props: ProjectHeaderProps) {
     <div class={cx("h-12 shrink-0 flex items-center gap-1 pr-4 pl-2.5", props.class)}>
       <ProjectMenu />
       <div class="flex items-center w-full">
-        <input
-          type="text"
-          value={projectNameDraft() ?? project.name()}
-          onInput={handleProjectNameInput}
-          onFocus={handleFocusNameInput}
-          onBlur={handleBlurNameInput}
-          onKeyDown={handleKeyDownNameInput}
-          placeholder="Project name"
-          class="w-full bg-transparent focus-ring px-1 h-5 ml-1 rounded text-xs text-muted-foreground font-450 outline-none"
-        />
+        <Show
+          when={capabilities.projectWrite}
+          fallback={<span class="w-full px-1 ml-1 truncate text-xs text-muted-foreground font-450">{project.name()}</span>}
+        >
+          <input
+            type="text"
+            value={projectNameDraft() ?? project.name()}
+            onInput={handleProjectNameInput}
+            onFocus={handleFocusNameInput}
+            onBlur={handleBlurNameInput}
+            onKeyDown={handleKeyDownNameInput}
+            placeholder="Project name"
+            class="w-full bg-transparent focus-ring px-1 h-5 ml-1 rounded text-xs text-muted-foreground font-450 outline-none"
+          />
+        </Show>
       </div>
     </div>
   )
diff --git a/apps/web/src/components/sidebar-right/inspector/asset-picker.tsx b/apps/web/src/components/sidebar-right/inspector/asset-picker.tsx
index 01e75e8a..43b68968 100644
--- a/apps/web/src/components/sidebar-right/inspector/asset-picker.tsx
+++ b/apps/web/src/components/sidebar-right/inspector/asset-picker.tsx
@@ -24,6 +24,7 @@ import { useTrait } from "@diffusionstudio/koota-solid";
 import { AssetId, isScene } from "@diffusionstudio/runtime";
 import { useLibrary } from "@/engine/library";
 import { pickAndImport } from "@/engine/asset-actions";
+import { companionUiCapabilities } from "@/lib/companion-capabilities";
 
 import type { Asset } from "@diffusionstudio/assets";
 import type { Entity } from "koota";
@@ -56,6 +57,7 @@ export type AssetFillPickerProps = {
 export function AssetFillPicker(props: AssetFillPickerProps) {
   const { openPromptInput } = usePromptInput();
   const library = useLibrary();
+  const capabilities = companionUiCapabilities();
 
   const [query, setQuery] = createSignal("");
   const [assetFilter, setAssetFilter] = createSignal<AssetFilter>("ALL");
@@ -173,18 +175,24 @@ export function AssetFillPicker(props: AssetFillPickerProps) {
         <Separator class="col-span-2" />
       </div>
 
-      <div class="flex flex-col gap-2 px-4 pb-4 pt-3">
-        <Button
-          variant="secondary"
-          class="w-full"
-          onClick={() => openPromptInput(createDefaultConfig("IMAGE"))}
-        >
-          Generate with AI
-        </Button>
-        <Button class="w-full" onClick={() => void handleImportAssets()}>
-          Import from computer
-        </Button>
-      </div>
+      <Show when={capabilities.ai || capabilities.assetWrite}>
+        <div class="flex flex-col gap-2 px-4 pb-4 pt-3">
+          <Show when={capabilities.ai}>
+            <Button
+              variant="secondary"
+              class="w-full"
+              onClick={() => openPromptInput(createDefaultConfig("IMAGE"))}
+            >
+              Generate with AI
+            </Button>
+          </Show>
+          <Show when={capabilities.assetWrite}>
+            <Button class="w-full" onClick={() => void handleImportAssets()}>
+              Import from computer
+            </Button>
+          </Show>
+        </div>
+      </Show>
     </div>
   );
 }
diff --git a/apps/web/src/components/sidebar-right/inspector/inspector.tsx b/apps/web/src/components/sidebar-right/inspector/inspector.tsx
index 7a0cd250..16c67404 100644
--- a/apps/web/src/components/sidebar-right/inspector/inspector.tsx
+++ b/apps/web/src/components/sidebar-right/inspector/inspector.tsx
@@ -41,6 +41,8 @@ import { TransitionSettings } from "./transition";
 import { MasksSettings } from "./masks";
 import { AudioSettings } from "./audio";
 import { InterpolationSettings } from "./interpolation";
+import { isCompanionExportDisabled } from "@/lib/companion-export";
+import { CompanionAuthoringBoundary } from "@/components/companion-authoring-boundary";
 
 import type { Entity } from "koota";
 
@@ -108,93 +110,97 @@ export function Inspector() {
       <InspectorHeader />
       <Show when={selectionHash()} keyed>
         <ControlScrollArea class="flex-1 min-h-0" scrollKey={selectionHash()}>
-          <Show when={includesTarget("scene-tool")}>
-            <SceneTemplatePanel />
-          </Show>
+          <CompanionAuthoringBoundary>
+            <Show when={includesTarget("scene-tool")}>
+              <SceneTemplatePanel />
+            </Show>
 
-          <Show when={nodes().length > 1}>
-            <Alignment />
-          </Show>
+            <Show when={nodes().length > 1}>
+              <Alignment />
+            </Show>
 
-          <Show when={includesTarget("scene") && !isNested()}>
-            <ExportPanel selection={nodes()} />
-          </Show>
+            <Show when={!isCompanionExportDisabled() && includesTarget("scene") && !isNested()}>
+              <ExportPanel selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("stage")}>
-            <BackgroundSettings />
-          </Show>
+            <Show when={includesTarget("stage")}>
+              <BackgroundSettings />
+            </Show>
 
-          <Show when={includesTarget("stage")}>
-            <VariablesSettings />
-          </Show>
+            <Show when={includesTarget("stage")}>
+              <VariablesSettings />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "audio", "scene", "caption", "group", "mask", "adjustment")}>
-            <TimeSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "audio", "scene", "caption", "group", "mask", "adjustment")}>
+              <TimeSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "audio", "scene", "caption", "group", "mask", "adjustment")}>
-            <TransformSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "audio", "scene", "caption", "group", "mask", "adjustment")}>
+              <TransformSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "audio", "scene", "mask")}>
-            <LayoutPanel selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "audio", "scene", "mask")}>
+              <LayoutPanel selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "scene", "caption", "group", "audio", "mask")}>
-            <AppearanceSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "scene", "caption", "group", "audio", "mask")}>
+              <AppearanceSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("caption")}>
-            <CaptionSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("caption")}>
+              <CaptionSettings selection={nodes()} />
+            </Show>
+          </CompanionAuthoringBoundary>
 
           <Show when={includesTarget("text", "caption")}>
             <TextPanel selection={nodes()} />
           </Show>
 
-          <Show when={includesTarget("shape", "text", "scene")}>
-            <FillsSettings selection={nodes()} />
-          </Show>
+          <CompanionAuthoringBoundary>
+            <Show when={includesTarget("shape", "text", "scene")}>
+              <FillsSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "caption")}>
-            <SourceSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "caption")}>
+              <SourceSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "scene", "caption")}>
-            <StrokesSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "scene", "caption")}>
+              <StrokesSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "scene")}>
-            <ShadowsSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "scene")}>
+              <ShadowsSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "scene", "caption")}>
-            <EffectsSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "scene", "caption")}>
+              <EffectsSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "caption", "group", "mask")}>
-            <AnimationsSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "caption", "group", "mask")}>
+              <AnimationsSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape") && isSequenceChild()}>
-            <TransitionSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape") && isSequenceChild()}>
+              <TransitionSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "text", "caption", "group")}>
-            <MasksSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "text", "caption", "group")}>
+              <MasksSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("shape", "audio", "group")}>
-            <AudioSettings selection={nodes()} />
-          </Show>
+            <Show when={includesTarget("shape", "audio", "group")}>
+              <AudioSettings selection={nodes()} />
+            </Show>
 
-          <Show when={includesTarget("asset")}>
-            <AssetInfoPanel />
-          </Show>
+            <Show when={includesTarget("asset")}>
+              <AssetInfoPanel />
+            </Show>
 
-          <Show when={includesTarget("keyframe")}>
-            <InterpolationSettings selection={keyframes()} />
-          </Show>
+            <Show when={includesTarget("keyframe")}>
+              <InterpolationSettings selection={keyframes()} />
+            </Show>
+          </CompanionAuthoringBoundary>
         </ControlScrollArea>
       </Show>
     </div>
diff --git a/apps/web/src/components/sidebar-right/inspector/text.tsx b/apps/web/src/components/sidebar-right/inspector/text.tsx
index 79cd2ffd..1c5dac52 100644
--- a/apps/web/src/components/sidebar-right/inspector/text.tsx
+++ b/apps/web/src/components/sidebar-right/inspector/text.tsx
@@ -50,6 +50,10 @@ import {
 import { getLocalFonts } from '@/engine/fonts';
 import { useDerived, useEditor, useTool } from '@/engine/hooks';
 import { removeKeyframeTrack, syncKeyframe } from '@/engine/keyframes';
+import { fontSourcesForMode } from '@/lib/companion-fonts';
+import { isLocalOnly } from '@/lib/local-only';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
+import { CompanionAuthoringBoundary } from '@/components/companion-authoring-boundary';
 
 import type { Entity } from 'koota';
 
@@ -89,6 +93,7 @@ export function TextPanel(props: TextPanelProps) {
   const world = useWorld();
   const editor = useEditor();
   const tool = useTool();
+  const authoring = documentMutationsEnabled();
   const entity = () => props.selection[0]!;
 
   const style = useTrait(entity, TextStyle);
@@ -121,20 +126,23 @@ export function TextPanel(props: TextPanelProps) {
 
   /** Writes a family or weight to the trait alone, for the picker to show. */
   const previewFont = (params: { fontFamily?: string; fontWeight?: string }) => {
+    if (!authoring) return;
     entity().add(TextStyle);
     entity().set(TextStyle, params);
   };
 
   const handleFontFamilyChange = (family: string) => {
+    if (!authoring) return;
     setSelectedFamily(family);
     editor.editProperty(entity(), 'fontFamily', family);
 
-    if (family in WebFonts) {
+    if (!isLocalOnly() && family in WebFonts) {
       void loadWebFont(world, family as keyof typeof WebFonts);
     }
   };
 
   const handleFontWeightChange = (weight: string) => {
+    if (!authoring) return;
     if (weight === selectedWeight()) return;
 
     setSelectedWeight(weight);
@@ -144,6 +152,7 @@ export function TextPanel(props: TextPanelProps) {
   };
 
   const handleResizeModeChange = (mode: 'auto' | 'fixed') => {
+    if (!authoring) return;
     if (mode === 'fixed') {
       // Pinned at what the glyphs came to, so the switch changes nothing yet.
       const [w, h] = [Math.round(width()), Math.round(height())];
@@ -163,18 +172,21 @@ export function TextPanel(props: TextPanelProps) {
 
   return (
     <PanelSection title="Typography">
-      <Show when={textSelected()}>
-        <ControlRow label="Content" contentClass="flex flex-col">
-          <GrowingTextArea
-            value={chars()?.value ?? ''}
-            maxRows={8}
-            onInput={(v) => editor.editText(entity(), v)}
-            focused={tool() === ToolType.TEXT_EDIT}
-            onFocus={() => world.set(Tool, { value: ToolType.TEXT_EDIT })}
-            onBlur={() => world.set(Tool, { value: ToolType.MOVE })}
-          />
-        </ControlRow>
-      </Show>
+      <CompanionAuthoringBoundary>
+        <Show when={textSelected()}>
+          <ControlRow label="Content" contentClass="flex flex-col">
+            <GrowingTextArea
+              value={chars()?.value ?? ''}
+              maxRows={8}
+              onInput={(v) => editor.editText(entity(), v)}
+              focused={authoring && tool() === ToolType.TEXT_EDIT}
+              onFocus={() => authoring && world.set(Tool, { value: ToolType.TEXT_EDIT })}
+              onBlur={() => authoring && world.set(Tool, { value: ToolType.MOVE })}
+              readOnly={!authoring}
+            />
+          </ControlRow>
+        </Show>
+      </CompanionAuthoringBoundary>
 
       <ControlRow label="Font">
         <FontDropdown
@@ -182,100 +194,103 @@ export function TextPanel(props: TextPanelProps) {
           onPreview={(family) => previewFont({ fontFamily: family })}
           onFamilyChange={handleFontFamilyChange}
           onWeightsChange={setAvailableWeights}
+          readOnly={!authoring}
         />
       </ControlRow>
 
-      <ControlRow label="Sizing" contentClass="flex gap-2 items-center">
-        <Select
-          class="flex-1 min-w-0"
-          value={selectedWeight()}
-          onChange={v => handleFontWeightChange(v ?? '400')}
-          options={weightOptions().map(w => w.value)}
-          itemComponent={itemProps => (
-            <SelectItem
-              item={itemProps.item}
-              onPointerEnter={() => previewFont({ fontWeight: itemProps.item.rawValue })}
-            >
-              {weightOptions().find(w => w.value === itemProps.item.rawValue)?.label}
-            </SelectItem>
-          )}
+      <CompanionAuthoringBoundary>
+        <ControlRow label="Sizing" contentClass="flex gap-2 items-center">
+          <Select
+            class="flex-1 min-w-0"
+            value={selectedWeight()}
+            onChange={v => handleFontWeightChange(v ?? '400')}
+            options={weightOptions().map(w => w.value)}
+            itemComponent={itemProps => (
+              <SelectItem
+                item={itemProps.item}
+                onPointerEnter={() => previewFont({ fontWeight: itemProps.item.rawValue })}
+              >
+                {weightOptions().find(w => w.value === itemProps.item.rawValue)?.label}
+              </SelectItem>
+            )}
+          >
+            <SelectTrigger>
+              <SelectValue>
+                {weightOptions().find(w => w.value === selectedWeight())?.label}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectPortal>
+              <SelectContent onCloseAutoFocus={() => previewFont({ fontWeight: selectedWeight() })} />
+            </SelectPortal>
+          </Select>
+
+          <ControlledTextField
+            class="flex-1"
+            value={fontSize()}
+            onNumber={(v) => editor.editProperty(entity(), 'fontSize', v)}
+            step={1}
+            min={1}
+            autoSelect
+            limitEvents
+          />
+        </ControlRow>
+
+        <ControlRow
+          label="Flow"
+          labelClass="opacity-0"
+          contentClass="grid grid-cols-2 gap-2"
         >
-          <SelectTrigger>
-            <SelectValue>
-              {weightOptions().find(w => w.value === selectedWeight())?.label}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectPortal>
-            <SelectContent onCloseAutoFocus={() => previewFont({ fontWeight: selectedWeight() })} />
-          </SelectPortal>
-        </Select>
-
-        <ControlledTextField
-          class="flex-1"
-          value={fontSize()}
-          onNumber={(v) => editor.editProperty(entity(), 'fontSize', v)}
-          step={1}
-          min={1}
-          autoSelect
-          limitEvents
-        />
-      </ControlRow>
+          <ControlledTextField
+            icon={<Icon name="text.line-height" />}
+            value={Math.round(leading() * 100)}
+            onNumber={(v) => editor.editProperty(entity(), 'leading', v === 100 ? false : v / 100)}
+            unit="%"
+            step={1}
+            min={0}
+            max={1200}
+            autoSelect
+            sliderEnabled
+            limitEvents
+          />
+          <ControlledTextField
+            icon={<Icon name="text.letter-spacing" />}
+            value={letterSpacing()}
+            onNumber={(v) => editor.editProperty(entity(), 'letterSpacing', v === 0 ? false : v)}
+            unit="px"
+            step={1}
+            min={-1200}
+            max={1200}
+            autoSelect
+            sliderEnabled
+            limitEvents
+          />
+        </ControlRow>
 
-      <ControlRow
-        label="Flow"
-        labelClass="opacity-0"
-        contentClass="grid grid-cols-2 gap-2"
-      >
-        <ControlledTextField
-          icon={<Icon name="text.line-height" />}
-          value={Math.round(leading() * 100)}
-          onNumber={(v) => editor.editProperty(entity(), 'leading', v === 100 ? false : v / 100)}
-          unit="%"
-          step={1}
-          min={0}
-          max={1200}
-          autoSelect
-          sliderEnabled
-          limitEvents
-        />
-        <ControlledTextField
-          icon={<Icon name="text.letter-spacing" />}
-          value={letterSpacing()}
-          onNumber={(v) => editor.editProperty(entity(), 'letterSpacing', v === 0 ? false : v)}
-          unit="px"
-          step={1}
-          min={-1200}
-          max={1200}
-          autoSelect
-          sliderEnabled
-          limitEvents
-        />
-      </ControlRow>
+        <Show when={textSelected()}>
+          <ControlRow label="Grow">
+            <SegmentedIconTabs
+              value={resizeMode}
+              onChange={handleResizeModeChange}
+              items={RESIZE_MODE_ITEMS}
+            />
+          </ControlRow>
+        </Show>
 
-      <Show when={textSelected()}>
-        <ControlRow label="Grow">
+        <ControlRow label="Align" contentClass="flex gap-2">
+          <SegmentedIconTabs
+            class="flex-1"
+            value={() => HORIZONTAL_ALIGNS[textAlign()] ?? 'left'}
+            onChange={(v) => editor.editProperty(entity(), 'textAlign', v === 'left' ? false : v)}
+            items={HORIZONTAL_ALIGN_TABS}
+          />
           <SegmentedIconTabs
-            value={resizeMode}
-            onChange={handleResizeModeChange}
-            items={RESIZE_MODE_ITEMS}
+            class="flex-1"
+            value={() => VERTICAL_ALIGNS[textBaseline()] ?? 'top'}
+            onChange={(v) => editor.editProperty(entity(), 'textBaseline', v === 'top' ? false : v)}
+            items={VERTICAL_ALIGN_TABS}
           />
         </ControlRow>
-      </Show>
-
-      <ControlRow label="Align" contentClass="flex gap-2">
-        <SegmentedIconTabs
-          class="flex-1"
-          value={() => HORIZONTAL_ALIGNS[textAlign()] ?? 'left'}
-          onChange={(v) => editor.editProperty(entity(), 'textAlign', v === 'left' ? false : v)}
-          items={HORIZONTAL_ALIGN_TABS}
-        />
-        <SegmentedIconTabs
-          class="flex-1"
-          value={() => VERTICAL_ALIGNS[textBaseline()] ?? 'top'}
-          onChange={(v) => editor.editProperty(entity(), 'textBaseline', v === 'top' ? false : v)}
-          items={VERTICAL_ALIGN_TABS}
-        />
-      </ControlRow>
+      </CompanionAuthoringBoundary>
     </PanelSection>
   );
 }
@@ -285,15 +300,18 @@ type FontDropdownProps = {
   onPreview(family: string): void;
   onFamilyChange(family: string): void;
   onWeightsChange(weights: string[]): void;
+  readOnly?: boolean;
 };
 
 export function FontDropdown(props: FontDropdownProps) {
-  const [webfonts] = createSignal(getWebFonts());
+  const localOnly = isLocalOnly();
+  const [webfonts] = createSignal(fontSourcesForMode(localOnly, getWebFonts));
   const [fontQuery, setFontQuery] = createSignal('');
   const fontsPermission = usePermissionState('local-fonts');
 
   // Preload web fonts for preview
   onMount(() => {
+    if (localOnly) return;
     if (document.visibilityState !== 'visible') return;
     for (const family of Object.keys(WebFonts)) {
       const config = WebFonts[family as keyof typeof WebFonts];
@@ -339,7 +357,7 @@ export function FontDropdown(props: FontDropdownProps) {
     setFontQuery('');
     // Whatever was hovered last goes: only a selection authors a family, and
     // `family` is the authored one whether or not this picker changed it.
-    if (!isOpen) props.onPreview(props.family);
+    if (!isOpen && !props.readOnly) props.onPreview(props.family);
   };
 
   const handleGrantAccess = async () => {
@@ -388,14 +406,14 @@ export function FontDropdown(props: FontDropdownProps) {
           <DropdownMenuSeparator />
           <div class="overflow-y-auto flex-1 flex flex-col gap-2">
             <DropdownMenuGroup>
-              <DropdownMenuGroupLabel>Web Fonts</DropdownMenuGroupLabel>
+              <DropdownMenuGroupLabel>{localOnly ? "Local fallback fonts" : "Web Fonts"}</DropdownMenuGroupLabel>
               <For each={filteredWebFonts()}>
                 {(font) => (
                   <LazyFontItem
                     family={font.family}
                     checked={props.family === font.family}
-                    onPointerEnter={props.onPreview}
-                    onSelect={props.onFamilyChange}
+                    onPointerEnter={(family) => !props.readOnly && props.onPreview(family)}
+                    onSelect={(family) => !props.readOnly && props.onFamilyChange(family)}
                   >
                     {font.family}
                   </LazyFontItem>
@@ -403,34 +421,36 @@ export function FontDropdown(props: FontDropdownProps) {
               </For>
             </DropdownMenuGroup>
 
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuGroupLabel>System Fonts</DropdownMenuGroupLabel>
-              <Show when={!localFonts.latest?.length}>
-                <Button
-                  variant="secondary"
-                  class="text-foreground gap-0"
-                  onClick={handleGrantAccess}
-                >
-                  <Icon name="lock-closed-small" class="size-6" />
-                  <span class="mr-3">Grant Access</span>
-                </Button>
-              </Show>
-              <Show when={filteredLocalFonts().length}>
-                <For each={filteredLocalFonts()}>
-                  {(font) => (
-                    <LazyFontItem
-                      family={font.family}
-                      checked={props.family === font.family}
-                      onPointerEnter={props.onPreview}
-                      onSelect={props.onFamilyChange}
-                    >
-                      {font.family}
-                    </LazyFontItem>
-                  )}
-                </For>
-              </Show>
-            </DropdownMenuGroup>
+            <Show when={!localOnly}>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuGroupLabel>System Fonts</DropdownMenuGroupLabel>
+                <Show when={!localFonts.latest?.length}>
+                  <Button
+                    variant="secondary"
+                    class="text-foreground gap-0"
+                    onClick={handleGrantAccess}
+                  >
+                    <Icon name="lock-closed-small" class="size-6" />
+                    <span class="mr-3">Grant Access</span>
+                  </Button>
+                </Show>
+                <Show when={filteredLocalFonts().length}>
+                  <For each={filteredLocalFonts()}>
+                    {(font) => (
+                      <LazyFontItem
+                        family={font.family}
+                        checked={props.family === font.family}
+                        onPointerEnter={(family) => !props.readOnly && props.onPreview(family)}
+                        onSelect={(family) => !props.readOnly && props.onFamilyChange(family)}
+                      >
+                        {font.family}
+                      </LazyFontItem>
+                    )}
+                  </For>
+                </Show>
+              </DropdownMenuGroup>
+            </Show>
           </div>
         </DropdownMenuContent>
       </DropdownMenuPortal>
@@ -445,6 +465,7 @@ type GrowingTextAreaProps = {
   focused?: boolean;
   onBlur?(): void;
   onFocus?(): void;
+  readOnly?: boolean;
 };
 
 export function GrowingTextArea(props: GrowingTextAreaProps) {
@@ -473,6 +494,7 @@ export function GrowingTextArea(props: GrowingTextAreaProps) {
   });
 
   const handleInput = (e: InputEvent & { currentTarget: HTMLTextAreaElement }) => {
+    if (props.readOnly) return;
     props.onInput(e.currentTarget.value);
     resize();
   };
@@ -496,6 +518,8 @@ export function GrowingTextArea(props: GrowingTextAreaProps) {
       onKeyDown={handleKeyDown}
       onFocus={props.onFocus}
       onBlur={props.onBlur}
+      readOnly={props.readOnly}
+      aria-readonly={props.readOnly}
       rows={1}
       class="bg-input h-7 rounded-md px-2 py-1 text-xxs text-foreground placeholder:text-muted-foreground outline-none resize-none w-full focus-ring overflow-y-auto"
       style={{ 'line-height': `${lineHeight}px` }}
diff --git a/apps/web/src/components/timeline/layers/context.tsx b/apps/web/src/components/timeline/layers/context.tsx
index 894f84e2..63403a54 100644
--- a/apps/web/src/components/timeline/layers/context.tsx
+++ b/apps/web/src/components/timeline/layers/context.tsx
@@ -11,6 +11,7 @@ import { useTimeline } from "@/context/timeline";
 import { resolveSequentialOverlaps } from "@/engine/overlap";
 import { assert, clamp } from "@/utils";
 import { flattenRows, getListBottom, hitRows, resolveGap } from "./drag";
+import { documentMutationsEnabled } from "@/lib/companion-capabilities";
 
 import type { Entity } from "koota";
 import type { DropTarget, FlatRow, GapContext, LayerDrag } from "./drag";
@@ -59,6 +60,7 @@ export function LayerContextProvider(props: { children: JSX.Element }) {
   let raf = 0;
 
   const begin = (event: PointerEvent, entity: Entity): void => {
+    if (!documentMutationsEnabled()) return;
     if (pending !== null || active !== null) return;
 
     pending = { entity, startX: event.clientX, startY: event.clientY };
diff --git a/apps/web/src/components/timeline/layers/keyframe.tsx b/apps/web/src/components/timeline/layers/keyframe.tsx
index ac5f43c1..67b3b083 100644
--- a/apps/web/src/components/timeline/layers/keyframe.tsx
+++ b/apps/web/src/components/timeline/layers/keyframe.tsx
@@ -24,6 +24,7 @@ import { useDerived } from '@/engine/hooks';
 import { KEYFRAME_TRACK_HEIGHT } from '@/engine/timeline';
 import { NESTED_INDENT_PX } from './config';
 import { setRowHover } from './hover';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 import type { Entity } from 'koota';
 import type { PropertyPath } from '@diffusionstudio/runtime';
@@ -126,7 +127,13 @@ export function KeyframeLayer(props: LayerRowProps) {
           </TooltipPortal>
         </Tooltip>
         <Show when={property() && target()}>
-          {(holder) => <Keyframe property={property()!} target={holder() as Entity} />}
+          {(holder) => (
+            <Keyframe
+              property={property()!}
+              target={holder() as Entity}
+              disabled={!documentMutationsEnabled()}
+            />
+          )}
         </Show>
         <Tooltip placement="top">
           <TooltipTrigger
diff --git a/apps/web/src/components/timeline/layers/layers.tsx b/apps/web/src/components/timeline/layers/layers.tsx
index b90e660d..6342bf76 100644
--- a/apps/web/src/components/timeline/layers/layers.tsx
+++ b/apps/web/src/components/timeline/layers/layers.tsx
@@ -43,6 +43,7 @@ import { Layer } from './layer';
 import { LayerContextProvider } from './context';
 import { DropIndicator } from './drop-indicator';
 import { formatFrames, TIME_FORMAT_OPTIONS, type TimeFormat } from '../time-format';
+import { companionUiCapabilities } from '@/lib/companion-capabilities';
 
 import type { TimelineNode } from '@diffusionstudio/runtime';
 import type { Entity } from 'koota';
@@ -62,6 +63,7 @@ export function Layers() {
   const timeline = useTimeline();
   const index = useTimelineIndex();
   const { timelineMinimized, toggleTimeline } = useLayout();
+  const capabilities = companionUiCapabilities();
 
   const layers = createMemo(() => index().layers);
   const scene = createMemo(() => index().root);
@@ -184,18 +186,20 @@ export function Layers() {
             </TooltipPortal>
           </Tooltip>
           <Show when={!timelineMinimized()}>
-            <Tooltip placement="top">
-              <TooltipTrigger<typeof Button>
-                as={(triggerProps) => (
-                  <Button {...triggerProps} variant="ghost" size="icon" onClick={() => splitAtPlayhead(world)}>
-                    <Icon name="split" class="size-6" />
-                  </Button>
-                )}
-              />
-              <TooltipPortal>
-                <TooltipContent shortcut="⌘B">Split at playhead</TooltipContent>
-              </TooltipPortal>
-            </Tooltip>
+            <Show when={capabilities.projectWrite}>
+              <Tooltip placement="top">
+                <TooltipTrigger<typeof Button>
+                  as={(triggerProps) => (
+                    <Button {...triggerProps} variant="ghost" size="icon" onClick={() => splitAtPlayhead(world)}>
+                      <Icon name="split" class="size-6" />
+                    </Button>
+                  )}
+                />
+                <TooltipPortal>
+                  <TooltipContent shortcut="⌘B">Split at playhead</TooltipContent>
+                </TooltipPortal>
+              </Tooltip>
+            </Show>
             <DropdownMenu>
               <Tooltip placement="top">
                 <TooltipTrigger<typeof DropdownMenuTrigger>
@@ -216,27 +220,29 @@ export function Layers() {
               </Tooltip>
               <DropdownMenuPortal>
                 <DropdownMenuContent class="w-[180px]">
-                  <DropdownMenuItem onSelect={addLayer}>Add layer</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>Layer height</DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent class="w-[140px]">
-                        <Index each={HEIGHT_PRESETS}>
-                          {(preset) => (
-                            <DropdownMenuCheckboxItem
-                              onSelect={() => setCommonHeight(preset().height)}
-                              checked={commonHeight() === preset().height}
-                            >
-                              {preset().label}
-                              <span class="text-xxs text-muted-foreground ml-auto">{preset().height}</span>
-                            </DropdownMenuCheckboxItem>
-                          )}
-                        </Index>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
+                  <Show when={capabilities.projectWrite}>
+                    <DropdownMenuItem onSelect={addLayer}>Add layer</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>Layer height</DropdownMenuSubTrigger>
+                      <DropdownMenuPortal>
+                        <DropdownMenuSubContent class="w-[140px]">
+                          <Index each={HEIGHT_PRESETS}>
+                            {(preset) => (
+                              <DropdownMenuCheckboxItem
+                                onSelect={() => setCommonHeight(preset().height)}
+                                checked={commonHeight() === preset().height}
+                              >
+                                {preset().label}
+                                <span class="text-xxs text-muted-foreground ml-auto">{preset().height}</span>
+                              </DropdownMenuCheckboxItem>
+                            )}
+                          </Index>
+                        </DropdownMenuSubContent>
+                      </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                    <DropdownMenuSeparator />
+                  </Show>
                   <DropdownMenuSub>
                     <DropdownMenuSubTrigger>Time format</DropdownMenuSubTrigger>
                     <DropdownMenuPortal>
diff --git a/apps/web/src/components/timeline/layers/node.tsx b/apps/web/src/components/timeline/layers/node.tsx
index 6e440a6d..ea6bf014 100644
--- a/apps/web/src/components/timeline/layers/node.tsx
+++ b/apps/web/src/components/timeline/layers/node.tsx
@@ -41,6 +41,7 @@ import { DEFAULT_CLIP_HEIGHT, MAX_CLIP_HEIGHT, MIN_CLIP_HEIGHT, getClipFallbackN
 import { NESTED_INDENT_PX } from './config';
 import { useLayerContext } from './context';
 import { setRowHover } from './hover';
+import { companionUiCapabilities } from '@/lib/companion-capabilities';
 
 import type { World } from 'koota';
 import type { TimelineNode } from '@diffusionstudio/runtime';
@@ -49,6 +50,7 @@ import type { LayerRowProps } from './layer';
 export function NodeLayer(props: LayerRowProps) {
   const world = useWorld();
   const editor = useEditor();
+  const capabilities = companionUiCapabilities();
 
   const entity = () => props.layer.entity;
 
@@ -74,16 +76,23 @@ export function NodeLayer(props: LayerRowProps) {
 
   const toggleMuted = (e?: Event) => {
     e?.stopPropagation();
+    if (!capabilities.projectWrite) return;
     editor.editProperty(entity(), 'muted', !muted());
   };
 
   const toggleHidden = (e?: Event) => {
     e?.stopPropagation();
+    if (!capabilities.projectWrite) return;
     editor.editProperty(entity(), 'hidden', !hidden());
   };
 
   const toggleExpanded = (e?: Event) => {
     e?.stopPropagation();
+    if (!capabilities.projectWrite) {
+      if (entity().has(Expanded)) entity().remove(Expanded);
+      else entity().add(Expanded);
+      return;
+    }
     editor.editProperty(entity(), 'expanded', !entity().has(Expanded));
   };
 
@@ -94,6 +103,7 @@ export function NodeLayer(props: LayerRowProps) {
    */
   const toggleSoloed = (e?: Event) => {
     e?.stopPropagation();
+    if (!capabilities.projectWrite) return;
 
     const wasSoloed = soloed();
     for (const other of world.query(Soloed)) other.remove(Soloed);
@@ -110,7 +120,7 @@ export function NodeLayer(props: LayerRowProps) {
     if ((e.target as HTMLElement | null)?.closest('button')) return;
 
     editor.select(entity(), { extend: e.shiftKey });
-    if (!e.shiftKey) drag.begin(e, entity());
+    if (capabilities.projectWrite && !e.shiftKey) drag.begin(e, entity());
   };
 
   let resizeStartY = 0;
@@ -128,6 +138,7 @@ export function NodeLayer(props: LayerRowProps) {
   };
 
   const handleResizeStart = (e: PointerEvent) => {
+    if (!capabilities.projectWrite) return;
     e.preventDefault();
     e.stopPropagation();
     resizeStartY = e.clientY;
@@ -154,6 +165,7 @@ export function NodeLayer(props: LayerRowProps) {
   };
 
   const startEditing = () => {
+    if (!capabilities.projectWrite) return;
     originalName = name();
     setEditing(true);
   };
@@ -237,7 +249,10 @@ export function NodeLayer(props: LayerRowProps) {
               <Show
                 when={editing()}
                 fallback={
-                  <span class="text-xs px-0.5 shrink-0 whitespace-nowrap text-foreground" onDblClick={startEditing}>
+                  <span
+                    class="text-xs px-0.5 shrink-0 whitespace-nowrap text-foreground"
+                    onDblClick={capabilities.projectWrite ? startEditing : undefined}
+                  >
                     {name()}
                   </span>
                 }
@@ -273,6 +288,7 @@ export function NodeLayer(props: LayerRowProps) {
                 class="invisible group-hover:visible"
                 style={{ visibility: muted() ? 'visible' : undefined }}
                 onClick={toggleMuted}
+                disabled={!capabilities.projectWrite}
               >
                 <Icon name="mute" class="size-6" />
               </TooltipTrigger>
@@ -288,6 +304,7 @@ export function NodeLayer(props: LayerRowProps) {
                 class="invisible group-hover:visible"
                 style={{ visibility: soloed() ? 'visible' : undefined }}
                 onClick={toggleSoloed}
+                disabled={!capabilities.projectWrite}
               >
                 <Icon name="solo" class="size-6" />
               </TooltipTrigger>
@@ -303,6 +320,7 @@ export function NodeLayer(props: LayerRowProps) {
                 class="invisible group-hover:visible"
                 onClick={toggleHidden}
                 style={{ visibility: hidden() ? 'visible' : undefined }}
+                disabled={!capabilities.projectWrite}
               >
                 <Show when={!hidden()} fallback={<Icon name="eye-off" class="size-6" />}>
                   <Icon name="eye-on" class="size-6" />
@@ -315,35 +333,39 @@ export function NodeLayer(props: LayerRowProps) {
           </div>
         </div>
 
-        {/* Drag the bottom edge to make the row taller. */}
-        <div
-          class="absolute bottom-0 left-0 right-0 h-[3px] cursor-ns-resize translate-y-0.5 z-20 group/resize"
-          onPointerDown={handleResizeStart}
-        >
+        <Show when={capabilities.projectWrite}>
+          {/* Drag the bottom edge to make the row taller. */}
           <div
-            class="absolute left-0 right-0 top-px h-px transition-colors group-hover/resize:bg-primary"
-            classList={{ 'bg-primary': resized() === entity() }}
-          />
-        </div>
+            class="absolute bottom-0 left-0 right-0 h-[3px] cursor-ns-resize translate-y-0.5 z-20 group/resize"
+            onPointerDown={handleResizeStart}
+          >
+            <div
+              class="absolute left-0 right-0 top-px h-px transition-colors group-hover/resize:bg-primary"
+              classList={{ 'bg-primary': resized() === entity() }}
+            />
+          </div>
+        </Show>
       </ContextMenuTrigger>
-      <ContextMenuPortal>
-        <ContextMenuContent class="w-[160px]">
-          <ContextMenuItem onSelect={toggleMuted}>{muted() ? 'Unmute' : 'Mute'}</ContextMenuItem>
-          <ContextMenuItem onSelect={toggleSoloed}>{soloed() ? 'Unsolo' : 'Solo'}</ContextMenuItem>
-          <ContextMenuItem onSelect={toggleHidden}>{hidden() ? 'Unhide' : 'Hide'}</ContextMenuItem>
-          <ContextMenuSeparator />
-          <ContextMenuItem onSelect={() => handleReorder('front')}>
-            Bring to front
-            <ContextMenuShortcut>]</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem onSelect={() => handleReorder('back')}>
-            Send to back
-            <ContextMenuShortcut>[</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuSeparator />
-          <ContextMenuItem onSelect={handleRemove}>Remove</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenuPortal>
+      <Show when={capabilities.projectWrite}>
+        <ContextMenuPortal>
+          <ContextMenuContent class="w-[160px]">
+            <ContextMenuItem onSelect={toggleMuted}>{muted() ? 'Unmute' : 'Mute'}</ContextMenuItem>
+            <ContextMenuItem onSelect={toggleSoloed}>{soloed() ? 'Unsolo' : 'Solo'}</ContextMenuItem>
+            <ContextMenuItem onSelect={toggleHidden}>{hidden() ? 'Unhide' : 'Hide'}</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem onSelect={() => handleReorder('front')}>
+              Bring to front
+              <ContextMenuShortcut>]</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem onSelect={() => handleReorder('back')}>
+              Send to back
+              <ContextMenuShortcut>[</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem onSelect={handleRemove}>Remove</ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
+      </Show>
     </ContextMenu>
   )
 }
diff --git a/apps/web/src/components/timeline/layers/sub-item.tsx b/apps/web/src/components/timeline/layers/sub-item.tsx
index 403a1f9b..426620ba 100644
--- a/apps/web/src/components/timeline/layers/sub-item.tsx
+++ b/apps/web/src/components/timeline/layers/sub-item.tsx
@@ -22,6 +22,7 @@ import { KEYFRAME_TRACK_HEIGHT } from '@/engine/timeline';
 import { effectOption } from '@/components/sidebar-right/inspector/effect-types';
 import { NESTED_INDENT_PX } from './config';
 import { setRowHover } from './hover';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 import type { Entity } from 'koota';
 import type { LayerRowProps } from './layer';
@@ -54,6 +55,11 @@ export function SubItemLayer(props: LayerRowProps) {
   const name = createMemo(() => describe(entity()));
 
   const toggleExpanded = () => {
+    if (!documentMutationsEnabled()) {
+      if (entity().has(Expanded)) entity().remove(Expanded);
+      else entity().add(Expanded);
+      return;
+    }
     editor.editProperty(entity(), 'expanded', !entity().has(Expanded));
   };
 
diff --git a/apps/web/src/components/timeline/timeline.tsx b/apps/web/src/components/timeline/timeline.tsx
index 77064060..bb4fc01d 100644
--- a/apps/web/src/components/timeline/timeline.tsx
+++ b/apps/web/src/components/timeline/timeline.tsx
@@ -12,6 +12,7 @@ import { insertAssetsInNewScene } from '@/engine/new-scene';
 import { useLibrary } from '@/engine/library';
 import { useTimeline } from '@/context/timeline';
 import { ASSET_DRAG_TYPE } from '@/components/sidebar-left/folder-item';
+import { companionUiCapabilities } from '@/lib/companion-capabilities';
 
 /**
  * The timeline's canvas. What is drawn on it is the timeline system's
@@ -22,6 +23,7 @@ export function Timeline() {
   const world = useWorld();
   const timeline = useTimeline();
   const library = useLibrary();
+  const capabilities = companionUiCapabilities();
 
   onMount(() => timeline.attachCanvas());
   onCleanup(() => timeline.detachCanvas());
@@ -38,6 +40,7 @@ export function Timeline() {
   const handleDrop = async (event: DragEvent) => {
     event.preventDefault();
     event.stopPropagation();
+    if (!capabilities.assetWrite || !capabilities.projectWrite) return;
 
     const lib = library();
     if (!lib) return;
@@ -70,7 +73,7 @@ export function Timeline() {
 
   const handleDragOver = (event: DragEvent) => {
     event.preventDefault();
-    event.dataTransfer!.dropEffect = 'copy';
+    event.dataTransfer!.dropEffect = capabilities.assetWrite && capabilities.projectWrite ? 'copy' : 'none';
   };
 
   return (
diff --git a/apps/web/src/context/auth.tsx b/apps/web/src/context/auth.tsx
index be1112e7..7ae85bc7 100644
--- a/apps/web/src/context/auth.tsx
+++ b/apps/web/src/context/auth.tsx
@@ -23,6 +23,7 @@ import { identify, resetIdentity, track } from '@/lib/analytics';
 import { mainBridge } from '@/lib/ipc';
 import { MAIN_CHANNELS } from '@desktop/main-channels';
 import { assert } from '@/utils';
+import { isBrowserCompanionRenderer } from '@/lib/companion-authority';
 
 type OAuthProvider = 'google' | 'apple' | 'github';
 
@@ -70,6 +71,10 @@ export function AuthProvider(props: { children: JSX.Element }) {
   const [headless, setHeadless] = createSignal(false);
 
   onMount(() => {
+	if (isBrowserCompanionRenderer()) {
+		setHeadless(true);
+		return;
+	}
     if (!window.desktop) return;
 
     mainBridge
diff --git a/apps/web/src/context/export.tsx b/apps/web/src/context/export.tsx
index 43054dd6..76ab74a4 100644
--- a/apps/web/src/context/export.tsx
+++ b/apps/web/src/context/export.tsx
@@ -12,6 +12,7 @@ import { assert, downloadObject, isInputTarget } from "@/utils";
 import { useEngineContext } from "@/engine";
 import { useProject } from "@/context/project";
 import { track } from "@/lib/analytics";
+import { isCompanionExportDisabled, runExportAction } from "@/lib/companion-export";
 import { ExportProgress, type ExportConfig } from "@/components/sidebar-right/inspector/export-progress";
 import { renderScene, renderOverlay, cancelRender } from "@/context/render";
 import {
@@ -40,7 +41,7 @@ export function ExportProvider(props: { children: JSX.Element }) {
   const sceneDurationSeconds = (scene: Entity) =>
     (scene.get(Computed)?.duration ?? 0) / (world.get(FrameRate)?.value || 30);
 
-  const exportScene: ExportContextValue["exportScene"] = async (scene, config) => {
+  const exportScene: ExportContextValue["exportScene"] = (scene, config) => runExportAction("scene", async () => {
     if (!scene?.isAlive()) return;
 
     const format = config.format ?? "mp4";
@@ -142,9 +143,9 @@ export function ExportProvider(props: { children: JSX.Element }) {
         error: (e as Error).message?.slice(0, 200) ?? 'unknown',
       });
     }
-  };
+  });
 
-  const exportCurrentFrame: ExportContextValue["exportCurrentFrame"] = async () => {
+  const exportCurrentFrame: ExportContextValue["exportCurrentFrame"] = () => runExportAction("frame", async () => {
     const blob = await engine.snapshot();
 
     if (!blob) {
@@ -154,7 +155,7 @@ export function ExportProvider(props: { children: JSX.Element }) {
 
     const projectName = project.name().replace(/\s+/g, "-").toLowerCase();
     await downloadObject(blob, `${projectName}-frame.png`);
-  };
+  });
 
   const exportActiveScene = () => {
     const scene = getActiveEntity(world);
@@ -174,6 +175,7 @@ export function ExportProvider(props: { children: JSX.Element }) {
     if (isInputTarget(event)) return;
 
     event.preventDefault();
+    if (isCompanionExportDisabled()) return;
     if (event.shiftKey) void exportCurrentFrame();
     else exportActiveScene();
   };
diff --git a/apps/web/src/context/project.tsx b/apps/web/src/context/project.tsx
index cf7bb396..211bd128 100644
--- a/apps/web/src/context/project.tsx
+++ b/apps/web/src/context/project.tsx
@@ -14,6 +14,7 @@ import { createContext, createMemo, createSignal, useContext, type Accessor, typ
 import { getProject, renameProject } from '@/projects';
 
 import type { ProjectInfo } from '@/projects';
+import { isBrowserCompanionRenderer } from '@/lib/companion-authority';
 
 export type ProjectContextValue = {
 	/** package.json `projectId`: what the project is, whatever it is called. */
@@ -42,6 +43,7 @@ export function ProjectProvider(props: { project: ProjectInfo; children: JSX.Ele
 	const name = createMemo(() => info().displayName);
 
 	const rename = async (displayName: string): Promise<void> => {
+		if (isBrowserCompanionRenderer()) throw new Error('Browser companion is read-only');
 		setInfo(await renameProject(dir(), displayName));
 	};
 
diff --git a/apps/web/src/engine/capture.ts b/apps/web/src/engine/capture.ts
index 52ef6180..026c7a2e 100644
--- a/apps/web/src/engine/capture.ts
+++ b/apps/web/src/engine/capture.ts
@@ -169,7 +169,6 @@ export async function createCapture(source: World, node: Entity, options: Captur
 	for (const root of world.query(ChildOf(world.get(Root)!))) {
 		if (root !== rendered) root.destroy();
 	}
-
 	// The project may have spelled `<stage camera={…}>`, which is where the
 	// editor was last looking — no part of the composition, and the view an
 	// encode draws with is the plain one.
diff --git a/apps/web/src/engine/editor.ts b/apps/web/src/engine/editor.ts
index 84fca003..a587c09b 100644
--- a/apps/web/src/engine/editor.ts
+++ b/apps/web/src/engine/editor.ts
@@ -17,6 +17,7 @@ import { createRoot } from 'solid-js';
 import { authoredElement, authoredTree, getRuntimeDocument, insert, isSceneNode, renderAuthored, withDocument } from '@diffusionstudio/reconciler';
 
 import { findInspectEntry } from './inspect';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 import type { SceneNode } from '@diffusionstudio/runtime';
 import type { InspectValue, PropValue, SerializedAssetRef } from '@diffusionstudio/jsx';
@@ -326,6 +327,7 @@ export class DocumentEditor {
 
 	/** Writes a prop to the document and reports it. */
 	public editProperty(entity: Entity, name: string, value: PropValue): void {
+		if (!documentMutationsEnabled()) return;
 		const node = this.document.node(entity);
 		let previous = node.props[name];
 		// The stage keeps no authored record (see RuntimeDocument.setProperty),
@@ -347,6 +349,7 @@ export class DocumentEditor {
 	 * was recorded against.
 	 */
 	public editVariable(file: string, name: string, value: InspectValue): void {
+		if (!documentMutationsEnabled()) return;
 		const entry = findInspectEntry(this.world, file, name);
 		if (!entry) return;
 		// Against the committed value, not the live one
@@ -362,6 +365,7 @@ export class DocumentEditor {
 	 * something the others do not.
 	 */
 	public editText(entity: Entity, text: string): void {
+		if (!documentMutationsEnabled()) return;
 		const previous = entity.get(Chars)?.value ?? '';
 		this.document.setText(entity, text);
 		this.settle(entity);
@@ -381,6 +385,7 @@ export class DocumentEditor {
 	 * out, and the edit is not undoable.
 	 */
 	public reportEdit(entity: Entity, name: string, value: PropValue, previous?: unknown): void {
+		if (!documentMutationsEnabled()) return;
 		this.settle(entity);
 		const source = entity.get(Source)?.value;
 
@@ -532,6 +537,7 @@ export class DocumentEditor {
 	 * loop still renders them, it just cannot be written to.
 	 */
 	public unsettle(edit: UnrollEdit): void {
+		if (!documentMutationsEnabled()) return;
 		const originals = new Map<string, string>();
 		const members = new Set<string>();
 		for (const iteration of edit.iterations) {
@@ -569,6 +575,7 @@ export class DocumentEditor {
 	 * written under.
 	 */
 	public insertElement(parent: Entity, element: () => unknown, anchor?: Entity): Entity[] {
+		if (!documentMutationsEnabled()) return [];
 		if (!parent.get(Source)?.value) return [];
 		// A child of one iteration's element, not of every iteration's.
 		this.settle(parent);
@@ -636,6 +643,7 @@ export class DocumentEditor {
 	 * `active`: one entity holds it). Returns the copies' top-level entities.
 	 */
 	public duplicate(entities: Entity | Entity[]): Entity[] {
+		if (!documentMutationsEnabled()) return [];
 		const copies: Entity[] = [];
 		for (const source of this.subtreeRoots(entities)) {
 			const tree = this.spell(source);
@@ -675,6 +683,7 @@ export class DocumentEditor {
 	 * pairs it made, in the order of the originals.
 	 */
 	public duplicateInPlace(entities: Entity | Entity[]): { original: Entity; copy: Entity }[] {
+		if (!documentMutationsEnabled()) return [];
 		const pairs: { original: Entity; copy: Entity }[] = [];
 
 		for (const original of this.subtreeRoots(entities)) {
@@ -711,6 +720,7 @@ export class DocumentEditor {
 	 * empty element is not worth putting in the file.
 	 */
 	public wrap(entities: Entity | Entity[], element: () => unknown): Entity | null {
+		if (!documentMutationsEnabled()) return null;
 		const roots = new Set(this.subtreeRoots(entities));
 		const first = [...roots][0];
 		if (!first) return null;
@@ -759,6 +769,7 @@ export class DocumentEditor {
 	 * or null when the node has no intrinsic media to remove.
 	 */
 	public removeIntrinsicPaint(node: Entity): Entity | null {
+		if (!documentMutationsEnabled()) return null;
 		const intrinsic = getIntrinsicPaint(node);
 		if (intrinsic !== PaintType.VIDEO && intrinsic !== PaintType.IMAGE) return null;
 
@@ -829,6 +840,7 @@ export class DocumentEditor {
 	 * copies. Returns their top-level entities.
 	 */
 	public paste(parent: Entity, anchor?: Entity): Entity[] {
+		if (!documentMutationsEnabled()) return [];
 		const { trees, parent: copiedFrom } = this.clipboard;
 		if (!trees.length) return [];
 
@@ -887,6 +899,7 @@ export class DocumentEditor {
 	 * way would have put it (ordering included).
 	 */
 	public reparent(entity: Entity, parent: Entity, anchor?: Entity): boolean {
+		if (!documentMutationsEnabled()) return false;
 		if (!entity.get(Source)?.value || !parent.get(Source)?.value) return false;
 		// Appending where it already is, last, is the one move that changes
 		// nothing. Appending from anywhere else in the same parent is a real
@@ -951,6 +964,7 @@ export class DocumentEditor {
 	 * source), stays. Returns the entities that were removed at the top level.
 	 */
 	public remove(entities: Entity | Entity[]): Entity[] {
+		if (!documentMutationsEnabled()) return [];
 		const doomed = new Set(
 			(Array.isArray(entities) ? entities : [entities]).filter(
 				(entity) => entity.isAlive() && !entity.has(Stage) && !!entity.get(Source)?.value,
@@ -994,6 +1008,7 @@ export class DocumentEditor {
 	 * the world still holds.
 	 */
 	public restamp(ids: Record<string, string>): void {
+		if (!documentMutationsEnabled()) return;
 		for (const entity of this.world.query(Source)) {
 			const next = ids[entity.get(Source)!.value];
 			if (next) entity.set(Source, { value: next });
@@ -1006,6 +1021,7 @@ export class DocumentEditor {
 	 * place in the file, so it has no place on the canvas either.
 	 */
 	public discardPending(source: string): void {
+		if (!documentMutationsEnabled()) return;
 		if (!isPendingSource(source)) return;
 		const document = this.document;
 		// Snapshot: destroying cascades through the subtree, and a live query
diff --git a/apps/web/src/engine/hud/hud-system.ts b/apps/web/src/engine/hud/hud-system.ts
index aafefc97..86402a6b 100644
--- a/apps/web/src/engine/hud/hud-system.ts
+++ b/apps/web/src/engine/hud/hud-system.ts
@@ -20,6 +20,7 @@ import {
 } from '../input/interactions';
 import { getMarqueeQuad } from '../input/snapping';
 import { getMountedNameInput } from './name-input';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 import type { Entity, World } from 'koota';
 import type { Mat2D } from '@diffusionstudio/runtime';
@@ -252,6 +253,9 @@ function drawSelectionMask(world: World, ctx: Ctx2D, mask: { width: number; heig
 		callback: handleMaskInteraction,
 	});
 
+	// A companion selection is an inspection outline, not a transform affordance.
+	if (!documentMutationsEnabled()) return;
+
 	const rotate = Math.round(16 * resolution);
 	const rotateRegions: Record<string, [x: number, y: number]> = {
 		rtl: [-rotate, -rotate],
diff --git a/apps/web/src/engine/input/interactions.ts b/apps/web/src/engine/input/interactions.ts
index 4cb4ccb0..d0f8cedc 100644
--- a/apps/web/src/engine/input/interactions.ts
+++ b/apps/web/src/engine/input/interactions.ts
@@ -35,6 +35,7 @@ import { syncKeyframe } from '../keyframes';
 import { AssetSelection, Hud, Keys, Pointer, SnapLines } from '../traits';
 import { getToolCursor, updateCursor, type CursorType } from './cursor';
 import { mountNameInput } from '../hud/name-input';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 import {
 	buildSnapCandidatesFromCorners, buildSnapCandidatesFromQuad, findSnapTarget,
 	getMarqueeQuad, getSelectionMaskSnapshot, getSnapCandidatesSnapshot,
@@ -130,6 +131,7 @@ export function editTransform(
 	entity: Entity,
 	writes: readonly TransformWrite[],
 ): void {
+	if (!documentMutationsEnabled()) return;
 	const changed = writes.filter(([name, value]) => value !== shownTransform(world, entity, name));
 
 	for (const [name, value] of changed) syncKeyframe(world, editor, entity, name, value);
@@ -281,7 +283,7 @@ export function handleLabelInteraction(world: World, event: DispatchedPointerEve
 	}
 
 	if (event.type === 'dblclick') {
-		mountNameInput(world, entity);
+		if (documentMutationsEnabled()) mountNameInput(world, entity);
 	}
 
 	if (event.type === 'click' && entity.has(Scene)) {
@@ -294,6 +296,7 @@ export function handleLabelInteraction(world: World, event: DispatchedPointerEve
 /** A resize handle on the selection mask: an edge, or a corner. */
 export function handleResizeInteraction(world: World, event: DispatchedPointerEvent): void {
 	if (event.target.kind !== 'hud' || !isHandle(event.target.id)) return;
+	if (!documentMutationsEnabled()) return;
 
 	const handle = event.target.id;
 	const factor = HANDLE_FACTOR[handle];
@@ -564,6 +567,7 @@ function keepGroupPlaced(world: World, group: Entity): void {
 
 /** A rotation handle, just outside a corner of the selection mask. */
 export function handleRotateInteraction(world: World, event: DispatchedPointerEvent): void {
+	if (!documentMutationsEnabled()) return;
 	if (event.type === 'dragstart') {
 		snapshotSelectionTransforms(world);
 		snapshotSelectionMask(world);
@@ -649,6 +653,8 @@ export function handleMaskInteraction(world: World, event: DispatchedPointerEven
 		return;
 	}
 
+	if (!documentMutationsEnabled()) return;
+
 	if (event.type === 'dragstart') {
 		snapshotSelectionMask(world);
 		snapshotSelectionTransforms(world);
diff --git a/apps/web/src/engine/input/shortcuts.ts b/apps/web/src/engine/input/shortcuts.ts
index eb8da1c9..c887b652 100644
--- a/apps/web/src/engine/input/shortcuts.ts
+++ b/apps/web/src/engine/input/shortcuts.ts
@@ -37,6 +37,7 @@ import { getEditHistory } from '../history';
 import { splitAtPlayhead } from '../split';
 import { Keys, MODIFIER_KEYS, Pointer } from '../traits';
 import { editTransform } from './interactions';
+import { companionUiCapabilities } from '@/lib/companion-capabilities';
 
 import type { TransformWrite } from './interactions';
 import type { CameraMatrix } from '@diffusionstudio/runtime';
@@ -45,6 +46,7 @@ import type { Entity, World } from 'koota';
 type Shortcut = {
 	keys: string[];
 	action: (world: World) => void;
+	projectWrite?: boolean;
 }
 
 /** The node kinds a shortcut selects, hides or seeks around. */
@@ -382,21 +384,21 @@ function deselect(world: World): void {
 }
 
 const PRESSED_SHORTCUTS: readonly Shortcut[] = [
-	{ keys: ['z', 'mod', '!shift'], action: undoEdit },
-	{ keys: ['z', 'mod', 'shift'], action: redoEdit },
-	{ keys: ['backspace'], action: deleteSelection },
-	{ keys: ['delete'], action: deleteSelection },
-	{ keys: ['d', 'mod', '!shift'], action: duplicateSelection },
-	{ keys: ['g', 'mod', '!shift'], action: groupSelection },
-	{ keys: ['g', 'mod', 'shift'], action: ungroupSelection },
-	{ keys: ['enter', 'mod', '!shift', '!alt'], action: wrapSelectionInScene },
-	{ keys: ['enter', 'mod', 'alt', '!shift'], action: wrapSelectionInSequence },
-	{ keys: ['enter', 'mod', 'alt', 'shift'], action: unwrapSequenceSelection },
-	{ keys: ['b', 'mod'], action: splitAtPlayhead },
+	{ keys: ['z', 'mod', '!shift'], action: undoEdit, projectWrite: true },
+	{ keys: ['z', 'mod', 'shift'], action: redoEdit, projectWrite: true },
+	{ keys: ['backspace'], action: deleteSelection, projectWrite: true },
+	{ keys: ['delete'], action: deleteSelection, projectWrite: true },
+	{ keys: ['d', 'mod', '!shift'], action: duplicateSelection, projectWrite: true },
+	{ keys: ['g', 'mod', '!shift'], action: groupSelection, projectWrite: true },
+	{ keys: ['g', 'mod', 'shift'], action: ungroupSelection, projectWrite: true },
+	{ keys: ['enter', 'mod', '!shift', '!alt'], action: wrapSelectionInScene, projectWrite: true },
+	{ keys: ['enter', 'mod', 'alt', '!shift'], action: wrapSelectionInSequence, projectWrite: true },
+	{ keys: ['enter', 'mod', 'alt', 'shift'], action: unwrapSequenceSelection, projectWrite: true },
+	{ keys: ['b', 'mod'], action: splitAtPlayhead, projectWrite: true },
 	{ keys: ['c', 'mod'], action: copySelection },
-	{ keys: ['v', 'mod'], action: pasteSelection },
-	{ keys: ['x', 'mod'], action: cutSelection },
-	{ keys: ['h', 'mod', 'shift'], action: toggleSelectionHidden },
+	{ keys: ['v', 'mod'], action: pasteSelection, projectWrite: true },
+	{ keys: ['x', 'mod'], action: cutSelection, projectWrite: true },
+	{ keys: ['h', 'mod', 'shift'], action: toggleSelectionHidden, projectWrite: true },
 	{ keys: ['a', 'mod'], action: selectAll },
 	{ keys: ['=', 'mod'], action: zoom(ZOOM_STEP) },
 	{ keys: ['+', 'mod'], action: zoom(ZOOM_STEP) },
@@ -406,26 +408,26 @@ const PRESSED_SHORTCUTS: readonly Shortcut[] = [
 	{ keys: ['2', 'mod'], action: zoomToSelection },
 	{ keys: ['v', '!mod'], action: selectTool(ToolType.MOVE) },
 	{ keys: ['h', '!mod'], action: selectTool(ToolType.HAND) },
-	{ keys: ['f', '!mod'], action: selectTool(ToolType.SCENE) },
-	{ keys: ['t', '!mod'], action: selectTool(ToolType.TEXT) },
-	{ keys: ['r', '!mod'], action: selectTool(ToolType.RECT) },
+	{ keys: ['f', '!mod'], action: selectTool(ToolType.SCENE), projectWrite: true },
+	{ keys: ['t', '!mod'], action: selectTool(ToolType.TEXT), projectWrite: true },
+	{ keys: ['r', '!mod'], action: selectTool(ToolType.RECT), projectWrite: true },
 	{ keys: ['a', '!mod'], action: seekFrames(-1) },
 	{ keys: ['d', '!mod'], action: seekFrames(1) },
 	{ keys: ['w', '!mod'], action: seekSeconds(1) },
 	{ keys: ['s', '!mod'], action: seekSeconds(-1) },
-	{ keys: [']', '!mod'], action: restack('front') },
-	{ keys: ['[', '!mod'], action: restack('back') },
+	{ keys: [']', '!mod'], action: restack('front'), projectWrite: true },
+	{ keys: ['[', '!mod'], action: restack('back'), projectWrite: true },
 	{ keys: ['\\', '!mod'], action: selectParents },
 	{ keys: ['enter', '!mod'], action: selectChildren },
 	{ keys: ['escape'], action: deselect },
-	{ keys: ['arrowleft', '!shift'], action: nudge(-NUDGE, 0) },
-	{ keys: ['arrowright', '!shift'], action: nudge(NUDGE, 0) },
-	{ keys: ['arrowup', '!shift'], action: nudge(0, -NUDGE) },
-	{ keys: ['arrowdown', '!shift'], action: nudge(0, NUDGE) },
-	{ keys: ['arrowleft', 'shift'], action: nudge(-NUDGE_FAST, 0) },
-	{ keys: ['arrowright', 'shift'], action: nudge(NUDGE_FAST, 0) },
-	{ keys: ['arrowup', 'shift'], action: nudge(0, -NUDGE_FAST) },
-	{ keys: ['arrowdown', 'shift'], action: nudge(0, NUDGE_FAST) },
+	{ keys: ['arrowleft', '!shift'], action: nudge(-NUDGE, 0), projectWrite: true },
+	{ keys: ['arrowright', '!shift'], action: nudge(NUDGE, 0), projectWrite: true },
+	{ keys: ['arrowup', '!shift'], action: nudge(0, -NUDGE), projectWrite: true },
+	{ keys: ['arrowdown', '!shift'], action: nudge(0, NUDGE), projectWrite: true },
+	{ keys: ['arrowleft', 'shift'], action: nudge(-NUDGE_FAST, 0), projectWrite: true },
+	{ keys: ['arrowright', 'shift'], action: nudge(NUDGE_FAST, 0), projectWrite: true },
+	{ keys: ['arrowup', 'shift'], action: nudge(0, -NUDGE_FAST), projectWrite: true },
+	{ keys: ['arrowdown', 'shift'], action: nudge(0, NUDGE_FAST), projectWrite: true },
 	{ keys: [' '], action: onSpacePressed },
 ];
 
@@ -467,7 +469,10 @@ export function shortcutSystem(world: World): void {
 	if (!keys) return;
 
 	if (keys.pressed.size) {
-		PRESSED_SHORTCUTS.find(shortcut => matches(shortcut, keys.pressed, keys.held))?.action(world);
+		const capabilities = companionUiCapabilities();
+		PRESSED_SHORTCUTS.find(shortcut =>
+			(!shortcut.projectWrite || capabilities.projectWrite) && matches(shortcut, keys.pressed, keys.held)
+		)?.action(world);
 	}
 
 	if (keys.lifted.size) {
diff --git a/apps/web/src/engine/timeline/render/clip.ts b/apps/web/src/engine/timeline/render/clip.ts
index 50f5b871..306e89e6 100644
--- a/apps/web/src/engine/timeline/render/clip.ts
+++ b/apps/web/src/engine/timeline/render/clip.ts
@@ -22,6 +22,7 @@ import { renderCaption } from './caption';
 import { renderGroup } from './group';
 import { renderStillThumbnails, renderVideoThumbnails } from './thumbnails';
 import { renderWaveform } from './waveform';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 import type { Entity, World } from 'koota';
 import type { Asset } from '@diffusionstudio/assets';
@@ -144,6 +145,7 @@ function handleTrim(
 	row: RowCursor,
 	resolution: number,
 ): void {
+	if (!documentMutationsEnabled()) return;
 	// A container that takes its bounds from its children has no edge of its
 	// own to take hold of — moving one would be moving a child. One that
 	// authors its own end does, and is trimmed like any other clip.
@@ -246,10 +248,11 @@ function handleBody(
 	// A press that travels starts a move. The press selected the clip first,
 	// so a drag of an unselected clip moves that one and a drag of a selected
 	// one moves everything selected (see `updateDragGestures`).
-	if (dragging && !entity.has(ClipDragOrigin) && !entity.has(TrimDragOrigin)) {
+	const canMove = documentMutationsEnabled();
+	if (canMove && dragging && !entity.has(ClipDragOrigin) && !entity.has(TrimDragOrigin)) {
 		beginClipDrag(world, entity);
 	}
-	if (entity.has(ClipDragOrigin)) {
+	if (canMove && entity.has(ClipDragOrigin)) {
 		applyClipDrag(world, surface, entity, resolution);
 	}
 
diff --git a/apps/web/src/engine/timeline/render/keyframes.ts b/apps/web/src/engine/timeline/render/keyframes.ts
index 03449660..0eb75e3c 100644
--- a/apps/web/src/engine/timeline/render/keyframes.ts
+++ b/apps/web/src/engine/timeline/render/keyframes.ts
@@ -18,6 +18,7 @@ import { getDocumentEditor } from '../../editor';
 import { KEYFRAME_TRACK_HEIGHT } from '../config';
 import { getRowTransform } from '../layout';
 import { framesToPixels, getFrameRate, getResolution, getViewport, pixelsToFrames } from '../view';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 import type { Entity, World } from 'koota';
 import type { RowCursor } from '../layout';
@@ -152,6 +153,8 @@ function handleKeyframe(
 		editor.select(keyframe, { extend: pointer.shiftPressed });
 	}
 
+	if (!documentMutationsEnabled()) return;
+
 	if (dragging && !keyframe.has(KeyframeDragOrigin)) {
 		keyframe.add(KeyframeDragOrigin);
 		keyframe.set(KeyframeDragOrigin, { time });
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index 375640f6..eb633757 100644
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -4,13 +4,35 @@
 
 /* @refresh reload */
 import * as Sentry from '@sentry/solid'
+import { createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
 import './index.css'
 import App from './app'
 import { initAnalytics } from './lib/analytics'
 import { restoreLastRoute } from './lib/persist-route'
+import { companionError, initializeBrowserCompanion } from './lib/browser-companion'
+import { isBrowserCompanionRenderer } from './lib/companion-authority'
+import { isBrowserCompanionHostRenderer, isLocalOnly } from './lib/local-only'
+import { setRemoteWebFontsEnabled } from '@diffusionstudio/runtime'
 
-if (import.meta.env.PROD) {
+const localOnly = isLocalOnly()
+const [companionShell, setCompanionShell] = createSignal(
+  document.documentElement.dataset.companion === '1' ||
+    new URLSearchParams(window.location.search).has('companion-shell'),
+)
+const [companionDisconnected, setCompanionDisconnected] = createSignal(
+  document.documentElement.dataset.companionDisconnected === '1',
+)
+new MutationObserver(() => {
+  if (document.documentElement.dataset.companion === '1') setCompanionShell(true)
+  setCompanionDisconnected(document.documentElement.dataset.companionDisconnected === '1')
+}).observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['data-companion', 'data-companion-disconnected'],
+})
+setRemoteWebFontsEnabled(!localOnly)
+
+if (import.meta.env.PROD && !localOnly) {
   Sentry.init({
     dsn: 'https://5786931d60606166d379cd2405683cb1@o4511326229889024.ingest.us.sentry.io/4511326232903680',
     sendDefaultPii: true,
@@ -33,11 +55,30 @@ if (window.desktop) {
     }
   };
 
-  restoreLastRoute();
+  if (!isBrowserCompanionHostRenderer()) restoreLastRoute();
 }
 
+void initializeBrowserCompanion()
 initAnalytics()
 
 const root = document.getElementById('root')
 
-render(() => <App />, root!)
+render(() => {
+  const error = companionError()
+  if (
+    (companionShell() && (!isBrowserCompanionRenderer() || companionDisconnected())) ||
+    (isBrowserCompanionRenderer() && error)
+  ) {
+    return (
+      <main class="flex h-screen w-screen items-center justify-center bg-background px-6 text-foreground">
+        <div class="max-w-md rounded-lg border border-border-strong bg-sidebar p-6 text-center shadow-xl">
+          <h1 class="text-base font-semibold">Browser companion disconnected</h1>
+          <p class="mt-2 text-sm text-muted-foreground">
+            {error ?? 'This one-time session cannot be reloaded.'} Start a fresh session with <code>dapi browser &lt;project&gt;</code>.
+          </p>
+        </div>
+      </main>
+    )
+  }
+  return <App />
+}, root!)
diff --git a/apps/web/src/lib/analytics.ts b/apps/web/src/lib/analytics.ts
index 080fc1f9..6d0a4086 100644
--- a/apps/web/src/lib/analytics.ts
+++ b/apps/web/src/lib/analytics.ts
@@ -11,6 +11,8 @@
  * via the History API — call `track` only for custom product events.
  */
 
+import { isLocalOnly } from "./local-only";
+
 type UmamiEventData = Record<string, string | number | boolean | undefined>;
 
 type UmamiClient = {
@@ -31,7 +33,7 @@ const domains = import.meta.env.VITE_UMAMI_DOMAINS ?? '';
 let initialized = false;
 
 export function initAnalytics(): void {
-  if (initialized) return;
+  if (initialized || isLocalOnly()) return;
   initialized = true;
 
   const script = document.createElement("script");
diff --git a/apps/web/src/lib/browser-companion.ts b/apps/web/src/lib/browser-companion.ts
new file mode 100644
index 00000000..bb7850a4
--- /dev/null
+++ b/apps/web/src/lib/browser-companion.ts
@@ -0,0 +1,69 @@
+import { createSignal } from "solid-js";
+import {
+  COMPANION_PROTOCOL_VERSION,
+  COMPANION_SCHEMA_HASH,
+  parseCompanionSnapshot,
+  type CompanionServerMessage,
+  type CompanionSnapshot,
+  type CompanionApplyAcknowledgement,
+} from "./companion-protocol";
+import { browserCompanionAuthority, isBrowserCompanionRenderer } from "./companion-authority";
+
+const [snapshot, setSnapshot] = createSignal<CompanionSnapshot | null>(null);
+const [error, setError] = createSignal<string | null>(null);
+const listeners = new Set<(message: CompanionServerMessage) => void>();
+let initialized: Promise<CompanionSnapshot | null> | null = null;
+
+function validate(value: CompanionSnapshot): CompanionSnapshot {
+  const parsed = parseCompanionSnapshot(value);
+  if (parsed.appVersion !== APP_VERSION) throw new Error(`Companion app version mismatch (${parsed.appVersion} vs ${APP_VERSION})`);
+  if (parsed.buildHash !== browserCompanionAuthority?.expectedBuildHash) throw new Error("Companion web build hash mismatch");
+  if (!/^[a-f0-9]{64}$/.test(parsed.bundleHash)) throw new Error("Companion bundle hash is invalid");
+  return parsed;
+}
+
+export function initializeBrowserCompanion(): Promise<CompanionSnapshot | null> {
+  if (initialized) return initialized;
+  const authority = browserCompanionAuthority;
+  if (!authority) return Promise.resolve(null);
+
+  initialized = authority
+    .connect({ protocol: COMPANION_PROTOCOL_VERSION, schemaHash: COMPANION_SCHEMA_HASH, appVersion: APP_VERSION })
+    .then((value) => {
+      const next = validate(value);
+      setSnapshot(next);
+      authority.subscribe((message) => {
+        if (message.type === "bundle") {
+          try { setSnapshot(validate(message.snapshot)); }
+          catch (cause) { setError((cause as Error).message); }
+        } else if (message.type === "disconnected" || message.type === "stopped") {
+          setError("Disconnected; start a fresh browser companion session");
+        }
+        for (const listener of listeners) listener(message);
+      });
+      return next;
+    })
+    .catch((cause) => {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      return null;
+    });
+  return initialized;
+}
+
+export const companionSnapshot = snapshot;
+export const companionError = error;
+
+export function onCompanionMessage(listener: (message: CompanionServerMessage) => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function reportCompanionSemantic(event: "playback.play" | "playback.pause" | "playback.scrub", data: { time: number }): void {
+  browserCompanionAuthority?.semantic(event, data);
+}
+
+export function reportCompanionApplied(acknowledgement: CompanionApplyAcknowledgement): void {
+  browserCompanionAuthority?.applied(acknowledgement);
+}
+
+export { isBrowserCompanionRenderer };
diff --git a/apps/web/src/lib/checkout.ts b/apps/web/src/lib/checkout.ts
index 6410369a..e924c21b 100644
--- a/apps/web/src/lib/checkout.ts
+++ b/apps/web/src/lib/checkout.ts
@@ -13,6 +13,7 @@ import type {
 import { trpc } from "./trpc";
 import { mainBridge } from "./ipc";
 import { MAIN_CHANNELS } from "@desktop/main-channels";
+import { isLocalOnly } from "./local-only";
 
 function toastMessage(err: unknown, fallback: string): string {
   // Empty / non-JSON 500 bodies (e.g. upstream crashed before tRPC could
@@ -23,6 +24,12 @@ function toastMessage(err: unknown, fallback: string): string {
   return err instanceof Error ? err.message : fallback;
 }
 
+function assertCheckoutEnabled(): void {
+  if (isLocalOnly()) {
+    throw new Error("Checkout is disabled in the browser companion's zero-credit local-only mode.");
+  }
+}
+
 export const CREDIT_RATE = 0.01;
 export const ANNUAL_DISCOUNT = 0.24;
 
@@ -103,6 +110,7 @@ export async function startSubscriptionCheckout(input: {
   billingPeriod: BillingPeriod;
 }): Promise<void> {
   try {
+    assertCheckoutEnabled();
     const { url } = await trpc.createSubscription.mutate({
       ...input,
       ...successAndCancelUrls(),
@@ -117,6 +125,7 @@ export async function startTopupCheckout(
   creditQuantity: TopupCredits,
 ): Promise<void> {
   try {
+    assertCheckoutEnabled();
     const { url } = await trpc.createTopup.mutate({
       creditQuantity,
       ...successAndCancelUrls(),
@@ -128,6 +137,10 @@ export async function startTopupCheckout(
 }
 
 export async function openBillingPortal(): Promise<void> {
+  if (isLocalOnly()) {
+    toast.error("Billing is disabled in the browser companion's zero-credit local-only mode.");
+    return;
+  }
   if (window.desktop) {
     try {
       const { url } = await trpc.createBillingPortal.mutate();
diff --git a/apps/web/src/lib/companion-authority.ts b/apps/web/src/lib/companion-authority.ts
new file mode 100644
index 00000000..2de917ff
--- /dev/null
+++ b/apps/web/src/lib/companion-authority.ts
@@ -0,0 +1,17 @@
+/**
+ * Bootstrap captures companion authority before any trusted project bundle is
+ * evaluated.  Keep the reference in this module closure: project code and
+ * DevTools may attempt to replace the public diagnostic global, but renderer
+ * policy never re-reads that mutable namespace.
+ */
+const capturedCompanion =
+  typeof window !== "undefined" && window.browserCompanion?.enabled === true
+    ? window.browserCompanion
+    : undefined;
+
+export const browserCompanionAuthority = capturedCompanion;
+export const browserCompanionRenderer = capturedCompanion !== undefined;
+
+export function isBrowserCompanionRenderer(): boolean {
+  return browserCompanionRenderer;
+}
diff --git a/apps/web/src/lib/companion-capabilities.ts b/apps/web/src/lib/companion-capabilities.ts
new file mode 100644
index 00000000..b6ff74bc
--- /dev/null
+++ b/apps/web/src/lib/companion-capabilities.ts
@@ -0,0 +1,81 @@
+import { isBrowserCompanionRenderer } from "./companion-authority.ts";
+import { isBrowserCompanionHostRenderer } from "./local-only.ts";
+
+/** Both companion surfaces are read-only; only Electron keeps DAPI authority. */
+function isCompanionSurface(): boolean {
+  return isBrowserCompanionRenderer() || isBrowserCompanionHostRenderer();
+}
+
+export interface CompanionUiCapabilities {
+  inspect: boolean;
+  playback: boolean;
+  connectProjectFolder: boolean;
+  ai: boolean;
+  assetWrite: boolean;
+  projectWrite: boolean;
+  account: boolean;
+  export: boolean;
+  externalNavigation: boolean;
+  desktopPromotion: boolean;
+}
+
+const ORDINARY_UI_CAPABILITIES: Readonly<CompanionUiCapabilities> = Object.freeze({
+  inspect: true,
+  playback: true,
+  connectProjectFolder: false,
+  ai: true,
+  assetWrite: true,
+  projectWrite: true,
+  account: true,
+  export: true,
+  externalNavigation: true,
+  desktopPromotion: true,
+});
+
+const COMPANION_UI_CAPABILITIES: Readonly<CompanionUiCapabilities> = Object.freeze({
+  inspect: true,
+  playback: true,
+  connectProjectFolder: false,
+  ai: false,
+  assetWrite: false,
+  projectWrite: false,
+  account: false,
+  export: false,
+  externalNavigation: false,
+  desktopPromotion: false,
+});
+
+/**
+ * The browser is a read-only human renderer. Electron remains the project,
+ * AI, account, export, and filesystem authority; only inspection and playback
+ * cross this Phase A UI seam.
+ */
+export function companionUiCapabilities(
+  companion = isCompanionSurface(),
+): Readonly<CompanionUiCapabilities> {
+  return companion ? COMPANION_UI_CAPABILITIES : ORDINARY_UI_CAPABILITIES;
+}
+
+/**
+ * The single policy decision for mutations of the mounted project document.
+ * Selection, playback, camera/timeline view state, and explicit directory
+ * handle grants do not use this gate; authored scene state always does.
+ */
+export function documentMutationsEnabled(
+  companion = isCompanionSurface(),
+): boolean {
+  return companionUiCapabilities(companion).projectWrite;
+}
+
+/**
+ * Runs an authored-state mutation only when the active host owns that
+ * capability. Keeping this helper pure makes denial-before-side-effect easy
+ * to exercise without constructing a renderer world.
+ */
+export function runDocumentMutation<T>(
+  mutation: () => T,
+  denied: T,
+  companion = isBrowserCompanionRenderer(),
+): T {
+  return documentMutationsEnabled(companion) ? mutation() : denied;
+}
diff --git a/apps/web/src/lib/companion-export.ts b/apps/web/src/lib/companion-export.ts
new file mode 100644
index 00000000..ff56bbd7
--- /dev/null
+++ b/apps/web/src/lib/companion-export.ts
@@ -0,0 +1,23 @@
+export type CompanionExportAction = "scene" | "frame";
+
+export const COMPANION_EXPORT_DISABLED_MESSAGE =
+  "Export is disabled in the read-only browser companion; use the Electron host or DAPI.";
+
+export function isCompanionExportDisabled(): boolean {
+  return isBrowserCompanionRenderer();
+}
+
+/**
+ * The action callback contains every picker, render/capture, and download
+ * side effect. Keeping it behind this guard makes companion rejection occur
+ * before any of those operations can begin.
+ */
+export async function runExportAction<T>(
+  _action: CompanionExportAction,
+  execute: () => Promise<T>,
+  companion = isCompanionExportDisabled(),
+): Promise<T> {
+  if (companion) throw new Error(COMPANION_EXPORT_DISABLED_MESSAGE);
+  return execute();
+}
+import { isBrowserCompanionRenderer } from "./companion-authority.ts";
diff --git a/apps/web/src/lib/companion-fonts.ts b/apps/web/src/lib/companion-fonts.ts
new file mode 100644
index 00000000..f68f2cbf
--- /dev/null
+++ b/apps/web/src/lib/companion-fonts.ts
@@ -0,0 +1,19 @@
+import type { FontSources } from "@diffusionstudio/runtime";
+
+const WEIGHTS = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
+
+/** Bundled/generic CSS families which never require remote discovery. */
+export const COMPANION_FONT_SOURCES: FontSources[] = [
+  { family: "Inter", variants: WEIGHTS.map((weight) => ({ family: "Inter", source: "local('Inter')", weight })) },
+  { family: "system-ui", variants: [{ family: "system-ui", source: "local('system-ui')", weight: "400" }] },
+  { family: "sans-serif", variants: [{ family: "sans-serif", source: "local('sans-serif')", weight: "400" }] },
+  { family: "serif", variants: [{ family: "serif", source: "local('serif')", weight: "400" }] },
+  { family: "monospace", variants: [{ family: "monospace", source: "local('monospace')", weight: "400" }] },
+];
+
+export function fontSourcesForMode(
+  localOnly: boolean,
+  remoteSources: () => FontSources[],
+): FontSources[] {
+  return localOnly ? COMPANION_FONT_SOURCES : remoteSources();
+}
diff --git a/apps/web/src/lib/companion-protocol.ts b/apps/web/src/lib/companion-protocol.ts
new file mode 100644
index 00000000..844df79a
--- /dev/null
+++ b/apps/web/src/lib/companion-protocol.ts
@@ -0,0 +1,138 @@
+export const COMPANION_PROTOCOL_VERSION = 4;
+export const COMPANION_SCHEMA_HASH = "diffusion-companion-v4-20260902";
+
+export type CompanionCapabilities = {
+  readOnly: true;
+  browserDapi: false;
+  cloudAi: false;
+  persistentEdits: false;
+  htmlPaint: false;
+  media: "unsupported-phase-a";
+  webgpu: "browser-dependent";
+  fonts: "browser-dependent";
+};
+
+export type CompanionBundle =
+  | { ok: true; code: string }
+  | { ok: false; error: string };
+
+export type CompanionSnapshot = {
+  protocol: typeof COMPANION_PROTOCOL_VERSION;
+  schemaHash: typeof COMPANION_SCHEMA_HASH;
+  appVersion: string;
+  buildHash: string;
+  sessionId: string;
+  revision: number;
+  bundleHash: string;
+  project: { id: string; name: string; displayName: string };
+  bundle: CompanionBundle;
+  capabilities: CompanionCapabilities;
+};
+
+function record(value: unknown, label: string): Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new Error(`${label} must be an object`);
+  }
+  return value as Record<string, unknown>;
+}
+
+function exactKeys(value: Record<string, unknown>, expected: readonly string[], label: string): void {
+  const actual = Object.keys(value).sort();
+  const wanted = [...expected].sort();
+  if (actual.length !== wanted.length || actual.some((key, index) => key !== wanted[index])) {
+    throw new Error(`${label} contains unsupported fields`);
+  }
+}
+
+function string(value: unknown, label: string): string {
+  if (typeof value !== "string" || !value) throw new Error(`${label} must be a non-empty string`);
+  return value;
+}
+
+/**
+ * Runtime-validates and narrow-copies the complete Phase A wire envelope.
+ * Exact keys are intentional: project manifests, configs, roots, paths, and
+ * any future desktop metadata must be explicitly designed into a later
+ * protocol rather than leaking through structural TypeScript casts.
+ */
+export function parseCompanionSnapshot(value: unknown): CompanionSnapshot {
+  const snapshot = record(value, "Companion snapshot");
+  exactKeys(snapshot, [
+    "protocol", "schemaHash", "appVersion", "buildHash", "sessionId",
+    "revision", "bundleHash", "project", "bundle", "capabilities",
+  ], "Companion snapshot");
+  if (snapshot.protocol !== COMPANION_PROTOCOL_VERSION) throw new Error("Companion protocol version mismatch");
+  if (snapshot.schemaHash !== COMPANION_SCHEMA_HASH) throw new Error("Companion schema hash mismatch");
+  if (!Number.isInteger(snapshot.revision) || (snapshot.revision as number) < 1) {
+    throw new Error("Companion revision is invalid");
+  }
+
+  const project = record(snapshot.project, "Companion project");
+  exactKeys(project, ["id", "name", "displayName"], "Companion project");
+
+  const bundle = record(snapshot.bundle, "Companion bundle");
+  if (bundle.ok === true) {
+    exactKeys(bundle, ["ok", "code"], "Companion bundle");
+    string(bundle.code, "Companion bundle code");
+  } else if (bundle.ok === false) {
+    exactKeys(bundle, ["ok", "error"], "Companion bundle");
+    string(bundle.error, "Companion bundle error");
+  } else {
+    throw new Error("Companion bundle result is invalid");
+  }
+
+  const capabilities = record(snapshot.capabilities, "Companion capabilities");
+  exactKeys(capabilities, [
+    "readOnly", "browserDapi", "cloudAi", "persistentEdits", "htmlPaint",
+    "media", "webgpu", "fonts",
+  ], "Companion capabilities");
+  if (
+    capabilities.readOnly !== true || capabilities.browserDapi !== false ||
+    capabilities.cloudAi !== false || capabilities.persistentEdits !== false ||
+    capabilities.htmlPaint !== false || capabilities.media !== "unsupported-phase-a" ||
+    capabilities.webgpu !== "browser-dependent" || capabilities.fonts !== "browser-dependent"
+  ) {
+    throw new Error("Companion capabilities are invalid");
+  }
+
+  return {
+    protocol: COMPANION_PROTOCOL_VERSION,
+    schemaHash: COMPANION_SCHEMA_HASH,
+    appVersion: string(snapshot.appVersion, "Companion app version"),
+    buildHash: string(snapshot.buildHash, "Companion build hash"),
+    sessionId: string(snapshot.sessionId, "Companion session id"),
+    revision: snapshot.revision as number,
+    bundleHash: string(snapshot.bundleHash, "Companion bundle hash"),
+    project: {
+      id: string(project.id, "Companion project id"),
+      name: string(project.name, "Companion project name"),
+      displayName: string(project.displayName, "Companion project display name"),
+    },
+    bundle: bundle.ok === true
+      ? { ok: true, code: bundle.code as string }
+      : { ok: false, error: bundle.error as string },
+    capabilities: {
+      readOnly: true,
+      browserDapi: false,
+      cloudAi: false,
+      persistentEdits: false,
+      htmlPaint: false,
+      media: "unsupported-phase-a",
+      webgpu: "browser-dependent",
+      fonts: "browser-dependent",
+    },
+  };
+}
+
+export type CompanionServerMessage =
+  | { type: "bundle"; snapshot: CompanionSnapshot }
+  | { type: "disconnected"; sessionId: string; reason: "socket-closed" | "stopped" }
+  | { type: "stopped"; sessionId: string };
+
+export type CompanionApplyAcknowledgement = {
+  sessionId: string;
+  revision: number;
+  bundleHash: string;
+  ok: boolean;
+  error?: string;
+};
diff --git a/apps/web/src/lib/local-only.ts b/apps/web/src/lib/local-only.ts
new file mode 100644
index 00000000..acde6467
--- /dev/null
+++ b/apps/web/src/lib/local-only.ts
@@ -0,0 +1,19 @@
+import { isBrowserCompanionRenderer } from "./companion-authority.ts";
+
+const capturedHostMode =
+  typeof window !== "undefined" &&
+  (new URLSearchParams(window.location.search).has("browser-companion-host") ||
+    new URLSearchParams(window.location.search).has("companion-shell"));
+
+/**
+ * The visible companion and its cold hidden Electron host both run without
+ * cloud transports or credit-consuming operations. Ordinary desktop and web
+ * behavior is unchanged.
+ */
+export function isLocalOnly(): boolean {
+  return isBrowserCompanionRenderer() || capturedHostMode;
+}
+
+export function isBrowserCompanionHostRenderer(): boolean {
+  return capturedHostMode && !!window.desktop;
+}
diff --git a/apps/web/src/lib/supabase.ts b/apps/web/src/lib/supabase.ts
index b7cee48e..2c329cad 100644
--- a/apps/web/src/lib/supabase.ts
+++ b/apps/web/src/lib/supabase.ts
@@ -3,11 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { createClient, type SupabaseClient } from '@supabase/supabase-js';
+import { isLocalOnly } from './local-only';
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string | undefined;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string | undefined;
 
 function initSupabase(): SupabaseClient | null {
+  if (isLocalOnly()) {
+    console.info('[local-only] Supabase and remote authentication are disabled.');
+    return null;
+  }
   if (!supabaseUrl || !supabaseAnonKey) {
     console.warn('[supabase] VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are not set. Auth is disabled.');
     return null;
diff --git a/apps/web/src/lib/trpc.ts b/apps/web/src/lib/trpc.ts
index efb662a9..f38b2532 100644
--- a/apps/web/src/lib/trpc.ts
+++ b/apps/web/src/lib/trpc.ts
@@ -6,6 +6,8 @@ import { createTRPCClient, httpBatchLink, TRPCClientError, type TRPCLink } from
 import { observable } from "@trpc/server/observable";
 import { supabase } from "./supabase";
 import { showUpgradeDialog } from "@/components/upgrade-dialog";
+import { isLocalOnly } from "./local-only";
+import { browserCompanionAuthority } from "./companion-authority";
 
 import type { AppRouter } from "@diffusionstudio/api-contract";
 
@@ -24,16 +26,26 @@ const paymentRequiredLink: TRPCLink<AppRouter> = () => ({ next, op }) =>
     return () => sub.unsubscribe();
   });
 
+const localOnlyLink: TRPCLink<AppRouter> = () => () =>
+  observable((observer) => {
+    const error = new Error("Diffusion API access is disabled in browser gateway zero-credit local-only mode.");
+    browserCompanionAuthority?.recordOutboundAttempt("trpc", "/api/trpc");
+    observer.error(TRPCClientError.from(error));
+    return () => {};
+  });
+
 export const trpc = createTRPCClient<AppRouter>({
-  links: [
-    paymentRequiredLink,
-    httpBatchLink({
-      url: `${import.meta.env.VITE_API_URL ?? ""}/api/trpc`,
-      async headers() {
-        const session = await supabase?.auth.getSession();
-        const token = session?.data.session?.access_token;
-        return token ? { Authorization: `Bearer ${token}` } : {};
-      },
-    }),
-  ],
+  links: isLocalOnly()
+    ? [localOnlyLink]
+    : [
+        paymentRequiredLink,
+        httpBatchLink({
+          url: `${import.meta.env.VITE_API_URL ?? ""}/api/trpc`,
+          async headers() {
+            const session = await supabase?.auth.getSession();
+            const token = session?.data.session?.access_token;
+            return token ? { Authorization: `Bearer ${token}` } : {};
+          },
+        }),
+      ],
 });
diff --git a/apps/web/src/pages/editor.tsx b/apps/web/src/pages/editor.tsx
index 81e054ef..81b74945 100644
--- a/apps/web/src/pages/editor.tsx
+++ b/apps/web/src/pages/editor.tsx
@@ -22,14 +22,18 @@ import { attachAi } from '@/utils/gen-ai';
 import { attachProjectConfig, isProjectConfigFile } from '@/engine/project-config';
 import { loadProjectBundle, rememberProjectBundle } from '@/lib/db';
 import { isCacheFile } from '@diffusionstudio/assets';
+import { Paint, PaintType } from '@diffusionstudio/runtime';
 import { createEditWriter } from '@/projects/edits';
-import { compileProject, watchProject } from '@/projects/host';
+import { compileProject, reportProjectBundleApplied, watchProject } from '@/projects/host';
 import { captureProjectCover } from '@/projects/cover';
 import { useProject } from "@/context/project";
 import { useEngineContext } from "@/engine";
+import { BrowserCompanionIndicator, BrowserCompanionSemanticReporter } from "@/components/browser-companion-indicator";
 
 import type { Mount } from '@diffusionstudio/reconciler';
 import type { EditWriter } from '@/projects/edits';
+import { isBrowserCompanionRenderer } from '@/lib/companion-authority';
+import { documentMutationsEnabled } from '@/lib/companion-capabilities';
 
 const MIN_CANVAS_HEIGHT = 200;
 
@@ -82,14 +86,24 @@ export function EditorPage() {
       // The old render goes first: there is only one stage per world.
       unmount();
       mounted = mount(code, world);
+      if (isBrowserCompanionRenderer() && world.query(Paint).some((entity) => entity.get(Paint)?.value === PaintType.HTML)) {
+        mounted.dispose();
+        mounted = undefined;
+        throw new Error(
+          "This project contains <html>/<htmlPaint> content, which requires Chromium's experimental CanvasDrawElement API. " +
+          "The browser gateway fails closed instead of silently misrendering it; use the Electron app for this project.",
+        );
+      }
       mountedCode = code;
       // The `@inspect` variables this mount declared, for the inspector.
       setInspectEntries(world, mounted.inspect);
       // The rendered scene knows which element every entity came from, so
       // from here on an edit in the editor can find its way back.
-      writer = createEditWriter(dir, world);
-      const editor = getDocumentEditor(world);
-      unlisten = editor.onEdit((edit) => writer?.push(edit));
+      if (documentMutationsEnabled()) {
+        writer = createEditWriter(dir, world);
+        const editor = getDocumentEditor(world);
+        unlisten = editor.onEdit((edit) => writer?.push(edit));
+      }
       // A mount comes from the file: edits recorded against the document it
       // replaced cannot be replayed against this one.
       getEditHistory(world).reset();
@@ -97,7 +111,10 @@ export function EditorPage() {
 
     const loadProject = async (): Promise<void> => {
       const current = ++generation;
-      const compiling = compileProject(dir);
+      // Only the editor surface's compile can advance companion readiness.
+      // Offline capture/export compiles use the same compiler but never mount
+      // this world and therefore must not be published as surface revisions.
+      const compiling = compileProject(dir, { companionSurfaceMount: true });
       const loading = library.load();
 
       // First open only: the bundle the last session mounted, straight from
@@ -135,12 +152,15 @@ export function EditorPage() {
 
       try {
         applyBundle(result.code);
+        await reportProjectBundleApplied(dir, result, true);
         // What an export renders a second time, and the next open's head
         // start (see `rememberProjectBundle`) — recorded only once it has
         // actually mounted, so the record never runs ahead of the canvas.
         rememberProjectBundle(untrack(project.id), result.code).catch((error) =>
           console.error('[projects] could not save the bundle', error));
       } catch (error) {
+        await reportProjectBundleApplied(dir, result, false, (error as Error).message).catch((reportError) =>
+          console.error('[projects] could not report bundle mount failure', reportError));
         console.error('[projects] render failed:', error);
         toast.error('Project failed to render', { description: (error as Error).message });
       }
@@ -228,6 +248,8 @@ export function EditorPage() {
       }}
       style={timelineStyles()}
     >
+      <BrowserCompanionIndicator />
+      <BrowserCompanionSemanticReporter />
       <Show when={isDesktop && !isFullscreen()}>
         <div class="fixed top-0 left-0 right-0 h-10 z-20" style="-webkit-app-region: drag;" />
       </Show>
diff --git a/apps/web/src/projects/companion-fs.ts b/apps/web/src/projects/companion-fs.ts
new file mode 100644
index 00000000..38bad013
--- /dev/null
+++ b/apps/web/src/projects/companion-fs.ts
@@ -0,0 +1,33 @@
+import type { FsEntry, Manifest, ProjectFS } from "@diffusionstudio/assets";
+
+const UNSUPPORTED = "Local media is unsupported in the Phase A browser companion";
+
+export async function grantCompanionProjectFolder(): Promise<void> {
+  throw new Error(UNSUPPORTED);
+}
+
+export async function companionFolderGranted(): Promise<boolean> {
+  return false;
+}
+
+export function onCompanionFolderChange(_listener: () => void): () => void {
+  return () => {};
+}
+
+export function createCompanionProjectFS(_projectId: string): ProjectFS {
+  return {
+    readManifest: async (): Promise<Manifest> => ({ version: 1, folders: [], assets: [] }),
+    writeManifest: async () => { throw new Error("Browser companion is read-only"); },
+    list: async (_source): Promise<FsEntry[]> => [],
+    stat: async (_source) => null,
+    file: async (_source) => { throw new Error(UNSUPPORTED); },
+    write: async () => { throw new Error("Browser companion is read-only"); },
+    remove: async () => { throw new Error("Browser companion is read-only"); },
+    pathOf: () => null,
+  };
+}
+
+/** Companion project config is deliberately not part of the relay. */
+export async function readCompanionProjectConfig(): Promise<null> {
+  return null;
+}
diff --git a/apps/web/src/projects/fs.ts b/apps/web/src/projects/fs.ts
index c22e98ae..359efb20 100644
--- a/apps/web/src/projects/fs.ts
+++ b/apps/web/src/projects/fs.ts
@@ -14,6 +14,8 @@ import { ElectronWritableFileHandle } from '@/lib/electron-file-writable';
 import { isAbsoluteSource } from '@diffusionstudio/assets';
 
 import type { Manifest, ProjectFS } from '@diffusionstudio/assets';
+import { createCompanionProjectFS } from './companion-fs';
+import { isBrowserCompanionRenderer } from '@/lib/companion-authority';
 
 /** Streams `blob` to an absolute path in chunks. */
 async function writeBlob(path: string, blob: Blob): Promise<void> {
@@ -38,6 +40,10 @@ async function writeBlob(path: string, blob: Blob): Promise<void> {
 
 /** The `ProjectFS` of the project folder at `dir`. */
 export function createProjectFS(dir: string): ProjectFS {
+	if (isBrowserCompanionRenderer()) {
+		const projectId = dir.startsWith('companion:') ? dir.slice('companion:'.length) : dir;
+		return createCompanionProjectFS(projectId);
+	}
 	const separator = dir.includes('\\') ? '\\' : '/';
 	const absolute = (source: string): string =>
 		isAbsoluteSource(source) ? source : `${dir}${separator}${source.split('/').join(separator)}`;
diff --git a/apps/web/src/projects/host.ts b/apps/web/src/projects/host.ts
index e7529c9c..84ed50c0 100644
--- a/apps/web/src/projects/host.ts
+++ b/apps/web/src/projects/host.ts
@@ -21,9 +21,13 @@ import { MAIN_CHANNELS } from '@desktop/main-channels';
 import { mainBridge } from '@/lib/ipc';
 import { lastUsedProjectRoot, listProjectRoots, rememberProjectRoot } from '@/lib/db';
 
-import type { CompileResult, ProjectInfo, SourceEdit, WriteResult } from '@desktop/main-channels';
+import type { CompileResponse, ProjectInfo, SourceEdit, WriteResult } from '@desktop/main-channels';
+import { companionSnapshot, initializeBrowserCompanion, onCompanionMessage, reportCompanionApplied } from '@/lib/browser-companion';
+import { isBrowserCompanionRenderer } from '@/lib/companion-authority';
+import { isBrowserCompanionHostRenderer } from '@/lib/local-only';
+import { readCompanionProjectConfig } from './companion-fs';
 
-export type { CompileResult, ProjectInfo, SourceEdit, WriteResult };
+export type { CompileResult, ProjectInfo, SourceEdit, WriteResult } from '@desktop/main-channels';
 
 // The roots live in the app's IndexedDB (see @/lib/db) as a list
 // keyed by path. The app works against one of them — the one used last — but
@@ -36,6 +40,13 @@ export type { CompileResult, ProjectInfo, SourceEdit, WriteResult };
 
 const [projectsRoot, setProjectsRoot] = createSignal<string | null>(null);
 const [rootsReady, setRootsReady] = createSignal(false);
+const companionCompileIdentities = new WeakMap<object, { sessionId: string; revision: number; bundleHash: string }>();
+
+async function hashCompileResult(result: CompileResponse): Promise<string> {
+	const source = result.ok ? result.code : `compile-error:\n${result.error}`;
+	const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(source));
+	return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, '0')).join('');
+}
 
 /** The projects root folder: null until one is picked, and until `rootsReady`. */
 export { projectsRoot };
@@ -57,6 +68,7 @@ export const isDesktop = (): boolean => !!window.desktop;
 
 /** The projects root, waited for: null off the desktop and until one is picked. */
 export async function getProjectsRoot(): Promise<string | null> {
+	if (isBrowserCompanionRenderer()) return null;
 	await ready;
 	return projectsRoot();
 }
@@ -117,8 +129,13 @@ export async function createProject(displayName: string): Promise<ProjectInfo> {
  * matched by id or folder name, most recently used first.
  */
 export async function resolveProject(ref: string): Promise<ProjectInfo | null> {
-	await ready;
-	if (!ref || !isDesktop()) return null;
+	if (isBrowserCompanionRenderer()) {
+		const current = await initializeBrowserCompanion();
+		if (!current || (ref !== current.project.id && ref !== 'active')) return null;
+		return companionProjectInfo(current);
+	}
+  await ready;
+  if (!ref || !isDesktop()) return null;
 
 	const root = projectsRoot();
 	if (root) {
@@ -156,6 +173,10 @@ export async function openProjectFolder(dir: string): Promise<ProjectInfo> {
 
 /** The project in the folder `dir`, or null when there is none. */
 export async function getProject(dir: string): Promise<ProjectInfo | null> {
+	if (isBrowserCompanionRenderer()) {
+		const current = companionSnapshot();
+		return current && dir === `companion:${current.project.id}` ? companionProjectInfo(current) : null;
+	}
 	if (!dir || !isDesktop()) return null;
 	return mainBridge.call(MAIN_CHANNELS.PROJECTS_GET, { dir });
 }
@@ -188,8 +209,52 @@ export async function deleteProject(dir: string): Promise<void> {
  */
 export const projectKey = (project: ProjectInfo): string => project.id || project.name;
 
-export function compileProject(dir: string): Promise<CompileResult> {
-	return mainBridge.call(MAIN_CHANNELS.PROJECTS_COMPILE, { dir });
+export function compileProject(
+	dir: string,
+	options: { companionSurfaceMount?: boolean } = {},
+): Promise<CompileResponse> {
+	if (isBrowserCompanionRenderer()) {
+		const current = companionSnapshot();
+		if (!current || dir !== `companion:${current.project.id}`) return Promise.resolve({ ok: false, error: 'Companion project unavailable' });
+		companionCompileIdentities.set(current.bundle, {
+			sessionId: current.sessionId,
+			revision: current.revision,
+			bundleHash: current.bundleHash,
+		});
+		return Promise.resolve(current.bundle);
+	}
+	return mainBridge.call(MAIN_CHANNELS.PROJECTS_COMPILE, {
+		dir,
+		...(options.companionSurfaceMount ? { companionSurfaceMount: true } : {}),
+	});
+}
+
+/** A mount acknowledgement is emitted only after reconciler mount succeeds or fails. */
+export async function reportProjectBundleApplied(
+	dir: string,
+	result: CompileResponse,
+	ok: boolean,
+	error?: string,
+): Promise<void> {
+	if (isBrowserCompanionRenderer()) {
+		const identity = companionCompileIdentities.get(result);
+		if (!identity) throw new Error('Companion bundle identity is unavailable');
+		reportCompanionApplied({ ...identity, ok, ...(error ? { error: error.slice(0, 4000) } : {}) });
+		return;
+	}
+	if (!isBrowserCompanionHostRenderer()) return;
+	// A cold hidden host may restore its last DAPI project before a companion
+	// prepare has armed a root/session. It still mounts normally, but there is
+	// no companion revision to acknowledge. Once prepare is armed, main adds
+	// the exact identity; absence then fails readiness by bounded timeout.
+	if (!result.companionMount) return;
+	await mainBridge.call(MAIN_CHANNELS.PROJECTS_BUNDLE_APPLIED, {
+		dir,
+		...result.companionMount,
+		bundleHash: await hashCompileResult(result),
+		ok,
+		...(error ? { error: error.slice(0, 4000) } : {}),
+	});
 }
 
 /**
@@ -198,16 +263,19 @@ export function compileProject(dir: string): Promise<CompileResult> {
  * reaching the watcher (see `markSelfWrite` in the desktop's projects.ts).
  */
 export function writeProject(dir: string, edits: SourceEdit[]): Promise<WriteResult> {
+	if (isBrowserCompanionRenderer()) return Promise.reject(new Error('Browser companion is read-only'));
 	return mainBridge.call(MAIN_CHANNELS.PROJECTS_WRITE, { dir, edits });
 }
 
 /** The project's config (the `diffusion` field of its package.json), unparsed; null when absent. */
 export function readProjectConfig(dir: string): Promise<unknown> {
+	if (isBrowserCompanionRenderer()) return readCompanionProjectConfig();
 	return mainBridge.call(MAIN_CHANNELS.PROJECTS_CONFIG_READ, { dir });
 }
 
 /** Replaces the project's config (null removes the field). Kept from the watcher like `writeProject`. */
 export function writeProjectConfig(dir: string, config: unknown): Promise<void> {
+	if (isBrowserCompanionRenderer()) return Promise.reject(new Error('Browser companion is read-only'));
 	return mainBridge.call(MAIN_CHANNELS.PROJECTS_CONFIG_WRITE, { dir, config });
 }
 
@@ -216,6 +284,17 @@ export function writeProjectConfig(dir: string, config: unknown): Promise<void>
  * inside it changes. Returns the unwatch function.
  */
 export function watchProject(dir: string, onChange: (path: string) => void, debounceMs = 80): () => void {
+	if (isBrowserCompanionRenderer()) {
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		const changed = (path: string) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => onChange(path), debounceMs);
+		};
+		const stopBundle = onCompanionMessage((message) => {
+			if (message.type === 'bundle') changed('index.tsx');
+		});
+		return () => { clearTimeout(timer); stopBundle(); };
+	}
 	if (!isDesktop()) return () => {};
 
 	let pending: ReturnType<typeof setTimeout> | undefined;
@@ -234,3 +313,15 @@ export function watchProject(dir: string, onChange: (path: string) => void, debo
 		void mainBridge.call(MAIN_CHANNELS.PROJECTS_UNWATCH, { dir }).catch(() => {});
 	};
 }
+
+function companionProjectInfo(current: NonNullable<ReturnType<typeof companionSnapshot>>): ProjectInfo {
+	return {
+		id: current.project.id,
+		name: current.project.name,
+		displayName: current.project.displayName,
+		dir: `companion:${current.project.id}`,
+		entry: 'index.tsx',
+		modifiedAt: new Date(0).toISOString(),
+		createdAt: new Date(0).toISOString(),
+	};
+}
diff --git a/apps/web/src/utils/gen-ai.ts b/apps/web/src/utils/gen-ai.ts
index 2b8df4f1..57e207e5 100644
--- a/apps/web/src/utils/gen-ai.ts
+++ b/apps/web/src/utils/gen-ai.ts
@@ -23,6 +23,7 @@ import { uploadBlob } from "@/lib/uploads";
 import { track } from "@/lib/analytics";
 import { trpc } from "@/lib/trpc";
 import { toast } from "somoto";
+import { isLocalOnly } from "@/lib/local-only";
 
 import type { AspectRatio, AssetInput, AssetRef, AssetSpecInput } from "@diffusionstudio/jsx";
 import type { Asset, AssetLibrary, AssetType } from "@diffusionstudio/assets";
@@ -75,12 +76,29 @@ type ResolvedSpec =
   | { type: "audio"; model: string; prompt: string; duration?: number; seed?: number };
 
 /** Creates the project's GenAi over `library` and attaches it as the world's Ai. */
-export function attachAi(world: World, library: AssetLibrary, dir?: string): EditorGenAi {
-  const ai = new EditorGenAi(library, world.get(Project)?.id ?? "project", dir);
+export function attachAi(world: World, library: AssetLibrary, dir?: string): GenAi {
+  const ai = isLocalOnly()
+    ? new LocalOnlyGenAi()
+    : new EditorGenAi(library, world.get(Project)?.id ?? "project", dir);
   world.set(Ai, ai);
   return ai;
 }
 
+const LOCAL_ONLY_ERROR =
+  "Diffusion AI generation, transcription, listening, and source transforms are disabled in the browser companion's zero-credit local-only mode. " +
+  "Reference local assets or a local transcript file from the project instead.";
+
+class LocalOnlyGenAi extends GenAi {
+  private refuse(): Promise<never> {
+    console.error(`[local-only] ${LOCAL_ONLY_ERROR}`);
+    return Promise.reject(new Error(LOCAL_ONLY_ERROR));
+  }
+
+  resolve(_ref: AssetRef): Promise<Asset> { return this.refuse(); }
+  transcribe(_world: World, _scene: Entity, _seed: number): Promise<Asset> { return this.refuse(); }
+  derive(_asset: Asset, _modifiers: SourceModifierValues): Promise<Asset> { return this.refuse(); }
+}
+
 export class EditorGenAi extends GenAi {
   private readonly library: AssetLibrary;
   /** Prefixes upload keys, so referenced assets land project-unique in the bucket. */
diff --git a/apps/web/src/vite-env.d.ts b/apps/web/src/vite-env.d.ts
index 71827199..68da64a8 100644
--- a/apps/web/src/vite-env.d.ts
+++ b/apps/web/src/vite-env.d.ts
@@ -14,10 +14,22 @@ declare global {
     chrome: any;
     desktop?: {
       platform: string;
+      browserCompanionHost: boolean;
       send(channel: string, payload: unknown): void;
       on(channel: string, cb: (payload: unknown) => void): (() => void);
       getPathForFile(file: File): string;
     };
+    readonly browserCompanion?: Readonly<{
+      readonly enabled: true;
+      readonly localOnly: true;
+      readonly expectedBuildHash: string;
+      connect(client: { protocol: number; schemaHash: string; appVersion: string }): Promise<import("./lib/companion-protocol").CompanionSnapshot>;
+      subscribe(handler: (message: import("./lib/companion-protocol").CompanionServerMessage) => void): () => void;
+      semantic(event: string, data: Record<string, unknown>): void;
+      applied(acknowledgement: import("./lib/companion-protocol").CompanionApplyAcknowledgement): void;
+      recordOutboundAttempt(kind: string, target: string): void;
+    }>;
+    showDirectoryPicker(options?: { mode?: "read" | "readwrite" }): Promise<FileSystemDirectoryHandle>;
     showOpenFilePicker(options?: OpenFilePickerOptions): Promise<FileSystemFileHandle[]>;
     EyeDropper?: {
       new(): EyeDropper;
diff --git a/apps/web/tests/companion-authority.test.ts b/apps/web/tests/companion-authority.test.ts
new file mode 100644
index 00000000..2cabe7ad
--- /dev/null
+++ b/apps/web/tests/companion-authority.test.ts
@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+test("companion identity is captured once and survives public-global tamper attempts", async () => {
+  const api = Object.freeze({
+    enabled: true as const,
+    localOnly: true as const,
+    expectedBuildHash: "build-hash",
+    connect: async () => null,
+    subscribe: () => () => {},
+    semantic: () => {},
+    applied: () => {},
+    recordOutboundAttempt: () => {},
+  });
+  const fakeWindow: Record<string, unknown> = {};
+  Object.defineProperty(fakeWindow, "browserCompanion", {
+    value: api,
+    writable: false,
+    configurable: false,
+  });
+  Object.defineProperty(globalThis, "window", {
+    value: fakeWindow,
+    writable: true,
+    configurable: true,
+  });
+
+  try {
+    const authority = await import(`../src/lib/companion-authority.ts?test=${Date.now()}`);
+    assert.equal(authority.browserCompanionAuthority, api);
+    assert.equal(authority.isBrowserCompanionRenderer(), true);
+
+    assert.equal(Reflect.deleteProperty(fakeWindow, "browserCompanion"), false);
+    assert.equal(Reflect.set(fakeWindow, "browserCompanion", undefined), false);
+    assert.equal(Reflect.set(fakeWindow, "browserCompanion", { enabled: false }), false);
+    assert.equal(Reflect.set(api, "expectedBuildHash", "tampered"), false);
+
+    assert.equal(fakeWindow.browserCompanion, api);
+    assert.equal(authority.browserCompanionAuthority, api);
+    assert.equal(authority.isBrowserCompanionRenderer(), true);
+  } finally {
+    Reflect.deleteProperty(globalThis, "window");
+  }
+});
diff --git a/apps/web/tests/companion-capabilities.test.ts b/apps/web/tests/companion-capabilities.test.ts
new file mode 100644
index 00000000..86226de5
--- /dev/null
+++ b/apps/web/tests/companion-capabilities.test.ts
@@ -0,0 +1,66 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  companionUiCapabilities,
+  documentMutationsEnabled,
+  runDocumentMutation,
+} from "../src/lib/companion-capabilities.ts";
+
+test("browser companion exposes only inspection and playback in Phase A", () => {
+  const capabilities = companionUiCapabilities(true);
+  assert.deepEqual(capabilities, {
+    inspect: true,
+    playback: true,
+    connectProjectFolder: false,
+    ai: false,
+    assetWrite: false,
+    projectWrite: false,
+    account: false,
+    export: false,
+    externalNavigation: false,
+    desktopPromotion: false,
+  });
+});
+
+test("ordinary desktop and web capability surfaces remain enabled", () => {
+  const capabilities = companionUiCapabilities(false);
+  assert.deepEqual(capabilities, {
+    inspect: true,
+    playback: true,
+    connectProjectFolder: false,
+    ai: true,
+    assetWrite: true,
+    projectWrite: true,
+    account: true,
+    export: true,
+    externalNavigation: true,
+    desktopPromotion: true,
+  });
+});
+
+test("companion document mutations are denied before every side-effect body", () => {
+  const attempts = ["text", "numeric", "font", "canvas-transform", "timeline-layer"] as const;
+  const entered: string[] = [];
+
+  assert.equal(documentMutationsEnabled(true), false);
+  for (const attempt of attempts) {
+    const result = runDocumentMutation(() => {
+      entered.push(attempt);
+      return "mutated";
+    }, "readonly", true);
+    assert.equal(result, "readonly");
+  }
+  assert.deepEqual(entered, []);
+});
+
+test("ordinary Electron document mutations execute unchanged", () => {
+  let entered = 0;
+  assert.equal(documentMutationsEnabled(false), true);
+  const result = runDocumentMutation(() => {
+    entered++;
+    return "desktop-result";
+  }, "readonly", false);
+  assert.equal(result, "desktop-result");
+  assert.equal(entered, 1);
+});
diff --git a/apps/web/tests/companion-export.test.ts b/apps/web/tests/companion-export.test.ts
new file mode 100644
index 00000000..cb4f145b
--- /dev/null
+++ b/apps/web/tests/companion-export.test.ts
@@ -0,0 +1,28 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { COMPANION_EXPORT_DISABLED_MESSAGE, runExportAction } from "../src/lib/companion-export.ts";
+
+for (const action of ["scene", "frame"] as const) {
+  test(`companion ${action} export rejects before its side-effect callback`, async () => {
+    let entered = false;
+    await assert.rejects(
+      runExportAction(action, async () => {
+        entered = true;
+        return "unexpected";
+      }, true),
+      (error: Error) => error.message === COMPANION_EXPORT_DISABLED_MESSAGE,
+    );
+    assert.equal(entered, false);
+  });
+}
+
+test("ordinary desktop export still executes the existing action body", async () => {
+  let entered = 0;
+  const result = await runExportAction("scene", async () => {
+    entered++;
+    return "desktop-result";
+  }, false);
+  assert.equal(result, "desktop-result");
+  assert.equal(entered, 1);
+});
diff --git a/apps/web/tests/companion-fonts.test.ts b/apps/web/tests/companion-fonts.test.ts
new file mode 100644
index 00000000..33054fad
--- /dev/null
+++ b/apps/web/tests/companion-fonts.test.ts
@@ -0,0 +1,21 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { fontSourcesForMode } from "../src/lib/companion-fonts.ts";
+
+test("companion choices contain only bundled/system local sources", () => {
+  let remoteDiscovery = 0;
+  const fonts = fontSourcesForMode(true, () => {
+    remoteDiscovery++;
+    return [{ family: "Remote", variants: [{ family: "Remote", source: "url(https://example.test/font.woff2)" }] }];
+  });
+  assert.equal(remoteDiscovery, 0);
+  assert(fonts.some((font) => font.family === "Inter"));
+  assert(fonts.some((font) => font.family === "system-ui"));
+  assert.doesNotMatch(JSON.stringify(fonts), /https?:|url\(/);
+});
+
+test("ordinary desktop choices are returned unchanged", () => {
+  const ordinary = [{ family: "Remote", variants: [{ family: "Remote", source: "url(https://example.test/font.woff2)" }] }];
+  assert.equal(fontSourcesForMode(false, () => ordinary), ordinary);
+});
diff --git a/apps/web/tests/companion-protocol.test.ts b/apps/web/tests/companion-protocol.test.ts
new file mode 100644
index 00000000..f8742b8d
--- /dev/null
+++ b/apps/web/tests/companion-protocol.test.ts
@@ -0,0 +1,59 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  COMPANION_PROTOCOL_VERSION,
+  COMPANION_SCHEMA_HASH,
+  parseCompanionSnapshot,
+} from "../src/lib/companion-protocol.ts";
+import { createCompanionProjectFS, readCompanionProjectConfig } from "../src/projects/companion-fs.ts";
+
+function validSnapshot(): Record<string, unknown> {
+  return {
+    protocol: COMPANION_PROTOCOL_VERSION,
+    schemaHash: COMPANION_SCHEMA_HASH,
+    appVersion: "0.204.1",
+    buildHash: "same-apps-web-build",
+    sessionId: "session-id",
+    revision: 1,
+    bundleHash: "a".repeat(64),
+    project: { id: "project-id", name: "project-name", displayName: "Project" },
+    bundle: { ok: true, code: "return undefined;" },
+    capabilities: {
+      readOnly: true,
+      browserDapi: false,
+      cloudAi: false,
+      persistentEdits: false,
+      htmlPaint: false,
+      media: "unsupported-phase-a",
+      webgpu: "browser-dependent",
+      fonts: "browser-dependent",
+    },
+  };
+}
+
+test("Phase A snapshot accepts only its narrow wire allowlist", () => {
+  const parsed = parseCompanionSnapshot(validSnapshot());
+  assert.deepEqual(Object.keys(parsed).sort(), [
+    "appVersion", "buildHash", "bundle", "bundleHash", "capabilities",
+    "project", "protocol", "revision", "schemaHash", "sessionId",
+  ]);
+
+  for (const field of ["manifest", "config", "root", "path"]) {
+    assert.throws(
+      () => parseCompanionSnapshot({ ...validSnapshot(), [field]: `/private/${field}` }),
+      /contains unsupported fields/,
+    );
+  }
+  assert.throws(
+    () => parseCompanionSnapshot({ ...validSnapshot(), project: { id: "id", name: "name", displayName: "Name", path: "/private" } }),
+    /contains unsupported fields/,
+  );
+});
+
+test("companion library and config initialize from explicit local empty values", async () => {
+  const fs = createCompanionProjectFS("project-id");
+  assert.deepEqual(await fs.readManifest(), { version: 1, folders: [], assets: [] });
+  assert.deepEqual(await fs.list("assets"), []);
+  assert.equal(await readCompanionProjectConfig(), null);
+});
diff --git a/package-lock.json b/package-lock.json
index d48abb1a..242eec02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "nanoid": "^6.0.1",
         "ts-morph": "^28.0.0",
         "update-electron-app": "^3.0.0",
+        "ws": "^8.18.3",
         "yaml": "^2.9.0"
       },
       "devDependencies": {
@@ -64,6 +65,7 @@
         "@electron-forge/publisher-github": "^7.11.1",
         "@types/babel__core": "^7.20.5",
         "@types/node": "^24.10.1",
+        "@types/ws": "^8.18.1",
         "electron": "^43.1.1",
         "typescript": "~5.9.3"
       }
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
index 6dfa3451..46e4ffda 100644
--- a/packages/runtime/package.json
+++ b/packages/runtime/package.json
@@ -12,7 +12,9 @@
     "./media": "./src/media/index.ts"
   },
   "scripts": {
-    "check": "tsc --noEmit"
+    "check": "tsc --noEmit",
+    "test:cache": "esbuild tests/cache-observer.test.ts --bundle --platform=node --format=esm --outfile=/dev/stdout | node --input-type=module",
+    "test:font-policy": "node --test --experimental-strip-types tests/web-font-policy.test.ts"
   },
   "keywords": [
     "koota",
diff --git a/packages/runtime/src/actions/cache.ts b/packages/runtime/src/actions/cache.ts
index eb509237..33e293d7 100644
--- a/packages/runtime/src/actions/cache.ts
+++ b/packages/runtime/src/actions/cache.ts
@@ -34,17 +34,25 @@ export function rebuildCaches(world: World, entity: Entity, parent: Entity | nul
 
 	const cache = store(world, Cache);
 	const pid = parent.id();
-	const collect = (...params: Parameters<World['query']>) =>
-		[...world.query(...params)].filter(e => e !== exclude);
+	const collect = (existing: Entity[] | undefined, ...params: Parameters<World['query']>) => {
+		const members = [...(existing ?? []), ...world.query(...params)]
+			.filter((e, index, all) => e !== exclude && world.has(e) && all.indexOf(e) === index);
+		// Koota fires a relation add observer before the new pair is visible to
+		// queries. Every branch below is selected from `entity`'s own traits, so
+		// on attach it belongs in that branch even when the fresh query cannot
+		// see it yet. Later trait/index changes do see it and are deduplicated.
+		if (exclude === null && !members.includes(entity)) members.push(entity);
+		return members;
+	};
 
 	if (entity.has(Geometry) || entity.has(Group) || entity.has(AdjustmentLayer)) {
-		cache.children[pid] = collect(
+		cache.children[pid] = collect(cache.children[pid],
 			Or(Geometry, Group, AdjustmentLayer), ChildOf(parent), Not(IsMask),
 		).sort(sortByItemIndex);
 	}
 
 	if (entity.has(IsMask)) {
-		cache.masks[pid] = collect(Geometry, IsMask, ChildOf(parent))
+		cache.masks[pid] = collect(cache.masks[pid], Geometry, IsMask, ChildOf(parent))
 			.sort(sortByItemIndex);
 	}
 
@@ -53,17 +61,17 @@ export function rebuildCaches(world: World, entity: Entity, parent: Entity | nul
 	// bottom-up, so a paint's tracks exist before the paint meets its node.
 	if (entity.has(KeyframeTrack) || (!isNodeEntity(entity) && carriesKeyframeTrack(world, entity))) {
 		const node = findClosestParentGeometry(parent);
-		aggregateKeyframeTracks(world, node, exclude);
+		aggregateKeyframeTracks(world, node, exclude, exclude === null ? entity : null);
 		resetAnimatedValues(world, node);
 	}
 
 	if (entity.has(Keyframe)) {
-		cache.keyframes[pid] = collect(Keyframe, ChildOf(parent))
+		cache.keyframes[pid] = collect(cache.keyframes[pid], Keyframe, ChildOf(parent))
 			.sort(sortByFrame);
 	}
 
 	if (entity.has(Animation)) {
-		cache.animations[pid] = collect(Animation, ChildOf(parent))
+		cache.animations[pid] = collect(cache.animations[pid], Animation, ChildOf(parent))
 			.sort(sortByItemIndex);
 		resetAnimatedValues(world, parent);
 	}
@@ -72,27 +80,27 @@ export function rebuildCaches(world: World, entity: Entity, parent: Entity | nul
 	// intrinsic paint (see getIntrinsicPaint). Nor is a stroke: its Paint is
 	// what the outline is drawn with.
 	if (entity.has(Paint) && !entity.has(Geometry) && !entity.has(Stroke)) {
-		cache.fills[pid] = collect(Paint, Not(Geometry), Not(Stroke), ChildOf(parent))
+		cache.fills[pid] = collect(cache.fills[pid], Paint, Not(Geometry), Not(Stroke), ChildOf(parent))
 			.sort(sortByItemIndex);
 	}
 
 	if (entity.has(Stroke)) {
-		cache.strokes[pid] = collect(Stroke, ChildOf(parent))
+		cache.strokes[pid] = collect(cache.strokes[pid], Stroke, ChildOf(parent))
 			.sort(sortByItemIndex);
 	}
 
 	if (entity.has(Effect)) {
-		cache.effects[pid] = collect(Effect, ChildOf(parent), Not(Shadow))
+		cache.effects[pid] = collect(cache.effects[pid], Effect, ChildOf(parent), Not(Shadow))
 			.sort(sortByItemIndex);
 	}
 
 	if (entity.has(Shadow)) {
-		cache.shadows[pid] = collect(Shadow, ChildOf(parent), Not(Effect))
+		cache.shadows[pid] = collect(cache.shadows[pid], Shadow, ChildOf(parent), Not(Effect))
 			.sort(sortByItemIndex);
 	}
 
 	if (entity.has(TextRange)) {
-		cache.textRanges[pid] = collect(TextRange, ChildOf(parent))
+		cache.textRanges[pid] = collect(cache.textRanges[pid], TextRange, ChildOf(parent))
 			.sort(sortByItemIndex);
 	}
 }
@@ -186,19 +194,31 @@ export function findClosestParentGeometry(entity: Entity): Entity | null {
  * `target` field on each track so consumers iterating the cache can look up
  * the animated entity without walking ChildOf.
  */
-export function aggregateKeyframeTracks(world: World, node: Entity | null, exclude: Entity | null = null): void {
+export function aggregateKeyframeTracks(
+	world: World,
+	node: Entity | null,
+	exclude: Entity | null = null,
+	include: Entity | null = null,
+): void {
 	if (node === null) return;
 	if (!node.has(Cache)) node.add(Cache);
 
 	const keyframeTrack = store(world, KeyframeTrack);
-	const tracks: Entity[] = [];
+	const tracks: Entity[] = include === null
+		? []
+		: [...(store(world, Cache).keyframeTracks[node.id()] ?? [])]
+			.filter((track) => track !== exclude && world.has(track));
+	const addTrack = (track: Entity) => {
+		if (track === exclude || tracks.includes(track)) return;
+		keyframeTrack.target[track.id()] = getParentNode(track);
+		tracks.push(track);
+	};
 
 	const walk = (entity: Entity) => {
 		for (const child of world.query(ChildOf(entity))) {
 			if (child === exclude) continue;
 			if (child.has(KeyframeTrack)) {
-				keyframeTrack.target[child.id()] = getParentNode(child);
-				tracks.push(child);
+				addTrack(child);
 				continue;
 			}
 			// Stop at nested nodes; each owns its own cache entry.
@@ -208,5 +228,10 @@ export function aggregateKeyframeTracks(world: World, node: Entity | null, exclu
 	};
 
 	walk(node);
+	// The newly attached relation may not be query-visible yet. A direct track
+	// belongs to this node; a newly attached paint/style may already carry a
+	// subtree of tracks that must be folded into the node cache with it.
+	if (include?.has(KeyframeTrack)) addTrack(include);
+	else if (include && !isNodeEntity(include)) walk(include);
 	store(world, Cache).keyframeTracks[node.id()] = tracks;
 }
diff --git a/packages/runtime/src/fonts/index.ts b/packages/runtime/src/fonts/index.ts
index 38e756ee..a0704644 100644
--- a/packages/runtime/src/fonts/index.ts
+++ b/packages/runtime/src/fonts/index.ts
@@ -1,3 +1,4 @@
 export * from './types';
 export * from './fixtures';
+export * from './policy';
 export * from './utils';
diff --git a/packages/runtime/src/fonts/policy.ts b/packages/runtime/src/fonts/policy.ts
new file mode 100644
index 00000000..e88ffff5
--- /dev/null
+++ b/packages/runtime/src/fonts/policy.ts
@@ -0,0 +1,13 @@
+let remoteWebFontsEnabled = true;
+
+export function setRemoteWebFontsEnabled(enabled: boolean): void {
+	remoteWebFontsEnabled = enabled;
+}
+
+export function canLoadRemoteWebFonts(): boolean {
+	return remoteWebFontsEnabled;
+}
+
+export function resolveWebFontSource(family: string, remoteUrl: string): string {
+	return remoteWebFontsEnabled ? `url(${remoteUrl})` : `local('${family}')`;
+}
diff --git a/packages/runtime/src/fonts/utils.ts b/packages/runtime/src/fonts/utils.ts
index 64d3b4a7..1eb550d0 100644
--- a/packages/runtime/src/fonts/utils.ts
+++ b/packages/runtime/src/fonts/utils.ts
@@ -9,6 +9,7 @@
 import { WebFonts } from './fixtures';
 import { FontStyle } from '../constants';
 import { Fonts } from '../traits';
+import { canLoadRemoteWebFonts, resolveWebFontSource } from './policy';
 
 import type { World } from 'koota';
 import type * as types from './types';
@@ -29,6 +30,7 @@ function getFontFaceSet(): FontFaceSet | null {
  * Get common web fonts
  */
 export function getWebFonts(): types.FontSources[] {
+	if (!canLoadRemoteWebFonts()) return [];
 	return Object.keys(WebFonts).map((family) => {
 		return {
 			family,
@@ -49,7 +51,7 @@ export async function loadWebFont(
 	style: FontStyle = FontStyle.NORMAL,
 	weight?: string,
 ): Promise<types.FontSource> {
-	const source = `url(${WebFonts[family].url})`;
+	const source = resolveWebFontSource(family, WebFonts[family].url);
 	const font: types.FontSource = {
 		source,
 		family,
@@ -69,6 +71,10 @@ export async function loadWebFont(
 
 	fonts.push(font);
 
+	// Do not ask FontFace to resolve a URL in local-only mode. The authored
+	// family remains intact and Chromium uses a bundled/system fallback.
+	if (!canLoadRemoteWebFonts()) return font;
+
 	// Load all weights if no weight is specified
 	if (!weight) {
 		const config = WebFonts[family as keyof typeof WebFonts];
diff --git a/packages/runtime/src/queries/hierarchy.ts b/packages/runtime/src/queries/hierarchy.ts
index 5bfb1f28..e518e083 100644
--- a/packages/runtime/src/queries/hierarchy.ts
+++ b/packages/runtime/src/queries/hierarchy.ts
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { ChildOf, Computed, Name, Playback } from '../traits';
+import { AdjustmentLayer, ChildOf, Computed, Geometry, Group, Name, Playback } from '../traits';
 import { isStage, isScene } from './predicates';
 // Direct module, not the utils barrel: utils/time reaches back into this file.
 import { sortByItemIndex } from '../utils/sort';
@@ -18,6 +18,26 @@ export function getEntityChildren(world: World, parent: Entity): Entity[] {
 	return [...world.query(ChildOf(parent))].sort(sortByItemIndex);
 }
 
+/**
+ * A direct child that participates in the runtime node tree.
+ *
+ * Keep this as trait checks over the one-clause relation query. Koota 0.6 can
+ * lose valid entities when `ChildOf` is combined with `Or(...)` in editor
+ * worlds whose traits span multiple internal bitmask generations.
+ */
+export function isNodeEntity(entity: Entity): boolean {
+	return entity.has(Geometry) || entity.has(Group) || entity.has(AdjustmentLayer);
+}
+
+export function getNodeChildren(world: World, parent: Entity): Entity[] {
+	return getEntityChildren(world, parent).filter(isNodeEntity);
+}
+
+export function getDrawableChildren(world: World, parent: Entity): Entity[] {
+	return getEntityChildren(world, parent)
+		.filter((entity) => entity.has(Geometry) || entity.has(Group));
+}
+
 /**
  * Parent node, or null when the parent is the stage (or missing).
  * Use this wherever "top-level" matters; getParentEntity returns the raw
diff --git a/packages/runtime/src/systems/motion.ts b/packages/runtime/src/systems/motion.ts
index 842f1dd4..37ec4e1c 100644
--- a/packages/runtime/src/systems/motion.ts
+++ b/packages/runtime/src/systems/motion.ts
@@ -2,7 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Not, Or } from 'koota';
 import { cubicBezier, steps, spring } from 'animejs';
 
 import { store } from '../world/store';
@@ -194,9 +193,16 @@ export function motionSystem(world: World): void {
 	const keyframeTrack = store(world, KeyframeTrack);
 	const worldProps = getPropertyPaths(world);
 
-	for (const entity of world.query(
-		Or(Geometry, Group, AdjustmentLayer), Not(Hidden), Not(Culled),
-	)) {
+	// Keep the node union and exclusions out of Koota's compound query. In the
+	// editor world these traits span internal bitmask generations, and Koota
+	// 0.6 can otherwise drop valid nodes entirely.
+	const nodes = new Set([
+		...world.query(Geometry),
+		...world.query(Group),
+		...world.query(AdjustmentLayer),
+	]);
+	for (const entity of nodes) {
+		if (entity.has(Hidden) || entity.has(Culled)) continue;
 		const eid = entity.id();
 
 		if (computed.visibility[eid] === 0) continue;
diff --git a/packages/runtime/src/systems/playback.ts b/packages/runtime/src/systems/playback.ts
index 09b0c3c6..095533ea 100644
--- a/packages/runtime/src/systems/playback.ts
+++ b/packages/runtime/src/systems/playback.ts
@@ -20,7 +20,7 @@ import {
 	Mode, FrameRate, Time, AudioEngine, FramePromises, Tickers,
 	Root,
 } from '../traits';
-import { getParentNode } from '../queries/hierarchy';
+import { getNodeChildren, getParentNode } from '../queries/hierarchy';
 import { getIntrinsicPaint, getSourceWindow } from '../utils/time';
 import { clamp } from '../math/common';
 import { getTransitionWindow } from '../utils/transition';
@@ -278,7 +278,8 @@ function forwardDecoders(world: World, scene: Entity, entity: Entity): void {
 		forwardAudioDecoder(world, scene, entity, paintAudioSource);
 	}
 
-	for (const child of world.query(ChildOf(entity), Or(Geometry, Group, AdjustmentLayer), Not(Hidden))) {
+	const children = getNodeChildren(world, entity).filter((child) => !child.has(Hidden));
+	for (const child of children) {
 		forwardDecoders(world, scene, child);
 	}
 }
@@ -302,7 +303,8 @@ function updateVisibility(world: World, scene: Entity, entity: Entity): void {
 		computed.visibility[eid] = globalFrame >= start && globalFrame < end ? 1 : 0;
 	}
 
-	for (const child of world.query(Or(Geometry, Group, AdjustmentLayer), ChildOf(entity))) {
+	const children = getNodeChildren(world, entity);
+	for (const child of children) {
 		updateVisibility(world, scene, child);
 	}
 }
@@ -386,13 +388,18 @@ export function playbackSystem(world: World): void {
 		advancePlayhead(world, entity);
 	}
 
-	for (const entity of world.query(Or(Geometry, Group, AdjustmentLayer), ChildOf(world.get(Root)!))) {
+	const roots = getNodeChildren(world, world.get(Root)!);
+	for (const entity of roots) {
 		updateVisibility(world, entity, entity);
 		forwardDecoders(world, entity, entity);
 	}
 
 	// handle transition visibility
-	for (const clip of world.query(Or(Geometry, Group, AdjustmentLayer), Transition)) {
+	const transitions = [
+		...world.query(Or(Geometry, Group), Transition),
+		...world.query(AdjustmentLayer, Transition),
+	];
+	for (const clip of transitions) {
 		const parent = getParentNode(clip);
 
 		if (parent == null || !parent.has(Sequential)) {
@@ -402,7 +409,7 @@ export function playbackSystem(world: World): void {
 			continue;
 		}
 
-		const children = world.query(ChildOf(parent), Or(Geometry, Group, AdjustmentLayer));
+		const children = getNodeChildren(world, parent);
 		const partner = children.find(sibling => computed.start[sibling.id()] === computed.end[clip.id()]);
 		if (!partner) continue;
 		const window = getTransitionWindow(world, clip, partner);
diff --git a/packages/runtime/src/systems/render.ts b/packages/runtime/src/systems/render.ts
index 6a39601d..2e9a2a46 100644
--- a/packages/runtime/src/systems/render.ts
+++ b/packages/runtime/src/systems/render.ts
@@ -8,16 +8,14 @@
 // regions are pushed callback-less (see HitRegions); the app's input layer
 // attaches its handlers.
 
-import { Not, Or } from 'koota';
-
 import { store } from '../world/store';
 import {
 	COMPOSITE_OPERATIONS, EffectType, GeometryType, PaintType, ScaleModeType,
 	TransitionType,
 } from '../constants';
 import {
-	ChildOf, Hidden, Culled, Interactive, IsMask,
-	ClipsContent, Geometry, Group, Paint, Color, Caption, ScaleMode, Shader,
+	Hidden, Culled, Interactive, IsMask,
+	ClipsContent, Geometry, Paint, Color, Caption, ScaleMode, Shader,
 	BlendMode, Effect, Transition, MixedCornerRadius,
 	LocalTransform, WorldTransform, Computed, Cache,
 	Host,
@@ -25,7 +23,7 @@ import {
 	HitRegions,
 	Root,
 } from '../traits';
-import { getParentNode } from '../queries/hierarchy';
+import { getDrawableChildren, getParentNode } from '../queries/hierarchy';
 import { getViewMatrix } from '../queries/camera';
 import { colorToHex } from '../utils/color';
 import { FAILED_COLOR, getGeneratingColor, getSourceFailure, isGenerating } from '../utils/generating';
@@ -864,6 +862,21 @@ export function renderNode(world: World, entity: Entity): void {
 	ctx.restore();
 }
 
+/**
+ * Visible node roots in paint order.
+ *
+ * Do not fold `Not(Culled)` into the Koota relation query. In a world with
+ * the editor's later trait generations, Koota 0.6 can omit a scene from that
+ * compound query even after its `Culled` tag has been removed. `renderNode`
+ * checks the tag again, so filtering this stable query is equivalent and
+ * cannot blank the entire document.
+ */
+export function getRenderableRoots(world: World): Entity[] {
+	const stage = world.get(Root)!;
+	return getDrawableChildren(world, stage)
+		.filter((entity) => !entity.has(Culled));
+}
+
 /**
  * Render system entry point. Call after transformSystem.
  *
@@ -900,8 +913,7 @@ export function renderSystem(world: World): void {
 	ctx.setTransform(view.a, view.b, view.c, view.d, view.e, view.f);
 
 	// Render top-level nodes.
-	const stage = world.get(Root)!;
-	for (const entity of world.query(Or(Geometry, Group), ChildOf(stage), Not(Culled))) {
+	for (const entity of getRenderableRoots(world)) {
 		renderNode(world, entity);
 	}
 }
diff --git a/packages/runtime/src/systems/transform.ts b/packages/runtime/src/systems/transform.ts
index 410029f2..99412177 100644
--- a/packages/runtime/src/systems/transform.ts
+++ b/packages/runtime/src/systems/transform.ts
@@ -2,16 +2,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Not, Or } from 'koota';
-
 import { store } from '../world/store';
 import {
-	ChildOf, Geometry, Group, Hidden, IsMask, Sequential, AdjustmentLayer,
+	Group, Hidden, IsMask, Sequential, AdjustmentLayer,
 	Culled, Flip, Anchor, Computed, Cache, LocalTransform, WorldTransform,
 	WorldBounds, RenderSurface,
 	Root,
 } from '../traits';
-import { getParentNode } from '../queries/hierarchy';
+import { getDrawableChildren, getParentNode } from '../queries/hierarchy';
 import { getViewMatrix } from '../queries/camera';
 
 import {
@@ -209,7 +207,8 @@ export function computeGroupBounds(world: World, entity: Entity): void {
 		let maxY = -Infinity;
 		let any = false;
 
-		for (const child of world.query(Or(Geometry, Group), ChildOf(entity), Not(Hidden), Not(IsMask))) {
+		for (const child of getDrawableChildren(world, entity)) {
+			if (child.has(Hidden) || child.has(IsMask)) continue;
 			const cid = child.id();
 			const mat: Mat2D = {
 				a: localStore.a[cid] ?? 1, b: localStore.b[cid] ?? 0,
@@ -289,7 +288,7 @@ function adjustLayers(world: World, adjust: Entity): void {
 		computeWorldBounds(world, entity);
 		cullEntity(world, entity, parentEntity);
 
-		for (const child of world.query(Or(Geometry, Group), ChildOf(entity))) {
+		for (const child of getDrawableChildren(world, entity)) {
 			reworld(child, entity);
 		}
 	};
@@ -308,12 +307,12 @@ export function transformSystem(world: World): void {
 		computeWorldBounds(world, entity);
 		cullEntity(world, entity, parentEntity);
 
-		for (const child of world.query(Or(Geometry, Group), ChildOf(entity))) {
+		for (const child of getDrawableChildren(world, entity)) {
 			walk(child, entity);
 		}
 	};
 
-	for (const entity of world.query(Or(Geometry, Group), ChildOf(world.get(Root)!))) {
+	for (const entity of getDrawableChildren(world, world.get(Root)!)) {
 		walk(entity, null);
 	}
 
diff --git a/packages/runtime/tests/cache-observer.test.ts b/packages/runtime/tests/cache-observer.test.ts
new file mode 100644
index 00000000..27f9fda1
--- /dev/null
+++ b/packages/runtime/tests/cache-observer.test.ts
@@ -0,0 +1,132 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import {
+	Cache,
+	ChildOf,
+	Computed,
+	Culled,
+	Geometry,
+	ItemIndex,
+	KeyframeTrack,
+	Playback,
+	Position,
+	Root,
+	Scene,
+	appendChild,
+	createEntity,
+	createRuntimeWorld,
+	getRenderableRoots,
+	motionSystem,
+	playbackSystem,
+	setPlayhead,
+	setKeyframeTrack,
+	store,
+} from '../src/index.ts';
+
+test('render roots use the one-clause relation query and filter traits afterwards', () => {
+	const world = createRuntimeWorld('render-roots-test');
+	try {
+		const visible = createEntity(world);
+		visible.add(Geometry);
+		appendChild(world, visible, world.get(Root)!);
+
+		const culled = createEntity(world);
+		culled.add(Geometry);
+		culled.add(Culled);
+		appendChild(world, culled, world.get(Root)!);
+
+		let queryArity = 0;
+		const guardedWorld = new Proxy(world, {
+			get(target, property) {
+				if (property === 'query') {
+					return (...parameters: Parameters<typeof world.query>) => {
+						queryArity = parameters.length;
+						return world.query(...parameters);
+					};
+				}
+				const value = Reflect.get(target, property, target);
+				return typeof value === 'function' ? value.bind(target) : value;
+			},
+		}) as typeof world;
+
+		assert.deepEqual(getRenderableRoots(guardedWorld), [visible]);
+		assert.equal(queryArity, 1, 'node traits and culling must not be encoded as Koota query clauses');
+
+		culled.remove(Culled);
+		assert.deepEqual(new Set(getRenderableRoots(world)), new Set([visible, culled]));
+	} finally {
+		world.destroy();
+	}
+});
+
+test('relation observers retain every newly attached child, track, and keyframe', () => {
+	const world = createRuntimeWorld('cache-observer-test');
+	try {
+		const parent = createEntity(world);
+		parent.add(Geometry);
+		parent.add(Scene);
+		parent.add(Playback);
+		appendChild(world, parent, world.get(Root)!);
+
+		const first = createEntity(world);
+		first.add(Geometry);
+		first.add(ItemIndex({ value: 0 }));
+		first.add(Position({ x: 10, y: 0 }));
+		appendChild(world, first, parent);
+
+		const second = createEntity(world);
+		second.add(Geometry);
+		second.add(ItemIndex({ value: 1 }));
+		appendChild(world, second, parent);
+
+		assert.deepEqual(parent.get(Cache)?.children, [first, second]);
+
+		setKeyframeTrack(world, first, 'position.x', [
+			{ time: 0, value: 10 },
+			{ time: 15, value: 40 },
+			{ time: 30, value: 70 },
+		]);
+		setKeyframeTrack(world, first, 'position.y', [
+			{ time: 0, value: 0 },
+			{ time: 30, value: 90 },
+		]);
+
+		const tracks = first.get(Cache)?.keyframeTracks ?? [];
+		assert.equal(tracks.length, 2);
+		assert.deepEqual(tracks.map((track) => track.get(KeyframeTrack)?.property), [
+			'position.x',
+			'position.y',
+		]);
+		assert.deepEqual(tracks.map((track) => track.get(KeyframeTrack)?.target), [first, first]);
+		assert.deepEqual(tracks.map((track) => track.get(Cache)?.keyframes.length), [3, 2]);
+		assert.equal(world.query(ChildOf(first), KeyframeTrack).length, 2);
+
+		const computed = store(world, Computed);
+		setPlayhead(world, parent, 0);
+		playbackSystem(world);
+		assert.equal(computed.localTime[first.id()], 0);
+		motionSystem(world);
+		assert.equal(computed.positionX[first.id()], 10);
+		assert.equal(computed.positionY[first.id()], 0);
+
+		setPlayhead(world, parent, 15);
+		playbackSystem(world);
+		assert.equal(computed.localTime[first.id()], 15);
+		assert.equal(first.get(Computed)?.visibility, 1);
+		assert.equal(first.get(Cache)?.keyframeTracks.length, 2);
+		motionSystem(world);
+		assert.equal(first.get(Computed)?.localTime, 15);
+		assert.equal(computed.positionX[first.id()], 40);
+		assert.equal(computed.positionY[first.id()], 45);
+
+		setPlayhead(world, parent, 30);
+		playbackSystem(world);
+		assert.equal(computed.localTime[first.id()], 30);
+		motionSystem(world);
+		assert.equal(computed.positionX[first.id()], 70);
+		assert.equal(computed.positionY[first.id()], 90);
+	} finally {
+		world.destroy();
+	}
+});
diff --git a/packages/runtime/tests/web-font-policy.test.ts b/packages/runtime/tests/web-font-policy.test.ts
new file mode 100644
index 00000000..78220823
--- /dev/null
+++ b/packages/runtime/tests/web-font-policy.test.ts
@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  canLoadRemoteWebFonts,
+  resolveWebFontSource,
+  setRemoteWebFontsEnabled,
+} from "../src/fonts/policy.ts";
+
+test.afterEach(() => setRemoteWebFontsEnabled(true));
+
+test("local-only font resolution exposes no remote URL and disables remote loading", () => {
+  setRemoteWebFontsEnabled(false);
+  assert.equal(canLoadRemoteWebFonts(), false);
+  const source = resolveWebFontSource("Inter", "https://fonts.example.test/inter.woff2");
+  assert.equal(source, "local('Inter')");
+  assert.doesNotMatch(source, /https?:|url\(/);
+});
+
+test("ordinary runtime retains remote source resolution", () => {
+  setRemoteWebFontsEnabled(true);
+  assert.equal(canLoadRemoteWebFonts(), true);
+  assert.equal(
+    resolveWebFontSource("Inter", "https://fonts.gstatic.com/inter.woff2"),
+    "url(https://fonts.gstatic.com/inter.woff2)",
+  );
+});
diff --git a/reference/README.md b/reference/README.md
index 9bf1420a..cd851968 100644
--- a/reference/README.md
+++ b/reference/README.md
@@ -8,7 +8,7 @@ A project is a folder of that JSX, and **the source is the document**: the app c
 
 ## Groups
 
-**Top-level:** [`whoami`](./whoami.md), [`logs`](./logs.md), [`screenshot`](./screenshot.md), [`report`](./report.md), [`context`](./context.md) (alias `ctx`), [`capture`](./capture.md), [`check`](./check.md), [`export`](./export.md), [`models`](./models.md), [`voices`](./voices.md), [`fonts`](./fonts.md), [`fetch`](./fetch.md).
+**Top-level:** [`whoami`](./whoami.md), [`logs`](./logs.md), [`screenshot`](./screenshot.md), [`report`](./report.md), [`context`](./context.md) (alias `ctx`), [`browser`](./browser.md), [`capture`](./capture.md), [`check`](./check.md), [`export`](./export.md), [`models`](./models.md), [`voices`](./voices.md), [`fonts`](./fonts.md), [`fetch`](./fetch.md).
 
 | Group | Alias | Scope |
 | ----- | ----- | ----- |
@@ -31,6 +31,7 @@ How the surface is divided:
 ### Document
 
 - [`dapi open`](./open.md): launch the app and open (or create) a project folder, anywhere on disk
+- [`dapi browser`](./browser.md): start and observe a read-only browser companion backed by the hidden Electron renderer
 - [`dapi context`](./context.md): which project the app has open, where its playhead sits, its registered fonts, and where its generations stand
 - [`dapi capture`](./capture.md): render frames of a scene, as an export would, to a labelled contact sheet or one PNG per position
 - [`dapi check`](./check.md): check a node's subtree for structural mistakes (black-frame gaps, never-visible nodes, failed sources) and report subtree stats
diff --git a/reference/browser.md b/reference/browser.md
new file mode 100644
index 00000000..18f91bfa
--- /dev/null
+++ b/reference/browser.md
@@ -0,0 +1,169 @@
+# `dapi browser`
+
+Starts a local, read-only browser companion for one project. Electron is still
+the host: its hidden renderer owns the open project, compile/watch loop, DAPI,
+filesystem, export, and AI behavior. The browser is only another constrained
+renderer of the same `apps/web` build and route/component tree.
+
+The command never launches the operating system's default browser. An agent or
+harness opens the returned URL in its Codex built-in browser.
+
+## Start
+
+```sh
+dapi browser ./my-project
+```
+
+The command ensures Diffusion Studio is running with its window hidden, opens
+the project through the existing DAPI, waits until that renderer reports the
+same open folder, starts a random loopback listener, and prints one JSON object:
+
+```ts
+{
+  active: true;
+  sessionId: string;
+  origin: `http://127.0.0.1:${number}`;
+  url: string; // one-time capability is in the fragment and is cleared on authentication
+  project: { id: string; name: string; displayName: string };
+  rendererConnected: boolean;
+  hostWindowVisible: false;
+  revision: number;
+  bundleHash: string; // SHA-256 of the exact canonical compiled bundle
+  canonicalCompiled: { sessionId: string; revision: number; bundleHash: string };
+  hostApplied: { sessionId: string; revision: number; bundleHash: string };
+  browserApplied?: { sessionId: string; revision: number; bundleHash: string };
+  lifecycle:
+    | "awaiting-renderer"
+    | "awaiting-host-apply"
+    | "awaiting-browser-apply"
+    | "ready"
+    | "disconnected-fresh-session-required"
+    | "failed";
+  egressAttempts: number;
+  capabilities: {
+    readOnly: true;
+    browserDapi: false;
+    cloudAi: false;
+    persistentEdits: false;
+    htmlPaint: false;
+    media: "unsupported-phase-a";
+    webgpu: "browser-dependent";
+    fonts: "browser-dependent";
+    trustedProjectCode: true;
+  };
+  humanStep: string;
+}
+```
+
+Treat `url` as a one-time local secret. It is accepted by only one renderer,
+is never sent in an HTTP request, and cannot be reused after authentication.
+
+Every start assigns a fresh session identity, resets the hidden renderer to a non-project route, arms one bounded
+capture for the requested project root, and then opens that project through the
+unchanged DAPI route. The resulting canonical compile is released as soon as
+the start consumes it (or after 30 seconds). Normal desktop compiles are not
+cached by companion code, and stop→start of the same project therefore obtains
+a fresh renderer compile instead of reusing a prior session's bundle.
+
+Readiness has three distinct stages. Main records `canonicalCompiled`; the
+hidden Electron `EditorPage` acknowledges only after the reconciler mounted the
+exact session/revision/hash; only then does main relay the snapshot to the
+browser, whose own `EditorPage` returns the same exact applied identity. Status
+is `ready` only when all three match. Offline DAPI capture/export uses the same
+compiler but is not a surface mount and therefore cannot advance these stages.
+
+Phase A is code-native only. Browser media materialization and File System
+Access handles are explicitly unsupported: there is no path, byte, download,
+Range, or speculative media bridge. Use the authoritative Electron/DAPI path
+for media projects until a separately proven disk-backed source seam exists.
+
+## Observe and stop
+
+```sh
+dapi browser --status
+dapi browser --logs
+dapi browser --stop
+```
+
+`--status` reports renderer connection, hidden-host visibility/local-only mode,
+the three applied identities, lifecycle, and blocked egress-attempt count.
+`--logs` returns the bounded structured log ring, with sequence ids, redacted
+semantic playback/scrub/source events, and distinct compile/apply failures.
+`--stop` closes the project watcher, renderer socket, WebSocket server, and
+loopback listener, removes the host network guard, and restores the renderer's
+pre-companion route/mode. It leaves Electron and DAPI healthy. Closing or
+reloading the browser tab consumes no new authority: the stale shell says
+`Disconnected; start a fresh browser companion session`, status reports
+`disconnected-fresh-session-required`, and a fresh start supplies a new
+session, port, and one-time capability.
+
+## Security and capability boundary
+
+- The listener always binds to `127.0.0.1` on a random port and requires the
+  exact HTTP/WebSocket Origin.
+- Hidden Electron and browser execute the exact same packaged `apps/web` file
+  tree. Host and shell exchange protocol version, schema hash, app version, and
+  the hash of that complete served build. Any mismatch fails closed; there is
+  no copied shell or duplicate editor UI.
+- No Electron desktop bridge, DAPI router, write/delete operation, external
+  opener, export, AI endpoint, Supabase session, checkout, analytics, or Sentry
+  transport is exposed to the browser. The app-owned local-only profile also
+  suppresses remote font discovery and exposes only bundled/local fallback
+  families.
+- The relay contains only the canonical compiled bundle, narrow project
+  identity, revision/build linkage, and fixed capability description. It does
+  not read or send `assets.yml`, project config, project roots, or file paths;
+  the companion initializes its asset library from an explicit empty manifest
+  and its project config from `null`.
+- The loopback server's CSP and the renderer guards reliably deny and record
+  non-loopback `fetch`, XHR, WebSocket, EventSource, Worker/SharedWorker,
+  `importScripts`, beacon, `window.open`, and image/media/source/link/script/
+  frame/form/font URL attempts. The hidden Electron host separately blocks
+  non-loopback requests while companion mode is active. Network audit evidence
+  must distinguish attempted-and-blocked activity from zero attempts.
+- Scene/frame export controls are omitted from the companion File menu and
+  inspector. Cmd/Ctrl-E is inert, and both action boundaries reject before a
+  save picker, encoder render, frame snapshot, or download can begin. Electron
+  UI and DAPI export continue through their existing paths.
+- Project JSX and Babel plugins remain explicitly trusted code: Electron's
+  canonical compiler evaluates them, and the browser reconciler evaluates the
+  compiled bundle with `new Function` in the app realm. Companion identity is
+  captured once and its public bootstrap object is frozen/non-writable so
+  accidental or DevTools tampering cannot restore authoring authority.
+  This is not a sandbox or containment boundary for an actively malicious
+  trusted project. In particular, same-realm top-level navigation cannot be
+  guaranteed against such code without a separate sandbox/browser policy; the
+  prototype does not make that claim.
+
+## Phase A limits
+
+- Persistent and browser-local document edits are disabled. Inspector fields,
+  font selection, canvas transform, clip trim/drag, layer/keyframe actions,
+  mutation shortcuts/drop paths, and scene/frame export are disabled or inert.
+  Selection, inspection, layer expansion, Move/Hand/pan, zoom, playback, and
+  scrub remain local view state. Use the Electron-owned DAPI or edit source
+  files on disk; the companion reloads only after Electron mounts and
+  acknowledges the new canonical bundle.
+- Diffusion AI generation, captions without a local transcript source,
+  transcription/listening, background removal, upscale, and add-audio are
+  disabled in zero-credit/local-only mode. Browser media is not supported in
+  this phase; local inputs remain available only to the authoritative desktop
+  path.
+- `<html>`/`htmlPaint` fails closed because ordinary Chromium lacks the
+  experimental `CanvasDrawElement` API used by Electron. WebGPU, shader, and
+  local-font behavior remains browser-dependent.
+- There is no browser DAPI or screenshot claim, and no large-file or
+  multi-gigabyte streaming claim. A future user-granted disk-backed handle or
+  URL/byte-source seam needs a separate bounded-memory proof.
+- Full-parity Linux/Windows Electron packaging is a separate track. If hiding
+  a renderer window is not reliable on a platform, the host must use the
+  documented deterministic minimized fallback before claiming the same UX.
+
+Reusing `apps/web` directly minimizes drift and automatically inherits most UI
+changes. Truly maintenance-free operation requires this seam to merge upstream;
+until then, a thin fork patch can still require rebasing as host interfaces
+change.
+
+The 30-second acceptance project is a comprehensive representative proof of
+the supported macOS Phase A flow. It is not exhaustive editor parity, a
+malicious-code sandbox proof, or Linux/Windows packaging evidence.