dsh-model-arena 0.2.0 → 0.2.1

package/lib/arena.web.js

@@ -26,65 +26,117 @@ __export(index_exports, {
   inject: () => inject
 });
 module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
 
-// src/client/view.tsx
-function renderPanel(payload) {
-  const runRows = payload.recentRuns.map((r) => `<tr><td>${r.id}</td><td>${r.modelCount}</td><td>${new Date(r.timestamp).toLocaleString()}</td><td>${r.prompt.slice(0, 60)}...</td></tr>`).join("");
-  return `<div class="arena-panel">
-    <h2>Model Arena</h2>
-    ${runRows ? `<table class="arena-table"><thead><tr><th>Run</th><th>Models</th><th>Date</th><th>Prompt</th></tr></thead><tbody>${runRows}</tbody></table>` : "<p>No runs yet.</p>"}
-  </div>`;
-}
+// src/client/locales.ts
+var NS = "modelArena";
+var zh = {
+  "nav": "\u6A21\u578B\u7ADE\u6280\u573A",
+  "title": "\u6A21\u578B\u7ADE\u6280\u573A",
+  "run": "\u8FD0\u884C",
+  "models": "\u6A21\u578B\u6570",
+  "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"
+};
+var en = {
+  "nav": "Model Arena",
+  "title": "Model Arena",
+  "run": "Run",
+  "models": "Models",
+  "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"
+};
 
-// src/client/index.tsx
+// 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 head = { display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" };
+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)" };
 function usePanel() {
-  const [html, setHtml] = (0, import_react.useState)(null);
-  const [error, setError] = (0, import_react.useState)(null);
+  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((t) => t + 1), []);
+  const reload = (0, import_react.useCallback)(() => setTick((value) => value + 1), []);
   (0, import_react.useEffect)(() => {
     const controller = new AbortController();
-    setError(null);
+    setState((previous) => ({ ...previous, error: null }));
     fetch(PANEL_PATH, { signal: controller.signal }).then(async (response) => {
-      if (!response.ok) throw new Error(`panel request failed with ${response.status}`);
+      if (!response.ok) throw new Error(String(response.status));
       return response.json();
     }).then((payload) => {
-      if (!controller.signal.aborted) setHtml(renderPanel(payload));
+      if (!controller.signal.aborted) setState({ payload, error: null });
     }).catch((cause) => {
       if (controller.signal.aborted) return;
-      setError(cause instanceof Error ? cause.message : String(cause));
+      setState({ payload: null, error: cause instanceof Error ? cause.message : String(cause) });
     });
     return () => controller.abort();
   }, [tick]);
-  return { html, error, reload };
+  return { ...state, reload };
 }
-function ModelArenaPage() {
-  const { html, error, reload } = usePanel();
+function ArenaPanel({ t }) {
+  const { payload, error, reload } = usePanel();
+  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.jsx)("span", { style: { flex: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: reload, style: { fontSize: 12 }, children: t("refresh") })
+  ] });
   if (error !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "alert", children: [
-        "Model Arena panel failed to load: ",
+    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, children: "Retry" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: reload, style: { alignSelf: "flex-start", fontSize: 12 }, children: t("retry") })
     ] });
   }
-  if (html === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { "aria-live": "polite", children: "Loading the Model Arena panel\u2026" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: html } });
+  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)) })
+    ] })
+  ] });
 }
-var inject = ["slots"];
+
+// src/client/index.tsx
+var inject = ["slots", "locale"];
 function apply(ctx) {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-model-arena: dictionaries");
   ctx.slots.inject("settings.section", () => ctx.slots.register(
     {
       name: "settings.section",
       id: "model-arena",
       order: 42,
-      label: () => "Model Arena"
+      label: () => ctx.locale.bind(NS)("nav"),
+      locale: NS
     },
-    ModelArenaPage
+    ArenaPanel
   ));
 }
 return module.exports; } });

package/lib/arena.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/client/index.tsx", "../src/client/view.tsx"],
-  "sourcesContent": ["/**\n * Browser half of dsh-model-arena: the Model Arena page inside Settings.\n *\n * Services are named by their runtime identity, not by the package that provides them:\n * the settings shell is the `slots` service and the host bridge is `connection`. A\n * fiber that injects package names never resolves and the plugin stays pending, which\n * the loader reports as \"did not activate\".\n *\n * @module client\n */\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { ComponentType } from 'react'\nimport type { PanelPayload } from '../types.js'\nimport { renderPanel } from './view.js'\n\n/** Path the host half registers on the web connection. */\nconst PANEL_PATH = '/api/arena.panel'\n\ninterface SlotsService {\n  inject(name: string, register: () => void): void\n  register(options: { name: string; id: string; order: number; label: () => string }, component: ComponentType): unknown\n}\n\n/** Fetch the panel payload; `reload` re-runs the request. */\nfunction usePanel() {\n  const [html, setHtml] = useState<string | null>(null)\n  const [error, setError] = useState<string | null>(null)\n  const [tick, setTick] = useState(0)\n  const reload = useCallback(() => setTick((t) => t + 1), [])\n\n  useEffect(() => {\n    const controller = new AbortController()\n    setError(null)\n    fetch(PANEL_PATH, { signal: controller.signal })\n      .then(async (response) => {\n        if (!response.ok) throw new Error(`panel request failed with ${response.status}`)\n        return response.json() as Promise<PanelPayload>\n      })\n      .then((payload) => {\n        if (!controller.signal.aborted) setHtml(renderPanel(payload))\n      })\n      .catch((cause: unknown) => {\n        if (controller.signal.aborted) return\n        // Say what failed rather than rendering an empty panel, which would read as\n        // \"nothing recorded\" \u2014 a different and wrong answer.\n        setError(cause instanceof Error ? cause.message : String(cause))\n      })\n    return () => controller.abort()\n  }, [tick])\n\n  return { html, error, reload }\n}\n\nfunction ModelArenaPage() {\n  const { html, error, reload } = usePanel()\n  if (error !== null) {\n    return (\n      <section>\n        <p role=\"alert\">Model Arena panel failed to load: {error}</p>\n        <button type=\"button\" onClick={reload}>Retry</button>\n      </section>\n    )\n  }\n  if (html === null) return <p aria-live=\"polite\">Loading the Model Arena panel\u2026</p>\n  // The markup is produced by `renderPanel`, which escapes every interpolated value.\n  return <div dangerouslySetInnerHTML={{ __html: html }} />\n}\n\n/** The slots service is what the settings shell exposes. */\nexport const inject = ['slots']\n\nexport function apply(ctx: { slots: SlotsService }): void {\n  ctx.slots.inject('settings.section', () => ctx.slots.register(\n    {\n      name: 'settings.section',\n      id: 'model-arena',\n      order: 42,\n      label: () => 'Model Arena',\n    },\n    ModelArenaPage,\n  ))\n}\n", "import type { PanelPayload } from '../types.js';\n\nexport function renderPanel(payload: PanelPayload): string {\n  const runRows = payload.recentRuns\n    .map((r) => `<tr><td>${r.id}</td><td>${r.modelCount}</td><td>${new Date(r.timestamp).toLocaleString()}</td><td>${r.prompt.slice(0, 60)}...</td></tr>`)\n    .join('');\n\n  return `<div class=\"arena-panel\">\n    <h2>Model Arena</h2>\n    ${runRows ? `<table class=\"arena-table\"><thead><tr><th>Run</th><th>Models</th><th>Date</th><th>Prompt</th></tr></thead><tbody>${runRows}</tbody></table>` : '<p>No runs yet.</p>'}\n  </div>`;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA,mBAAiD;;;ACT1C,SAAS,YAAY,SAA+B;AACzD,QAAM,UAAU,QAAQ,WACrB,IAAI,CAAC,MAAM,WAAW,EAAE,EAAE,YAAY,EAAE,UAAU,YAAY,IAAI,KAAK,EAAE,SAAS,EAAE,eAAe,CAAC,YAAY,EAAE,OAAO,MAAM,GAAG,EAAE,CAAC,eAAe,EACpJ,KAAK,EAAE;AAEV,SAAO;AAAA;AAAA,MAEH,UAAU,oHAAoH,OAAO,qBAAqB,qBAAqB;AAAA;AAErL;;;ADgDQ;AA1CR,IAAM,aAAa;AAQnB,SAAS,WAAW;AAClB,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAwB,IAAI;AACpD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AACtD,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,QAAM,aAAS,0BAAY,MAAM,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE1D,8BAAU,MAAM;AACd,UAAM,aAAa,IAAI,gBAAgB;AACvC,aAAS,IAAI;AACb,UAAM,YAAY,EAAE,QAAQ,WAAW,OAAO,CAAC,EAC5C,KAAK,OAAO,aAAa;AACxB,UAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,6BAA6B,SAAS,MAAM,EAAE;AAChF,aAAO,SAAS,KAAK;AAAA,IACvB,CAAC,EACA,KAAK,CAAC,YAAY;AACjB,UAAI,CAAC,WAAW,OAAO,QAAS,SAAQ,YAAY,OAAO,CAAC;AAAA,IAC9D,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,UAAI,WAAW,OAAO,QAAS;AAG/B,eAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,CAAC;AAAA,IACjE,CAAC;AACH,WAAO,MAAM,WAAW,MAAM;AAAA,EAChC,GAAG,CAAC,IAAI,CAAC;AAET,SAAO,EAAE,MAAM,OAAO,OAAO;AAC/B;AAEA,SAAS,iBAAiB;AACxB,QAAM,EAAE,MAAM,OAAO,OAAO,IAAI,SAAS;AACzC,MAAI,UAAU,MAAM;AAClB,WACE,6CAAC,aACC;AAAA,mDAAC,OAAE,MAAK,SAAQ;AAAA;AAAA,QAAmC;AAAA,SAAM;AAAA,MACzD,4CAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,mBAAK;AAAA,OAC9C;AAAA,EAEJ;AACA,MAAI,SAAS,KAAM,QAAO,4CAAC,OAAE,aAAU,UAAS,iDAA8B;AAE9E,SAAO,4CAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AACzD;AAGO,IAAM,SAAS,CAAC,OAAO;AAEvB,SAAS,MAAM,KAAoC;AACxD,MAAI,MAAM,OAAO,oBAAoB,MAAM,IAAI,MAAM;AAAA,IACnD;AAAA,MACE,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO,MAAM;AAAA,IACf;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "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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",
   "names": []
 }

package/lib/client/index.d.ts

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

package/lib/client/index.js

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

package/lib/client/locales.d.ts

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

package/lib/client/locales.js

@@ -0,0 +1,39 @@
+/**
+ * Dictionaries for the Model Arena page.
+ *
+ * `zh` is the key-set source of truth, as in the official client plugins, and `en` is
+ * typed against it: a key translated in one language but not the other fails the build
+ * instead of silently rendering the raw key.
+ *
+ * @module client/locales
+ */
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'modelArena';
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export const zh = {
+    'nav': '模型竞技场',
+    'title': '模型竞技场',
+    'run': '运行',
+    'models': '模型数',
+    'date': '时间',
+    'prompt': '提示词',
+    'empty': '还没有运行记录。用同一个提示词跑多个模型后，结果会显示在这里。',
+    'refresh': '刷新',
+    'loading': '正在加载…',
+    'failed': '加载失败',
+    'retry': '重试',
+};
+/** English dictionary, checked complete against the zh key set. */
+export const en = {
+    'nav': 'Model Arena',
+    'title': 'Model Arena',
+    'run': 'Run',
+    'models': 'Models',
+    'date': 'Date',
+    'prompt': 'Prompt',
+    'empty': 'No runs yet. Run one prompt through several models and the comparison appears here.',
+    'refresh': 'Refresh',
+    'loading': 'Loading…',
+    'failed': 'Failed to load',
+    'retry': 'Retry',
+};

package/lib/client/view.d.ts

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

package/lib/client/view.js

@@ -1,9 +1,57 @@
-export function renderPanel(payload) {
-    const runRows = payload.recentRuns
-        .map((r) => `<tr><td>${r.id}</td><td>${r.modelCount}</td><td>${new Date(r.timestamp).toLocaleString()}</td><td>${r.prompt.slice(0, 60)}...</td></tr>`)
-        .join('');
-    return `<div class="arena-panel">
-    <h2>Model Arena</h2>
-    ${runRows ? `<table class="arena-table"><thead><tr><th>Run</th><th>Models</th><th>Date</th><th>Prompt</th></tr></thead><tbody>${runRows}</tbody></table>` : '<p>No runs yet.</p>'}
-  </div>`;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pure rendering half of the modelArena page.
+ *
+ * Separate from `index.tsx` so a static render can assert in Node what the page draws —
+ * the shipped bundle is a loader factory only a browser can run. Every user-visible
+ * string comes from the `t` seat the renderer binds from this plugin's namespace, so the
+ * page follows the UI language; no copy is hardcoded here.
+ *
+ * @module client/view
+ */
+import { useCallback, useEffect, useState } from 'react';
+/** 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 head = { display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' };
+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. */
+export function usePanel() {
+    const [state, setState] = useState({ payload: null, error: null });
+    const [tick, setTick] = useState(0);
+    const reload = useCallback(() => setTick((value) => value + 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();
+        })
+            .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();
+    }, [tick]);
+    return { ...state, reload };
+}
+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') })] }));
+    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))) })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-arena",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Run the same prompt through every model you have, and see the difference without squinting.",
   "type": "module",
   "main": "lib/index.js",
@@ -41,8 +41,9 @@
     "client": {
       "platform": "web",
       "inject": [
-        "slots",
-        "connection"
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-settings"
       ]
     }
   },