style: apply prettier formatting across all source files

web/components/AudioPlayer.tsx

@@ -14,15 +14,8 @@ function formatTime(seconds: number): string {
 }
 
 export default function AudioPlayer({ audioUrl }: AudioPlayerProps) {
-  const {
-    isPlaying,
-    currentTime,
-    duration,
-    volume,
-    toggle,
-    seek,
-    setVolume,
-  } = useAudioPlayer(audioUrl);
+  const { isPlaying, currentTime, duration, volume, toggle, seek, setVolume } =
+    useAudioPlayer(audioUrl);
 
   if (!audioUrl) return null;
 
@@ -56,12 +49,10 @@ export default function AudioPlayer({ audioUrl }: AudioPlayerProps) {
             background: "rgba(45, 212, 191, 0.05)",
           }}
           onMouseEnter={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              "rgba(45, 212, 191, 0.15)";
+            (e.currentTarget as HTMLButtonElement).style.background = "rgba(45, 212, 191, 0.15)";
           }}
           onMouseLeave={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              "rgba(45, 212, 191, 0.05)";
+            (e.currentTarget as HTMLButtonElement).style.background = "rgba(45, 212, 191, 0.05)";
           }}
         >
           <svg
@@ -115,27 +106,18 @@ export default function AudioPlayer({ audioUrl }: AudioPlayerProps) {
           onClick={toggle}
           className="w-10 h-10 rounded-full flex items-center justify-center transition-transform active:scale-95 cursor-pointer"
           style={{
-            background:
-              "linear-gradient(135deg, var(--accent-teal-dim), var(--accent-violet-dim))",
+            background: "linear-gradient(135deg, var(--accent-teal-dim), var(--accent-violet-dim))",
             boxShadow: "0 4px 12px rgba(45, 212, 191, 0.3)",
           }}
           aria-label={isPlaying ? "Pause" : "Play"}
         >
           {isPlaying ? (
-            <svg
-              className="w-4 h-4 text-white"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
+            <svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
               <rect x="6" y="4" width="4" height="16" />
               <rect x="14" y="4" width="4" height="16" />
             </svg>
           ) : (
-            <svg
-              className="w-4 h-4 text-white"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
+            <svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
               <polygon points="5 3 19 12 5 21 5 3" />
             </svg>
           )}
@@ -143,9 +125,7 @@ export default function AudioPlayer({ audioUrl }: AudioPlayerProps) {
 
         {/* Duration info */}
         <div className="flex-1 flex items-center gap-1 text-sm">
-          <span style={{ color: "var(--foreground)" }}>
-            {formatTime(currentTime)}
-          </span>
+          <span style={{ color: "var(--foreground)" }}>{formatTime(currentTime)}</span>
           <span style={{ color: "var(--muted)" }}>/</span>
           <span style={{ color: "var(--muted)" }}>{formatTime(duration)}</span>
         </div>

web/components/GenerationControls.tsx

@@ -36,18 +36,27 @@ const STATUS_CONFIG: Record<
   Exclude<ServerStatus, "online">,
   { color: string; label: (p: DownloadProgress | null) => string }
 > = {
-  offline:     { color: "var(--error)",   label: () => "Server offline — waiting for connection..." },
-  downloading: { color: "#60a5fa",        label: (p) => p && p.total > 0 ? `Downloading model... (${p.done} / ${p.total} files)` : "Downloading model (~1 GB)..." },
-  loading:     { color: "#fbbf24",        label: () => "Loading model into memory..." },
-  error:       { color: "var(--error)",   label: () => "Server error — check the terminal for details." },
+  offline: { color: "var(--error)", label: () => "Server offline — waiting for connection..." },
+  downloading: {
+    color: "#60a5fa",
+    label: (p) =>
+      p && p.total > 0
+        ? `Downloading model... (${p.done} / ${p.total} files)`
+        : "Downloading model (~1 GB)...",
+  },
+  loading: { color: "#fbbf24", label: () => "Loading model into memory..." },
+  error: { color: "var(--error)", label: () => "Server error — check the terminal for details." },
 };
 
-
 function SpinnerIcon() {
   return (
     <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
       <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 12h4z" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
     </svg>
   );
 }
@@ -146,7 +155,10 @@ export default function GenerationControls({
           onChange={(e) => onCfgScaleChange(parseFloat(e.target.value))}
           className="w-full"
         />
-        <div className="flex items-center justify-between text-xs" style={{ color: "var(--muted)" }}>
+        <div
+          className="flex items-center justify-between text-xs"
+          style={{ color: "var(--muted)" }}
+        >
           <span>Flat (0.5)</span>
           <span>CFG Scale</span>
           <span>Expressive (4.0)</span>
@@ -176,7 +188,10 @@ export default function GenerationControls({
           className="w-full"
           style={{ "--thumb-color": "var(--accent-violet)" } as React.CSSProperties}
         />
-        <div className="flex items-center justify-between text-xs" style={{ color: "var(--muted)" }}>
+        <div
+          className="flex items-center justify-between text-xs"
+          style={{ color: "var(--muted)" }}
+        >
           <span>Faster (5)</span>
           <span>Diffusion Steps</span>
           <span>Better (20)</span>
@@ -207,7 +222,11 @@ export default function GenerationControls({
       </div>
 
       {showAdvanced && (
-        <div id="advanced-buffering-panel" className="flex flex-col gap-4 pl-2 border-l" style={{ borderColor: "var(--border)" }}>
+        <div
+          id="advanced-buffering-panel"
+          className="flex flex-col gap-4 pl-2 border-l"
+          style={{ borderColor: "var(--border)" }}
+        >
           {/* Pre-buffer */}
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
@@ -232,7 +251,11 @@ export default function GenerationControls({
           {/* Re-buffer threshold */}
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
-              <label htmlFor="rebuffer-threshold" className="text-xs font-medium" style={{ color: "var(--foreground)" }}>
+              <label
+                htmlFor="rebuffer-threshold"
+                className="text-xs font-medium"
+                style={{ color: "var(--foreground)" }}
+              >
                 Re-buffer Threshold
               </label>
               <span className="text-xs font-mono" style={{ color: "var(--accent-teal)" }}>
@@ -260,7 +283,11 @@ export default function GenerationControls({
           {/* Resume threshold */}
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
-              <label htmlFor="resume-threshold" className="text-xs font-medium" style={{ color: "var(--foreground)" }}>
+              <label
+                htmlFor="resume-threshold"
+                className="text-xs font-medium"
+                style={{ color: "var(--foreground)" }}
+              >
                 Resume Threshold
               </label>
               <span className="text-xs font-mono" style={{ color: "var(--accent-teal)" }}>
@@ -302,7 +329,10 @@ export default function GenerationControls({
           </div>
 
           {serverStatus === "downloading" && (
-            <div className="w-full rounded-full h-1.5 overflow-hidden" style={{ background: "var(--border)" }}>
+            <div
+              className="w-full rounded-full h-1.5 overflow-hidden"
+              style={{ background: "var(--border)" }}
+            >
               <div
                 className="h-1.5 rounded-full transition-all duration-500"
                 style={{
@@ -315,10 +345,16 @@ export default function GenerationControls({
           )}
 
           {serverStatus === "loading" && (
-            <div className="w-full rounded-full h-1.5 overflow-hidden" style={{ background: "var(--border)" }}>
+            <div
+              className="w-full rounded-full h-1.5 overflow-hidden"
+              style={{ background: "var(--border)" }}
+            >
               <div
                 className="h-1.5 rounded-full animate-pulse"
-                style={{ width: "60%", background: "linear-gradient(90deg, #fbbf24, var(--accent-teal))" }}
+                style={{
+                  width: "60%",
+                  background: "linear-gradient(90deg, #fbbf24, var(--accent-teal))",
+                }}
               />
             </div>
           )}
@@ -328,11 +364,17 @@ export default function GenerationControls({
       {/* Generation progress bar */}
       {isGenerating && (
         <div className="flex flex-col gap-1.5">
-          <div className="flex items-center justify-between text-xs" style={{ color: "var(--muted)" }}>
+          <div
+            className="flex items-center justify-between text-xs"
+            style={{ color: "var(--muted)" }}
+          >
             <span>{genElapsed}s elapsed</span>
             <span>{genPct !== null ? `${genPct}%` : "starting..."}</span>
           </div>
-          <div className="w-full rounded-full h-1.5 overflow-hidden" style={{ background: "var(--border)" }}>
+          <div
+            className="w-full rounded-full h-1.5 overflow-hidden"
+            style={{ background: "var(--border)" }}
+          >
             <div
               className="h-1.5 rounded-full transition-all duration-500"
               style={{
@@ -355,7 +397,8 @@ export default function GenerationControls({
             buttonDisabled
               ? { background: "var(--border)", color: "var(--muted)" }
               : {
-                  background: "linear-gradient(135deg, var(--accent-teal-dim), var(--accent-violet-dim))",
+                  background:
+                    "linear-gradient(135deg, var(--accent-teal-dim), var(--accent-violet-dim))",
                   color: "#fff",
                   boxShadow: "0 4px 15px rgba(45, 212, 191, 0.2)",
                 }
@@ -373,7 +416,13 @@ export default function GenerationControls({
             </>
           ) : (
             <>
-              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <svg
+                className="w-4 h-4"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
                 <polygon points="5 3 19 12 5 21 5 3" />
               </svg>
               Generate Audio

web/components/Header.tsx

@@ -6,8 +6,8 @@ type ServerStatus = "checking" | "downloading" | "loading" | "online" | "error"
 type Device = "cpu" | "cuda" | null;
 
 // Polling intervals: poll quickly until the server is online, then slow down.
-const FAST_INTERVAL_MS = 3000;   // while checking / loading
-const SLOW_INTERVAL_MS = 30000;  // once online
+const FAST_INTERVAL_MS = 3000; // while checking / loading
+const SLOW_INTERVAL_MS = 30000; // once online
 
 export default function Header() {
   const [status, setStatus] = useState<ServerStatus>("checking");
@@ -31,7 +31,10 @@ export default function Header() {
           intervalRef.current = setInterval(checkHealth, SLOW_INTERVAL_MS);
         }
         // Switch to fast polling if we detect the server went offline/loading
-        if ((newStatus === "offline" || newStatus === "downloading" || newStatus === "loading") && intervalRef.current) {
+        if (
+          (newStatus === "offline" || newStatus === "downloading" || newStatus === "loading") &&
+          intervalRef.current
+        ) {
           clearInterval(intervalRef.current);
           intervalRef.current = setInterval(checkHealth, FAST_INTERVAL_MS);
         }
@@ -95,23 +98,20 @@ export default function Header() {
   const cfg = statusConfig[status];
 
   // Device badge — only shown once the server is online and device is known
-  const deviceBadge = status === "online" && device ? (
-    <span
-      className="px-2 py-0.5 rounded-full text-xs font-semibold tracking-wide uppercase"
-      style={{
-        background: device === "cuda"
-          ? "var(--accent-violet-dim)"
-          : "var(--accent-teal-dim)",
-        color: device === "cuda"
-          ? "var(--accent-violet)"
-          : "var(--accent-teal)",
-        border: `1px solid ${device === "cuda" ? "var(--accent-violet-dim)" : "var(--accent-teal-dim)"}`,
-      }}
-      title={device === "cuda" ? "Running on NVIDIA GPU" : "Running on CPU"}
-    >
-      {device.toUpperCase()}
-    </span>
-  ) : null;
+  const deviceBadge =
+    status === "online" && device ? (
+      <span
+        className="px-2 py-0.5 rounded-full text-xs font-semibold tracking-wide uppercase"
+        style={{
+          background: device === "cuda" ? "var(--accent-violet-dim)" : "var(--accent-teal-dim)",
+          color: device === "cuda" ? "var(--accent-violet)" : "var(--accent-teal)",
+          border: `1px solid ${device === "cuda" ? "var(--accent-violet-dim)" : "var(--accent-teal-dim)"}`,
+        }}
+        title={device === "cuda" ? "Running on NVIDIA GPU" : "Running on CPU"}
+      >
+        {device.toUpperCase()}
+      </span>
+    ) : null;
 
   return (
     <header
@@ -136,8 +136,7 @@ export default function Header() {
             <h1
               className="text-xl font-bold tracking-tight"
               style={{
-                background:
-                  "linear-gradient(135deg, var(--accent-teal), var(--accent-violet))",
+                background: "linear-gradient(135deg, var(--accent-teal), var(--accent-violet))",
                 WebkitBackgroundClip: "text",
                 WebkitTextFillColor: "transparent",
               }}
@@ -167,9 +166,7 @@ export default function Header() {
                 className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${cfg.color}`}
               />
             )}
-            <span
-              className={`relative inline-flex rounded-full h-2 w-2 ${cfg.color}`}
-            />
+            <span className={`relative inline-flex rounded-full h-2 w-2 ${cfg.color}`} />
           </span>
           <span style={{ color: "var(--foreground)" }}>{cfg.label}</span>
         </div>

web/components/StatusLog.tsx

@@ -47,8 +47,7 @@ export default function StatusLog({ messages }: StatusLogProps) {
         ) : (
           messages.map((msg, i) => {
             const isError =
-              msg.toLowerCase().includes("error") ||
-              msg.toLowerCase().includes("failed");
+              msg.toLowerCase().includes("error") || msg.toLowerCase().includes("failed");
             const isSuccess =
               msg.toLowerCase().includes("done") ||
               msg.toLowerCase().includes("complete") ||

web/components/TextInputPanel.tsx

@@ -15,10 +15,7 @@ interface TextInputPanelProps {
   onChange: (text: string) => void;
 }
 
-export default function TextInputPanel({
-  value,
-  onChange,
-}: TextInputPanelProps) {
+export default function TextInputPanel({ value, onChange }: TextInputPanelProps) {
   const charCount = value.length;
   const wordCount = value.trim() === "" ? 0 : value.trim().split(/\s+/).length;
 
@@ -43,15 +40,12 @@ export default function TextInputPanel({
               color: "var(--muted)",
             }}
             onMouseEnter={(e) => {
-              (e.target as HTMLButtonElement).style.color =
-                "var(--accent-violet)";
-              (e.target as HTMLButtonElement).style.borderColor =
-                "var(--accent-violet)";
+              (e.target as HTMLButtonElement).style.color = "var(--accent-violet)";
+              (e.target as HTMLButtonElement).style.borderColor = "var(--accent-violet)";
             }}
             onMouseLeave={(e) => {
               (e.target as HTMLButtonElement).style.color = "var(--muted)";
-              (e.target as HTMLButtonElement).style.borderColor =
-                "var(--border)";
+              (e.target as HTMLButtonElement).style.borderColor = "var(--border)";
             }}
           >
             Load sample script
@@ -69,8 +63,7 @@ export default function TextInputPanel({
             }}
             onMouseLeave={(e) => {
               (e.target as HTMLButtonElement).style.color = "var(--muted)";
-              (e.target as HTMLButtonElement).style.borderColor =
-                "var(--border)";
+              (e.target as HTMLButtonElement).style.borderColor = "var(--border)";
             }}
           >
             Clear
@@ -98,10 +91,7 @@ export default function TextInputPanel({
         }}
       />
 
-      <div
-        className="flex items-center justify-between text-xs"
-        style={{ color: "var(--muted)" }}
-      >
+      <div className="flex items-center justify-between text-xs" style={{ color: "var(--muted)" }}>
         <span>
           {wordCount} word{wordCount !== 1 ? "s" : ""}
         </span>