feat(genius): refresh chat-style UI layout

Remove header block, add background glasses watermark at 3% opacity,
move composer to bottom, replace static prompt buttons with 29 shuffled
example prompts that cycle with slow fade transitions. Enter generates,
Shift+Enter inserts newline. Enlarge submit button and center vertically.

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

Author: pythoninthegrass

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

@@ -0,0 +1,210 @@
+/**
+ * Unit tests for the Genius Browser component.
+ *
+ * Verifies:
+ * - Animated prompt cycling (fade in/out through example prompts)
+ * - Shift+Enter keybinding (not Cmd+Enter)
+ * - Onboarding state transitions
+ * - Playlist generation flow
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock agent API
+const mockAgent = {
+  getOnboardingState: vi.fn(),
+  checkOllama: vi.fn(),
+  pullModel: vi.fn(),
+  setOnboardingComplete: vi.fn(),
+  generatePlaylist: vi.fn(),
+};
+
+vi.mock('../js/api/agent.js', () => ({ agent: mockAgent }));
+
+// Minimal Alpine mock
+const registeredComponents = {};
+const mockAlpine = {
+  data: vi.fn((name, factory) => {
+    registeredComponents[name] = factory;
+  }),
+};
+
+// Import component
+const { createGeniusBrowser } = await import('../js/components/genius-browser.js');
+
+function createInstance(overrides = {}) {
+  createGeniusBrowser(mockAlpine);
+  const factory = registeredComponents['geniusBrowser'];
+  const instance = factory();
+
+  // Provide Alpine reactive context stubs
+  instance.$store = { ui: { view: 'genius', toast: vi.fn() } };
+  instance.$watch = vi.fn();
+
+  Object.assign(instance, overrides);
+  return instance;
+}
+
+describe('Genius Browser', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('animated prompt cycling', () => {
+    it('initializes with example prompts list', () => {
+      const instance = createInstance();
+      expect(instance._promptExamples.length).toBeGreaterThanOrEqual(3);
+      expect(instance._promptExamples[0]).toBe('make me a chill playlist from my library');
+    });
+
+    it('starts cycling on init and becomes visible', () => {
+      const instance = createInstance();
+      mockAgent.getOnboardingState.mockResolvedValue({ completed: true });
+
+      instance.init();
+
+      expect(instance._animatedText).toBe(instance._promptExamples[0]);
+      expect(instance._animatedVisible).toBe(true);
+    });
+
+    it('fades out after hold period and advances to next prompt', () => {
+      const instance = createInstance();
+      instance._startPromptCycle();
+
+      expect(instance._animatedVisible).toBe(true);
+      expect(instance._animatedText).toBe(instance._promptExamples[0]);
+
+      // After 3.9s hold, fades out
+      vi.advanceTimersByTime(3900);
+      expect(instance._animatedVisible).toBe(false);
+
+      // After 1.3s fade-out, advances to next
+      vi.advanceTimersByTime(1300);
+      expect(instance._animatedText).toBe(instance._promptExamples[1]);
+      expect(instance._animatedVisible).toBe(true);
+    });
+
+    it('wraps around to first prompt after cycling through all', () => {
+      const instance = createInstance();
+      instance._startPromptCycle();
+
+      // Capture the shuffled order
+      const firstPrompt = instance._promptExamples[0];
+      const count = instance._promptExamples.length;
+      // Advance through all prompts (3.9s hold + 1.3s fade each)
+      for (let i = 0; i < count; i++) {
+        vi.advanceTimersByTime(5200);
+      }
+
+      expect(instance._animatedText).toBe(firstPrompt);
+    });
+
+    it('shuffles prompt order on start', () => {
+      // Run multiple starts and check that at least one produces a different first element
+      const results = new Set();
+      for (let i = 0; i < 20; i++) {
+        const inst = createInstance();
+        inst._startPromptCycle();
+        results.add(inst._promptExamples[0]);
+        inst._stopPromptCycle();
+      }
+      expect(results.size).toBeGreaterThan(1);
+    });
+
+    it('stops cycling on destroy', () => {
+      const instance = createInstance();
+      instance._startPromptCycle();
+      instance.destroy();
+      expect(instance._animateTimer).toBeNull();
+    });
+  });
+
+  describe('keyboard shortcut', () => {
+    it('generate() requires non-empty prompt', async () => {
+      const instance = createInstance();
+      instance.onboardingComplete = true;
+      instance.prompt = '';
+
+      await instance.generate();
+
+      expect(mockAgent.generatePlaylist).not.toHaveBeenCalled();
+    });
+
+    it('generate() calls agent with trimmed prompt', async () => {
+      const instance = createInstance();
+      instance.onboardingComplete = true;
+      instance.prompt = '  chill vibes  ';
+      mockAgent.generatePlaylist.mockResolvedValue({
+        status: 'success',
+        playlist_name: 'Chill Vibes',
+        playlist_id: 1,
+        track_count: 10,
+      });
+
+      // Stub dispatchEvent for playlist-updated event
+      globalThis.window = { dispatchEvent: vi.fn() };
+      globalThis.CustomEvent = class CustomEvent {
+        constructor(type, opts) {
+          this.type = type;
+          this.detail = opts?.detail;
+        }
+      };
+
+      await instance.generate();
+
+      expect(mockAgent.generatePlaylist).toHaveBeenCalledWith('chill vibes');
+      expect(instance.result.status).toBe('success');
+      expect(instance.history).toHaveLength(1);
+      expect(instance.prompt).toBe('');
+    });
+  });
+
+  describe('onboarding', () => {
+    it('skips onboarding when already completed', async () => {
+      const instance = createInstance();
+      mockAgent.getOnboardingState.mockResolvedValue({ completed: true });
+
+      await instance._checkOnboarding();
+
+      expect(instance.onboardingComplete).toBe(true);
+      expect(instance.onboardingStep).toBe('ready');
+    });
+
+    it('shows install-ollama when not connected', async () => {
+      const instance = createInstance();
+      mockAgent.getOnboardingState.mockResolvedValue({ completed: false });
+      mockAgent.checkOllama.mockResolvedValue({ connected: false, models: [] });
+
+      await instance._checkOnboarding();
+
+      expect(instance.onboardingStep).toBe('install-ollama');
+    });
+
+    it('shows download-model when connected but model missing', async () => {
+      const instance = createInstance();
+      mockAgent.getOnboardingState.mockResolvedValue({ completed: false });
+      mockAgent.checkOllama.mockResolvedValue({ connected: true, models: [] });
+
+      await instance._checkOnboarding();
+
+      expect(instance.onboardingStep).toBe('download-model');
+    });
+
+    it('completes onboarding when model is present', async () => {
+      const instance = createInstance();
+      mockAgent.getOnboardingState.mockResolvedValue({ completed: false });
+      mockAgent.checkOllama.mockResolvedValue({ connected: true, models: ['qwen3.5:9b'] });
+      mockAgent.setOnboardingComplete.mockResolvedValue();
+
+      await instance._checkOnboarding();
+
+      expect(instance.onboardingComplete).toBe(true);
+      expect(instance.onboardingStep).toBe('ready');
+    });
+  });
+});

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

@@ -27,6 +27,43 @@ export function createGeniusBrowser(Alpine) {
     result: null, // { status, playlist_id, playlist_name, track_count, message }
     history: [], // past generations for this session
 
+    // Animated prompt cycling
+    _animatedText: '',
+    _animatedVisible: false,
+    _animateTimer: null,
+    _promptExamples: [
+      'make me a chill playlist from my library',
+      'something similar to what I listened to recently',
+      "find me post-punk artists I don't usually listen to",
+      'upbeat tracks for a morning run',
+      'rainy day songs with acoustic guitars',
+      "deep cuts I haven't played in months",
+      'a late-night driving mix',
+      'something moody and atmospheric',
+      'high energy tracks for cleaning the house',
+      'jazz and soul from the 60s and 70s',
+      'songs that build slowly then explode',
+      'artists similar to Radiohead in my library',
+      'a Sunday morning coffee playlist',
+      'tracks with heavy bass lines',
+      'my most played songs from this year',
+      'something dreamy and shoegaze-y',
+      'a workout mix that keeps escalating',
+      'underrated albums I barely touched',
+      'folksy singer-songwriter vibes',
+      "electronic music that isn't too intense",
+      'songs to cook dinner to',
+      'a road trip playlist from my collection',
+      'melancholy but beautiful tracks',
+      'hip-hop and R&B from the 90s',
+      'everything by female vocalists',
+      'instrumental tracks only',
+      'songs under three minutes',
+      'a party mix from what I already have',
+      'blues and classic rock deep cuts',
+    ],
+    _promptIndex: 0,
+
     // Event cleanup
     _unlisten: null,
 
@@ -41,19 +78,61 @@ export function createGeniusBrowser(Alpine) {
       if (this.$store.ui.view === 'genius') {
         this._checkOnboarding();
       }
+
+      this._startPromptCycle();
     },
 
     destroy() {
       if (this._unlisten) {
         this._unlisten();
         this._unlisten = null;
       }
+      this._stopPromptCycle();
     },
 
     get ui() {
       return this.$store.ui;
     },
 
+    // --- Animated prompt cycling ---
+
+    _startPromptCycle() {
+      // Fisher-Yates shuffle for a fresh order each session
+      for (let i = this._promptExamples.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [this._promptExamples[i], this._promptExamples[j]] = [
+          this._promptExamples[j],
+          this._promptExamples[i],
+        ];
+      }
+      this._promptIndex = 0;
+      this._showNextPrompt();
+    },
+
+    _stopPromptCycle() {
+      if (this._animateTimer) {
+        clearTimeout(this._animateTimer);
+        this._animateTimer = null;
+      }
+    },
+
+    _showNextPrompt() {
+      // Fade in
+      this._animatedText = this._promptExamples[this._promptIndex];
+      this._animatedVisible = true;
+
+      // Hold visible for 3.9s, then fade out
+      this._animateTimer = setTimeout(() => {
+        this._animatedVisible = false;
+
+        // After fade-out completes (1.3s), advance and show next
+        this._animateTimer = setTimeout(() => {
+          this._promptIndex = (this._promptIndex + 1) % this._promptExamples.length;
+          this._showNextPrompt();
+        }, 1300);
+      }, 3900);
+    },
+
     // --- Onboarding ---
 
     async _checkOnboarding() {