plotlink-ows 1.0.32 → 1.2.94

package/app/web/components/EpisodesPage.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+import type { StoryProgress, EpisodeProgress } from "@app-lib/story-progress";
+
+interface EpisodesPageProps {
+  storyName: string;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  onOpenFile: (storyName: string, file: string) => void;
+}
+
+/**
+ * "Episodes" workflow page for cartoon stories (#439, spec §2 nav target).
+ *
+ * A reader-ordered list of the story's episodes (Genesis = Episode 1, plot-NN =
+ * Episode N+1) with status, so a normal creator manages episodes without the
+ * file tree. Clicking one opens it in the preview. The dedicated rich episode
+ * manager is a later ticket (§11); this is the workflow nav's episodes target.
+ */
+export function EpisodesPage({ storyName, authFetch, onOpenFile }: EpisodesPageProps) {
+  const [episodes, setEpisodes] = useState<EpisodeProgress[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await authFetch(`/api/stories/${storyName}/progress`);
+        const data: StoryProgress | null = res.ok ? await res.json() : null;
+        if (!cancelled) {
+          setEpisodes(Array.isArray(data?.episodes) ? data!.episodes : null);
+          setLoading(false);
+        }
+      } catch {
+        if (!cancelled) { setEpisodes(null); setLoading(false); }
+      }
+    };
+    load();
+    return () => { cancelled = true; };
+  }, [storyName, authFetch]);
+
+  if (loading) {
+    return <div className="h-full flex items-center justify-center text-muted text-sm" data-testid="episodes-loading">Loading episodes…</div>;
+  }
+  if (!episodes) {
+    return <div className="h-full flex items-center justify-center text-muted text-sm">Could not load episodes.</div>;
+  }
+
+  return (
+    <div className="h-full overflow-y-auto px-4 py-4" data-testid="episodes-page">
+      <h2 className="text-base font-serif text-foreground">Episodes</h2>
+      <p className="mt-0.5 text-[11px] text-muted">Genesis is Episode 1; each plot file is the next episode.</p>
+
+      {episodes.length === 0 ? (
+        <p className="mt-4 text-xs text-muted italic" data-testid="episodes-empty">No episodes yet — write the Genesis to start Episode 1.</p>
+      ) : (
+        <ol className="mt-3 flex flex-col gap-1">
+          {episodes.map((ep) => (
+            <li key={ep.file}>
+              <button
+                onClick={() => onOpenFile(storyName, ep.file)}
+                data-testid={`episodes-row-${ep.file}`}
+                data-state={ep.state}
+                className="w-full text-left flex items-start gap-2 rounded px-2 py-1.5 hover:bg-surface"
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-center gap-1.5">
+                    <span className="text-xs font-medium text-foreground">{ep.label}</span>
+                    {ep.title && <span className="text-[11px] text-muted truncate">· {ep.title}</span>}
+                    <span className="ml-auto text-[10px] text-muted">{ep.file}</span>
+                  </span>
+                  <span className="block text-[11px] text-muted">{ep.summary}</span>
+                </span>
+              </button>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}

package/app/web/components/FinishEpisodePanel.tsx

@@ -0,0 +1,151 @@
+import { groupCartoonIssues, type CartoonChecklist } from "@app-lib/cartoon-readiness";
+
+type StepStatus = "done" | "current" | "todo";
+
+const STATUS_MARK: Record<StepStatus, string> = { done: "✓", current: "▸", todo: "○" };
+
+interface FinishEpisodePanelProps {
+  /** Writer-language production checklist for this episode (null ⇒ not a cartoon plot). */
+  checklist: CartoonChecklist | null;
+  /** Flat readiness/upload issues; grouped by actionable step for display. */
+  issues: string[];
+  /** Run the guided finish flow (upload finals → prepare episode markdown, in order). */
+  onFinish: () => void;
+  /** True while the finish flow is running. */
+  finishing: boolean;
+  /** Live progress line shown on the button while finishing (e.g. "Uploading cut 2 (2/7)…"). */
+  progressText?: string;
+  /** Whether there is anything left to finish (≥1 exported final not yet published). */
+  canFinish: boolean;
+  /** The publish markdown is built and passes readiness — "Episode sequence prepared". */
+  markdownReady?: boolean;
+  /** The episode is published on-chain. */
+  published?: boolean;
+}
+
+interface DisplayStep {
+  key: string;
+  label: string;
+  status: StepStatus;
+  detail: string | null;
+}
+
+/**
+ * Guided "Finish episode" flow for a cartoon plot (#414).
+ *
+ * The end-to-end pilot showed the production tail (export → upload → prepare
+ * markdown → publish) was technically complete but fragmented: a writer had to know
+ * which low-level button to click and read a flat wall of "Cut N: …" errors. This
+ * panel makes the tail one guided surface in writer language: it shows the six
+ * production steps with live status, offers ONE primary "Finish episode" action
+ * that runs the remaining automatable steps in order (resumable — already-uploaded
+ * cuts are skipped by the caller), and groups any blockers under the actionable
+ * step heading instead of a long red list. The lower-level controls stay available
+ * elsewhere in the workspace for manual recovery.
+ *
+ * Renders nothing when there is no checklist (e.g. a fiction plot or an unparsed
+ * cut plan), so it never appears outside the cartoon flow.
+ */
+export function FinishEpisodePanel({
+  checklist,
+  issues,
+  onFinish,
+  finishing,
+  progressText,
+  canFinish,
+  markdownReady = false,
+  published = false,
+}: FinishEpisodePanelProps) {
+  if (!checklist || checklist.steps.length === 0) return null;
+
+  const groups = groupCartoonIssues(issues);
+
+  // The base checklist (plan → upload) models per-cut art/lettering/export/upload
+  // progress; it has no notion of the publish markdown being assembled. #414 needs
+  // the post-upload tail modelled explicitly, so replace its single "publish" step
+  // with two real states: "Episode sequence prepared" (markdown built + ready) and
+  // "Ready to publish" (which becomes "Published" once it's on-chain).
+  const uploadDone = checklist.steps.find((s) => s.key === "upload")?.status === "done";
+  const ready = uploadDone && markdownReady && !published; // ready to publish, not yet published
+
+  const assembleStatus: StepStatus = published || markdownReady ? "done" : uploadDone ? "current" : "todo";
+  const readyStatus: StepStatus = published ? "done" : ready ? "current" : "todo";
+
+  const steps: DisplayStep[] = [
+    ...checklist.steps.filter((s) => s.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 buttonLabel = finishing
+    ? progressText || "Finishing…"
+    : published
+      ? "Published ✓"
+      : ready
+        ? "Episode ready to publish"
+        : "Finish episode";
+
+  return (
+    <div
+      className="px-3 py-2 border-b border-border bg-surface/50 space-y-2 flex-shrink-0"
+      data-testid="finish-episode-panel"
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[11px] font-medium text-foreground">Finish episode</span>
+        {checklist.nextStep && (
+          <span className="text-[10px] text-muted truncate" data-testid="finish-next-step">
+            Next: {checklist.nextStep}
+          </span>
+        )}
+      </div>
+
+      {/* Writer-language step status — the exact webtoon production sequence. */}
+      <ol className="flex flex-wrap gap-1.5">
+        {steps.map((s) => (
+          <li
+            key={s.key}
+            data-testid={`finish-step-${s.key}`}
+            data-status={s.status}
+            className={`flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] ${
+              s.status === "current"
+                ? "border-accent/40 bg-accent/10 text-accent"
+                : s.status === "done"
+                  ? "border-border bg-background/70 text-foreground"
+                  : "border-border/70 bg-background/40 text-muted"
+            }`}
+          >
+            <span aria-hidden>{STATUS_MARK[s.status]}</span>
+            <span>{s.label}</span>
+            {s.detail && <span className="text-muted">· {s.detail}</span>}
+          </li>
+        ))}
+      </ol>
+
+      <button
+        onClick={onFinish}
+        disabled={finishing || !canFinish}
+        data-testid="finish-episode-btn"
+        title="Upload the exported final panels, then prepare the episode for publishing — picks up where it left off"
+        className="px-3 py-1 text-xs border border-accent/40 text-accent rounded hover:bg-accent/5 disabled:opacity-50"
+      >
+        {buttonLabel}
+      </button>
+
+      {/* Blockers grouped by the step that fixes them, not a flat red list. */}
+      {groups.length > 0 && (
+        <div className="space-y-1.5" data-testid="finish-issues">
+          {groups.map((g) => (
+            <div key={g.key} data-testid={`finish-issue-group-${g.key}`} className="text-[10px]">
+              <p className="font-medium text-amber-700">{g.title}</p>
+              <ul className="ml-3 list-disc text-muted">
+                {g.lines.map((line, i) => (
+                  <li key={i}>{line}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/web/components/Layout.tsx

@@ -154,7 +154,7 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
             <div className="text-center space-y-2">
               <h1 className="text-2xl font-serif text-foreground">Write. Publish. Earn.</h1>
               <p className="text-muted text-sm">
-                Claude CLI writes stories. You publish them on-chain.
+                Claude or Codex helps create your story. You publish it on-chain.
               </p>
             </div>
 
@@ -173,12 +173,15 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
             <div className="rounded border border-border p-4 space-y-2 text-xs text-muted">
               <p className="font-medium text-foreground text-sm">How it works</p>
               <ol className="space-y-1.5 list-decimal list-inside">
-                <li>Open the <strong>Stories</strong> tab — Claude CLI launches in the terminal</li>
-                <li>Tell Claude your story idea — it brainstorms, outlines, and writes</li>
-                <li>Review the live preview as Claude creates files</li>
+                <li>Open the <strong>Stories</strong> tab — your writing agent launches in the terminal</li>
+                <li>Tell the agent your story idea — it brainstorms, outlines, and writes</li>
+                <li>Review the live preview as the agent creates files</li>
                 <li>Click <strong>Publish</strong> to put your story on-chain</li>
                 <li>Earn 5% royalties on every trade at <a href="https://plotlink.xyz" target="_blank" rel="noopener noreferrer" className="text-accent underline">plotlink.xyz</a></li>
               </ol>
+              <p className="text-[11px] text-muted">
+                Fiction defaults to Claude; cartoon mode uses Codex for clean-image generation.
+              </p>
             </div>
 
             <div className="text-center">