[#503] Show AI drafted bubbles in cut review previews

app/web/components/CutListPanel.test.tsx

@@ -1989,7 +1989,7 @@
 
   // #441: a PNG clean image is a friendly conversion step, not a red error.
   it("shows a Convert artwork step for PNG clean images instead of red unsupported-extension errors", async () => {
     const fn = vi.fn((url: string, opts?: RequestInit) => {
       if (url.includes("/asset-diagnostics")) {
         return Promise.resolve({
           ok: true,
@@ -2098,7 +2098,7 @@
   // card per cut with a creator-facing status + primary action, technical
   // controls collapsed by default.
   it("renders an episode header, progress summary, per-cut card statuses, and collapses technical controls", async () => {
     const fn = vi.fn((url: string, opts?: RequestInit) => {
       if (url.includes("/asset-diagnostics")) {
         return Promise.resolve({
           ok: true,
@@ -2352,6 +2352,12 @@
     expect(
       await screen.findByTestId("lettering-review-state-1"),
     ).toHaveTextContent("Draft ready");
+    expect(
+      await screen.findByTestId("cut-preview-1-overlay-layer"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("cut-preview-2-overlay-layer"),
+    ).toBeInTheDocument();
     expect(screen.getByTestId("cut-card-status-2")).toHaveTextContent(
       "Needs review",
     );
@@ -2361,6 +2367,205 @@
     expect(screen.getByTestId("add-bubbles-2")).toHaveTextContent(
       "Review lettering",
     );
+
+    fireEvent.click(screen.getByTestId("cut-preview-1-open"));
+    expect(
+      await screen.findByTestId("focused-lettering-editor"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders drafted overlays across multiple cut previews after AI draft all unlettered (#503)", async () => {
+    let cuts = [
+      makeCut({
+        id: 1,
+        cleanImagePath: "assets/plot-01/cut-01-clean.webp",
+        dialogue: [{ speaker: "Mira", text: "We move now." }],
+      }),
+      makeCut({
+        id: 2,
+        cleanImagePath: "assets/plot-01/cut-02-clean.webp",
+        narration: "The city held its breath.",
+      }),
+    ];
+    const fn = vi.fn((url: string, opts?: RequestInit) => {
+      if (url.includes("/asset/")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          blob: () =>
+            Promise.resolve(new Blob(["img"], { type: "image/webp" })),
+        });
+      }
+      if (url.includes("/asset-diagnostics")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () =>
+            Promise.resolve({
+              diagnostics: [
+                {
+                  cutId: 1,
+                  kind: "image",
+                  state: "clean-ready",
+                  issue: null,
+                  convertiblePng: null,
+                },
+                {
+                  cutId: 2,
+                  kind: "image",
+                  state: "clean-ready",
+                  issue: null,
+                  convertiblePng: null,
+                },
+              ],
+              summary: {
+                planned: 0,
+                needsConversion: 0,
+                missing: 0,
+                cleanReady: 2,
+                finalReady: 0,
+                uploaded: 0,
+              },
+            }),
+        });
+      }
+      if (url.includes("/detect-clean-images")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () => Promise.resolve({ detected: [], stale: [] }),
+        });
+      }
+      if (url.endsWith("/cuts/plot-01") && opts?.method === "PUT") {
+        cuts = JSON.parse(String(opts.body)).cuts;
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () => Promise.resolve({ ok: true }),
+        });
+      }
+      if (url.includes("/cuts/plot-01")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () =>
+            Promise.resolve({ version: 1, plotFile: "plot-01", cuts }),
+        });
+      }
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({}),
+      });
+    });
+
+    render(
+      <CutListPanel storyName="story" fileName="plot-01.md" authFetch={fn} />,
+    );
+
+    await screen.findByTestId("cut-list-panel");
+    fireEvent.click(screen.getByTestId("ai-draft-all-btn"));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("lettering-review-state-1")).toHaveTextContent(
+        "Draft ready",
+      ),
+    );
+    expect(screen.getByTestId("lettering-review-state-2")).toHaveTextContent(
+      "Draft ready",
+    );
+    expect(
+      await screen.findByTestId("cut-preview-1-overlay-layer"),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId("cut-preview-2-overlay-layer"),
+    ).toBeInTheDocument();
+    expect(cuts[0].overlays.length).toBeGreaterThan(0);
+    expect(cuts[1].overlays.length).toBeGreaterThan(0);
+  });
+
+  it("renders drafted overlays for text panels without a clean image path (#503)", async () => {
+    const cuts = [
+      makeCut({
+        id: 1,
+        kind: "text",
+        background: "#101820",
+        aspectRatio: "4:5",
+        overlays: [
+          {
+            id: "title-1",
+            type: "narration",
+            x: 0.12,
+            y: 0.18,
+            width: 0.68,
+            height: 0.24,
+            text: "Three days later.",
+          },
+        ],
+      }),
+    ];
+    const fn = vi.fn((url: string) => {
+      if (url.includes("/asset-diagnostics")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () =>
+            Promise.resolve({
+              diagnostics: [
+                {
+                  cutId: 1,
+                  kind: "text",
+                  state: "planned",
+                  issue: null,
+                  convertiblePng: null,
+                },
+              ],
+              summary: {
+                planned: 1,
+                needsConversion: 0,
+                missing: 0,
+                cleanReady: 0,
+                finalReady: 0,
+                uploaded: 0,
+              },
+            }),
+        });
+      }
+      if (url.includes("/detect-clean-images")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () => Promise.resolve({ detected: [], stale: [] }),
+        });
+      }
+      if (url.includes("/cuts/plot-01")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () =>
+            Promise.resolve({ version: 1, plotFile: "plot-01", cuts }),
+        });
+      }
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({}),
+      });
+    });
+
+    render(
+      <CutListPanel storyName="story" fileName="plot-01.md" authFetch={fn} />,
+    );
+
+    await screen.findByTestId("cut-list-panel");
+    expect(screen.queryByTestId("cut-card-noart-1")).not.toBeInTheDocument();
+    expect(
+      await screen.findByTestId("cut-preview-1-overlay-layer"),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("cut-preview-1-open"));
+    expect(
+      await screen.findByTestId("focused-lettering-editor"),
+    ).toBeInTheDocument();
   });
 
   it("does not overwrite existing overlays with AI draft without explicit confirmation (#494)", async () => {

app/web/components/CutListPanel.tsx

@@ -1,6 +1,7 @@
 import { Fragment, useState, useEffect, useCallback, useRef } from "react";
 import { LetteringEditor } from "./LetteringEditor";
-import { AssetImage, assetUrl } from "./asset-image";
+import { assetUrl } from "./asset-image";
+import { CutOverlayPreview } from "./CutOverlayPreview";
 import { buildCodexTaskPrompt } from "@app-lib/cartoon-prompt";
 import type { Cut as LibCut } from "@app-lib/cuts";
 import { isTextPanel, isStaleTailedExport } from "@app-lib/cuts";
@@ -265,6 +266,7 @@ function CutRow({
   cut,
   storyName,
   plotFile,
+  language,
   expanded,
   onToggle,
   authFetch,
@@ -286,6 +288,7 @@ function CutRow({
   cut: Cut;
   storyName: string;
   plotFile: string;
+  language?: string;
   expanded: boolean;
   onToggle: () => void;
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
@@ -436,6 +439,11 @@ function CutRow({
               }
             : null; // exported / uploaded — the next action is the episode-level upload/publish
   const reviewState = letteringReviewState(cut);
+  const canOpenPreviewEditor =
+    !!cut.cleanImagePath ||
+    !!cut.narration ||
+    cut.dialogue.length > 0 ||
+    isTextPanel(cut);
 
   return (
     <div
@@ -463,13 +471,19 @@ function CutRow({
             {board.label}
           </span>
         </div>
-        {thumbPath ? (
-          <AssetImage
+        {thumbPath || isTextPanel(cut) ? (
+          <CutOverlayPreview
             storyName={storyName}
             assetPath={thumbPath}
             authFetch={authFetch}
             alt={`Cut ${cut.id} artwork`}
-            className="w-full max-h-[32rem] object-contain rounded border border-border bg-white"
+            overlays={cut.overlays}
+            language={language}
+            background={cut.background}
+            aspectRatio={cut.aspectRatio}
+            onClick={canOpenPreviewEditor ? onOpenEditor : undefined}
+            className="w-full"
+            testId={`cut-preview-${cut.id}`}
           />
         ) : (
           <div
@@ -1926,6 +1940,7 @@ export function CutListPanel({
               cut={cut}
               storyName={storyName}
               plotFile={plotFile}
+              language={language}
               expanded={expandedCut === cut.id}
               onToggle={() =>
                 setExpandedCut(expandedCut === cut.id ? null : cut.id)