Add notice banner to benchmark leaderboard

Show a centered, italic notice row above the leaderboard data when a
`notice` field is present in leaderboard.yml. Currently signals that
Fable 5, Opus 4.8, etc. are being evaluated.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: semoro

blocks/benchmark/leaderboard/index.tsx

@@ -4,7 +4,7 @@ import { useTextStyles } from '@rescui/typography';
 import { Tooltip } from '@rescui/tooltip';
 import { InfoOutlineIcon } from '@rescui/icons';
 import styles from './leaderboard.module.css';
-import { columns, rows, SETUP_COLUMN_LABEL, TOP_SCORE_COUNT, twoDecimals } from './leaderboard-data';
+import { columns, notice, rows, SETUP_COLUMN_LABEL, TOP_SCORE_COUNT, twoDecimals } from './leaderboard-data';
 
 function RateCell({ value, textCn }: { value: number; textCn: ReturnType<typeof useTextStyles> }) {
     return <span className={cn(styles.rateValue, textCn('rs-text-2'))}>{twoDecimals(value)}</span>;
@@ -39,6 +39,18 @@ export function Leaderboard() {
                                 ))}
                             </tr>
                         </thead>
+                        {notice && (
+                            <tbody>
+                                <tr className={styles.noticeRow} data-testid="bench-notice">
+                                    <td
+                                        className={cn(styles.td, styles.noticeCell, textCn('rs-text-2'))}
+                                        colSpan={columns.length + 1}
+                                    >
+                                        {notice}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        )}
                         <tbody>
                             {rows.map((row, index) => (
                                 <tr

blocks/benchmark/leaderboard/leaderboard-data.ts

@@ -55,7 +55,11 @@ export const columns: BenchColumn[] = [
     { key: 'date', label: 'Date', hint: 'Evaluation date', format: formatDate },
 ];
 
-const rawRows: BenchRow[] = (leaderboardRaw as { rows?: BenchRow[] }).rows ?? [];
+const raw = leaderboardRaw as { rows?: BenchRow[]; notice?: string };
+
+export const notice: string | undefined = raw.notice;
+
+const rawRows: BenchRow[] = raw.rows ?? [];
 
 export const rows: BenchRow[] = [...rawRows]
     .map((row) => ({ ...row, date: String(row.date).slice(0, 10) }))

blocks/benchmark/leaderboard/leaderboard.module.css

@@ -22,6 +22,16 @@
     }
 }
 
+.noticeRow {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.noticeCell {
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+    text-align: center;
+}
+
 .scroll {
     /* The table needs ~1100px, which only the widest layout (>1190px viewport)
        fits — there the scroll box stays a non-scroll container so the header can

data/benchmark/leaderboard.yml

@@ -1,4 +1,5 @@
 # Kotlin Benchmark leaderboard data.
+notice: "Fable 5, Opus 4.8, … — Evaluating…"
 rows:
   #------------------------------ Top scorers -------------------------------
   - setup: "Claude Code + Opus 4.7 xhigh"

test/e2e/benchmark.spec.ts

@@ -115,6 +115,12 @@ test.describe('Kotlin Benchmark landing page', () => {
         expect(result.headerTop).toBeLessThanOrEqual(4);
     });
 
+    test('notice banner is visible when set in data', async () => {
+        const notice = benchmark.page.getByTestId('bench-notice');
+        await expect(notice).toBeVisible();
+        await expect(notice).toContainText('Evaluating');
+    });
+
     test('methodology CTA links to the methodology page and GitHub', async () => {
         await expect(benchmark.page.getByTestId('bench-cta-title')).toContainText('How Kotlin Benchmark works');
         await expect(benchmark.methodologyCta).toHaveAttribute('href', /\/benchmark\/methodology\/?$/);