diff --git a/app/templates/index.html b/app/templates/index.html
index 1e9160b..3d21a73 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -832,40 +832,141 @@
             );
         };
 
-        const SubTabToolbar = ({ st, activeTool, setActiveTool, handleSubTabNormalizeWithValue, handleSubTabGainWithValue, handleSubTabPitch, handleSubTabStretch, handleSubTabFade }) => (
+        const SubTabToolbar = ({ st, activeTool, setActiveTool, handleSubTabNormalizeWithValue, handleSubTabGainWithValue, handleSubTabPitch, handleSubTabStretch, handleSubTabFade, onPlayPause, onStop, onRewind, onForward, onLoop, onRecord, onRateChange, onCut, onCopy, onPaste, onGlue, snapValue, onSnapChange }) => {
+            const isPlaying = st?.isPlaying || false;
+            const isLooping = st?.isLooping || false;
+            const isRecording = st?.isRecording || false;
+            
+            return (
             <div className="daw-header flex h-16 items-center px-4 border-b daw-border gap-3 bg-zinc-800">
+                {/* Tools Section - passthrough từ main session */}
                 <div className="flex items-center space-x-1 border-r border-zinc-700 pr-3">
-                    <button className={`p-1.5 rounded ${activeTool === 'select' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('select')} title="Select"><i data-lucide="mouse-pointer" className="w-4 h-4"></i></button>
-                    <button className={`p-1.5 rounded ${activeTool === 'grab' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('grab')} title="Grab"><i data-lucide="hand" className="w-4 h-4"></i></button>
-                    <button className={`p-1.5 rounded ${activeTool === 'razor' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('razor')} title="Razor"><i data-lucide="scissors" className="w-4 h-4"></i></button>
-                    <button className={`p-1.5 rounded ${activeTool === 'pen' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('pen')} title="Pen Tool"><i data-lucide="pen-tool" className="w-4 h-4"></i></button>
+                    <button className={`p-1 rounded ${activeTool === 'select' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('select')} title="Select Tool">
+                        <i data-lucide="mouse-pointer" className="w-4 h-4"></i>
+                    </button>
+                    <button className={`p-1 rounded ${activeTool === 'grab' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('grab')} title="Grab Tool">
+                        <i data-lucide="hand" className="w-4 h-4"></i>
+                    </button>
+                    <button className={`p-1 rounded ${activeTool === 'razor' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('razor')} title="Razor Tool">
+                        <svg className="w-4 h-4 text-orange-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <path d="M6 3h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>
+                            <path d="M4 9h16l-3 9H7z"/>
+                            <circle cx="12" cy="6" r="1"/>
+                        </svg>
+                    </button>
+                    <button className={`p-1 rounded ${activeTool === 'pen' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('pen')} title="Pen Tool">
+                        <i data-lucide="pen-tool" className="w-4 h-4"></i>
+                    </button>
+                    
+                    <div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
+                    
+                    <button onClick={onGlue} className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-purple-400 transition" title="Glue Clips">
+                        <i data-lucide="link" className="w-3.5 h-3.5"></i>
+                    </button>
+                    <button onClick={onCut} className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-red-400 transition" title="Cut (Ctrl+X)">
+                        <i data-lucide="scissors" className="w-3.5 h-3.5"></i>
+                    </button>
+                    <button onClick={onCopy} className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-blue-400 transition" title="Copy (Ctrl+C)">
+                        <i data-lucide="copy" className="w-3.5 h-3.5"></i>
+                    </button>
+                    <button onClick={onPaste} className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-emerald-400 transition" title="Paste (Ctrl+V)">
+                        <i data-lucide="clipboard" className="w-3.5 h-3.5"></i>
+                    </button>
                 </div>
 
-                <div className="flex items-center space-x-3 flex-1 overflow-x-auto no-scrollbar">
+                {/* Snap Section - passthrough */}
+                <div className="flex items-center gap-1 border-r border-zinc-700 pr-3">
+                    <span className="text-[9px] text-zinc-500 font-bold uppercase">Snap</span>
+                    <select 
+                        value={snapValue || 'free'} 
+                        onChange={(e) => onSnapChange(e.target.value)}
+                        className="bg-zinc-850 text-zinc-300 text-[10px] px-1 py-0.5 rounded border border-zinc-800 focus:outline-none font-mono"
+                    >
+                        <option value="free">Free</option>
+                        <option value="1">1</option>
+                        <option value="1/2">1/2</option>
+                        <option value="1/4">1/4</option>
+                        <option value="1/8">1/8</option>
+                        <option value="1/16">1/16</option>
+                        <option value="1/32">1/32</option>
+                    </select>
+                </div>
+
+                {/* Effects Controls */}
+                <div className="flex items-center space-x-2 flex-1 overflow-x-auto no-scrollbar">
                     <div className="flex items-center gap-1">
                         <span className="text-[10px] text-zinc-400">Normalize:</span>
                         <input type="range" min="-12" max="0" value={st.effects?.normalizeDb || 0} step="0.1" onChange={(e) => handleSubTabNormalizeWithValue(st.id, parseFloat(e.target.value))} className="w-20 h-1.5"/>
+                        <span className="text-[10px] text-zinc-500 w-10 text-right">{st.effects?.normalizeDb || 0} dB</span>
                     </div>
                     <div className="flex items-center gap-1">
                         <span className="text-[10px] text-zinc-400">Gain:</span>
                         <input type="range" min="-40" max="24" value={st.effects?.gainDb || 0} step="0.1" onChange={(e) => handleSubTabGainWithValue(st.id, parseFloat(e.target.value))} className="w-20 h-1.5"/>
+                        <span className="text-[10px] text-zinc-500 w-10 text-right">{st.effects?.gainDb || 0} dB</span>
                     </div>
                     <div className="flex items-center gap-1">
                         <span className="text-[10px] text-zinc-400">Pitch:</span>
                         <input type="range" min="-12" max="12" value={st.effects?.pitch || 0} step="0.1" onChange={(e) => handleSubTabPitch(st.id, parseFloat(e.target.value))} className="w-20 h-1.5"/>
+                        <span className="text-[10px] text-zinc-500 w-10 text-right">{st.effects?.pitch || 0} st</span>
                     </div>
                     <div className="flex items-center gap-1">
                         <span className="text-[10px] text-zinc-400">Stretch:</span>
                         <input type="range" min="50" max="200" value={st.effects?.speedStretch || 100} step="1" onChange={(e) => handleSubTabStretch(st.id, parseInt(e.target.value))} className="w-20 h-1.5"/>
+                        <span className="text-[10px] text-zinc-500 w-10 text-right">{st.effects?.speedStretch || 100}%</span>
                     </div>
                 </div>
 
-                <div className="flex items-center space-x-1 pl-3 border-l border-zinc-700">
+                {/* Fade Buttons */}
+                <div className="flex items-center space-x-1 border-r border-zinc-700 pr-3">
                     <button onClick={() => handleSubTabFade(st.id, 'in')} className="px-2 py-1 text-[10px] rounded hover:bg-zinc-700">Fade In</button>
                     <button onClick={() => handleSubTabFade(st.id, 'out')} className="px-2 py-1 text-[10px] rounded hover:bg-zinc-700">Fade Out</button>
                 </div>
+
+                {/* Transport Controls */}
+                <div className="flex items-center space-x-1 border-r border-zinc-700 pr-3">
+                    <button onClick={onRewind} className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition" title="Rewind">
+                        <i data-lucide="skip-back" className="w-4 h-4"></i>
+                    </button>
+                    <button onClick={onPlayPause} className={`w-8 h-8 flex items-center justify-center rounded border transition ${
+                        isPlaying 
+                            ? 'bg-emerald-600 text-black border-emerald-500 hover:bg-emerald-500' 
+                            : 'bg-cyan-600 text-white border-cyan-500 hover:bg-cyan-500'
+                    }`} title={isPlaying ? "Pause" : "Play"}>
+                        <i data-lucide={isPlaying ? 'pause' : 'play'} className="w-4 h-4 fill-current"></i>
+                    </button>
+                    <button onClick={onStop} className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition" title="Stop">
+                        <i data-lucide="square" className="w-4 h-4 fill-current"></i>
+                    </button>
+                    <button onClick={onForward} className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition" title="Forward">
+                        <i data-lucide="skip-forward" className="w-4 h-4"></i>
+                    </button>
+                    <button onClick={onLoop} className={`w-8 h-8 flex items-center justify-center rounded border transition ${
+                        isLooping ? 'bg-amber-600 text-black border-amber-500 hover:bg-amber-500' : 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'
+                    }`} title={isLooping ? "Loop On" : "Loop Off"}>
+                        <i data-lucide="repeat" className="w-4 h-4"></i>
+                    </button>
+                    <button onClick={onRecord} className={`w-8 h-8 flex items-center justify-center rounded border transition ${
+                        isRecording ? 'bg-red-600 text-white border-red-500' : 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'
+                    }`} title={isRecording ? "Recording" : "Record"}>
+                        <i data-lucide="circle" className="w-4 h-4"></i>
+                    </button>
+                </div>
+
+                {/* Rate Control */}
+                <div className="flex items-center space-x-1">
+                    <span className="text-[10px] text-zinc-400">Rate:</span>
+                    <select value={st.playbackRate || 1} onChange={(e) => onRateChange(parseFloat(e.target.value))} className="bg-zinc-700 text-zinc-100 text-[10px] px-1 py-0.5 rounded border border-zinc-600">
+                        <option value="0.5">0.5x</option>
+                        <option value="0.75">0.75x</option>
+                        <option value="1">1x</option>
+                        <option value="1.25">1.25x</option>
+                        <option value="1.5">1.5x</option>
+                        <option value="2">2x</option>
+                    </select>
+                </div>
             </div>
         );
+        };
 
         const App = () => {
             // ── State Definitions ──
@@ -3991,6 +4092,36 @@
                                     >
                                         <i data-lucide="clipboard" className="w-3.5 h-3.5"></i>
                                     </button>
+                                    
+                                    <div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
+                                    
+                                    {/* Transport Controls - gần toolbar */}
+                                    <button onClick={() => setCurrentTime(0)}
+                                        className="w-6 h-6 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
+                                        title="Quay lại đầu"><i data-lucide="skip-back" className="w-3 h-3"></i></button>
+                                    <button onClick={handlePlayPause}
+                                        className={`w-6 h-6 flex items-center justify-center rounded border transition ${
+                                            isPlaying 
+                                                ? 'bg-emerald-600 text-black border-emerald-500 hover:bg-emerald-500' 
+                                                : 'bg-cyan-600 text-white border-cyan-500 hover:bg-cyan-500'
+                                        }`}
+                                        title={isPlaying ? "Tạm dừng" : "Play"}>
+                                        <i data-lucide={isPlaying ? "pause" : "play"} className="w-3 h-3 fill-current"></i>
+                                    </button>
+                                    <button onClick={handleStop}
+                                        className="w-6 h-6 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
+                                        title="Stop"><i data-lucide="square" className="w-3 h-3 fill-current"></i></button>
+                                    <button onClick={() => setCurrentTime(maxDuration)}
+                                        className="w-6 h-6 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
+                                        title="Đến cuối"><i data-lucide="skip-forward" className="w-3 h-3"></i></button>
+                                    <button onClick={() => setIsLoopingSelection(prev => !prev)}
+                                        className={`w-6 h-6 flex items-center justify-center rounded border transition ${
+                                            isLoopingSelection 
+                                                ? 'bg-amber-600 text-black border-amber-500 hover:bg-amber-500' 
+                                                : 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'
+                                        }`} title="Bật/Tắt Lặp vùng chọn">
+                                        <i data-lucide="repeat" className="w-3 h-3"></i>
+                                    </button>
                                 </div>
                                 
                                 <div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
@@ -4315,10 +4446,10 @@
                             </button>
                         </section>
 
-                        {/* Transport Section */}
+                        {/* Selection Info Section */}
                         <section className="md:col-span-4 bg-[#242424] border border-zinc-800 rounded p-3 flex flex-col justify-between items-center text-center">
                             <div className="flex w-full items-center justify-between">
-                                <span className="text-[10px] text-zinc-500 font-bold uppercase tracking-wider">Transport Controls</span>
+                                <span className="text-[10px] text-zinc-500 font-bold uppercase tracking-wider">Selection Info</span>
                                 <div className="text-sm font-bold font-mono text-zinc-100">{formatTime(currentTime)}</div>
                             </div>
 
@@ -4340,44 +4471,6 @@
                                     <span className="text-zinc-200 font-mono text-[11px] font-semibold mt-0.5">{selectionStats.length}s</span>
                                 </div>
                             </div>
-
-                            <div className="flex items-center gap-1 justify-center w-full mt-1.5">
-                                <button onClick={() => setCurrentTime(0)}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Quay lại đầu"><i data-lucide="skip-back" className="w-4 h-4"></i></button>
-                                <button onClick={() => { if (selLeft !== null) setCurrentTime(selLeft); }}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Đầu vùng chọn"><i data-lucide="step-back" className="w-4 h-4"></i></button>
-                                <button onClick={handlePlayPause}
-                                    className={`w-8 h-8 flex items-center justify-center rounded border transition ${
-                                        isPlaying 
-                                            ? 'bg-emerald-600 text-black border-emerald-500 hover:bg-emerald-500' 
-                                            : 'bg-cyan-600 text-white border-cyan-500 hover:bg-cyan-500'
-                                    }`}
-                                    title={isPlaying ? "Tạm dừng" : "Play"}>
-                                    <i data-lucide="play" className="w-4 h-4 fill-current"></i>
-                                </button>
-                                <button onClick={handlePause}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Pause"><i data-lucide="pause" className="w-4 h-4"></i></button>
-                                <button onClick={handleStop}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Stop"><i data-lucide="square" className="w-4 h-4 fill-current"></i></button>
-                                <button onClick={() => { if (selRight !== null) setCurrentTime(selRight); }}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Cuối vùng chọn"><i data-lucide="step-forward" className="w-4 h-4"></i></button>
-                                <button onClick={() => setCurrentTime(maxDuration)}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Đến cuối"><i data-lucide="skip-forward" className="w-4 h-4"></i></button>
-                                <button onClick={() => setIsLoopingSelection(prev => !prev)}
-                                    className={`w-8 h-8 flex items-center justify-center rounded border transition ${
-                                        isLoopingSelection 
-                                            ? 'bg-amber-600 text-black border-amber-500 hover:bg-amber-500' 
-                                            : 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'
-                                    }`} title="Bật/Tắt Lặp vùng chọn">
-                                    <i data-lucide="repeat" className="w-4 h-4"></i>
-                                </button>
-                            </div>
                         </section>
 
                         {/* AI Analysis & Edit Section */}
@@ -4487,6 +4580,19 @@
                                         handleSubTabPitch={handleSubTabPitch}
                                         handleSubTabStretch={handleSubTabStretch}
                                         handleSubTabFade={handleSubTabFadeState}
+                                        onPlayPause={handlePlayPause}
+                                        onStop={handleStop}
+                                        onRewind={() => setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, currentTime: Math.max(0, (s.currentTime || 0) - 1) } : s))}
+                                        onForward={() => setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, currentTime: Math.min(s.buffer?.duration || 0, (s.currentTime || 0) + 1) } : s))}
+                                        onLoop={() => setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, isLooping: !s.isLooping } : s))}
+                                        onRecord={() => setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, isRecording: !s.isRecording } : s))}
+                                        onRateChange={(rate) => setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, playbackRate: rate } : s))}
+                                        onCut={() => { const curTabId = activeTab; handleSubTabCut(curTabId); }}
+                                        onCopy={() => { const curTabId = activeTab; handleSubTabCopy(curTabId); }}
+                                        onPaste={() => { const curTabId = activeTab; handleSubTabPaste(curTabId); }}
+                                        onGlue={() => showToast('Glue: Gộp clip trong subtab', 'info')}
+                                        snapValue={snapValue}
+                                        onSnapChange={setSnapValue}
                                     />
                                     <SubTabWaveform 
                                         buffer={st.buffer}
diff --git a/index.html b/index.html
deleted file mode 100644
index 1e9160b..0000000
--- a/index.html
+++ /dev/null
@@ -1,4677 +0,0 @@
-<!DOCTYPE html>
-<html lang="vi">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SonicForge Studio - Professional DAW Editor</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
-    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone@7.26.0/babel.min.js"></script>
-    <style>
-        body { 
-            background-color: #1a1a1a; 
-            color: #c0c0c0; 
-            font-family: 'Inter', system-ui, -apple-system, sans-serif;
-            overflow: hidden;
-            user-select: none;
-        }
-        .daw-bg { background-color: #1e1e1e; }
-        .daw-panel { background-color: #262626; }
-        .daw-header { background-color: #2e2e2e; }
-        .daw-border { border-color: #181818; }
-        .daw-track-active { background-color: #333333; }
-        ::-webkit-scrollbar { width: 10px; height: 10px; }
-        ::-webkit-scrollbar-track { background: #141414; }
-        ::-webkit-scrollbar-thumb { background: #3a3a3a; border: 2px solid #141414; border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
-        .knob-container { position: relative; width: 28px; height: 28px; }
-        .knob-dial { transform-origin: center; transition: transform 0.1s ease; }
-        .selection-interactive-box {
-            min-width: 4px;
-        }
-        .no-scrollbar {
-            scrollbar-width: none; /* Firefox */
-            -ms-overflow-style: none; /* IE 10+ */
-        }
-        .no-scrollbar::-webkit-scrollbar {
-            display: none; /* Safari and Chrome */
-        }
-    </style>
-</head>
-<body class="h-screen w-screen flex flex-col">
-    <div id="root" class="h-full w-full flex flex-col"></div>
-
-    <script type="text/babel">
-        const { useState, useRef, useEffect, useMemo } = React;
-
-        // ── FastAPI Backend Configuration ──
-        const API_BASE_URL = window.location.origin;
-        const API_AUDIO = `${API_BASE_URL}/api/v1/audio`;
-        const API_MULTITRACK = `${API_BASE_URL}/api/v1/multitrack`;
-        const API_TASKS = `${API_BASE_URL}/api/v1/audio/tasks`;
-
-        // Storage for server-side file IDs mapped to track IDs
-        let serverFileIdMap = {};
-
-        let audioCtx;
-        function getAudioContext() {
-            if (!audioCtx) {
-                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-            }
-            if (audioCtx.state === 'suspended') {
-                audioCtx.resume();
-            }
-            return audioCtx;
-        }
-
-        const formatTime = (secs) => {
-            if (isNaN(secs) || secs < 0) return "0:00.000";
-            const m = Math.floor(secs / 60);
-            const s = Math.floor(secs % 60);
-            const ms = Math.floor((secs % 1) * 1000).toString().padStart(3, '0');
-            return `${m}:${s.toString().padStart(2, '0')}.${ms}`;
-        };
-
-        const formatBeat = (secs, bpmVal) => {
-            if (isNaN(secs) || secs < 0) return "1.1.1";
-            const beatDuration = 60 / bpmVal;
-            const barDuration = beatDuration * 4;
-            const bar = Math.floor(secs / barDuration) + 1;
-            const beat = Math.floor((secs % barDuration) / beatDuration) + 1;
-            const sub = Math.floor((secs % beatDuration) / (beatDuration / 4)) + 1;
-            return `${bar}.${beat}.${sub}`;
-        };
-
-        const getBeatMarkers = (maxDur, bpmVal) => {
-            const beatDuration = 60 / bpmVal;
-            const barDuration = beatDuration * 4;
-            const markers = [];
-            for (let t = 0; t <= maxDur; t += beatDuration) {
-                const isBar = Math.abs(t % barDuration) < 0.001 || Math.abs(t % barDuration - barDuration) < 0.001;
-                markers.push({ time: t, isBar, beatNum: Math.floor(t / beatDuration) + 1 });
-            }
-            return markers;
-        };
-
-        const findZeroCrossing = (buffer, targetTime) => {
-            if (!buffer) return targetTime;
-            const sampleRate = buffer.sampleRate;
-            const data = buffer.getChannelData(0);
-            const targetSample = Math.floor(targetTime * sampleRate);
-            const windowSize = Math.floor(0.04 * sampleRate);
-            const start = Math.max(0, targetSample - windowSize);
-            const end = Math.min(data.length - 2, targetSample + windowSize);
-            
-            let bestSample = targetSample;
-            let minDistance = Infinity;
-            
-            for (let i = start; i <= end; i++) {
-                if ((data[i] >= 0 && data[i+1] <= 0) || (data[i] <= 0 && data[i+1] >= 0)) {
-                    const dist = Math.abs(i - targetSample);
-                    if (dist < minDistance) {
-                        minDistance = dist;
-                        bestSample = i;
-                    }
-                }
-            }
-            return bestSample / sampleRate;
-        };
-
-        const VolumeKnob = ({ value, onChange, min = 0, max = 1 }) => {
-            const [isDragging, setIsDragging] = useState(false);
-            const startY = useRef(0);
-            const startValue = useRef(0);
-
-            const rotation = useMemo(() => {
-                const percent = (value - min) / (max - min);
-                return -135 + percent * 270;
-            }, [value, min, max]);
-
-            const handleMouseDown = (e) => {
-                setIsDragging(true);
-                startY.current = e.clientY;
-                startValue.current = value;
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-            };
-
-            const handleMouseMove = (e) => {
-                const deltaY = startY.current - e.clientY;
-                const sensitivity = 0.005;
-                const newValue = Math.max(min, Math.min(max, startValue.current + deltaY * sensitivity));
-                onChange(parseFloat(newValue.toFixed(2)));
-            };
-
-            const handleMouseUp = () => {
-                setIsDragging(false);
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
-            };
-
-            return (
-                <div 
-                    className="knob-container cursor-ns-resize flex flex-col items-center" 
-                    onMouseDown={handleMouseDown}
-                    title={`Volume: ${Math.round(value * 100)}%`}
-                >
-                    <svg className="w-7 h-7" viewBox="0 0 40 40">
-                        <circle cx="20" cy="20" r="16" fill="#141414" stroke="#444" strokeWidth="2" />
-                        <g transform={`rotate(${rotation} 20 20)`} className="knob-dial">
-                            <line x1="20" y1="20" x2="20" y2="6" stroke="#ef4444" strokeWidth="3" strokeLinecap="round" />
-                        </g>
-                    </svg>
-                </div>
-            );
-        };
-
-        const WaveformLane = ({ 
-            track, 
-            zoom, 
-            timelineWidth, 
-            onSelectRange, 
-            onPlayheadSet,
-            isSelected,
-            onSelectTrack,
-            markers,
-            selectionMode,
-            localSelectionTrackId,
-            localSelLeft,
-            localSelRight,
-            onTrackLaneMouseDown,
-            onContextMenu,
-            onClipDragStart,
-            onClipStretchStart,
-            onSelectionEdgeDragStart,
-            setSelectedClipId,
-            activeTool,
-            onSplitTrackAtTime,
-            onEditClipInSubTab,
-            snapValue,
-            bpm,
-        }) => {
-            const canvasRef = useRef(null);
-
-            useEffect(() => {
-                const canvas = canvasRef.current;
-                if (!canvas) return;
-                const ctx = canvas.getContext('2d');
-                const dpr = window.devicePixelRatio || 1;
-                const width = timelineWidth;
-                const height = canvas.parentElement.clientHeight;
-                
-                canvas.width = width * dpr;
-                canvas.height = height * dpr;
-                ctx.scale(dpr, dpr);
-
-                ctx.fillStyle = isSelected ? '#2a2a2a' : (track.id % 2 === 0 ? '#181818' : '#1d1d1d');
-                ctx.fillRect(0, 0, width, height);
-
-                // Grid lines based on Snap value
-                ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
-                ctx.lineWidth = 1;
-                const totalSec = width / zoom;
-                
-                let gridSpacing = 1.0; // default 1 second
-                if (snapValue && snapValue !== 'free') {
-                    const beatDuration = 60 / parseFloat(bpm || 120);
-                    let divisor = 1;
-                    if (snapValue === '1') divisor = 1;
-                    else if (snapValue === '1/2') divisor = 0.5;
-                    else if (snapValue === '1/4') divisor = 0.25;
-                    else if (snapValue === '1/8') divisor = 0.125;
-                    else if (snapValue === '1/16') divisor = 0.0625;
-                    else if (snapValue === '1/32') divisor = 0.03125;
-                    
-                    gridSpacing = beatDuration * divisor;
-                } else {
-                    gridSpacing = 60 / parseFloat(bpm || 120); // default to 1 beat
-                }
-
-                // Guard: if lines are too close, scale grid spacing by multiples of 2
-                let drawSpacing = gridSpacing;
-                while (drawSpacing * zoom < 10) {
-                    drawSpacing *= 2;
-                }
-
-                for (let s = 0; s <= totalSec; s += drawSpacing) {
-                    const x = s * zoom;
-                    ctx.beginPath();
-                    ctx.moveTo(x, 0);
-                    ctx.lineTo(x, height);
-                    ctx.stroke();
-                }
-
-                // Draw waveform lane
-                const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default',
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name,
-                    speed: track.speed || 1.0
-                }] : []);
-
-                if (clips.length > 0) {
-                    clips.forEach(clip => {
-                        const data = clip.buffer.getChannelData(0);
-                        const sampleRate = clip.buffer.sampleRate;
-                        const totalSamples = data.length;
-                        const originalDuration = totalSamples / sampleRate;
-                        const clipSpeed = clip.speed || 1.0;
-                        const duration = originalDuration / clipSpeed;
-
-                        const xStart = (clip.startTime || 0) * zoom;
-                        const wClip = duration * zoom;
-                        const xEnd = xStart + wClip;
-
-                        // 1. Draw Clip Layer Background & Border
-                        ctx.fillStyle = track.color ? track.color + '22' : 'rgba(6, 182, 212, 0.12)';
-                        ctx.strokeStyle = track.color || '#06b6d4';
-                        ctx.lineWidth = 1.5;
-                        
-                        const clipTop = 8;
-                        const clipHeight = height - 16;
-                        
-                        ctx.beginPath();
-                        if (ctx.roundRect) {
-                            ctx.roundRect(xStart, clipTop, wClip, clipHeight, 4);
-                        } else {
-                            ctx.rect(xStart, clipTop, wClip, clipHeight);
-                        }
-                        ctx.fill();
-                        ctx.stroke();
-
-                        // 2. Draw Clip Label & Speed Label (Speed Math: D/D' * 100)
-                        ctx.fillStyle = '#e4e4e7';
-                        ctx.font = 'bold 9px sans-serif';
-                        ctx.fillText(clip.name || 'Clip', xStart + 8, clipTop + 14);
-
-                        if (clipSpeed !== 1.0) {
-                            ctx.fillStyle = '#fbbf24'; // Yellow color
-                            ctx.font = 'bold 8px sans-serif';
-                            ctx.fillText(`Speed: ${(clipSpeed * 100).toFixed(1)}%`, xStart + 8, clipTop + 24);
-                        }
-
-                        // Draw markers
-                        if (markers && markers.length > 0) {
-                            markers.forEach(m => {
-                                const mx = m.time * zoom;
-                                ctx.fillStyle = '#fbbf24';
-                                ctx.fillRect(mx - 1, 0, 2, height);
-                                ctx.fillStyle = 'rgba(251, 191, 36, 0.1)';
-                                ctx.fillRect(mx - 1, 0, 2, height);
-                            });
-                        }
-
-                        // 3. Peak waveform drawing only within clip bounds (speed adjusted)
-                        ctx.strokeStyle = isSelected ? '#22d3ee' : '#a7f3d0';
-                        ctx.lineWidth = 1;
-
-                        const drawXStart = Math.max(0, Math.floor(xStart));
-                        const drawXEnd = Math.min(width, Math.ceil(xEnd));
-                        const samplesPerPixel = (sampleRate / zoom) * clipSpeed;
-
-                        for (let px = drawXStart; px < drawXEnd; px++) {
-                            const timeInClip = ((px - xStart) / zoom) * clipSpeed;
-                            const sampleIdx = Math.floor(timeInClip * sampleRate);
-                            const chunkSize = Math.max(1, Math.floor(samplesPerPixel));
-                            const chunkStart = Math.max(0, sampleIdx - Math.floor(chunkSize / 2));
-                            const chunkEnd = Math.min(totalSamples, chunkStart + chunkSize);
-
-                            let maxVal = 0;
-                            for (let i = chunkStart; i < chunkEnd; i++) {
-                                const abs = Math.abs(data[i]);
-                                if (abs > maxVal) maxVal = abs;
-                            }
-
-                            const mid = height / 2;
-                            const peakHeight = maxVal * (clipHeight * 0.45);
-                            
-                            ctx.beginPath();
-                            ctx.moveTo(px, mid - peakHeight);
-                            ctx.lineTo(px, mid + peakHeight);
-                            ctx.stroke();
-                        }
-                    });
-                } else {
-                    ctx.fillStyle = '#444';
-                    ctx.font = '12px Inter, sans-serif';
-                    ctx.textAlign = 'center';
-                    ctx.fillText('Kéo thả hoặc tải file âm thanh vào Track này', width / 2, height / 2);
-                }
-
-                // Selection highlight - local selection on this track
-                if (selectionMode === 'local' && localSelectionTrackId === track.id &&
-                    localSelLeft !== null && localSelRight !== null && localSelRight > localSelLeft) {
-                    const hlLeft = localSelLeft * zoom;
-                    const hlWidth = (localSelRight - localSelLeft) * zoom;
-                    ctx.fillStyle = 'rgba(245, 158, 11, 0.15)';
-                    ctx.fillRect(hlLeft, 0, hlWidth, height);
-                    ctx.strokeStyle = '#f59e0b';
-                    ctx.lineWidth = 1.5;
-                    ctx.strokeRect(hlLeft, 0, hlWidth, height);
-                }
-
-            }, [track, zoom, timelineWidth, isSelected, markers, selectionMode, localSelectionTrackId, localSelLeft, localSelRight, snapValue, bpm]);
-
-            return (
-                <canvas 
-                    ref={canvasRef}
-                    className="w-full h-full cursor-crosshair"
-                    onMouseMove={(e) => {
-                        if (!canvasRef.current) return;
-                        const rect = canvasRef.current.getBoundingClientRect();
-                        const wrapper = canvasRef.current?.parentElement?.parentElement;
-                        const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
-                        const x = e.clientX - rect.left + scrollLeft;
-                        const time = x / zoom;
-                        
-                        const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                            id: 'default',
-                            buffer: track.buffer,
-                            startTime: track.startTime || 0,
-                            name: track.name,
-                            speed: track.speed || 1.0
-                        }] : []);
-                        
-                        // Check if hovering near local selection boundaries of this track
-                        const isLocal = selectionMode === 'local' && localSelectionTrackId === track.id;
-                        if (isLocal && localSelLeft !== null && localSelRight !== null) {
-                            const leftPx = localSelLeft * zoom;
-                            const rightPx = localSelRight * zoom;
-                            const distToLeft = Math.abs(x - leftPx);
-                            const distToRight = Math.abs(x - rightPx);
-                            if (distToLeft <= 5 || distToRight <= 5) {
-                                canvasRef.current.style.cursor = 'ew-resize';
-                                return;
-                            }
-                        }
-
-                        // Check if hovering near right edge of a clip for time-stretching (Alt key required)
-                        const toleranceSec = 8 / zoom;
-                        const rightEdgeClip = clips.find(c => {
-                            const duration = c.buffer.duration / (c.speed || 1.0);
-                            return Math.abs(time - (c.startTime + duration)) <= toleranceSec;
-                        });
-
-                        if (rightEdgeClip && e.altKey) {
-                            canvasRef.current.style.cursor = 'ew-resize';
-                            return;
-                        }
-                        
-                        const hoveredClip = clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration / (c.speed || 1.0));
-                        const isOverClip = !!hoveredClip;
-                        
-                        if (activeTool === 'grab') {
-                            canvasRef.current.style.cursor = isOverClip ? 'grab' : 'default';
-                        } else if (activeTool === 'razor') {
-                            canvasRef.current.style.cursor = isOverClip ? 'cell' : 'not-allowed';
-                        } else {
-                            // select tool
-                            canvasRef.current.style.cursor = (isOverClip && (e.altKey || e.ctrlKey)) ? 'grab' : 'crosshair';
-                        }
-                    }}
-                    onMouseDown={(e) => {
-                        // Ignore right-click for local selection drag (context menu handles it)
-                        if (e.button === 2) return;
-                        const rect = canvasRef.current.getBoundingClientRect();
-                        const wrapper = canvasRef.current?.parentElement?.parentElement;
-                        const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
-                        const x = e.clientX - rect.left + scrollLeft;
-                        const time = Math.max(0, x / zoom);
-                        onSelectTrack(track.id);
-
-                        const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                            id: 'default',
-                            buffer: track.buffer,
-                            startTime: track.startTime || 0,
-                            name: track.name,
-                            speed: track.speed || 1.0
-                        }] : []);
-
-                        // Check if dragging selection boundaries (local mode)
-                        const isLocal = selectionMode === 'local' && localSelectionTrackId === track.id;
-                        if (isLocal && localSelLeft !== null && localSelRight !== null) {
-                            const leftPx = localSelLeft * zoom;
-                            const rightPx = localSelRight * zoom;
-                            const distToLeft = Math.abs(x - leftPx);
-                            const distToRight = Math.abs(x - rightPx);
-                            if (distToLeft <= 5) {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (onSelectionEdgeDragStart) onSelectionEdgeDragStart(e, track.id, 'left');
-                                return;
-                            } else if (distToRight <= 5) {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (onSelectionEdgeDragStart) onSelectionEdgeDragStart(e, track.id, 'right');
-                                return;
-                            }
-                        }
-
-                        // Check if time-stretching (Alt + Right Edge)
-                        const toleranceSec = 8 / zoom;
-                        const rightEdgeClip = clips.find(c => {
-                            const duration = c.buffer.duration / (c.speed || 1.0);
-                            return Math.abs(time - (c.startTime + duration)) <= toleranceSec;
-                        });
-
-                        if (rightEdgeClip && e.altKey) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            if (onClipStretchStart) {
-                                onClipStretchStart(track.id, rightEdgeClip.id, time);
-                            }
-                            return;
-                        }
-                        
-                        const clickedClip = clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration / (c.speed || 1.0));
-
-                        // Set selected clip ID
-                        if (clickedClip) {
-                            setSelectedClipId({ trackId: track.id, clipId: clickedClip.id === 'default' ? 'default_' + track.id : clickedClip.id });
-                        } else {
-                            setSelectedClipId(null);
-                        }
-
-                        if (activeTool === 'razor') {
-                            if (clickedClip) {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (onSplitTrackAtTime) {
-                                    onSplitTrackAtTime(track.id, clickedClip.id, time);
-                                }
-                            }
-                            return;
-                        }
-
-                        if (activeTool === 'grab') {
-                            if (clickedClip) {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (onClipDragStart) {
-                                    onClipDragStart(track.id, clickedClip.id, time - clickedClip.startTime, e.ctrlKey);
-                                }
-                            } else {
-                                onPlayheadSet(time);
-                            }
-                            return;
-                        }
-
-                        // Check for click drag clip (Alt to move, Ctrl to duplicate)
-                        if (clickedClip && (e.altKey || e.ctrlKey)) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            if (onClipDragStart) {
-                                onClipDragStart(track.id, clickedClip.id, time - clickedClip.startTime, e.ctrlKey);
-                            }
-                            return;
-                        }
-
-                        // Check if Ctrl+Click outside active local selection to clear
-                        if (e.ctrlKey) {
-                            const minSel = localSelLeft !== null && localSelRight !== null ? Math.min(localSelLeft, localSelRight) : null;
-                            const maxSel = localSelLeft !== null && localSelRight !== null ? Math.max(localSelLeft, localSelRight) : null;
-                            const isInsideSelection = isLocal && minSel !== null && maxSel !== null && time >= minSel && time <= maxSel;
-                            if (!isInsideSelection) {
-                                clearLocalSelection();
-                                setSelectionMode(null);
-                            }
-                            return;
-                        }
-
-                        onPlayheadSet(time);
-                        if (onTrackLaneMouseDown) {
-                            onTrackLaneMouseDown(track.id, time, e);
-                        }
-                        e.stopPropagation();
-                    }}
-                    onDoubleClick={(e) => {
-                        const rect = canvasRef.current.getBoundingClientRect();
-                        const wrapper = canvasRef.current?.parentElement?.parentElement;
-                        const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
-                        const x = e.clientX - rect.left + scrollLeft;
-                        const time = Math.max(0, x / zoom);
-
-                        const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                            id: 'default',
-                            buffer: track.buffer,
-                            startTime: track.startTime || 0,
-                            name: track.name,
-                            speed: track.speed || 1.0
-                        }] : []);
-
-                        const clickedClip = clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration / (c.speed || 1.0));
-                        if (clickedClip) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            if (onEditClipInSubTab) {
-                                onEditClipInSubTab(track.id, clickedClip.id);
-                            }
-                        }
-                    }}
-                    onContextMenu={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        onSelectTrack(track.id);
-                        const rect = canvasRef.current.getBoundingClientRect();
-                        const wrapper = canvasRef.current?.parentElement?.parentElement;
-                        const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
-                        const x = e.clientX - rect.left + scrollLeft;
-                        const time = Math.max(0, x / zoom);
-                        if (onContextMenu) onContextMenu(e, track.id, time);
-                    }}
-                />
-            );
-        };
-
-        const TempoTrackLane = ({ bpm, zoom, timelineWidth, onPlayheadSet, snapValue }) => {
-            const canvasRef = useRef(null);
-
-            useEffect(() => {
-                const canvas = canvasRef.current;
-                if (!canvas) return;
-                const ctx = canvas.getContext('2d');
-                const dpr = window.devicePixelRatio || 1;
-                const width = timelineWidth;
-                const parent = canvas.parentElement;
-                const height = parent ? parent.clientHeight : 40;
-
-                canvas.width = width * dpr;
-                canvas.height = height * dpr;
-                ctx.scale(dpr, dpr);
-
-                ctx.fillStyle = '#1a1a2e';
-                ctx.fillRect(0, 0, width, height);
-
-                const beatDuration = 60 / bpm;
-                const barDuration = beatDuration * 4;
-                const totalSec = width / zoom;
-
-                for (let t = 0; t <= totalSec; t += beatDuration) {
-                    const beatNum = Math.floor(t / beatDuration) + 1;
-                    const isBar = beatNum % 4 === 1;
-                    const x = t * zoom;
-
-                    if (isBar) {
-                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
-                        ctx.lineWidth = 1.5;
-                        ctx.beginPath();
-                        ctx.moveTo(x, 0);
-                        ctx.lineTo(x, height);
-                        ctx.stroke();
-
-                        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
-                        ctx.font = 'bold 9px Inter, sans-serif';
-                        ctx.textAlign = 'left';
-                        ctx.fillText(`${Math.ceil(beatNum / 4)}`, x + 3, 11);
-                    } else {
-                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
-                        ctx.lineWidth = 1;
-                        ctx.beginPath();
-                        ctx.moveTo(x, 0);
-                        ctx.lineTo(x, height);
-                        ctx.stroke();
-                    }
-                }
-
-                // Draw snap sub-ticks at the bottom
-                if (snapValue && snapValue !== 'free') {
-                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
-                    ctx.lineWidth = 0.8;
-                    let divisor = 1;
-                    if (snapValue === '1') divisor = 1;
-                    else if (snapValue === '1/2') divisor = 0.5;
-                    else if (snapValue === '1/4') divisor = 0.25;
-                    else if (snapValue === '1/8') divisor = 0.125;
-                    else if (snapValue === '1/16') divisor = 0.0625;
-                    else if (snapValue === '1/32') divisor = 0.03125;
-
-                    const snapInterval = beatDuration * divisor;
-                    if (snapInterval * zoom >= 4) {
-                        for (let t = 0; t <= totalSec; t += snapInterval) {
-                            const onBeat = Math.abs((t / beatDuration) - Math.round(t / beatDuration)) < 0.001;
-                            if (!onBeat) {
-                                const x = t * zoom;
-                                ctx.beginPath();
-                                ctx.moveTo(x, height - 6);
-                                ctx.lineTo(x, height);
-                                ctx.stroke();
-                            }
-                        }
-                    }
-                }
-
-                ctx.fillStyle = 'rgba(255, 255, 255, 0.35)';
-                ctx.font = 'bold 10px Inter, sans-serif';
-                ctx.textAlign = 'right';
-                ctx.fillText(`${bpm} BPM`, width - 6, 12);
-
-            }, [bpm, zoom, timelineWidth, snapValue]);
-
-            return (
-                <canvas
-                    ref={canvasRef}
-                    className="w-full h-full cursor-crosshair"
-                    onMouseDown={(e) => {
-                        const wrapper = canvasRef.current?.parentElement?.parentElement;
-                        const scrollLeft = wrapper ? wrapper.scrollLeft : 0;
-                        const rect = canvasRef.current.getBoundingClientRect();
-                        const x = e.clientX - rect.left + scrollLeft;
-                        const time = Math.max(0, x / zoom);
-                        onPlayheadSet(time);
-                        e.stopPropagation();
-                    }}
-                />
-            );
-        };
-
-        // ── Sub-Tab Waveform Component (LOOP_EDITOR_2.md §1.2 & SUB_EDITOR.md) ──
-        const SubTabWaveform = ({ buffer, subTabId, activeTab, currentTime, selectionStart, selectionEnd, onSelectRange, onPlayheadSet, onContextMenu, activeTool }) => {
-            const canvasRef = useRef(null);
-            useEffect(() => {
-                const canvas = canvasRef.current;
-                if (!canvas || !buffer) return;
-                const ctx = canvas.getContext('2d');
-                const dpr = window.devicePixelRatio || 1;
-                const rect = canvas.getBoundingClientRect();
-                canvas.width = rect.width * dpr;
-                canvas.height = rect.height * dpr;
-                ctx.scale(dpr, dpr);
-
-                const w = rect.width;
-                const h = rect.height;
-                ctx.fillStyle = '#181818';
-                ctx.fillRect(0, 0, w, h);
-
-                const data = buffer.getChannelData(0);
-                const len = data.length;
-                if (len === 0) return;
-
-                // Draw waveform
-                ctx.fillStyle = '#6ee7b7';
-                const mid = h / 2;
-                for (let px = 0; px < w; px++) {
-                    const start = Math.floor((px / w) * len);
-                    const end = Math.floor(((px + 1) / w) * len);
-                    let maxVal = 0;
-                    let minVal = 0;
-                    for (let i = start; i < end && i < len; i++) {
-                        const val = data[i];
-                        if (val > maxVal) maxVal = val;
-                        if (val < minVal) minVal = val;
-                    }
-                    const yTop = mid + (minVal * (h * 0.45));
-                    const yBottom = mid + (maxVal * (h * 0.45));
-                    ctx.fillRect(px, yTop, 1, Math.max(1, yBottom - yTop));
-                }
-
-                // Highlight selection if active
-                if (selectionStart !== null && selectionEnd !== null && selectionStart !== selectionEnd) {
-                    const left = Math.min(selectionStart, selectionEnd);
-                    const right = Math.max(selectionStart, selectionEnd);
-                    const leftPx = (left / buffer.duration) * w;
-                    const rightPx = (right / buffer.duration) * w;
-                    ctx.fillStyle = 'rgba(245, 158, 11, 0.15)';
-                    ctx.fillRect(leftPx, 0, rightPx - leftPx, h);
-                    ctx.strokeStyle = '#f59e0b';
-                    ctx.lineWidth = 1;
-                    ctx.beginPath();
-                    ctx.moveTo(leftPx, 0); ctx.lineTo(leftPx, h);
-                    ctx.moveTo(rightPx, 0); ctx.lineTo(rightPx, h);
-                    ctx.stroke();
-                }
-
-                // Draw local playhead
-                if (currentTime !== null && currentTime >= 0 && currentTime <= buffer.duration) {
-                    const playheadPx = (currentTime / buffer.duration) * w;
-                    ctx.strokeStyle = '#ef4444';
-                    ctx.lineWidth = 2;
-                    ctx.beginPath();
-                    ctx.moveTo(playheadPx, 0);
-                    ctx.lineTo(playheadPx, h);
-                    ctx.stroke();
-                }
-            }, [buffer, currentTime, selectionStart, selectionEnd]);
-
-            const handleMouseDown = (e) => {
-                if (e.button === 2) return; // ignore right click
-                const rect = canvasRef.current.getBoundingClientRect();
-                const startX = e.clientX - rect.left;
-                const duration = buffer.duration;
-                const startTime = (startX / rect.width) * duration;
-
-                // Tool-specific behavior
-                if (activeTool === 'grab') {
-                    // Grab tool: move playhead on click/drag
-                    onPlayheadSet(startTime);
-                    
-                    const handleMouseMove = (moveEvent) => {
-                        const currentX = moveEvent.clientX - rect.left;
-                        const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
-                        onPlayheadSet(currentTime);
-                    };
-                    
-                    const handleMouseUp = () => {
-                        document.removeEventListener('mousemove', handleMouseMove);
-                        document.removeEventListener('mouseup', handleMouseUp);
-                    };
-                    
-                    document.addEventListener('mousemove', handleMouseMove);
-                    document.addEventListener('mouseup', handleMouseUp);
-                    return;
-                }
-
-                if (activeTool === 'razor') {
-                    // Razor tool: add a cut marker at click position
-                    // For sub-tab, we can store cut points in the subTab state
-                    onPlayheadSet(startTime);
-                    showToast(`Cut point at ${formatTime(startTime)}`, 'info');
-                    return;
-                }
-
-                if (activeTool === 'pen') {
-                    // Pen tool: for volume automation drawing
-                    // For now, just move playhead and show indicator
-                    onPlayheadSet(startTime);
-                    canvasRef.current.style.cursor = 'crosshair';
-                    
-                    const handleMouseMove = (moveEvent) => {
-                        const currentX = moveEvent.clientX - rect.left;
-                        const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
-                        onPlayheadSet(currentTime);
-                    };
-                    
-                    const handleMouseUp = () => {
-                        document.removeEventListener('mousemove', handleMouseMove);
-                        document.removeEventListener('mouseup', handleMouseUp);
-                        canvasRef.current.style.cursor = 'crosshair';
-                    };
-                    
-                    document.addEventListener('mousemove', handleMouseMove);
-                    document.addEventListener('mouseup', handleMouseUp);
-                    return;
-                }
-
-                // Select tool (default): drag to select range
-                onSelectRange(startTime, startTime);
-                onPlayheadSet(startTime);
-
-                const handleMouseMove = (moveEvent) => {
-                    const currentX = moveEvent.clientX - rect.left;
-                    const currentTime = Math.max(0, Math.min(duration, (currentX / rect.width) * duration));
-                    onSelectRange(startTime, currentTime);
-                };
-
-                const handleMouseUp = () => {
-                    document.removeEventListener('mousemove', handleMouseMove);
-                    document.removeEventListener('mouseup', handleMouseUp);
-                };
-
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-            };
-
-            const handleContextMenuInternal = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const rect = canvasRef.current.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const clickTime = (x / rect.width) * buffer.duration;
-                onContextMenu(e, clickTime);
-            };
-
-            return (
-                <canvas 
-                    ref={canvasRef} 
-                    className="w-full h-48 rounded border border-zinc-800 cursor-crosshair"
-                    onMouseDown={handleMouseDown}
-                    onContextMenu={handleContextMenuInternal}
-                />
-            );
-        };
-
-        const SubTabToolbar = ({ st, activeTool, setActiveTool, handleSubTabNormalizeWithValue, handleSubTabGainWithValue, handleSubTabPitch, handleSubTabStretch, handleSubTabFade }) => (
-            <div className="daw-header flex h-16 items-center px-4 border-b daw-border gap-3 bg-zinc-800">
-                <div className="flex items-center space-x-1 border-r border-zinc-700 pr-3">
-                    <button className={`p-1.5 rounded ${activeTool === 'select' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('select')} title="Select"><i data-lucide="mouse-pointer" className="w-4 h-4"></i></button>
-                    <button className={`p-1.5 rounded ${activeTool === 'grab' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('grab')} title="Grab"><i data-lucide="hand" className="w-4 h-4"></i></button>
-                    <button className={`p-1.5 rounded ${activeTool === 'razor' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('razor')} title="Razor"><i data-lucide="scissors" className="w-4 h-4"></i></button>
-                    <button className={`p-1.5 rounded ${activeTool === 'pen' ? 'bg-cyan-700' : 'bg-zinc-700'}`} onClick={() => setActiveTool('pen')} title="Pen Tool"><i data-lucide="pen-tool" className="w-4 h-4"></i></button>
-                </div>
-
-                <div className="flex items-center space-x-3 flex-1 overflow-x-auto no-scrollbar">
-                    <div className="flex items-center gap-1">
-                        <span className="text-[10px] text-zinc-400">Normalize:</span>
-                        <input type="range" min="-12" max="0" value={st.effects?.normalizeDb || 0} step="0.1" onChange={(e) => handleSubTabNormalizeWithValue(st.id, parseFloat(e.target.value))} className="w-20 h-1.5"/>
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <span className="text-[10px] text-zinc-400">Gain:</span>
-                        <input type="range" min="-40" max="24" value={st.effects?.gainDb || 0} step="0.1" onChange={(e) => handleSubTabGainWithValue(st.id, parseFloat(e.target.value))} className="w-20 h-1.5"/>
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <span className="text-[10px] text-zinc-400">Pitch:</span>
-                        <input type="range" min="-12" max="12" value={st.effects?.pitch || 0} step="0.1" onChange={(e) => handleSubTabPitch(st.id, parseFloat(e.target.value))} className="w-20 h-1.5"/>
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <span className="text-[10px] text-zinc-400">Stretch:</span>
-                        <input type="range" min="50" max="200" value={st.effects?.speedStretch || 100} step="1" onChange={(e) => handleSubTabStretch(st.id, parseInt(e.target.value))} className="w-20 h-1.5"/>
-                    </div>
-                </div>
-
-                <div className="flex items-center space-x-1 pl-3 border-l border-zinc-700">
-                    <button onClick={() => handleSubTabFade(st.id, 'in')} className="px-2 py-1 text-[10px] rounded hover:bg-zinc-700">Fade In</button>
-                    <button onClick={() => handleSubTabFade(st.id, 'out')} className="px-2 py-1 text-[10px] rounded hover:bg-zinc-700">Fade Out</button>
-                </div>
-            </div>
-        );
-
-        const App = () => {
-            // ── State Definitions ──
-             const [tracks, setTracks] = useState([
-                { id: '1', name: 'Track 01', buffer: null, startTime: 0, height: 96, volume: 0.8, muted: false, solo: false, color: '#0f766e', markers: [], serverFileId: null },
-                { id: '2', name: 'Track 02', buffer: null, startTime: 0, height: 96, volume: 0.8, muted: false, solo: false, color: '#1d4ed8', markers: [], serverFileId: null },
-            ]);
-            const [bpm, setBpm] = useState(localStorage.getItem('studio_bpm') || '120');
-            const [draggedClip, setDraggedClip] = useState(null); // { trackId, clickOffset, buffer, name, volume, color }
-            const [hoveredTrackId, setHoveredTrackId] = useState(null);
-            const [activeTool, setActiveTool] = useState('select'); // 'select' | 'grab' | 'razor'
-            const [snapValue, setSnapValue] = useState('free'); // 'free', '1', '1/2', '1/4', '1/8', '1/16', '1/32'
-
-            const snapTime = (time, snapVal, bpmVal) => {
-                if (snapVal === 'free') return time;
-                const beatDuration = 60 / parseFloat(bpmVal || 120);
-                let divisor = 1;
-                if (snapVal === '1') divisor = 1;
-                else if (snapVal === '1/2') divisor = 0.5;
-                else if (snapVal === '1/4') divisor = 0.25;
-                else if (snapVal === '1/8') divisor = 0.125;
-                else if (snapVal === '1/16') divisor = 0.0625;
-                else if (snapVal === '1/32') divisor = 0.03125;
-                
-                const gridSpacing = beatDuration * divisor;
-                return Math.round(time / gridSpacing) * gridSpacing;
-            };
-
-            const snapValueRef = useRef(snapValue);
-            snapValueRef.current = snapValue;
-            const bpmRef = useRef(bpm);
-            bpmRef.current = bpm;
-            // BMP for Tempo Track - LOOP_EDITOR_2.md §6
-            const [selectedTrackId, setSelectedTrackId] = useState('1');
-            const [currentTime, setCurrentTime] = useState(0);
-            const [isPlaying, setIsPlaying] = useState(false);
-            const [selectionStart, setSelectionStart] = useState(null);
-            const [selectionEnd, setSelectionEnd] = useState(null);
-            const [selectionMode, setSelectionMode] = useState(null); // 'global' (from ruler) | 'local' (from track)
-            const [localSelectionTrackId, setLocalSelectionTrackId] = useState(null);
-            const [localSelectionStart, setLocalSelectionStart] = useState(null);
-            const [localSelectionEnd, setLocalSelectionEnd] = useState(null);
-            const [zoom, setZoom] = useState(100);
-            const [isLoopingSelection, setIsLoopingSelection] = useState(false);
-            const [isExporting, setIsExporting] = useState(false);
-            const [soloedTrackId, setSoloedTrackId] = useState(null);
-            const [toastMessage, setToastMessage] = useState(null);
-            const [showAIConfig, setShowAIConfig] = useState(false);
-            const [aiConfig, setAiConfig] = useState({
-                baseUrl: localStorage.getItem('ai_base_url') || `${API_BASE_URL}`,
-                apiKey: localStorage.getItem('ai_api_key') || '',
-                model: localStorage.getItem('ai_model') || 'deepseek-chat',
-            });
-            const [analysisState, setAnalysisState] = useState({
-                status: 'Sẵn sàng. Chạy AI để phân tích nhịp.',
-                data: null,
-                isRunning: false,
-            });
-            const [exportSettings, setExportSettings] = useState({
-                sampleRate: '44100',
-                bitDepth: '16',
-                format: 'wav',
-            });
-            const [serverStatus, setServerStatus] = useState('checking...');
-            const [menuOpen, setMenuOpen] = useState(null);
-            const [selectedClipId, setSelectedClipId] = useState(null); // { trackId, clipId }
-            const [stretchedClip, setStretchedClip] = useState(null); // { trackId, clipId, originalDuration, startTime, originalSpeed, beforeSnap }
-
-            // ── Context Menu & Clipboard ──
-            const [contextMenu, setContextMenu] = useState(null); // { x, y, trackId }
-            const clipboardRef = useRef(null); // { buffer, name, volume, color } for copy/paste
-
-            // ── Undo/Redo Engine (LOOP_EDITOR.md §4) ──
-            const [undoStack, setUndoStack] = useState([]);
-            const [redoStack, setRedoStack] = useState([]);
-            const MAX_UNDO = 30;
-
-            const pushAction = (actionType, trackId, beforeState, afterState) => {
-                const node = {
-                    action_type: actionType,
-                    track_id: trackId,
-                    timestamp: Date.now(),
-                    before_state: beforeState,
-                    after_state: afterState,
-                };
-                setUndoStack(prev => {
-                    const next = [...prev, node];
-                    if (next.length > MAX_UNDO) next.shift();
-                    return next;
-                });
-                setRedoStack([]);
-            };
-
-            const handleUndo = () => {
-                if (undoStack.length === 0) return;
-                const last = undoStack[undoStack.length - 1];
-                setUndoStack(prev => prev.slice(0, -1));
-                setRedoStack(prev => [...prev, last]);
-                applyTrackState(last.track_id, last.before_state);
-                showToast(`Undo: ${last.action_type}`, 'info');
-            };
-
-            const handleRedo = () => {
-                if (redoStack.length === 0) return;
-                const last = redoStack[redoStack.length - 1];
-                setRedoStack(prev => prev.slice(0, -1));
-                setUndoStack(prev => [...prev, last]);
-                applyTrackState(last.track_id, last.after_state);
-                showToast(`Redo: ${last.action_type}`, 'info');
-            };
-
-            const applyTrackState = (trackId, state) => {
-                setTracks(prev => prev.map(t => {
-                    if (t.id !== trackId) return t;
-                    return { ...t, ...state };
-                }));
-            };
-
-            const captureTrackSnapshot = (trackId) => {
-                const track = tracks.find(t => t.id === trackId);
-                if (!track) return null;
-                return {
-                    volume: track.volume,
-                    muted: track.muted,
-                    name: track.name,
-                    markers: JSON.parse(JSON.stringify(track.markers || [])),
-                    // buffer is captured via reference copy for undo; we store a clone for redo
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    clips: track.clips ? track.clips.map(c => ({
-                        id: c.id,
-                        buffer: c.buffer,
-                        startTime: c.startTime,
-                        name: c.name
-                    })) : null
-                };
-            };
-
-            // ── Tab System (LOOP_EDITOR_2.md §1) ──
-            const [activeTab, setActiveTab] = useState('main');
-            const [subTabs, setSubTabs] = useState([]); // [{id, label, trackId, startTime, endTime, buffer, effects, currentTime, selectionStart, selectionEnd, isPlaying}, ...]
-            const [selectionCleared, setSelectionCleared] = useState(false); // LOOP_EDITOR_2.md §4.2
-
-            // ── Temp Edit Tab (LOOP_EDITOR_2.md §1.2 Sub Tab) ──
-            const [tempTabActive, setTempTabActive] = useState(false);
-            const [tempTabBuffer, setTempTabBuffer] = useState(null);
-            const [tempTabTrackId, setTempTabTrackId] = useState(null);
-            const [tempTabOrigStart, setTempTabOrigStart] = useState(0);
-            const [tempTabOrigEnd, setTempTabOrigEnd] = useState(0);
-            const tempTabCanvasRef = useRef(null);
-
-            // Effect parameters for temp tab
-            const [tempTabEffects, setTempTabEffects] = useState({
-                reverse: false,
-                gainDb: 0,
-                fadeInMs: 0,
-                fadeOutMs: 0,
-            });
-
-            // Lucide icons initialization
-            useEffect(() => {
-                setTimeout(() => {
-                    if (window.lucide) {
-                        window.lucide.createIcons();
-                    }
-                }, 50);
-            }, [activeTool, activeTab]);
-
-             const timelineWrapperRef = useRef(null);
-             const tcpContainerRef = useRef(null);
-
-             const handleTimelineScroll = (e) => {
-                 if (tcpContainerRef.current) {
-                     tcpContainerRef.current.scrollTop = e.currentTarget.scrollTop;
-                 }
-             };
-            const rulerRef = useRef(null);
-            const activeSourcesRef = useRef([]);
-            const startOffsetTimeRef = useRef(0);
-            const startAudioTimeRef = useRef(0);
-            const animationFrameIdRef = useRef(null);
-            const toastTimeoutRef = useRef(null);
-            const rulerDragStartRef = useRef(null);
-            const isDraggingRulerRef = useRef(false);
-            const handlePlayPauseRef = useRef(null);
-
-            // ── Keyboard Shortcuts ──
-            const handleUndoRef = useRef(handleUndo);
-            const handleRedoRef = useRef(handleRedo);
-            handleUndoRef.current = handleUndo;
-            handleRedoRef.current = handleRedo;
-
-            const selectedClipIdRef = useRef(null);
-            selectedClipIdRef.current = selectedClipId;
-            const activeTabRef = useRef(activeTab);
-            activeTabRef.current = activeTab;
-            const subTabsRef = useRef(subTabs);
-            subTabsRef.current = subTabs;
-
-            const handleSubTabNormalize = (tabId) => {
-                setSubTabs(prev => prev.map(st => {
-                    if (st.id !== tabId || !st.buffer) return st;
-                    const ctx = getAudioContext();
-                    const data = st.buffer.getChannelData(0);
-                    const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : 0;
-                    const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : st.buffer.duration;
-                    const startSample = Math.floor(left * st.buffer.sampleRate);
-                    const endSample = Math.floor(right * st.buffer.sampleRate);
-
-                    let maxVal = 0;
-                    for (let i = startSample; i < endSample; i++) {
-                        const abs = Math.abs(data[i]);
-                        if (abs > maxVal) maxVal = abs;
-                    }
-                    if (maxVal === 0) return st;
-
-                    const scale = 1.0 / maxVal;
-                    const clonedBuffer = ctx.createBuffer(1, data.length, st.buffer.sampleRate);
-                    const clonedData = clonedBuffer.getChannelData(0);
-                    clonedData.set(data);
-                    for (let i = startSample; i < endSample; i++) {
-                        clonedData[i] = Math.max(-1, Math.min(1, clonedData[i] * scale));
-                    }
-                    showToast('Đã Normalize vùng chọn.', 'success');
-                    return { ...st, buffer: clonedBuffer };
-                }));
-            };
-
-            const handleSubTabGain = (tabId, gainDb) => {
-                setSubTabs(prev => prev.map(st => {
-                    if (st.id !== tabId || !st.buffer) return st;
-                    const ctx = getAudioContext();
-                    const data = st.buffer.getChannelData(0);
-                    const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : 0;
-                    const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : st.buffer.duration;
-                    const startSample = Math.floor(left * st.buffer.sampleRate);
-                    const endSample = Math.floor(right * st.buffer.sampleRate);
-
-                    const scale = Math.pow(10, gainDb / 20);
-                    const clonedBuffer = ctx.createBuffer(1, data.length, st.buffer.sampleRate);
-                    const clonedData = clonedBuffer.getChannelData(0);
-                    clonedData.set(data);
-                    for (let i = startSample; i < endSample; i++) {
-                        clonedData[i] = Math.max(-1, Math.min(1, clonedData[i] * scale));
-                    }
-                    showToast(`Đã điều chỉnh Gain: ${gainDb} dB.`, 'success');
-                    return { ...st, buffer: clonedBuffer };
-                }));
-            };
-
-            const handleSubTabFade = (tabId, type) => {
-                setSubTabs(prev => prev.map(st => {
-                    if (st.id !== tabId || !st.buffer) return st;
-                    const ctx = getAudioContext();
-                    const data = st.buffer.getChannelData(0);
-                    const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : 0;
-                    const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : st.buffer.duration;
-                    const startSample = Math.floor(left * st.buffer.sampleRate);
-                    const endSample = Math.floor(right * st.buffer.sampleRate);
-                    const durationSamples = endSample - startSample;
-                    if (durationSamples <= 0) return st;
-
-                    const clonedBuffer = ctx.createBuffer(1, data.length, st.buffer.sampleRate);
-                    const clonedData = clonedBuffer.getChannelData(0);
-                    clonedData.set(data);
-
-                    if (type === 'in') {
-                        for (let i = 0; i < durationSamples; i++) {
-                            const alpha = i / durationSamples;
-                            clonedData[startSample + i] *= alpha;
-                        }
-                        showToast('Đã áp dụng Fade In.', 'success');
-                    } else if (type === 'out') {
-                        for (let i = 0; i < durationSamples; i++) {
-                            const alpha = (durationSamples - i) / durationSamples;
-                            clonedData[startSample + i] *= alpha;
-                        }
-                        showToast('Đã áp dụng Fade Out.', 'success');
-                    }
-                    return { ...st, buffer: clonedBuffer };
-                }));
-            };
-
-            const handleSubTabCut = (tabId) => {
-                const st = subTabsRef.current.find(s => s.id === tabId);
-                if (!st || !st.buffer) return;
-                const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
-                const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
-                if (left === null || right === null || left === right) {
-                    showToast('Vui lòng chọn vùng để Cut.', 'warning');
-                    return;
-                }
-                const ctx = getAudioContext();
-                const sr = st.buffer.sampleRate;
-                const data = st.buffer.getChannelData(0);
-                const startSample = Math.floor(left * sr);
-                const endSample = Math.floor(right * sr);
-                const len = endSample - startSample;
-
-                const cutBuffer = ctx.createBuffer(1, len, sr);
-                cutBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
-                clipboardRef.current = { buffer: cutBuffer, name: 'Subtab Clip' };
-
-                const newBuffer = ctx.createBuffer(1, data.length - len, sr);
-                const newData = newBuffer.getChannelData(0);
-                let idx = 0;
-                for (let i = 0; i < startSample; i++) newData[idx++] = data[i];
-                for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
-
-                setSubTabs(prev => prev.map(s => s.id === tabId ? {
-                    ...s,
-                    buffer: newBuffer,
-                    currentTime: left,
-                    selectionStart: null,
-                    selectionEnd: null
-                } : s));
-                showToast('Đã Cut vùng chọn.', 'success');
-            };
-
-            const handleSubTabCopy = (tabId) => {
-                const st = subTabsRef.current.find(s => s.id === tabId);
-                if (!st || !st.buffer) return;
-                const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
-                const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
-                if (left === null || right === null || left === right) {
-                    showToast('Vui lòng chọn vùng để Copy.', 'warning');
-                    return;
-                }
-                const ctx = getAudioContext();
-                const sr = st.buffer.sampleRate;
-                const data = st.buffer.getChannelData(0);
-                const startSample = Math.floor(left * sr);
-                const endSample = Math.floor(right * sr);
-                const len = endSample - startSample;
-
-                const copyBuffer = ctx.createBuffer(1, len, sr);
-                copyBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
-                clipboardRef.current = { buffer: copyBuffer, name: 'Subtab Clip' };
-                showToast('Đã Copy vùng chọn.', 'success');
-            };
-
-            const handleSubTabPaste = (tabId) => {
-                const st = subTabsRef.current.find(s => s.id === tabId);
-                if (!st || !st.buffer) return;
-                if (!clipboardRef.current || !clipboardRef.current.buffer) {
-                    showToast('Clipboard trống.', 'warning');
-                    return;
-                }
-                const ctx = getAudioContext();
-                const clipBuf = clipboardRef.current.buffer;
-                const sr = st.buffer.sampleRate;
-                const data = st.buffer.getChannelData(0);
-                const insertTime = st.currentTime || 0;
-                const insertSample = Math.floor(insertTime * sr);
-
-                const newBuffer = ctx.createBuffer(1, data.length + clipBuf.length, sr);
-                const newData = newBuffer.getChannelData(0);
-
-                let idx = 0;
-                for (let i = 0; i < insertSample; i++) newData[idx++] = data[i];
-                const clipData = clipBuf.getChannelData(0);
-                for (let i = 0; i < clipBuf.length; i++) newData[idx++] = clipData[i];
-                for (let i = insertSample; i < data.length; i++) newData[idx++] = data[i];
-
-                setSubTabs(prev => prev.map(s => s.id === tabId ? {
-                    ...s,
-                    buffer: newBuffer,
-                    currentTime: insertTime + clipBuf.duration,
-                    selectionStart: null,
-                    selectionEnd: null
-                } : s));
-                showToast('Đã dán dữ liệu âm thanh.', 'success');
-            };
-
-            const handleSubTabDelete = (tabId) => {
-                const st = subTabsRef.current.find(s => s.id === tabId);
-                if (!st || !st.buffer) return;
-                const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
-                const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
-                if (left === null || right === null || left === right) {
-                    showToast('Vui lòng chọn vùng để Delete.', 'warning');
-                    return;
-                }
-                const ctx = getAudioContext();
-                const sr = st.buffer.sampleRate;
-                const data = st.buffer.getChannelData(0);
-                const startSample = Math.floor(left * sr);
-                const endSample = Math.floor(right * sr);
-                const len = endSample - startSample;
-
-                const newBuffer = ctx.createBuffer(1, data.length - len, sr);
-                const newData = newBuffer.getChannelData(0);
-                let idx = 0;
-                for (let i = 0; i < startSample; i++) newData[idx++] = data[i];
-                for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
-
-                setSubTabs(prev => prev.map(s => s.id === tabId ? {
-                    ...s,
-                    buffer: newBuffer,
-                    currentTime: left,
-                    selectionStart: null,
-                    selectionEnd: null
-                } : s));
-                showToast('Đã xóa vùng chọn.', 'success');
-            };
-
-            const handleSubTabLoop = (tabId, loopCount) => {
-                const st = subTabsRef.current.find(s => s.id === tabId);
-                if (!st || !st.buffer) return;
-                const left = st.selectionStart !== null && st.selectionEnd !== null ? Math.min(st.selectionStart, st.selectionEnd) : null;
-                const right = st.selectionStart !== null && st.selectionEnd !== null ? Math.max(st.selectionStart, st.selectionEnd) : null;
-                if (left === null || right === null || left === right) {
-                    showToast('Vui lòng chọn vùng để Loop.', 'warning');
-                    return;
-                }
-                const ctx = getAudioContext();
-                const sr = st.buffer.sampleRate;
-                const data = st.buffer.getChannelData(0);
-                const startSample = Math.floor(left * sr);
-                const endSample = Math.floor(right * sr);
-                const len = endSample - startSample;
-
-                // Loop payload N times
-                const segmentData = data.subarray(startSample, endSample);
-                const addedSamples = len * (loopCount - 1);
-                const newBuffer = ctx.createBuffer(1, data.length + addedSamples, sr);
-                const newData = newBuffer.getChannelData(0);
-
-                let idx = 0;
-                for (let i = 0; i < endSample; i++) newData[idx++] = data[i];
-                for (let n = 0; n < loopCount - 1; n++) {
-                    for (let i = 0; i < len; i++) newData[idx++] = segmentData[i];
-                }
-                for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
-
-                setSubTabs(prev => prev.map(s => s.id === tabId ? {
-                    ...s,
-                    buffer: newBuffer,
-                    selectionStart: null,
-                    selectionEnd: null
-                } : s));
-                showToast(`Đã lặp vùng chọn ${loopCount} lần.`, 'success');
-            };
-
-            useEffect(() => {
-                const handler = (e) => {
-                    const ctrl = e.ctrlKey || e.metaKey;
-                    const alt = e.altKey;
-
-                    if (activeTabRef.current !== 'main') {
-                        // Sub-Tab keyboard shortcuts mapping
-                        const curTabId = activeTabRef.current;
-                        if (e.key === ' ' || e.code === 'Space') { e.preventDefault(); if (handlePlayPauseRef.current) handlePlayPauseRef.current(); return; }
-                        if (ctrl && alt && e.key === 'n') { e.preventDefault(); handleSubTabNormalize(curTabId); return; }
-                        if (e.key === 'f' || e.key === 'F') { e.preventDefault(); handleSubTabFade(curTabId, 'in'); return; }
-                        if (e.key === 'g' || e.key === 'G') { e.preventDefault(); handleSubTabFade(curTabId, 'out'); return; }
-                        if (ctrl && e.key === 'l') { e.preventDefault(); handleSubTabLoop(curTabId, 4); return; }
-                        if (e.key === 'v' || e.key === 'V') { e.preventDefault(); const val = prompt("Nhập Gain điều chỉnh (dB):", "0"); if(val) handleSubTabGain(curTabId, parseFloat(val) || 0); return; }
-                        if (ctrl && e.key === 'x') { e.preventDefault(); handleSubTabCut(curTabId); return; }
-                        if (ctrl && e.key === 'c') { e.preventDefault(); handleSubTabCopy(curTabId); return; }
-                        if (ctrl && e.key === 'v') { e.preventDefault(); handleSubTabPaste(curTabId); return; }
-                        if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Del') { e.preventDefault(); handleSubTabDelete(curTabId); return; }
-                        return;
-                    }
-                    if (ctrl && e.key === 'z' && !e.shiftKey) { e.preventDefault(); handleUndoRef.current(); return; }
-                    if (ctrl && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) { e.preventDefault(); handleRedoRef.current(); return; }
-                    if (ctrl && !alt && e.key === 'o') { e.preventDefault(); showToast('Open Project dialog','info'); return; }
-                    if (ctrl && !alt && e.key === 'n') { e.preventDefault(); setTracks([{ id:'1', name:'Track 01', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#0f766e', markers:[], serverFileId:null }, { id:'2', name:'Track 02', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#1d4ed8', markers:[], serverFileId:null }]); setSelectedTrackId('1'); showToast('New project created','info'); return; }
-                    if (ctrl && !alt && e.key === 's') { e.preventDefault(); showToast('Project saved','success'); return; }
-                    if ((ctrl && alt && e.key === 's') || (ctrl && e.shiftKey && e.key === 's')) { e.preventDefault(); showToast('Save As dialog','info'); return; }
-                    if (ctrl && !alt && e.key === 'i') { e.preventDefault(); addNewTrack(); return; }
-                    if (ctrl && alt && e.key === 'i') { e.preventDefault(); showToast('Import audio','info'); return; }
-                    if (ctrl && !alt && e.key === 'e') { e.preventDefault(); openTempTab(); return; }
-                    if (ctrl && !alt && e.key === 'm') { e.preventDefault(); handleMergeTracks(); return; }
-                    if (ctrl && !alt && e.key === 'c') { e.preventDefault(); handleCopyTrack(); return; }
-                    if (ctrl && !alt && e.key === 'x') { e.preventDefault(); handleCutTrack(); return; }
-                    if (ctrl && !alt && e.key === 'v') { e.preventDefault(); handlePasteTrack(); return; }
-                    if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Del') {
-                        const selClip = selectedClipIdRef.current;
-                        if (selClip) {
-                            e.preventDefault();
-                            const { trackId, clipId } = selClip;
-                            setTracks(prev => {
-                                const track = prev.find(t => t.id === trackId);
-                                if (!track) return prev;
-                                
-                                const beforeSnap = captureTrackSnapshotRef.current ? captureTrackSnapshotRef.current(trackId) : null;
-                                const updatedClips = (track.clips || []).filter(c => c.id !== clipId);
-                                const updatedTracks = prev.map(t => {
-                                    if (t.id === trackId) {
-                                        return {
-                                            ...t,
-                                            clips: updatedClips,
-                                            buffer: updatedClips.length > 0 ? updatedClips[0].buffer : null,
-                                            startTime: updatedClips.length > 0 ? updatedClips[0].startTime : 0,
-                                            name: updatedClips.length > 0 ? updatedClips[0].name : `Track ${t.id}`
-                                        };
-                                    }
-                                    return t;
-                                });
-
-                                setTimeout(() => {
-                                    const afterSnap = captureTrackSnapshotRef.current ? captureTrackSnapshotRef.current(trackId) : null;
-                                    pushAction('DELETE_CLIP', trackId, beforeSnap, afterSnap);
-                                }, 50);
-
-                                return updatedTracks;
-                            });
-                            setSelectedClipId(null);
-                            showToast('Đã xóa clip.', 'info');
-                            return;
-                        } else {
-                            e.preventDefault();
-                            handleDeleteTrack();
-                            return;
-                        }
-                    }
-                    if (!ctrl && !alt && e.key === 's') { e.preventDefault(); handleSplitTrack(selectedTrackId); return; }
-                };
-                window.addEventListener('keydown', handler);
-                return () => window.removeEventListener('keydown', handler);
-            }, []);
-
-            // ── Temp Tab: draw isolated waveform ──
-            useEffect(() => {
-                if (!tempTabActive || !tempTabBuffer || !tempTabCanvasRef.current) return;
-                const canvas = tempTabCanvasRef.current;
-                const ctx = canvas.getContext('2d');
-                const dpr = window.devicePixelRatio || 1;
-                const rect = canvas.getBoundingClientRect();
-                canvas.width = rect.width * dpr;
-                canvas.height = rect.height * dpr;
-                ctx.scale(dpr, dpr);
-
-                const w = rect.width;
-                const h = rect.height;
-                ctx.fillStyle = '#181818';
-                ctx.fillRect(0, 0, w, h);
-
-                const data = tempTabBuffer.getChannelData(0);
-                const sr = tempTabBuffer.sampleRate;
-                const totalSamples = data.length;
-                if (totalSamples === 0) return;
-
-                ctx.strokeStyle = '#6ee7b7';
-                ctx.lineWidth = 1;
-
-                for (let px = 0; px < w; px++) {
-                    const startSample = Math.floor((px / w) * totalSamples);
-                    const endSample = Math.floor(((px + 1) / w) * totalSamples);
-                    let maxVal = 0;
-                    for (let i = startSample; i < endSample && i < totalSamples; i++) {
-                        const abs = Math.abs(data[i]);
-                        if (abs > maxVal) maxVal = abs;
-                    }
-                    const mid = h / 2;
-                    const peakHeight = maxVal * (h * 0.4);
-                    ctx.beginPath();
-                    ctx.moveTo(px, mid - peakHeight);
-                    ctx.lineTo(px, mid + peakHeight);
-                    ctx.stroke();
-                }
-            }, [tempTabActive, tempTabBuffer]);
-
-            // ── Sub Tab: open as new tab instead of modal (LOOP_EDITOR_2.md §1) ──
-            const openTempTab = () => {
-                const useLocal = selectionMode === 'local' && localSelectionTrackId;
-                const trackId = useLocal ? localSelectionTrackId : selectedTrackId;
-                const t = tracks.find(x => x.id === trackId);
-                if (!t || !t.buffer) {
-                    showToast('Vui lòng chọn track có dữ liệu âm thanh.', 'warning');
-                    return;
-                }
-                if (selLeft === null || selRight === null || selRight <= selLeft) {
-                    showToast('Vui lòng chọn một khoảng thời gian trên sóng âm.', 'warning');
-                    return;
-                }
-                const sr = t.buffer.sampleRate;
-                const trackStart = t.startTime || 0;
-                const relSelLeft = Math.max(0, selLeft - trackStart);
-                const relSelRight = Math.max(0, selRight - trackStart);
-                const startSample = Math.max(0, Math.floor(relSelLeft * sr));
-                const endSample = Math.min(t.buffer.length, Math.floor(relSelRight * sr));
-                const len = endSample - startSample;
-                if (len < 100) {
-                    showToast('Khoảng chọn quá ngắn.', 'warning');
-                    return;
-                }
-
-                const ctx = getAudioContext();
-                const subBuffer = ctx.createBuffer(1, len, sr);
-                subBuffer.copyToChannel(t.buffer.getChannelData(0).subarray(startSample, endSample), 0);
-
-                const tabId = 'subtab_' + Date.now();
-                const tabLabel = `Edit_${t.name.replace('.wav','').slice(0,10)}_${selLeft.toFixed(1)}s`;
-
-                setSubTabs(prev => [...prev, {
-                    id: tabId,
-                    label: tabLabel,
-                    trackId: trackId,
-                    startTime: selLeft,
-                    endTime: selRight,
-                    buffer: subBuffer,
-                    effects: { reverse: false, gainDb: 0, fadeInMs: 0, fadeOutMs: 0, normalizeDb: 0, pitch: 0, speedStretch: 100 },
-                    currentTime: 0,
-                    selectionStart: null,
-                    selectionEnd: null,
-                    isPlaying: false
-                }]);
-                setActiveTab(tabId);
-                showToast(`Đã tạo Sub Tab: ${tabLabel}. Chỉnh sửa và Apply để gộp lại.`, 'info');
-            };
-
-             const handleEditClipInSubTab = (trackId, clipId) => {
-                 const track = tracks.find(t => t.id === trackId);
-                 if (!track) return;
-                 
-                 const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                     id: 'default_' + track.id,
-                     buffer: track.buffer,
-                     startTime: track.startTime || 0,
-                     name: track.name
-                 }] : []);
-                 
-                 const clip = clips.find(c => c.id === clipId || (clipId === 'default' && c.id === 'default_' + trackId));
-                 if (!clip || !clip.buffer) return;
-
-                 const sr = clip.buffer.sampleRate;
-                 const len = clip.buffer.length;
-                 const ctx = getAudioContext();
-                 const subBuffer = ctx.createBuffer(1, len, sr);
-                 subBuffer.copyToChannel(clip.buffer.getChannelData(0), 0);
-
-                 const tabId = 'subtab_' + Date.now();
-                 const tabLabel = `Edit_${clip.name.replace('.wav','').slice(0,10)}`;
-
-                  setSubTabs(prev => [...prev, {
-                      id: tabId,
-                      label: tabLabel,
-                      trackId: trackId,
-                      clipId: clip.id === 'default' ? 'default_' + trackId : clip.id,
-                      startTime: clip.startTime,
-                      endTime: clip.startTime + clip.buffer.duration,
-                      buffer: subBuffer,
-                      effects: { reverse: false, gainDb: 0, fadeInMs: 0, fadeOutMs: 0, normalizeDb: 0, pitch: 0, speedStretch: 100 },
-                      currentTime: 0,
-                      selectionStart: null,
-                      selectionEnd: null,
-                      isPlaying: false
-                  }]);
-                 setActiveTab(tabId);
-                 showToast(`Đã tạo Sub Tab: ${tabLabel}. Chỉnh sửa và Apply để gộp lại.`, 'info');
-             };
-
-             // ── Sub Tab: apply effects & merge back (LOOP_EDITOR_2.md §1.2) ──
-             const applySubTab = (tabId) => {
-                 const subTab = subTabs.find(s => s.id === tabId);
-                 if (!subTab || !subTab.buffer) return;
-                 const track = tracks.find(t => t.id === subTab.trackId);
-                 if (!track || !track.buffer) return;
-
-                 const beforeSnap = captureTrackSnapshot(subTab.trackId);
-
-                 // Clone buffer and apply effects
-                 const ctx = getAudioContext();
-                 const eff = subTab.buffer.getChannelData(0);
-                 const edBuffer = ctx.createBuffer(1, eff.length, subTab.buffer.sampleRate);
-                 const edData = edBuffer.getChannelData(0);
-                 edData.set(eff);
-
-                 // Apply effects inline
-                 const fx = subTab.effects || {};
-                 // Reverse
-                 if (fx.reverse) {
-                     const reversed = new Float32Array(edData);
-                     for (let i = 0; i < edData.length; i++) reversed[i] = edData[edData.length - 1 - i];
-                     edBuffer.copyToChannel(reversed, 0);
-                 }
-                 // Gain
-                 if (fx.gainDb !== 0) {
-                     const gain = Math.pow(10, fx.gainDb / 20);
-                     for (let i = 0; i < edData.length; i++) edData[i] = Math.max(-1, Math.min(1, edData[i] * gain));
-                 }
-                 // Fade in
-                 if (fx.fadeInMs > 0) {
-                     const sr = edBuffer.sampleRate;
-                     const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeInMs / 1000 * sr));
-                     for (let i = 0; i < fadeSamples; i++) edData[i] = edData[i] * (i / fadeSamples);
-                 }
-// Fade out
-                  if (fx.fadeOutMs > 0) {
-                      const sr = edBuffer.sampleRate;
-                      const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeOutMs / 1000 * sr));
-                      for (let i = edData.length - fadeSamples; i < edData.length; i++) {
-                          edData[i] = edData[i] * ((edData.length - 1 - i) / fadeSamples);
-                      }
-                  }
-                  // Normalize (apply to selection or entire buffer)
-                  if (fx.normalizeDb !== 0) {
-                      const targetDb = fx.normalizeDb;
-                      let maxVal = 0;
-                      for (let i = 0; i < edData.length; i++) {
-                          const abs = Math.abs(edData[i]);
-                          if (abs > maxVal) maxVal = abs;
-                      }
-                      if (maxVal > 0) {
-                          const targetAmp = Math.pow(10, targetDb / 20);
-                          const scale = targetAmp / maxVal;
-                          for (let i = 0; i < edData.length; i++) {
-                              edData[i] = Math.max(-1, Math.min(1, edData[i] * scale));
-                          }
-                      }
-                  }
-                  // Pitch shift (simple resample)
-                  if (fx.pitch !== 0) {
-                      const ratio = Math.pow(2, fx.pitch / 12);
-                      const newLength = Math.round(edData.length / ratio);
-                      const newData = new Float32Array(newLength);
-                      for (let i = 0; i < newLength; i++) {
-                          const srcIdx = i * ratio;
-                          const idx0 = Math.floor(srcIdx);
-                          const idx1 = Math.min(idx0 + 1, edData.length - 1);
-                          const frac = srcIdx - idx0;
-                          newData[i] = edData[idx0] * (1 - frac) + edData[idx1] * frac;
-                      }
-                      edData.set(newData);
-                  }
-                  // Speed stretch
-                  if (fx.speedStretch !== 100) {
-                      const ratio = fx.speedStretch / 100;
-                      const newLength = Math.round(edData.length * ratio);
-                      const newData = new Float32Array(newLength);
-                      for (let i = 0; i < newLength; i++) {
-                          const srcIdx = i / ratio;
-                          const idx0 = Math.floor(srcIdx);
-                          const idx1 = Math.min(idx0 + 1, edData.length - 1);
-                          const frac = srcIdx - idx0;
-                          newData[i] = edData[idx0] * (1 - frac) + edData[idx1] * frac;
-                      }
-                      edData.set(newData);
-                  }
-
-                 if (subTab.clipId) {
-                     // Clip-based merge
-                     setTracks(prev => prev.map(t => {
-                         if (t.id !== subTab.trackId) return t;
-                         const updatedClips = (t.clips || []).map(c => {
-                             if (c.id === subTab.clipId) {
-                                 return {
-                                     ...c,
-                                     buffer: edBuffer,
-                                     name: c.name.endsWith('(edited)') ? c.name : c.name + ' (edited)'
-                                 };
-                             }
-                             return c;
-                         });
-                         return {
-                             ...t,
-                             clips: updatedClips,
-                             buffer: updatedClips[0]?.buffer,
-                             startTime: updatedClips[0]?.startTime || 0,
-                             name: updatedClips[0]?.name || t.name
-                         };
-                     }));
-                 } else {
-                     // Crossfade merge into original track (§2.2)
-                     const sr = track.buffer.sampleRate;
-                     const origData = track.buffer.getChannelData(0);
-                     const trackStart = track.startTime || 0;
-                     const startSample = Math.floor((subTab.startTime - trackStart) * sr);
-                     const endSample = Math.floor((subTab.endTime - trackStart) * sr);
-                     const crossfadeLen = Math.min(100, Math.floor(0.01 * sr)); // 10ms
-
-                     const mergedBuffer = ctx.createBuffer(1, track.buffer.length, sr);
-                     const mergedData = mergedBuffer.getChannelData(0);
-                     for (let i = 0; i < startSample; i++) mergedData[i] = origData[i];
-                     for (let i = endSample; i < track.buffer.length; i++) mergedData[i] = origData[i];
-
-                     for (let i = 0; i < edData.length; i++) {
-                         const globalIdx = startSample + i;
-                         let val = edData[i];
-                         if (i < crossfadeLen) {
-                             const alpha = i / crossfadeLen;
-                             val = (1 - alpha) * (origData[globalIdx] || 0) + alpha * edData[i];
-                         } else if (i > edData.length - crossfadeLen) {
-                             const distFromEnd = edData.length - 1 - i;
-                             const alpha = distFromEnd / crossfadeLen;
-                             const origEndIdx = endSample - (edData.length - i);
-                             val = alpha * (origEndIdx >= 0 ? origData[origEndIdx] : 0) + (1 - alpha) * edData[i];
-                         }
-                         mergedData[globalIdx] = val;
-                     }
-
-                     setTracks(prev => prev.map(t => {
-                         if (t.id !== subTab.trackId) return t;
-                         return { ...t, buffer: mergedBuffer, name: t.name + ' (edited)' };
-                     }));
-                 }
-
-                 const afterSnap = captureTrackSnapshot(subTab.trackId);
-                 pushAction('EDIT_TAB', subTab.trackId, beforeSnap, afterSnap);
-
-                  // Tab Lifetime: Engaging the Apply trigger propagates data back to the primary environment but does not close down the active sub-tab view.
-                  // closeSubTab(tabId);
-                  showToast('Đã áp dụng chỉnh sửa vào track chính.', 'success');
-             };
-
-            const closeSubTab = (tabId) => {
-                setSubTabs(prev => prev.filter(s => s.id !== tabId));
-                if (activeTab === tabId) setActiveTab('main');
-            };
-
-            const updateSubTabEffects = (tabId, effects) => {
-                setSubTabs(prev => prev.map(s => s.id === tabId ? { ...s, effects: { ...s.effects, ...effects } } : s));
-            };
-
-            const handleSubTabNormalizeWithValue = (tabId, normalizeDb) => {
-                updateSubTabEffects(tabId, { normalizeDb });
-            };
-
-            const handleSubTabGainWithValue = (tabId, gainDb) => {
-                updateSubTabEffects(tabId, { gainDb });
-            };
-
-            const handleSubTabPitch = (tabId, pitch) => {
-                updateSubTabEffects(tabId, { pitch });
-            };
-
-            const handleSubTabStretch = (tabId, speedStretch) => {
-                updateSubTabEffects(tabId, { speedStretch });
-            };
-
-            const handleSubTabFadeState = (tabId, type) => {
-                const st = subTabs.find(s => s.id === tabId);
-                if (!st) return;
-                const fx = st.effects || {};
-                if (type === 'in') {
-                    updateSubTabEffects(tabId, { fadeInMs: (fx.fadeInMs || 0) + 10 });
-                } else if (type === 'out') {
-                    updateSubTabEffects(tabId, { fadeOutMs: (fx.fadeOutMs || 0) + 10 });
-                }
-            };
-
-            // ── Context Menu Handlers ──
-            const handleContextMenu = (e, trackId, clickTime) => {
-                e.preventDefault();
-                e.stopPropagation();
-                setContextMenu({ x: e.clientX, y: e.clientY, trackId, time: clickTime || currentTime });
-            };
-
-            const closeContextMenu = () => setContextMenu(null);
-
-            // Close context menu on any click outside
-            useEffect(() => {
-                const handler = () => { if (contextMenu) closeContextMenu(); };
-                if (contextMenu) {
-                    window.addEventListener('click', handler);
-                    return () => window.removeEventListener('click', handler);
-                }
-            }, [contextMenu]);
-
-            const contextMenuEdit = () => {
-                const track = tracks.find(t => t.id === contextMenu.trackId);
-                if (track) setSelectedTrackId(contextMenu.trackId);
-                closeContextMenu();
-
-                const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default',
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name,
-                    speed: track.speed || 1.0
-                }] : []);
-                const clickedClip = clips.find(c => contextMenu.time >= c.startTime && contextMenu.time < c.startTime + c.buffer.duration / (c.speed || 1.0));
-
-                if (clickedClip) {
-                    handleEditClipInSubTab(contextMenu.trackId, clickedClip.id);
-                } else {
-                    openTempTab();
-                }
-            };
-
-            const contextMenuSplit = () => {
-                closeContextMenu();
-                handleSplitTrack(contextMenu.trackId);
-            };
-
-            const contextMenuDelete = () => {
-                const tid = contextMenu.trackId;
-                const beforeSnap = captureTrackSnapshot(tid);
-                setTracks(prev => prev.filter(t => t.id !== tid));
-                const afterSnap = captureTrackSnapshot(tid);
-                pushAction('DELETE', tid, beforeSnap, afterSnap);
-                if (selectedTrackId === tid) {
-                    setSelectedTrackId(tracks.filter(t => t.id !== tid)[0]?.id || '1');
-                }
-                closeContextMenu();
-                showToast('Đã xoá track.', 'info');
-            };
-
-            const contextMenuCopy = () => {
-                const track = tracks.find(t => t.id === contextMenu.trackId);
-                if (!track) return;
-                clipboardRef.current = {
-                    buffer: track.buffer,
-                    name: track.name,
-                    volume: track.volume,
-                    color: track.color,
-                };
-                closeContextMenu();
-                showToast('Đã sao chép track vào clipboard.', 'info');
-            };
-
-            const contextMenuCut = () => {
-                const t = tracks.find(x => x.id === contextMenu.trackId);
-                if (!t || !t.buffer) { contextMenuDelete(); return; }
-                const beforeSnap = captureTrackSnapshot(contextMenu.trackId);
-                const sr = t.buffer.sampleRate;
-                const data = t.buffer.getChannelData(0);
-                if (selLeft !== null && selRight !== null && selRight > selLeft) {
-                    const trackStart = t.startTime || 0;
-                    const relSelLeft = Math.max(0, selLeft - trackStart);
-                    const relSelRight = Math.max(0, selRight - trackStart);
-                    const startSample = Math.floor(relSelLeft * sr);
-                    const endSample = Math.min(data.length, Math.floor(relSelRight * sr));
-                    const len = endSample - startSample;
-                    if (len > 0) {
-                        const ctx = getAudioContext();
-                        const clipBuffer = ctx.createBuffer(1, len, sr);
-                        clipBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
-                        clipboardRef.current = { buffer: clipBuffer, name: t.name, volume: t.volume, color: t.color };
-                        const newLen = data.length - len;
-                        const newBuffer = ctx.createBuffer(1, newLen, sr);
-                        const newData = newBuffer.getChannelData(0);
-                        let idx = 0;
-                        for (let i = 0; i < startSample; i++) newData[idx++] = data[i];
-                        for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
-                        setTracks(p => p.map(tr => tr.id === contextMenu.trackId ? { ...tr, buffer: newBuffer } : tr));
-                        const afterSnap = captureTrackSnapshot(contextMenu.trackId);
-                        pushAction('CUT', contextMenu.trackId, beforeSnap, afterSnap);
-                        closeContextMenu();
-                        showToast('Đã cắt vùng chọn vào clipboard.', 'info');
-                        return;
-                    }
-                }
-                contextMenuCopy();
-                contextMenuDelete();
-            };
-
-             const doPaste = (targetTrackId, pasteTime) => {
-                if (!clipboardRef.current || !clipboardRef.current.buffer) {
-                    showToast('Clipboard trống.', 'warning');
-                    return null;
-                }
-                const { buffer: clipBuffer, name, volume, color } = clipboardRef.current;
-                const ctx = getAudioContext();
-
-                const targetTrack = tracks.find(t => t.id === targetTrackId);
-                const newClip = {
-                    id: 'clip_' + Date.now() + '_' + Math.floor(Math.random() * 1000),
-                    startTime: pasteTime,
-                    buffer: clipBuffer,
-                    name: name || 'Pasted Clip'
-                };
-
-                if (targetTrack) {
-                    setTracks(p => p.map(t => {
-                        if (t.id === targetTrackId) {
-                            const existingClips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
-                                id: 'default_' + t.id,
-                                buffer: t.buffer,
-                                startTime: t.startTime || 0,
-                                name: t.name
-                            }] : []);
-                            
-                            const updatedClips = [...existingClips, newClip];
-                            
-                            return { 
-                                ...t, 
-                                clips: updatedClips,
-                                buffer: updatedClips[0].buffer,
-                                startTime: updatedClips[0].startTime,
-                                name: name || t.name,
-                                volume: volume || t.volume, 
-                                color: color || t.color 
-                            };
-                        }
-                        return t;
-                    }));
-                    setCurrentTime(pasteTime);
-                    showToast('Đã dán clip vào track.', 'success');
-                    return targetTrackId;
-                }
-                
-                // No matching track — create a new one
-                const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
-                const newId = 'track_pasted_' + Date.now();
-                setTracks(prev => [...prev, {
-                    id: newId, 
-                    name: `Pasted_${name || 'track'}`, 
-                    buffer: clipBuffer,
-                    startTime: pasteTime,
-                    clips: [newClip],
-                    volume: volume || 0.8, muted: false, solo: false,
-                    color: color || colors[prev.length % colors.length],
-                    markers: [], serverFileId: null,
-                }]);
-                setSelectedTrackId(newId);
-                setCurrentTime(pasteTime);
-                showToast('Đã dán track mới từ clipboard.', 'success');
-                return newId;
-            };
-
-            const handlePasteTrack = () => doPaste(selectedTrackId, currentTime);
-
-            const contextMenuPaste = () => {
-                const result = doPaste(contextMenu.trackId, contextMenu.time || currentTime);
-                closeContextMenu();
-            };
-
-            const contextMenuMerge = () => {
-                const activeTracks = tracks.filter(t => t.buffer && !t.muted);
-                if (activeTracks.length < 2) {
-                    showToast('Cần ít nhất 2 track có dữ liệu để merge.', 'warning');
-                    closeContextMenu();
-                    return;
-                }
-                const ctx = getAudioContext();
-                const maxDur = Math.max(...activeTracks.map(t => (t.startTime || 0) + t.buffer.duration));
-                const sr = activeTracks[0].buffer.sampleRate;
-                const merged = ctx.createBuffer(1, Math.ceil(maxDur * sr), sr);
-                const mergedData = merged.getChannelData(0);
-                activeTracks.forEach(t => {
-                    const data = t.buffer.getChannelData(0);
-                    const startSample = Math.floor((t.startTime || 0) * sr);
-                    for (let i = 0; i < data.length; i++) {
-                        if (startSample + i < mergedData.length) {
-                            mergedData[startSample + i] += data[i] * t.volume;
-                        }
-                    }
-                });
-                let maxPeak = 0;
-                for (let i = 0; i < mergedData.length; i++) {
-                    const abs = Math.abs(mergedData[i]);
-                    if (abs > maxPeak) maxPeak = abs;
-                }
-                if (maxPeak > 1.0) {
-                    for (let i = 0; i < mergedData.length; i++) mergedData[i] /= maxPeak;
-                }
-                const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
-                const newId = 'track_merged_' + Date.now();
-                const names = activeTracks.map(t => t.name).join('+').slice(0, 30);
-                setTracks(prev => [...prev, {
-                    id: newId, name: `Merged_${names}.wav`, buffer: merged, startTime: 0,
-                    volume: 0.8, muted: false, solo: false,
-                    color: colors[prev.length % colors.length], markers: [], serverFileId: null,
-                }]);
-                setSelectedTrackId(newId);
-                closeContextMenu();
-                showToast(`Đã merge ${activeTracks.length} tracks.`, 'success');
-            };
-
-            // Menu bar direct handlers (don't rely on contextMenu state)
-            const handleMergeTracks = () => {
-                const at = tracks.filter(t => t.buffer && !t.muted);
-                if (at.length < 2) { showToast('Cần 2+ tracks để merge.','warning'); return; }
-                const actx = getAudioContext();
-                const maxDur = Math.max(...at.map(t => (t.startTime || 0) + t.buffer.duration));
-                const sr = at[0].buffer.sampleRate;
-                const mb = actx.createBuffer(1, Math.ceil(maxDur * sr), sr);
-                const mdata = mb.getChannelData(0);
-                at.forEach(t => {
-                    const d = t.buffer.getChannelData(0);
-                    const startSample = Math.floor((t.startTime || 0) * sr);
-                    for (let i = 0; i < d.length; i++) {
-                        if (startSample + i < mdata.length) {
-                            mdata[startSample + i] += d[i] * t.volume;
-                        }
-                    }
-                });
-                let mp = 0; for (let i=0;i<mdata.length;i++) { const a=Math.abs(mdata[i]); if (a>mp) mp=a; }
-                if (mp > 1.0) for (let i=0;i<mdata.length;i++) mdata[i] /= mp;
-                setTracks(p => [...p, { id:'merged_'+Date.now(), name:'Merged_mix.wav', buffer:mb, startTime: 0, height: 96, volume:0.8, muted:false, solo:false, color:['#0f766e','#1d4ed8'][p.length%2], markers:[], serverFileId:null }]);
-                showToast('Merged all unmuted tracks.','success');
-            };
-            const handleCopyTrack = () => {
-                const t = tracks.find(x => x.id === selectedTrackId);
-                if (!t || !t.buffer) return;
-                const sr = t.buffer.sampleRate;
-                const data = t.buffer.getChannelData(0);
-                // If selection exists, copy only the selected region
-                if (selLeft !== null && selRight !== null && selRight > selLeft) {
-                    const trackStart = t.startTime || 0;
-                    const relSelLeft = Math.max(0, selLeft - trackStart);
-                    const relSelRight = Math.max(0, selRight - trackStart);
-                    const startSample = Math.floor(relSelLeft * sr);
-                    const endSample = Math.min(data.length, Math.floor(relSelRight * sr));
-                    const len = endSample - startSample;
-                    if (len > 0) {
-                        const ctx = getAudioContext();
-                        const clipBuffer = ctx.createBuffer(1, len, sr);
-                        clipBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
-                        clipboardRef.current = { buffer: clipBuffer, name: t.name, volume: t.volume, color: t.color };
-                        showToast('Copied selection to clipboard.', 'info');
-                        return;
-                    }
-                }
-                // No selection: copy entire track
-                clipboardRef.current = { buffer: t.buffer, name: t.name, volume: t.volume, color: t.color };
-                showToast('Copied track to clipboard.', 'info');
-            };
-            const handleCutTrack = () => {
-                const t = tracks.find(x => x.id === selectedTrackId);
-                if (!t || !t.buffer) return;
-                const beforeSnap = captureTrackSnapshot(selectedTrackId);
-                const sr = t.buffer.sampleRate;
-                const data = t.buffer.getChannelData(0);
-                // If selection exists, cut only the selected region
-                if (selLeft !== null && selRight !== null && selRight > selLeft) {
-                    const trackStart = t.startTime || 0;
-                    const relSelLeft = Math.max(0, selLeft - trackStart);
-                    const relSelRight = Math.max(0, selRight - trackStart);
-                    const startSample = Math.floor(relSelLeft * sr);
-                    const endSample = Math.min(data.length, Math.floor(relSelRight * sr));
-                    const len = endSample - startSample;
-                    if (len > 0) {
-                        // Copy selection to clipboard
-                        const ctx = getAudioContext();
-                        const clipBuffer = ctx.createBuffer(1, len, sr);
-                        clipBuffer.copyToChannel(data.subarray(startSample, endSample), 0);
-                        clipboardRef.current = { buffer: clipBuffer, name: t.name, volume: t.volume, color: t.color };
-                        // Remove selection from track, glue the two remaining parts
-                        const newLen = data.length - len;
-                        const newBuffer = ctx.createBuffer(1, newLen, sr);
-                        const newData = newBuffer.getChannelData(0);
-                        let idx = 0;
-                        for (let i = 0; i < startSample; i++) newData[idx++] = data[i];
-                        for (let i = endSample; i < data.length; i++) newData[idx++] = data[i];
-                        setTracks(p => p.map(tr => tr.id === selectedTrackId ? { ...tr, buffer: newBuffer } : tr));
-                        const afterSnap = captureTrackSnapshot(selectedTrackId);
-                        pushAction('CUT', selectedTrackId, beforeSnap, afterSnap);
-                        showToast('Cut selection to clipboard.', 'info');
-                        return;
-                    }
-                }
-                // No selection: cut entire track (copy + delete)
-                handleCopyTrack();
-                handleDeleteTrack();
-            };
-            const handleDeleteTrack = () => {
-                const tid = selectedTrackId;
-                setTracks(p => p.filter(t => t.id !== tid));
-                setSelectedTrackId(tracks.filter(t => t.id !== tid)[0]?.id || '1');
-                showToast('Deleted track.','info');
-            };
-
-            // ── Server Health Check ──
-            const [viewportWidth, setViewportWidth] = useState(1200);
-
-            useEffect(() => {
-                const wrapper = timelineWrapperRef.current;
-                if (!wrapper) return;
-                const observer = new ResizeObserver(entries => {
-                    for (let entry of entries) {
-                        setViewportWidth(entry.contentRect.width);
-                    }
-                });
-                observer.observe(wrapper);
-                return () => observer.disconnect();
-            }, []);
-
-            useEffect(() => {
-                fetch(API_BASE_URL)
-                    .then(r => { if (r.ok) setServerStatus('connected'); else setServerStatus('error'); })
-                    .catch(() => setServerStatus('offline'));
-            }, []);
-
-            // ── Computed Values ──
-            const maxDuration = useMemo(() => {
-                let max = 10;
-                tracks.forEach(t => {
-                    const clips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
-                        id: 'default',
-                        buffer: t.buffer,
-                        startTime: t.startTime || 0,
-                        name: t.name,
-                        speed: t.speed || 1.0
-                    }] : []);
-                    clips.forEach(c => {
-                        if (c.buffer) {
-                            const cStart = c.startTime || 0;
-                            const cDur = c.buffer.duration / (c.speed || 1.0);
-                            max = Math.max(max, cStart + cDur);
-                        }
-                    });
-                });
-                return max;
-            }, [tracks]);
-
-            const maxDurationRef = useRef(maxDuration);
-            maxDurationRef.current = maxDuration;
-
-            const minZoom = useMemo(() => {
-                return viewportWidth / maxDuration;
-            }, [viewportWidth, maxDuration]);
-
-            const timelineWidth = useMemo(() => {
-                return Math.max(zoom * maxDuration, viewportWidth);
-            }, [zoom, maxDuration, viewportWidth]);
-
-            useEffect(() => {
-                if (zoom < minZoom) {
-                    setZoom(minZoom);
-                }
-            }, [minZoom]);
-
-            const playheadLeftPos = useMemo(() => currentTime * zoom, [currentTime, zoom]);
-
-            const selLeft = useMemo(() => {
-                if (selectionMode === 'local' && localSelectionStart !== null && localSelectionEnd !== null) {
-                    return Math.min(localSelectionStart, localSelectionEnd);
-                }
-                if (selectionStart === null || selectionEnd === null) return null;
-                return Math.min(selectionStart, selectionEnd);
-            }, [selectionStart, selectionEnd, selectionMode, localSelectionStart, localSelectionEnd]);
-
-            const selRight = useMemo(() => {
-                if (selectionMode === 'local' && localSelectionStart !== null && localSelectionEnd !== null) {
-                    return Math.max(localSelectionStart, localSelectionEnd);
-                }
-                if (selectionStart === null || selectionEnd === null) return null;
-                return Math.max(selectionStart, selectionEnd);
-            }, [selectionStart, selectionEnd, selectionMode, localSelectionStart, localSelectionEnd]);
-
-            // ── Toast helper ──
-            const showToast = (text, type = 'info') => {
-                if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
-                setToastMessage({ text, type });
-                toastTimeoutRef.current = setTimeout(() => setToastMessage(null), 3500);
-            };
-
-            // ── Server-side upload ──
-            const uploadToServer = async (file, trackId) => {
-                const formData = new FormData();
-                formData.append('file', file);
-                
-                try {
-                    const resp = await fetch(`${API_AUDIO}/upload`, {
-                        method: 'POST',
-                        body: formData,
-                    });
-                    if (!resp.ok) throw new Error(`Upload failed: ${resp.status}`);
-                    const data = await resp.json();
-                    serverFileIdMap[trackId] = data.file_id;
-                    return data;
-                } catch (err) {
-                    console.warn('Server upload failed, using client-side only:', err.message);
-                    return null;
-                }
-            };
-
-            // ── Server-side waveform loading ──
-            const loadServerWaveform = async (fileId) => {
-                try {
-                    const resp = await fetch(`${API_AUDIO}/waveform/${fileId}?num_peaks=800`);
-                    if (!resp.ok) return null;
-                    return await resp.json();
-                } catch {
-                    return null;
-                }
-            };
-
-            // ── Check Celery task result ──
-            const pollTaskResult = async (taskId, maxPoll = 10) => {
-                for (let i = 0; i < maxPoll; i++) {
-                    await new Promise(r => setTimeout(r, 1500));
-                    try {
-                        const resp = await fetch(`${API_TASKS}/${taskId}`);
-                        if (!resp.ok) continue;
-                        const data = await resp.json();
-                        if (data.status === 'SUCCESS') return data.result;
-                        if (data.status === 'FAILURE') throw new Error(data.error || 'Task failed');
-                    } catch (err) {
-                        throw err;
-                    }
-                }
-                throw new Error('Task polling timeout');
-            };
-
-            // ── Wheel Zoom ──
-            useEffect(() => {
-                const timeline = timelineWrapperRef.current;
-                if (!timeline) return;
-
-                const handleWheel = (e) => {
-                    if (e.ctrlKey || e.metaKey) {
-                        e.preventDefault();
-                        const rect = timeline.getBoundingClientRect();
-                        const mouseXInViewport = e.clientX - rect.left;
-                        const mouseXInCanvas = mouseXInViewport + timeline.scrollLeft;
-                        const anchorTime = mouseXInCanvas / zoom;
-
-                        const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
-
-                        setZoom(prevZoom => {
-                            let newZoom = prevZoom * zoomFactor;
-                            if (newZoom < minZoom) newZoom = minZoom;
-                            if (newZoom > 2000) newZoom = 2000;
-
-                            const newMouseXInCanvas = anchorTime * newZoom;
-                            requestAnimationFrame(() => {
-                                timeline.scrollLeft = newMouseXInCanvas - mouseXInViewport;
-                            });
-                            return newZoom;
-                        });
-                    } else if (e.shiftKey) {
-                        e.preventDefault();
-                        timeline.scrollLeft += e.deltaY;
-                    }
-                };
-
-                timeline.addEventListener('wheel', handleWheel, { passive: false });
-                return () => timeline.removeEventListener('wheel', handleWheel);
-            }, [zoom, minZoom, maxDuration]);
-
-            // ── Update Playhead ──
-            const updatePlayhead = () => {
-                if (activeTab !== 'main') {
-                    const st = subTabs.find(s => s.id === activeTab);
-                    if (!st || !st.isPlaying || !st.buffer) return;
-                    const context = getAudioContext();
-                    const elapsed = context.currentTime - startAudioTimeRef.current;
-                    const updatedTime = startOffsetTimeRef.current + elapsed;
-
-                    // Loop sub-tab selection
-                    if (st.selectionStart !== null && st.selectionEnd !== null && st.selectionStart !== st.selectionEnd) {
-                        const start = Math.min(st.selectionStart, st.selectionEnd);
-                        const end = Math.max(st.selectionStart, st.selectionEnd);
-                        if (updatedTime >= end) {
-                            stopAllPlayback();
-                            setSubTabs(prev => prev.map(s => s.id === activeTab ? {
-                                ...s,
-                                currentTime: start,
-                                isPlaying: true
-                            } : s));
-                            // Restart subtab buffer segment
-                            const eff = st.buffer.getChannelData(0);
-                            const edBuffer = context.createBuffer(1, eff.length, st.buffer.sampleRate);
-                            const edData = edBuffer.getChannelData(0);
-                            edData.set(eff);
-                            const fx = st.effects || {};
-                            if (fx.reverse) {
-                                const reversed = new Float32Array(edData);
-                                for (let i = 0; i < edData.length; i++) reversed[i] = edData[edData.length - 1 - i];
-                                edBuffer.copyToChannel(reversed, 0);
-                            }
-                            if (fx.gainDb !== 0) {
-                                const gain = Math.pow(10, fx.gainDb / 20);
-                                for (let i = 0; i < edData.length; i++) edData[i] = Math.max(-1, Math.min(1, edData[i] * gain));
-                            }
-                            if (fx.fadeInMs > 0) {
-                                const sr = edBuffer.sampleRate;
-                                const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeInMs / 1000 * sr));
-                                for (let i = 0; i < fadeSamples; i++) edData[i] = edData[i] * (i / fadeSamples);
-                            }
-                            if (fx.fadeOutMs > 0) {
-                                const sr = edBuffer.sampleRate;
-                                const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeOutMs / 1000 * sr));
-                                for (let i = edData.length - fadeSamples; i < edData.length; i++) {
-                                    edData[i] = edData[i] * ((edData.length - 1 - i) / fadeSamples);
-                                }
-                            }
-                            const source = context.createBufferSource();
-                            source.buffer = edBuffer;
-                            source.connect(context.destination);
-                            source.start(context.currentTime, start);
-                            activeSourcesRef.current = [source];
-                            startOffsetTimeRef.current = start;
-                            startAudioTimeRef.current = context.currentTime;
-                            animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
-                            return;
-                        }
-                    }
-
-                    if (updatedTime >= st.buffer.duration) {
-                        stopAllPlayback();
-                        setSubTabs(prev => prev.map(s => s.id === activeTab ? { ...s, currentTime: 0, isPlaying: false } : s));
-                        return;
-                    }
-
-                    setSubTabs(prev => prev.map(s => s.id === activeTab ? { ...s, currentTime: updatedTime } : s));
-                    animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
-                    return;
-                }
-                if (!isPlaying) return;
-                const context = getAudioContext();
-                const elapsed = context.currentTime - startAudioTimeRef.current;
-                const updatedTime = startOffsetTimeRef.current + elapsed;
-
-                // Selection Loop - LOOP_MAKER.md + LOOP_EDITOR_2.md §4.2
-                // If selection cleared by user, play linearly (don't loop)
-                if (!selectionCleared && isLoopingSelection && selLeft !== null && selRight !== null) {
-                    if (selRight > selLeft && updatedTime >= selRight) {
-                        if (selectionMode === 'local') {
-                            // Local Solo Loop: only restart the selected track
-                            stopAllPlayback();
-                            startOffsetTimeRef.current = selLeft;
-                            startAudioTimeRef.current = context.currentTime;
-                            startLocalTrackPlayback(localSelectionTrackId, selLeft);
-                            setCurrentTime(selLeft);
-                            setIsPlaying(true);
-                        } else {
-                            // Global Master Loop: restart all tracks
-                            stopAllPlayback();
-                            startOffsetTimeRef.current = selLeft;
-                            startAudioTimeRef.current = context.currentTime;
-                            startTrackPlayback(selLeft);
-                            setCurrentTime(selLeft);
-                            setIsPlaying(true);
-                        }
-                        animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
-                        return;
-                    }
-                }
-
-                if (updatedTime >= maxDurationRef.current) {
-                    stopAllPlayback();
-                    setCurrentTime(0);
-                    return;
-                }
-
-                setCurrentTime(updatedTime);
-                animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
-            };
-
-            useEffect(() => {
-                if (isPlaying || subTabs.some(s => s.isPlaying)) {
-                    animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
-                } else {
-                    cancelAnimationFrame(animationFrameIdRef.current);
-                }
-                return () => cancelAnimationFrame(animationFrameIdRef.current);
-            }, [isPlaying, subTabs, isLoopingSelection, selLeft, selRight, selectionMode, localSelectionTrackId, selectionCleared, activeTab]);
-
-            // ── Playback ──
-            const startTrackPlayback = (offsetTime) => {
-                const context = getAudioContext();
-                const hasSolo = tracks.some(t => t.solo) || soloedTrackId !== null;
-
-                tracks.forEach(track => {
-                    const isPlayable = hasSolo 
-                        ? (track.id === soloedTrackId || track.solo)
-                        : !track.muted;
-
-                    if (!isPlayable) return;
-
-                    const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                        id: 'default',
-                        buffer: track.buffer,
-                        startTime: track.startTime || 0,
-                        name: track.name,
-                        speed: track.speed || 1.0
-                    }] : []);
-
-                    clips.forEach(clip => {
-                        if (!clip.buffer) return;
-
-                        const source = context.createBufferSource();
-                        source.buffer = clip.buffer;
-                        source.playbackRate.value = clip.speed || 1.0;
-
-                        const gainNode = context.createGain();
-                        gainNode.gain.setValueAtTime(track.volume, context.currentTime);
-
-                        source.connect(gainNode);
-                        gainNode.connect(context.destination);
-
-                        const clipStart = clip.startTime || 0;
-                        const clipDuration = clip.buffer.duration / (clip.speed || 1.0);
-                        const clipEnd = clipStart + clipDuration;
-
-                        if (offsetTime < clipStart) {
-                            const delay = clipStart - offsetTime;
-                            source.start(context.currentTime + delay, 0);
-                            activeSourcesRef.current.push(source);
-                        } else if (offsetTime < clipEnd) {
-                            const playOffset = offsetTime - clipStart;
-                            source.start(context.currentTime, playOffset * (clip.speed || 1.0));
-                            activeSourcesRef.current.push(source);
-                        }
-                    });
-                });
-            };
-
-            // Solo playback for Local Selection Loop (LOOP_MAKER.md §2.2)
-            const startLocalTrackPlayback = (trackId, offsetTime) => {
-                const context = getAudioContext();
-                const track = tracks.find(t => t.id === trackId);
-                if (!track) return;
-
-                const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default',
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name,
-                    speed: track.speed || 1.0
-                }] : []);
-
-                clips.forEach(clip => {
-                    if (!clip.buffer) return;
-
-                    const source = context.createBufferSource();
-                    source.buffer = clip.buffer;
-                    source.playbackRate.value = clip.speed || 1.0;
-
-                    const gainNode = context.createGain();
-                    gainNode.gain.setValueAtTime(track.volume, context.currentTime);
-
-                    source.connect(gainNode);
-                    gainNode.connect(context.destination);
-
-                    const clipStart = clip.startTime || 0;
-                    const clipDuration = clip.buffer.duration / (clip.speed || 1.0);
-                    const clipEnd = clipStart + clipDuration;
-
-                    if (offsetTime < clipStart) {
-                        const delay = clipStart - offsetTime;
-                        source.start(context.currentTime + delay, 0);
-                        activeSourcesRef.current.push(source);
-                    } else if (offsetTime < clipEnd) {
-                        const playOffset = offsetTime - clipStart;
-                        source.start(context.currentTime, playOffset * (clip.speed || 1.0));
-                        activeSourcesRef.current.push(source);
-                    }
-                });
-            };
-
-            const handlePlayPause = () => {
-                if (activeTab !== 'main') {
-                    // Sub-tab playback transport
-                    const st = subTabs.find(s => s.id === activeTab);
-                    if (!st || !st.buffer) return;
-                    const context = getAudioContext();
-                    
-                    if (st.isPlaying) {
-                        stopAllPlayback();
-                        setSubTabs(prev => prev.map(s => s.id === activeTab ? { ...s, isPlaying: false } : s));
-                    } else {
-                        stopAllPlayback();
-                        // Clone buffer and apply effects for listening
-                        const eff = st.buffer.getChannelData(0);
-                        const edBuffer = context.createBuffer(1, eff.length, st.buffer.sampleRate);
-                        const edData = edBuffer.getChannelData(0);
-                        edData.set(eff);
-                        
-                        const fx = st.effects || {};
-                        if (fx.reverse) {
-                            const reversed = new Float32Array(edData);
-                            for (let i = 0; i < edData.length; i++) reversed[i] = edData[edData.length - 1 - i];
-                            edBuffer.copyToChannel(reversed, 0);
-                        }
-                        if (fx.gainDb !== 0) {
-                            const gain = Math.pow(10, fx.gainDb / 20);
-                            for (let i = 0; i < edData.length; i++) edData[i] = Math.max(-1, Math.min(1, edData[i] * gain));
-                        }
-                        if (fx.fadeInMs > 0) {
-                            const sr = edBuffer.sampleRate;
-                            const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeInMs / 1000 * sr));
-                            for (let i = 0; i < fadeSamples; i++) edData[i] = edData[i] * (i / fadeSamples);
-                        }
-                        if (fx.fadeOutMs > 0) {
-                            const sr = edBuffer.sampleRate;
-                            const fadeSamples = Math.min(edData.length, Math.floor(fx.fadeOutMs / 1000 * sr));
-                            for (let i = edData.length - fadeSamples; i < edData.length; i++) {
-                                edData[i] = edData[i] * ((edData.length - 1 - i) / fadeSamples);
-                            }
-                        }
-
-                        const source = context.createBufferSource();
-                        source.buffer = edBuffer;
-                        
-                        const gainNode = context.createGain();
-                        gainNode.gain.setValueAtTime(1.0, context.currentTime);
-                        
-                        source.connect(gainNode);
-                        gainNode.connect(context.destination);
-                        
-                        const startOffset = st.currentTime || 0;
-                        source.start(context.currentTime, startOffset);
-                        
-                        activeSourcesRef.current = [source];
-                        startOffsetTimeRef.current = startOffset;
-                        startAudioTimeRef.current = context.currentTime;
-                        
-                        setSubTabs(prev => prev.map(s => s.id === activeTab ? { ...s, isPlaying: true } : s));
-                    }
-                    return;
-                }
-                const context = getAudioContext();
-                if (isPlaying) {
-                    stopAllPlayback();
-                } else {
-                    startOffsetTimeRef.current = currentTime;
-                    startAudioTimeRef.current = context.currentTime;
-                    startTrackPlayback(currentTime);
-                    setIsPlaying(true);
-                }
-            };
-            handlePlayPauseRef.current = handlePlayPause;
-
-            const handlePause = () => {
-                if (isPlaying || subTabs.some(s => s.isPlaying)) stopAllPlayback();
-            };
-
-            const stopAllPlayback = () => {
-                activeSourcesRef.current.forEach(src => {
-                    try { src.stop(); } catch(e) {}
-                });
-                activeSourcesRef.current = [];
-                setIsPlaying(false);
-                setSubTabs(prev => prev.map(s => ({ ...s, isPlaying: false })));
-            };
-
-            const handleStop = () => {
-                stopAllPlayback();
-                if (activeTab !== 'main') {
-                    setSubTabs(prev => prev.map(s => s.id === activeTab ? { ...s, currentTime: 0 } : s));
-                } else {
-                    setCurrentTime(0);
-                }
-            };
-
-            // ── Selection ──
-            const clearLocalSelection = () => {
-                setSelectionMode(null);
-                setLocalSelectionTrackId(null);
-                setLocalSelectionStart(null);
-                setLocalSelectionEnd(null);
-            };
-
-             const handleRulerMouseDown = (e) => {
-                 const wrapper = timelineWrapperRef.current;
-                 if (!wrapper) return;
-                 const rect = wrapper.getBoundingClientRect();
-                 const scrollLeft = wrapper.scrollLeft;
-                 const mouseX = e.clientX - rect.left + scrollLeft;
-                 const time = mouseX / zoom;
-                 
-                 clearLocalSelection();
-                 setSelectionMode('global');
-                 rulerDragStartRef.current = time;
-                 isDraggingRulerRef.current = true;
-                 setSelectionStart(time);
-                 setSelectionEnd(time);
-                 setCurrentTime(time);
-             };
-
-             // Global Ruler mousemove is tracked via document listener set up in useEffect
-             useEffect(() => {
-                 const handleMouseMove = (e) => {
-                     if (!isDraggingRulerRef.current) return;
-                     const wrapper = timelineWrapperRef.current;
-                     if (!wrapper) return;
-                     const rect = wrapper.getBoundingClientRect();
-                     const scrollLeft = wrapper.scrollLeft;
-                     const mouseX = e.clientX - rect.left + scrollLeft;
-                     const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
-                     
-                     setSelectionEnd(time);
-                 };
-                const handleMouseUp = () => {
-                    if (isDraggingRulerRef.current) {
-                        isDraggingRulerRef.current = false;
-                        rulerDragStartRef.current = null;
-                    }
-                };
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-                return () => {
-                    document.removeEventListener('mousemove', handleMouseMove);
-                    document.removeEventListener('mouseup', handleMouseUp);
-                };
-            }, [zoom, maxDuration]);
-
-            // ── Track Lane Local Selection Drag ──
-            const localDragInProgressRef = useRef(false);
-            const localDragTrackRef = useRef(null);
-            const localDragStartTimeRef = useRef(0);
-
-            const handleTrackLaneMouseDown = (trackId, time) => {
-                clearLocalSelection();
-                setSelectionMode('local');
-                setLocalSelectionTrackId(trackId);
-                setLocalSelectionStart(time);
-                setLocalSelectionEnd(time);
-                
-                localDragInProgressRef.current = true;
-                localDragTrackRef.current = trackId;
-                localDragStartTimeRef.current = time;
-            };
-
-              // Document-level mousemove/mouseup for local selection drag
-              useEffect(() => {
-                   const handleMouseMove = (e) => {
-                       if (!localDragInProgressRef.current) return;
-                       const wrapper = timelineWrapperRef.current;
-                       if (!wrapper) return;
-                       const rect = wrapper.getBoundingClientRect();
-                       const scrollLeft = wrapper.scrollLeft;
-                       const mouseX = e.clientX - rect.left + scrollLeft;
-                       const time = Math.max(0, Math.min(maxDuration, mouseX / zoom));
-                       setLocalSelectionEnd(time);
-                   };
-                 const handleMouseUp = () => {
-                     if (localDragInProgressRef.current) {
-                         localDragInProgressRef.current = false;
-                         localDragTrackRef.current = null;
-                         localDragStartTimeRef.current = 0;
-                     }
-                 };
-                 document.addEventListener('mousemove', handleMouseMove);
-                 document.addEventListener('mouseup', handleMouseUp);
-                 return () => {
-                     document.removeEventListener('mousemove', handleMouseMove);
-                     document.removeEventListener('mouseup', handleMouseUp);
-                 };
-             }, [zoom, maxDuration]);
-
-            const draggedClipRef = useRef(null);
-            draggedClipRef.current = draggedClip;
-            const hoveredTrackIdRef = useRef(null);
-            hoveredTrackIdRef.current = hoveredTrackId;
-            const captureTrackSnapshotRef = useRef(null);
-            captureTrackSnapshotRef.current = captureTrackSnapshot;
-
-            const handleClipDragStart = (trackId, clipId, clickOffset, isDuplicate = false) => {
-                const track = tracks.find(t => t.id === trackId);
-                if (!track) return;
-                
-                const existingClips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default_' + track.id,
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name
-                }] : []);
-                
-                const clip = existingClips.find(c => c.id === clipId || (clipId === 'default' && c.id === 'default_' + track.id));
-                if (!clip) return;
-                
-                const beforeSnap = captureTrackSnapshot(trackId);
-                
-                let targetClipId = clip.id;
-                
-                if (isDuplicate) {
-                    const cloneId = clip.id + '_copy_' + Date.now();
-                    const clone = {
-                        ...clip,
-                        id: cloneId,
-                        name: clip.name + ' (Copy)'
-                    };
-                    
-                    setTracks(prev => prev.map(t => {
-                        if (t.id === trackId) {
-                            const newClips = [...existingClips, clone];
-                            return {
-                                ...t,
-                                clips: newClips,
-                                buffer: newClips[0].buffer,
-                                startTime: newClips[0].startTime,
-                                name: newClips[0].name
-                            };
-                        }
-                        return t;
-                    }));
-                    
-                    targetClipId = cloneId;
-                } else {
-                    if (!track.clips || track.clips.length === 0) {
-                        setTracks(prev => prev.map(t => {
-                            if (t.id === trackId) {
-                                return {
-                                    ...t,
-                                    clips: existingClips
-                                };
-                            }
-                            return t;
-                        }));
-                    }
-                }
-                
-                setDraggedClip({
-                    trackId: trackId,
-                    clipId: targetClipId,
-                    clickOffset: clickOffset,
-                    buffer: clip.buffer,
-                    name: clip.name,
-                    beforeSnap: beforeSnap
-                });
-            };
-
-            const stretchedClipRef = useRef(null);
-            stretchedClipRef.current = stretchedClip;
-
-            const handleClipStretchStart = (trackId, clipId, clickTime) => {
-                const track = tracks.find(t => t.id === trackId);
-                if (!track) return;
-                const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default_' + track.id,
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name,
-                    speed: track.speed || 1.0
-                }] : []);
-                
-                const clip = clips.find(c => c.id === clipId || (clipId === 'default' && c.id === 'default_' + trackId));
-                if (!clip || !clip.buffer) return;
-
-                const beforeSnap = captureTrackSnapshot(trackId);
-
-                if (!track.clips || track.clips.length === 0) {
-                    setTracks(prev => prev.map(t => t.id === trackId ? { ...t, clips } : t));
-                }
-
-                setStretchedClip({
-                    trackId,
-                    clipId: clip.id === 'default' ? 'default_' + trackId : clip.id,
-                    originalDuration: clip.buffer.duration,
-                    startTime: clip.startTime,
-                    originalSpeed: clip.speed || 1.0,
-                    beforeSnap
-                });
-            };
-
-            const handleSelectionEdgeDragStart = (e, trackId, side) => {
-                const startX = e.clientX;
-                const initialLeft = Math.min(localSelectionStart, localSelectionEnd);
-                const initialRight = Math.max(localSelectionStart, localSelectionEnd);
-                
-                const handleMouseMove = (moveEvent) => {
-                    const deltaX = moveEvent.clientX - startX;
-                    const deltaSec = deltaX / zoom;
-                    if (side === 'left') {
-                        const newLeft = Math.max(0, Math.min(initialRight - 0.05, initialLeft + deltaSec));
-                        setLocalSelectionStart(newLeft);
-                        setLocalSelectionEnd(initialRight);
-                    } else {
-                        const newRight = Math.max(initialLeft + 0.05, Math.min(maxDuration, initialRight + deltaSec));
-                        setLocalSelectionStart(initialLeft);
-                        setLocalSelectionEnd(newRight);
-                    }
-                };
-
-                const handleMouseUp = () => {
-                    document.removeEventListener('mousemove', handleMouseMove);
-                    document.removeEventListener('mouseup', handleMouseUp);
-                };
-
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-            };
-
-            const handleTrackResizeMouseDown = (e, trackId) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const startY = e.clientY;
-                const track = tracks.find(t => t.id === trackId);
-                const startHeight = track ? (track.height || 96) : 96;
-
-                const handleMouseMove = (moveEvent) => {
-                    const deltaY = moveEvent.clientY - startY;
-                    const newHeight = Math.max(48, Math.min(200, startHeight + deltaY));
-                    setTracks(prev => prev.map(t => t.id === trackId ? { ...t, height: newHeight } : t));
-                };
-
-                const handleMouseUp = () => {
-                    document.removeEventListener('mousemove', handleMouseMove);
-                    document.removeEventListener('mouseup', handleMouseUp);
-                };
-
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-            };
-
-            const deleteTrack = (trackId) => {
-                const beforeSnap = captureTrackSnapshot(trackId);
-                setTracks(prev => {
-                    const filtered = prev.filter(t => t.id !== trackId);
-                    if (filtered.length > 0) {
-                        setSelectedTrackId(filtered[0].id);
-                    }
-                    return filtered;
-                });
-                showToast('Đã xóa track.', 'info');
-            };
-
-             useEffect(() => {
-                  const handleMouseMove = (e) => {
-                      const drag = draggedClipRef.current;
-                      if (!drag) return;
-                      
-                      const wrapper = timelineWrapperRef.current;
-                      if (!wrapper) return;
-                      
-                      const rect = wrapper.getBoundingClientRect();
-                      const scrollLeft = wrapper.scrollLeft;
-                      const mouseX = e.clientX - rect.left + scrollLeft;
-                      const time = mouseX / zoom;
-                      const rawStart = Math.max(0, time - drag.clickOffset);
-                     const newStart = snapTime(rawStart, snapValueRef.current, bpmRef.current);
-
-                    const targetTrackId = hoveredTrackIdRef.current || drag.trackId;
-                    
-                    setTracks(prev => prev.map(t => {
-                        // Clear the clip from its previous track if it moved to a new track
-                        if (t.id === drag.trackId && drag.trackId !== targetTrackId) {
-                            const updatedClips = (t.clips || []).filter(c => c.id !== drag.clipId);
-                            return { 
-                                ...t, 
-                                clips: updatedClips, 
-                                buffer: updatedClips.length > 0 ? updatedClips[0].buffer : null,
-                                startTime: updatedClips.length > 0 ? updatedClips[0].startTime : 0,
-                                name: updatedClips.length > 0 ? updatedClips[0].name : `Track ${t.id}` 
-                            };
-                        }
-                        // Update/set clip on target track
-                        if (t.id === targetTrackId) {
-                            const existingClips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
-                                id: 'default_' + t.id,
-                                buffer: t.buffer,
-                                startTime: t.startTime || 0,
-                                name: t.name
-                            }] : []);
-                            
-                            const hasClip = existingClips.some(c => c.id === drag.clipId);
-                            let updatedClips;
-                            if (hasClip) {
-                                updatedClips = existingClips.map(c => c.id === drag.clipId ? { ...c, startTime: newStart } : c);
-                            } else {
-                                updatedClips = [...existingClips, {
-                                    id: drag.clipId,
-                                    buffer: drag.buffer,
-                                    startTime: newStart,
-                                    name: drag.name
-                                }];
-                            }
-                            return {
-                                ...t,
-                                clips: updatedClips,
-                                buffer: updatedClips[0].buffer,
-                                startTime: updatedClips[0].startTime,
-                                name: updatedClips[0].name
-                            };
-                        }
-                        return t;
-                    }));
-
-                    if (drag.trackId !== targetTrackId) {
-                        setDraggedClip(prev => ({ ...prev, trackId: targetTrackId }));
-                    }
-                };
-
-                const handleMouseUp = () => {
-                    const drag = draggedClipRef.current;
-                    if (!drag) return;
-                    
-                    const afterSnap = captureTrackSnapshotRef.current(drag.trackId);
-                    pushAction('MOVE_CLIP', drag.trackId, drag.beforeSnap, afterSnap);
-                    
-                    setDraggedClip(null);
-                    showToast('Đã di chuyển clip.', 'success');
-                };
-
-                 document.addEventListener('mousemove', handleMouseMove);
-                 document.addEventListener('mouseup', handleMouseUp);
-                 return () => {
-                     document.removeEventListener('mousemove', handleMouseMove);
-                     document.removeEventListener('mouseup', handleMouseUp);
-                 };
-             }, [zoom]);
-
-             // Document-level mousemove/mouseup for clip stretching
-             useEffect(() => {
-                 const handleMouseMove = (e) => {
-                     const stretch = stretchedClipRef.current;
-                     if (!stretch) return;
-                     
-                     const wrapper = timelineWrapperRef.current;
-                     if (!wrapper) return;
-                     
-                     const rect = wrapper.getBoundingClientRect();
-                     const scrollLeft = wrapper.scrollLeft;
-                     const mouseX = e.clientX - rect.left + scrollLeft;
-                     const time = mouseX / zoom;
-
-                     const newDuration = Math.max(0.1, time - stretch.startTime);
-                     const speedRatio = stretch.originalDuration / newDuration;
-
-                     setTracks(prev => prev.map(t => {
-                         if (t.id === stretch.trackId) {
-                             const updatedClips = (t.clips || []).map(c => {
-                                 if (c.id === stretch.clipId) {
-                                     return {
-                                         ...c,
-                                         speed: speedRatio
-                                     };
-                                 }
-                                 return c;
-                             });
-                             return {
-                                 ...t,
-                                 clips: updatedClips,
-                                 buffer: updatedClips[0]?.buffer,
-                                 startTime: updatedClips[0]?.startTime || 0,
-                                 speed: updatedClips[0]?.speed || 1.0
-                             };
-                         }
-                         return t;
-                     }));
-                 };
-
-                 const handleMouseUp = () => {
-                     const stretch = stretchedClipRef.current;
-                     if (!stretch) return;
-                     
-                     const afterSnap = captureTrackSnapshotRef.current(stretch.trackId);
-                     pushAction('STRETCH_CLIP', stretch.trackId, stretch.beforeSnap, afterSnap);
-                     
-                     setStretchedClip(null);
-                     showToast('Đã giãn thời gian clip.', 'success');
-                 };
-
-                 document.addEventListener('mousemove', handleMouseMove);
-                 document.addEventListener('mouseup', handleMouseUp);
-                 return () => {
-                     document.removeEventListener('mousemove', handleMouseMove);
-                     document.removeEventListener('mouseup', handleMouseUp);
-                 };
-             }, [zoom]);
-
-            const handleSelectRange = (start, end, reset) => {
-                const maxLen = maxDuration;
-                const cleanStart = Math.max(0, Math.min(maxLen, start));
-                const cleanEnd = Math.max(0, Math.min(maxLen, end));
-
-                if (reset) {
-                    setSelectionStart(cleanStart);
-                    setSelectionEnd(cleanEnd);
-                } else {
-                    setSelectionEnd(cleanEnd);
-                }
-                // LOOP_EDITOR_2.md §4.2: new selection = enable looping
-                setSelectionCleared(false);
-            };
-
-            const handleSelectionInputChange = (field, val) => {
-                const numericVal = Math.max(0, parseFloat(val) || 0);
-                if (selectionMode === 'local') {
-                    // Editing local selection directly
-                    if (field === 'start') {
-                        setLocalSelectionStart(numericVal);
-                    } else {
-                        setLocalSelectionEnd(numericVal);
-                    }
-                } else {
-                    if (field === 'start') {
-                        setSelectionStart(numericVal);
-                    } else {
-                        setSelectionEnd(numericVal);
-                    }
-                }
-            };
-
-            const selectionStats = useMemo(() => {
-                if (selLeft === null || selRight === null) {
-                    return { start: 0, end: 0, length: 0 };
-                }
-                const s = Math.min(selLeft, selRight);
-                const e = Math.max(selLeft, selRight);
-                return {
-                    start: parseFloat(s.toFixed(3)),
-                    end: parseFloat(e.toFixed(3)),
-                    length: parseFloat((e - s).toFixed(3))
-                };
-            }, [selLeft, selRight]);
-
-            // ── Handle Drag (selection resize) ──
-            const handleHandleDragStart = (e, side) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const startX = e.clientX;
-                const useLocal = selectionMode === 'local';
-                const currentStart = useLocal ? localSelectionStart : selectionStart;
-                const currentEnd = useLocal ? localSelectionEnd : selectionEnd;
-                const initialLeft = Math.min(currentStart, currentEnd);
-                const initialRight = Math.max(currentStart, currentEnd);
-                const setStart = useLocal ? setLocalSelectionStart : setSelectionStart;
-                const setEnd = useLocal ? setLocalSelectionEnd : setSelectionEnd;
-
-                const handleMouseMove = (moveEvent) => {
-                    const deltaX = moveEvent.clientX - startX;
-                    const deltaSec = deltaX / zoom;
-                    if (side === 'left') {
-                        const newLeft = Math.max(0, Math.min(initialRight - 0.05, initialLeft + deltaSec));
-                        setStart(newLeft);
-                        setEnd(initialRight);
-                    } else {
-                        const newRight = Math.max(initialLeft + 0.05, Math.min(maxDuration, initialRight + deltaSec));
-                        setStart(initialLeft);
-                        setEnd(newRight);
-                    }
-                };
-
-                const handleMouseUp = () => {
-                    document.removeEventListener('mousemove', handleMouseMove);
-                    document.removeEventListener('mouseup', handleMouseUp);
-                };
-
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-            };
-
-            const handleSelectionBodyDragStart = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const startX = e.clientX;
-                const useLocal = selectionMode === 'local';
-                const currentStart = useLocal ? localSelectionStart : selectionStart;
-                const currentEnd = useLocal ? localSelectionEnd : selectionEnd;
-                const initialLeft = Math.min(currentStart, currentEnd);
-                const initialRight = Math.max(currentStart, currentEnd);
-                const widthSec = initialRight - initialLeft;
-                const setStart = useLocal ? setLocalSelectionStart : setSelectionStart;
-                const setEnd = useLocal ? setLocalSelectionEnd : setSelectionEnd;
-
-                const handleMouseMove = (moveEvent) => {
-                    const deltaX = moveEvent.clientX - startX;
-                    const deltaSec = deltaX / zoom;
-                    let newLeft = initialLeft + deltaSec;
-                    let newRight = initialRight + deltaSec;
-
-                    if (newLeft < 0) {
-                        newLeft = 0;
-                        newRight = widthSec;
-                    }
-                    if (newRight > maxDuration) {
-                        newRight = maxDuration;
-                        newLeft = maxDuration - widthSec;
-                    }
-
-                    setStart(newLeft);
-                    setEnd(newRight);
-                };
-
-                const handleMouseUp = () => {
-                    document.removeEventListener('mousemove', handleMouseMove);
-                    document.removeEventListener('mouseup', handleMouseUp);
-                };
-
-                document.addEventListener('mousemove', handleMouseMove);
-                document.addEventListener('mouseup', handleMouseUp);
-            };
-
-            // ── Track Controls ──
-            const toggleTrackSoloEvaluate = (trackId) => {
-                const wasPlaying = isPlaying;
-                stopAllPlayback();
-
-                setTracks(prev => prev.map(t => {
-                    if (t.id === trackId) {
-                        return { ...t, solo: !t.solo, muted: false };
-                    }
-                    return { ...t, solo: false };
-                }));
-
-                setSoloedTrackId(prev => prev === trackId ? null : trackId);
-
-                if (wasPlaying) {
-                    setTimeout(() => {
-                        startOffsetTimeRef.current = currentTime;
-                        startAudioTimeRef.current = getAudioContext().currentTime;
-                        setIsPlaying(true);
-                    }, 50);
-                }
-            };
-
-            const toggleTrackMute = (trackId) => {
-                const beforeSnap = captureTrackSnapshot(trackId);
-                setTracks(prev => prev.map(t => t.id === trackId ? { ...t, muted: !t.muted } : t));
-                setUndoStack(prev => {
-                    const next = [...prev, {
-                        action_type: 'MUTE',
-                        track_id: trackId,
-                        timestamp: Date.now(),
-                        before_state: beforeSnap,
-                        after_state: captureTrackSnapshot(trackId),
-                    }];
-                    if (next.length > MAX_UNDO) next.shift();
-                    return next;
-                });
-            };
-
-            const updateTrackVolume = (trackId, val) => {
-                const beforeSnap = captureTrackSnapshot(trackId);
-                setTracks(prev => prev.map(t => t.id === trackId ? { ...t, volume: val } : t));
-                setUndoStack(prev => {
-                    const next = [...prev, {
-                        action_type: 'VOLUME_CHANGE',
-                        track_id: trackId,
-                        timestamp: Date.now(),
-                        before_state: beforeSnap,
-                        after_state: captureTrackSnapshot(trackId),
-                    }];
-                    if (next.length > MAX_UNDO) next.shift();
-                    return next;
-                });
-            };
-
-            // ── Load File on Track (with server upload) ──
-            const loadFileOnTrack = async (trackId, file) => {
-                if (!file) return;
-                const context = getAudioContext();
-                showToast(`Đang nạp file ${file.name}...`, 'info');
-
-                try {
-                    // Upload to server
-                    uploadToServer(file, trackId);
-
-                    // Decode locally for playback
-                    const reader = new FileReader();
-                    reader.onload = async (e) => {
-                        try {
-                            const decodedBuffer = await context.decodeAudioData(e.target.result);
-                            setTracks(prev => prev.map(t => t.id === trackId ? {
-                                ...t,
-                                name: file.name,
-                                buffer: decodedBuffer
-                            } : t));
-                            showToast(`Nạp file thành công: ${file.name}`, 'success');
-                        } catch (err) {
-                            showToast("Lỗi giải mã âm thanh. Định dạng file không tương thích.", 'error');
-                        }
-                    };
-                    reader.readAsArrayBuffer(file);
-                } catch (err) {
-                    showToast("Lỗi: " + err.message, 'error');
-                }
-            };
-
-            // ── Synth Generators ──
-            const generateSynthToTrack = (trackId, type) => {
-                const sampleRate = 44100;
-                const duration = 12.0;
-                const context = getAudioContext();
-                const frameCount = sampleRate * duration;
-                const newBuffer = context.createBuffer(1, frameCount, sampleRate);
-                const channelData = newBuffer.getChannelData(0);
-
-                if (type === 'kick') {
-                    for (let i = 0; i < frameCount; i++) {
-                        const t = i / sampleRate;
-                        const beatTime = t % 0.5;
-                        const freq = 120 * Math.exp(-35 * beatTime);
-                        channelData[i] = Math.sin(2 * Math.PI * freq * beatTime) * Math.exp(-6 * beatTime);
-                    }
-                } else {
-                    const notes = [220.00, 261.63, 293.66, 329.63, 392.00];
-                    for (let i = 0; i < frameCount; i++) {
-                        const t = i / sampleRate;
-                        const noteIdx = Math.floor(t * 2) % notes.length;
-                        const freq = notes[noteIdx];
-                        channelData[i] = Math.sin(2 * Math.PI * freq * t) * 0.25 * (1.0 - (t % 0.5) / 0.5);
-                    }
-                }
-
-                setTracks(prev => prev.map(t => t.id === trackId ? {
-                    ...t, name: `Demo_${type.toUpperCase()}.wav`, buffer: newBuffer
-                } : t));
-                showToast(`Đã nạp sóng âm tổng hợp: ${type.toUpperCase()}`, 'success');
-            };
-
-             // ── Add Track ──
-             const addNewTrack = () => {
-                 const newId = (tracks.length + 1).toString();
-                 const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
-                 const selectColor = colors[tracks.length % colors.length];
-                 
-                 setTracks(prev => [...prev, {
-                     id: newId, name: `Track ${newId}`, buffer: null, startTime: 0, height: 96,
-                     volume: 0.8, muted: false, solo: false,
-                     color: selectColor, markers: [], serverFileId: null
-                 }]);
-                 showToast(`Đã thêm Track ${newId}.`, 'info');
-                 setTimeout(() => lucide.createIcons(), 200);
-                 return newId;
-             };
-
-            // ── Server-side Export ──
-            const triggerWavExport = async () => {
-                const activeTracks = tracks.filter(t => t.buffer && !t.muted);
-                if (activeTracks.length === 0) {
-                    showToast("Không tìm thấy dữ liệu âm thanh hợp lệ để xuất.", "warning");
-                    return;
-                }
-
-                // Check if all active tracks have server file IDs
-                const allOnServer = activeTracks.every(t => serverFileIdMap[t.id]);
-
-                if (allOnServer && serverStatus === 'connected') {
-                    // Use server-side export
-                    setIsExporting(true);
-                    showToast("Đang gửi yêu cầu xuất âm thanh đến máy chủ...", "info");
-
-                    try {
-                        const sessionId = `session_${Date.now()}`;
-                        const tracksMeta = activeTracks.map(t => ({
-                            track_id: t.id,
-                            file_id: serverFileIdMap[t.id],
-                            volume: t.volume,
-                            muted: false,
-                            clips: [{
-                                clip_id: `clip_${t.id}`,
-                                start_time_seconds: t.startTime || 0,
-                                end_time_seconds: (t.startTime || 0) + t.buffer.duration,
-                                loop_count: 1,
-                                apply_zero_crossing: true,
-                                fade_in_ms: 0,
-                                fade_out_ms: 0,
-                            }]
-                        }));
-
-                        const resp = await fetch(`${API_MULTITRACK}/mix`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({
-                                session_id: sessionId,
-                                export_settings: {
-                                    sample_rate: parseInt(exportSettings.sampleRate),
-                                    bit_depth: parseInt(exportSettings.bitDepth),
-                                    format: exportSettings.format,
-                                },
-                                tracks: tracksMeta,
-                            }),
-                        });
-
-                        if (!resp.ok) throw new Error(`Server export failed: ${resp.status}`);
-                        const data = await resp.json();
-                        
-                        showToast("Đang xử lý trên máy chủ...", "info");
-
-                        // Poll for result
-                        const result = await pollTaskResult(data.task_id, 20);
-                        
-                        if (result.success) {
-                            // Get the uploaded file from server
-                            const fileId = result.output_file_id || result.output_path?.split('/').pop();
-                            if (fileId) {
-                                const downloadUrl = `${API_AUDIO}/download/${fileId}`;
-                                const a = document.createElement('a');
-                                a.href = downloadUrl;
-                                a.download = fileId;
-                                a.click();
-                                showToast("Xuất bản âm thanh từ máy chủ hoàn tất!", "success");
-                            }
-                        } else {
-                            throw new Error(result.error || 'Server processing failed');
-                        }
-                    } catch (err) {
-                        showToast("Lỗi xuất máy chủ: " + err.message + ". Chuyển sang xuất client.", "warning");
-                        // Fall back to client-side export
-                        clientSideExport(activeTracks);
-                    } finally {
-                        setIsExporting(false);
-                    }
-                } else {
-                    // Client-side export (existing working code)
-                    clientSideExport(activeTracks);
-                }
-            };
-
-            const clientSideExport = async (activeTracks) => {
-                setIsExporting(true);
-                showToast("Đang trộn âm thanh đa kênh (Offline Mixdown)...", "info");
-
-                try {
-                    const targetRate = parseInt(exportSettings.sampleRate);
-                    const bitDepth = parseInt(exportSettings.bitDepth);
-                    
-                    const durationLimit = Math.max(...activeTracks.map(t => {
-                        const clips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
-                            id: 'default',
-                            buffer: t.buffer,
-                            startTime: t.startTime || 0,
-                            name: t.name,
-                            speed: t.speed || 1.0
-                        }] : []);
-                        if (clips.length === 0) return 0;
-                        return Math.max(...clips.map(c => (c.startTime || 0) + c.buffer.duration / (c.speed || 1.0)));
-                    }));
-
-                    const offlineCtx = new OfflineAudioContext(1, Math.ceil(targetRate * Math.max(0.1, durationLimit)), targetRate);
-
-                    activeTracks.forEach(t => {
-                        const clips = t.clips && t.clips.length > 0 ? t.clips : (t.buffer ? [{
-                            id: 'default',
-                            buffer: t.buffer,
-                            startTime: t.startTime || 0,
-                            name: t.name,
-                            speed: t.speed || 1.0
-                        }] : []);
-
-                        clips.forEach(clip => {
-                            if (!clip.buffer) return;
-                            const source = offlineCtx.createBufferSource();
-                            source.buffer = clip.buffer;
-                            source.playbackRate.value = clip.speed || 1.0;
-
-                            const gain = offlineCtx.createGain();
-                            gain.gain.setValueAtTime(t.volume, 0);
-                            
-                            source.connect(gain);
-                            gain.connect(offlineCtx.destination);
-                            
-                            const clipStart = clip.startTime || 0;
-                            source.start(clipStart);
-                        });
-                    });
-
-                    const renderedBuffer = await offlineCtx.startRendering();
-                    const monoData = renderedBuffer.getChannelData(0);
-                    const bufferLength = monoData.length;
-                    const bytesPerSample = bitDepth / 8;
-                    const headerSize = 44;
-                    const fileSizeBytes = headerSize + (bufferLength * bytesPerSample);
-                    const fileBuffer = new ArrayBuffer(fileSizeBytes);
-                    const view = new DataView(fileBuffer);
-
-                    const writeString = (offset, string) => {
-                        for (let i = 0; i < string.length; i++) {
-                            view.setUint8(offset + i, string.charCodeAt(i));
-                        }
-                    };
-
-                    writeString(0, 'RIFF');
-                    view.setUint32(4, fileSizeBytes - 8, true);
-                    writeString(8, 'WAVE');
-                    writeString(12, 'fmt ');
-                    view.setUint32(16, 16, true);
-                    view.setUint16(20, 1, true);
-                    view.setUint16(22, 1, true);
-                    view.setUint32(24, targetRate, true);
-                    view.setUint32(28, targetRate * bytesPerSample, true);
-                    view.setUint16(32, bytesPerSample, true);
-                    view.setUint16(34, bitDepth, true);
-                    writeString(36, 'data');
-                    view.setUint32(40, bufferLength * bytesPerSample, true);
-
-                    let offset = 44;
-                    for (let i = 0; i < bufferLength; i++) {
-                        const sample = Math.max(-1, Math.min(1, monoData[i]));
-                        if (bitDepth === 8) {
-                            view.setUint8(offset, Math.floor((sample + 1.0) * 127.5));
-                        } else if (bitDepth === 16) {
-                            view.setInt16(offset, Math.floor(sample < 0 ? sample * 0x8000 : sample * 0x7FFF), true);
-                        } else if (bitDepth === 24) {
-                            const val24 = Math.floor(sample < 0 ? sample * 0x800000 : sample * 0x7FFFFF);
-                            view.setUint8(offset, val24 & 0xFF);
-                            view.setUint8(offset + 1, (val24 >> 8) & 0xFF);
-                            view.setUint8(offset + 2, (val24 >> 16) & 0xFF);
-                        }
-                        offset += bytesPerSample;
-                    }
-
-                    const blob = new Blob([view], { type: 'audio/wav' });
-                    const url = URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = `sonicforge-session-${targetRate}hz-${bitDepth}bit.wav`;
-                    a.click();
-                    URL.revokeObjectURL(url);
-                    showToast("Xuất bản âm thanh hoàn tất!", "success");
-                } catch (err) {
-                    showToast("Lỗi xuất âm thanh: " + err.message, "error");
-                } finally {
-                    setIsExporting(false);
-                }
-            };
-
-            // ── AI Analysis (server-side with fallback) ──
-            const triggerAIAnalysis = async () => {
-                setAnalysisState({ status: 'Connecting to AI Engine...', data: null, isRunning: true });
-
-                // Check if we have a file on the server to analyze
-                const activeTrack = tracks.find(t => t.id === selectedTrackId);
-                const serverFileId = serverFileIdMap[selectedTrackId];
-
-                if (serverFileId && serverStatus === 'connected') {
-                    try {
-                        const resp = await fetch(`${API_AUDIO}/analyze-ai`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({
-                                file_id: serverFileId,
-                                api_base_url: aiConfig.baseUrl !== API_BASE_URL ? aiConfig.baseUrl : null,
-                                model: aiConfig.model,
-                            }),
-                        });
-                        if (resp.ok) {
-                            const data = await resp.json();
-                            showToast("Đang phân tích cấu trúc trên máy chủ...", "info");
-                            
-                            try {
-                                const result = await pollTaskResult(data.task_id, 15);
-                                if (result.bpm) {
-                                    if (selLeft !== null && selRight !== null && activeTrack && activeTrack.buffer) {
-                                        const snapStart = findZeroCrossing(activeTrack.buffer, selLeft);
-                                        const snapEnd = findZeroCrossing(activeTrack.buffer, selRight);
-                                        if (selectionMode === 'local') {
-                                            setLocalSelectionStart(snapStart);
-                                            setLocalSelectionEnd(snapEnd);
-                                        } else {
-                                            setSelectionStart(snapStart);
-                                            setSelectionEnd(snapEnd);
-                                        }
-                                    }
-                                    setAnalysisState({
-                                        status: 'Hoàn thành phân tích (Server)',
-                                        data: result,
-                                        isRunning: false,
-                                    });
-                                    showToast(`AI Server: ${result.bpm} BPM | ${result.beats?.length || 0} beats detected (Zero-Crossing Aligned)`, 'success');
-                                    return;
-                                }
-                            } catch (e) {
-                                console.warn('Server AI poll failed, using fallback:', e);
-                            }
-                        }
-                    } catch (err) {
-                        console.warn('Server AI analysis failed, using fallback:', err);
-                    }
-                }
-
-                // Fallback: client-side analysis with simulated BPM
-                setAnalysisState({ status: 'Processing structural detection...', data: null, isRunning: true });
-                
-                setTimeout(() => {
-                    let bpm = 120;
-                    // Try to detect BPM from buffer
-                    if (activeTrack && activeTrack.buffer) {
-                        const data = activeTrack.buffer.getChannelData(0);
-                        const sr = activeTrack.buffer.sampleRate;
-                        // Simple autocorrelation for BPM estimation
-                        const windowSize = Math.min(sr * 3, data.length);
-                        if (windowSize > sr) {
-                            let maxCorr = 0;
-                            let bestLag = Math.floor(sr * 0.25); // ~240 BPM max
-                            for (let lag = Math.floor(sr * 0.25); lag < Math.floor(sr * 2); lag++) {
-                                let corr = 0;
-                                const n = Math.floor(windowSize / 2);
-                                for (let i = 0; i < n; i++) {
-                                    corr += data[i] * data[i + lag];
-                                }
-                                corr /= n;
-                                if (corr > maxCorr) {
-                                    maxCorr = corr;
-                                    bestLag = lag;
-                                }
-                            }
-                            if (bestLag > 0) {
-                                bpm = Math.round(60 * sr / bestLag);
-                                bpm = Math.max(60, Math.min(200, bpm));
-                            }
-                        }
-                    }
-
-                    if (selLeft !== null && selRight !== null && activeTrack && activeTrack.buffer) {
-                        const snapStart = findZeroCrossing(activeTrack.buffer, selLeft);
-                        const snapEnd = findZeroCrossing(activeTrack.buffer, selRight);
-                        if (selectionMode === 'local') {
-                            setLocalSelectionStart(snapStart);
-                            setLocalSelectionEnd(snapEnd);
-                        } else {
-                            setSelectionStart(snapStart);
-                            setSelectionEnd(snapEnd);
-                        }
-                    }
-
-                    setAnalysisState({
-                        status: 'Hoàn thành phân tích (Client)',
-                        data: { bpm, bars: Math.max(4, Math.round(bpm / 30)), timeSig: '4/4', detectedKey: 'Am' },
-                        isRunning: false,
-                    });
-                    showToast(`Phân tích: ${bpm} BPM (Zero-Crossing Aligned)`, 'success');
-                }, 1500);
-            };
-
-            // ── Mark Selection ──
-            const handleMarkSelection = () => {
-                if (selLeft === null || selRight === null || selectionStats.length === 0) {
-                    showToast("Vui lòng chọn một khoảng thời gian trên sóng âm trước.", "warning");
-                    return;
-                }
-
-                const targetTrack = tracks.find(t => t.id === selectedTrackId);
-                if (!targetTrack || !targetTrack.buffer) {
-                    showToast("Vui lòng nhấp chọn một Track có sóng âm để gán Marker.", "warning");
-                    return;
-                }
-
-                // For local selection, force mark on the local-selected track
-                const markTrackId = selectionMode === 'local' && localSelectionTrackId
-                    ? localSelectionTrackId : selectedTrackId;
-
-                setTracks(prev => prev.map(t => {
-                    if (t.id !== markTrackId) return t;
-                    const snapStart = findZeroCrossing(t.buffer, selLeft);
-                    const snapEnd = findZeroCrossing(t.buffer, selRight);
-
-                    const newMarkers = [
-                        ...t.markers,
-                        { id: Date.now() + '_s', time: snapStart },
-                        { id: Date.now() + '_e', time: snapEnd }
-                    ].sort((a,b) => a.time - b.time);
-
-                    return { ...t, markers: newMarkers };
-                }));
-
-                showToast(`Đã tạo 2 Markers tại đầu và cuối dải chọn (Snap Zero-Crossing)`, "success");
-            };
-
-            // ── AI Cut to New Track (server-side with client fallback) ──
-            const handleAICutToNewTrack = () => {
-                const activeTrack = tracks.find(t => t.id === selectedTrackId);
-                if (!activeTrack || !activeTrack.buffer) {
-                    showToast("Vui lòng chọn một Track có dữ liệu âm thanh trước.", "warning");
-                    return;
-                }
-                if (selectionStart === null || selectionEnd === null || selectionStats.length === 0) {
-                    showToast("Vui lòng kéo chọn một khoảng thời gian trên sóng âm.", "warning");
-                    return;
-                }
-
-                setAnalysisState({ status: 'AI đang phân tích điểm Zero-crossing...', data: null, isRunning: true });
-                showToast("AI đang dò tìm Zero-crossing...", "info");
-
-                const buffer = activeTrack.buffer;
-                const sampleRate = buffer.sampleRate;
-                const channelData = buffer.getChannelData(0);
-
-                const snapStart = findZeroCrossing(buffer, selectionStats.start);
-                const snapEnd = findZeroCrossing(buffer, selectionStats.end);
-
-                const startSample = Math.max(0, Math.min(channelData.length - 1, Math.floor(snapStart * sampleRate)));
-                const endSample = Math.max(0, Math.min(channelData.length, Math.floor(snapEnd * sampleRate)));
-                const sliceLength = endSample - startSample;
-
-                if (sliceLength <= 0) {
-                    showToast("Dải cắt không hợp lệ hoặc khoảng thời gian quá ngắn.", "error");
-                    setAnalysisState({ status: 'Thất bại', data: null, isRunning: false });
-                    return;
-                }
-
-                setTimeout(() => {
-                    try {
-                        const context = getAudioContext();
-                        const slicedBuffer = context.createBuffer(1, sliceLength, sampleRate);
-                        const slicedData = slicedBuffer.getChannelData(0);
-                        slicedData.set(channelData.subarray(startSample, endSample));
-
-                        const newId = 'track_ai_cut_' + Date.now();
-                        const colors = ['#0f766e', '#1d4ed8', '#701a75', '#a21caf', '#b45309'];
-                        const selectColor = colors[tracks.length % colors.length];
-
-                        const newTrack = {
-                            id: newId,
-                            name: `AI_Cut_${activeTrack.name.replace('.wav', '')}_${snapStart.toFixed(1)}s.wav`,
-                            buffer: slicedBuffer,
-                            startTime: snapStart,
-                            clips: [{
-                                id: 'clip_' + newId,
-                                buffer: slicedBuffer,
-                                startTime: snapStart,
-                                name: `AI_Cut_${activeTrack.name.replace('.wav', '')}_${snapStart.toFixed(1)}s`
-                            }],
-                            volume: 0.8,
-                            muted: false,
-                            solo: false,
-                            color: selectColor,
-                            markers: [
-                                { id: Date.now() + '_s', time: 0 },
-                                { id: Date.now() + '_e', time: snapEnd - snapStart }
-                            ],
-                            serverFileId: null,
-                        };
-
-                        setTracks(prev => {
-                            const idx = prev.findIndex(t => t.id === selectedTrackId);
-                            const updated = [...prev];
-                            if (idx !== -1) {
-                                updated.splice(idx + 1, 0, newTrack);
-                            } else {
-                                updated.push(newTrack);
-                            }
-                            return updated;
-                        });
-
-                        setSelectedTrackId(newId);
-                        setAnalysisState({
-                            status: 'Phân đoạn AI hoàn tất!',
-                            data: { bpm: 120, bars: 4, timeSig: '4/4', detectedKey: 'Am' },
-                            isRunning: false
-                        });
-                        showToast(`AI đã cắt & gộp thành công vào Track mới (Zero-Crossing aligned)`, "success");
-                        setTimeout(() => lucide.createIcons(), 200);
-                    } catch (err) {
-                        showToast("Lỗi giải mã dải cắt: " + err.message, "error");
-                        setAnalysisState({ status: 'Lỗi biên tập', data: null, isRunning: false });
-                    }
-                }, 1000);
-            };
-
-            // ── Split Track at Playhead ──
-            const handleSplitTrackAtTime = (trackId, clipId, time) => {
-                const track = tracks.find(t => t.id === trackId);
-                if (!track) return;
-
-                const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default',
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name
-                }] : []);
-
-                const targetClipId = clipId || (clips.find(c => time >= c.startTime && time < c.startTime + c.buffer.duration)?.id);
-                if (!targetClipId) return;
-
-                const clip = clips.find(c => c.id === targetClipId);
-                if (!clip || !clip.buffer) return;
-
-                const relTime = Math.max(0, time - clip.startTime);
-                const sr = clip.buffer.sampleRate;
-                const cutSample = Math.floor(relTime * sr);
-                const originalData = clip.buffer.getChannelData(0);
-
-                if (cutSample <= 0 || cutSample >= originalData.length) {
-                    showToast("Vị trí cắt nằm ngoài dải âm thanh của clip.", "warning");
-                    return;
-                }
-
-                const beforeSnap = captureTrackSnapshot(trackId);
-
-                const ctx = getAudioContext();
-                const b1 = ctx.createBuffer(1, cutSample, sr);
-                b1.copyToChannel(originalData.subarray(0, cutSample), 0);
-
-                const b2 = ctx.createBuffer(1, originalData.length - cutSample, sr);
-                b2.copyToChannel(originalData.subarray(cutSample), 0);
-
-                const clip1 = {
-                    id: 'clip_' + Date.now() + '_p1',
-                    name: `${clip.name.replace(' (Part 1)', '').replace(' (Part 2)', '')} (Part 1)`,
-                    buffer: b1,
-                    startTime: clip.startTime
-                };
-                
-                const clip2 = {
-                    id: 'clip_' + Date.now() + '_p2',
-                    name: `${clip.name.replace(' (Part 1)', '').replace(' (Part 2)', '')} (Part 2)`,
-                    buffer: b2,
-                    startTime: clip.startTime + (cutSample / sr)
-                };
-
-                setTracks(prev => prev.map(t => {
-                    if (t.id === trackId) {
-                        const remainingClips = clips.filter(c => c.id !== targetClipId);
-                        const updatedClips = [...remainingClips, clip1, clip2];
-                        return {
-                            ...t,
-                            clips: updatedClips,
-                            buffer: updatedClips[0]?.buffer || null,
-                            startTime: updatedClips[0]?.startTime || 0,
-                            name: updatedClips[0]?.name || t.name
-                        };
-                    }
-                    return t;
-                }));
-
-                setTimeout(() => {
-                    const afterSnap = captureTrackSnapshot(trackId);
-                    pushAction('SPLIT_CLIP', trackId, beforeSnap, afterSnap);
-                }, 50);
-
-                showToast(`Đã chia nhỏ clip tại ${formatTime(time)}.`, "info");
-            };
-
-            const handleSplitTrack = (trackId) => {
-                handleSplitTrackAtTime(trackId, null, currentTime);
-            };
-
-            // ── Glue (Merge) Clips on Selected Track ──
-            const handleGlueTracks = () => {
-                const track = tracks.find(t => t.id === selectedTrackId);
-                if (!track) {
-                    showToast('Vui lòng chọn một track để thực hiện gộp (glue).', 'warning');
-                    return;
-                }
-                
-                const clips = track.clips && track.clips.length > 0 ? track.clips : (track.buffer ? [{
-                    id: 'default',
-                    buffer: track.buffer,
-                    startTime: track.startTime || 0,
-                    name: track.name
-                }] : []);
-                
-                if (clips.length < 2) {
-                    showToast('Cần ít nhất 2 clip trên track này để gộp (glue).', 'warning');
-                    return;
-                }
-                
-                const beforeSnap = captureTrackSnapshot(track.id);
-                
-                const ctx = getAudioContext();
-                const sr = clips[0].buffer.sampleRate;
-                
-                let minStart = Infinity;
-                let maxEnd = -Infinity;
-                clips.forEach(c => {
-                    const start = c.startTime || 0;
-                    const end = start + c.buffer.duration;
-                    minStart = Math.min(minStart, start);
-                    maxEnd = Math.max(maxEnd, end);
-                });
-                
-                const newDur = maxEnd - minStart;
-                const newBuffer = ctx.createBuffer(1, Math.ceil(newDur * sr), sr);
-                const newData = newBuffer.getChannelData(0);
-                
-                clips.forEach(c => {
-                    const data = c.buffer.getChannelData(0);
-                    const offset = Math.floor(((c.startTime || 0) - minStart) * sr);
-                    for (let i = 0; i < data.length; i++) {
-                        if (offset + i < newData.length) {
-                            newData[offset + i] += data[i];
-                        }
-                    }
-                });
-                
-                let maxPeak = 0;
-                for (let i = 0; i < newData.length; i++) {
-                    const abs = Math.abs(newData[i]);
-                    if (abs > maxPeak) maxPeak = abs;
-                }
-                if (maxPeak > 1.0) {
-                    for (let i = 0; i < newData.length; i++) newData[i] /= maxPeak;
-                }
-                
-                const mergedClip = {
-                    id: 'clip_merged_' + Date.now(),
-                    name: `${track.name.replace(' (Part 1)', '').replace(' (Part 2)', '')} (Glued)`,
-                    buffer: newBuffer,
-                    startTime: minStart
-                };
-                
-                setTracks(prev => prev.map(t => {
-                    if (t.id === track.id) {
-                        return {
-                            ...t,
-                            clips: [mergedClip],
-                            buffer: newBuffer,
-                            startTime: minStart,
-                            name: mergedClip.name
-                        };
-                    }
-                    return t;
-                }));
-                
-                setTimeout(() => {
-                    const afterSnap = captureTrackSnapshot(track.id);
-                    pushAction('GLUE', track.id, beforeSnap, afterSnap);
-                }, 50);
-                
-                showToast(`Đã gộp ${clips.length} clips thành công.`, 'success');
-            };
-
-            // ── Save AI config to localStorage ──
-            useEffect(() => {
-                localStorage.setItem('ai_base_url', aiConfig.baseUrl);
-                localStorage.setItem('ai_api_key', aiConfig.apiKey);
-                localStorage.setItem('ai_model', aiConfig.model);
-            }, [aiConfig]);
-
-            return (
-                <div className="h-full w-full flex flex-col bg-[#1e1e1e]">
-                    {/* ── Header ── */}
-                    {/* ── Menu Bar ── */}
-                    <header className="h-9 bg-[#2e2e2e] border-b border-[#181818] flex items-center px-1 shrink-0 select-none">
-                        {[
-                             { label: 'File', items: [
-                                { label: 'New Project', icon: 'file-plus', shortcut: 'Ctrl+N', action: () => { setTracks([{ id:'1', name:'Track 01', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#0f766e', markers:[], serverFileId:null }, { id:'2', name:'Track 02', buffer:null, startTime:0, height:96, volume:0.8, muted:false, solo:false, color:'#1d4ed8', markers:[], serverFileId:null }]); setSelectedTrackId('1'); showToast('New project created','info'); } },
-                                { label: 'Open Project...', icon: 'folder-open', shortcut: 'Ctrl+O', action: () => showToast('Open project dialog','info') },
-                                { label: 'Save Project', icon: 'save', shortcut: 'Ctrl+S', action: () => showToast('Project saved','success') },
-                                { label: 'Save As...', icon: 'save', shortcut: 'Ctrl+Alt+S', action: () => showToast('Save as dialog','info') },
-                                { label: 'Save to Cloud', icon: 'upload-cloud', action: () => showToast('Saving to cloud...','info') },
-                                { sep: true },
-                                { label: 'Import Audio...', icon: 'file-input', shortcut: 'Ctrl+Alt+I', action: () => { const input = document.createElement('input'); input.type='file'; input.accept='audio/*'; input.onchange=async (e)=>{ if(e.target.files[0]){ addNewTrack(); const newId=(tracks.length+1).toString(); setTimeout(()=>loadFileOnTrack(newId,e.target.files[0]),100); } }; input.click(); showToast('Import audio','info'); } },
-                                { label: 'Export Mix...', icon: 'file-output', action: () => triggerWavExport() },
-                                { sep: true },
-                                { label: 'Logout', icon: 'log-out', action: () => showToast('Logged out','info') },
-                            ]},
-                            { label: 'Edit', items: [
-                                { label: 'Insert New Track', icon: 'plus', shortcut: 'Ctrl+I', action: addNewTrack },
-                                { label: 'Insert Music to Track', icon: 'music', shortcut: 'Ctrl+Alt+I', action: () => showToast('Select music file to insert','info') },
-                                { sep: true },
-                                { label: 'Edit in New Tab', icon: 'file-edit', shortcut: 'Ctrl+E', action: () => openTempTab() },
-                                { label: 'Split at Playhead', icon: 'scissors', shortcut: 'S', action: () => handleSplitTrack(selectedTrackId) },
-                                { label: 'Merge Tracks', icon: 'combine', shortcut: 'Ctrl+M', action: () => { handleMergeTracks(); } },
-                                { sep: true },
-                                { label: 'Copy', icon: 'copy', shortcut: 'Ctrl+C', action: () => { handleCopyTrack(); } },
-                                { label: 'Cut', icon: 'scissors', shortcut: 'Ctrl+X', action: () => { handleCutTrack(); } },
-                                { label: 'Paste', icon: 'clipboard', shortcut: 'Ctrl+V', action: handlePasteTrack },
-                                { sep: true },
-                                { label: 'Delete Track', icon: 'trash-2', shortcut: 'Del', action: () => { handleDeleteTrack(); } },
-                            ]},
-                            { label: 'View', items: [
-                                { label: 'Master Track', icon: 'disc', action: () => showToast('Master track view','info') },
-                                { label: 'Maker View', icon: 'layout', action: () => showToast('Maker view','info') },
-                                { label: 'Mixer', icon: 'sliders', action: () => showToast('Mixer panel','info') },
-                                { label: 'Tempo Track', icon: 'timer', action: () => showToast('Tempo track','info') },
-                                { label: 'Video', icon: 'film', action: () => showToast('Video panel','info') },
-                                { label: 'Media Explorer', icon: 'folder-search', action: () => showToast('Media explorer','info') },
-                            ]},
-                            { label: 'Tools', items: [
-                                { label: 'Config', icon: 'settings', action: () => setShowAIConfig(true) },
-                            ]},
-                            { label: 'Help', items: [
-                                { label: 'About SonicForge', icon: 'info', action: () => showToast('SonicForge Studio v1.0 - Professional DAW','info') },
-                            ]},
-                        ].map(menu => (
-                            <div key={menu.label} className="relative">
-                                <button
-                                    onClick={() => setMenuOpen(menuOpen === menu.label ? null : menu.label)}
-                                    className={`px-3 py-1 text-[11px] font-medium transition rounded ${
-                                        menuOpen === menu.label ? 'bg-zinc-700 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800'
-                                    }`}
-                                >
-                                    {menu.label}
-                                </button>
-                                {menuOpen === menu.label && (
-                                    <div className="absolute top-full left-0 mt-0.5 bg-[#2a2a2a] border border-zinc-700 rounded-lg shadow-2xl py-1 w-52 z-50"
-                                        onClick={() => setMenuOpen(null)}>
-                                        {menu.items.map((item, i) => item.sep ? (
-                                            <div key={i} className="h-px bg-zinc-700 my-1"></div>
-                                        ) : (
-                                            <button key={item.label} onClick={(e) => { e.stopPropagation(); item.action(); setMenuOpen(null); }}
-                                                className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                                <i data-lucide={item.icon} className="w-3.5 h-3.5 text-zinc-500 shrink-0"></i>
-                                                <span className="flex-1">{item.label}</span>
-                                                {item.shortcut && <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">{item.shortcut}</span>}
-                                            </button>
-                                        ))}
-                                    </div>
-                                )}
-                            </div>
-                        ))}
-                        <div className="flex-1"></div>
-                        <div className="flex items-center gap-2 px-2">
-                            <span className={`text-[9px] font-bold uppercase px-1.5 py-0.5 rounded ${
-                                serverStatus === 'connected' ? 'bg-emerald-950 text-emerald-400' :
-                                serverStatus === 'checking' ? 'bg-amber-950 text-amber-400' :
-                                'bg-red-950 text-red-400'
-                            }`}>Server: {serverStatus}</span>
-                            <button onClick={() => setShowAIConfig(!showAIConfig)}
-                                className={`px-1.5 py-0.5 rounded text-[10px] border transition ${
-                                    showAIConfig ? 'bg-purple-900 text-purple-200 border-purple-700' : 'bg-zinc-800 text-zinc-400 border-zinc-700 hover:text-zinc-200'
-                                }`}>
-                                <i data-lucide="cpu" className="w-3 h-3"></i>
-                            </button>
-                        </div>
-                    </header>
-                    {/* Close menu on outside click */}
-                    {menuOpen && <div className="fixed inset-0 z-40" onClick={() => setMenuOpen(null)}></div>}
-
-                    {/* ── Tab Bar (LOOP_EDITOR_2.md §1) ── */}
-                    <div className="h-7 bg-[#222] border-b border-zinc-800 flex items-stretch px-2 gap-0.5 shrink-0 overflow-x-auto">
-                        <button onClick={() => setActiveTab('main')}
-                            className={`px-3 text-[10px] font-bold uppercase tracking-wider border-b-2 transition flex items-center gap-1 ${
-                                activeTab === 'main'
-                                    ? 'text-cyan-400 border-cyan-500 bg-zinc-800/50'
-                                    : 'text-zinc-500 border-transparent hover:text-zinc-300 hover:bg-zinc-800/30'
-                            }`}>
-                            <i data-lucide="layout-dashboard" className="w-3 h-3"></i> Main Session
-                        </button>
-                        {subTabs.map(st => (
-                            <div key={st.id} className="flex items-stretch">
-                                <button onClick={() => setActiveTab(st.id)}
-                                    className={`px-2 text-[10px] font-medium border-b-2 transition flex items-center gap-1 ${
-                                        activeTab === st.id
-                                            ? 'text-amber-400 border-amber-500 bg-zinc-800/50'
-                                            : 'text-zinc-500 border-transparent hover:text-zinc-300 hover:bg-zinc-800/30'
-                                    }`}>
-                                    <i data-lucide="file-edit" className="w-3 h-3"></i>
-                                    <span className="max-w-[100px] truncate">{st.label}</span>
-                                </button>
-                                <button onClick={() => closeSubTab(st.id)}
-                                    className="px-1 text-zinc-600 hover:text-red-400 transition text-[9px]"
-                                    title="Close tab">
-                                    <i data-lucide="x" className="w-3 h-3"></i>
-                                </button>
-                            </div>
-                        ))}
-                    </div>
-
-                    {/* ── AI Config Drawer ── */}
-                    {showAIConfig && (
-                        <div className="bg-zinc-900 border-b border-purple-900 p-3 flex flex-col gap-2 transition-all">
-                            <div className="text-xs font-bold text-purple-400 uppercase tracking-wider flex items-center gap-1">
-                                <i data-lucide="cpu" className="w-4 h-4"></i> Cấu hình cổng kết nối API
-                            </div>
-                            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
-                                <div className="flex flex-col gap-1">
-                                    <span className="text-[10px] text-zinc-500 font-bold uppercase">Endpoint Base URL</span>
-                                    <input 
-                                        type="text" 
-                                        value={aiConfig.baseUrl}
-                                        onChange={(e) => setAiConfig(prev => ({ ...prev, baseUrl: e.target.value }))}
-                                        className="bg-zinc-850 text-zinc-200 p-1.5 rounded border border-zinc-800 focus:outline-none focus:border-purple-600 font-mono text-[11px]"
-                                        placeholder="https://api.openai.com/v1"
-                                    />
-                                </div>
-                                <div className="flex flex-col gap-1">
-                                    <span className="text-[10px] text-zinc-500 font-bold uppercase">API Token Key</span>
-                                    <input 
-                                        type="password" 
-                                        value={aiConfig.apiKey}
-                                        onChange={(e) => setAiConfig(prev => ({ ...prev, apiKey: e.target.value }))}
-                                        className="bg-zinc-850 text-zinc-200 p-1.5 rounded border border-zinc-800 focus:outline-none focus:border-purple-600 font-mono text-[11px]"
-                                        placeholder="sk-..."
-                                    />
-                                </div>
-                                <div className="flex flex-col gap-1">
-                                    <span className="text-[10px] text-zinc-500 font-bold uppercase">Model Name</span>
-                                    <input 
-                                        type="text" 
-                                        value={aiConfig.model}
-                                        onChange={(e) => setAiConfig(prev => ({ ...prev, model: e.target.value }))}
-                                        className="bg-zinc-850 text-zinc-200 p-1.5 rounded border border-zinc-800 focus:outline-none focus:border-purple-600 font-mono text-[11px]"
-                                        placeholder="gpt-4o-mini"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    {/* ── Workspace (Split Dual-Column — 11_REFACTOR_UI.md) ── */}
-                    <div 
-                        className="flex-1 flex overflow-hidden select-none daw-bg relative" 
-                        style={{ display: activeTab !== 'main' ? 'none' : '' }}
-                    >
-                        {/* ══ LEFT COLUMN: TCP PANEL (fixed 300px, overflow hidden, z-30, solid bg) ══ */}
-                        <div 
-                            ref={tcpContainerRef}
-                            className="w-[300px] shrink-0 relative z-30 bg-[#262626] overflow-y-scroll no-scrollbar flex flex-col border-r border-zinc-900"
-                            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-                        >
-                            {/* [TCP] Header Row (Channels & Tools) — height 40px (h-10) */}
-                            <div className="sticky top-0 z-50 flex items-center h-10 border-b border-zinc-900 bg-[#242424] px-2 justify-between select-none shrink-0">
-                                <span className="text-[10px] font-bold text-zinc-500 uppercase shrink-0 mr-2">Kênh</span>
-                                
-                                {/* Timeline Toolbar (scaled up buttons, height locked at 40px) */}
-                                <div className="flex items-center gap-1 bg-zinc-900 border border-zinc-800 rounded px-1.5 py-1 shadow-sm h-8">
-                                    <button 
-                                        onClick={() => { setActiveTool('select'); showToast('Công cụ chọn (Select Tool) đã kích hoạt.', 'info'); }}
-                                        className={`p-1 rounded transition text-sm flex items-center justify-center ${activeTool === 'select' ? 'bg-cyan-950/80 text-cyan-400 border border-cyan-800/50 font-bold' : 'text-zinc-400 hover:bg-zinc-800 border border-transparent'}`}
-                                        title="Select Tool: Chọn khoảng, Đặt playhead (Alt+Kéo để di chuyển clip, Ctrl+Kéo để nhân bản)"
-                                    >
-                                        <i data-lucide="mouse-pointer" className="w-4 h-4"></i>
-                                    </button>
-                                    <button 
-                                        onClick={() => { setActiveTool('grab'); showToast('Công cụ di chuyển (Hand Tool) đã kích hoạt.', 'info'); }}
-                                        className={`p-1 rounded transition text-sm flex items-center justify-center ${activeTool === 'grab' ? 'bg-cyan-950/80 text-cyan-400 border border-cyan-700/50 font-bold' : 'text-zinc-400 hover:bg-zinc-800 border border-transparent'}`}
-                                        title="Grab Tool: Click kéo trực tiếp để di chuyển clip"
-                                    >
-                                        <i data-lucide="hand" className="w-4 h-4"></i>
-                                    </button>
-                                    <button 
-                                        onClick={() => { setActiveTool('razor'); showToast('Công cụ chia đoạn (Razor Tool) đã kích hoạt.', 'info'); }}
-                                        className={`p-1 rounded transition text-sm flex items-center justify-center ${activeTool === 'razor' ? 'bg-cyan-950/80 text-cyan-400 border border-cyan-700/50 font-bold' : 'text-zinc-400 hover:bg-zinc-800 border border-transparent'}`}
-                                        title="Razor Tool: Click trên clip để chia nhỏ tại điểm click"
-                                    >
-                                        <svg className="w-4 h-4 text-orange-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                            <path d="M6 3h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>
-                                            <path d="M4 9h16l-3 9H7z"/>
-                                            <circle cx="12" cy="6" r="1"/>
-                                        </svg>
-                                    </button>
-                                    
-                                    <div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
-                                    
-                                    <button 
-                                        onClick={handleGlueTracks}
-                                        className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-purple-400 transition"
-                                        title="Glue: Gộp track hiện tại với track liền dưới"
-                                    >
-                                        <i data-lucide="link" className="w-3.5 h-3.5"></i>
-                                    </button>
-                                    <button 
-                                        onClick={handleCutTrack}
-                                        className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-red-400 transition"
-                                        title="Cut Clip (Ctrl+X)"
-                                    >
-                                        <i data-lucide="scissors" className="w-3.5 h-3.5"></i>
-                                    </button>
-                                    <button 
-                                        onClick={handleCopyTrack}
-                                        className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-blue-400 transition"
-                                        title="Copy Clip (Ctrl+C)"
-                                    >
-                                        <i data-lucide="copy" className="w-3.5 h-3.5"></i>
-                                    </button>
-                                    <button 
-                                        onClick={handlePasteTrack}
-                                        className="p-0.5 rounded text-zinc-400 hover:bg-zinc-800 hover:text-emerald-400 transition"
-                                        title="Paste Clip (Ctrl+V)"
-                                    >
-                                        <i data-lucide="clipboard" className="w-3.5 h-3.5"></i>
-                                    </button>
-                                </div>
-                                
-                                <div className="w-[1px] h-4 bg-zinc-800 mx-0.5"></div>
-                                <div className="flex items-center gap-1 pl-0.5 select-none">
-                                    <span className="text-[9px] text-zinc-500 font-bold uppercase">Snap</span>
-                                    <select 
-                                        value={snapValue} 
-                                        onChange={(e) => setSnapValue(e.target.value)}
-                                        className="bg-zinc-850 text-zinc-300 text-[10px] px-1 py-0.5 rounded border border-zinc-800 focus:outline-none focus:border-cyan-550 font-mono"
-                                    >
-                                        <option value="free">Free</option>
-                                        <option value="1">1</option>
-                                        <option value="1/2">1/2</option>
-                                        <option value="1/4">1/4</option>
-                                        <option value="1/8">1/8</option>
-                                        <option value="1/16">1/16</option>
-                                        <option value="1/32">1/32</option>
-                                    </select>
-                                </div>
-                            </div>
-
-                            {/* [TCP] Tempo Track Row — height 40px (h-[40px]) */}
-                            <div className="sticky top-10 z-40 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] p-2 flex-col justify-between border-l-4 border-purple-500 shrink-0">
-                                <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-[10px] font-bold text-purple-400 font-mono">TM</span>
-                                        <span className="text-xs font-semibold text-zinc-300">Tempo Track</span>
-                                    </div>
-                                    <div className="flex items-center gap-1">
-                                        <input
-                                            type="number"
-                                            value={bpm}
-                                            onChange={(e) => setBpm(e.target.value)}
-                                            onBlur={() => localStorage.setItem('studio_bpm', bpm)}
-                                            className="w-12 bg-zinc-800 border border-zinc-700 rounded text-[10px] text-zinc-300 text-center font-mono focus:outline-none focus:border-purple-500"
-                                            min="40"
-                                            max="300"
-                                        />
-                                        <span className="text-[9px] text-zinc-500">BPM</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* [TCP] Dynamic Track Controls */}
-                            <div className="flex-1 flex flex-col divide-y divide-[#141414] bg-[#262626]">
-                                {tracks.map((track, idx) => {
-                                    const isSelected = selectedTrackId === track.id;
-                                    return (
-                                        <div 
-                                            key={track.id} 
-                                            style={{ height: `${track.height || 96}px` }}
-                                            className={`shrink-0 relative flex flex-col justify-between p-2.5 bg-[#1e1e1e] border-r border-zinc-900 cursor-pointer border-l-4 border-b border-[#141414] overflow-hidden ${isSelected ? 'border-cyan-500 bg-[#252525]' : 'border-transparent hover:bg-zinc-800/20'}`}
-                                            onClick={() => setSelectedTrackId(track.id)}
-                                        >
-                                            <div className="flex items-start justify-between">
-                                                <div className="flex items-center gap-2">
-                                                    <span className="text-[10px] font-bold text-zinc-500 font-mono">{(idx+1).toString().padStart(2, '0')}</span>
-                                                    <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: track.color }} />
-                                                    <span className="text-xs font-semibold text-zinc-300 truncate max-w-[100px]" title={track.name}>
-                                                        {track.name}
-                                                    </span>
-                                                </div>
-
-                                                <div className="flex items-center gap-1">
-                                                    <button 
-                                                        onClick={(e) => { e.stopPropagation(); toggleTrackMute(track.id); }}
-                                                        className={`px-1.5 py-0.5 text-[10px] rounded font-mono font-bold border transition ${
-                                                            track.muted 
-                                                                ? 'bg-red-950 text-red-400 border-red-700' 
-                                                                : 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'
-                                                        }`}
-                                                    >M</button>
-                                                    <button 
-                                                        onClick={(e) => { e.stopPropagation(); toggleTrackSoloEvaluate(track.id); }}
-                                                        className={`px-1.5 py-0.5 text-[10px] rounded font-mono font-bold border transition ${
-                                                            soloedTrackId === track.id || track.solo
-                                                                ? 'bg-amber-950 text-amber-400 border-amber-600' 
-                                                                : 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'
-                                                        }`}
-                                                        title="Solo nghe thử"
-                                                    >S</button>
-                                                    <button 
-                                                        onClick={(e) => { e.stopPropagation(); deleteTrack(track.id); }}
-                                                        className="p-0.5 rounded text-red-500 hover:bg-red-950/40 hover:text-red-400 transition flex items-center justify-center"
-                                                        title="Xóa Track"
-                                                    >
-                                                        <i data-lucide="trash-2" className="w-3.5 h-3.5"></i>
-                                                    </button>
-                                                </div>
-                                            </div>
-
-                                            <div className="flex items-center gap-1 text-[9px] text-zinc-400" onClick={e => e.stopPropagation()}>
-                                                <span className="font-semibold uppercase text-[8px] text-zinc-500">Mô phỏng:</span>
-                                                <button 
-                                                    onClick={() => generateSynthToTrack(track.id, 'kick')}
-                                                    className="px-1 bg-zinc-800 hover:bg-zinc-700 rounded border border-zinc-700"
-                                                >Kick</button>
-                                                <button 
-                                                    onClick={() => generateSynthToTrack(track.id, 'synth')}
-                                                    className="px-1 bg-zinc-800 hover:bg-zinc-700 rounded border border-zinc-700"
-                                                >Synth</button>
-                                            </div>
-
-                                            <div className="flex items-center justify-between gap-2" onClick={e => e.stopPropagation()}>
-                                                <div className="flex items-center gap-1.5">
-                                                    <VolumeKnob value={track.volume} onChange={(v) => updateTrackVolume(track.id, v)} />
-                                                    <span className="text-[10px] font-mono text-zinc-500">Gain: {Math.round(track.volume * 100)}%</span>
-                                                </div>
-
-                                                <div>
-                                                    <input 
-                                                        type="file" 
-                                                        id={`upload-${track.id}`}
-                                                        accept="audio/*"
-                                                        className="hidden"
-                                                        onChange={(e) => loadFileOnTrack(track.id, e.target.files[0])}
-                                                    />
-                                                    <label 
-                                                        htmlFor={`upload-${track.id}`}
-                                                        className="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-[10px] flex items-center gap-1 cursor-pointer transition border border-zinc-700"
-                                                    >
-                                                        <i data-lucide="upload" className="w-3 h-3"></i> Tải file
-                                                    </label>
-                                                </div>
-                                            </div>
-
-                                            {/* Resize handle at bottom of TCP */}
-                                            <div 
-                                                onMouseDown={(e) => handleTrackResizeMouseDown(e, track.id)}
-                                                className="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"
-                                                onClick={e => e.stopPropagation()}
-                                            />
-                                        </div>
-                                    );
-                                })}
-                            </div>
-
-                            {/* [TCP] Bottom Drop Zone spacer */}
-                            <div className="h-[48px] border-r border-zinc-900 bg-[#1e1e1e]/50 shrink-0" />
-                        </div>
-
-                        {/* ══ RIGHT COLUMN: TIMELINE SCROLL VIEWPORT ══ */}
-                        <div 
-                            ref={timelineWrapperRef}
-                            onScroll={handleTimelineScroll}
-                            className="flex-1 relative z-10 overflow-x-auto overflow-y-auto min-w-0"
-                        >
-                            <div style={{ width: `${timelineWidth}px` }} className="relative flex flex-col min-h-full">
-                                
-                                {/* [ZONE A] Time Ruler — height 40px (h-10) */}
-                                <div className="sticky top-0 z-45 flex h-10 border-b border-zinc-900 bg-[#242424] shrink-0">
-                                    <div ref={rulerRef} className="flex-1 relative h-full flex items-center select-none cursor-ew-resize overflow-hidden" onMouseDown={handleRulerMouseDown}>
-                                        {Array.from({ length: Math.ceil(maxDuration) }).map((_, i) => {
-                                            const sec = i;
-                                            const x = sec * zoom;
-                                            return (
-                                                <div key={i} className="absolute h-full border-l border-zinc-800 pl-1 pt-1 text-[9px] font-mono text-zinc-500 pointer-events-none" style={{ left: `${x}px` }}>
-                                                    {formatTime(sec)}
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                </div>
-
-                                {/* [ZONE A] Tempo Lane — height 40px (h-[40px]) */}
-                                <div className="sticky top-10 z-35 flex h-[40px] border-b border-purple-500/30 bg-[#1a1a2e] shrink-0">
-                                    <div className="flex-1 relative h-full overflow-hidden bg-[#1a1a2e]">
-                                        <TempoTrackLane bpm={parseInt(bpm) || 120} zoom={zoom} timelineWidth={timelineWidth}
-                                            onPlayheadSet={setCurrentTime} snapValue={snapValue} />
-                                    </div>
-                                </div>
-
-                                {/* [ZONE B] Dynamic Waveform Lanes */}
-                                <div className="flex-1 flex flex-col divide-y divide-[#141414] relative bg-[#111111] min-h-full">
-                                    {tracks.map((track, idx) => {
-                                        const isSelected = selectedTrackId === track.id;
-                                        return (
-                                            <div 
-                                                key={track.id} 
-                                                style={{ height: `${track.height || 96}px` }}
-                                                className={`shrink-0 relative overflow-hidden border-b border-[#141414] hover:bg-zinc-850/5 transition-colors ${isSelected ? 'bg-zinc-800/10' : ''}`}
-                                                onDragOver={(e) => e.preventDefault()}
-                                                onDrop={(e) => {
-                                                    e.preventDefault();
-                                                    if (e.dataTransfer.files[0]) {
-                                                        loadFileOnTrack(track.id, e.dataTransfer.files[0]);
-                                                    }
-                                                }}
-                                                onMouseEnter={() => setHoveredTrackId(track.id)}
-                                            >
-                                                <WaveformLane track={track} zoom={zoom} timelineWidth={timelineWidth}
-                                                    onSelectRange={handleSelectRange} onPlayheadSet={setCurrentTime}
-                                                    isSelected={isSelected} onSelectTrack={setSelectedTrackId} markers={track.markers}
-                                                    onTrackLaneMouseDown={handleTrackLaneMouseDown}
-                                                    onContextMenu={handleContextMenu}
-                                                    onClipDragStart={handleClipDragStart}
-                                                    onClipStretchStart={handleClipStretchStart}
-                                                    onSelectionEdgeDragStart={handleSelectionEdgeDragStart}
-                                                    setSelectedClipId={setSelectedClipId}
-                                                    activeTool={activeTool}
-                                                    onSplitTrackAtTime={handleSplitTrackAtTime}
-                                                    onEditClipInSubTab={handleEditClipInSubTab}
-                                                    snapValue={snapValue}
-                                                    bpm={bpm}
-                                                    selectionMode={selectionMode}
-                                                    localSelectionTrackId={localSelectionTrackId}
-                                                    localSelLeft={localSelectionStart !== null && localSelectionEnd !== null ? Math.min(localSelectionStart, localSelectionEnd) : null}
-                                                    localSelRight={localSelectionStart !== null && localSelectionEnd !== null ? Math.max(localSelectionStart, localSelectionEnd) : null} />
-
-                                                {track.buffer && (
-                                                    <div className="absolute right-2 top-2 flex items-center gap-1 z-10 opacity-70 hover:opacity-100 transition">
-                                                        <button onClick={() => handleSplitTrack(track.id)}
-                                                            className="px-1.5 py-0.5 bg-zinc-900/95 text-zinc-300 rounded text-[9px] flex items-center gap-1 border border-zinc-700/50"
-                                                            title="Cắt đoạn tại Playhead">
-                                                            <i data-lucide="scissors" className="w-2.5 h-2.5 text-cyan-400"></i> Cắt
-                                                        </button>
-                                                    </div>
-                                                )}
-                                                
-                                                {/* Resize handle at bottom of Waveform Lane */}
-                                                <div 
-                                                    onMouseDown={(e) => handleTrackResizeMouseDown(e, track.id)}
-                                                    className="absolute bottom-0 left-0 right-0 h-1 cursor-ns-resize z-30 hover:bg-cyan-500/50 transition-colors"
-                                                    onClick={e => e.stopPropagation()}
-                                                />
-                                            </div>
-                                        );
-                                    })}
-
-                                    {/* Bottom Drop Zone to create new track */}
-                                    <div 
-                                        className="h-[48px] flex items-center justify-center text-xs text-zinc-500 hover:bg-zinc-900/20 cursor-pointer select-none border-t border-dashed border-zinc-800"
-                                        onMouseEnter={() => {
-                                            if (draggedClipRef.current) {
-                                                const newId = addNewTrack();
-                                                setHoveredTrackId(newId);
-                                            }
-                                        }}
-                                        onClick={addNewTrack}
-                                    >
-                                        <span className="flex items-center gap-1 text-zinc-400">
-                                            <i data-lucide="plus" className="w-3.5 h-3.5"></i> Kéo clip xuống đây hoặc Click để tạo Track mới
-                                        </span>
-                                    </div>
-
-                                    {/* Selection Overlay */}
-                                    {selectionMode !== 'local' && selLeft !== null && selRight !== null && selRight > selLeft && (
-                                        <div className="absolute top-0 bottom-0 border-l border-r border-amber-500 bg-amber-500/10 z-20 selection-interactive-box cursor-grab active:cursor-grabbing"
-                                            style={{ left: `${selLeft * zoom}px`, width: `${(selRight - selLeft) * zoom}px` }}
-                                            onMouseDown={handleSelectionBodyDragStart}
-                                            title="Kéo để di chuyển vùng chọn"
-                                        >
-                                            <div className="absolute -left-1.5 top-0 bottom-0 w-3 bg-amber-500 hover:bg-amber-400 cursor-ew-resize flex items-center justify-center z-30 transition-colors"
-                                                onMouseDown={(e) => handleHandleDragStart(e, 'left')}
-                                                title="Kéo giãn mốc bắt đầu">
-                                                <div className="w-[1.5px] h-4 bg-zinc-950/70 rounded"></div>
-                                            </div>
-                                            <div className="absolute -right-1.5 top-0 bottom-0 w-3 bg-amber-500 hover:bg-amber-400 cursor-ew-resize flex items-center justify-center z-30 transition-colors"
-                                                onMouseDown={(e) => handleHandleDragStart(e, 'right')}
-                                                title="Kéo giãn mốc kết thúc">
-                                                <div className="w-[1.5px] h-4 bg-zinc-950/70 rounded"></div>
-                                            </div>
-                                        </div>
-                                    )}
-
-                                    {/* Playhead */}
-                                    <div className="absolute top-0 bottom-0 w-[2px] bg-[#ef4444] z-20 pointer-events-none"
-                                        style={{ left: `${playheadLeftPos}px` }}>
-                                        <div className="w-3 h-3 bg-[#ef4444] rotate-45 transform -translate-x-1/2 -translate-y-1/2 absolute top-0"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* ── Footer ── */}
-                    <footer className="h-44 bg-[#1c1c1c] border-t border-zinc-900 p-4 grid grid-cols-1 md:grid-cols-12 gap-4 text-xs shrink-0 select-none" style={{ display: activeTab !== 'main' ? 'none' : '' }}>
-                        
-                        {/* Export Section */}
-                        <section className="md:col-span-4 bg-[#262626] border border-zinc-800 rounded p-3 flex flex-col justify-between">
-                            <div>
-                                <h3 className="font-bold text-zinc-200 flex items-center gap-1.5 mb-1.5">
-                                    <i data-lucide="save" className="w-4 h-4 text-cyan-400"></i> Trộn & Xuất bản
-                                </h3>
-                                <div className="grid grid-cols-3 gap-2 mt-1">
-                                    <div>
-                                        <label className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Sample Rate</label>
-                                        <select value={exportSettings.sampleRate}
-                                            onChange={(e) => setExportSettings(prev => ({ ...prev, sampleRate: e.target.value }))}
-                                            className="w-full bg-[#141414] border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300 focus:outline-none">
-                                            <option value="22500">22.5 kHz</option>
-                                            <option value="44100">44.1 kHz</option>
-                                            <option value="48000">48.0 kHz</option>
-                                        </select>
-                                    </div>
-                                    <div>
-                                        <label className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Bit Depth</label>
-                                        <select value={exportSettings.bitDepth}
-                                            onChange={(e) => setExportSettings(prev => ({ ...prev, bitDepth: e.target.value }))}
-                                            className="w-full bg-[#141414] border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300 focus:outline-none">
-                                            <option value="8">8-bit</option>
-                                            <option value="16">16-bit</option>
-                                            <option value="24">24-bit</option>
-                                        </select>
-                                    </div>
-                                    <div>
-                                        <label className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Mã Hóa</label>
-                                        <select value={exportSettings.format}
-                                            onChange={(e) => setExportSettings(prev => ({ ...prev, format: e.target.value }))}
-                                            className="w-full bg-[#141414] border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300 focus:outline-none">
-                                            <option value="wav">WAV (.wav)</option>
-                                            <option value="mp3">MP3 (.mp3)</option>
-                                            <option value="ogg">OGG (.ogg)</option>
-                                        </select>
-                                    </div>
-                                </div>
-                            </div>
-                            <button onClick={triggerWavExport} disabled={isExporting}
-                                className="w-full py-1.5 mt-2 bg-cyan-700 hover:bg-cyan-600 active:bg-cyan-800 text-zinc-100 font-bold rounded flex items-center justify-center gap-1.5 transition text-xs shadow-md">
-                                <i data-lucide="download-cloud" className="w-4 h-4"></i>
-                                {isExporting ? 'Đang xuất...' : 'Xuất bản bản phối'}
-                            </button>
-                        </section>
-
-                        {/* Transport Section */}
-                        <section className="md:col-span-4 bg-[#242424] border border-zinc-800 rounded p-3 flex flex-col justify-between items-center text-center">
-                            <div className="flex w-full items-center justify-between">
-                                <span className="text-[10px] text-zinc-500 font-bold uppercase tracking-wider">Transport Controls</span>
-                                <div className="text-sm font-bold font-mono text-zinc-100">{formatTime(currentTime)}</div>
-                            </div>
-
-                            <div className="grid grid-cols-3 gap-2 w-full mt-1 bg-[#141414] p-1.5 rounded border border-zinc-800">
-                                <div>
-                                    <span className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Vùng Chọn Đầu</span>
-                                    <input type="number" step="0.01" value={selectionStats.start}
-                                        onChange={(e) => handleSelectionInputChange('start', e.target.value)}
-                                        className="w-full bg-[#242424] text-amber-400 text-center font-mono text-[11px] rounded py-0.5 border border-zinc-700 focus:outline-none" />
-                                </div>
-                                <div>
-                                    <span className="block text-[8px] text-zinc-500 font-bold uppercase mb-0.5">Vùng Chọn Cuối</span>
-                                    <input type="number" step="0.01" value={selectionStats.end}
-                                        onChange={(e) => handleSelectionInputChange('end', e.target.value)}
-                                        className="w-full bg-[#242424] text-amber-400 text-center font-mono text-[11px] rounded py-0.5 border border-zinc-700 focus:outline-none" />
-                                </div>
-                                <div className="flex flex-col justify-center">
-                                    <span className="text-[8px] text-zinc-500 font-bold uppercase">Thời Lượng</span>
-                                    <span className="text-zinc-200 font-mono text-[11px] font-semibold mt-0.5">{selectionStats.length}s</span>
-                                </div>
-                            </div>
-
-                            <div className="flex items-center gap-1 justify-center w-full mt-1.5">
-                                <button onClick={() => setCurrentTime(0)}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Quay lại đầu"><i data-lucide="skip-back" className="w-4 h-4"></i></button>
-                                <button onClick={() => { if (selLeft !== null) setCurrentTime(selLeft); }}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Đầu vùng chọn"><i data-lucide="step-back" className="w-4 h-4"></i></button>
-                                <button onClick={handlePlayPause}
-                                    className={`w-8 h-8 flex items-center justify-center rounded border transition ${
-                                        isPlaying 
-                                            ? 'bg-emerald-600 text-black border-emerald-500 hover:bg-emerald-500' 
-                                            : 'bg-cyan-600 text-white border-cyan-500 hover:bg-cyan-500'
-                                    }`}
-                                    title={isPlaying ? "Tạm dừng" : "Play"}>
-                                    <i data-lucide="play" className="w-4 h-4 fill-current"></i>
-                                </button>
-                                <button onClick={handlePause}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Pause"><i data-lucide="pause" className="w-4 h-4"></i></button>
-                                <button onClick={handleStop}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Stop"><i data-lucide="square" className="w-4 h-4 fill-current"></i></button>
-                                <button onClick={() => { if (selRight !== null) setCurrentTime(selRight); }}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Cuối vùng chọn"><i data-lucide="step-forward" className="w-4 h-4"></i></button>
-                                <button onClick={() => setCurrentTime(maxDuration)}
-                                    className="w-8 h-8 flex items-center justify-center bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded border border-zinc-700 transition"
-                                    title="Đến cuối"><i data-lucide="skip-forward" className="w-4 h-4"></i></button>
-                                <button onClick={() => setIsLoopingSelection(prev => !prev)}
-                                    className={`w-8 h-8 flex items-center justify-center rounded border transition ${
-                                        isLoopingSelection 
-                                            ? 'bg-amber-600 text-black border-amber-500 hover:bg-amber-500' 
-                                            : 'bg-zinc-800 text-zinc-200 border-zinc-700 hover:bg-zinc-700'
-                                    }`} title="Bật/Tắt Lặp vùng chọn">
-                                    <i data-lucide="repeat" className="w-4 h-4"></i>
-                                </button>
-                            </div>
-                        </section>
-
-                        {/* AI Analysis & Edit Section */}
-                        <section className="md:col-span-4 bg-[#262626] border border-zinc-800 rounded p-3 flex flex-col justify-between">
-                            <div>
-                                <h3 className="font-bold text-zinc-200 flex items-center gap-1.5 mb-1">
-                                    <i data-lucide="cpu" className="text-purple-400 w-4 h-4"></i> Edit & AI Engine
-                                </h3>
-                                <div className="p-1.5 bg-[#141414] rounded border border-zinc-800 text-[10px] font-mono min-h-[46px] flex flex-col justify-center">
-                                    <div className="text-zinc-500">// Status: <span className="text-zinc-300">{analysisState.status}</span></div>
-                                    {analysisState.data && (
-                                        <div className="text-emerald-500 font-semibold mt-0.5">
-                                            BPM: {analysisState.data.bpm} | Bars: {analysisState.data.bars}
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-
-                            <div className="flex gap-2 mt-1.5">
-                                <button onClick={handleMarkSelection}
-                                    className="flex-1 py-1 px-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded flex items-center justify-center gap-1 border border-purple-700 transition"
-                                    title="Tạo Marker">
-                                    <i data-lucide="map-pin" className="w-3.5 h-3.5"></i> Mark
-                                </button>
-                                <button onClick={handleAICutToNewTrack} disabled={analysisState.isRunning}
-                                    className="flex-[2] py-1 px-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded flex items-center justify-center gap-1 transition shadow-md"
-                                    title="AI Zero-crossing Cut">
-                                    <i data-lucide="scissors" className="w-3.5 h-3.5"></i> AI Cut
-                                </button>
-                                <button onClick={triggerAIAnalysis} disabled={analysisState.isRunning}
-                                    className="p-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700"
-                                    title="AI Analysis">
-                                    <i data-lucide="sparkles" className="w-4 h-4"></i>
-                                </button>
-                            </div>
-                            <div className="flex gap-2 mt-1">
-                                <button onClick={openTempTab}
-                                    className="flex-1 py-1 px-1 bg-amber-800 hover:bg-amber-700 text-amber-100 font-bold rounded flex items-center justify-center gap-1 border border-amber-700 transition text-[11px]"
-                                    title={selLeft !== null ? "Edit in Temp Tab (LOOP_EDITOR.md §2)" : "Select a region first"}>
-                                    <i data-lucide="file-edit" className="w-3.5 h-3.5"></i> Edit in Temp Tab
-                                </button>
-                                <button onClick={handleUndo} disabled={undoStack.length === 0}
-                                    className="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 transition text-[11px]"
-                                    title="Undo (Ctrl+Z)">
-                                    <i data-lucide="undo" className="w-3.5 h-3.5"></i>
-                                </button>
-                                <button onClick={handleRedo} disabled={redoStack.length === 0}
-                                    className="px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 transition text-[11px]"
-                                    title="Redo (Ctrl+Y)">
-                                    <i data-lucide="redo" className="w-3.5 h-3.5"></i>
-                                </button>
-                                <span className="text-[9px] text-zinc-600 flex items-center font-mono">{undoStack.length}/{MAX_UNDO}</span>
-                            </div>
-                        </section>
-                    </footer>
-
-                    {/* ── Status Bar ── */}
-                    <div className="h-6 bg-[#141414] border-t border-zinc-900 px-4 flex items-center justify-between text-[10px] text-zinc-500 select-none shrink-0" style={{ display: activeTab !== 'main' ? 'none' : '' }}>
-                        <div className="flex items-center gap-4">
-                            <span>Status: {isPlaying ? 'Playing' : 'Stopped'}</span>
-                            <span className="text-cyan-400 font-semibold uppercase">Track: ID {selectedTrackId}</span>
-                            {selectionMode === 'local' && <span className="text-amber-400 font-semibold uppercase text-[9px]">Local Sel</span>}
-                            {selectionMode === 'global' && <span className="text-purple-400 font-semibold uppercase text-[9px]">Global Sel</span>}
-                            {soloedTrackId && <span className="text-amber-500 font-semibold">Solo: ID {soloedTrackId}</span>}
-                            {isLoopingSelection && selectionMode === 'local' && <span className="text-emerald-400 font-semibold uppercase text-[9px]">Solo Loop</span>}
-                            {isLoopingSelection && selectionMode !== 'local' && <span className="text-cyan-400 font-semibold uppercase text-[9px]">Master Loop</span>}
-                        </div>
-                        <div className="flex items-center gap-3">
-                            <span className="flex items-center gap-1">
-                                <i data-lucide="info" className="w-3 h-3 text-zinc-600"></i> Scroll: Zoom
-                            </span>
-                            <span>|</span>
-                            <span className="flex items-center gap-1">
-                                <i data-lucide="keyboard" className="w-3 h-3 text-zinc-600"></i> Ctrl+Scroll: Playhead
-                            </span>
-                        </div>
-                    </div>
-
-                    {/* ── Sub-Tab Editor Panel (replaces workspace when active) ── */}
-                    {activeTab !== 'main' && (() => {
-                        const st = subTabs.find(s => s.id === activeTab);
-                        if (!st) return null;
-                        const fx = st.effects || {};
-                        return (
-                            <div className="flex-1 flex flex-col bg-[#1e1e1e]">
-                                <div className="h-8 bg-[#2a2a2a] border-b border-zinc-700 flex items-center px-3 gap-2 shrink-0">
-                                    <i data-lucide="file-edit" className="w-4 h-4 text-amber-400"></i>
-                                    <span className="text-xs font-bold text-zinc-200">{st.label}</span>
-                                    <span className="text-[10px] text-zinc-500 font-mono">
-                                        ({formatTime(st.startTime)} - {formatTime(st.endTime)}) 
-                                        | {st.buffer ? formatTime(st.buffer.duration) : '0s'} 
-                                        | {st.buffer ? st.buffer.sampleRate : 0} Hz
-                                    </span>
-                                    <div className="flex-1"></div>
-                                    <button onClick={() => closeSubTab(st.id)}
-                                        className="px-2 py-0.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded text-[10px] border border-zinc-700 transition">
-                                        <i data-lucide="x" className="w-3 h-3"></i> Close
-                                    </button>
-                                </div>
-                                <div className="flex-1 flex flex-col p-3 gap-3 overflow-y-auto">
-                                    <SubTabToolbar 
-                                        st={st} 
-                                        activeTool={activeTool} 
-                                        setActiveTool={setActiveTool}
-                                        handleSubTabNormalizeWithValue={handleSubTabNormalizeWithValue}
-                                        handleSubTabGainWithValue={handleSubTabGainWithValue}
-                                        handleSubTabPitch={handleSubTabPitch}
-                                        handleSubTabStretch={handleSubTabStretch}
-                                        handleSubTabFade={handleSubTabFadeState}
-                                    />
-                                    <SubTabWaveform 
-                                        buffer={st.buffer}
-                                        subTabId={st.id}
-                                        activeTab={activeTab}
-                                        activeTool={activeTool}
-                                        currentTime={st.currentTime}
-                                        selectionStart={st.selectionStart}
-                                        selectionEnd={st.selectionEnd}
-                                        onSelectRange={(start, end) => {
-                                            setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, selectionStart: start, selectionEnd: end } : s));
-                                        }}
-                                        onPlayheadSet={(time) => {
-                                            setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, currentTime: time } : s));
-                                        }}
-                                        onContextMenu={(e, clickTime) => {
-                                            setContextMenu({
-                                                x: e.clientX,
-                                                y: e.clientY,
-                                                isSubTab: true,
-                                                subTabId: st.id,
-                                                time: clickTime
-                                            });
-                                        }}
-                                    />
-                                    <div className="grid grid-cols-4 gap-3 max-w-2xl">
-                                        <div className="flex flex-col gap-1">
-                                            <span className="text-[9px] text-zinc-500 font-bold uppercase">Reverse</span>
-                                            <button onClick={() => updateSubTabEffects(st.id, { reverse: !fx.reverse })}
-                                                className={`py-2 rounded text-xs font-bold border transition ${
-                                                    fx.reverse
-                                                        ? 'bg-amber-800 text-amber-100 border-amber-600'
-                                                        : 'bg-zinc-800 text-zinc-400 border-zinc-700 hover:text-zinc-200'
-                                                }`}>
-                                                <i data-lucide="arrow-left-right" className="w-4 h-4 mx-auto"></i>
-                                            </button>
-                                        </div>
-                                        <div className="flex flex-col gap-1">
-                                            <span className="text-[9px] text-zinc-500 font-bold uppercase">Gain (dB)</span>
-                                            <input type="number" step="0.5" value={fx.gainDb || 0}
-                                                onChange={(e) => updateSubTabEffects(st.id, { gainDb: parseFloat(e.target.value) || 0 })}
-                                                className="bg-zinc-800 text-zinc-200 text-center font-mono text-xs rounded border border-zinc-700 p-1.5 focus:outline-none focus:border-amber-600" />
-                                        </div>
-                                        <div className="flex flex-col gap-1">
-                                            <span className="text-[9px] text-zinc-500 font-bold uppercase">Fade In (ms)</span>
-                                            <input type="number" step="10" min="0" value={fx.fadeInMs || 0}
-                                                onChange={(e) => updateSubTabEffects(st.id, { fadeInMs: parseInt(e.target.value) || 0 })}
-                                                className="bg-zinc-800 text-zinc-200 text-center font-mono text-xs rounded border border-zinc-700 p-1.5 focus:outline-none focus:border-amber-600" />
-                                        </div>
-                                        <div className="flex flex-col gap-1">
-                                            <span className="text-[9px] text-zinc-500 font-bold uppercase">Fade Out (ms)</span>
-                                            <input type="number" step="10" min="0" value={fx.fadeOutMs || 0}
-                                                onChange={(e) => updateSubTabEffects(st.id, { fadeOutMs: parseInt(e.target.value) || 0 })}
-                                                className="bg-zinc-800 text-zinc-200 text-center font-mono text-xs rounded border border-zinc-700 p-1.5 focus:outline-none focus:border-amber-600" />
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="h-10 bg-[#2a2a2a] border-t border-zinc-700 flex items-center justify-end px-3 gap-2 shrink-0">
-                                    <button onClick={() => closeSubTab(st.id)}
-                                        className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded text-xs font-bold border border-zinc-700 transition">
-                                        Cancel
-                                    </button>
-                                    <button onClick={() => applySubTab(st.id)}
-                                        className="px-3 py-1.5 bg-amber-700 hover:bg-amber-600 text-white rounded text-xs font-bold transition shadow-md">
-                                        <i data-lucide="check" className="w-3.5 h-3.5 inline mr-1"></i> Apply & Merge
-                                    </button>
-                                </div>
-                            </div>
-                        );
-                    })()}
-
-                    {/* ── Context Menu ── */}
-                    {contextMenu && (
-                        contextMenu.isSubTab ? (
-                            <div className="fixed z-[60] bg-[#2a2a2a] border border-zinc-700 rounded-lg shadow-2xl py-1 w-64" style={{ left: contextMenu.x, top: contextMenu.y }}
-                                onClick={(e) => e.stopPropagation()}>
-                                <div className="px-3 py-1 text-[10px] text-zinc-500 font-bold uppercase border-b border-zinc-800 pb-1 mb-1">
-                                    Selection: {formatTime(subTabs.find(s => s.id === contextMenu.subTabId)?.selectionStart || 0)} - {formatTime(subTabs.find(s => s.id === contextMenu.subTabId)?.selectionEnd || 0)}
-                                </div>
-                                <button onClick={() => { handleSubTabNormalize(contextMenu.subTabId); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="maximize" className="w-3.5 h-3.5 text-amber-400 shrink-0"></i>
-                                    <span className="flex-1">Normalize Selection To Peak</span>
-                                </button>
-                                <button onClick={() => { const val = prompt("Nhập Gain điều chỉnh (dB):", "0"); if(val) handleSubTabGain(contextMenu.subTabId, parseFloat(val) || 0); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="volume-2" className="w-3.5 h-3.5 text-amber-400 shrink-0"></i>
-                                    <span className="flex-1">Adjust Gain/Volume...</span>
-                                </button>
-                                <button onClick={() => { handleSubTabFade(contextMenu.subTabId, 'in'); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="chevrons-right" className="w-3.5 h-3.5 text-amber-400 shrink-0"></i>
-                                    <span className="flex-1">Fade In (Linear)</span>
-                                </button>
-                                <button onClick={() => { handleSubTabFade(contextMenu.subTabId, 'out'); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="chevrons-left" className="w-3.5 h-3.5 text-amber-400 shrink-0"></i>
-                                    <span className="flex-1">Fade Out (Linear)</span>
-                                </button>
-                                <div className="h-px bg-zinc-700 my-1"></div>
-                                <button onClick={() => { handleSubTabCut(contextMenu.subTabId); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="scissors" className="w-3.5 h-3.5 text-rose-400 shrink-0"></i>
-                                    <span className="flex-1">Cut</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto">Ctrl+X</span>
-                                </button>
-                                <button onClick={() => { handleSubTabCopy(contextMenu.subTabId); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="copy" className="w-3.5 h-3.5 text-zinc-400 shrink-0"></i>
-                                    <span className="flex-1">Copy</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto">Ctrl+C</span>
-                                </button>
-                                <button onClick={() => { handleSubTabPaste(contextMenu.subTabId); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="clipboard" className="w-3.5 h-3.5 text-emerald-400 shrink-0"></i>
-                                    <span className="flex-1">Paste</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto">Ctrl+V</span>
-                                </button>
-                                <button onClick={() => { handleSubTabDelete(contextMenu.subTabId); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="trash-2" className="w-3.5 h-3.5 text-red-400 shrink-0"></i>
-                                    <span className="flex-1">Delete Selected Segment</span>
-                                    <span className="text-amber-400 text-[12px] font-semibold font-mono ml-auto">Del</span>
-                                </button>
-                                <div className="h-px bg-zinc-700 my-1"></div>
-                                <button onClick={() => { handleSubTabLoop(contextMenu.subTabId, 4); closeContextMenu(); }} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="repeat" className="w-3.5 h-3.5 text-cyan-400 shrink-0"></i>
-                                    <span className="flex-1">Loop Selection 4 times</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto">Ctrl+L</span>
-                                </button>
-                            </div>
-                        ) : (
-                            <div className="fixed z-[60] bg-[#2a2a2a] border border-zinc-700 rounded-lg shadow-2xl py-1 w-64" style={{ left: contextMenu.x, top: contextMenu.y }}
-                                onClick={(e) => e.stopPropagation()}>
-                                <button onClick={contextMenuEdit} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="file-edit" className="w-3.5 h-3.5 text-amber-400 shrink-0"></i>
-                                    <span className="flex-1">Edit</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+E</span>
-                                </button>
-                                <button onClick={contextMenuSplit} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="scissors" className="w-3.5 h-3.5 text-cyan-400 shrink-0"></i>
-                                    <span className="flex-1">Split</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">S</span>
-                                </button>
-                                <button onClick={contextMenuMerge} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="combine" className="w-3.5 h-3.5 text-purple-400 shrink-0"></i>
-                                    <span className="flex-1">Merge</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+M</span>
-                                </button>
-                                <div className="h-px bg-zinc-700 my-1"></div>
-                                <button onClick={contextMenuCopy} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="copy" className="w-3.5 h-3.5 text-zinc-400 shrink-0"></i>
-                                    <span className="flex-1">Copy</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+C</span>
-                                </button>
-                                <button onClick={contextMenuCut} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="scissors" className="w-3.5 h-3.5 text-rose-400 shrink-0"></i>
-                                    <span className="flex-1">Cut</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+X</span>
-                                </button>
-                                <button onClick={contextMenuPaste} className="w-full px-3 py-1.5 text-xs text-zinc-200 hover:bg-zinc-700 text-left flex items-center gap-2">
-                                    <i data-lucide="clipboard" className="w-3.5 h-3.5 text-emerald-400 shrink-0"></i>
-                                    <span className="flex-1">Paste</span>
-                                    <span className="text-purple-400 text-[12px] font-semibold font-mono ml-auto pl-8">Ctrl+V</span>
-                                </button>
-                                <div className="h-px bg-zinc-700 my-1"></div>
-                                <button onClick={contextMenuDelete} className="w-full px-3 py-1.5 text-xs text-red-300 hover:bg-red-950 text-left flex items-center gap-2">
-                                    <i data-lucide="trash-2" className="w-3.5 h-3.5 text-red-400 shrink-0"></i>
-                                    <span className="flex-1">Delete</span>
-                                    <span className="text-amber-400 text-[12px] font-semibold font-mono ml-auto pl-8">Del</span>
-                                </button>
-                            </div>
-                        )
-                    )}
-
-                    {/* ── Toast ── */}
-                    {toastMessage && (
-                        <div className="absolute top-14 right-4 z-50 px-4 py-2.5 rounded shadow-lg text-xs font-semibold flex items-center gap-2 border bg-zinc-900 text-zinc-100 border-zinc-800">
-                            <i data-lucide="bell" className={`w-4 h-4 ${
-                                toastMessage.type === 'success' ? 'text-emerald-400' :
-                                toastMessage.type === 'error' ? 'text-rose-400' :
-                                toastMessage.type === 'warning' ? 'text-amber-400' : 'text-cyan-400'
-                            }`}></i>
-                            {toastMessage.text}
-                        </div>
-                    )}
-                </div>
-            );
-        };
-
-        const root = ReactDOM.createRoot(document.getElementById('root'));
-        root.render(<App />);
-        setTimeout(() => lucide.createIcons(), 300);
-    </script>
-</body>
-</html>
\ No newline at end of file