dsh-model-arena 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.2.0
+
+Ecosystem sync: every plugin in this suite shares one version, so a version number
+identifies a set that was tested together rather than one plugin's own history.
+
+- Fix the Model Arena panel rendering "Cannot read properties of undefined": the host
+  route returned the bare run list while the view reads `payload.recentRuns`.
+- The client `inject` field now names services (`slots`, `connection`) instead of the
+  packages that provide them.
+- README badges cover version, downloads, CI, license, Node requirement, stars, and the
+  dsh plugin topic.
+
+## 0.1.4
+
+- **Fix the client half never activating.** The browser half declared package names
+  (`@deepseek-ai/dsh-client-ui-settings`) as cordis services, but services are named by
+  their runtime identity — the settings shell is `slots`, the host bridge is
+  `connection`. The fiber therefore never resolved and the plugin stayed pending, which
+  the loader reported as "did not activate". It now injects `slots` and registers into
+  the `settings.section` slot the way the official client artifacts do.
+
 ## 0.1.3
 
 - **Fix the browser half never registering.** The client bundle was emitted as plain ESM

package/README.md

@@ -1,6 +1,12 @@
 # dsh-model-arena
 
-[![npm version](https://img.shields.io/npm/v/dsh-model-arena)](https://www.npmjs.com/package/dsh-model-arena) [![CI](https://github.com/hj01857655/dsh-model-arena/actions/workflows/ci.yml/badge.svg)](https://github.com/hj01857655/dsh-model-arena/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/dsh-model-arena?color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/dsh-model-arena)
+[![npm downloads](https://img.shields.io/npm/dm/dsh-model-arena?color=cb3837)](https://www.npmjs.com/package/dsh-model-arena)
+[![CI](https://github.com/hj01857655/dsh-model-arena/actions/workflows/ci.yml/badge.svg)](https://github.com/hj01857655/dsh-model-arena/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/dsh-model-arena?color=blue)](LICENSE)
+[![node](https://img.shields.io/node/v/dsh-model-arena?color=339933&logo=node.js&logoColor=white)](package.json)
+[![GitHub stars](https://img.shields.io/github/stars/hj01857655/dsh-model-arena?color=yellow)](https://github.com/hj01857655/dsh-model-arena/stargazers)
+[![dsh plugin](https://img.shields.io/badge/dsh-plugin-4B8BBE)](https://github.com/topics/dsh-plugin)
 
 Run the same prompt through every model you have, and see the difference without squinting.
 

package/lib/arena.web.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   inject: () => inject
 });
 module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
 
 // src/client/view.tsx
 function renderPanel(payload) {
@@ -37,20 +38,54 @@ function renderPanel(payload) {
 }
 
 // src/client/index.tsx
-var inject = ["@deepseek-ai/dsh-client-ui-settings", "@deepseek-ai/dsh-client-connection"];
-function apply(ctx) {
-  ctx.inject(inject, (settings, connection) => {
-    const s = settings;
-    const c = connection;
-    s.section("arena", {
-      title: "Model Arena",
-      render: async () => {
-        const res = await c.fetch("/api/arena.panel");
-        const payload = await res.json();
-        return renderPanel(payload);
-      }
+var import_jsx_runtime = require("react/jsx-runtime");
+var PANEL_PATH = "/api/arena.panel";
+function usePanel() {
+  const [html, setHtml] = (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((t) => t + 1), []);
+  (0, import_react.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;
+      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 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "alert", children: [
+        "Model Arena panel failed to load: ",
+        error
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: reload, children: "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 } });
+}
+var inject = ["slots"];
+function apply(ctx) {
+  ctx.slots.inject("settings.section", () => ctx.slots.register(
+    {
+      name: "settings.section",
+      id: "model-arena",
+      order: 42,
+      label: () => "Model Arena"
+    },
+    ModelArenaPage
+  ));
 }
 return module.exports; } });
 //# sourceMappingURL=arena.web.js.map

package/lib/arena.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/client/index.tsx", "../src/client/view.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\nimport type { PanelPayload } from '../types.js';\nimport { renderPanel } from './view.js';\n\nexport const inject = ['@deepseek-ai/dsh-client-ui-settings', '@deepseek-ai/dsh-client-connection'];\n\nexport function apply(ctx: {\n  inject: (deps: string[], fn: (...services: unknown[]) => void) => void;\n}): void {\n  ctx.inject(inject, (settings: unknown, connection: unknown) => {\n    const s = settings as { section: (id: string, opts: { title: string; render: () => Promise<string> | string }) => void };\n    const c = connection as { fetch: (path: string) => Promise<Response> };\n\n    s.section('arena', {\n      title: 'Model Arena',\n      render: async () => {\n        const res = await c.fetch('/api/arena.panel');\n        const payload: PanelPayload = await res.json();\n        return renderPanel(payload);\n      },\n    });\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;;;ACEO,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;;;ADPO,IAAM,SAAS,CAAC,uCAAuC,oCAAoC;AAE3F,SAAS,MAAM,KAEb;AACP,MAAI,OAAO,QAAQ,CAAC,UAAmB,eAAwB;AAC7D,UAAM,IAAI;AACV,UAAM,IAAI;AAEV,MAAE,QAAQ,SAAS;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ,YAAY;AAClB,cAAM,MAAM,MAAM,EAAE,MAAM,kBAAkB;AAC5C,cAAM,UAAwB,MAAM,IAAI,KAAK;AAC7C,eAAO,YAAY,OAAO;AAAA,MAC5B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;",
+  "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;",
   "names": []
 }

package/lib/client/index.d.ts

@@ -1,4 +1,26 @@
+/**
+ * Browser half of dsh-model-arena: the Model Arena 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".
+ *
+ * @module client
+ */
+import type { ComponentType } from 'react';
+interface SlotsService {
+    inject(name: string, register: () => void): void;
+    register(options: {
+        name: string;
+        id: string;
+        order: number;
+        label: () => string;
+    }, component: ComponentType): unknown;
+}
+/** The slots service is what the settings shell exposes. */
 export declare const inject: string[];
 export declare function apply(ctx: {
-    inject: (deps: string[], fn: (...services: unknown[]) => void) => void;
+    slots: SlotsService;
 }): void;
+export {};

package/lib/client/index.js

@@ -1,16 +1,65 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Browser half of dsh-model-arena: the Model Arena 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".
+ *
+ * @module client
+ */
+import { useCallback, useEffect, useState } from 'react';
 import { renderPanel } from './view.js';
-export const inject = ['@deepseek-ai/dsh-client-ui-settings', '@deepseek-ai/dsh-client-connection'];
-export function apply(ctx) {
-    ctx.inject(inject, (settings, connection) => {
-        const s = settings;
-        const c = connection;
-        s.section('arena', {
-            title: 'Model Arena',
-            render: async () => {
-                const res = await c.fetch('/api/arena.panel');
-                const payload = await res.json();
-                return renderPanel(payload);
-            },
+/** 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'];
+export function apply(ctx) {
+    ctx.slots.inject('settings.section', () => ctx.slots.register({
+        name: 'settings.section',
+        id: 'model-arena',
+        order: 42,
+        label: () => 'Model Arena',
+    }, ModelArenaPage));
 }

package/lib/routes.js

@@ -7,7 +7,9 @@ export function registerArenaRoutes(ctx, arena) {
             path: ARENA_PANEL_PATH,
             methods: ['GET'],
             requestBody: 'buffered',
-            fetch: () => Promise.resolve(Response.json(arena.listRuns(), {
+            // The panel view is written against `PanelPayload`; returning the bare run list
+            // here made every array method on `payload.recentRuns` throw in the browser.
+            fetch: () => Promise.resolve(Response.json({ recentRuns: arena.listRuns() }, {
                 headers: { 'cache-control': 'no-store' },
             })),
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-arena",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "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,8 @@
     "client": {
       "platform": "web",
       "inject": [
-        "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-connection"
+        "slots",
+        "connection"
       ]
     }
   },