feat: entry previews (#24)

* feat: entry previews (video, tweet, article, iframe, image, audio bar)

- Add PreviewPanel dispatch hub routing by entity_kind + artifact extension
- VideoPreview: HTML5 <video> for YouTube/Instagram/TikTok/Reddit/X posts
- TweetPreview: tweet card, thread, and X article renderer (ported from x-article-renderer)
- IframePreview: sandboxed iframe for SingleFile web pages and PDFs
- ImagePreview: image viewer with click-to-open-fullsize
- AudioBar: persistent fixed-bottom player (Spotify-style) that survives entry navigation
- Lift entryDetail to App.jsx, shared between PreviewPanel and ContextRail
- 3-column layout (workspace | 300px preview | 340px rail) when preview active
- Stale-guard fixes: seq incremented before early returns in all async effects
- handleRearchive: capture startSeq/entryUid at call time, guard every async resume
- TweetPreview: reset loading/error/tweets before early-return branches

* feat: entry previews — tweet/thread/article/video/audio/image/iframe/pdf

- PreviewModal: modal overlay with new-tab link (↗) and keyboard close
- PreviewPanel: routes by entity_kind + primary_media extension to the
  correct viewer (tweet/video/audio/pdf/html/image/fallback)
- TweetPreview: full X-style tweet, thread, and article renderer with
  local artifact map for archived media (CDN fallback)
- AudioBar: persistent fixed bottom player, triggered via ContextRail
  Play button; body.has-audio-bar pads content above it
- VideoPreview, IframePreview, ImagePreview: inline viewers
- PreviewPage: standalone /preview/:archiveId/:entryUid route
- ContextRail: Play/Preview buttons; isAudio/isPreviewable detection
- App.jsx: preview modal state, currentAudio state, preview route guard,
  has-audio-bar body class effect
- routes.rs: CSP updated (media-src self blob https; frame-ancestors self;
  Google Fonts + external images/scripts whitelisted)
- styles.css: preview modal, tweet-wrap scroll (min-height:0), audio bar
  body padding, newtab button, preview panel flex layout

* style: tighten article/tweet preview spacing

- aMeta padding: 14px → 10px
- article title marginBottom: 10px → 8px
- aAuthorRow marginBottom: 10px → 8px
- bH1 top margin: 20px → 16px
- bH2 top margin: 18px → 14px
- bHr margin: 20px → 14px
- .preview-tweet-wrap padding: 20px → 12px (already committed)

More content visible above the fold in both modal and standalone views.

* feat: tweet/article preview quality pass

HTML entities: decode &gt; &lt; &amp; etc. on sliced segments only
(entity offsets index the stored string; decoding before slicing shifts them)

Image lightbox: click any tweet/thread/article image to open full-screen
viewer; cmd+click follows <a> to open in new tab; arrow-key + ‹ › nav;
Escape closes; 1/N counter; ↗ open-in-new-tab link

Multi-image grid: 2 photos → side-by-side (180px rows); 3 → left spans
both rows; 4 → 2×2 (140px rows); single image unchanged

Empty media grid ghost: build photos/videoItems arrays first, render
.mediaGrid div only when at least one item resolved (advisory: never gate
on raw media.length when map items can all return null)

QT indicator: ↻ QT badge on tweet.is_quote_status === true entries

Modal shrinks for short content: height: 88vh → max-height: 88vh;
.preview-modal-body gets max-height: calc(88vh - 52px) so long threads
still scroll (advisory: don't rely on flex:1 once parent has no fixed height)

Video scrollbar leak: .preview-modal-body overflow: auto → hidden; each
child (tweet-wrap, video-wrap, iframe) manages its own scroll surface

Styled thin scrollbar on .preview-tweet-wrap (matches workspace rail)

ArticleRenderer: cover image and body images are lightbox-clickable;
opts thread through renderBlocksJSX → renderBlockJSX → renderAtomicJSX

* fix: move artifact fetch to api.js; stop Escape propagation from lightbox

- Export fetchEntryArtifacts(archiveId, entryUid, indices) from api.js
  using Promise.all + getJson (follows project convention: all /api calls
  go through api.js, never inline fetch in components)
- TweetPreview: import fetchEntryArtifacts, replace inline Promise.all
- MediaLightbox keydown handler: stopPropagation + preventDefault for
  Escape/ArrowLeft/ArrowRight so the parent PreviewModal window listener
  does not also fire and close the modal behind the lightbox

* fix: iframe/page preview height chain and toolbar UX

Problem: changing .preview-modal from height to max-height broke iframe
previews - <iframe style='flex:1'> needs a concrete ancestor height, which
max-height alone doesn't supply when content is shorter than the cap.

Fix - CSS:
  .preview-modal--full { height: 88vh } applied to non-tweet modals
  .preview-modal--full .preview-modal-body { max-height: none }
  .preview-iframe-toolbar span: remove text-transform/letter-spacing
    (was uppercasing the URL/title in shouty caps)

Fix - PreviewModal: className adds --full when entity_kind is not
  tweet/tweet_thread; tweet previews keep shrink-to-fit behavior.

Fix - PreviewPanel: pass title + original_url from summary to IframePreview
  for both HTML and PDF; wrappers use flex:1/minHeight:0 not height:100%.

Fix - IframePreview:
  - Accept title + originalUrl props; show originalUrl in toolbar (falls
    back to artifact src only when original_url absent); show title above
    URL when available
  - flex:1 + minHeight:0 instead of height:100% on the wrap div
  - Single unified layout for page + pdf (both just show the iframe)

* feat: expand t.co links; linkify bare URLs in tweet and article text

Frontend:
- resolveEntityBounds: try multiple candidate strings in order (u.url
  first, since that's the t.co short URL that appears in full_text)
- normalizeUrlAnn: multi-candidate search; href = expanded > url,
  display = display_url > expanded > url
- linkifyText(): regex linkifier for entity-less bare URLs; trims
  trailing punctuation [.,;:!?)] before linking; used in both
  renderTweetTextJSX and renderInlineJSX including their early-return
  paths (anns.length === 0) that previously bypassed linkification
- renderInlineJSX: fix mention href mention.name → screen_name;
  replace t.co segment text with url.display when entity covers it

Scraper (vendor/twitter/scrape_user_tweet_contents.py):
- extract_tweet_data: when note_tweet text is used, pull urls/mentions/
  hashtags/symbols from note_result.entity_set (correct indices for the
  note text); keep media from legacy.entities (no note media downloads)

* feat: server-side t.co resolver + frontend augmentation

Server (routes.rs):
  POST /api/util/resolve-tco — unauthenticated, accepts JSON array of
  https://t.co/<alphanumeric> URLs only (strict regex validation, no SSRF
  via input), capped at 50 per batch, 3 s timeout, redirect(Policy::none)
  so the server only ever touches t.co itself. HEAD first, GET fallback if
  HEAD returns no Location. Location sanitized to http/https only —
  javascript:/data:/etc. fall back to the original t.co.

api.js:
  resolveTcoUrls(urls) — project-convention wrapper for the new endpoint.
  Returns {} on failure (callers degrade gracefully to bare t.co links).

TweetPreview.jsx:
  After tweet data loads, per-tweet range-based coverage detection:
  builds covered [start,end) from existing entity fromIndex/toIndex or
  indices fallback, then finds regex matches whose span is NOT covered.
  Resolves unique uncovered t.co URLs via resolveTcoUrls(), synthesises
  one entity per occurrence (with exact fromIndex/toIndex so normalizeUrlAnn
  gets correct bounds even for duplicate t.co URLs in the same tweet).
  Augments entities.urls before setTweets() so all rendering paths
  see expanded URLs.

* feat: suppress rendered media attachment URLs from tweet text

renderTweetTextJSX now accepts skipSpans=[] as third param.
Skip-span boundaries are added to the pts split set so a trailing
media t.co inside a plain segment still gets isolated and suppressed—
not re-linked by linkifyText. Early return only when both anns and
skipSpans are empty.

TweetCard computes mediaSkipSpans after building photos/videoItems:
for each rawMedia item whose src resolved (photo src match; any video),
resolveEntityBounds(m, ft, m.url) gives the precise [s,e] span using
indices/fromIndex first, indexOf fallback—then the span is passed to
renderTweetTextJSX so the t.co attachment URL is silently dropped.

Cargo.lock

@@ -133,6 +133,7 @@ dependencies = [
  "parking_lot",
  "rand",
  "regex",
+ "reqwest",
  "rusqlite",
  "serde",
  "serde_json",

crates/archivr-server/Cargo.toml

@@ -21,6 +21,7 @@ serde_json.workspace = true
 rusqlite.workspace = true
 parking_lot.workspace = true
 regex.workspace = true
+reqwest.workspace = true
 
 [dev-dependencies]
 tempfile.workspace = true

crates/archivr-server/src/routes.rs

@@ -91,36 +91,61 @@ async fn setup_guard(
 /// Tower middleware: injects HTTP security response headers on every response.
 /// HSTS is intentionally omitted — that belongs at the reverse-proxy layer.
 async fn security_headers(req: Request, next: Next) -> Response {
+    // Capture path before consuming req for next.run()
+    let is_artifact = req.uri().path().contains("/artifacts/");
     let mut response = next.run(req).await;
     let headers = response.headers_mut();
     headers.insert(
         axum::http::header::HeaderName::from_static("x-content-type-options"),
         axum::http::HeaderValue::from_static("nosniff"),
     );
-    headers.insert(
-        axum::http::header::HeaderName::from_static("x-frame-options"),
-        axum::http::HeaderValue::from_static("DENY"),
-    );
     headers.insert(
         axum::http::header::HeaderName::from_static("referrer-policy"),
         axum::http::HeaderValue::from_static("strict-origin-when-cross-origin"),
     );
-    headers.insert(
-        axum::http::header::HeaderName::from_static("content-security-policy"),
-        axum::http::HeaderValue::from_static(
-            "default-src 'self'; \
-             script-src 'self'; \
-             style-src 'self' 'unsafe-inline'; \
-             img-src 'self' data: blob:; \
-             font-src 'self'; \
-             connect-src 'self'; \
-             frame-ancestors 'none'",
-        ),
-    );
     headers.insert(
         axum::http::header::HeaderName::from_static("permissions-policy"),
-        axum::http::HeaderValue::from_static("camera=(), microphone=(), geolocation=()"),
+        axum::http::HeaderValue::from_static("camera=(), microphone=(), geolocation=(), autoplay=()"),
     );
+    if is_artifact {
+        // Artifact responses are iframed by the preview modal (sandboxed, no allow-scripts).
+        // When opened directly in a new tab scripts must still be blocked so archived
+        // pages cannot make same-origin API calls with the user's session.
+        // Only styles, images, fonts and media need to be relaxed for rendering.
+        headers.insert(
+            axum::http::header::HeaderName::from_static("content-security-policy"),
+            axum::http::HeaderValue::from_static(
+                "default-src 'none'; \
+                 script-src 'none'; \
+                 style-src 'self' 'unsafe-inline' https:; \
+                 img-src 'self' data: blob: https:; \
+                 font-src 'self' https:; \
+                 media-src 'self' blob:; \
+                 connect-src 'none'; \
+                 frame-ancestors 'self'",
+            ),
+        );
+    } else {
+        headers.insert(
+            axum::http::header::HeaderName::from_static("x-frame-options"),
+            axum::http::HeaderValue::from_static("DENY"),
+        );
+        // Main app CSP — allow Google Fonts and external images for tweet previews
+        headers.insert(
+            axum::http::header::HeaderName::from_static("content-security-policy"),
+            axum::http::HeaderValue::from_static(
+                "default-src 'self'; \
+                 script-src 'self'; \
+                 style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; \
+                 img-src 'self' data: blob: https:; \
+                 font-src 'self' https://fonts.gstatic.com; \
+                 media-src 'self' blob: https:; \
+                 connect-src 'self'; \
+                 frame-src 'self'; \
+                 frame-ancestors 'none'",
+            ),
+        );
+    }
     response
 }
 
@@ -303,6 +328,7 @@ pub fn app_with_state(state: AppState) -> Router {
             "/api/archives/:archive_id/blob-cleanup",
             get(blob_cleanup_scan_handler).delete(blob_cleanup_delete_handler),
         )
+        .route("/api/util/resolve-tco", post(resolve_tco_handler))
         .nest_service("/assets", ServeDir::new(static_dir.join("assets")))
         .fallback_service(ServeFile::new(static_dir.join("index.html")))
         .layer(axum::middleware::from_fn_with_state(state.clone(), setup_guard))
@@ -1883,6 +1909,74 @@ async fn delete_collection_handler(
     }
 }
 
+// ── t.co resolver ──────────────────────────────────────────────────────────────
+// POST /api/util/resolve-tco
+// Body: JSON array of t.co short URLs (max 50).
+// Returns: JSON object mapping each input URL to its expanded destination.
+//
+// Security:
+// - Input restricted to https://t.co/<alphanumeric token> only (no SSRF via input).
+// - redirect(Policy::none()): makes ONE HEAD to t.co, reads Location header, never
+//   fetches the expanded destination (no open-proxy).
+// - 3 s timeout, 1-hop max.
+// - No auth required (t.co is public; no data exposed).
+
+static TCO_RE: std::sync::LazyLock<regex::Regex> = std::sync::LazyLock::new(|| {
+    regex::Regex::new(r"^https://t\.co/[A-Za-z0-9]+$").unwrap()
+});
+
+async fn resolve_tco_handler(
+    Json(urls): Json<Vec<String>>,
+) -> Result<Json<std::collections::HashMap<String, String>>, ApiError> {
+    const MAX_BATCH: usize = 50;
+    let urls: Vec<String> = urls
+        .into_iter()
+        .filter(|u| TCO_RE.is_match(u))
+        .take(MAX_BATCH)
+        .collect();
+
+    let client = reqwest::Client::builder()
+        .redirect(reqwest::redirect::Policy::none())
+        .timeout(Duration::from_secs(3))
+        .build()
+        .map_err(|e| ApiError::internal(&format!("http client: {e}")))?;
+
+    let mut map = std::collections::HashMap::new();
+    let futs: Vec<_> = urls.iter().map(|url| {
+        let client = client.clone();
+        let url = url.clone();
+        tokio::spawn(async move {
+            // Try HEAD first; fall back to GET if HEAD returns no Location.
+            // Neither follows redirects (Policy::none), so the server only
+            // ever connects to t.co itself — never to the destination.
+            // Only accept http/https destinations — never javascript:, data:, etc.
+            let safe_location = |resp: reqwest::Response| {
+                resp.headers()
+                    .get(reqwest::header::LOCATION)
+                    .and_then(|v| v.to_str().ok())
+                    .map(|s| s.to_string())
+                    .filter(|s| s.starts_with("http://") || s.starts_with("https://"))
+            };
+            let expanded = match client.head(&url).send().await.ok().and_then(safe_location) {
+                Some(loc) => loc,
+                None => match client.get(&url).send().await.ok().and_then(safe_location) {
+                    Some(loc) => loc,
+                    None => url.clone(),
+                },
+            };
+            (url, expanded)
+        })
+    }).collect();
+
+    for fut in futs {
+        if let Ok((k, v)) = fut.await {
+            map.insert(k, v);
+        }
+    }
+
+    Ok(Json(map))
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

crates/archivr-server/static/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Archivr</title>
-    <script type="module" crossorigin src="/assets/index-DiHAMIVH.js"></script>
+    <script type="module" crossorigin src="/assets/index-Gm5awz10.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DwI288Sc.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-C89vW3ol.css">
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef, createContext } from 'react'
-import { fetchArchives, fetchEntries, searchEntries, fetchRuns, fetchTags, checkSetup, fetchMe } from './api'
+import { fetchArchives, fetchEntries, searchEntries, fetchRuns, fetchTags, checkSetup, fetchMe, fetchEntryDetail } from './api'
 import LoginPage from './components/LoginPage.jsx'
 import SetupPage from './components/SetupPage.jsx'
 
@@ -12,11 +12,20 @@ import TagsView from './components/TagsView'
 import CollectionsView from './components/CollectionsView'
 import SettingsView from './components/SettingsView'
 import ContextRail from './components/ContextRail'
+import PreviewModal from './components/PreviewModal'
+import AudioBar from './components/AudioBar'
+import PreviewPage from './components/PreviewPage'
 import { displayPath } from './utils'
 import ToastStack from './components/ToastStack'
 
 export const AuthContext = createContext(null);
 
+// Detect /preview/:archiveId/:entryUid at load time (static — no navigation)
+const PREVIEW_ROUTE = (() => {
+  const m = window.location.pathname.match(/^\/preview\/([^/]+)\/([^/]+)/)
+  return m ? { archiveId: m[1], entryUid: m[2] } : null
+})()
+
 const VIEWS = ['archive','tags','collections','runs','admin','settings']
 const SETTINGS_TABS = ['profile','tokens','instance','storage']
 
@@ -89,8 +98,24 @@ export default function App() {
     () => sessionStorage.getItem('ublockWarningIgnored') === 'true'
   )
 
+
+  // ── Entry detail (shared between PreviewPanel and ContextRail) ──────────
+  const [entryDetail, setEntryDetail] = useState(null)
+  const detailSeqRef = useRef(0)
+
   const humanizeTags = currentUser?.humanize_slugs ?? false;
 
+  // Fetch entry detail whenever selected entry changes
+  useEffect(() => {
+    const seq = ++detailSeqRef.current
+    setEntryDetail(null)
+    if (!selectedEntry || !archiveId) return
+    fetchEntryDetail(archiveId, selectedEntry.entry_uid).then(det => {
+      if (seq !== detailSeqRef.current) return
+      setEntryDetail(det)
+    }).catch(() => {})
+  }, [selectedEntry, archiveId])
+
   // Persist captureDialogOpen to sessionStorage
   useEffect(() => {
     sessionStorage.setItem('captureDialogOpen', captureDialogOpen)
@@ -172,7 +197,9 @@ export default function App() {
   }, [archiveId])
 
   // Sync view + settingsTab → URL
+  // Sync view + settingsTab → URL (skip when serving a standalone preview page)
   useEffect(() => {
+    if (PREVIEW_ROUTE) return
     const path = locationPath(view, settingsTab)
     if (window.location.pathname !== path) {
       history.pushState(null, '', path)
@@ -217,8 +244,22 @@ export default function App() {
     setSelectedEntry(prev =>
       prev && prev.entry_uid === entryUid ? { ...prev, title: newTitle } : prev
     )
+    setEntryDetail(prev =>
+      prev && prev.summary.entry_uid === entryUid
+        ? { ...prev, summary: { ...prev.summary, title: newTitle } }
+        : prev
+    )
   }, [])
 
+  const handleDetailRefresh = useCallback(() => {
+    if (!archiveId || !selectedEntry) return
+    const seq = ++detailSeqRef.current
+    fetchEntryDetail(archiveId, selectedEntry.entry_uid).then(det => {
+      if (seq !== detailSeqRef.current) return
+      setEntryDetail(det)
+    }).catch(() => {})
+  }, [archiveId, selectedEntry])
+
   const handleEntryDeleted = useCallback((entryUid) => {
     setEntries(prev => prev.filter(e => e.entry_uid !== entryUid))
     setSelectedEntry(prev => prev?.entry_uid === entryUid ? null : prev)
@@ -258,10 +299,33 @@ export default function App() {
     setUblockWarningIgnored(true)
     setToasts(prev => prev.filter(t => !(t.type === 'warning' && t.locator)))
   }, [])
+  const [previewEntryUid, setPreviewEntryUid] = useState(null)
+  const [currentAudio, setCurrentAudio] = useState(null)
+
+  const handleOpenPreview = useCallback(() => {
+    if (selectedEntry) setPreviewEntryUid(selectedEntry.entry_uid)
+  }, [selectedEntry])
+  const handleClosePreview = useCallback(() => setPreviewEntryUid(null), [])
+  const handlePlay = useCallback((src, entry) => {
+    setCurrentAudio({ src, entry })
+  }, [])
+  const handleCloseAudio = useCallback(() => setCurrentAudio(null), [])
+
+  // Close stale modal when selection changes (audio persists intentionally)
+  useEffect(() => {
+    setPreviewEntryUid(null)
+  }, [selectedEntry])
+
+  // Toggle body class so fixed AudioBar doesn't obscure scrollable content
+  useEffect(() => {
+    document.body.classList.toggle('has-audio-bar', !!currentAudio)
+    return () => document.body.classList.remove('has-audio-bar')
+  }, [currentAudio])
 
   if (authState === 'loading') return <div className="auth-loading">Loading\u2026</div>;
   if (authState === 'setup')   return <SetupPage onComplete={() => setAuthState('login')} />;
   if (authState === 'login')   return <LoginPage onLogin={user => { setCurrentUser(user); setAuthState('authenticated'); }} />;
+  if (PREVIEW_ROUTE)           return <PreviewPage archiveId={PREVIEW_ROUTE.archiveId} entryUid={PREVIEW_ROUTE.entryUid} />;
 
   return (
     <AuthContext.Provider value={{ currentUser, setCurrentUser }}>
@@ -344,14 +408,34 @@ export default function App() {
           <ContextRail
             archiveId={archiveId}
             selectedEntry={selectedEntry}
+            detail={entryDetail}
             onTagFilterSet={handleTagFilterSet}
             tagNodes={tagNodes}
             onTagsRefresh={handleTagsRefresh}
             onEntryTitleChange={handleEntryTitleChange}
             onEntryDeleted={handleEntryDeleted}
             humanizeTags={humanizeTags}
+            onDetailRefresh={handleDetailRefresh}
+            onOpenPreview={handleOpenPreview}
+            onPlay={handlePlay}
           />
         </main>
+        {previewEntryUid && selectedEntry && selectedEntry.entry_uid === previewEntryUid && (
+          <PreviewModal
+            archiveId={archiveId}
+            entry={selectedEntry}
+            detail={entryDetail}
+            onClose={handleClosePreview}
+          />
+        )}
+        {currentAudio && (
+          <AudioBar
+            entry={currentAudio.entry}
+            src={currentAudio.src}
+            archiveId={archiveId}
+            onClose={handleCloseAudio}
+          />
+        )}
         <CaptureDialog
           open={captureDialogOpen}
           archiveId={archiveId}

frontend/src/api.js

@@ -25,6 +25,30 @@ export async function fetchEntryDetail(archiveId, entryUid) {
   return getJson(`/api/archives/${archiveId}/entries/${entryUid}`);
 }
 
+// Fetch multiple artifact JSON payloads for an entry in parallel.
+// Returns a Promise<Array> preserving index order.
+export function fetchEntryArtifacts(archiveId, entryUid, indices) {
+  return Promise.all(
+    indices.map(idx =>
+      getJson(`/api/archives/${archiveId}/entries/${entryUid}/artifacts/${idx}`)
+    )
+  );
+}
+
+// Resolve t.co short URLs server-side (HEAD→GET, no-follow).
+// Returns a map { [tcoUrl]: expandedUrl }.
+// Silently returns {} on failure — callers fall back to plain t.co links.
+export async function resolveTcoUrls(urls) {
+  if (!urls || urls.length === 0) return {};
+  const res = await fetch('/api/util/resolve-tco', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(urls),
+  });
+  if (!res.ok) return {};
+  return res.json();
+}
+
 export async function updateEntryTitle(archiveId, entryUid, title) {
   const res = await fetch(`/api/archives/${archiveId}/entries/${entryUid}`, {
     method: 'PATCH',

frontend/src/components/AudioBar.jsx

@@ -0,0 +1,218 @@
+import { useEffect, useRef, useState } from 'react';
+import { sourceIconSvg } from '../utils';
+
+function formatTime(secs) {
+  if (!isFinite(secs) || isNaN(secs)) return '--:--';
+  const m = Math.floor(secs / 60);
+  const s = Math.floor(secs % 60);
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+export default function AudioBar({ entry, src, archiveId, onClose }) {
+  const audioRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(NaN);
+  const [volume, setVolume] = useState(1.0);
+
+  // Load and reset state whenever src changes — play only on explicit user action
+  useEffect(() => {
+    if (!audioRef.current || !src) return;
+    audioRef.current.load();
+    setCurrentTime(0);
+    setDuration(NaN);
+    setIsPlaying(false);
+  }, [src]);
+
+  // Sync volume to audio element
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = volume;
+    }
+  }, [volume]);
+
+  function handlePlayPause() {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play().catch(() => {});
+    }
+  }
+
+  function handleSeek(e) {
+    const audio = audioRef.current;
+    if (!audio || !isFinite(duration)) return;
+    const t = Number(e.target.value);
+    audio.currentTime = t;
+    setCurrentTime(t);
+  }
+
+  function handleVolumeChange(e) {
+    setVolume(Number(e.target.value));
+  }
+
+  const title = entry?.title || entry?.entry_uid || 'Unknown';
+  const kind = entry?.source_kind || 'other';
+
+  return (
+    <>
+      {/* Hidden audio element */}
+      <audio
+        ref={audioRef}
+        src={src || undefined}
+        preload="auto"
+        onPlay={() => setIsPlaying(true)}
+        onPause={() => setIsPlaying(false)}
+        onEnded={() => setIsPlaying(false)}
+        onTimeUpdate={() => setCurrentTime(audioRef.current?.currentTime ?? 0)}
+        onLoadedMetadata={() => setDuration(audioRef.current?.duration ?? NaN)}
+        onDurationChange={() => setDuration(audioRef.current?.duration ?? NaN)}
+        style={{ display: 'none' }}
+      />
+
+      {/* Fixed bottom bar */}
+      <div
+        className="audio-bar"
+        style={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 100,
+          background: 'var(--paper-3)',
+          borderTop: '1px solid var(--line)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+          padding: '0 16px',
+          height: '56px',
+          fontFamily: 'var(--sans)',
+        }}
+      >
+        {/* Left: icon + title */}
+        <div
+          className="audio-bar-info"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            minWidth: 0,
+            flex: '0 1 220px',
+            overflow: 'hidden',
+          }}
+        >
+          <span
+            className="source-icon"
+            style={{ flexShrink: 0, width: '18px', height: '18px', display: 'flex', alignItems: 'center' }}
+            dangerouslySetInnerHTML={{ __html: sourceIconSvg(kind) }}
+          />
+          <span
+            style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              fontSize: '0.85rem',
+              color: 'var(--ink)',
+            }}
+            title={title}
+          >
+            {title}
+          </span>
+        </div>
+
+        {/* Center: play/pause + seek + time */}
+        <div
+          className="audio-bar-controls"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            flex: '1 1 0',
+            minWidth: 0,
+          }}
+        >
+          <button
+            onClick={handlePlayPause}
+            aria-label={isPlaying ? 'Pause' : 'Play'}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px',
+              color: 'var(--ink)',
+              flexShrink: 0,
+              fontSize: '1.2rem',
+              lineHeight: 1,
+            }}
+          >
+            {isPlaying ? '⏸' : '▶'}
+          </button>
+
+          <span
+            style={{ fontSize: '0.75rem', color: 'var(--muted)', whiteSpace: 'nowrap', flexShrink: 0 }}
+          >
+            {formatTime(currentTime)}
+          </span>
+
+          <input
+            type="range"
+            min={0}
+            max={isFinite(duration) ? duration : 0}
+            step={0.1}
+            value={isFinite(currentTime) ? currentTime : 0}
+            onChange={handleSeek}
+            aria-label="Seek"
+            style={{ flex: 1, minWidth: 0, accentColor: 'var(--accent)' }}
+          />
+
+          <span
+            style={{ fontSize: '0.75rem', color: 'var(--muted)', whiteSpace: 'nowrap', flexShrink: 0 }}
+          >
+            {formatTime(duration)}
+          </span>
+        </div>
+
+        {/* Right: volume + close */}
+        <div
+          className="audio-bar-right"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            flex: '0 1 160px',
+          }}
+        >
+          <span style={{ fontSize: '0.85rem', color: 'var(--muted)', flexShrink: 0 }}>🔊</span>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={volume}
+            onChange={handleVolumeChange}
+            aria-label="Volume"
+            style={{ width: '80px', accentColor: 'var(--accent)' }}
+          />
+          <button
+            onClick={onClose}
+            aria-label="Close audio player"
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px',
+              color: 'var(--muted)',
+              fontSize: '1rem',
+              lineHeight: 1,
+              marginLeft: '4px',
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/ContextRail.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
-import { fetchEntryDetail, fetchEntryTags, assignTag, removeTag, listEntryCollections, updateEntryTitle, deleteEntry, rearchiveEntry, pollCaptureJob } from '../api'
+import { fetchEntryTags, assignTag, removeTag, listEntryCollections, updateEntryTitle, deleteEntry, rearchiveEntry, pollCaptureJob } from '../api'
 import { formatTimestamp, formatBytes, valueText, sourceIconSvg, displayPath } from '../utils'
 
 const VIS_LABEL = { 0: 'Private', 1: 'Public', 2: 'Users only', 3: 'Public' }
@@ -11,8 +11,7 @@ const ExternalIcon = () => (
   </svg>
 )
 
-export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet, tagNodes, onTagsRefresh, onEntryTitleChange, onEntryDeleted, humanizeTags }) {
+export default function ContextRail({ archiveId, selectedEntry, detail, onTagFilterSet, tagNodes, onTagsRefresh, onEntryTitleChange, onEntryDeleted, humanizeTags, onDetailRefresh, onOpenPreview, onPlay }) {
-  const [detail, setDetail] = useState(null)
   const [tags, setTags] = useState([])
   const [assignInput, setAssignInput] = useState('')
   const [entryCollections, setEntryCollections] = useState([])
@@ -26,11 +25,11 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
   const rearchivePollRef = useRef(null)
 
   useEffect(() => {
+    const seq = ++selectSeqRef.current
     if (rearchivePollRef.current) { clearInterval(rearchivePollRef.current); rearchivePollRef.current = null }
     setRearchiveState('idle')
     setRearchiveError('')
     if (!selectedEntry || !archiveId) {
-      setDetail(null)
       setTags([])
       setEntryCollections([])
       return
@@ -38,16 +37,12 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
     setEditingTitle(false)
     setTitleDraft('')
     titleCancelRef.current = false
-    const seq = ++selectSeqRef.current
-    setDetail(null)
     setTags([])
     Promise.all([
-      fetchEntryDetail(archiveId, selectedEntry.entry_uid),
       fetchEntryTags(archiveId, selectedEntry.entry_uid),
       listEntryCollections(archiveId, selectedEntry.entry_uid),
-    ]).then(([det, tgs, ecs]) => {
+    ]).then(([tgs, ecs]) => {
       if (seq !== selectSeqRef.current) return
-      setDetail(det)
       setTags(tgs)
       setEntryCollections(ecs)
     }).catch(() => {})
@@ -63,7 +58,6 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
     const newTitle = titleDraft.trim() || null
     try {
       await updateEntryTitle(archiveId, selectedEntry.entry_uid, newTitle)
-      setDetail(prev => prev ? { ...prev, summary: { ...prev.summary, title: newTitle } } : prev)
       onEntryTitleChange?.(selectedEntry.entry_uid, newTitle)
     } catch {
       // silently revert
@@ -111,39 +105,44 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
 
   async function handleRearchive() {
     if (!selectedEntry || !archiveId || rearchiveState === 'running') return
+    // Capture identity at start so closure comparisons are stable
+    const startSeq = selectSeqRef.current
+    const entryUid = selectedEntry.entry_uid
     setRearchiveState('running')
     setRearchiveError('')
     try {
-      const { job_uid } = await rearchiveEntry(archiveId, selectedEntry.entry_uid)
+      const { job_uid } = await rearchiveEntry(archiveId, entryUid)
-      // Poll for job completion at 500ms — same interval as CaptureDialog
+      // If selection changed while waiting for the kick-off response, bail.
+      if (selectSeqRef.current !== startSeq) return
       rearchivePollRef.current = setInterval(async () => {
         try {
           const job = await pollCaptureJob(archiveId, job_uid)
           if (job.status === 'completed') {
             clearInterval(rearchivePollRef.current)
             rearchivePollRef.current = null
+            if (selectSeqRef.current !== startSeq) return
             setRearchiveState('done')
-            // Refresh entry detail so artifact list updates
+            const updated = await fetchEntryTags(archiveId, entryUid)
-            const [det, tgs] = await Promise.all([
+            if (selectSeqRef.current !== startSeq) return
-              fetchEntryDetail(archiveId, selectedEntry.entry_uid),
+            setTags(updated)
-              fetchEntryTags(archiveId, selectedEntry.entry_uid),
+            onDetailRefresh?.()
-            ])
-            setDetail(det)
-            setTags(tgs)
           } else if (job.status === 'failed') {
             clearInterval(rearchivePollRef.current)
             rearchivePollRef.current = null
+            if (selectSeqRef.current !== startSeq) return
             setRearchiveState('error')
             setRearchiveError(job.error_text || 'Re-archive failed.')
           }
         } catch {
           clearInterval(rearchivePollRef.current)
           rearchivePollRef.current = null
+          if (selectSeqRef.current !== startSeq) return
           setRearchiveState('error')
           setRearchiveError('Network error while polling.')
         }
       }, 500)
     } catch (e) {
+      if (selectSeqRef.current !== startSeq) return
       setRearchiveState('error')
       setRearchiveError(e.message || 'Failed to start re-archive.')
     }
@@ -157,6 +156,20 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
     ['Root',       detail.structured_root_relpath],
   ] : []
 
+  const AUDIO_EXTS = new Set(['mp3','ogg','m4a','opus','wav','flac','aac'])
+  const PREVIEW_EXTS = new Set(['mp4','webm','mov','mkv','avi','m4v','ogv','pdf','html','htm','jpg','jpeg','png','gif','webp','avif','svg','bmp'])
+  const primaryMediaIdx = detail ? detail.artifacts.findIndex(a => a.artifact_role === 'primary_media') : -1
+  const primaryMedia = primaryMediaIdx >= 0 ? detail.artifacts[primaryMediaIdx] : null
+  const pmExt = primaryMedia ? primaryMedia.relpath.split('.').pop().toLowerCase() : ''
+  const isAudio = primaryMedia && AUDIO_EXTS.has(pmExt)
+  const primaryMediaUrl = (primaryMediaIdx >= 0 && selectedEntry)
+    ? `/api/archives/${archiveId}/entries/${selectedEntry.entry_uid}/artifacts/${primaryMediaIdx}`
+    : null
+  const isPreviewable = detail && !isAudio && (
+    (detail.summary.entity_kind === 'tweet' || detail.summary.entity_kind === 'tweet_thread') ||
+    (primaryMedia && PREVIEW_EXTS.has(pmExt))
+  )
+
   return (
     <aside className="context-rail">
       <div className="rail-eyebrow">Context</div>
@@ -208,6 +221,17 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
             </a>
           )}
 
+          {isAudio && onPlay && (
+            <button className="rail-preview-btn" onClick={() => onPlay(primaryMediaUrl, selectedEntry)}>
+              ▶ Play
+            </button>
+          )}
+          {isPreviewable && onOpenPreview && (
+            <button className="rail-preview-btn" onClick={onOpenPreview}>
+              Preview
+            </button>
+          )}
+
           <div className="meta-list">
             {metaRows.filter(([, v]) => v != null && v !== '').map(([label, value]) => (
               <div key={label} className="meta-item">

frontend/src/components/IframePreview.jsx

@@ -0,0 +1,74 @@
+export default function IframePreview({ src, type, title, originalUrl }) {
+  const displayUrl = originalUrl || src;
+  const displayTitle = title || null;
+
+  return (
+    <div
+      className="preview-iframe-wrap"
+      style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}
+    >
+      <div
+        className="preview-iframe-toolbar"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '2px',
+          padding: '6px 12px',
+          borderBottom: '1px solid var(--line-soft)',
+          background: 'var(--paper-2)',
+          flexShrink: 0,
+        }}
+      >
+        {displayTitle && (
+          <span style={{
+            fontSize: '0.85rem',
+            fontWeight: 600,
+            color: 'var(--ink)',
+            fontFamily: 'var(--sans)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}>
+            {displayTitle}
+          </span>
+        )}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <span style={{
+            flex: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontSize: '0.78rem',
+            color: 'var(--muted)',
+            fontFamily: 'var(--sans)',
+          }}>
+            {displayUrl}
+          </span>
+          <a
+            href={src}
+            target="_blank"
+            rel="noreferrer noopener"
+            style={{
+              fontSize: '0.78rem',
+              color: 'var(--accent)',
+              textDecoration: 'none',
+              whiteSpace: 'nowrap',
+              fontFamily: 'var(--sans)',
+              flexShrink: 0,
+            }}
+          >
+            {type === 'pdf' ? 'Open PDF ↗' : 'Open in new tab ↗'}
+          </a>
+        </div>
+      </div>
+      <iframe
+        src={src}
+        sandbox="allow-same-origin allow-popups"
+        allow="autoplay 'none'"
+        referrerPolicy="no-referrer"
+        style={{ flex: 1, border: 'none', width: '100%', minHeight: 0 }}
+        title={displayTitle || (type === 'pdf' ? 'PDF preview' : 'Page preview')}
+      />
+    </div>
+  );
+}

frontend/src/components/ImagePreview.jsx

@@ -0,0 +1,30 @@
+export default function ImagePreview({ src, alt }) {
+  return (
+    <div
+      className="preview-image-wrap"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        background: 'var(--paper-2)',
+        overflow: 'hidden',
+      }}
+    >
+      <a href={src} target="_blank" rel="noreferrer noopener" style={{ display: 'contents' }}>
+        <img
+          src={src}
+          alt={alt || ''}
+          style={{
+            objectFit: 'contain',
+            maxHeight: '100%',
+            maxWidth: '100%',
+            display: 'block',
+            cursor: 'pointer',
+          }}
+        />
+      </a>
+    </div>
+  );
+}

frontend/src/components/PreviewModal.jsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import PreviewPanel from './PreviewPanel'
+
+export default function PreviewModal({ archiveId, entry, detail, onClose }) {
+  // Close on Escape key
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [onClose])
+
+  return (
+    <div className="preview-modal-backdrop" onClick={onClose}>
+      <div
+        className={`preview-modal${
+          detail?.summary?.entity_kind === 'tweet' ||
+          detail?.summary?.entity_kind === 'tweet_thread'
+            ? ''
+            : ' preview-modal--full'
+        }`}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="preview-modal-header">
+          <span className="preview-modal-title">{entry?.title || entry?.entry_uid || 'Preview'}</span>
+          <a
+            className="preview-modal-newtab"
+            href={`/preview/${archiveId}/${entry?.entry_uid}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Open in new tab"
+          >↗</a>
+          <button className="preview-modal-close" onClick={onClose} aria-label="Close preview">×</button>
+        </div>
+        <div className="preview-modal-body">
+          <PreviewPanel archiveId={archiveId} entry={entry} detail={detail} />
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/PreviewPage.jsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react'
+import { fetchEntryDetail } from '../api'
+import PreviewPanel from './PreviewPanel'
+
+// Standalone full-page preview — rendered when the URL is /preview/:archiveId/:entryUid.
+// Auth uses the existing session cookie; no login flow needed here since the
+// main app will have set one.
+export default function PreviewPage({ archiveId, entryUid }) {
+  const [detail, setDetail] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    fetchEntryDetail(archiveId, entryUid)
+      .then(d => { setDetail(d); setLoading(false) })
+      .catch(e => { setError(e?.message || 'Failed to load entry'); setLoading(false) })
+  }, [archiveId, entryUid])
+
+  const title = detail?.summary?.title || entryUid
+  const originalUrl = detail?.summary?.original_url
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      background: 'var(--paper)',
+      fontFamily: 'var(--sans)',
+    }}>
+      {/* Minimal topbar */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        padding: '10px 16px',
+        borderBottom: '1px solid var(--line)',
+        flexShrink: 0,
+        background: 'var(--paper-2)',
+      }}>
+        <a
+          href="/"
+          style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '13px', flexShrink: 0 }}
+        >← Archive</a>
+        <span style={{
+          flex: 1,
+          fontSize: '14px',
+          fontWeight: 600,
+          color: 'var(--ink)',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>{title}</span>
+        {originalUrl && (
+          <a
+            href={originalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: 'var(--muted)', textDecoration: 'none', fontSize: '13px', flexShrink: 0 }}
+          >Original ↗</a>
+        )}
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
+        {loading && (
+          <div style={{ padding: '48px', textAlign: 'center', color: 'var(--muted)', fontSize: '14px' }}>
+            Loading…
+          </div>
+        )}
+        {error && (
+          <div style={{ padding: '48px', textAlign: 'center', color: 'var(--alert)', fontSize: '14px' }}>
+            {error}
+          </div>
+        )}
+        {detail && (
+          <PreviewPanel
+            archiveId={archiveId}
+            entry={detail.summary}
+            detail={detail}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/PreviewPanel.jsx

@@ -0,0 +1,153 @@
+import VideoPreview from './VideoPreview';
+import IframePreview from './IframePreview';
+import ImagePreview from './ImagePreview';
+import TweetPreview from './TweetPreview';
+
+const VIDEO_EXTS = new Set(['mp4', 'webm', 'mov', 'mkv', 'avi', 'm4v', 'ogv']);
+const AUDIO_EXTS = new Set(['mp3', 'ogg', 'm4a', 'opus', 'wav', 'flac', 'aac']);
+const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg', 'bmp']);
+
+export default function PreviewPanel({ archiveId, entry, detail }) {
+
+  if (!entry) {
+    return (
+      <div className="preview-panel preview-panel--empty">
+        <span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
+          Select an entry to preview
+        </span>
+      </div>
+    );
+  }
+
+  if (!detail) {
+    return (
+      <div className="preview-panel preview-panel--loading">
+        <span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
+          Loading…
+        </span>
+      </div>
+    );
+  }
+
+  const { summary, artifacts } = detail;
+  const entryUid = summary.entry_uid;
+  const entityKind = summary.entity_kind;
+
+  // 1. Tweet / tweet thread
+  if (entityKind === 'tweet' || entityKind === 'tweet_thread') {
+    return (
+      <div className="preview-tweet-wrap">
+        <TweetPreview
+          archiveId={archiveId}
+          entryUid={entryUid}
+          artifacts={artifacts}
+          entityKind={entityKind}
+        />
+      </div>
+    );
+  }
+
+  // 2. Find primary_media artifact
+  const primaryMediaIndex = artifacts.findIndex(a => a.artifact_role === 'primary_media');
+  if (primaryMediaIndex === -1) {
+    return (
+      <div className="preview-panel preview-panel--no-preview">
+        <span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
+          No preview available
+        </span>
+        {artifacts.length > 0 && (
+          <ul
+            style={{
+              marginTop: '12px',
+              paddingLeft: '20px',
+              fontSize: '0.8rem',
+              color: 'var(--muted-2)',
+              fontFamily: 'var(--sans)',
+            }}
+          >
+            {artifacts.map((a, i) => (
+              <li key={i}>{a.artifact_role}: {a.relpath}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  }
+
+  const primaryArtifact = artifacts[primaryMediaIndex];
+  const primaryMediaUrl = `/api/archives/${archiveId}/entries/${entryUid}/artifacts/${primaryMediaIndex}`;
+  const ext = primaryArtifact.relpath.split('.').pop().toLowerCase();
+
+  // 3. Video
+  if (VIDEO_EXTS.has(ext)) {
+    return (
+      <div className="preview-panel">
+        <VideoPreview src={primaryMediaUrl} />
+      </div>
+    );
+  }
+
+  // 4. Audio — inline player (AudioBar handles persistent playback via rail Play button)
+  if (AUDIO_EXTS.has(ext)) {
+    return (
+      <div className="preview-panel preview-panel--audio" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '12px', padding: '24px', fontFamily: 'var(--sans)' }}>
+        <span style={{ fontSize: '2rem' }}>🎵</span>
+        <span style={{ color: 'var(--ink)', fontSize: '0.95rem', fontWeight: 600 }}>
+          {summary.title || entryUid}
+        </span>
+        <audio src={primaryMediaUrl} controls style={{ marginTop: '8px', width: '100%', maxWidth: '400px' }} />
+      </div>
+    );
+  }
+
+  // 5. PDF
+  if (ext === 'pdf') {
+    return (
+      <div className="preview-panel" style={{ flex: 1, minHeight: 0 }}>
+        <IframePreview src={primaryMediaUrl} type="pdf"
+          title={summary.title} originalUrl={summary.original_url} />
+      </div>
+    );
+  }
+
+  // 6. HTML page
+  if (ext === 'html' || ext === 'htm') {
+    return (
+      <div className="preview-panel" style={{ flex: 1, minHeight: 0 }}>
+        <IframePreview src={primaryMediaUrl} type="page"
+          title={summary.title} originalUrl={summary.original_url} />
+      </div>
+    );
+  }
+
+  // 7. Image
+  if (IMAGE_EXTS.has(ext)) {
+    return (
+      <div className="preview-panel" style={{ height: '100%' }}>
+        <ImagePreview src={primaryMediaUrl} alt={summary.title || 'Image'} />
+      </div>
+    );
+  }
+
+  // 8. Fallback
+  return (
+    <div className="preview-panel preview-panel--no-preview">
+      <span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
+        No preview available
+      </span>
+      <ul
+        style={{
+          marginTop: '12px',
+          paddingLeft: '20px',
+          fontSize: '0.8rem',
+          color: 'var(--muted-2)',
+          fontFamily: 'var(--sans)',
+        }}
+      >
+        {artifacts.map((a, i) => (
+          <li key={i}>{a.artifact_role}: {a.relpath}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/components/VideoPreview.jsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+
+export default function VideoPreview({ src }) {
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.load();
+    }
+  }, [src]);
+
+  return (
+    <div
+      className="preview-video-wrap"
+      style={{
+        background: '#111',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        minHeight: '240px',
+      }}
+    >
+      {src ? (
+        <video
+          ref={videoRef}
+          controls
+          autoPlay={false}
+          style={{ width: '100%', maxHeight: '100%', display: 'block' }}
+        >
+          <source src={src} />
+          Your browser does not support the video element.
+        </video>
+      ) : (
+        <span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
+          No video available
+        </span>
+      )}
+    </div>
+  );
+}

frontend/src/styles.css

@@ -1901,3 +1901,553 @@ select {
   margin: 0 0 8px;
   outline: none;
 }
+
+/* ════════════════════════════════════════════════════════════════════
+   ENTRY PREVIEWS
+   ════════════════════════════════════════════════════════════════════ */
+
+.preview-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.preview-panel-loading,
+.preview-panel-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--muted-2);
+  font-size: 14px;
+  text-align: center;
+  padding: 24px;
+}
+
+/* ── Video preview ────────────────────────────────────────────────── */
+.preview-video-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0d0d0b;
+  min-height: 200px;
+}
+.preview-video-wrap video {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  display: block;
+}
+
+/* ── Iframe preview ───────────────────────────────────────────────── */
+.preview-iframe-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.preview-iframe-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 12px;
+  background: var(--paper-2);
+  border-bottom: 1px solid var(--line);
+  flex-shrink: 0;
+  /* never uppercase the toolbar text */
+  text-transform: none;
+  letter-spacing: normal;
+}
+.preview-iframe-toolbar span {
+  font-size: 11px;
+  color: var(--muted-2);
+}
+.preview-iframe-toolbar a {
+  margin-left: auto;
+  color: var(--link);
+  font-size: 12px;
+  text-decoration: none;
+  padding: 3px 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--r2);
+  background: var(--field);
+  transition: border-color 0.12s;
+}
+.preview-iframe-toolbar a:hover {
+  border-color: var(--accent);
+  text-decoration: none;
+}
+.preview-iframe-wrap iframe {
+  flex: 1;
+  width: 100%;
+  border: none;
+  background: white;
+  min-height: 0;
+}
+
+/* ── Image preview ────────────────────────────────────────────────── */
+.preview-image-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--paper-2);
+}
+.preview-image-wrap img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--r3);
+  cursor: zoom-in;
+  display: block;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+}
+
+/* ── Tweet preview wrap ───────────────────────────────────────────── */
+.preview-tweet-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 16px;
+  background: var(--paper-2);
+  /* styled scrollbar matching the workspace rail */
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+}
+.preview-tweet-wrap::-webkit-scrollbar { width: 8px; }
+.preview-tweet-wrap::-webkit-scrollbar-track { background: transparent; }
+.preview-tweet-wrap::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+.preview-tweet-wrap::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-2);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+
+/* ── Tweet card ───────────────────────────────────────────────────── */
+.tw-card {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 16px;
+  background: var(--paper);
+  max-width: 560px;
+  margin: 0 auto 12px;
+}
+.tw-thread {
+  max-width: 560px;
+  margin: 0 auto;
+}
+.tw-thread-item {
+  display: flex;
+  gap: 0;
+  margin-bottom: 0;
+}
+.tw-thread-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 52px;
+  padding-top: 2px;
+}
+.tw-thread-avatar-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+.tw-thread-line {
+  width: 2px;
+  background: var(--line);
+  flex: 1;
+  min-height: 16px;
+  margin: 4px 0;
+}
+.tw-thread-body {
+  flex: 1;
+  min-width: 0;
+  padding: 0 0 16px 12px;
+}
+.tw-thread-body:last-child { padding-bottom: 0; }
+.tw-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  display: block;
+}
+.tw-avatar-ph {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  flex-shrink: 0;
+}
+.tw-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+.tw-author-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
+.tw-author-handle { font-size: 13px; color: var(--muted-2); }
+.tw-dot { color: var(--muted-2); font-size: 13px; }
+.tw-date { font-size: 13px; color: var(--muted-2); }
+.tw-text {
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink);
+  white-space: pre-line;
+  word-break: break-word;
+  margin-bottom: 10px;
+}
+.tw-text a { color: var(--link); text-decoration: none; }
+.tw-text a:hover { text-decoration: underline; }
+.tw-stats {
+  display: flex;
+  gap: 20px;
+  color: var(--muted-2);
+  font-size: 13px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line-soft);
+}
+.tw-stats span { display: flex; align-items: center; gap: 4px; }
+
+/* ── X Article styles ─────────────────────────────────────────────── */
+.tw-article {
+  max-width: 598px;
+  margin: 0 auto;
+}
+.tw-article-cover {
+  width: 100%;
+  display: block;
+  object-fit: cover;
+  max-height: 380px;
+}
+.tw-article-meta { padding: 20px 16px 0; }
+.tw-article-title {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.3px;
+  color: var(--ink);
+  line-height: 1.3;
+  margin-bottom: 14px;
+}
+.tw-article-author-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.tw-article-author-name { font-size: 14px; font-weight: 700; color: var(--ink); }
+.tw-article-author-sub { font-size: 13px; color: var(--muted-2); }
+.tw-article-divider { border: none; border-top: 1px solid var(--line); margin: 0; }
+.tw-article-body { padding: 8px 16px 60px; }
+.tw-b-h1 {
+  font-size: 24px; font-weight: 800; letter-spacing: -0.3px;
+  color: var(--ink); line-height: 1.25; margin: 22px 0 10px;
+}
+.tw-b-h2 {
+  font-size: 19px; font-weight: 700; letter-spacing: -0.15px;
+  color: var(--ink); line-height: 1.3; margin: 20px 0 8px;
+}
+.tw-b-p { font-size: 16px; color: var(--ink); line-height: 1.72; margin-bottom: 14px; }
+.tw-b-p:empty { display: none; }
+.tw-b-spacer { height: 6px; display: block; }
+.tw-b-blockquote {
+  border-left: 3px solid var(--line);
+  padding: 2px 14px;
+  margin: 14px 0;
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1.65;
+}
+.tw-b-hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
+.tw-b-img { width: 100%; display: block; border-radius: 10px; margin: 14px 0; }
+.tw-b-ul, .tw-b-ol { margin: 10px 0 14px; padding-left: 26px; }
+.tw-b-li { font-size: 16px; color: var(--ink); line-height: 1.65; margin-bottom: 6px; }
+.tw-b-code {
+  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+  font-size: 0.875em;
+  background: var(--paper-2);
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: var(--ink);
+}
+.tw-b-pre {
+  background: var(--paper-2);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px 16px;
+  overflow-x: auto;
+  margin: 12px 0;
+}
+.tw-b-pre code {
+  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.tw-b-tweet-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 12px 14px;
+  margin: 12px 0;
+  color: var(--muted);
+  font-size: 14px;
+  text-decoration: none;
+  background: var(--paper-3);
+  transition: background 0.12s;
+}
+.tw-b-tweet-link:hover { background: var(--field); }
+.tw-b-tweet-link svg { flex-shrink: 0; color: var(--ink); }
+
+/* ── Audio bar ────────────────────────────────────────────────────── */
+.audio-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 72px;
+  background: var(--paper);
+  border-top: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 0 24px;
+  z-index: 100;
+  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
+}
+.audio-bar-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 0 0 200px;
+}
+.audio-bar-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.audio-bar-icon svg { width: 20px; height: 20px; }
+.audio-bar-title {
+  font-size: 13px;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  font-weight: 500;
+}
+.audio-bar-controls {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.audio-bar-play-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--paper);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.12s, transform 0.1s;
+}
+.audio-bar-play-btn:hover { background: var(--accent-2); }
+.audio-bar-play-btn:active { transform: scale(0.93); }
+.audio-bar-play-btn svg { width: 15px; height: 15px; }
+.audio-bar-seek {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.audio-bar-seek input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent);
+  height: 4px;
+  cursor: pointer;
+  min-width: 0;
+}
+.audio-bar-time {
+  font-size: 11.5px;
+  color: var(--muted-2);
+  white-space: nowrap;
+  min-width: 80px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.audio-bar-right {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.audio-bar-volume {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.audio-bar-volume svg { width: 14px; height: 14px; color: var(--muted-2); flex-shrink: 0; }
+.audio-bar-volume input[type="range"] {
+  width: 72px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+.audio-bar-close {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--muted-2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  padding: 0;
+  line-height: 1;
+  transition: background 0.12s, color 0.12s;
+}
+.audio-bar-close:hover { background: var(--field); color: var(--ink); }
+
+
+/* ── Preview modal ────────────────────────────────────────────────── */
+.preview-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.preview-modal {
+  background: var(--paper);
+  border-radius: 12px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+  width: 90vw;
+  max-width: 1100px;
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* Full-height variant for iframe/PDF/video/image (needs explicit height
+   so flex children like <iframe style="flex:1"> have a concrete container). */
+.preview-modal--full {
+  height: 88vh;
+}
+.preview-modal--full .preview-modal-body {
+  max-height: none;
+}
+.preview-modal-header {
+  display: flex;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--line);
+  flex-shrink: 0;
+  gap: 12px;
+}
+.preview-modal-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.preview-modal-close {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--muted-2);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.12s, color 0.12s;
+}
+.preview-modal-close:hover { background: var(--field); color: var(--ink); }
+.preview-modal-body {
+  flex: 1;
+  min-height: 0;
+  /* overflow: hidden — each child (tweet-wrap, video-wrap, iframe, image)
+     manages its own scroll. This also prevents the spurious scrollbar that
+     appears when a video's native controls briefly expand the layout. */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  /* Cap so long threads/articles stay scrollable even when modal has no
+     fixed height (shrinks for short tweets). 52px ≈ header padding+border. */
+  max-height: calc(88vh - 52px);
+}
+/* Preview button in context rail */
+.rail-preview-btn {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 16px;
+  background: var(--accent);
+  color: var(--paper);
+  border: none;
+  border-radius: var(--r3);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.12s;
+}
+.rail-preview-btn:hover { background: var(--accent-2); }
+/* Open-in-new-tab button in preview modal header */
+.preview-modal-newtab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--r2);
+  color: var(--muted-2);
+  text-decoration: none;
+  font-size: 16px;
+  flex-shrink: 0;
+  transition: background 0.12s, color 0.12s;
+}
+.preview-modal-newtab:hover { background: var(--field); color: var(--ink); }
+/* Push content above the fixed AudioBar when it is visible */
+body.has-audio-bar { padding-bottom: 56px; }

vendor/twitter/scrape_user_tweet_contents.py

@@ -493,14 +493,23 @@ def extract_tweet_data(
     # Extract is_quote_status (bare)
     tweet_data["is_quote_status"] = legacy.get("is_quote_status", False)
 
-    # Extract entities (always included)
+    # Extract entities - when note_tweet text is used, its entity_set has the
-    entities = legacy.get("entities", {})
+    # correct indices for that text; legacy.entities indices match legacy.full_text
+    # (truncated) and will be wrong/missing for long tweets.
+    note_result = (
+        tweet_result.get("note_tweet", {})
+        .get("note_tweet_results", {})
+        .get("result", {})
+    )
+    note_ents = note_result.get("entity_set", {}) if note_tweet_text else {}
+    legacy_ents = legacy.get("entities", {})
     tweet_data["entities"] = {
-        "hashtags": entities.get("hashtags", []),
+        "hashtags":      note_ents.get("hashtags",      legacy_ents.get("hashtags", [])),
-        "urls": entities.get("urls", []),
+        "urls":          note_ents.get("urls",          legacy_ents.get("urls", [])),
-        "user_mentions": entities.get("user_mentions", []),
+        "user_mentions": note_ents.get("user_mentions", legacy_ents.get("user_mentions", [])),
-        "symbols": entities.get("symbols", []),
+        "symbols":       note_ents.get("symbols",       legacy_ents.get("symbols", [])),
-        "media": entities.get("media", []) if not bare_scrape else [],
+        # media always from legacy (note_tweet has no media downloads)
+        "media": legacy_ents.get("media", []) if not bare_scrape else [],
     }
 
     # Extract optional fields if not bare scrape