chore: bump version to 0.10.4

- Add share_target to manifest.webmanifest with POST method
- Implement service worker handler for POST /share-target requests
- Create ShareTargetHandler component to process and save shared URLs
- Add /share-target route in App.tsx
- Auto-saves shared URLs as web bookmarks (NIP-B0)
- Handles Android case where url param is omitted from share data

CHANGELOG.md

@@ -7,6 +7,575 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.10.3] - 2025-10-21
+
+### Added
+
+- Content filtering setting to hide articles posted by bots
+  - New "Hide content posted by bots" checkbox in Explore settings (enabled by default)
+  - Filters articles where author's profile name or display_name contains "bot" (case-insensitive)
+  - Applies to both Explore page and Me section writings
+
+### Fixed
+
+- Resolved all linting and type checking issues
+  - Added missing React Hook dependencies to `useMemo` and `useEffect`
+  - Wrapped loader functions in `useCallback` to prevent unnecessary re-renders
+  - Removed unused variables (`queryTime`, `startTime`, `allEvents`)
+  - All ESLint warnings and TypeScript errors now resolved
+
+## [0.10.2] - 2025-10-20
+
+### Added
+
+- Text-to-speech (TTS) speaker language selection mode
+  - New "Speaker language" dropdown in TTS settings (system or content)
+  - Detects content language using tinyld for accurate voice matching
+  - Falls back to system language when content detection unavailable
+  - Top 10 languages featured in dropdown for quick access
+- TTS example text section in settings
+  - Test TTS voices directly in the settings panel
+  - Uses Boris mission statement as example text
+  - Real-time speaker selection testing
+
+### Changed
+
+- TTS language selection now uses "Speaker language" terminology
+  - Distinguishes between American English (en-US) and British English (en-GB)
+  - Improved language detection with content-aware voice selection
+  - Streamlined dropdown for better UX
+
+### Fixed
+
+- TTS voice detection and selection logic
+  - Proper empty catch block handling instead of silently failing
+  - Consistent use of `setting-select` class for dropdown styling
+  - Improved dropdown spacing with adequate padding-right
+
+## [0.10.0] - 2025-01-27
+
+### Added
+
+- Centralized bookmark loading with streaming and auto-decrypt
+  - Bookmarks now load progressively with streaming updates
+  - Auto-decrypt bookmarks as they arrive from relays
+  - Individual decrypt buttons for encrypted bookmark events
+  - Centralized bookmark controller for consistent loading across the app
+- Enhanced debug page with comprehensive diagnostics
+  - Interactive NIP-04 and NIP-44 encryption/decryption testing
+  - Live performance timing with stopwatch display
+  - Bookmark loading and decryption diagnostics
+  - Real-time bunker logs with filtering and clearing
+  - Version and git commit footer
+- Bunker (NIP-46) authentication support
+  - Support for remote signing via Nostr Connect protocol
+  - Bunker URI input with validation and error handling
+  - Automatic reconnection on app restore with proper permissions
+  - Signer suggestions in error messages (Amber, nsec.app, Nostrum)
+
+### Changed
+
+- Improved bookmark loading performance
+  - Non-blocking, progressive bookmark updates via callback pattern
+  - Batched background hydration using EventLoader and AddressLoader
+  - Shorter timeouts for debug page bookmark loading
+  - Sequential decryption instead of concurrent to avoid queue issues
+- Enhanced bunker error messages
+  - Formatted error messages with signer suggestions
+  - Links to nos2x, Amber, nsec.app, and Nostrum signers
+  - Better error handling for missing signer extensions
+- Centralized bookmark loading architecture
+  - Single shared bookmark controller for consistent loading
+  - Unified bookmark loading with streaming and auto-decrypt
+  - Consolidated bookmark loading into single centralized function
+
+### Fixed
+
+- NIP-46 bunker signing and decryption
+  - NostrConnectSigner properly reconnects with permissions on app restore
+  - Bunker relays added to relay pool for signing requests
+  - Proper setup of pool and relays before bunker reconnection
+  - Expose nip04/nip44 on NostrConnectAccount for bookmark decryption
+  - Cache wrapped nip04/nip44 objects instead of using getters
+  - Wait for bunker relay connections before marking signer ready
+  - Validate bunker URI (remote must differ from user pubkey)
+  - Accept remote===pubkey for Amber compatibility
+- Bookmark loading and decryption
+  - Bookmarks load and complete properly with streaming
+  - Auto-decrypt private bookmarks with NIP-04 detection
+  - Include decrypted private bookmarks in sidebar
+  - Skip background event fetching when there are too many IDs
+  - Only build bookmarks from ready events (unencrypted or decrypted)
+  - Restore Debug page decrypt display via onDecryptComplete callback
+  - Make controller onEvent non-blocking for queryEvents completion
+  - Proper timeout handling for bookmark decryption (no hanging)
+  - Smart encryption detection with consistent padlock display
+  - Sequential decryption instead of concurrent to avoid queue issues
+  - Add extraRelays to EventLoader and AddressLoader
+- TypeScript and linting errors throughout
+  - Replace empty catch blocks with warnings
+  - Fix explicit any types
+  - Add missing useEffect dependencies
+  - Resolve all linting issues in App.tsx, Debug.tsx, and async utilities
+
+### Performance
+
+- Non-blocking NIP-46 operations
+  - Fire-and-forget NIP-46 publish for better UI responsiveness
+  - Non-blocking bookmark decryption with sequential processing
+  - Make controller onEvent non-blocking for queryEvents completion
+- Optimized bookmark loading
+  - Batched background hydration using EventLoader and AddressLoader
+  - Progressive, non-blocking bookmark loading with streaming
+  - Shorter timeouts for debug page bookmark loading
+  - Remove artificial delays from bookmark decryption
+
+### Refactored
+
+- Centralized bookmark controller architecture
+  - Extract bookmark streaming helpers and centralize loading
+  - Consolidated bookmark loading into single function
+  - Remove deprecated bookmark service files
+  - Share bookmark controller between components
+- Debug page organization
+  - Extract VersionFooter component to eliminate duplication
+  - Structured sections with proper layout and styling
+  - Apply settings page styling structure
+- Simplified bunker implementation following applesauce patterns
+  - Clean up bunker implementation for better maintainability
+  - Import RELAYS from central config (DRY principle)
+  - Update RELAYS list with relay.nsec.app
+
+### Documentation
+
+- Comprehensive Amber.md documentation
+  - Amethyst-style bookmarks section
+  - Bunker decrypt investigation summary
+  - Critical queue disabling requirement
+  - NIP-46 setup and troubleshooting
+
+## [0.9.1] - 2025-10-20
+
+### Added
+
+- Video embedding for nostr-native content
+  - Detect and embed `<video>...</video>` blocks (including nested `<source>`)
+  - Detect and embed `<img src="…(mp4|webm|ogg|mov|avi|mkv|m4v)">` tags
+  - Detect and embed bare video file URLs and platform-classified video links
+- Media display settings
+  - New "Render video links as embeds" setting (defaults to enabled)
+  - New "Full-width images" display option
+  - Dedicated "Media Display" settings section
+- Article view improvements
+  - Center images by default in reader
+  - Writings list sorted by publication date (newest first)
+
+### Changed
+
+- Enable media display options by default for a better out‑of‑the‑box experience
+- Constrain video player to reader width to prevent horizontal overflow
+
+### Fixed
+
+- Prevent double video player rendering when both processor and panel attempted to embed
+- Remove text artifacts and broken tags when converting markdown image/video URLs
+  - Improved URL regex and robust tag replacement
+  - Avoid injecting unknown img props from markdown renderer
+- Resolved remaining ESLint and TypeScript issues
+
+### Performance
+
+- Optimized Support page loading with instant display and skeletons
+
+## [0.9.0] - 2025-01-20
+
+### Added
+
+- User relay list integration (NIP-65) and blocked relays (NIP-51)
+  - Automatically loads user's relay list from kind 10002 events
+  - Supports blocked relay filtering from kind 10006 mute lists
+  - Integrates with existing relay pool for seamless user experience
+- Relay list debug section in Debug component
+  - Enhanced debugging capabilities for relay list loading
+  - Detailed logging for relay query diagnostics
+
+### Changed
+
+- Improved relay list loading performance
+  - Added streaming callback to relay list service for faster results
+  - User relay list now streams into pool immediately and finalizes after blocked relays
+  - Made relay list loading non-blocking in App.tsx
+- Enhanced relay URL handling
+  - Normalized relay URLs to match applesauce-relay internal format
+  - Removed relay.dergigi.com from default relays
+  - Use user's relay list exclusively when logged in
+
+### Fixed
+
+- Resolved all linting issues across the codebase
+- Fixed TypeScript type issues in relayListService
+  - Replaced any types with proper NostrEvent types
+  - Improved type safety and code quality
+- Cleaned up temporary test relays from hardcoded list
+- Removed non-relay console.log statements and debug output
+
+### Technical
+
+- Enhanced relay initialization logging for better diagnostics
+- Improved error handling and timeout management for relay queries
+- Better separation of concerns between relay loading and application startup
+
+## [0.8.6] - 2025-10-20
+
+### Fixed
+
+- React Hooks violations in NostrMentionLink component
+  - Fixed useEffect dependency warnings by removing isMounted from dependencies
+  - Reverted to inline mount tracking with useRef for safer lifecycle handling
+
+## [0.8.4] - 2024-10-20
+
+### Added
+
+- Progressive article hydration for reads tab
+  - Articles now load titles, summaries, images, and author information progressively
+  - Implemented readsController following the same pattern as bookmarkController
+  - Uses AddressLoader for efficient batched article event retrieval
+  - Articles rehydrate as data arrives from relays without blocking initial display
+  - Event store integration for caching article events
+  - Centralized reads data fetching following DRY principles
+
+### Fixed
+
+- Fixed React type imports in useArticleLoader
+  - Import `Dispatch` and `SetStateAction` directly from 'react' instead of using `React.` prefix
+  - Resolves ESLint no-undef errors
+
+## [0.8.3] - 2025-01-19
+
+### Fixed
+
+- Highlight creation now shows immediate UI feedback without page refresh
+  - Fixed streaming highlight merge logic to preserve newly created highlights
+  - Decoupled cached highlight sync from content loading to prevent unintended reloads
+  - Newly created highlights appear instantly in both reader and highlights panel
+  - Highlights remain visible while remote results stream in and merge properly
+
+### Changed
+
+- Improved highlight creation user experience
+  - Selection clearing and synchronous rendering for immediate highlight display
+  - Better error handling for bunker permission issues with user-friendly messages
+
+## [0.8.2] - 2025-10-19
+
+### Added
+
+- Reading progress indicator in compact bookmark cards
+  - Shows progress bar for articles and web bookmarks with reading data
+  - Progress bar aligned with bookmark text for better visual association
+  - Color-coded progress (blue for reading, green for completed, gray for started)
+
+### Changed
+
+- Compact cards layout optimizations for more space-efficient display
+  - Reduced vertical padding from 0.5rem to 0.25rem
+  - Reduced compact row height from 28px to 24px
+  - Reduced gap between compact cards from 0.5rem to 0.25rem
+- Reading progress bar styling for compact view
+  - Bar height reduced from 2px to 1px for more subtle appearance
+  - Left margin of 1.5rem aligns bar with bookmark text instead of appearing as separator
+
+### Fixed
+
+- Removed borders from compact bookmarks in bookmarks sidebar
+  - Border styling from `.bookmarks-list` no longer applies to compact cards
+  - Compact cards now display as truly borderless and transparent
+
+## [0.8.0] - 2025-10-19
+
+### Added
+
+- Centralized reading progress controller for non-blocking reading position sync
+  - Progressive loading with caching from event store
+  - Streaming updates from relays with proper merging
+  - 2-second completion hold at 100% reading position to prevent UI jitter
+  - Configurable auto-mark-as-read at 100% reading progress
+- Reading progress indicators on blog post cards
+  - Visual progress bars on article cards in Explore and bookmarks sidebar
+  - Persistent reading position synced across devices via NIP-85
+
+### Changed
+
+- Reading position sync now enabled by default in runtime paths
+- Improved auto-mark-as-read behavior with reliable completion detection
+- Reading progress events use proper NIP-85 specification (kind 39802)
+
+### Fixed
+
+- Reading position saves with proper validation and event store integration
+- Profile page writings loading now fetches all writings without limits
+- Consistent reading progress calculation and event publishing
+
+### Performance
+
+- Non-blocking reading progress controller with streaming updates
+- Cache-first loading strategy with local event store before relay queries
+- Efficient progress merging and deduplication
+
+## [0.7.4] - 2025-10-18
+
+### Added
+
+- Profile page data preloading for instant tab switching
+  - Automatically preloads all highlights and writings when viewing a profile (`/p/` pages)
+  - Non-blocking background fetch stores all events in event store
+  - Tab switching becomes instant after initial preload
+
+### Changed
+
+- `/me/bookmarks` tab now displays in cards view only
+  - Removed view mode toggle buttons (compact, large) from bookmarks tab
+  - Cards view provides optimal bookmark browsing experience
+  - Grouping toggle (grouped/flat) still available
+- Highlights sidebar filters simplified when logged out
+  - Only nostrverse filter button shown when not logged in
+  - Friends and personal highlight filters hidden when logged out
+  - Cleaner UX showing only available options
+
+### Fixed
+
+- Profile page tabs now display cached content instantly
+  - Highlights and writings show immediately from event store cache
+  - Network fetches happen in background without blocking UI
+  - Matches Explore and Debug page non-blocking loading pattern
+  - Eliminated loading delays when switching between tabs
+
+### Performance
+
+- Cache-first profile loading strategy
+  - Instant display of cached highlights and writings from event store
+  - Background refresh updates data without blocking
+  - Tab switches show content immediately without loading states
+
+## [0.7.3] - 2025-10-18
+
+### Added
+
+- Centralized nostrverse writings controller for kind 30023 content
+  - Automatically starts at app initialization
+  - Streams nostrverse blog posts progressively to Explore page
+  - Provides non-blocking, cache-first loading strategy
+- Centralized nostrverse highlights controller
+  - Pre-loads nostrverse highlights at app start for instant toggling
+  - Streams highlights progressively to Explore page
+  - Integrated with EventStore for caching
+- Writings loading debug section on `/debug` page
+  - Diagnostics for writings controller and loading states
+
+### Changed
+
+- Explore page now uses centralized `writingsController` for user's own writings
+  - Auto-loads user writings at login for instant availability
+  - Non-blocking fetch with progressive streaming
+- Explore page loading strategy optimized
+  - Shows skeleton placeholders instead of blocking spinners
+  - Seeds from cache, then streams and merges results progressively
+  - Keeps nostrverse fetches non-blocking
+- User's own writings now included in Explore when enabled
+  - Lazy-loads on 'mine' toggle when logged in
+  - Streams in parallel with friends/nostrverse content
+
+### Fixed
+
+- Explore page works correctly in logged-out mode
+  - Relies solely on centralized nostrverse controllers
+  - Controllers start even when logged out
+  - Fetches nostrverse content properly without authentication
+- Explore page no longer allows disabling all scope filters
+  - Ensures at least one filter (mine/friends/nostrverse) remains active
+  - Prevents blank content state
+- Explore page reflects default scope setting immediately
+  - No more blank lists on initial load
+  - Pre-loads and merges nostrverse from event store
+- Explore page highlights properly scoped
+  - Nostrverse highlights never block the page
+  - Shows empty state instead of spinner
+  - Streams results into store immediately
+  - Highlights are merged and loaded correctly
+- Article-specific highlights properly filtered
+  - Highlights scoped to current article on `/a/` and `/r/` routes
+  - Derives coordinate from naddr for early filtering
+  - Sidebar and content only show relevant highlights
+  - ContentPanel shows only article-specific highlights for nostr articles
+- Explore writings properly deduplicated
+  - Deduplication by replaceable event (author:d-tag) happens before visibility filtering
+  - Consistent dedupe/sort behavior across all loading scenarios
+- Debug page writings loading section added
+  - No infinite loop when loading nostrverse content
+
+### Performance
+
+- Non-blocking explore page loading
+  - Fully non-blocking loading strategy
+  - Seeds caches then streams and merges results progressively
+- Lazy-loading for content filters
+  - Nostrverse writings lazy-load when toggled on while logged in
+  - Avoids redundant loading with guard flags
+- Streaming callbacks for progressive updates
+  - Writings stream to UI via onPost callback
+  - Posts appear instantly as they arrive from cache or network
+
+## [0.7.2] - 2025-01-27
+
+### Added
+
+- Cached-first loading with EventStore across the app
+  - Instant display of cached highlights and writings from local event store
+  - Progressive loading with streaming updates from relays
+  - Centralized event storage for improved performance and offline support
+- Default explore scope setting for controlling content visibility
+  - Configurable default scope for explore page content
+  - Dedicated Explore section in settings for better organization
+
+### Changed
+
+- Highlights and writings now load from cache first, then stream from relays
+- Explore page shows cached content instantly before network updates
+- Article-specific highlights stored in centralized event store for faster access
+- Nostrverse content cached locally for improved performance
+
+### Fixed
+
+- Prevent "No highlights yet" flash on `/me/highlights` page
+- Force React to remount tab content when switching tabs for proper state management
+- Deduplicate blog posts by author:d-tag instead of event ID for better accuracy
+- Show skeleton placeholders while highlights are loading for better UX
+
+### Performance
+
+- Local-first loading strategy reduces perceived loading times
+- Cached content displays immediately while background sync occurs
+- Centralized event storage eliminates redundant network requests
+
+## [0.7.0] - 2025-10-18
+
+### Added
+
+- Login with Bunker (NIP-46) authentication support
+  - Support for remote signing via Nostr Connect protocol
+  - Bunker URI input with validation and error handling
+  - Automatic reconnection on app restore with proper permissions
+  - Signer suggestions in error messages (Amber, nsec.app, Nostrum)
+- Debug page (`/debug`) for diagnostics and testing
+  - Interactive NIP-04 and NIP-44 encryption/decryption testing
+  - Live performance timing with stopwatch display
+  - Bookmark loading and decryption diagnostics
+  - Real-time bunker logs with filtering and clearing
+  - Version and git commit footer
+- Progressive bookmark loading with streaming updates
+  - Non-blocking, progressive bookmark updates via callback pattern
+  - Batched background hydration using EventLoader and AddressLoader
+  - Auto-decrypt bookmarks as they arrive from relays
+  - Individual decrypt buttons for encrypted bookmark events
+- Bookmark grouping toggle (grouped by source vs flat chronological)
+  - Toggle between grouped view and flat chronological list
+  - Amethyst-style bookmark detection and grouping
+  - Display bookmarks even when they only have IDs (content loads in background)
+
+### Changed
+
+- Improved login UI with better copy and modern design
+  - Personable title and nostr-native language
+  - Highlighted 'your own highlights' in login copy
+  - Simplified button text to single words (Extension, Signer)
+  - Hide login button and user icon when logged out
+  - Hide Extension button when Bunker input is shown
+  - Auto-load bookmarks on login and page mount
+- Enhanced bunker error messages
+  - Formatted error messages with signer suggestions
+  - Links to nos2x, Amber, nsec.app, and Nostrum signers
+  - Better error handling for missing signer extensions
+  - Centered and constrained bunker input field
+- Centralized bookmark loading architecture
+  - Single shared bookmark controller for consistent loading
+  - Unified bookmark loading with streaming and auto-decrypt
+  - Consolidated bookmark loading into single centralized function
+  - Bookmarks passed as props throughout component tree
+- Renamed UI elements for clarity
+  - "Bunker" button renamed to "Signer"
+  - Hide bookmark controls when logged out
+- Settings version footer improvements
+  - Separate links for version (to GitHub release) and commit (to commit page)
+  - Proper spacing around middot separator
+
+### Fixed
+
+- NIP-46 bunker signing and decryption
+  - NostrConnectSigner properly reconnects with permissions on app restore
+  - Bunker relays added to relay pool for signing requests
+  - Proper setup of pool and relays before bunker reconnection
+  - Expose nip04/nip44 on NostrConnectAccount for bookmark decryption
+  - Cache wrapped nip04/nip44 objects instead of using getters
+  - Wait for bunker relay connections before marking signer ready
+  - Validate bunker URI (remote must differ from user pubkey)
+  - Accept remote===pubkey for Amber compatibility
+- Bookmark loading and decryption
+  - Bookmarks load and complete properly with streaming
+  - Auto-decrypt private bookmarks with NIP-04 detection
+  - Include decrypted private bookmarks in sidebar
+  - Skip background event fetching when there are too many IDs
+  - Only build bookmarks from ready events (unencrypted or decrypted)
+  - Restore Debug page decrypt display via onDecryptComplete callback
+  - Make controller onEvent non-blocking for queryEvents completion
+  - Proper timeout handling for bookmark decryption (no hanging)
+  - Smart encryption detection with consistent padlock display
+  - Sequential decryption instead of concurrent to avoid queue issues
+  - Add extraRelays to EventLoader and AddressLoader
+- PWA cache limit increased to 3 MiB for larger bundles
+- Extension login error messages with nos2x link
+- TypeScript and linting errors throughout
+  - Replace empty catch blocks with warnings
+  - Fix explicit any types
+  - Add missing useEffect dependencies
+  - Resolve all linting issues in App.tsx, Debug.tsx, and async utilities
+
+### Performance
+
+- Non-blocking NIP-46 operations
+  - Fire-and-forget NIP-46 publish for better UI responsiveness
+  - Non-blocking bookmark decryption with sequential processing
+  - Make controller onEvent non-blocking for queryEvents completion
+- Optimized bookmark loading
+  - Batched background hydration using EventLoader and AddressLoader
+  - Progressive, non-blocking bookmark loading with streaming
+  - Shorter timeouts for debug page bookmark loading
+  - Remove artificial delays from bookmark decryption
+
+### Refactored
+
+- Centralized bookmark controller architecture
+  - Extract bookmark streaming helpers and centralize loading
+  - Consolidated bookmark loading into single function
+  - Remove deprecated bookmark service files
+  - Share bookmark controller between components
+- Debug page organization
+  - Extract VersionFooter component to eliminate duplication
+  - Structured sections with proper layout and styling
+  - Apply settings page styling structure
+- Simplified bunker implementation following applesauce patterns
+  - Clean up bunker implementation for better maintainability
+  - Import RELAYS from central config (DRY principle)
+  - Update RELAYS list with relay.nsec.app
+
+### Documentation
+
+- Comprehensive Amber.md documentation
+  - Amethyst-style bookmarks section
+  - Bunker decrypt investigation summary
+  - Critical queue disabling requirement
+  - NIP-46 setup and troubleshooting
+
 ## [0.6.24] - 2025-01-16
 
 ### Fixed
@@ -1760,7 +2329,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling
 
-[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.24...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.10.3...HEAD
+[0.10.3]: https://github.com/dergigi/boris/compare/v0.10.2...v0.10.3
+[0.10.2]: https://github.com/dergigi/boris/compare/v0.10.1...v0.10.2
+[0.10.1]: https://github.com/dergigi/boris/compare/v0.10.0...v0.10.1
+[0.10.0]: https://github.com/dergigi/boris/compare/v0.9.1...v0.10.0
+[0.9.1]: https://github.com/dergigi/boris/compare/v0.9.0...v0.9.1
+[0.8.3]: https://github.com/dergigi/boris/compare/v0.8.2...v0.8.3
+[0.8.2]: https://github.com/dergigi/boris/compare/v0.8.0...v0.8.2
+[0.8.0]: https://github.com/dergigi/boris/compare/v0.7.4...v0.8.0
+[0.7.4]: https://github.com/dergigi/boris/compare/v0.7.3...v0.7.4
+[0.7.3]: https://github.com/dergigi/boris/compare/v0.7.2...v0.7.3
+[0.7.2]: https://github.com/dergigi/boris/compare/v0.7.0...v0.7.2
+[0.7.0]: https://github.com/dergigi/boris/compare/v0.6.24...v0.7.0
 [0.6.24]: https://github.com/dergigi/boris/compare/v0.6.23...v0.6.24
 [0.6.23]: https://github.com/dergigi/boris/compare/v0.6.22...v0.6.23
 [0.6.21]: https://github.com/dergigi/boris/compare/v0.6.20...v0.6.21

FEATURES.md

@@ -11,6 +11,7 @@
 - **Distraction‑free view**: Clean typography, optional hero image, summary, and published date.
 - **Reading time**: Displays estimated reading time for text or duration for supported videos.
 - **Progress**: Reading progress indicator with completion state.
+- **Text‑to‑Speech**: Listen to articles with browser‑native TTS; play/pause/stop controls with adjustable speed (0.8–1.6x).
 - **Menus**: Quick actions to open, share, or copy links (for both Nostr and web content).
 - **Performance**: Lightweight fetching and caching for speed; skeleton loaders to avoid empty flashes.
 

api/article-og.ts

@@ -15,7 +15,6 @@ const RELAYS = [
   'wss://relay.dergigi.com',
   'wss://wot.dergigi.com',
   'wss://relay.snort.social',
-  'wss://relay.current.fyi',
   'wss://nostr-pub.wellorder.net',
   'wss://purplepag.es',
   'wss://relay.primal.net'
@@ -215,12 +214,6 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
 
   const debugEnabled = req.query.debug === '1' || req.headers['x-boris-debug'] === '1'
   if (debugEnabled) {
-    console.log('[article-og] request', JSON.stringify({
-      naddr,
-      ua: userAgent || null,
-      isCrawlerRequest,
-      path: req.url || null
-    }))
     res.setHeader('X-Boris-Debug', '1')
   }
 
@@ -257,7 +250,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     res.setHeader('Content-Type', 'text/html; charset=utf-8')
     res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'browser', naddr }))
+      // Debug mode enabled
     }
     return res.status(200).send(html)
   }
@@ -268,7 +261,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
   if (cached && cached.expires > now) {
     setCacheHeaders(res)
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot', naddr, cache: true }))
+      // Debug mode enabled
     }
     return res.status(200).send(cached.html)
   }
@@ -286,7 +279,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     // Send response
     setCacheHeaders(res)
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot', naddr, cache: false }))
+      // Debug mode enabled
     }
     return res.status(200).send(html)
   } catch (err) {
@@ -296,7 +289,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
     const html = generateHtml(naddr, null)
     setCacheHeaders(res, 3600)
     if (debugEnabled) {
-      console.log('[article-og] response', JSON.stringify({ mode: 'bot-fallback', naddr }))
+      // Debug mode enabled
     }
     return res.status(200).send(html)
   }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "boris",
-  "version": "0.6.13",
+  "version": "0.10.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "boris",
-      "version": "0.6.13",
+      "version": "0.10.2",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -35,6 +35,7 @@
         "rehype-prism-plus": "^2.0.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
+        "tinyld": "^1.3.4",
         "use-pull-to-refresh": "^2.4.1"
       },
       "devDependencies": {
@@ -11215,6 +11216,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tinyld": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/tinyld/-/tinyld-1.3.4.tgz",
+      "integrity": "sha512-u26CNoaInA4XpDU+8s/6Cq8xHc2T5M4fXB3ICfXPokUQoLzmPgSZU02TAkFwFMJCWTjk53gtkS8pETTreZwCqw==",
+      "license": "MIT",
+      "bin": {
+        "tinyld": "bin/tinyld.js",
+        "tinyld-heavy": "bin/tinyld-heavy.js",
+        "tinyld-light": "bin/tinyld-light.js"
+      },
+      "engines": {
+        "node": ">= 12.10.0",
+        "npm": ">= 6.12.0",
+        "yarn": ">= 1.20.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boris",
-  "version": "0.7.0",
+  "version": "0.10.4",
   "description": "A minimal nostr client for bookmark management",
   "homepage": "https://read.withboris.com/",
   "type": "module",
@@ -38,6 +38,7 @@
     "rehype-prism-plus": "^2.0.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "tinyld": "^1.3.4",
     "use-pull-to-refresh": "^2.4.1"
   },
   "devDependencies": {

public/manifest.webmanifest

@@ -9,6 +9,16 @@
   "background_color": "#0b1220",
   "orientation": "any",
   "categories": ["productivity", "social", "utilities"],
+  "share_target": {
+    "action": "/share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "title": "title",
+      "text": "text",
+      "url": "link"
+    }
+  },
   "icons": [
     {
       "src": "/icon-192.png",

public/md/NIP-85.md

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

src/App.tsx

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

src/components/ArchiveFilters.tsx

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

src/components/BlogPostCard.tsx

@@ -6,18 +6,26 @@ import { formatDistance } from 'date-fns'
 import { BlogPostPreview } from '../services/exploreService'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
+import { isKnownBot } from '../config/bots'
 
 interface BlogPostCardProps {
   post: BlogPostPreview
   href: string
   level?: 'mine' | 'friends' | 'nostrverse'
   readingProgress?: number // 0-1 reading progress (optional)
+  hideBotByName?: boolean // default true
 }
 
-const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress }) => {
+const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingProgress, hideBotByName = true }) => {
   const profile = useEventModel(Models.ProfileModel, [post.author])
   const displayName = profile?.name || profile?.display_name || 
     `${post.author.slice(0, 8)}...${post.author.slice(-4)}`
+  const rawName = (profile?.name || profile?.display_name || '').toLowerCase()
+
+  // Hide bot authors by name/display_name
+  if (hideBotByName && (rawName.includes('bot') || isKnownBot(post.author))) {
+    return null
+  }
   
   const publishedDate = post.published || post.event.created_at
   const formattedDate = formatDistance(new Date(publishedDate * 1000), new Date(), { 
@@ -33,6 +41,11 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
   } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
     progressColor = 'var(--color-text)' // Neutral text color (started)
   }
+  
+  // Debug log - reading progress shown as visual indicator
+  if (readingProgress !== undefined) {
+    // Reading progress display
+  }
 
   return (
     <Link 

src/components/BookmarkItem.tsx

@@ -19,9 +19,10 @@ interface BookmarkItemProps {
   index: number
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   viewMode?: ViewMode
+  readingProgress?: number
 }
 
-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards', readingProgress }) => {
   const [ogImage, setOgImage] = useState<string | null>(null)
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -139,12 +140,25 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     handleReadNow,
     articleImage,
     articleSummary,
-    contentTypeIcon: getContentTypeIcon()
+    contentTypeIcon: getContentTypeIcon(),
+    readingProgress
   }
 
   if (viewMode === 'compact') {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-    const { articleImage, ...compactProps } = sharedProps
+    const compactProps = {
+      bookmark,
+      index,
+      hasUrls,
+      extractedUrls,
+      onSelectUrl,
+      authorNpub,
+      eventNevent,
+      getAuthorDisplayName,
+      handleReadNow,
+      articleSummary,
+      contentTypeIcon: getContentTypeIcon(),
+      readingProgress
+    }
     return <CompactView {...compactProps} />
   }
 

src/components/BookmarkList.tsx

@@ -13,15 +13,19 @@ import { ViewMode } from './Bookmarks'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { BookmarkSkeleton } from './Skeletons'
-import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, getBookmarkSets, getBookmarksWithoutSet, hasCreationDate } from '../utils/bookmarkUtils'
 import { UserSettings } from '../services/settingsService'
 import AddBookmarkModal from './AddBookmarkModal'
 import { createWebBookmark } from '../services/webBookmarkService'
-import { RELAYS } from '../config/relays'
 import { Hooks } from 'applesauce-react'
+import { getActiveRelayUrls } from '../services/relayManager'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import LoginOptions from './LoginOptions'
+import { useEffect } from 'react'
+import { readingProgressController } from '../services/readingProgressController'
+import { nip19 } from 'nostr-tools'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -70,6 +74,45 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     return saved === 'flat' ? 'flat' : 'grouped'
   })
   const activeAccount = Hooks.useActiveAccount()
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+
+  // Subscribe to reading progress updates
+  useEffect(() => {
+    // Get initial progress map
+    setReadingProgressMap(readingProgressController.getProgressMap())
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress(setReadingProgressMap)
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+
+  // Helper to get reading progress for a bookmark
+  const getBookmarkReadingProgress = (bookmark: IndividualBookmark): number | undefined => {
+    if (bookmark.kind === 30023) {
+      // For articles, use naddr as key
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (!dTag) return undefined
+      try {
+        const naddr = nip19.naddrEncode({
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return readingProgressMap.get(naddr)
+      } catch (err) {
+        return undefined
+      }
+    }
+    // For web bookmarks and other types, try to use URL if available
+    const urls = extractUrlsFromContent(bookmark.content)
+    if (urls.length > 0) {
+      return readingProgressMap.get(urls[0])
+    }
+    return undefined
+  }
 
   const toggleGroupingMode = () => {
     const newMode = groupingMode === 'grouped' ? 'flat' : 'grouped'
@@ -82,7 +125,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       throw new Error('Please login to create bookmarks')
     }
 
-    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, RELAYS)
+    await createWebBookmark(url, title, description, tags, activeAccount, relayPool, getActiveRelayUrls(relayPool))
   }
 
   // Pull-to-refresh for bookmarks
@@ -100,6 +143,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   // Merge and flatten all individual bookmarks from all lists
   const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
     .filter(hasContent)
+    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
   
   // Apply filter
   const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
@@ -116,8 +160,8 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
       : [
           { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
           { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
+          { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+          { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
           { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
         ]
   
@@ -220,6 +264,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                     index={index} 
                     onSelectUrl={onSelectUrl}
                     viewMode={viewMode}
+                    readingProgress={getBookmarkReadingProgress(individualBookmark)}
                   />
                 ))}
               </div>
@@ -240,6 +285,13 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         </div>
         {activeAccount && (
           <div className="view-mode-right">
+            <IconButton
+              icon={groupingMode === 'grouped' ? faLayerGroup : faBars}
+              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
                 icon={faRotate}
@@ -251,13 +303,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
                 spin={isRefreshing}
               />
             )}
-            <IconButton
-              icon={groupingMode === 'grouped' ? faLayerGroup : faBars}
-              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"
-            />
             <IconButton
               icon={faList}
               onClick={() => onViewModeChange('compact')}

src/components/BookmarkViews/CardView.tsx

@@ -5,7 +5,7 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { classifyUrl } from '../../utils/helpers'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
@@ -24,6 +24,7 @@ interface CardViewProps {
   articleImage?: string
   articleSummary?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CardView: React.FC<CardViewProps> = ({
@@ -38,7 +39,8 @@ export const CardView: React.FC<CardViewProps> = ({
   handleReadNow,
   articleImage,
   articleSummary,
-  contentTypeIcon
+  contentTypeIcon,
+  readingProgress
 }) => {
   const firstUrl = hasUrls ? extractedUrls[0] : null
   const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
@@ -52,6 +54,14 @@ export const CardView: React.FC<CardViewProps> = ({
   const shouldTruncate = !expanded && contentLength > 210
   const isArticle = bookmark.kind === 30023
   
+  // 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)
+  }
+  
   // Determine which image to use (article image, instant preview, or OG image)
   const previewImage = articleImage || instantPreview || ogImage
   const cachedImage = useImageCache(previewImage || undefined)
@@ -137,19 +147,15 @@ export const CardView: React.FC<CardViewProps> = ({
       )}
       
       {isArticle && articleSummary ? (
-        <div className="bookmark-content article-summary">
-          <ContentWithResolvedProfiles content={articleSummary} />
-        </div>
+        <RichContent content={articleSummary} className="bookmark-content article-summary" />
       ) : bookmark.parsedContent ? (
         <div className="bookmark-content">
           {shouldTruncate && bookmark.content
-            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
+            ? <RichContent content={`${bookmark.content.slice(0, 210).trimEnd()}…`} className="" />
             : renderParsedContent(bookmark.parsedContent)}
         </div>
       ) : bookmark.content && (
-        <div className="bookmark-content">
-          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-        </div>
+        <RichContent content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
       )}
 
       {contentLength > 210 && (
@@ -163,6 +169,28 @@ export const CardView: React.FC<CardViewProps> = ({
         </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

src/components/BookmarkViews/CompactView.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDateCompact } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 
 interface CompactViewProps {
   bookmark: IndividualBookmark
@@ -13,6 +13,7 @@ interface CompactViewProps {
   onSelectUrl?: (url: string, bookmark?: { id: string; kind: number; tags: string[][]; pubkey: string }) => void
   articleSummary?: string
   contentTypeIcon: IconDefinition
+  readingProgress?: number
 }
 
 export const CompactView: React.FC<CompactViewProps> = ({
@@ -22,12 +23,21 @@ export const CompactView: React.FC<CompactViewProps> = ({
   extractedUrls,
   onSelectUrl,
   articleSummary,
-  contentTypeIcon
+  contentTypeIcon,
+  readingProgress
 }) => {
   const isArticle = bookmark.kind === 30023
   const isWebBookmark = bookmark.kind === 39701
   const isClickable = hasUrls || isArticle || isWebBookmark
   
+  // 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
     
@@ -56,12 +66,35 @@ export const CompactView: React.FC<CompactViewProps> = ({
         </span>
         {displayText && (
           <div className="compact-text">
-            <ContentWithResolvedProfiles content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} />
+            <RichContent content={displayText.slice(0, 60) + (displayText.length > 60 ? '…' : '')} className="" />
           </div>
         )}
         <span className="bookmark-date-compact">{formatDateCompact(bookmark.created_at)}</span>
         {/* CTA removed */}
       </div>
+      
+      {/* Reading progress indicator for all bookmark types with reading data */}
+      {readingProgress !== undefined && readingProgress > 0 && (
+        <div 
+          style={{
+            height: '1px',
+            width: '100%',
+            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

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { IndividualBookmark } from '../../types/bookmarks'
 import { formatDate } from '../../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import RichContent from '../RichContent'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
 import { getEventUrl } from '../../config/nostrGateways'
@@ -95,13 +95,9 @@ export const LargeView: React.FC<LargeViewProps> = ({
       
       <div className="large-content">
         {isArticle && articleSummary ? (
-          <div className="large-text article-summary">
-            <ContentWithResolvedProfiles content={articleSummary} />
-          </div>
+          <RichContent content={articleSummary} className="large-text article-summary" />
         ) : bookmark.content && (
-          <div className="large-text">
-            <ContentWithResolvedProfiles content={bookmark.content} />
-          </div>
+          <RichContent content={bookmark.content} className="large-text" />
         )}
         
         {/* Reading progress indicator for articles - shown only if there's progress */}

src/components/Bookmarks.tsx

@@ -17,6 +17,7 @@ import { Bookmark } from '../types/bookmarks'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
 import Me from './Me'
+import Profile from './Profile'
 import Support from './Support'
 import { classifyHighlights } from '../utils/highlightClassification'
 
@@ -35,7 +36,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   onLogout, 
   bookmarks, 
   bookmarksLoading, 
-  onRefreshBookmarks 
+  onRefreshBookmarks
 }) => {
   const { naddr, npub } = useParams<{ naddr?: string; npub?: string }>()
   const location = useLocation()
@@ -63,7 +64,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
                 location.pathname === '/me/highlights' ? 'highlights' :
                 location.pathname === '/me/reading-list' ? 'reading-list' :
                 location.pathname.startsWith('/me/reads') ? 'reads' :
-                location.pathname === '/me/links' ? 'links' :
+                location.pathname.startsWith('/me/links') ? 'links' :
                 location.pathname === '/me/writings' ? 'writings' : 'highlights'
   
   // Extract tab from profile routes
@@ -179,6 +180,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     currentArticleCoordinate,
     currentArticleEventId,
     settings,
+    eventStore,
     onRefreshBookmarks
   })
 
@@ -242,6 +244,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   useExternalUrlLoader({
     url: externalUrl,
     relayPool,
+    eventStore,
     setSelectedUrl,
     setReaderContent,
     setReaderLoading,
@@ -325,10 +328,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({
         relayPool ? <Explore relayPool={relayPool} eventStore={eventStore} settings={settings} activeTab={exploreTab} /> : null
       ) : undefined}
       me={showMe ? (
-        relayPool ? <Me relayPool={relayPool} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Me relayPool={relayPool} eventStore={eventStore} activeTab={meTab} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} settings={settings} /> : null
       ) : undefined}
       profile={showProfile && profilePubkey ? (
-        relayPool ? <Me relayPool={relayPool} activeTab={profileTab} pubkey={profilePubkey} bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} /> : null
+        relayPool ? <Profile relayPool={relayPool} eventStore={eventStore} pubkey={profilePubkey} activeTab={profileTab} /> : null
       ) : undefined}
       support={showSupport ? (
         relayPool ? <Support relayPool={relayPool} eventStore={eventStore} settings={settings} /> : null

src/components/ContentPanel.tsx

@@ -4,14 +4,15 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeRaw from 'rehype-raw'
 import rehypePrism from 'rehype-prism-plus'
+import VideoEmbedProcessor from './VideoEmbedProcessor'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import 'prismjs/themes/prism-tomorrow.css'
 import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt, faCopy, faShare, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { ContentSkeleton } from './Skeletons'
 import { nip19 } from 'nostr-tools'
 import { getNostrUrl, getSearchUrl } from '../config/nostrGateways'
-import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
@@ -29,10 +30,12 @@ import {
   hasMarkedEventAsRead,
   hasMarkedWebsiteAsRead
 } from '../services/reactionService'
+import { unarchiveEvent, unarchiveWebsite } from '../services/unarchiveService'
+import { archiveController } from '../services/archiveController'
 import AuthorCard from './AuthorCard'
 import { faBooks } from '../icons/customIcons'
 import { extractYouTubeId, getYouTubeMeta } from '../services/youtubeMetaService'
-import { classifyUrl } from '../utils/helpers'
+import { classifyUrl, shouldTrackReadingProgress } from '../utils/helpers'
 import { buildNativeVideoUrl } from '../utils/videoHelpers'
 import { useReadingPosition } from '../hooks/useReadingPosition'
 import { ReadingProgressIndicator } from './ReadingProgressIndicator'
@@ -43,6 +46,7 @@ import {
   loadReadingPosition, 
   saveReadingPosition 
 } from '../services/readingPositionService'
+import TTSControls from './TTSControls'
 
 interface ContentPanelProps {
   loading: boolean
@@ -151,20 +155,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   // Callback to save reading position
   const handleSavePosition = useCallback(async (position: number) => {
     if (!activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('⏭️ [ContentPanel] Skipping save - missing requirements:', {
-        hasAccount: !!activeAccount,
-        hasRelayPool: !!relayPool,
-        hasEventStore: !!eventStore,
-        hasIdentifier: !!articleIdentifier
-      })
       return
     }
     if (!settings?.syncReadingPosition) {
-      console.log('⏭️ [ContentPanel] Sync disabled in settings')
+      return
+    }
+    
+    // Check if content is long enough to track reading progress
+    if (!shouldTrackReadingProgress(html, markdown)) {
       return
     }
 
-    console.log('💾 [ContentPanel] Saving position:', Math.round(position * 100) + '%', 'for article:', selectedUrl?.slice(0, 50))
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
 
     try {
       const factory = new EventFactory({ signer: activeAccount })
@@ -176,45 +178,44 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         {
           position,
           timestamp: Math.floor(Date.now() / 1000),
-          scrollTop: window.pageYOffset || document.documentElement.scrollTop
+          scrollTop
         }
       )
     } catch (error) {
-      console.error('❌ [ContentPanel] Failed to save reading position:', error)
+      console.error('[progress] ❌ ContentPanel: Failed to save reading position:', error)
     }
-  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, selectedUrl])
+  }, [activeAccount, relayPool, eventStore, articleIdentifier, settings?.syncReadingPosition, html, markdown])
 
-  const { isReadingComplete, progressPercentage, saveNow } = useReadingPosition({
+  const { progressPercentage, saveNow } = useReadingPosition({
     enabled: isTextContent,
-    syncEnabled: settings?.syncReadingPosition,
+    syncEnabled: settings?.syncReadingPosition !== false,
     onSave: handleSavePosition,
     onReadingComplete: () => {
-      // Optional: Auto-mark as read when reading is complete
-      if (activeAccount && !isMarkedAsRead) {
-        // Could trigger auto-mark as read here if desired
+      // Auto-mark as read when reading is complete (if enabled in settings)
+      if (!settings?.autoMarkAsReadOnCompletion || !activeAccount) return
+      if (!isMarkedAsRead) {
+        handleMarkAsRead()
+      } else {
+        // Already archived: still show the success animation for feedback
+        setShowCheckAnimation(true)
+        setTimeout(() => setShowCheckAnimation(false), 600)
       }
     }
   })
+  
+  // Log sync status when it changes
+  useEffect(() => {
+  }, [isTextContent, settings?.syncReadingPosition, activeAccount, relayPool, eventStore, articleIdentifier, progressPercentage])
 
   // Load saved reading position when article loads
   useEffect(() => {
     if (!isTextContent || !activeAccount || !relayPool || !eventStore || !articleIdentifier) {
-      console.log('⏭️ [ContentPanel] Skipping position restore - missing requirements:', {
-        isTextContent,
-        hasAccount: !!activeAccount,
-        hasRelayPool: !!relayPool,
-        hasEventStore: !!eventStore,
-        hasIdentifier: !!articleIdentifier
-      })
       return
     }
-    if (!settings?.syncReadingPosition) {
-      console.log('⏭️ [ContentPanel] Sync disabled - not restoring position')
+    if (settings?.syncReadingPosition === false) {
       return
     }
 
-    console.log('📖 [ContentPanel] Loading position for article:', selectedUrl?.slice(0, 50))
-
     const loadPosition = async () => {
       try {
         const savedPosition = await loadReadingPosition(
@@ -225,7 +226,6 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         )
 
         if (savedPosition && savedPosition.position > 0.05 && savedPosition.position < 1) {
-          console.log('🎯 [ContentPanel] Restoring position:', Math.round(savedPosition.position * 100) + '%')
           // Wait for content to be fully rendered before scrolling
           setTimeout(() => {
             const documentHeight = document.documentElement.scrollHeight
@@ -236,14 +236,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               top: scrollTop,
               behavior: 'smooth'
             })
-            
-            console.log('✅ [ContentPanel] Restored to position:', Math.round(savedPosition.position * 100) + '%', 'scrollTop:', scrollTop)
           }, 500) // Give content time to render
         } else if (savedPosition) {
           if (savedPosition.position === 1) {
-            console.log('✅ [ContentPanel] Article completed (100%), starting from top')
+            // Article was completed, start from top
           } else {
-            console.log('⏭️ [ContentPanel] Position too early (<5%):', Math.round(savedPosition.position * 100) + '%')
+            // Position was too early, skip restore
           }
         }
       } catch (error) {
@@ -324,6 +322,25 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
 
   const hasHighlights = relevantHighlights.length > 0
 
+  // Extract plain text for TTS
+  const baseHtml = useMemo(() => {
+    if (markdown) return renderedMarkdownHtml && finalHtml ? finalHtml : ''
+    return finalHtml || html || ''
+  }, [markdown, renderedMarkdownHtml, finalHtml, html])
+
+  const articleText = useMemo(() => {
+    const parts: string[] = []
+    if (title) parts.push(title)
+    if (summary) parts.push(summary)
+    if (baseHtml) {
+      const div = document.createElement('div')
+      div.innerHTML = baseHtml
+      const txt = (div.textContent || '').replace(/\s+/g, ' ').trim()
+      if (txt) parts.push(txt)
+    }
+    return parts.join('. ')
+  }, [title, summary, baseHtml])
+
   // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
   const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
   const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type)
@@ -361,7 +378,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
     if (!currentArticle) return null
 
     const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
       !r.includes('localhost') && !r.includes('127.0.0.1')
     ).slice(0, 3)
 
@@ -577,12 +595,25 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             activeAccount.pubkey,
             relayPool
           )
+          // Also check archiveController
+          const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+          if (dTag) {
+            try {
+              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+              hasRead = hasRead || archiveController.isMarked(naddr)
+            } catch (e) {
+              // Silently ignore encoding errors
+            }
+          }
         } else {
           hasRead = await hasMarkedWebsiteAsRead(
             selectedUrl,
             activeAccount.pubkey,
             relayPool
           )
+          // Also check archiveController
+          const ctrl = archiveController.isMarked(selectedUrl)
+          hasRead = hasRead || ctrl
         }
         setIsMarkedAsRead(hasRead)
       } catch (error) {
@@ -596,7 +627,35 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   }, [selectedUrl, currentArticle, activeAccount, relayPool, isNostrArticle])
   
   const handleMarkAsRead = () => {
-    if (!activeAccount || !relayPool || isMarkedAsRead) {
+    if (!activeAccount || !relayPool) return
+
+    // Toggle archive state: if already archived, request deletion; else archive
+    if (isMarkedAsRead) {
+      // Optimistically unarchive in UI; background deletion request (NIP-09)
+      setIsMarkedAsRead(false)
+      ;(async () => {
+        try {
+          if (isNostrArticle && currentArticle) {
+            // Send deletion for all matching reactions
+            await unarchiveEvent(currentArticle.id, activeAccount, relayPool)
+            // Also clear controller mark so lists update
+            try {
+              const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+              if (dTag) {
+                const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+                archiveController.unmark(naddr)
+              }
+            } catch (e) {
+              console.warn('[archive][content] encode naddr failed', e)
+            }
+          } else if (selectedUrl) {
+            await unarchiveWebsite(selectedUrl, activeAccount, relayPool)
+            archiveController.unmark(selectedUrl)
+          }
+        } catch (err) {
+          console.warn('[archive][content] unarchive failed', err)
+        }
+      })()
       return
     }
 
@@ -618,16 +677,34 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             currentArticle.pubkey,
             currentArticle.kind,
             activeAccount,
-            relayPool
+            relayPool,
+            {
+              aCoord: (() => {
+                try {
+                  const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+                  if (!dTag) return undefined
+                  return `${30023}:${currentArticle.pubkey}:${dTag}`
+                } catch { return undefined }
+              })()
+            }
           )
-          console.log('✅ Marked nostr article as read')
+          // Update archiveController immediately
+          try {
+            const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1]
+            if (dTag) {
+              const naddr = nip19.naddrEncode({ kind: 30023, pubkey: currentArticle.pubkey, identifier: dTag })
+              archiveController.mark(naddr)
+            }
+          } catch (err) {
+            console.warn('[archive][content] optimistic article mark failed', err)
+          }
         } else if (selectedUrl) {
           await createWebsiteReaction(
             selectedUrl,
             activeAccount,
             relayPool
           )
-          console.log('✅ Marked website as read')
+          archiveController.mark(selectedUrl)
         }
       } catch (error) {
         console.error('Failed to mark as read:', error)
@@ -661,7 +738,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       {isTextContent && (
         <ReadingProgressIndicator 
           progress={progressPercentage}
-          isComplete={isReadingComplete}
+          // Consider complete only at 95%+
+          isComplete={progressPercentage >= 95}
           showPercentage={true}
           isSidebarCollapsed={isSidebarCollapsed}
           isHighlightsCollapsed={isHighlightsCollapsed}
@@ -676,11 +754,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeRaw, rehypePrism]}
             components={{
-              img: ({ src, alt, ...props }) => (
+              img: ({ src, alt }) => (
                 <img 
                   src={src} 
                   alt={alt} 
-                  {...props}
                 />
               )
             }}
@@ -702,6 +779,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         highlights={relevantHighlights}
         highlightVisibility={highlightVisibility}
       />
+      {isTextContent && articleText && (
+        <div style={{ padding: '0 0.75rem 0.5rem 0.75rem' }}>
+          <TTSControls text={articleText} defaultLang={navigator?.language} settings={settings} />
+        </div>
+      )}
       {isExternalVideo ? (
         <>
           <div className="reader-video">
@@ -767,8 +849,9 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               <button
                 className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
                 onClick={handleMarkAsRead}
-                disabled={isMarkedAsRead || isCheckingReadStatus}
+                disabled={isCheckingReadStatus}
                 title={isMarkedAsRead ? 'Already Marked as Watched' : 'Mark as Watched'}
+                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
               >
                 <FontAwesomeIcon 
                   icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
@@ -785,10 +868,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
         <>
           {markdown ? (
             renderedMarkdownHtml && finalHtml ? (
-              <div 
-                ref={contentRef} 
-                className="reader-markdown" 
-                dangerouslySetInnerHTML={{ __html: finalHtml }}
+              <VideoEmbedProcessor
+                ref={contentRef}
+                html={finalHtml}
+                renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+                className="reader-markdown"
                 onMouseUp={handleSelectionEnd}
                 onTouchEnd={handleSelectionEnd}
               />
@@ -800,10 +884,11 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               </div>
             )
           ) : (
-            <div 
-              ref={contentRef} 
-              className="reader-html" 
-              dangerouslySetInnerHTML={{ __html: finalHtml || html || '' }}
+            <VideoEmbedProcessor
+              ref={contentRef}
+              html={finalHtml || html || ''}
+              renderVideoLinksAsEmbeds={settings?.renderVideoLinksAsEmbeds === true && !isExternalVideo}
+              className="reader-html"
               onMouseUp={handleSelectionEnd}
               onTouchEnd={handleSelectionEnd}
             />
@@ -930,21 +1015,22 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             </div>
           )}
           
-          {/* Mark as Read button */}
+          {/* Archive button */}
           {activeAccount && (
             <div className="mark-as-read-container">
               <button
                 className={`mark-as-read-btn ${isMarkedAsRead ? 'marked' : ''} ${showCheckAnimation ? 'animating' : ''}`}
                 onClick={handleMarkAsRead}
-                disabled={isMarkedAsRead || isCheckingReadStatus}
-                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
+                disabled={isCheckingReadStatus}
+                title={isMarkedAsRead ? 'Already Archived' : 'Move to Archive'}
+                style={isMarkedAsRead ? { opacity: 0.85 } : undefined}
               >
                 <FontAwesomeIcon 
                   icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
                   spin={isCheckingReadStatus} 
                 />
                 <span>
-                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Marked as Read' : 'Mark as Read'}
+                  {isCheckingReadStatus ? 'Checking...' : isMarkedAsRead ? 'Archived' : 'Move to Archive'}
                 </span>
               </button>
             </div>

src/components/Explore.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faNewspaper, faHighlighter, faUser, faUserGroup, faNetworkWired, faArrowsRotate, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import IconButton from './IconButton'
@@ -13,15 +13,27 @@ import { fetchBlogPostsFromAuthors, BlogPostPreview } from '../services/exploreS
 import { fetchHighlightsFromAuthors } from '../services/highlightService'
 import { fetchProfiles } from '../services/profileService'
 import { fetchNostrverseBlogPosts, fetchNostrverseHighlights } from '../services/nostrverseService'
+import { nostrverseHighlightsController } from '../services/nostrverseHighlightsController'
+import { highlightsController } from '../services/highlightsController'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from '../services/settingsService'
 import BlogPostCard from './BlogPostCard'
 import { HighlightItem } from './HighlightItem'
-import { getCachedPosts, upsertCachedPost, setCachedPosts, getCachedHighlights, upsertCachedHighlight, setCachedHighlights } from '../services/exploreCache'
+import { getCachedPosts, setCachedPosts, getCachedHighlights, setCachedHighlights } from '../services/exploreCache'
 import { usePullToRefresh } from 'use-pull-to-refresh'
 import RefreshIndicator from './RefreshIndicator'
 import { classifyHighlights } from '../utils/highlightClassification'
 import { HighlightVisibility } from './HighlightsPanel'
+// import { KINDS } from '../config/kinds'
+// import { eventToHighlight } from '../services/highlightEventProcessor'
+// import { useStoreTimeline } from '../hooks/useStoreTimeline'
+import { dedupeHighlightsById, dedupeWritingsByReplaceable } from '../utils/dedupe'
+import { writingsController } from '../services/writingsController'
+import { nostrverseWritingsController } from '../services/nostrverseWritingsController'
+import { readingProgressController } from '../services/readingProgressController'
+
+// Accessors from Helpers (currently unused here)
+// const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
 interface ExploreProps {
   relayPool: RelayPool
@@ -41,14 +53,177 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [loading, setLoading] = useState(true)
   const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [hasLoadedNostrverse, setHasLoadedNostrverse] = useState(false)
+  const [hasLoadedMine, setHasLoadedMine] = useState(false)
+  const [hasLoadedNostrverseHighlights, setHasLoadedNostrverseHighlights] = useState(false)
   
-  // Visibility filters (defaults from settings, or friends only)
+  // Get myHighlights directly from controller
+  const [/* myHighlights */, setMyHighlights] = useState<Highlight[]>([])
+  // Remove unused loading state to avoid warnings
+  
+  // Reading progress state (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+  
+  // Load cached content from event store (instant display)
+  // const cachedHighlights = useStoreTimeline(eventStore, { kinds: [KINDS.Highlights] }, eventToHighlight, [])
+  
+  // const toBlogPostPreview = useCallback((event: NostrEvent): BlogPostPreview => ({
+  //   event,
+  //   title: getArticleTitle(event) || 'Untitled',
+  //   summary: getArticleSummary(event),
+  //   image: getArticleImage(event),
+  //   published: getArticlePublished(event),
+  //   author: event.pubkey
+  // }), [])
+  
+  // const cachedWritings = useStoreTimeline(eventStore, { kinds: [30023] }, toBlogPostPreview, [])
+
+  
+  
+  // Visibility filters (defaults from settings or nostrverse when logged out)
   const [visibility, setVisibility] = useState<HighlightVisibility>({
-    nostrverse: settings?.defaultHighlightVisibilityNostrverse ?? false,
-    friends: settings?.defaultHighlightVisibilityFriends ?? true,
-    mine: settings?.defaultHighlightVisibilityMine ?? false
+    nostrverse: activeAccount ? (settings?.defaultExploreScopeNostrverse ?? false) : true,
+    friends: settings?.defaultExploreScopeFriends ?? true,
+    mine: settings?.defaultExploreScopeMine ?? false
   })
 
+  // Ensure at least one scope remains active
+  const toggleScope = useCallback((key: 'nostrverse' | 'friends' | 'mine') => {
+    setVisibility(prev => {
+      const next = { ...prev, [key]: !prev[key] }
+      if (!next.nostrverse && !next.friends && !next.mine) {
+        return prev // ignore toggle that would disable all scopes
+      }
+      return next
+    })
+  }, [])
+
+  // Subscribe to highlights controller
+  useEffect(() => {
+    const unsubHighlights = highlightsController.onHighlights(setMyHighlights)
+    return () => {
+      unsubHighlights()
+    }
+  }, [])
+
+  // Subscribe to nostrverse highlights controller for global stream
+  useEffect(() => {
+    const apply = (incoming: Highlight[]) => {
+      setHighlights(prev => {
+        const byId = new Map(prev.map(h => [h.id, h]))
+        for (const h of incoming) byId.set(h.id, h)
+        return Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
+      })
+    }
+    // seed immediately
+    apply(nostrverseHighlightsController.getHighlights())
+    const unsub = nostrverseHighlightsController.onHighlights(apply)
+    return () => unsub()
+  }, [])
+
+  // Subscribe to nostrverse writings controller for global stream
+  useEffect(() => {
+    const apply = (incoming: BlogPostPreview[]) => {
+      setBlogPosts(prev => {
+        const byKey = new Map<string, BlogPostPreview>()
+        for (const p of prev) {
+          const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${p.author}:${dTag}`
+          byKey.set(key, p)
+        }
+        for (const p of incoming) {
+          const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${p.author}:${dTag}`
+          const existing = byKey.get(key)
+          if (!existing || p.event.created_at > existing.event.created_at) byKey.set(key, p)
+        }
+        return Array.from(byKey.values()).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+    }
+    apply(nostrverseWritingsController.getWritings())
+    const unsub = nostrverseWritingsController.onWritings(apply)
+    return () => unsub()
+  }, [])
+
+  // Subscribe to writings controller for "mine" posts and seed immediately
+  useEffect(() => {
+    // Seed from controller's current state
+    const seed = writingsController.getWritings()
+    if (seed.length > 0) {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, ...seed])
+        return merged.sort((a, b) => {
+          const timeA = a.published || a.event.created_at
+          const timeB = b.published || b.event.created_at
+          return timeB - timeA
+        })
+      })
+    }
+
+    // Stream updates
+    const unsub = writingsController.onWritings((posts) => {
+      setBlogPosts(prev => {
+        const merged = dedupeWritingsByReplaceable([...prev, ...posts])
+        return merged.sort((a, b) => {
+          const timeA = a.published || a.event.created_at
+          const timeB = b.published || b.event.created_at
+          return timeB - timeA
+        })
+      })
+    })
+
+    return () => unsub()
+  }, [])
+  
+  // Subscribe to reading progress controller
+  useEffect(() => {
+    // Get initial state immediately
+    const initialMap = readingProgressController.getProgressMap()
+    setReadingProgressMap(initialMap)
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress((newMap) => {
+      setReadingProgressMap(newMap)
+    })
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+  
+  // Load reading progress data when logged in
+  useEffect(() => {
+    if (!activeAccount?.pubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: activeAccount.pubkey,
+      force: refreshTrigger > 0
+    })
+  }, [activeAccount?.pubkey, relayPool, eventStore, refreshTrigger])
+
+  // Update visibility when settings/login state changes
+  useEffect(() => {
+    if (!activeAccount) {
+      // When logged out, show nostrverse by default
+      setVisibility(prev => ({ ...prev, nostrverse: true, friends: false, mine: false }))
+      setHasLoadedNostrverse(true) // logged out path loads nostrverse immediately
+      setHasLoadedNostrverseHighlights(true)
+    } else {
+      // When logged in, use settings defaults immediately
+      setVisibility({
+        nostrverse: settings?.defaultExploreScopeNostrverse ?? false,
+        friends: settings?.defaultExploreScopeFriends ?? true,
+        mine: settings?.defaultExploreScopeMine ?? false
+      })
+      setHasLoadedNostrverse(false)
+      setHasLoadedNostrverseHighlights(false)
+    }
+  }, [activeAccount, settings?.defaultExploreScopeNostrverse, settings?.defaultExploreScopeFriends, settings?.defaultExploreScopeMine])
+
   // Update local state when prop changes
   useEffect(() => {
     if (propActiveTab) {
@@ -56,162 +231,150 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     }
   }, [propActiveTab])
 
-  useEffect(() => {
-    const loadData = async () => {
-      if (!activeAccount) {
-        setLoading(false)
-        return
+  // Load initial data and refresh on triggers
+  const loadData = useCallback(() => {
+    if (!relayPool) return
+
+    // Seed from cache for instant UI
+    if (activeAccount) {
+      const cachedPosts = getCachedPosts(activeAccount.pubkey)
+      if (cachedPosts && cachedPosts.length > 0) setBlogPosts(cachedPosts)
+      const cached = getCachedHighlights(activeAccount.pubkey)
+      if (cached && cached.length > 0) setHighlights(cached)
+    }
+
+    setLoading(true)
+
+    try {
+      // Followed pubkeys
+      if (activeAccount?.pubkey) {
+        fetchContacts(relayPool, activeAccount.pubkey)
+        .then((contacts) => {
+          setFollowedPubkeys(new Set(contacts))
+        })
+        .catch(() => {})
       }
 
-      try {
-        // show spinner but keep existing data
-        setLoading(true)
+      // Prepare parallel fetches
+      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+      const contactsArray = Array.from(followedPubkeys)
 
-        // Seed from in-memory cache if available to avoid empty flash
-        // Use functional update to check current state without creating dependency
-        const cachedPosts = getCachedPosts(activeAccount.pubkey)
-        if (cachedPosts && cachedPosts.length > 0) {
-          setBlogPosts(prev => prev.length === 0 ? cachedPosts : prev)
-        }
-        const cachedHighlights = getCachedHighlights(activeAccount.pubkey)
-        if (cachedHighlights && cachedHighlights.length > 0) {
-          setHighlights(prev => prev.length === 0 ? cachedHighlights : prev)
-        }
+      const nostrversePostsPromise: Promise<BlogPostPreview[]> = (!activeAccount || (activeAccount && visibility.nostrverse))
+        ? fetchNostrverseBlogPosts(relayPool, relayUrls, 50, eventStore || undefined).catch(() => [])
+        : Promise.resolve([])
 
-        // Fetch the user's contacts (friends)
-        const contacts = await fetchContacts(
-          relayPool,
-          activeAccount.pubkey,
-          (partial) => {
-            // Store followed pubkeys for highlight classification
-            setFollowedPubkeys(partial)
-            // When local contacts are available, kick off early fetch
-            if (partial.size > 0) {
-              const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-              const partialArray = Array.from(partial)
-              
-              // Fetch blog posts
-              fetchBlogPostsFromAuthors(
-                relayPool,
-                partialArray,
-                relayUrls,
-                (post) => {
-                  setBlogPosts((prev) => {
-                    const exists = prev.some(p => p.event.id === post.event.id)
-                    if (exists) return prev
-                    const next = [...prev, post]
-                    return next.sort((a, b) => {
-                      const timeA = a.published || a.event.created_at
-                      const timeB = b.published || b.event.created_at
-                      return timeB - timeA
-                    })
-                  })
-                  setCachedPosts(activeAccount.pubkey, upsertCachedPost(activeAccount.pubkey, post))
-                }
-              ).then((all) => {
-                setBlogPosts((prev) => {
-                  const byId = new Map(prev.map(p => [p.event.id, p]))
-                  for (const post of all) byId.set(post.event.id, post)
-                  const merged = Array.from(byId.values()).sort((a, b) => {
-                    const timeA = a.published || a.event.created_at
-                    const timeB = b.published || b.event.created_at
-                    return timeB - timeA
-                  })
-                  setCachedPosts(activeAccount.pubkey, merged)
-                  return merged
-                })
-              })
-              
-              // Fetch highlights
-              fetchHighlightsFromAuthors(
-                relayPool,
-                partialArray,
-                (highlight) => {
-                  setHighlights((prev) => {
-                    const exists = prev.some(h => h.id === highlight.id)
-                    if (exists) return prev
-                    const next = [...prev, highlight]
-                    return next.sort((a, b) => b.created_at - a.created_at)
-                  })
-                  setCachedHighlights(activeAccount.pubkey, upsertCachedHighlight(activeAccount.pubkey, highlight))
-                }
-              ).then((all) => {
-                setHighlights((prev) => {
-                  const byId = new Map(prev.map(h => [h.id, h]))
-                  for (const highlight of all) byId.set(highlight.id, highlight)
-                  const merged = Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at)
-                  setCachedHighlights(activeAccount.pubkey, merged)
-                  return merged
-                })
-              })
-            }
-          }
-        )
-        
-        // Always proceed to load nostrverse content even if no contacts
-        // (removed blocking error for empty contacts)
+        // Fire non-blocking fetches and merge as they resolve
+        fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls)
+          .then((friendsPosts) => {
+            setBlogPosts(prev => {
+              const merged = dedupeWritingsByReplaceable([...prev, ...friendsPosts])
+              const sorted = merged.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+              if (activeAccount) setCachedPosts(activeAccount.pubkey, sorted)
+              // Pre-cache profiles in background
+              const authorPubkeys = Array.from(new Set(sorted.map(p => p.author)))
+              fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(() => {})
+              return sorted
+            })
+          }).catch(() => {})
 
-        // Store final followed pubkeys
-        setFollowedPubkeys(contacts)
+        fetchHighlightsFromAuthors(relayPool, contactsArray)
+          .then((friendsHighlights) => {
+            setHighlights(prev => {
+              const merged = dedupeHighlightsById([...prev, ...friendsHighlights])
+              const sorted = merged.sort((a, b) => b.created_at - a.created_at)
+              if (activeAccount) setCachedHighlights(activeAccount.pubkey, sorted)
+              return sorted
+            })
+          }).catch(() => {})
 
-        // Fetch both friends content and nostrverse content in parallel
-        const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-        const contactsArray = Array.from(contacts)
-        const [friendsPosts, friendsHighlights, nostrversePosts, nostriverseHighlights] = await Promise.all([
-          fetchBlogPostsFromAuthors(relayPool, contactsArray, relayUrls),
-          fetchHighlightsFromAuthors(relayPool, contactsArray),
-          fetchNostrverseBlogPosts(relayPool, relayUrls, 50),
-          fetchNostrverseHighlights(relayPool, 100)
-        ])
+        nostrversePostsPromise.then((nostrversePosts) => {
+          setBlogPosts(prev => dedupeWritingsByReplaceable([...prev, ...nostrversePosts]).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at)))
+        }).catch(() => {})
 
-        // Merge and deduplicate all posts
-        const allPosts = [...friendsPosts, ...nostrversePosts]
-        const postsByKey = new Map<string, BlogPostPreview>()
-        for (const post of allPosts) {
-          const key = `${post.author}:${post.event.tags.find(t => t[0] === 'd')?.[1] || ''}`
-          const existing = postsByKey.get(key)
-          if (!existing || post.event.created_at > existing.event.created_at) {
-            postsByKey.set(key, post)
-          }
-        }
-        const uniquePosts = Array.from(postsByKey.values()).sort((a, b) => {
-          const timeA = a.published || a.event.created_at
-          const timeB = b.published || b.event.created_at
-          return timeB - timeA
-        })
-
-        // Merge and deduplicate all highlights
-        const allHighlights = [...friendsHighlights, ...nostriverseHighlights]
-        const highlightsByKey = new Map<string, Highlight>()
-        for (const highlight of allHighlights) {
-          highlightsByKey.set(highlight.id, highlight)
-        }
-        const uniqueHighlights = Array.from(highlightsByKey.values()).sort((a, b) => b.created_at - a.created_at)
-
-        // Fetch profiles for all blog post authors to cache them
-        if (uniquePosts.length > 0) {
-          const authorPubkeys = Array.from(new Set(uniquePosts.map(p => p.author)))
-          fetchProfiles(relayPool, eventStore, authorPubkeys, settings).catch(err => {
-            console.error('Failed to fetch author profiles:', err)
-          })
-        }
-
-        // No blocking errors - let empty states handle messaging
-        setBlogPosts(uniquePosts)
-        setCachedPosts(activeAccount.pubkey, uniquePosts)
-
-        setHighlights(uniqueHighlights)
-        setCachedHighlights(activeAccount.pubkey, uniqueHighlights)
+        fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
+          .then((nostriverseHighlights) => {
+            setHighlights(prev => dedupeHighlightsById([...prev, ...nostriverseHighlights]).sort((a, b) => b.created_at - a.created_at))
+          }).catch(() => {})
       } catch (err) {
         console.error('Failed to load data:', err)
         // No blocking error - user can pull-to-refresh
       } finally {
-        setLoading(false)
+        // loading is already turned off after seeding
       }
-    }
+  }, [relayPool, activeAccount, eventStore, settings, visibility.nostrverse, followedPubkeys])
 
+  useEffect(() => {
     loadData()
-  }, [relayPool, activeAccount, refreshTrigger, eventStore, settings])
+  }, [loadData, refreshTrigger])
+
+  // Lazy-load nostrverse writings when user toggles it on (logged in)
+  useEffect(() => {
+    if (!activeAccount || !relayPool || !visibility.nostrverse || hasLoadedNostrverse) return
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    setHasLoadedNostrverse(true)
+    fetchNostrverseBlogPosts(
+      relayPool,
+      relayUrls,
+      50,
+      eventStore || undefined,
+      (post) => {
+        setBlogPosts(prev => {
+          const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${post.author}:${dTag}`
+          const existingIndex = prev.findIndex(p => {
+            const pDTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+            return `${p.author}:${pDTag}` === key
+          })
+          if (existingIndex >= 0) {
+            const existing = prev[existingIndex]
+            if (post.event.created_at <= existing.event.created_at) return prev
+            const next = [...prev]
+            next[existingIndex] = post
+            return next.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+          }
+          const next = [...prev, post]
+          return next.sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+        })
+      }
+    ).then((finalPosts) => {
+      // Ensure final deduped list
+      setBlogPosts(prev => {
+        const byKey = new Map<string, BlogPostPreview>()
+        for (const p of [...prev, ...finalPosts]) {
+          const dTag = p.event.tags.find(t => t[0] === 'd')?.[1] || ''
+          const key = `${p.author}:${dTag}`
+          const existing = byKey.get(key)
+          if (!existing || p.event.created_at > existing.event.created_at) byKey.set(key, p)
+        }
+        return Array.from(byKey.values()).sort((a, b) => (b.published || b.event.created_at) - (a.published || a.event.created_at))
+      })
+    }).catch(() => {})
+
+    fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
+      .then((nostriverseHighlights) => {
+        setHighlights(prev => dedupeHighlightsById([...prev, ...nostriverseHighlights]).sort((a, b) => b.created_at - a.created_at))
+      }).catch(() => {})
+  }, [activeAccount, relayPool, visibility.nostrverse, hasLoadedNostrverse, eventStore])
+
+  // Lazy-load nostrverse highlights when user toggles it on (logged in)
+  useEffect(() => {
+    if (!activeAccount || !relayPool || !visibility.nostrverse || hasLoadedNostrverseHighlights) return
+    setHasLoadedNostrverseHighlights(true)
+    fetchNostrverseHighlights(relayPool, 100, eventStore || undefined)
+      .then((hl) => {
+        if (hl && hl.length > 0) {
+          setHighlights(prev => dedupeHighlightsById([...prev, ...hl]).sort((a, b) => b.created_at - a.created_at))
+        }
+      })
+      .catch(() => {})
+  }, [visibility.nostrverse, activeAccount, relayPool, eventStore, hasLoadedNostrverseHighlights])
+
+  // Lazy-load my writings when user toggles "mine" on (logged in)
+  // No direct fetch here; writingsController streams my posts centrally
+  useEffect(() => {
+    if (!activeAccount || !visibility.mine || hasLoadedMine) return
+    setHasLoadedMine(true)
+  }, [visibility.mine, activeAccount, hasLoadedMine])
 
   // Pull-to-refresh
   const { isRefreshing, pullPosition } = usePullToRefresh({
@@ -249,15 +412,31 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     })
   }, [highlights, activeAccount?.pubkey, followedPubkeys, visibility])
 
+  // Dedupe and sort posts once for rendering
+  const uniqueSortedPosts = useMemo(() => {
+    const unique = dedupeWritingsByReplaceable(blogPosts)
+    return unique.sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }, [blogPosts])
+
   // Filter blog posts by future dates and visibility, and add level classification
   const filteredBlogPosts = useMemo(() => {
     const maxFutureTime = Date.now() / 1000 + (24 * 60 * 60) // 1 day from now
-    return blogPosts
+    return uniqueSortedPosts
       .filter(post => {
         // Filter out future dates
         const publishedTime = post.published || post.event.created_at
         if (publishedTime > maxFutureTime) return false
         
+        // Hide bot authors by profile display name if setting enabled
+        if (settings?.hideBotArticlesByName !== false) {
+          // Profile resolution and filtering is handled in BlogPostCard via ProfileModel
+          // Keep list intact here; individual cards will render null if author is a bot
+        }
+        
         // Apply visibility filters
         const isMine = activeAccount && post.author === activeAccount.pubkey
         const isFriend = followedPubkeys.has(post.author)
@@ -276,7 +455,29 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         const level: 'mine' | 'friends' | 'nostrverse' = isMine ? 'mine' : isFriend ? 'friends' : 'nostrverse'
         return { ...post, level }
       })
-  }, [blogPosts, activeAccount, followedPubkeys, visibility])
+  }, [uniqueSortedPosts, activeAccount, followedPubkeys, visibility, settings?.hideBotArticlesByName])
+  
+  // Helper to get reading progress for a post
+  const getReadingProgress = useCallback((post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) {
+      return undefined
+    }
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      const progress = readingProgressMap.get(naddr)
+      
+      return progress
+    } catch (err) {
+      console.error('[progress] ❌ Error encoding naddr:', err)
+      return undefined
+    }
+  }, [readingProgressMap])
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -302,6 +503,8 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
                 post={post}
                 href={getPostUrl(post)}
                 level={post.level}
+                readingProgress={getReadingProgress(post)}
+                hideBotByName={settings?.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -319,7 +522,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         }
         return classifiedHighlights.length === 0 ? (
           <div className="explore-loading" style={{ gridColumn: '1/-1', display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-            <FontAwesomeIcon icon={faSpinner} spin size="2x" />
+            <span>No highlights to show for the selected scope.</span>
           </div>
         ) : (
           <div className="explore-grid">
@@ -338,7 +541,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
     }
   }
 
-  // Show content progressively - no blocking error screens
+  // Show skeletons while first load in this session
   const hasData = highlights.length > 0 || blogPosts.length > 0
   const showSkeletons = loading && !hasData
 
@@ -367,7 +570,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           />
           <IconButton
             icon={faNetworkWired}
-            onClick={() => setVisibility({ ...visibility, nostrverse: !visibility.nostrverse })}
+            onClick={() => toggleScope('nostrverse')}
             title="Toggle nostrverse content"
             ariaLabel="Toggle nostrverse content"
             variant="ghost"
@@ -378,7 +581,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           />
           <IconButton
             icon={faUserGroup}
-            onClick={() => setVisibility({ ...visibility, friends: !visibility.friends })}
+            onClick={() => toggleScope('friends')}
             title={activeAccount ? "Toggle friends content" : "Login to see friends content"}
             ariaLabel="Toggle friends content"
             variant="ghost"
@@ -390,7 +593,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
           />
           <IconButton
             icon={faUser}
-            onClick={() => setVisibility({ ...visibility, mine: !visibility.mine })}
+            onClick={() => toggleScope('mine')}
             title={activeAccount ? "Toggle my content" : "Login to see your content"}
             ariaLabel="Toggle my content"
             variant="ghost"
@@ -422,7 +625,9 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
         </div>
       </div>
 
-      {renderTabContent()}
+      <div key={activeTab}>
+        {renderTabContent()}
+      </div>
     </div>
   )
 }

src/components/HighlightCitation.tsx

@@ -27,7 +27,6 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
     // Fallback: extract directly from p tag
     const pTag = highlight.tags.find(t => t[0] === 'p')
     if (pTag && pTag[1]) {
-      console.log('📝 Found author from p tag:', pTag[1])
       return pTag[1]
     }
     
@@ -45,6 +44,12 @@ export const HighlightCitation: React.FC<HighlightCitationProps> = ({
       try {
         if (!highlight.eventReference) return
         
+        // Skip if it's a raw event ID (hex string without colons)
+        // Raw event IDs cannot be decoded to nadrs without additional context
+        if (!highlight.eventReference.includes(':') && !highlight.eventReference.startsWith('naddr')) {
+          return
+        }
+        
         // Convert eventReference to naddr if needed
         let naddr: string
         if (highlight.eventReference.includes(':')) {

src/components/HighlightItem.tsx

@@ -8,8 +8,8 @@ import { Models, IEventStore } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { Hooks } from 'applesauce-react'
 import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
-import { RELAYS } from '../config/relays'
 import { areAllRelaysLocal } from '../utils/helpers'
+import { getActiveRelayUrls } from '../services/relayManager'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
@@ -17,6 +17,7 @@ import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
 import { useNavigate } from 'react-router-dom'
+import NostrMentionLink from './NostrMentionLink'
 
 // Helper to detect if a URL is an image
 const isImageUrl = (url: string): boolean => {
@@ -29,99 +30,6 @@ const isImageUrl = (url: string): boolean => {
   }
 }
 
-// Helper to render a nostr identifier
-const renderNostrId = (nostrUri: string, index: number): React.ReactElement => {
-  try {
-    // Remove nostr: prefix
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    const decoded = nip19.decode(identifier)
-    
-    switch (decoded.type) {
-      case 'npub': {
-        const pubkey = decoded.data
-        return (
-          <a
-            key={index}
-            href={`/p/${nip19.npubEncode(pubkey)}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'nprofile': {
-        const { pubkey } = decoded.data
-        const npub = nip19.npubEncode(pubkey)
-        return (
-          <a
-            key={index}
-            href={`/p/${npub}`}
-            className="highlight-comment-link"
-            onClick={(e) => e.stopPropagation()}
-          >
-            @{pubkey.slice(0, 8)}...
-          </a>
-        )
-      }
-      case 'naddr': {
-        const { kind, pubkey, identifier } = decoded.data
-        // Check if it's a blog post (kind:30023)
-        if (kind === 30023) {
-          const naddr = nip19.naddrEncode({ kind, pubkey, identifier })
-          return (
-            <a
-              key={index}
-              href={`/a/${naddr}`}
-              className="highlight-comment-link"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {identifier || 'Article'}
-            </a>
-          )
-        }
-        // For other kinds, show shortened identifier
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            nostr:{identifier.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'note': {
-        const eventId = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            note:{eventId.slice(0, 12)}...
-          </span>
-        )
-      }
-      case 'nevent': {
-        const { id } = decoded.data
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            event:{id.slice(0, 12)}...
-          </span>
-        )
-      }
-      default:
-        // Fallback for unrecognized types
-        return (
-          <span key={index} className="highlight-comment-nostr-id">
-            {identifier.slice(0, 20)}...
-          </span>
-        )
-    }
-  } catch (error) {
-    // If decoding fails, show shortened identifier
-    const identifier = nostrUri.replace(/^nostr:/, '')
-    return (
-      <span key={index} className="highlight-comment-nostr-id">
-        {identifier.slice(0, 20)}...
-      </span>
-    )
-  }
-}
-
 // Component to render comment with links, inline images, and nostr identifiers
 const CommentContent: React.FC<{ text: string }> = ({ text }) => {
   // Pattern to match both http(s) URLs and nostr: URIs
@@ -131,9 +39,15 @@ const CommentContent: React.FC<{ text: string }> = ({ text }) => {
   return (
     <>
       {parts.map((part, index) => {
-        // Handle nostr: URIs
+        // Handle nostr: URIs - now with profile resolution
         if (part.startsWith('nostr:')) {
-          return renderNostrId(part, index)
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+              onClick={(e) => e.stopPropagation()}
+            />
+          )
         }
         
         // Handle http(s) URLs
@@ -236,10 +150,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           setShowOfflineIndicator(false)
           
           // Update the highlight with all relays after successful sync
-          if (onHighlightUpdate && highlight.isLocalOnly) {
+          if (onHighlightUpdate && highlight.isLocalOnly && relayPool) {
             const updatedHighlight = {
               ...highlight,
-              publishedRelays: RELAYS,
+              publishedRelays: getActiveRelayUrls(relayPool),
               isLocalOnly: false,
               isOfflineCreated: false
             }
@@ -250,7 +164,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     })
     
     return unsubscribe
-  }, [highlight, onHighlightUpdate])
+  }, [highlight, onHighlightUpdate, relayPool])
   
   useEffect(() => {
     if (isSelected && itemRef.current) {
@@ -310,7 +224,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   const getHighlightLinks = () => {
     // Encode the highlight event itself (kind 9802) as a nevent
     // Get non-local relays for the hint
-    const relayHints = RELAYS.filter(r => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayHints = activeRelays.filter(r => 
       !r.includes('localhost') && !r.includes('127.0.0.1')
     ).slice(0, 3) // Include up to 3 relay hints
     
@@ -346,13 +261,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
       }
       
       // Publish to all configured relays - let the relay pool handle connection state
-      const targetRelays = RELAYS
+      const targetRelays = getActiveRelayUrls(relayPool)
       
-      console.log('📡 Rebroadcasting highlight to', targetRelays.length, 'relay(s):', targetRelays)
       
       await relayPool.publish(targetRelays, event)
       
-      console.log('✅ Rebroadcast successful!')
       
       // Update the highlight with new relay info
       const isLocalOnly = areAllRelaysLocal(targetRelays)
@@ -416,7 +329,8 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
     
     // Fallback: show all relays we queried (where this was likely fetched from)
-    const relayNames = RELAYS.map(url => 
+    const activeRelays = relayPool ? getActiveRelayUrls(relayPool) : []
+    const relayNames = activeRelays.map(url => 
       url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
     )
     return {
@@ -449,7 +363,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         relayPool
       )
       
-      console.log('✅ Highlight deletion request published')
       
       // Notify parent to remove this highlight from the list
       if (onHighlightDelete) {

src/components/HighlightsPanel/HighlightsPanelHeader.tsx

@@ -46,36 +46,38 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
                   opacity: highlightVisibility.nostrverse ? 1 : 0.4 
                 }}
               />
-              <IconButton
-                icon={faUserGroup}
-                onClick={() => onHighlightVisibilityChange({ 
-                  ...highlightVisibility, 
-                  friends: !highlightVisibility.friends 
-                })}
-                title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
-                ariaLabel="Toggle friends highlights"
-                variant="ghost"
-                disabled={!currentUserPubkey}
-                style={{ 
-                  color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
-                  opacity: highlightVisibility.friends ? 1 : 0.4 
-                }}
-              />
-              <IconButton
-                icon={faUser}
-                onClick={() => onHighlightVisibilityChange({ 
-                  ...highlightVisibility, 
-                  mine: !highlightVisibility.mine 
-                })}
-                title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
-                ariaLabel="Toggle my highlights"
-                variant="ghost"
-                disabled={!currentUserPubkey}
-                style={{ 
-                  color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
-                  opacity: highlightVisibility.mine ? 1 : 0.4 
-                }}
-              />
+              {currentUserPubkey && (
+                <>
+                  <IconButton
+                    icon={faUserGroup}
+                    onClick={() => onHighlightVisibilityChange({ 
+                      ...highlightVisibility, 
+                      friends: !highlightVisibility.friends 
+                    })}
+                    title="Toggle friends highlights"
+                    ariaLabel="Toggle friends highlights"
+                    variant="ghost"
+                    style={{ 
+                      color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
+                      opacity: highlightVisibility.friends ? 1 : 0.4 
+                    }}
+                  />
+                  <IconButton
+                    icon={faUser}
+                    onClick={() => onHighlightVisibilityChange({ 
+                      ...highlightVisibility, 
+                      mine: !highlightVisibility.mine 
+                    })}
+                    title="Toggle my highlights"
+                    ariaLabel="Toggle my highlights"
+                    variant="ghost"
+                    style={{ 
+                      color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
+                      opacity: highlightVisibility.mine ? 1 : 0.4 
+                    }}
+                  />
+                </>
+              )}
             </div>
           )}
           {onRefresh && (

src/components/LoginOptions.tsx

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

src/components/Me.tsx

@@ -1,73 +1,82 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare, faLink, faLayerGroup, faBars } from '@fortawesome/free-solid-svg-icons'
+import { faHighlighter, faBookmark, faPenToSquare, faLink, faLayerGroup, faBars } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
+import { IEventStore } from 'applesauce-core'
 import { BlogPostSkeleton, HighlightSkeleton, BookmarkSkeleton } from './Skeletons'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
-import { fetchHighlights } from '../services/highlightService'
-import { fetchAllReads, ReadItem } from '../services/readsService'
+import { highlightsController } from '../services/highlightsController'
+import { writingsController } from '../services/writingsController'
 import { fetchLinks } from '../services/linksService'
-import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService'
-import { RELAYS } from '../config/relays'
+import { ReadItem, readsController } from '../services/readsController'
+import { BlogPostPreview } from '../services/exploreService'
 import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
 import { BookmarkItem } from './BookmarkItem'
 import IconButton from './IconButton'
-import { ViewMode } from './Bookmarks'
 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 } from '../utils/bookmarkUtils'
+import { groupIndividualBookmarks, hasContent, hasCreationDate } from '../utils/bookmarkUtils'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
 import { filterByReadingProgress } from '../utils/readingProgressUtils'
-import { deriveReadsFromBookmarks } from '../utils/readsFromBookmarks'
 import { deriveLinksFromBookmarks } from '../utils/linksFromBookmarks'
-import { mergeReadItem } from '../utils/readItemMerge'
+import { readingProgressController } from '../services/readingProgressController'
+import { archiveController } from '../services/archiveController'
+import { UserSettings } from '../services/settingsService'
 
 interface MeProps {
   relayPool: RelayPool
+  eventStore: IEventStore
   activeTab?: TabType
-  pubkey?: string // Optional pubkey for viewing other users' profiles
   bookmarks: Bookmark[] // From centralized App.tsx state
   bookmarksLoading?: boolean // From centralized App.tsx state (reserved for future use)
+  settings: UserSettings
 }
 
 type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
 
 // Valid reading progress filters
-const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed']
+const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed', 'highlighted', 'archive']
 
 const Me: React.FC<MeProps> = ({ 
   relayPool, 
-  activeTab: propActiveTab, 
-  pubkey: propPubkey,
-  bookmarks
+  eventStore,
+  activeTab: propActiveTab,
+  bookmarks,
+  settings
 }) => {
   const activeAccount = Hooks.useActiveAccount()
   const navigate = useNavigate()
   const { filter: urlFilter } = useParams<{ filter?: string }>()
   const [activeTab, setActiveTab] = useState<TabType>(propActiveTab || 'highlights')
   
-  // Use provided pubkey or fall back to active account
-  const viewingPubkey = propPubkey || activeAccount?.pubkey
-  const isOwnProfile = !propPubkey || (activeAccount?.pubkey === propPubkey)
+  // Only for own profile
+  const viewingPubkey = activeAccount?.pubkey
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [reads, setReads] = useState<ReadItem[]>([])
-  const [, setReadsMap] = useState<Map<string, ReadItem>>(new Map())
   const [links, setLinks] = useState<ReadItem[]>([])
   const [, setLinksMap] = useState<Map<string, ReadItem>>(new Map())
   const [writings, setWritings] = useState<BlogPostPreview[]>([])
   const [loading, setLoading] = useState(true)
   const [loadedTabs, setLoadedTabs] = useState<Set<TabType>>(new Set())
-  const [viewMode, setViewMode] = useState<ViewMode>('cards')
+  
+  // Get myHighlights directly from controller
+  const [myHighlights, setMyHighlights] = useState<Highlight[]>([])
+  const [myHighlightsLoading, setMyHighlightsLoading] = useState(false)
+  
+  // Get myWritings directly from controller
+  const [myWritings, setMyWritings] = useState<BlogPostPreview[]>([])
+  const [myWritingsLoading, setMyWritingsLoading] = useState(false)
+  
   const [refreshTrigger, setRefreshTrigger] = useState(0)
   const [bookmarkFilter, setBookmarkFilter] = useState<BookmarkFilterType>('all')
   const [groupingMode, setGroupingMode] = useState<'grouped' | 'flat'>(() => {
@@ -82,10 +91,43 @@ const Me: React.FC<MeProps> = ({
   }
   
   // Initialize reading progress filter from URL param
-  const initialFilter = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
-    ? (urlFilter as ReadingProgressFilterType) 
+  // Backward compat: map legacy 'emoji' route to 'archive'
+  const normalizedUrlFilter = urlFilter === 'emoji' ? 'archive' : urlFilter
+  const initialFilter = normalizedUrlFilter && VALID_FILTERS.includes(normalizedUrlFilter as ReadingProgressFilterType) 
+    ? (normalizedUrlFilter as ReadingProgressFilterType) 
     : 'all'
   const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>(initialFilter)
+  
+  // Reading progress state for writings tab (naddr -> progress 0-1)
+  const [readingProgressMap, setReadingProgressMap] = useState<Map<string, number>>(new Map())
+
+  // Subscribe to highlights controller
+  useEffect(() => {
+    // Get initial state immediately
+    setMyHighlights(highlightsController.getHighlights())
+    
+    // Subscribe to updates
+    const unsubHighlights = highlightsController.onHighlights(setMyHighlights)
+    const unsubLoading = highlightsController.onLoading(setMyHighlightsLoading)
+    return () => {
+      unsubHighlights()
+      unsubLoading()
+    }
+  }, [])
+
+  // Subscribe to writings controller
+  useEffect(() => {
+    // Get initial state immediately
+    setMyWritings(writingsController.getWritings())
+    
+    // Subscribe to updates
+    const unsubWritings = writingsController.onWritings(setMyWritings)
+    const unsubLoading = writingsController.onLoading(setMyWritingsLoading)
+    return () => {
+      unsubWritings()
+      unsubLoading()
+    }
+  }, [])
 
   // Update local state when prop changes
   useEffect(() => {
@@ -96,8 +138,9 @@ const Me: React.FC<MeProps> = ({
 
   // Sync filter state with URL changes
   useEffect(() => {
-    const filterFromUrl = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
-      ? (urlFilter as ReadingProgressFilterType) 
+    const normalized = urlFilter === 'emoji' ? 'archive' : urlFilter
+    const filterFromUrl = normalized && VALID_FILTERS.includes(normalized as ReadingProgressFilterType) 
+      ? (normalized as ReadingProgressFilterType) 
       : 'all'
     setReadingProgressFilter(filterFromUrl)
   }, [urlFilter])
@@ -111,47 +154,86 @@ const Me: React.FC<MeProps> = ({
       } else {
         navigate(`/me/reads/${filter}`, { replace: true })
       }
+    } else if (activeTab === 'links') {
+      if (filter === 'all') {
+        navigate('/me/links', { replace: true })
+      } else {
+        navigate(`/me/links/${filter}`, { replace: true })
+      }
     }
   }
+  
+  // Subscribe to reads controller
+  useEffect(() => {
+    // Get initial state immediately
+    setReads(readsController.getReads())
+    
+    // Subscribe to updates
+    const unsubReads = readsController.onReads(setReads)
+    
+    return () => {
+      unsubReads()
+    }
+  }, [])
+
+  // Subscribe to reading progress map for writings and links enrichment
+  useEffect(() => {
+    // Get initial state immediately
+    setReadingProgressMap(readingProgressController.getProgressMap())
+    
+    // Subscribe to updates
+    const unsubProgress = readingProgressController.onProgress(setReadingProgressMap)
+    
+    return () => {
+      unsubProgress()
+    }
+  }, [])
+
+  
+  // Load reading progress data for writings tab
+  useEffect(() => {
+    if (!viewingPubkey) {
+      return
+    }
+    
+    readingProgressController.start({
+      relayPool,
+      eventStore,
+      pubkey: viewingPubkey,
+      force: refreshTrigger > 0
+    })
+  }, [viewingPubkey, relayPool, eventStore, refreshTrigger])
 
   // Tab-specific loading functions
-  const loadHighlightsTab = async () => {
+  const loadHighlightsTab = useCallback(async () => {
     if (!viewingPubkey) return
     
-    // Only show loading skeleton if tab hasn't been loaded yet
-    const hasBeenLoaded = loadedTabs.has('highlights')
-    
-    try {
-      if (!hasBeenLoaded) setLoading(true)
-      const userHighlights = await fetchHighlights(relayPool, viewingPubkey)
-      setHighlights(userHighlights)
-      setLoadedTabs(prev => new Set(prev).add('highlights'))
-    } catch (err) {
-      console.error('Failed to load highlights:', err)
-    } finally {
-      if (!hasBeenLoaded) setLoading(false)
-    }
-  }
+    // Highlights come from controller subscription (sync effect handles it)
+    setLoadedTabs(prev => new Set(prev).add('highlights'))
+    setLoading(false)
+  }, [viewingPubkey])
 
-  const loadWritingsTab = async () => {
+  const loadWritingsTab = useCallback(async () => {
     if (!viewingPubkey) return
     
-    const hasBeenLoaded = loadedTabs.has('writings')
-    
     try {
-      if (!hasBeenLoaded) setLoading(true)
-      const userWritings = await fetchBlogPostsFromAuthors(relayPool, [viewingPubkey], RELAYS)
-      setWritings(userWritings)
+      // Use centralized controller
+      await writingsController.start({ 
+        relayPool, 
+        eventStore, 
+        pubkey: viewingPubkey,
+        force: refreshTrigger > 0
+      })
       setLoadedTabs(prev => new Set(prev).add('writings'))
+      setLoading(false)
     } catch (err) {
       console.error('Failed to load writings:', err)
-    } finally {
-      if (!hasBeenLoaded) setLoading(false)
+      setLoading(false)
     }
-  }
+  }, [viewingPubkey, relayPool, eventStore, refreshTrigger])
 
-  const loadReadingListTab = async () => {
-    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+  const loadReadingListTab = useCallback(async () => {
+    if (!viewingPubkey || !activeAccount) return
     
     const hasBeenLoaded = loadedTabs.has('reading-list')
     
@@ -164,60 +246,34 @@ const Me: React.FC<MeProps> = ({
     } finally {
       if (!hasBeenLoaded) setLoading(false)
     }
-  }
+  }, [viewingPubkey, activeAccount, loadedTabs])
 
-  const loadReadsTab = async () => {
-    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+  const loadReadsTab = useCallback(async () => {
+    if (!viewingPubkey || !activeAccount) return
     
     const hasBeenLoaded = loadedTabs.has('reads')
     
     try {
       if (!hasBeenLoaded) setLoading(true)
       
-      // Derive reads from bookmarks immediately (bookmarks come from centralized loading in App.tsx)
-      const initialReads = deriveReadsFromBookmarks(bookmarks)
-      const initialMap = new Map(initialReads.map(item => [item.id, item]))
-      setReadsMap(initialMap)
-      setReads(initialReads)
+      // Use readsController to get reads with progressive hydration
+      await readsController.start({ 
+        relayPool, 
+        eventStore, 
+        pubkey: viewingPubkey 
+      })
+      
       setLoadedTabs(prev => new Set(prev).add('reads'))
       if (!hasBeenLoaded) setLoading(false)
       
-      // Background enrichment: merge reading progress and mark-as-read
-      // Only update items that are already in our map
-      fetchAllReads(relayPool, viewingPubkey, bookmarks, (item) => {
-        console.log('📈 [Reads] Enrichment item received:', {
-          id: item.id.slice(0, 20) + '...',
-          progress: item.readingProgress,
-          hasProgress: item.readingProgress !== undefined && item.readingProgress > 0
-        })
-        
-        setReadsMap(prevMap => {
-          // Only update if item exists in our current map
-          if (!prevMap.has(item.id)) {
-            console.log('⚠️ [Reads] Item not in map, skipping:', item.id.slice(0, 20) + '...')
-            return prevMap
-          }
-          
-          const newMap = new Map(prevMap)
-          const merged = mergeReadItem(newMap, item)
-          if (merged) {
-            console.log('✅ [Reads] Merged progress:', item.id.slice(0, 20) + '...', item.readingProgress)
-            // Update reads array after map is updated
-            setReads(Array.from(newMap.values()))
-            return newMap
-          }
-          return prevMap
-        })
-      }).catch(err => console.warn('Failed to enrich reads:', err))
-      
     } catch (err) {
       console.error('Failed to load reads:', err)
       if (!hasBeenLoaded) setLoading(false)
     }
-  }
+  }, [viewingPubkey, activeAccount, loadedTabs, relayPool, eventStore])
 
-  const loadLinksTab = async () => {
-    if (!viewingPubkey || !isOwnProfile || !activeAccount) return
+  const loadLinksTab = useCallback(async () => {
+    if (!viewingPubkey || !activeAccount) return
     
     const hasBeenLoaded = loadedTabs.has('links')
     
@@ -240,12 +296,13 @@ const Me: React.FC<MeProps> = ({
           if (!prevMap.has(item.id)) return prevMap
           
           const newMap = new Map(prevMap)
-          if (mergeReadItem(newMap, item)) {
-            // Update links array after map is updated
-            setLinks(Array.from(newMap.values()))
-            return newMap
+          if (item.type === 'article' && item.author) {
+            const progress = readingProgressMap.get(item.id)
+            if (progress !== undefined) {
+              newMap.set(item.id, { ...item, readingProgress: progress })
+            }
           }
-          return prevMap
+          return newMap
         })
       }).catch(err => console.warn('Failed to enrich links:', err))
       
@@ -253,24 +310,22 @@ const Me: React.FC<MeProps> = ({
       console.error('Failed to load links:', err)
       if (!hasBeenLoaded) setLoading(false)
     }
-  }
+  }, [viewingPubkey, activeAccount, loadedTabs, bookmarks, relayPool, readingProgressMap])
 
   // Load active tab data
-  useEffect(() => {
+  const loadActiveTab = useCallback(() => {
     if (!viewingPubkey || !activeTab) {
       setLoading(false)
       return
     }
 
     // Load cached data immediately if available
-    if (isOwnProfile) {
-      const cached = getCachedMeData(viewingPubkey)
-      if (cached) {
-        setHighlights(cached.highlights)
-        // Bookmarks come from App.tsx centralized state, no local caching needed
-        setReads(cached.reads || [])
-        setLinks(cached.links || [])
-      }
+    const cached = getCachedMeData(viewingPubkey)
+    if (cached) {
+      setHighlights(cached.highlights)
+      // Bookmarks come from App.tsx centralized state, no local caching needed
+      setReads(cached.reads || [])
+      setLinks(cached.links || [])
     }
 
     // Load data for active tab (refresh in background if already loaded)
@@ -291,9 +346,21 @@ const Me: React.FC<MeProps> = ({
         loadLinksTab()
         break
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab, viewingPubkey, refreshTrigger])
+  }, [viewingPubkey, activeTab, loadHighlightsTab, loadWritingsTab, loadReadingListTab, loadReadsTab, loadLinksTab])
 
+  useEffect(() => {
+    loadActiveTab()
+  }, [loadActiveTab])
+
+  // Sync myHighlights from controller
+  useEffect(() => {
+    setHighlights(myHighlights)
+  }, [myHighlights])
+
+  // Sync myWritings from controller
+  useEffect(() => {
+    setWritings(myWritings)
+  }, [myWritings])
 
   // Pull-to-refresh - reload active tab without clearing state
   const { isRefreshing, pullPosition } = usePullToRefresh({
@@ -309,8 +376,8 @@ const Me: React.FC<MeProps> = ({
   const handleHighlightDelete = (highlightId: string) => {
     setHighlights(prev => {
       const updated = prev.filter(h => h.id !== highlightId)
-      // Update cache when highlight is deleted (own profile only)
-      if (isOwnProfile && viewingPubkey) {
+      // Update cache when highlight is deleted
+      if (viewingPubkey) {
         updateCachedHighlights(viewingPubkey, updated)
       }
       return updated
@@ -388,33 +455,132 @@ const Me: React.FC<MeProps> = ({
       navigate(`/r/${encodeURIComponent(url)}`)
     }
   }
+  
+  // Helper to get reading progress for a post
+  const getWritingReadingProgress = (post: BlogPostPreview): number | undefined => {
+    const dTag = post.event.tags.find(t => t[0] === 'd')?.[1]
+    if (!dTag) return undefined
+    
+    try {
+      const naddr = nip19.naddrEncode({
+        kind: 30023,
+        pubkey: post.author,
+        identifier: dTag
+      })
+      return readingProgressMap.get(naddr)
+    } catch (err) {
+      return undefined
+    }
+  }
+
+  // Helper to get reading progress for a bookmark
+  const getBookmarkReadingProgress = (bookmark: IndividualBookmark): number | undefined => {
+    if (bookmark.kind === 30023) {
+      const dTag = bookmark.tags.find(t => t[0] === 'd')?.[1]
+      if (!dTag) return undefined
+      try {
+        const naddr = nip19.naddrEncode({
+          kind: 30023,
+          pubkey: bookmark.pubkey,
+          identifier: dTag
+        })
+        return readingProgressMap.get(naddr)
+      } catch (err) {
+        return undefined
+      }
+    }
+    return undefined
+  }
 
   // Merge and flatten all individual bookmarks
   const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
     .filter(hasContent)
+    .filter(b => !settings?.hideBookmarksWithoutCreationDate || hasCreationDate(b))
   
   // Apply bookmark filter
   const filteredBookmarks = filterBookmarksByType(allIndividualBookmarks, bookmarkFilter)
   
   const groups = groupIndividualBookmarks(filteredBookmarks)
 
-  // Apply reading progress filter
-  const filteredReads = filterByReadingProgress(reads, readingProgressFilter)
-  const filteredLinks = filterByReadingProgress(links, readingProgressFilter)
+  // Enrich links with reading progress (reads already have progress from controller)
+  const linksWithProgress = links.map(item => {
+    if (item.url) {
+      const progress = readingProgressMap.get(item.url)
+      if (progress !== undefined) {
+        return { ...item, readingProgress: progress }
+      }
+    }
+    return item
+  })
+
+  // Apply reading progress filter with simple type separation to keep Views distinct and DRY
+  const filteredReads = filterByReadingProgress(
+    reads.filter(item => item.type === 'article'),
+    readingProgressFilter,
+    highlights
+  )
+  const filteredLinks = filterByReadingProgress(
+    linksWithProgress.filter(item => item.type === 'external'),
+    readingProgressFilter,
+    highlights
+  )
+
+  // Helper: build archive-only list from marked IDs and a base list
+  const buildArchiveOnly = (
+    baseItems: ReadItem[],
+    options: { kind: 'article' | 'external' }
+  ): ReadItem[] => {
+    const allMarked = archiveController.getMarkedIds()
+    const relevantMarked = options.kind === 'article'
+      ? allMarked.filter(id => id.startsWith('naddr1'))
+      : allMarked.filter(id => !id.startsWith('naddr1'))
+    const markedSet = new Set(relevantMarked)
+
+    const items: ReadItem[] = []
+    for (const item of baseItems) {
+      const key = options.kind === 'article' ? item.id : (item.url || item.id)
+      if (key && markedSet.has(key)) {
+        items.push({ ...item, markedAsRead: true })
+      }
+    }
+    for (const id of markedSet) {
+      const exists = items.find(i => (options.kind === 'article' ? i.id : (i.url || i.id)) === id)
+      if (!exists) {
+        items.push({
+          id,
+          source: 'marked-as-read',
+          type: options.kind,
+          url: options.kind === 'article' ? undefined : id,
+          markedAsRead: true,
+          readingTimestamp: Math.floor(Date.now() / 1000)
+        })
+      }
+    }
+    return items
+  }
+
+  // Archive-only lists: independent of reading progress
+  const archiveOnlyReads: ReadItem[] = readingProgressFilter === 'archive'
+    ? buildArchiveOnly(reads, { kind: 'article' })
+    : []
+  const archiveOnlyLinks: ReadItem[] = readingProgressFilter === 'archive'
+    ? buildArchiveOnly(linksWithProgress, { kind: 'external' })
+    : []
+
   const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = 
     groupingMode === 'flat'
       ? [{ key: 'all', title: `All Bookmarks (${filteredBookmarks.length})`, items: filteredBookmarks }]
       : [
           { key: 'nip51-private', title: 'Private Bookmarks', items: groups.nip51Private },
           { key: 'nip51-public', title: 'My Bookmarks', items: groups.nip51Public },
-          { key: 'amethyst-private', title: 'Amethyst Private', items: groups.amethystPrivate },
-          { key: 'amethyst-public', title: 'Amethyst Lists', items: groups.amethystPublic },
+          { key: 'amethyst-private', title: 'Private Lists', items: groups.amethystPrivate },
+          { key: 'amethyst-public', title: 'My Lists', items: groups.amethystPublic },
           { key: 'web', title: 'Web Bookmarks', items: groups.standaloneWeb }
         ]
 
   // Show content progressively - no blocking error screens
   const hasData = highlights.length > 0 || bookmarks.length > 0 || reads.length > 0 || links.length > 0 || writings.length > 0
-  const showSkeletons = loading && !hasData
+  const showSkeletons = (loading || myHighlightsLoading) && !hasData
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -428,7 +594,7 @@ const Me: React.FC<MeProps> = ({
             </div>
           )
         }
-        return highlights.length === 0 && !loading ? (
+        return highlights.length === 0 && !loading && !myHighlightsLoading ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No highlights yet.
           </div>
@@ -449,9 +615,9 @@ const Me: React.FC<MeProps> = ({
         if (showSkeletons) {
           return (
             <div className="bookmarks-list">
-              <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+              <div className="bookmarks-grid bookmarks-cards">
                 {Array.from({ length: 6 }).map((_, i) => (
-                  <BookmarkSkeleton key={i} viewMode={viewMode} />
+                  <BookmarkSkeleton key={i} viewMode="cards" />
                 ))}
               </div>
             </div>
@@ -477,14 +643,15 @@ const Me: React.FC<MeProps> = ({
               sections.filter(s => s.items.length > 0).map(section => (
               <div key={section.key} className="bookmarks-section">
                 <h3 className="bookmarks-section-title">{section.title}</h3>
-                <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                <div className="bookmarks-grid bookmarks-cards">
                   {section.items.map((individualBookmark, index) => (
                     <BookmarkItem
                       key={`${section.key}-${individualBookmark.id}-${index}`}
                       bookmark={individualBookmark}
                       index={index}
-                      viewMode={viewMode}
+                      viewMode="cards"
                       onSelectUrl={handleSelectUrl}
+                      readingProgress={getBookmarkReadingProgress(individualBookmark)}
                     />
                   ))}
                 </div>
@@ -505,27 +672,6 @@ const Me: React.FC<MeProps> = ({
                 ariaLabel={groupingMode === 'grouped' ? 'Switch to flat view' : 'Switch to grouped view'}
                 variant="ghost"
               />
-              <IconButton
-                icon={faList}
-                onClick={() => setViewMode('compact')}
-                title="Compact list view"
-                ariaLabel="Compact list view"
-                variant={viewMode === 'compact' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faThLarge}
-                onClick={() => setViewMode('cards')}
-                title="Cards view"
-                ariaLabel="Cards view"
-                variant={viewMode === 'cards' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faImage}
-                onClick={() => setViewMode('large')}
-                title="Large preview view"
-                ariaLabel="Large preview view"
-                variant={viewMode === 'large' ? 'primary' : 'ghost'}
-              />
             </div>
           </div>
         )
@@ -558,21 +704,42 @@ const Me: React.FC<MeProps> = ({
               selectedFilter={readingProgressFilter}
               onFilterChange={handleReadingProgressFilterChange}
             />
-            {filteredReads.length === 0 ? (
-              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-                No articles match this filter.
-              </div>
+            {readingProgressFilter === 'archive' ? (
+              archiveOnlyReads.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No articles in archive.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                  {archiveOnlyReads
+                    .filter(item => item.type === 'article')
+                    .map((item) => (
+                      <BlogPostCard
+                        key={item.id}
+                        post={convertReadItemToBlogPostPreview(item)}
+                        href={getReadItemUrl(item)}
+                        readingProgress={item.readingProgress}
+                      />
+                    ))}
+                </div>
+              )
             ) : (
-              <div className="explore-grid">
-              {filteredReads.map((item) => (
-                <BlogPostCard
-                  key={item.id}
-                  post={convertReadItemToBlogPostPreview(item)}
-                  href={getReadItemUrl(item)}
-                  readingProgress={item.readingProgress}
-                />
-              ))}
-              </div>
+              filteredReads.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No articles match this filter.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                  {filteredReads.map((item) => (
+                    <BlogPostCard
+                      key={item.id}
+                      post={convertReadItemToBlogPostPreview(item)}
+                      href={getReadItemUrl(item)}
+                      readingProgress={item.readingProgress}
+                    />
+                  ))}
+                </div>
+              )
             )}
           </>
         )
@@ -605,21 +772,40 @@ const Me: React.FC<MeProps> = ({
               selectedFilter={readingProgressFilter}
               onFilterChange={handleReadingProgressFilterChange}
             />
-            {filteredLinks.length === 0 ? (
-              <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-                No links match this filter.
-              </div>
+            {readingProgressFilter === 'archive' ? (
+              archiveOnlyLinks.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No links in archive.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                  {archiveOnlyLinks.map((item) => (
+                    <BlogPostCard
+                      key={item.id}
+                      post={convertReadItemToBlogPostPreview(item)}
+                      href={getReadItemUrl(item)}
+                      readingProgress={item.readingProgress}
+                    />
+                  ))}
+                </div>
+              )
             ) : (
-              <div className="explore-grid">
-              {filteredLinks.map((item) => (
-                <BlogPostCard
-                  key={item.id}
-                  post={convertReadItemToBlogPostPreview(item)}
-                  href={getReadItemUrl(item)}
-                  readingProgress={item.readingProgress}
-                />
-              ))}
-              </div>
+              filteredLinks.length === 0 ? (
+                <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+                  No links match this filter.
+                </div>
+              ) : (
+                <div className="explore-grid">
+                {filteredLinks.map((item) => (
+                  <BlogPostCard
+                    key={item.id}
+                    post={convertReadItemToBlogPostPreview(item)}
+                    href={getReadItemUrl(item)}
+                    readingProgress={item.readingProgress}
+                  />
+                ))}
+                </div>
+              )
             )}
           </>
         )
@@ -634,7 +820,7 @@ const Me: React.FC<MeProps> = ({
             </div>
           )
         }
-        return writings.length === 0 && !loading ? (
+        return writings.length === 0 && !loading && !myWritingsLoading ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No articles written yet.
           </div>
@@ -645,6 +831,8 @@ const Me: React.FC<MeProps> = ({
                 key={post.event.id}
                 post={post}
                 href={getPostUrl(post)}
+                readingProgress={getWritingReadingProgress(post)}
+                hideBotByName={settings.hideBotArticlesByName !== false}
               />
             ))}
           </div>
@@ -668,43 +856,39 @@ const Me: React.FC<MeProps> = ({
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
             data-tab="highlights"
-            onClick={() => navigate(isOwnProfile ? '/me/highlights' : `/p/${propPubkey && nip19.npubEncode(propPubkey)}`)}
+            onClick={() => navigate('/me/highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
             <span className="tab-label">Highlights</span>
           </button>
-          {isOwnProfile && (
-            <>
-              <button
-                className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
-                data-tab="reading-list"
-                onClick={() => navigate('/me/reading-list')}
-              >
-                <FontAwesomeIcon icon={faBookmark} />
-                <span className="tab-label">Bookmarks</span>
-              </button>
-              <button
-                className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
-                data-tab="reads"
-                onClick={() => navigate('/me/reads')}
-              >
-                <FontAwesomeIcon icon={faBooks} />
-                <span className="tab-label">Reads</span>
-              </button>
-              <button
-                className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
-                data-tab="links"
-                onClick={() => navigate('/me/links')}
-              >
-                <FontAwesomeIcon icon={faLink} />
-                <span className="tab-label">Links</span>
-              </button>
-            </>
-          )}
+          <button
+            className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+            data-tab="reading-list"
+            onClick={() => navigate('/me/reading-list')}
+          >
+            <FontAwesomeIcon icon={faBookmark} />
+            <span className="tab-label">Bookmarks</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'reads' ? 'active' : ''}`}
+            data-tab="reads"
+            onClick={() => navigate('/me/reads')}
+          >
+            <FontAwesomeIcon icon={faBooks} />
+            <span className="tab-label">Reads</span>
+          </button>
+          <button
+            className={`me-tab ${activeTab === 'links' ? 'active' : ''}`}
+            data-tab="links"
+            onClick={() => navigate('/me/links')}
+          >
+            <FontAwesomeIcon icon={faLink} />
+            <span className="tab-label">Links</span>
+          </button>
           <button
             className={`me-tab ${activeTab === 'writings' ? 'active' : ''}`}
             data-tab="writings"
-            onClick={() => navigate(isOwnProfile ? '/me/writings' : `/p/${propPubkey && nip19.npubEncode(propPubkey)}/writings`)}
+            onClick={() => navigate('/me/writings')}
           >
             <FontAwesomeIcon icon={faPenToSquare} />
             <span className="tab-label">Writings</span>

src/components/NostrMentionLink.tsx

@@ -0,0 +1,134 @@
+import React from 'react'
+import { nip19 } from 'nostr-tools'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface NostrMentionLinkProps {
+  nostrUri: string
+  onClick?: (e: React.MouseEvent) => void
+  className?: string
+}
+
+/**
+ * Component to render nostr mentions with resolved profile names
+ * Handles npub, nprofile, note, nevent, and naddr URIs
+ */
+const NostrMentionLink: React.FC<NostrMentionLinkProps> = ({ 
+  nostrUri, 
+  onClick,
+  className = 'highlight-comment-link'
+}) => {
+  // Decode the nostr URI first
+  let decoded: ReturnType<typeof nip19.decode> | null = null
+  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
+  }
+  
+  // Fetch profile at top level (Rules of Hooks)
+  const profile = useEventModel(Models.ProfileModel, pubkey ? [pubkey] : null)
+  
+  // If decoding failed, show shortened identifier
+  if (!decoded) {
+    const identifier = nostrUri.replace(/^nostr:/, '')
+    return (
+      <span className="highlight-comment-nostr-id">
+        {identifier.slice(0, 20)}...
+      </span>
+    )
+  }
+  
+  // Render based on decoded type
+  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)
+      if (kind === 30023) {
+        const naddr = nip19.naddrEncode({ kind, pubkey: pk, identifier: addrIdentifier })
+        return (
+          <a
+            href={`/a/${naddr}`}
+            className={className}
+            onClick={onClick}
+          >
+            {addrIdentifier || 'Article'}
+          </a>
+        )
+      }
+      // For other kinds, show shortened identifier
+      return (
+        <span className="highlight-comment-nostr-id">
+          nostr:{addrIdentifier.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'note': {
+      const eventId = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          note:{eventId.slice(0, 12)}...
+        </span>
+      )
+    }
+    case 'nevent': {
+      const { id } = decoded.data
+      return (
+        <span className="highlight-comment-nostr-id">
+          event:{id.slice(0, 12)}...
+        </span>
+      )
+    }
+    default: {
+      // Fallback for unrecognized types
+      const identifier = nostrUri.replace(/^nostr:/, '')
+      return (
+        <span className="highlight-comment-nostr-id">
+          {identifier.slice(0, 20)}...
+        </span>
+      )
+    }
+  }
+}
+
+export default NostrMentionLink
+

src/components/Profile.tsx

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

src/components/ReadingProgressFilters.tsx

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

src/components/RelayStatusIndicator.tsx

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

src/components/RichContent.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import NostrMentionLink from './NostrMentionLink'
+
+interface RichContentProps {
+  content: string
+  className?: string
+}
+
+/**
+ * Component to render text content with:
+ * - Clickable links
+ * - Resolved nostr mentions (npub, nprofile, note, nevent, naddr)
+ * - Plain text
+ * 
+ * Handles both nostr:npub1... and plain npub1... formats
+ */
+const RichContent: React.FC<RichContentProps> = ({ 
+  content, 
+  className = 'bookmark-content' 
+}) => {
+  // Pattern to match:
+  // 1. nostr: URIs (nostr:npub1..., nostr:note1..., etc.)
+  // 2. Plain nostr identifiers (npub1..., nprofile1..., note1..., etc.)
+  // 3. 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 parts = content.split(pattern)
+  
+  return (
+    <div className={className}>
+      {parts.map((part, index) => {
+        // Handle nostr: URIs
+        if (part.startsWith('nostr:')) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={part}
+            />
+          )
+        }
+        
+        // Handle plain nostr identifiers (add nostr: prefix)
+        if (
+          part.match(/^(npub1|nprofile1|note1|nevent1|naddr1)[a-z0-9]+$/i)
+        ) {
+          return (
+            <NostrMentionLink
+              key={index}
+              nostrUri={`nostr:${part}`}
+            />
+          )
+        }
+        
+        // Handle http(s) URLs
+        if (part.match(/^https?:\/\//)) {
+          return (
+            <a
+              key={index}
+              href={part}
+              className="nostr-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {part}
+            </a>
+          )
+        }
+        
+        // Plain text
+        return <React.Fragment key={index}>{part}</React.Fragment>
+      })}
+    </div>
+  )
+}
+
+export default RichContent
+

src/components/Settings.tsx

@@ -6,10 +6,13 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
+import MediaDisplaySettings from './Settings/MediaDisplaySettings'
+import ExploreSettings from './Settings/ExploreSettings'
 import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
 import RelaySettings from './Settings/RelaySettings'
 import PWASettings from './Settings/PWASettings'
+import TTSSettings from './Settings/TTSSettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import VersionFooter from './VersionFooter'
 
@@ -29,13 +32,24 @@ const DEFAULT_SETTINGS: UserSettings = {
   defaultHighlightVisibilityNostrverse: true,
   defaultHighlightVisibilityFriends: true,
   defaultHighlightVisibilityMine: true,
+  defaultExploreScopeNostrverse: false,
+  defaultExploreScopeFriends: true,
+  defaultExploreScopeMine: false,
   zapSplitHighlighterWeight: 50,
   zapSplitBorisWeight: 2.1,
   zapSplitAuthorWeight: 50,
   useLocalRelayAsCache: true,
   rebroadcastToAllRelays: false,
   paragraphAlignment: 'justify',
-  syncReadingPosition: false,
+  fullWidthImages: true,
+  renderVideoLinksAsEmbeds: true,
+  syncReadingPosition: true,
+  autoMarkAsReadOnCompletion: false,
+  hideBookmarksWithoutCreationDate: true,
+  ttsUseSystemLanguage: false,
+  ttsDetectContentLanguage: true,
+  ttsLanguageMode: 'content',
+  ttsDefaultSpeed: 2.1,
 }
 
 interface SettingsProps {
@@ -163,7 +177,10 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
       <div className="settings-content">
         <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <MediaDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <ExploreSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
+        <TTSSettings settings={localSettings} onUpdate={handleUpdate} />
         <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
         <PWASettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />

src/components/Settings/ExploreSettings.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+
+interface ExploreSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const ExploreSettings: React.FC<ExploreSettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Explore</h3>
+
+      <div className="setting-group setting-inline">
+        <label>Default Explore Scope</label>
+        <div className="highlight-level-toggles">
+          <IconButton
+            icon={faNetworkWired}
+            onClick={() => onUpdate({ defaultExploreScopeNostrverse: !(settings.defaultExploreScopeNostrverse !== false) })}
+            title="Nostrverse content"
+            ariaLabel="Toggle nostrverse content by default in explore"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultExploreScopeNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+              opacity: (settings.defaultExploreScopeNostrverse !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUserGroup}
+            onClick={() => onUpdate({ defaultExploreScopeFriends: !(settings.defaultExploreScopeFriends !== false) })}
+            title="Friends content"
+            ariaLabel="Toggle friends content by default in explore"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultExploreScopeFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined,
+              opacity: (settings.defaultExploreScopeFriends !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUser}
+            onClick={() => onUpdate({ defaultExploreScopeMine: !(settings.defaultExploreScopeMine !== false) })}
+            title="My content"
+            ariaLabel="Toggle my content by default in explore"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultExploreScopeMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined,
+              opacity: (settings.defaultExploreScopeMine !== false) ? 1 : 0.4
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="hideBotArticlesByName" className="checkbox-label">
+          <input
+            id="hideBotArticlesByName"
+            type="checkbox"
+            checked={settings.hideBotArticlesByName !== false}
+            onChange={(e) => onUpdate({ hideBotArticlesByName: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Hide content posted by bots</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default ExploreSettings
+

src/components/Settings/LayoutBehaviorSettings.tsx

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

src/components/Settings/MediaDisplaySettings.tsx

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

src/components/Settings/PWASettings.tsx

@@ -27,7 +27,7 @@ const PWASettings: React.FC<PWASettingsProps> = ({ settings, onUpdate, onClose }
     if (isInstalled) return
     const success = await installApp()
     if (success) {
-      console.log('App installed successfully')
+      // Installation successful
     }
   }
 

src/components/Settings/ReadingDisplaySettings.tsx

@@ -59,6 +59,7 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
+
       <div className="setting-group setting-inline">
         <label>Default Highlight Visibility</label>
         <div className="highlight-level-toggles">

src/components/Settings/TTSSettings.tsx

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

src/components/ShareTargetHandler.tsx

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

src/components/Support.tsx

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

src/components/TTSControls.tsx

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

src/components/ThreePaneLayout.tsx

@@ -368,7 +368,9 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               summary={props.readerContent?.summary}
               published={props.readerContent?.published}
               selectedUrl={props.selectedUrl}
-              highlights={props.classifiedHighlights}
+              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'}
@@ -414,7 +416,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           />
         </div>
       </div>
-      {props.hasActiveAccount && (
+      {props.hasActiveAccount && props.readerContent && (
         <HighlightButton 
           ref={props.highlightButtonRef} 
           onHighlight={props.onCreateHighlight}

src/components/VideoEmbedProcessor.tsx

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

src/config/bots.ts

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

src/config/kinds.ts

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

src/config/relays.ts

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

src/hooks/useAdaptiveTextColor.ts

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

src/hooks/useArticleLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, Dispatch, SetStateAction } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { fetchArticleByNaddr } from '../services/articleService'
 import { fetchHighlightsForArticle } from '../services/highlightService'
@@ -14,7 +14,7 @@ interface UseArticleLoaderProps {
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
   setIsCollapsed: (collapsed: boolean) => void
-  setHighlights: (highlights: Highlight[]) => void
+  setHighlights: Dispatch<SetStateAction<Highlight[]>>
   setHighlightsLoading: (loading: boolean) => void
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
@@ -36,18 +36,26 @@ export function useArticleLoader({
   setCurrentArticle,
   settings
 }: UseArticleLoaderProps) {
+  const mountedRef = useRef(true)
+  
   useEffect(() => {
+    mountedRef.current = true
+    
     if (!relayPool || !naddr) return
     
     const loadArticle = async () => {
+      if (!mountedRef.current) return
+      
       setReaderLoading(true)
       setReaderContent(undefined)
       setSelectedUrl(`nostr:${naddr}`)
       setIsCollapsed(true)
-      // Keep highlights panel collapsed by default - only open on user interaction
       
       try {
         const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
+        
+        if (!mountedRef.current) return
+        
         setReaderContent({
           title: article.title,
           markdown: article.markdown,
@@ -63,52 +71,67 @@ export function useArticleLoader({
         setCurrentArticleCoordinate(articleCoordinate)
         setCurrentArticleEventId(article.event.id)
         setCurrentArticle?.(article.event)
-        
-        console.log('📰 Article loaded:', article.title)
-        console.log('📍 Coordinate:', articleCoordinate)
-        
-        // Set reader loading to false immediately after article content is ready
-        // Don't wait for highlights to finish loading
         setReaderLoading(false)
         
         // Fetch highlights asynchronously without blocking article display
-        // Stream them as they arrive for instant rendering
         try {
+          if (!mountedRef.current) return
+          
           setHighlightsLoading(true)
-          setHighlights([]) // Clear old highlights
-          const highlightsMap = new Map<string, Highlight>()
+          setHighlights([])
           
           await fetchHighlightsForArticle(
             relayPool, 
             articleCoordinate, 
             article.event.id,
             (highlight) => {
-              // Deduplicate highlights by ID as they arrive
-              if (!highlightsMap.has(highlight.id)) {
-                highlightsMap.set(highlight.id, highlight)
-                const highlightsList = Array.from(highlightsMap.values())
-                setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
-              }
+              if (!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
           )
-          console.log(`📌 Found ${highlightsMap.size} highlights`)
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current) {
+            setHighlightsLoading(false)
+          }
         }
       } catch (err) {
         console.error('Failed to load article:', err)
-        setReaderContent({
-          title: 'Error Loading Article',
-          html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url: `nostr:${naddr}`
-        })
-        setReaderLoading(false)
+        if (mountedRef.current) {
+          setReaderContent({
+            title: 'Error Loading Article',
+            html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url: `nostr:${naddr}`
+          })
+          setReaderLoading(false)
+        }
       }
     }
     
     loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
+    
+    return () => {
+      mountedRef.current = false
+    }
+  }, [
+    naddr,
+    relayPool,
+    settings,
+    setSelectedUrl,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed,
+    setHighlights,
+    setHighlightsLoading,
+    setCurrentArticleCoordinate,
+    setCurrentArticleEventId,
+    setCurrentArticle
+  ])
 }

src/hooks/useBookmarksData.ts

@@ -1,11 +1,17 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useMemo } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
+import { IEventStore } from 'applesauce-core'
 import { Bookmark } from '../types/bookmarks'
 import { Highlight } from '../types/highlights'
-import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
-import { fetchContacts } from '../services/contactService'
+import { fetchHighlightsForArticle } from '../services/highlightService'
 import { UserSettings } from '../services/settingsService'
+import { highlightsController } from '../services/highlightsController'
+import { contactsController } from '../services/contactsController'
+import { useStoreTimeline } from './useStoreTimeline'
+import { eventToHighlight } from '../services/highlightEventProcessor'
+import { KINDS } from '../config/kinds'
+import { nip19 } from 'nostr-tools'
 
 interface UseBookmarksDataParams {
   relayPool: RelayPool | null
@@ -15,6 +21,7 @@ interface UseBookmarksDataParams {
   currentArticleCoordinate?: string
   currentArticleEventId?: string
   settings?: UserSettings
+  eventStore?: IEventStore | null
   bookmarks: Bookmark[] // Passed from App.tsx (centralized loading)
   bookmarksLoading: boolean // Passed from App.tsx (centralized loading)
   onRefreshBookmarks: () => Promise<void>
@@ -28,52 +35,110 @@ export const useBookmarksData = ({
   currentArticleCoordinate,
   currentArticleEventId,
   settings,
+  eventStore,
   onRefreshBookmarks
 }: Omit<UseBookmarksDataParams, 'bookmarks' | 'bookmarksLoading'>) => {
-  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [myHighlights, setMyHighlights] = useState<Highlight[]>([])
+  const [articleHighlights, setArticleHighlights] = useState<Highlight[]>([])
   const [highlightsLoading, setHighlightsLoading] = useState(true)
   const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [lastFetchTime, setLastFetchTime] = useState<number | null>(null)
 
-  const handleFetchContacts = useCallback(async () => {
-    if (!relayPool || !activeAccount) return
-    const contacts = await fetchContacts(relayPool, activeAccount.pubkey)
-    setFollowedPubkeys(contacts)
-  }, [relayPool, activeAccount])
+  // Determine effective article coordinate as early as possible
+  // Prefer state-derived coordinate, but fall back to route naddr before content loads
+  const effectiveArticleCoordinate = useMemo(() => {
+    if (currentArticleCoordinate) return currentArticleCoordinate
+    if (!naddr) return undefined
+    try {
+      const decoded = nip19.decode(naddr)
+      if (decoded.type === 'naddr') {
+        const ptr = decoded.data as { kind: number; pubkey: string; identifier: string }
+        return `${ptr.kind}:${ptr.pubkey}:${ptr.identifier}`
+      }
+    } catch {
+      // ignore decode failure; treat as no coordinate yet
+    }
+    return undefined
+  }, [currentArticleCoordinate, naddr])
+
+  // Load cached article-specific highlights from event store
+  const articleFilter = useMemo(() => {
+    if (!effectiveArticleCoordinate) return null
+    return {
+      kinds: [KINDS.Highlights],
+      '#a': [effectiveArticleCoordinate],
+      ...(currentArticleEventId ? { '#e': [currentArticleEventId] } : {})
+    }
+  }, [effectiveArticleCoordinate, currentArticleEventId])
+  
+  const cachedArticleHighlights = useStoreTimeline(
+    eventStore || null,
+    articleFilter || { kinds: [KINDS.Highlights], limit: 0 }, // empty filter if no article
+    eventToHighlight,
+    [effectiveArticleCoordinate, currentArticleEventId]
+  )
+
+  // Subscribe to centralized controllers
+  useEffect(() => {
+    // Get initial state immediately
+    setMyHighlights(highlightsController.getHighlights())
+    setFollowedPubkeys(new Set(contactsController.getContacts()))
+    
+    // Subscribe to updates
+    const unsubHighlights = highlightsController.onHighlights(setMyHighlights)
+    const unsubContacts = contactsController.onContacts((contacts) => {
+      setFollowedPubkeys(new Set(contacts))
+    })
+    
+    return () => {
+      unsubHighlights()
+      unsubContacts()
+    }
+  }, [])
 
   const handleFetchHighlights = useCallback(async () => {
     if (!relayPool) return
     
     setHighlightsLoading(true)
     try {
-      if (currentArticleCoordinate) {
+      if (effectiveArticleCoordinate) {
+        // Seed with cached highlights first
+        if (cachedArticleHighlights.length > 0) {
+          setArticleHighlights(cachedArticleHighlights.sort((a, b) => b.created_at - a.created_at))
+        }
+        
+        // Fetch fresh article-specific highlights (from all users)
         const highlightsMap = new Map<string, Highlight>()
+        // Seed map with cached highlights
+        cachedArticleHighlights.forEach(h => highlightsMap.set(h.id, h))
+        
         await fetchHighlightsForArticle(
           relayPool, 
-          currentArticleCoordinate, 
+          effectiveArticleCoordinate, 
           currentArticleEventId,
           (highlight) => {
             // Deduplicate highlights by ID as they arrive
             if (!highlightsMap.has(highlight.id)) {
               highlightsMap.set(highlight.id, highlight)
               const highlightsList = Array.from(highlightsMap.values())
-              setHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
+              setArticleHighlights(highlightsList.sort((a, b) => b.created_at - a.created_at))
             }
           },
-          settings
+          settings,
+          false, // force
+          eventStore || undefined
         )
-        console.log(`🔄 Refreshed ${highlightsMap.size} highlights for article`)
-      } else if (activeAccount) {
-        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey, undefined, settings)
-        setHighlights(fetchedHighlights)
+      } else {
+        // No article selected - clear article highlights
+        setArticleHighlights([])
       }
     } catch (err) {
       console.error('Failed to fetch highlights:', err)
     } finally {
       setHighlightsLoading(false)
     }
-  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId, settings])
+  }, [relayPool, effectiveArticleCoordinate, currentArticleEventId, settings, eventStore, cachedArticleHighlights])
 
   const handleRefreshAll = useCallback(async () => {
     if (!relayPool || !activeAccount || isRefreshing) return
@@ -82,29 +147,38 @@ export const useBookmarksData = ({
     try {
       await onRefreshBookmarks()
       await handleFetchHighlights()
-      await handleFetchContacts()
+      // Contacts and own highlights are managed by controllers
       setLastFetchTime(Date.now())
     } catch (err) {
       console.error('Failed to refresh data:', err)
     } finally {
       setIsRefreshing(false)
     }
-  }, [relayPool, activeAccount, isRefreshing, onRefreshBookmarks, handleFetchHighlights, handleFetchContacts])
+  }, [relayPool, activeAccount, isRefreshing, onRefreshBookmarks, handleFetchHighlights])
 
-  // Fetch highlights/contacts independently
+  // Fetch article-specific highlights when viewing an article
   useEffect(() => {
     if (!relayPool || !activeAccount) return
-    // Only fetch general highlights when not viewing an article (naddr) or external URL
+    // Fetch article-specific highlights when viewing an article
     // External URLs have their highlights fetched by useExternalUrlLoader
-    if (!naddr && !externalUrl) {
+    if (effectiveArticleCoordinate && !externalUrl) {
       handleFetchHighlights()
+    } else if (!naddr && !externalUrl) {
+      // Clear article highlights when not viewing an article
+      setArticleHighlights([])
+      setHighlightsLoading(false)
     }
-    handleFetchContacts()
-  }, [relayPool, activeAccount, naddr, externalUrl, handleFetchHighlights, handleFetchContacts])
+  }, [relayPool, activeAccount, effectiveArticleCoordinate, naddr, externalUrl, handleFetchHighlights])
+
+  // When viewing an article, show only article-specific highlights
+  // Otherwise, show user's highlights from controller
+  const highlights = effectiveArticleCoordinate || externalUrl
+    ? articleHighlights.sort((a, b) => b.created_at - a.created_at)
+    : myHighlights
 
   return {
     highlights,
-    setHighlights,
+    setHighlights: setArticleHighlights, // For external updates (like from useExternalUrlLoader)
     highlightsLoading,
     setHighlightsLoading,
     followedPubkeys,

src/hooks/useExternalUrlLoader.ts

@@ -1,8 +1,12 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useMemo } from 'react'
 import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
 import { fetchHighlightsForUrl } from '../services/highlightService'
 import { Highlight } from '../types/highlights'
+import { useStoreTimeline } from './useStoreTimeline'
+import { eventToHighlight } from '../services/highlightEventProcessor'
+import { KINDS } from '../config/kinds'
 
 // Helper to extract filename from URL
 function getFilenameFromUrl(url: string): string {
@@ -20,6 +24,7 @@ function getFilenameFromUrl(url: string): string {
 interface UseExternalUrlLoaderProps {
   url: string | undefined
   relayPool: RelayPool | null
+  eventStore?: IEventStore | null
   setSelectedUrl: (url: string) => void
   setReaderContent: (content: ReadableContent | undefined) => void
   setReaderLoading: (loading: boolean) => void
@@ -33,6 +38,7 @@ interface UseExternalUrlLoaderProps {
 export function useExternalUrlLoader({
   url,
   relayPool,
+  eventStore,
   setSelectedUrl,
   setReaderContent,
   setReaderLoading,
@@ -42,73 +48,138 @@ export function useExternalUrlLoader({
   setCurrentArticleCoordinate,
   setCurrentArticleEventId
 }: UseExternalUrlLoaderProps) {
+  const mountedRef = useRef(true)
+  
+  // Load cached URL-specific highlights from event store
+  const urlFilter = useMemo(() => {
+    if (!url) return null
+    return { kinds: [KINDS.Highlights], '#r': [url] }
+  }, [url])
+  
+  const cachedUrlHighlights = useStoreTimeline(
+    eventStore || null,
+    urlFilter || { kinds: [KINDS.Highlights], limit: 0 },
+    eventToHighlight,
+    [url]
+  )
+  
+  // Load content and start streaming highlights when URL changes
   useEffect(() => {
+    mountedRef.current = true
+    
     if (!relayPool || !url) return
     
     const loadExternalUrl = async () => {
+      if (!mountedRef.current) return
+      
       setReaderLoading(true)
       setReaderContent(undefined)
       setSelectedUrl(url)
       setIsCollapsed(true)
-      // Clear article-specific state
       setCurrentArticleCoordinate(undefined)
       setCurrentArticleEventId(undefined)
       
       try {
         const content = await fetchReadableContent(url)
+        
+        if (!mountedRef.current) return
+        
         setReaderContent(content)
-        
-        console.log('🌐 External URL loaded:', content.title)
-        
-        // Set reader loading to false immediately after content is ready
         setReaderLoading(false)
         
         // Fetch highlights for this URL asynchronously
         try {
-          setHighlightsLoading(true)
-          setHighlights([])
+          if (!mountedRef.current) return
+          
+          setHighlightsLoading(true)
+          
+          // Seed with cached highlights first
+          if (cachedUrlHighlights.length > 0) {
+            setHighlights((prev) => {
+              const seen = new Set<string>(cachedUrlHighlights.map(h => h.id))
+              const localOnly = prev.filter(h => !seen.has(h.id))
+              const next = [...cachedUrlHighlights, ...localOnly]
+              return next.sort((a, b) => b.created_at - a.created_at)
+            })
+          } else {
+            setHighlights([])
+          }
           
-          // Check if fetchHighlightsForUrl exists, otherwise skip
           if (typeof fetchHighlightsForUrl === 'function') {
             const seen = new Set<string>()
+            cachedUrlHighlights.forEach(h => seen.add(h.id))
+            
             await fetchHighlightsForUrl(
               relayPool,
               url,
               (highlight) => {
+                if (!mountedRef.current) return
+                
                 if (seen.has(highlight.id)) return
                 seen.add(highlight.id)
                 setHighlights((prev) => {
                   if (prev.some(h => h.id === highlight.id)) return prev
-                  const next = [...prev, highlight]
+                  const next = [highlight, ...prev]
                   return next.sort((a, b) => b.created_at - a.created_at)
                 })
-              }
+              },
+              undefined,
+              false,
+              eventStore || undefined
             )
-            // Highlights are already set via the streaming callback
-            // No need to set them again as that could cause a flash/disappearance
-            console.log(`📌 Finished fetching highlights for URL`)
-          } else {
-            console.log('📌 Highlight fetching for URLs not yet implemented')
           }
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
-          setHighlightsLoading(false)
+          if (mountedRef.current) {
+            setHighlightsLoading(false)
+          }
         }
       } catch (err) {
         console.error('Failed to load external URL:', err)
-        // For videos and other media files, use the filename as the title
-        const filename = getFilenameFromUrl(url)
-        setReaderContent({
-          title: filename,
-          html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
-          url
-        })
-        setReaderLoading(false)
+        if (mountedRef.current) {
+          const filename = getFilenameFromUrl(url)
+          setReaderContent({
+            title: filename,
+            html: `<p>Failed to load content: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
+            url
+          })
+          setReaderLoading(false)
+        }
       }
     }
     
     loadExternalUrl()
-  }, [url, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId])
+    
+    return () => {
+      mountedRef.current = false
+    }
+  }, [
+    url,
+    relayPool,
+    eventStore,
+    cachedUrlHighlights,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed,
+    setSelectedUrl,
+    setHighlights,
+    setCurrentArticleCoordinate,
+    setCurrentArticleEventId,
+    setHighlightsLoading
+  ])
+
+  // Keep UI highlights synced with cached store updates without reloading content
+  useEffect(() => {
+    if (!url) return
+    if (cachedUrlHighlights.length === 0) return
+    setHighlights((prev) => {
+      const seen = new Set<string>(prev.map(h => h.id))
+      const additions = cachedUrlHighlights.filter(h => !seen.has(h.id))
+      if (additions.length === 0) return prev
+      const next = [...additions, ...prev]
+      return next.sort((a, b) => b.created_at - a.created_at)
+    })
+  }, [cachedUrlHighlights, url, setHighlights])
 }
 

src/hooks/useHighlightCreation.ts

@@ -60,7 +60,6 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      console.log('🎯 Creating highlight...', { text: text.substring(0, 50) + '...' })
       
       const newHighlight = await createHighlight(
         text,
@@ -73,12 +72,7 @@ export const useHighlightCreation = ({
         settings
       )
       
-      console.log('✅ Highlight created successfully!', {
-        id: newHighlight.id,
-        isLocalOnly: newHighlight.isLocalOnly,
-        isOfflineCreated: newHighlight.isOfflineCreated,
-        publishedRelays: newHighlight.publishedRelays
-      })
+      // Highlight created successfully
       
       // Clear the browser's text selection immediately to allow DOM update
       const selection = window.getSelection()

src/hooks/useHighlightedContent.ts

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

src/hooks/useMarkdownToHTML.ts

@@ -43,7 +43,6 @@ export const useMarkdownToHTML = (
           
           // Replace nostr URIs with resolved titles
           processed = replaceNostrUrisInMarkdownWithTitles(markdown, articleTitles)
-          console.log(`📚 Resolved ${articleTitles.size} article titles`)
         } catch (error) {
           console.warn('Failed to fetch article titles:', error)
           // Fall back to basic replacement
@@ -58,12 +57,10 @@ export const useMarkdownToHTML = (
       
       setProcessedMarkdown(processed)
 
-      console.log('📝 Converting markdown to HTML...')
       
       const rafId = requestAnimationFrame(() => {
         if (previewRef.current && !isCancelled) {
           const html = previewRef.current.innerHTML
-          console.log('✅ Markdown converted to HTML:', html.length, 'chars')
           setRenderedHtml(html)
         } else if (!isCancelled) {
           console.warn('⚠️ markdownPreviewRef.current is null')

src/hooks/useMountedState.ts

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

src/hooks/useOfflineSync.ts

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

src/hooks/useOnlineStatus.ts

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

src/hooks/usePWAInstall.ts

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

src/hooks/useReadingPosition.ts

@@ -4,68 +4,111 @@ interface UseReadingPositionOptions {
   enabled?: boolean
   onPositionChange?: (position: number) => void
   onReadingComplete?: () => void
-  readingCompleteThreshold?: number // Default 0.9 (90%)
+  readingCompleteThreshold?: number // Default 0.95 (95%) - matches filter threshold
   syncEnabled?: boolean // Whether to sync positions to Nostr
   onSave?: (position: number) => void // Callback for saving position
   autoSaveInterval?: number // Auto-save interval in ms (default 5000)
+  completionHoldMs?: number // How long to hold at 100% before firing complete (default 2000)
 }
 
 export const useReadingPosition = ({
   enabled = true,
   onPositionChange,
   onReadingComplete,
-  readingCompleteThreshold = 0.9,
+  readingCompleteThreshold = 0.95, // Match filter threshold for consistency
   syncEnabled = false,
   onSave,
-  autoSaveInterval = 5000
+  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)
 
   // Debounced save function
   const scheduleSave = useCallback((currentPosition: number) => {
-    if (!syncEnabled || !onSave) return
-    
-    // Don't save if position is too low (< 5%)
-    if (currentPosition < 0.05) return
-    
-    // Don't save if position hasn't changed significantly (less than 1%)
-    // But always save if we've reached 100% (completion)
-    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= 0.01
-    const hasReachedCompletion = currentPosition === 1 && lastSavedPosition.current < 1
-    
-    if (!hasSignificantChange && !hasReachedCompletion) return
+    if (!syncEnabled || !onSave) {
+      return
+    }
+
+    // Always save instantly when we reach completion (1.0)
+    if (currentPosition === 1 && lastSavedPosition.current < 1) {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+        saveTimerRef.current = null
+      }
+      lastSavedPosition.current = 1
+      hasSavedOnce.current = true
+      lastSavedAtRef.current = Date.now()
+      onSave(1)
+      return
+    }
+
+    // Require at least 5% progress change to consider saving
+    const MIN_DELTA = 0.05
+    const hasSignificantChange = Math.abs(currentPosition - lastSavedPosition.current) >= MIN_DELTA
+
+    // Enforce a minimum interval between saves (15s) to avoid spamming
+    const MIN_INTERVAL_MS = 15000
+    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)
     }
 
-    // Schedule new save
+    // Schedule new save using the larger of autoSaveInterval and MIN_INTERVAL_MS
+    const delay = Math.max(autoSaveInterval, MIN_INTERVAL_MS)
     saveTimerRef.current = setTimeout(() => {
       lastSavedPosition.current = currentPosition
+      hasSavedOnce.current = true
+      lastSavedAtRef.current = Date.now()
       onSave(currentPosition)
-    }, autoSaveInterval)
+    }, delay)
   }, [syncEnabled, onSave, autoSaveInterval])
 
   // Immediate save function
   const saveNow = useCallback(() => {
     if (!syncEnabled || !onSave) return
-    
-    // Cancel any pending saves
     if (saveTimerRef.current) {
       clearTimeout(saveTimerRef.current)
       saveTimerRef.current = null
     }
-
-    // Save if position is meaningful (>= 5%)
-    if (position >= 0.05) {
-      lastSavedPosition.current = position
-      onSave(position)
-    }
+    lastSavedPosition.current = position
+    hasSavedOnce.current = true
+    lastSavedAtRef.current = Date.now()
+    onSave(position)
   }, [syncEnabled, onSave, position])
 
   useEffect(() => {
@@ -90,16 +133,39 @@ export const useReadingPosition = ({
       const clampedProgress = isAtBottom ? 1 : Math.max(0, Math.min(1, scrollProgress))
       
       setPosition(clampedProgress)
+      positionRef.current = clampedProgress
       onPositionChange?.(clampedProgress)
 
       // Schedule auto-save if sync is enabled
       scheduleSave(clampedProgress)
 
-      // Check if reading is complete
-      if (clampedProgress >= readingCompleteThreshold && !hasTriggeredComplete.current) {
-        setIsReadingComplete(true)
-        hasTriggeredComplete.current = true
-        onReadingComplete?.()
+      // Completion detection with 2s hold at 100%
+      if (!hasTriggeredComplete.current) {
+        // If at exact 100%, start a hold timer; cancel if we scroll up
+        if (clampedProgress === 1) {
+          if (!completionTimerRef.current) {
+            completionTimerRef.current = setTimeout(() => {
+              if (!hasTriggeredComplete.current && positionRef.current === 1) {
+                setIsReadingComplete(true)
+                hasTriggeredComplete.current = true
+                onReadingComplete?.()
+              }
+              completionTimerRef.current = null
+            }, completionHoldMs)
+          }
+        } else {
+          // If we moved off 100%, cancel any pending completion hold
+          if (completionTimerRef.current) {
+            clearTimeout(completionTimerRef.current)
+            completionTimerRef.current = null
+            // still allow threshold-based completion for near-bottom if configured
+            if (clampedProgress >= readingCompleteThreshold) {
+              setIsReadingComplete(true)
+              hasTriggeredComplete.current = true
+              onReadingComplete?.()
+            }
+          }
+        }
       }
     }
 
@@ -118,14 +184,23 @@ export const useReadingPosition = ({
       if (saveTimerRef.current) {
         clearTimeout(saveTimerRef.current)
       }
+      if (completionTimerRef.current) {
+        clearTimeout(completionTimerRef.current)
+      }
     }
-  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave])
+  }, [enabled, onPositionChange, onReadingComplete, readingCompleteThreshold, scheduleSave, completionHoldMs])
 
   // Reset reading complete state when enabled changes
   useEffect(() => {
     if (!enabled) {
       setIsReadingComplete(false)
       hasTriggeredComplete.current = false
+      hasSavedOnce.current = false
+      lastSavedPosition.current = 0
+      if (completionTimerRef.current) {
+        clearTimeout(completionTimerRef.current)
+        completionTimerRef.current = null
+      }
     }
   }, [enabled])
 

src/hooks/useSettings.ts

@@ -16,7 +16,7 @@ interface UseSettingsParams {
 }
 
 export function useSettings({ relayPool, eventStore, pubkey, accountManager }: UseSettingsParams) {
-  const [settings, setSettings] = useState<UserSettings>({})
+  const [settings, setSettings] = useState<UserSettings>({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true })
   const [toastMessage, setToastMessage] = useState<string | null>(null)
   const [toastType, setToastType] = useState<'success' | 'error'>('success')
 
@@ -27,7 +27,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
     const loadAndWatch = async () => {
       try {
         const loadedSettings = await loadSettings(relayPool, eventStore, pubkey, RELAYS)
-        if (loadedSettings) setSettings(loadedSettings)
+        if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
       } catch (err) {
         console.error('Failed to load settings:', err)
       }
@@ -36,7 +36,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
     loadAndWatch()
 
     const subscription = watchSettings(eventStore, pubkey, (loadedSettings) => {
-      if (loadedSettings) setSettings(loadedSettings)
+      if (loadedSettings) setSettings({ renderVideoLinksAsEmbeds: true, hideBotArticlesByName: true, ...loadedSettings })
     })
 
     return () => subscription.unsubscribe()
@@ -48,7 +48,6 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       const root = document.documentElement.style
       const fontKey = settings.readingFont || 'system'
       
-      console.log('🎨 Applying settings styles:', { fontKey, fontSize: settings.fontSize, theme: settings.theme })
       
       // Apply theme with color variants (defaults to 'system' if not set)
       applyTheme(
@@ -59,9 +58,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       
       // Load font first and wait for it to be ready
       if (fontKey !== 'system') {
-        console.log('⏳ Waiting for font to load...')
         await loadFont(fontKey)
-        console.log('✅ Font loaded, applying styles')
       }
       
       // Apply font settings after font is loaded
@@ -76,7 +73,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       // Set paragraph alignment
       root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
       
-      console.log('✅ All styles applied')
+      // Set image max-width based on full-width setting
+      root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%')
+      
     }
     
     applyStyles()

src/hooks/useStoreTimeline.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react'
+import { useObservableMemo } from 'applesauce-react/hooks'
+import { startWith } from 'rxjs'
+import type { IEventStore } from 'applesauce-core'
+import type { Filter, NostrEvent } from 'nostr-tools'
+
+/**
+ * Subscribe to EventStore timeline and map events to app types
+ * Provides instant cached results, then updates reactively
+ * 
+ * @param eventStore - The applesauce event store
+ * @param filter - Nostr filter to query
+ * @param mapEvent - Function to transform NostrEvent to app type
+ * @param deps - Dependencies for memoization
+ * @returns Array of mapped results
+ */
+export function useStoreTimeline<T>(
+  eventStore: IEventStore | null,
+  filter: Filter,
+  mapEvent: (event: NostrEvent) => T,
+  deps: unknown[] = []
+): T[] {
+  const events = useObservableMemo(
+    () => eventStore ? eventStore.timeline(filter).pipe(startWith([])) : undefined,
+    [eventStore, ...deps]
+  )
+  
+  return useMemo(
+    () => events?.map(mapEvent) ?? [],
+    [events, mapEvent]
+  )
+}
+

src/hooks/useTextToSpeech.ts

@@ -0,0 +1,249 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+// Web Speech API types
+type SpeechSynthesisVoice = {
+  name: string
+  voiceURI: string
+  lang: string
+  localService: boolean
+  default: boolean
+}
+
+export interface UseTTSOptions {
+  defaultLang?: string
+  defaultRate?: number
+  defaultPitch?: number
+  defaultVolume?: number
+}
+
+export interface UseTTS {
+  supported: boolean
+  speaking: boolean
+  paused: boolean
+  voices: SpeechSynthesisVoice[]
+  voice: SpeechSynthesisVoice | null
+  rate: number
+  pitch: number
+  volume: number
+  setVoice: (v: SpeechSynthesisVoice | null) => void
+  setRate: (r: number) => void
+  setPitch: (p: number) => void
+  setVolume: (v: number) => void
+  speak: (text: string, langOverride?: string) => void
+  pause: () => void
+  resume: () => void
+  stop: () => void
+}
+
+export function useTextToSpeech(options: UseTTSOptions = {}): UseTTS {
+  const synth = typeof window !== 'undefined' ? window.speechSynthesis : undefined
+  const supported = !!synth
+  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
+  const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null)
+  const [speaking, setSpeaking] = useState(false)
+  const [paused, setPaused] = useState(false)
+  const [rate, setRate] = useState(options.defaultRate ?? 2.1)
+  const [pitch, setPitch] = useState(options.defaultPitch ?? 1)
+  const [volume, setVolume] = useState(options.defaultVolume ?? 1)
+  const defaultLang = options.defaultLang || (typeof navigator !== 'undefined' ? navigator.language : 'en')
+
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null)
+  const spokenTextRef = useRef<string>('')
+  const charIndexRef = useRef<number>(0)
+
+  // Update rate when defaultRate option changes
+  useEffect(() => {
+    if (options.defaultRate !== undefined) {
+      console.debug('[tts] defaultRate changed ->', options.defaultRate)
+      setRate(options.defaultRate)
+    }
+  }, [options.defaultRate])
+
+  // Load voices (async in many browsers)
+  useEffect(() => {
+    if (!supported) return
+    const load = () => {
+      const v = synth!.getVoices()
+      setVoices(v)
+      if (!voice && v.length) {
+        const byLang = v.find(x => x.lang?.toLowerCase().startsWith(defaultLang.toLowerCase()))
+        setVoice(byLang || v[0] || null)
+        console.debug('[tts] voices loaded', { total: v.length, picked: (byLang || v[0] || null)?.lang })
+      }
+    }
+    load()
+    const handleVoicesChanged = () => load()
+    synth!.addEventListener('voiceschanged', handleVoicesChanged)
+    return () => {
+      synth!.removeEventListener('voiceschanged', handleVoicesChanged)
+    }
+  }, [supported, defaultLang, voice, synth])
+
+  const createUtterance = useCallback((text: string): SpeechSynthesisUtterance => {
+    const SpeechSynthesisUtteranceConstructor = (window as Window & typeof globalThis).SpeechSynthesisUtterance
+    const u = new SpeechSynthesisUtteranceConstructor(text) as SpeechSynthesisUtterance
+    u.lang = voice?.lang || defaultLang
+    if (voice) u.voice = voice
+    u.rate = rate
+    u.pitch = pitch
+    u.volume = volume
+
+    const self = u
+
+    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')
+      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
+      if (typeof ev.charIndex === 'number') {
+        const newIndex = ev.charIndex
+        if (newIndex > charIndexRef.current) {
+          charIndexRef.current = newIndex
+        }
+      }
+    }
+
+    return u
+  }, [voice, defaultLang, rate, pitch, volume])
+
+  const stop = useCallback(() => {
+    if (!supported) return
+    console.debug('[tts] stop')
+    synth!.cancel()
+    setSpeaking(false)
+    setPaused(false)
+    utteranceRef.current = null
+    charIndexRef.current = 0
+    spokenTextRef.current = ''
+  }, [supported, synth])
+
+  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
+
+    const u = createUtterance(text)
+    if (langOverride) {
+      u.lang = langOverride
+      // try to pick a voice that matches the override
+      const available = voices
+      const match = available.find(v => v.lang?.toLowerCase().startsWith(langOverride.toLowerCase()))
+      if (match) u.voice = match
+    }
+
+    utteranceRef.current = u
+    synth!.speak(u)
+  }, [supported, synth, createUtterance, rate, voices])
+
+  const pause = useCallback(() => {
+    if (!supported) return
+    if (synth!.speaking && !synth!.paused) {
+      console.debug('[tts] pause')
+      synth!.pause()
+      setPaused(true)
+    }
+  }, [supported, synth])
+
+  const resume = useCallback(() => {
+    if (!supported) return
+    if (synth!.speaking && synth!.paused) {
+      console.debug('[tts] resume')
+      synth!.resume()
+      setPaused(false)
+    }
+  }, [supported, synth])
+
+  // Update rate in real-time: while speaking, restart from last boundary with new rate.
+  useEffect(() => {
+    if (!supported) return
+    if (!utteranceRef.current) return
+
+    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 - 1))
+      const remainingText = fullText.slice(startIndex)
+
+      console.debug('[tts] restart at new rate', { startIndex, remainingLen: remainingText.length })
+      synth!.cancel()
+      const u = createUtterance(remainingText)
+      utteranceRef.current = u
+      synth!.speak(u)
+      return
+    }
+
+    if (utteranceRef.current) {
+      utteranceRef.current.rate = rate
+    }
+  }, [rate, supported, synth, createUtterance])
+
+  const updateRate = useCallback((newRate: number) => {
+    setRate(newRate)
+    if (!supported) return
+    if (!utteranceRef.current) return
+
+    if (synth!.speaking && !synth!.paused) {
+      const fullText = spokenTextRef.current
+      const startIndex = Math.max(0, Math.min(charIndexRef.current, fullText.length - 1))
+      const remainingText = fullText.slice(startIndex)
+      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
+      u.rate = newRate
+      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])
+
+  // stop TTS when unmounting
+  useEffect(() => stop, [stop])
+
+  return useMemo(() => ({
+    supported,
+    speaking,
+    paused,
+    voices,
+    voice,
+    rate,
+    setRate: updateRate,
+    pitch, setPitch,
+    volume, setVolume,
+    setVoice,
+    speak, pause, resume, stop
+  }), [supported, speaking, paused, voices, voice, rate, updateRate, pitch, volume, setVoice, speak, pause, resume, stop])
+}
+

src/main.tsx

@@ -11,7 +11,6 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker
       .register('/sw.js', { type: 'module' })
       .then(registration => {
-        console.log('✅ Service Worker registered:', registration.scope)
         
         // Check for updates periodically
         setInterval(() => {
@@ -25,7 +24,6 @@ if ('serviceWorker' in navigator) {
             newWorker.addEventListener('statechange', () => {
               if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                 // New service worker available
-                console.log('🔄 New version available! Reload to update.')
                 
                 // Optionally show a toast notification
                 const updateAvailable = new CustomEvent('sw-update-available')

src/services/archiveController.ts

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

src/services/articleService.ts

@@ -48,7 +48,6 @@ function getFromCache(naddr: string): ArticleContent | null {
       return null
     }
 
-    console.log('📦 Loaded article from cache:', naddr)
     return content
   } catch {
     return null
@@ -63,7 +62,6 @@ function saveToCache(naddr: string, content: ArticleContent): void {
       timestamp: Date.now()
     }
     localStorage.setItem(cacheKey, JSON.stringify(cached))
-    console.log('💾 Saved article to cache:', naddr)
   } catch (err) {
     console.warn('Failed to cache article:', err)
     // Silently fail if storage is full or unavailable

src/services/bookmarkController.ts

@@ -126,18 +126,14 @@ class BookmarkController {
     generation: number
   ): void {
     if (!this.eventLoader) {
-      console.warn('[bookmark] ⚠️ EventLoader not initialized')
       return
     }
 
     // Filter to unique IDs not already hydrated
     const unique = Array.from(new Set(ids)).filter(id => !idToEvent.has(id))
     if (unique.length === 0) {
-      console.log('[bookmark] 🔧 All IDs already hydrated, skipping')
       return
     }
-
-    console.log('[bookmark] 🔧 Hydrating', unique.length, 'IDs using EventLoader')
     
     // Convert IDs to EventPointers
     const pointers: EventPointer[] = unique.map(id => ({ id }))
@@ -159,8 +155,8 @@ class BookmarkController {
         
         onProgress()
       },
-      error: (error) => {
-        console.error('[bookmark] ❌ EventLoader error:', error)
+      error: () => {
+        // Silent error - EventLoader handles retries
       }
     })
   }
@@ -175,14 +171,11 @@ class BookmarkController {
     generation: number
   ): void {
     if (!this.addressLoader) {
-      console.warn('[bookmark] ⚠️ AddressLoader not initialized')
       return
     }
 
     if (coords.length === 0) return
 
-    console.log('[bookmark] 🔧 Hydrating', coords.length, 'coordinates using AddressLoader')
-
     // Convert coordinates to AddressPointers
     const pointers = coords.map(c => ({
       kind: c.kind,
@@ -203,8 +196,8 @@ class BookmarkController {
         
         onProgress()
       },
-      error: (error) => {
-        console.error('[bookmark] ❌ AddressLoader error:', error)
+      error: () => {
+        // Silent error - AddressLoader handles retries
       }
     })
   }
@@ -223,10 +216,6 @@ class BookmarkController {
       return this.decryptedResults.has(getEventKey(evt))
     })
     
-    const unencryptedCount = allEvents.filter(evt => !hasEncryptedContent(evt)).length
-    const decryptedCount = readyEvents.length - unencryptedCount
-    console.log('[bookmark] 📋 Building bookmarks:', unencryptedCount, 'unencrypted,', decryptedCount, 'decrypted, of', allEvents.length, 'total')
-    
     if (readyEvents.length === 0) {
       this.bookmarksListeners.forEach(cb => cb([]))
       return
@@ -237,17 +226,14 @@ class BookmarkController {
       const unencryptedEvents = readyEvents.filter(evt => !hasEncryptedContent(evt))
       const decryptedEvents = readyEvents.filter(evt => hasEncryptedContent(evt))
       
-      console.log('[bookmark] 🔧 Processing', unencryptedEvents.length, 'unencrypted events')
       // Process unencrypted events
       const { publicItemsAll: publicUnencrypted, privateItemsAll: privateUnencrypted, newestCreatedAt, latestContent, allTags } = 
         await collectBookmarksFromEvents(unencryptedEvents, activeAccount, signerCandidate)
-      console.log('[bookmark] 🔧 Unencrypted returned:', publicUnencrypted.length, 'public,', privateUnencrypted.length, 'private')
       
       // Merge in decrypted results
       let publicItemsAll = [...publicUnencrypted]
       let privateItemsAll = [...privateUnencrypted]
       
-      console.log('[bookmark] 🔧 Merging', decryptedEvents.length, 'decrypted events')
       decryptedEvents.forEach(evt => {
         const eventKey = getEventKey(evt)
         const decrypted = this.decryptedResults.get(eventKey)
@@ -256,11 +242,8 @@ class BookmarkController {
           privateItemsAll = [...privateItemsAll, ...decrypted.privateItems]
         }
       })
-      
-      console.log('[bookmark] 🔧 Total after merge:', publicItemsAll.length, 'public,', privateItemsAll.length, 'private')
 
       const allItems = [...publicItemsAll, ...privateItemsAll]
-      console.log('[bookmark] 🔧 Total items to process:', allItems.length)
       
       // Separate hex IDs from coordinates
       const noteIds: string[] = []
@@ -276,14 +259,11 @@ class BookmarkController {
       
       // Helper to build and emit bookmarks
       const emitBookmarks = (idToEvent: Map<string, NostrEvent>) => {
-        console.log('[bookmark] 🔧 Building final bookmarks list...')
         const allBookmarks = dedupeBookmarksById([
           ...hydrateItems(publicItemsAll, idToEvent),
           ...hydrateItems(privateItemsAll, idToEvent)
         ])
-        console.log('[bookmark] 🔧 After hydration and dedup:', allBookmarks.length, 'bookmarks')
 
-        console.log('[bookmark] 🔧 Enriching and sorting...')
         const enriched = allBookmarks.map(b => ({
           ...b,
           tags: b.tags || [],
@@ -293,9 +273,7 @@ class BookmarkController {
         const sortedBookmarks = enriched
           .map(b => ({ ...b, urlReferences: extractUrlsFromContent(b.content) }))
           .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
-        console.log('[bookmark] 🔧 Sorted:', sortedBookmarks.length, 'bookmarks')
 
-        console.log('[bookmark] 🔧 Creating final Bookmark object...')
         const bookmark: Bookmark = {
           id: `${activeAccount.pubkey}-bookmarks`,
           title: `Bookmarks (${sortedBookmarks.length})`,
@@ -310,18 +288,14 @@ class BookmarkController {
           encryptedContent: undefined
         }
         
-        console.log('[bookmark] 📋 Built bookmark with', sortedBookmarks.length, 'items')
-        console.log('[bookmark] 📤 Emitting to', this.bookmarksListeners.length, 'listeners')
         this.bookmarksListeners.forEach(cb => cb([bookmark]))
       }
 
       // Emit immediately with empty metadata (show placeholders)
       const idToEvent: Map<string, NostrEvent> = new Map()
-      console.log('[bookmark] 🚀 Emitting initial bookmarks with placeholders (IDs only)...')
       emitBookmarks(idToEvent)
 
       // Now fetch events progressively in background using batched hydrators
-      console.log('[bookmark] 🔧 Background hydration:', noteIds.length, 'note IDs and', coordinates.length, 'coordinates')
       
       const generation = this.hydrationGeneration
       const onProgress = () => emitBookmarks(idToEvent)
@@ -341,9 +315,7 @@ class BookmarkController {
       this.hydrateByIds(noteIds, idToEvent, onProgress, generation)
       this.hydrateByCoordinates(coordObjs, idToEvent, onProgress, generation)
     } catch (error) {
-      console.error('[bookmark] ❌ Failed to build bookmarks:', error)
-      console.error('[bookmark] ❌ Error details:', error instanceof Error ? error.message : String(error))
-      console.error('[bookmark] ❌ Stack:', error instanceof Error ? error.stack : 'no stack')
+      console.error('Failed to build bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
     }
   }
@@ -356,7 +328,6 @@ class BookmarkController {
     const { relayPool, activeAccount, accountManager } = options
 
     if (!activeAccount || typeof (activeAccount as { pubkey?: string }).pubkey !== 'string') {
-      console.error('[bookmark] Invalid activeAccount')
       return
     }
 
@@ -366,7 +337,6 @@ class BookmarkController {
     this.hydrationGeneration++
     
     // Initialize loaders for this session
-    console.log('[bookmark] 🔧 Initializing EventLoader and AddressLoader with', RELAYS.length, 'relays')
     this.eventLoader = createEventLoader(relayPool, { 
       eventStore: this.eventStore,
       extraRelays: RELAYS 
@@ -377,7 +347,6 @@ class BookmarkController {
     })
     
     this.setLoading(true)
-    console.log('[bookmark] 🔍 Starting bookmark load for', account.pubkey.slice(0, 8))
 
     try {
       // Get signer for auto-decryption
@@ -405,7 +374,6 @@ class BookmarkController {
             
             // Add/update event
             this.currentEvents.set(key, evt)
-            console.log('[bookmark] 📨 Event:', evt.kind, evt.id.slice(0, 8), 'encrypted:', hasEncryptedContent(evt))
             
             // Emit raw event for Debug UI
             this.emitRawEvent(evt)
@@ -415,12 +383,13 @@ class BookmarkController {
             if (!isEncrypted) {
               // For unencrypted events, build bookmarks immediately (progressive update)
               this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-                .catch(err => console.error('[bookmark] ❌ Failed to update after event:', err))
+                .catch(() => {
+                  // Silent error - will retry on next event
+                })
             }
             
             // Auto-decrypt if event has encrypted content (fire-and-forget, non-blocking)
             if (isEncrypted) {
-              console.log('[bookmark] 🔓 Auto-decrypting event', evt.id.slice(0, 8))
               // Don't await - let it run in background
               collectBookmarksFromEvents([evt], account, signerCandidate)
                 .then(({ publicItemsAll, privateItemsAll, newestCreatedAt, latestContent, allTags }) => {
@@ -433,10 +402,6 @@ class BookmarkController {
                     latestContent,
                     allTags
                   })
-                  console.log('[bookmark] ✅ Auto-decrypted:', evt.id.slice(0, 8), {
-                    public: publicItemsAll.length,
-                    private: privateItemsAll.length
-                  })
                   
                   // Emit decrypt complete for Debug UI
                   this.decryptCompleteListeners.forEach(cb => 
@@ -445,10 +410,12 @@ class BookmarkController {
                   
                   // Rebuild bookmarks with newly decrypted content (progressive update)
                   this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-                    .catch(err => console.error('[bookmark] ❌ Failed to update after decrypt:', err))
+                    .catch(() => {
+                      // Silent error - will retry on next event
+                    })
                 })
-                .catch((error) => {
-                  console.error('[bookmark] ❌ Auto-decrypt failed:', evt.id.slice(0, 8), error)
+                .catch(() => {
+                  // Silent error - decrypt failed
                 })
             }
           }
@@ -457,9 +424,8 @@ class BookmarkController {
 
       // Final update after EOSE
       await this.buildAndEmitBookmarks(maybeAccount, signerCandidate)
-      console.log('[bookmark] ✅ Bookmark load complete')
     } catch (error) {
-      console.error('[bookmark] ❌ Failed to load bookmarks:', error)
+      console.error('Failed to load bookmarks:', error)
       this.bookmarksListeners.forEach(cb => cb([]))
     } finally {
       this.setLoading(false)

src/services/bookmarkHelpers.ts

@@ -62,7 +62,8 @@ export { dedupeNip51Events } from './bookmarkEvents'
 export const processApplesauceBookmarks = (
   bookmarks: unknown,
   activeAccount: ActiveAccount,
-  isPrivate: boolean
+  isPrivate: boolean,
+  parentCreatedAt?: number
 ): IndividualBookmark[] => {
   if (!bookmarks) return []
 
@@ -76,14 +77,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: note.id,
           content: '',
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
           pubkey: note.author || activeAccount.pubkey,
           kind: 1, // Short note kind
           tags: [],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
         })
       })
     }
@@ -96,14 +97,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: coordinate,
           content: '',
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
           pubkey: article.pubkey,
           kind: article.kind, // Usually 30023 for long-form articles
           tags: [],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
         })
       })
     }
@@ -114,14 +115,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `hashtag-${hashtag}`,
           content: `#${hashtag}`,
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
           pubkey: activeAccount.pubkey,
           kind: 1,
           tags: [['t', hashtag]],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
         })
       })
     }
@@ -132,14 +133,14 @@ export const processApplesauceBookmarks = (
         allItems.push({
           id: `url-${url}`,
           content: url,
-          created_at: Math.floor(Date.now() / 1000),
+          created_at: parentCreatedAt || 0,
           pubkey: activeAccount.pubkey,
           kind: 1,
           tags: [['r', url]],
           parsedContent: undefined,
           type: 'event' as const,
           isPrivate,
-          added_at: Math.floor(Date.now() / 1000)
+          added_at: parentCreatedAt || 0
         })
       })
     }
@@ -153,14 +154,14 @@ export const processApplesauceBookmarks = (
     .map((bookmark: BookmarkData) => ({
       id: bookmark.id!,
       content: bookmark.content || '',
-      created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
+      created_at: bookmark.created_at || parentCreatedAt || 0,
       pubkey: activeAccount.pubkey,
       kind: bookmark.kind || 30001,
       tags: bookmark.tags || [],
       parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
       type: 'event' as const,
       isPrivate,
-      added_at: bookmark.created_at || Math.floor(Date.now() / 1000)
+      added_at: bookmark.created_at || parentCreatedAt || 0
     }))
 }
 
@@ -169,29 +170,35 @@ export function hydrateItems(
   items: IndividualBookmark[],
   idToEvent: Map<string, NostrEvent>
 ): IndividualBookmark[] {
-  return items.map(item => {
-    const ev = idToEvent.get(item.id)
-    if (!ev) return item
-    
-    // For long-form articles (kind:30023), use the article title as content
-    let content = ev.content || item.content || ''
-    if (ev.kind === 30023) {
-      const articleTitle = getArticleTitle(ev)
-      if (articleTitle) {
-        content = articleTitle
+  return items
+    .map(item => {
+      const ev = idToEvent.get(item.id)
+      if (!ev) return item
+      
+      // For long-form articles (kind:30023), use the article title as content
+      let content = ev.content || item.content || ''
+      if (ev.kind === 30023) {
+        const articleTitle = getArticleTitle(ev)
+        if (articleTitle) {
+          content = articleTitle
+        }
       }
-    }
-    
-    return {
-      ...item,
-      pubkey: ev.pubkey || item.pubkey,
-      content,
-      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
-    }
-  })
+      
+      return {
+        ...item,
+        pubkey: ev.pubkey || item.pubkey,
+        content,
+        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
+      }
+    })
+    .filter(item => {
+      // Filter out bookmark list events (they're containers, not content)
+      const isBookmarkListEvent = item.kind === 10003 || item.kind === 30003 || item.kind === 30001
+      return !isBookmarkListEvent
+    })
 }
 
 // Note: event decryption/collection lives in `bookmarkProcessing.ts`

src/services/bookmarkProcessing.ts

@@ -30,8 +30,8 @@ async function decryptEvent(
       } catch {
         try {
           await Helpers.unlockHiddenTags(evt, signerCandidate as HiddenContentSigner, 'nip44' as UnlockMode)
-        } catch (err) {
-          console.log("[bunker] ❌ nip44.decrypt failed:", err instanceof Error ? err.message : String(err))
+        } catch (_err) {
+          // Ignore unlock errors
         }
       }
     } else if (evt.content && evt.content.length > 0) {
@@ -45,8 +45,8 @@ async function decryptEvent(
       if (looksLikeNip44 && hasNip44Decrypt(signerCandidate)) {
         try {
           decryptedContent = await (signerCandidate as { nip44: { decrypt: DecryptFn } }).nip44.decrypt(evt.pubkey, evt.content)
-        } catch (err) {
-          console.log("[bunker] ❌ nip44.decrypt failed:", err instanceof Error ? err.message : String(err))
+        } catch (_err) {
+          // Ignore NIP-44 decryption errors
         }
       }
 
@@ -54,8 +54,8 @@ async function decryptEvent(
       if (!decryptedContent && hasNip04Decrypt(signerCandidate)) {
         try {
           decryptedContent = await (signerCandidate as { nip04: { decrypt: DecryptFn } }).nip04.decrypt(evt.pubkey, evt.content)
-        } catch (err) {
-          console.log("[bunker] ❌ nip04.decrypt failed:", err instanceof Error ? err.message : String(err))
+        } catch (_err) {
+          // Ignore NIP-04 decryption errors
         }
       }
 
@@ -64,7 +64,7 @@ async function decryptEvent(
           const hiddenTags = JSON.parse(decryptedContent) as string[][]
           const manualPrivate = Helpers.parseBookmarkTags(hiddenTags)
           privateItems.push(
-            ...processApplesauceBookmarks(manualPrivate, activeAccount, true).map(i => ({
+            ...processApplesauceBookmarks(manualPrivate, activeAccount, true, evt.created_at).map(i => ({
               ...i,
               sourceKind: evt.kind,
               setName: dTag,
@@ -84,7 +84,7 @@ async function decryptEvent(
     const priv = Helpers.getHiddenBookmarks(evt)
     if (priv) {
       privateItems.push(
-        ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+        ...processApplesauceBookmarks(priv, activeAccount, true, evt.created_at).map(i => ({
           ...i,
           sourceKind: evt.kind,
           setName: dTag,
@@ -155,7 +155,7 @@ export async function collectBookmarksFromEvents(
 
     const pub = Helpers.getPublicBookmarks(evt)
     publicItemsAll.push(
-      ...processApplesauceBookmarks(pub, activeAccount, false).map(i => ({
+      ...processApplesauceBookmarks(pub, activeAccount, false, evt.created_at).map(i => ({
         ...i,
         sourceKind: evt.kind,
         setName: dTag,
@@ -181,7 +181,7 @@ export async function collectBookmarksFromEvents(
       const priv = Helpers.getHiddenBookmarks(evt)
       if (priv) {
         publicItemsAll.push(
-          ...processApplesauceBookmarks(priv, activeAccount, true).map(i => ({
+          ...processApplesauceBookmarks(priv, activeAccount, true, evt.created_at).map(i => ({
             ...i,
             sourceKind: evt.kind,
             setName: dTag,

src/services/contactService.ts

@@ -15,7 +15,6 @@ export const fetchContacts = async (
 ): Promise<Set<string>> => {
   try {
     const relayUrls = prioritizeLocalRelays(Array.from(relayPool.relays.values()).map(relay => relay.url))
-    console.log('🔍 Fetching contacts (kind 3) for user:', pubkey)
 
     const partialFollowed = new Set<string>()
     const events = await queryEvents(
@@ -51,9 +50,7 @@ export const fetchContacts = async (
     }
     // merged already via streams
     
-    console.log('📊 Contact events fetched:', events.length)
     
-    console.log('👥 Followed contacts:', followed.size)
     return followed
   } catch (error) {
     console.error('Failed to fetch contacts:', error)

src/services/contactsController.ts

@@ -0,0 +1,110 @@
+import { RelayPool } from 'applesauce-relay'
+import { fetchContacts } from './contactService'
+
+type ContactsCallback = (contacts: Set<string>) => void
+type LoadingCallback = (loading: boolean) => void
+
+/**
+ * Shared contacts/friends controller
+ * Manages the user's follow list centrally, similar to bookmarkController
+ */
+class ContactsController {
+  private contactsListeners: ContactsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  
+  private currentContacts: Set<string> = new Set()
+  private lastLoadedPubkey: string | null = null
+
+  onContacts(cb: ContactsCallback): () => void {
+    this.contactsListeners.push(cb)
+    return () => {
+      this.contactsListeners = this.contactsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitContacts(contacts: Set<string>): void {
+    this.contactsListeners.forEach(cb => cb(contacts))
+  }
+
+  /**
+   * Get current contacts without triggering a reload
+   */
+  getContacts(): Set<string> {
+    return new Set(this.currentContacts)
+  }
+
+  /**
+   * Check if contacts are loaded for a specific pubkey
+   */
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey && this.currentContacts.size > 0
+  }
+
+  /**
+   * Reset state (for logout or manual refresh)
+   */
+  reset(): void {
+    this.currentContacts.clear()
+    this.lastLoadedPubkey = null
+    this.emitContacts(this.currentContacts)
+  }
+
+  /**
+   * Load contacts for a user
+   * Streams partial results and caches the final list
+   */
+  async start(options: {
+    relayPool: RelayPool
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, pubkey, force = false } = options
+
+    // Skip if already loaded for this pubkey (unless forced)
+    if (!force && this.isLoadedFor(pubkey)) {
+      this.emitContacts(this.currentContacts)
+      return
+    }
+
+    this.setLoading(true)
+
+    try {
+      const contacts = await fetchContacts(
+        relayPool,
+        pubkey,
+        (partial) => {
+          // Stream partial updates
+          this.currentContacts = new Set(partial)
+          this.emitContacts(this.currentContacts)
+        }
+      )
+
+      // Store final result
+      this.currentContacts = new Set(contacts)
+      this.lastLoadedPubkey = pubkey
+      this.emitContacts(this.currentContacts)
+      
+    } catch (error) {
+      console.error('[contacts] ❌ Failed to load contacts:', error)
+      this.currentContacts.clear()
+      this.emitContacts(this.currentContacts)
+    } finally {
+      this.setLoading(false)
+    }
+  }
+}
+
+// Singleton instance
+export const contactsController = new ContactsController()
+

src/services/deletionService.ts

@@ -36,12 +36,10 @@ export async function createDeletionRequest(
 
   const signed = await factory.sign(draft)
 
-  console.log('🗑️ Created kind:5 deletion request for event:', eventId.slice(0, 8))
 
   // Publish to relays
   await relayPool.publish(RELAYS, signed)
 
-  console.log('✅ Deletion request published to', RELAYS.length, 'relay(s)')
 
   return signed
 }

src/services/exploreService.ts

@@ -20,29 +20,34 @@ export interface BlogPostPreview {
  * @param relayPool - The relay pool to query
  * @param pubkeys - Array of pubkeys to fetch posts from
  * @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)
  * @returns Array of blog post previews
  */
 export const fetchBlogPostsFromAuthors = async (
   relayPool: RelayPool,
   pubkeys: string[],
   relayUrls: string[],
-  onPost?: (post: BlogPostPreview) => void
+  onPost?: (post: BlogPostPreview) => void,
+  limit: number | null = 100
 ): Promise<BlogPostPreview[]> => {
   try {
     if (pubkeys.length === 0) {
-      console.log('⚠️ No pubkeys to fetch blog posts from')
       return []
     }
 
-    console.log('📚 Fetching blog posts (kind 30023) from', pubkeys.length, 'authors')
 
     // Deduplicate replaceable events by keeping the most recent version
     // Group by author + d-tag identifier
     const uniqueEvents = new Map<string, NostrEvent>()
 
+    const filter = limit !== null
+      ? { kinds: [KINDS.BlogPost], authors: pubkeys, limit }
+      : { kinds: [KINDS.BlogPost], authors: pubkeys }
+
     await queryEvents(
       relayPool,
-      { kinds: [KINDS.BlogPost], authors: pubkeys, limit: 100 },
+      filter,
       {
         relayUrls,
         onEvent: (event: NostrEvent) => {
@@ -68,7 +73,6 @@ export const fetchBlogPostsFromAuthors = async (
       }
     )
 
-    console.log('📊 Blog post events fetched (unique):', uniqueEvents.size)
     
     // Convert to blog post previews and sort by published date (most recent first)
     const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
@@ -90,7 +94,6 @@ export const fetchBlogPostsFromAuthors = async (
         return timeB - timeA // Most recent first
       })
     
-    console.log('📰 Processed', blogPosts.length, 'unique blog posts')
     
     return blogPosts
   } catch (error) {

src/services/highlightCreationService.ts

@@ -46,7 +46,6 @@ export async function createHighlight(
   }
 
   // Create EventFactory with the account as signer
-  console.log("[bunker] Creating EventFactory with signer:", { signerType: account.signer?.constructor?.name })
   const factory = new EventFactory({ signer: account.signer })
 
   let blueprintSource: NostrEvent | AddressPointer | string
@@ -117,9 +116,7 @@ export async function createHighlight(
   }
 
   // Sign the event
-  console.log('[bunker] Signing highlight event...', { kind: highlightEvent.kind, tags: highlightEvent.tags.length })
   const signedEvent = await factory.sign(highlightEvent)
-  console.log('[bunker] ✅ Highlight signed successfully!', { id: signedEvent.id.slice(0, 8) })
 
   // Use unified write service to store and publish
   await publishEvent(relayPool, eventStore, signedEvent)

src/services/highlights/cache.ts

@@ -0,0 +1,96 @@
+import { Highlight } from '../../types/highlights'
+
+interface CacheEntry {
+  highlights: Highlight[]
+  timestamp: number
+}
+
+/**
+ * Simple in-memory session cache for highlight queries with TTL
+ */
+class HighlightCache {
+  private cache = new Map<string, CacheEntry>()
+  private ttlMs = 60000 // 60 seconds
+
+  /**
+   * Generate cache key for article coordinate
+   */
+  articleKey(coordinate: string): string {
+    return `article:${coordinate}`
+  }
+
+  /**
+   * Generate cache key for URL
+   */
+  urlKey(url: string): string {
+    // Normalize URL for consistent caching
+    try {
+      const normalized = new URL(url)
+      normalized.hash = '' // Remove hash
+      return `url:${normalized.toString()}`
+    } catch {
+      return `url:${url}`
+    }
+  }
+
+  /**
+   * Generate cache key for author pubkey
+   */
+  authorKey(pubkey: string): string {
+    return `author:${pubkey}`
+  }
+
+  /**
+   * Get cached highlights if not expired
+   */
+  get(key: string): Highlight[] | null {
+    const entry = this.cache.get(key)
+    if (!entry) return null
+
+    const now = Date.now()
+    if (now - entry.timestamp > this.ttlMs) {
+      this.cache.delete(key)
+      return null
+    }
+
+    return entry.highlights
+  }
+
+  /**
+   * Store highlights in cache
+   */
+  set(key: string, highlights: Highlight[]): void {
+    this.cache.set(key, {
+      highlights,
+      timestamp: Date.now()
+    })
+  }
+
+  /**
+   * Clear specific cache entry
+   */
+  clear(key: string): void {
+    this.cache.delete(key)
+  }
+
+  /**
+   * Clear all cache entries
+   */
+  clearAll(): void {
+    this.cache.clear()
+  }
+
+  /**
+   * Get cache stats
+   */
+  stats(): { size: number; keys: string[] } {
+    return {
+      size: this.cache.size,
+      keys: Array.from(this.cache.keys())
+    }
+  }
+}
+
+// Singleton instance
+export const highlightCache = new HighlightCache()
+

src/services/highlights/fetchByAuthor.ts

@@ -1,61 +1,75 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../../types/highlights'
-import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
 import { UserSettings } from '../settingsService'
 import { rebroadcastEvents } from '../rebroadcastService'
 import { KINDS } from '../../config/kinds'
+import { queryEvents } from '../dataFetch'
+import { highlightCache } from './cache'
 
 export const fetchHighlights = async (
   relayPool: RelayPool,
   pubkey: string,
   onHighlight?: (highlight: Highlight) => void,
-  settings?: UserSettings
+  settings?: UserSettings,
+  force = false,
+  eventStore?: IEventStore
 ): Promise<Highlight[]> => {
+  // Check cache first unless force refresh
+  if (!force) {
+    const cacheKey = highlightCache.authorKey(pubkey)
+    const cached = highlightCache.get(cacheKey)
+    if (cached) {
+      // Stream cached highlights if callback provided
+      if (onHighlight) {
+        cached.forEach(h => onHighlight(h))
+      }
+      return cached
+    }
+  }
   try {
-    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-    const ordered = prioritizeLocalRelays(relayUrls)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(ordered)
-
     const seenIds = new Set<string>()
-    const local$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [KINDS.Highlights], authors: [pubkey] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              if (!seenIds.has(event.id)) {
-                seenIds.add(event.id)
-                if (onHighlight) onHighlight(eventToHighlight(event))
-              }
-            }),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const remote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [KINDS.Highlights], authors: [pubkey] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              if (!seenIds.has(event.id)) {
-                seenIds.add(event.id)
-                if (onHighlight) onHighlight(eventToHighlight(event))
-              }
-            }),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
+    const rawEvents: NostrEvent[] = await queryEvents(
+      relayPool,
+      { kinds: [KINDS.Highlights], authors: [pubkey] },
+      {
+        onEvent: (event: NostrEvent) => {
+          if (seenIds.has(event.id)) return
+          seenIds.add(event.id)
+          
+          // Store in event store if provided
+          if (eventStore) {
+            eventStore.add(event)
+          }
+          
+          if (onHighlight) onHighlight(eventToHighlight(event))
+        }
+      }
+    )
+
+
+    // Store all events in event store if provided
+    if (eventStore) {
+      rawEvents.forEach(evt => eventStore.add(evt))
+    }
+
+    try {
+      await rebroadcastEvents(rawEvents, relayPool, settings)
+    } catch (err) {
+      console.warn('Failed to rebroadcast highlight events:', err)
+    }
 
-    await rebroadcastEvents(rawEvents, relayPool, settings)
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
+    const sorted = sortHighlights(highlights)
+    
+    // Cache the results
+    const cacheKey = highlightCache.authorKey(pubkey)
+    highlightCache.set(cacheKey, sorted)
+    
+    return sorted
   } catch {
     return []
   }

src/services/highlights/fetchForArticle.ts

@@ -1,95 +1,79 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../../types/highlights'
-import { RELAYS } from '../../config/relays'
-import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { KINDS } from '../../config/kinds'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
 import { UserSettings } from '../settingsService'
 import { rebroadcastEvents } from '../rebroadcastService'
+import { queryEvents } from '../dataFetch'
+import { highlightCache } from './cache'
 
 export const fetchHighlightsForArticle = async (
   relayPool: RelayPool,
   articleCoordinate: string,
   eventId?: string,
   onHighlight?: (highlight: Highlight) => void,
-  settings?: UserSettings
+  settings?: UserSettings,
+  force = false,
+  eventStore?: IEventStore
 ): Promise<Highlight[]> => {
+  // Check cache first unless force refresh
+  if (!force) {
+    const cacheKey = highlightCache.articleKey(articleCoordinate)
+    const cached = highlightCache.get(cacheKey)
+    if (cached) {
+      // Stream cached highlights if callback provided
+      if (onHighlight) {
+        cached.forEach(h => onHighlight(h))
+      }
+      return cached
+    }
+  }
   try {
     const seenIds = new Set<string>()
-    const processEvent = (event: NostrEvent): Highlight | null => {
-      if (seenIds.has(event.id)) return null
+    const onEvent = (event: NostrEvent) => {
+      if (seenIds.has(event.id)) return
       seenIds.add(event.id)
-      return eventToHighlight(event)
+      
+      // Store in event store if provided
+      if (eventStore) {
+        eventStore.add(event)
+      }
+      
+      if (onHighlight) onHighlight(eventToHighlight(event))
     }
 
-    const orderedRelays = prioritizeLocalRelays(RELAYS)
-    const { local: localRelays, remote: remoteRelays } = partitionRelays(orderedRelays)
-
-    const aLocal$ = localRelays.length > 0
-      ? relayPool
-          .req(localRelays, { kinds: [9802], '#a': [articleCoordinate] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              const highlight = processEvent(event)
-              if (highlight && onHighlight) onHighlight(highlight)
-            }),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const aRemote$ = remoteRelays.length > 0
-      ? relayPool
-          .req(remoteRelays, { kinds: [9802], '#a': [articleCoordinate] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              const highlight = processEvent(event)
-              if (highlight && onHighlight) onHighlight(highlight)
-            }),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const aTagEvents: NostrEvent[] = await lastValueFrom(merge(aLocal$, aRemote$).pipe(toArray()))
-
-    let eTagEvents: NostrEvent[] = []
-    if (eventId) {
-      const eLocal$ = localRelays.length > 0
-        ? relayPool
-            .req(localRelays, { kinds: [9802], '#e': [eventId] })
-            .pipe(
-              onlyEvents(),
-              tap((event: NostrEvent) => {
-                const highlight = processEvent(event)
-                if (highlight && onHighlight) onHighlight(highlight)
-              }),
-              completeOnEose(),
-              takeUntil(timer(1200))
-            )
-        : new Observable<NostrEvent>((sub) => sub.complete())
-      const eRemote$ = remoteRelays.length > 0
-        ? relayPool
-            .req(remoteRelays, { kinds: [9802], '#e': [eventId] })
-            .pipe(
-              onlyEvents(),
-              tap((event: NostrEvent) => {
-                const highlight = processEvent(event)
-                if (highlight && onHighlight) onHighlight(highlight)
-              }),
-              completeOnEose(),
-              takeUntil(timer(6000))
-            )
-        : new Observable<NostrEvent>((sub) => sub.complete())
-      eTagEvents = await lastValueFrom(merge(eLocal$, eRemote$).pipe(toArray()))
-    }
+    // Query for both #a and #e tags in parallel
+    const [aTagEvents, eTagEvents] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.Highlights], '#a': [articleCoordinate] }, { onEvent }),
+      eventId
+        ? queryEvents(relayPool, { kinds: [KINDS.Highlights], '#e': [eventId] }, { onEvent })
+        : Promise.resolve([] as NostrEvent[])
+    ])
 
     const rawEvents = [...aTagEvents, ...eTagEvents]
-    await rebroadcastEvents(rawEvents, relayPool, settings)
+
+    // Store all events in event store if provided
+    if (eventStore) {
+      rawEvents.forEach(evt => eventStore.add(evt))
+    }
+
+    try {
+      await rebroadcastEvents(rawEvents, relayPool, settings)
+    } catch (err) {
+      console.warn('Failed to rebroadcast highlight events:', err)
+    }
+
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
+    const sorted = sortHighlights(highlights)
+    
+    // Cache the results
+    const cacheKey = highlightCache.articleKey(articleCoordinate)
+    highlightCache.set(cacheKey, sorted)
+    
+    return sorted
   } catch {
     return []
   }

src/services/highlights/fetchForUrl.ts

@@ -1,68 +1,78 @@
-import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
-import { lastValueFrom, merge, Observable, takeUntil, timer, tap, toArray } from 'rxjs'
+import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../../types/highlights'
-import { RELAYS } from '../../config/relays'
-import { prioritizeLocalRelays, partitionRelays } from '../../utils/helpers'
+import { KINDS } from '../../config/kinds'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
 import { UserSettings } from '../settingsService'
 import { rebroadcastEvents } from '../rebroadcastService'
+import { queryEvents } from '../dataFetch'
+import { highlightCache } from './cache'
 
 export const fetchHighlightsForUrl = async (
   relayPool: RelayPool,
   url: string,
   onHighlight?: (highlight: Highlight) => void,
-  settings?: UserSettings
+  settings?: UserSettings,
+  force = false,
+  eventStore?: IEventStore
 ): Promise<Highlight[]> => {
-  const seenIds = new Set<string>()
-  const orderedRelaysUrl = prioritizeLocalRelays(RELAYS)
-  const { local: localRelaysUrl, remote: remoteRelaysUrl } = partitionRelays(orderedRelaysUrl)
-  
+  // Check cache first unless force refresh
+  if (!force) {
+    const cacheKey = highlightCache.urlKey(url)
+    const cached = highlightCache.get(cacheKey)
+    if (cached) {
+      // Stream cached highlights if callback provided
+      if (onHighlight) {
+        cached.forEach(h => onHighlight(h))
+      }
+      return cached
+    }
+  }
   try {
-    const local$ = localRelaysUrl.length > 0
-      ? relayPool
-          .req(localRelaysUrl, { kinds: [9802], '#r': [url] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              seenIds.add(event.id)
-              if (onHighlight) onHighlight(eventToHighlight(event))
-            }),
-            completeOnEose(),
-            takeUntil(timer(1200))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const remote$ = remoteRelaysUrl.length > 0
-      ? relayPool
-          .req(remoteRelaysUrl, { kinds: [9802], '#r': [url] })
-          .pipe(
-            onlyEvents(),
-            tap((event: NostrEvent) => {
-              seenIds.add(event.id)
-              if (onHighlight) onHighlight(eventToHighlight(event))
-            }),
-            completeOnEose(),
-            takeUntil(timer(6000))
-          )
-      : new Observable<NostrEvent>((sub) => sub.complete())
-    const rawEvents: NostrEvent[] = await lastValueFrom(merge(local$, remote$).pipe(toArray()))
-    
-    console.log(`📌 Fetched ${rawEvents.length} highlight events for URL:`, url)
-    
+    const seenIds = new Set<string>()
+    const rawEvents: NostrEvent[] = await queryEvents(
+      relayPool,
+      { kinds: [KINDS.Highlights], '#r': [url] },
+      {
+        onEvent: (event: NostrEvent) => {
+          if (seenIds.has(event.id)) return
+          seenIds.add(event.id)
+          
+          // Store in event store if provided
+          if (eventStore) {
+            eventStore.add(event)
+          }
+          
+          if (onHighlight) onHighlight(eventToHighlight(event))
+        }
+      }
+    )
+
+
+    // Store all events in event store if provided
+    if (eventStore) {
+      rawEvents.forEach(evt => eventStore.add(evt))
+    }
+
     // Rebroadcast events - but don't let errors here break the highlight display
     try {
       await rebroadcastEvents(rawEvents, relayPool, settings)
     } catch (err) {
       console.warn('Failed to rebroadcast highlight events:', err)
     }
-    
+
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
-    return sortHighlights(highlights)
+    const sorted = sortHighlights(highlights)
+    
+    // Cache the results
+    const cacheKey = highlightCache.urlKey(url)
+    highlightCache.set(cacheKey, sorted)
+    
+    return sorted
   } catch (err) {
     console.error('Error fetching highlights for URL:', err)
-    // Return highlights that were already streamed via callback
-    // Don't return empty array as that would clear already-displayed highlights
     return []
   }
 }

src/services/highlights/fetchFromAuthors.ts

@@ -1,5 +1,6 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../../types/highlights'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from '../highlightEventProcessor'
 import { queryEvents } from '../dataFetch'
@@ -9,20 +10,20 @@ import { queryEvents } from '../dataFetch'
  * @param relayPool - The relay pool to query
  * @param pubkeys - Array of pubkeys to fetch highlights from
  * @param onHighlight - Optional callback for streaming highlights as they arrive
+ * @param eventStore - Optional event store to persist events
  * @returns Array of highlights
  */
 export const fetchHighlightsFromAuthors = async (
   relayPool: RelayPool,
   pubkeys: string[],
-  onHighlight?: (highlight: Highlight) => void
+  onHighlight?: (highlight: Highlight) => void,
+  eventStore?: IEventStore
 ): Promise<Highlight[]> => {
   try {
     if (pubkeys.length === 0) {
-      console.log('⚠️ No pubkeys to fetch highlights from')
       return []
     }
 
-    console.log('💡 Fetching highlights (kind 9802) from', pubkeys.length, 'authors')
 
     const seenIds = new Set<string>()
     const rawEvents = await queryEvents(
@@ -32,16 +33,26 @@ export const fetchHighlightsFromAuthors = async (
         onEvent: (event: NostrEvent) => {
           if (!seenIds.has(event.id)) {
             seenIds.add(event.id)
+            
+            // Store in event store if provided
+            if (eventStore) {
+              eventStore.add(event)
+            }
+            
             if (onHighlight) onHighlight(eventToHighlight(event))
           }
         }
       }
     )
 
+    // Store all events in event store if provided
+    if (eventStore) {
+      rawEvents.forEach(evt => eventStore.add(evt))
+    }
+
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights = uniqueEvents.map(eventToHighlight)
     
-    console.log('💡 Processed', highlights.length, 'unique highlights')
     
     return sortHighlights(highlights)
   } catch (error) {

src/services/highlightsController.ts

@@ -0,0 +1,203 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { Highlight } from '../types/highlights'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
+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
+ */
+class HighlightsController {
+  private highlightsListeners: HighlightsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  
+  private currentHighlights: Highlight[] = []
+  private lastLoadedPubkey: string | null = null
+  private generation = 0
+
+  onHighlights(cb: HighlightsCallback): () => void {
+    this.highlightsListeners.push(cb)
+    return () => {
+      this.highlightsListeners = this.highlightsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitHighlights(highlights: Highlight[]): void {
+    this.highlightsListeners.forEach(cb => cb(highlights))
+  }
+
+  /**
+   * Get current highlights without triggering a reload
+   */
+  getHighlights(): Highlight[] {
+    return [...this.currentHighlights]
+  }
+
+  /**
+   * Check if highlights are loaded for a specific pubkey
+   */
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey && this.currentHighlights.length >= 0
+  }
+
+  /**
+   * Reset state (for logout or manual refresh)
+   */
+  reset(): void {
+    this.generation++
+    this.currentHighlights = []
+    this.lastLoadedPubkey = null
+    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
+   */
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, pubkey, force = false } = options
+
+    // Skip if already loaded for this pubkey (unless forced)
+    if (!force && this.isLoadedFor(pubkey)) {
+      this.emitHighlights(this.currentHighlights)
+      return
+    }
+
+    // Increment generation to cancel any in-flight work
+    this.generation++
+    const currentGeneration = this.generation
+
+    this.setLoading(true)
+
+    try {
+      const seenIds = new Set<string>()
+      const highlightsMap = new Map<string, Highlight>()
+
+      // Get last synced timestamp for incremental loading
+      const lastSyncedAt = force ? null : this.getLastSyncedAt(pubkey)
+      const filter: { kinds: number[]; authors: string[]; since?: number } = {
+        kinds: [KINDS.Highlights],
+        authors: [pubkey]
+      }
+      if (lastSyncedAt) {
+        filter.since = lastSyncedAt
+      }
+
+      const events = await queryEvents(
+        relayPool,
+        filter,
+        {
+          onEvent: (evt) => {
+            // Check if this generation is still active
+            if (currentGeneration !== this.generation) return
+
+            if (seenIds.has(evt.id)) return
+            seenIds.add(evt.id)
+
+            // Store in event store immediately
+            eventStore.add(evt)
+
+            // Convert to highlight and add to map
+            const highlight = eventToHighlight(evt)
+            highlightsMap.set(highlight.id, highlight)
+
+            // Stream to listeners
+            const sortedHighlights = sortHighlights(Array.from(highlightsMap.values()))
+            this.currentHighlights = sortedHighlights
+            this.emitHighlights(sortedHighlights)
+          }
+        }
+      )
+
+      // Check if still active after async operation
+      if (currentGeneration !== this.generation) {
+        return
+      }
+
+      // Store all events in event store
+      events.forEach(evt => eventStore.add(evt))
+
+      // Final processing
+      const highlights = events.map(eventToHighlight)
+      const uniqueHighlights = Array.from(
+        new Map(highlights.map(h => [h.id, h])).values()
+      )
+      const sorted = sortHighlights(uniqueHighlights)
+
+      this.currentHighlights = sorted
+      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 = []
+      this.emitHighlights(this.currentHighlights)
+    } finally {
+      // Only clear loading if this generation is still active
+      if (currentGeneration === this.generation) {
+        this.setLoading(false)
+      }
+    }
+  }
+}
+
+// Singleton instance
+export const highlightsController = new HighlightsController()
+

src/services/imageCacheService.ts

@@ -13,7 +13,6 @@ const CACHE_NAME = 'boris-image-cache-v1'
 export async function clearImageCache(): Promise<void> {
   try {
     await caches.delete(CACHE_NAME)
-    console.log('🗑️ Cleared all cached images')
   } catch (err) {
     console.error('Failed to clear image cache:', err)
   }

src/services/libraryService.ts

@@ -1,9 +1,8 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
-import { MARK_AS_READ_EMOJI } from './reactionService'
+import { ARCHIVE_EMOJI } from './reactionService'
 import { BlogPostPreview } from './exploreService'
 import { queryEvents } from './dataFetch'
 
@@ -30,15 +29,15 @@ export async function fetchReadArticles(
   try {
     // Fetch kind:7 and kind:17 reactions in parallel
     const [kind7Events, kind17Events] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }, { relayUrls: RELAYS }),
-      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] }, { relayUrls: RELAYS })
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToEvent], authors: [userPubkey] }),
+      queryEvents(relayPool, { kinds: [KINDS.ReactionToUrl], authors: [userPubkey] })
     ])
 
     const readArticles: ReadArticle[] = []
 
     // Process kind:7 reactions (nostr-native articles)
     for (const event of kind7Events) {
-      if (event.content === MARK_AS_READ_EMOJI) {
+      if (event.content === ARCHIVE_EMOJI) {
         const eTag = event.tags.find((t) => t[0] === 'e')
         const pTag = event.tags.find((t) => t[0] === 'p')
         const kTag = event.tags.find((t) => t[0] === 'k')
@@ -58,7 +57,7 @@ export async function fetchReadArticles(
 
     // Process kind:17 reactions (external URLs)
     for (const event of kind17Events) {
-      if (event.content === MARK_AS_READ_EMOJI) {
+      if (event.content === ARCHIVE_EMOJI) {
         const rTag = event.tags.find((t) => t[0] === 'r')
 
         if (rTag && rTag[1]) {
@@ -115,8 +114,7 @@ export async function fetchReadArticlesWithData(
     
     const articleEvents = await queryEvents(
       relayPool,
-      { kinds: [KINDS.BlogPost], ids: eventIds },
-      { relayUrls: RELAYS }
+      { kinds: [KINDS.BlogPost], ids: eventIds }
     )
 
     // Deduplicate article events by ID

src/services/linksService.ts

@@ -4,12 +4,12 @@ import { queryEvents } from './dataFetch'
 import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
 import { ReadItem } from './readsService'
-import { processReadingPositions, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
+import { processReadingProgress, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
 import { mergeReadItem } from '../utils/readItemMerge'
 
 /**
  * Fetches external URL links with reading progress from:
- * - URLs with reading progress (kind:30078)
+ * - URLs with reading progress (kind:39802)
  * - Manually marked as read URLs (kind:7, kind:17)
  */
 export async function fetchLinks(
@@ -17,7 +17,6 @@ export async function fetchLinks(
   userPubkey: string,
   onItem?: (item: ReadItem) => void
 ): Promise<ReadItem[]> {
-  console.log('🔗 [Links] Fetching external links for user:', userPubkey.slice(0, 8))
   
   const linksMap = new Map<string, ReadItem>()
   
@@ -32,18 +31,13 @@ export async function fetchLinks(
   
   try {
     // Fetch all data sources in parallel
-    const [readingPositionEvents, markedAsReadArticles] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.AppData], authors: [userPubkey] }, { relayUrls: RELAYS }),
+    const [progressEvents, markedAsReadArticles] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [userPubkey] }, { relayUrls: RELAYS }),
       fetchReadArticles(relayPool, userPubkey)
     ])
 
-    console.log('📊 [Links] Data fetched:', {
-      readingPositions: readingPositionEvents.length,
-      markedAsRead: markedAsReadArticles.length
-    })
-
-    // Process reading positions and emit external items
-    processReadingPositions(readingPositionEvents, linksMap)
+    // Process reading progress events (kind 39802)
+    processReadingProgress(progressEvents, linksMap)
     if (onItem) {
       linksMap.forEach(item => {
         if (item.type === 'external') {
@@ -79,7 +73,6 @@ export async function fetchLinks(
     const validLinks = filterValidItems(links)
     const sortedLinks = sortByReadingActivity(validLinks)
 
-    console.log('✅ [Links] Processed', sortedLinks.length, 'total links')
     return sortedLinks
 
   } catch (error) {

src/services/nostrverseHighlightsController.ts

@@ -0,0 +1,139 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { Highlight } from '../types/highlights'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
+import { eventToHighlight, sortHighlights } from './highlightEventProcessor'
+
+type HighlightsCallback = (highlights: Highlight[]) => void
+type LoadingCallback = (loading: boolean) => void
+
+const LAST_SYNCED_KEY = 'nostrverse_highlights_last_synced'
+
+class NostrverseHighlightsController {
+  private highlightsListeners: HighlightsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+
+  private currentHighlights: Highlight[] = []
+  private loaded = false
+  private generation = 0
+
+  onHighlights(cb: HighlightsCallback): () => void {
+    this.highlightsListeners.push(cb)
+    return () => {
+      this.highlightsListeners = this.highlightsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitHighlights(highlights: Highlight[]): void {
+    this.highlightsListeners.forEach(cb => cb(highlights))
+  }
+
+  getHighlights(): Highlight[] {
+    return [...this.currentHighlights]
+  }
+
+  isLoaded(): boolean {
+    return this.loaded
+  }
+
+  private getLastSyncedAt(): number | null {
+    try {
+      const raw = localStorage.getItem(LAST_SYNCED_KEY)
+      if (!raw) return null
+      const parsed = JSON.parse(raw)
+      return typeof parsed?.ts === 'number' ? parsed.ts : null
+    } catch {
+      return null
+    }
+  }
+
+  private setLastSyncedAt(timestamp: number): void {
+    try {
+      localStorage.setItem(LAST_SYNCED_KEY, JSON.stringify({ ts: timestamp }))
+    } catch { /* ignore */ }
+  }
+
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, force = false } = options
+
+    if (!force && this.loaded) {
+      this.emitHighlights(this.currentHighlights)
+      return
+    }
+
+    this.generation++
+    const currentGeneration = this.generation
+    this.setLoading(true)
+
+    try {
+      const seenIds = new Set<string>()
+      const highlightsMap = new Map<string, Highlight>()
+
+      const lastSyncedAt = force ? null : this.getLastSyncedAt()
+      const filter: { kinds: number[]; since?: number } = { kinds: [KINDS.Highlights] }
+      if (lastSyncedAt) filter.since = lastSyncedAt
+
+      const events = await queryEvents(
+        relayPool,
+        filter,
+        {
+          onEvent: (evt) => {
+            if (currentGeneration !== this.generation) return
+            if (seenIds.has(evt.id)) return
+            seenIds.add(evt.id)
+
+            eventStore.add(evt)
+            const highlight = eventToHighlight(evt)
+            highlightsMap.set(highlight.id, highlight)
+
+            const sorted = sortHighlights(Array.from(highlightsMap.values()))
+            this.currentHighlights = sorted
+            this.emitHighlights(sorted)
+          }
+        }
+      )
+
+      if (currentGeneration !== this.generation) return
+
+      events.forEach(evt => eventStore.add(evt))
+
+      const highlights = events.map(eventToHighlight)
+      const unique = Array.from(new Map(highlights.map(h => [h.id, h])).values())
+      const sorted = sortHighlights(unique)
+
+      this.currentHighlights = sorted
+      this.loaded = true
+      this.emitHighlights(sorted)
+
+      if (sorted.length > 0) {
+        const newest = Math.max(...sorted.map(h => h.created_at))
+        this.setLastSyncedAt(newest)
+      }
+    } catch (err) {
+      this.currentHighlights = []
+      this.emitHighlights(this.currentHighlights)
+    } finally {
+      if (currentGeneration === this.generation) this.setLoading(false)
+    }
+  }
+}
+
+export const nostrverseHighlightsController = new NostrverseHighlightsController()
+
+

src/services/nostrverseService.ts

@@ -1,6 +1,6 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
+import { Helpers, IEventStore } from 'applesauce-core'
 import { BlogPostPreview } from './exploreService'
 import { Highlight } from '../types/highlights'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
@@ -13,15 +13,17 @@ const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary
  * @param relayPool - The relay pool to query
  * @param relayUrls - Array of relay URLs to query
  * @param limit - Maximum number of posts to fetch (default: 50)
+ * @param eventStore - Optional event store to persist fetched events
  * @returns Array of blog post previews
  */
 export const fetchNostrverseBlogPosts = async (
   relayPool: RelayPool,
   relayUrls: string[],
-  limit = 50
+  limit = 50,
+  eventStore?: IEventStore,
+  onPost?: (post: BlogPostPreview) => void
 ): Promise<BlogPostPreview[]> => {
   try {
-    console.log('📚 Fetching nostrverse blog posts (kind 30023), limit:', limit)
 
     // Deduplicate replaceable events by keeping the most recent version
     const uniqueEvents = new Map<string, NostrEvent>()
@@ -32,17 +34,34 @@ export const fetchNostrverseBlogPosts = async (
       {
         relayUrls,
         onEvent: (event: NostrEvent) => {
+          // Store in event store 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)
           if (!existing || event.created_at > existing.created_at) {
             uniqueEvents.set(key, event)
+
+            // Stream post immediately if callback provided
+            if (onPost) {
+              const post: BlogPostPreview = {
+                event,
+                title: getArticleTitle(event) || 'Untitled',
+                summary: getArticleSummary(event),
+                image: getArticleImage(event),
+                published: getArticlePublished(event),
+                author: event.pubkey
+              }
+              onPost(post)
+            }
           }
         }
       }
     )
 
-    console.log('📊 Nostrverse blog post events fetched (unique):', uniqueEvents.size)
     
     // Convert to blog post previews and sort by published date (most recent first)
     const blogPosts: BlogPostPreview[] = Array.from(uniqueEvents.values())
@@ -60,7 +79,6 @@ export const fetchNostrverseBlogPosts = async (
         return timeB - timeA // Most recent first
       })
     
-    console.log('📰 Processed', blogPosts.length, 'unique nostrverse blog posts')
     
     return blogPosts
   } catch (error) {
@@ -73,25 +91,44 @@ export const fetchNostrverseBlogPosts = async (
  * Fetches public highlights (kind:9802) from the nostrverse (not filtered by author)
  * @param relayPool - The relay pool to query
  * @param limit - Maximum number of highlights to fetch (default: 100)
+ * @param eventStore - Optional event store to persist fetched events
  * @returns Array of highlights
  */
 export const fetchNostrverseHighlights = async (
   relayPool: RelayPool,
-  limit = 100
+  limit = 100,
+  eventStore?: IEventStore
 ): Promise<Highlight[]> => {
   try {
-    console.log('💡 Fetching nostrverse highlights (kind 9802), limit:', limit)
 
+    const seenIds = new Set<string>()
+    // Collect but do not block callers awaiting network completion
+    const collected: NostrEvent[] = []
     const rawEvents = await queryEvents(
       relayPool,
       { kinds: [9802], limit },
-      {}
+      {
+        onEvent: (event: NostrEvent) => {
+          if (seenIds.has(event.id)) return
+          seenIds.add(event.id)
+          
+          // Store in event store if provided
+          if (eventStore) {
+            eventStore.add(event)
+          }
+          collected.push(event)
+        }
+      }
     )
 
-    const uniqueEvents = dedupeHighlights(rawEvents)
+    // Store all events in event store if provided (in case some were missed in streaming)
+    if (eventStore) {
+      rawEvents.forEach(evt => eventStore.add(evt))
+    }
+
+    const uniqueEvents = dedupeHighlights([...collected, ...rawEvents])
     const highlights = uniqueEvents.map(eventToHighlight)
     
-    console.log('💡 Processed', highlights.length, 'unique nostrverse highlights')
     
     return sortHighlights(highlights)
   } catch (error) {

src/services/nostrverseWritingsController.ts

@@ -0,0 +1,169 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore, Helpers } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { KINDS } from '../config/kinds'
+import { queryEvents } from './dataFetch'
+import { BlogPostPreview } from './exploreService'
+
+const { getArticleTitle, getArticleSummary, getArticleImage, getArticlePublished } = Helpers
+
+type WritingsCallback = (posts: BlogPostPreview[]) => void
+type LoadingCallback = (loading: boolean) => void
+
+const LAST_SYNCED_KEY = 'nostrverse_writings_last_synced'
+
+function toPreview(event: NostrEvent): BlogPostPreview {
+  return {
+    event,
+    title: getArticleTitle(event) || 'Untitled',
+    summary: getArticleSummary(event),
+    image: getArticleImage(event),
+    published: getArticlePublished(event),
+    author: event.pubkey
+  }
+}
+
+function sortPosts(posts: BlogPostPreview[]): BlogPostPreview[] {
+  return posts.slice().sort((a, b) => {
+    const timeA = a.published || a.event.created_at
+    const timeB = b.published || b.event.created_at
+    return timeB - timeA
+  })
+}
+
+class NostrverseWritingsController {
+  private writingsListeners: WritingsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+
+  private currentPosts: BlogPostPreview[] = []
+  private loaded = false
+  private generation = 0
+
+  onWritings(cb: WritingsCallback): () => void {
+    this.writingsListeners.push(cb)
+    return () => {
+      this.writingsListeners = this.writingsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitWritings(posts: BlogPostPreview[]): void {
+    this.writingsListeners.forEach(cb => cb(posts))
+  }
+
+  getWritings(): BlogPostPreview[] {
+    return [...this.currentPosts]
+  }
+
+  isLoaded(): boolean {
+    return this.loaded
+  }
+
+  private getLastSyncedAt(): number | null {
+    try {
+      const raw = localStorage.getItem(LAST_SYNCED_KEY)
+      if (!raw) return null
+      const parsed = JSON.parse(raw)
+      return typeof parsed?.ts === 'number' ? parsed.ts : null
+    } catch {
+      return null
+    }
+  }
+
+  private setLastSyncedAt(ts: number): void {
+    try { localStorage.setItem(LAST_SYNCED_KEY, JSON.stringify({ ts })) } catch { /* ignore */ }
+  }
+
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, force = false } = options
+
+    if (!force && this.loaded) {
+      this.emitWritings(this.currentPosts)
+      return
+    }
+
+    this.generation++
+    const currentGeneration = this.generation
+    this.setLoading(true)
+
+    try {
+      const seenIds = new Set<string>()
+      const uniqueByReplaceable = new Map<string, BlogPostPreview>()
+
+      const lastSyncedAt = force ? null : this.getLastSyncedAt()
+      const filter: { kinds: number[]; since?: number } = { kinds: [KINDS.BlogPost] }
+      if (lastSyncedAt) filter.since = lastSyncedAt
+
+      const events = await queryEvents(
+        relayPool,
+        filter,
+        {
+          onEvent: (evt) => {
+            if (currentGeneration !== this.generation) return
+            if (seenIds.has(evt.id)) return
+            seenIds.add(evt.id)
+
+            eventStore.add(evt)
+
+            const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+            const key = `${evt.pubkey}:${dTag}`
+            const preview = toPreview(evt)
+            const existing = uniqueByReplaceable.get(key)
+            if (!existing || evt.created_at > existing.event.created_at) {
+              uniqueByReplaceable.set(key, preview)
+              const sorted = sortPosts(Array.from(uniqueByReplaceable.values()))
+              this.currentPosts = sorted
+              this.emitWritings(sorted)
+            }
+          }
+        }
+      )
+
+      if (currentGeneration !== this.generation) return
+
+      events.forEach(evt => eventStore.add(evt))
+
+      events.forEach(evt => {
+        const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+        const key = `${evt.pubkey}:${dTag}`
+        const existing = uniqueByReplaceable.get(key)
+        if (!existing || evt.created_at > existing.event.created_at) {
+          uniqueByReplaceable.set(key, toPreview(evt))
+        }
+      })
+
+      const sorted = sortPosts(Array.from(uniqueByReplaceable.values()))
+      this.currentPosts = sorted
+      this.loaded = true
+      this.emitWritings(sorted)
+
+      if (sorted.length > 0) {
+        const newest = Math.max(...sorted.map(p => p.event.created_at))
+        this.setLastSyncedAt(newest)
+      }
+    } catch {
+      this.currentPosts = []
+      this.emitWritings(this.currentPosts)
+    } finally {
+      if (currentGeneration === this.generation) this.setLoading(false)
+    }
+  }
+}
+
+export const nostrverseWritingsController = new NostrverseWritingsController()
+
+

src/services/offlineSyncService.ts

@@ -20,7 +20,6 @@ const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> =
  */
 export function markEventAsOfflineCreated(eventId: string): void {
   offlineCreatedEvents.add(eventId)
-  console.log(`📝 Marked event ${eventId.slice(0, 8)} as offline-created. Total: ${offlineCreatedEvents.size}`)
 }
 
 /**
@@ -57,49 +56,35 @@ export async function syncLocalEventsToRemote(
   eventStore: IEventStore
 ): Promise<void> {
   if (isSyncing) {
-    console.log('⏳ Sync already in progress, skipping...')
     return
   }
 
-  console.log('🔄 Coming back online - syncing local events to remote relays...')
-  console.log(`📦 Offline events tracked: ${offlineCreatedEvents.size}`)
   isSyncing = true
 
   try {
     const remoteRelays = RELAYS.filter(url => !isLocalRelay(url))
 
-    console.log(`📡 Remote relays: ${remoteRelays.length}`)
-    
     if (remoteRelays.length === 0) {
-      console.log('⚠️ No remote relays available for sync')
       isSyncing = false
       return
     }
 
     if (offlineCreatedEvents.size === 0) {
-      console.log('✅ No offline events to sync')
       isSyncing = false
       return
     }
 
     // Get events from EventStore using the tracked IDs
     const eventsToSync: NostrEvent[] = []
-    console.log(`🔍 Querying EventStore for ${offlineCreatedEvents.size} offline events...`)
 
     for (const eventId of offlineCreatedEvents) {
       const event = eventStore.getEvent(eventId)
       if (event) {
-        console.log(`📥 Found event ${eventId.slice(0, 8)} (kind ${event.kind}) in EventStore`)
         eventsToSync.push(event)
-      } else {
-        console.warn(`⚠️ Event ${eventId.slice(0, 8)} not found in EventStore`)
       }
     }
 
-    console.log(`📊 Total events to sync: ${eventsToSync.length}`)
-
     if (eventsToSync.length === 0) {
-      console.log('✅ No events found in EventStore to sync')
       isSyncing = false
       offlineCreatedEvents.clear()
       return
@@ -110,8 +95,6 @@ export async function syncLocalEventsToRemote(
       new Map(eventsToSync.map(e => [e.id, e])).values()
     )
 
-    console.log(`📤 Syncing ${uniqueEvents.length} event(s) to remote relays...`)
-
     // Mark all events as syncing
     uniqueEvents.forEach(event => {
       syncingEvents.add(event.id)
@@ -119,21 +102,16 @@ export async function syncLocalEventsToRemote(
     })
 
     // Publish to remote relays
-    let successCount = 0
     const successfulIds: string[] = []
     
     for (const event of uniqueEvents) {
       try {
         await relayPool.publish(remoteRelays, event)
-        successCount++
         successfulIds.push(event.id)
-        console.log(`✅ Synced event ${event.id.slice(0, 8)}`)
       } catch (error) {
-        console.warn(`⚠️ Failed to sync event ${event.id.slice(0, 8)}:`, error)
+        // Silently fail for individual events
       }
     }
-
-    console.log(`✅ Synced ${successCount}/${uniqueEvents.length} events to remote relays`)
     
     // Clear syncing state and offline tracking for successful events
     successfulIds.forEach(eventId => {
@@ -150,7 +128,7 @@ export async function syncLocalEventsToRemote(
       }
     })
   } catch (error) {
-    console.error('❌ Error during offline sync:', error)
+    // Silently fail
   } finally {
     isSyncing = false
   }

src/services/profileService.ts

@@ -22,7 +22,6 @@ export const fetchProfiles = async (
     }
 
     const uniquePubkeys = Array.from(new Set(pubkeys))
-    console.log('👤 Fetching profiles (kind:0) for', uniquePubkeys.length, 'authors')
 
     const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
     const prioritized = prioritizeLocalRelays(relayUrls)
@@ -65,7 +64,6 @@ export const fetchProfiles = async (
     await lastValueFrom(merge(local$, remote$).pipe(toArray()))
 
     const profiles = Array.from(profilesByPubkey.values())
-    console.log('✅ Fetched', profiles.length, 'unique profiles')
 
     // Rebroadcast profiles to local/all relays based on settings
     if (profiles.length > 0) {

src/services/reactionService.ts

@@ -1,13 +1,13 @@
-import { EventFactory } from 'applesauce-factory'
 import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
 import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
-import { RELAYS } from '../config/relays'
+import { EventFactory } from 'applesauce-factory'
+import { getActiveRelayUrls } from './relayManager'
 
-const MARK_AS_READ_EMOJI = '📚'
+const ARCHIVE_EMOJI = '📚'
 
-export { MARK_AS_READ_EMOJI }
+export { ARCHIVE_EMOJI }
 
 /**
  * Creates a kind:7 reaction to a nostr event (for nostr-native articles)
@@ -23,7 +23,8 @@ export async function createEventReaction(
   eventAuthor: string,
   eventKind: number,
   account: IAccount,
-  relayPool: RelayPool
+  relayPool: RelayPool,
+  options?: { aCoord?: string }
 ): Promise<NostrEvent> {
   const factory = new EventFactory({ signer: account })
 
@@ -32,22 +33,23 @@ export async function createEventReaction(
     ['p', eventAuthor],
     ['k', eventKind.toString()]
   ]
+  if (options?.aCoord) {
+    tags.push(['a', options.aCoord])
+  }
 
   const draft = await factory.create(async () => ({
     kind: 7, // Reaction
-    content: MARK_AS_READ_EMOJI,
+    content: ARCHIVE_EMOJI,
     tags,
     created_at: Math.floor(Date.now() / 1000)
   }))
 
   const signed = await factory.sign(draft)
 
-  console.log('📚 Created kind:7 reaction (mark as read) for event:', eventId.slice(0, 8))
 
   // Publish to relays
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
 
-  console.log('✅ Reaction published to', RELAYS.length, 'relay(s)')
 
   return signed
 }
@@ -87,23 +89,42 @@ export async function createWebsiteReaction(
 
   const draft = await factory.create(async () => ({
     kind: 17, // Reaction to a website
-    content: MARK_AS_READ_EMOJI,
+    content: ARCHIVE_EMOJI,
     tags,
     created_at: Math.floor(Date.now() / 1000)
   }))
 
   const signed = await factory.sign(draft)
 
-  console.log('📚 Created kind:17 reaction (mark as read) for URL:', normalizedUrl)
 
   // Publish to relays
-  await relayPool.publish(RELAYS, signed)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
 
-  console.log('✅ Website reaction published to', RELAYS.length, 'relay(s)')
 
   return signed
 }
 
+/**
+ * Sends a deletion request (NIP-09) for a reaction event to effectively un-archive.
+ * The caller must know the reaction event id to delete.
+ */
+export async function deleteReaction(
+  reactionEventId: string,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<NostrEvent> {
+  const factory = new EventFactory({ signer: account })
+  const draft = await factory.create(async () => ({
+    kind: 5, // Deletion per NIP-09
+    content: 'unarchive',
+    tags: [['e', reactionEventId]],
+    created_at: Math.floor(Date.now() / 1000)
+  }))
+  const signed = await factory.sign(draft)
+  await relayPool.publish(getActiveRelayUrls(relayPool), signed)
+  return signed
+}
+
 /**
  * Checks if the user has already marked a nostr event as read
  * @param eventId The ID of the event to check
@@ -124,7 +145,7 @@ export async function hasMarkedEventAsRead(
     }
 
     const events$ = relayPool
-      .req(RELAYS, filter)
+      .req(getActiveRelayUrls(relayPool), filter)
       .pipe(
         onlyEvents(),
         completeOnEose(),
@@ -134,8 +155,8 @@ export async function hasMarkedEventAsRead(
 
     const events: NostrEvent[] = await lastValueFrom(events$)
     
-    // Check if any reaction has our mark-as-read emoji
-    const hasReadReaction = events.some((event: NostrEvent) => event.content === MARK_AS_READ_EMOJI)
+    // Check if any reaction has our archive emoji
+    const hasReadReaction = events.some((event: NostrEvent) => event.content === ARCHIVE_EMOJI)
     
     return hasReadReaction
   } catch (error) {
@@ -177,7 +198,7 @@ export async function hasMarkedWebsiteAsRead(
     }
 
     const events$ = relayPool
-      .req(RELAYS, filter)
+      .req(getActiveRelayUrls(relayPool), filter)
       .pipe(
         onlyEvents(),
         completeOnEose(),
@@ -187,8 +208,8 @@ export async function hasMarkedWebsiteAsRead(
 
     const events: NostrEvent[] = await lastValueFrom(events$)
     
-    // Check if any reaction has our mark-as-read emoji
-    const hasReadReaction = events.some((event: NostrEvent) => event.content === MARK_AS_READ_EMOJI)
+    // Check if any reaction has our archive emoji
+    const hasReadReaction = events.some((event: NostrEvent) => event.content === ARCHIVE_EMOJI)
     
     return hasReadReaction
   } catch (error) {

src/services/readingDataProcessor.ts

@@ -1,8 +1,9 @@
-import { NostrEvent } from 'nostr-tools'
+import { NostrEvent, nip19 } from 'nostr-tools'
 import { ReadItem } from './readsService'
 import { fallbackTitleFromUrl } from '../utils/readItemMerge'
+import { KINDS } from '../config/kinds'
 
-const READING_POSITION_PREFIX = 'boris:reading-position:'
+const READING_PROGRESS_KIND = KINDS.ReadingProgress // 39802 - NIP-85
 
 interface ReadArticle {
   id: string
@@ -13,44 +14,81 @@ interface ReadArticle {
 }
 
 /**
- * Processes reading position events into ReadItems
+ * Processes reading progress events (kind 39802) into ReadItems
+ * 
+ * Test scenarios:
+ * - Kind 39802 with d="30023:..." → article ReadItem with naddr id
+ * - Kind 39802 with d="url:..." → external ReadItem with decoded URL
+ * - Newer event.created_at overwrites older timestamp
+ * - Invalid d tag format → skip event
+ * - Malformed JSON content → skip event
  */
-export function processReadingPositions(
+export function processReadingProgress(
   events: NostrEvent[],
   readsMap: Map<string, ReadItem>
 ): void {
+  
   for (const event of events) {
+    if (event.kind !== READING_PROGRESS_KIND) {
+      continue
+    }
+    
     const dTag = event.tags.find(t => t[0] === 'd')?.[1]
-    if (!dTag || !dTag.startsWith(READING_POSITION_PREFIX)) continue
-
-    const identifier = dTag.replace(READING_POSITION_PREFIX, '')
+    if (!dTag) {
+      continue
+    }
     
     try {
-      const positionData = JSON.parse(event.content)
-      const position = positionData.position
-      const timestamp = positionData.timestamp
+      const content = JSON.parse(event.content)
+      const position = content.progress || 0
+      
+      // Validate progress is between 0 and 1 (NIP-85 requirement)
+      if (position < 0 || position > 1) {
+        continue
+      }
+      
+      // Use event.created_at as authoritative timestamp (NIP-85 spec)
+      const timestamp = event.created_at
 
       let itemId: string
       let itemUrl: string | undefined
       let itemType: 'article' | 'external' = 'external'
 
-      // Check if it's a nostr article (naddr format)
-      if (identifier.startsWith('naddr1')) {
-        itemId = identifier
-        itemType = 'article'
-      } else {
-        // It's a base64url-encoded URL
+      // Check if d tag is a coordinate (30023:pubkey:identifier)
+      if (dTag.startsWith('30023:')) {
+        // It's a nostr article coordinate
+        const parts = dTag.split(':')
+        if (parts.length === 3) {
+          // Convert to naddr for consistency with the rest of the app
+          try {
+            const naddr = nip19.naddrEncode({
+              kind: parseInt(parts[0]),
+              pubkey: parts[1],
+              identifier: parts[2]
+            })
+            itemId = naddr
+            itemType = 'article'
+          } catch (e) {
+            continue
+          }
+        } else {
+          continue
+        }
+      } else if (dTag.startsWith('url:')) {
+        // It's a URL with base64url encoding
+        const encoded = dTag.replace('url:', '')
         try {
-          itemUrl = atob(identifier.replace(/-/g, '+').replace(/_/g, '/'))
+          itemUrl = atob(encoded.replace(/-/g, '+').replace(/_/g, '/'))
           itemId = itemUrl
           itemType = 'external'
         } catch (e) {
-          console.warn('Failed to decode URL identifier:', identifier)
           continue
         }
+      } else {
+        continue
       }
 
-      // Add or update the item
+      // Add or update the item, preferring newer timestamps
       const existing = readsMap.get(itemId)
       if (!existing || !existing.readingTimestamp || timestamp > existing.readingTimestamp) {
         readsMap.set(itemId, {
@@ -64,7 +102,7 @@ export function processReadingPositions(
         })
       }
     } catch (error) {
-      console.warn('Failed to parse reading position:', error)
+      // Silently fail
     }
   }
 }

src/services/readingPositionService.ts

@@ -1,13 +1,13 @@
 import { IEventStore, mapEventsToStore } from 'applesauce-core'
 import { EventFactory } from 'applesauce-factory'
 import { RelayPool, onlyEvents } from 'applesauce-relay'
-import { NostrEvent } from 'nostr-tools'
+import { NostrEvent, nip19 } from 'nostr-tools'
 import { firstValueFrom } from 'rxjs'
 import { publishEvent } from './writeService'
 import { RELAYS } from '../config/relays'
+import { KINDS } from '../config/kinds'
 
-const APP_DATA_KIND = 30078 // NIP-78 Application Data
-const READING_POSITION_PREFIX = 'boris:reading-position:'
+const READING_PROGRESS_KIND = KINDS.ReadingProgress // 39802 - NIP-85 Reading Progress
 
 export interface ReadingPosition {
   position: number // 0-1 scroll progress
@@ -15,16 +15,79 @@ export interface ReadingPosition {
   scrollTop?: number // Optional: pixel position
 }
 
-// Helper to extract and parse reading position from an event
-function getReadingPositionContent(event: NostrEvent): ReadingPosition | undefined {
+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)
+function getReadingProgressContent(event: NostrEvent): ReadingPosition | undefined {
   if (!event.content || event.content.length === 0) return undefined
   try {
-    return JSON.parse(event.content) as ReadingPosition
+    const content = JSON.parse(event.content) as ReadingProgressContent
+    return {
+      position: content.progress,
+      timestamp: content.ts || event.created_at,
+      scrollTop: content.loc
+    }
   } catch {
     return undefined
   }
 }
 
+// Generate d tag for kind 39802 based on target
+// Test cases:
+// - naddr1... → "30023:<pubkey>:<identifier>"
+// - https://example.com/post → "url:<base64url>"
+// - Invalid naddr → "url:<base64url>" (fallback)
+function generateDTag(naddrOrUrl: string): string {
+  // If it's a nostr article (naddr format), decode and build coordinate
+  if (naddrOrUrl.startsWith('naddr1')) {
+    try {
+      const decoded = nip19.decode(naddrOrUrl)
+      if (decoded.type === 'naddr') {
+        const dTag = `${decoded.data.kind}:${decoded.data.pubkey}:${decoded.data.identifier || ''}`
+        return dTag
+      }
+    } catch (e) {
+      // Ignore decode errors
+    }
+  }
+  
+  // For URLs, use url: prefix with base64url encoding
+  const base64url = btoa(naddrOrUrl)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '')
+  return `url:${base64url}`
+}
+
+// Generate tags for kind 39802 event
+function generateProgressTags(naddrOrUrl: string): string[][] {
+  const dTag = generateDTag(naddrOrUrl)
+  const tags: string[][] = [['d', dTag]]
+  
+  // Add 'a' tag for nostr articles
+  if (naddrOrUrl.startsWith('naddr1')) {
+    try {
+      const decoded = nip19.decode(naddrOrUrl)
+      if (decoded.type === 'naddr') {
+        const coordinate = `${decoded.data.kind}:${decoded.data.pubkey}:${decoded.data.identifier || ''}`
+        tags.push(['a', coordinate])
+      }
+    } catch (e) {
+      // Ignore decode errors
+    }
+  } else {
+    // Add 'r' tag for URLs
+    tags.push(['r', naddrOrUrl])
+  }
+  
+  return tags
+}
+
 /**
  * Generate a unique identifier for an article
  * For Nostr articles: use the naddr directly
@@ -43,7 +106,7 @@ export function generateArticleIdentifier(naddrOrUrl: string): string {
 }
 
 /**
- * Save reading position to Nostr (Kind 30078)
+ * Save reading position to Nostr (kind 39802)
  */
 export async function saveReadingPosition(
   relayPool: RelayPool,
@@ -52,36 +115,31 @@ export async function saveReadingPosition(
   articleIdentifier: string,
   position: ReadingPosition
 ): Promise<void> {
-  console.log('💾 [ReadingPosition] Saving position:', {
-    identifier: articleIdentifier.slice(0, 32) + '...',
-    position: position.position,
-    positionPercent: Math.round(position.position * 100) + '%',
-    timestamp: position.timestamp,
-    scrollTop: position.scrollTop
-  })
-
-  const dTag = `${READING_POSITION_PREFIX}${articleIdentifier}`
+  const now = Math.floor(Date.now() / 1000)
 
+  const progressContent: ReadingProgressContent = {
+    progress: position.position,
+    ts: position.timestamp,
+    loc: position.scrollTop,
+    ver: '1'
+  }
+  
+  const tags = generateProgressTags(articleIdentifier)
+  
   const draft = await factory.create(async () => ({
-    kind: APP_DATA_KIND,
-    content: JSON.stringify(position),
-    tags: [
-      ['d', dTag],
-      ['client', 'boris']
-    ],
-    created_at: Math.floor(Date.now() / 1000)
+    kind: READING_PROGRESS_KIND,
+    content: JSON.stringify(progressContent),
+    tags,
+    created_at: now
   }))
 
   const signed = await factory.sign(draft)
-
-  // Use unified write service
+  
   await publishEvent(relayPool, eventStore, signed)
-
-  console.log('✅ [ReadingPosition] Position saved successfully, event ID:', signed.id.slice(0, 8))
 }
 
 /**
- * Load reading position from Nostr
+ * Load reading position from Nostr (kind 39802)
  */
 export async function loadReadingPosition(
   relayPool: RelayPool,
@@ -89,32 +147,20 @@ export async function loadReadingPosition(
   pubkey: string,
   articleIdentifier: string
 ): Promise<ReadingPosition | null> {
-  const dTag = `${READING_POSITION_PREFIX}${articleIdentifier}`
+  const dTag = generateDTag(articleIdentifier)
 
-  console.log('📖 [ReadingPosition] Loading position:', {
-    pubkey: pubkey.slice(0, 8) + '...',
-    identifier: articleIdentifier.slice(0, 32) + '...',
-    dTag: dTag.slice(0, 50) + '...'
-  })
-
-  // First, check if we already have the position in the local event store
+  // Check local event store first
   try {
     const localEvent = await firstValueFrom(
-      eventStore.replaceable(APP_DATA_KIND, pubkey, dTag)
+      eventStore.replaceable(READING_PROGRESS_KIND, pubkey, dTag)
     )
     if (localEvent) {
-      const content = getReadingPositionContent(localEvent)
+      const content = getReadingProgressContent(localEvent)
       if (content) {
-        console.log('✅ [ReadingPosition] Loaded from local store:', {
-          position: content.position,
-          positionPercent: Math.round(content.position * 100) + '%',
-          timestamp: content.timestamp
-        })
-        
-        // Still fetch from relays in the background to get any updates
+        // Fetch from relays in background to get any updates
         relayPool
           .subscription(RELAYS, {
-            kinds: [APP_DATA_KIND],
+            kinds: [READING_PROGRESS_KIND],
             authors: [pubkey],
             '#d': [dTag]
           })
@@ -125,23 +171,43 @@ export async function loadReadingPosition(
       }
     }
   } catch (err) {
-    console.log('📭 No cached reading position found, fetching from relays...')
+    // Ignore errors and fetch from relays
   }
 
-  // If not in local store, fetch from relays
+  // Fetch from relays
+  const result = await fetchFromRelays(
+    relayPool,
+    eventStore,
+    pubkey,
+    READING_PROGRESS_KIND,
+    dTag,
+    getReadingProgressContent
+  )
+  
+  return result || null
+}
+
+// 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) {
-        console.log('⏱️ Reading position load timeout - no position found')
         hasResolved = true
         resolve(null)
       }
-    }, 3000) // Shorter timeout for reading positions
+    }, 3000)
 
     const sub = relayPool
       .subscription(RELAYS, {
-        kinds: [APP_DATA_KIND],
+        kinds: [kind],
         authors: [pubkey],
         '#d': [dTag]
       })
@@ -153,33 +219,20 @@ export async function loadReadingPosition(
             hasResolved = true
             try {
               const event = await firstValueFrom(
-                eventStore.replaceable(APP_DATA_KIND, pubkey, dTag)
+                eventStore.replaceable(kind, pubkey, dTag)
               )
               if (event) {
-                const content = getReadingPositionContent(event)
-                if (content) {
-                  console.log('✅ [ReadingPosition] Loaded from relays:', {
-                    position: content.position,
-                    positionPercent: Math.round(content.position * 100) + '%',
-                    timestamp: content.timestamp
-                  })
-                  resolve(content)
-                } else {
-                  console.log('⚠️ [ReadingPosition] Event found but no valid content')
-                  resolve(null)
-                }
+                const content = parser(event)
+                resolve(content || null)
               } else {
-                console.log('📭 [ReadingPosition] No position found on relays')
                 resolve(null)
               }
             } catch (err) {
-              console.error('❌ Error loading reading position:', err)
               resolve(null)
             }
           }
         },
-        error: (err) => {
-          console.error('❌ Reading position subscription error:', err)
+        error: () => {
           clearTimeout(timeout)
           if (!hasResolved) {
             hasResolved = true

src/services/readingProgressController.ts

@@ -0,0 +1,374 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+import { KINDS } from '../config/kinds'
+import { processReadingProgress } from './readingDataProcessor'
+import { ReadItem } from './readsService'
+import { ARCHIVE_EMOJI } from './reactionService'
+import { nip19 } from 'nostr-tools'
+
+
+type ProgressMapCallback = (progressMap: Map<string, number>) => void
+type LoadingCallback = (loading: boolean) => void
+
+const LAST_SYNCED_KEY = 'reading_progress_last_synced'
+const PROGRESS_CACHE_KEY = 'reading_progress_cache_v1'
+
+/**
+ * Shared reading progress controller
+ * Manages the user's reading progress (kind:39802) centrally
+ */
+class ReadingProgressController {
+  private progressListeners: ProgressMapCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  private markedAsReadListeners: (() => void)[] = []
+  
+  private currentProgressMap: Map<string, number> = new Map()
+  private markedAsReadIds: Set<string> = new Set()
+  private lastLoadedPubkey: string | null = null
+  private generation = 0
+  private timelineSubscription: { unsubscribe: () => void } | null = null
+  private isLoading = false
+
+  onProgress(cb: ProgressMapCallback): () => void {
+    this.progressListeners.push(cb)
+    return () => {
+      this.progressListeners = this.progressListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  onMarkedAsReadChanged(cb: () => void): () => void {
+    this.markedAsReadListeners.push(cb)
+    return () => {
+      this.markedAsReadListeners = this.markedAsReadListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitProgress(progressMap: Map<string, number>): void {
+    this.progressListeners.forEach(cb => cb(new Map(progressMap)))
+  }
+
+  private emitMarkedAsReadChanged(): void {
+    this.markedAsReadListeners.forEach(cb => cb())
+  }
+
+  /**
+   * Get current reading progress map without triggering a reload
+   */
+  getProgressMap(): Map<string, number> {
+    return new Map(this.currentProgressMap)
+  }
+
+  /**
+   * Load cached progress from localStorage for a pubkey
+   */
+  private loadCachedProgress(pubkey: string): Map<string, number> {
+    try {
+      const raw = localStorage.getItem(PROGRESS_CACHE_KEY)
+      if (!raw) return new Map()
+      const parsed = JSON.parse(raw) as Record<string, Record<string, number>>
+      const forUser = parsed[pubkey] || {}
+      return new Map(Object.entries(forUser))
+    } catch {
+      return new Map()
+    }
+  }
+
+  /**
+   * Save current progress map to localStorage for the active pubkey
+   */
+  private persistProgress(pubkey: string, progressMap: Map<string, number>): void {
+    try {
+      const raw = localStorage.getItem(PROGRESS_CACHE_KEY)
+      const parsed: Record<string, Record<string, number>> = raw ? JSON.parse(raw) : {}
+      parsed[pubkey] = Object.fromEntries(progressMap.entries())
+      localStorage.setItem(PROGRESS_CACHE_KEY, JSON.stringify(parsed))
+    } catch (err) {
+      // Silently fail cache persistence
+    }
+  }
+
+  /**
+   * Get progress for a specific article by naddr
+   */
+  getProgress(naddr: string): number | undefined {
+    return this.currentProgressMap.get(naddr)
+  }
+
+  /**
+   * Check if article is marked as read
+   */
+  isMarkedAsRead(naddr: string): boolean {
+    return this.markedAsReadIds.has(naddr)
+  }
+
+  /**
+   * Get all marked as read IDs (for debugging)
+   */
+  getMarkedAsReadIds(): string[] {
+    return Array.from(this.markedAsReadIds)
+  }
+
+  /**
+   * Check if reading progress is loaded for a specific pubkey
+   */
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey
+  }
+
+  /**
+   * Reset state (for logout or manual refresh)
+   */
+  reset(): void {
+    this.generation++
+    // Unsubscribe from any active timeline subscription
+    if (this.timelineSubscription) {
+      try {
+        this.timelineSubscription.unsubscribe()
+      } catch (err) {
+        // Silently fail on unsubscribe
+      }
+      this.timelineSubscription = null
+    }
+    this.currentProgressMap = new Map()
+    this.markedAsReadIds = new Set()
+    this.lastLoadedPubkey = null
+    this.emitProgress(this.currentProgressMap)
+  }
+
+  /**
+   * Update last synced timestamp
+   */
+  private updateLastSyncedAt(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) {
+      // Silently fail
+    }
+  }
+
+  /**
+   * Load and watch reading progress for a user
+   */
+  async start(params: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, pubkey, force = false } = params
+    const startGeneration = this.generation
+
+
+    // Skip if already loaded for this pubkey and not forcing
+    if (!force && this.isLoadedFor(pubkey)) {
+      return
+    }
+
+    // Prevent concurrent starts
+    if (this.isLoading) {
+      return
+    }
+
+    this.setLoading(true)
+    this.isLoading = true
+
+    try {
+      // Seed from local cache immediately (survives refresh/flight mode)
+      const cached = this.loadCachedProgress(pubkey)
+      if (cached.size > 0) {
+        this.currentProgressMap = cached
+        this.emitProgress(this.currentProgressMap)
+      }
+
+      // Subscribe to local eventStore timeline for immediate and reactive updates
+      // This handles both local writes and synced events from relays
+      if (this.timelineSubscription) {
+        try {
+          this.timelineSubscription.unsubscribe()
+        } catch (err) {
+          // Silently fail
+        }
+        this.timelineSubscription = null
+      }
+
+      const timeline$ = eventStore.timeline({
+        kinds: [KINDS.ReadingProgress],
+        authors: [pubkey]
+      })
+      const generationAtSubscribe = this.generation
+      this.timelineSubscription = timeline$.subscribe((localEvents: NostrEvent[]) => {
+        if (generationAtSubscribe !== this.generation) return
+        if (!Array.isArray(localEvents) || localEvents.length === 0) return
+        this.processEvents(localEvents)
+      })
+
+      // Mark as loaded immediately - queries run in background non-blocking
+      this.lastLoadedPubkey = pubkey
+
+      // Query reading progress from relays in background (non-blocking, fire-and-forget)
+      queryEvents(relayPool, {
+        kinds: [KINDS.ReadingProgress],
+        authors: [pubkey]
+      })
+        .then((relayEvents) => {
+          if (startGeneration !== this.generation) return
+          if (relayEvents.length > 0) {
+            relayEvents.forEach(e => eventStore.add(e))
+            this.processEvents(relayEvents)
+            const now = Math.floor(Date.now() / 1000)
+            this.updateLastSyncedAt(pubkey, now)
+          }
+        })
+        .catch((err) => {
+          console.warn('[readingProgress] Background reading progress query failed:', err)
+        })
+
+      // Load mark-as-read reactions in background (non-blocking, streaming)
+      this.loadMarkAsReadReactions(relayPool, eventStore, pubkey, startGeneration)
+        .then(() => {
+        })
+        .catch((err) => {
+          console.warn('[readingProgress] Mark-as-read reactions loading failed:', err)
+        })
+
+    } catch (err) {
+      console.error('📊 [ReadingProgress] Failed to setup:', err)
+    } finally {
+      if (startGeneration === this.generation) {
+        this.setLoading(false)
+      }
+      this.isLoading = false
+    }
+  }
+
+  /**
+   * Process events and update progress map
+   */
+  private processEvents(events: NostrEvent[]): void {
+    const readsMap = new Map<string, ReadItem>()
+    
+    // Merge with existing progress
+    for (const [id, progress] of this.currentProgressMap.entries()) {
+      readsMap.set(id, {
+        id,
+        source: 'reading-progress',
+        type: 'article',
+        readingProgress: progress
+      })
+    }
+    
+    // Process new events
+    processReadingProgress(events, readsMap)
+    
+    // Convert back to progress map (naddr -> progress)
+    const newProgressMap = new Map<string, number>()
+    for (const [id, item] of readsMap.entries()) {
+      if (item.readingProgress !== undefined && item.type === 'article') {
+        newProgressMap.set(id, item.readingProgress)
+      }
+    }
+    
+    this.currentProgressMap = newProgressMap
+    this.emitProgress(this.currentProgressMap)
+
+    // Persist for current user so it survives refresh/flight mode
+    if (this.lastLoadedPubkey) {
+      this.persistProgress(this.lastLoadedPubkey, this.currentProgressMap)
+    }
+  }
+
+  /**
+   * Load mark-as-read reactions in background (non-blocking)
+   */
+  private async loadMarkAsReadReactions(
+    relayPool: RelayPool,
+    _eventStore: IEventStore,
+    pubkey: string,
+    generation: number
+  ): Promise<void> {
+    try {
+      // Stream kind:17 (URL reactions) and kind:7 (event reactions) in parallel
+      const seenReactionIds = new Set<string>()
+
+      const handleUrlReaction = (evt: NostrEvent) => {
+        if (seenReactionIds.has(evt.id)) return
+        seenReactionIds.add(evt.id)
+        if (evt.content !== ARCHIVE_EMOJI) return
+        const rTag = evt.tags.find(t => t[0] === 'r')?.[1]
+        if (!rTag) return
+        this.markedAsReadIds.add(rTag)
+        this.emitMarkedAsReadChanged()
+      }
+
+      const pendingEventIds = new Set<string>()
+      const handleEventReaction = (evt: NostrEvent) => {
+        if (seenReactionIds.has(evt.id)) return
+        seenReactionIds.add(evt.id)
+        if (evt.content !== ARCHIVE_EMOJI) return
+        const eTag = evt.tags.find(t => t[0] === 'e')?.[1]
+        if (!eTag) return
+        pendingEventIds.add(eTag)
+      }
+
+      // Fire queries with onEvent callbacks for streaming behavior
+      const [kind17Events, kind7Events] = await Promise.all([
+        queryEvents(relayPool, { kinds: [17], authors: [pubkey] }, { onEvent: handleUrlReaction }),
+        queryEvents(relayPool, { kinds: [7], authors: [pubkey] }, { onEvent: handleEventReaction })
+      ])
+
+      if (generation !== this.generation) return
+
+      // Include any reactions that arrived only at EOSE
+      kind17Events.forEach(handleUrlReaction)
+      kind7Events.forEach(handleEventReaction)
+
+      if (pendingEventIds.size > 0) {
+        // Fetch referenced 30023 events, streaming not required here
+        const ids = Array.from(pendingEventIds)
+        const articleEvents = await queryEvents(relayPool, { kinds: [KINDS.BlogPost], ids })
+        const eventIdToNaddr = new Map<string, string>()
+        for (const article of articleEvents) {
+          const dTag = article.tags.find(t => t[0] === 'd')?.[1]
+          if (!dTag) continue
+          try {
+            const naddr = nip19.naddrEncode({ kind: KINDS.BlogPost, pubkey: article.pubkey, identifier: dTag })
+            eventIdToNaddr.set(article.id, naddr)
+          } catch (e) {
+            console.warn('[readingProgress] Failed to encode naddr for article:', article.id)
+          }
+        }
+
+        // Map pending event IDs to naddrs and emit
+        for (const eId of pendingEventIds) {
+          const naddr = eventIdToNaddr.get(eId)
+          if (naddr) {
+            this.markedAsReadIds.add(naddr)
+          }
+        }
+        this.emitMarkedAsReadChanged()
+      }
+
+    } catch (err) {
+      console.warn('[readingProgress] Failed to load mark-as-read reactions:', err)
+    }
+  }
+}
+
+export const readingProgressController = new ReadingProgressController()
+

src/services/readsController.ts

@@ -0,0 +1,276 @@
+import { RelayPool } from 'applesauce-relay'
+import { Helpers, IEventStore } from 'applesauce-core'
+import { createAddressLoader } from 'applesauce-loaders/loaders'
+import { NostrEvent } from 'nostr-tools'
+import { nip19 } from 'nostr-tools'
+import { merge } from 'rxjs'
+import { KINDS } from '../config/kinds'
+import { RELAYS } from '../config/relays'
+import { readingProgressController } from './readingProgressController'
+import { archiveController } from './archiveController'
+
+const { getArticleTitle, getArticleSummary, getArticleImage, getArticlePublished } = Helpers
+
+export interface ReadItem {
+  id: string // naddr coordinate
+  source: 'reading-progress' | 'marked-as-read' | 'bookmark'
+  type: 'article' | 'external'
+  
+  // Article data
+  event?: NostrEvent
+  url?: string
+  title?: string
+  summary?: string
+  image?: string
+  published?: number
+  author?: string
+  
+  // Reading metadata
+  readingProgress?: number // 0-1
+  readingTimestamp?: number // Unix timestamp of last reading activity
+  markedAsRead?: boolean
+  markedAt?: number
+}
+
+type ReadsCallback = (reads: ReadItem[]) => void
+type LoadingCallback = (loading: boolean) => void
+
+/**
+ * Reads controller - manages read articles with progressive hydration
+ * Follows the same pattern as bookmarkController
+ */
+class ReadsController {
+  private readsListeners: ReadsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  
+  private currentReads: Map<string, ReadItem> = new Map()
+  private isLoading = false
+  private hydrationGeneration = 0
+  
+  // Address loader for efficient batching
+  private addressLoader: ReturnType<typeof createAddressLoader> | null = null
+  private eventStore: IEventStore | null = null
+
+  onReads(cb: ReadsCallback): () => void {
+    this.readsListeners.push(cb)
+    return () => {
+      this.readsListeners = this.readsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  reset(): void {
+    this.hydrationGeneration++
+    this.currentReads.clear()
+    this.setLoading(false)
+  }
+
+  private setLoading(loading: boolean): void {
+    if (this.isLoading !== loading) {
+      this.isLoading = loading
+      this.loadingListeners.forEach(cb => cb(loading))
+    }
+  }
+
+  getReads(): ReadItem[] {
+    return Array.from(this.currentReads.values())
+  }
+
+  /**
+   * Hydrate article events by coordinates using AddressLoader (auto-batching, streaming)
+   */
+  private hydrateArticles(
+    coordinates: string[],
+    onProgress: () => void,
+    generation: number
+  ): void {
+    if (!this.addressLoader) {
+      return
+    }
+
+    if (coordinates.length === 0) return
+
+    // Parse coordinates into pointers
+    const pointers: Array<{ kind: number; pubkey: string; identifier: string }> = []
+    
+    for (const coord of coordinates) {
+      try {
+        // Decode naddr to get article coordinates
+        if (coord.startsWith('naddr1')) {
+          const decoded = nip19.decode(coord)
+          if (decoded.type === 'naddr' && decoded.data.kind === KINDS.BlogPost) {
+            pointers.push({
+              kind: decoded.data.kind,
+              pubkey: decoded.data.pubkey,
+              identifier: decoded.data.identifier || ''
+            })
+          }
+        }
+      } catch (e) {
+        console.warn('Failed to decode article coordinate:', coord)
+      }
+    }
+
+    if (pointers.length === 0) return
+
+    // Use AddressLoader - it auto-batches and streams results
+    merge(...pointers.map(this.addressLoader)).subscribe({
+      next: (event) => {
+        // Check if hydration was cancelled
+        if (this.hydrationGeneration !== generation) return
+
+        const dTag = event.tags?.find((t: string[]) => t[0] === 'd')?.[1] || ''
+        
+        // Build naddr from event
+        try {
+          const naddr = nip19.naddrEncode({
+            kind: event.kind,
+            pubkey: event.pubkey,
+            identifier: dTag
+          })
+
+          const item = this.currentReads.get(naddr)
+          if (item) {
+            // Enrich the item with article data
+            item.event = event
+            item.title = getArticleTitle(event) || 'Untitled'
+            item.summary = getArticleSummary(event)
+            item.image = getArticleImage(event)
+            item.published = getArticlePublished(event)
+            item.author = event.pubkey
+            
+            // Store in event store if available
+            if (this.eventStore) {
+              this.eventStore.add(event)
+            }
+            
+            onProgress()
+          }
+        } catch (e) {
+          console.warn('Failed to encode naddr for event:', event.id)
+        }
+      },
+      error: () => {
+        // Silent error - AddressLoader handles retries
+      }
+    })
+  }
+
+  /**
+   * Build ReadItems from reading progress and emit them
+   */
+  private buildAndEmitReads(): void {
+    const progressMap = readingProgressController.getProgressMap()
+    const markedIds = Array.from(new Set([
+      ...readingProgressController.getMarkedAsReadIds(),
+      ...archiveController.getMarkedIds()
+    ]))
+
+    // Build read items from progress map
+    const readItems: ReadItem[] = []
+    
+    for (const [id, progress] of progressMap.entries()) {
+      const existing = this.currentReads.get(id)
+      const item: ReadItem = existing || {
+        id,
+        source: 'reading-progress',
+        type: 'article',
+        readingProgress: progress,
+        readingTimestamp: Math.floor(Date.now() / 1000)
+      }
+      
+      // Update progress
+      item.readingProgress = progress
+      item.markedAsRead = markedIds.includes(id)
+      
+      readItems.push(item)
+      this.currentReads.set(id, item)
+    }
+
+    // Include items that are only marked-as-read (no progress event yet)
+    for (const id of markedIds) {
+      if (!this.currentReads.has(id) && id.startsWith('naddr1')) {
+        const item: ReadItem = {
+          id,
+          source: 'marked-as-read',
+          type: 'article',
+          markedAsRead: true,
+          readingTimestamp: Math.floor(Date.now() / 1000)
+        }
+        readItems.push(item)
+        this.currentReads.set(id, item)
+      }
+    }
+
+    // Emit current state (items without article data yet)
+    this.readsListeners.forEach(cb => cb(Array.from(this.currentReads.values())))
+
+    // Fetch missing articles in background (progressive hydration)
+    const generation = this.hydrationGeneration
+    const onProgress = () => {
+      this.readsListeners.forEach(cb => cb(Array.from(this.currentReads.values())))
+    }
+
+    const coordinatesToFetch = readItems
+      .filter(item => !item.event && item.type === 'article')
+      .map(item => item.id)
+
+    this.hydrateArticles(coordinatesToFetch, onProgress, generation)
+  }
+
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+  }): Promise<void> {
+    const { relayPool, eventStore } = options
+
+    // Increment generation to cancel any in-flight hydration
+    this.hydrationGeneration++
+    this.eventStore = eventStore
+    
+    // Initialize loader for this session
+    this.addressLoader = createAddressLoader(relayPool, { 
+      eventStore,
+      extraRelays: RELAYS
+    })
+    
+    this.setLoading(true)
+
+    try {
+      // Subscribe to reading progress changes
+      const unsubProgress = readingProgressController.onProgress(() => {
+        this.buildAndEmitReads()
+      })
+
+      const unsubMarked = archiveController.onMarked(() => {
+        this.buildAndEmitReads()
+      })
+
+      // Build initial reads
+      this.buildAndEmitReads()
+
+      // Cleanup subscriptions on next start
+      setTimeout(() => {
+        unsubProgress()
+        unsubMarked()
+      }, 0)
+
+    } catch (error) {
+      console.error('Failed to load reads:', error)
+      this.readsListeners.forEach(cb => cb([]))
+    } finally {
+      this.setLoading(false)
+    }
+  }
+}
+
+// Singleton instance
+export const readsController = new ReadsController()
+

src/services/readsService.ts

@@ -1,43 +1,25 @@
 import { RelayPool } from 'applesauce-relay'
-import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { Bookmark } from '../types/bookmarks'
 import { fetchReadArticles } from './libraryService'
 import { queryEvents } from './dataFetch'
-import { RELAYS } from '../config/relays'
 import { KINDS } from '../config/kinds'
 import { classifyBookmarkType } from '../utils/bookmarkTypeClassifier'
 import { nip19 } from 'nostr-tools'
-import { processReadingPositions, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
+import { AddressPointer } from 'nostr-tools/nip19'
+import { processReadingProgress, processMarkedAsRead, filterValidItems, sortByReadingActivity } from './readingDataProcessor'
 import { mergeReadItem } from '../utils/readItemMerge'
+import type { ReadItem } from './readsController'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
-export interface ReadItem {
-  id: string // event ID or URL or coordinate
-  source: 'bookmark' | 'reading-progress' | 'marked-as-read'
-  type: 'article' | 'external' // article=kind:30023, external=URL
-  
-  // Article data
-  event?: NostrEvent
-  url?: string
-  title?: string
-  summary?: string
-  image?: string
-  published?: number
-  author?: string
-  
-  // Reading metadata
-  readingProgress?: number // 0-1
-  readingTimestamp?: number // Unix timestamp of last reading activity
-  markedAsRead?: boolean
-  markedAt?: number
-}
+// Re-export ReadItem from readsController for consistency
+export type { ReadItem } from './readsController'
 
 /**
  * Fetches all reads from multiple sources:
  * - Bookmarked articles (kind:30023) and article/website URLs
- * - Articles/URLs with reading progress (kind:30078)
+ * - Articles/URLs with reading progress (kind:39802)
  * - Manually marked as read articles/URLs (kind:7, kind:17)
  */
 export async function fetchAllReads(
@@ -46,7 +28,6 @@ export async function fetchAllReads(
   bookmarks: Bookmark[],
   onItem?: (item: ReadItem) => void
 ): Promise<ReadItem[]> {
-  console.log('📚 [Reads] Fetching all reads for user:', userPubkey.slice(0, 8))
   
   const readsMap = new Map<string, ReadItem>()
   
@@ -61,30 +42,19 @@ export async function fetchAllReads(
   
   try {
     // Fetch all data sources in parallel
-    const [readingPositionEvents, markedAsReadArticles] = await Promise.all([
-      queryEvents(relayPool, { kinds: [KINDS.AppData], authors: [userPubkey] }, { relayUrls: RELAYS }),
+    const [progressEvents, markedAsReadArticles] = await Promise.all([
+      queryEvents(relayPool, { kinds: [KINDS.ReadingProgress], authors: [userPubkey] }),
       fetchReadArticles(relayPool, userPubkey)
     ])
 
-    console.log('📊 [Reads] Data fetched:', {
-      readingPositions: readingPositionEvents.length,
-      markedAsRead: markedAsReadArticles.length,
-      bookmarks: bookmarks.length
-    })
-
-    // Process reading positions and emit items
-    processReadingPositions(readingPositionEvents, readsMap)
-    if (onItem) {
-      readsMap.forEach(item => {
-        if (item.type === 'article') onItem(item)
-      })
-    }
+    // Process reading progress events (kind 39802)
+    processReadingProgress(progressEvents, readsMap)
     
     // Process marked-as-read and emit items
     processMarkedAsRead(markedAsReadArticles, readsMap)
     if (onItem) {
       readsMap.forEach(item => {
-        if (item.type === 'article') onItem(item)
+        onItem(item)
       })
     }
 
@@ -120,7 +90,6 @@ export async function fetchAllReads(
       .map(item => item.id)
 
     if (articleCoordinates.length > 0) {
-      console.log('📖 [Reads] Fetching article events for', articleCoordinates.length, 'articles')
       
       // Parse coordinates and fetch events
       const articlesToFetch: Array<{ pubkey: string; identifier: string }> = []
@@ -130,11 +99,14 @@ export async function fetchAllReads(
           // Try to decode as naddr
           if (coord.startsWith('naddr1')) {
             const decoded = nip19.decode(coord)
-            if (decoded.type === 'naddr' && decoded.data.kind === KINDS.BlogPost) {
-              articlesToFetch.push({
-                pubkey: decoded.data.pubkey,
-                identifier: decoded.data.identifier || ''
-              })
+            if (decoded.type === 'naddr') {
+              const data = decoded.data as AddressPointer
+              if (data.kind === KINDS.BlogPost) {
+                articlesToFetch.push({
+                  pubkey: data.pubkey,
+                  identifier: data.identifier || ''
+                })
+              }
             }
           } else {
             // Try coordinate format (kind:pubkey:identifier)
@@ -157,8 +129,7 @@ export async function fetchAllReads(
         
         const events = await queryEvents(
           relayPool,
-          { kinds: [KINDS.BlogPost], authors, '#d': identifiers },
-          { relayUrls: RELAYS }
+          { kinds: [KINDS.BlogPost], authors, '#d': identifiers }
         )
 
         // Merge event data into ReadItems and emit
@@ -187,7 +158,6 @@ export async function fetchAllReads(
     const validArticles = filterValidItems(articles)
     const sortedReads = sortByReadingActivity(validArticles)
 
-    console.log('✅ [Reads] Processed', sortedReads.length, 'total reads')
     return sortedReads
 
   } catch (error) {

src/services/rebroadcastService.ts

@@ -34,7 +34,6 @@ export async function rebroadcastEvents(
   
   // If we're in flight mode (only local relays connected) and user wants to broadcast to all relays, skip
   if (broadcastToAll && !hasRemoteConnection) {
-    console.log('✈️ Flight mode: skipping rebroadcast to remote relays')
     return
   }
 
@@ -50,7 +49,6 @@ export async function rebroadcastEvents(
   }
 
   if (targetRelays.length === 0) {
-    console.log('📡 No target relays for rebroadcast')
     return
   }
 
@@ -58,7 +56,6 @@ export async function rebroadcastEvents(
   const rebroadcastPromises = events.map(async (event) => {
     try {
       await relayPool.publish(targetRelays, event)
-      console.log('📡 Rebroadcast event', event.id?.slice(0, 8), 'to', targetRelays.length, 'relay(s)')
     } catch (error) {
       console.warn('⚠️ Failed to rebroadcast event', event.id?.slice(0, 8), error)
     }
@@ -68,11 +65,5 @@ export async function rebroadcastEvents(
   Promise.all(rebroadcastPromises).catch((err) => {
     console.warn('⚠️ Some rebroadcasts failed:', err)
   })
-
-  console.log(`📡 Rebroadcasting ${events.length} event(s) to ${targetRelays.length} relay(s)`, {
-    broadcastToAll,
-    useLocalCache,
-    targetRelays
-  })
 }
 

src/services/relayListService.ts

@@ -0,0 +1,180 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { queryEvents } from './dataFetch'
+
+export interface UserRelayInfo {
+  url: string
+  mode?: 'read' | 'write' | 'both'
+}
+
+/**
+ * Loads user's relay list from kind 10002 (NIP-65)
+ */
+export async function loadUserRelayList(
+  relayPool: RelayPool,
+  pubkey: string,
+  options?: {
+    onUpdate?: (relays: UserRelayInfo[]) => void
+  }
+): Promise<UserRelayInfo[]> {
+  try {
+    
+    
+    // Try querying with streaming callback for faster results
+    const events: NostrEvent[] = []
+    const eventsMap = new Map<string, NostrEvent>()
+    
+    const result = await queryEvents(relayPool, {
+      kinds: [10002],
+      authors: [pubkey],
+      limit: 10
+    }, {
+      onEvent: (evt) => {
+        // Deduplicate by id and keep most recent
+        const existing = eventsMap.get(evt.id)
+        if (!existing || evt.created_at > existing.created_at) {
+          eventsMap.set(evt.id, evt)
+          // Update events array with deduplicated events
+          events.length = 0
+          events.push(...Array.from(eventsMap.values()))
+
+          // Stream immediate updates to caller using the newest event
+          if (options?.onUpdate) {
+            const tags = evt.tags || []
+            const relays: UserRelayInfo[] = []
+            for (const tag of tags) {
+              if (tag[0] === 'r' && tag[1]) {
+                const url = tag[1]
+                const mode = (tag[2] as 'read' | 'write' | undefined) || 'both'
+                relays.push({ url, mode })
+              }
+            }
+            if (relays.length > 0) {
+              options.onUpdate(relays)
+            }
+          }
+        }
+      }
+    })
+    
+    // Use the streaming results if we got any, otherwise fall back to the full result
+    const finalEvents = events.length > 0 ? events : result
+    
+    // Also try a broader query to see if we get any events at all
+    await queryEvents(relayPool, {
+      kinds: [10002],
+      limit: 5
+    })
+    
+    
+
+    if (finalEvents.length === 0) return []
+
+    // Get most recent event
+    const sortedEvents = finalEvents.sort((a, b) => b.created_at - a.created_at)
+    const relayListEvent = sortedEvents[0]
+
+    const relays: UserRelayInfo[] = []
+    for (const tag of relayListEvent.tags) {
+      if (tag[0] === 'r' && tag[1]) {
+        const url = tag[1]
+        const mode = tag[2] as 'read' | 'write' | undefined
+        relays.push({
+          url,
+          mode: mode || 'both'
+        })
+      }
+    }
+
+    return relays
+  } catch (error) {
+    console.error('Failed to load user relay list:', error)
+    return []
+  }
+}
+
+/**
+ * Loads blocked relays from kind 10006 (NIP-51 mute list)
+ */
+export async function loadBlockedRelays(
+  relayPool: RelayPool,
+  pubkey: string
+): Promise<string[]> {
+  try {
+    const events = await queryEvents(relayPool, {
+      kinds: [10006],
+      authors: [pubkey]
+    })
+
+    if (events.length === 0) return []
+
+    // Get most recent event
+    const sortedEvents = events.sort((a, b) => b.created_at - a.created_at)
+    const muteListEvent = sortedEvents[0]
+
+    const blocked: string[] = []
+    for (const tag of muteListEvent.tags) {
+      if (tag[0] === 'r' && tag[1]) {
+        blocked.push(tag[1])
+      }
+    }
+
+    return blocked
+  } catch (error) {
+    console.error('Failed to load blocked relays:', error)
+    return []
+  }
+}
+
+/**
+ * Computes final relay set by merging inputs and removing blocked relays
+ */
+export function computeRelaySet(params: {
+  hardcoded: string[]
+  bunker?: string[]
+  userList?: UserRelayInfo[]
+  blocked?: string[]
+  alwaysIncludeLocal: string[]
+}): string[] {
+  const {
+    hardcoded,
+    bunker = [],
+    userList = [],
+    blocked = [],
+    alwaysIncludeLocal
+  } = params
+
+  const relaySet = new Set<string>()
+  const blockedSet = new Set(blocked)
+
+  // Helper to check if relay should be included
+  const shouldInclude = (url: string): boolean => {
+    // Always include local relays
+    if (alwaysIncludeLocal.includes(url)) return true
+    // Otherwise check if blocked
+    return !blockedSet.has(url)
+  }
+
+  // Add hardcoded relays
+  for (const url of hardcoded) {
+    if (shouldInclude(url)) relaySet.add(url)
+  }
+
+  // Add bunker relays
+  for (const url of bunker) {
+    if (shouldInclude(url)) relaySet.add(url)
+  }
+
+  // Add user relays (treating 'both' and 'read' as applicable for queries)
+  for (const relay of userList) {
+    if (shouldInclude(relay.url)) relaySet.add(relay.url)
+  }
+
+  // Always ensure local relays are present
+  for (const url of alwaysIncludeLocal) {
+    relaySet.add(url)
+  }
+
+  return Array.from(relaySet)
+}
+

src/services/relayManager.ts

@@ -0,0 +1,84 @@
+import { RelayPool } from 'applesauce-relay'
+import { prioritizeLocalRelays } from '../utils/helpers'
+
+/**
+ * Local relays that are always included
+ */
+export const ALWAYS_LOCAL_RELAYS = [
+  'ws://localhost:10547',
+  'ws://localhost:4869'
+]
+
+/**
+ * Gets active relay URLs from the relay pool
+ */
+export function getActiveRelayUrls(relayPool: RelayPool): string[] {
+  const urls = Array.from(relayPool.relays.keys())
+  return prioritizeLocalRelays(urls)
+}
+
+/**
+ * Normalizes a relay URL to match what applesauce-relay stores internally
+ * Adds trailing slash for URLs without a path
+ */
+function normalizeRelayUrl(url: string): string {
+  try {
+    const parsed = new URL(url)
+    // If the pathname is empty or just "/", ensure it ends with "/"
+    if (parsed.pathname === '' || parsed.pathname === '/') {
+      return url.endsWith('/') ? url : url + '/'
+    }
+    return url
+  } catch {
+    // If URL parsing fails, return as-is
+    return url
+  }
+}
+
+/**
+ * Applies a new relay set to the pool: adds missing relays, removes extras
+ */
+export function applyRelaySetToPool(
+  relayPool: RelayPool,
+  finalUrls: string[]
+): void {
+  // Normalize all URLs to match pool's internal format
+  const currentUrls = new Set(Array.from(relayPool.relays.keys()))
+  const normalizedTargetUrls = new Set(finalUrls.map(normalizeRelayUrl))
+
+  
+
+  // Add new relays (use original URLs for adding, not normalized)
+  const toAdd = finalUrls.filter(url => !currentUrls.has(normalizeRelayUrl(url)))
+  
+  if (toAdd.length > 0) {
+    relayPool.group(toAdd)
+  }
+
+  // Remove relays not in target (but always keep local relays)
+  const toRemove: string[] = []
+  for (const url of currentUrls) {
+    // Check if this normalized URL is in the target set
+    if (!normalizedTargetUrls.has(url)) {
+      // Also check if it's a local relay (check both normalized and original forms)
+      const isLocal = ALWAYS_LOCAL_RELAYS.some(localUrl => 
+        normalizeRelayUrl(localUrl) === url || localUrl === url
+      )
+      if (!isLocal) {
+        toRemove.push(url)
+      }
+    }
+  }
+  
+
+  for (const url of toRemove) {
+    const relay = relayPool.relays.get(url)
+    if (relay) {
+      relay.close()
+      relayPool.relays.delete(url)
+    }
+  }
+  
+  
+}
+

src/services/relayStatusService.ts

@@ -40,11 +40,7 @@ export function updateAndGetRelayStatuses(relayPool: RelayPool): RelayStatus[] {
   const connectedCount = statuses.filter(s => s.isInPool).length
   const disconnectedCount = statuses.filter(s => !s.isInPool).length
   if (connectedCount === 0 || disconnectedCount > 0) {
-    console.log(`🔌 Relay status: ${connectedCount} connected, ${disconnectedCount} disconnected`)
-    const connected = statuses.filter(s => s.isInPool).map(s => s.url.replace(/^wss?:\/\//, ''))
-    const disconnected = statuses.filter(s => !s.isInPool).map(s => s.url.replace(/^wss?:\/\//, ''))
-    if (connected.length > 0) console.log('✅ Connected:', connected.join(', '))
-    if (disconnected.length > 0) console.log('❌ Disconnected:', disconnected.join(', '))
+    // Debug: relay status changed, but we're not logging it
   }
   
   // Add recently seen relays that are no longer connected

src/services/settingsService.ts

@@ -36,6 +36,10 @@ export interface UserSettings {
   defaultHighlightVisibilityNostrverse?: boolean
   defaultHighlightVisibilityFriends?: boolean
   defaultHighlightVisibilityMine?: boolean
+  // Default explore scope
+  defaultExploreScopeNostrverse?: boolean
+  defaultExploreScopeFriends?: boolean
+  defaultExploreScopeMine?: boolean
   // Zap split weights (treated as relative weights, not strict percentages)
   zapSplitHighlighterWeight?: number // default 50
   zapSplitBorisWeight?: number // default 2.1
@@ -54,8 +58,21 @@ export interface UserSettings {
   lightColorTheme?: 'paper-white' | 'sepia' | 'ivory' // default: sepia
   // Reading settings
   paragraphAlignment?: 'left' | 'justify' // default: justify
+  fullWidthImages?: boolean // default: false
+  renderVideoLinksAsEmbeds?: boolean // default: false
   // Reading position sync
   syncReadingPosition?: boolean // default: false (opt-in)
+  autoMarkAsReadOnCompletion?: boolean // default: false (opt-in)
+  // Bookmark filtering
+  hideBookmarksWithoutCreationDate?: boolean // default: false
+  // Content filtering
+  hideBotArticlesByName?: boolean // default: true - hide authors whose profile name includes "bot"
+  // TTS language selection
+  ttsUseSystemLanguage?: boolean // default: false
+  ttsDetectContentLanguage?: boolean // default: true
+  ttsLanguageMode?: 'system' | 'content' | string // default: 'content', can also be language code like 'en', 'es', etc.
+  // Text-to-Speech settings
+  ttsDefaultSpeed?: number // default: 2.1
 }
 
 export async function loadSettings(
@@ -64,7 +81,6 @@ export async function loadSettings(
   pubkey: string,
   relays: string[]
 ): Promise<UserSettings | null> {
-  console.log('⚙️ Loading settings from nostr...', { pubkey: pubkey.slice(0, 8) + '...', relays })
   
   // First, check if we already have settings in the local event store
   try {
@@ -73,7 +89,6 @@ export async function loadSettings(
     )
     if (localEvent) {
       const content = getAppDataContent<UserSettings>(localEvent)
-      console.log('✅ Settings loaded from local store (cached):', content)
       
       // Still fetch from relays in the background to get any updates
       relayPool
@@ -87,8 +102,8 @@ export async function loadSettings(
       
       return content || null
     }
-  } catch (err) {
-    console.log('📭 No cached settings found, fetching from relays...')
+  } catch (_err) {
+    // Ignore local store errors
   }
   
   // If not in local store, fetch from relays
@@ -120,10 +135,8 @@ export async function loadSettings(
               )
               if (event) {
                 const content = getAppDataContent<UserSettings>(event)
-                console.log('✅ Settings loaded from relays:', content)
                 resolve(content || null)
               } else {
-                console.log('📭 No settings event found - using defaults')
                 resolve(null)
               }
             } catch (err) {
@@ -154,7 +167,6 @@ export async function saveSettings(
   factory: EventFactory,
   settings: UserSettings
 ): Promise<void> {
-  console.log('💾 Saving settings to nostr:', settings)
 
   // Create NIP-78 application data event manually
   // Note: AppDataBlueprint is not available in the npm package
@@ -170,7 +182,6 @@ export async function saveSettings(
   // Use unified write service
   await publishEvent(relayPool, eventStore, signed)
 
-  console.log('✅ Settings published successfully')
 }
 
 export function watchSettings(

src/services/unarchiveService.ts

@@ -0,0 +1,121 @@
+import { RelayPool, completeOnEose, onlyEvents } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { NostrEvent } from 'nostr-tools'
+import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { RELAYS } from '../config/relays'
+import { ARCHIVE_EMOJI, deleteReaction } from './reactionService'
+
+/**
+ * Returns the user's archive reactions (kind:7) for a given event id.
+ */
+export async function findArchiveReactionsForEvent(
+  eventId: string,
+  userPubkey: string,
+  relayPool: RelayPool
+): Promise<NostrEvent[]> {
+  try {
+    const filter = {
+      kinds: [7],
+      authors: [userPubkey],
+      '#e': [eventId]
+    }
+
+    const events$ = relayPool
+      .req(RELAYS, filter)
+      .pipe(
+        onlyEvents(),
+        completeOnEose(),
+        takeUntil(timer(2000)),
+        toArray()
+      )
+
+    const events: NostrEvent[] = await lastValueFrom(events$)
+    return events.filter(evt => evt.content === ARCHIVE_EMOJI)
+  } catch (error) {
+    console.error('[unarchive] findArchiveReactionsForEvent error:', error)
+    return []
+  }
+}
+
+/**
+ * Returns the user's archive reactions (kind:17) for a given website URL.
+ */
+export async function findArchiveReactionsForWebsite(
+  url: string,
+  userPubkey: string,
+  relayPool: RelayPool
+): Promise<NostrEvent[]> {
+  try {
+    // Normalize URL same as creation
+    let normalizedUrl = url
+    try {
+      const parsed = new URL(url)
+      parsed.hash = ''
+      normalizedUrl = parsed.toString()
+      if (normalizedUrl.endsWith('/')) normalizedUrl = normalizedUrl.slice(0, -1)
+    } catch (e) {
+      console.warn('[unarchive] URL normalize failed:', e)
+    }
+
+    const filter = {
+      kinds: [17],
+      authors: [userPubkey],
+      '#r': [normalizedUrl]
+    }
+
+    const events$ = relayPool
+      .req(RELAYS, filter)
+      .pipe(
+        onlyEvents(),
+        completeOnEose(),
+        takeUntil(timer(2000)),
+        toArray()
+      )
+
+    const events: NostrEvent[] = await lastValueFrom(events$)
+    return events.filter(evt => evt.content === ARCHIVE_EMOJI)
+  } catch (error) {
+    console.error('[unarchive] findArchiveReactionsForWebsite error:', error)
+    return []
+  }
+}
+
+/**
+ * Sends deletion requests for all of the user's archive reactions to an event.
+ * Returns the number of deletion requests published.
+ */
+export async function unarchiveEvent(
+  eventId: string,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<number> {
+  try {
+    const reactions = await findArchiveReactionsForEvent(eventId, account.pubkey, relayPool)
+    await Promise.all(reactions.map(r => deleteReaction(r.id, account, relayPool)))
+    return reactions.length
+  } catch (error) {
+    console.error('[unarchive] unarchiveEvent error:', error)
+    return 0
+  }
+}
+
+/**
+ * Sends deletion requests for all of the user's archive reactions to a website URL.
+ * Returns the number of deletion requests published.
+ */
+export async function unarchiveWebsite(
+  url: string,
+  account: IAccount,
+  relayPool: RelayPool
+): Promise<number> {
+  try {
+    const reactions = await findArchiveReactionsForWebsite(url, account.pubkey, relayPool)
+    await Promise.all(reactions.map(r => deleteReaction(r.id, account, relayPool)))
+    return reactions.length
+  } catch (error) {
+    console.error('[unarchive] unarchiveWebsite error:', error)
+    return 0
+  }
+}
+
+

src/services/webBookmarkService.ts

@@ -78,7 +78,6 @@ export async function createWebBookmark(
   // Publish to relays in the background (don't block UI)
   relayPool.publish(relays, signedEvent)
     .then(() => {
-      console.log('✅ Web bookmark published to', relays.length, 'relays:', signedEvent)
     })
     .catch((err) => {
       console.warn('⚠️ Some relays failed to publish bookmark:', err)

src/services/writeService.ts

@@ -1,9 +1,9 @@
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
 import { IEventStore } from 'applesauce-core'
-import { RELAYS } from '../config/relays'
 import { isLocalRelay, areAllRelaysLocal } from '../utils/helpers'
 import { markEventAsOfflineCreated } from './offlineSyncService'
+import { getActiveRelayUrls } from './relayManager'
 
 /**
  * Unified write helper: add event to EventStore, detect connectivity, 
@@ -14,9 +14,11 @@ export async function publishEvent(
   eventStore: IEventStore,
   event: NostrEvent
 ): Promise<void> {
+  const isProgressEvent = event.kind === 39802
+  const logPrefix = isProgressEvent ? '[progress]' : ''
+  
   // Store the event in the local EventStore FIRST for immediate UI display
   eventStore.add(event)
-  console.log('💾 Stored event in EventStore:', event.id.slice(0, 8), `(kind ${event.kind})`)
 
   // Check current connection status - are we online or in flight mode?
   const connectedRelays = Array.from(relayPool.relays.values())
@@ -25,20 +27,17 @@ export async function publishEvent(
 
   const hasRemoteConnection = connectedRelays.some(url => !isLocalRelay(url))
 
+  // Get active relay URLs from the pool
+  const activeRelays = getActiveRelayUrls(relayPool)
+
   // Determine which relays we expect to succeed
   const expectedSuccessRelays = hasRemoteConnection
-    ? RELAYS
-    : RELAYS.filter(isLocalRelay)
+    ? activeRelays
+    : activeRelays.filter(isLocalRelay)
 
   const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
 
-  console.log('📍 Event relay status:', {
-    targetRelays: RELAYS.length,
-    expectedSuccessRelays: expectedSuccessRelays.length,
-    isLocalOnly,
-    hasRemoteConnection,
-    eventId: event.id.slice(0, 8)
-  })
+  // Publishing event
 
   // If we're in local-only mode, mark this event for later sync
   if (isLocalOnly) {
@@ -46,12 +45,11 @@ export async function publishEvent(
   }
 
   // Publish to all configured relays in the background (non-blocking)
-  relayPool.publish(RELAYS, event)
+  relayPool.publish(activeRelays, event)
     .then(() => {
-      console.log('✅ Event published to', RELAYS.length, 'relay(s):', event.id.slice(0, 8))
     })
     .catch((error) => {
-      console.warn('⚠️ Failed to publish event to relays (event still saved locally):', error)
+      console.warn(`${logPrefix} ⚠️ Failed to publish event to relays (event still saved locally):`, error)
       
       // Surface common bunker signing errors for debugging
       if (error instanceof Error && error.message.includes('permission')) {

src/services/writingsController.ts

@@ -0,0 +1,245 @@
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore, Helpers } from 'applesauce-core'
+import { NostrEvent } from 'nostr-tools'
+import { KINDS } from '../config/kinds'
+import { queryEvents } from './dataFetch'
+import { BlogPostPreview } from './exploreService'
+
+const { getArticleTitle, getArticleSummary, getArticleImage, getArticlePublished } = Helpers
+
+type WritingsCallback = (posts: BlogPostPreview[]) => void
+type LoadingCallback = (loading: boolean) => void
+
+const LAST_SYNCED_KEY = 'writings_last_synced'
+
+/**
+ * Shared writings controller
+ * Manages the user's nostr-native long-form articles (kind:30023) centrally,
+ * similar to highlightsController
+ */
+class WritingsController {
+  private writingsListeners: WritingsCallback[] = []
+  private loadingListeners: LoadingCallback[] = []
+  
+  private currentPosts: BlogPostPreview[] = []
+  private lastLoadedPubkey: string | null = null
+  private generation = 0
+
+  onWritings(cb: WritingsCallback): () => void {
+    this.writingsListeners.push(cb)
+    return () => {
+      this.writingsListeners = this.writingsListeners.filter(l => l !== cb)
+    }
+  }
+
+  onLoading(cb: LoadingCallback): () => void {
+    this.loadingListeners.push(cb)
+    return () => {
+      this.loadingListeners = this.loadingListeners.filter(l => l !== cb)
+    }
+  }
+
+  private setLoading(loading: boolean): void {
+    this.loadingListeners.forEach(cb => cb(loading))
+  }
+
+  private emitWritings(posts: BlogPostPreview[]): void {
+    this.writingsListeners.forEach(cb => cb(posts))
+  }
+
+  /**
+   * Get current writings without triggering a reload
+   */
+  getWritings(): BlogPostPreview[] {
+    return [...this.currentPosts]
+  }
+
+  /**
+   * Check if writings are loaded for a specific pubkey
+   */
+  isLoadedFor(pubkey: string): boolean {
+    return this.lastLoadedPubkey === pubkey && this.currentPosts.length >= 0
+  }
+
+  /**
+   * Reset state (for logout or manual refresh)
+   */
+  reset(): void {
+    this.generation++
+    this.currentPosts = []
+    this.lastLoadedPubkey = null
+    this.emitWritings(this.currentPosts)
+  }
+
+  /**
+   * 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('[writings] Failed to save last synced timestamp:', err)
+    }
+  }
+
+  /**
+   * Convert NostrEvent to BlogPostPreview using applesauce Helpers
+   */
+  private toPreview(event: NostrEvent): BlogPostPreview {
+    return {
+      event,
+      title: getArticleTitle(event) || 'Untitled',
+      summary: getArticleSummary(event),
+      image: getArticleImage(event),
+      published: getArticlePublished(event),
+      author: event.pubkey
+    }
+  }
+
+  /**
+   * Sort posts by published/created date (most recent first)
+   */
+  private sortPosts(posts: BlogPostPreview[]): BlogPostPreview[] {
+    return posts.slice().sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }
+
+  /**
+   * Load writings for a user (kind:30023)
+   * Streams results and stores in event store
+   */
+  async start(options: {
+    relayPool: RelayPool
+    eventStore: IEventStore
+    pubkey: string
+    force?: boolean
+  }): Promise<void> {
+    const { relayPool, eventStore, pubkey, force = false } = options
+
+    // Skip if already loaded for this pubkey (unless forced)
+    if (!force && this.isLoadedFor(pubkey)) {
+      this.emitWritings(this.currentPosts)
+      return
+    }
+
+    // Increment generation to cancel any in-flight work
+    this.generation++
+    const currentGeneration = this.generation
+
+    this.setLoading(true)
+
+    try {
+      const seenIds = new Set<string>()
+      const uniqueByReplaceable = new Map<string, BlogPostPreview>()
+
+      // Get last synced timestamp for incremental loading
+      const lastSyncedAt = force ? null : this.getLastSyncedAt(pubkey)
+      const filter: { kinds: number[]; authors: string[]; since?: number } = {
+        kinds: [KINDS.BlogPost],
+        authors: [pubkey]
+      }
+      if (lastSyncedAt) {
+        filter.since = lastSyncedAt
+      }
+
+      const events = await queryEvents(
+        relayPool,
+        filter,
+        {
+          onEvent: (evt) => {
+            // Check if this generation is still active
+            if (currentGeneration !== this.generation) return
+
+            if (seenIds.has(evt.id)) return
+            seenIds.add(evt.id)
+
+            // Store in event store immediately
+            eventStore.add(evt)
+
+            // Dedupe by replaceable key (author + d-tag)
+            const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+            const key = `${evt.pubkey}:${dTag}`
+            
+            const preview = this.toPreview(evt)
+            const existing = uniqueByReplaceable.get(key)
+            
+            // Keep the newest version for replaceable events
+            if (!existing || evt.created_at > existing.event.created_at) {
+              uniqueByReplaceable.set(key, preview)
+
+              // Stream to listeners
+              const sortedPosts = this.sortPosts(Array.from(uniqueByReplaceable.values()))
+              this.currentPosts = sortedPosts
+              this.emitWritings(sortedPosts)
+            }
+          }
+        }
+      )
+
+      // Check if still active after async operation
+      if (currentGeneration !== this.generation) {
+        return
+      }
+
+      // Store all events in event store
+      events.forEach(evt => eventStore.add(evt))
+
+      // Final processing - ensure we have the latest version of each replaceable
+      events.forEach(evt => {
+        const dTag = evt.tags.find(t => t[0] === 'd')?.[1] || ''
+        const key = `${evt.pubkey}:${dTag}`
+        const existing = uniqueByReplaceable.get(key)
+        
+        if (!existing || evt.created_at > existing.event.created_at) {
+          uniqueByReplaceable.set(key, this.toPreview(evt))
+        }
+      })
+
+      const sorted = this.sortPosts(Array.from(uniqueByReplaceable.values()))
+
+      this.currentPosts = sorted
+      this.lastLoadedPubkey = pubkey
+      this.emitWritings(sorted)
+
+      // Update last synced timestamp
+      if (sorted.length > 0) {
+        const newestTimestamp = Math.max(...sorted.map(p => p.event.created_at))
+        this.setLastSyncedAt(pubkey, newestTimestamp)
+      }
+
+    } catch (error) {
+      console.error('[writings] ❌ Failed to load writings:', error)
+      this.currentPosts = []
+      this.emitWritings(this.currentPosts)
+    } finally {
+      // Only clear loading if this generation is still active
+      if (currentGeneration === this.generation) {
+        this.setLoading(false)
+      }
+    }
+  }
+}
+
+// Singleton instance
+export const writingsController = new WritingsController()
+

src/services/zapReceiptService.ts

@@ -22,7 +22,6 @@ export async function fetchBorisZappers(
   relayPool: RelayPool
 ): Promise<ZapSender[]> {
   try {
-    console.log('⚡ Fetching zap receipts for Boris...', BORIS_PUBKEY)
     
     // Use all configured relays plus specific zap-heavy relays
     const zapRelays = [
@@ -63,23 +62,18 @@ export async function fetchBorisZappers(
       merge(local$, remote$).pipe(toArray())
     )
 
-    console.log(`📊 Fetched ${zapReceipts.length} raw zap receipts`)
 
     // Dedupe by event ID and validate
     const uniqueReceipts = new Map<string, NostrEvent>()
-    let invalidCount = 0
     
     zapReceipts.forEach(receipt => {
       if (!uniqueReceipts.has(receipt.id)) {
         if (isValidZap(receipt)) {
           uniqueReceipts.set(receipt.id, receipt)
-        } else {
-          invalidCount++
         }
       }
     })
 
-    console.log(`✅ ${uniqueReceipts.size} valid zap receipts (${invalidCount} invalid)`)
 
     // Aggregate by sender using applesauce helpers
     const senderTotals = new Map<string, { totalSats: number; zapCount: number }>()
@@ -102,7 +96,6 @@ export async function fetchBorisZappers(
       })
     }
 
-    console.log(`👥 Found ${senderTotals.size} unique senders`)
 
     // Filter >= 2100 sats, mark whales >= 69420 sats, sort by total desc
     const zappers: ZapSender[] = Array.from(senderTotals.entries())
@@ -115,7 +108,6 @@ export async function fetchBorisZappers(
       }))
       .sort((a, b) => b.totalSats - a.totalSats)
 
-    console.log(`✅ Found ${zappers.length} supporters (${zappers.filter(z => z.isWhale).length} whales)`)
 
     return zappers
   } catch (error) {