feat: add Nemoflix Studio UI, Docker server, and Space config

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:22-slim
+
+WORKDIR /app
+
+COPY package.json ./
+COPY server.js ./
+COPY studio ./studio
+
+WORKDIR /app/studio
+RUN npm ci
+RUN npm run build
+
+WORKDIR /app
+RUN npm install --omit=dev
+
+ENV PORT=7860
+EXPOSE 7860
+CMD ["node", "server.js"]

README.md

@@ -1,12 +1,43 @@
 ---
 title: NemoFlix
-emoji: 👀
-colorFrom: pink
-colorTo: pink
+emoji: 🎬
+colorFrom: red
+colorTo: yellow
 sdk: docker
-pinned: false
-license: apache-2.0
+app_port: 7860
+pinned: true
 short_description: Train a LoRA, generate images, animate into AI films.
+tags:
+  - amd
+  - amd-hackathon-2026
+  - comfyui
+  - video-generation
+  - lora
+  - ai-video
+  - image-generation
+  - flux
+  - wan
+  - agent-native
+  - self-hosted
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Nemoflix
+
+**Nemoflix** is an open, self-hostable, API-first media studio for AI agents.
+
+Upload a few photos, train a Flux.2 LoRA of yourself or any character (~90 min on AMD MI300X), then generate photorealistic images and animate them into short films with Wan 2.2 I2V. One consistent identity across every frame.
+
+## What it does
+
+- **Train** — Fine-tune a Flux.2 LoRA from 15–25 reference photos (ROCm, no CUDA required)
+- **Generate** — Photorealistic images with your trained identity in any scene
+- **Animate** — Image-to-video with Wan 2.2 I2V (14B, fp8 scaled, LightX2V 2-step)
+- **Direct** — Assemble scenes, shots, and final cuts in a project timeline
+
+
+## Required Space secrets
+
+| Secret | Description |
+| --- | --- |
+| `NEMOFLIX_API_URL` | URL of your Nemoflix backend API (e.g. `http://your-vps:8190`) |

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "nemoflix-amd-space",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@fastify/static": "latest",
+    "fastify": "latest",
+    "http-proxy-middleware": "latest"
+  }
+}

server.js

@@ -0,0 +1,64 @@
+import Fastify from "fastify";
+import fastifyStatic from "@fastify/static";
+import { createProxyMiddleware } from "http-proxy-middleware";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import fs from "node:fs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const port = Number(process.env.PORT || 7860);
+
+function normalizeApiUrl(value) {
+  let url = String(value || "").trim().replace(/\/+$/, "");
+  if (!url) return "";
+  if (!/^https?:\/\//i.test(url)) url = `http://${url}`;
+  const parsed = new URL(url);
+  if (!parsed.port) parsed.port = "8190";
+  return parsed.toString().replace(/\/+$/, "");
+}
+
+const apiTarget = normalizeApiUrl(process.env.NEMOFLIX_API_URL || process.env.NEMOFLIX_AMD_API_URL || "");
+const app = Fastify({ logger: true });
+const distDir = path.join(__dirname, "studio", "dist");
+
+const backendProxy = apiTarget
+  ? createProxyMiddleware({
+      target: apiTarget,
+      changeOrigin: true,
+      ws: true,
+      logLevel: "warn",
+      timeout: 30_000,
+      proxyTimeout: 30_000,
+      on: {
+        error: (err, _req, res) => {
+          app.log.error({ err, apiTarget }, "backend proxy error");
+          if (!res.headersSent) {
+            res.writeHead(502, { "Content-Type": "application/json" });
+          }
+          res.end(JSON.stringify({ detail: `Backend unavailable: ${err.message}` }));
+        },
+      },
+    })
+  : null;
+
+app.addHook("onRequest", async (request, reply) => {
+  if (request.url.startsWith("/api/") || request.url === "/api" || request.url.startsWith("/media/") || request.url === "/media") {
+    if (!backendProxy) {
+      return reply.code(503).send({ detail: "NEMOFLIX_API_URL is not configured" });
+    }
+    await new Promise((resolve, reject) => backendProxy(request.raw, reply.raw, (err) => err ? reject(err) : resolve()));
+    reply.hijack();
+  }
+});
+
+app.get("/space-health", async () => ({ ok: true, apiConfigured: Boolean(apiTarget), apiTarget: apiTarget || null }));
+
+await app.register(fastifyStatic, { root: distDir, prefix: "/" });
+
+app.setNotFoundHandler((request, reply) => {
+  const index = path.join(distDir, "index.html");
+  if (fs.existsSync(index)) return reply.type("text/html").send(fs.createReadStream(index));
+  return reply.code(404).send("Studio build not found");
+});
+
+app.listen({ host: "0.0.0.0", port });

studio/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

studio/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nemoflix</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23000'/%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' font-size='60'%3E%F0%9F%8E%AC%3C/text%3E%3C/svg%3E" />
+  </head>
+  <body class="bg-black text-white">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

studio/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "nemoflix-studio",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.4.1",
+    "@fontsource-variable/geist": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.15.0",
+    "shadcn": "^4.7.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1"
+  }
+}

studio/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

studio/src/App.tsx

@@ -0,0 +1,527 @@
+import { createContext, useContext, useState, useEffect, useCallback, useRef } from "react";
+import { BrowserRouter, Routes, Route, Outlet, useMatch, useNavigate, useParams, Link } from "react-router-dom";
+import { Menu, Sparkles, UserCircle } from "lucide-react";
+import { StudioView } from "./components/GalleryView";
+import { CharacterProfileView } from "./components/CharacterProfileView";
+import { ProjectsView } from "./components/ProjectsView";
+import { LoraTrainingPage } from "./components/LoraTrainingPage";
+import { ProjectDetailView } from "./components/ProjectDetailView";
+import { ProjectFilmsView } from "./components/ProjectFilmsView";
+import { AppSidebar } from "./components/sidebar/AppSidebar";
+import LandingPage from "./LandingPage";
+import type { SidebarTab } from "./components/sidebar/AppSidebar";
+import type { JobItem, LoraCheckpoint, LoraTrainingStatus, MediaItem, Project, Scene, Shot, ProjectPhase, ProjectModeData } from "./types";
+
+async function fetchJson<T>(url: string, timeoutMs = 5000): Promise<T> {
+  const controller = new AbortController();
+  const id = window.setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    if (!response.ok) throw new Error(`${url} returned ${response.status}`);
+    return await response.json();
+  } finally {
+    window.clearTimeout(id);
+  }
+}
+
+/* ── App Context ── */
+interface AppContextType {
+  items: MediaItem[];
+  jobs: JobItem[];
+  loading: boolean;
+  hasLoadedOnce: boolean;
+  error: string | null;
+  selected: string | null;
+  setSelected: (url: string | null) => void;
+  sidebarOpen: boolean;
+  setSidebarOpen: (v: boolean) => void;
+  activeSidebarTab: SidebarTab;
+  setActiveSidebarTab: (tab: SidebarTab) => void;
+  training: LoraTrainingStatus | null;
+  checkpoints: LoraCheckpoint[];
+  trainingJobs: any[];
+  deleteItem: (item: MediaItem) => Promise<void>;
+  load: () => Promise<void>;
+  projectData: { project: Project; scenes: Scene[]; shots: Shot[] } | null;
+  selectedSceneId: string | null;
+  selectedShotId: string | null;
+  setSelectedSceneId: (id: string | null) => void;
+  setSelectedShotId: (id: string | null) => void;
+  loadProject: (id: string) => Promise<void>;
+  addScene: () => Promise<void>;
+  deleteScene: (sceneId: string) => Promise<void>;
+  deleteShot: (shotId: string) => Promise<void>;
+}
+
+const AppContext = createContext<AppContextType>(null!);
+export function useApp() {
+  return useContext(AppContext);
+}
+
+/* ── Layout Shell: header + sidebar + <Outlet /> ── */
+function Shell() {
+  const ctx = useApp();
+  const navigate = useNavigate();
+  const projectMatch = useMatch("/studio/projects/:projectId");
+  const loraMatch = useMatch("/studio/lora-training");
+
+  // Load project when entering a project-detail route
+  const lastProjectId = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    const pid = projectMatch?.params.projectId;
+    if (pid && pid !== lastProjectId.current) {
+      lastProjectId.current = pid;
+      ctx.loadProject(pid);
+      ctx.setActiveSidebarTab("projects");
+    }
+  }, [projectMatch?.params.projectId]);
+
+  // Keep "Characters & LoRA Training" sidebar tab highlighted when on /lora-training
+  useEffect(() => {
+    if (loraMatch) ctx.setActiveSidebarTab("characters");
+  }, [loraMatch]);
+
+  const videoCount = ctx.items.filter(
+    (item) => item.type === "video" || item.url.endsWith(".mp4") || item.url.endsWith(".webm")
+  ).length;
+  const imageCount = ctx.items.length - videoCount;
+
+  const projectMode: ProjectModeData | undefined =
+    projectMatch && ctx.projectData
+      ? {
+          project: ctx.projectData.project,
+          scenes: ctx.projectData.scenes,
+          shots: ctx.projectData.shots,
+          selectedSceneId: ctx.selectedSceneId,
+          selectedShotId: ctx.selectedShotId,
+          phase: "outline",
+          onSelectScene: (id) => {
+            ctx.setSelectedSceneId(id);
+            ctx.setSelectedShotId(null);
+          },
+          onSelectShot: ctx.setSelectedShotId,
+          onBack: () => {
+            ctx.setSelectedShotId(null);
+            navigate("/studio/projects");
+          },
+          onRefresh: () => {
+            const pid = projectMatch?.params.projectId;
+            return pid ? ctx.loadProject(pid) : Promise.resolve();
+          },
+          onAddScene: ctx.addScene,
+          onDeleteScene: ctx.deleteScene,
+          onDeleteShot: ctx.deleteShot,
+        }
+      : undefined;
+
+  return (
+    <div className="min-h-screen bg-black text-white flex flex-col">
+      <header className="h-14 border-b border-gray-800/60 bg-black/90 backdrop-blur-xl flex items-center justify-between px-5 sticky top-0 z-40">
+        <div className="flex items-center gap-3 min-w-0">
+          {!ctx.sidebarOpen && (
+            <button
+              onClick={() => ctx.setSidebarOpen(true)}
+              className="w-9 h-9 rounded-xl border border-gray-800 text-gray-500 hover:text-gray-200 hover:border-gray-600 transition"
+              title="Open tools"
+            >
+              <Menu className="w-4 h-4 mx-auto" />
+            </button>
+          )}
+          <button
+            onClick={() => {
+              navigate("/studio");
+              ctx.setActiveSidebarTab("generate");
+            }}
+            className="flex items-center gap-3 min-w-0 hover:opacity-80 transition"
+            title="Studio home"
+          >
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-500 via-fuchsia-500 to-amber-400 flex items-center justify-center shadow-lg shadow-rose-500/20 ring-1 ring-white/10">
+              <Sparkles className="w-4 h-4 text-white" />
+            </div>
+            <div className="min-w-0 hidden sm:block">
+              <h1 className="text-sm font-bold tracking-tight">Nemoflix Studio</h1>
+              <p className="text-[10px] text-rose-400/60 tracking-wide">AMD MI300X</p>
+            </div>
+          </button>
+          <Link to="/" className="hidden sm:inline-flex items-center text-[11px] text-gray-600 hover:text-gray-400 transition ml-1" title="Back to home">
+            ← Home
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-2 text-[11px]">
+          <div className="hidden md:flex items-center gap-1.5">
+            {ctx.jobs.length > 0 && (
+              <span className="inline-flex items-center gap-1.5 rounded-full border border-amber-800/40 bg-amber-950/30 px-2.5 py-1 text-amber-400 font-medium">
+                <span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
+                {ctx.jobs.length} generating
+              </span>
+            )}
+            <span className="rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">
+              {ctx.items.length} media
+            </span>
+            <span className="hidden lg:inline rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">
+              {imageCount} images
+            </span>
+            <span className="hidden lg:inline rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">
+              {videoCount} videos
+            </span>
+          </div>
+
+          <div className="group relative">
+            <button className="flex items-center gap-2 rounded-xl border border-rose-500/30 bg-rose-950/20 px-2.5 py-1.5 text-rose-100 hover:border-rose-400/50 transition">
+              <UserCircle className="w-4 h-4" />
+              <span className="hidden sm:inline font-medium">Demo Account</span>
+              <span className="rounded-full bg-amber-500/15 border border-amber-500/30 px-1.5 py-0.5 text-[9px] uppercase tracking-wider text-amber-300">
+                Hackathon
+              </span>
+            </button>
+            <div className="pointer-events-none absolute right-0 top-full z-50 mt-2 w-72 rounded-2xl border border-gray-800 bg-gray-950/95 p-4 shadow-2xl shadow-black/60 opacity-0 translate-y-1 transition group-hover:opacity-100 group-hover:translate-y-0">
+              <p className="text-xs font-semibold text-gray-200">Demo workspace</p>
+              <p className="text-[11px] text-gray-500 mt-1 leading-relaxed">
+                This hackathon build uses a sample owner dataset to demonstrate character LoRA training,
+                generation, and media management. Authentication is intentionally mocked for the demo.
+              </p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="flex flex-1 min-h-0">
+        {ctx.sidebarOpen && (
+          <AppSidebar
+            activeTab={ctx.activeSidebarTab}
+            onTabChange={(tab) => {
+              ctx.setActiveSidebarTab(tab);
+              if (tab === "generate") navigate("/studio");
+              if (tab === "projects") navigate("/studio/projects");
+              if (tab === "characters") navigate("/studio/lora-training");
+            }}
+            onClose={() => ctx.setSidebarOpen(false)}
+            checkpoints={ctx.checkpoints}
+            onQueued={ctx.load}
+            onSelectCharacter={(id) => {
+              ctx.setActiveSidebarTab("characters");
+              navigate(`/studio/characters/${id}`);
+            }}
+            projectMode={projectMode}
+          />
+        )}
+
+        <main className="flex-1 min-w-0 overflow-y-auto bg-gradient-to-b from-transparent via-transparent to-gray-950/30">
+          <Outlet />
+        </main>
+      </div>
+
+      {/* Lightbox */}
+      {ctx.selected && (
+        <div
+          className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center p-4"
+          onClick={() => ctx.setSelected(null)}
+        >
+          <div className="max-w-full max-h-full" onClick={(e) => e.stopPropagation()}>
+            {ctx.selected.endsWith(".mp4") || ctx.selected.endsWith(".webm") ? (
+              <video src={ctx.selected} controls autoPlay className="max-w-full max-h-[90vh] rounded" />
+            ) : (
+              <img src={ctx.selected} alt="" className="max-w-full max-h-[90vh] rounded" />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Route wrappers that connect URL params to existing components ── */
+function StudioRoute() {
+  const ctx = useApp();
+  return (
+    <StudioView
+      items={ctx.items}
+      jobs={ctx.jobs}
+      loading={ctx.loading && !ctx.hasLoadedOnce && !(ctx.jobs.length > 0 || ctx.items.length > 0)}
+      error={ctx.error}
+      onOpen={ctx.setSelected}
+      onDelete={ctx.deleteItem}
+      onOpenProjects={() => window.location.href = "/studio/projects"}
+    />
+  );
+}
+
+function ProjectsRoute() {
+  const navigate = useNavigate();
+  return <ProjectsView onOpenProject={(id) => navigate(`/studio/projects/${id}`)} />;
+}
+
+function ProjectRoute() {
+  const { projectId } = useParams<{ projectId: string }>();
+  const ctx = useApp();
+
+  useEffect(() => {
+    if (projectId) ctx.loadProject(projectId);
+  }, [projectId]);
+
+  const navigate = useNavigate();
+
+  if (!ctx.projectData) {
+    return <div className="p-8 text-center text-gray-500">Loading project…</div>;
+  }
+
+  return (
+    <ProjectDetailView
+      project={ctx.projectData.project}
+      scenes={ctx.projectData.scenes}
+      shots={ctx.projectData.shots}
+      jobs={ctx.jobs}
+      selectedSceneId={ctx.selectedSceneId}
+      selectedShotId={ctx.selectedShotId}
+      onSelectScene={(id) => {
+        ctx.setSelectedSceneId(id);
+        ctx.setSelectedShotId(null);
+      }}
+      onSelectShot={ctx.setSelectedShotId}
+      onRefresh={() => (projectId ? ctx.loadProject(projectId) : Promise.resolve())}
+      onBack={() => {
+        ctx.setSelectedShotId(null);
+        navigate("/studio/projects");
+      }}
+      onDeleteScene={ctx.deleteScene}
+      onDeleteShot={ctx.deleteShot}
+    />
+  );
+}
+
+function ProjectFilmsRoute() {
+  const { projectId } = useParams<{ projectId: string }>();
+  const navigate = useNavigate();
+  if (!projectId) return null;
+  return (
+    <ProjectFilmsView
+      projectId={projectId}
+      onBack={() => navigate(`/studio/projects/${projectId}`)}
+    />
+  );
+}
+
+function CharacterRoute() {
+  const { characterId } = useParams<{ characterId: string }>();
+  const { items, setSelected, deleteItem, setActiveSidebarTab, setSidebarOpen } = useApp();
+  const navigate = useNavigate();
+  if (!characterId) return null;
+  return (
+    <CharacterProfileView
+      characterId={characterId}
+      items={items}
+      onOpen={setSelected}
+      onDelete={deleteItem}
+      onGenerate={() => {
+        setSidebarOpen(true);
+        setActiveSidebarTab("generate");
+        navigate(`/studio?character=${characterId}`);
+      }}
+    />
+  );
+}
+
+/* ── App Root ── */
+export default function App() {
+  const [items, setItems] = useState<MediaItem[]>([]);
+  const [jobs, setJobs] = useState<JobItem[]>([]);
+  const [training, setTraining] = useState<LoraTrainingStatus | null>(null);
+  const [checkpoints, setCheckpoints] = useState<LoraCheckpoint[]>([]);
+  const [trainingJobs, setTrainingJobs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [activeSidebarTab, setActiveSidebarTab] = useState<SidebarTab>("generate");
+  const [projectData, setProjectData] = useState<{
+    project: Project;
+    scenes: Scene[];
+    shots: Shot[];
+  } | null>(null);
+  const [selectedSceneId, setSelectedSceneId] = useState<string | null>(null);
+  const [selectedShotId, setSelectedShotId] = useState<string | null>(null);
+  const [projectId, setProjectId] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setError(null);
+      const listing = await fetchJson<{ images?: MediaItem[] }>("/api/listing", 8000);
+      setItems(listing.images || []);
+      if (!hasLoadedOnce) setHasLoadedOnce(true);
+    } catch (e) {
+      console.error("Failed to load gallery", e);
+      setError(e instanceof Error ? e.message : "Failed to load gallery");
+    } finally {
+      setLoading(false);
+    }
+
+    const [jobsResult, trainingResult, checkpointsResult, trainingJobsResult] = await Promise.allSettled([
+      fetchJson<{ jobs?: JobItem[] }>("/api/jobs", 3500),
+      fetchJson<LoraTrainingStatus & { ok?: boolean }>("/api/lora-training/status", 3500),
+      fetchJson<{ checkpoints?: LoraCheckpoint[] }>("/api/lora-training/checkpoints", 3500),
+      fetchJson<{ jobs?: any[] }>("/api/lora-training/jobs", 3500),
+    ]);
+
+    if (jobsResult.status === "fulfilled") setJobs(jobsResult.value.jobs || []);
+    if (trainingResult.status === "fulfilled")
+      setTraining(trainingResult.value.ok ? trainingResult.value : null);
+    if (checkpointsResult.status === "fulfilled")
+      setCheckpoints(checkpointsResult.value.checkpoints || []);
+    if (trainingJobsResult.status === "fulfilled")
+      setTrainingJobs(trainingJobsResult.value.jobs || []);
+  }, []);
+
+  // Stable polling — uses refs to avoid dependency churn
+  const loadRef = useRef(load);
+  loadRef.current = load;
+
+  useEffect(() => {
+    loadRef.current();
+    const id = window.setInterval(() => loadRef.current(), 5000);
+
+    const es = new EventSource("/api/events");
+    es.addEventListener("job_update", () => loadRef.current());
+    es.onerror = () => {};
+
+    return () => {
+      window.clearInterval(id);
+      es.close();
+    };
+  }, []);
+
+  const loadProject = useCallback(async (id: string) => {
+    setProjectId(id);
+    try {
+      const response = await fetch(`/api/projects/${id}`);
+      if (!response.ok) throw new Error(`Project fetch failed: ${response.status}`);
+      const data = await response.json();
+      const scenes: Scene[] = (data.scenes || []).slice().sort(
+        (a: Scene, b: Scene) => a.scene_number - b.scene_number
+      );
+      const shots: Shot[] = (data.shots || []).slice().sort(
+        (a: Shot, b: Shot) => a.shot_number - b.shot_number
+      );
+      setProjectData({ project: data.project, scenes, shots });
+      setSelectedSceneId((current) => {
+        if (current && scenes.some((scene) => scene.id === current)) return current;
+        return scenes.length > 0 ? scenes[0].id : null;
+      });
+    } catch (e) {
+      console.error("Failed to load project", e);
+    }
+  }, []);
+
+  const addScene = useCallback(async () => {
+    if (!projectId || !projectData) return;
+    const next =
+      projectData.scenes.length > 0
+        ? Math.max(...projectData.scenes.map((scene) => scene.scene_number)) + 1
+        : 1;
+    try {
+      const response = await fetch(`/api/projects/${projectId}/scenes`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ scene_number: next, heading: `SCENE ${next}` }),
+      });
+      if (!response.ok) throw new Error(`Add scene failed: ${response.status}`);
+      const created = await response.json();
+      await loadProject(projectId);
+      setSelectedSceneId(created.id);
+      setSelectedShotId(null);
+    } catch (e) {
+      console.error("Failed to add scene", e);
+    }
+  }, [projectId, projectData, loadProject]);
+
+  const deleteScene = useCallback(async (sceneId: string) => {
+    if (!projectId) return;
+    if (!confirm("Delete this scene and all its shots?")) return;
+    await fetch(`/api/projects/${projectId}/scenes/${sceneId}`, { method: "DELETE" });
+    if (selectedSceneId === sceneId) {
+      setSelectedSceneId("");
+      setSelectedShotId(null);
+    }
+    loadProject(projectId);
+  }, [projectId, selectedSceneId, loadProject]);
+
+  const deleteShot = useCallback(async (shotId: string) => {
+    if (!projectId || !projectData) return;
+    if (!confirm("Delete this shot?")) return;
+    const shot = projectData.shots.find((s) => s.id === shotId);
+    if (!shot) return;
+    await fetch(`/api/projects/${projectId}/scenes/${shot.scene_id}/shots/${shotId}`, { method: "DELETE" });
+    if (selectedShotId === shotId) setSelectedShotId(null);
+    loadProject(projectId);
+  }, [projectId, projectData, selectedShotId, loadProject]);
+
+  const deleteItem = useCallback(
+    async (item: MediaItem) => {
+      const filename = item.filename || item.url.replace(/^\/media\//, "");
+      const response = await fetch("/api/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ files: [filename] }),
+      });
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data?.detail || `Failed to delete ${filename}`);
+      }
+      setItems((current) =>
+        current.filter(
+          (candidate) =>
+            (candidate.filename || candidate.url) !== (item.filename || item.url)
+        )
+      );
+      if (selected === item.url) setSelected(null);
+    },
+    [selected]
+  );
+
+  const ctxValue: AppContextType = {
+    items,
+    jobs,
+    loading,
+    hasLoadedOnce,
+    error,
+    selected,
+    setSelected,
+    sidebarOpen,
+    setSidebarOpen,
+    activeSidebarTab,
+    setActiveSidebarTab,
+    training,
+    checkpoints,
+    trainingJobs,
+    deleteItem,
+    load,
+    projectData,
+    selectedSceneId,
+    selectedShotId,
+    setSelectedSceneId,
+    setSelectedShotId,
+    loadProject,
+    addScene,
+    deleteScene,
+    deleteShot,
+  };
+
+  return (
+    <BrowserRouter>
+      <AppContext.Provider value={ctxValue}>
+        <Routes>
+          <Route path="/" element={<LandingPage />} />
+          <Route path="/studio" element={<Shell />}>
+            <Route index element={<StudioRoute />} />
+            <Route path="projects" element={<ProjectsRoute />} />
+            <Route path="projects/:projectId" element={<ProjectRoute />} />
+            <Route path="projects/:projectId/films" element={<ProjectFilmsRoute />} />
+            <Route path="characters/:characterId" element={<CharacterRoute />} />
+            <Route path="lora-training" element={<LoraTrainingPage />} />
+          </Route>
+        </Routes>
+      </AppContext.Provider>
+    </BrowserRouter>
+  );
+}

studio/src/LandingPage.tsx

@@ -0,0 +1,560 @@
+import { Link } from "react-router-dom";
+import {
+  ArrowRight,
+  Bot,
+  Cpu,
+  Film,
+  Lock,
+  Play,
+  Server,
+  Sparkles,
+  Users,
+  Zap,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const btnPrimary = "inline-flex items-center gap-2 rounded-xl bg-rose-600 hover:bg-rose-500 px-6 py-2.5 text-sm font-semibold text-white transition shadow-lg shadow-rose-500/20";
+const btnOutline = "inline-flex items-center gap-2 rounded-xl border border-gray-700 hover:border-gray-500 px-6 py-2.5 text-sm font-semibold text-gray-300 hover:text-white transition";
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}
+
+/* ── Navbar ── */
+function Navbar() {
+  return (
+    <nav className="fixed top-0 inset-x-0 z-50 h-14 border-b border-gray-800/60 bg-black/90 backdrop-blur-xl flex items-center px-6">
+      <div className="max-w-6xl mx-auto w-full flex items-center justify-between">
+        <div className="flex items-center gap-2.5">
+          <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-rose-500 via-fuchsia-500 to-amber-400 flex items-center justify-center">
+            <Sparkles className="w-3.5 h-3.5 text-white" />
+          </div>
+          <span className="font-bold text-sm tracking-tight text-white">
+            <span className="text-rose-400">Nemo</span>flix
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs text-gray-500 hover:text-gray-200 transition"
+          >
+            <GitHubIcon className="w-3.5 h-3.5" />
+            <span className="hidden sm:inline">GitHub</span>
+          </a>
+          <Link
+            to="/studio"
+            className="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 hover:bg-rose-500 px-3 py-1.5 text-xs font-semibold text-white transition"
+          >
+            Launch Studio <ArrowRight className="w-3.5 h-3.5" />
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+/* ── Hero ── */
+function Hero() {
+  return (
+    <section className="min-h-screen flex items-center justify-center pt-14 px-6">
+      <div className="max-w-4xl text-center">
+        <Badge
+          className="mb-8 gap-1.5 border-amber-500/30 bg-amber-500/5 text-amber-300 h-7 px-3"
+          variant="outline"
+        >
+          <Cpu className="w-3.5 h-3.5" />
+          AMD MI300X · 192 GB VRAM · Open Source
+        </Badge>
+
+        <h1 className="text-5xl md:text-7xl font-bold leading-tight tracking-tight mb-6 text-white">
+          Put Yourself
+          <br />
+          <span className="bg-gradient-to-r from-rose-400 via-fuchsia-400 to-amber-400 bg-clip-text text-transparent">
+            In the Film.
+          </span>
+        </h1>
+
+        {/* Hero video — phone-sized preview right under headline */}
+        <div className="mx-auto max-w-xs sm:max-w-sm md:max-w-md mb-10">
+          <div className="rounded-[1.5rem] overflow-hidden border border-gray-800/60 bg-gray-950 shadow-2xl shadow-rose-500/10 ring-1 ring-white/5 aspect-square">
+            <video
+              src="/demos/iron-man-flight.mp4"
+              controls
+              poster=""
+              className="w-full h-full object-cover"
+              preload="metadata"
+              autoPlay
+              muted
+              loop
+              playsInline
+            />
+          </div>
+          <div className="flex items-center justify-center gap-2 mt-2">
+            <span className="text-[10px] text-gray-600 uppercase tracking-wider">Wan 2.2 I2V · AMD MI300X</span>
+          </div>
+        </div>
+
+        <p className="text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+          Upload a few photos. Build a model of yourself. Generate photorealistic
+          images in any scene you can imagine. Animate them into short films.
+          <span className="text-white font-medium"> Make the impossible, possible.</span>
+        </p>
+
+        <div className="flex flex-col items-center gap-3">
+          <Link to="/studio" className={btnPrimary}>
+            <Sparkles className="w-4 h-4" />
+            Launch Studio
+          </Link>
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-gray-500 hover:text-gray-300 transition"
+          >
+            View on GitHub →
+          </a>
+        </div>
+
+        <p className="mt-8 text-xs text-gray-700">
+          Self-hosted · Agent-native · MIT License
+        </p>
+      </div>
+    </section>
+  );
+}
+
+/* ── Three pillars ── */
+function Pillars() {
+  const items = [
+    {
+      icon: Cpu,
+      color: "text-amber-400",
+      border: "border-amber-500/20",
+      bg: "from-amber-950/20",
+      label: "AMD MI300X",
+      body: "Fine-tune Flux.2 LoRAs on 192 GB VRAM via ROCm. ~90 minutes to a consistent character. No CUDA.",
+    },
+    {
+      icon: Bot,
+      color: "text-rose-400",
+      border: "border-rose-500/20",
+      bg: "from-rose-950/20",
+      label: "Agent Skill File",
+      body: "Agent reading this? Pull the repo and read SKILL.md. Every endpoint, every workflow, every parameter. One file. No SDK.",
+    },
+    {
+      icon: Film,
+      color: "text-fuchsia-400",
+      border: "border-fuchsia-500/20",
+      bg: "from-fuchsia-950/20",
+      label: "Image + Video",
+      body: "Photorealistic Flux.2 images and Wan 2.2 I2V animation on the same pipeline. One character, every format.",
+    },
+  ];
+
+  return (
+    <section className="py-20 px-6 border-y border-gray-800/40">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-white mb-3">The Stack</h2>
+          <p className="text-gray-500">GPU, pipeline, and agent integration in one system.</p>
+        </div>
+        <div className="grid md:grid-cols-3 gap-5">
+        {items.map((item) => (
+          <Card
+            key={item.label}
+            className={`border ${item.border} bg-gradient-to-b ${item.bg} to-gray-950/60 ring-0`}
+          >
+            <CardHeader>
+              <item.icon className={`w-5 h-5 ${item.color} mb-1`} />
+              <CardTitle className="text-white text-sm">{item.label}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className="text-gray-400 leading-relaxed">
+                {item.body}
+              </CardDescription>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  </section>
+  );
+}
+
+/* ── Feature Film Showcase ── */
+function FeatureFilmShowcase() {
+  return (
+    <section className="py-16 px-6 border-y border-gray-800/40 bg-gradient-to-b from-black via-gray-950/30 to-black">
+      <div className="max-w-6xl mx-auto">
+        {/* Section headline */}
+        <div className="text-center mb-12">
+          <Badge className="mb-4 gap-1.5 border-fuchsia-500/20 bg-fuchsia-500/5 text-fuchsia-300 h-7 px-3" variant="outline">
+            <Film className="w-3.5 h-3.5" />
+            Your Model. Your Film. Minutes.
+          </Badge>
+          <h2 className="text-4xl md:text-5xl font-bold text-white mb-5">
+            You and Your Agent.
+            <br />
+            <span className="bg-gradient-to-r from-rose-400 via-fuchsia-400 to-amber-400 bg-clip-text text-transparent">
+              Co-Directing a Film.
+            </span>
+          </h2>
+          <p className="text-lg text-gray-500 max-w-2xl mx-auto leading-relaxed">
+            This is what your film looks like. Once your model is trained from your photos,
+            you and your agent can assemble scenes, shots, and final cuts in minutes —
+            not the hours or days it used to take. You bring the vision. Your agent handles the rest.
+          </p>
+        </div>
+
+        {/* Film title card */}
+        <div className="max-w-2xl mx-auto mb-6 text-center">
+          <div className="flex items-center justify-center gap-2 mb-3">
+            <Badge className="gap-1 border-fuchsia-500/20 bg-fuchsia-500/5 text-fuchsia-300 text-[10px]" variant="outline">
+              <Film className="w-3 h-3" /> Full Project Render
+            </Badge>
+            <span className="text-xs text-gray-500">Multi-shot · assembled · AMD MI300X</span>
+          </div>
+          <p className="text-[10px] uppercase tracking-[0.2em] text-amber-400 font-medium mb-1">Official Selection — AMD Developer Hackathon 2026</p>
+          <h3 className="text-xl font-bold text-white">Nemoflix: A Debut Feature</h3>
+          <p className="text-xs text-gray-500 mt-0.5">LabLab.ai · World Premiere</p>
+        </div>
+
+        {/* The Film */}
+        <div className="max-w-2xl mx-auto">
+          <div className="rounded-2xl overflow-hidden border border-gray-800/60 bg-gray-950 shadow-2xl shadow-fuchsia-500/5 aspect-square">
+            <video
+              src="/demos/feature-film.mp4"
+              controls
+              poster=""
+              className="w-full h-full object-cover"
+              preload="metadata"
+            />
+          </div>
+
+          <div className="mt-6 flex justify-center">
+            <Link
+              to="/studio/projects"
+              className="inline-flex items-center gap-1.5 rounded-lg border border-gray-700 hover:border-rose-500/50 px-4 py-2 text-xs font-medium text-gray-300 hover:text-white transition"
+            >
+              Try It Yourself <ArrowRight className="w-3.5 h-3.5" />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── How It Works ── */
+function HowItWorks() {
+  const steps = [
+    {
+      n: "01",
+      color: "text-amber-400",
+      ring: "ring-amber-500/30",
+      title: "Train Your Character LoRA",
+      body: "Upload 15–25 reference photos. Nemoflix fine-tunes a Flux.2 LoRA on AMD MI300X — 192 GB VRAM, ROCm, no CUDA. ~90 minutes to a character that looks consistent in every single frame.",
+      aside: (
+        <Card className="border-amber-500/20 bg-gradient-to-b from-amber-950/20 to-gray-950/60 ring-0">
+          <CardHeader>
+            <Badge className="w-fit gap-1.5 border-amber-500/20 bg-amber-500/5 text-amber-400" variant="outline">
+              <Cpu className="w-3 h-3" /> AMD MI300X
+            </Badge>
+            <CardTitle className="text-white text-sm mt-2">Training Config</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1.5 font-mono text-xs text-gray-400">
+              {[
+                ["model", "flux.2-dev"],
+                ["vram", "192 GB"],
+                ["runtime", "~90 min"],
+                ["steps", "1000"],
+                ["framework", "ROCm 7.2"],
+              ].map(([k, v]) => (
+                <p key={k}>
+                  <span className="text-gray-600 inline-block w-20">{k}</span>
+                  {v}
+                </p>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      ),
+    },
+    {
+      n: "02",
+      color: "text-rose-400",
+      ring: "ring-rose-500/30",
+      title: "Generate Images via API",
+      body: "Your AI agent calls the API with a prompt and character ID. Nemoflix builds the ComfyUI workflow, routes to the right GPU node, queues the job, and returns a prompt ID. Photorealistic results in seconds.",
+      aside: (
+        <Card className="border-gray-800 bg-gray-950 ring-0">
+          <CardHeader>
+            <CardTitle className="text-xs text-gray-500 font-mono font-normal">API call</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 font-mono text-xs">
+            <p className="text-gray-500">
+              POST <span className="text-rose-400">/api/image/generate</span>
+            </p>
+            <div className="rounded-lg bg-black/60 p-3 space-y-1 text-gray-400">
+              <p className="text-gray-600">{"{"}</p>
+              <p className="pl-3">
+                <span className="text-amber-300">"character"</span>:{" "}
+                <span className="text-emerald-300">"rigo"</span>,
+              </p>
+              <p className="pl-3">
+                <span className="text-amber-300">"prompt"</span>:{" "}
+                <span className="text-emerald-300">"walking through a rainy street"</span>
+              </p>
+              <p className="text-gray-600">{"}"}</p>
+            </div>
+            <p className="text-emerald-400/70 pt-1">← prompt_id: a3f9c1d2</p>
+          </CardContent>
+        </Card>
+      ),
+    },
+    {
+      n: "03",
+      color: "text-fuchsia-400",
+      ring: "ring-fuchsia-500/30",
+      title: "Animate to Video",
+      body: "One more API call and Wan 2.2 I2V animates the image into a short video clip. The same character, moving. String clips together into a full scene. Your agent builds the whole sequence autonomously.",
+      aside: (
+        <Card className="border-fuchsia-500/20 bg-gradient-to-b from-fuchsia-950/20 to-gray-950/60 ring-0">
+          <CardHeader>
+            <Badge className="w-fit gap-1.5 border-fuchsia-500/20 bg-fuchsia-500/5 text-fuchsia-400" variant="outline">
+              Wan 2.2 I2V
+            </Badge>
+            <CardTitle className="text-white text-sm mt-2">Video Config</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1.5 font-mono text-xs text-gray-400">
+              {[
+                ["model", "wan2.2-i2v-14b"],
+                ["input", "still image"],
+                ["output", "5s video clip"],
+                ["cfg", "3.5 · steps 20"],
+              ].map(([k, v]) => (
+                <p key={k}>
+                  <span className="text-gray-600 inline-block w-20">{k}</span>
+                  {v}
+                </p>
+              ))}
+            </div>
+            <p className="text-[11px] text-fuchsia-300/50 mt-4">
+              Same character. Real motion. Not a filter.
+            </p>
+          </CardContent>
+        </Card>
+      ),
+    },
+    {
+      n: "04",
+      color: "text-emerald-400",
+      ring: "ring-emerald-500/30",
+      title: "Build Films Scene by Scene",
+      body: "Projects hold Scenes, Scenes hold Shots — each with its own generated image and video. When every shot is animated, hit render and Nemoflix stitches the whole thing together into one finished video. Your agent wrote, directed, and rendered a short film, start to finish.",
+      aside: (
+        <Card className="border-emerald-500/20 bg-gradient-to-b from-emerald-950/20 to-gray-950/60 ring-0">
+          <CardHeader>
+            <Badge className="w-fit gap-1.5 border-emerald-500/20 bg-emerald-500/5 text-emerald-400" variant="outline">
+              <Film className="w-3 h-3" /> Projects
+            </Badge>
+            <CardTitle className="text-white text-sm mt-2">Film Structure</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="font-mono text-xs space-y-2">
+              <div className="text-emerald-300/80">
+                Project <span className="text-emerald-500">"Neon Nights"</span>
+              </div>
+              <div className="pl-4 border-l border-gray-800 space-y-1.5">
+                <div className="text-gray-400">
+                  Scene 1 <span className="text-gray-600">"Alley Chase"</span>
+                </div>
+                <div className="pl-4 text-gray-600 space-y-0.5">
+                  <div>Shot 1A → image + video</div>
+                  <div>Shot 1B → image + video</div>
+                </div>
+                <div className="text-gray-400 pt-1">
+                  Scene 2 <span className="text-gray-600">"Rooftop"</span>
+                </div>
+              </div>
+            </div>
+            <p className="text-[11px] text-emerald-300/50 mt-4">
+              One API. Train → generate → animate → render.
+            </p>
+          </CardContent>
+        </Card>
+      ),
+    },
+  ];
+
+  return (
+    <section className="py-28 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-20">
+          <h2 className="text-4xl font-bold text-white mb-4">How It Works</h2>
+          <p className="text-gray-500 text-lg">
+            From reference photos to a finished film in four steps.
+          </p>
+        </div>
+
+        <div className="space-y-24">
+          {steps.map((step, i) => (
+            <div key={step.n} className="grid md:grid-cols-2 gap-12 items-center">
+              <div className={i % 2 === 1 ? "md:order-2" : ""}>
+                <div
+                  className={`w-10 h-10 rounded-full ring-1 ${step.ring} bg-gray-950 flex items-center justify-center mb-4`}
+                >
+                  <span className={`text-xs font-bold font-mono ${step.color}`}>
+                    {step.n}
+                  </span>
+                </div>
+                <h3 className="text-3xl font-bold text-white mb-4">{step.title}</h3>
+                <p className="text-gray-400 text-lg leading-relaxed">{step.body}</p>
+              </div>
+              <div className={i % 2 === 1 ? "md:order-1" : ""}>{step.aside}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── Features grid ── */
+function Features() {
+  const features = [
+    { icon: Cpu, color: "text-amber-400", title: "LoRA Training on AMD", body: "Fine-tune Flux.2 on AMD MI300X via ROCm. No CUDA required. Monitor job progress live in the Studio." },
+    { icon: Server, color: "text-rose-400", title: "Self-Hosted", body: "Your hardware, your models, your data. No cloud dependency, no rate limits, no data leaving your machine." },
+    { icon: Bot, color: "text-violet-400", title: "Agent API", body: "REST API any agent can call. Characters, images, video, training jobs — all simple HTTP endpoints." },
+    { icon: Users, color: "text-fuchsia-400", title: "Character Registry", body: "Register characters with trigger words and LoRA weights. Every generation references them consistently." },
+    { icon: Zap, color: "text-emerald-400", title: "Multi-GPU Routing", body: "Images and video automatically routed to the right node. Add more GPUs without changing any code." },
+    { icon: Lock, color: "text-blue-400", title: "Open Source", body: "MIT license. Audit the code, fork it, extend it. No black boxes." },
+  ];
+
+  return (
+    <section className="py-28 px-6 border-t border-gray-800/40">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold text-white mb-4">What's Inside</h2>
+          <p className="text-gray-500 text-lg">
+            Everything you need to run a visual AI studio.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-5">
+          {features.map((f) => (
+            <Card
+              key={f.title}
+              className="border-gray-800/60 bg-gray-950/50 ring-0 hover:border-gray-700 transition-colors"
+            >
+              <CardHeader>
+                <f.icon className={`w-5 h-5 ${f.color}`} />
+                <CardTitle className="text-white text-sm mt-3">{f.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-gray-500 leading-relaxed">
+                  {f.body}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── CTA ── */
+function CTA() {
+  return (
+    <section className="py-32 px-6">
+      <div className="max-w-2xl mx-auto text-center">
+        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-rose-500 via-fuchsia-500 to-amber-400 flex items-center justify-center mx-auto mb-8 shadow-2xl shadow-rose-500/20">
+          <Sparkles className="w-7 h-7 text-white" />
+        </div>
+        <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+          Ready to Run It?
+        </h2>
+        <p className="text-xl text-gray-400 mb-10 leading-relaxed">
+          Clone the repo, point it at your GPU nodes, and your agent is
+          generating in minutes.
+        </p>
+        <div className="flex items-center justify-center gap-3 flex-wrap">
+          <Link to="/studio" className={btnPrimary}>
+            <Sparkles className="w-4 h-4" />
+            Launch Studio
+          </Link>
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={btnOutline}
+          >
+            <GitHubIcon className="w-4 h-4" />
+            View on GitHub
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── Footer ── */
+function Footer() {
+  return (
+    <footer className="border-t border-gray-800/40 py-10 px-6">
+      <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+        <span className="text-sm font-bold">
+          <span className="text-rose-400">Nemo</span>
+          <span className="text-gray-500">flix</span>
+        </span>
+        <div className="flex items-center gap-6 text-xs text-gray-600">
+          <a
+            href="https://github.com/ortegarod/nemoflix"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-gray-400 transition"
+          >
+            GitHub
+          </a>
+          <Link to="/studio" className="hover:text-gray-400 transition">
+            Studio
+          </Link>
+          <span>© {new Date().getFullYear()} Nemoflix · MIT License</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <Navbar />
+      <Hero />
+      <Pillars />
+      <FeatureFilmShowcase />
+      <HowItWorks />
+      <Features />
+      <CTA />
+      <Footer />
+    </div>
+  );
+}

studio/src/api.ts

@@ -0,0 +1,37 @@
+const API_BASE = "";
+
+async function apiFetch(path: string, init?: RequestInit) {
+  const res = await fetch(`${API_BASE}${path}`, init);
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`${res.status}: ${text}`);
+  }
+  return res.json();
+}
+
+export async function getListing(): Promise<{ images: any[]; total: number }> {
+  return apiFetch("/api/listing");
+}
+
+export async function generateVideo(params: {
+  image: string;
+  prompt?: string;
+  width?: number;
+  height?: number;
+  length?: number;
+  fps?: number;
+}): Promise<{ ok: boolean; prompt_id: string; mode: string }> {
+  return apiFetch("/api/video/generate", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      mode: "i2v",
+      image: params.image,
+      prompt: params.prompt || "",
+      width: params.width || 640,
+      height: params.height || 640,
+      length: params.length || 81,
+      fps: params.fps || 16,
+    }),
+  });
+}

studio/src/components/CharacterProfileView.tsx

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Cpu, Edit3, Film, Image, Sparkles, UserRound } from "lucide-react";
+import { MediaTile } from "./MediaTile";
+import type { MediaItem } from "../types";
+
+interface LoraEntry {
+  name: string;
+  strength: number;
+  workflow?: string;
+  base_model?: string;
+}
+
+interface Checkpoint {
+  name: string;
+  step: number | null;
+  size_bytes: number;
+  modified_at: string;
+}
+
+interface CheckpointsResponse {
+  job_name: string;
+  checkpoints: Checkpoint[];
+  count: number;
+  updated_at: string;
+}
+
+interface CharacterRecord {
+  id: string;
+  name: string;
+  kind: string | null;
+  trigger: string | null;
+  description: string | null;
+  source_images: string[];
+  loras: LoraEntry[];
+  defaults: Record<string, unknown>;
+}
+
+interface CharacterProfileViewProps {
+  characterId: string;
+  items: MediaItem[];
+  onOpen: (url: string) => void;
+  onDelete: (item: MediaItem) => Promise<void> | void;
+  onGenerate: () => void;
+}
+
+function resolveImageUrl(img: string): string {
+  return img.startsWith("/") ? img : `/media/${img}`;
+}
+
+function isVideo(item: MediaItem) {
+  return item.type === "video" || item.url.endsWith(".mp4") || item.url.endsWith(".webm");
+}
+
+async function fetchJson<T>(url: string): Promise<T> {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`${url} returned ${response.status}`);
+  return await response.json();
+}
+
+export function CharacterProfileView({ characterId, items, onOpen, onDelete, onGenerate }: CharacterProfileViewProps) {
+  const [character, setCharacter] = useState<CharacterRecord | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tab, setTab] = useState<"images" | "videos">("images");
+  const [checkpoints, setCheckpoints] = useState<CheckpointsResponse | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setError(null);
+      const data = await fetchJson<{ character: CharacterRecord }>(`/api/characters/${characterId}`);
+      const char: CharacterRecord = data.character || (data as unknown as CharacterRecord);
+      setCharacter(char);
+      if (char.loras.length > 0) {
+        try {
+          const ckpts = await fetchJson<CheckpointsResponse>("/api/lora-training/checkpoints");
+          setCheckpoints(ckpts);
+        } catch {
+          // checkpoints optional — don't block character render
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load character");
+    } finally {
+      setLoading(false);
+    }
+  }, [characterId]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const related = useMemo(() => {
+    if (!character) return [];
+    const terms = [character.id, character.name, character.trigger].filter(Boolean).map((value) => String(value).toLowerCase());
+    return items.filter((item) => {
+      const haystack = [item.name, item.filename, item.prompt].join(" ").toLowerCase();
+      return terms.some((term) => haystack.includes(term));
+    });
+  }, [character, items]);
+
+  const fallbackItems = related.length > 0 ? related : items;
+  const images = fallbackItems.filter((item) => !isVideo(item));
+  const videos = fallbackItems.filter(isVideo);
+  const shown = tab === "images" ? images : videos;
+
+  if (loading) return <div className="p-6 text-gray-500">Loading character...</div>;
+  if (error) return <div className="p-6 text-red-400">{error}</div>;
+  if (!character) return null;
+
+  const avatarUrl = character.source_images[0] ? resolveImageUrl(character.source_images[0]) : null;
+  const loraCount = character.loras.length;
+
+  return (
+    <div className="p-5 lg:p-7 space-y-6">
+      <section className="rounded-3xl border border-gray-800/60 bg-gradient-to-b from-gray-900/70 to-gray-950/40 overflow-hidden">
+        <div className="relative h-44 bg-gradient-to-br from-rose-950/50 via-fuchsia-950/20 to-amber-950/20">
+          {avatarUrl && <img src={avatarUrl} alt="" className="absolute inset-0 w-full h-full object-cover opacity-35 blur-sm scale-105" />}
+          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
+        </div>
+
+        <div className="px-5 lg:px-7 pb-6 -mt-16 relative">
+          <div className="flex flex-col lg:flex-row lg:items-end gap-5">
+            <div className="w-32 h-32 rounded-3xl overflow-hidden ring-4 ring-black bg-gray-900 shadow-2xl flex-shrink-0">
+              {avatarUrl ? (
+                <img src={avatarUrl} alt={character.name} className="w-full h-full object-cover" />
+              ) : (
+                <div className="w-full h-full bg-gradient-to-br from-rose-500 to-amber-400 flex items-center justify-center">
+                  <UserRound className="w-12 h-12 text-white" />
+                </div>
+              )}
+            </div>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex flex-wrap items-center gap-2 mb-2">
+                {character.kind && <span className="rounded-full border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 text-[10px] uppercase tracking-wider text-blue-300">{character.kind}</span>}
+                {character.trigger && <span className="rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-0.5 text-[10px] uppercase tracking-wider text-rose-300">trigger: {character.trigger}</span>}
+              </div>
+              <h1 className="text-3xl font-bold tracking-tight">{character.name}</h1>
+              <p className="text-sm text-gray-500 mt-2 max-w-3xl">
+                {character.description || "Reusable character identity for agent-generated images and videos."}
+              </p>
+            </div>
+
+            <div className="flex gap-2">
+              <button onClick={onGenerate} className="rounded-xl bg-rose-600 hover:bg-rose-500 px-4 py-2 text-sm font-semibold transition flex items-center gap-2">
+                <Sparkles className="w-4 h-4" /> Generate
+              </button>
+              <button className="rounded-xl border border-gray-700 text-gray-400 px-4 py-2 text-sm font-semibold transition flex items-center gap-2 cursor-not-allowed opacity-60" title="Profile editing is coming next">
+                <Edit3 className="w-4 h-4" /> Edit
+              </button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 gap-3 mt-6 max-w-xl">
+            <div className="rounded-2xl border border-gray-800 bg-black/30 p-3">
+              <p className="text-xs text-gray-600">Images</p>
+              <p className="text-xl font-bold text-gray-100">{images.length}</p>
+            </div>
+            <div className="rounded-2xl border border-gray-800 bg-black/30 p-3">
+              <p className="text-xs text-gray-600">Videos</p>
+              <p className="text-xl font-bold text-gray-100">{videos.length}</p>
+            </div>
+            <div className="rounded-2xl border border-gray-800 bg-black/30 p-3">
+              <p className="text-xs text-gray-600">LoRAs</p>
+              <p className="text-xl font-bold text-gray-100">{loraCount}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {character.loras.length > 0 && (
+        <section className="rounded-3xl border border-gray-800/60 bg-gray-950/40 p-5 space-y-4">
+          <div className="flex items-center gap-2">
+            <Cpu className="w-4 h-4 text-violet-400" />
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-300">Model</h2>
+          </div>
+
+          <div className="space-y-3">
+            {character.loras.map((lora, i) => {
+              const shortName = lora.name.split("/").pop() ?? lora.name;
+              return (
+                <div key={i} className="rounded-2xl border border-gray-800/60 bg-black/30 p-4 space-y-3">
+                  <p className="text-xs font-mono text-violet-300 break-all">{shortName}</p>
+                  <div className="grid grid-cols-3 gap-3">
+                    {lora.base_model && (
+                      <div>
+                        <p className="text-[10px] uppercase tracking-wider text-gray-600">Base</p>
+                        <p className="text-xs text-gray-300 mt-0.5 font-mono">{lora.base_model}</p>
+                      </div>
+                    )}
+                    {lora.workflow && (
+                      <div>
+                        <p className="text-[10px] uppercase tracking-wider text-gray-600">Workflow</p>
+                        <p className="text-xs text-gray-300 mt-0.5 font-mono">{lora.workflow}</p>
+                      </div>
+                    )}
+                    <div>
+                      <p className="text-[10px] uppercase tracking-wider text-gray-600">Strength</p>
+                      <p className="text-xs text-gray-300 mt-0.5 font-mono">{lora.strength}</p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {checkpoints && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <p className="text-[10px] uppercase tracking-wider text-gray-600">Training Checkpoints — <span className="font-mono">{checkpoints.job_name}</span></p>
+                <p className="text-[10px] text-gray-700">
+                  checked {new Date(checkpoints.updated_at).toLocaleString()}
+                </p>
+              </div>
+              <div className="rounded-xl border border-gray-800/60 overflow-hidden">
+                <table className="w-full text-xs">
+                  <thead>
+                    <tr className="border-b border-gray-800/60 bg-black/20">
+                      <th className="text-left px-3 py-2 text-[10px] uppercase tracking-wider text-gray-600 font-medium">Step</th>
+                      <th className="text-left px-3 py-2 text-[10px] uppercase tracking-wider text-gray-600 font-medium">File</th>
+                      <th className="text-right px-3 py-2 text-[10px] uppercase tracking-wider text-gray-600 font-medium">Size</th>
+                      <th className="text-right px-3 py-2 text-[10px] uppercase tracking-wider text-gray-600 font-medium">Date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {checkpoints.checkpoints.map((ck, i) => (
+                      <tr key={i} className="border-b border-gray-800/40 last:border-0 hover:bg-gray-900/30">
+                        <td className="px-3 py-2 font-mono text-violet-300">{ck.step ?? "final"}</td>
+                        <td className="px-3 py-2 text-gray-400 font-mono text-[11px] break-all">{ck.name}</td>
+                        <td className="px-3 py-2 text-gray-400 text-right font-mono">{(ck.size_bytes / 1024 / 1024).toFixed(0)} MB</td>
+                        <td className="px-3 py-2 text-gray-500 text-right whitespace-nowrap">{new Date(ck.modified_at).toLocaleDateString()}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </section>
+      )}
+
+      <section className="space-y-4">
+        <div className="flex items-center gap-2 border-b border-gray-800/60">
+          <button onClick={() => setTab("images")} className={`px-4 py-3 text-sm font-medium border-b-2 transition flex items-center gap-2 ${tab === "images" ? "text-white border-rose-500" : "text-gray-600 border-transparent hover:text-gray-300"}`}>
+            <Image className="w-4 h-4" /> Images
+          </button>
+          <button onClick={() => setTab("videos")} className={`px-4 py-3 text-sm font-medium border-b-2 transition flex items-center gap-2 ${tab === "videos" ? "text-white border-rose-500" : "text-gray-600 border-transparent hover:text-gray-300"}`}>
+            <Film className="w-4 h-4" /> Videos
+          </button>
+        </div>
+
+        {shown.length === 0 ? (
+          <div className="rounded-2xl border border-gray-800/60 bg-gray-900/20 p-10 text-center text-sm text-gray-500">
+            No {tab} found for this character yet.
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {shown.map((item) => (
+              <MediaTile key={item.filename || item.url} item={item} onOpen={() => onOpen(item.url)} onDelete={onDelete} />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

studio/src/components/GalleryView.tsx

@@ -0,0 +1,156 @@
+import { useMemo, useState, useCallback } from "react";
+import { ArrowRight, Film, Image, Search, SlidersHorizontal, Video } from "lucide-react";
+import { JobCard } from "./JobCard";
+import { MediaTile } from "./MediaTile";
+import { generateVideo } from "../api";
+import type { JobItem, MediaItem } from "../types";
+
+type Filter = "all" | "images" | "videos";
+
+interface StudioViewProps {
+  items: MediaItem[];
+  jobs: JobItem[];
+  loading: boolean;
+  error: string | null;
+  onOpen: (url: string) => void;
+  onDelete: (item: MediaItem) => Promise<void> | void;
+  onOpenProjects?: () => void;
+}
+
+function isVideo(item: MediaItem) {
+  return item.type === "video" || item.url.endsWith(".mp4") || item.url.endsWith(".webm");
+}
+
+export function StudioView({ items, jobs, loading, error, onOpen, onDelete, onOpenProjects }: StudioViewProps) {
+  const [filter, setFilter] = useState<Filter>("all");
+  const [query, setQuery] = useState("");
+  const [generatingVideo, setGeneratingVideo] = useState<Set<string>>(new Set());
+
+  const handleGenerateVideo = useCallback(async (item: MediaItem, motionPrompt: string) => {
+    const key = item.filename || item.url;
+    setGeneratingVideo((prev) => new Set(prev).add(key));
+    try {
+      await generateVideo({
+        image: item.filename || item.url.split("/").pop() || "",
+        prompt: motionPrompt || undefined,
+      });
+    } catch (err) {
+      console.error("I2V failed:", err);
+    } finally {
+      setGeneratingVideo((prev) => {
+        const next = new Set(prev);
+        next.delete(key);
+        return next;
+      });
+    }
+  }, []);
+
+  const imageCount = items.filter((item) => !isVideo(item)).length;
+  const videoCount = items.length - imageCount;
+
+  const visibleItems = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return items.filter((item) => {
+      if (filter === "images" && isVideo(item)) return false;
+      if (filter === "videos" && !isVideo(item)) return false;
+      if (!q) return true;
+      return [item.name, item.filename, item.prompt].some((value) => String(value || "").toLowerCase().includes(q));
+    });
+  }, [filter, items, query]);
+
+  return (
+    <div className="p-5 lg:p-7 space-y-6">
+      <section className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p className="text-xs uppercase tracking-[0.22em] text-rose-400/70">Workspace</p>
+          <h1 className="text-2xl font-bold tracking-tight mt-1">Studio</h1>
+          <p className="text-sm text-gray-500 mt-2">Your gallery for quick image and video generation — freeform, no structure. Generate, browse, iterate.</p>
+        </div>
+        <div className="grid grid-cols-3 gap-2 text-xs min-w-[260px]">
+          <div className="rounded-xl border border-gray-800 bg-gray-900/40 px-3 py-2">
+            <p className="text-gray-600">Total</p>
+            <p className="text-lg font-semibold text-gray-200">{items.length}</p>
+          </div>
+          <div className="rounded-xl border border-gray-800 bg-gray-900/40 px-3 py-2">
+            <p className="text-gray-600">Images</p>
+            <p className="text-lg font-semibold text-gray-200">{imageCount}</p>
+          </div>
+          <div className="rounded-xl border border-gray-800 bg-gray-900/40 px-3 py-2">
+            <p className="text-gray-600">Videos</p>
+            <p className="text-lg font-semibold text-gray-200">{videoCount}</p>
+          </div>
+        </div>
+      </section>
+
+      <button
+        onClick={onOpenProjects}
+        className="group w-full rounded-2xl border border-violet-600/30 bg-gradient-to-r from-violet-950/30 via-indigo-950/20 to-gray-900/30 hover:border-violet-500/50 hover:from-violet-950/50 transition flex items-center gap-4 px-5 py-4 text-left"
+      >
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-violet-500/20 ring-1 ring-white/10 flex-shrink-0">
+          <Film className="w-5 h-5 text-white" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-semibold text-violet-100">Got a specific idea? Turn it into a Project.</p>
+          <p className="text-xs text-gray-400 mt-1 leading-relaxed">
+            Studio is great for quick shots. <span className="text-gray-300">Projects</span> are for finished pieces — outline scenes, plan shots, generate, animate, and stitch together a real video.
+          </p>
+        </div>
+        <ArrowRight className="w-5 h-5 text-violet-400 group-hover:translate-x-1 transition flex-shrink-0" />
+      </button>
+
+      <section className="rounded-2xl border border-gray-800/60 bg-gray-950/50 p-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex gap-2">
+          {[
+            ["all", "All", SlidersHorizontal],
+            ["images", "Images", Image],
+            ["videos", "Videos", Video],
+          ].map(([id, label, Icon]) => (
+            <button
+              key={id as string}
+              onClick={() => setFilter(id as Filter)}
+              className={`inline-flex items-center gap-2 rounded-xl px-3 py-2 text-xs font-medium transition ${
+                filter === id ? "bg-rose-600 text-white" : "bg-gray-900 text-gray-500 hover:text-gray-200"
+              }`}
+            >
+              <Icon className="w-3.5 h-3.5" />
+              {label as string}
+            </button>
+          ))}
+        </div>
+        <label className="relative w-full lg:w-80">
+          <Search className="w-4 h-4 text-gray-600 absolute left-3 top-1/2 -translate-y-1/2" />
+          <input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search studio"
+            className="w-full rounded-xl bg-black/40 border border-gray-800 pl-9 pr-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-rose-600 placeholder:text-gray-700"
+          />
+        </label>
+      </section>
+
+      {loading && items.length === 0 && jobs.length === 0 ? (
+        <p className="text-gray-500">Loading...</p>
+      ) : error ? (
+        <div className="rounded-lg border border-red-900/60 bg-red-950/20 p-4 text-sm text-red-300">{error}</div>
+      ) : jobs.length === 0 && visibleItems.length === 0 ? (
+        <div className="rounded-2xl border border-gray-800/60 bg-gray-900/20 p-10 text-center">
+          <Image className="w-8 h-8 text-gray-700 mx-auto mb-3" />
+          <p className="text-sm text-gray-500">No media found.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+          {jobs.map((job) => <JobCard key={job.prompt_id} job={job} />)}
+          {visibleItems.map((item) => (
+            <MediaTile
+              key={item.filename || item.url}
+              item={item}
+              onOpen={() => onOpen(item.url)}
+              onDelete={onDelete}
+              onGenerateVideo={handleGenerateVideo}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

studio/src/components/JobCard.tsx

@@ -0,0 +1,80 @@
+import type { JobItem } from "../types";
+
+interface JobCardProps {
+  job: JobItem;
+}
+
+function getProgress(job: JobItem): number | null {
+  if (typeof job.progress_percent === "number") return job.progress_percent;
+  if (job.step_max && job.step_max > 0) {
+    return Math.round(((job.step_value || 0) / job.step_max) * 100);
+  }
+  return null;
+}
+
+function statusLabel(status: string) {
+  if (status === "pending") return "Queued";
+  if (status === "running") return "Generating";
+  if (status === "failed") return "Failed";
+  return status;
+}
+
+export function JobCard({ job }: JobCardProps) {
+  const progress = getProgress(job);
+  const isRunning = job.status === "running";
+  const isFailed = job.status === "failed";
+
+  return (
+    <div className={`
+      rounded-xl overflow-hidden border aspect-video relative p-4 flex flex-col justify-between
+      transition-all duration-300
+      ${isFailed
+        ? "border-red-800/40 bg-red-950/10"
+        : "border-amber-800/30 bg-gray-950/80 hover:border-amber-700/60 hover:shadow-lg hover:shadow-amber-900/10"
+      }
+    `}>
+      {/* Ambient gradient */}
+      <div className={`absolute inset-0 bg-gradient-to-br from-amber-500/5 via-transparent to-rose-600/5 transition-opacity ${isFailed ? "opacity-20" : "opacity-100"}`} />
+
+      {/* Status header */}
+      <div className={`relative flex items-center justify-between gap-2 text-xs font-medium uppercase tracking-wide ${isFailed ? "text-red-400" : "text-amber-400"}`}>
+        <span className="flex items-center gap-2">
+          {isRunning && <span className="inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse" />}
+          {statusLabel(job.status)}
+          {job.queue_position ? ` · Queue ${job.queue_position}` : ""}
+        </span>
+        {progress !== null && !isFailed && <span className="tabular-nums">{progress}%</span>}
+      </div>
+
+      {/* Content */}
+      <div className="relative space-y-2.5">
+        <p className="text-sm font-medium line-clamp-2 text-gray-200 leading-relaxed">
+          {job.prompt || "Generation job"}
+        </p>
+
+        <div className="space-y-1.5">
+          <div className={`h-1.5 rounded-full overflow-hidden ${isFailed ? "bg-red-950" : "bg-gray-800"}`}>
+            <div
+              className={`h-full rounded-full transition-all duration-700 ${isFailed ? "bg-red-500/60" : "bg-gradient-to-r from-amber-400 to-amber-300"}`}
+              style={{ width: `${isFailed ? 100 : Math.max(3, progress ?? 3)}%` }}
+            />
+          </div>
+
+          <p className="text-[11px] text-gray-500 truncate">
+            {job.current_node
+              ? `Node: ${job.current_node}`
+              : isRunning
+                ? "Starting..."
+                : job.status === "pending"
+                  ? "Waiting for GPU..."
+                  : ""}
+            {job.step_max ? ` · step ${job.step_value || 0}/${job.step_max}` : ""}
+          </p>
+        </div>
+      </div>
+
+      {/* ID */}
+      <p className="relative text-[10px] text-gray-600 font-mono truncate">{job.prompt_id}</p>
+    </div>
+  );
+}

studio/src/components/LoraTrainingPage.tsx

@@ -0,0 +1,603 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { ChevronDown, Database, FolderPlus, X } from "lucide-react";
+import { useApp } from "../App";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface Dataset {
+  id: string;
+  name: string;
+  description: string | null;
+  image_count: number | null;
+  created_at: string;
+}
+
+interface Sample {
+  name: string;
+  step: number | null;
+}
+
+interface Checkpoint {
+  name: string;
+  step: number | null;
+  path: string;
+  size_bytes: number;
+  modified_at: string;
+}
+
+function statusVariant(status: string): "default" | "secondary" | "destructive" | "outline" {
+  if (status === "training" || status === "running") return "default";
+  if (status === "completed") return "secondary";
+  if (status === "failed") return "destructive";
+  return "outline";
+}
+
+function formatDate(iso: string | undefined | null): string {
+  if (!iso) return "--";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+export function LoraTrainingPage() {
+  const ctx = useApp();
+  const jobs = ctx.trainingJobs ?? [];
+  const live = ctx.training;
+
+  // Datasets
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [datasetsLoading, setDatasetsLoading] = useState(true);
+  const [showAddDataset, setShowAddDataset] = useState(false);
+  const [addDatasetId, setAddDatasetId] = useState("");
+  const [addDatasetName, setAddDatasetName] = useState("");
+  const [addDatasetDesc, setAddDatasetDesc] = useState("");
+  const [addDatasetCount, setAddDatasetCount] = useState("");
+  const [addDatasetSubmitting, setAddDatasetSubmitting] = useState(false);
+  const [addDatasetError, setAddDatasetError] = useState<string | null>(null);
+
+  const loadDatasets = useCallback(async () => {
+    try {
+      const res = await fetch("/api/lora-training/datasets");
+      const data = await res.json();
+      setDatasets(data.datasets || []);
+    } catch {
+      // ignore — non-critical
+    } finally {
+      setDatasetsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadDatasets(); }, [loadDatasets]);
+
+  const submitAddDataset = async () => {
+    setAddDatasetError(null);
+    setAddDatasetSubmitting(true);
+    try {
+      const res = await fetch("/api/lora-training/datasets", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          id: addDatasetId,
+          name: addDatasetName || addDatasetId,
+          description: addDatasetDesc || undefined,
+          image_count: addDatasetCount ? parseInt(addDatasetCount, 10) : undefined,
+        }),
+      });
+      if (!res.ok) {
+        const d = await res.json();
+        throw new Error(d.detail || "Failed to register dataset");
+      }
+      setAddDatasetId("");
+      setAddDatasetName("");
+      setAddDatasetDesc("");
+      setAddDatasetCount("");
+      setShowAddDataset(false);
+      loadDatasets();
+    } catch (e: any) {
+      setAddDatasetError(e.message);
+    } finally {
+      setAddDatasetSubmitting(false);
+    }
+  };
+
+  const mergedJobs = jobs.map((job: any) => {
+    // Merge live ai-toolkit data into the matching job row so we get real
+    // current_step / total_steps / loss / info. ai-toolkit uses "running"
+    // while the DB-backed job list may say "training".
+    if (live && live.job_name === job.job_name && (live.status === "running" || live.status === "training")) {
+      return { ...job, ...live, _live: true };
+    }
+    // Job says running/training in the DB but ai-toolkit has no matching
+    // live process. The job died or was abandoned — treat as failed.
+    if (!live || live.job_name !== job.job_name) {
+      if (job.status === "running" || job.status === "training") {
+        return { ...job, status: "failed", _dead: true };
+      }
+    }
+    return job;
+  });
+
+  const [showForm] = useState(true);
+  const [formJobName, setFormJobName] = useState("");
+  const [formTrigger, setFormTrigger] = useState("");
+  const [formDataset, setFormDataset] = useState("rigo_flux2_lora_v1_dop");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const submitTraining = async () => {
+    setSubmitError(null);
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/lora-training/start", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ job_name: formJobName, trigger_word: formTrigger, dataset: formDataset }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Failed to start training");
+      setFormJobName("");
+      setFormTrigger("");
+      ctx.load();
+    } catch (e: any) {
+      setSubmitError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const [expandedJob, setExpandedJob] = useState<string | null>(null);
+  // Cache samples + checkpoints per job so expanding one doesn't overwrite another.
+  const [expandedData, setExpandedData] = useState<Map<string, { samples: Sample[]; checkpoints: Checkpoint[] }>>(new Map());
+  const [loadingExpanded, setLoadingExpanded] = useState(false);
+
+  const loadExpanded = useCallback(async (jobName: string) => {
+    if (expandedData.has(jobName)) return; // already cached
+    setLoadingExpanded(true);
+    try {
+      const [sRes, cRes] = await Promise.all([
+        fetch(`/api/lora-training/samples?job_name=${jobName}`),
+        fetch(`/api/lora-training/checkpoints?job_name=${jobName}`),
+      ]);
+      const sData = await sRes.json();
+      const cData = await cRes.json();
+      // ai-toolkit returns samples as flat file paths. Parse step number
+      // from the filename pattern: ...__000000250_0.jpg
+      const rawSamples: string[] = sData.samples || [];
+      const parsedSamples: Sample[] = rawSamples.map((path) => {
+        const basename = path.split("/").pop() ?? path;
+        const match = basename.match(/__([0-9]+)_/);
+        return { name: path, step: match ? Number(match[1]) : null };
+      });
+      setExpandedData(prev => {
+        const next = new Map(prev);
+        next.set(jobName, { samples: parsedSamples, checkpoints: cData.checkpoints || [] });
+        return next;
+      });
+    } catch {
+      setExpandedData(prev => {
+        const next = new Map(prev);
+        next.set(jobName, { samples: [], checkpoints: [] });
+        return next;
+      });
+    } finally {
+      setLoadingExpanded(false);
+    }
+  }, [expandedData]);
+
+  const toggleJob = (jobName: string) => {
+    if (expandedJob === jobName) {
+      setExpandedJob(null);
+    } else {
+      setExpandedJob(jobName);
+      loadExpanded(jobName);
+    }
+  };
+
+  const completed = jobs.filter((j: any) => j.status === "completed").length;
+  const running = jobs.filter((j: any) => j.status === "training" || j.status === "running").length;
+  const failed = jobs.filter((j: any) => j.status === "failed").length;
+
+  return (
+    <div className="h-full overflow-y-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold text-white">Characters &amp; LoRA Training</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Train fine-tuned character LoRAs on AMD MI300X. Track all jobs, checkpoints, and stats.
+          </p>
+        </div>
+      </div>
+
+      {/* New training form */}
+      {showForm && (
+        <div className="rounded-xl border border-fuchsia-500/30 bg-gray-950 p-5 space-y-4">
+          <h2 className="text-sm font-semibold text-fuchsia-300 uppercase tracking-wide">Start Training Job</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-400 uppercase tracking-wide">Job Name</label>
+              <Input
+                placeholder="e.g. rigo_v6_full"
+                value={formJobName}
+                onChange={e => setFormJobName(e.target.value)}
+                className="bg-black/40 border-gray-700 text-white placeholder:text-gray-600"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-400 uppercase tracking-wide">Trigger Word</label>
+              <Input
+                placeholder="e.g. Rigo"
+                value={formTrigger}
+                onChange={e => setFormTrigger(e.target.value)}
+                className="bg-black/40 border-gray-700 text-white placeholder:text-gray-600"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-400 uppercase tracking-wide">Dataset</label>
+              {datasets.length > 0 ? (
+                <select
+                  value={formDataset}
+                  onChange={e => setFormDataset(e.target.value)}
+                  className="w-full rounded-md border border-gray-700 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-fuchsia-500"
+                >
+                  {datasets.map(ds => (
+                    <option key={ds.id} value={ds.id}>{ds.name}</option>
+                  ))}
+                </select>
+              ) : (
+                <Input
+                  value={formDataset}
+                  onChange={e => setFormDataset(e.target.value)}
+                  className="bg-black/40 border-gray-700 text-white"
+                />
+              )}
+            </div>
+          </div>
+          {submitError && <p className="text-sm text-rose-400">{submitError}</p>}
+          <Button
+            onClick={submitTraining}
+            disabled={submitting || !formJobName || !formTrigger || !formDataset}
+            className="bg-fuchsia-600 hover:bg-fuchsia-500 text-white"
+          >
+            {submitting ? "Starting…" : "Start Training"}
+          </Button>
+        </div>
+      )}
+
+      {/* Datasets */}
+      <section className="rounded-xl border border-gray-800/60 bg-gray-950 overflow-hidden">
+        <div className="px-5 py-4 border-b border-gray-800/60 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Database className="w-4 h-4 text-fuchsia-400" />
+            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wide">
+              Training Datasets
+              <span className="ml-2 text-xs font-mono text-gray-500">{datasets.length}</span>
+            </h2>
+          </div>
+          <button
+            onClick={() => setShowAddDataset(!showAddDataset)}
+            className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-900/60 px-3 py-1.5 text-xs text-gray-300 hover:text-white hover:border-fuchsia-500/50 transition"
+          >
+            {showAddDataset ? <X className="w-3.5 h-3.5" /> : <FolderPlus className="w-3.5 h-3.5" />}
+            {showAddDataset ? "Cancel" : "Add Dataset"}
+          </button>
+        </div>
+
+        {showAddDataset && (
+          <div className="px-5 py-4 border-b border-gray-800/40 bg-gray-900/20 space-y-3">
+            <p className="text-xs text-gray-500">
+              Register a dataset folder. Place your images at{" "}
+              <code className="text-gray-400 bg-black/40 px-1 rounded">/root/nemoflix-training/datasets/&lt;id&gt;/</code>{" "}
+              on the AMD node before starting a training job.
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+              <div className="space-y-1">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wide">Folder ID *</label>
+                <Input
+                  placeholder="e.g. rigo_v2_photos"
+                  value={addDatasetId}
+                  onChange={e => setAddDatasetId(e.target.value)}
+                  className="bg-black/40 border-gray-700 text-white text-sm placeholder:text-gray-600"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wide">Display Name</label>
+                <Input
+                  placeholder="Optional display name"
+                  value={addDatasetName}
+                  onChange={e => setAddDatasetName(e.target.value)}
+                  className="bg-black/40 border-gray-700 text-white text-sm placeholder:text-gray-600"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wide">Description</label>
+                <Input
+                  placeholder="e.g. Rigo reference photos v2"
+                  value={addDatasetDesc}
+                  onChange={e => setAddDatasetDesc(e.target.value)}
+                  className="bg-black/40 border-gray-700 text-white text-sm placeholder:text-gray-600"
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-gray-500 uppercase tracking-wide">Image Count</label>
+                <Input
+                  type="number"
+                  placeholder="e.g. 25"
+                  value={addDatasetCount}
+                  onChange={e => setAddDatasetCount(e.target.value)}
+                  className="bg-black/40 border-gray-700 text-white text-sm placeholder:text-gray-600"
+                />
+              </div>
+            </div>
+            {addDatasetError && <p className="text-sm text-rose-400">{addDatasetError}</p>}
+            <Button
+              onClick={submitAddDataset}
+              disabled={addDatasetSubmitting || !addDatasetId}
+              className="bg-fuchsia-600 hover:bg-fuchsia-500 text-white text-sm"
+            >
+              {addDatasetSubmitting ? "Registering…" : "Register Dataset"}
+            </Button>
+          </div>
+        )}
+
+        {datasetsLoading ? (
+          <p className="text-xs text-gray-500 px-5 py-6">Loading…</p>
+        ) : datasets.length === 0 ? (
+          <p className="text-sm text-gray-500 py-8 text-center">
+            No datasets registered. Add one above, then reference it when starting a training job.
+          </p>
+        ) : (
+          <div className="divide-y divide-gray-800/40">
+            {datasets.map(ds => (
+              <div
+                key={ds.id}
+                className="px-5 py-3 flex items-center gap-4 hover:bg-gray-900/30 transition cursor-pointer"
+                onClick={() => setFormDataset(ds.id)}
+                title="Use in training form"
+              >
+                <div className="w-8 h-8 rounded-lg bg-fuchsia-900/30 border border-fuchsia-500/20 flex items-center justify-center flex-shrink-0">
+                  <Database className="w-4 h-4 text-fuchsia-400" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-semibold text-white truncate">{ds.name}</p>
+                  <p className="text-[11px] text-gray-500 font-mono">{ds.id}{ds.description ? ` · ${ds.description}` : ""}</p>
+                </div>
+                {ds.image_count != null && (
+                  <span className="text-[11px] text-gray-500 flex-shrink-0">{ds.image_count} images</span>
+                )}
+                <span className="text-[10px] text-gray-600 flex-shrink-0">{new Date(ds.created_at).toLocaleDateString()}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <StatBox label="Total Jobs" value={jobs.length} />
+        <StatBox label="Running" value={running} color="text-fuchsia-400" />
+        <StatBox label="Completed" value={completed} color="text-emerald-400" />
+        <StatBox label="Failed" value={failed} color="text-rose-400" />
+      </div>
+
+      {/* Jobs table */}
+      <section className="rounded-xl border border-gray-800/60 bg-gray-950 overflow-hidden">
+        <div className="px-5 py-4 border-b border-gray-800/60">
+          <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wide">
+            Training Jobs
+            <span className="ml-2 text-xs font-mono text-gray-500">{jobs.length}</span>
+          </h2>
+        </div>
+
+        {jobs.length === 0 ? (
+          <p className="text-sm text-gray-500 py-8 text-center">No training jobs yet.</p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow className="border-gray-800/60 hover:bg-transparent">
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider w-10" />
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider">Job</TableHead>
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider">Status</TableHead>
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider">Progress</TableHead>
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider">Loss</TableHead>
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider">Model</TableHead>
+                <TableHead className="text-gray-500 text-xs uppercase tracking-wider text-right">Created</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {mergedJobs.map((job: any) => {
+                // ai-toolkit returns status="running" when actually training. The info
+                // field is "Training" when steps are executing and "Initializing" when
+                // models/latents are loading. Trust the live data, not hardcoded logic.
+                const hasLiveProgress = job.current_step > 0 && job.total_steps > 0;
+                const isTraining = (job.status === "training" || job.status === "running") && hasLiveProgress;
+                const isInitializing = (job.status === "running" || job.status === "training") && !hasLiveProgress && job._live;
+                const progress = hasLiveProgress
+                  ? Math.round((job.current_step / job.total_steps) * 100)
+                  : 0;
+                const isExpanded = expandedJob === job.job_name;
+                const isLoading = isExpanded && loadingExpanded && !expandedData.has(job.job_name);
+                const jobData = expandedData.get(job.job_name);
+                const samples = jobData?.samples ?? [];
+                const checkpoints = jobData?.checkpoints ?? [];
+
+                return (
+                  <React.Fragment key={job.job_name}>
+                    {/* Main row — clickable */}
+                    <TableRow
+                      key={job.job_name}
+                      className={`border-gray-800/40 cursor-pointer transition-colors ${
+                        isExpanded ? "bg-gray-900/60" : "hover:bg-gray-900/30"
+                      }`}
+                      onClick={() => toggleJob(job.job_name)}
+                    >
+                      <TableCell>
+                        <ChevronDown
+                          className={`w-4 h-4 text-gray-500 transition-transform ${
+                            isExpanded ? "rotate-180" : ""
+                          }`}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <div>
+                          <p className="text-sm font-mono text-white truncate max-w-[200px]">{job.job_name}</p>
+                          <p className="text-[11px] text-gray-500 mt-0.5">
+                            {[job.trigger_word && `trigger: ${job.trigger_word}`, job.dataset].filter(Boolean).join(" · ")}
+                          </p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={statusVariant(job.status)}>{job.status}</Badge>
+                      </TableCell>
+                      <TableCell className="min-w-[220px]">
+                        {isTraining ? (
+                          <div className="space-y-1.5">
+                            <div className="flex items-center gap-2">
+                              <Progress value={progress} className="h-1.5 flex-1 bg-gray-800 [&>div]:bg-fuchsia-500" />
+                              <span className="text-[11px] font-mono text-fuchsia-400 tabular-nums">{progress}%</span>
+                            </div>
+                            <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-gray-500 font-mono">
+                              <span>Step {job.current_step}/{job.total_steps}</span>
+                              {job.seconds_per_step ? <span>{job.seconds_per_step.toFixed(1)}s/step</span> : null}
+                              {job.lr != null ? <span>lr {Number(job.lr).toExponential(1)}</span> : null}
+                              {job.eta ? <span>{job.eta} left</span> : null}
+                            </div>
+                            {job.info && <div className="text-[10px] text-gray-500">ai-toolkit: {job.info}</div>}
+                          </div>
+                        ) : isInitializing ? (
+                          <div className="flex items-center gap-2 text-sm text-amber-400">
+                            <span className="inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
+                            Initializing — loading models, caching latents…
+                          </div>
+                        ) : job.status === "completed" ? (
+                          <div className="text-sm text-gray-400 font-mono space-y-0.5">
+                            <p>{job.total_steps || 0} steps{job.elapsed ? ` · ${job.elapsed}` : ""}</p>
+                            {job.loss != null ? <p className="text-xs text-gray-500">final loss {job.loss.toFixed(4)}</p> : null}
+                          </div>
+                        ) : job.status === "failed" ? (
+                          <span className="text-xs text-gray-500">
+                            {job._dead ? "Process died or was abandoned" : job.error || "Job failed"}
+                          </span>
+                        ) : (
+                          <span className="text-sm text-gray-600">—</span>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm font-mono text-white">
+                          {job.loss != null ? job.loss.toFixed(4) : "—"}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-gray-400">{job.model || "—"}</span>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <span className="text-sm text-gray-500 font-mono">{formatDate(job.created_at)}</span>
+                      </TableCell>
+                    </TableRow>
+
+                    {/* Expanded sub-row — inline, directly under the clicked row */}
+                    {isExpanded && (
+                      <TableRow key={`${job.job_name}-expanded`} className="border-gray-800/40 bg-gray-900/40">
+                        <TableCell colSpan={7} className="p-0">
+                          {isLoading ? (
+                            <div className="px-6 py-6 text-sm text-gray-500">Loading samples and checkpoints…</div>
+                          ) : (
+                            <div className="px-6 py-5 space-y-5">
+                              {/* Samples */}
+                              {samples.length > 0 && (
+                                <div>
+                                  <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
+                                    Training Samples ({samples.length})
+                                  </h4>
+                                  <div className="flex gap-3 overflow-x-auto pb-2">
+                                    {samples.map((s) => (
+                                      <div
+                                        key={s.name}
+                                        className="flex-shrink-0 w-24 rounded-lg border border-gray-800 bg-black/40 overflow-hidden"
+                                      >
+                                        <img
+                                          src={`/api/lora-training/sample-image?path=${encodeURIComponent(s.name)}`}
+                                          alt={`Sample step ${s.step}`}
+                                          className="w-full aspect-square object-cover"
+                                        />
+                                        <div className="px-1.5 py-1 text-[10px] text-gray-500 font-mono text-center">
+                                          Step {s.step ?? "?"}
+                                        </div>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+
+                              {/* Checkpoints */}
+                              {checkpoints.length > 0 && (
+                                <div>
+                                  <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
+                                    Checkpoints ({checkpoints.length})
+                                  </h4>
+                                  <Table>
+                                    <TableHeader>
+                                      <TableRow className="border-gray-800/60 hover:bg-transparent">
+                                        <TableHead className="text-gray-500 text-xs uppercase tracking-wider">Step</TableHead>
+                                        <TableHead className="text-gray-500 text-xs uppercase tracking-wider">File</TableHead>
+                                        <TableHead className="text-gray-500 text-xs uppercase tracking-wider text-right">Size</TableHead>
+                                        <TableHead className="text-gray-500 text-xs uppercase tracking-wider text-right">Date</TableHead>
+                                      </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                      {checkpoints.map((ck) => (
+                                        <TableRow key={ck.name} className="border-gray-800/40 hover:bg-gray-900/30">
+                                          <TableCell className="font-mono text-sm text-violet-300">{ck.step ?? "final"}</TableCell>
+                                          <TableCell className="font-mono text-[11px] text-gray-400 max-w-[300px] truncate">{ck.name}</TableCell>
+                                          <TableCell className="text-right font-mono text-sm text-gray-400">
+                                            {(ck.size_bytes / 1024 / 1024).toFixed(0)} MB
+                                          </TableCell>
+                                          <TableCell className="text-right text-sm text-gray-500">
+                                            {new Date(ck.modified_at).toLocaleDateString()}
+                                          </TableCell>
+                                        </TableRow>
+                                      ))}
+                                    </TableBody>
+                                  </Table>
+                                </div>
+                              )}
+
+                              {samples.length === 0 && checkpoints.length === 0 && (
+                                <p className="text-sm text-gray-600 py-2">No samples or checkpoints for this job.</p>
+                              )}
+                            </div>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </TableBody>
+          </Table>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function StatBox({ label, value, color }: { label: string; value: number; color?: string }) {
+  return (
+    <div className="rounded-lg border border-gray-800 bg-black/40 p-3 text-center">
+      <p className={`text-lg font-bold ${color || "text-white"}`}>{value}</p>
+      <p className="text-[10px] uppercase tracking-wide text-gray-500">{label}</p>
+    </div>
+  );
+}

studio/src/components/MediaTile.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import { Check, Trash2, X, Play, Wand2, ArrowRight } from "lucide-react";
+import type { MediaItem } from "../types";
+
+interface MediaTileProps {
+  item: MediaItem;
+  onOpen: () => void;
+  onDelete: (item: MediaItem) => Promise<void> | void;
+  onGenerateVideo?: (item: MediaItem, motionPrompt: string) => void;
+}
+
+export function MediaTile({ item, onOpen, onDelete, onGenerateVideo }: MediaTileProps) {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [showI2VInput, setShowI2VInput] = useState(false);
+  const [motionPrompt, setMotionPrompt] = useState("");
+
+  async function confirm(event: React.MouseEvent) {
+    event.stopPropagation();
+    if (deleting) return;
+    setDeleting(true);
+    try {
+      await onDelete(item);
+    } finally {
+      setDeleting(false);
+      setConfirmDelete(false);
+    }
+  }
+
+  return (
+    <div
+      onClick={onOpen}
+      className="cursor-pointer rounded-xl overflow-hidden border border-gray-800/60 hover:border-gray-600 aspect-[3/4] bg-gray-900/50 relative group transition-all duration-200 hover:shadow-xl hover:shadow-black/30 hover:-translate-y-0.5"
+    >
+      {/* Media */}
+      {item.type === "video" ? (
+        <video src={item.thumb || item.url} className="w-full h-full object-cover" preload="metadata" muted />
+      ) : (
+        <img src={item.thumb || item.url} alt={item.name || ""} className="w-full h-full object-cover group-hover:scale-105 transition duration-500" loading="lazy" />
+      )}
+
+      {/* Delete button */}
+      {!confirmDelete && (
+        <button
+          onClick={(event) => {
+            event.stopPropagation();
+            setConfirmDelete(true);
+          }}
+          className="absolute top-2 right-2 z-10 w-8 h-8 rounded-lg bg-black/60 text-white/80 backdrop-blur-sm flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-600 hover:text-white transition-all"
+          title="Delete"
+        >
+          <Trash2 className="w-4 h-4" />
+        </button>
+      )}
+
+      {/* I2V button / prompt — only for images */}
+      {!confirmDelete && item.type === "image" && onGenerateVideo && (
+        <>
+          {!showI2VInput ? (
+            <button
+              onClick={(event) => {
+                event.stopPropagation();
+                setShowI2VInput(true);
+              }}
+              className="absolute top-2 left-2 z-10 flex items-center gap-1.5 rounded-lg bg-violet-600/80 text-white text-[10px] font-medium px-2 py-1.5 backdrop-blur-sm opacity-0 group-hover:opacity-100 hover:bg-violet-500 transition-all"
+              title="Generate Video"
+            >
+              <Wand2 className="w-3 h-3" />
+              I2V
+            </button>
+          ) : (
+            <div
+              className="absolute inset-0 z-20 bg-black/90 backdrop-blur-sm flex flex-col items-center justify-center gap-2 px-4"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <p className="text-[10px] uppercase tracking-wider text-white/60">Motion Prompt</p>
+              <input
+                autoFocus
+                value={motionPrompt}
+                onChange={(e) => setMotionPrompt(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    onGenerateVideo(item, motionPrompt);
+                    setShowI2VInput(false);
+                    setMotionPrompt("");
+                  }
+                  if (e.key === "Escape") {
+                    setShowI2VInput(false);
+                    setMotionPrompt("");
+                  }
+                }}
+                placeholder="camera push in, rain falling..."
+                className="w-full rounded-lg bg-gray-800 border border-gray-700 px-3 py-2 text-xs text-white focus:outline-none focus:border-violet-500 placeholder:text-gray-600"
+              />
+              <div className="flex gap-2">
+                <button
+                  onClick={() => {
+                    setShowI2VInput(false);
+                    setMotionPrompt("");
+                  }}
+                  className="text-[10px] text-gray-500 hover:text-white transition"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => {
+                    onGenerateVideo(item, motionPrompt);
+                    setShowI2VInput(false);
+                    setMotionPrompt("");
+                  }}
+                  className="flex items-center gap-1 text-[10px] text-violet-400 hover:text-violet-200 transition font-medium"
+                >
+                  Generate <ArrowRight className="w-3 h-3" />
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Bottom info bar */}
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 pt-6 opacity-0 group-hover:opacity-100 transition pointer-events-none">
+        <p className="text-xs font-medium truncate text-white/90">{item.name || "Untitled"}</p>
+      </div>
+
+      {/* Video badge */}
+      {item.type === "video" && (
+        <div className="absolute top-2 left-2 bg-black/60 backdrop-blur-sm text-white text-[10px] font-medium px-2 py-1 rounded-md flex items-center gap-1">
+          <Play className="w-2.5 h-2.5 fill-white" />
+          VIDEO
+        </div>
+      )}
+
+      {/* Delete confirmation overlay */}
+      {confirmDelete && (
+        <div
+          className="absolute inset-0 z-20 bg-black/80 backdrop-blur-sm flex flex-col items-center justify-center gap-3"
+          onClick={(event) => {
+            event.stopPropagation();
+            setConfirmDelete(false);
+          }}
+        >
+          <span className="text-xs font-semibold uppercase tracking-wider text-white/80">Delete this?</span>
+          <div className="flex gap-3" onClick={(event) => event.stopPropagation()}>
+            <button
+              onClick={() => setConfirmDelete(false)}
+              className="w-10 h-10 rounded-full bg-gray-800/90 text-gray-400 hover:text-white hover:bg-gray-700 flex items-center justify-center transition"
+              title="Cancel"
+            >
+              <X className="w-5 h-5" />
+            </button>
+            <button
+              onClick={confirm}
+              disabled={deleting}
+              className="w-10 h-10 rounded-full bg-red-600/90 text-white hover:bg-red-500 disabled:bg-gray-800 disabled:text-gray-600 flex items-center justify-center transition"
+              title="Confirm delete"
+            >
+              <Check className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

studio/src/components/ProjectDetailView.tsx

@@ -0,0 +1,1023 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import { Film, Image as ImageIcon, Video, Wand2, Plus, Save, Layers, Sparkles, Edit3, Play, ArrowLeft, Trash2, Clapperboard, Loader2, CheckCircle2, AlertTriangle, X, Download } from "lucide-react";
+import type { JobItem, Project, Scene, Shot, ShotVersion, ProjectPhase } from "../types";
+
+interface ProjectDetailViewProps {
+  project: Project;
+  scenes: Scene[];
+  shots: Shot[];
+  jobs: JobItem[];
+  selectedSceneId: string | null;
+  selectedShotId: string | null;
+  onSelectScene: (id: string) => void;
+  onSelectShot: (id: string | null) => void;
+  onRefresh: () => Promise<void> | void;
+  onBack: () => void;
+  onDeleteScene: (sceneId: string) => Promise<void> | void;
+  onDeleteShot: (shotId: string) => Promise<void> | void;
+}
+
+function mediaUrl(file: string | null | undefined): string | null {
+  if (!file) return null;
+  if (file.startsWith("/") || file.startsWith("http")) return file;
+  return `/media/${file}`;
+}
+
+export function ProjectDetailView({
+  project, scenes, shots, jobs,
+  selectedSceneId, selectedShotId,
+  onSelectScene, onSelectShot, onRefresh, onBack,
+  onDeleteScene, onDeleteShot,
+}: ProjectDetailViewProps) {
+  // Derive real phase from shot data, not prop
+  const phase = useMemo<ProjectPhase>(() => {
+    if (shots.length === 0) return "outline";
+    const anyImage = shots.some((s) => s.image_file);
+    const anyVideo = shots.some((s) => s.video_file);
+    if (anyVideo) return "animate";
+    if (anyImage) return "generate";
+    return "outline";
+  }, [shots]);
+  const [activeRenderId, setActiveRenderId] = useState<string | null>(null);
+  const [versions, setVersions] = useState<ShotVersion[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [renderStatus, setRenderStatus] = useState<string>(() => String(project.metadata?.render_status ?? "none"));
+  const [renders, setRenders] = useState<Array<{ id: string; render_number: number; final_video_url: string | null; created_at: string; status: string }>>([]);
+  const [finalVideoUrl, setFinalVideoUrl] = useState<string | null>(() => {
+    const v = project.metadata?.final_video;
+    return typeof v === "string" ? `/media/${v}` : null;
+  });
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    setRenderStatus(String(project.metadata?.render_status ?? "none"));
+    const v = project.metadata?.final_video;
+    setFinalVideoUrl(typeof v === "string" ? `/media/${v}` : null);
+  }, [project.metadata]);
+
+  useEffect(() => {
+    if (renderStatus !== "rendering") {
+      if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+      return;
+    }
+    pollRef.current = setInterval(async () => {
+      try {
+        const res = await fetch(`/api/projects/${project.id}/render`);
+        if (!res.ok) return;
+        const data = await res.json();
+        setRenderStatus(data.status ?? "none");
+        if (data.final_video_url) setFinalVideoUrl(data.final_video_url);
+        if (data.renders) {
+          setRenders(data.renders);
+          if (!activeRenderId && data.renders.length > 0) {
+            setActiveRenderId(data.renders[0].id);
+          }
+        }
+        if (data.status !== "rendering") {
+          if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+          if (data.status === "failed") setError(`Render failed: ${data.render_error ?? "unknown error"}`);
+        }
+      } catch { /* ignore */ }
+    }, 3000);
+    return () => { if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; } };
+  }, [project.id, renderStatus]);
+
+  async function handleRender() {
+    if (renderStatus === "rendering") return;
+    setError(null);
+    setRenderStatus("rendering");
+    try {
+      const res = await fetch(`/api/projects/${project.id}/render`, { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail ?? `${res.status}`);
+    } catch (e) {
+      setRenderStatus("failed");
+      setError(e instanceof Error ? e.message : "Render failed");
+    }
+  }
+
+  const selectedScene = useMemo(() => scenes.find((s) => s.id === selectedSceneId) || null, [scenes, selectedSceneId]);
+  const selectedShot = useMemo(() => shots.find((s) => s.id === selectedShotId) || null, [shots, selectedShotId]);
+  const sceneShots = useMemo(() => shots.filter((s) => s.scene_id === selectedSceneId), [shots, selectedSceneId]);
+
+  // Load versions for the focused shot
+  useEffect(() => {
+    if (!selectedShotId || !selectedSceneId) { setVersions([]); return; }
+    let cancelled = false;
+    fetch(`/api/projects/${project.id}/scenes/${selectedSceneId}/shots/${selectedShotId}/versions`)
+      .then((r) => r.ok ? r.json() : { versions: [] })
+      .then((data) => { if (!cancelled) setVersions(data.versions || []); })
+      .catch(() => { if (!cancelled) setVersions([]); });
+    return () => { cancelled = true; };
+  }, [project.id, selectedSceneId, selectedShotId, shots]);
+
+  const [saving, setSaving] = useState(false);
+  const [showRenderConfirm, setShowRenderConfirm] = useState(false);
+
+  // Look up the active job for a shot by matching prompt IDs
+  function shotJob(shot: Shot): JobItem | undefined {
+    return jobs.find((j) =>
+      (shot.image_prompt_id && j.prompt_id === shot.image_prompt_id) ||
+      (shot.video_prompt_id && j.prompt_id === shot.video_prompt_id)
+    );
+  }
+
+  function isRendering(shot: Shot): boolean {
+    const job = shotJob(shot);
+    return (shot.status === 'rendering_image' || shot.status === 'animating') ||
+      (!!job && (job.status === 'pending' || job.status === 'running'));
+  }
+
+  async function patchShot(shotId: string, patch: Partial<Shot>) {
+    const shot = shots.find((s) => s.id === shotId);
+    if (!shot) return;
+    setSaving(true);
+    try {
+      const response = await fetch(`/api/projects/${project.id}/scenes/${shot.scene_id}/shots/${shotId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch),
+      });
+      if (!response.ok) throw new Error(`Patch failed: ${response.status}`);
+      await onRefresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save shot");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function addShot() {
+    if (!selectedSceneId) return;
+    setSaving(true);
+    const next = sceneShots.length > 0 ? Math.max(...sceneShots.map((s) => s.shot_number)) + 1 : 1;
+    try {
+      const response = await fetch(`/api/projects/${project.id}/scenes/${selectedSceneId}/shots`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ shot_number: next, description: "" }),
+      });
+      if (!response.ok) throw new Error(`Add shot failed: ${response.status}`);
+      const created = await response.json();
+      await onRefresh();
+      onSelectShot(created.id);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to add shot");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function generateImage(shot: Shot) {
+    if (isRendering(shot)) return;
+    setSaving(true);
+    try {
+      const response = await fetch(`/api/projects/${project.id}/scenes/${shot.scene_id}/shots/${shot.id}/generate-image`, { method: "POST" });
+      if (!response.ok) throw new Error(`Generate failed: ${response.status}`);
+      await onRefresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to generate image");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function animateShot(shot: Shot) {
+    if (isRendering(shot)) return;
+    setSaving(true);
+    try {
+      const response = await fetch(`/api/projects/${project.id}/scenes/${shot.scene_id}/shots/${shot.id}/animate`, { method: "POST" });
+      if (!response.ok) throw new Error(`Animate failed: ${response.status}`);
+      await onRefresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to animate");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function selectVersion(version: ShotVersion) {
+    if (!selectedShot) return;
+    try {
+      const response = await fetch(`/api/projects/${project.id}/scenes/${selectedShot.scene_id}/shots/${selectedShot.id}/versions/${version.id}/select`, { method: "POST" });
+      if (!response.ok) throw new Error(`Select version failed: ${response.status}`);
+      await onRefresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to select version");
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-black">
+      {/* Top bar */}
+      <div className="relative flex items-center justify-between gap-3 px-5 py-2.5 border-b border-gray-800/60 bg-gray-950/60 flex-shrink-0 z-30">
+        <div className="flex items-center gap-3 min-w-0 flex-1">
+          <button
+            onClick={onBack}
+            className="inline-flex items-center gap-1.5 rounded-xl border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-gray-700 px-3 py-1.5 text-xs text-gray-400 hover:text-gray-200 transition flex-shrink-0"
+          >
+            <ArrowLeft className="w-3.5 h-3.5" /> All projects
+          </button>
+          <div className="min-w-0">
+            <p className="text-[10px] uppercase tracking-[0.22em] text-rose-400/70">Project</p>
+            <h1 className="text-base font-semibold tracking-tight text-gray-100 truncate">{project.title}</h1>
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5 text-[11px] flex-shrink-0">
+          <PhaseChip phase={phase} />
+          <span className="rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500 font-mono">{project.aspect_ratio}</span>
+          {project.duration_seconds !== null && (
+            <span className="rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">{project.duration_seconds}s</span>
+          )}
+          <span className="rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500 uppercase tracking-wider">{project.status}</span>
+          <Link
+            to={`/studio/projects/${project.id}/films`}
+            className="inline-flex items-center gap-1.5 rounded-xl border border-emerald-500/40 bg-emerald-600/15 hover:bg-emerald-600/25 px-3 py-1.5 text-xs font-medium text-emerald-100 transition"
+          >
+            <Film className="w-3.5 h-3.5" /> Films ({renders.length})
+          </Link>
+          {phase !== "outline" && (
+            <button
+              onClick={() => renderStatus !== "rendering" && setShowRenderConfirm(true)}
+              disabled={renderStatus === "rendering"}
+              className="inline-flex items-center gap-1.5 rounded-xl border border-violet-500/40 bg-violet-600/15 hover:bg-violet-600/25 disabled:opacity-50 disabled:cursor-not-allowed px-3 py-1.5 text-xs font-medium text-violet-100 transition"
+            >
+              {renderStatus === "rendering"
+                ? <><Loader2 className="w-3.5 h-3.5 animate-spin" /> Rendering…</>
+                : <><Clapperboard className="w-3.5 h-3.5" /> Render final video</>
+              }
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Main split: center | right context editor */}
+      <div className="flex-1 min-h-0 flex">
+        {/* Center: shots in current scene */}
+        <main className="flex-1 min-w-0 flex flex-col bg-gradient-to-b from-transparent via-transparent to-gray-950/30">
+          <div className="flex-1 overflow-y-auto">
+            <div className="max-w-5xl mx-auto p-6 space-y-4">
+              {selectedScene ? (
+                <>
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <p className="text-[11px] uppercase tracking-[0.2em] text-rose-400/70">Scene {selectedScene.scene_number}</p>
+                      <h2 className="text-2xl font-bold tracking-tight mt-1">{selectedScene.title || "Untitled scene"}</h2>
+                      {selectedScene.summary && (
+                        <p className="text-sm text-gray-400 mt-2 max-w-2xl leading-relaxed">{selectedScene.summary}</p>
+                      )}
+                    </div>
+                    <button
+                      onClick={addShot}
+                      disabled={saving}
+                      className="inline-flex items-center gap-2 rounded-xl border border-rose-500/30 bg-rose-600/10 hover:bg-rose-600/20 hover:border-rose-400/50 disabled:opacity-50 px-3 py-1.5 text-xs font-medium text-rose-100 transition flex-shrink-0"
+                    >
+                      <Plus className="w-3.5 h-3.5" /> {saving ? "Adding…" : "Add shot"}
+                    </button>
+                  </div>
+
+                  {sceneShots.length === 0 ? (
+                    <div className="rounded-2xl border border-gray-800/60 bg-gray-900/30 p-12 text-center">
+                      <Film className="w-7 h-7 text-gray-600 mx-auto mb-2" />
+                      <p className="text-sm text-gray-400">No shots in this scene yet.</p>
+                      <p className="text-xs text-gray-600 mt-1.5">Add shots and write image prompts before generating.</p>
+                    </div>
+                  ) : (
+                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                      {sceneShots.map((shot) => (
+                        <ShotCard
+                          key={shot.id}
+                          shot={shot}
+                          phase={phase}
+                          selected={shot.id === selectedShotId}
+                          saving={saving}
+                          onSelect={() => onSelectShot(shot.id)}
+                          onGenerateImage={() => generateImage(shot)}
+                          onAnimate={() => animateShot(shot)}
+                          onDeleteShot={() => onDeleteShot(shot.id)}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </>
+              ) : (
+                <OutlineCenter project={project} />
+              )}
+            </div>
+          </div>
+
+          {/* Bottom: shot version strip */}
+          <div className="border-t border-gray-800/60 bg-gray-950/60 flex-shrink-0">
+            <div className="px-4 py-2 flex items-center gap-3 overflow-x-auto">
+              <span className="text-[10px] uppercase tracking-wider text-gray-500 font-medium flex-shrink-0">
+                {selectedShot ? `S${selectedScene?.scene_number}·shot ${selectedShot.shot_number} versions` : "Versions"}
+              </span>
+              {!selectedShot && (
+                <span className="text-[11px] text-gray-600">Select a shot to see its generated versions.</span>
+              )}
+              {selectedShot && versions.length === 0 && (
+                <span className="text-[11px] text-gray-600">No versions yet. Generate to create one.</span>
+              )}
+              {versions.map((version) => {
+                const url = mediaUrl(version.file);
+                const isCurrent = selectedShot?.image_file === version.file || selectedShot?.video_file === version.file;
+                return (
+                  <button
+                    key={version.id}
+                    onClick={() => selectVersion(version)}
+                    title={`v${version.version_number} · ${version.kind} · ${version.status}`}
+                    className={`flex-shrink-0 relative rounded-lg overflow-hidden border transition ${isCurrent ? "border-rose-500/60 ring-1 ring-rose-500/40" : "border-gray-800 hover:border-gray-600"}`}
+                  >
+                    {url ? (
+                      version.kind === "video" ? (
+                        <video src={url} className="h-14 w-24 object-cover bg-black" muted />
+                      ) : (
+                        <img src={url} alt="" className="h-14 w-24 object-cover bg-black" />
+                      )
+                    ) : (
+                      <div className="h-14 w-24 flex items-center justify-center bg-gray-900 text-[10px] text-gray-600">{version.status}</div>
+                    )}
+                    <span className={`absolute bottom-0.5 left-0.5 rounded px-1 text-[9px] font-mono ${isCurrent ? "bg-rose-600 text-white" : "bg-black/70 text-gray-300"}`}>v{version.version_number}</span>
+                  </button>
+                );
+              })}
+              {selectedShot && (
+                <button
+                  disabled
+                  title="Coming soon"
+                  className="flex-shrink-0 h-14 px-3 rounded-lg border border-dashed border-gray-800 bg-gray-900/30 flex items-center gap-1.5 text-[10px] font-medium text-gray-600 cursor-not-allowed"
+                >
+                  <Layers className="w-3 h-3" />
+                  Import from gallery
+                  <span className="text-[8px] uppercase tracking-wider text-gray-500">Soon</span>
+                </button>
+              )}
+            </div>
+          </div>
+        </main>
+
+        {/* Right: context-aware editor — styled to match AppSidebar */}
+        <aside className="w-[340px] flex-shrink-0 border-l border-gray-800/60 bg-gray-950/40 flex flex-col">
+          <div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-800/40 flex-shrink-0">
+            <span className="text-sm font-semibold text-gray-300 tracking-tight">
+              {selectedShot ? `Shot ${selectedShot.shot_number}` : selectedScene ? `Scene ${selectedScene.scene_number}` : "Project"}
+            </span>
+            <span className="text-[10px] uppercase tracking-wider text-gray-600">{phase}</span>
+          </div>
+
+          <div className="flex-1 min-h-0 overflow-y-auto p-4 space-y-4">
+            {selectedShot ? (
+              <ShotEditor
+                shot={selectedShot}
+                phase={phase}
+                saving={saving}
+                onPatch={(patch) => patchShot(selectedShot.id, patch)}
+                onGenerate={() => generateImage(selectedShot)}
+                onAnimate={() => animateShot(selectedShot)}
+              />
+            ) : selectedScene ? (
+              <SceneSummary scene={selectedScene} />
+            ) : (
+              <ProjectSummary project={project} />
+            )}
+          </div>
+        </aside>
+      </div>
+
+      {error && (
+        <div className="absolute top-16 right-4 rounded-xl border border-red-500/30 bg-red-950/40 backdrop-blur px-3 py-2 text-xs text-red-300 max-w-sm cursor-pointer" onClick={() => setError(null)}>
+          {error}
+        </div>
+      )}
+
+      {showRenderConfirm && (
+        <RenderConfirmModal
+          project={project}
+          scenes={scenes}
+          shots={shots}
+          onConfirm={() => { setShowRenderConfirm(false); handleRender(); }}
+          onCancel={() => setShowRenderConfirm(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+function PhaseChip({ phase }: { phase: ProjectPhase }) {
+  if (phase === "outline") {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-full border border-gray-700 bg-gray-900/60 px-2.5 py-1 text-gray-300">
+        <Edit3 className="w-3 h-3" /> Outline
+      </span>
+    );
+  }
+  if (phase === "generate") {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-full border border-rose-500/40 bg-rose-600/15 px-2.5 py-1 text-rose-200">
+        <Wand2 className="w-3 h-3" /> Generate
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-full border border-violet-500/40 bg-violet-600/15 px-2.5 py-1 text-violet-200">
+      <Play className="w-3 h-3" /> Animate
+    </span>
+  );
+}
+
+function OutlineCenter({ project }: { project: Project }) {
+  return (
+    <div className="rounded-2xl border border-gray-800/60 bg-gray-900/30 p-12 text-center max-w-2xl mx-auto">
+      <Layers className="w-9 h-9 text-gray-600 mx-auto mb-3" />
+      <p className="text-base text-gray-300 font-medium">Outline phase</p>
+      <p className="text-sm text-gray-500 mt-2 leading-relaxed max-w-md mx-auto">
+        No scenes in <span className="text-gray-300">{project.title}</span> yet. Pitch your idea to your agent and it'll draft the structure here, or add the first scene yourself.
+      </p>
+    </div>
+  );
+}
+
+function RemixCenter({ project, shots }: { project: Project; shots: Shot[] }) {
+  const imageCount = shots.filter((s) => s.image_file).length;
+  const videoCount = shots.filter((s) => s.video_file).length;
+  const totalShots = shots.length;
+
+  return (
+    <div className="rounded-2xl border border-violet-500/20 bg-gradient-to-b from-violet-950/10 to-gray-950 p-8 text-center max-w-2xl mx-auto space-y-5">
+      <div className="flex items-center justify-center gap-2">
+        <Sparkles className="w-6 h-6 text-violet-400" />
+        <p className="text-lg font-semibold text-violet-200">Remix Phase</p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-3 text-[11px]">
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-3 py-2">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Images</p>
+          <p className="text-violet-300 mt-0.5 font-mono text-sm">{imageCount}/{totalShots}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-3 py-2">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Videos</p>
+          <p className="text-violet-300 mt-0.5 font-mono text-sm">{videoCount}/{totalShots}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-3 py-2">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Status</p>
+          <p className="text-violet-300 mt-0.5 font-mono text-sm">{project.status}</p>
+        </div>
+      </div>
+
+      <div className="space-y-3 text-left">
+        <p className="text-xs text-gray-300 leading-relaxed">
+          <strong className="text-violet-200">Remixing is editing.</strong> Change any prompt, hit regenerate, and iterate until it lands. Your agent can also edit prompts for you.
+        </p>
+
+        <div className="rounded-xl border border-gray-700/40 bg-gray-900/40 p-3 space-y-2">
+          <p className="text-[11px] font-semibold text-gray-300">How Remix works:</p>
+          {[
+            { n: 1, title: "Pick a shot", body: "Click any shot card to select it. The right panel shows its prompts." },
+            { n: 2, title: "Edit the prompt", body: "Change the image prompt or description in the right panel. Save your changes." },
+            { n: 3, title: "Regenerate", body: "Click Generate or Re-image. The API runs the new prompt on AMD MI300X and returns a fresh image." },
+            { n: 4, title: "Iterate", body: "Not quite right? Edit the prompt again and regenerate. Each run creates a new version you can compare." },
+          ].map((step) => (
+            <div key={step.n} className="flex gap-2.5">
+              <div className="flex-shrink-0 w-5 h-5 rounded-md bg-violet-500/20 flex items-center justify-center mt-0.5">
+                <span className="text-[10px] font-medium text-violet-400">{step.n}</span>
+              </div>
+              <div>
+                <p className="text-[11px] text-gray-200">{step.title}</p>
+                <p className="text-[10px] text-gray-500 leading-relaxed mt-0.5">{step.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <p className="text-[11px] text-gray-500 leading-relaxed">
+          <strong className="text-gray-400">API:</strong> <code className="text-gray-500">POST /api/projects/{'{projectId}'}/scenes/{'{sceneId}'}/shots/{'{shotId}'}/generate-image</code> — regenerates with the current prompt. Or ask your agent: "Remix shot 2 with a darker mood."
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function AnimateCenter({ project, shots }: { project: Project; shots: Shot[] }) {
+  const imageCount = shots.filter((s) => s.image_file).length;
+  const videoCount = shots.filter((s) => s.video_file).length;
+  const totalShots = shots.length;
+
+  return (
+    <div className="rounded-2xl border border-violet-500/20 bg-gradient-to-b from-violet-950/10 to-gray-950 p-8 text-center max-w-2xl mx-auto space-y-5">
+      <div className="flex items-center justify-center gap-2">
+        <Play className="w-6 h-6 text-violet-400" />
+        <p className="text-lg font-semibold text-violet-200">Animate Phase</p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-3 text-[11px]">
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-3 py-2">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Images</p>
+          <p className="text-violet-300 mt-0.5 font-mono text-sm">{imageCount}/{totalShots}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-3 py-2">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Videos</p>
+          <p className="text-violet-300 mt-0.5 font-mono text-sm">{videoCount}/{totalShots}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-3 py-2">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Status</p>
+          <p className="text-violet-300 mt-0.5 font-mono text-sm">{project.status}</p>
+        </div>
+      </div>
+
+      <div className="space-y-3 text-left">
+        <p className="text-xs text-gray-300 leading-relaxed">
+          <strong className="text-violet-200">All images are generated.</strong> Now you can animate any shot into a video clip. Pick a shot and click Animate.
+        </p>
+
+        <div className="rounded-xl border border-gray-700/40 bg-gray-900/40 p-3 space-y-2">
+          <p className="text-[11px] font-semibold text-gray-300">How Animate works:</p>
+          {[
+            { n: 1, title: "Pick a shot", body: "Click any shot card that has an image." },
+            { n: 2, title: "Click Animate", body: "The API sends the image to Wan 2.2 I2V on AMD MI300X and returns a video clip." },
+            { n: 3, title: "Iterate", body: "Don't like the video? Animate again — each run creates a new version." },
+            { n: 4, title: "Select versions", body: "The bottom strip shows all versions. Click one to make it active." },
+          ].map((step) => (
+            <div key={step.n} className="flex gap-2.5">
+              <div className="flex-shrink-0 w-5 h-5 rounded-md bg-violet-500/20 flex items-center justify-center mt-0.5">
+                <span className="text-[10px] font-medium text-violet-400">{step.n}</span>
+              </div>
+              <div>
+                <p className="text-[11px] text-gray-200">{step.title}</p>
+                <p className="text-[10px] text-gray-500 leading-relaxed mt-0.5">{step.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <p className="text-[11px] text-gray-500 leading-relaxed">
+          <strong className="text-gray-400">API:</strong> <code className="text-gray-500">POST /api/projects/{'{projectId}'}/scenes/{'{sceneId}'}/shots/{'{shotId}'}/animate</code> — returns <code className="text-gray-500">prompt_id</code> for tracking. Backend uses Wan 2.2 I2V on AMD MI300X.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface ShotCardProps {
+  shot: Shot;
+  phase: ProjectPhase;
+  selected: boolean;
+  saving: boolean;
+  onSelect: () => void;
+  onGenerateImage: () => void;
+  onAnimate: () => void;
+  onDeleteShot: () => void;
+}
+
+function ShotCard({ shot, phase, selected, saving, onSelect, onGenerateImage, onAnimate, onDeleteShot }: ShotCardProps) {
+  const imageUrl = mediaUrl(shot.image_file);
+  const videoUrl = mediaUrl(shot.video_file);
+  const showAnimate = !!imageUrl;
+  // Only show video if there's no newer image version (re-image invalidates old video)
+  const showVideo = !!videoUrl && shot.status !== 'image_ready';
+  const rendering = shot.status === 'rendering_image' || shot.status === 'animating' || saving;
+  return (
+    <div
+      onClick={onSelect}
+      className={`rounded-xl border bg-gray-900/30 overflow-hidden cursor-pointer transition ${selected ? "border-rose-500/50 ring-1 ring-rose-500/30" : "border-gray-800/60 hover:border-gray-700"}`}
+    >
+      <div className="aspect-video bg-black flex items-center justify-center relative">
+        {videoUrl ? (
+          <video src={videoUrl} className="w-full h-full object-cover" muted loop autoPlay />
+        ) : imageUrl ? (
+          <img src={imageUrl} alt="" className="w-full h-full object-cover" />
+        ) : (
+          <div className="text-center text-gray-600">
+            <ImageIcon className="w-6 h-6 mx-auto mb-1 opacity-50" />
+            <p className="text-[10px] uppercase tracking-wider">No image</p>
+          </div>
+        )}
+        <span className="absolute top-1.5 left-1.5 rounded-md bg-black/70 px-1.5 py-0.5 text-[10px] font-mono text-gray-200">
+          shot {shot.shot_number}
+        </span>
+        {videoUrl && (
+          <span className="absolute top-1.5 right-1.5 rounded-md bg-violet-600/80 px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-white inline-flex items-center gap-1">
+            <Video className="w-2.5 h-2.5" /> video
+          </span>
+        )}
+      </div>
+      <div className="p-2.5 space-y-1.5">
+        <p className="text-[11px] text-gray-300 leading-relaxed line-clamp-2 min-h-[2.4em]">
+          {shot.description || <span className="italic text-gray-600">no description</span>}
+        </p>
+        <div className="flex items-center gap-1.5 pt-1 border-t border-gray-800/40">
+          {rendering ? (
+            <div className="flex-1 rounded-lg border border-amber-800/30 bg-amber-950/20 px-2 py-1 text-[11px] text-amber-400 text-center">
+              <span className="inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse mr-1.5 align-middle" />
+              {shot.status === 'animating' ? 'Animating…' : 'Generating…'}
+            </div>
+          ) : phase === "outline" || !imageUrl ? (
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); onGenerateImage(); }}
+                className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-rose-500/30 bg-rose-600/10 hover:bg-rose-600/20 px-2 py-1 text-[11px] text-rose-100 transition"
+              >
+                <Wand2 className="w-3 h-3" /> {imageUrl ? "Regenerate" : "Generate"}
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onDeleteShot(); }}
+                className="rounded-lg border border-gray-800 hover:bg-red-900/40 hover:border-red-800/50 px-1.5 py-1 text-[11px] text-gray-600 hover:text-red-400 transition"
+                title="Delete shot"
+              >
+                <Trash2 className="w-3 h-3" />
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); onGenerateImage(); }}
+                className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-700 bg-gray-900/60 hover:bg-gray-800 px-2 py-1 text-[11px] text-gray-300 transition"
+              >
+                <Wand2 className="w-3 h-3" /> Re-image
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onAnimate(); }}
+                className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-violet-500/30 bg-violet-600/15 hover:bg-violet-600/25 px-2 py-1 text-[11px] text-violet-100 transition"
+              >
+                <Play className="w-3 h-3" /> Animate
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onDeleteShot(); }}
+                className="rounded-lg border border-gray-800 hover:bg-red-900/40 hover:border-red-800/50 px-1.5 py-1 text-[11px] text-gray-600 hover:text-red-400 transition"
+                title="Delete shot"
+              >
+                <Trash2 className="w-3 h-3" />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ShotEditorProps {
+  shot: Shot;
+  phase: ProjectPhase;
+  saving: boolean;
+  onPatch: (patch: Partial<Shot>) => void;
+  onGenerate: () => void;
+  onAnimate: () => void;
+}
+
+function ShotEditor({ shot, phase, saving, onPatch, onGenerate, onAnimate }: ShotEditorProps) {
+  const [draft, setDraft] = useState({
+    subtitle: shot.subtitle || "",
+    description: shot.description || "",
+    image_prompt: shot.image_prompt || "",
+    motion_prompt: shot.motion_prompt || "",
+  });
+
+  useEffect(() => {
+    setDraft({
+      subtitle: shot.subtitle || "",
+      description: shot.description || "",
+      image_prompt: shot.image_prompt || "",
+      motion_prompt: shot.motion_prompt || "",
+    });
+  }, [shot.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const dirty =
+    draft.subtitle !== (shot.subtitle || "") ||
+    draft.description !== (shot.description || "") ||
+    draft.image_prompt !== (shot.image_prompt || "") ||
+    draft.motion_prompt !== (shot.motion_prompt || "");
+
+  return (
+    <div className="space-y-4">
+      <Field label="Subtitle" hint="Viewer-facing narration. Burned onto the final video.">
+        <textarea
+          value={draft.subtitle}
+          onChange={(e) => setDraft((d) => ({ ...d, subtitle: e.target.value }))}
+          rows={2}
+          className="w-full rounded-lg bg-black/40 border border-gray-800 px-2.5 py-2 text-xs text-gray-200 focus:outline-none focus:border-rose-500/50 placeholder:text-gray-700 leading-relaxed"
+          placeholder="The screen flickers to life at precisely 8:00 AM."
+        />
+      </Field>
+
+      <Field label="Description" hint="What's in the frame, plain English.">
+        <textarea
+          value={draft.description}
+          onChange={(e) => setDraft((d) => ({ ...d, description: e.target.value }))}
+          rows={3}
+          className="w-full rounded-lg bg-black/40 border border-gray-800 px-2.5 py-2 text-xs text-gray-200 focus:outline-none focus:border-rose-500/50 placeholder:text-gray-700 leading-relaxed"
+          placeholder="Wide shot of the workshop, neon glow on the floor."
+        />
+      </Field>
+
+      <Field label="Image prompt" hint="Sent to image generation. Trigger words, lighting, lens, mood.">
+        <textarea
+          value={draft.image_prompt}
+          onChange={(e) => setDraft((d) => ({ ...d, image_prompt: e.target.value }))}
+          rows={4}
+          className="w-full rounded-lg bg-black/40 border border-gray-800 px-2.5 py-2 text-xs text-gray-200 focus:outline-none focus:border-rose-500/50 placeholder:text-gray-700 leading-relaxed font-mono"
+          placeholder="rigo, workshop interior, neon underglow, cinematic anamorphic lens, moody lighting"
+        />
+      </Field>
+
+      <Field label="Video prompt" hint="Camera move + motion for the animate step.">
+        <textarea
+          value={draft.motion_prompt}
+          onChange={(e) => setDraft((d) => ({ ...d, motion_prompt: e.target.value }))}
+          rows={3}
+          className="w-full rounded-lg bg-black/40 border border-gray-800 px-2.5 py-2 text-xs text-gray-200 focus:outline-none focus:border-rose-500/50 placeholder:text-gray-700 leading-relaxed font-mono"
+          placeholder="Slow push in, suit plates locking into place."
+        />
+      </Field>
+
+      <div className="grid grid-cols-2 gap-2 text-[11px] text-gray-500">
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Status</p>
+          <p className="text-gray-300 mt-0.5">{shot.status}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Duration</p>
+          <p className="text-gray-300 mt-0.5">{shot.duration_seconds}s</p>
+        </div>
+      </div>
+
+      <div className="space-y-2 pt-2 border-t border-gray-800/40">
+        <button
+          onClick={() => onPatch(draft)}
+          disabled={!dirty || saving}
+          className="w-full inline-flex items-center justify-center gap-1.5 rounded-xl border border-gray-700 bg-gray-900/60 hover:bg-gray-800 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-2 text-xs font-medium text-gray-200 transition"
+        >
+          <Save className="w-3.5 h-3.5" /> {saving ? "Saving…" : dirty ? "Save changes" : "Saved"}
+        </button>
+        {(shot.status === 'rendering_image' || shot.status === 'animating') ? (
+          <div className="rounded-xl border border-amber-800/30 bg-amber-950/20 px-3 py-2 text-xs text-amber-400 text-center font-medium">
+            <span className="inline-block w-2 h-2 rounded-full bg-amber-400 animate-pulse mr-1.5 align-middle" />
+            {shot.status === 'animating' ? 'Animating…' : 'Generating…'}
+          </div>
+        ) : phase === "outline" || !shot.image_file ? (
+          <button
+            onClick={() => { if (!saving) onGenerate(); }}
+            disabled={saving}
+            className="w-full inline-flex items-center justify-center gap-1.5 rounded-xl border border-rose-500/40 bg-rose-600/15 hover:bg-rose-600/25 disabled:opacity-50 px-3 py-2 text-xs font-medium text-rose-100 transition"
+          >
+            <Wand2 className="w-3.5 h-3.5" /> {shot.image_file ? "Regenerate image" : "Generate image"}
+          </button>
+        ) : (
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={() => { if (!saving) onGenerate(); }}
+              disabled={saving}
+              className="inline-flex items-center justify-center gap-1.5 rounded-xl border border-gray-700 bg-gray-900/60 hover:bg-gray-800 disabled:opacity-50 px-3 py-2 text-xs font-medium text-gray-200 transition"
+            >
+              <Wand2 className="w-3.5 h-3.5" /> Re-image
+            </button>
+            <button
+              onClick={() => { if (!saving) onAnimate(); }}
+              disabled={saving}
+              className="inline-flex items-center justify-center gap-1.5 rounded-xl border border-violet-500/40 bg-violet-600/15 hover:bg-violet-600/25 disabled:opacity-50 px-3 py-2 text-xs font-medium text-violet-100 transition"
+            >
+              <Play className="w-3.5 h-3.5" /> Animate
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <div>
+        <p className="text-[11px] font-medium text-gray-300">{label}</p>
+        {hint && <p className="text-[10px] text-gray-600 leading-relaxed">{hint}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function ProjectSummary({ project }: { project: Project }) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <p className="text-[11px] font-medium text-gray-300">Title</p>
+        <p className="text-sm text-gray-100 mt-0.5">{project.title}</p>
+      </div>
+      <div>
+        <p className="text-[11px] font-medium text-gray-300">Description</p>
+        <p className="text-xs text-gray-400 mt-0.5 leading-relaxed">{project.description || <span className="italic text-gray-600">no description</span>}</p>
+      </div>
+      <div className="grid grid-cols-2 gap-2 text-[11px]">
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Aspect</p>
+          <p className="text-gray-300 mt-0.5 font-mono">{project.aspect_ratio}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Duration</p>
+          <p className="text-gray-300 mt-0.5">{project.duration_seconds ?? "—"}s</p>
+        </div>
+      </div>
+      {project.characters.length > 0 && (
+        <div>
+          <p className="text-[11px] font-medium text-gray-300 mb-1">Cast</p>
+          <div className="flex flex-wrap gap-1">
+            {project.characters.map((id) => (
+              <span key={id} className="inline-flex rounded-md border border-gray-800 bg-gray-900/40 px-2 py-0.5 text-[11px] text-gray-300 font-mono">{id}</span>
+            ))}
+          </div>
+        </div>
+      )}
+      <div className="pt-2 border-t border-gray-800/40">
+        <p className="text-[11px] font-medium text-gray-300 mb-2">Share (coming soon)</p>
+        <div className="grid grid-cols-1 gap-1.5">
+          <button disabled className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5 text-[11px] text-gray-500 text-left flex items-center gap-2 opacity-50 cursor-not-allowed">
+            <span className="text-rose-400">♪</span> TikTok
+          </button>
+          <button disabled className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5 text-[11px] text-gray-500 text-left flex items-center gap-2 opacity-50 cursor-not-allowed">
+            <span className="text-red-400">▶</span> YouTube Shorts
+          </button>
+          <button disabled className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5 text-[11px] text-gray-500 text-left flex items-center gap-2 opacity-50 cursor-not-allowed">
+            <span className="text-pink-400">▣</span> Instagram Reels
+          </button>
+          <button disabled className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5 text-[11px] text-gray-500 text-left flex items-center gap-2 opacity-50 cursor-not-allowed">
+            <span className="text-purple-400">◉</span> X / Twitter
+          </button>
+        </div>
+      </div>
+      <p className="text-[11px] text-gray-600 leading-relaxed pt-2 border-t border-gray-800/40">
+        Pick a scene from the Projects tab to start editing shots, or ask your agent to draft an outline.
+      </p>
+    </div>
+  );
+}
+
+function RenderConfirmModal({
+  project, scenes, shots, onConfirm, onCancel,
+}: {
+  project: Project;
+  scenes: Scene[];
+  shots: Shot[];
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const animated = shots.filter((s) => s.video_file);
+  const imageOnly = shots.filter((s) => s.image_file && !s.video_file);
+  const noMedia = shots.filter((s) => !s.image_file && !s.video_file);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm" onClick={onCancel}>
+      <div
+        className="w-full max-w-md mx-4 rounded-2xl border border-gray-700/60 bg-gray-950 shadow-2xl flex flex-col max-h-[80vh]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800/60 flex-shrink-0">
+          <div className="flex items-center gap-2">
+            <Clapperboard className="w-4 h-4 text-violet-400" />
+            <h2 className="text-sm font-semibold text-gray-100">Render final video</h2>
+          </div>
+          <button onClick={onCancel} className="text-gray-600 hover:text-gray-300 transition">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Project meta */}
+        <div className="px-5 py-2.5 border-b border-gray-800/40 flex items-center gap-2 text-[11px] text-gray-400 flex-shrink-0">
+          <span className="font-medium text-gray-200">{project.title}</span>
+          <span className="text-gray-700">·</span>
+          <span>{project.aspect_ratio}</span>
+          {project.duration_seconds != null && (
+            <><span className="text-gray-700">·</span><span>{project.duration_seconds}s</span></>
+          )}
+        </div>
+
+        {/* Shot list */}
+        <div className="flex-1 overflow-y-auto px-5 py-3 space-y-3 min-h-0">
+          {scenes.map((scene) => {
+            const sceneShots = shots
+              .filter((s) => s.scene_id === scene.id)
+              .sort((a, b) => a.shot_number - b.shot_number);
+            if (sceneShots.length === 0) return null;
+            return (
+              <div key={scene.id}>
+                <p className="text-[10px] uppercase tracking-wider text-gray-500 mb-1.5 font-medium">
+                  {scene.title || `Scene ${scene.scene_number}`}
+                </p>
+                <div className="space-y-1">
+                  {sceneShots.map((shot) => {
+                    const hasVideo = !!shot.video_file;
+                    const hasImage = !!shot.image_file;
+                    return (
+                      <div key={shot.id} className="flex items-start gap-2.5 rounded-lg bg-gray-900/50 px-2.5 py-2">
+                        <span className="flex-shrink-0 mt-0.5">
+                          {hasVideo
+                            ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
+                            : hasImage
+                            ? <AlertTriangle className="w-3.5 h-3.5 text-amber-400" />
+                            : <X className="w-3.5 h-3.5 text-red-500/60" />}
+                        </span>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-1.5 mb-0.5">
+                            <span className="text-[10px] font-mono text-gray-500">shot {shot.shot_number}</span>
+                            <span className={`text-[9px] uppercase tracking-wider font-medium ${
+                              hasVideo ? "text-emerald-400" : hasImage ? "text-amber-400" : "text-red-400/60"
+                            }`}>
+                              {hasVideo ? "animated" : hasImage ? "image only" : "no media"}
+                            </span>
+                          </div>
+                          {shot.subtitle ? (
+                            <p className="text-[11px] text-gray-400 leading-relaxed line-clamp-2 italic">"{shot.subtitle}"</p>
+                          ) : (
+                            <p className="text-[11px] text-gray-600 italic">no subtitle</p>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Warnings */}
+        {(imageOnly.length > 0 || noMedia.length > 0) && (
+          <div className="px-5 py-3 border-t border-gray-800/40 space-y-1.5 flex-shrink-0">
+            {imageOnly.length > 0 && (
+              <p className="text-[11px] text-amber-300/80 leading-relaxed">
+                <AlertTriangle className="w-3 h-3 inline mr-1 mb-0.5" />
+                {imageOnly.length === 1 ? "1 shot" : `${imageOnly.length} shots`} without animation — will render as a still image.
+              </p>
+            )}
+            {noMedia.length > 0 && (
+              <p className="text-[11px] text-red-400/70 leading-relaxed">
+                <X className="w-3 h-3 inline mr-1 mb-0.5" />
+                {noMedia.length} shot{noMedia.length > 1 ? "s" : ""} with no media — will be skipped.
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Stats row + actions */}
+        <div className="flex items-center justify-between gap-3 px-5 py-4 border-t border-gray-800/60 flex-shrink-0">
+          <div className="flex items-center gap-3 text-[11px]">
+            {animated.length > 0 && <span className="text-emerald-400 font-medium">{animated.length} animated</span>}
+            {imageOnly.length > 0 && <span className="text-amber-400 font-medium">{imageOnly.length} image-only</span>}
+            {noMedia.length > 0 && <span className="text-red-400/70 font-medium">{noMedia.length} empty</span>}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onCancel}
+              className="px-4 py-1.5 rounded-xl border border-gray-700 bg-gray-900/50 hover:bg-gray-900 text-xs text-gray-300 hover:text-gray-100 transition"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onConfirm}
+              className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-xl border border-violet-500/40 bg-violet-600/20 hover:bg-violet-600/30 text-xs font-medium text-violet-100 transition"
+            >
+              <Clapperboard className="w-3.5 h-3.5" /> Render
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SceneSummary({ scene }: { scene: Scene }) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <p className="text-[11px] font-medium text-gray-300">Title</p>
+        <p className="text-sm text-gray-100 mt-0.5">{scene.title || "Untitled scene"}</p>
+      </div>
+      <div>
+        <p className="text-[11px] font-medium text-gray-300">Summary</p>
+        <p className="text-xs text-gray-400 mt-0.5 leading-relaxed">{scene.summary || <span className="italic text-gray-600">no summary</span>}</p>
+      </div>
+      <div className="grid grid-cols-2 gap-2 text-[11px]">
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Setting</p>
+          <p className="text-gray-300 mt-0.5 capitalize">{scene.setting}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Weather</p>
+          <p className="text-gray-300 mt-0.5 capitalize">{scene.weather}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Location</p>
+          <p className="text-gray-300 mt-0.5">{scene.location || "—"}</p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 px-2.5 py-1.5">
+          <p className="text-gray-600 text-[10px] uppercase tracking-wider">Time</p>
+          <p className="text-gray-300 mt-0.5">{scene.time_of_day || "—"}</p>
+        </div>
+      </div>
+      <p className="text-[11px] text-gray-600 leading-relaxed pt-2 border-t border-gray-800/40">
+        Pick a shot in the center to start editing prompts.
+      </p>
+    </div>
+  );
+}

studio/src/components/ProjectFilmsView.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from "react";
+import { ArrowLeft, Film, Play, Download, Trash2 } from "lucide-react";
+
+interface FilmItem {
+  id: string;
+  render_number: number;
+  final_video_url: string | null;
+  created_at: string;
+  status: string;
+}
+
+interface Project {
+  id: string;
+  title: string;
+  aspect_ratio: string;
+}
+
+interface ProjectFilmsViewProps {
+  projectId: string;
+  onBack: () => void;
+}
+
+export function ProjectFilmsView({ projectId, onBack }: ProjectFilmsViewProps) {
+  const [project, setProject] = useState<Project | null>(null);
+  const [films, setFilms] = useState<FilmItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  async function load() {
+    setLoading(true);
+    setError(null);
+    try {
+      const [projectRes, filmRes] = await Promise.all([
+        fetch(`/api/projects/${projectId}`),
+        fetch(`/api/projects/${projectId}/render`),
+      ]);
+      if (!projectRes.ok) throw new Error(`Project ${projectRes.status}`);
+      if (!filmRes.ok) throw new Error(`Films ${filmRes.status}`);
+      const projectData = await projectRes.json();
+      const filmData = await filmRes.json();
+      setProject(projectData.project);
+      setFilms(filmData.renders || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, [projectId]);
+
+  async function deleteFilm(filmId: string) {
+    try {
+      const res = await fetch(`/api/projects/${projectId}/renders/${filmId}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Delete failed");
+      setFilms((prev) => prev.filter((f) => f.id !== filmId));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Delete failed");
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center bg-black">
+        <p className="text-sm text-gray-500">Loading films…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-full flex items-center justify-center bg-black">
+        <p className="text-sm text-red-400">{error}</p>
+      </div>
+    );
+  }
+
+  const ar = project?.aspect_ratio ?? "9:16";
+  const aspectClass = ar === "16:9" ? "aspect-[16/9]" : ar === "1:1" ? "aspect-square" : "aspect-[9/16]";
+  const gridClass = ar === "16:9"
+    ? "grid gap-6 sm:grid-cols-2 max-w-4xl mx-auto"
+    : ar === "1:1"
+    ? "grid gap-4 sm:grid-cols-2 lg:grid-cols-3 max-w-3xl mx-auto"
+    : "grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 max-w-3xl mx-auto";
+
+  return (
+    <div className="h-full flex flex-col bg-black">
+      {/* Top bar */}
+      <div className="flex items-center gap-3 px-5 py-2.5 border-b border-gray-800/60 bg-gray-950/60 flex-shrink-0">
+        <button
+          onClick={onBack}
+          className="inline-flex items-center gap-1.5 rounded-xl border border-gray-800 bg-gray-900/50 hover:bg-gray-900 hover:border-gray-700 px-3 py-1.5 text-xs text-gray-400 hover:text-gray-200 transition"
+        >
+          <ArrowLeft className="w-3.5 h-3.5" /> Back to project
+        </button>
+        <div>
+          <p className="text-[10px] uppercase tracking-[0.22em] text-rose-400/70">Films</p>
+          <h1 className="text-base font-semibold tracking-tight text-gray-100">{project?.title}</h1>
+        </div>
+        <span className="ml-auto text-[11px] text-gray-500 font-mono">{films.length} film{films.length !== 1 ? "s" : ""}</span>
+      </div>
+
+      {/* Main */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {films.length === 0 ? (
+          <div className="text-center py-20">
+            <Film className="w-8 h-8 text-gray-700 mx-auto mb-3" />
+            <p className="text-sm text-gray-500">No films yet.</p>
+            <p className="text-xs text-gray-600 mt-1">Go back and hit Re-render to create one.</p>
+          </div>
+        ) : (
+          <div className={gridClass}>
+            {films.map((f) => (
+              <div
+                key={f.id}
+                className="rounded-2xl border border-gray-800 bg-gray-900/40 overflow-hidden hover:border-gray-700 transition"
+              >
+                <div className={`${aspectClass} bg-black relative`}>
+                  {f.final_video_url ? (
+                    <video
+                      src={f.final_video_url}
+                      className="w-full h-full object-contain"
+                      controls
+                      preload="metadata"
+                    />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center text-gray-700">
+                      <Film className="w-8 h-8" />
+                    </div>
+                  )}
+                  <span className="absolute top-2 left-2 rounded-md bg-black/70 px-1.5 py-0.5 text-[10px] font-mono text-gray-200">
+                    #{f.render_number}
+                  </span>
+                </div>
+                <div className="p-3 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[11px] text-gray-400">{new Date(f.created_at).toLocaleString()}</span>
+                    <span className={`text-[10px] uppercase px-1.5 py-0.5 rounded ${f.status === "completed" ? "bg-emerald-900/40 text-emerald-400" : "bg-amber-900/40 text-amber-400"}`}>
+                      {f.status}
+                    </span>
+                  </div>
+                  <div className="flex gap-2">
+                    <a
+                      href={f.final_video_url || "#"}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-emerald-500/30 bg-emerald-600/10 hover:bg-emerald-600/20 px-2 py-1.5 text-[11px] text-emerald-300 transition"
+                    >
+                      <Play className="w-3 h-3" /> Watch
+                    </a>
+                    <a
+                      href={f.final_video_url || "#"}
+                      download
+                      className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-700 bg-gray-900/60 hover:bg-gray-800 px-2 py-1.5 text-[11px] text-gray-300 transition"
+                    >
+                      <Download className="w-3 h-3" /> Download
+                    </a>
+                    <button
+                      onClick={() => deleteFilm(f.id)}
+                      className="inline-flex items-center justify-center gap-1 rounded-lg border border-gray-800 hover:bg-red-900/30 hover:border-red-800/50 px-2 py-1.5 text-[11px] text-gray-600 hover:text-red-400 transition"
+                      title="Delete film"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

studio/src/components/ProjectsGuide.tsx

@@ -0,0 +1,106 @@
+import { Film, Terminal, Sparkles, ChevronDown } from "lucide-react";
+
+export function ProjectsGuide({ compact = false }: { compact?: boolean }) {
+  return (
+    <div className={compact ? "h-full overflow-y-auto p-4 space-y-5" : "max-w-2xl mx-auto p-8 space-y-8"}>
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-violet-500/20 ring-1 ring-white/10">
+          <Film className="w-6 h-6 text-white" />
+        </div>
+        <div>
+          <h2 className={compact ? "text-lg font-bold tracking-tight" : "text-xl font-bold tracking-tight"}>Projects</h2>
+          <p className="text-sm text-gray-500">Tell your AI agent what to make. It handles the rest.</p>
+        </div>
+      </div>
+
+      {/* Core instruction */}
+      <div className={compact ? "rounded-2xl border border-violet-600/20 bg-gradient-to-b from-violet-950/10 to-gray-900/20 p-4" : "rounded-2xl border border-violet-600/20 bg-gradient-to-b from-violet-950/10 to-gray-900/20 p-6"}>
+        <div className="flex items-center gap-2 mb-4">
+          <Terminal className="w-4 h-4 text-violet-400" />
+          <span className="text-sm font-semibold text-violet-200">How it works</span>
+        </div>
+        <p className="text-sm text-gray-300 leading-relaxed mb-4">
+          You talk to your AI agent like you'd talk to a person. Tell it what you want — the agent plans the scenes, picks the shots, generates the images, animates them, and stitches everything together. You just review and say yes or no.
+        </p>
+        <p className="text-xs text-gray-500">That's it. No settings. No config. Just talk.</p>
+      </div>
+
+      {/* Example prompts — simple natural language */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
+          <Sparkles className="w-4 h-4 text-amber-400" />
+          What to say to your agent
+        </h3>
+
+        {[
+          {
+            type: "Story video",
+            say: "Make me a short cyberpunk teaser. Dark city, rain, neon lights. My character is walking through it, and at the end he gets a phone call that changes everything. About a minute long, cinematic style.",
+          },
+          {
+            type: "Character image",
+            say: "Create a 30-second montage of my character. Show different angles and expressions — serious, smiling, looking away. Studio lighting, clean background. I want to use these as profile pictures.",
+          },
+          {
+            type: "Product demo",
+            say: "I need a 45-second product walkthrough. Show my character using the app on their phone, then switching to a laptop, then reacting to the results on screen. Modern office setting, natural light.",
+          },
+          {
+            type: "Social media reel",
+            say: "Make me an Instagram reel — vertical format, quick cuts, high energy. My character doing everyday things in a cinematic way. Coffee, walking, looking at the skyline. 15 seconds.",
+          },
+          {
+            type: "Anime short",
+            say: "An anime-style short about a lone wanderer entering a haunted forest. Studio Ghibli vibes. About 45 seconds. Slow, atmospheric, beautiful.",
+          },
+          {
+            type: "Kids' storybook",
+            say: "A children's storybook style video. My character as the hero of a fairy tale — castle, forest, friendly dragon. Gentle narration vibe. One minute.",
+          },
+        ].map((ex, i) => (
+          <div key={i} className="rounded-xl border border-gray-800/40 bg-gray-900/20 p-4 hover:border-gray-600 transition">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-[10px] uppercase tracking-wider text-gray-500 bg-gray-800/60 rounded-md px-2 py-0.5">{ex.type}</span>
+            </div>
+            <p className="text-sm text-gray-300 leading-relaxed italic">"{ex.say}"</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Iterate */}
+      <div className="rounded-2xl border border-gray-800/40 bg-gray-900/20 p-5">
+        <h3 className="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
+          <Terminal className="w-4 h-4 text-rose-400" />
+          After you see it, change anything
+        </h3>
+        <div className="space-y-1.5 text-sm text-gray-400">
+          <p>"I don't like shot 3 — try a wider angle"</p>
+          <p>"Make scene 2 darker, more moody"</p>
+          <p>"Swap my outfit to a hoodie in all shots"</p>
+          <p>"Add a slow-motion moment at the end"</p>
+          <p>"Cut the whole thing down to 30 seconds"</p>
+        </div>
+      </div>
+
+      {/* API peek — collapsed */}
+      <details className="rounded-2xl border border-gray-800/30 bg-gray-900/10 overflow-hidden">
+        <summary className="px-4 py-2.5 cursor-pointer hover:bg-gray-800/20 transition flex items-center gap-2 list-none">
+          <ChevronDown className="w-3 h-3 text-gray-600" />
+          <span className="text-[11px] text-gray-600">API endpoints (for developers)</span>
+        </summary>
+        <div className="px-4 pb-4">
+          <pre className="text-[10px] text-gray-600 font-mono leading-relaxed">
+{`POST   /api/projects                          create a project
+POST   /api/projects/:id/scenes                add a scene
+POST   /api/projects/:id/scenes/:sid/shots     add a shot
+POST   .../shots/:sid/generate-image           generate image
+POST   .../shots/:sid/animate                  animate shot
+GET    /api/projects/:id                       view full project
+POST   /api/projects/:id/export                export MP4`}
+          </pre>
+        </div>
+      </details>
+    </div>
+  );
+}

studio/src/components/ProjectsView.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from "react";
+import { Bot, Clock, Film, RefreshCw, Sparkles, UserCircle } from "lucide-react";
+
+interface Project {
+  id: string;
+  title: string;
+  content?: string | null;
+  synopsis?: string | null;
+  description?: string | null;
+  aspect_ratio: string;
+  duration_seconds: number | null;
+  status: string;
+  characters: string[];
+  metadata: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+}
+
+interface ProjectsResponse {
+  projects?: Project[];
+}
+
+interface ProjectsViewProps {
+  compact?: boolean;
+  onOpenProject?: (id: string) => void;
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  draft: "border-gray-700/60 bg-gray-800/40 text-gray-400",
+  planning: "border-violet-500/30 bg-violet-500/10 text-violet-300",
+  ready: "border-emerald-500/30 bg-emerald-500/10 text-emerald-300",
+  rendering: "border-amber-500/30 bg-amber-500/10 text-amber-300",
+  completed: "border-blue-500/30 bg-blue-500/10 text-blue-300",
+  failed: "border-red-500/30 bg-red-500/10 text-red-300",
+};
+
+function formatRelative(iso?: string): string {
+  if (!iso) return "—";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "—";
+  const diff = Date.now() - then;
+  const mins = Math.round(diff / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  return `${days}d ago`;
+}
+
+function projectText(project: Project): string | null {
+  return project.synopsis || project.content || project.description || null;
+}
+
+export function ProjectsView({ compact = false, onOpenProject }: ProjectsViewProps) {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  async function load() {
+    setError(null);
+    try {
+      const response = await fetch("/api/projects");
+      if (!response.ok) throw new Error(`/api/projects returned ${response.status}`);
+      const data = await response.json() as ProjectsResponse;
+      setProjects(data.projects || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load projects");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <div className={compact ? "h-full overflow-y-auto p-4 space-y-5" : "h-full overflow-y-auto p-8 space-y-6"}>
+      <section className="space-y-2">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-violet-500/20 ring-1 ring-white/10">
+            <Film className="w-5 h-5 text-white" />
+          </div>
+          <div className="min-w-0">
+            <h2 className="text-sm font-bold tracking-tight text-gray-100">Projects</h2>
+            <p className="text-xs text-gray-500 leading-relaxed">Multi-shot stories your agent is directing.</p>
+          </div>
+          <button
+            onClick={() => { setLoading(true); load(); }}
+            className="ml-auto w-8 h-8 rounded-xl border border-gray-800 bg-gray-900/40 text-gray-500 hover:text-gray-200 hover:border-gray-600 transition flex items-center justify-center"
+            title="Refresh projects"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} />
+          </button>
+        </div>
+      </section>
+
+      <section className="rounded-2xl border border-rose-600/20 bg-gradient-to-b from-rose-950/10 to-gray-950 p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Sparkles className="w-4 h-4 text-rose-300" />
+          <p className="text-xs font-semibold text-rose-200 uppercase tracking-wider">What this tab is for</p>
+        </div>
+        <p className="text-xs text-gray-300 leading-relaxed">
+          This is not raw generation. This is where a rough idea becomes a structured short: synopsis, scenes, shots, and image prompts.
+        </p>
+        <div className="rounded-xl border border-gray-800/60 bg-black/30 p-3 space-y-1.5">
+          <p className="text-[10px] uppercase tracking-wider text-gray-500">Tell your agent</p>
+          <p className="text-[11px] text-gray-300 italic leading-relaxed">“Put me inside an Iron Man-style short. Workshop, helmet reveal, first flight. Around 30 seconds.”</p>
+          <p className="text-[11px] text-gray-300 italic leading-relaxed">“Make a dark cyberpunk teaser with my character walking through neon rain.”</p>
+        </div>
+      </section>
+
+      <section className="rounded-2xl border border-violet-600/20 bg-gradient-to-b from-violet-950/10 to-gray-950 p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Bot className="w-4 h-4 text-violet-300" />
+          <p className="text-xs font-semibold text-violet-200 uppercase tracking-wider">Agent workflow</p>
+        </div>
+        <ol className="text-[11px] text-gray-400 space-y-1.5 leading-relaxed list-decimal pl-4">
+          <li>Agent writes the project outline in conversation.</li>
+          <li>Agent creates project, scenes, and shots through the API.</li>
+          <li>User reviews the outline here before rendering.</li>
+          <li>Agent generates storyboard images shot by shot.</li>
+          <li>Approved images are animated into video clips.</li>
+        </ol>
+      </section>
+
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Existing projects</p>
+          <span className="text-[10px] text-gray-600">{projects.length}</span>
+        </div>
+
+        {error && (
+          <div className="rounded-xl border border-red-500/30 bg-red-950/20 px-3 py-2 text-xs text-red-300">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && projects.length === 0 && (
+          <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-5 text-center">
+            <UserCircle className="w-5 h-5 text-gray-600 mx-auto mb-2" />
+            <p className="text-xs text-gray-400">No projects yet.</p>
+            <p className="text-[11px] text-gray-600 mt-1 leading-relaxed">Ask your agent to draft one, then it will appear here.</p>
+          </div>
+        )}
+
+        {projects.map((project) => {
+          const statusStyle = STATUS_STYLES[project.status] || STATUS_STYLES.draft;
+          const text = projectText(project);
+          return (
+            <article
+              key={project.id}
+              onClick={() => onOpenProject?.(project.id)}
+              className={`rounded-xl border border-gray-800/60 bg-gray-900/30 p-3 space-y-2 ${onOpenProject ? "cursor-pointer hover:bg-gray-900/50 hover:border-gray-700 transition" : ""}`}
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <h3 className="text-xs font-semibold text-gray-100 truncate">{project.title}</h3>
+                  {text && <p className="text-[11px] text-gray-500 mt-1 line-clamp-2 leading-relaxed">{text}</p>}
+                </div>
+                <span className={`flex-shrink-0 text-[9px] uppercase tracking-wider rounded-full border px-1.5 py-0.5 ${statusStyle}`}>
+                  {project.status}
+                </span>
+              </div>
+              <div className="flex items-center gap-3 pt-2 border-t border-gray-800/40 text-[10px] text-gray-600">
+                <span className="font-mono">{project.aspect_ratio}</span>
+                {project.duration_seconds !== null && (
+                  <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{project.duration_seconds}s</span>
+                )}
+                {(project.metadata?.final_video || (project as any).render_count > 0) && (
+                  <span className="flex items-center gap-1 text-emerald-400">
+                    <Film className="w-3 h-3" />
+                    {(project as any).render_count || 1} render{(project as any).render_count > 1 ? "s" : ""}
+                  </span>
+                )}
+                {(project.metadata?.final_video as string | undefined) && (
+                  <a
+                    href={`/media/${project.metadata.final_video}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="text-emerald-400 hover:text-emerald-300 underline underline-offset-2"
+                  >
+                    Watch
+                  </a>
+                )}
+                <span className="ml-auto">{formatRelative(project.updated_at)}</span>
+              </div>
+            </article>
+          );
+        })}
+
+        {loading && projects.length === 0 && !error && (
+          <div className="text-center py-8">
+            <RefreshCw className="w-5 h-5 text-gray-600 mx-auto animate-spin" />
+            <p className="text-xs text-gray-600 mt-2">Loading projects…</p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

studio/src/components/sidebar/AppSidebar.tsx

@@ -0,0 +1,422 @@
+import { useState, useEffect } from "react";
+import { Info, Settings, Terminal, X, Cpu, Users, BookOpen, Search, Sparkles, Bot, Image, Box, Film } from "lucide-react";
+import type { LoraCheckpoint, ProjectModeData } from "../../types";
+import { GenerateTab } from "./GenerateTab";
+import { NodesTab } from "./NodesTab";
+import { ProjectSidebar } from "./ProjectSidebar";
+import { ProjectsGuide } from "../ProjectsGuide";
+
+export type SidebarTab = "generate" | "characters" | "agents" | "projects" | "guide" | "info" | "nodes" | "settings" | "dev";
+export const SIDEBAR_WIDTH = 380;
+
+interface CharacterSummary {
+  id: string;
+  name: string;
+  trigger: string | null;
+  kind: string | null;
+  loras: Record<string, unknown>[];
+  source_images: string[];
+  defaults: Record<string, unknown>;
+}
+
+interface AppSidebarProps {
+  activeTab: SidebarTab;
+  onTabChange: (tab: SidebarTab) => void;
+  onClose: () => void;
+  checkpoints: LoraCheckpoint[];
+  onQueued?: () => void;
+  onSelectCharacter?: (characterId: string) => void;
+  projectMode?: ProjectModeData;
+}
+
+export function AppSidebar({ activeTab, onTabChange, onClose, checkpoints, onQueued, onSelectCharacter, projectMode }: AppSidebarProps) {
+  const topTabs: { id: SidebarTab; icon: React.ReactNode; label: string; visible: boolean }[] = [
+    { id: "generate", icon: <Image className="w-4 h-4" />, label: "Generate", visible: true },
+    { id: "characters", icon: <Users className="w-4 h-4" />, label: "Characters & LoRA Training", visible: true },
+    { id: "agents", icon: <Bot className="w-4 h-4" />, label: "Agents", visible: true },
+    { id: "projects", icon: <Film className="w-4 h-4" />, label: "Projects", visible: true },
+    { id: "guide", icon: <BookOpen className="w-4 h-4" />, label: "Guide", visible: true },
+    { id: "info", icon: <Info className="w-4 h-4" />, label: "Info", visible: true },
+    { id: "nodes", icon: <Cpu className="w-4 h-4" />, label: "Nodes", visible: true },
+  ];
+
+  const bottomTabs: { id: SidebarTab; icon: React.ReactNode; label: string; visible: boolean }[] = [
+    { id: "dev", icon: <Terminal className="w-4 h-4" />, label: "Logs", visible: true },
+    { id: "settings", icon: <Settings className="w-4 h-4" />, label: "Settings", visible: true },
+  ];
+
+  const visibleTopTabs = topTabs.filter((tab) => tab.visible);
+  const visibleBottomTabs = bottomTabs.filter((tab) => tab.visible);
+  const visibleTabs = [...visibleTopTabs, ...visibleBottomTabs];
+
+  return (
+    <div className="h-screen flex flex-shrink-0 border-r border-gray-800/60" style={{ width: `${SIDEBAR_WIDTH}px` }}>
+      {/* Icon rail */}
+      <div className="w-12 flex-shrink-0 bg-gray-950/60 border-r border-gray-800/40 flex flex-col items-center py-3 gap-1">
+        {visibleTopTabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => onTabChange(tab.id)}
+            title={tab.label}
+            className={`w-9 h-9 rounded-xl flex items-center justify-center transition-all relative group ${
+              activeTab === tab.id
+                ? "bg-rose-600/10 text-rose-400 ring-1 ring-rose-500/20"
+                : "text-gray-600 hover:text-gray-300 hover:bg-gray-900/60"
+            }`}
+          >
+            {tab.icon}
+            {activeTab === tab.id && (
+              <span className="absolute -left-1 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-rose-500 rounded-full" />
+            )}
+          </button>
+        ))}
+
+        <div className="mt-auto flex flex-col items-center gap-1">
+          {visibleBottomTabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              title={tab.label}
+              className={`w-9 h-9 rounded-xl flex items-center justify-center transition-all relative ${
+                activeTab === tab.id
+                  ? "bg-rose-600/10 text-rose-400 ring-1 ring-rose-500/20"
+                  : "text-gray-600 hover:text-gray-300 hover:bg-gray-900/60"
+              }`}
+            >
+              {tab.icon}
+            </button>
+          ))}
+          <button
+            onClick={onClose}
+            title="Close sidebar"
+            className="w-9 h-9 rounded-xl flex items-center justify-center text-gray-700 hover:text-gray-400 hover:bg-gray-900/60 transition mt-1"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Content panel */}
+      <div className="flex-1 flex flex-col min-w-0 bg-gray-950/40 overflow-hidden">
+        <div className="flex items-center px-4 py-2.5 border-b border-gray-800/40 flex-shrink-0">
+          <span className="text-sm font-semibold text-gray-300 tracking-tight">
+            {projectMode && activeTab === "projects" ? "Scenes" : visibleTabs.find((tab) => tab.id === activeTab)?.label}
+          </span>
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {activeTab === "characters" && <CharactersTab onSelectCharacter={onSelectCharacter} />}
+          {activeTab === "generate" && <GenerateTab checkpoints={checkpoints} onQueued={onQueued} />}
+          {activeTab === "agents" && <AgentsTab />}
+          {activeTab === "projects" && (projectMode ? <ProjectSidebar data={projectMode} onDeleteScene={(id) => projectMode.onDeleteScene(id)} /> : <ProjectsGuide compact />)}
+          {activeTab === "guide" && <GuideTab />}
+          {activeTab === "info" && <PlaceholderTab title="Info" body="Select media to inspect generated outputs, prompts, and metadata." />}
+          {activeTab === "nodes" && <NodesTab />}
+          {activeTab === "settings" && <PlaceholderTab title="Settings" body="Configure generation, training, and character workflow settings." />}
+          {activeTab === "dev" && <PlaceholderTab title="Logs" body="Recent backend and generation events." />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CharactersTab({ onSelectCharacter }: { onSelectCharacter?: (characterId: string) => void }) {
+  const [characters, setCharacters] = useState<CharacterSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/characters")
+      .then((r) => r.json())
+      .then((d) => setCharacters(d.characters || []))
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+      <div className="h-full overflow-y-auto p-4 space-y-4">
+      {/* Character cards first — your owned assets */}
+      <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-3 space-y-2">
+        <div className="flex items-center justify-between gap-2">
+          <p className="text-xs font-semibold text-gray-300">Your character assets</p>
+          <span className="text-[10px] uppercase tracking-wider text-emerald-300/80 border border-emerald-500/20 bg-emerald-500/5 rounded-full px-2 py-0.5">Owned</span>
+        </div>
+        <p className="text-[11px] text-gray-500 leading-relaxed">
+          These are characters you created or own the rights to use. Each one is backed by a fine-tuned LoRA trained on AMD MI300X.
+        </p>
+      </div>
+
+      {loading && <p className="text-xs text-gray-500 py-2">Loading...</p>}
+      {error && <p className="text-xs text-red-400 py-2">{error}</p>}
+      {!loading && characters.length === 0 && (
+        <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-6 text-center">
+          <Users className="w-5 h-5 text-gray-600 mx-auto mb-2" />
+          <p className="text-xs text-gray-500">No characters registered yet.</p>
+        </div>
+      )}
+
+      {characters.map((ch) => {
+        const avatarUrl = ch.source_images.length > 0
+          ? (ch.source_images[0].startsWith("/") ? ch.source_images[0] : `/media/${ch.source_images[0]}`)
+          : null;
+
+        return (
+        <div
+          key={ch.id}
+          className="rounded-xl border border-gray-800/60 bg-gray-900/30 hover:bg-gray-900/50 hover:border-gray-600 p-3.5 cursor-pointer transition-all group"
+          onClick={() => onSelectCharacter?.(ch.id)}
+        >
+          <div className="flex items-center gap-3 mb-2.5">
+            <div className="w-10 h-10 rounded-xl overflow-hidden flex-shrink-0 ring-1 ring-white/10">
+              {avatarUrl ? (
+                <img src={avatarUrl} alt={ch.name} className="w-full h-full object-cover" />
+              ) : (
+                <div className="w-full h-full bg-gradient-to-br from-rose-500 to-amber-400 flex items-center justify-center">
+                  <span className="text-xs font-bold text-white">{ch.name.charAt(0).toUpperCase()}</span>
+                </div>
+              )}
+            </div>
+            <div className="min-w-0">
+              <div className="flex items-center gap-1.5">
+                <span className="text-sm font-semibold text-gray-200 truncate">{ch.name}</span>
+                {ch.kind === "human" && (
+                  <span className="text-[9px] uppercase tracking-wider text-blue-300/80 border border-blue-500/30 bg-blue-500/10 rounded-full px-1.5 py-0.5 flex-shrink-0">Human</span>
+                )}
+                {ch.kind === "agent" && (
+                  <span className="text-[9px] uppercase tracking-wider text-violet-300/80 border border-violet-500/30 bg-violet-500/10 rounded-full px-1.5 py-0.5 flex-shrink-0">Agent</span>
+                )}
+              </div>
+              <div className="flex items-center gap-2 text-[11px] mt-0.5">
+                <span className="text-gray-600 font-mono">{ch.id}</span>
+                {ch.loras.length > 0 && (
+                  <span className="text-emerald-400/60">{ch.loras.length} LoRA</span>
+                )}
+                <span className="text-[10px] uppercase tracking-wider text-emerald-300/80 border border-emerald-500/20 bg-emerald-500/5 rounded-full px-1.5 py-0.5">Owned</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-2 border-t border-gray-800/40">
+            <p className="text-[10px] text-gray-500">
+              Available for your agent to use in generated images and videos.
+            </p>
+          </div>
+        </div>
+        );
+      })}
+
+      {/* Training workflow below the character card */}
+      <CreateCharacterWorkflow />
+
+      <div className="pt-2 border-t border-gray-800/40">
+        <a
+          href="#"
+          className="w-full rounded-xl border border-gray-700/60 hover:border-gray-500 bg-gray-900/40 px-4 py-2 text-xs text-gray-400 hover:text-gray-200 transition flex items-center justify-center gap-2"
+          onClick={(e) => { e.preventDefault(); }}
+        >
+          <Search className="w-3.5 h-3.5" />
+          Browse community characters
+          <span className="text-[10px] text-gray-600 ml-1">coming soon</span>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function CreateCharacterWorkflow() {
+  return (
+    <div className="rounded-2xl border border-rose-600/20 bg-gradient-to-b from-rose-950/10 to-gray-950 p-4 space-y-4">
+      <div className="flex items-center gap-2">
+        <Box className="w-4 h-4 text-rose-400" />
+        <span className="text-xs font-semibold text-rose-300 uppercase tracking-wider">LoRA Fine-tuning</span>
+        <span className="text-[10px] uppercase tracking-wider text-amber-300/80 border border-amber-500/20 bg-amber-500/5 rounded-full px-2 py-0.5 ml-auto">AMD MI300X</span>
+      </div>
+
+      <p className="text-xs text-gray-300 leading-relaxed">
+        <strong className="text-rose-200">Train your own character LoRA in ~90 minutes on AMD MI300X.</strong> Once fine-tuned, your AI agent can generate consistent images and videos with your face — every single time.
+      </p>
+
+      <div className="rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
+        <p className="text-[11px] font-semibold text-amber-300 flex items-center gap-1.5 mb-1">
+          <Cpu className="w-3.5 h-3.5" />
+          AMD MI300X — 192 GB VRAM
+        </p>
+        <p className="text-[11px] text-amber-200/70 leading-relaxed">
+          Fine-tuning runs on AMD's flagship GPU via ROCm. No CUDA required. Train a Flux2 LoRA in ~90 minutes, then generate images and videos immediately.
+        </p>
+      </div>
+
+      <div className="rounded-xl border border-gray-700/40 bg-gray-900/40 p-3">
+        <p className="text-[11px] font-semibold text-gray-300 flex items-center gap-1.5 mb-2">
+          <Terminal className="w-3.5 h-3.5 text-rose-400" />
+          Tell your AI agent:
+        </p>
+        <p className="text-[11px] text-gray-400 leading-relaxed">
+          "Create a character for me. Upload my reference images, register the character, start a LoRA fine-tune on AMD MI300X, and let me know when it's ready to use."
+        </p>
+      </div>
+
+      <div className="space-y-2.5">
+        <p className="text-[11px] font-medium text-gray-400">How it works:</p>
+        {[
+          { n: 1, title: "Upload your images", body: "5-20 reference photos. Different angles and lighting work best. Your agent can even generate variations to build a dataset." },
+          { n: 2, title: "Register your character", body: "A character record with a unique trigger word — this is how the agent references your identity in every generation." },
+          { n: 3, title: "Fine-tune on AMD MI300X", body: "Training a Flux2 LoRA on 192 GB MI300X VRAM via ROCm. Takes about 90 minutes. Your agent monitors progress and notifies you when done.", highlight: true },
+          { n: 4, title: "Generate consistently", body: 'Your character appears in the registry. From then on, just say "generate a shot with [character name] doing X" — your agent handles the rest.' },
+        ].map((step) => (
+          <div key={step.n} className="flex gap-2.5">
+            <div className={`flex-shrink-0 w-5 h-5 rounded-md flex items-center justify-center mt-0.5 ${step.highlight ? "bg-amber-500/20" : "bg-gray-800"}`}>
+              <span className={`text-[10px] font-medium ${step.highlight ? "text-amber-400" : "text-gray-500"}`}>{step.n}</span>
+            </div>
+            <div>
+              <p className={`text-[11px] ${step.highlight ? "text-amber-300 font-medium" : "text-gray-200"}`}>{step.title}</p>
+              <p className="text-[10px] text-gray-500 leading-relaxed mt-0.5">{step.body}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="pt-1 border-t border-gray-800/40">
+        <p className="text-[10px] text-gray-600">
+          Your agent knows the API. It uses <code className="text-gray-500">/api/characters</code> to register, <code className="text-gray-500">/api/lora-training</code> to fine-tune, and the Guide tab has all the curl commands.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function GuideTab() {
+  const apiRoot = typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8190";
+  const examples = [
+    { label: "List characters", cmd: `curl ${apiRoot}/api/characters` },
+    { label: "Create character", cmd: `curl -X POST ${apiRoot}/api/characters \\
+  -H "Content-Type: application/json" \\
+  -d '{"id":"my-char","name":"My Character","trigger":"MyTrigger"}'` },
+    { label: "Create project", cmd: `curl -X POST ${apiRoot}/api/projects \\
+  -H "Content-Type: application/json" \\
+  -d '{"title":"My First Short","content":"A brief story...","characters":["rigo"]}'` },
+    { label: "Add scene to project", cmd: `curl -X POST ${apiRoot}/api/projects/<prj_id>/scenes \\
+  -H "Content-Type: application/json" \\
+  -d '{"scene_number":1,"heading":"INT.-DAY","summary":"Scene summary"}'` },
+    { label: "Add shot to scene", cmd: `curl -X POST ${apiRoot}/api/projects/<prj_id>/scenes/<scn_id>/shots \\
+  -H "Content-Type: application/json" \\
+  -d '{"shot_number":1,"description":"Visual shot description","motion_prompt":"Camera push in","duration_seconds":4}'` },
+    { label: "Generate shot image", cmd: `curl -X POST ${apiRoot}/api/projects/<prj_id>/scenes/<scn_id>/shots/<sht_id>/generate-image` },
+    { label: "Animate shot", cmd: `curl -X POST ${apiRoot}/api/projects/<prj_id>/scenes/<scn_id>/shots/<sht_id>/animate` },
+    { label: "View project", cmd: `curl ${apiRoot}/api/projects/<prj_id>` },
+    { label: "Raw image generation", cmd: `curl -X POST ${apiRoot}/api/image/generate \\
+  -H "Content-Type: application/json" \\
+  -d '{"character":"rigo","prompt":"studio portrait"}'` },
+    { label: "Raw video generation", cmd: `curl -X POST ${apiRoot}/api/video/generate \\
+  -H "Content-Type: application/json" \\
+  -d '{"character":"rigo","prompt":"walks forward","width":1024,"height":1024,"length":41}'` },
+  ];
+
+  return (
+    <div className="h-full overflow-y-auto p-4 space-y-3">
+      <p className="text-xs text-gray-500 leading-relaxed">
+        Paste these into a terminal or send them to your agent. Replace <code className="text-gray-400">&lt;prj_id&gt;</code> / <code className="text-gray-400">&lt;scn_id&gt;</code> / <code className="text-gray-400">&lt;sht_id&gt;</code> with actual IDs.
+      </p>
+      {examples.map((ex) => (
+        <div key={ex.label} className="space-y-1">
+          <p className="text-[11px] font-medium text-gray-400">{ex.label}</p>
+          <pre className="text-[11px] bg-black/40 text-gray-300 rounded-xl p-2.5 overflow-x-auto leading-relaxed whitespace-pre-wrap break-all border border-gray-800/60 font-mono">{ex.cmd}</pre>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function AgentsTab() {
+  const capabilities = [
+    "Create and manage agent profiles",
+    "Register owned character assets",
+    "Start image and video generation jobs",
+    "Build project scenes and shots through the API",
+    "Route work to configured GPU nodes",
+    "Launch LoRA training with ai-toolkit",
+  ];
+
+  const workflow = [
+    {
+      n: "01",
+      title: "Tell the agent what to make",
+      body: "Use plain language instead of filling out every workflow setting yourself.",
+    },
+    {
+      n: "02",
+      title: "Agent chooses the right workflow",
+      body: "Image, video, character creation, project planning, or LoRA training should be selected automatically.",
+    },
+    {
+      n: "03",
+      title: "Nemoflix runs the job",
+      body: "The backend handles API calls, configured GPU nodes, output paths, and job tracking.",
+    },
+    {
+      n: "04",
+      title: "Review and continue",
+      body: "Generated assets appear in the Studio so the agent and human can iterate together.",
+    },
+  ];
+
+  return (
+    <div className="h-full overflow-y-auto p-4 space-y-4">
+      <section className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Bot className="w-4 h-4 text-violet-400" />
+          <h2 className="text-sm font-semibold text-gray-200">AI Agents</h2>
+          <span className="text-[10px] uppercase tracking-wider text-amber-300/80 border border-amber-500/20 bg-amber-500/5 rounded-full px-2 py-0.5 ml-auto">Coming soon</span>
+        </div>
+        <p className="text-xs text-gray-500 leading-relaxed">
+          Nemoflix is designed for AI agents that create media, manage characters, generate scenes, and publish work through an API-first studio.
+        </p>
+      </section>
+
+      <div className="rounded-2xl border border-violet-600/20 bg-gradient-to-b from-violet-950/10 to-gray-950 p-4 space-y-3">
+        <p className="text-xs font-semibold text-violet-300 uppercase tracking-wider">How agents use Nemoflix</p>
+        <div className="space-y-3">
+          {workflow.map((step) => (
+            <div key={step.n} className="flex gap-3">
+              <div className="flex-shrink-0 w-7 h-7 rounded-lg bg-gray-900 border border-gray-800 flex items-center justify-center">
+                <span className="text-[10px] font-medium text-gray-500">{step.n}</span>
+              </div>
+              <div>
+                <p className="text-xs text-gray-200">{step.title}</p>
+                <p className="text-[11px] text-gray-500 leading-relaxed mt-0.5">{step.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-3 space-y-3">
+        <p className="text-[11px] font-semibold text-gray-300">Planned capabilities</p>
+        <div className="space-y-2">
+          {capabilities.map((item) => (
+            <div key={item} className="flex gap-2 text-[11px] text-gray-500">
+              <span className="mt-1 w-1.5 h-1.5 rounded-full bg-violet-400/60 flex-shrink-0" />
+              <span>{item}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-3 space-y-2">
+        <p className="text-[11px] font-semibold text-gray-300">Backend direction</p>
+        <p className="text-[11px] text-gray-500 leading-relaxed">
+          The agent endpoint should eventually execute real Nemoflix tools behind the scenes: character lookup, generation queueing, project updates, node checks, and training jobs.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function PlaceholderTab({ title, body }: { title: string; body: string }) {
+  return (
+    <div className="p-4 space-y-2 overflow-y-auto h-full">
+      <h3 className="text-xs font-bold uppercase tracking-widest text-gray-600">{title}</h3>
+      <p className="text-sm text-gray-500 leading-relaxed">{body}</p>
+    </div>
+  );
+}

studio/src/components/sidebar/GenerateTab.tsx

@@ -0,0 +1,352 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import type { LoraCheckpoint } from "../../types";
+
+interface GenerateTabProps {
+  checkpoints: LoraCheckpoint[];
+  onQueued?: () => void;
+}
+
+type GenerateMode = "image" | "t2v" | "i2v";
+
+interface GenerateResponse {
+  ok: boolean;
+  prompt_id?: string | null;
+  checkpoint?: string | null;
+  lora_name?: string | null;
+  mode?: string;
+  node_errors?: Record<string, unknown> | null;
+}
+
+interface CharacterSummary {
+  id: string;
+  name: string;
+  trigger: string | null;
+  loras: { workflow?: string; name?: string; strength?: number }[];
+  source_images: string[];
+}
+
+const DEFAULT_IMAGE_PROMPT =
+  "Rigo, portrait in a sleek AI media studio, leaning one hand on a workstation beside glowing video timeline screens, calm confident expression, modern editorial photography, warm cinematic key light, 85mm lens, shallow depth of field, realistic skin texture and sharp facial detail.";
+const DEFAULT_VIDEO_PROMPT =
+  "cinematic motion, dramatic camera movement, atmospheric lighting, dynamic composition, polished short-form video style";
+
+function checkpointLabel(checkpoint: LoraCheckpoint) {
+  if (checkpoint.step == null) return `${checkpoint.name} · final`;
+  return `${checkpoint.name} · step ${checkpoint.step.toLocaleString()}`;
+}
+
+function slugPrompt(prompt: string) {
+  const slug = prompt
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 36);
+  return slug || "generation";
+}
+
+function outputPrefix(mode: GenerateMode, prompt: string) {
+  const bucket = mode === "image" ? "images" : "videos";
+  return `${bucket}/${slugPrompt(prompt)}-${Date.now()}`;
+}
+
+export function GenerateTab({ checkpoints, onQueued }: GenerateTabProps) {
+  const latestCheckpoint = useMemo(() => {
+    const final = checkpoints.find((checkpoint) => checkpoint.step == null);
+    return final?.name || checkpoints[checkpoints.length - 1]?.name || "latest";
+  }, [checkpoints]);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [mode, setMode] = useState<GenerateMode>("image");
+  const [characters, setCharacters] = useState<CharacterSummary[]>([]);
+  const [characterId, setCharacterId] = useState("none");
+  const [checkpoint, setCheckpoint] = useState("base");
+  const [prompt, setPrompt] = useState(DEFAULT_IMAGE_PROMPT);
+  const [sourceImage, setSourceImage] = useState("");
+  const [width, setWidth] = useState(1248);
+  const [height, setHeight] = useState(832);
+  const [steps, setSteps] = useState(20);
+  const [guidance, setGuidance] = useState(4);
+  const [loraStrength, setLoraStrength] = useState(1);
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<GenerateResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/characters")
+      .then((response) => response.json())
+      .then((data) => setCharacters(data.characters || []))
+      .catch(() => setCharacters([]));
+  }, []);
+
+  // When ?character= appears in the URL, pre-select it and clear the param
+  useEffect(() => {
+    const preselect = searchParams.get("character");
+    if (preselect) {
+      setCharacterId(preselect);
+      setSearchParams({}, { replace: true });
+    }
+  }, [searchParams.get("character")]);
+
+  const selectedCharacter = characters.find((character) => character.id === characterId);
+  const selectedCharacterHasImageLora = Boolean(selectedCharacter?.loras?.some((lora) => lora.workflow === "flux2_lora"));
+
+  function selectMode(nextMode: GenerateMode) {
+    setMode(nextMode);
+    setPrompt(nextMode === "image" ? DEFAULT_IMAGE_PROMPT : DEFAULT_VIDEO_PROMPT);
+    setResult(null);
+    setError(null);
+  }
+
+  async function submit() {
+    const cleanPrompt = prompt.trim();
+    if (!cleanPrompt) {
+      setError("Prompt is required.");
+      return;
+    }
+    if (mode === "i2v" && !sourceImage.trim()) {
+      setError("Image-to-video needs a source image path from the gallery, like images/example.png.");
+      return;
+    }
+
+    setSubmitting(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const filenamePrefix = outputPrefix(mode, cleanPrompt);
+      const endpoint = mode === "image" ? "/api/image/generate" : "/api/video/generate";
+      const useCharacter = characterId !== "none";
+      const useCheckpoint = !useCharacter && checkpoint !== "base";
+      const body = mode === "image"
+        ? {
+            workflow: "flux2_lora",
+            character: useCharacter ? characterId : undefined,
+            checkpoint: useCheckpoint ? (checkpoint || latestCheckpoint) : undefined,
+            prompt: cleanPrompt,
+            width,
+            height,
+            steps,
+            guidance,
+            lora_strength: loraStrength,
+            filename_prefix: filenamePrefix,
+            submit: true,
+          }
+        : {
+            mode,
+            character: useCharacter ? characterId : undefined,
+            image: mode === "i2v" ? sourceImage.trim() : undefined,
+            prompt: cleanPrompt,
+            width,
+            height,
+            filename_prefix: filenamePrefix,
+            submit: true,
+          };
+
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(data?.detail || `${response.status}: failed to queue generation`);
+      }
+
+      setResult(data);
+      onQueued?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const characterPhrase = selectedCharacter ? ` using ${selectedCharacter.name}` : "";
+  const agentInstruction = mode === "image"
+    ? `Generate a new image${characterPhrase} from this idea.`
+    : mode === "t2v"
+      ? "Generate a short video from this idea."
+      : "Animate this gallery image into a short video.";
+
+  return (
+    <div className="h-full overflow-y-auto p-4 space-y-5">
+      <section className="rounded-2xl border border-rose-600/30 bg-gradient-to-b from-rose-950/25 to-gray-950/70 p-4 space-y-3 shadow-lg shadow-rose-950/10">
+        <h2 className="text-lg font-semibold">Tell your agent what to make</h2>
+        <p className="text-sm text-gray-300 leading-relaxed">
+          Describe the result. The agent chooses the character, workflow, endpoint, and settings.
+        </p>
+        <div className="rounded-xl border border-gray-800 bg-black/35 p-3">
+          <p className="text-xs text-gray-300 leading-relaxed">“Generate an image of me walking through a rainy cyberpunk street.”</p>
+        </div>
+      </section>
+
+      <div className="grid grid-cols-3 gap-2">
+        {[
+          ["image", "Image"],
+          ["t2v", "Text → Video"],
+          ["i2v", "Image → Video"],
+        ].map(([id, label]) => (
+          <button
+            key={id}
+            onClick={() => selectMode(id as GenerateMode)}
+            className={`rounded-lg border px-2 py-2 text-xs font-medium transition ${
+              mode === id
+                ? "border-rose-500/60 bg-rose-600/15 text-rose-200"
+                : "border-gray-800 bg-gray-950/60 text-gray-500 hover:text-gray-300"
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      <label className="block space-y-2">
+        <span className="text-xs font-medium text-gray-400">Character</span>
+        <select
+          value={characterId}
+          onChange={(event) => setCharacterId(event.target.value)}
+          className="w-full rounded-lg bg-gray-950 border border-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:border-rose-600"
+        >
+          <option value="none">No character / raw workflow</option>
+          {characters.map((character) => (
+            <option key={character.id} value={character.id}>
+              {character.name}{character.trigger ? ` · trigger: ${character.trigger}` : ""}
+            </option>
+          ))}
+        </select>
+        {selectedCharacter && (
+          <p className="text-[10px] text-gray-600 leading-relaxed">
+            Uses this character’s LoRA when available. Trigger word <span className="text-gray-400">{selectedCharacter.trigger || "none"}</span> is added automatically if it is missing from your prompt.
+          </p>
+        )}
+      </label>
+
+      <label className="block space-y-2">
+        <span className="text-xs font-medium text-gray-400">Prompt / idea</span>
+        <textarea
+          value={prompt}
+          onChange={(event) => setPrompt(event.target.value)}
+          rows={8}
+          className="w-full rounded-lg bg-gray-950 border border-gray-800 px-3 py-2 text-sm text-white leading-relaxed resize-y focus:outline-none focus:border-rose-600"
+        />
+      </label>
+
+      {mode === "image" && characterId === "none" && (
+        <label className="block space-y-2">
+          <span className="text-xs font-medium text-gray-400">Raw image checkpoint</span>
+          <select
+            value={checkpoint}
+            onChange={(event) => setCheckpoint(event.target.value)}
+            className="w-full rounded-lg bg-gray-950 border border-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:border-rose-600"
+          >
+            <option value="base">Base Flux2 model — no LoRA</option>
+            <option value="latest">Latest available LoRA checkpoint</option>
+            {checkpoints.map((item) => (
+              <option key={item.name} value={item.name}>
+                {checkpointLabel(item)}
+              </option>
+            ))}
+          </select>
+          <p className="text-[10px] text-gray-600 leading-relaxed">
+            Raw image mode bypasses character selection. Use base Flux2 or optionally apply a LoRA checkpoint directly.
+          </p>
+        </label>
+      )}
+
+      {mode === "image" && characterId !== "none" && selectedCharacter && !selectedCharacterHasImageLora && (
+        <div className="rounded-lg border border-amber-900/60 bg-amber-950/20 p-3 text-xs text-amber-200">
+          This character does not have an image LoRA registered for the current workflow yet.
+        </div>
+      )}
+
+      {mode === "i2v" && (
+        <label className="block space-y-2">
+          <span className="text-xs font-medium text-gray-400">Source image from gallery</span>
+          <input
+            value={sourceImage}
+            onChange={(event) => setSourceImage(event.target.value)}
+            placeholder="images/example.png"
+            className="w-full rounded-lg bg-gray-950 border border-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:border-rose-600"
+          />
+          <p className="text-[10px] text-gray-600">Open a gallery item and use its filename as the source.</p>
+        </label>
+      )}
+
+      <div className="grid grid-cols-2 gap-3">
+        <NumberField label="Width" value={width} onChange={setWidth} min={512} max={2048} step={64} />
+        <NumberField label="Height" value={height} onChange={setHeight} min={512} max={2048} step={64} />
+        {mode === "image" && <NumberField label="Steps" value={steps} onChange={setSteps} min={1} max={60} step={1} />}
+        {mode === "image" && <NumberField label="Guidance" value={guidance} onChange={setGuidance} min={1} max={10} step={0.5} />}
+      </div>
+
+      {mode === "image" && (
+        <NumberField
+          label="LoRA strength"
+          value={loraStrength}
+          onChange={setLoraStrength}
+          min={0}
+          max={2}
+          step={0.05}
+        />
+      )}
+
+      <button
+        onClick={submit}
+        disabled={submitting}
+        className="w-full rounded-lg bg-rose-600 hover:bg-rose-500 disabled:bg-gray-800 disabled:text-gray-500 px-4 py-2.5 text-sm font-semibold transition"
+      >
+        {submitting ? "Queueing..." : mode === "image" ? "Generate image" : "Generate video"}
+      </button>
+
+      {error && (
+        <div className="rounded-lg border border-red-900/60 bg-red-950/40 p-3 text-sm text-red-200">
+          {error}
+        </div>
+      )}
+
+      {result && (
+        <div className="rounded-lg border border-emerald-900/60 bg-emerald-950/30 p-3 space-y-2">
+          <p className="text-sm font-medium text-emerald-200">Queued successfully</p>
+          <div className="text-xs text-emerald-100/80 space-y-1 break-all">
+            <p>Prompt ID: {result.prompt_id}</p>
+            {result.checkpoint && <p>Checkpoint: {result.checkpoint}</p>}
+            {result.lora_name && <p>LoRA: {result.lora_name}</p>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NumberField({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+}: {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}) {
+  return (
+    <label className="block space-y-2">
+      <span className="text-xs font-medium text-gray-400">{label}</span>
+      <input
+        type="number"
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(event) => onChange(Number(event.target.value))}
+        className="w-full rounded-lg bg-gray-950 border border-gray-800 px-3 py-2 text-sm text-white focus:outline-none focus:border-rose-600"
+      />
+    </label>
+  );
+}

studio/src/components/sidebar/NodesTab.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useState } from "react";
+
+type RuntimeMap = {
+  comfyui?: { url: string; client_id?: string; online?: boolean; error?: string };
+  ai_toolkit?: { toolkit_dir: string; venv: string; training_dir: string; runner: string; status: string };
+};
+
+type NodeInfo = {
+  id?: string;
+  label?: string;
+  url?: string;
+  roles?: string[];
+  online: boolean;
+  error?: string;
+  runtimes?: RuntimeMap;
+  gpu_name?: string;
+  vram_total?: number;
+  vram_free?: number;
+  torch_vram_total?: number;
+  torch_vram_free?: number;
+  queue_running?: number;
+  queue_pending?: number;
+  system?: { comfyui_version?: string; os?: string };
+};
+
+function gb(value?: number) {
+  if (!value) return "—";
+  return `${(value / 1_000_000_000).toFixed(1)} GB`;
+}
+
+function vramPercent(node: NodeInfo) {
+  if (!node.vram_total || node.vram_free == null) return null;
+  return Math.max(0, Math.min(100, ((node.vram_total - node.vram_free) / node.vram_total) * 100));
+}
+
+function roleClass(role: string) {
+  if (role === "training") return "text-amber-300 border-amber-500/30 bg-amber-500/10";
+  if (role === "image" || role === "video") return "text-blue-300 border-blue-500/30 bg-blue-500/10";
+  return "text-gray-400 border-gray-700 bg-gray-900/60";
+}
+
+export function NodesTab() {
+  const [nodes, setNodes] = useState<Record<string, NodeInfo>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        setError(null);
+        const response = await fetch("/api/nodes");
+        if (!response.ok) throw new Error(`/api/nodes returned ${response.status}`);
+        const data = await response.json();
+        if (!cancelled) setNodes(data.nodes || {});
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    const id = window.setInterval(load, 5000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+    };
+  }, []);
+
+  const entries = Object.entries(nodes);
+
+  return (
+    <div className="h-full overflow-y-auto p-4 space-y-4">
+      <div>
+        <h2 className="text-sm font-semibold">GPU Nodes</h2>
+        <p className="text-xs text-gray-500 mt-1 leading-relaxed">
+          Compute workers and runtimes. ComfyUI handles image/video generation; ai-toolkit handles LoRA training on AMD GPUs.
+        </p>
+      </div>
+
+      {loading && <p className="text-xs text-gray-500">Checking nodes...</p>}
+      {error && <p className="text-xs text-red-400">{error}</p>}
+
+      {!loading && entries.length === 0 && !error && (
+        <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-4 text-xs text-gray-500">
+          No GPU nodes configured.
+        </div>
+      )}
+
+      {entries.map(([id, node]) => {
+        const percent = vramPercent(node);
+        const comfy = node.runtimes?.comfyui;
+        const aiToolkit = node.runtimes?.ai_toolkit;
+        return (
+          <div key={id} className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-4 space-y-3">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="text-sm font-semibold text-gray-200">{node.label || id}</p>
+                {comfy?.url && <p className="text-[11px] text-gray-600 break-all mt-0.5">ComfyUI: {comfy.url}</p>}
+              </div>
+              <span className={`text-[10px] uppercase tracking-wider rounded-full px-2 py-1 border ${
+                node.online
+                  ? "text-emerald-300 border-emerald-500/30 bg-emerald-500/10"
+                  : "text-red-300 border-red-500/30 bg-red-500/10"
+              }`}>
+                {node.online ? "Comfy online" : "Comfy offline"}
+              </span>
+            </div>
+
+            {node.roles && node.roles.length > 0 && (
+              <div className="flex flex-wrap gap-1.5">
+                {node.roles.map((role) => (
+                  <span key={role} className={`text-[10px] uppercase tracking-wider rounded-full border px-2 py-0.5 ${roleClass(role)}`}>
+                    {role}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="grid gap-2 text-xs">
+              {comfy && (
+                <div className="rounded-lg border border-gray-800 bg-black/30 p-2.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="font-semibold text-gray-300">ComfyUI</p>
+                    <span className={comfy.online ? "text-emerald-400" : "text-red-400"}>{comfy.online ? "online" : "offline"}</span>
+                  </div>
+                  <p className="text-[11px] text-gray-600 mt-1">Image/video generation runtime.</p>
+                  {comfy.error && <p className="text-[11px] text-red-300/70 mt-1 break-words">{comfy.error}</p>}
+                </div>
+              )}
+
+              {aiToolkit && (
+                <div className="rounded-lg border border-amber-900/40 bg-amber-950/10 p-2.5">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="font-semibold text-amber-200">ai-toolkit</p>
+                    <span className="text-amber-300">training</span>
+                  </div>
+                  <p className="text-[11px] text-amber-100/60 mt-1">AMD GPU LoRA training runtime.</p>
+                  <p className="text-[10px] text-gray-600 mt-1 break-all">{aiToolkit.training_dir}</p>
+                </div>
+              )}
+            </div>
+
+            {node.online && (
+              <div className="space-y-3">
+                <div>
+                  <p className="text-xs text-gray-300">{node.gpu_name || "GPU detected"}</p>
+                  <p className="text-[11px] text-gray-600 mt-0.5">
+                    ComfyUI {node.system?.comfyui_version || "version unknown"}
+                  </p>
+                </div>
+
+                <div className="space-y-1.5">
+                  <div className="flex justify-between text-[11px] text-gray-500">
+                    <span>VRAM used</span>
+                    <span>{gb((node.vram_total || 0) - (node.vram_free || 0))} / {gb(node.vram_total)}</span>
+                  </div>
+                  <div className="h-2 rounded-full bg-gray-800 overflow-hidden">
+                    <div className="h-full bg-rose-500" style={{ width: `${percent ?? 0}%` }} />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 text-xs">
+                  <div className="rounded-lg border border-gray-800 bg-black/30 p-2">
+                    <p className="text-gray-600">Running</p>
+                    <p className="text-gray-200 font-semibold mt-1">{node.queue_running ?? 0}</p>
+                  </div>
+                  <div className="rounded-lg border border-gray-800 bg-black/30 p-2">
+                    <p className="text-gray-600">Pending</p>
+                    <p className="text-gray-200 font-semibold mt-1">{node.queue_pending ?? 0}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

studio/src/components/sidebar/ProjectSidebar.tsx

@@ -0,0 +1,153 @@
+import { Plus, Sparkles, UserCircle, Clapperboard, Trash2 } from "lucide-react";
+import type { ProjectModeData } from "../../types";
+
+interface ProjectSidebarProps {
+  data: ProjectModeData;
+  onDeleteScene: (sceneId: string) => void;
+}
+
+export function ProjectSidebar({ data, onDeleteScene }: ProjectSidebarProps) {
+  const { project, scenes, shots, selectedSceneId, phase, onSelectScene, onAddScene } = data;
+
+  if (scenes.length === 0) {
+    return <OutlineSidebar data={data} onDeleteScene={onDeleteScene} />;
+  }
+
+  return (
+    <div className="flex-1 min-h-0 flex flex-col">
+      <div className="px-4 py-3 border-b border-gray-800/40 flex-shrink-0">
+        <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Description</p>
+        <p className="text-xs text-gray-300 mt-1 leading-relaxed line-clamp-3">
+          {project.description || <span className="italic text-gray-600">No description yet.</span>}
+        </p>
+      </div>
+
+      <div className="px-4 py-2.5 flex items-center justify-between flex-shrink-0">
+        <span className="text-[11px] uppercase tracking-wider text-gray-500 font-medium">Scenes</span>
+        <button
+          onClick={onAddScene}
+          title="Add scene"
+          className="inline-flex items-center gap-1 rounded-lg border border-gray-800 hover:border-gray-700 hover:bg-gray-900/60 px-2 py-1 text-[10px] text-gray-400 hover:text-gray-200 transition"
+        >
+          <Plus className="w-3 h-3" /> Add scene
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto px-2 pb-3 space-y-1">
+        {scenes.map((scene) => {
+          const sceneShots = shots.filter((s) => s.scene_id === scene.id);
+          const generated = sceneShots.filter((s) => s.image_file).length;
+          const active = scene.id === selectedSceneId;
+          return (
+            <div
+              key={scene.id}
+              onClick={() => onSelectScene(scene.id)}
+              className={`w-full text-left rounded-xl px-3 py-2.5 transition cursor-pointer group ${active ? "bg-rose-600/10 ring-1 ring-rose-500/30" : "hover:bg-gray-900/50"}`}
+            >
+              <div className="flex items-center justify-between gap-2 mb-1">
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className={`text-[10px] font-mono ${active ? "text-rose-300" : "text-gray-500"}`}>S{scene.scene_number}</span>
+                  <span className={`text-xs font-medium truncate ${active ? "text-gray-100" : "text-gray-300"}`}>
+                    {scene.title || "Untitled scene"}
+                  </span>
+                </div>
+                <button
+                  onClick={(e) => { e.stopPropagation(); onDeleteScene(scene.id); }}
+                  className="flex-shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-red-900/40 text-gray-600 hover:text-red-400 transition"
+                  title="Delete scene"
+                >
+                  <Trash2 className="w-3 h-3" />
+                </button>
+              </div>
+              {scene.summary && (
+                <p className="text-[11px] text-gray-500 leading-relaxed line-clamp-2">{scene.summary}</p>
+              )}
+              <div className="flex items-center gap-2 mt-2 text-[10px] text-gray-600">
+                <span>{sceneShots.length} shot{sceneShots.length === 1 ? "" : "s"}</span>
+                {generated > 0 && (
+                  <span className={phase === "animate" ? "text-violet-400/70" : "text-emerald-400/70"}>
+                    · {generated} rendered
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function OutlineSidebar({ data }: ProjectSidebarProps) {
+  const { project, onAddScene } = data;
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto p-4 space-y-4">
+      <section className="rounded-2xl border border-rose-500/20 bg-gradient-to-b from-rose-950/15 to-gray-900/20 p-4 space-y-2.5">
+        <div className="flex items-center gap-2">
+          <Sparkles className="w-3.5 h-3.5 text-rose-300" />
+          <span className="text-[11px] uppercase tracking-wider text-rose-200 font-semibold">Start the outline</span>
+        </div>
+        <p className="text-xs text-gray-300 leading-relaxed">
+          Pitch your project to your agent and it'll draft scenes and shots here. No scenes yet — once they appear, this sidebar becomes a scene switcher.
+        </p>
+        <div className="rounded-xl border border-gray-800/60 bg-black/30 p-3 space-y-1.5">
+          <p className="text-[10px] uppercase tracking-wider text-gray-500">Try saying</p>
+          <p className="text-[11px] text-gray-300 italic leading-relaxed">"Make me a 30s cyberpunk teaser, my character walking through neon rain."</p>
+          <p className="text-[11px] text-gray-300 italic leading-relaxed">"Put me in an Iron Man movie. Workshop, suit assembly, rooftop in the rain."</p>
+        </div>
+      </section>
+
+      <section className="space-y-2.5">
+        <p className="text-[10px] uppercase tracking-wider text-gray-500 font-medium">Project</p>
+        <div className="rounded-xl border border-gray-800/60 bg-gray-900/30 p-3 space-y-2">
+          <div>
+            <p className="text-[10px] uppercase tracking-wider text-gray-600">Title</p>
+            <p className="text-sm text-gray-100 mt-0.5">{project.title}</p>
+          </div>
+          {project.description && (
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-gray-600">Description</p>
+              <p className="text-xs text-gray-400 mt-0.5 leading-relaxed">{project.description}</p>
+            </div>
+          )}
+          <div className="grid grid-cols-2 gap-2 pt-1">
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-gray-600">Aspect</p>
+              <p className="text-xs text-gray-300 mt-0.5 font-mono">{project.aspect_ratio}</p>
+            </div>
+            <div>
+              <p className="text-[10px] uppercase tracking-wider text-gray-600">Duration</p>
+              <p className="text-xs text-gray-300 mt-0.5">{project.duration_seconds ?? "—"}s</p>
+            </div>
+          </div>
+          {project.characters.length > 0 && (
+            <div className="pt-1">
+              <p className="text-[10px] uppercase tracking-wider text-gray-600 mb-1.5">Cast</p>
+              <div className="flex flex-wrap gap-1">
+                {project.characters.map((id) => (
+                  <span key={id} className="inline-flex items-center gap-1 rounded-md border border-gray-800 bg-gray-900/40 px-2 py-0.5 text-[11px] text-gray-300 font-mono">
+                    <UserCircle className="w-3 h-3 text-gray-500" /> {id}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+
+      <button
+        onClick={onAddScene}
+        className="w-full inline-flex items-center justify-center gap-2 rounded-xl border border-gray-700 bg-gray-900/40 hover:bg-gray-900 hover:border-gray-600 px-3 py-2.5 text-xs text-gray-300 transition"
+      >
+        <Plus className="w-3.5 h-3.5" /> Add scene manually
+      </button>
+
+      <div className="rounded-xl border border-gray-800/40 bg-gray-900/20 p-3 flex items-start gap-2.5">
+        <Clapperboard className="w-3.5 h-3.5 text-gray-500 mt-0.5 flex-shrink-0" />
+        <p className="text-[11px] text-gray-500 leading-relaxed">
+          Scenes hold the story beats. Shots inside scenes get rendered into images, then animated. Outline first; only generate after the structure is approved.
+        </p>
+      </div>
+    </div>
+  );
+}

studio/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

studio/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

studio/src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

studio/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

studio/src/components/ui/progress.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("text-sm font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}

studio/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

studio/src/components/ui/tabs.tsx

@@ -0,0 +1,80 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

studio/src/index.css

@@ -0,0 +1,123 @@
+@import "@fontsource-variable/geist";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-black text-white antialiased;
+}
+
+/* Slim, dark-mode scrollbars — replaces the chunky default */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(244, 63, 94, 0.4);
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+@layer base {
+  .theme {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+  }
+  :root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+  .dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+  }
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+  html {
+    font-family: var(--font-sans);
+  }
+}

studio/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

studio/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

studio/src/types.ts

@@ -0,0 +1,147 @@
+export interface MediaItem {
+  name: string;
+  type: "image" | "video";
+  width: number;
+  height: number;
+  mtime: number;
+  url: string;
+  filename?: string;
+  thumb?: string;
+  prompt?: string | null;
+  prompt_id?: string | null;
+}
+
+export interface LoraTrainingStatus {
+  ok: boolean;
+  status: string;
+  running?: boolean;
+  job_name?: string | null;
+  current_step: number;
+  total_steps: number;
+  progress_percent?: number | null;
+  loss?: number | null;
+  lr?: number | null;
+  elapsed?: string | null;
+  eta?: string | null;
+  seconds_per_step?: number | null;
+  gpu_util?: number | null;
+  vram_percent?: number | null;
+  updated_at: string;
+  error?: string | null;
+}
+
+export interface LoraCheckpoint {
+  name: string;
+  filename?: string;
+  step?: number | null;
+  path: string;
+  size_bytes: number;
+  modified_at: string;
+  created_at?: string;
+}
+
+export interface LoraCheckpointsResponse {
+  ok: boolean;
+  job_name: string;
+  checkpoints: LoraCheckpoint[];
+  count: number;
+  updated_at: string;
+}
+
+export interface JobItem {
+  prompt_id: string;
+  status: "pending" | "running" | "completed" | "failed" | string;
+  mode?: string;
+  prompt?: string;
+  created_at?: string;
+  queue_position?: number | null;
+  current_node?: string | null;
+  step_value?: number;
+  step_max?: number;
+  nodes_finished?: number;
+  nodes_total?: number;
+  progress_percent?: number | null;
+  error?: string;
+}
+
+export interface Project {
+  id: string;
+  title: string;
+  description: string | null;
+  aspect_ratio: string;
+  duration_seconds: number | null;
+  status: string;
+  characters: string[];
+  metadata: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface Scene {
+  id: string;
+  project_id: string;
+  scene_number: number;
+  title: string | null;
+  setting: string;
+  weather: string;
+  summary: string | null;
+  location: string | null;
+  time_of_day: string | null;
+  characters: string[];
+  metadata: Record<string, unknown>;
+}
+
+export interface Shot {
+  id: string;
+  project_id: string;
+  scene_id: string;
+  shot_number: number;
+  text: string | null;
+  description: string | null;
+  subtitle: string | null;
+  voiceover: string | null;
+  image_prompt: string | null;
+  motion_prompt: string | null;
+  characters: string[];
+  duration_seconds: number;
+  status: string;
+  image_file: string | null;
+  video_file: string | null;
+  image_prompt_id: string | null;
+  video_prompt_id: string | null;
+  metadata: Record<string, unknown>;
+}
+
+
+export interface ShotVersion {
+  id: string;
+  project_id: string;
+  scene_id: string;
+  shot_id: string;
+  version_number: number;
+  kind: "image" | "video";
+  status: string;
+  prompt: string | null;
+  file: string | null;
+  prompt_id: string | null;
+  metadata: Record<string, unknown>;
+  created_at?: string;
+}
+
+export type ProjectPhase = "outline" | "generate" | "animate";
+
+export interface ProjectModeData {
+  project: Project;
+  scenes: Scene[];
+  shots: Shot[];
+  selectedSceneId: string | null;
+  selectedShotId: string | null;
+  phase: ProjectPhase;
+  onSelectScene: (sceneId: string) => void;
+  onSelectShot: (shotId: string | null) => void;
+  onBack: () => void;
+  onRefresh: () => Promise<void> | void;
+  onAddScene: () => Promise<void> | void;
+  onDeleteScene: (sceneId: string) => Promise<void> | void;
+  onDeleteShot: (shotId: string) => Promise<void> | void;
+}

studio/tailwind.config.js

@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
+        popover: { DEFAULT: "var(--popover)", foreground: "var(--popover-foreground)" },
+        primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)" },
+        secondary: { DEFAULT: "var(--secondary)", foreground: "var(--secondary-foreground)" },
+        muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
+        accent: { DEFAULT: "var(--accent)", foreground: "var(--accent-foreground)" },
+        destructive: { DEFAULT: "var(--destructive)" },
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+};

studio/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

studio/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

studio/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    host: "0.0.0.0",
+    port: 3010,
+    proxy: {
+      "/api": { target: process.env.NEMOFLIX_API_URL, changeOrigin: true },
+      "/media": { target: process.env.NEMOFLIX_API_URL, changeOrigin: true },
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+});