feat: integrate K.G.One music generation panel

- ConfigManager: add `general.kgone` config block (enabled toggle +
base URL); add `setKGOneManagedByServer()` / `isKGOneServerManaged()`
for managed deployments that supply a `kgone-server.txt` override
- App.tsx: probe for `kgone-server.txt` on startup (Content-Type guard
to avoid Vite SPA fallback false-positive)
- GeneralSettings: new K.G.One section with enable toggle + base URL
input; fields disabled when server-managed
- Toolbar: magic wand button (FaWandMagicSparkles) that toggles the
panel; disabled with reduced opacity when K.G.One is turned off;
mutually exclusive with the Chat panel
- projectStore: add `showKGOnePanel` state + `toggleKGOnePanel` action
- KGOnePanel (new): three-tab panel (Clip / Full Song / Separator)
- Clip: prompt + advanced params → POST /v1/clip/generate → poll
    /v1/clip/result → download WAV → AudioPlayer preview
- Full Song: caption + lyrics + advanced params → POST
    /v1/fullsong/generate → poll /v1/fullsong/result (live progress %
    from nested JSON string) → download MP3 → AudioPlayer preview
- Separator: reads selected audio region from OPFS via
    KGAudioFileStorage → POST /v1/separator/separate (multipart) →
    poll /v1/separator/result → parallel-download all stem files →
    multiple labeled AudioPlayer instances rendered vertically
- Shared: custom AudioPlayer (play/pause, clickable seek bar),
    spinner + hint text, error card, AbortController cleanup,
    DEBUG_MODE.KGONE-gated REQ/RES console logging

public/config.json

@@ -28,6 +28,10 @@
         }, 
         "soundfont": {
             "base_url": "https://cdn.jsdelivr.net/npm/soundfont-for-samplers/FluidR3_GM/"
+        },
+        "kgone": {
+            "enabled": false,
+            "base_url": "http://127.0.0.1:8000"
         }
     },
     "hotkeys": {

src/App.tsx

@@ -10,6 +10,7 @@ import InstrumentSelection from './components/InstrumentSelection';
 import ChatBox from './components/ChatBox';
 import { SettingsPanel } from './components/settings';
 import LoadingOverlay from './components/common/LoadingOverlay';
+import KGOnePanel from './components/KGOnePanel';
 import { useEffect as useEffectReact, useState, useRef } from 'react';
 import { KGToneBuffersPool } from './core/audio-interface/KGToneBuffersPool';
 import { KGOfflineRenderer } from './core/audio-interface/KGOfflineRenderer';
@@ -26,7 +27,7 @@ function App() {
   const {
     refreshStatus,
     loadProject, showChatBox, showSettings, setShowSettings, initializeFromConfig,
-    showInstrumentSelection
+    showInstrumentSelection, showKGOnePanel
   } = useProjectStore();
 
   // Track if app has been initialized to prevent multiple initializations
@@ -47,6 +48,21 @@ function App() {
       // Initialize ConfigManager first to load config.json and user settings
       await ConfigManager.instance().initialize();
 
+      // Check for kgone-server.txt (managed deployment override)
+      try {
+        const kgoneServerResponse = await fetch(`${import.meta.env.BASE_URL}kgone-server.txt`);
+        const contentType = kgoneServerResponse.headers.get('Content-Type') ?? '';
+        if (kgoneServerResponse.ok && contentType.includes('text/plain')) {
+          const url = (await kgoneServerResponse.text()).trim();
+          if (url) {
+            ConfigManager.instance().setKGOneManagedByServer(url);
+            console.log('K.G.One: server-managed config loaded from kgone-server.txt, base URL:', url);
+          }
+        }
+      } catch {
+        // File not present — user configures manually
+      }
+
       // Initialize store from config after ConfigManager is ready
       await initializeFromConfig();
 
@@ -134,6 +150,7 @@ function App() {
             <MainContent />
           </>
         )}
+        <KGOnePanel isVisible={showKGOnePanel && !showSettings} />
         <ChatBox isVisible={showChatBox && !showSettings} />
       </div>
 

src/components/KGOnePanel.css

@@ -0,0 +1,347 @@
+/* KGOnePanel — mirrors ChatBox layout and style */
+.kgone-panel {
+  display: flex;
+  flex-direction: column;
+  width: var(--chat-box-width);
+  background-color: #2d2d2d;
+  border-left: 1px solid #3a3a3a;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.kgone-panel.is-hidden {
+  display: none;
+}
+
+/* Header */
+.kgone-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #3a3a3a;
+  height: 40px;
+  border-bottom: 1px solid #4a4a4a;
+  padding: 0 15px;
+  flex-shrink: 0;
+}
+
+.kgone-panel-header h3 {
+  color: #e0e0e0;
+  font-size: 12px;
+  font-weight: bold;
+  margin: 0;
+}
+
+/* Tab switcher */
+.kgone-tabs {
+  display: flex;
+  background-color: #2d2d2d;
+  border-bottom: 1px solid #3a3a3a;
+  flex-shrink: 0;
+}
+
+.kgone-tab {
+  flex: 1;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: #999;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 8px 4px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.kgone-tab:hover {
+  color: #ccc;
+}
+
+.kgone-tab.active {
+  color: #e0e0e0;
+  border-bottom-color: #7a9cff;
+}
+
+/* Scrollable body */
+.kgone-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Field groups */
+.kgone-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.kgone-label {
+  color: #aaa;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.kgone-input,
+.kgone-textarea,
+.kgone-select {
+  background-color: #3a3a3a;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  color: #e0e0e0;
+  font-size: 12px;
+  padding: 6px 8px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.kgone-input:focus,
+.kgone-textarea:focus,
+.kgone-select:focus {
+  border-color: #5a6aaa;
+}
+
+.kgone-textarea {
+  resize: vertical;
+  min-height: 60px;
+  font-family: inherit;
+}
+
+.kgone-input::placeholder,
+.kgone-textarea::placeholder {
+  color: #666;
+}
+
+/* Hint text below textarea */
+.kgone-hint {
+  color: #666;
+  font-size: 10px;
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+/* Two-column row (e.g. note + scale) */
+.kgone-row {
+  display: flex;
+  gap: 8px;
+}
+
+.kgone-row .kgone-field {
+  flex: 1;
+}
+
+/* Advanced expander */
+.kgone-expander-toggle {
+  background: transparent;
+  border: none;
+  color: #888;
+  font-size: 11px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.kgone-expander-toggle:hover {
+  color: #bbb;
+}
+
+.kgone-expander-toggle .arrow {
+  font-size: 9px;
+  transition: transform 0.15s;
+}
+
+.kgone-expander-toggle .arrow.open {
+  transform: rotate(90deg);
+}
+
+.kgone-expander-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0 0 0;
+}
+
+/* Separator tab */
+.kgone-separator-hint {
+  color: #888;
+  font-size: 11px;
+  line-height: 1.5;
+  text-align: center;
+  padding: 20px 8px;
+  background-color: #252525;
+  border-radius: 6px;
+}
+
+.kgone-region-info {
+  background-color: #252525;
+  border: 1px solid #3a3a3a;
+  border-radius: 6px;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.kgone-region-info-label {
+  color: #777;
+  font-size: 10px;
+}
+
+.kgone-region-info-value {
+  color: #e0e0e0;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Generate / Separate button */
+.kgone-btn-generate {
+  background-color: #4a5fa0;
+  border: none;
+  border-radius: 4px;
+  color: #e0e0e0;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 12px;
+  cursor: pointer;
+  width: 100%;
+  margin-top: 6px;
+  transition: background-color 0.15s;
+}
+
+.kgone-btn-generate:hover:not(:disabled) {
+  background-color: #5a70b8;
+}
+
+.kgone-btn-generate:disabled {
+  background-color: #3a3a3a;
+  color: #666;
+  cursor: not-allowed;
+}
+
+/* ── Audio player ──────────────────────────────────────────────────────────── */
+.kgone-audio-player {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: #252525;
+  border: 1px solid #3a3a3a;
+  border-radius: 6px;
+  padding: 8px 10px;
+}
+
+.kgone-player-play-btn {
+  background: transparent;
+  border: none;
+  color: #e0e0e0;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kgone-player-play-btn:hover {
+  color: #7a9cff;
+}
+
+.kgone-player-progress-track {
+  flex: 1;
+  height: 4px;
+  background-color: #3a3a3a;
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+}
+
+.kgone-player-progress-track:hover {
+  height: 6px;
+  margin-top: -1px;
+}
+
+.kgone-player-progress-fill {
+  height: 100%;
+  background-color: #7a9cff;
+  border-radius: 2px;
+  pointer-events: none;
+  transition: width 0.1s linear;
+}
+
+.kgone-player-time {
+  color: #888;
+  font-size: 10px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── Generation state feedback ─────────────────────────────────────────────── */
+.kgone-gen-hint {
+  color: #888;
+  font-size: 10px;
+  text-align: center;
+  margin-top: -4px;
+}
+
+.kgone-error-msg {
+  color: #e07a7a;
+  font-size: 11px;
+  background-color: #2a1a1a;
+  border: 1px solid #5a2a2a;
+  border-radius: 4px;
+  padding: 6px 8px;
+  word-break: break-word;
+}
+
+/* Spinner on button */
+.kgone-spinner {
+  animation: kgone-spin 0.8s linear infinite;
+  margin-right: 6px;
+}
+
+@keyframes kgone-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* Stem players (Separator tab) */
+.kgone-stems {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.kgone-stem-player {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Checkbox row (instrumental toggle) */
+.kgone-checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.kgone-checkbox-row input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  accent-color: #7a9cff;
+  cursor: pointer;
+}
+
+.kgone-checkbox-row label {
+  color: #aaa;
+  font-size: 11px;
+  cursor: pointer;
+  user-select: none;
+}

src/components/Toolbar.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-icons/fa';
 import { KGProject, type KeySignature } from '../core/KGProject';
 import { plainToInstance } from 'class-transformer';
-import { FaPencil, FaCopy, FaPaste, FaTrash } from 'react-icons/fa6';
+import { FaPencil, FaCopy, FaPaste, FaTrash, FaWandMagicSparkles } from 'react-icons/fa6';
 import { KGMainContentState } from '../core/state/KGMainContentState';
 import { regionDeleteManager } from '../util/regionDeleteUtil';
 import { handleCopyOperation, handlePasteOperation } from '../util/copyPasteUtil';
@@ -28,6 +28,7 @@ import FileImportModal from './common/FileImportModal';
 import OpenProjectModal from './common/OpenProjectModal';
 import { clearChatHistoryAndUI } from '../util/chatUtil';
 import PianoIcon from './common/icons/PianoIcon';
+import { ConfigManager } from '../core/config/ConfigManager';
 
 const Toolbar: React.FC = () => {
   const {
@@ -40,7 +41,7 @@ const Toolbar: React.FC = () => {
     barWidthMultiplier, setBarWidthMultiplier,
     isLooping, toggleLoop,
     canUndo, canRedo, undoDescription, redoDescription, undo, redo,
-    toggleChatBox, toggleSettings, cleanupProjectState,
+    toggleChatBox, toggleSettings, toggleKGOnePanel, showKGOnePanel, cleanupProjectState,
     // Piano roll state/actions
     showPianoRoll, setShowPianoRoll, activeRegionId, setActiveRegionId,
     // Selection state
@@ -740,6 +741,16 @@ const Toolbar: React.FC = () => {
     setStatus("Settings toggled");
   };
 
+  // K.G.One panel toggle
+  const isKGOneEnabled = ConfigManager.instance().get('general.kgone.enabled') as boolean ?? false;
+
+  const handleKGOneClick = () => {
+    if (DEBUG_MODE.TOOLBAR) {
+      console.log("K.G.One button clicked");
+    }
+    toggleKGOnePanel();
+  };
+
   // Handle Piano button click: open piano roll if closed, targeting active or selected region
   const handlePianoButtonClick = () => {
     if (DEBUG_MODE.TOOLBAR) {
@@ -916,6 +927,15 @@ const Toolbar: React.FC = () => {
           </div>
         </div>
         <button title="Settings" onClick={handleSettingsClick}><FaCog /></button>
+        <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}><FaComments /></button>
       </div>
     </div>

src/components/settings/sections/GeneralSettings.tsx

@@ -18,6 +18,9 @@ const GeneralSettings: React.FC = () => {
   const [compatibleBaseUrl, setCompatibleBaseUrl] = useState<string>('');
   const [compatibleModel, setCompatibleModel] = useState<string>('');
   const [soundfontBaseUrl, setSoundfontBaseUrl] = useState<string>('');
+  const [kgoneEnabled, setKgoneEnabled] = useState<boolean>(false);
+  const [kgoneBaseUrl, setKgoneBaseUrl] = useState<string>('');
+  const [kgoneServerManaged, setKgoneServerManaged] = useState<boolean>(false);
 
   const configManager = ConfigManager.instance();
 
@@ -58,6 +61,9 @@ const GeneralSettings: React.FC = () => {
       setCompatibleBaseUrl((configManager.get('general.openai_compatible.base_url') as string) || '');
       setCompatibleModel((configManager.get('general.openai_compatible.model') as string) || '');
       setSoundfontBaseUrl((configManager.get('general.soundfont.base_url') as string) || '');
+      setKgoneEnabled((configManager.get('general.kgone.enabled') as boolean) ?? false);
+      setKgoneBaseUrl((configManager.get('general.kgone.base_url') as string) || '');
+      setKgoneServerManaged(configManager.isKGOneServerManaged());
     };
 
     loadConfig();
@@ -175,6 +181,20 @@ const GeneralSettings: React.FC = () => {
     debouncedSave('general.soundfont.base_url', value);
   };
 
+  const handleKgoneEnabledChange = async (value: boolean) => {
+    setKgoneEnabled(value);
+    try {
+      await configManager.set('general.kgone.enabled', value);
+    } catch (error) {
+      console.error('Failed to save K.G.One enabled:', error);
+    }
+  };
+
+  const handleKgoneBaseUrlChange = (value: string) => {
+    setKgoneBaseUrl(value);
+    debouncedSave('general.kgone.base_url', value);
+  };
+
   // NOTE: Gemini and Claude are not supported yet due to CORS issues.
   return (
     <div className="settings-section">
@@ -468,6 +488,48 @@ const GeneralSettings: React.FC = () => {
             </div>
           </div>
         </div>
+
+        <div className="settings-group">
+          <h4>K.G.One Settings</h4>
+
+          {kgoneServerManaged && (
+            <div className="settings-help" style={{ fontSize: '12px', color: '#888', marginTop: '4px', marginBottom: '8px' }}>
+              K.G.One configuration is managed by the server (kgone-server.txt). Settings are read-only.
+            </div>
+          )}
+
+          <div className="settings-item">
+            <label className="settings-label">
+              Enable K.G.One Integration
+            </label>
+            <select
+              className="settings-select"
+              value={kgoneEnabled ? 'true' : 'false'}
+              onChange={(e) => handleKgoneEnabledChange(e.target.value === 'true')}
+              disabled={kgoneServerManaged}
+            >
+              <option value="false">Disabled</option>
+              <option value="true">Enabled</option>
+            </select>
+          </div>
+
+          <div className="settings-item">
+            <label className="settings-label">
+              Server Base URL
+            </label>
+            <input
+              type="text"
+              className="settings-input"
+              placeholder="e.g. http://127.0.0.1:8000"
+              value={kgoneBaseUrl}
+              onChange={(e) => handleKgoneBaseUrlChange(e.target.value)}
+              disabled={kgoneServerManaged}
+            />
+            <div className="settings-help" style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
+              Base URL of a running K.G.One server. Used for full-song generation, clip generation, and stem separation.
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

src/constants/uiConstants.ts

@@ -14,6 +14,7 @@ export const DEBUG_MODE = {
   REGION_ITEM: true,
   PIANO_ROLL: true,
   MIDI_IMPORT: true,
+  KGONE: true,
 };
 
 // Toolbar related constants
@@ -39,9 +40,9 @@ export const PIANO_ROLL_CONSTANTS = {
 
   // notes
   NOTE_EDGE_OFFSET: 5,
-  
+
   // Minimum note length in beats (1/64 beat)
-  MIN_NOTE_LENGTH: 1/64,
+  MIN_NOTE_LENGTH: 1 / 64,
 
   // Dragging threshold for note selection
   DRAG_THRESHOLD: 5,

src/core/config/ConfigManager.ts

@@ -34,6 +34,10 @@ interface AppConfig {
     soundfont: {
       base_url: string;
     };
+    kgone: {
+      enabled: boolean;
+      base_url: string;
+    };
   };
   hotkeys: {
     main: {
@@ -100,6 +104,7 @@ export class ConfigManager {
   private config: AppConfig;
   private storage: KGConfigStorage;
   private isInitialized: boolean = false;
+  private kgoneServerManaged: boolean = false;
   private defaultConfig: AppConfig | null = null;
   private changeListeners: Set<(changedKeys: string[]) => void> = new Set();
 
@@ -199,6 +204,10 @@ export class ConfigManager {
           },
           soundfont: {
             base_url: 'https://cdn.jsdelivr.net/npm/soundfont-for-samplers/FluidR3_GM/'
+          },
+          kgone: {
+            enabled: false,
+            base_url: 'http://127.0.0.1:8000'
           }
         },
         hotkeys: {
@@ -548,6 +557,21 @@ export class ConfigManager {
     return copied;
   }
 
+  /**
+   * Called at startup when kgone-server.txt is found.
+   * Forces enabled=true and overrides base_url in-memory only (not persisted).
+   */
+  public setKGOneManagedByServer(url: string): void {
+    this.kgoneServerManaged = true;
+    this.setInObject(this.config as Record<string, unknown>, 'general.kgone.enabled', true);
+    this.setInObject(this.config as Record<string, unknown>, 'general.kgone.base_url', url);
+    this.notifyChangeListeners(['general.kgone.enabled', 'general.kgone.base_url']);
+  }
+
+  public isKGOneServerManaged(): boolean {
+    return this.kgoneServerManaged;
+  }
+
   /**
    * Get the default configuration
    */

src/stores/projectStore.ts

@@ -76,6 +76,9 @@ interface ProjectState {
   // ChatBox state
   showChatBox: boolean;
 
+  // K.G.One panel state
+  showKGOnePanel: boolean;
+
   // Instrument selection panel state
   showInstrumentSelection: boolean;
   // instrumentSelectionTrackId removed; panel now follows selectedTrackId
@@ -137,6 +140,9 @@ interface ProjectState {
   setShowChatBox: (show: boolean) => void;
   toggleChatBox: () => void;
 
+  // K.G.One panel actions
+  toggleKGOnePanel: () => void;
+
   // Instrument selection panel actions
   openInstrumentSelectionForTrack: () => void;
   toggleInstrumentSelectionForTrack: () => void;
@@ -278,6 +284,9 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     // Initial ChatBox state
     showChatBox: initialChatBoxState,
 
+    // Initial K.G.One panel state
+    showKGOnePanel: false,
+
     // Initial Instrument Selection panel state
     showInstrumentSelection: initialShowInstrumentSelection,
     
@@ -898,7 +907,12 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     
     toggleChatBox: () => {
       const { showChatBox } = get();
-      set({ showChatBox: !showChatBox });
+      set({ showChatBox: !showChatBox, showKGOnePanel: false });
+    },
+
+    toggleKGOnePanel: () => {
+      const { showKGOnePanel } = get();
+      set({ showKGOnePanel: !showKGOnePanel, showChatBox: false });
     },
 
     // Instrument selection panel actions