plotlink-ows 1.2.94 → 1.2.95

package/app/web/components/CutListPanel.tsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { Fragment, useState, useEffect, useCallback, useRef } from "react";
 import { LetteringEditor } from "./LetteringEditor";
 import { AssetImage, assetUrl } from "./asset-image";
-import { buildCodexTaskPrompt, buildLetteringPrompt } from "@app-lib/cartoon-prompt";
+import { buildCodexTaskPrompt } from "@app-lib/cartoon-prompt";
 import type { Cut as LibCut } from "@app-lib/cuts";
 import { isTextPanel, isStaleTailedExport } from "@app-lib/cuts";
 import { withRateLimitRetry, createUploadThrottle, type RetryDeps } from "../lib/upload-retry";
@@ -141,6 +141,25 @@ function boardStatus(cut: Cut, needsConversion: boolean, hasStale: boolean): Boa
   return { key: "needs-image", label: "Needs image", tone: "muted" };
 }
 
+function letteringReviewState(cut: Cut): { label: string; detail: string; tone: BoardTone } {
+  if (cut.uploadedCid || cut.uploadedUrl) {
+    return { label: "Complete", detail: "Final image uploaded", tone: "green" };
+  }
+  if (cut.finalImagePath || cut.exportedAt) {
+    return { label: "Exported", detail: "Ready to upload", tone: "green" };
+  }
+  if ((cut.overlays?.length ?? 0) > 0) {
+    return { label: "Draft saved", detail: `${cut.overlays.length} overlay${cut.overlays.length === 1 ? "" : "s"} placed`, tone: "amber" };
+  }
+  if (isTextPanel(cut)) {
+    return { label: "Between-scene card", detail: "Open to add narration or title text", tone: "accent" };
+  }
+  if (cut.cleanImagePath) {
+    return { label: "Unlettered", detail: "Clean art ready for bubble placement", tone: "muted" };
+  }
+  return { label: "Needs artwork", detail: "Add or sync clean art first", tone: "muted" };
+}
+
 function CutRow({
   cut,
   storyName,
@@ -190,10 +209,6 @@ function CutRow({
   // generated PNG into this cut without hunting through a hidden folder.
   const [showCodexPicker, setShowCodexPicker] = useState(false);
   const [convertingThis, setConvertingThis] = useState(false);
-  // Lettering is a first-class step (#442): an intentional Manual vs AI-draft
-  // choice per cut, surfaced on the card (not hidden under Edit).
-  const [letteringMode, setLetteringMode] = useState<"manual" | "ai">("manual");
-  const [letteringCopied, setLetteringCopied] = useState(false);
   const status = getCutStatus(cut);
   // A recorded cleanImagePath/finalImagePath whose file is missing/invalid (#302):
   // surface it precisely rather than letting the field-based status claim the cut
@@ -267,18 +282,13 @@ function CutRow({
     !isTextPanel(cut) && !!cut.cleanImagePath && !cut.finalImagePath &&
     !cut.uploadedCid && !cut.uploadedUrl && !hasStale && !needsConversion;
 
-  const copyLetteringPrompt = useCallback(() => {
-    navigator.clipboard?.writeText(buildLetteringPrompt(cut as unknown as LibCut, plotFile));
-    setLetteringCopied(true);
-    setTimeout(() => setLetteringCopied(false), 2000);
-  }, [cut, plotFile]);
-
   const primary: { label: string; onClick: () => void; testid: string } | null =
     board.key === "convert" ? { label: convertingThis ? "Converting…" : "Convert image", onClick: handleConvertThis, testid: `card-convert-${cut.id}` }
     : board.key === "review" ? { label: "Review cut", onClick: onOpenEditor, testid: `card-review-${cut.id}` }
     : board.key === "text" ? { label: "Add captions", onClick: onOpenEditor, testid: `card-letter-${cut.id}` }
     : board.key === "needs-image" ? { label: "Add artwork", onClick: onToggle, testid: `card-addart-${cut.id}` }
     : null; // exported / uploaded — the next action is the episode-level upload/publish
+  const reviewState = letteringReviewState(cut);
 
   return (
     <div
@@ -303,13 +313,20 @@ function CutRow({
             assetPath={thumbPath}
             authFetch={authFetch}
             alt={`Cut ${cut.id} artwork`}
-            className="w-full max-h-44 object-contain rounded border border-border bg-white"
+            className="w-full max-h-[32rem] object-contain rounded border border-border bg-white"
           />
         ) : (
-          <div className="w-full h-20 rounded border border-dashed border-border bg-surface/40 flex items-center justify-center text-[10px] text-muted" data-testid={`cut-card-noart-${cut.id}`}>
+          <div className="w-full min-h-28 rounded border border-dashed border-border bg-surface/40 flex items-center justify-center text-[10px] text-muted" data-testid={`cut-card-noart-${cut.id}`}>
             {isTextPanel(cut) ? "Text panel — no artwork needed" : "No artwork yet"}
           </div>
         )}
+        <div
+          className={`rounded border border-border/70 bg-surface/50 px-2 py-1.5 text-[11px] ${BOARD_TONE_TEXT[reviewState.tone]}`}
+          data-testid={`lettering-review-state-${cut.id}`}
+        >
+          <span className="font-semibold">{reviewState.label}</span>
+          <span className="text-muted"> · {reviewState.detail}</span>
+        </div>
         <button
           onClick={onToggle}
           data-testid={`cut-desc-${cut.id}`}
@@ -317,51 +334,15 @@ function CutRow({
         >
           {cut.description || "No description"}
         </button>
-        {/* Lettering is a first-class, visible step (#442): an intentional
-            Manual vs AI-draft choice on the card, then the matching CTA. */}
-        {atLetteringStage && (
-          <div className="space-y-1" data-testid={`lettering-${cut.id}`}>
-            <div className="text-[10px] font-medium text-muted uppercase tracking-wider">Lettering</div>
-            <label className="flex items-center gap-1.5 text-[11px] text-foreground">
-              <input
-                type="radio" name={`lettering-mode-${cut.id}`} checked={letteringMode === "manual"}
-                onChange={() => setLetteringMode("manual")} data-testid={`lettering-mode-manual-${cut.id}`}
-              />
-              Manual — I place bubbles myself
-            </label>
-            <label className="flex items-center gap-1.5 text-[11px] text-foreground">
-              <input
-                type="radio" name={`lettering-mode-${cut.id}`} checked={letteringMode === "ai"}
-                onChange={() => setLetteringMode("ai")} data-testid={`lettering-mode-ai-${cut.id}`}
-              />
-              AI draft — ask the agent to place initial bubbles
-            </label>
-            {letteringMode === "ai" && (
-              <p className="text-[10px] text-muted">
-                Paste it to your agent, then review the draft bubbles here and export the final cut.
-              </p>
-            )}
-          </div>
-        )}
         <div className="flex items-center gap-2 flex-wrap">
           {atLetteringStage ? (
-            letteringMode === "manual" ? (
-              <button
-                onClick={onOpenEditor}
-                data-testid={`add-bubbles-${cut.id}`}
-                className="px-2.5 py-1 text-[11px] font-medium rounded bg-accent text-white hover:bg-accent-dim"
-              >
-                {bubblesPlaced > 0 ? "Review lettering" : "Add speech bubbles"}
-              </button>
-            ) : (
-              <button
-                onClick={copyLetteringPrompt}
-                data-testid={`copy-lettering-${cut.id}`}
-                className="px-2.5 py-1 text-[11px] font-medium rounded border border-accent/40 text-accent hover:bg-accent/5"
-              >
-                {letteringCopied ? "Copied!" : "Copy AI lettering prompt"}
-              </button>
-            )
+            <button
+              onClick={onOpenEditor}
+              data-testid={`add-bubbles-${cut.id}`}
+              className="px-2.5 py-1 text-[11px] font-medium rounded bg-accent text-white hover:bg-accent-dim"
+            >
+              {bubblesPlaced > 0 ? "Review lettering" : "Open focused editor"}
+            </button>
           ) : primary ? (
             <button
               onClick={primary.onClick}
@@ -924,10 +905,10 @@ export function CutListPanel({ storyName, fileName, authFetch, language, uploadR
     setRepairing(false);
   }, [authFetch, storyName, plotFile, loadCuts, loadDetect]);
 
-  // Append a text/interstitial panel to the cut plan (#352) — a one-click way to
-  // add a narration/title card between image cuts without hand-editing cuts.json.
+  // Insert a text/interstitial panel to the cut plan (#352/#488) — a one-click way
+  // to add a narration/title card between image cuts without hand-editing cuts.json.
   const [addingPanel, setAddingPanel] = useState(false);
-  const addTextPanel = useCallback(async () => {
+  const addTextPanelAt = useCallback(async (insertIndex: number, openEditor = true) => {
     if (!cutsFile) return;
     setAddingPanel(true);
     try {
@@ -939,14 +920,17 @@ export function CutListPanel({ storyName, fileName, authFetch, language, uploadR
         uploadedCid: null, uploadedUrl: null, overlays: [],
         kind: "text" as const, background: "#101820", aspectRatio: "4:5",
       };
-      const updated = { ...cutsFile, cuts: [...cutsFile.cuts, panel] };
+      const nextCuts = [...cutsFile.cuts];
+      nextCuts.splice(Math.max(0, Math.min(insertIndex, nextCuts.length)), 0, panel);
+      const updated = { ...cutsFile, cuts: nextCuts };
       const res = await authFetch(`/api/stories/${storyName}/cuts/${plotFile}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(updated),
       });
       if (res.ok) {
-        setExpandedCut(nextId);
+        if (openEditor) setEditingCutId(nextId);
+        else setExpandedCut(nextId);
         await loadCuts();
       } else {
         const data = await res.json().catch(() => ({}));
@@ -957,6 +941,7 @@ export function CutListPanel({ storyName, fileName, authFetch, language, uploadR
     }
     setAddingPanel(false);
   }, [cutsFile, authFetch, storyName, plotFile, loadCuts]);
+  const addTextPanel = useCallback(() => addTextPanelAt(cutsFile?.cuts.length ?? 0, true), [addTextPanelAt, cutsFile]);
 
   useEffect(() => {
     loadCuts();
@@ -1000,6 +985,8 @@ export function CutListPanel({ storyName, fileName, authFetch, language, uploadR
         plotFile={plotFile}
         language={language}
         authFetch={authFetch}
+        targetLabel={isTextPanel(editingCut) ? `Between-scene card ${editingCut.id}` : `Cut ${String(editingCut.id).padStart(2, "0")}`}
+        returnOnSave
         onSave={async (overlays: Overlay[]) => {
           const updated = { ...cutsFile, cuts: cutsFile.cuts.map((c) => c.id === editingCutId ? { ...c, overlays } : c) };
           const res = await authFetch(`/api/stories/${storyName}/cuts/${plotFile}`, {
@@ -1268,32 +1255,83 @@ export function CutListPanel({ storyName, fileName, authFetch, language, uploadR
         published={episodeState.published}
       />
 
-      {/* Cut list */}
-      <div className="flex-1 min-h-56 overflow-y-auto p-3 space-y-2" data-testid="cut-list-scroll">
-        {cutsFile.cuts.map((cut) => (
-          <CutRow
-            key={cut.id}
-            cut={cut}
-            storyName={storyName}
-            plotFile={plotFile}
-            expanded={expandedCut === cut.id}
-            onToggle={() => setExpandedCut(expandedCut === cut.id ? null : cut.id)}
-            authFetch={authFetch}
-            onUpdated={() => { loadCuts(); loadDetect(); loadDiagnostics(); }}
-            onOpenEditor={() => setEditingCutId(cut.id)}
-            detectedLocalClean={detected.has(cut.id)}
-            onSyncClean={syncCleanImages}
-            syncing={syncing}
-            staleMessages={staleByCut.get(cut.id) ?? []}
-            onRepairStale={repairStalePaths}
-            repairing={repairing}
-            conversionPng={conversionByCut.get(cut.id) ?? null}
-            onConvert={convertCut}
-            converting={converting}
-            rowRef={(el) => { if (el) rowRefs.current.set(cut.id, el); else rowRefs.current.delete(cut.id); }}
-          />
+      {/* Full cut review (#488): all clean cuts are shown vertically first, with
+          explicit between-scene slots for narration/title cards. */}
+      <div className="flex-1 min-h-56 overflow-y-auto p-3 space-y-3" data-testid="lettering-review-board">
+        {cutsFile.cuts.map((cut, index) => (
+          <Fragment key={cut.id}>
+            <BetweenSceneSlot
+              index={index}
+              beforeLabel={index === 0 ? "Episode opening" : `After cut ${cutsFile.cuts[index - 1]?.id}`}
+              afterLabel={`Before cut ${cut.id}`}
+              disabled={addingPanel}
+              onAdd={() => addTextPanelAt(index)}
+            />
+            <CutRow
+              cut={cut}
+              storyName={storyName}
+              plotFile={plotFile}
+              expanded={expandedCut === cut.id}
+              onToggle={() => setExpandedCut(expandedCut === cut.id ? null : cut.id)}
+              authFetch={authFetch}
+              onUpdated={() => { loadCuts(); loadDetect(); loadDiagnostics(); }}
+              onOpenEditor={() => setEditingCutId(cut.id)}
+              detectedLocalClean={detected.has(cut.id)}
+              onSyncClean={syncCleanImages}
+              syncing={syncing}
+              staleMessages={staleByCut.get(cut.id) ?? []}
+              onRepairStale={repairStalePaths}
+              repairing={repairing}
+              conversionPng={conversionByCut.get(cut.id) ?? null}
+              onConvert={convertCut}
+              converting={converting}
+              rowRef={(el) => { if (el) rowRefs.current.set(cut.id, el); else rowRefs.current.delete(cut.id); }}
+            />
+          </Fragment>
         ))}
+        <BetweenSceneSlot
+          index={cutsFile.cuts.length}
+          beforeLabel={`After cut ${cutsFile.cuts[cutsFile.cuts.length - 1]?.id}`}
+          afterLabel="Episode ending"
+          disabled={addingPanel}
+          onAdd={() => addTextPanelAt(cutsFile.cuts.length)}
+        />
       </div>
     </div>
   );
 }
+
+function BetweenSceneSlot({
+  index,
+  beforeLabel,
+  afterLabel,
+  disabled,
+  onAdd,
+}: {
+  index: number;
+  beforeLabel: string;
+  afterLabel: string;
+  disabled: boolean;
+  onAdd: () => void;
+}) {
+  return (
+    <div
+      className="rounded border border-dashed border-border bg-surface/35 px-3 py-2 text-[11px] text-muted flex items-center gap-3"
+      data-testid={`between-scene-slot-${index}`}
+    >
+      <span className="min-w-0 flex-1">
+        <span className="font-medium text-foreground">Between-scene lettering</span>
+        <span className="block truncate">{beforeLabel} · {afterLabel}</span>
+      </span>
+      <button
+        type="button"
+        onClick={onAdd}
+        disabled={disabled}
+        className="flex-shrink-0 rounded border border-accent/40 px-2.5 py-1 text-[11px] font-medium text-accent hover:bg-accent/5 disabled:opacity-50"
+        data-testid={`add-between-scene-${index}`}
+      >
+        Add card
+      </button>
+    </div>
+  );
+}

package/app/web/components/Dashboard.tsx

@@ -1,8 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 
 const API_BASE = "http://localhost:7777";
 
 interface WalletInfo {
+  walletId?: string;
+  name?: string;
   address: string;
   ethBalance: string;
   ethFormatted: string;
@@ -48,16 +50,17 @@ interface DashboardData {
 
 export function Dashboard({ token }: { token: string }) {
   const [data, setData] = useState<DashboardData | null>(null);
-  const authFetch = (url: string, opts?: RequestInit) =>
-    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
+  const authFetch = useCallback((url: string, opts?: RequestInit) =>
+    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } }),
+  [token]);
 
-  const loadDashboard = () => {
+  const loadDashboard = useCallback(() => {
     authFetch(`${API_BASE}/api/dashboard`)
       .then((r) => r.json())
       .then(setData);
-  };
+  }, [authFetch]);
 
-  useEffect(() => { loadDashboard(); }, []);
+  useEffect(() => { loadDashboard(); }, [loadDashboard]);
 
   const truncate = (addr: string) => `${addr.slice(0, 6)}...${addr.slice(-4)}`;
   const formatDate = (d: string | undefined | null) => {
@@ -104,6 +107,12 @@ export function Dashboard({ token }: { token: string }) {
         <div className="border-border rounded border p-4">
           <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Wallet</h3>
           <div className="space-y-1.5">
+            {data.wallet.name && (
+              <div className="flex justify-between text-xs">
+                <span className="text-muted">Active wallet</span>
+                <span className="text-foreground truncate pl-3 font-mono text-[10px]">{data.wallet.name}</span>
+              </div>
+            )}
             <div className="flex justify-between text-xs">
               <span className="text-muted">Address</span>
               <code className="text-foreground font-mono text-[10px]">{truncate(data.wallet.address)}</code>

package/app/web/components/LetteringEditor.tsx

@@ -22,6 +22,8 @@ import {
 import { layoutBubbleText } from "@app-lib/bubble-text";
 import { cutLetteringChecklist, cutScriptLines, isExportStale, overlaysSignature, type ScriptLine } from "@app-lib/lettering-status";
 import { textPanelDimensions } from "@app-lib/cuts";
+import { buildLetteringPrompt } from "@app-lib/cartoon-prompt";
+import type { Cut as LibCut } from "@app-lib/cuts";
 import { useAuthedAsset } from "./asset-image";
 
 function toPixel(norm: number, size: number): number {
@@ -72,6 +74,10 @@ interface LetteringEditorProps {
   onExported?: () => void;
   language?: string;
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  /** Focused-editor header label supplied by the review board (#488). */
+  targetLabel?: string;
+  /** When true, the Save button returns to the review board after persisting. */
+  returnOnSave?: boolean;
 }
 
 const TYPE_LABEL: Record<OverlayType, string> = {
@@ -106,7 +112,7 @@ function clamp(v: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, v));
 }
 
-export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onExported, language = "English", authFetch }: LetteringEditorProps) {
+export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onExported, language = "English", authFetch, targetLabel, returnOnSave = false }: LetteringEditorProps) {
   const bodyFont = getDefaultFont(language);
   const displayFont = getDisplayFont();
   const bodyFontFamily = getFontFamily(bodyFont);
@@ -176,6 +182,8 @@ export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onE
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [exporting, setExporting] = useState(false);
   const [exportError, setExportError] = useState<string | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [aiCopied, setAiCopied] = useState(false);
   const [imageBounds, setImageBounds] = useState({ x: 0, y: 0, width: 0, height: 0 });
   const containerRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement>(null);
@@ -355,9 +363,21 @@ export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onE
     };
   }, [imageBounds, updateOverlay]);
 
-  const handleSave = useCallback(() => {
-    onSave(overlays);
-  }, [overlays, onSave]);
+  const handleSave = useCallback(async () => {
+    setSaveError(null);
+    try {
+      await onSave(overlays);
+      if (returnOnSave) onClose();
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : "Failed to save overlays");
+    }
+  }, [overlays, onSave, onClose, returnOnSave]);
+
+  const copyAiDraftPrompt = useCallback(() => {
+    navigator.clipboard?.writeText(buildLetteringPrompt(cut as unknown as LibCut, plotFile));
+    setAiCopied(true);
+    setTimeout(() => setAiCopied(false), 2000);
+  }, [cut, plotFile]);
 
   const handleExport = useCallback(async () => {
     // Block export when the cut plan contained overlays that could not be placed
@@ -515,25 +535,32 @@ export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onE
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col" data-testid="focused-lettering-editor">
       {/* Toolbar */}
-      <div className="px-3 py-1.5 border-b border-border flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-mono text-muted">Cut #{cut.id}</span>
+      <div className="px-4 py-3 border-b border-border bg-surface/40 flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] font-bold uppercase tracking-[0.16em] text-accent">Focused lettering editor</span>
+            <span className="text-xs font-mono text-muted">{targetLabel ?? `Cut #${cut.id}`}</span>
+          </div>
+          <p className="mt-0.5 text-[11px] text-muted">
+            Place bubbles, captions, SFX, or between-scene card text, then save back to the full cut review.
+          </p>
           <span className="text-[10px] text-muted" data-testid="overlay-count">{overlays.length} overlays</span>
+        </div>
+        <div className="flex items-center gap-2 flex-wrap justify-end">
           <div className="flex items-center gap-1 ml-2">
             <button onClick={() => addOverlay("speech")} className="px-2 py-0.5 text-[10px] border border-border rounded hover:border-accent hover:bg-accent/5" data-testid="add-speech">Speech</button>
             <button onClick={() => addOverlay("narration")} className="px-2 py-0.5 text-[10px] border border-border rounded hover:border-accent hover:bg-accent/5" data-testid="add-narration">Narration</button>
             <button onClick={() => addOverlay("sfx")} className="px-2 py-0.5 text-[10px] border border-border rounded hover:border-accent hover:bg-accent/5" data-testid="add-sfx">SFX</button>
           </div>
-        </div>
-        <div className="flex items-center gap-2">
           {exportError && <span className="text-[10px] text-error">{exportError}</span>}
+          {saveError && <span className="text-[10px] text-error">{saveError}</span>}
           <button onClick={handleExport} disabled={exporting} className="px-3 py-1 text-xs border border-accent text-accent rounded hover:bg-accent/5 disabled:opacity-50" data-testid="export-btn">
             {exporting ? "Exporting..." : "Export"}
           </button>
-          <button onClick={handleSave} className="px-3 py-1 text-xs bg-accent text-white rounded hover:bg-accent-dim">Save</button>
-          <button onClick={onClose} className="px-3 py-1 text-xs text-muted hover:text-foreground border border-border rounded">Close</button>
+          <button onClick={() => { void handleSave(); }} className="px-3 py-1 text-xs bg-accent text-white rounded hover:bg-accent-dim" data-testid="save-lettering-btn">Save</button>
+          <button onClick={onClose} className="px-3 py-1 text-xs text-muted hover:text-foreground border border-border rounded" data-testid="cancel-lettering-btn">Cancel</button>
         </div>
       </div>
 
@@ -635,7 +662,7 @@ export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onE
       <div className="flex-1 min-h-0 flex">
         <div
           ref={containerRef}
-          className="flex-1 min-w-0 relative overflow-hidden"
+          className="flex-1 min-w-0 relative overflow-hidden bg-[#f8f5ef]"
           onClick={handleBackgroundClick}
           data-testid="editor-surface"
         >
@@ -830,7 +857,21 @@ export function LetteringEditor({ storyName, cut, plotFile, onSave, onClose, onE
         </div>
 
         {/* Inspector panel */}
-        <div className="w-52 border-l border-border p-3 overflow-y-auto flex-shrink-0">
+        <div className="w-64 border-l border-border p-3 overflow-y-auto flex-shrink-0">
+          <div className="mb-3 rounded border border-accent/30 bg-accent/5 p-2 space-y-1.5" data-testid="ai-draft-current-target">
+            <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-accent">AI draft assist</p>
+            <p className="text-[11px] text-muted">
+              Copy a prompt scoped to {targetLabel ?? `cut ${cut.id}`}. Review and edit any drafted bubbles here before saving.
+            </p>
+            <button
+              type="button"
+              onClick={copyAiDraftPrompt}
+              className="rounded border border-accent/40 px-2 py-1 text-[11px] font-medium text-accent hover:bg-accent/10"
+              data-testid="copy-ai-lettering-current"
+            >
+              {aiCopied ? "Copied!" : "Copy AI draft prompt"}
+            </button>
+          </div>
           {/* Insert-from-script (#336): drop the cut's planned dialogue/narration/
               SFX straight into a prefilled overlay — no copy/paste out of JSON. */}
           {scriptLines.length > 0 && (

package/app/web/components/PreviewPanel.tsx

@@ -1015,6 +1015,7 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
           authFetch={authFetch}
           refreshKey={cutsRefreshKey}
           onAction={handleCoachAction}
+          showEmptyState
         />
       )}
 
@@ -1334,7 +1335,7 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
               <div className="flex items-center flex-wrap gap-x-3 gap-y-0.5 text-[10px] text-muted" data-testid="cartoon-status-summary">
                 <span>Cuts: <span className="text-foreground font-medium">{cartoonCutProgress.total}</span></span>
                 <span>Clean: <span className="text-foreground font-medium">{cartoonCutProgress.withClean}/{cartoonCutProgress.needClean}</span></span>
-                <span>Lettered: <span className="text-foreground font-medium">{cartoonCutProgress.withText}/{cartoonCutProgress.needClean}</span></span>
+                <span>Lettered: <span className="text-foreground font-medium">{cartoonCutProgress.withText}/{cartoonCutProgress.total}</span></span>
                 <span>Uploaded: <span className="text-foreground font-medium">{cartoonCutProgress.uploaded}/{cartoonCutProgress.total}</span></span>
                 {onViewProgress && (
                   <button onClick={onViewProgress} className="ml-auto text-accent hover:underline" data-testid="status-view-progress">

package/app/web/components/StoriesPage.tsx

@@ -7,11 +7,13 @@ import { CartoonWorkflowNav, type CartoonWorkflowTab } from "./CartoonWorkflowNa
 import { StoryInfoPage } from "./StoryInfoPage";
 import { EpisodesPage } from "./EpisodesPage";
 import { CartoonPublishPage } from "./CartoonPublishPage";
+import { CartoonNextAction } from "./CartoonNextAction";
 import { LANGUAGES, GENRES } from "../../../lib/genres";
 import { getContentTypeForPublish, resolveSelectedContentType, needsLegacyProviderRepair, attachCoverToStoryline, derivePublishTitle, shouldBlockDuplicatePlotPublish, isRawFilenameTitle, hasExplicitEpisodeTitle, isPreflightBlocked, formatPreflightBlock } from "../lib/publish-helpers";
 import { verifyPublicCartoonTitle, publicTitleWarning } from "../lib/verify-public-title";
 import { isCodexAuthUnclear, CODEX_AUTH_UNCLEAR_MESSAGE, type AgentReadiness } from "@app-lib/agent-readiness";
 import { cartoonGenesisReadiness } from "@app-lib/cartoon-readiness";
+import type { CoachUiAction } from "@app-lib/cartoon-coach";
 
 interface StoriesPageProps {
   token: string;
@@ -763,6 +765,27 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     }
   }, [selectedStory, handleSelectFile]);
 
+  const handleWorkflowNextAction = useCallback((action: CoachUiAction, episodeFile: string | null) => {
+    const story = selectedStory;
+    if (!story) return;
+    switch (action) {
+      case "view-progress":
+        setCartoonView(null);
+        setSelectedFile(null);
+        break;
+      case "publish":
+        setCartoonView("publish");
+        break;
+      case "open-cuts":
+      case "open-lettering":
+      case "upload":
+      case "refresh-assets":
+      case "generate-markdown":
+        if (episodeFile) handleSelectFile(story, episodeFile);
+        break;
+    }
+  }, [selectedStory, handleSelectFile]);
+
   // Keep the publish-control seeds in sync after a Story Info save (#439).
   const handleStoryInfoSaved = useCallback((patch: { genre?: string; language?: string; isNsfw?: boolean }) => {
     if (!selectedStory) return;
@@ -814,6 +837,17 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
             onSelect={handleCartoonNav}
           />
         )}
+        {isCartoonStory && selectedStory && cartoonView !== null && (
+          <div className="flex-shrink-0 border-b border-border" data-testid="workflow-context-next-action">
+            <CartoonNextAction
+              storyName={selectedStory}
+              authFetch={authFetch}
+              refreshKey={cartoonPublishRefresh}
+              onCoachAction={handleWorkflowNextAction}
+              onOpenStoryInfo={() => setCartoonView("story-info")}
+            />
+          </div>
+        )}
         {isCartoonStory && cartoonView === "story-info" && selectedStory ? (
           <StoryInfoPage storyName={selectedStory} authFetch={authFetch} onSaved={handleStoryInfoSaved} />
         ) : isCartoonStory && cartoonView === "episodes" && selectedStory ? (
@@ -836,6 +870,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
             storyName={selectedStory}
             authFetch={authFetch}
             onOpenFile={handleSelectFile}
+            onOpenStoryInfo={() => setCartoonView("story-info")}
           />
         ) : (
         <PreviewPanel