plotlink-ows 1.0.33 → 1.2.94

package/app/web/components/CartoonPublishPreview.tsx

@@ -0,0 +1,121 @@
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import { summarizeCartoonMarkdown, PROSE_PREVIEW_LIMIT } from "../lib/cartoon-publish-summary";
+import { cartoonPublishVerdict, type CartoonReadinessStage } from "@app-lib/cartoon-readiness";
+
+/** Custom sanitizer matching plotlink.xyz — allows img with src, alt, title. */
+const sanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    img: ["src", "alt", "title"],
+  },
+};
+
+const VERDICT_TONE: Record<"ok" | "info" | "warning" | "blocker", string> = {
+  ok: "border-green-300 bg-green-50 text-green-800",
+  info: "border-accent/30 bg-accent/5 text-foreground",
+  warning: "border-amber-300 bg-amber-50 text-amber-800",
+  blocker: "border-error/30 bg-error/5 text-error",
+};
+
+interface CartoonPublishPreviewProps {
+  /** The exact plot-NN.md markdown that will be sent to PlotLink. */
+  content: string;
+  /** Current readiness stage (from classifyCartoonReadiness), if known. */
+  stage: CartoonReadinessStage | null;
+}
+
+/**
+ * Publish Preview: renders EXACTLY the markdown PlotLink will publish (image
+ * blocks plus any prose actually in the markdown), with a compact pre-publish
+ * summary — image count, char count, readiness, and any non-image prose that
+ * will be published. This is deliberately NOT the cuts.json planning view (see
+ * CartoonPreview / Cut Inspector); planning prose must not masquerade as publish
+ * content (#289).
+ */
+export function CartoonPublishPreview({ content, stage }: CartoonPublishPreviewProps) {
+  const summary = summarizeCartoonMarkdown(content);
+  const truncated = summary.nonImageProse.length > PROSE_PREVIEW_LIMIT;
+  // Two-axis verdict (#421): "Publish possible?" (hard) vs "Recommended?" (soft),
+  // so a placeholder is never shown as simply "Ready to publish".
+  const verdict = cartoonPublishVerdict({
+    stage,
+    imageCount: summary.imageCount,
+    hasNonImageProse: summary.nonImageProse.length > 0,
+  });
+
+  return (
+    <div className="h-full overflow-y-auto" data-testid="cartoon-publish-preview">
+      {/* Compact pre-publish content summary */}
+      <div
+        className="px-4 py-2 border-b border-border text-[10px] text-muted flex flex-wrap items-center gap-x-3 gap-y-1"
+        data-testid="cartoon-publish-summary"
+      >
+        <span>{summary.imageCount} image{summary.imageCount === 1 ? "" : "s"}</span>
+        <span>{summary.charCount.toLocaleString()} / 10,000 chars</span>
+        <span
+          className={`rounded-full px-2 py-0.5 font-medium ${verdict.possible ? "bg-green-100 text-green-800" : "bg-background text-muted"}`}
+          data-testid="publish-possible"
+        >
+          {verdict.possible ? "Publish possible" : "Publish not possible yet"}
+        </span>
+        <span
+          className={`rounded-full px-2 py-0.5 font-medium ${verdict.recommended ? "bg-green-100 text-green-800" : verdict.tone === "warning" ? "bg-amber-100 text-amber-800" : "bg-background text-muted"}`}
+          data-testid="publish-recommended"
+        >
+          {verdict.recommended ? "Recommended" : "Not recommended yet"}
+        </span>
+      </div>
+
+      {/* Plain-language verdict headline + the single next action (#421), so the
+          writer sees what to do instead of decoding validator strings. */}
+      <div
+        className={`px-4 py-2 border-b text-[11px] ${VERDICT_TONE[verdict.tone]}`}
+        data-testid="cartoon-publish-verdict"
+      >
+        <p className="font-medium">{verdict.headline}</p>
+        {verdict.detail && <p className="mt-0.5 opacity-90">{verdict.detail}</p>}
+        {verdict.action && <p className="mt-0.5 opacity-90">→ {verdict.action}</p>}
+      </div>
+
+      {/* Any non-image text in the markdown WILL be published verbatim. Surface
+          it explicitly so leftover planning/placeholder prose can't slip past. */}
+      {summary.nonImageProse && (
+        <div
+          className="px-4 py-2 border-b border-amber-300 bg-amber-50 text-[11px] text-amber-800"
+          data-testid="cartoon-nonimage-prose"
+        >
+          <p className="font-medium">⚠ Non-image text in the published markdown:</p>
+          <p className="font-mono mt-1 whitespace-pre-wrap break-words">
+            {summary.nonImageProsePreview}{truncated ? "…" : ""}
+          </p>
+          <p className="mt-1">
+            This text publishes verbatim around the comic images. Remove it (or re-run
+            “Prepare episode for publish”) if it is planning or placeholder prose.
+          </p>
+        </div>
+      )}
+
+      {/* Exactly what PlotLink renders from the published markdown */}
+      <div className="max-w-lg mx-auto px-4 py-6">
+        {content.trim() ? (
+          <div className="prose max-w-none">
+            <ReactMarkdown
+              remarkPlugins={[remarkBreaks, remarkGfm]}
+              rehypePlugins={[[rehypeSanitize, sanitizeSchema]]}
+            >
+              {content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <p className="text-muted italic text-sm" data-testid="cartoon-publish-empty">
+            No publish markdown yet — build it from the cut plan (Edit → Upload &amp; Prepare for Publish).
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/web/components/CartoonStepGuide.tsx

@@ -0,0 +1,90 @@
+import { CARTOON_CLEAN_IMAGE_HELP, type CartoonChecklist } from "@app-lib/cartoon-readiness";
+
+interface CartoonStepGuideProps {
+  checklist: CartoonChecklist | null;
+}
+
+const STATUS_MARK: Record<"done" | "current" | "todo", string> = {
+  done: "✓",
+  current: "▸",
+  todo: "○",
+};
+
+/**
+ * Granular step checklist for the cartoon plot workspace (#335). Renders the six
+ * production steps a creator actually performs — plan cuts → create clean images
+ * → add bubbles → export → upload → publish — each with real per-cut status and
+ * a plain-language "next step" line, so a first-time writer can tell what to do
+ * next without knowing what "markdown generation" means. The checklist is
+ * computed upstream (it needs cuts.json + asset/upload/publish state); this just
+ * renders it. Renders nothing when there is no checklist (e.g. a fiction plot),
+ * so it never appears outside the cartoon flow.
+ */
+export function CartoonStepGuide({ checklist }: CartoonStepGuideProps) {
+  if (!checklist || checklist.steps.length === 0) return null;
+  const { steps, nextStep } = checklist;
+
+  return (
+    <div
+      className="w-full max-w-[32rem] flex flex-col gap-3 rounded-xl border border-border bg-surface/70 p-3"
+      data-testid="cartoon-step-guide"
+      data-layout="diagram"
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-medium text-foreground">Episode steps</span>
+        <span className="text-[10px] uppercase tracking-[0.18em] text-muted">Flow</span>
+      </div>
+      <ol className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+        {steps.map((s, i) => (
+          <li
+            key={s.key}
+            data-testid={`cartoon-step-${s.key}`}
+            data-status={s.status}
+            className={`rounded-lg border px-2.5 py-2 text-xs ${
+              s.status === "current"
+                ? "border-accent/40 bg-accent/10 text-accent"
+                : s.status === "done"
+                  ? "border-border bg-background/70 text-foreground"
+                  : "border-border/80 bg-background/50 text-muted"
+            }`}
+          >
+            <div className="flex items-start gap-2">
+              <span
+                aria-hidden
+                className={`mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-medium ${
+                  s.status === "current"
+                    ? "bg-accent text-white"
+                    : s.status === "done"
+                      ? "bg-foreground text-background"
+                      : "bg-surface text-muted"
+                }`}
+              >
+                {STATUS_MARK[s.status]}
+              </span>
+              <span className="flex min-w-0 flex-col gap-0.5">
+                <span className="leading-tight">
+                  {i + 1}. {s.label}
+                </span>
+                {s.detail && (
+                  <span className="font-normal text-[10px] text-muted" data-testid={`cartoon-step-${s.key}-detail`}>
+                    {s.detail}
+                  </span>
+                )}
+              </span>
+            </div>
+          </li>
+        ))}
+      </ol>
+      <div className="rounded-lg border border-border/80 bg-background/60 px-3 py-2">
+        {nextStep && (
+          <span className="block text-xs text-foreground mt-0.5" data-testid="cartoon-next-step">
+            Next: {nextStep}
+          </span>
+        )}
+        <span className="mt-1 block text-[11px] text-muted" data-testid="cartoon-clean-image-help">
+          {CARTOON_CLEAN_IMAGE_HELP}
+        </span>
+      </div>
+    </div>
+  );
+}

package/app/web/components/CartoonWorkflowNav.tsx

@@ -0,0 +1,68 @@
+/**
+ * Persistent right-panel workflow navigation for cartoon stories (#439, spec §2).
+ *
+ * A normal webtoon creator should not need the file tree: this compact tab bar
+ * sits above the right-panel content whenever a CARTOON story is selected and
+ * routes between the workflow pages — Progress, Story Info, Whitepaper, Genesis /
+ * Episode 1, Episodes, Publish. The left file tree stays for power users; opening
+ * a file directly just reflects the closest workflow tab here.
+ *
+ * Fiction renders no nav (the caller only mounts this for cartoon stories), so
+ * the fiction UX is unchanged.
+ */
+
+export type CartoonWorkflowTab =
+  | "progress"
+  | "story-info"
+  | "whitepaper"
+  | "genesis"
+  | "episodes"
+  | "publish";
+
+const TABS: { key: CartoonWorkflowTab; label: string }[] = [
+  { key: "progress", label: "Progress" },
+  { key: "story-info", label: "Story Info" },
+  { key: "whitepaper", label: "Whitepaper" },
+  { key: "genesis", label: "Genesis / Ep 1" },
+  { key: "episodes", label: "Episodes" },
+  { key: "publish", label: "Publish" },
+];
+
+interface CartoonWorkflowNavProps {
+  storyTitle: string;
+  active: CartoonWorkflowTab;
+  onSelect: (tab: CartoonWorkflowTab) => void;
+}
+
+export function CartoonWorkflowNav({ storyTitle, active, onSelect }: CartoonWorkflowNavProps) {
+  return (
+    <div className="flex-shrink-0 border-b border-border bg-surface/40" data-testid="cartoon-workflow-nav">
+      <div className="flex items-center gap-2 px-3 pt-2">
+        <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-accent">Cartoon</span>
+        <span className="text-xs font-serif text-foreground truncate">{storyTitle}</span>
+      </div>
+      <div className="flex items-center gap-1 px-2 py-1.5 overflow-x-auto" role="tablist">
+        {TABS.map((tab) => {
+          const isActive = tab.key === active;
+          return (
+            <button
+              key={tab.key}
+              role="tab"
+              aria-selected={isActive}
+              data-testid={`nav-tab-${tab.key}`}
+              data-active={isActive}
+              onClick={() => onSelect(tab.key)}
+              className={`flex-shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                isActive
+                  ? "bg-accent text-white"
+                  : "text-muted hover:text-foreground hover:bg-surface"
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/app/web/components/CodexImportPicker.tsx

@@ -0,0 +1,230 @@
+import { useEffect, useMemo, useState } from "react";
+import { listCodexCacheImages, fetchCodexCacheFile, type CodexCacheImage } from "../lib/codex-import";
+
+type AuthFetch = (url: string, opts?: RequestInit) => Promise<Response>;
+
+/**
+ * Codex generated-image cache picker (#403, visual selection + filtering #409).
+ *
+ * Lists the recent images in Codex's generated-image cache (newest first) and
+ * lets the writer import one straight into the current cut — so a Codex-generated
+ * PNG no longer requires hunting through a hidden `~/.codex/generated_images`
+ * folder in an OS file dialog. Picking an image fetches its bytes as a File and
+ * hands it to `onImport`, which runs the SAME in-browser PNG→WebP conversion +
+ * upload-clean path as a manually-selected file, so the asset constraints and
+ * upload validation are unchanged.
+ *
+ * #409: the cache can hold a long run of near-identical `ig_<hash>.png` names, so
+ * the picker is built for *visual* selection — a large thumbnail leads each row,
+ * the noisy hash filename is demoted to a hover title, and the readable metadata
+ * (how recently it was generated + its size) is what the writer reads. A filter
+ * box narrows a long list by filename. The list stays read-only until the writer
+ * explicitly clicks Import.
+ *
+ * Read-only and best-effort: a missing/empty cache (e.g. Codex not installed)
+ * simply shows an empty state with no error, since this is an optional shortcut
+ * over the still-present manual "Upload clean image" button.
+ */
+
+/** Load an auth-protected URL as a blob object URL for an <img> thumbnail. */
+function useAuthedObjectUrl(url: string, authFetch: AuthFetch): string | null {
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+  useEffect(() => {
+    let revoked: string | null = null;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await authFetch(url);
+        if (!res.ok) return;
+        const blob = await res.blob();
+        if (cancelled) return;
+        revoked = URL.createObjectURL(blob);
+        setObjectUrl(revoked);
+      } catch {
+        /* best-effort thumbnail; the row still imports without it */
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (revoked) URL.revokeObjectURL(revoked);
+    };
+  }, [url, authFetch]);
+  return objectUrl;
+}
+
+export function formatSize(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+
+/**
+ * Human "how long ago" label for a cache image's mtime (#409). Pure and
+ * now-injectable so it's deterministic in tests. The cache lists newest-first, so
+ * this is the writer's main cue for "which one did I just generate".
+ */
+export function formatRelativeTime(mtimeMs: number, nowMs: number): string {
+  const diff = nowMs - mtimeMs;
+  if (!Number.isFinite(diff) || diff < 45_000) return "just now";
+  const mins = Math.round(diff / 60_000);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.round(diff / 3_600_000);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(diff / 86_400_000);
+  if (days < 7) return `${days}d ago`;
+  const weeks = Math.round(diff / (7 * 86_400_000));
+  return `${weeks}w ago`;
+}
+
+function CodexThumb({ image, authFetch }: { image: CodexCacheImage; authFetch: AuthFetch }) {
+  const url = useAuthedObjectUrl(`/api/codex/images/${encodeURIComponent(image.token)}`, authFetch);
+  if (!url) {
+    return <div className="w-16 h-16 flex-shrink-0 rounded border border-border bg-surface" />;
+  }
+  return (
+    <img
+      src={url}
+      alt={image.name}
+      className="w-16 h-16 flex-shrink-0 rounded border border-border object-cover bg-white"
+    />
+  );
+}
+
+export function CodexImportPicker({
+  authFetch,
+  cutId,
+  onImport,
+  onClose,
+}: {
+  authFetch: AuthFetch;
+  cutId: number;
+  /** Receives the fetched cache file; runs the shared PNG→WebP import + upload. */
+  onImport: (file: File) => Promise<void>;
+  onClose: () => void;
+}) {
+  const [images, setImages] = useState<CodexCacheImage[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [importingToken, setImportingToken] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const list = await listCodexCacheImages(authFetch);
+      if (!cancelled) setImages(list);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [authFetch]);
+
+  const trimmedQuery = query.trim().toLowerCase();
+  const filtered = useMemo(() => {
+    if (!images) return [];
+    if (!trimmedQuery) return images;
+    return images.filter((img) => img.name.toLowerCase().includes(trimmedQuery));
+  }, [images, trimmedQuery]);
+
+  // One timestamp per render so all rows share the same "x ago" reference point.
+  const now = Date.now();
+
+  const handlePick = async (image: CodexCacheImage) => {
+    setError(null);
+    setImportingToken(image.token);
+    try {
+      const file = await fetchCodexCacheFile(authFetch, image);
+      await onImport(file);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not import the generated image");
+    } finally {
+      setImportingToken(null);
+    }
+  };
+
+  const hasImages = images !== null && images.length > 0;
+
+  return (
+    <div
+      className="rounded border border-border bg-surface/60 p-2 space-y-2"
+      data-testid={`codex-picker-${cutId}`}
+    >
+      <div className="flex items-center justify-between">
+        <p className="text-[11px] font-medium text-foreground">Import a Codex-generated image</p>
+        <button
+          onClick={onClose}
+          data-testid={`codex-picker-close-${cutId}`}
+          className="text-[11px] text-muted hover:text-foreground"
+        >
+          Close
+        </button>
+      </div>
+
+      {hasImages && (
+        <div className="flex items-center gap-2">
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Filter by file name…"
+            data-testid={`codex-picker-search-${cutId}`}
+            className="min-w-0 flex-1 px-2 py-1 text-[11px] border border-border rounded bg-transparent focus:border-accent focus:outline-none"
+          />
+          <span className="text-[10px] text-muted whitespace-nowrap" data-testid={`codex-picker-count-${cutId}`}>
+            {trimmedQuery ? `${filtered.length} of ${images!.length}` : `${images!.length} image${images!.length === 1 ? "" : "s"}`}
+          </span>
+        </div>
+      )}
+
+      {images === null && (
+        <p className="text-[11px] text-muted" data-testid={`codex-picker-loading-${cutId}`}>
+          Looking for generated images…
+        </p>
+      )}
+
+      {images !== null && images.length === 0 && (
+        <p className="text-[11px] text-muted" data-testid={`codex-picker-empty-${cutId}`}>
+          No generated images found in the Codex cache yet. Generate art in Codex, then reopen this
+          list — or use &ldquo;Upload clean image&rdquo; to pick a file.
+        </p>
+      )}
+
+      {hasImages && filtered.length === 0 && (
+        <p className="text-[11px] text-muted" data-testid={`codex-picker-no-match-${cutId}`}>
+          No generated images match &ldquo;{query.trim()}&rdquo;.
+        </p>
+      )}
+
+      {hasImages && filtered.length > 0 && (
+        <ul className="space-y-1 max-h-72 overflow-y-auto">
+          {filtered.map((img) => (
+            <li
+              key={img.token}
+              data-testid={`codex-image-${img.token}`}
+              className="flex items-center gap-2 rounded border border-border bg-background/40 p-1.5"
+            >
+              <CodexThumb image={img} authFetch={authFetch} />
+              <div className="min-w-0 flex-1">
+                <p className="text-[11px] text-foreground">
+                  {formatRelativeTime(img.mtimeMs, now)} · {formatSize(img.size)}
+                </p>
+                <p className="truncate text-[10px] font-mono text-muted" title={img.name}>
+                  {img.name}
+                </p>
+              </div>
+              <button
+                onClick={() => handlePick(img)}
+                disabled={importingToken !== null}
+                data-testid={`codex-import-${img.token}`}
+                className="px-2 py-1 text-[11px] border border-accent/30 text-accent rounded hover:bg-accent/5 disabled:opacity-50"
+              >
+                {importingToken === img.token ? "Importing…" : "Import to this cut"}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {error && <p className="text-[11px] text-error">{error}</p>}
+    </div>
+  );
+}