@effectnode/media 0.9.0 → 0.11.0

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

@@ -1,913 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  useBatchVoiceStore,
-  type BatchVoiceRowStatus,
-} from "../../stores/batchVoiceStore";
-import { useGenerationStore } from "../../stores/generationStore";
-import { useProjectStore } from "../../stores/projectStore";
-
-interface Props {
-  projectId: string;
-}
-
-// ========== SVG Icons ==========
-
-const TableIcon = (
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="text-tiffany-600"
-  >
-    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-    <line x1="3" y1="9" x2="21" y2="9" />
-    <line x1="3" y1="15" x2="21" y2="15" />
-    <line x1="9" y1="3" x2="9" y2="21" />
-  </svg>
-);
-
-const PlusIcon = (
-  <svg
-    width="14"
-    height="14"
-    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 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>
-);
-
-const ImageIcon = (
-  <svg
-    width="14"
-    height="14"
-    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 FolderIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
-  </svg>
-);
-
-const MicIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-    <line x1="12" y1="19" x2="12" y2="23" />
-  </svg>
-);
-
-const CloseIcon = (
-  <svg
-    width="12"
-    height="12"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <line x1="18" y1="6" x2="6" y2="18" />
-    <line x1="6" y1="6" x2="18" y2="18" />
-  </svg>
-);
-
-const SparkleIcon = (
-  <svg
-    width="16"
-    height="16"
-    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 CheckIcon = (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <polyline points="20 6 9 17 4 12" />
-  </svg>
-);
-
-const SpinnerIcon = (
-  <svg
-    className="animate-spin"
-    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 FilmIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
-    <line x1="7" y1="2" x2="7" y2="22" />
-    <line x1="17" y1="2" x2="17" y2="22" />
-    <line x1="2" y1="12" x2="22" y2="12" />
-    <line x1="2" y1="7" x2="7" y2="7" />
-    <line x1="2" y1="17" x2="7" y2="17" />
-    <line x1="17" y1="17" x2="22" y2="17" />
-    <line x1="17" y1="7" x2="22" y2="7" />
-  </svg>
-);
-
-// ========== Status badge ==========
-
-function StatusBadge({ status }: { status: BatchVoiceRowStatus }) {
-  switch (status) {
-    case "uploading":
-    case "tts":
-    case "video":
-    case "muxing":
-      return (
-        <span className="inline-flex items-center gap-1.5 text-xs font-medium text-ink-600">
-          {SpinnerIcon}
-          {status === "uploading"
-            ? "Uploading"
-            : status === "tts"
-              ? "Voice"
-              : status === "video"
-                ? "Video"
-                : "Muxing"}
-        </span>
-      );
-    case "done":
-      return (
-        <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600">
-          {CheckIcon}
-          Done
-        </span>
-      );
-    case "error":
-      return <span className="text-xs font-medium text-red-600">Error</span>;
-    default:
-      return <span className="text-xs font-medium text-ink-500">—</span>;
-  }
-}
-
-// ========== Component ==========
-
-export default function BatchVoiceVideoTab({ projectId }: Props) {
-  const store = useBatchVoiceStore();
-  const genStore = useGenerationStore();
-  const { openFolder } = useProjectStore();
-
-  const logRef = useRef<HTMLDivElement | null>(null);
-  const stitchLogRef = useRef<HTMLDivElement | null>(null);
-  const [pickRowId, setPickRowId] = useState<string | null>(null);
-
-  // Restore persisted UI state (rows + settings) for the active project,
-  // re-loading whenever the project changes.
-  useEffect(() => {
-    store.hydrate(projectId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId]);
-
-  useEffect(() => {
-    if (logRef.current) {
-      logRef.current.scrollTop = logRef.current.scrollHeight;
-    }
-  }, [store.logs]);
-
-  useEffect(() => {
-    if (stitchLogRef.current) {
-      stitchLogRef.current.scrollTop = stitchLogRef.current.scrollHeight;
-    }
-  }, [store.stitchLogs]);
-
-  // Close the picker modal on Escape.
-  useEffect(() => {
-    if (!pickRowId) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setPickRowId(null);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [pickRowId]);
-
-  const openPicker = (rowId: string) => {
-    genStore.fetchProjectImages(projectId);
-    setPickRowId(rowId);
-  };
-
-  const handleImageSelect = async (
-    e: React.ChangeEvent<HTMLInputElement>,
-    rowId: string,
-  ) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = async () => {
-      const base64 = reader.result as string;
-      const path = await store.uploadRowImage(
-        rowId,
-        base64,
-        file.name,
-        projectId,
-      );
-      if (path) {
-        genStore.fetchProjectImages(projectId);
-      }
-    };
-    reader.readAsDataURL(file);
-    e.target.value = "";
-  };
-
-  const handleVoiceSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = async () => {
-      const base64 = reader.result as string;
-      await store.uploadVoiceRef(base64, file.name, projectId);
-    };
-    reader.readAsDataURL(file);
-    e.target.value = "";
-  };
-
-  const readyCount = store.rows.filter(
-    (r) =>
-      r.prompt.trim() &&
-      r.imagePath &&
-      (!r.script.trim() || store.voiceRefPath),
-  ).length;
-
-  const resultCount = store.rows.filter((r) => r.result).length;
-
-  return (
-    <div className="flex flex-col gap-7">
-      <div className="flex items-center gap-2">
-        {TableIcon}
-        <h2 className="text-base font-semibold text-ink-900">
-          Batch Videos with Voice Over
-        </h2>
-      </div>
-
-      {/* Voice settings */}
-      <div className="border border-ink-200 rounded-2xl p-5 flex flex-col gap-6">
-        <div className="flex items-center gap-2">
-          {MicIcon}
-          <span className="text-sm font-semibold text-ink-900">
-            Voice Reference
-          </span>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Voice reference upload */}
-          <div>
-            <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-              Reference Voice
-            </label>
-            <div className="flex flex-col items-start gap-2">
-              <label className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-ink-200 bg-white text-ink-600 text-xs font-medium cursor-pointer hover:border-ink-300 hover:bg-ink-100 transition-colors">
-                {UploadIcon}
-                {store.voiceRefFilename ? "Replace" : "Upload"}
-                <input
-                  type="file"
-                  accept="audio/*"
-                  onChange={handleVoiceSelect}
-                  disabled={store.running}
-                  className="hidden"
-                />
-              </label>
-              {store.voiceRefFilename && (
-                <span className="text-[11px] text-ink-600 truncate max-w-[240px]">
-                  {store.voiceRefFilename}
-                </span>
-              )}
-              {store.voiceRefUrl && (
-                <audio
-                  controls
-                  src={store.voiceRefUrl}
-                  className="w-full max-w-[320px] h-9"
-                />
-              )}
-              {!store.voiceRefPath && (
-                <p className="text-xs text-tiffany-600 italic">
-                  Upload a reference voice (.mp3/.wav) to clone for every row.
-                </p>
-              )}
-            </div>
-          </div>
-
-          {/* Voice quality */}
-          <div>
-            <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-              Voice Quality
-            </label>
-            <div className="flex flex-wrap gap-1.5">
-              {(
-                [
-                  { label: "High · Qwen3 1.7B", value: "high" },
-                  { label: "Low · Qwen3 0.6B", value: "low" },
-                ] as const
-              ).map((q) => (
-                <button
-                  key={q.value}
-                  onClick={() => store.setQuality(q.value)}
-                  disabled={store.running}
-                  className={`px-3 py-1 text-xs font-medium rounded-xl border transition-all ${
-                    store.quality === q.value
-                      ? "bg-ink-100 border-ink-300 text-ink-800"
-                      : "bg-white border-ink-200 text-ink-600 hover:border-ink-300"
-                  } disabled:opacity-50`}
-                >
-                  {q.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Shared video settings */}
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-        {/* Duration */}
-        <div>
-          <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-            Duration (seconds)
-          </label>
-          <div className="flex flex-wrap gap-1.5">
-            {[0.5, 3, 5, 7.5, 10, 15, 20].map((d) => (
-              <button
-                key={d}
-                onClick={() => store.setDuration(d)}
-                disabled={store.running}
-                className={`px-3 py-1 text-xs font-medium rounded-xl border transition-all ${
-                  store.duration === d
-                    ? "bg-ink-100 border-ink-300 text-ink-800"
-                    : "bg-white border-ink-200 text-ink-600 hover:border-ink-300"
-                } disabled:opacity-50`}
-              >
-                {d}s
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Aspect ratio */}
-        <div>
-          <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-            Aspect Ratio
-          </label>
-          <div className="flex flex-wrap gap-1.5">
-            {(["1:1", "16:9", "9:16", "4:3", "3:4"] as const).map((ratio) => (
-              <button
-                key={ratio}
-                onClick={() => store.setAspectRatio(ratio)}
-                disabled={store.running}
-                className={`px-3 py-1 text-xs font-medium rounded-xl border transition-all ${
-                  store.aspectRatio === ratio
-                    ? "bg-ink-100 border-ink-300 text-ink-800"
-                    : "bg-white border-ink-200 text-ink-600 hover:border-ink-300"
-                } disabled:opacity-50`}
-              >
-                {ratio}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Resolution */}
-        <div>
-          <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-            Resolution
-          </label>
-          <div className="flex flex-wrap gap-1.5">
-            {(["320p", "480p", "576p", "640p", "720p", "1080p"] as const).map(
-              (res: any) => (
-                <button
-                  key={res}
-                  onClick={() => store.setResolution(res)}
-                  disabled={store.running}
-                  className={`px-3 py-1 text-xs font-medium rounded-xl border transition-all ${
-                    store.resolution === res
-                      ? "bg-ink-100 border-ink-300 text-ink-800"
-                      : "bg-white border-ink-200 text-ink-600 hover:border-ink-300"
-                  } disabled:opacity-50`}
-                >
-                  {res}
-                </button>
-              ),
-            )}
-          </div>
-        </div>
-
-        {/* Video mode */}
-        <div>
-          <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-            Mode
-          </label>
-          <div className="flex flex-wrap gap-1.5">
-            {(
-              [
-                { label: "Low", value: "distilled" },
-                { label: "Standard", value: "one-stage" },
-                { label: "High", value: "two-stage" },
-              ] as const
-            ).map((q) => (
-              <button
-                key={q.value}
-                onClick={() => store.setMode(q.value)}
-                disabled={store.running}
-                className={`px-3 py-1 text-xs font-medium rounded-xl border transition-all ${
-                  store.mode === q.value
-                    ? "bg-ink-100 border-ink-300 text-ink-800"
-                    : "bg-white border-ink-200 text-ink-600 hover:border-ink-300"
-                } disabled:opacity-50`}
-              >
-                {q.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Table */}
-      <div>
-        <div className="flex items-center justify-between mb-2">
-          <label className="text-xs font-semibold text-ink-700 uppercase tracking-wider">
-            Batch Rows
-          </label>
-          <div className="flex items-center gap-1.5">
-            <button
-              onClick={store.clear}
-              disabled={store.running}
-              title="Clear all rows and settings"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-xl border transition-all bg-white border-ink-200 text-red-600 hover:border-red-200 hover:bg-red-50 disabled:opacity-50"
-            >
-              {CloseIcon}
-              Clear
-            </button>
-            <button
-              onClick={store.addRow}
-              disabled={store.running}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-xl border transition-all bg-white border-ink-200 text-ink-600 hover:border-ink-300 disabled:opacity-50"
-            >
-              {PlusIcon}
-              Add Row
-            </button>
-          </div>
-        </div>
-
-        <div className="border border-ink-200 rounded-2xl overflow-hidden">
-          <div className="overflow-auto max-h-[480px]">
-            <table className="w-full text-xs">
-              <thead>
-                <tr className="bg-ink-50 border-b border-ink-200">
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 w-10">
-                    #
-                  </th>
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 w-36">
-                    Starting Image
-                  </th>
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 min-w-[220px]">
-                    Video Prompt
-                  </th>
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 min-w-[220px]">
-                    Script (Voice · optional)
-                  </th>
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 w-28">
-                    Status
-                  </th>
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 w-40">
-                    Result
-                  </th>
-                  <th className="sticky top-0 bg-ink-50 px-3 py-2 text-left font-semibold text-ink-700 w-24">
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {store.rows.map((row, idx) => (
-                  <tr
-                    key={row.id}
-                    className="border-b border-ink-200 last:border-b-0 align-top transition-colors hover:bg-ink-100/40"
-                  >
-                    <td className="px-3 py-2 text-ink-600/60 font-medium tabular-nums">
-                      {idx + 1}
-                    </td>
-
-                    {/* Starting image */}
-                    <td className="px-3 py-2">
-                      <div className="flex flex-col items-start gap-1.5">
-                        <div className="flex items-center gap-1">
-                          <label className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl border border-ink-200 bg-white text-ink-600 text-[11px] font-medium cursor-pointer hover:border-ink-300 hover:bg-ink-100 transition-colors">
-                            {UploadIcon}
-                            {row.imageFilename ? "Replace" : "Upload"}
-                            <input
-                              type="file"
-                              accept="image/*"
-                              onChange={(e) => handleImageSelect(e, row.id)}
-                              disabled={store.running}
-                              className="hidden"
-                            />
-                          </label>
-                          <button
-                            onClick={() => openPicker(row.id)}
-                            disabled={store.running}
-                            title="Pick from project images"
-                            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl border border-ink-200 bg-white text-ink-600 text-[11px] font-medium hover:border-ink-300 hover:bg-ink-100 transition-colors disabled:opacity-50"
-                          >
-                            {ImageIcon}
-                            Pick
-                          </button>
-                        </div>
-                        {row.imageUrl ? (
-                          <img
-                            src={row.imageUrl}
-                            alt={row.imageFilename || "Starting image"}
-                            className="w-20 h-20 object-cover rounded-xl border border-ink-200"
-                          />
-                        ) : (
-                          <span className="text-[10px] text-ink-500 italic">
-                            No image
-                          </span>
-                        )}
-                        {row.imageFilename && (
-                          <span className="text-[10px] text-ink-600 truncate max-w-[120px]">
-                            {row.imageFilename}
-                          </span>
-                        )}
-                      </div>
-                    </td>
-
-                    {/* Video prompt */}
-                    <td className="px-3 py-2">
-                      <textarea
-                        value={row.prompt}
-                        onChange={(e) =>
-                          store.updatePrompt(row.id, e.target.value)
-                        }
-                        placeholder="Describe the video scene..."
-                        rows={3}
-                        disabled={store.running}
-                        className="w-full px-2.5 py-1.5 bg-transparent border border-ink-200 rounded-xl text-ink-800 text-xs placeholder-ink-500/40 focus:outline-none focus:border-tiffany-500 focus:ring-1 focus:ring-tiffany-500/30 transition-all resize-none disabled:opacity-50"
-                      />
-                    </td>
-
-                    {/* Script (voice) */}
-                    <td className="px-3 py-2">
-                      <textarea
-                        value={row.script}
-                        onChange={(e) =>
-                          store.updateScript(row.id, e.target.value)
-                        }
-                        placeholder="Optional — text spoken in the cloned voice (leave empty for a silent video)..."
-                        rows={3}
-                        disabled={store.running}
-                        className="w-full px-2.5 py-1.5 bg-transparent border border-ink-200 rounded-xl text-ink-800 text-xs placeholder-ink-500/40 focus:outline-none focus:border-tiffany-500 focus:ring-1 focus:ring-tiffany-500/30 transition-all resize-none disabled:opacity-50"
-                      />
-                    </td>
-
-                    {/* Status */}
-                    <td className="px-3 py-2">
-                      <StatusBadge status={row.status} />
-                      {row.status === "error" && row.error && (
-                        <p className="text-[10px] text-red-600 mt-1 break-words max-w-[120px]">
-                          {row.error}
-                        </p>
-                      )}
-                    </td>
-
-                    {/* Result */}
-                    <td className="px-3 py-2">
-                      {row.result ? (
-                        <video
-                          src={row.result}
-                          controls
-                          className="w-full max-w-[160px] h-auto rounded-xl bg-black"
-                        />
-                      ) : (
-                        <span className="text-[10px] text-ink-500 italic">
-                          —
-                        </span>
-                      )}
-                    </td>
-
-                    {/* Actions */}
-                    <td className="px-3 py-2">
-                      <div className="flex items-center gap-1">
-                        <button
-                          onClick={() => store.generateRow(projectId, row.id)}
-                          disabled={
-                            store.running ||
-                            !row.prompt.trim() ||
-                            !row.imagePath ||
-                            (!!row.script.trim() && !store.voiceRefPath)
-                          }
-                          title="Generate this row"
-                          className="flex items-center justify-center w-7 h-7 rounded-xl border border-ink-200 text-ink-600 hover:bg-ink-200 hover:border-ink-300 transition-colors disabled:opacity-40"
-                        >
-                          {SparkleIcon}
-                        </button>
-                        <button
-                          onClick={() => store.removeRow(row.id)}
-                          disabled={store.running}
-                          title="Remove row"
-                          className="flex items-center justify-center w-7 h-7 rounded-xl border border-ink-200 text-ink-600 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition-colors disabled:opacity-40"
-                        >
-                          {CloseIcon}
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        {store.rows.length === 0 && (
-          <p className="text-xs text-ink-500 italic py-6 text-center border border-dashed border-ink-200 rounded-2xl mt-2">
-            No rows yet. Click "Add Row" to get started.
-          </p>
-        )}
-      </div>
-
-      {/* Open output folder */}
-      <button
-        onClick={() => openFolder(projectId, "output")}
-        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"
-      >
-        {FolderIcon}
-        Open Output Folder
-      </button>
-
-      {/* Progress */}
-      {store.progress && (
-        <div className="flex items-center gap-3 p-4 bg-ink-50 border border-ink-200 rounded-2xl">
-          <span className="text-xs font-medium text-ink-700">
-            Batch Progress
-          </span>
-          <div className="flex-1 h-2 bg-ink-200 rounded-full overflow-hidden">
-            <div
-              className="h-full bg-tiffany-500 rounded-full transition-all duration-300"
-              style={{
-                width: `${(store.progress.current / store.progress.total) * 100}%`,
-              }}
-            />
-          </div>
-          <span className="text-xs font-semibold text-ink-700 tabular-nums">
-            {store.progress.current}/{store.progress.total}
-          </span>
-        </div>
-      )}
-
-      {/* Logs */}
-      {store.logs.length > 0 && (
-        <div
-          ref={logRef}
-          className="p-5 bg-ink-50 border border-ink-200 rounded-2xl max-h-40 overflow-y-auto"
-        >
-          <p className="text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-            Progress Logs
-          </p>
-          <pre className="text-xs text-ink-600 font-mono whitespace-pre-wrap">
-            {store.logs.join("\n")}
-          </pre>
-        </div>
-      )}
-
-      {/* Generate all / cancel */}
-      {store.running ? (
-        <button
-          onClick={store.cancel}
-          className="flex items-center justify-center gap-2 w-full px-4 py-3 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-semibold rounded-2xl border border-red-200 transition-colors"
-        >
-          Cancel Batch
-        </button>
-      ) : (
-        <button
-          onClick={() => store.generateAll(projectId)}
-          disabled={readyCount === 0}
-          className="flex items-center justify-center gap-2 w-full px-4 py-3 bg-tiffany-500 hover:bg-tiffany-600 active:bg-tiffany-700 disabled:bg-ink-200 disabled:text-ink-500 text-ink-950 text-sm font-semibold rounded-2xl transition-all duration-150 shadow-sm hover:shadow-md disabled:shadow-none"
-        >
-          {SparkleIcon}
-          Generate All ({readyCount} videos)
-        </button>
-      )}
-
-      {readyCount === 0 && !store.running && (
-        <p className="text-xs text-tiffany-600 -mt-2">
-          Each row needs a starting image and a video prompt. The script is
-          optional — leave it empty for a silent video. Rows with a script also
-          need the shared reference voice.
-        </p>
-      )}
-
-      {/* ===== Stitch Videos ===== */}
-      <div className="pt-3 border-t border-ink-200">
-        <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-          Stitch Videos
-        </label>
-
-        {store.stitching ? (
-          <div className="flex items-center gap-2 w-full px-4 py-3 bg-ink-50 border border-ink-200 rounded-2xl">
-            {SpinnerIcon}
-            <span className="text-sm font-medium text-ink-700">
-              Stitching...
-            </span>
-          </div>
-        ) : (
-          <button
-            onClick={() => store.stitchVideos()}
-            disabled={resultCount < 2}
-            className="flex items-center justify-center gap-2 w-full px-4 py-3 bg-tiffany-500 hover:bg-tiffany-600 active:bg-tiffany-700 disabled:bg-ink-200 disabled:text-ink-500 text-ink-950 text-sm font-semibold rounded-2xl transition-all duration-150 shadow-sm"
-          >
-            {FilmIcon}
-            Stitch All Videos ({resultCount})
-          </button>
-        )}
-
-        {store.stitchError && (
-          <div className="mt-2 p-5 bg-red-50 border border-red-200 rounded-2xl text-red-600 text-sm">
-            {store.stitchError}
-          </div>
-        )}
-
-        {store.stitchLogs.length > 0 && (
-          <div
-            ref={stitchLogRef}
-            className="mt-2 p-5 bg-ink-50 border border-ink-200 rounded-2xl max-h-40 overflow-y-auto"
-          >
-            <p className="text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-              Stitch Logs
-            </p>
-            <pre className="text-xs text-ink-600 font-mono whitespace-pre-wrap">
-              {store.stitchLogs.join("\n")}
-            </pre>
-          </div>
-        )}
-
-        {store.stitchResult && (
-          <div className="mt-3">
-            <label className="block text-xs font-semibold text-ink-700 uppercase tracking-wider mb-2">
-              Stitched Video
-            </label>
-            <div className="relative rounded-2xl overflow-hidden border border-ink-200 shadow-card bg-black w-full max-w-[500px]">
-              <video
-                src={store.stitchResult}
-                controls
-                className="w-full h-auto"
-              />
-            </div>
-            <a
-              href={store.stitchResult}
-              download="stitched.mp4"
-              className="inline-flex items-center gap-1.5 mt-2 text-xs font-medium text-ink-600 hover:text-ink-900 transition-colors"
-            >
-              {UploadIcon}
-              Download stitched.mp4
-            </a>
-          </div>
-        )}
-      </div>
-
-      {/* ===== Project Images Picker Modal ===== */}
-      {pickRowId && (
-        <div
-          className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-8"
-          onClick={() => setPickRowId(null)}
-        >
-          <div
-            className="w-full max-w-3xl max-h-[80vh] flex flex-col bg-white rounded-3xl border border-ink-200 shadow-2xl overflow-hidden"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between px-5 py-3 border-b border-ink-200">
-              <span className="text-sm font-semibold text-ink-900">
-                Pick Starting Image
-              </span>
-              <button
-                onClick={() => setPickRowId(null)}
-                className="flex items-center justify-center w-7 h-7 rounded-xl text-ink-600 hover:bg-ink-200 transition-colors"
-                title="Close (Esc)"
-              >
-                {CloseIcon}
-              </button>
-            </div>
-
-            <div className="p-6 overflow-y-auto">
-              {genStore.projectImagesLoading ? (
-                <p className="text-xs text-ink-500 italic py-8 text-center">
-                  Loading images...
-                </p>
-              ) : genStore.projectImages.length === 0 ? (
-                <p className="text-xs text-ink-500 italic py-8 text-center border border-dashed border-ink-200 rounded-2xl">
-                  No images yet. Upload one first.
-                </p>
-              ) : (
-                <div className="grid grid-cols-3 lg:grid-cols-5 gap-2">
-                  {genStore.projectImages.map((img) => (
-                    <button
-                      key={`${img.source}-${img.filename}`}
-                      onClick={() => {
-                        store.setRowImage(pickRowId, img);
-                        setPickRowId(null);
-                      }}
-                      className="relative rounded-xl border-2 border-ink-200 hover:border-ink-300 transition-all overflow-hidden"
-                    >
-                      <img
-                        src={img.url}
-                        alt={img.filename}
-                        className="aspect-square object-cover object-center w-full"
-                      />
-                      <span className="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur-sm px-1.5 py-0.5 text-[10px] text-ink-700 truncate text-center">
-                        {img.filename}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}