dsh-composer-ux 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [0.14.1] — 2026-09-30（模型下拉能选了 + 面板内容能滚了）
+
+起因（用户原话）：**「跟这个一样 点开指定模型之后可以选择」**「**我点完优化模型之后，看不到下边呀，给他安个滑动条**」。
+
+### 1. 「模型」那一行换成真下拉（按 provider 分组、长了自己滚）
+
+以前是「跟随会话 / 指定」两个按钮 + 一个要你自己写 `provider/model` 的输入框 —— 得记住路由名。
+现在点开就是清单：第一项 **跟随会话模型**（并显示会话当前用的那条），下面按 provider 分组列出
+可用模型（组标题吸顶），选中即写回设置。清单长得装不下时**自己滚**（限高 260px），
+不会把卡片顶出面板。最后一项留了「手动输入 provider/model…」，清单读不到时不至于没路走。
+
+清单从哪来：新增只读路由 `GET /composer-ux/models`（客户端拿不到 `llm` 服务，只有宿主知道
+`listProviders()` + `listModels()`）。三条纪律：**单个 provider 读不到只让那一组空着并写出原因**
+（一个坏端点不该废掉整个下拉）· 60 秒缓存（下拉打开很频繁，`?fresh=1` 绕过，界面上就是「重试」）·
+永不抛（坏掉也要给客户端一句能显示的话）。
+
+### 2. 面板内容区能滚了（「看不到下边」的那条）
+
+`quickSectionBody` 以前是 `overflow: hidden` —— 卡片（七行 + 详情 + 提示词框）比面板还高时，
+下面的内容就被面板底部裁掉、够不到。现在纵轴给滑动条（`overflow-y: auto` + `overscroll-behavior: contain`），
+横轴仍不滚。
+
+## 验证
+
+- `npm test`：**2293 passed / 0 failed**（22 个套件）。新增 §5m：分组、单点失败隔离、缓存与 `?fresh=1`、非 GET 405。
+- 变异测试：**155/155 全部被咬住**（新增 FB「一个坏端点废掉整个下拉」、FC「面板内容区又不可滚」）。
+- 测试抓到一个真 bug 并修掉：`catch (error)` 遮蔽了外层那个 `let error` ⇒ 单个 provider 的失败原因永远写不进去。
+- `typecheck` 0 错误。
 ## [0.14.0] — 2026-09-30（照 dsh-prompt-optimizer 移植：优化选项卡片 + 它的提示词与本体）
 
 起因（用户原话）：**「https://github.com/WestFox-AwA/dsh-prompt-optimizer 全面模仿他的 UI 和 UI 中的所有功能，效果是与快捷指令部分 ui 拼接在一起，也模仿他的内部提示词」**。

package/README.md

@@ -506,7 +506,7 @@ Windows 上 DSH 给模型的终端工具是 **PowerShell**（工具名 `pwsh`）
 | 工具循环的消息形状 / 轮次封顶 / 异常必须降级 | 同上第 6 节（假 llm 驱动整条循环，逐条检查 `role:'tool'` 与 `toolCallId`） |
 | 工具路径：默认关、开了才派、**查完吐散文必须回落**、拿不到工作目录就不派 | `test/quick-commands.mjs` 5g 节（13 条，真路由 + 假 llm） |
 | 工具读到的内容不进台账 | 同 5g 节：断言台账里只有工具名与次数、没有读到的文件内容 |
-| 变异守卫真的会咬人，且**必须是指定的那条测试变红** | `npm run test:mutations`：**153 条全部咬住**（判据是 `red.some(line => line.includes(item.expect))`，不是"有红就行"） |
+| 变异守卫真的会咬人，且**必须是指定的那条测试变红** | `npm run test:mutations`：**155 条全部咬住**（判据是 `red.some(line => line.includes(item.expect))`，不是"有红就行"） |
 | 发布门禁三条判据 | `npm run gates` 全过；`check:tag` 实测 `v0.12.0` 的 tag 名与所指提交里的版本一致 |
 | 三平台 CI | GitHub Actions：ubuntu / windows / macos × Node 20（`npm ci → typecheck → build → test → check:pack → check:docs`） |
 
@@ -639,9 +639,9 @@ node build.mjs                    # 产出 lib/index.js + lib/client.js
                                   #   ⚠️ 宿主半会**内联** schemastery / cosmokit：
                                   #   优先用 DSH 检出里的 vendor 副本，检出不在时退到 node_modules
                                   #   里同版本的 npm 包（两者逐字节相同）——CI 上走的就是退路
-npm test                          # 22 个套件；当前 2282 passed, 0 failed（2026-09-29 实测；CI 三平台同样全绿）
+npm test                          # 22 个套件；当前 2293 passed, 0 failed（2026-09-29 实测；CI 三平台同样全绿）
                                   #   走 scripts/run-tests.mjs：顺带把"多少套件/多少条"记进 test/.last-run.json
-npm run test:mutations            # 手动跑：变异测试，证明那套护栏真的在咬人（153 条，须单独跑）
+npm run test:mutations            # 手动跑：变异测试，证明那套护栏真的在咬人（155 条，须单独跑）
                                   #   同样记录结果，供下面的文档门禁核对
 npm run gates                     # 发版门禁三条一起跑：tag 指向 / 包内容 / 文档数字
 npm run check:tag                 #   ① tag 名里的版本 == 该 tag 所指提交里的 package.json 版本

package/lib/client.js

@@ -1005,6 +1005,7 @@ var NAMESPACE = "composer-ux";
 var REPO_URL = "https://github.com/fangwen9527/dsh-composer-ux";
 var RESTART_API_PATH = "/composer-ux/restart";
 var USAGE_API_PATH = "/composer-ux/usage";
+var MODELS_API_PATH = "/composer-ux/models";
 var SYNC_API_PATH = "/composer-ux/sync-prices";
 var ENABLED_FIELD = "enabled";
 var KEYS_ENABLED_FIELD = "keysEnabled";
@@ -1570,13 +1571,13 @@ async function requestBook(method, body) {
     }
     const row2 = typeof parsed === "object" && parsed !== null ? parsed : {};
     const book = sanitizeBook(row2.book);
-    const textOf2 = (value) => typeof value === "string" && value !== "" ? value : void 0;
+    const textOf3 = (value) => typeof value === "string" && value !== "" ? value : void 0;
     return {
       ok: row2.ok === true,
       ...book === void 0 ? {} : { book },
-      ...textOf2(row2.error) === void 0 ? {} : { error: textOf2(row2.error) },
-      ...textOf2(row2.file) === void 0 ? {} : { file: textOf2(row2.file) },
-      ...textOf2(row2.quarantined) === void 0 ? {} : { quarantined: textOf2(row2.quarantined) }
+      ...textOf3(row2.error) === void 0 ? {} : { error: textOf3(row2.error) },
+      ...textOf3(row2.file) === void 0 ? {} : { file: textOf3(row2.file) },
+      ...textOf3(row2.quarantined) === void 0 ? {} : { quarantined: textOf3(row2.quarantined) }
     };
   } catch (error) {
     return { ok: false, error: error instanceof Error ? error.message : String(error) };
@@ -2892,7 +2893,12 @@ var quickSectionBody = {
   minHeight: 0,
   display: "flex",
   flexDirection: "column",
-  overflow: "hidden"
+  // 0.14.1：**这一半要能滚**。以前是 overflow: hidden —— 卡片（七行 + 详情 + 提示词框）
+  // 比面板还高时，下面的内容就被面板底部裁掉、够不到（用户报的「点完看不到下边」）。
+  // 横轴仍然不滚（面板宽度固定），纵轴给滑动条；overscroll 收敛，免得滚到页面上。
+  overflowX: "hidden",
+  overflowY: "auto",
+  overscrollBehavior: "contain"
 };
 var quickSectionToggle = {
   display: "flex",
@@ -3182,6 +3188,68 @@ var optHint = {
   fontSize: 10.5,
   lineHeight: 1.5
 };
+var optPickerButton = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  textAlign: "left",
+  padding: "3px 8px",
+  border: "0.5px solid var(--dsw-alias-border-l2)",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--dsw-alias-label-primary)",
+  fontSize: 11.5,
+  lineHeight: 1.7,
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+};
+var optPickerPanel = {
+  maxHeight: 260,
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+  border: "0.5px solid var(--dsw-alias-border-l2)",
+  borderRadius: 8,
+  background: "var(--dsw-alias-bg-layer-1)",
+  padding: 4,
+  display: "flex",
+  flexDirection: "column",
+  gap: 1
+};
+var optPickerGroup = {
+  position: "sticky",
+  top: 0,
+  zIndex: 1,
+  background: "var(--dsw-alias-bg-layer-1)",
+  color: "var(--dsw-alias-label-tertiary)",
+  fontSize: 10.5,
+  fontWeight: 600,
+  padding: "4px 6px 2px"
+};
+var optPickerItem = {
+  display: "flex",
+  alignItems: "baseline",
+  gap: 6,
+  width: "100%",
+  textAlign: "left",
+  padding: "4px 8px",
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "var(--dsw-alias-label-primary)",
+  fontSize: 11.5,
+  lineHeight: 1.6,
+  cursor: "pointer"
+};
+var optPickerItemActive = {
+  ...optPickerItem,
+  background: "var(--dsw-alias-bg-layer-2)",
+  fontWeight: 600
+};
+var optPickerModelId = {
+  color: "var(--dsw-alias-label-tertiary)",
+  fontSize: 10.5
+};
 
 // src/client/ContextMenuHost.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -6530,7 +6598,50 @@ function QuickCommandsButton({
 var import_react15 = require("react");
 
 // src/client/OptimizeOptionsCard.tsx
-var import_react12 = require("react");
+var import_react12 = __toESM(require("react"), 1);
+
+// src/client/model-catalog.ts
+var textOf = (value) => typeof value === "string" ? value.trim() : "";
+async function fetchModelCatalog(options = {}) {
+  const url = options.fresh === true ? `${MODELS_API_PATH}?fresh=1` : MODELS_API_PATH;
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: { accept: "application/json" },
+      ...options.signal === void 0 ? {} : { signal: options.signal }
+    });
+    if (!response.ok) return { kind: "error", error: `\u5BBF\u4E3B\u56DE\u4E86 ${String(response.status)}` };
+    const body = await response.json();
+    if (body.ok !== true) return { kind: "error", error: textOf(body.error) === "" ? "\u5BBF\u4E3B\u6CA1\u7ED9\u51FA\u539F\u56E0" : textOf(body.error) };
+    const rawGroups = Array.isArray(body.groups) ? body.groups : [];
+    const groups = [];
+    for (const raw of rawGroups) {
+      if (typeof raw !== "object" || raw === null) continue;
+      const row2 = raw;
+      const id = textOf(row2.id);
+      if (id === "") continue;
+      const models = (Array.isArray(row2.models) ? row2.models : []).map((item) => {
+        const one = typeof item === "object" && item !== null ? item : {};
+        const model = textOf(one.id);
+        const name2 = textOf(one.name);
+        return { id: model, name: name2 === "" ? model : name2 };
+      }).filter((item) => item.id !== "");
+      const error = textOf(row2.error);
+      groups.push({
+        id,
+        name: textOf(row2.name) === "" ? id : textOf(row2.name),
+        models,
+        ...error === "" ? {} : { error }
+      });
+    }
+    const currentRow = typeof body.current === "object" && body.current !== null ? body.current : {};
+    return { kind: "ok", groups, current: { provider: textOf(currentRow.provider), model: textOf(currentRow.model) } };
+  } catch (error) {
+    return { kind: "error", error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+// src/client/OptimizeOptionsCard.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function Segmented(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: optRow, children: [
@@ -6576,6 +6687,23 @@ function currentPrompt(settings) {
 function OptimizeOptionsCard({ settings, actions }) {
   const [detailOpen, setDetailOpen] = (0, import_react12.useState)(false);
   const [modelText, setModelText] = (0, import_react12.useState)(settings.optimizerModel);
+  const [pickerOpen, setPickerOpen] = (0, import_react12.useState)(false);
+  const [catalog, setCatalog] = (0, import_react12.useState)(null);
+  const [manual, setManual] = (0, import_react12.useState)(false);
+  const [retrySeq, setRetrySeq] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => {
+    if (!pickerOpen) return;
+    let alive = true;
+    setCatalog({ kind: "loading" });
+    const controller = new AbortController();
+    void fetchModelCatalog({ fresh: retrySeq > 0, signal: controller.signal }).then((result) => {
+      if (alive) setCatalog(result);
+    });
+    return () => {
+      alive = false;
+      controller.abort();
+    };
+  }, [pickerOpen, retrySeq]);
   const prompt = currentPrompt(settings);
   const tierOff = settings.optimizerTier === "off";
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: optCard, role: "group", "aria-label": "\u4F18\u5316\u9009\u9879", children: [
@@ -6601,61 +6729,134 @@ function OptimizeOptionsCard({ settings, actions }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: optRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optLabel, title: "\u89E3\u91CA\u5C42\u7528\u54EA\u4E2A\u6A21\u578B\uFF1A\u8DDF\u968F\u4F1A\u8BDD\u5F53\u524D\u9009\u7684\uFF0C\u6216\u81EA\u5DF1\u6307\u5B9A", children: "\u6A21\u578B" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: optSegmented, role: "group", "aria-label": "\u6A21\u578B", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "button",
-          {
-            type: "button",
-            "aria-pressed": settings.optimizerModel === "",
-            title: "\u7528\u4F1A\u8BDD\u5F53\u524D\u9009\u7684\u6A21\u578B\uFF08\u9ED8\u8BA4\uFF09",
-            style: settings.optimizerModel === "" ? optSegButtonActive : optSegButton,
-            onMouseDown: (event) => {
-              event.preventDefault();
-            },
-            onClick: () => {
-              setModelText("");
-              actions.setModel("");
-            },
-            children: "\u8DDF\u968F\u4F1A\u8BDD"
-          }
-        ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optLabel, title: "\u89E3\u91CA\u5C42\u7528\u54EA\u4E2A\u6A21\u578B\uFF1A\u8DDF\u968F\u4F1A\u8BDD\u5F53\u524D\u9009\u7684\uFF0C\u6216\u4ECE\u6E05\u5355\u91CC\u6307\u5B9A\u4E00\u6761", children: "\u6A21\u578B" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "\u6A21\u578B",
+          "aria-expanded": pickerOpen,
+          title: "\u70B9\u5F00\u9009\u6A21\u578B\uFF1A\u7B2C\u4E00\u9879\u662F\u8DDF\u968F\u4F1A\u8BDD\uFF1B\u4E0B\u9762\u6309 provider \u5206\u7EC4\u5217\u51FA\u53EF\u7528\u6A21\u578B\uFF08\u6E05\u5355\u957F\u4E86\u53EF\u4EE5\u6EDA\uFF09",
+          style: optPickerButton,
+          onMouseDown: (event) => {
+            event.preventDefault();
+          },
+          onClick: () => {
+            setPickerOpen(!pickerOpen);
+          },
+          children: [
+            settings.optimizerModel === "" ? "\u8DDF\u968F\u4F1A\u8BDD\u6A21\u578B" : settings.optimizerModel,
+            " \u25BE"
+          ]
+        }
+      )
+    ] }),
+    pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: optPickerPanel, role: "listbox", "aria-label": "\u6A21\u578B\u6E05\u5355", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "button",
+        {
+          type: "button",
+          style: settings.optimizerModel === "" ? optPickerItemActive : optPickerItem,
+          onMouseDown: (event) => {
+            event.preventDefault();
+          },
+          onClick: () => {
+            setModelText("");
+            actions.setModel("");
+            setManual(false);
+            setPickerOpen(false);
+          },
+          children: [
+            "\u8DDF\u968F\u4F1A\u8BDD\u6A21\u578B",
+            catalog !== null && catalog.kind === "ok" && catalog.current.model !== "" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: optPickerModelId, children: [
+              "\u5F53\u524D\uFF1A",
+              catalog.current.model
+            ] })
+          ]
+        }
+      ),
+      catalog === null || catalog.kind === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optHint, children: "\u6B63\u5728\u8BFB\u6A21\u578B\u6E05\u5355\u2026" }) : catalog.kind === "error" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { style: optHint, children: [
+          "\u8BFB\u4E0D\u5230\u6A21\u578B\u6E05\u5355\uFF1A",
+          catalog.error
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
-            "aria-pressed": settings.optimizerModel !== "",
-            title: "\u6307\u5B9A\u4E00\u6761\u8DEF\u7531\uFF1A\u5199 provider/model\uFF08\u53EA\u5199\u6A21\u578B\u540D\u5219\u6CBF\u7528\u4F1A\u8BDD\u7684 provider\uFF09",
-            style: settings.optimizerModel !== "" ? optSegButtonActive : optSegButton,
+            style: optPickerItem,
             onMouseDown: (event) => {
               event.preventDefault();
             },
             onClick: () => {
-              actions.setModel(modelText.trim() === "" ? "provider/model" : modelText.trim());
+              setRetrySeq(retrySeq + 1);
             },
-            children: "\u6307\u5B9A"
+            children: "\u91CD\u8BD5"
           }
         )
-      ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        catalog.groups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optHint, children: "\u5BBF\u4E3B\u6CA1\u62A5\u51FA\u4EFB\u4F55 provider\uFF08\u5728\u8BBE\u7F6E\u91CC\u770B\u8FC7\u6A21\u578B\u8DEF\u7531\u5417\uFF1F\uFF09" }),
+        catalog.groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react12.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optPickerGroup, children: group.name }),
+          group.models.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optHint, children: group.error === void 0 ? "\u8FD9\u4E00\u7EC4\u6CA1\u6709\u6A21\u578B" : `\u8FD9\u4E00\u7EC4\u8BFB\u4E0D\u5230\uFF1A${group.error}` }),
+          group.models.map((model) => {
+            const value = `${group.id}/${model.id}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "button",
+              {
+                type: "button",
+                style: settings.optimizerModel === value ? optPickerItemActive : optPickerItem,
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                },
+                onClick: () => {
+                  actions.setModel(value);
+                  setModelText(value);
+                  setPickerOpen(false);
+                },
+                children: [
+                  model.name,
+                  model.name === model.id ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: optPickerModelId, children: model.id })
+                ]
+              },
+              value
+            );
+          })
+        ] }, group.id))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          style: optPickerItem,
+          onMouseDown: (event) => {
+            event.preventDefault();
+          },
+          onClick: () => {
+            setManual(!manual);
+          },
+          children: "\u624B\u52A8\u8F93\u5165 provider/model\u2026"
+        }
+      ),
+      manual && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "input",
+        {
+          "aria-label": "\u624B\u52A8\u8F93\u5165\u6A21\u578B",
+          title: "\u5199 provider/model\uFF0C\u4F8B\u5982 go/deepseek-flash",
+          value: modelText,
+          onChange: (event) => {
+            setModelText(event.target.value);
+          },
+          onBlur: () => {
+            const next = modelText.trim();
+            actions.setModel(next);
+            setModelText(next);
+          },
+          style: optInput,
+          spellCheck: false
+        }
+      )
     ] }),
-    settings.optimizerModel !== "" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "input",
-      {
-        "aria-label": "\u6307\u5B9A\u7684\u6A21\u578B",
-        title: "\u5199 provider/model\uFF0C\u4F8B\u5982 go/deepseek-flash\uFF1B\u7559\u7A7A = \u8DDF\u968F\u4F1A\u8BDD",
-        value: modelText,
-        onChange: (event) => {
-          setModelText(event.target.value);
-        },
-        onBlur: () => {
-          const next = modelText.trim();
-          actions.setModel(next);
-          setModelText(next);
-        },
-        style: optInput,
-        spellCheck: false
-      }
-    ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Segmented,
       {
@@ -7473,7 +7674,7 @@ function QuickCommandsPanel({
 }
 
 // src/client/optimize-state.ts
-var textOf = (value) => typeof value === "string" && value !== "" ? value : void 0;
+var textOf2 = (value) => typeof value === "string" && value !== "" ? value : void 0;
 async function request(method, body) {
   try {
     const response = await fetch(OPTIMIZE_STATE_API_PATH, {
@@ -7494,9 +7695,9 @@ async function request(method, body) {
       state: sanitizeDockSnapshot(row2.state),
       hidden: row2.hidden === true,
       keep: row2.keep !== false,
-      ...textOf(row2.file) === void 0 ? {} : { file: textOf(row2.file) },
-      ...textOf(row2.error) === void 0 ? {} : { error: textOf(row2.error) },
-      ...textOf(row2.quarantined) === void 0 ? {} : { quarantined: textOf(row2.quarantined) },
+      ...textOf2(row2.file) === void 0 ? {} : { file: textOf2(row2.file) },
+      ...textOf2(row2.error) === void 0 ? {} : { error: textOf2(row2.error) },
+      ...textOf2(row2.quarantined) === void 0 ? {} : { quarantined: textOf2(row2.quarantined) },
       ...row2.tooBig === true ? { tooBig: true } : {}
     };
   } catch (error) {