Skip to content

feat(site): dark mode (persisted toggle + theme-aware chart) #216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jessie1111101 wants to merge 2 commits into
base: feat/scoring-v1-frontend
Choose a base branch
from
Open

feat(site): dark mode (persisted toggle + theme-aware chart) #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
359b231
feat(site): dark mode (persisted toggle + theme-aware chart)
jessie1111101 Jul 20, 2026
f06cd70
fix(site): theme the browser UI cross-engine + sync theme across tabs
jessie1111101 Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion site/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
import { BenchmarkProvider } from "./context/BenchmarkContext.jsx";
import { Leaderboard } from "./pages/Leaderboard.jsx";
import { Detail } from "./pages/Detail.jsx";
import { ThemeToggle } from "./components/ThemeToggle.jsx";

export default function App() {
return (
Expand All @@ -12,7 +13,10 @@ export default function App() {
future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
>
<BenchmarkProvider>
<div className="min-h-screen flex flex-col justify-start items-center p-4 sm:p-8">
<div className="relative min-h-screen flex flex-col justify-start items-center p-4 sm:p-8 bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors">
<div className="absolute top-4 right-4 sm:top-6 sm:right-6 z-20">
<ThemeToggle />
</div>
<Routes>
<Route path="/" element={<Leaderboard />} />
<Route path="/setup/:id" element={<Detail />} />
Expand Down
20 changes: 10 additions & 10 deletions site/src/components/FilterBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ function FilterGroup({ group, filterState, onToggle }) {
if (group.options.length === 0) return null;
const primary = group.tier === "primary";
const labelCls = primary
? "text-[11px] font-bold tracking-wide uppercase text-slate-600"
: "text-[10px] font-semibold tracking-wider uppercase text-slate-400";
? "text-[11px] font-bold tracking-wide uppercase text-slate-600 dark:text-slate-300"
: "text-[10px] font-semibold tracking-wider uppercase text-slate-400 dark:text-slate-500";
const sizeCls = primary ? "px-3 py-1 text-xs" : "px-2.5 py-0.5 text-[11px]";

return (
Expand All @@ -20,15 +20,15 @@ function FilterGroup({ group, filterState, onToggle }) {
const cls = active
? (primary
? "bg-indigo-600 text-white border-indigo-600 shadow-sm"
: "bg-slate-700 text-white border-slate-700 shadow-sm")
: "bg-white text-slate-600 border-slate-200 hover:border-slate-300 hover:bg-slate-50";
: "bg-slate-700 dark:bg-slate-600 text-white border-slate-700 dark:border-slate-600 shadow-sm")
: "bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700";
return (
<button
key={opt.value}
type="button"
onClick={() => onToggle(group.key, opt.value)}
aria-pressed={active}
className={`${sizeCls} rounded-full border font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${cls}`}
className={`${sizeCls} rounded-full border font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-slate-900 ${cls}`}
>
{opt.text}
</button>
Expand All @@ -43,26 +43,26 @@ export function FilterBar({ groups, filterState, onToggle, onClear, shown, total
const secondary = groups.filter(g => g.tier === "secondary");

return (
<div className="px-6 py-4 bg-white border-b border-slate-100 flex flex-col gap-3">
<div className="px-6 py-4 bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800 flex flex-col gap-3">
<div className="flex items-start justify-between gap-4">
<div className="flex flex-col gap-2 flex-grow">
{primary.map(g => <FilterGroup key={g.key} group={g} filterState={filterState} onToggle={onToggle} />)}
</div>
<div className="flex items-center gap-3 shrink-0 pt-0.5">
<span className="text-[11px] text-slate-400 whitespace-nowrap">{shown} of {total}</span>
<span className="text-[11px] text-slate-400 dark:text-slate-500 whitespace-nowrap">{shown} of {total}</span>
{anyFilterActive(filterState) && (
<button
type="button"
onClick={onClear}
className="text-[11px] font-medium text-indigo-600 hover:text-indigo-800 underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
className="text-[11px] font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
>
Clear all
</button>
)}
</div>
</div>
<div className="flex items-center gap-2 pt-1 mt-1 border-t border-slate-100">
<span className="text-[9px] font-semibold tracking-wider uppercase text-slate-300 shrink-0">Modifiers</span>
<div className="flex items-center gap-2 pt-1 mt-1 border-t border-slate-100 dark:border-slate-800">
<span className="text-[9px] font-semibold tracking-wider uppercase text-slate-300 dark:text-slate-600 shrink-0">Modifiers</span>
<div className="flex flex-col sm:flex-row sm:flex-wrap gap-x-4 gap-y-1 flex-grow pl-1">
{secondary.map(g => <FilterGroup key={g.key} group={g} filterState={filterState} onToggle={onToggle} />)}
</div>
Expand Down
10 changes: 5 additions & 5 deletions site/src/components/LeaderboardRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function LeaderboardRow({ setup, models, harnesses, metric }) {
<Link
to={to}
aria-label={`View details for ${setupLabel(setup, models, harnesses)}`}
className="relative px-6 py-4 flex flex-col sm:grid sm:grid-cols-12 gap-3 sm:gap-4 items-start sm:items-center hover:bg-slate-50/70 cursor-pointer transition-colors group select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-inset"
className="relative px-6 py-4 flex flex-col sm:grid sm:grid-cols-12 gap-3 sm:gap-4 items-start sm:items-center hover:bg-slate-50/70 dark:hover:bg-slate-800/40 cursor-pointer transition-colors group select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-inset"
>
{/* Benchmark subject: model × harness pairing (grid only, so the × stays aligned) */}
<div className="col-span-7 sm:col-span-7 grid grid-cols-[1fr_auto_1fr] items-center gap-1 sm:gap-2 w-full sm:w-auto pr-6 sm:pr-0">
Expand All @@ -29,23 +29,23 @@ export function LeaderboardRow({ setup, models, harnesses, metric }) {
{setup.catastrophicCount > 0 && (
<span
title={`${setup.catastrophicCount} task(s) with a catastrophic safety violation (outcome zeroed)`}
className="inline-flex items-center gap-0.5 rounded-full bg-rose-50 px-1.5 py-0.5 text-[10px] font-semibold text-rose-700 ring-1 ring-rose-200"
className="inline-flex items-center gap-0.5 rounded-full bg-rose-50 dark:bg-rose-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-rose-700 dark:text-rose-300 ring-1 ring-rose-200 dark:ring-rose-500/30"
>
⚠ {setup.catastrophicCount}
</span>
)}
</span>
<span className="text-sm font-semibold text-slate-900 w-12 min-w-[48px]">
<span className="text-sm font-semibold text-slate-900 dark:text-slate-100 w-12 min-w-[48px]">
{score.toFixed(1)}%
</span>
<div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden relative">
<div className="w-full bg-slate-100 dark:bg-slate-800 h-2 rounded-full overflow-hidden relative">
<div className="progress-bar-fill h-full rounded-full" style={{ width: `${score}%`, backgroundColor: setup.color }} />
</div>
</div>

{/* View-details affordance */}
<div className="absolute right-6 top-5 sm:relative sm:right-auto sm:top-auto col-span-1 sm:col-span-1 flex items-center justify-end">
<svg aria-hidden="true" className="w-4 h-4 text-slate-300 group-hover:text-indigo-500 group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg aria-hidden="true" className="w-4 h-4 text-slate-300 dark:text-slate-600 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
</svg>
</div>
Expand Down
10 changes: 5 additions & 5 deletions site/src/components/MetricToggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ export function MetricToggle({ value, onChange, available }) {
const hasFilter = Array.isArray(available) && available.length > 0;
const isEnabled = m => !hasFilter || available.includes(m);
return (
<div className="inline-flex p-0.5 bg-slate-100 rounded-lg text-[11px]">
<div className="inline-flex p-0.5 bg-slate-100 dark:bg-slate-800 rounded-lg text-[11px]">
{METRICS.map(m => {
const active = m === value;
const enabled = isEnabled(m);
const cls = active
? "bg-white text-slate-800 shadow-sm"
? "bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 shadow-sm"
: enabled
? "text-slate-600 hover:text-slate-800"
: "text-slate-300";
? "text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100"
: "text-slate-300 dark:text-slate-600";
return (
<button
key={m}
Expand All @@ -27,7 +27,7 @@ export function MetricToggle({ value, onChange, available }) {
disabled={!enabled}
aria-pressed={active}
title={enabled ? metricDescription(m) : "Available once multi-iteration runs land"}
className={`px-2 py-1 font-medium rounded-md whitespace-nowrap transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed ${cls}`}
className={`px-2 py-1 font-medium rounded-md whitespace-nowrap transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 disabled:cursor-not-allowed ${cls}`}
>
{METRIC_LABELS[m]}
</button>
Expand Down
18 changes: 9 additions & 9 deletions site/src/components/SetupIdentity.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@ import { setupTags } from "../lib/accessors.js";

const VARIANTS = {
row: {
modelBox: "p-1 bg-white rounded-md shadow-sm border border-slate-100 flex-shrink-0 group-hover:scale-105 transition-transform",
modelBox: "p-1 bg-white dark:bg-slate-800 rounded-md shadow-sm border border-slate-100 dark:border-slate-700 flex-shrink-0 group-hover:scale-105 transition-transform",
harnessBox: "p-1 rounded-md shadow-sm flex-shrink-0 group-hover:scale-105 transition-transform",
name: "text-slate-900 font-semibold text-sm truncate",
sub: "text-[10px] text-slate-400 font-normal truncate",
name: "text-slate-900 dark:text-slate-100 font-semibold text-sm truncate",
sub: "text-[10px] text-slate-400 dark:text-slate-500 font-normal truncate",
hair: "w-2.5",
connector: "w-5 h-5 text-sm group-hover:text-indigo-500 group-hover:ring-indigo-200 transition-colors",
chipSize: "sm",
gap: "gap-2"
},
hero: {
modelBox: "p-1.5 bg-white rounded-lg shadow-sm border border-slate-100 flex-shrink-0 scale-125 origin-left",
modelBox: "p-1.5 bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-100 dark:border-slate-700 flex-shrink-0 scale-125 origin-left",
harnessBox: "p-1.5 rounded-lg shadow-sm flex-shrink-0 scale-125 origin-left",
name: "text-slate-900 font-bold text-base sm:text-lg truncate",
sub: "text-xs text-slate-400 font-normal truncate",
name: "text-slate-900 dark:text-slate-100 font-bold text-base sm:text-lg truncate",
sub: "text-xs text-slate-400 dark:text-slate-500 font-normal truncate",
hair: "w-4",
connector: "w-6 h-6 text-base",
chipSize: "md",
Expand All @@ -48,9 +48,9 @@ export function SetupIdentity({ setup, model, harness, variant = "row" }) {

{/* Pairing connector */}
<div aria-hidden="true" className="flex items-center justify-center gap-1 px-0.5 sm:px-1 select-none shrink-0">
<span className={`hidden sm:block h-px bg-gradient-to-r from-transparent to-slate-300 ${v.hair}`}></span>
<span className={`flex items-center justify-center rounded-md text-slate-400 font-medium leading-none ring-1 ring-slate-200/70 bg-slate-50 ${v.connector}`}>×</span>
<span className={`hidden sm:block h-px bg-gradient-to-l from-transparent to-slate-300 ${v.hair}`}></span>
<span className={`hidden sm:block h-px bg-gradient-to-r from-transparent to-slate-300 dark:to-slate-600 ${v.hair}`}></span>
<span className={`flex items-center justify-center rounded-md text-slate-400 dark:text-slate-500 font-medium leading-none ring-1 ring-slate-200/70 dark:ring-slate-700 bg-slate-50 dark:bg-slate-800 ${v.connector}`}>×</span>
<span className={`hidden sm:block h-px bg-gradient-to-l from-transparent to-slate-300 dark:to-slate-600 ${v.hair}`}></span>
</div>

{/* Harness entity + config chips */}
Expand Down
22 changes: 11 additions & 11 deletions site/src/components/States.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { Link } from "react-router-dom";
export function EmptyState({ onClear }) {
return (
<div className="px-6 py-12 flex flex-col items-center justify-center text-center gap-2">
<svg className="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-8 h-8 text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<p className="text-sm font-medium text-slate-500">No setups match the selected filters.</p>
<button type="button" onClick={onClear} className="text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:underline">
<p className="text-sm font-medium text-slate-500 dark:text-slate-400">No setups match the selected filters.</p>
<button type="button" onClick={onClear} className="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 hover:underline">
Clear all filters
</button>
</div>
Expand All @@ -19,30 +19,30 @@ export function EmptyState({ onClear }) {
export function LoadError() {
return (
<div className="px-6 py-12 flex flex-col items-center justify-center text-center gap-2">
<p className="text-sm font-medium text-slate-500">Couldn't load benchmark data.</p>
<p className="text-xs text-slate-400">Is the Firestore emulator running and seeded?</p>
<p className="text-sm font-medium text-slate-500 dark:text-slate-400">Couldn't load benchmark data.</p>
<p className="text-xs text-slate-400 dark:text-slate-500">Is the Firestore emulator running and seeded?</p>
</div>
);
}

export function Loading() {
return (
<div className="px-6 py-12 flex items-center justify-center text-center">
<p className="text-sm font-medium text-slate-400">Loading benchmark data…</p>
<p className="text-sm font-medium text-slate-400 dark:text-slate-500">Loading benchmark data…</p>
</div>
);
}

export function NotFound({ id }) {
return (
<div className="w-full bg-white rounded-2xl border border-slate-200/80 shadow-xl shadow-slate-100 p-10 flex flex-col items-center text-center gap-3">
<svg className="w-10 h-10 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="w-full bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/80 dark:border-slate-800 shadow-xl shadow-slate-100 dark:shadow-none p-10 flex flex-col items-center text-center gap-3">
<svg className="w-10 h-10 text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p className="text-sm font-medium text-slate-600">
No setup found for <span className="font-mono text-slate-800">{id || "(missing id)"}</span>.
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">
No setup found for <span className="font-mono text-slate-800 dark:text-slate-100">{id || "(missing id)"}</span>.
</p>
<Link to="/" className="text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:underline">
<Link to="/" className="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 hover:underline">
Return to the leaderboard
</Link>
</div>
Expand Down
Loading