@xingjisoft/neutrino 0.4.1 → 0.5.0

package/web/settings.js

@@ -3,7 +3,8 @@
 import { t, getLanguage } from "./i18n.js";
 
 export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMode = false, onCatalogChange }) {
-  const ids = ["model-picker", "model-provider", "model-name", "model-intensity", "model-apply", "model-feedback",
+  const ids = ["model-picker", "model-picker-summary", "model-picker-label", "model-provider", "model-name", "model-intensity",
+    "model-intensity-label", "model-intensity-slider", "model-intensity-stops", "model-intensity-ticks", "model-feedback",
     "settings-open", "settings-dialog", "settings-form", "settings-close", "settings-cancel", "settings-save", "settings-feedback",
     "default-provider", "default-model", "default-intensity", "settings-context", "settings-compress-note", "settings-reviewer",
     "settings-extreme", "settings-sound", "settings-password", "settings-password-confirm",
@@ -14,7 +15,10 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
   let target = null;
   let conversation = null;
   let dirty = false;
-  let applying = false;
+  let draftIntensity = "";
+  let applying = null;
+  let generation = 0;
+  let failure = null;
   let feedback = "";
   let feedbackError = false;
   // Value the LAN switch had when the dialog opened. Only an actual flip is
@@ -88,32 +92,90 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
       value: preset.name, label: getLanguage() === "zh" ? preset.chinese_name || preset.name : preset.name,
     })), selected);
   }
+  function unavailableOption(select, value) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = `${value} ${t("(unavailable)")}`;
+    option.disabled = true;
+    select.appendChild(option);
+    select.value = value;
+  }
   function choice() {
-    return { provider: el["model-provider"].value, model: el["model-name"].value, intensity: el["model-intensity"].value };
+    return { provider: el["model-provider"].value, model: el["model-name"].value, intensity: draftIntensity };
   }
   function renderPicker() {
     el["model-picker"].classList.toggle("hidden", proMode || !config || !conversation);
     if (proMode || !config || !conversation) return;
     if (!dirty) {
-      providers(el["model-provider"], conversation.provider);
-      models(el["model-provider"], el["model-name"], conversation.model);
-      intensities(el["model-intensity"], conversation.intensity, conversation.provider, conversation.model);
+      providers(el["model-provider"], conversation.provider || config.selection?.provider);
+      if (conversation.provider && !config.providers.some(entry => entry.name === conversation.provider)) {
+        unavailableOption(el["model-provider"], conversation.provider);
+      }
+      models(el["model-provider"], el["model-name"], conversation.model || config.selection?.model);
+      if (conversation.model && !modelEntry(el["model-provider"].value, conversation.model)) {
+        unavailableOption(el["model-name"], conversation.model);
+      }
+      draftIntensity = pickIntensity(el["model-provider"].value, el["model-name"].value,
+        conversation.intensity || config.selection?.intensity);
     } else {
-      // A provider/model change narrows the intensity list even though the rest
-      // of the draft must survive the next server snapshot.
-      intensities(el["model-intensity"], el["model-intensity"].value,
-        el["model-provider"].value, el["model-name"].value);
+      // Keep a draft across live snapshots, while honoring the chosen model's limits.
+      draftIntensity = pickIntensity(el["model-provider"].value, el["model-name"].value, draftIntensity);
     }
+    const selection = choice();
+    const displayed = dirty || target?.startsWith("new:") ? selection : {
+      model: conversation.model || selection.model,
+      intensity: conversation.intensity || selection.intensity,
+    };
+    el["model-picker-label"].textContent = [displayed.model, displayed.intensity && t(displayed.intensity)]
+      .filter(Boolean).join(" · ") || t("Choose a model");
+    const summary = t("Conversation model: {selection}", { selection: el["model-picker-label"].textContent });
+    el["model-picker-summary"].setAttribute("aria-label", summary);
+    el["model-picker-summary"].title = summary;
+    el["model-intensity-label"].textContent = selection.intensity ? t(selection.intensity) : "";
+
+    const levels = modelEntry(selection.provider, selection.model) ? intensitiesFor(selection.provider, selection.model) : [];
+    const index = Math.max(0, levels.indexOf(selection.intensity));
+    const last = Math.max(0, levels.length - 1);
     const busy = Boolean(conversation.busy || conversation.approval);
-    el["model-apply"].disabled = applying || busy || !choice().provider || !choice().model;
-    el["model-apply"].textContent = applying
-      ? t("Applying…")
-      : target?.startsWith("file:") ? t("Continue with model") : t("Apply to conversation");
-    message(
-      el["model-feedback"],
-      feedback || (busy ? t("Pause the current turn to change models.") : t("Applies to the next turn.")),
-      feedbackError,
-    );
+    const locked = busy || Boolean(applying && applying.generation === generation);
+    const slider = el["model-intensity-slider"];
+    slider.setAttribute("style", `--pro-slider-position: ${last ? index / last : 0}`);
+    slider.classList.toggle("is-disabled", locked || !levels.length);
+    el["model-picker"].classList.toggle("is-max", last > 0 && index === last);
+    el["model-provider"].disabled = locked;
+    el["model-name"].disabled = locked || !selection.provider;
+    el["model-intensity"].disabled = locked || !levels.length;
+    el["model-intensity"].max = String(last);
+    el["model-intensity"].value = String(index);
+    el["model-intensity"].setAttribute("aria-valuetext", selection.intensity ? t(selection.intensity) : "");
+
+    const stops = el["model-intensity-stops"];
+    const ticks = el["model-intensity-ticks"];
+    stops.replaceChildren();
+    ticks.replaceChildren();
+    levels.forEach((level, levelIndex) => {
+      const position = last ? levelIndex / last * 100 : 0;
+      const stop = document.createElement("span");
+      stop.className = "pro-slider-stop";
+      stop.setAttribute("style", `left: ${position}%`);
+      stop.classList.toggle("is-filled", levelIndex <= index);
+      stops.appendChild(stop);
+      const tick = document.createElement("button");
+      tick.type = "button";
+      tick.textContent = t(level);
+      tick.disabled = locked;
+      tick.setAttribute("style", `left: ${position}%`);
+      tick.setAttribute("aria-pressed", String(level === selection.intensity));
+      tick.addEventListener("click", () => {
+        if (tick.disabled) return;
+        draftIntensity = level;
+        changeChoice();
+      });
+      ticks.appendChild(tick);
+    });
+    const status = busy ? t("Pause the current turn to change models.")
+      : feedback || (locked ? t("Applying…") : t("Applies to the next turn."));
+    message(el["model-feedback"], status, !busy && feedbackError);
   }
   async function load() {
     config = await json("/api/settings");
@@ -122,44 +184,109 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     return config;
   }
   function showConversation(info, key) {
-    if (target !== key) { dirty = false; feedback = ""; feedbackError = false; }
+    if (target !== key) {
+      generation++;
+      dirty = false;
+      failure = null;
+      feedback = "";
+      feedbackError = false;
+      el["model-picker"].open = false;
+    }
     target = key;
     conversation = info;
+    // A turn may start elsewhere while the slider is being dragged. Discard
+    // that uncommitted preview so it cannot masquerade as the active setting.
+    if (target?.startsWith("live:") && dirty && (info?.busy || info?.approval) && applying?.generation !== generation) {
+      dirty = false;
+      feedback = "";
+      feedbackError = false;
+    }
     renderPicker();
   }
   function clear() {
+    generation++;
     target = null;
     conversation = null;
     dirty = false;
+    failure = null;
+    feedback = "";
+    el["model-picker"].open = false;
+    renderPicker();
+  }
+  function changeChoice() {
+    if (!config || !conversation || conversation.busy || conversation.approval || applying?.generation === generation) return;
+    dirty = true;
+    failure = null;
     feedback = "";
+    feedbackError = false;
+    renderPicker();
+    // Saved and not-yet-created conversations keep the choice as a local draft.
+    if (!target?.startsWith("live:")) return;
+    const selection = choice();
+    if (!selection.provider || !modelEntry(selection.provider, selection.model) || !selection.intensity) return;
+    if (selection.provider === conversation.provider && selection.model === conversation.model && selection.intensity === conversation.intensity) {
+      dirty = false;
+      renderPicker();
+      return;
+    }
+    const request = { generation, promise: null };
+    applying = request;
     renderPicker();
+    request.promise = (async () => {
+      try {
+        await applyModel(selection);
+        if (request.generation !== generation) return;
+        conversation = { ...conversation, ...selection };
+        dirty = false;
+        feedback = t("Model and intensity updated.");
+      } catch (error) {
+        if (request.generation !== generation) return;
+        dirty = false;
+        failure = error;
+        feedback = t(error.message);
+        feedbackError = true;
+      } finally {
+        if (applying === request) applying = null;
+        renderPicker();
+      }
+    })();
   }
   el["model-provider"].addEventListener("change", () => {
     if (!config) return;
-    models(el["model-provider"], el["model-name"]);
-    dirty = true; feedback = ""; feedbackError = false;
-    renderPicker();
+    const provider = config.providers.find(entry => entry.name === el["model-provider"].value);
+    models(el["model-provider"], el["model-name"], provider?.models.find(model => model.configured)?.name);
+    changeChoice();
   });
-  for (const id of ["model-name", "model-intensity"]) {
-    el[id].addEventListener("change", () => { dirty = true; feedback = ""; feedbackError = false; renderPicker(); });
-  }
-  el["model-picker"].addEventListener("submit", async event => {
-    event.preventDefault();
-    if (el["model-apply"].disabled) return;
-    const originalTarget = target;
-    applying = true;
+  el["model-name"].addEventListener("change", changeChoice);
+  el["model-intensity"].addEventListener("input", () => {
+    if (!config || !conversation || conversation.busy || conversation.approval || applying?.generation === generation) return;
+    const levels = intensitiesFor(el["model-provider"].value, el["model-name"].value);
+    draftIntensity = levels[Number(el["model-intensity"].value)] || draftIntensity;
+    dirty = true;
+    failure = null;
     feedback = "";
+    feedbackError = false;
     renderPicker();
-    try {
-      await applyModel(choice());
-      if (target === originalTarget) { dirty = false; feedback = t("Model and intensity updated."); feedbackError = false; }
-    } catch (error) {
-      if (target === originalTarget) { feedback = t(error.message); feedbackError = true; }
-    } finally {
-      applying = false;
-      renderPicker();
-    }
   });
+  el["model-intensity"].addEventListener("change", changeChoice);
+  el["model-picker"].addEventListener("keydown", event => {
+    if (event.key === "Escape") { el["model-picker"].open = false; event.stopPropagation(); }
+  });
+  document.addEventListener?.("pointerdown", event => {
+    if (el["model-picker"].open && !el["model-picker"].contains(event.target)) el["model-picker"].open = false;
+  });
+  async function flush() {
+    // A keyboard send can happen before a range input emits its change event.
+    if (dirty && target?.startsWith("live:") && applying?.generation !== generation) changeChoice();
+    const request = applying;
+    const currentGeneration = generation;
+    if (request?.generation === currentGeneration) await request.promise;
+    if (currentGeneration === generation && failure) {
+      const error = failure;
+      failure = null;
+      throw error;
+    }
+  }
 
   function renderSettings() {
     el["settings-password"].value = "";
@@ -241,8 +368,6 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     if (!config) return;
     providers(el["model-provider"], el["model-provider"].value);
     models(el["model-provider"], el["model-name"], el["model-name"].value);
-    intensities(el["model-intensity"], el["model-intensity"].value,
-      el["model-provider"].value, el["model-name"].value);
     if (el["settings-dialog"].open) {
       providers(el["default-provider"], el["default-provider"].value);
       models(el["default-provider"], el["default-model"], el["default-model"].value);
@@ -362,12 +487,13 @@ export function createSettingsUI({ apiFetch, applyModel, onLanguageChange, proMo
     clear,
     soundAlerts,
     refreshTexts,
+    flush,
     catalog: () => config,
-    defaultSelection: () => (config ? {
+    defaultSelection: () => (config ? (target?.startsWith("new:") && dirty ? choice() : {
       provider: config.selection.provider,
       model: config.selection.model,
       intensity: config.selection.intensity,
-    } : undefined),
+    }) : undefined),
     selectionForFile: id => target === `file:${id}` && dirty ? choice() : undefined,
   };
 }

package/web/style.css

@@ -549,13 +549,28 @@ svg {
   color: var(--text-tertiary);
 }
 
-.dot {
+/* Sidebar row status: a finished turn, a turn in flight, or a pending approval. */
+.session-state {
   flex: none;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
-  animation: pulse 2s var(--ease) infinite;
+}
+
+.session-state.approval {
+  background: var(--amber);
+  animation: pulse-amber 1.6s ease-out infinite;
+}
+
+/* A running turn is a ring that keeps turning, never a coloured dot. */
+.session-state.running {
+  width: 9px;
+  height: 9px;
+  background: none;
+  border: 1.5px solid rgba(122, 170, 255, 0.25);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
 }
 
 .more {
@@ -1416,6 +1431,7 @@ svg {
 
 .composer-card {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   gap: 8px;
   padding: 8px 8px 8px 16px;
@@ -1434,7 +1450,7 @@ svg {
 }
 
 .composer textarea {
-  flex: 1;
+  flex: 1 0 100%;
   min-width: 0;
   min-height: 36px;
   max-height: 240px;
@@ -1458,8 +1474,6 @@ svg {
   outline: none;
 }
 
-.pro-mode .composer-card { flex-wrap: wrap; }
-.pro-mode .composer textarea { flex: 1 0 100%; }
 .pro-preset-control { position: relative; margin-left: auto; align-self: center; }
 .pro-preset-control > summary {
   display: flex; align-items: center; gap: 10px; padding: 7px 10px;
@@ -1496,20 +1510,20 @@ svg {
   border-radius: 50%; background: rgba(255, 255, 255, .18);
 }
 .pro-slider-stop.is-filled { background: rgba(255, 255, 255, .35); }
-#pro-preset-range {
+#pro-preset-range, #model-intensity {
   position: relative; display: block; width: 100%; height: 40px; margin: 0; padding: 0;
   -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
 }
-#pro-preset-range::-webkit-slider-runnable-track { height: 24px; border: 0; background: transparent; }
-#pro-preset-range::-webkit-slider-thumb {
+#pro-preset-range::-webkit-slider-runnable-track, #model-intensity::-webkit-slider-runnable-track { height: 24px; border: 0; background: transparent; }
+#pro-preset-range::-webkit-slider-thumb, #model-intensity::-webkit-slider-thumb {
   -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -2px;
   border: 0; border-radius: 50%; background: #fff;
 }
-#pro-preset-range::-moz-range-track { height: 24px; border: 0; background: transparent; }
-#pro-preset-range::-moz-range-progress { background: transparent; }
-#pro-preset-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; }
-#pro-preset-range:focus-visible { outline-offset: 2px; }
-#pro-preset-range:disabled { cursor: default; }
+#pro-preset-range::-moz-range-track, #model-intensity::-moz-range-track { height: 24px; border: 0; background: transparent; }
+#pro-preset-range::-moz-range-progress, #model-intensity::-moz-range-progress { background: transparent; }
+#pro-preset-range::-moz-range-thumb, #model-intensity::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; }
+#pro-preset-range:focus-visible, #model-intensity:focus-visible { outline-offset: 2px; }
+#pro-preset-range:disabled, #model-intensity:disabled { cursor: default; }
 .pro-preset-ticks { position: relative; height: 24px; margin: 6px 14px 16px; }
 .pro-preset-ticks button {
   position: absolute; transform: translateX(-50%); border: 0; background: transparent;
@@ -1931,40 +1945,18 @@ svg {
 
 /* ----------------------------------------------------- model and settings */
 
-.model-picker {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 10px;
-  padding: 10px clamp(16px, 4vw, 32px) 12px;
-  border-bottom: 1px solid var(--border-soft);
-}
-
-.model-picker label {
+.model-picker { min-width: 0; max-width: min(75%, 340px); }
+.model-picker > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-picker-fields { display: grid; gap: 12px; margin-bottom: 18px; }
+.model-picker-fields label {
   display: flex;
   flex-direction: column;
   gap: 5px;
-  flex: 0 1 170px;
   min-width: 0;
-  color: var(--text-caption);
+  color: var(--text-tertiary);
   font-size: 11px;
 }
-
-.model-picker label:nth-child(2) {
-  flex-grow: 1;
-  max-width: 300px;
-}
-
-.model-picker .control {
-  height: 34px;
-}
-
-.model-picker .form-feedback {
-  flex: 1 1 200px;
-  align-self: center;
-  margin: 0;
-}
+.model-picker-card .form-feedback { margin: 0; }
 
 select,
 .settings-fields input[type="password"],
@@ -1981,10 +1973,6 @@ select,
   transition: border-color var(--fast), background-color var(--fast);
 }
 
-.model-picker select {
-  height: 34px;
-}
-
 select {
   appearance: none;
   padding-right: 32px;
@@ -2341,11 +2329,6 @@ select option {
   display: none;
 }
 
-/* Sit below the model row instead of covering it. */
-#model-picker:not(.hidden) + #plan-card {
-  top: 138px;
-}
-
 .plan-card-head {
   display: flex;
   align-items: center;
@@ -3168,6 +3151,12 @@ html.pro-transitioning body::before {
   }
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .pro-slider-meteors { display: none; }
   *,
@@ -3296,27 +3285,6 @@ html.pro-transitioning body::before {
     height: 34px;
   }
 
-  .model-picker {
-    gap: 8px;
-    padding: 10px 12px;
-    max-height: 30vh;
-    max-height: 30dvh;
-    overflow: auto;
-  }
-
-  .model-picker label {
-    flex: 1 1 calc(50% - 8px);
-  }
-
-  .model-picker label:nth-child(2) {
-    max-width: none;
-  }
-
-  .model-picker .control {
-    flex: 1 1 calc(50% - 8px);
-    height: 38px;
-  }
-
   .messages {
     padding: 16px 14px 20px;
   }
@@ -3338,6 +3306,11 @@ html.pro-transitioning body::before {
     border-radius: 20px;
   }
 
+  .model-picker-card {
+    right: -48px;
+    width: min(390px, calc(100vw - 32px));
+  }
+
   .composer textarea {
     max-height: min(220px, 25dvh);
   }
@@ -3483,13 +3456,6 @@ html.pro-transitioning body::before {
     overflow-y: auto;
   }
 
-  .model-picker {
-    flex-shrink: 1;
-    min-height: 44px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-
   .messages {
     min-height: 40px;
     padding-top: 8px;