plotlink-ows 1.2.94 → 1.2.96

package/app/web/components/StoryProgressPanel.tsx

@@ -1,13 +1,15 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useState } from "react";
 import type { StoryProgress, EpisodeProgress, EpisodeState } from "@app-lib/story-progress";
 import type { CartoonChecklistStep } from "@app-lib/cartoon-readiness";
-import { WorkflowCoachView } from "./WorkflowCoach";
+import { cartoonWorkflowActiveKey, CartoonNextActionView } 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;
 }
@@ -18,15 +20,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 is rendered inside the section it belongs to
- * (never a duplicated global bar), so a first-time creator understands the whole
- * webtoon workflow and where they are in it without reading terminal output or
- * raw file names.
+ * status. The single next-action CTA stays persistent above the map, 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, refreshKey = 0 }: StoryProgressPanelProps) {
+export function StoryProgressPanel({ storyName, authFetch, onOpenFile, onOpenStoryInfo, refreshKey = 0 }: StoryProgressPanelProps) {
   const [progress, setProgress] = useState<StoryProgress | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -56,7 +56,7 @@ export function StoryProgressPanel({ storyName, authFetch, onOpenFile, refreshKe
   }
 
   return progress.contentType === "cartoon"
-    ? <CartoonWorkflowMap progress={progress} storyName={storyName} onOpenFile={onOpenFile} />
+    ? <CartoonWorkflowMap progress={progress} storyName={storyName} onOpenFile={onOpenFile} onOpenStoryInfo={onOpenStoryInfo} />
     : <FictionProgressView progress={progress} storyName={storyName} onOpenFile={onOpenFile} />;
 }
 
@@ -128,13 +128,11 @@ function ChecklistRow({ item }: { item: ChecklistItem }) {
 }
 
 /**
- * One numbered workflow section: a status bullet + title + status badge, a nested
- * checklist, and — only for the active section — the single next-action CTA. The
- * header navigates to `openFile` when one is provided (sections whose dedicated
- * page does not exist yet, e.g. Story Info, render a plain header).
+ * One numbered workflow section: a status bullet + title + status badge, plus a
+ * nested checklist. The header navigates to `openFile` when one is provided.
  */
 function Section({
-  index, title, status, items, fileName, openFile, cta,
+  index, title, status, items, fileName, openFile,
 }: {
   index: number;
   title: string;
@@ -144,8 +142,6 @@ function Section({
   fileName?: string | null;
   /** Called to open the section's underlying file, or undefined for no navigation. */
   openFile?: () => void;
-  /** The single CTA node, rendered under this section when it is the active one. */
-  cta?: ReactNode;
 }) {
   const heading = (
     <div className="flex items-center gap-2 min-w-0">
@@ -163,7 +159,6 @@ function Section({
       <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>
-      {cta && <div className="mt-2 ml-1" data-testid="section-cta">{cta}</div>}
     </div>
   );
 }
@@ -207,89 +202,32 @@ const GENESIS_STUB: EpisodeProgress = {
   state: "placeholder", summary: "", published: false, checklist: [], cuts: null,
 };
 
-/** The single Story-Info next step, when cover/metadata is the active gate. */
-function storyInfoNextStep(progress: StoryProgress): string {
-  if (progress.cover !== "present") {
-    return progress.cover === "invalid"
-      ? "Replace the cover image — it must be a valid WebP or JPEG."
-      : "Add a cover image before publishing.";
-  }
-  const missing: string[] = [];
-  if (!progress.metadata.language) missing.push("language");
-  if (!progress.metadata.genre) missing.push("genre");
-  if (!progress.metadata.title) missing.push("title");
-  return `Add the story ${missing.join(" and ") || "details"} before publishing.`;
-}
-
 function CartoonWorkflowMap({
-  progress, storyName, onOpenFile,
-}: { progress: StoryProgress; storyName: string; onOpenFile: (storyName: string, file: string) => void }) {
-  const coach = progress.coach ?? null;
+  progress, storyName, onOpenFile, onOpenStoryInfo,
+}: {
+  progress: StoryProgress;
+  storyName: string;
+  onOpenFile: (storyName: string, file: string) => void;
+  onOpenStoryInfo?: () => void;
+}) {
   const m = progress.metadata;
   const hasStructure = progress.setup.hasStructure;
-  const hasGenesis = progress.setup.hasGenesis;
   const coverDone = progress.cover === "present";
-  // Required publish metadata (title/language/genre) still hard-gates the active
-  // step. A missing COVER is a publish-readiness recommendation, NOT the primary
-  // step (#462) — it's kept out of the active-gate decision while an episode is
-  // mid-production, so the cut/lettering production CTA leads instead.
   const metadataIncomplete = !m.title || !m.language || !m.genre;
   const storyInfoIncomplete = metadataIncomplete || !coverDone;
-  // The active (first unpublished) episode and whether it still has production
-  // work to do (anything short of publish-ready).
-  const activeEp = progress.episodes.find((e) => !e.published) ?? null;
-  const productionPending = !!activeEp && activeEp.state !== "ready";
-
-  // The SINGLE active gate, chosen in the same order buildStoryProgress derives
-  // its next step (structure → genesis → story info/cover → active episode), so
-  // the one CTA always matches the story-level next action and lands in its own
-  // section. `deriveCartoonCoach` agrees on every gate EXCEPT story info (it
-  // skips cover/metadata), so we own that gate here; the coach drives the rest.
-  // Crucially, every gate maps to a section that is ALWAYS rendered (Whitepaper,
-  // the always-present Genesis section, an episode, or the trailing block), so
-  // the CTA can never fall through the cracks (#444 review: it vanished when the
-  // bible was written but Genesis wasn't).
-  let activeKey: string | null;
-  if (!hasStructure) activeKey = "whitepaper";
-  else if (!hasGenesis) activeKey = "genesis.md";
-  else if (metadataIncomplete) activeKey = "story-info";
-  // #462: a mid-production episode leads over a missing cover — the cut/lettering
-  // production CTA is the primary step. A missing cover only becomes the active
-  // step once the active episode's production is complete (no work pending),
-  // where it reads as the publish-readiness recommendation.
-  else if (productionPending && coach?.episodeFile) activeKey = coach.episodeFile;
-  else if (!coverDone) activeKey = "story-info";
-  else activeKey = coach?.episodeFile ?? null;
-
-  // The coach-driven CTA (setup prompts + episode actions), reused from the
-  // tested coach view so routing stays byte-identical to the old overview.
-  const coachCta = coach ? (
-    <WorkflowCoachView
-      coach={coach}
-      onAction={(action, episodeFile) => {
+  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);
       }}
     />
-  ) : null;
-
-  // Story Info owns the CTA when metadata/cover is the gate. There is no
-  // dedicated Story Info page yet (#439/§4) and the coach carries no cover
-  // action, so this is an informational next-step line (not a route) — still the
-  // one and only CTA, placed in the relevant section.
-  const storyInfoCta = (
-    <div className="flex items-center gap-2 px-3 py-2 bg-accent/5 border border-accent/30 rounded text-xs" data-testid="story-info-cta">
-      <span className="rounded-full bg-background px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-accent flex-shrink-0">Story info</span>
-      <span className="min-w-0 flex-1 text-foreground"><span className="text-muted">Next: </span><span className="font-medium">{storyInfoNextStep(progress)}</span></span>
-    </div>
   );
 
-  // Return the one CTA for a section, or null — guarantees a single visible CTA.
-  const ctaFor = (key: string): ReactNode => {
-    if (key !== activeKey) return null;
-    return activeKey === "story-info" ? storyInfoCta : coachCta;
-  };
-
   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 },
@@ -307,6 +245,9 @@ 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
@@ -314,7 +255,6 @@ function CartoonWorkflowMap({
         title="Define Story Info"
         status={infoStatus}
         items={infoItems}
-        cta={ctaFor("story-info") ?? undefined}
       />
 
       <Section
@@ -324,7 +264,6 @@ function CartoonWorkflowMap({
         fileName="structure.md"
         openFile={hasStructure ? () => onOpenFile(storyName, "structure.md") : undefined}
         items={[{ label: "Planning document", status: hasStructure ? "done" : "todo", detail: hasStructure ? null : "Not written yet" }]}
-        cta={ctaFor("whitepaper") ?? undefined}
       />
 
       {/* Genesis / Episode 1 — always shown (a not-started stub before it's
@@ -332,29 +271,22 @@ function CartoonWorkflowMap({
       {genesisEp ? (
         <EpisodeSection
           index={++idx} ep={genesisEp} isActive={activeKey === genesisEp.file}
-          storyName={storyName} onOpenFile={onOpenFile} cta={ctaFor(genesisEp.file) ?? undefined}
+          storyName={storyName} onOpenFile={onOpenFile}
         />
       ) : (
         <EpisodeSection
           index={++idx} ep={GENESIS_STUB} isActive={activeKey === "genesis.md"} openingDone={false} canOpen={false}
-          storyName={storyName} onOpenFile={onOpenFile} cta={ctaFor("genesis.md") ?? undefined}
+          storyName={storyName} onOpenFile={onOpenFile}
         />
       )}
 
       {plotEps.map((ep) => (
         <EpisodeSection
           key={ep.file} index={++idx} ep={ep} isActive={activeKey === ep.file}
-          storyName={storyName} onOpenFile={onOpenFile} cta={ctaFor(ep.file) ?? undefined}
+          storyName={storyName} onOpenFile={onOpenFile}
         />
       ))}
 
-      {/* All episodes published with nothing queued → a trailing "start next" CTA. */}
-      {activeKey === null && coachCta && (
-        <div className="px-4 py-2.5 border-b border-border" data-testid="workflow-next-episode">
-          <div className="ml-1" data-testid="section-cta">{coachCta}</div>
-        </div>
-      )}
-
       <div className="px-4 py-2 text-[11px] text-muted flex flex-wrap gap-x-3" data-testid="progress-summary">
         <span>{progress.summary.published} published</span>
         <span>{progress.summary.readyToPublish} ready</span>
@@ -367,14 +299,13 @@ function CartoonWorkflowMap({
 
 /** A `progress-episode-<file>` section, kept testid-stable so clicking it opens the file. */
 function EpisodeSection({
-  index, ep, isActive, storyName, onOpenFile, cta, openingDone = true, canOpen = true,
+  index, ep, isActive, storyName, onOpenFile, openingDone = true, canOpen = true,
 }: {
   index: number;
   ep: EpisodeProgress;
   isActive: boolean;
   storyName: string;
   onOpenFile: (storyName: string, file: string) => void;
-  cta?: ReactNode;
   /** Whether the genesis opening text is already written (false for the stub). */
   openingDone?: boolean;
   /** Whether the header navigates to the file (false for the not-yet-written stub). */
@@ -408,7 +339,6 @@ function EpisodeSection({
       <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>
-      {cta && <div className="mt-2 ml-1" data-testid="section-cta">{cta}</div>}
     </div>
   );
 }

package/app/web/components/WalletCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 
 const API_BASE = "http://localhost:7777";
 
@@ -7,29 +7,45 @@ interface WalletInfo {
   walletId?: string;
   name?: string;
   address?: string;
+  activeWallet?: WalletChoice;
+  wallets?: WalletChoice[];
+  selectionRequired?: boolean;
   ethBalance?: string;
   usdcBalance?: string;
   plotBalance?: string;
   error?: string;
 }
 
+interface WalletChoice {
+  walletId?: string;
+  name: string;
+  address?: string;
+  normalizedAddress?: string;
+  source: "ows";
+  label: string;
+  recognized: boolean;
+  active: boolean;
+}
+
 export function WalletCard({ token }: { token: string }) {
   const [wallet, setWallet] = useState<WalletInfo | null>(null);
   const [creating, setCreating] = useState(false);
+  const [switching, setSwitching] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
   const [error, setError] = useState<string | 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 loadWallet = () => {
+  const loadWallet = useCallback(() => {
     authFetch(`${API_BASE}/api/wallet`)
       .then((r) => r.json())
       .then((data) => setWallet(data))
       .catch(() => setWallet({ exists: false, error: "Failed to load wallet" }));
-  };
+  }, [authFetch]);
 
-  useEffect(() => { loadWallet(); }, []);
+  useEffect(() => { loadWallet(); }, [loadWallet]);
 
   const handleCreate = async () => {
     setCreating(true);
@@ -45,6 +61,27 @@ export function WalletCard({ token }: { token: string }) {
     setCreating(false);
   };
 
+  const handleSwitch = async (choice: WalletChoice) => {
+    setSwitching(choice.walletId || choice.name);
+    setError(null);
+    try {
+      const res = await authFetch(`${API_BASE}/api/wallet/active`, {
+        method: "POST",
+        body: JSON.stringify({
+          walletId: choice.walletId,
+          name: choice.name,
+          address: choice.normalizedAddress || choice.address,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Wallet switch failed");
+      loadWallet();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to switch wallet");
+    }
+    setSwitching(null);
+  };
+
   const copyAddress = () => {
     if (wallet?.address) {
       navigator.clipboard.writeText(wallet.address);
@@ -63,7 +100,7 @@ export function WalletCard({ token }: { token: string }) {
 
       {wallet && !wallet.exists && (
         <div className="space-y-3">
-          <p className="text-muted text-xs">No wallet created yet. Create one to enable autonomous transactions.</p>
+          <p className="text-muted text-xs">{wallet.error || "No wallet created yet. Create one to enable autonomous transactions."}</p>
           {error && <p className="text-error text-xs">{error}</p>}
           <button
             onClick={handleCreate}
@@ -75,15 +112,44 @@ export function WalletCard({ token }: { token: string }) {
         </div>
       )}
 
+      {wallet?.selectionRequired && wallet.wallets && wallet.wallets.length > 0 && (
+        <div className="mb-4 space-y-3 rounded border border-amber-600/30 bg-amber-950/10 p-3">
+          <p className="text-xs text-amber-700">Multiple OWS wallets found. Select the wallet OWS should use for publishing and signing.</p>
+          {wallet.wallets.map((choice) => (
+            <div key={choice.walletId || choice.name} className="border-border flex items-center justify-between gap-3 rounded border p-2">
+              <div className="min-w-0">
+                <p className="text-foreground truncate text-xs font-medium">{choice.name}</p>
+                <p className="text-muted truncate text-[10px] font-mono">{choice.address || "No EVM address"}</p>
+              </div>
+              <button
+                onClick={() => handleSwitch(choice)}
+                disabled={!choice.address || switching === (choice.walletId || choice.name)}
+                className="border-accent text-accent hover:bg-accent/10 disabled:opacity-40 rounded border px-2 py-1 text-[10px] font-medium transition-colors"
+              >
+                {switching === (choice.walletId || choice.name) ? "switching..." : "use"}
+              </button>
+            </div>
+          ))}
+          {error && <p className="text-error text-xs">{error}</p>}
+        </div>
+      )}
+
       {wallet && wallet.exists && wallet.address && (
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-muted text-[10px] uppercase tracking-wider">Address (Base)</span>
+            <span className="text-muted text-[10px] uppercase tracking-wider">Active Wallet (Base)</span>
             <span className={`rounded border px-1.5 py-0.5 text-[9px] ${wallet.ethBalance && parseFloat(wallet.ethBalance) > 0 ? "border-accent/30 text-accent" : "border-accent-dim/30 text-accent-dim"}`}>
               {wallet.ethBalance && parseFloat(wallet.ethBalance) > 0 ? "active" : "no balance"}
             </span>
           </div>
 
+          {wallet.name && (
+            <div className="flex justify-between text-xs">
+              <span className="text-muted">Name</span>
+              <span className="text-foreground truncate pl-3 font-mono text-[10px]">{wallet.name}</span>
+            </div>
+          )}
+
           <div className="flex items-center gap-2">
             <code className="text-foreground bg-surface rounded px-2 py-1 text-xs font-mono">{truncate(wallet.address)}</code>
             <button onClick={copyAddress} className="text-muted hover:text-accent text-xs transition-colors">
@@ -110,6 +176,32 @@ export function WalletCard({ token }: { token: string }) {
             </div>
           </div>
 
+          {wallet.wallets && wallet.wallets.length > 1 && (
+            <div className="border-border space-y-2 border-t pt-3">
+              <p className="text-muted text-[10px] font-medium uppercase tracking-wider">Switch Wallet</p>
+              {wallet.wallets.map((choice) => (
+                <div key={choice.walletId || choice.name} className="flex items-center justify-between gap-3 text-xs">
+                  <div className="min-w-0">
+                    <p className={choice.active ? "text-accent truncate font-medium" : "text-foreground truncate"}>
+                      {choice.name}{choice.active ? " (active)" : ""}
+                    </p>
+                    <p className="text-muted truncate text-[10px] font-mono">{choice.address || "No EVM address"}</p>
+                  </div>
+                  {!choice.active && (
+                    <button
+                      onClick={() => handleSwitch(choice)}
+                      disabled={!choice.address || switching === (choice.walletId || choice.name)}
+                      className="border-border text-muted hover:border-accent hover:text-accent disabled:opacity-40 rounded border px-2 py-1 text-[10px] transition-colors"
+                    >
+                      {switching === (choice.walletId || choice.name) ? "..." : "use"}
+                    </button>
+                  )}
+                </div>
+              ))}
+              {error && <p className="text-error text-xs">{error}</p>}
+            </div>
+          )}
+
           {/* Fund wallet */}
           <div className="border-border border-t pt-3">
             <p className="text-muted mb-2 text-[10px] font-medium uppercase tracking-wider">Fund Wallet</p>
@@ -118,6 +210,16 @@ export function WalletCard({ token }: { token: string }) {
           </div>
         </div>
       )}
+
+      {wallet?.exists && (
+        <button
+          onClick={handleCreate}
+          disabled={creating}
+          className="border-border text-muted hover:border-accent hover:text-accent disabled:opacity-40 mt-4 rounded border px-3 py-1.5 text-[10px] font-medium transition-colors"
+        >
+          {creating ? "creating..." : "create another wallet"}
+        </button>
+      )}
     </div>
   );
 }

package/app/web/components/WorkflowCoach.tsx

@@ -24,53 +24,80 @@ interface WorkflowCoachViewProps {
   /** Run an app-driven step (the agent steps copy a prompt instead). */
   onAction: (action: CoachUiAction, episodeFile: string | null) => void;
   className?: string;
+  /** Show a clear completed state instead of disappearing when no coach exists. */
+  showEmptyState?: boolean;
 }
 
-export function WorkflowCoachView({ coach, onAction, className = "" }: WorkflowCoachViewProps) {
+export function WorkflowCoachView({ coach, onAction, className = "", showEmptyState = false }: WorkflowCoachViewProps) {
   // Track the prompt that was copied rather than a bare boolean, so the "Copied!"
   // confirmation derives to false the moment the coach (and its prompt) changes —
   // no reset effect, no stale confirmation under a new stage.
   const [copiedPrompt, setCopiedPrompt] = useState<string | null>(null);
   const copied = copiedPrompt !== null && copiedPrompt === coach?.prompt;
 
-  if (!coach) return null;
+  if (coach === undefined) return null;
+  if (!coach) {
+    if (!showEmptyState) return null;
+    return (
+      <div
+        className={`m-3 rounded-lg border border-green-700/25 bg-green-950/5 px-4 py-3 ${className}`}
+        data-testid="workflow-coach"
+        data-state="complete"
+      >
+        <div className="flex items-start gap-3">
+          <span className="rounded-full bg-green-700/10 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-green-700">
+            Complete
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-semibold text-foreground">No next action available</p>
+            <p className="mt-0.5 text-xs text-muted">This workflow has no queued next step right now.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div
-      className={`flex items-center gap-2 px-3 py-2 bg-accent/5 border-b border-accent/30 text-xs ${className}`}
+      className={`m-3 rounded-lg border border-accent/40 bg-accent/10 px-4 py-3 shadow-sm ${className}`}
       data-testid="workflow-coach"
       data-stage={coach.stageLabel}
       data-action-kind={coach.actionKind}
       data-ui-action={coach.uiAction ?? ""}
     >
-      <span className="rounded-full bg-background px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-accent flex-shrink-0" data-testid="workflow-coach-stage">
-        {coach.stageLabel}
-      </span>
-      <span className="min-w-0 flex-1 text-foreground" data-testid="workflow-coach-action">
-        <span className="text-muted">Next: </span>
-        <span className="font-medium">{coach.action}</span>
-      </span>
-      {coach.actionKind === "agent" && coach.prompt ? (
-        <button
-          onClick={() => {
-            if (!coach.prompt) return;
-            const prompt = coach.prompt;
-            navigator.clipboard?.writeText(prompt).then(() => setCopiedPrompt(prompt)).catch(() => {});
-          }}
-          data-testid="workflow-coach-copy"
-          className="flex-shrink-0 rounded bg-accent px-2.5 py-1 text-[11px] font-medium text-white hover:bg-accent-dim transition-colors"
-        >
-          {copied ? "Copied!" : "Copy prompt"}
-        </button>
-      ) : coach.actionKind === "ui" && coach.uiAction ? (
-        <button
-          onClick={() => onAction(coach.uiAction!, coach.episodeFile)}
-          data-testid="workflow-coach-do"
-          className="flex-shrink-0 rounded bg-accent px-2.5 py-1 text-[11px] font-medium text-white hover:bg-accent-dim transition-colors"
-        >
-          {coach.action}
-        </button>
-      ) : null}
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <span className="inline-flex rounded-full bg-background px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.14em] text-accent" data-testid="workflow-coach-stage">
+            {coach.stageLabel}
+          </span>
+          <p className="mt-1 text-sm text-foreground" data-testid="workflow-coach-action">
+            <span className="font-semibold">Next: </span>
+            <span>{coach.action}</span>
+          </p>
+          {copied && <p className="mt-1 text-[11px] font-medium text-accent">Prompt copied.</p>}
+        </div>
+        {coach.actionKind === "agent" && coach.prompt ? (
+          <button
+            onClick={() => {
+              if (!coach.prompt) return;
+              const prompt = coach.prompt;
+              navigator.clipboard?.writeText(prompt).then(() => setCopiedPrompt(prompt)).catch(() => {});
+            }}
+            data-testid="workflow-coach-copy"
+            className="flex-shrink-0 rounded bg-accent px-4 py-2.5 text-sm font-bold text-white shadow-sm transition-colors hover:bg-accent-dim"
+          >
+            Next Action
+          </button>
+        ) : coach.actionKind === "ui" && coach.uiAction ? (
+          <button
+            onClick={() => onAction(coach.uiAction!, coach.episodeFile)}
+            data-testid="workflow-coach-do"
+            className="flex-shrink-0 rounded bg-accent px-4 py-2.5 text-sm font-bold text-white shadow-sm transition-colors hover:bg-accent-dim"
+          >
+            Next Action
+          </button>
+        ) : null}
+    </div>
     </div>
   );
 }
@@ -83,6 +110,7 @@ interface WorkflowCoachProps {
   /** Bumped by the parent to reload after a state change (cut edit / publish). */
   refreshKey?: number;
   onAction: (action: CoachUiAction, episodeFile: string | null) => void;
+  showEmptyState?: boolean;
 }
 
 /**
@@ -92,8 +120,8 @@ interface WorkflowCoachProps {
  * previous file's coach can never linger under a different file when the new
  * request fails or 404s (the stale-state-on-error class flagged on #420/#427).
  */
-export function WorkflowCoach({ storyName, fileName, authFetch, refreshKey = 0, onAction }: WorkflowCoachProps) {
-  const [coach, setCoach] = useState<CartoonCoach | null>(null);
+export function WorkflowCoach({ storyName, fileName, authFetch, refreshKey = 0, onAction, showEmptyState = false }: WorkflowCoachProps) {
+  const [coach, setCoach] = useState<CartoonCoach | null | undefined>(undefined);
 
   // Reset the coach the instant the target changes (file switch / refresh),
   // during render — React's recommended way to reset state on a changing input.
@@ -108,7 +136,7 @@ export function WorkflowCoach({ storyName, fileName, authFetch, refreshKey = 0,
   const targetKey = JSON.stringify([storyName, fileName ?? "", refreshKey]);
   const [loadedKey, setLoadedKey] = useState<string | null>(null);
   if (loadedKey !== targetKey) {
-    setCoach(null);
+    setCoach(undefined);
     setLoadedKey(targetKey);
   }
 
@@ -124,5 +152,5 @@ export function WorkflowCoach({ storyName, fileName, authFetch, refreshKey = 0,
     return () => { cancelled = true; };
   }, [storyName, fileName, authFetch, refreshKey]);
 
-  return <WorkflowCoachView coach={coach} onAction={onAction} />;
+  return <WorkflowCoachView coach={coach} onAction={onAction} showEmptyState={showEmptyState} />;
 }

package/app/web/dist/assets/{export-cut-nKQ_n2-J.js → export-cut-BqZI0-Rv.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-BAZGwVwj.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-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};