refactor: break up debug-ui tabs into separate files

[bhurlow]

Extract each UI tab into separate component files to reduce git conflicts:

• Create oscillators-tab.tsx for 4 basic oscillators with ADSR envelopes
• Create kick-drum-tab.tsx for advanced kick drum with presets and parameters
• Create hihat-tab.tsx for hi-hat instrument with open/closed modes
• Create snare-tab.tsx for 3-layer snare drum with tonal/noise/crack components
• Create tom-tab.tsx for tom drum with tonal and punch layers
• Refactor main wasm-test.tsx to import and use extracted components

This modular approach improves code maintainability and reduces merge conflicts when multiple developers work on different instrument features.

Closes #55

Generated with Claude Code

[bhurlow]

@claude

#21 [next-builder 8/8] RUN pnpm run build
#21 0.567 
#21 0.567 > [email protected] build /app
#21 0.567 > next build
#21 0.567 
#21 1.395 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#21 1.395 This information is used to shape Next.js' roadmap and prioritize features.
#21 1.395 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#21 1.395 https://nextjs.org/telemetry
#21 1.395 
#21 1.530    ▲ Next.js 15.3.4
#21 1.530 
#21 1.562    Creating an optimized production build ...
#21 12.94  ✓ Compiled successfully in 7.0s
#21 12.95    Linting and checking validity of types ...
#21 16.49 Failed to compile.
#21 16.49 
#21 16.49 ./app/wasm-test.tsx:1472:17
#21 16.49 Type error: Type '(param: "sub" | "decay" | "frequency" | "volume" | "punch" | "click" | "pitchDrop", value: number) => void' is not assignable to type '(param: string, value: number) => void'.
#21 16.49   Types of parameters 'param' and 'param' are incompatible.
#21 16.49     Type 'string' is not assignable to type '"sub" | "decay" | "frequency" | "volume" | "punch" | "click" | "pitchDrop"'.
#21 16.49 
#21 16.49   1470 |                 triggerKickDrum={triggerKickDrum}
#21 16.49   1471 |                 releaseKickDrum={releaseKickDrum}
#21 16.49 > 1472 |                 handleKickConfigChange={handleKickConfigChange}
#21 16.49        |                 ^
#21 16.49   1473 |                 handleKickPresetChange={handleKickPresetChange}
#21 16.49   1474 |               />
#21 16.49   1475 |             )}
#21 16.54 Next.js build worker exited with code: 1 and signal: null
#21 16.56  ELIFECYCLE  Command failed with exit code 1.
#21 ERROR: process "/bin/sh -c pnpm run build" did not complete successfully: exit code: 1

#7 [internal] load build context
------
 > [next-builder 8/8] RUN pnpm run build:
16.49 
16.49   1470 |                 triggerKickDrum={triggerKickDrum}
16.49   1471 |                 releaseKickDrum={releaseKickDrum}
16.49 > 1472 |                 handleKickConfigChange={handleKickConfigChange}
16.49        |                 ^
16.49   1473 |                 handleKickPresetChange={handleKickPresetChange}
16.49   1474 |               />
16.49   1475 |             )}
16.54 Next.js build worker exited with code: 1 and signal: null
16.56  ELIFECYCLE  Command failed with exit code 1.
------
Error: failed to fetch an image or build from source: error building: failed to solve: process "/bin/sh -c pnpm run build" did not complete successfully: exit code: 1

[bhurlow]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[bhurlow]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[bhurlow]

@claude fix the build issue described in previous comment

[bhurlow]

Claude finished @bhurlow's task —— View job

---

Build Issue Fixed ✅

The TypeScript build error has been resolved! The issue was a type mismatch between the handleKickConfigChange function and the KickDrumTab interface.

Problem:

• The function handleKickConfigChange expected: (param: keyof typeof kickConfig, value: number) => void
• The KickDrumTab interface expected: (param: string, value: number) => void

Solution:

• Created a proper KickConfig interface
• Updated the KickDrumTab interface to use (param: keyof KickConfig, value: number) => void
• This ensures type safety while maintaining compatibility

Todo List:

• Read wasm-test.tsx to understand the type error
• Read kick-drum-tab.tsx to understand the component interface
• Fix the type mismatch in handleKickConfigChange
• Run build to verify the fix
• Commit the fix to the PR branch

Changes Made:

• Updated debug-ui/app/tabs/kick-drum-tab.tsx with proper type definitions
• Committed fix in 9f08238

The build should now pass successfully!

---