feat: added track level event list tab; rename List Event to Event List.

README.md

@@ -25,7 +25,7 @@ K.G.Studio is a lightweight, modern DAW that runs entirely in the browser with *
 
 - **2026.05.09**: Added **audio recording** — record directly from your microphone into an audio track. A live waveform preview grows in real time as you record, and the region is committed to the timeline as a standard audio region when you stop. Added **audio I/O device selection** in Settings so you can choose your preferred microphone input and audio output device.
 
-- **2026.05.08**: Added **MIDI automation** — draw and edit pitch bend and MIDI CC curves (CC1 Modulation, CC2 Breath, CC7 Volume, CC11 Expression, CC64 Sustain) in an editable automation lane below the piano grid. Added **track-level automation**: each track now has a dedicated automation panel where you can view and edit the same curves directly on the timeline. Real-time MIDI controller input (pitch wheel, CC pedals) is recorded and played back with per-lane interpolation. Added the **List Event Panel** — a tabbed sidebar (Notes / Pitch Bend / Controller) for inspecting and inline-editing all events in the active MIDI region. Added **region multi-select** with lasso and bulk move/resize, and **merge MIDI regions**.
+- **2026.05.08**: Added **MIDI automation** — draw and edit pitch bend and MIDI CC curves (CC1 Modulation, CC2 Breath, CC7 Volume, CC11 Expression, CC64 Sustain) in an editable automation lane below the piano grid. Added **track-level automation**: each track now has a dedicated automation panel where you can view and edit the same curves directly on the timeline. Real-time MIDI controller input (pitch wheel, CC pedals) is recorded and played back with per-lane interpolation. Added the **Event List Panel** — a tabbed sidebar (Notes / Pitch Bend / Controller) for inspecting and inline-editing all events in the active MIDI region. Added **region multi-select** with lasso and bulk move/resize, and **merge MIDI regions**.
 <div align="center">
   <img src="./public/snapshots/2026-05-08-automations.png" alt="K.G.Studio Logo" width="640" />
 </div>
@@ -325,7 +325,7 @@ Feature priorities might change.
 - [X] Support MIDI control events (e.g. CC, pitch bend, etc.)
 - [X] Support WAV audio tracks
 - [X] Recording
-- [ ] List Event + List Region
+- [X] Event List
 - [X] Add support for OpenAI's open source models (`gpt-oss-20b` and `gpt-oss-120b`)
 
 ### Post 1.0

src/App.test.tsx

@@ -19,7 +19,7 @@ vi.mock('./components/MainContent', () => ({ default: () => null }));
 vi.mock('./components/InstrumentSelection', () => ({ default: () => null }));
 vi.mock('./components/ChatBox', () => ({ default: () => null }));
 vi.mock('./components/KGOnePanel', () => ({ default: () => null }));
-vi.mock('./components/ListEventPanel', () => ({ default: () => null }));
+vi.mock('./components/EventListPanel', () => ({ default: () => null }));
 vi.mock('./components/settings', () => ({ SettingsPanel: () => null }));
 vi.mock('./core/audio-interface/KGToneBuffersPool', () => ({
   KGToneBuffersPool: {

src/App.tsx

@@ -11,7 +11,7 @@ import ChatBox from './components/ChatBox';
 import { SettingsPanel } from './components/settings';
 import LoadingOverlay from './components/common/LoadingOverlay';
 import KGOnePanel from './components/KGOnePanel';
-import ListEventPanel from './components/ListEventPanel';
+import EventListPanel from './components/EventListPanel';
 import { useEffect as useEffectReact, useState, useRef } from 'react';
 import { KGToneBuffersPool } from './core/audio-interface/KGToneBuffersPool';
 import { KGOfflineRenderer } from './core/audio-interface/KGOfflineRenderer';
@@ -26,12 +26,12 @@ import { RESERVED_PROJECT_NAME } from './util/projectNameUtil';
 function App() {
   // Enable global keyboard handler for copy/paste and undo/redo
   useGlobalKeyboardHandler();
-  
+
   // Use project store instead of local state for project name and tracks
   const {
     refreshStatus,
     loadProject, showChatBox, showSettings, setShowSettings, initializeFromConfig,
-    showInstrumentSelection, showKGOnePanel, showListEventPanel
+    showInstrumentSelection, showKGOnePanel, showEventListPanel
   } = useProjectStore();
 
   // Track if app has been initialized to prevent multiple initializations
@@ -144,12 +144,12 @@ function App() {
   useEffect(() => {
     // Initial refresh
     refreshStatus();
-    
+
     // Set up interval to refresh status every second
     const intervalId = setInterval(() => {
       refreshStatus();
     }, 1000);
-    
+
     // Clean up interval on unmount
     return () => clearInterval(intervalId);
   }, [refreshStatus]);
@@ -169,7 +169,7 @@ function App() {
           </>
         )}
         <KGOnePanel isVisible={showKGOnePanel && !showSettings} />
-        <ListEventPanel isVisible={showListEventPanel && !showSettings} />
+        <EventListPanel isVisible={showEventListPanel && !showSettings} />
         <ChatBox isVisible={showChatBox && !showSettings} />
       </div>
 
@@ -264,7 +264,7 @@ const MigrationOverlayContainer: React.FC = () => {
   useEffectReact(() => {
     KGCore.instance().setMigrationStateChangeCallback(setIsMigrating);
     return () => {
-      KGCore.instance().setMigrationStateChangeCallback(() => {});
+      KGCore.instance().setMigrationStateChangeCallback(() => { });
     };
   }, []);
 

src/components/EventListPanel.css

@@ -1,4 +1,4 @@
-.list-event-panel {
+.event-list-panel {
   display: flex;
   flex-direction: column;
   width: var(--chat-box-width);
@@ -8,11 +8,11 @@
   overflow: hidden;
 }
 
-.list-event-panel.is-hidden {
+.event-list-panel.is-hidden {
   display: none;
 }
 
-.list-event-panel-header {
+.event-list-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -23,14 +23,14 @@
   flex-shrink: 0;
 }
 
-.list-event-panel-header h3 {
+.event-list-panel-header h3 {
   color: #e0e0e0;
   font-size: 12px;
   font-weight: bold;
   margin: 0;
 }
 
-.list-event-panel-body {
+.event-list-panel-body {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -39,20 +39,20 @@
   gap: 12px;
 }
 
-.list-event-tabs {
+.event-list-tabs {
   display: flex;
   gap: 4px;
   flex-shrink: 0;
 }
 
-.list-event-scope-tabs {
+.event-list-scope-tabs {
   display: flex;
   background-color: #2d2d2d;
   border-bottom: 1px solid #3a3a3a;
   flex-shrink: 0;
 }
 
-.list-event-scope-tab {
+.event-list-scope-tab {
   flex: 1;
   background: transparent;
   color: #999;
@@ -65,16 +65,16 @@
   transition: color 0.15s, border-color 0.15s;
 }
 
-.list-event-scope-tab:hover {
+.event-list-scope-tab:hover {
   color: #ccc;
 }
 
-.list-event-scope-tab.active {
+.event-list-scope-tab.active {
   color: #e0e0e0;
   border-bottom-color: #5a9fd4;
 }
 
-.list-event-tab {
+.event-list-tab {
   flex: 1;
   background-color: #1e1e1e;
   color: #999;
@@ -88,16 +88,16 @@
   transition: all 0.2s ease;
 }
 
-.list-event-tab:hover {
+.event-list-tab:hover {
   color: #e0e0e0;
 }
 
-.list-event-tab.active {
+.event-list-tab.active {
   background-color: #5a9fd4;
   color: #fff;
 }
 
-.list-event-empty-state {
+.event-list-empty-state {
   color: #888;
   font-size: 11px;
   line-height: 1.5;
@@ -107,7 +107,7 @@
   border-radius: 6px;
 }
 
-.list-event-toolbar {
+.event-list-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -115,23 +115,23 @@
   flex-shrink: 0;
 }
 
-.list-event-toolbar-group {
+.event-list-toolbar-group {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
 }
 
-.list-event-toolbar-group:first-child {
+.event-list-toolbar-group:first-child {
   gap: 0;
 }
 
-.list-event-toolbar-group-right {
+.event-list-toolbar-group-right {
   margin-left: auto;
   gap: 8px;
 }
 
-.list-event-add-button {
+.event-list-add-button {
   width: 22px;
   height: 22px;
   border: 1px solid #444;
@@ -153,34 +153,34 @@
   font-size: 11px;
 }
 
-.list-event-add-button:hover {
+.event-list-add-button:hover {
   background-color: #3b3b3b;
   border-right: 0;
 }
 
-.list-event-dropdown-button,
+.event-list-dropdown-button,
-.list-event-quant-button,
+.event-list-quant-button,
-.list-event-type-button {
+.event-list-type-button {
   font-size: 11px;
 }
 
-.list-event-dropdown-button {
+.event-list-dropdown-button {
   margin-left: 0;
 }
 
-.list-event-quant-button {
+.event-list-quant-button {
   min-width: 78px;
   padding: 3px 5px;
 }
 
-.list-event-type-button {
+.event-list-type-button {
   min-width: 88px;
   margin-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.list-event-delete-button {
+.event-list-delete-button {
   width: 22px;
   height: 22px;
   border: 1px solid #444;
@@ -197,17 +197,17 @@
   font-size: 11px;
 }
 
-.list-event-delete-button:hover:not(:disabled) {
+.event-list-delete-button:hover:not(:disabled) {
   background-color: #464646;
   border-color: #5a5a5a;
 }
 
-.list-event-delete-button:disabled {
+.event-list-delete-button:disabled {
   opacity: 0.45;
   cursor: default;
 }
 
-.list-event-table-shell {
+.event-list-table-shell {
   flex: 1;
   min-height: 0;
   overflow: auto;
@@ -216,13 +216,13 @@
   border-radius: 6px;
 }
 
-.list-event-table {
+.event-list-table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }
 
-.list-event-table thead th {
+.event-list-table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -238,25 +238,25 @@
   text-overflow: ellipsis;
 }
 
-.list-event-table tbody tr {
+.event-list-table tbody tr {
   color: #e0e0e0;
   cursor: default;
 }
 
-.list-event-table tbody tr:nth-child(odd) {
+.event-list-table tbody tr:nth-child(odd) {
   background-color: #282828;
 }
 
-.list-event-table tbody tr:nth-child(even) {
+.event-list-table tbody tr:nth-child(even) {
   background-color: #303030;
 }
 
-.list-event-table tbody tr.selected {
+.event-list-table tbody tr.selected {
   background-color: #5a9fd4;
   color: #fff;
 }
 
-.list-event-table td {
+.event-list-table td {
   height: 20px;
   padding: 2px 12px;
   font-size: 11px;
@@ -266,7 +266,7 @@
   max-width: 0;
 }
 
-.list-event-cell-input {
+.event-list-cell-input {
   width: calc(100% + 8px);
   height: 16px;
   margin: 0 -4px;
@@ -278,4 +278,4 @@
   font-size: 11px;
   line-height: 16px;
   outline: none;
-}
+}

src/components/EventListPanel.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import ListEventPanel from './ListEventPanel';
+import EventListPanel from './EventListPanel';
 import { KGMidiControllerEvent } from '../core/midi/KGMidiControllerEvent';
 import { KGMidiNote } from '../core/midi/KGMidiNote';
 import { KGMidiPitchBend } from '../core/midi/KGMidiPitchBend';
@@ -158,7 +158,7 @@ vi.mock('../core/KGCore', () => ({
   },
 }));
 
-describe('ListEventPanel', () => {
+describe('EventListPanel', () => {
   beforeEach(() => {
     selectedItems = [midiRegion];
     midiRegion.select();
@@ -198,7 +198,7 @@ describe('ListEventPanel', () => {
   });
 
   it('defaults to Region tab and preserves existing event rows', () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
 
     expect(screen.getByRole('button', { name: 'Region' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Track' })).toBeInTheDocument();
@@ -207,7 +207,7 @@ describe('ListEventPanel', () => {
   });
 
   it('switches to Track tab and lists selected track regions', () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
 
@@ -219,7 +219,7 @@ describe('ListEventPanel', () => {
   });
 
   it('toggles track filters independently', () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByRole('button', { name: 'Regions' }));
@@ -237,40 +237,40 @@ describe('ListEventPanel', () => {
   it('shows track empty state when no track is selected', () => {
     storeState.selectedTrackId = null;
 
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
 
     expect(screen.getByText('Please select a track to view regions and track automation.')).toBeInTheDocument();
   });
 
   it('syncs Track Regions row selection to selectedRegionIds', () => {
-    const { rerender } = render(<ListEventPanel isVisible={true} />);
+    const { rerender } = render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByText('Second Region').closest('tr')!);
-    rerender(<ListEventPanel isVisible={true} />);
+    rerender(<EventListPanel isVisible={true} />);
 
     expect(storeState.selectedRegionIds).toEqual(['region-2']);
     expect(screen.getByText('Second Region').closest('tr')).toHaveClass('selected');
   });
 
   it('syncs Track Volume row selection to selectedTrackAutomationPointIds', () => {
-    const { rerender } = render(<ListEventPanel isVisible={true} />);
+    const { rerender } = render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByText('-6.0dB').closest('tr')!);
-    rerender(<ListEventPanel isVisible={true} />);
+    rerender(<EventListPanel isVisible={true} />);
 
     expect(storeState.selectedTrackAutomationPointIds).toEqual(['vol-1']);
     expect(screen.getByText('-6.0dB').closest('tr')).toHaveClass('selected');
   });
 
   it('syncs Track Pan row selection to selectedTrackAutomationPointIds', () => {
-    const { rerender } = render(<ListEventPanel isVisible={true} />);
+    const { rerender } = render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByText('-32').closest('tr')!);
-    rerender(<ListEventPanel isVisible={true} />);
+    rerender(<EventListPanel isVisible={true} />);
 
     expect(storeState.selectedTrackAutomationPointIds).toEqual(['pan-1']);
   });
@@ -278,7 +278,7 @@ describe('ListEventPanel', () => {
   it('hides MIDI Region add option for audio tracks', () => {
     storeState.selectedTrackId = '2';
 
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getAllByRole('button', { name: 'Volume' })[1]);
 
@@ -289,7 +289,7 @@ describe('ListEventPanel', () => {
   });
 
   it('creates a 1-bar MIDI region at the playhead from the Track tab', async () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByTitle('Add MIDI region at playhead'));
 
@@ -301,7 +301,7 @@ describe('ListEventPanel', () => {
   });
 
   it('creates a volume automation point using the track base volume', async () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByTitle('Add MIDI region at playhead'));
     fireEvent.click(screen.getByRole('button', { name: 'MIDI Region' }));
@@ -315,7 +315,7 @@ describe('ListEventPanel', () => {
   });
 
   it('creates a pan automation point using the nearest earlier pan value or zero', async () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByTitle('Add MIDI region at playhead'));
     fireEvent.click(screen.getByRole('button', { name: 'MIDI Region' }));
@@ -329,18 +329,18 @@ describe('ListEventPanel', () => {
   });
 
   it('deletes selected track automation points from the Track tab', async () => {
-    const { rerender } = render(<ListEventPanel isVisible={true} />);
+    const { rerender } = render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.click(screen.getByText('-6.0dB').closest('tr')!);
-    rerender(<ListEventPanel isVisible={true} />);
+    rerender(<EventListPanel isVisible={true} />);
     fireEvent.click(screen.getByTitle('Delete visible selected rows'));
 
     await waitFor(() => expect(midiTrack.getVolumeAutomation()).toHaveLength(0));
   });
 
   it('edits track region position and length inline', async () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.doubleClick(screen.getByText('4 1 0'));
@@ -359,7 +359,7 @@ describe('ListEventPanel', () => {
   });
 
   it('edits track automation position and value inline', async () => {
-    render(<ListEventPanel isVisible={true} />);
+    render(<EventListPanel isVisible={true} />);
 
     fireEvent.click(screen.getByRole('button', { name: 'Track' }));
     fireEvent.doubleClick(screen.getByText('1 3 0'));

src/components/EventListPanel.tsx

@@ -1,19 +1,19 @@
 import React, { useMemo, useState } from 'react';
-import './ListEventPanel.css';
+import './EventListPanel.css';
 import { useProjectStore } from '../stores/projectStore';
 import { KGMidiRegion } from '../core/region/KGMidiRegion';
 import { KGMidiTrack } from '../core/track/KGMidiTrack';
 import { KGAudioTrack } from '../core/track/KGAudioTrack';
-import RegionListEventTab from './list-event-panel/RegionListEventTab';
+import RegionEventListTab from './event-list-panel/RegionEventListTab';
-import TrackListEventTab from './list-event-panel/TrackListEventTab';
+import TrackEventListTab from './event-list-panel/TrackEventListTab';
 
-interface ListEventPanelProps {
+interface EventListPanelProps {
   isVisible: boolean;
 }
 
 type ScopeTab = 'region' | 'track';
 
-const ListEventPanel: React.FC<ListEventPanelProps> = ({ isVisible }) => {
+const EventListPanel: React.FC<EventListPanelProps> = ({ isVisible }) => {
   const { tracks, activeRegionId, selectedRegionIds, selectedTrackId } = useProjectStore();
   const [scopeTab, setScopeTab] = useState<ScopeTab>('region');
 
@@ -43,21 +43,21 @@ const ListEventPanel: React.FC<ListEventPanelProps> = ({ isVisible }) => {
   }
 
   return (
-    <div className={`list-event-panel${isVisible ? '' : ' is-hidden'}`}>
+    <div className={`event-list-panel${isVisible ? '' : ' is-hidden'}`}>
-      <div className="list-event-panel-header">
+      <div className="event-list-panel-header">
-        <h3>List Event</h3>
+        <h3>Event List</h3>
       </div>
 
-      <div className="list-event-scope-tabs" role="tablist" aria-label="List event scopes">
+      <div className="event-list-scope-tabs" role="tablist" aria-label="Event list scopes">
         <button
-          className={`list-event-scope-tab${scopeTab === 'region' ? ' active' : ''}`}
+          className={`event-list-scope-tab${scopeTab === 'region' ? ' active' : ''}`}
           type="button"
           onClick={() => setScopeTab('region')}
         >
           Region
         </button>
         <button
-          className={`list-event-scope-tab${scopeTab === 'track' ? ' active' : ''}`}
+          className={`event-list-scope-tab${scopeTab === 'track' ? ' active' : ''}`}
           type="button"
           onClick={() => setScopeTab('track')}
         >
@@ -65,15 +65,15 @@ const ListEventPanel: React.FC<ListEventPanelProps> = ({ isVisible }) => {
         </button>
       </div>
 
-      <div className="list-event-panel-body">
+      <div className="event-list-panel-body">
         {scopeTab === 'region' ? (
-          <RegionListEventTab activeMidiRegion={activeMidiRegion} parentTrack={parentTrack} />
+          <RegionEventListTab activeMidiRegion={activeMidiRegion} parentTrack={parentTrack} />
         ) : (
-          <TrackListEventTab selectedTrack={selectedTrack} />
+          <TrackEventListTab selectedTrack={selectedTrack} />
         )}
       </div>
     </div>
   );
 };
 
-export default ListEventPanel;
+export default EventListPanel;

src/components/Toolbar.tsx

@@ -49,7 +49,7 @@ const Toolbar: React.FC = () => {
     barWidthMultiplier, setBarWidthMultiplier,
     isLooping, toggleLoop,
     canUndo, canRedo, undoDescription, redoDescription, undo, redo,
-    toggleChatBox, toggleSettings, toggleKGOnePanel, toggleListEventPanel, showKGOnePanel, showListEventPanel, showChatBox, showSettings, cleanupProjectState, toggleMetronome, isMetronomeEnabled,
+    toggleChatBox, toggleSettings, toggleKGOnePanel, toggleEventListPanel, showKGOnePanel, showEventListPanel, showChatBox, showSettings, cleanupProjectState, toggleMetronome, isMetronomeEnabled,
     isRecording, startRecording, stopRecording,
     // Piano roll state/actions
     showPianoRoll, setShowPianoRoll, activeRegionId, setActiveRegionId,
@@ -66,10 +66,10 @@ const Toolbar: React.FC = () => {
 
   // State for key signature dropdown
   const [showKeySignatureDropdown, setShowKeySignatureDropdown] = React.useState(false);
-  
+
   // State for export dropdown
   const [showExportDropdown, setShowExportDropdown] = React.useState(false);
-  
+
   // State for import modal
   const [showImportModal, setShowImportModal] = React.useState(false);
 
@@ -80,7 +80,7 @@ const Toolbar: React.FC = () => {
   // State for open project modal
   const [showOpenProject, setShowOpenProject] = React.useState(false);
   const [isOpeningProject, setIsOpeningProject] = React.useState(false);
-  
+
   // Close zoom slider on click outside
   React.useEffect(() => {
     if (!showZoomSlider) return;
@@ -95,7 +95,7 @@ const Toolbar: React.FC = () => {
 
   // Key signature options
   const keySignatureOptions = Object.keys(KEY_SIGNATURE_MAP) as KeySignature[];
-  
+
   // Export options
   const exportOptions = ["Export to KGStudio file", "Export to MIDI file", "Export to WAV", "Export to MP3"];
   const lastSelectedRegionId = selectedRegionIds[selectedRegionIds.length - 1] ?? null;
@@ -252,7 +252,7 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("user selected export option:", exportType);
     }
-    
+
     if (exportType === "Export to KGStudio file") {
       handleExportKGStudio();
     } else if (exportType === "Export to MIDI file") {
@@ -262,7 +262,7 @@ const Toolbar: React.FC = () => {
     } else if (exportType === "Export to MP3") {
       handleBounceToMp3();
     }
-    
+
     setShowExportDropdown(false);
   };
 
@@ -306,37 +306,37 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("exporting to MIDI file");
     }
-    
+
     try {
       // Get the current project from KGCore
       const currentProject = KGCore.instance().getCurrentProject();
-      
+
       // Convert project to MIDI format
       const midiData = convertProjectToMidi(currentProject);
-      
+
       // Create a downloadable blob
       const blob = new Blob([midiData.buffer as ArrayBuffer], { type: 'audio/midi' });
-      
+
       // Create a temporary download link
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
       link.download = `${projectName}.mid`;
-      
+
       // Trigger download
       document.body.appendChild(link);
       link.click();
-      
+
       // Cleanup
       document.body.removeChild(link);
       URL.revokeObjectURL(url);
-      
+
       setStatus(`Project "${projectName}" exported as MIDI file`);
-      
+
       if (DEBUG_MODE.TOOLBAR) {
         console.log("MIDI export completed successfully");
       }
-      
+
     } catch (error) {
       console.error("Error exporting MIDI:", error);
       setStatus(`Error exporting MIDI: ${error}`);
@@ -387,10 +387,10 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("file selected for import:", file.name);
     }
-    
+
     // Get file extension
     const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
-    
+
     try {
       if (fileExtension === '.kgstudio') {
         // Handle KGStudio bundle import
@@ -404,7 +404,7 @@ const Toolbar: React.FC = () => {
       } else {
         throw new Error(`Unsupported file type: ${fileExtension}`);
       }
-      
+
     } catch (error) {
       console.error("Error importing file:", error);
       setStatus(`Failed to import file: ${error}`);
@@ -480,35 +480,35 @@ const Toolbar: React.FC = () => {
       if (DEBUG_MODE.TOOLBAR) {
         console.log("Starting MIDI file import:", file.name);
       }
-      
+
       // Show loading status
       setStatus(`Importing MIDI file "${file.name}"...`);
-      
+
       // Read the MIDI file as binary data
       const arrayBuffer = await file.arrayBuffer();
       const midiData = new Uint8Array(arrayBuffer);
-      
+
       if (DEBUG_MODE.TOOLBAR) {
         console.log("MIDI file read successfully, size:", midiData.length, "bytes");
       }
-      
+
       // Get current project to append MIDI tracks to it
       const currentProject = KGCore.instance().getCurrentProject();
-      
+
       // Convert MIDI data and append to current project
       const updatedProject = convertMidiToProject(midiData, currentProject);
-      
+
       if (DEBUG_MODE.TOOLBAR) {
         console.log("MIDI conversion successful, tracks added to existing project");
       }
-      
+
       // Load the updated project using common loading logic
       await loadProjectFromData(updatedProject, `MIDI file "${file.name}"`);
-      
+
       if (DEBUG_MODE.TOOLBAR) {
         console.log("MIDI file imported successfully:", file.name);
       }
-      
+
     } catch (error) {
       console.error("Error importing MIDI file:", error);
       const errorMessage = error instanceof Error ? error.message : String(error);
@@ -585,33 +585,33 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("BPM clicked, current BPM:", bpm);
     }
-    
+
     const newBpmStr = await showPrompt(`Enter new BPM (${TIME_CONSTANTS.MIN_BPM}-${TIME_CONSTANTS.MAX_BPM}):`, bpm.toString());
-    
+
     // Check if user cancelled
     if (newBpmStr === null) {
       return;
     }
-    
+
     // Validate input
     const newBpm = parseInt(newBpmStr.trim());
-    
+
     // Check if it's a valid number
     if (isNaN(newBpm)) {
       await showAlert("Invalid input. Please enter a valid number.");
       return;
     }
-    
+
     // Check if it's within valid range
     if (newBpm <= TIME_CONSTANTS.MIN_BPM || newBpm >= TIME_CONSTANTS.MAX_BPM) {
       await showAlert(`Invalid BPM. Please enter a value between ${TIME_CONSTANTS.MIN_BPM} and ${TIME_CONSTANTS.MAX_BPM}.`);
       return;
     }
-    
+
     // Update BPM
     setBpm(newBpm);
     setStatus(`BPM changed to ${newBpm}`);
-    
+
     if (DEBUG_MODE.TOOLBAR) {
       console.log(`BPM updated from ${bpm} to ${newBpm}`);
     }
@@ -643,7 +643,7 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Key signature changed from", keySignature, "to", newKeySignature);
     }
-    
+
     setKeySignature(newKeySignature as KeySignature);
     setStatus(`Key signature changed to ${newKeySignature}`);
     setShowKeySignatureDropdown(false);
@@ -673,9 +673,9 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Copy button clicked");
     }
-    
+
     const copied = handleCopyOperation();
-    
+
     if (copied) {
       setStatus("Items copied to clipboard");
       if (DEBUG_MODE.TOOLBAR) {
@@ -694,9 +694,9 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Paste button clicked");
     }
-    
+
     const pasted = handlePasteOperation();
-    
+
     if (pasted) {
       setStatus("Items pasted from clipboard");
       if (DEBUG_MODE.TOOLBAR) {
@@ -715,9 +715,9 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Delete button clicked");
     }
-    
+
     const deleted = regionDeleteManager.deleteSelectedRegions();
-    
+
     if (deleted) {
       setStatus("Selected regions deleted");
       if (DEBUG_MODE.TOOLBAR) {
@@ -875,16 +875,16 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Undo button clicked");
     }
-    
+
     if (!canUndo) {
       await showAlert("Nothing to undo");
       return;
     }
-    
+
     undo();
     const description = undoDescription || "action";
     setStatus(`Undid: ${description}`);
-    
+
     if (DEBUG_MODE.TOOLBAR) {
       console.log(`Undo successful: ${description}`);
     }
@@ -895,16 +895,16 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Redo button clicked");
     }
-    
+
     if (!canRedo) {
       await showAlert("Nothing to redo");
       return;
     }
-    
+
     redo();
     const description = redoDescription || "action";
     setStatus(`Redid: ${description}`);
-    
+
     if (DEBUG_MODE.TOOLBAR) {
       console.log(`Redo successful: ${description}`);
     }
@@ -915,7 +915,7 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Chat button clicked");
     }
-    
+
     toggleChatBox();
     setStatus("Chat toggled");
   };
@@ -925,7 +925,7 @@ const Toolbar: React.FC = () => {
     if (DEBUG_MODE.TOOLBAR) {
       console.log("Settings button clicked");
     }
-    
+
     toggleSettings();
     setStatus("Settings toggled");
   };
@@ -940,11 +940,11 @@ const Toolbar: React.FC = () => {
     toggleKGOnePanel();
   };
 
-  const handleListEventClick = () => {
+  const handleEventListClick = () => {
     if (DEBUG_MODE.TOOLBAR) {
-      console.log("List Event button clicked");
+      console.log("Event List button clicked");
     }
-    toggleListEventPanel();
+    toggleEventListPanel();
   };
 
   // Handle Piano button click: open piano roll if closed, targeting active or selected region
@@ -1039,226 +1039,226 @@ const Toolbar: React.FC = () => {
           <div className="logo-container">
             <img src={`${import.meta.env.BASE_URL}logo.png`} alt="DAW Logo" className="logo" />
           </div>
-          <div 
+          <div
-            className="project-name" 
+            className="project-name"
             onClick={handleProjectNameClick}
           >
             {projectName}
           </div>
         </div>
-      
+
-      <div className="toolbar-center">
+        <div className="toolbar-center">
-        <button title="New" onClick={handleNewProject}><FaPlus /></button>
+          <button title="New" onClick={handleNewProject}><FaPlus /></button>
-        <button title="Load" onClick={handleLoadProject}><FaFolderOpen /></button>
+          <button title="Load" onClick={handleLoadProject}><FaFolderOpen /></button>
-        <button title="Save" onClick={handleSaveProject}><FaSave /></button>
+          <button title="Save" onClick={handleSaveProject}><FaSave /></button>
-        <div style={{ position: 'relative', display: 'inline-block' }}>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
-          <button 
+            <button
-            title="Export" 
+              title="Export"
-            onClick={() => setShowExportDropdown(!showExportDropdown)}
+              onClick={() => setShowExportDropdown(!showExportDropdown)}
-            style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
+              style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
-          >
-            <FaDownload />
-          </button>
-          <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10000 }}>
-            <KGDropdown
-              options={exportOptions}
-              value={exportOptions[0]}
-              onChange={handleExportProject}
-              label="Export"
-              hideButton={true}
-              isOpen={showExportDropdown}
-              onToggle={setShowExportDropdown}
-              className="export-dropdown"
-            />
-          </div>
-        </div>
-        <button title="Import" onClick={handleImportProject}><FaUpload /></button>
-        <button
-          title="Settings"
-          className={`tool-button ${showSettings ? 'active' : ''}`}
-          onClick={handleSettingsClick}
-        >
-          <FaCog />
-        </button>
-        <div className="toolbar-separator"></div>
-        <button title="Undo" onClick={handleUndoClick}><FaUndo /></button>
-        <button title="Redo" onClick={handleRedoClick}><FaRedo /></button>
-        <div className="toolbar-separator"></div>
-        <button 
-          title="Select" 
-          className={`tool-button ${activeMainTool === 'pointer' ? 'active' : ''}`}
-          onClick={() => handleMainToolSelect('pointer')}
-        >
-          <FaMousePointer />
-        </button>
-        <button
-          title="Pencil"
-          className={`tool-button ${activeMainTool === 'pencil' ? 'active' : ''}`}
-          onClick={() => handleMainToolSelect('pencil')}
-        >
-          <FaPencil />
-        </button>
-        <button
-          title="Split Region at Playhead"
-          onClick={handleSplitClick}
-        >
-          <FaCut />
-        </button>
-        <button
-          title="Merge Selected MIDI Regions"
-          onClick={handleMergeClick}
-        >
-          <FaCompress />
-        </button>
-        <button
-          title="Snap to Grid"
-          className={`tool-button ${isSnapping ? 'active' : ''}`}
-          onClick={handleSnappingToggle}
-        >
-          <FaMagnet />
-        </button>
-        <div className="toolbar-separator"></div>
-        <button title="Copy" onClick={handleCopyClick}><FaCopy /></button>
-        <button title="Paste" onClick={handlePasteClick}><FaPaste /></button>
-        <button title="Delete" onClick={handleDeleteClick}><FaTrash /></button>
-        <div className="toolbar-separator"></div>
-        <button title="Back to beginning" className="button-back-to-beginning" onClick={handleBackToBeginningClick}><FaStepBackward /></button>
-        {!isPlaying ? (
-          <button title="Play" className="button-play" onClick={handlePlayClick} disabled={isPreparingPlayback}><FaPlay /></button>
-        ) : (
-          <button title="Pause" className="button-pause" onClick={handlePauseClick}><FaPause /></button>
-        )}
-        <button
-          title={isRecording ? "Stop Recording" : "Record"}
-          className={`tool-button record-button ${isRecording ? 'active' : ''}`}
-          onClick={handleRecordClick}
-        >
-          <FaCircle />
-        </button>
-        <button
-          title="Loop"
-          className={`tool-button ${isLooping ? 'active' : ''}`}
-          onClick={handleLoopToggle}
-        >
-          <FaSync />
-        </button>
-        <div className="toolbar-separator"></div>
-        <button
-          title="Metronome"
-          className={`tool-button ${isMetronomeEnabled ? 'active' : ''}`}
-          onClick={handleMetronomeToggle}
-        >
-          <MetronomeIcon />
-        </button>
-        <button title="Piano" onClick={handlePianoButtonClick}><PianoIcon /></button>
-        {/* <button title="Record"><FaCircle className="record-btn" /></button>
-        <button title="Metronome">🎵</button> */}
-      </div>
-      
-      <div className="toolbar-right">
-        <div className="transport-control">
-          <div className="transport-item" style={{ position: 'relative' }} ref={zoomSliderRef}>
-            <span
-              className='current-zoom'
-              onClick={() => setShowZoomSlider(!showZoomSlider)}
-              style={{ cursor: 'pointer' }}
             >
-              {barWidthMultiplier}x
+              <FaDownload />
-            </span>
+            </button>
-            {showZoomSlider && (
-              <div className="zoom-slider-popup">
-                <input
-                  type="range"
-                  min="1"
-                  max="8"
-                  step="1"
-                  value={barWidthMultiplier}
-                  onChange={(e) => setBarWidthMultiplier(parseInt(e.target.value))}
-                />
-                <span className="zoom-slider-label">{barWidthMultiplier}x</span>
-              </div>
-            )}
-          </div>
-          <div className="transport-item">
-            <span className='current-time' onClick={handleCurrentTimeClick} style={{ cursor: 'pointer' }}>{currentTime}</span>
-          </div>
-          <div className="transport-item">
-            <span className='current-bpm' onClick={handleBpmClick} style={{ cursor: 'pointer' }}>{bpm}</span>
-          </div>
-          <div className="transport-item">
-            <span className='current-time-signature' onClick={handleTimeSignatureClick} style={{ cursor: 'pointer' }}>{timeSignature.numerator + "/" + timeSignature.denominator}</span>
-          </div>
-          <div className="transport-item" style={{ position: 'relative' }}>
-            <span 
-              className='current-key-signature' 
-              onClick={() => setShowKeySignatureDropdown(!showKeySignatureDropdown)} 
-              style={{ cursor: 'pointer' }}
-            >
-              {keySignature}
-            </span>
             <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10000 }}>
               <KGDropdown
-                options={keySignatureOptions}
+                options={exportOptions}
-                value={keySignature}
+                value={exportOptions[0]}
-                onChange={handleKeySignatureChange}
+                onChange={handleExportProject}
-                label="Key Signature"
+                label="Export"
                 hideButton={true}
-                isOpen={showKeySignatureDropdown}
+                isOpen={showExportDropdown}
-                onToggle={setShowKeySignatureDropdown}
+                onToggle={setShowExportDropdown}
-                className="key-signature-dropdown"
+                className="export-dropdown"
               />
             </div>
           </div>
+          <button title="Import" onClick={handleImportProject}><FaUpload /></button>
+          <button
+            title="Settings"
+            className={`tool-button ${showSettings ? 'active' : ''}`}
+            onClick={handleSettingsClick}
+          >
+            <FaCog />
+          </button>
+          <div className="toolbar-separator"></div>
+          <button title="Undo" onClick={handleUndoClick}><FaUndo /></button>
+          <button title="Redo" onClick={handleRedoClick}><FaRedo /></button>
+          <div className="toolbar-separator"></div>
+          <button
+            title="Select"
+            className={`tool-button ${activeMainTool === 'pointer' ? 'active' : ''}`}
+            onClick={() => handleMainToolSelect('pointer')}
+          >
+            <FaMousePointer />
+          </button>
+          <button
+            title="Pencil"
+            className={`tool-button ${activeMainTool === 'pencil' ? 'active' : ''}`}
+            onClick={() => handleMainToolSelect('pencil')}
+          >
+            <FaPencil />
+          </button>
+          <button
+            title="Split Region at Playhead"
+            onClick={handleSplitClick}
+          >
+            <FaCut />
+          </button>
+          <button
+            title="Merge Selected MIDI Regions"
+            onClick={handleMergeClick}
+          >
+            <FaCompress />
+          </button>
+          <button
+            title="Snap to Grid"
+            className={`tool-button ${isSnapping ? 'active' : ''}`}
+            onClick={handleSnappingToggle}
+          >
+            <FaMagnet />
+          </button>
+          <div className="toolbar-separator"></div>
+          <button title="Copy" onClick={handleCopyClick}><FaCopy /></button>
+          <button title="Paste" onClick={handlePasteClick}><FaPaste /></button>
+          <button title="Delete" onClick={handleDeleteClick}><FaTrash /></button>
+          <div className="toolbar-separator"></div>
+          <button title="Back to beginning" className="button-back-to-beginning" onClick={handleBackToBeginningClick}><FaStepBackward /></button>
+          {!isPlaying ? (
+            <button title="Play" className="button-play" onClick={handlePlayClick} disabled={isPreparingPlayback}><FaPlay /></button>
+          ) : (
+            <button title="Pause" className="button-pause" onClick={handlePauseClick}><FaPause /></button>
+          )}
+          <button
+            title={isRecording ? "Stop Recording" : "Record"}
+            className={`tool-button record-button ${isRecording ? 'active' : ''}`}
+            onClick={handleRecordClick}
+          >
+            <FaCircle />
+          </button>
+          <button
+            title="Loop"
+            className={`tool-button ${isLooping ? 'active' : ''}`}
+            onClick={handleLoopToggle}
+          >
+            <FaSync />
+          </button>
+          <div className="toolbar-separator"></div>
+          <button
+            title="Metronome"
+            className={`tool-button ${isMetronomeEnabled ? 'active' : ''}`}
+            onClick={handleMetronomeToggle}
+          >
+            <MetronomeIcon />
+          </button>
+          <button title="Piano" onClick={handlePianoButtonClick}><PianoIcon /></button>
+          {/* <button title="Record"><FaCircle className="record-btn" /></button>
+        <button title="Metronome">🎵</button> */}
+        </div>
+
+        <div className="toolbar-right">
+          <div className="transport-control">
+            <div className="transport-item" style={{ position: 'relative' }} ref={zoomSliderRef}>
+              <span
+                className='current-zoom'
+                onClick={() => setShowZoomSlider(!showZoomSlider)}
+                style={{ cursor: 'pointer' }}
+              >
+                {barWidthMultiplier}x
+              </span>
+              {showZoomSlider && (
+                <div className="zoom-slider-popup">
+                  <input
+                    type="range"
+                    min="1"
+                    max="8"
+                    step="1"
+                    value={barWidthMultiplier}
+                    onChange={(e) => setBarWidthMultiplier(parseInt(e.target.value))}
+                  />
+                  <span className="zoom-slider-label">{barWidthMultiplier}x</span>
+                </div>
+              )}
+            </div>
+            <div className="transport-item">
+              <span className='current-time' onClick={handleCurrentTimeClick} style={{ cursor: 'pointer' }}>{currentTime}</span>
+            </div>
+            <div className="transport-item">
+              <span className='current-bpm' onClick={handleBpmClick} style={{ cursor: 'pointer' }}>{bpm}</span>
+            </div>
+            <div className="transport-item">
+              <span className='current-time-signature' onClick={handleTimeSignatureClick} style={{ cursor: 'pointer' }}>{timeSignature.numerator + "/" + timeSignature.denominator}</span>
+            </div>
+            <div className="transport-item" style={{ position: 'relative' }}>
+              <span
+                className='current-key-signature'
+                onClick={() => setShowKeySignatureDropdown(!showKeySignatureDropdown)}
+                style={{ cursor: 'pointer' }}
+              >
+                {keySignature}
+              </span>
+              <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10000 }}>
+                <KGDropdown
+                  options={keySignatureOptions}
+                  value={keySignature}
+                  onChange={handleKeySignatureChange}
+                  label="Key Signature"
+                  hideButton={true}
+                  isOpen={showKeySignatureDropdown}
+                  onToggle={setShowKeySignatureDropdown}
+                  className="key-signature-dropdown"
+                />
+              </div>
+            </div>
+          </div>
+          <button
+            title={isKGOneEnabled ? 'K.G.One Music Generator' : 'K.G.One integration is disabled — enable it in Settings'}
+            onClick={handleKGOneClick}
+            disabled={!isKGOneEnabled}
+            className={showKGOnePanel ? 'active' : ''}
+            style={!isKGOneEnabled ? { opacity: 0.4, cursor: 'not-allowed' } : undefined}
+          >
+            <FaWandMagicSparkles />
+          </button>
+          <button
+            title="Chat"
+            onClick={handleChatClick}
+            className={showChatBox ? 'active' : ''}
+          >
+            <FaComments />
+          </button>
+          <button
+            title="Event List Editor"
+            onClick={handleEventListClick}
+            className={showEventListPanel ? 'active' : ''}
+          >
+            <FaListUl />
+          </button>
         </div>
-        <button
-          title={isKGOneEnabled ? 'K.G.One Music Generator' : 'K.G.One integration is disabled — enable it in Settings'}
-          onClick={handleKGOneClick}
-          disabled={!isKGOneEnabled}
-          className={showKGOnePanel ? 'active' : ''}
-          style={!isKGOneEnabled ? { opacity: 0.4, cursor: 'not-allowed' } : undefined}
-        >
-          <FaWandMagicSparkles />
-        </button>
-        <button
-          title="Chat"
-          onClick={handleChatClick}
-          className={showChatBox ? 'active' : ''}
-        >
-          <FaComments />
-        </button>
-        <button
-          title="List Event Editor"
-          onClick={handleListEventClick}
-          className={showListEventPanel ? 'active' : ''}
-        >
-          <FaListUl />
-        </button>
       </div>
-    </div>
-    
-    <FileImportModal
-      isVisible={showImportModal}
-      onClose={() => setShowImportModal(false)}
-      onFileImport={handleFileImport}
-      acceptedTypes={['.kgstudio', '.json', '.mid', '.midi']}
-      title="Import Project"
-      description="Drag and drop your project file here"
-    />
 
-    <LoadingOverlay
+      <FileImportModal
-      visible={isOpeningProject}
+        isVisible={showImportModal}
-      message="Opening project..."
+        onClose={() => setShowImportModal(false)}
-    />
+        onFileImport={handleFileImport}
-
+        acceptedTypes={['.kgstudio', '.json', '.mid', '.midi']}
-    {showOpenProject && (
+        title="Import Project"
-      <OpenProjectModal
+        description="Drag and drop your project file here"
-        onClose={() => setShowOpenProject(false)}
-        onConfirmOpenProject={handleConfirmOpenProject}
-        onOpenProject={handleOpenProjectSelect}
-        currentProjectName={savedProjectName}
-        onCreateNewProject={createNewProject}
       />
-    )}
+
+      <LoadingOverlay
+        visible={isOpeningProject}
+        message="Opening project..."
+      />
+
+      {showOpenProject && (
+        <OpenProjectModal
+          onClose={() => setShowOpenProject(false)}
+          onConfirmOpenProject={handleConfirmOpenProject}
+          onOpenProject={handleOpenProjectSelect}
+          currentProjectName={savedProjectName}
+          onCreateNewProject={createNewProject}
+        />
+      )}
     </>
   );
 };

src/components/event-list-panel/RegionEventListTab.tsx

@@ -36,7 +36,7 @@ import { UpdateNotePropertiesCommand } from '../../core/commands/note/UpdateNote
 import { UpdatePitchBendPropertiesCommand } from '../../core/commands/note/UpdatePitchBendPropertiesCommand';
 import { showAlert } from '../../util/dialogUtil';
 
-interface RegionListEventTabProps {
+interface RegionEventListTabProps {
   activeMidiRegion: KGMidiRegion | null;
   parentTrack: KGMidiTrack | null;
 }
@@ -181,7 +181,7 @@ const parseControllerValueDeltaInput = (raw: string): { delta: number } | { erro
   return { delta: parseInt(trimmed, 10) };
 };
 
-const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegion, parentTrack }) => {
+const RegionEventListTab: React.FC<RegionEventListTabProps> = ({ activeMidiRegion, parentTrack }) => {
   const {
     selectedNoteIds,
     selectedPitchBendIds,
@@ -941,22 +941,22 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
 
   return (
     <>
-      <div className="list-event-tabs" role="tablist" aria-label="Region event filters">
+      <div className="event-list-tabs" role="tablist" aria-label="Region event filters">
-        <button className={`list-event-tab${showNotes ? ' active' : ''}`} type="button" onClick={() => setShowNotes(value => !value)}>Notes</button>
+        <button className={`event-list-tab${showNotes ? ' active' : ''}`} type="button" onClick={() => setShowNotes(value => !value)}>Notes</button>
-        <button className={`list-event-tab${showPitchBends ? ' active' : ''}`} type="button" onClick={() => setShowPitchBends(value => !value)}>Pitch Bends</button>
+        <button className={`event-list-tab${showPitchBends ? ' active' : ''}`} type="button" onClick={() => setShowPitchBends(value => !value)}>Pitch Bends</button>
-        <button className={`list-event-tab${showControllers ? ' active' : ''}`} type="button" onClick={() => setShowControllers(value => !value)}>Controller</button>
+        <button className={`event-list-tab${showControllers ? ' active' : ''}`} type="button" onClick={() => setShowControllers(value => !value)}>Controller</button>
       </div>
 
       {!activeMidiRegion ? (
-        <div className="list-event-empty-state">
+        <div className="event-list-empty-state">
           Please select a MIDI region, or open one in the Piano Roll, to view its event list.
         </div>
       ) : (
         <>
-          <div className="list-event-toolbar">
+          <div className="event-list-toolbar">
-            <div className="list-event-toolbar-group">
+            <div className="event-list-toolbar-group">
               <button
-                className="list-event-add-button"
+                className="event-list-add-button"
                 title={addEventType === 'note' ? 'Add note at playhead' : addEventType === 'pitch-bend' ? 'Add pitch bend at playhead' : 'Add controller event at playhead'}
                 type="button"
                 onClick={handleAddEvent}
@@ -968,12 +968,12 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                 value={addEventType}
                 onChange={(value) => setAddEventType(value as AddEventType)}
                 label="Note"
-                buttonClassName="list-event-type-button"
+                buttonClassName="event-list-type-button"
                 showValueAsLabel
               />
             </div>
 
-            <div className="list-event-toolbar-group list-event-toolbar-group-right">
+            <div className="event-list-toolbar-group event-list-toolbar-group-right">
               <KGDropdown
                 options={KGPianoRollState.QUANT_POS_OPTIONS}
                 value={quantPosition}
@@ -982,7 +982,7 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                   quantizeSelectedNotes(value);
                 }}
                 label="Qua. Pos."
-                buttonClassName="list-event-quant-button"
+                buttonClassName="event-list-quant-button"
               />
               <KGDropdown
                 options={KGPianoRollState.QUANT_LEN_OPTIONS}
@@ -992,10 +992,10 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                   quantizeSelectedNoteLengths(value);
                 }}
                 label="Qua. Len."
-                buttonClassName="list-event-quant-button"
+                buttonClassName="event-list-quant-button"
               />
               <button
-                className="list-event-delete-button"
+                className="event-list-delete-button"
                 title="Delete visible selected rows"
                 type="button"
                 onClick={handleDeleteSelectedRows}
@@ -1006,8 +1006,8 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
             </div>
           </div>
 
-          <div className="list-event-table-shell" onMouseDown={handleTableBackgroundMouseDown}>
+          <div className="event-list-table-shell" onMouseDown={handleTableBackgroundMouseDown}>
-            <table className="list-event-table">
+            <table className="event-list-table">
               <thead>
                 <tr>
                   <th>Position</th>
@@ -1056,7 +1056,7 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                         {isEditingPosition ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -1075,7 +1075,7 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                         {isEditingNum ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -1092,7 +1092,7 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                         {isEditingVal ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -1110,7 +1110,7 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
                         {isEditingLength ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -1132,4 +1132,4 @@ const RegionListEventTab: React.FC<RegionListEventTabProps> = ({ activeMidiRegio
   );
 };
 
-export default RegionListEventTab;
+export default RegionEventListTab;

src/components/event-list-panel/TrackEventListTab.tsx

@@ -30,7 +30,7 @@ import { isModifierKeyPressed } from '../../util/osUtil';
 import { showAlert } from '../../util/dialogUtil';
 import { AUDIO_INTERFACE_CONSTANTS } from '../../constants/coreConstants';
 
-interface TrackListEventTabProps {
+interface TrackEventListTabProps {
   selectedTrack: KGMidiTrack | KGAudioTrack | null;
 }
 
@@ -118,7 +118,7 @@ const findPreviousPanValue = (points: KGTrackAutomationPoint[], beat: number): n
   return previousPoint?.getValue() ?? 0;
 };
 
-const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack }) => {
+const TrackEventListTab: React.FC<TrackEventListTabProps> = ({ selectedTrack }) => {
   const {
     tracks,
     playheadPosition,
@@ -659,22 +659,22 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
 
   return (
     <>
-      <div className="list-event-tabs" role="tablist" aria-label="Track list modes">
+      <div className="event-list-tabs" role="tablist" aria-label="Track list modes">
-        <button className={`list-event-tab${showRegions ? ' active' : ''}`} aria-pressed={showRegions} type="button" onClick={() => setShowRegions(value => !value)}>Regions</button>
+        <button className={`event-list-tab${showRegions ? ' active' : ''}`} aria-pressed={showRegions} type="button" onClick={() => setShowRegions(value => !value)}>Regions</button>
-        <button className={`list-event-tab${showVolume ? ' active' : ''}`} aria-pressed={showVolume} type="button" onClick={() => setShowVolume(value => !value)}>Volume</button>
+        <button className={`event-list-tab${showVolume ? ' active' : ''}`} aria-pressed={showVolume} type="button" onClick={() => setShowVolume(value => !value)}>Volume</button>
-        <button className={`list-event-tab${showPan ? ' active' : ''}`} aria-pressed={showPan} type="button" onClick={() => setShowPan(value => !value)}>Pan</button>
+        <button className={`event-list-tab${showPan ? ' active' : ''}`} aria-pressed={showPan} type="button" onClick={() => setShowPan(value => !value)}>Pan</button>
       </div>
 
       {!liveSelectedTrack ? (
-        <div className="list-event-empty-state">
+        <div className="event-list-empty-state">
           Please select a track to view regions and track automation.
         </div>
       ) : (
         <>
-          <div className="list-event-toolbar">
+          <div className="event-list-toolbar">
-            <div className="list-event-toolbar-group">
+            <div className="event-list-toolbar-group">
               <button
-                className="list-event-add-button"
+                className="event-list-add-button"
                 title={addTrackItemType === 'midi-region' ? 'Add MIDI region at playhead' : addTrackItemType === 'volume' ? 'Add volume automation point at playhead' : 'Add pan automation point at playhead'}
                 type="button"
                 onClick={handleAddTrackItem}
@@ -686,14 +686,14 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
                 value={addTrackItemType}
                 onChange={(value) => setAddTrackItemType(value as AddTrackItemType)}
                 label="Add"
-                buttonClassName="list-event-type-button"
+                buttonClassName="event-list-type-button"
                 showValueAsLabel
               />
             </div>
 
-            <div className="list-event-toolbar-group list-event-toolbar-group-right">
+            <div className="event-list-toolbar-group event-list-toolbar-group-right">
               <button
-                className="list-event-delete-button"
+                className="event-list-delete-button"
                 title="Delete visible selected rows"
                 type="button"
                 onClick={handleDeleteSelectedRows}
@@ -704,8 +704,8 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
             </div>
           </div>
 
-          <div className="list-event-table-shell" onMouseDown={handleTableBackgroundMouseDown}>
+          <div className="event-list-table-shell" onMouseDown={handleTableBackgroundMouseDown}>
-            <table className="list-event-table">
+            <table className="event-list-table">
               <thead>
                 <tr>
                   <th>Position</th>
@@ -738,7 +738,7 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
                         {isEditingPosition ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -757,7 +757,7 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
                         {isEditingVal ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -775,7 +775,7 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
                         {isEditingLength ? (
                           <input
                             ref={editInputRef}
-                            className="list-event-cell-input"
+                            className="event-list-cell-input"
                             value={editingCell.value}
                             onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
                             onBlur={handleEditInputBlur}
@@ -797,4 +797,4 @@ const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack })
   );
 };
 
-export default TrackListEventTab;
+export default TrackEventListTab;

src/components/piano-roll/PianoRoll.tsx

@@ -47,8 +47,8 @@ const PianoRoll: React.FC<PianoRollProps> = ({
 }) => {
   const isSpectrogram = mode === 'spectrogram';
   const isHybrid = mode === 'hybrid';
-  const { maxBars, tracks, updateTrack, timeSignature, showChatBox, showKGOnePanel, showListEventPanel, showInstrumentSelection, keySignature, selectedMode, setSelectedMode, playheadPosition, isPlaying, autoScrollEnabled, bpm, pianoRollScrollRequest, selectedNoteIds, automationRedrawVersion } = useProjectStore();
+  const { maxBars, tracks, updateTrack, timeSignature, showChatBox, showKGOnePanel, showEventListPanel, showInstrumentSelection, keySignature, selectedMode, setSelectedMode, playheadPosition, isPlaying, autoScrollEnabled, bpm, pianoRollScrollRequest, selectedNoteIds, automationRedrawVersion } = useProjectStore();
-  
+
   // Tool state for piano roll
   const [activeTool, setActiveTool] = useState<'pointer' | 'pencil'>('pointer');
 
@@ -62,7 +62,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
   const [pianoRollZoom, setPianoRollZoom] = useState<number>(1);
   const [automationEnabled, setAutomationEnabled] = useState(false);
   const [automationType, setAutomationType] = useState<PianoRollAutomationType>('pitch-bend');
-  
+
   // Quantization state
   const [quantPosition, setQuantPosition] = useState<string>('1/8');
   const [quantLength, setQuantLength] = useState<string>('1/8');
@@ -75,7 +75,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
 
   // Piano roll state with temporary initial values
   const [position, setPosition] = useState(initialPosition || { x: 0, y: 0 });
-  
+
   // Blink effect state for toolbar button feedback
   const [blinkButton, setBlinkButton] = useState<string | null>(null);
   const [size, setSize] = useState(initialSize || { width: 800, height: PIANO_ROLL_CONSTANTS.PIANO_ROLL_HEIGHT });
@@ -102,7 +102,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
 
   // Ref for storing the setNoteUpdateCounter function
   const triggerNoteUpdateRef = useRef<React.Dispatch<React.SetStateAction<number>> | null>(null);
-  
+
   // Ref for storing the deleteSelectedNotes function
   const deleteSelectedNotesRef = useRef<(() => boolean) | null>(null);
 
@@ -133,32 +133,32 @@ const PianoRoll: React.FC<PianoRollProps> = ({
           y: window.innerHeight - statusBarHeight - pianoRollHeight
         };
       };
-      
+
       const calculateInitialSize = () => {
         const rootStyles = getComputedStyle(document.documentElement);
         const chatBoxWidthStr = rootStyles.getPropertyValue('--chat-box-width') || '350px';
         const instrumentPanelWidthStr = rootStyles.getPropertyValue('--instrument-selection-width') || '300px';
         const chatBoxWidth = parseInt(chatBoxWidthStr, 10) || 350;
         const instrumentPanelWidth = parseInt(instrumentPanelWidthStr, 10) || 300;
-        
+
         let availableWidth = window.innerWidth;
-        if (showChatBox || showKGOnePanel || showListEventPanel) availableWidth -= chatBoxWidth;
+        if (showChatBox || showKGOnePanel || showEventListPanel) availableWidth -= chatBoxWidth;
         if (showInstrumentSelection) availableWidth -= instrumentPanelWidth;
-        
+
         // Ensure a sensible minimum starting width
         const clampedWidth = Math.max(400, availableWidth);
-        
+
         return {
           width: clampedWidth,
           height: PIANO_ROLL_CONSTANTS.PIANO_ROLL_HEIGHT
         };
       };
-      
+
       // Set position and size only if not provided as props
       if (!initialPosition) {
         setPosition(calculateInitialPosition());
       }
-      
+
       if (!initialSize) {
         setSize(calculateInitialSize());
       }
@@ -195,17 +195,17 @@ const PianoRoll: React.FC<PianoRollProps> = ({
   // Sync local state with KGPianoRollState on mount
   useEffect(() => {
     const pianoRollState = KGPianoRollState.instance();
-    
+
     // Sync snapping state
     const currentSnap = pianoRollState.getCurrentSnap();
     setSnapping(currentSnap);
-    
+
     // Sync tool state
     const currentTool = pianoRollState.getActiveTool() as 'pointer' | 'pencil';
     setActiveTool(currentTool);
     setAutomationEnabled(pianoRollState.getAutomationViewEnabled());
     setAutomationType(pianoRollState.getCurrentAutomationType() as PianoRollAutomationType);
-    
+
     if (DEBUG_MODE.PIANO_ROLL) {
       console.log(`Synced piano roll state on mount - snap: ${currentSnap}, tool: ${currentTool}`);
     }
@@ -257,10 +257,10 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         onClose();
       }
     };
-    
+
     // Add event listener
     window.addEventListener('keydown', handleKeyDown);
-    
+
     // Remove event listener on cleanup
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
@@ -284,13 +284,13 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       e.preventDefault();
     }
   };
-  
+
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       if (isDragging) {
         // Set the flag to true as soon as any movement happens
         wasDraggingRef.current = true;
-        
+
         setPosition({
           x: e.clientX - dragOffset.x,
           y: e.clientY - dragOffset.y
@@ -302,25 +302,25 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         });
       }
     };
-    
+
     const handleMouseUp = () => {
       setIsDragging(false);
       setIsResizing(false);
       // We keep wasDraggingRef.current as is - it will be used in handleTitleClick
       // and reset on the next mousedown
     };
-    
+
     if (isDragging || isResizing) {
       document.addEventListener('mousemove', handleMouseMove as unknown as EventListener);
       document.addEventListener('mouseup', handleMouseUp);
     }
-    
+
     return () => {
       document.removeEventListener('mousemove', handleMouseMove as unknown as EventListener);
       document.removeEventListener('mouseup', handleMouseUp);
     };
   }, [isDragging, isResizing, dragOffset, position]);
-  
+
   // Handle title click to rename the region
   const handleTitleClick = async () => {
     // If we were just dragging, don't show the rename dialog
@@ -330,28 +330,28 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       }
       return;
     }
-    
+
     if (!activeRegion) return;
-    
+
     // Show a prompt to get the new name
     const newName = await showPrompt("Enter a new name for the region:", activeRegion.getName());
-    
+
     // If the user clicked Cancel or entered an empty string, do nothing
     if (!newName || newName.trim() === '' || newName === activeRegion.getName()) return;
-    
+
     // Use command pattern to update the region name with undo support
     try {
       const command = new UpdateRegionCommand(activeRegion.getId(), { name: newName.trim() });
       KGCore.instance().executeCommand(command);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log(`Executed UpdateRegionCommand: renamed region ${activeRegion.getId()} to "${newName}" using command pattern`);
       }
-      
+
       // Update the store to trigger re-render
       const updatedTracks = [...tracks];
       useProjectStore.setState({ tracks: updatedTracks });
-      
+
     } catch (error) {
       console.error('Error renaming region:', error);
       await showAlert('Failed to rename region. Please try again.');
@@ -366,7 +366,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       console.log(`Selected tool: ${tool}`);
     }
   };
-  
+
   // Handle snapping selection
   const handleSnappingSelect = useCallback((value: string) => {
     setSnapping(value);
@@ -448,166 +448,166 @@ const PianoRoll: React.FC<PianoRollProps> = ({
   const handleSetDeleteNotesTrigger = (deleteFn: () => boolean) => {
     deleteSelectedNotesRef.current = deleteFn;
   };
-  
+
   // Quantize selected notes based on the selected quantization value
   const quantizeSelectedNotes = useCallback((quantValue: string) => {
     if (!activeRegion) return;
-    
+
     // Get the KGCore instance
     const core = KGCore.instance();
-    
+
     // Get all selected notes
     const selectedItems = core.getSelectedItems();
-    const selectedNotes = selectedItems.filter(item => 
+    const selectedNotes = selectedItems.filter(item =>
-      item instanceof KGMidiNote && 
+      item instanceof KGMidiNote &&
       activeRegion.getNotes().some(note => note.getId() === item.getId())
     ) as KGMidiNote[];
-    
+
     if (selectedNotes.length === 0) {
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log('No notes selected for quantization');
       }
       return;
     }
-    
+
     if (DEBUG_MODE.PIANO_ROLL) {
       console.log(`Quantizing ${selectedNotes.length} selected notes with value: ${quantValue}`);
     }
-    
+
     // Parse the quantization value (e.g., "1/4", "1/8", "1/16", "1/32")
     const denominator = parseInt(quantValue.split('/')[1]);
     if (isNaN(denominator)) {
       console.error(`Invalid quantization value: ${quantValue}`);
       return;
     }
-    
+
     // Calculate the quantization step in beats
     // In a 4/4 time signature, a quarter note (1/4) is 1 beat
     // In a 6/8 time signature, an eighth note (1/8) is 1 beat
     const { numerator, denominator: timeSigDenominator } = timeSignature;
-    
+
     // Calculate beats per whole note based on time signature
     // In 4/4, a whole note is 4 beats
     // In 6/8, a whole note is 6 beats (because each beat is an eighth note)
     const beatsPerWholeNote = numerator * (4 / timeSigDenominator);
-    
+
     // Calculate the quantization step in beats
     // quantizationStep should ALWAYS be 4 / denominator regardless of time signature
     const quantizationStep = 4 / denominator;
-    
+
     if (DEBUG_MODE.PIANO_ROLL) {
       console.log(`Time signature: ${numerator}/${timeSigDenominator}`);
       console.log(`Beats per whole note: ${beatsPerWholeNote}`);
       console.log(`Quantization step: ${quantizationStep} beats`);
     }
-    
+
     // Apply quantization to each selected note
     selectedNotes.forEach(note => {
       // Get the current start beat
       const currentStartBeat = note.getStartBeat();
-      
+
       // Calculate the quantized start beat
       const quantizedStartBeat = Math.round(currentStartBeat / quantizationStep) * quantizationStep;
-      
+
       // Calculate the duration of the note
       const duration = note.getEndBeat() - currentStartBeat;
-      
+
       // Set the new start beat and maintain the duration
       note.setStartBeat(quantizedStartBeat);
       note.setEndBeat(quantizedStartBeat + duration);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log(`Quantized note ${note.getId()}: ${currentStartBeat} -> ${quantizedStartBeat}`);
       }
     });
-    
+
     // Find the track that contains this region and update it
     const track = tracks.find(t => t.getId().toString() === activeRegion.getTrackId());
     if (track) {
       updateTrack(track);
     }
-    
+
     // Trigger a re-render by incrementing the note update counter
     if (triggerNoteUpdateRef.current) {
       triggerNoteUpdateRef.current(prev => prev + 1);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log('Triggered note update to re-render quantized notes');
       }
     }
   }, [activeRegion, timeSignature, updateTrack, tracks]);
-  
+
   // Quantize selected notes length based on the selected quantization value
   const quantizeNoteLength = useCallback((quantValue: string) => {
     if (!activeRegion) return;
-    
+
     // Get the KGCore instance
     const core = KGCore.instance();
-    
+
     // Get all selected notes
     const selectedItems = core.getSelectedItems();
-    const selectedNotes = selectedItems.filter(item => 
+    const selectedNotes = selectedItems.filter(item =>
-      item instanceof KGMidiNote && 
+      item instanceof KGMidiNote &&
       activeRegion.getNotes().some(note => note.getId() === item.getId())
     ) as KGMidiNote[];
-    
+
     if (selectedNotes.length === 0) {
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log('No notes selected for length quantization');
       }
       return;
     }
-    
+
     if (DEBUG_MODE.PIANO_ROLL) {
       console.log(`Quantizing length of ${selectedNotes.length} selected notes with value: ${quantValue}`);
     }
-    
+
     // Parse the quantization value (e.g., "1/1", "1/2", "1/4", "1/8", "1/16", "1/32")
     const denominator = parseInt(quantValue.split('/')[1]);
     if (isNaN(denominator)) {
       console.error(`Invalid quantization value: ${quantValue}`);
       return;
     }
-    
+
     // Calculate the quantization step in beats
     // In a 4/4 time signature, a quarter note (1/4) is 1 beat
     // In a 6/8 time signature, an eighth note (1/8) is 1 beat
     const { numerator, denominator: timeSigDenominator } = timeSignature;
-    
+
     // Calculate beats per whole note based on time signature
     // In 4/4, a whole note is 4 beats
     // In 6/8, a whole note is 6 beats (because each beat is an eighth note)
     const beatsPerWholeNote = numerator * (4 / timeSigDenominator);
-    
+
     // Calculate the quantization step in beats
     // quantizationStep should ALWAYS be 4 / denominator regardless of time signature
     const quantizationStep = 4 / denominator;
-    
+
     if (DEBUG_MODE.PIANO_ROLL) {
       console.log(`Time signature: ${numerator}/${timeSigDenominator}`);
       console.log(`Beats per whole note: ${beatsPerWholeNote}`);
       console.log(`Length quantization step: ${quantizationStep} beats`);
     }
-    
+
     // Apply quantization to each selected note
     selectedNotes.forEach(note => {
       // Get the current start and end beats
       const startBeat = note.getStartBeat();
       const currentEndBeat = note.getEndBeat();
-      
+
       // Calculate the current duration
       const currentDuration = currentEndBeat - startBeat;
-      
+
       // Calculate the quantized duration
       // If the current duration is less than the quantization step,
       // extend it to match the quantization step exactly
       // Otherwise, round to the nearest multiple of quantizationStep
       let quantizedDuration;
-      
+
       if (currentDuration < quantizationStep) {
         // For notes shorter than the quantization step, extend to exactly one step
         quantizedDuration = quantizationStep;
-        
+
         if (DEBUG_MODE.PIANO_ROLL) {
           console.log(`Extending short note ${note.getId()} from ${currentDuration} to ${quantizedDuration}`);
         }
@@ -615,28 +615,28 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         // For longer notes, round to nearest multiple of quantizationStep
         quantizedDuration = Math.round(currentDuration / quantizationStep) * quantizationStep;
       }
-      
+
       // Ensure minimum note length
       quantizedDuration = Math.max(PIANO_ROLL_CONSTANTS.MIN_NOTE_LENGTH, quantizedDuration);
-      
+
       // Set the new end beat while maintaining the start beat
       note.setEndBeat(startBeat + quantizedDuration);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log(`Quantized note length ${note.getId()}: ${currentDuration} -> ${quantizedDuration}`);
       }
     });
-    
+
     // Find the track that contains this region and update it
     const track = tracks.find(t => t.getId().toString() === activeRegion.getTrackId());
     if (track) {
       updateTrack(track);
     }
-    
+
     // Trigger a re-render by incrementing the note update counter
     if (triggerNoteUpdateRef.current) {
       triggerNoteUpdateRef.current(prev => prev + 1);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log('Triggered note update to re-render quantized note lengths');
       }
@@ -647,19 +647,19 @@ const PianoRoll: React.FC<PianoRollProps> = ({
   const handleQuantSelect = useCallback((type: 'position' | 'length', value: string) => {
     if (type === 'position') {
       setQuantPosition(value);
-      
+
       // Apply quantization immediately when position quantization is changed
       quantizeSelectedNotes(value);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log(`quant-position selected: ${value}`);
       }
     } else {
       setQuantLength(value);
-      
+
       // Apply length quantization immediately when length quantization is changed
       quantizeNoteLength(value);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log(`quant-length selected: ${value}`);
       }
@@ -710,24 +710,24 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       // We have 8 octaves (0-7), and C4 is in the middle
       // Each octave has 12 notes, each note is piano key height
       // C4 is in octave 4, and C is the first note in each octave
-      
+
       // Calculate from the bottom:
       // - Octaves 0-3 = 4 octaves = 4 * 12 * piano key height
       // - Within octave 4, C is the first note (from bottom), so 0px additional
       const keyHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-piano-key-height')) || 20;
       const c4Position = 4 * 12 * keyHeight; // pixels from bottom
-      
+
       // Total height of all notes (8 octaves * 12 notes * piano key height)
       const totalHeight = 8 * 12 * keyHeight;
-      
+
       // Get the viewport height of the piano roll content
       const viewportHeight = pianoRollNoteScrollRef.current.clientHeight;
-      
+
       // Calculate scroll position to center C4
       // We need to scroll from the top, so we calculate:
       // (total height - C4 position) - (viewport height / 2)
       const scrollPosition = (totalHeight - c4Position) - (viewportHeight / 2);
-      
+
       // Scroll to the calculated position
       pianoRollNoteScrollRef.current.scrollTop = Math.max(0, scrollPosition);
     }
@@ -846,23 +846,23 @@ const PianoRoll: React.FC<PianoRollProps> = ({
     if (pianoRollNoteScrollRef.current && activeRegion) {
       // Get the starting beat of the region
       const startBeat = activeRegion.getStartFromBeat();
-      
+
       // Get the time signature to calculate beats per bar
       const beatsPerBar = timeSignature.numerator;
-      
+
       // Calculate the bar number (0-indexed)
       const barNumber = Math.floor(startBeat / beatsPerBar);
-      
+
       if (DEBUG_MODE.PIANO_ROLL) {
         console.log(`Scrolling to region's starting bar: ${barNumber + 1} (startBeat: ${startBeat}, beatsPerBar: ${beatsPerBar})`);
       }
-      
+
       // Calculate the pixel position (each bar is --region-grid-bar-width wide, which is 160px by default)
       const barWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-grid-bar-width')) || 160;
-      
+
       // Calculate the scroll position to scroll to the starting bar
       const scrollPosition = barNumber * barWidth;
-      
+
       // Scroll to the calculated position
       pianoRollNoteScrollRef.current.scrollLeft = Math.max(0, scrollPosition);
     }
@@ -874,8 +874,8 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       // Skip if user is typing in an input field (including ChatBox)
       const target = event.target as HTMLElement;
       if (target && (
-        target.tagName === 'INPUT' || 
+        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' || 
+        target.tagName === 'TEXTAREA' ||
         target.contentEditable === 'true' ||
         target.hasAttribute('data-chatbox-input') ||
         target.closest('.chatbox-input')
@@ -894,7 +894,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         }
         return;
       }
-      
+
       // Handle piano roll hotkeys
       const configManager = ConfigManager.instance();
       if (configManager.getIsInitialized()) {
@@ -916,21 +916,21 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         const snap_1_4_key = configManager.get('hotkeys.piano_roll.snap_1_4') as string;
         const snap_1_8_key = configManager.get('hotkeys.piano_roll.snap_1_8') as string;
         const snap_1_16_key = configManager.get('hotkeys.piano_roll.snap_1_16') as string;
-        
+
         // Quantize position hotkeys
         const qua_pos_1_4_key = configManager.get('hotkeys.piano_roll.qua_pos_1_4') as string;
         const qua_pos_1_8_key = configManager.get('hotkeys.piano_roll.qua_pos_1_8') as string;
         const qua_pos_1_16_key = configManager.get('hotkeys.piano_roll.qua_pos_1_16') as string;
-        
+
         // Quantize length hotkeys
         const qua_len_1_4_key = configManager.get('hotkeys.piano_roll.qua_len_1_4') as string;
         const qua_len_1_8_key = configManager.get('hotkeys.piano_roll.qua_len_1_8') as string;
         const qua_len_1_16_key = configManager.get('hotkeys.piano_roll.qua_len_1_16') as string;
-        
+
         let actionType: 'snap' | 'quantize' | null = null;
         let actionValue: string | null = null;
         let quantType: 'position' | 'length' | null = null;
-        
+
         // Check snapping hotkeys
         if (event.key === snap_none_key) {
           actionType = 'snap';
@@ -973,21 +973,21 @@ const PianoRoll: React.FC<PianoRollProps> = ({
           actionValue = '1/16';
           quantType = 'length';
         }
-        
+
         if (actionType && actionValue) {
           // Prevent default behavior
           event.preventDefault();
-          
+
           if (actionType === 'snap') {
             // Validate the snap value exists in snap options
             if (KGPianoRollState.SNAP_OPTIONS.includes(actionValue)) {
               // Change snapping value
               handleSnappingSelect(actionValue);
-              
+
               // Trigger blink effect for visual feedback
               setBlinkButton('snapping');
               setTimeout(() => setBlinkButton(null), 200);
-              
+
               if (DEBUG_MODE.PIANO_ROLL) {
                 console.log(`Snap hotkey triggered: ${event.key} → ${actionValue}`);
               }
@@ -995,16 +995,16 @@ const PianoRoll: React.FC<PianoRollProps> = ({
           } else if (actionType === 'quantize' && quantType) {
             // Validate the quantValue exists in the appropriate options
             const validOptions = quantType === 'length' ? KGPianoRollState.QUANT_LEN_OPTIONS : KGPianoRollState.QUANT_POS_OPTIONS;
-            
+
             if (validOptions.includes(actionValue)) {
               // Apply quantization
               handleQuantSelect(quantType, actionValue);
-              
+
               // Trigger blink effect for visual feedback
               const buttonName = quantType === 'length' ? 'quant-length' : 'quant-position';
               setBlinkButton(buttonName);
               setTimeout(() => setBlinkButton(null), 200);
-              
+
               if (DEBUG_MODE.PIANO_ROLL) {
                 console.log(`Quantize ${quantType} hotkey triggered: ${event.key} → ${actionValue}`);
               }
@@ -1013,10 +1013,10 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         }
       }
     };
-    
+
     // Add event listener
     window.addEventListener('keydown', handlePianoRollKeyDown);
-    
+
     // Remove event listener on cleanup
     return () => {
       window.removeEventListener('keydown', handlePianoRollKeyDown);
@@ -1032,20 +1032,20 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       return `${midiName} + ${audioName}`;
     }
     if (!activeRegion) return "EDIT NOTE CLIP";
-    
+
     // Calculate the bar and beat position of the region
     const startBeat = activeRegion.getStartFromBeat();
     const { bar, beatInBar } = beatsToBar(startBeat, timeSignature);
-    
+
     // Format as 1-indexed bar and beat (bar + 1, beatInBar + 1)
     const barNumber = bar + 1;
     const beatNumber = beatInBar + 1;
-    
+
     return `${activeRegion.getName()} (at ${barNumber}:${beatNumber})`;
   };
 
   return (
-    <div 
+    <div
       className="piano-roll-panel"
       style={{
         position: 'fixed',
@@ -1063,7 +1063,7 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         onTitleClick={handleTitleClick}
         onMouseDown={(e) => handleMouseDown(e, 'drag')}
       />
-      
+
       <PianoRollToolbar
         activeTool={activeTool}
         onToolSelect={handleToolSelect}
@@ -1120,8 +1120,8 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         automationType={automationType}
         automationRedrawVersion={automationRedrawVersion}
       />
-      
+
-      <div 
+      <div
         className="resize-handle"
         onMouseDown={(e) => handleMouseDown(e, 'resize')}
       >

src/stores/projectStore.ts

@@ -74,7 +74,7 @@ interface ProjectState {
   isPreparingPlayback: boolean;
   autoScrollEnabled: boolean;
   currentTime: string; // formatted time string
-  
+
   // Selection state for UI reactivity
   selectedNoteIds: string[];
   selectedPitchBendIds: string[];
@@ -82,7 +82,7 @@ interface ProjectState {
   selectedTrackAutomationPointIds: string[];
   selectedRegionIds: string[];
   selectedTrackId: string | null;
-  
+
   // Piano roll state
   showPianoRoll: boolean;
   activeRegionId: string | null;
@@ -92,20 +92,20 @@ interface ProjectState {
   activeTrackAutomationTrackId: string | null;
   activeTrackAutomationType: TrackAutomationType | null;
   trackAutomationRedrawVersion: number;
-  
+
   // ChatBox state
   showChatBox: boolean;
 
   // K.G.One panel state
   showKGOnePanel: boolean;
 
-  // List event panel state
+  // Event list panel state
-  showListEventPanel: boolean;
+  showEventListPanel: boolean;
 
   // Instrument selection panel state
   showInstrumentSelection: boolean;
   // instrumentSelectionTrackId removed; panel now follows selectedTrackId
-  
+
   // Audio import modal state
   showAudioImportModal: boolean;
   audioImportTargetTrackId: string | null;
@@ -140,7 +140,7 @@ interface ProjectState {
   requestPianoRollScroll: (beatPosition: number) => void;
   mainContentScrollRequest: number | null;
   pianoRollScrollRequest: number | null;
-  
+
   // Actions
   setProjectName: (name: string) => void;
   setSavedProjectName: (name: string) => void;
@@ -177,7 +177,7 @@ interface ProjectState {
   clearAllSelections: () => void;
   setSelectedTrack: (trackId: string | null) => void;
   setTrackAutomationView: (trackId: string | null, automationType: TrackAutomationType | null) => void;
-  
+
   // Piano roll actions
   setShowPianoRoll: (show: boolean) => void;
   setActiveRegionId: (regionId: string | null) => void;
@@ -186,10 +186,10 @@ interface ProjectState {
   openHybridMode: (midiRegionId: string, audioRegionId: string) => void;
   bumpAutomationRedrawVersion: () => void;
   bumpTrackAutomationRedrawVersion: () => void;
-  
+
   // Project state cleanup
   cleanupProjectState: () => void;
-  
+
   // ChatBox actions
   setShowChatBox: (show: boolean) => void;
   toggleChatBox: () => void;
@@ -197,27 +197,27 @@ interface ProjectState {
   // K.G.One panel actions
   toggleKGOnePanel: () => void;
 
-  // List event panel actions
+  // Event List panel actions
-  toggleListEventPanel: () => void;
+  toggleEventListPanel: () => void;
 
   // Instrument selection panel actions
   openInstrumentSelectionForTrack: () => void;
   toggleInstrumentSelectionForTrack: () => void;
   closeInstrumentSelection: () => void;
-  
+
   // Settings actions
   setShowSettings: (show: boolean) => void;
   toggleSettings: () => void;
-  
+
   // Copy/paste actions
   pasteRegionsAtTrack: (trackId: string, position: number) => void;
   pasteNotesToActiveRegion: (regionId: string, position: number) => void;
-  
+
   // Undo/redo actions
   undo: () => void;
   redo: () => void;
   syncUndoRedoState: () => void;
-  
+
   // Project state refresh actions
   refreshProjectState: () => void;
 
@@ -282,20 +282,20 @@ function getAudioRecordingExtension(mimeType: string): string {
 // Create the store
 export const useProjectStore = create<ProjectState>((set, get) => {
   const currentProject = KGCore.instance().getCurrentProject();
-  
+
   // Initialize CSS variable for time signature on store creation
   updateTimeSignatureCSS(currentProject.getTimeSignature());
   // Initialize CSS variable for max bars on store creation
   updateMaxBarsCSS(currentProject.getMaxBars());
   // Initialize CSS variable for bar width multiplier on store creation
   updateBarWidthMultiplierCSS(currentProject.getBarWidthMultiplier());
-  
+
   // Get initial ChatBox state from config
   const configManager = ConfigManager.instance();
-  const initialChatBoxState = configManager.getIsInitialized() 
+  const initialChatBoxState = configManager.getIsInitialized()
     ? (configManager.get('chatbox.default_open') as boolean) ?? false
     : false;
-  
+
   // Set up playhead update callback to keep store in sync during playback
   KGCore.instance().setPlayheadUpdateCallback((position: number) => {
     const { bpm, timeSignature } = get();
@@ -317,7 +317,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
   const syncSelectionFromCore = () => {
     const core = KGCore.instance();
     const selectedItems = core.getSelectedItems();
-    
+
     const noteIds = selectedItems
       .filter(item => item instanceof KGMidiNote)
       .map(item => item.getId());
@@ -333,7 +333,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     const regionIds = selectedItems
       .filter(item => item instanceof KGRegion)
       .map(item => item.getId());
-      
+
     set({
       selectedNoteIds: noteIds,
       selectedPitchBendIds: pitchBendIds,
@@ -345,10 +345,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
   // Register the sync callback with KGCore
   KGCore.instance().onSelectionChanged(syncSelectionFromCore);
-  
+
   // Initial selection sync
   syncSelectionFromCore();
-  
+
   // Set up command history sync callback
   const syncUndoRedoState = () => {
     const core = KGCore.instance();
@@ -362,10 +362,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
   // Register the undo/redo sync callback with KGCore
   KGCore.instance().setOnCommandHistoryChanged(syncUndoRedoState);
-  
+
   // Initial undo/redo state sync
   syncUndoRedoState();
-  
+
   // Ensure a default track exists on initial app start
   // Also auto-select it and open instrument selection panel
   let initialSelectedTrackId: string | null = null;
@@ -403,7 +403,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     isPreparingPlayback: false,
     autoScrollEnabled: true,
     currentTime: beatsToTimeString(KGCore.instance().getPlayheadPosition(), currentProject.getBpm(), currentProject.getTimeSignature()),
-    
+
     // Initial selection state
     selectedNoteIds: [],
     selectedPitchBendIds: [],
@@ -411,7 +411,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     selectedTrackAutomationPointIds: [],
     selectedRegionIds: [],
     selectedTrackId: initialSelectedTrackId,
-    
+
     // Initial piano roll state
     showPianoRoll: false,
     activeRegionId: null,
@@ -421,26 +421,26 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     activeTrackAutomationTrackId: null,
     activeTrackAutomationType: null,
     trackAutomationRedrawVersion: 0,
-    
+
     // Initial ChatBox state
     showChatBox: initialChatBoxState,
 
     // Initial K.G.One panel state
     showKGOnePanel: false,
 
-    // Initial List Event panel state
+    // Initial Event List panel state
-    showListEventPanel: false,
+    showEventListPanel: false,
 
     // Initial Instrument Selection panel state
     showInstrumentSelection: initialShowInstrumentSelection,
-    
+
     // Initial audio import modal state
     showAudioImportModal: false,
     audioImportTargetTrackId: null,
 
     // Initial Settings state
     showSettings: false,
-    
+
     // Initial undo/redo state
     canUndo: false,
     canRedo: false,
@@ -493,18 +493,18 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Create and execute the add track command
         const command = new AddTrackCommand();
         KGCore.instance().executeCommand(command);
-        
+
         // Update the store state with a new array reference to trigger re-render
         const project = KGCore.instance().getCurrentProject();
         set({ tracks: [...project.getTracks()] as KGTrack[] });
-        
+
         // Auto-select the newly created track and open instrument selection panel
         const newTrackId = command.getTrackId().toString();
         set({
           selectedTrackId: newTrackId,
           showInstrumentSelection: true,
         });
-        
+
         console.log(`Added track ${command.getTrackId()}`);
       } catch (error) {
         console.error('Error adding track:', error);
@@ -630,23 +630,23 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         const deletedTrackIndex = currentTracks.findIndex(track => track.getId() === id);
         const { selectedTrackId } = get();
         const isCurrentTrackSelected = selectedTrackId === id.toString();
-        
+
         // Create and execute the remove track command
         const command = new RemoveTrackCommand(id);
         KGCore.instance().executeCommand(command);
-        
+
         // Update the store state with a new array reference to trigger re-render
         const project = KGCore.instance().getCurrentProject();
         const remainingTracks = [...project.getTracks()] as KGTrack[];
         set({ tracks: remainingTracks });
-        
+
         // Auto-select another track if any remain
         if (remainingTracks.length > 0) {
           // Prefer previous track, fallback to next track
-          const newSelectedIndex = deletedTrackIndex > 0 
+          const newSelectedIndex = deletedTrackIndex > 0
             ? deletedTrackIndex - 1  // Select previous track
             : 0;                     // Select first remaining track (was next)
-          
+
           const newSelectedTrack = remainingTracks[newSelectedIndex];
           const newSelectedTrackId = newSelectedTrack.getId().toString();
 
@@ -662,7 +662,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
             showInstrumentSelection: false,
           });
         }
-        
+
         console.log(`Removed track ${id}`);
       } catch (error) {
         console.error('Error removing track:', error);
@@ -672,23 +672,23 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
     updateTrack: async (updatedTrack: KGTrack) => {
       const { tracks } = get();
-      
+
       try {
         // Find the old track to compare instruments
         const oldTrack = tracks.find(track => track.getId() === updatedTrack.getId());
-        
+
         // Type guard to check if track is KGMidiTrack
         const isMidiTrack = (track: KGTrack): track is KGMidiTrack => {
           return track.getCurrentType() === 'KGMidiTrack' && 'getInstrument' in track;
         };
-        
+
         // Check if instrument changed (only for MIDI tracks)
-        const shouldUpdateInstrument = 
+        const shouldUpdateInstrument =
-          isMidiTrack(updatedTrack) && 
+          isMidiTrack(updatedTrack) &&
-          oldTrack && 
+          oldTrack &&
           isMidiTrack(oldTrack) &&
           updatedTrack.getInstrument() !== oldTrack.getInstrument();
-        
+
         // Update instrument in audio interface if changed
         if (shouldUpdateInstrument && isMidiTrack(updatedTrack)) {
           const audioInterface = KGAudioInterface.instance();
@@ -696,18 +696,18 @@ export const useProjectStore = create<ProjectState>((set, get) => {
           audioInterface.setTrackInstrument(updatedTrack.getId().toString(), newInstrument);
           console.log(`Updated track ${updatedTrack.getId()} instrument to ${newInstrument}`);
         }
-        
+
         // Find and update the track
-        const updatedTracks = tracks.map(track => 
+        const updatedTracks = tracks.map(track =>
           track.getId() === updatedTrack.getId() ? updatedTrack : track
         );
-        
+
         // Update the core model
         KGCore.instance().getCurrentProject().setTracks(updatedTracks);
-        
+
         // Update the store
         set({ tracks: updatedTracks });
-        
+
         console.log(`Updated track ${updatedTrack.getId()}`);
       } catch (error) {
         console.error('Error updating track:', error);
@@ -724,7 +724,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Update the store state with the current project state
         const project = KGCore.instance().getCurrentProject();
         set({ tracks: [...project.getTracks()] as KGTrack[] });
-        
+
         console.log(`Updated track ${trackId} properties`);
       } catch (error) {
         console.error('Error updating track properties:', error);
@@ -736,14 +736,14 @@ export const useProjectStore = create<ProjectState>((set, get) => {
       try {
         // Use the new updateTrackProperties method with command pattern
         await get().updateTrackProperties(trackId, { instrument });
-        
+
         console.log(`Set track ${trackId} instrument to ${instrument}`);
       } catch (error) {
         console.error('Error setting track instrument:', error);
         get().setStatus('Failed to change instrument');
       }
     },
-    
+
     reorderTracks: (sourceIndex: number, destinationIndex: number) => {
       try {
         // Create and execute the reorder tracks command
@@ -753,7 +753,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Update the store state with the current project state
         const project = KGCore.instance().getCurrentProject();
         set({ tracks: [...project.getTracks()] as KGTrack[] });
-        
+
         console.log(`Reordered track from index ${sourceIndex} to ${destinationIndex}`);
       } catch (error) {
         console.error('Error reordering tracks:', error);
@@ -774,11 +774,11 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     refreshStatus: () => {
       set({ currentStatus: KGCore.instance().getStatus() || 'Unknown' });
     },
-    
+
     loadProject: async (project: KGProject | null = null, savedName?: string) => {
       try {
         const { setPlayheadPosition } = get();
-        
+
         // Upgrade incoming project data to latest structure version (only when provided explicitly)
         if (project) {
           project = upgradeProjectToLatest(project);
@@ -786,12 +786,12 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         // Get project from KGCore if null
         const projectToLoad = project || KGCore.instance().getCurrentProject();
-        
+
         // Set the project in KGCore if one was provided
         if (project) {
           KGCore.instance().setCurrentProject(projectToLoad);
         }
-        
+
         // Ensure a default "Melody" track exists for empty projects
         if (projectToLoad.getTracks().length === 0) {
           const addDefaultTrackCommand = new AddTrackCommand(undefined, 'Melody');
@@ -800,17 +800,17 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         // Reset playhead to 0 when loading a project
         setPlayheadPosition(0);
-        
+
         // Get project properties
         const maxBars = projectToLoad.getMaxBars();
         const timeSignature = projectToLoad.getTimeSignature();
         const bpm = projectToLoad.getBpm();
         const keySignature = projectToLoad.getKeySignature();
         const tracks = projectToLoad.getTracks();
-        
+
         // Setup audio synths for all tracks
         const audioInterface = KGAudioInterface.instance();
-        
+
         // Clear any existing synths/buses first
         tracks.forEach(track => {
           const trackId = track.getId().toString();
@@ -857,7 +857,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
             audioInterface.setTrackVolume(trackId, track.getVolume());
           }
         }
-        
+
         // Update CSS variables
         updateTimeSignatureCSS(timeSignature);
         updateMaxBarsCSS(maxBars);
@@ -866,7 +866,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Log project loading info
         console.log(`Project max bars: ${maxBars}`);
         console.log(`Setup audio synths for ${tracks.length} tracks`);
-        
+
         // Update the store state to reflect the loaded project
         // Force a new array reference for tracks to trigger React/Zustand re-render
         set({
@@ -914,7 +914,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         // Reset piano roll state for new/loaded project
         KGPianoRollState.instance().setLastEditedNoteLength(1);
-        
+
         // Add a status message
         KGCore.instance().setStatus(`Project "${projectToLoad.getName()}" loaded with audio setup`);
         set({ currentStatus: KGCore.instance().getStatus() || 'Unknown' });
@@ -927,7 +927,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     setPlayheadPosition: (position: number) => {
       const { bpm, timeSignature } = get();
       KGCore.instance().setPlayheadPosition(position);
-      set({ 
+      set({
         playheadPosition: position,
         currentTime: beatsToTimeString(position, bpm, timeSignature)
       });
@@ -1024,9 +1024,9 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
         KGCore.instance().setLoopBoundaryReachedCallback(projectLooping
           ? (loopEndBeat: number) => {
-              _audioRecordingForcedStopBeatAbsolute = loopEndBeat;
+            _audioRecordingForcedStopBeatAbsolute = loopEndBeat;
-              void get().stopRecording();
+            void get().stopRecording();
-            }
+          }
           : null);
 
         setPlayheadPosition(recordingStartBeatAbsolute);
@@ -1405,10 +1405,10 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Create and execute the change project property command
         const command = new ChangeProjectPropertyCommand({ bpm });
         KGCore.instance().executeCommand(command);
-        
+
         // Update the store state
         set({ bpm });
-        
+
         console.log(`Set BPM to ${bpm}`);
       } catch (error) {
         console.error('Error setting BPM:', error);
@@ -1421,12 +1421,12 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Create and execute the change project property command
         const command = new ChangeProjectPropertyCommand({ maxBars });
         KGCore.instance().executeCommand(command);
-        
+
         // Update the store state
         set({ maxBars });
         // Sync CSS var so layout adjusts immediately
         updateMaxBarsCSS(maxBars);
-        
+
         console.log(`Set max bars to ${maxBars}`);
       } catch (error) {
         console.error('Error setting max bars:', error);
@@ -1492,7 +1492,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
     // Selection actions
     syncSelectionFromCore,
-    
+
     clearAllSelections: () => {
       KGCore.instance().clearSelectedItems();
       // Note: syncSelectionFromCore will be called automatically via callback
@@ -1526,7 +1526,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         selectedTrackId: trackId,
       });
     },
-    
+
     // Piano roll actions
     setShowPianoRoll: (show: boolean) => {
       set({ showPianoRoll: show });
@@ -1553,7 +1553,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     bumpTrackAutomationRedrawVersion: () => {
       set(state => ({ trackAutomationRedrawVersion: state.trackAutomationRedrawVersion + 1 }));
     },
-    
+
     // Project state cleanup - used when starting new/loading projects
     cleanupProjectState: () => {
       // Close piano roll if it's visible
@@ -1570,36 +1570,36 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         recordingAudioPreviewPeaks: [],
         recordingAudioPreviewCurrentBeat: 0,
       });
-      
+
       // Clear any selected items
       KGCore.instance().clearSelectedItems();
       // Note: syncSelectionFromCore will be called automatically via callback
-      
+
       console.log("Cleaned up project state: closed piano roll, cleared active region, cleared selections");
     },
-    
+
     // ChatBox action implementations
     setShowChatBox: (show: boolean) => {
       set({
         showChatBox: show,
         showKGOnePanel: show ? false : get().showKGOnePanel,
-        showListEventPanel: show ? false : get().showListEventPanel
+        showEventListPanel: show ? false : get().showEventListPanel
       });
     },
-    
+
     toggleChatBox: () => {
       const { showChatBox } = get();
-      set({ showChatBox: !showChatBox, showKGOnePanel: false, showListEventPanel: false });
+      set({ showChatBox: !showChatBox, showKGOnePanel: false, showEventListPanel: false });
     },
 
     toggleKGOnePanel: () => {
       const { showKGOnePanel } = get();
-      set({ showKGOnePanel: !showKGOnePanel, showChatBox: false, showListEventPanel: false });
+      set({ showKGOnePanel: !showKGOnePanel, showChatBox: false, showEventListPanel: false });
     },
 
-    toggleListEventPanel: () => {
+    toggleEventListPanel: () => {
-      const { showListEventPanel } = get();
+      const { showEventListPanel } = get();
-      set({ showListEventPanel: !showListEventPanel, showChatBox: false, showKGOnePanel: false });
+      set({ showEventListPanel: !showEventListPanel, showChatBox: false, showKGOnePanel: false });
     },
 
     // Instrument selection panel actions
@@ -1612,64 +1612,64 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     closeInstrumentSelection: () => {
       set({ showInstrumentSelection: false });
     },
-    
+
     // Settings action implementations
     setShowSettings: (show: boolean) => {
       set({ showSettings: show });
     },
-    
+
     toggleSettings: () => {
       const { showSettings } = get();
       set({ showSettings: !showSettings });
     },
-    
+
     // Copy/paste actions
     pasteRegionsAtTrack: (trackId: string, position: number) => {
       // Use command pattern for region pasting with undo support
       const command = PasteRegionsCommand.fromClipboard(trackId, position);
-      
+
       if (!command) {
         console.log('No regions to paste');
         return;
       }
-      
+
       try {
         KGCore.instance().executeCommand(command);
-        
+
         // Update the store to trigger re-render
         const { tracks } = get();
         const updatedTracks = [...tracks];
         set({ tracks: updatedTracks });
-        
+
         console.log(`Executed PasteRegionsCommand: pasted regions to track ${trackId} using command pattern`);
       } catch (error) {
         console.error('Error pasting regions:', error);
       }
     },
-    
+
     pasteNotesToActiveRegion: (regionId: string, position: number) => {
       // Use command pattern for note pasting with undo support
       const command = PasteNotesCommand.fromClipboard(regionId, position);
-      
+
       if (!command) {
         console.log('No notes to paste');
         return;
       }
-      
+
       try {
         KGCore.instance().executeCommand(command);
-        
+
         // Update the store to trigger re-render
         const { tracks } = get();
         const updatedTracks = [...tracks];
         set({ tracks: updatedTracks });
-        
+
         console.log(`Executed PasteNotesCommand: pasted notes to region ${regionId} using command pattern`);
       } catch (error) {
         console.error('Error pasting notes:', error);
       }
     },
-    
+
     // Undo/redo actions
     undo: () => {
       const core = KGCore.instance();
@@ -1680,7 +1680,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         console.log('Undo completed');
       }
     },
-    
+
     redo: () => {
       const core = KGCore.instance();
       if (core.redo()) {
@@ -1690,7 +1690,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         console.log('Redo completed');
       }
     },
-    
+
     syncUndoRedoState: () => {
       const core = KGCore.instance();
       set({
@@ -1700,13 +1700,13 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         redoDescription: core.getRedoDescription()
       });
     },
-    
+
     // Centralized project state refresh method
     // Used by undo/redo and external operations (like XML tools) to sync UI with core model
     refreshProjectState: () => {
       const core = KGCore.instance();
       const project = core.getCurrentProject();
-      
+
       // Force new array reference to trigger React re-renders
       set({
         projectName: project.getName(),
@@ -1729,7 +1729,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
       actions.syncUndoRedoState();
       actions.syncSelectionFromCore();
     },
-    
+
     // Initialize store with configuration values
     initializeFromConfig: async () => {
       const configManager = ConfigManager.instance();