dsh-monkeyai-sessions 0.1.13 → 0.1.15

package/README.md

@@ -61,7 +61,7 @@ From a checkout:
 npm install
 npm run build
 npm pack
-dsh plugin --profile web add ./dsh-monkeyai-sessions-0.1.13.tgz
+dsh plugin --profile web add ./dsh-monkeyai-sessions-0.1.15.tgz
 ```
 
 Verified against a real DSH `0.2.2-rc.1` web profile and a live MonkeyAI runtime: authorization, full history loading, prompt delivery, model switching, and turn cancellation all work end to end.

package/README.zh.md

@@ -28,7 +28,7 @@ https://artenx.github.io/dsh-monkeyai-sessions/index.json
 npm install
 npm run build
 npm pack
-dsh plugin --profile web add ./dsh-monkeyai-sessions-0.1.13.tgz
+dsh plugin --profile web add ./dsh-monkeyai-sessions-0.1.15.tgz
 ```
 
 已在真实的 DSH `0.2.2-rc.1` web profile 与在线 MonkeyAI runtime 上端到端验证：授权、完整历史加载、指令下发、模型切换、回合取消均正常工作。

package/client.js

@@ -586,7 +586,18 @@ window.__ModuleLoader__.load({
       composer: { display: "flex", gap: 8, alignItems: "flex-end" },
       textarea: { width: "100%", minHeight: 56, maxHeight: 200, boxSizing: "border-box", padding: "8px 11px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, resize: "vertical", outline: "none", fontSize: 13, lineHeight: 1.5, transition: "border-color .15s, box-shadow .15s" },
       details: { fontSize: 12, color: t.text2 },
-      summary: { cursor: "pointer", userSelect: "none", fontSize: 12, color: t.text2 }
+      summary: { cursor: "pointer", userSelect: "none", fontSize: 12, color: t.text2 },
+      modelPicker: { position: "relative", flex: "0 1 200px", minWidth: 132, maxWidth: "100%" },
+      modelPickerSummary: { display: "flex", alignItems: "center", gap: 6, width: "100%", boxSizing: "border-box", padding: "7px 10px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: "none", fontSize: 13, cursor: "pointer", listStyle: "none", userSelect: "none" },
+      modelPickerCaret: { flexShrink: 0, color: t.text3, fontSize: 9 },
+      modelMenu: { position: "absolute", right: 0, top: "calc(100% + 6px)", zIndex: 40, width: "max(100%, 264px)", maxWidth: "94vw", boxSizing: "border-box", display: "grid", gap: 6, padding: 8, borderRadius: 10, border: `1px solid ${t.border}`, background: t.surface, boxShadow: "0 10px 30px rgba(16,24,40,0.16)" },
+      modelMenuList: { display: "grid", gap: 2, maxHeight: "52vh", overflowY: "auto", overscrollBehavior: "contain" },
+      modelItem: { display: "flex", alignItems: "baseline", gap: 8, width: "100%", boxSizing: "border-box", padding: "7px 9px", borderRadius: 7, border: "1px solid transparent", background: "transparent", color: t.text, cursor: "pointer", fontSize: 12.5, textAlign: "left", transition: "background .12s" },
+      modelItemActive: { background: t.accentSoft, borderColor: t.border, fontWeight: 650 },
+      modelItemName: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left" },
+      modelItemMeta: { flexShrink: 0, fontSize: 11, color: t.text3 },
+      modelSearch: { width: "100%", boxSizing: "border-box", padding: "6px 9px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: "none", fontSize: 12.5 },
+      modelEmpty: { fontSize: 12, color: t.text3, textAlign: "center", padding: "10px 0" }
     };
     var PANEL_CSS = `
     .mai-panel input:focus, .mai-panel textarea:focus, .mai-panel select:focus { border-color: #3568e8 !important; box-shadow: 0 0 0 2px rgba(53,104,232,0.14) !important; }
@@ -603,6 +614,10 @@ window.__ModuleLoader__.load({
     .mai-panel .mai-card-hover { transition: border-color .15s, background .15s; }
     .mai-panel .mai-card-hover:not(:disabled):hover { border-color: #b9cdf3 !important; background: #f7faff !important; }
     .mai-panel .mai-toolbar { position: relative; }
+    .mai-panel .mai-model-picker > summary::-webkit-details-marker { display: none; }
+    .mai-panel .mai-model-picker > summary::before { content: none; }
+    .mai-panel .mai-model-picker-menu { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+    .mai-panel .mai-model-picker[open] .mai-model-picker-caret { transform: rotate(180deg); }
     .mai-panel .mai-workspace { display: grid; grid-template-columns: minmax(248px, 292px) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: stretch; }
     .mai-panel .mai-session-sidebar { min-height: min(70vh, 720px); }
     .mai-panel .mai-session-list { scrollbar-gutter: stable; }
@@ -624,6 +639,9 @@ window.__ModuleLoader__.load({
       .mai-panel .mai-page-title { font-size: 16px !important; }
       .mai-panel .mai-toolbar-controls { align-items: stretch; }
       .mai-panel .mai-toolbar-controls select { flex-basis: 100% !important; }
+      .mai-panel .mai-model-picker { flex: 1 1 100% !important; min-width: 0 !important; }
+      .mai-panel .mai-model-menu { position: fixed !important; inset: 50% 12px auto !important; transform: translateY(-50%); width: auto !important; max-width: none !important; max-height: 70vh !important; }
+      .mai-panel .mai-model-picker-menu { max-height: calc(70vh - 80px) !important; }
       .mai-panel .mai-session-list { grid-template-columns: 1fr !important; max-height: 210px; }
       .mai-panel .mai-thread { height: 68vh; min-height: 360px; padding: 10px; }
       .mai-panel .mai-thread-header { gap: 6px !important; }
@@ -657,7 +675,7 @@ window.__ModuleLoader__.load({
       });
     }
     function isRemoteStreamCarrierError(error) {
-      return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error));
+      return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error)) || /remote stream socket closed/i.test(errorText(error));
     }
     function renderMarkdown(text) {
       if (typeof text !== "string" || text === "") return null;
@@ -876,6 +894,7 @@ window.__ModuleLoader__.load({
       const [sessionStatus, setSessionStatus] = useState("");
       const [signInEmail, setSignInEmail] = useState("");
       const [signInPassword, setSignInPassword] = useState("");
+      const [modelFilter, setModelFilter] = useState("");
       const streamRef = useRef(null);
       const historyLoadedRef = useRef(false);
       const lastDraftRef = useRef("");
@@ -883,6 +902,16 @@ window.__ModuleLoader__.load({
       const eventsRef = useRef(null);
       const prevScrollHeightRef = useRef(null);
       const streamGenerationRef = useRef(0);
+      const modelPickerRef = useRef(null);
+      useEffect(() => {
+        if (typeof document === "undefined" || typeof document.addEventListener !== "function") return void 0;
+        const onDocClick = (event) => {
+          const picker = modelPickerRef.current;
+          if (picker && picker.open && picker.contains && !picker.contains(event.target)) picker.removeAttribute("open");
+        };
+        document.addEventListener("click", onDocClick);
+        return () => document.removeEventListener("click", onDocClick);
+      }, []);
       const title = useMemo(() => {
         const runtime = runtimeSessions.find((item) => item.id === sessionId);
         const summary = summarySessions.find((item) => item.id === sessionId);
@@ -1129,6 +1158,7 @@ window.__ModuleLoader__.load({
         setError("");
         setAnswerText("");
         setCurrentModel("");
+        setModelFilter("");
         setVisibleCount(RECENT_LIMIT);
         setHistoryLoading(true);
         setStatus("\u6B63\u5728\u8FDE\u63A5\u8FDC\u7A0B\u4F1A\u8BDD");
@@ -1152,7 +1182,7 @@ window.__ModuleLoader__.load({
                 setStatus("\u5386\u53F2\u5DF2\u52A0\u8F7D");
                 setHistoryLoading(false);
                 setSessionStatus((current) => current || "idle");
-                if (frame.model) setCurrentModel(frame.model);
+                if (frame.data?.model) setCurrentModel(frame.data.model);
               }
               if (frame.type === "history_incomplete") {
                 setStatus("\u5386\u53F2\u4E0D\u5B8C\u6574\uFF1A" + (frame.message || "\u56DE\u653E\u88AB\u4E2D\u65AD"));
@@ -1176,6 +1206,9 @@ window.__ModuleLoader__.load({
               if (frame.type === "request") {
                 setPendingRequests((current) => [...current.filter((item) => item.requestId !== frame.requestId), frame]);
               }
+              if (frame.type === "notification" && frame.method === "_monkeyai/session/model") {
+                if (typeof frame.data?.model === "string" && frame.data.model !== "") setCurrentModel(frame.data.model);
+              }
               if (frame.type === "notification" && frame.method === "_monkeyai/session/state") {
                 const status2 = frame.data?.state?.status;
                 if (typeof status2 === "string" && SESSION_STATUS_LABEL[status2]) {
@@ -1808,21 +1841,76 @@ window.__ModuleLoader__.load({
                 sessionStatus === "running" ? h("span", { className: "mai-pulse", style: { ...style.dot, background: t.accent } }) : null,
                 SESSION_STATUS_LABEL[sessionStatus]
               ) : null,
-              h(
-                "select",
-                {
-                  style: { ...style.input, flex: "0 1 190px", minWidth: 130 },
-                  value: currentModel,
-                  disabled: !hasControl || switchingModel || models.length === 0,
-                  title: "\u5207\u6362\u8BE5\u4F1A\u8BDD\u7684\u6A21\u578B",
-                  onChange: (event) => {
-                    const next = event.target.value;
-                    if (next && next !== currentModel) switchSessionModel(next);
-                  }
-                },
-                currentModel && !models.some((m) => m.id === currentModel) ? h("option", { value: currentModel }, currentModel.slice(0, 24)) : null,
-                models.map((m) => h("option", { key: m.id, value: m.id }, `${m.displayName} (${Math.round(m.contextWindowTokens / 1e3)}k)`))
-              )
+              (() => {
+                const modelPickerDisabled = !hasControl || switchingModel || models.length === 0;
+                const currentModelInfo = models.find((m) => m.id === currentModel);
+                const currentModelUnknown = Boolean(currentModel && !currentModelInfo);
+                const needle = modelFilter.trim().toLowerCase();
+                const filteredModels = needle === "" ? models : models.filter((m) => `${m.displayName} ${m.model ?? ""} ${m.id}`.toLowerCase().includes(needle));
+                return h(
+                  "details",
+                  {
+                    className: "mai-model-picker",
+                    style: { ...style.modelPicker, ...modelPickerDisabled ? { opacity: 0.5, pointerEvents: "none" } : {} },
+                    ref: modelPickerRef
+                  },
+                  h(
+                    "summary",
+                    { style: style.modelPickerSummary, title: "\u5207\u6362\u8BE5\u4F1A\u8BDD\u7684\u6A21\u578B" },
+                    h("span", { className: "mai-model-picker-caret", style: { ...style.modelPickerCaret, flexShrink: 0 } }, "\u25BE"),
+                    h(
+                      "span",
+                      { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left" } },
+                      currentModelInfo ? `${currentModelInfo.displayName} (${Math.round(currentModelInfo.contextWindowTokens / 1e3)}k)` : currentModel ? currentModel.slice(0, 24) : "\u4F1A\u8BDD\u6A21\u578B"
+                    )
+                  ),
+                  h(
+                    "div",
+                    { className: "mai-model-menu", style: style.modelMenu },
+                    models.length > 6 ? h("input", {
+                      type: "search",
+                      placeholder: "\u641C\u7D22\u6A21\u578B\u2026",
+                      "aria-label": "\u641C\u7D22\u6A21\u578B",
+                      value: modelFilter,
+                      style: style.modelSearch,
+                      onChange: (event) => setModelFilter(event.target.value)
+                    }) : null,
+                    h(
+                      "div",
+                      { className: "mai-model-picker-menu", style: style.modelMenuList },
+                      currentModelUnknown && (needle === "" || currentModel.toLowerCase().includes(needle)) ? h(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: true,
+                          "aria-pressed": true,
+                          style: { ...style.modelItem, ...style.modelItemActive }
+                        },
+                        h("span", { style: style.modelItemName }, currentModel.slice(0, 24)),
+                        h("span", { style: style.modelItemMeta }, "\u5F53\u524D\u6A21\u578B")
+                      ) : null,
+                      filteredModels.length === 0 ? h("div", { style: style.modelEmpty }, "\u6CA1\u6709\u5339\u914D\u7684\u6A21\u578B") : null,
+                      filteredModels.map((m) => h(
+                        "button",
+                        {
+                          key: m.id,
+                          type: "button",
+                          "aria-pressed": m.id === currentModel,
+                          style: { ...style.modelItem, ...m.id === currentModel ? style.modelItemActive : {} },
+                          disabled: !hasControl || switchingModel,
+                          title: m.model && m.model !== m.displayName ? m.model : void 0,
+                          onClick: () => {
+                            if (m.id !== currentModel) switchSessionModel(m.id);
+                            modelPickerRef.current?.removeAttribute("open");
+                          }
+                        },
+                        h("span", { style: style.modelItemName }, m.displayName),
+                        h("span", { style: style.modelItemMeta }, `${Math.round(m.contextWindowTokens / 1e3)}k`)
+                      ))
+                    )
+                  )
+                );
+              })()
             ),
             h(
               "div",

package/lib/client-runtime.cjs

@@ -581,7 +581,18 @@ var style = {
   composer: { display: "flex", gap: 8, alignItems: "flex-end" },
   textarea: { width: "100%", minHeight: 56, maxHeight: 200, boxSizing: "border-box", padding: "8px 11px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, resize: "vertical", outline: "none", fontSize: 13, lineHeight: 1.5, transition: "border-color .15s, box-shadow .15s" },
   details: { fontSize: 12, color: t.text2 },
-  summary: { cursor: "pointer", userSelect: "none", fontSize: 12, color: t.text2 }
+  summary: { cursor: "pointer", userSelect: "none", fontSize: 12, color: t.text2 },
+  modelPicker: { position: "relative", flex: "0 1 200px", minWidth: 132, maxWidth: "100%" },
+  modelPickerSummary: { display: "flex", alignItems: "center", gap: 6, width: "100%", boxSizing: "border-box", padding: "7px 10px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: "none", fontSize: 13, cursor: "pointer", listStyle: "none", userSelect: "none" },
+  modelPickerCaret: { flexShrink: 0, color: t.text3, fontSize: 9 },
+  modelMenu: { position: "absolute", right: 0, top: "calc(100% + 6px)", zIndex: 40, width: "max(100%, 264px)", maxWidth: "94vw", boxSizing: "border-box", display: "grid", gap: 6, padding: 8, borderRadius: 10, border: `1px solid ${t.border}`, background: t.surface, boxShadow: "0 10px 30px rgba(16,24,40,0.16)" },
+  modelMenuList: { display: "grid", gap: 2, maxHeight: "52vh", overflowY: "auto", overscrollBehavior: "contain" },
+  modelItem: { display: "flex", alignItems: "baseline", gap: 8, width: "100%", boxSizing: "border-box", padding: "7px 9px", borderRadius: 7, border: "1px solid transparent", background: "transparent", color: t.text, cursor: "pointer", fontSize: 12.5, textAlign: "left", transition: "background .12s" },
+  modelItemActive: { background: t.accentSoft, borderColor: t.border, fontWeight: 650 },
+  modelItemName: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left" },
+  modelItemMeta: { flexShrink: 0, fontSize: 11, color: t.text3 },
+  modelSearch: { width: "100%", boxSizing: "border-box", padding: "6px 9px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: "none", fontSize: 12.5 },
+  modelEmpty: { fontSize: 12, color: t.text3, textAlign: "center", padding: "10px 0" }
 };
 var PANEL_CSS = `
 .mai-panel input:focus, .mai-panel textarea:focus, .mai-panel select:focus { border-color: #3568e8 !important; box-shadow: 0 0 0 2px rgba(53,104,232,0.14) !important; }
@@ -598,6 +609,10 @@ var PANEL_CSS = `
 .mai-panel .mai-card-hover { transition: border-color .15s, background .15s; }
 .mai-panel .mai-card-hover:not(:disabled):hover { border-color: #b9cdf3 !important; background: #f7faff !important; }
 .mai-panel .mai-toolbar { position: relative; }
+.mai-panel .mai-model-picker > summary::-webkit-details-marker { display: none; }
+.mai-panel .mai-model-picker > summary::before { content: none; }
+.mai-panel .mai-model-picker-menu { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+.mai-panel .mai-model-picker[open] .mai-model-picker-caret { transform: rotate(180deg); }
 .mai-panel .mai-workspace { display: grid; grid-template-columns: minmax(248px, 292px) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: stretch; }
 .mai-panel .mai-session-sidebar { min-height: min(70vh, 720px); }
 .mai-panel .mai-session-list { scrollbar-gutter: stable; }
@@ -619,6 +634,9 @@ var PANEL_CSS = `
   .mai-panel .mai-page-title { font-size: 16px !important; }
   .mai-panel .mai-toolbar-controls { align-items: stretch; }
   .mai-panel .mai-toolbar-controls select { flex-basis: 100% !important; }
+  .mai-panel .mai-model-picker { flex: 1 1 100% !important; min-width: 0 !important; }
+  .mai-panel .mai-model-menu { position: fixed !important; inset: 50% 12px auto !important; transform: translateY(-50%); width: auto !important; max-width: none !important; max-height: 70vh !important; }
+  .mai-panel .mai-model-picker-menu { max-height: calc(70vh - 80px) !important; }
   .mai-panel .mai-session-list { grid-template-columns: 1fr !important; max-height: 210px; }
   .mai-panel .mai-thread { height: 68vh; min-height: 360px; padding: 10px; }
   .mai-panel .mai-thread-header { gap: 6px !important; }
@@ -652,7 +670,7 @@ function withTimeout(promise, timeoutMs, label) {
   });
 }
 function isRemoteStreamCarrierError(error) {
-  return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error));
+  return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error)) || /remote stream socket closed/i.test(errorText(error));
 }
 function renderMarkdown(text) {
   if (typeof text !== "string" || text === "") return null;
@@ -871,6 +889,7 @@ function RemoteSessionPage({ api }) {
   const [sessionStatus, setSessionStatus] = useState("");
   const [signInEmail, setSignInEmail] = useState("");
   const [signInPassword, setSignInPassword] = useState("");
+  const [modelFilter, setModelFilter] = useState("");
   const streamRef = useRef(null);
   const historyLoadedRef = useRef(false);
   const lastDraftRef = useRef("");
@@ -878,6 +897,16 @@ function RemoteSessionPage({ api }) {
   const eventsRef = useRef(null);
   const prevScrollHeightRef = useRef(null);
   const streamGenerationRef = useRef(0);
+  const modelPickerRef = useRef(null);
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof document.addEventListener !== "function") return void 0;
+    const onDocClick = (event) => {
+      const picker = modelPickerRef.current;
+      if (picker && picker.open && picker.contains && !picker.contains(event.target)) picker.removeAttribute("open");
+    };
+    document.addEventListener("click", onDocClick);
+    return () => document.removeEventListener("click", onDocClick);
+  }, []);
   const title = useMemo(() => {
     const runtime = runtimeSessions.find((item) => item.id === sessionId);
     const summary = summarySessions.find((item) => item.id === sessionId);
@@ -1124,6 +1153,7 @@ function RemoteSessionPage({ api }) {
     setError("");
     setAnswerText("");
     setCurrentModel("");
+    setModelFilter("");
     setVisibleCount(RECENT_LIMIT);
     setHistoryLoading(true);
     setStatus("\u6B63\u5728\u8FDE\u63A5\u8FDC\u7A0B\u4F1A\u8BDD");
@@ -1147,7 +1177,7 @@ function RemoteSessionPage({ api }) {
             setStatus("\u5386\u53F2\u5DF2\u52A0\u8F7D");
             setHistoryLoading(false);
             setSessionStatus((current) => current || "idle");
-            if (frame.model) setCurrentModel(frame.model);
+            if (frame.data?.model) setCurrentModel(frame.data.model);
           }
           if (frame.type === "history_incomplete") {
             setStatus("\u5386\u53F2\u4E0D\u5B8C\u6574\uFF1A" + (frame.message || "\u56DE\u653E\u88AB\u4E2D\u65AD"));
@@ -1171,6 +1201,9 @@ function RemoteSessionPage({ api }) {
           if (frame.type === "request") {
             setPendingRequests((current) => [...current.filter((item) => item.requestId !== frame.requestId), frame]);
           }
+          if (frame.type === "notification" && frame.method === "_monkeyai/session/model") {
+            if (typeof frame.data?.model === "string" && frame.data.model !== "") setCurrentModel(frame.data.model);
+          }
           if (frame.type === "notification" && frame.method === "_monkeyai/session/state") {
             const status2 = frame.data?.state?.status;
             if (typeof status2 === "string" && SESSION_STATUS_LABEL[status2]) {
@@ -1803,21 +1836,76 @@ function RemoteSessionPage({ api }) {
             sessionStatus === "running" ? h("span", { className: "mai-pulse", style: { ...style.dot, background: t.accent } }) : null,
             SESSION_STATUS_LABEL[sessionStatus]
           ) : null,
-          h(
-            "select",
-            {
-              style: { ...style.input, flex: "0 1 190px", minWidth: 130 },
-              value: currentModel,
-              disabled: !hasControl || switchingModel || models.length === 0,
-              title: "\u5207\u6362\u8BE5\u4F1A\u8BDD\u7684\u6A21\u578B",
-              onChange: (event) => {
-                const next = event.target.value;
-                if (next && next !== currentModel) switchSessionModel(next);
-              }
-            },
-            currentModel && !models.some((m) => m.id === currentModel) ? h("option", { value: currentModel }, currentModel.slice(0, 24)) : null,
-            models.map((m) => h("option", { key: m.id, value: m.id }, `${m.displayName} (${Math.round(m.contextWindowTokens / 1e3)}k)`))
-          )
+          (() => {
+            const modelPickerDisabled = !hasControl || switchingModel || models.length === 0;
+            const currentModelInfo = models.find((m) => m.id === currentModel);
+            const currentModelUnknown = Boolean(currentModel && !currentModelInfo);
+            const needle = modelFilter.trim().toLowerCase();
+            const filteredModels = needle === "" ? models : models.filter((m) => `${m.displayName} ${m.model ?? ""} ${m.id}`.toLowerCase().includes(needle));
+            return h(
+              "details",
+              {
+                className: "mai-model-picker",
+                style: { ...style.modelPicker, ...modelPickerDisabled ? { opacity: 0.5, pointerEvents: "none" } : {} },
+                ref: modelPickerRef
+              },
+              h(
+                "summary",
+                { style: style.modelPickerSummary, title: "\u5207\u6362\u8BE5\u4F1A\u8BDD\u7684\u6A21\u578B" },
+                h("span", { className: "mai-model-picker-caret", style: { ...style.modelPickerCaret, flexShrink: 0 } }, "\u25BE"),
+                h(
+                  "span",
+                  { style: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left" } },
+                  currentModelInfo ? `${currentModelInfo.displayName} (${Math.round(currentModelInfo.contextWindowTokens / 1e3)}k)` : currentModel ? currentModel.slice(0, 24) : "\u4F1A\u8BDD\u6A21\u578B"
+                )
+              ),
+              h(
+                "div",
+                { className: "mai-model-menu", style: style.modelMenu },
+                models.length > 6 ? h("input", {
+                  type: "search",
+                  placeholder: "\u641C\u7D22\u6A21\u578B\u2026",
+                  "aria-label": "\u641C\u7D22\u6A21\u578B",
+                  value: modelFilter,
+                  style: style.modelSearch,
+                  onChange: (event) => setModelFilter(event.target.value)
+                }) : null,
+                h(
+                  "div",
+                  { className: "mai-model-picker-menu", style: style.modelMenuList },
+                  currentModelUnknown && (needle === "" || currentModel.toLowerCase().includes(needle)) ? h(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: true,
+                      "aria-pressed": true,
+                      style: { ...style.modelItem, ...style.modelItemActive }
+                    },
+                    h("span", { style: style.modelItemName }, currentModel.slice(0, 24)),
+                    h("span", { style: style.modelItemMeta }, "\u5F53\u524D\u6A21\u578B")
+                  ) : null,
+                  filteredModels.length === 0 ? h("div", { style: style.modelEmpty }, "\u6CA1\u6709\u5339\u914D\u7684\u6A21\u578B") : null,
+                  filteredModels.map((m) => h(
+                    "button",
+                    {
+                      key: m.id,
+                      type: "button",
+                      "aria-pressed": m.id === currentModel,
+                      style: { ...style.modelItem, ...m.id === currentModel ? style.modelItemActive : {} },
+                      disabled: !hasControl || switchingModel,
+                      title: m.model && m.model !== m.displayName ? m.model : void 0,
+                      onClick: () => {
+                        if (m.id !== currentModel) switchSessionModel(m.id);
+                        modelPickerRef.current?.removeAttribute("open");
+                      }
+                    },
+                    h("span", { style: style.modelItemName }, m.displayName),
+                    h("span", { style: style.modelItemMeta }, `${Math.round(m.contextWindowTokens / 1e3)}k`)
+                  ))
+                )
+              )
+            );
+          })()
         ),
         h(
           "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-monkeyai-sessions",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "在 DeepSeek Harness 中读取和继续 MonkeyAI 会话：查看完整对话历史、下发新指令，无缝接续之前在 MonkeyAI 客户端上的工作",
   "type": "module",
   "license": "MIT",

package/src/client/index.js

@@ -72,6 +72,17 @@ const style = {
   textarea: { width: '100%', minHeight: 56, maxHeight: 200, boxSizing: 'border-box', padding: '8px 11px', borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, resize: 'vertical', outline: 'none', fontSize: 13, lineHeight: 1.5, transition: 'border-color .15s, box-shadow .15s' },
   details: { fontSize: 12, color: t.text2 },
   summary: { cursor: 'pointer', userSelect: 'none', fontSize: 12, color: t.text2 },
+  modelPicker: { position: 'relative', flex: '0 1 200px', minWidth: 132, maxWidth: '100%' },
+  modelPickerSummary: { display: 'flex', alignItems: 'center', gap: 6, width: '100%', boxSizing: 'border-box', padding: '7px 10px', borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: 'none', fontSize: 13, cursor: 'pointer', listStyle: 'none', userSelect: 'none' },
+  modelPickerCaret: { flexShrink: 0, color: t.text3, fontSize: 9 },
+  modelMenu: { position: 'absolute', right: 0, top: 'calc(100% + 6px)', zIndex: 40, width: 'max(100%, 264px)', maxWidth: '94vw', boxSizing: 'border-box', display: 'grid', gap: 6, padding: 8, borderRadius: 10, border: `1px solid ${t.border}`, background: t.surface, boxShadow: '0 10px 30px rgba(16,24,40,0.16)' },
+  modelMenuList: { display: 'grid', gap: 2, maxHeight: '52vh', overflowY: 'auto', overscrollBehavior: 'contain' },
+  modelItem: { display: 'flex', alignItems: 'baseline', gap: 8, width: '100%', boxSizing: 'border-box', padding: '7px 9px', borderRadius: 7, border: '1px solid transparent', background: 'transparent', color: t.text, cursor: 'pointer', fontSize: 12.5, textAlign: 'left', transition: 'background .12s' },
+  modelItemActive: { background: t.accentSoft, borderColor: t.border, fontWeight: 650 },
+  modelItemName: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' },
+  modelItemMeta: { flexShrink: 0, fontSize: 11, color: t.text3 },
+  modelSearch: { width: '100%', boxSizing: 'border-box', padding: '6px 9px', borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: 'none', fontSize: 12.5 },
+  modelEmpty: { fontSize: 12, color: t.text3, textAlign: 'center', padding: '10px 0' },
 }
 
 const PANEL_CSS = `
@@ -89,6 +100,10 @@ const PANEL_CSS = `
 .mai-panel .mai-card-hover { transition: border-color .15s, background .15s; }
 .mai-panel .mai-card-hover:not(:disabled):hover { border-color: #b9cdf3 !important; background: #f7faff !important; }
 .mai-panel .mai-toolbar { position: relative; }
+.mai-panel .mai-model-picker > summary::-webkit-details-marker { display: none; }
+.mai-panel .mai-model-picker > summary::before { content: none; }
+.mai-panel .mai-model-picker-menu { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+.mai-panel .mai-model-picker[open] .mai-model-picker-caret { transform: rotate(180deg); }
 .mai-panel .mai-workspace { display: grid; grid-template-columns: minmax(248px, 292px) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: stretch; }
 .mai-panel .mai-session-sidebar { min-height: min(70vh, 720px); }
 .mai-panel .mai-session-list { scrollbar-gutter: stable; }
@@ -110,6 +125,9 @@ const PANEL_CSS = `
   .mai-panel .mai-page-title { font-size: 16px !important; }
   .mai-panel .mai-toolbar-controls { align-items: stretch; }
   .mai-panel .mai-toolbar-controls select { flex-basis: 100% !important; }
+  .mai-panel .mai-model-picker { flex: 1 1 100% !important; min-width: 0 !important; }
+  .mai-panel .mai-model-menu { position: fixed !important; inset: 50% 12px auto !important; transform: translateY(-50%); width: auto !important; max-width: none !important; max-height: 70vh !important; }
+  .mai-panel .mai-model-picker-menu { max-height: calc(70vh - 80px) !important; }
   .mai-panel .mai-session-list { grid-template-columns: 1fr !important; max-height: 210px; }
   .mai-panel .mai-thread { height: 68vh; min-height: 360px; padding: 10px; }
   .mai-panel .mai-thread-header { gap: 6px !important; }
@@ -141,6 +159,7 @@ function withTimeout(promise, timeoutMs, label) {
 
 function isRemoteStreamCarrierError(error) {
   return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error))
+    || /remote stream socket closed/i.test(errorText(error))
 }
 
 // Lightweight inline markdown: fenced code blocks, `code`, **bold**,
@@ -342,6 +361,7 @@ function RemoteSessionPage({ api }) {
   const [sessionStatus, setSessionStatus] = useState('')
   const [signInEmail, setSignInEmail] = useState('')
   const [signInPassword, setSignInPassword] = useState('')
+  const [modelFilter, setModelFilter] = useState('')
   const streamRef = useRef(null)
   const historyLoadedRef = useRef(false)
   const lastDraftRef = useRef('')
@@ -349,6 +369,17 @@ function RemoteSessionPage({ api }) {
   const eventsRef = useRef(null)
   const prevScrollHeightRef = useRef(null)
   const streamGenerationRef = useRef(0)
+  const modelPickerRef = useRef(null)
+
+  useEffect(() => {
+    if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined
+    const onDocClick = event => {
+      const picker = modelPickerRef.current
+      if (picker && picker.open && picker.contains && !picker.contains(event.target)) picker.removeAttribute('open')
+    }
+    document.addEventListener('click', onDocClick)
+    return () => document.removeEventListener('click', onDocClick)
+  }, [])
   const title = useMemo(() => {
     const runtime = runtimeSessions.find(item => item.id === sessionId)
     const summary = summarySessions.find(item => item.id === sessionId)
@@ -605,6 +636,7 @@ function RemoteSessionPage({ api }) {
     setError('')
     setAnswerText('')
     setCurrentModel('')
+    setModelFilter('')
     setVisibleCount(RECENT_LIMIT)
     setHistoryLoading(true)
     setStatus('正在连接远程会话')
@@ -628,7 +660,7 @@ function RemoteSessionPage({ api }) {
             setStatus('历史已加载')
             setHistoryLoading(false)
             setSessionStatus(current => current || 'idle')
-            if (frame.model) setCurrentModel(frame.model)
+            if (frame.data?.model) setCurrentModel(frame.data.model)
           }
           if (frame.type === 'history_incomplete') {
             setStatus('历史不完整：' + (frame.message || '回放被中断'))
@@ -652,6 +684,9 @@ function RemoteSessionPage({ api }) {
           if (frame.type === 'request') {
             setPendingRequests(current => [...current.filter(item => item.requestId !== frame.requestId), frame])
           }
+          if (frame.type === 'notification' && frame.method === '_monkeyai/session/model') {
+            if (typeof frame.data?.model === 'string' && frame.data.model !== '') setCurrentModel(frame.data.model)
+          }
           if (frame.type === 'notification' && frame.method === '_monkeyai/session/state') {
             const status = frame.data?.state?.status
             if (typeof status === 'string' && SESSION_STATUS_LABEL[status]) {
@@ -1141,20 +1176,55 @@ function RemoteSessionPage({ api }) {
         },
           sessionStatus === 'running' ? h('span', { className: 'mai-pulse', style: { ...style.dot, background: t.accent } }) : null,
           SESSION_STATUS_LABEL[sessionStatus]) : null,
-        h('select', {
-          style: { ...style.input, flex: '0 1 190px', minWidth: 130 },
-          value: currentModel,
-          disabled: !hasControl || switchingModel || models.length === 0,
-          title: '切换该会话的模型',
-          onChange: event => {
-            const next = event.target.value
-            if (next && next !== currentModel) switchSessionModel(next)
+        (() => {
+          const modelPickerDisabled = !hasControl || switchingModel || models.length === 0
+          const currentModelInfo = models.find(m => m.id === currentModel)
+          const currentModelUnknown = Boolean(currentModel && !currentModelInfo)
+          const needle = modelFilter.trim().toLowerCase()
+          const filteredModels = needle === ''
+            ? models
+            : models.filter(m => `${m.displayName} ${m.model ?? ''} ${m.id}`.toLowerCase().includes(needle))
+          return h('details', {
+            className: 'mai-model-picker',
+            style: { ...style.modelPicker, ...(modelPickerDisabled ? { opacity: 0.5, pointerEvents: 'none' } : {}) },
+            ref: modelPickerRef,
           },
-        },
-          currentModel && !models.some(m => m.id === currentModel)
-            ? h('option', { value: currentModel }, currentModel.slice(0, 24))
-            : null,
-          models.map(m => h('option', { key: m.id, value: m.id }, `${m.displayName} (${Math.round(m.contextWindowTokens / 1000)}k)`)))),
+          h('summary', { style: style.modelPickerSummary, title: '切换该会话的模型' },
+            h('span', { className: 'mai-model-picker-caret', style: { ...style.modelPickerCaret, flexShrink: 0 } }, '▾'),
+            h('span', { style: { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' } },
+              currentModelInfo
+                ? `${currentModelInfo.displayName} (${Math.round(currentModelInfo.contextWindowTokens / 1000)}k)`
+                : currentModel ? currentModel.slice(0, 24) : '会话模型')),
+          h('div', { className: 'mai-model-menu', style: style.modelMenu },
+            models.length > 6 ? h('input', {
+              type: 'search', placeholder: '搜索模型…', 'aria-label': '搜索模型', value: modelFilter,
+              style: style.modelSearch,
+              onChange: event => setModelFilter(event.target.value),
+            }) : null,
+            h('div', { className: 'mai-model-picker-menu', style: style.modelMenuList },
+              currentModelUnknown && (needle === '' || currentModel.toLowerCase().includes(needle))
+                ? h('button', {
+                  type: 'button', disabled: true, 'aria-pressed': true,
+                  style: { ...style.modelItem, ...style.modelItemActive },
+                },
+                  h('span', { style: style.modelItemName }, currentModel.slice(0, 24)),
+                  h('span', { style: style.modelItemMeta }, '当前模型'))
+                : null,
+              filteredModels.length === 0 ? h('div', { style: style.modelEmpty }, '没有匹配的模型') : null,
+              filteredModels.map(m => h('button', {
+                key: m.id, type: 'button',
+                'aria-pressed': m.id === currentModel,
+                style: { ...style.modelItem, ...(m.id === currentModel ? style.modelItemActive : {}) },
+                disabled: !hasControl || switchingModel,
+                title: m.model && m.model !== m.displayName ? m.model : undefined,
+                onClick: () => {
+                  if (m.id !== currentModel) switchSessionModel(m.id)
+                  modelPickerRef.current?.removeAttribute('open')
+                },
+              },
+                h('span', { style: style.modelItemName }, m.displayName),
+                h('span', { style: style.modelItemMeta }, `${Math.round(m.contextWindowTokens / 1000)}k`))))))
+        })()),
       h('div', { style: style.events, className: 'mai-thread-events mai-events', 'aria-live': 'polite', 'data-events': '', ref: eventsRef,
           onScroll: event => {
             const el = event.currentTarget

package/src/host/monkeyai-remote.js

@@ -739,7 +739,9 @@ export class MonkeyAIRemoteService extends TypertRemoteService {
     const emitHistoryLoaded = model => {
       if (historyLoadedEmitted) return
       historyLoadedEmitted = true
-      emit({ type: 'history_loaded', sessionId: selectedSession, ...(model === undefined ? {} : { model }) })
+      // model travels inside data: the RemoteFrame schema only passes through
+      // declared top-level fields, so a bare `model` key would be stripped.
+      emit({ type: 'history_loaded', sessionId: selectedSession, ...(model === undefined ? {} : { data: { model } }) })
     }
     const refreshPersistedHistory = async changedMessageId => {
       if (!ticketHttpBase || !ticketValue) return
@@ -1055,23 +1057,50 @@ export class MonkeyAIRemoteService extends TypertRemoteService {
       ticketHttpBase = ticket.httpBase
       if (signal.aborted) throw signal.reason ?? new Error('远程会话已取消')
 
+      // Surface the session's current model as early as possible. Large
+      // histories paginate slowly and the stream carrier can drop mid-walk;
+      // a one-message read already carries session.model, so the model picker
+      // syncs before (and independently of) the history walk.
+      try {
+        const probeTimeout = AbortSignal.any([AbortSignal.timeout(20_000), ...(signal ? [signal] : [])])
+        const modelProbe = await readSessionHistoryPage({ httpBase: ticket.httpBase, ticket: ticketValue, sessionId: selectedSession, limit: 1, signal: probeTimeout })
+        if (typeof modelProbe.session?.model === 'string' && modelProbe.session.model !== '') {
+          yield { type: 'notification', sessionId: selectedSession, method: '_monkeyai/session/model', data: { model: modelProbe.session.model } }
+        }
+      } catch {
+        // Best-effort: history_loaded still carries the model when its walk
+        // completes, and the picker shows the placeholder meanwhile.
+      }
+
       // Load the full history over the runtime's HTTP read channel before the
       // ACP connection starts. The ACP session/load replay only streams a
       // small recent window and the socket is closed mid-replay; the HTTP
-      // endpoint paginates the complete message log by cursor instead.
+      // endpoint paginates the complete message log by cursor instead. Yield
+      // the completed history before ACP session/load so a slow runtime mount
+      // cannot keep the panel's history spinner active.
       try {
+        const historyFrames = []
         const history = await fetchFullSessionHistory({
           httpBase: ticket.httpBase,
           ticket: ticketValue,
           sessionId: selectedSession,
           signal,
-          onFrame: async frame => { await emit(frame) },
+          onFrame: frame => { historyFrames.push(frame) },
         })
+        for (const frame of historyFrames) yield frame
         for (const id of history.messageIds) httpHistoryMessageIds.add(id)
         if (history.count > 0) {
           httpHistoryComplete = true
           httpConfigurationRevision = history.configurationRevision
-          emitHistoryLoaded()
+          // The runtime's session/load response omits the current model; the
+          // history channel's session object carries it, so surface it with
+          // history_loaded to preselect the right entry in the model picker.
+          historyLoadedEmitted = true
+          yield {
+            type: 'history_loaded',
+            sessionId: selectedSession,
+            ...(history.sessionModel === undefined ? {} : { data: { model: history.sessionModel } }),
+          }
         }
       } catch (historyError) {
         if (signal?.aborted) throw historyError
@@ -1518,12 +1547,16 @@ async function fetchFullSessionHistory({ httpBase, ticket, sessionId, signal, on
   const toolCallsById = {}
   let cursor
   let configurationRevision
+  let sessionModel
   for (let page = 0; page < maxPages; page++) {
     const timeout = AbortSignal.any([AbortSignal.timeout(30_000), ...(signal ? [signal] : [])])
     const result = await readSessionHistoryPage({ httpBase, ticket, sessionId, cursor, direction: 'older', signal: timeout })
     if (Number.isSafeInteger(result.session?.configurationRevision)) {
       configurationRevision = result.session.configurationRevision
     }
+    if (typeof result.session?.model === 'string' && result.session.model !== '') {
+      sessionModel = result.session.model
+    }
     const pageMessages = []
     for (const message of Array.isArray(result.messages) ? result.messages : []) {
       if (typeof message?.id !== 'string' || message.id === '' || seenIds.has(message.id)) continue
@@ -1540,7 +1573,7 @@ async function fetchFullSessionHistory({ httpBase, ticket, sessionId, signal, on
       for (const frame of historyMessageToFrames(sessionId, message, toolCallsById)) await onFrame(frame)
     }
   }
-  return { messageIds: [...seenIds], count: seenIds.size, configurationRevision }
+  return { messageIds: [...seenIds], count: seenIds.size, configurationRevision, sessionModel }
 }
 
 // Refresh only the newest pages after a _monkeyai/session/history_changed