dsh-model-arena 0.3.0 → 0.4.0

package/lib/arena.web.js

@@ -87,216 +87,630 @@ var en = {
 };
 
 // src/client/view.tsx
+var import_react2 = require("react");
+
+// src/client/ui.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var PANEL_PATH = "/api/arena.panel";
-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 });
+var T = {
+  accent: "var(--accent, #4B8BBE)",
+  accentHover: "var(--accent-hover, #3a6f9e)",
+  error: "var(--error, #e53935)",
+  success: "var(--success, #2e7d32)",
+  warning: "var(--warning, #ed6c02)",
+  bg: "var(--bg-secondary, rgba(128,128,128,0.04))",
+  bgHover: "var(--bg-tertiary, rgba(128,128,128,0.08))",
+  border: "var(--border, rgba(128,128,128,0.2))",
+  text: "var(--text-primary, inherit)",
+  muted: "var(--text-secondary, rgba(128,128,128,0.65))",
+  surface: "var(--bg-primary, #fff)"
+};
+var injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.textContent = `
+@keyframes dsh-fade-in{from{opacity:0}to{opacity:1}}
+@keyframes dsh-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+@keyframes dsh-spin{to{transform:rotate(360deg)}}
+.dsh-modal-overlay{animation:dsh-fade-in .15s ease}
+.dsh-modal-body{animation:dsh-slide-up .2s ease}
+.dsh-toast{animation:dsh-slide-up .2s ease}
+.dsh-spin{animation:dsh-spin .6s linear infinite}
+  `;
+  document.head.appendChild(el);
+}
+function Modal({
+  title,
+  onClose,
+  children,
+  footer,
+  width = 520
+}) {
+  (0, import_react.useEffect)(() => {
+    ensureStyles();
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "dsh-modal-overlay",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.45)",
+        backdropFilter: "blur(3px)",
+        WebkitBackdropFilter: "blur(3px)"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "dsh-modal-body",
+          style: {
+            background: T.surface,
+            borderRadius: 14,
+            boxShadow: "0 12px 40px rgba(0,0,0,0.25)",
+            width: `min(92vw, ${width}px)`,
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 22px",
+                  borderBottom: `1px solid ${T.border}`
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: 0, fontSize: 15, fontWeight: 600 }, children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: 20,
+                        color: T.muted,
+                        padding: "0 4px",
+                        lineHeight: 1,
+                        borderRadius: 4
+                      },
+                      "aria-label": "Close",
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 22, overflow: "auto", flex: 1 }, children }),
+            footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  padding: "14px 22px",
+                  borderTop: `1px solid ${T.border}`,
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 10,
+                  background: T.bg
+                },
+                children: footer
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  onConfirm,
+  onClose,
+  danger
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Modal,
+    {
+      title,
+      onClose,
+      width: 420,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Button,
+          {
+            variant: danger === true ? "danger" : "primary",
+            onClick: () => {
+              onConfirm();
+              onClose();
+            },
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.6 }, children: message })
+    }
+  );
+}
+function Button({
+  variant = "secondary",
+  size = "md",
+  children,
+  style,
+  ...rest
+}) {
+  const base = {
+    cursor: "pointer",
+    borderRadius: 7,
+    fontWeight: 500,
+    transition: "all 0.15s ease",
+    border: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    fontSize: size === "sm" ? 12 : 13,
+    padding: size === "sm" ? "5px 12px" : "8px 18px",
+    fontFamily: "inherit"
+  };
+  const variants = {
+    primary: { background: T.accent, color: "#fff" },
+    secondary: {
+      background: T.bg,
+      color: T.text,
+      border: `1px solid ${T.border}`
+    },
+    danger: {
+      background: "transparent",
+      color: T.error,
+      border: `1px solid ${T.error}`
+    },
+    ghost: { background: "transparent", color: T.muted, border: "none" }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: { ...base, ...variants[variant], ...style }, ...rest, children });
+}
+function Card({
+  title,
+  icon,
+  children,
+  actions,
+  style,
+  padding = 14
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        borderRadius: 10,
+        border: `1px solid ${T.border}`,
+        background: T.bg,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        (title !== void 0 || actions !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              borderBottom: title !== void 0 ? `1px solid ${T.border}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 6 }, children: [
+                icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: icon }),
+                title
+              ] }),
+              actions
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding }, children })
+      ]
+    }
+  );
+}
+function StatCard({
+  value,
+  label,
+  color,
+  unit
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minWidth: 90,
+        textAlign: "center",
+        padding: "14px 10px",
+        borderRadius: 10,
+        border: `1px solid ${T.border}`,
+        background: T.bg
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 24, fontWeight: 700, color: color ?? T.text, lineHeight: 1.2 }, children: [
+          value,
+          unit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 13, fontWeight: 500, opacity: 0.7, marginLeft: 2 }, children: unit })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: T.muted, marginTop: 4 }, children: label })
+      ]
+    }
+  );
+}
+function Badge({
+  children,
+  color = "default"
+}) {
+  const colors = {
+    default: { bg: "rgba(128,128,128,0.12)", fg: T.muted },
+    success: { bg: "rgba(46,125,50,0.12)", fg: T.success },
+    error: { bg: "rgba(229,57,53,0.12)", fg: T.error },
+    warning: { bg: "rgba(245,124,0,0.12)", fg: T.warning },
+    info: { bg: "rgba(75,139,190,0.12)", fg: T.accent }
+  };
+  const c = colors[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: "2px 9px",
+        borderRadius: 10,
+        fontSize: 11,
+        fontWeight: 600,
+        background: c.bg,
+        color: c.fg
+      },
+      children
+    }
+  );
+}
+var ToastContext = (0, import_react.createContext)(
+  () => {
+  }
+);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = (0, import_react.useState)([]);
+  const show = (0, import_react.useCallback)((type, message) => {
+    const id = Date.now() + Math.random();
+    setToasts((t) => [...t, { id, type, message }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: show, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          zIndex: 2e3,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8
+        },
+        children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "dsh-toast",
+            style: {
+              padding: "12px 18px",
+              borderRadius: 8,
+              fontSize: 13,
+              fontWeight: 500,
+              boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
+              color: "#fff",
+              background: t.type === "success" ? T.success : t.type === "error" ? T.error : T.accent,
+              maxWidth: 360
+            },
+            children: t.message
+          },
+          t.id
+        ))
+      }
+    )
+  ] });
+}
+function useToast() {
+  return (0, import_react.useContext)(ToastContext);
+}
+function Spinner({ size = 16 }) {
+  ensureStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "dsh-spin",
+      style: {
+        display: "inline-block",
+        width: size,
+        height: size,
+        border: `2px solid ${T.border}`,
+        borderTopColor: T.accent,
+        borderRadius: "50%"
+      }
+    }
+  );
+}
+function EmptyState({
+  icon,
+  message
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        textAlign: "center",
+        padding: "36px 16px",
+        color: T.muted
+      },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 36, marginBottom: 10, opacity: 0.4 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: message })
+      ]
+    }
+  );
+}
+function SectionTitle({
+  icon,
+  children,
+  actions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginTop: 6,
+        marginBottom: 8
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            style: {
+              fontSize: 14,
+              fontWeight: 600,
+              display: "flex",
+              alignItems: "center",
+              gap: 6
+            },
+            children: [
+              icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: icon }),
+              children
+            ]
+          }
+        ),
+        actions
+      ]
+    }
+  );
+}
+var tableStyles = {
+  table: {
+    borderCollapse: "collapse",
+    width: "100%"
+  },
+  th: {
+    textAlign: "left",
+    padding: "8px 12px 8px 0",
+    fontWeight: 600,
+    fontSize: 12,
+    color: T.muted,
+    borderBottom: `1px solid ${T.border}`
+  },
+  td: {
+    padding: "8px 12px 8px 0",
+    fontSize: 13,
+    borderBottom: "1px solid rgba(128,128,128,0.08)"
+  },
+  clickRow: { cursor: "pointer" }
+};
+function usePanel(path) {
+  const [payload, setPayload] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
   const [tick, setTick] = (0, import_react.useState)(0);
   const reload = (0, import_react.useCallback)(() => setTick((v) => v + 1), []);
   (0, import_react.useEffect)(() => {
     const c = new AbortController();
-    setState((p) => ({ ...p, error: null }));
-    fetch(PANEL_PATH, { signal: c.signal }).then(async (r) => {
+    setError(null);
+    fetch(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 });
+    }).then((p) => {
+      if (!c.signal.aborted) setPayload(p);
     }).catch((e) => {
-      if (!c.signal.aborted) setState({ payload: null, error: e instanceof Error ? e.message : String(e) });
+      if (!c.signal.aborted) setPayload(null), setError(e instanceof Error ? e.message : String(e));
     });
     return () => c.abort();
-  }, [tick]);
-  return { ...state, reload };
+  }, [tick, path]);
+  return (0, import_react.useMemo)(() => ({ payload, error, reload }), [payload, error, reload]);
 }
+
+// src/client/view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PANEL_PATH = "/api/arena.panel";
+var RUN_PATH = "/api/arena.run";
+var RATE_PATH = "/api/arena.rate";
+var DELETE_PATH = "/api/arena.delete";
 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") })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "inline-flex", gap: 1 }, children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", style: {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 18,
+    color: n <= rating ? "var(--warning, #ed6c02)" : "rgba(128,128,128,0.3)",
+    padding: "0 2px"
+  }, onClick: () => onRate(n), title: `${n}/5`, children: "\u2605" }, n)) });
 }
-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)(() => {
+function RunModal({ runId, t, onClose, onDeleted }) {
+  const toast = useToast();
+  const [run, setRun] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [confirmDel, setConfirmDel] = (0, import_react2.useState)(false);
+  (0, import_react2.useCallback)(() => {
     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(() => {
+    fetch(`${RUN_PATH}?id=${runId}`).then(async (r) => r.json()).then(setRun).catch(() => setRun(null)).finally(() => setLoading(false));
+  }, [runId])();
+  const handleRate = (0, import_react2.useCallback)((model, rating) => {
+    fetch(RATE_PATH, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ runId, model, rating }) }).then(async (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"
-        ] }) })
+  const handleDelete = (0, import_react2.useCallback)(async () => {
+    const r = await fetch(DELETE_PATH, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ runId }) });
+    if (r.ok) {
+      toast("success", t("deleted"));
+      onDeleted();
+      onClose();
+    }
+  }, [runId, t, toast, onDeleted, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Modal,
+    {
+      title: `${t("run")} ${runId.slice(0, 8)}\u2026`,
+      onClose,
+      width: 720,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Button, { variant: "danger", size: "sm", onClick: () => setConfirmDel(true), children: [
+        "\u{1F5D1} ",
+        t("delete")
       ] }),
-      /* @__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)"
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: 24 }) }) : run === null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyState, { message: t("notFound") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { title: t("prompt"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 12, margin: 0 }, children: run.prompt }) }),
+          run.reference && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { title: t("reference"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 12, margin: 0 }, children: run.reference }) }),
+          run.results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Card, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { style: { fontSize: 13 }, children: r.model }),
+              r.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { color: "error", children: t("error") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Badge, { color: "success", children: [
+                r.latencyMs,
+                "ms"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 12, margin: 0, padding: 8, borderRadius: 6, background: "rgba(128,128,128,0.06)", maxHeight: 150, overflow: "auto" }, children: r.error ?? r.output }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: 11, opacity: 0.6 }, children: [
+                r.promptTokens + r.completionTokens,
+                " tokens"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stars, { rating: r.rating ?? 0, onRate: (n) => handleRate(r.model, n) })
+            ] })
+          ] }, r.model))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stars, { rating: r.rating ?? 0, onRate: (n) => handleRate(r.model, n) })
-      ] })
-    ] }, r.model)) })
-  ] });
+        confirmDel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ConfirmDialog,
+          {
+            title: t("delete"),
+            message: t("confirmDelete"),
+            confirmLabel: t("delete"),
+            danger: true,
+            onConfirm: handleDelete,
+            onClose: () => setConfirmDel(false)
+          }
+        )
+      ]
+    }
+  );
 }
-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.jsxs)("strong", { style: { fontSize: 14 }, children: [
+function ArenaPanelInner({ t }) {
+  const { payload, error, reload } = usePanel(PANEL_PATH);
+  const [runModal, setRunModal] = (0, import_react2.useState)(null);
+  const header = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { style: { fontSize: 15 }, 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") })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "secondary", size: "sm", onClick: reload, children: t("refresh") })
   ] });
-  if (error !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: wrap, children: [
-      header,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "alert", style: { margin: 0, fontSize: 13 }, children: [
-        t("failed"),
-        ": ",
-        error
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: reload, style: { alignSelf: "flex-start", fontSize: 12 }, children: t("retry") })
-    ] });
-  }
-  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: [
+  if (error !== null) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { maxWidth: 820 }, children: [
     header,
-    /* @__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_runtime2.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { role: "alert", style: { margin: 0, fontSize: 13, color: "var(--error, #e53935)" }, children: [
+      t("failed"),
+      ": ",
+      error
+    ] }) })
+  ] });
+  if (payload === null) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { maxWidth: 820 }, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: 28 }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 14, maxWidth: 820 }, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 10, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.stats.totalRuns, label: t("totalRuns") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.stats.uniqueModels, label: t("uniqueModels") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.stats.totalRatings, label: t("totalRatings") })
+    ] }),
+    payload.leaderboard.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionTitle, { icon: "\u{1F3C6}", children: t("leaderboard") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { padding: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: tableStyles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: "#" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("model") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: "Elo" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("wins") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("avgRating") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("runs") })
         ] }) }),
-        /* @__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`)
-        ] })) })
-      ] })
-    ] })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: payload.leaderboard.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: i + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: e.model }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: e.elo }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: e.wins }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: e.avgRating > 0 ? e.avgRating.toFixed(1) : "\u2014" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: e.totalRuns })
+        ] }, e.model)) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionTitle, { icon: "\u{1F4CB}", children: t("recentRuns") }),
+    payload.recentRuns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyState, { icon: "\u{1F4ED}", message: t("empty") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { padding: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: tableStyles.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("run") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("models") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("winner") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("date") })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: payload.recentRuns.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { style: tableStyles.clickRow, onClick: () => setRunModal(row.id), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: { fontSize: 11 }, children: row.id.slice(0, 8) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: row.modelCount }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: row.winner ?? "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: new Date(row.timestamp).toLocaleString() })
+      ] }, row.id)) })
+    ] }) }),
+    runModal !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RunModal, { runId: runModal, t, onClose: () => setRunModal(null), onDeleted: reload })
   ] });
 }
+function ArenaPanel({ t }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArenaPanelInner, { t }) });
+}
 
 // src/client/index.tsx
 var inject = ["slots", "locale"];