@effectnode/media 0.6.0 → 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 @wonglok831 x.com, github.com/wonglok
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/dist/backend/movie-backend/agent/agent-backend.js

@@ -146,14 +146,17 @@ const MOVIE_STUDIO_CHARACTERS_PLAN_PROMPT = [
     '- If the idea does not mention an art style, set "artStyle" to "photo realistic render".',
 ].join("\n");
 const CHARACTER_IMAGE_PROMPT = [
-    "You are a movie pre-production planner. Given a movie idea, its art style, and one character, write that character's standalone image prompt.",
+    "You are a movie pre-production planner. Given a movie idea, its art style, and one character, write that character's standalone character-reference image prompt.",
     "",
     "Return ONLY valid JSON (no markdown fences, no commentary) matching this exact shape:",
     "",
     '{"imagePrompt":"string"}',
     "",
     "Rules:",
-    "- The imagePrompt begins with the character's name and fully describes their appearance (age, face, build, outfit, distinctive features) together with their cultural background — the era/age, culture, ethnicity, and region the character belongs to — so the generated image is historically and culturally accurate and consistent.",
+    "- The imagePrompt describes a close-up portrait shot of the character's face on a plain solid white background, framed head and shoulders, facing the camera, evenly lit with soft neutral studio lighting and no props, scenery or background elements.",
+    "- The imagePrompt begins with the character's name and then concentrates on the face: age, face shape, skin tone and texture, eyes, eyebrows, nose, mouth, facial hair, hairstyle and hair colour, expression, and any distinctive facial features such as scars, freckles or markings.",
+    "- Include the character's cultural background — the era/age, culture, ethnicity, and region they belong to — so the face is historically and culturally accurate and consistent.",
+    "- Mention clothing only as far as the collar or neckline is visible in a head-and-shoulders crop; do not describe the full outfit, body build, pose, or action.",
     "- Apply the given artStyle.",
     "- Write the prompt as natural-language English sentences, never comma-separated keyword tags.",
 ].join("\n");

package/dist/backend/movie-backend/generation-queue.d.ts

@@ -1,5 +1,5 @@
 import { type Application } from "express";
-export type QueueTaskType = "generate" | "render" | "render-assets" | "render-videos" | "render-scene-images" | "regenerate-asset" | "regenerate-video" | "regenerate-scene-image";
+export type QueueTaskType = "generate" | "render" | "render-assets" | "render-videos" | "render-scene-images" | "render-asset" | "render-scene-image" | "render-video" | "regenerate-asset" | "regenerate-video" | "regenerate-scene-image";
 export type QueueTaskStatus = "pending" | "running" | "completed" | "failed" | "cancelled" | "paused";
 export interface QueueTask {
     id: string;

package/dist/backend/movie-backend/generation-queue.js

@@ -1,4 +1,4 @@
-import { appendFileSync, existsSync, mkdirSync, readFileSync, statSync, writeFileSync, } from "node:fs";
+import { appendFileSync, existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSync, } from "node:fs";
 import { dirname, join } from "node:path";
 import { homedir } from "node:os";
 import { randomUUID } from "node:crypto";
@@ -78,10 +78,18 @@ const sseClients = new Set();
 /** Push an event to every SSE client watching the given project. */
 function broadcast(projectId, event, data) {
     for (const client of sseClients) {
-        if (client.projectId !== projectId)
+        if (client.projectId !== null && client.projectId !== projectId)
             continue;
+        let payload = data;
+        // Global watchers need to know which project each task belongs to.
+        if (client.projectId === null &&
+            event === "task" &&
+            data &&
+            typeof data === "object") {
+            payload = { ...data, projectId };
+        }
         try {
-            client.res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+            client.res.write(`event: ${event}\ndata: ${JSON.stringify(payload)}\n\n`);
         }
         catch {
             sseClients.delete(client);
@@ -130,6 +138,24 @@ function loadState(projectId) {
         void pump();
     return state;
 }
+/** Load every persisted project queue into memory so it is visible and resumed. */
+function loadAllStates() {
+    let entries = [];
+    try {
+        entries = existsSync(TASKS_DIR) ? readdirSync(TASKS_DIR) : [];
+    }
+    catch {
+        entries = [];
+    }
+    entries.sort();
+    for (const entry of entries) {
+        if (!isValidProjectId(entry))
+            continue;
+        if (!existsSync(queueFile(entry)))
+            continue;
+        loadState(entry);
+    }
+}
 function persist(projectId) {
     const state = queues.get(projectId);
     if (!state)
@@ -400,6 +426,78 @@ const handlers = {
         const { characters, places, scenes } = ctx.task.payload || {};
         return runFullRender(ctx, await getUvPath(), characters, places, scenes);
     },
+    // Generate a single character/place image, skipping if it already exists.
+    "render-asset": async (ctx) => {
+        const { kind, slug, prompt } = ctx.task.payload || {};
+        if (kind !== "character" && kind !== "place") {
+            throw new Error("kind must be 'character' or 'place'");
+        }
+        const s = slugify(slug);
+        const p = String(prompt || "").trim();
+        if (!s || !p)
+            throw new Error("slug and prompt are required");
+        const existing = existingOutput(ctx.projectId, `${kind}-${s}.png`);
+        if (existing) {
+            ctx.log(`Already generated: ${kind}-${s}.png — skipping\n`);
+            return { kind, slug: s, ...existing };
+        }
+        const r = await generateAssetImage(ctx.projectId, kind, s, p, ctx.log);
+        if ("error" in r)
+            throw new Error(r.error);
+        return {
+            kind,
+            slug: s,
+            filename: r.filename,
+            url: r.url,
+            updatedAt: Date.now(),
+        };
+    },
+    // Generate a single scene image, skipping if it already exists.
+    "render-scene-image": async (ctx) => {
+        const { scene } = ctx.task.payload || {};
+        if (!scene || typeof scene !== "object")
+            throw new Error("scene is required");
+        const s = slugify(scene?.slug);
+        if (!s)
+            throw new Error("Invalid scene slug");
+        const existing = existingOutput(ctx.projectId, `scene-${s}.png`);
+        if (existing) {
+            ctx.log(`Already generated: scene-${s}.png — skipping\n`);
+            return { slug: s, ...existing };
+        }
+        const r = await generateSceneImage(ctx.projectId, scene, ctx.log);
+        if ("error" in r)
+            throw new Error(r.error);
+        return {
+            slug: s,
+            filename: r.filename,
+            url: r.url,
+            updatedAt: Date.now(),
+        };
+    },
+    // Generate a single scene video, skipping if it already exists.
+    "render-video": async (ctx, getUvPath) => {
+        const { scene, characters } = ctx.task.payload || {};
+        if (!scene || typeof scene !== "object")
+            throw new Error("scene is required");
+        const s = slugify(scene?.slug);
+        if (!s)
+            throw new Error("Invalid scene slug");
+        const existing = existingOutput(ctx.projectId, `scene-${s}.mp4`);
+        if (existing) {
+            ctx.log(`Already generated: scene-${s}.mp4 — skipping\n`);
+            return { slug: s, ...existing };
+        }
+        const r = await generateSceneVideo(await getUvPath(), ctx.projectId, scene, Array.isArray(characters) ? characters : [], ctx.log);
+        if ("error" in r)
+            throw new Error(r.error);
+        return {
+            slug: s,
+            filename: r.filename,
+            url: r.url,
+            updatedAt: Date.now(),
+        };
+    },
     "regenerate-asset": async (ctx) => {
         const { kind, slug, prompt } = ctx.task.payload || {};
         if (kind !== "character" && kind !== "place") {
@@ -581,7 +679,7 @@ function syncToMovieStudioState(projectId, type, result) {
             ? result.renderedScenes
             : state.renderedScenes ?? [];
     }
-    if (type === "regenerate-asset" && result) {
+    if ((type === "render-asset" || type === "regenerate-asset") && result) {
         const key = `${result.kind}:${result.slug}`;
         const arr = Array.isArray(state.assets) ? state.assets : [];
         state.assets = [
@@ -589,14 +687,15 @@ function syncToMovieStudioState(projectId, type, result) {
             result,
         ];
     }
-    if (type === "regenerate-video" && result) {
+    if ((type === "render-video" || type === "regenerate-video") && result) {
         const arr = Array.isArray(state.videos) ? state.videos : [];
         state.videos = [
             ...arr.filter((v) => v.slug !== result.slug),
             result,
         ];
     }
-    if (type === "regenerate-scene-image" && result) {
+    if ((type === "render-scene-image" || type === "regenerate-scene-image") &&
+        result) {
         const arr = Array.isArray(state.sceneImages) ? state.sceneImages : [];
         state.sceneImages = [
             ...arr.filter((i) => i.slug !== result.slug),
@@ -645,6 +744,18 @@ export function generationQueueSetup({ app, getUvPath, }) {
             paused: pausedProjects.has(projectId),
         });
     });
+    // List every task across all projects, each tagged with its project id.
+    app.get("/api/queue/all", (_req, res) => {
+        loadAllStates();
+        const tasks = [];
+        for (const [projectId, state] of queues) {
+            for (const t of state.tasks) {
+                tasks.push({ ...t, projectId });
+            }
+        }
+        tasks.sort((a, b) => a.createdAt - b.createdAt);
+        res.json({ tasks });
+    });
     // Read a project's persisted terminal log (tail, so large logs stay bounded).
     app.get("/api/logs", (req, res) => {
         const projectId = String(req.query.projectId ?? "");
@@ -670,7 +781,8 @@ export function generationQueueSetup({ app, getUvPath, }) {
     // Server-Sent Events: push queue/task and log updates to a watching client.
     app.get("/api/events", (req, res) => {
         const projectId = String(req.query.projectId ?? "");
-        if (!isValidProjectId(projectId)) {
+        const all = projectId === "*";
+        if (!all && !isValidProjectId(projectId)) {
             res.status(400).json({ error: "Invalid project ID" });
             return;
         }
@@ -681,7 +793,7 @@ export function generationQueueSetup({ app, getUvPath, }) {
             "X-Accel-Buffering": "no",
         });
         res.write(`event: hello\ndata: {}\n\n`);
-        const client = { res, projectId };
+        const client = { res, projectId: all ? null : projectId };
         sseClients.add(client);
         req.on("close", () => {
             sseClients.delete(client);

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

@@ -27,7 +27,7 @@ const PROJECTS_FILE = join(JSON_DIR, "projects.json");
 const CHARACTERS_FILE = join(JSON_DIR, "characters.json");
 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 MLX_VLM_MODEL = "mlx-community/gemma-4-e4b-it-8bit";
 const VIDEO_STAGE_FLAGS = {
     distilled: "--distilled",
     "one-stage": "--one-stage",
@@ -614,7 +614,7 @@ export async function generateSceneImage(projectId, scene, onLog) {
     const fluxArgs = [mlxgen, "generate", "--model", FLUX_KLEIN_MODEL];
     for (const p of refImages)
         fluxArgs.push("--image", p);
-    fluxArgs.push("--prompt", String(scene?.imagePrompt || ""), "--output", sceneImagePath, "--mlx-cache-limit-gb", "20", "--steps", "5", "--seed", "42", "--width", "448", "--height", "796");
+    fluxArgs.push("--prompt", String(scene?.imagePrompt || ""), "--output", sceneImagePath, "--mlx-cache-limit-gb", "20", "--steps", "5", "--seed", "42", "--width", "1024", "--height", "1024");
     const result = await runCommand(fluxArgs, { onLog });
     if (!result.success || !existsSync(sceneImagePath)) {
         return { error: result.output || `Failed to generate scene image ${s}` };
@@ -2286,6 +2286,7 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
             installed: whichSync("hf") !== null,
             ltxDownloaded: isModelDownloaded("dgrauet/ltx-2.3-mlx-q8"),
             ttsDownloaded: isModelDownloaded("Qwen/Qwen3-TTS-12Hz-1.7B-Base"),
+            mlxVlmDownloaded: isModelDownloaded(MLX_VLM_MODEL),
         });
     });
     app.post("/api/hf/install", async (_req, res) => {
@@ -2342,7 +2343,52 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
                 status: "starting",
                 label: "Downloading dgrauet/ltx-2.3-mlx-q8...",
             });
-            const proc = spawn(["hf", "download", "dgrauet/ltx-2.3-mlx-q8"], { stdout: "pipe", stderr: "pipe" });
+            const proc = spawn(["hf", "download", "dgrauet/ltx-2.3-mlx-q8"], {
+                stdout: "pipe",
+                stderr: "pipe",
+            });
+            activeProc = proc;
+            const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
+            const stderrText = await streamToSSE(proc.stderr, "HF 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();
+        }
+    });
+    app.post("/api/hf/download-mlx-vlm", 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 {
+            send("progress", {
+                status: "starting",
+                label: `Downloading ${MLX_VLM_MODEL}...`,
+            });
+            const proc = spawn(["hf", "download", MLX_VLM_MODEL], {
+                stdout: "pipe",
+                stderr: "pipe",
+            });
             activeProc = proc;
             const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
             const stderrText = await streamToSSE(proc.stderr, "HF Download", send);
@@ -2381,7 +2427,10 @@ export async function renderMediaRoutes({ app, getUvPath, }) {
                 status: "starting",
                 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" });
+            const proc = spawn(["hf", "download", "Qwen/Qwen3-TTS-12Hz-1.7B-Base"], {
+                stdout: "pipe",
+                stderr: "pipe",
+            });
             activeProc = proc;
             const stdoutPromise = streamToSSE(proc.stdout, "HF Download", send);
             const stderrText = await streamToSSE(proc.stderr, "HF Download", send);

package/frontend/src/movie-app/components/EditorTabs/SetupAiModelTab.tsx

@@ -200,6 +200,11 @@ const DOWNLOAD_MODELS: {
     name: "Qwen/Qwen3-TTS-12Hz-1.7B-Base",
     desc: "Voice-over & speech",
   },
+  {
+    id: "gemma",
+    name: "mlx-community/gemma-4-e4b-it-8bit",
+    desc: "Story planning & dialogue (LLM)",
+  },
 ];
 
 export default function SetupAiModelTab() {
@@ -233,7 +238,10 @@ export default function SetupAiModelTab() {
       <section>
         <h3 className="mb-2 text-sm font-semibold text-ink-900">Engines</h3>
         <div className="space-y-2">
-          <ModelRow name="mlx-gen" desc="Image generation engine (z-image · flux)">
+          <ModelRow
+            name="mlx-gen"
+            desc="Image generation engine (z-image · flux)"
+          >
             <StatusBadge
               value={store.mlxgenInstalled}
               okText="Installed"
@@ -287,20 +295,6 @@ export default function SetupAiModelTab() {
       <section>
         <h3 className="mb-2 text-sm font-semibold text-ink-900">Models</h3>
         <div className="space-y-2">
-          <ModelRow
-            name="mlx-community/gemma-4-e2b-it-4bit"
-            desc="Story planning & dialogue (LLM)"
-          >
-            <StatusBadge
-              value={store.mlxVlmInstalled}
-              okText="Ready"
-              missingText="Not set up"
-            />
-            <span className="text-xs italic text-ink-400">
-              Downloads on first server start
-            </span>
-          </ModelRow>
-
           {DOWNLOAD_MODELS.map((m) => {
             const downloaded =
               m.id === "z-image"
@@ -309,7 +303,9 @@ export default function SetupAiModelTab() {
                   ? store.fluxDownloaded
                   : m.id === "ltx"
                     ? store.ltxDownloaded
-                    : store.ttsDownloaded;
+                    : m.id === "gemma"
+                      ? store.gemmaDownloaded
+                      : store.ttsDownloaded;
             return (
               <ModelRow key={m.id} name={m.name} desc={m.desc}>
                 <StatusBadge value={downloaded} />

package/frontend/src/movie-app/components/EditorTabs/TaskQueuePanel.tsx

@@ -126,9 +126,11 @@ function StatusBadge({ status }: { status: QueueTaskStatus }) {
 
 function TaskRow({
   task,
+  showProject = false,
   onCancel,
 }: {
   task: QueueTask;
+  showProject?: boolean;
   onCancel: () => void;
 }) {
   const active = task.status === "pending" || task.status === "running";
@@ -142,6 +144,11 @@ function TaskRow({
     <li className="flex flex-col gap-1.5 px-3 py-2 rounded-xl border border-ink-200 bg-white">
       <div className="flex items-center gap-2">
         <StatusBadge status={task.status} />
+        {showProject && task.projectId && (
+          <span className="px-1.5 py-0.5 rounded bg-ink-100 text-ink-500 text-[10px] font-mono whitespace-nowrap">
+            {task.projectId}
+          </span>
+        )}
         <span className="flex-1 text-sm font-medium text-ink-800 truncate">
           {task.label}
         </span>
@@ -179,19 +186,25 @@ function TaskRow({
 
 export default function TaskQueuePanel({ projectId }: Props) {
   const tasks = useQueueStore((s) => s.tasks);
+  const allTasks = useQueueStore((s) => s.allTasks);
+  const showAll = useQueueStore((s) => s.showAll);
   const paused = useQueueStore((s) => s.paused);
   const cancel = useQueueStore((s) => s.cancel);
   const pause = useQueueStore((s) => s.pause);
   const resume = useQueueStore((s) => s.resume);
   const clearFinished = useQueueStore((s) => s.clearFinished);
+  const setShowAll = useQueueStore((s) => s.setShowAll);
+
+  const displayTasks = showAll ? allTasks : tasks;
 
-  if (tasks.length === 0 && !paused) return null;
+  if (!showAll && tasks.length === 0 && !paused) return null;
 
-  const hasActive = tasks.some(
+  const hasActive = displayTasks.some(
     (t) => t.status === "pending" || t.status === "running",
   );
-  const hasFinished = tasks.some(
-    (t) => t.status !== "pending" && t.status !== "running" && t.status !== "paused",
+  const hasFinished = displayTasks.some(
+    (t) =>
+      t.status !== "pending" && t.status !== "running" && t.status !== "paused",
   );
 
   return (
@@ -199,9 +212,22 @@ export default function TaskQueuePanel({ projectId }: Props) {
       <div className="flex items-center gap-2">
         <span className="text-tiffany-600">{QueueIcon}</span>
         <h3 className="text-sm font-semibold text-ink-900">Generation Queue</h3>
-        <span className="text-xs text-ink-500">{tasks.length}</span>
+        <span className="text-xs text-ink-500">{displayTasks.length}</span>
+
+        <button
+          onClick={() => setShowAll(!showAll)}
+          title={showAll ? "Show only this project" : "Show all projects"}
+          className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl transition-colors ${
+            showAll
+              ? "bg-tiffany-500 text-ink-950 hover:bg-tiffany-600"
+              : "border border-ink-200 text-ink-600 hover:border-ink-300 hover:text-ink-900"
+          }`}
+        >
+          {showAll ? "All projects" : "This project"}
+        </button>
+
         <div className="ml-auto flex items-center gap-2">
-          {paused ? (
+          {!showAll && paused ? (
             <button
               onClick={() => resume(projectId)}
               className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 text-ink-950 transition-colors"
@@ -210,6 +236,7 @@ export default function TaskQueuePanel({ projectId }: Props) {
               Resume
             </button>
           ) : (
+            !showAll &&
             hasActive && (
               <button
                 onClick={() => pause(projectId)}
@@ -220,7 +247,7 @@ export default function TaskQueuePanel({ projectId }: Props) {
               </button>
             )
           )}
-          {hasFinished && (
+          {!showAll && hasFinished && (
             <button
               onClick={() => clearFinished(projectId)}
               className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl border border-ink-200 text-ink-600 hover:border-ink-300 hover:text-ink-900 transition-colors"
@@ -233,11 +260,12 @@ export default function TaskQueuePanel({ projectId }: Props) {
       </div>
 
       <ul className="flex flex-col gap-1.5">
-        {tasks.map((task) => (
+        {displayTasks.map((task) => (
           <TaskRow
             key={task.id}
             task={task}
-            onCancel={() => cancel(projectId, task.id)}
+            showProject={showAll}
+            onCancel={() => cancel(task.projectId ?? projectId, task.id)}
           />
         ))}
       </ul>

package/frontend/src/movie-app/stores/aiModelStore.ts

@@ -3,7 +3,7 @@ import { create } from "zustand";
 const API_BASE = `http://localhost:${(window as any).PORT}`;
 
 /** Models that have a dedicated download endpoint in the backend. */
-export type AiModelId = "z-image" | "flux" | "ltx" | "tts";
+export type AiModelId = "z-image" | "flux" | "ltx" | "tts" | "gemma";
 
 /** Tools whose "install" step must run before their models can be downloaded. */
 export type AiToolId = "mlxgen" | "mlx-vlm" | "hf-cli";
@@ -18,6 +18,7 @@ interface AiModelStore {
   fluxDownloaded: boolean | null;
   ltxDownloaded: boolean | null;
   ttsDownloaded: boolean | null;
+  gemmaDownloaded: boolean | null;
   // In-flight install/download (a model id or tool id)
   downloading: string | null;
   logs: string[];
@@ -69,6 +70,7 @@ const DOWNLOAD_ENDPOINTS: Record<AiModelId, string> = {
   flux: "/api/mlxgen/download-flux-model",
   ltx: "/api/hf/download-ltx",
   tts: "/api/hf/download-tts",
+  gemma: "/api/hf/download-mlx-vlm",
 };
 
 const TOOL_ENDPOINTS: Record<AiToolId, string> = {
@@ -85,6 +87,7 @@ export const useAiModelStore = create<AiModelStore>((set, get) => ({
   fluxDownloaded: null,
   ltxDownloaded: null,
   ttsDownloaded: null,
+  gemmaDownloaded: null,
   downloading: null,
   logs: [],
   error: null,
@@ -108,6 +111,7 @@ export const useAiModelStore = create<AiModelStore>((set, get) => ({
         hfInstalled: hf ? Boolean(hf.installed) : null,
         ltxDownloaded: hf ? Boolean(hf.ltxDownloaded) : null,
         ttsDownloaded: hf ? Boolean(hf.ttsDownloaded) : null,
+        gemmaDownloaded: hf ? Boolean(hf.mlxVlmDownloaded) : null,
       });
     } catch {
       // Leave status unknown (null) if the checks fail.

package/frontend/src/movie-app/stores/movieStudioStore.ts

@@ -30,6 +30,98 @@ function playDing3x() {
 /** Track task ids whose completed result has already been applied. */
 const appliedCompleted = new Set<string>();
 
+/** Track task ids already counted toward their batch's completion. */
+const countedBatch = new Set<string>();
+
+interface BatchTracker {
+  kind: "assets" | "sceneImages" | "videos" | "render";
+  total: number;
+  finished: number;
+}
+
+/** In-flight bulk render batches, keyed by the batchId stamped on each task. */
+const batches = new Map<string, BatchTracker>();
+
+function makeBatchId(): string {
+  try {
+    return crypto.randomUUID();
+  } catch {
+    return `b-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  }
+}
+
+/** Reset the aggregate spinner once a batch finishes and play a completion ding. */
+function finalizeBatch(batchId: string, set: (patch: any) => void): void {
+  const b = batches.get(batchId);
+  if (!b) return;
+  batches.delete(batchId);
+  switch (b.kind) {
+    case "assets":
+      set({
+        assetsRendering: false,
+        assetStatus: b.finished > 0 ? "Assets rendered" : null,
+      });
+      break;
+    case "sceneImages":
+      set({
+        sceneImagesRendering: false,
+        sceneImageStatus: b.finished > 0 ? "Scene images rendered" : null,
+        sceneImageProgress: null,
+      });
+      break;
+    case "videos":
+      set({
+        videosRendering: false,
+        videoStatus: b.finished > 0 ? "Videos rendered" : null,
+        videoProgress: null,
+      });
+      break;
+    case "render":
+      set({
+        rendering: false,
+        renderStatus: b.finished > 0 ? "Render complete" : null,
+        renderProgress: null,
+      });
+      break;
+  }
+  if (b.finished > 0) playDing3x();
+}
+
+/** Count one finished batch task; update progress and finalize when complete. */
+function finishBatch(batchId: string, set: (patch: any) => void): void {
+  const b = batches.get(batchId);
+  if (!b) return;
+  b.finished += 1;
+  if (b.finished < b.total) {
+    const status = `${b.finished}/${b.total} rendered`;
+    if (b.kind === "assets") set({ assetStatus: status });
+    else if (b.kind === "sceneImages") set({ sceneImageStatus: status });
+    else if (b.kind === "videos") set({ videoStatus: status });
+    else if (b.kind === "render") set({ renderStatus: status });
+    return;
+  }
+  finalizeBatch(batchId, set);
+}
+
+/** Surface a per-item failure and count it toward its batch on terminal status. */
+function handleBatchTerminal(task: QueueTask, set: (patch: any) => void): void {
+  const batchId = task.payload?.batchId;
+  if (!batchId) return;
+  if (countedBatch.has(task.id)) return;
+  countedBatch.add(task.id);
+
+  if (task.status === "failed") {
+    const b = batches.get(batchId);
+    if (b) {
+      if (b.kind === "assets") set({ assetsError: task.error });
+      else if (b.kind === "sceneImages") set({ sceneImagesError: task.error });
+      else if (b.kind === "videos") set({ videosError: task.error });
+      else if (b.kind === "render") set({ renderError: task.error });
+    }
+  }
+  finishBatch(batchId, set);
+}
+
 export interface MovieCharacter {
   slug: string;
   name: string;
@@ -116,6 +208,18 @@ function upsertSceneImage(
   return [...images, { slug, filename: "", url: "", updatedAt: 0, ...patch }];
 }
 
+function upsertRenderedScene(
+  scenes: RenderedScene[],
+  slug: string,
+  patch: Partial<RenderedScene>,
+): RenderedScene[] {
+  const existing = scenes.find((s) => s.slug === slug);
+  if (existing) {
+    return scenes.map((s) => (s.slug === slug ? { ...s, ...patch } : s));
+  }
+  return [...scenes, { slug, imageUrl: null, videoUrl: null, ...patch }];
+}
+
 /** Enqueue a generation task in the backend worker. */
 async function enqueueTask(
   projectId: string,
@@ -281,6 +385,30 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     const result = get().result;
     if (!result || get().rendering) return;
 
+    const assets: { kind: "character" | "place"; slug: string; prompt: string }[] = [
+      ...result.characters
+        .filter((c) => c.slug && String(c.imagePrompt || "").trim())
+        .map((c) => ({
+          kind: "character" as const,
+          slug: c.slug,
+          prompt: c.imagePrompt,
+        })),
+      ...result.places
+        .filter((p) => p.slug && String(p.imagePrompt || "").trim())
+        .map((p) => ({
+          kind: "place" as const,
+          slug: p.slug,
+          prompt: p.imagePrompt,
+        })),
+    ];
+    const scenes = result.scenes.filter((s) => s.slug);
+    // One queue task per output: each asset image, scene image, and scene video.
+    const total = assets.length + scenes.length * 2;
+    if (total === 0) return;
+
+    const batchId = makeBatchId();
+    batches.set(batchId, { kind: "render", total, finished: 0 });
+
     set({
       rendering: true,
       renderStatus: "Queued…",
@@ -288,26 +416,93 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
       renderError: null,
       renderProgress: null,
     });
-    const r = await enqueueTask(projectId, "render", "Render full movie", {
-      characters: result.characters,
-      places: result.places,
-      scenes: result.scenes,
-    });
-    if (!r.ok) set({ rendering: false, renderError: r.error });
+
+    // FIFO order matters: assets → scene images → scene videos.
+    for (const item of assets) {
+      const r = await enqueueTask(
+        projectId,
+        "render-asset",
+        `Render ${item.kind}: ${item.slug}`,
+        { ...item, batchId },
+      );
+      if (!r.ok) {
+        const b = batches.get(batchId);
+        if (b) b.total -= 1;
+      }
+    }
+    for (const scene of scenes) {
+      const r = await enqueueTask(
+        projectId,
+        "render-scene-image",
+        `Render scene image: ${scene.slug}`,
+        { scene, batchId },
+      );
+      if (!r.ok) {
+        const b = batches.get(batchId);
+        if (b) b.total -= 1;
+      }
+    }
+    for (const scene of scenes) {
+      const r = await enqueueTask(
+        projectId,
+        "render-video",
+        `Render video: ${scene.slug}`,
+        { scene, characters: result.characters, batchId },
+      );
+      if (!r.ok) {
+        const b = batches.get(batchId);
+        if (b) b.total -= 1;
+      }
+    }
+
+    // If nothing could be enqueued, reset the spinner immediately.
+    const b = batches.get(batchId);
+    if (b && b.total <= b.finished) finalizeBatch(batchId, set);
   },
 
   renderAssets: async (projectId) => {
     const result = get().result;
     if (!result || get().assetsRendering) return;
 
+    const items: { kind: "character" | "place"; slug: string; prompt: string }[] = [
+      ...result.characters
+        .filter((c) => c.slug && String(c.imagePrompt || "").trim())
+        .map((c) => ({
+          kind: "character" as const,
+          slug: c.slug,
+          prompt: c.imagePrompt,
+        })),
+      ...result.places
+        .filter((p) => p.slug && String(p.imagePrompt || "").trim())
+        .map((p) => ({
+          kind: "place" as const,
+          slug: p.slug,
+          prompt: p.imagePrompt,
+        })),
+    ];
+
+    if (items.length === 0) return;
+
+    const batchId = makeBatchId();
+    batches.set(batchId, { kind: "assets", total: items.length, finished: 0 });
+
     set({ assetsRendering: true, assetStatus: "Queued…", assetsError: null });
-    const r = await enqueueTask(
-      projectId,
-      "render-assets",
-      "Render character & place images",
-      { characters: result.characters, places: result.places },
-    );
-    if (!r.ok) set({ assetsRendering: false, assetsError: r.error });
+
+    for (const item of items) {
+      const r = await enqueueTask(
+        projectId,
+        "render-asset",
+        `Render ${item.kind}: ${item.slug}`,
+        { ...item, batchId },
+      );
+      if (!r.ok) {
+        const b = batches.get(batchId);
+        if (b) b.total -= 1;
+      }
+    }
+
+    const b = batches.get(batchId);
+    if (b && b.total <= b.finished) finalizeBatch(batchId, set);
   },
 
   regenerateAsset: async (projectId, kind, slug, prompt) => {
@@ -336,19 +531,34 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     const result = get().result;
     if (!result || get().videosRendering) return;
 
+    const scenes = result.scenes.filter((s) => s.slug);
+    if (scenes.length === 0) return;
+
+    const batchId = makeBatchId();
+    batches.set(batchId, { kind: "videos", total: scenes.length, finished: 0 });
+
     set({
       videosRendering: true,
       videoStatus: "Queued…",
       videosError: null,
       videoProgress: null,
     });
-    const r = await enqueueTask(
-      projectId,
-      "render-videos",
-      "Render scene videos",
-      { characters: result.characters, scenes: result.scenes },
-    );
-    if (!r.ok) set({ videosRendering: false, videosError: r.error });
+
+    for (const scene of scenes) {
+      const r = await enqueueTask(
+        projectId,
+        "render-video",
+        `Render video: ${scene.slug}`,
+        { scene, characters: result.characters, batchId },
+      );
+      if (!r.ok) {
+        const b = batches.get(batchId);
+        if (b) b.total -= 1;
+      }
+    }
+
+    const b = batches.get(batchId);
+    if (b && b.total <= b.finished) finalizeBatch(batchId, set);
   },
 
   regenerateVideo: async (projectId, slug) => {
@@ -379,19 +589,38 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     const result = get().result;
     if (!result || get().sceneImagesRendering) return;
 
+    const scenes = result.scenes.filter((s) => s.slug);
+    if (scenes.length === 0) return;
+
+    const batchId = makeBatchId();
+    batches.set(batchId, {
+      kind: "sceneImages",
+      total: scenes.length,
+      finished: 0,
+    });
+
     set({
       sceneImagesRendering: true,
       sceneImageStatus: "Queued…",
       sceneImagesError: null,
       sceneImageProgress: null,
     });
-    const r = await enqueueTask(
-      projectId,
-      "render-scene-images",
-      "Render scene images",
-      { scenes: result.scenes },
-    );
-    if (!r.ok) set({ sceneImagesRendering: false, sceneImagesError: r.error });
+
+    for (const scene of scenes) {
+      const r = await enqueueTask(
+        projectId,
+        "render-scene-image",
+        `Render scene image: ${scene.slug}`,
+        { scene, batchId },
+      );
+      if (!r.ok) {
+        const b = batches.get(batchId);
+        if (b) b.total -= 1;
+      }
+    }
+
+    const b = batches.get(batchId);
+    if (b && b.total <= b.finished) finalizeBatch(batchId, set);
   },
 
   regenerateSceneImage: async (projectId, slug) => {
@@ -466,6 +695,12 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
   applyQueueTask: (task) => {
     const isActive = task.status === "pending" || task.status === "running";
     const err = task.status === "failed" ? task.error : null;
+    const terminal =
+      task.status === "completed" ||
+      task.status === "failed" ||
+      task.status === "cancelled" ||
+      task.status === "paused";
+    const batchKind = batches.get(task.payload?.batchId)?.kind;
 
     switch (task.type) {
       case "generate": {
@@ -609,6 +844,69 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
         break;
       }
 
+      case "render-asset": {
+        const key = `${task.payload?.kind}:${task.payload?.slug}`;
+        if (task.status === "completed" && task.result) {
+          if (!appliedCompleted.has(task.id)) {
+            appliedCompleted.add(task.id);
+            const r = task.result;
+            set((s) => ({
+              assets: [
+                ...s.assets.filter((a) => `${a.kind}:${a.slug}` !== key),
+                r,
+              ],
+            }));
+            persistMovieStudioState();
+          }
+        }
+        if (terminal) handleBatchTerminal(task, set);
+        break;
+      }
+
+      case "render-scene-image": {
+        const slug = task.payload?.slug;
+        if (task.status === "completed" && task.result) {
+          if (!appliedCompleted.has(task.id)) {
+            appliedCompleted.add(task.id);
+            const r = task.result;
+            set((s) => ({
+              sceneImages: upsertSceneImage(s.sceneImages, slug, r),
+              renderedScenes:
+                batchKind === "render"
+                  ? upsertRenderedScene(s.renderedScenes, slug, {
+                      imageUrl: r.url,
+                    })
+                  : s.renderedScenes,
+            }));
+            persistMovieStudioState();
+          }
+        }
+        if (terminal) handleBatchTerminal(task, set);
+        break;
+      }
+
+      case "render-video": {
+        const slug = task.payload?.slug;
+        if (task.status === "completed" && task.result) {
+          if (!appliedCompleted.has(task.id)) {
+            appliedCompleted.add(task.id);
+            const r = task.result;
+            set((s) => ({
+              videos: upsertVideo(s.videos, slug, r),
+              renderedScenes:
+                batchKind === "render"
+                  ? upsertRenderedScene(s.renderedScenes, slug, {
+                      videoUrl: r.url,
+                    })
+                  : s.renderedScenes,
+            }));
+            persistMovieStudioState();
+          }
+        }
+        if (terminal) handleBatchTerminal(task, set);
+        break;
+      }
+
       case "regenerate-asset": {
         const key = `${task.payload?.kind}:${task.payload?.slug}`;
         if (task.status === "completed" && task.result) {
@@ -704,6 +1002,8 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
   },
 
   stop: () => {
+    batches.clear();
+    countedBatch.clear();
     fetch(`${API_BASE}/api/render/cancel`, { method: "POST" }).catch(() => {});
     const projectId = get().projectId;
     if (projectId) {
@@ -725,7 +1025,9 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
     });
   },
 
-  reset: () =>
+  reset: () => {
+    batches.clear();
+    countedBatch.clear();
     set({
       idea: "",
       generating: false,
@@ -756,7 +1058,8 @@ export const useMovieStudioStore = create<MovieStudioStore>((set, get) => ({
       sceneImagesError: null,
       sceneImageProgress: null,
       regeneratingSceneImages: [],
-    }),
+    });
+  },
 }));
 
 function persistMovieStudioState() {

package/frontend/src/movie-app/stores/queueStore.ts

@@ -8,6 +8,9 @@ export type QueueTaskType =
   | "render-assets"
   | "render-videos"
   | "render-scene-images"
+  | "render-asset"
+  | "render-scene-image"
+  | "render-video"
   | "regenerate-asset"
   | "regenerate-video"
   | "regenerate-scene-image";
@@ -33,6 +36,8 @@ export interface QueueTask {
   createdAt: number;
   startedAt: number | null;
   completedAt: number | null;
+  /** Only present in the "all projects" view — the task's owning project. */
+  projectId?: string;
 }
 
 interface QueueStore {
@@ -41,10 +46,14 @@ interface QueueStore {
   projectId: string | null;
   paused: boolean;
   logs: string;
+  showAll: boolean;
+  allTasks: QueueTask[];
   refresh: (projectId: string) => Promise<void>;
   refreshLogs: (projectId: string) => Promise<void>;
+  refreshAll: () => Promise<void>;
   startStreaming: (projectId: string) => void;
   stopStreaming: () => void;
+  setShowAll: (show: boolean) => void;
   cancel: (projectId: string, taskId: string) => Promise<void>;
   cancelActive: (projectId: string) => Promise<void>;
   clearFinished: (projectId: string) => Promise<void>;
@@ -53,6 +62,7 @@ interface QueueStore {
 }
 
 let eventSource: EventSource | null = null;
+let allEventSource: EventSource | null = null;
 
 /** Upsert a task into the list, replacing any existing entry with the same id. */
 function upsertTask(tasks: QueueTask[], task: QueueTask): QueueTask[] {
@@ -69,6 +79,8 @@ export const useQueueStore = create<QueueStore>((set, get) => ({
   projectId: null,
   paused: false,
   logs: "",
+  showAll: false,
+  allTasks: [],
 
   refresh: async (projectId) => {
     try {
@@ -101,6 +113,19 @@ export const useQueueStore = create<QueueStore>((set, get) => ({
     }
   },
 
+  refreshAll: async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/queue/all`);
+      if (!res.ok) return;
+      const data = (await res.json()) as { tasks: QueueTask[] };
+      const tasks = Array.isArray(data.tasks) ? data.tasks : [];
+      tasks.sort((a, b) => a.createdAt - b.createdAt);
+      set({ allTasks: tasks });
+    } catch {
+      // ignore fetch failures
+    }
+  },
+
   startStreaming: (projectId) => {
     get().stopStreaming();
     set({ projectId, loading: true });
@@ -144,7 +169,47 @@ export const useQueueStore = create<QueueStore>((set, get) => ({
       eventSource.close();
       eventSource = null;
     }
-    set({ tasks: [], projectId: null, loading: false, paused: false, logs: "" });
+    if (allEventSource) {
+      allEventSource.close();
+      allEventSource = null;
+    }
+    set({
+      tasks: [],
+      allTasks: [],
+      projectId: null,
+      loading: false,
+      paused: false,
+      logs: "",
+      showAll: false,
+    });
+  },
+
+  setShowAll: (show) => {
+    if (show) {
+      if (allEventSource) allEventSource.close();
+      set({ showAll: true });
+      void get().refreshAll();
+
+      const es = new EventSource(`${API_BASE}/api/events?projectId=*`);
+      allEventSource = es;
+      es.addEventListener("task", (event) => {
+        try {
+          const task = JSON.parse((event as MessageEvent).data) as QueueTask;
+          set((s) => ({ allTasks: upsertTask(s.allTasks, task) }));
+        } catch {
+          // ignore malformed events
+        }
+      });
+      es.onopen = () => {
+        void get().refreshAll();
+      };
+    } else {
+      if (allEventSource) {
+        allEventSource.close();
+        allEventSource = null;
+      }
+      set({ showAll: false, allTasks: [] });
+    }
   },
 
   cancel: async (projectId, taskId) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effectnode/media",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Start a full-stack media app: Vite + React + TypeScript frontend, Express backend with REST + WebSocket API",
   "license": "MIT",
   "author": "",
@@ -19,7 +19,7 @@
   "scripts": {
     "deploy": "npm run build; npm version minor; npm publish --access public",
     "build": "tsc && node -e \"const fs=require('node:fs');fs.cpSync('src/backend/movie-backend/agent/prompt','dist/backend/movie-backend/agent/prompt',{recursive:true})\"",
-    "dev": "concurrently -k -n backend,frontend -c blue,green \"bun run dev:backend\" \"bun run dev:frontend\"; open http://localhsot:5177",
+    "dev": "open http://localhost:5177; concurrently -k -n backend,frontend -c blue,green \"bun run dev:backend\" \"bun run dev:frontend\";",
     "dev:backend": "nodemon",
     "dev:frontend": "vite",
     "start": "node bin/effectnode-media"