From 404caa225a88611d23e1acf9b66c0354445395cf Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Fri, 21 Aug 2026 01:27:59 -0500
Subject: [PATCH] fix: hide agent editable from web app

---
 packages/core/tests/canonical.test.ts         |  3 +-
 .../ui/src/lib/editor/canvas/Canvas.svelte    |  1 +
 .../lib/editor/components/Toolbar.stories.ts  |  4 +-
 .../src/lib/editor/components/Toolbar.svelte  | 21 ++++---
 .../editor/components/Toolbar.svelte.test.ts  | 58 +++++++++++++------
 5 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/packages/core/tests/canonical.test.ts b/packages/core/tests/canonical.test.ts
index ed589b5..dd69532 100644
--- a/packages/core/tests/canonical.test.ts
+++ b/packages/core/tests/canonical.test.ts
@@ -30,7 +30,8 @@ describe('toCanonicalDocumentSnapshot', () => {
 			kind: 'rect',
 			parent: { kind: 'layer', id: 'layer:page:one:default' },
 			transform: { translation: { x: 10, y: 20 }, rotation: 0 },
-			properties: { w: 40, h: 20, fill: 'red' }
+			properties: { w: 40, h: 20, fill: 'red' },
+			metadata: { agent_editable: true }
 		});
 	});
 
diff --git a/packages/ui/src/lib/editor/canvas/Canvas.svelte b/packages/ui/src/lib/editor/canvas/Canvas.svelte
index 9ff606e..b22c33f 100644
--- a/packages/ui/src/lib/editor/canvas/Canvas.svelte
+++ b/packages/ui/src/lib/editor/canvas/Canvas.svelte
@@ -221,6 +221,7 @@
 		currentTool={c.tools.currentToolId}
 		onToolChange={c.tools.handleChange}
 		onStencilsClick={handleStencilsClick}
+		showAgentControl={platformKind === 'desktop'}
 		store={c.store}
 		canvas={canvasEl ?? undefined}
 		brushStore={c.brushStore}
diff --git a/packages/ui/src/lib/editor/components/Toolbar.stories.ts b/packages/ui/src/lib/editor/components/Toolbar.stories.ts
index b87cd40..bd6dffe 100644
--- a/packages/ui/src/lib/editor/components/Toolbar.stories.ts
+++ b/packages/ui/src/lib/editor/components/Toolbar.stories.ts
@@ -22,4 +22,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Web: Story = {};
+export const Web: Story = { args: { showAgentControl: false } };
+
+export const Desktop: Story = { args: { showAgentControl: true } };
diff --git a/packages/ui/src/lib/editor/components/Toolbar.svelte b/packages/ui/src/lib/editor/components/Toolbar.svelte
index 8d1a248..6ce8ebb 100644
--- a/packages/ui/src/lib/editor/components/Toolbar.svelte
+++ b/packages/ui/src/lib/editor/components/Toolbar.svelte
@@ -40,6 +40,8 @@
 		canvas?: HTMLCanvasElement;
 		brushStore: BrushStore;
 		onStencilsClick?: () => void;
+		/** Whether to expose the desktop-only agent editability control. */
+		showAgentControl?: boolean;
 		onImportEditable?: () => void;
 		onImportSvg?: () => void;
 		onImportSvgMarkup?: () => void;
@@ -55,6 +57,7 @@
 		canvas,
 		brushStore,
 		onStencilsClick,
+		showAgentControl = false,
 		onImportEditable,
 		onImportSvg,
 		onImportSvgMarkup,
@@ -706,14 +709,16 @@
 			{#if hasArrowSelection}
 				<ArrowPopover {store} />
 			{/if}
-			<label class="toolbar__agent-control" title="Allow agents to edit the selection">
-				<input
-					type="checkbox"
-					checked={agentEditableValue}
-					onchange={handleAgentEditableChange}
-					aria-label="Agent editable" />
-				<span>Agents</span>
-			</label>
+			{#if showAgentControl}
+				<label class="toolbar__agent-control" title="Allow agents to edit the selection">
+					<input
+						type="checkbox"
+						checked={agentEditableValue}
+						onchange={handleAgentEditableChange}
+						aria-label="Agent editable" />
+					<span>Agents</span>
+				</label>
+			{/if}
 		</div>
 	{/if}
 
diff --git a/packages/ui/src/lib/editor/components/Toolbar.svelte.test.ts b/packages/ui/src/lib/editor/components/Toolbar.svelte.test.ts
index e60522d..520d6e8 100644
--- a/packages/ui/src/lib/editor/components/Toolbar.svelte.test.ts
+++ b/packages/ui/src/lib/editor/components/Toolbar.svelte.test.ts
@@ -5,6 +5,28 @@ import { render } from 'vitest-browser-svelte';
 import { createBrushStore } from '../status';
 import Toolbar from './Toolbar.svelte';
 
+function createSelectedRectStore() {
+	const page = PageRecord.create('Page', 'page');
+	const shape = ShapeRecord.createRect(
+		page.id,
+		0,
+		0,
+		{ w: 20, h: 20, fill: '#fff', stroke: '#000', radius: 0 },
+		'shape'
+	);
+	const store = new Store();
+	store.setState((state) => ({
+		...state,
+		doc: {
+			pages: { [page.id]: { ...page, shapeIds: [shape.id] } },
+			shapes: { [shape.id]: shape },
+			bindings: {}
+		},
+		ui: { ...state.ui, currentPageId: page.id, selectionIds: [shape.id] }
+	}));
+	return store;
+}
+
 describe('Editor Toolbar', () => {
 	it('selects tools through accessible controls', async () => {
 		const onToolChange = vi.fn();
@@ -207,30 +229,28 @@ describe('Editor Toolbar', () => {
 		expect(store.canUndo()).toBe(true);
 	});
 
+	it('hides the agent edit control when it is not enabled', async () => {
+		const screen = render(Toolbar, {
+			currentTool: 'select',
+			onToolChange: vi.fn(),
+			store: createSelectedRectStore(),
+			brushStore: createBrushStore(),
+			showAgentControl: false
+		});
+
+		await expect
+			.element(screen.getByRole('checkbox', { name: 'Agent editable' }))
+			.not.toBeInTheDocument();
+	});
+
 	it('changes whether agents may edit selected shapes', async () => {
-		const page = PageRecord.create('Page', 'page');
-		const shape = ShapeRecord.createRect(
-			page.id,
-			0,
-			0,
-			{ w: 20, h: 20, fill: '#fff', stroke: '#000', radius: 0 },
-			'shape'
-		);
-		const store = new Store();
-		store.setState((state) => ({
-			...state,
-			doc: {
-				pages: { [page.id]: { ...page, shapeIds: [shape.id] } },
-				shapes: { [shape.id]: shape },
-				bindings: {}
-			},
-			ui: { ...state.ui, currentPageId: page.id, selectionIds: [shape.id] }
-		}));
+		const store = createSelectedRectStore();
 		const screen = render(Toolbar, {
 			currentTool: 'select',
 			onToolChange: vi.fn(),
 			store,
-			brushStore: createBrushStore()
+			brushStore: createBrushStore(),
+			showAgentControl: true
 		});
 
 		const control = screen.getByRole('checkbox', { name: 'Agent editable' });
-- 
2.51.2