+
+ );
+}
+
+// ══════════════════════════════════════════════════════════════
+// FX CHAIN SCREEN
+// ══════════════════════════════════════════════════════════════
+
+function FXBlock({ title, type, active = true, bypassed = false }: {
+ title: string; type: string; active?: boolean; bypassed?: boolean;
+}) {
+ const [open, setOpen] = useState(true);
+ return (
+
+
+
+
+ Active Rig
+
+ {state?.current_preset ? (
+
+ {state.current_preset.name}
+
+ ) : (
+ No preset loaded
+ )}
+ {connected ? (
+ Connected
+ ) : (
+ Offline
+ )}
+
+
+
+
+ {/* Status row */}
+
+
+
+
+ {/* Tuner */}
+ {tuner && (
+
+
+ Bypass
+
+
+
+ Tuner
+
+
+
+ Routing
+ {state?.routing_mode || 'mono'}
+
+
+ )}
+
+ {/* Volume */}
+ 🎵
+ TUNER ACTIVE
+ —————●—————
+ Tap switch again to exit tuner mode
+
+
+
+ {/* Signal chain */}
+
+
+ Master Volume
+ handleVolume(+e.target.value)}
+ style={{ width: '100%', accentColor: T.amber }} />
+ {volume}%
+
+ {state?.nam_loaded ? 'NAM: Active' : 'NAM: —'}
+ {state?.ir_loaded ? 'IR: Active' : 'IR: —'} +
+ + {state?.ir_loaded ? 'IR: Active' : 'IR: —'} +
+
+ Signal Chain
+
+ {['IN', state?.bypass ? 'BYP' : (state?.nam_loaded ? 'NAM' : 'AMP'), state?.ir_loaded ? 'IR' : 'CAB', 'OUT'].map((s, i, arr) => (
+
+
+
+ ))}
+ {s}
+ {i < arr.length - 1 && }
+
+
+ );
+}
+
+function FXScreen({ state, connected }: { state: PedalState | null; connected: boolean }) {
+ const [fxList, setFxList] = useState<{ id: number; title: string; type: string; bypassed: boolean }[]>([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ if (!connected || !state?.current_preset) { setFxList([]); setLoading(false); return; }
+ fetchPresets().then(data => {
+ const banks = data.banks || [];
+ const cp = state.current_preset;
+ const preset = cp ? banks[cp.bank]?.presets?.[cp.program] : null;
+ if (preset?.chain) {
+ setFxList(preset.chain.map((b, i) => ({
+ id: i + 1,
+ title: FX_TYPE_LABELS[b.fx_type] || b.fx_type,
+ type: b.fx_type,
+ bypassed: b.bypassed ?? false,
+ })));
+ }
+ setLoading(false);
+ }).catch(() => { setFxList([]); setLoading(false); });
+ }, [connected, state]);
+
+ if (loading) return setOpen(o => !o)}>
+
+ {title}
+ {type}
+ {open ? '▾' : '▸'}
+
+ ;
+
+ return (
+
+
+ );
+}
+
+// ══════════════════════════════════════════════════════════════
+// MODELS SCREEN
+// ══════════════════════════════════════════════════════════════
+
+function ModelsScreen({ connected, refresh }: { state?: PedalState | null; connected: boolean; refresh: () => void }) {
+ const [models, setModels] = useState<{ name: string; path?: string; architecture?: string; size_mb?: string; loaded?: boolean }[]>([]);
+ const [current, setCurrent] = useState
+
+ FX Chain {fxList.length > 0 ? `(${fxList.length})` : ''}
+
+ {fxList.length === 0 ? (
+
+ No FX blocks in the chain.
+ ) : (
+ fxList.map(f => ;
+
+ return (
+
+
+ );
+}
+
+// ══════════════════════════════════════════════════════════════
+// IRS SCREEN
+// ══════════════════════════════════════════════════════════════
+
+function IRsScreen({ connected, refresh }: { state?: PedalState | null; connected: boolean; refresh: () => void }) {
+ const [irs, setIrs] = useState<{ name: string; path?: string; sample_rate?: number; length_ms?: number; loaded?: boolean }[]>([]);
+ const [current, setCurrent] = useState
+
+ NAM Models ({models.length})
+
+ setFileRef(el)} type="file" accept=".nam" style={{ display: 'none' }} onChange={handleUpload} />
+
+ {current && (
+
+
+
+ )}
+ {models.length === 0 ? (
+ Loaded Model
+
+ {current}
+
+
+ No NAM models found.
+ ) : (
+ models.map(m => (
+ !m.loaded && handleLoad(m.path)}>
+
+ ))
+ )}
+
+
+ {m.loaded ? Loaded : }
+ {m.name}
+ {m.architecture} · {m.size_mb} MB
+ ;
+
+ return (
+
+
+ );
+}
+
+// ══════════════════════════════════════════════════════════════
+// PRESETS SCREEN
+// ══════════════════════════════════════════════════════════════
+
+function PresetsScreen({ state, connected, refresh }: { state: PedalState | null; connected: boolean; refresh: () => void }) {
+ const [banks, setBanks] = useState
+
+ IR Files ({irs.length})
+
+ setFileRef(el)} type="file" accept=".wav" style={{ display: 'none' }} onChange={handleUpload} />
+
+ {current && (
+
+
+
+ )}
+ {irs.length === 0 ? (
+ Loaded IR
+
+ {current}
+
+
+ No IR files found.
+ ) : (
+ irs.map(ir => (
+ !ir.loaded && handleLoad(ir.path)}>
+
+ ))
+ )}
+
+
+ {ir.loaded ? Loaded : }
+ {ir.name}
+ {ir.sample_rate} Hz · {ir.length_ms} ms
+ ;
+
+ const currentPreset = state?.current_preset;
+ const bankData = banks[selectedBank];
+ const presets = bankData?.presets || [];
+
+ return (
+
+
+ );
+}
+
+// ══════════════════════════════════════════════════════════════
+// SETTINGS SCREEN
+// ══════════════════════════════════════════════════════════════
+
+function SettingsScreen({ state: pedalState }: { state: PedalState | null; refresh?: () => void }) {
+ return (
+
+
+ Presets
+
+ {banks.length > 1 && (
+
+
+ {banks.map((b, i) => (
+
+ ))}
+
+ )}
+ {currentPreset && (
+
+
+ )}
+ {presets.length === 0 ? (
+
+
+ Current
+
+ {currentPreset.name}
+ Bank {currentPreset.bank} · Prog {currentPreset.program}
+
+ No presets in this bank.
+ ) : (
+ presets.map((p, i) => {
+ if (!p) return null;
+ const isActive = currentPreset?.bank === p.bank && currentPreset?.program === p.program;
+ return (
+ handleActivate(p.bank, p.program)}>
+
+ );
+ })
+ )}
+ {p.program + 1}
+
+
+ {isActive && ●}
+ {p.name}
+ Bank {p.bank} · Program {p.program}
+
+
+ );
+}
+
+// ══════════════════════════════════════════════════════════════
+// APP SHELL
+// ══════════════════════════════════════════════════════════════
+
+const TABS = [
+ { id: 'rig', label: 'Rig', icon: '🎛' },
+ { id: 'fx', label: 'FX', icon: '⛓' },
+ { id: 'models', label: 'Models', icon: '📁' },
+ { id: 'irs', label: 'IRs', icon: '🎚' },
+ { id: 'presets', label: 'Presets', icon: '⭐' },
+ { id: 'settings', label: 'Settings', icon: '⚙' },
+] as const;
+
+type TabId = (typeof TABS)[number]['id'];
+
+// ── Pedal Shell Content (inner component that has context access) ──
+
+function PedalContent() {
+ const [tab, setTab] = useState
+
+ Settings
+
+
+
+
+ System
+ {pedalState?.cpu_percent != null && (
+
+ CPU
+ {pedalState.cpu_percent}%
+
+ )}
+ {pedalState?.sample_rate && (
+
+ Sample Rate
+ {pedalState.sample_rate / 1000}kHz
+
+ )}
+
+ Connection
+ Live
+
+
+ {/* ── Status Bar ── */}
+
+
+
+
+ {/* ── Screen Area ── */}
+
+
+ PI MULTI-FX
+ {state?.tuner_enabled && TUNER}
+
+
+
+
+ {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}
+
+
+ {tab === 'rig' &&
+
+ {/* ── Footswitch Bar ── */}
+
+ {TABS.map(t => (
+
+ setTab(t.id)}>
+ {t.icon}
+ {t.label}
+
+ ))}
+
- 
- 
- 
-
-
-
-
- Get started
-
- Edit src/App.tsx and save to test HMR
-
+ {scribbleData.map((sd, i) => (
+
+ );
+}
diff --git a/ui/src/pedal/footswitch/ModeSelector.tsx b/ui/src/pedal/footswitch/ModeSelector.tsx
new file mode 100644
index 0000000..257fe3b
--- /dev/null
+++ b/ui/src/pedal/footswitch/ModeSelector.tsx
@@ -0,0 +1,56 @@
+/**
+ * ModeSelector — mode switch buttons shown in the status bar.
+ * Lets the user cycle between Stomp, Preset, Snapshot, and Combo modes.
+ */
+
+import { useFootswitchMode } from '../FootswitchModeContext';
+import type { FootswitchMode } from '../types';
+import { FOOTSWITCH_MODE_LABELS } from '../types';
+
+const MODES: FootswitchMode[] = ['stomp', 'preset', 'snapshot', 'combo'];
+const MODE_ICONS: Record
+ {/* Scribble strip LCD above the switch */}
+ handleFootswitch(i)}
+ onSecondary={() => handleSecondary(i)}
+ />
+
+ {/* Footswitch button */}
+
+ ))}
+ handleFootswitch(i)}
+ onContextMenu={(e) => { e.preventDefault(); handleSecondary(i); }}
+ style={{
+ '--fs-color': sd.color,
+ } as React.CSSProperties}
+ >
+
+
+
+ setMode(MODES[nextIdx])}
+ title={`Mode: ${FOOTSWITCH_MODE_LABELS[mode]} — tap to switch`}
+ >
+ {MODE_ICONS[mode]}
+ {FOOTSWITCH_MODE_LABELS[mode]}
+
+ );
+ }
+
+ return (
+
+ {MODES.map(m => (
+
+ ))}
+
+ );
+}
diff --git a/ui/src/pedal/footswitch/ScribbleStrip.tsx b/ui/src/pedal/footswitch/ScribbleStrip.tsx
new file mode 100644
index 0000000..e60788d
--- /dev/null
+++ b/ui/src/pedal/footswitch/ScribbleStrip.tsx
@@ -0,0 +1,60 @@
+/**
+ * ScribbleStrip — the LCD-like label display above each footswitch.
+ *
+ * Shows block/preset/snapshot name and status, mimicking the
+ * Helix / Line 6 scribble strip LCDs.
+ */
+
+import type { ScribbleStripData, ScribbleColor } from '../types';
+import { SCRIBBLE_COLORS } from '../types';
+import { useDoubleTap } from '../hooks/useDoubleTap';
+
+interface ScribbleStripProps {
+ data: ScribbleStripData;
+ onPress: () => void;
+ onSecondary: () => void;
+}
+
+export function ScribbleStrip({ data, onPress, onSecondary }: ScribbleStripProps) {
+ const { handleTap } = useDoubleTap({
+ onSingleTap: onPress,
+ onDoubleTap: onSecondary,
+ });
+
+ const color = SCRIBBLE_COLORS[data.color ?? 'off'];
+ const isActive = data.active ?? false;
+ const isBypassed = data.bypassed ?? false;
+
+ return (
+
+ {/* LED indicator */}
+
+
+ {/* Label area — LCD-style */}
+
+ );
+}
diff --git a/ui/src/pedal/hooks/useDoubleTap.ts b/ui/src/pedal/hooks/useDoubleTap.ts
new file mode 100644
index 0000000..5af0ec2
--- /dev/null
+++ b/ui/src/pedal/hooks/useDoubleTap.ts
@@ -0,0 +1,82 @@
+/**
+ * Double-tap gesture hook for footswitch capacitive touch / secondary actions.
+ *
+ * Detects two rapid taps within a configurable threshold and fires
+ * onDoubleTap. Single taps fire onSingleTap after a short debounce.
+ */
+
+import { useRef, useCallback } from 'react';
+
+interface UseDoubleTapOptions {
+ /** Max ms between taps to count as double-tap (default: 300) */
+ threshold?: number;
+ /** Called on single tap after debounce */
+ onSingleTap?: () => void;
+ /** Called on double tap */
+ onDoubleTap?: () => void;
+}
+
+export function useDoubleTap({
+ threshold = 300,
+ onSingleTap,
+ onDoubleTap,
+}: UseDoubleTapOptions) {
+ const lastTapRef = useRef(0);
+ const singleTimerRef = useRef
+ {data.label || '—'}
+ {data.sublabel && (
+ {data.sublabel}
+ )}
+
+
+ {/* Icon (optional) */}
+ {data.icon && {data.icon}}
+