@1outres/dsh-plugin-model-picker 0.5.0 → 0.7.0

package/README.md

@@ -18,7 +18,13 @@ insert the same `model-picker` row.
 ## Using the picker
 
 Click the model name in the composer. The menu opens above it with the
-search field focused.
+search field focused. The menu never grows past the room above the button in
+the visible part of the page, so the Effort row stays on screen.
+
+On a touch screen the search field is not focused on open, since the
+on-screen keyboard would cover the list and the Effort row; tap the field to
+search. Dismissing the keyboard keeps the menu open, and a tap outside closes
+it.
 
 - **Empty search**: ★ Favorites, then the five most recent models you picked
   here (favorites excluded), then every provider with its heading pinned
@@ -30,8 +36,10 @@ search field focused.
   matches come first, then prefixes, word starts, and other substrings; ties
   go to favorites, then recent models, then catalog order.
 - **Effort**: the row at the bottom lists the current model's reasoning
-  levels (plus Default when the model has no default level). Switching to
-  another model keeps the current level when that model offers it.
+  levels (plus Default when the model has no default level). Each model
+  remembers the level you last used with it, so switching back restores it.
+  A model without a remembered level keeps the current one when it offers
+  it, and otherwise falls back to its own default.
 
 Each row shows a check for the current model, the model name, and the model
 id when it differs from the name.
@@ -67,8 +75,9 @@ profile patch:
         model: claude-opus-5-5
 ```
 
-Recent models are kept in this browser's local storage
-(`dsh-plugin-model-picker:recent:v1`), so every browser has its own list.
+Recent models and the effort remembered for each model are kept in this
+browser's local storage (`dsh-plugin-model-picker:recent:v1` and
+`dsh-plugin-model-picker:efforts:v1`), so every browser has its own lists.
 Only selections made in this picker count.
 
 A favorite or recent model whose provider is gone disappears from the menu but

package/lib/client.js

@@ -64,6 +64,76 @@ window.__ModuleLoader__.load({
 		  );
 		}
 
+		// ../dsh-plugin-model-picker/src/client/efforts.ts
+		var EFFORTS_STORAGE_KEY = "dsh-plugin-model-picker:efforts:v1";
+		var EFFORTS_STORED = 200;
+		function normalizeEfforts(value) {
+		  if (!Array.isArray(value)) return [];
+		  const seen = /* @__PURE__ */ new Set();
+		  const efforts = [];
+		  for (const item of value) {
+		    if (typeof item !== "object" || item === null) continue;
+		    const { provider, model, effort } = item;
+		    if (typeof provider !== "string" || typeof model !== "string") continue;
+		    if (typeof effort !== "string") continue;
+		    if (provider.length === 0 || model.length === 0 || effort.length === 0) continue;
+		    const key = refKey(provider, model);
+		    if (seen.has(key)) continue;
+		    seen.add(key);
+		    efforts.push({ provider, model, effort });
+		  }
+		  return efforts;
+		}
+		function sameEfforts(left, right) {
+		  if (left.length !== right.length) return false;
+		  return left.every(
+		    (item, index) => item.provider === right[index]?.provider && item.model === right[index]?.model && item.effort === right[index]?.effort
+		  );
+		}
+		function createEffortStore(storage, events) {
+		  const read = () => {
+		    if (storage === void 0) return [];
+		    try {
+		      const raw = storage.getItem(EFFORTS_STORAGE_KEY);
+		      return raw === null ? [] : normalizeEfforts(JSON.parse(raw)).slice(0, EFFORTS_STORED);
+		    } catch {
+		      return [];
+		    }
+		  };
+		  let snapshot = read();
+		  const replace = (next) => {
+		    if (sameEfforts(next, snapshot)) return;
+		    snapshot = next;
+		  };
+		  return {
+		    connect() {
+		      if (events === void 0) return () => {
+		      };
+		      const onStorage = (event) => {
+		        if (event.key === null || event.key === EFFORTS_STORAGE_KEY) replace(read());
+		      };
+		      events.addEventListener("storage", onStorage);
+		      return () => {
+		        events.removeEventListener("storage", onStorage);
+		      };
+		    },
+		    get(ref) {
+		      const key = refKey(ref.provider, ref.model);
+		      return snapshot.find((item) => refKey(item.provider, item.model) === key)?.effort;
+		    },
+		    remember(ref, effort) {
+		      const key = refKey(ref.provider, ref.model);
+		      const kept = snapshot.filter((item) => refKey(item.provider, item.model) !== key);
+		      const next = effort === void 0 ? kept : [{ provider: ref.provider, model: ref.model, effort }, ...kept].slice(0, EFFORTS_STORED);
+		      try {
+		        storage?.setItem(EFFORTS_STORAGE_KEY, JSON.stringify(next));
+		      } catch {
+		      }
+		      replace(next);
+		    }
+		  };
+		}
+
 		// ../dsh-plugin-model-picker/src/client/model.ts
 		var ACCOUNT_PROVIDER = "deepseek-account";
 		var OFFICIAL_PROVIDER = "deepseek-official";
@@ -199,6 +269,9 @@ window.__ModuleLoader__.load({
 		  if (effort === void 0 || target === void 0) return void 0;
 		  return target.efforts.some((level) => level.id === effort) ? effort : void 0;
 		}
+		function preferredEffort(remembered, current, target) {
+		  return carriedEffort(remembered, target) ?? carriedEffort(current, target);
+		}
 		function effortChoices(reasoning, defaultLabel) {
 		  if (reasoning === void 0) return [];
 		  return [
@@ -487,11 +560,41 @@ window.__ModuleLoader__.load({
 		  );
 		}
 
+		// ../dsh-plugin-model-picker/src/client/placement.ts
+		var DEFAULT_PLACEMENT = { margin: 12, gap: 8, minHeight: 160 };
+		function clamp(value, low, high) {
+		  return Math.min(Math.max(value, low), high);
+		}
+		function placeMenu(trigger, size, view, options = DEFAULT_PLACEMENT) {
+		  const { margin, gap, minHeight } = options;
+		  const room = Math.floor(trigger.top - gap - (view.top + margin));
+		  const maxHeight = room >= minHeight ? room : Math.max(minHeight, view.height - 2 * margin);
+		  const height = Math.min(size.height, maxHeight);
+		  let left = trigger.right - size.width;
+		  let top = trigger.top - gap - height;
+		  if (size.width > 0)
+		    left = clamp(left, view.left + margin, view.left + view.width - size.width - margin);
+		  if (height > 0) top = clamp(top, view.top + margin, view.top + view.height - height - margin);
+		  return { left, top, maxHeight };
+		}
+		function viewBoxOf(win) {
+		  const view = win.visualViewport;
+		  if (view === void 0 || view === null) {
+		    return { left: 0, top: 0, width: win.innerWidth, height: win.innerHeight };
+		  }
+		  return { left: view.offsetLeft, top: view.offsetTop, width: view.width, height: view.height };
+		}
+		function isCoarsePointer(win) {
+		  try {
+		    return win?.matchMedia?.("(hover: none) and (pointer: coarse)").matches === true;
+		  } catch {
+		    return false;
+		  }
+		}
+
 		// ../dsh-plugin-model-picker/src/client/Picker.tsx
 		var import_jsx_runtime2 = require("react/jsx-runtime");
 		var MEASURE_STYLE = { visibility: "hidden", left: 0, top: 0 };
-		var MARGIN = 12;
-		var GAP = 8;
 		var ROW_HEIGHT = 34;
 		var TOAST_HOLD_MS = 3e3;
 		var TOAST_FADE_MS = 1e3;
@@ -548,7 +651,7 @@ window.__ModuleLoader__.load({
 		  );
 		}
 		function ModelPicker(props) {
-		  const { locked, available, directory, load, select, favorites, recent, t } = props;
+		  const { locked, available, directory, load, select, favorites, recent, efforts, t } = props;
 		  const state = useObservable(directory);
 		  const favoriteRefs = useObservable(favorites);
 		  const recentRefs = useObservable(recent);
@@ -644,7 +747,7 @@ window.__ModuleLoader__.load({
 		    setQuery("");
 		    setHighlightId(null);
 		    setPreferFirst(false);
-		    focusSearchOnPlace.current = true;
+		    focusSearchOnPlace.current = !isCoarsePointer(window);
 		    setOpen(true);
 		    reload();
 		  };
@@ -665,6 +768,10 @@ window.__ModuleLoader__.load({
 		      (result) => {
 		        if (result === void 0) return;
 		        if (result.ok) {
+		          efforts.remember(
+		            { provider: selection.provider, model: selection.model },
+		            selection.reasoningEffort
+		          );
 		          if (record !== void 0) recent.push(record);
 		          if (rootRef.current !== null) closeAfterSelection();
 		          return;
@@ -684,7 +791,7 @@ window.__ModuleLoader__.load({
 		      closeAfterSelection();
 		      return;
 		    }
-		    const effort = carriedEffort(effective, entry.model.reasoning);
+		    const effort = preferredEffort(efforts.get(refOf(entry)), effective, entry.model.reasoning);
 		    submit(
 		      {
 		        provider: entry.provider.id,
@@ -730,14 +837,22 @@ window.__ModuleLoader__.load({
 		      if (menuRef.current?.contains(target) === true) return;
 		      setOpen(false);
 		    };
-		    document.addEventListener("mousedown", onPointer);
+		    document.addEventListener("pointerdown", onPointer);
 		    return () => {
-		      document.removeEventListener("mousedown", onPointer);
+		      document.removeEventListener("pointerdown", onPointer);
 		    };
 		  }, [open]);
 		  (0, import_react.useEffect)(() => {
 		    if (locked && open) setOpen(false);
 		  }, [locked, open]);
+		  const selectedProvider = current?.provider;
+		  const selectedModel = current?.model;
+		  const selectedEffort = current?.reasoningEffort;
+		  (0, import_react.useEffect)(() => {
+		    if (selectedProvider === void 0 || selectedModel === void 0) return;
+		    if (selectedEffort === void 0) return;
+		    efforts.remember({ provider: selectedProvider, model: selectedModel }, selectedEffort);
+		  }, [selectedProvider, selectedModel, selectedEffort, efforts]);
 		  const placed = menuPos !== null;
 		  (0, import_react.useLayoutEffect)(() => {
 		    if (!open || !placed || !focusSearchOnPlace.current) return;
@@ -761,19 +876,21 @@ window.__ModuleLoader__.load({
 		    const place = () => {
 		      const rect = triggerRef.current?.getBoundingClientRect();
 		      if (rect === void 0) return;
-		      const width = menuRef.current?.offsetWidth ?? 0;
-		      const height = menuRef.current?.offsetHeight ?? 0;
-		      let left = rect.right - width;
-		      let top = rect.top - GAP - height;
-		      if (width > 0) left = Math.min(Math.max(left, MARGIN), window.innerWidth - width - MARGIN);
-		      if (height > 0) top = Math.min(Math.max(top, MARGIN), window.innerHeight - height - MARGIN);
+		      const next = placeMenu(
+		        rect,
+		        { width: menuRef.current?.offsetWidth ?? 0, height: menuRef.current?.offsetHeight ?? 0 },
+		        viewBoxOf(window)
+		      );
 		      setMenuPos(
-		        (previous) => previous !== null && previous.left === left && previous.top === top ? previous : { left, top }
+		        (previous) => previous !== null && previous.left === next.left && previous.top === next.top && previous.maxHeight === next.maxHeight ? previous : next
 		      );
 		    };
 		    place();
 		    window.addEventListener("scroll", place, true);
 		    window.addEventListener("resize", place);
+		    const view = window.visualViewport;
+		    view?.addEventListener("resize", place);
+		    view?.addEventListener("scroll", place);
 		    const menu = menuRef.current;
 		    const observer = typeof ResizeObserver !== "undefined" && menu !== null ? new ResizeObserver(place) : null;
 		    if (menu !== null) observer?.observe(menu);
@@ -781,6 +898,8 @@ window.__ModuleLoader__.load({
 		      observer?.disconnect();
 		      window.removeEventListener("scroll", place, true);
 		      window.removeEventListener("resize", place);
+		      view?.removeEventListener("resize", place);
+		      view?.removeEventListener("scroll", place);
 		    };
 		  }, [available, open, state, sections, choices]);
 		  (0, import_react.useLayoutEffect)(() => {
@@ -909,6 +1028,7 @@ window.__ModuleLoader__.load({
 		    if (next instanceof Node && (rootRef.current?.contains(next) === true || menuRef.current?.contains(next) === true)) {
 		      return;
 		    }
+		    if (next === null && isCoarsePointer(window)) return;
 		    close();
 		  };
 		  const keepFocus = (event) => {
@@ -976,7 +1096,11 @@ window.__ModuleLoader__.load({
 		                id: menuId,
 		                className: "dsh-mp-menu",
 		                "data-menu-material": "translucent",
-		                style: menuPos ?? MEASURE_STYLE,
+		                style: menuPos === null ? MEASURE_STYLE : {
+		                  left: menuPos.left,
+		                  top: menuPos.top,
+		                  maxHeight: `min(560px, 100vh - 96px, ${menuPos.maxHeight}px)`
+		                },
 		                role: "group",
 		                "aria-label": t("menu.aria"),
 		                "aria-busy": loading || busy,
@@ -1341,8 +1465,10 @@ window.__ModuleLoader__.load({
 		  }, "model-picker: stylesheet");
 		  const favorites = createFavoritesStore(ctx.configForms.get(CONFIG_NAMESPACE));
 		  const recent = createRecentStore(browserStorage(), storageEvents());
+		  const efforts = createEffortStore(browserStorage(), storageEvents());
 		  ctx.effect(() => favorites.connect(), "model-picker: favorites");
 		  ctx.effect(() => recent.connect(), "model-picker: recent models");
+		  ctx.effect(() => efforts.connect(), "model-picker: per-model efforts");
 		  ctx.effect(
 		    () => ctx.slots.inject(
 		      SEAT,
@@ -1363,7 +1489,8 @@ window.__ModuleLoader__.load({
 		              },
 		              select: (selection) => available ? directory.select(selection) : Promise.resolve(void 0),
 		              favorites,
-		              recent
+		              recent,
+		              efforts
 		            };
 		          }
 		        },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1outres/dsh-plugin-model-picker",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A searchable composer model picker with favorites and recent models for DeepSeek Harness profiles with many providers.",
   "repository": {
     "type": "git",