Upload folder using huggingface_hub

app/frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo, useRef, Suspense, lazy } from 'react';
 import {
     Container,
     Box,
@@ -32,12 +32,12 @@ import {
 } from '@mui/material';
 import {
     Plus as AddIcon,
-    Upload as UploadIcon,
+    Database as UploadIcon,
     Play as PlayIcon,
     Square as StopIcon,
-    Activity as ActivityIcon,
+    Cpu as ActivityIcon,
     SlidersHorizontal as SlidersIcon,
-    Sparkles as SparklesIcon,
+    Music as SparklesIcon,
     RefreshCw as RefreshIcon,
     ChevronDown as ExpandMoreIcon,
     CloudDownload as CloudDownloadIcon,
@@ -45,7 +45,9 @@ import {
     Info as InfoIcon,
     BookOpen as BookOpenIcon,
     Moon as MoonIcon,
-    Sun as SunIcon
+    Sun as SunIcon,
+    Piano as PerformanceIcon,
+    AlertCircle as AlertIcon
 } from 'lucide-react';
 import api from './api';
 import HfAuthDialog from './components/HfAuthDialog';
@@ -60,8 +62,11 @@ import WelcomePage from './components/WelcomePage';
 import { formatDuration } from './utils/format';
 import theme, { appStyles, lightTheme } from './theme';
 
+const PerformancePanel = lazy(() => import('./components/PerformancePanel'));
+
 const COLOR_MODE_STORAGE_KEY = 'fragmenta-color-mode';
 const HIDE_WELCOME_PAGE_KEY = 'fragmenta-hide-welcome';
+const PERFORMANCE_ENABLED_KEY = 'fragmenta-performance-enabled';
 
 function App() {
     const [tabValue, setTabValue] = useState(0);
@@ -76,6 +81,18 @@ function App() {
     const [showWelcomePage, setShowWelcomePage] = useState(
         () => window.localStorage.getItem(HIDE_WELCOME_PAGE_KEY) !== 'true'
     );
+    const [performanceEnabled, setPerformanceEnabled] = useState(
+        () => window.localStorage.getItem(PERFORMANCE_ENABLED_KEY) === 'true'
+    );
+    const togglePerformance = () => {
+        setPerformanceEnabled((prev) => {
+            const next = !prev;
+            window.localStorage.setItem(PERFORMANCE_ENABLED_KEY, next ? 'true' : 'false');
+            if (!next && tabValue === 3) setTabValue(0);
+            if (next) setTabValue(3);
+            return next;
+        });
+    };
     const [authDialogOpen, setAuthDialogOpen] = useState(false);
     const [showInfoDialog, setShowInfoDialog] = useState(false);
     const [isOpeningDocumentation, setIsOpeningDocumentation] = useState(false);
@@ -202,6 +219,7 @@ function App() {
         [colorMode]
     );
     const isCompactLayout = useMediaQuery(appTheme.breakpoints.down('md'));
+    const isIconOnlySidebar = useMediaQuery(appTheme.breakpoints.between('md', 'lg'));
 
     useEffect(() => {
         setSelectedUnwrappedModel('');
@@ -1026,11 +1044,28 @@ function App() {
                                 onChange={handleTabChange}
                                 orientation={isCompactLayout ? 'horizontal' : 'vertical'}
                                 aria-label="main navigation tabs"
-                                sx={appStyles.navigationTabs(isCompactLayout)}
+                                sx={appStyles.navigationTabs(isCompactLayout, isIconOnlySidebar)}
                             >
-                                <Tab icon={<UploadIcon size={20} />} iconPosition="start" label="Data Processing" />
-                                <Tab icon={<ActivityIcon size={20} />} iconPosition="start" label="Training" />
-                                <Tab icon={<SparklesIcon size={20} />} iconPosition="start" label="Generation" />
+                                <Tab icon={<UploadIcon size={20} />} iconPosition={isIconOnlySidebar ? 'top' : 'start'} label={isIconOnlySidebar ? undefined : 'Data Processing'} />
+                                <Tab icon={<ActivityIcon size={20} />} iconPosition={isIconOnlySidebar ? 'top' : 'start'} label={isIconOnlySidebar ? undefined : 'Training'} />
+                                <Tab icon={<SparklesIcon size={20} />} iconPosition={isIconOnlySidebar ? 'top' : 'start'} label={isIconOnlySidebar ? undefined : 'Generation'} />
+                                <Tab
+                                    icon={<PerformanceIcon size={20} />}
+                                    iconPosition={isIconOnlySidebar ? 'top' : 'start'}
+                                    label={isIconOnlySidebar ? undefined : (
+                                        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                                            Performance
+                                            <Switch
+                                                size="small"
+                                                checked={performanceEnabled}
+                                                onChange={() => {}}
+                                                onClick={(e) => { e.stopPropagation(); togglePerformance(); }}
+                                                sx={{ transform: 'scale(0.75)' }}
+                                            />
+                                        </Box>
+                                    )}
+                                    sx={{ opacity: performanceEnabled ? 1 : 0.5, transition: 'opacity 0.2s' }}
+                                />
                             </Tabs>
                         </Paper>
 
@@ -1828,6 +1863,32 @@ function App() {
                                     </Grid>
                                 </Grid>
                             </TabPanel>
+
+                            <TabPanel value={tabValue} index={3}>
+                                {performanceEnabled ? (
+                                    <Suspense fallback={
+                                        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
+                                            <CircularProgress size={28} />
+                                        </Box>
+                                    }>
+                                        <PerformancePanel
+                                            selectedModel={selectedModel}
+                                            selectedUnwrappedModel={selectedUnwrappedModel}
+                                            availableModels={availableModels}
+                                            baseModels={baseModels}
+                                            onSelectModel={setSelectedModel}
+                                            onSelectUnwrappedModel={setSelectedUnwrappedModel}
+                                        />
+                                    </Suspense>
+                                ) : (
+                                    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', py: 8, gap: 2 }}>
+                                        <AlertIcon size={48} color="#FFB74D" />
+                                        <Typography variant="body1" color="textSecondary" align="center">
+                                            Performance mode is turned off. Toggle on from the sidebar if you wish to enter performance mode.
+                                        </Typography>
+                                    </Box>
+                                )}
+                            </TabPanel>
                         </Paper>
                     </Box>
 

app/frontend/src/components/PerformanceChannel.js

@@ -0,0 +1,265 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import {
+    Box,
+    Typography,
+    TextField,
+    IconButton,
+    Slider,
+    CircularProgress,
+    Tooltip,
+} from '@mui/material';
+import {
+    Play as PlayIcon,
+    Square as StopIcon,
+    Repeat as LoopIcon,
+    Sparkles as GenerateIcon,
+    Volume2 as VolumeIcon,
+    VolumeX as MuteIcon,
+} from 'lucide-react';
+import { performanceChannelStyles as styles } from '../theme';
+
+const CHANNEL_COLORS = [
+    '#35C2D4', '#9F8AE6', '#53C18A', '#E3A34B',
+    '#E36C61', '#F08AD2', '#5BA0F0', '#A8D86B',
+];
+
+const KNOB_DEFS = [
+    { key: 'gain', label: 'GAIN', min: 0, max: 1.5, step: 0.01, default: 0 },
+    { key: 'filter', label: 'LPF', min: 200, max: 18000, step: 1, default: 18000, log: true },
+    { key: 'delay', label: 'DLY', min: 0, max: 1.0, step: 0.01, default: 0.0 },
+    { key: 'reverb', label: 'REV', min: 0, max: 1.0, step: 0.01, default: 0.0 },
+];
+
+export default function PerformanceChannel({
+    index,
+    strip,
+    onGenerate,
+    canGenerate,
+    onMuteSoloChange,
+    onStateChange,
+    maxDuration = 47,
+}) {
+    const color = CHANNEL_COLORS[index % CHANNEL_COLORS.length];
+    const canvasRef = useRef(null);
+    const meterRef = useRef(null);
+    const meterRafRef = useRef(null);
+
+    const [prompt, setPrompt] = useState('');
+    const [duration, setDuration] = useState(8);
+    const [generating, setGenerating] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+    const [playing, setPlaying] = useState(false);
+    const [looping, setLooping] = useState(true);
+    const [muted, setMuted] = useState(false);
+    const [soloed, setSoloed] = useState(false);
+    const [knobs, setKnobs] = useState(() => {
+        const initial = Object.fromEntries(KNOB_DEFS.map(k => [k.key, k.default]));
+        initial.pan = 0;
+        return initial;
+    });
+
+    useEffect(() => {
+        const tick = () => {
+            const el = meterRef.current;
+            if (el && strip) {
+                const level = strip.getLevel();
+                el.style.width = `${Math.min(100, level * 140)}%`;
+            }
+            meterRafRef.current = requestAnimationFrame(tick);
+        };
+        meterRafRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (meterRafRef.current) cancelAnimationFrame(meterRafRef.current);
+        };
+    }, [strip]);
+
+    const drawWave = useCallback(() => {
+        if (strip && canvasRef.current) {
+            strip.drawWaveform(canvasRef.current, color);
+        }
+    }, [strip, color]);
+
+    useEffect(() => { drawWave(); }, [drawWave, loaded]);
+
+    useEffect(() => {
+        setDuration(prev => Math.min(prev, maxDuration));
+    }, [maxDuration]);
+
+    const handleGenerate = async () => {
+        if (!prompt.trim() || generating) return;
+        setGenerating(true);
+        try {
+            const blob = await onGenerate({ prompt, duration });
+            await strip.loadBlob(blob);
+            setLoaded(true);
+            onStateChange?.(index, { loaded: true });
+            requestAnimationFrame(drawWave);
+        } catch (err) {
+            console.error(`Channel ${index + 1} generate failed:`, err);
+        } finally {
+            setGenerating(false);
+        }
+    };
+
+    const handlePlay = () => {
+        if (!loaded) return;
+        strip.play(looping);
+        setPlaying(true);
+        onStateChange?.(index, { playing: true });
+    };
+
+    const handleStop = () => {
+        strip.stop();
+        setPlaying(false);
+        onStateChange?.(index, { playing: false });
+    };
+
+    const handleLoopToggle = () => {
+        setLooping(prev => {
+            const next = !prev;
+            strip.setLoop(next);
+            return next;
+        });
+    };
+
+    const handleMuteToggle = () => {
+        const next = !muted;
+        setMuted(next);
+        onMuteSoloChange(index, { mute: next });
+    };
+
+    const handleSoloToggle = () => {
+        const next = !soloed;
+        setSoloed(next);
+        onMuteSoloChange(index, { solo: next });
+    };
+
+    const handleKnob = (key, value) => {
+        setKnobs(prev => ({ ...prev, [key]: value }));
+        if (key === 'gain') strip.setUserGain(value);
+        else if (key === 'pan') strip.setPan(value);
+        else if (key === 'filter') strip.setFilter(value);
+        else if (key === 'delay') strip.setDelayMix(value);
+        else if (key === 'reverb') strip.setReverbMix(value);
+    };
+
+    return (
+        <Box sx={styles.strip(color, playing)}>
+            <Box sx={styles.stripHeader(color)}>
+                <Box sx={styles.channelBadge(color)}>{String(index + 1).padStart(2, '0')}</Box>
+                <Box sx={styles.muteSoloRow}>
+                    <Tooltip title="Mute">
+                        <IconButton size="small" onClick={handleMuteToggle} sx={styles.muteBtn(muted)}>M</IconButton>
+                    </Tooltip>
+                    <Tooltip title="Solo">
+                        <IconButton size="small" onClick={handleSoloToggle} sx={styles.soloBtn(soloed)}>S</IconButton>
+                    </Tooltip>
+                </Box>
+            </Box>
+
+            <Box sx={styles.promptBox}>
+                <TextField
+                    placeholder="prompt…"
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    multiline
+                    minRows={2}
+                    maxRows={3}
+                    size="small"
+                    fullWidth
+                    sx={styles.promptField}
+                    disabled={generating}
+                />
+                <Box sx={styles.durationRow}>
+                    <Typography variant="caption" sx={styles.durationLabel}>{duration.toFixed(0)}s</Typography>
+                    <Slider
+                        value={duration}
+                        onChange={(_, v) => setDuration(v)}
+                        min={2}
+                        max={maxDuration}
+                        step={1}
+                        size="small"
+                        sx={styles.durationSlider(color)}
+                    />
+                </Box>
+                <IconButton
+                    onClick={handleGenerate}
+                    disabled={!canGenerate || !prompt.trim() || generating}
+                    sx={styles.generateBtn(color)}
+                    size="small"
+                >
+                    {generating ? <CircularProgress size={16} sx={{ color }} /> : <GenerateIcon size={16} />}
+                </IconButton>
+            </Box>
+
+            <Box sx={styles.waveformWrap}>
+                <canvas
+                    ref={canvasRef}
+                    width={140}
+                    height={42}
+                    style={{ width: '100%', height: 42, display: 'block' }}
+                />
+                {!loaded && (
+                    <Typography variant="caption" sx={styles.waveformPlaceholder}>
+                        empty
+                    </Typography>
+                )}
+            </Box>
+
+            <Box sx={{ px: 1, py: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
+                    <Box component="span" sx={{ fontSize: '0.53rem', color: 'text.secondary', letterSpacing: '0.06em', minWidth: 28 }}>PAN</Box>
+                    <Slider
+                        value={knobs.pan ?? 0}
+                        onChange={(_, v) => handleKnob('pan', v)}
+                        min={-1}
+                        max={1}
+                        step={0.01}
+                        size="small"
+                        sx={{ flex: 1 }}
+                    />
+                </Box>
+            </Box>
+
+            <Box sx={styles.knobsGrid}>
+                {KNOB_DEFS.map((k) => (
+                    <Box key={k.key} sx={styles.knobCell}>
+                        <Slider
+                            orientation="vertical"
+                            value={knobs[k.key]}
+                            onChange={(_, v) => handleKnob(k.key, v)}
+                            min={k.min}
+                            max={k.max}
+                            step={k.step}
+                            size="small"
+                            sx={styles.knobSlider(color)}
+                        />
+                        <Box component="span" sx={styles.knobLabel}>{k.label}</Box>
+                    </Box>
+                ))}
+            </Box>
+
+            <Box sx={styles.transportRow}>
+                <IconButton
+                    onClick={playing ? handleStop : handlePlay}
+                    disabled={!loaded}
+                    sx={styles.transportBtn(color, playing)}
+                    size="small"
+                >
+                    {playing ? <StopIcon size={16} /> : <PlayIcon size={16} />}
+                </IconButton>
+                <IconButton
+                    onClick={handleLoopToggle}
+                    sx={styles.loopBtn(color, looping)}
+                    size="small"
+                >
+                    <LoopIcon size={14} />
+                </IconButton>
+                <Box sx={styles.meterTrack}>
+                    <Box ref={meterRef} sx={styles.meterFill(color)} />
+                </Box>
+            </Box>
+
+        </Box>
+    );
+}

app/frontend/src/components/PerformancePanel.js

@@ -0,0 +1,338 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+    Box,
+    Typography,
+    Paper,
+    Slider,
+    Button,
+    Alert,
+    FormControl,
+    Select,
+    MenuItem,
+} from '@mui/material';
+import {
+    Piano as PerformanceIcon,
+    Play as PlayAllIcon,
+    Square as StopAllIcon,
+} from 'lucide-react';
+import api from '../api';
+import PerformanceChannel from './PerformanceChannel';
+import { PerformanceEngine } from '../utils/performanceAudio';
+import { performancePanelStyles as styles } from '../theme';
+
+const CHANNEL_COUNT = 4;
+const MASTER_COLOR = '#35C2D4';
+const MASTER_DB_MIN = -60;
+const MASTER_DB_MAX = 0;
+const MASTER_DB_DEFAULT = -1;
+const METER_FLOOR_DB = -60;
+
+const dbToGain = (db) => (db <= MASTER_DB_MIN ? 0 : Math.pow(10, db / 20));
+const ampToDb = (amp) => (amp <= 0 ? -Infinity : 20 * Math.log10(amp));
+const formatDb = (db) => {
+    if (!isFinite(db) || db <= METER_FLOOR_DB) return '−∞';
+    if (Math.abs(db) < 0.05) return '0.0';
+    return db.toFixed(1);
+};
+
+export default function PerformancePanel({
+    selectedModel,
+    selectedUnwrappedModel,
+    availableModels = [],
+    baseModels = [],
+    onSelectModel,
+    onSelectUnwrappedModel,
+}) {
+    const engineRef = useRef(null);
+    const meterFillRef = useRef(null);
+    const peakHoldRef = useRef({ db: METER_FLOOR_DB, decayedAt: performance.now() });
+    const meterRafRef = useRef(null);
+    const [engineReady, setEngineReady] = useState(false);
+    const [masterDb, setMasterDb] = useState(MASTER_DB_DEFAULT);
+    const [error, setError] = useState(null);
+    const [peakLabelDb, setPeakLabelDb] = useState(METER_FLOOR_DB);
+    const [channelStates, setChannelStates] = useState(() =>
+        Array.from({ length: CHANNEL_COUNT }, () => ({ loaded: false, playing: false }))
+    );
+
+    if (!engineRef.current) {
+        engineRef.current = new PerformanceEngine(CHANNEL_COUNT);
+        engineRef.current.setMasterGain(dbToGain(MASTER_DB_DEFAULT));
+    }
+
+    useEffect(() => {
+        setEngineReady(true);
+        const engine = engineRef.current;
+
+        const tick = () => {
+            const now = performance.now();
+            const peakAmp = engine ? engine.getMasterPeak() : 0;
+            const instantDb = ampToDb(peakAmp);
+            const hold = peakHoldRef.current;
+            const elapsed = now - hold.decayedAt;
+            let displayDb = hold.db - (elapsed / 1000) * 24;
+            if (instantDb > displayDb) displayDb = instantDb;
+            if (displayDb < METER_FLOOR_DB) displayDb = METER_FLOOR_DB;
+            hold.db = displayDb;
+            hold.decayedAt = now;
+
+            const fill = meterFillRef.current;
+            if (fill) {
+                const pct = ((displayDb - METER_FLOOR_DB) / -METER_FLOOR_DB) * 100;
+                fill.style.height = `${Math.max(0, Math.min(100, pct))}%`;
+            }
+            if (Math.abs(displayDb - peakLabelDb) > 0.5) {
+                setPeakLabelDb(displayDb);
+            }
+            meterRafRef.current = requestAnimationFrame(tick);
+        };
+        meterRafRef.current = requestAnimationFrame(tick);
+
+        return () => {
+            if (meterRafRef.current) cancelAnimationFrame(meterRafRef.current);
+            engine.dispose();
+            engineRef.current = null;
+        };
+    }, []);
+
+    const handleMasterChange = (_, value) => {
+        setMasterDb(value);
+        engineRef.current?.setMasterGain(dbToGain(value));
+    };
+
+    const handlePlayAll = () => engineRef.current?.playAll(true);
+    const handleStopAll = () => engineRef.current?.stopAll();
+
+    const generateForChannel = async ({ prompt, duration }) => {
+        setError(null);
+        if (!selectedModel) {
+            const msg = 'Pick a model first.';
+            setError(msg);
+            throw new Error(msg);
+        }
+        const requestData = {
+            prompt,
+            duration,
+            cfg_scale: 7.0,
+            seed: Math.floor(Math.random() * 0xffffffff),
+            model_name: selectedModel,
+            ...(selectedUnwrappedModel ? { unwrapped_model_path: selectedUnwrappedModel } : {}),
+        };
+        const response = await api.post('/api/generate', requestData, { responseType: 'blob' });
+        return response.data;
+    };
+
+    const handleChannelStateChange = (index, change) => {
+        setChannelStates(prev => {
+            const next = [...prev];
+            next[index] = { ...next[index], ...change };
+            return next;
+        });
+    };
+
+    const anyLoaded = channelStates.some(s => s.loaded);
+    const anyPlaying = channelStates.some(s => s.playing);
+    const maxDuration = selectedModel && selectedModel.includes('small') ? 10 : 47;
+
+    const handleMuteSoloChange = (index, change) => {
+        const engine = engineRef.current;
+        if (!engine) return;
+        if ('mute' in change) engine.setMute(index, change.mute);
+        if ('solo' in change) engine.setSolo(index, change.solo);
+    };
+
+    const channels = useMemo(() => {
+        if (!engineReady || !engineRef.current) return [];
+        return engineRef.current.channels;
+    }, [engineReady]);
+
+    const handleModelChange = (event) => {
+        const value = event.target.value;
+        if (onSelectModel) onSelectModel(value);
+        if (onSelectUnwrappedModel) onSelectUnwrappedModel('');
+    };
+
+    const handleCheckpointChange = (event) => {
+        if (onSelectUnwrappedModel) onSelectUnwrappedModel(String(event.target.value));
+    };
+
+    const selectedFineTuned = selectedModel
+        ? availableModels.find((m) => m.name === selectedModel)
+        : null;
+    const unwrappedModels = selectedFineTuned?.unwrapped_models || [];
+    const checkpointValue = unwrappedModels
+        .map((u) => String(u.path))
+        .includes(selectedUnwrappedModel)
+        ? selectedUnwrappedModel
+        : '';
+
+    return (
+        <Box sx={styles.root}>
+            <Paper sx={styles.headerCard}>
+                <Box sx={styles.headerLeft}>
+                    <Box sx={styles.titleRow}>
+                        <PerformanceIcon size={22} />
+                        <Typography variant="h6" sx={styles.title}>Fragmenta Performance</Typography>
+                    </Box>
+                    <Typography variant="caption" sx={styles.subtitle}>
+                        4-voice diffusion sampler
+                    </Typography>
+                </Box>
+
+                <Box sx={styles.headerPickers}>
+                    <FormControl size="small" sx={styles.headerModelPicker}>
+                        <Select
+                            value={selectedModel || ''}
+                            onChange={handleModelChange}
+                            displayEmpty
+                            renderValue={(value) => {
+                                if (!value) return <em style={{ opacity: 0.6 }}>Select a model</em>;
+                                const base = baseModels.find((m) => m.name === value);
+                                if (base) return base.displayName || base.name;
+                                return value;
+                            }}
+                        >
+                            {baseModels.length > 0 && (
+                                <MenuItem disabled>
+                                    <Typography variant="caption" color="textSecondary">
+                                        ── Base Models ──
+                                    </Typography>
+                                </MenuItem>
+                            )}
+                            {baseModels.map((model) => (
+                                <MenuItem
+                                    key={model.name}
+                                    value={String(model.name)}
+                                    disabled={!model.downloaded}
+                                >
+                                    <Typography variant="body2">
+                                        {model.displayName || model.name}
+                                    </Typography>
+                                </MenuItem>
+                            ))}
+                            {availableModels.length > 0 && (
+                                <MenuItem disabled>
+                                    <Typography variant="caption" color="textSecondary">
+                                        ── Fine-tuned Models ──
+                                    </Typography>
+                                </MenuItem>
+                            )}
+                            {availableModels.map((model) => (
+                                <MenuItem key={model.name} value={String(model.name)}>
+                                    <Typography variant="body2">{model.name}</Typography>
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+
+                    {unwrappedModels.length > 0 && (
+                        <FormControl size="small" sx={styles.headerCheckpointPicker}>
+                            <Select
+                                value={checkpointValue}
+                                onChange={handleCheckpointChange}
+                                displayEmpty
+                                renderValue={(value) => {
+                                    if (!value) return <em style={{ opacity: 0.6 }}>Select checkpoint</em>;
+                                    const found = unwrappedModels.find((u) => String(u.path) === value);
+                                    return found ? found.name : value;
+                                }}
+                            >
+                                {unwrappedModels.map((unwrapped, index) => (
+                                    <MenuItem key={index} value={String(unwrapped.path)}>
+                                        <Box>
+                                            <Typography variant="body2">{unwrapped.name}</Typography>
+                                            {unwrapped.size_mb && (
+                                                <Typography variant="caption" color="textSecondary">
+                                                    {unwrapped.size_mb} MB
+                                                </Typography>
+                                            )}
+                                        </Box>
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    )}
+                </Box>
+            </Paper>
+
+            {error && (
+                <Alert severity="warning" sx={styles.errorAlert} onClose={() => setError(null)}>
+                    {error}
+                </Alert>
+            )}
+
+            <Box sx={styles.channelsRow}>
+                <Box sx={styles.channelsGrid}>
+                    {channels.map((strip, i) => (
+                        <PerformanceChannel
+                            key={i}
+                            index={i}
+                            strip={strip}
+                            onGenerate={generateForChannel}
+                            canGenerate={Boolean(selectedModel)}
+                            onMuteSoloChange={handleMuteSoloChange}
+                            onStateChange={handleChannelStateChange}
+                            maxDuration={maxDuration}
+                        />
+                    ))}
+                </Box>
+
+                <Box sx={styles.masterStrip(MASTER_COLOR)}>
+                    <Box sx={styles.masterHeader(MASTER_COLOR)}>
+                        <Box sx={styles.masterBadge(MASTER_COLOR)}>MASTER</Box>
+                    </Box>
+
+                    <Box sx={styles.masterFaderWrap}>
+                        <Box sx={styles.masterMeterTrack}>
+                            <Box ref={meterFillRef} sx={styles.masterMeterFill(MASTER_COLOR)} />
+                            <Box sx={styles.masterMeterSegments} />
+                        </Box>
+                        <Slider
+                            orientation="vertical"
+                            value={masterDb}
+                            onChange={handleMasterChange}
+                            min={MASTER_DB_MIN}
+                            max={MASTER_DB_MAX}
+                            step={0.1}
+                            sx={styles.masterFader(MASTER_COLOR)}
+                        />
+                    </Box>
+
+                    <Box sx={styles.masterReadouts}>
+                        <Typography variant="caption" sx={styles.masterValue}>
+                            dBFS {formatDb(masterDb)}
+                        </Typography>
+                        <Typography variant="caption" sx={styles.masterPeakValue}>
+                            pk {formatDb(peakLabelDb)}
+                        </Typography>
+                    </Box>
+
+                    <Box sx={styles.masterTransport}>
+                        <Button
+                            size="small"
+                            variant="outlined"
+                            startIcon={<PlayAllIcon size={14} />}
+                            onClick={handlePlayAll}
+                            disabled={!anyLoaded}
+                            sx={styles.masterBtn(MASTER_COLOR, 'play')}
+                            fullWidth
+                        >
+                            Play All
+                        </Button>
+                        <Button
+                            size="small"
+                            variant="outlined"
+                            startIcon={<StopAllIcon size={14} />}
+                            onClick={handleStopAll}
+                            disabled={!anyPlaying}
+                            sx={styles.masterBtn(MASTER_COLOR, 'stop')}
+                            fullWidth
+                        >
+                            Stop All
+                        </Button>
+                    </Box>
+                </Box>
+            </Box>
+        </Box>
+    );
+}

app/frontend/src/theme.js

@@ -518,6 +518,14 @@ export const lightTheme = createTheme(theme, {
         text: {
             primary: '#0F172A',
             secondary: '#475569',
+            disabled: 'rgba(0, 0, 0, 0.38)',
+        },
+        action: {
+            active: 'rgba(0, 0, 0, 0.54)',
+            hover: 'rgba(0, 0, 0, 0.04)',
+            selected: 'rgba(0, 0, 0, 0.08)',
+            disabled: 'rgba(0, 0, 0, 0.26)',
+            disabledBackground: 'rgba(0, 0, 0, 0.12)',
         },
         divider: 'rgba(15, 23, 42, 0.14)',
         error: {
@@ -1028,7 +1036,7 @@ export const appStyles = {
         minHeight: 0,
     },
     navPaper: {
-        width: { xs: '100%', md: 220 },
+        width: { xs: '100%', md: 64, lg: 220 },
         backgroundColor: 'background.paper',
         borderRadius: 2.5,
         overflow: 'hidden',
@@ -1036,7 +1044,7 @@ export const appStyles = {
         flexDirection: 'column',
         height: '100%',
     },
-    navigationTabs: (isCompactLayout) => ({
+    navigationTabs: (isCompactLayout, isIconOnly = false) => ({
         height: isCompactLayout ? 'auto' : '100%',
         p: { xs: 0.5, sm: 1 },
         gap: { xs: 0.25, sm: 0.5 },
@@ -1045,17 +1053,18 @@ export const appStyles = {
         },
         '& .MuiTab-root': {
             alignItems: 'center',
-            justifyContent: isCompactLayout ? 'center' : 'flex-start',
-            textAlign: isCompactLayout ? 'center' : 'left',
+            justifyContent: (isCompactLayout || isIconOnly) ? 'center' : 'flex-start',
+            textAlign: (isCompactLayout || isIconOnly) ? 'center' : 'left',
             minHeight: { xs: 40, sm: 46 },
             fontSize: { xs: '0.78rem', sm: '0.86rem' },
             fontWeight: 500,
             textTransform: 'none',
             color: 'text.secondary',
             borderRadius: 2,
-            px: { xs: 1, sm: 1.5 },
+            px: isIconOnly ? 0 : { xs: 1, sm: 1.5 },
             py: { xs: 0.75, sm: 1 },
             mx: isCompactLayout ? 0.25 : 0,
+            minWidth: isIconOnly ? 0 : undefined,
             '& .MuiTab-iconWrapper': {
                 marginBottom: '0 !important',
             },
@@ -2110,4 +2119,416 @@ export const lossChartStyles = {
     },
 };
 
+export const performancePanelStyles = {
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+        width: '100%',
+        minHeight: 0,
+    },
+    headerCard: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        p: { xs: 1.25, sm: 1.75 },
+        borderRadius: 2.5,
+        border: '1px solid',
+        borderColor: 'divider',
+        background: 'linear-gradient(135deg, rgba(53, 194, 212, 0.08) 0%, rgba(159, 138, 230, 0.06) 100%)',
+        flexWrap: { xs: 'wrap', md: 'nowrap' },
+    },
+    headerLeft: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.25,
+        minWidth: 200,
+        flex: '0 0 auto',
+    },
+    titleRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        color: 'primary.main',
+    },
+    title: {
+        fontWeight: 400,
+        letterSpacing: '0.02em',
+    },
+    subtitle: {
+        color: 'text.secondary',
+        fontSize: '0.72rem',
+    },
+    headerPickers: {
+        display: 'flex',
+        gap: 1,
+        flex: 1,
+        minWidth: 0,
+        flexWrap: { xs: 'wrap', sm: 'nowrap' },
+    },
+    headerModelPicker: {
+        flex: 1,
+        minWidth: 200,
+        '& .MuiOutlinedInput-root': { borderRadius: 2 },
+    },
+    headerCheckpointPicker: {
+        flex: 1,
+        minWidth: 180,
+        '& .MuiOutlinedInput-root': { borderRadius: 2 },
+    },
+    errorAlert: {
+        borderRadius: 2,
+    },
+    channelsRow: {
+        display: 'flex',
+        gap: 1.5,
+        alignItems: 'stretch',
+        flexWrap: { xs: 'wrap', md: 'nowrap' },
+    },
+    channelsGrid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, minmax(150px, 1fr))',
+        gap: 1.25,
+        flex: 1,
+        minWidth: 0,
+    },
+    masterStrip: (color) => (theme) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+        p: 1.25,
+        borderRadius: 2.5,
+        border: `1px solid ${color}55`,
+        background: theme.palette.mode === 'dark'
+            ? `linear-gradient(160deg, ${color}14 0%, rgba(13, 20, 31, 0.94) 70%)`
+            : `linear-gradient(160deg, ${color}14 0%, ${theme.palette.background.paper} 70%)`,
+        boxShadow: theme.palette.mode === 'dark'
+            ? `0 8px 22px rgba(4, 8, 14, 0.44), inset 0 0 0 1px ${color}22`
+            : `0 2px 8px rgba(0,0,0,0.1), inset 0 0 0 1px ${color}22`,
+        width: { xs: '100%', md: 160 },
+        flex: { xs: '1 1 100%', md: '0 0 160px' },
+        minHeight: 0,
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+    }),
+    masterHeader: (color) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 0.5,
+        borderBottom: `1px solid ${color}33`,
+        pb: 0.75,
+        color,
+    }),
+    masterBadge: (color) => ({
+        fontSize: '0.72rem',
+        fontWeight: 600,
+        color,
+        letterSpacing: '0.14em',
+        px: 0.75,
+        py: 0.25,
+        borderRadius: 1,
+        backgroundColor: `${color}1F`,
+        border: `1px solid ${color}55`,
+    }),
+    masterFaderWrap: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        gap: 1,
+        py: 1.25,
+        minHeight: 0,
+    },
+    masterMeterTrack: (theme) => ({
+        width: 10,
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.7)' : 'rgba(0, 0, 0, 0.08)',
+        borderRadius: 0.75,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'flex-end',
+    }),
+    masterMeterFill: (color) => ({
+        width: '100%',
+        height: '0%',
+        background: `linear-gradient(0deg, ${color} 0%, ${color}DD 60%, #E3A34B 80%, #E36C61 100%)`,
+        transition: 'height 0.05s linear',
+    }),
+    masterFader: (color) => (theme) => ({
+        height: '100%',
+        color,
+        '& .MuiSlider-thumb': { width: 16, height: 16 },
+        '& .MuiSlider-rail': { opacity: 0.3, width: 4 },
+        '& .MuiSlider-track': { display: 'none' },
+        '& .MuiSlider-mark': {
+            width: 6,
+            height: 1,
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(157, 169, 188, 0.55)' : 'rgba(0, 0, 0, 0.25)',
+            opacity: 1,
+        },
+        '& .MuiSlider-markActive': {
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(157, 169, 188, 0.55)' : 'rgba(0, 0, 0, 0.25)',
+        },
+    }),
+    masterReadouts: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.25,
+        alignItems: 'center',
+    },
+    masterValue: {
+        textAlign: 'center',
+        color: 'primary.main',
+        fontSize: '0.68rem',
+        letterSpacing: '0.04em',
+    },
+    masterPeakValue: {
+        textAlign: 'center',
+        color: 'text.disabled',
+        fontSize: '0.58rem',
+        letterSpacing: '0.04em',
+    },
+    masterTransport: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.5,
+        pt: 0.75,
+        borderTop: '1px solid',
+        borderTopColor: 'divider',
+    },
+    masterBtn: (color, variant) => (theme) => ({
+        textTransform: 'none',
+        borderRadius: 1.5,
+        fontSize: '0.72rem',
+        py: 0.5,
+        ...(variant === 'play'
+            ? {
+                color,
+                borderColor: theme.palette.mode === 'dark' ? `${color}66` : `${color}BB`,
+                backgroundColor: `${color}14`,
+                '&:hover': { backgroundColor: `${color}26`, borderColor: color },
+            }
+            : {
+                color: '#E36C61',
+                borderColor: theme.palette.mode === 'dark' ? 'rgba(227, 108, 97, 0.5)' : 'rgba(227, 108, 97, 0.8)',
+                '&:hover': { backgroundColor: 'rgba(227, 108, 97, 0.12)', borderColor: '#E36C61' },
+            }),
+    }),
+};
+
+export const performanceChannelStyles = {
+    strip: (color, playing) => (theme) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        p: 1.25,
+        borderRadius: 2.5,
+        border: '1px solid',
+        borderColor: playing ? color : theme.palette.divider,
+        background: playing
+            ? `linear-gradient(160deg, ${color}1F 0%, ${theme.palette.background.paper} 60%)`
+            : theme.palette.background.paper,
+        boxShadow: playing
+            ? `0 0 0 1px ${color}66, 0 8px 22px ${theme.palette.mode === 'dark' ? 'rgba(4, 8, 14, 0.5)' : 'rgba(0,0,0,0.15)'}`
+            : `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(4, 8, 14, 0.36)' : 'rgba(0,0,0,0.08)'}`,
+        transition: 'box-shadow 0.2s ease, border-color 0.2s ease, background 0.3s ease',
+        height: '100%',
+        minWidth: 150,
+    }),
+    stripHeader: (color) => ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: `1px solid ${color}33`,
+        pb: 0.75,
+    }),
+    channelBadge: (color) => ({
+        fontFamily: 'inherit',
+        fontSize: '0.78rem',
+        fontWeight: 600,
+        color,
+        letterSpacing: '0.08em',
+        px: 0.75,
+        py: 0.25,
+        borderRadius: 1,
+        backgroundColor: `${color}1F`,
+        border: `1px solid ${color}55`,
+    }),
+    muteSoloRow: {
+        display: 'flex',
+        gap: 0.5,
+    },
+    muteBtn: (active) => ({
+        width: 22,
+        height: 22,
+        fontSize: '0.65rem',
+        fontWeight: 700,
+        borderRadius: 1,
+        color: active ? '#fff' : 'text.secondary',
+        backgroundColor: active ? 'rgba(227, 108, 97, 0.85)' : 'transparent',
+        border: '1px solid',
+        borderColor: active ? 'rgba(227, 108, 97, 0.85)' : 'divider',
+        '&:hover': {
+            backgroundColor: active ? 'rgba(227, 108, 97, 0.95)' : 'rgba(227, 108, 97, 0.18)',
+        },
+    }),
+    soloBtn: (active) => ({
+        width: 22,
+        height: 22,
+        fontSize: '0.65rem',
+        fontWeight: 700,
+        borderRadius: 1,
+        color: active ? '#0c1018' : 'text.secondary',
+        backgroundColor: active ? 'rgba(227, 163, 75, 0.95)' : 'transparent',
+        border: '1px solid',
+        borderColor: active ? 'rgba(227, 163, 75, 0.95)' : 'divider',
+        '&:hover': {
+            backgroundColor: active ? 'rgba(227, 163, 75, 1)' : 'rgba(227, 163, 75, 0.2)',
+        },
+    }),
+    promptBox: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0.5,
+    },
+    promptField: (theme) => ({
+        '& .MuiOutlinedInput-root': {
+            fontSize: '0.75rem',
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.5)' : 'rgba(0, 0, 0, 0.04)',
+            borderRadius: 1.5,
+            '& textarea': { lineHeight: 1.3 },
+        },
+        '& fieldset': { borderColor: theme.palette.divider },
+    }),
+    durationRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.75,
+    },
+    durationLabel: {
+        fontFamily: 'inherit',
+        fontSize: '0.65rem',
+        color: 'text.secondary',
+        minWidth: 22,
+    },
+    durationSlider: (color) => ({
+        flex: 1,
+        color,
+        '& .MuiSlider-thumb': { width: 10, height: 10 },
+        '& .MuiSlider-rail': { opacity: 0.3 },
+    }),
+    generateBtn: (color) => (theme) => ({
+        alignSelf: 'flex-end',
+        width: 28,
+        height: 28,
+        borderRadius: 1.5,
+        color,
+        border: `1px solid ${color}55`,
+        backgroundColor: `${color}14`,
+        '&:hover': { backgroundColor: `${color}26` },
+        '&.Mui-disabled': theme.palette.mode === 'dark' ? { opacity: 0.35 } : {},
+    }),
+    waveformWrap: (theme) => ({
+        position: 'relative',
+        height: 42,
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.6)' : 'rgba(0, 0, 0, 0.06)',
+        borderRadius: 1.5,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        overflow: 'hidden',
+    }),
+    waveformPlaceholder: {
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'text.disabled',
+        fontFamily: 'inherit',
+        fontSize: '0.65rem',
+        letterSpacing: '0.1em',
+        pointerEvents: 'none',
+    },
+    knobsGrid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: 0.5,
+        py: 0.5,
+    },
+    knobCell: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 0.25,
+        height: 70,
+    },
+    knobSlider: (color) => ({
+        height: 50,
+        color,
+        '& .MuiSlider-thumb': { width: 10, height: 10 },
+        '& .MuiSlider-rail': { opacity: 0.3, width: 2 },
+        '& .MuiSlider-track': { width: 2, border: 'none' },
+    }),
+    knobLabel: {
+        display: 'block',
+        fontFamily: 'inherit',
+        fontSize: '0.53rem',
+        color: 'text.secondary',
+        letterSpacing: '0.06em',
+        mt: 0.75,
+    },
+    transportRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        mt: 'auto',
+        pt: 0.75,
+        borderTop: '1px solid',
+        borderTopColor: 'divider',
+    },
+    transportBtn: (color, playing) => (theme) => ({
+        width: 26,
+        height: 26,
+        borderRadius: 1.5,
+        color: playing ? '#0c1018' : color,
+        backgroundColor: playing ? color : `${color}14`,
+        border: `1px solid ${color}55`,
+        '&:hover': { backgroundColor: playing ? color : `${color}28` },
+        '&.Mui-disabled': theme.palette.mode === 'dark' ? { opacity: 0.3 } : {},
+    }),
+    loopBtn: (color, active) => ({
+        width: 22,
+        height: 22,
+        borderRadius: 1,
+        color: active ? color : 'text.secondary',
+        backgroundColor: active ? `${color}1F` : 'transparent',
+        border: '1px solid',
+        borderColor: active ? `${color}55` : 'divider',
+        '&:hover': { backgroundColor: `${color}1F` },
+    }),
+    meterTrack: (theme) => ({
+        flex: 1,
+        height: 12,
+        mt: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.7)' : 'rgba(0, 0, 0, 0.08)',
+        borderRadius: 0.75,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+    }),
+    meterFill: (color) => ({
+        width: '0%',
+        height: '100%',
+        background: `linear-gradient(90deg, ${color} 0%, ${color}AA 70%, #E36C61 100%)`,
+        transition: 'width 0.05s linear',
+    }),
+};
+
 export default theme;

app/frontend/src/utils/performanceAudio.js

@@ -0,0 +1,256 @@
+let sharedCtx = null;
+
+export function getAudioContext() {
+    if (!sharedCtx) {
+        sharedCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    if (sharedCtx.state === 'suspended') {
+        sharedCtx.resume();
+    }
+    return sharedCtx;
+}
+
+let sharedImpulse = null;
+function getImpulse(ctx, duration = 2.6, decay = 3.0) {
+    if (sharedImpulse && sharedImpulse.sampleRate === ctx.sampleRate) {
+        return sharedImpulse;
+    }
+    const length = Math.floor(ctx.sampleRate * duration);
+    const buf = ctx.createBuffer(2, length, ctx.sampleRate);
+    for (let ch = 0; ch < 2; ch++) {
+        const data = buf.getChannelData(ch);
+        for (let i = 0; i < length; i++) {
+            data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, decay);
+        }
+    }
+    sharedImpulse = buf;
+    return buf;
+}
+
+export class ChannelStrip {
+    constructor(masterBus) {
+        const ctx = getAudioContext();
+        this.ctx = ctx;
+        this.buffer = null;
+        this.source = null;
+        this.isPlaying = false;
+        this.isLooping = false;
+        this.isMuted = false;
+        this.isSoloed = false;
+
+        this.filter = ctx.createBiquadFilter();
+        this.filter.type = 'lowpass';
+        this.filter.frequency.value = 18000;
+        this.filter.Q.value = 0.7;
+
+        this.dryGain = ctx.createGain();
+        this.dryGain.gain.value = 1.0;
+
+        this.delayNode = ctx.createDelay(2.0);
+        this.delayNode.delayTime.value = 0.32;
+        this.delayFeedback = ctx.createGain();
+        this.delayFeedback.gain.value = 0.42;
+        this.delayWet = ctx.createGain();
+        this.delayWet.gain.value = 0.0;
+
+        this.reverbNode = ctx.createConvolver();
+        this.reverbNode.buffer = getImpulse(ctx);
+        this.reverbWet = ctx.createGain();
+        this.reverbWet.gain.value = 0.0;
+
+        this.channelGain = ctx.createGain();
+        this.channelGain.gain.value = 0;
+
+        this.pan = ctx.createStereoPanner();
+        this.pan.pan.value = 0;
+
+        this.analyser = ctx.createAnalyser();
+        this.analyser.fftSize = 256;
+        this.analyserData = new Uint8Array(this.analyser.frequencyBinCount);
+
+        this.filter.connect(this.dryGain);
+        this.dryGain.connect(this.channelGain);
+
+        this.filter.connect(this.delayNode);
+        this.delayNode.connect(this.delayFeedback);
+        this.delayFeedback.connect(this.delayNode);
+        this.delayNode.connect(this.delayWet);
+        this.delayWet.connect(this.channelGain);
+
+        this.filter.connect(this.reverbNode);
+        this.reverbNode.connect(this.reverbWet);
+        this.reverbWet.connect(this.channelGain);
+
+        this.channelGain.connect(this.pan);
+        this.pan.connect(this.analyser);
+        this.analyser.connect(masterBus);
+    }
+
+    async loadBlob(blob) {
+        this.stop();
+        const arrayBuffer = await blob.arrayBuffer();
+        this.buffer = await this.ctx.decodeAudioData(arrayBuffer);
+    }
+
+    play(loop = this.isLooping) {
+        if (!this.buffer) return;
+        this.stop();
+        this.isLooping = loop;
+        const src = this.ctx.createBufferSource();
+        src.buffer = this.buffer;
+        src.loop = loop;
+        src.connect(this.filter);
+        src.onended = () => {
+            if (this.source === src) {
+                this.source = null;
+                this.isPlaying = false;
+            }
+        };
+        src.start(0);
+        this.source = src;
+        this.isPlaying = true;
+    }
+
+    stop() {
+        if (this.source) {
+            try { this.source.stop(0); } catch (_) { /* already stopped */ }
+            this.source.disconnect();
+            this.source = null;
+        }
+        this.isPlaying = false;
+    }
+
+    setGain(value) { this.channelGain.gain.setTargetAtTime(value, this.ctx.currentTime, 0.01); }
+    setFilter(hz) { this.filter.frequency.setTargetAtTime(hz, this.ctx.currentTime, 0.01); }
+    setDelayMix(value) { this.delayWet.gain.setTargetAtTime(value, this.ctx.currentTime, 0.02); }
+    setReverbMix(value) { this.reverbWet.gain.setTargetAtTime(value, this.ctx.currentTime, 0.05); }
+    setPan(value) { this.pan.pan.setTargetAtTime(value, this.ctx.currentTime, 0.01); }
+    setLoop(value) {
+        this.isLooping = value;
+        if (this.source) this.source.loop = value;
+    }
+
+    applyMuteSolo(anySoloed) {
+        const audible = !this.isMuted && (!anySoloed || this.isSoloed);
+        this.channelGain.gain.setTargetAtTime(audible ? this._lastUserGain ?? 0 : 0, this.ctx.currentTime, 0.01);
+    }
+
+    setUserGain(value) {
+        this._lastUserGain = value;
+        this.channelGain.gain.setTargetAtTime(value, this.ctx.currentTime, 0.01);
+    }
+
+    getLevel() {
+        if (!this.isPlaying) return 0;
+        this.analyser.getByteTimeDomainData(this.analyserData);
+        let peak = 0;
+        for (let i = 0; i < this.analyserData.length; i++) {
+            const v = Math.abs(this.analyserData[i] - 128) / 128;
+            if (v > peak) peak = v;
+        }
+        return peak;
+    }
+
+    drawWaveform(canvas, color) {
+        if (!canvas || !this.buffer) return;
+        const ctx2d = canvas.getContext('2d');
+        const w = canvas.width;
+        const h = canvas.height;
+        ctx2d.clearRect(0, 0, w, h);
+        const data = this.buffer.getChannelData(0);
+        const step = Math.max(1, Math.floor(data.length / w));
+        ctx2d.strokeStyle = color || '#35C2D4';
+        ctx2d.lineWidth = 1;
+        ctx2d.beginPath();
+        for (let i = 0; i < w; i++) {
+            let min = 1.0, max = -1.0;
+            const start = i * step;
+            const end = Math.min(data.length, start + step);
+            for (let j = start; j < end; j++) {
+                const v = data[j];
+                if (v < min) min = v;
+                if (v > max) max = v;
+            }
+            const yMin = (1 + min) * 0.5 * h;
+            const yMax = (1 + max) * 0.5 * h;
+            ctx2d.moveTo(i + 0.5, yMin);
+            ctx2d.lineTo(i + 0.5, yMax);
+        }
+        ctx2d.stroke();
+    }
+
+    dispose() {
+        this.stop();
+        try {
+            this.filter.disconnect();
+            this.dryGain.disconnect();
+            this.delayNode.disconnect();
+            this.delayFeedback.disconnect();
+            this.delayWet.disconnect();
+            this.reverbNode.disconnect();
+            this.reverbWet.disconnect();
+            this.channelGain.disconnect();
+            this.pan.disconnect();
+            this.analyser.disconnect();
+        } catch (_) { /* already disconnected */ }
+    }
+}
+
+export class PerformanceEngine {
+    constructor(channelCount = 8) {
+        const ctx = getAudioContext();
+        this.ctx = ctx;
+        this.masterBus = ctx.createGain();
+        this.masterBus.gain.value = 0.9;
+        this.masterAnalyser = ctx.createAnalyser();
+        this.masterAnalyser.fftSize = 1024;
+        this.masterAnalyserData = new Uint8Array(this.masterAnalyser.frequencyBinCount);
+        this.masterBus.connect(this.masterAnalyser);
+        this.masterAnalyser.connect(ctx.destination);
+        this.channels = Array.from({ length: channelCount }, () => new ChannelStrip(this.masterBus));
+        this.channels.forEach(ch => { ch._lastUserGain = 0; });
+    }
+
+    setMasterGain(value) {
+        this.masterBus.gain.setTargetAtTime(value, this.ctx.currentTime, 0.01);
+    }
+
+    getMasterPeak() {
+        this.masterAnalyser.getByteTimeDomainData(this.masterAnalyserData);
+        let peak = 0;
+        for (let i = 0; i < this.masterAnalyserData.length; i++) {
+            const v = Math.abs(this.masterAnalyserData[i] - 128) / 128;
+            if (v > peak) peak = v;
+        }
+        return peak;
+    }
+
+    refreshMuteSolo() {
+        const anySoloed = this.channels.some(ch => ch.isSoloed);
+        this.channels.forEach(ch => ch.applyMuteSolo(anySoloed));
+    }
+
+    setMute(index, value) {
+        this.channels[index].isMuted = value;
+        this.refreshMuteSolo();
+    }
+
+    setSolo(index, value) {
+        this.channels[index].isSoloed = value;
+        this.refreshMuteSolo();
+    }
+
+    playAll(loop = true) {
+        this.channels.forEach(ch => { if (ch.buffer) ch.play(loop); });
+    }
+
+    stopAll() {
+        this.channels.forEach(ch => ch.stop());
+    }
+
+    dispose() {
+        this.channels.forEach(ch => ch.dispose());
+        try { this.masterBus.disconnect(); } catch (_) { /* already disconnected */ }
+        try { this.masterAnalyser.disconnect(); } catch (_) { /* already disconnected */ }
+    }
+}