@1agh/maude 0.52.2 → 0.53.1

package/apps/studio/http.ts

@@ -291,6 +291,55 @@ export function sameOriginRead(req: Request): boolean {
   return site === 'same-origin' || site === 'none';
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Cloud Phase 25 C2 — the local half of the read-only gate.
+//
+// When the project is linked to a hub that vouched a `viewer` role at sign-in
+// (isHubReadOnly), the LOCAL dev-server refuses project-mutating writes too.
+// The cell is the authority (Phase 25 C1 — it refuses whatever a patched
+// client sends); this gate exists so a viewer's local clone never DIVERGES
+// from the hub: a local write the cell would refuse to sync is a silent fork,
+// which is worse than a refusal. Mirrors C1's posture — writes are
+// default-denied with a short, explicit allowlist.
+//
+// What a read-only session may still write (per-user runtime state per
+// DDR-115, plus the two role-granted verbs the cell itself allows —
+// export ≈ `/api/export`, session management ≈ `/auth/logout`):
+const READ_ONLY_SAFE_METHODS = new Set(['GET', 'HEAD', 'OPTIONS']);
+export const READ_ONLY_ALLOWED_WRITES = new Set([
+  '/_hmr', // build-watch rebuild hint — dev plumbing, not project state
+  '/_canvas-state', // per-user camera / view state (DDR-115: never versioned)
+  '/_api/canvas-meta', // viewport lane only — the layout lane is refused in-handler
+  '/_api/ui-prefs', // per-user UI preferences
+  '/_api/timeline-media', // per-user runtime media cache (scrub read path)
+  '/_api/export', // "look, comment and download" — the cell allows /api/export too
+  '/_api/export-jobs',
+  '/_api/export-jobs/download',
+  '/_api/report', // bug reports are about Maude, not the project
+  '/_api/report-fallback',
+  '/_api/hub/link', // link/unlink ≈ session management (cell allows /auth/logout)
+  '/_api/workspace/sign-in', // signing in is how the role is (re)learned
+  '/_api/workspace/disclosure',
+  '/_api/cloud/signin/start', // account session, not project state
+  '/_api/cloud/signin/poll',
+  '/_api/cloud/signout',
+  '/_api/git/fetch', // syncing the project DOWN is a read of the project
+  '/_api/git/pull',
+  '/_api/git/checkout', // viewing another branch, not changing one
+]);
+
+/** The refusal a read-only session gets for a project-mutating write. */
+export function readOnlyRefusalResponse(): Response {
+  return Response.json(
+    {
+      error: 'read-only',
+      reason: 'read-only',
+      message: 'Your role in this project is viewer — editing is disabled.',
+    },
+    { status: 403, headers: { 'Cache-Control': 'no-store' } }
+  );
+}
+
 function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
   let pathname: string;
   try {
@@ -1173,7 +1222,7 @@ export function createHttp(
       Response.json({
         ...ctx.cfg,
         canvasOrigin: ctx.canvasOrigin,
-        readOnly: ctx.cfg.linkedHub ? isHubReadOnly(ctx.cfg.linkedHub.url) : false,
+        readOnly: projectReadOnly(),
       }),
 
     // What's New feed (DDR-A) — read-only product-update list surfaced in the
@@ -1214,7 +1263,13 @@ export function createHttp(
         return new Response('local request required (DNS-rebinding guard)', { status: 403 });
       const endpoint = process.env.MAUDE_REPORT_URL || 'https://cloud.maude.sh/report';
       try {
-        const upstream = await fetch(endpoint, {
+        // `globalThis.fetch` — NOT bare `fetch`: this module declares its own
+        // `async function fetch(req: Request)` (the server fall-through handler)
+        // in the same scope, which shadows the global. A bare call re-entered the
+        // fall-through with a URL string, so `new URL(req.url)` threw
+        // `"undefined" cannot be parsed as a URL` and every report died with a
+        // plain-text HTTP 500 without ever leaving the machine.
+        const upstream = await globalThis.fetch(endpoint, {
           method: 'POST',
           body: await req.formData(),
           signal: AbortSignal.timeout(30_000),
@@ -1311,6 +1366,14 @@ export function createHttp(
         if (!body.patch || typeof body.patch !== 'object') {
           return new Response('body.patch must be an object', { status: 400 });
         }
+        // Cloud Phase 25 C2 — this route is on READ_ONLY_ALLOWED_WRITES for its
+        // VIEWPORT lane only (per-user camera, split into `_canvas-state/` by
+        // the api layer — DDR-115). The layout lane mutates the versioned
+        // `.meta.json`, so a read-only session is refused here, in-handler,
+        // where the two lanes are distinguishable.
+        if (projectReadOnly() && 'layout' in body.patch) {
+          return readOnlyRefusalResponse();
+        }
         const next = await api.patchCanvasMeta(body.file, body.patch);
         if (!next) return new Response('Not found or rejected', { status: 404 });
         return Response.json(next, { headers: { 'Cache-Control': 'no-store' } });
@@ -3891,7 +3954,11 @@ export function createHttp(
     '/index.html': () => serveFile(join(CLIENT_DIR, 'index.html')),
   } satisfies Record<string, (req: Request) => Response | Promise<Response>>;
 
-  async function fetch(req: Request): Promise<Response> {
+  // Named `handleFallthrough`, not `fetch` — a same-named local function shadows
+  // the global `fetch` for every call site in this module's scope, which is how
+  // the `/_api/report` route ended up calling itself instead of the network (see
+  // the `globalThis.fetch` comment on that route; RCA issue-report-a-bug-http-500).
+  async function handleFallthrough(req: Request): Promise<Response> {
     try {
       const url = new URL(req.url);
       const pathname = url.pathname;
@@ -4254,5 +4321,39 @@ export function createHttp(
     return false;
   }
 
-  return { routes, fetch, serveCanvasShell, isCanvasSafeRoute };
+  // Cloud Phase 25 C2 — read-only gate over every write surface (~42 mutating
+  // routes). Computed per-request so a role change lands on the next write
+  // (workspace sign-in rewrites hubs.json; no restart needed). Wrapping here
+  // covers all three doors at once: the main-origin `routes` table, the
+  // canvas-origin `routes` allowlist in server.ts (it references these same
+  // handlers), and the dynamic-path `fetch` fall-through (comment replies).
+  function projectReadOnly(): boolean {
+    return ctx.cfg.linkedHub ? isHubReadOnly(ctx.cfg.linkedHub.url) : false;
+  }
+
+  function readOnlyRefusal(req: Request): Response | null {
+    if (READ_ONLY_SAFE_METHODS.has(req.method)) return null;
+    if (!projectReadOnly()) return null;
+    let pathname: string;
+    try {
+      pathname = new URL(req.url).pathname;
+    } catch {
+      return readOnlyRefusalResponse();
+    }
+    if (READ_ONLY_ALLOWED_WRITES.has(pathname)) return null;
+    return readOnlyRefusalResponse();
+  }
+
+  const guardedRoutes = Object.fromEntries(
+    Object.entries(routes).map(([path, handler]) => [
+      path,
+      (req: Request) => readOnlyRefusal(req) ?? handler(req),
+    ])
+  ) as typeof routes;
+
+  async function guardedFetch(req: Request): Promise<Response> {
+    return readOnlyRefusal(req) ?? handleFallthrough(req);
+  }
+
+  return { routes: guardedRoutes, fetch: guardedFetch, serveCanvasShell, isCanvasSafeRoute };
 }

package/apps/studio/read-only-mode.ts

@@ -0,0 +1,36 @@
+/**
+ * @file       read-only-mode.ts — Cloud Phase 25 C2
+ * @scope      apps/studio/read-only-mode.ts
+ * @purpose    One boot-static answer to "is this canvas read-only?" for every
+ *             module that runs inside the canvas iframe.
+ *
+ * The shell appends `?ro=1` to the canvas URL (client/canvas-url.js) when
+ * `/_config.readOnly` is true — i.e. the linked hub vouched a `viewer` role at
+ * workspace sign-in (sync/hubs-config.ts). Boot-static on purpose: a role is
+ * per-session, and reading the URL can't race the way a post-load postMessage
+ * could (during which a viewer could still drag something).
+ *
+ * This flag decides what the canvas chrome OFFERS — tools, drag handles,
+ * inline edit, context menus. It never STOPS a write; that is the cell
+ * (Phase 25 C1) and the dev-server's read-only gate (http.ts), both of which
+ * hold whatever this returns.
+ */
+
+let cached: boolean | null = null;
+
+export function isReadOnlyCanvas(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (cached === null) {
+    try {
+      cached = new URLSearchParams(window.location.search).get('ro') === '1';
+    } catch {
+      cached = false;
+    }
+  }
+  return cached;
+}
+
+/** Test seam — reset the module cache (bun:test re-uses the module registry). */
+export function _resetReadOnlyCache(): void {
+  cached = null;
+}

package/apps/studio/test/canvas-url.test.ts

@@ -96,4 +96,17 @@ describe('canvasUrl — per-canvas design-system token resolution', () => {
   test('non-tsx paths bypass the shell and return a direct URL', () => {
     expect(canvasUrl('.design/ui/legacy.html', cfg)).toBe(urlOf('.design/ui/legacy.html'));
   });
+
+  // Cloud Phase 25 C2 — the viewer role rides into the canvas as ?ro=1 so the
+  // iframe chrome is read-only from its very first paint (boot-static, no
+  // postMessage race).
+  test('cfg.readOnly stamps ro=1; absent/false omits it', () => {
+    expect(paramsOf(canvasUrl('.design/ui/Studio.tsx', { ...cfg, readOnly: true })).get('ro')).toBe(
+      '1'
+    );
+    expect(paramsOf(canvasUrl('.design/ui/Studio.tsx', cfg)).get('ro')).toBeNull();
+    expect(
+      paramsOf(canvasUrl('.design/ui/Studio.tsx', { ...cfg, readOnly: false })).get('ro')
+    ).toBeNull();
+  });
 });

package/apps/studio/test/read-only-gate.test.ts

@@ -0,0 +1,130 @@
+// Cloud Phase 25 C2 — the local half of the read-only gate.
+//
+// When the linked hub's credential carries the `viewer` role (vouched at
+// workspace sign-in, stored in hubs.json), the LOCAL dev-server refuses
+// project-mutating writes with a legible 403 — so a viewer's clone can never
+// silently diverge from the cell (which refuses the same writes at sync,
+// Phase 25 C1). Writes are default-denied with a short allowlist
+// (READ_ONLY_ALLOWED_WRITES in http.ts): per-user runtime state (camera,
+// ui-prefs) plus the two role-granted verbs the cell itself allows (export,
+// session management).
+
+import { afterAll, describe, expect, test } from 'bun:test';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import type { Subprocess } from 'bun';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+const HUB_URL = 'http://hub.invalid:9';
+
+/** Sandbox linked to a hub whose credential vouches `role`. */
+function makeLinkedSandbox(role?: string) {
+  const { root, designRoot } = makeSandbox();
+  const cfgPath = join(designRoot, 'config.json');
+  const cfg = JSON.parse(readFileSync(cfgPath, 'utf8'));
+  cfg.linkedHub = { url: HUB_URL, linkedAt: Date.now() };
+  writeFileSync(cfgPath, JSON.stringify(cfg, null, 2));
+  // The hubs.json credential store the role is read from (isHubReadOnly).
+  const hubsPath = join(root, 'hubs.json');
+  writeFileSync(
+    hubsPath,
+    JSON.stringify({
+      hubs: { [HUB_URL]: { token: 't', linkedAt: Date.now(), ...(role ? { role } : {}) } },
+    })
+  );
+  return { root, designRoot, hubsPath };
+}
+
+const procs: Subprocess[] = [];
+afterAll(async () => {
+  for (const p of procs) await killProc(p);
+});
+
+async function boot(role?: string) {
+  const { root, hubsPath } = makeLinkedSandbox(role);
+  const port = nextPort();
+  const proc = await bootServer(root, port, { HUBS_CONFIG_PATH: hubsPath });
+  procs.push(proc);
+  return { base: `http://localhost:${port}` };
+}
+
+describe('read-only gate — viewer role refuses project writes locally', () => {
+  test('viewer: writes 403 read-only, per-user + role-granted writes pass, /_config says so', async () => {
+    const { base } = await boot('viewer');
+
+    // /_config tells the client at boot.
+    const cfg = (await (await fetch(`${base}/_config`)).json()) as { readOnly?: boolean };
+    expect(cfg.readOnly).toBe(true);
+
+    // Project-mutating writes: refused with the legible read-only shape.
+    const editText = await fetch(`${base}/_api/edit-text`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ file: 'ui/fixture.html', text: 'x' }),
+    });
+    expect(editText.status).toBe(403);
+    const body = (await editText.json()) as { error?: string; message?: string };
+    expect(body.error).toBe('read-only');
+    expect(body.message).toContain('viewer');
+
+    // Canvas create + delete-element + git commit: same refusal.
+    for (const [path, method] of [
+      ['/_api/canvas', 'POST'],
+      ['/_api/delete-element', 'POST'],
+      ['/_api/git/commit', 'POST'],
+      ['/_api/fs-mkdir', 'POST'],
+      ['/_api/annotations', 'PUT'],
+      ['/_api/acp/chat', 'POST'],
+    ] as const) {
+      const r = await fetch(base + path, { method, body: '{}' });
+      expect(`${path} ${r.status}`).toBe(`${path} 403`);
+    }
+
+    // canvas-meta: the LAYOUT lane is refused…
+    const layout = await fetch(`${base}/_api/canvas-meta`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        file: '.design/ui/fixture.html',
+        patch: { layout: { artboards: [] } },
+      }),
+    });
+    expect(layout.status).toBe(403);
+    // …the VIEWPORT lane (per-user camera) is not.
+    const viewport = await fetch(`${base}/_api/canvas-meta`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        file: '.design/ui/fixture.html',
+        patch: { viewport: { x: 0, y: 0, zoom: 1 } },
+      }),
+    });
+    expect(viewport.status).not.toBe(403);
+
+    // Per-user runtime state stays writable (DDR-115 taxonomy).
+    const camera = await fetch(`${base}/_canvas-state`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ file: '.design/ui/fixture.html', viewport: { x: 1, y: 2, zoom: 1 } }),
+    });
+    expect(camera.status).toBe(204);
+
+    // Role-granted verb: export reaches its handler (may 400 on shape, never 403).
+    const exp = await fetch(`${base}/_api/export`, { method: 'POST', body: '{}' });
+    expect(exp.status).not.toBe(403);
+
+    // Reads are untouched.
+    expect((await fetch(`${base}/_index-data`)).status).toBe(200);
+    expect((await fetch(`${base}/_comments-all`)).status).toBe(200);
+  }, 30000);
+
+  test('member (no role on the credential): writes are NOT gated', async () => {
+    const { base } = await boot(undefined);
+    const cfg = (await (await fetch(`${base}/_config`)).json()) as { readOnly?: boolean };
+    expect(cfg.readOnly).toBe(false);
+    // A write reaches its handler (400 on bad shape — not the 403 refusal).
+    const r = await fetch(`${base}/_api/edit-text`, { method: 'POST', body: '{}' });
+    expect(r.status).not.toBe(403);
+  }, 30000);
+});

package/apps/studio/test/report-proxy.test.ts

@@ -0,0 +1,125 @@
+// Regression test for issue-report-a-bug-http-500 (RCA:
+// .ai/logs/rca/issue-report-a-bug-http-500.md). `/_api/report` proxies the
+// dialog's multipart body to `MAUDE_REPORT_URL`. A bare `fetch(endpoint, …)`
+// call inside http.ts silently resolved to this module's OWN same-named
+// fall-through handler instead of the global `fetch` — the request never left
+// the machine, and the route mirrored a bogus local 500 back to the client.
+// These tests boot a real server pointed at a real stub upstream, so a
+// reintroduced shadow (or any other break in the proxy hop) fails loudly
+// instead of only being caught by a mocked-upstream unit test.
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+async function bootStubUpstream(
+  handler: (req: Request) => Response | Promise<Response>
+): Promise<{ url: string; stop: () => void; received: () => number }> {
+  let received = 0;
+  const server = Bun.serve({
+    port: 0,
+    fetch: async (req) => {
+      received += 1;
+      return handler(req);
+    },
+  });
+  return {
+    url: `http://127.0.0.1:${server.port}`,
+    stop: () => server.stop(true),
+    received: () => received,
+  };
+}
+
+describe('/_api/report proxy hop', () => {
+  test('forwards the multipart body verbatim and mirrors a successful upstream response', async () => {
+    const { root } = makeSandbox();
+    let capturedBytes = 0;
+    let capturedHasReportPart = false;
+    const upstream = await bootStubUpstream(async (req) => {
+      const form = await req.formData();
+      capturedHasReportPart = typeof form.get('report') === 'string';
+      // Multipart parsing consumed the body — approximate "did real bytes
+      // arrive" by re-serializing what FormData kept.
+      capturedBytes = [...form.values()].reduce(
+        (n, v) => n + (typeof v === 'string' ? v.length : (v as Blob).size),
+        0
+      );
+      return Response.json({ ok: true, issueNumber: 1, issueUrl: 'https://example.com/issues/1' });
+    });
+
+    const port = nextPort();
+    const proc = await bootServer(root, port, { MAUDE_REPORT_URL: `${upstream.url}/report` });
+    try {
+      const form = new FormData();
+      form.set(
+        'report',
+        JSON.stringify({ schema: 'maude-report/v1', description: 'test', reportId: 'r-0123abcd' })
+      );
+      form.append('screenshot', new Blob([new Uint8Array([1, 2, 3, 4])]), 'shot.png');
+
+      const res = await fetch(`http://localhost:${port}/_api/report`, {
+        method: 'POST',
+        body: form,
+      });
+      expect(res.status).toBe(200);
+      const json = await res.json();
+      expect(json).toEqual({ ok: true, issueNumber: 1, issueUrl: 'https://example.com/issues/1' });
+
+      expect(upstream.received()).toBe(1);
+      expect(capturedHasReportPart).toBe(true);
+      expect(capturedBytes).toBeGreaterThan(0);
+    } finally {
+      await killProc(proc);
+      upstream.stop();
+    }
+  });
+
+  test('an unreachable upstream yields 502 with a JSON error, not a bare 500', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    // Nothing listens on this port — the fetch itself must fail/timeout.
+    const proc = await bootServer(root, port, { MAUDE_REPORT_URL: 'http://127.0.0.1:1/report' });
+    try {
+      const form = new FormData();
+      form.set(
+        'report',
+        JSON.stringify({ schema: 'maude-report/v1', description: 'test', reportId: 'r-0123abcd' })
+      );
+      const res = await fetch(`http://localhost:${port}/_api/report`, {
+        method: 'POST',
+        body: form,
+      });
+      expect(res.status).toBe(502);
+      const json = await res.json();
+      expect(json).toEqual({ error: 'report service unreachable' });
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+describe('no bare `fetch(` call sites in http.ts', () => {
+  test('every fetch call is either the global fetch (qualified) or a local handler name', () => {
+    const src = readFileSync(new URL('../http.ts', import.meta.url), 'utf8');
+    // A bare `fetch(` immediately preceded by a word-boundary and NOT preceded
+    // by a `.` (member access) or `function ` (declaration) would silently
+    // resolve to this file's own same-named fall-through handler instead of
+    // the global — exactly the bug this test guards against. `handleFallthrough`
+    // is the current, unambiguous name; this assertion also fails if the
+    // handler is ever renamed back to something call-site-ambiguous.
+    const bareFetchCalls = [...src.matchAll(/(?<![.\w])fetch\(/g)];
+    const lines = src.split('\n');
+    // Skip: comment lines (mentioning `fetch(` in prose is fine) and the one
+    // legitimate bare occurrence — the type-signature parameter name
+    // `fetch(req: Request): Promise<Response>;` in the `Api`-shaped interface,
+    // which is a declaration, not a call.
+    const offendingLines = bareFetchCalls
+      .map((m) => src.slice(0, m.index).split('\n').length)
+      .map((line) => ({ line, text: lines[line - 1] ?? '' }))
+      .filter(({ text }) => !/^\s*(\/\/|\*)/.test(text))
+      .filter(({ text }) => !/^\s*fetch\(req: Request\): Promise<Response>;/.test(text));
+
+    expect(offendingLines).toEqual([]);
+  });
+});

package/apps/studio/test/use-tool-mode.test.tsx

@@ -6,6 +6,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 
 import {
   DEFAULT_TOOLS,
+  filterToolsForReadOnly,
   ToolProvider,
   useToolMode,
   useToolModeOptional,
@@ -131,3 +132,25 @@ describe('use-tool-mode / SSR render', () => {
     );
   });
 });
+
+// Cloud Phase 25 C2 — read-only tool filtering. The provider applies this to
+// its `tools` when the canvas booted with ?ro=1; the pure function is what the
+// contract pins: navigate/inspect only, every write tool absent.
+describe('use-tool-mode / read-only filter', () => {
+  test('read-only keeps exactly browse + move + hand, in order', () => {
+    expect(filterToolsForReadOnly(DEFAULT_TOOLS, true).map((t) => t.id)).toEqual([
+      'browse',
+      'move',
+      'hand',
+    ]);
+  });
+
+  test('comment is filtered too — the cell refuses viewer comments until C3', () => {
+    const ids = filterToolsForReadOnly(DEFAULT_TOOLS, true).map((t) => t.id);
+    expect(ids).not.toContain('comment');
+  });
+
+  test('readOnly=false is identity', () => {
+    expect(filterToolsForReadOnly(DEFAULT_TOOLS, false)).toEqual([...DEFAULT_TOOLS]);
+  });
+});

package/apps/studio/tool-palette.tsx

@@ -22,6 +22,7 @@ import {
   SHAPE_KIND_ICONS,
   TOOL_ICONS,
 } from './canvas-icons.tsx';
+import { isReadOnlyCanvas } from './read-only-mode.ts';
 import { useChromeVisibility } from './use-chrome-visibility.tsx';
 import { type ShapeKind, useToolMode } from './use-tool-mode.tsx';
 
@@ -395,6 +396,11 @@ export function ToolPalette() {
   const byId = new Map(tools.map((t) => [t.id, t]));
   const navList = NAV_TOOLS.map((id) => byId.get(id)).filter(Boolean);
   const drawList = DRAW_TOOLS.map((id) => byId.get(id)).filter(Boolean);
+  // Cloud Phase 25 C2 — read-only canvas: the draw group is already empty
+  // (ToolProvider filters `tools`), and the hardcoded write affordances
+  // (Insert +, Stickers) must be ABSENT too. Export + Presentation stay —
+  // both are reads of the project.
+  const readOnly = isReadOnlyCanvas();
 
   const renderToolButton = (id: string, label: string, shortcut: string) => {
     const Icon = TOOL_ICONS[id];
@@ -483,66 +489,74 @@ export function ToolPalette() {
       <div className="dc-tp-group">
         {navList.map((t) => (t ? renderToolButton(t.id, t.label, t.shortcut) : null))}
       </div>
+      {drawList.length > 0 ? (
+        <>
+          <div className="dc-tp-sep" />
+          <div className="dc-tp-group">
+            {drawList.map((t) =>
+              t
+                ? t.id === 'shape'
+                  ? renderShapeButton()
+                  : renderToolButton(t.id, t.label, t.shortcut)
+                : null
+            )}
+          </div>
+        </>
+      ) : null}
       <div className="dc-tp-sep" />
       <div className="dc-tp-group">
-        {drawList.map((t) =>
-          t
-            ? t.id === 'shape'
-              ? renderShapeButton()
-              : renderToolButton(t.id, t.label, t.shortcut)
-            : null
+        {!readOnly && (
+          <span className="dc-tp-insert">
+            <button
+              type="button"
+              aria-label="Insert element — Div, Text, or Image"
+              aria-haspopup="menu"
+              aria-expanded={insertOpen}
+              title="Insert element (appends to the active artboard)"
+              onClick={() => setInsertOpen((o) => !o)}
+            >
+              <span aria-hidden="true" style={{ fontSize: 16, lineHeight: 1 }}>
+                +
+              </span>
+            </button>
+            {insertOpen ? (
+              <div className="dc-tp-insert-popover" role="menu" aria-label="Insert element">
+                <button type="button" role="menuitem" onClick={() => insertViaPalette('div')}>
+                  <IconSquare />
+                  <span className="dc-tp-insert-label">Div</span>
+                </button>
+                <button type="button" role="menuitem" onClick={() => insertViaPalette('text')}>
+                  <IconLetterA />
+                  <span className="dc-tp-insert-label">Text</span>
+                </button>
+                <button type="button" role="menuitem" onClick={() => insertViaPalette('image')}>
+                  <span aria-hidden="true" style={{ fontSize: 13, lineHeight: 1 }}>
+                    ▧
+                  </span>
+                  <span className="dc-tp-insert-label">Image</span>
+                </button>
+              </div>
+            ) : null}
+          </span>
         )}
-      </div>
-      <div className="dc-tp-sep" />
-      <div className="dc-tp-group">
-        <span className="dc-tp-insert">
+        {!readOnly && (
           <button
             type="button"
-            aria-label="Insert element — Div, Text, or Image"
-            aria-haspopup="menu"
-            aria-expanded={insertOpen}
-            title="Insert element (appends to the active artboard)"
-            onClick={() => setInsertOpen((o) => !o)}
+            aria-label="Stickers"
+            title="Stickers — searchable sticker picker"
+            onClick={() => {
+              try {
+                window.parent.postMessage({ dgn: 'open-sticker-picker' }, '*');
+              } catch {
+                /* detached / cross-origin teardown */
+              }
+            }}
           >
             <span aria-hidden="true" style={{ fontSize: 16, lineHeight: 1 }}>
-              +
+              🙂
             </span>
           </button>
-          {insertOpen ? (
-            <div className="dc-tp-insert-popover" role="menu" aria-label="Insert element">
-              <button type="button" role="menuitem" onClick={() => insertViaPalette('div')}>
-                <IconSquare />
-                <span className="dc-tp-insert-label">Div</span>
-              </button>
-              <button type="button" role="menuitem" onClick={() => insertViaPalette('text')}>
-                <IconLetterA />
-                <span className="dc-tp-insert-label">Text</span>
-              </button>
-              <button type="button" role="menuitem" onClick={() => insertViaPalette('image')}>
-                <span aria-hidden="true" style={{ fontSize: 13, lineHeight: 1 }}>
-                  ▧
-                </span>
-                <span className="dc-tp-insert-label">Image</span>
-              </button>
-            </div>
-          ) : null}
-        </span>
-        <button
-          type="button"
-          aria-label="Stickers"
-          title="Stickers — searchable sticker picker"
-          onClick={() => {
-            try {
-              window.parent.postMessage({ dgn: 'open-sticker-picker' }, '*');
-            } catch {
-              /* detached / cross-origin teardown */
-            }
-          }}
-        >
-          <span aria-hidden="true" style={{ fontSize: 16, lineHeight: 1 }}>
-            🙂
-          </span>
-        </button>
+        )}
         <button
           type="button"
           aria-label="Export (⌘E)"