8.1 KiB
Presentation CodeRabbit Fixes Implementation Plan
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.
Goal: Resolve still-valid CodeRabbit findings from random shit/rabbitreview/pih.txt without mixing correctness fixes with broader visual redesign.
Architecture: Treat the presentation as three independent surfaces: reducer/state correctness, agent/timeline lifecycle correctness, and presentational accessibility/figure data integrity. Keep the first slice small enough to test and commit safely; defer larger chat/visual/data-model cleanup into follow-up slices.
Tech Stack: React 19, TypeScript, Vite/Vitest, React Flow, Motion, Valibot, Effect-backed RPC package, Markdown docs.
Global Constraints
- Work from repo root unless a command explicitly uses
--dir web. - Before editing docs, follow
docs/AGENTS.md; completed plans move todocs/historical/superpowers/plans/. - Keep changes minimal: fix only verified current issues from the review.
- Use tests for behavior changes; do not rely on visual inspection for reducer or hook semantics.
- Do not duplicate canvas/container CSS if
styles/editorial.cssalready owns the wrapper setup.
Execution Status
Completed on 2026-07-08. The implementation fixed the still-valid correctness, accessibility, lifecycle, figure-validation, and stale-doc findings. Deferred items are intentionally not hidden:
PresentationCanvascontainer findings were stale;styles/editorial.cssalready owns the positioned viewport, absolute canvas, transform origin, andpresentation-canvascontainer.- Full reuse of
FigureNodeViewinside React Flow nodes was deferred; the accessibility behavior is now covered by tests, and the component split can be handled in a later refactor. - Broader scene visual redesign remains separate from review-fix work.
Task 1: Correctness And Accessibility Fixes
Files:
- Modify:
web/apps/console/src/presentation/presentation-state.ts - Modify:
web/apps/console/src/presentation/presentation-state.test.ts - Modify:
web/apps/console/src/presentation/PresentationRoute.tsx - Modify:
web/apps/console/src/presentation/PresentationStage.tsx - Modify:
web/apps/console/src/presentation/SceneBody.tsx - Modify:
web/apps/console/src/presentation/DemoWorkflowScene.tsx - Modify:
web/apps/console/src/demo/agent/useDemoAgent.ts - Modify:
web/apps/console/src/demo/agent/useDemoAgent.test.tsx - Modify:
web/apps/console/src/presentation/DiscussionPanel.tsx - Modify:
web/apps/console/src/presentation/DiscussionPanel.test.tsx
Interfaces:
-
Produces:
createInitialPresentationState(): PresentationState -
Produces:
selectNode(nodeId: string | null): voidthroughout presentation components -
Produces: modal keyboard behavior in
DiscussionPanel -
Step 1: Add failing reducer tests
Add tests proving
jump_hashinto#discuss/...clearsevidencePresentationOverride,select_nodeacceptsnull, and fresh state uses a newstartedAt. -
Step 2: Update reducer types and initialization
Narrow
jumptoMainLocation, addcreateInitialPresentationState, allow nullableselect_node, and clear evidence override for discussion deep links. -
Step 3: Add failing agent lifecycle tests
Add tests proving unmount/reset aborts a pending approval and that normal approval resolution removes the abort listener lifecycle.
-
Step 4: Harden
useDemoAgentapproval cleanupTrack the active approval request as one object with
resolve,reject,signal, andabortHandler; only clear refs for the matching active request. -
Step 5: Add modal behavior to
DiscussionPanelAlign with
EvidenceInspector:aria-modal, initial focus, focus trap, Escape close, and focus restoration. -
Step 6: Run focused tests and commit
Run:
pnpm --dir web --filter @lda/console test -- src/presentation/presentation-state.test.ts src/demo/agent/useDemoAgent.test.tsx src/presentation/DiscussionPanel.test.tsx pnpm --dir web --filter @lda/console typecheckCommit message:
fix: harden presentation state and agent lifecycle.
Task 2: Figure Data And Keyboard Integrity
Files:
- Modify:
web/apps/console/src/presentation/figures/catalog.ts - Modify:
web/apps/console/src/presentation/figures/catalog.test.ts - Modify:
web/apps/console/src/presentation/figures/InteractiveFigure.tsx - Modify:
web/apps/console/src/presentation/figures/InteractiveFigure.test.tsx - Modify:
web/apps/console/src/presentation/figures/FigureNodeView.tsx - Modify:
web/apps/console/src/presentation/figures/interactive-figure.css - Modify:
web/apps/console/src/presentation/scenes/ArchitectureScene.tsx - Modify:
web/apps/console/src/presentation/scenes/ArchitectureScene.test.tsx
Interfaces:
-
Produces: catalog issue
missing_explicit_position -
Produces: roving tab order based on focused node, not active marker
-
Step 1: Validate explicit layout positions
Add a catalog test for an explicit layout missing one node position, then add
missing_explicit_positiontoFigureCatalogIssueandissueToCode. -
Step 2: Fix figure keyboard entry
Add a test that a figure with
activeNodeId={null}has exactly one tabbable node. DrivetabIndexfrom focused-node state and fall back to the first node. -
Step 3: Fix affordance selector typo
Rename
figure-node__expand-affancetofigure-node__expand-affordancein both CSS and renderers. -
Step 4: Resolve architecture catalog by beat metadata
Use
beat.figure?.catalogIdto select the catalog. If no known catalog matches, render the architecture catalog as a safe fallback. -
Step 5: Run focused tests and commit
Run:
pnpm --dir web --filter @lda/console test -- src/presentation/figures/catalog.test.ts src/presentation/figures/InteractiveFigure.test.tsx src/presentation/scenes/ArchitectureScene.test.tsx pnpm --dir web --filter @lda/console typecheckCommit message:
fix: validate presentation figures.
Task 3: Docs And Deferred Cleanup
Files:
- Modify:
docs/superpowers/specs/2026-07-03-constrained-demo-agent-design.md - Modify:
web/apps/console/src/demo/agent/recipes.ts - Modify:
web/apps/console/src/demo/agent/preparedRecipeDriver.ts - Modify:
web/apps/console/src/demo/useDemoTimeline.ts - Modify:
web/apps/console/src/presentation/DiscussionPanel.tsx - Modify:
web/apps/console/src/presentation/OperatorChat.test.tsx - Modify:
web/apps/console/src/presentation/WorkflowGraphStage.tsx
Interfaces:
-
Produces: docs that use
EvidenceInspector, notEvidenceDrawer -
Produces: prepared recipe step inputs instead of hardcoded
review_issues -
Produces: unique SVG marker IDs in
WorkflowGraphStage -
Step 1: Refresh stale spec terms
Rename
EvidenceDrawertoEvidenceInspectorin the flow diagram and update the prepared-recipe section to sayrequestApprovalgates the typed review step. -
Step 2: Remove small data hardcodes
Derive recipe tool names from shared tool types, move the selected workflow node into recipe step data, and render discussion branch details from branch data when that model is ready.
-
Step 3: Add missing branch tests
Add
OperatorChattests for approval, error, presentation action, prepared handoff, and fallback messages. -
Step 4: Run full web verification and archive plan
Run:
pnpm --dir web test pnpm --dir web typecheck pnpm --dir web build git diff --checkMove this plan to
docs/historical/superpowers/plans/and commit.
Review Notes
- Canvas/container findings are stale if
web/apps/console/src/presentation/styles/editorial.cssremains imported by the presentation route; it already provides positioned viewport, absolute canvas, transform origin, andcontainer-name: presentation-canvas. - The visual quality of scenes 6, 7, and 10 is not solved by this review-fix plan. Treat those as a separate presentation design pass.