plotlink-ows 1.0.33 → 1.2.95

package/app/server.ts

@@ -22,9 +22,11 @@ import { dashboardRoutes } from "./routes/dashboard";
 import { terminalRoutes, attachTerminalWs } from "./routes/terminal";
 import { storiesRoutes } from "./routes/stories";
 import { settingsRoutes } from "./routes/settings";
-import { initDb } from "./db";
+import { agentRoutes } from "./routes/agent";
+import { codexImagesRoutes } from "./routes/codex-images";
+import { db, initDb } from "./db";
 import { generateClaudeMd } from "./lib/generate-claude-md";
-import { execSync } from "child_process";
+import { loadSchemaStatements } from "./lib/apply-schema";
 import fs from "fs";
 
 const __dirname = __dirnamePre;
@@ -48,6 +50,10 @@ app.use("/api/stories/*", requireAuth);
 app.route("/api/stories", storiesRoutes);
 app.use("/api/settings/*", requireAuth);
 app.route("/api/settings", settingsRoutes);
+app.use("/api/agent/*", requireAuth);
+app.route("/api/agent", agentRoutes);
+app.use("/api/codex/*", requireAuth);
+app.route("/api/codex", codexImagesRoutes);
 
 // App version (read once at startup)
 const appVersion = (() => {
@@ -128,15 +134,36 @@ async function start() {
   // Generate/update ~/.plotlink-ows/CLAUDE.md for agent discovery
   generateClaudeMd();
 
-  // Run Prisma db push to ensure schema is up to date
-  const schemaPath = path.join(__dirname, "prisma", "schema.prisma");
-  execSync(`npx prisma db push --schema ${schemaPath} --skip-generate`, {
-    stdio: "inherit",
-    env: { ...process.env, DATABASE_URL },
-  });
-
-  // Initialize database connection
-  await initDb();
+  // Bring the local SQLite schema up to date WITHOUT the native Prisma
+  // schema-engine. `prisma db push` spawns a platform-specific schema-engine
+  // binary that fails to start in some packed prod-only installs (#484, EPIC
+  // #465: an empty "Schema engine error:" on macOS arm64). Instead we apply the
+  // committed DDL (app/prisma/schema.sql, generated from schema.prisma) through
+  // the Prisma client's library query engine — the same engine the app already
+  // uses for every query, so if the app runs at all, schema setup runs too.
+  // SQLite creates the DB file but NOT its parent dir, so ensure
+  // ~/.plotlink-ows/data exists first (a fresh prod-only install has none).
+  fs.mkdirSync(DATA_DIR, { recursive: true });
+  const schemaSqlPath = path.join(__dirname, "prisma", "schema.sql");
+  try {
+    await initDb(); // connect the client (library query engine; no schema-engine)
+    // Statements are CREATE TABLE/INDEX IF NOT EXISTS, so this is idempotent and
+    // safe to run on every startup against an existing database.
+    for (const statement of loadSchemaStatements(schemaSqlPath)) {
+      await db.$executeRawUnsafe(statement);
+    }
+  } catch (err) {
+    // Surface a useful diagnostic instead of a raw stack (#479/#484).
+    const home = os.homedir();
+    const redact = (s: string) => s.split(home).join("~");
+    console.error("\n  ✗ Database setup failed (applying schema.sql).");
+    console.error(`    schema:   ${redact(schemaSqlPath)}`);
+    console.error(`    database: ${redact(DATABASE_URL)}`);
+    console.error(`    reason:   ${err instanceof Error ? err.message : String(err)}`);
+    console.error("    This usually means a corrupted install (missing the generated Prisma");
+    console.error("    client/query engine or schema.sql). Reinstall with: npx plotlink-ows@latest\n");
+    process.exit(1);
+  }
 
   const port = Number(process.env.APP_PORT) || 7777;
   const server = serve({ fetch: app.fetch, port }, (info) => {
@@ -159,8 +186,16 @@ async function start() {
         if (!session || session.expiresAt < new Date()) { socket.destroy(); return; }
         const story = url.searchParams.get("story") || undefined;
         const resume = url.searchParams.get("resume") === "true";
+        const bypass = url.searchParams.get("bypass") === "true";
+        const provider = url.searchParams.get("provider");
         wss.handleUpgrade(req, socket, head, (ws) => {
-          attachTerminalWs(ws as unknown as WebSocket, story, resume);
+          attachTerminalWs(
+            ws as unknown as WebSocket,
+            story,
+            resume,
+            bypass,
+            provider === "claude" || provider === "codex" ? provider : undefined,
+          );
         });
       }).catch(() => socket.destroy());
     }

package/app/vite.config.ts

@@ -1,10 +1,16 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import path from "path";
 
 export default defineConfig({
   root: "app/web",
   plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@app-lib": path.resolve(__dirname, "lib"),
+    },
+  },
   server: {
     port: 5173,
     proxy: {

package/app/web/components/CartoonNextAction.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from "react";
+import type { StoryProgress } from "@app-lib/story-progress";
+import type { CoachUiAction } from "@app-lib/cartoon-coach";
+import { WorkflowCoachView } from "./WorkflowCoach";
+
+export 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.`;
+}
+
+export function cartoonWorkflowActiveKey(progress: StoryProgress): string | null {
+  const coach = progress.coach ?? null;
+  const m = progress.metadata;
+  const hasStructure = progress.setup.hasStructure;
+  const hasGenesis = progress.setup.hasGenesis;
+  const coverDone = progress.cover === "present";
+  const metadataIncomplete = !m.title || !m.language || !m.genre;
+  const activeEp = progress.episodes.find((e) => !e.published) ?? null;
+  const productionPending = !!activeEp && activeEp.state !== "ready";
+
+  if (!hasStructure) return "whitepaper";
+  if (!hasGenesis) return "genesis.md";
+  if (metadataIncomplete) return "story-info";
+  if (productionPending && coach?.episodeFile) return coach.episodeFile;
+  if (!coverDone) return "story-info";
+  return coach?.episodeFile ?? null;
+}
+
+export function StoryInfoNextActionCard({
+  progress,
+  onOpenStoryInfo,
+}: {
+  progress: StoryProgress;
+  onOpenStoryInfo?: () => void;
+}) {
+  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="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>
+          <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>
+        </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>
+      </div>
+    </div>
+  );
+}
+
+export function CartoonNextActionView({
+  progress,
+  onCoachAction,
+  onOpenStoryInfo,
+}: {
+  progress: StoryProgress;
+  onCoachAction: (action: CoachUiAction, episodeFile: string | null) => void;
+  onOpenStoryInfo?: () => void;
+}) {
+  const activeKey = cartoonWorkflowActiveKey(progress);
+  if (activeKey === "story-info") {
+    return <StoryInfoNextActionCard progress={progress} onOpenStoryInfo={onOpenStoryInfo} />;
+  }
+  return (
+    <WorkflowCoachView
+      coach={progress.coach ?? null}
+      showEmptyState
+      onAction={onCoachAction}
+    />
+  );
+}
+
+export function CartoonNextAction({
+  storyName,
+  authFetch,
+  refreshKey = 0,
+  onCoachAction,
+  onOpenStoryInfo,
+}: {
+  storyName: string;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  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 [loadedKey, setLoadedKey] = useState<string | null>(null);
+  if (loadedKey !== targetKey) {
+    setProgress(undefined);
+    setLoadedKey(targetKey);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    authFetch(`/api/stories/${storyName}/progress`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: StoryProgress | null) => {
+        if (!cancelled) setProgress(isValidProgress(data) ? data : null);
+      })
+      .catch(() => {
+        if (!cancelled) setProgress(null);
+      });
+    return () => { cancelled = true; };
+  }, [storyName, authFetch, refreshKey]);
+
+  if (progress === undefined) return null;
+  if (!progress) {
+    return <WorkflowCoachView coach={null} showEmptyState onAction={onCoachAction} />;
+  }
+  return (
+    <CartoonNextActionView
+      progress={progress}
+      onCoachAction={onCoachAction}
+      onOpenStoryInfo={onOpenStoryInfo}
+    />
+  );
+}
+
+function isValidProgress(data: StoryProgress | null): data is StoryProgress {
+  return !!data
+    && !!data.metadata
+    && !!data.setup
+    && Array.isArray(data.episodes);
+}

package/app/web/components/CartoonPreview.tsx

@@ -0,0 +1,267 @@
+import { useState, useEffect, useCallback } from "react";
+import { AssetImage } from "./asset-image";
+import { cutNextAction } from "@app-lib/cuts";
+
+type AuthFetch = (url: string, opts?: RequestInit) => Promise<Response>;
+
+interface CutDialogue {
+  speaker: string;
+  text: string;
+}
+
+interface Cut {
+  id: number;
+  shotType: string;
+  description: string;
+  characters: string[];
+  dialogue: CutDialogue[];
+  narration: string;
+  sfx: string;
+  cleanImagePath: string | null;
+  finalImagePath: string | null;
+  exportedAt: string | null;
+  uploadedCid: string | null;
+  uploadedUrl: string | null;
+  kind?: "image" | "text";
+  background?: string;
+}
+
+interface CutsFile {
+  version: number;
+  plotFile: string;
+  cuts: Cut[];
+}
+
+interface CartoonPreviewProps {
+  storyName: string;
+  fileName: string;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  // #371: deep-link from a cut's next-action CTA into the Edit tab for that exact
+  // cut. `opensEditor` is whether the lettering editor can open directly (clean
+  // image / text panel / final) vs. just focusing the row to add clean art.
+  onEditCut?: (cutId: number, opensEditor: boolean) => void;
+}
+
+function TextOverlay({ cut }: { cut: Cut }) {
+  const hasText = cut.dialogue.length > 0 || cut.narration || cut.sfx;
+  if (!hasText) return null;
+
+  return (
+    <div className="space-y-1.5" data-testid={`cut-${cut.id}-overlay`}>
+      {cut.dialogue.map((d, i) => (
+        <div key={i} className="flex gap-2 text-xs">
+          <span className="font-medium text-foreground flex-shrink-0">{d.speaker}:</span>
+          <span className="text-foreground">{d.text}</span>
+        </div>
+      ))}
+      {cut.narration && (
+        <div className="border-l-2 border-border pl-3">
+          <p className="text-xs text-muted italic">{cut.narration}</p>
+        </div>
+      )}
+      {cut.sfx && (
+        <p className="text-xs font-mono text-muted">SFX: {cut.sfx}</p>
+      )}
+    </div>
+  );
+}
+
+function CutCard({ cut, storyName, authFetch, onEditCut }: { cut: Cut; storyName: string; authFetch: AuthFetch; onEditCut?: (cutId: number, opensEditor: boolean) => void }) {
+  const hasFinal = !!cut.finalImagePath;
+  const hasClean = !!cut.cleanImagePath;
+  const hasImage = hasFinal || hasClean;
+  // A cut with no clean/final image is a planned image cut whose art is still
+  // pending — even if narration/dialogue text already exists in cuts.json. It is
+  // NOT a finished narration-only card.
+  const hasPlannedText = cut.dialogue.length > 0 || !!cut.narration || !!cut.sfx;
+  const isTextPanel = cut.kind === "text";
+
+  return (
+    <div className="space-y-2">
+      {/* Cut header */}
+      <div className="flex items-center gap-2">
+        <span className="text-[10px] font-mono text-muted bg-surface border border-border rounded px-1.5 py-0.5">
+          #{cut.id}
+        </span>
+        <span className="text-[10px] font-mono text-muted">{cut.shotType}</span>
+        {cut.characters.length > 0 && (
+          <span className="text-[10px] text-muted truncate">
+            {cut.characters.join(", ")}
+          </span>
+        )}
+      </div>
+
+      {/* Final image — lettered, no overlay needed */}
+      {hasFinal && (
+        <AssetImage
+          storyName={storyName}
+          assetPath={cut.finalImagePath!}
+          authFetch={authFetch}
+          alt={cut.description || `Cut ${cut.id}`}
+        />
+      )}
+
+      {/* Clean image with text overlay */}
+      {!hasFinal && hasClean && (
+        <div className="border border-border rounded overflow-hidden">
+          <AssetImage
+            storyName={storyName}
+            assetPath={cut.cleanImagePath!}
+            authFetch={authFetch}
+            alt={cut.description || `Cut ${cut.id}`}
+          />
+          <div className="px-3 py-2 bg-surface/80 border-t border-border">
+            <TextOverlay cut={cut} />
+          </div>
+        </div>
+      )}
+
+      {/* Intentional text/interstitial panel (#351) — not pending art. Shows on
+          its styled background; the text is the panel content, not a caption. */}
+      {!hasImage && isTextPanel && (
+        <div
+          className="w-full border border-border rounded p-4 space-y-2"
+          style={{ background: cut.background || undefined }}
+          data-testid={`cut-${cut.id}-textpanel`}
+        >
+          <span className="text-[10px] font-mono text-muted">Text panel</span>
+          {hasPlannedText ? (
+            <TextOverlay cut={cut} />
+          ) : (
+            <p className="text-xs text-muted italic">Empty text panel — open the editor to add text.</p>
+          )}
+        </div>
+      )}
+
+      {/* Planned image cut — art not generated/uploaded yet */}
+      {!hasImage && !isTextPanel && (
+        <div
+          className="w-full bg-surface border border-dashed border-border rounded p-4 space-y-2"
+          data-testid={`cut-${cut.id}-pending`}
+        >
+          <div className="aspect-video flex flex-col items-center justify-center gap-1 text-center">
+            <span className="text-xs text-muted font-medium">Image pending</span>
+            <span className="text-[10px] text-muted">Planned image cut — generate &amp; upload the art</span>
+          </div>
+          {hasPlannedText && (
+            <div className="border-t border-dashed border-border pt-2 space-y-1">
+              <span className="text-[10px] font-mono text-muted">Planned text (will be lettered onto the image)</span>
+              <TextOverlay cut={cut} />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Description */}
+      {cut.description && (
+        <p className="text-xs text-muted italic">{cut.description}</p>
+      )}
+
+      {/* Text shown below final images (already lettered, so just metadata) */}
+      {hasFinal && (
+        <TextOverlay cut={cut} />
+      )}
+
+      {/* #371: direct next-action CTA — jumps to the Edit tab for THIS cut so the
+          writer never has to hunt for it in the cut list. Works for image cuts
+          and text/interstitial panels alike. */}
+      {onEditCut && (() => {
+        const action = cutNextAction(cut);
+        return (
+          <button
+            type="button"
+            data-testid={`cut-${cut.id}-cta`}
+            data-cut-action={action.key}
+            onClick={() => onEditCut(cut.id, action.opensEditor)}
+            className="w-full px-3 py-1.5 text-xs font-medium rounded bg-accent text-white hover:bg-accent-dim"
+          >
+            {action.label}
+          </button>
+        );
+      })()}
+    </div>
+  );
+}
+
+export function CartoonPreview({ storyName, fileName, authFetch, onEditCut }: CartoonPreviewProps) {
+  const [cutsFile, setCutsFile] = useState<CutsFile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const plotFile = fileName.replace(/\.md$/, "");
+
+  const loadCuts = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await authFetch(`/api/stories/${storyName}/cuts/${plotFile}`);
+      if (res.status === 404) {
+        setCutsFile(null);
+        setLoading(false);
+        return;
+      }
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || "Failed to load cuts");
+        setLoading(false);
+        return;
+      }
+      const data = await res.json();
+      setCutsFile(data);
+    } catch {
+      setError("Failed to load cuts");
+    } finally {
+      setLoading(false);
+    }
+  }, [authFetch, storyName, plotFile]);
+
+  useEffect(() => {
+    loadCuts();
+    const interval = setInterval(loadCuts, 5000);
+    return () => clearInterval(interval);
+  }, [loadCuts]);
+
+  if (loading && !cutsFile) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted text-sm">
+        Loading cuts...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center gap-2 px-4 text-center" data-testid="cuts-error">
+        <p className="text-sm text-error font-medium">Invalid cuts file</p>
+        <p className="text-xs text-error">{error}</p>
+        <p className="text-xs text-muted max-w-sm">
+          {plotFile}.cuts.json must follow the OWS v1 schema. Ask Claude to regenerate it using the v1 cuts schema shown in the cartoon writing instructions.
+        </p>
+        <button onClick={loadCuts} className="text-xs text-accent hover:text-accent-dim">
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (!cutsFile || cutsFile.cuts.length === 0) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center gap-2 px-4 text-center">
+        <p className="text-sm text-muted">No cuts yet</p>
+        <p className="text-xs text-muted">
+          Ask Claude to create a cut plan for this episode.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-lg mx-auto px-4 py-6 space-y-6">
+        {cutsFile.cuts.map((cut) => (
+          <CutCard key={cut.id} cut={cut} storyName={storyName} authFetch={authFetch} onEditCut={onEditCut} />
+        ))}
+      </div>
+    </div>
+  );
+}