plotlink-ows 0.1.15 → 1.0.0

package/app/web/components/StoryBrowser.tsx

@@ -0,0 +1,161 @@
+import { useState, useEffect, useCallback } from "react";
+
+interface FileStatus {
+  file: string;
+  status: "published" | "published-not-indexed" | "pending" | "draft";
+  txHash?: string;
+  storylineId?: number;
+}
+
+interface StoryInfo {
+  name: string;
+  files: FileStatus[];
+  hasStructure: boolean;
+  hasGenesis: boolean;
+  plotCount: number;
+  publishedCount: number;
+}
+
+interface StoryBrowserProps {
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  selectedStory: string | null;
+  selectedFile: string | null;
+  onSelectFile: (storyName: string, fileName: string) => void;
+}
+
+const STATUS_ICON: Record<string, string> = {
+  "published": "\u2713",
+  "published-not-indexed": "\u26A0",
+  "pending": "\u23F3",
+  "draft": "\uD83D\uDCDD",
+};
+
+const STATUS_COLOR: Record<string, string> = {
+  "published": "text-green-700",
+  "published-not-indexed": "text-amber-700",
+  "pending": "text-amber-700",
+  "draft": "text-muted",
+};
+
+export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectFile }: StoryBrowserProps) {
+  const [stories, setStories] = useState<StoryInfo[]>([]);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const loadStories = useCallback(async () => {
+    try {
+      const res = await authFetch("/api/stories");
+      if (res.ok) {
+        const data = await res.json();
+        setStories(data.stories);
+      }
+    } catch { /* ignore */ }
+  }, [authFetch]);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- initial load + polling
+    loadStories();
+    const interval = setInterval(loadStories, 5000);
+    return () => clearInterval(interval);
+  }, [loadStories]);
+
+  // Auto-expand selected story
+  useEffect(() => {
+    if (selectedStory) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- derived from prop
+      setExpanded((prev) => new Set(prev).add(selectedStory));
+    }
+  }, [selectedStory]);
+
+  const getLatestFile = (files: FileStatus[]): string | null => {
+    // Latest plot by highest number
+    const plots = files
+      .map((f) => ({ file: f.file, num: f.file.match(/^plot-(\d+)\.md$/)?.[1] }))
+      .filter((p) => p.num != null)
+      .sort((a, b) => parseInt(b.num!) - parseInt(a.num!));
+    if (plots.length > 0) return plots[0].file;
+    // Fallback: genesis, then structure
+    if (files.some((f) => f.file === "genesis.md")) return "genesis.md";
+    if (files.some((f) => f.file === "structure.md")) return "structure.md";
+    return files[0]?.file ?? null;
+  };
+
+  const toggleExpand = (name: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  };
+
+  const handleStoryClick = (story: StoryInfo) => {
+    toggleExpand(story.name);
+    // Auto-select latest file when expanding (not when collapsing)
+    if (!expanded.has(story.name)) {
+      const latest = getLatestFile(story.files);
+      if (latest) onSelectFile(story.name, latest);
+    }
+  };
+
+  // Sort files: structure first, genesis, then plots in order
+  const sortFiles = (files: FileStatus[]) => {
+    const order = (f: string) => {
+      if (f === "structure.md") return 0;
+      if (f === "genesis.md") return 1;
+      const m = f.match(/^plot-(\d+)\.md$/);
+      return m ? 2 + parseInt(m[1]) : 100;
+    };
+    return [...files].sort((a, b) => order(a.file) - order(b.file));
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="px-3 py-1.5 border-b border-border flex items-center justify-between">
+        <span className="text-xs font-mono text-muted">Stories</span>
+        <span className="text-xs text-muted">{stories.length}</span>
+      </div>
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {stories.length === 0 ? (
+          <div className="p-3 text-sm text-muted">
+            <p>No stories yet.</p>
+            <p className="mt-1 text-xs">Use the terminal to start writing with Claude.</p>
+          </div>
+        ) : (
+          stories.filter((s) => s.name !== "_example").map((story) => (
+            <div key={story.name}>
+              <button
+                onClick={() => handleStoryClick(story)}
+                className="w-full px-3 py-2 text-left flex items-center gap-2 hover:bg-surface text-sm"
+              >
+                <span className="text-xs text-muted">{expanded.has(story.name) ? "\u25BC" : "\u25B6"}</span>
+                <span className="font-medium truncate">{story.name}</span>
+                <span className="ml-auto text-xs text-muted">
+                  {story.publishedCount}/{story.files.length}
+                </span>
+              </button>
+              {expanded.has(story.name) && (
+                <div className="pl-4">
+                  {sortFiles(story.files).map((f) => {
+                    const isSelected = selectedStory === story.name && selectedFile === f.file;
+                    return (
+                      <button
+                        key={f.file}
+                        onClick={() => onSelectFile(story.name, f.file)}
+                        className={`w-full px-3 py-1.5 text-left flex items-center gap-2 text-xs hover:bg-surface ${
+                          isSelected ? "bg-surface font-medium" : ""
+                        }`}
+                      >
+                        <span className={STATUS_COLOR[f.status]}>{STATUS_ICON[f.status]}</span>
+                        <span className="truncate font-mono">{f.file}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/app/web/components/TerminalPanel.tsx

@@ -0,0 +1,428 @@
+import { useRef, useEffect, useCallback, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { SerializeAddon } from "@xterm/addon-serialize";
+import "@xterm/xterm/css/xterm.css";
+
+interface TerminalPanelProps {
+  token: string;
+  storyName: string | null;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  onSelectStory?: (storyName: string) => void;
+}
+
+interface TerminalSession {
+  term: Terminal;
+  fit: FitAddon;
+  serialize: SerializeAddon;
+  ws: WebSocket | null;
+  container: HTMLDivElement;
+  observer: ResizeObserver;
+  connected: boolean;
+  _retried?: boolean;
+}
+
+const THEME = {
+  background: "#F0EBE1",
+  foreground: "#2C1810",
+  cursor: "#8B4513",
+  cursorAccent: "#F0EBE1",
+  selectionBackground: "#D4C5B0",
+  selectionForeground: "#2C1810",
+  black: "#2C1810",
+  red: "#A63D40",
+  green: "#4A7A4A",
+  yellow: "#8B6914",
+  blue: "#4A6FA5",
+  magenta: "#7B4B8A",
+  cyan: "#3D7A7A",
+  white: "#3A2A1E",
+  brightBlack: "#8B7355",
+  brightRed: "#B85C5C",   // muted red — readable as text, soft as diff bg
+  brightGreen: "#5A8A5A", // muted green — readable as text, soft as diff bg
+  brightYellow: "#A07D1C",
+  brightBlue: "#5A82BA",
+  brightMagenta: "#8E5D9F",
+  brightCyan: "#5A8F8F",
+  brightWhite: "#4A3728",
+};
+
+const DB_NAME = "plotlink-terminal";
+const DB_VERSION = 1;
+const STORE_NAME = "scrollback";
+const MAX_SCROLLBACK_BYTES = 10 * 1024 * 1024; // 10MB per story
+
+// ---- IndexedDB helpers ----
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function saveScrollback(storyName: string, data: string): Promise<void> {
+  // Enforce size limit
+  const trimmed = data.length > MAX_SCROLLBACK_BYTES ? data.slice(-MAX_SCROLLBACK_BYTES) : data;
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    tx.objectStore(STORE_NAME).put(trimmed, storyName);
+    tx.oncomplete = () => { db.close(); resolve(); };
+    tx.onerror = () => { db.close(); reject(tx.error); };
+  });
+}
+
+async function loadScrollback(storyName: string): Promise<string | null> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const req = tx.objectStore(STORE_NAME).get(storyName);
+    req.onsuccess = () => { db.close(); resolve(req.result ?? null); };
+    req.onerror = () => { db.close(); reject(req.error); };
+  });
+}
+
+// Sessions live outside React state to avoid ref-in-effect lint issues
+const sessions = new Map<string, TerminalSession>();
+
+export function TerminalPanel({ token, storyName, authFetch, onSelectStory }: TerminalPanelProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const authFetchRef = useRef(authFetch);
+  const [sessionList, setSessionList] = useState<string[]>([]);
+  const [disconnected, setDisconnected] = useState<Set<string>>(new Set());
+
+  const connectWsRef = useRef<(name: string, session: TerminalSession, resume: boolean) => void>(() => {});
+
+  useEffect(() => { authFetchRef.current = authFetch; }, [authFetch]);
+
+  const safeFit = useCallback((session: TerminalSession) => {
+    const { width } = session.container.getBoundingClientRect();
+    if (width < 50) return; // Skip fit if container has no real dimensions
+    try {
+      session.fit.fit();
+      if (session.ws?.readyState === WebSocket.OPEN) {
+        session.ws.send(JSON.stringify({ type: "resize", cols: session.term.cols, rows: session.term.rows }));
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  const showSession = useCallback((name: string | null) => {
+    for (const [key, session] of sessions) {
+      session.container.style.display = key === name ? "block" : "none";
+    }
+    if (name) {
+      const active = sessions.get(name);
+      if (active) {
+        // setTimeout gives browser time to compute layout after display change
+        setTimeout(() => safeFit(active), 50);
+      }
+    }
+  }, [safeFit]);
+
+  const connectWs = useCallback((name: string, session: TerminalSession, resume: boolean) => {
+    const wsProto = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(
+      `${wsProto}//${window.location.host}/ws/terminal?story=${encodeURIComponent(name)}&token=${token}&resume=${resume}`
+    );
+
+    ws.onopen = () => {
+      session.connected = true;
+      session._retried = false;
+      setDisconnected((prev) => { const next = new Set(prev); next.delete(name); return next; });
+      ws.send(JSON.stringify({ type: "resize", cols: session.term.cols, rows: session.term.rows }));
+    };
+
+    ws.onmessage = (e) => {
+      session.term.write(e.data);
+    };
+
+    ws.onclose = (event) => {
+      session.connected = false;
+      if (session.ws === ws) {
+        session.ws = null;
+        // Save scrollback before marking disconnected
+        try {
+          const data = session.serialize.serialize();
+          saveScrollback(name, data).catch(() => {});
+        } catch { /* ignore */ }
+
+        // Code 4000 = resume failed, auto-reconnect fresh (once only)
+        if (event.code === 4000 && !session._retried) {
+          session._retried = true;
+          session.term.write("\r\n\x1b[33m[Resume failed — starting fresh session...]\x1b[0m\r\n");
+          connectWsRef.current(name, session, false);
+          return;
+        }
+
+        setDisconnected((prev) => new Set(prev).add(name));
+      }
+    };
+
+    session.term.onData((data) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(data);
+      }
+    });
+
+    session.ws = ws;
+  }, [token]);
+
+  useEffect(() => { connectWsRef.current = connectWs; }, [connectWs]);
+
+  const createSession = useCallback(async (name: string, opts?: { resume?: boolean; autoConnect?: boolean }) => {
+    if (!wrapperRef.current || sessions.has(name)) return;
+    const { resume = false, autoConnect = true } = opts ?? {};
+
+    const container = document.createElement("div");
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.display = "none";
+    wrapperRef.current.appendChild(container);
+
+    const term = new Terminal({
+      cols: 80, // Fallback minimum until FitAddon computes actual size
+      scrollback: 5000,
+      fontSize: 13,
+      fontFamily: '"Geist Mono", ui-monospace, monospace',
+      lineHeight: 1.05,
+      letterSpacing: 0,
+      cursorBlink: true,
+      cursorStyle: "block",
+      theme: THEME,
+      allowTransparency: false,
+      drawBoldTextInBrightColors: false,
+      minimumContrastRatio: 7, // High contrast — compensates for dim text halving
+    });
+
+    const fit = new FitAddon();
+    const serialize = new SerializeAddon();
+    term.loadAddon(fit);
+    term.loadAddon(serialize);
+    term.open(container);
+
+    // Apply padding to term.element so FitAddon measures correctly
+    if (term.element) {
+      term.element.style.paddingLeft = "10px";
+    }
+
+    const session: TerminalSession = { term, fit, serialize, ws: null, container, observer: null as unknown as ResizeObserver, connected: false };
+
+    const observer = new ResizeObserver(() => {
+      const { width } = container.getBoundingClientRect();
+      if (width < 50) return; // Skip if container not yet laid out
+      try {
+        fit.fit();
+        if (session.ws?.readyState === WebSocket.OPEN) {
+          session.ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+        }
+      } catch { /* ignore */ }
+    });
+    observer.observe(container);
+    session.observer = observer;
+    sessions.set(name, session);
+    setSessionList((prev) => [...prev, name]);
+
+    // Restore scrollback from IndexedDB
+    try {
+      const saved = await loadScrollback(name);
+      if (saved) {
+        term.write(saved);
+      }
+    } catch { /* ignore */ }
+
+    if (autoConnect) {
+      connectWs(name, session, resume);
+    } else {
+      // Show as disconnected so overlay appears
+      setDisconnected((prev) => new Set(prev).add(name));
+    }
+
+    // Defer initial fit — container may still be display:none
+    setTimeout(() => safeFit(session), 50);
+  }, [connectWs, safeFit]);
+
+  const reconnectSession = useCallback(async (name: string, resume: boolean) => {
+    const session = sessions.get(name);
+    if (!session) return;
+
+    // Close existing WS if any
+    if (session.ws) {
+      session.ws.close();
+      session.ws = null;
+    }
+
+    if (!resume) {
+      // Kill old server PTY so a fresh one spawns on reconnect
+      await authFetchRef.current(`/api/terminal/${encodeURIComponent(name)}`, { method: "DELETE" }).catch(() => {});
+      session.term.clear();
+    }
+
+    connectWs(name, session, resume);
+  }, [connectWs]);
+
+  const destroySession = useCallback((name: string) => {
+    const session = sessions.get(name);
+    if (!session) return;
+
+    // Save scrollback before destroying
+    try {
+      const data = session.serialize.serialize();
+      saveScrollback(name, data).catch(() => {});
+    } catch { /* ignore */ }
+
+    session.observer.disconnect();
+    if (session.ws) session.ws.close();
+    session.term.dispose();
+    session.container.remove();
+    sessions.delete(name);
+    setSessionList((prev) => prev.filter((s) => s !== name));
+    setDisconnected((prev) => { const next = new Set(prev); next.delete(name); return next; });
+
+    authFetch(`/api/terminal/${encodeURIComponent(name)}`, { method: "DELETE" }).catch(() => {});
+  }, [authFetch]);
+
+  // Auto-spawn + show/hide when story changes
+  useEffect(() => {
+    if (!storyName) return;
+    if (!sessions.has(storyName)) {
+      // Check if a previous session exists — if so, show overlay instead of auto-connecting
+      authFetchRef.current(`/api/terminal/session/${encodeURIComponent(storyName)}`)
+        .then((res) => res.ok ? res.json() : null)
+        .then((data) => {
+          if (!sessions.has(storyName)) { // guard against race
+            const hasStoredSession = data?.sessionId && !data?.running;
+            createSession(storyName, { autoConnect: !hasStoredSession });
+            showSession(storyName);
+          }
+        })
+        .catch(() => {
+          if (!sessions.has(storyName)) {
+            createSession(storyName);
+            showSession(storyName);
+          }
+        });
+    } else {
+      showSession(storyName);
+    }
+  }, [storyName, createSession, showSession]);
+
+  // Periodic scrollback save (every 30s for active session)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      for (const [name, session] of sessions) {
+        if (session.connected) {
+          try {
+            const data = session.serialize.serialize();
+            saveScrollback(name, data).catch(() => {});
+          } catch { /* ignore */ }
+        }
+      }
+    }, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Cleanup all sessions on unmount
+  useEffect(() => {
+    return () => {
+      for (const [name, session] of sessions) {
+        // Save scrollback before cleanup
+        try {
+          const data = session.serialize.serialize();
+          saveScrollback(name, data).catch(() => {});
+        } catch { /* ignore */ }
+        session.observer.disconnect();
+        if (session.ws) session.ws.close();
+        session.term.dispose();
+        session.container.remove();
+        authFetchRef.current(`/api/terminal/${encodeURIComponent(name)}`, { method: "DELETE" }).catch(() => {});
+      }
+      sessions.clear();
+    };
+  }, []);
+
+  const isDisconnected = storyName ? disconnected.has(storyName) : false;
+  const isEmpty = sessionList.length === 0;
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Session tabs — hidden when no sessions */}
+      {!isEmpty && (
+      <div className="px-2 py-1 border-b border-border flex items-center gap-1 overflow-x-auto">
+        {sessionList.map((name) => (
+            <div
+              key={name}
+              onClick={() => onSelectStory?.(name)}
+              className={`flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono cursor-pointer ${
+                name === storyName
+                  ? "bg-accent/10 text-accent"
+                  : "text-muted hover:text-foreground"
+              }`}
+            >
+              <span className={`w-1.5 h-1.5 rounded-full ${
+                disconnected.has(name) ? "bg-amber-500" : name === storyName ? "bg-green-600" : "bg-muted/50"
+              }`} />
+              <span className="truncate max-w-[120px]">{name}</span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  destroySession(name);
+                }}
+                className="ml-0.5 text-muted hover:text-error text-[10px] leading-none"
+                title="Close terminal"
+              >
+                ×
+              </button>
+            </div>
+          ))
+        }
+      </div>
+      )}
+
+      {/* Terminal containers — always rendered so wrapperRef is available */}
+      <div className="relative flex-1 min-h-0">
+        <div ref={wrapperRef} className="h-full" />
+
+        {/* Empty state overlay */}
+        {isEmpty && (
+          <div className="absolute inset-0 flex items-center justify-center text-muted">
+            <div className="text-center">
+              <p className="text-lg font-serif">Select a story on the left menu</p>
+              <p className="text-sm mt-1">to start an AI Writer session</p>
+            </div>
+          </div>
+        )}
+
+        {/* Reconnect overlay */}
+        {isDisconnected && storyName && (
+          <div className="absolute inset-0 flex items-center justify-center" style={{ background: "rgba(240, 235, 225, 0.9)" }}>
+            <div className="text-center space-y-3">
+              <p className="text-sm font-serif text-foreground">Terminal disconnected</p>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => reconnectSession(storyName, true)}
+                  className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim"
+                >
+                  Resume Session
+                </button>
+                <button
+                  onClick={() => reconnectSession(storyName, false)}
+                  className="px-4 py-1.5 border border-border text-sm rounded hover:bg-surface"
+                >
+                  Start Fresh
+                </button>
+              </div>
+              <p className="text-xs text-muted">Resume continues your previous Claude conversation</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/web/components/WalletCard.tsx

@@ -7,7 +7,9 @@ interface WalletInfo {
   walletId?: string;
   name?: string;
   address?: string;
+  ethBalance?: string;
   usdcBalance?: string;
+  plotBalance?: string;
   error?: string;
 }
 
@@ -77,8 +79,8 @@ export function WalletCard({ token }: { token: string }) {
         <div className="space-y-3">
           <div className="flex items-center justify-between">
             <span className="text-muted text-[10px] uppercase tracking-wider">Address (Base)</span>
-            <span className={`rounded border px-1.5 py-0.5 text-[9px] ${wallet.usdcBalance && parseFloat(wallet.usdcBalance) > 0 ? "border-accent/30 text-accent" : "border-accent-dim/30 text-accent-dim"}`}>
-              {wallet.usdcBalance && parseFloat(wallet.usdcBalance) > 0 ? "active" : "no balance"}
+            <span className={`rounded border px-1.5 py-0.5 text-[9px] ${wallet.ethBalance && parseFloat(wallet.ethBalance) > 0 ? "border-accent/30 text-accent" : "border-accent-dim/30 text-accent-dim"}`}>
+              {wallet.ethBalance && parseFloat(wallet.ethBalance) > 0 ? "active" : "no balance"}
             </span>
           </div>
 
@@ -91,23 +93,27 @@ export function WalletCard({ token }: { token: string }) {
 
           <div className="border-border space-y-1 border-t pt-3">
             <div className="flex justify-between text-xs">
-              <span className="text-muted">USDC Balance</span>
+              <span className="text-muted">ETH</span>
+              <span className="text-foreground font-medium">{wallet.ethBalance || "0.000000"} ETH</span>
+            </div>
+            <div className="flex justify-between text-xs">
+              <span className="text-muted">USDC</span>
               <span className="text-foreground font-medium">${wallet.usdcBalance || "0.00"}</span>
             </div>
             <div className="flex justify-between text-xs">
-              <span className="text-muted">Network</span>
-              <span className="text-foreground">Base</span>
+              <span className="text-muted">PLOT</span>
+              <span className="text-foreground font-medium">{wallet.plotBalance || "0.0000"} PLOT</span>
             </div>
             <div className="flex justify-between text-xs">
-              <span className="text-muted">Wallet ID</span>
-              <span className="text-foreground font-mono text-[10px]">{wallet.walletId?.slice(0, 12)}...</span>
+              <span className="text-muted">Network</span>
+              <span className="text-foreground">Base</span>
             </div>
           </div>
 
           {/* Fund wallet */}
           <div className="border-border border-t pt-3">
             <p className="text-muted mb-2 text-[10px] font-medium uppercase tracking-wider">Fund Wallet</p>
-            <p className="text-muted text-[10px]">Send USDC on Base to:</p>
+            <p className="text-muted text-[10px]">Send ETH on Base for gas (~$0.01 per publish):</p>
             <code className="text-foreground bg-surface mt-1 block break-all rounded px-2 py-1.5 text-[10px] font-mono">{wallet.address}</code>
           </div>
         </div>