setOpen(o => !o)}>
{ e.stopPropagation(); onToggle?.(); }} />
{title}
{type}
{open ? "▾" : "▸"}
{open && (
{params.map((p, i) => (
setVals(prev => prev.map((x, j) => j === i ? v : x))}
min={p.min ?? 0} max={p.max ?? 100} />
))}
)}
);
}
// ── Signal Arrow Connector ──────────────────────────────────
function SignalArrow({ active = true, variant = 'right', animated = true }) {
const color = active ? T.green : T.textDim;
if (variant === 'right') {
return (
)}
);
}
if (variant === 'split') {
return (
);
}
if (variant === 'merge') {
return (
);
}
return null;
}
// ── Slide Panel ──────────────────────────────────────────────
function SlidePanel({ children, onClose }) {
return (
e.stopPropagation()}>
{children}
);
}
// ══════════════════════════════════════════════════════════════
// SCREENS
// ══════════════════════════════════════════════════════════════
// 1. RIG SCREEN ────────────────────────────────────────────────
function RigScreen({ state, connected, refresh }) {
const [volume, setVolume] = useState(state?.master_volume != null ? Math.round(state.master_volume * 100) : 80);
// Optimistic local states so toggles respond immediately
const [localBypass, setLocalBypass] = useState(null);
const [localTuner, setLocalTuner] = useState(null);
const bypass = localBypass ?? state?.bypass ?? false;
const tuner = localTuner ?? state?.tuner_enabled ?? false;
useEffect(() => {
if (state?.master_volume != null) setVolume(Math.round(state.master_volume * 100));
}, [state?.master_volume]);
// Sync optimistic states from server when they arrive
useEffect(() => {
if (state?.bypass !== undefined) setLocalBypass(null);
if (state?.tuner_enabled !== undefined) setLocalTuner(null);
}, [state?.bypass, state?.tuner_enabled]);
const handleVolume = async (val) => {
setVolume(val);
try {
await apiPut('/api/volume', { volume: val / 100 });
} catch (e) { /* ignore */ }
};
const handleBypass = async () => {
const next = !bypass;
setLocalBypass(next);
try {
await apiPost('/api/bypass', { bypass: next });
} catch (e) { setLocalBypass(null); }
};
const handleTuner = async () => {
const next = !tuner;
setLocalTuner(next);
try {
await apiPost('/api/tuner', { enabled: next });
} catch (e) { setLocalTuner(null); }
};
// Real audio levels from the pipeline (0-100 scale, updated every poll cycle)
const inputLevel = state?.input_level ?? 0;
const outputLevel = state?.output_level ?? 0;
return (
Active Rig
{state?.current_preset ? (
{state.current_preset.name}
) : (
No preset loaded
)}
{connected ? (
Connected
) : (
Offline
)}
{/* Status row */}
Routing
{state?.routing_mode || "mono"}
{/* Tuner active indicator */}
{tuner && (
🎵
TUNER ACTIVE
—————●—————
Tap switch again to exit tuner mode
)}
{/* Volume */}
Master Volume
handleVolume(+e.target.value)}
style={{ width: "100%", accentColor: T.amber }} />
{volume}%
{state?.nam_loaded ? "NAM: Active" : "NAM: —"}
{/* Signal chain */}
Signal Chain
{(() => {
const chain = ["IN", state?.bypass ? "BYP" : (state?.nam_loaded ? "NAM" : "AMP"), state?.ir_loaded ? "IR" : "CAB", "OUT"];
const is4CM = state?.routing_mode === '4cm';
const bp = state?.routing_breakpoint || 7;
const active = !state?.bypass;
return chain.map((s, i, arr) => (
{is4CM && s === "AMP" && (
)}
{is4CM && s === "CAB" && (
)}
{s}
{is4CM && s === "AMP" && 4CM }
{is4CM && s === "BYP" && 4CM }
{is4CM && s === "AMP" && (
LOOP
)}
{i < arr.length - 1 && !(is4CM && s === "AMP") &&
}
));
})()}
{/* NAM + IR info */}
NAM Model
{state?.nam_model ? (
{state.nam_model}
) : (
Not loaded
)}
IR
{state?.ir_name ? (
) : (
Not loaded
)}
{/* Quick links */}
{
const tabbar = document.querySelector('.tabbar');
const tabs = tabbar?.children;
if (tabs) tabs[3]?.click(); // IRs tab index
}}>Browse IRs
{
const tabbar = document.querySelector('.tabbar');
const tabs = tabbar?.children;
if (tabs) tabs[2]?.click(); // Models tab index
}}>Browse Models
);
}
// 2. FX CHAIN SCREEN ───────────────────────────────────────────
const FX_TYPE_LABELS = {
noise_gate: "Noise Gate", compressor: "Compressor", boost: "Boost",
overdrive: "Overdrive", distortion: "Distortion", fuzz: "Fuzz",
eq: "EQ", chorus: "Chorus", flanger: "Flanger", phaser: "Phaser",
tremolo: "Tremolo", vibrato: "Vibrato", delay: "Delay", reverb: "Reverb",
volume: "Volume", nam_amp: "NAM Amp", ir_cab: "IR Cab",
octaver: "Octaver", pitch_shifter: "Pitch Shifter", harmonizer: "Harmonizer",
whammy: "Whammy", detune: "Detune", ring_modulator: "Ring Mod",
auto_wah: "Auto Wah", envelope_filter: "Env Filter", rotary_speaker: "Rotary",
uni_vibe: "Uni-Vibe", auto_pan: "Auto Pan", stereo_widener: "Stereo Widener",
bitcrusher: "Bitcrusher", wavefolder: "Wavefolder", rectifier: "Rectifier",
expander: "Expander", de_esser: "De-esser", transient_shaper: "Transient Shaper",
parametric_eq: "Parametric EQ", high_pass_filter: "High Pass",
low_pass_filter: "Low Pass", band_pass_filter: "Band Pass",
notch_filter: "Notch Filter", formant_filter: "Formant Filter",
ping_pong_delay: "Ping Pong Delay", multi_tap_delay: "Multi Tap",
reverse_delay: "Reverse Delay", tape_echo: "Tape Echo",
shimmer_reverb: "Shimmer Reverb", looper: "Looper",
early_reflections: "Early Reflections", sidechain_compressor: "Sidechain Comp",
};
function FXScreen({ state, connected }) {
const [fxList, setFxList] = useState(null);
const [loading, setLoading] = useState(true);
const [showAdd, setShowAdd] = useState(false);
const [paramSchemas, setParamSchemas] = useState({});
// Load block param schemas
const loadParams = useCallback(async (fxType) => {
if (paramSchemas[fxType]) return paramSchemas[fxType];
try {
const data = await apiGet(`/api/block-params/${fxType}`);
setParamSchemas(prev => ({ ...prev, [fxType]: data.params || [] }));
return data.params || [];
} catch (e) { return []; }
}, [paramSchemas]);
useEffect(() => {
if (!connected || !state?.current_preset) {
// Offline: show a simple empty state
setFxList([]);
setLoading(false);
return;
}
// Load active preset's chain from presets API
apiGet('/api/presets').then(async data => {
const banks = data.banks || [];
const cp = state.current_preset;
const preset = banks[cp.bank]?.presets?.[cp.program];
if (preset?.chain) {
const blocks = await Promise.all(preset.chain.map(async (b, i) => {
const params = await loadParams(b.fx_type);
return {
id: i + 1,
title: FX_TYPE_LABELS[b.fx_type] || b.fx_type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
type: b.fx_type,
bypassed: b.bypass || !b.enabled,
params: params,
};
}));
setFxList(blocks);
}
setLoading(false);
}).catch(() => {
setFxList([]);
setLoading(false);
});
}, [connected, state, loadParams]);
const toggle = (id) => setFxList(prev => prev ? prev.map(f => f.id === id ? { ...f, bypassed: !f.bypassed } : f) : prev);
const addBlock = async (fxType) => {
setShowAdd(false);
const params = await loadParams(fxType);
setFxList(prev => [...(prev || []), {
id: Date.now(),
title: FX_TYPE_LABELS[fxType] || fxType,
type: fxType,
bypassed: false,
params: params,
}]);
};
if (loading) return
;
return (
FX Chain {(fxList?.length || 0) > 0 ? `(${fxList.length})` : ''}
setShowAdd(true)}>+ Add Block
{/* Signal path */}
{fxList && fxList.length > 0 && (
{(() => {
const is4CM = state?.routing_mode === '4cm';
const bp = is4CM ? (state?.routing_breakpoint || 7) : -1;
const items = [];
// Build chain items array with connector metadata
items.push({ label: "IN", type: "io", idx: -1 });
fxList.forEach((f, idx) => {
if (is4CM && idx === bp) {
items.push({ label: null, type: "merge-bp", idx });
}
items.push({ label: f.type.toUpperCase(), type: "fx", idx, bypassed: f.bypassed });
if (is4CM && idx === bp - 1) {
items.push({ label: null, type: "split-bp", idx });
}
});
items.push({ label: "OUT", type: "io", idx: -1 });
return items.map((item, i) => {
if (item.type === 'split-bp') {
return (
4CM
);
}
if (item.type === 'merge-bp') {
// Already rendered as part of the split-bp composite — skip
return null;
}
return (
{item.type === 'io' && (
{item.label}
)}
{item.type === 'fx' && (
{item.label}
)}
{/* Connector after this block */}
{i < items.length - 1 && items[i+1]?.type !== 'split-bp' && items[i]?.type !== 'merge-bp' && (
)}
);
});
})()}
)}
{(!fxList || fxList.length === 0) ? (
No FX blocks in the chain. setShowAdd(true)}>+ Add your first block
) : (
fxList.map(f => (
toggle(f.id)} />
))
)}
{/* Add Block slide panel */}
{showAdd && (
setShowAdd(false)}>
{Object.entries(FX_TYPE_LABELS).map(([key, label]) => (
addBlock(key)} style={{ borderRadius: 6 }}>
{key.split('_')[0]}
{label}
+
))}
)}
);
}
// 3. MODELS SCREEN ─────────────────────────────────────────────
function ModelsScreen({ state, connected, refresh }) {
const [models, setModels] = useState([]);
const [current, setCurrent] = useState(null);
const [loading, setLoading] = useState(true);
const [searching, setSearching] = useState(false);
const [searchQ, setSearchQ] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [showSearch, setShowSearch] = useState(false);
const [uploading, setUploading] = useState(false);
const fileRef = useRef(null);
const loadModels = useCallback(async () => {
if (!connected) { setLoading(false); return; }
try {
const data = await apiGet('/api/models');
setModels(data.models || []);
setCurrent(data.current);
} catch (e) { /* ignore */ }
setLoading(false);
}, [connected]);
useEffect(() => { loadModels(); }, [loadModels]);
const handleLoad = async (path) => {
try { await apiPost('/api/models/load', { path }); await loadModels(); refresh(); } catch (e) { alert('Failed to load model'); }
};
const handleUnload = async () => {
try { await apiPost('/api/models/unload'); setCurrent(null); await loadModels(); refresh(); } catch (e) { alert('Failed to unload'); }
};
const handleUpload = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
setUploading(true);
try {
await apiUpload('/api/models/upload', file);
await loadModels();
} catch (err) { alert('Upload failed'); }
setUploading(false);
};
const handleSearch = useCallback(async () => {
if (!searchQ.trim()) return;
setSearching(true);
try {
const data = await apiGet(`/api/models/tonedownload/search?q=${encodeURIComponent(searchQ)}`);
setSearchResults(data.results || []);
} catch (e) { alert('Search failed'); }
setSearching(false);
}, [searchQ]);
const handleInstall = async (result) => {
try {
await apiPost('/api/models/tonedownload/install', {
download_url: result.download_url,
name: result.name || result.filename,
id: result.id,
size: result.size,
pack_name: result.pack_name,
display_name: result.name,
});
await loadModels();
refresh();
} catch (e) { alert('Install failed'); }
};
if (loading) return
;
return (
{showSearch && (
🔍
{searching ? "..." : "Go"}
{searchResults.length > 0 && (
{searchResults.map(r => (
handleInstall(r)} style={{ borderBottom: `1px solid ${T.border}`, borderRadius: 0 }}>
{r.name}
{r.author} · {r.size_display} · {r.architecture}
Get
))}
)}
)}
{current && (
)}
{models.length === 0 ? (
No NAM models found.
) : (
models.map(m => (
{m.name}
{m.architecture} · {m.size_mb} MB
{m.loaded ? (
Loaded
) : (
handleLoad(m.path)}>Load
)}
))
)}
);
}
// 4. IRS SCREEN ────────────────────────────────────────────────
function IRsScreen({ state, connected, refresh }) {
const [irs, setIrs] = useState([]);
const [current, setCurrent] = useState(null);
const [loading, setLoading] = useState(true);
const [searching, setSearching] = useState(false);
const [searchQ, setSearchQ] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [showSearch, setShowSearch] = useState(false);
const [uploading, setUploading] = useState(false);
const fileRef = useRef(null);
const loadIrs = useCallback(async () => {
if (!connected) { setLoading(false); return; }
try {
const data = await apiGet('/api/irs');
setIrs(data.irs || []);
setCurrent(data.current);
} catch (e) { /* ignore */ }
setLoading(false);
}, [connected]);
useEffect(() => { loadIrs(); }, [loadIrs]);
const handleLoad = async (path) => {
try { await apiPost('/api/irs/load', { path }); await loadIrs(); refresh(); } catch (e) { alert('Failed to load IR'); }
};
const handleUnload = async () => {
try { await apiPost('/api/irs/unload'); setCurrent(null); await loadIrs(); refresh(); } catch (e) { alert('Failed to unload'); }
};
const handleUpload = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
setUploading(true);
try {
await apiUpload('/api/irs/upload', file);
await loadIrs();
} catch (err) { alert('Upload failed'); }
setUploading(false);
};
const handleSearch = useCallback(async () => {
if (!searchQ.trim()) return;
setSearching(true);
try {
const data = await apiGet(`/api/irs/tonedownload/search?q=${encodeURIComponent(searchQ)}`);
setSearchResults(data.results || []);
} catch (e) { alert('Search failed'); }
setSearching(false);
}, [searchQ]);
const handleInstall = async (result) => {
try {
await apiPost('/api/irs/tonedownload/install', {
download_url: result.download_url,
name: result.name || result.filename,
id: result.id,
size: result.size,
display_name: result.name,
});
await loadIrs();
refresh();
} catch (e) { alert('Install failed'); }
};
if (loading) return
;
return (
{showSearch && (
🔍
{searching ? "..." : "Go"}
{searchResults.length > 0 && (
{searchResults.map(r => (
handleInstall(r)} style={{ borderBottom: `1px solid ${T.border}`, borderRadius: 0 }}>
{r.name}
{r.author} · {r.size_display}
Get
))}
)}
)}
{current && (
)}
{irs.length === 0 ? (
No IR files found.
) : (
irs.map(ir => (
{ir.name}
{ir.sample_rate} Hz · {ir.length_ms} ms · {ir.num_taps} taps
{ir.loaded ? (
Loaded
) : (
handleLoad(ir.path)}>Load
)}
))
)}
);
}
// 5. PRESETS SCREEN ────────────────────────────────────────────
function PresetsScreen({ state, connected, refresh }) {
const [banks, setBanks] = useState([]);
const [selectedBank, setSelectedBank] = useState(0);
const [loading, setLoading] = useState(true);
const [saveName, setSaveName] = useState('');
const [showSave, setShowSave] = useState(false);
const [deleting, setDeleting] = useState(null);
const loadPresets = useCallback(async () => {
if (!connected) {
setBanks([{ name: "Default", number: 0, presets: [
{ name: "Edge of Breakup", bank: 0, program: 0 },
{ name: "Modern High Gain", bank: 0, program: 1 },
null, null,
]}]);
setLoading(false);
return;
}
try {
const data = await apiGet('/api/presets');
setBanks(data.banks || []);
} catch (e) { /* ignore */ }
setLoading(false);
}, [connected]);
useEffect(() => { loadPresets(); }, [loadPresets]);
const handleActivate = async (bank, program) => {
try {
await apiPost(`/api/presets/${bank}/${program}/activate`);
await loadPresets();
refresh();
} catch (e) { alert('Failed to load preset'); }
};
const handleSave = async () => {
if (!saveName.trim()) return;
const currentBank = state?.current_preset?.bank ?? 0;
const currentProgram = state?.current_preset?.program ?? 0;
try {
await apiPut(`/api/presets/${currentBank}/${currentProgram}`, { name: saveName });
setShowSave(false);
await loadPresets();
} catch (e) { alert('Failed to save'); }
};
const handleNewPreset = async () => {
// Find the first empty slot, or create at next program number
const bank = selectedBank;
const bankData = banks[bank];
const presets = bankData?.presets || [];
let nextProg = presets.findIndex(p => p == null);
if (nextProg === -1) nextProg = presets.length;
const name = `New Preset ${nextProg + 1}`;
try {
await apiPut(`/api/presets/${bank}/${nextProg}`, { name });
await loadPresets();
await apiPost(`/api/presets/${bank}/${nextProg}/activate`);
refresh();
} catch (e) { alert('Failed to create preset'); }
};
const handleDelete = async (bank, program) => {
try {
await apiDelete(`/api/presets/${bank}/${program}`);
setDeleting(null);
await loadPresets();
} catch (e) { alert('Failed to delete'); }
};
if (loading) return
;
const currentPreset = state?.current_preset;
const bankData = banks[selectedBank];
const presets = bankData?.presets || [];
return (
Presets
setShowSave(true)}>Save
+ New
{/* Bank selector */}
{banks.length > 1 && (
{banks.map((b, i) => (
setSelectedBank(i)}>{b.name}
))}
)}
{/* Current preset indicator */}
{currentPreset && (
Current
{currentPreset.name}
Bank {currentPreset.bank} · Prog {currentPreset.program}
)}
{/* Preset list */}
{presets.length === 0 ? (
No presets in this bank.
) : (
presets.map((p, i) => {
if (!p) return null;
const isActive = currentPreset?.bank === p.bank && currentPreset?.program === p.program;
const isDeleting = deleting === `${p.bank}-${p.program}`;
return (
!isDeleting && handleActivate(p.bank, p.program)}>
{p.program + 1}
{p.name}
Bank {p.bank} · Program {p.program}
{isActive &&
● }
{isDeleting ? (
{ e.stopPropagation(); handleDelete(p.bank, p.program); }}>Confirm
{ e.stopPropagation(); setDeleting(null); }}>Cancel
) : (
{ e.stopPropagation(); setDeleting(`${p.bank}-${p.program}`); }}>Delete
)}
);
})
)}
{/* Save dialog */}
{showSave && (
setShowSave(false)}>
)}
);
}
// 6. SETTINGS SCREEN ───────────────────────────────────────────
function SettingsScreen({ state, connected, refresh }) {
const [tab, setTab] = useState('wifi');
const [wifiNetworks, setWifiNetworks] = useState([]);
const [btDevices, setBtDevices] = useState([]);
const [btPaired, setBtPaired] = useState([]);
const [wifiScanning, setWifiScanning] = useState(false);
const [btScanning, setBtScanning] = useState(false);
const [connectSsid, setConnectSsid] = useState('');
const [connectPw, setConnectPw] = useState('');
const [showConnect, setShowConnect] = useState(null);
const [routingMode, setRoutingMode] = useState(state?.routing_mode || 'mono');
const [routingBp, setRoutingBp] = useState(state?.routing_breakpoint || 7);
const [channelMode, setChannelMode] = useState(state?.channel_mode || 'dual-mono');
useEffect(() => {
if (state?.routing_mode) setRoutingMode(state.routing_mode);
if (state?.routing_breakpoint != null) setRoutingBp(state.routing_breakpoint);
if (state?.channel_mode) setChannelMode(state.channel_mode);
}, [state?.routing_mode, state?.routing_breakpoint, state?.channel_mode]);
const scanWifi = async () => {
setWifiScanning(true);
try {
const data = await apiGet('/api/wifi/scan');
setWifiNetworks(data.networks || []);
} catch (e) { /* ignore */ }
setWifiScanning(false);
};
const connectWifi = async (ssid, password) => {
try {
await apiPost('/api/wifi/connect', { ssid, password });
setShowConnect(null);
setConnectSsid('');
setConnectPw('');
setTimeout(refresh, 2000);
} catch (e) { alert('Failed to connect'); }
};
const disconnectWifi = async () => {
try { await apiPost('/api/wifi/disconnect'); setTimeout(refresh, 2000); } catch (e) { /* ignore */ }
};
const toggleHotspot = async () => {
const active = state?.wifi?.hotspot_active;
try {
if (active) await apiPost('/api/wifi/hotspot/disable');
else await apiPost('/api/wifi/hotspot/enable', { ssid: 'Pi-Pedal', password: 'pedal1234' });
setTimeout(refresh, 2000);
} catch (e) { /* ignore */ }
};
const handleBtPower = async (on) => {
try { await apiPost('/api/bluetooth/power', { on }); setTimeout(refresh, 1000); } catch (e) { /* ignore */ }
};
const scanBt = async () => {
setBtScanning(true);
try {
const data = await apiPost('/api/bluetooth/scan');
setBtDevices(data.devices || []);
} catch (e) { /* ignore */ }
setBtScanning(false);
};
const loadBtPaired = async () => {
try {
const data = await apiGet('/api/bluetooth/paired');
setBtPaired(data.devices || []);
} catch (e) { /* ignore */ }
};
const pairBt = async (addr) => {
try { await apiPost('/api/bluetooth/pair', { address: addr }); await loadBtPaired(); } catch (e) { alert('Pairing failed'); }
};
const handleRouting = async (mode, bp) => {
try { await apiPost('/api/routing', { routing_mode: mode, routing_breakpoint: bp }); } catch (e) { /* ignore */ }
};
const handleChannelMode = async (mode) => {
try {
await apiPost('/api/channel-mode', { channel_mode: mode });
setChannelMode(mode);
} catch (e) { /* ignore */ }
};
useEffect(() => { if (connected) { scanWifi(); loadBtPaired(); } }, [connected]);
const wifiState = state?.wifi;
const btState = state?.bluetooth;
return (
{/* Settings tabs */}
{[{ id: 'wifi', label: 'WiFi' }, { id: 'bt', label: 'Bluetooth' }, { id: 'routing', label: 'Routing' }].map(t => (
setTab(t.id)}>{t.label}
))}
{/* ── WiFi Tab ─────────────────────────────────────────────*/}
{tab === 'wifi' && (
<>
{/* WiFi Status */}
WiFi
{wifiState?.connected ? `Connected to ${wifiState.ssid}` : 'Disconnected'}
{wifiState?.connected && (
IP: {wifiState.ip} · Signal: {wifiState.signal}%
)}
{/* Hotspot */}
Hotspot
{wifiState?.hotspot_active ? `Active: ${wifiState.hotspot_ssid}` : 'Off'}
{/* Scan networks */}
Networks
{wifiScanning ? "..." : "Scan"}
{wifiNetworks.length === 0 ? (
Scan to see available networks.
) : (
wifiNetworks.map(n => (
wpaState?.ssid !== n.ssid && setShowConnect(n.ssid)}>
{n.ssid}
Signal: {n.signal}% · {n.encryption || 'Open'}
{wifiState?.ssid === n.ssid &&
Connected }
))
)}
{/* Connect dialog */}
{showConnect && (
)}
)}
{/* ── Bluetooth Tab ─────────────────────────────────────────*/}
{tab === 'bt' && (
<>
Bluetooth
{btState?.powered ? 'Powered on' : 'Off'}
handleBtPower(!btState?.powered)} />
{btState?.powered && (
<>
Discoverable
{btState?.name} ({btState?.address})
{ try { await apiPost('/api/bluetooth/discoverable', { on: !btState?.discoverable }); setTimeout(refresh, 500); } catch(e) {} }} />
Bluetooth MIDI
{btState?.midi_enabled ? 'Enabled' : 'Disabled'}
{ try { await (btState?.midi_enabled ? apiPost('/api/bluetooth/midi-disable') : apiPost('/api/bluetooth/midi-enable')); setTimeout(refresh, 500); } catch(e) {} }} />
)}
{btState?.powered && (
Paired Devices ({btPaired.length})
{btScanning ? "..." : "Scan"}
{btPaired.length === 0 ? (
No paired devices.
) : (
btPaired.map(d => (
{d.name || d.address}
{d.address} · {d.connected ? 'Connected' : 'Paired'}
{!d.connected && (
{ try { await apiPost('/api/bluetooth/connect', { address: d.address }); } catch(e) { alert('Failed'); } }}>Connect
)}
))
)}
)}
{btScanning && btDevices.length > 0 && (
Discovered
{btDevices.map(d => (
{d.name || d.address}
{d.address}
pairBt(d.address)}>Pair
))}
)}
)}
{/* ── Routing Tab ───────────────────────────────────────────*/}
{tab === 'routing' && (
<>
4CM Routing
Mode
Mono (normal) or 4CM (4-cable method)
{ setRoutingMode(e.target.value); handleRouting(e.target.value, routingBp); }}
style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 10px", color: T.textPrimary, fontSize: 13, outline: "none" }}>
Mono
4CM
{routingMode === '4cm' && (
Breakpoint
Chain position for amp send/return
{ const v = +e.target.value; setRoutingBp(v); handleRouting(routingMode, v); }}
style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 10px", color: T.textPrimary, fontSize: 13, width: 60, outline: "none", textAlign: "center" }} />
)}
{/* Channel Mode */}
Channel Mode
Routing
Dual-mono: two independent channels · Stereo: linked as L/R pair
handleChannelMode(e.target.value)}
style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 10px", color: T.textPrimary, fontSize: 13, outline: "none" }}>
Dual-Mono
Stereo
{channelMode === 'dual-mono'
? 'Each channel controlled independently from its own phone.'
: 'Channels A (Left) and B (Right) are controlled together.'}
)}
);
}
// 7. LOOPER / RECORDER SCREEN ──────────────────────────────────
function RecordScreen({ state }) {
const [recording, setRecording] = useState(false);
const [captures, setCaptures] = useState([]);
const [loading, setLoading] = useState(true);
const inputLevel = state?.input_level ?? 0;
const outputLevel = state?.output_level ?? 0;
const loadCaptures = useCallback(async () => {
try {
const data = await apiGet('/api/captures');
setCaptures(data.captures || []);
} catch (e) { /* ignore */ }
setLoading(false);
}, []);
useEffect(() => { loadCaptures(); }, [loadCaptures]);
const handleRecord = async () => {
try {
await apiPost('/api/capture/start');
setRecording(true);
} catch (e) { alert('Failed to start recording'); }
};
const handleStop = async () => {
try {
await apiPost('/api/capture/stop');
setRecording(false);
loadCaptures();
} catch (e) { alert('Failed to stop recording'); }
};
return (
Looper / Recorder
{state?.sample_rate ? `${state.sample_rate/1000}kHz` : '—'}
{recording && ● RECORDING }
{recording ? (
⏹ Stop
) : (
● Record
)}
{/* Live levels during recording */}
Input Level
{Array.from({ length: 12 }).map((_, i) => {
const active = Math.round((inputLevel / 100) * 12) > i;
const c = i >= 10 ? T.red : i >= 8 ? '#E8C030' : T.green;
return
;
})}
Output Level
{Array.from({ length: 12 }).map((_, i) => {
const active = Math.round((outputLevel / 100) * 12) > i;
const c = i >= 10 ? T.red : i >= 8 ? '#E8C030' : T.green;
return
;
})}
{/* Recording status */}
{recording && (
🔴
Recording...
Saving to captures folder — tap Stop to finish
)}
{/* Captured files */}
{!recording && (
<>
Recordings ({captures.length})
{loading ? (
) : captures.length === 0 ? (
No recordings yet. Tap ● Record to capture audio.
) : (
captures.map(c => (
{c.name}
{c.size_display}
▶ Play
))
)}
)}
);
}
// ══════════════════════════════════════════════════════════════
// SNAPSHOT PANEL
// ══════════════════════════════════════════════════════════════
function SnapshotPanel({ onClose, state, connected }) {
const [snapshots, setSnapshots] = useState({});
const [loading, setLoading] = useState(true);
const [editingSlot, setEditingSlot] = useState(null);
const [editName, setEditName] = useState('');
const [saveFlash, setSaveFlash] = useState(null);
const [discardEdits, setDiscardEdits] = useState(false);
const holdTimer = useRef(null);
const currentSlot = state?.current_snapshot ?? 0;
const loadSnapshots = useCallback(async () => {
if (!connected) { setLoading(false); return; }
try {
const data = await apiGet('/api/snapshots');
setSnapshots(data.snapshots || {});
} catch (e) { /* ignore */ }
setLoading(false);
}, [connected]);
useEffect(() => { loadSnapshots(); }, [loadSnapshots]);
// Handle press & hold vs tap
const handlePointerDown = (slot) => {
holdTimer.current = setTimeout(() => {
// Long press → save
holdTimer.current = null;
handleSave(slot);
}, 600);
};
const handlePointerUp = (slot) => {
if (holdTimer.current) {
clearTimeout(holdTimer.current);
holdTimer.current = null;
// Short tap → recall (or save if empty)
if (snapshots[String(slot)]) {
handleRecall(slot);
} else {
handleSave(slot);
}
}
};
const handlePointerLeave = () => {
if (holdTimer.current) {
clearTimeout(holdTimer.current);
holdTimer.current = null;
}
};
const handleSave = async (slot) => {
try {
await apiPost(`/api/snapshots/${slot}/save`);
setSaveFlash(slot);
setTimeout(() => setSaveFlash(null), 800);
await loadSnapshots();
} catch (e) { /* ignore */ }
};
const handleRecall = async (slot) => {
try {
await apiPost(`/api/snapshots/${slot}/recall`);
await loadSnapshots();
} catch (e) { /* ignore */ }
};
const handleRename = async (slot) => {
if (!editName.trim()) return;
try {
await apiPut(`/api/snapshots/${slot}`, { name: editName.trim() });
setEditingSlot(null);
await loadSnapshots();
} catch (e) { /* ignore */ }
};
const handleDelete = async (slot) => {
try {
await apiDelete(`/api/snapshots/${slot}`);
await loadSnapshots();
} catch (e) { /* ignore */ }
};
return (
Snapshots
setDiscardEdits(d => !d)}>
Tap to recall · Hold to save
{discardEdits && Edits will be discarded on recall }
{[1,2,3,4,5,6,7,8].map(slot => {
const snap = snapshots[String(slot)];
const isActive = currentSlot === slot;
const isFilled = !!snap;
const isEditing = editingSlot === slot;
const isFlashing = saveFlash === slot;
return (
handlePointerDown(slot)}
onTouchStart={() => handlePointerDown(slot)}
onMouseUp={() => handlePointerUp(slot)}
onTouchEnd={() => handlePointerUp(slot)}
onMouseLeave={handlePointerLeave}
onTouchCancel={handlePointerLeave}
style={isFlashing ? { background: 'rgba(58,184,122,.15)' } : {}}>
{slot}
{isEditing ? (
setEditName(e.target.value)}
onBlur={() => handleRename(slot)}
onKeyDown={e => { if (e.key === 'Enter') handleRename(slot); if (e.key === 'Escape') setEditingSlot(null); }}
autoFocus onClick={e => e.stopPropagation()} />
) : snap ? (
{
e.stopPropagation();
setEditingSlot(slot);
setEditName(snap.name);
}}>{snap.name}
) : (
Empty
)}
{isFlashing &&
}
{isActive &&
}
);
})}
{/* Delete button for active snapshot */}
{currentSlot > 0 && snapshots[String(currentSlot)] && (
handleDelete(currentSlot)}>
Delete Snapshot {currentSlot}
)}
);
}
// ══════════════════════════════════════════════════════════════
// APP SHELL
// ══════════════════════════════════════════════════════════════
const TABS = [
{ id: "rig", label: "Rig", icon: "🎛" },
{ id: "fx", label: "FX Chain", icon: "⛓" },
{ id: "models", label: "Models", icon: "📁" },
{ id: "irs", label: "IRs", icon: "🎚" },
{ id: "presets", label: "Presets", icon: "⭐" },
{ id: "settings", label: "Settings", icon: "⚙" },
{ id: "record", label: "Looper", icon: "🎙" },
];
export default function App() {
const [tab, setTab] = useState("rig");
const [showSnapshots, setShowSnapshots] = useState(false);
const [channel, setChannelState] = useState(() => {
try { return localStorage.getItem('pedal_channel') || 'guitar'; } catch { return 'guitar'; }
});
const { state, connected, refresh } = usePedalState();
useEffect(() => { document.title = "Pi Multi-FX Pedal"; }, []);
// Sync channel to localStorage + module-level API var
useEffect(() => {
try { localStorage.setItem('pedal_channel', channel); } catch (e) {}
setChannel(channel);
}, [channel]);
const handleChannel = (ch) => {
setChannelState(ch);
};
return (
<>
{/* Status bar */}
{/* Channel toggle — hidden in stereo mode */}
{state?.channel_mode === 'stereo' ? (
STEREO
) : (
handleChannel('guitar')}
style={{ padding: '2px 8px', fontSize: 10, fontWeight: 700, letterSpacing: '.1em' }}>
GUITAR
handleChannel('bass')}
style={{ padding: '2px 8px', fontSize: 10, fontWeight: 700, letterSpacing: '.1em' }}>
BASS
)}
{state?.tuner_enabled &&
TUNER }
{/* Snapshot camera icon */}
setShowSnapshots(true)}
title="Snapshots">
📷
{state?.current_snapshot > 0 && (
{state.current_snapshot}
)}
{state?.cpu_percent != null && (
CPU {state.cpu_percent}%
)}
{state?.sample_rate && (
{state.sample_rate/1000}kHz
)}
{state?.bypass && BYP }
{state?.nam_loaded && NAM }
{state?.ir_loaded && IR }
{/* Screen */}
{tab === "rig" &&
}
{tab === "fx" &&
}
{tab === "models" &&
}
{tab === "irs" &&
}
{tab === "presets" &&
}
{tab === "settings" &&
}
{tab === "record" &&
}
{/* Tab bar */}
{TABS.map(t => (
setTab(t.id)}>
{t.icon}
{t.label}
))}
{/* Snapshot panel overlay */}
{showSnapshots && (
setShowSnapshots(false)} state={state} connected={connected} />
)}
);
}