Move LLM key to the server, add random-style buttons

Architectural change

The browser no longer talks to the LLM directly. A new Node server
(server.mjs) sits in the middle:

  [Browser] → [Node :3000] → [LLM provider]
    (no key)    (key in .env)

server.mjs is the production runtime: it serves the built SPA out of
dist/ and exposes three JSON endpoints that proxy to the LLM with
credentials held in process.env. The browser-side llm.ts is now a thin
fetch wrapper.

- server.mjs: single-file Node server, no production deps
- server/prompts.mjs: system + user prompt construction (was client-side)
- src/lib/prompts.ts removed (moved server-side)
- src/lib/llm.ts rewritten — no more direct LLM calls, no more
  JSON extraction, no more validation; just fetch the proxy
- src/lib/types.ts: drop SaveConfigPayload/TestConnectionResult, add
  style_hint and ServerStatus
- vite.config.ts: proxy /api/* → localhost:3000 in dev
- .env.example: LLM_* and PORT/CORS_ORIGIN instead of Supabase values

New feature: random style buttons

The Options → Music style field now has two AI buttons that fill it
with a fresh Suno style description:
- 'Surprise me' → coherent, production-ready style (max 25 words)
- 'Go crazy'   → deliberately clashing genre mashup (max 25 words)

The buttons hit a dedicated /api/style/random endpoint on the server
that uses a small, focused system prompt. Each click overwrites the
field. Both buttons show a spinner and disable while a request is
in flight. Errors surface as toasts. AbortController is used so a
fast second click cancels the first.

When the Music style field is non-empty at generation time, its value
is sent to the model as style_hint and used as the basis for the full
120-word style field (per the updated system prompt).

Other UX

- Settings page is now a server-status page: green/red indicator,
  model + endpoint, re-check button. The API key is no longer
  configurable in the browser (it never was reachable anyway — now
  the UI is honest about that).
- Home page header shows a small 'Server offline' warning when the
  server is unreachable.
- Settings has a Local data section: list what's in localStorage
  with one-click clear-history and clear-all buttons (with confirm).
- Esc cancels any in-flight generation.
- ZIP filename falls back to 'song' if the title sanitizes to empty.

Deployment

deploy/ holds reference files (Dockerfile, docker-compose example,
Caddy fragment, generate-env.sh, README) for adding the service to a
Jannik-Cloud-style stack. The repo is intentionally not wired into
the Jannik-Cloud repo; copy the four files when ready.

src/components/ConfigBanner.tsx

@@ -1,32 +0,0 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { X } from 'lucide-react';
-
-interface ConfigBannerProps {
-  message: string;
-  linkTo: string;
-  linkLabel: string;
-}
-
-export function ConfigBanner({ message, linkTo, linkLabel }: ConfigBannerProps) {
-  const [dismissed, setDismissed] = useState(false);
-  if (dismissed) return null;
-  return (
-    <div className="mb-4 flex items-center justify-between gap-3 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
-      <p className="flex-1">
-        {message}{' '}
-        <Link to={linkTo} className="font-semibold underline underline-offset-2 hover:text-amber-100">
-          {linkLabel}
-        </Link>
-      </p>
-      <button
-        type="button"
-        onClick={() => setDismissed(true)}
-        className="text-amber-200/70 hover:text-amber-100 transition-colors"
-        aria-label="Dismiss"
-      >
-        <X className="w-4 h-4" />
-      </button>
-    </div>
-  );
-}

src/components/InputPanel.tsx

@@ -7,10 +7,14 @@ import {
   Settings as SettingsIcon,
   Sparkles,
   Shuffle,
+  Flame,
+  Wand2,
 } from "lucide-react";
 import { EqualizerIcon } from "./EqualizerIcon";
 import type { InputValues, Language, Vocals } from "../lib/types";
 import { formatElapsed, useElapsed } from "../lib/useElapsed";
+import { randomStyle } from "../lib/llm";
+import { useToast } from "../lib/toast";
 
 export type { InputValues };
 
@@ -68,7 +72,11 @@ export function InputPanel({
   cancelButton,
 }: InputPanelProps) {
   const [optionsOpen, setOptionsOpen] = useState(false);
+  const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(
+    null,
+  );
   const elapsed = useElapsed(loading);
+  const toast = useToast();
 
   const set = <K extends keyof InputValues>(key: K, value: InputValues[K]) =>
     onChange({ ...values, [key]: value });
@@ -98,6 +106,25 @@ export function InputPanel({
     });
   };
 
+  const handleStyleRandom = async (mode: "normal" | "crazy") => {
+    if (styleLoading) return; // already running, don't fire two in parallel
+    const ctrl = new AbortController();
+    setStyleLoading(mode);
+    try {
+      const style = await randomStyle(mode, ctrl.signal);
+      onChange({ ...values, style_hint: style });
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : `Could not generate a ${mode} style — please try again`,
+      );
+    } finally {
+      setStyleLoading((curr) => (curr === mode ? null : curr));
+    }
+  };
+
   return (
     <div className="relative">
       {/* Animated gradient backdrop behind the header */}
@@ -144,10 +171,7 @@ export function InputPanel({
           />
           <p className="mt-1 text-[11px] text-fg-muted">
             <kbd className="px-1 py-0.5 rounded bg-bg-hover border border-border font-mono">
-              {navigator?.platform?.toLowerCase().includes("mac")
-                ? "⌘"
-                : "Ctrl"}
-              +Enter
+              {isMac() ? "⌘" : "Ctrl"}+Enter
             </kbd>{" "}
             to generate
           </p>
@@ -199,12 +223,20 @@ export function InputPanel({
               )}
             </div>
 
+            <StyleField
+              value={values.style_hint}
+              loading={styleLoading}
+              onChange={(v) => set("style_hint", v)}
+              onRandom={handleStyleRandom}
+            />
+
             <div>
               <label
                 htmlFor="mood"
                 className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
               >
-                Mood
+                Mood{" "}
+                <span className="text-fg-muted/70 normal-case">(optional)</span>
               </label>
               <input
                 id="mood"
@@ -284,3 +316,69 @@ export function InputPanel({
     </div>
   );
 }
+
+interface StyleFieldProps {
+  value: string;
+  loading: null | "normal" | "crazy";
+  onChange: (v: string) => void;
+  onRandom: (mode: "normal" | "crazy") => void;
+}
+
+function StyleField({ value, loading, onChange, onRandom }: StyleFieldProps) {
+  return (
+    <div>
+      <label
+        htmlFor="style_hint"
+        className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
+      >
+        Music style{" "}
+        <span className="text-fg-muted/70 normal-case">(optional)</span>
+      </label>
+      <textarea
+        id="style_hint"
+        rows={2}
+        placeholder="e.g. dark synthwave, analog pads, 110 BPM"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="textarea text-sm"
+      />
+      <div className="mt-2 grid grid-cols-2 gap-2">
+        <button
+          type="button"
+          onClick={() => onRandom("normal")}
+          disabled={loading !== null}
+          className="btn-secondary text-xs py-2"
+          title="Generate a coherent Suno-friendly style description"
+        >
+          {loading === "normal" ? (
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          ) : (
+            <Wand2 className="w-3.5 h-3.5" />
+          )}
+          Surprise me
+        </button>
+        <button
+          type="button"
+          onClick={() => onRandom("crazy")}
+          disabled={loading !== null}
+          className="btn-secondary text-xs py-2"
+          title="Generate an unusual genre mashup that still works in Suno"
+        >
+          {loading === "crazy" ? (
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          ) : (
+            <Flame className="w-3.5 h-3.5" />
+          )}
+          Go crazy
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function isMac(): boolean {
+  if (typeof navigator === "undefined") return false;
+  const p = navigator.platform || "";
+  const ua = navigator.userAgent || "";
+  return /Mac|iPhone|iPad|iPod/.test(p) || /Mac OS X/.test(ua);
+}