plotlink-ows 1.2.96 → 1.2.97

package/app/lib/cartoon-production-status.ts

@@ -0,0 +1,77 @@
+import type { CartoonChecklist, CartoonChecklistStep } from "./cartoon-readiness";
+
+export type CartoonProductionStepKey =
+  | CartoonChecklistStep["key"]
+  | "assemble"
+  | "ready";
+
+export interface CartoonProductionStep {
+  key: CartoonProductionStepKey;
+  label: string;
+  status: "done" | "current" | "todo";
+  detail: string | null;
+}
+
+export interface CartoonProductionStatus {
+  steps: CartoonProductionStep[];
+  activeStep: CartoonProductionStep | null;
+  statusLabel: string | null;
+  completedCount: number;
+  totalCount: number;
+  outstandingCount: number;
+}
+
+export function buildCartoonProductionStatus(input: {
+  checklist: CartoonChecklist | null;
+  markdownReady?: boolean;
+  published?: boolean;
+}): CartoonProductionStatus | null {
+  const { checklist, markdownReady = false, published = false } = input;
+  if (!checklist || checklist.steps.length === 0) return null;
+
+  const uploadDone =
+    checklist.steps.find((step) => step.key === "upload")?.status === "done";
+  const ready = uploadDone && markdownReady && !published;
+  const assembleStatus: CartoonProductionStep["status"] = published || markdownReady
+    ? "done"
+    : uploadDone
+      ? "current"
+      : "todo";
+  const readyStatus: CartoonProductionStep["status"] = published
+    ? "done"
+    : ready
+      ? "current"
+      : "todo";
+
+  const steps: CartoonProductionStep[] = [
+    ...checklist.steps.filter((step) => step.key !== "publish"),
+    {
+      key: "assemble",
+      label: "Episode sequence prepared",
+      status: assembleStatus,
+      detail: null,
+    },
+    {
+      key: "ready",
+      label: published ? "Published to PlotLink" : "Ready to publish",
+      status: readyStatus,
+      detail: null,
+    },
+  ];
+
+  const activeStep =
+    steps.find((step) => step.status === "current")
+    ?? steps.find((step) => step.status === "todo")
+    ?? steps[steps.length - 1]
+    ?? null;
+  const completedCount = steps.filter((step) => step.status === "done").length;
+
+  return {
+    steps,
+    activeStep,
+    statusLabel: activeStep?.label ?? null,
+    completedCount,
+    totalCount: steps.length,
+    outstandingCount: steps.filter((step) => step.status !== "done").length,
+  };
+}

package/app/web/components/CartoonNextAction.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import type { StoryProgress } from "@app-lib/story-progress";
-import type { CoachUiAction } from "@app-lib/cartoon-coach";
-import { WorkflowCoachView } from "./WorkflowCoach";
+import type { CartoonCoach, CoachUiAction } from "@app-lib/cartoon-coach";
 
 export function storyInfoNextStep(progress: StoryProgress): string {
   if (progress.cover !== "present") {
@@ -34,39 +33,161 @@ export function cartoonWorkflowActiveKey(progress: StoryProgress): string | null
   return coach?.episodeFile ?? null;
 }
 
-export function StoryInfoNextActionCard({
-  progress,
-  onOpenStoryInfo,
+function CompactNextActionShell({
+  badge,
+  tone = "accent",
+  summary,
+  children,
+  note,
+  testId,
 }: {
-  progress: StoryProgress;
-  onOpenStoryInfo?: () => void;
+  badge: string;
+  tone?: "accent" | "complete";
+  summary: ReactNode;
+  children?: ReactNode;
+  note?: ReactNode;
+  testId: string;
 }) {
+  const shellTone =
+    tone === "complete"
+      ? "border-green-700/20 bg-green-950/5"
+      : "border-accent/30 bg-background/95";
+  const badgeTone =
+    tone === "complete"
+      ? "bg-green-700/10 text-green-700"
+      : "bg-accent/10 text-accent";
   return (
-    <div className="m-3 rounded-lg border border-accent/40 bg-accent/10 px-4 py-3 shadow-sm" data-testid="story-info-cta">
-      <div className="flex items-center gap-3">
+    <div
+      className={`border px-3 py-3 sm:px-4 ${shellTone}`}
+      data-testid={testId}
+      data-state={tone === "complete" ? "complete" : "active"}
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <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">
-            Story info
+          <span
+            className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.14em] ${badgeTone}`}
+          >
+            {badge}
           </span>
-          <p className="mt-1 text-sm text-foreground" data-testid="story-info-next-action">
-            <span className="font-semibold">Next: </span>
-            <span>{storyInfoNextStep(progress)}</span>
-          </p>
+          <p className="mt-1 text-sm text-foreground">{summary}</p>
+          {note ? <p className="mt-1 text-[11px] font-medium text-accent">{note}</p> : null}
         </div>
-        <button
-          type="button"
-          onClick={onOpenStoryInfo}
-          disabled={!onOpenStoryInfo}
-          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 disabled:cursor-not-allowed disabled:opacity-50"
-          data-testid="story-info-next-action-btn"
-        >
-          Next Action
-        </button>
+        {children ? (
+          <div className="flex w-full justify-end sm:w-auto sm:flex-shrink-0">
+            {children}
+          </div>
+        ) : null}
       </div>
     </div>
   );
 }
 
+function NextActionButton({
+  onClick,
+  disabled,
+  testId,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+  testId: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="w-full rounded bg-accent px-4 py-2.5 text-sm font-bold text-white shadow-sm transition-colors hover:bg-accent-dim disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+      data-testid={testId}
+    >
+      Next Action
+    </button>
+  );
+}
+
+function WorkflowCoachCompact({
+  coach,
+  onAction,
+}: {
+  coach: CartoonCoach | null | undefined;
+  onAction: (action: CoachUiAction, episodeFile: string | null) => void;
+}) {
+  const [copiedPrompt, setCopiedPrompt] = useState<string | null>(null);
+  const copied = copiedPrompt !== null && copiedPrompt === coach?.prompt;
+
+  if (coach === undefined) return null;
+  if (!coach) {
+    return (
+      <CompactNextActionShell
+        badge="Complete"
+        tone="complete"
+        summary="No next action available."
+        note="This workflow has no queued next step right now."
+        testId="cartoon-next-action"
+      />
+    );
+  }
+
+  const button =
+    coach.actionKind === "agent" && coach.prompt ? (
+      <NextActionButton
+        testId="workflow-coach-copy"
+        onClick={() => {
+          if (!coach.prompt) return;
+          const prompt = coach.prompt;
+          navigator.clipboard?.writeText(prompt).then(() => setCopiedPrompt(prompt)).catch(() => {});
+        }}
+      />
+    ) : coach.actionKind === "ui" && coach.uiAction ? (
+      <NextActionButton
+        testId="workflow-coach-do"
+        onClick={() => onAction(coach.uiAction!, coach.episodeFile)}
+      />
+    ) : null;
+
+  return (
+    <CompactNextActionShell
+      badge={coach.stageLabel}
+      summary={(
+        <span data-testid="workflow-coach-action">
+          <span className="font-semibold">Next: </span>
+          <span>{coach.action}</span>
+        </span>
+      )}
+      note={copied ? "Prompt copied." : undefined}
+      testId="cartoon-next-action"
+    >
+      {button}
+    </CompactNextActionShell>
+  );
+}
+
+export function StoryInfoNextActionCard({
+  progress,
+  onOpenStoryInfo,
+}: {
+  progress: StoryProgress;
+  onOpenStoryInfo?: () => void;
+}) {
+  return (
+    <CompactNextActionShell
+      badge="Story info"
+      summary={(
+        <span data-testid="story-info-next-action">
+          <span className="font-semibold">Next: </span>
+          <span>{storyInfoNextStep(progress)}</span>
+        </span>
+      )}
+      testId="story-info-cta"
+    >
+      <NextActionButton
+        testId="story-info-next-action-btn"
+        onClick={() => onOpenStoryInfo?.()}
+        disabled={!onOpenStoryInfo}
+      />
+    </CompactNextActionShell>
+  );
+}
+
 export function CartoonNextActionView({
   progress,
   onCoachAction,
@@ -80,31 +201,27 @@ export function CartoonNextActionView({
   if (activeKey === "story-info") {
     return <StoryInfoNextActionCard progress={progress} onOpenStoryInfo={onOpenStoryInfo} />;
   }
-  return (
-    <WorkflowCoachView
-      coach={progress.coach ?? null}
-      showEmptyState
-      onAction={onCoachAction}
-    />
-  );
+  return <WorkflowCoachCompact coach={progress.coach ?? null} onAction={onCoachAction} />;
 }
 
 export function CartoonNextAction({
   storyName,
   authFetch,
+  fileName,
   refreshKey = 0,
   onCoachAction,
   onOpenStoryInfo,
 }: {
   storyName: string;
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  fileName?: string | null;
   refreshKey?: number;
   onCoachAction: (action: CoachUiAction, episodeFile: string | null) => void;
   onOpenStoryInfo?: () => void;
 }) {
   const [progress, setProgress] = useState<StoryProgress | null | undefined>(undefined);
 
-  const targetKey = JSON.stringify([storyName, refreshKey]);
+  const targetKey = JSON.stringify([storyName, fileName ?? "", refreshKey]);
   const [loadedKey, setLoadedKey] = useState<string | null>(null);
   if (loadedKey !== targetKey) {
     setProgress(undefined);
@@ -113,7 +230,8 @@ export function CartoonNextAction({
 
   useEffect(() => {
     let cancelled = false;
-    authFetch(`/api/stories/${storyName}/progress`)
+    const focus = fileName ? `?focus=${encodeURIComponent(fileName)}` : "";
+    authFetch(`/api/stories/${storyName}/progress${focus}`)
       .then((res) => (res.ok ? res.json() : null))
       .then((data: StoryProgress | null) => {
         if (!cancelled) setProgress(isValidProgress(data) ? data : null);
@@ -122,11 +240,11 @@ export function CartoonNextAction({
         if (!cancelled) setProgress(null);
       });
     return () => { cancelled = true; };
-  }, [storyName, authFetch, refreshKey]);
+  }, [storyName, fileName, authFetch, refreshKey]);
 
   if (progress === undefined) return null;
   if (!progress) {
-    return <WorkflowCoachView coach={null} showEmptyState onAction={onCoachAction} />;
+    return <WorkflowCoachCompact coach={null} onAction={onCoachAction} />;
   }
   return (
     <CartoonNextActionView

package/app/web/components/CartoonProductionStatus.tsx

@@ -0,0 +1,142 @@
+import { groupCartoonIssues, type CartoonChecklist } from "@app-lib/cartoon-readiness";
+import { buildCartoonProductionStatus } from "@app-lib/cartoon-production-status";
+import type { ReactNode } from "react";
+
+const STATUS_MARK: Record<"done" | "current" | "todo", string> = {
+  done: "✓",
+  current: "▸",
+  todo: "○",
+};
+
+interface CartoonProductionStatusProps {
+  checklist: CartoonChecklist | null;
+  markdownReady?: boolean;
+  published?: boolean;
+  issues?: string[];
+  title?: string;
+  subtitle?: ReactNode;
+  action?: ReactNode;
+  rootTestId?: string;
+  detailsTestId?: string;
+  stepTestIdPrefix?: string;
+  issuesTestId?: string;
+  issueGroupTestIdPrefix?: string;
+  detailsLabel?: string;
+  summaryTestId?: string;
+}
+
+export function CartoonProductionStatus({
+  checklist,
+  markdownReady = false,
+  published = false,
+  issues = [],
+  title = "Episode production",
+  subtitle,
+  action,
+  rootTestId = "cartoon-production-status",
+  detailsTestId = "cartoon-production-details",
+  stepTestIdPrefix = "cartoon-production-step",
+  issuesTestId,
+  issueGroupTestIdPrefix,
+  detailsLabel,
+  summaryTestId,
+}: CartoonProductionStatusProps) {
+  const production = buildCartoonProductionStatus({
+    checklist,
+    markdownReady,
+    published,
+  });
+  if (!production) return null;
+
+  const groups = groupCartoonIssues(issues);
+  const issuesCount = groups.reduce((sum, group) => sum + group.lines.length, 0);
+  const statusLabel = production.statusLabel ?? "Review cuts";
+  const progressLabel = `${production.completedCount} / ${production.totalCount} steps done`;
+  const detailsText = detailsLabel
+    ?? (production.outstandingCount === 0
+      ? "Production details"
+      : `${production.outstandingCount} step${production.outstandingCount === 1 ? "" : "s"} left`);
+
+  return (
+    <div
+      className="rounded-lg border border-border bg-background/80 px-3 py-2"
+      data-testid={rootTestId}
+    >
+      <div className="flex flex-wrap items-start gap-2 justify-between">
+        <div className="min-w-0 space-y-1">
+          <div className="flex flex-wrap items-center gap-1.5 text-[10px]">
+            <span className="font-medium text-foreground">{title}</span>
+            <span
+              className="rounded-full border border-accent/30 bg-accent/10 px-2 py-0.5 font-medium text-accent"
+              data-testid={summaryTestId}
+            >
+              Active: {statusLabel}
+            </span>
+            <span className="rounded-full border border-border bg-background px-2 py-0.5 text-muted">
+              {progressLabel}
+            </span>
+            {production.activeStep?.detail && (
+              <span className="text-muted">{production.activeStep.detail}</span>
+            )}
+          </div>
+          {subtitle ? (
+            <div className="text-[10px] text-muted">{subtitle}</div>
+          ) : null}
+        </div>
+        {action ? <div className="flex-shrink-0">{action}</div> : null}
+      </div>
+
+      <details className="mt-2" data-testid={detailsTestId}>
+        <summary className="cursor-pointer select-none text-[10px] text-muted hover:text-foreground">
+          {detailsText}
+          {issuesCount > 0 ? ` · ${issuesCount} blocker${issuesCount === 1 ? "" : "s"}` : ""}
+        </summary>
+
+        <div className="mt-1.5 space-y-1.5">
+          <ol className="flex flex-wrap gap-1.5">
+            {production.steps.map((step) => (
+              <li
+                key={step.key}
+                data-testid={`${stepTestIdPrefix}-${step.key}`}
+                data-status={step.status}
+                className={`flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] ${
+                  step.status === "current"
+                    ? "border-accent/40 bg-accent/10 text-accent"
+                    : step.status === "done"
+                      ? "border-border bg-background/70 text-foreground"
+                      : "border-border/70 bg-background/40 text-muted"
+                }`}
+              >
+                <span aria-hidden>{STATUS_MARK[step.status]}</span>
+                <span>{step.label}</span>
+                {step.detail && <span className="text-muted">· {step.detail}</span>}
+              </li>
+            ))}
+          </ol>
+
+          {groups.length > 0 && (
+            <div
+              className="space-y-1.5"
+              data-testid={issuesTestId ?? `${stepTestIdPrefix}-issues`}
+            >
+              {groups.map((group) => (
+                <div
+                  key={group.key}
+                  data-testid={`${issueGroupTestIdPrefix ?? `${stepTestIdPrefix}-issue-group`}-${group.key}`}
+                  className="text-[10px]"
+                >
+                  <p className="font-medium text-amber-700">{group.title}</p>
+                  <ul className="ml-3 list-disc text-muted">
+                    {group.lines.map((line, i) => (
+                      <li key={i}>{line}</li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </details>
+    </div>
+  );
+}

package/app/web/components/CartoonPublishPage.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import type { StoryProgress, EpisodeProgress } from "@app-lib/story-progress";
-import { cartoonGenesisReadiness, classifyCartoonReadiness, groupCartoonIssues } from "@app-lib/cartoon-readiness";
+import { cartoonChecklist, cartoonGenesisReadiness, classifyCartoonReadiness, groupCartoonIssues } from "@app-lib/cartoon-readiness";
 import type { Cut } from "@app-lib/cuts";
+import { CartoonProductionStatus } from "./CartoonProductionStatus";
 import { derivePublishTitle, isRawFilenameTitle, hasExplicitEpisodeTitle } from "../lib/publish-helpers";
 
 interface CartoonPublishPageProps {
@@ -23,9 +24,6 @@ interface CartoonPublishPageProps {
   refreshKey?: number;
 }
 
-type CheckState = "done" | "todo";
-interface PublishCheck { label: string; status: CheckState; detail?: string | null }
-
 /**
  * Dedicated cartoon "Publish" workflow page (#449, spec §10).
  *
@@ -172,18 +170,8 @@ export function CartoonPublishPage({ storyName, authFetch, onOpenFile, onOpenSto
     );
   }
 
-  const c = active.cuts;
   const coverDone = progress.cover === "present";
-  const checks: PublishCheck[] = [
-    { label: "Opening text ready", status: "done" }, // the episode exists once it appears here
-    { label: "Cut plan", status: c && c.total > 0 ? "done" : "todo", detail: c ? `${c.total} cut${c.total === 1 ? "" : "s"} planned` : "not started" },
-    { label: "Clean images converted", status: c && c.needClean > 0 && c.withClean === c.needClean ? "done" : "todo", detail: c ? `${c.withClean} / ${c.needClean}` : null },
-    { label: "Cuts lettered", status: c && c.total > 0 && c.withText === c.total ? "done" : "todo", detail: c ? `${c.withText} / ${c.total}` : null },
-    { label: "Final images exported", status: c && c.total > 0 && c.exported === c.total ? "done" : "todo", detail: c ? `${c.exported} / ${c.total}` : null },
-    { label: "Final images uploaded", status: c && c.total > 0 && c.uploaded === c.total ? "done" : "todo", detail: c ? `${c.uploaded} / ${c.total}` : null },
-    { label: "Cover image", status: coverDone ? "done" : "todo", detail: coverDone ? null : "recommended before publishing" },
-    { label: "Publish to PlotLink", status: active.published ? "done" : "todo" },
-  ];
+  const checklist = cartoonChecklist({ cuts: activeCuts ?? [], published: active.published });
 
   const ready = active.state === "ready";
   const blocked = active.state === "blocked";
@@ -247,17 +235,38 @@ export function CartoonPublishPage({ storyName, authFetch, onOpenFile, onOpenSto
   return (
     <div className="h-full overflow-y-auto px-4 py-4" data-testid="cartoon-publish-page">
       <h2 className="text-base font-serif text-foreground">Publish {active.label}</h2>
-      <p className="mt-0.5 text-[11px] text-muted">Finalize this episode: convert, letter, export, upload, then publish to PlotLink.</p>
+      <p className="mt-0.5 text-[11px] text-muted">Publish stays focused on readiness and blockers. Open production details only if you need the full step map.</p>
 
-      <ul className="mt-3 flex flex-col gap-1.5 max-w-xl" data-testid="publish-checklist">
-        {checks.map((ck, i) => (
-          <li key={i} className="flex items-baseline gap-2 text-xs" data-testid="publish-check" data-status={ck.status}>
-            <span className={`flex-shrink-0 ${ck.status === "done" ? "text-green-700" : "text-muted"}`} aria-hidden>{ck.status === "done" ? "✓" : "○"}</span>
-            <span className={ck.status === "done" ? "text-foreground" : "text-muted"}>{ck.label}</span>
-            {ck.detail && <span className="text-muted">· {ck.detail}</span>}
-          </li>
-        ))}
-      </ul>
+      <div className="mt-3 max-w-xl" data-testid="publish-checklist">
+        <CartoonProductionStatus
+          checklist={checklist}
+          markdownReady={ready}
+          published={active.published}
+          title="Episode production"
+          subtitle={coverDone
+            ? "Cover and publish readiness are checked below."
+            : "Episode production is tracked here; cover readiness is checked below."}
+          rootTestId="publish-production-status"
+          detailsTestId="publish-production-details"
+          stepTestIdPrefix="publish-step"
+        />
+        <div className="mt-2 flex flex-wrap gap-1.5 text-[10px]">
+          <span
+            className={`rounded-full border px-2 py-0.5 ${coverDone ? "border-green-700/30 bg-green-700/10 text-green-700" : "border-border bg-background text-muted"}`}
+            data-testid="publish-cover-status"
+          >
+            Cover image: {coverDone ? "Ready" : "Missing"}
+          </span>
+          {isGenesisActive && (
+            <span
+              className={`rounded-full border px-2 py-0.5 ${metaReady ? "border-green-700/30 bg-green-700/10 text-green-700" : "border-border bg-background text-muted"}`}
+              data-testid="publish-metadata-status"
+            >
+              Story info: {metaReady ? "Ready" : "Set genre & language"}
+            </span>
+          )}
+        </div>
+      </div>
 
       {/* Migrated episode diagnostics (#461): the publish title (#358), Genesis
           prologue readiness (#359), and grouped publish issues (#360) that used