From 3a0d63f2b1641b4f40e86cd74ce51183db6e5d92 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 4 Mar 2026 00:13:53 +0000
Subject: [PATCH] feat(nostr): encrypted DMs with inbox and thread view (M11.2)

NIP-04 encrypted DMs with IDB persistence. DM inbox tab in Nostr
section with contact list, message threads, and new conversation
initiation. Added decodeNpub utility. Sub-tab switcher (Feed/Messages).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/src/components/content/NostrDMs.vue   | 209 +++++++++++++++++
 .../app/src/components/content/NostrGrid.vue  |  28 +++
 packages/app/src/composables/useNostrDMs.ts   | 214 ++++++++++++++++++
 packages/app/src/utils/bech32.ts              |   9 +
 4 files changed, 460 insertions(+)
 create mode 100644 packages/app/src/components/content/NostrDMs.vue
 create mode 100644 packages/app/src/composables/useNostrDMs.ts

diff --git a/packages/app/src/components/content/NostrDMs.vue b/packages/app/src/components/content/NostrDMs.vue
new file mode 100644
index 00000000..eb9adb86
--- /dev/null
+++ b/packages/app/src/components/content/NostrDMs.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="h-full flex flex-col">
+    <!-- Thread view -->
+    <template v-if="activeThread">
+      <div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
+        <button
+          class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
+          @click="clearActiveContact"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <div class="flex-1 min-w-0">
+          <p class="text-xs font-semibold text-white/80 truncate">{{ activeThread.contactName }}</p>
+          <p class="text-[9px] text-white/30 font-mono truncate">{{ activeThread.contactPubkey }}</p>
+        </div>
+      </div>
+
+      <div ref="messagesRef" class="flex-1 overflow-y-auto custom-scrollbar px-4 py-3 space-y-2">
+        <div
+          v-for="msg in activeThread.messages"
+          :key="msg.id"
+          class="flex"
+          :class="msg.fromPubkey === pubkey ? 'justify-end' : 'justify-start'"
+        >
+          <div
+            class="max-w-[80%] rounded-xl px-3 py-2"
+            :class="msg.fromPubkey === pubkey
+              ? 'bg-accent/15 text-white/80'
+              : 'bg-white/5 text-white/70'"
+          >
+            <p class="text-xs leading-relaxed break-words">{{ msg.content }}</p>
+            <p class="text-[9px] mt-1 text-white/25 tabular-nums">{{ formatTime(msg.created_at) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Message input -->
+      <div class="px-4 py-3 border-t border-white/[0.08]">
+        <div class="flex gap-2">
+          <input
+            v-model="messageInput"
+            type="text"
+            placeholder="Type a message..."
+            class="flex-1 px-3 py-2 rounded-lg text-xs bg-white/5 text-white/80 placeholder:text-white/25 outline-none focus:bg-white/10 transition-colors"
+            @keydown.enter="sendMessage"
+          />
+          <button
+            class="px-3 py-2 rounded-lg text-xs bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors disabled:opacity-30"
+            :disabled="!messageInput.trim() || isSending"
+            @click="sendMessage"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <!-- Contact list / inbox -->
+    <template v-else>
+      <div class="p-4 border-b border-white/[0.08]">
+        <div class="flex items-center justify-between gap-2 mb-3">
+          <h3 class="text-sm font-bold text-white/90">Messages</h3>
+          <button
+            class="text-[10px] px-2.5 py-1 rounded bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
+            @click="showNewDM = !showNewDM"
+          >
+            {{ showNewDM ? 'Cancel' : 'New' }}
+          </button>
+        </div>
+
+        <!-- New DM input -->
+        <div v-if="showNewDM" class="space-y-2 mb-3">
+          <input
+            v-model="newContactPubkey"
+            type="text"
+            placeholder="Recipient hex pubkey or npub..."
+            class="w-full px-3 py-2 rounded-lg text-xs bg-white/5 text-white/80 placeholder:text-white/25 outline-none focus:bg-white/10 transition-colors font-mono"
+          />
+          <button
+            class="text-[10px] px-2.5 py-1 rounded bg-white/5 text-white/60 hover:bg-white/10 transition-colors disabled:opacity-30"
+            :disabled="!newContactPubkey.trim()"
+            @click="startNewDM"
+          >
+            Start conversation
+          </button>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto custom-scrollbar px-4 pt-3 pb-16 space-y-1">
+        <div
+          v-if="!isLoggedIn"
+          class="flex items-center justify-center py-12"
+        >
+          <p class="text-xs text-white/30">Sign in with Nostr to use DMs</p>
+        </div>
+
+        <div
+          v-else-if="isLoading"
+          class="flex items-center justify-center py-12"
+        >
+          <p class="text-xs text-white/30">Loading messages...</p>
+        </div>
+
+        <div
+          v-else-if="threads.length === 0"
+          class="flex items-center justify-center py-12"
+        >
+          <p class="text-xs text-white/30">No messages yet</p>
+        </div>
+
+        <button
+          v-for="thread in threads"
+          :key="thread.contactPubkey"
+          class="w-full text-left p-3 rounded-xl transition-all duration-150 bg-white/[0.03] hover:bg-white/[0.07] border border-white/5"
+          @click="selectContact(thread.contactPubkey)"
+        >
+          <div class="flex items-start gap-2.5">
+            <div class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-[10px] font-bold bg-accent/20 text-accent">
+              {{ thread.contactName.charAt(0).toUpperCase() }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-1.5">
+                <span class="text-xs font-semibold truncate text-white/80">
+                  {{ thread.contactName }}
+                </span>
+                <span v-if="thread.lastMessage" class="text-[9px] ml-auto shrink-0 text-white/20">
+                  {{ formatTime(thread.lastMessage.created_at) }}
+                </span>
+              </div>
+              <p v-if="thread.lastMessage" class="text-[11px] mt-1 text-white/40 truncate">
+                {{ thread.lastMessage.content }}
+              </p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, watch } from 'vue'
+import { useNostrDMs } from '@/composables/useNostrDMs'
+import { useNostrIdentity } from '@/composables/useNostrIdentity'
+import { decodeNpub } from '@/utils/bech32'
+
+const { threads, activeThread, activeContact, isLoading, loadDMs, sendDM, selectContact, clearActiveContact } = useNostrDMs()
+const { pubkey, isLoggedIn } = useNostrIdentity()
+
+const messageInput = ref('')
+const isSending = ref(false)
+const messagesRef = ref<HTMLElement | null>(null)
+const showNewDM = ref(false)
+const newContactPubkey = ref('')
+
+function formatTime(ts: number): string {
+  const d = new Date(ts * 1000)
+  const now = new Date()
+  const diffDays = Math.floor((now.getTime() - d.getTime()) / 86400000)
+  if (diffDays === 0) return d.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' })
+  if (diffDays < 7) return d.toLocaleDateString('en', { weekday: 'short' })
+  return d.toLocaleDateString('en', { month: 'short', day: 'numeric' })
+}
+
+async function sendMessage() {
+  if (!messageInput.value.trim() || isSending.value || !activeContact.value) return
+  isSending.value = true
+  const success = await sendDM(activeContact.value, messageInput.value.trim())
+  if (success) {
+    messageInput.value = ''
+    await nextTick()
+    scrollToBottom()
+  }
+  isSending.value = false
+}
+
+function scrollToBottom() {
+  if (messagesRef.value) {
+    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+  }
+}
+
+function startNewDM() {
+  let hex = newContactPubkey.value.trim()
+  if (hex.startsWith('npub')) {
+    try {
+      hex = decodeNpub(hex)
+    } catch {
+      return
+    }
+  }
+  if (hex.length === 64) {
+    selectContact(hex)
+    showNewDM.value = false
+    newContactPubkey.value = ''
+  }
+}
+
+watch(activeContact, async () => {
+  await nextTick()
+  scrollToBottom()
+})
+
+onMounted(() => {
+  loadDMs()
+})
+</script>
diff --git a/packages/app/src/components/content/NostrGrid.vue b/packages/app/src/components/content/NostrGrid.vue
index f3ceaabd..08847073 100644
--- a/packages/app/src/components/content/NostrGrid.vue
+++ b/packages/app/src/components/content/NostrGrid.vue
@@ -1,5 +1,25 @@
 <template>
   <div class="h-full flex flex-col">
+    <!-- Sub-tab switcher -->
+    <div class="flex gap-1 px-4 pt-3 pb-1">
+      <button
+        v-for="tab in subTabs"
+        :key="tab.id"
+        class="text-[10px] px-2.5 py-1 rounded-md transition-all duration-150"
+        :class="activeSubTab === tab.id
+          ? 'nav-tab-active'
+          : 'text-white/40 hover:text-white/70 hover:bg-white/5'"
+        @click="activeSubTab = tab.id"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <!-- DMs sub-tab -->
+    <NostrDMs v-if="activeSubTab === 'dms'" />
+
+    <!-- Feed sub-tab -->
+    <template v-else>
     <div class="p-4 space-y-3 border-b border-white/[0.08]">
       <div class="flex items-center justify-between gap-2">
         <h3 class="text-sm font-bold text-white/90">
@@ -164,11 +184,13 @@
         <p class="text-sm text-white/30">No notes match your search</p>
       </div>
     </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick } from 'vue'
+import NostrDMs from './NostrDMs.vue'
 import { useNostr, type NostrNote, type PublishResult } from '@/composables/useNostr'
 import { useNostrIdentity } from '@/composables/useNostrIdentity'
 
@@ -177,6 +199,12 @@ defineEmits<{ selectNote: [note: NostrNote] }>()
 const { events: notes, isConnected, relayStates, connect, publishEvent } = useNostr()
 const { isLoggedIn, signEvent } = useNostrIdentity()
 
+const activeSubTab = ref<'feed' | 'dms'>('feed')
+const subTabs = [
+  { id: 'feed' as const, label: 'Feed' },
+  { id: 'dms' as const, label: 'Messages' },
+]
+
 const search = ref('')
 const activeKind = ref<number | null>(null)
 const showCompose = ref(false)
diff --git a/packages/app/src/composables/useNostrDMs.ts b/packages/app/src/composables/useNostrDMs.ts
new file mode 100644
index 00000000..bb8fc6d0
--- /dev/null
+++ b/packages/app/src/composables/useNostrDMs.ts
@@ -0,0 +1,214 @@
+import { ref, computed } from 'vue'
+import { useNostrIdentity } from './useNostrIdentity'
+
+export interface DirectMessage {
+  id: string
+  fromPubkey: string
+  toPubkey: string
+  content: string
+  created_at: number
+  decrypted: boolean
+}
+
+export interface DMThread {
+  contactPubkey: string
+  contactName: string
+  messages: DirectMessage[]
+  lastMessage: DirectMessage | null
+  unread: number
+}
+
+const DB_NAME = 'aiui-nostr-dms'
+const DB_VERSION = 1
+const STORE_NAME = 'messages'
+
+const threads = ref<DMThread[]>([])
+const activeContact = ref<string | null>(null)
+const isLoading = ref(false)
+
+let dbPromise: Promise<IDBDatabase> | null = null
+
+function openDMDB(): Promise<IDBDatabase> {
+  if (dbPromise) return dbPromise
+  dbPromise = new Promise<IDBDatabase>((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION)
+    req.onupgradeneeded = () => {
+      const db = req.result
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: 'id' })
+        store.createIndex('contact', 'contactPubkey', { unique: false })
+        store.createIndex('created_at', 'created_at', { unique: false })
+      }
+    }
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => {
+      dbPromise = null
+      reject(req.error)
+    }
+  })
+  return dbPromise
+}
+
+interface StoredDM extends DirectMessage {
+  contactPubkey: string
+}
+
+function truncatePubkey(pk: string): string {
+  if (pk.length <= 12) return pk
+  return pk.slice(0, 8) + '...' + pk.slice(-4)
+}
+
+async function saveDM(msg: DirectMessage, myPubkey: string): Promise<void> {
+  const db = await openDMDB()
+  const contactPubkey = msg.fromPubkey === myPubkey ? msg.toPubkey : msg.fromPubkey
+  const record: StoredDM = { ...msg, contactPubkey }
+
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readwrite')
+    tx.objectStore(STORE_NAME).put(record)
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error)
+  })
+}
+
+async function loadAllDMs(): Promise<StoredDM[]> {
+  const db = await openDMDB()
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly')
+    const req = tx.objectStore(STORE_NAME).getAll()
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+
+function buildThreads(messages: StoredDM[]): DMThread[] {
+  const threadMap = new Map<string, DirectMessage[]>()
+
+  for (const msg of messages) {
+    const existing = threadMap.get(msg.contactPubkey) ?? []
+    existing.push(msg)
+    threadMap.set(msg.contactPubkey, existing)
+  }
+
+  const result: DMThread[] = []
+  for (const [contactPubkey, msgs] of threadMap) {
+    msgs.sort((a, b) => a.created_at - b.created_at)
+    result.push({
+      contactPubkey,
+      contactName: truncatePubkey(contactPubkey),
+      messages: msgs,
+      lastMessage: msgs[msgs.length - 1] ?? null,
+      unread: 0,
+    })
+  }
+
+  // Sort by latest message
+  result.sort((a, b) => (b.lastMessage?.created_at ?? 0) - (a.lastMessage?.created_at ?? 0))
+  return result
+}
+
+export function useNostrDMs() {
+  const { pubkey, isLoggedIn } = useNostrIdentity()
+
+  const activeThread = computed(() => {
+    if (!activeContact.value) return null
+    return threads.value.find(t => t.contactPubkey === activeContact.value) ?? null
+  })
+
+  async function loadDMs() {
+    if (!isLoggedIn.value) return
+    isLoading.value = true
+    try {
+      const all = await loadAllDMs()
+      threads.value = buildThreads(all)
+    } catch {
+      // IDB error
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function sendDM(toPubkey: string, plaintext: string): Promise<boolean> {
+    if (!window.nostr?.nip04 || !pubkey.value) return false
+
+    try {
+      const encrypted = await window.nostr.nip04.encrypt(toPubkey, plaintext)
+
+      const unsigned = {
+        kind: 4,
+        created_at: Math.floor(Date.now() / 1000),
+        tags: [['p', toPubkey]],
+        content: encrypted,
+      }
+
+      const signed = await window.nostr.signEvent(unsigned)
+      if (!signed) return false
+
+      // Store locally
+      const dm: DirectMessage = {
+        id: signed.id,
+        fromPubkey: pubkey.value,
+        toPubkey,
+        content: plaintext,
+        created_at: signed.created_at,
+        decrypted: true,
+      }
+      await saveDM(dm, pubkey.value)
+
+      // Broadcast to relays (reuse useNostr relay infra)
+      const { publishEvent } = await import('./useNostr').then(m => m.useNostr())
+      await publishEvent(signed)
+
+      // Refresh threads
+      const all = await loadAllDMs()
+      threads.value = buildThreads(all)
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  async function receiveDM(eventId: string, fromPubkey: string, encryptedContent: string, createdAt: number): Promise<void> {
+    if (!window.nostr?.nip04 || !pubkey.value) return
+
+    try {
+      const plaintext = await window.nostr.nip04.decrypt(fromPubkey, encryptedContent)
+
+      const dm: DirectMessage = {
+        id: eventId,
+        fromPubkey,
+        toPubkey: pubkey.value,
+        content: plaintext,
+        created_at: createdAt,
+        decrypted: true,
+      }
+      await saveDM(dm, pubkey.value)
+
+      const all = await loadAllDMs()
+      threads.value = buildThreads(all)
+    } catch {
+      // Decryption failed
+    }
+  }
+
+  function selectContact(contactPubkey: string) {
+    activeContact.value = contactPubkey
+  }
+
+  function clearActiveContact() {
+    activeContact.value = null
+  }
+
+  return {
+    threads,
+    activeThread,
+    activeContact,
+    isLoading,
+    loadDMs,
+    sendDM,
+    receiveDM,
+    selectContact,
+    clearActiveContact,
+  }
+}
diff --git a/packages/app/src/utils/bech32.ts b/packages/app/src/utils/bech32.ts
index 40965549..0baf6eb6 100644
--- a/packages/app/src/utils/bech32.ts
+++ b/packages/app/src/utils/bech32.ts
@@ -109,6 +109,15 @@ export function encodeNpub(hexPubkey: string): string {
   return bech32Encode('npub', hexToBytes(hexPubkey))
 }
 
+/** Decode an npub1... string to a hex public key */
+export function decodeNpub(npubStr: string): string {
+  const decoded = bech32Decode(npubStr)
+  if (!decoded || decoded.hrp !== 'npub' || decoded.data.length !== 32) {
+    throw new Error('Invalid npub')
+  }
+  return bytesToHex(decoded.data)
+}
+
 export interface NIP19Decoded {
   type: 'npub' | 'note' | 'nevent' | 'nprofile' | 'unknown'
   hex: string