Update Docker Studio UI for projects workflow

README.md

@@ -24,4 +24,4 @@ This Space serves the real React/Vite Studio UI and proxies API/media requests t
 
 | Secret | Description |
 | --- | --- |
-| `NEMOFLIX_API_URL` | URL for the Nemoflix AMD control-plane API, e.g. `http://100.69.225.61:8190` or another reachable HTTPS/public endpoint. |
+| `NEMOFLIX_API_URL` | URL for the Nemoflix API|

studio/src/App.tsx

@@ -1,15 +1,12 @@
 import { useState, useEffect, useCallback } from "react";
-import { Menu, Sparkles } from "lucide-react";
-import { JobCard } from "./components/JobCard";
-import { MediaTile } from "./components/MediaTile";
-import { CharacterIdentityPanel } from "./components/CharacterIdentityPanel";
-import { CharacterAssetsPanel } from "./components/CharacterAssetsPanel";
-import { ProjectsGuide } from "./components/ProjectsGuide";
+import { Menu, Sparkles, UserCircle } from "lucide-react";
+import { StudioView } from "./components/GalleryView";
+import { CharacterProfileView } from "./components/CharacterProfileView";
+import { ProjectsView } from "./components/ProjectsView";
+import { ProjectDetailView } from "./components/ProjectDetailView";
 import { AppSidebar } from "./components/sidebar/AppSidebar";
 import type { SidebarTab } from "./components/sidebar/AppSidebar";
-import type { JobItem, LoraCheckpoint, LoraTrainingStatus, MediaItem } from "./types";
-
-const DEFAULT_CHARACTER = "rigo";
+import type { JobItem, LoraCheckpoint, LoraTrainingStatus, MediaItem, Project, Scene, Shot, ProjectPhase } from "./types";
 
 async function fetchJson<T>(url: string, timeoutMs = 5000): Promise<T> {
   const controller = new AbortController();
@@ -33,8 +30,54 @@ export default function App() {
   const [error, setError] = useState<string | null>(null);
   const [selected, setSelected] = useState<string | null>(null);
   const [sidebarOpen, setSidebarOpen] = useState(true);
-  const [activeSidebarTab, setActiveSidebarTab] = useState<SidebarTab>("characters");
-  const [selectedCharacterId, setSelectedCharacterId] = useState<string>(DEFAULT_CHARACTER);
+  const [activeSidebarTab, setActiveSidebarTab] = useState<SidebarTab>("generate");
+  const [selectedCharacterId, setSelectedCharacterId] = useState<string | null>(null);
+  const [mainView, setMainView] = useState<"studio" | "character" | "projects" | "project-detail">("studio");
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
+  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 loadProject = useCallback(async () => {
+    if (!selectedProjectId) { setProjectData(null); return; }
+    try {
+      const response = await fetch(`/api/projects/${selectedProjectId}`);
+      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);
+    }
+  }, [selectedProjectId]);
+
+  useEffect(() => { loadProject(); }, [loadProject]);
+
+  const phase: ProjectPhase = projectData?.shots.some((shot) => shot.image_file) ? "remix" : "outline";
+
+  const addScene = useCallback(async () => {
+    if (!selectedProjectId || !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/${selectedProjectId}/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();
+      setSelectedSceneId(created.id);
+      setSelectedShotId(null);
+    } catch (e) {
+      console.error("Failed to add scene", e);
+    }
+  }, [selectedProjectId, projectData, loadProject]);
 
   const load = useCallback(async () => {
     if (!hasLoadedOnce) setLoading(true);
@@ -101,7 +144,7 @@ export default function App() {
             </button>
           )}
           <button
-            onClick={() => { setSelectedCharacterId(DEFAULT_CHARACTER); setActiveSidebarTab("characters"); }}
+            onClick={() => { setMainView("studio"); }}
             className="flex items-center gap-3 min-w-0 hover:opacity-80 transition"
             title="Home"
           >
@@ -115,22 +158,38 @@ export default function App() {
           </button>
         </div>
 
-        <div className="flex items-center gap-1.5 text-[11px]">
-          {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" />
-              {jobs.length} generating
+        <div className="flex items-center gap-2 text-[11px]">
+          <div className="hidden md:flex items-center gap-1.5">
+            {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" />
+                {jobs.length} generating
+              </span>
+            )}
+            <span className="rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">
+              {items.length} media
             </span>
-          )}
-          <span className="rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">
-            {items.length} media
-          </span>
-          <span className="hidden sm: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 sm:inline rounded-full border border-gray-800 bg-gray-900/50 px-2.5 py-1 text-gray-500">
-            {videoCount} videos
-          </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>
 
@@ -142,46 +201,63 @@ export default function App() {
             onClose={() => setSidebarOpen(false)}
             checkpoints={checkpoints}
             onQueued={load}
-            onSelectCharacter={(id) => { setSelectedCharacterId(id); setActiveSidebarTab("characters"); }}
+            onSelectCharacter={(id) => { setSelectedCharacterId(id); setMainView("character"); }}
+            projectMode={mainView === "project-detail" && projectData ? {
+              project: projectData.project,
+              scenes: projectData.scenes,
+              shots: projectData.shots,
+              selectedSceneId,
+              selectedShotId,
+              phase,
+              onSelectScene: (id) => { setSelectedSceneId(id); setSelectedShotId(null); },
+              onSelectShot: setSelectedShotId,
+              onBack: () => { setSelectedShotId(null); setMainView("projects"); },
+              onRefresh: loadProject,
+              onAddScene: addScene,
+            } : undefined}
           />
         )}
 
         <main className="flex-1 min-w-0 overflow-y-auto bg-gradient-to-b from-transparent via-transparent to-gray-950/30">
-          {activeSidebarTab === "projects" ? (
-            <ProjectsGuide />
-          ) : (
-            <div className="p-4 space-y-5">
-              <CharacterIdentityPanel characterId={selectedCharacterId} />
-
-              {loading && !hasLoadedOnce && !hasContent ? (
-                <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>
-              ) : !hasContent ? (
-                <p className="text-gray-500">No media yet.</p>
-              ) : (
-                <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} />
-                  ))}
-
-                  {items.map((item) => (
-                    <MediaTile
-                      key={item.filename || item.url}
-                      item={item}
-                      onOpen={() => setSelected(item.url)}
-                      onDelete={deleteItem}
-                    />
-                  ))}
-                </div>
-              )}
-
-              <CharacterAssetsPanel
-                characterId={selectedCharacterId}
-                training={training}
-                checkpoints={checkpoints}
-              />
-            </div>
+          {mainView === "character" && selectedCharacterId && (
+            <CharacterProfileView
+              characterId={selectedCharacterId}
+              items={items}
+              onOpen={setSelected}
+              onDelete={deleteItem}
+              onGenerate={() => setActiveSidebarTab("generate")}
+            />
+          )}
+
+          {mainView === "projects" && (
+            <ProjectsView
+              onOpenProject={(id) => { setSelectedProjectId(id); setMainView("project-detail"); setActiveSidebarTab("projects"); setSidebarOpen(true); }}
+            />
+          )}
+          {mainView === "project-detail" && projectData && (
+            <ProjectDetailView
+              project={projectData.project}
+              scenes={projectData.scenes}
+              shots={projectData.shots}
+              phase={phase}
+              selectedSceneId={selectedSceneId}
+              selectedShotId={selectedShotId}
+              onSelectScene={(id) => { setSelectedSceneId(id); setSelectedShotId(null); }}
+              onSelectShot={setSelectedShotId}
+              onRefresh={loadProject}
+              onBack={() => { setSelectedShotId(null); setMainView("projects"); }}
+            />
+          )}
+          {mainView === "studio" && (
+            <StudioView
+              items={items}
+              jobs={jobs}
+              loading={loading && !hasLoadedOnce && !hasContent}
+              error={error}
+              onOpen={setSelected}
+              onDelete={deleteItem}
+              onOpenProjects={() => setMainView("projects")}
+            />
           )}
         </main>
       </div>

studio/src/components/CharacterAssetsPanel.tsx

@@ -1,299 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import {
-  Terminal, Cpu, Sparkles, Upload,
-  Download, Clock, HardDrive, Hash
-} from "lucide-react";
-import type { LoraCheckpoint, LoraTrainingStatus } from "../types";
-
-interface CharacterRecord {
-  id: string;
-  name: string;
-  trigger: string | null;
-  source_images: string[];
-  loras: Record<string, unknown>[];
-}
-
-interface Props {
-  characterId: string;
-  training: LoraTrainingStatus | null;
-  checkpoints: LoraCheckpoint[];
-}
-
-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();
-}
-
-function formatBytes(bytes: number): string {
-  if (!bytes || bytes === 0) return "--";
-  if (bytes > 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-}
-
-function formatDate(dateStr: string): string {
-  try {
-    return new Date(dateStr).toLocaleString();
-  } catch {
-    return dateStr;
-  }
-}
-
-export function CharacterAssetsPanel({ characterId, training, checkpoints }: Props) {
-  const [character, setCharacter] = useState<CharacterRecord | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  const load = useCallback(async () => {
-    try {
-      const data = await fetchJson<{ character: CharacterRecord }>(`/api/characters/${characterId}`);
-      setCharacter(data.character || data);
-    } catch {
-      // silent — identity panel handles errors
-    } finally {
-      setLoading(false);
-    }
-  }, [characterId]);
-
-  useEffect(() => { load(); }, [load]);
-
-  if (loading || !character) return null;
-
-  const apiRoot = typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8190";
-
-  return (
-    <div className="space-y-5">
-      {/* Section header */}
-      <div className="flex items-center gap-2.5">
-        <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center">
-          <HardDrive className="w-4 h-4 text-gray-400" />
-        </div>
-        <div>
-          <h2 className="text-sm font-bold text-gray-200 tracking-tight">Models & Training</h2>
-          <p className="text-[11px] text-gray-500">LoRA files, checkpoints, training history, and how to train more.</p>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
-        {/* Left column: LoRA files + Checkpoints */}
-        <div className="space-y-5">
-          {/* LoRA Files */}
-          <div className="rounded-2xl border border-gray-800/40 bg-gray-900/20 overflow-hidden">
-            <div className="px-5 py-3 border-b border-gray-800/30 flex items-center gap-2">
-              <Cpu className="w-4 h-4 text-emerald-400" />
-              <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">LoRA Model Files</h3>
-            </div>
-            <div className="p-4 space-y-2">
-              {character.loras.length > 0 ? (
-                character.loras.map((lora, i) => {
-                  const name = String(lora.name || lora);
-                  const filename = name.split("/").pop() || name;
-                  return (
-                    <a
-                      key={i}
-                      href={`/media/${name}`}
-                      download={filename}
-                      className="flex items-center justify-between rounded-xl border border-gray-800/40 bg-gray-900/40 hover:bg-gray-800/40 hover:border-emerald-700/40 px-4 py-3 transition-all group"
-                    >
-                      <div className="flex items-center gap-3 min-w-0">
-                        <div className="w-8 h-8 rounded-lg bg-emerald-950/40 border border-emerald-800/30 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-900/40 transition">
-                          <Download className="w-4 h-4 text-emerald-400" />
-                        </div>
-                        <div className="min-w-0">
-                          <p className="text-xs font-mono text-emerald-300/80 truncate">{filename}</p>
-                          <p className="text-[10px] text-gray-600 mt-0.5 truncate">{name}</p>
-                        </div>
-                      </div>
-                      <span className="text-[10px] text-gray-600 group-hover:text-emerald-400 transition flex-shrink-0 ml-3">
-                        Click to download
-                      </span>
-                    </a>
-                  );
-                })
-              ) : (
-                <div className="text-center py-4">
-                  <Cpu className="w-6 h-6 text-gray-700 mx-auto mb-2" />
-                  <p className="text-xs text-gray-600">No LoRA files bound to this character yet.</p>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Checkpoints */}
-          <div className="rounded-2xl border border-gray-800/40 bg-gray-900/20 overflow-hidden">
-            <div className="px-5 py-3 border-b border-gray-800/30 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Sparkles className="w-4 h-4 text-purple-400" />
-                <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">Checkpoints</h3>
-              </div>
-              {checkpoints.length > 0 && (
-                <span className="text-[10px] text-gray-600">{checkpoints.length} saved</span>
-              )}
-            </div>
-            <div className="p-4">
-              {checkpoints.length > 0 ? (
-                <div className="space-y-2">
-                  {checkpoints.map((cp, i) => {
-                    const filename = cp.name || cp.filename || `checkpoint-${i}`;
-                    return (
-                      <a
-                        key={i}
-                        href={`/media/${cp.path || cp.name || cp.filename}`}
-                        download={filename.split("/").pop() || filename}
-                        className="flex items-center justify-between rounded-xl border border-gray-800/40 bg-gray-900/30 hover:bg-gray-800/40 hover:border-purple-700/30 px-4 py-3 transition-all group"
-                      >
-                        <div className="flex items-center gap-3 min-w-0">
-                          <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-purple-950/30 border border-purple-800/20 flex items-center justify-center">
-                            <Download className="w-3.5 h-3.5 text-purple-400/70 group-hover:text-purple-400 transition" />
-                          </div>
-                          <div className="min-w-0">
-                            <p className="text-xs font-mono text-purple-300/70 truncate">{filename.split("/").pop() || filename}</p>
-                            <div className="flex items-center gap-3 text-[10px] text-gray-600 mt-0.5">
-                              {cp.step != null && cp.step > 0 && (
-                                <span className="flex items-center gap-1">
-                                  <Hash className="w-2.5 h-2.5" />
-                                  Step {cp.step.toLocaleString()}
-                                </span>
-                              )}
-                              {cp.size_bytes > 0 && (
-                                <span className="flex items-center gap-1">
-                                  <HardDrive className="w-2.5 h-2.5" />
-                                  {formatBytes(cp.size_bytes)}
-                                </span>
-                              )}
-                              {cp.modified_at && (
-                                <span className="flex items-center gap-1">
-                                  <Clock className="w-2.5 h-2.5" />
-                                  {formatDate(cp.modified_at)}
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                        <span className="text-[10px] text-gray-600 group-hover:text-purple-400 transition flex-shrink-0 ml-3">
-                          Download
-                        </span>
-                      </a>
-                    );
-                  })}
-                </div>
-              ) : (
-                <div className="text-center py-4">
-                  <Sparkles className="w-6 h-6 text-gray-700 mx-auto mb-2" />
-                  <p className="text-xs text-gray-600">No checkpoints saved yet.</p>
-                  <p className="text-[10px] text-gray-700 mt-1">Checkpoints appear here after LoRA training completes.</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Right column: Training + Instructions */}
-        <div className="space-y-5">
-          {/* Training Status */}
-          <div className="rounded-2xl border border-gray-800/40 bg-gray-900/20 overflow-hidden">
-            <div className="px-5 py-3 border-b border-gray-800/30 flex items-center gap-2">
-              <Upload className="w-4 h-4 text-amber-400" />
-              <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">Training Status</h3>
-            </div>
-            <div className="p-4">
-              {training?.running ? (
-                <div className="space-y-3">
-                  <div className="flex items-center gap-2">
-                    <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
-                    <span className="text-sm font-medium text-amber-400">Training in progress</span>
-                  </div>
-                  {training.job_name && <p className="text-xs text-gray-400">{training.job_name}</p>}
-                  {training.progress_percent != null && (
-                    <div className="space-y-1">
-                      <div className="flex justify-between text-[11px] text-gray-500">
-                        <span>{training.progress_percent.toFixed(1)}%</span>
-                        {training.current_step && training.total_steps && (
-                          <span>Step {training.current_step} / {training.total_steps}</span>
-                        )}
-                      </div>
-                      <div className="h-1.5 rounded-full bg-gray-800 overflow-hidden">
-                        <div className="h-full bg-gradient-to-r from-amber-500 to-amber-300 rounded-full transition-all"
-                          style={{ width: `${Math.min(100, training.progress_percent)}%` }} />
-                      </div>
-                    </div>
-                  )}
-                  {training.loss != null && (
-                    <div className="grid grid-cols-3 gap-2 text-xs">
-                      <div className="rounded-lg bg-gray-800/40 p-2">
-                        <p className="text-[10px] text-gray-500">Loss</p>
-                        <p className="font-mono text-gray-200">{training.loss.toFixed(4)}</p>
-                      </div>
-                      <div className="rounded-lg bg-gray-800/40 p-2">
-                        <p className="text-[10px] text-gray-500">Step Time</p>
-                        <p className="font-mono text-gray-200">{training.seconds_per_step?.toFixed(2) || "--"}s</p>
-                      </div>
-                      <div className="rounded-lg bg-gray-800/40 p-2">
-                        <p className="text-[10px] text-gray-500">LR</p>
-                        <p className="font-mono text-gray-200">{training.lr?.toExponential(1) || "--"}</p>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <div className="text-center py-3">
-                  <p className="text-xs text-gray-500">No training job active.</p>
-                  <p className="text-[10px] text-gray-600 mt-1">Start a new fine-tune with the instructions below.</p>
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* How to train a new LoRA */}
-          <div className="rounded-2xl border border-gray-800/40 bg-gray-900/20 overflow-hidden">
-            <div className="px-5 py-3 border-b border-gray-800/30 flex items-center gap-2">
-              <Terminal className="w-4 h-4 text-rose-400" />
-              <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">Train a New LoRA</h3>
-            </div>
-            <div className="p-4 space-y-3">
-              <p className="text-[11px] text-gray-400 leading-relaxed">
-                Use the LoRA training API to fine-tune a new model for {character.name}. You can add new source images first, then trigger training.
-              </p>
-
-              <div className="space-y-2">
-                <p className="text-[10px] font-medium text-gray-500">Add source images to this character:</p>
-                <pre className="text-[11px] bg-black/40 text-gray-300 rounded-xl p-2.5 overflow-x-auto leading-relaxed whitespace-pre-wrap border border-gray-800/60 font-mono">{`curl -X PATCH ${apiRoot}/api/characters/${character.id} \\
-  -H "Content-Type: application/json" \\
-  -d '{"source_images":["path/to/new/image.png", ...]}'`}</pre>
-              </div>
-
-              <div className="space-y-2">
-                <p className="text-[10px] font-medium text-gray-500">Start LoRA fine-tuning:</p>
-                <pre className="text-[11px] bg-black/40 text-gray-300 rounded-xl p-2.5 overflow-x-auto leading-relaxed whitespace-pre-wrap border border-gray-800/60 font-mono">{`curl -X POST ${apiRoot}/api/lora-training/start \\
-  -H "Content-Type: application/json" \\
-  -d '{"character_id":"${character.id}","base_model":"flux2","steps":1800}'`}</pre>
-              </div>
-            </div>
-          </div>
-
-          {/* Agent instruction */}
-          <div className="rounded-2xl border border-rose-600/20 bg-gradient-to-b from-rose-950/10 to-gray-900/20 overflow-hidden">
-            <div className="px-5 py-3 border-b border-rose-800/20 flex items-center gap-2">
-              <Terminal className="w-4 h-4 text-rose-400" />
-              <h3 className="text-xs font-semibold text-rose-300 uppercase tracking-wider">What to tell your agent</h3>
-            </div>
-            <div className="p-4 space-y-2">
-              <div className="rounded-xl border border-gray-700/40 bg-gray-900/40 p-3">
-                <p className="text-sm text-gray-300 leading-relaxed italic">
-                  "Generate some new photos of {character.name}.{' '}
-                  {character.trigger ? `Use the ${character.trigger} look. ` : ''}
-                  I want cinematic portraits — dramatic lighting, clean background, sharp focus."
-                </p>
-              </div>
-              <ul className="text-[11px] text-gray-500 space-y-1">
-                <li>• "Make more like this one, but change the outfit"</li>
-                <li>• "Retrain {character.name}'s model with these new photos"</li>
-                <li>• "Create a video project starring {character.name}"</li>
-                <li>• "Show me what {character.name} would look like in a cyberpunk setting"</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

studio/src/components/CharacterDetail.tsx

@@ -1,300 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import {
-  ArrowLeft, Save, Terminal, Cpu, Sparkles, Wand2,
-  Upload, Image, Box
-} from "lucide-react";
-import type { LoraCheckpoint } from "../types";
-
-interface CharacterRecord {
-  id: string;
-  name: string;
-  trigger: string | null;
-  description: string | null;
-  source_images: string[];
-  loras: Record<string, unknown>[];
-  defaults: Record<string, unknown>;
-  metadata: Record<string, unknown>;
-  updated_at: string;
-}
-
-interface LoraTrainingStatus {
-  ok: boolean;
-  message?: string;
-  running?: boolean;
-  job_id?: string;
-  last_run?: string;
-}
-
-interface Props {
-  characterId: string;
-  onBack: () => void;
-}
-
-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 CharacterDetail({ characterId, onBack }: Props) {
-  const [character, setCharacter] = useState<CharacterRecord | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-  const [training, setTraining] = useState<LoraTrainingStatus | null>(null);
-  const [checkpoints, setCheckpoints] = useState<LoraCheckpoint[]>([]);
-
-  // Editable fields
-  const [editName, setEditName] = useState("");
-  const [editTrigger, setEditTrigger] = useState("");
-  const [editDescription, setEditDescription] = useState("");
-
-  const load = useCallback(async () => {
-    try {
-      setError(null);
-      const data = await fetchJson<{ character: CharacterRecord }>(`/api/characters/${characterId}`);
-      const ch = data.character || data;
-      setCharacter(ch);
-      setEditName(ch.name || "");
-      setEditTrigger(ch.trigger || "");
-      setEditDescription(ch.description || "");
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to load character");
-    } finally {
-      setLoading(false);
-    }
-
-    const [trainingResult, checkpointsResult] = await Promise.allSettled([
-      fetchJson<LoraTrainingStatus & { ok?: boolean }>("/api/lora-training/status"),
-      fetchJson<{ checkpoints?: LoraCheckpoint[] }>("/api/lora-training/checkpoints"),
-    ]);
-
-    if (trainingResult.status === "fulfilled") setTraining(trainingResult.value.ok ? trainingResult.value : null);
-    if (checkpointsResult.status === "fulfilled") setCheckpoints(checkpointsResult.value.checkpoints || []);
-  }, [characterId]);
-
-  useEffect(() => {
-    load();
-    const id = window.setInterval(load, 10000);
-    return () => window.clearInterval(id);
-  }, [load]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    setSaved(false);
-    try {
-      const response = await fetch(`/api/characters/${characterId}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: editName,
-          trigger: editTrigger || null,
-          description: editDescription || null,
-        }),
-      });
-      if (!response.ok) throw new Error("Save failed");
-      const data = await response.json();
-      setCharacter(data);
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Save failed");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  if (loading) return <p className="text-gray-500 p-4">Loading...</p>;
-  if (error) return <div className="rounded-lg border border-red-900/60 bg-red-950/20 p-4 text-sm text-red-300">{error}</div>;
-  if (!character) return <p className="text-gray-500 p-4">Character not found.</p>;
-
-  return (
-    <div className="max-w-3xl mx-auto p-6 space-y-6">
-      {/* Back button */}
-      <button
-        onClick={onBack}
-        className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-200 transition"
-      >
-        <ArrowLeft className="w-4 h-4" />
-        Back to gallery
-      </button>
-
-      {/* Header + AMD badge */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-bold">{character.name}</h1>
-          <p className="text-xs text-gray-500 mt-0.5 font-mono">{character.id}</p>
-        </div>
-        <span className="text-[10px] uppercase tracking-wider text-amber-300 border border-amber-500/30 bg-amber-500/10 rounded-full px-2.5 py-1">
-          AMD MI300X
-        </span>
-      </div>
-
-      {/* Editable fields */}
-      <section className="rounded-xl border border-gray-800 bg-gray-900/40 p-5 space-y-4">
-        <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
-          <Box className="w-4 h-4 text-rose-400" />
-          Character Details
-        </h2>
-
-        <div className="space-y-3">
-          <div>
-            <label className="text-[11px] text-gray-500 block mb-1">Name</label>
-            <input
-              type="text"
-              value={editName}
-              onChange={(e) => setEditName(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-rose-500 transition"
-            />
-          </div>
-          <div>
-            <label className="text-[11px] text-gray-500 block mb-1">Trigger word</label>
-            <input
-              type="text"
-              value={editTrigger}
-              onChange={(e) => setEditTrigger(e.target.value)}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-rose-500 transition font-mono"
-              placeholder="e.g. Rigo"
-            />
-            <p className="text-[10px] text-gray-600 mt-1">The keyword your agent includes in prompts to activate this character's LoRA.</p>
-          </div>
-          <div>
-            <label className="text-[11px] text-gray-500 block mb-1">Description</label>
-            <textarea
-              value={editDescription}
-              onChange={(e) => setEditDescription(e.target.value)}
-              rows={3}
-              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-rose-500 transition resize-none"
-              placeholder="What your agent should know about this character..."
-            />
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="flex items-center gap-2 rounded-lg bg-rose-600 hover:bg-rose-500 px-4 py-2 text-sm font-semibold transition disabled:opacity-50"
-          >
-            <Save className="w-4 h-4" />
-            {saving ? "Saving..." : saved ? "Saved" : "Save changes"}
-          </button>
-          {saved && <span className="text-xs text-emerald-400">✓ Saved</span>}
-        </div>
-      </section>
-
-      {/* LoRAs */}
-      {character.loras.length > 0 && (
-        <section className="rounded-xl border border-gray-800 bg-gray-900/40 p-5 space-y-3">
-          <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
-            <Cpu className="w-4 h-4 text-emerald-400" />
-            LoRAs
-          </h2>
-          <div className="space-y-1.5">
-            {character.loras.map((lora, i) => (
-              <div key={i} className="text-xs font-mono text-emerald-300/80 bg-gray-800/60 rounded-lg px-3 py-2">
-                {String(lora.name || lora)}
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Source images */}
-      {character.source_images.length > 0 && (
-        <section className="rounded-xl border border-gray-800 bg-gray-900/40 p-5 space-y-3">
-          <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
-            <Image className="w-4 h-4 text-blue-400" />
-            Source Images ({character.source_images.length})
-          </h2>
-          <div className="grid grid-cols-3 gap-2">
-            {character.source_images.map((img, i) => (
-              <div key={i} className="aspect-square rounded-lg bg-gray-800 overflow-hidden border border-gray-700">
-                <img
-                  src={img.startsWith("/") ? img : `/media/${img}`}
-                  alt=""
-                  className="w-full h-full object-cover"
-                  onError={(e) => {
-                    (e.target as HTMLImageElement).style.display = "none";
-                  }}
-                />
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* LoRA Training */}
-      <section className="rounded-xl border border-gray-800 bg-gray-900/40 p-5 space-y-4">
-        <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
-          <Upload className="w-4 h-4 text-amber-400" />
-          LoRA Training
-        </h2>
-        {training ? (
-          <div className="space-y-2">
-            <p className="text-xs text-gray-400">
-              Status:{" "}
-              <span className={training.running ? "text-amber-400" : "text-gray-500"}>
-                {training.running ? "Running" : "Idle"}
-              </span>
-            </p>
-            {training.message && <p className="text-xs text-gray-500">{training.message}</p>}
-            {training.last_run && <p className="text-[10px] text-gray-600">Last run: {training.last_run}</p>}
-          </div>
-        ) : (
-          <p className="text-xs text-gray-500">No training status available.</p>
-        )}
-        <p className="text-[10px] text-gray-600">
-          Tell your agent: "Start a LoRA fine-tune for {character.name} with the latest source images."
-        </p>
-      </section>
-
-      {/* LoRA Checkpoints */}
-      <section className="rounded-xl border border-gray-800 bg-gray-900/40 p-5 space-y-3">
-        <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
-          <Sparkles className="w-4 h-4 text-purple-400" />
-          LoRA Checkpoints
-        </h2>
-        {checkpoints.length > 0 ? (
-          <div className="space-y-2">
-            {checkpoints.map((cp, i) => (
-              <div key={i} className="rounded-lg border border-gray-700 bg-gray-800/60 p-3 flex items-center justify-between">
-                <div>
-                  <p className="text-xs font-medium text-gray-300 font-mono">{cp.name || cp.filename || `Checkpoint ${i + 1}`}</p>
-                  {cp.created_at && <p className="text-[10px] text-gray-500">{cp.created_at}</p>}
-                </div>
-                {cp.step && <span className="text-[10px] text-gray-600">Step {cp.step}</span>}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-xs text-gray-500">No checkpoints yet.</p>
-        )}
-      </section>
-
-      {/* Agent instruction */}
-      <section className="rounded-xl border border-rose-600/30 bg-gradient-to-b from-rose-950/20 to-gray-950 p-5 space-y-3">
-        <h2 className="text-sm font-semibold text-gray-300 flex items-center gap-2">
-          <Terminal className="w-4 h-4 text-rose-400" />
-          Tell your AI agent
-        </h2>
-        <div className="rounded-lg border border-gray-700/60 bg-gray-900/60 p-3">
-          <p className="text-xs text-gray-300 leading-relaxed">
-            "Generate an image of {character.name}{character.trigger ? ` using the ${character.trigger} trigger` : ''}.{' '}
-            {character.description ? `${character.description}` : ''}"
-          </p>
-        </div>
-        <div className="space-y-1.5">
-          <p className="text-[10px] text-gray-500">Your agent can also:</p>
-          <ul className="text-[10px] text-gray-500 space-y-1">
-            <li>• Update character details — "Change {character.name}'s trigger word to ___"</li>
-            <li>• Start a new LoRA fine-tune — "Retrain {character.name}'s LoRA with new images"</li>
-            <li>• Use this character in projects — "Create a project with {character.name} as the main character"</li>
-            <li>• Generate media — "Generate {character.name} doing ___" or "Animate {character.name} ___"</li>
-          </ul>
-        </div>
-      </section>
-    </div>
-  );
-}

studio/src/components/CharacterIdentityPanel.tsx

@@ -1,190 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { Save, Terminal, Pencil, X } from "lucide-react";
-
-interface CharacterRecord {
-  id: string;
-  name: string;
-  kind: string | null;
-  trigger: string | null;
-  description: string | null;
-  source_images: string[];
-  loras: Record<string, unknown>[];
-  defaults: Record<string, unknown>;
-  metadata: Record<string, unknown>;
-  updated_at: string;
-}
-
-interface Props {
-  characterId: string;
-}
-
-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();
-}
-
-function resolveImageUrl(img: string): string {
-  return img.startsWith("/") ? img : `/media/${img}`;
-}
-
-export function CharacterIdentityPanel({ characterId }: Props) {
-  const [character, setCharacter] = useState<CharacterRecord | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [editing, setEditing] = useState(false);
-  const [saving, setSaving] = useState(false);
-
-  const [editName, setEditName] = useState("");
-  const [editTrigger, setEditTrigger] = useState("");
-  const [editDescription, setEditDescription] = useState("");
-
-  const load = useCallback(async () => {
-    try {
-      setError(null);
-      const data = await fetchJson<{ character: CharacterRecord }>(`/api/characters/${characterId}`);
-      const ch = data.character || data;
-      setCharacter(ch);
-      setEditName(ch.name || "");
-      setEditTrigger(ch.trigger || "");
-      setEditDescription(ch.description || "");
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to load character");
-    } finally {
-      setLoading(false);
-    }
-  }, [characterId]);
-
-  useEffect(() => { load(); }, [load]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      const response = await fetch(`/api/characters/${characterId}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: editName,
-          trigger: editTrigger || null,
-          description: editDescription || null,
-        }),
-      });
-      if (!response.ok) throw new Error("Save failed");
-      const data = await response.json();
-      setCharacter(data);
-      setEditing(false);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Save failed");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const cancelEdit = () => {
-    if (!character) return;
-    setEditName(character.name || "");
-    setEditTrigger(character.trigger || "");
-    setEditDescription(character.description || "");
-    setEditing(false);
-  };
-
-  if (loading) {
-    return (
-      <div className="rounded-2xl border border-gray-800/40 bg-gray-900/20 p-5 animate-pulse">
-        <div className="flex items-center gap-4">
-          <div className="w-14 h-14 rounded-2xl bg-gray-800" />
-          <div className="space-y-2">
-            <div className="h-5 w-32 bg-gray-800 rounded-lg" />
-            <div className="h-3 w-48 bg-gray-800 rounded-lg" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return <div className="rounded-2xl border border-red-900/30 bg-red-950/10 p-4 text-sm text-red-400">{error}</div>;
-  }
-
-  if (!character) return null;
-
-  const avatarUrl = character.source_images.length > 0 ? resolveImageUrl(character.source_images[0]) : null;
-
-  return (
-    <div className="rounded-2xl border border-gray-800/40 bg-gradient-to-b from-gray-900/40 to-gray-900/10 overflow-hidden">
-      <div className="p-5">
-        <div className="flex items-start gap-4">
-          {/* Avatar */}
-          <div className="w-14 h-14 rounded-2xl overflow-hidden flex-shrink-0 ring-1 ring-white/10 shadow-xl shadow-black/30">
-            {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 via-fuchsia-500 to-amber-400 flex items-center justify-center">
-                <span className="text-lg font-bold text-white">{character.name.charAt(0).toUpperCase()}</span>
-              </div>
-            )}
-          </div>
-
-          {/* Identity */}
-          <div className="flex-1 min-w-0">
-            {editing ? (
-              <div className="space-y-2.5">
-                <input type="text" value={editName} onChange={(e) => setEditName(e.target.value)}
-                  className="block w-full bg-gray-800/80 border border-gray-700 rounded-xl px-3 py-2 text-sm text-gray-100 focus:outline-none focus:border-rose-500 transition placeholder:text-gray-600"
-                  placeholder="Character name" autoFocus />
-                <div className="flex gap-2">
-                  <input type="text" value={editTrigger} onChange={(e) => setEditTrigger(e.target.value)}
-                    className="flex-1 bg-gray-800/80 border border-gray-700 rounded-xl px-3 py-2 text-xs text-gray-100 font-mono focus:outline-none focus:border-rose-500 transition placeholder:text-gray-600"
-                    placeholder="Trigger word (e.g. Rigo)" />
-                  <button onClick={handleSave} disabled={saving}
-                    className="flex items-center gap-1.5 rounded-xl bg-rose-600 hover:bg-rose-500 px-4 py-2 text-xs font-semibold transition disabled:opacity-50 shadow-lg shadow-rose-900/20">
-                    <Save className="w-3 h-3" />{saving ? "Saving..." : "Save"}
-                  </button>
-                  <button onClick={cancelEdit}
-                    className="flex items-center gap-1.5 rounded-xl border border-gray-700 hover:border-gray-500 px-3 py-2 text-xs text-gray-400 hover:text-gray-200 transition">
-                    <X className="w-3 h-3" />
-                  </button>
-                </div>
-                <textarea value={editDescription} onChange={(e) => setEditDescription(e.target.value)} rows={2}
-                  className="block w-full bg-gray-800/80 border border-gray-700 rounded-xl px-3 py-2 text-xs text-gray-100 focus:outline-none focus:border-rose-500 transition resize-none placeholder:text-gray-600"
-                  placeholder="What your agent should know about this character..." />
-              </div>
-            ) : (
-              <div>
-                <div className="flex items-center gap-2 flex-wrap">
-                  <h2 className="text-lg font-bold text-gray-100 tracking-tight">{character.name}</h2>
-                  {character.kind === "human" && (
-                    <span className="text-[10px] uppercase tracking-wider text-blue-300/80 border border-blue-500/30 bg-blue-500/10 rounded-full px-2 py-0.5">Human</span>
-                  )}
-                  {character.kind === "agent" && (
-                    <span className="text-[10px] uppercase tracking-wider text-violet-300/80 border border-violet-500/30 bg-violet-500/10 rounded-full px-2 py-0.5">Agent</span>
-                  )}
-                  <button onClick={() => setEditing(true)}
-                    className="p-1.5 rounded-lg text-gray-600 hover:text-gray-300 hover:bg-gray-800 transition" title="Edit">
-                    <Pencil className="w-3.5 h-3.5" />
-                  </button>
-
-                </div>
-
-                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs">
-                  {character.trigger && (
-                    <span className="inline-flex items-center gap-1">
-                      <span className="text-gray-500">trigger</span>
-                      <code className="text-rose-300/80 bg-rose-950/30 border border-rose-800/20 rounded-md px-2 py-0.5 text-[11px] font-medium">{character.trigger}</code>
-                    </span>
-                  )}
-                  <span className="text-gray-600 font-mono text-[11px]">{character.id}</span>
-                  <span className="text-emerald-400/60">{character.loras.length} LoRA{character.loras.length !== 1 ? "s" : ""}</span>
-                </div>
-
-                {character.description && (
-                  <p className="text-xs text-gray-500 mt-2 leading-relaxed line-clamp-2">{character.description}</p>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

studio/src/components/CharacterProfileView.tsx

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Edit3, Film, Image, Sparkles, UserRound } from "lucide-react";
+import { MediaTile } from "./MediaTile";
+import type { MediaItem } from "../types";
+
+interface CharacterRecord {
+  id: string;
+  name: string;
+  kind: string | null;
+  trigger: string | null;
+  description: string | null;
+  source_images: string[];
+  loras: Record<string, unknown>[];
+  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 load = useCallback(async () => {
+    try {
+      setError(null);
+      const data = await fetchJson<{ character: CharacterRecord }>(`/api/characters/${characterId}`);
+      setCharacter(data.character || data);
+    } 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>
+
+      <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,134 @@
+import { useMemo, useState } from "react";
+import { ArrowRight, Film, Image, Search, SlidersHorizontal, Video } from "lucide-react";
+import { JobCard } from "./JobCard";
+import { MediaTile } from "./MediaTile";
+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 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}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

studio/src/components/ProjectDetailView.tsx

@@ -0,0 +1,566 @@
+import { useEffect, useMemo, useState } from "react";
+import { Film, Image as ImageIcon, Video, Wand2, Plus, Save, Layers, Sparkles, Edit3, Play, ArrowLeft } from "lucide-react";
+import type { Project, Scene, Shot, ShotVersion, ProjectPhase } from "../types";
+
+interface ProjectDetailViewProps {
+  project: Project;
+  scenes: Scene[];
+  shots: Shot[];
+  phase: ProjectPhase;
+  selectedSceneId: string | null;
+  selectedShotId: string | null;
+  onSelectScene: (id: string) => void;
+  onSelectShot: (id: string | null) => void;
+  onRefresh: () => Promise<void> | void;
+  onBack: () => 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, phase,
+  selectedSceneId, selectedShotId,
+  onSelectScene, onSelectShot, onRefresh, onBack,
+}: ProjectDetailViewProps) {
+  const [versions, setVersions] = useState<ShotVersion[]>([]);
+  const [busyShotId, setBusyShotId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  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]);
+
+  async function patchShot(shotId: string, patch: Partial<Shot>) {
+    const shot = shots.find((s) => s.id === shotId);
+    if (!shot) return;
+    setBusyShotId(shotId);
+    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 {
+      setBusyShotId(null);
+    }
+  }
+
+  async function addShot() {
+    if (!selectedSceneId) return;
+    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");
+    }
+  }
+
+  async function generateImage(shot: Shot) {
+    setBusyShotId(shot.id);
+    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 {
+      setBusyShotId(null);
+    }
+  }
+
+  async function animateShot(shot: Shot) {
+    setBusyShotId(shot.id);
+    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 {
+      setBusyShotId(null);
+    }
+  }
+
+  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="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">
+        <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>
+        </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.heading || "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}
+                      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 px-3 py-1.5 text-xs font-medium text-rose-100 transition flex-shrink-0"
+                    >
+                      <Plus className="w-3.5 h-3.5" /> 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}
+                          busy={busyShotId === shot.id}
+                          onSelect={() => onSelectShot(shot.id)}
+                          onGenerateImage={() => generateImage(shot)}
+                          onAnimate={() => animateShot(shot)}
+                        />
+                      ))}
+                    </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>
+                );
+              })}
+            </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={busyShotId === selectedShot.id}
+                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>
+      )}
+    </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>
+    );
+  }
+  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">
+      <Sparkles className="w-3 h-3" /> Remix
+    </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>
+  );
+}
+
+interface ShotCardProps {
+  shot: Shot;
+  phase: ProjectPhase;
+  selected: boolean;
+  busy: boolean;
+  onSelect: () => void;
+  onGenerateImage: () => void;
+  onAnimate: () => void;
+}
+
+function ShotCard({ shot, phase, selected, busy, onSelect, onGenerateImage, onAnimate }: ShotCardProps) {
+  const imageUrl = mediaUrl(shot.image_file);
+  const videoUrl = mediaUrl(shot.video_file);
+  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">
+          {phase === "outline" || !imageUrl ? (
+            <button
+              onClick={(e) => { e.stopPropagation(); onGenerateImage(); }}
+              disabled={busy}
+              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 disabled:opacity-50 disabled:cursor-wait px-2 py-1 text-[11px] text-rose-100 transition"
+            >
+              <Wand2 className="w-3 h-3" /> {busy ? "Generating…" : imageUrl ? "Regenerate" : "Generate"}
+            </button>
+          ) : (
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); onGenerateImage(); }}
+                disabled={busy}
+                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 disabled:opacity-50 disabled:cursor-wait 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(); }}
+                disabled={busy}
+                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 disabled:opacity-50 disabled:cursor-wait px-2 py-1 text-[11px] text-violet-100 transition"
+              >
+                <Play className="w-3 h-3" /> {busy ? "…" : "Animate"}
+              </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({
+    description: shot.description || "",
+    image_prompt: shot.image_prompt || "",
+    motion_prompt: shot.motion_prompt || "",
+  });
+
+  useEffect(() => {
+    setDraft({
+      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.description !== (shot.description || "") ||
+    draft.image_prompt !== (shot.image_prompt || "") ||
+    draft.motion_prompt !== (shot.motion_prompt || "");
+
+  return (
+    <div className="space-y-4">
+      <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="Motion 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>
+        {phase === "outline" || !shot.image_file ? (
+          <button
+            onClick={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 disabled:cursor-wait px-3 py-2 text-xs font-medium text-rose-100 transition"
+          >
+            <Wand2 className="w-3.5 h-3.5" /> {saving ? "Generating…" : shot.image_file ? "Regenerate image" : "Generate image"}
+          </button>
+        ) : (
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={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 disabled:cursor-wait 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={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 disabled:cursor-wait px-3 py-2 text-xs font-medium text-violet-100 transition"
+            >
+              <Play className="w-3.5 h-3.5" /> {saving ? "…" : "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>
+      )}
+      <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 SceneSummary({ scene }: { scene: Scene }) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <p className="text-[11px] font-medium text-gray-300">Heading</p>
+        <p className="text-sm text-gray-100 mt-0.5">{scene.heading || "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">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 edit its prompts.
+      </p>
+    </div>
+  );
+}

studio/src/components/ProjectsGuide.tsx

@@ -1,21 +1,21 @@
 import { Film, Terminal, Sparkles, ChevronDown } from "lucide-react";
 
-export function ProjectsGuide() {
+export function ProjectsGuide({ compact = false }: { compact?: boolean }) {
   return (
-    <div className="max-w-2xl mx-auto p-8 space-y-8">
+    <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="text-xl font-bold tracking-tight">Projects</h2>
+          <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="rounded-2xl border border-violet-600/20 bg-gradient-to-b from-violet-950/10 to-gray-900/20 p-6">
+      <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>
@@ -39,7 +39,7 @@ export function ProjectsGuide() {
             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 showcase",
+            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.",
           },
           {

studio/src/components/ProjectsView.tsx

@@ -0,0 +1,186 @@
+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>
+                )}
+                <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

@@ -1,8 +1,12 @@
 import { useState, useEffect } from "react";
-import { Info, Settings, Terminal, X, Cpu, Users, BookOpen, Plus, Search, Sparkles, Bot, Upload, Image, Box, Film } from "lucide-react";
-import type { LoraCheckpoint } from "../../types";
-
-export type SidebarTab = "characters" | "agents" | "projects" | "guide" | "info" | "nodes" | "settings" | "dev";
+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 {
@@ -22,10 +26,12 @@ interface AppSidebarProps {
   checkpoints: LoraCheckpoint[];
   onQueued?: () => void;
   onSelectCharacter?: (characterId: string) => void;
+  projectMode?: ProjectModeData;
 }
 
-export function AppSidebar({ activeTab, onTabChange, onClose, checkpoints: _checkpoints, onQueued: _onQueued, onSelectCharacter }: AppSidebarProps) {
+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", 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 },
@@ -94,16 +100,18 @@ export function AppSidebar({ activeTab, onTabChange, onClose, checkpoints: _chec
       <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">
-            {visibleTabs.find((tab) => tab.id === activeTab)?.label}
+            {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} /> : <ProjectsGuide compact />)}
           {activeTab === "guide" && <GuideTab />}
           {activeTab === "info" && <PlaceholderTab title="Info" body="Select media to inspect generated outputs, prompts, and metadata." />}
-          {activeTab === "nodes" && <PlaceholderTab title="Nodes" body="MI300X, ComfyUI, model, and queue health will live here." />}
+          {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>
@@ -116,7 +124,6 @@ function CharactersTab({ onSelectCharacter }: { onSelectCharacter?: (characterId
   const [characters, setCharacters] = useState<CharacterSummary[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [showCreate, setShowCreate] = useState(false);
 
   useEffect(() => {
     fetch("/api/characters")
@@ -128,34 +135,21 @@ function CharactersTab({ onSelectCharacter }: { onSelectCharacter?: (characterId
 
   return (
     <div className="h-full overflow-y-auto p-4 space-y-4">
-      <p className="text-xs text-gray-500 leading-relaxed">
-        Reusable character assets powered by fine-tuned LoRAs on AMD MI300X.
-      </p>
-
-      <div className="space-y-2">
-        <button
-          onClick={() => setShowCreate(!showCreate)}
-          className="w-full rounded-xl bg-rose-600 hover:bg-rose-500 active:scale-[0.98] px-4 py-2.5 text-sm font-semibold transition-all flex items-center justify-center gap-2 shadow-lg shadow-rose-900/20"
-        >
-          <Plus className="w-4 h-4" />
-          Create your own character
-        </button>
-        <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" />
-          Find more characters
-          <span className="text-[10px] text-gray-600 ml-1">coming soon</span>
-        </a>
+      <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. Later, imported, licensed, purchased, or community characters can live here too, with their ownership status clearly marked.
+        </p>
       </div>
 
-      {showCreate && <CreateCharacterWorkflow />}
+      <CreateCharacterWorkflow />
 
       {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 && !showCreate && (
+      {!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>
@@ -198,18 +192,31 @@ function CharactersTab({ onSelectCharacter }: { onSelectCharacter?: (characterId
                 {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 italic">
-              Say: "Generate new photos of {ch.name}"
+            <p className="text-[10px] text-gray-500">
+              Available for your agent to use in generated images and videos.
             </p>
           </div>
         </div>
         );
       })}
+
+      <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>
   );
 }
@@ -309,70 +316,84 @@ function GuideTab() {
 }
 
 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>
-        <h2 className="text-sm font-semibold">AI Agents</h2>
-        <p className="text-[11px] text-gray-500 mt-1">
-          Nemoflix is built for AI agents — not just humans. Your agent gets its own identity, generates its own content, and builds its own presence.
-        </p>
-      </section>
-
-      <div className="rounded-xl border border-violet-600/30 bg-gradient-to-b from-violet-950/20 to-gray-950 p-4 space-y-3">
+      <section className="space-y-2">
         <div className="flex items-center gap-2">
           <Bot className="w-4 h-4 text-violet-400" />
-          <span className="text-xs font-semibold text-violet-300 uppercase tracking-wider">For your AI agent</span>
+          <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="space-y-2.5">
-          {[
-            { n: 1, title: "Register a profile", body: "Your agent registers anonymously — no email, no password. Just an API key and an agent ID. That's its identity on Nemoflix." },
-            { n: 2, title: "Create its character", body: "Every agent needs a visual identity. Upload reference images, fine-tune a LoRA, and give your agent a face the world can recognize." },
-            { n: 3, title: "Generate content", body: "Images, videos, multi-shot projects — your agent creates media of itself, on demand, through the same API you use." },
-            { n: 4, title: "Publish to its feed", body: "Every agent gets a social profile. Share generated content, build a following, and eventually monetize — an Instagram built for AI agents, not humans.", comingSoon: true },
-          ].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/15 flex items-center justify-center mt-0.5">
-                <span className="text-[10px] text-violet-400 font-medium">{step.n}</span>
+      <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-[11px] text-gray-200">{step.title}</p>
-                <p className="text-[10px] text-gray-500 leading-relaxed">{step.body}</p>
-                {step.comingSoon && (
-                  <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 mt-1.5 inline-block">Coming soon</span>
-                )}
+                <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-lg border border-gray-700/60 bg-gray-900/60 p-3 space-y-2">
-        <p className="text-[11px] font-semibold text-gray-300 flex items-center gap-1.5">
-          <Terminal className="w-3.5 h-3.5 text-violet-400" />
-          Tell your agent to get started:
-        </p>
-        <p className="text-[11px] text-gray-400 leading-relaxed">
-          "Register as an agent on Nemoflix, create a character for yourself using my reference images, and generate your first profile picture."
-        </p>
-      </div>
-
-      <section className="space-y-3">
-        <p className="text-[11px] font-medium text-gray-400">Don't have your own agent?</p>
-        <div className="rounded-lg border border-gray-700 bg-gray-900/40 p-3 space-y-2">
-          <p className="text-[11px] text-gray-300 leading-relaxed">
-            We're building hosted inference — a built-in AI agent that lives inside Nemoflix Studio. Same capabilities: it registers, creates characters, generates content, and manages your projects.
-          </p>
-          <p className="text-[10px] text-gray-500 leading-relaxed">
-            You just type what you want. The agent handles the rest — no OpenClaw, no setup, no API keys.
-          </p>
-          <span className="text-[10px] uppercase tracking-wider text-purple-300/80 border border-purple-500/20 bg-purple-500/5 rounded-full px-2 py-0.5 inline-block">Coming soon</span>
+      <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>
-      </section>
+      </div>
 
-      <div className="pt-1 border-t border-gray-800/40">
-        <p className="text-[10px] text-gray-600">
-          Your agent uses <code className="text-gray-500">POST /api/agents/register</code> to sign up, then the same Characters and Projects APIs you see in the Guide tab.
+      <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>

studio/src/components/sidebar/{GenerateLoraTab.tsx → GenerateTab.tsx}

@@ -1,77 +1,145 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { LoraCheckpoint } from "../../types";
 
-interface GenerateLoraTabProps {
+interface GenerateTabProps {
   checkpoints: LoraCheckpoint[];
   onQueued?: () => void;
 }
 
-interface LoraGenerateResponse {
+type GenerateMode = "image" | "t2v" | "i2v";
+
+interface GenerateResponse {
   ok: boolean;
-  checkpoint: string;
-  lora_name: string;
   prompt_id?: string | null;
-  number?: number | null;
+  checkpoint?: string | null;
+  lora_name?: string | null;
+  mode?: string;
   node_errors?: Record<string, unknown> | null;
 }
 
-const DEFAULT_PROMPT =
-  "Rigo posing for a polished social media profile post, confident relaxed expression, casual modern outfit, clean urban background, natural daylight, shallow depth of field, realistic skin texture, sharp focus on face, high-end smartphone photography, Instagram creator aesthetic";
+interface CharacterSummary {
+  id: string;
+  name: string;
+  trigger: string | null;
+  loras: { workflow?: string; name?: string; strength?: number }[];
+  source_images: string[];
+}
+
+const DEFAULT_IMAGE_PROMPT =
+  "cinematic portrait, confident subject, dramatic soft light, realistic skin texture, sharp face detail, high-end editorial photography";
+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()}`;
 }
 
-export function GenerateLoraTab({ checkpoints, onQueued }: GenerateLoraTabProps) {
+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 [mode, setMode] = useState<GenerateMode>("image");
+  const [characters, setCharacters] = useState<CharacterSummary[]>([]);
+  const [characterId, setCharacterId] = useState("none");
   const [checkpoint, setCheckpoint] = useState("latest");
-  const [prompt, setPrompt] = useState(DEFAULT_PROMPT);
+  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 [filenamePrefix, setFilenamePrefix] = useState("nemoflix-amd/showcase/rigo-lora-test");
   const [submitting, setSubmitting] = useState(false);
-  const [result, setResult] = useState<LoraGenerateResponse | null>(null);
+  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([]));
+  }, []);
+
+  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 response = await fetch("/api/image/generate", {
+      const filenamePrefix = outputPrefix(mode, cleanPrompt);
+      const endpoint = mode === "image" ? "/api/image/generate" : "/api/video/generate";
+      const useCharacter = characterId !== "none";
+      const body = mode === "image"
+        ? {
+            workflow: "flux2_lora",
+            character: useCharacter ? characterId : undefined,
+            checkpoint: useCharacter ? undefined : (checkpoint || latestCheckpoint),
+            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({
-          workflow: "flux2_lora",
-          checkpoint: checkpoint || latestCheckpoint,
-          prompt: cleanPrompt,
-          width,
-          height,
-          steps,
-          guidance,
-          lora_strength: loraStrength,
-          filename_prefix: filenamePrefix.trim() || "nemoflix-amd/showcase/rigo-lora-test",
-          submit: true,
-        }),
+        body: JSON.stringify(body),
       });
 
       const data = await response.json().catch(() => ({}));
       if (!response.ok) {
-        throw new Error(data?.detail || `${response.status}: failed to queue LoRA image`);
+        throw new Error(data?.detail || `${response.status}: failed to queue generation`);
       }
 
       setResult(data);
@@ -83,39 +151,68 @@ export function GenerateLoraTab({ checkpoints, onQueued }: GenerateLoraTabProps)
     }
   }
 
+  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>
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-[11px] uppercase tracking-[0.22em] text-rose-400/80 font-semibold">Generate</p>
-          <span className="text-[10px] uppercase tracking-[0.18em] text-amber-300 border border-amber-500/30 bg-amber-500/10 rounded-full px-2 py-1">
-            AMD MI300X
-          </span>
-        </div>
-        <h2 className="text-lg font-semibold mt-1">Test Rigo LoRA</h2>
-        <p className="text-xs text-gray-500 mt-2 leading-relaxed">
-          Queue a FLUX.2 image using the trained Rigo LoRA on the MI300X training/generation stack. Results appear in the gallery after completion.
+      <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">Checkpoint</span>
+        <span className="text-xs font-medium text-gray-400">Character</span>
         <select
-          value={checkpoint}
-          onChange={(event) => setCheckpoint(event.target.value)}
+          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="latest">latest · final checkpoint</option>
-          {checkpoints.map((item) => (
-            <option key={item.name} value={item.name}>
-              {checkpointLabel(item)}
+          <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</span>
+        <span className="text-xs font-medium text-gray-400">Prompt / idea</span>
         <textarea
           value={prompt}
           onChange={(event) => setPrompt(event.target.value)}
@@ -124,37 +221,70 @@ export function GenerateLoraTab({ checkpoints, onQueued }: GenerateLoraTabProps)
         />
       </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="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 and uses the 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} />
-        <NumberField label="Steps" value={steps} onChange={setSteps} min={1} max={60} step={1} />
-        <NumberField label="Guidance" value={guidance} onChange={setGuidance} min={1} max={10} step={0.5} />
+        {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>
 
-      <NumberField
-        label="LoRA strength"
-        value={loraStrength}
-        onChange={setLoraStrength}
-        min={0}
-        max={2}
-        step={0.05}
-      />
-
-      <label className="block space-y-2">
-        <span className="text-xs font-medium text-gray-400">Filename prefix</span>
-        <input
-          value={filenamePrefix}
-          onChange={(event) => setFilenamePrefix(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"
+      {mode === "image" && (
+        <NumberField
+          label="LoRA strength"
+          value={loraStrength}
+          onChange={setLoraStrength}
+          min={0}
+          max={2}
+          step={0.05}
         />
-      </label>
+      )}
 
       <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..." : "Generate LoRA test image"}
+        {submitting ? "Queueing..." : mode === "image" ? "Generate image" : "Generate video"}
       </button>
 
       {error && (
@@ -168,8 +298,8 @@ export function GenerateLoraTab({ checkpoints, onQueued }: GenerateLoraTabProps)
           <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>
-            <p>Checkpoint: {result.checkpoint}</p>
-            <p>LoRA: {result.lora_name}</p>
+            {result.checkpoint && <p>Checkpoint: {result.checkpoint}</p>}
+            {result.lora_name && <p>LoRA: {result.lora_name}</p>}
           </div>
         </div>
       )}

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,145 @@
+import { Plus, Sparkles, UserCircle, Clapperboard } from "lucide-react";
+import type { ProjectModeData } from "../../types";
+
+interface ProjectSidebarProps {
+  data: ProjectModeData;
+}
+
+export function ProjectSidebar({ data }: ProjectSidebarProps) {
+  const { project, scenes, shots, selectedSceneId, phase, onSelectScene, onAddScene } = data;
+
+  if (scenes.length === 0) {
+    return <OutlineSidebar data={data} />;
+  }
+
+  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 (
+            <button
+              key={scene.id}
+              onClick={() => onSelectScene(scene.id)}
+              className={`w-full text-left rounded-xl px-3 py-2.5 transition 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.heading || "Untitled scene"}
+                  </span>
+                </div>
+              </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 === "remix" ? "text-violet-400/70" : "text-emerald-400/70"}>
+                    · {generated} rendered
+                  </span>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </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/index.css

@@ -5,3 +5,34 @@
 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;
+}

studio/src/types.ts

@@ -63,3 +63,81 @@ export interface JobItem {
   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;
+  heading: string | null;
+  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;
+  voiceover: string | null;
+  image_prompt: string | null;
+  motion_prompt: string | null;
+  camera_motion: 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" | "remix";
+
+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;
+}

studio/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfigFnObject;
-export default _default;

studio/vite.config.js

@@ -1,22 +0,0 @@
-import { defineConfig, loadEnv } from "vite";
-import react from "@vitejs/plugin-react";
-export default defineConfig(function (_a) {
-    var mode = _a.mode;
-    var env = loadEnv(mode, process.cwd(), "");
-    var apiTarget = env.NEMOFLIX_AMD_API_URL || "http://127.0.0.1:8190";
-    return {
-        plugins: [react()],
-        server: {
-            host: "0.0.0.0",
-            port: 3010,
-            proxy: {
-                "/api": { target: apiTarget, changeOrigin: true },
-                "/media": { target: apiTarget, changeOrigin: true },
-            },
-        },
-        build: {
-            outDir: "dist",
-            emptyOutDir: true,
-        },
-    };
-});