Give the split workspace's loading states the two-bar sheet, with no ground header

[MaggieAppleton]

Follow-up from #507. The split workspace has no ground header any more, but its loading and empty states still drew the old layout, so first paint jumped when the real workspace arrived.

What changes

• Desktop document skeleton. While the workspace code loads, desktop showed only "Opening document…" on the ground. It now paints the workspace's shape: the sheet with its 40px title bar and 40px views bar, the Chat column at its saved width and open/closed choice, and the document lines. It is static markup plus semantic classes in phone-skeleton.css, so it fits the initial bundle:
  • a container query picks split or compact at the 700px frame that workspaceSizing uses;
  • Chat's width is clamped in CSS, min(max(250px, 100% - 450px), max(250px, saved));
  • compact draws the ground header and tab row in CSS.
• Document lines until arrival on every device. The mounted workspace used to show an empty "Start writing, or ask Chopin to plan" editor on desktop until the document synced. It now keeps the same lines on desktop too.
• Before /api/session the ground stays blank and only a status is announced, because the sidebar has not yet taken its width.
• Child routes keep the plain label, because a child opens as a card over its parent.
• Notices and the empty workspace ("No document open", "isn't one of your projects", "Page not found", failures) no longer reserve a header row in split.
  • Split: the sheet starts at the 12px top margin, clears the floating Show sidebar trigger, and uses the document sheet's panel radius and raised shadow.
  • Compact and phone: the header row stays and the gutters are an equal 8px.
  • The empty workspace now renders a notice.

1440: skeleton · document loading · loaded

390: before code · after code · after document · loaded · phone notice before · after

Notice at 1440: before · after

flowchart LR
  S["Before /api/session<br/>blank ground + status"] --> A["In the shell: route Suspense<br/>WorkspaceSkeleton (CSS only)"]
  A -->|chunk loads| B["RoomWorkspace mounted<br/>lines in the editor preface"]
  B -->|document syncs| C[Loaded document]

Loading

Bundle

The budget is not raised. The workspace layout hook and sizing helpers stay in the workspace chunk, as on main.

Docker --target build	raw	gzip
main de50c9d	254,700	81,365
this PR	255,667	81,472
budget	256,000	81,500

The PR adds 967 B raw and 107 B gzip. In Docker that leaves 333 B raw and 28 B gzip of headroom.

The skeleton reads the saved Chat choice and width from localStorage in the component, not from a boot script in index.html. A boot-time value would go stale after Chat is resized in-session, and later document opens also show this skeleton.

Verification

e2e/workspace-skeleton.e2e.ts holds the session, then the workspace chunk, then the WebSocket.

• It asserts the ground stays blank before the session.
• For split, split with Chat closed, split with the sidebar collapsed (Chat open at a saved 640px, and Chat closed), and compact at 390, it checks that the sheet, title bar, views bar, Chat column, compact header, tab row and frame keep the same rects within 1px across skeleton, mounted and loaded.
• It checks that the document lines don't move, and that a split notice's sheet has the same top and bottom as a loaded sheet.

I ran these specs locally against a fake-GitHub server: 6 passed. I also scanned the split/compact threshold: skeleton and workspace switch together between 723 and 724px. bun run types and bun run ci pass.

🤖 Generated with Claude Code

[MaggieAppleton]

Review: Changes needed

The visual work holds up. Measured with throttled frame strips (4 Mbps, 150 ms latency) and with the session, chunk and socket held one at a time. From the in-shell skeleton, through the mounted workspace, to the loaded document, nothing moves at 1440 with Chat open (0 px differ), 1440 with Chat closed, 1100, compact 680, 390 desktop-width or the 390 phone. Only content fills in. The pulse is calm (1.5 s alternate to --opacity-quiet, and reduced motion is covered). Notices and "No document open" at 1440 now rise to the 12px top margin and sit level with the loaded sheet. The moves don't change behaviour: sidebarMoving moved verbatim (now module-private, with no other callers), and the storage keys and storedDesktopChat are the same.

The blockers are the budget and CI.

1. The container CI job fails on the bundle budget (run 38365759784): initial JavaScript 257889 B raw / 82288 B gzip exceeds budget 258000 B raw / 81500 B gzip. Linux gzip comes out about 900 B larger than macOS. On main, the Docker build measures 254700 / 81365, which is only 135 B under the gzip limit. So the "gzip is still under its limit" claim holds locally but not in the container.
2. Budget raise (apps/web/bundle-budget.ts:20-23). Raising the budget is Maggie's decision. Measured delta against the merge base: +3,189 B raw / +916 B gzip (local 254,704 → 257,893; Docker 254,700/81,365 → 257,889/82,288). After the raise, only 107 B of raw headroom is left, so the next PR will need another raise. What goes into the initial chunk: WorkspaceSkeleton is about 1.9 KB minified, of which about 940 B is Tailwind class strings. useWorkspaceLayout plus sidebarMoving is about 0.9 KB. workspaceSizing, CHAT_PANE and the storage helpers are about 0.4 KB. WorkspaceNotice now pulls the hook in as well.
   • Lazy-loading can't fix this: the skeleton exists to paint before the chunks arrive.
   • It can be made lighter. Moving the layout utilities into 2–3 semantic classes in phone-skeleton.css saves about 0.6–0.7 KB. Choosing split or compact with a container query on the frame (@container (width < 700px)), and computing Chat width in CSS with min(max(250px, var(--stored)), 100% - 450px), takes useWorkspaceLayout/workspaceSizing out of the initial chunk for about 1.3 KB. The notice can use the same CSS for its header row. A tiny inline script in index.html would set the stored Chat choice and width as root attributes or variables. Dropping the compact header/tabs branch, or drawing it with CSS only, saves another ~0.4 KB. Together that is about 2.3 KB raw, which fits the unchanged raw budget (main has 1.3 KB of raw headroom).
   • Gzip is the hard part. There is only 135 B of gzip headroom in Docker, so even the slimmed version (est. +250–350 B gzip) still needs a small gzip raise. The other route is drawing the skeleton as static HTML and CSS in index.html, outside the JS budget. That covers only the boot stage, not the in-shell Suspense fallbacks.
3. Pre-session skeleton jump (app.tsx:62 → HostedLoading document). Before /api/session resolves, WorkspaceSkeleton renders outside NavigationShell. It measures the full window, then the sidebar arrives and the sheet jumps. At 1440 the sheet goes from x=445 w=795 to x=472 w=576. Before this PR that stage was a centred "Loading" label, so it didn't read as a jump. Either keep a blank ground for the pre-session stage, or reserve the sidebar track there. The e2e doesn't hold /api/session, so it misses this.
4. Cold-loaded child URL (workspace-skeleton.tsx:28). The skeleton always uses the stored Chat width. A child workspace has persistPaneSize: false (workspace-model.ts:86), so it opens at the 500 px default. The child is also a nested card, not the root sheet. The /documents/.../child Suspense fallback will therefore jump whenever the stored width isn't 500. In-app child opens are unchanged: they still use the plain "Opening child document…" label (document-workspace-host.tsx:479,504). I could not exercise a real child locally because no research child was seeded.
5. Minor: phone notice gutter (workspace-notice.tsx). workspace-sizing.css is now in the initial CSS, so .workspace-root .workspace-frame overrides m-2 side margins. On a 390 phone the notice and empty-workspace sheet sides go from 8px to 12px, while top and bottom stay 8px. That matches the compact workspace but leaves uneven gutters. Either drop m-2 in favour of my-2, or accept 12 and make the top and bottom match.
6. Minor: the Chat column pops in. In split, the skeleton's Chat column is empty ground, and the empty state plus the composer appear all at once on mount. A quiet composer outline at the bottom of the column would soften this, but it's optional and adds bytes, so weigh it against item 2.
7. Minor: the notice sheet keeps rounded-xl/shadow-resting, while EmptyWorkspace and the loaded sheet use rounded-panel/shadow-raised. This was already the case before the PR, but it's worth aligning while you're in these lines.

CI: format/lint/types/tests pass, e2e pass, chopin CLI (both) pass, container fail (budget).