@xingjisoft/neutrino 0.2.1 → 0.4.0

package/web/app.js

@@ -1,5 +1,8 @@
 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";
 
 // Neutrino web UI — a dependency-free single page app.
 //
@@ -21,6 +24,74 @@ const REFRESH_MS = 4000;
 // Login is remembered in an HttpOnly cookie shared by fetch and EventSource.
 // 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.
+const tr = (text, values) => {
+  if (typeof translate === "function") return translate(text, values);
+  return String(text ?? "").replace(/\{(\w+)\}/g, (match, name) =>
+    values && Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match);
+};
+
+function uiLanguage() {
+  return typeof currentLanguage === "function" ? currentLanguage() : "en";
+}
+
+function setUiLanguage(value) {
+  return typeof setI18nLanguage === "function" ? setI18nLanguage(value) : "en";
+}
+
+function localeTag() {
+  return typeof currentLocale === "function" ? currentLocale() : "en-US";
+}
+
+function applyStaticTranslations() {
+  if (typeof applyTranslations === "function") applyTranslations(document);
+}
+
+function readStorage(key) {
+  try {
+    return localStorage.getItem(key) || "";
+  } catch {
+    return "";
+  }
+}
+
+function writeStorage(key, value) {
+  try { localStorage.setItem(key, value); } catch { /* Private mode may block storage. */ }
+}
 async function loginWithPassword(password) {
   const response = await fetch("/api/auth/login", {
     method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" },
@@ -53,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.");
@@ -84,12 +155,12 @@ function showGate(message = "") {
   gate.innerHTML =
     '<form class="gate-card">' +
     '<div class="gate-brand"><span class="logo">' + LOGO_MARK + "</span><strong>Neutrino</strong></div>" +
-    '<h2 id="login-title">Sign in</h2>' +
-    '<p>Enter your Web password to open this console. The default password is 114514.</p>' +
-    '<label for="login-password">Password</label>' +
+    '<h2 id="login-title">' + tr("Sign in") + "</h2>" +
+    "<p>" + tr("Enter your Web password to open this console. The default password is 114514.") + "</p>" +
+    '<label for="login-password">' + tr("Password") + "</label>" +
     '<input id="login-password" name="password" type="password" autocomplete="current-password" maxlength="256" required autofocus>' +
     '<p class="form-feedback error" role="alert"></p>' +
-    '<button class="primary" type="submit">Sign in</button>' +
+    '<button class="primary" type="submit">' + tr("Sign in") + "</button>" +
     "</form>";
   gate.querySelector(".form-feedback").textContent = message;
   gate.addEventListener("cancel", event => event.preventDefault());
@@ -119,6 +190,11 @@ const el = {
   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"),
   title: document.getElementById("session-title"),
   sub: document.getElementById("session-sub"),
   controls: document.getElementById("controls"),
@@ -127,11 +203,61 @@ const el = {
   input: document.getElementById("input"),
   send: document.getElementById("send"),
   approval: document.getElementById("approval"),
+  emptyNewChat: document.getElementById("empty-new-chat"),
+  newChat: document.getElementById("new-chat"),
+  workspaceButton: document.getElementById("workspace-button"),
+  workspaceLabel: document.getElementById("workspace-label"),
+  languageSelect: document.getElementById("language-select"),
+  planCard: document.getElementById("plan-card"),
+  workspaceDialog: document.getElementById("workspace-dialog"),
+  workspaceList: document.getElementById("workspace-list"),
+  workspaceAll: document.getElementById("workspace-all"),
+  workspaceAdd: document.getElementById("workspace-add"),
+  workspaceClose: document.getElementById("workspace-close"),
+  workspaceFeedback: document.getElementById("workspace-feedback"),
+  newChatDialog: document.getElementById("new-chat-dialog"),
+  newChatForm: document.getElementById("new-chat-form"),
+  newChatTitle: document.getElementById("new-chat-title"),
+  newChatClose: document.getElementById("new-chat-close"),
+  newChatCancel: document.getElementById("new-chat-cancel"),
+  newChatStart: document.getElementById("new-chat-start"),
+  newChatCwd: document.getElementById("new-chat-cwd"),
+  newChatBrowse: document.getElementById("new-chat-browse"),
+  newChatRecents: document.getElementById("new-chat-recents"),
+  newChatProvider: document.getElementById("new-chat-provider"),
+  newChatModel: document.getElementById("new-chat-model"),
+  newChatIntensity: document.getElementById("new-chat-intensity"),
+  newChatApproval: document.getElementById("new-chat-approval"),
+  newChatNote: document.getElementById("new-chat-note"),
+  newChatFeedback: document.getElementById("new-chat-feedback"),
+  folderDialog: document.getElementById("folder-dialog"),
+  folderTitle: document.getElementById("folder-title"),
+  folderClose: document.getElementById("folder-close"),
+  folderCancel: document.getElementById("folder-cancel"),
+  folderUse: document.getElementById("folder-use"),
+  folderUp: document.getElementById("folder-up"),
+  folderPath: document.getElementById("folder-path"),
+  folderGo: document.getElementById("folder-go"),
+  folderRoots: document.getElementById("folder-roots"),
+  folderList: document.getElementById("folder-list"),
+  folderNew: document.getElementById("folder-new"),
+  folderNewName: document.getElementById("folder-new-name"),
+  folderNewCreate: document.getElementById("folder-new-create"),
+  folderNewCancel: document.getElementById("folder-new-cancel"),
+  folderMkdir: document.getElementById("folder-mkdir"),
+  folderFeedback: document.getElementById("folder-feedback"),
+  agentsOpen: document.getElementById("agents-open"),
+  agentsDialog: document.getElementById("agents-dialog"),
+  agentsClose: document.getElementById("agents-close"),
+  agentsList: document.getElementById("agents-list"),
+  agentsFeedback: document.getElementById("agents-feedback"),
+  agentsCwd: document.getElementById("agents-cwd"),
 };
 
 const state = {
   overview: null,
-  // { kind: "live", key } | { kind: "file", id } | null
+  // { kind: "live", key } | { kind: "file", id } | { kind: "new", cwd } |
+  // { kind: "agent", agent, id, title } | null
   selection: null,
   snapshot: null,
   eventSource: null,
@@ -142,10 +268,35 @@ const state = {
   // Turns the reader expanded; a finished turn is folded unless listed here.
   openTurns: new Set(),
   openContext: null,
+  // Last loaded saved transcript, kept so a language switch can repaint it.
+  fileData: null,
+  // Last loaded read-only transcript from another agent.
+  agentData: 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.
+  planOpen: false,
+  planSeen: "",
+  composerMode: "live",
+  // Folder-picker state: where it is, what to do with the picked path.
+  folder: { path: "", parent: null, roots: [], onPick: null, mode: "workspace", loading: false },
+  workspaces: null,
+  // Translation key and colour class of the sidebar status line.
+  status: { key: "connecting…", kind: "" },
 };
 
+function storedWorkspace() {
+  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;
     if (!current) throw new Error("Select a conversation first.");
@@ -165,6 +316,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
@@ -258,6 +440,37 @@ function shortenPath(value, depth = 2) {
   return `…${separator}${parts.slice(-depth).join(separator)}`;
 }
 
+/**
+ * Canonical form of a working directory, matching the server's `normalizeCwd`.
+ * It is only used to decide which sidebar group a path belongs to.
+ */
+function pathKey(value) {
+  let text = String(value ?? "").trim();
+  if (!text) return "";
+  text = text.replace(/^\\\\\?\\/, "").replace(/\\/g, "/").replace(/\/{2,}/g, "/");
+  const wsl = /^\/(?:mnt|cygdrive)\/([a-zA-Z])(\/.*)?$/.exec(text);
+  const win = /^([a-zA-Z]):(\/.*)?$/.exec(text);
+  const drive = wsl ?? win;
+  if (drive) {
+    const rest = (drive[2] || "/").replace(/\/+$/, "") || "/";
+    return `${drive[1].toLowerCase()}:${rest.toLowerCase()}`;
+  }
+  return text.length > 1 ? text.replace(/\/+$/, "") : text;
+}
+
+/** Last path segment, used for compact workspace labels. */
+function workspaceName(value) {
+  const parts = String(value ?? "").split(/[\\/]+/).filter(Boolean);
+  return parts.length ? parts[parts.length - 1] : String(value ?? "");
+}
+
+function setWorkspace(workspace, { persist = true } = {}) {
+  state.workspace = workspace ? { key: pathKey(workspace.path), path: workspace.path } : null;
+  if (persist) writeStorage(modeStorageKey("neutrino.workspace"), state.workspace?.path ?? "");
+  renderWorkspaceChrome();
+  renderSidebar();
+}
+
 function safeJson(value) {
   try {
     return JSON.stringify(value ?? {});
@@ -272,44 +485,33 @@ function formatTime(value) {
   if (Number.isNaN(date.getTime())) return "";
   const now = Date.now();
   const diff = now - date.getTime();
-  if (diff < 60_000) return "just now";
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
-  return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  if (diff < 60_000) return tr("just now");
+  if (diff < 3_600_000) return tr("{n}m ago", { n: Math.floor(diff / 60_000) });
+  if (diff < 86_400_000) return tr("{n}h ago", { n: Math.floor(diff / 3_600_000) });
+  return date.toLocaleDateString(localeTag(), { month: "short", day: "numeric" });
 }
 
 function formatDate(value) {
   if (!value) return "";
   const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString(localeTag());
 }
 
-function setStatus(text, kind) {
-  el.status.textContent = text;
+function setStatus(key, kind) {
+  // Store the translation key, not the rendered text: switching languages must
+  // not leave a stale word in the sidebar.
+  state.status = { key, kind };
+  el.status.textContent = tr(key);
   el.status.className = `status${kind ? ` ${kind}` : ""}`;
 }
 
-// A deliberately small markdown renderer: code fences, inline code, bold,
-// italics and links. Everything else is escaped, so model output is inert.
+// Full markdown lives in web/markdown.js: headings, lists, tables, code,
+// quotes, links, images and the inline emphasis family. The fallback keeps the
+// sandboxed browser tests working when module imports are stripped; it still
+// escapes all model output before adding line breaks.
 function renderMarkdown(value) {
-  const placeholders = [];
-  let source = String(value ?? "");
-  source = source.replace(/```[\w-]*\n?([\s\S]*?)```/g, (_, code) => {
-    const id = `\u0000CODE${placeholders.length}\u0000`;
-    placeholders.push(`<pre class="code"><code>${escapeHtml(code.replace(/\n$/, ""))}</code></pre>`);
-    return id;
-  });
-  source = escapeHtml(source);
-  source = source.replace(/`([^`\n]+)`/g, "<code>$1</code>");
-  source = source.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
-  source = source.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
-  source = source.replace(
-    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
-    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
-  );
-  source = source.replace(/\n/g, "<br>");
-  source = source.replace(/\u0000CODE(\d+)\u0000/g, (_, index) => placeholders[Number(index)] ?? "");
-  return source;
+  if (typeof renderMarkdownHtml === "function") return renderMarkdownHtml(value);
+  return escapeHtml(String(value ?? "")).replace(/\n/g, "<br>");
 }
 
 // ------------------------------------------------------------------- status
@@ -324,6 +526,7 @@ async function loadOverview(options = {}) {
     if (gateShown) return;
     state.overview = overview;
     setStatus(state.selection?.kind === "live" ? "live" : "online", state.selection?.kind === "live" ? "live" : "online");
+    renderWorkspaceChrome();
     renderSidebar();
     syncSelection();
   } catch (error) {
@@ -350,35 +553,49 @@ function syncSelection() {
   renderSidebar();
   hideComposer();
   el.controls.innerHTML = "";
-  el.title.textContent = "Session ended";
-  el.sub.textContent = "The terminal session was closed.";
-  el.messages.innerHTML = '<div class="empty">This live session has ended.</div>';
+  el.title.textContent = tr("Session ended");
+  el.sub.textContent = tr("The terminal session was closed.");
+  el.messages.innerHTML = `<div class="empty">${escapeHtml(tr("This live session has ended."))}</div>`;
+  renderPlanCard(null);
 }
 
 // ------------------------------------------------------------------ sidebar
 
+/** Sidebar groups for the current view: every folder, or only the open workspace. */
+function viewGroups() {
+  if (!state.overview) return null;
+  if (!state.workspace) return state.overview.groups;
+  const found = state.overview.groups.find((group) => group.key === state.workspace.key);
+  return found ? [found] : [{ key: state.workspace.key, cwd: state.workspace.path, updated_at: "", sessions: [] }];
+}
+
 function renderSidebar() {
-  const overview = state.overview;
   el.sessions.innerHTML = "";
+  const groups = viewGroups();
 
-  if (!overview || overview.groups.length === 0) {
+  if (!groups || groups.length === 0) {
     const empty = document.createElement("div");
     empty.className = "empty-side";
-    empty.textContent = "No conversations yet.";
+    empty.textContent = state.workspace ? tr("No conversations in this folder yet.") : tr("No conversations yet.");
     el.sessions.appendChild(empty);
     return;
   }
 
-  for (const group of overview.groups) {
-    el.sessions.appendChild(renderGroup(group));
+  for (const group of groups) el.sessions.appendChild(renderGroup(group, { forceOpen: Boolean(state.workspace) }));
+
+  if (state.workspace && groups[0] && groups[0].sessions.length === 0) {
+    const note = document.createElement("div");
+    note.className = "empty-side workspace-hint";
+    note.textContent = tr("Type a message below to start a conversation in this folder.");
+    el.sessions.appendChild(note);
   }
 }
 
-function renderGroup(group) {
+function renderGroup(group, options = {}) {
   const wrap = document.createElement("section");
   wrap.className = "group";
 
-  const collapsed = state.collapsed.has(group.key);
+  const collapsed = !options.forceOpen && state.collapsed.has(group.key);
   const header = document.createElement("button");
   header.className = "group-header";
   header.innerHTML =
@@ -402,11 +619,18 @@ function renderGroup(group) {
   const visible = expanded ? group.sessions : group.sessions.slice(0, MAX_VISIBLE);
   for (const session of visible) list.appendChild(renderSession(session));
 
+  if (group.sessions.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-side";
+    empty.textContent = tr("No conversations in this folder yet.");
+    list.appendChild(empty);
+  }
+
   const hiddenCount = group.sessions.length - MAX_VISIBLE;
   if (hiddenCount > 0) {
     const more = document.createElement("button");
     more.className = "more";
-    more.textContent = expanded ? "Show less" : `Show ${hiddenCount} more`;
+    more.textContent = expanded ? tr("Show less") : tr("Show {n} more", { n: hiddenCount });
     more.addEventListener("click", () => {
       if (state.expanded.has(group.key)) state.expanded.delete(group.key);
       else state.expanded.add(group.key);
@@ -432,15 +656,15 @@ function renderSession(session) {
   if (isSelected(session)) item.classList.add("selected");
   if (session.live) item.classList.add("live");
 
-  const title = session.title || "New conversation";
+  const title = session.title || tr("New conversation");
   const count = Number(session.message_count ?? 0);
   item.title = title;
   item.innerHTML =
     `<div class="session-top"><span class="session-title">${escapeHtml(title)}</span>` +
-    `${session.live ? '<span class="dot" title="Live"></span>' : ""}</div>` +
+    `${session.live ? `<span class="dot" title="${escapeHtml(tr("Live"))}"></span>` : ""}</div>` +
     `<div class="session-meta"><span class="model">${escapeHtml(session.model || "?")}</span>` +
     `<span class="time">${escapeHtml(formatTime(session.updated_at))}</span>` +
-    `<span class="count">${count} message${count === 1 ? "" : "s"}</span></div>`;
+    `<span class="count">${escapeHtml(count === 1 ? tr("{n} message", { n: count }) : tr("{n} messages", { n: count }))}</span></div>`;
 
   item.addEventListener("click", () => {
     if (session.liveKey) selectLive(session.liveKey);
@@ -475,23 +699,28 @@ async function selectLive(key) {
   closeStream();
   state.selection = { kind: "live", key };
   state.snapshot = null;
+  state.fileData = null;
+  state.agentData = null;
   state.lastSessionId = null;
   state.openTools.clear();
   state.openTurns.clear();
   state.openContext = null;
+  state.planOpen = false;
+  state.planSeen = "";
   renderSidebar();
   el.controls.innerHTML = "";
   renderApproval(null);
-  el.title.textContent = "Connecting…";
+  renderPlanCard(null);
+  el.title.textContent = tr("Connecting…");
   el.sub.textContent = "";
   setComposerMode("live");
-  resetMessagePane("Connecting…");
+  resetMessagePane(tr("Connecting…"));
   openStream(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) => {
@@ -534,16 +763,21 @@ async function selectFile(id) {
   closeStream();
   state.selection = { kind: "file", id };
   state.snapshot = null;
+  state.fileData = null;
+  state.agentData = null;
   state.openTools.clear();
   state.openTurns.clear();
   state.openContext = null;
+  state.planOpen = false;
+  state.planSeen = "";
   renderSidebar();
   el.controls.innerHTML = "";
   renderApproval(null);
+  renderPlanCard(null);
   setComposerMode("resume");
-  el.title.textContent = "Loading…";
+  el.title.textContent = tr("Loading…");
   el.sub.textContent = "";
-  resetMessagePane("Loading…");
+  resetMessagePane(tr("Loading…"));
 
   try {
     const response = await apiFetch(`/api/session/${encodeURIComponent(id)}`, { cache: "no-store" });
@@ -551,8 +785,8 @@ async function selectFile(id) {
     const data = await response.json();
     renderFile(data);
   } catch (error) {
-    el.title.textContent = "Conversation";
-    resetMessagePane(`Could not load this conversation: ${error.message}`);
+    el.title.textContent = tr("Conversation");
+    resetMessagePane(tr("Could not load this conversation: {error}", { error: error.message }));
   }
 }
 
@@ -560,11 +794,16 @@ async function selectFile(id) {
 
 function renderFile(data) {
   const messages = Array.isArray(data.messages) ? data.messages : [];
-  el.title.textContent = firstUserMessage(messages) || "Conversation";
+  state.fileData = data;
+  state.agentData = null;
+  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);
+  renderPlanCard(data);
 }
 
 /**
@@ -573,26 +812,27 @@ function renderFile(data) {
  */
 function renderFileControls(data) {
   el.controls.innerHTML = "";
+  el.controls.appendChild(planToggleButton());
 
   const badge = document.createElement("span");
   badge.className = "badge readonly";
-  badge.textContent = "Read-only";
+  badge.textContent = tr("Read-only");
   el.controls.appendChild(badge);
 
   const button = document.createElement("button");
   button.className = "control primary";
-  button.textContent = "Continue here";
-  button.title = "Resume this conversation in the browser and keep chatting";
+  button.textContent = tr("Continue here");
+  button.title = tr("Resume this conversation in the browser and keep chatting");
   button.addEventListener("click", async () => {
     button.disabled = true;
-    button.textContent = "Starting…";
+    button.textContent = tr("Starting…");
     try {
       await continueSession(data.id);
       el.input.focus();
     } catch (error) {
       button.disabled = false;
-      button.textContent = "Continue here";
-      el.sub.textContent = `Could not continue this conversation: ${error.message}`;
+      button.textContent = tr("Continue here");
+      el.sub.textContent = tr("Could not continue this conversation: {error}", { error: error.message });
     }
   });
   el.controls.appendChild(button);
@@ -600,14 +840,22 @@ function renderFileControls(data) {
     const key = await continueSession(data.id);
     await changeApprovalMode(key, mode);
   });
+
+  const remove = document.createElement("button");
+  remove.className = "control danger";
+  remove.textContent = tr("Delete");
+  remove.title = tr("Delete conversation");
+  remove.addEventListener("click", () => deleteConversation(data.id, remove));
+  el.controls.appendChild(remove);
 }
 
 /** 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}`);
@@ -616,11 +864,13 @@ async function continueSession(id, selection = preferences.selectionForFile(id))
 }
 
 function setComposerMode(mode) {
+  state.composerMode = mode;
   el.composer.classList.remove("hidden");
-  el.input.placeholder =
-    mode === "resume"
-      ? "Continue this conversation…"
-      : "Message Neutrino…";
+  el.input.placeholder = mode === "resume"
+    ? tr("Continue this conversation…")
+    : mode === "new"
+      ? tr("Message Neutrino in this folder…")
+      : tr("Message Neutrino…");
 }
 
 function hideComposer() {
@@ -630,18 +880,24 @@ function hideComposer() {
 }
 
 function renderApprovalDetails(request, fallbackCwd = "") {
+  // The approval renderer is exercised on its own in the browser tests; fall
+  // back to the English source if the translation helper is out of scope.
+  const tx = (text, values) => (typeof tr === "function"
+    ? tr(text, values)
+    : String(text).replace(/\{(\w+)\}/g, (match, name) =>
+      values && Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match));
   const details = document.createElement("div");
   details.className = "approval-details";
   const tool = document.createElement("div");
   tool.className = "approval-tool";
-  tool.textContent = request.tool || "Tool call";
+  tool.textContent = request.tool || tx("Tool call");
   details.appendChild(tool);
 
   const cwd = request.cwd || fallbackCwd;
   if (cwd) {
     const location = document.createElement("div");
     location.className = "approval-location";
-    location.textContent = `Working directory: ${cwd}`;
+    location.textContent = tx("Working directory: {path}", { path: cwd });
     details.appendChild(location);
   }
 
@@ -658,14 +914,14 @@ function renderApprovalDetails(request, fallbackCwd = "") {
   // Literal text preserves the complete command and prevents tool arguments
   // from becoming markup. Risk summaries may be shortened; arguments are not.
   code.textContent = command !== null ? command
-    : callArgs ? JSON.stringify(callArgs, null, 2) : request.summary || "Command details unavailable.";
+    : callArgs ? JSON.stringify(callArgs, null, 2) : request.summary || tx("Command details unavailable.");
   details.appendChild(code);
 
   if (stated) {
     const why = document.createElement("div");
     why.className = "approval-why";
     const label = document.createElement("strong");
-    label.textContent = "Why: ";
+    label.textContent = tx("Why: ");
     const claim = document.createElement("span");
     claim.textContent = stated;
     why.append(label, claim);
@@ -676,7 +932,7 @@ function renderApprovalDetails(request, fallbackCwd = "") {
     const argumentsBox = document.createElement("details");
     argumentsBox.className = "approval-arguments";
     const label = document.createElement("summary");
-    label.textContent = "All arguments";
+    label.textContent = tx("All arguments");
     const parameters = document.createElement("pre");
     parameters.className = "approval-code";
     parameters.textContent = JSON.stringify(callArgs, null, 2);
@@ -697,33 +953,39 @@ function renderApprovalDetails(request, fallbackCwd = "") {
   return details;
 }
 
+/**
+ * Progress text for an automated review. It belongs in the status badge, not
+ * in the approval banner: automatic review needs no answer from the user, and
+ * reusing the approval card made the browser look like it was still asking for
+ * one while the reviewers were already deciding.
+ */
+function reviewStatus(review) {
+  const tx = (text, values) => (typeof tr === "function"
+    ? tr(text, values)
+    : String(text).replace(/\{(\w+)\}/g, (match, name) =>
+      values && Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match));
+  const rounds = Number(review && review.rounds) || 1;
+  const total = Number(review && review.total) || 0;
+  if (rounds > 1) {
+    return tx("reviewing round {round}/{rounds}", { round: (review && review.round) || 1, rounds });
+  }
+  if (total === 1) return tx("reviewing · {n} reviewer", { n: total });
+  if (total > 1) return tx("reviewing · {n} reviewers", { n: total });
+  return tx("reviewing");
+}
+
 function renderApproval(snapshot) {
+  const tx = (text, values) => (typeof tr === "function"
+    ? tr(text, values)
+    : String(text).replace(/\{(\w+)\}/g, (match, name) =>
+      values && Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match));
   const pending = snapshot && snapshot.approval;
   if (!pending) {
-    // An automated review runs before a card exists, so without this the tab
-    // just looks stuck for however long the reviewers take.
-    const review = snapshot && snapshot.reviewing;
-    if (review) {
-      el.approval.className = "approval high";
-      const head = document.createElement("div");
-      head.className = "approval-head";
-      const title = document.createElement("strong");
-      title.textContent = "Independent review";
-      const note = document.createElement("span");
-      note.className = "approval-risk";
-      // Delete-class calls report which of the three separate rounds is running.
-      const rounds = review.rounds || 1;
-      const which = rounds > 1 ? `round ${review.round || 1} of ${rounds}, ` : "";
-      note.textContent = `${which}${review.total} reviewer${review.total > 1 ? "s" : ""}`;
-      head.append(title, note);
-      if (review.request) {
-        el.approval.replaceChildren(head, renderApprovalDetails(review.request, snapshot.cwd));
-      } else {
-        el.approval.replaceChildren(head);
-      }
-      return;
-    }
-    el.approval.classList.add("hidden");
+    // The banner is reserved for a call that is really waiting for a human.
+    // Automatic review progress lives in the controls badge (see renderControls),
+    // because otherwise it reads as a second approval request that then
+    // disappears by itself.
+    el.approval.className = "approval hidden";
     el.approval.replaceChildren();
     return;
   }
@@ -733,10 +995,10 @@ function renderApproval(snapshot) {
   const head = document.createElement("div");
   head.className = "approval-head";
   const title = document.createElement("strong");
-  title.textContent = "Approval required";
+  title.textContent = tx("Approval required");
   const risk = document.createElement("span");
   risk.className = "approval-risk";
-  risk.textContent = extreme ? "EXTREME RISK" : "HIGH RISK";
+  risk.textContent = extreme ? tx("EXTREME RISK") : tx("HIGH RISK");
   head.append(title, risk);
 
   const details = renderApprovalDetails(pending, snapshot.cwd);
@@ -745,11 +1007,11 @@ function renderApproval(snapshot) {
   actions.className = "approval-actions";
   const approve = document.createElement("button");
   approve.className = "approve-btn";
-  approve.textContent = "Approve";
+  approve.textContent = tx("Approve");
   approve.addEventListener("click", () => decideApproval(true));
   const deny = document.createElement("button");
   deny.className = "deny-btn";
-  deny.textContent = "Deny";
+  deny.textContent = tx("Deny");
   deny.addEventListener("click", () => decideApproval(false));
   actions.append(approve, deny);
 
@@ -765,9 +1027,12 @@ function decideApproval(approved) {
 function renderLive() {
   const snapshot = state.snapshot;
   if (!snapshot) return;
-  el.title.textContent = snapshot.title || "New conversation";
+  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, {
@@ -777,6 +1042,8 @@ function renderLive() {
     // paused turn is unfinished by the user's own choice, so it stays open too.
     active: Boolean(snapshot.busy || snapshot.paused),
   });
+  maybeOpenPlan(snapshot.plan);
+  renderPlanCard(snapshot);
 }
 
 async function changeApprovalMode(key, mode) {
@@ -794,21 +1061,25 @@ async function changeApprovalMode(key, mode) {
 }
 
 function renderApprovalModeControl(mode, change) {
+  const tx = (text, values) => (typeof tr === "function"
+    ? tr(text, values)
+    : String(text).replace(/\{(\w+)\}/g, (match, name) =>
+      values && Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match));
   const automatic = mode === "auto";
   const button = document.createElement("button");
   button.className = "control";
   button.type = "button";
   button.setAttribute("role", "switch");
-  button.setAttribute("aria-label", "Auto Approval");
+  button.setAttribute("aria-label", tx("Auto Approval"));
   button.setAttribute("aria-checked", String(automatic));
-  button.textContent = automatic ? "Auto Approval" : "Request Approval";
-  button.title = "Switch between requesting approval and automatic review";
+  button.textContent = automatic ? tx("Auto Approval") : tx("Request Approval");
+  button.title = tx("Switch between requesting approval and automatic review");
   button.addEventListener("click", async () => {
     button.disabled = true;
     try {
       await change(automatic ? "request" : "auto");
     } catch (error) {
-      el.sub.textContent = `Could not change approval mode: ${error.message}`;
+      el.sub.textContent = tx("Could not change approval mode: {error}", { error: error.message });
     } finally {
       button.disabled = false;
     }
@@ -818,6 +1089,7 @@ function renderApprovalModeControl(mode, change) {
 
 function renderControls(snapshot) {
   el.controls.innerHTML = "";
+  el.controls.appendChild(planToggleButton());
   renderApprovalModeControl(snapshot.approvalMode, mode =>
     changeApprovalMode(snapshot.key, mode));
 
@@ -826,51 +1098,66 @@ function renderControls(snapshot) {
   badge.className = `badge ${mode}`;
   // A retried request leaves the session busy but silent: name the retry so the
   // badge does not just say "working" for minutes. The same goes for a
-  // sub-agent, whose own messages never reach this transcript.
+  // sub-agent, whose own messages never reach this transcript. An automated
+  // review is reported here too, so it never needs the approval banner.
   const retrying = snapshot.retrying;
+  // A pending human decision is an approval, not a review, even if an earlier
+  // review callback is still winding down.
+  const reviewing = snapshot.approval ? null : snapshot.reviewing;
   const subagent = snapshot.subagent;
   badge.textContent = snapshot.paused
-    ? "paused"
+    ? tr("paused")
     : snapshot.busy
       ? snapshot.compressing
-        ? "compressing"
+        ? tr("compressing")
         : retrying
-          ? `retrying ${retrying.attempt}/${retrying.attempts}`
-          : subagent
-            ? `sub-agent: ${subagent}`
-            : "working"
-      : "idle";
+          ? tr("retrying {attempt}/{attempts}", { attempt: retrying.attempt, attempts: retrying.attempts })
+          : reviewing
+            ? reviewStatus(reviewing)
+            : subagent
+              ? tr("sub-agent: {label}", { label: subagent })
+              : tr("working")
+      : tr("idle");
   el.controls.appendChild(badge);
 
   if (snapshot.saveError) {
     const warning = document.createElement("span");
     warning.className = "badge paused";
-    warning.textContent = `History save failed: ${snapshot.saveError}`;
+    warning.textContent = tr("History save failed: {error}", { error: snapshot.saveError });
     el.controls.appendChild(warning);
   }
 
   if (snapshot.busy || snapshot.paused) {
     const button = document.createElement("button");
     button.className = "control";
-    button.textContent = snapshot.paused ? "Resume" : "Pause";
+    button.textContent = snapshot.paused ? tr("Resume") : tr("Pause");
     button.addEventListener("click", () => {
       postAction(snapshot.key, snapshot.paused ? "resume" : "pause");
     });
     el.controls.appendChild(button);
   }
 
+  if ((snapshot.messages?.length ?? 0) > 0 || snapshot.busy) {
+    const clear = document.createElement("button");
+    clear.className = "control danger";
+    clear.textContent = tr("Clear");
+    clear.title = tr("Clear conversation");
+    clear.addEventListener("click", () => clearConversation(snapshot.key));
+    el.controls.appendChild(clear);
+  }
+
   if (snapshot.queued) {
     const queued = document.createElement("span");
     queued.className = "queued";
     queued.title = snapshot.queued;
-    queued.textContent = "queued";
+    queued.textContent = tr("queued");
     el.controls.appendChild(queued);
   }
 
   if (snapshot.tokens && (snapshot.tokens.prompt || snapshot.tokens.completion)) {
     const tokens = document.createElement("span");
     tokens.className = "tokens";
-    tokens.textContent = `${snapshot.tokens.prompt}→${snapshot.tokens.completion} tok`;
+    tokens.textContent = tr("{prompt}→{completion} tok", { prompt: snapshot.tokens.prompt, completion: snapshot.tokens.completion });
     el.controls.appendChild(tokens);
   }
 }
@@ -885,7 +1172,8 @@ function renderMessageList(messages, streaming, options) {
   if (messages.length === 0 && !streaming) {
     const empty = document.createElement("div");
     empty.className = "empty";
-    empty.textContent = options?.readOnly ? "This conversation is empty." : "Send a message to get started.";
+    const emptyText = options?.readOnly ? "This conversation is empty." : "Send a message to get started.";
+    empty.textContent = typeof tr === "function" ? tr(emptyText) : emptyText;
     el.messages.appendChild(empty);
     return;
   }
@@ -899,7 +1187,9 @@ function renderMessageList(messages, streaming, options) {
     const details = document.createElement("details");
     details.className = "conversation-history";
     const summary = document.createElement("summary");
-    summary.textContent = `Earlier conversation · ${end} messages`;
+    summary.textContent = typeof tr === "function"
+      ? tr("Earlier conversation · {n} messages", { n: end })
+      : `Earlier conversation · ${end} messages`;
     details.appendChild(summary);
     const body = document.createElement("div");
     body.className = "history-messages";
@@ -982,13 +1272,13 @@ function renderMessage(message, index) {
   if (message.role === "summary") {
     article.classList.add("summary");
     article.innerHTML =
-      `<div class="summary-label">Context summary · ${Number(message.count ?? 0)} messages</div>` +
+      `<div class="summary-label">${escapeHtml(tr("Context summary · {n} messages", { n: Number(message.count ?? 0) }))}</div>` +
       `<div class="body">${renderMarkdown(message.content)}</div>`;
     return article;
   }
 
-  const who = message.role === "user" ? "You" : "Neutrino";
-  article.innerHTML = `<div class="who">${who}</div><div class="body">${renderMarkdown(message.content)}</div>`;
+  const who = message.role === "user" ? tr("You") : "Neutrino";
+  article.innerHTML = `<div class="who">${escapeHtml(who)}</div><div class="body">${renderMarkdown(message.content)}</div>`;
   return article;
 }
 
@@ -1000,6 +1290,12 @@ function renderMessage(message, index) {
  * transcript always holds every message.
  */
 function renderTurnFold(start, messages) {
+  // This renderer is also exercised standalone by the web tests, so it carries
+  // an English fallback for the translation helper.
+  const tx = (text, values) => (typeof tr === "function"
+    ? tr(text, values)
+    : String(text).replace(/\{(\w+)\}/g, (match, name) =>
+      values && Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match));
   // The reply is never folded away, so a turn renders as a group: the fold (the
   // prompt line plus the work it hides) and, right below it, the answer itself.
   const reply = turnAnswerIndex(messages);
@@ -1018,10 +1314,10 @@ function renderTurnFold(start, messages) {
     '<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="m9 18 6-6-6-6"/></svg>';
   const you = document.createElement("span");
   you.className = "turn-you";
-  you.textContent = `You: ${truncate(turnPreview(messages, "user"), 110)}`;
+  you.textContent = tx("You: {text}", { text: truncate(turnPreview(messages, "user"), 110) });
   const meta = document.createElement("span");
   meta.className = "turn-meta";
-  meta.textContent = `${hidden} of ${messages.length} message${messages.length === 1 ? "" : "s"} folded`;
+  meta.textContent = tx("{n} of {m} messages folded", { n: hidden, m: messages.length });
   // The hint cannot live in the static text: it says the opposite once open.
   const hint = document.createElement("span");
   hint.className = "turn-hint";
@@ -1033,7 +1329,7 @@ function renderTurnFold(start, messages) {
   group.appendChild(details);
 
   const syncHint = () => {
-    hint.textContent = details.open ? " — click to collapse" : " — click to expand";
+    hint.textContent = details.open ? tx(" — click to collapse") : tx(" — click to expand");
   };
   syncHint();
 
@@ -1102,6 +1398,10 @@ async function sendMessage() {
   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 = "";
@@ -1110,6 +1410,24 @@ async function sendMessage() {
     return;
   }
 
+  if (selection.kind === "new") {
+    // A workspace landing page: typing starts a fresh conversation there, just
+    // like typing on the terminal's start screen.
+    el.input.value = "";
+    autosize();
+    try {
+      const created = await createConversation(selection.cwd, preferences.defaultSelection?.());
+      await selectLive(created.key);
+      setConversationView(true);
+      await postAction(created.key, "message", { text });
+    } catch (error) {
+      el.input.value = text;
+      autosize();
+      el.sub.textContent = tr("Could not start the conversation: {error}", { error: error.message });
+    }
+    return;
+  }
+
   // Reading a saved transcript: resume it in the browser, then deliver the text.
   el.input.value = "";
   autosize();
@@ -1119,7 +1437,7 @@ async function sendMessage() {
   } catch (error) {
     el.input.value = text;
     autosize();
-    el.sub.textContent = `Could not continue this conversation: ${error.message}`;
+    el.sub.textContent = tr("Could not continue this conversation: {error}", { error: error.message });
   }
 }
 
@@ -1128,6 +1446,1061 @@ function autosize() {
   el.input.style.height = `${Math.min(el.input.scrollHeight, 220)}px`;
 }
 
+// ------------------------------------------------------- workspaces & dialogs
+
+function renderWorkspaceChrome() {
+  if (!el.workspaceLabel) return;
+  const workspace = state.workspace;
+  el.workspaceLabel.textContent = workspace ? workspaceName(workspace.path) : tr("All directories");
+  if (el.workspaceButton) {
+    el.workspaceButton.title = workspace ? workspace.path : tr("Working directory");
+    el.workspaceButton.classList.toggle("active", Boolean(workspace));
+  }
+}
+
+function joinPath(parent, name) {
+  const separator = String(parent ?? "").includes("\\") ? "\\" : "/";
+  return `${String(parent ?? "").replace(/[\\/]+$/, "")}${separator}${name}`;
+}
+
+function selectionCwd() {
+  const selection = state.selection;
+  if (!selection) return "";
+  if (selection.kind === "live") return state.snapshot?.cwd || "";
+  if (selection.kind === "file") return state.fileData?.cwd || "";
+  if (selection.kind === "new") return selection.cwd || "";
+  if (selection.kind === "agent") return state.agentData?.cwd || state.workspace?.path || "";
+  return "";
+}
+
+function confirmAction(message) {
+  try {
+    return typeof window === "undefined" || typeof window.confirm !== "function" ? true : window.confirm(message);
+  } catch {
+    return true;
+  }
+}
+
+function apiError(data, fallback) {
+  return tr(data && typeof data.error === "string" ? data.error : fallback);
+}
+
+function renderHomeEmpty() {
+  el.messages.innerHTML = "";
+  const empty = document.createElement("div");
+  empty.className = "empty";
+  empty.innerHTML =
+    '<span class="empty-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>" +
+    `<strong>${escapeHtml(tr("No conversation open"))}</strong>` +
+    `<span>${escapeHtml(tr("Choose a conversation from the sidebar to view it."))}</span>`;
+  const button = document.createElement("button");
+  button.className = "control primary";
+  button.type = "button";
+  button.textContent = tr("New conversation");
+  button.addEventListener("click", () => openNewChatDialog());
+  empty.appendChild(button);
+  el.messages.appendChild(empty);
+}
+
+/** Back to the neutral landing view, with no conversation selected. */
+function showHome({ menu = true } = {}) {
+  closeStream();
+  state.selection = null;
+  state.snapshot = null;
+  state.fileData = null;
+  state.agentData = null;
+  state.planOpen = false;
+  state.planSeen = "";
+  preferences.clear();
+  renderSidebar();
+  renderWorkspaceChrome();
+  el.controls.innerHTML = "";
+  renderApproval(null);
+  renderPlanCard(null);
+  hideComposer();
+  el.title.textContent = tr("Select a conversation");
+  el.sub.textContent = "";
+  renderHomeEmpty();
+  if (menu) setConversationView(false);
+}
+
+/** Show a folder as an empty workspace ready for its first message. */
+function renderWorkspaceLanding(path) {
+  state.selection = { kind: "new", cwd: path };
+  state.snapshot = null;
+  state.fileData = null;
+  state.planOpen = false;
+  state.planSeen = "";
+  closeStream();
+  preferences.clear();
+  renderSidebar();
+  renderWorkspaceChrome();
+  el.controls.innerHTML = "";
+  renderApproval(null);
+  renderPlanCard(null);
+  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");
+  empty.className = "empty workspace-empty";
+  empty.innerHTML =
+    '<span class="empty-mark" aria-hidden="true">' +
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2.5h7.5A2.5 2.5 0 0 1 21 10v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17z" />' +
+    "</svg></span>" +
+    `<strong>${escapeHtml(workspaceName(path) || path)}</strong>` +
+    `<span class="workspace-path">${escapeHtml(path)}</span>` +
+    `<p class="workspace-prompt">${escapeHtml(tr("Type a message below to start a conversation in this folder."))}</p>`;
+  const button = document.createElement("button");
+  button.className = "control primary";
+  button.type = "button";
+  button.textContent = tr("New conversation");
+  button.addEventListener("click", () => openNewChatDialog({ cwd: path }));
+  empty.appendChild(button);
+  el.messages.appendChild(empty);
+}
+
+/** Open a working directory and make it the active sidebar scope. */
+async function openWorkspace(path, { record = true } = {}) {
+  const target = String(path ?? "").trim();
+  if (!target) return;
+  setWorkspace({ path: target });
+  renderWorkspaceLanding(target);
+  setConversationView(true);
+  if (record) {
+    try {
+      const response = await apiFetch("/api/workspaces", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: target }),
+      });
+      const data = await response.json().catch(() => ({}));
+      if (response.ok && Array.isArray(data.workspaces)) {
+        state.workspaces = { ...(state.workspaces ?? {}), workspaces: data.workspaces };
+      }
+    } catch {
+      // Opening the folder still works when remembering it does not.
+    }
+  }
+  await loadOverview({ silent: true });
+}
+
+function renderWorkspaceList() {
+  if (!el.workspaceList) return;
+  el.workspaceList.innerHTML = "";
+  const folders = state.workspaces?.workspaces ?? [];
+  if (!folders.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty-side";
+    empty.textContent = tr("No recent folders.");
+    el.workspaceList.appendChild(empty);
+    return;
+  }
+  for (const folder of folders) {
+    const item = document.createElement("button");
+    item.className = "workspace-item";
+    item.type = "button";
+    item.title = folder.path;
+    if (state.workspace && pathKey(state.workspace.path) === pathKey(folder.path)) {
+      item.classList.add("selected");
+    }
+    if (!folder.exists) item.classList.add("missing");
+    const count = Number(folder.sessions ?? 0);
+    item.innerHTML =
+      '<span class="workspace-icon" aria-hidden="true">' +
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2.5h7.5A2.5 2.5 0 0 1 21 10v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17z" /></svg>' +
+      "</span>" +
+      `<span class="workspace-info"><strong>${escapeHtml(folder.name || workspaceName(folder.path))}</strong>` +
+      `<small>${escapeHtml(shortenPath(folder.path, 3))}</small></span>` +
+      `<span class="workspace-count">${escapeHtml(tr("{n} conversations", { n: count }))}</span>`;
+    item.addEventListener("click", async () => {
+      if (!folder.exists) {
+        el.workspaceFeedback.textContent = tr("This folder no longer exists.");
+        return;
+      }
+      el.workspaceDialog.close();
+      await openWorkspace(folder.path, { record: false });
+    });
+    el.workspaceList.appendChild(item);
+  }
+}
+
+async function openWorkspaceDialog() {
+  el.workspaceFeedback.textContent = "";
+  if (!el.workspaceDialog.open) el.workspaceDialog.showModal();
+  renderWorkspaceList();
+  try {
+    const response = await apiFetch("/api/workspaces", { cache: "no-store" });
+    const data = await response.json();
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    state.workspaces = data;
+    renderWorkspaceList();
+  } catch (error) {
+    el.workspaceFeedback.textContent = tr("Could not open this folder: {error}", { error: error.message });
+  }
+}
+
+function renderNewChatRecents() {
+  if (!el.newChatRecents) return;
+  el.newChatRecents.innerHTML = "";
+  const folders = (state.workspaces?.workspaces ?? []).filter((folder) => folder.exists !== false).slice(0, 8);
+  if (!folders.length) {
+    const empty = document.createElement("span");
+    empty.className = "recents-empty";
+    empty.textContent = tr("No recent folders.");
+    el.newChatRecents.appendChild(empty);
+    return;
+  }
+  for (const folder of folders) {
+    const chip = document.createElement("button");
+    chip.className = "path-chip";
+    chip.type = "button";
+    chip.title = folder.path;
+    chip.textContent = workspaceName(folder.path) || folder.path;
+    if (el.newChatCwd.value.trim() && pathKey(el.newChatCwd.value) === pathKey(folder.path)) {
+      chip.classList.add("selected");
+    }
+    chip.addEventListener("click", () => {
+      el.newChatCwd.value = folder.path;
+      renderNewChatRecents();
+    });
+    el.newChatRecents.appendChild(chip);
+  }
+}
+
+function fillSelect(select, entries, selected) {
+  select.replaceChildren();
+  for (const entry of entries) {
+    const option = document.createElement("option");
+    option.value = entry.value;
+    option.textContent = entry.label;
+    select.appendChild(option);
+  }
+  select.value = entries.some((entry) => entry.value === selected) ? selected : entries[0]?.value ?? "";
+}
+
+function fillNewChatModels(catalog, selectedModel) {
+  const provider = catalog.providers.find((entry) => entry.name === el.newChatProvider.value) ?? catalog.providers[0];
+  const models = provider?.models ?? [];
+  fillSelect(el.newChatModel, models.map((model) => ({
+    value: model.name,
+    label: model.name + (model.configured ? "" : ` ${tr("(API key missing)")}`),
+  })), 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);
+  if (model && !model.configured) {
+    el.newChatNote.textContent = tr("This model has no API key configured. Add one in the terminal model screen, or choose another model.");
+  } else {
+    el.newChatNote.textContent = "";
+  }
+}
+
+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;
+  const catalog = preferences.catalog?.();
+  if (!catalog) return;
+  const provider = el.newChatProvider.value;
+  const model = el.newChatModel.value;
+  const intensity = el.newChatIntensity.value;
+  const approval = el.newChatApproval.value;
+  fillSelect(el.newChatProvider, catalog.providers.map((entry) => ({ value: entry.name, label: entry.name })), provider);
+  fillNewChatModels(catalog, model);
+  fillNewChatIntensities(catalog, intensity);
+  el.newChatApproval.value = approval;
+  updateNewChatNote(catalog);
+  renderProNewChatPresets(catalog, document.getElementById("new-chat-pro-preset")?.value);
+  renderNewChatRecents();
+}
+
+async function openNewChatDialog(options = {}) {
+  el.newChatFeedback.textContent = "";
+  if (!el.newChatDialog.open) el.newChatDialog.showModal();
+  let catalog;
+  try {
+    catalog = await preferences.load();
+    const response = await apiFetch("/api/workspaces", { cache: "no-store" });
+    if (response.ok) state.workspaces = await response.json();
+  } catch (error) {
+    el.newChatFeedback.textContent = tr(error.message);
+  }
+  if (!catalog) return;
+
+  const defaults = catalog.selection;
+  fillSelect(el.newChatProvider, catalog.providers.map((provider) => ({ value: provider.name, label: provider.name })), defaults.provider);
+  fillNewChatModels(catalog, defaults.model);
+  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();
+}
+
+async function submitNewChat() {
+  if (el.newChatStart.disabled) return;
+  const cwd = el.newChatCwd.value.trim();
+  if (!cwd) {
+    el.newChatFeedback.textContent = tr("working directory is required");
+    el.newChatCwd.focus();
+    return;
+  }
+  const selection = {
+    provider: el.newChatProvider.value,
+    model: el.newChatModel.value,
+    intensity: el.newChatIntensity.value,
+  };
+  el.newChatStart.disabled = true;
+  el.newChatStart.textContent = tr("Creating…");
+  el.newChatFeedback.textContent = "";
+  try {
+    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);
+    el.input.focus();
+  } catch (error) {
+    el.newChatFeedback.textContent = tr("Could not start the conversation: {error}", { error: error.message });
+  } finally {
+    el.newChatStart.disabled = false;
+    el.newChatStart.textContent = tr("Start conversation");
+  }
+}
+
+/** Create a browser-owned conversation in `cwd` and reveal its folder. */
+async function createConversation(cwd, selection, approvalMode, proPreset = currentProPreset()) {
+  const payload = { cwd };
+  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",
+    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}`));
+  setWorkspace({ path: data.cwd || cwd });
+  await loadOverview({ silent: true });
+  return data;
+}
+
+// ------------------------------------------------------------- folder picker
+
+function renderFolder() {
+  if (!el.folderList) return;
+  const folder = state.folder;
+  el.folderPath.value = folder.path || "";
+  el.folderUp.disabled = !folder.parent;
+  el.folderUse.disabled = !folder.path || folder.loading;
+
+  el.folderRoots.innerHTML = "";
+  for (const root of folder.roots ?? []) {
+    const button = document.createElement("button");
+    button.className = "root-chip";
+    button.type = "button";
+    button.textContent = root;
+    button.addEventListener("click", () => loadFolder(root));
+    el.folderRoots.appendChild(button);
+  }
+
+  el.folderList.innerHTML = "";
+  const entries = folder.entries ?? [];
+  if (!entries.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty-side";
+    empty.textContent = folder.loading ? tr("Loading folders…") : tr("No subfolders.");
+    el.folderList.appendChild(empty);
+    return;
+  }
+  for (const entry of entries) {
+    const item = document.createElement("button");
+    item.className = "folder-item";
+    item.type = "button";
+    item.title = entry.path;
+    item.innerHTML =
+      '<span class="folder-item-icon" aria-hidden="true">' +
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2.5h7.5A2.5 2.5 0 0 1 21 10v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17z" /></svg>' +
+      `</span><span>${escapeHtml(entry.name)}</span>`;
+    item.addEventListener("click", () => loadFolder(entry.path));
+    if (typeof item.addEventListener === "function") {
+      item.addEventListener("dblclick", () => useCurrentFolder());
+    }
+    el.folderList.appendChild(item);
+  }
+}
+
+let folderLoadSeq = 0;
+
+async function loadFolder(path) {
+  const folder = state.folder;
+  const request = ++folderLoadSeq;
+  folder.loading = true;
+  el.folderFeedback.textContent = tr("Loading folders…");
+  el.folderUse.disabled = true;
+  try {
+    const query = path ? `?path=${encodeURIComponent(path)}` : "";
+    const response = await apiFetch(`/api/fs${query}`, { cache: "no-store" });
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    // A slower, older answer must not replace the folder the user is on now.
+    if (request !== folderLoadSeq) return;
+    state.folder = {
+      ...folder,
+      loading: false,
+      path: data.path,
+      parent: data.parent,
+      roots: data.roots ?? [],
+      entries: data.entries ?? [],
+    };
+    el.folderFeedback.textContent = "";
+    renderFolder();
+    if (typeof el.folderPath.focus === "function") el.folderPath.focus();
+  } catch (error) {
+    if (request !== folderLoadSeq) return;
+    folder.loading = false;
+    el.folderFeedback.textContent = tr("Could not open this folder: {error}", { error: error.message });
+    el.folderUse.disabled = !state.folder.path;
+  }
+}
+
+function openFolderDialog({ start = "", onPick = null } = {}) {
+  state.folder = {
+    path: "",
+    parent: null,
+    roots: [],
+    entries: [],
+    loading: false,
+    onPick,
+  };
+  el.folderNew.classList.add("hidden");
+  el.folderNewName.value = "";
+  el.folderFeedback.textContent = "";
+  if (!el.folderDialog.open) el.folderDialog.showModal();
+  renderFolder();
+  const from = String(start || state.workspace?.path || state.workspaces?.cwd || "").trim();
+  void loadFolder(from);
+}
+
+function useCurrentFolder() {
+  const path = state.folder.path;
+  if (!path) return;
+  const onPick = state.folder.onPick;
+  el.folderDialog.close();
+  if (typeof onPick === "function") onPick(path);
+}
+
+async function createFolderFromDialog() {
+  const name = el.folderNewName.value.trim();
+  if (!name) {
+    el.folderFeedback.textContent = tr("Enter a folder name.");
+    el.folderNewName.focus();
+    return;
+  }
+  if (/[\\/]/.test(name)) {
+    el.folderFeedback.textContent = tr("folder name cannot contain a path separator");
+    return;
+  }
+  const target = joinPath(state.folder.path, name);
+  el.folderNewCreate.disabled = true;
+  try {
+    const response = await apiFetch("/api/fs/mkdir", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: target }),
+    });
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    el.folderNew.classList.add("hidden");
+    el.folderNewName.value = "";
+    await loadFolder(data.path || target);
+    el.folderFeedback.textContent = tr("Folder created.");
+  } catch (error) {
+    el.folderFeedback.textContent = apiError({ error: error.message }, error.message);
+  } finally {
+    el.folderNewCreate.disabled = false;
+  }
+}
+
+// -------------------------------------------------------------- plan / usage
+
+function planSignature(plan) {
+  if (!plan || !Array.isArray(plan.steps) || plan.steps.length === 0) return "";
+  return `${plan.goal ?? ""}|${plan.steps.map((step) => step.title ?? "").join("|")}`;
+}
+
+function maybeOpenPlan(plan) {
+  const signature = planSignature(plan);
+  if (signature && signature !== state.planSeen) {
+    state.planSeen = signature;
+    state.planOpen = true;
+  }
+}
+
+function planToggleButton() {
+  const button = document.createElement("button");
+  button.className = "icon-btn plan-toggle";
+  button.type = "button";
+  button.setAttribute("aria-expanded", String(state.planOpen));
+  button.title = state.planOpen ? tr("Hide plan") : tr("Show plan");
+  button.setAttribute("aria-label", button.title);
+  button.innerHTML =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8h.01" /></svg>';
+  button.addEventListener("click", () => {
+    state.planOpen = !state.planOpen;
+    button.classList.toggle("active", state.planOpen);
+    button.setAttribute("aria-expanded", String(state.planOpen));
+    button.title = state.planOpen ? tr("Hide plan") : tr("Show plan");
+    renderPlanCard(state.snapshot ?? state.fileData ?? null);
+  });
+  button.classList.toggle("active", state.planOpen);
+  return button;
+}
+
+function planStatusLabel(status) {
+  if (status === "done") return tr("Done");
+  if (status === "active") return tr("Active");
+  if (status === "failed") return tr("Failed");
+  return tr("Pending");
+}
+
+function renderPlanCard(source) {
+  if (!el.planCard) return;
+  const plan = source && source.plan && Array.isArray(source.plan.steps) && source.plan.steps.length ? source.plan : null;
+  const tokens = source && source.tokens ? source.tokens : null;
+  const hasUsage = tokens && (Number(tokens.prompt) > 0 || Number(tokens.completion) > 0);
+  if (!state.planOpen || (!plan && !hasUsage)) {
+    el.planCard.classList.add("hidden");
+    el.planCard.replaceChildren();
+    return;
+  }
+
+  const card = document.createElement("div");
+  card.className = "plan-card-inner";
+  const head = document.createElement("div");
+  head.className = "plan-card-head";
+  const title = document.createElement("strong");
+  title.textContent = plan ? tr("Plan") : tr("Usage");
+  const close = document.createElement("button");
+  close.className = "icon-btn";
+  close.type = "button";
+  close.setAttribute("aria-label", tr("Close"));
+  close.innerHTML =
+    '<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>';
+  close.addEventListener("click", () => {
+    state.planOpen = false;
+    renderPlanCard(source);
+  });
+  head.append(title, close);
+  card.appendChild(head);
+
+  if (plan) {
+    if (plan.goal) {
+      const goal = document.createElement("div");
+      goal.className = "plan-goal";
+      goal.textContent = plan.goal;
+      card.appendChild(goal);
+    }
+    const steps = document.createElement("div");
+    steps.className = "plan-steps";
+    let done = 0;
+    for (const step of plan.steps) {
+      const status = ["done", "active", "failed", "pending"].includes(step.status) ? step.status : "pending";
+      if (status === "done") done += 1;
+      const row = document.createElement("div");
+      row.className = `plan-step ${status}`;
+      const node = document.createElement("span");
+      node.className = "plan-node";
+      node.setAttribute("aria-hidden", "true");
+      const body = document.createElement("div");
+      body.className = "plan-step-body";
+      const stepTitle = document.createElement("strong");
+      stepTitle.textContent = step.title || "";
+      const stateLabel = document.createElement("span");
+      stateLabel.className = "plan-step-state";
+      stateLabel.textContent = planStatusLabel(status);
+      const titleRow = document.createElement("div");
+      titleRow.className = "plan-step-title";
+      titleRow.append(stepTitle, stateLabel);
+      body.appendChild(titleRow);
+      if (step.detail) {
+        const detail = document.createElement("div");
+        detail.className = "plan-step-detail";
+        detail.textContent = step.detail;
+        body.appendChild(detail);
+      }
+      row.append(node, body);
+      steps.appendChild(row);
+    }
+    card.appendChild(steps);
+    const meta = document.createElement("div");
+    meta.className = "plan-meta";
+    const stopped = plan.stopped ? ` · ${tr("Stopped")}` : "";
+    meta.textContent = tr("{done} of {total} steps done", { done, total: plan.steps.length }) + stopped;
+    card.appendChild(meta);
+  }
+
+  if (hasUsage) {
+    const usage = document.createElement("div");
+    usage.className = "plan-usage";
+    const rows = [
+      [tr("Prompt"), Number(tokens.prompt)],
+      [tr("Completion"), Number(tokens.completion)],
+      [tr("Total"), Number(tokens.prompt) + Number(tokens.completion)],
+    ];
+    for (const [label, value] of rows) {
+      const row = document.createElement("div");
+      row.className = "plan-usage-row";
+      const name = document.createElement("span");
+      name.textContent = label;
+      const count = document.createElement("strong");
+      count.textContent = value.toLocaleString(localeTag());
+      row.append(name, count);
+      usage.appendChild(row);
+    }
+    card.appendChild(usage);
+  }
+
+  el.planCard.replaceChildren(card);
+  el.planCard.classList.remove("hidden");
+}
+
+// ------------------------------------------------------------------- actions
+
+async function clearConversation(key) {
+  try {
+    const response = await apiFetch(`/api/live/${encodeURIComponent(key)}/clear`, { method: "POST" });
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    if (state.selection?.kind === "live" && state.selection.key === key) {
+      state.snapshot = data.snapshot ?? state.snapshot;
+      // The cleared conversation has no transcript file until its next message.
+      state.lastSessionId = null;
+      state.planOpen = false;
+      state.planSeen = "";
+      if (state.snapshot) renderLive();
+      if (state.snapshot) renderPlanCard(null);
+      el.sub.textContent = tr("Conversation cleared.");
+    }
+  } catch (error) {
+    el.sub.textContent = tr("Could not clear this conversation: {error}", { error: error.message });
+  }
+}
+
+async function deleteConversation(id, button) {
+  if (!confirmAction(tr("Delete this conversation? Its saved history will be removed."))) return;
+  if (button) button.disabled = true;
+  try {
+    const response = await apiFetch(`/api/session/${encodeURIComponent(id)}/delete`, { method: "POST" });
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    showHome();
+    await loadOverview();
+  } catch (error) {
+    if (button) button.disabled = false;
+    el.sub.textContent = tr("Could not delete this conversation: {error}", { error: error.message });
+  }
+}
+
+// -------------------------------------------------------------- other agents
+
+const OTHER_AGENTS = [
+  { id: "claude", label: "Claude Code" },
+  { id: "codex", label: "Codex" },
+  { id: "opencode", label: "OpenCode" },
+];
+
+function agentLabel(agent) {
+  return OTHER_AGENTS.find((entry) => entry.id === agent)?.label ?? agent;
+}
+
+/** Working directory the other-agent lists are scoped to. */
+async function agentsScopeCwd() {
+  if (!state.workspaces) {
+    try {
+      const response = await apiFetch("/api/workspaces", { cache: "no-store" });
+      if (response.ok) state.workspaces = await response.json();
+    } catch {
+      // The dialog can still show a readable error below.
+    }
+  }
+  return state.workspace?.path || selectionCwd() || state.agentData?.cwd || state.workspaces?.cwd || "";
+}
+
+function renderAgentList(groups) {
+  el.agentsList.innerHTML = "";
+  const total = groups.reduce((count, group) => count + group.sessions.length, 0);
+  if (total === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-side";
+    empty.textContent = tr("No saved sessions from other agents in this folder.");
+    el.agentsList.appendChild(empty);
+    return;
+  }
+  for (const group of groups) {
+    if (!group.sessions.length) continue;
+    const section = document.createElement("section");
+    section.className = "agent-section";
+    const title = document.createElement("h3");
+    title.textContent = group.label;
+    section.appendChild(title);
+    for (const session of group.sessions) {
+      const item = document.createElement("button");
+      item.className = "agent-session";
+      item.type = "button";
+      item.title = session.title || session.id;
+      item.innerHTML =
+        '<span class="agent-session-body">' +
+        `<span class="agent-session-title">${escapeHtml(session.title || tr("Conversation"))}</span>` +
+        `<span class="agent-session-meta">${escapeHtml([session.model, formatTime(session.updated_at)].filter(Boolean).join(" · "))}</span>` +
+        "</span>";
+      item.addEventListener("click", () => {
+        el.agentsDialog.close();
+        void selectAgentSession(group.id, session.id, session.title || "");
+      });
+      section.appendChild(item);
+    }
+    el.agentsList.appendChild(section);
+  }
+}
+
+async function openAgentsDialog() {
+  el.agentsFeedback.textContent = tr("Loading…");
+  el.agentsList.innerHTML = "";
+  if (!el.agentsDialog.open) el.agentsDialog.showModal();
+  const cwd = await agentsScopeCwd();
+  el.agentsCwd.textContent = cwd;
+  try {
+    const groups = await Promise.all(OTHER_AGENTS.map(async (agent) => {
+      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 : [] };
+    }));
+    el.agentsFeedback.textContent = "";
+    renderAgentList(groups);
+  } catch (error) {
+    el.agentsFeedback.textContent = tr("Could not load other agents' history: {error}", { error: error.message });
+  }
+}
+
+function renderAgentView(data) {
+  const messages = Array.isArray(data.messages) ? data.messages : [];
+  const label = agentLabel(state.selection?.agent ?? data.agent ?? "");
+  el.title.textContent = state.selection?.title || firstUserMessage(messages) || tr("Conversation");
+  el.sub.textContent = [label, data.cwd || state.agentData?.cwd].filter(Boolean).join(" · ");
+  renderMessageList(messages, null, { readOnly: true, active: false });
+  el.controls.innerHTML = "";
+  const badge = document.createElement("span");
+  badge.className = "badge readonly";
+  badge.textContent = tr("Read-only");
+  el.controls.appendChild(badge);
+  const source = document.createElement("span");
+  source.className = "badge readonly";
+  source.textContent = label;
+  el.controls.appendChild(source);
+  renderApproval(null);
+  renderPlanCard(null);
+  hideComposer();
+}
+
+async function selectAgentSession(agent, id, title) {
+  closeStream();
+  state.selection = { kind: "agent", agent, id, title };
+  state.snapshot = null;
+  state.fileData = null;
+  state.agentData = null;
+  state.planOpen = false;
+  state.planSeen = "";
+  preferences.clear();
+  renderSidebar();
+  el.controls.innerHTML = "";
+  renderApproval(null);
+  renderPlanCard(null);
+  hideComposer();
+  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 data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(apiError(data, `HTTP ${response.status}`));
+    state.agentData = { ...data, agent, cwd: state.agentData?.cwd || state.workspace?.path || "" };
+    renderAgentView(state.agentData);
+  } catch (error) {
+    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 }));
+  }
+}
+
+// ------------------------------------------------------------------ language
+
+function syncLanguageSelects(language) {
+  if (el.languageSelect) el.languageSelect.value = language;
+  const settingsLanguage = document.getElementById("settings-language");
+  if (settingsLanguage) settingsLanguage.value = language;
+}
+
+async function changeInterfaceLanguage(language, { persist = true } = {}) {
+  const normalized = String(language ?? "").toLowerCase().startsWith("zh") ? "zh" : "en";
+  setUiLanguage(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();
+  const kind = state.selection?.kind;
+  if (kind === "live" && state.snapshot) renderLive();
+  else if (kind === "file" && state.fileData) renderFile(state.fileData);
+  else if (kind === "agent" && state.agentData) renderAgentView(state.agentData);
+  else if (kind === "new" && state.selection.cwd) renderWorkspaceLanding(state.selection.cwd);
+  else if (!state.selection) renderHomeEmpty();
+  if (kind === "live") setComposerMode("live");
+  else if (kind === "file") setComposerMode("resume");
+  else if (kind === "new") setComposerMode("new");
+  else if (!state.selection) hideComposer();
+  if (persist) {
+    try {
+      await apiFetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ settings: { language: normalized } }),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+function initializeLanguage() {
+  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());
@@ -1141,8 +2514,110 @@ el.input.addEventListener("keydown", (event) => {
   }
 });
 
+el.newChat.addEventListener("click", () => openNewChatDialog());
+if (el.emptyNewChat) el.emptyNewChat.addEventListener("click", () => openNewChatDialog());
+el.workspaceButton.addEventListener("click", openWorkspaceDialog);
+el.workspaceClose.addEventListener("click", () => el.workspaceDialog.close());
+el.workspaceAll.addEventListener("click", () => {
+  el.workspaceDialog.close();
+  setWorkspace(null);
+  showHome();
+});
+el.workspaceAdd.addEventListener("click", () => {
+  el.workspaceDialog.close();
+  openFolderDialog({ start: state.workspace?.path || state.workspaces?.cwd || "", onPick: (path) => openWorkspace(path) });
+});
+el.agentsOpen.addEventListener("click", () => openAgentsDialog());
+el.agentsClose.addEventListener("click", () => el.agentsDialog.close());
+el.agentsDialog.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  el.agentsDialog.close();
+});
+el.languageSelect?.addEventListener("change", () => changeInterfaceLanguage(el.languageSelect.value));
+
+el.newChatClose.addEventListener("click", () => el.newChatDialog.close());
+el.newChatCancel.addEventListener("click", () => el.newChatDialog.close());
+el.newChatDialog.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  el.newChatDialog.close();
+});
+el.newChatForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  submitNewChat();
+});
+el.newChatBrowse.addEventListener("click", () => {
+  openFolderDialog({
+    start: el.newChatCwd.value.trim() || state.workspace?.path || "",
+    onPick: (path) => {
+      el.newChatCwd.value = path;
+      renderNewChatRecents();
+    },
+  });
+});
+el.newChatCwd.addEventListener("input", renderNewChatRecents);
+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) {
+    fillNewChatIntensities(catalog, el.newChatIntensity.value);
+    updateNewChatNote(catalog);
+  }
+});
+
+el.folderClose.addEventListener("click", () => el.folderDialog.close());
+el.folderCancel.addEventListener("click", () => el.folderDialog.close());
+el.folderUse.addEventListener("click", useCurrentFolder);
+el.folderUp.addEventListener("click", () => {
+  if (state.folder.parent) void loadFolder(state.folder.parent);
+});
+el.folderGo.addEventListener("click", () => void loadFolder(el.folderPath.value.trim()));
+el.folderPath.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    void loadFolder(el.folderPath.value.trim());
+  }
+});
+el.folderMkdir.addEventListener("click", () => {
+  el.folderNew.classList.remove("hidden");
+  el.folderFeedback.textContent = "";
+  el.folderNewName.value = "";
+  el.folderNewName.focus();
+});
+el.folderNewCreate.addEventListener("click", () => void createFolderFromDialog());
+el.folderNewCancel.addEventListener("click", () => el.folderNew.classList.add("hidden"));
+el.folderNewName.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    void createFolderFromDialog();
+  }
+  if (event.key === "Escape") el.folderNew.classList.add("hidden");
+});
+el.folderDialog.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  el.folderDialog.close();
+});
+
 window.addEventListener("beforeunload", closeStream);
 
-preferences.load().catch(error => console.error(error));
-loadOverview();
+initializeLanguage();
+initializeProWorkspace();
+preferences.load()
+  .then((config) => {
+    const language = config?.settings?.language;
+    if (language && language !== uiLanguage()) return changeInterfaceLanguage(language, { persist: false });
+    return undefined;
+  })
+  .catch(error => console.error(error));
+loadOverview().then(() => {
+  // Reopen the folder the user had open last time, without stealing a click
+  // that landed on a saved conversation while the overview was loading.
+  if (state.workspace && !state.selection) renderWorkspaceLanding(state.workspace.path);
+});
 setInterval(() => loadOverview({ silent: true }), REFRESH_MS);