chore: bump version to 0.11.0

fix: gate /a/:naddr rewrite to crawlers to prevent refresh redirect

.cursor/rules/210.mdc

@@ -2,4 +2,4 @@
 alwaysApply: true
 ---
 
-Keep files below 210 lines.
+Keep files below 420 lines.

.cursor/rules/fetching-data-with-controllers.mdc

@@ -0,0 +1,21 @@
+---
+description: fetching data from relays
+alwaysApply: false
+---
+
+# Fetching Data with Controllers
+
+We fetch data from relays using controllers:
+
+- Start controllers immediatly; don't await.
+- Stream via onEvent; dedupe replaceables; emit immediately.
+- Parallel local/remote queries; complete on EOSE.
+- Finalize and persist since after completion.
+- Guard with generations to cancel stale runs.
+- UI flips off loading on first streamed result.
+
+We always include and prefer local relays for reads; optionally rebroadcast fetched content to local relays (depending on setting); and tolerate local‑only mode for writes (queueing for later).
+
+Since we are streaming results, we should NEVER use timeouts for fetching data. We should always rely on EOSE.
+
+In short: Local-first hydration, background network fetch, reactive updates, and replaceable lookups provide instant UI with eventual consistency. Use local relays as local data store for everything we fetch from remote relays.

.cursor/rules/mobile-first-ui-ux.mdc

@@ -3,6 +3,8 @@ description: anything related to UI/UX
 alwaysApply: false
 ---
 
+# Mobile-First UI/UX
+
 This is a mobile-first application. All UI elements should be designed with that in mind. The application should work well on small screens, including older smartphones. The UX should be immaculate on mobile, even when in flight mode. (We use local caches and local relays, so that app works offline too.)
 
 Let's not show too many error messages, and more importantly: let's not make them red. Nothing is ever this tragic.

.env

@@ -1,2 +0,0 @@
-# Default article to display on app load
-VITE_DEFAULT_ARTICLE_NADDR=naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew

.env.example

@@ -1,3 +1,14 @@
-# Default article to display on app load
-# This should be a valid naddr1... string (NIP-19 encoded address pointer to a kind:30023 long-form article)
-VITE_DEFAULT_ARTICLE_NADDR=naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew
+# Nostr configuration for publish-markdown.sh script
+# Copy this file to .env and fill in your values
+
+# Your Nostr secret key (nsec, ncryptsec, or hex format)
+# You can also set this via environment variable: export NOSTR_SECRET_KEY=your_key
+NOSTR_SECRET_KEY=
+
+# Space-separated list of relay URLs to publish to
+# If not provided, events will be created but not published
+RELAYS="ws://localhost:10547 ws://localhost:4869 wss://relay.primal.net wss://wot.dergigi.com wss://relay.dergigi.com wss://nostr.einundzwanzig.space wss://relay.damus.io wss://relay.nostr.bg wss://nos.lol wss://eden.nostr.land"
+
+# Test account used for publishing markdown test documents:
+# npub: npub1marky39a9qmadyuux9lr49pdhy3ddxrdwtmd9y957kye66qyu3vq7spdm2
+# Profile: https://read.withboris.com/p/npub1marky39a9qmadyuux9lr49pdhy3ddxrdwtmd9y957kye66qyu3vq7spdm2/writings

.gitignore

@@ -13,3 +13,6 @@ applesauce
 primal-web-app
 Amber
 
+.env
+scripts/.env
+.vercel

FEATURES.md

@@ -11,6 +11,7 @@
 - **Distraction‑free view**: Clean typography, optional hero image, summary, and published date.
 - **Reading time**: Displays estimated reading time for text or duration for supported videos.
 - **Progress**: Reading progress indicator with completion state.
+- **Text‑to‑Speech**: Listen to articles with browser‑native TTS; play/pause/stop controls with adjustable speed (0.8–1.6x).
 - **Menus**: Quick actions to open, share, or copy links (for both Nostr and web content).
 - **Performance**: Lightweight fetching and caching for speed; skeleton loaders to avoid empty flashes.
 
@@ -39,7 +40,7 @@
 
 - **Explore**: Discover friends' highlights and writings, plus a "nostrverse" feed.
 - **Filters**: Visibility toggles (mine, friends, nostrverse) apply to Explore highlights.
-- **Profiles**: View your own (`/me`) or other users (`/p/:npub`) with tabs for Highlights, Bookmarks, Archive, and Writings.
+- **Profiles**: View your own (`/my`) or other users (`/p/:npub`) with tabs for Highlights, Bookmarks, Archive, and Writings.
 
 ## Support
 

TAILWIND_MIGRATION.md

@@ -1,188 +0,0 @@
-# Tailwind CSS Migration Status
-
-## ✅ Completed (Core Infrastructure)
-
-### Phase 1: Setup & Foundation
-- [x] Install Tailwind CSS with PostCSS and Autoprefixer
-- [x] Configure `tailwind.config.js` with content globs and custom keyframes
-- [x] Create `src/styles/tailwind.css` with base/components/utilities
-- [x] Import Tailwind before existing CSS in `main.tsx`
-- [x] Enable Tailwind preflight (CSS reset)
-
-### Phase 2: Base Styles Reconciliation
-- [x] Add CSS variables for user-settable theme colors
-  - `--highlight-color-mine`, `--highlight-color-friends`, `--highlight-color-nostrverse`
-  - `--reading-font`, `--reading-font-size`
-- [x] Simplify `global.css` to work with Tailwind preflight
-- [x] Remove redundant base styles handled by Tailwind
-- [x] Keep app-specific overrides (mobile sidebar lock, loading states)
-
-### Phase 3: Layout System Refactor ⭐ **CRITICAL FIX**
-- [x] Switch from pane-scrolling to document-scrolling
-- [x] Make sidebars sticky on desktop (`position: sticky`)
-- [x] Update `app.css` to remove fixed container heights
-- [x] Update `ThreePaneLayout.tsx` to use window scroll
-- [x] Fix reading position tracking to work with document scroll
-- [x] Maintain mobile overlay behavior
-
-### Phase 4: Component Migrations
-- [x] **ReadingProgressIndicator**: Full Tailwind conversion
-  - Removed 80+ lines of CSS
-  - Added shimmer animation to Tailwind config
-  - Z-index layering maintained (1102)
-  
-- [x] **Mobile UI Elements**: Tailwind utilities
-  - Mobile hamburger button
-  - Mobile highlights button  
-  - Mobile backdrop
-  - Removed 60+ lines of CSS
-
-- [x] **App Container**: Tailwind utilities
-  - Responsive padding (p-0 md:p-4)
-  - Min-height viewport support
-
-## 📊 Impact & Metrics
-
-### Lines of CSS Removed
-- `global.css`: ~50 lines removed
-- `reader.css`: ~80 lines removed (progress indicator)
-- `app.css`: ~30 lines removed (mobile buttons/backdrop)
-- `sidebar.css`: ~30 lines removed (mobile hamburger)
-- **Total**: ~190 lines removed
-
-### Key Achievements
-1. **Fixed Core Issue**: Reading position tracking now works correctly with document scroll
-2. **Tailwind Integration**: Fully functional with preflight enabled
-3. **No Breaking Changes**: All existing functionality preserved
-4. **Type Safety**: TypeScript checks passing
-5. **Lint Clean**: ESLint checks passing
-6. **Responsive**: Mobile/tablet/desktop layouts working
-
-## 🔄 Remaining Work (Incremental)
-
-The following migrations are **optional enhancements** that can be done as components are touched:
-
-### High-Value Components
-- [ ] **ContentPanel** - Large component, high impact
-  - Reader header, meta info, loading states
-  - Mark as read button
-  - Article/video menus
-  
-- [ ] **BookmarkList & BookmarkItem** - Core UI
-  - Card layouts (compact/cards/large views)
-  - Bookmark metadata display
-  - Interactive states
-
-- [ ] **HighlightsPanel** - Feature-rich
-  - Header with toggles
-  - Highlight items
-  - Level-based styling
-
-- [ ] **Settings Components** - Forms & controls
-  - Color pickers
-  - Font selectors
-  - Toggle switches
-  - Sliders
-
-### CSS Files to Prune
-- `src/index.css` - Contains many inline bookmark/highlight styles (~3000+ lines)
-- `src/styles/components/cards.css` - Bookmark card styles
-- `src/styles/components/modals.css` - Modal dialogs
-- `src/styles/layout/highlights.css` - Highlight panel layout
-
-## 🎯 Migration Strategy
-
-### For New Components
-Use Tailwind utilities from the start. Reference:
-```tsx
-// Good: Tailwind utilities
-<div className="flex items-center gap-2 p-4 bg-gray-800 rounded-lg">
-  
-// Avoid: New CSS classes
-<div className="custom-component">
-```
-
-### For Existing Components
-Migrate incrementally when touching files:
-1. Replace layout utilities (flex, grid, spacing, sizing)
-2. Replace color/background utilities
-3. Replace typography utilities
-4. Replace responsive variants
-5. Remove old CSS rules
-6. Keep file under 210 lines
-
-### CSS Variable Usage
-Dynamic values should still use CSS variables or inline styles:
-```tsx
-// User-settable colors
-style={{ backgroundColor: settings.highlightColorMine }}
-
-// Or reference CSS variable
-className="bg-[var(--highlight-color-mine)]"
-```
-
-## 📝 Technical Notes
-
-### Z-Index Layering
-- Mobile sidepanes: `z-[1001]`
-- Mobile backdrop: `z-[999]`
-- Progress indicator: `z-[1102]`
-- Mobile buttons: `z-[900]`
-- Relay status: `z-[999]`
-- Modals: `z-[10000]`
-
-### Responsive Breakpoints
-- Mobile: `< 768px`
-- Tablet: `768px - 1024px`
-- Desktop: `> 1024px`
-
-Use Tailwind: `md:` (768px), `lg:` (1024px)
-
-### Safe Area Insets
-Mobile notch support:
-```tsx
-style={{ 
-  top: 'calc(1rem + env(safe-area-inset-top))',
-  left: 'calc(1rem + env(safe-area-inset-left))'
-}}
-```
-
-### Custom Animations
-Add to `tailwind.config.js`:
-```js
-keyframes: {
-  shimmer: {
-    '0%': { transform: 'translateX(-100%)' },
-    '100%': { transform: 'translateX(100%)' },
-  },
-}
-```
-
-## ✅ Success Criteria Met
-
-- [x] Tailwind CSS fully integrated and functional
-- [x] Document scrolling working correctly
-- [x] Reading position tracking accurate
-- [x] Progress indicator always visible
-- [x] No TypeScript errors
-- [x] No linting errors
-- [x] Mobile responsiveness maintained
-- [x] Theme colors (user settings) working
-- [x] All existing features functional
-
-## 🚀 Next Steps
-
-1. **Ship It**: Current state is production-ready
-2. **Incremental Migration**: Convert components as you touch them
-3. **Monitor**: Watch for any CSS conflicts
-4. **Cleanup**: Eventually remove unused CSS files
-5. **Document**: Update component docs with Tailwind patterns
-
----
-
-**Status**: ✅ **CORE MIGRATION COMPLETE**  
-**Date**: 2025-01-14  
-**Commits**: 8 conventional commits  
-**Lines Removed**: ~190 lines of CSS  
-**Breaking Changes**: None
-

api/article-og-refresh.ts

@@ -0,0 +1,41 @@
+import type { VercelRequest, VercelResponse } from '@vercel/node'
+import { setArticleMeta } from './services/ogStore.js'
+import { fetchArticleMetadataViaRelays } from './services/articleMeta.js'
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+  // Validate refresh secret
+  const providedSecret = req.headers['x-refresh-key']
+  const expectedSecret = process.env.OG_REFRESH_SECRET || ''
+  
+  if (providedSecret !== expectedSecret) {
+    console.error('Background refresh unauthorized: secret mismatch')
+    return res.status(401).json({ error: 'Unauthorized' })
+  }
+
+  const naddr = (req.query.naddr as string | undefined)?.trim()
+  if (!naddr) {
+    return res.status(400).json({ error: 'Missing naddr parameter' })
+  }
+
+  console.log(`Background refresh started for ${naddr}`)
+
+  try {
+    // Fetch metadata via relays (WebSockets) - no timeout, let it take as long as needed
+    const meta = await fetchArticleMetadataViaRelays(naddr)
+    
+    if (meta) {
+      console.log(`Background refresh found metadata for ${naddr}:`, { title: meta.title, summary: meta.summary?.substring(0, 50) })
+      // Store in Redis
+      await setArticleMeta(naddr, meta)
+      console.log(`Background refresh cached metadata for ${naddr}`)
+      return res.status(200).json({ ok: true, cached: true })
+    } else {
+      console.log(`Background refresh found no metadata for ${naddr}`)
+      return res.status(200).json({ ok: true, cached: false })
+    }
+  } catch (err) {
+    console.error(`Error refreshing article metadata for ${naddr}:`, err)
+    return res.status(500).json({ error: 'Internal server error' })
+  }
+}
+

api/article-og.ts

@@ -1,208 +1,13 @@
 import type { VercelRequest, VercelResponse } from '@vercel/node'
-import { RelayPool } from 'applesauce-relay'
-import { nip19 } from 'nostr-tools'
-import { AddressPointer } from 'nostr-tools/nip19'
-import { NostrEvent, Filter } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
-
-const { getArticleTitle, getArticleImage, getArticleSummary } = Helpers
-
-// Relay configuration (from src/config/relays.ts)
-const RELAYS = [
-  'wss://relay.damus.io',
-  'wss://nos.lol',
-  'wss://relay.nostr.band',
-  'wss://relay.dergigi.com',
-  'wss://wot.dergigi.com',
-  'wss://relay.snort.social',
-  'wss://relay.current.fyi',
-  'wss://nostr-pub.wellorder.net',
-  'wss://purplepag.es',
-  'wss://relay.primal.net'
-]
-
-type CacheEntry = {
-  html: string
-  expires: number
-}
-
-const WEEK_MS = 7 * 24 * 60 * 60 * 1000
-const memoryCache = new Map<string, CacheEntry>()
-
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
+import { getArticleMeta, setArticleMeta } from './services/ogStore.js'
+import { fetchArticleMetadataViaRelays } from './services/articleMeta.js'
+import { generateHtml } from './services/ogHtml.js'
 
 function setCacheHeaders(res: VercelResponse, maxAge: number = 86400): void {
   res.setHeader('Cache-Control', `public, max-age=${maxAge}, s-maxage=604800`)
   res.setHeader('Content-Type', 'text/html; charset=utf-8')
 }
 
-interface ArticleMetadata {
-  title: string
-  summary: string
-  image: string
-  author: string
-  published?: number
-}
-
-async function fetchEventsFromRelays(
-  relayPool: RelayPool,
-  relayUrls: string[],
-  filter: Filter,
-  timeoutMs: number
-): Promise<NostrEvent[]> {
-  const events: NostrEvent[] = []
-
-  await new Promise<void>((resolve) => {
-    const timeout = setTimeout(() => resolve(), timeoutMs)
-
-    // `request` emits NostrEvent objects directly
-    relayPool.request(relayUrls, filter).subscribe({
-      next: (event) => {
-        events.push(event)
-      },
-      error: () => resolve(),
-      complete: () => {
-        clearTimeout(timeout)
-        resolve()
-      }
-    })
-  })
-
-  // Sort by created_at and return most recent first
-  return events.sort((a, b) => b.created_at - a.created_at)
-}
-
-async function fetchArticleMetadata(naddr: string): Promise<ArticleMetadata | null> {
-  const relayPool = new RelayPool()
-  
-  try {
-    // Decode naddr
-    const decoded = nip19.decode(naddr)
-    if (decoded.type !== 'naddr') {
-      return null
-    }
-
-    const pointer = decoded.data as AddressPointer
-
-    // Determine relay URLs
-    const relayUrls = pointer.relays && pointer.relays.length > 0 ? pointer.relays : RELAYS
-
-    // Fetch article and profile in parallel
-    const [articleEvents, profileEvents] = await Promise.all([
-      fetchEventsFromRelays(relayPool, relayUrls, {
-        kinds: [pointer.kind],
-        authors: [pointer.pubkey],
-        '#d': [pointer.identifier || '']
-      }, 5000),
-      fetchEventsFromRelays(relayPool, relayUrls, {
-        kinds: [0],
-        authors: [pointer.pubkey]
-      }, 3000)
-    ])
-
-    if (articleEvents.length === 0) {
-      return null
-    }
-
-    const article = articleEvents[0]
-
-    // Extract article metadata
-    const title = getArticleTitle(article) || 'Untitled Article'
-    const summary = getArticleSummary(article) || 'Read this article on Boris'
-    const image = getArticleImage(article) || '/boris-social-1200.png'
-
-    // Extract author name from profile
-    let authorName = pointer.pubkey.slice(0, 8) + '...'
-    if (profileEvents.length > 0) {
-      try {
-        const profileData = JSON.parse(profileEvents[0].content)
-        authorName = profileData.display_name || profileData.name || authorName
-      } catch {
-        // Use fallback
-      }
-    }
-
-    return {
-      title,
-      summary,
-      image,
-      author: authorName,
-      published: article.created_at
-    }
-  } catch (err) {
-    console.error('Failed to fetch article metadata:', err)
-    return null
-  } finally {
-    // No explicit close needed; pool manages connections internally
-  }
-}
-
-function generateHtml(naddr: string, meta: ArticleMetadata | null): string {
-  const baseUrl = 'https://read.withboris.com'
-  const articleUrl = `${baseUrl}/a/${naddr}`
-  
-  const title = meta?.title || 'Boris – Nostr Bookmarks'
-  const description = meta?.summary || 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.'
-  const image = meta?.image?.startsWith('http') ? meta.image : `${baseUrl}${meta?.image || '/boris-social-1200.png'}`
-  const author = meta?.author || 'Boris'
-
-  return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <meta name="theme-color" content="#0f172a" />
-    <link rel="manifest" href="/manifest.webmanifest" />
-    <title>${escapeHtml(title)}</title>
-    <meta name="description" content="${escapeHtml(description)}" />
-    <link rel="canonical" href="${articleUrl}" />
-    
-    <!-- Open Graph / Social Media -->
-    <meta property="og:type" content="article" />
-    <meta property="og:url" content="${articleUrl}" />
-    <meta property="og:title" content="${escapeHtml(title)}" />
-    <meta property="og:description" content="${escapeHtml(description)}" />
-    <meta property="og:image" content="${escapeHtml(image)}" />
-    <meta property="og:site_name" content="Boris" />
-    ${meta?.published ? `<meta property="article:published_time" content="${new Date(meta.published * 1000).toISOString()}" />` : ''}
-    <meta property="article:author" content="${escapeHtml(author)}" />
-    
-    <!-- Twitter Card -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:url" content="${articleUrl}" />
-    <meta name="twitter:title" content="${escapeHtml(title)}" />
-    <meta name="twitter:description" content="${escapeHtml(description)}" />
-    <meta name="twitter:image" content="${escapeHtml(image)}" />
-  </head>
-  <body>
-    <noscript>
-      <p>Redirecting to <a href="/">Boris</a>...</p>
-    </noscript>
-  </body>
-</html>`
-}
-
-function isCrawler(userAgent: string | undefined): boolean {
-  if (!userAgent) return false
-  const crawlers = [
-    'bot', 'crawl', 'spider', 'slurp', 'facebook', 'twitter', 'linkedin',
-    'whatsapp', 'telegram', 'slack', 'discord', 'preview'
-  ]
-  const ua = userAgent.toLowerCase()
-  return crawlers.some(crawler => ua.includes(crawler))
-}
-
 export default async function handler(req: VercelRequest, res: VercelResponse) {
   const naddr = (req.query.naddr as string | undefined)?.trim()
   
@@ -210,95 +15,46 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     return res.status(400).json({ error: 'Missing naddr parameter' })
   }
 
-  const userAgent = req.headers['user-agent'] as string | undefined
-  const isCrawlerRequest = isCrawler(userAgent)
-
   const debugEnabled = req.query.debug === '1' || req.headers['x-boris-debug'] === '1'
   if (debugEnabled) {
-    console.log('[article-og] request', JSON.stringify({
-      naddr,
-      ua: userAgent || null,
-      isCrawlerRequest,
-      path: req.url || null
-    }))
     res.setHeader('X-Boris-Debug', '1')
   }
 
-  // If it's a regular browser (not a bot), serve HTML that loads SPA
-  // Use history.replaceState to set the URL before the SPA boots
-  if (!isCrawlerRequest) {
-    const articlePath = `/a/${naddr}`
-    // Serve a minimal HTML that sets up the URL and loads the SPA
-    const html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Boris - Loading Article...</title>
-  <script>
-    // Set the URL to the article path before SPA loads
-    if (window.location.pathname !== '${articlePath}') {
-      history.replaceState(null, '', '${articlePath}');
+  // Try Redis cache first
+  let meta = await getArticleMeta(naddr).catch((err) => {
+    console.error('Failed to get article meta from Redis:', err)
+    return null
+  })
+  let cacheMaxAge = 86400
+
+  if (!meta) {
+    // Cache miss: fetch from relays (let it use its natural timeouts)
+    try {
+      meta = await fetchArticleMetadataViaRelays(naddr)
+      
+      if (meta) {
+        // Store in Redis and use it
+        await setArticleMeta(naddr, meta).catch((err) => {
+          console.error('Failed to cache relay metadata:', err)
+        })
+        cacheMaxAge = 86400
+      } else {
+        // Relay fetch failed: use default fallback
+        cacheMaxAge = 300
+      }
+    } catch (err) {
+      console.error(`Error fetching from relays for ${naddr}:`, err)
+      cacheMaxAge = 300
     }
-  </script>
-  ${debugEnabled ? `<script>console.debug('article-og', { mode: 'browser', naddr: '${naddr}', path: location.pathname, referrer: document.referrer });</script>` : ''}
-  <script>
-    // Redirect to index.html which will load the SPA
-    // The history state is already set, so SPA will see the correct URL
-    window.location.replace('/');
-  </script>
-</head>
-<body>
-  <div id="root"></div>
-</body>
-</html>`
-    
-    res.setHeader('Content-Type', 'text/html; charset=utf-8')
-    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
-    if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'browser', naddr }))
-    }
-    return res.status(200).send(html)
   }
 
-  // Check cache for bots/crawlers
-  const now = Date.now()
-  const cached = memoryCache.get(naddr)
-  if (cached && cached.expires > now) {
-    setCacheHeaders(res)
-    if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot', naddr, cache: true }))
-    }
-    return res.status(200).send(cached.html)
-  }
-
-  try {
-    // Fetch metadata
-    const meta = await fetchArticleMetadata(naddr)
-    
-    // Generate HTML
-    const html = generateHtml(naddr, meta)
-    
-    // Cache the result
-    memoryCache.set(naddr, { html, expires: now + WEEK_MS })
-    
-    // Send response
-    setCacheHeaders(res)
-    if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot', naddr, cache: false }))
-    }
-    return res.status(200).send(html)
-  } catch (err) {
-    console.error('Error generating article OG HTML:', err)
-    
-    // Fallback to basic HTML with SPA boot
-    const html = generateHtml(naddr, null)
-    setCacheHeaders(res, 3600)
-    if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot-fallback', naddr }))
-    }
-    return res.status(200).send(html)
+  // Generate and send HTML
+  const html = generateHtml(naddr, meta)
+  setCacheHeaders(res, cacheMaxAge)
+  
+  if (debugEnabled) {
+    // Debug mode enabled
   }
+  
+  return res.status(200).send(html)
 }
-

api/services/articleMeta.ts

@@ -0,0 +1,224 @@
+import WebSocket from 'ws'
+;(globalThis as unknown as { WebSocket?: typeof WebSocket }).WebSocket ??= WebSocket
+import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { NostrEvent, Filter } from 'nostr-tools'
+import { Helpers } from 'applesauce-core'
+import { extractProfileDisplayName } from '../../lib/profile.js'
+import { RELAYS } from '../../src/config/relays.js'
+import type { ArticleMetadata } from './ogStore.js'
+
+const { getArticleTitle, getArticleImage, getArticleSummary } = Helpers
+
+async function fetchEventsFromRelays(
+  relayPool: RelayPool,
+  relayUrls: string[],
+  filter: Filter,
+  timeoutMs: number
+): Promise<NostrEvent[]> {
+  const events: NostrEvent[] = []
+
+  await new Promise<void>((resolve) => {
+    const timeout = setTimeout(() => resolve(), timeoutMs)
+
+    relayPool.request(relayUrls, filter).subscribe({
+      next: (event) => {
+        events.push(event)
+      },
+      error: () => resolve(),
+      complete: () => {
+        clearTimeout(timeout)
+        resolve()
+      }
+    })
+  })
+
+  return events.sort((a, b) => b.created_at - a.created_at)
+}
+
+async function fetchFirstEvent(
+  relayPool: RelayPool,
+  relayUrls: string[],
+  filter: Filter,
+  timeoutMs: number
+): Promise<NostrEvent | null> {
+  return new Promise<NostrEvent | null>((resolve) => {
+    let resolved = false
+    const timeout = setTimeout(() => {
+      if (!resolved) {
+        resolved = true
+        resolve(null)
+      }
+    }, timeoutMs)
+
+    const subscription = relayPool.request(relayUrls, filter).subscribe({
+      next: (event) => {
+        if (!resolved) {
+          resolved = true
+          clearTimeout(timeout)
+          subscription.unsubscribe()
+          resolve(event)
+        }
+      },
+      error: () => {
+        if (!resolved) {
+          resolved = true
+          clearTimeout(timeout)
+          resolve(null)
+        }
+      },
+      complete: () => {
+        if (!resolved) {
+          resolved = true
+          clearTimeout(timeout)
+          resolve(null)
+        }
+      }
+    })
+  })
+}
+
+async function fetchAuthorProfile(
+  relayPool: RelayPool,
+  relayUrls: string[],
+  pubkey: string,
+  timeoutMs: number
+): Promise<string | null> {
+  const profileEvents = await fetchEventsFromRelays(relayPool, relayUrls, {
+    kinds: [0],
+    authors: [pubkey]
+  }, timeoutMs)
+
+  if (profileEvents.length === 0) {
+    return null
+  }
+
+  const displayName = extractProfileDisplayName(profileEvents[0])
+  if (displayName && !displayName.startsWith('@')) {
+    return displayName
+  } else if (displayName) {
+    return displayName.substring(1)
+  }
+
+  return null
+}
+
+export async function fetchArticleMetadataViaRelays(naddr: string): Promise<ArticleMetadata | null> {
+  const relayPool = new RelayPool()
+  
+  try {
+    const decoded = nip19.decode(naddr)
+    if (decoded.type !== 'naddr') {
+      return null
+    }
+
+    const pointer = decoded.data as AddressPointer
+    const relayUrls = pointer.relays && pointer.relays.length > 0 ? pointer.relays : RELAYS
+
+    // Step A: Fetch article - return as soon as first event arrives
+    const article = await fetchFirstEvent(relayPool, relayUrls, {
+      kinds: [pointer.kind],
+      authors: [pointer.pubkey],
+      '#d': [pointer.identifier || '']
+    }, 7000)
+
+    if (!article) {
+      return null
+    }
+
+    // Step B: Extract article metadata immediately
+    const title = getArticleTitle(article) || 'Untitled Article'
+    const summary = getArticleSummary(article) || 'Read this article on Boris'
+    const image = getArticleImage(article) || '/boris-social-1200.png'
+
+    // Extract 't' tags (topic tags) from article event
+    const tags = article.tags
+      ?.filter((tag) => tag[0] === 't' && tag[1])
+      .map((tag) => tag[1])
+      .filter((tag) => tag.length > 0) || []
+
+    // Generate image alt text (use title as fallback)
+    const imageAlt = title || 'Article cover image'
+
+    // Step C: Fetch author profile with micro-wait (connections already warm)
+    let authorName = await fetchAuthorProfile(relayPool, relayUrls, pointer.pubkey, 400)
+
+    // Step D: Optional hedge - try again with slightly longer timeout if first attempt failed
+    if (!authorName) {
+      authorName = await fetchAuthorProfile(relayPool, relayUrls, pointer.pubkey, 600)
+    }
+
+    if (!authorName) {
+      authorName = pointer.pubkey.slice(0, 8) + '...'
+    }
+
+    return {
+      title,
+      summary,
+      image,
+      author: authorName,
+      published: article.created_at,
+      tags: tags.length > 0 ? tags : undefined,
+      imageAlt
+    }
+  } catch (err) {
+    console.error('Failed to fetch article metadata via relays:', err)
+    return null
+  }
+}
+
+export async function fetchArticleMetadataViaGateway(naddr: string): Promise<ArticleMetadata | null> {
+  try {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 2000)
+    
+    const url = `https://njump.to/${naddr}`
+    console.log(`Fetching from gateway: ${url}`)
+    
+    const resp = await fetch(url, { 
+      redirect: 'follow',
+      signal: controller.signal
+    })
+    clearTimeout(timeout)
+    
+    if (!resp.ok) {
+      console.error(`Gateway fetch failed: ${resp.status} ${resp.statusText} for ${url}`)
+      return null
+    }
+    
+    const html = await resp.text()
+    console.log(`Gateway response length: ${html.length} chars`)
+    
+    const pick = (re: RegExp) => {
+      const match = html.match(re)
+      return match?.[1] ? match[1].trim() : ''
+    }
+    
+    const title = pick(/<meta[^>]+property=["']og:title["'][^>]+content=["']([^"']+)["']/i) || 
+                      pick(/<title[^>]*>([^<]+)<\/title>/i)
+    const summary = pick(/<meta[^>]+property=["']og:description["'][^>]+content=["']([^"']+)["']/i)
+    const image = pick(/<meta[^>]+property=["']og:image["'][^>]+content=["']([^"']+)["']/i)
+    
+    console.log(`Parsed from gateway - title: ${title ? 'found' : 'missing'}, summary: ${summary ? 'found' : 'missing'}, image: ${image ? 'found' : 'missing'}`)
+    
+    if (!title && !summary && !image) {
+      console.log('No OG metadata found in gateway response')
+      return null
+    }
+    
+    return {
+      title: title || 'Read on Boris',
+      summary: summary || 'Read this article on Boris',
+      image: image || '/boris-social-1200.png',
+      author: 'Boris'
+    }
+  } catch (err) {
+    console.error('Failed to fetch article metadata via gateway:', err)
+    if (err instanceof Error) {
+      console.error('Error details:', err.message, err.stack)
+    }
+    return null
+  }
+}
+

api/services/ogHtml.ts

@@ -0,0 +1,80 @@
+import type { ArticleMetadata } from './ogStore.js'
+
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+export function generateHtml(naddr: string, meta: ArticleMetadata | null): string {
+  const baseUrl = 'https://read.withboris.com'
+  const articleUrl = `${baseUrl}/a/${naddr}`
+  
+  const title = meta?.title || 'Boris – Read, Highlight, Explore'
+  const description = meta?.summary || 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.'
+  const image = meta?.image?.startsWith('http') ? meta.image : `${baseUrl}${meta?.image || '/boris-social-1200.png'}`
+  const author = meta?.author || 'Boris'
+  const imageAlt = meta?.imageAlt || title
+
+  // Generate article:tag meta tags
+  const articleTags = meta?.tags && meta.tags.length > 0
+    ? meta.tags.map((tag) => `    <meta property="article:tag" content="${escapeHtml(tag)}" />`).join('\n')
+    : ''
+
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#0f172a" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <title>${escapeHtml(title)}</title>
+    <meta name="description" content="${escapeHtml(description)}" />
+    <link rel="canonical" href="${articleUrl}" />
+    
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="${articleUrl}" />
+    <meta property="og:title" content="${escapeHtml(title)}" />
+    <meta property="og:description" content="${escapeHtml(description)}" />
+    <meta property="og:image" content="${escapeHtml(image)}" />
+    <meta property="og:image:alt" content="${escapeHtml(imageAlt)}" />
+    <meta property="og:site_name" content="Boris" />
+    ${meta?.published ? `    <meta property="article:published_time" content="${new Date(meta.published * 1000).toISOString()}" />` : ''}
+    <meta property="article:author" content="${escapeHtml(author)}" />
+${articleTags}
+    
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="${articleUrl}" />
+    <meta name="twitter:title" content="${escapeHtml(title)}" />
+    <meta name="twitter:description" content="${escapeHtml(description)}" />
+    <meta name="twitter:image" content="${escapeHtml(image)}" />
+  </head>
+  <body>
+    <noscript>
+      <p>Redirecting to <a href="/a/${naddr}">Boris</a>...</p>
+    </noscript>
+    <script>
+      (function(){
+        try {
+          var p = '/a/${naddr}';
+          if (window.location.pathname !== p) {
+            history.replaceState(null, '', p);
+          }
+          var sep = window.location.search ? '&' : '?';
+          window.location.replace(p + sep + '_spa=1');
+        } catch (e) {}
+      })();
+    </script>
+  </body>
+</html>`
+}
+

api/services/ogStore.ts

@@ -0,0 +1,39 @@
+import { Redis } from '@upstash/redis'
+
+// Support both KV_* and UPSTASH_* env var names
+const redisUrl = process.env.UPSTASH_REDIS_REST_URL || process.env.KV_REST_API_URL
+const redisToken = process.env.UPSTASH_REDIS_REST_TOKEN || process.env.KV_REST_API_TOKEN
+const readOnlyToken = process.env.KV_REST_API_READ_ONLY_TOKEN
+
+if (!redisUrl || !redisToken) {
+  console.error('Missing Redis credentials: UPSTASH_REDIS_REST_URL/UPSTASH_REDIS_REST_TOKEN or KV_REST_API_URL/KV_REST_API_TOKEN')
+}
+
+const redisWrite = redisUrl && redisToken
+  ? new Redis({ url: redisUrl, token: redisToken })
+  : Redis.fromEnv() // Fallback to fromEnv() if explicit vars not set
+
+const redisRead = readOnlyToken && redisUrl
+  ? new Redis({ url: redisUrl, token: readOnlyToken })
+  : redisWrite
+
+const keyOf = (naddr: string) => `og:${naddr}`
+
+export type ArticleMetadata = {
+  title: string
+  summary: string
+  image: string
+  author: string
+  published?: number
+  tags?: string[]
+  imageAlt?: string
+}
+
+export async function getArticleMeta(naddr: string): Promise<ArticleMetadata | null> {
+  return (await redisRead.get<ArticleMetadata>(keyOf(naddr))) || null
+}
+
+export async function setArticleMeta(naddr: string, meta: ArticleMetadata, ttlSec = 604800): Promise<void> {
+  await redisWrite.set(keyOf(naddr), meta, { ex: ttlSec })
+}
+

api/video-meta.ts

@@ -94,7 +94,7 @@ async function pickCaptions(videoID: string, preferredLangs: string[], manualFir
   return null
 }
 
-async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string }> {
+async function getVimeoMetadata(videoId: string): Promise<{ title: string; description: string; thumbnail_url?: string }> {
   const vimeoUrl = `https://vimeo.com/${videoId}`
   const oembedUrl = `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(vimeoUrl)}`
   
@@ -107,7 +107,8 @@ async function getVimeoMetadata(videoId: string): Promise<{ title: string; descr
   
   return {
     title: data.title || '',
-    description: data.description || ''
+    description: data.description || '',
+    thumbnail_url: data.thumbnail_url || ''
   }
 }
 
@@ -147,9 +148,28 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   try {
     if (videoInfo.source === 'youtube') {
       // YouTube handling
-      // Note: getVideoDetails doesn't exist in the library, so we use a simplified approach
-      const title = ''
-      const description = ''
+      // Fetch basic metadata from YouTube page
+      let title = ''
+      let description = ''
+      
+      try {
+        const response = await fetch(`https://www.youtube.com/watch?v=${videoInfo.id}`)
+        if (response.ok) {
+          const html = await response.text()
+          // Extract title from HTML
+          const titleMatch = html.match(/<title>([^<]+)<\/title>/)
+          if (titleMatch) {
+            title = titleMatch[1].replace(' - YouTube', '').trim()
+          }
+          // Extract description from meta tag
+          const descMatch = html.match(/<meta name="description" content="([^"]+)"/)
+          if (descMatch) {
+            description = descMatch[1].trim()
+          }
+        }
+      } catch (error) {
+        console.warn('Failed to fetch YouTube metadata:', error)
+      }
 
       // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
       const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))
@@ -178,11 +198,12 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
       return ok(res, response)
     } else if (videoInfo.source === 'vimeo') {
       // Vimeo handling
-      const { title, description } = await getVimeoMetadata(videoInfo.id)
+      const { title, description, thumbnail_url } = await getVimeoMetadata(videoInfo.id)
       
       const response = {
         title,
         description,
+        thumbnail_url,
         captions: [], // Vimeo doesn't provide captions through oEmbed API
         transcript: '', // No transcript available
         lang: 'en', // Default language

api/youtube-meta.ts

@@ -63,10 +63,28 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   }
 
   try {
-    // Since getVideoDetails doesn't exist, we'll use a simple approach
-    // In a real implementation, you might want to use YouTube's API or other methods
-    const title = '' // Will be populated from captions or other sources
-    const description = ''
+    // Fetch basic metadata from YouTube page
+    let title = ''
+    let description = ''
+    
+    try {
+      const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`)
+      if (response.ok) {
+        const html = await response.text()
+        // Extract title from HTML
+        const titleMatch = html.match(/<title>([^<]+)<\/title>/)
+        if (titleMatch) {
+          title = titleMatch[1].replace(' - YouTube', '').trim()
+        }
+        // Extract description from meta tag
+        const descMatch = html.match(/<meta name="description" content="([^"]+)"/)
+        if (descMatch) {
+          description = descMatch[1].trim()
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to fetch YouTube metadata:', error)
+    }
 
     // Language order: manual en -> uiLocale -> lang -> any manual, then auto with same order
     const langs: string[] = Array.from(new Set(['en', uiLocale, lang].filter(Boolean) as string[]))

index.html

@@ -9,14 +9,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#0f172a" />
     <link rel="manifest" href="/manifest.webmanifest" />
-    <title>Boris - Nostr Bookmarks</title>
+    <title>Boris - Read, Highlight, Explore</title>
     <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <link rel="canonical" href="https://read.withboris.com/" />
     
     <!-- Open Graph / Social Media -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://read.withboris.com/" />
-    <meta property="og:title" content="Boris - Nostr Bookmarks" />
+    <meta property="og:title" content="Boris - Read, Highlight, Explore" />
     <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta property="og:image" content="https://read.withboris.com/boris-social-1200.png" />
     <meta property="og:site_name" content="Boris" />
@@ -24,7 +24,7 @@
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:url" content="https://read.withboris.com/" />
-    <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
+    <meta name="twitter:title" content="Boris - Read, Highlight, Explore" />
     <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta name="twitter:image" content="https://read.withboris.com/boris-social-1200.png" />
     

lib/profile.ts

@@ -0,0 +1,39 @@
+import { nip19 } from 'nostr-tools'
+import type { NostrEvent } from 'nostr-tools'
+
+export function getNpubFallbackDisplay(pubkey: string): string {
+  try {
+    const npub = nip19.npubEncode(pubkey)
+    return `${npub.slice(5, 12)}...`
+  } catch {
+    return `${pubkey.slice(0, 8)}...`
+  }
+}
+
+export function extractProfileDisplayName(profileEvent: NostrEvent | null | undefined): string {
+  if (!profileEvent || profileEvent.kind !== 0) {
+    return ''
+  }
+
+  try {
+    const profileData = JSON.parse(profileEvent.content || '{}') as {
+      name?: string
+      display_name?: string
+      nip05?: string
+    }
+
+    if (profileData.name) return profileData.name
+    if (profileData.display_name) return profileData.display_name
+    if (profileData.nip05) return profileData.nip05
+
+    return getNpubFallbackDisplay(profileEvent.pubkey)
+  } catch {
+    try {
+      return getNpubFallbackDisplay(profileEvent.pubkey)
+    } catch {
+      return ''
+    }
+  }
+}
+
+

package-lock.json

@@ -1,18 +1,19 @@
 {
   "name": "boris",
-  "version": "0.6.13",
+  "version": "0.10.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.6.13",
+      "version": "0.10.33",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",
         "@fortawesome/free-solid-svg-icons": "^7.1.0",
         "@fortawesome/react-fontawesome": "^3.0.2",
         "@treeee/youtube-caption-extractor": "^1.5.5",
+        "@upstash/redis": "^1.35.6",
         "@vercel/node": "^5.3.26",
         "applesauce-accounts": "^4.0.0",
         "applesauce-content": "^4.0.0",
@@ -23,6 +24,7 @@
         "applesauce-relay": "^4.0.0",
         "date-fns": "^4.1.0",
         "fast-average-color": "^9.5.0",
+        "fetch-opengraph": "^1.0.36",
         "nostr-tools": "^2.4.0",
         "prismjs": "^1.30.0",
         "react": "^18.2.0",
@@ -35,12 +37,15 @@
         "rehype-prism-plus": "^2.0.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
-        "use-pull-to-refresh": "^2.4.1"
+        "tinyld": "^1.3.4",
+        "use-pull-to-refresh": "^2.4.1",
+        "ws": "^8.18.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
+        "@types/ws": "^8.18.1",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
         "@typescript-eslint/parser": "^6.14.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -54,6 +59,9 @@
         "vite": "^5.0.8",
         "vite-plugin-pwa": "^1.0.3",
         "workbox-window": "^7.3.0"
+      },
+      "engines": {
+        "node": "22.x"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -100,6 +108,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2260,6 +2269,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
       "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "7.1.0"
       },
@@ -3551,6 +3561,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
       "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3593,6 +3604,16 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -3635,6 +3656,7 @@
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -3797,6 +3819,15 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@upstash/redis": {
+      "version": "1.35.6",
+      "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.35.6.tgz",
+      "integrity": "sha512-aSEIGJgJ7XUfTYvhQcQbq835re7e/BXjs8Janq6Pvr6LlmTZnyqwT97RziZLO/8AVUL037RLXqqiQC6kCt+5pA==",
+      "license": "MIT",
+      "dependencies": {
+        "uncrypto": "^0.1.3"
+      }
+    },
     "node_modules/@vercel/build-utils": {
       "version": "12.1.2",
       "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-12.1.2.tgz",
@@ -3925,7 +3956,8 @@
       "version": "16.18.11",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.11.tgz",
       "integrity": "sha512-3oJbGBUWuS6ahSnEq1eN2XrCyf4YsWI8OyCvo7c64zQJNplk3mO84t53o8lfTk+2ji59g5ycfc6qQ3fdHliHuA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@vercel/node/node_modules/esbuild": {
       "version": "0.14.47",
@@ -4010,6 +4042,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4086,6 +4119,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4501,6 +4535,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.14",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz",
@@ -4629,6 +4672,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -5865,6 +5909,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -6170,6 +6215,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-opengraph": {
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/fetch-opengraph/-/fetch-opengraph-1.0.36.tgz",
+      "integrity": "sha512-w2Gs64zjL1O86E0I6E26MrxeXpTrR8Y1vWrgupmZN6NXKV8F5I3W0tlh+ZX686jZwxyilWnQjYwgnWpdETdHWw==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^0.21.1",
+        "html-entities": "^2.3.2"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -6263,6 +6318,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -6895,6 +6970,22 @@
         "he": "bin/he"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -9654,6 +9745,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -9800,6 +9892,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -9812,6 +9905,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -10377,6 +10471,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -11132,6 +11227,7 @@
       "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -11208,6 +11304,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11215,6 +11312,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tinyld": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/tinyld/-/tinyld-1.3.4.tgz",
+      "integrity": "sha512-u26CNoaInA4XpDU+8s/6Cq8xHc2T5M4fXB3ICfXPokUQoLzmPgSZU02TAkFwFMJCWTjk53gtkS8pETTreZwCqw==",
+      "license": "MIT",
+      "bin": {
+        "tinyld": "bin/tinyld.js",
+        "tinyld-heavy": "bin/tinyld-heavy.js",
+        "tinyld-light": "bin/tinyld-light.js"
+      },
+      "engines": {
+        "node": ">= 12.10.0",
+        "npm": ">= 6.12.0",
+        "yarn": ">= 1.20.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -11444,6 +11557,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11471,6 +11585,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncrypto": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz",
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
+      "license": "MIT"
+    },
     "node_modules/undici": {
       "version": "5.28.4",
       "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
@@ -11487,8 +11607,7 @@
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
       "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
@@ -11769,6 +11888,7 @@
       "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -12154,6 +12274,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -12198,6 +12319,7 @@
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -12446,6 +12568,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -1,14 +1,18 @@
 {
   "name": "boris",
-  "version": "0.7.2",
+  "version": "0.11.0",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
+  "engines": {
+    "node": "22.x"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "publish:test:markdown": "./scripts/publish-markdown.sh"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
@@ -16,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.0.2",
     "@treeee/youtube-caption-extractor": "^1.5.5",
+    "@upstash/redis": "^1.35.6",
     "@vercel/node": "^5.3.26",
     "applesauce-accounts": "^4.0.0",
     "applesauce-content": "^4.0.0",
@@ -26,6 +31,7 @@
     "applesauce-relay": "^4.0.0",
     "date-fns": "^4.1.0",
     "fast-average-color": "^9.5.0",
+    "fetch-opengraph": "^1.0.36",
     "nostr-tools": "^2.4.0",
     "prismjs": "^1.30.0",
     "react": "^18.2.0",
@@ -38,12 +44,15 @@
     "rehype-prism-plus": "^2.0.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "use-pull-to-refresh": "^2.4.1"
+    "tinyld": "^1.3.4",
+    "use-pull-to-refresh": "^2.4.1",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
@@ -95,6 +104,15 @@
       "@typescript-eslint/no-explicit-any": "warn",
       "prefer-const": "error",
       "no-var": "error"
-    }
+    },
+    "overrides": [
+      {
+        "files": ["api/**/*.ts"],
+        "env": {
+          "node": true,
+          "browser": false
+        }
+      }
+    ]
   }
 }

public/manifest.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "Boris - Nostr Bookmarks",
+  "name": "Boris - Read, Highlight, Explore",
   "short_name": "Boris",
   "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
   "start_url": "/",
@@ -9,6 +9,16 @@
   "background_color": "#0b1220",
   "orientation": "any",
   "categories": ["productivity", "social", "utilities"],
+  "share_target": {
+    "action": "/share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "title": "title",
+      "text": "text",
+      "url": "link"
+    }
+  },
   "icons": [
     {
       "src": "/icon-192.png",

public/md/NIP-85.md

@@ -0,0 +1,75 @@
+# NIP-85
+
+## Reading Progress
+
+`draft` `optional`
+
+This NIP defines kind `39802`, a parameterized replaceable event for tracking reading progress across articles and web content.
+
+## Table of Contents
+
+* [Format](#format)
+  * [Tags](#tags)
+  * [Content](#content)
+* [Examples](#examples)
+
+## Format
+
+Reading progress events use NIP-33 parameterized replaceable semantics. The `d` tag serves as the unique identifier per author and target content.
+
+### Tags
+
+Events SHOULD tag the source of the reading progress, whether nostr-native or not. `a` tags should be used for nostr events and `r` tags for URLs.
+
+When tagging a URL, clients generating these events SHOULD do a best effort of cleaning the URL from trackers or obvious non-useful information from the query string.
+
+- `d` (required): Unique identifier for the target content
+  - For Nostr articles: `30023:<pubkey>:<identifier>` (matching the article's coordinate)
+  - For external URLs: `url:<base64url-encoded-url>`
+- `a` (optional but recommended for Nostr articles): Article coordinate `30023:<pubkey>:<identifier>`
+- `r` (optional but recommended for URLs): Raw URL of the external content
+
+### Content
+
+The content is a JSON object with the following fields:
+
+- `progress` (required): Number between 0 and 1 representing reading progress (0 = not started, 1 = completed)
+- `loc` (optional): Number representing a location marker (e.g., pixel scroll position, page number, etc.)
+- `ts` (optional): Unix timestamp (seconds) when the progress was recorded
+- `ver` (optional): Schema version string
+
+The latest event by `created_at` per (`pubkey`, `d`) pair is authoritative (NIP-33 semantics).
+
+Clients SHOULD implement rate limiting to avoid excessive relay traffic (debounce writes, only save significant changes).
+
+## Examples
+
+### Nostr Article
+
+```json
+{
+  "kind": 39802,
+  "pubkey": "<user-pubkey>",
+  "created_at": 1734635012,
+  "content": "{\"progress\":0.66,\"loc\":1432,\"ts\":1734635012,\"ver\":\"1\"}",
+  "tags": [
+    ["d", "30023:<author-pubkey>:<article-identifier>"],
+    ["a", "30023:<author-pubkey>:<article-identifier>"]
+  ]
+}
+```
+
+### External URL
+
+```json
+{
+  "kind": 39802,
+  "pubkey": "<user-pubkey>",
+  "created_at": 1734635999,
+  "content": "{\"progress\":1,\"ts\":1734635999,\"ver\":\"1\"}",
+  "tags": [
+    ["d", "url:aHR0cHM6Ly9leGFtcGxlLmNvbS9wb3N0"],
+    ["r", "https://example.com/post"]
+  ]
+}
+```

public/sw-dev.js

@@ -0,0 +1,47 @@
+// Development Service Worker - simplified version for testing image caching
+// This is served in dev mode when vite-plugin-pwa doesn't serve the injectManifest SW
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(clients.claim())
+})
+
+// Image caching - simple version for dev testing
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url)
+  const isImage = event.request.destination === 'image' || 
+                  /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(url.pathname)
+  
+  if (isImage) {
+    event.respondWith(
+      caches.open('boris-images-dev').then((cache) => {
+        return cache.match(event.request).then((cachedResponse) => {
+          // Try to fetch from network
+          return fetch(event.request).then((response) => {
+            // If fetch succeeds, cache it and return
+            if (response.ok) {
+              cache.put(event.request, response.clone()).catch(() => {
+                // Ignore cache put errors
+              })
+            }
+            return response
+          }).catch((error) => {
+            // If fetch fails (network error, CORS, etc.), return cached response if available
+            if (cachedResponse) {
+              return cachedResponse
+            }
+            // No cache available, reject the promise so browser handles it
+            return Promise.reject(error)
+          })
+        })
+      }).catch(() => {
+        // If cache operations fail, try to fetch directly without caching
+        return fetch(event.request)
+      })
+    )
+  }
+})
+

scripts/publish-markdown.sh

@@ -0,0 +1,202 @@
+#!/bin/bash
+
+# Script to publish markdown files from test/markdown/ to Nostr using nak
+# Usage: 
+#   ./scripts/publish-markdown.sh [filename] [relay1] [relay2] ...
+#   ./scripts/publish-markdown.sh                    # Interactive mode
+#   ./scripts/publish-markdown.sh tables.md          # Publish specific file
+#   ./scripts/publish-markdown.sh tables.md wss://relay.example.com  # With relay
+#
+# Environment:
+#   The script reads .env from the project root directory ($PROJECT_ROOT/.env)
+#   Required: NOSTR_SECRET_KEY (your nsec, ncryptsec, or hex format key)
+#   Optional: RELAYS (space-separated list of relay URLs)
+#
+# Test account for markdown test documents:
+#   npub: npub1marky39a9qmadyuux9lr49pdhy3ddxrdwtmd9y957kye66qyu3vq7spdm2
+#   Profile: https://read.withboris.com/p/npub1marky39a9qmadyuux9lr49pdhy3ddxrdwtmd9y957kye66qyu3vq7spdm2/writings
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+MARKDOWN_DIR="$PROJECT_ROOT/test/markdown"
+ENV_FILE="$PROJECT_ROOT/.env"
+
+# Load .env file if it exists
+if [ -f "$ENV_FILE" ]; then
+    # Source the .env file, handling quoted values properly
+    set -a  # Automatically export all variables
+    # Use eval to properly handle quoted values (safe since we control the file)
+    # This handles both unquoted and quoted values correctly
+    while IFS= read -r line || [ -n "$line" ]; do
+        # Skip comments and empty lines
+        [[ "$line" =~ ^[[:space:]]*# ]] && continue
+        [[ -z "$line" ]] && continue
+        # Remove leading/trailing whitespace
+        line=$(echo "$line" | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')
+        # Export the variable (handles quoted values)
+        eval "export $line"
+    done < "$ENV_FILE"
+    set +a  # Stop automatically exporting
+fi
+
+# Check if nak is installed
+if ! command -v nak &> /dev/null; then
+    echo "Error: nak is not installed or not in PATH"
+    echo "Install from: https://github.com/fiatjaf/nak"
+    exit 1
+fi
+
+# Function to publish a markdown file
+publish_file() {
+    local file_path="$1"
+    shift  # Remove first argument, rest are relay URLs
+    local relays=("$@")
+    local filename=$(basename "$file_path")
+    local identifier="${filename%.md}"  # Remove .md extension
+    
+    echo "📝 Publishing: $filename"
+    echo "   Identifier: $identifier"
+    
+    # Extract title from first H1 if available, otherwise use filename
+    local title=$(grep -m 1 "^# " "$file_path" | sed 's/^# //' || echo "$identifier")
+    
+    # Add relays if provided
+    if [ ${#relays[@]} -gt 0 ]; then
+        echo "   Relays: ${relays[*]}"
+    else
+        echo "   Note: No relays specified. Event will be created but not published."
+        echo "   Add relay URLs as arguments to publish, e.g.: wss://relay.example.com"
+    fi
+    
+    # Publish as kind 30023 (NIP-23 blog post)
+    # The "d" tag is required for replaceable events (kind 30023)
+    # Using the filename (without extension) as the identifier
+    # Build command array to avoid eval issues
+    # Use @filename syntax to read content from file (nak supports this)
+    local cmd_args=(
+        "event"
+        "-k" "30023"
+        "-d" "$identifier"
+        "-t" "title=$title"
+        "--content" "@$file_path"
+    )
+    
+    # Add relays if provided
+    if [ ${#relays[@]} -gt 0 ]; then
+        cmd_args+=("${relays[@]}")
+    fi
+    
+    nak "${cmd_args[@]}"
+    
+    if [ $? -eq 0 ]; then
+        echo "✅ Successfully published: $filename"
+    else
+        echo "❌ Failed to publish: $filename"
+        return 1
+    fi
+}
+
+# Check for NOSTR_SECRET_KEY
+if [ -z "$NOSTR_SECRET_KEY" ]; then
+    echo "⚠️  Warning: NOSTR_SECRET_KEY environment variable not set"
+    echo "   Set it in .env file or with: export NOSTR_SECRET_KEY=your_key_here"
+    echo "   Or use --prompt-sec flag (nak will prompt for key)"
+    echo ""
+fi
+
+# Parse RELAYS from environment if set
+default_relays=()
+if [ -n "$RELAYS" ]; then
+    # Split RELAYS string into array
+    read -ra default_relays <<< "$RELAYS"
+fi
+
+# Main logic
+if [ $# -eq 0 ]; then
+    # No arguments: list all markdown files and let user choose
+    echo "Available markdown files:"
+    echo ""
+    
+    files=("$MARKDOWN_DIR"/*.md)
+    if [ ! -e "${files[0]}" ]; then
+        echo "No markdown files found in $MARKDOWN_DIR"
+        exit 1
+    fi
+    
+    # Display files with numbers
+    declare -a file_array
+    i=1
+    for file in "${files[@]}"; do
+        filename=$(basename "$file")
+        echo "  $i) $filename"
+        file_array[$i]="$file"
+        ((i++))
+    done
+    
+    echo ""
+    echo "Enter file number(s) to publish (space-separated), or 'all' for all files:"
+    read -r selection
+    
+    echo ""
+    if [ ${#default_relays[@]} -gt 0 ]; then
+        echo "Enter relay URLs (space-separated, or press Enter to use defaults from .env):"
+        echo "   Defaults: ${default_relays[*]}"
+    else
+        echo "Enter relay URLs (space-separated, or press Enter to skip):"
+    fi
+    read -r relay_input
+    
+    # Parse relay URLs
+    relays=()
+    if [ -n "$relay_input" ]; then
+        read -ra relays <<< "$relay_input"
+    elif [ ${#default_relays[@]} -gt 0 ]; then
+        # Use defaults from .env
+        relays=("${default_relays[@]}")
+    fi
+    
+    if [ "$selection" = "all" ]; then
+        # Publish all files
+        for file in "${files[@]}"; do
+            publish_file "$file" "${relays[@]}"
+            echo ""
+        done
+    else
+        # Publish selected files
+        for num in $selection; do
+            if [ -n "${file_array[$num]}" ]; then
+                publish_file "${file_array[$num]}" "${relays[@]}"
+                echo ""
+            else
+                echo "⚠️  Invalid selection: $num"
+            fi
+        done
+    fi
+else
+    # Argument provided: publish specific file
+    filename="$1"
+    shift  # Remove filename, rest are relay URLs
+    relays=("$@")
+    
+    # If no relays provided as arguments, use defaults from .env
+    if [ ${#relays[@]} -eq 0 ] && [ ${#default_relays[@]} -gt 0 ]; then
+        relays=("${default_relays[@]}")
+    fi
+    
+    # If filename doesn't end with .md, add it
+    if [[ ! "$filename" =~ \.md$ ]]; then
+        filename="${filename}.md"
+    fi
+    
+    file_path="$MARKDOWN_DIR/$filename"
+    
+    if [ ! -f "$file_path" ]; then
+        echo "Error: File not found: $file_path"
+        exit 1
+    fi
+    
+    publish_file "$file_path" "${relays[@]}"
+fi
+

src/App.tsx

@@ -8,21 +8,30 @@ import { AccountManager, Accounts } from 'applesauce-accounts'
 import { registerCommonAccountTypes } from 'applesauce-accounts/accounts'
 import { RelayPool } from 'applesauce-relay'
 import { NostrConnectSigner } from 'applesauce-signers'
+import type { NostrEvent } from 'nostr-tools'
 import { getDefaultBunkerPermissions } from './services/nostrConnect'
 import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Debug from './components/Debug'
 import Bookmarks from './components/Bookmarks'
 import RouteDebug from './components/RouteDebug'
 import Toast from './components/Toast'
+import ShareTargetHandler from './components/ShareTargetHandler'
 import { useToast } from './hooks/useToast'
 import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
 import { SkeletonThemeProvider } from './components/Skeletons'
-import { DebugBus } from './utils/debugBus'
+import { loadUserRelayList, loadBlockedRelays, computeRelaySet } from './services/relayListService'
+import { applyRelaySetToPool, getActiveRelayUrls, ALWAYS_LOCAL_RELAYS, HARDCODED_RELAYS } from './services/relayManager'
 import { Bookmark } from './types/bookmarks'
 import { bookmarkController } from './services/bookmarkController'
 import { contactsController } from './services/contactsController'
 import { highlightsController } from './services/highlightsController'
+import { writingsController } from './services/writingsController'
+import { readingProgressController } from './services/readingProgressController'
+// import { fetchNostrverseHighlights } from './services/nostrverseService'
+import { nostrverseHighlightsController } from './services/nostrverseHighlightsController'
+import { nostrverseWritingsController } from './services/nostrverseWritingsController'
+import { archiveController } from './services/archiveController'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
   'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
@@ -50,18 +59,14 @@ function AppRoutes({
 
   // Subscribe to bookmark controller
   useEffect(() => {
-    console.log('[bookmark] 🎧 Subscribing to bookmark controller')
     const unsubBookmarks = bookmarkController.onBookmarks((bookmarks) => {
-      console.log('[bookmark] 📥 Received bookmarks:', bookmarks.length)
       setBookmarks(bookmarks)
     })
     const unsubLoading = bookmarkController.onLoading((loading) => {
-      console.log('[bookmark] 📥 Loading state:', loading)
       setBookmarksLoading(loading)
     })
     
     return () => {
-      console.log('[bookmark] 🔇 Unsubscribing from bookmark controller')
       unsubBookmarks()
       unsubLoading()
     }
@@ -69,18 +74,14 @@ function AppRoutes({
 
   // Subscribe to contacts controller
   useEffect(() => {
-    console.log('[contacts] 🎧 Subscribing to contacts controller')
     const unsubContacts = contactsController.onContacts((contacts) => {
-      console.log('[contacts] 📥 Received contacts:', contacts.size)
       setContacts(contacts)
     })
     const unsubLoading = contactsController.onLoading((loading) => {
-      console.log('[contacts] 📥 Loading state:', loading)
       setContactsLoading(loading)
     })
     
     return () => {
-      console.log('[contacts] 🔇 Unsubscribing from contacts controller')
       unsubContacts()
       unsubLoading()
     }
@@ -94,31 +95,55 @@ function AppRoutes({
       
       // Load bookmarks
       if (bookmarks.length === 0 && !bookmarksLoading) {
-        console.log('[bookmark] 🚀 Auto-loading bookmarks on mount/login')
-        bookmarkController.start({ relayPool, activeAccount, accountManager })
+        bookmarkController.start({ relayPool, activeAccount, accountManager, eventStore: eventStore || undefined })
       }
       
       // Load contacts
       if (pubkey && contacts.size === 0 && !contactsLoading) {
-        console.log('[contacts] 🚀 Auto-loading contacts on mount/login')
         contactsController.start({ relayPool, pubkey })
       }
       
       // Load highlights (controller manages its own state)
       if (pubkey && eventStore && !highlightsController.isLoadedFor(pubkey)) {
-        console.log('[highlights] 🚀 Auto-loading highlights on mount/login')
         highlightsController.start({ relayPool, eventStore, pubkey })
       }
+
+      // Load writings (controller manages its own state)
+      if (pubkey && eventStore && !writingsController.isLoadedFor(pubkey)) {
+        writingsController.start({ relayPool, eventStore, pubkey })
+      }
+
+      // Load reading progress (controller manages its own state)
+      if (pubkey && eventStore && !readingProgressController.isLoadedFor(pubkey)) {
+        readingProgressController.start({ relayPool, eventStore, pubkey })
+      }
+
+      // Load archive (marked-as-read) controller
+      if (pubkey && eventStore && !archiveController.isLoadedFor(pubkey)) {
+        archiveController.start({ relayPool, eventStore, pubkey })
+      }
+
+      // Start centralized nostrverse highlights controller (non-blocking)
+      if (eventStore) {
+        nostrverseHighlightsController.start({ relayPool, eventStore })
+        nostrverseWritingsController.start({ relayPool, eventStore })
+      }
     }
   }, [activeAccount, relayPool, eventStore, bookmarks.length, bookmarksLoading, contacts.size, contactsLoading, accountManager])
 
+  // Ensure nostrverse controllers run even when logged out
+  useEffect(() => {
+    if (relayPool && eventStore) {
+      nostrverseHighlightsController.start({ relayPool, eventStore })
+      nostrverseWritingsController.start({ relayPool, eventStore })
+    }
+  }, [relayPool, eventStore])
+
   // Manual refresh (for sidebar button)
   const handleRefreshBookmarks = useCallback(async () => {
     if (!relayPool || !activeAccount) {
-      console.warn('[bookmark] Cannot refresh: missing relayPool or activeAccount')
       return
     }
-    console.log('[bookmark] 🔄 Manual refresh triggered')
     bookmarkController.reset()
     await bookmarkController.start({ relayPool, activeAccount, accountManager })
   }, [relayPool, activeAccount, accountManager])
@@ -128,11 +153,17 @@ function AppRoutes({
     bookmarkController.reset() // Clear bookmarks via controller
     contactsController.reset() // Clear contacts via controller
     highlightsController.reset() // Clear highlights via controller
+    readingProgressController.reset() // Clear reading progress via controller
+    archiveController.reset() // Clear archive state
     showToast('Logged out successfully')
   }
 
   return (
     <Routes>
+      <Route 
+        path="/share-target" 
+        element={<ShareTargetHandler relayPool={relayPool} />} 
+      />
       <Route 
         path="/a/:naddr" 
         element={
@@ -206,11 +237,11 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me" 
-        element={<Navigate to="/me/highlights" replace />} 
+        path="/my" 
+        element={<Navigate to="/my/highlights" replace />} 
       />
       <Route 
-        path="/me/highlights" 
+        path="/my/highlights" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -222,7 +253,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reading-list" 
+        path="/my/bookmarks" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -234,7 +265,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reads" 
+        path="/my/reads" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -246,7 +277,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reads/:filter" 
+        path="/my/reads/:filter" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -258,7 +289,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/links" 
+        path="/my/links" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -270,7 +301,19 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/writings" 
+        path="/my/links/:filter" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+            bookmarks={bookmarks}
+            bookmarksLoading={bookmarksLoading}
+            onRefreshBookmarks={handleRefreshBookmarks}
+          />
+        } 
+      />
+      <Route 
+        path="/my/writings" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -305,6 +348,18 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/e/:eventId" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+            bookmarks={bookmarks}
+            bookmarksLoading={bookmarksLoading}
+            onRefreshBookmarks={handleRefreshBookmarks}
+          />
+        } 
+      />
       <Route 
         path="/debug" 
         element={
@@ -349,55 +404,35 @@ function App() {
       // Wire the signer to use this pool; make publish non-blocking so callers don't
       // wait for every relay send to finish. Responses still resolve the pending request.
       NostrConnectSigner.subscriptionMethod = pool.subscription.bind(pool)
-      NostrConnectSigner.publishMethod = (relays: string[], event: unknown) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const result: any = pool.publish(relays, event as any)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (result && typeof (result as any).subscribe === 'function') {
-          // Subscribe to the observable but ignore completion/errors (fire-and-forget)
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          try { (result as any).subscribe({ complete: () => { /* noop */ }, error: () => { /* noop */ } }) } catch { /* ignore */ }
-        }
-        // Return an already-resolved promise so upstream await finishes immediately
+      NostrConnectSigner.publishMethod = (relays: string[], event: NostrEvent) => {
+        // Fire-and-forget publish; do not block callers
+        pool.publish(relays, event).catch(() => { /* ignore errors */ })
         return Promise.resolve()
       }
-      console.log('[bunker] ✅ Wired NostrConnectSigner to RelayPool publish/subscription (before account load)')
       
       // Create a relay group for better event deduplication and management
       pool.group(RELAYS)
-      console.log('[bunker] Created relay group with', RELAYS.length, 'relays (including local)')
       
       // Load persisted accounts from localStorage
       try {
         const accountsJson = localStorage.getItem('accounts')
-        console.log('[bunker] Raw accounts from localStorage:', accountsJson)
         
         const json = JSON.parse(accountsJson || '[]')
-        console.log('[bunker] Parsed accounts:', json.length, 'accounts')
         
         await accounts.fromJSON(json)
-        console.log('[bunker] Loaded', accounts.accounts.length, 'accounts from storage')
-        console.log('[bunker] Account types:', accounts.accounts.map(a => ({ id: a.id, type: a.type })))
         
         // Load active account from storage
         const activeId = localStorage.getItem('active')
-        console.log('[bunker] Active ID from localStorage:', activeId)
         
         if (activeId) {
           const account = accounts.getAccount(activeId)
-          console.log('[bunker] Found account for ID?', !!account, account?.type)
           
           if (account) {
             accounts.setActive(activeId)
-            console.log('[bunker] ✅ Restored active account:', activeId, 'type:', account.type)
-          } else {
-            console.warn('[bunker] ⚠️  Active ID found but account not in list')
           }
-        } else {
-          console.log('[bunker] No active account ID in localStorage')
         }
       } catch (err) {
-        console.error('[bunker] ❌ Failed to load accounts from storage:', err)
+        console.error('Failed to load accounts from storage:', err)
       }
       
       // Subscribe to accounts changes and persist to localStorage
@@ -419,11 +454,6 @@ function App() {
       const reconnectedAccounts = new Set<string>()
       
             const bunkerReconnectSub = accounts.active$.subscribe(async (account) => {
-              console.log('[bunker] Active account changed:', { 
-                hasAccount: !!account, 
-                type: account?.type,
-                id: account?.id 
-              })
               
               if (account && account.type === 'nostr-connect') {
                 const nostrConnectAccount = account as Accounts.NostrConnectAccount<unknown>
@@ -431,23 +461,17 @@ function App() {
                 try {
                   if (!(nostrConnectAccount as unknown as { disableQueue?: boolean }).disableQueue) {
                     (nostrConnectAccount as unknown as { disableQueue?: boolean }).disableQueue = true
-                    console.log('[bunker] ⚙️  Disabled account request queueing for nostr-connect')
                   }
-                } catch (err) { console.warn('[bunker] failed to disable queue', err) }
+                } catch (err) {
+                  // Ignore queue disable errors
+                }
                 // Note: for Amber bunker, the remote signer pubkey is the user's pubkey. This is expected.
                 
                 // Skip if we've already reconnected this account
                 if (reconnectedAccounts.has(account.id)) {
-                  console.log('[bunker] ⏭️  Already reconnected this account, skipping')
                   return
                 }
                 
-                console.log('[bunker] Account detected. Status:', {
-                  listening: nostrConnectAccount.signer.listening,
-                  isConnected: nostrConnectAccount.signer.isConnected,
-                  hasRemote: !!nostrConnectAccount.signer.remote,
-                  bunkerRelays: nostrConnectAccount.signer.relays
-                })
                 
                 try {
                   // For restored signers, ensure they have the pool's subscription methods
@@ -461,10 +485,9 @@ function App() {
                   const newBunkerRelays = bunkerRelays.filter(url => !existingRelayUrls.has(url))
                   
                   if (newBunkerRelays.length > 0) {
-                    console.log('[bunker] Adding bunker relays to pool BEFORE signer recreation:', newBunkerRelays)
                     pool.group(newBunkerRelays)
                   } else {
-                    console.log('[bunker] Bunker relays already in pool')
+                    // Bunker relays already in pool
                   }
                   
                   const recreatedSigner = new NostrConnectSigner({
@@ -478,85 +501,42 @@ function App() {
                   try {
                     const mergedRelays = Array.from(new Set([...(signerData.relays || []), ...RELAYS]))
                     recreatedSigner.relays = mergedRelays
-                    console.log('[bunker] 🔗 Signer relays merged with app RELAYS:', mergedRelays)
-                  } catch (err) { console.warn('[bunker] failed to merge signer relays', err) }
+                  } catch (err) { /* ignore */ }
                   
                   // Replace the signer on the account
                   nostrConnectAccount.signer = recreatedSigner
-                  console.log('[bunker] ✅ Signer recreated with pool context')
-
-                  // Debug: log publish/subscription calls made by signer (decrypt/sign requests)
+                  
+                  // Fire-and-forget publish for bunker: trigger but don't wait for completion
                   // IMPORTANT: bind originals to preserve `this` context used internally by the signer
                   const originalPublish = (recreatedSigner as unknown as { publishMethod: (relays: string[], event: unknown) => unknown }).publishMethod.bind(recreatedSigner)
                   ;(recreatedSigner as unknown as { publishMethod: (relays: string[], event: unknown) => unknown }).publishMethod = (relays: string[], event: unknown) => {
-                    try {
-                      let method: string | undefined
-                      const content = (event as { content?: unknown })?.content
-                      if (typeof content === 'string') {
-                        try {
-                          const parsed = JSON.parse(content) as { method?: string; id?: unknown }
-                          method = parsed?.method
-                        } catch (err) { console.warn('[bunker] failed to parse event content', err) }
-                      }
-                      const summary = {
-                        relays,
-                        kind: (event as { kind?: number })?.kind,
-                        method,
-                        // include tags array for debugging (NIP-46 expects method tag)
-                        tags: (event as { tags?: unknown })?.tags,
-                        contentLength: typeof content === 'string' ? content.length : undefined
-                      }
-                      console.log('[bunker] publish via signer:', summary)
-                      try { DebugBus.info('bunker', 'publish', summary) } catch (err) { console.warn('[bunker] failed to log to DebugBus', err) }
-                    } catch (err) { console.warn('[bunker] failed to log publish summary', err) }
-                    // Fire-and-forget publish: trigger the publish but do not return the
-                    // Observable/Promise to upstream to avoid their awaiting of completion.
                     const result = originalPublish(relays, event)
                     if (result && typeof (result as { subscribe?: unknown }).subscribe === 'function') {
-                      // Subscribe to the observable but ignore completion/errors (fire-and-forget)
                       try { (result as { subscribe: (h: { complete?: () => void; error?: (e: unknown) => void }) => unknown }).subscribe({ complete: () => { /* noop */ }, error: () => { /* noop */ } }) } catch { /* ignore */ }
                     }
-                    // If it's a Promise, simply ignore it (no await) so it resolves in the background.
-                    // Return a benign object so callers that probe for a "subscribe" property
-                    // (e.g., applesauce makeRequest) won't throw on `"subscribe" in result`.
                     return {} as unknown as never
                   }
-                  const originalSubscribe = (recreatedSigner as unknown as { subscriptionMethod: (relays: string[], filters: unknown[]) => unknown }).subscriptionMethod.bind(recreatedSigner)
-                  ;(recreatedSigner as unknown as { subscriptionMethod: (relays: string[], filters: unknown[]) => unknown }).subscriptionMethod = (relays: string[], filters: unknown[]) => {
-                    try {
-                      console.log('[bunker] subscribe via signer:', { relays, filters })
-                      try { DebugBus.info('bunker', 'subscribe', { relays, filters }) } catch (err) { console.warn('[bunker] failed to log subscribe to DebugBus', err) }
-                    } catch (err) { console.warn('[bunker] failed to log subscribe summary', err) }
-                    return originalSubscribe(relays, filters)
-                  }
 
                   
                   // Just ensure the signer is listening for responses - don't call connect() again
                   // The fromBunkerURI already connected with permissions during login
                   if (!nostrConnectAccount.signer.listening) {
-                    console.log('[bunker] Opening signer subscription...')
                     await nostrConnectAccount.signer.open()
-                    console.log('[bunker] ✅ Signer subscription opened')
-                  } else {
-                    console.log('[bunker] ✅ Signer already listening')
                   }
                   
                   // Attempt a guarded reconnect to ensure Amber authorizes decrypt operations
                   try {
                     if (nostrConnectAccount.signer.remote && !reconnectedAccounts.has(account.id)) {
                       const permissions = getDefaultBunkerPermissions()
-                      console.log('[bunker] Attempting guarded connect() with permissions to ensure decrypt perms', { count: permissions.length })
                       await nostrConnectAccount.signer.connect(undefined, permissions)
-                      console.log('[bunker] ✅ Guarded connect() succeeded with permissions')
                     }
                   } catch (e) {
-                    console.warn('[bunker] ⚠️ Guarded connect() failed:', e)
+                    // Ignore reconnect errors
                   }
                   
                   // Give the subscription a moment to fully establish before allowing decrypt operations
                   // This ensures the signer is ready to handle and receive responses
                   await new Promise(resolve => setTimeout(resolve, 100))
-                  console.log("[bunker] Subscription ready after startup delay")
                   // Fire-and-forget: probe decrypt path to verify Amber responds to NIP-46 decrypt
                   try {
                     const withTimeout = async <T,>(p: Promise<T>, ms = 10000): Promise<T> => {
@@ -569,52 +549,153 @@ function App() {
                       const self = nostrConnectAccount.pubkey
                       // Try a roundtrip so the bunker can respond successfully
                       try {
-                        console.log('[bunker] 🔎 Probe nip44 roundtrip (encrypt→decrypt)…')
-                        const cipher44 = await withTimeout(nostrConnectAccount.signer.nip44!.encrypt(self, 'probe-nip44'))
-                        const plain44 = await withTimeout(nostrConnectAccount.signer.nip44!.decrypt(self, cipher44))
-                        console.log('[bunker] 🔎 Probe nip44 responded:', typeof plain44 === 'string' ? plain44 : typeof plain44)
-                      } catch (err) {
-                        console.log('[bunker] 🔎 Probe nip44 result:', err instanceof Error ? err.message : err)
+                        await withTimeout(nostrConnectAccount.signer.nip44!.encrypt(self, 'probe-nip44'))
+                        await withTimeout(nostrConnectAccount.signer.nip44!.decrypt(self, ''))
+                      } catch (_err) {
+                        // Ignore probe errors
                       }
                       try {
-                        console.log('[bunker] 🔎 Probe nip04 roundtrip (encrypt→decrypt)…')
-                        const cipher04 = await withTimeout(nostrConnectAccount.signer.nip04!.encrypt(self, 'probe-nip04'))
-                        const plain04 = await withTimeout(nostrConnectAccount.signer.nip04!.decrypt(self, cipher04))
-                        console.log('[bunker] 🔎 Probe nip04 responded:', typeof plain04 === 'string' ? plain04 : typeof plain04)
-                      } catch (err) {
-                        console.log('[bunker] 🔎 Probe nip04 result:', err instanceof Error ? err.message : err)
+                        await withTimeout(nostrConnectAccount.signer.nip04!.encrypt(self, 'probe-nip04'))
+                        await withTimeout(nostrConnectAccount.signer.nip04!.decrypt(self, ''))
+                      } catch (_err) {
+                        // Ignore probe errors
                       }
                     }, 0)
-                  } catch (err) {
-                    console.log('[bunker] 🔎 Probe setup failed:', err)
+                  } catch (_err) {
+                    // Ignore signer setup errors
                   }
                   // The bunker remembers the permissions from the initial connection
                   nostrConnectAccount.signer.isConnected = true
                   
-                  console.log('[bunker] Final signer status:', {
-                    listening: nostrConnectAccount.signer.listening,
-                    isConnected: nostrConnectAccount.signer.isConnected,
-                    remote: nostrConnectAccount.signer.remote,
-                    relays: nostrConnectAccount.signer.relays
-                  })
                   
                   // Mark this account as reconnected
                   reconnectedAccounts.add(account.id)
-                  console.log('[bunker] 🎉 Signer ready for signing')
                 } catch (error) {
-                  console.error('[bunker] ❌ Failed to open signer:', error)
+                  console.error('Failed to open signer:', error)
                 }
               }
             })
       
+      // Handle user relay list and blocked relays when account changes
+      const userRelaysSub = accounts.active$.subscribe((account) => {
+        if (account) {
+          // User logged in - start with hardcoded relays immediately, then stream user relay list updates
+          const pubkey = account.pubkey
+
+          // Bunker relays (if any)
+          let bunkerRelays: string[] = []
+          if (account.type === 'nostr-connect') {
+            const nostrConnectAccount = account as Accounts.NostrConnectAccount<unknown>
+            const signerData = nostrConnectAccount.toJSON().signer
+            bunkerRelays = signerData.relays || []
+          }
+          
+
+          // Start with hardcoded + bunker relays immediately (non-blocking)
+          const initialRelays = computeRelaySet({
+            hardcoded: RELAYS,
+            bunker: bunkerRelays,
+            userList: [],
+            blocked: [],
+            alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+          })
+          
+
+          // Apply initial set immediately
+          applyRelaySetToPool(pool, initialRelays)
+
+          // Prepare keep-alive helper
+          const updateKeepAlive = () => {
+            const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+            if (poolWithSub._keepAliveSubscription) {
+              poolWithSub._keepAliveSubscription.unsubscribe()
+            }
+            const activeRelays = getActiveRelayUrls(pool)
+            const newKeepAliveSub = pool.subscription(activeRelays, { kinds: [0], limit: 0 }).subscribe({
+              next: () => {},
+              error: () => {}
+            })
+            poolWithSub._keepAliveSubscription = newKeepAliveSub
+          }
+
+          // Begin loading blocked relays in background
+          const blockedPromise = loadBlockedRelays(pool, pubkey)
+
+          // Stream user relay list; apply immediately on first/updated event
+          loadUserRelayList(pool, pubkey, {
+            onUpdate: (userRelays) => {
+              const interimRelays = computeRelaySet({
+                hardcoded: HARDCODED_RELAYS,
+                bunker: bunkerRelays,
+                userList: userRelays,
+                blocked: [],
+                alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+              })
+              
+              applyRelaySetToPool(pool, interimRelays)
+              updateKeepAlive()
+            }
+          }).then(async (userRelayList) => {
+            const blockedRelays = await blockedPromise.catch(() => [])
+
+            const finalRelays = computeRelaySet({
+              hardcoded: userRelayList.length > 0 ? HARDCODED_RELAYS : RELAYS,
+              bunker: bunkerRelays,
+              userList: userRelayList,
+              blocked: blockedRelays,
+              alwaysIncludeLocal: ALWAYS_LOCAL_RELAYS
+            })
+            
+            applyRelaySetToPool(pool, finalRelays)
+            
+            updateKeepAlive()
+            
+            // Update address loader with new relays
+            const activeRelays = getActiveRelayUrls(pool)
+            const addressLoader = createAddressLoader(pool, {
+              eventStore: store,
+              lookupRelays: activeRelays
+            })
+            store.addressableLoader = addressLoader
+            store.replaceableLoader = addressLoader
+          }).catch((error) => {
+            console.error('[relay-init] Failed to load user relay list (continuing with initial set):', error)
+            // Continue with initial relay set on error - no need to change anything
+          })
+        } else {
+          // User logged out - reset to hardcoded relays
+          
+          applyRelaySetToPool(pool, RELAYS)
+          
+          
+          // Update keep-alive subscription
+          const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+          if (poolWithSub._keepAliveSubscription) {
+            poolWithSub._keepAliveSubscription.unsubscribe()
+          }
+          const newKeepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
+            next: () => {},
+            error: () => {}
+          })
+          poolWithSub._keepAliveSubscription = newKeepAliveSub
+          
+          // Reset address loader
+          const addressLoader = createAddressLoader(pool, {
+            eventStore: store,
+            lookupRelays: RELAYS
+          })
+          store.addressableLoader = addressLoader
+          store.replaceableLoader = addressLoader
+        }
+      })
+      
       // Keep all relay connections alive indefinitely by creating a persistent subscription
       // This prevents disconnection when no other subscriptions are active
       // Create a minimal subscription that never completes to keep connections alive
       const keepAliveSub = pool.subscription(RELAYS, { kinds: [0], limit: 0 }).subscribe({
-        next: () => {}, // No-op, we don't care about events
-        error: (err) => console.warn('Keep-alive subscription error:', err)
+        next: () => {},
+        error: () => {}
       })
-      console.log('🔗 Created keep-alive subscription for', RELAYS.length, 'relay(s)')
       
       // Store subscription for cleanup
       ;(pool as unknown as { _keepAliveSubscription: typeof keepAliveSub })._keepAliveSubscription = keepAliveSub
@@ -636,6 +717,7 @@ function App() {
         accountsSub.unsubscribe()
         activeSub.unsubscribe()
         bunkerReconnectSub.unsubscribe()
+        userRelaysSub.unsubscribe()
         // Clean up keep-alive subscription if it exists
         const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
         if (poolWithSub._keepAliveSubscription) {
@@ -673,6 +755,16 @@ function App() {
     }
   }, [showToast])
 
+  // Strip _spa query parameter from URL after SPA loads
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    if (url.searchParams.has('_spa')) {
+      url.searchParams.delete('_spa')
+      const path = url.pathname + (url.search ? url.search : '') + url.hash
+      window.history.replaceState(null, '', path)
+    }
+  }, [])
+
   if (!eventStore || !accountManager || !relayPool) {
     return (
       <div className="loading">

src/components/AddBookmarkModal.tsx

@@ -4,41 +4,40 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
 import { fetchReadableContent } from '../services/readerService'
+import { fetch as fetchOpenGraph } from 'fetch-opengraph'
 
 interface AddBookmarkModalProps {
   onClose: () => void
   onSave: (url: string, title?: string, description?: string, tags?: string[]) => Promise<void>
 }
 
-// Helper to extract metadata from HTML
-function extractMetaTag(html: string, patterns: string[]): string | null {
-  for (const pattern of patterns) {
-    const match = html.match(new RegExp(pattern, 'i'))
-    if (match) return match[1]
-  }
-  return null
-}
-
-function extractTags(html: string): string[] {
+// Helper to extract tags from OpenGraph data
+function extractTagsFromOgData(ogData: Record<string, unknown>): string[] {
   const tags: string[] = []
   
-  // Extract keywords meta tag
-  const keywords = extractMetaTag(html, [
-    '<meta\\s+name=["\'"]keywords["\'"]\\s+content=["\'"]([^"\']+)["\']'
-  ])
-  if (keywords) {
-    keywords.split(/[,;]/)
-      .map(k => k.trim().toLowerCase())
-      .filter(k => k.length > 0 && k.length < 30)
-      .forEach(k => tags.push(k))
+  // Extract keywords from OpenGraph data
+  if (ogData.keywords && typeof ogData.keywords === 'string') {
+    ogData.keywords.split(/[,;]/)
+      .map((k: string) => k.trim().toLowerCase())
+      .filter((k: string) => k.length > 0 && k.length < 30)
+      .forEach((k: string) => tags.push(k))
   }
   
-  // Extract article:tag (multiple possible)
-  const articleTagRegex = /<meta\s+property=["']article:tag["']\s+content=["']([^"']+)["']/gi
-  let match
-  while ((match = articleTagRegex.exec(html)) !== null) {
-    const tag = match[1].trim().toLowerCase()
-    if (tag && tag.length < 30) tags.push(tag)
+  // Extract article:tag from OpenGraph data
+  if (ogData['article:tag']) {
+    const articleTagValue = ogData['article:tag']
+    const articleTags = Array.isArray(articleTagValue) 
+      ? articleTagValue 
+      : [articleTagValue]
+    
+    articleTags.forEach((tag: unknown) => {
+      if (typeof tag === 'string') {
+        const cleanTag = tag.trim().toLowerCase()
+        if (cleanTag && cleanTag.length < 30) {
+          tags.push(cleanTag)
+        }
+      }
+    })
   }
   
   return Array.from(new Set(tags)).slice(0, 5)
@@ -83,17 +82,27 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
     fetchTimeoutRef.current = window.setTimeout(async () => {
       setIsFetchingMetadata(true)
       try {
-        const content = await fetchReadableContent(normalizedUrl)
-        lastFetchedUrlRef.current = normalizedUrl
+        // Fetch both readable content and OpenGraph data in parallel
+        const [content, ogData] = await Promise.all([
+          fetchReadableContent(normalizedUrl),
+          fetchOpenGraph(normalizedUrl).catch(() => null) // Don't fail if OpenGraph fetch fails
+        ])
         
+        lastFetchedUrlRef.current = normalizedUrl
         let extractedAnything = false
         
-        // Extract title: prioritize og:title > twitter:title > <title>
-        if (!title && content.html) {
-          const extractedTitle = extractMetaTag(content.html, [
-            '<meta\\s+property=["\'"]og:title["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]twitter:title["\'"]\\s+content=["\'"]([^"\']+)["\']'
-          ]) || content.title
+        // Extract title: prioritize og:title > twitter:title > content.title
+        if (!title) {
+          let extractedTitle = null
+          
+          if (ogData) {
+            extractedTitle = ogData['og:title'] || ogData['twitter:title'] || ogData.title
+          }
+          
+          // Fallback to content.title if no OpenGraph title found
+          if (!extractedTitle) {
+            extractedTitle = content.title
+          }
           
           if (extractedTitle) {
             setTitle(extractedTitle)
@@ -102,12 +111,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
         }
         
         // Extract description: prioritize og:description > twitter:description > meta description
-        if (!description && content.html) {
-          const extractedDesc = extractMetaTag(content.html, [
-            '<meta\\s+property=["\'"]og:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]twitter:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]description["\'"]\\s+content=["\'"]([^"\']+)["\']'
-          ])
+        if (!description && ogData) {
+          const extractedDesc = ogData['og:description'] || ogData['twitter:description'] || ogData.description
           
           if (extractedDesc) {
             setDescription(extractedDesc)
@@ -116,8 +121,8 @@ const AddBookmarkModal: React.FC<AddBookmarkModalProps> = ({ onClose, onSave })
         }
         
         // Extract tags from keywords and article:tag (only if user hasn't modified tags)
-        if (!tagsInput && content.html) {
-          const extractedTags = extractTags(content.html)
+        if (!tagsInput && ogData) {
+          const extractedTags = extractTagsFromOgData(ogData)
           
           // Only add boris tag if we extracted something
           if (extractedAnything || extractedTags.length > 0) {

src/components/ArchiveFilters.tsx

@@ -16,7 +16,7 @@ const ArchiveFilters: React.FC<ArchiveFiltersProps> = ({ selectedFilter, onFilte
     { type: 'to-read' as const, icon: faBookmark, label: 'To Read' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
     { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' },
-    { type: 'marked' as const, icon: faBooks, label: 'Marked as Read' }
+    { type: 'marked' as const, icon: faBooks, label: 'Archived' }
   ]
 
   return (

src/components/AuthorCard.tsx

@@ -5,6 +5,7 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { nip19 } from 'nostr-tools'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface AuthorCardProps {
   authorPubkey: string
@@ -16,9 +17,7 @@ const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey, clickable = true
   const profile = useEventModel(Models.ProfileModel, [authorPubkey])
   
   const getAuthorName = () => {
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
+    return getProfileDisplayName(profile, authorPubkey)
   }
   
   const authorImage = profile?.picture || profile?.image
@@ -27,7 +26,7 @@ const AuthorCard: React.FC<AuthorCardProps> = ({ authorPubkey, clickable = true
   const handleClick = () => {
     if (clickable) {
       const npub = nip19.npubEncode(authorPubkey)
-      navigate(`/p/${npub}`)
+      navigate(`/p/${npub}/writings`)
     }
   }
   

src/components/BlogPostCard.tsx

@@ -6,18 +6,32 @@ import { formatDistance } from 'date-fns'
 import { BlogPostPreview } from '../services/exploreService'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
+import { isKnownBot } from '../config/bots'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface BlogPostCardProps {
   post: BlogPostPreview
   href: string
   level?: 'mine' | 'friends' | 'nostrverse'
   readingProgress?: number // 0-1 reading progress (optional)
+  hideBotByName?: boolean // default true
 }
 
-const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress }) => {
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress, hideBotByName = true }) => {
   const profile = useEventModel(Models.ProfileModel, [post.author])
-  const displayName = profile?.name || profile?.display_name || 
-    `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
+  
+  // Note: Images are lazy-loaded (loading="lazy" below), so they'll be fetched
+  // when they come into view. The Service Worker will cache them automatically.
+  // No need to preload all images at once - this causes ERR_INSUFFICIENT_RESOURCES
+  // when there are many blog posts.
+  
+  const displayName = getProfileDisplayName(profile, post.author)
+  const rawName = (profile?.name || profile?.display_name || '').toLowerCase()
+
+  // Hide bot authors by name/display_name
+  if (hideBotByName && (rawName.includes('bot') || isKnownBot(post.author))) {
+    return null
+  }
   
   const publishedDate = post.published || post.event.created_at
   const formattedDate = formatDistance(new Date(publishedDate * 1000), new Date(), { 
@@ -34,9 +48,22 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
     progressColor = 'var(--color-text)' // Neutral text color (started)
   }
 
+  // Debug log - reading progress shown as visual indicator
+  if (readingProgress !== undefined) {
+    // Reading progress display
+  }
+
   return (
     <Link 
       to={href}
+      state={{ 
+        previewData: {
+          title: post.title,
+          image: post.image,
+          summary: post.summary,
+          published: post.published
+        }
+      }}
       className={`blog-post-card ${level ? `level-${level}` : ''}`}
       style={{ textDecoration: 'none', color: 'inherit' }}
     >

src/components/BookmarkItem.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
 import { faGlobe, faLink } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
-import { npubEncode, neventEncode } from 'nostr-tools/nip19'
+import { npubEncode, naddrEncode } from 'nostr-tools/nip19'
 import { IndividualBookmark } from '../types/bookmarks'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { classifyUrl } from '../utils/helpers'
 import { ViewMode } from './Bookmarks'
 import { getPreviewImage, fetchOgImage } from '../utils/imagePreview'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 import { CompactView } from './BookmarkViews/CompactView'
 import { LargeView } from './BookmarkViews/LargeView'
 import { CardView } from './BookmarkViews/CardView'
@@ -19,9 +21,11 @@ interface BookmarkItemProps {
   index: number
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   viewMode?: ViewMode
+  readingProgress?: number
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
+  const navigate = useNavigate()
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -39,10 +43,11 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassification = firstUrl ? classifyUrl(firstUrl) : null
   
-  // For kind:30023 articles, extract image and summary tags (per NIP-23)
+  // For kind:30023 articles, extract title, image and summary tags (per NIP-23)
   // Note: We extract directly from tags here since we don't have the full event.
   // When we have full events, we use getArticleImage() helper (see articleService.ts)
   const isArticle = bookmark.kind === 30023
+  const articleTitle = isArticle ? bookmark.tags.find(t => t[0] === 'title')?.[1] : undefined
   const articleImage = isArticle ? bookmark.tags.find(t => t[0] === 'image')?.[1] : undefined
   const articleSummary = isArticle ? bookmark.tags.find(t => t[0] === 'summary')?.[1] : undefined
   
@@ -57,15 +62,16 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   // Resolve author profile using applesauce
   const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
   const authorNpub = npubEncode(bookmark.pubkey)
-  const isHexId = /^[0-9a-f]{64}$/i.test(bookmark.id)
-  const eventNevent = isHexId ? neventEncode({ id: bookmark.id }) : undefined
   
-  // Get display name for author
+  // Get display name for author using centralized utility
   const getAuthorDisplayName = () => {
-    if (authorProfile?.name) return authorProfile.name
-    if (authorProfile?.display_name) return authorProfile.display_name
-    if (authorProfile?.nip05) return authorProfile.nip05
-    return short(bookmark.pubkey) // fallback to short pubkey
+    const displayName = getProfileDisplayName(authorProfile, bookmark.pubkey)
+    // getProfileDisplayName returns npub format for fallback, but we want short pubkey format
+    // So check if it's the fallback format and use short() instead
+    if (displayName.startsWith('@') && displayName.includes('...')) {
+      return short(bookmark.pubkey)
+    }
+    return displayName
   }
 
   // Get content type icon based on bookmark kind and URL classification
@@ -109,10 +115,16 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   const handleReadNow = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
     
-    // For kind:30023 articles, pass the bookmark data instead of URL
+    // For kind:30023 articles, navigate to /a/:naddr route
     if (bookmark.kind === 30023) {
-      if (onSelectUrl) {
-        onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
       }
       return
     }
@@ -134,17 +146,25 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     extractedUrls,
     onSelectUrl,
     authorNpub,
-    eventNevent,
     getAuthorDisplayName,
     handleReadNow,
     articleImage,
     articleSummary,
-    contentTypeIcon: getContentTypeIcon()
+    contentTypeIcon: getContentTypeIcon(),
+    readingProgress
   }
 
   if (viewMode === 'compact') {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-    const { articleImage, ...compactProps } = sharedProps
+    const compactProps = {
+      bookmark,
+      index,
+      hasUrls,
+      extractedUrls,
+      onSelectUrl,
+      articleTitle,
+      contentTypeIcon: getContentTypeIcon(),
+      readingProgress
+    }
     return <CompactView {...compactProps} />
   }
 
@@ -153,5 +173,5 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     return <LargeView {...sharedProps} getIconForUrlType={getIconForUrlType} previewImage={previewImage} />
   }
 
-  return <CardView {...sharedProps} articleImage={articleImage} />
+  return <CardView {...sharedProps} articleImage={articleImage} articleTitle={articleTitle} />
 }

src/components/BookmarkList.tsx

@@ -1,8 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faRotate, faHeart, faPlus, faLayerGroup, faBars } from '@fortawesome/free-solid-svg-icons'
-import { formatDistanceToNow } from 'date-fns'
+import { faChevronLeft, faBookmark, faList, faThLarge, faImage, faHeart, faPlus, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
@@ -13,15 +13,19 @@ import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
-import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet, hasCreationDate, sortIndividualBookmarks } from '../utils/bookmarkUtils'
 import { UserSettings } from '../services/settingsService'
 import AddBookmarkModal from './AddBookmarkModal'
 import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'
 import { Hooks } from 'applesauce-react'
+import { getActiveRelayUrls } from '../services/relayManager'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import LoginOptions from './LoginOptions'
+import { useEffect } from 'react'
+import { readingProgressController } from '../services/readingProgressController'
+import { nip19 } from 'nostr-tools'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -54,7 +58,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onOpenSettings,
   onRefresh,
   isRefreshing,
-  lastFetchTime,
   loading = false,
   relayPool,
   isMobile = false,
@@ -67,9 +70,59 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   const [selectedFilter, setSelectedFilter] = useState<BookmarkFilterType>('all')
   const [groupingMode, setGroupingMode] = useState<'grouped' | 'flat'>(() => {
     const saved = localStorage.getItem('bookmarkGroupingMode')
-    return saved === 'flat' ? 'flat' : 'grouped'
+    return saved === 'grouped' ? 'grouped' : 'flat'
   })
   const activeAccount = Hooks.useActiveAccount()
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+
+  // Subscribe to reading progress updates
+  useEffect(() => {
+    // Get initial progress map
+    setReadingProgressMap(readingProgressController.getProgressMap())
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress(setReadingProgressMap)
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+
+  // Helper to get reading progress for a bookmark
+  const getBookmarkReadingProgress = (bookmark: IndividualBookmark): number | undefined => {
+    if (bookmark.kind === 30023) {
+      // For articles, use naddr as key
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (!dTag) return undefined
+      try {
+        const naddr = nip19.naddrEncode({
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return readingProgressMap.get(naddr)
+      } catch (err) {
+        return undefined
+      }
+    }
+    
+    // For web bookmarks (kind:39701), URL is in the 'd' tag
+    if (bookmark.kind === 39701) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        // Ensure URL has protocol
+        const url = dTag.startsWith('http') ? dTag : `https://${dTag}`
+        return readingProgressMap.get(url)
+      }
+    }
+    
+    // For other bookmark types, try to extract URL from content
+    const urls = extractUrlsFromContent(bookmark.content)
+    if (urls.length > 0) {
+      return readingProgressMap.get(urls[0])
+    }
+    return undefined
+  }
 
   const toggleGroupingMode = () => {
     const newMode = groupingMode === 'grouped' ? 'flat' : 'grouped'
@@ -77,12 +130,24 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     localStorage.setItem('bookmarkGroupingMode', newMode)
   }
 
+  const getFilterTitle = (filter: BookmarkFilterType): string => {
+    const titles: Record<BookmarkFilterType, string> = {
+      'all': 'All Bookmarks',
+      'article': 'Bookmarked Reads',
+      'external': 'Bookmarked Links',
+      'video': 'Bookmarked Videos',
+      'note': 'Bookmarked Notes',
+      'web': 'Web Bookmarks'
+    }
+    return titles[filter]
+  }
+
   const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
     if (!activeAccount || !relayPool) {
       throw new Error('Please login to create bookmarks')
     }
 
-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, getActiveRelayUrls(relayPool))
   }
 
   // Pull-to-refresh for bookmarks
@@ -97,38 +162,58 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     isDisabled: !onRefresh
   })
 
-  // Merge and flatten all individual bookmarks from all lists
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(hasContent)
+  // Merge and flatten all individual bookmarks from all lists - memoized to ensure consistent sorting
+  const sections = useMemo(() => {
+    const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+      .filter(hasContent)
+      .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
+    
+    // Apply filter
+    const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
+    
+    // Separate bookmarks with setName (kind 30003) from regular bookmarks
+    const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
+    const bookmarkSets = getBookmarkSets(filteredBookmarks)
+    
+    // Group non-set bookmarks by source or flatten based on mode
+    const groups = groupIndividualBookmarks(bookmarksWithoutSet)
+    const sectionsArray: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
+      groupingMode === 'flat'
+        ? [{ key: 'all', title: getFilterTitle(selectedFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
+        : [
+            { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb },
+            { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
+            { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
+            { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+            { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic }
+          ]
+    
+    // Add bookmark sets as additional sections (only in grouped mode)
+    if (groupingMode === 'grouped') {
+      bookmarkSets.forEach(set => {
+        sectionsArray.push({
+          key: `set-${set.name}`,
+          title: set.title || set.name,
+          items: set.bookmarks
+        })
+      })
+    }
+    
+    return sectionsArray
+  }, [bookmarks, selectedFilter, groupingMode, settings?.hideBookmarksWithoutCreationDate])
   
-  // Apply filter
-  const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
+  // Get all filtered bookmarks for empty state checks
+  const allIndividualBookmarks = useMemo(() => 
+    bookmarks.flatMap(b => b.individualBookmarks || [])
+      .filter(hasContent)
+      .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b)),
+    [bookmarks, settings?.hideBookmarksWithoutCreationDate]
+  )
   
-  // Separate bookmarks with setName (kind 30003) from regular bookmarks
-  const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
-  const bookmarkSets = getBookmarkSets(filteredBookmarks)
-  
-  // Group non-set bookmarks by source or flatten based on mode
-  const groups = groupIndividualBookmarks(bookmarksWithoutSet)
-  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
-    groupingMode === 'flat'
-      ? [{ key: 'all', title: `All Bookmarks (${bookmarksWithoutSet.length})`, items: bookmarksWithoutSet }]
-      : [
-          { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
-          { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
-          { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
-        ]
-  
-  // Add bookmark sets as additional sections
-  bookmarkSets.forEach(set => {
-    sections.push({
-      key: `set-${set.name}`,
-      title: set.title || set.name,
-      items: set.bookmarks
-    })
-  })
+  const filteredBookmarks = useMemo(() => 
+    filterBookmarksByType(allIndividualBookmarks, selectedFilter),
+    [allIndividualBookmarks, selectedFilter]
+  )
   
   if (isCollapsed) {
     // Check if the selected URL is in bookmarks
@@ -162,10 +247,19 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       />
       
       {allIndividualBookmarks.length > 0 && (
-        <BookmarkFilters
-          selectedFilter={selectedFilter}
-          onFilterChange={setSelectedFilter}
-        />
+        <div className="bookmark-filters-wrapper">
+          <BookmarkFilters
+            selectedFilter={selectedFilter}
+            onFilterChange={setSelectedFilter}
+          />
+          <CompactButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add web bookmark"
+            ariaLabel="Add web bookmark"
+            className="bookmark-section-action"
+          />
+        </div>
       )}
       
       {!activeAccount ? (
@@ -202,15 +296,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
             <div key={section.key} className="bookmarks-section">
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <h3 className="bookmarks-section-title" style={{ margin: 0, padding: '1.5rem 0.5rem 0.375rem', flex: 1 }}>{section.title}</h3>
-                {section.key === 'web' && activeAccount && (
-                  <CompactButton
-                    icon={faPlus}
-                    onClick={() => setShowAddModal(true)}
-                    title="Add web bookmark"
-                    ariaLabel="Add web bookmark"
-                    className="bookmark-section-action"
-                  />
-                )}
               </div>
               <div className={`bookmarks-grid bookmarks-${viewMode}`}>
                 {section.items.map((individualBookmark, index) => (
@@ -220,6 +305,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                     index={index} 
                     onSelectUrl={onSelectUrl}
                     viewMode={viewMode}
+                    readingProgress={getBookmarkReadingProgress(individualBookmark)}
                   />
                 ))}
               </div>
@@ -237,27 +323,18 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
             variant="ghost"
             style={{ color: friendsColor }}
           />
-        </div>
-        {activeAccount && (
-          <div className="view-mode-right">
-            {onRefresh && (
-              <IconButton
-                icon={faRotate}
-                onClick={onRefresh}
-                title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
-                ariaLabel="Refresh bookmarks"
-                variant="ghost"
-                disabled={isRefreshing}
-                spin={isRefreshing}
-              />
-            )}
+          {activeAccount && (
             <IconButton
-              icon={groupingMode === 'grouped' ? faLayerGroup : faBars}
+              icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
               onClick={toggleGroupingMode}
               title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
               ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
               variant="ghost"
             />
+          )}
+        </div>
+        {activeAccount && (
+          <div className="view-mode-right">
             <IconButton
               icon={faList}
               onClick={() => onViewModeChange('compact')}

src/components/BookmarkViews/CardView.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { faNewspaper, faStickyNote, faCirclePlay, faCamera, faFileLines } from '@fortawesome/free-regular-svg-icons'
+import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { classifyUrl } from '../../utils/helpers'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
-import { getEventUrl } from '../../config/nostrGateways'
+import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface CardViewProps {
   bookmark: IndividualBookmark
@@ -18,12 +20,12 @@ interface CardViewProps {
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   authorNpub: string
-  eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleImage?: string
   articleSummary?: string
-  contentTypeIcon: IconDefinition
+  articleTitle?: string
+  readingProgress?: number
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -31,26 +33,53 @@ export const CardView: React.FC<CardViewProps> = ({
   index,
   hasUrls,
   extractedUrls,
-  onSelectUrl,
   authorNpub,
-  eventNevent,
   getAuthorDisplayName,
   handleReadNow,
   articleImage,
   articleSummary,
-  contentTypeIcon
+  articleTitle,
+  readingProgress
 }) => {
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
   const instantPreview = firstUrl ? getPreviewImage(firstUrl, firstUrlClassificationType || '') : null
   
   const [ogImage, setOgImage] = useState<string | null>(null)
-  const [expanded, setExpanded] = useState(false)
-  const [urlsExpanded, setUrlsExpanded] = useState(false)
   
-  const contentLength = (bookmark.content || '').length
-  const shouldTruncate = !expanded && contentLength > 210
   const isArticle = bookmark.kind === 30023
+  const isWebBookmark = bookmark.kind === 39701
+  const isNote = bookmark.kind === 1
+  
+  // Extract title from tags for regular bookmarks (not just articles)
+  const bookmarkTitle = bookmark.tags.find(t => t[0] === 'title')?.[1]
+  
+  // Get content type icon based on bookmark kind and URL classification
+  const getContentTypeIcon = () => {
+    if (isArticle) return faNewspaper // Nostr-native article
+    
+    // For web bookmarks, classify the URL to determine icon
+    if (isWebBookmark && firstUrlClassificationType) {
+      switch (firstUrlClassificationType) {
+        case 'youtube':
+        case 'video':
+          return faCirclePlay
+        case 'image':
+          return faCamera
+        case 'article':
+          return faFileLines
+        default:
+          return faGlobe
+      }
+    }
+    
+    // For notes, use sticky note icon
+    if (isNote) return faStickyNote
+    
+    // Default fallback
+    return faLink
+  }
+  
   
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
@@ -63,6 +92,7 @@ export const CardView: React.FC<CardViewProps> = ({
     }
   }, [firstUrl, articleImage, instantPreview, ogImage])
 
+
   const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
@@ -72,109 +102,113 @@ export const CardView: React.FC<CardViewProps> = ({
     }
   }
 
+  // Get internal route for the bookmark
+  const getInternalRoute = (): string | null => {
+    if (bookmark.kind === 30023) {
+      // Nostr-native article - use /a/ route
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return `/a/${naddr}`
+      }
+    } else if (bookmark.kind === 1) {
+      // Note - use /e/ route
+      return `/e/${bookmark.id}`
+    } else if (firstUrl) {
+      // External URL - use /r/ route
+      return `/r/${encodeURIComponent(firstUrl)}`
+    }
+    return null
+  }
+
   return (
     <div 
       key={`${bookmark.id}-${index}`}
-      className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
+      className={`individual-bookmark card-view ${bookmark.isPrivate ? 'private-bookmark' : ''}`}
       onClick={triggerOpen}
       role="button"
       tabIndex={0}
       onKeyDown={handleKeyDown}
     >
-      {cachedImage && (
-        <div 
-          className="article-hero-image"
-          style={{ backgroundImage: `url(${cachedImage})` }}
-          onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
-        />
-      )}
-      <div className="bookmark-header">
-        <span className="bookmark-type">
-          <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
-        </span>
-        
-        {eventNevent ? (
-          <a
-            href={getEventUrl(eventNevent)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="bookmark-date-link"
-            title="Open event in search"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {formatDate(bookmark.created_at)}
-          </a>
-        ) : (
-          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
-        )}
-      </div>
-      
-      {extractedUrls.length > 0 && (
-        <div className="bookmark-urls">
-          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
-            return (
-              <button
-                key={urlIndex}
-                className="bookmark-url"
-                onClick={(e) => { e.stopPropagation(); onSelectUrl?.(url) }}
-                title="Open in reader"
+      <div className="card-layout">
+        <div className="card-content">
+          <div className="card-content-header">
+            {(cachedImage || firstUrl) && (
+              <div 
+                className="card-thumbnail"
+                style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
+                onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
               >
-                {url}
-              </button>
-            )
-          })}
-          {extractedUrls.length > 1 && (
-            <button
-              className="expand-toggle-urls"
-              onClick={(e) => { e.stopPropagation(); setUrlsExpanded(v => !v) }}
-              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
-              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+            {!cachedImage && firstUrl && (
+              <div className="thumbnail-placeholder">
+                <FontAwesomeIcon icon={getContentTypeIcon()} />
+              </div>
+            )}
+              </div>
+            )}
+            <div className="card-text-content">
+        <div className="bookmark-header">
+        </div>
+        
+        {/* Display title for articles or bookmarks with titles */}
+        {(articleTitle || bookmarkTitle) && (
+          <h3 className="bookmark-title">
+            <RichContent content={articleTitle || bookmarkTitle || ''} className="" />
+          </h3>
+        )}
+        
+        {isArticle && articleSummary ? (
+          <RichContent content={articleSummary} className="bookmark-content article-summary" />
+        ) : bookmark.parsedContent ? (
+          <div className="bookmark-content">
+            {renderParsedContent(bookmark.parsedContent)}
+          </div>
+        ) : bookmark.content && (
+          <RichContent content={bookmark.content} className="bookmark-content" />
+        )}
+        
+            </div>
+          </div>
+        </div>
+        
+        {/* Reading progress indicator as separator - always shown for all bookmark types */}
+        <ReadingProgressBar 
+          readingProgress={readingProgress}
+          height={1}
+          marginTop="0.125rem"
+          marginBottom="0.125rem"
+        />
+        
+        <div className="bookmark-footer">
+          <div className="bookmark-meta-minimal">
+            <Link
+              to={`/p/${authorNpub}`}
+              className="author-link-minimal"
+              title="Open author profile"
+              onClick={(e) => e.stopPropagation()}
             >
-              {urlsExpanded ? `Hide ${extractedUrls.length - 1} more` : `Show ${extractedUrls.length - 1} more`}
-            </button>
-          )}
+              {getAuthorDisplayName()}
+            </Link>
+          </div>
+          <div className="bookmark-footer-right">
+            {getInternalRoute() ? (
+              <Link
+                to={getInternalRoute()!}
+                className="bookmark-date-link"
+                title="Open in app"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
+              </Link>
+            ) : (
+              <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
+            )}
+          </div>
         </div>
-      )}
-      
-      {isArticle && articleSummary ? (
-        <div className="bookmark-content article-summary">
-          <ContentWithResolvedProfiles content={articleSummary} />
-        </div>
-      ) : bookmark.parsedContent ? (
-        <div className="bookmark-content">
-          {shouldTruncate && bookmark.content
-            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
-            : renderParsedContent(bookmark.parsedContent)}
-        </div>
-      ) : bookmark.content && (
-        <div className="bookmark-content">
-          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-        </div>
-      )}
-
-      {contentLength > 210 && (
-        <button
-          className="expand-toggle"
-          onClick={(e) => { e.stopPropagation(); setExpanded(v => !v) }}
-          aria-label={expanded ? 'Collapse' : 'Expand'}
-          title={expanded ? 'Collapse' : 'Expand'}
-        >
-          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
-        </button>
-      )}
-      
-      <div className="bookmark-footer">
-        <div className="bookmark-meta-minimal">
-          <Link
-            to={`/p/${authorNpub}`}
-            className="author-link-minimal"
-            title="Open author profile"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {getAuthorDisplayName()}
-          </Link>
-        </div>
-        {/* CTA removed */}
       </div>
     </div>
   )

src/components/BookmarkViews/CompactView.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
+import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -11,8 +14,9 @@ interface CompactViewProps {
   hasUrls: boolean
   extractedUrls: string[]
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
-  articleSummary?: string
+  articleTitle?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CompactView: React.FC<CompactViewProps> = ({
@@ -21,28 +25,37 @@ export const CompactView: React.FC<CompactViewProps> = ({
   hasUrls,
   extractedUrls,
   onSelectUrl,
-  articleSummary,
-  contentTypeIcon
+  articleTitle,
+  contentTypeIcon,
+  readingProgress
 }) => {
+  const navigate = useNavigate()
   const isArticle = bookmark.kind === 30023
   const isWebBookmark = bookmark.kind === 39701
-  const isClickable = hasUrls || isArticle || isWebBookmark
+  const isNote = bookmark.kind === 1
+  const isClickable = hasUrls || isArticle || isWebBookmark || isNote
   
+  const displayText = isArticle && articleTitle ? articleTitle : bookmark.content
+
+
   const handleCompactClick = () => {
-    if (!onSelectUrl) return
-    
     if (isArticle) {
-      onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
+      }
     } else if (hasUrls) {
-      onSelectUrl(extractedUrls[0])
+      onSelectUrl?.(extractedUrls[0])
+    } else if (isNote) {
+      navigate(`/e/${bookmark.id}`)
     }
   }
 
-  // For articles, prefer summary; for others, use content
-  const displayText = isArticle && articleSummary 
-    ? articleSummary 
-    : bookmark.content
-
   return (
     <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
       <div 
@@ -54,14 +67,27 @@ export const CompactView: React.FC<CompactViewProps> = ({
         <span className="bookmark-type-compact">
           <FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
         </span>
-        {displayText && (
+        {displayText ? (
           <div className="compact-text">
-            <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
+            <RichContent content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} className="" />
+          </div>
+        ) : (
+          <div className="compact-text" style={{ opacity: 0.5, fontSize: '0.85em' }}>
+            <code>{bookmark.id.slice(0, 12)}...</code>
           </div>
         )}
-        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
+        <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
         {/* CTA removed */}
       </div>
+      
+      {/* Reading progress indicator - only show when there's actual progress */}
+      {readingProgress !== undefined && readingProgress > 0 && (
+        <ReadingProgressBar 
+          readingProgress={readingProgress}
+          height={1}
+          marginLeft="1.5rem"
+        />
+      )}
     </div>
   )
 }

src/components/BookmarkViews/LargeView.tsx

@@ -4,10 +4,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
-import { getEventUrl } from '../../config/nostrGateways'
+import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface LargeViewProps {
   bookmark: IndividualBookmark
@@ -18,7 +19,6 @@ interface LargeViewProps {
   getIconForUrlType: IconGetter
   previewImage: string | null
   authorNpub: string
-  eventNevent?: string
   getAuthorDisplayName: () => string
   handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
   articleSummary?: string
@@ -35,7 +35,6 @@ export const LargeView: React.FC<LargeViewProps> = ({
   getIconForUrlType,
   previewImage,
   authorNpub,
-  eventNevent,
   getAuthorDisplayName,
   handleReadNow,
   articleSummary,
@@ -45,15 +44,6 @@ export const LargeView: React.FC<LargeViewProps> = ({
   const cachedImage = useImageCache(previewImage || undefined)
   const isArticle = bookmark.kind === 30023
   
-  // Calculate progress display (matching readingProgressUtils.ts logic)
-  const progressPercent = readingProgress ? Math.round(readingProgress * 100) : 0
-  let progressColor = '#6366f1' // Default blue (reading)
-  
-  if (readingProgress && readingProgress >= 0.95) {
-    progressColor = '#10b981' // Green (completed)
-  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
-    progressColor = 'var(--color-text)' // Neutral text color (started)
-  }
   
   const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
@@ -63,6 +53,30 @@ export const LargeView: React.FC<LargeViewProps> = ({
     }
   }
 
+  // Get internal route for the bookmark
+  const getInternalRoute = (): string | null => {
+    const firstUrl = hasUrls ? extractedUrls[0] : null
+    if (bookmark.kind === 30023) {
+      // Nostr-native article - use /a/ route
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return `/a/${naddr}`
+      }
+    } else if (bookmark.kind === 1) {
+      // Note - use /e/ route
+      return `/e/${bookmark.id}`
+    } else if (firstUrl) {
+      // External URL - use /r/ route
+      return `/r/${encodeURIComponent(firstUrl)}`
+    }
+    return null
+  }
+
   return (
     <div 
       key={`${bookmark.id}-${index}`} 
@@ -95,36 +109,17 @@ export const LargeView: React.FC<LargeViewProps> = ({
       
       <div className="large-content">
         {isArticle && articleSummary ? (
-          <div className="large-text article-summary">
-            <ContentWithResolvedProfiles content={articleSummary} />
-          </div>
+          <RichContent content={articleSummary} className="large-text article-summary" />
         ) : bookmark.content && (
-          <div className="large-text">
-            <ContentWithResolvedProfiles content={bookmark.content} />
-          </div>
+          <RichContent content={bookmark.content} className="large-text" />
         )}
         
-        {/* Reading progress indicator for articles - shown only if there's progress */}
-        {isArticle && readingProgress !== undefined && readingProgress > 0 && (
-          <div 
-            style={{
-              height: '3px',
-              width: '100%',
-              background: 'var(--color-border)',
-              overflow: 'hidden',
-              marginTop: '0.75rem'
-            }}
-          >
-            <div
-              style={{
-                height: '100%',
-                width: `${progressPercent}%`,
-                background: progressColor,
-                transition: 'width 0.3s ease, background 0.3s ease'
-              }}
-            />
-          </div>
-        )}
+        {/* Reading progress indicator for all bookmark types - always shown */}
+        <ReadingProgressBar 
+          readingProgress={readingProgress}
+          height={3}
+          marginTop="0.75rem"
+        />
         
         <div className="large-footer">
           <span className="bookmark-type-large">
@@ -140,16 +135,17 @@ export const LargeView: React.FC<LargeViewProps> = ({
             </Link>
           </span>
           
-          {eventNevent && (
-            <a
-              href={getEventUrl(eventNevent)}
-              target="_blank"
-              rel="noopener noreferrer"
+          {getInternalRoute() ? (
+            <Link
+              to={getInternalRoute()!}
               className="bookmark-date-link"
+              title="Open in app"
               onClick={(e) => e.stopPropagation()}
             >
-              {formatDate(bookmark.created_at)}
-            </a>
+              {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
+            </Link>
+          ) : (
+            <span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
           )}
           
           {/* CTA removed */}

src/components/Bookmarks.tsx

@@ -2,8 +2,11 @@ import React, { useMemo, useEffect, useRef } from 'react'
 import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import { Hooks } from 'applesauce-react'
 import { useEventStore } from 'applesauce-react/hooks'
+import { Helpers } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
+
+const { getPubkeyFromDecodeResult } = Helpers
 import { useSettings } from '../hooks/useSettings'
 import { useArticleLoader } from '../hooks/useArticleLoader'
 import { useExternalUrlLoader } from '../hooks/useExternalUrlLoader'
@@ -13,10 +16,13 @@ import { useHighlightCreation } from '../hooks/useHighlightCreation'
 import { useBookmarksUI } from '../hooks/useBookmarksUI'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { useOfflineSync } from '../hooks/useOfflineSync'
+import { useEventLoader } from '../hooks/useEventLoader'
+import { useDocumentTitle } from '../hooks/useDocumentTitle'
 import { Bookmark } from '../types/bookmarks'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
 import Me from './Me'
+import Profile from './Profile'
 import Support from './Support'
 import { classifyHighlights } from '../utils/highlightClassification'
 
@@ -37,7 +43,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   bookmarksLoading, 
   onRefreshBookmarks
 }) => {
-  const { naddr, npub } = useParams<{ naddr?: string; npub?: string }>()
+  const { naddr, npub, eventId: eventIdParam } = useParams<{ naddr?: string; npub?: string; eventId?: string }>()
   const location = useLocation()
   const navigate = useNavigate()
   const previousLocationRef = useRef<string>()
@@ -51,45 +57,59 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   
   const showSettings = location.pathname === '/settings'
   const showExplore = location.pathname.startsWith('/explore')
-  const showMe = location.pathname.startsWith('/me')
+  const showMe = location.pathname.startsWith('/my')
   const showProfile = location.pathname.startsWith('/p/')
   const showSupport = location.pathname === '/support'
+  const eventId = eventIdParam
+  
+  // Manage document title based on current route
+  const isViewingContent = !!(naddr || externalUrl || eventId)
+  useDocumentTitle({ 
+    title: isViewingContent ? undefined : 'Boris - Read, Highlight, Explore'
+  })
   
   // Extract tab from explore routes
   const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
   
   // Extract tab from me routes
-  const meTab = location.pathname === '/me' ? 'highlights' : 
-                location.pathname === '/me/highlights' ? 'highlights' :
-                location.pathname === '/me/reading-list' ? 'reading-list' :
-                location.pathname.startsWith('/me/reads') ? 'reads' :
-                location.pathname === '/me/links' ? 'links' :
-                location.pathname === '/me/writings' ? 'writings' : 'highlights'
+  const meTab = location.pathname === '/my' ? 'highlights' : 
+                location.pathname === '/my/highlights' ? 'highlights' :
+                location.pathname === '/my/bookmarks' ? 'bookmarks' :
+                location.pathname.startsWith('/my/reads') ? 'reads' :
+                location.pathname.startsWith('/my/links') ? 'links' :
+                location.pathname === '/my/writings' ? 'writings' : 'highlights'
   
   // Extract tab from profile routes
   const profileTab = location.pathname.endsWith('/writings') ? 'writings' : 'highlights'
   
-  // Decode npub or nprofile to pubkey for profile view
+  // Decode npub or nprofile to pubkey for profile view using applesauce helper
   let profilePubkey: string | undefined
   if (npub && showProfile) {
     try {
       const decoded = nip19.decode(npub)
-      if (decoded.type === 'npub') {
-        profilePubkey = decoded.data
-      } else if (decoded.type === 'nprofile') {
-        profilePubkey = decoded.data.pubkey
-      }
+      profilePubkey = getPubkeyFromDecodeResult(decoded)
     } catch (err) {
       console.error('Failed to decode npub/nprofile:', err)
     }
   }
   
-  // Track previous location for going back from settings/me/explore/profile
+  // Track previous location for going back from settings/my/explore/profile
   useEffect(() => {
     if (!showSettings && !showMe && !showExplore && !showProfile) {
       previousLocationRef.current = location.pathname
     }
   }, [location.pathname, showSettings, showMe, showExplore, showProfile])
+
+  // Reset scroll to top when navigating to profile routes
+  useEffect(() => {
+    if (showProfile) {
+      // Reset scroll position when navigating to profile pages
+      // Use requestAnimationFrame to ensure it happens after DOM updates
+      requestAnimationFrame(() => {
+        window.scrollTo({ top: 0, behavior: 'instant' })
+      })
+    }
+  }, [location.pathname, showProfile])
     
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -219,14 +239,28 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     currentArticle,
     selectedUrl,
     readerContent,
-    onHighlightCreated: (highlight) => setHighlights(prev => [highlight, ...prev]),
+    onHighlightCreated: (highlight) => setHighlights(prev => {
+      // Deduplicate by checking if highlight with this ID already exists
+      const exists = prev.some(h => h.id === highlight.id)
+      if (exists) {
+        return prev // Don't add duplicate
+      }
+      return [highlight, ...prev]
+    }),
     settings
   })
 
+  // Determine which loader should be active based on route
+  // Only one loader should run at a time to prevent state conflicts
+  const shouldLoadArticle = !!naddr && !externalUrl && !eventId
+  const shouldLoadExternal = !!externalUrl && !naddr && !eventId  
+  const shouldLoadEvent = !!eventId && !naddr && !externalUrl
+
   // Load nostr-native article if naddr is in URL
   useArticleLoader({
-    naddr,
+    naddr: shouldLoadArticle ? naddr : undefined,
     relayPool,
+    eventStore,
     setSelectedUrl,
     setReaderContent,
     setReaderLoading,
@@ -241,7 +275,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   
   // Load external URL if /r/* route is used
   useExternalUrlLoader({
-    url: externalUrl,
+    url: shouldLoadExternal ? externalUrl : undefined,
     relayPool,
     eventStore,
     setSelectedUrl,
@@ -254,6 +288,17 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     setCurrentArticleEventId
   })
 
+  // Load event if /e/:eventId route is used
+  useEventLoader({
+    eventId: shouldLoadEvent ? eventId : undefined,
+    relayPool,
+    eventStore,
+    setSelectedUrl,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed
+  })
+
   // Classify highlights with levels based on user context
   const classifiedHighlights = useMemo(() => {
     return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)
@@ -327,10 +372,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({
         relayPool ? <Explore relayPool={relayPool} eventStore={eventStore} settings={settings} activeTab={exploreTab} /> : null
       ) : undefined}
       me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} settings={settings} /> : null
       ) : undefined}
       profile={showProfile && profilePubkey ? (
-        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={profileTab} pubkey={profilePubkey} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Profile relayPool={relayPool} eventStore={eventStore} pubkey={profilePubkey} activeTab={profileTab} /> : null
       ) : undefined}
       support={showSupport ? (
         relayPool ? <Support relayPool={relayPool} eventStore={eventStore} settings={settings} /> : null

src/components/ColorPicker.tsx

@@ -4,19 +4,20 @@ import { HIGHLIGHT_COLORS } from '../utils/colorHelpers'
 interface ColorPickerProps {
   selectedColor: string
   onColorChange: (color: string) => void
+  colors?: typeof HIGHLIGHT_COLORS
 }
 
-const ColorPicker: React.FC<ColorPickerProps> = ({ selectedColor, onColorChange }) => {
+const ColorPicker: React.FC<ColorPickerProps> = ({ selectedColor, onColorChange, colors = HIGHLIGHT_COLORS }) => {
   return (
     <div className="color-picker">
-      {HIGHLIGHT_COLORS.map(color => (
+      {colors.map(color => (
         <button
           key={color.value}
           onClick={() => onColorChange(color.value)}
           className={`color-swatch ${selectedColor === color.value ? 'active' : ''}`}
           style={{ backgroundColor: color.value }}
           title={color.name}
-          aria-label={`${color.name} highlight color`}
+          aria-label={`${color.name} color`}
         />
       ))}
     </div>

src/components/ContentPanel.tsx

@@ -1,17 +1,17 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react'
-import ReactPlayer from 'react-player'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypePrism from 'rehype-prism-plus'
+import VideoEmbedProcessor from './VideoEmbedProcessor'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'prismjs/themes/prism-tomorrow.css'
 import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { ContentSkeleton } from './Skeletons'
 import { nip19 } from 'nostr-tools'
 import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
-import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
@@ -29,20 +29,21 @@ import {
   hasMarkedEventAsRead,
   hasMarkedWebsiteAsRead
 } from '../services/reactionService'
+import { unarchiveEvent, unarchiveWebsite } from '../services/unarchiveService'
+import { archiveController } from '../services/archiveController'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
-import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl } from '../utils/helpers'
-import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { shouldTrackReadingProgress } from '../utils/helpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
 import { EventFactory } from 'applesauce-factory'
 import { Hooks } from 'applesauce-react'
 import { 
   generateArticleIdentifier, 
-  loadReadingPosition, 
-  saveReadingPosition 
+  saveReadingPosition
 } from '../services/readingPositionService'
+import { readingProgressController } from '../services/readingProgressController'
+import TTSControls from './TTSControls'
 
 interface ContentPanelProps {
   loading: boolean
@@ -72,6 +73,7 @@ interface ContentPanelProps {
   // For reading progress indicator positioning
   isSidebarCollapsed?: boolean
   isHighlightsCollapsed?: boolean
+  onOpenHighlights?: () => void
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -99,21 +101,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   onTextSelection,
   onClearSelection,
   isSidebarCollapsed = false,
-  isHighlightsCollapsed = false
+  isHighlightsCollapsed = false,
+  onOpenHighlights
 }) => {
   const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
   const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
   const [showCheckAnimation, setShowCheckAnimation] = useState(false)
   const [showArticleMenu, setShowArticleMenu] = useState(false)
-  const [showVideoMenu, setShowVideoMenu] = useState(false)
   const [showExternalMenu, setShowExternalMenu] = useState(false)
   const [articleMenuOpenUpward, setArticleMenuOpenUpward] = useState(false)
-  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
   const [externalMenuOpenUpward, setExternalMenuOpenUpward] = useState(false)
   const articleMenuRef = useRef<HTMLDivElement>(null)
-  const videoMenuRef = useRef<HTMLDivElement>(null)
   const externalMenuRef = useRef<HTMLDivElement>(null)
-  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
   const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
   
   const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -128,8 +127,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     currentUserPubkey,
     followedPubkeys
   })
+  // Key used to force re-mount of markdown preview/render when content changes
+  const contentKey = useMemo(() => {
+    // Prefer selectedUrl as a stable per-article key; fallback to title+length
+    return selectedUrl || `${title || ''}:${(markdown || html || '').length}`
+  }, [selectedUrl, title, markdown, html])
 
-  const { contentRef, handleSelectionEnd } = useHighlightInteractions({
+  const { contentRef } = useHighlightInteractions({
     onHighlightClick,
     selectedHighlightId,
     onTextSelection,
@@ -139,8 +143,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   // Get event store for reading position service
   const eventStore = Hooks.useEventStore()
   
-  // Reading position tracking - only for text content, not videos
-  const isTextContent = !loading && !!(markdown || html) && !selectedUrl?.includes('youtube') && !selectedUrl?.includes('vimeo')
+  // Reading position tracking - only for text content that's loaded and long enough
+  // Wait for content to load, check it's not a video, and verify it's long enough to track
+  const isTextContent = useMemo(() => {
+    if (loading) return false
+    if (!markdown && !html) return false
+    // Don't track internal sentinel URLs (nostr-event: is not a real Nostr URI per NIP-21)
+    if (selectedUrl?.startsWith('nostr-event:')) return false
+    if (selectedUrl?.includes('youtube') || selectedUrl?.includes('vimeo')) return false
+    if (!shouldTrackReadingProgress(html, markdown)) return false
+    
+    return true
+  }, [loading, markdown, html, selectedUrl])
   
   // Generate article identifier for saving/loading position
   const articleIdentifier = useMemo(() => {
@@ -148,23 +162,29 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     return generateArticleIdentifier(selectedUrl)
   }, [selectedUrl])
 
+  // Use refs for content to avoid recreating callback on every content change
+  const htmlRef = useRef(html)
+  const markdownRef = useRef(markdown)
+  useEffect(() => {
+    htmlRef.current = html
+    markdownRef.current = markdown
+  }, [html, markdown])
+
   // Callback to save reading position
   const handleSavePosition = useCallback(async (position: number) => {
     if (!activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('⏭️ [ContentPanel] Skipping save - missing requirements:', {
-        hasAccount: !!activeAccount,
-        hasRelayPool: !!relayPool,
-        hasEventStore: !!eventStore,
-        hasIdentifier: !!articleIdentifier
-      })
       return
     }
     if (!settings?.syncReadingPosition) {
-      console.log('⏭️ [ContentPanel] Sync disabled in settings')
+      return
+    }
+    
+    // Check if content is long enough to track reading progress
+    if (!shouldTrackReadingProgress(htmlRef.current, markdownRef.current)) {
       return
     }
 
-    console.log('💾 [ContentPanel] Saving position:', Math.round(position * 100) + '%', 'for article:', selectedUrl?.slice(0, 50))
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
 
     try {
       const factory = new EventFactory({ signer: activeAccount })
@@ -176,92 +196,155 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         {
           position,
           timestamp: Math.floor(Date.now() / 1000),
-          scrollTop: window.pageYOffset || document.documentElement.scrollTop
+          scrollTop
         }
       )
     } catch (error) {
-      console.error('❌ [ContentPanel] Failed to save reading position:', error)
+      console.error('[reading-position] Failed to save reading position:', error)
     }
-  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition])
 
-  const { isReadingComplete, progressPercentage, saveNow } = useReadingPosition({
-    enabled: isTextContent,
-    syncEnabled: settings?.syncReadingPosition,
+  // Delay enabling position tracking to ensure content is stable
+  const [isTrackingEnabled, setIsTrackingEnabled] = useState(false)
+  
+  // Reset tracking when article changes
+  useEffect(() => {
+    setIsTrackingEnabled(false)
+  }, [selectedUrl])
+  
+  // Enable/disable tracking based on content state
+  useEffect(() => {
+    if (!isTextContent) {
+      // Disable tracking if content is not suitable
+      if (isTrackingEnabled) {
+        setIsTrackingEnabled(false)
+      }
+      return
+    }
+    
+    if (!isTrackingEnabled) {
+      // Wait 500ms after content loads before enabling tracking
+      const timer = setTimeout(() => {
+        setIsTrackingEnabled(true)
+      }, 500)
+      return () => clearTimeout(timer)
+    }
+  }, [isTextContent, isTrackingEnabled])
+
+  const { progressPercentage, suppressSavesFor } = useReadingPosition({
+    enabled: isTrackingEnabled,
+    syncEnabled: settings?.syncReadingPosition !== false,
     onSave: handleSavePosition,
     onReadingComplete: () => {
-      // Optional: Auto-mark as read when reading is complete
-      if (activeAccount && !isMarkedAsRead) {
-        // Could trigger auto-mark as read here if desired
+      // Auto-mark as read when reading is complete (if enabled in settings)
+      if (!settings?.autoMarkAsReadOnCompletion || !activeAccount) return
+      if (!isMarkedAsRead) {
+        handleMarkAsRead()
+      } else {
+        // Already archived: still show the success animation for feedback
+        setShowCheckAnimation(true)
+        setTimeout(() => setShowCheckAnimation(false), 600)
       }
     }
   })
-
-  // Load saved reading position when article loads
+  
+  // Log sync status when it changes
   useEffect(() => {
-    if (!isTextContent || !activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('⏭️ [ContentPanel] Skipping position restore - missing requirements:', {
-        isTextContent,
-        hasAccount: !!activeAccount,
-        hasRelayPool: !!relayPool,
-        hasEventStore: !!eventStore,
-        hasIdentifier: !!articleIdentifier
-      })
+  }, [isTextContent, settings?.syncReadingPosition, activeAccount, relayPool, eventStore, articleIdentifier, progressPercentage])
+
+  // Load saved reading position when article loads (using pre-loaded data from controller)
+  const suppressSavesForRef = useRef(suppressSavesFor)
+  useEffect(() => {
+    suppressSavesForRef.current = suppressSavesFor
+  }, [suppressSavesFor])
+
+  // Track if we've successfully started restore for this article + tracking state
+  // Use a composite key to ensure we only restore once per article when tracking is enabled
+  const restoreKey = `${articleIdentifier}-${isTrackingEnabled}`
+  const hasAttemptedRestoreRef = useRef<string | null>(null)
+
+  // Reset scroll position and restore ref when article changes
+  useEffect(() => {
+    if (!articleIdentifier) return
+    
+    // Suppress saves during navigation to prevent saving 0% position
+    // The 500ms suppression covers the scroll reset and initial render
+    if (suppressSavesForRef.current) {
+      suppressSavesForRef.current(500)
+    }
+    
+    // Reset scroll to top when article identifier changes
+    // This prevents showing wrong scroll position from previous article
+    window.scrollTo({ top: 0, behavior: 'instant' })
+    // Reset restore attempt tracking for new article
+    hasAttemptedRestoreRef.current = null
+  }, [articleIdentifier])
+
+  useEffect(() => {
+    if (!isTextContent || !activeAccount || !articleIdentifier) {
       return
     }
-    if (!settings?.syncReadingPosition) {
-      console.log('⏭️ [ContentPanel] Sync disabled - not restoring position')
+    if (settings?.syncReadingPosition === false) {
+      return
+    }
+    if (settings?.autoScrollToReadingPosition === false) {
+      return
+    }
+    if (!isTrackingEnabled) {
       return
     }
 
-    console.log('📖 [ContentPanel] Loading position for article:', selectedUrl?.slice(0, 50))
+    // Only attempt restore once per article (after tracking is enabled)
+    if (hasAttemptedRestoreRef.current === restoreKey) {
+      return
+    }
 
-    const loadPosition = async () => {
-      try {
-        const savedPosition = await loadReadingPosition(
-          relayPool,
-          eventStore,
-          activeAccount.pubkey,
-          articleIdentifier
-        )
+    // Mark as attempted using composite key
+    hasAttemptedRestoreRef.current = restoreKey
+    
+    // Get the saved position from the controller (already loaded and displayed on card)
+    const savedProgress = readingProgressController.getProgress(articleIdentifier)
+    
+    if (!savedProgress || savedProgress <= 0.05 || savedProgress >= 1) {
+      return
+    }
 
-        if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 1) {
-          console.log('🎯 [ContentPanel] Restoring position:', Math.round(savedPosition.position * 100) + '%')
-          // Wait for content to be fully rendered before scrolling
-          setTimeout(() => {
-            const documentHeight = document.documentElement.scrollHeight
-            const windowHeight = window.innerHeight
-            const scrollTop = savedPosition.position * (documentHeight - windowHeight)
-            
-            window.scrollTo({
-              top: scrollTop,
-              behavior: 'smooth'
-            })
-            
-            console.log('✅ [ContentPanel] Restored to position:', Math.round(savedPosition.position * 100) + '%', 'scrollTop:', scrollTop)
-          }, 500) // Give content time to render
-        } else if (savedPosition) {
-          if (savedPosition.position === 1) {
-            console.log('✅ [ContentPanel] Article completed (100%), starting from top')
-          } else {
-            console.log('⏭️ [ContentPanel] Position too early (<5%):', Math.round(savedPosition.position * 100) + '%')
-          }
+    // Suppress saves during restore (500ms render + 1000ms smooth scroll = 1500ms)
+    if (suppressSavesForRef.current) {
+      suppressSavesForRef.current(1500)
+    }
+
+    // Wait for content to be fully rendered
+    setTimeout(() => {
+      const docH = document.documentElement.scrollHeight
+      const winH = window.innerHeight
+      const maxScroll = Math.max(0, docH - winH)
+      const currentTop = window.pageYOffset || document.documentElement.scrollTop
+      const targetTop = savedProgress * maxScroll
+
+      // Skip if delta is too small (< 48px or < 5%)
+      const deltaPx = Math.abs(targetTop - currentTop)
+      const deltaPct = maxScroll > 0 ? Math.abs((targetTop - currentTop) / maxScroll) : 0
+      if (deltaPx < 48 || deltaPct < 0.05) {
+        // Allow saves immediately since no scroll happened
+        if (suppressSavesForRef.current) {
+          suppressSavesForRef.current(0)
         }
-      } catch (error) {
-        console.error('❌ [ContentPanel] Failed to load reading position:', error)
+        return
       }
-    }
 
-    loadPosition()
-  }, [isTextContent, activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+      // Perform smooth animated restore
+      window.scrollTo({
+        top: targetTop,
+        behavior: 'smooth'
+      })
+    }, 500) // Give content time to render
+  }, [isTextContent, activeAccount, articleIdentifier, settings?.syncReadingPosition, settings?.autoScrollToReadingPosition, selectedUrl, isTrackingEnabled, restoreKey])
 
-  // Save position before unmounting or changing article
-  useEffect(() => {
-    return () => {
-      if (saveNow) {
-        saveNow()
-      }
-    }
-  }, [saveNow, selectedUrl])
+  // Note: We intentionally do NOT save on unmount because:
+  // 1. Browser may scroll to top during back navigation, causing 0% saves
+  // 2. The auto-save with 1s throttle already captures position during reading
+  // 3. Position state may not reflect actual reading position during navigation
 
   // Close menu when clicking outside
   useEffect(() => {
@@ -270,21 +353,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       if (articleMenuRef.current && !articleMenuRef.current.contains(target)) {
         setShowArticleMenu(false)
       }
-      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
-        setShowVideoMenu(false)
-      }
       if (externalMenuRef.current && !externalMenuRef.current.contains(target)) {
         setShowExternalMenu(false)
       }
     }
     
-    if (showArticleMenu || showVideoMenu || showExternalMenu) {
+    if (showArticleMenu || showExternalMenu) {
       document.addEventListener('mousedown', handleClickOutside)
       return () => {
         document.removeEventListener('mousedown', handleClickOutside)
       }
     }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])
 
   // Check available space and position menu upward if needed
   useEffect(() => {
@@ -307,13 +387,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     if (showArticleMenu) {
       checkMenuPosition(articleMenuRef, setArticleMenuOpenUpward)
     }
-    if (showVideoMenu) {
-      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
-    }
     if (showExternalMenu) {
       checkMenuPosition(externalMenuRef, setExternalMenuOpenUpward)
     }
-  }, [showArticleMenu, showVideoMenu, showExternalMenu])
+  }, [showArticleMenu, showExternalMenu])
 
   const readingStats = useMemo(() => {
     const content = markdown || html || ''
@@ -324,36 +401,29 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const hasHighlights = relevantHighlights.length > 0
 
+  // Extract plain text for TTS
+  const baseHtml = useMemo(() => {
+    if (markdown) return renderedMarkdownHtml && finalHtml ? finalHtml : ''
+    return finalHtml || html || ''
+  }, [markdown, renderedMarkdownHtml, finalHtml, html])
+
+  const articleText = useMemo(() => {
+    const parts: string[] = []
+    if (title) parts.push(title)
+    if (summary) parts.push(summary)
+    if (baseHtml) {
+      const div = document.createElement('div')
+      div.innerHTML = baseHtml
+      const txt = (div.textContent || '').replace(/\s+/g, ' ').trim()
+      if (txt) parts.push(txt)
+    }
+    return parts.join('. ')
+  }, [title, summary, baseHtml])
+
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
-  const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
 
-  // Track external video duration (in seconds) for display in header
-  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
-  // Load YouTube metadata/captions when applicable
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!selectedUrl) return setYtMeta(null)
-        const id = extractYouTubeId(selectedUrl)
-        if (!id) return setYtMeta(null)
-        const locale = navigator?.language?.split('-')[0] || 'en'
-        const data = await getYouTubeMeta(id, locale)
-        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
-      } catch {
-        setYtMeta(null)
-      }
-    })()
-  }, [selectedUrl])
 
-  const formatDuration = (totalSeconds: number): string => {
-    const hours = Math.floor(totalSeconds / 3600)
-    const minutes = Math.floor((totalSeconds % 3600) / 60)
-    const seconds = Math.floor(totalSeconds % 60)
-    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
-    const ss = String(seconds).padStart(2, '0')
-    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
-  }
   
 
   // Get article links for menu
@@ -361,7 +431,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     if (!currentArticle) return null
 
     const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
       !r.includes('localhost') && !r.includes('127.0.0.1')
     ).slice(0, 3)
 
@@ -390,7 +461,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     setShowArticleMenu(!showArticleMenu)
   }
 
-  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
 
   const handleOpenPortal = () => {
     if (articleLinks) {
@@ -467,52 +537,17 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   }
 
   const handleOpenSearch = () => {
-    if (articleLinks) {
+    // For regular notes (kind:1), open via /e/ path
+    if (currentArticle?.kind === 1) {
+      const borisUrl = `${window.location.origin}/e/${currentArticle.id}`
+      window.open(borisUrl, '_blank', 'noopener,noreferrer')
+    } else if (articleLinks) {
+      // For articles, use search portal
       window.open(getSearchUrl(articleLinks.naddr), '_blank', 'noopener,noreferrer')
     }
     setShowArticleMenu(false)
   }
   
-  // Video actions
-  const handleOpenVideoExternal = () => {
-    if (selectedUrl) window.open(selectedUrl, '_blank', 'noopener,noreferrer')
-    setShowVideoMenu(false)
-  }
-
-  const handleOpenVideoNative = () => {
-    if (!selectedUrl) return
-    const native = buildNativeVideoUrl(selectedUrl)
-    if (native) {
-      window.location.href = native
-    } else {
-      window.location.href = selectedUrl
-    }
-    setShowVideoMenu(false)
-  }
-
-  const handleCopyVideoUrl = async () => {
-    try {
-      if (selectedUrl) await navigator.clipboard.writeText(selectedUrl)
-    } catch (e) {
-      console.warn('Clipboard copy failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
-
-  const handleShareVideoUrl = async () => {
-    try {
-      if (selectedUrl && (navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
-        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ title: title || 'Video', url: selectedUrl })
-      } else if (selectedUrl) {
-        await navigator.clipboard.writeText(selectedUrl)
-      }
-    } catch (e) {
-      console.warn('Share failed', e)
-    } finally {
-      setShowVideoMenu(false)
-    }
-  }
 
   // External article actions
   const toggleExternalMenu = () => setShowExternalMenu(v => !v)
@@ -554,7 +589,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const handleSearchExternalUrl = () => {
     if (selectedUrl) {
-      window.open(getSearchUrl(selectedUrl), '_blank', 'noopener,noreferrer')
+      // If it's a nostr event sentinel, open the event directly on ants.sh
+      if (selectedUrl.startsWith('nostr-event:')) {
+        const eventId = selectedUrl.replace('nostr-event:', '')
+        window.open(`https://ants.sh/e/${eventId}`, '_blank', 'noopener,noreferrer')
+      } else {
+        window.open(getSearchUrl(selectedUrl), '_blank', 'noopener,noreferrer')
+      }
     }
     setShowExternalMenu(false)
   }
@@ -577,12 +618,25 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             activeAccount.pubkey,
             relayPool
           )
+          // Also check archiveController
+          const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+          if (dTag) {
+            try {
+              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+              hasRead = hasRead || archiveController.isMarked(naddr)
+            } catch (e) {
+              // Silently ignore encoding errors
+            }
+          }
         } else {
           hasRead = await hasMarkedWebsiteAsRead(
             selectedUrl,
             activeAccount.pubkey,
             relayPool
           )
+          // Also check archiveController
+          const ctrl = archiveController.isMarked(selectedUrl)
+          hasRead = hasRead || ctrl
         }
         setIsMarkedAsRead(hasRead)
       } catch (error) {
@@ -596,7 +650,35 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   }, [selectedUrl, currentArticle, activeAccount, relayPool, isNostrArticle])
   
   const handleMarkAsRead = () => {
-    if (!activeAccount || !relayPool || isMarkedAsRead) {
+    if (!activeAccount || !relayPool) return
+
+    // Toggle archive state: if already archived, request deletion; else archive
+    if (isMarkedAsRead) {
+      // Optimistically unarchive in UI; background deletion request (NIP-09)
+      setIsMarkedAsRead(false)
+      ;(async () => {
+        try {
+          if (isNostrArticle && currentArticle) {
+            // Send deletion for all matching reactions
+            await unarchiveEvent(currentArticle.id, activeAccount, relayPool)
+            // Also clear controller mark so lists update
+            try {
+              const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+              if (dTag) {
+                const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+                archiveController.unmark(naddr)
+              }
+            } catch (e) {
+              console.warn('[archive][content] encode naddr failed', e)
+            }
+          } else if (selectedUrl) {
+            await unarchiveWebsite(selectedUrl, activeAccount, relayPool)
+            archiveController.unmark(selectedUrl)
+          }
+        } catch (err) {
+          console.warn('[archive][content] unarchive failed', err)
+        }
+      })()
       return
     }
 
@@ -618,16 +700,34 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             currentArticle.pubkey,
             currentArticle.kind,
             activeAccount,
-            relayPool
+            relayPool,
+            {
+              aCoord: (() => {
+                try {
+                  const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+                  if (!dTag) return undefined
+                  return `${30023}:${currentArticle.pubkey}:${dTag}`
+                } catch { return undefined }
+              })()
+            }
           )
-          console.log('✅ Marked nostr article as read')
+          // Update archiveController immediately
+          try {
+            const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+            if (dTag) {
+              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+              archiveController.mark(naddr)
+            }
+          } catch (err) {
+            console.warn('[archive][content] optimistic article mark failed', err)
+          }
         } else if (selectedUrl) {
           await createWebsiteReaction(
             selectedUrl,
             activeAccount,
             relayPool
           )
-          console.log('✅ Marked website as read')
+          archiveController.mark(selectedUrl)
         }
       } catch (error) {
         console.error('Failed to mark as read:', error)
@@ -645,13 +745,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     )
   }
 
-  if (loading) {
-    return (
-      <div className="reader" aria-busy="true">
-        <ContentSkeleton />
-      </div>
-    )
-  }
 
   const highlightRgb = hexToRgb(highlightColor)
 
@@ -661,7 +754,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       {isTextContent && (
         <ReadingProgressIndicator 
           progress={progressPercentage}
-          isComplete={isReadingComplete}
+          // Consider complete only at 95%+
+          isComplete={progressPercentage >= 95}
           showPercentage={true}
           isSidebarCollapsed={isSidebarCollapsed}
           isHighlightsCollapsed={isHighlightsCollapsed}
@@ -671,16 +765,15 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       <div className="reader" style={{ '--highlight-rgb': highlightRgb } as React.CSSProperties}>
         {/* Hidden markdown preview to convert markdown to HTML */}
       {markdown && (
-        <div ref={markdownPreviewRef} style={{ display: 'none' }}>
+        <div ref={markdownPreviewRef} key={`preview:${contentKey}`} style={{ display: 'none' }}>
           <ReactMarkdown 
             remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeRaw, rehypePrism]}
             components={{
-              img: ({ src, alt, ...props }) => (
+              img: ({ src, alt }) => (
                 <img 
                   src={src} 
                   alt={alt} 
-                  {...props}
                 />
               )
             }}
@@ -691,126 +784,55 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       )}
       
       <ReaderHeader 
-        title={ytMeta?.title || title}
+        title={title}
         image={image}
         summary={summary}
         published={published}
-        readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)}
+        readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}
         settings={settings}
         highlights={relevantHighlights}
         highlightVisibility={highlightVisibility}
+        onHighlightCountClick={onOpenHighlights}
       />
-      {isExternalVideo ? (
-        <>
-          <div className="reader-video">
-            <ReactPlayer 
-              url={selectedUrl as string} 
-              controls 
-              width="100%"
-              height="auto"
-              style={{ 
-                width: '100%', 
-                height: 'auto', 
-                aspectRatio: '16/9' 
-              }}
-              onDuration={(d) => setVideoDurationSec(Math.floor(d))}
-            />
-          </div>
-          {ytMeta?.description && (
-            <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
-              {ytMeta.description}
-            </div>
-          )}
-          {ytMeta?.transcript && (
-            <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
-              <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
-              <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
-                {ytMeta.transcript}
-              </div>
-            </div>
-          )}
-          <div className="article-menu-container">
-            <div className="article-menu-wrapper" ref={videoMenuRef}>
-              <button
-                className="article-menu-btn"
-                onClick={toggleVideoMenu}
-                title="More options"
-              >
-                <FontAwesomeIcon icon={faEllipsisH} />
-              </button>
-              {showVideoMenu && (
-                <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
-                  <button className="article-menu-item" onClick={handleOpenVideoExternal}>
-                    <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    <span>Open Link</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleOpenVideoNative}>
-                    <FontAwesomeIcon icon={faMobileAlt} />
-                    <span>Open in Native App</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleCopyVideoUrl}>
-                    <FontAwesomeIcon icon={faCopy} />
-                    <span>Copy URL</span>
-                  </button>
-                  <button className="article-menu-item" onClick={handleShareVideoUrl}>
-                    <FontAwesomeIcon icon={faShare} />
-                    <span>Share</span>
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-          {activeAccount && (
-            <div className="mark-as-read-container">
-              <button
-                className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
-                onClick={handleMarkAsRead}
-                disabled={isMarkedAsRead || isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
-              >
-                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
-                  spin={isCheckingReadStatus} 
-                />
-                <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
-                </span>
-              </button>
-            </div>
-          )}
-        </>
+      {isTextContent && articleText && (
+        <div style={{ padding: '0 0.75rem 0.5rem 0.75rem' }}>
+          <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
+        </div>
+      )}
+      {loading || !markdown && !html ? (
+        <div className="reader" aria-busy="true">
+          <ContentSkeleton />
+        </div>
       ) : markdown || html ? (
         <>
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
-              <div 
-                ref={contentRef} 
-                className="reader-markdown" 
-                dangerouslySetInnerHTML={{ __html: finalHtml }}
-                onMouseUp={handleSelectionEnd}
-                onTouchEnd={handleSelectionEnd}
+              <VideoEmbedProcessor
+                key={`content:${contentKey}`}
+                ref={contentRef}
+                html={finalHtml}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
+                className="reader-markdown"
               />
             ) : (
               <div className="reader-markdown">
-                <div className="loading-spinner">
-                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-                </div>
+                <ContentSkeleton />
               </div>
             )
           ) : (
-            <div 
-              ref={contentRef} 
-              className="reader-html" 
-              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
-              onMouseUp={handleSelectionEnd}
-              onTouchEnd={handleSelectionEnd}
+            <VideoEmbedProcessor
+              key={`content:${contentKey}`}
+              ref={contentRef}
+              html={finalHtml || html || ''}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
+              className="reader-html"
             />
           )}
           
           {/* Article menu for external URLs */}
-          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+          {!isNostrArticle && selectedUrl && (
             <div className="article-menu-container">
               <div className="article-menu-wrapper" ref={externalMenuRef}>
                 <button
@@ -837,13 +859,16 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                       <FontAwesomeIcon icon={faCopy} />
                       <span>Copy URL</span>
                     </button>
-                    <button
-                      className="article-menu-item"
-                      onClick={handleOpenExternalUrl}
-                    >
-                      <FontAwesomeIcon icon={faExternalLinkAlt} />
-                      <span>Open Original</span>
-                    </button>
+                    {/* Only show "Open Original" for actual external URLs, not nostr events */}
+                    {!selectedUrl?.startsWith('nostr-event:') && (
+                      <button
+                        className="article-menu-item"
+                        onClick={handleOpenExternalUrl}
+                      >
+                        <FontAwesomeIcon icon={faExternalLinkAlt} />
+                        <span>Open Original</span>
+                      </button>
+                    )}
                     <button
                       className="article-menu-item"
                       onClick={handleSearchExternalUrl}
@@ -930,21 +955,22 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
           
-          {/* Mark as Read button */}
+          {/* Archive button */}
           {activeAccount && (
             <div className="mark-as-read-container">
               <button
                 className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
                 onClick={handleMarkAsRead}
-                disabled={isMarkedAsRead || isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
+                disabled={isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Archived' : 'Move to Archive'}
+                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
               >
                 <FontAwesomeIcon 
                   icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
                   spin={isCheckingReadStatus} 
                 />
                 <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Read' : 'Mark as Read'}
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Archived' : 'Move to Archive'}
                 </span>
               </button>
             </div>
@@ -957,11 +983,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
         </>
-      ) : (
-        <div className="reader empty">
-          <p>No readable content found for this URL.</p>
-        </div>
-      )}
+      ) : null}
       </div>
     </>
   )

src/components/ContentWithResolvedProfiles.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { useEventModel } from 'applesauce-react/hooks'
-import { Models, Helpers } from 'applesauce-core'
-import { decode } from 'nostr-tools/nip19'
-import { extractNprofilePubkeys } from '../utils/helpers'
-
-const { getPubkeyFromDecodeResult } = Helpers
-
-interface Props { content: string }
-
-const ContentWithResolvedProfiles: React.FC<Props> = ({ content }) => {
-  const matches = extractNprofilePubkeys(content)
-  const decoded = matches
-    .map((m) => {
-      try { return decode(m) } catch { return undefined as undefined }
-    })
-    .filter((v): v is ReturnType<typeof decode> => Boolean(v))
-
-  const lookups = decoded
-    .map((res) => getPubkeyFromDecodeResult(res))
-    .filter((v): v is string => typeof v === 'string')
-
-  const profiles = lookups.map((pubkey) => ({ pubkey, profile: useEventModel(Models.ProfileModel, [pubkey]) }))
-
-  let rendered = content
-  matches.forEach((m, i) => {
-    const pk = getPubkeyFromDecodeResult(decoded[i])
-    const found = profiles.find((p) => p.pubkey === pk)
-    const name = found?.profile?.name || found?.profile?.display_name || found?.profile?.nip05 || `${pk?.slice(0,8)}...`
-    if (name) rendered = rendered.replace(m, `@${name}`)
-  })
-
-  return <div className="bookmark-content">{rendered}</div>
-}
-
-export default ContentWithResolvedProfiles
-
-

src/components/Debug.tsx

@@ -18,6 +18,9 @@ import { useBookmarksUI } from '../hooks/useBookmarksUI'
 import { useSettings } from '../hooks/useSettings'
 import { fetchHighlights, fetchHighlightsFromAuthors } from '../services/highlightService'
 import { contactsController } from '../services/contactsController'
+import { writingsController } from '../services/writingsController'
+import { readingProgressController } from '../services/readingProgressController'
+import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 
 const defaultPayload = 'The quick brown fox jumps over the lazy dog.'
 
@@ -94,6 +97,33 @@ const Debug: React.FC<DebugProps> = ({
   const [tLoadHighlights, setTLoadHighlights] = useState<number | null>(null)
   const [tFirstHighlight, setTFirstHighlight] = useState<number | null>(null)
   
+  // Writings loading state
+  const [isLoadingWritings, setIsLoadingWritings] = useState(false)
+  const [writingPosts, setWritingPosts] = useState<BlogPostPreview[]>([])
+  const [tLoadWritings, setTLoadWritings] = useState<number | null>(null)
+  const [tFirstWriting, setTFirstWriting] = useState<number | null>(null)
+  
+  // Reading Progress loading state
+  const [isLoadingReadingProgress, setIsLoadingReadingProgress] = useState(false)
+  const [readingProgressEvents, setReadingProgressEvents] = useState<NostrEvent[]>([])
+  const [tLoadReadingProgress, setTLoadReadingProgress] = useState<number | null>(null)
+  const [tFirstReadingProgress, setTFirstReadingProgress] = useState<number | null>(null)
+  
+  // Mark-as-read reactions loading state
+  const [isLoadingMarkAsRead, setIsLoadingMarkAsRead] = useState(false)
+  const [markAsReadReactions, setMarkAsReadReactions] = useState<NostrEvent[]>([])
+  const [tLoadMarkAsRead, setTLoadMarkAsRead] = useState<number | null>(null)
+  const [tFirstMarkAsRead, setTFirstMarkAsRead] = useState<number | null>(null)
+
+  // Relay list loading state
+  const [isLoadingRelayList, setIsLoadingRelayList] = useState(false)
+  const [relayListEvents, setRelayListEvents] = useState<NostrEvent[]>([])
+  const [tLoadRelayList, setTLoadRelayList] = useState<number | null>(null)
+  const [tFirstRelayList, setTFirstRelayList] = useState<number | null>(null)
+  
+  // Deduplicated reading progress from controller
+  const [deduplicatedProgressMap, setDeduplicatedProgressMap] = useState<Map<string, number>>(new Map())
+  
   // Live timing state
   const [liveTiming, setLiveTiming] = useState<{
     nip44?: { type: 'encrypt' | 'decrypt'; startTime: number }
@@ -101,6 +131,9 @@ const Debug: React.FC<DebugProps> = ({
     loadBookmarks?: { startTime: number }
     decryptBookmarks?: { startTime: number }
     loadHighlights?: { startTime: number }
+    loadReadingProgress?: { startTime: number }
+    loadMarkAsRead?: { startTime: number }
+    loadRelayList?: { startTime: number }
   }>({})
   
   // Web of Trust state
@@ -302,10 +335,6 @@ const Debug: React.FC<DebugProps> = ({
 
       // Subscribe to decrypt complete events for Debug UI display
       const unsubscribeDecrypt = bookmarkController.onDecryptComplete((eventId, publicCount, privateCount) => {
-        console.log('[bunker] ✅ Auto-decrypted:', eventId.slice(0, 8), {
-          public: publicCount,
-          private: privateCount
-        })
         setDecryptedEvents(prev => new Map(prev).set(eventId, { 
           public: publicCount, 
           private: privateCount 
@@ -405,11 +434,7 @@ const Debug: React.FC<DebugProps> = ({
 
       const elapsed = Math.round(performance.now() - start)
       setTLoadHighlights(elapsed)
-      setLiveTiming(prev => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-        const { loadHighlights, ...rest } = prev
-        return rest
-      })
+      setLiveTiming(prev => ({ ...prev, loadHighlights: undefined }))
 
       DebugBus.info('debug', `Loaded ${events.length} highlight events in ${elapsed}ms`)
     } catch (err) {
@@ -538,6 +563,393 @@ const Debug: React.FC<DebugProps> = ({
     }
   }
 
+  const handleLoadMyWritings = async () => {
+    if (!relayPool || !activeAccount?.pubkey || !eventStore) {
+      DebugBus.warn('debug', 'Please log in to load your writings')
+      return
+    }
+    const start = performance.now()
+    setWritingPosts([])
+    setIsLoadingWritings(true)
+    setTLoadWritings(null)
+    setTFirstWriting(null)
+    DebugBus.info('debug', 'Loading my writings via writingsController...')
+    try {
+      let firstEventTime: number | null = null
+      const unsub = writingsController.onWritings((posts) => {
+        if (firstEventTime === null && posts.length > 0) {
+          firstEventTime = performance.now() - start
+          setTFirstWriting(Math.round(firstEventTime))
+        }
+        setWritingPosts(posts)
+      })
+      
+      await writingsController.start({
+        relayPool,
+        eventStore,
+        pubkey: activeAccount.pubkey,
+        force: true
+      })
+      
+      unsub()
+      const currentWritings = writingsController.getWritings()
+      setWritingPosts(currentWritings)
+      DebugBus.info('debug', `Loaded ${currentWritings.length} writings via controller`)
+    } finally {
+      setIsLoadingWritings(false)
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadWritings(elapsed)
+      DebugBus.info('debug', `Loaded my writings in ${elapsed}ms`)
+    }
+  }
+
+  const handleLoadFriendsWritings = async () => {
+    if (!relayPool || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load friends writings')
+      return
+    }
+    const start = performance.now()
+    setWritingPosts([])
+    setIsLoadingWritings(true)
+    setTLoadWritings(null)
+    setTFirstWriting(null)
+    DebugBus.info('debug', 'Loading friends writings...')
+    try {
+      // Get contacts first
+      await contactsController.start({ relayPool, pubkey: activeAccount.pubkey })
+      const friends = contactsController.getContacts()
+      const friendsArray = Array.from(friends)
+      DebugBus.info('debug', `Found ${friendsArray.length} friends`)
+      
+      if (friendsArray.length === 0) {
+        DebugBus.warn('debug', 'No friends found to load writings from')
+        return
+      }
+      
+      let firstEventTime: number | null = null
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+      const posts = await fetchBlogPostsFromAuthors(
+        relayPool,
+        friendsArray,
+        relayUrls,
+        (post) => {
+          if (firstEventTime === null) {
+            firstEventTime = performance.now() - start
+            setTFirstWriting(Math.round(firstEventTime))
+          }
+          setWritingPosts(prev => {
+            const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+            const key = `${post.author}:${dTag}`
+            const exists = prev.find(p => {
+              const pDTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+              return `${p.author}:${pDTag}` === key
+            })
+            if (exists) return prev
+            return [...prev, post].sort((a, b) => {
+              const timeA = a.published || a.event.created_at
+              const timeB = b.published || b.event.created_at
+              return timeB - timeA
+            })
+          })
+        },
+        100,
+        eventStore || undefined
+      )
+      
+      setWritingPosts(posts)
+      DebugBus.info('debug', `Loaded ${posts.length} friend writings`)
+    } finally {
+      setIsLoadingWritings(false)
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadWritings(elapsed)
+      DebugBus.info('debug', `Loaded friend writings in ${elapsed}ms`)
+    }
+  }
+
+  const handleLoadNostrverseWritings = async () => {
+    if (!relayPool) {
+      DebugBus.warn('debug', 'Relay pool not available')
+      return
+    }
+    const start = performance.now()
+    setWritingPosts([])
+    setIsLoadingWritings(true)
+    setTLoadWritings(null)
+    setTFirstWriting(null)
+    DebugBus.info('debug', 'Loading nostrverse writings (kind:30023)...')
+    try {
+      let firstEventTime: number | null = null
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+      
+      const { queryEvents } = await import('../services/dataFetch')
+      const { Helpers } = await import('applesauce-core')
+      const { getArticleTitle, getArticleSummary, getArticleImage, getArticlePublished } = Helpers
+      
+      const uniqueEvents = new Map<string, NostrEvent>()
+      await queryEvents(relayPool, { kinds: [30023], limit: 50 }, {
+        relayUrls,
+        onEvent: (evt) => {
+          const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${evt.pubkey}:${dTag}`
+          const existing = uniqueEvents.get(key)
+          if (!existing || evt.created_at > existing.created_at) {
+            uniqueEvents.set(key, evt)
+            
+            if (firstEventTime === null) {
+              firstEventTime = performance.now() - start
+              setTFirstWriting(Math.round(firstEventTime))
+            }
+            
+            const posts = Array.from(uniqueEvents.values()).map(event => ({
+              event,
+              title: getArticleTitle(event) || 'Untitled',
+              summary: getArticleSummary(event),
+              image: getArticleImage(event),
+              published: getArticlePublished(event),
+              author: event.pubkey
+            } as BlogPostPreview)).sort((a, b) => {
+              const timeA = a.published || a.event.created_at
+              const timeB = b.published || b.event.created_at
+              return timeB - timeA
+            })
+            
+            setWritingPosts(posts)
+          }
+        }
+      })
+      
+      const finalPosts = Array.from(uniqueEvents.values()).map(event => ({
+        event,
+        title: getArticleTitle(event) || 'Untitled',
+        summary: getArticleSummary(event),
+        image: getArticleImage(event),
+        published: getArticlePublished(event),
+        author: event.pubkey
+      } as BlogPostPreview)).sort((a, b) => {
+        const timeA = a.published || a.event.created_at
+        const timeB = b.published || b.event.created_at
+        return timeB - timeA
+      })
+      
+      setWritingPosts(finalPosts)
+      DebugBus.info('debug', `Loaded ${finalPosts.length} nostrverse writings`)
+    } finally {
+      setIsLoadingWritings(false)
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadWritings(elapsed)
+      DebugBus.info('debug', `Loaded nostrverse writings in ${elapsed}ms`)
+    }
+  }
+
+  const handleClearWritings = () => {
+    setWritingPosts([])
+    setTLoadWritings(null)
+    setTFirstWriting(null)
+  }
+
+  const handleLoadReadingProgress = async () => {
+    if (!relayPool || !eventStore || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load reading progress')
+      return
+    }
+
+    try {
+      setIsLoadingReadingProgress(true)
+      setReadingProgressEvents([])
+      setTLoadReadingProgress(null)
+      setTFirstReadingProgress(null)
+      setDeduplicatedProgressMap(new Map())
+      DebugBus.info('debug', 'Loading reading progress events...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadReadingProgress: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+      const { KINDS } = await import('../config/kinds')
+
+      // Load raw events for display
+      const rawEvents: NostrEvent[] = []
+      const rawQueryPromise = queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [activeAccount.pubkey] }, {
+        onEvent: (evt) => {
+          if (firstEventTime === null) {
+            firstEventTime = performance.now() - start
+            setTFirstReadingProgress(Math.round(firstEventTime))
+          }
+          rawEvents.push(evt)
+          setReadingProgressEvents([...rawEvents])
+        }
+      })
+
+      // Load deduplicated results via controller (includes articles and external URLs)
+      const unsubProgress = readingProgressController.onProgress((progressMap) => {
+        setDeduplicatedProgressMap(new Map(progressMap))
+
+        // Regression guard: ensure keys include both naddr and raw URL forms when present
+        try {
+          const keys = Array.from(progressMap.keys())
+          const sample = keys.slice(0, 5).join(', ')
+          DebugBus.info('debug', `Progress keys sample: ${sample}`)
+        } catch { /* ignore */ }
+      })
+
+      // Run both in parallel
+      await Promise.all([
+        rawQueryPromise,
+        readingProgressController.start({ relayPool, eventStore, pubkey: activeAccount.pubkey, force: true })
+      ])
+      
+      unsubProgress()
+
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadReadingProgress(elapsed)
+      setLiveTiming(prev => ({ ...prev, loadReadingProgress: undefined }))
+
+      const finalMap = readingProgressController.getProgressMap()
+      DebugBus.info('debug', `Loaded ${rawEvents.length} raw events, deduplicated to ${finalMap.size} articles in ${elapsed}ms`)
+    } catch (err) {
+      console.error('Failed to load reading progress:', err)
+      DebugBus.error('debug', `Failed to load reading progress: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingReadingProgress(false)
+    }
+  }
+
+  const handleClearReadingProgress = () => {
+    setReadingProgressEvents([])
+    setTLoadReadingProgress(null)
+    setTFirstReadingProgress(null)
+    setDeduplicatedProgressMap(new Map())
+    DebugBus.info('debug', 'Cleared reading progress data')
+  }
+
+  const handleLoadMarkAsReadReactions = async () => {
+    if (!relayPool || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load mark-as-read reactions')
+      return
+    }
+
+    try {
+      setIsLoadingMarkAsRead(true)
+      setMarkAsReadReactions([])
+      setTLoadMarkAsRead(null)
+      setTFirstMarkAsRead(null)
+      DebugBus.info('debug', 'Loading mark-as-read reactions...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadMarkAsRead: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+      const { ARCHIVE_EMOJI } = await import('../services/reactionService')
+
+      // Load both kind:7 (reactions to events) and kind:17 (reactions to URLs)
+      const [kind7Events, kind17Events] = await Promise.all([
+        queryEvents(relayPool, { kinds: [7], authors: [activeAccount.pubkey] }, {
+          onEvent: (evt) => {
+            if (evt.content === ARCHIVE_EMOJI) {
+              if (firstEventTime === null) {
+                firstEventTime = performance.now() - start
+                setTFirstMarkAsRead(Math.round(firstEventTime))
+              }
+              setMarkAsReadReactions(prev => [...prev, evt])
+            }
+          }
+        }),
+        queryEvents(relayPool, { kinds: [17], authors: [activeAccount.pubkey] }, {
+          onEvent: (evt) => {
+            if (evt.content === ARCHIVE_EMOJI) {
+              if (firstEventTime === null) {
+                firstEventTime = performance.now() - start
+                setTFirstMarkAsRead(Math.round(firstEventTime))
+              }
+              setMarkAsReadReactions(prev => [...prev, evt])
+            }
+          }
+        })
+      ])
+
+      const totalEvents = kind7Events.length + kind17Events.length
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadMarkAsRead(elapsed)
+      setLiveTiming(prev => ({ ...prev, loadMarkAsRead: undefined }))
+
+      DebugBus.info('debug', `Loaded ${totalEvents} mark-as-read reactions in ${elapsed}ms`)
+    } catch (err) {
+      console.error('Failed to load mark-as-read reactions:', err)
+      DebugBus.error('debug', `Failed to load mark-as-read reactions: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingMarkAsRead(false)
+    }
+  }
+
+  const handleClearMarkAsRead = () => {
+    setMarkAsReadReactions([])
+    setTLoadMarkAsRead(null)
+    setTFirstMarkAsRead(null)
+    DebugBus.info('debug', 'Cleared mark-as-read reactions data')
+  }
+
+  const handleLoadRelayList = async () => {
+    if (!relayPool || !activeAccount?.pubkey) {
+      DebugBus.warn('debug', 'Please log in to load relay list')
+      return
+    }
+
+    try {
+      setIsLoadingRelayList(true)
+      setRelayListEvents([])
+      setTLoadRelayList(null)
+      setTFirstRelayList(null)
+      DebugBus.info('debug', 'Loading relay list (kind 10002)...')
+
+      const start = performance.now()
+      let firstEventTime: number | null = null
+      setLiveTiming(prev => ({ ...prev, loadRelayList: { startTime: start } }))
+
+      const { queryEvents } = await import('../services/dataFetch')
+
+      // Query for kind:10002 (relay list)
+      const events = await queryEvents(relayPool, { 
+        kinds: [10002], 
+        authors: [activeAccount.pubkey],
+        limit: 10
+      }, {
+        onEvent: (evt) => {
+          if (firstEventTime === null) {
+            firstEventTime = performance.now() - start
+            setTFirstRelayList(Math.round(firstEventTime))
+          }
+          setRelayListEvents(prev => [...prev, evt])
+        }
+      })
+      
+      const elapsed = Math.round(performance.now() - start)
+      setTLoadRelayList(elapsed)
+      setLiveTiming(prev => ({ ...prev, loadRelayList: undefined }))
+
+      DebugBus.info('debug', `Loaded ${events.length} relay list events in ${elapsed}ms`)
+      
+      // Log details about the events
+      events.forEach((event, index) => {
+        const relayCount = event.tags.filter(tag => tag[0] === 'r').length
+        DebugBus.info('debug', `Event ${index + 1}: ${relayCount} relays, created ${new Date(event.created_at * 1000).toISOString()}`)
+      })
+    } catch (err) {
+      console.error('Failed to load relay list:', err)
+      DebugBus.error('debug', `Failed to load relay list: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setIsLoadingRelayList(false)
+    }
+  }
+
+  const handleClearRelayList = () => {
+    setRelayListEvents([])
+    setTLoadRelayList(null)
+    setTFirstRelayList(null)
+    DebugBus.info('debug', 'Cleared relay list data')
+  }
+
   const handleLoadFriendsList = async () => {
     if (!relayPool || !activeAccount?.pubkey) {
       DebugBus.warn('debug', 'Please log in to load friends list')
@@ -552,7 +964,6 @@ const Debug: React.FC<DebugProps> = ({
     
     // Subscribe to controller updates to see streaming
     const unsubscribe = contactsController.onContacts((contacts) => {
-      console.log('[debug] Received contacts update:', contacts.size)
       setFriendsPubkeys(new Set(contacts))
     })
     
@@ -1070,6 +1481,353 @@ const Debug: React.FC<DebugProps> = ({
           )}
         </div>
 
+        {/* Writings Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Writings Loading</h3>
+          
+          <div className="mb-3 text-sm opacity-70">Quick load options:</div>
+          <div className="flex gap-2 mb-3 flex-wrap">
+            <button 
+              className="btn btn-secondary text-sm" 
+              onClick={handleLoadMyWritings}
+              disabled={isLoadingWritings || !relayPool || !activeAccount || !eventStore}
+            >
+              {isLoadingWritings ? (
+                <FontAwesomeIcon icon={faSpinner} className="animate-spin" />
+              ) : (
+                'Load My Writings'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary text-sm" 
+              onClick={handleLoadFriendsWritings}
+              disabled={isLoadingWritings || !relayPool || !activeAccount}
+            >
+              {isLoadingWritings ? (
+                <FontAwesomeIcon icon={faSpinner} className="animate-spin" />
+              ) : (
+                'Load Friends Writings'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary text-sm" 
+              onClick={handleLoadNostrverseWritings}
+              disabled={isLoadingWritings || !relayPool}
+            >
+              {isLoadingWritings ? (
+                <FontAwesomeIcon icon={faSpinner} className="animate-spin" />
+              ) : (
+                'Load Nostrverse Writings'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary text-sm ml-auto" 
+              onClick={handleClearWritings}
+              disabled={writingPosts.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+
+          <div className="mb-3 flex gap-2 flex-wrap">
+            <Stat label="total" value={tLoadWritings} />
+            <Stat label="first event" value={tFirstWriting} />
+          </div>
+
+          {writingPosts.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Writings ({writingPosts.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {writingPosts.map((post, idx) => {
+                  const title = post.title
+                  const summary = post.summary
+                  const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Writing #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Author: {post.author.slice(0, 16)}...</div>
+                        <div>Published: {post.published ? new Date(post.published * 1000).toLocaleString() : new Date(post.event.created_at * 1000).toLocaleString()}</div>
+                        <div>d-tag: {dTag || '(empty)'}</div>
+                      </div>
+                      <div className="mt-1">
+                        <div className="font-semibold text-[11px]">Title:</div>
+                        <div>&quot;{title}&quot;</div>
+                      </div>
+                      {summary && (
+                        <div className="mt-1 text-[11px] opacity-70">
+                          <div>Summary: {summary.substring(0, 100)}{summary.length > 100 ? '...' : ''}</div>
+                        </div>
+                      )}
+                      {post.image && (
+                        <div className="mt-1 text-[11px] opacity-70">
+                          <div>Image: {post.image.substring(0, 40)}...</div>
+                        </div>
+                      )}
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {post.event.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Reading Progress Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Reading Progress Loading</h3>
+          <div className="text-sm opacity-70 mb-3">Test reading progress loading (kind: 39802) for the logged-in user</div>
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadReadingProgress}
+              disabled={isLoadingReadingProgress || !relayPool || !activeAccount}
+            >
+              {isLoadingReadingProgress ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Reading Progress'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearReadingProgress}
+              disabled={readingProgressEvents.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          <div className="mb-3 flex gap-2 flex-wrap">
+            <Stat label="total" value={tLoadReadingProgress} />
+            <Stat label="first event" value={tFirstReadingProgress} />
+          </div>
+          {readingProgressEvents.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Reading Progress ({readingProgressEvents.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {readingProgressEvents.map((evt, idx) => {
+                  const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1]
+                  const aTag = evt.tags?.find((t: string[]) => t[0] === 'a')?.[1]
+                  const content = evt.content || ''
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Reading Progress #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                      </div>
+                      <div className="mt-1">
+                        {dTag && <div>d-tag: {dTag}</div>}
+                        {aTag && <div className="text-[11px] opacity-70">#a: {aTag}</div>}
+                        {content && <div>Progress: {content}</div>}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+
+          {deduplicatedProgressMap.size > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Deduplicated Reading Progress ({deduplicatedProgressMap.size} articles):</div>
+              
+              {/* Category breakdown */}
+              <div className="mb-3 p-2 bg-purple-50 dark:bg-purple-900/20 rounded border border-purple-200 dark:border-purple-700">
+                <div className="text-sm font-semibold mb-2">Breakdown by Category:</div>
+                <div className="space-y-1">
+                  {(() => {
+                    let unopened = 0, started = 0, reading = 0, completed = 0
+                    for (const progress of deduplicatedProgressMap.values()) {
+                      if (progress === 0) unopened++
+                      else if (progress > 0 && progress <= 0.10) started++
+                      else if (progress > 0.10 && progress <= 0.94) reading++
+                      else if (progress >= 0.95) completed++
+                    }
+                    return (
+                      <>
+                        <div className="flex justify-between text-xs">
+                          <span>Unopened (0%):</span>
+                          <span className="font-semibold">{unopened}</span>
+                        </div>
+                        <div className="flex justify-between text-xs">
+                          <span>Started (0% &lt; progress ≤ 10%):</span>
+                          <span className="font-semibold">{started}</span>
+                        </div>
+                        <div className="flex justify-between text-xs bg-green-100 dark:bg-green-900/30 px-1 py-0.5 rounded">
+                          <span>Reading (10% &lt; progress ≤ 94%) ✓:</span>
+                          <span className="font-semibold text-green-700 dark:text-green-400">{reading}</span>
+                        </div>
+                        <div className="flex justify-between text-xs">
+                          <span>Completed (≥ 95%):</span>
+                          <span className="font-semibold">{completed}</span>
+                        </div>
+                      </>
+                    )
+                  })()}
+                </div>
+              </div>
+              
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {Array.from(deduplicatedProgressMap.entries()).map(([articleId, progress], idx) => {
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-700">
+                      <div className="font-semibold mb-1">Article #{idx + 1}</div>
+                      <div className="mt-1">
+                        <div className="break-all">ID: {articleId}</div>
+                        <div className="mt-1">
+                          <div className="text-[11px] opacity-70">Progress: {(progress * 100).toFixed(1)}%</div>
+                          <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-1.5 mt-1 overflow-hidden">
+                            <div 
+                              className="bg-blue-600 h-full" 
+                              style={{ width: `${progress * 100}%` }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Mark-as-read Reactions Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Mark-as-read Reactions Loading</h3>
+          <div className="text-sm opacity-70 mb-3">Test loading mark-as-read reactions (kind: 7 and 17) with the ARCHIVE_EMOJI for the logged-in user</div>
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadMarkAsReadReactions}
+              disabled={isLoadingMarkAsRead || !relayPool || !activeAccount}
+            >
+              {isLoadingMarkAsRead ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Mark-as-read Reactions'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearMarkAsRead}
+              disabled={markAsReadReactions.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          <div className="mb-3 flex gap-2 flex-wrap">
+            <Stat label="total" value={tLoadMarkAsRead} />
+            <Stat label="first event" value={tFirstMarkAsRead} />
+          </div>
+          {markAsReadReactions.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Mark-as-read Reactions ({markAsReadReactions.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {markAsReadReactions.map((evt, idx) => {
+                  const eTag = evt.tags?.find((t: string[]) => t[0] === 'e')?.[1]
+                  const rTag = evt.tags?.find((t: string[]) => t[0] === 'r')?.[1]
+                  const pTag = evt.tags?.find((t: string[]) => t[0] === 'p')?.[1]
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Mark-as-read Reaction #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Kind: {evt.kind}</div>
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                      </div>
+                      <div className="mt-1">
+                        <div>Emoji: {evt.content}</div>
+                        {eTag && <div className="text-[11px] opacity-70">#e: {eTag.slice(0, 16)}...</div>}
+                        {rTag && <div className="text-[11px] opacity-70">#r: {rTag.length > 60 ? rTag.substring(0, 60) + '...' : rTag}</div>}
+                        {pTag && <div className="text-[11px] opacity-70">#p: {pTag.slice(0, 16)}...</div>}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Relay List Loading Section */}
+        <div className="settings-section">
+          <h3 className="section-title">Relay List Loading (kind 10002)</h3>
+          <div className="text-sm opacity-70 mb-3">Load your relay list to debug dynamic relay integration:</div>
+          
+          <div className="flex gap-2 mb-3 items-center">
+            <button 
+              className="btn btn-primary" 
+              onClick={handleLoadRelayList}
+              disabled={isLoadingRelayList || !relayPool || !activeAccount}
+            >
+              {isLoadingRelayList ? (
+                <>
+                  <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2" />
+                  Loading...
+                </>
+              ) : (
+                'Load Relay List'
+              )}
+            </button>
+            <button 
+              className="btn btn-secondary ml-auto" 
+              onClick={handleClearRelayList}
+              disabled={relayListEvents.length === 0}
+            >
+              Clear
+            </button>
+          </div>
+          
+          <div className="flex gap-4 mb-3 text-sm">
+            <Stat label="total" value={tLoadRelayList} />
+            <Stat label="first event" value={tFirstRelayList} />
+          </div>
+          {relayListEvents.length > 0 && (
+            <div className="mb-3">
+              <div className="text-sm opacity-70 mb-2">Loaded Relay List Events ({relayListEvents.length}):</div>
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {relayListEvents.map((evt, idx) => {
+                  const relayTags = evt.tags?.filter((t: string[]) => t[0] === 'r') || []
+                  
+                  return (
+                    <div key={idx} className="font-mono text-xs p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                      <div className="font-semibold mb-1">Relay List Event #{idx + 1}</div>
+                      <div className="opacity-70 mb-1">
+                        <div>Kind: {evt.kind}</div>
+                        <div>Author: {evt.pubkey.slice(0, 16)}...</div>
+                        <div>Created: {new Date(evt.created_at * 1000).toLocaleString()}</div>
+                        <div>Relays: {relayTags.length}</div>
+                      </div>
+                      <div className="mt-1">
+                        <div className="text-[11px] opacity-70 mb-1">Relay URLs:</div>
+                        {relayTags.map((tag, tagIdx) => (
+                          <div key={tagIdx} className="text-[10px] opacity-60 break-all">
+                            {tag[1]} {tag[2] ? `(${tag[2]})` : ''}
+                          </div>
+                        ))}
+                      </div>
+                      <div className="opacity-50 mt-1 text-[10px] break-all">ID: {evt.id}</div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
         {/* Web of Trust Section */}
         <div className="settings-section">
           <h3 className="section-title">Web of Trust</h3>

src/components/EventViewer.tsx

@@ -0,0 +1 @@
+

src/components/Explore.tsx

@@ -1,34 +1,40 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react'
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faPersonHiking, faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
 import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
-import { IEventStore, Helpers } from 'applesauce-core'
-import { nip19, NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { nip19 } from 'nostr-tools'
 import { useNavigate } from 'react-router-dom'
-import { fetchContacts } from '../services/contactService'
+// Contacts are managed via controller subscription
 import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreService'
 import { fetchHighlightsFromAuthors } from '../services/highlightService'
 import { fetchProfiles } from '../services/profileService'
 import { fetchNostrverseBlogPosts, fetchNostrverseHighlights } from '../services/nostrverseService'
+import { nostrverseHighlightsController } from '../services/nostrverseHighlightsController'
 import { highlightsController } from '../services/highlightsController'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from '../services/settingsService'
 import BlogPostCard from './BlogPostCard'
 import { HighlightItem } from './HighlightItem'
-import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
+import { getCachedPosts, setCachedPosts, getCachedHighlights, setCachedHighlights } from '../services/exploreCache'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { classifyHighlights } from '../utils/highlightClassification'
 import { HighlightVisibility } from './HighlightsPanel'
-import { KINDS } from '../config/kinds'
-import { eventToHighlight } from '../services/highlightEventProcessor'
-import { useStoreTimeline } from '../hooks/useStoreTimeline'
+// import { KINDS } from '../config/kinds'
+// import { eventToHighlight } from '../services/highlightEventProcessor'
+// import { useStoreTimeline } from '../hooks/useStoreTimeline'
 import { dedupeHighlightsById, dedupeWritingsByReplaceable } from '../utils/dedupe'
+import { writingsController } from '../services/writingsController'
+import { nostrverseWritingsController } from '../services/nostrverseWritingsController'
+import { readingProgressController } from '../services/readingProgressController'
+import { contactsController } from '../services/contactsController'
 
-const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
+// Accessors from Helpers (currently unused here)
+// const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
 interface ExploreProps {
   relayPool: RelayPool
@@ -48,42 +54,242 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [loading, setLoading] = useState(true)
   const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [hasLoadedNostrverse, setHasLoadedNostrverse] = useState(false)
+  const [hasLoadedMine, setHasLoadedMine] = useState(false)
+  const [hasLoadedNostrverseHighlights, setHasLoadedNostrverseHighlights] = useState(false)
+  const hasHydratedRef = useRef(false)
   
   // Get myHighlights directly from controller
-  const [myHighlights, setMyHighlights] = useState<Highlight[]>([])
-  const [myHighlightsLoading, setMyHighlightsLoading] = useState(false)
+  const [/* myHighlights */, setMyHighlights] = useState<Highlight[]>([])
+  // Remove unused loading state to avoid warnings
+  
+  // Reading progress state (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
   
   // Load cached content from event store (instant display)
-  const cachedHighlights = useStoreTimeline(eventStore, { kinds: [KINDS.Highlights] }, eventToHighlight, [])
+  // const cachedHighlights = useStoreTimeline(eventStore, { kinds: [KINDS.Highlights] }, eventToHighlight, [])
   
-  const toBlogPostPreview = useCallback((event: NostrEvent): BlogPostPreview => ({
-    event,
-    title: getArticleTitle(event) || 'Untitled',
-    summary: getArticleSummary(event),
-    image: getArticleImage(event),
-    published: getArticlePublished(event),
-    author: event.pubkey
-  }), [])
+  // const toBlogPostPreview = useCallback((event: NostrEvent): BlogPostPreview => ({
+  //   event,
+  //   title: getArticleTitle(event) || 'Untitled',
+  //   summary: getArticleSummary(event),
+  //   image: getArticleImage(event),
+  //   published: getArticlePublished(event),
+  //   author: event.pubkey
+  // }), [])
   
-  const cachedWritings = useStoreTimeline(eventStore, { kinds: [30023] }, toBlogPostPreview, [])
+  // const cachedWritings = useStoreTimeline(eventStore, { kinds: [30023] }, toBlogPostPreview, [])
+
   
-  // Visibility filters (defaults from settings)
-  const [visibility, setVisibility] = useState<HighlightVisibility>({
-    nostrverse: settings?.defaultExploreScopeNostrverse ?? false,
-    friends: settings?.defaultExploreScopeFriends ?? true,
-    mine: settings?.defaultExploreScopeMine ?? false
+  
+  // Visibility filters - load from localStorage first, fallback to settings
+  const [visibility, setVisibility] = useState<HighlightVisibility>(() => {
+    // Try to load from localStorage first
+    try {
+      const saved = localStorage.getItem('exploreScopeVisibility')
+      if (saved) {
+        const parsed = JSON.parse(saved)
+        // Validate that at least one scope is enabled
+        if (parsed.nostrverse || parsed.friends || parsed.mine) {
+          return parsed
+        }
+      }
+    } catch (err) {
+      console.warn('Failed to load explore scope from localStorage:', err)
+    }
+    
+    // Fallback to settings or defaults
+    return {
+      nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
+      friends: settings?.defaultExploreScopeFriends ?? true,
+      mine: settings?.defaultExploreScopeMine ?? false
+    }
   })
 
+  // Ensure at least one scope remains active
+  const toggleScope = useCallback((key: 'nostrverse' | 'friends' | 'mine') => {
+    setVisibility(prev => {
+      const next = { ...prev, [key]: !prev[key] }
+      if (!next.nostrverse && !next.friends && !next.mine) {
+        return prev // ignore toggle that would disable all scopes
+      }
+      // Persist to localStorage
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(next))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
+      return next
+    })
+  }, [])
+
   // Subscribe to highlights controller
   useEffect(() => {
     const unsubHighlights = highlightsController.onHighlights(setMyHighlights)
-    const unsubLoading = highlightsController.onLoading(setMyHighlightsLoading)
     return () => {
       unsubHighlights()
-      unsubLoading()
     }
   }, [])
 
+  // Subscribe to contacts stream and mirror into local state
+  useEffect(() => {
+    const unsubscribe = contactsController.onContacts((contacts) => {
+      setFollowedPubkeys(new Set(contacts))
+    })
+    return () => unsubscribe()
+  }, [])
+
+  // Ensure contacts controller is started for the active account (non-blocking)
+  useEffect(() => {
+    if (relayPool && activeAccount?.pubkey) {
+      contactsController.start({ relayPool, pubkey: activeAccount.pubkey }).catch(() => {})
+    }
+  }, [relayPool, activeAccount?.pubkey])
+
+  // Subscribe to nostrverse highlights controller for global stream
+  useEffect(() => {
+    const apply = (incoming: Highlight[]) => {
+      setHighlights(prev => {
+        const byId = new Map(prev.map(h => [h.id, h]))
+        for (const h of incoming) byId.set(h.id, h)
+        return Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
+      })
+    }
+    // seed immediately
+    apply(nostrverseHighlightsController.getHighlights())
+    const unsub = nostrverseHighlightsController.onHighlights(apply)
+    return () => unsub()
+  }, [])
+
+  // Subscribe to nostrverse writings controller for global stream
+  useEffect(() => {
+    const apply = (incoming: BlogPostPreview[]) => {
+      setBlogPosts(prev => {
+        const byKey = new Map<string, BlogPostPreview>()
+        for (const p of prev) {
+          const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${p.author}:${dTag}`
+          byKey.set(key, p)
+        }
+        for (const p of incoming) {
+          const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${p.author}:${dTag}`
+          const existing = byKey.get(key)
+          if (!existing || p.event.created_at > existing.event.created_at) byKey.set(key, p)
+        }
+        return Array.from(byKey.values()).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+    }
+    apply(nostrverseWritingsController.getWritings())
+    const unsub = nostrverseWritingsController.onWritings(apply)
+    return () => unsub()
+  }, [])
+
+  // Subscribe to writings controller for "mine" posts and seed immediately
+  useEffect(() => {
+    // Seed from controller's current state
+    const seed = writingsController.getWritings()
+    if (seed.length > 0) {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, ...seed])
+        return merged.sort((a, b) => {
+          const timeA = a.published || a.event.created_at
+          const timeB = b.published || b.event.created_at
+          return timeB - timeA
+        })
+      })
+    }
+
+    // Stream updates
+    const unsub = writingsController.onWritings((posts) => {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, ...posts])
+        return merged.sort((a, b) => {
+          const timeA = a.published || a.event.created_at
+          const timeB = b.published || b.event.created_at
+          return timeB - timeA
+        })
+      })
+    })
+
+    return () => unsub()
+  }, [])
+  
+  // Subscribe to reading progress controller
+  useEffect(() => {
+    // Get initial state immediately
+    const initialMap = readingProgressController.getProgressMap()
+    setReadingProgressMap(initialMap)
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress((newMap) => {
+      setReadingProgressMap(newMap)
+    })
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+  
+  // Load reading progress data when logged in
+  useEffect(() => {
+    if (!activeAccount?.pubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: activeAccount.pubkey,
+      force: refreshTrigger > 0
+    })
+  }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])
+
+  // Update visibility when settings/login state changes
+  useEffect(() => {
+    // Check if user has a saved preference
+    const hasSavedPreference = (() => {
+      try {
+        return localStorage.getItem('exploreScopeVisibility') !== null
+      } catch {
+        return false
+      }
+    })()
+    
+    // Only reset to defaults if no saved preference exists
+    if (hasSavedPreference) {
+      return
+    }
+    
+    if (!activeAccount) {
+      // When logged out, show nostrverse by default
+      const defaultVisibility = { nostrverse: true, friends: false, mine: false }
+      setVisibility(defaultVisibility)
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(defaultVisibility))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
+      setHasLoadedNostrverse(true) // logged out path loads nostrverse immediately
+      setHasLoadedNostrverseHighlights(true)
+    } else {
+      // When logged in, use settings defaults immediately
+      const defaultVisibility = {
+        nostrverse: settings?.defaultExploreScopeNostrverse ?? false,
+        friends: settings?.defaultExploreScopeFriends ?? true,
+        mine: settings?.defaultExploreScopeMine ?? false
+      }
+      setVisibility(defaultVisibility)
+      try {
+        localStorage.setItem('exploreScopeVisibility', JSON.stringify(defaultVisibility))
+      } catch (err) {
+        console.warn('Failed to save explore scope to localStorage:', err)
+      }
+      setHasLoadedNostrverse(false)
+      setHasLoadedNostrverseHighlights(false)
+    }
+  }, [activeAccount, settings?.defaultExploreScopeNostrverse, settings?.defaultExploreScopeFriends, settings?.defaultExploreScopeMine])
+
   // Update local state when prop changes
   useEffect(() => {
     if (propActiveTab) {
@@ -91,211 +297,164 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     }
   }, [propActiveTab])
 
-  useEffect(() => {
-    const loadData = async () => {
-      if (!activeAccount) {
-        setLoading(false)
-        return
-      }
+  // Load initial data and refresh on triggers
+  const loadData = useCallback(() => {
+    if (!relayPool) return
 
-      try {
-        // show spinner but keep existing data
-        setLoading(true)
+    // Seed from cache for instant UI
+    if (activeAccount) {
+      const cachedPosts = getCachedPosts(activeAccount.pubkey)
+      if (cachedPosts && cachedPosts.length > 0) setBlogPosts(cachedPosts)
+      const cached = getCachedHighlights(activeAccount.pubkey)
+      if (cached && cached.length > 0) setHighlights(cached)
+    }
 
-        // Seed from in-memory cache if available to avoid empty flash
-        const memoryCachedPosts = getCachedPosts(activeAccount.pubkey)
-        if (memoryCachedPosts && memoryCachedPosts.length > 0) {
-          setBlogPosts(prev => prev.length === 0 ? memoryCachedPosts : prev)
-        }
-        const memoryCachedHighlights = getCachedHighlights(activeAccount.pubkey)
-        if (memoryCachedHighlights && memoryCachedHighlights.length > 0) {
-          setHighlights(prev => prev.length === 0 ? memoryCachedHighlights : prev)
-        }
-        
-        // Seed with cached content from event store (instant display)
-        if (cachedHighlights.length > 0 || myHighlights.length > 0) {
-          const merged = dedupeHighlightsById([...cachedHighlights, ...myHighlights])
-          setHighlights(prev => {
-            const all = dedupeHighlightsById([...prev, ...merged])
-            return all.sort((a, b) => b.created_at - a.created_at)
-          })
-        }
-        
-        // Seed with cached writings from event store
-        if (cachedWritings.length > 0) {
-          setBlogPosts(prev => {
-            const all = dedupeWritingsByReplaceable([...prev, ...cachedWritings])
-            return all.sort((a, b) => {
-              const timeA = a.published || a.event.created_at
-              const timeB = b.published || b.event.created_at
-              return timeB - timeA
-            })
-          })
-        }
+    setLoading(true)
 
-        // Fetch the user's contacts (friends)
-        const contacts = await fetchContacts(
+    try {
+      // Prepare parallel fetches
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+
+      // Nostrverse writings: subscribe-style via onPost; hydrate on first post
+      if (!activeAccount || (activeAccount && visibility.nostrverse)) {
+        fetchNostrverseBlogPosts(
           relayPool,
-          activeAccount.pubkey,
-          (partial) => {
-            // Store followed pubkeys for highlight classification
-            setFollowedPubkeys(partial)
-            // When local contacts are available, kick off early fetch
-            if (partial.size > 0) {
-              const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-              const partialArray = Array.from(partial)
-              
-              // Fetch blog posts
-              fetchBlogPostsFromAuthors(
-                relayPool,
-                partialArray,
-                relayUrls,
-                (post) => {
-                  setBlogPosts((prev) => {
-                    // Deduplicate by author:d-tag (replaceable event key)
-                    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                    const key = `${post.author}:${dTag}`
-                    const existingIndex = prev.findIndex(p => {
-                      const pDTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                      return `${p.author}:${pDTag}` === key
-                    })
-                    
-                    // If exists, only replace if this one is newer
-                    if (existingIndex >= 0) {
-                      const existing = prev[existingIndex]
-                      if (post.event.created_at <= existing.event.created_at) {
-                        return prev // Keep existing (newer or same)
-                      }
-                      // Replace with newer version
-                      const next = [...prev]
-                      next[existingIndex] = post
-                      return next.sort((a, b) => {
-                        const timeA = a.published || a.event.created_at
-                        const timeB = b.published || b.event.created_at
-                        return timeB - timeA
-                      })
-                    }
-                    
-                    // New post, add it
-                    const next = [...prev, post]
-                    return next.sort((a, b) => {
-                      const timeA = a.published || a.event.created_at
-                      const timeB = b.published || b.event.created_at
-                      return timeB - timeA
-                    })
-                  })
-                  setCachedPosts(activeAccount.pubkey, upsertCachedPost(activeAccount.pubkey, post))
-                }
-              ).then((all) => {
-                setBlogPosts((prev) => {
-                  // Deduplicate by author:d-tag (replaceable event key)
-                  const byKey = new Map<string, BlogPostPreview>()
-                  
-                  // Add existing posts
-                  for (const p of prev) {
-                    const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                    const key = `${p.author}:${dTag}`
-                    byKey.set(key, p)
-                  }
-                  
-                  // Merge in new posts (keeping newer versions)
-                  for (const post of all) {
-                    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
-                    const key = `${post.author}:${dTag}`
-                    const existing = byKey.get(key)
-                    if (!existing || post.event.created_at > existing.event.created_at) {
-                      byKey.set(key, post)
-                    }
-                  }
-                  
-                  const merged = Array.from(byKey.values()).sort((a, b) => {
-                    const timeA = a.published || a.event.created_at
-                    const timeB = b.published || b.event.created_at
-                    return timeB - timeA
-                  })
-                  setCachedPosts(activeAccount.pubkey, merged)
-                  return merged
-                })
-              })
-              
-              // Fetch highlights
-              fetchHighlightsFromAuthors(
-                relayPool,
-                partialArray,
-                (highlight) => {
-                  setHighlights((prev) => {
-                    const exists = prev.some(h => h.id === highlight.id)
-                    if (exists) return prev
-                    const next = [...prev, highlight]
-                    return next.sort((a, b) => b.created_at - a.created_at)
-                  })
-                  setCachedHighlights(activeAccount.pubkey, upsertCachedHighlight(activeAccount.pubkey, highlight))
-                }
-              ).then((all) => {
-                setHighlights((prev) => {
-                  const byId = new Map(prev.map(h => [h.id, h]))
-                  for (const highlight of all) byId.set(highlight.id, highlight)
-                  const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
-                  setCachedHighlights(activeAccount.pubkey, merged)
-                  return merged
-                })
-              })
-            }
+          relayUrls,
+          50,
+          eventStore || undefined,
+          (post) => {
+            setBlogPosts(prev => {
+              const merged = dedupeWritingsByReplaceable([...prev, post])
+              if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
+              return merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+            })
+            if (!hasHydratedRef.current) { hasHydratedRef.current = true; setLoading(false) }
           }
-        )
-        
-        // Always proceed to load nostrverse content even if no contacts
-        // (removed blocking error for empty contacts)
-
-        // Store final followed pubkeys
-        setFollowedPubkeys(contacts)
-
-        // Fetch both friends content and nostrverse content in parallel
-        const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-        const contactsArray = Array.from(contacts)
-        const [friendsPosts, friendsHighlights, nostrversePosts, nostriverseHighlights] = await Promise.all([
-          fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls),
-          fetchHighlightsFromAuthors(relayPool, contactsArray),
-          fetchNostrverseBlogPosts(relayPool, relayUrls, 50, eventStore || undefined),
-          fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
-        ])
-
-        // Merge and deduplicate all posts
-        const allPosts = [...friendsPosts, ...nostrversePosts]
-        const uniquePosts = dedupeWritingsByReplaceable(allPosts).sort((a, b) => {
-          const timeA = a.published || a.event.created_at
-          const timeB = b.published || b.event.created_at
-          return timeB - timeA
-        })
-
-        // Merge and deduplicate all highlights (mine from controller + friends + nostrverse)
-        const allHighlights = [...myHighlights, ...friendsHighlights, ...nostriverseHighlights]
-        const uniqueHighlights = dedupeHighlightsById(allHighlights).sort((a, b) => b.created_at - a.created_at)
-
-        // Fetch profiles for all blog post authors to cache them
-        if (uniquePosts.length > 0) {
-          const authorPubkeys = Array.from(new Set(uniquePosts.map(p => p.author)))
-          fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(err => {
-            console.error('Failed to fetch author profiles:', err)
-          })
-        }
-
-        // No blocking errors - let empty states handle messaging
-        setBlogPosts(uniquePosts)
-        setCachedPosts(activeAccount.pubkey, uniquePosts)
-
-        setHighlights(uniqueHighlights)
-        setCachedHighlights(activeAccount.pubkey, uniqueHighlights)
+        ).then((nostrversePosts) => {
+          setBlogPosts(prev => dedupeWritingsByReplaceable([...prev, ...nostrversePosts]).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at)))
+        }).catch(() => {})
+      }
       } catch (err) {
         console.error('Failed to load data:', err)
         // No blocking error - user can pull-to-refresh
       } finally {
-        setLoading(false)
+        // loading is already turned off after seeding
       }
-    }
+  }, [relayPool, activeAccount, eventStore, visibility.nostrverse])
 
+  useEffect(() => {
     loadData()
-  }, [relayPool, activeAccount, refreshTrigger, eventStore, settings, myHighlights, cachedHighlights, cachedWritings])
+  }, [loadData, refreshTrigger])
+
+  // Kick off friends fetches reactively when contacts arrive
+  useEffect(() => {
+    if (!relayPool) return
+    if (followedPubkeys.size === 0) return
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    const contactsArray = Array.from(followedPubkeys)
+
+    fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls, (post) => {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, post])
+        if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
+        // Pre-cache profiles in background
+        const authorPubkeys = Array.from(new Set(merged.map(p => p.author)))
+        fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(() => {})
+        return merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+      if (!hasHydratedRef.current) { hasHydratedRef.current = true; setLoading(false) }
+    }, 100, eventStore).then((friendsPosts) => {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, ...friendsPosts])
+        if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
+        return merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+    }).catch(() => {})
+
+    fetchHighlightsFromAuthors(relayPool, contactsArray, (highlight) => {
+      setHighlights(prev => {
+        const merged = dedupeHighlightsById([...prev, highlight])
+        if (activeAccount) setCachedHighlights(activeAccount.pubkey, merged)
+        return merged.sort((a, b) => b.created_at - a.created_at)
+      })
+      if (!hasHydratedRef.current) { hasHydratedRef.current = true; setLoading(false) }
+    }, eventStore || undefined).then((friendsHighlights) => {
+      setHighlights(prev => {
+        const merged = dedupeHighlightsById([...prev, ...friendsHighlights])
+        if (activeAccount) setCachedHighlights(activeAccount.pubkey, merged)
+        return merged.sort((a, b) => b.created_at - a.created_at)
+      })
+    }).catch(() => {})
+  }, [relayPool, followedPubkeys, eventStore, settings, activeAccount])
+
+  // Lazy-load nostrverse writings when user toggles it on (logged in)
+  useEffect(() => {
+    if (!activeAccount || !relayPool || !visibility.nostrverse || hasLoadedNostrverse) return
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    setHasLoadedNostrverse(true)
+    fetchNostrverseBlogPosts(
+      relayPool,
+      relayUrls,
+      50,
+      eventStore || undefined,
+      (post) => {
+        setBlogPosts(prev => {
+          const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${post.author}:${dTag}`
+          const existingIndex = prev.findIndex(p => {
+            const pDTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+            return `${p.author}:${pDTag}` === key
+          })
+          if (existingIndex >= 0) {
+            const existing = prev[existingIndex]
+            if (post.event.created_at <= existing.event.created_at) return prev
+            const next = [...prev]
+            next[existingIndex] = post
+            return next.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+          }
+          const next = [...prev, post]
+          return next.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+        })
+      }
+    ).then((finalPosts) => {
+      // Ensure final deduped list
+      setBlogPosts(prev => {
+        const byKey = new Map<string, BlogPostPreview>()
+        for (const p of [...prev, ...finalPosts]) {
+          const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${p.author}:${dTag}`
+          const existing = byKey.get(key)
+          if (!existing || p.event.created_at > existing.event.created_at) byKey.set(key, p)
+        }
+        return Array.from(byKey.values()).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+    }).catch(() => {})
+
+    fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
+      .then((nostriverseHighlights) => {
+        setHighlights(prev => dedupeHighlightsById([...prev, ...nostriverseHighlights]).sort((a, b) => b.created_at - a.created_at))
+      }).catch(() => {})
+  }, [activeAccount, relayPool, visibility.nostrverse, hasLoadedNostrverse, eventStore])
+
+  // Lazy-load nostrverse highlights when user toggles it on (logged in)
+  useEffect(() => {
+    if (!activeAccount || !relayPool || !visibility.nostrverse || hasLoadedNostrverseHighlights) return
+    setHasLoadedNostrverseHighlights(true)
+    fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
+      .then((hl) => {
+        if (hl && hl.length > 0) {
+          setHighlights(prev => dedupeHighlightsById([...prev, ...hl]).sort((a, b) => b.created_at - a.created_at))
+        }
+      })
+      .catch(() => {})
+  }, [visibility.nostrverse, activeAccount, relayPool, eventStore, hasLoadedNostrverseHighlights])
+
+  // Lazy-load my writings when user toggles "mine" on (logged in)
+  // No direct fetch here; writingsController streams my posts centrally
+  useEffect(() => {
+    if (!activeAccount || !visibility.mine || hasLoadedMine) return
+    setHasLoadedMine(true)
+  }, [visibility.mine, activeAccount, hasLoadedMine])
 
   // Pull-to-refresh
   const { isRefreshing, pullPosition } = usePullToRefresh({
@@ -333,15 +492,31 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     })
   }, [highlights, activeAccount?.pubkey, followedPubkeys, visibility])
 
+  // Dedupe and sort posts once for rendering
+  const uniqueSortedPosts = useMemo(() => {
+    const unique = dedupeWritingsByReplaceable(blogPosts)
+    return unique.sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }, [blogPosts])
+
   // Filter blog posts by future dates and visibility, and add level classification
   const filteredBlogPosts = useMemo(() => {
     const maxFutureTime = Date.now() / 1000 + (24 * 60 * 60) // 1 day from now
-    return blogPosts
+    return uniqueSortedPosts
       .filter(post => {
         // Filter out future dates
         const publishedTime = post.published || post.event.created_at
         if (publishedTime > maxFutureTime) return false
         
+        // Hide bot authors by profile display name if setting enabled
+        if (settings?.hideBotArticlesByName !== false) {
+          // Profile resolution and filtering is handled in BlogPostCard via ProfileModel
+          // Keep list intact here; individual cards will render null if author is a bot
+        }
+        
         // Apply visibility filters
         const isMine = activeAccount && post.author === activeAccount.pubkey
         const isFriend = followedPubkeys.has(post.author)
@@ -360,7 +535,29 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         const level: 'mine' | 'friends' | 'nostrverse' = isMine ? 'mine' : isFriend ? 'friends' : 'nostrverse'
         return { ...post, level }
       })
-  }, [blogPosts, activeAccount, followedPubkeys, visibility])
+  }, [uniqueSortedPosts, activeAccount, followedPubkeys, visibility, settings?.hideBotArticlesByName])
+  
+  // Helper to get reading progress for a post
+  const getReadingProgress = useCallback((post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) {
+      return undefined
+    }
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      const progress = readingProgressMap.get(naddr)
+      
+      return progress
+    } catch (err) {
+      console.error('[progress] ❌ Error encoding naddr:', err)
+      return undefined
+    }
+  }, [readingProgressMap])
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -375,8 +572,10 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           )
         }
         return filteredBlogPosts.length === 0 ? (
-          <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+          <div className="explore-grid">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <BlogPostSkeleton key={i} />
+            ))}
           </div>
         ) : (
           <div className="explore-grid">
@@ -386,6 +585,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
                 post={post}
                 href={getPostUrl(post)}
                 level={post.level}
+                readingProgress={getReadingProgress(post)}
+                hideBotByName={settings?.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -403,7 +604,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         }
         return classifiedHighlights.length === 0 ? (
           <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+            <span>No highlights to show for the selected scope.</span>
           </div>
         ) : (
           <div className="explore-grid">
@@ -422,9 +623,9 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     }
   }
 
-  // Show content progressively - no blocking error screens
+  // Show skeletons while first load in this session
   const hasData = highlights.length > 0 || blogPosts.length > 0
-  const showSkeletons = (loading || myHighlightsLoading) && !hasData
+  const showSkeletons = loading && !hasData
 
   return (
     <div className="explore-container">
@@ -434,7 +635,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       />
       <div className="explore-header">
         <h1>
-          <FontAwesomeIcon icon={faNewspaper} />
+          <FontAwesomeIcon icon={faPersonHiking} />
           Explore
         </h1>
         
@@ -451,7 +652,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           />
           <IconButton
             icon={faNetworkWired}
-            onClick={() => setVisibility({ ...visibility, nostrverse: !visibility.nostrverse })}
+            onClick={() => toggleScope('nostrverse')}
             title="Toggle nostrverse content"
             ariaLabel="Toggle nostrverse content"
             variant="ghost"
@@ -462,7 +663,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           />
           <IconButton
             icon={faUserGroup}
-            onClick={() => setVisibility({ ...visibility, friends: !visibility.friends })}
+            onClick={() => toggleScope('friends')}
             title={activeAccount ? "Toggle friends content" : "Login to see friends content"}
             ariaLabel="Toggle friends content"
             variant="ghost"
@@ -474,7 +675,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           />
           <IconButton
             icon={faUser}
-            onClick={() => setVisibility({ ...visibility, mine: !visibility.mine })}
+            onClick={() => toggleScope('mine')}
             title={activeAccount ? "Toggle my content" : "Login to see your content"}
             ariaLabel="Toggle my content"
             variant="ghost"
@@ -506,7 +707,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         </div>
       </div>
 
-      <div key={activeTab}>
+      <div>
         {renderTabContent()}
       </div>
     </div>

src/components/HighlightButton.tsx

@@ -45,7 +45,7 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
         className="highlight-fab"
         style={{
           position: 'fixed',
-          bottom: '32px',
+          bottom: '80px',
           right: '32px',
           zIndex: 1000,
           width: '56px',

src/components/HighlightCitation.tsx

@@ -5,6 +5,7 @@ import { Models } from 'applesauce-core'
 import { nip19 } from 'nostr-tools'
 import { fetchArticleTitle } from '../services/articleTitleResolver'
 import { Highlight } from '../types/highlights'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface HighlightCitationProps {
   highlight: Highlight
@@ -27,7 +28,6 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
     // Fallback: extract directly from p tag
     const pTag = highlight.tags.find(t => t[0] === 'p')
     if (pTag && pTag[1]) {
-      console.log('📝 Found author from p tag:', pTag[1])
       return pTag[1]
     }
     
@@ -45,6 +45,12 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
       try {
         if (!highlight.eventReference) return
         
+        // Skip if it's a raw event ID (hex string without colons)
+        // Raw event IDs cannot be decoded to nadrs without additional context
+        if (!highlight.eventReference.includes(':') && !highlight.eventReference.startsWith('naddr')) {
+          return
+        }
+        
         // Convert eventReference to naddr if needed
         let naddr: string
         if (highlight.eventReference.includes(':')) {
@@ -74,7 +80,8 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
     loadTitle()
   }, [highlight.eventReference, relayPool])
   
-  const authorName = authorProfile?.name || authorProfile?.display_name
+  // Use centralized profile display name utility
+  const authorName = authorPubkey ? getProfileDisplayName(authorProfile, authorPubkey) : undefined
   
   // For nostr-native content with article reference
   if (highlight.eventReference && (authorName || articleTitle)) {

src/components/HighlightItem.tsx

@@ -7,9 +7,9 @@ import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { Hooks } from 'applesauce-react'
-import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
-import { RELAYS } from '../config/relays'
-import { areAllRelaysLocal } from '../utils/helpers'
+import { onSyncStateChange, isEventSyncing, isEventOfflineCreated } from '../services/offlineSyncService'
+import { areAllRelaysLocal, isLocalRelay } from '../utils/helpers'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
@@ -17,6 +17,8 @@ import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
 import { useNavigate } from 'react-router-dom'
+import NostrMentionLink from './NostrMentionLink'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 // Helper to detect if a URL is an image
 const isImageUrl = (url: string): boolean => {
@@ -29,99 +31,6 @@ const isImageUrl = (url: string): boolean => {
   }
 }
 
-// Helper to render a nostr identifier
-const renderNostrId = (nostrUri: string, index: number): React.ReactElement => {
-  try {
-    // Remove nostr: prefix
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    const decoded = nip19.decode(identifier)
-    
-    switch (decoded.type) {
-      case 'npub': {
-        const pubkey = decoded.data
-        return (
-          <a
-            key={index}
-            href={`/p/${nip19.npubEncode(pubkey)}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'nprofile': {
-        const { pubkey } = decoded.data
-        const npub = nip19.npubEncode(pubkey)
-        return (
-          <a
-            key={index}
-            href={`/p/${npub}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'naddr': {
-        const { kind, pubkey, identifier } = decoded.data
-        // Check if it's a blog post (kind:30023)
-        if (kind === 30023) {
-          const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
-          return (
-            <a
-              key={index}
-              href={`/a/${naddr}`}
-              className="highlight-comment-link"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {identifier || 'Article'}
-            </a>
-          )
-        }
-        // For other kinds, show shortened identifier
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            nostr:{identifier.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'note': {
-        const eventId = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            note:{eventId.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'nevent': {
-        const { id } = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            event:{id.slice(0, 12)}...
-          </span>
-        )
-      }
-      default:
-        // Fallback for unrecognized types
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            {identifier.slice(0, 20)}...
-          </span>
-        )
-    }
-  } catch (error) {
-    // If decoding fails, show shortened identifier
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    return (
-      <span key={index} className="highlight-comment-nostr-id">
-        {identifier.slice(0, 20)}...
-      </span>
-    )
-  }
-}
-
 // Component to render comment with links, inline images, and nostr identifiers
 const CommentContent: React.FC<{ text: string }> = ({ text }) => {
   // Pattern to match both http(s) URLs and nostr: URIs
@@ -131,9 +40,15 @@ const CommentContent: React.FC<{ text: string }> = ({ text }) => {
   return (
     <>
       {parts.map((part, index) => {
-        // Handle nostr: URIs
+        // Handle nostr: URIs - now with profile resolution
         if (part.startsWith('nostr:')) {
-          return renderNostrId(part, index)
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+              onClick={(e) => e.stopPropagation()}
+            />
+          )
         }
         
         // Handle http(s) URLs
@@ -200,7 +115,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   const itemRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
-  const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
   const [isRebroadcasting, setIsRebroadcasting] = useState(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
@@ -214,17 +128,9 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   
   // Get display name for the user
   const getUserDisplayName = () => {
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    return `${highlight.pubkey.slice(0, 8)}...` // fallback to short pubkey
+    return getProfileDisplayName(profile, highlight.pubkey)
   }
   
-  // Update offline indicator when highlight prop changes
-  useEffect(() => {
-    if (highlight.isOfflineCreated && !isSyncing) {
-      setShowOfflineIndicator(true)
-    }
-  }, [highlight.isOfflineCreated, isSyncing])
   
   // Listen to sync state changes
   useEffect(() => {
@@ -233,13 +139,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         setIsSyncing(syncingState)
         // When sync completes successfully, update highlight to show all relays
         if (!syncingState) {
-          setShowOfflineIndicator(false)
-          
           // Update the highlight with all relays after successful sync
-          if (onHighlightUpdate && highlight.isLocalOnly) {
+          if (onHighlightUpdate && highlight.isLocalOnly && relayPool) {
             const updatedHighlight = {
               ...highlight,
-              publishedRelays: RELAYS,
+              publishedRelays: getActiveRelayUrls(relayPool),
               isLocalOnly: false,
               isOfflineCreated: false
             }
@@ -250,7 +154,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     })
     
     return unsubscribe
-  }, [highlight, onHighlightUpdate])
+  }, [highlight, onHighlightUpdate, relayPool])
   
   useEffect(() => {
     if (isSelected && itemRef.current) {
@@ -298,19 +202,31 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
             pubkey,
             identifier
           })
-          navigate(`/a/${naddr}`)
+          // Pass highlight ID in navigation state to trigger scroll
+          navigate(`/a/${naddr}`, { 
+            state: { 
+              highlightId: highlight.id,
+              openHighlights: true 
+            } 
+          })
         }
       }
     } else if (highlight.urlReference) {
-      // Navigate to external URL
-      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`)
+      // Navigate to external URL with highlight ID to trigger scroll
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, {
+        state: {
+          highlightId: highlight.id,
+          openHighlights: true
+        }
+      })
     }
   }
   
   const getHighlightLinks = () => {
     // Encode the highlight event itself (kind 9802) as a nevent
     // Get non-local relays for the hint
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
       !r.includes('localhost') && !r.includes('127.0.0.1')
     ).slice(0, 3) // Include up to 3 relay hints
     
@@ -346,13 +262,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       }
       
       // Publish to all configured relays - let the relay pool handle connection state
-      const targetRelays = RELAYS
+      const targetRelays = getActiveRelayUrls(relayPool)
       
-      console.log('📡 Rebroadcasting highlight to', targetRelays.length, 'relay(s):', targetRelays)
       
       await relayPool.publish(targetRelays, event)
       
-      console.log('✅ Rebroadcast successful!')
       
       // Update the highlight with new relay info
       const isLocalOnly = areAllRelaysLocal(targetRelays)
@@ -368,9 +282,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         onHighlightUpdate(updatedHighlight)
       }
       
-      // Update local state
-      setShowOfflineIndicator(false)
-      
     } catch (error) {
       console.error('❌ Failed to rebroadcast:', error)
     } finally {
@@ -389,8 +300,37 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       }
     }
     
-    // Always show relay list, use plane icon for local-only
-    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
+    // Check if this highlight was only published to local relays
+    let isLocalOnly = highlight.isLocalOnly
+    const publishedRelays = highlight.publishedRelays || []
+    
+    // Fallback 1: Check if this highlight was marked for offline sync (flight mode)
+    if (isLocalOnly === undefined) {
+      if (isEventOfflineCreated(highlight.id)) {
+        isLocalOnly = true
+      }
+    }
+    
+    // Fallback 2: If publishedRelays only contains local relays, it's local-only
+    if (isLocalOnly === undefined && publishedRelays.length > 0) {
+      const hasOnlyLocalRelays = publishedRelays.every(url => isLocalRelay(url))
+      const hasRemoteRelays = publishedRelays.some(url => !isLocalRelay(url))
+      if (hasOnlyLocalRelays && !hasRemoteRelays) {
+        isLocalOnly = true
+      }
+    }
+    
+    
+    // If isLocalOnly is true (from any fallback), show airplane icon
+    if (isLocalOnly === true) {
+      return {
+        icon: faPlane,
+        tooltip: publishedRelays.length > 0
+          ? 'Local relays only - will sync when remote relays available'
+          : 'Created in flight mode - will sync when remote relays available',
+        spin: false
+      }
+    }
     
     // Show highlighter icon with relay info if available
     if (highlight.publishedRelays && highlight.publishedRelays.length > 0) {
@@ -398,7 +338,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
       )
       return {
-        icon: isLocalOrOffline ? faPlane : faHighlighter,
+        icon: faHighlighter,
         tooltip: relayNames.join('\n'),
         spin: false
       }
@@ -416,7 +356,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
     
     // Fallback: show all relays we queried (where this was likely fetched from)
-    const relayNames = RELAYS.map(url => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayNames = activeRelays.map(url => 
       url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
     )
     return {
@@ -449,7 +390,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         relayPool
       )
       
-      console.log('✅ Highlight deletion request published')
       
       // Notify parent to remove this highlight from the list
       if (onHighlightDelete) {
@@ -509,7 +449,31 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           title={new Date(highlight.created_at * 1000).toLocaleString()}
           onClick={(e) => {
             e.stopPropagation()
-            window.location.href = highlightLinks.native
+            // Navigate within app using same logic as handleItemClick
+            if (highlight.eventReference) {
+              const parts = highlight.eventReference.split(':')
+              if (parts.length === 3 && parts[0] === '30023') {
+                const [, pubkey, identifier] = parts
+                const naddr = nip19.naddrEncode({
+                  kind: 30023,
+                  pubkey,
+                  identifier
+                })
+                navigate(`/a/${naddr}`, { 
+                  state: { 
+                    highlightId: highlight.id,
+                    openHighlights: true 
+                  } 
+                })
+              }
+            } else if (highlight.urlReference) {
+              navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, {
+                state: {
+                  highlightId: highlight.id,
+                  openHighlights: true
+                }
+              })
+            }
           }}
         >
           {formatDateCompact(highlight.created_at)}

src/components/HighlightsPanel.tsx

@@ -37,6 +37,7 @@ interface HighlightsPanelProps {
   relayPool?: RelayPool | null
   eventStore?: IEventStore | null
   settings?: UserSettings
+  isMobile?: boolean
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -56,7 +57,8 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   followedPubkeys = new Set(),
   relayPool,
   eventStore,
-  settings
+  settings,
+  isMobile = false
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
   const [localHighlights, setLocalHighlights] = useState(highlights)
@@ -116,15 +118,14 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   return (
     <div className="highlights-container">
       <HighlightsPanelHeader
-        loading={loading}
         hasHighlights={filteredHighlights.length > 0}
         showHighlights={showHighlights}
         highlightVisibility={highlightVisibility}
         currentUserPubkey={currentUserPubkey}
         onToggleHighlights={handleToggleHighlights}
-        onRefresh={onRefresh}
         onToggleCollapse={onToggleCollapse}
         onHighlightVisibilityChange={onHighlightVisibilityChange}
+        isMobile={isMobile}
       />
 
       {loading && filteredHighlights.length === 0 ? (

src/components/HighlightsPanel/HighlightsPanelHeader.tsx

@@ -1,35 +1,44 @@
 import React from 'react'
-import { faChevronRight, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faEye, faEyeSlash, faUser, faUserGroup, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
 import { HighlightVisibility } from '../HighlightsPanel'
 import IconButton from '../IconButton'
 
 interface HighlightsPanelHeaderProps {
-  loading: boolean
   hasHighlights: boolean
   showHighlights: boolean
   highlightVisibility: HighlightVisibility
   currentUserPubkey?: string
   onToggleHighlights: () => void
-  onRefresh?: () => void
   onToggleCollapse: () => void
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
+  isMobile?: boolean
 }
 
 const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
-  loading,
   hasHighlights,
   showHighlights,
   highlightVisibility,
   currentUserPubkey,
   onToggleHighlights,
-  onRefresh,
   onToggleCollapse,
-  onHighlightVisibilityChange
+  onHighlightVisibilityChange,
+  isMobile = false
 }) => {
   return (
     <div className="highlights-header">
       <div className="highlights-actions">
         <div className="highlights-actions-left">
+          {!isMobile && (
+            <button 
+              onClick={onToggleCollapse}
+              className="toggle-highlights-btn"
+              title="Collapse highlights panel"
+              aria-label="Collapse highlights panel"
+            >
+              <FontAwesomeIcon icon={faChevronRight} style={{ transform: 'rotate(180deg)' }} />
+            </button>
+          )}
           {onHighlightVisibilityChange && (
             <div className="highlight-level-toggles">
               <IconButton
@@ -46,49 +55,42 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
                   opacity: highlightVisibility.nostrverse ? 1 : 0.4 
                 }}
               />
-              <IconButton
-                icon={faUserGroup}
-                onClick={() => onHighlightVisibilityChange({ 
-                  ...highlightVisibility, 
-                  friends: !highlightVisibility.friends 
-                })}
-                title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                ariaLabel="Toggle friends highlights"
-                variant="ghost"
-                disabled={!currentUserPubkey}
-                style={{ 
-                  color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
-                  opacity: highlightVisibility.friends ? 1 : 0.4 
-                }}
-              />
-              <IconButton
-                icon={faUser}
-                onClick={() => onHighlightVisibilityChange({ 
-                  ...highlightVisibility, 
-                  mine: !highlightVisibility.mine 
-                })}
-                title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                ariaLabel="Toggle my highlights"
-                variant="ghost"
-                disabled={!currentUserPubkey}
-                style={{ 
-                  color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
-                  opacity: highlightVisibility.mine ? 1 : 0.4 
-                }}
-              />
+              {currentUserPubkey && (
+                <>
+                  <IconButton
+                    icon={faUserGroup}
+                    onClick={() => onHighlightVisibilityChange({ 
+                      ...highlightVisibility, 
+                      friends: !highlightVisibility.friends 
+                    })}
+                    title="Toggle friends highlights"
+                    ariaLabel="Toggle friends highlights"
+                    variant="ghost"
+                    style={{ 
+                      color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
+                      opacity: highlightVisibility.friends ? 1 : 0.4 
+                    }}
+                  />
+                  <IconButton
+                    icon={faUser}
+                    onClick={() => onHighlightVisibilityChange({ 
+                      ...highlightVisibility, 
+                      mine: !highlightVisibility.mine 
+                    })}
+                    title="Toggle my highlights"
+                    ariaLabel="Toggle my highlights"
+                    variant="ghost"
+                    style={{ 
+                      color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
+                      opacity: highlightVisibility.mine ? 1 : 0.4 
+                    }}
+                  />
+                </>
+              )}
             </div>
           )}
-          {onRefresh && (
-            <IconButton
-              icon={faRotate}
-              onClick={onRefresh}
-              title="Refresh highlights"
-              ariaLabel="Refresh highlights"
-              variant="ghost"
-              disabled={loading}
-              spin={loading}
-            />
-          )}
+        </div>
+        <div className="highlights-actions-right">
           {hasHighlights && (
             <IconButton
               icon={showHighlights ? faEye : faEyeSlash}
@@ -99,14 +101,6 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
             />
           )}
         </div>
-        <IconButton
-          icon={faChevronRight}
-          onClick={onToggleCollapse}
-          title="Collapse highlights panel"
-          ariaLabel="Collapse highlights panel"
-          variant="ghost"
-          style={{ transform: 'rotate(180deg)' }}
-        />
       </div>
     </div>
   )

src/components/LoginOptions.tsx

@@ -124,7 +124,7 @@ const LoginOptions: React.FC = () => {
       <div className="login-content">
         <h2 className="login-title">Hi! I'm Boris.</h2>
         <p className="login-description">
-          Connect your npub to see your bookmarks, explore long-form articles, and create <mark className="login-highlight">your own highlights</mark>.
+          <mark className="login-highlight">Connect your npub</mark> to see your bookmarks, explore long-form articles, and create <mark className="login-highlight">your own highlights.</mark>
         </p>
         
         <div className="login-buttons">

src/components/NostrMentionLink.tsx

@@ -0,0 +1,138 @@
+import React, { useMemo } from 'react'
+import { nip19 } from 'nostr-tools'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Hooks } from 'applesauce-react'
+import { Models, Helpers } from 'applesauce-core'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
+import { isProfileInCacheOrStore } from '../utils/profileLoadingUtils'
+
+const { getPubkeyFromDecodeResult } = Helpers
+
+interface NostrMentionLinkProps {
+  nostrUri: string
+  onClick?: (e: React.MouseEvent) => void
+  className?: string
+}
+
+/**
+ * Component to render nostr mentions with resolved profile names
+ * Handles npub, nprofile, note, nevent, and naddr URIs
+ */
+const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({ 
+  nostrUri, 
+  onClick,
+  className = 'highlight-comment-link'
+}) => {
+  // Decode the nostr URI first
+  let decoded: ReturnType<typeof nip19.decode> | null = null
+  
+  try {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    decoded = nip19.decode(identifier)
+  } catch (error) {
+    // Decoding failed, will fallback to shortened identifier
+  }
+  
+  // Extract pubkey for profile fetching using applesauce helper (works for npub and nprofile)
+  const pubkey = decoded ? getPubkeyFromDecodeResult(decoded) : undefined
+  
+  const eventStore = Hooks.useEventStore()
+  // Fetch profile at top level (Rules of Hooks)
+  const profile = useEventModel(Models.ProfileModel, pubkey ? [pubkey] : null)
+  
+  // Check if profile is in cache or eventStore for loading detection
+  const isInCacheOrStore = useMemo(() => {
+    if (!pubkey) return false
+    return isProfileInCacheOrStore(pubkey, eventStore)
+  }, [pubkey, eventStore])
+  
+  // Show loading if profile doesn't exist and not in cache/store (for npub/nprofile)
+  // pubkey will be undefined for non-profile types, so no need for explicit type check
+  const isLoading = !profile && pubkey && !isInCacheOrStore
+  
+  // If decoding failed, show shortened identifier
+  if (!decoded) {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    return (
+      <span className="highlight-comment-nostr-id">
+        {identifier.slice(0, 20)}...
+      </span>
+    )
+  }
+  
+  // Helper function to render profile links (used for both npub and nprofile)
+  const renderProfileLink = (pubkey: string) => {
+    const npub = nip19.npubEncode(pubkey)
+    const displayName = getProfileDisplayName(profile, pubkey)
+    const linkClassName = isLoading ? `${className} profile-loading` : className
+    
+    return (
+      <a
+        href={`/p/${npub}`}
+        className={linkClassName}
+        onClick={onClick}
+      >
+        @{displayName}
+      </a>
+    )
+  }
+
+  // Render based on decoded type
+  // If we have a pubkey (from npub/nprofile), render profile link directly
+  if (pubkey) {
+    return renderProfileLink(pubkey)
+  }
+  
+  switch (decoded.type) {
+    case 'naddr': {
+      const { kind, pubkey: pk, identifier: addrIdentifier } = decoded.data
+      // Check if it's a blog post (kind:30023)
+      if (kind === 30023) {
+        const naddr = nip19.naddrEncode({ kind, pubkey: pk, identifier: addrIdentifier })
+        return (
+          <a
+            href={`/a/${naddr}`}
+            className={className}
+            onClick={onClick}
+          >
+            {addrIdentifier || 'Article'}
+          </a>
+        )
+      }
+      // For other kinds, show shortened identifier
+      return (
+        <span className="highlight-comment-nostr-id">
+          nostr:{addrIdentifier.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'note': {
+      const eventId = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          note:{eventId.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'nevent': {
+      const { id } = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          event:{id.slice(0, 12)}...
+        </span>
+      )
+    }
+    default: {
+      // Fallback for unrecognized types
+      const identifier = nostrUri.replace(/^nostr:/, '')
+      return (
+        <span className="highlight-comment-nostr-id">
+          {identifier.slice(0, 20)}...
+        </span>
+      )
+    }
+  }
+}
+
+export default NostrMentionLink
+

src/components/Profile.tsx

@@ -0,0 +1,269 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { IEventStore } from 'applesauce-core'
+import { RelayPool } from 'applesauce-relay'
+import { nip19 } from 'nostr-tools'
+import { useNavigate } from 'react-router-dom'
+import { HighlightItem } from './HighlightItem'
+import { BlogPostPreview } from '../services/exploreService'
+import { KINDS } from '../config/kinds'
+import AuthorCard from './AuthorCard'
+import BlogPostCard from './BlogPostCard'
+import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
+import { useStoreTimeline } from '../hooks/useStoreTimeline'
+import { eventToHighlight } from '../services/highlightEventProcessor'
+import { toBlogPostPreview } from '../utils/toBlogPostPreview'
+import { usePullToRefresh } from 'use-pull-to-refresh'
+import RefreshIndicator from './RefreshIndicator'
+import { Hooks } from 'applesauce-react'
+import { readingProgressController } from '../services/readingProgressController'
+import { writingsController } from '../services/writingsController'
+import { highlightsController } from '../services/highlightsController'
+
+interface ProfileProps {
+  relayPool: RelayPool
+  eventStore: IEventStore
+  pubkey: string
+  activeTab?: 'highlights' | 'writings'
+}
+
+const Profile: React.FC<ProfileProps> = ({ 
+  relayPool, 
+  eventStore,
+  pubkey,
+  activeTab: propActiveTab
+}) => {
+  const navigate = useNavigate()
+  const activeAccount = Hooks.useActiveAccount()
+  const [activeTab, setActiveTab] = useState<'highlights' | 'writings'>(propActiveTab || 'highlights')
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+  
+  // Reading progress state (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+  
+  // Load cached data from event store instantly
+  const cachedHighlights = useStoreTimeline(
+    eventStore,
+    { kinds: [KINDS.Highlights], authors: [pubkey] },
+    eventToHighlight,
+    [pubkey]
+  )
+  
+  const cachedWritings = useStoreTimeline(
+    eventStore,
+    { kinds: [30023], authors: [pubkey] },
+    toBlogPostPreview,
+    [pubkey]
+  )
+
+  // Sort writings by publication date, newest first
+  const sortedWritings = useMemo(() => {
+    return cachedWritings.slice().sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }, [cachedWritings])
+
+  // Update local state when prop changes
+  useEffect(() => {
+    if (propActiveTab) {
+      setActiveTab(propActiveTab)
+    }
+  }, [propActiveTab])
+  
+  // Subscribe to reading progress controller
+  useEffect(() => {
+    // Get initial state immediately
+    const initialMap = readingProgressController.getProgressMap()
+    setReadingProgressMap(initialMap)
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress((newMap) => {
+      setReadingProgressMap(newMap)
+    })
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+  
+  // Load reading progress data when logged in
+  useEffect(() => {
+    if (!activeAccount?.pubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: activeAccount.pubkey,
+      force: refreshTrigger > 0
+    })
+  }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])
+
+  // Background fetch via controllers to populate event store
+  useEffect(() => {
+    if (!pubkey || !relayPool || !eventStore) return
+    
+    // Start controllers to fetch and populate event store
+    // Controllers handle streaming, deduplication, and storage
+    highlightsController.start({ relayPool, eventStore, pubkey })
+      .catch(err => console.warn('⚠️ [Profile] Failed to fetch highlights:', err))
+    
+    writingsController.start({ relayPool, eventStore, pubkey, force: refreshTrigger > 0 })
+      .catch(err => console.warn('⚠️ [Profile] Failed to fetch writings:', err))
+  }, [pubkey, relayPool, eventStore, refreshTrigger])
+
+  // Pull-to-refresh
+  const { isRefreshing, pullPosition } = usePullToRefresh({
+    onRefresh: () => {
+      setRefreshTrigger(prev => prev + 1)
+    },
+    maximumPullLength: 240,
+    refreshThreshold: 80,
+    isDisabled: !pubkey
+  })
+
+  const getPostUrl = (post: BlogPostPreview) => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: post.author,
+      identifier: dTag
+    })
+    return `/a/${naddr}`
+  }
+  
+  // Helper to get reading progress for a post
+  const getReadingProgress = useCallback((post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) return undefined
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      const progress = readingProgressMap.get(naddr)
+      
+      // Only log when found or map is empty
+      if (progress || readingProgressMap.size === 0) {
+        // Progress found or map is empty
+      }
+      
+      return progress
+    } catch (err) {
+      return undefined
+    }
+  }, [readingProgressMap])
+
+  const handleHighlightDelete = () => {
+    // Not allowed to delete other users' highlights
+    return
+  }
+
+  const npub = nip19.npubEncode(pubkey)
+  const showSkeletons = cachedHighlights.length === 0 && sortedWritings.length === 0
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'highlights':
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <HighlightSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return cachedHighlights.length === 0 ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No highlights yet.
+          </div>
+        ) : (
+          <div className="highlights-list me-highlights-list">
+            {cachedHighlights.map((highlight) => (
+              <HighlightItem
+                key={highlight.id}
+                highlight={{ ...highlight, level: 'mine' }}
+                relayPool={relayPool}
+                onHighlightDelete={handleHighlightDelete}
+              />
+            ))}
+          </div>
+        )
+
+      case 'writings':
+        if (showSkeletons) {
+          return (
+            <div className="explore-grid">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <BlogPostSkeleton key={i} />
+              ))}
+            </div>
+          )
+        }
+        return sortedWritings.length === 0 ? (
+          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+            No articles written yet.
+          </div>
+        ) : (
+          <div className="explore-grid">
+            {sortedWritings.map((post) => (
+              <BlogPostCard
+                key={post.event.id}
+                post={post}
+                href={getPostUrl(post)}
+                readingProgress={getReadingProgress(post)}
+              />
+            ))}
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="explore-container">
+      <RefreshIndicator
+        isRefreshing={isRefreshing}
+        pullPosition={pullPosition}
+      />
+      <div className="explore-header">
+        <AuthorCard authorPubkey={pubkey} clickable={false} />
+        
+        <div className="me-tabs">
+          <button
+            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
+            data-tab="highlights"
+            onClick={() => navigate(`/p/${npub}`)}
+          >
+            <FontAwesomeIcon icon={faHighlighter} />
+            <span className="tab-label">Highlights</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
+            data-tab="writings"
+            onClick={() => navigate(`/p/${npub}/writings`)}
+          >
+            <FontAwesomeIcon icon={faPenToSquare} />
+            <span className="tab-label">Writings</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="me-tab-content">
+        {renderTabContent()}
+      </div>
+    </div>
+  )
+}
+
+export default Profile
+

src/components/ReaderHeader.tsx

@@ -20,6 +20,7 @@ interface ReaderHeaderProps {
   settings?: UserSettings
   highlights?: Highlight[]
   highlightVisibility?: HighlightVisibility
+  onHighlightCountClick?: () => void
 }
 
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
@@ -32,7 +33,8 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   highlightCount,
   settings,
   highlights = [],
-  highlightVisibility = { nostrverse: true, friends: true, mine: true }
+  highlightVisibility = { nostrverse: true, friends: true, mine: true },
+  onHighlightCountClick
 }) => {
   const cachedImage = useImageCache(image)
   const { textColor } = useAdaptiveTextColor(cachedImage)
@@ -78,7 +80,13 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
       <>
         <div className="reader-hero-image">
           {cachedImage ? (
-            <img src={cachedImage} alt={title || 'Article image'} />
+            <img 
+              src={cachedImage} 
+              alt={title || 'Article image'}
+              onError={(e) => {
+                console.error('[reader-header] Image failed to load:', cachedImage, e)
+              }}
+            />
           ) : (
             <div className="reader-hero-placeholder">
               <FontAwesomeIcon icon={faNewspaper} />
@@ -107,8 +115,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
                 )}
                 {hasHighlights && (
                   <div 
-                    className="highlight-indicator"
+                    className="highlight-indicator clickable"
                     style={getHighlightIndicatorStyles(true)}
+                    onClick={onHighlightCountClick}
+                    title="Open highlights sidebar"
                   >
                     <FontAwesomeIcon icon={faHighlighter} />
                     <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
@@ -152,8 +162,10 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
             )}
             {hasHighlights && (
               <div 
-                className="highlight-indicator"
+                className="highlight-indicator clickable"
                 style={getHighlightIndicatorStyles(false)}
+                onClick={onHighlightCountClick}
+                title="Open highlights sidebar"
               >
                 <FontAwesomeIcon icon={faHighlighter} />
                 <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>

src/components/ReadingProgressBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+interface ReadingProgressBarProps {
+  readingProgress?: number
+  height?: number
+  marginTop?: string
+  marginBottom?: string
+  marginLeft?: string
+  className?: string
+}
+
+export const ReadingProgressBar: React.FC<ReadingProgressBarProps> = ({
+  readingProgress,
+  height = 1,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  className
+}) => {
+  // Calculate progress color
+  let progressColor = '#6366f1' // Default blue (reading)
+  if (readingProgress && readingProgress >= 0.95) {
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = 'var(--color-text)' // Neutral text color (started)
+  }
+
+  const progressWidth = readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%'
+  const progressBackground = readingProgress ? progressColor : 'var(--color-border)'
+
+  return (
+    <div 
+      className={className}
+      style={{
+        height: `${height}px`,
+        width: '100%',
+        background: 'var(--color-border)',
+        borderRadius: '0.5px',
+        overflow: 'hidden',
+        marginTop,
+        marginBottom,
+        marginLeft,
+        position: 'relative',
+        minHeight: `${height}px`
+      }}
+    >
+      <div
+        style={{
+          height: '100%',
+          width: progressWidth,
+          background: progressBackground,
+          transition: 'width 0.3s ease, background 0.3s ease',
+          minHeight: `${height}px`
+        }}
+      />
+    </div>
+  )
+}

src/components/ReadingProgressFilters.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookOpen, faCheckCircle, faAsterisk } from '@fortawesome/free-solid-svg-icons'
+import { faBookOpen, faCheckCircle, faAsterisk, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { faBooks } from '../icons/customIcons'
 import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-regular-svg-icons'
 
-export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed'
+export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed' | 'highlighted' | 'archive'
 
 interface ReadingProgressFiltersProps {
   selectedFilter: ReadingProgressFilterType
@@ -13,18 +14,30 @@ interface ReadingProgressFiltersProps {
 const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selectedFilter, onFilterChange }) => {
   const filters = [
     { type: 'all' as const, icon: faAsterisk, label: 'All' },
+    { type: 'highlighted' as const, icon: faHighlighter, label: 'Highlighted' },
     { type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' },
     { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
-    { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' }
+    { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' },
+    // Archive-marked items (previously emoji-marked)
+    { type: 'archive' as const, icon: faBooks, label: 'Archive' }
   ]
 
   return (
     <div className="bookmark-filters">
       {filters.map(filter => {
         const isActive = selectedFilter === filter.type
-        // Only "completed" gets green color, everything else uses default blue
-        const activeStyle = isActive && filter.type === 'completed' ? { color: '#10b981' } : undefined
+        // Only "completed" gets green color, "highlighted" gets yellow, everything else uses default blue
+        let activeStyle: Record<string, string> | undefined = undefined
+        if (isActive) {
+          if (filter.type === 'completed') {
+            activeStyle = { color: '#10b981' } // green
+          } else if (filter.type === 'highlighted') {
+            activeStyle = { color: '#fde047' } // yellow
+          } else if (filter.type === 'archive') {
+            activeStyle = { color: '#60a5fa' } // blue accent
+          }
+        }
         
         return (
           <button

src/components/RelayStatusIndicator.tsx

@@ -50,16 +50,8 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
   
   // Debug logging
   useEffect(() => {
-    console.log('🔌 Relay Status Indicator:', {
-      mode: isConnecting ? 'CONNECTING' : offlineMode ? 'OFFLINE' : localOnlyMode ? 'LOCAL_ONLY' : 'ONLINE',
-      totalStatuses: relayStatuses.length,
-      connectedCount: connectedUrls.length,
-      connectedUrls: connectedUrls.map(u => u.replace(/^wss?:\/\//, '')),
-      hasLocalRelay,
-      hasRemoteRelay,
-      isConnecting
-    })
-  }, [offlineMode, localOnlyMode, connectedUrls, relayStatuses.length, hasLocalRelay, hasRemoteRelay, isConnecting])
+    // Mode and relay status determined
+  }, [isConnecting, offlineMode, localOnlyMode, relayStatuses, hasLocalRelay, hasRemoteRelay])
   
   // Don't show indicator when fully connected (but show when connecting)
   if (!localOnlyMode && !offlineMode && !isConnecting) return null
@@ -156,7 +148,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({
                     fontWeight: 400
                   }}
                 >
-                  {connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}
+                  Local relays only
                 </span>
               </>
             )}

src/components/ResolvedMention.tsx

@@ -1,8 +1,11 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { useEventModel } from 'applesauce-react/hooks'
+import { Hooks } from 'applesauce-react'
 import { Models, Helpers } from 'applesauce-core'
 import { decode, npubEncode } from 'nostr-tools/nip19'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
+import { isProfileInCacheOrStore } from '../utils/profileLoadingUtils'
 
 const { getPubkeyFromDecodeResult } = Helpers
 
@@ -19,15 +22,27 @@ const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
     // ignore; will fallback to showing the encoded value
   }
 
+  const eventStore = Hooks.useEventStore()
   const profile = pubkey ? useEventModel(Models.ProfileModel, [pubkey]) : undefined
-  const display = profile?.name || profile?.display_name || profile?.nip05 || (pubkey ? `${pubkey.slice(0, 8)}...` : encoded)
+  
+  // Check if profile is in cache or eventStore
+  const isInCacheOrStore = useMemo(() => {
+    if (!pubkey) return false
+    return isProfileInCacheOrStore(pubkey, eventStore)
+  }, [pubkey, eventStore])
+  
+  // Show loading if profile doesn't exist and not in cache/store
+  const isLoading = !profile && pubkey && !isInCacheOrStore
+  
+  const display = pubkey ? getProfileDisplayName(profile, pubkey) : encoded
   const npub = pubkey ? npubEncode(pubkey) : undefined
 
   if (npub) {
+    const className = isLoading ? 'nostr-mention profile-loading' : 'nostr-mention'
     return (
       <Link
         to={`/p/${npub}`}
-        className="nostr-mention"
+        className={className}
       >
         @{display}
       </Link>

src/components/RichContent.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import NostrMentionLink from './NostrMentionLink'
+import { Tokens } from 'applesauce-content/helpers'
+
+// Helper to add timestamps to error logs
+const ts = () => {
+  const now = new Date()
+  const ms = now.getMilliseconds().toString().padStart(3, '0')
+  return `${now.toLocaleTimeString('en-US', { hour12: false })}.${ms}`
+}
+
+interface RichContentProps {
+  content: string
+  className?: string
+}
+
+/**
+ * Component to render text content with:
+ * - Clickable links
+ * - Resolved nostr mentions (npub, nprofile, note, nevent, naddr)
+ * - Plain text
+ * 
+ * Handles both nostr:npub1... and plain npub1... formats
+ */
+const RichContent: React.FC<RichContentProps> = ({ 
+  content, 
+  className = 'bookmark-content' 
+}) => {
+  try {
+    // Pattern to match:
+    // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.) using applesauce Tokens.nostrLink
+    // 2. http(s) URLs
+    const nostrPattern = Tokens.nostrLink
+    const urlPattern = /https?:\/\/[^\s]+/gi
+    const combinedPattern = new RegExp(`(${nostrPattern.source}|${urlPattern.source})`, 'gi')
+    
+    const parts = content.split(combinedPattern)
+  
+    // Helper to check if a string is a nostr identifier (without mutating regex state)
+    const isNostrIdentifier = (str: string): boolean => {
+      const testPattern = new RegExp(nostrPattern.source, nostrPattern.flags)
+      return testPattern.test(str)
+    }
+    
+    return (
+    <div className={className}>
+      {parts.map((part, index) => {
+        // Skip empty or undefined parts
+        if (!part) {
+          return null
+        }
+        
+        // Handle nostr: URIs - Tokens.nostrLink matches both formats
+        if (part.startsWith('nostr:')) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+            />
+          )
+        }
+        
+        // Handle plain nostr identifiers (Tokens.nostrLink matches these too)
+        if (isNostrIdentifier(part)) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={`nostr:${part}`}
+            />
+          )
+        }
+        
+        // Handle http(s) URLs
+        if (part.match(/^https?:\/\//)) {
+          return (
+            <a
+              key={index}
+              href={part}
+              className="nostr-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {part}
+            </a>
+          )
+        }
+        
+        // Plain text
+        return <React.Fragment key={index}>{part}</React.Fragment>
+      })}
+    </div>
+    )
+  } catch (err) {
+    console.error(`[${ts()}] [npub-resolve] RichContent: Error rendering:`, err)
+    return <div className={className}>Error rendering content</div>
+  }
+}
+
+export default RichContent
+

src/components/RouteDebug.tsx

@@ -20,7 +20,7 @@ export default function RouteDebug() {
       // Unexpected during deep-link refresh tests
       console.warn('[RouteDebug] unexpected root redirect', info)
     } else {
-      console.debug('[RouteDebug]', info)
+      // silent
     }
   }, [location, matchArticle])
 

src/components/Settings.tsx

@@ -6,11 +6,13 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
+import MediaDisplaySettings from './Settings/MediaDisplaySettings'
 import ExploreSettings from './Settings/ExploreSettings'
 import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
 import RelaySettings from './Settings/RelaySettings'
 import PWASettings from './Settings/PWASettings'
+import TTSSettings from './Settings/TTSSettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import VersionFooter from './VersionFooter'
 
@@ -39,7 +41,18 @@ const DEFAULT_SETTINGS: UserSettings = {
   useLocalRelayAsCache: true,
   rebroadcastToAllRelays: false,
   paragraphAlignment: 'justify',
-  syncReadingPosition: false,
+  fullWidthImages: true,
+  renderVideoLinksAsEmbeds: true,
+  syncReadingPosition: true,
+  autoScrollToReadingPosition: true,
+  autoMarkAsReadOnCompletion: false,
+  hideBookmarksWithoutCreationDate: true,
+  ttsUseSystemLanguage: false,
+  ttsDetectContentLanguage: true,
+  ttsLanguageMode: 'content',
+  ttsDefaultSpeed: 2.1,
+  linkColorDark: '#38bdf8',
+  linkColorLight: '#3b82f6',
 }
 
 interface SettingsProps {
@@ -167,8 +180,10 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
       <div className="settings-content">
         <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <MediaDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
         <ExploreSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
+        <TTSSettings settings={localSettings} onUpdate={handleUpdate} />
         <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
         <PWASettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />

src/components/Settings/ExploreSettings.tsx

@@ -51,6 +51,19 @@ const ExploreSettings: React.FC<ExploreSettingsProps> = ({ settings, onUpdate })
           />
         </div>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="hideBotArticlesByName" className="checkbox-label">
+          <input
+            id="hideBotArticlesByName"
+            type="checkbox"
+            checked={settings.hideBotArticlesByName !== false}
+            onChange={(e) => onUpdate({ hideBotArticlesByName: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Hide content posted by bots</span>
+        </label>
+      </div>
     </div>
   )
 }

src/components/Settings/LayoutBehaviorSettings.tsx

@@ -117,6 +117,45 @@ const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ setting
           <span>Sync reading position across devices</span>
         </label>
       </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoScrollToReadingPosition" className="checkbox-label">
+          <input
+            id="autoScrollToReadingPosition"
+            type="checkbox"
+            checked={settings.autoScrollToReadingPosition !== false}
+            onChange={(e) => onUpdate({ autoScrollToReadingPosition: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Auto-scroll to saved reading position</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="autoMarkAsReadOnCompletion" className="checkbox-label">
+          <input
+            id="autoMarkAsReadOnCompletion"
+            type="checkbox"
+            checked={settings.autoMarkAsReadOnCompletion ?? false}
+            onChange={(e) => onUpdate({ autoMarkAsReadOnCompletion: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Automatically move to archive at 100%</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="hideBookmarksWithoutCreationDate" className="checkbox-label">
+          <input
+            id="hideBookmarksWithoutCreationDate"
+            type="checkbox"
+            checked={settings.hideBookmarksWithoutCreationDate ?? false}
+            onChange={(e) => onUpdate({ hideBookmarksWithoutCreationDate: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Hide bookmarks missing a creation date</span>
+        </label>
+      </div>
     </div>
   )
 }

src/components/Settings/MediaDisplaySettings.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { UserSettings } from '../../services/settingsService'
+
+interface MediaDisplaySettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const MediaDisplaySettings: React.FC<MediaDisplaySettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Media Display</h3>
+      
+      <div className="setting-group">
+        <label htmlFor="fullWidthImages" className="checkbox-label">
+          <input
+            id="fullWidthImages"
+            type="checkbox"
+            checked={settings.fullWidthImages === true}
+            onChange={(e) => onUpdate({ fullWidthImages: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Full-width images in articles</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="renderVideoLinksAsEmbeds" className="checkbox-label">
+          <input
+            id="renderVideoLinksAsEmbeds"
+            type="checkbox"
+            checked={settings.renderVideoLinksAsEmbeds === true}
+            onChange={(e) => onUpdate({ renderVideoLinksAsEmbeds: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Render video links as embeds</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default MediaDisplaySettings

src/components/Settings/PWASettings.tsx

@@ -27,13 +27,19 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
     if (isInstalled) return
     const success = await installApp()
     if (success) {
-      console.log('App installed successfully')
+      // Installation successful
     }
   }
 
   const handleLinkClick = (url: string) => {
     if (onClose) onClose()
-    navigate(`/r/${encodeURIComponent(url)}`)
+    // If it's an internal route (starts with /), navigate directly
+    if (url.startsWith('/')) {
+      navigate(url)
+    } else {
+      // External URL: wrap with /r/ path
+      navigate(`/r/${encodeURIComponent(url)}`)
+    }
   }
 
   const handleClearCache = async () => {
@@ -151,7 +157,7 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
               >
                 here
               </a>
-              {' and '}
+              {', '}
               <a 
                 onClick={(e) => {
                   e.preventDefault()
@@ -161,6 +167,16 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
               >
                 here
               </a>
+              {', and '}
+              <a 
+                onClick={(e) => {
+                  e.preventDefault()
+                  handleLinkClick('/a/naddr1qvzqqqr4gupzq3svyhng9ld8sv44950j957j9vchdktj7cxumsep9mvvjthc2pjuqq9hyetvv9uj6um9w36hq9mgjg8')
+                }}
+                style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+              >
+                here
+              </a>
               .
             </p>
           </div>

src/components/Settings/ReadingDisplaySettings.tsx

@@ -5,7 +5,7 @@ import IconButton from '../IconButton'
 import ColorPicker from '../ColorPicker'
 import FontSelector from '../FontSelector'
 import { getFontFamily } from '../../utils/fontLoader'
-import { hexToRgb } from '../../utils/colorHelpers'
+import { hexToRgb, LINK_COLORS_DARK, LINK_COLORS_LIGHT } from '../../utils/colorHelpers'
 
 interface ReadingDisplaySettingsProps {
   settings: UserSettings
@@ -14,6 +14,23 @@ interface ReadingDisplaySettingsProps {
 
 const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ settings, onUpdate }) => {
   const previewFontFamily = getFontFamily(settings.readingFont || 'source-serif-4')
+  
+  // Determine current effective theme for color palette selection
+  const currentTheme = settings.theme ?? 'system'
+  const isDark = currentTheme === 'dark' || 
+    (currentTheme === 'system' && (typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : true))
+  const linkColors = isDark ? LINK_COLORS_DARK : LINK_COLORS_LIGHT
+  const currentLinkColor = isDark 
+    ? (settings.linkColorDark || '#38bdf8')
+    : (settings.linkColorLight || '#3b82f6')
+  
+  const handleLinkColorChange = (color: string) => {
+    if (isDark) {
+      onUpdate({ linkColorDark: color })
+    } else {
+      onUpdate({ linkColorLight: color })
+    }
+  }
 
   return (
     <div className="settings-section">
@@ -59,6 +76,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
+
       <div className="setting-group setting-inline">
         <label>Default Highlight Visibility</label>
         <div className="highlight-level-toggles">
@@ -108,6 +126,17 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Link Color</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={currentLinkColor}
+            onColorChange={handleLinkColorChange}
+            colors={linkColors}
+          />
+        </div>
+      </div>
+
       <div className="setting-group setting-inline">
         <label className="setting-label">Font Size</label>
         <div className="setting-control">
@@ -178,14 +207,16 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
             fontFamily: previewFontFamily,
             fontSize: `${settings.fontSize || 21}px`,
             '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00'),
-            '--paragraph-alignment': settings.paragraphAlignment || 'justify'
+            '--paragraph-alignment': settings.paragraphAlignment || 'justify',
+            '--color-link': isDark 
+              ? (settings.linkColorDark || '#38bdf8')
+              : (settings.linkColorLight || '#3b82f6')
           } as React.CSSProperties}
         >
           <h3>The Quick Brown Fox</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityMine !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityFriends !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
-          <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityNostrverse !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
-          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+          <p>Totam rem aperiam, eaque ipsa quae ab illo <a href="/a/naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqq8ky6t5vdhkjm3dd9ej6arfd4jszh5rdq">inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityNostrverse !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
         </div>
       </div>
     </div>

src/components/Settings/TTSSettings.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGauge } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import TTSControls from '../TTSControls'
+
+interface TTSSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const SPEED_OPTIONS = [0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.1, 2.4, 2.8, 3]
+const EXAMPLE_TEXT = "Boris aims to be a calm reader app with clean typography, beautiful design, and a focus on readability. Boris does not and will never have ads, trackers, paywalls, subscriptions, or any other distractions."
+
+const TTSSettings: React.FC<TTSSettingsProps> = ({ settings, onUpdate }) => {
+  const currentSpeed = settings.ttsDefaultSpeed || 2.1
+
+  const handleCycleSpeed = () => {
+    const currentIndex = SPEED_OPTIONS.indexOf(currentSpeed)
+    const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
+    onUpdate({ ttsDefaultSpeed: SPEED_OPTIONS[nextIndex] })
+  }
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Text-to-Speech</h3>
+      
+      <div className="setting-group setting-inline">
+        <label>Default Playback Speed</label>
+        <div className="setting-buttons">
+          <button
+            type="button"
+            className="article-menu-btn"
+            onClick={handleCycleSpeed}
+            title="Cycle speed"
+          >
+            <FontAwesomeIcon icon={faGauge} />
+            <span>{currentSpeed}x</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label>Speaker language</label>
+        <div className="setting-control">
+          <select
+            value={settings.ttsLanguageMode || 'content'}
+            onChange={e => {
+              const value = e.target.value
+              onUpdate({ 
+                ttsLanguageMode: value,
+                ttsUseSystemLanguage: value === 'system',
+                ttsDetectContentLanguage: value === 'content'
+              })
+            }}
+            className="setting-select"
+          >
+            <option value="system">System Language</option>
+            <option value="content">Content (auto-detect)</option>
+            <option disabled>────────────</option>
+            <option value="en-US">English (American)</option>
+            <option value="en-GB">English (British)</option>
+            <option value="zh">Mandarin Chinese</option>
+            <option value="es">Spanish</option>
+            <option value="hi">Hindi</option>
+            <option value="ar">Arabic</option>
+            <option value="fr">French</option>
+            <option value="pt">Portuguese</option>
+            <option value="de">German</option>
+            <option value="ja">Japanese</option>
+            <option value="ru">Russian</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <div style={{ padding: '0.75rem', backgroundColor: 'var(--color-bg)', borderRadius: '4px', marginBottom: '0.75rem', fontSize: '0.95rem', lineHeight: '1.5' }}>
+          {EXAMPLE_TEXT}
+        </div>
+        <TTSControls text={EXAMPLE_TEXT} settings={settings} />
+      </div>
+    </div>
+  )
+}
+
+export default TTSSettings

src/components/ShareTargetHandler.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { RelayPool } from 'applesauce-relay'
+import { createWebBookmark } from '../services/webBookmarkService'
+import { getActiveRelayUrls } from '../services/relayManager'
+import { useToast } from '../hooks/useToast'
+
+interface ShareTargetHandlerProps {
+  relayPool: RelayPool
+}
+
+/**
+ * Handles incoming shared URLs from the Web Share Target API.
+ * Auto-saves the shared URL as a web bookmark (NIP-B0).
+ */
+export default function ShareTargetHandler({ relayPool }: ShareTargetHandlerProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const activeAccount = Hooks.useActiveAccount()
+  const { showToast } = useToast()
+  const [processing, setProcessing] = useState(false)
+  const [waitingForLogin, setWaitingForLogin] = useState(false)
+
+  useEffect(() => {
+    const handleSharedContent = async () => {
+      // Parse query parameters
+      const params = new URLSearchParams(location.search)
+      const link = params.get('link')
+      const title = params.get('title')
+      const text = params.get('text')
+
+      // Validate we have a URL
+      if (!link) {
+        showToast('No URL to save')
+        navigate('/')
+        return
+      }
+
+      // If no active account, wait for login
+      if (!activeAccount) {
+        setWaitingForLogin(true)
+        showToast('Please log in to save this bookmark')
+        return
+      }
+
+      // We have account and URL, proceed with saving
+      if (!processing) {
+        setProcessing(true)
+        try {
+          await createWebBookmark(
+            link,
+            title || undefined,
+            text || undefined,
+            undefined,
+            activeAccount,
+            relayPool,
+            getActiveRelayUrls(relayPool)
+          )
+          showToast('Bookmark saved!')
+          navigate('/my/links')
+        } catch (err) {
+          console.error('Failed to save shared bookmark:', err)
+          showToast('Failed to save bookmark')
+          navigate('/')
+        } finally {
+          setProcessing(false)
+        }
+      }
+    }
+
+    handleSharedContent()
+  }, [activeAccount, location.search, navigate, relayPool, showToast, processing])
+
+  // Show waiting for login state
+  if (waitingForLogin && !activeAccount) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <FontAwesomeIcon icon={faSpinner} spin className="text-4xl mb-4" />
+          <p className="text-lg">Waiting for login...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Show processing state
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="text-center">
+        <FontAwesomeIcon icon={faSpinner} spin className="text-4xl mb-4" />
+        <p className="text-lg">Saving bookmark...</p>
+      </div>
+    </div>
+  )
+}
+

src/components/SidebarHeader.tsx

@@ -1,11 +1,14 @@
-import React from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faNewspaper, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRightFromBracket, faUserCircle, faGear, faHome, faPersonHiking, faHighlighter, faBookmark, faPenToSquare, faLink } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import IconButton from './IconButton'
+import { faBooks } from '../icons/customIcons'
+import { preloadImage } from '../hooks/useImageCache'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface SidebarHeaderProps {
   onToggleCollapse: () => void
@@ -18,6 +21,8 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
   const navigate = useNavigate()
   const activeAccount = Hooks.useActiveAccount()
   const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+  const [showProfileMenu, setShowProfileMenu] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
 
   const getProfileImage = () => {
     return profile?.picture || null
@@ -25,81 +30,159 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
 
   const getUserDisplayName = () => {
     if (!activeAccount) return 'Unknown User'
-    if (profile?.name) return profile.name
-    if (profile?.display_name) return profile.display_name
-    if (profile?.nip05) return profile.nip05
-    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
+    return getProfileDisplayName(profile, activeAccount.pubkey)
   }
 
   const profileImage = getProfileImage()
 
+  // Preload profile image for offline access
+  useEffect(() => {
+    if (profileImage) {
+      preloadImage(profileImage)
+    }
+  }, [profileImage])
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setShowProfileMenu(false)
+      }
+    }
+
+    if (showProfileMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showProfileMenu])
+
+  const handleMenuItemClick = (action: () => void) => {
+    setShowProfileMenu(false)
+    // Close mobile sidebar when navigating on mobile
+    if (isMobile) {
+      onToggleCollapse()
+    }
+    action()
+  }
+
   return (
     <>
       <div className="sidebar-header-bar">
-        {isMobile ? (
+        <div className="sidebar-header-left">
+          {activeAccount && (
+            <div className="profile-menu-wrapper" ref={menuRef}>
+              <button
+                className="profile-avatar-button" 
+                title={getUserDisplayName()}
+                onClick={() => setShowProfileMenu(!showProfileMenu)}
+                aria-label={`Profile: ${getUserDisplayName()}`}
+              >
+                {profileImage ? (
+                  <img src={profileImage} alt={getUserDisplayName()} />
+                ) : (
+                  <FontAwesomeIcon icon={faUserCircle} />
+                )}
+              </button>
+              {showProfileMenu && (
+                <div className="profile-dropdown-menu">
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/highlights'))}
+                  >
+                    <FontAwesomeIcon icon={faHighlighter} />
+                    <span>My Highlights</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/bookmarks'))}
+                  >
+                    <FontAwesomeIcon icon={faBookmark} />
+                    <span>My Bookmarks</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/reads'))}
+                  >
+                    <FontAwesomeIcon icon={faBooks} />
+                    <span>My Reads</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/links'))}
+                  >
+                    <FontAwesomeIcon icon={faLink} />
+                    <span>My Links</span>
+                  </button>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(() => navigate('/my/writings'))}
+                  >
+                    <FontAwesomeIcon icon={faPenToSquare} />
+                    <span>My Writings</span>
+                  </button>
+                  <div className="profile-menu-separator"></div>
+                  <button
+                    className="profile-menu-item"
+                    onClick={() => handleMenuItemClick(onLogout)}
+                  >
+                    <FontAwesomeIcon icon={faRightFromBracket} />
+                    <span>Logout</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
           <IconButton
-            icon={faTimes}
-            onClick={onToggleCollapse}
-            title="Close sidebar"
-            ariaLabel="Close sidebar"
+            icon={faHome}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/')
+            }}
+            title="Home"
+            ariaLabel="Home"
             variant="ghost"
-            className="mobile-close-btn"
           />
-        ) : (
-          <button 
-            onClick={onToggleCollapse}
-            className="toggle-sidebar-btn"
-            title="Collapse bookmarks sidebar"
-            aria-label="Collapse bookmarks sidebar"
-          >
-            <FontAwesomeIcon icon={faChevronRight} />
-          </button>
-        )}
+        </div>
         <div className="sidebar-header-right">
-        {activeAccount && (
-          <div 
-            className="profile-avatar" 
-            title={getUserDisplayName()}
-            onClick={() => navigate('/me')}
-            style={{ cursor: 'pointer' }}
-          >
-            {profileImage ? (
-              <img src={profileImage} alt={getUserDisplayName()} />
-            ) : (
-              <FontAwesomeIcon icon={faUserCircle} />
-            )}
-          </div>
-        )}
-        <IconButton
-          icon={faHome}
-          onClick={() => navigate('/')}
-          title="Home"
-          ariaLabel="Home"
-          variant="ghost"
-        />
-        <IconButton
-          icon={faNewspaper}
-          onClick={() => navigate('/explore')}
-          title="Explore"
-          ariaLabel="Explore"
-          variant="ghost"
-        />
-        <IconButton
-          icon={faGear}
-          onClick={onOpenSettings}
-          title="Settings"
-          ariaLabel="Settings"
-          variant="ghost"
-        />
-        {activeAccount && (
           <IconButton
-            icon={faRightFromBracket}
-            onClick={onLogout}
-            title="Logout"
-            ariaLabel="Logout"
+            icon={faPersonHiking}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/explore')
+            }}
+            title="Explore"
+            ariaLabel="Explore"
             variant="ghost"
           />
-        )}
+          <IconButton
+            icon={faGear}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              onOpenSettings()
+            }}
+            title="Settings"
+            ariaLabel="Settings"
+            variant="ghost"
+          />
+          {!isMobile && (
+            <button 
+              onClick={onToggleCollapse}
+              className="toggle-sidebar-btn"
+              title="Collapse bookmarks sidebar"
+              aria-label="Collapse bookmarks sidebar"
+            >
+              <FontAwesomeIcon icon={faChevronRight} />
+            </button>
+          )}
         </div>
       </div>
     </>

src/components/Support.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHeart, faSpinner, faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { faHeart, faUserCircle } from '@fortawesome/free-solid-svg-icons'
 import { fetchBorisZappers, ZapSender } from '../services/zapReceiptService'
 import { fetchProfiles } from '../services/profileService'
 import { UserSettings } from '../services/settingsService'
@@ -10,6 +10,7 @@ import { Models } from 'applesauce-core'
 import { useEventModel } from 'applesauce-react/hooks'
 import { useNavigate } from 'react-router-dom'
 import { nip19 } from 'nostr-tools'
+import { getProfileDisplayName } from '../utils/nostrUriResolver'
 
 interface SupportProps {
   relayPool: RelayPool
@@ -21,7 +22,7 @@ type SupporterProfile = ZapSender
 
 const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) => {
   const [supporters, setSupporters] = useState<SupporterProfile[]>([])
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     const loadSupporters = async () => {
@@ -31,7 +32,8 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
         
         if (zappers.length > 0) {
           const pubkeys = zappers.map(z => z.pubkey)
-          await fetchProfiles(relayPool, eventStore, pubkeys, settings)
+          // Fetch profiles in background without blocking
+          fetchProfiles(relayPool, eventStore, pubkeys, settings).catch(() => {})
         }
         
         setSupporters(zappers)
@@ -45,14 +47,6 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
     loadSupporters()
   }, [relayPool, eventStore, settings])
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen p-4">
-        <FontAwesomeIcon icon={faSpinner} spin size="2x" className="text-zinc-400" />
-      </div>
-    )
-  }
-
   return (
     <div className="min-h-screen" style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text)' }}>
       <div className="max-w-5xl mx-auto px-4 py-12 md:py-16">
@@ -82,7 +76,32 @@ const Support: React.FC<SupportProps> = ({ relayPool, eventStore, settings }) =>
           </p>
         </div>
 
-        {supporters.length === 0 ? (
+        {loading ? (
+          <>
+            {/* Loading Skeletons */}
+            <div className="mb-16 md:mb-20">
+              <h2 className="text-2xl md:text-3xl font-semibold mb-8 md:mb-10 text-center" style={{ color: 'var(--color-text)' }}>
+                Legends
+              </h2>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-10">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <SupporterSkeleton key={`whale-${i}`} isWhale={true} />
+                ))}
+              </div>
+            </div>
+
+            <div className="mb-12">
+              <h2 className="text-xl md:text-2xl font-semibold mb-8 text-center" style={{ color: 'var(--color-text)' }}>
+                Supporters
+              </h2>
+              <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-4 md:gap-5">
+                {Array.from({ length: 12 }).map((_, i) => (
+                  <SupporterSkeleton key={`supporter-${i}`} isWhale={false} />
+                ))}
+              </div>
+            </div>
+          </>
+        ) : supporters.length === 0 ? (
           <div className="text-center py-12" style={{ color: 'var(--color-text-muted)' }}>
             <p>No supporters yet. Be the first to zap Boris!</p>
           </div>
@@ -164,7 +183,7 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
   const profile = useEventModel(Models.ProfileModel, [supporter.pubkey])
 
   const picture = profile?.picture
-  const name = profile?.name || profile?.display_name || `${supporter.pubkey.slice(0, 8)}...`
+  const name = getProfileDisplayName(profile, supporter.pubkey)
 
   const handleClick = () => {
     const npub = nip19.npubEncode(supporter.pubkey)
@@ -231,5 +250,55 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
   )
 }
 
+interface SupporterSkeletonProps {
+  isWhale: boolean
+}
+
+const SupporterSkeleton: React.FC<SupporterSkeletonProps> = ({ isWhale }) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative">
+        {/* Avatar Skeleton */}
+        <div
+          className={`rounded-full overflow-hidden flex items-center justify-center animate-pulse
+            ${isWhale ? 'w-24 h-24 md:w-28 md:h-28' : 'w-10 h-10 md:w-12 md:h-12'}
+          `}
+          style={{ 
+            backgroundColor: 'var(--color-bg-elevated)'
+          }}
+        >
+          <div 
+            className={`rounded-full ${isWhale ? 'w-20 h-20 md:w-24 md:h-24' : 'w-8 h-8 md:w-10 md:h-10'}`}
+            style={{ backgroundColor: 'var(--color-border)' }}
+          />
+        </div>
+
+        {/* Whale Badge Skeleton */}
+        {isWhale && (
+          <div 
+            className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full animate-pulse border-2"
+            style={{ 
+              backgroundColor: 'var(--color-border)',
+              borderColor: 'var(--color-bg)' 
+            }}
+          />
+        )}
+      </div>
+
+      {/* Name and Total Skeleton */}
+      <div className="mt-2 text-center space-y-1">
+        <div 
+          className={`rounded animate-pulse ${isWhale ? 'h-4 w-16' : 'h-3 w-12'}`}
+          style={{ backgroundColor: 'var(--color-border)' }}
+        />
+        <div 
+          className={`rounded animate-pulse ${isWhale ? 'h-3 w-12' : 'h-2 w-10'}`}
+          style={{ backgroundColor: 'var(--color-border)' }}
+        />
+      </div>
+    </div>
+  )
+}
+
 export default Support
 

src/components/TTSControls.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo } from 'react'
+import { useTextToSpeech } from '../hooks/useTextToSpeech'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlay, faPause, faGauge } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../services/settingsService'
+import { detect } from 'tinyld'
+
+interface Props {
+  text: string
+  defaultLang?: string
+  className?: string
+  settings?: UserSettings
+}
+
+const SPEED_OPTIONS = [0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.1, 2.4, 2.8, 3]
+
+const TTSControls: React.FC<Props> = ({ text, defaultLang, className, settings }) => {
+  const {
+    supported, speaking, paused,
+    speak, pause, resume,
+    rate, setRate
+  } = useTextToSpeech({ defaultLang, defaultRate: settings?.ttsDefaultSpeed })
+
+  const canPlay = supported && text?.trim().length > 0
+
+  const resolvedSystemLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    if ((mode ? mode === 'system' : settings?.ttsUseSystemLanguage) === true) {
+      return navigator?.language?.split('-')[0]
+    }
+    return undefined
+  }, [settings?.ttsLanguageMode, settings?.ttsUseSystemLanguage])
+
+  const detectContentLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    if (mode) return mode === 'content'
+    return settings?.ttsDetectContentLanguage !== false
+  }, [settings?.ttsLanguageMode, settings?.ttsDetectContentLanguage])
+
+  const specificLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    // If mode is not 'system' or 'content', it's a specific language code
+    if (mode && mode !== 'system' && mode !== 'content') {
+      return mode
+    }
+    return undefined
+  }, [settings?.ttsLanguageMode])
+
+  const handlePlayPause = () => {
+    if (!canPlay) return
+
+    if (!speaking) {
+      let langOverride: string | undefined
+      
+      // Priority: specific language > content detection > system language
+      if (specificLang) {
+        langOverride = specificLang
+      } else if (detectContentLang && text) {
+        try {
+          const lang = detect(text)
+          if (typeof lang === 'string' && lang.length >= 2) langOverride = lang.slice(0, 2)
+        } catch (err) {
+          // ignore detection errors
+        }
+      }
+      if (!langOverride && resolvedSystemLang) {
+        langOverride = resolvedSystemLang
+      }
+      speak(text, langOverride)
+    } else if (paused) {
+      resume()
+    } else {
+      pause()
+    }
+  }
+
+  const handleCycleSpeed = () => {
+    const currentIndex = SPEED_OPTIONS.indexOf(rate)
+    const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
+    const next = SPEED_OPTIONS[nextIndex]
+    setRate(next)
+  }
+
+  const playLabel = !speaking ? 'Listen' : (paused ? 'Resume' : 'Pause')
+
+  if (!supported) return null
+
+  return (
+    <div className={className || 'tts-controls'} style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+      <button
+        type="button"
+        className="article-menu-btn"
+        onClick={handlePlayPause}
+        title={playLabel}
+        disabled={!canPlay}
+      >
+        <FontAwesomeIcon icon={!speaking ? faPlay : (paused ? faPlay : faPause)} />
+      </button>
+      <button
+        type="button"
+        className="article-menu-btn"
+        onClick={handleCycleSpeed}
+        title="Cycle speed"
+      >
+        <FontAwesomeIcon icon={faGauge} />
+        <span>{rate}x</span>
+      </button>
+    </div>
+  )
+}
+
+export default TTSControls
+

src/components/ThreePaneLayout.tsx

@@ -5,6 +5,7 @@ import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
+import VideoView from './VideoView'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
@@ -19,6 +20,7 @@ import { HighlightVisibility } from './HighlightsPanel'
 import { HighlightButtonRef } from './HighlightButton'
 import { BookmarkReference } from '../utils/contentLoader'
 import { useIsMobile } from '../hooks/useMediaQuery'
+import { classifyUrl } from '../utils/helpers'
 import { useScrollDirection } from '../hooks/useScrollDirection'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -134,15 +136,30 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
   const showHighlightsButton = scrollDirection !== 'down' && !isAtTop
 
   // Lock body scroll when mobile sidebar or highlights is open
+  const savedScrollPosition = useRef<number>(0)
+  
   useEffect(() => {
     if (isMobile && (props.isSidebarOpen || !props.isHighlightsCollapsed)) {
+      // Save current scroll position
+      savedScrollPosition.current = window.scrollY
+      document.body.style.top = `-${savedScrollPosition.current}px`
       document.body.classList.add('mobile-sidebar-open')
     } else {
+      // Restore scroll position
       document.body.classList.remove('mobile-sidebar-open')
+      document.body.style.top = ''
+      if (savedScrollPosition.current > 0) {
+        // Use requestAnimationFrame to ensure DOM has updated
+        requestAnimationFrame(() => {
+          window.scrollTo(0, savedScrollPosition.current)
+          savedScrollPosition.current = 0
+        })
+      }
     }
     
     return () => {
       document.body.classList.remove('mobile-sidebar-open')
+      document.body.style.top = ''
     }
   }, [isMobile, props.isSidebarOpen, props.isHighlightsCollapsed])
 
@@ -306,7 +323,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
         <div 
           ref={sidebarRef}
           className={`pane sidebar ${isMobile && props.isSidebarOpen ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && !props.isSidebarOpen}
+          {...(isMobile && !props.isSidebarOpen ? { inert: '' } : {})}
         >
           <BookmarkList 
             bookmarks={props.bookmarks}
@@ -358,40 +375,73 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             <>
               {props.support}
             </>
-          ) : (
-            <ContentPanel 
-              loading={props.readerLoading}
-              title={props.readerContent?.title}
-              html={props.readerContent?.html}
-              markdown={props.readerContent?.markdown}
-              image={props.readerContent?.image}
-              summary={props.readerContent?.summary}
-              published={props.readerContent?.published}
-              selectedUrl={props.selectedUrl}
-              highlights={props.classifiedHighlights}
-              showHighlights={props.showHighlights}
-              highlightStyle={props.settings.highlightStyle || 'marker'}
-              highlightColor={props.settings.highlightColor || '#ffff00'}
-              onHighlightClick={props.onHighlightClick}
-              selectedHighlightId={props.selectedHighlightId}
-              highlightVisibility={props.highlightVisibility}
-              onTextSelection={props.onTextSelection}
-              onClearSelection={props.onClearSelection}
-              currentUserPubkey={props.currentUserPubkey}
-              followedPubkeys={props.followedPubkeys}
-              settings={props.settings}
-              relayPool={props.relayPool}
-              activeAccount={props.activeAccount}
-              currentArticle={props.currentArticle}
-              isSidebarCollapsed={props.isCollapsed}
-              isHighlightsCollapsed={props.isHighlightsCollapsed}
-            />
-          )}
+          ) : (() => {
+            // Determine if this is a video URL
+            const isNostrArticle = props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+            const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
+            
+            if (isExternalVideo) {
+              return (
+                <VideoView
+                  videoUrl={props.selectedUrl!}
+                  title={props.readerContent?.title}
+                  image={props.readerContent?.image}
+                  summary={props.readerContent?.summary}
+                  published={props.readerContent?.published}
+                  settings={props.settings}
+                  relayPool={props.relayPool}
+                  activeAccount={props.activeAccount}
+                  onOpenHighlights={() => {
+                    if (props.isHighlightsCollapsed) {
+                      props.onToggleHighlightsPanel()
+                    }
+                  }}
+                />
+              )
+            }
+            
+            return (
+              <ContentPanel 
+                loading={props.readerLoading}
+                title={props.readerContent?.title}
+                html={props.readerContent?.html}
+                markdown={props.readerContent?.markdown}
+                image={props.readerContent?.image}
+                summary={props.readerContent?.summary}
+                published={props.readerContent?.published}
+                selectedUrl={props.selectedUrl}
+                highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+                  ? props.highlights // article-specific highlights only
+                  : props.classifiedHighlights}
+                showHighlights={props.showHighlights}
+                highlightStyle={props.settings.highlightStyle || 'marker'}
+                highlightColor={props.settings.highlightColor || '#ffff00'}
+                onHighlightClick={props.onHighlightClick}
+                selectedHighlightId={props.selectedHighlightId}
+                highlightVisibility={props.highlightVisibility}
+                onTextSelection={props.onTextSelection}
+                onClearSelection={props.onClearSelection}
+                currentUserPubkey={props.currentUserPubkey}
+                followedPubkeys={props.followedPubkeys}
+                settings={props.settings}
+                relayPool={props.relayPool}
+                activeAccount={props.activeAccount}
+                currentArticle={props.currentArticle}
+                isSidebarCollapsed={props.isCollapsed}
+                isHighlightsCollapsed={props.isHighlightsCollapsed}
+                onOpenHighlights={() => {
+                  if (props.isHighlightsCollapsed) {
+                    props.onToggleHighlightsPanel()
+                  }
+                }}
+              />
+            )
+          })()}
         </div>
         <div 
           ref={highlightsRef}
           className={`pane highlights ${isMobile && !props.isHighlightsCollapsed ? 'mobile-open' : ''}`}
-          aria-hidden={isMobile && props.isHighlightsCollapsed}
+          {...(isMobile && props.isHighlightsCollapsed ? { inert: '' } : {})}
         >
           <HighlightsPanel
             highlights={props.highlights}
@@ -411,6 +461,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             relayPool={props.relayPool}
             eventStore={props.eventStore}
             settings={props.settings}
+            isMobile={isMobile}
           />
         </div>
       </div>

src/components/VideoEmbedProcessor.tsx

@@ -0,0 +1,158 @@
+import { useMemo, forwardRef } from 'react'
+import ReactPlayer from 'react-player'
+import { classifyUrl } from '../utils/helpers'
+
+interface VideoEmbedProcessorProps {
+  html: string
+  renderVideoLinksAsEmbeds: boolean
+  className?: string
+}
+
+/**
+ * Component that processes HTML content and optionally embeds video links
+ * as ReactPlayer components when renderVideoLinksAsEmbeds is enabled
+ */
+const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>(({
+  html,
+  renderVideoLinksAsEmbeds,
+  className
+}, ref) => {
+  // Process HTML and extract video URLs in a single pass to keep them in sync
+  const { processedHtml, videoUrls } = useMemo(() => {
+    if (!renderVideoLinksAsEmbeds || !html) {
+      return { processedHtml: html, videoUrls: [] }
+    }
+
+    // Process HTML in stages: <video> blocks, <img> tags with video src, and bare video URLs
+    let result = html
+
+    const collectedUrls: string[] = []
+    let placeholderIndex = 0
+
+    // 1) Replace entire <video>...</video> blocks when they reference a video URL
+    const videoBlockPattern = /<video[^>]*>[\s\S]*?<\/video>/gi
+    const videoBlocks = result.match(videoBlockPattern) || []
+    videoBlocks.forEach((block) => {
+      // Try src on <video>
+      let url: string | null = null
+      const videoSrcMatch = block.match(/<video[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+      if (videoSrcMatch && videoSrcMatch[1]) {
+        url = videoSrcMatch[1]
+      } else {
+        // Try nested <source>
+        const sourceSrcMatch = block.match(/<source[^>]*\s+src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?[^>]*>/i)
+        if (sourceSrcMatch && sourceSrcMatch[1]) {
+          url = sourceSrcMatch[1]
+        }
+      }
+      if (url) {
+        collectedUrls.push(url)
+        const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+        const escaped = block.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        result = result.replace(new RegExp(escaped, 'g'), placeholder)
+        placeholderIndex++
+      }
+    })
+
+    // 2) Replace entire <img ...> tags if their src points to a video
+    const imgTagPattern = /<img[^>]*>/gi
+    const allImgTags = result.match(imgTagPattern) || []
+    allImgTags.forEach((imgTag) => {
+      const srcMatch = imgTag.match(/src=["']?(https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)[^\s<>"']*)["']?/i)
+      if (srcMatch && srcMatch[1]) {
+        const videoUrl = srcMatch[1]
+        collectedUrls.push(videoUrl)
+        const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+        const escapedTag = imgTag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        result = result.replace(new RegExp(escapedTag, 'g'), placeholder)
+        placeholderIndex++
+      }
+    })
+
+    // 3) Replace remaining bare video URLs (direct files or recognized video platforms)
+    const fileVideoPattern = /https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)(?:\?[^\s<>"']*)?/gi
+    const fileVideoUrls: string[] = result.match(fileVideoPattern) || []
+
+    const allUrlPattern = /https?:\/\/[^\s<>"']+(?=\s|>|"|'|$)/gi
+    const allUrls: string[] = result.match(allUrlPattern) || []
+    const platformVideoUrls = allUrls.filter(url => {
+      // include URLs classified as video and not already collected
+      const classification = classifyUrl(url)
+      return classification.type === 'video' && !collectedUrls.includes(url)
+    })
+
+    const remainingUrls = [...fileVideoUrls, ...platformVideoUrls].filter(url => !collectedUrls.includes(url))
+
+    let finalHtml = result
+    remainingUrls.forEach((url) => {
+      const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
+      finalHtml = finalHtml.replace(new RegExp(url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), placeholder)
+      collectedUrls.push(url)
+      placeholderIndex++
+    })
+
+    // Return both processed HTML and collected URLs (in the same order as placeholders)
+    return {
+      processedHtml: collectedUrls.length > 0 ? finalHtml : html,
+      videoUrls: collectedUrls
+    }
+  }, [html, renderVideoLinksAsEmbeds])
+
+  // If no video embedding is enabled, just render the HTML normally
+  if (!renderVideoLinksAsEmbeds || videoUrls.length === 0) {
+    return (
+      <div 
+        ref={ref}
+        className={className}
+        dangerouslySetInnerHTML={{ __html: processedHtml }}
+      />
+    )
+  }
+
+  // Split the HTML by video placeholders and render with embedded players
+  const parts = processedHtml.split(/(__VIDEO_EMBED_\d+__)/)
+  
+  return (
+    <div ref={ref} className={className}>
+      {parts.map((part, index) => {
+        const videoMatch = part.match(/^__VIDEO_EMBED_(\d+)__$/)
+        if (videoMatch) {
+          const videoIndex = parseInt(videoMatch[1])
+          const videoUrl = videoUrls[videoIndex]
+          if (videoUrl) {
+            return (
+              <div key={index} className="reader-video" style={{ margin: '1rem 0' }}>
+                <ReactPlayer 
+                  url={videoUrl}
+                  controls 
+                  width="100%"
+                  height="auto"
+                  style={{ 
+                    width: '100%', 
+                    height: 'auto', 
+                    aspectRatio: '16/9' 
+                  }}
+                />
+              </div>
+            )
+          }
+        }
+        
+        // Regular HTML content - only render if not empty
+        if (part.trim()) {
+          return (
+            <div 
+              key={index}
+              dangerouslySetInnerHTML={{ __html: part }}
+            />
+          )
+        }
+        return null
+      })}
+    </div>
+  )
+})
+
+VideoEmbedProcessor.displayName = 'VideoEmbedProcessor'
+
+export default VideoEmbedProcessor

src/components/VideoView.tsx

@@ -0,0 +1,320 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ReactPlayer from 'react-player'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { UserSettings } from '../services/settingsService'
+import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
+import { buildNativeVideoUrl } from '../utils/videoHelpers'
+import { getYouTubeThumbnail } from '../utils/imagePreview'
+
+// Helper function to get Vimeo thumbnail
+const getVimeoThumbnail = (url: string): string | null => {
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/)
+  if (!vimeoMatch) return null
+  
+  const videoId = vimeoMatch[1]
+  return `https://vumbnail.com/${videoId}.jpg`
+}
+import { 
+  createWebsiteReaction,
+  hasMarkedWebsiteAsRead
+} from '../services/reactionService'
+import { unarchiveWebsite } from '../services/unarchiveService'
+import ReaderHeader from './ReaderHeader'
+
+interface VideoViewProps {
+  videoUrl: string
+  title?: string
+  image?: string
+  summary?: string
+  published?: number
+  settings?: UserSettings
+  relayPool?: RelayPool | null
+  activeAccount?: IAccount | null
+  onOpenHighlights?: () => void
+}
+
+const VideoView: React.FC<VideoViewProps> = ({
+  videoUrl,
+  title,
+  image,
+  summary,
+  published,
+  settings,
+  relayPool,
+  activeAccount,
+  onOpenHighlights
+}) => {
+  const [isMarkedAsWatched, setIsMarkedAsWatched] = useState(false)
+  const [isCheckingWatchedStatus, setIsCheckingWatchedStatus] = useState(false)
+  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showVideoMenu, setShowVideoMenu] = useState(false)
+  const [videoMenuOpenUpward, setVideoMenuOpenUpward] = useState(false)
+  const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null)
+  const [ytMeta, setYtMeta] = useState<{ title?: string; description?: string; transcript?: string } | null>(null)
+  const videoMenuRef = useRef<HTMLDivElement>(null)
+
+  // Load YouTube metadata when applicable
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!videoUrl) return setYtMeta(null)
+        const id = extractYouTubeId(videoUrl)
+        if (!id) return setYtMeta(null)
+        const locale = navigator?.language?.split('-')[0] || 'en'
+        const data = await getYouTubeMeta(id, locale)
+        if (data) setYtMeta({ title: data.title, description: data.description, transcript: data.transcript })
+      } catch {
+        setYtMeta(null)
+      }
+    })()
+  }, [videoUrl])
+
+  // Check if video is marked as watched
+  useEffect(() => {
+    const checkWatchedStatus = async () => {
+      if (!activeAccount || !videoUrl) return
+      
+      setIsCheckingWatchedStatus(true)
+      try {
+        const isWatched = relayPool ? await hasMarkedWebsiteAsRead(videoUrl, activeAccount.pubkey, relayPool) : false
+        setIsMarkedAsWatched(isWatched)
+      } catch (error) {
+        console.warn('Failed to check watched status:', error)
+      } finally {
+        setIsCheckingWatchedStatus(false)
+      }
+    }
+
+    checkWatchedStatus()
+  }, [activeAccount, videoUrl, relayPool])
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (videoMenuRef.current && !videoMenuRef.current.contains(target)) {
+        setShowVideoMenu(false)
+      }
+    }
+    
+    if (showVideoMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showVideoMenu])
+
+  // Check menu position for upward opening
+  useEffect(() => {
+    const checkMenuPosition = (menuRef: React.RefObject<HTMLDivElement>, setOpenUpward: (upward: boolean) => void) => {
+      if (!menuRef.current) return
+      
+      const rect = menuRef.current.getBoundingClientRect()
+      const viewportHeight = window.innerHeight
+      const spaceBelow = viewportHeight - rect.bottom
+      const spaceAbove = rect.top
+      
+      // Open upward if there's more space above and less space below
+      setOpenUpward(spaceAbove > spaceBelow && spaceBelow < 200)
+    }
+
+    if (showVideoMenu) {
+      checkMenuPosition(videoMenuRef, setVideoMenuOpenUpward)
+    }
+  }, [showVideoMenu])
+
+  const formatDuration = (totalSeconds: number): string => {
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = Math.floor(totalSeconds % 60)
+    const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes)
+    const ss = String(seconds).padStart(2, '0')
+    return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`
+  }
+
+  const handleMarkAsWatched = async () => {
+    if (!activeAccount || !videoUrl || isCheckingWatchedStatus) return
+
+    setIsCheckingWatchedStatus(true)
+    setShowCheckAnimation(true)
+
+    try {
+      if (isMarkedAsWatched) {
+        // Unmark as watched
+        if (relayPool) {
+          await unarchiveWebsite(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(false)
+      } else {
+        // Mark as watched
+        if (relayPool) {
+          await createWebsiteReaction(videoUrl, activeAccount, relayPool)
+        }
+        setIsMarkedAsWatched(true)
+      }
+    } catch (error) {
+      console.warn('Failed to update watched status:', error)
+    } finally {
+      setIsCheckingWatchedStatus(false)
+      setTimeout(() => setShowCheckAnimation(false), 1000)
+    }
+  }
+
+  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
+
+  const handleOpenVideoExternal = () => {
+    window.open(videoUrl, '_blank', 'noopener,noreferrer')
+    setShowVideoMenu(false)
+  }
+
+  const handleOpenVideoNative = () => {
+    const native = buildNativeVideoUrl(videoUrl)
+    if (native) {
+      window.location.href = native
+    } else {
+      window.location.href = videoUrl
+    }
+    setShowVideoMenu(false)
+  }
+
+  const handleCopyVideoUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(videoUrl)
+    } catch (e) {
+      console.warn('Clipboard copy failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const handleShareVideoUrl = async () => {
+    try {
+      if ((navigator as { share?: (d: { title?: string; url?: string }) => Promise<void> }).share) {
+        await (navigator as { share: (d: { title?: string; url?: string }) => Promise<void> }).share({ 
+          title: ytMeta?.title || title || 'Video', 
+          url: videoUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(videoUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowVideoMenu(false)
+    }
+  }
+
+  const displayTitle = ytMeta?.title || title
+  const displaySummary = ytMeta?.description || summary
+  const durationText = videoDurationSec !== null ? formatDuration(videoDurationSec) : null
+  
+  // Get video thumbnail for cover image
+  const youtubeThumbnail = getYouTubeThumbnail(videoUrl)
+  const vimeoThumbnail = getVimeoThumbnail(videoUrl)
+  const videoThumbnail = youtubeThumbnail || vimeoThumbnail
+  const displayImage = videoThumbnail || image
+
+  return (
+    <>
+      <ReaderHeader 
+        title={displayTitle}
+        image={displayImage}
+        summary={displaySummary}
+        published={published}
+        readingTimeText={durationText}
+        hasHighlights={false}
+        highlightCount={0}
+        settings={settings}
+        highlights={[]}
+        highlightVisibility={{ nostrverse: true, friends: true, mine: true }}
+        onHighlightCountClick={onOpenHighlights}
+      />
+      
+      <div className="reader-video">
+        <ReactPlayer 
+          url={videoUrl} 
+          controls 
+          width="100%"
+          height="auto"
+          style={{ 
+            width: '100%', 
+            height: 'auto', 
+            aspectRatio: '16/9' 
+          }}
+          onDuration={(d) => setVideoDurationSec(Math.floor(d))}
+        />
+      </div>
+      
+      {displaySummary && (
+        <div className="large-text" style={{ color: '#ddd', padding: '0 0.75rem', whiteSpace: 'pre-wrap', marginBottom: '0.75rem' }}>
+          {displaySummary}
+        </div>
+      )}
+      
+      {ytMeta?.transcript && (
+        <div style={{ padding: '0 0.75rem 1rem 0.75rem' }}>
+          <h3 style={{ margin: '1rem 0 0.5rem 0', fontSize: '1rem', color: '#aaa' }}>Transcript</h3>
+          <div className="large-text" style={{ whiteSpace: 'pre-wrap', color: '#ddd' }}>
+            {ytMeta.transcript}
+          </div>
+        </div>
+      )}
+      
+      <div className="article-menu-container">
+        <div className="article-menu-wrapper" ref={videoMenuRef}>
+          <button
+            className="article-menu-btn"
+            onClick={toggleVideoMenu}
+            title="More options"
+          >
+            <FontAwesomeIcon icon={faEllipsisH} />
+          </button>
+          {showVideoMenu && (
+            <div className={`article-menu ${videoMenuOpenUpward ? 'open-upward' : ''}`}>
+              <button className="article-menu-item" onClick={handleOpenVideoExternal}>
+                <FontAwesomeIcon icon={faExternalLinkAlt} />
+                <span>Open Link</span>
+              </button>
+              <button className="article-menu-item" onClick={handleOpenVideoNative}>
+                <FontAwesomeIcon icon={faMobileAlt} />
+                <span>Open in Native App</span>
+              </button>
+              <button className="article-menu-item" onClick={handleCopyVideoUrl}>
+                <FontAwesomeIcon icon={faCopy} />
+                <span>Copy URL</span>
+              </button>
+              <button className="article-menu-item" onClick={handleShareVideoUrl}>
+                <FontAwesomeIcon icon={faShare} />
+                <span>Share</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      {activeAccount && (
+        <div className="mark-as-read-container">
+          <button
+            className={`mark-as-read-btn ${isMarkedAsWatched ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
+            onClick={handleMarkAsWatched}
+            disabled={isCheckingWatchedStatus}
+            title={isMarkedAsWatched ? 'Already Marked as Watched' : 'Mark as Watched'}
+            style={isMarkedAsWatched ? { opacity: 0.85 } : undefined}
+          >
+            <FontAwesomeIcon 
+              icon={faCheckCircle} 
+              className={isMarkedAsWatched ? 'check-icon' : 'check-icon-empty'} 
+            />
+            <span>{isMarkedAsWatched ? 'Watched' : 'Mark as Watched'}</span>
+          </button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VideoView

src/config/bots.ts

@@ -0,0 +1,17 @@
+import { nip19 } from 'nostr-tools'
+
+/**
+ * Hardcoded list of bot pubkeys (hex format) to hide articles from
+ * These are accounts known to be bots or automated services
+ */
+export const BOT_PUBKEYS = new Set([
+  // Step Counter Bot (npub14l5xklll5vxzrf6hfkv8m6n2gqevythn5pqc6ezluespah0e8ars4279ss)
+  nip19.decode('npub14l5xklll5vxzrf6hfkv8m6n2gqevythn5pqc6ezluespah0e8ars4279ss').data as string,
+])
+
+/**
+ * Check if a pubkey corresponds to a known bot
+ */
+export function isKnownBot(pubkey: string): boolean {
+  return BOT_PUBKEYS.has(pubkey)
+}

src/config/kinds.ts

@@ -1,8 +1,9 @@
 // Nostr event kinds used throughout the application
 export const KINDS = {
-  Highlights: 9802,              // NIP-?? user highlights
+  Highlights: 9802,              // NIP-84 user highlights
   BlogPost: 30023,               // NIP-23 long-form article
-  AppData: 30078,                // NIP-78 application data (reading positions)
+  AppData: 30078,                // NIP-78 application data
+  ReadingProgress: 39802,        // NIP-85 reading progress
   List: 30001,                   // NIP-51 list (addressable)
   ListReplaceable: 30003,        // NIP-51 replaceable list
   ListSimple: 10003,             // NIP-51 simple list
@@ -13,3 +14,9 @@ export const KINDS = {
 
 export type KindValue = typeof KINDS[keyof typeof KINDS]
 
+// Reading progress tracking configuration
+export const READING_PROGRESS = {
+  // Minimum character count to track reading progress (roughly 150 words)
+  MIN_CONTENT_LENGTH: 1000
+} as const
+

src/config/nostrGateways.ts

@@ -2,7 +2,7 @@
  * Nostr gateway URLs for viewing events and profiles on the web
  */
 
-export const NOSTR_GATEWAY = 'https://nostr.at' as const
+export const NOSTR_GATEWAY = 'https://njump.to' as const
 export const SEARCH_PORTAL = 'https://ants.sh' as const
 
 /**
@@ -24,7 +24,7 @@ export function getEventUrl(nevent: string): string {
  * Automatically detects if it's a profile (npub/nprofile) or event (note/nevent/naddr)
  */
 export function getNostrUrl(identifier: string): string {
-  // nostr.at uses simple /{identifier} format for all types
+  // njump.to uses simple /{identifier} format for all types
   return `${NOSTR_GATEWAY}/${identifier}`
 }
 

src/config/relays.ts

@@ -11,13 +11,11 @@ export const RELAYS = [
   'wss://relay.damus.io',
   'wss://nos.lol',
   'wss://relay.nostr.band',
-  'wss://relay.dergigi.com',
   'wss://wot.dergigi.com',
   'wss://relay.snort.social',
-  'wss://relay.current.fyi',
   'wss://nostr-pub.wellorder.net',
   'wss://purplepag.es',
   'wss://relay.primal.net',
-  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87'
+  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87',
 ]
 

src/hooks/useAdaptiveTextColor.ts

@@ -43,21 +43,14 @@ export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveText
           height: Math.floor(height * 0.25)
         })
         
-        console.log('Adaptive color detected:', {
-          hex: color.hex,
-          rgb: color.rgb,
-          isLight: color.isLight,
-          isDark: color.isDark
-        })
+        // Color analysis complete
         
         // Use library's built-in isLight check for optimal contrast
         if (color.isLight) {
-          console.log('Light background detected, using black text')
           setColors({
             textColor: '#000000'
           })
         } else {
-          console.log('Dark background detected, using white text')
           setColors({
             textColor: '#ffffff'
           })

src/hooks/useArticleLoader.ts

@@ -1,20 +1,36 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useState, Dispatch, SetStateAction } from 'react'
+import { useLocation } from 'react-router-dom'
 import { RelayPool } from 'applesauce-relay'
-import { fetchArticleByNaddr } from '../services/articleService'
+import type { IEventStore } from 'applesauce-core'
+import { nip19 } from 'nostr-tools'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { Helpers } from 'applesauce-core'
+import { queryEvents } from '../services/dataFetch'
+import { fetchArticleByNaddr, getFromCache, saveToCache } from '../services/articleService'
 import { fetchHighlightsForArticle } from '../services/highlightService'
+import { preloadImage } from './useImageCache'
 import { ReadableContent } from '../services/readerService'
 import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
 import { UserSettings } from '../services/settingsService'
+import { useDocumentTitle } from './useDocumentTitle'
+
+interface PreviewData {
+  title: string
+  image?: string
+  summary?: string
+  published?: number
+}
 
 interface UseArticleLoaderProps {
   naddr: string | undefined
   relayPool: RelayPool | null
+  eventStore?: IEventStore | null
   setSelectedUrl: (url: string) => void
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
   setIsCollapsed: (collapsed: boolean) => void
-  setHighlights: (highlights: Highlight[]) => void
+  setHighlights: Dispatch<SetStateAction<Highlight[]>>
   setHighlightsLoading: (loading: boolean) => void
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
@@ -25,6 +41,7 @@ interface UseArticleLoaderProps {
 export function useArticleLoader({
   naddr,
   relayPool,
+  eventStore,
   setSelectedUrl,
   setReaderContent,
   setReaderLoading,
@@ -36,79 +53,475 @@ export function useArticleLoader({
   setCurrentArticle,
   settings
 }: UseArticleLoaderProps) {
+  const location = useLocation()
+  const mountedRef = useRef(true)
+  // Hold latest settings without retriggering effect
+  const settingsRef = useRef<UserSettings | undefined>(settings)
   useEffect(() => {
-    if (!relayPool || !naddr) return
+    settingsRef.current = settings
+  }, [settings])
+  // Track in-flight request to prevent stale updates from previous naddr
+  const currentRequestIdRef = useRef(0)
+  
+  // Extract preview data from navigation state (from blog post cards)
+  const previewData = (location.state as { previewData?: PreviewData })?.previewData
+  
+  // Track the current article title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
+  
+  useEffect(() => {
+    mountedRef.current = true
     
-    const loadArticle = async () => {
-      setReaderLoading(true)
+    // First check: naddr is required
+    if (!naddr) {
       setReaderContent(undefined)
-      setSelectedUrl(`nostr:${naddr}`)
-      setIsCollapsed(true)
-      // Keep highlights panel collapsed by default - only open on user interaction
-      
-      try {
-        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
+      return
+    }
+    
+    // Clear readerContent immediately to prevent showing stale content from previous article
+    // This ensures images from previous articles don't flash briefly
+    setReaderContent(undefined)
+    
+    // Synchronously check cache sources BEFORE checking relayPool
+    // This prevents showing loading skeletons when content is immediately available
+    // and fixes the race condition where relayPool isn't ready yet
+    let foundInCache = false
+    try {
+      // Check localStorage cache first (synchronous, doesn't need relayPool)
+      const cachedArticle = getFromCache(naddr)
+      if (cachedArticle) {
+        foundInCache = true
+        const title = cachedArticle.title || 'Untitled Article'
+        setCurrentTitle(title)
         setReaderContent({
-          title: article.title,
-          markdown: article.markdown,
-          image: article.image,
-          summary: article.summary,
-          published: article.published,
+          title,
+          markdown: cachedArticle.markdown,
+          image: cachedArticle.image,
+          summary: cachedArticle.summary,
+          published: cachedArticle.published,
           url: `nostr:${naddr}`
         })
-        
-        const dTag = article.event.tags.find(t => t[0] === 'd')?.[1] || ''
-        const articleCoordinate = `${article.event.kind}:${article.author}:${dTag}`
-        
+        const dTag = cachedArticle.event.tags.find(t => t[0] === 'd')?.[1] || ''
+        const articleCoordinate = `${cachedArticle.event.kind}:${cachedArticle.author}:${dTag}`
         setCurrentArticleCoordinate(articleCoordinate)
-        setCurrentArticleEventId(article.event.id)
-        setCurrentArticle?.(article.event)
-        
-        console.log('📰 Article loaded:', article.title)
-        console.log('📍 Coordinate:', articleCoordinate)
-        
-        // Set reader loading to false immediately after article content is ready
-        // Don't wait for highlights to finish loading
+        setCurrentArticleEventId(cachedArticle.event.id)
+        setCurrentArticle?.(cachedArticle.event)
         setReaderLoading(false)
+        setSelectedUrl(`nostr:${naddr}`)
+        setIsCollapsed(true)
         
-        // Fetch highlights asynchronously without blocking article display
-        // Stream them as they arrive for instant rendering
-        try {
-          setHighlightsLoading(true)
-          setHighlights([]) // Clear old highlights
-          const highlightsMap = new Map<string, Highlight>()
+        // Preload image if available to ensure it's cached by Service Worker
+        // This ensures images are available when offline
+        if (cachedArticle.image) {
+          preloadImage(cachedArticle.image)
+        }
+        
+        // Store in EventStore for future lookups
+        if (eventStore) {
+          try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            eventStore.add?.(cachedArticle.event as unknown as any)
+          } catch {
+            // Silently ignore store errors
+          }
+        }
+        
+        // Fetch highlights in background (don't block UI)
+        // Only fetch highlights if relayPool is available
+        if (mountedRef.current && relayPool) {
+          const dTag = cachedArticle.event.tags.find((t: string[]) => t[0] === 'd')?.[1] || ''
+          const coord = dTag ? `${cachedArticle.event.kind}:${cachedArticle.author}:${dTag}` : undefined
+          const eventId = cachedArticle.event.id
           
-          await fetchHighlightsForArticle(
-            relayPool, 
-            articleCoordinate, 
-            article.event.id,
-            (highlight) => {
-              // Deduplicate highlights by ID as they arrive
-              if (!highlightsMap.has(highlight.id)) {
-                highlightsMap.set(highlight.id, highlight)
-                const highlightsList = Array.from(highlightsMap.values())
-                setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
+          if (coord && eventId) {
+            setHighlightsLoading(true)
+            fetchHighlightsForArticle(
+              relayPool,
+              coord,
+              eventId,
+              (highlight) => {
+                if (!mountedRef.current) return
+                setHighlights((prev: Highlight[]) => {
+                  if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                  const next = [highlight, ...prev]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              },
+              settings,
+              false,
+              eventStore || undefined
+            ).then(() => {
+              if (mountedRef.current) {
+                setHighlightsLoading(false)
               }
-            },
-            settings
-          )
-          console.log(`📌 Found ${highlightsMap.size} highlights`)
+            }).catch(() => {
+              if (mountedRef.current) {
+                setHighlightsLoading(false)
+              }
+            })
+          }
+        }
+        
+        // Return early - we have cached content, no need to query relays
+        return
+      }
+    } catch (err) {
+      // If cache check fails, fall through to async loading
+      console.warn('[article-loader] Cache check failed:', err)
+    }
+    
+    // Check EventStore synchronously (also doesn't need relayPool)
+    let foundInEventStore = false
+    if (eventStore && !foundInCache) {
+      try {
+        // Decode naddr to get the coordinate
+        const decoded = nip19.decode(naddr)
+        if (decoded.type === 'naddr') {
+          const pointer = decoded.data as AddressPointer
+          const coordinate = `${pointer.kind}:${pointer.pubkey}:${pointer.identifier}`
+          const storedEvent = eventStore.getEvent?.(coordinate)
+          if (storedEvent) {
+            foundInEventStore = true
+            const title = Helpers.getArticleTitle(storedEvent) || 'Untitled Article'
+            setCurrentTitle(title)
+            const image = Helpers.getArticleImage(storedEvent)
+            const summary = Helpers.getArticleSummary(storedEvent)
+            const published = Helpers.getArticlePublished(storedEvent)
+            setReaderContent({
+              title,
+              markdown: storedEvent.content,
+              image,
+              summary,
+              published,
+              url: `nostr:${naddr}`
+            })
+            const dTag = storedEvent.tags.find(t => t[0] === 'd')?.[1] || ''
+            const articleCoordinate = `${storedEvent.kind}:${storedEvent.pubkey}:${dTag}`
+            setCurrentArticleCoordinate(articleCoordinate)
+            setCurrentArticleEventId(storedEvent.id)
+            setCurrentArticle?.(storedEvent)
+            setReaderLoading(false)
+            setSelectedUrl(`nostr:${naddr}`)
+            setIsCollapsed(true)
+            
+            // Fetch highlights in background if relayPool is available
+            if (relayPool) {
+              const coord = dTag ? `${storedEvent.kind}:${storedEvent.pubkey}:${dTag}` : undefined
+              const eventId = storedEvent.id
+              
+              if (coord && eventId) {
+                setHighlightsLoading(true)
+                fetchHighlightsForArticle(
+                  relayPool,
+                  coord,
+                  eventId,
+                  (highlight) => {
+                    if (!mountedRef.current) return
+                    setHighlights((prev: Highlight[]) => {
+                      if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                      const next = [highlight, ...prev]
+                      return next.sort((a, b) => b.created_at - a.created_at)
+                    })
+                  },
+                  settings,
+                  false,
+                  eventStore || undefined
+                ).then(() => {
+                  if (mountedRef.current) {
+                    setHighlightsLoading(false)
+                  }
+                }).catch(() => {
+                  if (mountedRef.current) {
+                    setHighlightsLoading(false)
+                  }
+                })
+              }
+            }
+            
+            // Return early - we have EventStore content, no need to query relays yet
+            // But we might want to fetch from relays in background if relayPool becomes available
+            return
+          }
+        }
+      } catch (err) {
+        // Ignore store errors, fall through to relay query
+        console.warn('[article-loader] EventStore check failed:', err)
+      }
+    }
+    
+    // Only return early if we have no content AND no relayPool to fetch from
+    if (!relayPool && !foundInCache && !foundInEventStore) {
+      setReaderLoading(true)
+      setReaderContent(undefined)
+      return
+    }
+    
+    // If we have relayPool, proceed with async loading
+    if (!relayPool) {
+      return
+    }
+    
+    const loadArticle = async () => {
+      const requestId = ++currentRequestIdRef.current
+      
+      if (!mountedRef.current) {
+        return
+      }
+      
+      setSelectedUrl(`nostr:${naddr}`)
+      setIsCollapsed(true)
+      
+      // Don't clear highlights yet - let the smart filtering logic handle it
+      // when we know the article coordinate
+      setHighlightsLoading(false) // Don't show loading yet
+      
+      // Note: Cache and EventStore were already checked synchronously above
+      // This async function only runs if we need to fetch from relays
+
+      // At this point, we've checked EventStore and cache - neither had content
+      // Only show loading skeleton if we also don't have preview data
+      if (previewData) {
+        // If we have preview data from navigation, show it immediately (no skeleton!)
+        setCurrentTitle(previewData.title)
+        setReaderContent({
+          title: previewData.title,
+          markdown: '', // Will be loaded from relay
+          image: previewData.image,
+          summary: previewData.summary,
+          published: previewData.published,
+          url: `nostr:${naddr}`
+        })
+        setReaderLoading(false) // Turn off loading immediately - we have the preview!
+        
+        // Don't preload image here - it should already be cached from BlogPostCard
+        // Preloading again would be redundant and could cause unnecessary network requests
+      } else {
+        // No cache, no EventStore, no preview data - need to load from relays
+        setReaderLoading(true)
+        setReaderContent(undefined)
+      }
+      
+      try {
+        // Decode naddr to filter
+        const decoded = nip19.decode(naddr)
+        if (decoded.type !== 'naddr') {
+          throw new Error('Invalid naddr format')
+        }
+        const pointer = decoded.data as AddressPointer
+        const filter = {
+          kinds: [pointer.kind],
+          authors: [pointer.pubkey],
+          '#d': [pointer.identifier]
+        }
+
+        let firstEmitted = false
+        let latestEvent: NostrEvent | null = null
+
+        // Stream local-first via queryEvents; rely on EOSE (no timeouts)
+        const events = await queryEvents(relayPool, filter, {
+          onEvent: (evt) => {
+            if (!mountedRef.current) {
+              return
+            }
+            if (currentRequestIdRef.current !== requestId) {
+              return
+            }
+
+            // Store in event store for future local reads
+            try { 
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              eventStore?.add?.(evt as unknown as any) 
+            } catch {
+              // Silently ignore store errors
+            }
+
+            // Keep latest by created_at
+            if (!latestEvent || evt.created_at > latestEvent.created_at) {
+              latestEvent = evt
+            }
+
+            // Emit immediately on first event
+            if (!firstEmitted) {
+              firstEmitted = true
+              const title = Helpers.getArticleTitle(evt) || 'Untitled Article'
+              const image = Helpers.getArticleImage(evt)
+              const summary = Helpers.getArticleSummary(evt)
+              const published = Helpers.getArticlePublished(evt)
+              
+              setCurrentTitle(title)
+              setReaderContent({
+                title,
+                markdown: evt.content,
+                image,
+                summary,
+                published,
+                url: `nostr:${naddr}`
+              })
+              const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+              const articleCoordinate = `${evt.kind}:${evt.pubkey}:${dTag}`
+              setCurrentArticleCoordinate(articleCoordinate)
+              setCurrentArticleEventId(evt.id)
+              setCurrentArticle?.(evt)
+              setReaderLoading(false)
+              
+              // Save to cache immediately when we get the first event
+              // Don't wait for queryEvents to complete in case it hangs
+              const articleContent = {
+                title,
+                markdown: evt.content,
+                image,
+                summary,
+                published,
+                author: evt.pubkey,
+                event: evt
+              }
+              saveToCache(naddr, articleContent, settings)
+              
+              // Preload image to ensure it's cached by Service Worker
+              if (image) {
+                preloadImage(image)
+              }
+            }
+          }
+        })
+
+        if (!mountedRef.current || currentRequestIdRef.current !== requestId) {
+          return
+        }
+
+        // Finalize with newest version if it's newer than what we first rendered
+        const finalEvent = (events.sort((a, b) => b.created_at - a.created_at)[0]) || latestEvent
+        if (finalEvent) {
+          const title = Helpers.getArticleTitle(finalEvent) || 'Untitled Article'
+          const image = Helpers.getArticleImage(finalEvent)
+          const summary = Helpers.getArticleSummary(finalEvent)
+          const published = Helpers.getArticlePublished(finalEvent)
+          
+          setCurrentTitle(title)
+          setReaderContent({
+            title,
+            markdown: finalEvent.content,
+            image,
+            summary,
+            published,
+            url: `nostr:${naddr}`
+          })
+
+          const dTag = finalEvent.tags.find(t => t[0] === 'd')?.[1] || ''
+          const articleCoordinate = `${finalEvent.kind}:${finalEvent.pubkey}:${dTag}`
+          setCurrentArticleCoordinate(articleCoordinate)
+          setCurrentArticleEventId(finalEvent.id)
+          setCurrentArticle?.(finalEvent)
+          
+          // Save to cache for future loads (if we haven't already saved from first event)
+          // Only save if this is a different/newer event than what we first rendered
+          // Note: We already saved from first event, so only save if this is different
+          if (!firstEmitted) {
+            // First event wasn't emitted, so save now
+            const articleContent = {
+              title,
+              markdown: finalEvent.content,
+              image,
+              summary,
+              published,
+              author: finalEvent.pubkey,
+              event: finalEvent
+            }
+            saveToCache(naddr, articleContent)
+          }
+        } else {
+          // As a last resort, fall back to the legacy helper (which includes cache)
+          const article = await fetchArticleByNaddr(relayPool, naddr, false, settingsRef.current)
+          if (!mountedRef.current || currentRequestIdRef.current !== requestId) return
+          setCurrentTitle(article.title)
+          setReaderContent({
+            title: article.title,
+            markdown: article.markdown,
+            image: article.image,
+            summary: article.summary,
+            published: article.published,
+            url: `nostr:${naddr}`
+          })
+          const dTag = article.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const articleCoordinate = `${article.event.kind}:${article.author}:${dTag}`
+          setCurrentArticleCoordinate(articleCoordinate)
+          setCurrentArticleEventId(article.event.id)
+          setCurrentArticle?.(article.event)
+        }
+
+        // Fetch highlights after content is shown
+        try {
+          if (!mountedRef.current) return
+          
+          const le = latestEvent as NostrEvent | null
+          const dTag = le ? (le.tags.find((t: string[]) => t[0] === 'd')?.[1] || '') : ''
+          const coord = le && dTag ? `${le.kind}:${le.pubkey}:${dTag}` : undefined
+          const eventId = le ? le.id : undefined
+          
+          if (coord && eventId) {
+            setHighlightsLoading(true)
+            // Clear highlights that don't belong to this article coordinate
+            setHighlights((prev) => {
+              return prev.filter(h => {
+                // Keep highlights that match this article coordinate or event ID
+                return h.eventReference === coord || h.eventReference === eventId
+              })
+            })
+            await fetchHighlightsForArticle(
+              relayPool,
+              coord,
+              eventId,
+              (highlight) => {
+                if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
+                setHighlights((prev: Highlight[]) => {
+                  if (prev.some((h: Highlight) => h.id === highlight.id)) return prev
+                  const next = [highlight, ...prev]
+                  return next.sort((a, b) => b.created_at - a.created_at)
+                })
+              },
+              settingsRef.current,
+              false, // force
+              eventStore || undefined
+            )
+          } else {
+            // No article event to fetch highlights for - clear and don't show loading
+            setHighlights([])
+            setHighlightsLoading(false)
+          }
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
+            setHighlightsLoading(false)
+          }
         }
       } catch (err) {
         console.error('Failed to load article:', err)
-        setReaderContent({
-          title: 'Error Loading Article',
-          html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url: `nostr:${naddr}`
-        })
-        setReaderLoading(false)
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
+          setReaderContent({
+            title: 'Error Loading Article',
+            html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url: `nostr:${naddr}`
+          })
+          setReaderLoading(false)
+        }
       }
     }
     
     loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
+    
+    return () => {
+      mountedRef.current = false
+    }
+    // Include relayPool in dependencies so effect re-runs when it becomes available
+    // This fixes the race condition where articles don't load on direct navigation
+    // We guard against unnecessary re-renders by checking cache/EventStore first
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    naddr,
+    previewData,
+    relayPool
+  ])
 }

src/hooks/useBookmarksData.ts

@@ -11,6 +11,7 @@ import { contactsController } from '../services/contactsController'
 import { useStoreTimeline } from './useStoreTimeline'
 import { eventToHighlight } from '../services/highlightEventProcessor'
 import { KINDS } from '../config/kinds'
+import { nip19 } from 'nostr-tools'
 
 interface UseBookmarksDataParams {
   relayPool: RelayPool | null
@@ -44,21 +45,38 @@ export const useBookmarksData = ({
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [lastFetchTime, setLastFetchTime] = useState<number | null>(null)
 
+  // Determine effective article coordinate as early as possible
+  // Prefer state-derived coordinate, but fall back to route naddr before content loads
+  const effectiveArticleCoordinate = useMemo(() => {
+    if (currentArticleCoordinate) return currentArticleCoordinate
+    if (!naddr) return undefined
+    try {
+      const decoded = nip19.decode(naddr)
+      if (decoded.type === 'naddr') {
+        const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+        return `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+      }
+    } catch {
+      // ignore decode failure; treat as no coordinate yet
+    }
+    return undefined
+  }, [currentArticleCoordinate, naddr])
+
   // Load cached article-specific highlights from event store
   const articleFilter = useMemo(() => {
-    if (!currentArticleCoordinate) return null
+    if (!effectiveArticleCoordinate) return null
     return {
       kinds: [KINDS.Highlights],
-      '#a': [currentArticleCoordinate],
+      '#a': [effectiveArticleCoordinate],
       ...(currentArticleEventId ? { '#e': [currentArticleEventId] } : {})
     }
-  }, [currentArticleCoordinate, currentArticleEventId])
+  }, [effectiveArticleCoordinate, currentArticleEventId])
   
   const cachedArticleHighlights = useStoreTimeline(
     eventStore || null,
     articleFilter || { kinds: [KINDS.Highlights], limit: 0 }, // empty filter if no article
     eventToHighlight,
-    [currentArticleCoordinate, currentArticleEventId]
+    [effectiveArticleCoordinate, currentArticleEventId]
   )
 
   // Subscribe to centralized controllers
@@ -84,7 +102,7 @@ export const useBookmarksData = ({
     
     setHighlightsLoading(true)
     try {
-      if (currentArticleCoordinate) {
+      if (effectiveArticleCoordinate) {
         // Seed with cached highlights first
         if (cachedArticleHighlights.length > 0) {
           setArticleHighlights(cachedArticleHighlights.sort((a, b) => b.created_at - a.created_at))
@@ -97,7 +115,7 @@ export const useBookmarksData = ({
         
         await fetchHighlightsForArticle(
           relayPool, 
-          currentArticleCoordinate, 
+          effectiveArticleCoordinate, 
           currentArticleEventId,
           (highlight) => {
             // Deduplicate highlights by ID as they arrive
@@ -120,7 +138,7 @@ export const useBookmarksData = ({
     } finally {
       setHighlightsLoading(false)
     }
-  }, [relayPool, currentArticleCoordinate, currentArticleEventId, settings, eventStore, cachedArticleHighlights])
+  }, [relayPool, effectiveArticleCoordinate, currentArticleEventId, settings, eventStore, cachedArticleHighlights])
 
   const handleRefreshAll = useCallback(async () => {
     if (!relayPool || !activeAccount || isRefreshing) return
@@ -140,22 +158,29 @@ export const useBookmarksData = ({
 
   // Fetch article-specific highlights when viewing an article
   useEffect(() => {
-    if (!relayPool || !activeAccount) return
+    if (!relayPool || !activeAccount) {
+      setHighlightsLoading(false)
+      return
+    }
     // Fetch article-specific highlights when viewing an article
     // External URLs have their highlights fetched by useExternalUrlLoader
-    if (currentArticleCoordinate && !externalUrl) {
+    if (effectiveArticleCoordinate && !externalUrl) {
       handleFetchHighlights()
     } else if (!naddr && !externalUrl) {
       // Clear article highlights when not viewing an article
       setArticleHighlights([])
       setHighlightsLoading(false)
+    } else {
+      // For external URLs or other cases, loading is not needed
+      setHighlightsLoading(false)
     }
-  }, [relayPool, activeAccount, currentArticleCoordinate, naddr, externalUrl, handleFetchHighlights])
+  }, [relayPool, activeAccount, effectiveArticleCoordinate, naddr, externalUrl, handleFetchHighlights])
 
-  // Merge highlights from controller with article-specific highlights
-  const highlights = [...myHighlights, ...articleHighlights]
-    .filter((h, i, arr) => arr.findIndex(x => x.id === h.id) === i) // Deduplicate
-    .sort((a, b) => b.created_at - a.created_at)
+  // When viewing an article, show only article-specific highlights
+  // Otherwise, show user's highlights from controller
+  const highlights = effectiveArticleCoordinate || externalUrl
+    ? articleHighlights.sort((a, b) => b.created_at - a.created_at)
+    : myHighlights
 
   return {
     highlights,

src/hooks/useDocumentTitle.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react'
+
+const DEFAULT_TITLE = 'Boris - Read, Highlight, Explore'
+
+interface UseDocumentTitleProps {
+  title?: string
+  fallback?: string
+}
+
+export function useDocumentTitle({ title, fallback }: UseDocumentTitleProps) {
+  const originalTitleRef = useRef<string>(document.title)
+
+  useEffect(() => {
+    // Store the original title on first mount
+    if (originalTitleRef.current === DEFAULT_TITLE) {
+      originalTitleRef.current = document.title
+    }
+
+    // Set the new title if provided, otherwise use fallback or default
+    const newTitle = title || fallback || DEFAULT_TITLE
+    document.title = newTitle
+
+    // Cleanup: restore original title when component unmounts
+    return () => {
+      document.title = originalTitleRef.current
+    }
+  }, [title, fallback])
+
+  // Return a function to manually reset to default
+  const resetTitle = () => {
+    document.title = DEFAULT_TITLE
+  }
+
+  return { resetTitle }
+}

src/hooks/useEventLoader.ts

@@ -0,0 +1,143 @@
+import { useEffect, useCallback, useState } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { ReadableContent } from '../services/readerService'
+import { eventManager } from '../services/eventManager'
+import { fetchProfiles } from '../services/profileService'
+import { useDocumentTitle } from './useDocumentTitle'
+import { getNpubFallbackDisplay } from '../utils/nostrUriResolver'
+import { extractProfileDisplayName } from '../utils/profileUtils'
+
+interface UseEventLoaderProps {
+  eventId?: string
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
+  setSelectedUrl: (url: string) => void
+  setReaderContent: (content: ReadableContent | undefined) => void
+  setReaderLoading: (loading: boolean) => void
+  setIsCollapsed: (collapsed: boolean) => void
+}
+
+export function useEventLoader({
+  eventId,
+  relayPool,
+  eventStore,
+  setSelectedUrl,
+  setReaderContent,
+  setReaderLoading,
+  setIsCollapsed
+}: UseEventLoaderProps) {
+  // Track the current event title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
+  const displayEvent = useCallback((event: NostrEvent) => {
+    // Escape HTML in content and convert newlines to breaks for plain text display
+    const escapedContent = event.content
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\n/g, '<br />')
+
+    // Initial title
+    let title = `Note (${event.kind})`
+    if (event.kind === 1) {
+      title = `Note by ${getNpubFallbackDisplay(event.pubkey)}`
+    }
+
+    // Emit immediately
+    const baseContent: ReadableContent = {
+      url: '',
+      html: `<div style="white-space: pre-wrap; word-break: break-word;">${escapedContent}</div>`,
+      title,
+      published: event.created_at
+    }
+    setCurrentTitle(title)
+    setReaderContent(baseContent)
+
+    // Background: resolve author profile for kind:1 and update title
+    if (event.kind === 1 && eventStore) {
+      (async () => {
+        try {
+          let resolved = ''
+
+          // First, try to get from event store cache
+          const storedProfile = eventStore.getEvent(event.pubkey + ':0')
+          if (storedProfile) {
+            const displayName = extractProfileDisplayName(storedProfile as NostrEvent)
+            if (displayName && !displayName.startsWith('@')) {
+              // Remove @ prefix if present (we'll add it when displaying)
+              resolved = displayName
+            } else if (displayName) {
+              resolved = displayName.substring(1) // Remove @ prefix
+            }
+          }
+
+          // If not found in event store, fetch from relays
+          if (!resolved && relayPool) {
+            const profiles = await fetchProfiles(relayPool, eventStore as unknown as IEventStore, [event.pubkey])
+            if (profiles && profiles.length > 0) {
+              const latest = profiles.sort((a, b) => (b.created_at || 0) - (a.created_at || 0))[0]
+              const displayName = extractProfileDisplayName(latest)
+              if (displayName && !displayName.startsWith('@')) {
+                resolved = displayName
+              } else if (displayName) {
+                resolved = displayName.substring(1) // Remove @ prefix
+              }
+            }
+          }
+          
+          if (resolved) {
+            const updatedTitle = `Note by @${resolved}`
+            setCurrentTitle(updatedTitle)
+            setReaderContent({ ...baseContent, title: updatedTitle })
+          }
+        } catch {
+          // ignore profile failures; keep fallback title
+        }
+      })()
+    }
+  }, [setReaderContent, relayPool, eventStore])
+
+  // Initialize event manager with services
+  useEffect(() => {
+    eventManager.setServices(eventStore || null, relayPool || null)
+  }, [eventStore, relayPool])
+
+  useEffect(() => {
+    if (!eventId) return
+
+    setReaderLoading(true)
+    setReaderContent(undefined)
+    setSelectedUrl(`nostr-event:${eventId}`) // sentinel: truthy selection, not treated as article
+    setIsCollapsed(false)
+
+    // Fetch using event manager (handles cache, deduplication, and retry)
+    let cancelled = false
+
+    eventManager.fetchEvent(eventId).then(
+      (event) => {
+        if (!cancelled) {
+          displayEvent(event)
+          setReaderLoading(false)
+        }
+      },
+      (err) => {
+        if (!cancelled) {
+          const errorContent: ReadableContent = {
+            url: '',
+            html: `<div style="padding: 1rem; color: var(--color-error, red);">Failed to load event: ${err instanceof Error ? err.message : 'Unknown error'}</div>`,
+            title: 'Error'
+          }
+          setCurrentTitle('Error')
+          setReaderContent(errorContent)
+          setReaderLoading(false)
+        }
+      }
+    )
+
+    return () => {
+      cancelled = true
+    }
+  }, [eventId, displayEvent, setReaderLoading, setSelectedUrl, setIsCollapsed, setReaderContent])
+}

src/hooks/useExternalUrlLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useRef, useMemo, useState } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IEventStore } from 'applesauce-core'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
@@ -7,6 +7,7 @@ import { Highlight } from '../types/highlights'
 import { useStoreTimeline } from './useStoreTimeline'
 import { eventToHighlight } from '../services/highlightEventProcessor'
 import { KINDS } from '../config/kinds'
+import { useDocumentTitle } from './useDocumentTitle'
 
 // Helper to extract filename from URL
 function getFilenameFromUrl(url: string): string {
@@ -48,6 +49,14 @@ export function useExternalUrlLoader({
   setCurrentArticleCoordinate,
   setCurrentArticleEventId
 }: UseExternalUrlLoaderProps) {
+  const mountedRef = useRef(true)
+  // Track in-flight request to prevent stale updates when switching quickly
+  const currentRequestIdRef = useRef(0)
+  
+  // Track the current content title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
+  
   // Load cached URL-specific highlights from event store
   const urlFilter = useMemo(() => {
     if (!url) return null
@@ -61,80 +70,120 @@ export function useExternalUrlLoader({
     [url]
   )
   
+  // Load content and start streaming highlights when URL changes
   useEffect(() => {
+    mountedRef.current = true
+    
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      const requestId = ++currentRequestIdRef.current
+      if (!mountedRef.current) return
+      
       setReaderLoading(true)
       setReaderContent(undefined)
       setSelectedUrl(url)
       setIsCollapsed(true)
-      // Clear article-specific state
       setCurrentArticleCoordinate(undefined)
       setCurrentArticleEventId(undefined)
       
       try {
         const content = await fetchReadableContent(url)
+        
+        if (!mountedRef.current) return
+        if (currentRequestIdRef.current !== requestId) return
+        
+        setCurrentTitle(content.title)
         setReaderContent(content)
-        
-        console.log('🌐 External URL loaded:', content.title)
-        
-        // Set reader loading to false immediately after content is ready
         setReaderLoading(false)
         
         // Fetch highlights for this URL asynchronously
         try {
+          if (!mountedRef.current) return
+          
           setHighlightsLoading(true)
           
           // Seed with cached highlights first
           if (cachedUrlHighlights.length > 0) {
-            setHighlights(cachedUrlHighlights.sort((a, b) => b.created_at - a.created_at))
+            setHighlights((prev) => {
+              const seen = new Set<string>(cachedUrlHighlights.map(h => h.id))
+              const localOnly = prev.filter(h => !seen.has(h.id))
+              const next = [...cachedUrlHighlights, ...localOnly]
+              return next.sort((a, b) => b.created_at - a.created_at)
+            })
           } else {
             setHighlights([])
           }
           
-          // Check if fetchHighlightsForUrl exists, otherwise skip
           if (typeof fetchHighlightsForUrl === 'function') {
             const seen = new Set<string>()
-            // Seed with cached IDs
             cachedUrlHighlights.forEach(h => seen.add(h.id))
             
             await fetchHighlightsForUrl(
               relayPool,
               url,
               (highlight) => {
+                if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
+                
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
                 setHighlights((prev) => {
                   if (prev.some(h => h.id === highlight.id)) return prev
-                  const next = [...prev, highlight]
+                  const next = [highlight, ...prev]
                   return next.sort((a, b) => b.created_at - a.created_at)
                 })
               },
-              undefined, // settings
-              false, // force
+              undefined,
+              false,
               eventStore || undefined
             )
           }
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
+            setHighlightsLoading(false)
+          }
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
-        // For videos and other media files, use the filename as the title
-        const filename = getFilenameFromUrl(url)
-        setReaderContent({
-          title: filename,
-          html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url
-        })
-        setReaderLoading(false)
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
+          const filename = getFilenameFromUrl(url)
+          setReaderContent({
+            title: filename,
+            html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url
+          })
+          setReaderLoading(false)
+        }
       }
     }
     
     loadExternalUrl()
-  }, [url, relayPool, eventStore, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, cachedUrlHighlights])
+    
+    return () => {
+      mountedRef.current = false
+    }
+    // Dependencies intentionally excluded to prevent re-renders when relay/eventStore state changes
+    // This fixes the loading skeleton appearing when going offline (flight mode)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    url,
+    cachedUrlHighlights
+  ])
+
+  // Keep UI highlights synced with cached store updates without reloading content
+  useEffect(() => {
+    if (!url) return
+    if (cachedUrlHighlights.length === 0) return
+    setHighlights((prev) => {
+      const seen = new Set<string>(prev.map(h => h.id))
+      const additions = cachedUrlHighlights.filter(h => !seen.has(h.id))
+      if (additions.length === 0) return prev
+      const next = [...additions, ...prev]
+      return next.sort((a, b) => b.created_at - a.created_at)
+    })
+  }, [cachedUrlHighlights, url, setHighlights])
 }
 

src/hooks/useFilteredHighlights.ts

@@ -3,6 +3,7 @@ import { Highlight } from '../types/highlights'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { normalizeUrl } from '../utils/urlHelpers'
 import { classifyHighlights } from '../utils/highlightClassification'
+import { nip19 } from 'nostr-tools'
 
 interface UseFilteredHighlightsParams {
   highlights: Highlight[]
@@ -24,8 +25,29 @@ export const useFilteredHighlights = ({
     
     let urlFiltered = highlights
     
-    // For Nostr articles, we already fetched highlights specifically for this article
-    if (!selectedUrl.startsWith('nostr:')) {
+    // Filter highlights based on URL type
+    if (selectedUrl.startsWith('nostr:')) {
+      // For Nostr articles, extract the article coordinate and filter by eventReference
+      try {
+        const decoded = nip19.decode(selectedUrl.replace('nostr:', ''))
+        if (decoded.type === 'naddr') {
+          const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+          const articleCoordinate = `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+          
+          urlFiltered = highlights.filter(h => {
+            // Keep highlights that match this article coordinate
+            return h.eventReference === articleCoordinate
+          })
+        } else {
+          // Not a valid naddr, clear all highlights
+          urlFiltered = []
+        }
+      } catch {
+        // Invalid naddr, clear all highlights
+        urlFiltered = []
+      }
+    } else {
+      // For web URLs, filter by URL matching
       const normalizedSelected = normalizeUrl(selectedUrl)
       
       urlFiltered = highlights.filter(h => {

src/hooks/useHighlightCreation.ts

@@ -44,6 +44,7 @@ export const useHighlightCreation = ({
   }, [])
 
   const handleCreateHighlight = useCallback(async (text: string) => {
+
     if (!activeAccount || !relayPool || !eventStore) {
       console.error('Missing requirements for highlight creation')
       return
@@ -60,8 +61,6 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      console.log('🎯 Creating highlight...', { text: text.substring(0, 50) + '...' })
-      
       const newHighlight = await createHighlight(
         text,
         source,
@@ -73,13 +72,7 @@ export const useHighlightCreation = ({
         settings
       )
       
-      console.log('✅ Highlight created successfully!', {
-        id: newHighlight.id,
-        isLocalOnly: newHighlight.isLocalOnly,
-        isOfflineCreated: newHighlight.isOfflineCreated,
-        publishedRelays: newHighlight.publishedRelays
-      })
-      
+      // Highlight created successfully
       // Clear the browser's text selection immediately to allow DOM update
       const selection = window.getSelection()
       if (selection) {

src/hooks/useHighlightInteractions.ts

@@ -93,26 +93,37 @@ export const useHighlightInteractions = ({
     return () => clearTimeout(timeoutId)
   }, [selectedHighlightId, contentVersion])
 
-  // Handle text selection (works for both mouse and touch)
-  const handleSelectionEnd = useCallback(() => {
-    setTimeout(() => {
-      const selection = window.getSelection()
-      if (!selection || selection.rangeCount === 0) {
-        onClearSelection?.()
-        return
-      }
+  // Shared function to check and handle text selection
+  const checkSelection = useCallback(() => {
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0) {
+      onClearSelection?.()
+      return
+    }
 
-      const range = selection.getRangeAt(0)
-      const text = selection.toString().trim()
+    const range = selection.getRangeAt(0)
+    const text = selection.toString().trim()
 
-      if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
-        onTextSelection?.(text)
-      } else {
-        onClearSelection?.()
-      }
-    }, 10)
+    if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
+      onTextSelection?.(text)
+    } else {
+      onClearSelection?.()
+    }
   }, [onTextSelection, onClearSelection])
 
-  return { contentRef, handleSelectionEnd }
+  // Listen to selectionchange events for immediate detection (works reliably on mobile)
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      // Use requestAnimationFrame to ensure selection is checked after browser updates
+      requestAnimationFrame(checkSelection)
+    }
+
+    document.addEventListener('selectionchange', handleSelectionChange)
+    return () => {
+      document.removeEventListener('selectionchange', handleSelectionChange)
+    }
+  }, [checkSelection])
+
+  return { contentRef }
 }
 

src/hooks/useHighlightedContent.ts

@@ -32,14 +32,7 @@ export const useHighlightedContent = ({
 }: UseHighlightedContentParams) => {
   // Filter highlights by URL and visibility settings
   const relevantHighlights = useMemo(() => {
-    console.log('🔍 ContentPanel: Processing highlights', {
-      totalHighlights: highlights.length,
-      selectedUrl,
-      showHighlights
-    })
-    
     const urlFiltered = filterHighlightsByUrl(highlights, selectedUrl)
-    console.log('📌 URL filtered highlights:', urlFiltered.length)
     
     // Apply visibility filtering
     const classified = classifyHighlights(urlFiltered, currentUserPubkey, followedPubkeys)
@@ -49,37 +42,25 @@ export const useHighlightedContent = ({
       return highlightVisibility.nostrverse
     })
       
-    console.log('✅ Relevant highlights after filtering:', filtered.length, filtered.map(h => h.content.substring(0, 30)))
     return filtered
-  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys, showHighlights])
+  }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys])
 
   // Prepare the final HTML with highlights applied
   const finalHtml = useMemo(() => {
     const sourceHtml = markdown ? renderedMarkdownHtml : html
     
-    console.log('🎨 Preparing final HTML:', {
-      hasMarkdown: !!markdown,
-      hasHtml: !!html,
-      renderedHtmlLength: renderedMarkdownHtml.length,
-      sourceHtmlLength: sourceHtml?.length || 0,
-      showHighlights,
-      relevantHighlightsCount: relevantHighlights.length
-    })
-    
+    // Prepare final HTML
     if (!sourceHtml) {
-      console.warn('⚠️ No source HTML available')
       return ''
     }
     
     if (showHighlights && relevantHighlights.length > 0) {
-      console.log('✨ Applying', relevantHighlights.length, 'highlights to HTML')
       const highlightedHtml = applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle)
-      console.log('✅ Highlights applied, result length:', highlightedHtml.length)
       return highlightedHtml
     }
     
-    console.log('📄 Returning source HTML without highlights')
     return sourceHtml
+
   }, [html, renderedMarkdownHtml, markdown, relevantHighlights, showHighlights, highlightStyle])
 
   return { finalHtml, relevantHighlights }

src/hooks/useImageCache.ts

@@ -10,6 +10,8 @@ export function useImageCache(
   imageUrl: string | undefined
 ): string | undefined {
   // Service Worker handles everything - just return the URL as-is
+  // The Service Worker will intercept fetch requests and cache them
+  // Make sure images use standard <img src> tags for SW interception
   return imageUrl
 }
 
@@ -26,3 +28,26 @@ export function useCacheImageOnLoad(
   void imageUrl
 }
 
+/**
+ * Preload an image URL to ensure it's cached by the Service Worker
+ * This is useful when loading content from cache - we want to ensure
+ * images are cached before going offline
+ */
+export function preloadImage(imageUrl: string | undefined): void {
+  if (!imageUrl) {
+    return
+  }
+  
+  // Create a link element with rel=prefetch or use Image object to trigger fetch
+  // Service Worker will intercept and cache the request
+  const img = new Image()
+  img.src = imageUrl
+  
+  // Also try using fetch to explicitly trigger Service Worker
+  // This ensures the image is cached even if <img> tag hasn't rendered yet
+  fetch(imageUrl, { mode: 'no-cors' }).catch(() => {
+    // Ignore errors - image might not be CORS-enabled, but SW will still cache it
+    // The Image() approach above will work for most cases
+  })
+}
+

src/hooks/useMarkdownToHTML.ts

@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { RelayPool } from 'applesauce-relay'
-import { extractNaddrUris, replaceNostrUrisInMarkdown, replaceNostrUrisInMarkdownWithTitles } from '../utils/nostrUriResolver'
+import { extractNaddrUris, replaceNostrUrisInMarkdownWithProfileLabels, addLoadingClassToProfileLinks } from '../utils/nostrUriResolver'
 import { fetchArticleTitles } from '../services/articleTitleResolver'
+import { useProfileLabels } from './useProfileLabels'
 
 /**
  * Hook to convert markdown to HTML using a hidden ReactMarkdown component
@@ -18,59 +19,129 @@ export const useMarkdownToHTML = (
   const previewRef = useRef<HTMLDivElement>(null)
   const [renderedHtml, setRenderedHtml] = useState<string>('')
   const [processedMarkdown, setProcessedMarkdown] = useState<string>('')
+  const [articleTitles, setArticleTitles] = useState<Map<string, string>>(new Map())
 
+  // Resolve profile labels progressively as profiles load
+  const { labels: profileLabels, loading: profileLoading } = useProfileLabels(markdown || '', relayPool)
+  
+  // Create stable dependencies based on Map contents, not Map objects
+  // This prevents unnecessary reprocessing when Maps are recreated with same content
+  const profileLabelsKey = useMemo(() => {
+    const key = Array.from(profileLabels.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}:${v}`).join('|')
+    return key
+  }, [profileLabels])
+  
+  const profileLoadingKey = useMemo(() => {
+    return Array.from(profileLoading.entries())
+      .filter(([, loading]) => loading)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([k]) => k)
+      .join('|')
+  }, [profileLoading])
+  
+  const articleTitlesKey = useMemo(() => {
+    return Array.from(articleTitles.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}:${v}`).join('|')
+  }, [articleTitles])
+  
+  // Keep refs to latest Maps for processing without causing re-renders
+  const profileLabelsRef = useRef(profileLabels)
+  const profileLoadingRef = useRef(profileLoading)
+  const articleTitlesRef = useRef(articleTitles)
+  
+  // Ref to track second RAF ID for HTML extraction cleanup
+  const htmlExtractionRafIdRef = useRef<number | null>(null)
+  
   useEffect(() => {
-    if (!markdown) {
-      setRenderedHtml('')
-      setProcessedMarkdown('')
+    profileLabelsRef.current = profileLabels
+    profileLoadingRef.current = profileLoading
+    articleTitlesRef.current = articleTitles
+  }, [profileLabels, profileLoading, articleTitles])
+
+  // Fetch article titles
+  useEffect(() => {
+    if (!markdown || !relayPool) {
+      setArticleTitles(new Map())
       return
     }
 
     let isCancelled = false
 
-    const processMarkdown = async () => {
-      // Extract all naddr references
+    const fetchTitles = async () => {
       const naddrs = extractNaddrUris(markdown)
-      
-      let processed: string
-      
-      if (naddrs.length > 0 && relayPool) {
-        // Fetch article titles for all naddrs
-        try {
-          const articleTitles = await fetchArticleTitles(relayPool, naddrs)
-          
-          if (isCancelled) return
-          
-          // Replace nostr URIs with resolved titles
-          processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
-          console.log(`📚 Resolved ${articleTitles.size} article titles`)
-        } catch (error) {
-          console.warn('Failed to fetch article titles:', error)
-          // Fall back to basic replacement
-          processed = replaceNostrUrisInMarkdown(markdown)
-        }
-      } else {
-        // No articles to resolve, use basic replacement
-        processed = replaceNostrUrisInMarkdown(markdown)
+      if (naddrs.length === 0) {
+        setArticleTitles(new Map())
+        return
       }
-      
-      if (isCancelled) return
-      
-      setProcessedMarkdown(processed)
 
-      console.log('📝 Converting markdown to HTML...')
-      
-      const rafId = requestAnimationFrame(() => {
-        if (previewRef.current && !isCancelled) {
-          const html = previewRef.current.innerHTML
-          console.log('✅ Markdown converted to HTML:', html.length, 'chars')
-          setRenderedHtml(html)
-        } else if (!isCancelled) {
-          console.warn('⚠️ markdownPreviewRef.current is null')
+      try {
+        const titlesMap = await fetchArticleTitles(relayPool!, naddrs)
+        if (!isCancelled) {
+          setArticleTitles(titlesMap)
         }
-      })
+      } catch {
+        if (!isCancelled) setArticleTitles(new Map())
+      }
+    }
 
-      return () => cancelAnimationFrame(rafId)
+    fetchTitles()
+    return () => { isCancelled = true }
+  }, [markdown, relayPool])
+
+  // Track previous markdown and processed state to detect actual content changes
+  const previousMarkdownRef = useRef<string | undefined>(markdown)
+  const processedMarkdownRef = useRef<string>(processedMarkdown)
+  
+  useEffect(() => {
+    processedMarkdownRef.current = processedMarkdown
+  }, [processedMarkdown])
+  
+  // Process markdown with progressive profile labels and article titles
+  // Use stable string keys instead of Map objects to prevent excessive reprocessing
+  useEffect(() => {
+    if (!markdown) {
+      setRenderedHtml('')
+      setProcessedMarkdown('')
+      previousMarkdownRef.current = markdown
+      processedMarkdownRef.current = ''
+      return
+    }
+
+    let isCancelled = false
+
+    const processMarkdown = () => {
+      try {
+        // Replace nostr URIs with profile labels (progressive) and article titles
+        // Use refs to get latest values without causing dependency changes
+        const processed = replaceNostrUrisInMarkdownWithProfileLabels(
+          markdown,
+          profileLabelsRef.current,
+          articleTitlesRef.current,
+          profileLoadingRef.current
+        )
+        
+        if (isCancelled) return
+        
+        setProcessedMarkdown(processed)
+        processedMarkdownRef.current = processed
+        // HTML extraction will happen in separate useEffect that watches processedMarkdown
+      } catch (error) {
+        console.error(`[markdown-to-html] Error processing markdown:`, error)
+        if (!isCancelled) {
+          setProcessedMarkdown(markdown) // Fallback to original
+          processedMarkdownRef.current = markdown
+        }
+      }
+    }
+
+    // Only clear previous content if this is the first processing or markdown changed
+    // For profile updates, just reprocess without clearing to avoid flicker
+    const isMarkdownChange = previousMarkdownRef.current !== markdown
+    previousMarkdownRef.current = markdown
+    
+    if (isMarkdownChange || !processedMarkdownRef.current) {
+      setRenderedHtml('')
+      setProcessedMarkdown('')
+      processedMarkdownRef.current = ''
     }
 
     processMarkdown()
@@ -78,7 +149,44 @@ export const useMarkdownToHTML = (
     return () => {
       isCancelled = true
     }
-  }, [markdown, relayPool])
+  }, [markdown, profileLabelsKey, profileLoadingKey, articleTitlesKey])
+
+  // Extract HTML after processedMarkdown renders
+  // This useEffect watches processedMarkdown and extracts HTML once ReactMarkdown has rendered it
+  useEffect(() => {
+    if (!processedMarkdown || !markdown) {
+      return
+    }
+
+    let isCancelled = false
+    
+    // Use double RAF to ensure ReactMarkdown has finished rendering:
+    // First RAF: let React complete its render cycle
+    // Second RAF: extract HTML after DOM has updated
+    const rafId1 = requestAnimationFrame(() => {
+      htmlExtractionRafIdRef.current = requestAnimationFrame(() => {
+        if (previewRef.current && !isCancelled) {
+          let html = previewRef.current.innerHTML
+          
+          // Post-process HTML to add loading class to profile links
+          html = addLoadingClassToProfileLinks(html, profileLoadingRef.current)
+          
+          setRenderedHtml(html)
+        } else if (!isCancelled && processedMarkdown) {
+          console.warn('⚠️ markdownPreviewRef.current is null but processedMarkdown exists')
+        }
+      })
+    })
+
+    return () => {
+      isCancelled = true
+      cancelAnimationFrame(rafId1)
+      if (htmlExtractionRafIdRef.current !== null) {
+        cancelAnimationFrame(htmlExtractionRafIdRef.current)
+        htmlExtractionRafIdRef.current = null
+      }
+    }
+  }, [processedMarkdown, markdown])
 
   return { renderedHtml, previewRef, processedMarkdown }
 }

src/hooks/useMountedState.ts

@@ -0,0 +1,28 @@
+import { useRef, useEffect, useCallback } from 'react'
+
+/**
+ * Hook to track if component is mounted and prevent state updates after unmount.
+ * Returns a function to check if still mounted.
+ * 
+ * @example
+ * const isMounted = useMountedState()
+ * 
+ * async function loadData() {
+ *   const data = await fetch(...)
+ *   if (isMounted()) {
+ *     setState(data)
+ *   }
+ * }
+ */
+export function useMountedState(): () => boolean {
+  const mountedRef = useRef(true)
+  
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+  
+  return useCallback(() => mountedRef.current, [])
+}
+

src/hooks/useOfflineSync.ts

@@ -50,16 +50,10 @@ export function useOfflineSync({
     const isNowOnline = hasRemoteRelays
 
     if (wasLocalOnly && isNowOnline) {
-      console.log('✈️ Detected transition: Flight Mode → Online')
-      console.log('📊 Relay state:', {
-        connectedRelays: connectedRelays.length,
-        remoteRelays: connectedRelays.filter(r => !isLocalRelay(r.url)).length,
-        localRelays: connectedRelays.filter(r => isLocalRelay(r.url)).length
-      })
+      // Coming back online, sync events
       
       // Wait a moment for relays to fully establish connections
       setTimeout(() => {
-        console.log('🚀 Starting sync after delay...')
         syncLocalEventsToRemote(relayPool, eventStore)
       }, 2000)
     }

src/hooks/useOnlineStatus.ts

@@ -5,12 +5,10 @@ export function useOnlineStatus() {
 
   useEffect(() => {
     const handleOnline = () => {
-      console.log('🌐 Back online')
       setIsOnline(true)
     }
 
     const handleOffline = () => {
-      console.log('📴 Gone offline')
       setIsOnline(false)
     }
 

src/hooks/usePWAInstall.ts

@@ -51,12 +51,10 @@ export function usePWAInstall() {
       const choiceResult = await deferredPrompt.userChoice
       
       if (choiceResult.outcome === 'accepted') {
-        console.log('✅ PWA installed')
         setIsInstallable(false)
         setDeferredPrompt(null)
         return true
       } else {
-        console.log('❌ PWA installation dismissed')
         return false
       }
     } catch (error) {

src/hooks/useProfileLabels.ts

@@ -0,0 +1,324 @@
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
+import { Hooks } from 'applesauce-react'
+import { Helpers, IEventStore } from 'applesauce-core'
+import { getContentPointers } from 'applesauce-factory/helpers'
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { fetchProfiles, loadCachedProfiles } from '../services/profileService'
+import { getNpubFallbackDisplay } from '../utils/nostrUriResolver'
+import { extractProfileDisplayName } from '../utils/profileUtils'
+
+const { getPubkeyFromDecodeResult, encodeDecodeResult } = Helpers
+
+/**
+ * Hook to resolve profile labels from content containing npub/nprofile identifiers
+ * Returns an object with labels Map and loading Map that updates progressively as profiles load
+ */
+export function useProfileLabels(
+  content: string, 
+  relayPool?: RelayPool | null
+): { labels: Map<string, string>; loading: Map<string, boolean> } {
+  const eventStore = Hooks.useEventStore()
+  
+  // Extract profile pointers (npub and nprofile) using applesauce helpers
+  const profileData = useMemo(() => {
+      try {
+        const pointers = getContentPointers(content)
+        const filtered = pointers.filter(p => p.type === 'npub' || p.type === 'nprofile')
+      const result: Array<{ pubkey: string; encoded: string }> = []
+      filtered.forEach(pointer => {
+        try {
+          const pubkey = getPubkeyFromDecodeResult(pointer)
+          const encoded = encodeDecodeResult(pointer)
+          if (pubkey && encoded) {
+            result.push({ pubkey, encoded: encoded as string })
+          }
+        } catch {
+          // Ignore errors, continue processing other pointers
+        }
+      })
+      return result
+    } catch (error) {
+      console.warn(`[profile-labels] Error extracting profile pointers:`, error)
+      return []
+    }
+  }, [content])
+
+  // Initialize labels synchronously from cache on first render to avoid delay
+  // Use pubkey (hex) as the key instead of encoded string for canonical identification
+  const initialLabels = useMemo(() => {
+    if (profileData.length === 0) {
+      return new Map<string, string>()
+    }
+    
+    const allPubkeys = profileData.map(({ pubkey }) => pubkey)
+    const cachedProfiles = loadCachedProfiles(allPubkeys)
+    const labels = new Map<string, string>()
+    
+    profileData.forEach(({ pubkey }) => {
+      const cachedProfile = cachedProfiles.get(pubkey)
+      if (cachedProfile) {
+        const displayName = extractProfileDisplayName(cachedProfile)
+        if (displayName) {
+          // Add @ prefix (extractProfileDisplayName returns name without @)
+          const label = `@${displayName}`
+          labels.set(pubkey, label)
+        } else {
+          // Use fallback npub display if profile has no name (add @ prefix)
+          const fallback = getNpubFallbackDisplay(pubkey)
+          labels.set(pubkey, `@${fallback}`)
+        }
+      }
+    })
+    
+    return labels
+  }, [profileData])
+
+  const [profileLabels, setProfileLabels] = useState<Map<string, string>>(initialLabels)
+  const [profileLoading, setProfileLoading] = useState<Map<string, boolean>>(new Map())
+  
+  // Batching strategy: Collect profile updates and apply them in batches via RAF to prevent UI flicker
+  // when many profiles resolve simultaneously. We use refs to avoid stale closures in async callbacks.
+  // Use pubkey (hex) as the key for canonical identification
+  const pendingUpdatesRef = useRef<Map<string, string>>(new Map())
+  const rafScheduledRef = useRef<number | null>(null)
+  
+  /**
+   * Helper to apply pending batched updates to state
+   * Cancels any scheduled RAF and applies updates synchronously
+   */
+  const applyPendingUpdates = () => {
+    const pendingUpdates = pendingUpdatesRef.current
+    if (pendingUpdates.size === 0) {
+      return
+    }
+    
+    // Cancel scheduled RAF since we're applying synchronously
+    if (rafScheduledRef.current !== null) {
+      cancelAnimationFrame(rafScheduledRef.current)
+      rafScheduledRef.current = null
+    }
+    
+    // Apply all pending updates in one batch
+    setProfileLabels(prevLabels => {
+      const updatedLabels = new Map(prevLabels)
+      for (const [pubkey, label] of pendingUpdates.entries()) {
+        updatedLabels.set(pubkey, label)
+      }
+      pendingUpdates.clear()
+      return updatedLabels
+    })
+  }
+  
+  /**
+   * Helper to schedule a batched update via RAF (if not already scheduled)
+   * This prevents multiple RAF calls when many profiles resolve at once
+   * Wrapped in useCallback for stable reference in dependency arrays
+   */
+  const scheduleBatchedUpdate = useCallback(() => {
+    if (rafScheduledRef.current === null) {
+      rafScheduledRef.current = requestAnimationFrame(() => {
+        applyPendingUpdates()
+        rafScheduledRef.current = null
+      })
+    }
+  }, []) // Empty deps: only uses refs which are stable
+  
+    // Sync state when initialLabels changes (e.g., when content changes)
+  // This ensures we start with the correct cached labels even if profiles haven't loaded yet
+  useEffect(() => {
+    // Use a functional update to access current state without including it in dependencies
+    setProfileLabels(prevLabels => {
+      const currentPubkeys = new Set(Array.from(prevLabels.keys()))
+      const newPubkeys = new Set(profileData.map(p => p.pubkey))
+      
+      // If the content changed significantly (different set of profiles), reset state
+      const hasDifferentProfiles = 
+        currentPubkeys.size !== newPubkeys.size ||
+        !Array.from(newPubkeys).every(pk => currentPubkeys.has(pk))
+      
+      if (hasDifferentProfiles) {
+        // Clear pending updates and cancel RAF for old profiles
+        pendingUpdatesRef.current.clear()
+        if (rafScheduledRef.current !== null) {
+          cancelAnimationFrame(rafScheduledRef.current)
+          rafScheduledRef.current = null
+        }
+        // Reset to initial labels
+        return new Map(initialLabels)
+      } else {
+        // Same profiles, merge initial labels with existing state
+        // IMPORTANT: Preserve existing labels (from pending updates) and only add initial labels if missing
+        const merged = new Map(prevLabels)
+        for (const [pubkey, label] of initialLabels.entries()) {
+          // Only add initial label if we don't already have a label for this pubkey
+          // This preserves labels that were added via applyPendingUpdates
+          if (!merged.has(pubkey)) {
+            merged.set(pubkey, label)
+          }
+        }
+        return merged
+      }
+    })
+    
+    // Reset loading state when content changes significantly
+    setProfileLoading(prevLoading => {
+      const currentPubkeys = new Set(Array.from(prevLoading.keys()))
+      const newPubkeys = new Set(profileData.map(p => p.pubkey))
+      
+      const hasDifferentProfiles = 
+        currentPubkeys.size !== newPubkeys.size ||
+        !Array.from(newPubkeys).every(pk => currentPubkeys.has(pk))
+      
+      if (hasDifferentProfiles) {
+        return new Map()
+      }
+      return prevLoading
+    })
+  }, [initialLabels, profileData])
+
+  // Build initial labels: localStorage cache -> eventStore -> fetch from relays
+  useEffect(() => {
+    // Extract all pubkeys
+    const allPubkeys = profileData.map(({ pubkey }) => pubkey)
+    
+    if (allPubkeys.length === 0) {
+      setProfileLabels(new Map())
+      setProfileLoading(new Map())
+      // Clear pending updates and cancel RAF when clearing labels
+      pendingUpdatesRef.current.clear()
+      if (rafScheduledRef.current !== null) {
+        cancelAnimationFrame(rafScheduledRef.current)
+        rafScheduledRef.current = null
+      }
+      return
+    }
+    
+    // Add cached profiles to EventStore for consistency
+    const cachedProfiles = loadCachedProfiles(allPubkeys)
+    if (eventStore) {
+      for (const profile of cachedProfiles.values()) {
+        eventStore.add(profile)
+      }
+    }
+    
+    // Build labels from localStorage cache and eventStore
+    // initialLabels already has all cached profiles, so we only need to check eventStore
+    // Use pubkey (hex) as the key for canonical identification
+    const labels = new Map<string, string>(initialLabels)
+    const loading = new Map<string, boolean>()
+    
+    const pubkeysToFetch: string[] = []
+    
+    profileData.forEach(({ pubkey }) => {
+      // Skip if already resolved from initial cache
+      if (labels.has(pubkey)) {
+        loading.set(pubkey, false)
+        return
+      }
+      
+      // Check EventStore for profiles that weren't in cache
+      const eventStoreProfile = eventStore?.getEvent(pubkey + ':0')
+      
+      if (eventStoreProfile && eventStore) {
+        // Extract display name using centralized utility
+        const displayName = extractProfileDisplayName(eventStoreProfile as NostrEvent)
+        if (displayName) {
+          // Add @ prefix (extractProfileDisplayName returns name without @)
+          const label = `@${displayName}`
+          labels.set(pubkey, label)
+        } else {
+          // Use fallback npub display if profile has no name (add @ prefix)
+          const fallback = getNpubFallbackDisplay(pubkey)
+          labels.set(pubkey, `@${fallback}`)
+        }
+        loading.set(pubkey, false)
+      } else {
+      // No profile found yet, will use fallback after fetch or keep empty
+      // We'll set fallback labels for missing profiles at the end
+      // Mark as loading since we'll fetch it
+      pubkeysToFetch.push(pubkey)
+      loading.set(pubkey, true)
+      }
+    })
+    
+    // Don't set fallback labels in the Map - we'll use fallback directly when rendering
+    // This allows us to distinguish between "no label yet" (use fallback) vs "resolved label" (use Map value)
+    
+    setProfileLabels(new Map(labels))
+    setProfileLoading(new Map(loading))
+    
+    // Fetch missing profiles asynchronously with reactive updates
+    if (pubkeysToFetch.length > 0 && relayPool && eventStore) {
+      
+      // Reactive callback: collects profile updates and batches them via RAF to prevent flicker
+      // Strategy: Apply label immediately when profile resolves, but still batch for multiple profiles
+      const handleProfileEvent = (event: NostrEvent) => {
+        // Use pubkey directly as the key
+        const pubkey = event.pubkey
+        
+        // Determine the label for this profile using centralized utility
+        // Add @ prefix (both extractProfileDisplayName and getNpubFallbackDisplay return names without @)
+        const displayName = extractProfileDisplayName(event)
+        const label = displayName ? `@${displayName}` : `@${getNpubFallbackDisplay(pubkey)}`
+        
+        // Apply label immediately to prevent race condition with loading state
+        // This ensures labels are available when isLoading becomes false
+        setProfileLabels(prevLabels => {
+          const updated = new Map(prevLabels)
+          updated.set(pubkey, label)
+          return updated
+        })
+        
+        // Clear loading state for this profile when it resolves
+        setProfileLoading(prevLoading => {
+          const updated = new Map(prevLoading)
+          updated.set(pubkey, false)
+          return updated
+        })
+      }
+      
+      fetchProfiles(relayPool, eventStore as unknown as IEventStore, pubkeysToFetch, undefined, handleProfileEvent)
+        .then(() => {
+          // After EOSE: apply any remaining pending updates immediately
+          // This ensures all profile updates are applied even if RAF hasn't fired yet
+          applyPendingUpdates()
+          
+          // Clear loading state for all fetched profiles
+          setProfileLoading(prevLoading => {
+            const updated = new Map(prevLoading)
+            pubkeysToFetch.forEach(pubkey => {
+              updated.set(pubkey, false)
+            })
+            return updated
+          })
+        })
+        .catch((error) => {
+          console.error(`[profile-labels] Error fetching profiles:`, error)
+          // Silently handle fetch errors, but still clear any pending updates
+          pendingUpdatesRef.current.clear()
+          if (rafScheduledRef.current !== null) {
+            cancelAnimationFrame(rafScheduledRef.current)
+            rafScheduledRef.current = null
+          }
+          
+          // Clear loading state on error (show fallback)
+          setProfileLoading(prevLoading => {
+            const updated = new Map(prevLoading)
+            pubkeysToFetch.forEach(pubkey => {
+              updated.set(pubkey, false)
+            })
+            return updated
+          })
+        })
+      
+      // Cleanup: apply any pending updates before unmount to avoid losing them
+      return () => {
+        applyPendingUpdates()
+      }
+    }
+  }, [profileData, eventStore, relayPool, initialLabels, scheduleBatchedUpdate])
+  
+  return { labels: profileLabels, loading: profileLoading }
+}
+

src/hooks/useReadingPosition.ts

@@ -4,69 +4,82 @@ interface UseReadingPositionOptions {
   enabled?: boolean
   onPositionChange?: (position: number) => void
   onReadingComplete?: () => void
-  readingCompleteThreshold?: number // Default 0.9 (90%)
+  readingCompleteThreshold?: number // Default 0.95 (95%) - matches filter threshold
   syncEnabled?: boolean // Whether to sync positions to Nostr
   onSave?: (position: number) => void // Callback for saving position
-  autoSaveInterval?: number // Auto-save interval in ms (default 5000)
+  completionHoldMs?: number // How long to hold at 100% before firing complete (default 2000)
 }
 
 export const useReadingPosition = ({
   enabled = true,
   onPositionChange,
   onReadingComplete,
-  readingCompleteThreshold = 0.9,
+  readingCompleteThreshold = 0.95, // Match filter threshold for consistency
   syncEnabled = false,
   onSave,
-  autoSaveInterval = 5000
+  completionHoldMs = 2000
 }: UseReadingPositionOptions = {}) => {
   const [position, setPosition] = useState(0)
+  const positionRef = useRef(0)
   const [isReadingComplete, setIsReadingComplete] = useState(false)
   const hasTriggeredComplete = useRef(false)
-  const lastSavedPosition = useRef(0)
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const completionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const suppressUntilRef = useRef<number>(0)
+  const pendingPositionRef = useRef<number>(0) // Track latest position for throttled save
+  const lastSaved100Ref = useRef(false) // Track if we've saved 100% to avoid duplicate saves
+  
+  // Store callbacks in refs to avoid them being dependencies
+  const onPositionChangeRef = useRef(onPositionChange)
+  const onReadingCompleteRef = useRef(onReadingComplete)
+  const onSaveRef = useRef(onSave)
+  
+  useEffect(() => {
+    onPositionChangeRef.current = onPositionChange
+    onReadingCompleteRef.current = onReadingComplete
+    onSaveRef.current = onSave
+  }, [onPositionChange, onReadingComplete, onSave])
 
-  // Debounced save function
+  // Suppress auto-saves for a given duration (used after programmatic restore)
+  const suppressSavesFor = useCallback((ms: number) => {
+    const until = Date.now() + ms
+    suppressUntilRef.current = until
+  }, [])
+
+  // Throttled save function - saves at 1s intervals during scrolling
   const scheduleSave = useCallback((currentPosition: number) => {
-    if (!syncEnabled || !onSave) return
-    
-    // Don't save if position is too low (< 5%)
-    if (currentPosition < 0.05) return
-    
-    // Don't save if position hasn't changed significantly (less than 1%)
-    // But always save if we've reached 100% (completion)
-    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= 0.01
-    const hasReachedCompletion = currentPosition === 1 && lastSavedPosition.current < 1
-    
-    if (!hasSignificantChange && !hasReachedCompletion) return
-
-    // Clear existing timer
-    if (saveTimerRef.current) {
-      clearTimeout(saveTimerRef.current)
+    if (!syncEnabled || !onSaveRef.current) {
+      return
     }
 
-    // Schedule new save
+    // Always save instantly when we reach completion (1.0)
+    if (currentPosition === 1 && !lastSaved100Ref.current) {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+        saveTimerRef.current = null
+      }
+      lastSaved100Ref.current = true
+      onSaveRef.current(1)
+      return
+    }
+
+    // Always update the pending position (latest position to save)
+    pendingPositionRef.current = currentPosition
+
+    // Throttle: only schedule a save if one isn't already pending
+    // This ensures saves happen at regular 1s intervals during continuous scrolling
+    if (saveTimerRef.current) {
+      return // Already have a save scheduled, don't reset the timer
+    }
+
+    const THROTTLE_MS = 1000
     saveTimerRef.current = setTimeout(() => {
-      lastSavedPosition.current = currentPosition
-      onSave(currentPosition)
-    }, autoSaveInterval)
-  }, [syncEnabled, onSave, autoSaveInterval])
-
-  // Immediate save function
-  const saveNow = useCallback(() => {
-    if (!syncEnabled || !onSave) return
-    
-    // Cancel any pending saves
-    if (saveTimerRef.current) {
-      clearTimeout(saveTimerRef.current)
+      // Save the latest position, not the one from when timer was scheduled
+      const positionToSave = pendingPositionRef.current
+      onSaveRef.current?.(positionToSave)
       saveTimerRef.current = null
-    }
-
-    // Save if position is meaningful (>= 5%)
-    if (position >= 0.05) {
-      lastSavedPosition.current = position
-      onSave(position)
-    }
-  }, [syncEnabled, onSave, position])
+    }, THROTTLE_MS)
+  }, [syncEnabled])
 
   useEffect(() => {
     if (!enabled) return
@@ -80,26 +93,55 @@ export const useReadingPosition = ({
       const windowHeight = window.innerHeight
       const documentHeight = document.documentElement.scrollHeight
       
+      // Ignore if document is too small (likely during page transition)
+      if (documentHeight < 100) return
+      
       // Calculate position based on how much of the content has been scrolled through
-      // Add a small threshold (5px) to account for rounding and make it easier to reach 100%
       const maxScroll = documentHeight - windowHeight
       const scrollProgress = maxScroll > 0 ? scrollTop / maxScroll : 0
       
-      // If we're within 5px of the bottom, consider it 100%
-      const isAtBottom = scrollTop + windowHeight >= documentHeight - 5
+      // Only consider it 100% if we're truly at the bottom AND have scrolled significantly
+      // This prevents false 100% during page transitions
+      const isAtBottom = scrollTop + windowHeight >= documentHeight - 5 && scrollTop > 100
       const clampedProgress = isAtBottom ? 1 : Math.max(0, Math.min(1, scrollProgress))
       
       setPosition(clampedProgress)
-      onPositionChange?.(clampedProgress)
+      positionRef.current = clampedProgress
+      onPositionChangeRef.current?.(clampedProgress)
 
-      // Schedule auto-save if sync is enabled
-      scheduleSave(clampedProgress)
+      // Schedule auto-save if sync is enabled (unless suppressed)
+      if (Date.now() >= suppressUntilRef.current) {
+        scheduleSave(clampedProgress)
+      }
+      // Note: Suppression is silent to avoid log spam during scrolling
 
-      // Check if reading is complete
-      if (clampedProgress >= readingCompleteThreshold && !hasTriggeredComplete.current) {
-        setIsReadingComplete(true)
-        hasTriggeredComplete.current = true
-        onReadingComplete?.()
+      // Completion detection with 2s hold at 100%
+      if (!hasTriggeredComplete.current) {
+        // If at exact 100%, start a hold timer; cancel if we scroll up
+        if (clampedProgress === 1) {
+          if (!completionTimerRef.current) {
+            completionTimerRef.current = setTimeout(() => {
+              if (!hasTriggeredComplete.current && positionRef.current === 1) {
+                setIsReadingComplete(true)
+                hasTriggeredComplete.current = true
+                onReadingCompleteRef.current?.()
+              }
+              completionTimerRef.current = null
+            }, completionHoldMs)
+          }
+        } else {
+          // If we moved off 100%, cancel any pending completion hold
+          if (completionTimerRef.current) {
+            clearTimeout(completionTimerRef.current)
+            completionTimerRef.current = null
+            // still allow threshold-based completion for near-bottom if configured
+            if (clampedProgress >= readingCompleteThreshold) {
+              setIsReadingComplete(true)
+              hasTriggeredComplete.current = true
+              onReadingCompleteRef.current?.()
+            }
+          }
+        }
       }
     }
 
@@ -114,18 +156,24 @@ export const useReadingPosition = ({
       window.removeEventListener('scroll', handleScroll)
       window.removeEventListener('resize', handleScroll)
       
-      // Clear save timer on unmount
-      if (saveTimerRef.current) {
-        clearTimeout(saveTimerRef.current)
+      // DON'T clear save timer - let it complete even if tracking is temporarily disabled
+      // Only clear completion timer since that's tied to the current scroll session
+      if (completionTimerRef.current) {
+        clearTimeout(completionTimerRef.current)
       }
     }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave])
+  }, [enabled, readingCompleteThreshold, scheduleSave, completionHoldMs])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {
     if (!enabled) {
       setIsReadingComplete(false)
       hasTriggeredComplete.current = false
+      lastSaved100Ref.current = false
+      if (completionTimerRef.current) {
+        clearTimeout(completionTimerRef.current)
+        completionTimerRef.current = null
+      }
     }
   }, [enabled])
 
@@ -133,6 +181,6 @@ export const useReadingPosition = ({
     position,
     isReadingComplete,
     progressPercentage: Math.round(position * 100),
-    saveNow
+    suppressSavesFor
   }
 }

src/hooks/useSettings.ts

@@ -3,7 +3,7 @@ import { IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { EventFactory } from 'applesauce-factory'
 import { AccountManager } from 'applesauce-accounts'
-import { UserSettings, loadSettings, saveSettings, watchSettings } from '../services/settingsService'
+import { UserSettings, saveSettings, watchSettings, startSettingsStream } from '../services/settingsService'
 import { loadFont, getFontFamily } from '../utils/fontLoader'
 import { applyTheme } from '../utils/theme'
 import { RELAYS } from '../config/relays'
@@ -16,30 +16,28 @@ interface UseSettingsParams {
 }
 
 export function useSettings({ relayPool, eventStore, pubkey, accountManager }: UseSettingsParams) {
-  const [settings, setSettings] = useState<UserSettings>({})
+  const [settings, setSettings] = useState<UserSettings>({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true })
   const [toastMessage, setToastMessage] = useState<string | null>(null)
   const [toastType, setToastType] = useState<'success' | 'error'>('success')
 
-  // Load settings and set up subscription
+  // Load settings and set up streaming subscription (non-blocking, EOSE-driven)
   useEffect(() => {
     if (!relayPool || !pubkey || !eventStore) return
 
-    const loadAndWatch = async () => {
-      try {
-        const loadedSettings = await loadSettings(relayPool, eventStore, pubkey, RELAYS)
-        if (loadedSettings) setSettings(loadedSettings)
-      } catch (err) {
-        console.error('Failed to load settings:', err)
-      }
-    }
-
-    loadAndWatch()
-
-    const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
-      if (loadedSettings) setSettings(loadedSettings)
+    // Start settings stream: seed from store, stream updates to store in background
+    const stopNetwork = startSettingsStream(relayPool, eventStore, pubkey, RELAYS, (loadedSettings) => {
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
     })
 
-    return () => subscription.unsubscribe()
+    // Also watch store reactively for any further updates
+    const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
+    })
+
+    return () => {
+      subscription.unsubscribe()
+      stopNetwork()
+    }
   }, [relayPool, pubkey, eventStore])
 
   // Apply settings to document
@@ -48,7 +46,6 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       const root = document.documentElement.style
       const fontKey = settings.readingFont || 'system'
       
-      console.log('🎨 Applying settings styles:', { fontKey, fontSize: settings.fontSize, theme: settings.theme })
       
       // Apply theme with color variants (defaults to 'system' if not set)
       applyTheme(
@@ -59,9 +56,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       
       // Load font first and wait for it to be ready
       if (fontKey !== 'system') {
-        console.log('⏳ Waiting for font to load...')
         await loadFont(fontKey)
-        console.log('✅ Font loaded, applying styles')
       }
       
       // Apply font settings after font is loaded
@@ -73,10 +68,19 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       root.setProperty('--highlight-color-friends', settings.highlightColorFriends || '#f97316')
       root.setProperty('--highlight-color-nostrverse', settings.highlightColorNostrverse || '#9333ea')
       
+      // Set link colors for dark and light themes separately
+      const darkLinkColor = settings.linkColorDark || '#38bdf8'
+      const lightLinkColor = settings.linkColorLight || '#3b82f6'
+      root.setProperty('--color-link-dark', darkLinkColor)
+      root.setProperty('--color-link-light', lightLinkColor)
+      
       // Set paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
       
-      console.log('✅ All styles applied')
+      // Set image width and max-height based on full-width setting
+      root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto')
+      root.setProperty('--image-max-height', settings.fullWidthImages ? 'none' : '70vh')
+      
     }
     
     applyStyles()

src/hooks/useTextToSpeech.ts

@@ -0,0 +1,288 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+// Web Speech API types
+type SpeechSynthesisVoice = {
+  name: string
+  voiceURI: string
+  lang: string
+  localService: boolean
+  default: boolean
+}
+
+export interface UseTTSOptions {
+  defaultLang?: string
+  defaultRate?: number
+  defaultPitch?: number
+  defaultVolume?: number
+}
+
+export interface UseTTS {
+  supported: boolean
+  speaking: boolean
+  paused: boolean
+  voices: SpeechSynthesisVoice[]
+  voice: SpeechSynthesisVoice | null
+  rate: number
+  pitch: number
+  volume: number
+  setVoice: (v: SpeechSynthesisVoice | null) => void
+  setRate: (r: number) => void
+  setPitch: (p: number) => void
+  setVolume: (v: number) => void
+  speak: (text: string, langOverride?: string) => void
+  pause: () => void
+  resume: () => void
+  stop: () => void
+}
+
+export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
+  const synth = typeof window !== 'undefined' ? window.speechSynthesis : undefined
+  const supported = !!synth
+  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
+  const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null)
+  const [speaking, setSpeaking] = useState(false)
+  const [paused, setPaused] = useState(false)
+  const [rate, setRate] = useState(options.defaultRate ?? 2.1)
+  const [pitch, setPitch] = useState(options.defaultPitch ?? 1)
+  const [volume, setVolume] = useState(options.defaultVolume ?? 1)
+  const defaultLang = options.defaultLang || (typeof navigator !== 'undefined' ? navigator.language : 'en')
+
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null)
+  const spokenTextRef = useRef<string>('')
+  const charIndexRef = useRef<number>(0)
+  // Chunking state to reliably speak long texts from web URLs
+  const chunksRef = useRef<string[]>([])
+  const chunkIndexRef = useRef<number>(0)
+  const globalOffsetRef = useRef<number>(0)
+  const langRef = useRef<string | undefined>(undefined)
+
+  // Update rate when defaultRate option changes
+  useEffect(() => {
+    if (options.defaultRate !== undefined) {
+      setRate(options.defaultRate)
+    }
+  }, [options.defaultRate])
+
+  // Load voices (async in many browsers)
+  useEffect(() => {
+    if (!supported) return
+    const load = () => {
+      const v = synth!.getVoices()
+      setVoices(v)
+      if (!voice && v.length) {
+        const byLang = v.find(x => x.lang?.toLowerCase().startsWith(defaultLang.toLowerCase()))
+        setVoice(byLang || v[0] || null)
+      }
+    }
+    load()
+    const handleVoicesChanged = () => load()
+    synth!.addEventListener('voiceschanged', handleVoicesChanged)
+    return () => {
+      synth!.removeEventListener('voiceschanged', handleVoicesChanged)
+    }
+  }, [supported, defaultLang, voice, synth])
+
+  const createUtterance = useCallback((text: string, langOverride?: string): SpeechSynthesisUtterance => {
+    const SpeechSynthesisUtteranceConstructor = (window as Window & typeof globalThis).SpeechSynthesisUtterance
+    const u = new SpeechSynthesisUtteranceConstructor(text) as SpeechSynthesisUtterance
+    const resolvedLang = langOverride || voice?.lang || defaultLang
+    u.lang = resolvedLang
+    if (langOverride) {
+      const match = voices.find(v => v.lang?.toLowerCase().startsWith(langOverride.toLowerCase()))
+      if (match) {
+        u.voice = match
+      } else if (voice) {
+        u.voice = voice
+      }
+    } else if (voice) {
+      u.voice = voice
+    }
+    u.rate = rate
+    u.pitch = pitch
+    u.volume = volume
+
+    const self = u
+
+    u.onstart = () => {
+      if (utteranceRef.current !== self) return
+      setSpeaking(true)
+      setPaused(false)
+    }
+    u.onpause = () => {
+      if (utteranceRef.current !== self) return
+      setPaused(true)
+    }
+    u.onresume = () => {
+      if (utteranceRef.current !== self) return
+      setPaused(false)
+    }
+    u.onend = () => {
+      if (utteranceRef.current !== self) return
+      // Continue with next chunk if available
+      const hasMore = chunkIndexRef.current < (chunksRef.current.length - 1)
+      if (hasMore) {
+        chunkIndexRef.current++
+        charIndexRef.current += self.text.length
+        const nextChunk = chunksRef.current[chunkIndexRef.current]
+        const nextUtterance = createUtterance(nextChunk, langRef.current)
+        utteranceRef.current = nextUtterance
+        synth!.speak(nextUtterance)
+      } else {
+        setSpeaking(false)
+        setPaused(false)
+      }
+    }
+    u.onerror = () => {
+      if (utteranceRef.current !== self) return
+      setSpeaking(false)
+      setPaused(false)
+    }
+    u.onboundary = (ev: SpeechSynthesisEvent) => {
+      if (utteranceRef.current !== self) return
+      if (typeof ev.charIndex === 'number') {
+        const newIndex = globalOffsetRef.current + ev.charIndex
+        if (newIndex > charIndexRef.current) {
+          charIndexRef.current = newIndex
+        }
+      }
+    }
+
+    return u
+  }, [voice, defaultLang, rate, pitch, volume, voices, synth])
+
+  const splitIntoChunks = useCallback((text: string, maxLen = 2400): string[] => {
+    const normalized = text.replace(/\s+/g, ' ').trim()
+    if (normalized.length <= maxLen) return [normalized]
+    const sentences = normalized.split(/(?<=[.!?])\s+/)
+    const chunks: string[] = []
+    let current = ''
+    for (const s of sentences) {
+      if ((current + (current ? ' ' : '') + s).length > maxLen) {
+        if (current) chunks.push(current)
+        if (s.length > maxLen) {
+          // Hard split very long sentence
+          for (let i = 0; i < s.length; i += maxLen) {
+            chunks.push(s.slice(i, i + maxLen))
+          }
+          current = ''
+        } else {
+          current = s
+        }
+      } else {
+        current = current ? `${current} ${s}` : s
+      }
+    }
+    if (current) chunks.push(current)
+    return chunks
+  }, [])
+
+  const startSpeakingChunks = useCallback((text: string) => {
+    chunksRef.current = splitIntoChunks(text)
+    chunkIndexRef.current = 0
+    globalOffsetRef.current = 0
+    const first = chunksRef.current[0] || ''
+    const u = createUtterance(first, langRef.current)
+    utteranceRef.current = u
+    synth!.speak(u)
+  }, [createUtterance, splitIntoChunks, synth])
+
+  const stop = useCallback(() => {
+    if (!supported) return
+    synth!.cancel()
+    setSpeaking(false)
+    setPaused(false)
+    utteranceRef.current = null
+    charIndexRef.current = 0
+    spokenTextRef.current = ''
+    chunksRef.current = []
+    chunkIndexRef.current = 0
+    globalOffsetRef.current = 0
+  }, [supported, synth])
+
+  const speak = useCallback((text: string, langOverride?: string) => {
+    if (!supported || !text?.trim()) return
+    synth!.cancel()
+    spokenTextRef.current = text
+    charIndexRef.current = 0
+    langRef.current = langOverride
+    startSpeakingChunks(text)
+  }, [supported, synth, startSpeakingChunks])
+
+  const pause = useCallback(() => {
+    if (!supported) return
+    if (synth!.speaking && !synth!.paused) {
+      synth!.pause()
+      setPaused(true)
+    }
+  }, [supported, synth])
+
+  const resume = useCallback(() => {
+    if (!supported) return
+    if (synth!.speaking && synth!.paused) {
+      synth!.resume()
+      setPaused(false)
+    }
+  }, [supported, synth])
+
+  // Update rate in real-time: while speaking, restart from last boundary with new rate.
+  useEffect(() => {
+    if (!supported) return
+    if (!utteranceRef.current) return
+
+    if (synth!.speaking && !synth!.paused) {
+      const fullText = spokenTextRef.current
+      const startIndex = Math.max(0, Math.min(charIndexRef.current, fullText.length))
+      const remainingText = fullText.slice(startIndex)
+
+      synth!.cancel()
+      // restart chunked from current global index
+      spokenTextRef.current = remainingText
+      charIndexRef.current = 0
+      // keep current language selection; no change needed here
+      startSpeakingChunks(remainingText)
+      return
+    }
+
+    if (utteranceRef.current) {
+      utteranceRef.current.rate = rate
+    }
+  }, [rate, supported, synth, startSpeakingChunks])
+
+  const updateRate = useCallback((newRate: number) => {
+    setRate(newRate)
+    if (!supported) return
+    if (!utteranceRef.current) return
+
+    if (synth!.speaking && !synth!.paused) {
+      const fullText = spokenTextRef.current
+      const startIndex = Math.max(0, Math.min(charIndexRef.current, fullText.length - 1))
+      const remainingText = fullText.slice(startIndex)
+      synth!.cancel()
+      const u = createUtterance(remainingText)
+      // ensure the new rate is applied immediately on the new utterance
+      u.rate = newRate
+      utteranceRef.current = u
+      synth!.speak(u)
+    } else if (utteranceRef.current) {
+      utteranceRef.current.rate = newRate
+    }
+  }, [supported, synth, createUtterance])
+
+  // stop TTS when unmounting
+  useEffect(() => stop, [stop])
+
+  return useMemo(() => ({
+    supported,
+    speaking,
+    paused,
+    voices,
+    voice,
+    rate,
+    setRate: updateRate,
+    pitch, setPitch,
+    volume, setVolume,
+    setVoice,
+    speak, pause, resume, stop
+  }), [supported, speaking, paused, voices, voice, rate, updateRate, pitch, volume, setVoice, speak, pause, resume, stop])
+}
+

src/main.tsx

@@ -6,17 +6,59 @@ import './index.css'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 // Register Service Worker for PWA functionality
+// With injectRegister: null, we need to register manually
+// With devOptions.enabled: true, vite-plugin-pwa serves SW in dev mode too
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker
-      .register('/sw.js', { type: 'module' })
+    const swPath = '/sw.js'
+    
+    // Check if already registered/active first
+    navigator.serviceWorker.getRegistrations().then(async (registrations) => {
+      if (registrations.length > 0) {
+        return registrations[0]
+      }
+      
+      // Not registered yet, try to register
+      // In dev mode, use the dev Service Worker for testing
+      if (import.meta.env.DEV) {
+        const devSwPath = '/sw-dev.js'
+        try {
+          // Check if dev SW exists
+          const response = await fetch(devSwPath)
+          const contentType = response.headers.get('content-type') || ''
+          const isJavaScript = contentType.includes('javascript') || contentType.includes('application/javascript')
+          
+          if (response.ok && isJavaScript) {
+            return await navigator.serviceWorker.register(devSwPath, { scope: '/' })
+          } else {
+            console.warn('[sw-registration] Development Service Worker not available')
+            return null
+          }
+        } catch (err) {
+          console.warn('[sw-registration] Could not load development Service Worker:', err)
+          return null
+        }
+      } else {
+        // In production, just register directly
+        return await navigator.serviceWorker.register(swPath)
+      }
+    })
       .then(registration => {
-        console.log('✅ Service Worker registered:', registration.scope)
+        if (!registration) return
         
-        // Check for updates periodically
-        setInterval(() => {
-          registration.update()
-        }, 60 * 60 * 1000) // Check every hour
+        // Wait for Service Worker to activate
+        if (registration.installing) {
+          registration.installing.addEventListener('statechange', () => {
+            // Service Worker state changed
+          })
+        }
+        
+        // Check for updates periodically (production only)
+        if (import.meta.env.PROD) {
+          setInterval(() => {
+            registration.update()
+          }, 60 * 60 * 1000) // Check every hour
+        }
         
         // Handle service worker updates
         registration.addEventListener('updatefound', () => {
@@ -25,9 +67,6 @@ if ('serviceWorker' in navigator) {
             newWorker.addEventListener('statechange', () => {
               if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                 // New service worker available
-                console.log('🔄 New version available! Reload to update.')
-                
-                // Optionally show a toast notification
                 const updateAvailable = new CustomEvent('sw-update-available')
                 window.dispatchEvent(updateAvailable)
               }
@@ -36,9 +75,22 @@ if ('serviceWorker' in navigator) {
         })
       })
       .catch(error => {
-        console.error('❌ Service Worker registration failed:', error)
+        console.error('[sw-registration] ❌ Service Worker registration failed:', error)
+        console.error('[sw-registration] Error details:', {
+          message: error.message,
+          name: error.name,
+          stack: error.stack
+        })
+        
+        // In dev mode, this is expected if vite-plugin-pwa isn't serving the SW
+        if (import.meta.env.DEV) {
+          console.warn('[sw-registration] ⚠️ This is expected in dev mode if vite-plugin-pwa is not serving the SW file')
+          console.warn('[sw-registration] Image caching will not work in dev mode - test in production build')
+        }
       })
   })
+} else {
+  console.warn('[sw-registration] ⚠️ Service Workers not supported in this browser')
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/services/archiveController.ts

@@ -0,0 +1,197 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
+import { ARCHIVE_EMOJI } from './reactionService'
+import { nip19 } from 'nostr-tools'
+
+type MarkedChangeCallback = (markedIds: Set<string>) => void
+
+class ArchiveController {
+  private markedIds: Set<string> = new Set()
+  private lastLoadedPubkey: string | null = null
+  private listeners: MarkedChangeCallback[] = []
+  private generation = 0
+  private timelineSubscription: { unsubscribe: () => void } | null = null
+  private pendingEventIds: Set<string> = new Set()
+
+  onMarked(cb: MarkedChangeCallback): () => void {
+    this.listeners.push(cb)
+    // Emit current state immediately to new subscribers
+    cb(new Set(this.markedIds))
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== cb)
+    }
+  }
+
+  private emit(): void {
+    const snapshot = new Set(this.markedIds)
+    this.listeners.forEach(cb => cb(snapshot))
+  }
+
+  mark(id: string): void {
+    if (!this.markedIds.has(id)) {
+      this.markedIds.add(id)
+      this.emit()
+    }
+  }
+
+  unmark(id: string): void {
+    if (this.markedIds.delete(id)) {
+      this.emit()
+    }
+  }
+
+  isMarked(id: string): boolean {
+    return this.markedIds.has(id)
+  }
+
+  getMarkedIds(): string[] {
+    return Array.from(this.markedIds)
+  }
+
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey
+  }
+
+  reset(): void {
+    this.generation++
+      if (this.timelineSubscription) {
+        try { this.timelineSubscription.unsubscribe() } catch { /* ignore */ }
+        this.timelineSubscription = null
+      }
+    this.markedIds = new Set()
+    this.pendingEventIds = new Set()
+    this.lastLoadedPubkey = null
+    this.emit()
+  }
+
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, pubkey, force = false } = options
+    const startGen = this.generation
+
+    if (!force && this.isLoadedFor(pubkey)) {
+      return
+    }
+
+    // Mark as loaded immediately (fetch runs non-blocking)
+    this.lastLoadedPubkey = pubkey
+
+    // Handlers for streaming queries
+    const handleUrlReaction = (evt: NostrEvent) => {
+      if (evt.content !== ARCHIVE_EMOJI) return
+      const rTag = evt.tags.find(t => t[0] === 'r')?.[1]
+      if (!rTag) return
+      this.markedIds.add(rTag)
+      this.emit()
+    }
+
+    const handleEventReaction = (evt: NostrEvent) => {
+      if (evt.content !== ARCHIVE_EMOJI) return
+      // Direct coordinate tag ('a') - can be mapped immediately
+      const aTag = evt.tags.find(t => t[0] === 'a')?.[1]
+      if (aTag) {
+        try {
+          const [kindStr, pubkey, identifier] = aTag.split(':')
+          const kind = Number(kindStr)
+          if (kind === KINDS.BlogPost && pubkey && identifier) {
+            const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
+            this.markedIds.add(naddr)
+            this.emit()
+            return
+          }
+        } catch { /* ignore malformed a-tag */ }
+      }
+      const eTag = evt.tags.find(t => t[0] === 'e')?.[1]
+      if (!eTag) return
+      this.pendingEventIds.add(eTag)
+    }
+
+    try {
+      // Stream kind:17 and kind:7 in parallel
+      const [kind17, kind7] = await Promise.all([
+        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { onEvent: handleUrlReaction }),
+        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { onEvent: handleEventReaction })
+      ])
+
+      if (startGen !== this.generation) return
+
+      // Include EOSE events
+      kind17.forEach(handleUrlReaction)
+      kind7.forEach(handleEventReaction)
+
+      if (this.pendingEventIds.size > 0) {
+        // Fetch referenced articles (kind:30023) and map event IDs to naddr
+        const ids = Array.from(this.pendingEventIds)
+        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids })
+        for (const article of articleEvents) {
+          const dTag = article.tags.find(t => t[0] === 'd')?.[1]
+          if (!dTag) continue
+          try {
+            const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: article.pubkey, identifier: dTag })
+            this.markedIds.add(naddr)
+          } catch {
+            // skip invalid
+          }
+        }
+        this.emit()
+      }
+
+      // Try immediate mapping via eventStore for any still-pending e-ids
+      if (this.pendingEventIds.size > 0) {
+        const stillPending = new Set<string>()
+        for (const eId of this.pendingEventIds) {
+          try {
+            const store = eventStore as unknown as { getEvent?: (id: string) => NostrEvent | undefined }
+            const evt: NostrEvent | undefined = typeof store.getEvent === 'function' ? store.getEvent(eId) : undefined
+            if (evt && evt.kind === KINDS.BlogPost) {
+              const dTag = evt.tags.find(t => t[0] === 'd')?.[1]
+              if (dTag) {
+                const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: evt.pubkey, identifier: dTag })
+                this.markedIds.add(naddr)
+              }
+            } else {
+              stillPending.add(eId)
+            }
+          } catch (e) { stillPending.add(eId) }
+        }
+        this.pendingEventIds = stillPending
+        if (stillPending.size > 0) {
+          // Subscribe to future 30023 arrivals to finalize mapping
+          if (this.timelineSubscription) {
+            try { this.timelineSubscription.unsubscribe() } catch { /* ignore */ }
+            this.timelineSubscription = null
+          }
+          const sub$ = eventStore.timeline({ kinds: [KINDS.BlogPost] })
+          const genAtSub = this.generation
+          this.timelineSubscription = sub$.subscribe((events: NostrEvent[]) => {
+            if (genAtSub !== this.generation) return
+            for (const evt of events) {
+              if (!this.pendingEventIds.has(evt.id)) continue
+              const dTag = evt.tags.find(t => t[0] === 'd')?.[1]
+              if (!dTag) continue
+              try {
+                const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: evt.pubkey, identifier: dTag })
+                this.markedIds.add(naddr)
+                this.pendingEventIds.delete(evt.id)
+                this.emit()
+              } catch { /* ignore */ }
+            }
+          })
+        }
+      }
+    } catch (err) {
+      // Non-blocking fetch; ignore errors here
+    }
+  }
+}
+
+export const archiveController = new ArchiveController()
+
+

src/services/articleService.ts

@@ -34,11 +34,13 @@ function getCacheKey(naddr: string): string {
   return `${CACHE_PREFIX}${naddr}`
 }
 
-function getFromCache(naddr: string): ArticleContent | null {
+export function getFromCache(naddr: string): ArticleContent | null {
   try {
     const cacheKey = getCacheKey(naddr)
     const cached = localStorage.getItem(cacheKey)
-    if (!cached) return null
+    if (!cached) {
+      return null
+    }
 
     const { content, timestamp }: CachedArticle = JSON.parse(cached)
     const age = Date.now() - timestamp
@@ -48,14 +50,52 @@ function getFromCache(naddr: string): ArticleContent | null {
       return null
     }
 
-    console.log('📦 Loaded article from cache:', naddr)
     return content
-  } catch {
+  } catch (err) {
+    // Silently handle cache read errors
     return null
   }
 }
 
-function saveToCache(naddr: string, content: ArticleContent): void {
+/**
+ * Caches an article event to localStorage for offline access
+ * @param event - The Nostr event to cache
+ * @param settings - Optional user settings
+ */
+export function cacheArticleEvent(event: NostrEvent, settings?: UserSettings): void {
+  try {
+    const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
+    if (!dTag || event.kind !== 30023) return
+
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: event.pubkey,
+      identifier: dTag
+    })
+    
+    const articleContent: ArticleContent = {
+      title: getArticleTitle(event) || 'Untitled Article',
+      markdown: event.content,
+      image: getArticleImage(event),
+      published: getArticlePublished(event),
+      summary: getArticleSummary(event),
+      author: event.pubkey,
+      event
+    }
+    
+    saveToCache(naddr, articleContent, settings)
+  } catch (err) {
+    // Silently fail cache saves - quota exceeded, invalid data, etc.
+  }
+}
+
+export function saveToCache(naddr: string, content: ArticleContent, settings?: UserSettings): void {
+  // Respect user settings: if image caching is disabled, we could skip article caching too
+  // However, for offline-first design, we default to caching unless explicitly disabled
+  // Future: could add explicit enableArticleCache setting
+  // For now, we cache aggressively but handle errors gracefully
+  // Note: settings parameter reserved for future use
+  void settings // Mark as intentionally unused for now
   try {
     const cacheKey = getCacheKey(naddr)
     const cached: CachedArticle = {
@@ -63,10 +103,9 @@ function saveToCache(naddr: string, content: ArticleContent): void {
       timestamp: Date.now()
     }
     localStorage.setItem(cacheKey, JSON.stringify(cached))
-    console.log('💾 Saved article to cache:', naddr)
   } catch (err) {
-    console.warn('Failed to cache article:', err)
-    // Silently fail if storage is full or unavailable
+    // Silently fail - don't block the UI if caching fails
+    // Handles quota exceeded, invalid data, and other errors gracefully
   }
 }
 
@@ -99,10 +138,10 @@ export async function fetchArticleByNaddr(
 
     const pointer = decoded.data as AddressPointer
 
-    // Define relays to query - prefer relays from naddr, fallback to configured relays (including local)
-    const baseRelays = pointer.relays && pointer.relays.length > 0 
-      ? pointer.relays 
-      : RELAYS
+    // Define relays to query - use union of relay hints from naddr and configured relays
+    // This avoids failures when naddr contains stale/unreachable relay hints
+    const hintedRelays = (pointer.relays && pointer.relays.length > 0) ? pointer.relays : []
+    const baseRelays = Array.from(new Set<string>([...hintedRelays, ...RELAYS]))
     const orderedRelays = prioritizeLocalRelays(baseRelays)
     const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
 
@@ -116,7 +155,28 @@ export async function fetchArticleByNaddr(
     // Parallel local+remote, stream immediate, collect up to first from each
     const { local$, remote$ } = createParallelReqStreams(relayPool, localRelays, remoteRelays, filter, 1200, 6000)
     const collected = await lastValueFrom(merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray()))
-    const events = collected as NostrEvent[]
+    let events = collected as NostrEvent[]
+
+    // Fallback: if nothing found, try a second round against a set of reliable public relays
+    if (events.length === 0) {
+      const reliableRelays = Array.from(new Set<string>([
+        'wss://relay.nostr.band',
+        'wss://relay.primal.net',
+        'wss://relay.damus.io',
+        'wss://nos.lol',
+        ...remoteRelays // keep any configured remote relays
+      ]))
+      const { remote$: fallback$ } = createParallelReqStreams(
+        relayPool,
+        [], // no local
+        reliableRelays,
+        filter,
+        1500,
+        12000
+      )
+      const fallbackCollected = await lastValueFrom(fallback$.pipe(take(1), rxToArray()))
+      events = fallbackCollected as NostrEvent[]
+    }
 
     if (events.length === 0) {
       throw new Error('Article not found')
@@ -145,7 +205,7 @@ export async function fetchArticleByNaddr(
     }
 
     // Save to cache before returning
-    saveToCache(naddr, content)
+    saveToCache(naddr, content, settings)
     
     // Image caching is handled automatically by Service Worker
     

src/services/bookmarkController.ts

@@ -1,12 +1,8 @@
 import { RelayPool } from 'applesauce-relay'
 import { Helpers, EventStore } from 'applesauce-core'
-import { createEventLoader, createAddressLoader } from 'applesauce-loaders/loaders'
 import { NostrEvent } from 'nostr-tools'
-import { EventPointer } from 'nostr-tools/nip19'
-import { merge } from 'rxjs'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
-import { RELAYS } from '../config/relays'
 import { collectBookmarksFromEvents } from './bookmarkProcessing'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import {
@@ -64,11 +60,8 @@ class BookmarkController {
   }> = new Map()
   private isLoading = false
   private hydrationGeneration = 0
-  
-  // Event loaders for efficient batching
-  private eventStore = new EventStore()
-  private eventLoader: ReturnType<typeof createEventLoader> | null = null
-  private addressLoader: ReturnType<typeof createAddressLoader> | null = null
+  private externalEventStore: EventStore | null = null
+  private relayPool: RelayPool | null = null
 
   onRawEvent(cb: RawEventCallback): () => void {
     this.rawEventListeners.push(cb)
@@ -117,96 +110,164 @@ class BookmarkController {
   }
 
   /**
-   * Hydrate events by IDs using EventLoader (auto-batching, streaming)
+   * Hydrate events by IDs using queryEvents (local-first, streaming)
    */
-  private hydrateByIds(
+  private async hydrateByIds(
     ids: string[],
     idToEvent: Map<string, NostrEvent>,
     onProgress: () => void,
     generation: number
-  ): void {
-    if (!this.eventLoader) {
-      console.warn('[bookmark] ⚠️ EventLoader not initialized')
+  ): Promise<void> {
+    if (!this.relayPool) {
       return
     }
 
     // Filter to unique IDs not already hydrated
     const unique = Array.from(new Set(ids)).filter(id => !idToEvent.has(id))
     if (unique.length === 0) {
-      console.log('[bookmark] 🔧 All IDs already hydrated, skipping')
       return
     }
-
-    console.log('[bookmark] 🔧 Hydrating', unique.length, 'IDs using EventLoader')
     
-    // Convert IDs to EventPointers
-    const pointers: EventPointer[] = unique.map(id => ({ id }))
-    
-    // Use EventLoader - it auto-batches and streams results
-    merge(...pointers.map(this.eventLoader)).subscribe({
-      next: (event) => {
-        // Check if hydration was cancelled
-        if (this.hydrationGeneration !== generation) return
-        
-        idToEvent.set(event.id, event)
-        
-        // Also index by coordinate for addressable events
-        if (event.kind && event.kind >= 30000 && event.kind < 40000) {
-          const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
-          const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
-          idToEvent.set(coordinate, event)
+    // Fetch events using local-first queryEvents
+    await queryEvents(
+      this.relayPool,
+      { ids: unique },
+      {
+        onEvent: (event) => {
+          // Check if hydration was cancelled
+          if (this.hydrationGeneration !== generation) return
+          
+          idToEvent.set(event.id, event)
+          
+          // Also index by coordinate for addressable events
+          if (event.kind && event.kind >= 30000 && event.kind < 40000) {
+            const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+            idToEvent.set(coordinate, event)
+          }
+          
+          // Add to external event store if available
+          if (this.externalEventStore) {
+            this.externalEventStore.add(event)
+          }
+          
+          onProgress()
         }
-        
-        onProgress()
-      },
-      error: (error) => {
-        console.error('[bookmark] ❌ EventLoader error:', error)
       }
-    })
+    )
   }
 
   /**
-   * Hydrate addressable events by coordinates using AddressLoader (auto-batching, streaming)
+   * Hydrate addressable events by coordinates using queryEvents (local-first, streaming)
    */
-  private hydrateByCoordinates(
+  private async hydrateByCoordinates(
     coords: Array<{ kind: number; pubkey: string; identifier: string }>,
     idToEvent: Map<string, NostrEvent>,
     onProgress: () => void,
     generation: number
-  ): void {
-    if (!this.addressLoader) {
-      console.warn('[bookmark] ⚠️ AddressLoader not initialized')
+  ): Promise<void> {
+    if (!this.relayPool) {
       return
     }
 
-    if (coords.length === 0) return
+    if (coords.length === 0) {
+      return
+    }
 
-    console.log('[bookmark] 🔧 Hydrating', coords.length, 'coordinates using AddressLoader')
-
-    // Convert coordinates to AddressPointers
-    const pointers = coords.map(c => ({
-      kind: c.kind,
-      pubkey: c.pubkey,
-      identifier: c.identifier
-    }))
-
-    // Use AddressLoader - it auto-batches and streams results
-    merge(...pointers.map(this.addressLoader)).subscribe({
-      next: (event) => {
-        // Check if hydration was cancelled
-        if (this.hydrationGeneration !== generation) return
-
-        const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
-        const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
-        idToEvent.set(coordinate, event)
-        idToEvent.set(event.id, event)
-        
-        onProgress()
-      },
-      error: (error) => {
-        console.error('[bookmark] ❌ AddressLoader error:', error)
+    // Group by kind and pubkey for efficient batching
+    const filtersByKind = new Map<number, Map<string, string[]>>()
+    
+    for (const coord of coords) {
+      if (!filtersByKind.has(coord.kind)) {
+        filtersByKind.set(coord.kind, new Map())
       }
-    })
+      const byPubkey = filtersByKind.get(coord.kind)!
+      if (!byPubkey.has(coord.pubkey)) {
+        byPubkey.set(coord.pubkey, [])
+      }
+      byPubkey.get(coord.pubkey)!.push(coord.identifier || '')
+    }
+
+    // Kick off all queries in parallel (fire-and-forget)
+    const promises: Promise<void>[] = []
+    
+    for (const [kind, byPubkey] of filtersByKind) {
+      for (const [pubkey, identifiers] of byPubkey) {
+        // Separate empty and non-empty identifiers
+        const nonEmptyIdentifiers = identifiers.filter(id => id && id.length > 0)
+        const hasEmptyIdentifier = identifiers.some(id => !id || id.length === 0)
+        
+        // Fetch events with non-empty d-tags
+        if (nonEmptyIdentifiers.length > 0) {
+          promises.push(
+            queryEvents(
+              this.relayPool,
+              { kinds: [kind], authors: [pubkey], '#d': nonEmptyIdentifiers },
+              {
+                onEvent: (event) => {
+                  // Check if hydration was cancelled
+                  if (this.hydrationGeneration !== generation) return
+
+                  const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+                  const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+                  idToEvent.set(coordinate, event)
+                  idToEvent.set(event.id, event)
+                  
+                  // Add to external event store if available
+                  if (this.externalEventStore) {
+                    this.externalEventStore.add(event)
+                  }
+                  
+                  onProgress()
+                }
+              }
+            ).then(() => {
+              // Query completed successfully
+            }).catch(() => {
+              // Silent error - individual query failed
+            })
+          )
+        }
+        
+        // Fetch events with empty d-tag separately (without '#d' filter)
+        if (hasEmptyIdentifier) {
+          promises.push(
+            queryEvents(
+              this.relayPool,
+              { kinds: [kind], authors: [pubkey] },
+              {
+                onEvent: (event) => {
+                  // Check if hydration was cancelled
+                  if (this.hydrationGeneration !== generation) return
+                  
+                  // Only process events with empty d-tag
+                  const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+                  if (dTag !== '') return
+
+                  const coordinate = `${event.kind}:${event.pubkey}:`
+                  idToEvent.set(coordinate, event)
+                  idToEvent.set(event.id, event)
+                  
+                  // Add to external event store if available
+                  if (this.externalEventStore) {
+                    this.externalEventStore.add(event)
+                  }
+                  
+                  onProgress()
+                }
+              }
+            ).then(() => {
+              // Query completed successfully
+            }).catch(() => {
+              // Silent error - individual query failed
+            })
+          )
+        }
+      }
+    }
+    
+    // Wait for all queries to complete
+    await Promise.all(promises)
   }
 
   private async buildAndEmitBookmarks(
@@ -223,10 +284,6 @@ class BookmarkController {
       return this.decryptedResults.has(getEventKey(evt))
     })
     
-    const unencryptedCount = allEvents.filter(evt => !hasEncryptedContent(evt)).length
-    const decryptedCount = readyEvents.length - unencryptedCount
-    console.log('[bookmark] 📋 Building bookmarks:', unencryptedCount, 'unencrypted,', decryptedCount, 'decrypted, of', allEvents.length, 'total')
-    
     if (readyEvents.length === 0) {
       this.bookmarksListeners.forEach(cb => cb([]))
       return
@@ -237,17 +294,14 @@ class BookmarkController {
       const unencryptedEvents = readyEvents.filter(evt => !hasEncryptedContent(evt))
       const decryptedEvents = readyEvents.filter(evt => hasEncryptedContent(evt))
       
-      console.log('[bookmark] 🔧 Processing', unencryptedEvents.length, 'unencrypted events')
       // Process unencrypted events
       const { publicItemsAll: publicUnencrypted, privateItemsAll: privateUnencrypted, newestCreatedAt, latestContent, allTags } = 
         await collectBookmarksFromEvents(unencryptedEvents, activeAccount, signerCandidate)
-      console.log('[bookmark] 🔧 Unencrypted returned:', publicUnencrypted.length, 'public,', privateUnencrypted.length, 'private')
       
       // Merge in decrypted results
       let publicItemsAll = [...publicUnencrypted]
       let privateItemsAll = [...privateUnencrypted]
       
-      console.log('[bookmark] 🔧 Merging', decryptedEvents.length, 'decrypted events')
       decryptedEvents.forEach(evt => {
         const eventKey = getEventKey(evt)
         const decrypted = this.decryptedResults.get(eventKey)
@@ -256,52 +310,60 @@ class BookmarkController {
           privateItemsAll = [...privateItemsAll, ...decrypted.privateItems]
         }
       })
-      
-      console.log('[bookmark] 🔧 Total after merge:', publicItemsAll.length, 'public,', privateItemsAll.length, 'private')
 
       const allItems = [...publicItemsAll, ...privateItemsAll]
-      console.log('[bookmark] 🔧 Total items to process:', allItems.length)
+      const deduped = dedupeBookmarksById(allItems)
       
-      // Separate hex IDs from coordinates
+      // Separate hex IDs from coordinates for fetching
       const noteIds: string[] = []
       const coordinates: string[] = []
       
-      allItems.forEach(i => {
-        if (/^[0-9a-f]{64}$/i.test(i.id)) {
-          noteIds.push(i.id)
-        } else if (i.id.includes(':')) {
-          coordinates.push(i.id)
+      // Request hydration for all items that don't have content yet
+      deduped.forEach(i => {
+        // If item has no content, we need to fetch it
+        if (!i.content || i.content.length === 0) {
+          if (/^[0-9a-f]{64}$/i.test(i.id)) {
+            noteIds.push(i.id)
+          } else if (i.id.includes(':')) {
+            coordinates.push(i.id)
+          }
         }
       })
       
       // Helper to build and emit bookmarks
       const emitBookmarks = (idToEvent: Map<string, NostrEvent>) => {
-        console.log('[bookmark] 🔧 Building final bookmarks list...')
-        const allBookmarks = dedupeBookmarksById([
+        // Now hydrate the ORIGINAL items (which may have duplicates), using the deduplicated results
+        // This preserves the original public/private split while still getting all the content
+        const allBookmarks = [
           ...hydrateItems(publicItemsAll, idToEvent),
           ...hydrateItems(privateItemsAll, idToEvent)
-        ])
-        console.log('[bookmark] 🔧 After hydration and dedup:', allBookmarks.length, 'bookmarks')
-
-        console.log('[bookmark] 🔧 Enriching and sorting...')
+        ]
+        
         const enriched = allBookmarks.map(b => ({
           ...b,
           tags: b.tags || [],
-          content: b.content || ''
+          content: b.content || this.externalEventStore?.getEvent(b.id)?.content || '', // Fallback to eventStore content
+          created_at: (b.created_at ?? this.externalEventStore?.getEvent(b.id)?.created_at ?? null)
         }))
         
         const sortedBookmarks = enriched
-          .map(b => ({ ...b, urlReferences: extractUrlsFromContent(b.content) }))
-          .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
-        console.log('[bookmark] 🔧 Sorted:', sortedBookmarks.length, 'bookmarks')
+          .map(b => ({ 
+            ...b, 
+            urlReferences: extractUrlsFromContent(b.content)
+          }))
+          .sort((a, b) => {
+            // Sort by display time: created_at, else listUpdatedAt. Newest first. Nulls last.
+            const aTs = (a.created_at ?? a.listUpdatedAt ?? -Infinity)
+            const bTs = (b.created_at ?? b.listUpdatedAt ?? -Infinity)
+            return bTs - aTs
+          })
 
-        console.log('[bookmark] 🔧 Creating final Bookmark object...')
         const bookmark: Bookmark = {
           id: `${activeAccount.pubkey}-bookmarks`,
           title: `Bookmarks (${sortedBookmarks.length})`,
           url: '',
           content: latestContent,
-          created_at: newestCreatedAt || Math.floor(Date.now() / 1000),
+          created_at: newestCreatedAt || 0,
           tags: allTags,
           bookmarkCount: sortedBookmarks.length,
           eventReferences: allTags.filter((tag: string[]) => tag[0] === 'e').map((tag: string[]) => tag[1]),
@@ -310,18 +372,14 @@ class BookmarkController {
           encryptedContent: undefined
         }
         
-        console.log('[bookmark] 📋 Built bookmark with', sortedBookmarks.length, 'items')
-        console.log('[bookmark] 📤 Emitting to', this.bookmarksListeners.length, 'listeners')
         this.bookmarksListeners.forEach(cb => cb([bookmark]))
       }
 
       // Emit immediately with empty metadata (show placeholders)
       const idToEvent: Map<string, NostrEvent> = new Map()
-      console.log('[bookmark] 🚀 Emitting initial bookmarks with placeholders (IDs only)...')
       emitBookmarks(idToEvent)
 
-      // Now fetch events progressively in background using batched hydrators
-      console.log('[bookmark] 🔧 Background hydration:', noteIds.length, 'note IDs and', coordinates.length, 'coordinates')
+      // Now fetch events progressively in background using local-first queries
       
       const generation = this.hydrationGeneration
       const onProgress = () => emitBookmarks(idToEvent)
@@ -336,14 +394,16 @@ class BookmarkController {
         }
       })
       
-      // Kick off batched hydration (streaming, non-blocking)
-      // EventLoader and AddressLoader handle batching and streaming automatically
-      this.hydrateByIds(noteIds, idToEvent, onProgress, generation)
-      this.hydrateByCoordinates(coordObjs, idToEvent, onProgress, generation)
+      // Kick off hydration (streaming, non-blocking, local-first)
+      // Fire-and-forget - don't await, let it run in background
+      this.hydrateByIds(noteIds, idToEvent, onProgress, generation).catch(() => {
+        // Silent error - hydration will retry or show partial results
+      })
+      this.hydrateByCoordinates(coordObjs, idToEvent, onProgress, generation).catch(() => {
+        // Silent error - hydration will retry or show partial results
+      })
     } catch (error) {
-      console.error('[bookmark] ❌ Failed to build bookmarks:', error)
-      console.error('[bookmark] ❌ Error details:', error instanceof Error ? error.message : String(error))
-      console.error('[bookmark] ❌ Stack:', error instanceof Error ? error.stack : 'no stack')
+      console.error('Failed to build bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
     }
   }
@@ -352,11 +412,15 @@ class BookmarkController {
     relayPool: RelayPool
     activeAccount: unknown
     accountManager: { getActive: () => unknown }
+    eventStore?: EventStore
   }): Promise<void> {
-    const { relayPool, activeAccount, accountManager } = options
+    const { relayPool, activeAccount, accountManager, eventStore } = options
+    
+    // Store references for hydration
+    this.relayPool = relayPool
+    this.externalEventStore = eventStore || null
 
     if (!activeAccount || typeof (activeAccount as { pubkey?: string }).pubkey !== 'string') {
-      console.error('[bookmark] Invalid activeAccount')
       return
     }
 
@@ -365,19 +429,7 @@ class BookmarkController {
     // Increment generation to cancel any in-flight hydration
     this.hydrationGeneration++
     
-    // Initialize loaders for this session
-    console.log('[bookmark] 🔧 Initializing EventLoader and AddressLoader with', RELAYS.length, 'relays')
-    this.eventLoader = createEventLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS 
-    })
-    this.addressLoader = createAddressLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS
-    })
-    
     this.setLoading(true)
-    console.log('[bookmark] 🔍 Starting bookmark load for', account.pubkey.slice(0, 8))
 
     try {
       // Get signer for auto-decryption
@@ -405,7 +457,6 @@ class BookmarkController {
             
             // Add/update event
             this.currentEvents.set(key, evt)
-            console.log('[bookmark] 📨 Event:', evt.kind, evt.id.slice(0, 8), 'encrypted:', hasEncryptedContent(evt))
             
             // Emit raw event for Debug UI
             this.emitRawEvent(evt)
@@ -415,12 +466,13 @@ class BookmarkController {
             if (!isEncrypted) {
               // For unencrypted events, build bookmarks immediately (progressive update)
               this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-                .catch(err => console.error('[bookmark] ❌ Failed to update after event:', err))
+                .catch(() => {
+                  // Silent error - will retry on next event
+                })
             }
             
             // Auto-decrypt if event has encrypted content (fire-and-forget, non-blocking)
             if (isEncrypted) {
-              console.log('[bookmark] 🔓 Auto-decrypting event', evt.id.slice(0, 8))
               // Don't await - let it run in background
               collectBookmarksFromEvents([evt], account, signerCandidate)
                 .then(({ publicItemsAll, privateItemsAll, newestCreatedAt, latestContent, allTags }) => {
@@ -433,10 +485,6 @@ class BookmarkController {
                     latestContent,
                     allTags
                   })
-                  console.log('[bookmark] ✅ Auto-decrypted:', evt.id.slice(0, 8), {
-                    public: publicItemsAll.length,
-                    private: privateItemsAll.length
-                  })
                   
                   // Emit decrypt complete for Debug UI
                   this.decryptCompleteListeners.forEach(cb => 
@@ -445,10 +493,12 @@ class BookmarkController {
                   
                   // Rebuild bookmarks with newly decrypted content (progressive update)
                   this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-                    .catch(err => console.error('[bookmark] ❌ Failed to update after decrypt:', err))
+                    .catch(() => {
+                      // Silent error - will retry on next event
+                    })
                 })
-                .catch((error) => {
-                  console.error('[bookmark] ❌ Auto-decrypt failed:', evt.id.slice(0, 8), error)
+                .catch(() => {
+                  // Silent error - decrypt failed
                 })
             }
           }
@@ -457,9 +507,8 @@ class BookmarkController {
 
       // Final update after EOSE
       await this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-      console.log('[bookmark] ✅ Bookmark load complete')
     } catch (error) {
-      console.error('[bookmark] ❌ Failed to load bookmarks:', error)
+      console.error('Failed to load bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
     } finally {
       this.setLoading(false)

src/services/bookmarkEvents.ts

@@ -15,28 +15,30 @@ export function dedupeNip51Events(events: NostrEvent[]): NostrEvent[] {
   }
   const unique = Array.from(byId.values())
 
-  // Separate web bookmarks (kind:39701) from list-based bookmarks
-  const webBookmarks = unique.filter(e => e.kind === 39701)
-
   const bookmarkLists = unique
     .filter(e => e.kind === 10003 || e.kind === 30003 || e.kind === 30001)
     .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
   const latestBookmarkList = bookmarkLists.find(list => !list.tags?.some((t: string[]) => t[0] === 'd'))
 
+  // Deduplicate replaceable events (kind:30003, 30001, 39701) by d-tag
   const byD = new Map<string, NostrEvent>()
   for (const e of unique) {
-    if (e.kind === 10003 || e.kind === 30003 || e.kind === 30001) {
+    if (e.kind === 10003 || e.kind === 30003 || e.kind === 30001 || e.kind === 39701) {
       const d = (e.tags || []).find((t: string[]) => t[0] === 'd')?.[1] || ''
       const prev = byD.get(d)
       if (!prev || (e.created_at || 0) > (prev.created_at || 0)) byD.set(d, e)
     }
   }
 
-  const setsAndNamedLists = Array.from(byD.values())
+  // Separate web bookmarks from bookmark sets/lists
+  const allReplaceable = Array.from(byD.values())
+  const webBookmarks = allReplaceable.filter(e => e.kind === 39701)
+  const setsAndNamedLists = allReplaceable.filter(e => e.kind !== 39701)
+  
   const out: NostrEvent[] = []
   if (latestBookmarkList) out.push(latestBookmarkList)
   out.push(...setsAndNamedLists)
-  // Add web bookmarks as individual events
+  // Add deduplicated web bookmarks as individual events
   out.push(...webBookmarks)
   return out
 }