@effectnode/media 0.4.0 → 0.6.0

package/dist/backend/movie-backend/render-media.js

@@ -25,11 +25,9 @@ const PYTHON_DIR = join(APP_DATA_DIR, "python-src");
 const TEMP_DIR = join(APP_DATA_DIR, "temp");
 const PROJECTS_FILE = join(JSON_DIR, "projects.json");
 const CHARACTERS_FILE = join(JSON_DIR, "characters.json");
-const MLXGEN_MODEL = "AbstractFramework/qwen-image-edit-2511-8bit";
 const Z_IMAGE_MODEL = "AbstractFramework/z-image-turbo-8bit";
 const FLUX_KLEIN_MODEL = "AbstractFramework/flux.2-klein-4b-8bit";
 const MLX_VLM_MODEL = "mlx-community/gemma-4-e2b-it-4bit";
-const H3_MODEL = "appautomaton/minimax-h3-base-8bit-mlx";
 const VIDEO_STAGE_FLAGS = {
     distilled: "--distilled",
     "one-stage": "--one-stage",
@@ -330,7 +328,7 @@ function huggingfaceCacheDir() {
     return join(homedir(), ".cache", "huggingface", "hub");
 }
 /** True when the given MLX-Gen model has already been downloaded to the HF cache. */
-function isModelDownloaded(model = MLXGEN_MODEL) {
+function isModelDownloaded(model) {
     const modelDirName = `models--${model.replace("/", "--")}`;
     const snapshotsDir = join(huggingfaceCacheDir(), modelDirName, "snapshots");
     if (!existsSync(snapshotsDir))
@@ -2141,7 +2139,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
     app.get("/api/mlxgen/status", (_req, res) => {
         res.json({
             installed: isMlxgenInstalled(),
-            modelDownloaded: isModelDownloaded(),
             zModelDownloaded: isModelDownloaded(Z_IMAGE_MODEL),
             fluxModelDownloaded: isModelDownloaded(FLUX_KLEIN_MODEL),
         });
@@ -2190,50 +2187,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.end();
         }
     });
-    // ========== MLX-Gen: Download Model ==========
-    app.post("/api/mlxgen/download-model", async (_req, res) => {
-        res.writeHead(200, {
-            "Content-Type": "text/event-stream",
-            "Cache-Control": "no-cache",
-            Connection: "keep-alive",
-            "X-Accel-Buffering": "no",
-        });
-        const send = (event, data) => {
-            res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
-        };
-        try {
-            const mlxgen = await getMlxgenBin();
-            send("progress", {
-                status: "starting",
-                label: `Downloading model ${MLXGEN_MODEL}...`,
-            });
-            const proc = spawn([mlxgen, "download", "--model", MLXGEN_MODEL], {
-                stdout: "pipe",
-                stderr: "pipe",
-            });
-            activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "Download", send);
-            const stderrText = await streamToSSE(proc.stderr, "Download", send);
-            await stdoutPromise;
-            const exitCode = await proc.exited;
-            if (exitCode === 0) {
-                send("complete", { success: true });
-            }
-            else {
-                send("error", {
-                    error: stderrText || `Process exited with code ${exitCode}`,
-                    exitCode,
-                });
-            }
-        }
-        catch (e) {
-            send("error", { error: String(e) });
-        }
-        finally {
-            activeProc = null;
-            res.end();
-        }
-    });
     // ========== MLX-Gen: Download Z-Image Model ==========
     app.post("/api/mlxgen/download-z-model", async (_req, res) => {
         res.writeHead(200, {
@@ -2327,7 +2280,15 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
     app.get("/api/h3/status", (_req, res) => {
         res.json({ downloaded: isH3ModelDownloaded() });
     });
-    app.post("/api/h3/download-model", async (_req, res) => {
+    // ========== Hugging Face CLI + LTX Video Model ==========
+    app.get("/api/hf/status", (_req, res) => {
+        res.json({
+            installed: whichSync("hf") !== null,
+            ltxDownloaded: isModelDownloaded("dgrauet/ltx-2.3-mlx-q8"),
+            ttsDownloaded: isModelDownloaded("Qwen/Qwen3-TTS-12Hz-1.7B-Base"),
+        });
+    });
+    app.post("/api/hf/install", async (_req, res) => {
         res.writeHead(200, {
             "Content-Type": "text/event-stream",
             "Cache-Control": "no-cache",
@@ -2337,25 +2298,15 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
         const send = (event, data) => {
             res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         };
-        // The `hf download` command must run from inside the mlx-h3 checkout so
-        // its weights land in <mlx-h3>/weights.
-        const featureFolder = join(PYTHON_DIR, "mlx-h3");
-        if (!existsSync(featureFolder)) {
-            mkdirSync(featureFolder, { recursive: true });
-        }
         try {
             send("progress", {
                 status: "starting",
-                label: `Downloading model ${H3_MODEL}...`,
-            });
-            const proc = spawn(["hf", "download", H3_MODEL, "--local-dir", "weights"], {
-                cwd: featureFolder,
-                stdout: "pipe",
-                stderr: "pipe",
+                label: "Installing huggingface-cli...",
             });
+            const proc = spawn(["bash", "-c", "curl -LsSf https://hf.co/cli/install.sh | bash"], { stdout: "pipe", stderr: "pipe" });
             activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "H3 Download", send);
-            const stderrText = await streamToSSE(proc.stderr, "H3 Download", send);
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Install", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF Install", send);
             await stdoutPromise;
             const exitCode = await proc.exited;
             if (exitCode === 0) {
@@ -2376,42 +2327,7 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.end();
         }
     });
-    // ========== H3: Generate (References-to-Video) ==========
-    app.post("/api/h3/generate", async (req, res) => {
-        const { prompt, refs, projectId, steps = 20, width = 640, height = 448, frames = 121, seed = 42, } = req.body || {};
-        if (!prompt || typeof prompt !== "string" || !prompt.trim()) {
-            res.status(400).json({ error: "Prompt is required" });
-            return;
-        }
-        if (!projectId || !isValidProjectId(String(projectId))) {
-            res.status(400).json({ error: "Invalid project ID" });
-            return;
-        }
-        // Resolve ordered reference media (images, videos, and audio) to safe paths.
-        const mediaRefs = Array.isArray(refs)
-            ? refs.filter((r) => !!r &&
-                (r.kind === "image" || r.kind === "video" || r.kind === "audio") &&
-                typeof r.filename === "string" &&
-                !!r.filename.trim())
-            : [];
-        if (mediaRefs.length === 0) {
-            res.status(400).json({
-                error: "At least one reference image, video, or audio is required. Upload or select one first.",
-            });
-            return;
-        }
-        const resolvedRefs = [];
-        for (const ref of mediaRefs) {
-            const resolved = resolveSafePath(ref.filename.trim(), String(projectId));
-            if (!resolved) {
-                res.status(400).json({
-                    error: `Reference ${ref.kind} not found in this project: ${ref.filename}`,
-                });
-                return;
-            }
-            resolvedRefs.push({ kind: ref.kind, path: resolved });
-        }
-        // SSE headers
+    app.post("/api/hf/download-ltx", async (_req, res) => {
         res.writeHead(200, {
             "Content-Type": "text/event-stream",
             "Cache-Control": "no-cache",
@@ -2422,66 +2338,18 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         };
         try {
-            const featureFolder = join(PYTHON_DIR, "mlx-h3");
-            if (!existsSync(featureFolder)) {
-                send("error", { error: "mlx-h3 not found. Run setup first." });
-                res.end();
-                return;
-            }
-            const uvPath = await getUvPath();
-            const projectOutputDir = resolveOutputDir(null, String(projectId));
-            if (!projectOutputDir) {
-                send("error", { error: "Invalid output directory." });
-                res.end();
-                return;
-            }
-            const outputFile = `references-${Date.now()}.mp4`;
-            const outputPath = join(projectOutputDir, outputFile);
-            const stepCount = Number(steps) || 20;
-            const videoWidth = Number(width) || 640;
-            const videoHeight = Number(height) || 448;
-            const frameCount = Number(frames) || 121;
-            const seedValue = Number(seed) || 42;
             send("progress", {
                 status: "starting",
-                label: "Generating references-to-video...",
-                outputFile,
-                settings: {
-                    steps: stepCount,
-                    width: videoWidth,
-                    height: videoHeight,
-                    frames: frameCount,
-                    seed: seedValue,
-                },
-            });
-            const args = [uvPath, "run", "mlx-h3"];
-            for (const ref of resolvedRefs) {
-                const flag = ref.kind === "image"
-                    ? "--ref-image"
-                    : ref.kind === "video"
-                        ? "--ref-video"
-                        : "--ref-audio";
-                args.push(flag, ref.path);
-            }
-            args.push("--steps", String(stepCount), "--width", String(videoWidth), "--height", String(videoHeight), "--frames", String(frameCount), "--seed", String(seedValue), "--output", outputPath, prompt);
-            const proc = spawn(args, {
-                env: process.env,
-                cwd: featureFolder,
-                stdout: "pipe",
-                stderr: "pipe",
+                label: "Downloading dgrauet/ltx-2.3-mlx-q8...",
             });
+            const proc = spawn(["hf", "download", "dgrauet/ltx-2.3-mlx-q8"], { stdout: "pipe", stderr: "pipe" });
             activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "H3 Generate", send);
-            const stderrText = await streamToSSE(proc.stderr, "H3 Generate", send);
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF Download", send);
             await stdoutPromise;
             const exitCode = await proc.exited;
-            const success = exitCode === 0 && existsSync(outputPath);
-            if (success) {
-                send("complete", {
-                    success: true,
-                    path: outputPath,
-                    filename: outputFile,
-                });
+            if (exitCode === 0) {
+                send("complete", { success: true });
             }
             else {
                 send("error", {
@@ -2498,48 +2366,7 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.end();
         }
     });
-    // ========== MLX-Gen: Generate (Image Edit) ==========
-    app.post("/api/mlxgen/generate", async (req, res) => {
-        const { prompt, imagePath, image, projectId, width, height } = req.body || {};
-        if (!prompt) {
-            res.status(400).json({ error: "Prompt is required" });
-            return;
-        }
-        if (!projectId) {
-            res.status(400).json({ error: "Project ID is required" });
-            return;
-        }
-        // Project IDs are generated by makeId() (alphanumeric + hyphen). Reject
-        // anything else (including `.`, `..`, and path separators) so a malicious
-        // projectId cannot escape OUTPUT_DIR/TEMP_DIR via `../`.
-        if (!/^[a-zA-Z0-9_-]{1,64}$/.test(String(projectId))) {
-            res.status(400).json({ error: "Invalid project ID" });
-            return;
-        }
-        // Resolve the character image. Prefer a client-side preprocessed PNG
-        // (base64), which is written to the temp workspace; otherwise fall back to
-        // a bare filename previously uploaded to this project.
-        let resolvedImage = null;
-        let tempImagePath = null;
-        if (image) {
-            // Decode base64 (strip data URL prefix if present)
-            const base64 = String(image).replace(/^data:image\/\w+;base64,/, "");
-            const buffer = Buffer.from(base64, "base64");
-            const tempDir = join(TEMP_DIR, String(projectId));
-            ensureDir(tempDir);
-            tempImagePath = join(tempDir, `temp-${Date.now()}.png`);
-            writeFileSync(tempImagePath, buffer);
-            resolvedImage = tempImagePath;
-        }
-        else if (imagePath) {
-            resolvedImage = resolveSafePath(imagePath, projectId);
-        }
-        if (!resolvedImage) {
-            res.status(400).json({
-                error: "Image is required. Provide a preprocessed image or a filename previously uploaded to this project.",
-            });
-            return;
-        }
+    app.post("/api/hf/download-tts", async (_req, res) => {
         res.writeHead(200, {
             "Content-Type": "text/event-stream",
             "Cache-Control": "no-cache",
@@ -2550,55 +2377,18 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
         };
         try {
-            const mlxgen = await getMlxgenBin();
-            const projectOutputDir = join(OUTPUT_DIR, projectId);
-            ensureDir(projectOutputDir);
-            const outputFile = `mlxgen-${Date.now()}.png`;
-            const outputPath = join(projectOutputDir, outputFile);
             send("progress", {
                 status: "starting",
-                label: "Generating image...",
-                outputFile,
-            });
-            const args = [
-                mlxgen,
-                "generate",
-                "--model",
-                MLXGEN_MODEL,
-                "--image",
-                resolvedImage,
-                "--prompt",
-                prompt,
-                "--output",
-                outputPath,
-                "--steps",
-                String(40),
-            ];
-            // Optional output size (kept in the same aspect ratio by the client).
-            const outWidth = Number(width);
-            const outHeight = Number(height);
-            if (Number.isInteger(outWidth) &&
-                outWidth > 0 &&
-                Number.isInteger(outHeight) &&
-                outHeight > 0) {
-                args.push("--width", String(outWidth), "--height", String(outHeight));
-            }
-            const proc = spawn(args, {
-                stdout: "pipe",
-                stderr: "pipe",
+                label: "Downloading Qwen/Qwen3-TTS-12Hz-1.7B-Base...",
             });
+            const proc = spawn(["hf", "download", "Qwen/Qwen3-TTS-12Hz-1.7B-Base"], { stdout: "pipe", stderr: "pipe" });
             activeProc = proc;
-            const stdoutPromise = streamToSSE(proc.stdout, "MLXGen", send);
-            const stderrText = await streamToSSE(proc.stderr, "MLXGen", send);
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF Download", send);
             await stdoutPromise;
             const exitCode = await proc.exited;
-            const success = exitCode === 0 && existsSync(outputPath);
-            if (success) {
-                send("complete", {
-                    success: true,
-                    path: outputPath,
-                    filename: outputFile,
-                });
+            if (exitCode === 0) {
+                send("complete", { success: true });
             }
             else {
                 send("error", {
@@ -2612,22 +2402,6 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
         }
         finally {
             activeProc = null;
-            // Clean up the temporary workspace image now that generation is done.
-            if (tempImagePath) {
-                try {
-                    unlinkSync(tempImagePath);
-                }
-                catch {
-                    // already removed
-                }
-                try {
-                    // Remove the temp dir only when it is empty (no recursive delete).
-                    rmSync(join(TEMP_DIR, String(projectId)), { force: true });
-                }
-                catch {
-                    // ignore cleanup failures
-                }
-            }
             res.end();
         }
     });

package/frontend/index.html

@@ -4,7 +4,12 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>effectnode-media</title>
+  <meta name="theme-color" content="#eaf8f6" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..600&display=swap"
+    rel="stylesheet" />
+  <title>EffectNode Media</title>
 </head>
 
 <body>

package/frontend/src/movie-app/MediaStudio.tsx

@@ -1,9 +1,13 @@
+import Aurora from "./components/Aurora";
 import ProjectManager from "./components/ProjectManager";
 
 export default function MediaStudio() {
   return (
-    <div className="flex flex-col h-screen p-8 bg-ink-50">
-      <ProjectManager />
+    <div className="relative min-h-screen">
+      <Aurora />
+      <div className="relative z-10 mx-auto w-full max-w-4xl px-6 py-12 md:py-16">
+        <ProjectManager />
+      </div>
     </div>
   );
 }

package/frontend/src/movie-app/SetupPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useLogStore, type LogEntry } from "./stores/logStore";
+import Aurora from "./components/Aurora";
 
 interface StepStatus {
   step: string;
@@ -104,7 +105,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="currentColor"
+            stroke="#4fc3bc"
             strokeWidth="2"
           >
             <circle
@@ -131,7 +132,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#22c55e"
+            stroke="#0abab5"
             strokeWidth="2"
           >
             <circle cx="12" cy="12" r="10" />
@@ -145,7 +146,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#ef4444"
+            stroke="#fb7185"
             strokeWidth="2"
           >
             <circle cx="12" cy="12" r="10" />
@@ -159,7 +160,7 @@ function SetupPage({ port = 8765 }) {
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#9ca3af"
+            stroke="#83a0a7"
             strokeWidth="2"
           >
             <circle cx="12" cy="12" r="10" />
@@ -177,7 +178,7 @@ function SetupPage({ port = 8765 }) {
             height="14"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#ef4444"
+            stroke="#fb7185"
             strokeWidth="2"
             className="shrink-0"
           >
@@ -192,13 +193,13 @@ function SetupPage({ port = 8765 }) {
             height="14"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#f59e0b"
+            stroke="#fbbf24"
             strokeWidth="2"
             className="shrink-0"
           >
             <path d="M12 2L2 22h20L12 2z" />
             <line x1="12" y1="9" x2="12" y2="14" />
-            <circle cx="12" cy="18" r="0.5" fill="#f59e0b" />
+            <circle cx="12" cy="18" r="0.5" fill="#fbbf24" />
           </svg>
         );
       default:
@@ -208,7 +209,7 @@ function SetupPage({ port = 8765 }) {
             height="14"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#6b7280"
+            stroke="#5e7c83"
             strokeWidth="2"
             className="shrink-0"
           >
@@ -225,65 +226,99 @@ function SetupPage({ port = 8765 }) {
   };
 
   return (
-    <div className="flex flex-col h-screen p-8 font-sans bg-ink-50 text-ink-800">
-      <h2 className="text-lg font-semibold mb-4 text-ink-900">
-        Media Studio Setup
-      </h2>
+    <div className="relative min-h-screen">
+      <Aurora />
+      <div className="relative z-10 mx-auto w-full max-w-3xl px-6 py-12">
+        {/* Hero */}
+        <header>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-tiffany-600">
+            EffectNode Media
+          </p>
+          <h1 className="mt-3 font-display text-4xl font-light leading-[1.06] text-ink-900">
+            Setting up{" "}
+            <span className="wordmark font-medium italic">your studio</span>
+          </h1>
+          <p className="mt-4 text-sm leading-relaxed text-ink-600/80">
+            Gathering models and starting the local server. The first run takes
+            a minute.
+          </p>
+        </header>
 
-      {error && <div className="text-red-600 mb-4">Error: {error}</div>}
-      {complete && !error && (
-        <div className="text-ink-600 mb-4 font-bold">
-          Setup complete! Server running on port {port}
-        </div>
-      )}
-      <div className="mb-4">
-        {steps.map((step, i) => (
-          <div
-            key={i}
-            className="flex items-center gap-2 py-2 transition-opacity"
-            style={{ opacity: step.status === "pending" ? 0.5 : 1 }}
-          >
-            <StatusIcon status={step.status} />
-            <span className="text-sm">{step.label}</span>
+        {error && (
+          <div className="mt-8 rounded-2xl border border-rose-200 bg-rose-50/70 px-4 py-3 text-sm text-rose-600 backdrop-blur-sm">
+            Error: {error}
+          </div>
+        )}
+        {complete && !error && (
+          <div className="glass mt-8 rounded-2xl px-4 py-3 text-sm font-medium text-tiffany-700 shadow-card">
+            Setup complete — opening your studio…
+          </div>
+        )}
+
+        {/* Checks */}
+        <div className="glass mt-8 rounded-3xl p-6 shadow-card">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-500">
+            Checks
+          </p>
+          <div className="mt-2">
+            {steps.length === 0 ? (
+              <p className="py-2 text-sm italic text-ink-500/70">
+                Starting the local server…
+              </p>
+            ) : (
+              steps.map((step, i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-2.5 py-2 transition-opacity"
+                  style={{ opacity: step.status === "pending" ? 0.45 : 1 }}
+                >
+                  <StatusIcon status={step.status} />
+                  <span className="text-sm text-ink-800">{step.label}</span>
+                </div>
+              ))
+            )}
           </div>
-        ))}
-      </div>
-      {/* Log display panel */}
-      <div className="flex-1 flex flex-col min-h-0 border border-ink-200 rounded-2xl overflow-hidden bg-white shadow-card">
-        <div className="flex items-center justify-between px-4 py-2.5 bg-ink-50 border-b border-ink-200">
-          <span className="text-xs font-semibold text-ink-600/80 uppercase tracking-wider">
-            Logs
-          </span>
-          <span className="text-xs text-ink-500">{logs.length} entries</span>
         </div>
-        <div className="flex-1 overflow-y-auto p-4 font-mono text-xs leading-relaxed">
-          {logs.length === 0 ? (
-            <div className="text-ink-500 italic">Waiting for logs...</div>
-          ) : (
-            logs.map((entry) => (
-              <div
-                key={entry.id}
-                className="flex items-start gap-2 py-0.5 hover:bg-ink-100 rounded px-1"
-              >
-                <LogIcon level={entry.level} />
-                <span className="text-ink-500 shrink-0 select-none">
-                  {formatTime(entry.timestamp)}
-                </span>
-                <span
-                  className={
-                    entry.level === "error"
-                      ? "text-red-600"
-                      : entry.level === "warn"
-                        ? "text-amber-600"
-                        : "text-ink-700"
-                  }
+
+        {/* Log console — the film-editing-bay contrast inside the dream */}
+        <div className="glass-dark mt-5 flex min-h-0 flex-col overflow-hidden rounded-3xl shadow-card">
+          <div className="flex items-center justify-between border-b border-white/10 px-5 py-3">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-tiffany-300/80">
+              Logs
+            </span>
+            <span className="text-xs text-ink-400">
+              {logs.length} {logs.length === 1 ? "entry" : "entries"}
+            </span>
+          </div>
+          <div className="flex-1 overflow-y-auto p-5 font-mono text-xs leading-relaxed">
+            {logs.length === 0 ? (
+              <div className="italic text-ink-400">Waiting for logs…</div>
+            ) : (
+              logs.map((entry) => (
+                <div
+                  key={entry.id}
+                  className="flex items-start gap-2 rounded px-1 py-0.5 hover:bg-white/5"
                 >
-                  {entry.message}
-                </span>
-              </div>
-            ))
-          )}
-          <div ref={logEndRef} />
+                  <LogIcon level={entry.level} />
+                  <span className="shrink-0 select-none text-ink-400">
+                    {formatTime(entry.timestamp)}
+                  </span>
+                  <span
+                    className={
+                      entry.level === "error"
+                        ? "text-rose-300"
+                        : entry.level === "warn"
+                          ? "text-amber-300"
+                          : "text-tiffany-100"
+                    }
+                  >
+                    {entry.message}
+                  </span>
+                </div>
+              ))
+            )}
+            <div ref={logEndRef} />
+          </div>
         </div>
       </div>
     </div>

package/frontend/src/movie-app/components/Aurora.tsx

@@ -0,0 +1,13 @@
+// The signature atmosphere: a slow-drifting aurora of tiffany, periwinkle,
+// blush and sky behind the frosted-glass interface. Purely decorative and
+// pointer-transparent; animation is disabled for users who prefer reduced motion.
+export default function Aurora() {
+  return (
+    <div className="aurora" aria-hidden="true">
+      <div className="aurora-blob aurora-blob--tiffany" />
+      <div className="aurora-blob aurora-blob--periwinkle" />
+      <div className="aurora-blob aurora-blob--blush" />
+      <div className="aurora-blob aurora-blob--sky" />
+    </div>
+  );
+}