githubnext/chopinPublic

Let's compose rich plans together

Adapt tablet navigation to the measured workspace #288

MergedMaggieAppletonmerged 1 commit intomainfromrefs/pull/288/head
  1. MA

    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.

    <details><summary>Original proposal and historical viewport-layout screenshots</summary>

    ## 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 (#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: ![768](https://github.com/user-attachments/assets/2d9284c1-1ed9-41c3-ac53-7a155a0786da)

    900×1000: ![900](https://github.com/user-attachments/assets/70978678-7e11-4faa-ba35-6135533d64ba)

    1024×768: ![1024](https://github.com/user-attachments/assets/76463237-6e47-4a9b-81fd-07d545b6e719)

    1180×820: ![1180](https://github.com/user-attachments/assets/3fe93326-3867-4cb1-8f09-883552a9a71a)

    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](https://claude.com/claude-code)

    </details>

  2. MA
    Author

    **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.

  3. MA
    Author

    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).

  4. lavaman131referenced f94c8bf10cbclast month on GitHub

  5. lavaman131referenced 7f6cfcdc3abelast month on GitHub

  6. MA
    Author

    <!-- pr-rebase:ea9d94fe1b1cdb7d93ea4c465960c7a468dfca8a:964535bb81cb00d3583301d3ec90d55393c278ca --> 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.

  7. MA
    Author

    CI babysitter checked the recorded head and found no code defect to fix. The current failed `ci` run still only has `format, lint, types, tests` red, while `container` and `e2e` passed. The PR diff and existing notes point to the same blocker: `bun run ci` is failing on the reviewed design-contract hash for `apps/web/src/workspace.tsx`, which needs a human design-contract review rather than a speculative code change.

    No commit was queued. Next action: update the reviewed hash exception if this change is approved, or adjust the workspace change if review rejects it.

    > Generated by [PR CI fixer](https://github.com/githubnext/chopin/actions/runs/37618962845) · gpt54 · 48.8 AIC · ⌖ 5.99 AIC · ⊞ 16.4K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-call-id%3A+githubnext%2Fchopin%2Fpr-ci-fix%22&type=issues)

    <!-- gh-aw-agentic-workflow: PR CI fixer, engine: codex, model: gpt-5.4, id: 37618962845, workflow_id: pr-ci-fix, run: https://github.com/githubnext/chopin/actions/runs/37618962845 --> <!-- gh-aw-workflow-call-id: githubnext/chopin/pr-ci-fix -->

  8. MA
    Author

    <!-- pr-rebase:ea9d94fe1b1cdb7d93ea4c465960c7a468dfca8a:8675f8e57182b28d0b2dc34c8089d0d928d00191 --> 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.

  9. MA
    Author

    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](https://github.com/githubnext/chopin/actions/runs/37619052529) · gpt54 · 78.2 AIC · ⌖ 3.82 AIC · ⊞ 15.1K · [◷](https://github.com/search?q=repo%3Agithubnext%2Fchopin+%22gh-aw-workflow-call-id%3A+githubnext%2Fchopin%2Fpr-ci-fix%22&type=issues)

    <!-- gh-aw-agentic-workflow: PR CI fixer, engine: codex, model: gpt-5.4, id: 37619052529, workflow_id: pr-ci-fix, run: https://github.com/githubnext/chopin/actions/runs/37619052529 --> <!-- gh-aw-workflow-call-id: githubnext/chopin/pr-ci-fix -->

  10. MA
    Author

    <!-- pr-rebase:ea9d94fe1b1cdb7d93ea4c465960c7a468dfca8a:e6b7bb333ce8948d0dac0c8aff61cf3d4fb8dc8b --> 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.

  11. MA
    Author

    <!-- pr-rebase:ea9d94fe1b1cdb7d93ea4c465960c7a468dfca8a:b919317f14f29799be257eee49ba5ab753592371 --> 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.

  12. MA
    Author

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

  13. Copilotbotmentionedlast month on GitHub

  14. Copilotbotsubscribedlast month on GitHub

  15. MaggieAppletoncopilot-work-startedlast month on GitHub

  16. > @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`.

  17. Copilotbotmentionedlast month on GitHub

  18. Copilotbotsubscribedlast month on GitHub

  19. MaggieAppletoncopilot-work-finishedlast month on GitHub

  20. MaggieAppletonhead-ref-force-pushed f1b6a847a6celast month on GitHub

  21. MaggieAppletonhead-ref-force-pushed 052487359c29last month on GitHub

  22. MaggieAppletonhead-ref-force-pushed 63b0bbb5c1a5last month on GitHub

  23. MaggieAppletonreferenced this in Animate pane space and phone view switches #340last month on GitHub

  24. MaggieAppletonrenamed Use the compact workspace on tablet portrait and collapse Chat when space is tight to Adapt tablet navigation to the measured workspacelast month on GitHub

  25. MaggieAppletonhead-ref-force-pushed 3e0b7525b964last month on GitHub

  26. MaggieAppletonhead-ref-force-pushed f4a18b74fe49last month on GitHub

  27. MaggieAppletonmerged 03a7fa000781last month on GitHub

  28. MaggieAppletonclosedlast month on GitHub

  29. MaggieAppletonhead-ref-deletedlast month on GitHub