feat(genius): Enter to generate, auto-dismiss banner, centered spinner

Switch keyboard shortcut to Enter for generation, Shift+Enter for
new line. Clear prompt text immediately on generate and show a single
large centered spinner instead of two small ones. Auto-dismiss
success banner after 5 seconds while keeping history entries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: pythoninthegrass

app/frontend/__tests__/genius-browser.test.js

@@ -162,6 +162,67 @@ describe('Genius Browser', () => {
       expect(instance.history).toHaveLength(1);
       expect(instance.prompt).toBe('');
     });
+
+    it('clears prompt immediately when generation starts', async () => {
+      const instance = createInstance();
+      instance.onboardingComplete = true;
+      instance.prompt = 'test prompt';
+
+      // Use a deferred promise so we can check state mid-generation
+      let resolve;
+      mockAgent.generatePlaylist.mockReturnValue(
+        new Promise((r) => {
+          resolve = r;
+        }),
+      );
+
+      const genPromise = instance.generate();
+
+      // Prompt should be cleared while still generating
+      expect(instance.prompt).toBe('');
+      expect(instance.generating).toBe(true);
+
+      resolve({ status: 'success', playlist_name: 'Test', playlist_id: 1, track_count: 5 });
+      globalThis.window = { dispatchEvent: vi.fn() };
+      globalThis.CustomEvent = class CustomEvent {
+        constructor(type, opts) {
+          this.type = type;
+          this.detail = opts?.detail;
+        }
+      };
+      await genPromise;
+    });
+
+    it('auto-dismisses success result after 5 seconds', async () => {
+      const instance = createInstance();
+      instance.onboardingComplete = true;
+      instance.prompt = 'test prompt';
+      mockAgent.generatePlaylist.mockResolvedValue({
+        status: 'success',
+        playlist_name: 'Test',
+        playlist_id: 1,
+        track_count: 5,
+      });
+
+      globalThis.window = { dispatchEvent: vi.fn() };
+      globalThis.CustomEvent = class CustomEvent {
+        constructor(type, opts) {
+          this.type = type;
+          this.detail = opts?.detail;
+        }
+      };
+
+      await instance.generate();
+
+      expect(instance.result).not.toBeNull();
+      expect(instance.result.status).toBe('success');
+
+      // After 5 seconds, result should auto-dismiss
+      vi.advanceTimersByTime(5000);
+      expect(instance.result).toBeNull();
+      // But history entry should remain
+      expect(instance.history).toHaveLength(1);
+    });
   });
 
   describe('onboarding', () => {

app/frontend/js/components/genius-browser.js

@@ -25,6 +25,7 @@ export function createGeniusBrowser(Alpine) {
     prompt: '',
     generating: false,
     result: null, // { status, playlist_id, playlist_name, track_count, message }
+    _resultTimeout: null,
     history: [], // past generations for this session
 
     // Animated prompt cycling
@@ -87,6 +88,10 @@ export function createGeniusBrowser(Alpine) {
         this._unlisten();
         this._unlisten = null;
       }
+      if (this._resultTimeout) {
+        clearTimeout(this._resultTimeout);
+        this._resultTimeout = null;
+      }
       this._stopPromptCycle();
     },
 
@@ -241,6 +246,11 @@ export function createGeniusBrowser(Alpine) {
 
       this.generating = true;
       this.result = null;
+      if (this._resultTimeout) {
+        clearTimeout(this._resultTimeout);
+        this._resultTimeout = null;
+      }
+      this.prompt = '';
 
       try {
         const response = await agent.generatePlaylist(trimmed);
@@ -253,13 +263,19 @@ export function createGeniusBrowser(Alpine) {
             playlist_id: response.playlist_id,
             track_count: response.track_count,
           });
-          this.prompt = '';
           // Notify sidebar to refresh playlists
           window.dispatchEvent(new CustomEvent('mt:playlists-updated'));
           this.ui.toast(
             `Created "${response.playlist_name}" with ${response.track_count} tracks`,
             'success',
           );
+          // Auto-dismiss success banner after 5 seconds
+          this._resultTimeout = setTimeout(() => {
+            if (this.result?.status === 'success') {
+              this.result = null;
+            }
+            this._resultTimeout = null;
+          }, 5000);
         } else if (response.status === 'no_ollama') {
           this.onboardingComplete = false;
           this.onboardingStep = 'install-ollama';

app/frontend/views/genius.html

@@ -198,18 +198,17 @@ <h3 class="text-sm font-semibold mb-1">Download AI Model</h3>
             </div>
           </template>
 
-          <!-- Generating indicator -->
-          <template x-if="generating">
-            <div class="px-4 pt-4 pb-3">
-              <div class="flex items-center gap-2 text-xs text-foreground/50">
-                <div
-                  class="w-3.5 h-3.5 border-2 border-primary/50 border-t-transparent rounded-full animate-spin"
-                >
-                </div>
-                <span>Searching your library and generating playlist...</span>
-              </div>
+          <!-- Generating spinner -->
+          <div
+            x-show="generating"
+            class="flex flex-col items-center justify-center h-full gap-4"
+          >
+            <div
+              class="w-14 h-14 border-[3px] border-foreground border-t-transparent rounded-full animate-spin"
+            >
             </div>
-          </template>
+            <p class="text-sm text-foreground/40">Generating playlist...</p>
+          </div>
 
           <!-- History -->
           <div class="px-4 pb-4" x-show="history.length > 0">
@@ -248,7 +247,7 @@ <h3 class="text-sm font-semibold mb-1">Download AI Model</h3>
           <div class="relative">
             <textarea
               x-model="prompt"
-              @keydown.shift.enter.prevent="generate()"
+              @keydown.enter.prevent="if (!$event.shiftKey) generate(); else { $event.target.setRangeText('\n', $event.target.selectionStart, $event.target.selectionEnd, 'end') }"
               placeholder="Describe a playlist..."
               class="w-full text-sm bg-muted/50 border border-border rounded-lg px-3 py-2.5 pr-14 resize-none focus:outline-none focus:ring-1 focus:ring-primary/50 focus:border-primary/50 placeholder:text-foreground/30"
               rows="2"
@@ -260,30 +259,22 @@ <h3 class="text-sm font-semibold mb-1">Download AI Model</h3>
               :disabled="!prompt.trim() || generating"
               class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg transition-colors"
               :class="prompt.trim() && !generating ? 'text-primary hover:bg-primary/10' : 'text-foreground/20 cursor-not-allowed'"
-              title="Generate (Shift+Enter)"
+              title="Generate (Enter)"
               data-testid="genius-generate"
             >
-              <template x-if="!generating">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M13 7l5 5m0 0l-5 5m5-5H6"
-                  >
-                  </path>
-                </svg>
-              </template>
-              <template x-if="generating">
-                <div
-                  class="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin"
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
                 >
-                </div>
-              </template>
+                </path>
+              </svg>
             </button>
           </div>
           <p class="text-[10px] text-foreground/30 mt-1.5 px-1">
-            Press Shift+Enter to generate, Enter for new line
+            Press Enter to generate, Shift+Enter for new line
           </p>
         </div>
       </div>

docs/genius.md

@@ -83,6 +83,6 @@ The Genius view uses a chat-first layout:
 - **Background**: Large transparent glasses graphic centered and rotated ~45 degrees, low opacity so it doesn't obscure controls
 - **Empty state**: Animated prompt examples cycle with slow fade transitions ("make me a chill playlist from my library", etc.)
 - **Composer**: Positioned at the bottom of the view with a text area and generate button
-- **Keyboard shortcut**: Shift+Enter triggers generation, Enter inserts a new line
+- **Keyboard shortcut**: Enter triggers generation, Shift+Enter inserts a new line
 - **History**: Recent generations listed above the composer when present
 - **Onboarding**: Three-step wizard (check Ollama -> download model -> ready) shown before the main interface