feat: Settings modal with danger zone admin operations

Backend:
- POST /api/admin/clear-waveforms — deletes all cached waveform SVGs
- POST /api/admin/delete-all-clips — nuclear option: deletes all clips,
  MP3s, artwork, and waveforms. Returns deleted count.
- database.py: delete_all_clips() for bulk DB wipe
- Clip deletion cascade-removes waveform SVGs

Frontend:
- SettingsModal.tsx: center-stage modal with backdrop blur (bg-black/60
  backdrop-blur-sm). Danger zone with red-styled border and header.
- Two-step confirmation for Delete All (click once to arm, click again
  to confirm). Shows clip count dynamically.
- Gear icon trigger in header bar
- App.tsx: handleClearWaveforms + handleDeleteAll handlers

Docs:
- Architecture KB updated with album art, waveform, settings modal sections
- Tasks KB updated with T-021 (waveform) and TASK-001 (album art) marked done
- T-026 (settings modal) added to backlog

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import Generator from './components/Generator'
 import Gallery from './components/Gallery'
 import Player from './components/Player'
 import DetailPanel from './components/DetailPanel'
+import SettingsModal from './components/SettingsModal'
 
 interface Clip {
   id: string
@@ -22,6 +23,7 @@ function App() {
   const [currentClip, setCurrentClip] = useState<Clip | null>(null)
   const [isPlaying, setIsPlaying] = useState(false)
   const [selectedClip, setSelectedClip] = useState<Clip | null>(null)
+  const [settingsOpen, setSettingsOpen] = useState(false)
 
   const fetchClips = async () => {
     try {
@@ -117,15 +119,48 @@ function App() {
     }
   }
 
+  const handleClearWaveforms = async () => {
+    try {
+      await fetch('/api/admin/clear-waveforms', { method: 'POST' })
+    } catch (err) {
+      console.error('Failed to clear waveforms:', err)
+    }
+  }
+
+  const handleDeleteAll = async () => {
+    try {
+      await fetch('/api/admin/delete-all-clips', { method: 'POST' })
+      setClips([])
+      setCurrentClip(null)
+      setIsPlaying(false)
+      setSelectedClip(null)
+    } catch (err) {
+      console.error('Failed to delete all clips:', err)
+    }
+  }
+
   return (
     <div className="min-h-screen bg-lyria-dark">
       <header className="border-b border-white/10 px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded bg-lyria-accent flex items-center justify-center text-white font-bold text-sm">
-            L
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded bg-lyria-accent flex items-center justify-center text-white font-bold text-sm">
+              L
+            </div>
+            <h1 className="text-xl font-bold text-white">Lyria Studio</h1>
+            <span className="text-xs text-lyria-muted bg-white/5 px-2 py-0.5 rounded">v0.1</span>
           </div>
-          <h1 className="text-xl font-bold text-white">Lyria Studio</h1>
-          <span className="text-xs text-lyria-muted bg-white/5 px-2 py-0.5 rounded">v0.1</span>
+          <button
+            onClick={() => setSettingsOpen(true)}
+            className="text-lyria-muted hover:text-white transition-colors p-1 rounded hover:bg-white/5"
+            title="Settings"
+            aria-label="Open settings"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </button>
         </div>
       </header>
 
@@ -168,6 +203,14 @@ function App() {
           onRemoveArtwork={handleRemoveArtwork}
         />
       )}
+
+      <SettingsModal
+        isOpen={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+        onClearWaveforms={handleClearWaveforms}
+        onDeleteAll={handleDeleteAll}
+        clipCount={clips.length}
+      />
     </div>
   )
 }