);
}
// ── Select Param ────────────────────────────────────────────
function SelectParam({ def, value, color, onChange }) {
return (
{def.label}
{(def.options || []).map(opt => (
onChange?.(opt.value)}
style={{
flex: 1, padding: "5px 8px", borderRadius: 4, border: "none",
fontSize: 10, fontWeight: 600, cursor: "pointer",
background: value === opt.value ? color : "transparent",
color: value === opt.value ? "#000" : "#8888A0",
transition: "all .1s", letterSpacing: ".03em",
whiteSpace: "nowrap",
}}
>
{opt.label}
))}
);
}
// ── Parameter Panel ──────────────────────────────────────────
function ParameterPanel({ block,params,onParamChange,onParamChangeEnd,viewMode,onToggleView,onFocus,onModelBrowser }) {
const defs=getBlockParams(block.type);const color=getBlockColor(block.type);
const visibleDefs = defs.filter(d => !d.conditional || d.conditional(params));
return (
onModelBrowser?.(block.id)}>
● {block.name||block.type||''}
{onModelBrowser&&▼ }
{onFocus&&🔍 Focus }
{viewMode==='slider'?'◉':'▦'}
{viewMode==='slider'?visibleDefs.map(p=>(
p.type === 'select' ? (
{onParamChange?.(p.key,v);onParamChangeEnd?.(p.key,v);}}/>
) : (
onParamChange?.(p.key,v)} onChangeEnd={v=>onParamChangeEnd?.(p.key,v)}/>
)
)):(
visibleDefs.filter(p => p.type !== 'select').length > 0 && (
{visibleDefs.filter(p => p.type !== 'select').map(p=>(
{onParamChange?.(p.key,v);onParamChangeEnd?.(p.key,v);}}/>
))}
)
)}
);
}
// ── VU Meter ──────────────────────────────────────────────────
function VUMeter({level=0,height=24,vertical=false}){const segs=12,active=Math.round((level/100)*segs);
const c=i=>i>=10?T.red:i>=8?"#E8C030":T.green;
if(vertical)return(
{Array.from({length:segs}).map((_,i)=>(
))}
);
return(
{Array.from({length:segs}).map((_,i)=>(
))}
);
}
// ── Captures Screen ──────────────────────────────────────────
function CapturesScreen({onClose}){
const[tab,setTab]=useState("models");const[query,setQuery]=useState("");
const[results,setResults]=useState(null);const[models,setModels]=useState([]);const[loading,setLoading]=useState(false);
useEffect(()=>{API.listModels().then(d=>setModels(d.models||[])).catch(()=>{});},[]);
const doSearch=async()=>{if(!query.trim())return;setLoading(true);try{const data=tab==="models"?await API.searchModels(query):await API.searchIrs(query);setResults(data.results||[]);}catch{setResults([]);}setLoading(false);};
const install=async(item)=>{try{if(tab==="models"){await API.installModel(item.download_url,item.name);}else{await API.installIr(item.download_url,item.name);}API.listModels().then(d=>setModels(d.models||[])).catch(()=>{});}catch(e){alert("Install failed: "+e.message);}};
return(
setTab("models")}>NAM Models
setTab("irs")}>IR Cabs
{results===null&&models.length>0&&(<>
Installed Models
{models.map((m,i)=>(
🎛
{m.name}
{m.architecture}·{m.size_mb}MB{m.loaded?"· CURRENT":""}
))})}
{results!==null&&results.length===0&&
No results found
}
{results!==null&&results.map((r,i)=>(
{r.name}
{r.author}·{r.size_display}
install(r)}>Get ))}
);
}
// ── MOCK DATA (used when pedal not connected) ────────────────
const MOCK_BLOCKS=[
{id:"gate",type:"gate",name:"Noise Gate",bypassed:false,params:{threshold:40,release:25}},
{id:"comp",type:"compressor",name:"Compressor",bypassed:false,params:{threshold:50,ratio:4,gain:50}},
{id:"amp",type:"nam",name:"Twin Reverb",bypassed:false,params:{level:75}},
{id:"cab",type:"ir",name:"2x12 American",bypassed:false,params:{level:75}},
{id:"eq",type:"eq",name:"EQ",bypassed:false,params:{low:0,mid:0,high:0,level:70}},
{id:"reverb",type:"reverb",name:"Hall Reverb",bypassed:false,params:{subtype:"hall",decay:50,mix:30,tone:50}},
];
const MOCK_PRESETS=[
{num:1,bank:1,name:"Plexi Crunch"},{num:2,bank:1,name:"Blues Rock Lead"},
{num:3,bank:1,name:"Deluxe Clean"},{num:4,bank:1,name:"British Drive"},
{num:5,bank:2,name:"Metal Djent"},{num:6,bank:2,name:"Funky Wah"},
{num:7,bank:2,name:"Ambient Pad"},{num:8,bank:2,name:"Shoegaze"},
];
// ── App Shell — Landscape Helix Stadium ───────────────────────
export default function App(){
const[view,setView]=useState("main");
const[state,setState]=useState({connected:false,master_volume:0.72,routing_mode:"mono",cpu_percent:0});
const[blocks,setBlocks]=useState(MOCK_BLOCKS);
const[selectedBlockId,setSelectedBlockId]=useState("gate");
const[blockParams,setBlockParams]=useState({});
const[paramView,setParamView]=useState("slider");
const[vuLevel,setVuLevel]=useState(0);
const[currentPreset,setCurrentPreset]=useState(1);
const[currentBank,setCurrentBank]=useState(1);
const[presets,setPresets]=useState(MOCK_PRESETS);
const[globalBypass,setGlobalBypass]=useState(false);
const[loadingPreset,setLoadingPreset]=useState(false);
const[focusBlockId,setFocusBlockId]=useState(null);
const[modelBrowserBlockId,setModelBrowserBlockId]=useState(null);
const[footswitchMode,setFootswitchMode]=useState("stomp");
// ── Poll pedal state from API ──
const userChangedPreset = useRef(false);
const userChangedBlock = useRef(false);
const loadState=useCallback(async()=>{
try{
const s=await API.getState();
setState(s);
if(s.input_level!=null)setVuLevel(s.input_level);
if(s.current_preset?.name&&!userChangedPreset.current){
setCurrentPreset(s.current_preset.program!=null?s.current_preset.program+1:currentPreset);
}
// Only update blocks from API if user didn't just toggle/change them
if(s.blocks&&s.blocks.length>0&&!userChangedBlock.current){
setBlocks(s.blocks);
}
}catch{}
},[currentPreset]);
useEffect(()=>{loadState();const id=setInterval(loadState,3000);return()=>clearInterval(id);},[loadState]);
// VU animation fallback when no real data
useEffect(()=>{const id=setInterval(()=>{setVuLevel(p=>Math.max(0,Math.min(100,p+(Math.random()-0.45)*8)));},150);return()=>clearInterval(id);},[]);
// ── Load presets from API ──
useEffect(()=>{
API.listPresets().then(data=>{
if(data?.banks){
const all=[];
data.banks.forEach(b=>{(b.presets||[]).forEach((p,i)=>{if(p)all.push({num:i+1,bank:b.number,name:p.name,chain:p.chain});});});
if(all.length>0)setPresets(all);
}
}).catch(()=>{});
},[]);
// ── Change preset ──
const handleLoadPreset=useCallback(async(bank,program)=>{
userChangedPreset.current = true;
setLoadingPreset(true);
try{
// Activate on the backend first
await API.activatePreset(bank,program);
// Short delay for backend to apply
await new Promise(r => setTimeout(r, 300));
// Get updated state
const s=await API.getState();
setState(s);
if(s.current_preset?.name){
setCurrentPreset(s.current_preset.program!=null?s.current_preset.program+1:program+1);
}
// Get preset chain data and build blocks
try{
const p=await API.getPreset(bank,program);
if(p?.chain&&p.chain.length>0){
const newBlocks=p.chain.map((b,i)=>{
const raw = { type: b.fx_type || "fx",
enabled: b.enabled !== false, params: b.params || {},
nam_model_path: b.nam_model_path, ir_file_path: b.ir_file_path,
};
return {
id: b.id || `block_${b.fx_type || 'fx'}_${i}`,
type: raw.type,
name: getBlockDisplayName(raw),
bypassed: !b.enabled,
enabled: raw.enabled,
params: raw.params,
nam_model_path: raw.nam_model_path,
ir_file_path: raw.ir_file_path,
};
});
setBlocks(newBlocks);
userChangedBlock.current = true;
}
}catch(e){console.warn("Could not fetch chain:",e);}
setSelectedBlockId(null);
}catch(e){console.warn("Preset activate failed:",e);}
setLoadingPreset(false);
// Re-enable polling sync after 5s
setTimeout(() => { userChangedPreset.current = false; }, 5000);
setTimeout(() => { userChangedBlock.current = false; }, 5000);
},[]);
const handlePresetClick=useCallback(async(num)=>{
// Find the preset by number
const p=presets.find(pr=>pr.num===num);
if(!p)return;
setCurrentPreset(num);
await handleLoadPreset(p.bank||1,num-1);
},[presets,handleLoadPreset]);
// ── Blocks ──
const selectedBlock=useMemo(()=>blocks.find(b=>b.id===selectedBlockId),[blocks,selectedBlockId]);
useEffect(()=>{
if(selectedBlock&&blockParams[selectedBlockId]==null){
const defs=getBlockParams(selectedBlock.type);const init={};
defs.forEach(p=>{init[p.key]=(selectedBlock.params?.[p.key]!=null)?selectedBlock.params[p.key]:p.def;});
setBlockParams(prev=>({...prev,[selectedBlockId]:init}));
}
},[selectedBlockId,selectedBlock,blockParams]);
const handleSelectBlock=useCallback((id)=>{setSelectedBlockId(prev=>prev===id?null:id);},[]);
const handleToggleBlock=useCallback((id)=>{userChangedBlock.current=true;setBlocks(prev=>prev.map(b=>b.id===id?{...b,bypassed:!b.bypassed}:b));API.toggleBlock(id,false).catch(()=>{});setTimeout(()=>{userChangedBlock.current=false;},3000);},[]);
const handleParamChange=useCallback((id,key,value)=>{setBlockParams(prev=>({...prev,[id]:{...(prev[id]||{}),[key]:value}}));},[]);
const handleParamChangeEnd=useCallback((id,key,value)=>{API.updateBlock(id,{[key]:value}).catch(()=>{});},[]);
const handleReorder=useCallback((fromIdx,toIdx)=>{setBlocks(prev=>{const arr=[...prev];const[m]=arr.splice(fromIdx,1);arr.splice(toIdx,0,m);return arr;});},[]);
const handleAddBlock=useCallback(()=>{userChangedBlock.current=true;const id="block_"+Date.now();setBlocks(prev=>[...prev,{id,type:"overdrive",name:"New Drive",bypassed:false,params:{drive:30,tone:50,level:70}}]);setTimeout(()=>{userChangedBlock.current=false;},3000);},[]);
const handleRemoveBlock=useCallback((id)=>{userChangedBlock.current=true;setBlocks(prev=>prev.filter(b=>b.id!==id));if(selectedBlockId===id)setSelectedBlockId(null);setTimeout(()=>{userChangedBlock.current=false;},3000);},[selectedBlockId]);
// ── Bank navigation ──
const currentBankPresets=useMemo(()=>presets.filter(p=>p.bank===currentBank),[presets,currentBank]);
const bankLetter=String.fromCharCode(64+currentBank);
const handleBankUp=useCallback(()=>{
const next=Math.min(currentBank+1,8);
setCurrentBank(next);
const bp=presets.filter(p=>p.bank===next);
if(bp.length>0)handleLoadPreset(bp[0].bank,bp[0].num-1);
},[currentBank,presets,handleLoadPreset]);
const handleBankDown=useCallback(()=>{
const next=Math.max(currentBank-1,1);
setCurrentBank(next);
const bp=presets.filter(p=>p.bank===next);
if(bp.length>0)handleLoadPreset(bp[0].bank,bp[0].num-1);
},[currentBank,presets,handleLoadPreset]);
const handleGlobalBypass=useCallback(()=>{
setGlobalBypass(p=>!p);
API.bypassToggle().catch(()=>{});
},[]);
// ── Tuner toggle ──
const handleTunerToggle=useCallback(()=>{
const newState = !state.tuner_enabled;
setState(prev=>({...prev, tuner_enabled: newState}));
API.tunerToggle(newState).catch(()=>{});
if (newState) {
setView("main"); // Return to main view when enabling tuner (or keep current)
}
},[state.tuner_enabled]);
// ── Focus View handlers ──
const handleFocusViewBypass=useCallback(()=>{
userChangedBlock.current=true;
const id=focusBlockId;
if(!id)return;
setBlocks(prev=>prev.map(b=>b.id===id?{...b,bypassed:!b.bypassed}:b));
API.toggleBlock(id,false).catch(()=>{});
setTimeout(()=>{userChangedBlock.current=false;},3000);
},[focusBlockId]);
const handleOpenModelBrowser=useCallback((blockId)=>{
setModelBrowserBlockId(blockId);
if(focusBlockId) setFocusBlockId(null);
},[focusBlockId]);
const handleSelectModel=useCallback(({type, name, modelPath, isBuiltin})=>{
const id=modelBrowserBlockId;
if(!id)return;
userChangedBlock.current=true;
setBlocks(prev=>prev.map(b=>{
if(b.id!==id)return b;
const defs=getBlockParams(type);
const init={};
defs.forEach(p=>{init[p.key]=p.def;});
return {
...b,
type,
name: name || getBlockDisplayName({type}),
params: init,
nam_model_path: (!isBuiltin && modelPath && type==='nam') ? modelPath : undefined,
ir_file_path: (!isBuiltin && modelPath && type==='ir') ? modelPath : undefined,
};
}));
setModelBrowserBlockId(null);
setBlockParams(prev=>{
const next={...prev};
delete next[id];
return next;
});
setTimeout(()=>{userChangedBlock.current=false;},3000);
},[modelBrowserBlockId]);
// ── Render ──
return(
<>
{view==="main"&&(
<>
{/* ══════ STATUS BAR ══════ */}
{state.connected?"CONNECTED":"OFFLINE"}
{state.current_preset?.name||(presets.find(p=>p.num===currentPreset)?.name||"—")}
{loadingPreset&&⟳ }
CPU {state.cpu_percent!=null?`${state.cpu_percent}%`:"—"}
setView("captures")}title="Downloads">
setView("presets")}title="Presets">
{["stomp","preset"].map(m=>(setFootswitchMode(m)} style={{
padding:"1px 5px",borderRadius:3,border:"none",height:20,
fontSize:8,fontWeight:700,letterSpacing:".04em",textTransform:"uppercase",
background:footswitchMode===m?T.amber:"transparent",
color:footswitchMode===m?"#000":T.textDim,
cursor:"pointer",lineHeight:1.5,minWidth:34,display:"flex",alignItems:"center",justifyContent:"center",
}}>{m==="stomp"?"SM":"PR"} ))}
{if(!document.fullscreenElement){document.documentElement.requestFullscreen()}else{document.exitFullscreen()}}}title="Fullscreen">
{/* ══════ MAIN AREA: Preset sidebar + Content ══════ */}
{/* ─── Preset Sidebar ─── */}
{/* Bank header */}
Bank {bankLetter}
Programs
{/* Preset list */}
{currentBankPresets.map(p=>(
handlePresetClick(p.num)}>
0{p.num}
{p.name}
))}
{/* ─── Main Content Area ─── */}
{/* Scribble info bar */}
{[
{label:"Preset",value:presets.find(p=>p.num===currentPreset)?.name||"—"},
{label:"Routing",value:(state.routing_mode||"MONO").toUpperCase()},
{label:"Volume",value:state.master_volume!=null?`${Math.round(state.master_volume*100)}%`:"—"},
{label:"Bank",value:bankLetter},
].map(s=>(
))}
{/* Block Chain */}
{/* Parameter Panel or placeholder */}
{selectedBlock&&blockParams[selectedBlockId]?(
setParamView(p=>p==='slider'?'knob':'slider')}
onParamChange={(key,value)=>handleParamChange(selectedBlockId,key,value)}
onParamChangeEnd={(key,value)=>handleParamChangeEnd(selectedBlockId,key,value)}
onFocus={()=>setFocusBlockId(selectedBlockId)}
onModelBrowser={handleOpenModelBrowser}
/>
):(
Tap a block to edit parameters
)}
{/* ══════ FOOTSWITCH BAR ══════ */}
{const p=currentBankPresets[parseInt(idx)];if(p)handleLoadPreset(p.bank,p.num-1);}}
/>
)}
{/* ── Focus View overlay ── */}
{focusBlockId&&blocks.find(b=>b.id===focusBlockId)&&blockParams[focusBlockId]&&(
b.id===focusBlockId)}
params={blockParams[focusBlockId]||{}}
viewMode={paramView}
onClose={()=>setFocusBlockId(null)}
onParamChange={(key,value)=>handleParamChange(focusBlockId,key,value)}
onParamChangeEnd={(key,value)=>handleParamChangeEnd(focusBlockId,key,value)}
onToggleView={()=>setParamView(p=>p==='slider'?'knob':'slider')}
onToggleBypass={handleFocusViewBypass}
onOpenModelBrowser={()=>handleOpenModelBrowser(focusBlockId)}
/>
)}
{/* ── Overlays ── */}
{view==="captures"&&setView("main")}/>}
{view==="presets"&&(
Presets
setView("main")}>✕
{presets.map((p,i)=>(
{handlePresetClick(p.num);setView("main");}}>
{p.num}
{p.name}
Bank {p.bank||1}·Program {p.num-1}
{p.num===currentPreset&&
● }
))}
)}
{/* ── Tuner overlay ── */}
{state.tuner_enabled&&(
{
setState(prev=>({...prev, tuner_enabled: false}));
API.tunerToggle(false).catch(()=>{});
}}
/>
)}
{/* ── Model Browser ── */}
{modelBrowserBlockId&&(()=>{
const block=blocks.find(b=>b.id===modelBrowserBlockId);
if(!block)return null;
return (
setModelBrowserBlockId(null)}
/>
);
})()}
);
}