dsh-model-arena 0.2.1 → 0.3.0

package/lib/arena-view.d.ts

@@ -1,6 +1,8 @@
-import type { PanelPayload, ArenaRun } from './types.js';
+import type { PanelPayload, RunSummary, LeaderboardEntry, ArenaStats } from './types.js';
 /** Route paths shared between host and client. */
 export declare const ARENA_PANEL_PATH = "/api/arena.panel";
 export declare const ARENA_RUN_PATH = "/api/arena.run";
 export declare const ARENA_RATE_PATH = "/api/arena.rate";
-export declare function panelState(runs: ArenaRun[]): PanelPayload;
+export declare const ARENA_COMPARE_PATH = "/api/arena.compare";
+export declare const ARENA_DELETE_PATH = "/api/arena.delete";
+export declare function panelState(runs: RunSummary[], leaderboard: LeaderboardEntry[], stats: ArenaStats): PanelPayload;

package/lib/arena-view.js

@@ -2,16 +2,8 @@
 export const ARENA_PANEL_PATH = '/api/arena.panel';
 export const ARENA_RUN_PATH = '/api/arena.run';
 export const ARENA_RATE_PATH = '/api/arena.rate';
-export function panelState(runs) {
-    return {
-        recentRuns: runs
-            .sort((a, b) => b.timestamp - a.timestamp)
-            .slice(0, 20)
-            .map((r) => ({
-            id: r.id,
-            prompt: r.prompt,
-            timestamp: r.timestamp,
-            modelCount: r.results.length,
-        })),
-    };
+export const ARENA_COMPARE_PATH = '/api/arena.compare';
+export const ARENA_DELETE_PATH = '/api/arena.delete';
+export function panelState(runs, leaderboard, stats) {
+    return { recentRuns: runs.slice(0, 20), leaderboard, stats };
 }

package/lib/arena.d.ts

@@ -1,4 +1,4 @@
-import type { ArenaRun, ModelResult, Suite, RegressionReport, Score } from './types.js';
+import type { ArenaRun, ModelResult, Suite, RegressionReport, LeaderboardEntry, ArenaStats, RunSummary, ComparePayload } from './types.js';
 export declare class Arena {
     private projectDir;
     private store;
@@ -6,31 +6,21 @@ export declare class Arena {
     /** Save a completed run (results already collected from model calls). */
     saveRun(prompt: string, results: ModelResult[], reference?: string): ArenaRun;
     getRun(id: string): ArenaRun | null;
-    listRuns(): {
-        id: string;
-        prompt: string;
-        timestamp: number;
-        modelCount: number;
-    }[];
+    listRuns(): RunSummary[];
     /** Compare two models' outputs within a run. */
-    compare(runId: string, modelA: string, modelB: string): {
-        modelA: string;
-        modelB: string;
-        outputA: string;
-        outputB: string;
-        diff: import("./diff.js").DiffLine[];
-        summary: {
-            added: number;
-            removed: number;
-            changed: number;
-        };
-        scoreA: Score;
-        scoreB: Score;
-    } | null;
+    compare(runId: string, modelA: string, modelB: string): ComparePayload | null;
     /** Set a user rating for a model in a run. */
     rate(runId: string, model: string, rating: number): ArenaRun | null;
+    /** Delete a run. */
+    deleteRun(runId: string): boolean;
     /** Save a benchmark suite. */
     saveSuite(suite: Suite): void;
     /** Generate a regression report between two runs of the same suite. */
     regression(suiteName: string, baselineRunId: string, currentRunId: string): RegressionReport | null;
+    /** Elo leaderboard from all runs. */
+    leaderboard(): LeaderboardEntry[];
+    /** Aggregate stats. */
+    stats(): ArenaStats;
+    /** Pick the best model in a run by composite score. */
+    private pickWinner;
 }

package/lib/arena.js

@@ -1,5 +1,5 @@
 import { ArenaStore } from './store.js';
-import { autoScore } from './scoring.js';
+import { autoScore, buildLeaderboard } from './scoring.js';
 import { lineDiff, diffSummary } from './diff.js';
 export class Arena {
     projectDir;
@@ -13,7 +13,7 @@ export class Arena {
         const models = results.map((r) => r.model);
         const id = ArenaStore.generateId(prompt, models);
         const scores = autoScore(results, reference);
-        const run = { id, prompt, timestamp: Date.now(), results, scores };
+        const run = { id, prompt, timestamp: Date.now(), results, scores, reference };
         this.store.saveRun(run);
         return run;
     }
@@ -21,12 +21,16 @@ export class Arena {
         return this.store.getRun(id);
     }
     listRuns() {
-        return this.store.listRuns().map((r) => ({
-            id: r.id,
-            prompt: r.prompt,
-            timestamp: r.timestamp,
-            modelCount: r.results.length,
-        }));
+        return this.store.listRuns().map((r) => {
+            const winner = this.pickWinner(r);
+            return {
+                id: r.id,
+                prompt: r.prompt,
+                timestamp: r.timestamp,
+                modelCount: r.results.length,
+                winner,
+            };
+        });
     }
     /** Compare two models' outputs within a run. */
     compare(runId, modelA, modelB) {
@@ -38,14 +42,15 @@ export class Arena {
         if (!a || !b)
             return null;
         return {
+            runId,
             modelA: a.model,
             modelB: b.model,
             outputA: a.output,
             outputB: b.output,
             diff: lineDiff(a.output, b.output),
             summary: diffSummary(a.output, b.output),
-            scoreA: run.scores[modelA],
-            scoreB: run.scores[modelB],
+            scoreA: run.scores[modelA] ?? {},
+            scoreB: run.scores[modelB] ?? {},
         };
     }
     /** Set a user rating for a model in a run. */
@@ -59,6 +64,10 @@ export class Arena {
         this.store.saveRun(run);
         return run;
     }
+    /** Delete a run. */
+    deleteRun(runId) {
+        return this.store.deleteRun(runId);
+    }
     /** Save a benchmark suite. */
     saveSuite(suite) {
         this.store.saveSuite(suite);
@@ -84,4 +93,51 @@ export class Arena {
         }
         return { suiteName, baselineRunId, currentRunId, changes };
     }
+    /** Elo leaderboard from all runs. */
+    leaderboard() {
+        const allRuns = this.store.listRuns();
+        return buildLeaderboard(allRuns);
+    }
+    /** Aggregate stats. */
+    stats() {
+        const allRuns = this.store.listRuns();
+        const allModels = new Set();
+        const allPrompts = new Set();
+        for (const run of allRuns) {
+            allPrompts.add(run.prompt);
+            for (const r of run.results)
+                allModels.add(r.model);
+        }
+        let totalRatings = 0;
+        for (const run of allRuns) {
+            for (const [, score] of Object.entries(run.scores)) {
+                if (score.userRating !== undefined)
+                    totalRatings++;
+            }
+        }
+        return {
+            totalRuns: allRuns.length,
+            totalModels: allModels.size,
+            uniqueModels: allModels.size,
+            uniquePrompts: allPrompts.size,
+            totalRatings,
+            avgModelsPerRun: allRuns.length > 0
+                ? Math.round((allRuns.reduce((s, r) => s + r.results.length, 0) / allRuns.length) * 10) / 10
+                : 0,
+        };
+    }
+    /** Pick the best model in a run by composite score. */
+    pickWinner(run) {
+        let best;
+        let bestScore = -Infinity;
+        for (const [model, score] of Object.entries(run.scores)) {
+            const s = (score.userRating !== undefined ? score.userRating / 5 : 0)
+                + (score.referenceMatch ?? 0) + (score.latencyScore ?? 0);
+            if (s > bestScore) {
+                bestScore = s;
+                best = model;
+            }
+        }
+        return best;
+    }
 }

package/lib/arena.web.js

@@ -34,62 +34,219 @@ var zh = {
   "title": "\u6A21\u578B\u7ADE\u6280\u573A",
   "run": "\u8FD0\u884C",
   "models": "\u6A21\u578B\u6570",
+  "model": "\u6A21\u578B",
   "date": "\u65F6\u95F4",
   "prompt": "\u63D0\u793A\u8BCD",
   "empty": "\u8FD8\u6CA1\u6709\u8FD0\u884C\u8BB0\u5F55\u3002\u7528\u540C\u4E00\u4E2A\u63D0\u793A\u8BCD\u8DD1\u591A\u4E2A\u6A21\u578B\u540E\uFF0C\u7ED3\u679C\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002",
   "refresh": "\u5237\u65B0",
   "loading": "\u6B63\u5728\u52A0\u8F7D\u2026",
   "failed": "\u52A0\u8F7D\u5931\u8D25",
-  "retry": "\u91CD\u8BD5"
+  "retry": "\u91CD\u8BD5",
+  "leaderboard": "Elo \u6392\u884C\u699C",
+  "wins": "\u80DC",
+  "avgRating": "\u5E73\u5747\u8BC4\u5206",
+  "runs": "\u6B21\u6570",
+  "totalRuns": "\u603B\u8FD0\u884C\u6570",
+  "uniqueModels": "\u6A21\u578B\u79CD\u7C7B",
+  "totalRatings": "\u603B\u8BC4\u5206\u6570",
+  "recentRuns": "\u6700\u8FD1\u8FD0\u884C",
+  "winner": "\u80DC\u51FA",
+  "reference": "\u53C2\u8003\u7B54\u6848",
+  "error": "\u9519\u8BEF",
+  "delete": "\u5220\u9664",
+  "confirmDelete": "\u786E\u5B9A\u5220\u9664\u8FD9\u6761\u8FD0\u884C\u8BB0\u5F55\uFF1F",
+  "notFound": "\u672A\u627E\u5230\u8FD0\u884C\u8BB0\u5F55"
 };
 var 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\u2026",
   "failed": "Failed to load",
-  "retry": "Retry"
+  "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"
 };
 
 // src/client/view.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var PANEL_PATH = "/api/arena.panel";
-var wrap = { display: "flex", flexDirection: "column", gap: 12, maxWidth: 760, fontFamily: "inherit" };
+var RUN_PATH = "/api/arena.run";
+var RATE_PATH = "/api/arena.rate";
+var DELETE_PATH = "/api/arena.delete";
+var wrap = { display: "flex", flexDirection: "column", gap: 14, maxWidth: 820, fontFamily: "inherit" };
 var head = { display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" };
+var section = { marginTop: 8 };
+var sectionTitle = { fontSize: 13, fontWeight: 600, marginBottom: 6 };
 var muted = { fontSize: 12, opacity: 0.75 };
 var table = { borderCollapse: "collapse", width: "100%" };
 var 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)" };
 var td = { padding: "6px 10px 6px 0", fontSize: 13, borderBottom: "0.5px solid rgba(128,128,128,0.18)" };
+var card = { padding: "8px 12px", borderRadius: 6, border: "1px solid rgba(128,128,128,0.2)", background: "rgba(128,128,128,0.04)", fontSize: 13 };
+var badge = { display: "inline-block", padding: "1px 6px", borderRadius: 9, fontSize: 11, fontWeight: 600 };
+var statRow = { display: "flex", gap: 16, flexWrap: "wrap" };
+var statBox = { ...card, flex: 1, minWidth: 100, textAlign: "center" };
+var starBtn = { cursor: "pointer", background: "none", border: "none", fontSize: 16, padding: "0 1px" };
+var clickRow = { cursor: "pointer" };
+var 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)" };
+var dangerBtn = { fontSize: 11, color: "#e55", background: "none", border: "1px solid #e55", borderRadius: 4, padding: "2px 8px", cursor: "pointer" };
 function usePanel() {
   const [state, setState] = (0, import_react.useState)({ payload: null, error: null });
   const [tick, setTick] = (0, import_react.useState)(0);
-  const reload = (0, import_react.useCallback)(() => setTick((value) => value + 1), []);
+  const reload = (0, import_react.useCallback)(() => setTick((v) => v + 1), []);
   (0, import_react.useEffect)(() => {
-    const controller = new AbortController();
-    setState((previous) => ({ ...previous, error: null }));
-    fetch(PANEL_PATH, { signal: controller.signal }).then(async (response) => {
-      if (!response.ok) throw new Error(String(response.status));
-      return response.json();
+    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 (!controller.signal.aborted) setState({ payload, error: null });
-    }).catch((cause) => {
-      if (controller.signal.aborted) return;
-      setState({ payload: null, error: cause instanceof Error ? cause.message : String(cause) });
+      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 () => controller.abort();
+    return () => c.abort();
   }, [tick]);
   return { ...state, reload };
 }
+function Stars({ rating, onRate }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: starBtn, onClick: () => onRate(n), title: `${n}/5`, children: n <= rating ? "\u2605" : "\u2606" }, n)) });
+}
+function Leaderboard({ entries, t }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionTitle, children: [
+      "\u{1F3C6} ",
+      t("leaderboard")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("model") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: "Elo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("wins") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("avgRating") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("runs") })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: entries.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: i + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: e.model }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: e.elo }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: e.wins }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: e.avgRating > 0 ? e.avgRating.toFixed(1) : "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: e.totalRuns })
+      ] }, e.model)) })
+    ] })
+  ] });
+}
+function StatsSummary({ stats, t }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: statRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: statBox, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 20, fontWeight: 700 }, children: stats.totalRuns }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: muted, children: t("totalRuns") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: statBox, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 20, fontWeight: 700 }, children: stats.uniqueModels }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: muted, children: t("uniqueModels") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: statBox, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 20, fontWeight: 700 }, children: stats.totalRatings }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: muted, children: t("totalRatings") })
+    ] })
+  ] });
+}
+function RunDetail({ runId, t, onDelete }) {
+  const [run, setRun] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    setLoading(true);
+    fetch(`${RUN_PATH}?id=${runId}`).then((r) => r.json()).then(setRun).catch(() => setRun(null)).finally(() => setLoading(false));
+  }, [runId]);
+  const handleRate = (0, import_react.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 = (0, import_react.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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: muted, children: t("loading") });
+  if (!run) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: muted, children: t("notFound") });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...card, marginTop: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+        t("prompt"),
+        ": "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: dangerBtn, onClick: handleDelete, children: t("delete") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: preBlock, children: run.prompt }),
+    run.reference && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 2 }, children: [
+        t("reference"),
+        ":"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: preBlock, children: run.reference })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 8 }, children: run.results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...card, marginTop: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: r.model }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: r.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...badge, background: "rgba(255,80,80,0.15)", color: "#e55" }, children: t("error") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { ...badge, background: "rgba(80,200,120,0.15)", color: "#4a4" }, children: [
+          r.latencyMs,
+          "ms"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: preBlock, children: r.error ?? r.output }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: muted, children: [
+          r.promptTokens + r.completionTokens,
+          " tokens (",
+          r.promptTokens,
+          "\u2191 ",
+          r.completionTokens,
+          "\u2193)"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stars, { rating: r.rating ?? 0, onRate: (n) => handleRate(r.model, n) })
+      ] })
+    ] }, r.model)) })
+  ] });
+}
 function ArenaPanel({ t }) {
   const { payload, error, reload } = usePanel();
+  const [expandedRun, setExpandedRun] = (0, import_react.useState)(null);
   const header = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { style: head, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { fontSize: 13 }, children: t("title") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 14 }, children: [
+      "\u2694\uFE0F ",
+      t("title")
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: reload, style: { fontSize: 12 }, children: t("refresh") })
   ] });
@@ -107,19 +264,36 @@ function ArenaPanel({ t }) {
   if (payload === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: muted, "aria-live": "polite", children: t("loading") });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: wrap, children: [
     header,
-    payload.recentRuns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 13, opacity: 0.8 }, children: t("empty") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: table, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("run") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("models") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("date") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("prompt") })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: payload.recentRuns.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 11 }, children: row.id }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: row.modelCount }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: new Date(row.timestamp).toLocaleString() }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: row.prompt.length > 60 ? `${row.prompt.slice(0, 60)}\u2026` : row.prompt })
-      ] }, row.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatsSummary, { stats: payload.stats, t }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Leaderboard, { entries: payload.leaderboard, t }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: section, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionTitle, children: [
+        "\u{1F4CB} ",
+        t("recentRuns")
+      ] }),
+      payload.recentRuns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 13, opacity: 0.8 }, children: t("empty") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("run") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("models") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("winner") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("date") })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: payload.recentRuns.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { style: clickRow, onClick: () => setExpandedRun(expandedRun === row.id ? null : row.id), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { style: td, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 11 }, children: row.id }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: 6, fontSize: 10 }, children: expandedRun === row.id ? "\u25BC" : "\u25B6" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: row.modelCount }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: row.winner ?? "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: new Date(row.timestamp).toLocaleString() })
+          ] }, row.id),
+          expandedRun === row.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: 4, style: { padding: "4px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunDetail, { runId: row.id, t, onDelete: () => {
+            setExpandedRun(null);
+            reload();
+          } }) }) }, `${row.id}-detail`)
+        ] })) })
+      ] })
     ] })
   ] });
 }

package/lib/arena.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/client/index.tsx", "../src/client/locales.ts", "../src/client/view.tsx"],
-  "sourcesContent": ["/**\n * Browser half of dsh-model-arena: its page inside Settings.\n *\n * Two services are injected by their runtime identity, not by the packages that provide\n * them: the settings shell is `slots`, the dictionary registry is `locale`. The label and\n * every string inside the component are translated through this plugin's own namespace,\n * which is why the page follows the UI language instead of the plugin author's.\n *\n * @module client\n */\n\nimport type { ComponentType } from 'react'\n\nimport { NS, en, zh } from './locales.js'\nimport { ArenaPanel } from './view.js'\n\nexport const inject = ['slots', 'locale']\n\ninterface SlotsService {\n  inject(name: string, register: () => void): void\n  register(\n    options: { name: string; id: string; order: number; label: () => string; locale: string },\n    component: ComponentType<{ t: (key: string, params?: Record<string, unknown>) => string }>,\n  ): unknown\n}\n\ninterface ClientContext {\n  slots: SlotsService\n  locale: {\n    register(ns: string, dicts: { zh: unknown; en: unknown }): () => void\n    bind(ns: string): (key: string, params?: Record<string, unknown>) => string\n  }\n  effect(callback: () => unknown, label?: string): unknown\n}\n\nexport function apply(ctx: ClientContext): void {\n  // `zh` is the key-set source of truth, matching the official client plugins.\n  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-model-arena: dictionaries')\n\n  ctx.slots.inject('settings.section', () => ctx.slots.register(\n    {\n      name: 'settings.section',\n      id: 'model-arena',\n      order: 42,\n      label: () => ctx.locale.bind(NS)('nav'),\n      locale: NS,\n    },\n    ArenaPanel,\n  ))\n}\n", "/**\n * Dictionaries for the Model Arena page.\n *\n * `zh` is the key-set source of truth, as in the official client plugins, and `en` is\n * typed against it: a key translated in one language but not the other fails the build\n * instead of silently rendering the raw key.\n *\n * @module client/locales\n */\n\n/** Dictionary namespace owned by this plugin. */\nexport const NS = 'modelArena'\n\n/** Simplified Chinese dictionary (the key-set source of truth). */\nexport const zh = {\n  'nav': '\u6A21\u578B\u7ADE\u6280\u573A',\n  'title': '\u6A21\u578B\u7ADE\u6280\u573A',\n  'run': '\u8FD0\u884C',\n  'models': '\u6A21\u578B\u6570',\n  'date': '\u65F6\u95F4',\n  'prompt': '\u63D0\u793A\u8BCD',\n  'empty': '\u8FD8\u6CA1\u6709\u8FD0\u884C\u8BB0\u5F55\u3002\u7528\u540C\u4E00\u4E2A\u63D0\u793A\u8BCD\u8DD1\u591A\u4E2A\u6A21\u578B\u540E\uFF0C\u7ED3\u679C\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002',\n  'refresh': '\u5237\u65B0',\n  'loading': '\u6B63\u5728\u52A0\u8F7D\u2026',\n  'failed': '\u52A0\u8F7D\u5931\u8D25',\n  'retry': '\u91CD\u8BD5',\n}\n\n/** English dictionary, checked complete against the zh key set. */\nexport const en: typeof zh = {\n  'nav': 'Model Arena',\n  'title': 'Model Arena',\n  'run': 'Run',\n  'models': 'Models',\n  'date': 'Date',\n  'prompt': 'Prompt',\n  'empty': 'No runs yet. Run one prompt through several models and the comparison appears here.',\n  'refresh': 'Refresh',\n  'loading': 'Loading\u2026',\n  'failed': 'Failed to load',\n  'retry': 'Retry',\n}\n", "/**\n * Pure rendering half of the modelArena page.\n *\n * Separate from `index.tsx` so a static render can assert in Node what the page draws \u2014\n * the shipped bundle is a loader factory only a browser can run. Every user-visible\n * string comes from the `t` seat the renderer binds from this plugin's namespace, so the\n * page follows the UI language; no copy is hardcoded here.\n *\n * @module client/view\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { CSSProperties } from 'react'\n\nimport type { PanelPayload } from '../types.js'\n\n/** The translate seat the renderer binds from this plugin's locale namespace. */\nexport type Translate = (key: string, params?: Record<string, unknown>) => string\n\nexport interface PanelProps {\n  /** Bound translate function for this plugin's namespace. */\n  t: Translate\n}\n\n/** Panel route registered by the host half on the web connection. */\nconst PANEL_PATH = \"/api/arena.panel\"\n\nconst wrap: CSSProperties = { display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 760, fontFamily: 'inherit' }\nconst head: CSSProperties = { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }\nconst muted: CSSProperties = { fontSize: 12, opacity: 0.75 }\nconst table: CSSProperties = { borderCollapse: 'collapse', width: '100%' }\nconst th: CSSProperties = { textAlign: 'left', padding: '4px 10px 4px 0', fontWeight: 600, fontSize: 12, opacity: 0.8, borderBottom: '0.5px solid rgba(128,128,128,0.4)' }\nconst td: CSSProperties = { padding: '6px 10px 6px 0', fontSize: 13, borderBottom: '0.5px solid rgba(128,128,128,0.18)' }\n\ninterface PanelState {\n  payload: PanelPayload | null\n  error: string | null\n}\n\n/** Fetch the host panel payload; `reload` re-runs the request. */\nexport function usePanel(): PanelState & { reload: () => void } {\n  const [state, setState] = useState<PanelState>({ payload: null, error: null })\n  const [tick, setTick] = useState(0)\n  const reload = useCallback(() => setTick((value) => value + 1), [])\n\n  useEffect(() => {\n    const controller = new AbortController()\n    setState((previous) => ({ ...previous, error: null }))\n    fetch(PANEL_PATH, { signal: controller.signal })\n      .then(async (response) => {\n        if (!response.ok) throw new Error(String(response.status))\n        return response.json() as Promise<PanelPayload>\n      })\n      .then((payload) => {\n        if (!controller.signal.aborted) setState({ payload, error: null })\n      })\n      .catch((cause: unknown) => {\n        if (controller.signal.aborted) return\n        setState({ payload: null, error: cause instanceof Error ? cause.message : String(cause) })\n      })\n    return () => controller.abort()\n  }, [tick])\n\n  return { ...state, reload }\n}\n\nexport function ArenaPanel({ t }: PanelProps) {\n  const { payload, error, reload } = usePanel()\n  const header = (\n    <header style={head}>\n      <strong style={{ fontSize: 13 }}>{t('title')}</strong>\n      <span style={{ flex: 1 }} />\n      <button type=\"button\" onClick={reload} style={{ fontSize: 12 }}>{t('refresh')}</button>\n    </header>\n  )\n  if (error !== null) {\n    return (\n      <div style={wrap}>\n        {header}\n        <p role=\"alert\" style={{ margin: 0, fontSize: 13 }}>{t('failed')}: {error}</p>\n        <button type=\"button\" onClick={reload} style={{ alignSelf: 'flex-start', fontSize: 12 }}>{t('retry')}</button>\n      </div>\n    )\n  }\n  if (payload === null) return <p style={muted} aria-live=\"polite\">{t('loading')}</p>\n  return (\n    <div style={wrap}>\n      {header}\n      {payload.recentRuns.length === 0 ? (\n        <p style={{ margin: 0, fontSize: 13, opacity: 0.8 }}>{t('empty')}</p>\n      ) : (\n        <table style={table}>\n          <thead>\n            <tr><th style={th}>{t('run')}</th><th style={th}>{t('models')}</th><th style={th}>{t('date')}</th><th style={th}>{t('prompt')}</th></tr>\n          </thead>\n          <tbody>\n            {payload.recentRuns.map((row) => (\n              <tr key={row.id}>\n                <td style={td}><code style={{ fontSize: 11 }}>{row.id}</code></td>\n                <td style={td}>{row.modelCount}</td>\n                <td style={td}>{new Date(row.timestamp).toLocaleString()}</td>\n                <td style={td}>{row.prompt.length > 60 ? `${row.prompt.slice(0, 60)}\u2026` : row.prompt}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      )}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * Browser half of dsh-model-arena: its page inside Settings.\n *\n * Two services are injected by their runtime identity, not by the packages that provide\n * them: the settings shell is `slots`, the dictionary registry is `locale`. The label and\n * every string inside the component are translated through this plugin's own namespace,\n * which is why the page follows the UI language instead of the plugin author's.\n *\n * @module client\n */\n\nimport type { ComponentType } from 'react'\n\nimport { NS, en, zh } from './locales.js'\nimport { ArenaPanel } from './view.js'\n\nexport const inject = ['slots', 'locale']\n\ninterface SlotsService {\n  inject(name: string, register: () => void): void\n  register(\n    options: { name: string; id: string; order: number; label: () => string; locale: string },\n    component: ComponentType<{ t: (key: string, params?: Record<string, unknown>) => string }>,\n  ): unknown\n}\n\ninterface ClientContext {\n  slots: SlotsService\n  locale: {\n    register(ns: string, dicts: { zh: unknown; en: unknown }): () => void\n    bind(ns: string): (key: string, params?: Record<string, unknown>) => string\n  }\n  effect(callback: () => unknown, label?: string): unknown\n}\n\nexport function apply(ctx: ClientContext): void {\n  // `zh` is the key-set source of truth, matching the official client plugins.\n  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-model-arena: dictionaries')\n\n  ctx.slots.inject('settings.section', () => ctx.slots.register(\n    {\n      name: 'settings.section',\n      id: 'model-arena',\n      order: 42,\n      label: () => ctx.locale.bind(NS)('nav'),\n      locale: NS,\n    },\n    ArenaPanel,\n  ))\n}\n", "/**\n * Dictionaries for the Model Arena page.\n *\n * `zh` is the key-set source of truth, as in the official client plugins, and `en` is\n * typed against it: a key translated in one language but not the other fails the build\n * instead of silently rendering the raw key.\n *\n * @module client/locales\n */\n\n/** Dictionary namespace owned by this plugin. */\nexport const NS = 'modelArena'\n\n/** Simplified Chinese dictionary (the key-set source of truth). */\nexport const zh = {\n  'nav': '\u6A21\u578B\u7ADE\u6280\u573A',\n  'title': '\u6A21\u578B\u7ADE\u6280\u573A',\n  'run': '\u8FD0\u884C',\n  'models': '\u6A21\u578B\u6570',\n  'model': '\u6A21\u578B',\n  'date': '\u65F6\u95F4',\n  'prompt': '\u63D0\u793A\u8BCD',\n  'empty': '\u8FD8\u6CA1\u6709\u8FD0\u884C\u8BB0\u5F55\u3002\u7528\u540C\u4E00\u4E2A\u63D0\u793A\u8BCD\u8DD1\u591A\u4E2A\u6A21\u578B\u540E\uFF0C\u7ED3\u679C\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002',\n  'refresh': '\u5237\u65B0',\n  'loading': '\u6B63\u5728\u52A0\u8F7D\u2026',\n  'failed': '\u52A0\u8F7D\u5931\u8D25',\n  'retry': '\u91CD\u8BD5',\n  'leaderboard': 'Elo \u6392\u884C\u699C',\n  'wins': '\u80DC',\n  'avgRating': '\u5E73\u5747\u8BC4\u5206',\n  'runs': '\u6B21\u6570',\n  'totalRuns': '\u603B\u8FD0\u884C\u6570',\n  'uniqueModels': '\u6A21\u578B\u79CD\u7C7B',\n  'totalRatings': '\u603B\u8BC4\u5206\u6570',\n  'recentRuns': '\u6700\u8FD1\u8FD0\u884C',\n  'winner': '\u80DC\u51FA',\n  'reference': '\u53C2\u8003\u7B54\u6848',\n  'error': '\u9519\u8BEF',\n  'delete': '\u5220\u9664',\n  'confirmDelete': '\u786E\u5B9A\u5220\u9664\u8FD9\u6761\u8FD0\u884C\u8BB0\u5F55\uFF1F',\n  'notFound': '\u672A\u627E\u5230\u8FD0\u884C\u8BB0\u5F55',\n}\n\n/** English dictionary, checked complete against the zh key set. */\nexport const en: typeof zh = {\n  'nav': 'Model Arena',\n  'title': 'Model Arena',\n  'run': 'Run',\n  'models': 'Models',\n  'model': 'Model',\n  'date': 'Date',\n  'prompt': 'Prompt',\n  'empty': 'No runs yet. Run one prompt through several models and the comparison appears here.',\n  'refresh': 'Refresh',\n  'loading': 'Loading\u2026',\n  'failed': 'Failed to load',\n  'retry': 'Retry',\n  'leaderboard': 'Elo Leaderboard',\n  'wins': 'Wins',\n  'avgRating': 'Avg Rating',\n  'runs': 'Runs',\n  'totalRuns': 'Total Runs',\n  'uniqueModels': 'Models',\n  'totalRatings': 'Ratings',\n  'recentRuns': 'Recent Runs',\n  'winner': 'Winner',\n  'reference': 'Reference',\n  'error': 'Error',\n  'delete': 'Delete',\n  'confirmDelete': 'Delete this run?',\n  'notFound': 'Run not found',\n}\n", "/**\n * Pure rendering half of the modelArena page.\n *\n * Separate from `index.tsx` so a static render can assert in Node what the page draws \u2014\n * the shipped bundle is a loader factory only a browser can run. Every user-visible\n * string comes from the `t` seat the renderer binds from this plugin's namespace, so the\n * page follows the UI language; no copy is hardcoded here.\n *\n * @module client/view\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { CSSProperties } from 'react'\n\nimport type { PanelPayload, LeaderboardEntry, ArenaStats, RunSummary, ArenaRun } from '../types.js'\n\nexport type Translate = (key: string, params?: Record<string, unknown>) => string\n\nexport interface PanelProps {\n  t: Translate\n}\n\nconst PANEL_PATH = '/api/arena.panel'\nconst RUN_PATH = '/api/arena.run'\nconst RATE_PATH = '/api/arena.rate'\nconst DELETE_PATH = '/api/arena.delete'\n\n// --- Styles ---\nconst wrap: CSSProperties = { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 820, fontFamily: 'inherit' }\nconst head: CSSProperties = { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }\nconst section: CSSProperties = { marginTop: 8 }\nconst sectionTitle: CSSProperties = { fontSize: 13, fontWeight: 600, marginBottom: 6 }\nconst muted: CSSProperties = { fontSize: 12, opacity: 0.75 }\nconst table: CSSProperties = { borderCollapse: 'collapse', width: '100%' }\nconst th: CSSProperties = { textAlign: 'left', padding: '4px 10px 4px 0', fontWeight: 600, fontSize: 12, opacity: 0.8, borderBottom: '0.5px solid rgba(128,128,128,0.4)' }\nconst td: CSSProperties = { padding: '6px 10px 6px 0', fontSize: 13, borderBottom: '0.5px solid rgba(128,128,128,0.18)' }\nconst card: CSSProperties = { padding: '8px 12px', borderRadius: 6, border: '1px solid rgba(128,128,128,0.2)', background: 'rgba(128,128,128,0.04)', fontSize: 13 }\nconst badge: CSSProperties = { display: 'inline-block', padding: '1px 6px', borderRadius: 9, fontSize: 11, fontWeight: 600 }\nconst statRow: CSSProperties = { display: 'flex', gap: 16, flexWrap: 'wrap' }\nconst statBox: CSSProperties = { ...card, flex: 1, minWidth: 100, textAlign: 'center' as const }\nconst starBtn: CSSProperties = { cursor: 'pointer', background: 'none', border: 'none', fontSize: 16, padding: '0 1px' }\nconst clickRow: CSSProperties = { cursor: 'pointer' }\nconst preBlock: CSSProperties = { 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)' }\nconst dangerBtn: CSSProperties = { fontSize: 11, color: '#e55', background: 'none', border: '1px solid #e55', borderRadius: 4, padding: '2px 8px', cursor: 'pointer' }\n\ninterface PanelState {\n  payload: PanelPayload | null\n  error: string | null\n}\n\nexport function usePanel(): PanelState & { reload: () => void } {\n  const [state, setState] = useState<PanelState>({ payload: null, error: null })\n  const [tick, setTick] = useState(0)\n  const reload = useCallback(() => setTick((v) => v + 1), [])\n  useEffect(() => {\n    const c = new AbortController()\n    setState((p) => ({ ...p, error: null }))\n    fetch(PANEL_PATH, { signal: c.signal })\n      .then(async (r) => {\n        if (!r.ok) throw new Error(String(r.status))\n        return r.json() as Promise<PanelPayload>\n      })\n      .then((payload) => { if (!c.signal.aborted) setState({ payload, error: null }) })\n      .catch((e: unknown) => { if (!c.signal.aborted) setState({ payload: null, error: e instanceof Error ? e.message : String(e) }) })\n    return () => c.abort()\n  }, [tick])\n  return { ...state, reload }\n}\n\n// --- Stars ---\nfunction Stars({ rating, onRate }: { rating: number; onRate: (n: number) => void }) {\n  return (\n    <span>\n      {[1, 2, 3, 4, 5].map((n) => (\n        <button key={n} type=\"button\" style={starBtn} onClick={() => onRate(n)} title={`${n}/5`}>\n          {n <= rating ? '\u2605' : '\u2606'}\n        </button>\n      ))}\n    </span>\n  )\n}\n\n// --- Leaderboard ---\nfunction Leaderboard({ entries, t }: { entries: LeaderboardEntry[]; t: Translate }) {\n  if (entries.length === 0) return null\n  return (\n    <div style={section}>\n      <div style={sectionTitle}>\uD83C\uDFC6 {t('leaderboard')}</div>\n      <table style={table}>\n        <thead>\n          <tr>\n            <th style={th}>#</th>\n            <th style={th}>{t('model')}</th>\n            <th style={th}>Elo</th>\n            <th style={th}>{t('wins')}</th>\n            <th style={th}>{t('avgRating')}</th>\n            <th style={th}>{t('runs')}</th>\n          </tr>\n        </thead>\n        <tbody>\n          {entries.map((e, i) => (\n            <tr key={e.model}>\n              <td style={td}>{i + 1}</td>\n              <td style={td}><strong>{e.model}</strong></td>\n              <td style={td}>{e.elo}</td>\n              <td style={td}>{e.wins}</td>\n              <td style={td}>{e.avgRating > 0 ? e.avgRating.toFixed(1) : '\u2014'}</td>\n              <td style={td}>{e.totalRuns}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\n// --- Stats summary ---\nfunction StatsSummary({ stats, t }: { stats: ArenaStats; t: Translate }) {\n  return (\n    <div style={statRow}>\n      <div style={statBox}><div style={{ fontSize: 20, fontWeight: 700 }}>{stats.totalRuns}</div><div style={muted}>{t('totalRuns')}</div></div>\n      <div style={statBox}><div style={{ fontSize: 20, fontWeight: 700 }}>{stats.uniqueModels}</div><div style={muted}>{t('uniqueModels')}</div></div>\n      <div style={statBox}><div style={{ fontSize: 20, fontWeight: 700 }}>{stats.totalRatings}</div><div style={muted}>{t('totalRatings')}</div></div>\n    </div>\n  )\n}\n\n// --- Run detail expansion ---\nfunction RunDetail({ runId, t, onDelete }: { runId: string; t: Translate; onDelete: () => void }) {\n  const [run, setRun] = useState<ArenaRun | null>(null)\n  const [loading, setLoading] = useState(true)\n  useEffect(() => {\n    setLoading(true)\n    fetch(`${RUN_PATH}?id=${runId}`)\n      .then((r) => r.json() as Promise<ArenaRun>)\n      .then(setRun)\n      .catch(() => setRun(null))\n      .finally(() => setLoading(false))\n  }, [runId])\n\n  const handleRate = useCallback((model: string, rating: number) => {\n    fetch(RATE_PATH, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ runId, model, rating }),\n    })\n      .then((r) => r.json() as Promise<ArenaRun>)\n      .then(setRun)\n      .catch(() => {})\n  }, [runId])\n\n  const handleDelete = useCallback(() => {\n    if (!confirm(t('confirmDelete'))) return\n    fetch(DELETE_PATH, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ runId }),\n    }).then(() => onDelete()).catch(() => {})\n  }, [runId, t, onDelete])\n\n  if (loading) return <p style={muted}>{t('loading')}</p>\n  if (!run) return <p style={muted}>{t('notFound')}</p>\n  return (\n    <div style={{ ...card, marginTop: 4 }}>\n      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>\n        <strong>{t('prompt')}: </strong>\n        <button type=\"button\" style={dangerBtn} onClick={handleDelete}>{t('delete')}</button>\n      </div>\n      <div style={preBlock}>{run.prompt}</div>\n      {run.reference && (\n        <div style={{ marginTop: 6 }}>\n          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 2 }}>{t('reference')}:</div>\n          <div style={preBlock}>{run.reference}</div>\n        </div>\n      )}\n      <div style={{ marginTop: 8 }}>\n        {run.results.map((r) => (\n          <div key={r.model} style={{ ...card, marginTop: 6 }}>\n            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n              <strong>{r.model}</strong>\n              <span>\n                {r.error ? (\n                  <span style={{ ...badge, background: 'rgba(255,80,80,0.15)', color: '#e55' }}>{t('error')}</span>\n                ) : (\n                  <span style={{ ...badge, background: 'rgba(80,200,120,0.15)', color: '#4a4' }}>{r.latencyMs}ms</span>\n                )}\n              </span>\n            </div>\n            <div style={preBlock}>{r.error ?? r.output}</div>\n            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>\n              <span style={muted}>{r.promptTokens + r.completionTokens} tokens ({r.promptTokens}\u2191 {r.completionTokens}\u2193)</span>\n              <Stars rating={r.rating ?? 0} onRate={(n) => handleRate(r.model, n)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\n// --- Main Panel ---\nexport function ArenaPanel({ t }: PanelProps) {\n  const { payload, error, reload } = usePanel()\n  const [expandedRun, setExpandedRun] = useState<string | null>(null)\n\n  const header = (\n    <header style={head}>\n      <strong style={{ fontSize: 14 }}>\u2694\uFE0F {t('title')}</strong>\n      <span style={{ flex: 1 }} />\n      <button type=\"button\" onClick={reload} style={{ fontSize: 12 }}>{t('refresh')}</button>\n    </header>\n  )\n  if (error !== null) {\n    return (\n      <div style={wrap}>\n        {header}\n        <p role=\"alert\" style={{ margin: 0, fontSize: 13 }}>{t('failed')}: {error}</p>\n        <button type=\"button\" onClick={reload} style={{ alignSelf: 'flex-start', fontSize: 12 }}>{t('retry')}</button>\n      </div>\n    )\n  }\n  if (payload === null) return <p style={muted} aria-live=\"polite\">{t('loading')}</p>\n  return (\n    <div style={wrap}>\n      {header}\n\n      {/* Stats */}\n      <StatsSummary stats={payload.stats} t={t} />\n\n      {/* Leaderboard */}\n      <Leaderboard entries={payload.leaderboard} t={t} />\n\n      {/* Recent runs */}\n      <div style={section}>\n        <div style={sectionTitle}>\uD83D\uDCCB {t('recentRuns')}</div>\n        {payload.recentRuns.length === 0 ? (\n          <p style={{ margin: 0, fontSize: 13, opacity: 0.8 }}>{t('empty')}</p>\n        ) : (\n          <table style={table}>\n            <thead>\n              <tr><th style={th}>{t('run')}</th><th style={th}>{t('models')}</th><th style={th}>{t('winner')}</th><th style={th}>{t('date')}</th></tr>\n            </thead>\n            <tbody>\n              {payload.recentRuns.map((row) => (\n                <>\n                  <tr key={row.id} style={clickRow} onClick={() => setExpandedRun(expandedRun === row.id ? null : row.id)}>\n                    <td style={td}>\n                      <code style={{ fontSize: 11 }}>{row.id}</code>\n                      <span style={{ marginLeft: 6, fontSize: 10 }}>{expandedRun === row.id ? '\u25BC' : '\u25B6'}</span>\n                    </td>\n                    <td style={td}>{row.modelCount}</td>\n                    <td style={td}>{row.winner ?? '\u2014'}</td>\n                    <td style={td}>{new Date(row.timestamp).toLocaleString()}</td>\n                  </tr>\n                  {expandedRun === row.id && (\n                    <tr key={`${row.id}-detail`}>\n                      <td colSpan={4} style={{ padding: '4px 0' }}>\n                        <RunDetail runId={row.id} t={t} onDelete={() => { setExpandedRun(null); reload() }} />\n                      </td>\n                    </tr>\n                  )}\n                </>\n              ))}\n            </tbody>\n          </table>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/lib/client/locales.d.ts

@@ -15,6 +15,7 @@ export declare const zh: {
     title: string;
     run: string;
     models: string;
+    model: string;
     date: string;
     prompt: string;
     empty: string;
@@ -22,6 +23,20 @@ export declare const zh: {
     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

@@ -15,6 +15,7 @@ export const zh = {
     'title': '模型竞技场',
     'run': '运行',
     'models': '模型数',
+    'model': '模型',
     'date': '时间',
     'prompt': '提示词',
     'empty': '还没有运行记录。用同一个提示词跑多个模型后，结果会显示在这里。',
@@ -22,6 +23,20 @@ export const zh = {
     '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 = {
@@ -29,6 +44,7 @@ export const en = {
     '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.',
@@ -36,4 +52,18 @@ export const en = {
     '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

@@ -9,17 +9,14 @@
  * @module client/view
  */
 import type { PanelPayload } from '../types.js';
-/** The translate seat the renderer binds from this plugin's locale namespace. */
 export type Translate = (key: string, params?: Record<string, unknown>) => string;
 export interface PanelProps {
-    /** Bound translate function for this plugin's namespace. */
     t: Translate;
 }
 interface PanelState {
     payload: PanelPayload | null;
     error: string | null;
 }
-/** Fetch the host panel payload; `reload` re-runs the request. */
 export declare function usePanel(): PanelState & {
     reload: () => void;
 };

package/lib/client/view.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Pure rendering half of the modelArena page.
  *
@@ -10,48 +10,108 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module client/view
  */
 import { useCallback, useEffect, useState } from 'react';
-/** Panel route registered by the host half on the web connection. */
-const PANEL_PATH = "/api/arena.panel";
-const wrap = { display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 760, fontFamily: 'inherit' };
+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)' };
-/** Fetch the host panel payload; `reload` re-runs the request. */
+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((value) => value + 1), []);
+    const reload = useCallback(() => setTick((v) => v + 1), []);
     useEffect(() => {
-        const controller = new AbortController();
-        setState((previous) => ({ ...previous, error: null }));
-        fetch(PANEL_PATH, { signal: controller.signal })
-            .then(async (response) => {
-            if (!response.ok)
-                throw new Error(String(response.status));
-            return response.json();
+        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 (!controller.signal.aborted)
-                setState({ payload, error: null });
-        })
-            .catch((cause) => {
-            if (controller.signal.aborted)
-                return;
-            setState({ payload: null, error: cause instanceof Error ? cause.message : String(cause) });
-        });
-        return () => controller.abort();
+            .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 header = (_jsxs("header", { style: head, children: [_jsx("strong", { style: { fontSize: 13 }, children: t('title') }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", onClick: reload, style: { fontSize: 12 }, children: t('refresh') })] }));
+    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, 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('date') }), _jsx("th", { style: th, children: t('prompt') })] }) }), _jsx("tbody", { children: payload.recentRuns.map((row) => (_jsxs("tr", { children: [_jsx("td", { style: td, children: _jsx("code", { style: { fontSize: 11 }, children: row.id }) }), _jsx("td", { style: td, children: row.modelCount }), _jsx("td", { style: td, children: new Date(row.timestamp).toLocaleString() }), _jsx("td", { style: td, children: row.prompt.length > 60 ? `${row.prompt.slice(0, 60)}…` : row.prompt })] }, row.id))) })] }))] }));
+    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;
 }

package/lib/store.js

@@ -1,4 +1,4 @@
-import { writeFileSync, readFileSync, existsSync, mkdirSync, readdirSync } from 'node:fs';
+import { writeFileSync, readFileSync, existsSync, mkdirSync, readdirSync, unlinkSync } from 'node:fs';
 import { join } from 'node:path';
 import { createHash } from 'node:crypto';
 export class ArenaStore {
@@ -40,6 +40,13 @@ export class ArenaStore {
             return null;
         return JSON.parse(readFileSync(path, 'utf8'));
     }
+    deleteRun(id) {
+        const path = join(this.arenaDir, `${id}.json`);
+        if (!existsSync(path))
+            return false;
+        unlinkSync(path);
+        return true;
+    }
     static generateId(prompt, models) {
         const hash = createHash('sha256');
         hash.update(prompt);

package/lib/types.d.ts

@@ -5,6 +5,7 @@ export interface ModelResult {
     completionTokens: number;
     latencyMs: number;
     error?: string;
+    rating?: number;
 }
 export interface Score {
     userRating?: number;
@@ -18,6 +19,7 @@ export interface ArenaRun {
     timestamp: number;
     results: ModelResult[];
     scores: Record<string, Score>;
+    reference?: string | undefined;
 }
 export interface Suite {
     name: string;
@@ -36,11 +38,53 @@ export interface RegressionReport {
         currentOutput: string;
     }[];
 }
-export interface PanelPayload {
-    recentRuns: {
-        id: string;
-        prompt: string;
-        timestamp: number;
-        modelCount: number;
+export interface LeaderboardEntry {
+    model: string;
+    elo: number;
+    wins: number;
+    losses: number;
+    draws: number;
+    games: number;
+    totalRuns: number;
+    avgRating: number;
+    avgLatencyMs: number;
+    avgTokens: number;
+}
+export interface RunSummary {
+    id: string;
+    prompt: string;
+    timestamp: number;
+    modelCount: number;
+    winner?: string | undefined;
+}
+export interface ComparePayload {
+    runId: string;
+    modelA: string;
+    modelB: string;
+    outputA: string;
+    outputB: string;
+    diff: {
+        type: 'same' | 'added' | 'removed';
+        text: string;
     }[];
+    summary: {
+        added: number;
+        removed: number;
+        changed: number;
+    };
+    scoreA: Score;
+    scoreB: Score;
+}
+export interface ArenaStats {
+    totalRuns: number;
+    totalModels: number;
+    uniqueModels: number;
+    uniquePrompts: number;
+    totalRatings: number;
+    avgModelsPerRun: number;
+}
+export interface PanelPayload {
+    recentRuns: RunSummary[];
+    leaderboard: LeaderboardEntry[];
+    stats: ArenaStats;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-arena",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Run the same prompt through every model you have, and see the difference without squinting.",
   "type": "module",
   "main": "lib/index.js",