dsh-model-arena 0.3.0 → 0.4.1

package/lib/client/ui.js

@@ -0,0 +1,388 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Shared UI component kit for dsh plugin panels.
+ *
+ * Self-contained: imports nothing but React. All styling is inline + CSS custom
+ * properties so the components follow the host theme. A single <style> tag injects
+ * keyframes the first time any component mounts.
+ *
+ * @module client/ui
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+// ─── Theme tokens ──────────────────────────────────────────────
+const 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)',
+};
+// ─── Style injection (once) ────────────────────────────────────
+let 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);
+}
+// ─── Modal ─────────────────────────────────────────────────────
+export function Modal({ title, onClose, children, footer, width = 520, }) {
+    useEffect(() => {
+        ensureStyles();
+        const handler = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [onClose]);
+    return (_jsx("div", { className: "dsh-modal-overlay", style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 1000,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(0,0,0,0.45)',
+            backdropFilter: 'blur(3px)',
+            WebkitBackdropFilter: 'blur(3px)',
+        }, onClick: onClose, children: _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: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '16px 22px',
+                        borderBottom: `1px solid ${T.border}`,
+                    }, children: [_jsx("h3", { style: { margin: 0, fontSize: 15, fontWeight: 600 }, children: title }), _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: "\u00D7" })] }), _jsx("div", { style: { padding: 22, overflow: 'auto', flex: 1 }, children: children }), footer !== undefined && (_jsx("div", { style: {
+                        padding: '14px 22px',
+                        borderTop: `1px solid ${T.border}`,
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        gap: 10,
+                        background: T.bg,
+                    }, children: footer }))] }) }));
+}
+// ─── ConfirmDialog ─────────────────────────────────────────────
+export function ConfirmDialog({ title, message, confirmLabel, cancelLabel = 'Cancel', onConfirm, onClose, danger, }) {
+    return (_jsx(Modal, { title: title, onClose: onClose, width: 420, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }), _jsx(Button, { variant: danger === true ? 'danger' : 'primary', onClick: () => {
+                        onConfirm();
+                        onClose();
+                    }, children: confirmLabel })] }), children: _jsx("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.6 }, children: message }) }));
+}
+// ─── Button ────────────────────────────────────────────────────
+export 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 (_jsx("button", { type: "button", style: { ...base, ...variants[variant], ...style }, ...rest, children: children }));
+}
+// ─── Card ──────────────────────────────────────────────────────
+export function Card({ title, icon, children, actions, style, padding = 14, }) {
+    return (_jsxs("div", { style: {
+            borderRadius: 10,
+            border: `1px solid ${T.border}`,
+            background: T.bg,
+            overflow: 'hidden',
+            ...style,
+        }, children: [(title !== undefined || actions !== undefined) && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '12px 16px',
+                    borderBottom: title !== undefined ? `1px solid ${T.border}` : 'none',
+                }, children: [_jsxs("span", { style: { fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }, children: [icon !== undefined && _jsx("span", { children: icon }), title] }), actions] })), _jsx("div", { style: { padding }, children: children })] }));
+}
+// ─── StatCard ──────────────────────────────────────────────────
+export function StatCard({ value, label, color, unit, }) {
+    return (_jsxs("div", { style: {
+            flex: 1,
+            minWidth: 90,
+            textAlign: 'center',
+            padding: '14px 10px',
+            borderRadius: 10,
+            border: `1px solid ${T.border}`,
+            background: T.bg,
+        }, children: [_jsxs("div", { style: { fontSize: 24, fontWeight: 700, color: color ?? T.text, lineHeight: 1.2 }, children: [value, unit !== undefined && (_jsx("span", { style: { fontSize: 13, fontWeight: 500, opacity: 0.7, marginLeft: 2 }, children: unit }))] }), _jsx("div", { style: { fontSize: 11, color: T.muted, marginTop: 4 }, children: label })] }));
+}
+// ─── Badge ─────────────────────────────────────────────────────
+export 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 (_jsx("span", { style: {
+            display: 'inline-block',
+            padding: '2px 9px',
+            borderRadius: 10,
+            fontSize: 11,
+            fontWeight: 600,
+            background: c.bg,
+            color: c.fg,
+        }, children: children }));
+}
+// ─── Input ─────────────────────────────────────────────────────
+export function Input({ style, ...rest }) {
+    return (_jsx("input", { ...rest, style: {
+            fontSize: 13,
+            padding: '8px 12px',
+            borderRadius: 7,
+            border: `1px solid ${T.border}`,
+            background: T.surface,
+            color: T.text,
+            width: '100%',
+            boxSizing: 'border-box',
+            fontFamily: 'inherit',
+            outline: 'none',
+            transition: 'border-color 0.15s',
+            ...style,
+        } }));
+}
+// ─── Select ────────────────────────────────────────────────────
+export function Select({ style, children, ...rest }) {
+    return (_jsx("select", { ...rest, style: {
+            fontSize: 13,
+            padding: '8px 12px',
+            borderRadius: 7,
+            border: `1px solid ${T.border}`,
+            background: T.surface,
+            color: T.text,
+            cursor: 'pointer',
+            fontFamily: 'inherit',
+            outline: 'none',
+            ...style,
+        }, children: children }));
+}
+// ─── Textarea ──────────────────────────────────────────────────
+export function Textarea({ style, ...rest }) {
+    return (_jsx("textarea", { ...rest, style: {
+            fontSize: 13,
+            padding: '8px 12px',
+            borderRadius: 7,
+            border: `1px solid ${T.border}`,
+            background: T.surface,
+            color: T.text,
+            width: '100%',
+            boxSizing: 'border-box',
+            fontFamily: 'inherit',
+            outline: 'none',
+            resize: 'vertical',
+            lineHeight: 1.5,
+            ...style,
+        } }));
+}
+const ToastContext = createContext(() => { });
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const show = 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 (_jsxs(ToastContext.Provider, { value: show, children: [children, toasts.length > 0 && (_jsx("div", { style: {
+                    position: 'fixed',
+                    bottom: 24,
+                    right: 24,
+                    zIndex: 2000,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8,
+                }, children: toasts.map((t) => (_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))) }))] }));
+}
+export function useToast() {
+    return useContext(ToastContext);
+}
+// ─── Spinner ───────────────────────────────────────────────────
+export function Spinner({ size = 16 }) {
+    ensureStyles();
+    return (_jsx("span", { className: "dsh-spin", style: {
+            display: 'inline-block',
+            width: size,
+            height: size,
+            border: `2px solid ${T.border}`,
+            borderTopColor: T.accent,
+            borderRadius: '50%',
+        } }));
+}
+// ─── EmptyState ────────────────────────────────────────────────
+export function EmptyState({ icon, message, }) {
+    return (_jsxs("div", { style: {
+            textAlign: 'center',
+            padding: '36px 16px',
+            color: T.muted,
+        }, children: [icon !== undefined && (_jsx("div", { style: { fontSize: 36, marginBottom: 10, opacity: 0.4 }, children: icon })), _jsx("div", { style: { fontSize: 13 }, children: message })] }));
+}
+// ─── SectionTitle ──────────────────────────────────────────────
+export function SectionTitle({ icon, children, actions, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginTop: 6,
+            marginBottom: 8,
+        }, children: [_jsxs("span", { style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                }, children: [icon !== undefined && _jsx("span", { children: icon }), children] }), actions] }));
+}
+// ─── Table helpers ─────────────────────────────────────────────
+export const 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' },
+};
+// ─── CodeBlock ─────────────────────────────────────────────────
+export function CodeBlock({ children, maxHeight = 200, style, }) {
+    return (_jsx("pre", { style: {
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontSize: 12,
+            maxHeight,
+            overflow: 'auto',
+            padding: 10,
+            borderRadius: 7,
+            background: 'rgba(128,128,128,0.06)',
+            border: `1px solid ${T.border}`,
+            margin: 0,
+            ...style,
+        }, children: children }));
+}
+// ─── ProgressBar ───────────────────────────────────────────────
+export function ProgressBar({ pct, color, height = 18, }) {
+    return (_jsx("div", { style: {
+            width: '100%',
+            height,
+            background: 'rgba(128,128,128,0.12)',
+            borderRadius: 5,
+            overflow: 'hidden',
+            position: 'relative',
+        }, children: _jsx("div", { style: {
+                width: `${Math.min(pct, 100)}%`,
+                height: '100%',
+                background: color ?? T.accent,
+                borderRadius: 5,
+                transition: 'width 0.3s ease',
+            } }) }));
+}
+// ─── Field label ───────────────────────────────────────────────
+export function Field({ label, children, hint, }) {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("label", { style: { fontSize: 12, fontWeight: 600, color: T.text }, children: label }), children, hint !== undefined && (_jsx("span", { style: { fontSize: 11, color: T.muted }, children: hint }))] }));
+}
+// ─── usePanel hook (shared fetch logic) ────────────────────────
+export function usePanel(path) {
+    const [payload, setPayload] = useState(null);
+    const [error, setError] = useState(null);
+    const [tick, setTick] = useState(0);
+    const reload = useCallback(() => setTick((v) => v + 1), []);
+    useEffect(() => {
+        const c = new AbortController();
+        setError(null);
+        fetch(path, { signal: c.signal })
+            .then(async (r) => {
+            if (!r.ok)
+                throw new Error(String(r.status));
+            return r.json();
+        })
+            .then((p) => {
+            if (!c.signal.aborted)
+                setPayload(p);
+        })
+            .catch((e) => {
+            if (!c.signal.aborted)
+                setPayload(null), setError(e instanceof Error ? e.message : String(e));
+        });
+        return () => c.abort();
+    }, [tick, path]);
+    return useMemo(() => ({ payload, error, reload }), [payload, error, reload]);
+}

package/lib/client/view.d.ts

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

package/lib/client/view.js

@@ -1,117 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Pure rendering half of the modelArena page.
- *
- * Separate from `index.tsx` so a static render can assert in Node what the page draws —
- * the shipped bundle is a loader factory only a browser can run. Every user-visible
- * string comes from the `t` seat the renderer binds from this plugin's namespace, so the
- * page follows the UI language; no copy is hardcoded here.
- *
+ * Pure rendering half of the modelArena page. Uses shared UI kit.
  * @module client/view
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
+import { Badge, Button, Card, ConfirmDialog, EmptyState, Modal, SectionTitle, Spinner, StatCard, ToastProvider, tableStyles, usePanel, useToast, } from './ui.js';
 const PANEL_PATH = '/api/arena.panel';
 const RUN_PATH = '/api/arena.run';
 const RATE_PATH = '/api/arena.rate';
 const DELETE_PATH = '/api/arena.delete';
-// --- Styles ---
-const wrap = { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 820, fontFamily: 'inherit' };
-const head = { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' };
-const section = { marginTop: 8 };
-const sectionTitle = { fontSize: 13, fontWeight: 600, marginBottom: 6 };
-const muted = { fontSize: 12, opacity: 0.75 };
-const table = { borderCollapse: 'collapse', width: '100%' };
-const th = { textAlign: 'left', padding: '4px 10px 4px 0', fontWeight: 600, fontSize: 12, opacity: 0.8, borderBottom: '0.5px solid rgba(128,128,128,0.4)' };
-const td = { padding: '6px 10px 6px 0', fontSize: 13, borderBottom: '0.5px solid rgba(128,128,128,0.18)' };
-const card = { padding: '8px 12px', borderRadius: 6, border: '1px solid rgba(128,128,128,0.2)', background: 'rgba(128,128,128,0.04)', fontSize: 13 };
-const badge = { display: 'inline-block', padding: '1px 6px', borderRadius: 9, fontSize: 11, fontWeight: 600 };
-const statRow = { display: 'flex', gap: 16, flexWrap: 'wrap' };
-const statBox = { ...card, flex: 1, minWidth: 100, textAlign: 'center' };
-const starBtn = { cursor: 'pointer', background: 'none', border: 'none', fontSize: 16, padding: '0 1px' };
-const clickRow = { cursor: 'pointer' };
-const preBlock = { whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, maxHeight: 200, overflow: 'auto', padding: 8, borderRadius: 4, background: 'rgba(128,128,128,0.06)', border: '1px solid rgba(128,128,128,0.15)' };
-const dangerBtn = { fontSize: 11, color: '#e55', background: 'none', border: '1px solid #e55', borderRadius: 4, padding: '2px 8px', cursor: 'pointer' };
-export function usePanel() {
-    const [state, setState] = useState({ payload: null, error: null });
-    const [tick, setTick] = useState(0);
-    const reload = useCallback(() => setTick((v) => v + 1), []);
-    useEffect(() => {
-        const c = new AbortController();
-        setState((p) => ({ ...p, error: null }));
-        fetch(PANEL_PATH, { signal: c.signal })
-            .then(async (r) => {
-            if (!r.ok)
-                throw new Error(String(r.status));
-            return r.json();
-        })
-            .then((payload) => { if (!c.signal.aborted)
-            setState({ payload, error: null }); })
-            .catch((e) => { if (!c.signal.aborted)
-            setState({ payload: null, error: e instanceof Error ? e.message : String(e) }); });
-        return () => c.abort();
-    }, [tick]);
-    return { ...state, reload };
-}
-// --- Stars ---
 function Stars({ rating, onRate }) {
-    return (_jsx("span", { children: [1, 2, 3, 4, 5].map((n) => (_jsx("button", { type: "button", style: starBtn, onClick: () => onRate(n), title: `${n}/5`, children: n <= rating ? '★' : '☆' }, n))) }));
-}
-// --- Leaderboard ---
-function Leaderboard({ entries, t }) {
-    if (entries.length === 0)
-        return null;
-    return (_jsxs("div", { style: section, children: [_jsxs("div", { style: sectionTitle, children: ["\uD83C\uDFC6 ", t('leaderboard')] }), _jsxs("table", { style: table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: th, children: "#" }), _jsx("th", { style: th, children: t('model') }), _jsx("th", { style: th, children: "Elo" }), _jsx("th", { style: th, children: t('wins') }), _jsx("th", { style: th, children: t('avgRating') }), _jsx("th", { style: th, children: t('runs') })] }) }), _jsx("tbody", { children: entries.map((e, i) => (_jsxs("tr", { children: [_jsx("td", { style: td, children: i + 1 }), _jsx("td", { style: td, children: _jsx("strong", { children: e.model }) }), _jsx("td", { style: td, children: e.elo }), _jsx("td", { style: td, children: e.wins }), _jsx("td", { style: td, children: e.avgRating > 0 ? e.avgRating.toFixed(1) : '—' }), _jsx("td", { style: td, children: e.totalRuns })] }, e.model))) })] })] }));
+    return (_jsx("span", { style: { display: 'inline-flex', gap: 1 }, children: [1, 2, 3, 4, 5].map((n) => (_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))) }));
 }
-// --- 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 }) {
+function RunModal({ runId, t, onClose, onDeleted }) {
+    const toast = useToast();
     const [run, setRun] = useState(null);
     const [loading, setLoading] = useState(true);
-    useEffect(() => {
+    const [confirmDel, setConfirmDel] = useState(false);
+    useCallback(() => {
         setLoading(true);
-        fetch(`${RUN_PATH}?id=${runId}`)
-            .then((r) => r.json())
-            .then(setRun)
-            .catch(() => setRun(null))
-            .finally(() => setLoading(false));
-    }, [runId]);
+        fetch(`${RUN_PATH}?id=${runId}`).then(async (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(() => { });
+        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 = 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))) })] }));
+    const handleDelete = 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 (_jsxs(Modal, { title: `${t('run')} ${runId.slice(0, 8)}…`, onClose: onClose, width: 720, footer: _jsxs(Button, { variant: "danger", size: "sm", onClick: () => setConfirmDel(true), children: ["\uD83D\uDDD1 ", t('delete')] }), children: [loading ? _jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: 20 }, children: _jsx(Spinner, { size: 24 }) })
+                : run === null ? _jsx(EmptyState, { message: t('notFound') })
+                    : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsx(Card, { title: t('prompt'), children: _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, margin: 0 }, children: run.prompt }) }), run.reference && _jsx(Card, { title: t('reference'), children: _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 12, margin: 0 }, children: run.reference }) }), run.results.map((r) => (_jsxs(Card, { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("strong", { style: { fontSize: 13 }, children: r.model }), r.error ? _jsx(Badge, { color: "error", children: t('error') }) : _jsxs(Badge, { color: "success", children: [r.latencyMs, "ms"] })] }), _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 }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }, children: [_jsxs("span", { style: { fontSize: 11, opacity: 0.6 }, children: [r.promptTokens + r.completionTokens, " tokens"] }), _jsx(Stars, { rating: r.rating ?? 0, onRate: (n) => handleRate(r.model, n) })] })] }, r.model)))] })), confirmDel && _jsx(ConfirmDialog, { title: t('delete'), message: t('confirmDelete'), confirmLabel: t('delete'), danger: true, onConfirm: handleDelete, onClose: () => setConfirmDel(false) })] }));
 }
-// --- Main Panel ---
-export function ArenaPanel({ t }) {
-    const { payload, error, reload } = usePanel();
-    const [expandedRun, setExpandedRun] = useState(null);
-    const header = (_jsxs("header", { style: head, children: [_jsxs("strong", { style: { fontSize: 14 }, children: ["\u2694\uFE0F ", t('title')] }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", onClick: reload, style: { fontSize: 12 }, children: t('refresh') })] }));
-    if (error !== null) {
-        return (_jsxs("div", { style: wrap, children: [header, _jsxs("p", { role: "alert", style: { margin: 0, fontSize: 13 }, children: [t('failed'), ": ", error] }), _jsx("button", { type: "button", onClick: reload, style: { alignSelf: 'flex-start', fontSize: 12 }, children: t('retry') })] }));
-    }
+function ArenaPanelInner({ t }) {
+    const { payload, error, reload } = usePanel(PANEL_PATH);
+    const [runModal, setRunModal] = useState(null);
+    const header = (_jsxs("header", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }, children: [_jsxs("strong", { style: { fontSize: 15 }, children: ["\u2694\uFE0F ", t('title')] }), _jsx("span", { style: { flex: 1 } }), _jsx(Button, { variant: "secondary", size: "sm", onClick: reload, children: t('refresh') })] }));
+    if (error !== null)
+        return _jsxs("div", { style: { maxWidth: 820 }, children: [header, _jsx(Card, { children: _jsxs("p", { role: "alert", style: { margin: 0, fontSize: 13, color: 'var(--error, #e53935)' }, children: [t('failed'), ": ", error] }) })] });
     if (payload === null)
-        return _jsx("p", { style: muted, "aria-live": "polite", children: t('loading') });
-    return (_jsxs("div", { style: wrap, children: [header, _jsx(StatsSummary, { stats: payload.stats, t: t }), _jsx(Leaderboard, { entries: payload.leaderboard, t: t }), _jsxs("div", { style: section, children: [_jsxs("div", { style: sectionTitle, children: ["\uD83D\uDCCB ", t('recentRuns')] }), payload.recentRuns.length === 0 ? (_jsx("p", { style: { margin: 0, fontSize: 13, opacity: 0.8 }, children: t('empty') })) : (_jsxs("table", { style: table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: th, children: t('run') }), _jsx("th", { style: th, children: t('models') }), _jsx("th", { style: th, children: t('winner') }), _jsx("th", { style: th, children: t('date') })] }) }), _jsx("tbody", { children: payload.recentRuns.map((row) => (_jsxs(_Fragment, { children: [_jsxs("tr", { style: clickRow, onClick: () => setExpandedRun(expandedRun === row.id ? null : row.id), children: [_jsxs("td", { style: td, children: [_jsx("code", { style: { fontSize: 11 }, children: row.id }), _jsx("span", { style: { marginLeft: 6, fontSize: 10 }, children: expandedRun === row.id ? '▼' : '▶' })] }), _jsx("td", { style: td, children: row.modelCount }), _jsx("td", { style: td, children: row.winner ?? '—' }), _jsx("td", { style: td, children: new Date(row.timestamp).toLocaleString() })] }, row.id), expandedRun === row.id && (_jsx("tr", { children: _jsx("td", { colSpan: 4, style: { padding: '4px 0' }, children: _jsx(RunDetail, { runId: row.id, t: t, onDelete: () => { setExpandedRun(null); reload(); } }) }) }, `${row.id}-detail`))] }))) })] }))] })] }));
+        return _jsxs("div", { style: { maxWidth: 820 }, children: [header, _jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: 40 }, children: _jsx(Spinner, { size: 28 }) })] });
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 820 }, children: [header, _jsxs("div", { style: { display: 'flex', gap: 10, flexWrap: 'wrap' }, children: [_jsx(StatCard, { value: payload.stats.totalRuns, label: t('totalRuns') }), _jsx(StatCard, { value: payload.stats.uniqueModels, label: t('uniqueModels') }), _jsx(StatCard, { value: payload.stats.totalRatings, label: t('totalRatings') })] }), payload.leaderboard.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { icon: "\uD83C\uDFC6", children: t('leaderboard') }), _jsx(Card, { padding: 0, children: _jsxs("table", { style: tableStyles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: tableStyles.th, children: "#" }), _jsx("th", { style: tableStyles.th, children: t('model') }), _jsx("th", { style: tableStyles.th, children: "Elo" }), _jsx("th", { style: tableStyles.th, children: t('wins') }), _jsx("th", { style: tableStyles.th, children: t('avgRating') }), _jsx("th", { style: tableStyles.th, children: t('runs') })] }) }), _jsx("tbody", { children: payload.leaderboard.map((e, i) => (_jsxs("tr", { children: [_jsx("td", { style: tableStyles.td, children: i + 1 }), _jsx("td", { style: tableStyles.td, children: _jsx("strong", { children: e.model }) }), _jsx("td", { style: tableStyles.td, children: e.elo }), _jsx("td", { style: tableStyles.td, children: e.wins }), _jsx("td", { style: tableStyles.td, children: e.avgRating > 0 ? e.avgRating.toFixed(1) : '—' }), _jsx("td", { style: tableStyles.td, children: e.totalRuns })] }, e.model))) })] }) })] })), _jsx(SectionTitle, { icon: "\uD83D\uDCCB", children: t('recentRuns') }), payload.recentRuns.length === 0 ? _jsx(EmptyState, { icon: "\uD83D\uDCED", message: t('empty') }) : (_jsx(Card, { padding: 0, children: _jsxs("table", { style: tableStyles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: tableStyles.th, children: t('run') }), _jsx("th", { style: tableStyles.th, children: t('models') }), _jsx("th", { style: tableStyles.th, children: t('winner') }), _jsx("th", { style: tableStyles.th, children: t('date') })] }) }), _jsx("tbody", { children: payload.recentRuns.map((row) => (_jsxs("tr", { style: tableStyles.clickRow, onClick: () => setRunModal(row.id), children: [_jsx("td", { style: tableStyles.td, children: _jsx("code", { style: { fontSize: 11 }, children: row.id.slice(0, 8) }) }), _jsx("td", { style: tableStyles.td, children: row.modelCount }), _jsx("td", { style: tableStyles.td, children: row.winner ?? '—' }), _jsx("td", { style: tableStyles.td, children: new Date(row.timestamp).toLocaleString() })] }, row.id))) })] }) })), runModal !== null && _jsx(RunModal, { runId: runModal, t: t, onClose: () => setRunModal(null), onDeleted: reload })] }));
+}
+export function ArenaPanel({ t }) {
+    return _jsx(ToastProvider, { children: _jsx(ArenaPanelInner, { t: t }) });
 }

package/package.json

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