` is a track that animates `width` (`--panel-open-dur`/`--panel-close-dur`, `--motion-move`), and its contents keep `--chat-width`. The track animates only while it opens or closes (`data-pane-moving` from a small `usePaneMotion` hook), so dragging Chat's resize handle and window resizes still apply immediately. The split pane no longer fades: it slides out under the clip, so there's no washed-out hole.\n- **Phone views**: `main` now stays mounted until its content-swap exit finishes, so Chat fades in over the outgoing view instead of over a blank frame. The direction of travel comes from tab order (`data-workspace-travel=\"back\"` sets `--swap-direction: -1`). Chat enters from the left, Decisions from the right, and the outgoing view leaves the opposite way. Compact Chat uses the `--page-slide-*` tokens.\n- Reduced motion: unchanged and instant. Presence settles immediately, so `data-pane-moving` is never set, and the reduced-motion blocks also cover the new selectors.\n- **Prose re-wraps once**: while a pane track animates, the document column is held at its narrower width (the final width when a pane opens, the current one when it closes) and only re-centres. The workspace also waits for the sidebar track to settle before it re-measures its layout, so React doesn't re-render on every frame. Measured on a ~7,000-word document with 6x CPU throttling, per-frame p95 drops from ~27–32ms to ~15–25ms. The remaining long frames are the single re-wrap and the click itself.\n- The closing split Chat pane drops its borders, so it ends flush with no 2px snap. Keyboard resizing of the sidebar (arrows, Home, End) is instant.\n\n## Screenshots\n\nEach pair is before (top, `main`) and after (bottom). Frames are timestamped from the click.\n\nChat close, 1440×900:\n![Chat close before and after](https://github.com/user-attachments/assets/5343f810-47d3-4325-b6f7-984e8f67fdbb)\n\nSidebar hide, 1440×900:\n![Sidebar hide before and after](https://github.com/user-attachments/assets/1fa5e8f9-4c8c-4710-b9dd-4f1a674b9727)\n\nPhone Document → Chat, 390×844:\n![Phone Chat tab before and after](https://github.com/user-attachments/assets/6f049146-e21c-40e7-8b62-80efd92b5de3)\n\nAfter, as GIFs:\n![Chat close after](https://github.com/user-attachments/assets/9c553f4c-191a-4aa9-b6e3-45cf47e7e8a3)\n![Phone Chat tab after](https://github.com/user-attachments/assets/131bb231-8cec-4417-882f-0885735639d6)\n\n## Testing\n\n- `bun test apps/web/src/theme.test.ts apps/web/src/pane-motion.test.ts apps/web/src/workspace*`: pass\n- `bun run types`: pass\n- `bun run build`: pass. Initial JS is 255781 B, within the 256000 B budget.\n- `bun scripts/check-design-record.ts`: pass\n- `bun run ci`: fails only on the design-contract source hash below.\n- Browser: Chromium filmstrips and per-frame traces against a local fake-GitHub server (desktop and phone). Local E2E is suspended for this run, so CI's browser job covers E2E.\n\n## Needs a design-contract review\n\n- `apps/web/src/workspace.tsx` is pinned twice in `scripts/design-contract/exceptions/dynamic-web.json` (the ChatToggle className and the motion/presence groups). New `sourceHash`: `0e2d0decae6e5fef33cb6520868e7f3b20860910215a6e936a9ac2e6e5da7ecc`. This is safe because the dynamic class expressions are unchanged. The only new attributes are `data-pane-moving`, `data-workspace-travel` and a `--chat-width` custom property in place of an inline `width`.\n\nCoordination: #288 also edits `workspace.tsx` (a separate layout effect) and the same hash entry, so whichever PR lands second needs to renew the hash. Neither PR touches the other's lines.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\n","MaggieAppleton","documentNavigation","repo","githubnext/chopin","repoId","ownerId","org:89615882","site","nexthub","private","admin","settings","triage","starred","stars","watchers","watching","pinned","notify","views",[1032,1033,1034,1035,1036,1037,1038,1039,1040,1041,1042,1043,1044],"navigation",{"_915":916,"_995":996,"_997":998,"_999":1000,"_1001":1002,"_1003":1004,"_99":1005},"sources",[],"meta",{"_861":990,"_991":992,"_993":385,"_905":22,"_867":985,"_994":22,"_910":59,"_911":59},"branches",[933,934,935,936,937,938,939,940,941,942,943,944,945,946,947,948,949,950,951,952,953,954,955,956,30,957,958,959,960,961,962,963,964,965,966,967,968,969,970,971,972,973,974,975,976,977,978,979,980,981,982,983,984,985,986,987,988,989],"tags",[929,930,931,932],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","Let's compose rich plans together","owner","githubnext","section","empty","pins",[1016,1017,1018],"documents",{"_1012":1013,"_1014":325},"code",{"_23":1010,"_1011":808},"automations",{"_1008":788,"_1009":-5},"delivery",{"_1006":59,"_1007":-5},"04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows","deployments",1000,"changes","counts",{"_1015":325},"total","issue",{"_854":1011,"_1020":1030,"_50":1011,"_1022":1031,"_913":884,"_1024":22,"_1025":884,"_1026":808},{"_854":1027,"_1020":1028,"_50":1027,"_1022":1029,"_913":884,"_1024":22,"_1025":884,"_1026":59},{"_854":1019,"_1020":1021,"_50":1019,"_1022":1023,"_913":884,"_1024":22,"_1025":884,"_1026":325},"issues","name","Issues","filters",{},"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_854":1011,"_1020":1030,"_50":1011,"_1022":1075,"_913":884,"_1024":22,"_1025":884},{"_854":1027,"_1020":1028,"_50":1027,"_1022":1074,"_913":884,"_1024":22,"_1025":884},{"_854":1019,"_1020":1021,"_50":1019,"_1022":1073,"_913":884,"_1024":22,"_1025":884},{"_854":1070,"_1020":1071,"_50":1070,"_1022":1072,"_913":22,"_1024":22,"_1025":884},{"_854":1067,"_1020":1068,"_50":1067,"_1022":1069,"_913":22,"_1024":22,"_1025":884},{"_854":1008,"_1020":1065,"_50":1001,"_1022":1066,"_913":22,"_1024":22,"_1025":884},{"_854":1009,"_1020":1062,"_50":1063,"_1022":1064,"_913":22,"_1024":22,"_1025":884},{"_854":1006,"_1020":1060,"_50":1006,"_1022":1061,"_913":22,"_1024":22,"_1025":884},{"_854":1056,"_1020":1057,"_50":1058,"_1022":1059,"_913":22,"_1024":22,"_1025":884},{"_854":997,"_1020":1054,"_50":997,"_1022":1055,"_913":22,"_1024":22,"_1025":22},{"_854":1051,"_1020":1052,"_50":1051,"_1022":1053,"_913":22,"_1024":22,"_1025":22},{"_854":1048,"_1020":1049,"_50":1048,"_1022":1050,"_913":22,"_1024":22,"_1025":22},{"_854":1045,"_1020":1046,"_50":1045,"_1022":1047,"_913":22,"_1024":22,"_1025":22},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups",[],"now",1794435428198,"sidebar","expanded"]