Adapt tablet navigation to the measured workspace

[MaggieAppleton]

Projects uses a drawer below 1198px. The workspace retains main’s measured 700px frame boundary, 450px document floor, and flexible Chat resizing.

Chat opens by default until a person makes an explicit choice. The new storage key ignores legacy values, which could not distinguish automatic closures from manual choices. Older manual closes must be chosen again to save a fresh preference. Child documents inherit the parent’s preference without saving their own; resizing recovers focus from hidden controls. Integration retains current connection status, Count motion, and shared dismissal.

CI corrections preserve the safe-area header assertion at the new navigation breakpoint and keep the touch-row test’s original persistent-rail setup above 1198px, suppressing delegated navigation as intended. A long description card exposed fractional rounding in offsetHeight; measuring the real browser bounds preserves its strict 8px viewport margin.

Local checks/types, 534 web tests before the final tooltip adjustment, 47 focused tests, and both failing browser regressions pass. All 59 navigation/workspace/activity and 11 child-document browser cases pass. The added child-chrome fixture uses the new explicit-choice key; the old-key rejection fixture stays unchanged. Published head f4a18b74 awaits all three required GitHub checks. A temporary local config excludes another session’s occupied fake-MCP port; normal required CI retains the full harness.

Original proposal and historical viewport-layout screenshots

Why

At 768×1024 the workspace used the split layout with Chat taking about half the width, leaving a ~380px document, narrower than on a phone. The compact layout only began below 500px, and the inline Projects sidebar appeared at 1024px even when that left the document at ~386px. Chat is central, so Chat should not be what yields.

What changed

• Compact breakpoint (derived): below 560 (document measure) + 304 (minimum Chat) + 24 (frame gutter) = 888px the workspace shows one destination at a time with the bottom tab bar.
• Chat narrows before it hides: from 888 to 947px Chat stays open and shrinks from 364px toward its 304px minimum so the document keeps 560px (min(chatWidth, max(304px, 100vw - 584px))).
• Inline Projects sidebar only when everything fits: NAVIGATION_INLINE_MIN is derived as full-width Chat + document measure + gutter + sidebar minimum = 1198px. Below that the existing drawer is used. The two matching media queries in navigation.css moved from 1024/1023 to 1198/1197.
• Chat is open by default; only an explicit toggle is stored. The preference moved to a new key (chopin:pane:chat:choice), because the old key held an auto-written true for everyone.
• Focus on layout change: if a resize hides the focused control, focus moves to the document (or Chat when only Chat is visible) instead of falling to body.
• The shared widths live in a tiny workspace-measure.ts so navigation does not pull the workspace model into the initial bundle (the build enforces a JavaScript budget).
• No change to the Chat pane header controls (Put Chat sidebar controls at the pane edges #269).

Viewport	Layout	Chat	Document	Projects
< 888 (e.g. 768)	compact, tab bar	one destination at a time	752 at 768	drawer
888 to 947 (e.g. 900)	split	open, narrowed to 304 to 363 (316 at 900)	560	drawer
948 to 1197 (1024, 1180)	split	open, 364	636 at 1024, 792 at 1180	drawer
>= 1198 (1280, 1440)	split	open, 364	642 at 1280, 802 at 1440	inline sidebar

Screenshots

Before (left, main) / after (right).

768×1024:

900×1000:

1024×768:

1180×820:

At 1280 and 1440 the layout is unchanged from main.

Testing

• bun test apps/web/src passes (467); bun run types passes; bun run build is under the JavaScript budget.
• Unit tests cover the compact breakpoint, the derived inline-sidebar boundary, default-open Chat, and the explicit stored choice.
• e2e specs updated: boundary test (888/887), drawer boundary (1197), 900 split with narrowed Chat, new focus-on-resize case, 768 and 844 compact cases, and the renamed storage key. Local e2e is suspended, so CI runs them.
• Checked in a browser: focus in Chat at 960 then resize to 800 lands on the Document heading.

Notes for review

• Users with a window between 888 and 947px get a Chat narrower than its default; the resize handle still stores the preferred width.
• If the Projects sidebar is dragged wider than its minimum, the document can still drop below 560px at the narrowest inline widths.

Needs a design-contract review

bun run ci fails only on apps/web/src/workspace.tsx (dynamic-owner exceptions in scripts/design-contract/exceptions/dynamic-web.json): line numbers shifted because CHAT_PANE moved out and hook code changed. No class names changed; the Chat pane's inline width style now uses a min() expression. New file sha256: d8b33bd03b8a9793fc520f69f5785ce4f171444bb97b18997a5246f95f15d49e.

🤖 Generated with Claude Code

[MaggieAppleton]

Review: Looks good (with follow-ups)

Checked in headless Chromium against this branch (fake GitHub, 375 to 1440).

Measured (fresh profile, split mode)

• Compact below 888, split from 888. Page never scrolls horizontally.
• Chat collapsed by default: 888-947 and 1024-1197. Document pane 864-923 / 750-923. Chat opens from 948-1023 and 1198+ with the document at 560 exactly (948, 1198) and wider above.
• Collapsed Chat is reachable via the "Show chat pane" icon button left of the Document/Decisions tabs (tooltip "Show Chat", unread/busy status goes in the aria-label).
• Draft survives 1440 -> 1180 -> 1440 -> 900 -> 700 (compact) -> 1440; textarea value intact because the pane stays mounted. Explicit "Show chat" persists true and survives later resizes.
• Stored false stays collapsed at 1280/1440; stored true stays open at every split width.
• CI: e2e and container pass; the only failure in "format, lint, types, tests" is the design-contract review hash for workspace.tsx (line shifts), acceptable.

Findings

1. Existing users never get the new default. The old effect wrote chopin:pane:chat:open = "true" on first load for everyone, so any returning browser has an "explicit" true. Verified: with true stored the document is 386px at 1024 and 542px at 1180, i.e. no change. Consider migrating (e.g. ignore stored true once, or store a different key/version) if the narrow-width default is meant to reach current users.
2. An explicit Show chat in a collapsed range breaks the 560 floor (1100 wide: document 462px). Acceptable as a user choice, but the pane could open at CHAT_PANE.min (304) when invoked from the collapsed range to claw back ~60px. Also the choice then sticks to the 1024-1197 range on later loads.
3. Resizing across a collapse boundary while typing in Chat drops focus to body (the draft stays). Minor; consider no change.
4. Collapsed Chat is icon-only (no label, no unread dot on the page, only on the control). For a chat-centred product this is a weak affordance at the exact widths where it's hidden by default.

Recommendation on collapsing Chat at 1024-1197
Don't make Chat the thing that yields. Cause of the squeeze is the inline Projects sidebar (250px) appearing at 1024 while the drawer threshold (948-1023) already works fine without it. A narrower Chat can't fix it: at 1024 with the sidebar inline, even Chat at 304 leaves the document at 446. Better: raise NAVIGATION_INLINE_MIN to CHAT_NEEDED + SIDEBAR_MIN (1198), so 948-1197 uses the drawer sidebar and keeps Chat open with the document at 636-884. The collapsed range then shrinks to 888-947 only (and there a 304-wide Chat gives 560 at 888, so Chat could stay open for that sliver too if CHAT_PANE.min is used as the default width below 948). Keep the tri-state for explicit choice.

[MaggieAppleton]

Adopted the review recommendation. Chat stays open; the inline Projects sidebar now appears only at 1198px and up (derived as full Chat + document measure + gutter + sidebar minimum), below that the drawer is used. From 888 to 947px Chat narrows toward its 304px minimum so the document keeps 560px. Chat is stored only after an explicit toggle, under a new key. Focus moves to the document when a resize hides the focused control. The PR body has the width-to-layout table and new screenshots.

CI: e2e and container pass. "format, lint, types, tests" fails only on the design-contract hashes for apps/web/src/workspace.tsx (needs a design-contract review; new sha256 is in the body).

[MaggieAppleton]

PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

[MaggieAppleton]

PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

[MaggieAppleton]

CI babysitter rechecked the current failed ci run for ea9d94fe1b1cdb7d93ea4c465960c7a468dfca8a. The head still matches the recorded candidate, and the first meaningful failure is still the reviewed dynamic-owner check in Format, lint, and enforce design tokens: apps/web/src/workspace.tsx lines 149, 159, 177, 186, 337, 520, and 532 all report reviewed dynamic owner changed; inspect its data flow and renew the exact exception. e2e and container are green, so this still looks like a design-contract review decision rather than a source defect in the workspace behavior itself.

I did not queue a commit from this runner because bun and mise are not installed here, so I could not run the required local reproduction and verification commands (bun install --frozen-lockfile, bun run fix, bun run ci). Next action for a human: on a machine with Bun 1.4.2 available, rerun those commands on this head, review the workspace.tsx dynamic-owner data flow, and renew the exact exception only if that class ownership change is approved.

babysit-head:ea9d94fe1b1cdb7d93ea4c465960c7a468dfca8a

Generated by PR CI fixer · gpt54 · 78.2 AIC · ⌖ 3.82 AIC · ⊞ 15.1K · ◷

[MaggieAppleton]

PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

[MaggieAppleton]

PR babysitter could not rebase this branch cleanly onto main. The branch is unchanged. Please resolve the rebase conflict locally; automation will try again after the branch changes.

[MaggieAppleton]

@copilot < 888 is too large as the breakpoint. make it 728

[Copilot]

@copilot < 888 is too large as the breakpoint. make it 728

Lowered the compact breakpoint to 728px and updated the boundary/unit/E2E expectations. Commit: 84d96b7.