\n+

\n\\`\\`\\`\n\n![Responsive workspace reference](${RESPONSIVE_IMAGE_URL})\n\nA mixed prose paragraph keeps the ![Mixed prose reference](${RESPONSIVE_IMAGE_URL}) on the readable measure.\n\n\\`\\`\\`mermaid\nflowchart LR\n\tCompactDocumentMeasureThatReadersCanTrack --> IndependentWidgetScrollersThatPreserveTheDocumentWidth\n\tIndependentWidgetScrollersThatPreserveTheDocumentWidth --> KeyboardSafeDestinationSwitchingAcrossResponsiveWorkspaces\n\tKeyboardSafeDestinationSwitchingAcrossResponsiveWorkspaces --> DurableAgentChangeChipsAndCollaboratorCursorLabels\n\\`\\`\\`\n\n$$\n${LATEX_SLASH}mathrm{CompactDocumentMeasureMustRemainReadableWhileIndependentWidgetsOwnTheirOverflow} ${LATEX_SLASH}Rightarrow ${LATEX_SLASH}mathrm{ResponsiveWorkspace}\n$$\n\n\n\n\nOne destination occupies the available width at a time.\n\n\n\n\nConversation remains beside the document when room permits it.\n\n\n\n\nTemporary conversation still preserves the document's readable measure.\n\n\n\n\nEach wide widget owns its overflow without widening the collaborative source.\n\n\n\n\nKeyboard focus follows the selected destination without losing the strip.\n\n\n\n\nThe final destination stays reachable without animated navigation.\n\n\n\n\n\n\nEvery visible control and focused element stays inside the visual viewport.\n\n![Contained callout reference](${RESPONSIVE_IMAGE_URL})\n\n\n\nInline \\`UnbreakableInlineCodeTokenThatMustStayInsideTheReadableDocumentMeasureEvenWhenItsAuthoredIntrinsicWidthFarExceedsTheDesktopReadingColumnAndNeedsToWrapWithoutWideningTheCollaborativeDocument\\` belongs with the surrounding prose.\n\n${paragraphs}\n`;\n\nexport const COMPACT_SURFACES_SOURCE = `# Compact surfaces\n\n| Service | Language |\n| ------- | -------- |\n| Auth | Go |\n| Search | Python |\n\n\\`\\`\\`mermaid\nflowchart LR\n\tClient --> Gateway\n\\`\\`\\`\n`;\n\nexport async function expectNoHorizontalOverflow(page: Page): Promise {\n\tlet dimensions = await page.evaluate(() => ({\n\t\tscrollWidth: document.documentElement.scrollWidth,\n\t\tclientWidth: document.documentElement.clientWidth,\n\t}));\n\texpect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);\n}\n\nexport async function expectInsideViewport(locator: Locator): Promise {\n\tlet outside = await locator.evaluateAll(nodes =>\n\t\tnodes.flatMap(node => {\n\t\t\tlet element = node as HTMLElement;\n\t\t\tlet style = getComputedStyle(element);\n\t\t\tlet rectangle = element.getBoundingClientRect();\n\t\t\tif (\n\t\t\t\tstyle.display === \"none\"\n\t\t\t\t|| style.visibility === \"hidden\"\n\t\t\t\t|| rectangle.width === 0\n\t\t\t\t|| rectangle.height === 0\n\t\t\t) return [];\n\n\t\t\tlet viewport = visualViewport ?? {\n\t\t\t\toffsetLeft: 0,\n\t\t\t\toffsetTop: 0,\n\t\t\t\twidth: innerWidth,\n\t\t\t\theight: innerHeight,\n\t\t\t};\n\t\t\tlet inside = rectangle.left >= viewport.offsetLeft\n\t\t\t\t&& rectangle.top >= viewport.offsetTop\n\t\t\t\t&& rectangle.right <= viewport.offsetLeft + viewport.width\n\t\t\t\t&& rectangle.bottom <= viewport.offsetTop + viewport.height;\n\t\t\treturn inside ? [] : [{\n\t\t\t\tleft: rectangle.left,\n\t\t\t\ttop: rectangle.top,\n\t\t\t\tright: rectangle.right,\n\t\t\t\tbottom: rectangle.bottom,\n\t\t\t\tviewport,\n\t\t\t}];\n\t\t})\n\t);\n\texpect(outside).toEqual([]);\n}\n","editable",false,"branch","documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[183,184,185,186,187,188,189,190,191,192,193,194,195],"navigation",{"_54":55,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150},"sources",[],"viewer","meta",{"_131":132,"_133":134,"_135":136,"_42":31,"_137":126,"_138":31,"_48":49,"_50":49},"branches",[73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130],"tags",[69,70,71,72],"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","comments","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","description","Let's compose rich plans together","owner","githubnext","section","","head","empty","pins",[165,166,167],"documents",{"_160":161,"_162":163},"code",{"_156":157,"_158":159},"automations",{"_153":154,"_155":-5},"delivery",{"_151":49,"_152":-5},"tag","04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_164":163},"total",11,"issue",{"_168":158,"_170":181,"_15":158,"_172":182,"_52":174,"_175":31,"_176":174,"_177":159},{"_168":178,"_170":179,"_15":178,"_172":180,"_52":174,"_175":31,"_176":174,"_177":49},{"_168":169,"_170":171,"_15":169,"_172":173,"_52":174,"_175":31,"_176":174,"_177":163},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_168":158,"_170":181,"_15":158,"_172":226,"_52":174,"_175":31,"_176":174},{"_168":178,"_170":179,"_15":178,"_172":225,"_52":174,"_175":31,"_176":174},{"_168":169,"_170":171,"_15":169,"_172":224,"_52":174,"_175":31,"_176":174},{"_168":221,"_170":222,"_15":221,"_172":223,"_52":31,"_175":31,"_176":174},{"_168":218,"_170":219,"_15":218,"_172":220,"_52":31,"_175":31,"_176":174},{"_168":153,"_170":216,"_15":145,"_172":217,"_52":31,"_175":31,"_176":174},{"_168":155,"_170":213,"_15":214,"_172":215,"_52":31,"_175":31,"_176":174},{"_168":151,"_170":211,"_15":151,"_172":212,"_52":31,"_175":31,"_176":174},{"_168":207,"_170":208,"_15":209,"_172":210,"_52":31,"_175":31,"_176":174},{"_168":141,"_170":205,"_15":141,"_172":206,"_52":31,"_175":31,"_176":31},{"_168":202,"_170":203,"_15":202,"_172":204,"_52":31,"_175":31,"_176":31},{"_168":199,"_170":200,"_15":199,"_172":201,"_52":31,"_175":31,"_176":31},{"_168":196,"_170":197,"_15":196,"_172":198,"_52":31,"_175":31,"_176":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794436755028,"sidebar","expanded"]