From a71de0c7899a4b3f47937ee2fa3fb6dfbd8fff52 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Mon, 20 Apr 2026 15:33:02 -0700
Subject: [PATCH] fix: minor updated color palette for some components; updated
 default region/track names for stem separation.

---
 src/components/ChatBox.css                    |  2 +-
 src/components/KGOnePanel.css                 | 23 +++++----
 src/components/KGOnePanel.tsx                 |  5 +-
 .../settings/sections/GeneralSettings.tsx     | 48 +++++++++----------
 src/components/track/RegionItem.tsx           |  2 +-
 .../commands/region/ImportStemsCommand.ts     |  3 +-
 src/styles/shared.css                         |  2 +-
 7 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/src/components/ChatBox.css b/src/components/ChatBox.css
index 185459b..4f61eec 100644
--- a/src/components/ChatBox.css
+++ b/src/components/ChatBox.css
@@ -149,7 +149,7 @@
 }
 
 .chatbox-input:focus {
-  border-color: #6a6a6a;
+  border-color: #5a9fd4;
   background-color: #4a4a4a;
 }
 
diff --git a/src/components/KGOnePanel.css b/src/components/KGOnePanel.css
index 1cbca22..d37a191 100644
--- a/src/components/KGOnePanel.css
+++ b/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); }
-  to   { transform: rotate(360deg); }
+  from {
+    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;
-}
+}
\ No newline at end of file
diff --git a/src/components/KGOnePanel.tsx b/src/components/KGOnePanel.tsx
index 927609e..59d5de6 100644
--- a/src/components/KGOnePanel.tsx
+++ b/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,
diff --git a/src/components/settings/sections/GeneralSettings.tsx b/src/components/settings/sections/GeneralSettings.tsx
index 664b9ba..a9a644c 100644
--- a/src/components/settings/sections/GeneralSettings.tsx
+++ b/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 
-              className="settings-select" 
+            <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 
-              type="password" 
+            <input
+              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 
-              type="password" 
+            <input
+              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 
-              type="text" 
+            <input
+              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 
-              type="password" 
+            <input
+              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 
-              type="text" 
+            <input
+              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 
-              type="text" 
+            <input
+              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>
diff --git a/src/components/track/RegionItem.tsx b/src/components/track/RegionItem.tsx
index 7930edb..d6f6934 100644
--- a/src/components/track/RegionItem.tsx
+++ b/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 && (
diff --git a/src/core/commands/region/ImportStemsCommand.ts b/src/core/commands/region/ImportStemsCommand.ts
index 070cbf5..090f280 100644
--- a/src/core/commands/region/ImportStemsCommand.ts
+++ b/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,
diff --git a/src/styles/shared.css b/src/styles/shared.css
index 30ee42a..00ce7a2 100644
--- a/src/styles/shared.css
+++ b/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) */