chore: bump version to 0.3.0

Remove unused import to fix linter error

CHANGELOG.md

@@ -5,6 +5,73 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.10] - 2025-10-09
+
+### Added
+- URL-based settings navigation with /settings route
+- Active zap split preset highlighting
+- Educational links about relays in reader view
+- Article publication date display in reader
+- Local relay recommendations in settings
+- Relays section showing active and recently connected relays
+
+### Fixed
+- Remove trailing slash from relay URLs
+- Constrain Reading Font dropdown width
+
+### Changed
+- Rename 'Default View Mode' to 'Default Bookmark View' in settings
+- Reorganize settings layout for better UX
+- Use sidebar-style colored buttons for highlight visibility
+- Simplify Relays section presentation
+
+## [0.2.9] - 2025-10-09
+
+### Fixed
+- Deduplicate highlights in streaming callbacks
+
+## [0.2.8] - 2025-10-09
+
+### Added
+- Display article summary in header
+- Overlay title and metadata on hero images
+- Apply reading font to article titles
+
+### Fixed
+- Pass article summary through to ReadableContent
+- Correct Jina AI Reader proxy URL format
+
+### Changed
+- Update homepage URL to read.withboris.com
+- Reorder toolbar buttons for better UX
+
+## [0.2.7] - 2025-10-08
+
+### Added
+- Web bookmark creation (NIP-B0, kind:39701)
+- Tags support for web bookmarks per NIP-B0
+- Auto-fetch title and description when URL is pasted
+- Prioritize OpenGraph tags for metadata extraction
+- Auto-extract tags from metadata with boris as default tag
+- Zap split preset buttons
+- Boris support percentage to zap splits
+- Respect existing zap tags in source content when creating highlights
+
+### Fixed
+- Revert to fetchReadableContent to avoid CORS issues
+- Improve modal spacing with proper box-sizing
+- Prevent sliders from jumping when resetting settings
+- Pass relayPool as prop instead of using non-existent hook
+- Correct type signature for addZapTags function
+
+### Changed
+- Reorder toolbar buttons for better UX
+- DRY up tag extraction with normalizeTags helper
+- Use url-metadata package for robust metadata extraction
+- Make zap split sliders independent using weights
+- Move zap splits to dedicated settings section
+- Publish bookmarks to relays in background for better performance
+
 ## [0.2.6] - 2025-10-08
 
 ### Added
@@ -359,6 +426,10 @@ 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
 
+[0.2.10]: https://github.com/dergigi/boris/compare/v0.2.9...v0.2.10
+[0.2.9]: https://github.com/dergigi/boris/compare/v0.2.8...v0.2.9
+[0.2.8]: https://github.com/dergigi/boris/compare/v0.2.7...v0.2.8
+[0.2.7]: https://github.com/dergigi/boris/compare/v0.2.6...v0.2.7
 [0.2.6]: https://github.com/dergigi/boris/compare/v0.2.5...v0.2.6
 [0.2.5]: https://github.com/dergigi/boris/compare/v0.2.4...v0.2.5
 [0.2.4]: https://github.com/dergigi/boris/compare/v0.2.3...v0.2.4

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boris",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "A minimal nostr client for bookmark management",
-  "homepage": "https://xn--bris-v0b.com/",
+  "homepage": "https://read.withboris.com/",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -52,6 +52,15 @@ function AppRoutes({
           />
         } 
       />
+      <Route 
+        path="/settings" 
+        element={
+          <Bookmarks 
+            relayPool={relayPool}
+            onLogout={handleLogout}
+          />
+        } 
+      />
       <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
     </Routes>
   )
@@ -109,6 +118,19 @@ function App() {
       console.log('Created relay group with', RELAYS.length, 'relays (including local)')
       console.log('Relay URLs:', RELAYS)
       
+      // 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)
+      })
+      console.log('🔗 Created keep-alive subscription for', RELAYS.length, 'relay(s)')
+      
+      // Store subscription for cleanup
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(pool as any)._keepAliveSubscription = keepAliveSub
+      
       // Attach address/replaceable loaders so ProfileModel can fetch profiles
       const addressLoader = createAddressLoader(pool, {
         eventStore: store,
@@ -125,6 +147,12 @@ function App() {
       return () => {
         accountsSub.unsubscribe()
         activeSub.unsubscribe()
+        // Clean up keep-alive subscription if it exists
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if ((pool as any)._keepAliveSubscription) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (pool as any)._keepAliveSubscription.unsubscribe()
+        }
       }
     }
     

src/components/Bookmarks.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
-import { useParams, useLocation } from 'react-router-dom'
+import React, { useMemo, useEffect, useRef } from 'react'
+import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import { Hooks } from 'applesauce-react'
 import { useEventStore } from 'applesauce-react/hooks'
 import { RelayPool } from 'applesauce-relay'
@@ -10,6 +10,8 @@ import { useBookmarksData } from '../hooks/useBookmarksData'
 import { useContentSelection } from '../hooks/useContentSelection'
 import { useHighlightCreation } from '../hooks/useHighlightCreation'
 import { useBookmarksUI } from '../hooks/useBookmarksUI'
+import { useRelayStatus } from '../hooks/useRelayStatus'
+import { useOfflineSync } from '../hooks/useOfflineSync'
 import ThreePaneLayout from './ThreePaneLayout'
 import { classifyHighlights } from '../utils/highlightClassification'
 
@@ -23,10 +25,21 @@ interface BookmarksProps {
 const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const { naddr } = useParams<{ naddr?: string }>()
   const location = useLocation()
+  const navigate = useNavigate()
+  const previousLocationRef = useRef<string>()
   
   const externalUrl = location.pathname.startsWith('/r/') 
     ? decodeURIComponent(location.pathname.slice(3))
     : undefined
+  
+  const showSettings = location.pathname === '/settings'
+  
+  // Track previous location for going back from settings
+  useEffect(() => {
+    if (!showSettings) {
+      previousLocationRef.current = location.pathname
+    }
+  }, [location.pathname, showSettings])
     
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
@@ -39,6 +52,18 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager
   })
 
+  // Monitor relay status for offline sync
+  const relayStatuses = useRelayStatus({ relayPool })
+
+  // Automatically sync local events to remote relays when coming back online
+  useOfflineSync({
+    relayPool,
+    account: activeAccount || null,
+    eventStore,
+    relayStatuses,
+    enabled: true
+  })
+
   const {
     isCollapsed,
     setIsCollapsed,
@@ -50,8 +75,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setShowHighlights,
     selectedHighlightId,
     setSelectedHighlightId,
-    showSettings,
-    setShowSettings,
     currentArticleCoordinate,
     setCurrentArticleCoordinate,
     currentArticleEventId,
@@ -79,7 +102,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     accountManager,
     naddr,
     currentArticleCoordinate,
-    currentArticleEventId
+    currentArticleEventId,
+    settings
   })
 
   const {
@@ -94,7 +118,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     relayPool,
     settings,
     setIsCollapsed,
-    setShowSettings,
+    setShowSettings: () => {}, // No-op since we use route-based settings now
     setCurrentArticle
   })
 
@@ -106,6 +130,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   } = useHighlightCreation({
     activeAccount,
     relayPool,
+    eventStore,
     currentArticle,
     selectedUrl,
     readerContent,
@@ -125,7 +150,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setHighlightsLoading,
     setCurrentArticleCoordinate,
     setCurrentArticleEventId,
-    setCurrentArticle
+    setCurrentArticle,
+    settings
   })
   
   // Load external URL if /r/* route is used
@@ -160,18 +186,23 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       onLogout={onLogout}
       onViewModeChange={setViewMode}
       onOpenSettings={() => {
-        setShowSettings(true)
+        navigate('/settings')
         setIsCollapsed(true)
         setIsHighlightsCollapsed(true)
       }}
       onRefresh={handleRefreshAll}
       relayPool={relayPool}
+      eventStore={eventStore}
       readerLoading={readerLoading}
       readerContent={readerContent}
       selectedUrl={selectedUrl}
       settings={settings}
       onSaveSettings={saveSettings}
-      onCloseSettings={() => setShowSettings(false)}
+      onCloseSettings={() => {
+        // Navigate back to previous location or default
+        const backTo = previousLocationRef.current || '/'
+        navigate(backTo)
+      }}
       classifiedHighlights={classifiedHighlights}
       showHighlights={showHighlights}
       selectedHighlightId={selectedHighlightId}

src/components/ContentPanel.tsx

@@ -19,6 +19,8 @@ interface ContentPanelProps {
   markdown?: string
   selectedUrl?: string
   image?: string
+  summary?: string
+  published?: number
   highlights?: Highlight[]
   showHighlights?: boolean
   highlightStyle?: 'marker' | 'underline'
@@ -40,6 +42,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   markdown, 
   selectedUrl,
   image,
+  summary,
+  published,
   highlights = [],
   showHighlights = true,
   highlightStyle = 'marker',
@@ -117,6 +121,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       <ReaderHeader 
         title={title}
         image={image}
+        summary={summary}
+        published={published}
         readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}

src/components/HighlightItem.tsx

@@ -1,10 +1,14 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { formatDistanceToNow } from 'date-fns'
 import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
+import { Models, IEventStore } from 'applesauce-core'
+import { RelayPool } from 'applesauce-relay'
+import { onSyncStateChange, isEventSyncing } from '../services/offlineSyncService'
+import { RELAYS } from '../config/relays'
+import { areAllRelaysLocal } from '../utils/helpers'
 
 interface HighlightWithLevel extends Highlight {
   level?: 'mine' | 'friends' | 'nostrverse'
@@ -15,10 +19,24 @@ interface HighlightItemProps {
   onSelectUrl?: (url: string) => void
   isSelected?: boolean
   onHighlightClick?: (highlightId: string) => void
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
+  onHighlightUpdate?: (highlight: Highlight) => void
 }
 
-export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelectUrl, isSelected, onHighlightClick }) => {
+export const HighlightItem: React.FC<HighlightItemProps> = ({ 
+  highlight, 
+  onSelectUrl, 
+  isSelected, 
+  onHighlightClick,
+  relayPool,
+  eventStore,
+  onHighlightUpdate
+}) => {
   const itemRef = useRef<HTMLDivElement>(null)
+  const [isSyncing, setIsSyncing] = useState(() => isEventSyncing(highlight.id))
+  const [showOfflineIndicator, setShowOfflineIndicator] = useState(() => highlight.isOfflineCreated && !isSyncing)
+  const [isRebroadcasting, setIsRebroadcasting] = useState(false)
   
   // Resolve the profile of the user who made the highlight
   const profile = useEventModel(Models.ProfileModel, [highlight.pubkey])
@@ -30,6 +48,39 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
     return `${highlight.pubkey.slice(0, 8)}...` // fallback to short pubkey
   }
   
+  // Update offline indicator when highlight prop changes
+  useEffect(() => {
+    if (highlight.isOfflineCreated && !isSyncing) {
+      setShowOfflineIndicator(true)
+    }
+  }, [highlight.isOfflineCreated, isSyncing])
+  
+  // Listen to sync state changes
+  useEffect(() => {
+    const unsubscribe = onSyncStateChange((eventId, syncingState) => {
+      if (eventId === highlight.id) {
+        setIsSyncing(syncingState)
+        // When sync completes successfully, update highlight to show all relays
+        if (!syncingState) {
+          setShowOfflineIndicator(false)
+          
+          // Update the highlight with all relays after successful sync
+          if (onHighlightUpdate && highlight.isLocalOnly) {
+            const updatedHighlight = {
+              ...highlight,
+              publishedRelays: RELAYS,
+              isLocalOnly: false,
+              isOfflineCreated: false
+            }
+            onHighlightUpdate(updatedHighlight)
+          }
+        }
+      }
+    })
+    
+    return unsubscribe
+  }, [highlight, onHighlightUpdate])
+  
   useEffect(() => {
     if (isSelected && itemRef.current) {
       itemRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
@@ -58,6 +109,105 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
   
   const sourceLink = getSourceLink()
   
+  // Handle rebroadcast to all relays
+  const handleRebroadcast = async (e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent triggering highlight selection
+    
+    if (!relayPool || !eventStore || isRebroadcasting) return
+    
+    setIsRebroadcasting(true)
+    
+    try {
+      // Get the event from the event store
+      const event = eventStore.getEvent(highlight.id)
+      if (!event) {
+        console.error('Event not found in store:', highlight.id)
+        return
+      }
+      
+      // Publish to all configured relays - let the relay pool handle connection state
+      const targetRelays = RELAYS
+      
+      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)
+      const updatedHighlight = {
+        ...highlight,
+        publishedRelays: targetRelays,
+        isLocalOnly,
+        isOfflineCreated: false
+      }
+      
+      // Notify parent of the update
+      if (onHighlightUpdate) {
+        onHighlightUpdate(updatedHighlight)
+      }
+      
+      // Update local state
+      setShowOfflineIndicator(false)
+      
+    } catch (error) {
+      console.error('❌ Failed to rebroadcast:', error)
+    } finally {
+      setIsRebroadcasting(false)
+    }
+  }
+  
+  // Determine relay indicator icon and tooltip
+  const getRelayIndicatorInfo = () => {
+    // Show spinner if manually rebroadcasting OR auto-syncing
+    if (isRebroadcasting || isSyncing) {
+      return {
+        icon: faSpinner,
+        tooltip: isRebroadcasting ? 'rebroadcasting...' : 'syncing...',
+        spin: true
+      }
+    }
+    
+    // Always show relay list, use plane icon for local-only
+    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
+    
+    // Show server icon with relay info if available
+    if (highlight.publishedRelays && highlight.publishedRelays.length > 0) {
+      const relayNames = highlight.publishedRelays.map(url => 
+        url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+      )
+      return {
+        icon: isLocalOrOffline ? faPlane : faServer,
+        tooltip: relayNames.join('\n'),
+        spin: false
+      }
+    }
+    
+    if (highlight.seenOnRelays && highlight.seenOnRelays.length > 0) {
+      const relayNames = highlight.seenOnRelays.map(url => 
+        url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+      )
+      return {
+        icon: faServer,
+        tooltip: relayNames.join('\n'),
+        spin: false
+      }
+    }
+    
+    // Fallback: show all relays we queried (where this was likely fetched from)
+    const relayNames = RELAYS.map(url => 
+      url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+    )
+    return {
+      icon: faServer,
+      tooltip: relayNames.join('\n'),
+      spin: false
+    }
+  }
+  
+  const relayIndicator = getRelayIndicatorInfo()
+  
   return (
     <div 
       ref={itemRef} 
@@ -68,6 +218,16 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
     >
       <div className="highlight-quote-icon">
         <FontAwesomeIcon icon={faQuoteLeft} />
+        {relayIndicator && (
+          <div 
+            className="highlight-relay-indicator" 
+            title={relayIndicator.tooltip}
+            onClick={handleRebroadcast}
+            style={{ cursor: relayPool && eventStore ? 'pointer' : 'default' }}
+          >
+            <FontAwesomeIcon icon={relayIndicator.icon} spin={relayIndicator.spin} />
+          </div>
+        )}
       </div>
       
       <div className="highlight-content">

src/components/HighlightsPanel.tsx

@@ -6,6 +6,8 @@ import { HighlightItem } from './HighlightItem'
 import { useFilteredHighlights } from '../hooks/useFilteredHighlights'
 import HighlightsPanelCollapsed from './HighlightsPanel/HighlightsPanelCollapsed'
 import HighlightsPanelHeader from './HighlightsPanel/HighlightsPanelHeader'
+import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 
 export interface HighlightVisibility {
   nostrverse: boolean
@@ -28,6 +30,8 @@ interface HighlightsPanelProps {
   highlightVisibility?: HighlightVisibility
   onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
   followedPubkeys?: Set<string>
+  relayPool?: RelayPool | null
+  eventStore?: IEventStore | null
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -44,9 +48,12 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   currentUserPubkey,
   highlightVisibility = { nostrverse: true, friends: true, mine: true },
   onHighlightVisibilityChange,
-  followedPubkeys = new Set()
+  followedPubkeys = new Set(),
+  relayPool,
+  eventStore
 }) => {
   const [showHighlights, setShowHighlights] = useState(true)
+  const [localHighlights, setLocalHighlights] = useState(highlights)
   
   const handleToggleHighlights = () => {
     const newValue = !showHighlights
@@ -54,8 +61,19 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
     onToggleHighlights?.(newValue)
   }
   
+  // Keep track of highlight updates
+  React.useEffect(() => {
+    setLocalHighlights(highlights)
+  }, [highlights])
+  
+  const handleHighlightUpdate = (updatedHighlight: Highlight) => {
+    setLocalHighlights(prev => 
+      prev.map(h => h.id === updatedHighlight.id ? updatedHighlight : h)
+    )
+  }
+  
   const filteredHighlights = useFilteredHighlights({
-    highlights,
+    highlights: localHighlights,
     selectedUrl,
     highlightVisibility,
     currentUserPubkey,
@@ -108,6 +126,9 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
               onSelectUrl={onSelectUrl}
               isSelected={highlight.id === selectedHighlightId}
               onHighlightClick={onHighlightClick}
+              relayPool={relayPool}
+              eventStore={eventStore}
+              onHighlightUpdate={handleHighlightUpdate}
             />
           ))}
         </div>

src/components/ReaderHeader.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
+import { format } from 'date-fns'
 
 interface ReaderHeaderProps {
   title?: string
   image?: string
+  summary?: string
+  published?: number
   readingTimeText?: string | null
   hasHighlights: boolean
   highlightCount: number
@@ -13,20 +16,57 @@ interface ReaderHeaderProps {
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   title,
   image,
+  summary,
+  published,
   readingTimeText,
   hasHighlights,
   highlightCount
 }) => {
+  const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
+  if (image) {
+    return (
+      <div className="reader-hero-image">
+        <img src={image} alt={title || 'Article image'} />
+        {formattedDate && (
+          <div className="publish-date-topright">
+            {formattedDate}
+          </div>
+        )}
+        {title && (
+          <div className="reader-header-overlay">
+            <h2 className="reader-title">{title}</h2>
+            {summary && <p className="reader-summary">{summary}</p>}
+            <div className="reader-meta">
+              {readingTimeText && (
+                <div className="reading-time">
+                  <FontAwesomeIcon icon={faClock} />
+                  <span>{readingTimeText}</span>
+                </div>
+              )}
+              {hasHighlights && (
+                <div className="highlight-indicator">
+                  <FontAwesomeIcon icon={faHighlighter} />
+                  <span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <>
-      {image && (
-        <div className="reader-hero-image">
-          <img src={image} alt={title || 'Article image'} />
-        </div>
-      )}
       {title && (
         <div className="reader-header">
+          {formattedDate && (
+            <div className="publish-date-topright">
+              {formattedDate}
+            </div>
+          )}
           <h2 className="reader-title">{title}</h2>
+          {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
             {readingTimeText && (
               <div className="reading-time">

src/components/RelayStatusIndicator.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlane, faGlobe, faCircle } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
+import { useRelayStatus } from '../hooks/useRelayStatus'
+import { isLocalRelay } from '../utils/helpers'
+
+interface RelayStatusIndicatorProps {
+  relayPool: RelayPool | null
+}
+
+export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ relayPool }) => {
+  // Poll for relay status updates
+  const relayStatuses = useRelayStatus({ relayPool })
+  
+  if (!relayPool) return null
+  
+  // Get currently connected relays
+  const connectedRelays = relayStatuses.filter(r => r.isInPool)
+  const connectedUrls = connectedRelays.map(r => r.url)
+  
+  // Determine connection status
+  const hasLocalRelay = connectedUrls.some(url => isLocalRelay(url))
+  const hasRemoteRelay = connectedUrls.some(url => !isLocalRelay(url))
+  const localOnlyMode = hasLocalRelay && !hasRemoteRelay
+  const offlineMode = connectedUrls.length === 0
+  
+  // Debug logging
+  React.useEffect(() => {
+    if (localOnlyMode || offlineMode) {
+      console.log('✈️ Relay Status Indicator:', {
+        mode: offlineMode ? 'OFFLINE' : 'LOCAL_ONLY',
+        connectedUrls,
+        hasLocalRelay,
+        hasRemoteRelay
+      })
+    }
+  }, [localOnlyMode, offlineMode, connectedUrls.length])
+  
+  // Don't show indicator when fully connected
+  if (!localOnlyMode && !offlineMode) return null
+  
+  return (
+    <div className="relay-status-indicator" title={
+      offlineMode 
+        ? 'Offline - No relays connected'
+        : 'Local Relays Only - Highlights will be marked as local'
+    }>
+      <div className="relay-status-icon">
+        <FontAwesomeIcon icon={offlineMode ? faCircle : faPlane} />
+      </div>
+      <div className="relay-status-text">
+        {offlineMode ? (
+          <>
+            <span className="relay-status-title">Offline</span>
+            <span className="relay-status-subtitle">No relays connected</span>
+          </>
+        ) : (
+          <>
+            <span className="relay-status-title">Flight Mode</span>
+            <span className="relay-status-subtitle">{connectedUrls.length} local relay{connectedUrls.length !== 1 ? 's' : ''}</span>
+          </>
+        )}
+      </div>
+      {!offlineMode && (
+        <div className="relay-status-pulse">
+          <FontAwesomeIcon icon={faGlobe} className="pulse-icon" />
+        </div>
+      )}
+    </div>
+  )
+}
+

src/components/Settings.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { faTimes, faUndo } from '@fortawesome/free-solid-svg-icons'
+import { RelayPool } from 'applesauce-relay'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
@@ -7,6 +8,9 @@ import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
 import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
 import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
 import ZapSettings from './Settings/ZapSettings'
+import OfflineModeSettings from './Settings/OfflineModeSettings'
+import RelaySettings from './Settings/RelaySettings'
+import { useRelayStatus } from '../hooks/useRelayStatus'
 
 const DEFAULT_SETTINGS: UserSettings = {
   collapseOnArticleOpen: true,
@@ -15,7 +19,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   sidebarCollapsed: true,
   highlightsCollapsed: true,
   readingFont: 'source-serif-4',
-  fontSize: 18,
+  fontSize: 21,
   highlightStyle: 'marker',
   highlightColor: '#ffff00',
   highlightColorNostrverse: '#9333ea',
@@ -27,15 +31,18 @@ const DEFAULT_SETTINGS: UserSettings = {
   zapSplitHighlighterWeight: 50,
   zapSplitBorisWeight: 2.1,
   zapSplitAuthorWeight: 50,
+  useLocalRelayAsCache: true,
+  rebroadcastToAllRelays: false,
 }
 
 interface SettingsProps {
   settings: UserSettings
   onSave: (settings: UserSettings) => Promise<void>
   onClose: () => void
+  relayPool: RelayPool | null
 }
 
-const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
+const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPool }) => {
   const [localSettings, setLocalSettings] = useState<UserSettings>(() => {
     // Migrate old settings format to new weight-based format
     const migrated = { ...settings }
@@ -52,6 +59,9 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
   const isInitialMount = useRef(true)
   const saveTimeoutRef = useRef<number | null>(null)
   const isLocallyUpdating = useRef(false)
+  
+  // Poll for relay status updates
+  const relayStatuses = useRelayStatus({ relayPool })
 
   useEffect(() => {
     // Don't update from external settings if we're currently making local changes
@@ -152,6 +162,8 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
         <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
         <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
+        <OfflineModeSettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
+        <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
       </div>
     </div>
   )

src/components/Settings/LayoutNavigationSettings.tsx

@@ -14,7 +14,7 @@ const LayoutNavigationSettings: React.FC<LayoutNavigationSettingsProps> = ({ set
       <h3 className="section-title">Layout & Navigation</h3>
       
       <div className="setting-group setting-inline">
-        <label>Default View Mode</label>
+        <label>Default Bookmark View</label>
         <div className="setting-buttons">
           <IconButton 
             icon={faList} 

src/components/Settings/OfflineModeSettings.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { UserSettings } from '../../services/settingsService'
+
+interface OfflineModeSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+  onClose?: () => void
+}
+
+const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onUpdate, onClose }) => {
+  const navigate = useNavigate()
+
+  const handleLinkClick = (url: string) => {
+    if (onClose) onClose()
+    navigate(`/r/${encodeURIComponent(url)}`)
+  }
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Flight Mode</h3>
+      
+      <div className="setting-group">
+        <label htmlFor="useLocalRelayAsCache" className="checkbox-label">
+          <input
+            id="useLocalRelayAsCache"
+            type="checkbox"
+            checked={settings.useLocalRelayAsCache ?? true}
+            onChange={(e) => onUpdate({ useLocalRelayAsCache: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Use local relays as cache</span>
+        </label>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="rebroadcastToAllRelays" className="checkbox-label">
+          <input
+            id="rebroadcastToAllRelays"
+            type="checkbox"
+            checked={settings.rebroadcastToAllRelays ?? false}
+            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Rebroadcast events while browsing</span>
+        </label>
+      </div>
+
+      <div style={{ 
+        marginTop: '1.5rem', 
+        padding: '1rem',
+        background: 'var(--surface-secondary)',
+        borderRadius: '6px',
+        fontSize: '0.9rem',
+        lineHeight: '1.6'
+      }}>
+        <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
+          Boris works best with a local relay. Consider running{' '}
+          <a 
+            href="https://github.com/greenart7c3/Citrine?tab=readme-ov-file#download" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            style={{ color: 'var(--accent, #8b5cf6)' }}
+          >
+            Citrine
+          </a>
+          {' or '}
+          <a 
+            href="https://github.com/CodyTseng/nostr-relay-tray/releases" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            style={{ color: 'var(--accent, #8b5cf6)' }}
+          >
+            nostr-relay-tray
+          </a>
+          . Don't know what relays are? Learn more{' '}
+          <a 
+            onClick={(e) => {
+              e.preventDefault()
+              handleLinkClick('https://nostr.how/en/relays')
+            }}
+            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+          >
+            here
+          </a>
+          {' and '}
+          <a 
+            onClick={(e) => {
+              e.preventDefault()
+              handleLinkClick('https://davidebtc186.substack.com/p/the-importance-of-hosting-your-own')
+            }}
+            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+          >
+            here
+          </a>
+          .
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default OfflineModeSettings
+

src/components/Settings/ReadingDisplaySettings.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { faHighlighter, faUnderline } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import IconButton from '../IconButton'
 import ColorPicker from '../ColorPicker'
@@ -19,42 +20,33 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
     <div className="settings-section">
       <h3 className="section-title">Reading & Display</h3>
       
-      <div className="setting-group setting-inline">
-        <label htmlFor="readingFont">Reading Font</label>
-        <FontSelector
-          value={settings.readingFont || 'source-serif-4'}
-          onChange={(font) => onUpdate({ readingFont: font })}
-        />
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label>Font Size</label>
-        <div className="setting-buttons">
-          {[14, 16, 18, 20, 22].map(size => (
-            <button
-              key={size}
-              onClick={() => onUpdate({ fontSize: size })}
-              className={`font-size-btn ${(settings.fontSize || 18) === size ? 'active' : ''}`}
-              title={`${size}px`}
-              style={{ fontSize: `${size - 2}px` }}
-            >
-              A
-            </button>
-          ))}
+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
+          <label htmlFor="readingFont">Reading Font</label>
+          <div className="setting-control">
+            <FontSelector
+              value={settings.readingFont || 'source-serif-4'}
+              onChange={(font) => onUpdate({ readingFont: font })}
+            />
+          </div>
         </div>
-      </div>
 
-      <div className="setting-group">
-        <label htmlFor="showHighlights" className="checkbox-label">
-          <input
-            id="showHighlights"
-            type="checkbox"
-            checked={settings.showHighlights !== false}
-            onChange={(e) => onUpdate({ showHighlights: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Show highlights</span>
-        </label>
+        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
+          <label>Font Size</label>
+          <div className="setting-buttons">
+            {[16, 18, 21, 24, 28, 32].map(size => (
+              <button
+                key={size}
+                onClick={() => onUpdate({ fontSize: size })}
+                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
+                title={`${size}px`}
+                style={{ fontSize: `${size - 2}px` }}
+              >
+                A
+              </button>
+            ))}
+          </div>
+        </div>
       </div>
 
       <div className="setting-group setting-inline">
@@ -107,20 +99,66 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
+      <div className="setting-group setting-inline">
+        <label>Default Highlight Visibility</label>
+        <div className="highlight-level-toggles">
+          <button
+            onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })}
+            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityNostrverse !== false) ? 'active' : ''}`}
+            title="Nostrverse highlights"
+            aria-label="Toggle nostrverse highlights by default"
+            style={{ color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
+          >
+            <FontAwesomeIcon icon={faNetworkWired} />
+          </button>
+          <button
+            onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })}
+            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityFriends !== false) ? 'active' : ''}`}
+            title="Friends highlights"
+            aria-label="Toggle friends highlights by default"
+            style={{ color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+          >
+            <FontAwesomeIcon icon={faUserGroup} />
+          </button>
+          <button
+            onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })}
+            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityMine !== false) ? 'active' : ''}`}
+            title="My highlights"
+            aria-label="Toggle my highlights by default"
+            style={{ color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+          >
+            <FontAwesomeIcon icon={faUser} />
+          </button>
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="showHighlights" className="checkbox-label">
+          <input
+            id="showHighlights"
+            type="checkbox"
+            checked={settings.showHighlights !== false}
+            onChange={(e) => onUpdate({ showHighlights: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Show highlights</span>
+        </label>
+      </div>
+
       <div className="setting-preview">
         <div className="preview-label">Preview</div>
         <div 
           className="preview-content" 
           style={{ 
             fontFamily: previewFontFamily,
-            fontSize: `${settings.fontSize || 18}px`,
+            fontSize: `${settings.fontSize || 21}px`,
             '--highlight-rgb': hexToRgb(settings.highlightColor || '#ffff00')
           } as React.CSSProperties}
         >
           <h3>The Quick Brown Fox</h3>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
-          <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityMine !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-mine` : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityFriends !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-friends` : ""}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+          <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <span className={settings.showHighlights !== false && settings.defaultHighlightVisibilityNostrverse !== false ? `content-highlight-${settings.highlightStyle || 'marker'} level-nostrverse` : ""}>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</span> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
         </div>
       </div>

src/components/Settings/RelaySettings.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheckCircle, faWifi, faClock, faPlane } from '@fortawesome/free-solid-svg-icons'
+import { RelayStatus } from '../../services/relayStatusService'
+import { formatDistanceToNow } from 'date-fns'
+import { isLocalRelay } from '../../utils/helpers'
+
+interface RelaySettingsProps {
+  relayStatuses: RelayStatus[]
+  onClose?: () => void
+}
+
+const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
+  const formatRelayUrl = (url: string) => {
+    return url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+  }
+
+  const formatLastSeen = (timestamp: number) => {
+    try {
+      return formatDistanceToNow(timestamp, { addSuffix: true })
+    } catch {
+      return 'just now'
+    }
+  }
+
+  // Sort relays: local relays first, then by connection status, then by URL
+  const sortedRelays = [...relayStatuses].sort((a, b) => {
+    const aIsLocal = isLocalRelay(a.url)
+    const bIsLocal = isLocalRelay(b.url)
+    
+    // Local relays always first
+    if (aIsLocal && !bIsLocal) return -1
+    if (!aIsLocal && bIsLocal) return 1
+    
+    // Within local or remote groups, connected before disconnected
+    if (a.isInPool !== b.isInPool) return a.isInPool ? -1 : 1
+    
+    // Finally sort by URL
+    return a.url.localeCompare(b.url)
+  })
+
+  const getRelayIcon = (relay: RelayStatus) => {
+    const isLocal = isLocalRelay(relay.url)
+    const isConnected = relay.isInPool
+    
+    if (isLocal) {
+      return {
+        icon: faPlane,
+        color: isConnected ? '#22c55e' : '#ef4444',
+        size: '1rem'
+      }
+    } else {
+      if (isConnected) {
+        return {
+          icon: faCheckCircle,
+          color: '#22c55e',
+          size: '1rem'
+        }
+      } else {
+        return {
+          icon: faWifi,
+          color: '#ef4444',
+          size: '1rem'
+        }
+      }
+    }
+  }
+
+  return (
+    <div className="settings-section">
+      <h3 className="section-title">Relays</h3>
+
+      {sortedRelays.length > 0 && (
+        <div className="relay-group">
+          <div className="relay-list">
+            {sortedRelays.map((relay) => {
+              const iconConfig = getRelayIcon(relay)
+              const isDisconnected = !relay.isInPool
+              
+              return (
+                <div 
+                  key={relay.url} 
+                  className="relay-item"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.75rem',
+                    padding: '0.75rem',
+                    background: 'var(--surface-secondary)',
+                    borderRadius: '6px',
+                    marginBottom: '0.5rem',
+                    opacity: isDisconnected ? 0.7 : 1
+                  }}
+                >
+                  <FontAwesomeIcon 
+                    icon={iconConfig.icon} 
+                    style={{ 
+                      color: iconConfig.color,
+                      fontSize: iconConfig.size
+                    }} 
+                  />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ 
+                      fontSize: '0.9rem',
+                      fontFamily: 'var(--font-mono, monospace)',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis'
+                    }}>
+                      {formatRelayUrl(relay.url)}
+                    </div>
+                  </div>
+                  {isDisconnected && (
+                    <div style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '0.5rem',
+                      fontSize: '0.8rem',
+                      color: 'var(--text-tertiary)',
+                      whiteSpace: 'nowrap'
+                    }}>
+                      <FontAwesomeIcon icon={faClock} />
+                      {formatLastSeen(relay.lastSeen)}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {relayStatuses.length === 0 && (
+        <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic' }}>
+          No relay connections found
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default RelaySettings
+

src/components/Settings/StartupPreferencesSettings.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
-import IconButton from '../IconButton'
 
 interface StartupPreferencesSettingsProps {
   settings: UserSettings
@@ -38,33 +36,6 @@ const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({
           <span>Start with highlights panel collapsed</span>
         </label>
       </div>
-
-      <div className="setting-group setting-inline">
-        <label>Default Highlight Visibility</label>
-        <div className="setting-buttons">
-          <IconButton 
-            icon={faNetworkWired} 
-            onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })} 
-            title="Nostrverse highlights" 
-            ariaLabel="Toggle nostrverse highlights by default" 
-            variant={(settings.defaultHighlightVisibilityNostrverse !== false) ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faUserGroup} 
-            onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })} 
-            title="Friends highlights" 
-            ariaLabel="Toggle friends highlights by default" 
-            variant={(settings.defaultHighlightVisibilityFriends !== false) ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faUser} 
-            onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })} 
-            title="My highlights" 
-            ariaLabel="Toggle my highlights by default" 
-            variant={(settings.defaultHighlightVisibilityMine !== false) ? 'primary' : 'ghost'} 
-          />
-        </div>
-      </div>
     </div>
   )
 }

src/components/Settings/ZapSettings.tsx

@@ -17,6 +17,19 @@ const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
   const borisPercentage = totalWeight > 0 ? (borisWeight / totalWeight) * 100 : 0
   const authorPercentage = totalWeight > 0 ? (authorWeight / totalWeight) * 100 : 0
 
+  const presets = {
+    default: { highlighter: 50, boris: 2.1, author: 50 },
+    generous: { highlighter: 5, boris: 10, author: 75 },
+    selfless: { highlighter: 1, boris: 19, author: 80 },
+    boris: { highlighter: 10, boris: 80, author: 10 },
+  }
+
+  const isPresetActive = (preset: { highlighter: number; boris: number; author: number }) => {
+    return highlighterWeight === preset.highlighter &&
+           borisWeight === preset.boris &&
+           authorWeight === preset.author
+  }
+
   const applyPreset = (preset: { highlighter: number; boris: number; author: number }) => {
     onUpdate({
       zapSplitHighlighterWeight: preset.highlighter,
@@ -33,29 +46,29 @@ const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
         <label className="setting-label">Presets</label>
         <div className="zap-preset-buttons">
           <button
-            onClick={() => applyPreset({ highlighter: 50, boris: 2.1, author: 50 })}
-            className="zap-preset-btn"
+            onClick={() => applyPreset(presets.default)}
+            className={`zap-preset-btn ${isPresetActive(presets.default) ? 'active' : ''}`}
             title="You: 49%, Author: 49%, Boris: 2%"
           >
             Default
           </button>
           <button
-            onClick={() => applyPreset({ highlighter: 5, boris: 10, author: 75 })}
-            className="zap-preset-btn"
+            onClick={() => applyPreset(presets.generous)}
+            className={`zap-preset-btn ${isPresetActive(presets.generous) ? 'active' : ''}`}
             title="You: 6%, Author: 83%, Boris: 11%"
           >
             Generous
           </button>
           <button
-            onClick={() => applyPreset({ highlighter: 1, boris: 19, author: 80 })}
-            className="zap-preset-btn"
+            onClick={() => applyPreset(presets.selfless)}
+            className={`zap-preset-btn ${isPresetActive(presets.selfless) ? 'active' : ''}`}
             title="You: 1%, Author: 80%, Boris: 19%"
           >
             Selfless
           </button>
           <button
-            onClick={() => applyPreset({ highlighter: 10, boris: 80, author: 10 })}
-            className="zap-preset-btn"
+            onClick={() => applyPreset(presets.boris)}
+            className={`zap-preset-btn ${isPresetActive(presets.boris) ? 'active' : ''}`}
             title="You: 10%, Author: 10%, Boris: 80%"
           >
             Boris 🧡

src/components/SidebarHeader.tsx

@@ -108,15 +108,6 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
           ariaLabel="Settings"
           variant="ghost"
         />
-        {activeAccount && (
-          <IconButton
-            icon={faPlus}
-            onClick={() => setShowAddModal(true)}
-            title="Add bookmark"
-            ariaLabel="Add bookmark"
-            variant="ghost"
-          />
-        )}
         {onRefresh && (
           <IconButton
             icon={faRotate}
@@ -128,6 +119,15 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
             spin={isRefreshing}
           />
         )}
+        {activeAccount && (
+          <IconButton
+            icon={faPlus}
+            onClick={() => setShowAddModal(true)}
+            title="Add bookmark"
+            ariaLabel="Add bookmark"
+            variant="ghost"
+          />
+        )}
         {activeAccount ? (
           <IconButton
             icon={faRightFromBracket}

src/components/ThreePaneLayout.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { RelayPool } from 'applesauce-relay'
+import { IEventStore } from 'applesauce-core'
 import { BookmarkList } from './BookmarkList'
 import ContentPanel from './ContentPanel'
 import { HighlightsPanel } from './HighlightsPanel'
 import Settings from './Settings'
 import Toast from './Toast'
 import { HighlightButton } from './HighlightButton'
+import { RelayStatusIndicator } from './RelayStatusIndicator'
 import { ViewMode } from './Bookmarks'
 import { Bookmark } from '../types/bookmarks'
 import { Highlight } from '../types/highlights'
@@ -32,6 +34,7 @@ interface ThreePaneLayoutProps {
   onOpenSettings: () => void
   onRefresh: () => void
   relayPool: RelayPool | null
+  eventStore: IEventStore | null
   
   // Content pane
   readerLoading: boolean
@@ -97,6 +100,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               settings={props.settings}
               onSave={props.onSaveSettings}
               onClose={props.onCloseSettings}
+              relayPool={props.relayPool}
             />
           ) : (
             <ContentPanel 
@@ -105,6 +109,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               html={props.readerContent?.html}
               markdown={props.readerContent?.markdown}
               image={props.readerContent?.image}
+              summary={props.readerContent?.summary}
+              published={props.readerContent?.published}
               selectedUrl={props.selectedUrl}
               highlights={props.classifiedHighlights}
               showHighlights={props.showHighlights}
@@ -136,6 +142,8 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
             highlightVisibility={props.highlightVisibility}
             onHighlightVisibilityChange={props.onHighlightVisibilityChange}
             followedPubkeys={props.followedPubkeys}
+            relayPool={props.relayPool}
+            eventStore={props.eventStore}
           />
         </div>
       </div>
@@ -146,6 +154,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
           highlightColor={props.settings.highlightColor || '#ffff00'}
         />
       )}
+      <RelayStatusIndicator relayPool={props.relayPool} />
       {props.toastMessage && (
         <Toast
           message={props.toastMessage}

src/config/relays.ts

@@ -3,9 +3,10 @@
  * Single set of relays used throughout the application
  */
 
-// All relays including local relay
+// All relays including local relays
 export const RELAYS = [
   'ws://localhost:10547',
+  'ws://localhost:4869',
   'wss://relay.damus.io',
   'wss://nos.lol',
   'wss://relay.nostr.band',

src/hooks/useArticleLoader.ts

@@ -5,6 +5,7 @@ import { fetchHighlightsForArticle } from '../services/highlightService'
 import { ReadableContent } from '../services/readerService'
 import { Highlight } from '../types/highlights'
 import { NostrEvent } from 'nostr-tools'
+import { UserSettings } from '../services/settingsService'
 
 interface UseArticleLoaderProps {
   naddr: string | undefined
@@ -18,6 +19,7 @@ interface UseArticleLoaderProps {
   setCurrentArticleCoordinate: (coord: string | undefined) => void
   setCurrentArticleEventId: (id: string | undefined) => void
   setCurrentArticle?: (article: NostrEvent) => void
+  settings?: UserSettings
 }
 
 export function useArticleLoader({
@@ -31,7 +33,8 @@ export function useArticleLoader({
   setHighlightsLoading,
   setCurrentArticleCoordinate,
   setCurrentArticleEventId,
-  setCurrentArticle
+  setCurrentArticle,
+  settings
 }: UseArticleLoaderProps) {
   useEffect(() => {
     if (!relayPool || !naddr) return
@@ -44,11 +47,13 @@ export function useArticleLoader({
       // Keep highlights panel collapsed by default - only open on user interaction
       
       try {
-        const article = await fetchArticleByNaddr(relayPool, naddr)
+        const article = await fetchArticleByNaddr(relayPool, naddr, false, settings)
         setReaderContent({
           title: article.title,
           markdown: article.markdown,
           image: article.image,
+          summary: article.summary,
+          published: article.published,
           url: `nostr:${naddr}`
         })
         
@@ -71,19 +76,23 @@ export function useArticleLoader({
         try {
           setHighlightsLoading(true)
           setHighlights([]) // Clear old highlights
-          const highlightsList: Highlight[] = []
+          const highlightsMap = new Map<string, Highlight>()
           
           await fetchHighlightsForArticle(
             relayPool, 
             articleCoordinate, 
             article.event.id,
             (highlight) => {
-              // Render each highlight immediately as it arrives
-              highlightsList.push(highlight)
-              setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
-            }
+              // 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))
+              }
+            },
+            settings
           )
-          console.log(`📌 Found ${highlightsList.length} highlights`)
+          console.log(`📌 Found ${highlightsMap.size} highlights`)
         } catch (err) {
           console.error('Failed to fetch highlights:', err)
         } finally {
@@ -101,5 +110,5 @@ export function useArticleLoader({
     }
     
     loadArticle()
-  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle])
+  }, [naddr, relayPool, setSelectedUrl, setReaderContent, setReaderLoading, setIsCollapsed, setHighlights, setHighlightsLoading, setCurrentArticleCoordinate, setCurrentArticleEventId, setCurrentArticle, settings])
 }

src/hooks/useBookmarksData.ts

@@ -5,6 +5,7 @@ import { Highlight } from '../types/highlights'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
 import { fetchContacts } from '../services/contactService'
+import { UserSettings } from '../services/settingsService'
 
 interface UseBookmarksDataParams {
   relayPool: RelayPool | null
@@ -15,6 +16,7 @@ interface UseBookmarksDataParams {
   naddr?: string
   currentArticleCoordinate?: string
   currentArticleEventId?: string
+  settings?: UserSettings
 }
 
 export const useBookmarksData = ({
@@ -23,7 +25,8 @@ export const useBookmarksData = ({
   accountManager,
   naddr,
   currentArticleCoordinate,
-  currentArticleEventId
+  currentArticleEventId,
+  settings
 }: UseBookmarksDataParams) => {
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
   const [bookmarksLoading, setBookmarksLoading] = useState(true)
@@ -43,11 +46,11 @@ export const useBookmarksData = ({
     setBookmarksLoading(true)
     try {
       const fullAccount = accountManager.getActive()
-      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks)
+      await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks, settings)
     } finally {
       setBookmarksLoading(false)
     }
-  }, [relayPool, activeAccount, accountManager])
+  }, [relayPool, activeAccount, accountManager, settings])
 
   const handleFetchHighlights = useCallback(async () => {
     if (!relayPool) return
@@ -55,19 +58,24 @@ export const useBookmarksData = ({
     setHighlightsLoading(true)
     try {
       if (currentArticleCoordinate) {
-        const highlightsList: Highlight[] = []
+        const highlightsMap = new Map<string, Highlight>()
         await fetchHighlightsForArticle(
           relayPool, 
           currentArticleCoordinate, 
           currentArticleEventId,
           (highlight) => {
-            highlightsList.push(highlight)
-            setHighlights([...highlightsList].sort((a, b) => b.created_at - a.created_at))
-          }
+            // 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))
+            }
+          },
+          settings
         )
-        console.log(`🔄 Refreshed ${highlightsList.length} highlights for article`)
+        console.log(`🔄 Refreshed ${highlightsMap.size} highlights for article`)
       } else if (activeAccount) {
-        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
+        const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey, undefined, settings)
         setHighlights(fetchedHighlights)
       }
     } catch (err) {
@@ -75,7 +83,7 @@ export const useBookmarksData = ({
     } finally {
       setHighlightsLoading(false)
     }
-  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId])
+  }, [relayPool, activeAccount, currentArticleCoordinate, currentArticleEventId, settings])
 
   const handleRefreshAll = useCallback(async () => {
     if (!relayPool || !activeAccount || isRefreshing) return

src/hooks/useBookmarksUI.ts

@@ -14,7 +14,6 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
   const [viewMode, setViewMode] = useState<ViewMode>('compact')
   const [showHighlights, setShowHighlights] = useState(true)
   const [selectedHighlightId, setSelectedHighlightId] = useState<string | undefined>(undefined)
-  const [showSettings, setShowSettings] = useState(false)
   const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState<string | undefined>(undefined)
   const [currentArticleEventId, setCurrentArticleEventId] = useState<string | undefined>(undefined)
   const [currentArticle, setCurrentArticle] = useState<NostrEvent | undefined>(undefined)
@@ -46,8 +45,6 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     setShowHighlights,
     selectedHighlightId,
     setSelectedHighlightId,
-    showSettings,
-    setShowSettings,
     currentArticleCoordinate,
     setCurrentArticleCoordinate,
     currentArticleEventId,

src/hooks/useHighlightCreation.ts

@@ -1,9 +1,10 @@
 import { useCallback, useRef } from 'react'
 import { RelayPool } from 'applesauce-relay'
 import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
 import { Highlight } from '../types/highlights'
 import { ReadableContent } from '../services/readerService'
-import { createHighlight, eventToHighlight } from '../services/highlightCreationService'
+import { createHighlight } from '../services/highlightCreationService'
 import { HighlightButtonRef } from '../components/HighlightButton'
 import { UserSettings } from '../services/settingsService'
 
@@ -11,6 +12,7 @@ interface UseHighlightCreationParams {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   activeAccount: any
   relayPool: RelayPool | null
+  eventStore: IEventStore | null
   currentArticle: NostrEvent | undefined
   selectedUrl: string | undefined
   readerContent: ReadableContent | undefined
@@ -21,6 +23,7 @@ interface UseHighlightCreationParams {
 export const useHighlightCreation = ({
   activeAccount,
   relayPool,
+  eventStore,
   currentArticle,
   selectedUrl,
   readerContent,
@@ -38,7 +41,7 @@ export const useHighlightCreation = ({
   }, [])
 
   const handleCreateHighlight = useCallback(async (text: string) => {
-    if (!activeAccount || !relayPool) {
+    if (!activeAccount || !relayPool || !eventStore) {
       console.error('Missing requirements for highlight creation')
       return
     }
@@ -54,25 +57,34 @@ export const useHighlightCreation = ({
         ? currentArticle.content 
         : readerContent?.markdown || readerContent?.html
       
-      const signedEvent = await createHighlight(
+      console.log('🎯 Creating highlight...', { text: text.substring(0, 50) + '...' })
+      
+      const newHighlight = await createHighlight(
         text,
         source,
         activeAccount,
         relayPool,
+        eventStore,
         contentForContext,
         undefined,
         settings
       )
       
-      console.log('✅ Highlight created successfully!')
-      highlightButtonRef.current?.clearSelection()
+      console.log('✅ Highlight created successfully!', {
+        id: newHighlight.id,
+        isLocalOnly: newHighlight.isLocalOnly,
+        isOfflineCreated: newHighlight.isOfflineCreated,
+        publishedRelays: newHighlight.publishedRelays
+      })
       
-      const newHighlight = eventToHighlight(signedEvent)
+      highlightButtonRef.current?.clearSelection()
       onHighlightCreated(newHighlight)
     } catch (error) {
-      console.error('Failed to create highlight:', error)
+      console.error('❌ Failed to create highlight:', error)
+      // Re-throw to allow parent to handle
+      throw error
     }
-  }, [activeAccount, relayPool, currentArticle, selectedUrl, readerContent, onHighlightCreated, settings])
+  }, [activeAccount, relayPool, eventStore, currentArticle, selectedUrl, readerContent, onHighlightCreated, settings])
 
   return {
     highlightButtonRef,

src/hooks/useOfflineSync.ts

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { IAccount } from 'applesauce-accounts'
+import { IEventStore } from 'applesauce-core'
+import { syncLocalEventsToRemote } from '../services/offlineSyncService'
+import { isLocalRelay } from '../utils/helpers'
+import { RelayStatus } from '../services/relayStatusService'
+
+interface UseOfflineSyncParams {
+  relayPool: RelayPool | null
+  account: IAccount | null
+  eventStore: IEventStore | null
+  relayStatuses: RelayStatus[]
+  enabled?: boolean
+}
+
+export function useOfflineSync({
+  relayPool,
+  account: _account,
+  eventStore,
+  relayStatuses,
+  enabled = true
+}: UseOfflineSyncParams) {
+  const previousStateRef = useRef<{
+    hasRemoteRelays: boolean
+    initialized: boolean
+  }>({
+    hasRemoteRelays: false,
+    initialized: false
+  })
+
+  useEffect(() => {
+    if (!enabled || !relayPool || !_account || !eventStore) return
+
+    const connectedRelays = relayStatuses.filter(r => r.isInPool)
+    const hasRemoteRelays = connectedRelays.some(r => !isLocalRelay(r.url))
+    const hasLocalRelays = connectedRelays.some(r => isLocalRelay(r.url))
+
+    // Skip the first check to avoid syncing on initial load
+    if (!previousStateRef.current.initialized) {
+      previousStateRef.current = {
+        hasRemoteRelays,
+        initialized: true
+      }
+      return
+    }
+
+    // Detect transition: from local-only to having remote relays
+    const wasLocalOnly = !previousStateRef.current.hasRemoteRelays && hasLocalRelays
+    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
+      })
+      
+      // Wait a moment for relays to fully establish connections
+      setTimeout(() => {
+        console.log('🚀 Starting sync after delay...')
+        syncLocalEventsToRemote(relayPool, eventStore)
+      }, 2000)
+    }
+
+    previousStateRef.current.hasRemoteRelays = hasRemoteRelays
+  }, [relayPool, _account, eventStore, relayStatuses, enabled])
+}
+

src/hooks/useRelayStatus.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { RelayStatus, updateAndGetRelayStatuses } from '../services/relayStatusService'
+
+interface UseRelayStatusParams {
+  relayPool: RelayPool | null
+  pollingInterval?: number // in milliseconds
+}
+
+export function useRelayStatus({ 
+  relayPool, 
+  pollingInterval = 20000 
+}: UseRelayStatusParams) {
+  const [relayStatuses, setRelayStatuses] = useState<RelayStatus[]>([])
+
+  useEffect(() => {
+    if (!relayPool) return
+
+    const updateStatuses = () => {
+      const statuses = updateAndGetRelayStatuses(relayPool)
+      setRelayStatuses(statuses)
+    }
+
+    // Initial update
+    updateStatuses()
+
+    // Poll for updates
+    const interval = setInterval(updateStatuses, pollingInterval)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [relayPool, pollingInterval])
+
+  return relayStatuses
+}
+

src/hooks/useSettings.ts

@@ -58,7 +58,7 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
       
       // Apply font settings after font is loaded
       root.setProperty('--reading-font', getFontFamily(fontKey))
-      root.setProperty('--reading-font-size', `${settings.fontSize || 18}px`)
+      root.setProperty('--reading-font-size', `${settings.fontSize || 21}px`)
       
       // Set highlight colors for three levels
       root.setProperty('--highlight-color-mine', settings.highlightColorMine || '#ffff00')

src/index.css

@@ -501,17 +501,21 @@ body {
 }
 
 .reader-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
+  margin-bottom: 2rem;
+  position: relative;
 }
 
 .reader-title {
-  margin: 0;
-  flex: 1;
+  margin: 0 0 0.75rem 0;
+  font-family: var(--reading-font);
+}
+
+.reader-summary {
+  color: #aaa;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
+  font-family: var(--reading-font);
 }
 
 .reader-meta {
@@ -521,6 +525,31 @@ body {
   flex-wrap: wrap;
 }
 
+.publish-date {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.813rem;
+  color: rgba(136, 136, 136, 0.7);
+  opacity: 0.85;
+}
+
+.publish-date svg {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+
+.publish-date-topright {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  font-size: 0.813rem;
+  color: #fff;
+  padding: 0.4rem 0.75rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
 .reading-time {
   display: flex;
   align-items: center;
@@ -1070,6 +1099,8 @@ body {
   margin: 0 0 2rem 0;
   border-radius: 8px;
   overflow: hidden;
+  position: relative;
+  min-height: 300px;
 }
 
 .reader-hero-image img {
@@ -1080,6 +1111,61 @@ body {
   display: block;
 }
 
+.reader-header-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2rem 2rem 1.5rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
+}
+
+.reader-header-overlay .reader-title {
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  margin-bottom: 0.75rem;
+}
+
+.reader-header-overlay .reader-summary {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.1rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  font-family: var(--reading-font);
+}
+
+.reader-header-overlay .reader-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.reader-header-overlay .publish-date {
+  color: rgba(255, 255, 255, 0.65);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  opacity: 1;
+}
+
+.reader-header-overlay .publish-date svg {
+  opacity: 0.7;
+}
+
+
+.reader-header-overlay .reading-time,
+.reader-header-overlay .highlight-indicator {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: #fff;
+}
+
+.reader-header-overlay .highlight-indicator {
+  background: rgba(100, 108, 255, 0.25);
+  border: 1px solid rgba(100, 108, 255, 0.4);
+}
+
 /* Private Bookmark Styles */
 .private-bookmark {
   background: #2a2a2a;
@@ -1171,6 +1257,14 @@ body {
     color: #646cff;
   }
   
+  .highlight-relay-indicator {
+    color: #666;
+  }
+  
+  .highlight-relay-indicator:hover {
+    color: #333;
+  }
+  
   .highlight-text {
     color: #213547;
   }
@@ -1471,6 +1565,28 @@ body {
   font-size: 1.2rem;
   flex-shrink: 0;
   margin-top: 0.25rem;
+  position: relative;
+}
+
+.highlight-relay-indicator {
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  font-size: 0.7rem;
+  color: #888;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.highlight-relay-indicator:hover {
+  opacity: 1;
+  color: #aaa;
+  transform: scale(1.1);
+}
+
+.highlight-relay-indicator:active {
+  transform: scale(0.95);
 }
 
 /* Level-colored quote icon */
@@ -2358,3 +2474,84 @@ body {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* Relay Status Indicator */
+.relay-status-indicator {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 1.5rem;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(245, 158, 11, 0.95);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+  cursor: default;
+}
+
+.relay-status-indicator:hover {
+  background: rgba(245, 158, 11, 1);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.relay-status-icon {
+  font-size: 1.25rem;
+  color: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.relay-status-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.relay-status-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.2;
+}
+
+.relay-status-subtitle {
+  font-size: 0.75rem;
+  color: rgba(26, 26, 26, 0.8);
+  line-height: 1.2;
+}
+
+.relay-status-pulse {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.25rem;
+}
+
+.pulse-icon {
+  font-size: 0.875rem;
+  color: rgba(26, 26, 26, 0.6);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+/* Adjust for collapsed sidebar */
+.three-pane.sidebar-collapsed .relay-status-indicator {
+  left: calc(var(--sidebar-collapsed-width) + 1.5rem);
+}

src/services/articleService.ts

@@ -5,6 +5,8 @@ import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
 import { Helpers } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 const { getArticleTitle, getArticleImage, getArticlePublished, getArticleSummary } = Helpers
 
@@ -71,11 +73,13 @@ function saveToCache(naddr: string, content: ArticleContent): void {
  * @param relayPool - The relay pool to query
  * @param naddr - The article's naddr
  * @param bypassCache - If true, skip cache and fetch fresh from relays
+ * @param settings - User settings for rebroadcast options
  */
 export async function fetchArticleByNaddr(
   relayPool: RelayPool,
   naddr: string,
-  bypassCache = false
+  bypassCache = false,
+  settings?: UserSettings
 ): Promise<ArticleContent> {
   try {
     // Check cache first unless bypassed
@@ -120,6 +124,9 @@ export async function fetchArticleByNaddr(
     events.sort((a, b) => b.created_at - a.created_at)
     const article = events[0]
 
+    // Rebroadcast article to local/all relays based on settings
+    await rebroadcastEvents([article], relayPool, settings)
+
     const title = getArticleTitle(article) || 'Untitled Article'
     const image = getArticleImage(article)
     const published = getArticlePublished(article)

src/services/bookmarkService.ts

@@ -14,13 +14,16 @@ import {
 } from './bookmarkHelpers'
 import { Bookmark } from '../types/bookmarks'
 import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 
 
 export const fetchBookmarks = async (
   relayPool: RelayPool,
   activeAccount: unknown, // Full account object with extension capabilities
-  setBookmarks: (bookmarks: Bookmark[]) => void
+  setBookmarks: (bookmarks: Bookmark[]) => void,
+  settings?: UserSettings
 ) => {
   try {
     
@@ -37,6 +40,9 @@ export const fetchBookmarks = async (
         .pipe(completeOnEose(), takeUntil(timer(20000)), toArray())
     )
     console.log('📊 Raw events fetched:', rawEvents.length, 'events')
+    
+    // Rebroadcast bookmark events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
 
     // Check for events with potentially encrypted content
     const eventsWithContent = rawEvents.filter(evt => evt.content && evt.content.length > 0)

src/services/highlightCreationService.ts

@@ -3,10 +3,12 @@ import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { AddressPointer } from 'nostr-tools/nip19'
 import { NostrEvent } from 'nostr-tools'
-import { Helpers } from 'applesauce-core'
+import { Helpers, IEventStore } from 'applesauce-core'
 import { RELAYS } from '../config/relays'
 import { Highlight } from '../types/highlights'
 import { UserSettings } from './settingsService'
+import { areAllRelaysLocal } from '../utils/helpers'
+import { markEventAsOfflineCreated } from './offlineSyncService'
 
 // Boris pubkey for zap splits
 const BORIS_PUBKEY = '6e468422dfb74a5738702a8823b9b28168fc6cfb119d613e49ca0ec5a0bbd0c3'
@@ -26,17 +28,18 @@ const { HighlightBlueprint } = Blueprints
 /**
  * Creates and publishes a highlight event (NIP-84)
  * Supports both nostr-native articles and external URLs
- * Returns the signed event for immediate UI updates
+ * Returns a Highlight object with relay tracking info for immediate UI updates
  */
 export async function createHighlight(
   selectedText: string,
   source: NostrEvent | string,
   account: IAccount,
   relayPool: RelayPool,
+  eventStore: IEventStore,
   contentForContext?: string,
   comment?: string,
   settings?: UserSettings
-): Promise<NostrEvent> {
+): Promise<Highlight> {
   if (!selectedText || !source) {
     throw new Error('Missing required data to create highlight')
   }
@@ -104,13 +107,60 @@ export async function createHighlight(
   // Sign the event
   const signedEvent = await factory.sign(highlightEvent)
 
-  // Publish to relays (including local relay)
-  await relayPool.publish(RELAYS, signedEvent)
+  // Publish to all configured relays - let the relay pool handle connection state
+  const targetRelays = RELAYS
   
-  console.log('✅ Highlight published to', RELAYS.length, 'relays (including local):', signedEvent)
+  // Store the event in the local EventStore FIRST for immediate UI display
+  eventStore.add(signedEvent)
+  console.log('💾 Stored highlight in EventStore:', signedEvent.id.slice(0, 8))
   
-  // Return the signed event for immediate UI updates
-  return signedEvent
+  // Check current connection status - are we online or in flight mode?
+  const connectedRelays = Array.from(relayPool.relays.values())
+    .filter(relay => relay.connected)
+    .map(relay => relay.url)
+  
+  const hasRemoteConnection = connectedRelays.some(url => 
+    !url.includes('localhost') && !url.includes('127.0.0.1')
+  )
+  
+  // Determine which relays we expect to succeed
+  const expectedSuccessRelays = hasRemoteConnection 
+    ? RELAYS 
+    : RELAYS.filter(r => r.includes('localhost') || r.includes('127.0.0.1'))
+  
+  const isLocalOnly = areAllRelaysLocal(expectedSuccessRelays)
+  
+  console.log('📍 Highlight relay status:', {
+    targetRelays: targetRelays.length,
+    expectedSuccessRelays,
+    isLocalOnly,
+    hasRemoteConnection,
+    eventId: signedEvent.id
+  })
+  
+  // If we're in local-only mode, mark this event for later sync
+  if (isLocalOnly) {
+    markEventAsOfflineCreated(signedEvent.id)
+  }
+  
+  // Convert to Highlight with relay tracking info and return IMMEDIATELY
+  const highlight = eventToHighlight(signedEvent)
+  highlight.publishedRelays = expectedSuccessRelays // Show only relays we expect to succeed
+  highlight.isLocalOnly = isLocalOnly
+  highlight.isOfflineCreated = isLocalOnly // Mark as created offline if local-only
+  
+  // Publish to relays in the background (non-blocking)
+  // This allows instant UI updates while publishing happens asynchronously
+  relayPool.publish(targetRelays, signedEvent)
+    .then(() => {
+      console.log('✅ Highlight published to', targetRelays.length, 'relay(s):', targetRelays)
+    })
+    .catch((error) => {
+      console.warn('⚠️ Failed to publish highlight to relays (event still saved locally):', error)
+    })
+  
+  // Return the highlight immediately for instant UI updates
+  return highlight
 }
 
 /**

src/services/highlightService.ts

@@ -4,18 +4,23 @@ import { NostrEvent } from 'nostr-tools'
 import { Highlight } from '../types/highlights'
 import { RELAYS } from '../config/relays'
 import { eventToHighlight, dedupeHighlights, sortHighlights } from './highlightEventProcessor'
+import { UserSettings } from './settingsService'
+import { rebroadcastEvents } from './rebroadcastService'
 
 /**
  * Fetches highlights for a specific article by its address coordinate and/or event ID
  * @param relayPool - The relay pool to query
  * @param articleCoordinate - The article's address in format "kind:pubkey:identifier" (e.g., "30023:abc...def:my-article")
  * @param eventId - Optional event ID to also query by 'e' tag
+ * @param onHighlight - Optional callback to receive highlights as they arrive
+ * @param settings - User settings for rebroadcast options
  */
 export const fetchHighlightsForArticle = async (
   relayPool: RelayPool,
   articleCoordinate: string,
   eventId?: string,
-  onHighlight?: (highlight: Highlight) => void
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
 ): Promise<Highlight[]> => {
   try {
     console.log('🔍 Fetching highlights (kind 9802) for article:', articleCoordinate)
@@ -75,6 +80,9 @@ export const fetchHighlightsForArticle = async (
     const rawEvents = [...aTagEvents, ...eTagEvents]
     console.log('📊 Total raw highlight events fetched:', rawEvents.length)
     
+    // Rebroadcast highlight events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
     if (rawEvents.length > 0) {
       console.log('📄 Sample highlight tags:', JSON.stringify(rawEvents[0].tags, null, 2))
     } else {
@@ -99,10 +107,12 @@ export const fetchHighlightsForArticle = async (
  * Fetches highlights for a specific URL
  * @param relayPool - The relay pool to query
  * @param url - The external URL to find highlights for
+ * @param settings - User settings for rebroadcast options
  */
 export const fetchHighlightsForUrl = async (
   relayPool: RelayPool,
-  url: string
+  url: string,
+  settings?: UserSettings
 ): Promise<Highlight[]> => {
   try {
     console.log('🔍 Fetching highlights (kind 9802) for URL:', url)
@@ -124,6 +134,9 @@ export const fetchHighlightsForUrl = async (
     
     console.log('📊 Highlights for URL:', rawEvents.length)
     
+    // Rebroadcast highlight events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
     const uniqueEvents = dedupeHighlights(rawEvents)
     const highlights: Highlight[] = uniqueEvents.map(eventToHighlight)
     return sortHighlights(highlights)
@@ -138,11 +151,13 @@ export const fetchHighlightsForUrl = async (
  * @param relayPool - The relay pool to query
  * @param pubkey - The user's public key
  * @param onHighlight - Optional callback to receive highlights as they arrive
+ * @param settings - User settings for rebroadcast options
  */
 export const fetchHighlights = async (
   relayPool: RelayPool,
   pubkey: string,
-  onHighlight?: (highlight: Highlight) => void
+  onHighlight?: (highlight: Highlight) => void,
+  settings?: UserSettings
 ): Promise<Highlight[]> => {
   try {
     const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
@@ -172,6 +187,9 @@ export const fetchHighlights = async (
     
     console.log('📊 Raw highlight events fetched:', rawEvents.length)
     
+    // Rebroadcast highlight events to local/all relays based on settings
+    await rebroadcastEvents(rawEvents, relayPool, settings)
+    
     // Deduplicate and process events
     const uniqueEvents = dedupeHighlights(rawEvents)
     console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)

src/services/offlineSyncService.ts

@@ -0,0 +1,158 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { IEventStore } from 'applesauce-core'
+import { RELAYS } from '../config/relays'
+import { isLocalRelay } from '../utils/helpers'
+
+let isSyncing = false
+
+// Track events created during offline period
+const offlineCreatedEvents = new Set<string>()
+
+// Track events currently being synced
+const syncingEvents = new Set<string>()
+
+// Callbacks to notify when sync state changes
+const syncStateListeners: Array<(eventId: string, isSyncing: boolean) => void> = []
+
+/**
+ * Marks an event as created during offline period
+ */
+export function markEventAsOfflineCreated(eventId: string): void {
+  offlineCreatedEvents.add(eventId)
+  console.log(`📝 Marked event ${eventId.slice(0, 8)} as offline-created. Total: ${offlineCreatedEvents.size}`)
+}
+
+/**
+ * Check if an event is currently being synced
+ */
+export function isEventSyncing(eventId: string): boolean {
+  return syncingEvents.has(eventId)
+}
+
+/**
+ * Subscribe to sync state changes
+ */
+export function onSyncStateChange(callback: (eventId: string, isSyncing: boolean) => void): () => void {
+  syncStateListeners.push(callback)
+  return () => {
+    const index = syncStateListeners.indexOf(callback)
+    if (index > -1) syncStateListeners.splice(index, 1)
+  }
+}
+
+/**
+ * Notify listeners of sync state change
+ */
+function notifySyncStateChange(eventId: string, isSyncing: boolean): void {
+  syncStateListeners.forEach(listener => listener(eventId, isSyncing))
+}
+
+/**
+ * Syncs local-only events to remote relays when coming back online
+ * Now uses applesauce EventStore instead of querying relays
+ */
+export async function syncLocalEventsToRemote(
+  relayPool: RelayPool,
+  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
+    }
+
+    // Deduplicate events by id
+    const uniqueEvents = Array.from(
+      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)
+      notifySyncStateChange(event.id, true)
+    })
+
+    // 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)
+      }
+    }
+
+    console.log(`✅ Synced ${successCount}/${uniqueEvents.length} events to remote relays`)
+    
+    // Clear syncing state and offline tracking for successful events
+    successfulIds.forEach(eventId => {
+      syncingEvents.delete(eventId)
+      offlineCreatedEvents.delete(eventId)
+      notifySyncStateChange(eventId, false)
+    })
+    
+    // Clear syncing state for failed events
+    uniqueEvents.forEach(event => {
+      if (!successfulIds.includes(event.id)) {
+        syncingEvents.delete(event.id)
+        notifySyncStateChange(event.id, false)
+      }
+    })
+  } catch (error) {
+    console.error('❌ Error during offline sync:', error)
+  } finally {
+    isSyncing = false
+  }
+}
+

src/services/readerService.ts

@@ -7,6 +7,8 @@ export interface ReadableContent {
   html?: string
   markdown?: string
   image?: string
+  summary?: string
+  published?: number
 }
 
 interface CachedContent {
@@ -57,7 +59,7 @@ function saveToCache(url: string, content: ReadableContent): void {
 function toProxyUrl(url: string): string {
   // Ensure the target URL has a protocol and build the proxy URL
   const normalized = /^https?:\/\//i.test(url) ? url : `https://${url}`
-  return `https://r.jina.ai/http://${normalized.replace(/^https?:\/\//, '')}`
+  return `https://r.jina.ai/${normalized}`
 }
 
 export async function fetchReadableContent(

src/services/rebroadcastService.ts

@@ -0,0 +1,78 @@
+import { RelayPool } from 'applesauce-relay'
+import { NostrEvent } from 'nostr-tools'
+import { UserSettings } from './settingsService'
+import { RELAYS } from '../config/relays'
+import { isLocalRelay } from '../utils/helpers'
+
+/**
+ * Rebroadcasts events to relays based on user settings
+ * @param events Events to rebroadcast
+ * @param relayPool The relay pool to use for publishing
+ * @param settings User settings to determine which relays to broadcast to
+ */
+export async function rebroadcastEvents(
+  events: NostrEvent[],
+  relayPool: RelayPool,
+  settings?: UserSettings
+): Promise<void> {
+  if (!events || events.length === 0) {
+    return
+  }
+
+  // Check if any rebroadcast is enabled
+  const useLocalCache = settings?.useLocalRelayAsCache ?? true
+  const broadcastToAll = settings?.rebroadcastToAllRelays ?? false
+
+  if (!useLocalCache && !broadcastToAll) {
+    return // No rebroadcast enabled
+  }
+
+  // Check current relay connectivity - don't rebroadcast in flight mode
+  const connectedRelays = Array.from(relayPool.relays.values())
+  const connectedRemoteRelays = connectedRelays.filter(relay => relay.connected && !isLocalRelay(relay.url))
+  const hasRemoteConnection = connectedRemoteRelays.length > 0
+  
+  // 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
+  }
+
+  // Determine target relays based on settings
+  let targetRelays: string[] = []
+  
+  if (broadcastToAll) {
+    // Broadcast to all relays (only if we have remote connection)
+    targetRelays = RELAYS
+  } else if (useLocalCache) {
+    // Only broadcast to local relays
+    targetRelays = RELAYS.filter(isLocalRelay)
+  }
+
+  if (targetRelays.length === 0) {
+    console.log('📡 No target relays for rebroadcast')
+    return
+  }
+
+  // Rebroadcast each event
+  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)
+    }
+  })
+
+  // Execute all rebroadcasts (don't block on completion)
+  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/relayStatusService.ts

@@ -0,0 +1,85 @@
+import { RelayPool } from 'applesauce-relay'
+
+export interface RelayStatus {
+  url: string
+  isInPool: boolean
+  lastSeen: number // timestamp
+}
+
+// How long to show disconnected relays as "recently seen" before hiding them
+const RECENT_CONNECTION_WINDOW = 10 * 1000 // 10 seconds
+
+// In-memory tracking of relay last seen times
+const relayLastSeen = new Map<string, number>()
+
+/**
+ * Updates and gets the current status of all relays
+ */
+export function updateAndGetRelayStatuses(relayPool: RelayPool): RelayStatus[] {
+  const statuses: RelayStatus[] = []
+  const now = Date.now()
+  const currentlyConnectedUrls = new Set<string>()
+  
+  // Check all relays in the pool for their actual connection status
+  for (const relay of relayPool.relays.values()) {
+    const isConnected = relay.connected
+    
+    if (isConnected) {
+      currentlyConnectedUrls.add(relay.url)
+      relayLastSeen.set(relay.url, now)
+    }
+    
+    statuses.push({
+      url: relay.url,
+      isInPool: isConnected,
+      lastSeen: isConnected ? now : (relayLastSeen.get(relay.url) || now)
+    })
+  }
+  
+  // Debug logging
+  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(', '))
+  }
+  
+  // Add recently seen relays that are no longer connected
+  const cutoffTime = now - RECENT_CONNECTION_WINDOW
+  for (const [url, lastSeen] of relayLastSeen.entries()) {
+    if (!currentlyConnectedUrls.has(url) && lastSeen >= cutoffTime) {
+      // Check if this relay is already in statuses (might be in pool but not connected)
+      const existingStatus = statuses.find(s => s.url === url)
+      if (!existingStatus) {
+        statuses.push({
+          url,
+          isInPool: false,
+          lastSeen
+        })
+      }
+    }
+  }
+  
+  // Clean up old entries
+  for (const [url, lastSeen] of relayLastSeen.entries()) {
+    if (lastSeen < cutoffTime) {
+      relayLastSeen.delete(url)
+    }
+  }
+  
+  return statuses.sort((a, b) => {
+    if (a.isInPool !== b.isInPool) return a.isInPool ? -1 : 1
+    return b.lastSeen - a.lastSeen
+  })
+}
+
+/**
+ * Gets count of currently active relays
+ */
+export function getActiveCount(statuses: RelayStatus[]): number {
+  return statuses.filter(r => r.isInPool).length
+}
+

src/services/settingsService.ts

@@ -39,6 +39,9 @@ export interface UserSettings {
   zapSplitHighlighterWeight?: number // default 50
   zapSplitBorisWeight?: number // default 2.1
   zapSplitAuthorWeight?: number // default 50
+  // Relay rebroadcast settings
+  useLocalRelayAsCache?: boolean // Rebroadcast events to local relays
+  rebroadcastToAllRelays?: boolean // Rebroadcast events to all relays
 }
 
 export async function loadSettings(

src/types/highlights.ts

@@ -15,5 +15,11 @@ export interface Highlight {
   comment?: string // optional comment about the highlight
   // Level classification (computed based on user's context)
   level?: HighlightLevel
+  // Relay tracking for offline/local-only highlights
+  publishedRelays?: string[] // URLs of relays where this was published (for user-created highlights)
+  seenOnRelays?: string[] // URLs of relays where this event was fetched from
+  isLocalOnly?: boolean // true if only published to local relays
+  isOfflineCreated?: boolean // true if created while in flight mode (offline)
+  isSyncing?: boolean // true if currently being synced to remote relays
 }
 

src/utils/contentLoader.ts

@@ -32,6 +32,7 @@ export async function loadContent(
         title: article.title,
         markdown: article.markdown,
         image: article.image,
+        summary: article.summary,
         url: `nostr:${naddr}`
       }
     } else {

src/utils/helpers.ts

@@ -40,3 +40,26 @@ export const classifyUrl = (url: string | undefined): UrlClassification => {
   return { type: 'article', buttonText: 'READ NOW' }
 }
 
+/**
+ * Checks if a relay URL is a local relay (localhost or 127.0.0.1)
+ */
+export const isLocalRelay = (relayUrl: string): boolean => {
+  return relayUrl.includes('localhost') || relayUrl.includes('127.0.0.1')
+}
+
+/**
+ * Checks if all relays in the list are local relays
+ */
+export const areAllRelaysLocal = (relayUrls: string[]): boolean => {
+  if (!relayUrls || relayUrls.length === 0) return false
+  return relayUrls.every(isLocalRelay)
+}
+
+/**
+ * Checks if at least one relay is a remote (non-local) relay
+ */
+export const hasRemoteRelay = (relayUrls: string[]): boolean => {
+  if (!relayUrls || relayUrls.length === 0) return false
+  return relayUrls.some(url => !isLocalRelay(url))
+}
+