dsh-model-router 0.4.0 → 0.5.0

package/README.md

@@ -61,6 +61,28 @@ With the router off, requests use the session's selected model (your
 `agent-default-model` setting or the base default) — the router is simply not
 rewriting them.
 
+## The GUI toggle (v0.5.0+)
+
+Since v0.5.0 the package ships a browser half, and the harness serves it
+automatically — no extra config. After installing (or updating to) v0.5.0+
+and restarting the profile, **Settings → Plugins** shows a **Model router**
+card with a live **Enabled** switch, an "Overridden" badge and **Reset to
+default** button once you've changed it, and a read-only view of the current
+planner/executor routes and mode. Flipping the switch applies immediately (no
+restart) and persists in `settings.yaml` under `model-router:` — the same
+mechanism the GUI toggle described above uses.
+
+One harness-wide caveat (it applies to **all** settings pages — Models,
+Plugins, everything — not to this plugin specifically): the harness serves
+settings pages only to **loopback** browsers (`localhost` / `127.x`). A remote
+browser sees "settings are unavailable" instead of the card. Fallbacks that
+work everywhere:
+
+- **Patch row** — set `enabled: false` in the profile's `cordis.patch.yml`
+  (takes effect on the next boot), or
+- **`settings.yaml`** — add `model-router: { enabled: false }` under the
+  settings file the profile uses; this applies live, same as the GUI.
+
 ## Tuning
 
 All configuration lives on the plugin row. Patch it in the profile's `cordis.patch.yml`:

package/cordis.patch.yml

@@ -29,6 +29,7 @@
         #         falls back to the executor route to reserve pro for planning.
         mode: strict
         # enabled: false  # off switch — GUI: Settings → Plugins → model-router (live, no restart); patch row needs a reboot
+        # GUI: Settings → Plugins → "Model router" card (v0.5.0+, loopback browser only)
         # Publish the always-on routing convention prompt section.
         promptSection: true
         # Register the `pro-flash-routing` skill in the session catalog.

package/lib/client.js

@@ -0,0 +1,297 @@
+window.__ModuleLoader__.load({
+	id: "dsh-model-router",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+"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.tsx
+var client_exports = {};
+__export(client_exports, {
+  apply: () => apply,
+  inject: () => inject
+});
+module.exports = __toCommonJS(client_exports);
+var import_react = require("react");
+var NS = "model-router";
+var inject = ["slots", "locale", "settingsScope"];
+var en = {
+  nav: "Model router",
+  title: "Model router",
+  description: "Role-based model routing: planning runs on deepseek-v4-pro, delegated executor subagents on deepseek-v4-flash.",
+  enabled: "Enabled",
+  enabledHint: "Off stops rewriting requests and unregisters the prompt section and skill; on restores them.",
+  on: "On",
+  off: "Off",
+  reset: "Reset to default",
+  overridden: "Overridden",
+  readOnly: "This deployment stores settings read-only in this browser; use the plugin row in the profile's cordis.patch.yml instead.",
+  plannerRoute: "Planner model",
+  executorRoute: "Executor model",
+  mode: "Mode",
+  modeStrict: "strict \u2014 the root agent is always the planner",
+  modePlan: "plan \u2014 the root agent is pro only while plan mode is active"
+};
+var zh = {
+  nav: "\u6A21\u578B\u8DEF\u7531",
+  title: "\u6A21\u578B\u8DEF\u7531",
+  description: "\u6309\u89D2\u8272\u5206\u914D\u6A21\u578B\uFF1A\u89C4\u5212\u5728 deepseek-v4-pro \u4E0A\u8FD0\u884C\uFF0C\u59D4\u6D3E\u7684\u6267\u884C\u5B50\u4EE3\u7406\u5728 deepseek-v4-flash \u4E0A\u8FD0\u884C\u3002",
+  enabled: "\u542F\u7528",
+  enabledHint: "\u5173\u95ED\u540E\u505C\u6B62\u6539\u5199\u8BF7\u6C42\uFF0C\u5E76\u6CE8\u9500\u63D0\u793A\u533A\u5757\u4E0E\u6280\u80FD\uFF1B\u91CD\u65B0\u6253\u5F00\u5373\u6062\u590D\u3002",
+  on: "\u5F00",
+  off: "\u5173",
+  reset: "\u6062\u590D\u9ED8\u8BA4",
+  overridden: "\u5DF2\u8986\u76D6",
+  readOnly: "\u5F53\u524D\u6D4F\u89C8\u5668\u4E2D\u8BE5\u90E8\u7F72\u7684\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\uFF1B\u8BF7\u6539\u7528 profile \u7684 cordis.patch.yml \u4E2D\u7684\u63D2\u4EF6\u884C\u3002",
+  plannerRoute: "\u89C4\u5212\u6A21\u578B",
+  executorRoute: "\u6267\u884C\u6A21\u578B",
+  mode: "\u6A21\u5F0F",
+  modeStrict: "strict \u2014 \u6839 agent \u59CB\u7EC8\u4E3A\u89C4\u5212\u8005",
+  modePlan: "plan \u2014 \u6839 agent \u4EC5\u5728\u8BA1\u5212\u6A21\u5F0F\u6FC0\u6D3B\u65F6\u4F7F\u7528 pro"
+};
+var ModelRouterCardController = class {
+  scope;
+  constructor(scope) {
+    this.scope = scope;
+  }
+  get store() {
+    return {
+      subscribe: (listener) => this.scope.subscribe(listener),
+      getSnapshot: () => this.scope.getSnapshot()
+    };
+  }
+  /** Build the face the card's slot registration injects. */
+  inject() {
+    return {
+      hooks: { modelRouterCard: this.store },
+      setEnabled: async (next) => {
+        try {
+          await this.scope.set("enabled", next);
+        } catch {
+        }
+      },
+      reset: async () => {
+        try {
+          await this.scope.unset("enabled");
+        } catch {
+        }
+      }
+    };
+  }
+  /** Stop the scope's mirror subscription when the fiber stops. */
+  dispose() {
+    void this.scope.dispose();
+  }
+};
+function routeRow(label, value) {
+  return (0, import_react.createElement)("div", { style: styles.routeRow }, [
+    (0, import_react.createElement)("dt", { style: styles.routeLabel }, label),
+    (0, import_react.createElement)("dd", { style: styles.routeValue }, value)
+  ]);
+}
+function modeLabel(t, mode) {
+  return mode === "plan" ? t("modePlan") : t("modeStrict");
+}
+function ModelRouterCard(props) {
+  const { t } = props;
+  const state = props.useModelRouterCard((snapshot) => snapshot);
+  const unavailable = !state.writable || state.mode !== "host";
+  const overridden = state.user?.enabled !== void 0;
+  return (0, import_react.createElement)("section", { style: styles.card }, [
+    (0, import_react.createElement)("div", { style: styles.headRow }, [
+      (0, import_react.createElement)("h3", { style: styles.title }, t("title")),
+      overridden ? (0, import_react.createElement)("span", { style: styles.badge }, t("overridden")) : null
+    ]),
+    (0, import_react.createElement)("p", { style: styles.description }, t("description")),
+    ...unavailable ? [(0, import_react.createElement)("p", { style: styles.note }, t("readOnly"))] : state.value ? [
+      (0, import_react.createElement)("div", { style: styles.switchRow }, [
+        (0, import_react.createElement)("label", { htmlFor: "model-router-enabled", style: styles.label }, t("enabled")),
+        (0, import_react.createElement)("input", {
+          id: "model-router-enabled",
+          type: "checkbox",
+          checked: Boolean(state.value.enabled),
+          onChange: (event) => {
+            void props.setEnabled(event.currentTarget.checked);
+          },
+          style: styles.switch
+        }),
+        (0, import_react.createElement)("span", { style: styles.status }, state.value.enabled ? t("on") : t("off"))
+      ]),
+      (0, import_react.createElement)("p", { style: styles.hint }, t("enabledHint")),
+      overridden ? (0, import_react.createElement)(
+        "button",
+        { type: "button", style: styles.reset, onClick: () => void props.reset() },
+        t("reset")
+      ) : null,
+      (0, import_react.createElement)("dl", { style: styles.routes }, [
+        routeRow(t("plannerRoute"), state.value.planner?.model ?? "\u2014"),
+        routeRow(t("executorRoute"), state.value.executor?.model ?? "\u2014"),
+        routeRow(t("mode"), modeLabel(t, state.value.mode))
+      ])
+    ] : []
+  ]);
+}
+var styles = {
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    padding: "16px 18px",
+    background: "var(--dsw-alias-bg-layer-3)",
+    border: "1px solid var(--dsw-alias-border-l2)",
+    borderRadius: "12px",
+    color: "var(--dsw-alias-label-primary)",
+    font: "inherit"
+  },
+  headRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  title: {
+    margin: 0,
+    fontSize: "15px",
+    fontWeight: 600,
+    lineHeight: 1.4
+  },
+  badge: {
+    whiteSpace: "nowrap",
+    background: "var(--dsw-alias-bg-module-platform)",
+    color: "var(--dsw-alias-label-secondary)",
+    borderRadius: "999px",
+    padding: "1px 8px",
+    fontSize: "11px",
+    fontWeight: 500,
+    lineHeight: "17px"
+  },
+  description: {
+    margin: 0,
+    color: "var(--dsw-alias-label-secondary)",
+    fontSize: "13px",
+    lineHeight: 1.5
+  },
+  switchRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "10px 0"
+  },
+  label: {
+    flex: 1,
+    minWidth: 0,
+    fontSize: "13px",
+    fontWeight: 500,
+    lineHeight: 1.5
+  },
+  switch: {
+    width: "16px",
+    height: "16px",
+    accentColor: "var(--dsw-alias-brand-primary)",
+    cursor: "pointer"
+  },
+  status: {
+    color: "var(--dsw-alias-label-secondary)",
+    fontSize: "12px",
+    lineHeight: 1.5,
+    minWidth: "24px"
+  },
+  hint: {
+    margin: 0,
+    color: "var(--dsw-alias-label-tertiary)",
+    fontSize: "12px",
+    lineHeight: 1.5
+  },
+  reset: {
+    alignSelf: "flex-start",
+    font: "inherit",
+    color: "var(--dsw-alias-label-secondary)",
+    background: "none",
+    border: "1px solid var(--dsw-alias-border-l2)",
+    borderRadius: "8px",
+    padding: "4px 10px",
+    fontSize: "12px",
+    lineHeight: 1.5,
+    cursor: "pointer"
+  },
+  routes: {
+    margin: "4px 0 0",
+    padding: "10px 0 0",
+    borderTop: "1px solid var(--dsw-alias-border-l2)",
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px"
+  },
+  routeRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  routeLabel: {
+    minWidth: 0,
+    flex: 1,
+    margin: 0,
+    color: "var(--dsw-alias-label-secondary)",
+    fontSize: "12px",
+    lineHeight: 1.5
+  },
+  routeValue: {
+    margin: 0,
+    color: "var(--dsw-alias-label-primary)",
+    fontSize: "12px",
+    lineHeight: 1.5,
+    fontVariantNumeric: "tabular-nums"
+  },
+  note: {
+    margin: 0,
+    color: "var(--dsw-alias-label-tertiary)",
+    fontSize: "12px",
+    lineHeight: 1.5
+  }
+};
+function apply(ctx) {
+  const t = ctx.locale.bind(NS);
+  ctx.effect(
+    () => {
+      ctx.locale.register(NS, { zh, en });
+    },
+    "model-router: card dictionaries"
+  );
+  const controller = new ModelRouterCardController(ctx.settingsScope.bind({ namespace: NS }));
+  ctx.slots.inject("settings.plugin.item", function* () {
+    yield ctx.slots.register(
+      {
+        name: "settings.plugin.item",
+        key: NS,
+        locale: NS,
+        inject: () => controller.inject()
+      },
+      ModelRouterCard
+    );
+  });
+  ctx.effect(
+    () => () => controller.dispose(),
+    "model-router: card controller"
+  );
+}
+
+		return module.exports;
+	}
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-model-router",
   "description": "DeepSeek Harness plugin: role-based model routing — the planner agent runs on deepseek-v4-pro, delegated executor subagents run on deepseek-v4-flash.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -13,6 +13,9 @@
       "types": "./lib/index.d.ts",
       "default": "./lib/index.js"
     },
+    "./client": {
+      "default": "./lib/client.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -24,10 +27,19 @@
   "dsh": {
     "bundle": {
       "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-locale"
+      ],
+      "platform": "web"
     }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && npm run build:client",
+    "build:client": "node scripts/build-client.mjs",
     "prepare": "npm run build",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
@@ -44,6 +56,8 @@
     "@deepseek-ai/dsh-plan-mode": "^0.1.0-rc.8",
     "@deepseek-ai/dsh-settings": "^0.1.0-rc.8",
     "@types/node": "^22.10.0",
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vitest": "^2.1.8"