fix: minor updated color palette for some components; updated default region/track names for stem separation.

src/components/ChatBox.css

@@ -149,7 +149,7 @@
 }
 
 .chatbox-input:focus {
-  border-color: #6a6a6a;
+  border-color: #5a9fd4;
   background-color: #4a4a4a;
 }
 

src/components/KGOnePanel.css

@@ -59,7 +59,7 @@
 
 .kgone-tab.active {
   color: #e0e0e0;
-  border-bottom-color: #7a9cff;
+  border-bottom-color: #5a9fd4;
 }
 
 /* Scrollable body */
@@ -102,7 +102,7 @@
 .kgone-input:focus,
 .kgone-textarea:focus,
 .kgone-select:focus {
-  border-color: #5a6aaa;
+  border-color: #5a9fd4;
 }
 
 .kgone-textarea {
@@ -277,7 +277,7 @@
 }
 
 .kgone-player-play-btn:hover {
-  color: #7a9cff;
+  color: #5a9fd4;
 }
 
 .kgone-player-progress-track {
@@ -296,7 +296,7 @@
 
 .kgone-player-progress-fill {
   height: 100%;
-  background-color: #7a9cff;
+  background-color: #5a9fd4;
   border-radius: 2px;
   pointer-events: none;
   transition: width 0.1s linear;
@@ -336,7 +336,7 @@
 }
 
 .kgone-player-download-btn:hover {
-  color: #7a9cff;
+  color: #5a9fd4;
 }
 
 /* ── Generation state feedback ─────────────────────────────────────────────── */
@@ -364,8 +364,13 @@
 }
 
 @keyframes kgone-spin {
-  from { transform: rotate(0deg); }
+  from {
-  to   { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* Stem players (Separator tab) */
@@ -390,7 +395,7 @@
 .kgone-checkbox-row input[type="checkbox"] {
   width: 14px;
   height: 14px;
-  accent-color: #7a9cff;
+  accent-color: #5a9fd4;
   cursor: pointer;
 }
 
@@ -399,4 +404,4 @@
   font-size: 11px;
   cursor: pointer;
   user-select: none;
-}
+}

src/components/KGOnePanel.tsx

@@ -826,6 +826,7 @@ const SeparatorTab: React.FC = () => {
   const taskIdRef = useRef<string>('');
   const originalRegionRef = useRef<{
     regionName: string;
+    trackName: string;
     startFromBeat: number;
     trackIndex: number;
   } | null>(null);
@@ -866,6 +867,7 @@ const SeparatorTab: React.FC = () => {
     // Capture snapshot before anything changes — selection may shift during generation
     originalRegionRef.current = {
       regionName: selectedAudioRegion.region.getName(),
+      trackName: selectedAudioRegion.trackName,
       startFromBeat: selectedAudioRegion.region.getStartFromBeat(),
       trackIndex: selectedAudioRegion.trackIndex,
     };
@@ -1043,7 +1045,8 @@ const SeparatorTab: React.FC = () => {
           await KGAudioFileStorage.storeAudioFile(projectName, fileId, audioFile);
 
           return {
-            trackName: `${snap.regionName} (${stem.name})`,
+            trackName: `${snap.trackName} - ${stem.name}`,
+            regionName: `${snap.regionName} - ${stem.name}`,
             audioFileId: fileId,
             audioFileName: fileName,
             audioDurationSeconds: toneBuffer.duration,

src/components/settings/sections/GeneralSettings.tsx

@@ -203,17 +203,17 @@ const GeneralSettings: React.FC = () => {
       <div className="settings-section-header">
         <h3>General</h3>
       </div>
-      
+
       <div className="settings-section-content">
         <div className="settings-group">
           <h4>LLM Provider</h4>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               LLM Provider
             </label>
-            <select 
+            <select
-              className="settings-select" 
+              className="settings-select"
               value={llmProvider}
               onChange={(e) => handleLlmProviderChange(e.target.value)}
             >
@@ -245,13 +245,13 @@ const GeneralSettings: React.FC = () => {
 
         <div className="settings-group">
           <h4>OpenAI</h4>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Key
             </label>
-            <input 
+            <input
-              type="password" 
+              type="password"
               className="settings-input"
               placeholder="Enter your OpenAI API key"
               value={openaiKey}
@@ -265,7 +265,7 @@ const GeneralSettings: React.FC = () => {
                   : 'For security, keys are not persisted on non-local hosts and are kept in-memory for this session.'}
             </div>
           </div>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Model
@@ -365,13 +365,13 @@ const GeneralSettings: React.FC = () => {
 
         <div className="settings-group">
           <h4>Anthropic Claude (via OpenRouter)</h4>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Key
             </label>
-            <input 
+            <input
-              type="password" 
+              type="password"
               className="settings-input"
               placeholder="Enter your Claude API key"
               value={claudeOpenRouterKey}
@@ -390,8 +390,8 @@ const GeneralSettings: React.FC = () => {
             <label className="settings-label">
               Base URL
             </label>
-            <input 
+            <input
-              type="text" 
+              type="text"
               className="settings-input"
               placeholder="e.g. https://openrouter.ai/api/v1"
               value={claudeOpenRouterBaseUrl}
@@ -401,7 +401,7 @@ const GeneralSettings: React.FC = () => {
               This is the base URL for the OpenRouter API. Please do not change this unless you know what you are doing.
             </div>
           </div>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Model
@@ -423,13 +423,13 @@ const GeneralSettings: React.FC = () => {
 
         <div className="settings-group">
           <h4>OpenAI Compatible Server</h4>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Key
             </label>
-            <input 
+            <input
-              type="password" 
+              type="password"
               className="settings-input"
               placeholder="Enter your API key"
               value={compatibleKey}
@@ -443,26 +443,26 @@ const GeneralSettings: React.FC = () => {
                   : 'For security, keys are not persisted on non-local hosts and are kept in-memory for this session.'}
             </div>
           </div>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Base URL
             </label>
-            <input 
+            <input
-              type="text" 
+              type="text"
               className="settings-input"
               placeholder="e.g. https://openrouter.ai/api/v1"
               value={compatibleBaseUrl}
               onChange={(e) => handleCompatibleBaseUrlChange(e.target.value)}
             />
           </div>
-          
+
           <div className="settings-item">
             <label className="settings-label">
               Model
             </label>
-            <input 
+            <input
-              type="text" 
+              type="text"
               className="settings-input"
               placeholder="e.g. qwen3:30b"
               value={compatibleModel}
@@ -500,7 +500,7 @@ const GeneralSettings: React.FC = () => {
                   e.preventDefault();
                   handleSoundfontBaseUrlChange('https://cdn.jsdelivr.net/npm/soundfont-for-samplers/FluidR3_GM/');
                 }}
-                style={{ color: '#646cff', textDecoration: 'underline', cursor: 'pointer' }}
+                style={{ color: '#5a9fd4', textDecoration: 'underline', cursor: 'pointer' }}
               >
                 Restore default
               </a>

src/components/track/RegionItem.tsx

@@ -548,7 +548,7 @@ const RegionItem: React.FC<RegionItemProps> = ({
       data-is-dragging={isDragging}
     >
       <div className="region-header">
-        {audioRegion ? audioRegion.getAudioFileName() : name}
+        {name}
       </div>
       <div className={`region-content${audioRegion ? ' audio-region-content' : ''}`} ref={regionContentRef}>
         {!audioRegion && (

src/core/commands/region/ImportStemsCommand.ts

@@ -12,6 +12,7 @@ import { KGAudioInterface } from '../../audio-interface/KGAudioInterface';
  */
 export interface StemImportEntry {
   trackName: string;
+  regionName: string;
   audioFileId: string;
   audioFileName: string;
   audioDurationSeconds: number;
@@ -128,7 +129,7 @@ export class ImportStemsCommand extends KGCommand {
         regionId,
         trackId.toString(),
         track.getTrackIndex(),
-        stem.audioFileName,
+        stem.regionName,
         this.insertBeat,
         durationInBeats,
         stem.audioFileId,

src/styles/shared.css

@@ -27,7 +27,7 @@
   align-items: center;
   justify-content: center;
   z-index: 1005;
-  margin-left: -50px;
+  margin-left: -120px;
 }
 
 /* Tool buttons (used by Toolbar and PianoRollToolbar) */