plotlink-ows 0.1.14 → 0.1.18

package/app/web/components/Dashboard.tsx

@@ -29,17 +29,15 @@ interface DashboardData {
   pnl: { totalCostsEth: string; totalCostsUsd: string; totalRoyaltiesPlot: string; totalRoyaltiesUsd: string; netPnlUsd: string; plotUsdPrice: string };
   stories: {
     published: Story[];
-    drafts: Story[];
     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,13 +49,6 @@ 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" });
 
@@ -80,16 +71,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>
 
@@ -188,35 +179,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>
   );
 }

package/app/web/components/PreviewPanel.tsx

@@ -0,0 +1,149 @@
+import { useState, useEffect, useCallback } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+
+interface PreviewPanelProps {
+  storyName: string | null;
+  fileName: string | null;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+  onPublish?: (storyName: string, fileName: string) => void;
+  publishingFile?: string | null;
+}
+
+interface FileData {
+  file: string;
+  status: "published" | "pending" | "draft";
+  content: string;
+  txHash?: string;
+  storylineId?: number;
+}
+
+export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publishingFile }: PreviewPanelProps) {
+  const [fileData, setFileData] = useState<FileData | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const loadFile = useCallback(async () => {
+    if (!storyName || !fileName) { setFileData(null); return; }
+    try {
+      const res = await authFetch(`/api/stories/${storyName}/${fileName}`);
+      if (res.ok) {
+        setFileData(await res.json());
+      }
+    } catch { /* ignore */ }
+  }, [storyName, fileName, authFetch]);
+
+  // Initial load
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- async fetch on mount
+    setLoading(true);
+    loadFile().finally(() => setLoading(false));
+  }, [loadFile]);
+
+  // Auto-refresh every 3 seconds
+  useEffect(() => {
+    if (!storyName || !fileName) return;
+    const interval = setInterval(loadFile, 3000);
+    return () => clearInterval(interval);
+  }, [storyName, fileName, loadFile]);
+
+  if (!storyName || !fileName) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted">
+        <div className="text-center">
+          <p className="text-lg font-serif">Select a file to preview</p>
+          <p className="text-sm mt-1">Click a story file in the sidebar</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading && !fileData) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted">
+        Loading...
+      </div>
+    );
+  }
+
+  const charCount = fileData?.content?.length ?? 0;
+  const isGenesis = fileName === "genesis.md";
+  const charLimit = isGenesis ? 1000 : 10000;
+  const overLimit = 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>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <span className={`text-xs font-mono ${overLimit ? "text-error" : "text-muted"}`}>
+            {charCount.toLocaleString()}/{charLimit.toLocaleString()}
+          </span>
+        </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]}
+            >
+              {fileData.content}
+            </ReactMarkdown>
+          </div>
+        ) : (
+          <p className="text-muted italic">No content</p>
+        )}
+      </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" ? (
+          <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}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-accent underline"
+              >
+                View on PlotLink
+              </a>
+            )}
+            {fileData.txHash && (
+              <a
+                href={`https://basescan.org/tx/${fileData.txHash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted underline"
+              >
+                BaseScan
+              </a>
+            )}
+          </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>
+    </div>
+  );
+}

package/app/web/components/Settings.tsx

@@ -1,13 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { WalletCard } from "./WalletCard";
 
-const API_BASE = "http://localhost:7777";
-
-export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLogout: () => void; onChangeLLM: () => void }) {
-  const [llmConfig, setLlmConfig] = useState<{ llm: Record<string, unknown>; configured: string[] } | null>(null);
-  const [spendCap, setSpendCap] = useState<string>("10");
-  const [savingCap, setSavingCap] = useState(false);
-  const [capSaved, setCapSaved] = useState(false);
+export function Settings({ token, onLogout }: { token: string; onLogout: () => void }) {
   const [newPassphrase, setNewPassphrase] = useState("");
   const [confirmPassphrase, setConfirmPassphrase] = useState("");
   const [passphraseError, setPassphraseError] = useState<string | null>(null);
@@ -17,28 +11,6 @@ export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLo
   const authFetch = (url: string, opts?: RequestInit) =>
     fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
 
-  useEffect(() => {
-    authFetch(`${API_BASE}/api/config/llm`)
-      .then((r) => r.json())
-      .then((data) => setLlmConfig(data));
-  }, []);
-
-  const activeProvider = (llmConfig?.llm as Record<string, unknown>)?.activeProvider as string | undefined;
-  const activeModel = (llmConfig?.llm as Record<string, unknown>)?.activeModel as string | undefined;
-
-  const handleSaveSpendCap = async () => {
-    setSavingCap(true);
-    setCapSaved(false);
-    // Persist spending cap to agent.config.json
-    await authFetch(`${API_BASE}/api/config/llm`, {
-      method: "POST",
-      body: JSON.stringify({ provider: activeProvider || "anthropic", model: activeModel || "", spendCap: Number(spendCap) }),
-    });
-    setSavingCap(false);
-    setCapSaved(true);
-    setTimeout(() => setCapSaved(false), 2000);
-  };
-
   const handleResetPassphrase = async () => {
     setPassphraseError(null);
     setPassphraseSuccess(false);
@@ -52,7 +24,7 @@ export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLo
     }
     setSavingPassphrase(true);
     try {
-      const res = await authFetch(`${API_BASE}/api/auth/reset-passphrase`, {
+      const res = await authFetch("/api/auth/reset-passphrase", {
         method: "POST",
         body: JSON.stringify({ passphrase: newPassphrase }),
       });
@@ -74,62 +46,9 @@ export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLo
     <div className="mx-auto max-w-lg space-y-6 p-6">
       <h2 className="text-accent text-lg font-bold">Settings</h2>
 
-      {/* LLM Config */}
-      <div className="border-border rounded border p-4">
-        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">LLM Provider</h3>
-        {llmConfig ? (
-          <div className="space-y-3">
-            <div className="flex justify-between text-xs">
-              <span className="text-muted">Provider</span>
-              <span className="text-foreground font-medium">{activeProvider || "not configured"}</span>
-            </div>
-            <div className="flex justify-between text-xs">
-              <span className="text-muted">Model</span>
-              <span className="text-foreground font-medium">{activeModel || "—"}</span>
-            </div>
-            <div className="flex justify-between text-xs">
-              <span className="text-muted">Configured</span>
-              <span className="text-foreground font-medium">{llmConfig.configured.join(", ") || "none"}</span>
-            </div>
-            <button
-              onClick={onChangeLLM}
-              className="border-accent text-accent hover:bg-accent/10 w-full rounded border px-4 py-2 text-xs font-medium transition-colors"
-            >
-              change provider / model
-            </button>
-          </div>
-        ) : (
-          <p className="text-muted text-xs">loading...</p>
-        )}
-      </div>
-
       {/* Wallet */}
       <WalletCard token={token} />
 
-      {/* Spending Cap */}
-      <div className="border-border rounded border p-4">
-        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Spending Cap</h3>
-        <div className="flex items-center gap-2">
-          <span className="text-muted text-xs">$</span>
-          <input
-            type="number"
-            value={spendCap}
-            onChange={(e) => setSpendCap(e.target.value)}
-            min="0"
-            step="1"
-            className="bg-surface border-border text-foreground w-24 rounded border px-2 py-1.5 text-sm outline-none focus:border-accent"
-          />
-          <span className="text-muted text-xs">USDC per session</span>
-          <button
-            onClick={handleSaveSpendCap}
-            disabled={savingCap}
-            className="border-accent text-accent hover:bg-accent/10 disabled:opacity-40 ml-auto rounded border px-3 py-1.5 text-xs font-medium transition-colors"
-          >
-            {savingCap ? "saving..." : capSaved ? "saved" : "save"}
-          </button>
-        </div>
-      </div>
-
       {/* Reset Passphrase */}
       <div className="border-border rounded border p-4">
         <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Reset Passphrase</h3>