plotlink-ows 1.2.96 → 1.2.98

package/app/web/components/StoriesPage.tsx

@@ -143,11 +143,16 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     focusedLetteringWorkspaceVisible,
     setFocusedLetteringWorkspaceVisible,
   ] = useState(true);
+  const [workflowActionRequest, setWorkflowActionRequest] = useState<{
+    action: CoachUiAction;
+    seq: number;
+  } | null>(null);
   const contentTypeMap = useRef<Map<string, "fiction" | "cartoon">>(new Map());
   const languageMap = useRef<Map<string, string>>(new Map());
   const agentModeMap = useRef<Map<string, "normal" | "bypass">>(new Map());
   const agentProviderMap = useRef<Map<string, "claude" | "codex">>(new Map());
   const knownStoriesRef = useRef<Set<string>>(new Set());
+  const workflowActionSeqRef = useRef(0);
   const renameRef = useRef<
     | ((
         oldName: string,
@@ -1006,9 +1011,8 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     selectedStory,
   );
 
-  // Cartoon-only right-panel workflow nav (#439). The active tab follows the
-  // open non-file view (Story Info / Episodes) or the closest file: structure.md
-  // ⇒ Whitepaper, genesis.md ⇒ Genesis / Ep 1, plot-NN ⇒ Episodes, else Progress.
+  // Cartoon-only right-panel workflow nav. Cartoon users work from episodes in
+  // the left browser; the top nav stays at story/workflow level only.
   const isCartoonStory = !!selectedStory && selectedContentType === "cartoon";
   const activeCartoonTab: CartoonWorkflowTab =
     cartoonView === "story-info"
@@ -1017,13 +1021,10 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
         ? "episodes"
         : cartoonView === "publish"
           ? "publish"
-          : selectedFile === "structure.md"
-            ? "whitepaper"
-            : selectedFile === "genesis.md"
-              ? "genesis"
-              : selectedFile && /^plot-\d+\.md$/.test(selectedFile)
-                ? "episodes"
-                : "progress";
+          : selectedFile &&
+              (selectedFile === "genesis.md" || /^plot-\d+\.md$/.test(selectedFile))
+            ? "episodes"
+            : "progress";
 
   const handleCartoonNav = useCallback(
     (tab: CartoonWorkflowTab) => {
@@ -1044,12 +1045,6 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
         case "episodes":
           setCartoonView("episodes");
           break;
-        case "whitepaper":
-          handleSelectFile(story, "structure.md");
-          break;
-        case "genesis":
-          handleSelectFile(story, "genesis.md");
-          break;
         // Publish opens its own readiness page and stays on the Publish tab (#449),
         // instead of visually routing to the Genesis file view.
         case "publish":
@@ -1064,6 +1059,13 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     (action: CoachUiAction, episodeFile: string | null) => {
       const story = selectedStory;
       if (!story) return;
+      const queueWorkflowAction = (nextAction: CoachUiAction) => {
+        workflowActionSeqRef.current += 1;
+        setWorkflowActionRequest({
+          action: nextAction,
+          seq: workflowActionSeqRef.current,
+        });
+      };
       switch (action) {
         case "view-progress":
           setCartoonView(null);
@@ -1077,7 +1079,9 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
         case "upload":
         case "refresh-assets":
         case "generate-markdown":
-          if (episodeFile) handleSelectFile(story, episodeFile);
+          if (!episodeFile) return;
+          handleSelectFile(story, episodeFile);
+          queueWorkflowAction(action);
           break;
       }
     },
@@ -1196,7 +1200,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
       {/* Preview — takes remaining space. With a story but no file selected, show
           the story-level progress overview (#418) instead of the empty state. */}
       <div
-        className="min-w-0 flex flex-col"
+        className="min-w-0 min-h-0 flex flex-col"
         style={
           hideFocusedLetteringWorkspace
             ? { flex: "1 0 0" }
@@ -1211,91 +1215,101 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
             onSelect={handleCartoonNav}
           />
         )}
+        <div className="flex-1 min-h-0 flex flex-col">
+          {isCartoonStory && cartoonView === "story-info" && selectedStory ? (
+            <StoryInfoPage
+              storyName={selectedStory}
+              authFetch={authFetch}
+              onSaved={handleStoryInfoSaved}
+            />
+          ) : isCartoonStory && cartoonView === "episodes" && selectedStory ? (
+            <EpisodesPage
+              storyName={selectedStory}
+              authFetch={authFetch}
+              onOpenFile={handleSelectFile}
+            />
+          ) : isCartoonStory && cartoonView === "publish" && selectedStory ? (
+            <CartoonPublishPage
+              storyName={selectedStory}
+              authFetch={authFetch}
+              onOpenFile={handleSelectFile}
+              onOpenStoryInfo={() => setCartoonView("story-info")}
+              onPublish={handlePublish}
+              publishingFile={publishingFile}
+              genre={storyGenres[selectedStory]}
+              language={storyLanguages[selectedStory]}
+              isNsfw={storyNsfw[selectedStory]}
+              refreshKey={cartoonPublishRefresh}
+            />
+          ) : selectedStory && !selectedFile ? (
+            <StoryProgressPanel
+              storyName={selectedStory}
+              authFetch={authFetch}
+              onOpenFile={handleSelectFile}
+            />
+          ) : (
+            <PreviewPanel
+              storyName={selectedStory}
+              fileName={selectedFile}
+              authFetch={authFetch}
+              onPublish={handlePublish}
+              publishingFile={publishingFile}
+              walletAddress={walletAddress}
+              contentType={
+                resolveSelectedContentType(
+                  selectedStory,
+                  storyContentTypes,
+                  contentTypeMap.current,
+                ) || "fiction"
+              }
+              language={selectedStory ? storyLanguages[selectedStory] : undefined}
+              genre={selectedStory ? storyGenres[selectedStory] : undefined}
+              isNsfw={selectedStory ? storyNsfw[selectedStory] : undefined}
+              hasGenesis={
+                selectedStory ? genesisStories.has(selectedStory) : false
+              }
+              onViewProgress={() => setSelectedFile(null)}
+              onOpenFile={(file) =>
+                selectedStory && handleSelectFile(selectedStory, file)
+              }
+              onViewPublish={() => setCartoonView("publish")}
+              focusedLetteringMode={focusedLetteringMode}
+              focusedLetteringWorkspaceVisible={focusedLetteringWorkspaceVisible}
+              onFocusedLetteringModeChange={handleFocusedLetteringModeChange}
+              onFocusedLetteringWorkspaceVisibleChange={
+                setFocusedLetteringWorkspaceVisible
+              }
+              workflowActionRequest={workflowActionRequest}
+              onWorkflowActionHandled={(seq) =>
+                setWorkflowActionRequest((prev) =>
+                  prev?.seq === seq ? null : prev,
+                )
+              }
+            />
+          )}
+        </div>
         {!focusedLetteringMode &&
           isCartoonStory &&
           selectedStory &&
-          cartoonView !== null && (
-            <div
-              className="flex-shrink-0 border-b border-border"
-              data-testid="workflow-context-next-action"
-            >
+          !selectedFile && (
+          <div
+            className="pointer-events-none absolute bottom-4 right-4 z-10 w-[min(22rem,calc(100%-2rem))]"
+            data-testid="workflow-persistent-next-action"
+          >
+            <div className="pointer-events-auto rounded-xl border border-border/80 bg-background/95 shadow-lg backdrop-blur">
               <CartoonNextAction
                 storyName={selectedStory}
+                fileName={cartoonView === null ? selectedFile : null}
                 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 ? (
-          <EpisodesPage
-            storyName={selectedStory}
-            authFetch={authFetch}
-            onOpenFile={handleSelectFile}
-          />
-        ) : isCartoonStory && cartoonView === "publish" && selectedStory ? (
-          <CartoonPublishPage
-            storyName={selectedStory}
-            authFetch={authFetch}
-            onOpenFile={handleSelectFile}
-            onOpenStoryInfo={() => setCartoonView("story-info")}
-            onPublish={handlePublish}
-            publishingFile={publishingFile}
-            genre={storyGenres[selectedStory]}
-            language={storyLanguages[selectedStory]}
-            isNsfw={storyNsfw[selectedStory]}
-            refreshKey={cartoonPublishRefresh}
-          />
-        ) : selectedStory && !selectedFile ? (
-          <StoryProgressPanel
-            storyName={selectedStory}
-            authFetch={authFetch}
-            onOpenFile={handleSelectFile}
-            onOpenStoryInfo={() => setCartoonView("story-info")}
-          />
-        ) : (
-          <PreviewPanel
-            storyName={selectedStory}
-            fileName={selectedFile}
-            authFetch={authFetch}
-            onPublish={handlePublish}
-            publishingFile={publishingFile}
-            walletAddress={walletAddress}
-            contentType={
-              resolveSelectedContentType(
-                selectedStory,
-                storyContentTypes,
-                contentTypeMap.current,
-              ) || "fiction"
-            }
-            language={selectedStory ? storyLanguages[selectedStory] : undefined}
-            genre={selectedStory ? storyGenres[selectedStory] : undefined}
-            isNsfw={selectedStory ? storyNsfw[selectedStory] : undefined}
-            hasGenesis={
-              selectedStory ? genesisStories.has(selectedStory) : false
-            }
-            onViewProgress={() => setSelectedFile(null)}
-            onOpenFile={(file) =>
-              selectedStory && handleSelectFile(selectedStory, file)
-            }
-            onViewPublish={() => setCartoonView("publish")}
-            focusedLetteringMode={focusedLetteringMode}
-            focusedLetteringWorkspaceVisible={focusedLetteringWorkspaceVisible}
-            onFocusedLetteringModeChange={handleFocusedLetteringModeChange}
-            onFocusedLetteringWorkspaceVisibleChange={
-              setFocusedLetteringWorkspaceVisible
-            }
-          />
+          </div>
         )}
         {publishProgress && (
-          <div className="px-3 py-1.5 bg-surface border-t border-border text-xs text-muted">
+          <div className="shrink-0 px-3 py-1.5 bg-surface border-t border-border text-xs text-muted">
             {publishProgress}
           </div>
         )}
@@ -1304,7 +1318,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
             doesn't disappear on a timer. */}
         {publishError && (
           <div
-            className="px-3 py-2 bg-error/10 border-t border-error/40 text-xs text-error flex items-start justify-between gap-3"
+            className="shrink-0 px-3 py-2 bg-error/10 border-t border-error/40 text-xs text-error flex items-start justify-between gap-3"
             data-testid="publish-block-error"
             role="alert"
           >

package/app/web/components/StoryBrowser.tsx

@@ -124,6 +124,22 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     return files[0]?.file ?? null;
   };
 
+  const isEpisodeFile = (file: string) =>
+    file === "genesis.md" || /^plot-\d+\.md$/.test(file);
+
+  const cartoonEpisodeMeta = (file: string): { label: string; sort: number } | null => {
+    if (file === "genesis.md") {
+      return { label: "epi-01 (Genesis)", sort: 1 };
+    }
+    const m = file.match(/^plot-(\d+)\.md$/);
+    if (!m) return null;
+    const n = parseInt(m[1], 10) + 1;
+    return {
+      label: `epi-${String(n).padStart(2, "0")}`,
+      sort: n,
+    };
+  };
+
   const handleStoryClick = (story: StoryInfo) => {
     toggleExpand(story.name);
     // Cartoon: a root-row click opens the story-level progress overview (#418) on
@@ -139,8 +155,18 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     }
   };
 
-  // Sort files: structure first, genesis, then plots in order
-  const sortFiles = (files: FileStatus[]) => {
+  // Sort files: structure first, genesis, then plots in order. Cartoon stories
+  // show only episode files to avoid leaking the markdown implementation model.
+  const sortFiles = (files: FileStatus[], contentType?: "fiction" | "cartoon") => {
+    if (contentType === "cartoon") {
+      return [...files]
+        .filter((f) => isEpisodeFile(f.file))
+        .sort((a, b) => {
+          const aa = cartoonEpisodeMeta(a.file)?.sort ?? 999;
+          const bb = cartoonEpisodeMeta(b.file)?.sort ?? 999;
+          return aa - bb;
+        });
+    }
     const order = (f: string) => {
       if (f === "structure.md") return 0;
       if (f === "genesis.md") return 1;
@@ -238,27 +264,35 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
                 {story.contentType === "cartoon" && (
                   <span className="bg-accent/10 text-accent rounded px-1.5 py-0.5 text-[10px] font-medium flex-shrink-0">Cartoon</span>
                 )}
-                <span className="ml-auto flex-shrink-0 text-xs text-muted">
-                  {story.publishedCount}/{story.files.length}
-                </span>
-              </button>
-              {expanded.has(story.name) && (
-                <div className="pl-4">
-                  {sortFiles(story.files).map((f) => {
-                    const isSelected = selectedStory === story.name && selectedFile === f.file;
-                    return (
-                      <button
-                        key={f.file}
+	                <span className="ml-auto flex-shrink-0 text-xs text-muted">
+	                  {story.contentType === "cartoon"
+	                    ? `${sortFiles(story.files, "cartoon").length} ep`
+	                    : `${story.publishedCount}/${story.files.length}`}
+	                </span>
+	              </button>
+	              {expanded.has(story.name) && (
+	                <div className="pl-4">
+	                  {sortFiles(story.files, story.contentType).map((f) => {
+	                    const isSelected = selectedStory === story.name && selectedFile === f.file;
+	                    const cartoonMeta =
+	                      story.contentType === "cartoon"
+	                        ? cartoonEpisodeMeta(f.file)
+	                        : null;
+	                    return (
+	                      <button
+	                        key={f.file}
                         onClick={() => onSelectFile(story.name, f.file)}
                         className={`w-full px-3 py-1.5 text-left flex items-center gap-2 text-xs hover:bg-surface ${
                           isSelected ? "bg-surface font-medium" : ""
                         }`}
-                      >
-                        <span className={STATUS_COLOR[f.status]}>{STATUS_ICON[f.status]}</span>
-                        <span className="truncate font-mono">{f.file}</span>
-                      </button>
-                    );
-                  })}
+	                      >
+	                        <span className={STATUS_COLOR[f.status]}>{STATUS_ICON[f.status]}</span>
+	                        <span className={story.contentType === "cartoon" ? "truncate" : "truncate font-mono"}>
+	                          {cartoonMeta?.label ?? f.file}
+	                        </span>
+	                      </button>
+	                    );
+	                  })}
                 </div>
               )}
             </div>

package/app/web/components/StoryInfoPage.tsx

@@ -152,8 +152,37 @@ export function StoryInfoPage({ storyName, authFetch, onSaved }: StoryInfoPagePr
 
   return (
     <div className="h-full overflow-y-auto px-4 py-4" data-testid="story-info-page">
-      <h2 className="text-base font-serif text-foreground">Story Info</h2>
-      <p className="mt-0.5 text-[11px] text-muted">These details appear on PlotLink when the story is published.</p>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-base font-serif text-foreground">Story Info</h2>
+          <p className="mt-0.5 text-[11px] text-muted">These details appear on PlotLink when the story is published.</p>
+          <div className="mt-2 flex flex-wrap gap-1.5 text-[10px]">
+            <span className={`rounded-full border px-2 py-0.5 ${title.trim() ? "border-green-700/30 bg-green-700/10 text-green-700" : "border-border bg-background text-muted"}`}>
+              Title {title.trim() ? "ready" : "missing"}
+            </span>
+            <span className={`rounded-full border px-2 py-0.5 ${genre ? "border-green-700/30 bg-green-700/10 text-green-700" : "border-border bg-background text-muted"}`}>
+              Genre {genre ? "set" : "needed"}
+            </span>
+            <span className={`rounded-full border px-2 py-0.5 ${language ? "border-green-700/30 bg-green-700/10 text-green-700" : "border-border bg-background text-muted"}`}>
+              Language {language ? "set" : "needed"}
+            </span>
+            <span className={`rounded-full border px-2 py-0.5 ${cover === "present" ? "border-green-700/30 bg-green-700/10 text-green-700" : "border-border bg-background text-muted"}`}>
+              {cover === "present" ? "Cover ready" : "Cover missing"}
+            </span>
+          </div>
+        </div>
+        <div className="flex flex-col items-start gap-1.5">
+          <button
+            type="button" onClick={handleSave} disabled={saving}
+            data-testid="story-info-save"
+            className="rounded bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent-dim transition-colors disabled:opacity-50"
+          >
+            {saving ? "Saving…" : "Save Story Info"}
+          </button>
+          {saved && <span className="text-[11px] text-green-700" data-testid="story-info-saved">Saved</span>}
+          {saveError && <span className="text-[11px] text-error" data-testid="story-info-error">{saveError}</span>}
+        </div>
+      </div>
 
       <div className="mt-4 flex flex-col gap-4 max-w-xl">
         <label className="flex flex-col gap-1">
@@ -248,18 +277,6 @@ export function StoryInfoPage({ storyName, authFetch, onSaved }: StoryInfoPagePr
           />
           <span className="text-xs text-foreground">This story contains adult content (18+)</span>
         </label>
-
-        <div className="flex items-center gap-3">
-          <button
-            type="button" onClick={handleSave} disabled={saving}
-            data-testid="story-info-save"
-            className="rounded bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent-dim transition-colors disabled:opacity-50"
-          >
-            {saving ? "Saving…" : "Save Story Info"}
-          </button>
-          {saved && <span className="text-[11px] text-green-700" data-testid="story-info-saved">Saved</span>}
-          {saveError && <span className="text-[11px] text-error" data-testid="story-info-error">{saveError}</span>}
-        </div>
       </div>
     </div>
   );

package/app/web/components/StoryProgressPanel.tsx

@@ -1,15 +1,14 @@
 import { useEffect, useState } from "react";
 import type { StoryProgress, EpisodeProgress, EpisodeState } from "@app-lib/story-progress";
 import type { CartoonChecklistStep } from "@app-lib/cartoon-readiness";
-import { cartoonWorkflowActiveKey, CartoonNextActionView } from "./CartoonNextAction";
+import { buildCartoonProductionStatus } from "@app-lib/cartoon-production-status";
+import { cartoonWorkflowActiveKey } from "./CartoonNextAction";
 
 interface StoryProgressPanelProps {
   storyName: string;
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
   /** Open a file from the map (the workflow steps link to their file). */
   onOpenFile: (storyName: string, file: string) => void;
-  /** Open the Story Info workflow page when metadata/cover is the next gate. */
-  onOpenStoryInfo?: () => void;
   /** Bumped by the parent to force a refresh (e.g. after a publish). */
   refreshKey?: number;
 }
@@ -20,13 +19,13 @@ interface StoryProgressPanelProps {
  * For CARTOON stories this is the writer's main production dashboard: a vertical
  * workflow map of numbered sections (Define Story Info → Story Whitepaper →
  * Genesis / Episode 1 → Episode 2 …), each with a checkbox checklist and a clear
- * status. The single next-action CTA stays persistent above the map, while the
- * current section still marks where that action belongs.
+ * status. The shell owns the single persistent next-action CTA, while the current
+ * section still marks where that action belongs.
  *
  * FICTION keeps the simpler original layout — metadata, setup steps, a chapter
  * list — and is completely unaffected by the cartoon redesign.
  */
-export function StoryProgressPanel({ storyName, authFetch, onOpenFile, onOpenStoryInfo, refreshKey = 0 }: StoryProgressPanelProps) {
+export function StoryProgressPanel({ storyName, authFetch, onOpenFile, refreshKey = 0 }: StoryProgressPanelProps) {
   const [progress, setProgress] = useState<StoryProgress | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -56,7 +55,7 @@ export function StoryProgressPanel({ storyName, authFetch, onOpenFile, onOpenSto
   }
 
   return progress.contentType === "cartoon"
-    ? <CartoonWorkflowMap progress={progress} storyName={storyName} onOpenFile={onOpenFile} onOpenStoryInfo={onOpenStoryInfo} />
+    ? <CartoonWorkflowMap progress={progress} storyName={storyName} onOpenFile={onOpenFile} />
     : <FictionProgressView progress={progress} storyName={storyName} onOpenFile={onOpenFile} />;
 }
 
@@ -138,7 +137,7 @@ function Section({
   title: string;
   status: SectionStatus;
   items: ChecklistItem[];
-  /** Power-user secondary text (real file name), shown small. */
+  /** Secondary text, shown small. */
   fileName?: string | null;
   /** Called to open the section's underlying file, or undefined for no navigation. */
   openFile?: () => void;
@@ -172,6 +171,14 @@ function episodeStatus(ep: EpisodeProgress, isActive: boolean): SectionStatus {
   return "needs-action";
 }
 
+function episodeDisplayLabel(ep: EpisodeProgress): string {
+  if (ep.file === "genesis.md") return "epi-01 (Genesis)";
+  const m = ep.file.match(/^plot-(\d+)\.md$/);
+  if (!m) return ep.label;
+  const episodeNumber = parseInt(m[1], 10) + 1;
+  return `epi-${String(episodeNumber).padStart(2, "0")}`;
+}
+
 /** Build the rendered checklist for a cartoon episode from its production checklist. */
 function episodeItems(ep: EpisodeProgress, openingDone = true): ChecklistItem[] {
   const steps = ep.checklist ?? [];
@@ -203,12 +210,11 @@ const GENESIS_STUB: EpisodeProgress = {
 };
 
 function CartoonWorkflowMap({
-  progress, storyName, onOpenFile, onOpenStoryInfo,
+  progress, storyName, onOpenFile,
 }: {
   progress: StoryProgress;
   storyName: string;
   onOpenFile: (storyName: string, file: string) => void;
-  onOpenStoryInfo?: () => void;
 }) {
   const m = progress.metadata;
   const hasStructure = progress.setup.hasStructure;
@@ -217,17 +223,6 @@ function CartoonWorkflowMap({
   const storyInfoIncomplete = metadataIncomplete || !coverDone;
   const activeKey = cartoonWorkflowActiveKey(progress);
 
-  const topNextAction = (
-    <CartoonNextActionView
-      progress={progress}
-      onOpenStoryInfo={onOpenStoryInfo}
-      onCoachAction={(action, episodeFile) => {
-        if (action === "view-progress") return; // already here
-        if (episodeFile) onOpenFile(storyName, episodeFile);
-      }}
-    />
-  );
-
   const infoItems: ChecklistItem[] = [
     { label: "Public title", status: m.title ? "done" : "todo", detail: m.title ?? null },
     { label: "Language", status: m.language ? "done" : "todo", detail: m.language ?? null },
@@ -245,9 +240,6 @@ function CartoonWorkflowMap({
   return (
     <div className="h-full overflow-y-auto" data-testid="story-progress-panel">
       <ProgressHeader progress={progress} />
-      <div className="border-b border-border" data-testid="persistent-next-action">
-        {topNextAction}
-      </div>
       <p className="px-4 pt-3 pb-1 text-[11px] font-medium text-muted uppercase tracking-wider">Production Progress</p>
 
       <Section
@@ -259,9 +251,8 @@ function CartoonWorkflowMap({
 
       <Section
         index={++idx}
-        title="Story Whitepaper"
+        title="Story Bible"
         status={whitepaperStatus}
-        fileName="structure.md"
         openFile={hasStructure ? () => onOpenFile(storyName, "structure.md") : undefined}
         items={[{ label: "Planning document", status: hasStructure ? "done" : "todo", detail: hasStructure ? null : "Not written yet" }]}
       />
@@ -313,12 +304,17 @@ function EpisodeSection({
 }) {
   const status = episodeStatus(ep, isActive);
   const items = episodeItems(ep, openingDone);
-  const title = ep.title ? `${ep.label} · ${ep.title}` : ep.label;
+  const production = buildCartoonProductionStatus({
+    checklist: ep.checklist ? { steps: ep.checklist, nextStep: null } : null,
+    markdownReady: ep.state === "ready" || ep.published,
+    published: ep.published,
+  });
+  const label = episodeDisplayLabel(ep);
+  const title = ep.title ? `${label} · ${ep.title}` : label;
   const heading = (
     <div className="flex items-center gap-2 min-w-0">
       <span className={`flex-shrink-0 ${SECTION_TONE[status]}`} aria-hidden>{SECTION_ICON[status]}</span>
       <span className="text-xs font-medium text-foreground truncate">{index}. {title}</span>
-      <span className="text-[10px] text-muted truncate">{ep.file}</span>
       <span className={`ml-auto text-[10px] font-medium ${SECTION_TONE[status]} flex-shrink-0`}>{SECTION_LABEL[status]}</span>
     </div>
   );
@@ -336,6 +332,13 @@ function EpisodeSection({
       ) : (
         <div data-state={ep.state}>{heading}</div>
       )}
+      {production?.statusLabel && (
+        <div className="mt-1 ml-1 text-[10px] text-muted">
+          <span className="font-medium text-foreground">Active step:</span>{" "}
+          {production.statusLabel}
+          {production.activeStep?.detail ? ` · ${production.activeStep.detail}` : ""}
+        </div>
+      )}
       <div className="mt-1.5 ml-1 flex flex-col gap-1 border-l border-border pl-3">
         {items.map((it, i) => <ChecklistRow key={i} item={it} />)}
       </div>

package/app/web/dist/assets/{export-cut-BqZI0-Rv.js → export-cut-DVpOZ5AO.js}

@@ -1 +1 @@
-import{M as w,v as O,t as A,c as M,b as R,s as H,l as I,a as B,d as F}from"./index-C43toXVm.js";const z=w;async function G(e){if(typeof document>"u"||!document.fonts||typeof document.fonts.load!="function")return{ready:!0,missing:[]};const n=[];for(const s of e)try{const t=await document.fonts.load(`16px "${s}"`);!t||t.length===0?n.push(s):document.fonts.check(`16px "${s}"`)||n.push(s)}catch{n.push(s)}return{ready:n.length===0,missing:n}}function C(e){return new Promise((n,s)=>{const t=new Image;t.crossOrigin="anonymous",t.onload=()=>n(t),t.onerror=()=>s(new Error("Failed to load image")),t.src=e})}const W="rgba(255, 255, 255, 0.95)",_="#1a1a1a",L="rgba(244, 239, 230, 0.94)",N="rgba(26, 26, 26, 0.55)";function Y(e){return Math.max(2,e*.004)}function K(e,n,s,t,c,d,f){e.beginPath();for(const o of F(n,s,t,c,d,f))o.k==="M"?e.moveTo(o.x,o.y):o.k==="L"?e.lineTo(o.x,o.y):e.arcTo(o.cornerX,o.cornerY,o.x,o.y,o.r);e.closePath()}function P(e,n,s,t,c,d){var f;for(const o of n){const l=o.x*s,i=o.y*t,r=o.width*s,a=o.height*t,y=Y(t);if(o.type==="speech"){const u=R(o,r,a),k=o.tailAnchor?H(l,i,r,a,o.tailAnchor,u):null;K(e,l,i,r,a,k,u),e.fillStyle=W,e.fill(),e.strokeStyle=_,e.lineWidth=y,e.lineJoin="round",e.stroke()}else if(o.type==="narration"){const u=Math.min(r,a)*.12;e.beginPath(),e.roundRect(l,i,r,a,u),e.fillStyle=L,e.fill(),e.strokeStyle=N,e.lineWidth=Math.max(1.5,y*.75),e.lineJoin="round",e.stroke()}const g=o.type==="sfx"?d:c,T=o.type!=="sfx"&&!!o.speaker,h=I((u,k,E=400)=>(e.font=`${E} ${k}px ${g}`,e.measureText(u).width),o.text,r,a,B(o,t,r,a));e.textAlign="center",e.textBaseline="middle";const p=l+r/2,S=T?h.speakerFontSize*1.2:0;T&&(e.fillStyle="#3a3a3a",e.font=`700 ${h.speakerFontSize}px ${g}`,e.fillText(o.speaker,p,i+S/2+a*.04,r-6));const v=i+S,b=a-S,$=h.lines.length*h.lineHeight;let m=v+b/2-$/2+h.lineHeight/2;e.font=`${((f=o.textStyle)==null?void 0:f.fontWeight)??400} ${h.fontSize}px ${g}`;for(const u of h.lines)o.type==="sfx"?(e.fillStyle="#000",e.strokeStyle="#fff",e.lineWidth=3,e.strokeText(u,p,m),e.fillText(u,p,m)):(e.fillStyle="#1a1a1a",e.fillText(u,p,m)),m+=h.lineHeight}}function X(e,n,s,t,c){const d=Math.max(14,Math.min(t*.05,28));e.font=`${d}px ${c}`,e.fillStyle="#1a1a1a",e.textAlign="center",e.textBaseline="middle";const f=[];if(n.dialogue)for(const i of n.dialogue)f.push(`${i.speaker}: ${i.text}`);n.narration&&f.push(n.narration);const o=d*1.6,l=t/2-(f.length-1)*o/2;for(let i=0;i<f.length;i++)e.fillText(f[i],s/2,l+i*o,s-40)}async function Z(e,n,s,t,c,d){const f=O(n);if(!f.valid)throw new Error(f.error??"Overlay geometry is invalid");let o=800,l=600,i=null;if(e)i=await C(e),o=i.naturalWidth,l=i.naturalHeight;else if(d){const y=A(d.aspectRatio);y&&(o=y.width,l=y.height)}const r=document.createElement("canvas");r.width=o,r.height=l;const a=r.getContext("2d");return i?a.drawImage(i,0,0,o,l):(a.fillStyle=(d==null?void 0:d.background)||"#ffffff",a.fillRect(0,0,o,l)),P(a,n,o,l,s,t),c&&n.length===0&&!i&&X(a,c,o,l,s),M(r)}function j(e){return e.size>z?{valid:!1,error:`Image is ${(e.size/1024).toFixed(0)}KB, exceeds 1MB limit`}:{valid:!0}}export{z as MAX_SIZE,G as ensureFontsReady,Z as exportCut,P as renderOverlays,A as textPanelDimensions,j as validateExportSize};
+import{M as w,v as O,t as A,c as M,b as R,s as H,l as I,a as B,d as F}from"./index-CoG6WKyb.js";const z=w;async function G(e){if(typeof document>"u"||!document.fonts||typeof document.fonts.load!="function")return{ready:!0,missing:[]};const n=[];for(const s of e)try{const t=await document.fonts.load(`16px "${s}"`);!t||t.length===0?n.push(s):document.fonts.check(`16px "${s}"`)||n.push(s)}catch{n.push(s)}return{ready:n.length===0,missing:n}}function C(e){return new Promise((n,s)=>{const t=new Image;t.crossOrigin="anonymous",t.onload=()=>n(t),t.onerror=()=>s(new Error("Failed to load image")),t.src=e})}const W="rgba(255, 255, 255, 0.95)",_="#1a1a1a",L="rgba(244, 239, 230, 0.94)",N="rgba(26, 26, 26, 0.55)";function Y(e){return Math.max(2,e*.004)}function K(e,n,s,t,c,d,f){e.beginPath();for(const o of F(n,s,t,c,d,f))o.k==="M"?e.moveTo(o.x,o.y):o.k==="L"?e.lineTo(o.x,o.y):e.arcTo(o.cornerX,o.cornerY,o.x,o.y,o.r);e.closePath()}function P(e,n,s,t,c,d){var f;for(const o of n){const l=o.x*s,i=o.y*t,r=o.width*s,a=o.height*t,y=Y(t);if(o.type==="speech"){const u=R(o,r,a),k=o.tailAnchor?H(l,i,r,a,o.tailAnchor,u):null;K(e,l,i,r,a,k,u),e.fillStyle=W,e.fill(),e.strokeStyle=_,e.lineWidth=y,e.lineJoin="round",e.stroke()}else if(o.type==="narration"){const u=Math.min(r,a)*.12;e.beginPath(),e.roundRect(l,i,r,a,u),e.fillStyle=L,e.fill(),e.strokeStyle=N,e.lineWidth=Math.max(1.5,y*.75),e.lineJoin="round",e.stroke()}const g=o.type==="sfx"?d:c,T=o.type!=="sfx"&&!!o.speaker,h=I((u,k,E=400)=>(e.font=`${E} ${k}px ${g}`,e.measureText(u).width),o.text,r,a,B(o,t,r,a));e.textAlign="center",e.textBaseline="middle";const p=l+r/2,S=T?h.speakerFontSize*1.2:0;T&&(e.fillStyle="#3a3a3a",e.font=`700 ${h.speakerFontSize}px ${g}`,e.fillText(o.speaker,p,i+S/2+a*.04,r-6));const v=i+S,b=a-S,$=h.lines.length*h.lineHeight;let m=v+b/2-$/2+h.lineHeight/2;e.font=`${((f=o.textStyle)==null?void 0:f.fontWeight)??400} ${h.fontSize}px ${g}`;for(const u of h.lines)o.type==="sfx"?(e.fillStyle="#000",e.strokeStyle="#fff",e.lineWidth=3,e.strokeText(u,p,m),e.fillText(u,p,m)):(e.fillStyle="#1a1a1a",e.fillText(u,p,m)),m+=h.lineHeight}}function X(e,n,s,t,c){const d=Math.max(14,Math.min(t*.05,28));e.font=`${d}px ${c}`,e.fillStyle="#1a1a1a",e.textAlign="center",e.textBaseline="middle";const f=[];if(n.dialogue)for(const i of n.dialogue)f.push(`${i.speaker}: ${i.text}`);n.narration&&f.push(n.narration);const o=d*1.6,l=t/2-(f.length-1)*o/2;for(let i=0;i<f.length;i++)e.fillText(f[i],s/2,l+i*o,s-40)}async function Z(e,n,s,t,c,d){const f=O(n);if(!f.valid)throw new Error(f.error??"Overlay geometry is invalid");let o=800,l=600,i=null;if(e)i=await C(e),o=i.naturalWidth,l=i.naturalHeight;else if(d){const y=A(d.aspectRatio);y&&(o=y.width,l=y.height)}const r=document.createElement("canvas");r.width=o,r.height=l;const a=r.getContext("2d");return i?a.drawImage(i,0,0,o,l):(a.fillStyle=(d==null?void 0:d.background)||"#ffffff",a.fillRect(0,0,o,l)),P(a,n,o,l,s,t),c&&n.length===0&&!i&&X(a,c,o,l,s),M(r)}function j(e){return e.size>z?{valid:!1,error:`Image is ${(e.size/1024).toFixed(0)}KB, exceeds 1MB limit`}:{valid:!0}}export{z as MAX_SIZE,G as ensureFontsReady,Z as exportCut,P as renderOverlays,A as textPanelDimensions,j as validateExportSize};