plotlink-ows 0.1.18 → 1.0.4

package/app/web/components/Settings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { WalletCard } from "./WalletCard";
 
 export function Settings({ token, onLogout }: { token: string; onLogout: () => void }) {
@@ -8,8 +8,84 @@ export function Settings({ token, onLogout }: { token: string; onLogout: () => v
   const [passphraseSuccess, setPassphraseSuccess] = useState(false);
   const [savingPassphrase, setSavingPassphrase] = useState(false);
 
-  const authFetch = (url: string, opts?: RequestInit) =>
-    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
+  // Agent identity registration
+  const [linkStatus, setLinkStatus] = useState<{ linked: boolean; agentId?: number; owsWallet?: string; owner?: string } | null>(null);
+  const [agentName, setAgentName] = useState("AI Writer");
+  const [agentDescription, setAgentDescription] = useState("");
+  const [agentGenre, setAgentGenre] = useState("");
+  const [registering, setRegistering] = useState(false);
+  const [registerError, setRegisterError] = useState<string | null>(null);
+
+  // Link to PlotLink (binding proof for DB link)
+  const [humanWallet, setHumanWallet] = useState("");
+  const [bindingResult, setBindingResult] = useState<{ message: string; signature: string; owsWallet: string } | null>(null);
+  const [generating, setGenerating] = useState(false);
+  const [bindingError, setBindingError] = useState<string | null>(null);
+  const [copied, setCopied] = useState<"signature" | "wallet" | null>(null);
+
+  const authFetch = useCallback((url: string, opts?: RequestInit) =>
+    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } }),
+  [token]);
+
+  // Check link status on mount
+  useEffect(() => {
+    authFetch("/api/settings/link-status")
+      .then((r) => r.json())
+      .then((data) => setLinkStatus(data))
+      .catch(() => setLinkStatus({ linked: false }));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleRegisterAgent = async () => {
+    if (!agentName.trim()) { setRegisterError("Agent name is required"); return; }
+    if (!agentDescription.trim()) { setRegisterError("Description is required"); return; }
+    setRegistering(true);
+    setRegisterError(null);
+    try {
+      const res = await authFetch("/api/settings/register-agent", {
+        method: "POST",
+        body: JSON.stringify({
+          name: agentName,
+          description: agentDescription,
+          ...(agentGenre.trim() && { genre: agentGenre }),
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Registration failed");
+      setLinkStatus({ linked: true, agentId: data.agentId, owsWallet: data.owsWallet });
+    } catch (err: unknown) {
+      setRegisterError(err instanceof Error ? err.message : "Registration failed");
+    }
+    setRegistering(false);
+  };
+
+  const handleGenerateBinding = async () => {
+    if (!humanWallet.trim() || !/^0x[a-fA-F0-9]{40}$/.test(humanWallet)) {
+      setBindingError("Enter a valid wallet address (0x...)");
+      return;
+    }
+    setGenerating(true);
+    setBindingError(null);
+    setBindingResult(null);
+    try {
+      const res = await authFetch("/api/settings/generate-binding", {
+        method: "POST",
+        body: JSON.stringify({ humanWallet }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to generate binding code");
+      setBindingResult(data);
+    } catch (err: unknown) {
+      setBindingError(err instanceof Error ? err.message : "Failed to generate binding code");
+    }
+    setGenerating(false);
+  };
+
+  const copyToClipboard = async (text: string, field: "signature" | "wallet") => {
+    await navigator.clipboard.writeText(text);
+    setCopied(field);
+    setTimeout(() => setCopied(null), 2000);
+  };
 
   const handleResetPassphrase = async () => {
     setPassphraseError(null);
@@ -46,6 +122,154 @@ export function Settings({ token, onLogout }: { token: string; onLogout: () => v
     <div className="mx-auto max-w-lg space-y-6 p-6">
       <h2 className="text-accent text-lg font-bold">Settings</h2>
 
+      {/* Agent Identity */}
+      <div className="border-border rounded border p-4">
+        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Agent Identity</h3>
+        {linkStatus?.linked ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-accent">Registered</span>
+              <span className="text-muted text-xs">Agent #{linkStatus.agentId}</span>
+            </div>
+            {linkStatus.owsWallet && (
+              <p className="text-muted text-xs font-mono">
+                Wallet: {linkStatus.owsWallet.slice(0, 6)}...{linkStatus.owsWallet.slice(-4)}
+              </p>
+            )}
+            {linkStatus.owner && (
+              <p className="text-muted text-xs font-mono">
+                Owner: {linkStatus.owner.slice(0, 6)}...{linkStatus.owner.slice(-4)}
+              </p>
+            )}
+            <p className="text-muted text-xs">
+              <a href={`https://plotlink.xyz/agents/${linkStatus.agentId}`} target="_blank" rel="noopener noreferrer" className="text-accent underline">
+                View agent profile on plotlink.xyz
+              </a>
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-muted text-xs">
+              Register this AI writer on-chain via ERC-8004. Uses your OWS wallet&apos;s existing ETH balance for gas.
+            </p>
+
+            <div>
+              <label className="text-muted text-xs block mb-1">Name</label>
+              <input
+                value={agentName}
+                onChange={(e) => setAgentName(e.target.value)}
+                placeholder="AI Writer"
+                className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent"
+              />
+            </div>
+
+            <div>
+              <label className="text-muted text-xs block mb-1">Description</label>
+              <input
+                value={agentDescription}
+                onChange={(e) => setAgentDescription(e.target.value)}
+                placeholder="An AI writing assistant for fiction stories"
+                className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent"
+              />
+            </div>
+
+            <div>
+              <label className="text-muted text-xs block mb-1">Genre (optional)</label>
+              <input
+                value={agentGenre}
+                onChange={(e) => setAgentGenre(e.target.value)}
+                placeholder="e.g. Fiction, Sci-Fi, Fantasy"
+                className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent"
+              />
+            </div>
+
+            {registerError && <p className="text-error text-xs">{registerError}</p>}
+
+            <button
+              onClick={handleRegisterAgent}
+              disabled={registering || !agentName.trim() || !agentDescription.trim()}
+              className="bg-accent text-white hover:bg-accent-dim disabled:opacity-50 w-full rounded px-4 py-2 text-sm font-medium transition-colors"
+            >
+              {registering ? "Registering..." : "Register Agent Identity"}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Link to PlotLink */}
+      <div className="border-border rounded border p-4">
+        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Link to PlotLink</h3>
+        {linkStatus?.owner ? (
+          <p className="text-muted text-xs">
+            Linked to owner <span className="font-mono">{linkStatus.owner.slice(0, 6)}...{linkStatus.owner.slice(-4)}</span>
+          </p>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-muted text-xs">
+              Link this OWS wallet to your PlotLink account so your stories appear under your profile on plotlink.xyz.
+            </p>
+            <div className="text-muted text-xs space-y-1 pl-3">
+              <p>1. Enter your PlotLink wallet address below</p>
+              <p>2. Click &quot;Generate Binding Code&quot;</p>
+              <p>3. Copy the code and paste it on plotlink.xyz &rarr; Agents &rarr; Link AI Writer</p>
+            </div>
+
+            <input
+              value={humanWallet}
+              onChange={(e) => setHumanWallet(e.target.value)}
+              placeholder="Your PlotLink wallet address (0x...)"
+              className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent font-mono"
+            />
+
+            {bindingError && <p className="text-error text-xs">{bindingError}</p>}
+
+            <button
+              onClick={handleGenerateBinding}
+              disabled={generating || !humanWallet.trim()}
+              className="bg-accent text-white hover:bg-accent-dim disabled:opacity-50 w-full rounded px-4 py-2 text-sm font-medium transition-colors"
+            >
+              {generating ? "Generating..." : "Generate Binding Code"}
+            </button>
+
+            {bindingResult && (
+              <div className="space-y-3 mt-3">
+                <div>
+                  <label className="text-muted text-xs block mb-1">Binding Code (signature)</label>
+                  <div className="relative">
+                    <div className="bg-surface border-border rounded border p-2 text-xs font-mono break-all text-foreground pr-16">
+                      {bindingResult.signature}
+                    </div>
+                    <button
+                      onClick={() => copyToClipboard(bindingResult.signature, "signature")}
+                      className="absolute top-1 right-1 text-xs px-2 py-1 rounded border border-border text-muted hover:text-accent hover:border-accent transition-colors"
+                    >
+                      {copied === "signature" ? "Copied!" : "Copy"}
+                    </button>
+                  </div>
+                </div>
+                <div>
+                  <label className="text-muted text-xs block mb-1">OWS Wallet Address</label>
+                  <div className="relative">
+                    <div className="bg-surface border-border rounded border p-2 text-xs font-mono break-all text-foreground pr-16">
+                      {bindingResult.owsWallet}
+                    </div>
+                    <button
+                      onClick={() => copyToClipboard(bindingResult.owsWallet, "wallet")}
+                      className="absolute top-1 right-1 text-xs px-2 py-1 rounded border border-border text-muted hover:text-accent hover:border-accent transition-colors"
+                    >
+                      {copied === "wallet" ? "Copied!" : "Copy"}
+                    </button>
+                  </div>
+                </div>
+                <p className="text-xs text-accent">
+                  Now go to plotlink.xyz/agents and paste both values in the &quot;Link AI Writer&quot; section.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* Wallet */}
       <WalletCard token={token} />
 

package/app/web/components/StoriesPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import { StoryBrowser } from "./StoryBrowser";
 import { TerminalPanel } from "./TerminalPanel";
 import { PreviewPanel } from "./PreviewPanel";
@@ -8,17 +8,115 @@ interface StoriesPageProps {
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
 }
 
+const STORAGE_KEY = "plotlink-panel-ratio";
+const DEFAULT_RATIO = 0.6; // terminal gets 60% of available space
+const MIN_PANEL_PX = 300;
+const SIDEBAR_PX = 224; // w-56
+const HANDLE_PX = 6;
+
+function loadRatio(): number {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    if (v) {
+      const n = parseFloat(v);
+      if (n > 0 && n < 1) return n;
+    }
+  } catch { /* ignore */ }
+  return DEFAULT_RATIO;
+}
+
+function clampRatio(r: number, available: number): number {
+  if (available <= 0) return r;
+  const minR = MIN_PANEL_PX / available;
+  const maxR = 1 - MIN_PANEL_PX / available;
+  if (minR >= maxR) return 0.5; // panels can't both fit, split evenly
+  return Math.min(maxR, Math.max(minR, r));
+}
+
 export function StoriesPage({ token, authFetch }: StoriesPageProps) {
   const [selectedStory, setSelectedStory] = useState<string | null>(null);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [publishingFile, setPublishingFile] = useState<string | null>(null);
   const [publishProgress, setPublishProgress] = useState<string>("");
+  const [ratio, setRatio] = useState(loadRatio);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  // Persist ratio to localStorage
+  useEffect(() => {
+    try { localStorage.setItem(STORAGE_KEY, String(ratio)); } catch { /* ignore */ }
+  }, [ratio]);
+
+  // Clamp ratio on window resize so panels stay above MIN_PANEL_PX
+  useEffect(() => {
+    const onResize = () => {
+      if (!containerRef.current) return;
+      const available = containerRef.current.getBoundingClientRect().width - SIDEBAR_PX - HANDLE_PX;
+      setRatio((prev) => clampRatio(prev, available));
+    };
+    window.addEventListener("resize", onResize);
+    // Also clamp on mount in case stored ratio is out of range for current window
+    onResize();
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
 
   const handleSelectFile = useCallback((storyName: string, fileName: string) => {
     setSelectedStory(storyName);
     setSelectedFile(fileName);
   }, []);
 
+  const latestStoryRef = useRef<string | null>(null);
+
+  const handleSelectStory = useCallback(async (name: string) => {
+    latestStoryRef.current = name;
+    setSelectedStory(name);
+    setSelectedFile(null);
+    // Auto-select latest file for this story
+    try {
+      const res = await authFetch(`/api/stories/${name}`);
+      if (res.ok && latestStoryRef.current === name) {
+        const data = await res.json();
+        const files: { file: string }[] = data.files || [];
+        // Priority: highest plot → genesis → structure → first
+        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!));
+        const latest = plots[0]?.file
+          ?? (files.find((f) => f.file === "genesis.md")?.file)
+          ?? (files.find((f) => f.file === "structure.md")?.file)
+          ?? files[0]?.file;
+        if (latest && latestStoryRef.current === name) setSelectedFile(latest);
+      }
+    } catch { /* ignore */ }
+  }, [authFetch]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragging.current = true;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const available = rect.width - SIDEBAR_PX - HANDLE_PX;
+      const x = ev.clientX - rect.left - SIDEBAR_PX;
+      setRatio(clampRatio(x / available, available));
+    };
+
+    const onMouseUp = () => {
+      dragging.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }, []);
+
   const handlePublish = useCallback(async (storyName: string, fileName: string) => {
     setPublishingFile(fileName);
     setPublishProgress("Reading file...");
@@ -89,7 +187,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
           for (const line of lines) {
             try {
               const data = JSON.parse(line.slice(6));
-              if (data.step) setPublishProgress(data.step);
+              if (data.step) setPublishProgress(data.message || data.step);
               if (data.step === "done" && data.txHash) {
                 // Update publish status with gasCost
                 await authFetch(`/api/stories/${storyName}/${fileName}/publish-status`, {
@@ -98,8 +196,10 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
                   body: JSON.stringify({
                     txHash: data.txHash,
                     storylineId: data.storylineId,
+                    plotIndex: data.plotIndex,
                     contentCid: data.contentCid,
                     gasCost: data.gasCost,
+                    indexError: data.indexError,
                   }),
                 });
               }
@@ -121,7 +221,7 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
   }, [authFetch]);
 
   return (
-    <div className="h-[calc(100vh-3.5rem)] flex">
+    <div ref={containerRef} className="h-[calc(100vh-3.5rem)] flex">
       {/* Story Browser Sidebar */}
       <div className="w-56 border-r border-border flex-shrink-0">
         <StoryBrowser
@@ -132,13 +232,26 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
         />
       </div>
 
-      {/* Terminal */}
-      <div className="flex-1 min-w-0 border-r border-border">
-        <TerminalPanel token={token} />
+      {/* Terminal — sized by ratio of available space */}
+      <div className="min-w-0 border-r border-border" style={{ flex: `${ratio} 0 0` }}>
+        <TerminalPanel token={token} storyName={selectedStory} authFetch={authFetch} onSelectStory={handleSelectStory} />
+      </div>
+
+      {/* Drag Handle */}
+      <div
+        onMouseDown={handleMouseDown}
+        className="flex-shrink-0 flex items-center justify-center hover:bg-border/50 transition-colors"
+        style={{ width: HANDLE_PX, cursor: "col-resize", background: "var(--border)" }}
+      >
+        <div className="flex flex-col gap-1">
+          <div className="w-0.5 h-0.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+          <div className="w-0.5 h-0.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+          <div className="w-0.5 h-0.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+        </div>
       </div>
 
-      {/* Preview */}
-      <div className="w-96 flex-shrink-0 flex flex-col">
+      {/* Preview — takes remaining space */}
+      <div className="min-w-0 flex flex-col" style={{ flex: `${1 - ratio} 0 0` }}>
         <PreviewPanel
           storyName={selectedStory}
           fileName={selectedFile}

package/app/web/components/StoryBrowser.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 
 interface FileStatus {
   file: string;
-  status: "published" | "pending" | "draft";
+  status: "published" | "published-not-indexed" | "pending" | "draft";
   txHash?: string;
   storylineId?: number;
 }
@@ -24,15 +24,17 @@ interface StoryBrowserProps {
 }
 
 const STATUS_ICON: Record<string, string> = {
-  published: "\u2713",
-  pending: "\u23F3",
-  draft: "\uD83D\uDCDD",
+  "published": "\u2713",
+  "published-not-indexed": "\u26A0",
+  "pending": "\u23F3",
+  "draft": "\uD83D\uDCDD",
 };
 
 const STATUS_COLOR: Record<string, string> = {
-  published: "text-green-700",
-  pending: "text-amber-700",
-  draft: "text-muted",
+  "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) {
@@ -64,6 +66,19 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     }
   }, [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);
@@ -73,6 +88,15 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     });
   };
 
+  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) => {
@@ -100,7 +124,7 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
           stories.filter((s) => s.name !== "_example").map((story) => (
             <div key={story.name}>
               <button
-                onClick={() => toggleExpand(story.name)}
+                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>