plotlink-ows 1.0.33 → 1.2.95

package/app/web/components/TerminalPanel.tsx

@@ -3,6 +3,17 @@ import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { SerializeAddon } from "@xterm/addon-serialize";
 import "@xterm/xterm/css/xterm.css";
+import { isCodexAuthUnclear, CODEX_AUTH_UNCLEAR_MESSAGE, type AgentReadiness } from "@app-lib/agent-readiness";
+import { FRESH_SPAWN_SIGNAL } from "@app-lib/terminal-protocol";
+import { redactTerminalSecrets } from "@app-lib/terminal-redact";
+
+/** Story metadata persisted with a `_new_*` → real-folder rename (#295). */
+export interface RenameMeta {
+  contentType?: "fiction" | "cartoon";
+  language?: string;
+  agentMode?: "normal" | "bypass";
+  agentProvider?: "claude" | "codex";
+}
 
 interface TerminalPanelProps {
   token: string;
@@ -12,7 +23,49 @@ interface TerminalPanelProps {
   onDestroySession?: (storyName: string) => void;
   onArchiveStory?: (storyName: string) => void;
   confirmedStories?: Set<string>;
-  renameRef?: React.RefObject<((oldName: string, newName: string) => Promise<boolean>) | null>;
+  // The optional `meta` is persisted to the confirmed story's .story.json
+  // atomically with the rename so a fresh story's provider/contentType survive (#295).
+  renameRef?: React.RefObject<((oldName: string, newName: string, meta?: RenameMeta) => Promise<boolean>) | null>;
+  bypassStories?: Record<string, boolean>;
+  agentProviders?: Record<string, "claude" | "codex">;
+  /** Local agent (Codex) readiness. null/undefined = not yet loaded (fail-open). */
+  readiness?: AgentReadiness | null;
+  /** Content type of the currently-selected story (undefined = unknown). */
+  contentType?: "fiction" | "cartoon";
+  /**
+   * True only for the selected real (non-`_new_*`) cartoon story whose
+   * `.story.json` has no `agentProvider` recorded (legacy). When true, show the
+   * explicit provider-repair CTA instead of auto-spawning, so the writer sets
+   * the provider to Codex before launching. Never true for fiction or a cartoon
+   * that already has a provider.
+   */
+  needsProviderRepair?: boolean;
+  /** Set this story's provider to Codex (scoped, non-destructive repair). */
+  onRepairProvider?: () => void | Promise<void>;
+}
+
+const CODEX_ENABLE_CMD = "codex features enable image_generation";
+
+/**
+ * Pure predicate: should the cartoon agent LAUNCH be blocked?
+ *
+ * Blocked ONLY when ALL of:
+ *  - the selected story is a cartoon, AND
+ *  - readiness has loaded (non-null), AND
+ *  - Codex is NOT ready (not installed OR image generation not enabled).
+ *
+ * Fail-open: readiness null/undefined => NOT blocked (a probe failure must never
+ * brick terminals). Fiction / undefined contentType => NEVER blocked.
+ */
+export function isCartoonLaunchBlocked(
+  contentType: "fiction" | "cartoon" | undefined,
+  readiness: AgentReadiness | null | undefined,
+): boolean {
+  if (contentType !== "cartoon") return false;
+  if (!readiness) return false; // fail-open until readiness resolves
+  const codexReady =
+    readiness.codex.installed && readiness.codex.imageGeneration === "enabled";
+  return !codexReady;
 }
 
 interface TerminalSession {
@@ -106,13 +159,21 @@ async function deleteScrollback(storyName: string): Promise<void> {
 // Sessions live outside React state to avoid ref-in-effect lint issues
 const sessions = new Map<string, TerminalSession>();
 
-export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDestroySession, onArchiveStory, confirmedStories, renameRef }: TerminalPanelProps) {
+export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDestroySession, onArchiveStory, confirmedStories, renameRef, bypassStories, agentProviders, readiness, contentType, needsProviderRepair, onRepairProvider }: TerminalPanelProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const authFetchRef = useRef(authFetch);
   const [sessionList, setSessionList] = useState<string[]>([]);
   const [disconnected, setDisconnected] = useState<Set<string>>(new Set());
   const [confirmingDiscard, setConfirmingDiscard] = useState<string | null>(null);
   const [confirmingArchive, setConfirmingArchive] = useState<string | null>(null);
+  const [copiedEnableCmd, setCopiedEnableCmd] = useState(false);
+  const [repairing, setRepairing] = useState(false);
+
+  // Gate the cartoon agent launch for the currently-selected story.
+  const cartoonLaunchBlocked = isCartoonLaunchBlocked(contentType, readiness);
+  // Legacy cartoon (no provider recorded) ⇒ require explicit provider repair
+  // before auto-spawning a terminal. Scoped to the selected story only.
+  const showProviderRepair = !!needsProviderRepair;
 
   const connectWsRef = useRef<(name: string, session: TerminalSession, resume: boolean) => void>(() => {});
 
@@ -142,10 +203,19 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
     }
   }, [safeFit]);
 
+  const bypassRef = useRef<Record<string, boolean>>({});
+  useEffect(() => { bypassRef.current = bypassStories || {}; }, [bypassStories]);
+
+  const providerRef = useRef<Record<string, "claude" | "codex">>({});
+  useEffect(() => { providerRef.current = agentProviders || {}; }, [agentProviders]);
+
   const connectWs = useCallback((name: string, session: TerminalSession, resume: boolean) => {
     const wsProto = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const bypass = bypassRef.current[name] ? "&bypass=true" : "";
+    const provider = providerRef.current[name];
+    const providerParam = provider ? `&provider=${encodeURIComponent(provider)}` : "";
     const ws = new WebSocket(
-      `${wsProto}//${window.location.host}/ws/terminal?story=${encodeURIComponent(name)}&token=${token}&resume=${resume}`
+      `${wsProto}//${window.location.host}/ws/terminal?story=${encodeURIComponent(name)}&token=${token}&resume=${resume}${bypass}${providerParam}`
     );
 
     ws.onopen = () => {
@@ -155,8 +225,22 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
       ws.send(JSON.stringify({ type: "resize", cols: session.term.cols, rows: session.term.rows }));
     };
 
+    // The very first frame may be a control signal (#453). A fresh server spawn
+    // (the agent process reprints its banner/history) sends FRESH_SPAWN_SIGNAL —
+    // drop the restored scrollback so the banner isn't duplicated. Any other
+    // first frame (a live-PTY reconnect) is normal PTY output and is kept.
+    let firstFrame = true;
     ws.onmessage = (e) => {
-      session.term.write(e.data);
+      if (firstFrame) {
+        firstFrame = false;
+        if (typeof e.data === "string" && e.data === FRESH_SPAWN_SIGNAL) {
+          session.term.reset();
+          deleteScrollback(name).catch(() => {});
+          return;
+        }
+      }
+      // Mask obvious auth secrets before they reach the terminal / scrollback (#454).
+      session.term.write(typeof e.data === "string" ? redactTerminalSecrets(e.data) : e.data);
     };
 
     ws.onclose = (event) => {
@@ -242,11 +326,16 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
     sessions.set(name, session);
     setSessionList((prev) => [...prev, name]);
 
-    // Restore scrollback from IndexedDB
+    // Restore scrollback from IndexedDB, masking any auth secrets first so an OLD
+    // transcript can't re-display previously-persisted tokens/passphrases (#454).
+    // If redaction changed it, re-save the masked copy so the raw value is gone
+    // from storage and never re-persisted later.
     try {
       const saved = await loadScrollback(name);
       if (saved) {
-        term.write(saved);
+        const redacted = redactTerminalSecrets(saved);
+        term.write(redacted);
+        if (redacted !== saved) saveScrollback(name, redacted).catch(() => {});
       }
     } catch { /* ignore */ }
 
@@ -330,15 +419,16 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
 
   /** Rename a session key (e.g. _new_123 → paper-chair) without killing the PTY.
    *  Returns true on success, false on failure. */
-  const renameSession = useCallback(async (oldName: string, newName: string): Promise<boolean> => {
+  const renameSession = useCallback(async (oldName: string, newName: string, meta?: RenameMeta): Promise<boolean> => {
     const session = sessions.get(oldName);
     if (!session || sessions.has(newName)) return false;
 
-    // Rename on the server first
+    // Rename on the server first. Forward the confirmed story's metadata so the
+    // server persists contentType/provider atomically with the rename (#295).
     const res = await authFetchRef.current("/api/terminal/rename", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ oldName, newName }),
+      body: JSON.stringify({ oldName, newName, ...(meta ?? {}) }),
     });
     if (!res.ok) return false;
 
@@ -363,6 +453,24 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
       return next;
     });
 
+    // #377: the renamed session's live PTY keeps the cwd it was SPAWNED in, so
+    // after the story folder moves (e.g. _new_* → final, or a partial slug →
+    // full title) the agent's trust prompt / working directory still points at
+    // the old (now-renamed) folder — confusing, and the old folder may no longer
+    // exist. If this session is live, move the terminal into the FINAL folder:
+    // kill the stale-cwd PTY and reconnect WITH RESUME, so the new spawn runs in
+    // stories/<newName> (correct cwd/trust prompt) while the conversation is
+    // preserved (claude --resume / codex resume). The server reads the provider
+    // from the .story.json it just persisted, so the respawn stays provider-aware.
+    // If resume can't recover, the existing code-4000 path reconnects fresh in
+    // the same (correct) folder. A never-connected session needs no respawn — its
+    // first connect already uses the final name.
+    if (session.connected || session.ws) {
+      await authFetchRef.current(`/api/terminal/${encodeURIComponent(newName)}`, { method: "DELETE" }).catch(() => {});
+      if (session.ws) { session.ws.close(); session.ws = null; }
+      connectWsRef.current(newName, session, true);
+    }
+
     return true;
   }, []);
 
@@ -375,6 +483,20 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
   // Auto-spawn + show/hide when story changes
   useEffect(() => {
     if (!storyName) return;
+    // Cartoon readiness gate: never spawn/connect a terminal for a cartoon
+    // story whose Codex/image_generation is known-not-ready. Show guidance
+    // instead (rendered below). Fail-open when readiness is null/undefined.
+    if (cartoonLaunchBlocked) {
+      showSession(null);
+      return;
+    }
+    // Legacy cartoon with no recorded provider: do NOT auto-spawn. Show the
+    // explicit repair CTA so the writer sets the provider to Codex first. After
+    // repair, `needsProviderRepair` flips false and normal gating/launch applies.
+    if (showProviderRepair) {
+      showSession(null);
+      return;
+    }
     if (!sessions.has(storyName)) {
       // Check if a previous session exists — if so, show overlay instead of auto-connecting
       authFetchRef.current(`/api/terminal/session/${encodeURIComponent(storyName)}`)
@@ -395,7 +517,7 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
     } else {
       showSession(storyName);
     }
-  }, [storyName, createSession, showSession]);
+  }, [storyName, createSession, showSession, cartoonLaunchBlocked, showProviderRepair]);
 
   // Periodic scrollback save (every 30s for active session)
   useEffect(() => {
@@ -496,7 +618,7 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
         <div ref={wrapperRef} className="h-full" />
 
         {/* Empty state overlay */}
-        {isEmpty && (
+        {isEmpty && !cartoonLaunchBlocked && !showProviderRepair && (
           <div className="absolute inset-0 flex items-center justify-center text-muted">
             <div className="text-center">
               <p className="text-lg font-serif">Select a story on the left menu</p>
@@ -505,6 +627,106 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDe
           </div>
         )}
 
+        {/* Cartoon launch gated: Codex / image generation not ready */}
+        {cartoonLaunchBlocked && (
+          <div
+            data-testid="cartoon-launch-blocked"
+            className="absolute inset-0 flex items-center justify-center"
+            style={{ background: "rgba(240, 235, 225, 0.9)" }}
+          >
+            <div className="space-y-3 p-6 bg-surface border border-border rounded-lg shadow-lg max-w-md">
+              <p className="text-sm font-serif text-foreground font-medium">
+                Cartoon agent can&apos;t launch yet
+              </p>
+              <p className="text-xs text-muted">
+                This is a cartoon story. The writing agent needs Codex with image
+                generation enabled before it can start, because the clean-image
+                step relies on image generation support.
+              </p>
+              {readiness && !readiness.codex.installed ? (
+                <p className="text-xs text-amber-700">
+                  Codex was not detected. Install the Codex CLI and sign in
+                  (e.g. <span className="font-mono">npm i -g @openai/codex</span> then{" "}
+                  <span className="font-mono">codex login</span>), then reopen this story.
+                </p>
+              ) : isCodexAuthUnclear(readiness) ? (
+                <p className="text-xs text-amber-700" data-testid="codex-auth-unknown-launch">
+                  {CODEX_AUTH_UNCLEAR_MESSAGE} Then reopen this story.
+                </p>
+              ) : (
+                <div className="space-y-1">
+                  <p className="text-xs text-amber-700">
+                    Codex is installed but image generation isn&apos;t enabled. Enable
+                    it, then reopen this story:
+                  </p>
+                  <div className="flex items-center gap-1">
+                    <code className="flex-1 truncate rounded border border-border bg-surface px-1.5 py-1 text-left text-[10px] font-mono text-foreground">
+                      {CODEX_ENABLE_CMD}
+                    </code>
+                    <button
+                      type="button"
+                      data-testid="copy-codex-enable-launch"
+                      onClick={async () => {
+                        try {
+                          await navigator.clipboard.writeText(CODEX_ENABLE_CMD);
+                          setCopiedEnableCmd(true);
+                          setTimeout(() => setCopiedEnableCmd(false), 2000);
+                        } catch { /* clipboard unavailable */ }
+                      }}
+                      className="rounded border border-border px-2 py-1 text-[10px] text-muted hover:border-accent hover:text-accent transition-colors"
+                    >
+                      {copiedEnableCmd ? "Copied!" : "Copy"}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Legacy cartoon: no provider recorded — explicit, scoped repair CTA.
+            Separate from readiness gating; about a MISSING provider on this one
+            story. Setting it to Codex never touches other stories or fiction. */}
+        {showProviderRepair && !cartoonLaunchBlocked && (
+          <div
+            data-testid="legacy-cartoon-provider-repair"
+            className="absolute inset-0 flex items-center justify-center"
+            style={{ background: "rgba(240, 235, 225, 0.9)" }}
+          >
+            <div className="space-y-3 p-6 bg-surface border border-border rounded-lg shadow-lg max-w-md">
+              <p className="text-sm font-serif text-foreground font-medium">
+                Set this cartoon story&apos;s provider
+              </p>
+              <p className="text-xs text-muted">
+                This cartoon story was created before provider tracking, so it has
+                no provider recorded and would launch with Claude — which can&apos;t
+                generate the clean images cartoons need. Set this story&apos;s
+                provider to Codex to continue.
+              </p>
+              <p className="text-[11px] text-muted">
+                Only this story is changed. Other stories and fiction are not affected.
+              </p>
+              <button
+                type="button"
+                data-testid="repair-provider-codex"
+                disabled={repairing}
+                onClick={async () => {
+                  if (repairing) return;
+                  setRepairing(true);
+                  try {
+                    await onRepairProvider?.();
+                  } finally {
+                    setRepairing(false);
+                  }
+                }}
+                className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {repairing ? "Setting…" : "Set this story's provider to Codex"}
+              </button>
+            </div>
+          </div>
+        )}
+
         {/* Discard confirmation overlay */}
         {confirmingDiscard && (
           <div className="absolute inset-0 flex items-center justify-center z-10" style={{ background: "rgba(240, 235, 225, 0.9)" }}>

package/app/web/components/WalletCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 
 const API_BASE = "http://localhost:7777";
 
@@ -7,29 +7,45 @@ interface WalletInfo {
   walletId?: string;
   name?: string;
   address?: string;
+  activeWallet?: WalletChoice;
+  wallets?: WalletChoice[];
+  selectionRequired?: boolean;
   ethBalance?: string;
   usdcBalance?: string;
   plotBalance?: string;
   error?: string;
 }
 
+interface WalletChoice {
+  walletId?: string;
+  name: string;
+  address?: string;
+  normalizedAddress?: string;
+  source: "ows";
+  label: string;
+  recognized: boolean;
+  active: boolean;
+}
+
 export function WalletCard({ token }: { token: string }) {
   const [wallet, setWallet] = useState<WalletInfo | null>(null);
   const [creating, setCreating] = useState(false);
+  const [switching, setSwitching] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const authFetch = (url: string, opts?: RequestInit) =>
-    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
+  const authFetch = useCallback((url: string, opts?: RequestInit) =>
+    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } }),
+  [token]);
 
-  const loadWallet = () => {
+  const loadWallet = useCallback(() => {
     authFetch(`${API_BASE}/api/wallet`)
       .then((r) => r.json())
       .then((data) => setWallet(data))
       .catch(() => setWallet({ exists: false, error: "Failed to load wallet" }));
-  };
+  }, [authFetch]);
 
-  useEffect(() => { loadWallet(); }, []);
+  useEffect(() => { loadWallet(); }, [loadWallet]);
 
   const handleCreate = async () => {
     setCreating(true);
@@ -45,6 +61,27 @@ export function WalletCard({ token }: { token: string }) {
     setCreating(false);
   };
 
+  const handleSwitch = async (choice: WalletChoice) => {
+    setSwitching(choice.walletId || choice.name);
+    setError(null);
+    try {
+      const res = await authFetch(`${API_BASE}/api/wallet/active`, {
+        method: "POST",
+        body: JSON.stringify({
+          walletId: choice.walletId,
+          name: choice.name,
+          address: choice.normalizedAddress || choice.address,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Wallet switch failed");
+      loadWallet();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to switch wallet");
+    }
+    setSwitching(null);
+  };
+
   const copyAddress = () => {
     if (wallet?.address) {
       navigator.clipboard.writeText(wallet.address);
@@ -63,7 +100,7 @@ export function WalletCard({ token }: { token: string }) {
 
       {wallet && !wallet.exists && (
         <div className="space-y-3">
-          <p className="text-muted text-xs">No wallet created yet. Create one to enable autonomous transactions.</p>
+          <p className="text-muted text-xs">{wallet.error || "No wallet created yet. Create one to enable autonomous transactions."}</p>
           {error && <p className="text-error text-xs">{error}</p>}
           <button
             onClick={handleCreate}
@@ -75,15 +112,44 @@ export function WalletCard({ token }: { token: string }) {
         </div>
       )}
 
+      {wallet?.selectionRequired && wallet.wallets && wallet.wallets.length > 0 && (
+        <div className="mb-4 space-y-3 rounded border border-amber-600/30 bg-amber-950/10 p-3">
+          <p className="text-xs text-amber-700">Multiple OWS wallets found. Select the wallet OWS should use for publishing and signing.</p>
+          {wallet.wallets.map((choice) => (
+            <div key={choice.walletId || choice.name} className="border-border flex items-center justify-between gap-3 rounded border p-2">
+              <div className="min-w-0">
+                <p className="text-foreground truncate text-xs font-medium">{choice.name}</p>
+                <p className="text-muted truncate text-[10px] font-mono">{choice.address || "No EVM address"}</p>
+              </div>
+              <button
+                onClick={() => handleSwitch(choice)}
+                disabled={!choice.address || switching === (choice.walletId || choice.name)}
+                className="border-accent text-accent hover:bg-accent/10 disabled:opacity-40 rounded border px-2 py-1 text-[10px] font-medium transition-colors"
+              >
+                {switching === (choice.walletId || choice.name) ? "switching..." : "use"}
+              </button>
+            </div>
+          ))}
+          {error && <p className="text-error text-xs">{error}</p>}
+        </div>
+      )}
+
       {wallet && wallet.exists && wallet.address && (
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-muted text-[10px] uppercase tracking-wider">Address (Base)</span>
+            <span className="text-muted text-[10px] uppercase tracking-wider">Active Wallet (Base)</span>
             <span className={`rounded border px-1.5 py-0.5 text-[9px] ${wallet.ethBalance && parseFloat(wallet.ethBalance) > 0 ? "border-accent/30 text-accent" : "border-accent-dim/30 text-accent-dim"}`}>
               {wallet.ethBalance && parseFloat(wallet.ethBalance) > 0 ? "active" : "no balance"}
             </span>
           </div>
 
+          {wallet.name && (
+            <div className="flex justify-between text-xs">
+              <span className="text-muted">Name</span>
+              <span className="text-foreground truncate pl-3 font-mono text-[10px]">{wallet.name}</span>
+            </div>
+          )}
+
           <div className="flex items-center gap-2">
             <code className="text-foreground bg-surface rounded px-2 py-1 text-xs font-mono">{truncate(wallet.address)}</code>
             <button onClick={copyAddress} className="text-muted hover:text-accent text-xs transition-colors">
@@ -110,6 +176,32 @@ export function WalletCard({ token }: { token: string }) {
             </div>
           </div>
 
+          {wallet.wallets && wallet.wallets.length > 1 && (
+            <div className="border-border space-y-2 border-t pt-3">
+              <p className="text-muted text-[10px] font-medium uppercase tracking-wider">Switch Wallet</p>
+              {wallet.wallets.map((choice) => (
+                <div key={choice.walletId || choice.name} className="flex items-center justify-between gap-3 text-xs">
+                  <div className="min-w-0">
+                    <p className={choice.active ? "text-accent truncate font-medium" : "text-foreground truncate"}>
+                      {choice.name}{choice.active ? " (active)" : ""}
+                    </p>
+                    <p className="text-muted truncate text-[10px] font-mono">{choice.address || "No EVM address"}</p>
+                  </div>
+                  {!choice.active && (
+                    <button
+                      onClick={() => handleSwitch(choice)}
+                      disabled={!choice.address || switching === (choice.walletId || choice.name)}
+                      className="border-border text-muted hover:border-accent hover:text-accent disabled:opacity-40 rounded border px-2 py-1 text-[10px] transition-colors"
+                    >
+                      {switching === (choice.walletId || choice.name) ? "..." : "use"}
+                    </button>
+                  )}
+                </div>
+              ))}
+              {error && <p className="text-error text-xs">{error}</p>}
+            </div>
+          )}
+
           {/* Fund wallet */}
           <div className="border-border border-t pt-3">
             <p className="text-muted mb-2 text-[10px] font-medium uppercase tracking-wider">Fund Wallet</p>
@@ -118,6 +210,16 @@ export function WalletCard({ token }: { token: string }) {
           </div>
         </div>
       )}
+
+      {wallet?.exists && (
+        <button
+          onClick={handleCreate}
+          disabled={creating}
+          className="border-border text-muted hover:border-accent hover:text-accent disabled:opacity-40 mt-4 rounded border px-3 py-1.5 text-[10px] font-medium transition-colors"
+        >
+          {creating ? "creating..." : "create another wallet"}
+        </button>
+      )}
     </div>
   );
 }