plotlink-ows 0.1.18 → 1.0.4

package/app/server.ts

@@ -17,6 +17,7 @@ import { publishRoutes } from "./routes/publish";
 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 { execSync } from "child_process";
 import fs from "fs";
@@ -40,6 +41,8 @@ app.use("/api/terminal/*", requireAuth);
 app.route("/api/terminal", terminalRoutes);
 app.use("/api/stories/*", requireAuth);
 app.route("/api/stories", storiesRoutes);
+app.use("/api/settings/*", requireAuth);
+app.route("/api/settings", settingsRoutes);
 
 // Health check
 app.get("/api/health", (c) => c.json({ status: "ok" }));
@@ -82,6 +85,7 @@ async function start() {
   const { WebSocketServer } = await import("ws");
   const wss = new WebSocketServer({ noServer: true });
   // server from serve() IS an http.Server
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (server as any).on("upgrade", (req: any, socket: any, head: any) => {
     const url = new URL(req.url || "", `http://localhost:${port}`);
     if (url.pathname === "/ws/terminal") {
@@ -91,8 +95,10 @@ async function start() {
       import("./db").then(async ({ db }) => {
         const session = await db.session.findUnique({ where: { token: wsToken } });
         if (!session || session.expiresAt < new Date()) { socket.destroy(); return; }
+        const story = url.searchParams.get("story") || undefined;
+        const resume = url.searchParams.get("resume") === "true";
         wss.handleUpgrade(req, socket, head, (ws) => {
-          attachTerminalWs(ws as unknown as WebSocket);
+          attachTerminalWs(ws as unknown as WebSocket, story, resume);
         });
       }).catch(() => socket.destroy());
     }

package/app/web/components/Dashboard.tsx

@@ -9,17 +9,27 @@ interface WalletInfo {
   usdcBalance: string;
 }
 
-interface Story {
+interface StoryFile {
+  file: string;
+  status: string;
+  txHash?: string | null;
+  gasCostEth?: string | null;
+  publishedAt?: string | null;
+}
+
+interface StoryGroup {
   id: string;
   title: string;
   genre: string | null;
-  status: string;
-  txHash?: string | null;
+  storyName: string;
   storylineId?: number | null;
-  gasCostEth?: string | null;
-  gasCostUsd?: string | null;
-  createdAt: string;
-  updatedAt?: string;
+  plotCount: number;
+  publishedFiles: number;
+  hasNotIndexed: boolean;
+  totalGasCostEth?: string | null;
+  totalGasCostUsd?: string | null;
+  latestPublishedAt?: string | null;
+  files: StoryFile[];
 }
 
 interface DashboardData {
@@ -28,7 +38,7 @@ interface DashboardData {
   royalties: { earned: string; claimed: string; unclaimed: string; token: string };
   pnl: { totalCostsEth: string; totalCostsUsd: string; totalRoyaltiesPlot: string; totalRoyaltiesUsd: string; netPnlUsd: string; plotUsdPrice: string };
   stories: {
-    published: Story[];
+    published: StoryGroup[];
     totalPublished: number;
     totalStories: number;
     totalFiles: number;
@@ -50,7 +60,12 @@ export function Dashboard({ token }: { token: string }) {
   useEffect(() => { loadDashboard(); }, []);
 
   const truncate = (addr: string) => `${addr.slice(0, 6)}...${addr.slice(-4)}`;
-  const formatDate = (d: string) => new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  const formatDate = (d: string | undefined | null) => {
+    if (!d) return "Unknown date";
+    const date = new Date(d);
+    if (isNaN(date.getTime())) return "Unknown date";
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  };
 
   if (!data) {
     return (
@@ -140,38 +155,74 @@ export function Dashboard({ token }: { token: string }) {
         {data.stories.published.length === 0 ? (
           <p className="text-muted text-xs">no published stories yet</p>
         ) : (
-          <div className="space-y-2">
+          <div className="space-y-3">
             {data.stories.published.map((story) => (
-              <div key={story.id} className="bg-surface rounded p-3">
-                <div className="flex items-center justify-between">
+              <div key={story.id} className="bg-surface rounded border border-border p-4">
+                <div className="flex items-start justify-between">
                   <div>
-                    <span className="text-foreground text-sm font-medium">{story.title}</span>
-                    {story.genre && <span className="text-accent ml-2 text-[10px]">{story.genre}</span>}
+                    {story.genre && (
+                      <span className="bg-accent/10 text-accent rounded px-2 py-0.5 text-[10px] font-medium">{story.genre}</span>
+                    )}
+                    <h4 className="text-foreground mt-1 text-sm font-serif font-medium">{story.title}</h4>
+                    <p className="text-muted mt-0.5 text-[10px] font-mono">{story.storyName}</p>
                   </div>
                   <div className="flex items-center gap-2">
-                    <span className="rounded border border-green-700/30 px-1.5 py-0.5 text-[9px] text-accent">published</span>
-                    {story.storylineId ? (
-                      <a
-                        href={`https://plotlink.xyz/story/${story.storylineId}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-accent text-[10px] underline"
-                      >
-                        view
-                      </a>
-                    ) : (
-                      <a href="https://plotlink.xyz" target="_blank" rel="noopener noreferrer" className="text-accent text-[10px] underline">plotlink.xyz</a>
+                    {story.hasNotIndexed && (
+                      <span className="rounded border border-amber-600/30 px-1.5 py-0.5 text-[9px] text-amber-700">not indexed</span>
                     )}
+                    <span className="rounded border border-green-700/30 px-1.5 py-0.5 text-[9px] text-green-700">
+                      {story.publishedFiles} published
+                    </span>
+                  </div>
+                </div>
+                <div className="mt-2 grid grid-cols-3 gap-2 text-center">
+                  <div className="rounded bg-background p-1.5">
+                    <div className="text-foreground text-sm font-medium">{story.plotCount}</div>
+                    <div className="text-muted text-[9px]">Plots</div>
                   </div>
+                  <div className="rounded bg-background p-1.5">
+                    <div className="text-foreground text-sm font-medium font-mono">
+                      {story.storylineId ? `#${story.storylineId}` : "—"}
+                    </div>
+                    <div className="text-muted text-[9px]">Storyline</div>
+                  </div>
+                  <div className="rounded bg-background p-1.5">
+                    <div className="text-foreground text-sm font-medium">
+                      {story.totalGasCostEth ?? "—"}
+                    </div>
+                    <div className="text-muted text-[9px]">Gas (ETH)</div>
+                  </div>
+                </div>
+                {/* Individual files */}
+                <div className="mt-2 space-y-1">
+                  {story.files.map((f) => (
+                    <div key={f.file} className="flex items-center justify-between text-[10px]">
+                      <div className="flex items-center gap-1.5">
+                        <span className={f.status === "published-not-indexed" ? "text-amber-700" : "text-green-700"}>
+                          {f.status === "published-not-indexed" ? "\u26A0" : "\u2713"}
+                        </span>
+                        <span className="text-muted font-mono">{f.file}</span>
+                      </div>
+                      {f.txHash && (
+                        <a href={`https://basescan.org/tx/${f.txHash}`} target="_blank" rel="noopener noreferrer" className="text-muted hover:text-accent font-mono">
+                          tx:{f.txHash.slice(0, 8)}...
+                        </a>
+                      )}
+                    </div>
+                  ))}
                 </div>
-                <div className="mt-1 flex items-center gap-3 text-[10px]">
-                  <span className="text-muted">{formatDate(story.createdAt)}</span>
-                  {story.txHash && (
-                    <a href={`https://basescan.org/tx/${story.txHash}`} target="_blank" rel="noopener noreferrer" className="text-muted hover:text-accent font-mono">
-                      tx:{story.txHash.slice(0, 10)}...
+                <div className="mt-2 flex items-center justify-between text-[10px]">
+                  <span className="text-muted">{formatDate(story.latestPublishedAt)}</span>
+                  {story.storylineId && (
+                    <a
+                      href={`https://plotlink.xyz/story/${story.storylineId}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-accent underline"
+                    >
+                      View on PlotLink
                     </a>
                   )}
-                  {story.gasCostEth && <span className="text-muted">{story.gasCostEth} ETH{story.gasCostUsd ? ` (~$${story.gasCostUsd})` : ""}</span>}
                 </div>
               </div>
             ))}

package/app/web/components/PreviewPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
@@ -14,22 +14,48 @@ interface PreviewPanelProps {
 
 interface FileData {
   file: string;
-  status: "published" | "pending" | "draft";
+  status: "published" | "published-not-indexed" | "pending" | "draft";
   content: string;
   txHash?: string;
   storylineId?: number;
+  plotIndex?: number;
+  indexError?: string;
+  publishedAt?: string;
 }
 
+type Tab = "preview" | "edit";
+
 export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publishingFile }: PreviewPanelProps) {
   const [fileData, setFileData] = useState<FileData | null>(null);
   const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState<Tab>("preview");
+  const [editContent, setEditContent] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const [retrying, setRetrying] = useState(false);
+  const [indexTimeLeft, setIndexTimeLeft] = useState<number | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const dirtyRef = useRef(false);
+
+  const prevFileRef = useRef<string | null>(null);
 
   const loadFile = useCallback(async () => {
     if (!storyName || !fileName) { setFileData(null); return; }
+    const fileKey = `${storyName}/${fileName}`;
+    const isNewFile = prevFileRef.current !== fileKey;
+    if (isNewFile) {
+      prevFileRef.current = fileKey;
+    }
     try {
       const res = await authFetch(`/api/stories/${storyName}/${fileName}`);
       if (res.ok) {
-        setFileData(await res.json());
+        const data: FileData = await res.json();
+        setFileData(data);
+        // Update edit content on new file or when no unsaved changes
+        if (isNewFile || !dirtyRef.current) {
+          setEditContent(data.content ?? "");
+          if (isNewFile) { setDirty(false); dirtyRef.current = false; }
+        }
       }
     } catch { /* ignore */ }
   }, [storyName, fileName, authFetch]);
@@ -41,12 +67,64 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
     loadFile().finally(() => setLoading(false));
   }, [loadFile]);
 
-  // Auto-refresh every 3 seconds
+  // Auto-refresh every 3 seconds (only in preview mode when not dirty)
   useEffect(() => {
     if (!storyName || !fileName) return;
+    if (activeTab === "edit" && dirty) return;
     const interval = setInterval(loadFile, 3000);
     return () => clearInterval(interval);
-  }, [storyName, fileName, loadFile]);
+  }, [storyName, fileName, loadFile, activeTab, dirty]);
+
+  const handleSave = useCallback(async () => {
+    if (!storyName || !fileName) return;
+    setSaving(true);
+    try {
+      const res = await authFetch(`/api/stories/${storyName}/${fileName}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: editContent }),
+      });
+      if (res.ok) {
+        setDirty(false); dirtyRef.current = false;
+        setFileData((prev) => prev ? { ...prev, content: editContent } : prev);
+      }
+    } catch { /* ignore */ }
+    setSaving(false);
+  }, [storyName, fileName, authFetch, editContent]);
+
+  // Ctrl+S / Cmd+S to save
+  useEffect(() => {
+    if (activeTab !== "edit") return;
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        handleSave();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [activeTab, handleSave]);
+
+  // 5-minute countdown for Retry Index button
+  useEffect(() => {
+    if (fileData?.status !== "published-not-indexed" || !fileData.publishedAt) {
+      return;
+    }
+    const publishedAt = new Date(fileData.publishedAt).getTime();
+    const windowMs = 5 * 60 * 1000;
+    const update = () => {
+      const remaining = Math.max(0, windowMs - (Date.now() - publishedAt));
+      setIndexTimeLeft(remaining);
+    };
+    update();
+    const interval = setInterval(update, 1000);
+    return () => clearInterval(interval);
+  }, [fileData?.status, fileData?.publishedAt]);
+
+  const indexExpired = indexTimeLeft !== null && indexTimeLeft <= 0;
+  const indexCountdown = indexTimeLeft !== null && indexTimeLeft > 0
+    ? `${Math.floor(indexTimeLeft / 60000)}:${String(Math.floor((indexTimeLeft % 60000) / 1000)).padStart(2, "0")}`
+    : null;
 
   if (!storyName || !fileName) {
     return (
@@ -67,55 +145,211 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
     );
   }
 
-  const charCount = fileData?.content?.length ?? 0;
+  const content = activeTab === "edit" ? editContent : (fileData?.content ?? "");
+  const charCount = content.length;
   const isGenesis = fileName === "genesis.md";
-  const charLimit = isGenesis ? 1000 : 10000;
-  const overLimit = charCount > charLimit;
+  const isPlot = fileName ? /^plot-\d+\.md$/.test(fileName) : false;
+  const isPublished = fileData?.status === "published" || fileData?.status === "published-not-indexed";
+  const charLimit = isGenesis ? 1000 : isPlot ? 10000 : null;
+  // Don't show over-limit warning for already-published files
+  const overLimit = !isPublished && charLimit !== null && charCount > charLimit;
 
   return (
     <div className="h-full flex flex-col">
-      <div className="px-3 py-1.5 border-b border-border flex items-center justify-between">
-        <div className="flex items-center gap-2 text-xs font-mono text-muted">
-          <span>{storyName}/{fileName}</span>
-          {fileData?.status === "published" && (
-            <span className="text-green-700 font-medium">Published</span>
-          )}
-          {fileData?.status === "pending" && (
-            <span className="text-amber-700 font-medium">Pending</span>
-          )}
+      {/* Header with file path + tabs */}
+      <div className="border-b border-border">
+        <div className="px-3 py-1.5 flex items-center justify-between">
+          <div className="flex items-center gap-2 text-xs font-mono text-muted">
+            <span>{storyName}/{fileName}</span>
+            {fileData?.status === "published" && (
+              <span className="text-green-700 font-medium">Published</span>
+            )}
+            {fileData?.status === "published-not-indexed" && (
+              <span className="text-amber-700 font-medium" title={fileData.indexError}>Published (not indexed)</span>
+            )}
+            {fileData?.status === "pending" && (
+              <span className="text-amber-700 font-medium">Pending</span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={`text-xs font-mono ${overLimit ? "text-error font-medium" : "text-muted"}`}>
+              {charCount.toLocaleString()}{charLimit !== null ? `/${charLimit.toLocaleString()}` : " chars"}
+            </span>
+            {overLimit && (
+              <span className="text-error text-xs font-medium">
+                {(charCount - charLimit).toLocaleString()} over limit
+              </span>
+            )}
+          </div>
         </div>
-        <div className="flex items-center gap-2">
-          <span className={`text-xs font-mono ${overLimit ? "text-error" : "text-muted"}`}>
-            {charCount.toLocaleString()}/{charLimit.toLocaleString()}
-          </span>
+
+        {/* Tabs */}
+        <div className="flex px-3 gap-1">
+          <button
+            onClick={() => setActiveTab("preview")}
+            className={`px-3 py-1 text-xs font-medium border-b-2 transition-colors ${
+              activeTab === "preview"
+                ? "border-accent text-accent"
+                : "border-transparent text-muted hover:text-foreground"
+            }`}
+          >
+            Preview
+          </button>
+          <button
+            onClick={() => setActiveTab("edit")}
+            className={`px-3 py-1 text-xs font-medium border-b-2 transition-colors ${
+              activeTab === "edit"
+                ? "border-accent text-accent"
+                : "border-transparent text-muted hover:text-foreground"
+            }`}
+          >
+            Edit
+            {dirty && <span className="ml-1 text-amber-600">*</span>}
+          </button>
         </div>
       </div>
 
-      <div className="flex-1 min-h-0 overflow-y-auto px-6 py-4" style={{ background: "var(--paper-bg)" }}>
-        {fileData?.content ? (
-          <div className="prose max-w-none">
-            <ReactMarkdown
-              remarkPlugins={[remarkBreaks, remarkGfm]}
-              rehypePlugins={[rehypeSanitize]}
+      {/* Content area */}
+      {activeTab === "preview" ? (
+        <div className="flex-1 min-h-0 overflow-y-auto px-6 py-4" style={{ background: "var(--paper-bg)" }}>
+          {fileData?.content ? (
+            <div className="prose max-w-none">
+              <ReactMarkdown
+                remarkPlugins={[remarkBreaks, remarkGfm]}
+                rehypePlugins={[rehypeSanitize]}
+              >
+                {fileData.content}
+              </ReactMarkdown>
+            </div>
+          ) : (
+            <p className="text-muted italic">No content</p>
+          )}
+        </div>
+      ) : (
+        <div className="flex-1 min-h-0 flex flex-col" style={{ background: "var(--paper-bg)" }}>
+          <textarea
+            ref={textareaRef}
+            value={editContent}
+            onChange={(e) => { setEditContent(e.target.value); setDirty(true); dirtyRef.current = true; }}
+            className="flex-1 min-h-0 w-full resize-none px-4 py-3 text-sm leading-relaxed focus:outline-none"
+            style={{
+              fontFamily: '"Geist Mono", ui-monospace, monospace',
+              background: "var(--paper-bg)",
+              color: "var(--text)",
+            }}
+            spellCheck={false}
+          />
+          <div className="px-3 py-1.5 border-t border-border flex items-center justify-between">
+            <span className="text-xs text-muted">
+              {dirty ? "Unsaved changes" : "No changes"}
+            </span>
+            <button
+              onClick={handleSave}
+              disabled={!dirty || saving}
+              className="px-3 py-1 bg-accent text-white text-xs rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {fileData.content}
-            </ReactMarkdown>
+              {saving ? "Saving..." : "Save"}
+            </button>
           </div>
-        ) : (
-          <p className="text-muted italic">No content</p>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Action bar */}
       <div className="px-3 py-2 border-t border-border flex items-center justify-between">
         {fileName === "structure.md" ? (
           <p className="text-muted text-xs italic">This is your story outline — not publishable. Ask AI to write the genesis next.</p>
+        ) : fileData?.status === "published-not-indexed" ? (
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2 text-xs">
+              <span className="text-amber-700">Published on-chain but not indexed on PlotLink</span>
+              {!indexExpired && (
+                <button
+                  onClick={async () => {
+                    if (!storyName || !fileName || !fileData.txHash) return;
+                    setRetrying(true);
+                    try {
+                      const res = await authFetch("/api/publish/retry-index", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                          storyName, fileName,
+                          txHash: fileData.txHash,
+                          content: fileData.content,
+                          storylineId: fileData.storylineId,
+                        }),
+                      });
+                      const data = await res.json();
+                      if (data.ok) {
+                        await authFetch(`/api/stories/${storyName}/${fileName}/publish-status`, {
+                          method: "POST",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({
+                            txHash: fileData.txHash,
+                            storylineId: fileData.storylineId,
+                            contentCid: "",
+                            gasCost: "",
+                          }),
+                        });
+                        loadFile();
+                      }
+                    } catch { /* ignore */ }
+                    setRetrying(false);
+                  }}
+                  disabled={retrying}
+                  className="px-3 py-1 bg-accent text-white text-xs rounded hover:bg-accent-dim disabled:opacity-50"
+                >
+                  {retrying ? "Retrying..." : `Retry Index${indexCountdown ? ` (${indexCountdown})` : ""}`}
+                </button>
+              )}
+              {isPlot && (
+                <button
+                  onClick={() => storyName && fileName && onPublish?.(storyName, fileName)}
+                  disabled={!!publishingFile}
+                  className="px-3 py-1 border border-border text-xs rounded hover:bg-surface disabled:opacity-50"
+                >
+                  {publishingFile === fileName ? "Publishing..." : "Retry Publish"}
+                </button>
+              )}
+              {fileData.txHash && (
+                <a
+                  href={`https://basescan.org/tx/${fileData.txHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted underline"
+                >
+                  BaseScan
+                </a>
+              )}
+            </div>
+            <p className="text-muted text-xs">
+              {indexExpired
+                ? isPlot
+                  ? "Index window expired. Use Retry Publish to create a new on-chain tx."
+                  : "Index window expired. Contact support or re-publish manually."
+                : isPlot
+                  ? "Try Retry Index first (available for 5 min after publish). If that fails, Retry Publish creates a new on-chain tx."
+                  : "Retry Index is available for 5 min after publish."}
+            </p>
+            {fileData.indexError && (
+              <p className="text-error text-xs">{fileData.indexError}</p>
+            )}
+          </div>
         ) : fileData?.status === "published" ? (
           <div className="flex items-center gap-2 text-xs">
             <span className="text-green-700">Published</span>
             {fileData.storylineId && (
               <a
-                href={`https://plotlink.xyz/story/${fileData.storylineId}`}
+                href={(() => {
+                  const base = `https://plotlink.xyz/story/${fileData.storylineId}`;
+                  if (!isPlot) return base;
+                  // plotIndex convention: contract emits 0-based (genesis=0, plot-01=1)
+                  // plotlink.xyz URLs use the same 0-based index
+                  // Filename fallback: plot-01.md → parseInt("01") = 1 (matches contract)
+                  const idx = fileData.plotIndex != null && fileData.plotIndex > 0
+                    ? fileData.plotIndex
+                    : parseInt(fileName?.match(/^plot-(\d+)\.md$/)?.[1] ?? "1");
+                  return `${base}/${idx}`;
+                })()}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-accent underline"
@@ -135,13 +369,18 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
             )}
           </div>
         ) : (
-          <button
-            onClick={() => storyName && fileName && onPublish?.(storyName, fileName)}
-            disabled={!!publishingFile || fileData?.status === "published"}
-            className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {publishingFile === fileName ? "Publishing..." : "Publish to PlotLink"}
-          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => storyName && fileName && onPublish?.(storyName, fileName)}
+              disabled={!!publishingFile || overLimit}
+              className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {publishingFile === fileName ? "Publishing..." : "Publish to PlotLink"}
+            </button>
+            {overLimit && (
+              <span className="text-error text-xs">Reduce content to publish</span>
+            )}
+          </div>
         )}
       </div>
     </div>