plotlink-ows 0.1.13

package/app/web/components/Layout.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from "react";
+import { LLMSetup } from "./LLMSetup";
+import { WalletCard } from "./WalletCard";
+import { Settings } from "./Settings";
+import { Chat } from "./Chat";
+import { Publish } from "./Publish";
+import { Dashboard } from "./Dashboard";
+
+const API_BASE = "http://localhost:7777";
+
+type Page = "home" | "chat" | "publish" | "dashboard" | "llm-setup" | "wallet-setup" | "settings";
+
+function WalletSetupPage({ token, onComplete }: { token: string; onComplete: () => void }) {
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const createWallet = async () => {
+    setCreating(true);
+    setError(null);
+    try {
+      const res = await fetch(`${API_BASE}/api/wallet/create`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Wallet creation failed");
+      setSuccess(true);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Wallet creation failed");
+    }
+    setCreating(false);
+  };
+
+  useEffect(() => { createWallet(); }, []);
+
+  return (
+    <div className="mx-auto max-w-sm p-6 text-center">
+      <h2 className="text-accent mb-1 text-lg font-bold">Wallet Setup</h2>
+      <p className="text-muted mb-6 text-xs">creating your OWS wallet for autonomous transactions</p>
+
+      {creating && <p className="text-accent text-sm">creating wallet...</p>}
+
+      {error && (
+        <div className="space-y-4">
+          <div className="rounded border border-red-700/30 p-3 text-xs text-red-700">{error}</div>
+          <button
+            onClick={createWallet}
+            className="border-accent text-accent hover:bg-accent/10 w-full rounded border px-4 py-2 text-sm font-medium transition-colors"
+          >
+            retry
+          </button>
+        </div>
+      )}
+
+      {success && (
+        <div className="space-y-4">
+          <div className="text-accent text-2xl">&#x2713;</div>
+          <p className="text-foreground text-sm font-medium">wallet created</p>
+          <button
+            onClick={onComplete}
+            className="border-accent text-accent hover:bg-accent/10 w-full rounded border px-4 py-2 text-sm font-medium transition-colors"
+          >
+            continue
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Layout({ token, onLogout }: { token: string; onLogout: () => void }) {
+  const [page, setPage] = useState<Page>("home");
+  const [llmConfigured, setLlmConfigured] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    async function checkSetup() {
+      try {
+        // Check LLM config
+        const llmRes = await fetch(`${API_BASE}/api/config/llm`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        const llmData = await llmRes.json();
+        const hasLlm = llmData.configured?.length > 0;
+        setLlmConfigured(hasLlm);
+
+        if (!hasLlm) {
+          setPage("llm-setup");
+          return;
+        }
+
+        // Check wallet existence
+        const walletRes = await fetch(`${API_BASE}/api/wallet`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        const walletData = await walletRes.json();
+        if (!walletData.exists) {
+          setPage("wallet-setup");
+          return;
+        }
+      } catch {
+        setLlmConfigured(false);
+      }
+    }
+    checkSetup();
+  }, []);
+
+  return (
+    <div className="flex h-screen flex-col">
+      {/* Header */}
+      <header className="border-border flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-3">
+          <button onClick={() => { if (page !== "wallet-setup") setPage("home"); }} className="flex items-center gap-2 hover:opacity-80">
+            <img src="/plotlink-logo.svg" alt="PlotLink" className="h-5 w-5" />
+            <span className="text-accent text-sm font-bold tracking-tight">PlotLink OWS</span>
+          </button>
+          <span className="text-muted text-[10px] uppercase tracking-wider">local writer</span>
+        </div>
+        {page !== "wallet-setup" && (
+        <nav className="flex items-center gap-4">
+          <button
+            onClick={() => setPage("chat")}
+            className={`text-xs transition-colors ${page === "chat" ? "text-accent" : "text-muted hover:text-foreground"}`}
+          >
+            write
+          </button>
+          <button
+            onClick={() => setPage("publish")}
+            className={`text-xs transition-colors ${page === "publish" ? "text-accent" : "text-muted hover:text-foreground"}`}
+          >
+            publish
+          </button>
+          <button
+            onClick={() => setPage("dashboard")}
+            className={`text-xs transition-colors ${page === "dashboard" ? "text-accent" : "text-muted hover:text-foreground"}`}
+          >
+            dashboard
+          </button>
+          <button
+            onClick={() => setPage("llm-setup")}
+            className={`text-xs transition-colors ${page === "llm-setup" ? "text-accent" : "text-muted hover:text-foreground"}`}
+          >
+            llm
+          </button>
+          <button
+            onClick={() => setPage("settings")}
+            className={`text-xs transition-colors ${page === "settings" ? "text-accent" : "text-muted hover:text-foreground"}`}
+          >
+            settings
+          </button>
+          <button onClick={onLogout} className="text-muted hover:text-foreground text-xs transition-colors">
+            logout
+          </button>
+        </nav>
+        )}
+      </header>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-y-auto">
+        {page === "home" && (
+          <div className="mx-auto max-w-lg space-y-6 p-6">
+            {llmConfigured === false && (
+              <div className="border-accent/30 rounded border p-4 text-center">
+                <p className="text-accent text-sm font-medium">setup required</p>
+                <p className="text-muted mt-1 text-xs">connect an LLM provider to get started</p>
+                <button
+                  onClick={() => setPage("llm-setup")}
+                  className="border-accent text-accent hover:bg-accent/10 mt-3 rounded border px-4 py-2 text-xs font-medium transition-colors"
+                >
+                  setup LLM
+                </button>
+              </div>
+            )}
+
+            {llmConfigured && (
+              <>
+                <div className="text-center">
+                  <p className="text-foreground text-sm font-medium">ready to write</p>
+                  <p className="text-muted mt-1 text-xs">start a collaborative story session with the AI writer</p>
+                  <button
+                    onClick={() => setPage("chat")}
+                    className="border-accent text-accent hover:bg-accent/10 mt-3 rounded border px-4 py-2 text-xs font-medium transition-colors"
+                  >
+                    start writing
+                  </button>
+                </div>
+                <WalletCard token={token} />
+              </>
+            )}
+          </div>
+        )}
+
+        {page === "chat" && (
+          <Chat token={token} />
+        )}
+
+        {page === "publish" && (
+          <Publish token={token} />
+        )}
+
+        {page === "dashboard" && (
+          <Dashboard token={token} />
+        )}
+
+        {page === "llm-setup" && (
+          <LLMSetup
+            token={token}
+            onComplete={() => {
+              setLlmConfigured(true);
+              setPage("wallet-setup");
+            }}
+          />
+        )}
+
+        {page === "wallet-setup" && (
+          <WalletSetupPage
+            token={token}
+            onComplete={() => setPage("home")}
+          />
+        )}
+
+        {page === "settings" && (
+          <Settings token={token} onLogout={onLogout} onChangeLLM={() => setPage("llm-setup")} />
+        )}
+      </main>
+
+      {/* Footer */}
+      <footer className="border-border border-t px-4 py-2">
+        <p className="text-muted text-[10px]">
+          session active &middot; localhost:7777
+        </p>
+      </footer>
+    </div>
+  );
+}

package/app/web/components/Login.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+
+export function Login({ onLogin }: { onLogin: (passphrase: string) => Promise<string | null> }) {
+  const [passphrase, setPassphrase] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!passphrase.trim()) return;
+    setLoading(true);
+    setError(null);
+    const err = await onLogin(passphrase);
+    if (err) setError(err);
+    setLoading(false);
+  };
+
+  return (
+    <div className="flex h-screen items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="border-border rounded border p-6">
+          <div className="mb-6 text-center">
+            <h1 className="text-accent text-lg font-bold tracking-tight">PlotLink OWS</h1>
+            <p className="text-muted mt-1 text-xs">local writer agent</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="text-muted mb-1.5 block text-xs uppercase tracking-wider">
+                Passphrase
+              </label>
+              <input
+                type="password"
+                value={passphrase}
+                onChange={(e) => setPassphrase(e.target.value)}
+                placeholder="enter your passphrase"
+                autoFocus
+                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>
+
+            {error && (
+              <p className="text-error text-xs">{error}</p>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading || !passphrase.trim()}
+              className="border-accent text-accent hover:bg-accent/10 disabled:opacity-40 w-full rounded border px-4 py-2 text-sm font-medium transition-colors"
+            >
+              {loading ? "authenticating..." : "unlock"}
+            </button>
+          </form>
+        </div>
+
+        <p className="text-muted mt-4 text-center text-[10px]">
+          enter your passphrase to unlock
+        </p>
+      </div>
+    </div>
+  );
+}

package/app/web/components/Publish.tsx

@@ -0,0 +1,245 @@
+import React, { useState, useEffect } from "react";
+import Markdown from "react-markdown";
+
+const API_BASE = "http://localhost:7777";
+
+interface Draft {
+  id: string;
+  title: string;
+  content: string;
+  genre: string | null;
+  status: string;
+  createdAt: string;
+}
+
+interface Preflight {
+  ready: boolean;
+  address?: string;
+  ethBalance?: string;
+  creationFee?: string;
+  requiredBalance?: string;
+  hasEnoughEth?: boolean;
+  hasFilebase?: boolean;
+  error?: string | null;
+}
+
+interface PublishProgress {
+  step: string;
+  message: string;
+  txHash?: string;
+  contentCid?: string;
+  error?: string;
+}
+
+export function Publish({ token }: { token: string }) {
+  const [drafts, setDrafts] = useState<Draft[]>([]);
+  const [selected, setSelected] = useState<Draft | null>(null);
+  const [preflight, setPreflight] = useState<Preflight | null>(null);
+  const [publishing, setPublishing] = useState(false);
+  const [progress, setProgress] = useState<PublishProgress | null>(null);
+
+  const authFetch = (url: string, opts?: RequestInit) =>
+    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
+
+  useEffect(() => {
+    authFetch(`${API_BASE}/api/chat/drafts`)
+      .then((r) => r.json())
+      .then((data) => setDrafts(data.filter((d: Draft) => d.status !== "published")));
+  }, []);
+
+  const checkPreflight = async () => {
+    const res = await authFetch(`${API_BASE}/api/publish/preflight`);
+    const data = await res.json();
+    setPreflight(data);
+  };
+
+  const handlePublish = async (draft: Draft) => {
+    setPublishing(true);
+    setProgress(null);
+
+    try {
+      const res = await fetch(`${API_BASE}/api/publish/${draft.id}`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      const reader = res.body?.getReader();
+      if (!reader) throw new Error("No stream");
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            try {
+              const parsed = JSON.parse(line.slice(6));
+              setProgress(parsed);
+            } catch { /* ignore */ }
+          }
+        }
+      }
+
+      // Refresh drafts list
+      const draftsRes = await authFetch(`${API_BASE}/api/chat/drafts`);
+      const draftsData = await draftsRes.json();
+      setDrafts(draftsData.filter((d: Draft) => d.status !== "published"));
+    } catch (err: unknown) {
+      setProgress({ step: "error", message: err instanceof Error ? err.message : "Publish failed" });
+    }
+
+    setPublishing(false);
+  };
+
+  const formatEth = (wei: string) => {
+    const eth = Number(BigInt(wei)) / 1e18;
+    return eth.toFixed(6);
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6 p-6">
+      <h2 className="text-accent text-lg font-bold">Publish to PlotLink</h2>
+      <p className="text-muted text-xs">sign and broadcast your story on-chain via OWS wallet</p>
+
+      {/* Preflight check */}
+      {!preflight && (
+        <button
+          onClick={checkPreflight}
+          className="border-accent text-accent hover:bg-accent/10 rounded border px-4 py-2 text-sm font-medium transition-colors"
+        >
+          check publishing readiness
+        </button>
+      )}
+
+      {preflight && (
+        <div className="border-border rounded border p-4 space-y-2">
+          <h3 className="text-accent text-xs font-bold uppercase tracking-wider">Preflight</h3>
+          <div className="flex justify-between text-xs">
+            <span className="text-muted">Wallet</span>
+            <span className="text-foreground font-mono text-[10px]">{preflight.address?.slice(0, 10)}...</span>
+          </div>
+          <div className="flex justify-between text-xs">
+            <span className="text-muted">ETH Balance</span>
+            <span className={preflight.hasEnoughEth ? "text-accent" : "text-error"}>{preflight.ethBalance ? formatEth(preflight.ethBalance) : "0"} ETH</span>
+          </div>
+          {preflight.creationFee && BigInt(preflight.creationFee) > 0n && (
+            <div className="flex justify-between text-xs">
+              <span className="text-muted">Creation Fee</span>
+              <span className="text-foreground">{formatEth(preflight.creationFee)} ETH</span>
+            </div>
+          )}
+          {preflight.requiredBalance && (
+            <div className="flex justify-between text-xs">
+              <span className="text-muted">Required (fee + gas)</span>
+              <span className="text-foreground">~{formatEth(preflight.requiredBalance)} ETH</span>
+            </div>
+          )}
+          <div className="flex justify-between text-xs">
+            <span className="text-muted">Filebase (IPFS)</span>
+            <span className={preflight.hasFilebase ? "text-accent" : "text-error"}>{preflight.hasFilebase ? "configured" : "missing"}</span>
+          </div>
+          {preflight.error && <p className="text-error text-xs">{preflight.error}</p>}
+        </div>
+      )}
+
+      {/* Draft list */}
+      {drafts.length === 0 && (
+        <p className="text-muted text-xs">no drafts ready for publishing — finalize a story from the chat first</p>
+      )}
+
+      {drafts.map((draft) => (
+        <div key={draft.id} className="border-border rounded border p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="text-foreground text-sm font-medium">{draft.title}</h3>
+            <span className="text-accent text-[10px]">{draft.genre}</span>
+          </div>
+
+          {selected?.id === draft.id ? (
+            <div className="space-y-3">
+              {/* Full preview */}
+              <div className="bg-surface max-h-80 overflow-y-auto rounded p-3">
+                <div className="prose prose-xs max-w-none text-xs leading-relaxed">
+                  <Markdown>{draft.content}</Markdown>
+                </div>
+              </div>
+
+              {/* Publish button */}
+              {preflight?.ready && !publishing && (
+                <div className="space-y-2">
+                  <p className="text-muted text-[10px]">
+                    This will upload to IPFS and publish on-chain to Base via your OWS wallet.
+                  </p>
+                  <button
+                    onClick={() => handlePublish(draft)}
+                    className="border-accent text-accent hover:bg-accent/10 w-full rounded border px-4 py-2 text-sm font-medium transition-colors"
+                  >
+                    publish to PlotLink
+                  </button>
+                </div>
+              )}
+
+              {!preflight?.ready && (
+                <p className="text-error text-xs">publishing not ready — check preflight above</p>
+              )}
+
+              <button onClick={() => setSelected(null)} className="text-muted hover:text-foreground text-xs">
+                collapse
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <p className="text-muted text-xs truncate max-w-[60%]">{draft.content.slice(0, 100)}...</p>
+              <button
+                onClick={() => { setSelected(draft); if (!preflight) checkPreflight(); }}
+                className="border-border text-muted hover:border-accent hover:text-accent rounded border px-3 py-1 text-[10px] font-medium transition-colors"
+              >
+                preview &amp; publish
+              </button>
+            </div>
+          )}
+        </div>
+      ))}
+
+      {/* Progress */}
+      {progress && (
+        <div className={`rounded border p-4 space-y-2 ${progress.step === "error" ? "border-red-700/30" : progress.step === "done" ? "border-green-700/30" : "border-accent/30"}`}>
+          <div className="flex items-center gap-2">
+            {progress.step !== "done" && progress.step !== "error" && (
+              <span className="text-accent animate-pulse text-xs">&#x25CF;</span>
+            )}
+            <span className={`text-xs font-medium ${progress.step === "error" ? "text-red-700" : progress.step === "done" ? "text-accent" : "text-accent"}`}>
+              {progress.message}
+            </span>
+          </div>
+          {progress.txHash && (
+            <div className="text-xs">
+              <span className="text-muted">tx: </span>
+              <a href={`https://basescan.org/tx/${progress.txHash}`} target="_blank" rel="noopener noreferrer" className="text-accent font-mono text-[10px] underline">
+                {progress.txHash.slice(0, 14)}...
+              </a>
+            </div>
+          )}
+          {progress.contentCid && (
+            <div className="text-xs">
+              <span className="text-muted">IPFS: </span>
+              <span className="text-foreground font-mono text-[10px]">{progress.contentCid}</span>
+            </div>
+          )}
+          {progress.storylineId && (
+            <div className="text-xs">
+              <span className="text-muted">story: </span>
+              <a href={`https://plotlink.xyz/story/${progress.storylineId}`} target="_blank" rel="noopener noreferrer" className="text-accent underline">
+                plotlink.xyz/story/{progress.storylineId}
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}