@xingjisoft/neutrino 0.4.0 → 0.5.0

package/web/i18n.js

@@ -106,6 +106,15 @@ const ZH = {
   "Professional model availability": "专业模型可用性检查",
   "These model substitutions apply only to this task in this conversation. Your preset configuration is unchanged.": "以下模型替换仅对当前对话的本次任务生效，不会修改预设配置文件。",
   "Got it": "知道了",
+  "A new version is available": "有新版本可用",
+  "Neutrino updates itself with npm. Restart it afterwards to use the new version.": "Neutrino 通过 npm 自动更新，更新完成后请重新启动以使用新版本。",
+  "Running {current} · published {latest}": "当前版本 {current} · 最新版本 {latest}",
+  "Update now": "立即更新",
+  "Later": "稍后",
+  "Updating with npm…": "正在通过 npm 更新…",
+  "Updated to {version}. Restart Neutrino to use it.": "已更新到 {version}，请重新启动 Neutrino 以使用新版本。",
+  "Update failed: {error}": "更新失败：{error}",
+  "Update by hand with:": "也可以手动更新：",
   // -- chrome -------------------------------------------------------------
   "Neutrino": "Neutrino",
   "Switch to Pro mode": "切换至Pro模式",
@@ -132,6 +141,12 @@ const ZH = {
   "Working directory": "工作目录",
   "Working directories": "工作目录",
   "Other agents": "其他 Agent",
+  "Migrate session": "迁移会话",
+  "Migrating…": "迁移中…",
+  "Copy this history into a new Neutrino conversation in the same folder": "将历史复制为同一工作目录下的新 Neutrino 会话",
+  "Could not migrate this session: {error}": "无法迁移此会话：{error}",
+  "session not found in this working directory": "此工作目录中未找到该会话",
+  "this session has no messages to migrate": "此会话没有可迁移的消息",
   "Read-only sessions recorded by other coding agents in this working directory.": "其他编码 Agent 在此工作目录中记录的只读会话。",
   "No saved sessions from other agents in this folder.": "此文件夹中暂无其他 Agent 保存的会话。",
   "Claude Code": "Claude Code",
@@ -172,6 +187,15 @@ const ZH = {
   "Creating…": "正在创建…",
   "Provider": "服务商",
   "Model": "模型",
+  "Conversation model": "对话模型",
+  "Conversation model: {selection}": "对话模型：{selection}",
+  "Choose a model": "选择模型",
+  "(unavailable)": "（不可用）",
+  "Low": "低",
+  "Medium": "中",
+  "High": "高",
+  "Max": "极高",
+  "Ultra": "超高",
   "Thinking": "思考强度",
   "Default approval mode": "默认审批模式",
   "Request Approval": "请求审批",
@@ -215,6 +239,8 @@ const ZH = {
   "Show less": "收起",
   "Show {n} more": "再显示 {n} 个",
   "Live": "实时",
+  "Running": "运行中",
+  "Waiting for approval": "等待审批",
   "Earlier conversation · {n} messages": "更早的对话 · {n} 条消息",
   "Context summary · {n} messages": "上下文摘要 · {n} 条消息",
   "You": "你",
@@ -298,6 +324,14 @@ const ZH = {
   "Extreme-risk auto-approval (del class, 3 separate review rounds)": "极高风险自动审批（删除类命令，独立审查 3 轮）",
   "Sound alerts (turn finished, approval waiting)": "声音提醒（回合结束、等待审批）",
   "Start the Web console with the terminal": "随终端启动 Web 控制台（下次启动生效）",
+  "Background residency": "后台常驻",
+  "Run the Web console in the background and keep browser tasks alive after the CLI exits": "让 Web 控制台在后台运行，CLI 退出后浏览器中的任务继续执行",
+  "Off by default. Changes take effect immediately, including for running browser tasks. The regular and Pro workspaces share this setting. Terminal conversations still end when the terminal closes.": "默认关闭。切换立即生效，正在运行的浏览器任务也会受到保护；普通模式与 Pro 模式共用此设置。终端内的对话仍会在终端关闭时结束。",
+  "Enable background residency to avoid accidentally interrupting tasks": "建议开启后台常驻，避免误触中断任务",
+  "Enable": "开启",
+  "Background residency is on. Browser tasks keep running after the terminal closes.": "后台常驻已立即开启。关闭终端后，浏览器任务会继续执行。",
+  "Background residency is off. Current tasks can finish before the console closes.": "后台常驻已立即关闭。控制台退出前会等待当前任务完成。",
+  "Background residency could not be applied. Restart the console and try again.": "后台常驻未能生效，请重启控制台后重试。",
   "Safety determines automatic approval; task relevance only blocks unanimously confirmed, extreme mismatches. Delete-class automatic approval also requires this setting.": "自动审批取决于安全性；任务相关性只有在两位审查者一致确认极端不匹配时才会阻止执行。删除类命令的自动审批还需要开启此设置。",
   "Web access": "Web 访问",
   "Allow access from other devices (LAN, 0.0.0.0)": "允许其他设备访问（局域网，0.0.0.0）",

package/web/index.html

@@ -102,14 +102,6 @@
           </button>
         </header>
 
-        <form id="model-picker" class="model-picker hidden" aria-label="Conversation model">
-          <label><span data-i18n="Provider">Provider</span><select id="model-provider"></select></label>
-          <label><span data-i18n="Model">Model</span><select id="model-name"></select></label>
-          <label><span data-i18n="Thinking">Thinking</span><select id="model-intensity"></select></label>
-          <button id="model-apply" class="control" type="submit" data-i18n="Apply">Apply</button>
-          <p id="model-feedback" class="form-feedback" role="status" aria-live="polite"></p>
-        </form>
-
         <aside id="plan-card" class="plan-card hidden" aria-live="polite"></aside>
 
         <section id="messages" class="messages">
@@ -128,10 +120,33 @@
 
         <div id="approval" class="approval hidden" role="alert" aria-live="assertive"></div>
 
+        <footer id="agent-actions" class="agent-actions hidden">
+          <p id="agent-migrate-feedback" class="form-feedback error" role="status" aria-live="polite"></p>
+          <button id="agent-migrate" class="control primary" type="button" data-i18n="Migrate session" title="Copy this history into a new Neutrino conversation in the same folder" data-i18n-title="Copy this history into a new Neutrino conversation in the same folder">Migrate session</button>
+        </footer>
+
         <footer id="composer" class="composer hidden">
           <div class="composer-inner">
             <div class="composer-card">
               <textarea id="input" rows="1" placeholder="Message Neutrino…" aria-label="Message" data-i18n-placeholder="Message Neutrino…"></textarea>
+              <details id="model-picker" class="model-picker pro-preset-control hidden">
+                <summary id="model-picker-summary" aria-label="Conversation model" data-i18n-aria-label="Conversation model"><span id="model-picker-label"></span><svg class="pro-preset-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg></summary>
+                <div class="pro-preset-card model-picker-card">
+                  <div class="pro-preset-heading"><span data-i18n="Conversation model">Conversation model</span><strong id="model-intensity-label"></strong></div>
+                  <div class="model-picker-fields">
+                    <label><span data-i18n="Provider">Provider</span><select id="model-provider"></select></label>
+                    <label><span data-i18n="Model">Model</span><select id="model-name"></select></label>
+                  </div>
+                  <label class="pro-slider-label" for="model-intensity" data-i18n="Thinking intensity">Thinking intensity</label>
+                  <div id="model-intensity-slider" class="pro-preset-slider">
+                    <div class="pro-slider-track" aria-hidden="true"><div class="pro-slider-fill"></div></div>
+                    <div id="model-intensity-stops" class="pro-slider-stops" aria-hidden="true"></div>
+                    <input id="model-intensity" type="range" min="0" max="0" step="1" value="0" aria-label="Thinking intensity" data-i18n-aria-label="Thinking intensity" />
+                  </div>
+                  <div id="model-intensity-ticks" class="pro-preset-ticks"></div>
+                  <p id="model-feedback" class="form-feedback" role="status" aria-live="polite"></p>
+                </div>
+              </details>
               <details id="pro-preset-control" class="pro-preset-control hidden">
                 <summary aria-label="Pro preset" data-i18n-aria-label="Pro preset"><span id="pro-preset-label">Pro</span><svg class="pro-preset-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg></summary>
                 <div class="pro-preset-card">
@@ -157,7 +172,7 @@
                 </div>
               </details>
               <button id="send" class="primary" type="button" title="Send message" aria-label="Send message" data-i18n-title="Send message" data-i18n-aria-label="Send message">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="send-icon" d="M12 19V5M5 12l7-7 7 7" /><rect class="pause-icon" x="5" y="5" width="14" height="14" rx="2" fill="currentColor" stroke="none" /></svg>
               </button>
             </div>
             <div class="composer-hint">
@@ -222,6 +237,9 @@
           <label class="checkbox-label"><input id="settings-sound" type="checkbox" /> <span data-i18n="Sound alerts (turn finished, approval waiting)">Sound alerts (turn finished, approval waiting)</span></label>
           <label class="checkbox-label"><input id="settings-web-console" type="checkbox" /> <span data-i18n="Start the Web console with the terminal">Start the Web console with the terminal</span></label>
           <p class="settings-note" data-i18n="Safety determines automatic approval; task relevance only blocks unanimously confirmed, extreme mismatches. Delete-class automatic approval also requires this setting.">Safety determines automatic approval; task relevance only blocks unanimously confirmed, extreme mismatches. Delete-class automatic approval also requires this setting.</p>
+          <h3 data-i18n="Background residency">Background residency</h3>
+          <label class="checkbox-label"><input id="settings-background" type="checkbox" /> <span data-i18n="Run the Web console in the background and keep browser tasks alive after the CLI exits">Run the Web console in the background and keep browser tasks alive after the CLI exits</span></label>
+          <p class="settings-note" data-i18n="Off by default. Changes take effect immediately, including for running browser tasks. The regular and Pro workspaces share this setting. Terminal conversations still end when the terminal closes.">Off by default. Changes take effect immediately, including for running browser tasks. The regular and Pro workspaces share this setting. Terminal conversations still end when the terminal closes.</p>
           <h3 data-i18n="Web access">Web access</h3>
           <label class="checkbox-label"><input id="settings-web-lan" type="checkbox" /> <span data-i18n="Allow access from other devices (LAN, 0.0.0.0)">Allow access from other devices (LAN, 0.0.0.0)</span></label>
           <p class="settings-note" data-i18n="Binds the Web console to 0.0.0.0 so other devices on your network can open it, like --lan. Takes effect immediately; turning it off returns the console to 127.0.0.1. Keep the Web password on: anyone who can reach this port can drive the agent.">Binds the Web console to 0.0.0.0 so other devices on your network can open it, like --lan. Takes effect immediately; turning it off returns the console to 127.0.0.1. Keep the Web password on: anyone who can reach this port can drive the agent.</p>
@@ -239,6 +257,27 @@
       </form>
     </dialog>
 
+    <dialog id="background-dialog" class="sheet-dialog background-dialog" aria-labelledby="background-title">
+      <div class="sheet background-sheet">
+        <header class="sheet-header background-header">
+          <span class="background-mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <ellipse cx="12" cy="12" rx="9.4" ry="3.8" transform="rotate(-30 12 12)" stroke="currentColor" stroke-width="1.7" />
+              <circle cx="12" cy="12" r="3.1" stroke="currentColor" stroke-width="1.7" />
+            </svg>
+          </span>
+          <div class="background-copy">
+            <h2 id="background-title" data-i18n="Enable background residency to avoid accidentally interrupting tasks">Enable background residency to avoid accidentally interrupting tasks</h2>
+          </div>
+        </header>
+        <p id="background-feedback" class="form-feedback background-feedback" role="status" aria-live="polite"></p>
+        <footer class="sheet-actions background-actions">
+          <button id="background-cancel" class="control" type="button" data-i18n="Cancel">Cancel</button>
+          <button id="background-enable" class="primary" type="button" data-i18n="Enable" autofocus>Enable</button>
+        </footer>
+      </div>
+    </dialog>
+
     <dialog id="new-chat-dialog" class="sheet-dialog" aria-labelledby="new-chat-title">
       <form id="new-chat-form" class="sheet">
         <header class="sheet-header">
@@ -375,6 +414,29 @@
       </div>
     </dialog>
 
+    <dialog id="update-dialog" class="sheet-dialog" aria-labelledby="update-title">
+      <div class="sheet">
+        <header class="sheet-header">
+          <div>
+            <h2 id="update-title" data-i18n="A new version is available">A new version is available</h2>
+            <p id="update-versions" class="sheet-sub"></p>
+          </div>
+          <button id="update-close" class="icon-btn" type="button" aria-label="Close" data-i18n-aria-label="Close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+          </button>
+        </header>
+        <div class="sheet-body">
+          <p id="update-note" class="settings-note" data-i18n="Neutrino updates itself with npm. Restart it afterwards to use the new version.">Neutrino updates itself with npm. Restart it afterwards to use the new version.</p>
+          <p id="update-command-block" class="settings-note hidden"><span data-i18n="Update by hand with:">Update by hand with:</span> <code id="update-command">npm install -g @xingjisoft/neutrino</code></p>
+          <p id="update-feedback" class="form-feedback" role="status" aria-live="polite"></p>
+        </div>
+        <footer class="sheet-actions">
+          <button id="update-later" class="control" type="button" data-i18n="Later">Later</button>
+          <button id="update-now" class="primary" type="button" data-i18n="Update now" autofocus>Update now</button>
+        </footer>
+      </div>
+    </dialog>
+
     <script src="app.js" type="module"></script>
   </body>
 </html>

package/web/settings.js

@@ -3,24 +3,32 @@
 import { t, getLanguage } from "./i18n.js";
 
 export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMode = false, onCatalogChange }) {
-  const ids = ["model-picker", "model-provider", "model-name", "model-intensity", "model-apply", "model-feedback",
+  const ids = ["model-picker", "model-picker-summary", "model-picker-label", "model-provider", "model-name", "model-intensity",
+    "model-intensity-label", "model-intensity-slider", "model-intensity-stops", "model-intensity-ticks", "model-feedback",
     "settings-open", "settings-dialog", "settings-form", "settings-close", "settings-cancel", "settings-save", "settings-feedback",
     "default-provider", "default-model", "default-intensity", "settings-context", "settings-compress-note", "settings-reviewer",
     "settings-extreme", "settings-sound", "settings-password", "settings-password-confirm",
-    "settings-language", "settings-plan", "settings-approval", "settings-web-console", "settings-web-lan",
+    "settings-language", "settings-plan", "settings-approval", "settings-web-console", "settings-web-lan", "settings-background",
     "settings-pro", "settings-pro-preset", "settings-pro-depth"];
   const el = Object.fromEntries(ids.map(id => [id, document.getElementById(id)]));
   let config = null;
   let target = null;
   let conversation = null;
   let dirty = false;
-  let applying = false;
+  let draftIntensity = "";
+  let applying = null;
+  let generation = 0;
+  let failure = null;
   let feedback = "";
   let feedbackError = false;
   // Value the LAN switch had when the dialog opened. Only an actual flip is
   // saved, so editing another setting never pins an interface that came from
   // --lan/--host on the command line.
   let lanInitial = false;
+  // Same idea for background residency: the dialog must not overwrite a value
+  // changed from the terminal while it was open.
+  let backgroundInitial = false;
+  let backgroundChanging = false;
 
   async function json(path, body) {
     const response = await apiFetch(path, body === undefined ? { cache: "no-store" } : {
@@ -84,32 +92,90 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
       value: preset.name, label: getLanguage() === "zh" ? preset.chinese_name || preset.name : preset.name,
     })), selected);
   }
+  function unavailableOption(select, value) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = `${value} ${t("(unavailable)")}`;
+    option.disabled = true;
+    select.appendChild(option);
+    select.value = value;
+  }
   function choice() {
-    return { provider: el["model-provider"].value, model: el["model-name"].value, intensity: el["model-intensity"].value };
+    return { provider: el["model-provider"].value, model: el["model-name"].value, intensity: draftIntensity };
   }
   function renderPicker() {
     el["model-picker"].classList.toggle("hidden", proMode || !config || !conversation);
     if (proMode || !config || !conversation) return;
     if (!dirty) {
-      providers(el["model-provider"], conversation.provider);
-      models(el["model-provider"], el["model-name"], conversation.model);
-      intensities(el["model-intensity"], conversation.intensity, conversation.provider, conversation.model);
+      providers(el["model-provider"], conversation.provider || config.selection?.provider);
+      if (conversation.provider && !config.providers.some(entry => entry.name === conversation.provider)) {
+        unavailableOption(el["model-provider"], conversation.provider);
+      }
+      models(el["model-provider"], el["model-name"], conversation.model || config.selection?.model);
+      if (conversation.model && !modelEntry(el["model-provider"].value, conversation.model)) {
+        unavailableOption(el["model-name"], conversation.model);
+      }
+      draftIntensity = pickIntensity(el["model-provider"].value, el["model-name"].value,
+        conversation.intensity || config.selection?.intensity);
     } else {
-      // A provider/model change narrows the intensity list even though the rest
-      // of the draft must survive the next server snapshot.
-      intensities(el["model-intensity"], el["model-intensity"].value,
-        el["model-provider"].value, el["model-name"].value);
+      // Keep a draft across live snapshots, while honoring the chosen model's limits.
+      draftIntensity = pickIntensity(el["model-provider"].value, el["model-name"].value, draftIntensity);
     }
+    const selection = choice();
+    const displayed = dirty || target?.startsWith("new:") ? selection : {
+      model: conversation.model || selection.model,
+      intensity: conversation.intensity || selection.intensity,
+    };
+    el["model-picker-label"].textContent = [displayed.model, displayed.intensity && t(displayed.intensity)]
+      .filter(Boolean).join(" · ") || t("Choose a model");
+    const summary = t("Conversation model: {selection}", { selection: el["model-picker-label"].textContent });
+    el["model-picker-summary"].setAttribute("aria-label", summary);
+    el["model-picker-summary"].title = summary;
+    el["model-intensity-label"].textContent = selection.intensity ? t(selection.intensity) : "";
+
+    const levels = modelEntry(selection.provider, selection.model) ? intensitiesFor(selection.provider, selection.model) : [];
+    const index = Math.max(0, levels.indexOf(selection.intensity));
+    const last = Math.max(0, levels.length - 1);
     const busy = Boolean(conversation.busy || conversation.approval);
-    el["model-apply"].disabled = applying || busy || !choice().provider || !choice().model;
-    el["model-apply"].textContent = applying
-      ? t("Applying…")
-      : target?.startsWith("file:") ? t("Continue with model") : t("Apply to conversation");
-    message(
-      el["model-feedback"],
-      feedback || (busy ? t("Pause the current turn to change models.") : t("Applies to the next turn.")),
-      feedbackError,
-    );
+    const locked = busy || Boolean(applying && applying.generation === generation);
+    const slider = el["model-intensity-slider"];
+    slider.setAttribute("style", `--pro-slider-position: ${last ? index / last : 0}`);
+    slider.classList.toggle("is-disabled", locked || !levels.length);
+    el["model-picker"].classList.toggle("is-max", last > 0 && index === last);
+    el["model-provider"].disabled = locked;
+    el["model-name"].disabled = locked || !selection.provider;
+    el["model-intensity"].disabled = locked || !levels.length;
+    el["model-intensity"].max = String(last);
+    el["model-intensity"].value = String(index);
+    el["model-intensity"].setAttribute("aria-valuetext", selection.intensity ? t(selection.intensity) : "");
+
+    const stops = el["model-intensity-stops"];
+    const ticks = el["model-intensity-ticks"];
+    stops.replaceChildren();
+    ticks.replaceChildren();
+    levels.forEach((level, levelIndex) => {
+      const position = last ? levelIndex / last * 100 : 0;
+      const stop = document.createElement("span");
+      stop.className = "pro-slider-stop";
+      stop.setAttribute("style", `left: ${position}%`);
+      stop.classList.toggle("is-filled", levelIndex <= index);
+      stops.appendChild(stop);
+      const tick = document.createElement("button");
+      tick.type = "button";
+      tick.textContent = t(level);
+      tick.disabled = locked;
+      tick.setAttribute("style", `left: ${position}%`);
+      tick.setAttribute("aria-pressed", String(level === selection.intensity));
+      tick.addEventListener("click", () => {
+        if (tick.disabled) return;
+        draftIntensity = level;
+        changeChoice();
+      });
+      ticks.appendChild(tick);
+    });
+    const status = busy ? t("Pause the current turn to change models.")
+      : feedback || (locked ? t("Applying…") : t("Applies to the next turn."));
+    message(el["model-feedback"], status, !busy && feedbackError);
   }
   async function load() {
     config = await json("/api/settings");
@@ -118,44 +184,109 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     return config;
   }
   function showConversation(info, key) {
-    if (target !== key) { dirty = false; feedback = ""; feedbackError = false; }
+    if (target !== key) {
+      generation++;
+      dirty = false;
+      failure = null;
+      feedback = "";
+      feedbackError = false;
+      el["model-picker"].open = false;
+    }
     target = key;
     conversation = info;
+    // A turn may start elsewhere while the slider is being dragged. Discard
+    // that uncommitted preview so it cannot masquerade as the active setting.
+    if (target?.startsWith("live:") && dirty && (info?.busy || info?.approval) && applying?.generation !== generation) {
+      dirty = false;
+      feedback = "";
+      feedbackError = false;
+    }
     renderPicker();
   }
   function clear() {
+    generation++;
     target = null;
     conversation = null;
     dirty = false;
+    failure = null;
+    feedback = "";
+    el["model-picker"].open = false;
+    renderPicker();
+  }
+  function changeChoice() {
+    if (!config || !conversation || conversation.busy || conversation.approval || applying?.generation === generation) return;
+    dirty = true;
+    failure = null;
     feedback = "";
+    feedbackError = false;
+    renderPicker();
+    // Saved and not-yet-created conversations keep the choice as a local draft.
+    if (!target?.startsWith("live:")) return;
+    const selection = choice();
+    if (!selection.provider || !modelEntry(selection.provider, selection.model) || !selection.intensity) return;
+    if (selection.provider === conversation.provider && selection.model === conversation.model && selection.intensity === conversation.intensity) {
+      dirty = false;
+      renderPicker();
+      return;
+    }
+    const request = { generation, promise: null };
+    applying = request;
     renderPicker();
+    request.promise = (async () => {
+      try {
+        await applyModel(selection);
+        if (request.generation !== generation) return;
+        conversation = { ...conversation, ...selection };
+        dirty = false;
+        feedback = t("Model and intensity updated.");
+      } catch (error) {
+        if (request.generation !== generation) return;
+        dirty = false;
+        failure = error;
+        feedback = t(error.message);
+        feedbackError = true;
+      } finally {
+        if (applying === request) applying = null;
+        renderPicker();
+      }
+    })();
   }
   el["model-provider"].addEventListener("change", () => {
     if (!config) return;
-    models(el["model-provider"], el["model-name"]);
-    dirty = true; feedback = ""; feedbackError = false;
-    renderPicker();
+    const provider = config.providers.find(entry => entry.name === el["model-provider"].value);
+    models(el["model-provider"], el["model-name"], provider?.models.find(model => model.configured)?.name);
+    changeChoice();
   });
-  for (const id of ["model-name", "model-intensity"]) {
-    el[id].addEventListener("change", () => { dirty = true; feedback = ""; feedbackError = false; renderPicker(); });
-  }
-  el["model-picker"].addEventListener("submit", async event => {
-    event.preventDefault();
-    if (el["model-apply"].disabled) return;
-    const originalTarget = target;
-    applying = true;
+  el["model-name"].addEventListener("change", changeChoice);
+  el["model-intensity"].addEventListener("input", () => {
+    if (!config || !conversation || conversation.busy || conversation.approval || applying?.generation === generation) return;
+    const levels = intensitiesFor(el["model-provider"].value, el["model-name"].value);
+    draftIntensity = levels[Number(el["model-intensity"].value)] || draftIntensity;
+    dirty = true;
+    failure = null;
     feedback = "";
+    feedbackError = false;
     renderPicker();
-    try {
-      await applyModel(choice());
-      if (target === originalTarget) { dirty = false; feedback = t("Model and intensity updated."); feedbackError = false; }
-    } catch (error) {
-      if (target === originalTarget) { feedback = t(error.message); feedbackError = true; }
-    } finally {
-      applying = false;
-      renderPicker();
-    }
   });
+  el["model-intensity"].addEventListener("change", changeChoice);
+  el["model-picker"].addEventListener("keydown", event => {
+    if (event.key === "Escape") { el["model-picker"].open = false; event.stopPropagation(); }
+  });
+  document.addEventListener?.("pointerdown", event => {
+    if (el["model-picker"].open && !el["model-picker"].contains(event.target)) el["model-picker"].open = false;
+  });
+  async function flush() {
+    // A keyboard send can happen before a range input emits its change event.
+    if (dirty && target?.startsWith("live:") && applying?.generation !== generation) changeChoice();
+    const request = applying;
+    const currentGeneration = generation;
+    if (request?.generation === currentGeneration) await request.promise;
+    if (currentGeneration === generation && failure) {
+      const error = failure;
+      failure = null;
+      throw error;
+    }
+  }
 
   function renderSettings() {
     el["settings-password"].value = "";
@@ -178,8 +309,45 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     el["settings-sound"].checked = config.settings.sound_alerts !== false;
     el["settings-web-console"].checked = config.settings.web_console !== false;
     el["settings-web-lan"].checked = config.settings.web_lan === true;
+    el["settings-background"].checked = config.settings.background_running === true;
+    backgroundInitial = el["settings-background"].checked;
     lanInitial = el["settings-web-lan"].checked;
   }
+  el["settings-background"].addEventListener("change", async () => {
+    if (!config || backgroundChanging) return;
+    const enabled = el["settings-background"].checked;
+    backgroundChanging = true;
+    el["settings-background"].disabled = true;
+    el["settings-save"].disabled = true;
+    message(el["settings-feedback"], t("Applying…"));
+    try {
+      const updated = await json("/api/settings", { settings: { background: enabled } });
+      if (updated.settings.background_running !== enabled) {
+        throw new Error(t("Background residency could not be applied. Restart the console and try again."));
+      }
+      config = updated;
+      backgroundInitial = config.settings.background_running === true;
+      el["settings-background"].checked = backgroundInitial;
+      onCatalogChange?.(config);
+      message(el["settings-feedback"], t(enabled
+        ? "Background residency is on. Browser tasks keep running after the terminal closes."
+        : "Background residency is off. Current tasks can finish before the console closes."));
+    } catch (error) {
+      // A response can be lost after the service applied the change. Ask the
+      // service for its actual state before putting the switch back.
+      try {
+        config = await json("/api/settings");
+        backgroundInitial = config.settings.background_running === true;
+      } catch { /* Keep the last confirmed value and show the error. */ }
+      el["settings-background"].checked = backgroundInitial;
+      message(el["settings-feedback"], t(error.message), true);
+    } finally {
+      backgroundChanging = false;
+      el["settings-background"].disabled = false;
+      el["settings-save"].disabled = false;
+    }
+  });
+
   function renderContextWindow() {
     const provider = config.providers.find(entry => entry.name === el["default-provider"].value);
     const model = provider?.models.find(entry => entry.name === el["default-model"].value);
@@ -200,8 +368,6 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     if (!config) return;
     providers(el["model-provider"], el["model-provider"].value);
     models(el["model-provider"], el["model-name"], el["model-name"].value);
-    intensities(el["model-intensity"], el["model-intensity"].value,
-      el["model-provider"].value, el["model-name"].value);
     if (el["settings-dialog"].open) {
       providers(el["default-provider"], el["default-provider"].value);
       models(el["default-provider"], el["default-model"], el["default-model"].value);
@@ -260,6 +426,7 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     el["settings-save"].disabled = true;
     const wasLan = config?.settings?.web_lan === true;
     const lanChanged = el["settings-web-lan"].checked !== lanInitial;
+    const backgroundChanged = el["settings-background"].checked !== backgroundInitial;
     const selection = { provider: el["default-provider"].value, model: el["default-model"].value, intensity: el["default-intensity"].value };
     const settings = {
       ...(!proMode ? {
@@ -275,6 +442,7 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
       sound_alerts: el["settings-sound"].checked,
       web_console: el["settings-web-console"].checked,
       ...(lanChanged ? { web_lan: el["settings-web-lan"].checked } : {}),
+      ...(backgroundChanged ? { background: el["settings-background"].checked } : {}),
       language: el["settings-language"].value,
       approval_mode: el["settings-approval"].value,
     };
@@ -289,16 +457,24 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
       // server bound and (when available) the address to open elsewhere.
       el["settings-web-lan"].checked = config.settings.web_lan === true;
       lanInitial = el["settings-web-lan"].checked;
+      el["settings-background"].checked = config.settings.background_running === true;
+      backgroundInitial = el["settings-background"].checked;
       const urls = Array.isArray(config.settings.web_urls) ? config.settings.web_urls : [];
       const lanNote = config.settings.web_lan === wasLan ? "" : config.settings.web_lan
         ? urls.length
           ? t("LAN access is on. Open {urls} from another device.", { urls: urls.join(" · ") })
           : t("LAN access is on, but no network address was found. Only this machine can connect.")
         : t("LAN access is off. Only this machine can connect.");
+      const backgroundNote = !backgroundChanged
+        ? ""
+        : config.settings.background
+          ? t("Background residency is on. Browser tasks keep running after the terminal closes.")
+          : t("Background residency is off. Current tasks can finish before the console closes.");
       const savedText = password
         ? t("Settings saved. Web password updated permanently.")
         : t("Settings saved.");
-      message(el["settings-feedback"], lanNote ? `${savedText} ${lanNote}` : savedText);
+      const notes = [lanNote, backgroundNote].filter(Boolean).join(" ");
+      message(el["settings-feedback"], notes ? `${savedText} ${notes}` : savedText);
     } catch (error) { message(el["settings-feedback"], t(error.message), true); }
     finally { el["settings-save"].disabled = false; }
   });
@@ -311,12 +487,13 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     clear,
     soundAlerts,
     refreshTexts,
+    flush,
     catalog: () => config,
-    defaultSelection: () => (config ? {
+    defaultSelection: () => (config ? (target?.startsWith("new:") && dirty ? choice() : {
       provider: config.selection.provider,
       model: config.selection.model,
       intensity: config.selection.intensity,
-    } : undefined),
+    }) : undefined),
     selectionForFile: id => target === `file:${id}` && dirty ? choice() : undefined,
   };
 }