feat(storyboard): highlight the next render step

Author: georgi

web/src/components/storyboard/StoryboardBoard.tsx

@@ -203,12 +203,21 @@ const captionsByShotId = (
  * the label alone and says why in the tooltip — a bare "—" next to a render
  * button reads as broken.
  */
-const RenderBatchButton: React.FC<{
+interface RenderBatchButtonProps {
   label: string;
   estimate: RenderBatchCostEstimate;
   disabled: boolean;
+  highlighted: boolean;
   onClick: () => void;
-}> = ({ label, estimate, disabled, onClick }) => {
+}
+
+const RenderBatchButton: React.FC<RenderBatchButtonProps> = ({
+  label,
+  estimate,
+  disabled,
+  highlighted,
+  onClick
+}) => {
   const { shotCount, cost, pricedCount, reasons, notes } = estimate;
   const priced = pricedCount > 0 && cost > 0;
   const partial = priced && pricedCount < shotCount;
@@ -248,13 +257,19 @@ const RenderBatchButton: React.FC<{
       }
     >
       {/* A disabled button swallows pointer events, so the tooltip needs a host. */}
-      <Box component="span" sx={{ display: "inline-flex" }}>
-        <EditorButton variant="outlined" onClick={onClick} disabled={disabled}>
+      <FlexRow component="span">
+        <EditorButton
+          variant={highlighted ? "contained" : "outlined"}
+          color="primary"
+          aria-current={highlighted ? "step" : undefined}
+          onClick={onClick}
+          disabled={disabled}
+        >
           {`${label}${shotCount > 0 ? ` (${shotCount})` : ""}${
             priced ? ` · ~${formatUsd(cost)}` : ""
           }`}
         </EditorButton>
-      </Box>
+      </FlexRow>
     </Tooltip>
   );
 };
@@ -505,11 +520,18 @@ const StoryboardBoardInner: React.FC<StoryboardBoardProps> = ({
   const pendingStills = useMemo(
     () =>
       shots.filter(
-        (s) => !s.keyframe && (s.status === "planned" || s.status === "failed")
+        (s) =>
+          shotRenderMode(s) !== "direct" &&
+          !s.keyframe &&
+          (s.status === "planned" || s.status === "failed")
       ),
     [shots]
   );
 
+  const hasIncompleteStills = shots.some(
+    (s) => shotRenderMode(s) !== "direct" && !s.keyframe
+  );
+
   const pendingClips = useMemo(
     () =>
       shots.filter(
@@ -522,6 +544,20 @@ const StoryboardBoardInner: React.FC<StoryboardBoardProps> = ({
     [shots]
   );
 
+  const nextRenderStep = hasIncompleteStills
+    ? pendingStills.length > 0
+      ? "stills"
+      : null
+    : pendingClips.length > 0
+      ? "clips"
+      : null;
+  const stillStepActive = nextRenderStep === "stills";
+  const clipStepActive = nextRenderStep === "clips";
+  const missingNextModel =
+    (stillStepActive && !imageModel?.id) ||
+    (clipStepActive && !videoModel?.id);
+  const settingsVisible = settingsOpen || missingNextModel;
+
   // The toolbar's one-line summary: how big the board is, how it looks, and
   // who is in it — the fields the folded form would otherwise hide.
   const { data: allEntities } = useEntities();
@@ -649,20 +685,26 @@ const StoryboardBoardInner: React.FC<StoryboardBoardProps> = ({
                 variant="outlined"
                 startIcon={<TuneIcon fontSize="small" />}
                 onClick={toggleSettings}
-                aria-expanded={settingsOpen}
+                aria-expanded={settingsVisible}
               >
                 Board settings
               </EditorButton>
               <RenderBatchButton
                 label="Render stills"
                 estimate={stillsCost}
-                disabled={pendingStills.length === 0 || !!directing}
+                disabled={
+                  pendingStills.length === 0 || !imageModel?.id || !!directing
+                }
+                highlighted={stillStepActive && !!imageModel?.id}
                 onClick={handleGenerateAllStills}
               />
               <RenderBatchButton
                 label="Render clips"
                 estimate={clipsCost}
-                disabled={pendingClips.length === 0 || !!directing}
+                disabled={
+                  pendingClips.length === 0 || !videoModel?.id || !!directing
+                }
+                highlighted={clipStepActive && !!videoModel?.id}
                 onClick={handleGenerateAllClips}
               />
             </FlexRow>
@@ -680,7 +722,7 @@ const StoryboardBoardInner: React.FC<StoryboardBoardProps> = ({
         )}
 
         {!readOnly && (
-          <Collapse in={settingsOpen} timeout="auto" unmountOnExit>
+          <Collapse in={settingsVisible} timeout="auto" unmountOnExit>
             <Panel padding={SPACING.xl} sx={{ maxWidth: "1100px" }}>
               <FlexColumn gap={SPACING.xl}>
                 <FormGrid stackBelow={FORM_STACK_BELOW}>
@@ -733,6 +775,11 @@ const StoryboardBoardInner: React.FC<StoryboardBoardProps> = ({
                         task={STILL_MODEL_TASKS}
                         onChange={(value) => setImageModel(boardId, value)}
                       />
+                      {stillStepActive && !imageModel?.id && (
+                        <Caption color="warning" role="alert">
+                          Choose a still model before rendering stills.
+                        </Caption>
+                      )}
                       {entitiesNeedEditModel && (
                         <Caption color="warning">
                           Entities carry reference images, but this model only
@@ -746,6 +793,11 @@ const StoryboardBoardInner: React.FC<StoryboardBoardProps> = ({
                         task="image_to_video"
                         onChange={(value) => setVideoModel(boardId, value)}
                       />
+                      {clipStepActive && !videoModel?.id && (
+                        <Caption color="warning" role="alert">
+                          Choose a clip model before rendering clips.
+                        </Caption>
+                      )}
                     </FormField>
                     <FormField label="Aspect ratio">
                       <SelectField

web/src/components/storyboard/__tests__/StoryboardBoard.test.tsx

@@ -161,8 +161,18 @@ const stub = (name: string) => ({
   default: () => <div data-testid={name} />
 });
 jest.mock("../../properties/LanguageModelSelect", () => stub("lang-model"));
-jest.mock("../../properties/ImageModelSelect", () => stub("image-model"));
-jest.mock("../../properties/VideoModelSelect", () => stub("video-model"));
+jest.mock("../../properties/ImageModelSelect", () => ({
+  __esModule: true,
+  default: () => (
+    <div role="combobox" aria-label="Still model" data-testid="image-model" />
+  )
+}));
+jest.mock("../../properties/VideoModelSelect", () => ({
+  __esModule: true,
+  default: () => (
+    <div role="combobox" aria-label="Clip model" data-testid="video-model" />
+  )
+}));
 // The card's own behaviour has its own suite (ShotCard.test.tsx); this stub
 // keeps the contract the board drives — the shot id hook the keyboard
 // navigation focuses, selection on click, and the drag callbacks.
@@ -261,6 +271,10 @@ beforeEach(() => {
   mockGenre = "";
   mockEntities = [];
   mockPresets = [];
+  boardModels = {
+    imageModel: { id: "fal-ai/flux/schnell", provider: "fal_ai" },
+    videoModel: { id: "pixverse/720p", provider: "fal_ai" }
+  };
 });
 
 const renderBoard = (onDirect: (n: number) => void) =>
@@ -438,12 +452,117 @@ describe("StoryboardBoard toolbar", () => {
     expect(
       screen.getByRole("button", { name: "Render stills (1)" })
     ).toBeEnabled();
+    expect(
+      screen.getByRole("button", { name: "Render stills (1)" })
+    ).toHaveAttribute("aria-current", "step");
     expect(screen.getByRole("button", { name: "Render clips" })).toBeDisabled();
     expect(
       screen.getByRole("button", { name: "Assemble timeline" })
     ).toBeDisabled();
   });
 
+  it("highlights clip rendering after every shot has a still", () => {
+    mockShots = [
+      {
+        ...makeShot("s1"),
+        status: "keyframe_ready",
+        keyframe: { type: "image", asset_id: "still-1" }
+      }
+    ];
+    renderBoard(jest.fn());
+
+    expect(
+      screen.getByRole("button", { name: "Render clips (1)" })
+    ).toHaveAttribute("aria-current", "step");
+    expect(
+      screen.getByRole("button", { name: "Render stills" })
+    ).not.toHaveAttribute("aria-current");
+  });
+
+  it("treats a URI-backed legacy keyframe as a completed still", () => {
+    mockShots = [
+      {
+        ...makeShot("s1"),
+        status: "keyframe_ready",
+        keyframe: { type: "image", uri: "asset://still-1.png" }
+      }
+    ];
+    renderBoard(jest.fn());
+
+    expect(
+      screen.getByRole("button", { name: "Render clips (1)" })
+    ).toHaveAttribute("aria-current", "step");
+  });
+
+  it("highlights clip rendering for a direct-render shot", () => {
+    mockShots = [{ ...makeShot("s1"), render_mode: "direct" }];
+    renderBoard(jest.fn());
+
+    expect(
+      screen.getByRole("button", { name: "Render clips (1)" })
+    ).toHaveAttribute("aria-current", "step");
+    expect(
+      screen.getByRole("button", { name: "Render stills" })
+    ).toBeDisabled();
+  });
+
+  it("does not advance to clips while another still is rendering", () => {
+    mockShots = [
+      { ...makeShot("s1"), status: "keyframe_generating" },
+      {
+        ...makeShot("s2"),
+        status: "keyframe_ready",
+        keyframe: { type: "image", asset_id: "still-2" }
+      }
+    ];
+    renderBoard(jest.fn());
+
+    expect(
+      screen.getByRole("button", { name: "Render clips (1)" })
+    ).not.toHaveAttribute("aria-current");
+  });
+
+  it("opens the still model picker and asks for a model before rendering", () => {
+    boardModels = { imageModel: null, videoModel: null };
+    mockShots = [makeShot("s1")];
+    renderBoard(jest.fn());
+
+    expect(
+      screen.getByRole("combobox", { name: "Still model" })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Choose a still model before rendering stills."
+    );
+    expect(
+      screen.getByRole("button", { name: "Render stills (1)" })
+    ).toBeDisabled();
+  });
+
+  it("opens the clip model picker and asks for a model before rendering", () => {
+    boardModels = {
+      imageModel: { id: "fal-ai/flux/schnell", provider: "fal_ai" },
+      videoModel: null
+    };
+    mockShots = [
+      {
+        ...makeShot("s1"),
+        status: "keyframe_ready",
+        keyframe: { type: "image", asset_id: "still-1" }
+      }
+    ];
+    renderBoard(jest.fn());
+
+    expect(
+      screen.getByRole("combobox", { name: "Clip model" })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Choose a clip model before rendering clips."
+    );
+    expect(
+      screen.getByRole("button", { name: "Render clips (1)" })
+    ).toBeDisabled();
+  });
+
   it("puts each batch's price on its own button", () => {
     // Two shots await a still; only the one already holding a keyframe can be
     // animated, so the two buttons quote different batches.