// ════════════════════════════════════════════════════════════════════ // THE FRONTIER LEDGER — React app (transpiled in-browser by Babel) // Filters: by TOPIC (primary axis) and by COMPANY (secondary axis), // plus Recency/Magnitude sort and Grid/Timeline view. // Skins + day/night live in the APPEARANCE hologram widget (static DOM, // bottom-right) which writes data-skin/data-mode to ; this app // listens for the 'fl-appearance' event to recolor. The filter controls // live in a second hologram widget (bottom-left, React-driven). // ════════════════════════════════════════════════════════════════════ */ const { useState, useMemo, useEffect } = React; const SKINS = { observatory: { phos: "#39ff14", cyan: "#00f5ff", ink: "#0c2e18", glow: "0 0 12px rgba(57,255,20,.5)" }, tokyo: { phos: "#00f5ff", cyan: "#2bd6ff", ink: "#0a2e44", glow: "0 0 12px rgba(0,245,255,.5)" }, outrun: { phos: "#ff2bd6", cyan: "#ff5be0", ink: "#2a0a2e", glow: "0 0 12px rgba(255,43,214,.5)" }, mainframe: { phos: "#ffb000", cyan: "#ffd166", ink: "#3a2400", glow: "0 0 12px rgba(255,176,0,.5)" }, sentinel: { phos: "#ff3b3b", cyan: "#ff7a7a", ink: "#2a0c0c", glow: "0 0 12px rgba(255,59,59,.5)" }, }; const SKIN_NAMES = Object.keys(SKINS); // Per-company accent for the card logo box (restores pre-hologram look) const LOGO_COLORS = { "OpenAI": "#00f5ff", "Google DeepMind": "#4285f4", "Anthropic": "#d9663a", "Meta AI (FAIR)": "#a259ff", "Microsoft Research": "#2b9fe0", "xAI": "#cfd8dc", "Mistral AI": "#ff8c42", "DeepSeek": "#3b6ef5", "Nvidia Research": "#76b900", "IBM Research": "#2c7be5", "Amazon Science / AWS AI": "#ff9900", }; function App() { const [topic, setTopic] = useState("All"); const [company, setCompany] = useState("All"); const [sort, setSort] = useState("recency"); // recency | magnitude const [expandedId, setExpandedId] = useState(null); const [view, setView] = useState("grid"); // grid | timeline const [controlsOpen, setControlsOpen] = useState(false); // skin/mode are owned by the appearance hologram widget (bottom-right); // we mirror them here so the grid can recolor. const [skin, setSkin] = useState( () => document.documentElement.getAttribute("data-skin") || "observatory" ); const [mode, setMode] = useState( () => document.documentElement.getAttribute("data-mode") || "night" ); useEffect(() => { const onApp = (e) => { if (e.detail && e.detail.skin) setSkin(e.detail.skin); if (e.detail && e.detail.mode) setMode(e.detail.mode); }; window.addEventListener("fl-appearance", onApp); return () => window.removeEventListener("fl-appearance", onApp); }, []); const c = SKINS[skin] || SKINS.observatory; const filtered = useMemo(() => { let list = PUBLICATIONS.filter((p) => { if (topic !== "All" && !p.topics.includes(topic)) return false; if (company !== "All" && p.company !== company) return false; return true; }); list = [...list].sort((a, b) => sort === "magnitude" ? (b.openYears || 0) - (a.openYears || 0) : b.date.localeCompare(a.date) ); return list; }, [topic, company, sort]); const activeFilters = (topic !== "All" ? 1 : 0) + (company !== "All" ? 1 : 0) + (sort !== "recency" ? 1 : 0) + (view !== "grid" ? 1 : 0); return (
DOAI
RESEARCH ATLAS · LIVE INTEL

THE FRONTIER LEDGER

A research atlas of landmark AI publications — not a blog feed.

{/* Live cards ARE today's signals (newest per company). No separate strip. */}
{filtered.length} publication{filtered.length !== 1 ? "s" : ""} shown
{view === "grid" ? (
{filtered.map((p) => ( setExpandedId(expandedId === p.id ? null : p.id)} /> ))}
) : (
{filtered.map((p) => (
{p.date}
setExpandedId(expandedId === p.id ? null : p.id)} />
))}
)} {filtered.length === 0 &&

No publications match this filter.

} {/* ════ CONTROLS HOLOGRAM (bottom-left) — filters, sort, view ════ */}
⬡ CONTROLS
{TOPIC_AXES.map((t) => ( ))}
{COMPANIES.map((co) => ( ))}
); } function Card({ pub, expanded, onToggle }) { const c = SKINS[document.documentElement.getAttribute("data-skin")] || SKINS.observatory; const acc = LOGO_COLORS[pub.company] || c.cyan; return (
{pub.logo}
{pub.company}
{pub.title}
{pub.date}{pub.openYears ? " · " + pub.openYears + "y open" : ""}
{expanded ? "▾" : "▸"}
{pub.result}
{expanded && (

WHY NOTABLE — {pub.notable}

{pub.topics.map((t) => ( {t} ))}
{pub.source && ( ↗ primary source )}
)}
); } ReactDOM.createRoot(document.getElementById("root")).render();