Result is unavailable.

}","\t\t)","\t\t\t","\t\t\t\t

{artifact.summary}

","\t\t\t\t

{artifact.title}

","\t\t\t

","\t\t? (","\t{artifact","\tsurface=\"research-result\"","\topen={disclosure.open && detail !== undefined}","\tmotion={motion}","\timmediately={disclosure.immediately}","\tid={resultId}","with:","`aria-controls` only while `open && detail !== undefined`, and replace both result conditionals","disclosure state inside every toggle so delayed detail uses the event that initiated it. Set","`store.detail(job.id)` in the existing toggle. Capture `motionImmediately?.() ?? false` in the","`BackgroundWorkProps`, pass them to `BackgroundJob`, and add `useId`. Keep","Add `motion: MotionDisclosureContract` and `motionImmediately?: () => boolean` to","- [ ] **Step 2: Wrap resolved detail without delaying its fetch**","`aria-hidden`/`inert`, and enabling reduced motion during exit unmounts immediately.","Playwright coverage that reduced motion opens immediately, pointer-close enters retained","input sample survives delayed detail resolution and is replaced on the next toggle. Add","trigger has no `aria-controls` and no result content. Add a pure regression proving a toggle's","Server-render `BackgroundJob` with a completed result and fixture contract; assert the closed","- [ ] **Step 1: Write failing tests**","**Files:** `packages/editor/src/background-work.tsx`, `background-work.test.ts`, `apps/web/src/room-workspace.tsx`, `e2e/jobs.e2e.ts`","### Task 5: Animate completed research results","git commit -m \"Animate decision history disclosure\"","\tapps/web/src/room-workspace.tsx e2e/sidecar.e2e.ts","git add packages/editor/src/decisions.tsx packages/editor/src/decisions.test.tsx \\","Run: `bun run e2e -- e2e/sidecar.e2e.ts`","Run: `bun test packages/editor/src/decisions.test.tsx`","In `RoomWorkspace`, pass `motion={motionContract(\"collapse\")}` and the existing `settleMotionImmediately` function. Do not change storage, reveal focus, highlights, or ordering.","","\t

{settled.map(question)}

","\tsurface=\"decision-history\"","\topen={history}","\timmediately={motionImmediately?.() ?? false}","\tid={historyId}","\tclassName=\"plan-decision-history-motion\"","","\t","","render:","`aria-controls={history ? historyId : undefined}` on the trigger. Remove `CaretDownIcon`;","`motionImmediately?: () => boolean` props, plus `useId`. Set","Add required `motion: MotionDisclosureContract` and optional","- [ ] **Step 2: Retain history and rotate one caret**","`is-closing`; press Space again and assert the reference and content immediately unmount.","Playwright, focus `1 resolved`, press Space, assert content and its reference appear without","`data-motion-disclosure=\"decision-history\"`, and one `.motion-disclosure-icon[data-open]`. In","`aria-controls`; restored open history has `aria-controls`,","Extend the server-render helper with the fixture contract. Assert closed history has no","**Files:** `packages/editor/src/decisions.tsx`, `decisions.test.tsx`, `apps/web/src/room-workspace.tsx`, `e2e/sidecar.e2e.ts`","### Task 4: Animate decision history and caret state","git commit -m \"Animate Project disclosures\"","git add apps/web/src/project-sidebar.tsx apps/web/src/navigation-chrome.test.ts e2e/document-navigation.e2e.ts","Run: `bun run e2e -- e2e/document-navigation.e2e.ts`","Run: `bun test apps/web/src/navigation-chrome.test.ts`","Use a local `projectContent` React node containing those existing branches; do not animate updates while the Project is already open.","\t

{projectContent}

","\tsurface=\"projects\"","\topen={expanded}","\tmotion={collapseMotion}","channel/research, loading-more, and load-more branches unchanged inside:","references the mounted region. Move the existing unavailable, error, loading,","Set `aria-controls={expanded ? contentId : undefined}` on the existing trigger so it only","let collapseMotion = motionContract(\"collapse\");","let contentId = useId();","In `Project`, add `useId`, `MotionDisclosure`, `motionContract`, and `motionImmediately`:","- [ ] **Step 2: Wrap the existing body**","Expected: FAIL because the body conditionally unmounts.","content become active with no duplicate.","`aria-hidden` and `inert`, then clicks the trigger during exit and asserts the reference and same","Project, asserts the trigger drops `aria-controls` while retained content is immediately","`data-motion-disclosure=\"projects\"`. The browser test pointer-collapses the seeded `score`","The markup test asserts an expanded Project trigger has `aria-controls`, and its body has","**Files:** `apps/web/src/project-sidebar.tsx`, `apps/web/src/navigation-chrome.test.ts`, `e2e/document-navigation.e2e.ts`","### Task 3: Animate Project expansion","git commit -m \"Add shared disclosure motion presence\"","\tpackages/editor/src/disclosure-motion.test.tsx packages/editor/src/index.ts","git add docs/superpowers/plans/2026-08-25-motion-disclosures.md packages/editor/src/disclosure-motion.tsx \\","Run: `bun test packages/editor/src/disclosure-motion.test.tsx && bun run types`","- [ ] **Step 4: Verify and commit**","Export both components, `disclosureAccessibility`, and `MotionDisclosureContract` from `index.ts`.","}","\t);","\t\t","\t\t\t{children}","\t\t","\treturn (","export function MotionDisclosureIcon({ children, open }: { children: ReactNode; open: boolean }) {","\t\t

","\t\t\t

{children}

","\t\t>","\t\t\tinert={accessibility.inert}","\t\t\tid={id}","\t\t\tdata-motion-disclosure={surface}","\t\t\tclassName={`${motion.className} ${presence.className} ${className}`.trim()}","\t\t\taria-hidden={accessibility.ariaHidden}","\t\t .motion-collapse-content {","\tgrid-template-rows: 0fr;",".motion-collapse.is-closing {","\ttransform: translateY(0);","\topacity: 1;",".motion-collapse.is-open > .motion-collapse-content {","\tgrid-template-rows: 1fr;",".motion-collapse.is-open {","\t\ttransform var(--acc-expand) var(--motion-move);","\t\topacity var(--acc-expand) var(--motion-move),","\ttransition:","\toverflow: hidden;","\tmin-height: 0;",".motion-collapse-content {","\ttransition: grid-template-rows var(--acc-expand) var(--motion-move);","\tdisplay: grid;",".motion-collapse {","```css","Keep slice 1's `--acc-expand` and `--acc-collapse` at 250ms, matching the shipped registry duration, then add:","- [ ] **Step 3: Add the bounded CSS recipe**","Expected: FAIL because the `collapse` selectors are absent.","Run: `bun test apps/web/src/theme.test.ts`",");","\t/@media \$prefers-reduced-motion: reduce\$[\\s\\S]*\\.motion-collapse[^{]*{[^}]*transition:\\s*none/s,","expect(THEME).toMatch(","\t/:root\\[data-motion-input=\"pointer\"\\][^{]*\\.motion-disclosure-icon[^}]*var\$--icon-swap-dur\$/s,","expect(THEME).toMatch(/\\.motion-collapse\\.is-closing\\s*{[^}]*var\$--acc-collapse\$/s);","expect(THEME).toMatch(/\\.motion-collapse\\s*{[^}]*var\$--acc-expand\$[^}]*var\$--motion-move\$/s);","Add a `disclosure motion` suite to `theme.test.ts` that asserts the shipped contract's recipe:","- [ ] **Step 1: Write failing static CSS assertions**","- Modify: `apps/web/src/theme.test.ts`","- Modify: `apps/web/src/theme.css`","### Task 1: Implement the shipped collapse contract in CSS","- `e2e/document-navigation.e2e.ts`, `sidecar.e2e.ts`, `jobs.e2e.ts`, `smoke.e2e.ts`: browser policy.","- `apps/web/src/room-workspace.tsx`: inject the app contract and input sampler into editor surfaces.","- `apps/web/src/chat/transcript.tsx`: finished tool logs.","- `packages/editor/src/background-work.tsx`, `background-work.test.ts`: research results.","- `packages/editor/src/decisions.tsx`, `decisions.test.tsx`: resolved history.","- `apps/web/src/project-sidebar.tsx`, `navigation-chrome.test.ts`: Projects.","- New `packages/editor/src/disclosure-motion.tsx` and test; `packages/editor/src/index.ts`: shared retained wrapper.","- `apps/web/src/theme.css`, `theme.test.ts`: collapse CSS states and icon motion.","Files:","Expected: `apps/web/src/motion-contract.ts` already owns `collapse` with a 250ms close duration and the shared motion states. Slice 2 consumes that shipped contract rather than changing or duplicating it.","rg -n \"MotionKind|MOTION_STATES|motionContract|closeDuration\" apps/web/src --glob '*.{ts,tsx}'","git switch -c maggie/motion-disclosures","Do not implement against the current detached design commit. After slice 1 merges:","## Dependency gate and file map","---","**Tech Stack:** React 19, TypeScript, native CSS transitions, `useTransitionPresence`, Bun tests, Playwright.","**Architecture:** Consume slice 1's app-owned `collapse` contract and add its bounded CSS recipe, then inject that structural contract into editor-owned surfaces so `@chopin/editor` never depends on the web app. One shared wrapper owns retained exit, interruption, `inert`, and `aria-hidden`; each consumer keeps its state, content, and accessible trigger.","**Goal:** Give pointer-owned Project, decision-history, research-result, and chat-tool disclosures bounded expansion and icon motion while keyboard and reduced-motion paths remain immediate.","> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.","# Purposeful Motion Disclosures Implementation Plan","oid","61bdfbfe","mode","100644","parents",[20],"author",{"_845":846,"_847":848,"_853":854},"committer",{"_845":846,"_847":848,"_853":854},"message","Keep generated motion plan local","signature","subject","authors",[844],{"_845":846,"_847":848,"_849":850,"_851":852},"name","Maggie Appleton","email","5599295+MaggieAppleton@users.noreply.github.com","login","MaggieAppleton","avatarUrl","https://avatars.githubusercontent.com/u/5599295?v=4","time",1787670469,"documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars","watchers","watching","pinned","notify","views",[1001,1002,1003,1004,1005,1006,1007,1008,1009,1010,1011,1012,1013],"navigation",{"_875":876,"_959":960,"_961":962,"_963":964,"_965":966,"_967":968,"_535":969},"sources",[],"viewer","meta",{"_952":953,"_954":955,"_956":549,"_864":26,"_957":947,"_958":26,"_870":34,"_871":34},"branches",[894,895,896,897,898,899,900,901,902,903,904,905,906,907,908,909,910,911,912,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,930,931,932,933,934,935,936,937,938,939,940,941,942,943,944,945,946,947,948,949,950,951],"tags",[890,891,892,893],"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",[984,985,986],"documents",{"_979":980,"_981":982},"code",{"_975":976,"_977":978},"automations",{"_972":973,"_974":-5},"delivery",{"_970":34,"_971":-5},"04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_983":982},"total",11,"issue",{"_987":977,"_845":999,"_28":977,"_990":1000,"_873":992,"_993":26,"_994":992,"_995":978},{"_987":996,"_845":997,"_28":996,"_990":998,"_873":992,"_993":26,"_994":992,"_995":34},{"_987":988,"_845":989,"_28":988,"_990":991,"_873":992,"_993":26,"_994":992,"_995":982},"id","issues","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_987":977,"_845":999,"_28":977,"_990":1044,"_873":992,"_993":26,"_994":992},{"_987":996,"_845":997,"_28":996,"_990":1043,"_873":992,"_993":26,"_994":992},{"_987":988,"_845":989,"_28":988,"_990":1042,"_873":992,"_993":26,"_994":992},{"_987":1039,"_845":1040,"_28":1039,"_990":1041,"_873":26,"_993":26,"_994":992},{"_987":1036,"_845":1037,"_28":1036,"_990":1038,"_873":26,"_993":26,"_994":992},{"_987":972,"_845":1034,"_28":965,"_990":1035,"_873":26,"_993":26,"_994":992},{"_987":974,"_845":1031,"_28":1032,"_990":1033,"_873":26,"_993":26,"_994":992},{"_987":970,"_845":1029,"_28":970,"_990":1030,"_873":26,"_993":26,"_994":992},{"_987":1025,"_845":1026,"_28":1027,"_990":1028,"_873":26,"_993":26,"_994":992},{"_987":961,"_845":1023,"_28":961,"_990":1024,"_873":26,"_993":26,"_994":26},{"_987":1020,"_845":1021,"_28":1020,"_990":1022,"_873":26,"_993":26,"_994":26},{"_987":1017,"_845":1018,"_28":1017,"_990":1019,"_873":26,"_993":26,"_994":26},{"_987":1014,"_845":1015,"_28":1014,"_990":1016,"_873":26,"_993":26,"_994":26},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794438841903,"sidebar","expanded"]