plotlink-ows 0.1.15 → 1.0.0

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,18 +38,16 @@ 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[];
-    drafts: Story[];
+    published: StoryGroup[];
     totalPublished: number;
-    totalDrafts: number;
+    totalStories: number;
+    totalFiles: number;
+    pendingFiles: number;
   };
-  sessions: { total: number; totalMessages: number };
 }
 
 export function Dashboard({ token }: { token: string }) {
   const [data, setData] = useState<DashboardData | null>(null);
-  const [deleting, setDeleting] = useState<string | null>(null);
-
   const authFetch = (url: string, opts?: RequestInit) =>
     fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
 
@@ -51,15 +59,13 @@ export function Dashboard({ token }: { token: string }) {
 
   useEffect(() => { loadDashboard(); }, []);
 
-  const handleDelete = async (id: string) => {
-    setDeleting(id);
-    await authFetch(`${API_BASE}/api/dashboard/drafts/${id}`, { method: "DELETE" });
-    loadDashboard();
-    setDeleting(null);
-  };
-
   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 (
@@ -80,16 +86,16 @@ export function Dashboard({ token }: { token: string }) {
           <div className="text-muted text-[10px] uppercase tracking-wider">published</div>
         </div>
         <div className="border-border rounded border p-3 text-center">
-          <div className="text-foreground text-lg font-bold">{data.stories.totalDrafts}</div>
-          <div className="text-muted text-[10px] uppercase tracking-wider">drafts</div>
+          <div className="text-foreground text-lg font-bold">{data.stories.pendingFiles}</div>
+          <div className="text-muted text-[10px] uppercase tracking-wider">pending</div>
         </div>
         <div className="border-border rounded border p-3 text-center">
-          <div className="text-foreground text-lg font-bold">{data.sessions.total}</div>
-          <div className="text-muted text-[10px] uppercase tracking-wider">sessions</div>
+          <div className="text-foreground text-lg font-bold">{data.stories.totalStories}</div>
+          <div className="text-muted text-[10px] uppercase tracking-wider">stories</div>
         </div>
         <div className="border-border rounded border p-3 text-center">
-          <div className="text-foreground text-lg font-bold">{data.sessions.totalMessages}</div>
-          <div className="text-muted text-[10px] uppercase tracking-wider">messages</div>
+          <div className="text-foreground text-lg font-bold">{data.stories.totalFiles}</div>
+          <div className="text-muted text-[10px] uppercase tracking-wider">files</div>
         </div>
       </div>
 
@@ -149,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>
-                <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)}...
+                {/* 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-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>
             ))}
@@ -188,35 +230,12 @@ export function Dashboard({ token }: { token: string }) {
         )}
       </div>
 
-      {/* Draft stories */}
-      <div className="border-border rounded border p-4">
-        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Drafts</h3>
-        {data.stories.drafts.length === 0 ? (
-          <p className="text-muted text-xs">no drafts — start writing from the chat</p>
-        ) : (
-          <div className="space-y-2">
-            {data.stories.drafts.map((draft) => (
-              <div key={draft.id} className="bg-surface flex items-center justify-between rounded p-3">
-                <div>
-                  <span className="text-foreground text-sm font-medium">{draft.title}</span>
-                  {draft.genre && <span className="text-accent ml-2 text-[10px]">{draft.genre}</span>}
-                  <div className="text-muted text-[10px]">{formatDate(draft.createdAt)}</div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="border-border rounded border px-1.5 py-0.5 text-[9px] text-muted">{draft.status}</span>
-                  <button
-                    onClick={() => handleDelete(draft.id)}
-                    disabled={deleting === draft.id}
-                    className="text-muted hover:text-error text-[10px] transition-colors"
-                  >
-                    {deleting === draft.id ? "..." : "delete"}
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
+      {/* Pending files info */}
+      {data.stories.pendingFiles > 0 && (
+        <div className="border-border rounded border p-4">
+          <p className="text-muted text-xs">{data.stories.pendingFiles} file(s) pending publish — go to Stories to publish them.</p>
+        </div>
+      )}
     </div>
   );
 }

package/app/web/components/Layout.tsx

@@ -1,14 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { LLMSetup } from "./LLMSetup";
-import { WalletCard } from "./WalletCard";
+import React, { useState, useEffect, useCallback } from "react";
 import { Settings } from "./Settings";
-import { Chat } from "./Chat";
-import { Publish } from "./Publish";
 import { Dashboard } from "./Dashboard";
+import { StoriesPage } from "./StoriesPage";
+import { WalletCard } from "./WalletCard";
 
-const API_BASE = "http://localhost:7777";
-
-type Page = "home" | "chat" | "publish" | "dashboard" | "llm-setup" | "wallet-setup" | "settings";
+type Page = "home" | "stories" | "dashboard" | "wallet-setup" | "settings";
 
 function WalletSetupPage({ token, onComplete }: { token: string; onComplete: () => void }) {
   const [creating, setCreating] = useState(false);
@@ -19,7 +15,7 @@ function WalletSetupPage({ token, onComplete }: { token: string; onComplete: ()
     setCreating(true);
     setError(null);
     try {
-      const res = await fetch(`${API_BASE}/api/wallet/create`, {
+      const res = await fetch("/api/wallet/create", {
         method: "POST",
         headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
       });
@@ -32,12 +28,13 @@ function WalletSetupPage({ token, onComplete }: { token: string; onComplete: ()
     setCreating(false);
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   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>
+      <p className="text-muted mb-6 text-xs">creating your OWS wallet for on-chain publishing</p>
 
       {creating && <p className="text-accent text-sm">creating wallet...</p>}
 
@@ -71,64 +68,58 @@ function WalletSetupPage({ token, onComplete }: { token: string; onComplete: ()
 
 export function Layout({ token, onLogout }: { token: string; onLogout: () => void }) {
   const [page, setPage] = useState<Page>("home");
-  const [llmConfigured, setLlmConfigured] = useState<boolean | null>(null);
+  const [storyCount, setStoryCount] = useState(0);
+
+  const authFetch = useCallback(async (url: string, opts?: RequestInit) => {
+    return fetch(url, {
+      ...opts,
+      headers: {
+        ...(opts?.headers || {}),
+        Authorization: `Bearer ${token}`,
+      },
+    });
+  }, [token]);
 
   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 walletRes = await authFetch("/api/wallet");
         const walletData = await walletRes.json();
         if (!walletData.exists) {
           setPage("wallet-setup");
           return;
         }
-      } catch {
-        setLlmConfigured(false);
-      }
+
+        // Load story count
+        const storiesRes = await authFetch("/api/stories");
+        if (storiesRes.ok) {
+          const data = await storiesRes.json();
+          setStoryCount(data.stories.filter((s: { name: string }) => s.name !== "_example").length);
+        }
+      } catch { /* ignore */ }
     }
     checkSetup();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
 
   return (
     <div className="flex h-screen flex-col">
       {/* Header */}
-      <header className="border-border flex items-center justify-between border-b px-4 py-3">
+      <header className="border-border flex h-14 items-center justify-between border-b px-4 flex-shrink-0">
         <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>
+          <span className="text-muted text-[10px] uppercase tracking-wider">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"}`}
+            onClick={() => setPage("stories")}
+            className={`text-xs transition-colors ${page === "stories" ? "text-accent" : "text-muted hover:text-foreground"}`}
           >
-            publish
+            stories
           </button>
           <button
             onClick={() => setPage("dashboard")}
@@ -136,12 +127,6 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
           >
             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"}`}
@@ -156,62 +141,51 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
       </header>
 
       {/* Main content */}
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 min-h-0">
         {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 className="mx-auto max-w-lg space-y-6 p-8">
+            <div className="text-center space-y-2">
+              <h1 className="text-2xl font-serif text-foreground">Write. Publish. Earn.</h1>
+              <p className="text-muted text-sm">
+                Claude CLI writes stories. You publish them on-chain.
+              </p>
+            </div>
+
+            <div className="text-center space-y-3">
+              <button
+                onClick={() => setPage("stories")}
+                className="bg-accent text-white hover:bg-accent-dim px-6 py-2.5 rounded text-sm font-medium transition-colors"
+              >
+                Start Writing
+              </button>
+              {storyCount > 0 && (
+                <p className="text-muted text-xs">{storyCount} {storyCount === 1 ? "story" : "stories"} in progress</p>
+              )}
+            </div>
+
+            <div className="rounded border border-border p-4 space-y-2 text-xs text-muted">
+              <p className="font-medium text-foreground text-sm">How it works</p>
+              <ol className="space-y-1.5 list-decimal list-inside">
+                <li>Open the <strong>Stories</strong> tab — Claude CLI launches in the terminal</li>
+                <li>Tell Claude your story idea — it brainstorms, outlines, and writes</li>
+                <li>Review the live preview as Claude creates files</li>
+                <li>Click <strong>Publish</strong> to put your story on-chain</li>
+                <li>Earn 5% royalties on every trade at <a href="https://plotlink.xyz" target="_blank" rel="noopener noreferrer" className="text-accent underline">plotlink.xyz</a></li>
+              </ol>
+            </div>
+
+            <WalletCard token={token} />
           </div>
         )}
 
-        {page === "chat" && (
-          <Chat token={token} />
-        )}
-
-        {page === "publish" && (
-          <Publish token={token} />
+        {page === "stories" && (
+          <StoriesPage token={token} authFetch={authFetch} />
         )}
 
         {page === "dashboard" && (
           <Dashboard token={token} />
         )}
 
-        {page === "llm-setup" && (
-          <LLMSetup
-            token={token}
-            onComplete={() => {
-              setLlmConfigured(true);
-              setPage("wallet-setup");
-            }}
-          />
-        )}
-
         {page === "wallet-setup" && (
           <WalletSetupPage
             token={token}
@@ -220,16 +194,9 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
         )}
 
         {page === "settings" && (
-          <Settings token={token} onLogout={onLogout} onChangeLLM={() => setPage("llm-setup")} />
+          <Settings token={token} onLogout={onLogout} />
         )}
       </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>
   );
 }