@abot-ai/runtime 1.8.1 → 2.0.0

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

@@ -1,3 +1,6 @@
+import { createConnectionInspection } from "../runtime-setup/connection-inspection.js";
+import { setupReasoningState, updateSetupReasoningField } from "../runtime-setup/reasoning-fields.js";
+import { defaultSetupProviderAddress } from "../runtime-setup/validation.js";
 import { textOf } from "../../lib/text-format.js";
 import {
   clearConnectionSecret,
@@ -34,6 +37,7 @@ export function createModelSetupWizard({
   root,
   getEnvironmentId = () => "",
   loadSetup,
+  inspectConnection,
   saveModel,
   applySetup,
   beginRuntimeMutation = () => true,
@@ -53,6 +57,10 @@ export function createModelSetupWizard({
   let modelForm = null;
   let formChoice = "";
   let requestedProviderId = "";
+  const connectionInspection = createConnectionInspection({
+    state, container: dialog, inspectConnection, getEnvironmentId,
+    onChange: () => { formChoice = ""; render(); },
+  });
   const beginOperation = () => ({
     generation: ++generation,
     environment: getEnvironmentId(),
@@ -66,9 +74,11 @@ export function createModelSetupWizard({
   };
 
   function reset() {
+    connectionInspection.reset();
     clearSecret();
     viewState.reset();
     Object.assign(state, {
+      ...setupReasoningState(),
       providers: [],
       profileIds: [],
       choice: "",
@@ -94,7 +104,7 @@ export function createModelSetupWizard({
   }
 
   function close(completed = false) {
-    if (state.busy) return false;
+    if (state.busy || state.checkingConnection) return false;
     const wasOpen = dialog.open;
     generation += 1;
     clearSecret();
@@ -264,7 +274,7 @@ export function createModelSetupWizard({
   }
 
   function next() {
-    if (state.busy || !state.loaded) return;
+    if (state.busy || state.checkingConnection || !state.loaded) return;
     if (state.step === 0 && state.choice) {
       state.step = 1;
       state.error = "";
@@ -284,7 +294,7 @@ export function createModelSetupWizard({
   }
 
   function input(event) {
-    if (state.busy || state.saved || state.step !== 1) return;
+    if (state.busy || state.checkingConnection || state.saved || state.step !== 1) return;
     const field = event.target.dataset.runtimeSetupField;
     if (field === "api-key") {
       event.target.removeAttribute("aria-invalid");
@@ -310,7 +320,14 @@ export function createModelSetupWizard({
       state.profileEdited = true;
     }
     if (field === "connection-id") state.newProviderId = value;
-    if (field === "ollama-base-url") state.baseUrl = value;
+    if (["ollama-base-url", "llamacpp-base-url"].includes(field)) state.baseUrl = value;
+    if (updateSetupReasoningField(state, field, event.target.type === "checkbox" ? event.target.checked : value)) {
+      const apiKey = readConnectionSecret(modelForm);
+      formChoice = "";
+      render();
+      const keyInput = modelForm.querySelector('[data-runtime-setup-field="api-key"]');
+      if (keyInput) keyInput.value = apiKey;
+    }
     const key = modelForm.querySelector('[data-runtime-setup-field="api-key"]');
     if (key) key.required = requiresModelSaveCredential(state);
     event.target.removeAttribute("aria-invalid");
@@ -320,6 +337,7 @@ export function createModelSetupWizard({
   dialog.addEventListener("change", (event) => {
     if (
       state.busy ||
+      state.checkingConnection ||
       state.saved ||
       state.step !== 0 ||
       event.target.dataset.runtimeSetupField !== "provider"
@@ -333,6 +351,10 @@ export function createModelSetupWizard({
     const resetSuggestedProfile = providerChanged && !state.profileEdited;
     if (resetSuggestedProfile) state.profileId = "";
     state.choice = event.target.value;
+    if (providerChanged) {
+      state.baseUrl = defaultSetupProviderAddress(state.choice.replace("new:", ""));
+      Object.assign(state, setupReasoningState());
+    }
     state.newProviderId = selectedModelProvider(state)
       ? ""
       : suggestIdentifier(
@@ -353,7 +375,8 @@ export function createModelSetupWizard({
   dialog.addEventListener("click", (event) => {
     const action = event.target.closest?.("[data-model-action]")?.dataset
       .modelAction;
-    if (!action || state.busy) return;
+    if (!action || state.busy || state.checkingConnection) return;
+    if (action === "inspect-model-connection") { void connectionInspection.check(); return; }
     if (action === "cancel") close();
     if (action === "reload") void load();
     if (action === "next") next();

package/dist/src/web-ui/app/components/onboarding-workspace-access.js

@@ -1,6 +1,6 @@
 const navigation = Object.freeze({
   home: "homeWorkspaceButton", chat: "chatWorkspaceButton", learning: "learningWorkspaceButton",
-  memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", automations: "automationsWorkspaceButton", models: "modelsWorkspaceButton",
+  skills: "skillsWorkspaceButton", memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", automations: "automationsWorkspaceButton", models: "modelsWorkspaceButton",
   plugins: "pluginsWorkspaceButton", notifications: "notificationsWorkspaceButton", config: "configWorkspaceButton",
 });
 

package/dist/src/web-ui/app/components/passive-learning/memory.js

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../confirmation-dialog.js";
 import { renderCollectionAccess } from "./collection-access.js";
 import { renderAgent } from "./agent-view.js";
 import { renderComputerUpdateNotice } from "./computer-update-notice.js";
@@ -27,7 +28,7 @@ const defaultTimeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone |
 
 export function createPassiveLearningMemory({
   actions, showActivityMemories, openComputerAccess,
-  confirmDelete = (message) => window.confirm(message),
+  confirmDelete = (message) => confirmDialog(message, { title: "Delete pending activity", confirmLabel: "Delete activity", tone: "danger" }),
 }) {
   let root = null;
   let settings;
@@ -89,7 +90,7 @@ export function createPassiveLearningMemory({
     }
     const clearPending = event.target.closest("button[data-learning-clear-pending]");
     if (clearPending && root.contains(clearPending)) {
-      deletePending();
+      void deletePending();
       return;
     }
     const setupButton = event.target.closest("button[data-learning-open-setup]") ??
@@ -116,12 +117,18 @@ export function createPassiveLearningMemory({
       showActivityMemories();
   }
 
-  function deletePending() {
+  async function deletePending() {
     const snapshot = actions.snapshot();
     if (!snapshot.status || snapshot.saving) return;
     if (!hasUnprocessedLearningActivity(snapshot.status)) return;
-    if (!confirmDelete("Delete all pending activity, including any review in progress? Saved insights are kept. This cannot be undone.")) return;
-    void actions.clearPending();
+    const environmentId = snapshot.environmentId;
+    const targetRoot = root;
+    const status = JSON.stringify(snapshot.status);
+    if (!await confirmDelete("Delete all pending activity, including any review in progress? Saved insights are kept. This cannot be undone.")) return;
+    const current = actions.snapshot();
+    if (environmentId !== current.environmentId || root !== targetRoot) return;
+    if (current.saving || JSON.stringify(current.status) !== status) return;
+    await actions.clearPending();
   }
 
 

package/dist/src/web-ui/app/components/plugins/manager.js

@@ -68,9 +68,23 @@ export function createPluginManager({
     render,
   });
 
+  function capturePluginRemovalTarget(pluginId) {
+    const plugin = state.snapshot?.plugins?.find((entry) => entry.id === pluginId);
+    return { generation: state.mutationGeneration, plugin: JSON.stringify(plugin) };
+  }
+  function canRemovePluginTarget(pluginId, target) {
+    if (state.busy || installation.state.busy) return false;
+    if (state.mutationGeneration !== target.generation) return false;
+    const plugin = state.snapshot?.plugins?.find((entry) => entry.id === pluginId);
+    if (!plugin?.removable) return false;
+    return JSON.stringify(plugin) === target.plugin;
+  }
+
   const removal = createPluginRemoval({
     removePlugin,
     confirmRemoval,
+    captureRemovalTarget: capturePluginRemovalTarget,
+    canRemoveTarget: canRemovePluginTarget,
     getEnvironmentId,
     beginRuntimeMutation,
     endRuntimeMutation,

package/dist/src/web-ui/app/components/plugins/removal.js

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../confirmation-dialog.js";
 function isDefinitiveRemovalRejection(error) {
   if (!(error.status >= 400 && error.status < 500)) return false;
   return [
@@ -29,7 +30,9 @@ export function createPluginRemoval({
   onConfigurationSettled = () => true,
   onSnapshot,
   render,
-  confirmRemoval = (message) => window.confirm(message),
+  captureRemovalTarget = () => null,
+  canRemoveTarget = () => true,
+  confirmRemoval = (message) => confirmDialog(message, { title: "Remove plugin", confirmLabel: "Remove plugin", tone: "danger" }),
 }) {
   const state = { busy: false, message: "", error: "" };
   let environment = getEnvironmentId();
@@ -43,12 +46,17 @@ export function createPluginRemoval({
   async function remove(pluginId) {
     resetEnvironment();
     if (state.busy || !removePlugin) return false;
+    const selectedEnvironment = getEnvironmentId();
+    const confirmationGeneration = generation;
+    const target = captureRemovalTarget(pluginId);
     if (
-      !confirmRemoval(
+      !await confirmRemoval(
         `Remove ${pluginId}? This disables the plugin, applies the change when Runtime is idle, and deletes its installed folder. If Runtime is busy, try Remove again after it finishes.`,
       )
     )
       return false;
+    if (selectedEnvironment !== getEnvironmentId() || confirmationGeneration !== generation) return false;
+    if (state.busy || !canRemoveTarget(pluginId, target)) return false;
     if (!beginRuntimeMutation("plugin removal")) return false;
     const request = ++generation;
     const selected = environment;

package/dist/src/web-ui/app/components/project-group-actions.js

@@ -0,0 +1,35 @@
+export function createProjectGroupActions({ group, disabled, onDeleteProject, documentRoot }) {
+  const actions = documentRoot.createElement("div");
+  actions.className = "session-actions project-group-actions";
+  actions.setAttribute("aria-label", "Project settings");
+  const button = documentRoot.createElement("button");
+  button.className = "session-menu-button";
+  button.type = "button";
+  button.disabled = disabled;
+  button.title = "Settings for " + group.name;
+  button.setAttribute("aria-label", button.title);
+  button.setAttribute("aria-haspopup", "menu");
+  button.setAttribute("aria-expanded", "false");
+  const menuId = "project-actions-" + encodeURIComponent(group.id);
+  button.setAttribute("aria-controls", menuId);
+  button.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 2h4l.6 3.1 1.8 1 3-.9 2 3.5-2.4 2v2.6l2.4 2-2 3.5-3-.9-1.8 1L14 22h-4l-.6-3.1-1.8-1-3 .9-2-3.5 2.4-2v-2.6l-2.4-2 2-3.5 3 .9 1.8-1Z"/><circle cx="12" cy="12" r="3.4"/></svg>';
+  const menu = documentRoot.createElement("div");
+  menu.id = menuId;
+  menu.className = "session-menu";
+  menu.setAttribute("role", "menu");
+  menu.hidden = true;
+  const remove = documentRoot.createElement("button");
+  remove.className = "session-action delete-action project-delete-action";
+  remove.type = "button";
+  remove.disabled = disabled;
+  remove.setAttribute("role", "menuitem");
+  remove.tabIndex = -1;
+  remove.textContent = "Delete project";
+  remove.addEventListener("click", () => {
+    button.focus();
+    void onDeleteProject(group.id, group.name);
+  });
+  menu.appendChild(remove);
+  actions.append(button, menu);
+  return actions;
+}

package/dist/src/web-ui/app/components/project-session-groups.js

@@ -1,6 +1,8 @@
+import { projectSessionDisplayGroups } from "../lib/session-project-groups.js";
 import { escapeHtml } from "../lib/text-format.js";
 import { matchesSessionQuery } from "../ui-behavior.js";
 import { renderProjectSessionPreview } from "./project-session-preview.js";
+import { createProjectGroupActions } from "./project-group-actions.js";
 
 function shouldExpandProjectGroup(projectId, query, collapsedProjectIds) {
   if (String(query ?? "").trim()) return true;
@@ -9,7 +11,7 @@ function shouldExpandProjectGroup(projectId, query, collapsedProjectIds) {
 
 function createProjectGroup({
   group, query, collapsedProjectIds, busyProjectId,
-  onToggleGroup, onNewConversation, documentRoot,
+  onToggleGroup, onNewConversation, onDeleteProject, documentRoot,
 }) {
   const section = documentRoot.createElement("section");
   section.className = "project-session-group";
@@ -29,15 +31,12 @@ function createProjectGroup({
   title.dir = "auto";
   title.textContent = group.name;
   toggle.appendChild(title);
-  const chevron = documentRoot.createElement("span");
-  chevron.className = "project-group-chevron";
-  chevron.setAttribute("aria-hidden", "true");
-  toggle.appendChild(chevron);
   toggle.addEventListener("click", () => {
     content.hidden = !content.hidden;
     toggle.setAttribute("aria-expanded", String(!content.hidden));
     onToggleGroup(group.id, content.hidden);
   });
+  header.appendChild(toggle);
   const create = documentRoot.createElement("button");
   create.type = "button";
   create.className = "project-group-new";
@@ -46,7 +45,12 @@ function createProjectGroup({
   create.disabled = Boolean(busyProjectId);
   create.textContent = busyProjectId === group.id ? "…" : "+";
   create.addEventListener("click", () => void onNewConversation(group.id));
-  header.append(toggle, create);
+  const controls = documentRoot.createElement("div");
+  controls.className = "project-group-controls";
+  controls.append(create, createProjectGroupActions({
+    group, disabled: Boolean(busyProjectId), onDeleteProject, documentRoot,
+  }));
+  header.appendChild(controls);
   section.append(header, content);
   return { section, content };
 }
@@ -54,13 +58,16 @@ function createProjectGroup({
 export function renderProjectSessionGroups({
   root,
   projects,
+  deletedProjectIds = [],
   sessions,
   createSessionItem,
+  newProjectButton,
   query,
   loading,
   error,
   busyProjectId,
   onNewConversation,
+  onDeleteProject = () => {},
   onRetry,
   collapsedProjectIds = new Set(),
   expandedProjectSessionIds = new Set(),
@@ -68,31 +75,10 @@ export function renderProjectSessionGroups({
   onToggleProjectSessions = () => {},
   documentRoot = document,
 }) {
-  const groups = new Map(
-    projects.map((project) => [project.id, { ...project, sessions: [] }]),
-  );
-  const ordinary = [];
-  for (const session of sessions) {
-    const projectId = session.projectId || session.project?.id;
-    if (!projectId) {
-      ordinary.push(session);
-      continue;
-    }
-    const group = groups.get(projectId) ?? {
-      id: projectId,
-      name: session.project?.name || "Project",
-      directory: session.project?.directory || "",
-      sessions: [],
-    };
-    group.sessions.push(session);
-    groups.set(projectId, group);
-  }
+  const { groups, ordinary } = projectSessionDisplayGroups(projects, sessions, deletedProjectIds);
   let index = 0;
-  const heading = documentRoot.createElement("div");
-  heading.className = "project-section-heading";
-  heading.textContent = "Projects";
-  root.appendChild(heading);
-  for (const group of groups.values()) {
+  if (newProjectButton) root.appendChild(newProjectButton);
+  for (const group of groups) {
     const matchesProject = matchesSessionQuery(
       [group.name, group.directory],
       query,
@@ -100,7 +86,7 @@ export function renderProjectSessionGroups({
     if (!matchesProject && group.sessions.length === 0) continue;
     const { section, content } = createProjectGroup({
       group, query, collapsedProjectIds, busyProjectId,
-      onToggleGroup, onNewConversation, documentRoot,
+      onToggleGroup, onNewConversation, onDeleteProject, documentRoot,
     });
     renderProjectSessionPreview({
       content, group, query, documentRoot,

package/dist/src/web-ui/app/components/runtime-setup/commands.js

@@ -22,7 +22,7 @@ export function buildRuntimeSetupCommands(
   const packaged = setupCommandMode === "package";
   const initPrefix = packaged ? "npx abot init" : "npm run init --";
   const init = `${initPrefix} --provider ${providerArgument} --model ${modelArgument}${
-    selectedProvider === "ollama" ? ` --base-url ${baseUrlArgument}` : ""
+    ["ollama", "llamacpp"].includes(selectedProvider) ? ` --base-url ${baseUrlArgument}` : ""
   }`;
   return {
     "ollama-pull": `ollama pull ${modelArgument}`,

package/dist/src/web-ui/app/components/runtime-setup/connection-form.d.ts

@@ -0,0 +1,15 @@
+import type { SetupReasoningState } from "./reasoning-fields.js";
+type ConnectionState = SetupReasoningState & {
+  providers?: readonly { id: string; label?: string; description?: string; credentialConfigured?: boolean; requiresApiKey?: boolean }[];
+  modelId?: string;
+  contextWindowTokens?: string | number;
+  baseUrl?: string;
+  [key: string]: unknown;
+};
+export declare function renderProviderChoices(state: ConnectionState): string;
+export declare function renderConnectionField(options: Record<string, unknown>): string;
+export declare function renderConnectionFields(state: ConnectionState): string;
+export declare function clearConnectionSecret(container: HTMLElement): void;
+export declare function readConnectionSecret(container: HTMLElement): string;
+export declare function validateConnectionFields(state: ConnectionState): { valid: boolean; input?: Record<string, unknown>; field?: string; message?: string };
+export declare function showConnectionFieldError(container: HTMLElement, field: string, messageId?: string, idPrefix?: string): void;

package/dist/src/web-ui/app/components/runtime-setup/connection-form.js

@@ -1,3 +1,5 @@
+import { renderConnectionInspection } from "./connection-inspection.js";
+import { renderSetupReasoningFields, validateSetupReasoningFields } from "./reasoning-fields.js";
 import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
 import { validateContextWindowTokens } from "./context-window.js";
 import { canEditSetupConnection } from "./connection-state.js";
@@ -11,7 +13,7 @@ export function renderProviderChoices(state) {
     .map(
       (provider) => `<label class="runtime-provider-option">
     <input type="radio" name="runtimeSetupProvider" value="${escapeAttribute(provider.id)}" data-runtime-setup-field="provider" ${state.provider === provider.id ? "checked" : ""} />
-    <span><strong>${escapeHtml(provider.label)}</strong><small>${escapeHtml(provider.description || (provider.id === "ollama" ? "A model on your computer or server" : "A hosted model using your API key"))}</small></span>
+    <span><strong>${escapeHtml(provider.label)}</strong><small>${escapeHtml(provider.description || (provider.id !== "openai" ? "A model on your computer or server" : "A hosted model using your API key"))}</small></span>
   </label>`,
     )
     .join("");
@@ -66,10 +68,28 @@ export function renderConnectionFields(state) {
       error: state.contextWindowFeedback?.message,
       step: "1",
       readonly: !canEditSetupConnection(state),
-      help: "Use a value supported by your model. Larger windows need more memory with Ollama. You can change this later in Models.",
+      help: "Use a value supported by your model. Larger windows need more memory on local servers. You can change this later in Models.",
     });
+  const reasoning = renderSetupReasoningFields(state, !canEditSetupConnection(state));
+  if (providerType === "llamacpp") {
+    const address = state.existingProvider ? "" : renderConnectionField({
+      idPrefix, field: "llamacpp-base-url", label: "llama.cpp address", type: "url",
+      value: state.baseUrl, readonly: !canEditSetupConnection(state),
+      placeholder: "http://127.0.0.1:8080",
+      help: "Start llama-server separately. Use the origin reachable from the computer running ABot.",
+    });
+    const preservesExistingNoKeyConnection = state.existingProvider && selectedProvider?.requiresApiKey !== true;
+    const keepsConfiguredCredential = credentialConfigured && state.allowCredentialReplacement === false;
+    const key = preservesExistingNoKeyConnection || keepsConfiguredCredential ? "" : renderConnectionField({
+      idPrefix, field: "api-key", label: "API key (if your server requires one)", type: "password",
+      required: selectedProvider?.requiresApiKey === true && !credentialConfigured,
+      placeholder: credentialConfigured ? "Leave blank to keep your saved key" : "Optional server API key",
+      help: "Saved privately on the ABot server. Leave empty for a server without authentication.",
+    });
+    return model + address + key + renderConnectionInspection(state) + reasoning;
+  }
   if (providerType === "ollama") {
-    if (state.existingProvider) return model;
+    if (state.existingProvider) return model + reasoning;
     return (
       model +
       renderConnectionField({
@@ -81,11 +101,11 @@ export function renderConnectionFields(state) {
         readonly: !canEditSetupConnection(state),
         placeholder: "http://127.0.0.1:11434",
         help: "Use the address reachable from the computer running ABot.",
-      })
+      }) + reasoning
     );
   }
   if (credentialConfigured && state.allowCredentialReplacement === false)
-    return model;
+    return model + reasoning;
   return (
     model +
     renderConnectionField({
@@ -98,7 +118,7 @@ export function renderConnectionFields(state) {
         ? "Leave blank to keep your saved key"
         : "Enter your OpenAI API key",
       help: "Saved privately on the ABot server. Never stored in this browser.",
-    })
+    }) + reasoning
   );
 }
 
@@ -119,6 +139,7 @@ export function validateConnectionFields({
   providerType,
   baseUrl,
   existingProvider = false,
+  supportsThinking, reasoningBudgetMode, reasoningBudgetTokens,
 }) {
   const model = validateRuntimeSetupModelId(modelId);
   if (!model.valid)
@@ -126,17 +147,19 @@ export function validateConnectionFields({
   const context = validateContextWindowTokens(contextWindowTokens);
   if (!context.valid) return context;
   const input = { model: model.value, contextWindowTokens: context.value };
-  if (providerType === "ollama" && !existingProvider) {
+  if (["ollama", "llamacpp"].includes(providerType) && !existingProvider) {
     const address = validateRuntimeSetupBaseUrl(baseUrl);
     if (!address.valid)
       return {
         valid: false,
-        field: "ollama-base-url",
+        field: providerType + "-base-url",
         message: address.message,
       };
     input.baseUrl = address.value;
   }
-  return { valid: true, input };
+  const reasoning = validateSetupReasoningFields({ providerType, supportsThinking, reasoningBudgetMode, reasoningBudgetTokens });
+  if (!reasoning.valid) return reasoning;
+  return { valid: true, input: { ...input, ...reasoning.input } };
 }
 
 export function showConnectionFieldError(

package/dist/src/web-ui/app/components/runtime-setup/connection-input.js

@@ -0,0 +1,23 @@
+import { readConnectionSecret, validateConnectionFields } from "./connection-form.js";
+
+/** One connection submission, including private key read only at submission time. */
+export function runtimeSetupConnectionInput(state, container, fieldError) {
+  const result = validateConnectionFields({
+    ...state, modelId: state.modelId, providerType: state.provider,
+  });
+  if (!result.valid) {
+    fieldError(result.field, result.message);
+    return null;
+  }
+  const input = { provider: state.provider, ...result.input };
+  if (state.editableConnection?.revision)
+    input.connectionRevision = state.editableConnection.revision;
+  if (state.provider === "ollama") return input;
+  const apiKey = readConnectionSecret(container);
+  const provider = state.providers.find((entry) => entry.id === state.provider);
+  if (provider?.requiresApiKey === true && provider?.credentialConfigured !== true && !apiKey) {
+    fieldError("api-key", "Enter the API key for this connection.");
+    return null;
+  }
+  return apiKey ? { ...input, apiKey } : input;
+}

package/dist/src/web-ui/app/components/runtime-setup/connection-inspection.js

@@ -0,0 +1,57 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+
+export function renderConnectionInspection(state) {
+  return `<div class="runtime-setup-field"><button type="button" class="runtime-setup-secondary" data-runtime-setup-action="inspect-model-connection" data-model-action="inspect-model-connection" ${state.checkingConnection ? "disabled" : ""}>${state.checkingConnection ? "Checking…" : "Check connection"}</button>
+    <small role="status" data-connection-inspection-message>${escapeHtml(state.connectionInspectionMessage || "Reads server health and model IDs only. Does not generate a response or save settings.")}</small></div>`;
+}
+
+/** Metadata inspection has no authority to infer model capabilities or alter saved setup. */
+export function createConnectionInspection({ state, container, inspectConnection, onChange, getEnvironmentId = () => "" }) {
+  let generation = 0;
+  const identity = () => JSON.stringify([getEnvironmentId(), state.choice || state.provider, state.baseUrl]);
+  function updateInspectionFeedback() {
+    const button = container.querySelector('[data-runtime-setup-action="inspect-model-connection"]');
+    if (button) {
+      button.disabled = state.checkingConnection === true;
+      button.textContent = state.checkingConnection ? "Checking…" : "Check connection";
+    }
+    const message = container.querySelector("[data-connection-inspection-message]");
+    if (message) message.textContent = state.connectionInspectionMessage;
+  }
+  function reset() {
+    generation += 1;
+    state.checkingConnection = false;
+    state.connectionInspectionMessage = "";
+  }
+  async function check() {
+    if (!inspectConnection || state.checkingConnection) return;
+    const current = ++generation;
+    const target = identity();
+    const savedId = state.choice?.startsWith("existing:") ? state.choice.slice(9) : undefined;
+    const input = savedId
+      ? { providerId: savedId }
+      : { provider: "llamacpp", baseUrl: state.baseUrl };
+    const apiKey = container.querySelector('[data-runtime-setup-field="api-key"]')?.value?.trim() || "";
+    if (apiKey) input.apiKey = apiKey;
+    state.checkingConnection = true;
+    state.connectionInspectionMessage = "";
+    updateInspectionFeedback();
+    try {
+      const payload = await inspectConnection(input);
+      if (current !== generation || target !== identity()) return;
+      const models = payload?.connection?.models || [];
+      state.connectionInspectionMessage = `Server ready. Available models: ${models.join(", ") || "none reported"}. Thinking support and context capacity still require model configuration.`;
+    } catch {
+      if (current !== generation || target !== identity()) return;
+      state.connectionInspectionMessage = "Connection check failed. Check the server address, authentication and loaded model.";
+    } finally {
+      delete input.apiKey;
+      if (current === generation) {
+        state.checkingConnection = false;
+        updateInspectionFeedback();
+      }
+    }
+  }
+  return { check, reset };
+}

package/dist/src/web-ui/app/components/runtime-setup/connection-state.js

@@ -1,11 +1,16 @@
 import { textOf } from "../../lib/text-format.js";
-import { normalizeProvider } from "./validation.js";
+import { setupReasoningState, updateSetupReasoningField } from "./reasoning-fields.js";
+import { normalizeProvider, defaultSetupProviderAddress } from "./validation.js";
 import { readSetupContextWindowFeedback } from "./context-window-feedback.js";
 
 export function selectSetupProvider(state, value) {
   const provider = normalizeProvider(value);
   const providerChanged = state.provider !== provider;
-  if (providerChanged) state.modelId = "";
+  if (providerChanged) {
+    state.modelId = "";
+    state.baseUrl = defaultSetupProviderAddress(provider);
+    Object.assign(state, setupReasoningState());
+  }
   state.provider = provider;
 }
 
@@ -21,7 +26,14 @@ export function hasSetupConnectionChanges(state) {
   if (state.modelId.trim() !== saved.model) return true;
   if (Number(state.contextWindowTokens) !== saved.contextWindowTokens)
     return true;
-  if (state.provider !== "ollama") return false;
+  if (state.supportsThinking !== saved.supportsThinking) return true;
+  if (state.provider === "llamacpp") {
+    const reasoning = setupReasoningState(saved);
+    if (state.supportsThinking !== reasoning.supportsThinking) return true;
+    if (state.reasoningBudgetMode !== reasoning.reasoningBudgetMode) return true;
+    if (state.reasoningBudgetTokens !== reasoning.reasoningBudgetTokens) return true;
+  }
+  if (!["ollama", "llamacpp"].includes(state.provider)) return false;
   return state.baseUrl.trim().replace(/\/$/u, "") !== saved.baseUrl;
 }
 
@@ -54,12 +66,14 @@ export function updateSetupConnectionField(state, field, value) {
   if (!canEditSetupConnection(state)) return;
   if (field === "model-id") state.modelId = value;
   if (field === "context-window") state.contextWindowTokens = value;
-  if (field === "ollama-base-url") state.baseUrl = value;
+  if (["ollama-base-url", "llamacpp-base-url"].includes(field)) state.baseUrl = value;
+  return updateSetupReasoningField(state, field, value);
 }
 
 export function receiveSetupConnection(state, setup) {
   state.editableConnection = setup?.editableConnection || null;
   state.existingModel = setup?.existingModel || null;
+  Object.assign(state, setupReasoningState(state.existingModel || {}));
   state.contextWindowTokens = textOf(
     state.existingModel?.contextWindowTokens ??
       setup?.defaultContextWindowTokens,

package/dist/src/web-ui/app/components/runtime-setup/embedding-credential-status.js

@@ -12,6 +12,9 @@ function withProviderCredentialStatus(provider, catalog) {
   return {
     ...projected,
     credentialConfigured: matched.credentialConfigured === true,
+    ...(provider.type === "llamacpp"
+      ? { requiresApiKey: matched.requiresApiKey === true }
+      : {}),
   };
 }