dsh-model-accordion 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dsh-model-accordion contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# dsh-model-accordion
+
+Provider-folded model selector for the DeepSeek Harness Web composer.
+
+## What it does
+
+- Replaces the single composer model seat with a provider-folded selector.
+- Keeps provider groups collapsed by default and opens models on demand.
+- Reads reasoning-effort choices from each model's resolved catalog metadata instead of maintaining a hard-coded effort list.
+- Sends model and reasoning-effort selections through DSH's shared model-directory service.
+- Wraps vision-router mirror providers in one collapsed `识图镜像（带图会话）` section when those providers are present.
+- Keeps the popup height-bounded with an internal scroll area and wraps effort controls below the model name.
+- Uses DSH semantic theme tokens for colors and supports light/dark theme changes.
+
+## Requirements
+
+- DeepSeek Harness Web `0.1.0-rc.8` or newer.
+- A Web profile with the official model-selection package and model-directory service.
+- React 18 supplied by the DSH Web runtime.
+
+This is a Web UI plugin. It does not add a Host service, model provider, vision backend, or model catalog. Provider availability and image-session admission remain controlled by DSH and any installed provider/vision plugins.
+
+## Install from a package or repository
+
+```sh
+dsh plugin --profile web add dsh-model-accordion
+```
+
+For a local checkout during development:
+
+```sh
+dsh plugin --profile web add file:/absolute/path/to/dsh-model-accordion
+```
+
+Refresh the Web UI after installation. The package declares a `dsh.bundle` patch and a Web client entry, so it is installed and loaded as a persistent profile bundle rather than a temporary runtime extension.
+
+## Behavior and limitations
+
+- The selector submits the exact provider, model, and catalog-declared reasoning effort returned by the DSH model directory.
+- A selection can still be rejected by the DSH host when the session contains images and the selected model does not declare image input. That is a host/model-capability rule, not a UI override.
+- The optional `识图镜像（带图会话）` section is shown when provider names identify vision-router mirror routes. It is kept collapsed to avoid duplicating every provider in the main list.
+- The plugin currently uses English fallback status text and a Chinese label for the vision-mirror section; full locale integration is planned for a later release.
+
+## Development checks
+
+```sh
+node --check lib/client.js
+node --check lib/index.js
+npm pack --dry-run --ignore-scripts
+```
+
+## License
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,4 @@
+# Persistent local Web client plugin registration.
+- insert:
+    - id: ui-model-accordion
+      name: dsh-model-accordion

package/lib/client.js

@@ -0,0 +1,223 @@
+window.__ModuleLoader__.load({
+  id: "dsh-model-accordion",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+    const React = require("react");
+
+    // CSS is self-contained and theme-token driven (mirrors the shipped
+    // model-selection geometry). The popup scroll region carries its own
+    // max-height so the menu is ALWAYS height-bounded and scrolls internally,
+    // independent of any ancestor flex/layout context.
+    const CSS = `
+.dshma-root{position:relative;min-width:0}
+.dshma-trigger{box-sizing:border-box;display:flex;align-items:center;gap:4px;height:28px;max-width:min(360px,45cqw);padding:0 4px 0 8px;border:none;border-radius:24px;background:transparent;color:var(--dsw-alias-label-secondary);font-size:13px;font-weight:500;line-height:20px;cursor:pointer;outline:none;min-width:0}
+.dshma-trigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.dshma-trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-border-l3)}
+.dshma-trigger:disabled{color:var(--dsw-alias-label-dimmed);cursor:default}
+.dshma-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.dshma-trigger-effort{color:var(--dsw-alias-label-caption);flex:none}
+.dshma-chevron{color:var(--dsw-alias-label-caption);flex:none;transition:transform .12s}
+.dshma-chevron-open{transform:rotate(180deg)}
+.dshma-menu{box-sizing:border-box;z-index:50;position:absolute;bottom:calc(100% + 8px);right:0;width:max-content;min-width:min(240px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:4px;border:1px solid var(--dsw-alias-border-inverted);background:var(--dsw-specific-menu);border-radius:12px;box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);display:flex;flex-direction:column;overflow:hidden}
+.dshma-menu-scroll{box-sizing:border-box;max-height:min(340px,calc(100vh - 120px));overflow-y:auto;display:flex;flex-direction:column;min-width:0;-webkit-overflow-scrolling:touch}
+.dshma-status,.dshma-empty{color:var(--dsw-alias-label-tertiary);padding:10px;font-size:13px;line-height:20px}
+.dshma-error{background:var(--dsw-alias-interactive-bg-hover-danger);color:var(--dsw-alias-state-error-primary);border-radius:8px;margin-bottom:4px;padding:7px 8px;font-size:12px;line-height:18px}
+.dshma-provider{border-radius:10px;overflow:hidden;flex:none}
+.dshma-vision{margin-top:4px;border-top:1px solid var(--dsw-alias-border-l3);padding-top:4px}
+.dshma-provider-head{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:7px;padding:8px;border:none;border-radius:10px;background:transparent;color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:600;line-height:18px;text-align:left;cursor:pointer;font-family:inherit}
+.dshma-provider-head:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dshma-provider-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dshma-count{color:var(--dsw-alias-label-caption);font-size:11px;font-weight:500;flex:none}
+.dshma-provider-chevron{color:var(--dsw-alias-label-caption);flex:none;transition:transform .12s}
+.dshma-provider-chevron-open{transform:rotate(180deg)}
+.dshma-models{padding:0 4px 4px}
+.dshma-option{box-sizing:border-box;width:100%;padding:7px 8px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);text-align:left;cursor:pointer;display:block}
+.dshma-option:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dshma-option-selected{background:var(--dsw-alias-interactive-bg-hover)}
+.dshma-option-row{display:flex;align-items:center;gap:8px;min-width:0;width:100%;border:none;background:transparent;padding:0;color:inherit;cursor:pointer;font-family:inherit;text-align:left}
+.dshma-option-main{flex:1;min-width:0}
+.dshma-option-name{font-size:13px;font-weight:500;line-height:18px;overflow-wrap:anywhere;display:block}
+.dshma-option-desc{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px;overflow-wrap:anywhere;display:block}
+.dshma-check{color:var(--dsw-alias-label-secondary);flex:none;font-size:14px}
+.dshma-efforts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;padding-left:0}
+.dshma-effort{box-sizing:border-box;color:var(--dsw-alias-label-tertiary);cursor:pointer;background:var(--dsw-alias-bg-module-platform);border:1px solid var(--dsw-alias-border-l3);border-radius:8px;padding:2px 7px;font-size:11px;line-height:16px;font-family:inherit}
+.dshma-effort:hover{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover)}
+.dshma-effort-selected{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-secondary)}
+.dshma-failure{color:var(--dsw-alias-label-tertiary);border-radius:8px;padding:7px 8px;font-size:12px;line-height:18px}
+`;
+
+    function Chevron(props) {
+      return React.createElement("svg", { className: props.className || "dshma-chevron", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true" },
+        React.createElement("path", { d: "M3.5 5.25 7 8.75l3.5-3.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
+      );
+    }
+
+    function useStore(store) {
+      return React.useSyncExternalStore(
+        (fn) => store.subscribe(fn),
+        () => store.getSnapshot(),
+        () => store.getSnapshot()
+      );
+    }
+
+    function effortOptions(model) {
+      const es = model && model.reasoning && Array.isArray(model.reasoning.efforts) ? model.reasoning.efforts : [];
+      return es.filter((e) => e && typeof e.id === "string");
+    }
+
+    function Accordion(props) {
+      const state = useStore(props.directory);
+      const [open, setOpen] = React.useState(false);
+      const [expanded, setExpanded] = React.useState({});
+      const [busy, setBusy] = React.useState(false);
+      const [failure, setFailure] = React.useState(null);
+      const groups = Array.isArray(state.groups) ? state.groups : [];
+      const rootRef = React.useRef(null);
+      const [visionOpen, setVisionOpen] = React.useState(false);
+      // Vision-router twin detection: only treat a group as the auto-vision
+      // wrapper when its display name carries the 自动识图 token or its provider
+      // id ends in "-vision" (official vision-router uses route id
+      // "deepseek-vision" + display "DeepSeek + 自动识图").
+      const isTwin = (g) => /自动识图/.test(g.name || "") || /(?:-|\b)vision$/i.test((g.id || "").trim());
+      const mainGroups = groups.filter((g) => !isTwin(g));
+      const visionGroups = groups.filter(isTwin);
+
+      React.useEffect(() => {
+        if (!open) return;
+        const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
+        const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
+      }, [open]);
+
+      React.useEffect(() => { if (open && props.available) props.load(); }, [open, props.available]);
+
+      const select = (group, model, effort) => {
+        if (!props.available || busy) return;
+        setBusy(true);
+        setFailure(null);
+        const sel = { provider: group.id, model: model.id };
+        if (effort !== void 0) sel.reasoningEffort = effort;
+        props.select(sel).then((ok) => {
+          if (!ok) throw new Error("model selection failed");
+          setOpen(false);
+        }).catch((e) => {
+          setFailure(e && e.message ? e.message : "model selection failed");
+        }).finally(() => setBusy(false));
+      };
+
+      const current = state.current;
+      const curGroup = groups.find((g) => g.id === current?.provider);
+      const curModel = curGroup ? curGroup.models.find((m) => m.id === current?.model) : void 0;
+      const label = curModel ? curModel.name : (current ? `${current.provider}/${current.model}` : "Select model");
+      const curEffort = curModel && current && current.provider === curGroup.id && current.model === curModel.id
+        ? (current.reasoningEffort || (curModel.reasoning && curModel.reasoning.defaultEffort))
+        : void 0;
+
+      const renderGroup = (group) => {
+        const isOpen = expanded[group.id] === true;
+        return React.createElement("div", { className: "dshma-provider", key: group.id },
+          React.createElement("button", { type: "button", className: "dshma-provider-head", onClick: () => setExpanded((old) => ({ ...old, [group.id]: !isOpen })), "aria-expanded": isOpen },
+            React.createElement(Chevron, { className: `dshma-provider-chevron${isOpen ? " dshma-provider-chevron-open" : ""}` }),
+            React.createElement("span", { className: "dshma-provider-name" }, group.name || group.id),
+            React.createElement("span", { className: "dshma-count" }, `${group.models.length}`)
+          ),
+          isOpen ? React.createElement("div", { className: "dshma-models" }, group.models.map((model) => {
+            const selected = current && current.provider === group.id && current.model === model.id;
+            const efforts = effortOptions(model);
+            const defEffort = model.reasoning && model.reasoning.defaultEffort;
+            // A "provider default" chip clears a pinned effort so the provider's
+            // built-in default applies again (mirrors the official provider-default
+            // entry in dsh-client-ui-model-selection @315-324).
+            const defaultChip = defEffort !== void 0 ? [{ id: "__provider_default__", name: "默认" }] : [];
+            const chips = defaultChip.concat(efforts);
+            // reason about the currently active effort: a pinned explicit effort
+            // wins over the provider's default; otherwise provider default applies.
+            const pinnedEffort = selected ? current.reasoningEffort : void 0;
+            return React.createElement("div", { className: `dshma-option${selected ? " dshma-option-selected" : ""}`, key: model.id },
+              React.createElement("button", { type: "button", className: "dshma-option-row", onClick: () => {
+                // Re-clicking the already-selected model must NOT re-submit and
+                // thereby wipe a custom (pinned) effort — just close the menu.
+                // Mirrors dsh-client-ui-model-selection @397-400 / @718.
+                if (selected) { setOpen(false); return; }
+                select(group, model, defEffort);
+              }, disabled: busy },
+                React.createElement("span", { className: "dshma-option-main" },
+                  React.createElement("span", { className: "dshma-option-name" }, model.name || model.id),
+                  model.description ? React.createElement("span", { className: "dshma-option-desc" }, model.description) : null
+                ),
+                selected ? React.createElement("span", { className: "dshma-check", "aria-label": "selected" }, "✓") : null
+              ),
+              chips.length ? React.createElement("div", { className: "dshma-efforts", "aria-label": "Reasoning effort" }, chips.map((it) => React.createElement("button", { type: "button", key: it.id, className: `dshma-effort${selected && (it.id === "__provider_default__" ? !current.reasoningEffort : pinnedEffort === it.id) ? " dshma-effort-selected" : ""}`, onClick: () => select(group, model, it.id === "__provider_default__" ? void 0 : it.id), disabled: busy }, it.name || it.id))) : null
+            );
+          })) : null
+        );
+      };
+
+      return React.createElement("div", { className: "dshma-root", ref: rootRef },
+        React.createElement("button", { type: "button", className: "dshma-trigger", disabled: props.locked || !props.available || busy, onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu" },
+          React.createElement("span", { className: "dshma-trigger-label" }, label),
+          curEffort ? React.createElement("span", { className: "dshma-trigger-effort" }, `· ${curEffort}`) : null,
+          React.createElement(Chevron, { className: `dshma-chevron${open ? " dshma-chevron-open" : ""}` })
+        ),
+        open ? React.createElement("div", { className: "dshma-menu", role: "menu" },
+          React.createElement("div", { className: "dshma-menu-scroll" },
+            failure ? React.createElement("div", { className: "dshma-error" }, failure) : null,
+            state.error ? React.createElement("div", { className: "dshma-error" }, state.error) : null,
+            state.status === "loading" ? React.createElement("div", { className: "dshma-status" }, "Loading models…") : null,
+            (state.status === "selecting" || busy) ? React.createElement("div", { className: "dshma-status" }, "Selecting…") : null,
+            state.status !== "loading" && mainGroups.length === 0 && visionGroups.length === 0 ? React.createElement("div", { className: "dshma-empty" }, "No models available") : null,
+            mainGroups.map(renderGroup),
+            visionGroups.length ? React.createElement("div", { className: "dshma-vision", key: "__vision__" },
+              React.createElement("button", { type: "button", className: "dshma-provider-head", onClick: () => setVisionOpen((v) => !v), "aria-expanded": visionOpen },
+                React.createElement(Chevron, { className: `dshma-provider-chevron${visionOpen ? " dshma-provider-chevron-open" : ""}` }),
+                React.createElement("span", { className: "dshma-provider-name" }, "识图镜像（带图会话）"),
+                React.createElement("span", { className: "dshma-count" }, `${visionGroups.length}`)
+              ),
+              visionOpen ? React.createElement("div", { className: "dshma-models" }, visionGroups.map(renderGroup)) : null
+            ) : null
+          )
+        ) : null
+      );
+    }
+
+    const inject = ["slots", "modelDirectories", "sessions"];
+
+    function injectCss() {
+      if (typeof document === "undefined") return () => {};
+      const prev = document.querySelector('style[data-dshma-css]');
+      if (prev) prev.remove();
+      const tag = document.createElement("style");
+      tag.setAttribute("data-dshma-css", "1");
+      tag.textContent = CSS;
+      document.head.appendChild(tag);
+      return () => tag.remove();
+    }
+
+    function apply(ctx) {
+      const cssDispose = ctx.effect(injectCss, "dsh-model-accordion: styles");
+      ctx.slots.inject("conversation.input.model", () => ctx.slots.register({
+        name: "conversation.input.model",
+        priority: -1,
+        inject: (sessionId) => {
+          const directory = ctx.modelDirectories.directoryFor(sessionId);
+          const available = ctx.sessions.subagentAddress(sessionId) === void 0;
+          return {
+            available,
+            directory: directory.store,
+            load: () => { if (available) directory.load().catch(() => {}); },
+            select: (selection) => available ? directory.select(selection).then(() => true, () => false) : Promise.resolve(false)
+          };
+        }
+      }, Accordion));
+      return cssDispose;
+    }
+
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  }
+});

package/lib/index.js

@@ -0,0 +1,8 @@
+const name = "dsh-model-accordion";
+
+function apply() {}
+
+const inject = [];
+
+export { apply, inject, name };
+export default { apply, inject, name };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "dsh-model-accordion",
+  "version": "0.1.1",
+  "description": "Provider-folded model selector for the DSH Web composer with catalog-driven reasoning effort choices.",
+  "keywords": [
+    "deepseek-harness",
+    "dsh",
+    "dsh-plugin",
+    "model-selector",
+    "reasoning-effort"
+  ],
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-theme",
+        "@deepseek-ai/dsh-client-ui-model-selection"
+      ],
+      "platform": "web"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lakabuji-arch/dsh-model-accordion.git"
+  },
+  "homepage": "https://github.com/lakabuji-arch/dsh-model-accordion#readme",
+  "bugs": {
+    "url": "https://github.com/lakabuji-arch/dsh-model-accordion/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "check": "node --check lib/client.js && node --check lib/index.js",
+    "test": "node --test tests/package.test.js"
+  }
+}