@michengai/dsh-automation 0.1.7 → 0.1.8

package/lib/client.js

@@ -922,16 +922,22 @@ function ModelPicker({
   const modelLabel = selected === void 0 ? t("form.modelDefault") : selected.label;
   const effortLabel = t(`form.effort.${effort}`);
   const trigger = effort === "none" ? modelLabel : `${modelLabel} ${effortLabel}`;
+  const modelGroups = Array.from(models.reduce((groups, item) => {
+    const group = groups.get(item.provider) ?? [];
+    group.push(item);
+    groups.set(item.provider, group);
+    return groups;
+  }, /* @__PURE__ */ new Map()));
   const open = (next) => {
     setPane(next);
     menu.setOpen(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `dsh-st-select is-pill${menu.open ? " is-open" : ""}`, ref: menu.root, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `dsh-st-model-select${menu.open ? " is-open" : ""}`, ref: menu.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         type: "button",
-        className: "dsh-st-select-btn",
+        className: "dsh-st-model-select-trigger",
         onMouseDown: (event) => event.stopPropagation(),
         onClick: () => {
           if (menu.open) {
@@ -946,38 +952,54 @@ function ModelPicker({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuPopup, { open: menu.open, anchor: menu.root, menuRef: menu.menu, up: true, end: true, className: "dsh-st-select-menu is-composer is-up is-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MenuPopup, { open: menu.open, anchor: menu.root, menuRef: menu.menu, up: true, end: true, className: "dsh-st-model-select-menu is-up is-end", children: [
       pane === "root" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuRow, { kv: true, label: t("form.model"), hint: modelLabel, chevron: true, onClick: () => setPane("model") }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuRow, { kv: true, label: t("form.effort"), hint: effortLabel, chevron: true, onClick: () => setPane("effort") })
       ] }),
       pane === "model" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          MenuRow,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
           {
-            label: t("form.modelDefault"),
-            active: modelKey === "default",
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": modelKey === "default",
+            className: "dsh-st-model-option",
             onClick: () => {
               onModelKey("default");
               menu.setOpen(false);
-            }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-st-model-option-copy", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-st-model-name", children: t("form.modelDefault") }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-st-model-check", children: modelKey === "default" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckOutlineIcon, { width: 16, height: 16 }) })
+            ]
           }
         ),
-        models.map((item) => {
-          const value = `${item.provider}::${item.model}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            MenuRow,
-            {
-              label: item.label,
-              active: value === modelKey,
-              onClick: () => {
-                onModelKey(value);
-                menu.setOpen(false);
-              }
-            },
-            value
-          );
-        })
+        modelGroups.map(([provider, group]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { role: "group", "aria-label": provider, className: "dsh-st-model-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dsh-st-model-group-title", children: provider }),
+          group.map((item) => {
+            const value = `${item.provider}::${item.model}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": value === modelKey,
+                className: "dsh-st-model-option",
+                title: item.label,
+                onClick: () => {
+                  onModelKey(value);
+                  menu.setOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-st-model-option-copy", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-st-model-name", children: item.label }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-st-model-check", children: value === modelKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckOutlineIcon, { width: 16, height: 16 }) })
+                ]
+              },
+              value
+            );
+          })
+        ] }, provider))
       ] }),
       pane === "effort" && EFFORTS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         MenuRow,
@@ -2924,6 +2946,7 @@ var CSS_TEXT = `
 .dsh-st-chip-btn:hover{background:rgba(255,255,255,.06);color:var(--dsw-alias-label-primary)}
 .dsh-st-chip-btn.is-static{cursor:default;opacity:.78}
 .dsh-st-chip-btn em,.dsh-st-select.is-pill .dsh-st-select-btn em{width:6px;height:6px;margin-left:2px;opacity:.55}
+.dsh-st-model-select{position:relative;z-index:1;min-width:0;flex:none}.dsh-st-model-select.is-open{z-index:30}.dsh-st-model-select-trigger{display:flex;align-items:center;gap:4px;min-width:0;max-width:220px;height:28px;padding:0 4px 0 8px;border:0;border-radius:24px;background:transparent;color:var(--dsw-alias-label-secondary);font-size:13px;font-weight:500;line-height:20px;cursor:pointer}.dsh-st-model-select-trigger:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.dsh-st-model-select-trigger>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dsh-st-model-select-trigger em{width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;flex:none}.dsh-st-model-select-menu{z-index:30;width:min(240px,calc(100vw - 32px));max-height:min(360px,calc(100vh - 96px));overflow:hidden;padding:4px;border:1px solid var(--dsw-alias-border-inverted,var(--dsw-alias-border-l2));border-radius:12px;background:var(--dsw-specific-menu,var(--dsw-alias-bg-base));box-shadow:var(--dsw-shadow-lv3)}.dsh-st-model-select-menu.is-float{position:absolute;z-index:1200;box-sizing:border-box}.dsh-st-model-select-menu .dsh-st-menu-row{min-height:40px;padding:0 10px;border-radius:10px;font-size:14px}.dsh-st-model-select-menu .dsh-st-menu-row.is-kv .dsh-st-menu-row-side{font-size:13px;color:var(--dsw-alias-label-tertiary)}.dsh-st-model-group+.dsh-st-model-group{margin-top:4px}.dsh-st-model-group-title{position:sticky;top:0;z-index:1;padding:5px 8px 3px;background:var(--dsw-specific-menu,var(--dsw-alias-bg-base));color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:500;line-height:18px}.dsh-st-model-option{display:flex;width:100%;min-height:38px;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--dsw-alias-label-primary);text-align:left;cursor:pointer}.dsh-st-model-option:hover,.dsh-st-model-option:focus-visible{background:var(--dsw-alias-interactive-bg-hover);outline:none}.dsh-st-model-option-copy{display:flex;min-width:0;flex:1;flex-direction:column}.dsh-st-model-name{overflow:hidden;font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.dsh-st-model-check{display:grid;flex:0 0 18px;place-items:center;color:var(--dsw-alias-label-primary)}
 .dsh-st-suffix{color:var(--dsw-alias-label-secondary);font-size:13px}
 .dsh-st-inline input.is-narrow{width:72px;flex:none}
 .dsh-st-time{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 8px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:rgba(255,255,255,.04)}