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

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>
   );