@effectnode/media 0.1.0

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

@@ -0,0 +1,267 @@
+import { useEffect, useRef } from "react";
+import { useSceneVisualStore } from "../../stores/sceneVisualStore";
+
+interface Props {
+  projectId: string;
+}
+
+export default function SceneVisualTab({ projectId }: Props) {
+  const sceneStore = useSceneVisualStore();
+
+  useEffect(() => {
+    sceneStore.ensureProject(projectId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
+
+  const anyGenerating = sceneStore.items.some((i) => i.generating);
+
+  const uploadFileInputRef = useRef<HTMLInputElement>(null);
+  const uploadTargetRef = useRef<string | null>(null);
+
+  const handleUploadFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    const targetId = uploadTargetRef.current;
+    e.target.value = "";
+    if (!file || !targetId) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      sceneStore.uploadItemImage(
+        projectId,
+        targetId,
+        reader.result as string,
+        file.name,
+      );
+    };
+    reader.readAsDataURL(file);
+  };
+
+  // ========== SVG Icons ==========
+
+  const SceneIcon = (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <polyline points="21 15 16 10 5 21" />
+    </svg>
+  );
+
+  const PlusIcon = (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  );
+
+  const TrashIcon = (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  );
+
+  const SparkleIcon = (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+    </svg>
+  );
+
+  const SpinnerIcon = (
+    <svg
+      className="animate-spin text-tiffany-600"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
+      <path d="M12 2a10 10 0 0 1 10 10" strokeOpacity="0.75" />
+    </svg>
+  );
+
+  const StopIcon = (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+      <rect x="4" y="4" width="16" height="16" rx="2" />
+    </svg>
+  );
+
+  const UploadIcon = (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+
+  return (
+    <div className="flex flex-col gap-7">
+      <div className="flex items-center gap-2">
+        <span className="text-tiffany-600">{SceneIcon}</span>
+        <h2 className="text-base font-semibold text-ink-900">
+          Scene Visual
+        </h2>
+      </div>
+
+      {/* Halt generation */}
+      {anyGenerating && (
+        <button
+          onClick={() => sceneStore.haltAll()}
+          className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-semibold rounded-2xl border border-red-200 transition-colors"
+        >
+          {StopIcon}
+          Stop Generation
+        </button>
+      )}
+
+      {/* Add scene */}
+      <button
+        onClick={() => sceneStore.addItem()}
+        className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-ink-50 hover:bg-ink-200 text-ink-700 text-sm font-medium rounded-2xl border border-ink-200 transition-colors"
+      >
+        {PlusIcon}
+        Add Scene
+      </button>
+
+      <input
+        ref={uploadFileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleUploadFileChange}
+        className="hidden"
+      />
+
+      {/* Scene items */}
+      {sceneStore.items.length === 0 ? (
+        <p className="text-xs text-ink-500 italic text-center py-8 border border-dashed border-ink-200 rounded-2xl">
+          No scenes yet. Add one to generate a scene visual.
+        </p>
+      ) : (
+        <div className="flex flex-col gap-6">
+          {sceneStore.items.map((item, index) => (
+            <div
+              key={item.id}
+              className="border border-ink-200 rounded-2xl p-5 flex flex-col gap-3 bg-ink-100/60"
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-semibold text-ink-700 uppercase tracking-wider">
+                  Scene {index + 1}
+                </span>
+                <button
+                  onClick={() => sceneStore.removeItem(item.id)}
+                  disabled={item.generating}
+                  className="flex items-center justify-center w-6 h-6 rounded-full text-ink-500 hover:bg-red-50 hover:text-red-600 disabled:opacity-50 transition-colors"
+                  title="Remove scene"
+                >
+                  {TrashIcon}
+                </button>
+              </div>
+
+              <textarea
+                value={item.prompt}
+                onChange={(e) => sceneStore.setPrompt(item.id, e.target.value)}
+                placeholder="Describe the scene, e.g. a little lamb standing in a sunny meadow."
+                rows={2}
+                disabled={item.generating}
+                className="w-full px-3 py-2 bg-white border border-ink-200 rounded-xl text-ink-900 text-sm placeholder-ink-500 focus:outline-none focus:border-tiffany-500 focus:ring-2 focus:ring-tiffany-500/30 transition-all resize-none disabled:opacity-50"
+              />
+
+              {item.generating || item.uploading ? (
+                <div className="flex items-center gap-2 px-3 py-2 bg-ink-50 border border-ink-200 rounded-xl text-xs text-ink-700">
+                  {SpinnerIcon}
+                  {item.generating ? "Generating..." : "Uploading..."}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => sceneStore.generateItem(projectId, item.id)}
+                    disabled={!item.prompt.trim()}
+                    className="flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 disabled:bg-ink-200 disabled:text-ink-500 text-ink-950 transition-colors"
+                  >
+                    {SparkleIcon}
+                    Generate
+                  </button>
+                  <button
+                    onClick={() => {
+                      uploadTargetRef.current = item.id;
+                      uploadFileInputRef.current?.click();
+                    }}
+                    className="flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium rounded-xl border border-ink-200 bg-white text-ink-600 hover:border-ink-300 transition-colors"
+                  >
+                    {UploadIcon}
+                    Upload Image
+                  </button>
+                </div>
+              )}
+
+              {item.error && (
+                <p className="text-xs text-red-600">{item.error}</p>
+              )}
+
+              {item.logs.length > 0 && (
+                <div className="p-2 bg-ink-50 border border-ink-200 rounded-xl max-h-24 overflow-y-auto">
+                  <pre className="text-[10px] text-ink-600 font-mono whitespace-pre-wrap">
+                    {item.logs.join("")}
+                  </pre>
+                </div>
+              )}
+
+              {item.result && (
+                <div className="rounded-xl overflow-hidden border border-ink-200 inline-block">
+                  <img
+                    src={item.result}
+                    alt={`Scene ${index + 1}`}
+                    className="max-w-full h-auto"
+                  />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { useGenerationStore } from "../../stores/generationStore";
+import { ChatUI } from "../ChatUI/ChatUI";
+import MlxVlmServerPanel from "./MlxVlmServerPanel";
+
+interface Props {
+  projectId: string;
+}
+
+export default function StoryWriterTab({ projectId }: Props) {
+  const store = useGenerationStore();
+
+  const StoryWriterIcon = (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+    </svg>
+  );
+
+  return (
+    <div className="flex flex-col gap-7">
+      <div className="flex items-center gap-2">
+        <span className="text-tiffany-600">{StoryWriterIcon}</span>
+        <h2 className="text-base font-semibold text-ink-900">Story Writer</h2>
+      </div>
+
+      {store.agent.serverRunning && store.agent.serverOnline ? null : (
+        <MlxVlmServerPanel />
+      )}
+
+      {store.agent.serverRunning && store.agent.serverOnline ? (
+        <ChatUI projectId={projectId} agent="story-writer" />
+      ) : (
+        <div className="flex flex-col items-center justify-center gap-2 p-8 border border-dashed border-ink-200 rounded-2xl">
+          <span className="text-ink-500">{StoryWriterIcon}</span>
+          <p className="text-xs text-ink-500 italic">
+            Start the LLM server to plan videos and build scene CSV scripts.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,246 @@
+import {
+  useQueueStore,
+  type QueueTask,
+  type QueueTaskStatus,
+} from "../../stores/queueStore";
+
+interface Props {
+  projectId: string;
+}
+
+const STATUS_META: Record<
+  QueueTaskStatus,
+  { label: string; badgeClass: string; dotClass: string }
+> = {
+  pending: {
+    label: "Queued",
+    badgeClass: "bg-ink-100 text-ink-600 border-ink-200",
+    dotClass: "bg-ink-400",
+  },
+  running: {
+    label: "Running",
+    badgeClass: "bg-tiffany-50 text-tiffany-700 border-tiffany-200",
+    dotClass: "bg-tiffany-500",
+  },
+  completed: {
+    label: "Done",
+    badgeClass: "bg-emerald-50 text-emerald-700 border-emerald-200",
+    dotClass: "bg-emerald-500",
+  },
+  failed: {
+    label: "Failed",
+    badgeClass: "bg-red-50 text-red-700 border-red-200",
+    dotClass: "bg-red-500",
+  },
+  cancelled: {
+    label: "Cancelled",
+    badgeClass: "bg-amber-50 text-amber-700 border-amber-200",
+    dotClass: "bg-amber-500",
+  },
+  paused: {
+    label: "Paused",
+    badgeClass: "bg-violet-50 text-violet-700 border-violet-200",
+    dotClass: "bg-violet-500",
+  },
+};
+
+const QueueIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="8" y1="6" x2="21" y2="6" />
+    <line x1="8" y1="12" x2="21" y2="12" />
+    <line x1="8" y1="18" x2="21" y2="18" />
+    <line x1="3" y1="6" x2="3.01" y2="6" />
+    <line x1="3" y1="12" x2="3.01" y2="12" />
+    <line x1="3" y1="18" x2="3.01" y2="18" />
+  </svg>
+);
+
+const StopIcon = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+    <rect x="5" y="5" width="14" height="14" rx="2" />
+  </svg>
+);
+
+const ClearIcon = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 6h18" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    <line x1="10" y1="11" x2="10" y2="17" />
+    <line x1="14" y1="11" x2="14" y2="17" />
+  </svg>
+);
+
+const PauseIcon = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <rect x="6" y="4" width="4" height="16" rx="1" />
+    <rect x="14" y="4" width="4" height="16" rx="1" />
+  </svg>
+);
+
+const PlayIcon = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M8 5v14l11-7z" />
+  </svg>
+);
+
+function StatusBadge({ status }: { status: QueueTaskStatus }) {
+  const meta = STATUS_META[status];
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full border text-[11px] font-semibold ${meta.badgeClass}`}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full ${meta.dotClass}`} />
+      {meta.label}
+    </span>
+  );
+}
+
+function TaskRow({
+  task,
+  onCancel,
+}: {
+  task: QueueTask;
+  onCancel: () => void;
+}) {
+  const active = task.status === "pending" || task.status === "running";
+  const cancellable = active || task.status === "paused";
+  const progress =
+    task.progress && task.progress.total > 0
+      ? Math.round((task.progress.current / task.progress.total) * 100)
+      : null;
+
+  return (
+    <li className="flex flex-col gap-1.5 px-3 py-2 rounded-xl border border-ink-200 bg-white">
+      <div className="flex items-center gap-2">
+        <StatusBadge status={task.status} />
+        <span className="flex-1 text-sm font-medium text-ink-800 truncate">
+          {task.label}
+        </span>
+        {cancellable && (
+          <button
+            onClick={onCancel}
+            className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium rounded-lg border border-ink-200 text-ink-600 hover:border-red-300 hover:text-red-600 transition-colors"
+          >
+            {StopIcon}
+            Cancel
+          </button>
+        )}
+      </div>
+
+      {active && task.statusText && (
+        <span className="text-xs text-ink-600 truncate">{task.statusText}</span>
+      )}
+
+      {active && progress !== null && (
+        <progress
+          value={task.progress!.current}
+          max={task.progress!.total}
+          className="w-full h-2 [&::-webkit-progress-bar]:bg-ink-100 [&::-webkit-progress-value]:bg-tiffany-500"
+        />
+      )}
+
+      {task.status === "failed" && task.error && (
+        <span className="text-xs text-red-600 whitespace-pre-wrap">
+          {task.error}
+        </span>
+      )}
+    </li>
+  );
+}
+
+export default function TaskQueuePanel({ projectId }: Props) {
+  const tasks = useQueueStore((s) => s.tasks);
+  const paused = useQueueStore((s) => s.paused);
+  const cancel = useQueueStore((s) => s.cancel);
+  const pause = useQueueStore((s) => s.pause);
+  const resume = useQueueStore((s) => s.resume);
+  const clearFinished = useQueueStore((s) => s.clearFinished);
+
+  if (tasks.length === 0 && !paused) return null;
+
+  const hasActive = tasks.some(
+    (t) => t.status === "pending" || t.status === "running",
+  );
+  const hasFinished = tasks.some(
+    (t) => t.status !== "pending" && t.status !== "running" && t.status !== "paused",
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <span className="text-tiffany-600">{QueueIcon}</span>
+        <h3 className="text-sm font-semibold text-ink-900">Generation Queue</h3>
+        <span className="text-xs text-ink-500">{tasks.length}</span>
+        <div className="ml-auto flex items-center gap-2">
+          {paused ? (
+            <button
+              onClick={() => resume(projectId)}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl bg-tiffany-500 hover:bg-tiffany-600 text-ink-950 transition-colors"
+            >
+              {PlayIcon}
+              Resume
+            </button>
+          ) : (
+            hasActive && (
+              <button
+                onClick={() => pause(projectId)}
+                className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl border border-ink-200 text-ink-600 hover:border-ink-300 hover:text-ink-900 transition-colors"
+              >
+                {PauseIcon}
+                Pause
+              </button>
+            )
+          )}
+          {hasFinished && (
+            <button
+              onClick={() => clearFinished(projectId)}
+              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-xl border border-ink-200 text-ink-600 hover:border-ink-300 hover:text-ink-900 transition-colors"
+            >
+              {ClearIcon}
+              Clear finished
+            </button>
+          )}
+        </div>
+      </div>
+
+      <ul className="flex flex-col gap-1.5">
+        {tasks.map((task) => (
+          <TaskRow
+            key={task.id}
+            task={task}
+            onCancel={() => cancel(projectId, task.id)}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from "react";
+import { useQueueStore } from "../../stores/queueStore";
+
+const TerminalIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="4 17 10 11 4 5" />
+    <line x1="12" y1="19" x2="20" y2="19" />
+  </svg>
+);
+
+export default function TerminalLogPanel() {
+  const logs = useQueueStore((s) => s.logs);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Keep the view pinned to the bottom as new terminal output streams in.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [logs]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <span className="text-tiffany-600">{TerminalIcon}</span>
+        <h3 className="text-sm font-semibold text-ink-900">Terminal Log</h3>
+      </div>
+
+      <div
+        ref={scrollRef}
+        className="p-3 bg-ink-950 border border-ink-800 rounded-xl max-h-72 overflow-y-auto font-mono text-xs leading-relaxed text-ink-100"
+      >
+        {logs ? (
+          <pre className="whitespace-pre-wrap break-words">{logs}</pre>
+        ) : (
+          <span className="text-ink-500 italic">No logs yet.</span>
+        )}
+      </div>
+    </div>
+  );
+}