Add Paddock Briefing UI (Phase 21)

frontend/src/components/PaddockBriefing.tsx

@@ -0,0 +1,61 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchNews } from '../api'
+import { timeAgo } from '../utils'
+
+export function PaddockBriefing() {
+  const { data: news, isLoading, isError } = useQuery({
+    queryKey: ['news'],
+    queryFn: () => fetchNews(12),
+    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>
+  }
+
+  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>
+      </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"
+              role="listitem"
+            >
+              <div className="briefing-card-head mono">
+                <span className="briefing-source">{item.source}</span>
+                <span className="briefing-age">{age}</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>
+    </section>
+  )
+}