feat: Text generation suggestions via Gemini models

Backend: - New text_gen.py module with Gemini text generation client - suggest_prompts(): generates 3 prompt suggestions from user input - get_text_gen_config(): loads config from .env (model, API key, safety) - get_available_models(): returns list of Gemini text models - Safety settings: harassment, hate_speech, sexually_explicit, dangerous Configurable via TEXT_GEN_SAFETY_* env vars (default: BLOCK_ONLY_HIGH) - New endpoints: * POST /api/text-gen/suggest — generates 3 prompt suggestions * GET /api/text-gen/models — lists available text models * GET /api/text-gen/config — returns safe config (API key masked) * POST /api/text-gen/config — updates config in-memory - Default model: gemini-2.5-flash - Fallback API key: LYRIA_API_KEY if TEXT_GEN_API_KEY not set - System prompt: expert music producer persona for rich musical detail Frontend: - New SuggestionsModal component for displaying generated suggestions - Auto-fetches when opened - Shows loading spinner, error state, or suggestion list - Each suggestion clickable to populate the prompt field - Hover effect: 'Click to use this prompt →' - Generator component updated with 'Get Suggestions ✨' button - Appears next to prompt label in both Basic and Advanced modes - Disabled when no input present - Clicking suggestion populates the prompt/structured fields - SettingsModal expanded with Text Generation section (collapsible) - Same pattern as Image Generation: model, API key status, safety filters - Editable dropdowns with Save Changes button - Refactored to use shared useGenSettings hook for both sections Models Available: - gemini-2.5-flash (GA, default) — best price-to-performance - gemini-2.5-pro (GA) — highest quality reasoning - gemini-3.5-flash (Preview) — next-gen Flash - gemini-3.1-flash (Preview) — latest with thinking Architecture KB and Tasks KB updated.
2026-05-29 22:37:35 -04:00
1 parent 70beb89ad9
commit e687f7d457
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import StructuredPromptEditor, { PromptStructure } from './StructuredPromptEditor'
+import SuggestionsModal from './SuggestionsModal'

 interface ModelInfo {
  name: string
@@ -23,6 +24,7 @@ export default function Generator({ onGenerate }: Props) {
  const [models, setModels] = useState<Record<string, ModelInfo>>({})
  const [promptMode, setPromptMode] = useState<PromptMode>('basic')
  const [structuredPrompt, setStructuredPrompt] = useState<PromptStructure>({})
+  const [suggestionsOpen, setSuggestionsOpen] = useState(false)

  useEffect(() => {
    fetch('/api/models')
@@ -181,9 +183,17 @@ export default function Generator({ onGenerate }: Props) {
        {/* Basic Prompt */}
        {(promptMode === 'basic' || !isPro) && (
          <div>
-            <label className="block text-xs text-lyria-muted mb-1.5">
-              Prompt
-            </label>
+            <div className="flex items-center justify-between mb-1.5">
+              <label className="text-xs text-lyria-muted">Prompt</label>
+              <button
+                type="button"
+                onClick={() => setSuggestionsOpen(true)}
+                disabled={!prompt.trim()}
+                className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors disabled:opacity-40"
+              >
+                Get Suggestions ✨
+              </button>
+            </div>
            <textarea
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
@@ -196,9 +206,17 @@ export default function Generator({ onGenerate }: Props) {
        {/* Advanced Prompt */}
        {promptMode === 'advanced' && isPro && (
          <div>
-            <label className="block text-xs text-lyria-muted mb-1.5">
-              Structured Prompt
-            </label>
+            <div className="flex items-center justify-between mb-1.5">
+              <label className="text-xs text-lyria-muted">Structured Prompt</label>
+              <button
+                type="button"
+                onClick={() => setSuggestionsOpen(true)}
+                disabled={Object.values(structuredPrompt).every(v => !v?.trim())}
+                className="text-xs text-lyria-accent hover:text-lyria-accent/80 transition-colors disabled:opacity-40"
+              >
+                Get Suggestions ✨
+              </button>
+            </div>
            <StructuredPromptEditor
              value={structuredPrompt}
              onChange={setStructuredPrompt}
@@ -218,6 +236,20 @@ export default function Generator({ onGenerate }: Props) {
          {isLoading ? 'Generating...' : 'Generate'}
        </button>
      </form>
+
+      <SuggestionsModal
+        isOpen={suggestionsOpen}
+        onClose={() => setSuggestionsOpen(false)}
+        onSelect={(suggestion) => {
+          if (promptMode === 'basic' || !isPro) {
+            setPrompt(suggestion)
+          } else {
+            // For advanced mode, put it in the 'style' field or additional
+            setStructuredPrompt(prev => ({ ...prev, additional: suggestion }))
+          }
+        }}
+        userInput={promptMode === 'basic' || !isPro ? prompt : Object.values(structuredPrompt).filter(Boolean).join(' ')}
+      />
    </div>
  )
 }
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'

-interface ImageGenConfig {
+interface GenConfig {
  model: string
  has_api_key: boolean
  safety_harassment: string
@@ -9,7 +9,7 @@ interface ImageGenConfig {
  safety_dangerous: string
 }

-interface ImageGenModel {
+interface GenModel {
  id: string
  name: string
  description: string
@@ -32,49 +32,97 @@ const SAFETY_OPTIONS = [
  { value: 'BLOCK_LOW_AND_ABOVE', label: 'Block Most (Low+)' },
 ]

+function useGenSettings(apiPrefix: string) {
+  const [models, setModels] = useState<GenModel[]>([])
+  const [config, setConfig] = useState<GenConfig | null>(null)
+  const [edited, setEdited] = useState<Partial<GenConfig>>({})
+  const [expanded, setExpanded] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [saveMessage, setSaveMessage] = useState('')
+
+  const fetchModels = async () => {
+    try {
+      const res = await fetch(`/api/${apiPrefix}/models`)
+      if (res.ok) {
+        const data = await res.json()
+        setModels(data.models)
+      }
+    } catch (e) {
+      console.error(`Failed to fetch ${apiPrefix} models:`, e)
+    }
+  }
+
+  const fetchConfig = async () => {
+    try {
+      const res = await fetch(`/api/${apiPrefix}/config`)
+      if (res.ok) {
+        const data = await res.json()
+        setConfig(data)
+      }
+    } catch (e) {
+      console.error(`Failed to fetch ${apiPrefix} config:`, e)
+    }
+  }
+
+  const save = async () => {
+    if (!edited || Object.keys(edited).length === 0) return
+    setSaving(true)
+    try {
+      const res = await fetch(`/api/${apiPrefix}/config`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(edited),
+      })
+      if (res.ok) {
+        setSaveMessage('Settings saved!')
+        setConfig(prev => prev ? { ...prev, ...edited } : prev)
+        setEdited({})
+        setTimeout(() => setSaveMessage(''), 2000)
+      } else {
+        setSaveMessage('Failed to save')
+      }
+    } catch (e) {
+      setSaveMessage('Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const update = (key: string, value: string) => {
+    setEdited(prev => ({ ...prev, [key]: value }))
+    setSaveMessage('')
+  }
+
+  const getValue = (key: keyof GenConfig): string => {
+    const val = edited[key] ?? config?.[key]
+    return typeof val === 'string' ? val : 'BLOCK_ONLY_HIGH'
+  }
+
+  const hasChanges = Object.keys(edited).length > 0
+
+  return {
+    models, config, edited, expanded, setExpanded,
+    saving, saveMessage, fetchModels, fetchConfig,
+    save, update, getValue, hasChanges,
+  }
+}
+
 export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDeleteAll, clipCount }: Props) {
  const [confirmDelete, setConfirmDelete] = useState(false)
  const [loading, setLoading] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [imageGenModels, setImageGenModels] = useState<ImageGenModel[]>([])
-  const [imageGenConfig, setImageGenConfig] = useState<ImageGenConfig | null>(null)
-  const [editedConfig, setEditedConfig] = useState<Partial<ImageGenConfig>>({})
-  const [showImageGenSettings, setShowImageGenSettings] = useState(false)
-  const [saveMessage, setSaveMessage] = useState('')
+
+  const imageGen = useGenSettings('image-gen')
+  const textGen = useGenSettings('text-gen')

  useEffect(() => {
    if (isOpen) {
-      fetchImageGenModels()
-      fetchImageGenConfig()
-      setEditedConfig({})
-      setSaveMessage('')
+      imageGen.fetchModels()
+      imageGen.fetchConfig()
+      textGen.fetchModels()
+      textGen.fetchConfig()
    }
  }, [isOpen])

-  const fetchImageGenModels = async () => {
-    try {
-      const res = await fetch('/api/image-gen/models')
-      if (res.ok) {
-        const data = await res.json()
-        setImageGenModels(data.models)
-      }
-    } catch (e) {
-      console.error('Failed to fetch image gen models:', e)
-    }
-  }
-
-  const fetchImageGenConfig = async () => {
-    try {
-      const res = await fetch('/api/image-gen/config')
-      if (res.ok) {
-        const data = await res.json()
-        setImageGenConfig(data)
-      }
-    } catch (e) {
-      console.error('Failed to fetch image gen config:', e)
-    }
-  }
-
  if (!isOpen) return null

  const handleClearWaveforms = async () => {
@@ -100,41 +148,102 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
    }
  }

-  const handleSaveImageGenConfig = async () => {
-    if (!editedConfig || Object.keys(editedConfig).length === 0) return
-    setSaving(true)
-    try {
-      const res = await fetch('/api/image-gen/config', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(editedConfig),
-      })
-      if (res.ok) {
-        setSaveMessage('Settings saved!')
-        setImageGenConfig(prev => prev ? { ...prev, ...editedConfig } : prev)
-        setEditedConfig({})
-        setTimeout(() => setSaveMessage(''), 2000)
-      } else {
-        setSaveMessage('Failed to save')
-      }
-    } catch (e) {
-      setSaveMessage('Failed to save')
-    } finally {
-      setSaving(false)
-    }
-  }
+  const renderGenSection = (
+    title: string,
+    icon: React.ReactNode,
+    gen: ReturnType<typeof useGenSettings>
+  ) => (
+    <div className="border border-white/10 rounded-lg overflow-hidden">
+      <button
+        onClick={() => gen.setExpanded(!gen.expanded)}
+        className="w-full flex items-center justify-between px-4 py-3 bg-white/5 hover:bg-white/10 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          {icon}
+          <span className="text-sm font-medium text-white">{title}</span>
+        </div>
+        <svg
+          className={`w-4 h-4 text-lyria-muted transition-transform ${gen.expanded ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>

-  const updateEditedConfig = (key: string, value: string) => {
-    setEditedConfig(prev => ({ ...prev, [key]: value }))
-    setSaveMessage('')
-  }
+      {gen.expanded && (
+        <div className="p-4 space-y-4">
+          {/* Model Selection */}
+          <div>
+            <label className="block text-xs text-lyria-muted mb-1.5">Model</label>
+            <select
+              className="w-full bg-black/30 border border-white/10 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-lyria-accent"
+              value={gen.getValue('model')}
+              onChange={(e) => gen.update('model', e.target.value)}
+            >
+              {gen.models.map((model) => (
+                <option key={model.id} value={model.id}>
+                  {model.name} ({model.status})
+                </option>
+              ))}
+            </select>
+          </div>

-  const getConfigValue = (key: 'model' | 'safety_harassment' | 'safety_hate_speech' | 'safety_sexually_explicit' | 'safety_dangerous'): string => {
-    const val = editedConfig[key] ?? imageGenConfig?.[key]
-    return typeof val === 'string' ? val : 'BLOCK_ONLY_HIGH'
-  }
+          {/* API Key Status */}
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${gen.config?.has_api_key ? 'bg-green-400' : 'bg-red-400'}`} />
+            <span className="text-xs text-lyria-muted">
+              {gen.config?.has_api_key ? 'API key configured' : 'No API key — set in .env'}
+            </span>
+          </div>

-  const hasChanges = Object.keys(editedConfig).length > 0
+          {/* Safety Settings */}
+          <div className="space-y-3">
+            <p className="text-xs font-medium text-white">Safety Filters</p>
+            {[
+              { key: 'safety_harassment', label: 'Harassment' },
+              { key: 'safety_hate_speech', label: 'Hate Speech' },
+              { key: 'safety_sexually_explicit', label: 'Sexually Explicit' },
+              { key: 'safety_dangerous', label: 'Dangerous Content' },
+            ].map(({ key, label }) => (
+              <div key={key}>
+                <label className="block text-xs text-lyria-muted mb-1">{label}</label>
+                <select
+                  className="w-full bg-black/30 border border-white/10 rounded-md px-3 py-1.5 text-sm text-white focus:outline-none focus:border-lyria-accent"
+                  value={gen.getValue(key as keyof GenConfig)}
+                  onChange={(e) => gen.update(key, e.target.value)}
+                >
+                  {SAFETY_OPTIONS.map((opt) => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+              </div>
+            ))}
+          </div>
+
+          {/* Save Button */}
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              onClick={gen.save}
+              disabled={!gen.hasChanges || gen.saving}
+              className="px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 bg-lyria-accent text-black hover:bg-lyria-accent/90"
+            >
+              {gen.saving ? 'Saving...' : 'Save Changes'}
+            </button>
+            {gen.saveMessage && (
+              <span className={`text-xs ${gen.saveMessage.includes('Failed') ? 'text-red-400' : 'text-green-400'}`}>
+                {gen.saveMessage}
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-lyria-muted/60">
+            Changes apply immediately but reset on server restart. Set .env for persistence.
+          </p>
+        </div>
+      )}
+    </div>
+  )

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -162,99 +271,19 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel

        {/* Content */}
        <div className="px-6 py-5 space-y-6 overflow-y-auto">
-          {/* Image Generation Settings */}
-          <div className="border border-white/10 rounded-lg overflow-hidden">
-            <button
-              onClick={() => setShowImageGenSettings(!showImageGenSettings)}
-              className="w-full flex items-center justify-between px-4 py-3 bg-white/5 hover:bg-white/10 transition-colors"
-            >
-              <div className="flex items-center gap-2">
-                <svg className="w-4 h-4 text-lyria-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
-                <span className="text-sm font-medium text-white">Image Generation</span>
-              </div>
-              <svg
-                className={`w-4 h-4 text-lyria-muted transition-transform ${showImageGenSettings ? 'rotate-180' : ''}`}
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            </button>
+          {/* Image Generation */}
+          {renderGenSection('Image Generation', (
+            <svg className="w-4 h-4 text-lyria-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          ), imageGen)}

-            {showImageGenSettings && (
-              <div className="p-4 space-y-4">
-                {/* Model Selection */}
-                <div>
-                  <label className="block text-xs text-lyria-muted mb-1.5">Model</label>
-                  <select
-                    className="w-full bg-black/30 border border-white/10 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:border-lyria-accent"
-                    value={getConfigValue('model')}
-                    onChange={(e) => updateEditedConfig('model', e.target.value)}
-                  >
-                    {imageGenModels.map((model) => (
-                      <option key={model.id} value={model.id}>
-                        {model.name} ({model.status})
-                      </option>
-                    ))}
-                  </select>
-                </div>
-
-                {/* API Key Status */}
-                <div className="flex items-center gap-2">
-                  <div className={`w-2 h-2 rounded-full ${imageGenConfig?.has_api_key ? 'bg-green-400' : 'bg-red-400'}`} />
-                  <span className="text-xs text-lyria-muted">
-                    {imageGenConfig?.has_api_key ? 'API key configured' : 'No API key — set IMAGE_GEN_API_KEY in .env'}
-                  </span>
-                </div>
-
-                {/* Safety Settings */}
-                <div className="space-y-3">
-                  <p className="text-xs font-medium text-white">Safety Filters</p>
-                  {[
-                    { key: 'safety_harassment', label: 'Harassment' },
-                    { key: 'safety_hate_speech', label: 'Hate Speech' },
-                    { key: 'safety_sexually_explicit', label: 'Sexually Explicit' },
-                    { key: 'safety_dangerous', label: 'Dangerous Content' },
-                  ].map(({ key, label }) => (
-                    <div key={key}>
-                      <label className="block text-xs text-lyria-muted mb-1">{label}</label>
-                      <select
-                        className="w-full bg-black/30 border border-white/10 rounded-md px-3 py-1.5 text-sm text-white focus:outline-none focus:border-lyria-accent"
-                        value={getConfigValue(key as 'safety_harassment' | 'safety_hate_speech' | 'safety_sexually_explicit' | 'safety_dangerous')}
-                        onChange={(e) => updateEditedConfig(key, e.target.value)}
-                      >
-                        {SAFETY_OPTIONS.map((opt) => (
-                          <option key={opt.value} value={opt.value}>{opt.label}</option>
-                        ))}
-                      </select>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Save Button */}
-                <div className="flex items-center gap-3 pt-2">
-                  <button
-                    onClick={handleSaveImageGenConfig}
-                    disabled={!hasChanges || saving}
-                    className="px-4 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 bg-lyria-accent text-black hover:bg-lyria-accent/90"
-                  >
-                    {saving ? 'Saving...' : 'Save Changes'}
-                  </button>
-                  {saveMessage && (
-                    <span className={`text-xs ${saveMessage.includes('Failed') ? 'text-red-400' : 'text-green-400'}`}>
-                      {saveMessage}
-                    </span>
-                  )}
-                </div>
-                <p className="text-xs text-lyria-muted/60">
-                  Changes apply immediately but reset on server restart. Set .env for persistence.
-                </p>
-              </div>
-            )}
-          </div>
+          {/* Text Generation */}
+          {renderGenSection('Text Generation', (
+            <svg className="w-4 h-4 text-lyria-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+            </svg>
+          ), textGen)}

          {/* Danger Zone */}
          <div className="border border-red-500/30 rounded-lg overflow-hidden">
@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onSelect: (suggestion: string) => void
+  userInput: string
+}
+
+export default function SuggestionsModal({ isOpen, onClose, onSelect, userInput }: Props) {
+  const [suggestions, setSuggestions] = useState<string[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const fetchSuggestions = async () => {
+    if (!userInput.trim()) return
+    setLoading(true)
+    setError('')
+    try {
+      const res = await fetch('/api/text-gen/suggest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ input: userInput }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.detail || 'Failed to get suggestions')
+      }
+      const data = await res.json()
+      setSuggestions(data.suggestions || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to get suggestions')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Auto-fetch when opened
+  useEffect(() => {
+    if (isOpen && suggestions.length === 0 && !loading && !error) {
+      fetchSuggestions()
+    }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
+        onClick={onClose}
+      />
+
+      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 shrink-0">
+          <div>
+            <h2 className="text-lg font-semibold text-white">Prompt Suggestions</h2>
+            <p className="text-xs text-lyria-muted mt-0.5 truncate max-w-[280px]">{userInput}</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-lyria-muted hover:text-white transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-5 overflow-y-auto">
+          {loading && (
+            <div className="flex items-center justify-center py-8">
+              <svg className="animate-spin w-6 h-6 text-lyria-accent" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
+              <p className="text-sm text-red-400">{error}</p>
+              <button
+                onClick={fetchSuggestions}
+                className="mt-2 text-xs text-lyria-accent hover:text-lyria-accent/80"
+              >
+                Try again
+              </button>
+            </div>
+          )}
+
+          {!loading && !error && suggestions.length === 0 && (
+            <div className="text-center py-8">
+              <p className="text-sm text-lyria-muted">No suggestions yet. Click below to generate.</p>
+              <button
+                onClick={fetchSuggestions}
+                className="mt-3 px-4 py-2 text-sm bg-lyria-accent text-black rounded-md hover:bg-lyria-accent/90"
+              >
+                Get Suggestions
+              </button>
+            </div>
+          )}
+
+          <div className="space-y-3">
+            {suggestions.map((suggestion, i) => (
+              <button
+                key={i}
+                onClick={() => {
+                  onSelect(suggestion)
+                  onClose()
+                }}
+                className="w-full text-left p-4 bg-white/5 hover:bg-white/10 border border-white/5 hover:border-lyria-accent/30 rounded-lg transition-all group"
+              >
+                <div className="flex items-start gap-3">
+                  <span className="text-lyria-accent font-mono text-sm shrink-0">{i + 1}.</span>
+                  <p className="text-sm text-white/90 leading-relaxed">{suggestion}</p>
+                </div>
+                <div className="mt-2 text-xs text-lyria-accent opacity-0 group-hover:opacity-100 transition-opacity">
+                  Click to use this prompt →
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}