@hugpy/video-intelligence-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hugpy/video-intelligence-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "description": "Video-intelligence console \u2014 sibling arm of media_intelligence_ui (Vite + Tailwind v4), served at /video. Four stations (image crop, audio crop, frames/models, generate) over the hugpy job bus. Dials the same-origin current-hugpy API (/api).",

package/src/stations/GenerateStation.tsx

@@ -79,6 +79,9 @@ import { getSessionId } from "../session";
 import { isCanned } from "../demo/mode";
 import { DEMO_GENERATE_PROMPT } from "../demo/seed";
 import { usePromptAssist } from "../video/usePromptAssist";
+import { useOperatorHistory } from "../video/useOperatorHistory";
+import { UnnamedWarnPanel, WarnUnnamedToggle, useWarnUnnamedPref, deriveNameFrom } from "../video/UnnamedWarn";
+import { LibraryGroups } from "../video/LibraryGroups";
 import { PromptAssistButtons } from "../video/PromptAssistButtons";
 import { registerComposer, type StageRequest } from "../video/composerBridge";
 import {
@@ -631,6 +634,20 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
 
   // ---- optional auto-archive project name (blank = backend auto-names) ----
   const [projectName, setProjectName] = useSessionState<string>("gen.projectName", "");
+  // UNNAMED WARNING (operator 2026-08-13): explicit PER-SECTION option, default
+  // OFF, localStorage-remembered — an image that renders in 2 seconds should
+  // never suffer a 30-second warning unless its operator opted in.
+  const [warnImagePref, setWarnImagePref] = useWarnUnnamedPref("gen.image");
+  const [warnScenePref, setWarnScenePref] = useWarnUnnamedPref("gen.scene");
+  const [warnMoviePref, setWarnMoviePref] = useWarnUnnamedPref("gen.movie");
+  const warnPref =
+    mode === "image" ? warnImagePref : mode === "scene" ? warnScenePref : mode === "movie" ? warnMoviePref : false;
+  const setWarnPref =
+    mode === "image" ? setWarnImagePref : mode === "scene" ? setWarnScenePref : setWarnMoviePref;
+  const [nameWarn, setNameWarn] = useState(false);
+  const [pendingRun, setPendingRun] = useState(false);
+  // Auto-derived names may be replaced by the next ✨ Generate; typed ones never.
+  const autoProjectRef = useRef("");
 
   // ---- STUDIO TESTER cross-model battery (operator 2026-08-05) ----
   // The SAME across-models sweep the studio surfaces expose (POST studioTesterUrl),
@@ -984,6 +1001,18 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
 
   // ---- library (images are pickable prompt parts; videos too) ----
   const library = useMediaLibrary();
+  // OPERATOR HISTORY (2026-08-13): a superadmin session back-fills the library
+  // from the server record once per session (complete visibility); see the hook.
+  useOperatorHistory();
+  // GROUPED LIBRARY (operator ask 2026-08-13, v2): the pickers render the
+  // library as TYPE-CATEGORIZED collapsible sections (LibraryGroups) instead
+  // of a flat, section-filtered grid — everything stays visible + pickable,
+  // organized; the CURRENT section's own group (and Inputs) starts expanded.
+  const MODE_GROUP: Record<GenMode, string> = {
+    image: "images", scene: "scenes", movie: "movies",
+    clip: "clips", cinema: "clips",
+  };
+  const libraryDefaultOpen: readonly string[] = ["inputs", MODE_GROUP[mode]];
   const libraryImages = library.filter((it) => it.ref.kind === "image");
   const libraryVideos = library.filter((it) => it.ref.kind === "video");
 
@@ -1353,12 +1382,30 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
       // composition never doubles a term.
       (neg) => {
         const std = p.stdNegative ?? sceneStdNegative;
+        // APPEND, never clobber (operator 2026-08-13): a GENERATED negative adds
+        // to whatever the operator already typed (Enhance still refines-in-place —
+        // its draft was the existing text, so appending would double it).
+        // composeNegative dedupes, so submit-time composition never doubles a term.
+        const cur = (p.negative ?? "").trim().replace(/,\s*$/, "");
+        const mergedRaw = mode === "generate" && cur ? `${cur}, ${neg}` : neg;
         patchPart(p.key, {
-          negative: composeNegative(neg, std),
+          negative: composeNegative(mergedRaw, std),
           stdNegative: std,
         });
       },
     );
+    // NAME RIDES ALONG (operator 2026-08-13): derive the project name from the
+    // fresh prompt when blank — or when the current one was itself derived.
+    if (mode === "generate" && newText.trim()) {
+      const t = projectName.trim();
+      if (t === "" || t === autoProjectRef.current) {
+        const derived = deriveNameFrom(newText);
+        if (derived) {
+          autoProjectRef.current = derived;
+          setProjectName(derived);
+        }
+      }
+    }
   }
 
   // "Test all models" / "per preset" as COMPONENTS — the single reusable
@@ -2366,6 +2413,34 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
             </span>
           </div>
         </div>
+        {/* UNIFORM-CARD PLACEHOLDERS (operator 2026-08-13): the core knob set
+            renders on EVERY prompt component. Slots this tier serves at the
+            MOVIE level (fps, VRAM budget) — or expresses differently (a movie
+            goal's LENGTH is its start/end times, frames = duration x fps) —
+            appear GREYED with the reason, never hidden, so every card in every
+            section reads identically. */}
+        <div className="vi-knob-strip">
+          <div className="vi-knob-strip-line">
+            <span className="vi-knob-mini-group">
+              <label className="vi-knob-mini-label" htmlFor={gid("na-fps")}>fps</label>
+              <input id={gid("na-fps")} className="vi-knob-input" style={{ maxWidth: "4.5rem" }} disabled
+                     value={fpsNum ?? ""}
+                     title="Movie-level — one fps for the whole timeline; set it in the station knobs." />
+            </span>
+            <span className="vi-knob-mini-group">
+              <label className="vi-knob-mini-label" htmlFor={gid("na-length")}>length</label>
+              <input id={gid("na-length")} className="vi-knob-input" style={{ maxWidth: "6.5rem" }} disabled
+                     value={`${g.start || "0"}–${g.end || "?"}s`}
+                     title="A movie goal's length IS its start/end times (frames = duration x fps) — edit those on the card; a frames knob does not apply here." />
+            </span>
+            <span className="vi-knob-mini-group">
+              <label className="vi-knob-mini-label" htmlFor={gid("na-vram")}>VRAM</label>
+              <input id={gid("na-vram")} className="vi-knob-input" style={{ maxWidth: "5.5rem" }} disabled
+                     value="autofit"
+                     title="Movie-level — renders size to the serving worker's free VRAM (autofit); the movie tier has no per-goal budget." />
+            </span>
+          </div>
+        </div>
       </>
     );
   }
@@ -3331,7 +3406,23 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
     void assist.runAssist(assistMode, assembledPrompt, applyAssistedPrompt);
   }
 
-  function onRun() {
+  useEffect(() => {
+    // Post-commit re-run after the warn panel names the run — fresh closure,
+    // settled state, so the submit sees the new project name.
+    if (!pendingRun) return;
+    setPendingRun(false);
+    onRun(true);
+  });
+
+  function onRun(skipNameCheck = false) {
+    if (
+      !skipNameCheck && warnPref && projectName.trim() === "" &&
+      (mode === "image" || mode === "scene" || mode === "movie")
+    ) {
+      setNameWarn(true);
+      return;
+    }
+    setNameWarn(false);
     // This guard is for the STATION-level knobs (movie + the image fallback).
     // Scene validates every knob PER-PART in buildSceneRow (station values may be
     // blank/unused when knobs are unshared), so it must not be gated here — else a
@@ -3613,6 +3704,7 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
               Choose an existing project or type a new name. Saves this run&apos;s frames +
               clip to assets/&lt;project&gt;. Blank = an auto-named folder.
             </span>
+            <WarnUnnamedToggle checked={warnPref} onChange={setWarnPref} />
           </div>
 
           {/* PRESET — a curated "ideal default load". Selecting one prefills every
@@ -4396,8 +4488,11 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
                     land here and become pickable.
                   </p>
                 ) : (
-                  <div className="vi-gen-picker-grid">
-                    {libraryImages.map((it) => (
+                  <LibraryGroups
+                    seed={mode}
+                    items={libraryImages}
+                    defaultOpen={libraryDefaultOpen}
+                    renderItem={(it) => (
                       <button
                         type="button"
                         key={it.ref.uri}
@@ -4416,8 +4511,8 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
                           {it.label ? ` · ${it.label}` : ""}
                         </span>
                       </button>
-                    ))}
-                  </div>
+                    )}
+                  />
                 )}
               </div>
             )}
@@ -4450,8 +4545,11 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
                   {videoError && <span className="vi-error">{videoError}</span>}
                 </div>
                 {libraryVideos.length > 0 && (
-                  <div className="vi-gen-picker-grid">
-                    {libraryVideos.map((it) => (
+                  <LibraryGroups
+                    seed={mode}
+                    items={libraryVideos}
+                    defaultOpen={libraryDefaultOpen}
+                    renderItem={(it) => (
                       <button
                         type="button"
                         key={it.ref.uri}
@@ -4466,8 +4564,8 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
                           <code>{it.ref.mime}</code> · {it.origin}
                         </span>
                       </button>
-                    ))}
-                  </div>
+                    )}
+                  />
                 )}
               </div>
             )}
@@ -4860,9 +4958,32 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
                             )
                           }
                           onGenerate={() =>
-                            void assist.runAssist("generate", g.prompt, (p) =>
-                              editGoal(g.id, "prompt", p),
-                            )
+                            void (async () => {
+                              let fresh = "";
+                              await assist.runAssist("generate", g.prompt, (p) => {
+                                fresh = p;
+                                editGoal(g.id, "prompt", p);
+                              });
+                              if (!fresh.trim()) return;
+                              // NEGATIVE RIDES ALONG (operator 2026-08-13): the
+                              // generated exclusion list APPENDS to the goal's (or
+                              // shared) typed negative, never clobbers it.
+                              await assist.runNegative({ subject: fresh }, (neg) => {
+                                const cur = (movieShare.negative ? negative : g.negative ?? "")
+                                  .trim().replace(/,\s*$/, "");
+                                const merged = cur ? `${cur}, ${neg}` : neg;
+                                if (movieShare.negative) setNegative(merged);
+                                else patchGoal(g.id, { negative: merged });
+                              });
+                              const t = projectName.trim();
+                              if (t === "" || t === autoProjectRef.current) {
+                                const derived = deriveNameFrom(fresh);
+                                if (derived) {
+                                  autoProjectRef.current = derived;
+                                  setProjectName(derived);
+                                }
+                              }
+                            })()
                           }
                           canEnhance={g.prompt.trim() !== ""}
                           models={assist.assistModels}
@@ -5557,12 +5678,23 @@ export function GenerateStation({ spec }: { spec: StationSpec }) {
                 </div>
               )}
             </div>
+            {nameWarn && (
+              <UnnamedWarnPanel
+                noun={mode}
+                onProceed={(name) => {
+                  setNameWarn(false);
+                  if (name) setProjectName(name);
+                  setPendingRun(true);
+                }}
+                onDismiss={() => setNameWarn(false)}
+              />
+            )}
             <div className="vi-station-footer-run">
               <button
                 type="button"
                 className="vi-btn vi-btn-accent"
                 disabled={!canRun}
-                onClick={onRun}
+                onClick={() => onRun()}
               >
                 {running
                   ? mode === "movie"

package/src/stations/WorkbenchSidebar.tsx

@@ -1029,7 +1029,30 @@ function LibraryPanel({
   items: LibraryItem[];
   onGenerate: boolean;
 }) {
-  const works = useMemo(() => groupLibrary(items), [items]);
+  // TYPE SECTIONS (operator 2026-08-13): the library splits into Images and
+  // Videos (plus a rare Other for audio/unknown), each holding its work groups
+  // newest-first — groupLibrary already sorts both levels freshest-first, so
+  // the per-type ordering is "most recent on top" by construction.
+  const sections = useMemo(() => {
+    const imgs = items.filter((it) => it.ref.kind === "image");
+    const vids = items.filter((it) => it.ref.kind === "video");
+    const rest = items.filter((it) => it.ref.kind !== "image" && it.ref.kind !== "video");
+    return [
+      { id: "images", label: "🖼 Images", count: imgs.length, works: groupLibrary(imgs) },
+      { id: "videos", label: "🎞 Videos", count: vids.length, works: groupLibrary(vids) },
+      { id: "other", label: "📎 Other", count: rest.length, works: groupLibrary(rest) },
+    ].filter((sec) => sec.count > 0);
+  }, [items]);
+  // Both type sections start OPEN (hiding freshly-landed work behind a closed
+  // header is how "it never populates" reports happen); the caret remembers.
+  const [closedTypes, setClosedTypes] = useState<Set<string>>(() => new Set());
+  const toggleType = (id: string) =>
+    setClosedTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
   // Expand state keyed by work key — the established discipline (a Set that
   // survives the library's refresh cadence: the works array is rebuilt on every
   // change, but the keys are stable, so an expanded work stays open across a
@@ -1052,17 +1075,39 @@ function LibraryPanel({
   }
 
   return (
-    <ul className="vi-lib-list">
-      {works.map((w) => (
-        <WorkSection
-          key={w.key}
-          group={w}
-          open={openKeys.has(w.key)}
-          onToggle={() => toggle(w.key)}
-          onGenerate={onGenerate}
-        />
-      ))}
-    </ul>
+    <>
+      {sections.map((sec) => {
+        const isOpen = !closedTypes.has(sec.id);
+        return (
+          <div key={sec.id} className="vi-lib-typegroup">
+            <button
+              type="button"
+              className="vi-lib-group-toggle vi-lib-typegroup-head"
+              aria-expanded={isOpen}
+              onClick={() => toggleType(sec.id)}
+            >
+              <span className="vi-lib-group-caret" aria-hidden>
+                {isOpen ? "▾" : "▸"}
+              </span>{" "}
+              {sec.label} <span className="vi-proc-count">{sec.count}</span>
+            </button>
+            {isOpen && (
+              <ul className="vi-lib-list">
+                {sec.works.map((w) => (
+                  <WorkSection
+                    key={w.key}
+                    group={w}
+                    open={openKeys.has(w.key)}
+                    onToggle={() => toggle(w.key)}
+                    onGenerate={onGenerate}
+                  />
+                ))}
+              </ul>
+            )}
+          </div>
+        );
+      })}
+    </>
   );
 }
 

package/src/stations/studio/StudioGenerateTab.tsx

@@ -49,6 +49,7 @@ 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 { enqueueResultSchema, mediaRefSchema, uploadResultSchema } from "../../video/contract";
 import type { MediaRef } from "../../video/contract";
 import { DropReceptacle } from "../../video/DropReceptacle";
@@ -85,7 +86,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 +305,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 +318,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 +1126,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 +1153,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 +1185,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 +1284,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 +2464,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 +2546,100 @@ 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>
+              <div className="vi-knob" style={{ maxWidth: "6rem" }}>
+                <label htmlFor="vi-clipcard-fps">fps</label>
+                <input id="vi-clipcard-fps" className="vi-knob-input" type="number" min={1}
+                       value={fps} onChange={(e) => setFps(Number(e.target.value) || 0)} />
+              </div>
+              <div className="vi-knob" style={{ maxWidth: "11rem" }}>
+                <label htmlFor="vi-clipcard-frames">length — frames</label>
+                <input id="vi-clipcard-frames" className="vi-knob-input" type="number" min={1}
+                       value={requestedFrames} placeholder="model default (81)"
+                       onChange={(e) => setRequestedFrames(e.target.value)} />
+                <span className="vi-knob-hint">
+                  {requestedFrames.trim() !== "" && Number(requestedFrames) > 0 && fps > 0
+                    ? `\u2248 ${(Number(requestedFrames) / fps).toFixed(1)}s @ ${fps}fps`
+                    : `blank = model default \u2014 81f \u2248 ${fps > 0 ? (81 / fps).toFixed(1) : "?"}s @ ${fps}fps`}
+                  {" \u00b7 clamped to the model ceiling, snapped to 4k+1"}
+                </span>
+              </div>
+              <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 +2761,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"