dsh-model-arena 0.2.0 → 0.3.0

package/lib/client/index.d.ts

@@ -1,14 +1,15 @@
 /**
- * Browser half of dsh-model-arena: the Model Arena page inside Settings.
+ * Browser half of dsh-model-arena: its page inside Settings.
  *
- * Services are named by their runtime identity, not by the package that provides them:
- * the settings shell is the `slots` service and the host bridge is `connection`. A
- * fiber that injects package names never resolves and the plugin stays pending, which
- * the loader reports as "did not activate".
+ * Two services are injected by their runtime identity, not by the packages that provide
+ * them: the settings shell is `slots`, the dictionary registry is `locale`. The label and
+ * every string inside the component are translated through this plugin's own namespace,
+ * which is why the page follows the UI language instead of the plugin author's.
  *
  * @module client
  */
 import type { ComponentType } from 'react';
+export declare const inject: string[];
 interface SlotsService {
     inject(name: string, register: () => void): void;
     register(options: {
@@ -16,11 +17,21 @@ interface SlotsService {
         id: string;
         order: number;
         label: () => string;
-    }, component: ComponentType): unknown;
+        locale: string;
+    }, component: ComponentType<{
+        t: (key: string, params?: Record<string, unknown>) => string;
+    }>): unknown;
 }
-/** The slots service is what the settings shell exposes. */
-export declare const inject: string[];
-export declare function apply(ctx: {
+interface ClientContext {
     slots: SlotsService;
-}): void;
+    locale: {
+        register(ns: string, dicts: {
+            zh: unknown;
+            en: unknown;
+        }): () => void;
+        bind(ns: string): (key: string, params?: Record<string, unknown>) => string;
+    };
+    effect(callback: () => unknown, label?: string): unknown;
+}
+export declare function apply(ctx: ClientContext): void;
 export {};

package/lib/client/index.js

@@ -1,65 +1,24 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * Browser half of dsh-model-arena: the Model Arena page inside Settings.
+ * Browser half of dsh-model-arena: its page inside Settings.
  *
- * Services are named by their runtime identity, not by the package that provides them:
- * the settings shell is the `slots` service and the host bridge is `connection`. A
- * fiber that injects package names never resolves and the plugin stays pending, which
- * the loader reports as "did not activate".
+ * Two services are injected by their runtime identity, not by the packages that provide
+ * them: the settings shell is `slots`, the dictionary registry is `locale`. The label and
+ * every string inside the component are translated through this plugin's own namespace,
+ * which is why the page follows the UI language instead of the plugin author's.
  *
  * @module client
  */
-import { useCallback, useEffect, useState } from 'react';
-import { renderPanel } from './view.js';
-/** Path the host half registers on the web connection. */
-const PANEL_PATH = '/api/arena.panel';
-/** Fetch the panel payload; `reload` re-runs the request. */
-function usePanel() {
-    const [html, setHtml] = useState(null);
-    const [error, setError] = useState(null);
-    const [tick, setTick] = useState(0);
-    const reload = useCallback(() => setTick((t) => t + 1), []);
-    useEffect(() => {
-        const controller = new AbortController();
-        setError(null);
-        fetch(PANEL_PATH, { signal: controller.signal })
-            .then(async (response) => {
-            if (!response.ok)
-                throw new Error(`panel request failed with ${response.status}`);
-            return response.json();
-        })
-            .then((payload) => {
-            if (!controller.signal.aborted)
-                setHtml(renderPanel(payload));
-        })
-            .catch((cause) => {
-            if (controller.signal.aborted)
-                return;
-            // Say what failed rather than rendering an empty panel, which would read as
-            // "nothing recorded" — a different and wrong answer.
-            setError(cause instanceof Error ? cause.message : String(cause));
-        });
-        return () => controller.abort();
-    }, [tick]);
-    return { html, error, reload };
-}
-function ModelArenaPage() {
-    const { html, error, reload } = usePanel();
-    if (error !== null) {
-        return (_jsxs("section", { children: [_jsxs("p", { role: "alert", children: ["Model Arena panel failed to load: ", error] }), _jsx("button", { type: "button", onClick: reload, children: "Retry" })] }));
-    }
-    if (html === null)
-        return _jsx("p", { "aria-live": "polite", children: "Loading the Model Arena panel\u2026" });
-    // The markup is produced by `renderPanel`, which escapes every interpolated value.
-    return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
-}
-/** The slots service is what the settings shell exposes. */
-export const inject = ['slots'];
+import { NS, en, zh } from './locales.js';
+import { ArenaPanel } from './view.js';
+export const inject = ['slots', 'locale'];
 export function apply(ctx) {
+    // `zh` is the key-set source of truth, matching the official client plugins.
+    ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-model-arena: dictionaries');
     ctx.slots.inject('settings.section', () => ctx.slots.register({
         name: 'settings.section',
         id: 'model-arena',
         order: 42,
-        label: () => 'Model Arena',
-    }, ModelArenaPage));
+        label: () => ctx.locale.bind(NS)('nav'),
+        locale: NS,
+    }, ArenaPanel));
 }

package/lib/client/locales.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Dictionaries for the Model Arena page.
+ *
+ * `zh` is the key-set source of truth, as in the official client plugins, and `en` is
+ * typed against it: a key translated in one language but not the other fails the build
+ * instead of silently rendering the raw key.
+ *
+ * @module client/locales
+ */
+/** Dictionary namespace owned by this plugin. */
+export declare const NS = "modelArena";
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export declare const zh: {
+    nav: string;
+    title: string;
+    run: string;
+    models: string;
+    model: string;
+    date: string;
+    prompt: string;
+    empty: string;
+    refresh: string;
+    loading: string;
+    failed: string;
+    retry: string;
+    leaderboard: string;
+    wins: string;
+    avgRating: string;
+    runs: string;
+    totalRuns: string;
+    uniqueModels: string;
+    totalRatings: string;
+    recentRuns: string;
+    winner: string;
+    reference: string;
+    error: string;
+    delete: string;
+    confirmDelete: string;
+    notFound: string;
+};
+/** English dictionary, checked complete against the zh key set. */
+export declare const en: typeof zh;

package/lib/client/locales.js

@@ -0,0 +1,69 @@
+/**
+ * Dictionaries for the Model Arena page.
+ *
+ * `zh` is the key-set source of truth, as in the official client plugins, and `en` is
+ * typed against it: a key translated in one language but not the other fails the build
+ * instead of silently rendering the raw key.
+ *
+ * @module client/locales
+ */
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'modelArena';
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export const zh = {
+    'nav': '模型竞技场',
+    'title': '模型竞技场',
+    'run': '运行',
+    'models': '模型数',
+    'model': '模型',
+    'date': '时间',
+    'prompt': '提示词',
+    'empty': '还没有运行记录。用同一个提示词跑多个模型后，结果会显示在这里。',
+    'refresh': '刷新',
+    'loading': '正在加载…',
+    'failed': '加载失败',
+    'retry': '重试',
+    'leaderboard': 'Elo 排行榜',
+    'wins': '胜',
+    'avgRating': '平均评分',
+    'runs': '次数',
+    'totalRuns': '总运行数',
+    'uniqueModels': '模型种类',
+    'totalRatings': '总评分数',
+    'recentRuns': '最近运行',
+    'winner': '胜出',
+    'reference': '参考答案',
+    'error': '错误',
+    'delete': '删除',
+    'confirmDelete': '确定删除这条运行记录？',
+    'notFound': '未找到运行记录',
+};
+/** English dictionary, checked complete against the zh key set. */
+export const en = {
+    'nav': 'Model Arena',
+    'title': 'Model Arena',
+    'run': 'Run',
+    'models': 'Models',
+    'model': 'Model',
+    'date': 'Date',
+    'prompt': 'Prompt',
+    'empty': 'No runs yet. Run one prompt through several models and the comparison appears here.',
+    'refresh': 'Refresh',
+    'loading': 'Loading…',
+    'failed': 'Failed to load',
+    'retry': 'Retry',
+    'leaderboard': 'Elo Leaderboard',
+    'wins': 'Wins',
+    'avgRating': 'Avg Rating',
+    'runs': 'Runs',
+    'totalRuns': 'Total Runs',
+    'uniqueModels': 'Models',
+    'totalRatings': 'Ratings',
+    'recentRuns': 'Recent Runs',
+    'winner': 'Winner',
+    'reference': 'Reference',
+    'error': 'Error',
+    'delete': 'Delete',
+    'confirmDelete': 'Delete this run?',
+    'notFound': 'Run not found',
+};

package/lib/client/view.d.ts

@@ -1,2 +1,24 @@
+/**
+ * Pure rendering half of the modelArena page.
+ *
+ * Separate from `index.tsx` so a static render can assert in Node what the page draws —
+ * the shipped bundle is a loader factory only a browser can run. Every user-visible
+ * string comes from the `t` seat the renderer binds from this plugin's namespace, so the
+ * page follows the UI language; no copy is hardcoded here.
+ *
+ * @module client/view
+ */
 import type { PanelPayload } from '../types.js';
-export declare function renderPanel(payload: PanelPayload): string;
+export type Translate = (key: string, params?: Record<string, unknown>) => string;
+export interface PanelProps {
+    t: Translate;
+}
+interface PanelState {
+    payload: PanelPayload | null;
+    error: string | null;
+}
+export declare function usePanel(): PanelState & {
+    reload: () => void;
+};
+export declare function ArenaPanel({ t }: PanelProps): import("react").JSX.Element;
+export {};

package/lib/client/view.js

@@ -1,9 +1,117 @@
-export function renderPanel(payload) {
-    const runRows = payload.recentRuns
-        .map((r) => `<tr><td>${r.id}</td><td>${r.modelCount}</td><td>${new Date(r.timestamp).toLocaleString()}</td><td>${r.prompt.slice(0, 60)}...</td></tr>`)
-        .join('');
-    return `<div class="arena-panel">
-    <h2>Model Arena</h2>
-    ${runRows ? `<table class="arena-table"><thead><tr><th>Run</th><th>Models</th><th>Date</th><th>Prompt</th></tr></thead><tbody>${runRows}</tbody></table>` : '<p>No runs yet.</p>'}
-  </div>`;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Pure rendering half of the modelArena page.
+ *
+ * Separate from `index.tsx` so a static render can assert in Node what the page draws —
+ * the shipped bundle is a loader factory only a browser can run. Every user-visible
+ * string comes from the `t` seat the renderer binds from this plugin's namespace, so the
+ * page follows the UI language; no copy is hardcoded here.
+ *
+ * @module client/view
+ */
+import { useCallback, useEffect, useState } from 'react';
+const PANEL_PATH = '/api/arena.panel';
+const RUN_PATH = '/api/arena.run';
+const RATE_PATH = '/api/arena.rate';
+const DELETE_PATH = '/api/arena.delete';
+// --- Styles ---
+const wrap = { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 820, fontFamily: 'inherit' };
+const head = { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' };
+const section = { marginTop: 8 };
+const sectionTitle = { fontSize: 13, fontWeight: 600, marginBottom: 6 };
+const muted = { fontSize: 12, opacity: 0.75 };
+const table = { borderCollapse: 'collapse', width: '100%' };
+const th = { textAlign: 'left', padding: '4px 10px 4px 0', fontWeight: 600, fontSize: 12, opacity: 0.8, borderBottom: '0.5px solid rgba(128,128,128,0.4)' };
+const td = { padding: '6px 10px 6px 0', fontSize: 13, borderBottom: '0.5px solid rgba(128,128,128,0.18)' };
+const card = { padding: '8px 12px', borderRadius: 6, border: '1px solid rgba(128,128,128,0.2)', background: 'rgba(128,128,128,0.04)', fontSize: 13 };
+const badge = { display: 'inline-block', padding: '1px 6px', borderRadius: 9, fontSize: 11, fontWeight: 600 };
+const statRow = { display: 'flex', gap: 16, flexWrap: 'wrap' };
+const statBox = { ...card, flex: 1, minWidth: 100, textAlign: 'center' };
+const starBtn = { cursor: 'pointer', background: 'none', border: 'none', fontSize: 16, padding: '0 1px' };
+const clickRow = { cursor: 'pointer' };
+const preBlock = { whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, maxHeight: 200, overflow: 'auto', padding: 8, borderRadius: 4, background: 'rgba(128,128,128,0.06)', border: '1px solid rgba(128,128,128,0.15)' };
+const dangerBtn = { fontSize: 11, color: '#e55', background: 'none', border: '1px solid #e55', borderRadius: 4, padding: '2px 8px', cursor: 'pointer' };
+export function usePanel() {
+    const [state, setState] = useState({ payload: null, error: null });
+    const [tick, setTick] = useState(0);
+    const reload = useCallback(() => setTick((v) => v + 1), []);
+    useEffect(() => {
+        const c = new AbortController();
+        setState((p) => ({ ...p, error: null }));
+        fetch(PANEL_PATH, { signal: c.signal })
+            .then(async (r) => {
+            if (!r.ok)
+                throw new Error(String(r.status));
+            return r.json();
+        })
+            .then((payload) => { if (!c.signal.aborted)
+            setState({ payload, error: null }); })
+            .catch((e) => { if (!c.signal.aborted)
+            setState({ payload: null, error: e instanceof Error ? e.message : String(e) }); });
+        return () => c.abort();
+    }, [tick]);
+    return { ...state, reload };
+}
+// --- Stars ---
+function Stars({ rating, onRate }) {
+    return (_jsx("span", { children: [1, 2, 3, 4, 5].map((n) => (_jsx("button", { type: "button", style: starBtn, onClick: () => onRate(n), title: `${n}/5`, children: n <= rating ? '★' : '☆' }, n))) }));
+}
+// --- Leaderboard ---
+function Leaderboard({ entries, t }) {
+    if (entries.length === 0)
+        return null;
+    return (_jsxs("div", { style: section, children: [_jsxs("div", { style: sectionTitle, children: ["\uD83C\uDFC6 ", t('leaderboard')] }), _jsxs("table", { style: table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: th, children: "#" }), _jsx("th", { style: th, children: t('model') }), _jsx("th", { style: th, children: "Elo" }), _jsx("th", { style: th, children: t('wins') }), _jsx("th", { style: th, children: t('avgRating') }), _jsx("th", { style: th, children: t('runs') })] }) }), _jsx("tbody", { children: entries.map((e, i) => (_jsxs("tr", { children: [_jsx("td", { style: td, children: i + 1 }), _jsx("td", { style: td, children: _jsx("strong", { children: e.model }) }), _jsx("td", { style: td, children: e.elo }), _jsx("td", { style: td, children: e.wins }), _jsx("td", { style: td, children: e.avgRating > 0 ? e.avgRating.toFixed(1) : '—' }), _jsx("td", { style: td, children: e.totalRuns })] }, e.model))) })] })] }));
+}
+// --- Stats summary ---
+function StatsSummary({ stats, t }) {
+    return (_jsxs("div", { style: statRow, children: [_jsxs("div", { style: statBox, children: [_jsx("div", { style: { fontSize: 20, fontWeight: 700 }, children: stats.totalRuns }), _jsx("div", { style: muted, children: t('totalRuns') })] }), _jsxs("div", { style: statBox, children: [_jsx("div", { style: { fontSize: 20, fontWeight: 700 }, children: stats.uniqueModels }), _jsx("div", { style: muted, children: t('uniqueModels') })] }), _jsxs("div", { style: statBox, children: [_jsx("div", { style: { fontSize: 20, fontWeight: 700 }, children: stats.totalRatings }), _jsx("div", { style: muted, children: t('totalRatings') })] })] }));
+}
+// --- Run detail expansion ---
+function RunDetail({ runId, t, onDelete }) {
+    const [run, setRun] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        setLoading(true);
+        fetch(`${RUN_PATH}?id=${runId}`)
+            .then((r) => r.json())
+            .then(setRun)
+            .catch(() => setRun(null))
+            .finally(() => setLoading(false));
+    }, [runId]);
+    const handleRate = useCallback((model, rating) => {
+        fetch(RATE_PATH, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ runId, model, rating }),
+        })
+            .then((r) => r.json())
+            .then(setRun)
+            .catch(() => { });
+    }, [runId]);
+    const handleDelete = useCallback(() => {
+        if (!confirm(t('confirmDelete')))
+            return;
+        fetch(DELETE_PATH, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ runId }),
+        }).then(() => onDelete()).catch(() => { });
+    }, [runId, t, onDelete]);
+    if (loading)
+        return _jsx("p", { style: muted, children: t('loading') });
+    if (!run)
+        return _jsx("p", { style: muted, children: t('notFound') });
+    return (_jsxs("div", { style: { ...card, marginTop: 4 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsxs("strong", { children: [t('prompt'), ": "] }), _jsx("button", { type: "button", style: dangerBtn, onClick: handleDelete, children: t('delete') })] }), _jsx("div", { style: preBlock, children: run.prompt }), run.reference && (_jsxs("div", { style: { marginTop: 6 }, children: [_jsxs("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 2 }, children: [t('reference'), ":"] }), _jsx("div", { style: preBlock, children: run.reference })] })), _jsx("div", { style: { marginTop: 8 }, children: run.results.map((r) => (_jsxs("div", { style: { ...card, marginTop: 6 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("strong", { children: r.model }), _jsx("span", { children: r.error ? (_jsx("span", { style: { ...badge, background: 'rgba(255,80,80,0.15)', color: '#e55' }, children: t('error') })) : (_jsxs("span", { style: { ...badge, background: 'rgba(80,200,120,0.15)', color: '#4a4' }, children: [r.latencyMs, "ms"] })) })] }), _jsx("div", { style: preBlock, children: r.error ?? r.output }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }, children: [_jsxs("span", { style: muted, children: [r.promptTokens + r.completionTokens, " tokens (", r.promptTokens, "\u2191 ", r.completionTokens, "\u2193)"] }), _jsx(Stars, { rating: r.rating ?? 0, onRate: (n) => handleRate(r.model, n) })] })] }, r.model))) })] }));
+}
+// --- Main Panel ---
+export function ArenaPanel({ t }) {
+    const { payload, error, reload } = usePanel();
+    const [expandedRun, setExpandedRun] = useState(null);
+    const header = (_jsxs("header", { style: head, children: [_jsxs("strong", { style: { fontSize: 14 }, children: ["\u2694\uFE0F ", t('title')] }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", onClick: reload, style: { fontSize: 12 }, children: t('refresh') })] }));
+    if (error !== null) {
+        return (_jsxs("div", { style: wrap, children: [header, _jsxs("p", { role: "alert", style: { margin: 0, fontSize: 13 }, children: [t('failed'), ": ", error] }), _jsx("button", { type: "button", onClick: reload, style: { alignSelf: 'flex-start', fontSize: 12 }, children: t('retry') })] }));
+    }
+    if (payload === null)
+        return _jsx("p", { style: muted, "aria-live": "polite", children: t('loading') });
+    return (_jsxs("div", { style: wrap, children: [header, _jsx(StatsSummary, { stats: payload.stats, t: t }), _jsx(Leaderboard, { entries: payload.leaderboard, t: t }), _jsxs("div", { style: section, children: [_jsxs("div", { style: sectionTitle, children: ["\uD83D\uDCCB ", t('recentRuns')] }), payload.recentRuns.length === 0 ? (_jsx("p", { style: { margin: 0, fontSize: 13, opacity: 0.8 }, children: t('empty') })) : (_jsxs("table", { style: table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: th, children: t('run') }), _jsx("th", { style: th, children: t('models') }), _jsx("th", { style: th, children: t('winner') }), _jsx("th", { style: th, children: t('date') })] }) }), _jsx("tbody", { children: payload.recentRuns.map((row) => (_jsxs(_Fragment, { children: [_jsxs("tr", { style: clickRow, onClick: () => setExpandedRun(expandedRun === row.id ? null : row.id), children: [_jsxs("td", { style: td, children: [_jsx("code", { style: { fontSize: 11 }, children: row.id }), _jsx("span", { style: { marginLeft: 6, fontSize: 10 }, children: expandedRun === row.id ? '▼' : '▶' })] }), _jsx("td", { style: td, children: row.modelCount }), _jsx("td", { style: td, children: row.winner ?? '—' }), _jsx("td", { style: td, children: new Date(row.timestamp).toLocaleString() })] }, row.id), expandedRun === row.id && (_jsx("tr", { children: _jsx("td", { colSpan: 4, style: { padding: '4px 0' }, children: _jsx(RunDetail, { runId: row.id, t: t, onDelete: () => { setExpandedRun(null); reload(); } }) }) }, `${row.id}-detail`))] }))) })] }))] })] }));
 }

package/lib/index.d.ts

@@ -14,11 +14,14 @@ export interface ArenaService {
     listRuns(): ReturnType<Arena['listRuns']>;
     compare(runId: string, modelA: string, modelB: string): ReturnType<Arena['compare']>;
     rate(runId: string, model: string, rating: number): ReturnType<Arena['rate']>;
+    deleteRun(runId: string): boolean;
     saveSuite(suite: {
         name: string;
         prompts: string[];
         models: string[];
     }): void;
     regression(suiteName: string, baselineRunId: string, currentRunId: string): ReturnType<Arena['regression']>;
+    leaderboard(): ReturnType<Arena['leaderboard']>;
+    stats(): ReturnType<Arena['stats']>;
 }
 export declare function apply(ctx: Context): void;

package/lib/index.js

@@ -11,8 +11,11 @@ export function apply(ctx) {
         listRuns: () => arena.listRuns(),
         compare: (runId, modelA, modelB) => arena.compare(runId, modelA, modelB),
         rate: (runId, model, rating) => arena.rate(runId, model, rating),
+        deleteRun: (runId) => arena.deleteRun(runId),
         saveSuite: (suite) => arena.saveSuite(suite),
         regression: (suiteName, baselineRunId, currentRunId) => arena.regression(suiteName, baselineRunId, currentRunId),
+        leaderboard: () => arena.leaderboard(),
+        stats: () => arena.stats(),
     };
     ctx.provide('arena', service);
     registerArenaRoutes(ctx, service);

package/lib/routes.d.ts

@@ -1,5 +1,5 @@
 import type { Context } from '@deepseek-ai/cordis';
 import type { ArenaService } from './index.js';
-import { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH } from './arena-view.js';
-export { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH };
+import { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH, ARENA_COMPARE_PATH, ARENA_DELETE_PATH } from './arena-view.js';
+export { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH, ARENA_COMPARE_PATH, ARENA_DELETE_PATH };
 export declare function registerArenaRoutes(ctx: Context, arena: ArenaService): void;

package/lib/routes.js

@@ -1,18 +1,20 @@
-import { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH } from './arena-view.js';
-export { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH };
+import { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH, ARENA_COMPARE_PATH, ARENA_DELETE_PATH } from './arena-view.js';
+export { ARENA_PANEL_PATH, ARENA_RUN_PATH, ARENA_RATE_PATH, ARENA_COMPARE_PATH, ARENA_DELETE_PATH };
 export function registerArenaRoutes(ctx, arena) {
     ctx.inject(['connection'], (connectionCtx) => {
         const connection = connectionCtx.connection;
+        // Panel payload (with leaderboard + stats)
         connection.fetch.register({
             path: ARENA_PANEL_PATH,
             methods: ['GET'],
             requestBody: 'buffered',
-            // The panel view is written against `PanelPayload`; returning the bare run list
-            // here made every array method on `payload.recentRuns` throw in the browser.
-            fetch: () => Promise.resolve(Response.json({ recentRuns: arena.listRuns() }, {
-                headers: { 'cache-control': 'no-store' },
-            })),
+            fetch: () => Promise.resolve(Response.json({
+                recentRuns: arena.listRuns(),
+                leaderboard: arena.leaderboard(),
+                stats: arena.stats(),
+            }, { headers: { 'cache-control': 'no-store' } })),
         });
+        // Run detail
         connection.fetch.register({
             path: ARENA_RUN_PATH,
             methods: ['GET'],
@@ -28,6 +30,7 @@ export function registerArenaRoutes(ctx, arena) {
                 return Response.json(run, { headers: { 'cache-control': 'no-store' } });
             },
         });
+        // Rate a model in a run
         connection.fetch.register({
             path: ARENA_RATE_PATH,
             methods: ['POST'],
@@ -49,5 +52,46 @@ export function registerArenaRoutes(ctx, arena) {
                 return Response.json(run, { headers: { 'cache-control': 'no-store' } });
             },
         });
+        // Compare two models in a run
+        connection.fetch.register({
+            path: ARENA_COMPARE_PATH,
+            methods: ['GET'],
+            requestBody: 'buffered',
+            fetch: async (request) => {
+                const url = new URL(request.url);
+                const runId = url.searchParams.get('runId');
+                const modelA = url.searchParams.get('modelA');
+                const modelB = url.searchParams.get('modelB');
+                if (!runId || !modelA || !modelB) {
+                    return Response.json({ error: 'missing runId, modelA, or modelB' }, { status: 400 });
+                }
+                const result = arena.compare(runId, modelA, modelB);
+                if (!result)
+                    return Response.json({ error: 'not found' }, { status: 404 });
+                return Response.json(result, { headers: { 'cache-control': 'no-store' } });
+            },
+        });
+        // Delete a run
+        connection.fetch.register({
+            path: ARENA_DELETE_PATH,
+            methods: ['POST'],
+            requestBody: 'buffered',
+            fetch: async (request) => {
+                let body;
+                try {
+                    body = await request.json();
+                }
+                catch {
+                    return Response.json({ error: 'request body must be JSON' }, { status: 400 });
+                }
+                if (!body.runId) {
+                    return Response.json({ error: 'missing runId' }, { status: 400 });
+                }
+                const ok = arena.deleteRun(body.runId);
+                if (!ok)
+                    return Response.json({ error: 'run not found' }, { status: 404 });
+                return Response.json({ ok: true }, { headers: { 'cache-control': 'no-store' } });
+            },
+        });
     });
 }

package/lib/scoring.d.ts

@@ -1,5 +1,10 @@
-import type { ModelResult, Score } from './types.js';
+import type { ModelResult, Score, LeaderboardEntry } from './types.js';
 /** Score outputs automatically based on simple metrics. */
 export declare function autoScore(results: ModelResult[], reference?: string): Record<string, Score>;
 /** Simple character-level similarity (Jaccard on character bigrams). */
 export declare function similarity(a: string, b: string): number;
+/** Build a leaderboard from all runs using Elo rating. */
+export declare function buildLeaderboard(runs: {
+    results: ModelResult[];
+    scores: Record<string, Score>;
+}[]): LeaderboardEntry[];

package/lib/scoring.js

@@ -33,3 +33,101 @@ export function similarity(a, b) {
             intersection++;
     return intersection / (bigramsA.size + bigramsB.size - intersection);
 }
+// ── Elo rating system ────────────────────────────────────────
+const INITIAL_ELO = 1200;
+const K_FACTOR = 32;
+/** Compute expected score (probability of winning). */
+function expectedScore(ratingA, ratingB) {
+    return 1 / (1 + Math.pow(10, (ratingB - ratingA) / 400));
+}
+/** Build a leaderboard from all runs using Elo rating. */
+export function buildLeaderboard(runs) {
+    const records = new Map();
+    const getOrInit = (model) => {
+        if (!records.has(model)) {
+            records.set(model, { elo: INITIAL_ELO, wins: 0, losses: 0, draws: 0, games: 0, totalLatencyMs: 0, totalTokens: 0, totalRuns: 0, totalRating: 0, ratingCount: 0 });
+        }
+        return records.get(model);
+    };
+    for (const run of runs) {
+        // accumulate raw stats
+        for (const r of run.results) {
+            const rec = getOrInit(r.model);
+            rec.totalLatencyMs += r.latencyMs;
+            rec.totalTokens += r.promptTokens + r.completionTokens;
+            rec.totalRuns++;
+            if (r.rating !== undefined) {
+                rec.totalRating += r.rating;
+                rec.ratingCount++;
+            }
+        }
+        // pairwise Elo updates based on user rating (if any) or composite auto-score
+        const models = run.results.map((r) => r.model);
+        for (let i = 0; i < models.length; i++) {
+            for (let j = i + 1; j < models.length; j++) {
+                const a = models[i];
+                const b = models[j];
+                const recA = getOrInit(a);
+                const recB = getOrInit(b);
+                const sA = compositeScore(run.scores[a]);
+                const sB = compositeScore(run.scores[b]);
+                const eA = expectedScore(recA.elo, recB.elo);
+                let actualA;
+                if (Math.abs(sA - sB) < 0.01) {
+                    // draw
+                    actualA = 0.5;
+                    recA.draws++;
+                    recB.draws++;
+                }
+                else if (sA > sB) {
+                    actualA = 1;
+                    recA.wins++;
+                    recB.losses++;
+                }
+                else {
+                    actualA = 0;
+                    recA.losses++;
+                    recB.wins++;
+                }
+                recA.elo += K_FACTOR * (actualA - eA);
+                recB.elo += K_FACTOR * ((1 - actualA) - (1 - eA));
+                recA.games++;
+                recB.games++;
+            }
+        }
+    }
+    const entries = [];
+    for (const [model, rec] of records) {
+        entries.push({
+            model,
+            elo: Math.round(rec.elo),
+            wins: rec.wins,
+            losses: rec.losses,
+            draws: rec.draws,
+            games: rec.games,
+            totalRuns: rec.totalRuns,
+            avgRating: rec.ratingCount > 0 ? Math.round((rec.totalRating / rec.ratingCount) * 10) / 10 : 0,
+            avgLatencyMs: rec.games > 0 ? Math.round(rec.totalLatencyMs / rec.games) : 0,
+            avgTokens: rec.games > 0 ? Math.round(rec.totalTokens / rec.games) : 0,
+        });
+    }
+    entries.sort((a, b) => b.elo - a.elo);
+    return entries;
+}
+/** Combine score dimensions into a single number for ranking. */
+function compositeScore(s) {
+    if (!s)
+        return 0;
+    // User rating dominates if present (1-5 scale → 0-1)
+    if (s.userRating !== undefined)
+        return s.userRating / 5;
+    // Otherwise average available auto-scores
+    const parts = [];
+    if (s.referenceMatch !== undefined)
+        parts.push(s.referenceMatch);
+    if (s.lengthScore !== undefined)
+        parts.push(s.lengthScore);
+    if (s.latencyScore !== undefined)
+        parts.push(s.latencyScore);
+    return parts.length > 0 ? parts.reduce((a, b) => a + b, 0) / parts.length : 0;
+}

package/lib/store.d.ts

@@ -9,5 +9,6 @@ export declare class ArenaStore {
     listRuns(): ArenaRun[];
     saveSuite(suite: Suite): void;
     getSuite(name: string): Suite | null;
+    deleteRun(id: string): boolean;
     static generateId(prompt: string, models: string[]): string;
 }