@xingjisoft/neutrino 0.3.0 → 0.4.1

package/web/index.html

@@ -5,6 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="color-scheme" content="dark" />
     <meta name="theme-color" content="#151517" />
+    <script>
+      // Switching to the Pro workspace navigates only once the #151515 curtain
+      // is opaque. Cover the page here, before the first paint, so a slow
+      // module load cannot flash the freshly loaded /pro page before app.js
+      // takes the curtain over. app.js removes the class; the timer is a
+      // safety net for when the module cannot run at all.
+      try {
+        var proPath = location.pathname === "/pro" || location.pathname.startsWith("/pro/");
+        var proStart = Number(sessionStorage.getItem("neutrino.pro.transition")) || 0;
+        if (proPath && proStart && Date.now() - proStart < 8000) {
+          document.documentElement.classList.add("pro-transitioning");
+          setTimeout(function () {
+            document.documentElement.classList.remove("pro-transitioning");
+          }, 8000);
+        }
+      } catch (error) { /* Storage may be blocked; the page still works. */ }
+    </script>
     <title>Neutrino</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9fafb' stroke-width='1.7'%3E%3Cellipse cx='12' cy='12' rx='9.4' ry='3.8' transform='rotate(-30 12 12)'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E" />
     <link rel="stylesheet" href="style.css" />
@@ -13,14 +30,14 @@
     <div id="app">
       <aside id="sidebar">
         <header class="brand">
-          <div class="logo" aria-hidden="true">
+          <button id="brand-logo" class="logo brand-logo" type="button" title="Switch to Pro mode" aria-label="Switch to Pro mode" data-i18n-title="Switch to Pro mode" data-i18n-aria-label="Switch to Pro mode">
             <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>
-          </div>
+          </button>
           <div class="brand-text">
-            <strong>Neutrino</strong>
+            <strong id="brand-name">Neutrino</strong>
             <span id="status" class="status">connecting…</span>
           </div>
           <div class="brand-actions">
@@ -32,6 +49,12 @@
             </button>
           </div>
         </header>
+        <div id="pro-tip" class="pro-tip hidden" role="note">
+          <span data-i18n="Click the badge to switch to Pro mode">Click the badge to switch to Pro mode</span>
+          <button id="pro-tip-close" class="pro-tip-close" type="button" title="Dismiss" aria-label="Dismiss" data-i18n-title="Dismiss" data-i18n-aria-label="Dismiss">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+          </button>
+        </div>
 
         <div class="sidebar-tools">
           <button id="new-chat" class="new-chat" type="button" title="New conversation" data-i18n-title="New conversation">
@@ -73,6 +96,10 @@
             <div id="session-sub" class="sub"></div>
           </div>
           <div id="controls" class="controls"></div>
+          <button id="pro-exit" class="control pro-exit hidden" type="button" title="Exit Pro mode" aria-label="Exit Pro mode" data-i18n-title="Exit Pro mode" data-i18n-aria-label="Exit Pro mode">
+            <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="m12 5-7 7 7 7M5 12h14" /></svg>
+            <span data-i18n="Exit Pro mode">Exit Pro mode</span>
+          </button>
         </header>
 
         <form id="model-picker" class="model-picker hidden" aria-label="Conversation model">
@@ -101,12 +128,41 @@
 
         <div id="approval" class="approval hidden" role="alert" aria-live="assertive"></div>
 
+        <footer id="agent-actions" class="agent-actions hidden">
+          <p id="agent-migrate-feedback" class="form-feedback error" role="status" aria-live="polite"></p>
+          <button id="agent-migrate" class="control primary" type="button" data-i18n="Migrate session" title="Copy this history into a new Neutrino conversation in the same folder" data-i18n-title="Copy this history into a new Neutrino conversation in the same folder">Migrate session</button>
+        </footer>
+
         <footer id="composer" class="composer hidden">
           <div class="composer-inner">
             <div class="composer-card">
               <textarea id="input" rows="1" placeholder="Message Neutrino…" aria-label="Message" data-i18n-placeholder="Message Neutrino…"></textarea>
+              <details id="pro-preset-control" class="pro-preset-control hidden">
+                <summary aria-label="Pro preset" data-i18n-aria-label="Pro preset"><span id="pro-preset-label">Pro</span><svg class="pro-preset-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg></summary>
+                <div class="pro-preset-card">
+                  <div class="pro-preset-heading"><span data-i18n="Neutrino Pro">Neutrino Pro</span><strong id="pro-preset-name"></strong></div>
+                  <label class="pro-slider-label" for="pro-preset-range" data-i18n="Preset">Preset</label>
+                  <div id="pro-preset-slider" class="pro-preset-slider">
+                    <div class="pro-slider-track" aria-hidden="true">
+                      <div class="pro-slider-fill"></div>
+                      <div class="pro-slider-meteors">
+                        <span class="pro-slider-meteor"></span><span class="pro-slider-meteor"></span><span class="pro-slider-meteor"></span><span class="pro-slider-meteor"></span>
+                      </div>
+                    </div>
+                    <div id="pro-slider-stops" class="pro-slider-stops" aria-hidden="true"></div>
+                    <input id="pro-preset-range" type="range" min="0" max="0" step="1" value="0" aria-label="Pro preset" data-i18n-aria-label="Pro preset" />
+                  </div>
+                  <div id="pro-preset-ticks" class="pro-preset-ticks"></div>
+                  <details class="pro-model-details" id="pro-model-details">
+                    <summary><span data-i18n="Model details">Model details</span><svg class="pro-model-details-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg></summary>
+                    <div id="pro-preset-models" class="pro-preset-models"></div>
+                  </details>
+                  <p id="pro-preset-note" class="settings-note"></p>
+                  <p id="pro-preset-feedback" class="form-feedback error" role="status" aria-live="polite"></p>
+                </div>
+              </details>
               <button id="send" class="primary" type="button" title="Send message" aria-label="Send message" data-i18n-title="Send message" data-i18n-aria-label="Send message">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="send-icon" d="M12 19V5M5 12l7-7 7 7" /><rect class="pause-icon" x="5" y="5" width="14" height="14" rx="2" fill="currentColor" stroke="none" /></svg>
               </button>
             </div>
             <div class="composer-hint">
@@ -146,23 +202,37 @@
               </select>
             </label>
           </div>
-          <label class="checkbox-label"><input id="settings-plan" type="checkbox" /> <span data-i18n="Plan-first turns">Plan-first turns</span></label>
-          <p class="settings-note" data-i18n="Split multi-step requests into a plan before answering.">Split multi-step requests into a plan before answering.</p>
-          <h3 data-i18n="Defaults for new conversations">Defaults for new conversations</h3>
-          <div class="settings-grid">
+          <label class="checkbox-label standard-only"><input id="settings-plan" type="checkbox" /> <span data-i18n="Plan-first turns">Plan-first turns</span></label>
+          <p class="settings-note standard-only" data-i18n="Split multi-step requests into a plan before answering.">Split multi-step requests into a plan before answering.</p>
+          <h3 class="standard-only" data-i18n="Defaults for new conversations">Defaults for new conversations</h3>
+          <div class="settings-grid standard-only">
             <label><span data-i18n="Provider">Provider</span><select id="default-provider"></select></label>
             <label><span data-i18n="Model">Model</span><select id="default-model"></select></label>
             <label><span data-i18n="Thinking intensity">Thinking intensity</span><select id="default-intensity"></select></label>
           </div>
+          <section id="settings-pro" class="hidden">
+            <h3 data-i18n="Pro orchestration">Pro orchestration</h3>
+            <div class="settings-grid">
+              <label><span data-i18n="Default Pro preset">Default Pro preset</span><select id="settings-pro-preset"></select></label>
+              <label><span data-i18n="Maximum delegation depth">Maximum delegation depth</span><input id="settings-pro-depth" type="number" min="1" max="100" step="1" value="10" /></label>
+            </div>
+            <p class="settings-note" data-i18n="Every Pro task is planned first. All roles share the regular provider configuration. Image generation is reserved.">Every Pro task is planned first. All roles share the regular provider configuration. Image generation is reserved.</p>
+            <p class="settings-note" data-i18n="Edit role models, intensity and context windows in ~/.neutrino/pro/model.json. Default delegation depth: 10.">Edit role models, intensity and context windows in ~/.neutrino/pro/model.json. Default delegation depth: 10.</p>
+          </section>
           <h3 data-i18n="Conversation and approvals">Conversation and approvals</h3>
-          <label><span data-i18n="Model context window (tokens)">Model context window (tokens)</span><input id="settings-context" type="number" min="1" max="9007199254740991" step="1" required /></label>
-          <p id="settings-compress-note" class="settings-note" data-i18n="Auto-compress at 80% of this model's context window. Default: 1,000,000 tokens.">Auto-compress at 80% of this model's context window. Default: 1,000,000 tokens.</p>
-          <label><span data-i18n="Approval reviewer model">Approval reviewer model</span><select id="settings-reviewer"></select></label>
+          <label class="standard-only"><span data-i18n="Model context window (tokens)">Model context window (tokens)</span><input id="settings-context" type="number" min="1" max="9007199254740991" step="1" required /></label>
+          <p id="settings-compress-note" class="settings-note standard-only" data-i18n="Auto-compress at 80% of this model's context window. Default: 1,000,000 tokens.">Auto-compress at 80% of this model's context window. Default: 1,000,000 tokens.</p>
+          <label class="standard-only"><span data-i18n="Approval reviewer model">Approval reviewer model</span><select id="settings-reviewer"></select></label>
           <label class="checkbox-label"><input id="settings-extreme" type="checkbox" /> <span data-i18n="Extreme-risk auto-approval (del class, 3 separate review rounds)">Extreme-risk auto-approval (del class, 3 separate review rounds)</span></label>
           <label class="checkbox-label"><input id="settings-sound" type="checkbox" /> <span data-i18n="Sound alerts (turn finished, approval waiting)">Sound alerts (turn finished, approval waiting)</span></label>
           <label class="checkbox-label"><input id="settings-web-console" type="checkbox" /> <span data-i18n="Start the Web console with the terminal">Start the Web console with the terminal</span></label>
           <p class="settings-note" data-i18n="Safety determines automatic approval; task relevance only blocks unanimously confirmed, extreme mismatches. Delete-class automatic approval also requires this setting.">Safety determines automatic approval; task relevance only blocks unanimously confirmed, extreme mismatches. Delete-class automatic approval also requires this setting.</p>
+          <h3 data-i18n="Background residency">Background residency</h3>
+          <label class="checkbox-label"><input id="settings-background" type="checkbox" /> <span data-i18n="Run the Web console in the background and keep browser tasks alive after the CLI exits">Run the Web console in the background and keep browser tasks alive after the CLI exits</span></label>
+          <p class="settings-note" data-i18n="Off by default. Changes take effect immediately, including for running browser tasks. The regular and Pro workspaces share this setting. Terminal conversations still end when the terminal closes.">Off by default. Changes take effect immediately, including for running browser tasks. The regular and Pro workspaces share this setting. Terminal conversations still end when the terminal closes.</p>
           <h3 data-i18n="Web access">Web access</h3>
+          <label class="checkbox-label"><input id="settings-web-lan" type="checkbox" /> <span data-i18n="Allow access from other devices (LAN, 0.0.0.0)">Allow access from other devices (LAN, 0.0.0.0)</span></label>
+          <p class="settings-note" data-i18n="Binds the Web console to 0.0.0.0 so other devices on your network can open it, like --lan. Takes effect immediately; turning it off returns the console to 127.0.0.1. Keep the Web password on: anyone who can reach this port can drive the agent.">Binds the Web console to 0.0.0.0 so other devices on your network can open it, like --lan. Takes effect immediately; turning it off returns the console to 127.0.0.1. Keep the Web password on: anyone who can reach this port can drive the agent.</p>
           <div class="settings-grid">
             <label><span data-i18n="New Web password">New Web password</span><input id="settings-password" type="password" autocomplete="new-password" maxlength="256" placeholder="Leave blank to keep current password" data-i18n-placeholder="Leave blank to keep current password" /></label>
             <label><span data-i18n="Confirm password">Confirm password</span><input id="settings-password-confirm" type="password" autocomplete="new-password" maxlength="256" placeholder="Repeat new password" data-i18n-placeholder="Repeat new password" /></label>
@@ -177,12 +247,34 @@
       </form>
     </dialog>
 
+    <dialog id="background-dialog" class="sheet-dialog background-dialog" aria-labelledby="background-title">
+      <div class="sheet background-sheet">
+        <header class="sheet-header background-header">
+          <span class="background-mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <ellipse cx="12" cy="12" rx="9.4" ry="3.8" transform="rotate(-30 12 12)" stroke="currentColor" stroke-width="1.7" />
+              <circle cx="12" cy="12" r="3.1" stroke="currentColor" stroke-width="1.7" />
+            </svg>
+          </span>
+          <div class="background-copy">
+            <h2 id="background-title" data-i18n="Enable background residency to avoid accidentally interrupting tasks">Enable background residency to avoid accidentally interrupting tasks</h2>
+          </div>
+        </header>
+        <p id="background-feedback" class="form-feedback background-feedback" role="status" aria-live="polite"></p>
+        <footer class="sheet-actions background-actions">
+          <button id="background-cancel" class="control" type="button" data-i18n="Cancel">Cancel</button>
+          <button id="background-enable" class="primary" type="button" data-i18n="Enable" autofocus>Enable</button>
+        </footer>
+      </div>
+    </dialog>
+
     <dialog id="new-chat-dialog" class="sheet-dialog" aria-labelledby="new-chat-title">
       <form id="new-chat-form" class="sheet">
         <header class="sheet-header">
           <div>
             <h2 id="new-chat-title" data-i18n="New conversation">New conversation</h2>
-            <p class="sheet-sub" data-i18n="Choose a working directory and a model.">Choose a working directory and a model.</p>
+            <p class="sheet-sub standard-only" data-i18n="Choose a working directory and a model.">Choose a working directory and a model.</p>
+            <p class="sheet-sub pro-only" data-i18n="Choose a working directory and a professional team preset.">Choose a working directory and a professional team preset.</p>
           </div>
           <button id="new-chat-close" class="icon-btn" type="button" aria-label="Close" data-i18n-aria-label="Close">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
@@ -200,19 +292,20 @@
             <div id="new-chat-recents" class="workspace-recents"></div>
           </section>
           <section class="field-group">
-            <h3 data-i18n="Model">Model</h3>
-            <div class="settings-grid">
+            <h3 class="standard-only" data-i18n="Model">Model</h3>
+            <div class="settings-grid standard-only">
               <label><span data-i18n="Provider">Provider</span><select id="new-chat-provider"></select></label>
               <label><span data-i18n="Model">Model</span><select id="new-chat-model"></select></label>
               <label><span data-i18n="Thinking">Thinking</span><select id="new-chat-intensity"></select></label>
             </div>
+            <label class="pro-only"><span data-i18n="Pro preset">Pro preset</span><select id="new-chat-pro-preset"></select></label>
             <label><span data-i18n="Default approval mode">Default approval mode</span>
               <select id="new-chat-approval">
                 <option value="request" data-i18n="Request Approval">Request Approval</option>
                 <option value="auto" data-i18n="Auto Approval">Auto Approval</option>
               </select>
             </label>
-            <p id="new-chat-note" class="settings-note"></p>
+            <p id="new-chat-note" class="settings-note standard-only"></p>
           </section>
           <p id="new-chat-feedback" class="form-feedback" role="status" aria-live="polite"></p>
         </div>
@@ -299,6 +392,18 @@
       </div>
     </dialog>
 
+    <dialog id="pro-fallback-dialog" class="sheet-dialog pro-fallback-dialog" aria-labelledby="pro-fallback-title">
+      <div class="sheet">
+        <header class="sheet-header"><h2 id="pro-fallback-title" data-i18n="Professional model availability">Professional model availability</h2></header>
+        <div class="sheet-body">
+          <p class="settings-note" data-i18n="These model substitutions apply only to this task in this conversation. Your preset configuration is unchanged.">These model substitutions apply only to this task in this conversation. Your preset configuration is unchanged.</p>
+          <div id="pro-fallback-rows" class="pro-fallback-rows"></div>
+          <p id="pro-fallback-error" class="form-feedback error hidden" role="alert"></p>
+        </div>
+        <footer class="sheet-actions"><button id="pro-fallback-close" class="primary" type="button" data-i18n="Got it">Got it</button></footer>
+      </div>
+    </dialog>
+
     <script src="app.js" type="module"></script>
   </body>
 </html>

package/web/pro.js

@@ -0,0 +1,184 @@
+import { t, getLanguage } from "./i18n.js";
+
+const ROLES = {
+  main_model: "Main model", thinking_model: "Reasoning model",
+  front_output_model: "Frontend model", backend_output_model: "Backend model",
+  confirm_model: "Approval model", genimage_model: "Image model",
+  plan_model: "Planning model", modeling_model: "Modeling model",
+};
+
+/** The preset is a conversation choice; effective fallbacks belong to one task. */
+export function createProUI({ changePreset }) {
+  const control = document.getElementById("pro-preset-control");
+  if (!control) return null;
+  const label = document.getElementById("pro-preset-label");
+  const slider = document.getElementById("pro-preset-slider");
+  const stops = document.getElementById("pro-slider-stops");
+  const range = document.getElementById("pro-preset-range");
+  const name = document.getElementById("pro-preset-name");
+  const ticks = document.getElementById("pro-preset-ticks");
+  const models = document.getElementById("pro-preset-models");
+  const note = document.getElementById("pro-preset-note");
+  const feedback = document.getElementById("pro-preset-feedback");
+  const fallbackDialog = document.getElementById("pro-fallback-dialog");
+  const fallbackRows = document.getElementById("pro-fallback-rows");
+  const fallbackError = document.getElementById("pro-fallback-error");
+  const seenChecks = new Set();
+  let presets = [];
+  let selected = "";
+  let committed = "";
+  let defaultPreset = "";
+  let target = null;
+  let snapshot = null;
+  let applying = false;
+  let pending = Promise.resolve();
+  let failure = null;
+  const title = preset => getLanguage() === "zh" ? preset.chinese_name || preset.name : preset.name;
+  const presetFor = value => presets.find(entry => entry.name === value);
+  const modelName = value => value == null || value === "null" || value === "" ? t("Reserved") : value;
+  const reference = value => value?.provider ? `${value.provider}/${modelName(value.model)}` : modelName(value?.model);
+
+  function render() {
+    const preset = presetFor(selected) || presets[0];
+    control.classList.toggle("hidden", !preset);
+    if (!preset) return;
+    selected = preset.name;
+    const busy = Boolean(snapshot?.busy || snapshot?.approval || applying);
+    label.textContent = `Pro · ${title(preset)}`;
+    name.textContent = title(preset);
+    const selectedIndex = presets.indexOf(preset);
+    const lastIndex = presets.length - 1;
+    const position = lastIndex > 0 ? selectedIndex / lastIndex : 0;
+    slider.setAttribute("style", `--pro-slider-position: ${position}`);
+    slider.classList.toggle("is-disabled", busy);
+    control.classList.toggle("is-max", lastIndex > 0 && selectedIndex === lastIndex);
+    stops.replaceChildren();
+    presets.forEach((_entry, index) => {
+      const stop = document.createElement("span");
+      stop.className = "pro-slider-stop";
+      stop.setAttribute("style", `left: ${lastIndex > 0 ? index / lastIndex * 100 : 0}%`);
+      stop.classList.toggle("is-filled", index <= selectedIndex);
+      stops.appendChild(stop);
+    });
+    range.max = String(Math.max(0, presets.length - 1));
+    range.value = String(selectedIndex);
+    range.disabled = busy;
+    range.setAttribute("aria-valuetext", title(preset));
+    ticks.replaceChildren();
+    presets.forEach((entry, index) => {
+      const tick = document.createElement("button");
+      tick.type = "button";
+      tick.textContent = title(entry);
+      tick.disabled = busy;
+      tick.setAttribute("style", `left: ${lastIndex > 0 ? index / lastIndex * 100 : 0}%`);
+      tick.setAttribute("aria-pressed", String(entry.name === selected));
+      tick.addEventListener("click", () => choose(entry.name));
+      ticks.appendChild(tick);
+    });
+    models.replaceChildren();
+    for (const role of Object.keys(ROLES)) {
+      const configured = preset["model-setting"]?.find(entry => entry.type === role);
+      const effective = snapshot?.pro?.preset === selected && !snapshot.pro.checking
+        ? snapshot.pro.models?.find(entry => entry.role === role) : null;
+      const row = document.createElement("div");
+      row.className = "pro-model-row";
+      const roleLabel = document.createElement("span");
+      roleLabel.textContent = t(ROLES[role]);
+      const value = document.createElement("span");
+      value.textContent = modelName(effective?.model ?? configured?.model);
+      value.title = [effective?.provider ?? configured?.provider, effective?.intensity ?? configured?.intensity].filter(Boolean).join(" · ");
+      if (effective && effective.tier !== selected) {
+        value.classList.add("pro-model-fallback");
+        value.title += ` · ${t("Temporary fallback")}: ${effective.tier}`;
+      }
+      row.append(roleLabel, value);
+      models.appendChild(row);
+    }
+    note.textContent = snapshot?.pro?.checking
+      ? t("Checking every professional model before this task…")
+      : busy ? t("Pause the current turn to change presets.")
+        : t("Models are checked before each task. Unavailable roles temporarily use a lower preset.");
+  }
+
+  function choose(value) {
+    if (snapshot?.busy || snapshot?.approval || applying || !presetFor(value)) return;
+    const previous = committed || selected;
+    const originalTarget = target;
+    selected = value;
+    failure = null;
+    feedback.textContent = "";
+    applying = true;
+    render();
+    pending = Promise.resolve().then(() => changePreset(value)).then(() => {
+      if (target === originalTarget) committed = value;
+    }).catch(error => {
+      if (target !== originalTarget) return;
+      failure = error;
+      selected = previous;
+      feedback.textContent = error.message;
+    }).finally(() => { applying = false; render(); });
+  }
+
+  function showFallbacks(pro, key) {
+    if (!pro || pro.checking || !pro.checkId) return;
+    const id = `${key || ""}:${pro.checkId}`;
+    if (seenChecks.has(id)) return;
+    seenChecks.add(id);
+    if (!(pro.fallbacks?.length) && !pro.error) return;
+    fallbackRows.replaceChildren();
+    for (const fallback of pro.fallbacks || []) {
+      const row = document.createElement("div");
+      row.className = "pro-fallback-row";
+      const role = document.createElement("strong");
+      role.textContent = t(ROLES[fallback.role] || fallback.role);
+      const from = document.createElement("span");
+      from.textContent = `${reference(fallback.requested)} → ${fallback.replacement ? reference(fallback.replacement) : t("No available model")}`;
+      const detail = document.createElement("small");
+      detail.textContent = [fallback.reason, fallback.replacement?.tier].filter(Boolean).join(" · ");
+      row.append(role, from, detail);
+      fallbackRows.appendChild(row);
+    }
+    fallbackError.textContent = pro.error || "";
+    fallbackError.classList.toggle("hidden", !pro.error);
+    if (!fallbackDialog.open) fallbackDialog.showModal();
+  }
+
+  range.addEventListener("input", () => {
+    if (snapshot?.busy || applying) return;
+    selected = presets[Number(range.value)]?.name || selected;
+    render();
+  });
+  range.addEventListener("change", () => choose(selected));
+  control.addEventListener("keydown", event => {
+    if (event.key === "Escape") { control.open = false; event.stopPropagation(); }
+  });
+  document.addEventListener("pointerdown", event => {
+    if (control.open && !control.contains(event.target)) control.open = false;
+  });
+  document.getElementById("pro-fallback-close").addEventListener("click", () => fallbackDialog.close());
+
+  return {
+    load(catalog) {
+      presets = Array.isArray(catalog?.pro?.presets) ? catalog.pro.presets : [];
+      defaultPreset = catalog?.pro?.preset || presets[0]?.name || "";
+      if (!presetFor(selected) || (!target && !applying)) selected = defaultPreset;
+      if (!committed) committed = selected;
+      render();
+    },
+    show(info, key) {
+      if (target !== key) {
+        selected = info?.pro?.preset || info?.pro_preset || defaultPreset;
+        committed = selected;
+        target = key;
+        failure = null;
+        feedback.textContent = "";
+      } else if (!applying && info?.pro?.preset) committed = selected = info.pro.preset;
+      snapshot = info;
+      render();
+      showFallbacks(info?.pro, key);
+    },
+    refresh: render,
+    preset: () => selected,
+    async flush() { await pending; if (failure) throw failure; },
+  };
+}