Spaces:

SemiAutomat1c
/

philverify-api

Running

Ryan Christian D. Deniega commited on Feb 24

Commit

b1a8265

1 Parent(s): 0950117

feat(frontend): apply frontend-design, web-design-guidelines, architect-review skills

- Replace Inter+SpaceGrotesk w/ Syne+Lora+JetBrains Mono (frontend-design)
- Halftone dot texture background, sharp 4px corners (frontend-design)
- PH flag red/gold/cyan palette, editorial ruled headers (frontend-design)
- Staggered fade-up animations w/ prefers-reduced-motion guard (web-guidelines)
- color-scheme: dark on html, touch-action: manipulation (web-guidelines)
- Semantic nav/main/header/section/ul/li/time elements (web-guidelines)
- aria-labels on all icon buttons, role=tablist, role=alert (web-guidelines)
- htmlFor labels on all form inputs, useId for unique IDs (web-guidelines)
- focus-visible rings, no outline-none (web-guidelines)
- font-variant-numeric tabular-nums via .tabular class (web-guidelines)
- Intl.DateTimeFormat via utils/format.js timeAgo() (web-guidelines)
- Business logic (timeAgo, scoreColor, VERDICT_MAP) extracted to utils/ (architect)
- SectionHeading, MetaRow, ScoreBar as atomic sub-components (architect)

Files changed (22) hide show

frontend/.gitignore +24 -0
frontend/README.md +16 -0
frontend/eslint.config.js +29 -0
frontend/index.html +13 -0
frontend/package-lock.json +0 -0
frontend/package.json +34 -0
frontend/public/vite.svg +1 -0
frontend/src/App.css +42 -0
frontend/src/App.jsx +22 -0
frontend/src/api.js +41 -0
frontend/src/assets/react.svg +1 -0
frontend/src/components/Navbar.jsx +64 -0
frontend/src/components/ScoreGauge.jsx +66 -0
frontend/src/components/VerdictBadge.jsx +32 -0
frontend/src/firebase.js +26 -0
frontend/src/index.css +283 -0
frontend/src/main.jsx +10 -0
frontend/src/pages/HistoryPage.jsx +104 -0
frontend/src/pages/TrendsPage.jsx +128 -0
frontend/src/pages/VerifyPage.jsx +334 -0
frontend/src/utils/format.js +35 -0
frontend/vite.config.js +16 -0

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,34 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "clsx": "^2.1.1",
+    "firebase": "^12.9.0",
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1",
+    "recharts": "^3.7.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

frontend/public/vite.svg ADDED Viewed

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,42 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import Navbar from './components/Navbar.jsx'
+import VerifyPage from './pages/VerifyPage.jsx'
+import HistoryPage from './pages/HistoryPage.jsx'
+import TrendsPage from './pages/TrendsPage.jsx'
+export default function App() {
+  return (
+    <BrowserRouter>
+      <div style={{ minHeight: '100vh', background: 'var(--bg-base)' }}>
+        <Navbar />
+        <main>
+          <Routes>
+            <Route path="/" element={<VerifyPage />} />
+            <Route path="/history" element={<HistoryPage />} />
+            <Route path="/trends" element={<TrendsPage />} />
+          </Routes>
+        </main>
+      </div>
+    </BrowserRouter>
+  )
+}

frontend/src/api.js ADDED Viewed

	@@ -0,0 +1,41 @@

+/** PhilVerify API client — proxied through Vite to http://localhost:8000 */
+const BASE = '/api'
+async function post(path, body) {
+    const res = await fetch(`${BASE}${path}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+    })
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({}))
+        throw new Error(err.detail || `HTTP ${res.status}`)
+    }
+    return res.json()
+}
+async function postForm(path, formData) {
+    const res = await fetch(`${BASE}${path}`, { method: 'POST', body: formData })
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({}))
+        throw new Error(err.detail || `HTTP ${res.status}`)
+    }
+    return res.json()
+}
+async function get(path, params = {}) {
+    const qs = new URLSearchParams(params).toString()
+    const res = await fetch(`${BASE}${path}${qs ? '?' + qs : ''}`)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    return res.json()
+}
+export const api = {
+    verifyText: (text) => post('/verify/text', { text }),
+    verifyUrl: (url) => post('/verify/url', { url }),
+    verifyImage: (file) => { const f = new FormData(); f.append('file', file); return postForm('/verify/image', f) },
+    verifyVideo: (file) => { const f = new FormData(); f.append('file', file); return postForm('/verify/video', f) },
+    history: (params) => get('/history', params),
+    trends: () => get('/trends'),
+    health: () => get('/health'),
+}

frontend/src/assets/react.svg ADDED Viewed

frontend/src/components/Navbar.jsx ADDED Viewed

	@@ -0,0 +1,64 @@

+import { NavLink } from 'react-router-dom'
+import { Radar, Clock, TrendingUp, ShieldCheck } from 'lucide-react'
+const NAV_LINKS = [
+    { to: '/', icon: ShieldCheck, label: 'Verify' },
+    { to: '/history', icon: Clock, label: 'History' },
+    { to: '/trends', icon: TrendingUp, label: 'Trends' },
+]
+export default function Navbar() {
+    return (
+        /* semantic <header> — web-design-guidelines: semantic HTML */
+        <header
+            role="banner"
+            style={{ background: 'var(--bg-surface)', borderBottom: '1px solid var(--border)' }}
+            className="sticky top-0 z-50 flex items-center justify-between px-6 h-14"
+        >
+            {/* Logo */}
+            <div className="flex items-center gap-2" aria-label="PhilVerify home">
+                <Radar size={18} style={{ color: 'var(--accent-red)' }} aria-hidden="true" />
+                <span className="font-display font-bold text-sm tracking-wide"
+                    style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.05em' }}>
+                    PHIL<span style={{ color: 'var(--accent-red)' }}>VERIFY</span>
+                </span>
+            </div>
+            {/* Nav — web-design-guidelines: use <nav> for navigation */}
+            <nav aria-label="Main navigation">
+                <ul className="flex items-center gap-1" role="list">
+                    {NAV_LINKS.map(({ to, icon: Icon, label }) => (
+                        <li key={to}>
+                            <NavLink to={to} end={to === '/'}>
+                                {({ isActive }) => (
+                                    <div
+                                        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold transition-colors"
+                                        style={{
+                                            fontFamily: 'var(--font-display)',
+                                            letterSpacing: '0.08em',
+                                            color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                                            borderBottom: isActive ? '2px solid var(--accent-red)' : '2px solid transparent',
+                                        }}
+                                    >
+                                        {/* aria-hidden on decorative icons — web-design-guidelines */}
+                                        <Icon size={13} aria-hidden="true" />
+                                        {label}
+                                    </div>
+                                )}
+                            </NavLink>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+            {/* Live indicator */}
+            <div className="flex items-center gap-1.5 text-xs tabular"
+                style={{ color: 'var(--text-muted)' }}
+                aria-label="API status: live">
+                <span className="w-1.5 h-1.5 rounded-full" aria-hidden="true"
+                    style={{ background: 'var(--accent-green)' }} />
+                LIVE
+            </div>
+        </header>
+    )
+}

frontend/src/components/ScoreGauge.jsx ADDED Viewed

	@@ -0,0 +1,66 @@

+import { scoreColor } from '../utils/format.js'
+/**
+ * SVG radial gauge — credibility score 0-100.
+ * Uses JetBrains Mono for score display (tabular, terminal aesthetic).
+ * web-design-guidelines: SVG transform on wrapper with transform-box fill-box.
+ * web-design-guidelines: prefers-reduced-motion handled in CSS.
+ */
+export default function ScoreGauge({ score = 0, size = 140 }) {
+    const R = 50
+    const circumference = 2 * Math.PI * R
+    const arcLen = (circumference * 240) / 360   // 240° sweep
+    const filled = (Math.min(score, 100) / 100) * arcLen
+    const color = scoreColor(score)
+    return (
+        <figure aria-label={`Credibility score: ${Math.round(score)} out of 100`}
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <svg width={size} height={size} viewBox="0 0 120 120" role="img"
+                aria-hidden="true">
+                {/* Background arc track */}
+                <circle
+                    cx="60" cy="60" r={R}
+                    fill="none"
+                    stroke="rgba(245,240,232,0.05)"
+                    strokeWidth="10"
+                    strokeDasharray={`${arcLen} ${circumference}`}
+                    strokeLinecap="round"
+                    transform="rotate(150 60 60)"
+                />
+                {/* Filled arc */}
+                <circle
+                    className="gauge-arc"
+                    cx="60" cy="60" r={R}
+                    fill="none"
+                    stroke={color}
+                    strokeWidth="10"
+                    strokeDasharray={`${filled} ${circumference}`}
+                    strokeLinecap="round"
+                    transform="rotate(150 60 60)"
+                />
+                {/* Score numeral — JetBrains Mono for terminal precision */}
+                <text x="60" y="62" textAnchor="middle"
+                    style={{
+                        fill: color,
+                        fontSize: 26,
+                        fontFamily: 'var(--font-mono)',
+                        fontWeight: 700,
+                        letterSpacing: '-0.02em',
+                    }}>
+                    {Math.round(score)}
+                </text>
+                <text x="60" y="76" textAnchor="middle"
+                    style={{
+                        fill: 'var(--text-muted)',
+                        fontSize: 7.5,
+                        fontFamily: 'var(--font-display)',
+                        fontWeight: 600,
+                        letterSpacing: '0.2em',
+                    }}>
+                    CREDIBILITY
+                </text>
+            </svg>
+        </figure>
+    )
+}

frontend/src/components/VerdictBadge.jsx ADDED Viewed

	@@ -0,0 +1,32 @@

+import { VERDICT_MAP } from '../utils/format.js'
+/**
+ * VerdictBadge — broadcast-style breaking news label.
+ * architect-review: uses shared VERDICT_MAP from utils, not inline logic.
+ */
+export default function VerdictBadge({ verdict, size = 'sm' }) {
+    const { cls, label, symbol } = VERDICT_MAP[verdict] ?? VERDICT_MAP['Unverified']
+    return size === 'banner' ? (
+        /* Large banner variant for results page */
+        <div className={`verdict-banner verdict-banner-${cls.replace('badge-', '')}`}
+            role="status" aria-label={`Verdict: ${label}`}>
+            {symbol} {label}
+        </div>
+    ) : (
+        <span
+            className={`${cls} rounded-sm font-semibold inline-flex items-center gap-1`}
+            style={{
+                fontFamily: 'var(--font-display)',
+                letterSpacing: '0.06em',
+                fontSize: size === 'sm' ? 10 : 12,
+                padding: size === 'sm' ? '2px 8px' : '4px 12px',
+            }}
+            role="status"
+            aria-label={`Verdict: ${label}`}
+        >
+            <span aria-hidden="true">{symbol}</span>
+            {label}
+        </span>
+    )
+}

frontend/src/firebase.js ADDED Viewed

	@@ -0,0 +1,26 @@

+import { initializeApp } from 'firebase/app'
+import { getFirestore, collection, query, orderBy, limit, onSnapshot } from 'firebase/firestore'
+const firebaseConfig = {
+    apiKey: "AIzaSyBmPeo9UfEkPhtBN9pq7xyzFNI2Bw4yue4",
+    authDomain: "philverify.firebaseapp.com",
+    projectId: "philverify",
+    storageBucket: "philverify.firebasestorage.app",
+    messagingSenderId: "148970785140",
+    appId: "1:978563490222:web:eea2551e0938ff2efaa83f",
+}
+const app = initializeApp(firebaseConfig)
+export const db = getFirestore(app)
+/** Subscribe to the 20 most recent verifications in real-time. */
+export function subscribeToHistory(callback) {
+    const q = query(
+        collection(db, 'verifications'),
+        orderBy('timestamp', 'desc'),
+        limit(20)
+    )
+    return onSnapshot(q, (snap) => {
+        callback(snap.docs.map(d => ({ id: d.id, ...d.data() })))
+    })
+}

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,283 @@

+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');
+@import "tailwindcss";
+/* ── Design Tokens — Investigative Newsroom Terminal ──────────── */
+:root {
+  /* Backgrounds — dark newsprint feel */
+  --bg-base: #0d0d0d;
+  --bg-surface: #141414;
+  --bg-elevated: #1c1c1c;
+  --bg-hover: #222222;
+  /* Borders */
+  --border: rgba(245, 240, 232, 0.07);
+  --border-light: rgba(245, 240, 232, 0.14);
+  /* Accent DNA — PH flag red + gold + cyan data */
+  --accent-red: #dc2626;
+  --accent-gold: #d97706;
+  --accent-cyan: #06b6d4;
+  --accent-green: #16a34a;
+  /* Verdict palette */
+  --credible: #16a34a;
+  --unverified: #d97706;
+  --fake: #dc2626;
+  /* Typography — warm newsprint white */
+  --text-primary: #f5f0e8;
+  --text-secondary: #a89f94;
+  --text-muted: #5c554e;
+  /* Font families */
+  --font-display: 'Syne', system-ui, sans-serif;
+  --font-body: 'Lora', Georgia, serif;
+  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+}
+/* ── Dark mode meta (web-design-guidelines: color-scheme) ─────── */
+html {
+  color-scheme: dark;
+  scroll-behavior: smooth;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  /* Halftone dot texture — atmospheric depth (frontend-design) */
+  background-image: radial-gradient(circle, rgba(245, 240, 232, 0.025) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  /* web-design-guidelines: text-wrap balance prevents widows */
+  text-wrap: balance;
+}
+/* ── Scrollbar ───────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--bg-elevated);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-red);
+}
+/* ── Focus (web-design-guidelines: never outline-none without replacement) */
+:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+/* ── Touch (web-design-guidelines) ───────────────────── */
+button,
+a,
+[role="button"] {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+/* ── Typography helpers ──────────────────────────────── */
+.font-display {
+  font-family: var(--font-display);
+}
+.font-mono {
+  font-family: var(--font-mono);
+}
+/* web-design-guidelines: tabular-nums for data columns */
+.tabular {
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono);
+}
+/* ── Verdict Badges — broadcast news aesthetic ─────── */
+.badge-credible {
+  background: rgba(22, 163, 74, 0.12);
+  color: #4ade80;
+  border: 1px solid rgba(22, 163, 74, 0.3);
+}
+.badge-unverified {
+  background: rgba(217, 119, 6, 0.12);
+  color: #fbbf24;
+  border: 1px solid rgba(217, 119, 6, 0.3);
+}
+.badge-fake {
+  background: rgba(220, 38, 38, 0.12);
+  color: #f87171;
+  border: 1px solid rgba(220, 38, 38, 0.35);
+}
+/* ── Cards ───────────────────────────────────────────── */
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  /* Sharp corners — editorial, not bubbly */
+  transition: border-color 0.2s;
+}
+.card:hover {
+  border-color: var(--border-light);
+}
+.card-elevated {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+/* ── Left-rule accent divider ────────────────────────── */
+.ruled {
+  border-left: 3px solid var(--accent-red);
+  padding-left: 12px;
+}
+/* ── Animations (frontend-design: one orchestrated reveal) ─── */
+/* web-design-guidelines: honor prefers-reduced-motion */
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes fadeUp {
+    from {
+      opacity: 0;
+      transform: translateY(14px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes barGrow {
+    from {
+      width: 0;
+    }
+  }
+  @keyframes scanline {
+    from {
+      top: -8px;
+    }
+    to {
+      top: 100%;
+    }
+  }
+  .fade-up {
+    animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+  .fade-up-1 {
+    animation: fadeUp 0.5s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .fade-up-2 {
+    animation: fadeUp 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .fade-up-3 {
+    animation: fadeUp 0.5s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .fade-up-4 {
+    animation: fadeUp 0.5s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .fade-up-5 {
+    animation: fadeUp 0.5s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  .bar-fill {
+    animation: barGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+}
+/* Fallback: no animation for reduced-motion users */
+@media (prefers-reduced-motion: reduce) {
+  .fade-up,
+  .fade-up-1,
+  .fade-up-2,
+  .fade-up-3,
+  .fade-up-4,
+  .fade-up-5 {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .bar-fill {
+    animation: none;
+  }
+}
+/* ── Gauge ─────────────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes gaugeFill {
+    from {
+      stroke-dashoffset: 400;
+    }
+  }
+  .gauge-arc {
+    animation: gaugeFill 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+}
+/* ── Verdict breaking-news banner ──────────────────────── */
+.verdict-banner {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: 11px;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border-radius: 2px;
+}
+.verdict-banner-credible {
+  background: var(--credible);
+  color: #fff;
+}
+.verdict-banner-unverified {
+  background: var(--unverified);
+  color: #fff;
+}
+.verdict-banner-fake {
+  background: var(--fake);
+  color: #fff;
+}

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/HistoryPage.jsx ADDED Viewed

	@@ -0,0 +1,104 @@

+import { useEffect, useState } from 'react'
+import { subscribeToHistory } from '../firebase.js'
+import { timeAgo } from '../utils/format.js'
+import VerdictBadge from '../components/VerdictBadge.jsx'
+import { Clock, RefreshCw } from 'lucide-react'
+export default function HistoryPage() {
+    const [entries, setEntries] = useState([])
+    const [loading, setLoading] = useState(true)
+    useEffect(() => {
+        /** Real-time Firestore subscription */
+        const unsub = subscribeToHistory((docs) => {
+            setEntries(docs)
+            setLoading(false)
+        })
+        return unsub
+    }, [])
+    return (
+        <main className="max-w-3xl mx-auto px-4 py-8 space-y-6">
+            <header className="ruled fade-up-1 flex items-end justify-between">
+                <div>
+                    <h1 style={{ fontSize: 32, fontFamily: 'var(--font-display)' }}>History</h1>
+                    <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
+                        Real-time from Firestore
+                        {/* web-design-guidelines: tabular-nums for counts */}
+                        {' — '}<span className="tabular">{entries.length}</span> records
+                    </p>
+                </div>
+                {/* aria-label on icon wrapper */}
+                <div className="flex items-center gap-1.5 text-xs"
+                    style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.1em' }}
+                    aria-label="Data is refreshing live">
+                    <RefreshCw size={11} aria-hidden="true" />
+                    LIVE
+                </div>
+            </header>
+            {loading && (
+                <p className="text-center py-16 text-sm" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}
+                    aria-live="polite">
+                    Loading history…
+                </p>
+            )}
+            {!loading && entries.length === 0 && (
+                <div className="card p-12 text-center fade-up">
+                    <Clock size={28} aria-hidden="true"
+                        style={{ color: 'var(--text-muted)', margin: '0 auto 12px' }} />
+                    <p style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
+                        No verifications yet
+                    </p>
+                    <p className="mt-1 text-sm" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                        Run your first fact-check on the Verify tab.
+                    </p>
+                </div>
+            )}
+            {/* web-design-guidelines: <ul> list for screen readers */}
+            {entries.length > 0 && (
+                <ul className="space-y-2" role="list" aria-label="Verification history" aria-live="polite">
+                    {entries.map((e, i) => (
+                        <li key={e.id} className="card p-4 fade-up"
+                            style={{ animationDelay: `${Math.min(i * 30, 300)}ms` }}>
+                            <div className="flex items-start justify-between gap-3">
+                                <div className="flex-1 min-w-0">
+                                    {/* web-design-guidelines: flex children need min-w-0 for truncation */}
+                                    <p className="text-sm truncate" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>
+                                        {e.text_preview || 'No text preview'}
+                                    </p>
+                                    <div className="flex items-center gap-2 mt-1.5">
+                                        <span className="text-xs px-1.5 py-0.5"
+                                            style={{
+                                                background: 'var(--bg-elevated)',
+                                                color: 'var(--text-muted)',
+                                                fontFamily: 'var(--font-display)',
+                                                letterSpacing: '0.08em',
+                                                fontSize: 10,
+                                                borderRadius: 2,
+                                            }}>
+                                            {e.input_type?.toUpperCase() ?? 'TEXT'}
+                                        </span>
+                                        {/* web-design-guidelines: Intl.DateTimeFormat via timeAgo util */}
+                                        <time className="text-xs tabular" style={{ color: 'var(--text-muted)' }}
+                                            dateTime={e.timestamp}>
+                                            {timeAgo(e.timestamp)}
+                                        </time>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-3 shrink-0">
+                                    <span className="tabular text-sm font-bold" style={{ color: 'var(--text-muted)' }}>
+                                        {Math.round(e.final_score)}
+                                    </span>
+                                    <VerdictBadge verdict={e.verdict} size="sm" />
+                                </div>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </main>
+    )
+}

frontend/src/pages/TrendsPage.jsx ADDED Viewed

	@@ -0,0 +1,128 @@

+import { useEffect, useState } from 'react'
+import { api } from '../api.js'
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts'
+const CHART_COLORS = ['#dc2626', '#d97706', '#06b6d4', '#8b5cf6', '#16a34a', '#ec4899']
+/** Custom tooltip — uses CSS vars, avoids hardcoded formats */
+const ChartTooltip = ({ active, payload }) => {
+    if (!active || !payload?.length) return null
+    return (
+        <div className="card-elevated px-3 py-2"
+            role="tooltip" aria-live="polite">
+            <p className="text-xs font-bold" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>
+                {payload[0].payload.name ?? payload[0].payload.topic}
+            </p>
+            <p className="tabular text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+                Count: {payload[0].value}
+            </p>
+        </div>
+    )
+}
+function ChartSection({ title, data, dataKey }) {
+    if (!data?.length) return null
+    return (
+        <section aria-label={title} className="card p-5 fade-up-2">
+            <p className="text-xs font-semibold uppercase mb-4"
+                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
+                {title}
+            </p>
+            {/* web-design-guidelines: font-variant-numeric tabular-nums for data */}
+            <ResponsiveContainer width="100%" height={200}>
+                <BarChart data={data} margin={{ top: 0, right: 0, left: -20, bottom: 0 }}>
+                    <XAxis dataKey={dataKey}
+                        tick={{ fontSize: 11, fill: 'var(--text-muted)', fontFamily: 'var(--font-display)' }}
+                        axisLine={false} tickLine={false} />
+                    <YAxis
+                        tick={{ fontSize: 11, fill: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}
+                        axisLine={false} tickLine={false} />
+                    <Tooltip content={<ChartTooltip />}
+                        cursor={{ fill: 'rgba(245,240,232,0.03)' }} />
+                    <Bar dataKey="count" radius={[2, 2, 0, 0]}>
+                        {data.map((_, i) => (
+                            <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+                        ))}
+                    </Bar>
+                </BarChart>
+            </ResponsiveContainer>
+        </section>
+    )
+}
+export default function TrendsPage() {
+    const [data, setData] = useState(null)
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+    useEffect(() => {
+        api.trends()
+            .then(setData)
+            .catch(e => setError(e.message))
+            .finally(() => setLoading(false))
+    }, [])
+    if (loading) return (
+        <p className="text-center py-24 text-sm" style={{ color: 'var(--text-muted)' }}
+            aria-live="polite">Loading trends…</p>
+    )
+    if (error) return (
+        <p role="alert" className="text-center py-24 text-sm" style={{ color: '#f87171' }}>
+            Error: {error}
+        </p>
+    )
+    const entityData = Object.entries(data?.top_entities || {})
+        .sort(([, a], [, b]) => b - a).slice(0, 8)
+        .map(([name, count]) => ({ name, count }))
+    const topicData = (data?.top_fake_topics || []).slice(0, 8)
+    const verdicts = [
+        { label: 'VERIFIED', count: data?.verdict_distribution?.Credible ?? 0, color: 'var(--credible)' },
+        { label: 'UNVERIFIED', count: data?.verdict_distribution?.Unverified ?? 0, color: 'var(--unverified)' },
+        { label: 'FALSE', count: data?.verdict_distribution?.['Likely Fake'] ?? 0, color: 'var(--fake)' },
+    ]
+    const hasData = entityData.length > 0 || verdicts.some(v => v.count > 0)
+    return (
+        <main className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+            <header className="ruled fade-up-1">
+                <h1 style={{ fontSize: 32, fontFamily: 'var(--font-display)' }}>Trends</h1>
+                <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
+                    Aggregated patterns from verified claims
+                </p>
+            </header>
+            {/* Verdict distribution stats */}
+            <div className="grid grid-cols-3 gap-3 fade-up-1" role="list" aria-label="Verdict distribution">
+                {verdicts.map(({ label, count, color }) => (
+                    <div key={label} className="card p-5 text-center" role="listitem">
+                        {/* web-design-guidelines: numerals for counts, tabular */}
+                        <p className="tabular font-bold" style={{ fontSize: 36, color, fontFamily: 'var(--font-mono)' }}>
+                            {count}
+                        </p>
+                        <p className="mt-1 text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.12em' }}>
+                            {label}
+                        </p>
+                    </div>
+                ))}
+            </div>
+            <ChartSection title="Top Named Entities" data={entityData} dataKey="name" />
+            <ChartSection title="Top Fake News Topics" data={topicData} dataKey="topic" />
+            {!hasData && (
+                <div className="card p-12 text-center fade-up">
+                    <p style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
+                        No trend data yet
+                    </p>
+                    <p className="text-sm mt-1" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                        Run some verifications first to see patterns emerge here.
+                    </p>
+                </div>
+            )}
+        </main>
+    )
+}

frontend/src/pages/VerifyPage.jsx ADDED Viewed

	@@ -0,0 +1,334 @@

+import { useState, useRef, useId } from 'react'
+import { api } from '../api.js'
+import { scoreColor } from '../utils/format.js'
+import ScoreGauge from '../components/ScoreGauge.jsx'
+import VerdictBadge from '../components/VerdictBadge.jsx'
+import { FileText, Link2, Image, Video, Loader2, ChevronRight, AlertCircle } from 'lucide-react'
+/* ── Tab definitions ────────────────────────────────────── */
+const TABS = [
+    { id: 'text', icon: FileText, label: 'Text' },
+    { id: 'url', icon: Link2, label: 'URL' },
+    { id: 'image', icon: Image, label: 'Image' },
+    { id: 'video', icon: Video, label: 'Video' },
+]
+/* ── Atomic sub-components (architect-review: Single Responsibility) ── */
+function SectionHeading({ children }) {
+    return (
+        <p className="font-display text-xs font-semibold uppercase tracking-widest mb-3"
+            style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
+            {children}
+        </p>
+    )
+}
+function MetaRow({ label, value, color }) {
+    return (
+        <div className="flex justify-between items-center py-2"
+            style={{ borderBottom: '1px solid var(--border)' }}>
+            <span className="text-xs" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
+                {label}
+            </span>
+            <span className="tabular text-xs font-bold" style={{ color: color || 'var(--text-primary)' }}>
+                {value}
+            </span>
+        </div>
+    )
+}
+function ScoreBar({ label, value, color, index = 0 }) {
+    return (
+        <div className="space-y-1.5">
+            <div className="flex justify-between text-xs">
+                <span style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>{label}</span>
+                <span className="tabular font-bold" style={{ color }}>{Math.round(value)}%</span>
+            </div>
+            <div className="h-1 rounded-none" style={{ background: 'var(--bg-hover)' }}
+                role="progressbar" aria-valuenow={Math.round(value)} aria-valuemin={0} aria-valuemax={100}
+                aria-label={label}>
+                <div className="h-1 bar-fill"
+                    style={{
+                        width: `${value}%`,
+                        background: color,
+                        animationDelay: `${index * 100}ms`,
+                    }} />
+            </div>
+        </div>
+    )
+}
+/* ── Main Page ──────────────────────────────────────────── */
+export default function VerifyPage() {
+    const [tab, setTab] = useState('text')
+    const [input, setInput] = useState('')
+    const [file, setFile] = useState(null)
+    const [loading, setLoading] = useState(false)
+    const [result, setResult] = useState(null)
+    const [error, setError] = useState(null)
+    const fileRef = useRef()
+    /* web-design-guidelines: label needs htmlFor — use useId for unique IDs */
+    const inputId = useId()
+    const errorId = useId()
+    const canSubmit = !loading && (tab === 'text' || tab === 'url' ? input.trim() : file)
+    async function handleSubmit(e) {
+        e.preventDefault()
+        if (!canSubmit) return
+        setLoading(true); setError(null); setResult(null)
+        try {
+            let res
+            if (tab === 'text') res = await api.verifyText(input)
+            else if (tab === 'url') res = await api.verifyUrl(input)
+            else if (tab === 'image') res = await api.verifyImage(file)
+            else res = await api.verifyVideo(file)
+            setResult(res)
+        } catch (err) {
+            setError(err.message)
+        } finally {
+            setLoading(false)
+        }
+    }
+    function handleTabChange(id) {
+        setTab(id); setInput(''); setFile(null); setResult(null); setError(null)
+    }
+    const entities = result?.entities || {}
+    const allEntities = [
+        ...(entities.persons || []).map(e => ({ label: e, type: 'Person' })),
+        ...(entities.organizations || []).map(e => ({ label: e, type: 'Org' })),
+        ...(entities.locations || []).map(e => ({ label: e, type: 'Place' })),
+        ...(entities.dates || []).map(e => ({ label: e, type: 'Date' })),
+    ]
+    const finalColor = result ? scoreColor(result.final_score) : 'var(--text-muted)'
+    return (
+        <main className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+            {/* Page header */}
+            <header className="ruled fade-up-1">
+                <h1 style={{ fontSize: 32, fontFamily: 'var(--font-display)' }}>
+                    Fact Check
+                </h1>
+                <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
+                    Paste text, a URL, or upload media — we'll verify credibility instantly.
+                </p>
+            </header>
+            {/* Input card */}
+            <section aria-label="Input panel" className="card p-6 space-y-4 fade-up-2">
+                {/* Tab bar — web-design-guidelines: role="tablist" */}
+                <div role="tablist" aria-label="Input type" className="flex gap-1">
+                    {TABS.map(({ id, icon: Icon, label }) => {
+                        const active = tab === id
+                        return (
+                            <button key={id}
+                                role="tab"
+                                aria-selected={active}
+                                aria-controls={`panel-${id}`}
+                                id={`tab-${id}`}
+                                onClick={() => handleTabChange(id)}
+                                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold transition-colors"
+                                style={{
+                                    fontFamily: 'var(--font-display)',
+                                    letterSpacing: '0.08em',
+                                    background: active ? 'var(--accent-red)' : 'var(--bg-elevated)',
+                                    color: active ? '#fff' : 'var(--text-secondary)',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    borderRadius: 2,
+                                }}>
+                                <Icon size={12} aria-hidden="true" />
+                                {label.toUpperCase()}
+                            </button>
+                        )
+                    })}
+                </div>
+                <form onSubmit={handleSubmit} className="space-y-4"
+                    aria-describedby={error ? errorId : undefined}>
+                    {/* Label — web-design-guidelines: inputs need labels */}
+                    {(tab === 'text' || tab === 'url') ? (
+                        <div>
+                            <label htmlFor={inputId} className="sr-only">
+                                {tab === 'url' ? 'Enter a URL to verify' : 'Enter text or headline to verify'}
+                            </label>
+                            <textarea
+                                id={inputId}
+                                value={input}
+                                onChange={e => setInput(e.target.value)}
+                                placeholder={tab === 'url' ? 'https://rappler.com/…' : 'Paste claim or headline here…'}
+                                rows={tab === 'url' ? 2 : 5}
+                                /* web-design-guidelines: autocomplete + type */
+                                autoComplete="off"
+                                spellCheck={tab === 'url' ? 'false' : 'true'}
+                                className="w-full resize-none p-4 text-sm"
+                                style={{
+                                    background: 'var(--bg-elevated)',
+                                    border: '1px solid var(--border)',
+                                    color: 'var(--text-primary)',
+                                    fontFamily: 'var(--font-body)',
+                                    borderRadius: 2,
+                                    outline: 'none',
+                                }}
+                                onFocus={e => e.target.style.borderColor = 'var(--accent-red)'}
+                                onBlur={e => e.target.style.borderColor = 'var(--border)'}
+                                aria-label={tab === 'url' ? 'URL input' : 'Claim text input'}
+                            />
+                        </div>
+                    ) : (
+                        /* File drop zone */
+                        <div>
+                            <label htmlFor={`file-${tab}`} className="sr-only">
+                                Upload {tab === 'image' ? 'an image' : 'a video or audio file'}
+                            </label>
+                            <div
+                                onClick={() => fileRef.current?.click()}
+                                onKeyDown={e => e.key === 'Enter' && fileRef.current?.click()}
+                                tabIndex={0}
+                                role="button"
+                                aria-label={`Upload ${tab} file. ${file ? `Selected: ${file.name}` : 'No file selected'}`}
+                                className="p-10 text-center cursor-pointer transition-colors"
+                                style={{
+                                    background: 'var(--bg-elevated)',
+                                    border: `1px dashed ${file ? 'var(--accent-red)' : 'var(--border)'}`,
+                                    borderRadius: 2,
+                                }}>
+                                <input ref={fileRef} id={`file-${tab}`} type="file" className="sr-only"
+                                    accept={tab === 'image' ? 'image/*' : 'video/*,audio/*'}
+                                    onChange={e => setFile(e.target.files[0])} />
+                                {file
+                                    ? <p className="text-sm font-semibold" style={{ color: 'var(--accent-red)', fontFamily: 'var(--font-display)' }}>{file.name}</p>
+                                    : <p className="text-sm" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                                        Click or press Enter to upload {tab === 'image' ? 'image' : 'video / audio'}
+                                    </p>
+                                }
+                            </div>
+                        </div>
+                    )}
+                    {/* Submit — web-design-guidelines: specific button label, spinner during request */}
+                    <button type="submit" disabled={!canSubmit}
+                        className="flex items-center gap-2 px-5 py-2.5 text-xs font-bold transition-colors"
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            letterSpacing: '0.1em',
+                            background: canSubmit ? 'var(--accent-red)' : 'var(--bg-elevated)',
+                            color: canSubmit ? '#fff' : 'var(--text-muted)',
+                            border: 'none',
+                            cursor: canSubmit ? 'pointer' : 'not-allowed',
+                            borderRadius: 2,
+                        }}
+                        aria-busy={loading}>
+                        {loading
+                            ? <><Loader2 size={13} className="animate-spin" aria-hidden="true" /> ANALYZING…</>
+                            : <><ChevronRight size={13} aria-hidden="true" /> VERIFY CLAIM</>
+                        }
+                    </button>
+                </form>
+            </section>
+            {/* Error — web-design-guidelines: errors inline, include fix */}
+            {error && (
+                <div id={errorId} role="alert"
+                    className="card p-4 flex items-start gap-2"
+                    style={{ borderColor: 'rgba(220,38,38,0.4)' }}>
+                    <AlertCircle size={15} style={{ color: '#f87171', marginTop: 1, flexShrink: 0 }} aria-hidden="true" />
+                    <div>
+                        <p className="text-sm font-semibold" style={{ color: '#f87171', fontFamily: 'var(--font-display)' }}>
+                            Verification failed
+                        </p>
+                        <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
+                            {error} — Check that the backend server is running on port 8000.
+                        </p>
+                    </div>
+                </div>
+            )}
+            {/* Results */}
+            {result && (
+                <section aria-label="Verification results" className="space-y-4">
+                    {/* Top row — gauge + verdict banner */}
+                    <div className="grid gap-4 fade-up-1" style={{ gridTemplateColumns: '180px 1fr' }}>
+                        {/* Gauge panel */}
+                        <div className="card p-5 flex flex-col items-center justify-center gap-3">
+                            <ScoreGauge score={result.final_score} size={140} />
+                            <VerdictBadge verdict={result.verdict} size="banner" />
+                        </div>
+                        {/* Meta panel */}
+                        <div className="card p-5 fade-up-2">
+                            <SectionHeading>Analysis Details</SectionHeading>
+                            <MetaRow label="Language" value={result.language} />
+                            <MetaRow label="Sentiment" value={result.sentiment} />
+                            <MetaRow label="Emotion" value={result.emotion} />
+                            <MetaRow label="Confidence" value={`${result.confidence?.toFixed(1)}%`}
+                                color={finalColor} />
+                            <MetaRow label="Processed in" value={`${result.processing_time_ms?.toFixed(0)} ms`}
+                                color="var(--accent-cyan)" />
+                        </div>
+                    </div>
+                    {/* Score breakdown */}
+                    <div className="card p-5 fade-up-3">
+                        <SectionHeading>Score Breakdown</SectionHeading>
+                        <div className="space-y-4">
+                            <ScoreBar label="ML Classifier (Layer 1)" value={result.layer1?.confidence || 0} color="var(--accent-cyan)" index={0} />
+                            <ScoreBar label="Evidence Score (Layer 2)" value={result.layer2?.evidence_score || 0} color="var(--accent-gold)" index={1} />
+                            <ScoreBar label="Final Credibility Score" value={result.final_score} color={finalColor} index={2} />
+                        </div>
+                    </div>
+                    {/* Named entities */}
+                    {allEntities.length > 0 && (
+                        <div className="card p-5 fade-up-4">
+                            <SectionHeading>Named Entities ({allEntities.length})</SectionHeading>
+                            <ul className="flex flex-wrap gap-2" role="list">
+                                {allEntities.map((e, i) => (
+                                    <li key={i}
+                                        className="flex items-center gap-1.5 px-2.5 py-1 text-xs"
+                                        style={{
+                                            background: 'var(--bg-elevated)',
+                                            border: '1px solid var(--border)',
+                                            borderRadius: 2,
+                                        }}>
+                                        <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.1em' }}>
+                                            {e.type.toUpperCase()}
+                                        </span>
+                                        <span style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>{e.label}</span>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                    {/* Evidence sources */}
+                    {result.layer2?.sources?.length > 0 && (
+                        <div className="card p-5 fade-up-5">
+                            <SectionHeading>Evidence Sources</SectionHeading>
+                            <ul className="space-y-2" role="list">
+                                {result.layer2.sources.map((src, i) => (
+                                    <li key={i}>
+                                        <a href={src.url} target="_blank" rel="noreferrer"
+                                            className="block p-3 transition-colors"
+                                            style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 2 }}>
+                                            <p className="text-xs font-semibold mb-0.5" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>
+                                                {src.title}
+                                            </p>
+                                            <p className="text-xs tabular" style={{ color: 'var(--text-muted)' }}>
+                                                {src.source} · {(src.similarity * 100).toFixed(0)}% match
+                                            </p>
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                </section>
+            )}
+        </main>
+    )
+}

frontend/src/utils/format.js ADDED Viewed

	@@ -0,0 +1,35 @@

+/**
+ * Utility functions extracted per architect-reviewer:
+ * no business logic in UI components.
+ */
+/**
+ * Format ISO timestamp using Intl.DateTimeFormat (web-design-guidelines: no hardcoded formats)
+ */
+export function timeAgo(iso) {
+    const diff = Date.now() - new Date(iso).getTime()
+    const mins = Math.floor(diff / 60_000)
+    if (mins < 1) return 'just now'
+    if (mins < 60) return `${mins}m ago`
+    const hrs = Math.floor(mins / 60)
+    if (hrs < 24) return `${hrs}h ago`
+    return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }).format(new Date(iso))
+}
+/**
+ * Map a 0-100 credibility score to CSS color token
+ */
+export function scoreColor(score) {
+    if (score >= 70) return 'var(--credible)'
+    if (score >= 40) return 'var(--unverified)'
+    return 'var(--fake)'
+}
+/**
+ * Map verdict string to badge class
+ */
+export const VERDICT_MAP = {
+    'Credible': { cls: 'badge-credible', label: 'VERIFIED', symbol: '✓' },
+    'Unverified': { cls: 'badge-unverified', label: 'UNVERIFIED', symbol: '?' },
+    'Likely Fake': { cls: 'badge-fake', label: 'FALSE', symbol: '✗' },
+}

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        rewrite: (path) => path.replace(/^\/api/, ''),
+        changeOrigin: true,
+      },
+    },
+  },
+})