From 2534507a156a0270acbda81c7aed7adfae409a6a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 19:44:01 +0000
Subject: [PATCH] feat: enhance login options with read-only and nsec support

- Add read-only login mode supporting:
  - npub (bech32 public key)
  - nprofile (bech32 profile with relay hints)
  - hex public key
  - NIP-05 addresses (user@domain.com)

- Add private key (nsec) login with security warning
  - Supports nsec1... format
  - Supports 64-char hex private key
  - Shows prominent security warning about localStorage storage

- Reorganize user menu to show login before theme option

- Use ReadonlyAccount from applesauce-accounts for read-only mode
- Use PrivateKeyAccount from applesauce-accounts for nsec login
- Update LoginDialog with 4 tabs: Extension, Read-Only, Private Key, Remote
- All account types properly registered via registerCommonAccountTypes()

Technical notes:
- ReadonlySigner throws errors on sign/encrypt operations
- Existing components naturally handle accounts without signing capability
- Hub/ActionRunner already syncs with account signers automatically
---
 src/components/nostr/LoginDialog.tsx | 260 ++++++++++++++++++++++++++-
 src/components/nostr/user-menu.tsx   |  58 +++---
 2 files changed, 283 insertions(+), 35 deletions(-)

diff --git a/src/components/nostr/LoginDialog.tsx b/src/components/nostr/LoginDialog.tsx
index c6dc1f8..cca5616 100644
--- a/src/components/nostr/LoginDialog.tsx
+++ b/src/components/nostr/LoginDialog.tsx
@@ -7,8 +7,10 @@ import {
 import {
   ExtensionAccount,
   NostrConnectAccount,
+  ReadonlyAccount,
+  PrivateKeyAccount,
 } from "applesauce-accounts/accounts";
-import { generateSecretKey } from "nostr-tools";
+import { generateSecretKey, nip19 } from "nostr-tools";
 import QRCode from "qrcode";
 import {
   Dialog,
@@ -27,9 +29,14 @@ import {
   Copy,
   Check,
   AlertCircle,
+  Eye,
+  Key,
+  ShieldAlert,
 } from "lucide-react";
 import accounts from "@/services/accounts";
 import pool from "@/services/relay-pool";
+import { resolveNip05, isNip05 } from "@/lib/nip05";
+import { isValidHexPubkey, normalizeHex } from "@/lib/nostr-validation";
 
 // Default relays for NIP-46 communication
 const DEFAULT_NIP46_RELAYS = [
@@ -38,7 +45,7 @@ const DEFAULT_NIP46_RELAYS = [
   "wss://nos.lol",
 ];
 
-type LoginTab = "extension" | "nostr-connect";
+type LoginTab = "extension" | "readonly" | "nsec" | "nostr-connect";
 
 interface LoginDialogProps {
   open: boolean;
@@ -50,6 +57,12 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Read-only login state
+  const [readonlyInput, setReadonlyInput] = useState("");
+
+  // Private key (nsec) login state
+  const [nsecInput, setNsecInput] = useState("");
+
   // NIP-46 state
   const [bunkerUrl, setBunkerUrl] = useState("");
   const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
@@ -72,6 +85,8 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
     if (!open) {
       setLoading(false);
       setError(null);
+      setReadonlyInput("");
+      setNsecInput("");
       setBunkerUrl("");
       setQrDataUrl(null);
       setConnectUri(null);
@@ -84,7 +99,13 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
   }, [open]);
 
   const handleSuccess = useCallback(
-    (account: ExtensionAccount<unknown> | NostrConnectAccount<unknown>) => {
+    (
+      account:
+        | ExtensionAccount<unknown>
+        | NostrConnectAccount<unknown>
+        | ReadonlyAccount<unknown>
+        | PrivateKeyAccount<unknown>,
+    ) => {
       accounts.addAccount(account);
       accounts.setActive(account);
       onOpenChange(false);
@@ -112,6 +133,109 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
     }
   }
 
+  // Read-only login
+  async function loginWithReadonly() {
+    if (!readonlyInput.trim()) {
+      setError("Please enter a pubkey, npub, nprofile, or NIP-05 address");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      let pubkey: string;
+
+      // Try npub/nprofile decode
+      if (
+        readonlyInput.startsWith("npub") ||
+        readonlyInput.startsWith("nprofile")
+      ) {
+        try {
+          const decoded = nip19.decode(readonlyInput);
+          if (decoded.type === "npub") {
+            pubkey = decoded.data;
+          } else if (decoded.type === "nprofile") {
+            pubkey = decoded.data.pubkey;
+          } else {
+            throw new Error("Invalid format");
+          }
+        } catch (err) {
+          throw new Error(
+            `Invalid bech32 identifier: ${err instanceof Error ? err.message : "unknown error"}`,
+          );
+        }
+      }
+      // Try hex pubkey
+      else if (isValidHexPubkey(readonlyInput)) {
+        pubkey = normalizeHex(readonlyInput);
+      }
+      // Try NIP-05
+      else if (isNip05(readonlyInput)) {
+        const resolved = await resolveNip05(readonlyInput);
+        if (!resolved) {
+          throw new Error(
+            `Failed to resolve NIP-05 identifier: ${readonlyInput}`,
+          );
+        }
+        pubkey = resolved;
+      } else {
+        throw new Error(
+          "Invalid format. Supported: npub1..., nprofile1..., hex pubkey, or user@domain.com",
+        );
+      }
+
+      const account = ReadonlyAccount.fromPubkey(pubkey);
+      handleSuccess(account);
+    } catch (err) {
+      console.error("Read-only login error:", err);
+      setError(err instanceof Error ? err.message : "Failed to create account");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Private key (nsec) login
+  async function loginWithNsec() {
+    if (!nsecInput.trim()) {
+      setError("Please enter a private key");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      let account: PrivateKeyAccount<unknown>;
+
+      // Try nsec decode
+      if (nsecInput.startsWith("nsec")) {
+        try {
+          account = PrivateKeyAccount.fromKey(nsecInput);
+        } catch (err) {
+          throw new Error(
+            `Invalid nsec: ${err instanceof Error ? err.message : "unknown error"}`,
+          );
+        }
+      }
+      // Try hex private key
+      else if (/^[0-9a-f]{64}$/i.test(nsecInput)) {
+        account = PrivateKeyAccount.fromKey(nsecInput);
+      } else {
+        throw new Error(
+          "Invalid format. Supported: nsec1... or 64-character hex private key",
+        );
+      }
+
+      handleSuccess(account);
+    } catch (err) {
+      console.error("Nsec login error:", err);
+      setError(err instanceof Error ? err.message : "Failed to create account");
+    } finally {
+      setLoading(false);
+    }
+  }
+
   // Bunker URL login
   async function loginWithBunkerUrl() {
     if (!bunkerUrl.trim()) {
@@ -267,14 +391,22 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
         </DialogHeader>
 
         <Tabs value={tab} onValueChange={(v) => setTab(v as LoginTab)}>
-          <TabsList className="grid w-full grid-cols-2">
+          <TabsList className="grid w-full grid-cols-4">
             <TabsTrigger value="extension" className="gap-2">
               <Puzzle className="size-4" />
-              Extension
+              <span className="hidden sm:inline">Extension</span>
+            </TabsTrigger>
+            <TabsTrigger value="readonly" className="gap-2">
+              <Eye className="size-4" />
+              <span className="hidden sm:inline">Read-Only</span>
+            </TabsTrigger>
+            <TabsTrigger value="nsec" className="gap-2">
+              <Key className="size-4" />
+              <span className="hidden sm:inline">Private Key</span>
             </TabsTrigger>
             <TabsTrigger value="nostr-connect" className="gap-2">
               <QrCode className="size-4" />
-              Nostr Connect
+              <span className="hidden sm:inline">Remote</span>
             </TabsTrigger>
           </TabsList>
 
@@ -317,6 +449,122 @@ export default function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
             </Button>
           </TabsContent>
 
+          <TabsContent value="readonly" className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Browse Nostr in read-only mode. You can view content but cannot
+              sign events or post.
+            </p>
+
+            {error && tab === "readonly" && (
+              <div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                <AlertCircle className="mt-0.5 size-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <label
+                htmlFor="readonly-input"
+                className="text-sm font-medium leading-none"
+              >
+                Public Key or Identifier
+              </label>
+              <Input
+                id="readonly-input"
+                placeholder="npub1..., nprofile1..., hex pubkey, or user@domain.com"
+                value={readonlyInput}
+                onChange={(e) => setReadonlyInput(e.target.value)}
+                disabled={loading}
+              />
+              <p className="text-xs text-muted-foreground">
+                Supports npub, nprofile, hex pubkey, or NIP-05 addresses
+              </p>
+            </div>
+
+            <Button
+              onClick={loginWithReadonly}
+              disabled={loading || !readonlyInput.trim()}
+              className="w-full"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Loading...
+                </>
+              ) : (
+                <>
+                  <Eye className="mr-2 size-4" />
+                  Continue in Read-Only Mode
+                </>
+              )}
+            </Button>
+          </TabsContent>
+
+          <TabsContent value="nsec" className="space-y-4">
+            <div className="flex items-start gap-2 rounded-md border border-red-500/50 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-400">
+              <ShieldAlert className="mt-0.5 size-4 shrink-0" />
+              <div className="space-y-1">
+                <p className="font-medium">Security Warning</p>
+                <p>
+                  Entering your private key is not recommended. Your key will be
+                  stored in browser localStorage and could be exposed. Consider
+                  using an extension or remote signer instead.
+                </p>
+              </div>
+            </div>
+
+            <p className="text-sm text-muted-foreground">
+              Log in by pasting your private key (nsec or hex format). Only use
+              this on trusted devices.
+            </p>
+
+            {error && tab === "nsec" && (
+              <div className="flex items-start gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                <AlertCircle className="mt-0.5 size-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <label
+                htmlFor="nsec-input"
+                className="text-sm font-medium leading-none"
+              >
+                Private Key
+              </label>
+              <Input
+                id="nsec-input"
+                type="password"
+                placeholder="nsec1... or hex private key"
+                value={nsecInput}
+                onChange={(e) => setNsecInput(e.target.value)}
+                disabled={loading}
+              />
+              <p className="text-xs text-muted-foreground">
+                Supports nsec or 64-character hex private key
+              </p>
+            </div>
+
+            <Button
+              onClick={loginWithNsec}
+              disabled={loading || !nsecInput.trim()}
+              className="w-full"
+              variant="destructive"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Loading...
+                </>
+              ) : (
+                <>
+                  <Key className="mr-2 size-4" />
+                  Log in with Private Key
+                </>
+              )}
+            </Button>
+          </TabsContent>
+
           <TabsContent value="nostr-connect" className="space-y-4">
             <p className="text-sm text-muted-foreground">
               Log in using NIP-46 remote signing. Scan the QR code with a signer
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index 111a2ea..4bb555e 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -157,38 +157,11 @@ export default function UserMenu() {
                 </>
               )}
 
-              <DropdownMenuSeparator />
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger className="cursor-crosshair">
-                  <Palette className="size-4 mr-2" />
-                  Theme
-                </DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  {availableThemes.map((theme) => (
-                    <DropdownMenuItem
-                      key={theme.id}
-                      className="cursor-crosshair"
-                      onClick={() => setTheme(theme.id)}
-                    >
-                      <span
-                        className={`size-2 rounded-full mr-2 ${
-                          themeId === theme.id
-                            ? "bg-primary"
-                            : "bg-muted-foreground/30"
-                        }`}
-                      />
-                      {theme.name}
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={logout} className="cursor-crosshair">
                 Log out
               </DropdownMenuItem>
-            </>
-          ) : (
-            <>
+              <DropdownMenuSeparator />
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger className="cursor-crosshair">
                   <Palette className="size-4 mr-2" />
@@ -213,10 +186,37 @@ export default function UserMenu() {
                   ))}
                 </DropdownMenuSubContent>
               </DropdownMenuSub>
-              <DropdownMenuSeparator />
+            </>
+          ) : (
+            <>
               <DropdownMenuItem onClick={() => setShowLogin(true)}>
                 Log in
               </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="cursor-crosshair">
+                  <Palette className="size-4 mr-2" />
+                  Theme
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  {availableThemes.map((theme) => (
+                    <DropdownMenuItem
+                      key={theme.id}
+                      className="cursor-crosshair"
+                      onClick={() => setTheme(theme.id)}
+                    >
+                      <span
+                        className={`size-2 rounded-full mr-2 ${
+                          themeId === theme.id
+                            ? "bg-primary"
+                            : "bg-muted-foreground/30"
+                        }`}
+                      />
+                      {theme.name}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
             </>
           )}
         </DropdownMenuContent>