suaveplan/openspec/archive/2026-05-12-react-network-libp2p-demo/tasks.md

Tasks — react-network-libp2p-demo

Phase 1: Scaffold

• 1.1 Create packages/react/react-network-libp2p-demo/.
• 1.2 package.json at 0.1.0, peer-deps on react, react-dom, @suaveplan/network-transport-libp2p.
• 1.3 Storybook + testing-dom configuration.

Phase 2: Component extraction

• 2.1 Read upstream libp2p-demo.tsx (749 LOC).
• 2.2 Split into per-concern subcomponents ≤300 LOC each (panels, tabs, controls).
• 2.3 Sibling .md per component file.

Phase 3: Bootstrap-list prop

• 3.1 Remove any hardcoded bootstrap defaults.
• 3.2 Accept bootstrap list as a required React prop.

Phase 4: Storybook stories

• 4.1 Port libp2p-demo.stories.tsx.
• 4.2 Add default + playground + variant stories per subcomponent.

Phase 5: Tests

• 5.1 Snapshot tests via @suaveplan/testing-dom.
• 5.2 Interaction tests for key flows (dial, message, disconnect).

Phase 6: Verification

• 6.1 bunx turbo lint typecheck --filter=@suaveplan/react-network-libp2p-demo green.
• 6.2 No source file > 300 LOC.
• 6.3 Storybook covers every subcomponent.
• 6.4 MANIFEST.md regen.
• 6.5 STATUS.md row added.

Pre-archive checklist

• Row 1 — Phase 6 green.
• Row 2 — Demo runs against a user-supplied bootstrap list.
• Row 3 — Folder archived.