From 98cc6b031ca3c74d1e24f1d2b0f50264a5981352 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Sun, 31 May 2026 10:37:32 -0400
Subject: [PATCH] fix: Maestro note icon - always-visible SVG, consistent 14px
 size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Note icon now always present at 14x14px (matching text size).
Static state: note sits still on staff lines.
Loading state: same icon bounces. No size jump between states.
Removed ♪ text character in favor of the SVG icon.
---
 frontend/src/components/MaestroButton.tsx | 29 ++++++++++-------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/MaestroButton.tsx b/frontend/src/components/MaestroButton.tsx
index 51307f2..cff2454 100644
--- a/frontend/src/components/MaestroButton.tsx
+++ b/frontend/src/components/MaestroButton.tsx
@@ -19,13 +19,13 @@ interface Props {
   onStructuredResult?: (fields: PromptStructure, mode: 'generate' | 'complete') => void
 }
 
-function BouncingNote() {
+function NoteIcon({ bouncing }: { bouncing: boolean }) {
   return (
     <svg
-      width="18"
-      height="18"
+      width="14"
+      height="14"
       viewBox="0 0 18 18"
-      className="animate-note-bounce"
+      className={bouncing ? 'animate-note-bounce' : ''}
       aria-hidden="true"
     >
       {/* Staff lines */}
@@ -91,8 +91,8 @@ export default function MaestroButton({
 
   const mode = prompt.trim() ? 'complete' : 'generate'
   const label = mode === 'generate'
-    ? '♪ Maestro Mode'
-    : '♪ Keep Composing'
+    ? 'Maestro Mode'
+    : 'Keep Composing'
 
   return (
     <button
@@ -109,16 +109,13 @@ export default function MaestroButton({
         : "Let Maestro complete your prompt with musical details"
       }
     >
-      {isMaestroing ? (
-        <>
-          <BouncingNote />
-          <span className="truncate">
-            {mode === 'generate' ? 'Dreaming...' : 'Composing...'}
-          </span>
-        </>
-      ) : (
-        <span className="truncate">{label}</span>
-      )}
+      <NoteIcon bouncing={isMaestroing} />
+      <span className="truncate">
+        {isMaestroing
+          ? (mode === 'generate' ? 'Dreaming...' : 'Composing...')
+          : label
+        }
+      </span>
     </button>
   )
 }
\ No newline at end of file