Add cancel, history, revert, and quality-of-life features

UX

- Add elapsed-time counter and Cancel button to in-flight generations,
  wired through AbortController so partial responses are discarded
  cleanly. The cancel action is available from both the input panel
  and the results header.
- Add a Recent generations panel below the input. The last 6 successful
  generations are saved to localStorage; one click reloads both the
  input fields and the generated assets.
- Add a Revert button to every editable card. It appears the moment
  the current value diverges from the last generated value and restores
  the field with a single click.
- Add an Empty state to the right panel with a friendly hint pointing
  at the Generate button and the Settings page.
- Add a 'Try an example' button that fills the input with a random
  starter idea (idea + mood + vocals).
- Add Cmd/Ctrl+Enter as a keyboard shortcut to generate.
- Add a Footer with project info and a privacy reminder.
- Add a 'Clear saved key' button to the Settings page so the user can
  remove the API key without overwriting it.

Bug fix

- Settings > Test Connection used to save the in-progress form values
  to localStorage before testing. It now uses the in-memory candidate
  config, so failed tests don't pollute the saved config.

Code quality

- Extract the duplicated useAutoHeight hook to src/lib/useAutoHeight.ts.
- Extract a useElapsed hook for the loading timer.
- Move InputValues into src/lib/types.ts (was duplicated in
  InputPanel.tsx) and add SECTION_LABELS, replacing the humanizeSection
  switch in HomePage.
- Centralize the filename sanitization: HomePage now calls
  sanitizeFilename from zip.ts instead of duplicating the regex.
- Add previewConfig / testConnectionWithConfig helpers to llm.ts to
  support in-memory connection tests.

src/pages/SettingsPage.tsx

@@ -1,14 +1,30 @@
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { ArrowLeft, Eye, EyeOff, Loader2, Save, Plug } from "lucide-react";
+import {
+  ArrowLeft,
+  Eye,
+  EyeOff,
+  Loader2,
+  Save,
+  Plug,
+  Trash2,
+} from "lucide-react";
 import { ThemeToggle } from "../components/ThemeToggle";
 import { useToast } from "../lib/toast";
-import { getConfigDisplay, setConfig, testConnection } from "../lib/llm";
+import {
+  getConfigDisplay,
+  setConfig,
+  previewConfig,
+  testConnectionWithConfig,
+  saveConfig,
+  loadConfig,
+  DEFAULT_MODEL,
+} from "../lib/llm";
 
 const DEFAULTS = {
   api_endpoint: "",
   api_key: "",
-  model_name: "MiniMax-M3",
+  model_name: DEFAULT_MODEL,
 };
 
 export function SettingsPage() {
@@ -34,7 +50,7 @@ export function SettingsPage() {
     setLoading(false);
   }, []);
 
-  const onSave = async (e: React.FormEvent) => {
+  const onSave = (e: React.FormEvent) => {
     e.preventDefault();
     setSaving(true);
     try {
@@ -55,27 +71,28 @@ export function SettingsPage() {
     }
   };
 
+  // Test using *in-memory* form values — don't persist until the user clicks
+  // Save. An empty API key field still falls back to the previously saved key,
+  // matching the behaviour of Save.
   const onTest = async () => {
     setTesting(true);
-    // Persist current form values first so the test reflects them. setConfig
-    // preserves the existing key when the field is empty, so this is safe.
-    try {
-      const result = setConfig({
-        api_endpoint: endpoint.trim(),
-        api_key: apiKey,
-        model_name: model.trim(),
-      });
-      setApiKey("");
-      setApiKeySet(result.api_key_set);
-    } catch (err) {
+    const candidate = previewConfig({
+      api_endpoint: endpoint.trim(),
+      api_key: apiKey,
+      model_name: model.trim(),
+    });
+
+    if (
+      !candidate.api_endpoint ||
+      !candidate.api_key ||
+      !candidate.model_name
+    ) {
       setTesting(false);
-      toast.error(
-        err instanceof Error ? err.message : "Failed to save configuration",
-      );
+      toast.error("❌ Fill in endpoint, key, and model before testing");
       return;
     }
 
-    const result = await testConnection();
+    const result = await testConnectionWithConfig(candidate);
     if (result.success) {
       toast.success(`✅ ${result.message}`);
     } else {
@@ -84,6 +101,16 @@ export function SettingsPage() {
     setTesting(false);
   };
 
+  const onClearKey = () => {
+    if (!apiKeySet) return;
+    if (!window.confirm("Clear the saved API key from this browser?")) return;
+    const current = loadConfig();
+    saveConfig({ ...current, api_key: "" });
+    setApiKeySet(false);
+    setApiKey("");
+    toast.info("Saved API key cleared");
+  };
+
   return (
     <div className="min-h-screen">
       <header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
@@ -175,6 +202,16 @@ export function SettingsPage() {
                     A key is currently saved.
                   </p>
                 )}
+                {apiKeySet && (
+                  <button
+                    type="button"
+                    onClick={onClearKey}
+                    className="mt-2 inline-flex items-center gap-1 text-xs text-fg-muted hover:text-rose-300 transition-colors"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                    Clear saved key
+                  </button>
+                )}
               </div>
 
               <div>