dsh-model-arena 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 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
+  with `react` external, which prints a top-level `import` — invalid inside the loader's
+  concatenated script bundle, so evaluation aborted and every module after it failed with
+  "...loaded without registering ... via __ModuleLoader__.load". The bundle is now emitted
+  in the loader's lazy-CJS factory form (`window.__ModuleLoader__.load({ id, factory })`).
+- Point the `./client` export's `types` at `lib/client/index.d.ts`, the file the client
+  half actually compiles to.
+
 ## 0.1.0 (2026-09-18)
 
 Initial release.

package/lib/arena.web.js

@@ -1,3 +1,33 @@
+window.__ModuleLoader__.load({ id: "dsh-model-arena", factory: (require) => {
+var module = { exports: {} }; var exports = module.exports;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  apply: () => apply,
+  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("");
@@ -8,22 +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 };
 }
-export {
-  apply,
-  inject
-};
+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

@@ -0,0 +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;",
+  "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-arena",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Run the same prompt through every model you have, and see the difference without squinting.",
   "type": "module",
   "main": "lib/index.js",
@@ -14,7 +14,7 @@
       "default": "./lib/index.js"
     },
     "./client": {
-      "types": "./lib/client.d.ts",
+      "types": "./lib/client/index.d.ts",
       "default": "./lib/arena.web.js"
     },
     "./package.json": "./package.json"
@@ -41,8 +41,8 @@
     "client": {
       "platform": "web",
       "inject": [
-        "@deepseek-ai/dsh-client-ui-settings",
-        "@deepseek-ai/dsh-client-connection"
+        "slots",
+        "connection"
       ]
     }
   },