feat(paddock): initial paddock briefing pages and store changes

frontend/src/api.ts

@@ -1,4 +1,4 @@
-import type { LiveStateResponse, Meeting, NewsItem, RaceHub, Weekend } from './types'
+import type { ArticleContent, LiveStateResponse, Meeting, NewsItem, RaceHub, Weekend } from './types'
 
 export async function fetchRaceHub(sessionKey: number): Promise<RaceHub> {
   const res = await fetch(`/api/v1/race-hub?session_key=${sessionKey}`)
@@ -46,13 +46,29 @@ export async function fetchNews(limit?: number, source?: string): Promise<NewsIt
   const params = new URLSearchParams()
   if (limit) params.set('limit', limit.toString())
   if (source) params.set('source', source)
-  
+
   const query = params.toString()
   const url = query ? `/api/v1/news?${query}` : '/api/v1/news'
-  
+
   const res = await fetch(url)
   if (!res.ok) {
     throw new Error(`API ${res.status}: ${res.statusText}`)
   }
   return res.json()
 }
+
+export async function fetchNewsArticle(articleUrl: string): Promise<ArticleContent> {
+  const res = await fetch(`/api/v1/news/article?url=${encodeURIComponent(articleUrl)}`)
+  if (!res.ok) {
+    throw new Error(`API ${res.status}: ${res.statusText}`)
+  }
+  return res.json()
+}
+
+export async function markNewsRead(articleUrl: string): Promise<void> {
+  await fetch('/api/v1/news/read', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url: articleUrl }),
+  })
+}

frontend/src/components/Nav.tsx

@@ -16,6 +16,9 @@ export function Nav() {
         <Link to="/race-hub" search={{}} activeProps={{ className: 'active' }}>
           Race Hub
         </Link>
+        <Link to="/briefing" activeProps={{ className: 'active' }}>
+          Briefing
+        </Link>
       </div>
       <div className="nav-utility">
         <Link to="/admin" className="nav-utility-link" activeProps={{ className: 'nav-utility-link active' }}>

frontend/src/components/PaddockBriefing.tsx

@@ -1,61 +1,73 @@
 import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
 import { fetchNews } from '../api'
 import { timeAgo } from '../utils'
 
+const SOURCE_DISPLAY: Record<string, string> = {
+  'fia': 'FIA',
+  'bbc-f1': 'BBC Sport',
+  'autosport-f1': 'Autosport',
+  'racefans-f1': 'RaceFans',
+  'guardian-f1': 'Guardian',
+  'racer-f1': 'RACER',
+  'f1-youtube': 'F1 YouTube',
+}
+
 export function PaddockBriefing() {
   const { data: news, isLoading, isError } = useQuery({
     queryKey: ['news'],
-    queryFn: () => fetchNews(12),
+    queryFn: () => fetchNews(100),
     staleTime: 60_000,
   })
 
-  if (isLoading) {
-    return <div className="briefing-state loading-state">loading paddock briefing…</div>
-  }
-
-  if (isError || !news) {
-    return <div className="briefing-state error-box">Failed to load paddock briefing</div>
-  }
-
-  if (news.length === 0) {
-    return <div className="briefing-state empty-box">No briefing items available.</div>
-  }
+  const unreadCount = news?.filter((i) => !i.read_at).length ?? 0
+  const preview = news?.slice(0, 5) ?? []
 
   return (
     <section className="cc-briefing" data-testid="paddock-briefing">
       <div className="sec-header">
-        <span className="sec-title">Paddock Briefing</span>
-        <span className="sec-meta mono">Latest intel</span>
+        <span className="sec-title">
+          Paddock Briefing
+          {unreadCount > 0 && (
+            <span className="cc-brief-unread">{unreadCount}</span>
+          )}
+        </span>
+        <Link to="/briefing" className="sec-action mono">
+          View all →
+        </Link>
       </div>
-      <div className="briefing-grid" role="list">
-        {news.map((item, i) => {
-          const age = timeAgo(item.published_at || item.fetched_at)
-          return (
-            <a
-              key={`${item.url}-${i}`}
-              href={item.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="briefing-card"
+
+      {isLoading && <div className="briefing-state loading-state">loading…</div>}
+      {isError && <div className="briefing-state error-box">Failed to load briefing</div>}
+
+      {!isLoading && !isError && preview.length === 0 && (
+        <div className="briefing-state">
+          No items. Run <code>box-box --ingest-news</code> to populate.
+        </div>
+      )}
+
+      {preview.length > 0 && (
+        <div className="cc-brief-strip" role="list">
+          {preview.map((item) => (
+            <Link
+              key={item.url}
+              to="/briefing"
+              className={`cc-brief-item${item.read_at ? ' is-read' : ''}`}
               role="listitem"
             >
-              <div className="briefing-card-head mono">
-                <span className="briefing-source">{item.source}</span>
-                <span className="briefing-age">{age}</span>
+              <div className="cc-brief-item-meta mono">
+                <span className="cc-brief-source">
+                  {SOURCE_DISPLAY[item.source] ?? item.source}
+                </span>
+                <span className="cc-brief-age">
+                  {timeAgo(item.published_at ?? item.fetched_at)}
+                </span>
               </div>
-              <h3 className="briefing-title">{item.title}</h3>
-              {item.summary && (
-                <p className="briefing-summary">
-                  {item.summary.length > 120 ? item.summary.substring(0, 117) + '...' : item.summary}
-                </p>
-              )}
-              {item.category && (
-                <div className="briefing-cat mono">{item.category.toLowerCase()}</div>
-              )}
-            </a>
-          )
-        })}
-      </div>
+              <span className="cc-brief-title">{item.title}</span>
+            </Link>
+          ))}
+        </div>
+      )}
     </section>
   )
 }

frontend/src/pages/BriefingPage.tsx

@@ -0,0 +1,371 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { fetchNews, fetchNewsArticle, markNewsRead } from '../api'
+import { stripHtml, timeAgo } from '../utils'
+import type { ArticleContent, NewsItem } from '../types'
+
+type Category = 'all' | 'official' | 'news' | 'video'
+
+const CATEGORY_LABELS: Record<Category, string> = {
+  all: 'All',
+  official: 'Official',
+  news: 'News',
+  video: 'Video',
+}
+
+const SOURCE_DISPLAY: Record<string, string> = {
+  'fia': 'FIA',
+  'bbc-f1': 'BBC Sport',
+  'autosport-f1': 'Autosport',
+  'racefans-f1': 'RaceFans',
+  'guardian-f1': 'Guardian',
+  'racer-f1': 'RACER',
+  'f1-youtube': 'F1 YouTube',
+}
+
+function displaySource(id: string): string {
+  return SOURCE_DISPLAY[id] ?? id
+}
+
+function categoryOf(item: NewsItem): Category {
+  const c = (item.category ?? '').toLowerCase()
+  if (c === 'official') return 'official'
+  if (c === 'video') return 'video'
+  return 'news'
+}
+
+function CategoryTabs({
+  active,
+  counts,
+  onChange,
+}: {
+  active: Category
+  counts: Record<Category, number>
+  onChange: (c: Category) => void
+}) {
+  return (
+    <div className="bp-cats" role="tablist" aria-label="Briefing categories">
+      {(Object.keys(CATEGORY_LABELS) as Category[]).map((cat) => (
+        <button
+          key={cat}
+          role="tab"
+          aria-selected={active === cat}
+          className={`bp-cat${active === cat ? ' active' : ''}`}
+          onClick={() => onChange(cat)}
+        >
+          {CATEGORY_LABELS[cat]}
+          {counts[cat] > 0 && (
+            <span className="bp-cat-count">{counts[cat]}</span>
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function OGImage({ url, title }: { url?: string; title: string }) {
+  const [failed, setFailed] = useState(false)
+  const initial = (title[0] ?? '?').toUpperCase()
+
+  if (!url || failed) {
+    return (
+      <div className="bp-card-img bp-card-img-fallback" aria-hidden="true">
+        <span className="bp-card-img-initial">{initial}</span>
+      </div>
+    )
+  }
+  return (
+    <div className="bp-card-img-wrap">
+      <img
+        className="bp-card-img"
+        src={url}
+        alt=""
+        loading="lazy"
+        onError={() => setFailed(true)}
+      />
+    </div>
+  )
+}
+
+function BriefingCard({
+  item,
+  isActive,
+  onSelect,
+}: {
+  item: NewsItem
+  isActive: boolean
+  onSelect: (item: NewsItem) => void
+}) {
+  const isRead = !!item.read_at
+  const isVideo = categoryOf(item) === 'video'
+
+  return (
+    <article
+      className={`bp-card${isActive ? ' bp-card-active' : ''}${isRead ? ' bp-card-read' : ''}`}
+      onClick={() => onSelect(item)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === 'Enter' && onSelect(item)}
+      aria-pressed={isActive}
+    >
+      <OGImage url={item.og_image_url} title={item.title} />
+      {isVideo && <span className="bp-video-badge">▶ Video</span>}
+      <div className="bp-card-body">
+        <div className="bp-card-meta mono">
+          <span className="bp-card-source">{displaySource(item.source)}</span>
+          <span className="bp-card-age">{timeAgo(item.published_at ?? item.fetched_at)}</span>
+        </div>
+        <h3 className="bp-card-title">{item.title}</h3>
+        {!isVideo && (item.og_description || item.summary) && (
+          <p className="bp-card-desc">
+            {stripHtml(item.og_description || item.summary || '')}
+          </p>
+        )}
+      </div>
+    </article>
+  )
+}
+
+function ReaderPanel({
+  item,
+  onClose,
+}: {
+  item: NewsItem | null
+  onClose: () => void
+}) {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [article, setArticle] = useState<ArticleContent | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [onClose])
+
+  // Fetch article when item changes
+  useEffect(() => {
+    if (!item) {
+      setArticle(null)
+      return
+    }
+    setLoading(true)
+    setError(null)
+    setArticle(null)
+    fetchNewsArticle(item.url)
+      .then((data) => { setArticle(data); setLoading(false) })
+      .catch((err) => { setError(String(err)); setLoading(false) })
+  }, [item?.url])
+
+  // Scroll panel to top when item changes
+  useEffect(() => {
+    panelRef.current?.scrollTo({ top: 0 })
+  }, [item?.url])
+
+  const isOpen = item !== null
+
+  return (
+    <>
+      {isOpen && (
+        <div className="bp-reader-backdrop" onClick={onClose} aria-hidden="true" />
+      )}
+      <aside
+        ref={panelRef}
+        className={`bp-reader${isOpen ? ' open' : ''}`}
+        aria-label="Article reader"
+        aria-hidden={!isOpen}
+      >
+        {item && (
+          <>
+            <div className="bp-reader-toolbar">
+              <div className="bp-reader-toolbar-meta mono">
+                <span>{displaySource(item.source)}</span>
+                <span className="bp-reader-dot">·</span>
+                <span>{timeAgo(item.published_at ?? item.fetched_at)}</span>
+              </div>
+              <div className="bp-reader-toolbar-actions">
+                <a
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bp-reader-open"
+                  title="Open in browser"
+                >
+                  ↗
+                </a>
+                <button
+                  className="bp-reader-close"
+                  onClick={onClose}
+                  aria-label="Close reader"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+
+            {(article?.image_url || item.og_image_url) && (
+              <div className="bp-reader-hero">
+                <img
+                  src={article?.image_url ?? item.og_image_url}
+                  alt=""
+                  loading="lazy"
+                />
+              </div>
+            )}
+
+            <div className="bp-reader-content">
+              <h1 className="bp-reader-title">
+                {article?.title ?? item.title}
+              </h1>
+              {article?.byline && (
+                <div className="bp-reader-byline mono">{article.byline}</div>
+              )}
+
+              {loading && (
+                <div className="bp-reader-loading">Loading article…</div>
+              )}
+
+              {error && !loading && (
+                <div className="bp-reader-error">
+                  <p>Could not load full article.</p>
+                  {(item.og_description || item.summary) && (
+                    <p className="bp-reader-fallback">
+                      {stripHtml(item.og_description || item.summary || '')}
+                    </p>
+                  )}
+                  <a
+                    href={item.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bp-reader-ext-link"
+                  >
+                    Open in browser ↗
+                  </a>
+                </div>
+              )}
+
+              {article && !loading && article.content && (
+                <div
+                  className="bp-reader-body"
+                  // readability strips scripts/iframes; sources are all known news outlets
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: article.content }}
+                />
+              )}
+
+              {article && !loading && !article.content && (
+                <div className="bp-reader-error">
+                  <p>No article content found.</p>
+                  {(item.og_description || item.summary) && (
+                    <p className="bp-reader-fallback">
+                      {stripHtml(item.og_description || item.summary || '')}
+                    </p>
+                  )}
+                  <a
+                    href={item.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bp-reader-ext-link"
+                  >
+                    Open in browser ↗
+                  </a>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </aside>
+    </>
+  )
+}
+
+export function BriefingPage() {
+  const [activeCategory, setActiveCategory] = useState<Category>('all')
+  const [selectedItem, setSelectedItem] = useState<NewsItem | null>(null)
+  const queryClient = useQueryClient()
+
+  const { data: allNews = [], isLoading, isError } = useQuery({
+    queryKey: ['news'],
+    queryFn: () => fetchNews(100),
+    staleTime: 60_000,
+  })
+
+  const filtered = allNews.filter(
+    (item) => activeCategory === 'all' || categoryOf(item) === activeCategory,
+  )
+
+  const counts: Record<Category, number> = {
+    all: allNews.length,
+    official: allNews.filter((i) => categoryOf(i) === 'official').length,
+    news: allNews.filter((i) => categoryOf(i) === 'news').length,
+    video: allNews.filter((i) => categoryOf(i) === 'video').length,
+  }
+
+  const handleSelect = useCallback(
+    (item: NewsItem) => {
+      setSelectedItem((prev) => (prev?.url === item.url ? null : item))
+      if (!item.read_at) {
+        markNewsRead(item.url).then(() => {
+          queryClient.setQueryData<NewsItem[]>(['news'], (old) =>
+            old?.map((n) =>
+              n.url === item.url ? { ...n, read_at: new Date().toISOString() } : n,
+            ),
+          )
+        })
+      }
+    },
+    [queryClient],
+  )
+
+  const handleClose = useCallback(() => setSelectedItem(null), [])
+
+  const unreadCount = allNews.filter((i) => !i.read_at).length
+
+  return (
+    <div className="bp-page" data-testid="briefing-page">
+      <div className="bp-topbar">
+        <span className="bp-topbar-label mono">box-box · paddock briefing</span>
+        <span className="bp-topbar-meta mono">
+          {unreadCount > 0 ? `${unreadCount} unread` : 'all read'}
+        </span>
+      </div>
+
+      {isLoading && <div className="loading-state">loading briefing…</div>}
+      {isError && <div className="error-box">Failed to load paddock briefing.</div>}
+
+      {!isLoading && !isError && (
+        <>
+          <CategoryTabs
+            active={activeCategory}
+            counts={counts}
+            onChange={(c) => { setActiveCategory(c); setSelectedItem(null) }}
+          />
+
+          {filtered.length === 0 ? (
+            <div className="bp-empty">
+              No {activeCategory !== 'all' ? activeCategory : ''} items available.
+              Run <code>box-box --ingest-news</code> to refresh feeds.
+            </div>
+          ) : (
+            <div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
+              {filtered.map((item) => (
+                <BriefingCard
+                  key={item.url}
+                  item={item}
+                  isActive={selectedItem?.url === item.url}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      <ReaderPanel item={selectedItem} onClose={handleClose} />
+    </div>
+  )
+}

frontend/src/router.tsx

@@ -4,6 +4,7 @@ import { CommandCenterPage } from './pages/CommandCenterPage'
 import { RaceHubPage } from './pages/RaceHubPage'
 import { DataLibraryPage } from './pages/DataLibraryPage'
 import { LiveTimingPage } from './pages/LiveTimingPage'
+import { BriefingPage } from './pages/BriefingPage'
 
 type RaceHubSearch = {
   session_key?: number
@@ -56,12 +57,19 @@ export const liveTimingRoute = createRoute({
   component: LiveTimingPage,
 })
 
+export const briefingRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/briefing',
+  component: BriefingPage,
+})
+
 const routeTree = rootRoute.addChildren([
   commandCenterRoute,
   raceHubRoute,
   adminRoute,
   dataLibraryRoute,
   liveTimingRoute,
+  briefingRoute,
 ])
 
 export const router = createRouter({ routeTree })

frontend/src/styles/app.css

@@ -2298,69 +2298,266 @@ a { color: inherit; text-decoration: none; }
   .cc-empty-title { font-size: 19px; }
 }
 
-/* ── Paddock Briefing ── */
+/* ── Command Center — Paddock Briefing preview strip ── */
 .cc-briefing {
   margin-top: var(--s7);
 }
 
 .briefing-state {
-  margin-top: var(--s7);
+  margin-top: var(--s4);
+  color: var(--text-2);
+  font-size: 12px;
 }
 
-.briefing-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+.sec-action {
+  font-size: 11px;
+  color: var(--text-2);
+  text-decoration: none;
+  transition: color 0.1s;
+  letter-spacing: 0.03em;
+}
+.sec-action:hover { color: var(--text); }
+
+.cc-brief-unread {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 4px;
+  margin-left: var(--s2);
+  background: var(--red);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 8px;
+  font-family: var(--f-mono);
+  vertical-align: middle;
+}
+
+.cc-brief-strip {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.cc-brief-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  padding: var(--s3) var(--s4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  transition: background 0.1s, border-color 0.1s;
+  cursor: pointer;
+}
+.cc-brief-item:hover {
+  background: var(--surface-h);
+  border-color: var(--border-2);
+}
+.cc-brief-item.is-read { opacity: 0.55; }
+
+.cc-brief-item-meta {
+  display: flex;
+  gap: var(--s3);
+  font-size: 10px;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.cc-brief-source { color: var(--text-2); font-weight: 700; }
+.cc-brief-age   { color: var(--text-3); }
+
+.cc-brief-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Briefing Full Page ── */
+.bp-page {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--s6) var(--s7);
+}
+
+.bp-topbar {
+  display: flex;
+  align-items: center;
   gap: var(--s4);
+  padding: var(--s5) 0 var(--s4);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: var(--s5);
+}
+.bp-topbar-label { font-size: 11px; color: var(--text-2); letter-spacing: 0.05em; }
+.bp-topbar-meta  { font-size: 11px; color: var(--text-3); margin-left: auto; }
+
+/* Category tabs */
+.bp-cats {
+  display: flex;
+  gap: var(--s2);
+  margin-bottom: var(--s5);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: var(--s3);
+}
+.bp-cat {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  padding: var(--s2) var(--s4);
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-2);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: color 0.1s, border-color 0.1s, background 0.1s;
+}
+.bp-cat:hover { color: var(--text); background: var(--surface); }
+.bp-cat.active {
+  color: var(--text);
+  border-color: var(--border-2);
+  background: var(--surface);
+}
+.bp-cat-count {
+  font-size: 10px;
+  color: var(--text-3);
+  font-family: var(--f-mono);
 }
 
-.briefing-card {
+/* Card grid */
+.bp-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--s4);
+  transition: grid-template-columns 0.2s;
+}
+.bp-grid.bp-grid-narrow {
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+}
+
+.bp-empty {
+  padding: var(--s7) 0;
+  color: var(--text-2);
+  font-size: 13px;
+}
+.bp-empty code {
+  font-family: var(--f-mono);
+  font-size: 11px;
+  background: var(--surface);
+  padding: 1px 5px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+}
+
+/* Individual card */
+.bp-card {
   display: flex;
   flex-direction: column;
   background: var(--surface);
   border: 1px solid var(--border);
-  padding: var(--s4);
   border-radius: 2px;
+  overflow: hidden;
+  cursor: pointer;
   transition: border-color 0.1s, background 0.1s;
+  position: relative;
+  user-select: none;
+}
+.bp-card:hover        { border-color: var(--border-2); background: var(--surface-h); }
+.bp-card.bp-card-active { border-color: var(--red); }
+.bp-card.bp-card-read  { opacity: 0.6; }
+
+.bp-card-img-wrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--surface-2);
+}
+.bp-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.2s;
+}
+.bp-card:hover .bp-card-img { transform: scale(1.02); }
+
+.bp-card-img.bp-card-img-fallback,
+.bp-card-img-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: linear-gradient(135deg, var(--surface-2) 0%, var(--border) 100%);
+}
+.bp-card-img-initial {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-3);
+  font-family: var(--f-mono);
 }
 
-.briefing-card:hover {
-  background: var(--surface-h);
-  border-color: var(--border-2);
+.bp-video-badge {
+  position: absolute;
+  top: var(--s3);
+  right: var(--s3);
+  font-size: 10px;
+  font-family: var(--f-mono);
+  background: rgba(0,0,0,0.75);
+  color: var(--text);
+  padding: 2px 6px;
+  border-radius: 2px;
+  letter-spacing: 0.04em;
 }
 
-.briefing-card-head {
+.bp-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+  padding: var(--s4);
+  flex: 1;
+}
+
+.bp-card-meta {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
   font-size: 10px;
   color: var(--text-3);
-  margin-bottom: var(--s3);
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
+.bp-card-source { color: var(--text-2); font-weight: 700; }
+.bp-card-age    { color: var(--text-3); }
 
-.briefing-source {
-  color: var(--text-2);
-  font-weight: 700;
-}
-
-.briefing-title {
+.bp-card-title {
   font-size: 13px;
   font-weight: 600;
-  line-height: 1.4;
-  margin-bottom: var(--s3);
   color: var(--text);
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.briefing-summary {
+.bp-card-desc {
   font-size: 12px;
   color: var(--text-2);
   line-height: 1.5;
-  margin-bottom: var(--s4);
-  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 1;
 }
 
-.briefing-cat {
+.bp-card-cat {
   font-size: 9px;
   color: var(--text-3);
   align-self: flex-start;
@@ -2371,6 +2568,175 @@ a { color: inherit; text-decoration: none; }
   letter-spacing: 0.05em;
 }
 
+/* Reader overlay backdrop */
+.bp-reader-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 49;
+}
+
+/* Reader panel */
+.bp-reader {
+  position: fixed;
+  top: var(--nav-h);
+  right: 0;
+  bottom: 0;
+  width: min(640px, 92vw);
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  z-index: 50;
+  transform: translateX(100%);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.bp-reader.open { transform: translateX(0); }
+
+.bp-reader-toolbar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--s3) var(--s5);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  z-index: 2;
+}
+.bp-reader-toolbar-meta {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  font-size: 11px;
+  color: var(--text-3);
+  letter-spacing: 0.04em;
+}
+.bp-reader-dot { margin: 0 var(--s2); }
+
+.bp-reader-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+.bp-reader-open {
+  font-size: 14px;
+  color: var(--text-2);
+  text-decoration: none;
+  transition: color 0.1s;
+  line-height: 1;
+}
+.bp-reader-open:hover { color: var(--text); }
+.bp-reader-close {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 4px;
+  transition: color 0.1s;
+  line-height: 1;
+}
+.bp-reader-close:hover { color: var(--text); }
+
+.bp-reader-hero {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--surface-2);
+}
+.bp-reader-hero img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.bp-reader-content {
+  padding: var(--s6) var(--s6) var(--s7);
+}
+
+.bp-reader-title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--text);
+  margin-bottom: var(--s4);
+}
+.bp-reader-byline {
+  font-size: 11px;
+  color: var(--text-3);
+  margin-bottom: var(--s5);
+  letter-spacing: 0.04em;
+}
+
+.bp-reader-loading {
+  color: var(--text-2);
+  font-size: 13px;
+  padding: var(--s6) 0;
+}
+
+.bp-reader-error {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+  padding: var(--s5) 0;
+  color: var(--text-2);
+  font-size: 13px;
+}
+.bp-reader-fallback {
+  color: var(--text-2);
+  line-height: 1.6;
+}
+.bp-reader-ext-link {
+  color: var(--text-2);
+  text-decoration: underline;
+  font-size: 12px;
+}
+.bp-reader-ext-link:hover { color: var(--text); }
+
+/* Extracted article body */
+.bp-reader-body {
+  font-size: 14px;
+  line-height: 1.75;
+  color: var(--text);
+}
+.bp-reader-body p   { margin-bottom: 1em; }
+.bp-reader-body h1,
+.bp-reader-body h2,
+.bp-reader-body h3  { font-weight: 600; margin: 1.5em 0 0.5em; line-height: 1.3; }
+.bp-reader-body h1  { font-size: 18px; }
+.bp-reader-body h2  { font-size: 16px; }
+.bp-reader-body h3  { font-size: 14px; }
+.bp-reader-body a   { color: var(--text-2); text-decoration: underline; }
+.bp-reader-body a:hover { color: var(--text); }
+.bp-reader-body ul,
+.bp-reader-body ol  { padding-left: 1.5em; margin-bottom: 1em; }
+.bp-reader-body li  { margin-bottom: 0.3em; }
+.bp-reader-body blockquote {
+  border-left: 3px solid var(--border-2);
+  padding-left: var(--s5);
+  color: var(--text-2);
+  margin: 1em 0;
+}
+.bp-reader-body img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: var(--s5) 0;
+}
+.bp-reader-body figure { margin: var(--s5) 0; }
+.bp-reader-body figcaption {
+  font-size: 11px;
+  color: var(--text-3);
+  margin-top: var(--s2);
+}
+
+@media (max-width: 600px) {
+  .bp-grid { grid-template-columns: 1fr; }
+  .bp-reader { width: 100vw; }
+  .bp-reader-content { padding: var(--s5) var(--s5) var(--s7); }
+}
+
 /* ── Race Story Canvas ── */
 .race-story-canvas {
   display: flex;

frontend/src/types.ts

@@ -275,4 +275,16 @@ export interface NewsItem {
   summary?: string
   category?: string
   fetched_at: string
+  og_image_url?: string
+  og_description?: string
+  read_at?: string
+}
+
+export interface ArticleContent {
+  title: string
+  byline?: string
+  excerpt?: string
+  image_url?: string
+  content: string
+  site_name?: string
 }

frontend/src/utils.ts

@@ -74,6 +74,13 @@ export function compareFinishPosition(a: number, b: number): number {
   return finishPositionOrder(a) - finishPositionOrder(b)
 }
 
+export function stripHtml(html: string): string {
+  if (!html) return ''
+  const div = document.createElement('div')
+  div.innerHTML = html
+  return div.textContent ?? ''
+}
+
 export function timeAgo(dateStr: string): string {
   if (!dateStr) return ''
   const d = new Date(dateStr)