micro-models-agent 2.10.0 → 2.12.0

package/dist/assets/js/settings.js

@@ -12,6 +12,7 @@ import { contextLabel } from "./format.js";
 import { closeAllMenus, setSessOpen } from "./tabs.js";
 import { setIndicator, closeConfirm, confirmOverlay, trapTab } from "./dialog.js";
 import { controlFor, PANEL_SECTIONS, keyToPanel } from "./settings-controls.js";
+import { setLayout } from "./rail.js";
 
 function setSelButton(btn, label, value) {
   btn.textContent = label + ":";
@@ -131,6 +132,52 @@ export function renderSelectors() {
     setTimeout(() => input.focus(), 0);
   });
   ctxMenu.appendChild(custom);
+
+  renderReasoningSelector();
+
+  // Keep the pending paint in sync: boot (config === null) and an in-flight
+  // switch both show the mark; a mid-switch re-read must not clear it.
+  paintSelectorPending();
+}
+
+const REASONING_LEVELS_FULL = ["auto", "default", "none", "low", "medium", "high", "max"];
+// Backends without granularity (prompt-tag, template-kwarg) collapse
+// medium/max into low/high — show the collapsed set, no duplicates.
+const REASONING_LEVELS_COARSE = ["auto", "default", "none", "low", "high"];
+
+// 4th selector row: reasoning effort filtered to what the active
+// provider+model actually supports (`GET /api/models` → `reasoning`).
+// Unknown (boot) or `strategy: "none"` → hidden, never a wrong option list.
+// Probe failed → the row stays with an honest `off` mark and a shortcut to
+// Settings → Reasoning instead of dead levels.
+function renderReasoningSelector() {
+  const wrap = document.querySelector('[data-sel="reasoning"]');
+  const btn = document.getElementById("selReasoningBtn");
+  const menu = document.getElementById("selReasoningMenu");
+  if (!wrap || !btn || !menu) return;
+  const info = S.state.reasoning;
+  if (!info || info.strategy === "none") {
+    wrap.hidden = true;
+    return;
+  }
+  wrap.hidden = false;
+  if (info.supported === false) {
+    setSelButton(btn, t("web.selectors.reasoning"), t("web.selectors.reasoning_off"));
+    menu.textContent = "";
+    menu.appendChild(el("div", "mi dim", t("reasoning.probe_failed")));
+    menu.appendChild(el("div", "sep"));
+    menu.appendChild(
+      menuAction(t("web.settings.reasoning"), "settings", () => openSettingsAt("reasoning")),
+    );
+    return;
+  }
+  const mode = (S.state.config && getPath(S.state.config, "reasoning.mode")) || info.mode || "auto";
+  setSelButton(btn, t("web.selectors.reasoning"), String(mode));
+  menu.textContent = "";
+  const levels = info.strategy === "openai-effort" ? REASONING_LEVELS_FULL : REASONING_LEVELS_COARSE;
+  levels.forEach((lvl) => {
+    menu.appendChild(menuItem(lvl, lvl === mode ? t("web.selectors.current") : "", lvl === mode, () => postConfig("reasoning.mode", lvl, false)));
+  });
 }
 
 document.querySelectorAll("[data-sel]").forEach((sel) => {
@@ -152,30 +199,92 @@ document.querySelectorAll("[data-sel]").forEach((sel) => {
   });
 });
 
+// Selector keys (`provider/model/context/reasoning`) share the switch treatment:
+// pending paint + single-flight + parallel re-reads. Settings-panel writes
+// bypass it (plain POST + save toast).
+const SELECTOR_KEYS = ["provider.active", "model", "contextWindow", "reasoning.mode"];
+
+// Monotonic id for selector switches: a slow A→B→A pair must not let the
+// stale reply repaint over the fresh one.
+let switchSeq = 0;
+// Key of the in-flight selector switch, if any. While set, every selector
+// button carries the pending mark and all selector menus are inert (CSS gates
+// on `.selectors[data-pending]`), so a double-click is answered with a toast
+// instead of a second concurrent switch.
+let pendingKey = null;
+
+// Paint the pending mark (`⋯` via CSS `::after`, no label rewrites) and the
+// `aria-busy` flag. Boot (`config === null`) paints the same mark, so the
+// skeleton state is visible while `boot()` loads config/models/providers.
+function paintSelectorPending() {
+  const show = pendingKey !== null || !S.state.config;
+  const wrap = document.querySelector(".selectors");
+  if (wrap) {
+    if (show) wrap.setAttribute("data-pending", pendingKey || "boot");
+    else wrap.removeAttribute("data-pending");
+  }
+  ["selProviderBtn", "selModelBtn", "selContextBtn", "selReasoningBtn"].forEach((id) => {
+    const btn = document.getElementById(id);
+    if (!btn) return;
+    btn.classList.toggle("pending", show);
+    btn.setAttribute("aria-busy", show ? "true" : "false");
+  });
+}
+
 async function postConfig(key, value, refreshSettings) {
-  const r = await api("/api/config", { method: "POST", body: { key, value } });
-  if (r.ok && r.data && r.data.ok) {
+  const isSelector = SELECTOR_KEYS.indexOf(key) !== -1;
+  if (isSelector && pendingKey !== null) {
+    setIndicator(t("web.selectors.switch_busy"), true);
+    return false;
+  }
+  // Non-selector writes must not touch the sequence: otherwise a settings
+  // write landing mid-switch would orphan `pendingKey` (stale-guard skips the
+  // only `finally` that clears it).
+  let seq = 0;
+  if (isSelector) {
+    seq = ++switchSeq;
+    pendingKey = key;
+    closeAllMenus();
+    paintSelectorPending();
+  }
+  try {
+    const r = await api("/api/config", { method: "POST", body: { key, value } });
+    if (!r.ok || !r.data || !r.data.ok) {
+      const err = (r.data && (r.data.error || r.data.reason)) || r.status || t("web.settings.save_failed");
+      setIndicator(String(err), true);
+      return false;
+    }
     const persisted = r.data.persisted !== false;
     setIndicator(persisted ? t("web.settings.saved") : (r.data.warning || "not persisted"), !persisted);
     if (S.state.config && r.data.value !== undefined) setPath(S.state.config, key, r.data.value);
+    if (key === "ui.activityRail") setLayout(String(r.data.value));
+    if (key === "ui.fontSize") applyFontSize(String(r.data.value));
     if (key === "locale") {
       await loadI18n();
       if (hooks.applyStaticI18n) hooks.applyStaticI18n();
       renderSettings();
     }
     // A provider switch restores the per-provider model; a model change
-    // updates that provider's remembered model. Re-read both server-side.
+    // updates that provider's remembered model. Both are independent GETs,
+    // so re-read them in parallel. Context/reasoning switches only need the
+    // config back (no extra model round-trip).
     if (key === "provider.active" || key === "model") {
+      await Promise.all([loadConfig(), loadModels()]);
+    } else if (isSelector) {
       await loadConfig();
-      await loadModels();
     }
+    // Stale reply (a newer switch started while this one was in flight):
+    // leave the paint and the final render to the newer operation.
+    if (isSelector && seq !== switchSeq) return true;
     renderSelectors();
     if (refreshSettings) renderSettings();
     return true;
+  } finally {
+    if (isSelector && seq === switchSeq) {
+      pendingKey = null;
+      paintSelectorPending();
+    }
   }
-  const err = (r.data && (r.data.error || r.data.reason)) || r.status || t("web.settings.save_failed");
-  setIndicator(String(err), true);
-  return false;
 }
 
 export async function loadConfig() {
@@ -184,6 +293,7 @@ export async function loadConfig() {
   S.state.config = r.data.config || {};
   S.state.registry = Array.isArray(r.data.registry) ? r.data.registry : [];
   S.state.webToken = typeof r.data.webToken === "string" ? r.data.webToken : null;
+  applyFontSize();
   renderSelectors();
   renderSettings();
 }
@@ -192,6 +302,9 @@ export async function loadModels() {
   const r = await api("/api/models");
   if (!r.ok || !r.data) return;
   S.state.models = Array.isArray(r.data.models) ? r.data.models : [];
+  // Reasoning support rides along with the model list (one round-trip):
+  // the 4th selector row renders from this, never from a separate GET.
+  if (r.data.reasoning && typeof r.data.reasoning === "object") S.state.reasoning = r.data.reasoning;
   renderSelectors();
 }
 
@@ -377,16 +490,77 @@ function providerSelect(options, value) {
   const none = el("option", "", "—");
   none.value = "";
   sel.appendChild(none);
+  const seen = new Set([""]);
   options.forEach((v) => {
+    seen.add(v);
     const o = el("option", "", v);
     o.value = v;
     if (v === value) o.selected = true;
     sel.appendChild(o);
   });
+  // Keep a stored-but-unknown value selectable (e.g. a legacy provider type
+  // from hand-edited config) instead of silently resetting it to "—".
+  if (value != null && value !== "" && !seen.has(value)) {
+    const o = el("option", "", value);
+    o.value = value;
+    o.selected = true;
+    sel.appendChild(o);
+  }
   if (value == null) sel.value = "";
   return sel;
 }
 
+// Base-URL field: a dropdown of well-known URLs plus a "custom URL" option
+// revealing a free-text input, so corporate proxies stay enterable.
+// Exposes a `.value` get/set compatible with plain inputs, plus the raw
+// `sel`/`custom` nodes for event wiring.
+function providerBaseField(value) {
+  const node = el("div", "pform-base");
+  const sel = el("select");
+  PROVIDER_BASE_URLS.forEach(([label, url]) => {
+    const o = el("option", "", label + " — " + url);
+    o.value = url;
+    sel.appendChild(o);
+  });
+  const customOpt = el("option", "", t("web.settings.provider_baseurl_custom"));
+  customOpt.value = BASE_URL_CUSTOM;
+  sel.appendChild(customOpt);
+  const custom = providerInput("", "text", "https://…");
+  const known = new Set(PROVIDER_BASE_URLS.map(([, url]) => url));
+  const sync = () => {
+    custom.style.display = sel.value === BASE_URL_CUSTOM ? "" : "none";
+  };
+  const field = {
+    node,
+    sel,
+    custom,
+    get value() {
+      return sel.value === BASE_URL_CUSTOM ? custom.value : sel.value;
+    },
+    set value(v) {
+      if (v && known.has(v)) {
+        sel.value = v;
+      } else {
+        sel.value = BASE_URL_CUSTOM;
+        custom.value = v || "";
+      }
+      sync();
+    },
+    addEventListener(ev, fn) {
+      sel.addEventListener(ev, fn);
+      custom.addEventListener(ev, fn);
+    },
+    setAttribute(k, v) {
+      sel.setAttribute(k, v);
+    },
+  };
+  field.value = value || "";
+  sel.addEventListener("change", sync);
+  node.appendChild(sel);
+  node.appendChild(custom);
+  return field;
+}
+
 function providerCheck(value) {
   const input = el("input");
   input.type = "checkbox";
@@ -422,34 +596,29 @@ function chip(label, cls, onClick) {
   return b;
 }
 
-// Suggestions for the provider form: known provider types and common base URLs.
-function providerHints() {
-  const frag = document.createDocumentFragment();
-  const types = el("datalist");
-  types.id = "providerTypes";
-  ["openai-compat", "lmstudio", "openrouter", "openai", "anthropic", "opencode-zen", "opencode-go"].forEach((v) => {
-    const o = el("option");
-    o.value = v;
-    types.appendChild(o);
-  });
-  const urls = el("datalist");
-  urls.id = "providerBaseUrls";
-  [
-    ["LM Studio", "http://localhost:1234/v1"],
-    ["Ollama", "http://localhost:11434/v1"],
-    ["OpenRouter", "https://openrouter.ai/api/v1"],
-    ["OpenAI", "https://api.openai.com/v1"],
-    ["Anthropic", "https://api.anthropic.com"],
-  ].forEach(([label, value]) => {
-    const o = el("option");
-    o.value = value;
-    o.label = label;
-    urls.appendChild(o);
-  });
-  frag.appendChild(types);
-  frag.appendChild(urls);
-  return frag;
-}
+// Known provider types (mirrors BUILTIN_PROVIDERS in src/modules/providers/presets.ts)
+// and well-known local base URLs. Both render as real `<select>` dropdowns —
+// `datalist` hints were replaced because they don't read as a list and behave
+// inconsistently across browsers.
+const PROVIDER_TYPES = [
+  "openai-compat",
+  "lmstudio",
+  "openrouter",
+  "openai",
+  "anthropic",
+  "opencode-zen",
+  "opencode-go",
+];
+
+const PROVIDER_BASE_URLS = [
+  ["LM Studio", "http://localhost:1234/v1"],
+  ["Ollama", "http://localhost:11434/v1"],
+  ["OpenRouter", "https://openrouter.ai/api/v1"],
+  ["OpenAI", "https://api.openai.com/v1"],
+  ["Anthropic", "https://api.anthropic.com"],
+];
+
+const BASE_URL_CUSTOM = "__custom__";
 
 // One-click preset row: selecting a builtin fills type/label/base URL, so
 // hosted providers need no URL knowledge. `custom` leaves the fields free.
@@ -488,6 +657,11 @@ function wirePresetSync(presets, presetSel, mode, f) {
     const sel = presets.find((x) => x.id === presetSel.value);
     if (!sel || f.type.value.trim() !== sel.type) presetSel.value = "";
   });
+  // The type control is a `<select>`: some browsers fire only `change`.
+  f.type.addEventListener("change", () => {
+    const sel = presets.find((x) => x.id === presetSel.value);
+    if (!sel || f.type.value.trim() !== sel.type) presetSel.value = "";
+  });
 }
 
 // Optional tuning fields stay collapsed so the form reads as "type + URL".
@@ -509,11 +683,16 @@ function providerAdvancedFields(editing) {
     retryBase: providerInput(retry.baseDelay, "number", "1000"),
     retryMaxD: providerInput(retry.maxDelay, "number", "30000"),
   };
+  // Flags keep the raw config key in `title` so it stays searchable, but the
+  // visible label is localized like every other field of the form.
   f.cacheFlags = CACHE_FLAG_KEYS.map((key) => {
     const box = providerCheck(cache[key]);
+    const label = t("web.settings.provider_flag." + key);
+    box.setAttribute("aria-label", label);
     const wrap = el("label", "pform-check");
+    wrap.title = key;
     wrap.appendChild(box);
-    wrap.appendChild(el("span", "", key));
+    wrap.appendChild(el("span", "", label));
     return { key, box, node: wrap };
   });
   advGrid.appendChild(pfield("web.settings.provider_context", f.ctx));
@@ -524,19 +703,23 @@ function providerAdvancedFields(editing) {
   advGrid.appendChild(pfield("web.settings.provider_cache_mechanism", f.cacheMech));
   advGrid.appendChild(pfield("web.settings.provider_cache_report", f.cacheReport));
   adv.appendChild(advGrid);
+
+  // Retry numbers reuse the field grid (label above input) — a bare label+input
+  // pair collapses into an unreadable inline blob without the grid styles.
   const retryGroup = el("div", "pform-checks");
   retryGroup.appendChild(el("span", "pform-checks-title", t("web.settings.provider_retry")));
-  [["maxRetries", f.retryMax], ["baseDelay", f.retryBase], ["maxDelay", f.retryMaxD]].forEach(([key, input]) => {
-    const wrap = el("label", "pform-check");
-    wrap.appendChild(el("span", "", key));
-    input.setAttribute("aria-label", key);
-    wrap.appendChild(input);
-    retryGroup.appendChild(wrap);
-  });
+  const retryGrid = el("div", "pform-grid");
+  retryGrid.appendChild(pfield("web.settings.provider_retry_max", f.retryMax));
+  retryGrid.appendChild(pfield("web.settings.provider_retry_base", f.retryBase));
+  retryGrid.appendChild(pfield("web.settings.provider_retry_maxdelay", f.retryMaxD));
+  retryGroup.appendChild(retryGrid);
   adv.appendChild(retryGroup);
+
   const flagGroup = el("div", "pform-checks");
   flagGroup.appendChild(el("span", "pform-checks-title", t("web.settings.provider_cache_flags")));
-  f.cacheFlags.forEach(({ node }) => flagGroup.appendChild(node));
+  const flagGrid = el("div", "pform-checks-grid");
+  f.cacheFlags.forEach(({ node }) => flagGrid.appendChild(node));
+  flagGroup.appendChild(flagGrid);
   adv.appendChild(flagGroup);
   return { node: adv, ...f };
 }
@@ -620,15 +803,13 @@ function providerForm() {
   if (presetNode) box.appendChild(presetNode);
 
   const grid = el("div", "pform-grid");
-  const fType = providerInput(editing.type, "text", "openai-compat");
-  fType.setAttribute("list", "providerTypes");
+  const fType = providerSelect(PROVIDER_TYPES, editing.type);
   const fLabel = providerInput(editing.label, "text", "my-provider");
-  const fBase = providerInput(editing.baseUrl, "text", "http://localhost:1234/v1");
-  fBase.setAttribute("list", "providerBaseUrls");
+  const fBase = providerBaseField(editing.baseUrl);
   const fKey = providerInput("", "password", editing.hasApiKey ? t("web.settings.provider_key_keep") : "");
   grid.appendChild(pfield("web.settings.provider_type", fType));
   grid.appendChild(pfield("web.settings.provider_label_field", fLabel));
-  grid.appendChild(pfield("web.settings.provider_baseurl", fBase));
+  grid.appendChild(pfield("web.settings.provider_baseurl", fBase.node));
   grid.appendChild(pfield("web.settings.provider_apikey", fKey));
   box.appendChild(grid);
   wirePresetSync(presets, presetSel, mode, { type: fType, label: fLabel, base: fBase });
@@ -637,8 +818,6 @@ function providerForm() {
   box.appendChild(advNode);
   const f = { type: fType, label: fLabel, base: fBase, key: fKey, ...advF };
 
-  box.appendChild(providerHints());
-
   const actions = el("div", "pform-actions");
   actions.appendChild(link(t("web.settings.save"), "", () => submitProviderForm(f, mode, editing)));
   actions.appendChild(link(t("web.settings.cancel"), "dim", () => closeProviderForm()));
@@ -1529,6 +1708,12 @@ function openSettings() {
   const active = document.querySelector("#setMenu .mi.on") || settingsTabs[0];
   if (active) setTimeout(() => active.focus(), 0);
 }
+// Open settings straight at a panel (used by the reasoning selector when the
+// backend probe failed: the row links to Settings → Reasoning).
+function openSettingsAt(panel) {
+  openSettings();
+  selectSettingsPanel(panel);
+}
 function closeSettings() {
   closeSubDialog();
   S.state.providerForm = null;
@@ -1619,6 +1804,16 @@ export function currentTheme() {
   return localStorage.getItem(THEME_KEY) || "auto";
 }
 
+// Web chat font size (`ui.fontSize`, server config — unlike the theme, which
+// is a browser-local preference). Applied as `body[data-font]` so the switch
+// is instant and survives re-renders; unknown values fall back to the default.
+export function applyFontSize(value) {
+  const v = value || (S.state.config && S.state.config.ui && S.state.config.ui.fontSize) || "comfortable";
+  const known = v === "compact" || v === "large" ? v : "comfortable";
+  if (known === "comfortable") document.body.removeAttribute("data-font");
+  else document.body.setAttribute("data-font", known);
+}
+
 export function applyTheme(theme) {
   localStorage.setItem(THEME_KEY, theme);
   const light = theme === "light" || (theme === "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches);

package/dist/assets/js/store.js

@@ -22,6 +22,9 @@ state: {
   skills: undefined,
   pluginsData: undefined,
   providers: undefined,
+  // Reasoning support of the active provider+model (`GET /api/models`
+  // `reasoning` shape); `undefined` until the first model list arrives.
+  reasoning: undefined,
   providerPresets: [],
   providerForm: null,
   // Transient error shown inline in the sessions dropdown (visible without the modal).

package/dist/assets/js/tabs.js

@@ -12,9 +12,10 @@ import { relTime, contextLabel } from "./format.js";
 import {
 makeFeed, showEmptyFeed, activeFeed, liveFeed, appendTo,
 clearEmpty, showBusy, clearFeed, finishMd, resetTurnText,
-finishThink, feedHasContent, loadHistory, syncUrl,
+finishThink, feedHasContent, loadHistory, syncUrl, renderPlan,
 } from "./feed.js";
 import { openConfirm, setIndicator } from "./dialog.js";
+import { setBusy, setPlan as railSetPlan } from "./rail.js";
 
 let sessionsErrTimer = null;
 
@@ -55,6 +56,20 @@ function renderTabstrip() {
     });
     tabstripEl.appendChild(tab);
   });
+  scrollActiveTabIntoView();
+  renderSessBar();
+}
+
+// Keep the active tab visible, aligned to its START so the beginning of the
+// session name stays readable (aligning the end would cut the name off,
+// which is exactly what phones showed when tapping a tab on the right).
+function scrollActiveTabIntoView() {
+  const active = tabstripEl.querySelector(".stab.on");
+  if (!active) return;
+  const left = Math.max(0, active.offsetLeft - 4);
+  if (left < tabstripEl.scrollLeft || left + active.offsetWidth > tabstripEl.scrollLeft + tabstripEl.clientWidth) {
+    tabstripEl.scrollLeft = left;
+  }
 }
 
 tabstripEl.addEventListener(
@@ -117,7 +132,18 @@ export function openTab(id, name, kind, server) {
     // it is opened from the server afterward we must actually fetch the
     // transcript, or a reload of the active session shows an empty feed.
     if (!feedHasContent(tab.feed)) tab.historyLoaded = false;
-    api("/api/sessions/activate", { method: "POST", body: { id } }).then(() => loadSessions());
+    // План следует за сессией: сервер уже переключил трекер на activate,
+    // сразу тянем свежий план в сайдбар (не ждём 2с-полла `/api/state`).
+    api("/api/sessions/activate", { method: "POST", body: { id } }).then(() => {
+      loadSessions();
+      api("/api/state").then((r) => {
+        if (!r.ok || !r.data) return;
+        S.state.host = r.data.state || {};
+        S.state.busy = !!r.data.busy;
+        renderPlan(S.state.host.plan);
+        railSetPlan(S.state.busy && r.data.state ? r.data.state.plan : null);
+      });
+    });
     loadHistory(tab);
   }
   syncUrl();
@@ -150,6 +176,14 @@ async function newChatTab() {
     const meta = r.data.session;
     openTab(meta.id, meta.name || String(meta.id), "session", false);
     await loadSessions();
+    // Новая сессия — без плана: сервер уже сбросил трекер, сразу чистим сайдбар.
+    const st = await api("/api/state");
+    if (st.ok && st.data) {
+      S.state.host = st.data.state || {};
+      S.state.busy = !!st.data.busy;
+      renderPlan(S.state.host.plan);
+      railSetPlan(S.state.busy && st.data.state ? st.data.state.plan : null);
+    }
     return;
   }
   // Server-side creation failed (no manager / offline): keep a local-only tab
@@ -275,6 +309,73 @@ sessBtn.addEventListener("click", (e) => {
   setSessOpen(!sessDD.classList.contains("open"));
 });
 
+// --- mobile session sub-header -------------------------------------------
+// Phones show a session control bar under the topbar: prev/next arrows step
+// through the open tabs, ✕ closes the active tab, and the + / list tools
+// relocate here (see placeTopTools) so the topbar keeps room for tabs.
+const sessBar = document.getElementById("sessBar");
+const sessNameBtn = document.getElementById("sessNameBtn");
+const sessNameEl = document.getElementById("sessName");
+const sessPrevBtn = document.getElementById("sessPrev");
+const sessNextBtn = document.getElementById("sessNext");
+const sessCloseBtn = document.getElementById("sessClose");
+const sessTools = document.getElementById("sessTools");
+const barTop = document.querySelector(".bar-top");
+const newChatBtn = document.getElementById("newChat");
+// Anchor remembering the desktop slot of the + / list controls.
+const topToolsAnchor = document.createComment("top-tools");
+if (barTop && newChatBtn) barTop.insertBefore(topToolsAnchor, newChatBtn);
+
+function stepTab(dir) {
+  if (S.tabs.length < 2) return;
+  const i = S.tabs.findIndex((x) => x.id === S.activeTabId);
+  const n = i === -1 ? 0 : (i + dir + S.tabs.length) % S.tabs.length;
+  const tab = S.tabs[n];
+  // Same semantics as clicking the tab in the strip.
+  if (tab) openTab(tab.id, tab.name, tab.kind, true);
+}
+
+function renderSessBar() {
+  if (!sessBar) return;
+  const active = S.tabs.find((x) => x.id === S.activeTabId);
+  const label = active ? active.name || String(active.id) : "—";
+  sessNameEl.textContent = label;
+  sessNameBtn.title = label;
+  const has = S.tabs.length > 0;
+  sessPrevBtn.disabled = S.tabs.length < 2;
+  sessNextBtn.disabled = S.tabs.length < 2;
+  sessCloseBtn.disabled = !has;
+  sessNameBtn.disabled = !has;
+}
+
+// Nodes are relocated (not duplicated), so their listeners and the sessions
+// dropdown anchoring (.dd is position:relative) survive the move.
+function placeTopTools() {
+  if (!barTop || !sessTools || !newChatBtn || !sessDD) return;
+  if (window.matchMedia("(max-width: 760px)").matches) {
+    sessTools.append(newChatBtn, sessDD);
+  } else {
+    barTop.insertBefore(newChatBtn, topToolsAnchor);
+    barTop.insertBefore(sessDD, topToolsAnchor);
+  }
+}
+
+if (sessPrevBtn) sessPrevBtn.addEventListener("click", () => stepTab(-1));
+if (sessNextBtn) sessNextBtn.addEventListener("click", () => stepTab(1));
+if (sessCloseBtn) sessCloseBtn.addEventListener("click", () => {
+  if (S.activeTabId) closeTab(S.activeTabId);
+});
+if (sessNameBtn) sessNameBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  document.querySelectorAll("[data-sel]").forEach((s) => s.classList.remove("open"));
+  setSessOpen(!sessDD.classList.contains("open"));
+});
+if (typeof window.matchMedia === "function") {
+  const narrowMq = window.matchMedia("(max-width: 760px)");
+  if (typeof narrowMq.addEventListener === "function") narrowMq.addEventListener("change", placeTopTools);
+  placeTopTools();
+}
+
 document.addEventListener("click", () => {
   document.querySelectorAll("[data-sel]").forEach((s) => s.classList.remove("open"));
   setSessOpen(false);
@@ -662,6 +763,7 @@ export function reflectBusy() {
   }
   const escHint = document.getElementById("hintEsc");
   if (escHint) escHint.hidden = !S.state.busy;
+  setBusy(S.state.busy);
 }
 
 export async function loadSessions() {