@xingjisoft/neutrino 0.3.0 → 0.4.1

package/web/app.js

@@ -1,4 +1,5 @@
 import { createSettingsUI } from "./settings.js";
+import { createProUI } from "./pro.js";
 import { renderMarkdown as renderMarkdownHtml } from "./markdown.js";
 import { turnAnswerIndex, turnFolds, turnPreview, turnRanges } from "./turns.js";
 import { applyTranslations, getLanguage as currentLanguage, locale as currentLocale, setLanguage as setI18nLanguage, t as translate } from "./i18n.js";
@@ -24,6 +25,37 @@ const REFRESH_MS = 4000;
 // Remove credentials left behind by older versions of the UI.
 try { localStorage.removeItem("neutrino.token"); } catch { /* Storage may be blocked. */ }
 
+// ------------------------------------------------------------------ pro mode
+//
+// The "Pro" workspace is served at /pro and owns an isolated API under
+// /pro/api, while this page and the login cookie are shared. Detect the mode
+// before the request helpers below so no call can leak between the workspaces.
+const PRO_MODE = (() => {
+  try {
+    const pathname = String(location?.pathname ?? "");
+    return pathname === "/pro" || pathname.startsWith("/pro/");
+  } catch {
+    return false; // Test sandboxes and unusual embedders have no location.
+  }
+})();
+
+const API_BASE = PRO_MODE ? "/pro/api" : "/api";
+// Lets Pro-specific chrome (the wider sidebar needed by the longer brand name)
+// apply before the first paint of this module.
+if (PRO_MODE) document.body?.classList.add("pro-mode");
+
+/** Point an /api request at the active workspace; other paths are unchanged. */
+function apiPath(path) {
+  if (!PRO_MODE) return path;
+  const text = String(path);
+  return text.startsWith("/api/") ? `${API_BASE}${text.slice(4)}` : path;
+}
+
+/** Namespace a remembered preference so both workspaces keep their own copy. */
+function modeStorageKey(key) {
+  return PRO_MODE ? `neutrino.pro.${key}` : key;
+}
+
 // Translation lookup. `translate` is an ES-module import; the browser tests
 // that evaluate this file in a sandbox strip imports, so the helper degrades to
 // the English source text instead of throwing. Interpolation is kept here too.
@@ -92,7 +124,7 @@ const initialLogin = (() => {
 
 async function apiFetch(path, init = {}) {
   if (!await initialLogin) throw new Error("Password login required.");
-  const response = await fetch(path, { ...init, credentials: "same-origin" });
+  const response = await fetch(apiPath(path), { ...init, credentials: "same-origin" });
   if (response.status === 401) {
     showGate();
     throw new Error("Password login required.");
@@ -115,6 +147,7 @@ function showGate(message = "") {
   closeStream();
   setStatus("locked", "offline");
   document.getElementById("settings-dialog").close();
+  document.getElementById("background-dialog")?.close?.();
 
   // A modal dialog stays above streaming repaints and traps keyboard focus.
   const gate = document.createElement("dialog");
@@ -152,12 +185,90 @@ function showGate(message = "") {
   gate.showModal();
 }
 
+// -------------------------------------------------------- background invite
+//
+// Accepting changes the running console's lifetime immediately, including
+// conversations already in flight. A resident console never offers the prompt.
+
+let backgroundPromptAnswered = false;
+
+function showBackgroundPrompt() {
+  if (backgroundPromptAnswered || !el.backgroundDialog?.showModal) return;
+  if (el.backgroundDialog.open) return;
+  if (el.backgroundFeedback) {
+    el.backgroundFeedback.textContent = "";
+    el.backgroundFeedback.classList.remove("error");
+  }
+  try {
+    el.backgroundDialog.showModal();
+  } catch {
+    // An embedder without dialog support still gets the setting in Settings.
+  }
+}
+
+function maybePromptBackground(config) {
+  if (!config?.settings?.background_prompt) return;
+  if (config.settings.background === true) return;
+  showBackgroundPrompt();
+}
+
+async function answerBackgroundPrompt(enable) {
+  if (backgroundPromptAnswered) return;
+  backgroundPromptAnswered = true;
+  const feedback = el.backgroundFeedback;
+  const cancel = el.backgroundCancel;
+  const confirm = el.backgroundEnable;
+  if (cancel) cancel.disabled = true;
+  if (confirm) confirm.disabled = true;
+  if (feedback) {
+    feedback.textContent = "";
+    feedback.classList.remove("error");
+  }
+  try {
+    if (enable) {
+      const response = await apiFetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ settings: { background: true } }),
+      });
+      const body = await response.json();
+      if (!response.ok) throw new Error(body.error || `HTTP ${response.status}`);
+      if (body.settings?.background_running !== true) {
+        throw new Error(tr("Background residency could not be applied. Restart the console and try again."));
+      }
+      try { await preferences.load(); } catch { /* Residency is already active. */ }
+    } else {
+      // Consume the invitation for this CLI run. A failed dismissal is
+      // harmless: the prompt simply returns on the next page load.
+      try {
+        await apiFetch("/api/background/dismiss", { method: "POST" });
+      } catch { /* Keep the close local. */ }
+    }
+    el.backgroundDialog?.close?.();
+  } catch (error) {
+    backgroundPromptAnswered = false;
+    if (feedback) {
+      feedback.textContent = tr(error.message);
+      feedback.classList.add("error");
+    }
+  } finally {
+    if (cancel) cancel.disabled = false;
+    if (confirm) confirm.disabled = false;
+  }
+}
+
 const el = {
   app: document.getElementById("app"),
   back: document.getElementById("back-to-menu"),
   sessions: document.getElementById("sessions"),
   status: document.getElementById("status"),
   refresh: document.getElementById("refresh"),
+  brandLogo: document.getElementById("brand-logo"),
+  brandName: document.getElementById("brand-name"),
+  proTip: document.getElementById("pro-tip"),
+  proTipClose: document.getElementById("pro-tip-close"),
+  proExit: document.getElementById("pro-exit"),
+  header: document.getElementById("main-header"),
   title: document.getElementById("session-title"),
   sub: document.getElementById("session-sub"),
   controls: document.getElementById("controls"),
@@ -215,8 +326,28 @@ const el = {
   agentsList: document.getElementById("agents-list"),
   agentsFeedback: document.getElementById("agents-feedback"),
   agentsCwd: document.getElementById("agents-cwd"),
+  agentActions: document.getElementById("agent-actions"),
+  agentMigrate: document.getElementById("agent-migrate"),
+  agentMigrateFeedback: document.getElementById("agent-migrate-feedback"),
+  backgroundDialog: document.getElementById("background-dialog"),
+  backgroundFeedback: document.getElementById("background-feedback"),
+  backgroundCancel: document.getElementById("background-cancel"),
+  backgroundEnable: document.getElementById("background-enable"),
 };
 
+if (el.backgroundCancel) {
+  el.backgroundCancel.addEventListener("click", () => { void answerBackgroundPrompt(false); });
+}
+if (el.backgroundEnable) {
+  el.backgroundEnable.addEventListener("click", () => { void answerBackgroundPrompt(true); });
+}
+if (el.backgroundDialog) {
+  el.backgroundDialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    void answerBackgroundPrompt(false);
+  });
+}
+
 const state = {
   overview: null,
   // { kind: "live", key } | { kind: "file", id } | { kind: "new", cwd } |
@@ -235,6 +366,7 @@ const state = {
   fileData: null,
   // Last loaded read-only transcript from another agent.
   agentData: null,
+  agentMigration: null,
   // { key, path } | null — the working directory the sidebar is scoped to.
   workspace: storedWorkspace(),
   // Plan / usage card visibility and the plan it was opened for.
@@ -249,13 +381,16 @@ const state = {
 };
 
 function storedWorkspace() {
-  const path = readStorage("neutrino.workspace");
+  const path = readStorage(modeStorageKey("neutrino.workspace"));
   if (!path) return null;
   return { key: pathKey(path), path };
 }
 
+let proUI = null;
 const preferences = createSettingsUI({
   apiFetch,
+  proMode: PRO_MODE,
+  onCatalogChange: (catalog) => proUI?.load(catalog),
   onLanguageChange: (language) => changeInterfaceLanguage(language),
   async applyModel(selection) {
     const current = state.selection;
@@ -276,6 +411,37 @@ const preferences = createSettingsUI({
   },
 });
 
+if (PRO_MODE && typeof createProUI === "function") {
+  proUI = createProUI({
+    async changePreset(preset) {
+      const current = state.selection;
+      if (current?.kind === "live") {
+        const response = await apiFetch(`/api/live/${encodeURIComponent(current.key)}/pro-preset`, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ preset }),
+        });
+        const body = await response.json();
+        if (!response.ok) throw new Error(body.error || `HTTP ${response.status}`);
+        if (state.selection?.kind === "live" && state.selection.key === current.key) {
+          state.snapshot = body.snapshot;
+          renderLive();
+        }
+      } else if (current?.kind !== "file") {
+        const response = await apiFetch("/api/settings", {
+          method: "POST", headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ settings: { pro_preset: preset } }),
+        });
+        const body = await response.json();
+        if (!response.ok) throw new Error(body.error || `HTTP ${response.status}`);
+        await preferences.load();
+      }
+    },
+  });
+}
+
+function currentProPreset() {
+  return proUI?.preset() || preferences.catalog?.()?.pro?.preset;
+}
+
 // ------------------------------------------------------------------- sounds
 //
 // A turn that ends while the tab is in the background is invisible, so finished
@@ -395,7 +561,7 @@ function workspaceName(value) {
 
 function setWorkspace(workspace, { persist = true } = {}) {
   state.workspace = workspace ? { key: pathKey(workspace.path), path: workspace.path } : null;
-  if (persist) writeStorage("neutrino.workspace", state.workspace?.path ?? "");
+  if (persist) writeStorage(modeStorageKey("neutrino.workspace"), state.workspace?.path ?? "");
   renderWorkspaceChrome();
   renderSidebar();
 }
@@ -649,7 +815,7 @@ async function selectLive(key) {
 
 function openStream(key) {
   closeStream();
-  const source = new EventSource(`/api/live/${encodeURIComponent(key)}/stream`);
+  const source = new EventSource(apiPath(`/api/live/${encodeURIComponent(key)}/stream`));
   state.eventSource = source;
 
   source.addEventListener("snapshot", (event) => {
@@ -675,12 +841,14 @@ function openStream(key) {
 
   source.onopen = () => setStatus("live", "live");
   source.onerror = () => {
-    // EventSource retries automatically; just surface the state.
+    // EventSource retries automatically; wait for a fresh snapshot to flash.
+    el.header?.classList.remove("is-thinking");
     setStatus("reconnecting…", "offline");
   };
 }
 
 function closeStream() {
+  el.header?.classList.remove("is-thinking");
   if (state.eventSource) {
     state.eventSource.close();
     state.eventSource = null;
@@ -728,6 +896,7 @@ function renderFile(data) {
   el.title.textContent = firstUserMessage(messages) || tr("Conversation");
   el.sub.textContent = [data.cwd, data.model, data.provider].filter(Boolean).join(" · ");
   preferences.showConversation(data, `file:${data.id}`);
+  proUI?.show(data, `file:${data.id}`);
   renderMessageList(messages, null, { readOnly: true, context: data.context, active: false });
   renderFileControls(data);
   maybeOpenPlan(data.plan);
@@ -779,10 +948,11 @@ function renderFileControls(data) {
 
 /** Attach to a resumed conversation, creating it server-side when needed. */
 async function continueSession(id, selection = preferences.selectionForFile(id)) {
+  const payload = PRO_MODE ? { pro_preset: currentProPreset() } : selection ? { selection } : undefined;
   const response = await apiFetch(`/api/session/${encodeURIComponent(id)}/continue`, {
     method: "POST",
-    headers: selection ? { "Content-Type": "application/json" } : undefined,
-    body: selection ? JSON.stringify({ selection }) : undefined,
+    headers: payload ? { "Content-Type": "application/json" } : undefined,
+    body: payload ? JSON.stringify(payload) : undefined,
   });
   const body = await response.json().catch(() => ({}));
   if (!response.ok) throw new Error(body.error || `HTTP ${response.status}`);
@@ -792,17 +962,37 @@ async function continueSession(id, selection = preferences.selectionForFile(id))
 
 function setComposerMode(mode) {
   state.composerMode = mode;
+  el.agentActions.classList.add("hidden");
   el.composer.classList.remove("hidden");
   el.input.placeholder = mode === "resume"
     ? tr("Continue this conversation…")
     : mode === "new"
       ? tr("Message Neutrino in this folder…")
       : tr("Message Neutrino…");
+  renderComposerAction();
+}
+
+function canPauseFromComposer() {
+  const selection = state.selection;
+  const snapshot = state.snapshot;
+  return Boolean(selection?.kind === "live" && snapshot?.key === selection.key
+    && snapshot.busy && !snapshot.paused && !el.input.value.trim());
+}
+
+function renderComposerAction() {
+  const pause = canPauseFromComposer();
+  const label = pause ? "Pause" : "Send message";
+  el.send.classList.toggle("is-pause", pause);
+  el.send.setAttribute("data-i18n-title", label);
+  el.send.setAttribute("data-i18n-aria-label", label);
+  el.send.title = tr(label);
+  el.send.setAttribute("aria-label", tr(label));
 }
 
 function hideComposer() {
   preferences.clear();
   el.composer.classList.add("hidden");
+  el.agentActions.classList.add("hidden");
   renderApproval(null);
 }
 
@@ -954,11 +1144,14 @@ function decideApproval(approved) {
 function renderLive() {
   const snapshot = state.snapshot;
   if (!snapshot) return;
+  renderComposerAction();
+  el.header?.classList.toggle("is-thinking", Boolean(snapshot.busy && !snapshot.paused && !snapshot.approval));
   state.fileData = null;
   state.agentData = null;
   el.title.textContent = snapshot.title || tr("New conversation");
   el.sub.textContent = [snapshot.cwd, snapshot.model, snapshot.provider].filter(Boolean).join(" · ");
   preferences.showConversation(snapshot, `live:${snapshot.key}`);
+  proUI?.show(snapshot, `live:${snapshot.key}`);
   renderControls(snapshot);
   renderApproval(snapshot);
   renderMessageList(snapshot.messages ?? [], snapshot.streamingContent, {
@@ -1319,11 +1512,20 @@ async function postAction(key, action, body) {
   }
 }
 
+function activateComposer() {
+  if (canPauseFromComposer()) return postAction(state.selection.key, "pause");
+  return sendMessage();
+}
+
 async function sendMessage() {
   const selection = state.selection;
   if (!selection) return;
   const text = el.input.value;
   if (!text.trim()) return;
+  if (PRO_MODE) {
+    try { await proUI?.flush(); }
+    catch (error) { el.sub.textContent = error.message; return; }
+  }
 
   if (selection.kind === "live") {
     el.input.value = "";
@@ -1366,6 +1568,7 @@ async function sendMessage() {
 function autosize() {
   el.input.style.height = "auto";
   el.input.style.height = `${Math.min(el.input.scrollHeight, 220)}px`;
+  renderComposerAction();
 }
 
 // ------------------------------------------------------- workspaces & dialogs
@@ -1467,6 +1670,7 @@ function renderWorkspaceLanding(path) {
   el.title.textContent = workspaceName(path) || tr("Working directory");
   el.sub.textContent = path;
   setComposerMode("new");
+  proUI?.show(null, `new:${path}`);
   el.messages.innerHTML = "";
 
   const empty = document.createElement("div");
@@ -1616,6 +1820,19 @@ function fillNewChatModels(catalog, selectedModel) {
   })), selectedModel);
 }
 
+/** Offer only the levels the chosen model declares, keeping the draft if valid. */
+function fillNewChatIntensities(catalog, selected) {
+  const provider = catalog.providers.find((entry) => entry.name === el.newChatProvider.value) ?? catalog.providers[0];
+  const model = provider?.models.find((entry) => entry.name === el.newChatModel.value);
+  const levels = Array.isArray(model?.intensities) && model.intensities.length ? model.intensities : catalog.intensities;
+  let wanted = selected;
+  if (!levels.includes(wanted)) {
+    const fallback = catalog.settings?.default_intensity;
+    wanted = levels.includes(fallback) ? fallback : levels.includes("High") ? "High" : levels[0] ?? "";
+  }
+  fillSelect(el.newChatIntensity, levels.map((value) => ({ value, label: value })), wanted);
+}
+
 function updateNewChatNote(catalog) {
   const provider = catalog?.providers.find((entry) => entry.name === el.newChatProvider.value);
   const model = provider?.models.find((entry) => entry.name === el.newChatModel.value);
@@ -1626,6 +1843,15 @@ function updateNewChatNote(catalog) {
   }
 }
 
+function renderProNewChatPresets(catalog, selected = catalog.pro?.preset) {
+  if (!PRO_MODE) return;
+  const select = document.getElementById("new-chat-pro-preset");
+  if (!select) return;
+  fillSelect(select, (catalog.pro?.presets || []).map(preset => ({
+    value: preset.name, label: uiLanguage() === "zh" ? preset.chinese_name || preset.name : preset.name,
+  })), selected);
+}
+
 /** Relabel the open new-conversation sheet without losing its selections. */
 function refreshNewChatTexts() {
   if (!el.newChatDialog?.open) return;
@@ -1637,9 +1863,10 @@ function refreshNewChatTexts() {
   const approval = el.newChatApproval.value;
   fillSelect(el.newChatProvider, catalog.providers.map((entry) => ({ value: entry.name, label: entry.name })), provider);
   fillNewChatModels(catalog, model);
-  fillSelect(el.newChatIntensity, catalog.intensities.map((value) => ({ value, label: value })), intensity);
+  fillNewChatIntensities(catalog, intensity);
   el.newChatApproval.value = approval;
   updateNewChatNote(catalog);
+  renderProNewChatPresets(catalog, document.getElementById("new-chat-pro-preset")?.value);
   renderNewChatRecents();
 }
 
@@ -1659,13 +1886,14 @@ async function openNewChatDialog(options = {}) {
   const defaults = catalog.selection;
   fillSelect(el.newChatProvider, catalog.providers.map((provider) => ({ value: provider.name, label: provider.name })), defaults.provider);
   fillNewChatModels(catalog, defaults.model);
-  fillSelect(el.newChatIntensity, catalog.intensities.map((value) => ({ value, label: value })), defaults.intensity);
+  fillNewChatIntensities(catalog, defaults.intensity);
   el.newChatApproval.value = catalog.settings.approval_mode === "auto" ? "auto" : "request";
 
   const start = String(options.cwd || selectionCwd() || state.workspace?.path || state.workspaces?.cwd || "").trim();
   el.newChatCwd.value = start;
   renderNewChatRecents();
   updateNewChatNote(catalog);
+  renderProNewChatPresets(catalog);
   if (typeof el.newChatCwd.focus === "function") el.newChatCwd.focus();
 }
 
@@ -1686,7 +1914,8 @@ async function submitNewChat() {
   el.newChatStart.textContent = tr("Creating…");
   el.newChatFeedback.textContent = "";
   try {
-    const created = await createConversation(cwd, selection, el.newChatApproval.value);
+    const created = await createConversation(cwd, selection, el.newChatApproval.value,
+      PRO_MODE ? document.getElementById("new-chat-pro-preset")?.value : undefined);
     el.newChatDialog.close();
     await selectLive(created.key);
     setConversationView(true);
@@ -1700,9 +1929,10 @@ async function submitNewChat() {
 }
 
 /** Create a browser-owned conversation in `cwd` and reveal its folder. */
-async function createConversation(cwd, selection, approvalMode) {
+async function createConversation(cwd, selection, approvalMode, proPreset = currentProPreset()) {
   const payload = { cwd };
-  if (selection && selection.provider && selection.model) payload.selection = selection;
+  if (PRO_MODE) payload.pro_preset = proPreset;
+  else if (selection && selection.provider && selection.model) payload.selection = selection;
   if (approvalMode === "request" || approvalMode === "auto") payload.approval_mode = approvalMode;
   const response = await apiFetch("/api/conversations", {
     method: "POST",
@@ -2087,7 +2317,7 @@ function renderAgentList(groups) {
         "</span>";
       item.addEventListener("click", () => {
         el.agentsDialog.close();
-        void selectAgentSession(group.id, session.id, session.title || "");
+        void selectAgentSession(group.id, session.id, session.title || "", group.cwd);
       });
       section.appendChild(item);
     }
@@ -2106,7 +2336,7 @@ async function openAgentsDialog() {
       const response = await apiFetch(`/api/agents/${agent.id}/sessions?cwd=${encodeURIComponent(cwd)}`, { cache: "no-store" });
       const data = await response.json().catch(() => ({}));
       if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
-      return { ...agent, sessions: Array.isArray(data.sessions) ? data.sessions : [] };
+      return { ...agent, cwd: data.cwd || cwd, sessions: Array.isArray(data.sessions) ? data.sessions : [] };
     }));
     el.agentsFeedback.textContent = "";
     renderAgentList(groups);
@@ -2133,11 +2363,53 @@ function renderAgentView(data) {
   renderApproval(null);
   renderPlanCard(null);
   hideComposer();
+  renderAgentMigration(data);
+}
+
+function renderAgentMigration(data) {
+  el.agentActions.classList.remove("hidden");
+  el.agentMigrate.disabled = Boolean(state.agentMigration) || !data.cwd || !data.messages?.length;
+  el.agentMigrate.textContent = state.agentMigration === state.selection ? tr("Migrating…") : tr("Migrate session");
+}
+
+async function migrateSelectedAgentSession() {
+  const selection = state.selection;
+  const source = state.agentData;
+  if (selection?.kind !== "agent" || !source?.cwd || !source.messages?.length || state.agentMigration) return;
+  state.agentMigration = selection;
+  el.agentMigrateFeedback.textContent = "";
+  renderAgentMigration(source);
+  try {
+    const payload = { cwd: source.cwd };
+    if (PRO_MODE) payload.pro_preset = currentProPreset();
+    const response = await apiFetch(`/api/agents/${encodeURIComponent(selection.agent)}/sessions/${encodeURIComponent(selection.id)}/migrate`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    if (state.selection === selection) {
+      setWorkspace({ path: data.cwd });
+      await selectLive(data.key);
+      el.input.focus();
+    }
+    await loadOverview({ silent: true });
+  } catch (error) {
+    if (state.selection === selection) {
+      el.agentMigrateFeedback.textContent = tr("Could not migrate this session: {error}", { error: error.message });
+    }
+  } finally {
+    state.agentMigration = null;
+    if (state.selection?.kind === "agent" && state.agentData) renderAgentMigration(state.agentData);
+  }
 }
 
-async function selectAgentSession(agent, id, title) {
+async function selectAgentSession(agent, id, title, cwd) {
+  const scope = cwd || await agentsScopeCwd();
   closeStream();
-  state.selection = { kind: "agent", agent, id, title };
+  const selection = { kind: "agent", agent, id, title, cwd: scope };
+  state.selection = selection;
   state.snapshot = null;
   state.fileData = null;
   state.agentData = null;
@@ -2149,17 +2421,20 @@ async function selectAgentSession(agent, id, title) {
   renderApproval(null);
   renderPlanCard(null);
   hideComposer();
+  el.agentMigrateFeedback.textContent = "";
   el.title.textContent = tr("Loading…");
   el.sub.textContent = title || "";
   resetMessagePane(tr("Loading…"));
   setConversationView(true);
   try {
-    const response = await apiFetch(`/api/agents/${encodeURIComponent(agent)}/sessions/${encodeURIComponent(id)}`, { cache: "no-store" });
+    const response = await apiFetch(`/api/agents/${encodeURIComponent(agent)}/sessions/${encodeURIComponent(id)}?cwd=${encodeURIComponent(scope)}`, { cache: "no-store" });
     const data = await response.json().catch(() => ({}));
+    if (state.selection !== selection) return;
     if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
-    state.agentData = { ...data, agent, cwd: state.agentData?.cwd || state.workspace?.path || "" };
+    state.agentData = { ...data, agent, cwd: data.cwd || scope };
     renderAgentView(state.agentData);
   } catch (error) {
+    if (state.selection !== selection) return;
     el.title.textContent = title || tr("Conversation");
     el.sub.textContent = tr("Could not load this session: {error}", { error: error.message });
     resetMessagePane(tr("Could not load this session: {error}", { error: error.message }));
@@ -2177,11 +2452,12 @@ function syncLanguageSelects(language) {
 async function changeInterfaceLanguage(language, { persist = true } = {}) {
   const normalized = String(language ?? "").toLowerCase().startsWith("zh") ? "zh" : "en";
   setUiLanguage(normalized);
-  writeStorage("neutrino.language", normalized);
+  writeStorage(modeStorageKey("neutrino.language"), normalized);
   applyStaticTranslations();
   syncLanguageSelects(normalized);
   if (state.status) setStatus(state.status.key, state.status.kind);
   preferences.refreshTexts?.();
+  proUI?.refresh();
   refreshNewChatTexts();
   renderWorkspaceChrome();
   renderSidebar();
@@ -2209,18 +2485,197 @@ async function changeInterfaceLanguage(language, { persist = true } = {}) {
 }
 
 function initializeLanguage() {
-  const stored = readStorage("neutrino.language");
+  const stored = readStorage(modeStorageKey("neutrino.language"));
   if (stored) setUiLanguage(stored);
   applyStaticTranslations();
   syncLanguageSelects(uiLanguage());
   if (state.status) setStatus(state.status.key, state.status.kind);
 }
 
+// ------------------------------------------------------------------ pro mode
+//
+// Both workspaces reuse this console. Clicking the orbit badge on the normal
+// console starts a short wordmark curtain; the recorded start time lets /pro
+// finish the same animation instead of flashing the freshly loaded page.
+
+const PRO_TRANSITION_KEY = "neutrino.pro.transition";
+const PRO_TIP_KEY = "neutrino.pro.tip.dismissed";
+const PRO_TRANSITION_FADE_MS = 350; // curtain fade in / fade out
+const PRO_TRANSITION_COVER_MS = 450; // navigate once the curtain is fully opaque
+const PRO_TRANSITION_HOLD_MS = 3000; // wordmark stays up until 3s after the switch began
+const PRO_TRANSITION_RESUME_MS = 8000; // older records are stale and never replayed
+const PRO_LOGO_MARK = '<img class="pro-logo-mark" src="/neutrino.png" alt="Neutrino Pro">';
+
+let proTransitionStarted = false;
+
+function proCurtain() {
+  const curtain = document.createElement("div");
+  curtain.className = "pro-curtain";
+  curtain.setAttribute("aria-hidden", "true");
+  const image = document.createElement("img");
+  image.src = "/neutrino-pro.gif";
+  image.alt = "";
+  curtain.appendChild(image);
+  return curtain;
+}
+
+/** Timers exist in the browser; the test sandboxes load this file without them. */
+function proDelay(callback, ms) {
+  if (typeof setTimeout === "function") setTimeout(callback, ms);
+}
+
+function startProTransition() {
+  if (PRO_MODE || proTransitionStarted) return;
+  proTransitionStarted = true;
+  const started = Date.now();
+  try {
+    sessionStorage.setItem(PRO_TRANSITION_KEY, String(started));
+  } catch { /* Storage may be blocked; navigation still works. */ }
+
+  const curtain = proCurtain();
+  curtain.style.transition = `opacity ${PRO_TRANSITION_FADE_MS}ms ease`;
+  document.body.appendChild(curtain);
+  // Commit the transparent first frame, then let the style transition fade in.
+  void curtain.offsetWidth;
+  curtain.classList.add("pro-curtain-visible");
+
+  proDelay(() => {
+    try { location.assign("/pro"); } catch { location.href = "/pro"; }
+  }, PRO_TRANSITION_COVER_MS);
+}
+
+/** Remove every switch curtain left in this document. */
+function removeProCurtains() {
+  if (typeof document.querySelectorAll !== "function") return;
+  for (const curtain of document.querySelectorAll(".pro-curtain")) curtain.remove?.();
+}
+
+/**
+ * Drop the one-shot switch chrome.
+ *
+ * The curtain lives in the document that navigated away, so the browser's
+ * back/forward cache can restore it fully opaque — a Back or Forward would
+ * otherwise land on that frozen frame. `clearRecord` stays false while this
+ * document is being hidden for /pro: the destination still needs the recorded
+ * start time to finish the same animation.
+ */
+function resetProTransition({ clearRecord = true } = {}) {
+  removeProCurtains();
+  document.documentElement?.classList?.remove?.("pro-transitioning");
+  proTransitionStarted = false;
+  if (!clearRecord) return;
+  try { sessionStorage.removeItem(PRO_TRANSITION_KEY); } catch { /* Storage may be blocked. */ }
+}
+
+/** Undo the switch chrome when the browser restores either page from bfcache. */
+function watchProNavigation() {
+  if (typeof window === "undefined" || typeof window.addEventListener !== "function") return;
+  window.addEventListener("pagehide", (event) => {
+    if (!event?.persisted) return;
+    // The page is entering the back/forward cache: clean the snapshot, but
+    // keep the record for the /pro page that is currently loading.
+    resetProTransition({ clearRecord: false });
+  });
+  window.addEventListener("pageshow", (event) => {
+    if (!event?.persisted) return;
+    // Restored by Back/Forward: any curtain captured in the snapshot is stale.
+    resetProTransition();
+  });
+}
+
+/** Consume a just-recorded switch and finish the animation on /pro. */
+function resumeProTransition() {
+  if (!PRO_MODE) return;
+  let started = 0;
+  try { started = Number(sessionStorage.getItem(PRO_TRANSITION_KEY)) || 0; } catch { /* Storage may be blocked. */ }
+  // Consume the record even when stale: direct visits never show a curtain.
+  if (started) {
+    try { sessionStorage.removeItem(PRO_TRANSITION_KEY); } catch { /* Ignore. */ }
+  }
+  const now = Date.now();
+  const age = now - started;
+  if (!started || age < 0 || age > PRO_TRANSITION_RESUME_MS) {
+    document.documentElement.classList.remove("pro-transitioning");
+    return;
+  }
+
+  const curtain = proCurtain();
+  // Start fully opaque on the first frame so the new page never flashes through.
+  curtain.style.transition = "none";
+  curtain.style.opacity = "1";
+  document.body.appendChild(curtain);
+  // The real curtain is up: retire the pre-paint cover from index.html so it
+  // cannot remain over the page after the fade completes.
+  document.documentElement.classList.remove("pro-transitioning");
+
+  proDelay(() => {
+    curtain.style.transition = `opacity ${PRO_TRANSITION_FADE_MS}ms ease`;
+    curtain.style.opacity = "0";
+    proDelay(() => curtain.remove(), PRO_TRANSITION_FADE_MS);
+  }, Math.max(0, started + PRO_TRANSITION_HOLD_MS - now));
+}
+
+/** In Pro mode the badge is a static "you are here" mark, not a control. */
+function applyProBrand() {
+  document.title = "Neutrino Pro";
+  if (el.brandName) el.brandName.textContent = "Neutrino Pro";
+  const logo = el.brandLogo;
+  if (!logo) return;
+  logo.innerHTML = PRO_LOGO_MARK;
+  logo.classList.add("pro-logo");
+  logo.tabIndex = -1;
+  // Drop the i18n annotations too, or a language switch restores the tooltip.
+  const annotations = ["title", "aria-label", "data-i18n-title", "data-i18n-aria-label"];
+  for (const attribute of annotations) logo.removeAttribute?.(attribute);
+}
+
+/** The blue tip explains the badge on the normal console; Pro never shows it. */
+function initializeProTip() {
+  if (PRO_MODE || !el.proTip) return;
+  if (readStorage(PRO_TIP_KEY) === "1") return;
+  el.proTip.classList.remove("hidden");
+  el.proTipClose?.addEventListener("click", () => {
+    writeStorage(PRO_TIP_KEY, "1");
+    el.proTip.classList.add("hidden");
+  });
+}
+
+/** The Pro workspace's top-right escape hatch back to the regular console. */
+function initializeProExit() {
+  if (!el.proExit) return;
+  el.proExit.classList.remove("hidden");
+  el.proExit.addEventListener("click", () => {
+    el.proExit.disabled = true;
+    try {
+      location.assign("/");
+    } catch {
+      location.href = "/";
+    }
+  });
+}
+
+/** Wire the shared brand and either start the switch or resume its animation. */
+function initializeProWorkspace() {
+  watchProNavigation();
+  if (PRO_MODE) {
+    applyProBrand();
+    initializeProExit();
+    resumeProTransition();
+    return;
+  }
+  // A switch that was interrupted (Stop, Back, a failed navigation) can leave
+  // the record and the pre-paint cover behind. Neither may ever affect the
+  // regular console, so clear them before wiring the badge.
+  resetProTransition();
+  el.brandLogo?.addEventListener("click", startProTransition);
+  initializeProTip();
+}
+
 // --------------------------------------------------------------------- init
 
 el.refresh.addEventListener("click", () => loadOverview());
 el.back.addEventListener("click", () => setConversationView(false));
-el.send.addEventListener("click", sendMessage);
+el.send.addEventListener("click", activateComposer);
 el.input.addEventListener("input", autosize);
 el.input.addEventListener("keydown", (event) => {
   if (event.key === "Enter" && !event.shiftKey) {
@@ -2243,6 +2698,7 @@ el.workspaceAdd.addEventListener("click", () => {
   openFolderDialog({ start: state.workspace?.path || state.workspaces?.cwd || "", onPick: (path) => openWorkspace(path) });
 });
 el.agentsOpen.addEventListener("click", () => openAgentsDialog());
+el.agentMigrate.addEventListener("click", () => migrateSelectedAgentSession());
 el.agentsClose.addEventListener("click", () => el.agentsDialog.close());
 el.agentsDialog.addEventListener("cancel", (event) => {
   event.preventDefault();
@@ -2274,12 +2730,16 @@ el.newChatProvider.addEventListener("change", () => {
   const catalog = preferences.catalog?.();
   if (catalog) {
     fillNewChatModels(catalog, "");
+    fillNewChatIntensities(catalog, el.newChatIntensity.value);
     updateNewChatNote(catalog);
   }
 });
 el.newChatModel.addEventListener("change", () => {
   const catalog = preferences.catalog?.();
-  if (catalog) updateNewChatNote(catalog);
+  if (catalog) {
+    fillNewChatIntensities(catalog, el.newChatIntensity.value);
+    updateNewChatNote(catalog);
+  }
 });
 
 el.folderClose.addEventListener("click", () => el.folderDialog.close());
@@ -2318,11 +2778,16 @@ el.folderDialog.addEventListener("cancel", (event) => {
 window.addEventListener("beforeunload", closeStream);
 
 initializeLanguage();
+initializeProWorkspace();
 preferences.load()
-  .then((config) => {
+  .then(async (config) => {
     const language = config?.settings?.language;
-    if (language && language !== uiLanguage()) return changeInterfaceLanguage(language, { persist: false });
-    return undefined;
+    if (language && language !== uiLanguage()) {
+      await changeInterfaceLanguage(language, { persist: false });
+    }
+    // Offer background residency only after the interface language is settled,
+    // so the invitation is never briefly shown in the wrong language.
+    maybePromptBackground(config);
   })
   .catch(error => console.error(error));
 loadOverview().then(() => {