dsh-tool-stats 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

package/lib/client/index.d.ts

@@ -1,4 +1,26 @@
+/**
+ * Browser half of dsh-tool-stats: the Tool Stats 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-tool-stats: the Tool Stats 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('tool-stats', {
-            title: 'Tool Stats',
-            render: async () => {
-                const res = await c.fetch('/api/stats.panel');
-                const payload = await res.json();
-                return renderPanel(payload);
-            },
+/** Path the host half registers on the web connection. */
+const PANEL_PATH = '/api/stats.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 ToolStatsPage() {
+    const { html, error, reload } = usePanel();
+    if (error !== null) {
+        return (_jsxs("section", { children: [_jsxs("p", { role: "alert", children: ["Tool Stats 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 Tool Stats 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: 'tool-stats',
+        order: 43,
+        label: () => 'Tool Stats',
+    }, ToolStatsPage));
 }

package/lib/stats.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) {
@@ -41,20 +42,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("tool-stats", {
-      title: "Tool Stats",
-      render: async () => {
-        const res = await c.fetch("/api/stats.panel");
-        const payload = await res.json();
-        return renderPanel(payload);
-      }
+var import_jsx_runtime = require("react/jsx-runtime");
+var PANEL_PATH = "/api/stats.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 ToolStatsPage() {
+  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: [
+        "Tool Stats 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 Tool Stats 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: "tool-stats",
+      order: 43,
+      label: () => "Tool Stats"
+    },
+    ToolStatsPage
+  ));
 }
 return module.exports; } });
 //# sourceMappingURL=stats.web.js.map

package/lib/stats.web.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/client/index.tsx", "../src/client/view.tsx"],
-  "sourcesContent": ["import 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    s.section('tool-stats', {\n      title: 'Tool Stats',\n      render: async () => {\n        const res = await c.fetch('/api/stats.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 toolRows = payload.tools\n    .map((t) => `<tr><td>${t.tool}</td><td>${t.invocations}</td><td>${Math.round(t.failureRate * 100)}%</td><td>${t.p50Latency}ms</td><td>${t.p95Latency}ms</td></tr>`)\n    .join('');\n\n  const deadSection = payload.deadTools.length > 0\n    ? `<h3>Dead tools</h3><ul>${payload.deadTools.map((d) => `<li>${d.tool}</li>`).join('')}</ul>`\n    : '';\n\n  const failSection = payload.failingTools.length > 0\n    ? `<h3>Failing tools</h3><ul>${payload.failingTools.map((f) => `<li>${f.tool}: ${Math.round(f.failureRate * 100)}%</li>`).join('')}</ul>`\n    : '';\n\n  const recSection = payload.recommendations.length > 0\n    ? `<h3>Recommendations</h3><ul>${payload.recommendations.map((r) => `<li>${r.message}</li>`).join('')}</ul>`\n    : '';\n\n  return `<div class=\"stats-panel\">\n    <h2>Tool Stats</h2>\n    ${toolRows ? `<table><thead><tr><th>Tool</th><th>Calls</th><th>Fail</th><th>p50</th><th>p95</th></tr></thead><tbody>${toolRows}</tbody></table>` : '<p>No calls recorded.</p>'}\n    ${deadSection}${failSection}${recSection}\n  </div>`;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,SAAS,YAAY,SAA+B;AACzD,QAAM,WAAW,QAAQ,MACtB,IAAI,CAAC,MAAM,WAAW,EAAE,IAAI,YAAY,EAAE,WAAW,YAAY,KAAK,MAAM,EAAE,cAAc,GAAG,CAAC,aAAa,EAAE,UAAU,cAAc,EAAE,UAAU,cAAc,EACjK,KAAK,EAAE;AAEV,QAAM,cAAc,QAAQ,UAAU,SAAS,IAC3C,0BAA0B,QAAQ,UAAU,IAAI,CAAC,MAAM,OAAO,EAAE,IAAI,OAAO,EAAE,KAAK,EAAE,CAAC,UACrF;AAEJ,QAAM,cAAc,QAAQ,aAAa,SAAS,IAC9C,6BAA6B,QAAQ,aAAa,IAAI,CAAC,MAAM,OAAO,EAAE,IAAI,KAAK,KAAK,MAAM,EAAE,cAAc,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,UAChI;AAEJ,QAAM,aAAa,QAAQ,gBAAgB,SAAS,IAChD,+BAA+B,QAAQ,gBAAgB,IAAI,CAAC,MAAM,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,CAAC,UACnG;AAEJ,SAAO;AAAA;AAAA,MAEH,WAAW,yGAAyG,QAAQ,qBAAqB,2BAA2B;AAAA,MAC5K,WAAW,GAAG,WAAW,GAAG,UAAU;AAAA;AAE5C;;;ADrBO,IAAM,SAAS,CAAC,uCAAuC,oCAAoC;AAE3F,SAAS,MAAM,KAEb;AACP,MAAI,OAAO,QAAQ,CAAC,UAAmB,eAAwB;AAC7D,UAAM,IAAI;AACV,UAAM,IAAI;AACV,MAAE,QAAQ,cAAc;AAAA,MACtB,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-tool-stats: the Tool Stats 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/stats.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 ToolStatsPage() {\n  const { html, error, reload } = usePanel()\n  if (error !== null) {\n    return (\n      <section>\n        <p role=\"alert\">Tool Stats 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 Tool Stats 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: 'tool-stats',\n      order: 43,\n      label: () => 'Tool Stats',\n    },\n    ToolStatsPage,\n  ))\n}\n", "import type { PanelPayload } from '../types.js';\n\nexport function renderPanel(payload: PanelPayload): string {\n  const toolRows = payload.tools\n    .map((t) => `<tr><td>${t.tool}</td><td>${t.invocations}</td><td>${Math.round(t.failureRate * 100)}%</td><td>${t.p50Latency}ms</td><td>${t.p95Latency}ms</td></tr>`)\n    .join('');\n\n  const deadSection = payload.deadTools.length > 0\n    ? `<h3>Dead tools</h3><ul>${payload.deadTools.map((d) => `<li>${d.tool}</li>`).join('')}</ul>`\n    : '';\n\n  const failSection = payload.failingTools.length > 0\n    ? `<h3>Failing tools</h3><ul>${payload.failingTools.map((f) => `<li>${f.tool}: ${Math.round(f.failureRate * 100)}%</li>`).join('')}</ul>`\n    : '';\n\n  const recSection = payload.recommendations.length > 0\n    ? `<h3>Recommendations</h3><ul>${payload.recommendations.map((r) => `<li>${r.message}</li>`).join('')}</ul>`\n    : '';\n\n  return `<div class=\"stats-panel\">\n    <h2>Tool Stats</h2>\n    ${toolRows ? `<table><thead><tr><th>Tool</th><th>Calls</th><th>Fail</th><th>p50</th><th>p95</th></tr></thead><tbody>${toolRows}</tbody></table>` : '<p>No calls recorded.</p>'}\n    ${deadSection}${failSection}${recSection}\n  </div>`;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-tool-stats",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Every tool call is counted, and the ones that never fire are named so you can remove them.",
   "type": "module",
   "main": "lib/index.js",
@@ -17,7 +17,7 @@
     "bundle": { "patch": "./cordis.patch.yml" },
     "client": {
       "platform": "web",
-      "inject": ["@deepseek-ai/dsh-client-ui-settings", "@deepseek-ai/dsh-client-connection"]
+      "inject": ["slots", "connection"]
     }
   },
   "license": "MIT",