@hugpy/video-intelligence-ui 0.1.0 → 0.3.0

package/src/stations/studio/IdentityCreatePanel.tsx

@@ -0,0 +1,390 @@
+// k94 — the Identities tab's ONE explicit path (the clownworld MO).
+//
+//   Create an identity
+//   name: [__________]
+//   [+ video]  [+ images]        ← inline expansion (upload · library pick) in the same row
+//   ( Create identity )          ← ONE button; disabled until name + a source exist
+//   progress: stage · % · log tail
+//   > advanced                   ← everything else, collapsed, default-hidden
+//
+// Input: a video (or a few photos) of a character. Output: an identity profile with
+// reference views + a 3D GLB, ready to bind from "+ identity". No knobs on the happy
+// path — the pipeline answers every question it can answer itself (front view, mesh
+// params, turntable, canonical promotion).
+//
+//   + video  → POST /video/identity-profiles/from-video  {source, name}
+//              ONE chained char360 + Hunyuan3D job on the render service; on done ONE
+//              profile per detected character (slug, slug-2, …).
+//   + images → POST /video/identity-profiles/from-images {sources, name}
+//              create profile + the full 3D build, chained server-side.
+// Both hand back a job id watched by useIdentityCreateJob (GET /video/jobs/<id>).
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { mediaBytesUrl } from "../../config";
+import type { LibraryItem } from "../../video/mediaLibrary";
+import type { MediaRef } from "../../video/contract";
+import type { IdentityProfilesState } from "./useIdentityProfiles";
+import { LibraryImageGrid } from "./studioShared";
+import { uploadAndIngestImage, uploadAndIngestVideo } from "./identityUpload";
+import { useIdentityCreateJob, describeCreateJob } from "./useIdentityCreateJob";
+import type { CreatedIdentity } from "./useIdentityCreateJob";
+
+// Mirrors the catalogue's MAX_SOURCE_IMAGES (identity_profiles.py).
+const MAX_SOURCE_IMAGES = 12;
+
+type SourceMode = "video" | "images";
+
+/** The ONE-LINE explanation the tab keeps (k94 removed the option-explaining prose). */
+export const ONE_LINE =
+  "A video or a few photos in — a bindable character with reference views and a 3D model out.";
+
+/**
+ * The `> advanced` expander — the PromptCardSettings idiom (a native <details>,
+ * the open flag lives in the DOM, never in state) with an `open` default so the
+ * sidebar "settings" tab can lead with it expanded. Same CSS hooks as
+ * PromptCardSettings (vi-prompt-card-settings*), so it renders identically.
+ */
+export function AdvancedExpander({
+  label = "advanced",
+  open = false,
+  children,
+}: {
+  label?: string;
+  open?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <details className="vi-prompt-card-settings" open={open}>
+      <summary className="vi-prompt-card-settings-summary">{label}</summary>
+      <div className="vi-prompt-card-settings-body">{children}</div>
+    </details>
+  );
+}
+
+function fileName(ref: MediaRef): string {
+  return ref.uri.split("/").pop() || ref.asset_id;
+}
+
+/** A small library-VIDEO list — the video sibling of LibraryImageGrid (which
+ *  renders <img> thumbnails, wrong for a clip). Each row is a plain <button>. */
+function LibraryVideoList({
+  videos,
+  onPick,
+}: {
+  videos: LibraryItem[];
+  onPick: (ref: MediaRef) => void;
+}) {
+  if (videos.length === 0) {
+    return (
+      <p className="vi-comfy-hint" style={{ margin: "0.4rem 0 0" }}>
+        No clips in the session library yet — upload a video, or produce one in Scene/Movie.
+      </p>
+    );
+  }
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.35rem", marginTop: "0.4rem", maxHeight: "9rem", overflowY: "auto" }}>
+      {videos.map((it) => (
+        <button
+          key={it.ref.uri}
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-ghost"
+          onClick={() => onPick(it.ref)}
+          title={it.ref.uri}
+          style={{ maxWidth: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+        >
+          ▶ {it.label ?? fileName(it.ref)}
+          {it.ref.duration_s ? ` · ${it.ref.duration_s.toFixed(1)}s` : ""}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function IdentityCreatePanel({
+  createFromVideo,
+  createFromImages,
+  library,
+  reload,
+  onCreated,
+  advanced,
+  advancedOpen = false,
+}: {
+  createFromVideo: IdentityProfilesState["createFromVideo"];
+  createFromImages: IdentityProfilesState["createFromImages"];
+  library: LibraryItem[];
+  reload: () => void;
+  /** Fires when the job lands — `slugs` are the profiles now bindable. */
+  onCreated: (slugs: string[]) => void;
+  /** The `> advanced` body (legacy create panel, char360 knobs, …). */
+  advanced?: ReactNode;
+  advancedOpen?: boolean;
+}) {
+  const [name, setName] = useState("");
+  const [mode, setMode] = useState<SourceMode | null>(null);
+  const [video, setVideo] = useState<MediaRef | null>(null);
+  const [images, setImages] = useState<MediaRef[]>([]);
+  const [showLib, setShowLib] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [pickError, setPickError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const job = useIdentityCreateJob();
+  const jobSlug = useRef<string | null>(null);
+
+  const libraryVideos = library.filter((it) => it.ref.kind === "video");
+  const libraryImages = library.filter((it) => it.ref.kind === "image");
+
+  // A reload after the job lands so the new profile(s) + mesh show; done once.
+  useEffect(() => {
+    if (job.view.phase === "done" || job.view.phase === "error") {
+      setBusy(false);
+      reload();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [job.view.phase]);
+
+  const toggleMode = (m: SourceMode) => {
+    setPickError(null);
+    setShowLib(false);
+    setMode((cur) => (cur === m ? null : m));
+  };
+
+  const addImage = useCallback((ref: MediaRef) => {
+    setImages((prev) =>
+      prev.length >= MAX_SOURCE_IMAGES || prev.some((r) => r.uri === ref.uri) ? prev : [...prev, ref],
+    );
+  }, []);
+
+  async function onPickVideoFile(file: File) {
+    setPickError(null);
+    setUploading(true);
+    const { ref, error } = await uploadAndIngestVideo(file);
+    setUploading(false);
+    if (error) setPickError(error);
+    else if (ref) setVideo(ref);
+  }
+
+  async function onPickImageFiles(files: FileList) {
+    setPickError(null);
+    setUploading(true);
+    const list = Array.from(files as ArrayLike<File>).slice(0, Math.max(0, MAX_SOURCE_IMAGES - images.length));
+    const results = await Promise.all(list.map((f) => uploadAndIngestImage(f)));
+    setUploading(false);
+    for (const r of results) {
+      if (r.ref) addImage(r.ref);
+      else if (r.error) setPickError(r.error);
+    }
+  }
+
+  const hasSource = mode === "video" ? video != null : mode === "images" ? images.length > 0 : false;
+  const canCreate = name.trim().length > 0 && hasSource && !busy && !uploading;
+
+  async function create() {
+    if (!canCreate || !mode) return;
+    const trimmed = name.trim();
+    setBusy(true);
+    job.reset();
+    const res =
+      mode === "video" && video
+        ? await createFromVideo(video, trimmed)
+        : await createFromImages(images, trimmed);
+    if (!res.ok || !res.jobId) {
+      setBusy(false);
+      job.fail(
+        res.duplicate
+          ? `An identity named "${trimmed}" already exists — choose another name.`
+          : res.message || "Could not start the identity build.",
+      );
+      return;
+    }
+    jobSlug.current = res.slug ?? null;
+    // The from-images profile exists already — make it selectable right away.
+    if (mode === "images" && res.slug) onCreated([res.slug]);
+    job.watch(res.jobId, (ids: CreatedIdentity[]) => {
+      const slugs = ids.map((i) => i.slug);
+      if (slugs.length === 0 && jobSlug.current) slugs.push(jobSlug.current);
+      onCreated(slugs);
+      // Clear the form for the next character; the progress line stays ("done").
+      setName("");
+      setVideo(null);
+      setImages([]);
+      setMode(null);
+    });
+  }
+
+  const progress = describeCreateJob(job.view);
+  const createdCount = job.view.identities.length;
+
+  return (
+    <section className="vi-comfy-bar vi-id-create" aria-label="Create an identity"
+      style={{ display: "flex", flexDirection: "column", gap: "0.5rem", alignItems: "stretch" }}>
+      <div>
+        <span className="vi-comfy-label" style={{ fontSize: "0.95rem" }}>Create an identity</span>
+        <p className="vi-comfy-hint" style={{ margin: "0.15rem 0 0", opacity: 0.8 }}>{ONE_LINE}</p>
+      </div>
+
+      {/* name + [+ video] [+ images] — one row */}
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }}>
+        <label className="vi-comfy-field" style={{ flex: "1 1 14rem", maxWidth: "22rem" }}>
+          <span className="vi-comfy-label">name</span>
+          <input
+            type="text"
+            className="vi-knob-input"
+            value={name}
+            placeholder="e.g. Mira"
+            disabled={busy}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </label>
+        <button
+          type="button"
+          className={`vi-btn vi-btn-sm ${mode === "video" ? "vi-btn-accent" : "vi-btn-ghost"}`}
+          aria-expanded={mode === "video"}
+          disabled={busy}
+          onClick={() => toggleMode("video")}
+          title="A video of the character — every person in it becomes an identity"
+        >
+          + video{video && mode !== "video" ? " ✓" : ""}
+        </button>
+        <button
+          type="button"
+          className={`vi-btn vi-btn-sm ${mode === "images" ? "vi-btn-accent" : "vi-btn-ghost"}`}
+          aria-expanded={mode === "images"}
+          disabled={busy}
+          onClick={() => toggleMode("images")}
+          title="A few photos of the character (up to 12)"
+        >
+          + images{images.length && mode !== "images" ? ` (${images.length})` : ""}
+        </button>
+      </div>
+
+      {/* inline expansion — the SAME row, under the buttons (k93 idiom) */}
+      {mode === "video" && (
+        <div style={{ border: "1px solid var(--vi-border)", borderRadius: "0.4rem", padding: "0.5rem" }}>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }}>
+            <label className="vi-btn vi-btn-sm vi-btn-accent vi-file-label">
+              {uploading ? "Uploading…" : video ? "Change video" : "Upload a video"}
+              <input
+                type="file"
+                accept="video/*"
+                className="vi-file-input"
+                disabled={busy || uploading}
+                onChange={(e) => {
+                  const file = e.target.files && e.target.files[0];
+                  if (file) void onPickVideoFile(file);
+                  e.target.value = "";
+                }}
+              />
+            </label>
+            <button
+              type="button"
+              className="vi-btn vi-btn-sm vi-btn-ghost"
+              disabled={busy}
+              aria-expanded={showLib}
+              onClick={() => setShowLib((v) => !v)}
+            >
+              {showLib ? "Hide library" : `Pick from library (${libraryVideos.length})`}
+            </button>
+            {video && (
+              <span className="vi-comfy-hint" style={{ opacity: 0.9, display: "inline-flex", alignItems: "center", gap: "0.3rem" }}>
+                ▶ {fileName(video)}
+                {video.duration_s ? ` · ${video.duration_s.toFixed(1)}s` : ""}
+                <button type="button" className="vi-btn vi-btn-sm vi-btn-ghost" disabled={busy}
+                  onClick={() => setVideo(null)} title="Remove this video" style={{ padding: "0 0.3rem" }}>✕</button>
+              </span>
+            )}
+          </div>
+          {showLib && <LibraryVideoList videos={libraryVideos} onPick={(ref) => { setVideo(ref); setShowLib(false); }} />}
+        </div>
+      )}
+
+      {mode === "images" && (
+        <div style={{ border: "1px solid var(--vi-border)", borderRadius: "0.4rem", padding: "0.5rem" }}>
+          {images.length > 0 && (
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginBottom: "0.4rem" }}>
+              {images.map((ref, idx) => (
+                <div key={`${ref.uri}_${idx}`} style={{ position: "relative" }}>
+                  <img src={mediaBytesUrl(ref.uri)} alt={`photo ${idx + 1}`}
+                    style={{ width: "3.6rem", height: "3.6rem", objectFit: "cover", borderRadius: "0.35rem", background: "#000", border: "1px solid var(--vi-border)" }} />
+                  <button type="button" className="vi-btn vi-btn-sm vi-btn-ghost" disabled={busy}
+                    onClick={() => setImages((prev) => prev.filter((_, i) => i !== idx))}
+                    title="Remove this photo"
+                    style={{ position: "absolute", top: -6, right: -6, padding: "0 0.3rem", fontSize: "0.7rem", lineHeight: 1.4, background: "var(--vi-border)", borderRadius: "0.3rem" }}>
+                    ✕
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }}>
+            <label className="vi-btn vi-btn-sm vi-btn-accent vi-file-label">
+              {uploading ? "Uploading…" : images.length ? "Add photos" : "Upload photos"}
+              <input
+                type="file"
+                accept="image/*"
+                multiple
+                className="vi-file-input"
+                disabled={busy || uploading || images.length >= MAX_SOURCE_IMAGES}
+                onChange={(e) => {
+                  if (e.target.files && e.target.files.length > 0) void onPickImageFiles(e.target.files);
+                  e.target.value = "";
+                }}
+              />
+            </label>
+            <button
+              type="button"
+              className="vi-btn vi-btn-sm vi-btn-ghost"
+              disabled={busy || images.length >= MAX_SOURCE_IMAGES}
+              aria-expanded={showLib}
+              onClick={() => setShowLib((v) => !v)}
+            >
+              {showLib ? "Hide library" : `Pick from library (${libraryImages.length})`}
+            </button>
+            <span className="vi-comfy-hint" style={{ opacity: 0.7 }}>{images.length}/{MAX_SOURCE_IMAGES}</span>
+          </div>
+          {showLib && images.length < MAX_SOURCE_IMAGES && (
+            <LibraryImageGrid images={libraryImages} onPick={addImage} />
+          )}
+        </div>
+      )}
+
+      {pickError && (
+        <p className="vi-error" role="alert" style={{ margin: 0 }}>{pickError}</p>
+      )}
+
+      {/* ONE button + the progress line */}
+      <div className="vi-comfy-bar-actions vi-run-bar" style={{ flexWrap: "wrap", alignItems: "center" }}>
+        <button
+          type="button"
+          className="vi-btn vi-btn-accent"
+          disabled={!canCreate}
+          onClick={() => void create()}
+          title={
+            !name.trim()
+              ? "Give the identity a name"
+              : !hasSource
+                ? "Add a video or a few photos"
+                : "Build the identity: reference views + 3D model"
+          }
+        >
+          {busy ? "Creating…" : "Create identity"}
+        </button>
+        {progress && (
+          <span
+            className={job.view.phase === "error" ? "vi-error" : "vi-comfy-hint"}
+            role="status"
+            style={{ opacity: 0.9, fontVariantNumeric: "tabular-nums", overflow: "hidden", textOverflow: "ellipsis" }}
+            title={job.view.logLine ?? undefined}
+          >
+            {job.view.phase === "done" && createdCount > 0
+              ? `done · ${createdCount} identit${createdCount === 1 ? "y" : "ies"}: ${job.view.identities
+                  .map((i) => `${i.slug}${i.glb ? " ✓" : i.error ? " (views only)" : ""}`)
+                  .join(", ")}`
+              : progress}
+          </span>
+        )}
+      </div>
+
+      {advanced && <AdvancedExpander open={advancedOpen}>{advanced}</AdvancedExpander>}
+    </section>
+  );
+}

package/src/stations/studio/StudioGenerateTab.tsx

@@ -49,6 +49,8 @@ import { createPortal } from "react-dom";
 import { request, okValue, errorOf, describeAppError } from "../../transport/client";
 import { hugpyConfig, mediaBytesUrl } from "../../config";
 import { addToLibrary, useMediaLibrary } from "../../video/mediaLibrary";
+import { UnnamedWarnPanel, WarnUnnamedToggle, useWarnUnnamedPref, deriveNameFrom } from "../../video/UnnamedWarn";
+import { LengthRow } from "../../video/LengthRow";
 import { enqueueResultSchema, mediaRefSchema, uploadResultSchema } from "../../video/contract";
 import type { MediaRef } from "../../video/contract";
 import { DropReceptacle } from "../../video/DropReceptacle";
@@ -85,7 +87,7 @@ import { IdentityProfileControls, type SelectedProfile } from "./IdentityProfile
 // The SHARED prompt-card system (k88/k89): the Clip surface's single prompt card
 // rides the same shell + [Prompt][Negative] tabs the Scene/Movie/Cinema lists use,
 // plus the standard-negative composition helper and the sidebar About expander.
-import { AboutExpander, PromptCard, PromptFieldTabs, composeNegative } from "./promptCard";
+import { AboutExpander, PromptCard, PromptCardSettings, PromptFieldTabs, composeNegative } from "./promptCard";
 // ── COMPATIBILITY AWARENESS (operator ruling 2026-07-29) ───────────────────────────
 // The fleet's MEASURED render table (GET /video/render/presets) + the pure derivations
 // over it. Everything this surface offers — capabilities, model pins, geometry, the
@@ -304,7 +306,7 @@ export function StudioGenerateSurface({
   // k89: the card's [standard negative] tick — default OFF to preserve the Clip
   // surface's blank-negative default; when on, the standard artifact/junk set is
   // COMPOSED into the payload at submit (composeNegative — the wire is unchanged).
-  const [stdNegative, setStdNegative] = useSessionState("studio.clip.stdNegative", false);
+  const [stdNegative, setStdNegative] = useSessionState("studio.clip.stdNegative", true);
   // k89: the bottom "[▸ Tester]" collapsible that now hosts the cross-model sweep
   // (the run row's ghost 🧪 button is retired).
   const [clipTesterOpen, setClipTesterOpen] = useState(false);
@@ -317,6 +319,20 @@ export function StudioGenerateSurface({
   // `project` (auto-archive NAME); blank = auto-named (the default). The list of
   // existing names backs the Settings datalist; free-typing a new one creates it.
   const [project, setProject] = useSessionState("studio.clip.project", "");
+  // EXPLICIT CLIP LENGTH (operator 2026-08-13: "the length of the video
+  // generations has been ambiguous") — requested_frames, blank = the bound
+  // model's default (81 for real models). The spine clamps to the model
+  // ceiling and snaps to the 4k+1 temporal cadence.
+  const [requestedFrames, setRequestedFrames] = useSessionState("studio.clip.frames", "");
+  // UNNAMED WARNING (operator 2026-08-13): explicit per-section option,
+  // default OFF, localStorage-remembered. The clip's NAME is its `project`
+  // (the auto-archive name every generate route accepts).
+  const [warnUnnamed, setWarnUnnamed] = useWarnUnnamedPref("clip");
+  const [nameWarn, setNameWarn] = useState(false);
+  const [pendingRun, setPendingRun] = useState(false);
+  // Auto-derived project names may be replaced by the next ✨ Generate; a
+  // human-typed project is never overwritten.
+  const autoProjectRef = useRef("");
 
   // i2v start image (cap 1) — the `start_image` field.
   const [startImages, setStartImages] = useSessionState<MediaRef[]>(
@@ -1111,7 +1127,20 @@ export function StudioGenerateSurface({
   const wouldBindSynthetic =
     (isT2V || isI2V) && bindsSyntheticTier(vramBudget, realFloorGb);
 
-  const onGenerate = useCallback(async () => {
+  // Post-commit re-run after the warn panel names the clip: state has settled,
+  // this effect's closure is fresh, so the submit sees the new project name.
+  useEffect(() => {
+    if (!pendingRun) return;
+    setPendingRun(false);
+    void onGenerate(true);
+  });
+
+  const onGenerate = useCallback(async (skipNameCheck = false) => {
+    if (!skipNameCheck && warnUnnamed && project.trim() === "") {
+      setNameWarn(true);
+      return;
+    }
+    setNameWarn(false);
     if (blockSubmit) {
       setGenMsg(
         v2vBadGeom
@@ -1125,6 +1154,11 @@ export function StudioGenerateSurface({
       setGenMsg("VRAM budget must be a positive number (or blank for the route default).");
       return;
     }
+    const framesNum = requestedFrames.trim() === "" ? undefined : Number(requestedFrames);
+    if (framesNum !== undefined && (!Number.isInteger(framesNum) || framesNum < 1)) {
+      setGenMsg("Length must be a whole number of frames \u2265 1 (or blank for the model default).");
+      return;
+    }
     const stepsNum = steps.trim() === "" ? undefined : Number(steps);
     if (
       stepsNum !== undefined &&
@@ -1152,6 +1186,7 @@ export function StudioGenerateSurface({
         vram_budget_gb: budgetNum,
         steps: stepsNum,
         cfg: cfgNum,
+        requested_frames: requestedFrames.trim() !== "" ? Number(requestedFrames) : undefined,
         model_id: modelId.trim() ? modelId.trim() : undefined,
         // Optional auto-archive NAME (choose-or-type). Blank = auto-named (default).
         project: project.trim() ? project.trim() : undefined,
@@ -1250,8 +1285,7 @@ export function StudioGenerateSurface({
     pendingSubjectStage,
     onEnqueued,
     project,
-    refreshProjects,
-  ]);
+    refreshProjects,, warnUnnamed, project]);
 
   const synthPresets = presets.filter((p) => isSyntheticPreset(p));
   const realPresets = presets.filter((p) => !isSyntheticPreset(p));
@@ -2431,7 +2465,32 @@ export function StudioGenerateSurface({
               error={assist.assistError}
               onDismissError={assist.dismissError}
               onEnhance={() => void assist.runAssist("detail", prompt, setPrompt)}
-              onGenerate={() => void assist.runAssist("generate", prompt, setPrompt)}
+              onGenerate={() =>
+                void (async () => {
+                  let fresh = "";
+                  await assist.runAssist("generate", prompt, (p) => {
+                    fresh = p;
+                    setPrompt(p);
+                  });
+                  if (!fresh.trim()) return;
+                  // NEGATIVE RIDES ALONG (operator 2026-08-13): generated
+                  // exclusions APPEND to any typed negative; std tick untouched.
+                  await assist.runNegative({ subject: fresh }, (neg) => {
+                    const cur = negative.trim().replace(/,\s*$/, "");
+                    setNegative(cur ? `${cur}, ${neg}` : neg);
+                  });
+                  // NAME RIDES ALONG: derive the project name from the fresh
+                  // prompt when blank or itself auto-derived.
+                  const t = project.trim();
+                  if (t === "" || t === autoProjectRef.current) {
+                    const derived = deriveNameFrom(fresh);
+                    if (derived) {
+                      autoProjectRef.current = derived;
+                      setProject(derived);
+                    }
+                  }
+                })()
+              }
               canEnhance={prompt.trim() !== ""}
               models={assist.assistModels}
               model={assist.assistModel}
@@ -2488,6 +2547,92 @@ export function StudioGenerateSurface({
                 ))}
               </div>
             )}
+
+            {/* SETTINGS EXPANDER (operator ask 2026-08-13): the clip prompt
+                component hosts the FULL knob set, same as Scene/Movie/Cinema
+                prompt components. Clip is a SINGLE-prompt surface, so these
+                bind the SAME state as the left-column Settings tab — change a
+                knob in either place and both update; comprehensive by
+                construction (model pin included). The TEMPLATE chooser stays
+                on the Settings tab only: it morphs the form shape (required
+                inputs), it is not a render knob. */}
+            <PromptCardSettings label="settings — model · size · steps · cfg · seed · budget">
+              <div className="vi-knob vi-studio-knob-wide" style={{ minWidth: "16rem" }}>
+                <label htmlFor="vi-clipcard-model">model pin</label>
+                <select
+                  id="vi-clipcard-model"
+                  className="vi-knob-select"
+                  value={modelId}
+                  onChange={(e) => setModelId(e.target.value)}
+                >
+                  <option value="">Auto — router picks by budget + resolution</option>
+                  {capModels.length > 0 && (
+                    <optgroup label={`Ratified for ${CAP_LABELS[capability]}`}>
+                      {capModels.map((id) => (
+                        <option key={id} value={id}>
+                          {id}
+                        </option>
+                      ))}
+                    </optgroup>
+                  )}
+                  {(showAllModels || !renderLoaded || modelOffMenu) && (
+                    <optgroup label={renderLoaded ? "Other studio models — unverified for this capability" : "Studio models"}>
+                      {STUDIO_MODEL_IDS.filter((id) => !capModels.includes(id)).map((id) => (
+                        <option key={id} value={id}>
+                          {id}
+                          {renderLoaded ? " · unverified" : ""}
+                        </option>
+                      ))}
+                    </optgroup>
+                  )}
+                </select>
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "7rem" }}>
+                <label htmlFor="vi-clipcard-width">width</label>
+                <input id="vi-clipcard-width" className="vi-knob-input" type="number" min={64} step={8}
+                       value={width} onChange={(e) => setWidth(Number(e.target.value) || 0)} />
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "7rem" }}>
+                <label htmlFor="vi-clipcard-height">height</label>
+                <input id="vi-clipcard-height" className="vi-knob-input" type="number" min={64} step={8}
+                       value={height} onChange={(e) => setHeight(Number(e.target.value) || 0)} />
+              </div>
+              {/* LENGTH ROW (operator 2026-08-13): fps | frames | seconds — any two
+                  set the third; the dimmed one is derived, last-touched wins. */}
+              <LengthRow
+                idPrefix="vi-clipcard-len"
+                fps={fps}
+                onFps={(n) => setFps(n)}
+                frames={requestedFrames}
+                onFrames={setRequestedFrames}
+              />
+              <div className="vi-knob" style={{ maxWidth: "7rem" }}>
+                <label htmlFor="vi-clipcard-steps">steps</label>
+                <input id="vi-clipcard-steps" className="vi-knob-input" type="number" min={1} max={100}
+                       value={steps} placeholder="model default" onChange={(e) => setSteps(e.target.value)} />
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "7rem" }}>
+                <label htmlFor="vi-clipcard-cfg">cfg</label>
+                <input id="vi-clipcard-cfg" className="vi-knob-input" type="number" min={0} max={20} step={0.5}
+                       value={cfg} placeholder="model default" onChange={(e) => setCfg(e.target.value)} />
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "8rem" }}>
+                <label htmlFor="vi-clipcard-seed">seed</label>
+                <input id="vi-clipcard-seed" className="vi-knob-input" type="number" min={0}
+                       value={seed} onChange={(e) => setSeed(Number(e.target.value) || 0)} />
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "9rem" }}>
+                <label htmlFor="vi-clipcard-vram">VRAM budget GB</label>
+                <input id="vi-clipcard-vram" className="vi-knob-input" type="number" min={1}
+                       value={vramBudget} placeholder="autofit" onChange={(e) => setVramBudget(e.target.value)} />
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "12rem" }}>
+                <label htmlFor="vi-clipcard-project">project (archive name)</label>
+                <input id="vi-clipcard-project" className="vi-knob-input" type="text"
+                       value={project} placeholder="optional" onChange={(e) => setProject(e.target.value)} />
+                <WarnUnnamedToggle checked={warnUnnamed} onChange={setWarnUnnamed} />
+              </div>
+            </PromptCardSettings>
           </PromptCard>
         </ol>
       </section>
@@ -2609,6 +2754,17 @@ export function StudioGenerateSurface({
             </p>
           )}
         </div>
+        {nameWarn && (
+          <UnnamedWarnPanel
+            noun="clip"
+            onProceed={(name) => {
+              setNameWarn(false);
+              if (name) setProject(name);
+              setPendingRun(true);
+            }}
+            onDismiss={() => setNameWarn(false)}
+          />
+        )}
         <div className="vi-station-footer-run">
           <button
             type="button"