> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/sessions/phase21-session02-shared-expansion-host/tasks.md). # Task Checklist **Session ID**: `phase21-session02-shared-expansion-host` **Total Tasks**: 22 **Estimated Duration**: 3-4 hours **Created**: 2026-06-29 *** Legend: `[x]` completed; `[ ]` pending; `[P]` parallelizable; `[SNNMM]` session ref; `TNNN` task ID. *** ## Progress Summary | Metric | Value | | ------------------- | ------- | | Tasks Completed | 22 / 22 | | Estimated Remaining | 0 hours | | Blockers | 0 | *** ## Setup (3 tasks) * [x] T001 \[S2102] Verify analyzer state, Session 01 completion, and Session 02 scope before implementation (`.spec_system/PRD/phase_21/session_02_shared_expansion_host.md`) * [x] T002 \[S2102] \[P] Audit current bottom-rail App wiring and shell note behavior (`apps/web/src/App.tsx`) * [x] T003 \[S2102] \[P] Audit existing expansion store API and panel-local detail controls (`apps/web/src/store/useSettingsStore.ts`, `apps/web/src/components/QuestBoard.tsx`, `apps/web/src/components/WarRoomPanel.tsx`, `apps/web/src/components/orchestration/OrchestrationHeader.tsx`) *** ## Foundation (5 tasks) * [x] T004 \[S2102] Create `BottomRailExpansionHost` props and typed surface-id contract around the existing `BottomRailSurfaceId` union (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T005 \[S2102] Implement the interactive descendant guard selector for buttons, links, form fields, tab roles, editable content, and `[data-no-panel-expand]` (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T006 \[S2102] Implement compact and expanded wrapper structure with same-instance child promotion and stable DOM ids (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T007 \[S2102] Implement dialog ARIA state, labelled title wiring, `aria-controls`, and stable test-id helpers for expanded surfaces (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T008 \[S2102] Implement product-facing explicit open affordance and focused close affordance with platform-appropriate accessibility labels, focus management, and input support (`apps/web/src/components/BottomRailExpansionHost.tsx`) *** ## Implementation (9 tasks) * [x] T009 \[S2102] Wire Quest Board through the shared host while preserving the existing shell state note and mounted panel instance (`apps/web/src/App.tsx`) * [x] T010 \[S2102] Wire Orchestration through the shared host while preserving the existing shell state note and mounted panel instance (`apps/web/src/App.tsx`) * [x] T011 \[S2102] Wire War Room through the shared host while preserving the existing shell state note and mounted panel instance (`apps/web/src/App.tsx`) * [x] T012 \[S2102] Connect host open and close behavior to `expandedBottomRailSurfaceId` so opening one surface replaces any other expanded surface with state reset or revalidation on re-entry (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T013 \[S2102] Implement guarded panel-background click expansion without stealing nested control actions (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T014 \[S2102] Implement Escape close listener with cleanup on scope exit for all acquired resources (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T015 \[S2102] Implement backdrop click close and inner-panel click containment so outside clicks recover without closing nested content accidentally (`apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T016 \[S2102] Add App-level stable test ids for `bottom-rail-expand-*`, `bottom-rail-expanded-*`, and close/backdrop controls (`apps/web/src/App.tsx`, `apps/web/src/components/BottomRailExpansionHost.tsx`) * [x] T017 \[S2102] Update cockpit shell mocks and assertions to prove the host does not render duplicate bottom-panel trees (`apps/web/tests/CockpitShell.test.tsx`) *** ## Testing (5 tasks) * [x] T018 \[S2102] \[P] Add host tests for explicit open, close button, backdrop close, Escape close, focus restore, and listener cleanup (`apps/web/tests/BottomRailExpansionHost.test.tsx`) * [x] T019 \[S2102] \[P] Add host tests for guarded buttons, links, inputs, textareas, selects, role buttons, role tabs, contenteditable, and `[data-no-panel-expand]` descendants (`apps/web/tests/BottomRailExpansionHost.test.tsx`) * [x] T020 \[S2102] Add App shell tests for all three expanded surface ids, one-at-a-time replacement, shell state-note preservation, and single mounted panel instances (`apps/web/tests/CockpitShell.test.tsx`) * [x] T021 \[S2102] Run focused host and shell tests (`npm test -- apps/web/tests/BottomRailExpansionHost.test.tsx apps/web/tests/CockpitShell.test.tsx apps/web/tests/MobileAccessibility.test.tsx`) * [x] T022 \[S2102] Run web typecheck and ASCII/LF validation (`npm run typecheck --workspace @factionos/web`) *** ## Completion Checklist * [x] All tasks marked `[x]` * [x] All tests and checks passing * [x] All files ASCII-encoded with LF line endings * [x] implementation-notes.md updated * [x] Ready for `creview` to review and repair uncommitted changes *** ## Next Steps Run the `creview` workflow step. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/sessions/phase21-session02-shared-expansion-host/tasks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.