fix(web): make desktop editor fill canvas

Author: lightsofapollo

.beads/export-state.json

@@ -1 +1 @@
-{"last_dolt_commit":"f0a33golatv3m0uq2ec7uirkanleb8p6","timestamp":"2026-07-11T13:43:05.306808-06:00","issues":304,"memories":13}
+{"last_dolt_commit":"vo1fusalr1a6768d9vnh19pncshf6d5d","timestamp":"2026-07-11T13:57:06.239003-06:00","issues":305,"memories":13}

.beads/interactions.jsonl

@@ -363,3 +363,4 @@
 {"id":"int-79bef5f3","kind":"field_change","created_at":"2026-07-11T19:12:43.305859Z","actor":"James Lal","issue_id":"attn-7xl.7.7","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Desktop hosted authoring now consumes the shared native workspace frame, Sidebar, PathBreadcrumb, Editor, ReviewBar, and review rail; mobile remains rendered reader-first with dock/sheets. Native/hosted builds, 77 unit files, 57 routed E2E tests, 22 Chromium/WebKit reader tests, route bundle gates, axe, offline, and visual captures pass. Follow-up icon-registry chunk optimization tracked in attn-7xl.7.8."}}
 {"id":"int-5975de26","kind":"field_change","created_at":"2026-07-11T19:31:46.157162Z","actor":"James Lal","issue_id":"attn-7xl.7.9","extra":{"field":"status","new_value":"in_progress","old_value":"open"}}
 {"id":"int-04a9ff04","kind":"field_change","created_at":"2026-07-11T19:42:57.164512Z","actor":"James Lal","issue_id":"attn-7xl.7.9","extra":{"field":"status","new_value":"closed","old_value":"in_progress","reason":"Fixed false competing-tab leases with a reload-stable per-tab identity plus BroadcastChannel duplicate detection; mobile readers now defer authority until Edit. Added rename/reload/navigation/duplicated-tab/mobile regressions. Svelte check, browser build, 77 unit files, 59 routed E2E, and 30 Chromium/WebKit storage-reader tests pass."}}
+{"id":"int-88217ca4","kind":"field_change","created_at":"2026-07-11T19:56:58.067545Z","actor":"James Lal","issue_id":"attn-7xl.7.11","extra":{"field":"status","new_value":"closed","old_value":"open","reason":"Desktop ProseMirror now flex-fills the document viewport and accepts clicks in blank canvas space. Normal desktop Edit/Done chrome was removed; only genuine lease denial exposes Retry in its banner. Mobile remains reader-first and desktop editing restores after responsive transitions. Svelte check, browser build, 77 unit files, 61 routed E2E, and 30 Chromium/WebKit storage-reader tests pass."}}

.beads/issues.jsonl

@@ -58,6 +58,49 @@ test('landing hash intent creates without any dialog', async ({ page }) => {
   );
 });
 
+test('desktop editor fills the canvas and has no edit mode toggle', async ({ page }) => {
+  await page.goto('/app#new');
+  const editor = documentEditor(page);
+  await expect(editor).toHaveAttribute('contenteditable', 'true');
+  await expect(page.locator('[data-action="edit"]')).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Done', exact: true })).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Edit', exact: true })).toHaveCount(0);
+
+  const geometry = await page.evaluate(() => {
+    const viewport = document.querySelector<HTMLElement>('.hosted-content-viewport');
+    const editable = document.querySelector<HTMLElement>('.hosted-native-document .ProseMirror');
+    if (!viewport || !editable) throw new Error('desktop editor geometry is unavailable');
+    const viewportRect = viewport.getBoundingClientRect();
+    const editorRect = editable.getBoundingClientRect();
+    return {
+      viewportHeight: viewportRect.height,
+      editorHeight: editorRect.height,
+      bottomGap: viewportRect.bottom - editorRect.bottom,
+      clickX: editorRect.left + editorRect.width / 2,
+      clickY: editorRect.bottom - 48,
+    };
+  });
+  expect(geometry.editorHeight).toBeGreaterThan(geometry.viewportHeight * 0.9);
+  expect(Math.abs(geometry.bottomGap)).toBeLessThanOrEqual(1);
+
+  await page.mouse.click(geometry.clickX, geometry.clickY);
+  await page.keyboard.type('Typed from the blank canvas.');
+  await expect(editor).toContainText('Typed from the blank canvas.');
+});
+
+test('returning from mobile reader mode restores desktop editing', async ({ page }) => {
+  await page.goto('/app#new');
+  await expect(documentEditor(page)).toHaveAttribute('contenteditable', 'true');
+
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.locator('.thumb-dock').getByRole('button', { name: 'Done' }).click();
+  await expect(documentEditor(page)).toHaveAttribute('contenteditable', 'false');
+
+  await page.setViewportSize({ width: 1280, height: 800 });
+  await expect(documentEditor(page)).toHaveAttribute('contenteditable', 'true');
+  await expect(page.getByRole('button', { name: 'Done', exact: true })).toHaveCount(0);
+});
+
 test('import creates a real multi-file workspace preserving paths', async ({ page }) => {
   await page.goto('/app');
   const chooser = page.waitForEvent('filechooser');
@@ -287,8 +330,6 @@ test('phase gate: create → type → reload → edit → export → reimport wi
   await expect(page.locator('.save-state[data-commits]')).not.toHaveAttribute('data-commits', '0', {
     timeout: 15_000,
   });
-  await page.getByRole('button', { name: 'Done' }).click();
-
   // Reload: the committed head recovers.
   await page.reload();
   await expect(page.locator('[data-body-text]')).toContainText('Journey body survives everything.');

web/e2e/hosted-authoring.spec.ts

@@ -44,6 +44,8 @@ test('desktop editor reuses the native sidebar, editor, and review rail frame',
   await expect(page.getByRole('button', { name: 'desk.png' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'notes.json' })).toBeVisible();
   await expect(page.locator('.hosted-native-document .ProseMirror')).toBeVisible();
+  await expect(page.locator('[data-action="edit"]')).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Done', exact: true })).toHaveCount(0);
   await expect(page.locator('[data-slot="right-rail"]')).toHaveCount(1);
   await expect(page.locator('.file-rail, .review-rail')).toHaveCount(0);
   await expectNoHorizontalScroll(page);

web/e2e/hosted-shells.spec.ts

@@ -47,7 +47,7 @@
   let desktopLayout = $state(
     typeof window !== 'undefined' && window.matchMedia('(min-width: 901px)').matches,
   );
-  let desktopEditRequested = false;
+  let desktopEditRequested = $state(false);
   let HostedDesktopWorkspaceFrame = $state<typeof HostedDesktopWorkspaceFrameType | null>(null);
 
   $effect(() => {
@@ -543,9 +543,12 @@
   // posture as native attn. Mobile intentionally remains reader-first and
   // enters editing only from its thumb dock.
   $effect(() => {
+    if (!desktopLayout) {
+      desktopEditRequested = false;
+      return;
+    }
     if (
-      !desktopLayout
-      || desktopEditRequested
+      desktopEditRequested
       || editing
       || editorLoading
       || !canEdit
@@ -712,7 +715,11 @@
 </script>
 
 {#snippet documentSurface()}
-  <div class:hosted-native-document={desktopLayout} class:writing-sheet={!desktopLayout}>
+  <div
+    class:hosted-native-document={desktopLayout}
+    class:hosted-native-editor-document={desktopLayout && activeEntry?.presentation === 'editable'}
+    class:writing-sheet={!desktopLayout}
+  >
     {#if health.mode !== 'persistent' && health.mode !== 'best-effort'}
       <div class="hosted-document-banner">
         <DegradedBanner mode={health.mode} />
@@ -724,6 +731,14 @@
           <strong>Another tab is editing this workspace.</strong>
           <p>This tab stays read-only until the other tab finishes or closes.</p>
         </div>
+        {#if desktopLayout}
+          <button
+            class="hosted-header-button"
+            type="button"
+            disabled={editorLoading}
+            onclick={() => void enterEdit()}
+          >Retry edit</button>
+        {/if}
       </div>
     {/if}
     {#if ownerState?.roomId && !ownerState.liveEditingAvailable}
@@ -837,17 +852,6 @@
     <span class="save-state hosted-save-state" data-save-state={saveState} data-commits={commitCount}>
       {ownerRoomStatus ?? saveState}
     </span>
-    {#if canEdit}
-      <button
-        class="hosted-header-button"
-        type="button"
-        data-action="edit"
-        disabled={editorLoading}
-        onclick={() => editing ? void exitEdit() : void enterEdit()}
-      >
-        {editing ? 'Done' : editorLoading ? 'Opening…' : editDenied ? 'Retry edit' : 'Edit'}
-      </button>
-    {/if}
   </div>
 {/snippet}
 

web/src/hosted/app/EditorShell.svelte

@@ -525,8 +525,27 @@ a.workspace-row:hover {
   min-height: 100%;
 }
 
-.hosted-native-document > .hosted-editor-surface {
-  display: contents;
+.hosted-native-editor-document {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  padding-bottom: 0;
+}
+
+.hosted-native-editor-document > .hosted-editor-surface,
+.hosted-native-editor-document .editor-container,
+.hosted-native-editor-document .prosemirror-mount {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.hosted-native-editor-document .ProseMirror {
+  width: 100%;
+  min-height: 100%;
+  flex: 1;
+  padding-bottom: 4rem;
 }
 
 .hosted-document-banner {