diff --git a/app/templates/original_workspace.txt b/app/templates/original_workspace.txt
new file mode 100644
index 0000000..6b8c3de
--- /dev/null
+++ b/app/templates/original_workspace.txt
@@ -0,0 +1,303 @@
+
+ {/* ══ LEFT COLUMN: TCP PANEL ══ */}
+
+
Kênh
+
+ {/* Timeline Toolbar */}
+
+
{ setActiveTool('select'); showToast('Công cụ chọn (Select Tool) đã kích hoạt.', 'info'); }}
+ className={`p-1 rounded transition text-xs 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 (Giữ Alt kéo để di chuyển nhanh clip)"
+ >
+
+
{ setActiveTool('grab'); showToast('Công cụ di chuyển (Hand Tool) đã kích hoạt.', 'info'); }}
+ className={`p-1 rounded transition text-xs 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"
+ >
+
+
{ setActiveTool('razor'); showToast('Công cụ chia đoạn (Razor Tool) đã kích hoạt.', 'info'); }}
+ className={`p-1 rounded transition text-xs 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"
+ >
+
+
+
+
+ {/* Separator */}
+
+
+ {/* Quick Actions (Glue, Cut, Copy, Paste) */}
+
+
+
+
+
+
+
+
+
+
+ {/* Snap Section */}
+
+
+ Snap
+ 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"
+ >
+ Free
+ 1
+ 1/2
+ 1/4
+ 1/8
+ 1/16
+ 1/32
+
+
+
+ {/* Right Side: Time Ruler */}
+
+ {Array.from({ length: Math.ceil(maxDuration) }).map((_, i) => {
+ const sec = i;
+ const x = sec * zoom;
+ return (
+
+ {formatTime(sec)}
+
+ );
+ })}
+
+
+
+ {/* [ZONE A] Tempo Track Row */}
+
+ {/* Left Side: Tempo TCP */}
+
+
+
+ TM
+ Tempo Track
+
+
+ BPM
+
+
+
+ {/* Right Side: Tempo Lane */}
+
+
+
+
+ {/* [ZONE B] Dynamic Track List Workspace */}
+
+ {tracks.map((track, idx) => {
+ const isSelected = selectedTrackId === track.id;
+ return (
+
+ {/* Left Column: TCP */}
+
setSelectedTrackId(track.id)}
+ className={`w-[300px] sticky left-0 z-10 p-2.5 flex flex-col justify-between bg-[#1e1e1e] border-r border-zinc-900 shrink-0 cursor-pointer border-l-4 overflow-hidden ${isSelected ? 'border-cyan-500 bg-[#252525]' : 'border-transparent hover:bg-zinc-800/20'}`}
+ >
+
+
+
{(idx+1).toString().padStart(2, '0')}
+
+
+ {track.name}
+
+
+
+
+ { 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
+ { 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
+
+
+
+
e.stopPropagation()}>
+ Mô phỏng:
+ generateSynthToTrack(track.id, 'kick')}
+ className="px-1 bg-zinc-800 hover:bg-zinc-700 rounded border border-zinc-700"
+ >Kick Drum
+ generateSynthToTrack(track.id, 'synth')}
+ className="px-1 bg-zinc-800 hover:bg-zinc-700 rounded border border-zinc-700"
+ >Arpeggiator
+
+
+
e.stopPropagation()}>
+
+ updateTrackVolume(track.id, v)} />
+ Gain: {Math.round(track.volume * 100)}%
+
+
+
+
+
+
+
+
+
+ {/* Right Column: Waveform Lane */}
+
e.preventDefault()}
+ onDrop={(e) => {
+ e.preventDefault();
+ if (e.dataTransfer.files[0]) {
+ loadFileOnTrack(track.id, e.dataTransfer.files[0]);
+ }
+ }}
+ onMouseEnter={() => setHoveredTrackId(track.id)}
+ >
+
+
+ {track.buffer && (
+
+ 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">
+
+
+ )}
+
+
+ );
+ })}
+
+ {/* Bottom Drop Zone to create new track */}
+
+
+
{
+ if (draggedClipRef.current) {
+ const newId = addNewTrack();
+ setHoveredTrackId(newId);
+ }
+ }}
+ onClick={addNewTrack}
+ >
+
+
+
+
+
+ {/* Selection Overlay - only for Global mode (LOOP_EDITOR.md §1.2: local draws on canvas per-track) */}
+ {selectionMode !== 'local' && selLeft !== null && selRight !== null && selRight > selLeft && (
+
+
handleHandleDragStart(e, 'left')}
+ title="Kéo giãn mốc bắt đầu">
+
+
+
handleHandleDragStart(e, 'right')}
+ title="Kéo giãn mốc kết thúc">
+
+
+
+ )}
+
+ {/* Playhead */}
+
+
+