Merge pull request #50 from dergigi/fathom

Add Fathom script

.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
+# Nostr configuration for publish-markdown.sh script
-# This should be a valid naddr1... string (NIP-19 encoded address pointer to a kind:30023 long-form article)
+# Copy this file to .env and fill in your values
-VITE_DEFAULT_ARTICLE_NADDR=naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew
+
+# 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

@@ -40,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,207 +1,13 @@
 import type { VercelRequest, VercelResponse } from '@vercel/node'
-import { RelayPool } from 'applesauce-relay'
+import { getArticleMeta, setArticleMeta } from './services/ogStore.js'
-import { nip19 } from 'nostr-tools'
+import { fetchArticleMetadataViaRelays } from './services/articleMeta.js'
-import { AddressPointer } from 'nostr-tools/nip19'
+import { generateHtml } from './services/ogHtml.js'
-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://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;')
-}
 
 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()
   
@@ -209,89 +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) {
     res.setHeader('X-Boris-Debug', '1')
   }
 
-  // If it's a regular browser (not a bot), serve HTML that loads SPA
+  // Try Redis cache first
-  // Use history.replaceState to set the URL before the SPA boots
+  let meta = await getArticleMeta(naddr).catch((err) => {
-  if (!isCrawlerRequest) {
+    console.error('Failed to get article meta from Redis:', err)
-    const articlePath = `/a/${naddr}`
+    return null
-    // Serve a minimal HTML that sets up the URL and loads the SPA
+  })
-    const html = `<!DOCTYPE html>
+  let cacheMaxAge = 86400
-<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}');
-    }
-  </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')
+  if (!meta) {
-    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
+    // Cache miss: fetch from relays (let it use its natural timeouts)
-    if (debugEnabled) {
+    try {
-      // Debug mode enabled
+      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
     }
-    return res.status(200).send(html)
   }
 
-  // Check cache for bots/crawlers
+  // Generate and send HTML
-  const now = Date.now()
+  const html = generateHtml(naddr, meta)
-  const cached = memoryCache.get(naddr)
+  setCacheHeaders(res, cacheMaxAge)
-  if (cached && cached.expires > now) {
+  
-    setCacheHeaders(res)
+  if (debugEnabled) {
-    if (debugEnabled) {
+    // Debug mode enabled
-      // Debug mode enabled
-    }
-    return res.status(200).send(cached.html)
   }
   
-  try {
+  return res.status(200).send(html)
-    // 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) {
-      // Debug mode enabled
-    }
-    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) {
-      // 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
+      // Fetch basic metadata from YouTube page
-      const title = ''
+      let title = ''
-      const description = ''
+      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
+    // Fetch basic metadata from YouTube page
-    // In a real implementation, you might want to use YouTube's API or other methods
+    let title = ''
-    const title = '' // Will be populated from captions or other sources
+    let description = ''
-    const 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,10 +24,13 @@
     <!-- 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" />
 
+    <!-- Fathom -->
+    <script src="https://cdn.usefathom.com/script.js" data-site="LLSGRVAP" defer></script>
+
     <!-- Default to system theme until settings load from Nostr -->
     <script>
       document.documentElement.className = 'theme-system';

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.10.5",
+  "version": "0.10.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.10.5",
+      "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",
@@ -36,12 +38,14 @@
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
         "tinyld": "^1.3.4",
-        "use-pull-to-refresh": "^2.4.1"
+        "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",
@@ -55,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": {
@@ -101,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",
@@ -2261,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"
       },
@@ -3552,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"
@@ -3594,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",
@@ -3636,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",
@@ -3798,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",
@@ -3926,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",
@@ -4011,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"
@@ -4087,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"
       },
@@ -4502,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",
@@ -4630,6 +4672,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -5866,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",
@@ -6171,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",
@@ -6264,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",
@@ -6896,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",
@@ -9655,6 +9745,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -9801,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"
       },
@@ -9813,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"
@@ -10378,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"
       }
@@ -11133,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",
@@ -11209,6 +11304,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11461,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"
@@ -11488,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",
@@ -11504,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",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
@@ -11786,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",
@@ -12171,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",
@@ -12215,6 +12319,7 @@
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -12463,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.10.6",
+  "version": "0.11.1",
   "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",
@@ -39,12 +45,14 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "tinyld": "^1.3.4",
-    "use-pull-to-refresh": "^2.4.1"
+    "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",
@@ -96,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": "/",

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

@@ -21,7 +21,7 @@ import { useOnlineStatus } from './hooks/useOnlineStatus'
 import { RELAYS } from './config/relays'
 import { SkeletonThemeProvider } from './components/Skeletons'
 import { loadUserRelayList, loadBlockedRelays, computeRelaySet } from './services/relayListService'
-import { applyRelaySetToPool, getActiveRelayUrls, ALWAYS_LOCAL_RELAYS } from './services/relayManager'
+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'
@@ -95,7 +95,7 @@ function AppRoutes({
       
       // Load bookmarks
       if (bookmarks.length === 0 && !bookmarksLoading) {
-        bookmarkController.start({ relayPool, activeAccount, accountManager })
+        bookmarkController.start({ relayPool, activeAccount, accountManager, eventStore: eventStore || undefined })
       }
       
       // Load contacts
@@ -237,11 +237,11 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me" 
+        path="/my" 
-        element={<Navigate to="/me/highlights" replace />} 
+        element={<Navigate to="/my/highlights" replace />} 
       />
       <Route 
-        path="/me/highlights" 
+        path="/my/highlights" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -253,7 +253,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reading-list" 
+        path="/my/bookmarks" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -265,7 +265,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reads" 
+        path="/my/reads" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -277,7 +277,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/reads/:filter" 
+        path="/my/reads/:filter" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -289,7 +289,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/links" 
+        path="/my/links" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -301,7 +301,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/links/:filter" 
+        path="/my/links/:filter" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -313,7 +313,7 @@ function AppRoutes({
         } 
       />
       <Route 
-        path="/me/writings" 
+        path="/my/writings" 
         element={
           <Bookmarks 
             relayPool={relayPool}
@@ -348,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={
@@ -564,10 +576,33 @@ function App() {
               }
             })
       
+      // Helper to update keep-alive subscription based on current active relays
+      const updateKeepAlive = (relayUrls?: string[]) => {
+        const poolWithSub = pool as unknown as { _keepAliveSubscription?: { unsubscribe: () => void } }
+        if (poolWithSub._keepAliveSubscription) {
+          poolWithSub._keepAliveSubscription.unsubscribe()
+        }
+        const targetRelays = relayUrls || getActiveRelayUrls(pool)
+        const newKeepAliveSub = pool.subscription(targetRelays, { kinds: [0], limit: 0 }).subscribe({
+          next: () => {},
+          error: () => {}
+        })
+        poolWithSub._keepAliveSubscription = newKeepAliveSub
+      }
+
+      // Helper to update address loader based on current active relays
+      const updateAddressLoader = (relayUrls?: string[]) => {
+        const targetRelays = relayUrls || getActiveRelayUrls(pool)
+        const addressLoader = createAddressLoader(pool, {
+          eventStore: store,
+          lookupRelays: targetRelays
+        })
+        store.addressableLoader = addressLoader
+        store.replaceableLoader = addressLoader
+      }
+
       // Handle user relay list and blocked relays when account changes
       const userRelaysSub = accounts.active$.subscribe((account) => {
-        console.log('[relay-init] userRelaysSub fired, account:', account ? 'logged in' : 'logged out')
-        console.log('[relay-init] Pool has', Array.from(pool.relays.keys()).length, 'relays before applying changes')
         if (account) {
           // User logged in - start with hardcoded relays immediately, then stream user relay list updates
           const pubkey = account.pubkey
@@ -594,20 +629,6 @@ function App() {
           // 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)
 
@@ -615,7 +636,7 @@ function App() {
           loadUserRelayList(pool, pubkey, {
             onUpdate: (userRelays) => {
               const interimRelays = computeRelaySet({
-                hardcoded: [],
+                hardcoded: HARDCODED_RELAYS,
                 bunker: bunkerRelays,
                 userList: userRelays,
                 blocked: [],
@@ -629,7 +650,7 @@ function App() {
             const blockedRelays = await blockedPromise.catch(() => [])
 
             const finalRelays = computeRelaySet({
-              hardcoded: userRelayList.length > 0 ? [] : RELAYS,
+              hardcoded: userRelayList.length > 0 ? HARDCODED_RELAYS : RELAYS,
               bunker: bunkerRelays,
               userList: userRelayList,
               blocked: blockedRelays,
@@ -639,43 +660,16 @@ function App() {
             applyRelaySetToPool(pool, finalRelays)
             
             updateKeepAlive()
-            
+            updateAddressLoader()
-            // 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)
-          
+          updateKeepAlive(RELAYS)
-          
+          updateAddressLoader(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
         }
       })
       
@@ -745,6 +739,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
+// Helper to extract tags from OpenGraph data
-function extractMetaTag(html: string, patterns: string[]): string | null {
+function extractTagsFromOgData(ogData: Record<string, unknown>): string[] {
-  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[] {
   const tags: string[] = []
   
-  // Extract keywords meta tag
+  // Extract keywords from OpenGraph data
-  const keywords = extractMetaTag(html, [
+  if (ogData.keywords && typeof ogData.keywords === 'string') {
-    '<meta\\s+name=["\'"]keywords["\'"]\\s+content=["\'"]([^"\']+)["\']'
+    ogData.keywords.split(/[,;]/)
-  ])
+      .map((k: string) => k.trim().toLowerCase())
-  if (keywords) {
+      .filter((k: string) => k.length > 0 && k.length < 30)
-    keywords.split(/[,;]/)
+      .forEach((k: string) => tags.push(k))
-      .map(k => k.trim().toLowerCase())
-      .filter(k => k.length > 0 && k.length < 30)
-      .forEach(k => tags.push(k))
   }
   
-  // Extract article:tag (multiple possible)
+  // Extract article:tag from OpenGraph data
-  const articleTagRegex = /<meta\s+property=["']article:tag["']\s+content=["']([^"']+)["']/gi
+  if (ogData['article:tag']) {
-  let match
+    const articleTagValue = ogData['article:tag']
-  while ((match = articleTagRegex.exec(html)) !== null) {
+    const articleTags = Array.isArray(articleTagValue) 
-    const tag = match[1].trim().toLowerCase()
+      ? articleTagValue 
-    if (tag && tag.length < 30) tags.push(tag)
+      : [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)
+        // Fetch both readable content and OpenGraph data in parallel
-        lastFetchedUrlRef.current = normalizedUrl
+        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>
+        // Extract title: prioritize og:title > twitter:title > content.title
-        if (!title && content.html) {
+        if (!title) {
-          const extractedTitle = extractMetaTag(content.html, [
+          let extractedTitle = null
-            '<meta\\s+property=["\'"]og:title["\'"]\\s+content=["\'"]([^"\']+)["\']',
+          
-            '<meta\\s+name=["\'"]twitter:title["\'"]\\s+content=["\'"]([^"\']+)["\']'
+          if (ogData) {
-          ]) || content.title
+            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) {
+        if (!description && ogData) {
-          const extractedDesc = extractMetaTag(content.html, [
+          const extractedDesc = ogData['og:description'] || ogData['twitter:description'] || ogData.description
-            '<meta\\s+property=["\'"]og:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]twitter:description["\'"]\\s+content=["\'"]([^"\']+)["\']',
-            '<meta\\s+name=["\'"]description["\'"]\\s+content=["\'"]([^"\']+)["\']'
-          ])
           
           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) {
+        if (!tagsInput && ogData) {
-          const extractedTags = extractTags(content.html)
+          const extractedTags = extractTagsFromOgData(ogData)
           
           // Only add boris tag if we extracted something
           if (extractedAnything || extractedTags.length > 0) {

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
+    return getProfileDisplayName(profile, authorPubkey)
-    if (profile?.display_name) return profile.display_name
-    return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
   }
   
   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

@@ -7,6 +7,7 @@ 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
@@ -18,8 +19,13 @@ interface BlogPostCardProps {
 
 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
@@ -47,9 +53,23 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
     // Reading progress display
   }
 
+  // Build article coordinate for navigation state (kind:pubkey:dTag)
+  const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+  const articleCoordinate = dTag ? `${post.event.kind}:${post.author}:${dTag}` : undefined
+
   return (
     <Link 
       to={href}
+      state={{ 
+        previewData: {
+          title: post.title,
+          image: post.image,
+          summary: post.summary,
+          published: post.published
+        },
+        articleCoordinate,
+        eventId: post.event.id
+      }}
       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'
@@ -23,6 +25,7 @@ interface BookmarkItemProps {
 }
 
 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)}`
@@ -40,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
   
@@ -58,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
+    const displayName = getProfileDisplayName(authorProfile, bookmark.pubkey)
-    if (authorProfile?.display_name) return authorProfile.display_name
+    // getProfileDisplayName returns npub format for fallback, but we want short pubkey format
-    if (authorProfile?.nip05) return authorProfile.nip05
+    // So check if it's the fallback format and use short() instead
-    return short(bookmark.pubkey) // fallback to short pubkey
+    if (displayName.startsWith('@') && displayName.includes('...')) {
+      return short(bookmark.pubkey)
+    }
+    return displayName
   }
 
   // Get content type icon based on bookmark kind and URL classification
@@ -110,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) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
-        onSelectUrl('', { id: bookmark.id, kind: bookmark.kind, tags: bookmark.tags, pubkey: bookmark.pubkey })
+      if (dTag) {
+        const naddr = naddrEncode({
+          kind: bookmark.kind,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        navigate(`/a/${naddr}`)
       }
       return
     }
@@ -135,7 +146,6 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     extractedUrls,
     onSelectUrl,
     authorNpub,
-    eventNevent,
     getAuthorDisplayName,
     handleReadNow,
     articleImage,
@@ -151,11 +161,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       hasUrls,
       extractedUrls,
       onSelectUrl,
-      authorNpub,
+      articleTitle,
-      eventNevent,
-      getAuthorDisplayName,
-      handleReadNow,
-      articleSummary,
       contentTypeIcon: getContentTypeIcon(),
       readingProgress
     }
@@ -167,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 { faChevronLeft, faBookmark, faList, faThLarge, faImage, faHeart, faPlus, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
-import { formatDistanceToNow } from 'date-fns'
+import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
@@ -13,7 +13,7 @@ import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
-import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet, hasCreationDate } 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'
@@ -58,7 +58,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   onOpenSettings,
   onRefresh,
   isRefreshing,
-  lastFetchTime,
   loading = false,
   relayPool,
   isMobile = false,
@@ -71,7 +70,7 @@ 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())
@@ -106,7 +105,18 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         return undefined
       }
     }
-    // For web bookmarks and other types, try to use URL if available
+    
+    // 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])
@@ -120,6 +130,18 @@ 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')
@@ -140,39 +162,58 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     isDisabled: !onRefresh
   })
 
-  // Merge and flatten all individual bookmarks from all lists
+  // Merge and flatten all individual bookmarks from all lists - memoized to ensure consistent sorting
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+  const sections = useMemo(() => {
-    .filter(hasContent)
+    const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
-    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
+      .filter(hasContent)
+      .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
     
-  // Apply filter
+    // Apply filter
-  const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
+    const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
     
-  // Separate bookmarks with setName (kind 30003) from regular bookmarks
+    // Separate bookmarks with setName (kind 30003) from regular bookmarks
-  const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
+    const bookmarksWithoutSet = getBookmarksWithoutSet(filteredBookmarks)
-  const bookmarkSets = getBookmarkSets(filteredBookmarks)
+    const bookmarkSets = getBookmarkSets(filteredBookmarks)
     
-  // Group non-set bookmarks by source or flatten based on mode
+    // Group non-set bookmarks by source or flatten based on mode
-  const groups = groupIndividualBookmarks(bookmarksWithoutSet)
+    const groups = groupIndividualBookmarks(bookmarksWithoutSet)
-  const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
+    const sectionsArray: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
-    groupingMode === 'flat'
+      groupingMode === 'flat'
-      ? [{ key: 'all', title: `All Bookmarks (${bookmarksWithoutSet.length})`, items: bookmarksWithoutSet }]
+        ? [{ key: 'all', title: getFilterTitle(selectedFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
-      : [
+        : [
-          { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
+            { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb },
-          { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
+            { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
-          { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+            { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
+            { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
-          { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
+            { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic }
-        ]
+          ]
     
-  // Add bookmark sets as additional sections
+    // Add bookmark sets as additional sections (only in grouped mode)
-  bookmarkSets.forEach(set => {
+    if (groupingMode === 'grouped') {
-    sections.push({
+      bookmarkSets.forEach(set => {
-      key: `set-${set.name}`,
+        sectionsArray.push({
-      title: set.title || set.name,
+          key: `set-${set.name}`,
-      items: set.bookmarks
+          title: set.title || set.name,
-    })
+          items: set.bookmarks
-  })
+        })
+      })
+    }
+    
+    return sectionsArray
+  }, [bookmarks, selectedFilter, groupingMode, settings?.hideBookmarksWithoutCreationDate])
+  
+  // 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]
+  )
+  
+  const filteredBookmarks = useMemo(() => 
+    filterBookmarksByType(allIndividualBookmarks, selectedFilter),
+    [allIndividualBookmarks, selectedFilter]
+  )
   
   if (isCollapsed) {
     // Check if the selected URL is in bookmarks
@@ -206,10 +247,19 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       />
       
       {allIndividualBookmarks.length > 0 && (
-        <BookmarkFilters
+        <div className="bookmark-filters-wrapper">
-          selectedFilter={selectedFilter}
+          <BookmarkFilters
-          onFilterChange={setSelectedFilter}
+            selectedFilter={selectedFilter}
-        />
+            onFilterChange={setSelectedFilter}
+          />
+          <CompactButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add web bookmark"
+            ariaLabel="Add web bookmark"
+            className="bookmark-section-action"
+          />
+        </div>
       )}
       
       {!activeAccount ? (
@@ -246,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) => (
@@ -282,27 +323,18 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
             variant="ghost"
             style={{ color: friendsColor }}
           />
-        </div>
+          {activeAccount && (
-        {activeAccount && (
-          <div className="view-mode-right">
             <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"
             />
-            {onRefresh && (
+          )}
-              <IconButton
+        </div>
-                icon={faRotate}
+        {activeAccount && (
-                onClick={onRefresh}
+          <div className="view-mode-right">
-                title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
-                ariaLabel="Refresh bookmarks"
-                variant="ghost"
-                disabled={isRefreshing}
-                spin={isRefreshing}
-              />
-            )}
             <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 { faLink } from '@fortawesome/free-solid-svg-icons'
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+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 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,11 @@ 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
 }
 
@@ -32,14 +33,12 @@ 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
@@ -47,21 +46,41 @@ export const CardView: React.FC<CardViewProps> = ({
   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
   
-  // Calculate progress color (matching BlogPostCard logic)
+  // Extract title from tags for regular bookmarks (not just articles)
-  let progressColor = '#6366f1' // Default blue (reading)
+  const bookmarkTitle = bookmark.tags.find(t => t[0] === 'title')?.[1]
-  if (readingProgress && readingProgress >= 0.95) {
+  
-    progressColor = '#10b981' // Green (completed)
+  // Get content type icon based on bookmark kind and URL classification
-  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+  const getContentTypeIcon = () => {
-    progressColor = 'var(--color-text)' // Neutral text color (started)
+    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
   const cachedImage = useImageCache(previewImage || undefined)
@@ -73,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) => {
@@ -82,127 +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="card-layout">
-        <div 
+        <div className="card-content">
-          className="article-hero-image"
+          <div className="card-content-header">
-          style={{ backgroundImage: `url(${cachedImage})` }}
+            {(cachedImage || firstUrl) && (
-          onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
+              <div 
-        />
+                className="card-thumbnail"
-      )}
+                style={cachedImage ? { backgroundImage: `url(${cachedImage})` } : undefined}
-      <div className="bookmark-header">
+                onClick={() => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)}
-        <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"
               >
-                {url}
+            {!cachedImage && firstUrl && (
-              </button>
+              <div className="thumbnail-placeholder">
-            )
+                <FontAwesomeIcon icon={getContentTypeIcon()} />
-          })}
+              </div>
-          {extractedUrls.length > 1 && (
+            )}
-            <button
+              </div>
-              className="expand-toggle-urls"
+            )}
-              onClick={(e) => { e.stopPropagation(); setUrlsExpanded(v => !v) }}
+            <div className="card-text-content">
-              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+        <div className="bookmark-header">
-              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+        </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`}
+              {getAuthorDisplayName()}
-            </button>
+            </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 ? (
-        <RichContent content={articleSummary} className="bookmark-content article-summary" />
-      ) : bookmark.parsedContent ? (
-        <div className="bookmark-content">
-          {shouldTruncate && bookmark.content
-            ? <RichContent content={`${bookmark.content.slice(0, 210).trimEnd()}…`} className="" />
-            : renderParsedContent(bookmark.parsedContent)}
-        </div>
-      ) : bookmark.content && (
-        <RichContent content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-      )}
-
-      {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>
-      )}
-      
-      {/* Reading progress indicator for articles */}
-      {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: `${Math.round(readingProgress * 100)}%`,
-              background: progressColor,
-              transition: 'width 0.3s ease, background 0.3s ease'
-            }}
-          />
-        </div>
-      )}
-      
-      <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 RichContent from '../RichContent'
+import { naddrEncode } from 'nostr-tools/nip19'
+import { ReadingProgressBar } from '../ReadingProgressBar'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -11,7 +14,7 @@ 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
 }
@@ -22,37 +25,37 @@ export const CompactView: React.FC<CompactViewProps> = ({
   hasUrls,
   extractedUrls,
   onSelectUrl,
-  articleSummary,
+  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
 
-  // Calculate progress color (matching BlogPostCard logic)
-  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 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 
@@ -64,36 +67,26 @@ 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">
             <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 for all bookmark types with reading data */}
+      {/* Reading progress indicator - only show when there's actual progress */}
       {readingProgress !== undefined && readingProgress > 0 && (
-        <div 
+        <ReadingProgressBar 
-          style={{
+          readingProgress={readingProgress}
-            height: '1px',
+          height={1}
-            width: '100%',
+          marginLeft="1.5rem"
-            background: 'var(--color-border)',
+        />
-            overflow: 'hidden',
-            margin: '0',
-            marginLeft: '1.5rem'
-          }}
-        >
-          <div
-            style={{
-              height: '100%',
-              width: `${Math.round(readingProgress * 100)}%`,
-              background: progressColor,
-              transition: 'width 0.3s ease, background 0.3s ease'
-            }}
-          />
-        </div>
       )}
     </div>
   )

src/components/BookmarkViews/LargeView.tsx

@@ -7,7 +7,8 @@ import { formatDate } from '../../utils/bookmarkUtils'
 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}`} 
@@ -100,27 +114,12 @@ export const LargeView: React.FC<LargeViewProps> = ({
           <RichContent content={bookmark.content} className="large-text" />
         )}
         
-        {/* Reading progress indicator for articles - shown only if there's progress */}
+        {/* Reading progress indicator for all bookmark types - always shown */}
-        {isArticle && readingProgress !== undefined && readingProgress > 0 && (
+        <ReadingProgressBar 
-          <div 
+          readingProgress={readingProgress}
-            style={{
+          height={3}
-              height: '3px',
+          marginTop="0.75rem"
-              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>
-        )}
         
         <div className="large-footer">
           <span className="bookmark-type-large">
@@ -136,16 +135,17 @@ export const LargeView: React.FC<LargeViewProps> = ({
             </Link>
           </span>
           
-          {eventNevent && (
+          {getInternalRoute() ? (
-            <a
+            <Link
-              href={getEventUrl(eventNevent)}
+              to={getInternalRoute()!}
-              target="_blank"
-              rel="noopener noreferrer"
               className="bookmark-date-link"
+              title="Open in app"
               onClick={(e) => e.stopPropagation()}
             >
-              {formatDate(bookmark.created_at)}
+              {formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
-            </a>
+            </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,6 +16,8 @@ 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'
@@ -38,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>()
@@ -52,46 +57,60 @@ 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' : 
+  const meTab = location.pathname === '/my' ? 'highlights' : 
-                location.pathname === '/me/highlights' ? 'highlights' :
+                location.pathname === '/my/highlights' ? 'highlights' :
-                location.pathname === '/me/reading-list' ? 'reading-list' :
+                location.pathname === '/my/bookmarks' ? 'bookmarks' :
-                location.pathname.startsWith('/me/reads') ? 'reads' :
+                location.pathname.startsWith('/my/reads') ? 'reads' :
-                location.pathname.startsWith('/me/links') ? 'links' :
+                location.pathname.startsWith('/my/links') ? 'links' :
-                location.pathname === '/me/writings' ? 'writings' : 'highlights'
+                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 = getPubkeyFromDecodeResult(decoded)
-        profilePubkey = decoded.data
-      } else if (decoded.type === 'nprofile') {
-        profilePubkey = decoded.data.pubkey
-      }
     } 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()
   const eventStore = useEventStore()
@@ -220,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,
@@ -242,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,
@@ -255,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)

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,5 +1,4 @@
 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'
@@ -13,6 +12,8 @@ import { nip19 } from 'nostr-tools'
 import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
 import { RelayPool } from 'applesauce-relay'
 import { getActiveRelayUrls } from '../services/relayManager'
+import { isContentRelay } from '../config/relays'
+import { isLocalRelay } from '../utils/helpers'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
@@ -34,18 +35,16 @@ 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 { shouldTrackReadingProgress } from '../utils/helpers'
-import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
-import { buildNativeVideoUrl } from '../utils/videoHelpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
 import { EventFactory } from 'applesauce-factory'
 import { Hooks } from 'applesauce-react'
 import { 
   generateArticleIdentifier, 
-  loadReadingPosition, 
   saveReadingPosition
 } from '../services/readingPositionService'
+import { readingProgressController } from '../services/readingProgressController'
 import TTSControls from './TTSControls'
 
 interface ContentPanelProps {
@@ -76,6 +75,7 @@ interface ContentPanelProps {
   // For reading progress indicator positioning
   isSidebarCollapsed?: boolean
   isHighlightsCollapsed?: boolean
+  onOpenHighlights?: () => void
 }
 
 const ContentPanel: React.FC<ContentPanelProps> = ({ 
@@ -103,21 +103,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({
@@ -132,8 +129,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,
@@ -143,8 +145,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
+  // Reading position tracking - only for text content that's loaded and long enough
-  const isTextContent = !loading && !!(markdown || html) && !selectedUrl?.includes('youtube') && !selectedUrl?.includes('vimeo')
+  // 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(() => {
@@ -152,6 +164,14 @@ 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) {
@@ -162,7 +182,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     }
     
     // Check if content is long enough to track reading progress
-    if (!shouldTrackReadingProgress(html, markdown)) {
+    if (!shouldTrackReadingProgress(htmlRef.current, markdownRef.current)) {
       return
     }
 
@@ -182,12 +202,39 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         }
       )
     } catch (error) {
-      console.error('[progress] ❌ ContentPanel: Failed to save reading position:', error)
+      console.error('[reading-position] Failed to save reading position:', error)
     }
-  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, html, markdown])
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition])
 
-  const { progressPercentage, saveNow } = useReadingPosition({
+  // Delay enabling position tracking to ensure content is stable
-    enabled: isTextContent,
+  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: () => {
@@ -207,59 +254,99 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   useEffect(() => {
   }, [isTextContent, settings?.syncReadingPosition, activeAccount, relayPool, eventStore, articleIdentifier, progressPercentage])
 
-  // Load saved reading position when article loads
+  // Load saved reading position when article loads (using pre-loaded data from controller)
+  const suppressSavesForRef = useRef(suppressSavesFor)
   useEffect(() => {
-    if (!isTextContent || !activeAccount || !relayPool || !eventStore || !articleIdentifier) {
+    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 === false) {
       return
     }
+    if (settings?.autoScrollToReadingPosition === false) {
+      return
+    }
+    if (!isTrackingEnabled) {
+      return
+    }
 
-    const loadPosition = async () => {
+    // Only attempt restore once per article (after tracking is enabled)
-      try {
+    if (hasAttemptedRestoreRef.current === restoreKey) {
-        const savedPosition = await loadReadingPosition(
+      return
-          relayPool,
+    }
-          eventStore,
-          activeAccount.pubkey,
-          articleIdentifier
-        )
 
-        if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 1) {
+    // Mark as attempted using composite key
-          // Wait for content to be fully rendered before scrolling
+    hasAttemptedRestoreRef.current = restoreKey
-          setTimeout(() => {
-            const documentHeight = document.documentElement.scrollHeight
-            const windowHeight = window.innerHeight
-            const scrollTop = savedPosition.position * (documentHeight - windowHeight)
     
-            window.scrollTo({
+    // Get the saved position from the controller (already loaded and displayed on card)
-              top: scrollTop,
+    const savedProgress = readingProgressController.getProgress(articleIdentifier)
-              behavior: 'smooth'
+    
-            })
+    if (!savedProgress || savedProgress <= 0.05 || savedProgress >= 1) {
-          }, 500) // Give content time to render
+      return
-        } else if (savedPosition) {
+    }
-          if (savedPosition.position === 1) {
+
-            // Article was completed, start from top
+    // Suppress saves during restore (500ms render + 1000ms smooth scroll = 1500ms)
-          } else {
+    if (suppressSavesForRef.current) {
-            // Position was too early, skip restore
+      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) {
+        return
-        console.error('❌ [ContentPanel] Failed to load reading position:', error)
       }
-    }
 
-    loadPosition()
+      // Perform smooth animated restore
-  }, [isTextContent, activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+      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
+  // Note: We intentionally do NOT save on unmount because:
-  useEffect(() => {
+  // 1. Browser may scroll to top during back navigation, causing 0% saves
-    return () => {
+  // 2. The auto-save with 1s throttle already captures position during reading
-      if (saveNow) {
+  // 3. Position state may not reflect actual reading position during navigation
-        saveNow()
-      }
-    }
-  }, [saveNow, selectedUrl])
 
   // Close menu when clicking outside
   useEffect(() => {
@@ -268,21 +355,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(() => {
@@ -305,13 +389,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 || ''
@@ -343,34 +424,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   // 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
@@ -379,9 +434,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
     const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
     const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
-    const relayHints = activeRelays.filter(r => 
+    const relayHints = activeRelays
-      !r.includes('localhost') && !r.includes('127.0.0.1')
+      .filter(url => !isLocalRelay(url))
-    ).slice(0, 3)
+      .filter(url => isContentRelay(url))
+      .slice(0, 3)
 
     const naddr = nip19.naddrEncode({
       kind: 30023,
@@ -408,7 +464,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     setShowArticleMenu(!showArticleMenu)
   }
 
-  const toggleVideoMenu = () => setShowVideoMenu(v => !v)
 
   const handleOpenPortal = () => {
     if (articleLinks) {
@@ -485,52 +540,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)
@@ -572,7 +592,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)
   }
@@ -722,13 +748,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     )
   }
 
-  if (loading) {
-    return (
-      <div className="reader" aria-busy="true">
-        <ContentSkeleton />
-      </div>
-    )
-  }
 
   const highlightRgb = hexToRgb(highlightColor)
 
@@ -749,7 +768,7 @@ 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]}
@@ -768,134 +787,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}
       />
       {isTextContent && articleText && (
         <div style={{ padding: '0 0.75rem 0.5rem 0.75rem' }}>
           <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
         </div>
       )}
-      {isExternalVideo ? (
+      {loading || !markdown && !html ? (
-        <>
+        <div className="reader" aria-busy="true">
-          <div className="reader-video">
+          <ContentSkeleton />
-            <ReactPlayer 
+        </div>
-              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={isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
-                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
-              >
-                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
-                  spin={isCheckingReadStatus} 
-                />
-                <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Watched' : 'Mark as Watched'}
-                </span>
-              </button>
-            </div>
-          )}
-        </>
       ) : markdown || html ? (
         <>
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
               <VideoEmbedProcessor
+                key={`content:${contentKey}`}
                 ref={contentRef}
                 html={finalHtml}
-                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
                 className="reader-markdown"
-                onMouseUp={handleSelectionEnd}
-                onTouchEnd={handleSelectionEnd}
               />
             ) : (
               <div className="reader-markdown">
-                <div className="loading-spinner">
+                <ContentSkeleton />
-                  <FontAwesomeIcon icon={faSpinner} spin size="sm" />
-                </div>
               </div>
             )
           ) : (
             <VideoEmbedProcessor
+              key={`content:${contentKey}`}
               ref={contentRef}
               html={finalHtml || html || ''}
-              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true}
               className="reader-html"
-              onMouseUp={handleSelectionEnd}
-              onTouchEnd={handleSelectionEnd}
             />
           )}
           
           {/* Article menu for external URLs */}
-          {!isNostrArticle && !isExternalVideo && selectedUrl && (
+          {!isNostrArticle && selectedUrl && (
             <div className="article-menu-container">
               <div className="article-menu-wrapper" ref={externalMenuRef}>
                 <button
@@ -922,13 +862,16 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                       <FontAwesomeIcon icon={faCopy} />
                       <span>Copy URL</span>
                     </button>
-                    <button
+                    {/* Only show "Open Original" for actual external URLs, not nostr events */}
-                      className="article-menu-item"
+                    {!selectedUrl?.startsWith('nostr-event:') && (
-                      onClick={handleOpenExternalUrl}
+                      <button
-                    >
+                        className="article-menu-item"
-                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                        onClick={handleOpenExternalUrl}
-                      <span>Open Original</span>
+                      >
-                    </button>
+                        <FontAwesomeIcon icon={faExternalLinkAlt} />
+                        <span>Open Original</span>
+                      </button>
+                    )}
                     <button
                       className="article-menu-item"
                       onClick={handleSearchExternalUrl}
@@ -1043,11 +986,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
         </>
-      ) : (
+      ) : null}
-        <div className="reader empty">
-          <p>No readable content found for this URL.</p>
-        </div>
-      )}
       </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

@@ -651,7 +651,9 @@ const Debug: React.FC<DebugProps> = ({
               return timeB - timeA
             })
           })
-        }
+        },
+        100,
+        eventStore || undefined
       )
       
       setWritingPosts(posts)
@@ -779,9 +781,16 @@ const Debug: React.FC<DebugProps> = ({
         }
       })
 
-      // Load deduplicated results via controller
+      // 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

src/components/EventViewer.tsx

@@ -0,0 +1 @@
+

src/components/Explore.tsx

@@ -1,6 +1,6 @@
 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'
@@ -82,11 +82,28 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
 
   
   
-  // Visibility filters (defaults from settings or nostrverse when logged out)
+  // Visibility filters - load from localStorage first, fallback to settings
-  const [visibility, setVisibility] = useState<HighlightVisibility>({
+  const [visibility, setVisibility] = useState<HighlightVisibility>(() => {
-    nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
+    // Try to load from localStorage first
-    friends: settings?.defaultExploreScopeFriends ?? true,
+    try {
-    mine: settings?.defaultExploreScopeMine ?? false
+      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
@@ -96,6 +113,12 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       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
     })
   }, [])
@@ -224,18 +247,44 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
 
   // 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
-      setVisibility(prev => ({ ...prev, nostrverse: true, friends: false, mine: false }))
+      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
-      setVisibility({
+      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)
     }
@@ -314,7 +363,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         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) }
-    }).then((friendsPosts) => {
+    }, 100, eventStore).then((friendsPosts) => {
       setBlogPosts(prev => {
         const merged = dedupeWritingsByReplaceable([...prev, ...friendsPosts])
         if (activeAccount) setCachedPosts(activeAccount.pubkey, merged)
@@ -523,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)' }}>
+          <div className="explore-grid">
-            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+            {Array.from({ length: 6 }).map((_, i) => (
+              <BlogPostSkeleton key={i} />
+            ))}
           </div>
         ) : (
           <div className="explore-grid">
@@ -544,7 +595,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       case 'highlights':
         if (showSkeletons) {
           return (
-            <div className="explore-grid">
+            <div className="explore-grid single-column">
               {Array.from({ length: 8 }).map((_, i) => (
                 <HighlightSkeleton key={i} />
               ))}
@@ -556,7 +607,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
             <span>No highlights to show for the selected scope.</span>
           </div>
         ) : (
-          <div className="explore-grid">
+          <div className="explore-grid single-column">
             {classifiedHighlights.map((highlight) => (
               <HighlightItem
                 key={highlight.id}
@@ -584,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>
         
@@ -656,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
@@ -79,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

@@ -1,15 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faHighlighter, faTrash, faEllipsisH, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faHighlighter, faTrash, faEllipsisH, faMobileAlt, faUser } from '@fortawesome/free-solid-svg-icons'
 import { faComments } from '@fortawesome/free-regular-svg-icons'
 import { Highlight } from '../types/highlights'
 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 { onSyncStateChange, isEventSyncing, isEventOfflineCreated } from '../services/offlineSyncService'
-import { areAllRelaysLocal } from '../utils/helpers'
+import { areAllRelaysLocal, isLocalRelay } from '../utils/helpers'
 import { getActiveRelayUrls } from '../services/relayManager'
+import { isContentRelay, getContentRelays, getFallbackContentRelays } from '../config/relays'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
@@ -18,6 +19,7 @@ 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 => {
@@ -114,7 +116,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)
@@ -128,17 +129,9 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   
   // Get display name for the user
   const getUserDisplayName = () => {
-    if (profile?.name) return profile.name
+    return getProfileDisplayName(profile, highlight.pubkey)
-    if (profile?.display_name) return profile.display_name
-    return `${highlight.pubkey.slice(0, 8)}...` // fallback to short pubkey
   }
   
-  // Update offline indicator when highlight prop changes
-  useEffect(() => {
-    if (highlight.isOfflineCreated && !isSyncing) {
-      setShowOfflineIndicator(true)
-    }
-  }, [highlight.isOfflineCreated, isSyncing])
   
   // Listen to sync state changes
   useEffect(() => {
@@ -147,8 +140,6 @@ 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 && relayPool) {
             const updatedHighlight = {
@@ -189,14 +180,9 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }, [showMenu, showDeleteConfirm])
   
-  const handleItemClick = () => {
+  // Navigate to the article that this highlight references and scroll to the highlight
-    // If onHighlightClick is provided, use it (legacy behavior)
+  const navigateToArticle = () => {
-    if (onHighlightClick) {
+    // Always try to navigate if we have a reference - quote button should always work
-      onHighlightClick(highlight.id)
-      return
-    }
-    
-    // Otherwise, navigate to the article that this highlight references
     if (highlight.eventReference) {
       // Parse the event reference - it can be an event ID or article coordinate (kind:pubkey:identifier)
       const parts = highlight.eventReference.split(':')
@@ -212,22 +198,79 @@ 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 
+            } 
+          })
+          return
         }
       }
-    } else if (highlight.urlReference) {
+      // If eventReference is just an event ID (not a coordinate), we can't navigate to it
-      // Navigate to external URL
+      // as we don't have enough info to construct the article URL
-      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`)
     }
+    
+    if (highlight.urlReference) {
+      // Navigate to external URL with highlight ID to trigger scroll
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, {
+        state: {
+          highlightId: highlight.id,
+          openHighlights: true
+        }
+      })
+      return
+    }
+    
+    // If we get here, there's no valid reference to navigate to
+    // This shouldn't happen for valid highlights, but we'll log it for debugging
+    console.warn('Cannot navigate to article: highlight has no valid eventReference or urlReference', highlight.id)
+  }
+  
+  const handleItemClick = () => {
+    // If onHighlightClick is provided, use it (legacy behavior)
+    if (onHighlightClick) {
+      onHighlightClick(highlight.id)
+      return
+    }
+    
+    // Otherwise, navigate to the article that this highlight references
+    navigateToArticle()
   }
   
   const getHighlightLinks = () => {
     // Encode the highlight event itself (kind 9802) as a nevent
-    // Get non-local relays for the hint
+    // Relay hint selection priority:
-    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    // 1. Published relays (where we successfully published the event)
-    const relayHints = activeRelays.filter(r => 
+    // 2. Seen relays (where we observed the event)
-      !r.includes('localhost') && !r.includes('127.0.0.1')
+    // 3. Configured content relays (deterministic fallback)
-    ).slice(0, 3) // Include up to 3 relay hints
+    // All candidates are deduplicated, filtered to content-capable remote relays, and limited to 3
+    
+    const publishedRelays = highlight.publishedRelays || []
+    const seenOnRelays = highlight.seenOnRelays || []
+    
+    // Determine base candidates: prefer published, then seen, then configured relays
+    let candidates: string[]
+    if (publishedRelays.length > 0) {
+      // Prefer published relays, but include seen relays as backup
+      candidates = Array.from(new Set([...publishedRelays, ...seenOnRelays]))
+        .sort((a, b) => a.localeCompare(b))
+    } else if (seenOnRelays.length > 0) {
+      candidates = seenOnRelays
+    } else {
+      // Fallback to deterministic configured content relays
+      const contentRelays = getContentRelays()
+      const fallbackRelays = getFallbackContentRelays()
+      candidates = Array.from(new Set([...contentRelays, ...fallbackRelays]))
+    }
+    
+    // Filter to content-capable remote relays (exclude local and non-content relays)
+    // Then take up to 3 for relay hints
+    const relayHints = candidates
+      .filter(url => !isLocalRelay(url))
+      .filter(url => isContentRelay(url))
+      .slice(0, 3)
     
     const nevent = nip19.neventEncode({
       id: highlight.id,
@@ -281,9 +324,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         onHighlightUpdate(updatedHighlight)
       }
       
-      // Update local state
-      setShowOfflineIndicator(false)
-      
     } catch (error) {
       console.error('❌ Failed to rebroadcast:', error)
     } finally {
@@ -302,8 +342,37 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       }
     }
     
-    // Always show relay list, use plane icon for local-only
+    // Check if this highlight was only published to local relays
-    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
+    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) {
@@ -311,7 +380,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
       )
       return {
-        icon: isLocalOrOffline ? faPlane : faHighlighter,
+        icon: faHighlighter,
         tooltip: relayNames.join('\n'),
         spin: false
       }
@@ -407,6 +476,71 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     handleConfirmDelete()
   }
   
+  // Navigate to author's profile
+  const navigateToProfile = (tab?: 'highlights' | 'writings') => {
+    try {
+      const npub = nip19.npubEncode(highlight.pubkey)
+      const path = tab === 'writings' ? `/p/${npub}/writings` : `/p/${npub}`
+      navigate(path)
+    } catch (err) {
+      console.error('Failed to encode npub for profile navigation:', err)
+    }
+  }
+  
+  const handleAuthorClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    navigateToProfile()
+  }
+  
+  const handleMenuViewProfile = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(false)
+    navigateToProfile()
+  }
+  
+  const handleMenuGoToQuote = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setShowMenu(false)
+
+    if (onHighlightClick) {
+      onHighlightClick(highlight.id)
+    } else {
+      navigateToArticle()
+    }
+  }
+  
+  const renderHighlightText = () => {
+    const { content, context } = highlight
+    
+    if (context && context.length > 0) {
+      const index = context.indexOf(content)
+      
+      if (index >= 0) {
+        const before = context.slice(0, index)
+        const after = context.slice(index + content.length)
+        
+        return (
+          <>
+            {before}
+            <span className="highlight-core">{content}</span>
+            {after}
+          </>
+        )
+      }
+      
+      // Fallback: show context and the core highlight separately
+      return (
+        <>
+          <span className="highlight-context-prefix">{context}</span>
+          <br />
+          <span className="highlight-core">{content}</span>
+        </>
+      )
+    }
+    
+    return <span className="highlight-core">{content}</span>
+  }
+  
   return (
     <>
     <div 
@@ -422,7 +556,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)}
@@ -432,15 +590,37 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       <CompactButton
         className="highlight-quote-button"
         icon={faQuoteLeft}
-        title="Quote"
+        title="Go to quote in article"
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+
+          if (onHighlightClick) {
+            onHighlightClick(highlight.id)
+          } else {
+            navigateToArticle()
+          }
+        }}
       />
       
       {/* relay indicator lives in footer for consistent padding/alignment */}
       
       <div className="highlight-content">
-        <blockquote className="highlight-text">
+        <blockquote 
-          {highlight.content}
+          className="highlight-text"
+          onClick={(e) => {
+            e.stopPropagation()
+
+            if (onHighlightClick) {
+              onHighlightClick(highlight.id)
+            } else {
+              navigateToArticle()
+            }
+          }}
+          style={{ cursor: 'pointer' }}
+          title="Go to quote in article"
+        >
+          {renderHighlightText()}
         </blockquote>
         
         {showCitation && (
@@ -473,9 +653,13 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
               />
             )}
             
-            <span className="highlight-author">
+            <CompactButton
+              className="highlight-author"
+              onClick={handleAuthorClick}
+              title="View profile"
+            >
               {getUserDisplayName()}
-            </span>
+            </CompactButton>
           </div>
           
           <div className="highlight-menu-wrapper" ref={menuRef}>
@@ -514,6 +698,20 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
             
             {showMenu && (
               <div className="highlight-menu">
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleMenuGoToQuote}
+                >
+                  <FontAwesomeIcon icon={faQuoteLeft} />
+                  <span>Go to quote</span>
+                </button>
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleMenuViewProfile}
+                >
+                  <FontAwesomeIcon icon={faUser} />
+                  <span>View profile</span>
+                </button>
                 <button
                   className="highlight-menu-item"
                   onClick={handleOpenPortal}

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
@@ -80,17 +89,8 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
               )}
             </div>
           )}
-          {onRefresh && (
+        </div>
-            <IconButton
+        <div className="highlights-actions-right">
-              icon={faRotate}
-              onClick={onRefresh}
-              title="Refresh highlights"
-              ariaLabel="Refresh highlights"
-              variant="ghost"
-              disabled={loading}
-              spin={loading}
-            />
-          )}
           {hasHighlights && (
             <IconButton
               icon={showHighlights ? faEye : faEyeSlash}
@@ -101,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/Me.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup, faBars } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup, faHeart } from '@fortawesome/free-solid-svg-icons'
+import { faClock } from '@fortawesome/free-regular-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { IEventStore } from 'applesauce-core'
 import { BlogPostSkeleton, HighlightSkeleton, BookmarkSkeleton } from './Skeletons'
@@ -23,7 +24,8 @@ import { getCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
-import { groupIndividualBookmarks, hasContent, hasCreationDate } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, hasCreationDate, sortIndividualBookmarks } from '../utils/bookmarkUtils'
+import { dedupeBookmarksById } from '../services/bookmarkHelpers'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
@@ -42,7 +44,7 @@ interface MeProps {
   settings: UserSettings
 }
 
-type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
+type TabType = 'highlights' | 'bookmarks' | 'reads' | 'links' | 'writings'
 
 // Valid reading progress filters
 const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed', 'highlighted', 'archive']
@@ -143,15 +145,15 @@ const Me: React.FC<MeProps> = ({
     setReadingProgressFilter(filter)
     if (activeTab === 'reads') {
       if (filter === 'all') {
-        navigate('/me/reads', { replace: true })
+        navigate('/my/reads', { replace: true })
       } else {
-        navigate(`/me/reads/${filter}`, { replace: true })
+        navigate(`/my/reads/${filter}`, { replace: true })
       }
     } else if (activeTab === 'links') {
       if (filter === 'all') {
-        navigate('/me/links', { replace: true })
+        navigate('/my/links', { replace: true })
       } else {
-        navigate(`/me/links/${filter}`, { replace: true })
+        navigate(`/my/links/${filter}`, { replace: true })
       }
     }
   }
@@ -229,9 +231,9 @@ const Me: React.FC<MeProps> = ({
     if (!viewingPubkey || !activeAccount) return
     
     setLoadedTabs(prev => {
-      const hasBeenLoaded = prev.has('reading-list')
+      const hasBeenLoaded = prev.has('bookmarks')
       if (!hasBeenLoaded) setLoading(true)
-      return new Set(prev).add('reading-list')
+      return new Set(prev).add('bookmarks')
     })
     
     // Always turn off loading after a tick
@@ -278,8 +280,8 @@ const Me: React.FC<MeProps> = ({
     try {
       if (!hasBeenLoaded) setLoading(true)
       
-      // Derive links from bookmarks immediately (bookmarks come from centralized loading in App.tsx)
+      // Derive links from bookmarks with OpenGraph enhancement
-      const initialLinks = deriveLinksFromBookmarks(bookmarks)
+      const initialLinks = await deriveLinksFromBookmarks(bookmarks)
       const initialMap = new Map(initialLinks.map(item => [item.id, item]))
       setLinksMap(initialMap)
       setLinks(initialLinks)
@@ -334,7 +336,7 @@ const Me: React.FC<MeProps> = ({
       case 'writings':
         loadWritingsTab()
         break
-      case 'reading-list':
+      case 'bookmarks':
         loadReadingListTab()
         break
       case 'reads':
@@ -393,8 +395,7 @@ const Me: React.FC<MeProps> = ({
   }
 
   const getReadItemUrl = (item: ReadItem) => {
-    if (item.type === 'article') {
+    if (item.type === 'article' && item.id.startsWith('naddr1')) {
-      // ID is already in naddr format
       return `/a/${item.id}`
     } else if (item.url) {
       return `/r/${encodeURIComponent(item.url)}`
@@ -418,7 +419,7 @@ const Me: React.FC<MeProps> = ({
     const mockEvent = {
       id: item.id,
       pubkey: item.author || '',
-      created_at: item.readingTimestamp || Math.floor(Date.now() / 1000),
+      created_at: item.readingTimestamp || 0,
       kind: 1,
       tags: [] as string[][],
       content: item.title || item.url || 'Untitled',
@@ -437,19 +438,16 @@ const Me: React.FC<MeProps> = ({
 
   const handleSelectUrl = (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => {
     if (bookmark && bookmark.kind === 30023) {
-      // For kind:30023 articles, navigate to the article route
       const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1] || ''
       if (dTag && bookmark.pubkey) {
-        const pointer = {
+        const naddr = nip19.naddrEncode({
-          identifier: dTag,
           kind: 30023,
           pubkey: bookmark.pubkey,
-        }
+          identifier: dTag
-        const naddr = nip19.naddrEncode(pointer)
+        })
         navigate(`/a/${naddr}`)
       }
     } else if (url) {
-      // For regular URLs, navigate to the reader route
       navigate(`/r/${encodeURIComponent(url)}`)
     }
   }
@@ -490,8 +488,10 @@ const Me: React.FC<MeProps> = ({
     return undefined
   }
 
-  // Merge and flatten all individual bookmarks
+  // Merge and flatten all individual bookmarks with deduplication
-  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+  const allIndividualBookmarks = dedupeBookmarksById(
+    bookmarks.flatMap(b => b.individualBookmarks || [])
+  )
     .filter(hasContent)
     .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
   
@@ -565,9 +565,21 @@ const Me: React.FC<MeProps> = ({
     ? buildArchiveOnly(linksWithProgress, { kind: 'external' })
     : []
 
+  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 sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
     groupingMode === 'flat'
-      ? [{ key: 'all', title: `All Bookmarks (${filteredBookmarks.length})`, items: filteredBookmarks }]
+      ? [{ key: 'all', title: getFilterTitle(bookmarkFilter), items: sortIndividualBookmarks(filteredBookmarks) }]
       : [
           { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
           { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
@@ -609,7 +621,7 @@ const Me: React.FC<MeProps> = ({
           </div>
         )
 
-      case 'reading-list':
+      case 'bookmarks':
         if (showSkeletons) {
           return (
             <div className="bookmarks-list">
@@ -655,21 +667,26 @@ const Me: React.FC<MeProps> = ({
                 </div>
               </div>
             )))}
-            <div className="view-mode-controls" style={{
+            <div className="view-mode-controls">
-              display: 'flex',
+              <div className="view-mode-left">
-              justifyContent: 'center',
+                <IconButton
-              gap: '0.5rem',
+                  icon={faHeart}
-              padding: '1rem',
+                  onClick={() => navigate('/support')}
-              marginTop: '1rem',
+                  title="Support Boris"
-              borderTop: '1px solid var(--border-color)'
+                  ariaLabel="Support"
-            }}>
+                  variant="ghost"
-              <IconButton
+                  style={{ color: 'rgb(251 146 60)' }}
-                icon={groupingMode === 'grouped' ? faLayerGroup : faBars}
+                />
-                onClick={toggleGroupingMode}
+                <IconButton
-                title={groupingMode === 'grouped' ? 'Show flat chronological list' : 'Show grouped by source'}
+                  icon={groupingMode === 'grouped' ? faLayerGroup : faClock}
-                ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
+                  onClick={toggleGroupingMode}
-                variant="ghost"
+                  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>
+              <div className="view-mode-right">
+              </div>
             </div>
           </div>
         )
@@ -854,15 +871,15 @@ const Me: React.FC<MeProps> = ({
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
             data-tab="highlights"
-            onClick={() => navigate('/me/highlights')}
+            onClick={() => navigate('/my/highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
             <span className="tab-label">Highlights</span>
           </button>
           <button
-            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+            className={`me-tab ${activeTab === 'bookmarks' ? 'active' : ''}`}
-            data-tab="reading-list"
+            data-tab="bookmarks"
-            onClick={() => navigate('/me/reading-list')}
+            onClick={() => navigate('/my/bookmarks')}
           >
             <FontAwesomeIcon icon={faBookmark} />
             <span className="tab-label">Bookmarks</span>
@@ -870,7 +887,7 @@ const Me: React.FC<MeProps> = ({
           <button
             className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
             data-tab="reads"
-            onClick={() => navigate('/me/reads')}
+            onClick={() => navigate('/my/reads')}
           >
             <FontAwesomeIcon icon={faBooks} />
             <span className="tab-label">Reads</span>
@@ -878,7 +895,7 @@ const Me: React.FC<MeProps> = ({
           <button
             className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
             data-tab="links"
-            onClick={() => navigate('/me/links')}
+            onClick={() => navigate('/my/links')}
           >
             <FontAwesomeIcon icon={faLink} />
             <span className="tab-label">Links</span>
@@ -886,7 +903,7 @@ const Me: React.FC<MeProps> = ({
           <button
             className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
             data-tab="writings"
-            onClick={() => navigate('/me/writings')}
+            onClick={() => navigate('/my/writings')}
           >
             <FontAwesomeIcon icon={faPenToSquare} />
             <span className="tab-label">Writings</span>

src/components/NostrMentionLink.tsx

@@ -1,7 +1,12 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { nip19 } from 'nostr-tools'
 import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
+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
@@ -20,25 +25,31 @@ const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({
 }) => {
   // Decode the nostr URI first
   let decoded: ReturnType<typeof nip19.decode> | null = null
-  let pubkey: string | undefined
   
   try {
     const identifier = nostrUri.replace(/^nostr:/, '')
     decoded = nip19.decode(identifier)
-    
-    // Extract pubkey for profile fetching (works for npub and nprofile)
-    if (decoded.type === 'npub') {
-      pubkey = decoded.data
-    } else if (decoded.type === 'nprofile') {
-      pubkey = decoded.data.pubkey
-    }
   } 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:/, '')
@@ -49,37 +60,30 @@ const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({
     )
   }
   
+  // 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 'npub': {
-      const pk = decoded.data
-      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
-      
-      return (
-        <a
-          href={`/p/${nip19.npubEncode(pk)}`}
-          className={className}
-          onClick={onClick}
-        >
-          @{displayName}
-        </a>
-      )
-    }
-    case 'nprofile': {
-      const { pubkey: pk } = decoded.data
-      const displayName = profile?.name || profile?.display_name || profile?.nip05 || `${pk.slice(0, 8)}...`
-      const npub = nip19.npubEncode(pk)
-      
-      return (
-        <a
-          href={`/p/${npub}`}
-          className={className}
-          onClick={onClick}
-        >
-          @{displayName}
-        </a>
-      )
-    }
     case 'naddr': {
       const { kind, pubkey: pk, identifier: addrIdentifier } = decoded.data
       // Check if it's a blog post (kind:30023)

src/components/Profile.tsx

@@ -1,16 +1,15 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faPenToSquare, faEllipsisH, faCopy, faShare, faExternalLinkAlt, faMobileAlt } 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, fetchBlogPostsFromAuthors } from '../services/exploreService'
+import { BlogPostPreview } from '../services/exploreService'
-import { fetchHighlights } from '../services/highlightService'
 import { KINDS } from '../config/kinds'
-import { getActiveRelayUrls } from '../services/relayManager'
 import AuthorCard from './AuthorCard'
+import CompactButton from './CompactButton'
 import BlogPostCard from './BlogPostCard'
 import { BlogPostSkeleton, HighlightSkeleton } from './Skeletons'
 import { useStoreTimeline } from '../hooks/useStoreTimeline'
@@ -20,6 +19,9 @@ 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'
+import { getProfileUrl } from '../config/nostrGateways'
 
 interface ProfileProps {
   relayPool: RelayPool
@@ -38,6 +40,8 @@ const Profile: React.FC<ProfileProps> = ({
   const activeAccount = Hooks.useActiveAccount()
   const [activeTab, setActiveTab] = useState<'highlights' | 'writings'>(propActiveTab || 'highlights')
   const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [showProfileMenu, setShowProfileMenu] = useState(false)
+  const profileMenuRef = useRef<HTMLDivElement>(null)
   
   // Reading progress state (naddr -> progress 0-1)
   const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
@@ -103,28 +107,17 @@ const Profile: React.FC<ProfileProps> = ({
     })
   }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])
 
-  // Background fetch to populate event store (non-blocking)
+  // 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))
     
-    // Fetch highlights in background
+    writingsController.start({ relayPool, eventStore, pubkey, force: refreshTrigger > 0 })
-    fetchHighlights(relayPool, pubkey, undefined, undefined, false, eventStore)
+      .catch(err => console.warn('⚠️ [Profile] Failed to fetch writings:', err))
-      .then(() => {
-        // Highlights fetched
-      })
-      .catch(err => {
-        console.warn('⚠️ [Profile] Failed to fetch highlights:', err)
-      })
-    
-    // Fetch writings in background (no limit for single user profile)
-    fetchBlogPostsFromAuthors(relayPool, [pubkey], getActiveRelayUrls(relayPool), undefined, null)
-      .then(writings => {
-        writings.forEach(w => eventStore.add(w.event))
-      })
-      .catch(err => {
-        console.warn('⚠️ [Profile] Failed to fetch writings:', err)
-      })
   }, [pubkey, relayPool, eventStore, refreshTrigger])
 
   // Pull-to-refresh
@@ -179,6 +172,68 @@ const Profile: React.FC<ProfileProps> = ({
   const npub = nip19.npubEncode(pubkey)
   const showSkeletons = cachedHighlights.length === 0 && sortedWritings.length === 0
 
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
+        setShowProfileMenu(false)
+      }
+    }
+
+    if (showProfileMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showProfileMenu])
+
+  // Profile menu handlers
+  const handleMenuToggle = () => {
+    setShowProfileMenu(!showProfileMenu)
+  }
+
+  const handleCopyProfileLink = async () => {
+    try {
+      const borisUrl = `${window.location.origin}/p/${npub}`
+      await navigator.clipboard.writeText(borisUrl)
+      setShowProfileMenu(false)
+    } catch (e) {
+      console.warn('Copy failed', e)
+    }
+  }
+
+  const handleShareProfile = async () => {
+    try {
+      const borisUrl = `${window.location.origin}/p/${npub}`
+      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: 'Profile', 
+          url: borisUrl 
+        })
+      } else {
+        await navigator.clipboard.writeText(borisUrl)
+      }
+    } catch (e) {
+      console.warn('Share failed', e)
+    } finally {
+      setShowProfileMenu(false)
+    }
+  }
+
+  const handleOpenPortal = () => {
+    const portalUrl = getProfileUrl(npub)
+    window.open(portalUrl, '_blank', 'noopener,noreferrer')
+    setShowProfileMenu(false)
+  }
+
+  const handleOpenNative = () => {
+    const nativeUrl = `nostr:${npub}`
+    window.location.href = nativeUrl
+    setShowProfileMenu(false)
+  }
+
   const renderTabContent = () => {
     switch (activeTab) {
       case 'highlights':
@@ -247,7 +302,51 @@ const Profile: React.FC<ProfileProps> = ({
         pullPosition={pullPosition}
       />
       <div className="explore-header">
-        <AuthorCard authorPubkey={pubkey} clickable={false} />
+        <div className="profile-header-wrapper">
+          <div className="profile-card-with-menu">
+            <AuthorCard authorPubkey={pubkey} clickable={false} />
+            <div className="profile-card-menu-wrapper" ref={profileMenuRef}>
+              <CompactButton
+                icon={faEllipsisH}
+                onClick={handleMenuToggle}
+                title="More options"
+                ariaLabel="Profile menu"
+              />
+              {showProfileMenu && (
+                <div className="profile-card-menu">
+                  <button
+                    className="profile-card-menu-item"
+                    onClick={handleCopyProfileLink}
+                  >
+                    <FontAwesomeIcon icon={faCopy} />
+                    <span>Copy Link</span>
+                  </button>
+                  <button
+                    className="profile-card-menu-item"
+                    onClick={handleShareProfile}
+                  >
+                    <FontAwesomeIcon icon={faShare} />
+                    <span>Share</span>
+                  </button>
+                  <button
+                    className="profile-card-menu-item"
+                    onClick={handleOpenPortal}
+                  >
+                    <FontAwesomeIcon icon={faExternalLinkAlt} />
+                    <span>Open with njump</span>
+                  </button>
+                  <button
+                    className="profile-card-menu-item"
+                    onClick={handleOpenNative}
+                  >
+                    <FontAwesomeIcon icon={faMobileAlt} />
+                    <span>Open with Native App</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
         
         <div className="me-tabs">
           <button

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/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

@@ -1,5 +1,13 @@
 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
@@ -18,18 +26,31 @@ const RichContent: React.FC<RichContentProps> = ({
   content, 
   className = 'bookmark-content' 
 }) => {
-  // Pattern to match:
+  try {
-  // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.)
+    // Pattern to match:
-  // 2. Plain nostr identifiers (npub1..., nprofile1..., note1..., etc.)
+    // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.) using applesauce Tokens.nostrLink
-  // 3. http(s) URLs
+    // 2. http(s) URLs
-  const pattern = /(nostr:[a-z0-9]+|npub1[a-z0-9]+|nprofile1[a-z0-9]+|note1[a-z0-9]+|nevent1[a-z0-9]+|naddr1[a-z0-9]+|https?:\/\/[^\s]+)/gi
+    const nostrPattern = Tokens.nostrLink
+    const urlPattern = /https?:\/\/[^\s]+/gi
+    const combinedPattern = new RegExp(`(${nostrPattern.source}|${urlPattern.source})`, 'gi')
     
-  const parts = content.split(pattern)
+    const parts = content.split(combinedPattern)
   
-  return (
+    // 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) => {
-        // Handle nostr: URIs
+        // Skip empty or undefined parts
+        if (!part) {
+          return null
+        }
+        
+        // Handle nostr: URIs - Tokens.nostrLink matches both formats
         if (part.startsWith('nostr:')) {
           return (
             <NostrMentionLink
@@ -39,10 +60,8 @@ const RichContent: React.FC<RichContentProps> = ({
           )
         }
         
-        // Handle plain nostr identifiers (add nostr: prefix)
+        // Handle plain nostr identifiers (Tokens.nostrLink matches these too)
-        if (
+        if (isNostrIdentifier(part)) {
-          part.match(/^(npub1|nprofile1|note1|nevent1|naddr1)[a-z0-9]+$/i)
-        ) {
           return (
             <NostrMentionLink
               key={index}
@@ -70,7 +89,11 @@ const RichContent: React.FC<RichContentProps> = ({
         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

@@ -44,12 +44,15 @@ const DEFAULT_SETTINGS: UserSettings = {
   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 {

src/components/Settings/LayoutBehaviorSettings.tsx

@@ -118,6 +118,19 @@ const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ setting
         </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

src/components/Settings/PWASettings.tsx

@@ -33,7 +33,13 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
 
   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
@@ -15,6 +15,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">
       <h3 className="section-title">Reading & Display</h3>
@@ -109,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">
@@ -179,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>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>
-          <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>
         </div>
       </div>
     </div>

src/components/ShareTargetHandler.tsx

@@ -60,7 +60,7 @@ export default function ShareTargetHandler({ relayPool }: ShareTargetHandlerProp
             getActiveRelayUrls(relayPool)
           )
           showToast('Bookmark saved!')
-          navigate('/me/links')
+          navigate('/my/links')
         } catch (err) {
           console.error('Failed to save shared bookmark:', err)
           showToast('Failed to save bookmark')

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
+    return getProfileDisplayName(profile, activeAccount.pubkey)
-    if (profile?.display_name) return profile.display_name
-    if (profile?.nip05) return profile.nip05
-    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
   }
 
   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}
+            icon={faHome}
-            onClick={onToggleCollapse}
+            onClick={() => {
-            title="Close sidebar"
+              if (isMobile) {
-            ariaLabel="Close sidebar"
+                onToggleCollapse()
+              }
+              navigate('/')
+            }}
+            title="Home"
+            ariaLabel="Home"
             variant="ghost"
-            className="mobile-close-btn"
           />
-        ) : (
+        </div>
-          <button 
-            onClick={onToggleCollapse}
-            className="toggle-sidebar-btn"
-            title="Collapse bookmarks sidebar"
-            aria-label="Collapse bookmarks sidebar"
-          >
-            <FontAwesomeIcon icon={faChevronRight} />
-          </button>
-        )}
         <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}
+            icon={faPersonHiking}
-            onClick={onLogout}
+            onClick={() => {
-            title="Logout"
+              if (isMobile) {
-            ariaLabel="Logout"
+                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

@@ -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
@@ -182,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)

src/components/TTSControls.tsx

@@ -60,7 +60,7 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className, settings }
           const lang = detect(text)
           if (typeof lang === 'string' && lang.length >= 2) langOverride = lang.slice(0, 2)
         } catch (err) {
-          console.debug('[tts][detect] failed', err)
+          // ignore detection errors
         }
       }
       if (!langOverride && resolvedSystemLang) {
@@ -78,7 +78,6 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className, settings }
     const currentIndex = SPEED_OPTIONS.indexOf(rate)
     const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
     const next = SPEED_OPTIONS[nextIndex]
-    console.debug('[tts][ui] cycle speed', { from: rate, to: next, speaking, paused })
     setRate(next)
   }
 

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,42 +375,73 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             <>
               {props.support}
             </>
-          ) : (
+          ) : (() => {
-            <ContentPanel 
+            // Determine if this is a video URL
-              loading={props.readerLoading}
+            const isNostrArticle = props.selectedUrl && props.selectedUrl.startsWith('nostr:')
-              title={props.readerContent?.title}
+            const isExternalVideo = !isNostrArticle && !!props.selectedUrl && ['youtube', 'video'].includes(classifyUrl(props.selectedUrl).type)
-              html={props.readerContent?.html}
+            
-              markdown={props.readerContent?.markdown}
+            if (isExternalVideo) {
-              image={props.readerContent?.image}
+              return (
-              summary={props.readerContent?.summary}
+                <VideoView
-              published={props.readerContent?.published}
+                  videoUrl={props.selectedUrl!}
-              selectedUrl={props.selectedUrl}
+                  title={props.readerContent?.title}
-              highlights={props.selectedUrl && props.selectedUrl.startsWith('nostr:')
+                  image={props.readerContent?.image}
-                ? props.highlights // article-specific highlights only
+                  summary={props.readerContent?.summary}
-                : props.classifiedHighlights}
+                  published={props.readerContent?.published}
-              showHighlights={props.showHighlights}
+                  settings={props.settings}
-              highlightStyle={props.settings.highlightStyle || 'marker'}
+                  relayPool={props.relayPool}
-              highlightColor={props.settings.highlightColor || '#ffff00'}
+                  activeAccount={props.activeAccount}
-              onHighlightClick={props.onHighlightClick}
+                  onOpenHighlights={() => {
-              selectedHighlightId={props.selectedHighlightId}
+                    if (props.isHighlightsCollapsed) {
-              highlightVisibility={props.highlightVisibility}
+                      props.onToggleHighlightsPanel()
-              onTextSelection={props.onTextSelection}
+                    }
-              onClearSelection={props.onClearSelection}
+                  }}
-              currentUserPubkey={props.currentUserPubkey}
+                />
-              followedPubkeys={props.followedPubkeys}
+              )
-              settings={props.settings}
+            }
-              relayPool={props.relayPool}
+            
-              activeAccount={props.activeAccount}
+            return (
-              currentArticle={props.currentArticle}
+              <ContentPanel 
-              isSidebarCollapsed={props.isCollapsed}
+                loading={props.readerLoading}
-              isHighlightsCollapsed={props.isHighlightsCollapsed}
+                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}
@@ -413,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

@@ -1,4 +1,4 @@
-import React, { useMemo, forwardRef } from 'react'
+import { useMemo, forwardRef } from 'react'
 import ReactPlayer from 'react-player'
 import { classifyUrl } from '../utils/helpers'
 
@@ -6,8 +6,6 @@ interface VideoEmbedProcessorProps {
   html: string
   renderVideoLinksAsEmbeds: boolean
   className?: string
-  onMouseUp?: (e: React.MouseEvent) => void
-  onTouchEnd?: (e: React.TouchEvent) => void
 }
 
 /**
@@ -17,13 +15,12 @@ interface VideoEmbedProcessorProps {
 const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>(({
   html,
   renderVideoLinksAsEmbeds,
-  className,
+  className
-  onMouseUp,
-  onTouchEnd
 }, ref) => {
-  const processedHtml = useMemo(() => {
+  // Process HTML and extract video URLs in a single pass to keep them in sync
+  const { processedHtml, videoUrls } = useMemo(() => {
     if (!renderVideoLinksAsEmbeds || !html) {
-      return html
+      return { processedHtml: html, videoUrls: [] }
     }
 
     // Process HTML in stages: <video> blocks, <img> tags with video src, and bare video URLs
@@ -86,71 +83,19 @@ const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>
 
     const remainingUrls = [...fileVideoUrls, ...platformVideoUrls].filter(url => !collectedUrls.includes(url))
 
-    let processedHtml = result
+    let finalHtml = result
     remainingUrls.forEach((url) => {
       const placeholder = `__VIDEO_EMBED_${placeholderIndex}__`
-      processedHtml = processedHtml.replace(new RegExp(url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), placeholder)
+      finalHtml = finalHtml.replace(new RegExp(url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), placeholder)
       collectedUrls.push(url)
       placeholderIndex++
     })
 
-    // If nothing collected, return original html
+    // Return both processed HTML and collected URLs (in the same order as placeholders)
-    if (collectedUrls.length === 0) {
+    return {
-      return html
+      processedHtml: collectedUrls.length > 0 ? finalHtml : html,
+      videoUrls: collectedUrls
     }
-
-    return processedHtml
-  }, [html, renderVideoLinksAsEmbeds])
-
-  const videoUrls = useMemo(() => {
-    if (!renderVideoLinksAsEmbeds || !html) {
-      return []
-    }
-
-    const urls: string[] = []
-
-    // 1) Extract from <video> blocks first (video src or nested source src)
-    const videoBlockPattern = /<video[^>]*>[\s\S]*?<\/video>/gi
-    const videoBlocks = html.match(videoBlockPattern) || []
-    videoBlocks.forEach((block) => {
-      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 {
-        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 && !urls.includes(url)) urls.push(url)
-    })
-
-    // 2) Extract from <img> tags with video src
-    const imgTagPattern = /<img[^>]*>/gi
-    const allImgTags = html.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] && !urls.includes(srcMatch[1])) {
-        urls.push(srcMatch[1])
-      }
-    })
-
-    // 3) Extract remaining direct file URLs and platform-classified video URLs
-    const fileVideoPattern = /https?:\/\/[^\s<>"']+\.(mp4|webm|ogg|mov|avi|mkv|m4v)(?:\?[^\s<>"']*)?/gi
-    const fileVideoUrls: string[] = html.match(fileVideoPattern) || []
-    fileVideoUrls.forEach(u => { if (!urls.includes(u)) urls.push(u) })
-
-    const allUrlPattern = /https?:\/\/[^\s<>"']+(?=\s|>|"|'|$)/gi
-    const allUrls: string[] = html.match(allUrlPattern) || []
-    allUrls.forEach(u => {
-      const classification = classifyUrl(u)
-      if (classification.type === 'video' && !urls.includes(u)) {
-        urls.push(u)
-      }
-    })
-
-    return urls
   }, [html, renderVideoLinksAsEmbeds])
 
   // If no video embedding is enabled, just render the HTML normally
@@ -160,8 +105,6 @@ const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>
         ref={ref}
         className={className}
         dangerouslySetInnerHTML={{ __html: processedHtml }}
-        onMouseUp={onMouseUp}
-        onTouchEnd={onTouchEnd}
       />
     )
   }
@@ -170,7 +113,7 @@ const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>
   const parts = processedHtml.split(/(__VIDEO_EMBED_\d+__)/)
   
   return (
-    <div ref={ref} className={className} onMouseUp={onMouseUp} onTouchEnd={onTouchEnd}>
+    <div ref={ref} className={className}>
       {parts.map((part, index) => {
         const videoMatch = part.match(/^__VIDEO_EMBED_(\d+)__$/)
         if (videoMatch) {
@@ -195,13 +138,16 @@ const VideoEmbedProcessor = forwardRef<HTMLDivElement, VideoEmbedProcessorProps>
           }
         }
         
-        // Regular HTML content
+        // Regular HTML content - only render if not empty
-        return (
+        if (part.trim()) {
-          <div 
+          return (
-            key={index}
+            <div 
-            dangerouslySetInnerHTML={{ __html: part }}
+              key={index}
-          />
+              dangerouslySetInnerHTML={{ __html: part }}
-        )
+            />
+          )
+        }
+        return null
       })}
     </div>
   )

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/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

@@ -1,21 +1,101 @@
+import { normalizeRelayUrl } from '../utils/helpers'
+
 /**
  * Centralized relay configuration
  * Single set of relays used throughout the application
  */
 
-// All relays including local relays
+export type RelayRole = 'local-cache' | 'default' | 'fallback' | 'non-content' | 'bunker'
-export const RELAYS = [
+
-  'ws://localhost:10547',
+export interface RelayConfig {
-  'ws://localhost:4869',
+  url: string
-  'wss://relay.nsec.app',
+  roles: RelayRole[]
-  'wss://relay.damus.io',
+}
-  'wss://nos.lol',
+
-  'wss://relay.nostr.band',
+/**
-  'wss://wot.dergigi.com',
+ * Central relay registry with role annotations
-  'wss://relay.snort.social',
+ */
-  'wss://nostr-pub.wellorder.net',
+const RELAY_CONFIGS: RelayConfig[] = [
-  'wss://purplepag.es',
+  { url: 'ws://localhost:10547', roles: ['local-cache'] },
-  'wss://relay.primal.net',
+  { url: 'ws://localhost:4869', roles: ['local-cache'] },
-  'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87',
+  { url: 'wss://relay.nsec.app', roles: ['default', 'non-content'] },
+  { url: 'wss://relay.damus.io', roles: ['default', 'fallback'] },
+  { url: 'wss://nos.lol', roles: ['default', 'fallback'] },
+  { url: 'wss://relay.nostr.band', roles: ['default', 'fallback'] },
+  { url: 'wss://wot.dergigi.com', roles: ['default'] },
+  { url: 'wss://relay.snort.social', roles: ['default'] },
+  { url: 'wss://nostr-pub.wellorder.net', roles: ['default'] },
+  { url: 'wss://purplepag.es', roles: ['default'] },
+  { url: 'wss://relay.primal.net', roles: ['default', 'fallback'] },
+  { url: 'wss://proxy.nostr-relay.app/5d0d38afc49c4b84ca0da951a336affa18438efed302aeedfa92eb8b0d3fcb87', roles: ['default'] },
 ]
 
+/**
+ * Get all local cache relays (localhost relays)
+ */
+export function getLocalRelays(): string[] {
+  return RELAY_CONFIGS
+    .filter(config => config.roles.includes('local-cache'))
+    .map(config => config.url)
+}
+
+/**
+ * Get all default relays (main public relays)
+ */
+export function getDefaultRelays(): string[] {
+  return RELAY_CONFIGS
+    .filter(config => config.roles.includes('default'))
+    .map(config => config.url)
+}
+
+/**
+ * Get fallback content relays (last resort public relays for content fetching)
+ * These are reliable public relays that should be tried when other methods fail
+ */
+export function getFallbackContentRelays(): string[] {
+  return RELAY_CONFIGS
+    .filter(config => config.roles.includes('fallback'))
+    .map(config => config.url)
+}
+
+/**
+ * Get relays suitable for content fetching (excludes non-content relays like auth/signer relays)
+ */
+export function getContentRelays(): string[] {
+  return RELAY_CONFIGS
+    .filter(config => !config.roles.includes('non-content'))
+    .map(config => config.url)
+}
+
+/**
+ * Get relays that should NOT be used as content hints
+ */
+export function getNonContentRelays(): string[] {
+  return RELAY_CONFIGS
+    .filter(config => config.roles.includes('non-content'))
+    .map(config => config.url)
+}
+
+/**
+ * All relays including local relays (backwards compatibility)
+ */
+export const RELAYS = [
+  ...getLocalRelays(),
+  ...getDefaultRelays(),
+]
+
+/**
+ * Relays that should NOT be used as content hints (backwards compatibility)
+ */
+export const NON_CONTENT_RELAYS = getNonContentRelays()
+
+/**
+ * Check if a relay URL is suitable for use as a content hint
+ * Returns true for relays that are reasonable for posts/highlights
+ */
+export function isContentRelay(url: string): boolean {
+  const normalized = normalizeRelayUrl(url)
+  const nonContentRelays = getNonContentRelays().map(normalizeRelayUrl)
+  return !nonContentRelays.includes(normalized)
+}
+

src/hooks/useArticleLoader.ts

@@ -1,15 +1,37 @@
-import { useEffect, useRef, Dispatch, SetStateAction } 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 NavigationState {
+  previewData?: PreviewData
+  articleCoordinate?: string
+  eventId?: string
+}
 
 interface UseArticleLoaderProps {
   naddr: string | undefined
   relayPool: RelayPool | null
+  eventStore?: IEventStore | null
   setSelectedUrl: (url: string) => void
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
@@ -25,6 +47,7 @@ interface UseArticleLoaderProps {
 export function useArticleLoader({
   naddr,
   relayPool,
+  eventStore,
   setSelectedUrl,
   setReaderContent,
   setReaderLoading,
@@ -36,75 +59,629 @@ 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(() => {
+    settingsRef.current = settings
+  }, [settings])
+  // Track in-flight request to prevent stale updates from previous naddr
+  const currentRequestIdRef = useRef(0)
+  
+  // Extract navigation state (from blog post cards)
+  const navState = (location.state as NavigationState | null) || {}
+  const previewData = navState.previewData
+  const navArticleCoordinate = navState.articleCoordinate
+  const navEventId = navState.eventId
+  
+  // Track the current article title for document title
+  const [currentTitle, setCurrentTitle] = useState<string | undefined>()
+  useDocumentTitle({ title: currentTitle })
   
   useEffect(() => {
     mountedRef.current = true
     
-    if (!relayPool || !naddr) return
+    // First check: naddr is required
+    if (!naddr) {
+      setReaderContent(undefined)
+      return
+    }
     
-    const loadArticle = async () => {
+    // Clear readerContent immediately to prevent showing stale content from previous article
-      if (!mountedRef.current) return
+    // This ensures images from previous articles don't flash briefly
+    setReaderContent(undefined)
     
+    // FIRST: Check navigation state for article coordinate/eventId (from Explore)
+    // This allows immediate hydration when coming from Explore without refetching
+    let foundInNavState = false
+    if (eventStore && (navArticleCoordinate || navEventId)) {
+      try {
+        let storedEvent: NostrEvent | undefined
+        
+        // Try coordinate first (most reliable for replaceable events)
+        if (navArticleCoordinate) {
+          storedEvent = eventStore.getEvent?.(navArticleCoordinate) as NostrEvent | undefined
+        }
+        
+        // Fallback to eventId if coordinate lookup failed
+        if (!storedEvent && navEventId) {
+          // Note: eventStore.getEvent might not support eventId lookup directly
+          // We'll decode naddr to get coordinate as fallback
+          try {
+            const decoded = nip19.decode(naddr)
+            if (decoded.type === 'naddr') {
+              const pointer = decoded.data as AddressPointer
+              const coordinate = `${pointer.kind}:${pointer.pubkey}:${pointer.identifier}`
+              storedEvent = eventStore.getEvent?.(coordinate) as NostrEvent | undefined
+            }
+          } catch {
+            // Ignore decode errors
+          }
+        }
+        
+        if (storedEvent) {
+          foundInNavState = true
+          const title = Helpers.getArticleTitle(storedEvent) || previewData?.title || 'Untitled Article'
+          setCurrentTitle(title)
+          const image = Helpers.getArticleImage(storedEvent) || previewData?.image
+          const summary = Helpers.getArticleSummary(storedEvent) || previewData?.summary
+          const published = Helpers.getArticlePublished(storedEvent) || previewData?.published
+          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)
+          
+          // Preload image if available
+          if (image) {
+            preloadImage(image)
+          }
+          
+          // 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)
+                }
+              })
+            }
+          }
+          
+          // Start background query to check for newer replaceable version
+          // but don't block UI - we already have content
+          if (relayPool) {
+            const backgroundRequestId = ++currentRequestIdRef.current
+            const originalCreatedAt = storedEvent.created_at
+            
+            // Fire and forget background fetch
+            ;(async () => {
+              try {
+                const decoded = nip19.decode(naddr)
+                if (decoded.type !== 'naddr') return
+                const pointer = decoded.data as AddressPointer
+                const filter = {
+                  kinds: [pointer.kind],
+                  authors: [pointer.pubkey],
+                  '#d': [pointer.identifier]
+                }
+                
+                await queryEvents(relayPool, filter, {
+                  onEvent: (evt) => {
+                    if (!mountedRef.current || currentRequestIdRef.current !== backgroundRequestId) return
+                    
+                    // Store in event store
+                    try {
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      eventStore?.add?.(evt as unknown as any)
+                    } catch {
+                      // Ignore store errors
+                    }
+                    
+                    // Only update if this is a newer version than what we loaded
+                    if (evt.created_at > originalCreatedAt) {
+                      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)
+                      
+                      // Update cache
+                      const articleContent = {
+                        title,
+                        markdown: evt.content,
+                        image,
+                        summary,
+                        published,
+                        author: evt.pubkey,
+                        event: evt
+                      }
+                      saveToCache(naddr, articleContent, settings)
+                    }
+                  }
+                })
+              } catch (err) {
+                // Silently ignore background fetch errors - we already have content
+                console.warn('[article-loader] Background fetch failed:', err)
+              }
+            })()
+          }
+          
+          // Return early - we have content from navigation state
+          return
+        }
+      } catch (err) {
+        // If navigation state lookup fails, fall through to cache/EventStore
+        console.warn('[article-loader] Navigation state lookup failed:', err)
+      }
+    }
+    
+    // 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,
+          markdown: cachedArticle.markdown,
+          image: cachedArticle.image,
+          summary: cachedArticle.summary,
+          published: cachedArticle.published,
+          url: `nostr:${naddr}`
+        })
+        const dTag = cachedArticle.event.tags.find(t => t[0] === 'd')?.[1] || ''
+        const articleCoordinate = `${cachedArticle.event.kind}:${cachedArticle.author}:${dTag}`
+        setCurrentArticleCoordinate(articleCoordinate)
+        setCurrentArticleEventId(cachedArticle.event.id)
+        setCurrentArticle?.(cachedArticle.event)
+        setReaderLoading(false)
+        setSelectedUrl(`nostr:${naddr}`)
+        setIsCollapsed(true)
+        
+        // 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
+          
+          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 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 && !foundInNavState) {
+      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 && !foundInNavState) {
       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)
       
-      try {
+      // Don't clear highlights yet - let the smart filtering logic handle it
-        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
+      // when we know the article coordinate
+      setHighlightsLoading(false) // Don't show loading yet
       
-        if (!mountedRef.current) return
+      // 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: article.title,
+          title: previewData.title,
-          markdown: article.markdown,
+          markdown: '', // Will be loaded from relay
-          image: article.image,
+          image: previewData.image,
-          summary: article.summary,
+          summary: previewData.summary,
-          published: article.published,
+          published: previewData.published,
           url: `nostr:${naddr}`
         })
+        setReaderLoading(false) // Turn off loading immediately - we have the preview!
         
-        const dTag = article.event.tags.find(t => t[0] === 'd')?.[1] || ''
+        // Don't preload image here - it should already be cached from BlogPostCard
-        const articleCoordinate = `${article.event.kind}:${article.author}:${dTag}`
+        // 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)
+      }
       
-        setCurrentArticleCoordinate(articleCoordinate)
+      try {
-        setCurrentArticleEventId(article.event.id)
+        // Decode naddr to filter
-        setCurrentArticle?.(article.event)
+        const decoded = nip19.decode(naddr)
-        setReaderLoading(false)
+        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]
+        }
 
-        // Fetch highlights asynchronously without blocking article display
+        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
           
-          setHighlightsLoading(true)
+          const le = latestEvent as NostrEvent | null
-          setHighlights([])
+          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
           
-          await fetchHighlightsForArticle(
+          if (coord && eventId) {
-            relayPool, 
+            setHighlightsLoading(true)
-            articleCoordinate, 
+            // Clear highlights that don't belong to this article coordinate
-            article.event.id,
+            setHighlights((prev) => {
-            (highlight) => {
+              return prev.filter(h => {
-              if (!mountedRef.current) return
+                // Keep highlights that match this article coordinate or event ID
-              
+                return h.eventReference === coord || h.eventReference === eventId
-              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
+            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 {
-          if (mountedRef.current) {
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
             setHighlightsLoading(false)
           }
         }
       } catch (err) {
         console.error('Failed to load article:', err)
-        if (mountedRef.current) {
+        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>`,
@@ -120,18 +697,13 @@ export function useArticleLoader({
     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,
-    relayPool,
+    previewData,
-    settings,
+    relayPool
-    setSelectedUrl,
-    setReaderContent,
-    setReaderLoading,
-    setIsCollapsed,
-    setHighlights,
-    setHighlightsLoading,
-    setCurrentArticleCoordinate,
-    setCurrentArticleEventId,
-    setCurrentArticle
   ])
 }

src/hooks/useBookmarksData.ts

@@ -158,7 +158,10 @@ 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 (effectiveArticleCoordinate && !externalUrl) {
@@ -167,6 +170,9 @@ export const useBookmarksData = ({
       // 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, effectiveArticleCoordinate, naddr, externalUrl, handleFetchHighlights])
 

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, useRef, 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 {
@@ -49,6 +50,12 @@ export function useExternalUrlLoader({
   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(() => {
@@ -70,6 +77,7 @@ export function useExternalUrlLoader({
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      const requestId = ++currentRequestIdRef.current
       if (!mountedRef.current) return
       
       setReaderLoading(true)
@@ -83,7 +91,9 @@ export function useExternalUrlLoader({
         const content = await fetchReadableContent(url)
         
         if (!mountedRef.current) return
+        if (currentRequestIdRef.current !== requestId) return
         
+        setCurrentTitle(content.title)
         setReaderContent(content)
         setReaderLoading(false)
         
@@ -114,6 +124,7 @@ export function useExternalUrlLoader({
               url,
               (highlight) => {
                 if (!mountedRef.current) return
+                if (currentRequestIdRef.current !== requestId) return
                 
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
@@ -131,13 +142,13 @@ export function useExternalUrlLoader({
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          if (mountedRef.current) {
+          if (mountedRef.current && currentRequestIdRef.current === requestId) {
             setHighlightsLoading(false)
           }
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
-        if (mountedRef.current) {
+        if (mountedRef.current && currentRequestIdRef.current === requestId) {
           const filename = getFilenameFromUrl(url)
           setReaderContent({
             title: filename,
@@ -154,19 +165,12 @@ export function useExternalUrlLoader({
     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,
-    relayPool,
+    cachedUrlHighlights
-    eventStore,
-    cachedUrlHighlights,
-    setReaderContent,
-    setReaderLoading,
-    setIsCollapsed,
-    setSelectedUrl,
-    setHighlights,
-    setCurrentArticleCoordinate,
-    setCurrentArticleEventId,
-    setHighlightsLoading
   ])
 
   // Keep UI highlights synced with cached store updates without reloading content

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
+    // Filter highlights based on URL type
-    if (!selectedUrl.startsWith('nostr:')) {
+    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,7 +61,6 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      
       const newHighlight = await createHighlight(
         text,
         source,
@@ -73,7 +73,6 @@ export const useHighlightCreation = ({
       )
       
       // 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)
+  // Shared function to check and handle text selection
-  const handleSelectionEnd = useCallback(() => {
+  const checkSelection = useCallback(() => {
-    setTimeout(() => {
+    const selection = window.getSelection()
-      const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0) {
-      if (!selection || selection.rangeCount === 0) {
+      onClearSelection?.()
-        onClearSelection?.()
+      return
-        return
+    }
-      }
 
-      const range = selection.getRangeAt(0)
+    const range = selection.getRangeAt(0)
-      const text = selection.toString().trim()
+    const text = selection.toString().trim()
 
-      if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
+    if (text.length > 0 && contentRef.current?.contains(range.commonAncestorContainer)) {
-        onTextSelection?.(text)
+      onTextSelection?.(text)
-      } else {
+    } else {
-        onClearSelection?.()
+      onClearSelection?.()
-      }
+    }
-    }, 10)
   }, [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/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,56 +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) {
+    profileLabelsRef.current = profileLabels
-      setRenderedHtml('')
+    profileLoadingRef.current = profileLoading
-      setProcessedMarkdown('')
+    articleTitlesRef.current = articleTitles
+  }, [profileLabels, profileLoading, articleTitles])
+
+  // Fetch article titles
+  useEffect(() => {
+    if (!markdown || !relayPool) {
+      setArticleTitles(new Map())
       return
     }
 
     let isCancelled = false
 
-    const processMarkdown = async () => {
+    const fetchTitles = async () => {
-      // Extract all naddr references
       const naddrs = extractNaddrUris(markdown)
-      
+      if (naddrs.length === 0) {
-      let processed: string
+        setArticleTitles(new Map())
-      
+        return
-      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)
-        } 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 (isCancelled) return
+      try {
-      
+        const titlesMap = await fetchArticleTitles(relayPool!, naddrs)
-      setProcessedMarkdown(processed)
+        if (!isCancelled) {
-
+          setArticleTitles(titlesMap)
-      
-      const rafId = requestAnimationFrame(() => {
-        if (previewRef.current && !isCancelled) {
-          const html = previewRef.current.innerHTML
-          setRenderedHtml(html)
-        } else if (!isCancelled) {
-          console.warn('⚠️ markdownPreviewRef.current is null')
         }
-      })
+      } 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()
@@ -75,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/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

@@ -7,7 +7,6 @@ interface UseReadingPositionOptions {
   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)
 }
 
@@ -18,98 +17,69 @@ export const useReadingPosition = ({
   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 hasSavedOnce = useRef(false)
   const completionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const lastSavedAtRef = useRef<number>(0)
+  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
   
-  // Debounced save function
+  // 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])
+
+  // 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) {
+    if (!syncEnabled || !onSaveRef.current) {
       return
     }
 
     // Always save instantly when we reach completion (1.0)
-    if (currentPosition === 1 && lastSavedPosition.current < 1) {
+    if (currentPosition === 1 && !lastSaved100Ref.current) {
       if (saveTimerRef.current) {
         clearTimeout(saveTimerRef.current)
         saveTimerRef.current = null
       }
-      lastSavedPosition.current = 1
+      lastSaved100Ref.current = true
-      hasSavedOnce.current = true
+      onSaveRef.current(1)
-      lastSavedAtRef.current = Date.now()
-      onSave(1)
       return
     }
 
-    // Require at least 5% progress change to consider saving
+    // Always update the pending position (latest position to save)
-    const MIN_DELTA = 0.05
+    pendingPositionRef.current = currentPosition
-    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= MIN_DELTA
 
-    // Enforce a minimum interval between saves (15s) to avoid spamming
+    // Throttle: only schedule a save if one isn't already pending
-    const MIN_INTERVAL_MS = 15000
+    // This ensures saves happen at regular 1s intervals during continuous scrolling
-    const nowMs = Date.now()
-    const enoughTimeElapsed = nowMs - lastSavedAtRef.current >= MIN_INTERVAL_MS
-
-    // Allow the very first meaningful save (when crossing 5%) regardless of interval
-    const isFirstMeaningful = !hasSavedOnce.current && currentPosition >= MIN_DELTA
-
-    if (!hasSignificantChange && !isFirstMeaningful) {
-      return
-    }
-
-    // If interval hasn't elapsed yet, delay until autoSaveInterval but still cap frequency
-    if (!enoughTimeElapsed && !isFirstMeaningful) {
-      // Clear and reschedule within the remaining window, but not sooner than MIN_INTERVAL_MS
-      if (saveTimerRef.current) {
-        clearTimeout(saveTimerRef.current)
-      }
-      const remaining = Math.max(0, MIN_INTERVAL_MS - (nowMs - lastSavedAtRef.current))
-      const delay = Math.max(autoSaveInterval, remaining)
-      saveTimerRef.current = setTimeout(() => {
-        lastSavedPosition.current = currentPosition
-        hasSavedOnce.current = true
-        lastSavedAtRef.current = Date.now()
-        onSave(currentPosition)
-      }, delay)
-      return
-    }
-
-    // Clear existing timer
     if (saveTimerRef.current) {
-      clearTimeout(saveTimerRef.current)
+      return // Already have a save scheduled, don't reset the timer
     }
 
-    // Schedule new save using the larger of autoSaveInterval and MIN_INTERVAL_MS
+    const THROTTLE_MS = 1000
-    const delay = Math.max(autoSaveInterval, MIN_INTERVAL_MS)
     saveTimerRef.current = setTimeout(() => {
-      lastSavedPosition.current = currentPosition
+      // Save the latest position, not the one from when timer was scheduled
-      hasSavedOnce.current = true
+      const positionToSave = pendingPositionRef.current
-      lastSavedAtRef.current = Date.now()
+      onSaveRef.current?.(positionToSave)
-      onSave(currentPosition)
-    }, delay)
-  }, [syncEnabled, onSave, autoSaveInterval])
-
-  // Immediate save function
-  const saveNow = useCallback(() => {
-    if (!syncEnabled || !onSave) return
-    if (saveTimerRef.current) {
-      clearTimeout(saveTimerRef.current)
       saveTimerRef.current = null
-    }
+    }, THROTTLE_MS)
-    lastSavedPosition.current = position
+  }, [syncEnabled])
-    hasSavedOnce.current = true
-    lastSavedAtRef.current = Date.now()
-    onSave(position)
-  }, [syncEnabled, onSave, position])
 
   useEffect(() => {
     if (!enabled) return
@@ -123,21 +93,27 @@ 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%
+      // Only consider it 100% if we're truly at the bottom AND have scrolled significantly
-      const isAtBottom = scrollTop + windowHeight >= documentHeight - 5
+      // 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)
       positionRef.current = clampedProgress
-      onPositionChange?.(clampedProgress)
+      onPositionChangeRef.current?.(clampedProgress)
 
-      // Schedule auto-save if sync is enabled
+      // Schedule auto-save if sync is enabled (unless suppressed)
-      scheduleSave(clampedProgress)
+      if (Date.now() >= suppressUntilRef.current) {
+        scheduleSave(clampedProgress)
+      }
+      // Note: Suppression is silent to avoid log spam during scrolling
 
       // Completion detection with 2s hold at 100%
       if (!hasTriggeredComplete.current) {
@@ -148,7 +124,7 @@ export const useReadingPosition = ({
               if (!hasTriggeredComplete.current && positionRef.current === 1) {
                 setIsReadingComplete(true)
                 hasTriggeredComplete.current = true
-                onReadingComplete?.()
+                onReadingCompleteRef.current?.()
               }
               completionTimerRef.current = null
             }, completionHoldMs)
@@ -162,7 +138,7 @@ export const useReadingPosition = ({
             if (clampedProgress >= readingCompleteThreshold) {
               setIsReadingComplete(true)
               hasTriggeredComplete.current = true
-              onReadingComplete?.()
+              onReadingCompleteRef.current?.()
             }
           }
         }
@@ -180,23 +156,20 @@ export const useReadingPosition = ({
       window.removeEventListener('scroll', handleScroll)
       window.removeEventListener('resize', handleScroll)
       
-      // Clear save timer on unmount
+      // DON'T clear save timer - let it complete even if tracking is temporarily disabled
-      if (saveTimerRef.current) {
+      // Only clear completion timer since that's tied to the current scroll session
-        clearTimeout(saveTimerRef.current)
-      }
       if (completionTimerRef.current) {
         clearTimeout(completionTimerRef.current)
       }
     }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave, completionHoldMs])
+  }, [enabled, readingCompleteThreshold, scheduleSave, completionHoldMs])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {
     if (!enabled) {
       setIsReadingComplete(false)
       hasTriggeredComplete.current = false
-      hasSavedOnce.current = false
+      lastSaved100Ref.current = false
-      lastSavedPosition.current = 0
       if (completionTimerRef.current) {
         clearTimeout(completionTimerRef.current)
         completionTimerRef.current = null
@@ -208,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'
@@ -20,26 +20,24 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
   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 () => {
+    // Start settings stream: seed from store, stream updates to store in background
-      try {
+    const stopNetwork = startSettingsStream(relayPool, eventStore, pubkey, RELAYS, (loadedSettings) => {
-        const loadedSettings = await loadSettings(relayPool, eventStore, pubkey, RELAYS)
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
-        if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
+    })
-      } catch (err) {
-        console.error('Failed to load settings:', err)
-      }
-    }
-
-    loadAndWatch()
 
+    // 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()
+    return () => {
+      subscription.unsubscribe()
+      stopNetwork()
+    }
   }, [relayPool, pubkey, eventStore])
 
   // Apply settings to document
@@ -70,11 +68,18 @@ 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')
       
-      // Set image max-width based on full-width setting
+      // Set image width and max-height based on full-width setting
-      root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%')
+      root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto')
+      root.setProperty('--image-max-height', settings.fullWidthImages ? 'none' : '70vh')
       
     }
     

src/hooks/useTextToSpeech.ts

@@ -59,7 +59,6 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
   // Update rate when defaultRate option changes
   useEffect(() => {
     if (options.defaultRate !== undefined) {
-      console.debug('[tts] defaultRate changed ->', options.defaultRate)
       setRate(options.defaultRate)
     }
   }, [options.defaultRate])
@@ -73,7 +72,6 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
       if (!voice && v.length) {
         const byLang = v.find(x => x.lang?.toLowerCase().startsWith(defaultLang.toLowerCase()))
         setVoice(byLang || v[0] || null)
-        console.debug('[tts] voices loaded', { total: v.length, picked: (byLang || v[0] || null)?.lang })
       }
     }
     load()
@@ -107,44 +105,37 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
 
     u.onstart = () => {
       if (utteranceRef.current !== self) return
-      console.debug('[tts] onstart')
       setSpeaking(true)
       setPaused(false)
     }
     u.onpause = () => {
       if (utteranceRef.current !== self) return
-      console.debug('[tts] onpause')
       setPaused(true)
     }
     u.onresume = () => {
       if (utteranceRef.current !== self) return
-      console.debug('[tts] onresume')
       setPaused(false)
     }
     u.onend = () => {
       if (utteranceRef.current !== self) return
-      console.debug('[tts] onend')
       // Continue with next chunk if available
       const hasMore = chunkIndexRef.current < (chunksRef.current.length - 1)
       if (hasMore) {
-        chunkIndexRef.current += 1
+        chunkIndexRef.current++
-        globalOffsetRef.current += self.text.length
+        charIndexRef.current += self.text.length
-        const next = chunksRef.current[chunkIndexRef.current] || ''
+        const nextChunk = chunksRef.current[chunkIndexRef.current]
-        const nextUtterance = createUtterance(next, langRef.current)
+        const nextUtterance = createUtterance(nextChunk, langRef.current)
         utteranceRef.current = nextUtterance
         synth!.speak(nextUtterance)
-        return
+      } else {
+        setSpeaking(false)
+        setPaused(false)
       }
-      setSpeaking(false)
-      setPaused(false)
-      utteranceRef.current = null
     }
     u.onerror = () => {
       if (utteranceRef.current !== self) return
-      console.debug('[tts] onerror')
       setSpeaking(false)
       setPaused(false)
-      utteranceRef.current = null
     }
     u.onboundary = (ev: SpeechSynthesisEvent) => {
       if (utteranceRef.current !== self) return
@@ -197,7 +188,6 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
 
   const stop = useCallback(() => {
     if (!supported) return
-    console.debug('[tts] stop')
     synth!.cancel()
     setSpeaking(false)
     setPaused(false)
@@ -211,18 +201,16 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
 
   const speak = useCallback((text: string, langOverride?: string) => {
     if (!supported || !text?.trim()) return
-    console.debug('[tts] speak', { len: text.length, rate })
     synth!.cancel()
     spokenTextRef.current = text
     charIndexRef.current = 0
     langRef.current = langOverride
     startSpeakingChunks(text)
-  }, [supported, synth, startSpeakingChunks, rate])
+  }, [supported, synth, startSpeakingChunks])
 
   const pause = useCallback(() => {
     if (!supported) return
     if (synth!.speaking && !synth!.paused) {
-      console.debug('[tts] pause')
       synth!.pause()
       setPaused(true)
     }
@@ -231,7 +219,6 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
   const resume = useCallback(() => {
     if (!supported) return
     if (synth!.speaking && synth!.paused) {
-      console.debug('[tts] resume')
       synth!.resume()
       setPaused(false)
     }
@@ -242,14 +229,11 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
     if (!supported) return
     if (!utteranceRef.current) return
 
-    console.debug('[tts] rate change', { rate, speaking: synth!.speaking, paused: synth!.paused, charIndex: charIndexRef.current })
-
     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)
 
-      console.debug('[tts] restart at new rate', { startIndex, remainingLen: remainingText.length })
       synth!.cancel()
       // restart chunked from current global index
       spokenTextRef.current = remainingText
@@ -273,7 +257,6 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
       const fullText = spokenTextRef.current
       const startIndex = Math.max(0, Math.min(charIndexRef.current, fullText.length - 1))
       const remainingText = fullText.slice(startIndex)
-      console.debug('[tts] updateRate -> restart', { newRate, startIndex, remainingLen: remainingText.length })
       synth!.cancel()
       const u = createUtterance(remainingText)
       // ensure the new rate is applied immediately on the new utterance
@@ -281,7 +264,6 @@ export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
       utteranceRef.current = u
       synth!.speak(u)
     } else if (utteranceRef.current) {
-      console.debug('[tts] updateRate -> set on utterance', { newRate })
       utteranceRef.current.rate = newRate
     }
   }, [supported, synth, createUtterance])

src/main.tsx

@@ -6,16 +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
+    const swPath = '/sw.js'
-      .register('/sw.js', { type: 'module' })
-      .then(registration => {
     
-        // Check for updates periodically
+    // Check if already registered/active first
-        setInterval(() => {
+    navigator.serviceWorker.getRegistrations().then(async (registrations) => {
-          registration.update()
+      if (registrations.length > 0) {
-        }, 60 * 60 * 1000) // Check every hour
+        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 => {
+        if (!registration) return
+        
+        // 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', () => {
@@ -24,8 +67,6 @@ if ('serviceWorker' in navigator) {
             newWorker.addEventListener('statechange', () => {
               if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                 // New service worker available
-                
-                // Optionally show a toast notification
                 const updateAvailable = new CustomEvent('sw-update-available')
                 window.dispatchEvent(updateAvailable)
               }
@@ -34,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/articleService.ts

@@ -4,7 +4,7 @@ import { nip19 } from 'nostr-tools'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
-import { RELAYS } from '../config/relays'
+import { getContentRelays, getFallbackContentRelays, isContentRelay } from '../config/relays'
 import { prioritizeLocalRelays, partitionRelays, createParallelReqStreams } from '../utils/helpers'
 import { merge, toArray as rxToArray } from 'rxjs'
 import { UserSettings } from './settingsService'
@@ -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
@@ -49,12 +51,51 @@ function getFromCache(naddr: string): ArticleContent | null {
     }
 
     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,8 +104,8 @@ function saveToCache(naddr: string, content: ArticleContent): void {
     }
     localStorage.setItem(cacheKey, JSON.stringify(cached))
   } catch (err) {
-    console.warn('Failed to cache article:', err)
+    // Silently fail - don't block the UI if caching fails
-    // Silently fail if storage is full or unavailable
+    // Handles quota exceeded, invalid data, and other errors gracefully
   }
 }
 
@@ -97,13 +138,6 @@ 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
-    const orderedRelays = prioritizeLocalRelays(baseRelays)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
-
     // Fetch the article event
     const filter = {
       kinds: [pointer.kind],
@@ -111,10 +145,52 @@ export async function fetchArticleByNaddr(
       '#d': [pointer.identifier]
     }
 
-    // Parallel local+remote, stream immediate, collect up to first from each
+    let events: NostrEvent[] = []
-    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()))
+    // Build unified relay set: hints + configured content relays
-    const events = collected as NostrEvent[]
+    // Filter hinted relays to only content-capable relays
+    const hintedRelays = (pointer.relays && pointer.relays.length > 0)
+      ? pointer.relays.filter(isContentRelay)
+      : []
+    
+    // Get configured content relays
+    const contentRelays = getContentRelays()
+    
+    // Union of hinted and configured relays (deduplicated)
+    const unifiedRelays = Array.from(new Set([...hintedRelays, ...contentRelays]))
+    
+    if (unifiedRelays.length > 0) {
+      const orderedUnified = prioritizeLocalRelays(unifiedRelays)
+      const { local: localUnified, remote: remoteUnified } = partitionRelays(orderedUnified)
+      
+      const { local$, remote$ } = createParallelReqStreams(
+        relayPool,
+        localUnified,
+        remoteUnified,
+        filter,
+        1200,
+        6000
+      )
+      const collected = await lastValueFrom(
+        merge(local$.pipe(take(1)), remote$.pipe(take(1))).pipe(rxToArray())
+      )
+      events = collected as NostrEvent[]
+    }
+
+    // Last resort: try fallback content relays (most reliable public relays)
+    if (events.length === 0) {
+      const fallbackRelays = getFallbackContentRelays()
+      const { remote$: fallback$ } = createParallelReqStreams(
+        relayPool,
+        [], // no local for fallback
+        fallbackRelays,
+        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')
@@ -143,7 +219,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
-  
+  private externalEventStore: EventStore | null = null
-  // Event loaders for efficient batching
+  private relayPool: RelayPool | null = null
-  private eventStore = new EventStore()
-  private eventLoader: ReturnType<typeof createEventLoader> | null = null
-  private addressLoader: ReturnType<typeof createAddressLoader> | null = null
 
   onRawEvent(cb: RawEventCallback): () => void {
     this.rawEventListeners.push(cb)
@@ -117,15 +110,15 @@ 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 {
+  ): Promise<void> {
-    if (!this.eventLoader) {
+    if (!this.relayPool) {
       return
     }
 
@@ -135,71 +128,146 @@ class BookmarkController {
       return
     }
     
-    // Convert IDs to EventPointers
+    // Fetch events using local-first queryEvents
-    const pointers: EventPointer[] = unique.map(id => ({ id }))
+    await queryEvents(
+      this.relayPool,
+      { ids: unique },
+      {
+        onEvent: (event) => {
+          // Check if hydration was cancelled
+          if (this.hydrationGeneration !== generation) return
           
-    // Use EventLoader - it auto-batches and streams results
+          idToEvent.set(event.id, event)
-    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)
+          }
           
-        // Also index by coordinate for addressable events
+          // Add to external event store if available
-        if (event.kind && event.kind >= 30000 && event.kind < 40000) {
+          if (this.externalEventStore) {
-          const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+            this.externalEventStore.add(event)
-          const coordinate = `${event.kind}:${event.pubkey}:${dTag}`
+          }
-          idToEvent.set(coordinate, event)
+          
+          onProgress()
         }
-        
-        onProgress()
-      },
-      error: () => {
-        // Silent error - EventLoader handles retries
       }
-    })
+    )
   }
 
   /**
-   * 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 {
+  ): Promise<void> {
-    if (!this.addressLoader) {
+    if (!this.relayPool) {
       return
     }
 
-    if (coords.length === 0) return
+    if (coords.length === 0) {
+      return
+    }
 
-    // Convert coordinates to AddressPointers
+    // Group by kind and pubkey for efficient batching
-    const pointers = coords.map(c => ({
+    const filtersByKind = new Map<number, Map<string, string[]>>()
-      kind: c.kind,
-      pubkey: c.pubkey,
-      identifier: c.identifier
-    }))
     
-    // Use AddressLoader - it auto-batches and streams results
+    for (const coord of coords) {
-    merge(...pointers.map(this.addressLoader)).subscribe({
+      if (!filtersByKind.has(coord.kind)) {
-      next: (event) => {
+        filtersByKind.set(coord.kind, new Map())
-        // 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: () => {
-        // Silent error - AddressLoader handles retries
       }
-    })
+      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(
@@ -244,42 +312,58 @@ class BookmarkController {
       })
 
       const allItems = [...publicItemsAll, ...privateItemsAll]
+      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 => {
+      // Request hydration for all items that don't have content yet
-        if (/^[0-9a-f]{64}$/i.test(i.id)) {
+      deduped.forEach(i => {
-          noteIds.push(i.id)
+        // If item has no content, we need to fetch it
-        } else if (i.id.includes(':')) {
+        if (!i.content || i.content.length === 0) {
-          coordinates.push(i.id)
+          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>) => {
-        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)
-        ])
+        ]
         
         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) }))
+          .map(b => ({ 
-          .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+            ...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
+          })
 
         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]),
@@ -295,7 +379,7 @@ class BookmarkController {
       const idToEvent: Map<string, NostrEvent> = new Map()
       emitBookmarks(idToEvent)
 
-      // Now fetch events progressively in background using batched hydrators
+      // Now fetch events progressively in background using local-first queries
       
       const generation = this.hydrationGeneration
       const onProgress = () => emitBookmarks(idToEvent)
@@ -310,10 +394,14 @@ class BookmarkController {
         }
       })
       
-      // Kick off batched hydration (streaming, non-blocking)
+      // Kick off hydration (streaming, non-blocking, local-first)
-      // EventLoader and AddressLoader handle batching and streaming automatically
+      // Fire-and-forget - don't await, let it run in background
-      this.hydrateByIds(noteIds, idToEvent, onProgress, generation)
+      this.hydrateByIds(noteIds, idToEvent, onProgress, generation).catch(() => {
-      this.hydrateByCoordinates(coordObjs, idToEvent, onProgress, generation)
+        // 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('Failed to build bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
@@ -324,8 +412,13 @@ 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') {
       return
@@ -336,16 +429,6 @@ class BookmarkController {
     // Increment generation to cancel any in-flight hydration
     this.hydrationGeneration++
     
-    // Initialize loaders for this session
-    this.eventLoader = createEventLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS 
-    })
-    this.addressLoader = createAddressLoader(relayPool, { 
-      eventStore: this.eventStore,
-      extraRelays: RELAYS
-    })
-    
     this.setLoading(true)
 
     try {

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
 }

src/services/bookmarkHelpers.ts

@@ -21,12 +21,16 @@ export interface AddressPointer {
   pubkey: string
   identifier: string
   relays?: string[]
+  added_at?: number
+  created_at?: number
 }
 
 export interface EventPointer {
   id: string
   relays?: string[]
   author?: string
+  added_at?: number
+  created_at?: number
 }
 
 export interface ApplesauceBookmarks {
@@ -77,14 +81,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: note.id,
           content: '',
-          created_at: parentCreatedAt || 0,
+          created_at: note.created_at ?? null,
           pubkey: note.author || activeAccount.pubkey,
           kind: 1, // Short note kind
           tags: [],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt || 0
         })
       })
     }
@@ -97,14 +101,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: coordinate,
           content: '',
-          created_at: parentCreatedAt || 0,
+          created_at: article.created_at ?? null,
           pubkey: article.pubkey,
           kind: article.kind, // Usually 30023 for long-form articles
           tags: [],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt ?? null
         })
       })
     }
@@ -115,14 +119,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `hashtag-${hashtag}`,
           content: `#${hashtag}`,
-          created_at: parentCreatedAt || 0,
+          created_at: 0, // Hashtags don't have their own creation time
           pubkey: activeAccount.pubkey,
           kind: 1,
           tags: [['t', hashtag]],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt ?? null
         })
       })
     }
@@ -133,14 +137,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `url-${url}`,
           content: url,
-          created_at: parentCreatedAt || 0,
+          created_at: 0, // URLs don't have their own creation time
           pubkey: activeAccount.pubkey,
           kind: 1,
           tags: [['r', url]],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: parentCreatedAt || 0
+          listUpdatedAt: parentCreatedAt || 0
         })
       })
     }
@@ -149,20 +153,24 @@ export const processApplesauceBookmarks = (
   }
 
   const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]
-  return bookmarkArray
+  const processed = bookmarkArray
     .filter((bookmark: BookmarkData) => bookmark.id) // Skip bookmarks without valid IDs
-    .map((bookmark: BookmarkData) => ({
+    .map((bookmark: BookmarkData) => {
-      id: bookmark.id!,
+      return {
-      content: bookmark.content || '',
+        id: bookmark.id!,
-      created_at: bookmark.created_at || parentCreatedAt || 0,
+        content: bookmark.content || '',
-      pubkey: activeAccount.pubkey,
+        created_at: bookmark.created_at ?? null,
-      kind: bookmark.kind || 30001,
+        pubkey: activeAccount.pubkey,
-      tags: bookmark.tags || [],
+        kind: bookmark.kind || 30001,
-      parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
+        tags: bookmark.tags || [],
-      type: 'event' as const,
+        parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
-      isPrivate,
+        type: 'event' as const,
-      added_at: bookmark.created_at || parentCreatedAt || 0
+        isPrivate,
-    }))
+        listUpdatedAt: parentCreatedAt ?? null
+      }
+    })
+  
+  return processed
 }
 
 // Types and guards around signer/decryption APIs
@@ -184,6 +192,9 @@ export function hydrateItems(
         }
       }
       
+      // Ensure all events with content get parsed content for proper rendering
+      const parsedContent = content ? (getParsedContent(content) as ParsedContent) : undefined
+      
       return {
         ...item,
         pubkey: ev.pubkey || item.pubkey,
@@ -191,7 +202,7 @@ export function hydrateItems(
         created_at: ev.created_at || item.created_at,
         kind: ev.kind || item.kind,
         tags: ev.tags || item.tags,
-        parsedContent: ev.content ? (getParsedContent(content) as ParsedContent) : item.parsedContent
+        parsedContent: parsedContent || item.parsedContent
       }
     })
     .filter(item => {

src/services/bookmarkProcessing.ts

@@ -133,29 +133,36 @@ export async function collectBookmarksFromEvents(
 
     // Handle web bookmarks (kind:39701) as individual bookmarks
     if (evt.kind === 39701) {
+      // Use coordinate format for web bookmarks to enable proper deduplication
+      // Web bookmarks are replaceable events (kind:39701:pubkey:d-tag)
+      const webBookmarkId = dTag ? `${evt.kind}:${evt.pubkey}:${dTag}` : evt.id
+      
       publicItemsAll.push({
-        id: evt.id,
+        id: webBookmarkId,
         content: evt.content || '',
-        created_at: evt.created_at || Math.floor(Date.now() / 1000),
+        created_at: evt.created_at ?? null,
         pubkey: evt.pubkey,
         kind: evt.kind,
         tags: evt.tags || [],
         parsedContent: undefined,
         type: 'web' as const,
         isPrivate: false,
-        added_at: evt.created_at || Math.floor(Date.now() / 1000),
         sourceKind: 39701,
         setName: dTag,
         setTitle,
         setDescription,
-        setImage
+        setImage,
+        listUpdatedAt: evt.created_at ?? null
       })
       continue
     }
 
     const pub = Helpers.getPublicBookmarks(evt)
+    const processedPub = processApplesauceBookmarks(pub, activeAccount, false, evt.created_at)
+    
+    
     publicItemsAll.push(
-      ...processApplesauceBookmarks(pub, activeAccount, false, evt.created_at).map(i => ({
+      ...processedPub.map(i => ({
         ...i,
         sourceKind: evt.kind,
         setName: dTag,

src/services/eventManager.ts

@@ -0,0 +1,162 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { createEventLoader } from 'applesauce-loaders/loaders'
+import { NostrEvent } from 'nostr-tools'
+
+type PendingRequest = {
+  resolve: (event: NostrEvent) => void
+  reject: (error: Error) => void
+}
+
+/**
+ * Centralized event manager for event fetching and caching
+ * Handles deduplication of concurrent requests and coordinate with relay pool
+ */
+class EventManager {
+  private eventStore: IEventStore | null = null
+  private relayPool: RelayPool | null = null
+  private eventLoader: ReturnType<typeof createEventLoader> | null = null
+  
+  // Track pending requests to deduplicate and resolve all at once
+  private pendingRequests = new Map<string, PendingRequest[]>()
+  
+  // Safety timeout for event fetches (ms)
+  private fetchTimeoutMs = 12000
+  // Retry policy
+  private maxAttempts = 4
+  private baseBackoffMs = 700
+  
+  /**
+   * Initialize the event manager with event store and relay pool
+   */
+  setServices(eventStore: IEventStore | null, relayPool: RelayPool | null): void {
+    this.eventStore = eventStore
+    this.relayPool = relayPool
+    
+    // Recreate loader when services change
+    if (relayPool) {
+      this.eventLoader = createEventLoader(relayPool, {
+        eventStore: eventStore || undefined
+      })
+      
+      // Retry any pending requests now that we have a loader
+      this.retryAllPending()
+    }
+  }
+  
+  /**
+   * Get cached event from event store
+   */
+  getCachedEvent(eventId: string): NostrEvent | null {
+    if (!this.eventStore) return null
+    return this.eventStore.getEvent(eventId) || null
+  }
+  
+  /**
+   * Fetch an event by ID, returning a promise
+   * Automatically deduplicates concurrent requests for the same event
+   */
+  fetchEvent(eventId: string): Promise<NostrEvent> {
+    // Check cache first
+    const cached = this.getCachedEvent(eventId)
+    if (cached) {
+      return Promise.resolve(cached)
+    }
+    
+    return new Promise<NostrEvent>((resolve, reject) => {
+      // Check if we're already fetching this event
+      if (this.pendingRequests.has(eventId)) {
+        // Add to existing request queue
+        this.pendingRequests.get(eventId)!.push({ resolve, reject })
+        return
+      }
+      
+      // Start a new fetch request
+      this.pendingRequests.set(eventId, [{ resolve, reject }])
+      this.fetchFromRelayWithRetry(eventId, 1)
+    })
+  }
+  
+  private resolvePending(eventId: string, event: NostrEvent): void {
+    const requests = this.pendingRequests.get(eventId) || []
+    this.pendingRequests.delete(eventId)
+    requests.forEach(req => req.resolve(event))
+  }
+  
+  private rejectPending(eventId: string, error: Error): void {
+    const requests = this.pendingRequests.get(eventId) || []
+    this.pendingRequests.delete(eventId)
+    requests.forEach(req => req.reject(error))
+  }
+  
+  private fetchFromRelayWithRetry(eventId: string, attempt: number): void {
+    // If no loader yet, schedule retry
+    if (!this.relayPool || !this.eventLoader) {
+      setTimeout(() => {
+        if (this.pendingRequests.has(eventId)) {
+          this.fetchFromRelayWithRetry(eventId, attempt)
+        }
+      }, this.baseBackoffMs)
+      return
+    }
+    
+    let delivered = false
+    const subscription = this.eventLoader({ id: eventId }).subscribe({
+      next: (event: NostrEvent) => {
+        delivered = true
+        clearTimeout(timeoutId)
+        this.resolvePending(eventId, event)
+        subscription.unsubscribe()
+      },
+      error: (err: unknown) => {
+        clearTimeout(timeoutId)
+        const error = err instanceof Error ? err : new Error(String(err))
+        // Retry on error until attempts exhausted
+        if (attempt < this.maxAttempts && this.pendingRequests.has(eventId)) {
+          setTimeout(() => this.fetchFromRelayWithRetry(eventId, attempt + 1), this.baseBackoffMs * attempt)
+        } else {
+          this.rejectPending(eventId, error)
+        }
+        subscription.unsubscribe()
+      },
+      complete: () => {
+        // Completed without next - consider not found, but retry a few times
+        if (!delivered) {
+          clearTimeout(timeoutId)
+          if (attempt < this.maxAttempts && this.pendingRequests.has(eventId)) {
+            setTimeout(() => this.fetchFromRelayWithRetry(eventId, attempt + 1), this.baseBackoffMs * attempt)
+          } else {
+            this.rejectPending(eventId, new Error('Event not found'))
+          }
+        }
+        subscription.unsubscribe()
+      }
+    })
+    
+    // Safety timeout
+    const timeoutId = setTimeout(() => {
+      if (!delivered) {
+        if (attempt < this.maxAttempts && this.pendingRequests.has(eventId)) {
+          subscription.unsubscribe()
+          this.fetchFromRelayWithRetry(eventId, attempt + 1)
+        } else {
+          subscription.unsubscribe()
+          this.rejectPending(eventId, new Error('Timed out fetching event'))
+        }
+      }
+    }, this.fetchTimeoutMs)
+  }
+  
+  /**
+   * Retry all pending requests after relay pool becomes available
+   */
+  private retryAllPending(): void {
+    const pendingIds = Array.from(this.pendingRequests.keys())
+    pendingIds.forEach(eventId => {
+      this.fetchFromRelayWithRetry(eventId, 1)
+    })
+  }
+}
+
+// Singleton instance
+export const eventManager = new EventManager()

src/services/exploreService.ts

@@ -1,8 +1,9 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
+import { Helpers, IEventStore } from 'applesauce-core'
 import { queryEvents } from './dataFetch'
 import { KINDS } from '../config/kinds'
+import { cacheArticleEvent } from './articleService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -22,6 +23,7 @@ export interface BlogPostPreview {
  * @param relayUrls - Array of relay URLs to query
  * @param onPost - Optional callback for streaming posts
  * @param limit - Limit for number of events to fetch (default: 100, pass null for no limit)
+ * @param eventStore - Optional event store to persist fetched events
  * @returns Array of blog post previews
  */
 export const fetchBlogPostsFromAuthors = async (
@@ -29,7 +31,8 @@ export const fetchBlogPostsFromAuthors = async (
   pubkeys: string[],
   relayUrls: string[],
   onPost?: (post: BlogPostPreview) => void,
-  limit: number | null = 100
+  limit: number | null = 100,
+  eventStore?: IEventStore
 ): Promise<BlogPostPreview[]> => {
   try {
     if (pubkeys.length === 0) {
@@ -45,12 +48,17 @@ export const fetchBlogPostsFromAuthors = async (
       ? { kinds: [KINDS.BlogPost], authors: pubkeys, limit }
       : { kinds: [KINDS.BlogPost], authors: pubkeys }
 
-    await queryEvents(
+    const events = await queryEvents(
       relayPool,
       filter,
       {
         relayUrls,
         onEvent: (event: NostrEvent) => {
+          // Store in event store immediately if provided
+          if (eventStore) {
+            eventStore.add(event)
+          }
+
           const dTag = event.tags.find(t => t[0] === 'd')?.[1] || ''
           const key = `${event.pubkey}:${dTag}`
           const existing = uniqueEvents.get(key)
@@ -68,11 +76,18 @@ export const fetchBlogPostsFromAuthors = async (
               }
               onPost(post)
             }
+            
+            // Cache article content in localStorage for offline access
+            cacheArticleEvent(event)
           }
         }
       }
     )
 
+    // Store all events in event store if provided (safety net for any missed during streaming)
+    if (eventStore) {
+      events.forEach(evt => eventStore.add(evt))
+    }
     
     // Convert to blog post previews and sort by published date (most recent first)
     const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
@@ -94,7 +109,6 @@ export const fetchBlogPostsFromAuthors = async (
         return timeB - timeA // Most recent first
       })
     
-    
     return blogPosts
   } catch (error) {
     console.error('Failed to fetch blog posts:', error)

src/services/highlightCreationService.ts

@@ -7,13 +7,22 @@ import { Helpers, IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from './settingsService'
-import { isLocalRelay, areAllRelaysLocal } from '../utils/helpers'
+import { isLocalRelay } from '../utils/helpers'
-import { publishEvent } from './writeService'
+import { setHighlightMetadata } from './highlightEventProcessor'
 
 // Boris pubkey for zap splits
 // npub19802see0gnk3vjlus0dnmfdagusqrtmsxpl5yfmkwn9uvnfnqylqduhr0x
 export const BORIS_PUBKEY = '29dea8672f44ed164bfc83db3da5bd472001af70307f42277674cbc64d33013e'
 
+// Extended event type with highlight metadata
+interface HighlightEvent extends NostrEvent {
+  __highlightProps?: {
+    publishedRelays?: string[]
+    isLocalOnly?: boolean
+    isSyncing?: boolean
+  }
+}
+
 const {
   getHighlightText,
   getHighlightContext,
@@ -118,25 +127,111 @@ export async function createHighlight(
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Use unified write service to store and publish
+  // Initialize custom properties on the event (will be updated after publishing)
-  await publishEvent(relayPool, eventStore, signedEvent)
+  ;(signedEvent as HighlightEvent).__highlightProps = {
+    publishedRelays: [],
+    isLocalOnly: false,
+    isSyncing: false
+  }
 
-  // Check current connection status for UI feedback
+  // Get only connected relays to avoid long timeouts
   const connectedRelays = Array.from(relayPool.relays.values())
     .filter(relay => relay.connected)
     .map(relay => relay.url)
   
-  const hasRemoteConnection = connectedRelays.some(url => !isLocalRelay(url))
+  let publishResponses: { ok: boolean; message?: string; from: string }[] = []
-  const expectedSuccessRelays = hasRemoteConnection
+  let isLocalOnly = false
-    ? RELAYS
-    : RELAYS.filter(isLocalRelay)
-  const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
 
-  // Convert to Highlight with relay tracking info and return IMMEDIATELY
+
+  try {
+    // Publish only to connected relays to avoid long timeouts
+    if (connectedRelays.length === 0) {
+      isLocalOnly = true
+    } else {
+      publishResponses = await relayPool.publish(connectedRelays, signedEvent)
+    }
+    
+    // Determine which relays successfully accepted the event
+    const successfulRelays = publishResponses
+      .filter(response => response.ok)
+      .map(response => response.from)
+    
+    const successfulLocalRelays = successfulRelays.filter(url => isLocalRelay(url))
+    const successfulRemoteRelays = successfulRelays.filter(url => !isLocalRelay(url))
+    
+    // isLocalOnly is true if only local relays accepted the event
+    isLocalOnly = successfulLocalRelays.length > 0 && successfulRemoteRelays.length === 0
+
+
+    // Handle case when no relays were connected
+    const successfulRelaysList = publishResponses.length > 0
+      ? publishResponses
+          .filter(response => response.ok)
+          .map(response => response.from)
+      : []
+
+    // Store metadata in cache (persists across EventStore serialization)
+    setHighlightMetadata(signedEvent.id, {
+      publishedRelays: successfulRelaysList,
+      isLocalOnly,
+      isSyncing: false
+    })
+
+    // Also update the event with the actual properties (for backwards compatibility)
+    ;(signedEvent as HighlightEvent).__highlightProps = {
+      publishedRelays: successfulRelaysList,
+      isLocalOnly,
+      isSyncing: false
+    }
+
+    // Store the event in EventStore AFTER updating with final properties
+    eventStore.add(signedEvent)
+
+    // Mark for offline sync if we're in local-only mode
+    if (isLocalOnly) {
+      const { markEventAsOfflineCreated } = await import('./offlineSyncService')
+      markEventAsOfflineCreated(signedEvent.id)
+    }
+
+  } catch (error) {
+    console.error('❌ [HIGHLIGHT-PUBLISH] Failed to publish highlight to relays:', error)
+    // If publishing fails completely, assume local-only mode
+    isLocalOnly = true
+    
+    // Store metadata in cache (persists across EventStore serialization)
+    setHighlightMetadata(signedEvent.id, {
+      publishedRelays: [],
+      isLocalOnly: true,
+      isSyncing: false
+    })
+    
+    // Also update the event with the error state (for backwards compatibility)
+    ;(signedEvent as HighlightEvent).__highlightProps = {
+      publishedRelays: [],
+      isLocalOnly: true,
+      isSyncing: false
+    }
+    
+    // Store the event in EventStore AFTER updating with final properties
+    eventStore.add(signedEvent)
+    
+    const { markEventAsOfflineCreated } = await import('./offlineSyncService')
+    markEventAsOfflineCreated(signedEvent.id)
+  }
+
+  // Convert to Highlight with relay tracking info
   const highlight = eventToHighlight(signedEvent)
-  highlight.publishedRelays = expectedSuccessRelays
+  
+  // Manually set the properties since __highlightProps might not be working
+  const finalPublishedRelays = publishResponses.length > 0
+    ? publishResponses
+        .filter(response => response.ok)
+        .map(response => response.from)
+    : []
+  
+  highlight.publishedRelays = finalPublishedRelays
   highlight.isLocalOnly = isLocalOnly
-  highlight.isOfflineCreated = isLocalOnly
+  highlight.isSyncing = false
 
   return highlight
 }

src/services/highlightEventProcessor.ts

@@ -2,6 +2,15 @@ import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { Highlight } from '../types/highlights'
 
+// Extended event type with highlight metadata
+interface HighlightEvent extends NostrEvent {
+  __highlightProps?: {
+    publishedRelays?: string[]
+    isLocalOnly?: boolean
+    isSyncing?: boolean
+  }
+}
+
 const {
   getHighlightText,
   getHighlightContext,
@@ -12,6 +21,66 @@ const {
   getHighlightAttributions
 } = Helpers
 
+const METADATA_CACHE_KEY = 'highlightMetadataCache'
+
+type HighlightMetadata = {
+  publishedRelays?: string[]
+  isLocalOnly?: boolean
+  isSyncing?: boolean
+}
+
+/**
+ * Load highlight metadata from localStorage
+ */
+function loadHighlightMetadataFromStorage(): Map<string, HighlightMetadata> {
+  try {
+    const raw = localStorage.getItem(METADATA_CACHE_KEY)
+    if (!raw) return new Map()
+    
+    const parsed = JSON.parse(raw) as Record<string, HighlightMetadata>
+    return new Map(Object.entries(parsed))
+  } catch {
+    // Silently fail on parse errors or if storage is unavailable
+    return new Map()
+  }
+}
+
+/**
+ * Save highlight metadata to localStorage
+ */
+function saveHighlightMetadataToStorage(cache: Map<string, HighlightMetadata>): void {
+  try {
+    const record = Object.fromEntries(cache.entries())
+    localStorage.setItem(METADATA_CACHE_KEY, JSON.stringify(record))
+  } catch {
+    // Silently fail if storage is full or unavailable
+  }
+}
+
+/**
+ * Cache for highlight metadata that persists across EventStore serialization
+ * Key: event ID, Value: { publishedRelays, isLocalOnly, isSyncing }
+ */
+const highlightMetadataCache = loadHighlightMetadataFromStorage()
+
+/**
+ * Store highlight metadata for an event ID
+ */
+export function setHighlightMetadata(
+  eventId: string,
+  metadata: HighlightMetadata
+): void {
+  highlightMetadataCache.set(eventId, metadata)
+  saveHighlightMetadataToStorage(highlightMetadataCache)
+}
+
+/**
+ * Get highlight metadata for an event ID
+ */
+export function getHighlightMetadata(eventId: string): HighlightMetadata | undefined {
+  return highlightMetadataCache.get(eventId)
+}
+
 /**
  * Convert a NostrEvent to a Highlight object
  */
@@ -28,6 +97,12 @@ export function eventToHighlight(event: NostrEvent): Highlight {
   const eventReference = sourceEventPointer?.id || 
     (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
   
+  // Check cache first (persists across EventStore serialization)
+  const cachedMetadata = getHighlightMetadata(event.id)
+  
+  // Fall back to __highlightProps if cache doesn't have it (for backwards compatibility)
+  const customProps = cachedMetadata || (event as HighlightEvent).__highlightProps || {}
+  
   return {
     id: event.id,
     pubkey: event.pubkey,
@@ -38,7 +113,11 @@ export function eventToHighlight(event: NostrEvent): Highlight {
     urlReference: sourceUrl,
     author,
     context,
-    comment
+    comment,
+    // Preserve custom properties if they exist
+    publishedRelays: customProps.publishedRelays,
+    isLocalOnly: customProps.isLocalOnly,
+    isSyncing: customProps.isSyncing
   }
 }
 

src/services/highlights/fetchFromAuthors.ts

@@ -28,7 +28,7 @@ export const fetchHighlightsFromAuthors = async (
     const seenIds = new Set<string>()
     const rawEvents = await queryEvents(
       relayPool,
-      { kinds: [9802], authors: pubkeys, limit: 200 },
+      { kinds: [9802], authors: pubkeys, limit: 1000 },
       {
         onEvent: (event: NostrEvent) => {
           if (!seenIds.has(event.id)) {

src/services/highlightsController.ts

@@ -8,8 +8,6 @@ import { eventToHighlight, sortHighlights } from './highlightEventProcessor'
 type HighlightsCallback = (highlights: Highlight[]) => void
 type LoadingCallback = (loading: boolean) => void
 
-const LAST_SYNCED_KEY = 'highlights_last_synced'
-
 /**
  * Shared highlights controller
  * Manages the user's highlights centrally, similar to bookmarkController
@@ -68,37 +66,10 @@ class HighlightsController {
     this.emitHighlights(this.currentHighlights)
   }
 
-  /**
-   * Get last synced timestamp for incremental loading
-   */
-  private getLastSyncedAt(pubkey: string): number | null {
-    try {
-      const data = localStorage.getItem(LAST_SYNCED_KEY)
-      if (!data) return null
-      const parsed = JSON.parse(data)
-      return parsed[pubkey] || null
-    } catch {
-      return null
-    }
-  }
-
-  /**
-   * Update last synced timestamp
-   */
-  private setLastSyncedAt(pubkey: string, timestamp: number): void {
-    try {
-      const data = localStorage.getItem(LAST_SYNCED_KEY)
-      const parsed = data ? JSON.parse(data) : {}
-      parsed[pubkey] = timestamp
-      localStorage.setItem(LAST_SYNCED_KEY, JSON.stringify(parsed))
-    } catch (err) {
-      console.warn('[highlights] Failed to save last synced timestamp:', err)
-    }
-  }
-
   /**
    * Load highlights for a user
    * Streams results and stores in event store
+   * Always fetches ALL highlights to ensure completeness
    */
   async start(options: {
     relayPool: RelayPool
@@ -124,15 +95,12 @@ class HighlightsController {
       const seenIds = new Set<string>()
       const highlightsMap = new Map<string, Highlight>()
 
-      // Get last synced timestamp for incremental loading
+      // Fetch ALL highlights without limits (no since filter)
-      const lastSyncedAt = force ? null : this.getLastSyncedAt(pubkey)
+      // This ensures we get complete results for profile/my pages
-      const filter: { kinds: number[]; authors: string[]; since?: number } = {
+      const filter = {
         kinds: [KINDS.Highlights],
         authors: [pubkey]
       }
-      if (lastSyncedAt) {
-        filter.since = lastSyncedAt
-      }
 
       const events = await queryEvents(
         relayPool,
@@ -179,12 +147,6 @@ class HighlightsController {
       this.lastLoadedPubkey = pubkey
       this.emitHighlights(sorted)
 
-      // Update last synced timestamp
-      if (sorted.length > 0) {
-        const newestTimestamp = Math.max(...sorted.map(h => h.created_at))
-        this.setLastSyncedAt(pubkey, newestTimestamp)
-      }
-
     } catch (error) {
       console.error('[highlights] ❌ Failed to load highlights:', error)
       this.currentHighlights = []

src/services/imageCacheService.ts

@@ -5,7 +5,8 @@
  * Service Worker automatically caches images on fetch
  */
 
-const CACHE_NAME = 'boris-image-cache-v1'
+// Must match the cache name in src/sw.ts
+const CACHE_NAME = 'boris-images'
 
 /**
  * Clear all cached images

src/services/nostrverseHighlightsController.ts

@@ -81,13 +81,21 @@ class NostrverseHighlightsController {
     const currentGeneration = this.generation
     this.setLoading(true)
 
-    try {
+  try {
-      const seenIds = new Set<string>()
+    const seenIds = new Set<string>()
-      const highlightsMap = new Map<string, Highlight>()
+    // Start with existing highlights when doing incremental sync
+    const highlightsMap = new Map<string, Highlight>(
+      this.currentHighlights.map(h => [h.id, h])
+    )
 
-      const lastSyncedAt = force ? null : this.getLastSyncedAt()
+    const lastSyncedAt = force ? null : this.getLastSyncedAt()
-      const filter: { kinds: number[]; since?: number } = { kinds: [KINDS.Highlights] }
+    const filter: { kinds: number[]; since?: number; limit?: number } = { kinds: [KINDS.Highlights] }
-      if (lastSyncedAt) filter.since = lastSyncedAt
+    if (lastSyncedAt) {
+      filter.since = lastSyncedAt
+    } else {
+      // On initial load, fetch more highlights
+      filter.limit = 1000
+    }
 
       const events = await queryEvents(
         relayPool,
@@ -111,22 +119,24 @@ class NostrverseHighlightsController {
 
       if (currentGeneration !== this.generation) return
 
-      events.forEach(evt => eventStore.add(evt))
+    events.forEach(evt => eventStore.add(evt))
 
-      const highlights = events.map(eventToHighlight)
+    const highlights = events.map(eventToHighlight)
-      const unique = Array.from(new Map(highlights.map(h => [h.id, h])).values())
+    // Merge new highlights with existing ones
-      const sorted = sortHighlights(unique)
+    highlights.forEach(h => highlightsMap.set(h.id, h))
+    const sorted = sortHighlights(Array.from(highlightsMap.values()))
 
-      this.currentHighlights = sorted
+    this.currentHighlights = sorted
-      this.loaded = true
+    this.loaded = true
-      this.emitHighlights(sorted)
+    this.emitHighlights(sorted)
 
       if (sorted.length > 0) {
         const newest = Math.max(...sorted.map(h => h.created_at))
         this.setLastSyncedAt(newest)
       }
     } catch (err) {
-      this.currentHighlights = []
+      // On error, keep existing highlights instead of clearing them
+      console.error('[nostrverse-highlights] Failed to sync:', err)
       this.emitHighlights(this.currentHighlights)
     } finally {
       if (currentGeneration === this.generation) this.setLoading(false)

src/services/nostrverseService.ts

@@ -5,6 +5,7 @@ import { BlogPostPreview } from './exploreService'
 import { Highlight } from '../types/highlights'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
 import { queryEvents } from './dataFetch'
+import { cacheArticleEvent } from './articleService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -57,6 +58,9 @@ export const fetchNostrverseBlogPosts = async (
               }
               onPost(post)
             }
+            
+            // Cache article content in localStorage for offline access
+            cacheArticleEvent(event)
           }
         }
       }
@@ -79,7 +83,6 @@ export const fetchNostrverseBlogPosts = async (
         return timeB - timeA // Most recent first
       })
     
-    
     return blogPosts
   } catch (error) {
     console.error('Failed to fetch nostrverse blog posts:', error)

src/services/offlineSyncService.ts

@@ -3,11 +3,42 @@ import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { isLocalRelay } from '../utils/helpers'
+import { setHighlightMetadata, getHighlightMetadata } from './highlightEventProcessor'
+
+const OFFLINE_EVENTS_KEY = 'offlineCreatedEvents'
 
 let isSyncing = false
 
+/**
+ * Load offline events from localStorage
+ */
+function loadOfflineEventsFromStorage(): Set<string> {
+  try {
+    const raw = localStorage.getItem(OFFLINE_EVENTS_KEY)
+    if (!raw) return new Set()
+    
+    const parsed = JSON.parse(raw) as string[]
+    return new Set(parsed)
+  } catch {
+    // Silently fail on parse errors or if storage is unavailable
+    return new Set()
+  }
+}
+
+/**
+ * Save offline events to localStorage
+ */
+function saveOfflineEventsToStorage(events: Set<string>): void {
+  try {
+    const array = Array.from(events)
+    localStorage.setItem(OFFLINE_EVENTS_KEY, JSON.stringify(array))
+  } catch {
+    // Silently fail if storage is full or unavailable
+  }
+}
+
 // Track events created during offline period
-const offlineCreatedEvents = new Set<string>()
+const offlineCreatedEvents = loadOfflineEventsFromStorage()
 
 // Track events currently being synced
 const syncingEvents = new Set<string>()
@@ -20,6 +51,14 @@ const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> =
  */
 export function markEventAsOfflineCreated(eventId: string): void {
   offlineCreatedEvents.add(eventId)
+  saveOfflineEventsToStorage(offlineCreatedEvents)
+}
+
+/**
+ * Check if an event was created during offline period (flight mode)
+ */
+export function isEventOfflineCreated(eventId: string): boolean {
+  return offlineCreatedEvents.has(eventId)
 }
 
 /**
@@ -87,6 +126,7 @@ export async function syncLocalEventsToRemote(
     if (eventsToSync.length === 0) {
       isSyncing = false
       offlineCreatedEvents.clear()
+      saveOfflineEventsToStorage(offlineCreatedEvents)
       return
     }
 
@@ -95,10 +135,17 @@ export async function syncLocalEventsToRemote(
       new Map(eventsToSync.map(e => [e.id, e])).values()
     )
 
-    // Mark all events as syncing
+    // Mark all events as syncing and update metadata
     uniqueEvents.forEach(event => {
       syncingEvents.add(event.id)
       notifySyncStateChange(event.id, true)
+      
+      // Update metadata cache to reflect syncing state
+      const existingMetadata = getHighlightMetadata(event.id)
+      setHighlightMetadata(event.id, {
+        ...existingMetadata,
+        isSyncing: true
+      })
     })
 
     // Publish to remote relays
@@ -118,13 +165,32 @@ export async function syncLocalEventsToRemote(
       syncingEvents.delete(eventId)
       offlineCreatedEvents.delete(eventId)
       notifySyncStateChange(eventId, false)
+      
+      // Update metadata cache: sync complete, no longer local-only
+      const existingMetadata = getHighlightMetadata(eventId)
+      setHighlightMetadata(eventId, {
+        ...existingMetadata,
+        isSyncing: false,
+        isLocalOnly: false
+      })
     })
     
+    // Save updated offline events set to localStorage
+    saveOfflineEventsToStorage(offlineCreatedEvents)
+    
     // Clear syncing state for failed events
     uniqueEvents.forEach(event => {
       if (!successfulIds.includes(event.id)) {
         syncingEvents.delete(event.id)
         notifySyncStateChange(event.id, false)
+        
+        // Update metadata cache: sync failed, still local-only
+        const existingMetadata = getHighlightMetadata(event.id)
+        setHighlightMetadata(event.id, {
+          ...existingMetadata,
+          isSyncing: false
+          // Keep isLocalOnly as true (sync failed)
+        })
       }
     })
   } catch (error) {

src/services/opengraphEnhancer.ts

@@ -0,0 +1,114 @@
+import { fetch as fetchOpenGraph } from 'fetch-opengraph'
+import { ReadItem } from './readsService'
+
+// Cache for OpenGraph data to avoid repeated requests
+const ogCache = new Map<string, Record<string, unknown>>()
+
+function getCachedOgData(url: string): Record<string, unknown> | null {
+  const cached = ogCache.get(url)
+  if (!cached) return null
+  
+  return cached
+}
+
+function setCachedOgData(url: string, data: Record<string, unknown>): void {
+  ogCache.set(url, data)
+}
+
+/**
+ * Enhances a ReadItem with OpenGraph data
+ * Only fetches if the item doesn't already have good metadata
+ */
+export async function enhanceReadItemWithOpenGraph(item: ReadItem): Promise<ReadItem> {
+  // Skip if we already have good metadata
+  if (item.title && item.title !== fallbackTitleFromUrl(item.url || '') && item.image) {
+    return item
+  }
+  
+  if (!item.url) return item
+  
+  try {
+    // Check cache first
+    let ogData = getCachedOgData(item.url)
+    
+    if (!ogData) {
+      // Fetch OpenGraph data
+      const fetchedOgData = await fetchOpenGraph(item.url)
+      if (fetchedOgData) {
+        ogData = fetchedOgData
+        setCachedOgData(item.url, fetchedOgData)
+      }
+    }
+    
+    if (!ogData) return item
+    
+    // Enhance the item with OpenGraph data
+    const enhanced: ReadItem = { ...item }
+    
+    // Use OpenGraph title if we don't have a good title
+    if (!enhanced.title || enhanced.title === fallbackTitleFromUrl(item.url)) {
+      const ogTitle = ogData['og:title'] || ogData['twitter:title'] || ogData.title
+      if (typeof ogTitle === 'string') {
+        enhanced.title = ogTitle
+      }
+    }
+    
+    // Use OpenGraph description if we don't have a summary
+    if (!enhanced.summary) {
+      const ogDescription = ogData['og:description'] || ogData['twitter:description'] || ogData.description
+      if (typeof ogDescription === 'string') {
+        enhanced.summary = ogDescription
+      }
+    }
+    
+    // Use OpenGraph image if we don't have an image
+    if (!enhanced.image) {
+      const ogImage = ogData['og:image'] || ogData['twitter:image'] || ogData.image
+      if (typeof ogImage === 'string') {
+        enhanced.image = ogImage
+      }
+    }
+    
+    return enhanced
+  } catch (error) {
+    console.warn('Failed to enhance ReadItem with OpenGraph data:', error)
+    return item
+  }
+}
+
+/**
+ * Enhances multiple ReadItems with OpenGraph data in parallel
+ * Uses batching to avoid overwhelming the service
+ */
+export async function enhanceReadItemsWithOpenGraph(items: ReadItem[]): Promise<ReadItem[]> {
+  const BATCH_SIZE = 5
+  const BATCH_DELAY = 1000 // 1 second between batches
+  
+  const enhancedItems: ReadItem[] = []
+  
+  for (let i = 0; i < items.length; i += BATCH_SIZE) {
+    const batch = items.slice(i, i + BATCH_SIZE)
+    
+    // Process batch in parallel
+    const batchPromises = batch.map(item => enhanceReadItemWithOpenGraph(item))
+    const batchResults = await Promise.all(batchPromises)
+    enhancedItems.push(...batchResults)
+    
+    // Add delay between batches to be respectful to the service
+    if (i + BATCH_SIZE < items.length) {
+      await new Promise(resolve => setTimeout(resolve, BATCH_DELAY))
+    }
+  }
+  
+  return enhancedItems
+}
+
+// Helper function to generate fallback title from URL
+function fallbackTitleFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    return urlObj.hostname.replace('www.', '')
+  } catch {
+    return url
+  }
+}

src/services/profileService.ts

@@ -1,78 +1,325 @@
 import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, toArray, tap } from 'rxjs'
+import { lastValueFrom, merge, Observable, toArray, tap } from 'rxjs'
 import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
 import { prioritizeLocalRelays, partitionRelays } from '../utils/helpers'
 import { rebroadcastEvents } from './rebroadcastService'
 import { UserSettings } from './settingsService'
 
+interface CachedProfile {
+  event: NostrEvent
+  timestamp: number
+  lastAccessed: number // For LRU eviction
+}
+
+const PROFILE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000 // 30 days in milliseconds (profiles change less frequently than articles)
+const PROFILE_CACHE_PREFIX = 'profile_cache_'
+const MAX_CACHED_PROFILES = 1000 // Limit number of cached profiles to prevent quota issues
+let quotaExceededLogged = false // Only log quota error once per session
+
+// Request deduplication: track in-flight fetch requests by sorted pubkey array
+// Key: sorted, comma-separated pubkeys, Value: Promise for that fetch
+const inFlightRequests = new Map<string, Promise<NostrEvent[]>>()
+
+function getProfileCacheKey(pubkey: string): string {
+  return `${PROFILE_CACHE_PREFIX}${pubkey}`
+}
+
+/**
+ * Get a cached profile from localStorage
+ * Returns null if not found, expired, or on error
+ * Updates lastAccessed timestamp for LRU eviction
+ */
+export function getCachedProfile(pubkey: string): NostrEvent | null {
+  try {
+    const cacheKey = getProfileCacheKey(pubkey)
+    const cached = localStorage.getItem(cacheKey)
+    if (!cached) {
+      return null
+    }
+
+    const data: CachedProfile = JSON.parse(cached)
+    const age = Date.now() - data.timestamp
+
+    if (age > PROFILE_CACHE_TTL) {
+      localStorage.removeItem(cacheKey)
+      return null
+    }
+
+    // Update lastAccessed for LRU eviction (but don't fail if update fails)
+    try {
+      data.lastAccessed = Date.now()
+      localStorage.setItem(cacheKey, JSON.stringify(data))
+    } catch {
+      // Ignore update errors, still return the profile
+    }
+
+    return data.event
+  } catch (err) {
+    // Silently handle cache read errors (quota, invalid data, etc.)
+    return null
+  }
+}
+
+/**
+ * Get all cached profile keys for eviction
+ */
+function getAllCachedProfileKeys(): Array<{ key: string; lastAccessed: number }> {
+  const keys: Array<{ key: string; lastAccessed: number }> = []
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && key.startsWith(PROFILE_CACHE_PREFIX)) {
+        try {
+          const cached = localStorage.getItem(key)
+          if (cached) {
+            const data: CachedProfile = JSON.parse(cached)
+            keys.push({
+              key,
+              lastAccessed: data.lastAccessed || data.timestamp || 0
+            })
+          }
+        } catch {
+          // Skip invalid entries
+        }
+      }
+    }
+  } catch {
+    // Ignore errors during enumeration
+  }
+  return keys
+}
+
+/**
+ * Evict oldest profiles (LRU) to free up space
+ * Removes the oldest accessed profiles until we're under the limit
+ */
+function evictOldProfiles(targetCount: number): void {
+  try {
+    const keys = getAllCachedProfileKeys()
+    if (keys.length <= targetCount) {
+      return
+    }
+
+    // Sort by lastAccessed (oldest first) and remove oldest
+    keys.sort((a, b) => a.lastAccessed - b.lastAccessed)
+    const toRemove = keys.slice(0, keys.length - targetCount)
+    
+    for (const { key } of toRemove) {
+      localStorage.removeItem(key)
+    }
+  } catch {
+    // Silently fail eviction
+  }
+}
+
+/**
+ * Cache a profile to localStorage
+ * Handles errors gracefully (quota exceeded, invalid data, etc.)
+ * Implements LRU eviction when cache is full
+ */
+export function cacheProfile(profile: NostrEvent): void {
+  try {
+    if (profile.kind !== 0) {
+      return // Only cache kind:0 (profile) events
+    }
+
+    const cacheKey = getProfileCacheKey(profile.pubkey)
+    
+    // Check if we need to evict before caching
+    const existingKeys = getAllCachedProfileKeys()
+    if (existingKeys.length >= MAX_CACHED_PROFILES) {
+      // Check if this profile is already cached
+      const alreadyCached = existingKeys.some(k => k.key === cacheKey)
+      if (!alreadyCached) {
+        // Evict oldest profiles to make room (keep 90% of max)
+        evictOldProfiles(Math.floor(MAX_CACHED_PROFILES * 0.9))
+      }
+    }
+
+    const cached: CachedProfile = {
+      event: profile,
+      timestamp: Date.now(),
+      lastAccessed: Date.now()
+    }
+    localStorage.setItem(cacheKey, JSON.stringify(cached))
+  } catch (err) {
+    // Handle quota exceeded by evicting and retrying once
+    if (err instanceof DOMException && err.name === 'QuotaExceededError') {
+      if (!quotaExceededLogged) {
+        console.warn(`[npub-cache] localStorage quota exceeded, evicting old profiles...`)
+        quotaExceededLogged = true
+      }
+      
+      // Try evicting more aggressively and retry
+      try {
+        evictOldProfiles(Math.floor(MAX_CACHED_PROFILES * 0.5))
+        const cached: CachedProfile = {
+          event: profile,
+          timestamp: Date.now(),
+          lastAccessed: Date.now()
+        }
+        localStorage.setItem(getProfileCacheKey(profile.pubkey), JSON.stringify(cached))
+      } catch {
+        // Silently fail if still can't cache - don't block the UI
+      }
+    }
+    // Silently handle other caching errors (invalid data, etc.)
+  }
+}
+
+/**
+ * Batch load multiple profiles from localStorage cache
+ * Returns a Map of pubkey -> NostrEvent for all found profiles
+ */
+export function loadCachedProfiles(pubkeys: string[]): Map<string, NostrEvent> {
+  const cached = new Map<string, NostrEvent>()
+  
+  for (const pubkey of pubkeys) {
+    const profile = getCachedProfile(pubkey)
+    if (profile) {
+      cached.set(pubkey, profile)
+    }
+  }
+  
+  return cached
+}
+
 /**
  * Fetches profile metadata (kind:0) for a list of pubkeys
- * Stores profiles in the event store and optionally to local relays
+ * Checks localStorage cache first, then fetches from relays for missing/expired profiles
+ * Stores profiles in the event store and caches to localStorage
+ * Implements request deduplication to prevent duplicate relay requests for the same pubkey sets
  */
 export const fetchProfiles = async (
   relayPool: RelayPool,
   eventStore: IEventStore,
   pubkeys: string[],
-  settings?: UserSettings
+  settings?: UserSettings,
+  onEvent?: (event: NostrEvent) => void
 ): Promise<NostrEvent[]> => {
   try {
     if (pubkeys.length === 0) {
       return []
     }
 
-    const uniquePubkeys = Array.from(new Set(pubkeys))
+    const uniquePubkeys = Array.from(new Set(pubkeys)).sort()
     
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    // Check for in-flight request with same pubkey set (deduplication)
-    const prioritized = prioritizeLocalRelays(relayUrls)
+    const requestKey = uniquePubkeys.join(',')
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+    const existingRequest = inFlightRequests.get(requestKey)
+    if (existingRequest) {
+      return existingRequest
+    }
     
-    // Keep only the most recent profile for each pubkey
+    // Create the fetch promise and track it
-    const profilesByPubkey = new Map<string, NostrEvent>()
+    const fetchPromise = (async () => {
+      // First, check localStorage cache for all requested profiles
+      const cachedProfiles = loadCachedProfiles(uniquePubkeys)
+      const profilesByPubkey = new Map<string, NostrEvent>()
       
-    const processEvent = (event: NostrEvent) => {
+      // Add cached profiles to the map and EventStore
-      const existing = profilesByPubkey.get(event.pubkey)
+      for (const [pubkey, profile] of cachedProfiles.entries()) {
-      if (!existing || event.created_at > existing.created_at) {
+        profilesByPubkey.set(pubkey, profile)
-        profilesByPubkey.set(event.pubkey, event)
+        // Ensure cached profiles are also in EventStore for consistency
-        // Store in event store immediately
+        eventStore.add(profile)
-        eventStore.add(event)
       }
-    }
       
-    const local$ = localRelays.length > 0
+      // Determine which pubkeys need to be fetched from relays
-      ? relayPool
+      const pubkeysToFetch = uniquePubkeys.filter(pubkey => !cachedProfiles.has(pubkey))
-          .req(localRelays, { kinds: [0], authors: uniquePubkeys })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => processEvent(event)),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
       
-    const remote$ = remoteRelays.length > 0
+      // If all profiles are cached, return early
-      ? relayPool
+      if (pubkeysToFetch.length === 0) {
-          .req(remoteRelays, { kinds: [0], authors: uniquePubkeys })
+        return Array.from(profilesByPubkey.values())
-          .pipe(
+      }
-            onlyEvents(),
-            tap((event: NostrEvent) => processEvent(event)),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
 
-    await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+      // Fetch missing profiles from relays
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+      const prioritized = prioritizeLocalRelays(relayUrls)
+      const { local: localRelays, remote: remoteRelays } = partitionRelays(prioritized)
+      const hasPurplePages = relayUrls.some(url => url.includes('purplepag.es'))
+      if (!hasPurplePages) {
+        console.warn(`[fetch-profiles] purplepag.es not in active relay pool, adding it temporarily`)
+        // Add purplepag.es if it's not in the pool (it might not have connected yet)
+        const purplePagesUrl = 'wss://purplepag.es'
+        if (!relayPool.relays.has(purplePagesUrl)) {
+          relayPool.group([purplePagesUrl])
+        }
+        // Ensure it's included in the remote relays for this fetch
+        if (!remoteRelays.includes(purplePagesUrl)) {
+          remoteRelays.push(purplePagesUrl)
+        }
+      }
+      const fetchedPubkeys = new Set<string>()
 
-    const profiles = Array.from(profilesByPubkey.values())
+      const processEvent = (event: NostrEvent) => {
+        fetchedPubkeys.add(event.pubkey)
+        const existing = profilesByPubkey.get(event.pubkey)
+        if (!existing || event.created_at > existing.created_at) {
+          profilesByPubkey.set(event.pubkey, event)
+          // Store in event store immediately
+          eventStore.add(event)
+          // Cache to localStorage for future use
+          cacheProfile(event)
+        }
+      }
 
-    // Rebroadcast profiles to local/all relays based on settings
+      const local$ = localRelays.length > 0
-    if (profiles.length > 0) {
+        ? relayPool
-      await rebroadcastEvents(profiles, relayPool, settings)
+            .req(localRelays, { kinds: [0], authors: pubkeysToFetch })
-    }
+            .pipe(
+              onlyEvents(),
+              onEvent ? tap((event: NostrEvent) => onEvent(event)) : tap(() => {}),
+              tap((event: NostrEvent) => processEvent(event)),
+              completeOnEose()
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
 
-    return profiles
+      const remote$ = remoteRelays.length > 0
+        ? relayPool
+            .req(remoteRelays, { kinds: [0], authors: pubkeysToFetch })
+            .pipe(
+              onlyEvents(),
+              onEvent ? tap((event: NostrEvent) => onEvent(event)) : tap(() => {}),
+              tap((event: NostrEvent) => processEvent(event)),
+              completeOnEose()
+            )
+        : new Observable<NostrEvent>((sub) => sub.complete())
+
+      await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+
+      const profiles = Array.from(profilesByPubkey.values())
+      
+      const missingPubkeys = pubkeysToFetch.filter(p => !fetchedPubkeys.has(p))
+      if (missingPubkeys.length > 0) {
+        console.warn(`[fetch-profiles] ${missingPubkeys.length} profiles not found on relays:`, missingPubkeys.map(p => p.slice(0, 16) + '...'))
+      }
+
+      // Note: We don't preload all profile images here to avoid ERR_INSUFFICIENT_RESOURCES
+      // Profile images will be cached by Service Worker when they're actually displayed.
+      // Only the logged-in user's profile image is preloaded (in SidebarHeader).
+
+      // Rebroadcast profiles to local/all relays based on settings
+      // Only rebroadcast newly fetched profiles, not cached ones
+      const newlyFetchedProfiles = profiles.filter(p => pubkeysToFetch.includes(p.pubkey))
+      if (newlyFetchedProfiles.length > 0) {
+        await rebroadcastEvents(newlyFetchedProfiles, relayPool, settings)
+      }
+
+      return profiles
+    })()
+    
+    // Track the request
+    inFlightRequests.set(requestKey, fetchPromise)
+    
+    // Clean up when request completes (success or failure)
+    fetchPromise.finally(() => {
+      inFlightRequests.delete(requestKey)
+    })
+    
+    return fetchPromise
   } catch (error) {
-    console.error('Failed to fetch profiles:', error)
+    console.error('[fetch-profiles] Failed to fetch profiles:', error)
     return []
   }
 }

src/services/readerService.ts

@@ -110,3 +110,4 @@ export async function fetchReadableContent(
 }
 
 
+

src/services/readingDataProcessor.ts

@@ -75,10 +75,17 @@ export function processReadingProgress(
           continue
         }
       } else if (dTag.startsWith('url:')) {
-        // It's a URL with base64url encoding
+        // It's a URL. We support both raw URLs and base64url-encoded URLs.
-        const encoded = dTag.replace('url:', '')
+        const value = dTag.slice(4)
+        const looksBase64Url = /^[A-Za-z0-9_-]+$/.test(value) && (value.includes('-') || value.includes('_'))
         try {
-          itemUrl = atob(encoded.replace(/-/g, '+').replace(/_/g, '/'))
+          if (looksBase64Url) {
+            // Decode base64url to raw URL
+            itemUrl = atob(value.replace(/-/g, '+').replace(/_/g, '/'))
+          } else {
+            // Treat as raw URL (already decoded)
+            itemUrl = value
+          }
           itemId = itemUrl
           itemType = 'external'
         } catch (e) {

src/services/readingPositionService.ts

@@ -19,7 +19,6 @@ export interface ReadingProgressContent {
   progress: number // 0-1 scroll progress
   ts?: number // Unix timestamp (optional, for display)
   loc?: number // Optional: pixel position
-  ver?: string // Schema version
 }
 
 // Helper to extract and parse reading progress from event (kind 39802)
@@ -98,11 +97,8 @@ export function generateArticleIdentifier(naddrOrUrl: string): string {
   if (naddrOrUrl.startsWith('nostr:')) {
     return naddrOrUrl.replace('nostr:', '')
   }
-  // For URLs, use base64url encoding (URL-safe)
+  // For URLs, return the raw URL. Downstream tag generation will encode as needed.
-  return btoa(naddrOrUrl)
+  return naddrOrUrl
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '')
 }
 
 /**
@@ -120,8 +116,7 @@ export async function saveReadingPosition(
   const progressContent: ReadingProgressContent = {
     progress: position.position,
     ts: position.timestamp,
-    loc: position.scrollTop,
+    loc: position.scrollTop
-    ver: '1'
   }
   
   const tags = generateProgressTags(articleIdentifier)
@@ -138,8 +133,136 @@ export async function saveReadingPosition(
   await publishEvent(relayPool, eventStore, signed)
 }
 
+/**
+ * Streaming reading position loader (non-blocking, EOSE-driven)
+ * Seeds from local eventStore, streams relay updates to store in background
+ * @returns Unsubscribe function to cancel both store watch and network stream
+ */
+export function startReadingPositionStream(
+  relayPool: RelayPool,
+  eventStore: IEventStore,
+  pubkey: string,
+  articleIdentifier: string,
+  onPosition: (pos: ReadingPosition | null) => void
+): () => void {
+  const dTag = generateDTag(articleIdentifier)
+
+  // 1) Seed from local replaceable immediately and watch for updates
+  const storeSub = eventStore
+    .replaceable(READING_PROGRESS_KIND, pubkey, dTag)
+    .subscribe((event: NostrEvent | undefined) => {
+      if (!event) {
+        onPosition(null)
+        return
+      }
+      const parsed = getReadingProgressContent(event)
+      onPosition(parsed || null)
+    })
+
+  // 2) Stream from relays in background; pipe into store; no timeout/unsubscribe timer
+  const networkSub = relayPool
+    .subscription(RELAYS, {
+      kinds: [READING_PROGRESS_KIND],
+      authors: [pubkey],
+      '#d': [dTag]
+    })
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
+    .subscribe()
+
+  // Caller manages lifecycle
+  return () => {
+    try { storeSub.unsubscribe() } catch { /* ignore */ }
+    try { networkSub.unsubscribe() } catch { /* ignore */ }
+  }
+}
+
+/**
+ * Stabilized reading position collector
+ * Collects position updates for a brief window, then emits the best one (newest, then highest progress)
+ * @returns Object with stop() to cancel and onStable(cb) to register callback
+ */
+export function collectReadingPositionsOnce(params: {
+  relayPool: RelayPool
+  eventStore: IEventStore
+  pubkey: string
+  articleIdentifier: string
+  windowMs?: number
+}): { stop: () => void; onStable: (cb: (pos: ReadingPosition | null) => void) => void } {
+  const { relayPool, eventStore, pubkey, articleIdentifier, windowMs = 700 } = params
+  
+  const candidates: ReadingPosition[] = []
+  let stableCallback: ((pos: ReadingPosition | null) => void) | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+  let streamStop: (() => void) | null = null
+  let hasEmitted = false
+
+  const emitStable = () => {
+    if (hasEmitted || !stableCallback) return
+    hasEmitted = true
+
+    if (candidates.length === 0) {
+      stableCallback(null)
+      return
+    }
+
+    // Sort: newest first, then highest progress
+    candidates.sort((a, b) => {
+      const timeDiff = b.timestamp - a.timestamp
+      if (timeDiff !== 0) return timeDiff
+      return b.position - a.position
+    })
+
+    stableCallback(candidates[0])
+  }
+
+  // Start streaming and collecting
+  streamStop = startReadingPositionStream(
+    relayPool,
+    eventStore,
+    pubkey,
+    articleIdentifier,
+    (pos) => {
+      if (hasEmitted) return
+      if (!pos) {
+        return
+      }
+      if (pos.position <= 0.05 || pos.position >= 1) {
+        return
+      }
+      
+      candidates.push(pos)
+
+      // Schedule one-shot emission if not already scheduled
+      if (!timer) {
+        timer = setTimeout(() => {
+          emitStable()
+          if (streamStop) streamStop()
+        }, windowMs)
+      }
+    }
+  )
+
+  return {
+    stop: () => {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      if (streamStop) {
+        streamStop()
+        streamStop = null
+      }
+    },
+    onStable: (cb) => {
+      stableCallback = cb
+    }
+  }
+}
+
 /**
  * Load reading position from Nostr (kind 39802)
+ * @deprecated Use startReadingPositionStream for non-blocking behavior
+ * Returns current local position immediately (or null) and starts background sync
  */
 export async function loadReadingPosition(
   relayPool: RelayPool,
@@ -149,101 +272,29 @@ export async function loadReadingPosition(
 ): Promise<ReadingPosition | null> {
   const dTag = generateDTag(articleIdentifier)
 
-  // Check local event store first
+  let initial: ReadingPosition | null = null
   try {
     const localEvent = await firstValueFrom(
       eventStore.replaceable(READING_PROGRESS_KIND, pubkey, dTag)
     )
     if (localEvent) {
       const content = getReadingProgressContent(localEvent)
-      if (content) {
+      if (content) initial = content
-        // Fetch from relays in background to get any updates
-        relayPool
-          .subscription(RELAYS, {
-            kinds: [READING_PROGRESS_KIND],
-            authors: [pubkey],
-            '#d': [dTag]
-          })
-          .pipe(onlyEvents(), mapEventsToStore(eventStore))
-          .subscribe()
-        
-        return content
-      }
     }
-  } catch (err) {
+  } catch {
-    // Ignore errors and fetch from relays
+    // ignore
   }
 
-  // Fetch from relays
+  // Start background sync (fire-and-forget; no timeout)
-  const result = await fetchFromRelays(
+  relayPool
-    relayPool,
+    .subscription(RELAYS, {
-    eventStore,
+      kinds: [READING_PROGRESS_KIND],
-    pubkey,
+      authors: [pubkey],
-    READING_PROGRESS_KIND,
+      '#d': [dTag]
-    dTag,
+    })
-    getReadingProgressContent
+    .pipe(onlyEvents(), mapEventsToStore(eventStore))
-  )
+    .subscribe()
 
-  return result || null
+  return initial
-}
-
-// Helper function to fetch from relays with timeout
-async function fetchFromRelays(
-  relayPool: RelayPool,
-  eventStore: IEventStore,
-  pubkey: string,
-  kind: number,
-  dTag: string,
-  parser: (event: NostrEvent) => ReadingPosition | undefined
-): Promise<ReadingPosition | null> {
-  return new Promise((resolve) => {
-    let hasResolved = false
-    const timeout = setTimeout(() => {
-      if (!hasResolved) {
-        hasResolved = true
-        resolve(null)
-      }
-    }, 3000)
-
-    const sub = relayPool
-      .subscription(RELAYS, {
-        kinds: [kind],
-        authors: [pubkey],
-        '#d': [dTag]
-      })
-      .pipe(onlyEvents(), mapEventsToStore(eventStore))
-      .subscribe({
-        complete: async () => {
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            try {
-              const event = await firstValueFrom(
-                eventStore.replaceable(kind, pubkey, dTag)
-              )
-              if (event) {
-                const content = parser(event)
-                resolve(content || null)
-              } else {
-                resolve(null)
-              }
-            } catch (err) {
-              resolve(null)
-            }
-          }
-        },
-        error: () => {
-          clearTimeout(timeout)
-          if (!hasResolved) {
-            hasResolved = true
-            resolve(null)
-          }
-        }
-      })
-
-    setTimeout(() => {
-      sub.unsubscribe()
-    }, 3000)
-  })
 }