Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions .llm/research/mixer-routing-gap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
# Mixer & Signal Routing — Gap Analysis vs openDAW

**Date:** 2026-03-27
**Theme:** Mixer & Signal Routing is the largest depth gap (~35% complete vs pro DAW)
**Reference:** openDAW `packages/studio/core/src/Mixer.ts`, `lib-dsp/src/graph.ts`

## Executive Summary

ACE-Step-DAW has a functional mixer with volume/pan/EQ/compressor/reverb per channel, 2 send slots, and basic group tracks. However, it lacks the **routing depth** that defines a professional mixer: pre/post fader sends, group bus processing, topological routing validation, send automation, and dynamic slot limits.

openDAW implements a two-layer solo system (UI + audio thread), topological sort with loop detection, pre/post aux sends with ramped gains, and a full graph-based routing model. These patterns are well-documented and adaptable to our React + Zustand + Tone.js stack.

## Current State (ACE-Step-DAW)

### What Works
- Channel strip: volume (0-1), pan (-1 to +1), 3-band fixed EQ, compressor, convolver reverb
- Sends: `Send { returnTrackId, amount }` — 2 slots max, post-fader only (implicit)
- Return tracks: `ReturnTrack { id, name, effects[], volume, pan }`
- Group tracks: `isGroup` flag, `parentTrackId` for hierarchy, mute/solo propagation to children
- Solo logic: flat — if any track soloed, all others with `soloActive=true` get muted
- Audio routing: child tracks re-routed to group's `inputGain` via `rerouteOutput()`

### What's Missing (Priority Order)

| # | Gap | Impact | Effort |
|---|-----|--------|--------|
| 1 | Pre/post fader sends | Blocks headphone mix, parallel compression | M |
| 2 | Group bus processing (effects on groups) | Blocks drum bus compression, submix FX | M |
| 3 | Dynamic send/insert slots | Blocks complex routing (3+ aux buses) | S |
| 4 | Routing validation (topo sort) | Risk of feedback loops, undefined behavior | M |
| 5 | Send automation | Can't automate reverb sends over time | S |
| 6 | Virtual solo (routing-aware) | Solo'd group doesn't bring input tracks | S |
| 7 | Signal flow visualization | Users can't see routing topology | L |
| 8 | Return track metering | Can't monitor what feeds a return | S |
| 9 | Sidechain routing UI | Param exists but no picker | S |
| 10 | Mid/Side processing | Advanced mixing technique unavailable | L |

## openDAW Reference Patterns

### 1. Pre/Post Sends
```typescript
// openDAW: AudioSendRouting enum
enum AudioSendRouting { Pre, Post }

// AuxSendProcessor applies gain + pan, taps pre or post fader
// Pre: tapped before channel volume node
// Post: tapped after channel volume node (default)
```

**Our adaptation:** Add `preFader?: boolean` to `Send` interface. In `TrackNode`, create a send tap point before `volumeGain` (pre) or after `volumeGain` (post). Wire send gain nodes accordingly.

### 2. Virtual Solo (Routing-Aware)
```typescript
// openDAW: Two-pass algorithm
// Pass 1: Trace upstream from solo'd channels → mark as virtualSolo
// Pass 2: Trace downstream from solo'd channels → mark bus outputs as virtualSolo
// Result: Solo a group → its children stay audible
```

**Our adaptation:** Replace flat `soloActive` boolean with graph traversal:
```typescript
function computeAudibleTracks(tracks: Track[]): Set<string> {
const soloed = tracks.filter(t => t.soloed);
if (soloed.length === 0) return new Set(tracks.filter(t => !t.muted).map(t => t.id));

const audible = new Set(soloed.map(t => t.id));
// Upstream: if group soloed, add all children
for (const t of soloed) {
if (t.isGroup) addChildren(t.id, tracks, audible);
}
// Downstream: if child soloed, add parent group chain
for (const t of soloed) {
let parent = t.parentTrackId;
while (parent) {
audible.add(parent);
parent = tracks.find(p => p.id === parent)?.parentTrackId;
}
}
return audible;
}
```

### 3. Topological Sort for Routing
```typescript
// openDAW: TopologicalSort<V> class
// - Builds successor map from edges
// - Computes transitive closure (iterative fixed-point)
// - DFS with loop detection
// - Output: sorted order + hasLoops flag
```

**Our adaptation:** Before connecting Web Audio nodes, build a directed graph of track→return→master routing and sort topologically. Reject routing changes that create cycles.

### 4. Group Bus Processing
openDAW treats groups as full audio units with their own effect chain, sends, and volume/pan. Our groups are organizational only — audio routes through `inputGain` but bypasses effects.

**Our adaptation:** When `isGroup`, the TrackNode should have its own effect chain that processes the summed input of all children before routing to master/parent.

## Proposed Issue Breakdown

1. **feat: add pre/post fader toggle to sends** — Extend Send interface, wire tap points in TrackNode
2. **feat: enable effects processing on group tracks** — Allow effect chain on group TrackNodes
3. **feat: remove hardcoded send/insert slot limits** — Dynamic arrays instead of MAX_SEND_SLOTS=2
4. **feat: add routing validation with topological sort** — Prevent feedback loops in send routing
5. **feat: add send amount to automation parameters** — Extend AutomationParameter for sends

## Files to Modify

- `src/types/project.ts` — Send interface, Track interface
- `src/engine/TrackNode.ts` — Pre/post tap points, group effect chain
- `src/engine/AudioEngine.ts` — Solo algorithm, routing validation
- `src/store/projectStore.ts` — Store actions for new send fields, group effects
- `src/components/mixer/MixerPanel.tsx` — UI for pre/post toggle, dynamic slots
- `src/utils/effectAutomation.ts` — Send automation parameter descriptors
23 changes: 16 additions & 7 deletions src/components/mixer/LevelMeter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ function getMeterColor(level: number): string {
interface LevelMeterProps {
trackId?: string;
masterStage?: 'input' | 'output';
returnTrackId?: string;
}

export function LevelMeter({ trackId, masterStage }: LevelMeterProps) {
export function LevelMeter({ trackId, masterStage, returnTrackId }: LevelMeterProps) {
const rafRef = useRef<number>(0);
const peakLevelRef = useRef(0);
const peakHoldFramesRef = useRef(0);
Expand All @@ -37,9 +38,11 @@ export function LevelMeter({ trackId, masterStage }: LevelMeterProps) {
const tick = () => {
const meter = masterStage
? engine.getMasterMeter(masterStage)
: trackId
? engine.getTrackMeter(trackId)
: { level: 0, clipped: false };
: returnTrackId
? engine.getReturnTrackMeter(returnTrackId)
: trackId
? engine.getTrackMeter(trackId)
: { level: 0, clipped: false };
const nextLevel = meter.level;
setLevel(nextLevel);
setClipped((wasClipped) => wasClipped || meter.clipped);
Expand All @@ -59,19 +62,25 @@ export function LevelMeter({ trackId, masterStage }: LevelMeterProps) {

rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [trackId, masterStage]);
}, [trackId, masterStage, returnTrackId]);

const label = masterStage
? `Master ${masterStage} level meter`
: `Mixer level meter for ${trackId}`;
: returnTrackId
? `Return track level meter for ${returnTrackId}`
: `Mixer level meter for ${trackId}`;
const clipResetLabel = masterStage
? `Reset clip indicator for master ${masterStage}`
: `Reset clip indicator for ${trackId}`;
: returnTrackId
? `Reset clip indicator for return ${returnTrackId}`
: `Reset clip indicator for ${trackId}`;

const resetClip = () => {
const engine = getAudioEngine();
if (masterStage) {
engine.resetMasterClip(masterStage);
} else if (returnTrackId) {
engine.resetReturnTrackClip(returnTrackId);
} else if (trackId) {
engine.resetTrackClip(trackId);
}
Expand Down
90 changes: 86 additions & 4 deletions src/components/mixer/MixerPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -184,24 +184,39 @@ function ChannelStrip({ track, faderHeight, returnTracks }: ChannelStripProps) {
const rt = returnTracks[i];
const send = rt ? sends.find((s) => s.returnTrackId === rt.id) : undefined;
const amount = send?.amount ?? 0;
const isPreFader = send?.preFader ?? false;
return (
<div
key={i}
data-testid={`send-slot-${i}`}
className="flex items-center gap-1.5"
className="flex items-center gap-1"
>
{rt ? (
<>
<span className="text-[10px] text-zinc-400 truncate flex-1" title={rt.name}>{rt.name}</span>
<span className="text-[10px] text-zinc-400 truncate w-10" title={rt.name}>{rt.name}</span>
<button
type="button"
data-testid={`send-pre-post-${i}`}
className={`text-[8px] font-bold px-1 py-0.5 rounded border ${
isPreFader
? 'text-yellow-400 border-yellow-400/40 bg-yellow-400/10'
: 'text-zinc-500 border-zinc-600 bg-transparent'
} hover:border-zinc-400 transition-colors`}
title={isPreFader ? 'Pre-fader: send is independent of track volume' : 'Post-fader: send follows track volume'}
onClick={() => updateTrackSend(track.id, rt.id, amount || 0.5, !isPreFader)}
disabled={isFrozen}
Comment on lines +206 to +207
Copy link

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PRE/PST toggle click handler uses amount || 0.5, which will unexpectedly jump a send from 0 to 0.5 just by toggling the tap point (audible surprise). If sends are intentionally removed at amount=0, consider disabling the toggle when amount === 0, or changing the store model to persist preFader even when amount is 0 so the toggle doesn’t need to mutate the amount.

Suggested change
onClick={() => updateTrackSend(track.id, rt.id, amount || 0.5, !isPreFader)}
disabled={isFrozen}
onClick={() => updateTrackSend(track.id, rt.id, amount, !isPreFader)}
disabled={isFrozen || amount === 0}

Copilot uses AI. Check for mistakes.
>
{isPreFader ? 'PRE' : 'PST'}
</button>
<input
type="range"
min={0}
max={1}
step={0.01}
value={amount}
onChange={(e) => updateTrackSend(track.id, rt.id, parseFloat(e.target.value))}
onChange={(e) => updateTrackSend(track.id, rt.id, parseFloat(e.target.value), isPreFader)}
aria-label={`Send ${track.displayName} to ${rt.name}`}
className="w-14 h-3 accent-blue-500"
className="w-10 h-3 accent-blue-500"
disabled={isFrozen}
/>
</>
Expand Down Expand Up @@ -271,6 +286,65 @@ interface MasterStripProps {
faderHeight: number;
}

interface ReturnTrackStripProps {
returnTrack: ReturnTrack;
faderHeight: number;
}

function ReturnTrackStrip({ returnTrack, faderHeight }: ReturnTrackStripProps) {
const updateReturnTrack = useProjectStore((s) => s.updateReturnTrack);

return (
<div
data-testid={`return-strip-${returnTrack.id}`}
className="flex h-full min-h-0 w-[72px] shrink-0 flex-col items-center border-l border-[#333] bg-[#282828] px-1 py-2 gap-1"
>
{/* Return track label */}
<span className="text-[10px] font-semibold text-teal-400 uppercase tracking-wider truncate w-full text-center" title={returnTrack.name}>
{returnTrack.name}
</span>

{/* Pan knob */}
<Knob
value={returnTrack.pan}
min={-1}
max={1}
defaultValue={0}
onChange={(v) => updateReturnTrack(returnTrack.id, { pan: v })}
label="Pan"
size={28}
step={0.01}
/>

{/* Effects indicator */}
<div className="text-[8px] text-zinc-500">
{returnTrack.effects.length > 0
? <span className="text-teal-400">{returnTrack.effects.length} FX</span>
: <span>No FX</span>
}
</div>

{/* Volume fader + meter */}
<div className="flex-1 flex flex-col items-center justify-end min-h-0 gap-1" style={{ height: faderHeight }}>
<div className="relative flex justify-center gap-1" style={{ height: faderHeight - 24 }}>
<LevelMeter returnTrackId={returnTrack.id} />
<VerticalFader
value={returnTrack.volume}
min={0}
max={1}
defaultValue={1}
onChange={(v) => updateReturnTrack(returnTrack.id, { volume: v })}
aria-label={`${returnTrack.name} volume fader`}
accentColor="#2dd4bf"
width={12}
/>
</div>
<span className="text-[10px] font-mono text-zinc-400">{volumeToDb(returnTrack.volume)}</span>
</div>
</div>
);
}

function MasterStrip({ faderHeight }: MasterStripProps) {
const project = useProjectStore((s) => s.project);
const updateProject = useProjectStore((s) => s.updateProject);
Expand Down Expand Up @@ -406,6 +480,14 @@ export function MixerPanel() {
{[...project.tracks].sort((a, b) => a.order - b.order).map((track) => (
<ChannelStrip key={track.id} track={track} faderHeight={faderHeight} returnTracks={returnTracks} />
))}
{returnTracks.length > 0 && (
<>
<div className="w-px self-stretch bg-teal-700/40" />
{returnTracks.map((rt) => (
<ReturnTrackStrip key={rt.id} returnTrack={rt} faderHeight={faderHeight} />
))}
</>
)}
<MasterStrip faderHeight={faderHeight} />
</div>
</div>
Expand Down
Loading
Loading