@abot-ai/runtime 1.9.0 → 2.0.0

package/dist/src/web-ui/app/components/long-term-memory/manager.js

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../confirmation-dialog.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 import {
   readMemoryEditorInput,
@@ -12,7 +13,8 @@ import {
 
 export function createLongTermMemoryManager({
   actions,
-  confirmDelete = (message) => window.confirm(message),
+  getEnvironmentId = () => "",
+  confirmDelete = (message) => confirmDialog(message, { title: "Delete memory", confirmLabel: "Delete memory", tone: "danger" }),
 }) {
   let root = null;
   let view = null;
@@ -59,7 +61,7 @@ export function createLongTermMemoryManager({
       void actions.setOriginFilter(view.originFilter ? "" : "passive_observation");
     if (action === "previous-page") void actions.changePage(-1);
     if (action === "next-page") void actions.changePage(1);
-    if (action === "delete") confirmAndDelete(recordId);
+    if (action === "delete") void confirmAndDelete(recordId);
   }
 
   function handleSubmit(event) {
@@ -79,11 +81,19 @@ export function createLongTermMemoryManager({
     actions.cancelEdit();
   }
 
-  function confirmAndDelete(recordId) {
+  async function confirmAndDelete(recordId) {
     const record = view?.items.find((item) => item.id === recordId);
     if (!record) return;
-    if (!confirmDelete(buildMemoryDeleteConfirmation(record))) return;
-    void actions.deleteMemory(record.id);
+    const environmentId = getEnvironmentId();
+    const targetRoot = root;
+    const updatedAt = record.updatedAt;
+    if (!await confirmDelete(buildMemoryDeleteConfirmation(record))) return;
+    if (environmentId !== getEnvironmentId() || root !== targetRoot) return;
+    const snapshot = actions.snapshot();
+    if (snapshot.mutation || snapshot.loading) return;
+    const current = snapshot.items.find((item) => item.id === recordId);
+    if (current !== record || current.updatedAt !== updatedAt) return;
+    await actions.deleteMemory(record.id);
   }
 
   function toggleMemoryContent(button) {

package/dist/src/web-ui/app/components/long-term-memory/saved-embedding-profiles.js

@@ -0,0 +1,114 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+export function savedEmbeddingProfiles(status) {
+  return Array.isArray(status?.embeddingProfiles) ? status.embeddingProfiles : [];
+}
+
+export function selectedEmbeddingProfile(state) {
+  return savedEmbeddingProfiles(state.status).find((profile) => profile.id === state.selectedProfileId);
+}
+
+export function hasSavedEmbeddingProvider(state, profile) {
+  return state.status?.providers?.some((provider) => provider.id === profile.providerId) === true;
+}
+
+export function hasUnavailableSelectedEmbeddingProfile(state) {
+  const profile = selectedEmbeddingProfile(state);
+  if (!profile) return false;
+  return !hasSavedEmbeddingProvider(state, profile);
+}
+
+export function matchingSelectedEmbeddingProfile(state, providerId, model) {
+  const profile = selectedEmbeddingProfile(state);
+  if (profile?.providerId !== providerId) return undefined;
+  if (profile.model !== model) return undefined;
+  return profile;
+}
+
+export function isConfiguredEmbeddingProfile(state, profileId) {
+  return state.status?.profileId === profileId;
+}
+
+function renderProfileCard(state, profile, canRemove) {
+  const selected = profile.id === state.selectedProfileId;
+  const configured = isConfiguredEmbeddingProfile(state, profile.id);
+  const available = hasSavedEmbeddingProvider(state, profile);
+  const confirming = state.removingProfileId === profile.id;
+  const provider = state.status?.providers?.find((entry) => entry.id === profile.providerId);
+  const badge = configured ? '<span class="embedding-profile-badge">Configured for memory</span>' : "";
+  const remove = canRemove ? `<button type="button" class="embedding-profile-remove"
+    data-memory-remove-profile="${escapeAttribute(profile.id)}"
+    aria-label="Remove ${escapeAttribute(profile.label)}"
+    ${state.busy || configured ? "disabled" : ""}
+    title="${configured ? "Choose another memory profile before removing this one." : "Remove this saved profile"}">Remove</button>` : "";
+  const confirmation = confirming ? `<div class="embedding-profile-confirm" role="group" aria-label="Confirm profile removal">
+    <p>Remove this saved profile? Stored memories and the connection will stay.</p>
+    <button type="button" data-memory-confirm-remove="${escapeAttribute(profile.id)}" ${state.busy ? "disabled" : ""}>Remove profile</button>
+    <button type="button" data-memory-cancel-remove ${state.busy ? "disabled" : ""}>Cancel</button>
+  </div>` : "";
+  return `<article class="embedding-profile-card ${selected ? "selected" : ""}">
+    <button type="button" class="embedding-profile-select"
+      data-memory-saved-profile="${escapeAttribute(profile.id)}" aria-pressed="${selected}"
+      ${state.busy || !available ? "disabled" : ""}>
+      <span class="embedding-profile-top"><span class="embedding-profile-provider">${escapeHtml(provider?.type || profile.providerId)}</span>${badge}</span>
+      <strong>${escapeHtml(profile.label)}</strong>
+      <span class="embedding-profile-model">${escapeHtml(profile.model)}</span>
+      <span class="embedding-profile-connection">Connection · ${escapeHtml(profile.providerId)}</span>
+      ${!available ? '<span class="embedding-profile-unavailable">Connection unavailable</span>' : ""}
+    </button>
+    <div class="embedding-profile-footer"><span>${selected ? "Selected" : "Saved profile"}</span>${remove}</div>
+    ${confirmation}
+  </article>`;
+}
+
+export function renderSavedEmbeddingProfiles(state, canRemove) {
+  const profiles = savedEmbeddingProfiles(state.status);
+  return `<section class="embedding-profiles" aria-label="Saved embedding profiles">
+    <div class="embedding-profiles-heading"><div><h5>Embedding profiles</h5>
+      <p>Save a model and connection, then select it for memory.</p></div>
+      <button type="button" data-memory-new-profile ${state.busy ? "disabled" : ""}>+ New profile</button>
+    </div>
+    <div class="embedding-profile-grid">${profiles.map((profile) => renderProfileCard(state, profile, canRemove)).join("")}</div>
+    ${profiles.length ? "" : '<p class="embedding-profile-empty">No saved profiles yet. Create your first one below.</p>'}
+  </section>`;
+}
+
+export function bindSavedEmbeddingProfiles({ state, onSelected, onRemove, onChange }) {
+  state.root.querySelectorAll("[data-memory-saved-profile]").forEach((button) => {
+    button.addEventListener("click", () => {
+      if (state.busy) return;
+      const profile = savedEmbeddingProfiles(state.status).find((entry) => entry.id === button.dataset.memorySavedProfile);
+      if (!profile || !hasSavedEmbeddingProvider(state, profile)) return;
+      state.selectedProfileId = profile.id;
+      state.profileLabel = profile.label;
+      state.removingProfileId = "";
+      onSelected();
+    });
+  });
+  state.root.querySelector("[data-memory-new-profile]")?.addEventListener("click", () => {
+    if (state.busy) return;
+    state.selectedProfileId = "";
+    state.profileLabel = "";
+    state.removingProfileId = "";
+    onSelected();
+  });
+  state.root.querySelector("[data-memory-profile-label]")?.addEventListener?.("input", (event) => {
+    state.profileLabel = event.target.value;
+  });
+  state.root.querySelectorAll("[data-memory-remove-profile]").forEach((button) => {
+    button.addEventListener("click", () => {
+      if (state.busy || isConfiguredEmbeddingProfile(state, button.dataset.memoryRemoveProfile)) return;
+      state.removingProfileId = button.dataset.memoryRemoveProfile;
+      onChange();
+    });
+  });
+  state.root.querySelector("[data-memory-cancel-remove]")?.addEventListener("click", () => {
+    if (state.busy) return;
+    state.removingProfileId = "";
+    onChange();
+  });
+  const confirm = state.root.querySelector("[data-memory-confirm-remove]");
+  confirm?.addEventListener("click", () => {
+    void onRemove(confirm.dataset.memoryConfirmRemove);
+  });
+}

package/dist/src/web-ui/app/components/long-term-memory/setup-rendering.js

@@ -0,0 +1,55 @@
+import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
+import { renderSavedEmbeddingProfiles, selectedEmbeddingProfile } from "./saved-embedding-profiles.js";
+
+export function renderMemorySetup({ state, selectedProvider, selectedModel, canSave, canRemove, canAddConnection, emitClientEvents }) {
+  const status = state.status || {};
+  const providers = Array.isArray(status.providers) ? status.providers : [];
+  const enabled = status.enabled === true;
+  const profile = selectedEmbeddingProfile(state);
+  const savedSelection = canSave && Boolean(profile);
+  const fieldsDisabled = state.busy || savedSelection ? "disabled" : "";
+  const busy = state.busy ? "disabled" : "";
+  const activation = canSave && !profile ? "" : `<button type="button" class="primary-button" data-memory-action="enable" ${busy}>${state.busy === "enable" ? "Testing connection…" : "Test &amp; enable memory"}</button>`;
+  return `<section class="memory-setup-card" aria-busy="${Boolean(state.busy)}">
+    <div class="memory-setup-heading">
+      <div><p class="eyebrow">passive memory</p><h4>Long-term memory</h4>
+        <p>Choose the embedding model used to find relevant memories across conversations.</p></div>
+      <span class="memory-status ${enabled ? "enabled" : "disabled"}">${enabled ? "Enabled" : "Disabled"}</span>
+    </div>
+    ${canSave ? renderSavedEmbeddingProfiles(state, canRemove) : ""}
+    <section class="embedding-profile-editor" aria-label="${savedSelection ? "Selected profile" : "New embedding profile"}">
+      <div class="embedding-editor-heading"><h5>${savedSelection ? "Selected profile" : "New embedding profile"}</h5>
+        <p>${savedSelection ? "Test the connection and save this profile as the memory configuration. Apply the configuration separately to use it." : "Save a reusable profile first. Saving does not enable memory or contact the provider."}</p>
+      </div>
+      <div class="memory-setup-fields">
+        ${canSave ? `<label class="embedding-profile-name"><span>Profile name</span><input data-memory-profile-label value="${escapeAttribute(state.profileLabel)}" placeholder="For example: Qwen · local server" ${fieldsDisabled} /></label>` : ""}
+        <label><span>Connection</span><select data-memory-provider ${fieldsDisabled}>${providerOptions(providers, selectedProvider)}</select></label>
+        <label><span>Embedding model</span><input data-memory-model list="memoryEmbeddingModels" value="${escapeAttribute(selectedModel)}" placeholder="For example: text-embedding-3-small" ${fieldsDisabled} />
+          <datalist id="memoryEmbeddingModels">${state.models.map((model) => `<option value="${escapeAttribute(textOf(model))}"></option>`).join("")}</datalist></label>
+        ${savedSelection || !canSave ? `<label class="memory-events-toggle"><input data-memory-events type="checkbox" ${emitClientEvents ? "checked" : ""} ${busy} /><span>Show memory activity in conversations</span></label>` : ""}
+      </div>
+      <div class="memory-setup-actions">
+        ${!savedSelection && canSave ? `<button type="button" class="primary-button" data-memory-action="save-profile" ${busy}>${state.busy === "save-profile" ? "Saving…" : "Save profile"}</button>` : ""}
+        ${activation}
+        ${!savedSelection ? `<button type="button" data-memory-action="discover" ${busy}>Discover models</button>` : ""}
+        ${canAddConnection ? `<button type="button" data-memory-action="add-connection" ${busy}>Add connection</button>` : ""}
+        ${enabled ? `<button type="button" data-memory-action="disable" ${busy}>Disable memory</button>` : ""}
+      </div>
+    </section>
+    ${feedbackMarkup(state)}
+  </section>`;
+}
+
+function providerOptions(providers, selectedProvider) {
+  const options = providers.map((provider) => `<option value="${escapeAttribute(provider.id)}" ${provider.id === selectedProvider ? "selected" : ""}>${escapeHtml(provider.id)} · ${escapeHtml(provider.type)}</option>`);
+  if (!providers.some((provider) => provider.id === selectedProvider)) {
+    options.unshift(`<option value="${escapeAttribute(selectedProvider)}" selected>${escapeHtml(selectedProvider || "Choose a connection")}${selectedProvider ? " (unavailable)" : ""}</option>`);
+  }
+  return options.join("");
+}
+
+function feedbackMarkup(state) {
+  if (state.error) return `<p class="memory-setup-feedback error-text" role="alert">${escapeHtml(state.error)}</p>`;
+  if (state.message) return `<p class="memory-setup-feedback" role="status">${escapeHtml(state.message)}</p>`;
+  return "";
+}

package/dist/src/web-ui/app/components/long-term-memory-setup.js

@@ -1,19 +1,35 @@
-import { escapeAttribute, escapeHtml, textOf } from "../lib/text-format.js";
+import {
+  bindSavedEmbeddingProfiles,
+  matchingSelectedEmbeddingProfile,
+  hasUnavailableSelectedEmbeddingProfile,
+  isConfiguredEmbeddingProfile,
+  savedEmbeddingProfiles,
+  selectedEmbeddingProfile,
+} from "./long-term-memory/saved-embedding-profiles.js";
+import { renderMemorySetup } from "./long-term-memory/setup-rendering.js";
+import { textOf } from "../lib/text-format.js";
 
 export function createLongTermMemorySetup({
   getEnvironmentId = () => "",
   loadStatus,
   discoverModels,
   enableMemory,
+  saveProfile,
+  removeProfile,
   disableMemory,
   recordControlEvent,
   beginRuntimeMutation = () => true,
   refreshRuntimeConfig = async () => true,
   endRuntimeMutation = () => {},
+  onAddConnection,
+  onEnvironmentChanged = () => {},
 }) {
   const state = {
     root: null,
     status: null,
+    selectedProfileId: "",
+    removingProfileId: "",
+    profileLabel: "",
     models: [],
     discoverySupported: false,
     busy: "",
@@ -29,20 +45,25 @@ export function createLongTermMemorySetup({
     render();
   }
 
-  async function load() {
+  async function load(options = {}) {
     const revision = ++state.loadRevision;
     state.actionRevision += 1;
     const environmentId = getEnvironmentId();
     const environmentChanged = state.environmentId !== environmentId;
     if (environmentChanged) {
+      onEnvironmentChanged();
       state.environmentId = environmentId;
       state.status = null;
+      state.selectedProfileId = "";
+      state.removingProfileId = "";
+      state.profileLabel = "";
       state.models = [];
       state.discoverySupported = false;
     }
     state.busy = "status";
     clearFeedback();
-    render({ preserveInputs: !environmentChanged });
+    const preserveInputs = !environmentChanged && options.preserveInputs !== false;
+    render({ preserveInputs });
     try {
       const payload = await loadStatus(environmentId);
       if (
@@ -51,7 +72,12 @@ export function createLongTermMemorySetup({
       ) {
         return false;
       }
+      const hadStatus = Boolean(state.status);
       state.status = payload.status || null;
+      if (!preserveInputs || !hadStatus) {
+        state.selectedProfileId = state.status?.profileId || "";
+        state.profileLabel = selectedEmbeddingProfile(state)?.label || "";
+      }
       return true;
     } catch (error) {
       if (
@@ -68,7 +94,7 @@ export function createLongTermMemorySetup({
         environmentId === getEnvironmentId()
       ) {
         state.busy = "";
-        render();
+        render({ preserveInputs });
       }
     }
   }
@@ -93,6 +119,15 @@ export function createLongTermMemorySetup({
   }
 
   async function enable() {
+    if (state.busy) return;
+    if (saveProfile && !selectedEmbeddingProfile(state)) {
+      showError("Save the profile before testing and enabling memory.");
+      return;
+    }
+    if (hasUnavailableSelectedEmbeddingProfile(state)) {
+      showError("This saved profile's provider is unavailable. Choose an available profile or connection.");
+      return;
+    }
     const providerId = selectedProviderId();
     const model = textOf(
       state.root?.querySelector("[data-memory-model]")?.value,
@@ -111,18 +146,50 @@ export function createLongTermMemorySetup({
             providerId,
             model,
             emitClientEvents,
+            ...(matchingSelectedEmbeddingProfile(state, providerId, model)
+              ? { profileId: state.selectedProfileId }
+              : {}),
           },
           environmentId,
         ),
       (payload) => {
         state.status = payload.status || null;
+        state.selectedProfileId = state.status?.profileId || state.selectedProfileId;
         state.message =
-          "Embedding probe passed. Memory is enabled; restart ABot to apply it.";
+          "Connection test passed. Memory configuration saved. Apply the configuration to use it.";
         recordResult("Long-term memory enabled", payload);
       },
     );
   }
 
+  async function saveEmbeddingProfile() {
+    if (!saveProfile || state.busy || selectedEmbeddingProfile(state)) return;
+    if (hasUnavailableSelectedEmbeddingProfile(state)) {
+      showError("This saved profile's provider is unavailable. Choose an available profile or connection.");
+      return;
+    }
+    const providerId = selectedProviderId();
+    const model = currentModelValue();
+    const label = state.profileLabel.trim();
+    if (!providerId || !model || !label) {
+      showError("Choose a provider, enter a model ID and give the profile a name.");
+      return;
+    }
+    await runRuntimeMutation(
+      "save-profile",
+      (environmentId) => saveProfile({ providerId, model, label }, environmentId),
+      (payload) => {
+        state.status = payload.status || null;
+        state.selectedProfileId = payload.profileId || "";
+        state.profileLabel = selectedEmbeddingProfile(state)?.label || label;
+        state.message = "Embedding profile saved. The active memory configuration has not changed.";
+        recordControlEvent({
+          type: "control", name: "Embedding profile saved", tone: "done", summary: label,
+        });
+      },
+    );
+  }
+
   async function disable() {
     await runRuntimeMutation(
       "disable",
@@ -135,6 +202,19 @@ export function createLongTermMemorySetup({
     );
   }
 
+  async function addConnection() {
+    if (state.busy || !onAddConnection) return;
+    try {
+      await onAddConnection({
+        emitClientEvents:
+          state.root?.querySelector("[data-memory-events]")?.checked === true,
+        ...(state.status?.profileId ? { profileId: state.status.profileId } : {}),
+      });
+    } catch {
+      showError("Embedding connection setup could not be opened. Try again.");
+    }
+  }
+
   async function runRuntimeMutation(name, request, applyResult) {
     if (!beginRuntimeMutation()) {
       showError(
@@ -198,67 +278,73 @@ export function createLongTermMemorySetup({
   function render(options = {}) {
     if (!state.root) return;
     const status = state.status || {};
-    const providers = Array.isArray(status.providers) ? status.providers : [];
+    const profile = selectedEmbeddingProfile(state);
     const preserveInputs = options.preserveInputs !== false;
-    const selectedProvider =
-      (preserveInputs ? selectedProviderId() : "") ||
-      status.providerId ||
-      providers[0]?.id ||
-      "";
-    const selectedModel =
-      (preserveInputs ? currentModelValue() : "") || status.model || "";
-    const enabled = status.enabled === true;
-    state.root.innerHTML = `
-      <section class="memory-setup-card" aria-busy="${state.busy ? "true" : "false"}">
-        <div class="memory-setup-heading">
-          <div>
-            <p class="eyebrow">passive memory</p>
-            <h4>Long-term memory</h4>
-            <p>Retrieve relevant memories across sessions while keeping storage and policy in the Runtime core.</p>
-          </div>
-          <span class="memory-status ${enabled ? "enabled" : "disabled"}">${enabled ? "Enabled" : "Disabled"}</span>
-        </div>
-        <div class="memory-setup-fields">
-          <label>
-            <span>Embedding provider</span>
-            <select data-memory-provider ${state.busy ? "disabled" : ""}>
-              ${providerOptions(providers, selectedProvider)}
-            </select>
-          </label>
-          <label>
-            <span>Embedding model</span>
-            <input data-memory-model list="memoryEmbeddingModels" value="${escapeAttribute(selectedModel)}" placeholder="Enter a provider model ID" ${state.busy ? "disabled" : ""} />
-            <datalist id="memoryEmbeddingModels">${state.models
-              .map(
-                (model) =>
-                  `<option value="${escapeAttribute(textOf(model))}"></option>`,
-              )
-              .join("")}</datalist>
-          </label>
-          <label class="memory-events-toggle">
-            <input data-memory-events type="checkbox" ${status.emitClientEvents === true ? "checked" : ""} ${state.busy ? "disabled" : ""} />
-            <span>Show bounded memory lifecycle events to clients</span>
-          </label>
-        </div>
-        <div class="memory-setup-actions">
-          <button type="button" data-memory-action="discover" ${state.busy ? "disabled" : ""}>Discover models</button>
-          <button type="button" data-memory-action="enable" ${state.busy ? "disabled" : ""}>Probe and enable</button>
-          <button type="button" data-memory-action="disable" ${!enabled || state.busy ? "disabled" : ""}>Disable</button>
-        </div>
-        ${feedbackMarkup()}
-        <p class="memory-setup-note">ABot never chooses or installs an embedding model. Configuration is written only after a real probe succeeds.</p>
-      </section>
-    `;
+    const defaultProvider = profile?.providerId || status.providerId || status.providers?.[0]?.id || "";
+    const defaultModel = profile?.model || (saveProfile ? "" : status.model || "");
+    const selectedProvider = preserveInputs && !profile
+      ? state.root.querySelector("[data-memory-provider]")?.value ?? defaultProvider
+      : defaultProvider;
+    const selectedModel = preserveInputs && !profile
+      ? state.root.querySelector("[data-memory-model]")?.value ?? defaultModel
+      : defaultModel;
+    const emitClientEvents = preserveInputs
+      ? state.root.querySelector("[data-memory-events]")?.checked ?? status.emitClientEvents === true
+      : status.emitClientEvents === true;
+    state.root.innerHTML = renderMemorySetup({
+      state, selectedProvider, selectedModel, emitClientEvents,
+      canSave: Boolean(saveProfile), canRemove: Boolean(removeProfile),
+      canAddConnection: Boolean(onAddConnection),
+    });
+    bindSavedEmbeddingProfiles({
+      state,
+      onSelected: () => {
+        state.models = [];
+        clearFeedback();
+        render({ preserveInputs: false });
+      },
+      onChange: render,
+      onRemove: removeEmbeddingProfile,
+    });
     bindActions();
   }
 
+  async function removeEmbeddingProfile(profileId) {
+    if (!removeProfile || state.busy) return;
+    if (isConfiguredEmbeddingProfile(state, profileId)) {
+      showError("Choose another memory profile before removing this one.");
+      return;
+    }
+    const profile = savedEmbeddingProfiles(state.status).find((entry) => entry.id === profileId);
+    if (!profile || state.removingProfileId !== profileId) return;
+    await runRuntimeMutation(
+      "remove-profile",
+      (environmentId) => removeProfile({ profileId }, environmentId),
+      (payload) => {
+        state.status = payload.status || null;
+        state.removingProfileId = "";
+        if (state.selectedProfileId === profileId) {
+          state.selectedProfileId = state.status?.profileId || "";
+          state.profileLabel = selectedEmbeddingProfile(state)?.label || "";
+          render({ preserveInputs: false });
+        }
+        state.message = "Profile removed. Stored memories and connections are unchanged.";
+        recordControlEvent({
+          type: "control", name: "Embedding profile removed", tone: "done", summary: profile.label,
+        });
+      },
+    );
+  }
+
   function bindActions() {
     state.root.querySelectorAll("[data-memory-action]").forEach((button) => {
       button.addEventListener("click", () => {
         const action = button.dataset.memoryAction;
         if (action === "discover") void discover();
         else if (action === "enable") void enable();
+        else if (action === "save-profile") void saveEmbeddingProfile();
         else if (action === "disable") void disable();
+        else if (action === "add-connection") void addConnection();
       });
     });
   }
@@ -294,15 +380,6 @@ export function createLongTermMemorySetup({
       : "The provider returned no installed models.";
   }
 
-  function feedbackMarkup() {
-    if (state.error) {
-      return `<p class="memory-setup-feedback error-text" role="alert">${escapeHtml(state.error)}</p>`;
-    }
-    return state.message
-      ? `<p class="memory-setup-feedback" role="status">${escapeHtml(state.message)}</p>`
-      : "";
-  }
-
   function recordResult(name, payload) {
     recordControlEvent({
       type: "control",
@@ -317,18 +394,6 @@ export function createLongTermMemorySetup({
   return { load, mount };
 }
 
-function providerOptions(providers, selectedProvider) {
-  if (providers.length === 0) {
-    return '<option value="">No configured providers</option>';
-  }
-  return providers
-    .map((provider) => {
-      const selected = provider.id === selectedProvider ? "selected" : "";
-      return `<option value="${escapeAttribute(provider.id)}" ${selected}>${escapeHtml(provider.id)} · ${escapeHtml(provider.type)}</option>`;
-    })
-    .join("");
-}
-
 function errorMessage(error) {
   return error instanceof Error ? error.message : String(error);
 }

package/dist/src/web-ui/app/components/model-setup/rendering.js

@@ -34,6 +34,7 @@ export function renderModelProviderChoices(state) {
     description: `${provider.id} · ${provider.type} · existing connection`,
   }));
   providers.push(
+    { id: "new:llamacpp", label: "New llama.cpp connection", description: "A separately running server with token reasoning controls" },
     {
       id: "new:openai",
       label: "New OpenAI connection",
@@ -50,9 +51,9 @@ export function renderModelProviderChoices(state) {
 
 export function renderModelFields(state) {
   const provider = selectedModelProvider(state);
-  const credentialConfigured = !requiresModelCredential(state);
+  const credentialConfigured = provider?.credentialConfigured === true || state.credentialSavedFor === (provider?.id || state.newProviderId);
   return `${!provider ? renderConnectionField({ field: "connection-id", label: "Connection ID", value: state.newProviderId, idPrefix: MODEL_SETUP_ID, help: "A unique name for this provider connection." }) : `<p class="runtime-setup-feedback">Using ${escapeHtml(provider.label || provider.id)} · ${escapeHtml(provider.id)}</p>`}
-    ${renderConnectionFields({ providers: [{ id: state.choice, credentialConfigured }], provider: state.choice, providerType: modelProviderType(state), existingProvider: Boolean(provider), allowCredentialReplacement: false, modelId: state.model, contextWindowTokens: state.contextWindowTokens, baseUrl: state.baseUrl, idPrefix: MODEL_SETUP_ID })}
+    ${renderConnectionFields({ ...state, providers: [{ id: state.choice, credentialConfigured, requiresApiKey: requiresModelCredential(state) }], provider: state.choice, providerType: modelProviderType(state), existingProvider: Boolean(provider), allowCredentialReplacement: false, modelId: state.model, contextWindowTokens: state.contextWindowTokens, baseUrl: state.baseUrl, idPrefix: MODEL_SETUP_ID })}
     ${renderConnectionField({ field: "profile-id", label: "Model profile ID", value: state.profileId, idPrefix: MODEL_SETUP_ID, placeholder: "Suggested from the model ID", help: "A unique name for this model in ABot. Existing model defaults will stay the same." })}`;
 }
 

package/dist/src/web-ui/app/components/model-setup/validation.js

@@ -40,7 +40,7 @@ function validIdentifier(value, provider) {
 
 export function validateModelDraft(state) {
   const provider = selectedModelProvider(state);
-  if (!provider && !["new:openai", "new:ollama"].includes(state.choice))
+  if (!provider && !["new:openai", "new:ollama", "new:llamacpp"].includes(state.choice))
     return { valid: false, field: "provider", message: "Choose a provider." };
   if (!provider && !validIdentifier(state.newProviderId, true))
     return {
@@ -66,6 +66,7 @@ export function validateModelDraft(state) {
       message: "Use a model ID of up to 256 characters.",
     };
   const connection = validateConnectionFields({
+    ...state,
     modelId: state.model,
     contextWindowTokens: state.contextWindowTokens,
     providerType: modelProviderType(state),
@@ -94,7 +95,7 @@ export function requiresModelCredential(state) {
   const configured =
     provider?.credentialConfigured === true ||
     state.credentialSavedFor === (provider?.id || state.newProviderId);
-  return modelProviderType(state) === "openai" && !configured;
+  return (modelProviderType(state) === "openai" || provider?.requiresApiKey === true) && !configured;
 }
 
 export function requiresModelSaveCredential(state) {
@@ -110,6 +111,7 @@ export function modelSetupInput(state, validated, apiKey) {
         newProvider: {
           id: state.newProviderId,
           type: modelProviderType(state),
+          ...(modelProviderType(state) === "llamacpp" && (apiKey || state.credentialSavedFor === state.newProviderId) ? { useApiKey: true } : {}),
           ...(validated.input.baseUrl
             ? { baseUrl: validated.input.baseUrl }
             : {}),
@@ -119,6 +121,8 @@ export function modelSetupInput(state, validated, apiKey) {
     profileId: state.profileId,
     model: validated.input.model,
     contextWindowTokens: validated.input.contextWindowTokens,
+    ...(validated.input.supportsThinking !== undefined ? { supportsThinking: validated.input.supportsThinking } : {}),
+    ...(validated.input.reasoningBudget ? { reasoningBudget: validated.input.reasoningBudget } : {}),
     ...connection,
     ...(apiKey ? { apiKey } : {}),
   };

package/dist/src/web-ui/app/components/model-setup/wizard.d.ts

@@ -16,6 +16,7 @@ export type ModelSetupProvider = Readonly<{
 export interface ModelSetupWizardDependencies {
   root: HTMLElement;
   getEnvironmentId?: () => string;
+  inspectConnection?: (input: Record<string, unknown>) => Promise<{ connection: { models: readonly string[] } }>;
   loadSetup: () => Promise<{
     providers: readonly ModelSetupProvider[];
     profileIds: readonly string[];