suaveplan/openspec/archive/2026-05-23-enterprise-react-midi/tasks.md

Tasks — enterprise-react-midi

0. Pre-flight (non-negotiable)

• 0.1 Confirm clean working tree (git status reports nothing) and no in-flight worktrees with uncommitted work (git worktree list then git status in each)
• 0.2 Account for every .claude/worktrees/* entry; prune stale ones via bun scripts/worktree-prune.ts --remove.
• 0.3 Confirm MANIFEST.md matches find packages -maxdepth 3 -name package.json | wc -l.

1. Spec authoring

• 1.1 Draft proposal.md, tasks.md, specs/react-midi/spec.md
• 1.2 Every Requirement carries **Verified by:**

2. Implementation

• 2.1 src/error-codes.ts — REACT_MIDI.{ACCESS_DENIED, UNSUPPORTED_PLATFORM, PORT_NOT_FOUND, SYSEX_NOT_PERMITTED} via defineCodes
• 2.2 src/provider/midi-provider.tsx — <MidiProvider sysex={false}> StrictMode-safe singleton MIDIAccess request
• 2.3 src/hooks/use-midi/use-midi.ts — returns { access, status, inputs, outputs }
• 2.4 src/hooks/use-midi-input/use-midi-input.ts
• 2.5 src/hooks/use-midi-output/use-midi-output.ts
• 2.6 src/hooks/use-midi-messages/use-midi-messages.ts — ring buffer
• 2.7 src/hooks/use-midi-devices/use-midi-devices.ts — re-renders on statechange
• 2.8 src/hooks/use-nrpn/, use-rpn/, use-cc14/ — wrap universal reducers
• 2.9 src/components/midi-device-list/midi-device-list.tsx + .stories.tsx
• 2.10 src/components/midi-activity-indicator/midi-activity-indicator.tsx + .stories.tsx
• 2.11 src/port/web-midi-port.ts — bridges MIDIInput/MIDIOutput → MidiPortLike
• 2.12 src/telemetry/telemetry.ts — receive/send counters

3. Tests

• 3.1 Per-hook .test.tsx with @testing-library/react + a fake MIDIAccess injected via context
• 3.2 Provider tests cover: permission grant, permission denial, unsupported platform, SysEx prompt
• 3.3 StrictMode double-mount test — useMidi does not double-request access
• 3.4 Every it(...) has { timeout: 5000 }

4. Documentation

• 4.1 Sibling .md per .ts/.tsx (≥200 words, basic + advanced examples)
• 4.2 README with quickstart + permission model + device-picker example

5. Pre-archive verification

• 5.1 bunx turbo lint typecheck test --filter=@suaveplan/react-midi — green
• 5.2 bunx turbo test:coverage --filter=@suaveplan/react-midi — 100/100/100/100
• 5.3 bunx turbo build --filter=@suaveplan/react-midi — green

6. Archive

• 6.1 Fold spec delta → openspec/specs/react-midi/spec.md
• 6.2 Move folder → openspec/archive/<yyyy-mm-dd>-enterprise-react-midi/
• 6.3 Refresh MANIFEST.md
• 6.4 Prune worktree (bun scripts/worktree-prune.ts --remove)