@abot-ai/runtime 1.3.1 → 1.4.0

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

@@ -0,0 +1,107 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import {
+  renderProviderChoices,
+  renderConnectionField,
+} from "./connection-form.js";
+import { buildBridgeSetupCommands } from "./commands.js";
+import { renderWizardShell } from "./wizard-shell.js";
+
+const PROVIDERS = [
+  {
+    id: "ollama",
+    label: "Ollama",
+    description: "A model on your computer or server",
+  },
+  { id: "openai", label: "OpenAI", description: "A hosted model" },
+];
+
+function commandBlock(id, label, command) {
+  return `<div class="runtime-bridge-command"><div><span>${escapeHtml(label)}</span><button type="button" data-runtime-setup-action="copy" data-runtime-command="${id}" aria-describedby="runtimeBridgeCopy-${id}">Copy</button></div>
+    <pre><code>${escapeHtml(command)}</code></pre><small id="runtimeBridgeCopy-${id}" data-runtime-copy-status="${id}" aria-live="polite"></small></div>`;
+}
+
+function connectionMarkup(state) {
+  let content = renderProviderChoices({ ...state, providers: PROVIDERS });
+  content += renderConnectionField({
+    field: "model-id",
+    label: "Model ID",
+    value: state.modelId,
+    placeholder: "Exact model name",
+    help: "Enter the model name provided by your service.",
+  });
+  if (state.provider === "ollama")
+    content += renderConnectionField({
+      field: "ollama-base-url",
+      label: "Ollama address",
+      type: "url",
+      value: state.baseUrl,
+      help: "Use the address reachable from the computer running the runtime.",
+    });
+  return content;
+}
+
+function commandsMarkup(state, commandMode) {
+  const commands = buildBridgeSetupCommands(
+    state.provider,
+    state.modelId,
+    state.baseUrl,
+    commandMode,
+  );
+  let content =
+    '<p class="runtime-setup-feedback">Run these commands in the runtime project used by your Bridge. This page cannot run commands or restart services.</p>';
+  if (state.provider === "ollama")
+    content += commandBlock(
+      "ollama-pull",
+      "Ollama host · download the model",
+      commands["ollama-pull"],
+    );
+  content += commandBlock("setup", "Runtime host · initialize", commands.setup);
+  if (state.provider === "openai")
+    content +=
+      '<p class="runtime-setup-feedback">After initialization, set <code>OPENAI_API_KEY</code> in the runtime’s <code>.env</code> with your local editor or secret manager. Keep the key out of this page and terminal commands.</p>';
+  content +=
+    '<p class="runtime-setup-feedback">The initializer preserves existing files. Restart the runtime services and Bridge after changing configuration so they load the new settings.</p>';
+  if (commands["model-gateway"])
+    content += commandBlock(
+      "model-gateway",
+      "Restart the model gateway",
+      commands["model-gateway"],
+    );
+  content +=
+    '<p class="runtime-setup-feedback">Restart this Web UI using its original Bridge launch command or service configuration. Preserve <code>LLM_RUNTIME_WEB_BACKEND=bridge</code>, the configured Bridge URLs, and authentication settings.</p>';
+  return content;
+}
+
+export function renderBridgeSetup(state, availability, commandMode) {
+  const checking = availability.status === "checking";
+  let feedback = "";
+  if (state.error)
+    feedback = `<p class="runtime-setup-feedback error" role="alert">${escapeHtml(state.error)}</p>`;
+  else if (checking)
+    feedback =
+      '<p class="runtime-setup-feedback" role="status">Checking the model catalog…</p>';
+  else if (availability.status === "error")
+    feedback = `<p class="runtime-setup-feedback error" role="alert">Could not check the model catalog. ${escapeHtml(availability.message)}</p>`;
+  const disabled = checking ? "disabled" : "";
+  const check = `<button type="button" class="runtime-setup-action" data-runtime-setup-action="check" ${disabled}>${checking ? "Checking…" : "Check again"}</button>`;
+  const footer =
+    state.step === 0
+      ? `${check}<button type="submit" class="runtime-setup-action" ${checking || !state.provider ? "disabled" : ""}>Show commands</button>`
+      : `<button type="button" class="runtime-setup-secondary" data-runtime-setup-action="back" ${disabled}>Back</button>${check}`;
+  return renderWizardShell({
+    steps: ["Provider", "Commands"],
+    step: state.step,
+    title:
+      state.step === 0
+        ? "Connect the external runtime"
+        : "Finish setup on the runtime host",
+    description:
+      "This Web UI connects through a Bridge. Configure its runtime, then check model availability again.",
+    content:
+      (state.step === 0
+        ? connectionMarkup(state)
+        : commandsMarkup(state, commandMode)) + feedback,
+    footer,
+    busy: checking,
+  });
+}

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

@@ -0,0 +1,54 @@
+import {
+  DEFAULT_OLLAMA_BASE_URL,
+  normalizeProvider,
+  validateRuntimeSetupBaseUrl,
+  validateRuntimeSetupModelId,
+} from "./validation.js";
+
+export function buildRuntimeSetupCommands(
+  provider,
+  modelId,
+  ollamaBaseUrl = DEFAULT_OLLAMA_BASE_URL,
+  setupCommandMode = "source",
+) {
+  const selectedProvider = normalizeProvider(provider);
+  const validation = validateRuntimeSetupModelId(modelId);
+  const baseUrlValidation = validateRuntimeSetupBaseUrl(ollamaBaseUrl);
+  const providerArgument = selectedProvider || "<provider>";
+  const modelArgument = validation.valid ? validation.value : "<model-id>";
+  const baseUrlArgument = baseUrlValidation.valid
+    ? baseUrlValidation.value
+    : "<ollama-base-url>";
+  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}` : ""
+  }`;
+  return {
+    "ollama-pull": `ollama pull ${modelArgument}`,
+    setup: init,
+    "model-gateway": packaged ? "npx abot start" : "npm run model-gateway",
+    "web-ui": packaged ? "" : "npm run web-ui",
+  };
+}
+
+// Bridge launch settings are private server state, not browser configuration.
+export function buildBridgeSetupCommands(
+  provider,
+  modelId,
+  ollamaBaseUrl,
+  setupCommandMode,
+) {
+  const commands = buildRuntimeSetupCommands(
+    provider,
+    modelId,
+    ollamaBaseUrl,
+    setupCommandMode,
+  );
+  const packaged = setupCommandMode === "package";
+  return {
+    ...commands,
+    "model-gateway": packaged ? "" : commands["model-gateway"],
+    "web-ui": "",
+  };
+}

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

@@ -0,0 +1,25 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function requiresConfigurationRecovery(availability) {
+  return availability?.recovery === "configuration";
+}
+
+export function preserveConfigurationRecovery(current, incoming) {
+  if (!requiresConfigurationRecovery(current)) return incoming;
+  const transient =
+    incoming.status === "checking" || incoming.status === "error";
+  if (!transient) return incoming;
+  return { ...incoming, recovery: "configuration" };
+}
+
+export function renderConfigurationRecovery(availability) {
+  const checking = availability.status === "checking";
+  return `<section class="runtime-setup-panel" aria-labelledby="runtimeSetupRecoveryTitle">
+    <header class="runtime-setup-heading"><h3 id="runtimeSetupRecoveryTitle" tabindex="-1" data-runtime-setup-title>Review your existing configuration</h3>
+    <p>Your model profiles are saved, but need attention before ABot can start.</p></header>
+    <div class="runtime-setup-content"><p role="status">${escapeHtml(availability.message || "Open Configuration to repair the existing model and provider settings.")}</p>
+    <p>Open Configuration to review your model profiles and provider connections. Your existing settings will be preserved.</p></div>
+    <footer class="runtime-setup-footer"><button type="button" class="runtime-setup-secondary" data-runtime-setup-action="check" ${checking ? "disabled" : ""}>${checking ? "Checking…" : "Check again"}</button>
+    <button type="button" class="runtime-setup-action" data-runtime-setup-action="configuration" ${checking ? "disabled" : ""}>Open Configuration</button></footer>
+  </section>`;
+}

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

@@ -0,0 +1,154 @@
+import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
+import { validateContextWindowTokens } from "./context-window.js";
+import { canEditSetupConnection } from "./connection-state.js";
+import {
+  validateRuntimeSetupBaseUrl,
+  validateRuntimeSetupModelId,
+} from "./validation.js";
+
+export function renderProviderChoices(state) {
+  const options = state.providers
+    .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>
+  </label>`,
+    )
+    .join("");
+  return `<fieldset class="runtime-provider-fieldset"><legend class="sr-only">Choose a provider</legend><div class="runtime-provider-options">${options}</div></fieldset>`;
+}
+
+export function renderConnectionField({
+  field,
+  label,
+  type = "text",
+  value = "",
+  placeholder = "",
+  help = "",
+  required = true,
+  readonly = false,
+  min = "",
+  step = "",
+  idPrefix = "runtimeSetup",
+}) {
+  return `<label class="runtime-setup-field"><span>${label}</span>
+    <input type="${type}" data-runtime-setup-field="${field}" value="${escapeAttribute(value)}" placeholder="${escapeAttribute(placeholder)}" autocomplete="${type === "password" ? "new-password" : "off"}" spellcheck="false" ${min ? `min="${escapeAttribute(min)}"` : ""} ${step ? `step="${escapeAttribute(step)}"` : ""} ${required ? "required" : ""} ${readonly ? "readonly" : ""} aria-describedby="${idPrefix}Help-${field}" />
+    <small id="${idPrefix}Help-${field}">${help}</small>
+  </label>`;
+}
+
+export function renderConnectionFields(state) {
+  const selectedProvider = state.providers.find(
+    (provider) => provider.id === state.provider,
+  );
+  const credentialConfigured = selectedProvider?.credentialConfigured === true;
+  const providerType = state.providerType || state.provider;
+  const idPrefix = state.idPrefix || "runtimeSetup";
+  const model =
+    renderConnectionField({
+      idPrefix,
+      field: "model-id",
+      label: "Model ID",
+      value: state.modelId,
+      placeholder: "Exact model name",
+      readonly: !canEditSetupConnection(state),
+      help: "Enter the model name provided by your service.",
+    }) +
+    renderConnectionField({
+      idPrefix,
+      field: "context-window",
+      label: "Context window (tokens)",
+      type: "number",
+      value: state.contextWindowTokens,
+      min: "1",
+      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 Configuration.",
+    });
+  if (providerType === "ollama") {
+    if (state.existingProvider) return model;
+    return (
+      model +
+      renderConnectionField({
+        idPrefix,
+        field: "ollama-base-url",
+        label: "Ollama address",
+        type: "url",
+        value: state.baseUrl,
+        readonly: !canEditSetupConnection(state),
+        placeholder: "http://127.0.0.1:11434",
+        help: "Use the address reachable from the computer running ABot.",
+      })
+    );
+  }
+  if (credentialConfigured && state.allowCredentialReplacement === false)
+    return model;
+  return (
+    model +
+    renderConnectionField({
+      idPrefix,
+      field: "api-key",
+      label: credentialConfigured ? "API key (optional)" : "API key",
+      type: "password",
+      required: !credentialConfigured,
+      placeholder: credentialConfigured
+        ? "Leave blank to keep your saved key"
+        : "Enter your OpenAI API key",
+      help: "Saved privately on the ABot server. Never stored in this browser.",
+    })
+  );
+}
+
+export function clearConnectionSecret(container) {
+  const input = container.querySelector('[data-runtime-setup-field="api-key"]');
+  if (input) input.value = "";
+}
+
+export function readConnectionSecret(container) {
+  return textOf(
+    container.querySelector('[data-runtime-setup-field="api-key"]')?.value,
+  ).trim();
+}
+
+export function validateConnectionFields({
+  modelId,
+  contextWindowTokens,
+  providerType,
+  baseUrl,
+  existingProvider = false,
+}) {
+  const model = validateRuntimeSetupModelId(modelId);
+  if (!model.valid)
+    return { valid: false, field: "model-id", message: model.message };
+  const context = validateContextWindowTokens(contextWindowTokens);
+  if (!context.valid) return context;
+  const input = { model: model.value, contextWindowTokens: context.value };
+  if (providerType === "ollama" && !existingProvider) {
+    const address = validateRuntimeSetupBaseUrl(baseUrl);
+    if (!address.valid)
+      return {
+        valid: false,
+        field: "ollama-base-url",
+        message: address.message,
+      };
+    input.baseUrl = address.value;
+  }
+  return { valid: true, input };
+}
+
+export function showConnectionFieldError(
+  container,
+  field,
+  messageId = "runtimeSetupError",
+  idPrefix = "runtimeSetup",
+) {
+  const input = container.querySelector(
+    `[data-runtime-setup-field="${field}"]`,
+  );
+  input?.setAttribute?.("aria-invalid", "true");
+  input?.setAttribute?.(
+    "aria-describedby",
+    `${idPrefix}Help-${field} ${messageId}`,
+  );
+  input?.focus?.();
+}

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

@@ -0,0 +1,71 @@
+import { textOf } from "../../lib/text-format.js";
+import { normalizeProvider } from "./validation.js";
+
+export function selectSetupProvider(state, value) {
+  const provider = normalizeProvider(value);
+  const providerChanged = state.provider !== provider;
+  if (providerChanged) state.modelId = "";
+  state.provider = provider;
+}
+
+export function canEditSetupConnection(state) {
+  if (!state.existingModel) return true;
+  return Boolean(state.editableConnection?.revision);
+}
+
+export function hasSetupConnectionChanges(state) {
+  const saved = state.existingModel;
+  if (!saved) return true;
+  if (state.provider !== saved.provider) return true;
+  if (state.modelId.trim() !== saved.model) return true;
+  if (Number(state.contextWindowTokens) !== saved.contextWindowTokens)
+    return true;
+  if (state.provider !== "ollama") return false;
+  return state.baseUrl.trim().replace(/\/$/u, "") !== saved.baseUrl;
+}
+
+export function canContinueSavedConnection(state, apiKey = "") {
+  if (!state.existingModel || !state.activation || apiKey) return false;
+  if (!canEditSetupConnection(state)) return true;
+  return !hasSetupConnectionChanges(state);
+}
+
+export function setupConnectionSubmitLabel(state, apiKey = "") {
+  return canContinueSavedConnection(state, apiKey)
+    ? "Continue"
+    : "Save connection";
+}
+
+export function setupConnectionSaveError(error) {
+  if (error?.payload?.error === "setup_configuration_changed")
+    return "Your connection changed in another window. Refresh this page before editing it again.";
+  return "Could not save your connection. Check the model and connection details, then try again.";
+}
+
+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;
+}
+
+export function receiveSetupConnection(state, setup) {
+  state.editableConnection = setup?.editableConnection || null;
+  state.existingModel = setup?.existingModel || null;
+  state.contextWindowTokens = textOf(
+    state.existingModel?.contextWindowTokens ??
+      setup?.defaultContextWindowTokens,
+  );
+  if (!state.existingModel) return;
+  state.provider = state.existingModel.provider;
+  state.modelId = state.existingModel.model;
+  state.baseUrl = state.existingModel.baseUrl || state.baseUrl;
+  state.step = 1;
+  if (state.editableConnection) {
+    state.activation = { status: "restart_required" };
+    return;
+  }
+  if (setup.status !== "ready") return;
+  state.activation = { status: "restart_required" };
+  state.step = 2;
+}

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

@@ -0,0 +1,18 @@
+import { textOf } from "../../lib/text-format.js";
+
+export function validateContextWindowTokens(value) {
+  const tokens = Number(textOf(value).trim());
+  if (!Number.isSafeInteger(tokens) || tokens <= 0)
+    return {
+      valid: false,
+      field: "context-window",
+      message:
+        "Enter a context window as a positive whole number of tokens within the safe numeric range.",
+    };
+  return { valid: true, value: tokens };
+}
+
+export function formatContextWindowTokens(value) {
+  const context = validateContextWindowTokens(value);
+  return context.valid ? `${context.value.toLocaleString("en-US")} tokens` : "";
+}

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

@@ -0,0 +1,15 @@
+import type { createRuntimeWebClient } from "../../services/runtime-web-client.js";
+
+type RuntimeClient = ReturnType<typeof createRuntimeWebClient>;
+export declare function createEmbeddingCredentialStatus(options: {
+  runtimeClient: Pick<
+    RuntimeClient,
+    "loadLongTermMemoryStatus" | "saveRuntimeSetupEmbedding" | "loadModelSetup"
+  >;
+  getEnvironmentId(): string;
+}): {
+  loadStatus(): Promise<Record<string, unknown>>;
+  saveEmbedding(
+    input: Parameters<RuntimeClient["saveRuntimeSetupEmbedding"]>[0],
+  ): Promise<Record<string, unknown>>;
+};

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

@@ -0,0 +1,87 @@
+function withProviderCredentialStatus(provider, catalog) {
+  if (!provider || typeof provider !== "object" || Array.isArray(provider))
+    return provider;
+  const { credentialConfigured: _previous, ...projected } = provider;
+  const hasProviderIdentity =
+    typeof provider.id === "string" && typeof provider.type === "string";
+  if (!hasProviderIdentity) return projected;
+  const matched = catalog.find(
+    (entry) => entry?.id === provider.id && entry?.type === provider.type,
+  );
+  if (!matched) return projected;
+  return {
+    ...projected,
+    credentialConfigured: matched.credentialConfigured === true,
+  };
+}
+
+function withEmbeddingCredentialStatus(payload, catalog) {
+  if (!Array.isArray(payload?.status?.providers)) return payload;
+  return {
+    ...payload,
+    status: {
+      ...payload.status,
+      providers: payload.status.providers.map((provider) =>
+        withProviderCredentialStatus(provider, catalog),
+      ),
+    },
+  };
+}
+
+/** Reuse the Web UI catalog's safe credential flags without reading or retaining keys. */
+export function createEmbeddingCredentialStatus({
+  runtimeClient,
+  getEnvironmentId,
+}) {
+  async function providerCatalog(environmentId) {
+    try {
+      const payload = await runtimeClient.loadModelSetup(environmentId);
+      return Array.isArray(payload?.providers) ? payload.providers : [];
+    } catch {
+      return [];
+    }
+  }
+
+  async function decorateSavedProviderError(error, environmentId) {
+    if (error?.payload?.providerSaved !== true) return;
+    if (!error.payload.savedProvider) return;
+    const catalog = await providerCatalog(environmentId);
+    const receipt = withProviderCredentialStatus(
+      error.payload.savedProvider,
+      catalog,
+    );
+    try {
+      error.payload.savedProvider = receipt;
+    } catch {
+      // Frozen errors still retain their original identity and failure semantics.
+    }
+  }
+
+  return {
+    async loadStatus() {
+      const environmentId = getEnvironmentId();
+      const [payload, catalog] = await Promise.all([
+        runtimeClient.loadLongTermMemoryStatus(environmentId),
+        providerCatalog(environmentId),
+      ]);
+      return withEmbeddingCredentialStatus(payload, catalog);
+    },
+    async saveEmbedding(input) {
+      const environmentId = getEnvironmentId();
+      let payload;
+      try {
+        payload = await runtimeClient.saveRuntimeSetupEmbedding(
+          input,
+          environmentId,
+        );
+      } catch (error) {
+        await decorateSavedProviderError(error, environmentId);
+        throw error;
+      }
+      return withEmbeddingCredentialStatus(
+        payload,
+        await providerCatalog(environmentId),
+      );
+    },
+  };
+}

package/dist/src/web-ui/app/components/runtime-setup/embedding-provider-receipt.js

@@ -0,0 +1,30 @@
+function isSavedEmbeddingProviderReceipt(payload, selection) {
+  if (payload?.providerSaved !== true) return false;
+  const receipt = payload.savedProvider;
+  if (!receipt || typeof receipt !== "object") return false;
+  if (Array.isArray(receipt)) return false;
+  if (typeof receipt.id !== "string") return false;
+  if (!receipt.id.trim() || receipt.id !== receipt.id.trim()) return false;
+  if (typeof receipt.type !== "string" || !receipt.type.trim()) return false;
+  if (receipt.type !== selection.type) return false;
+  if (selection.providerId) return receipt.id === selection.providerId;
+  return true;
+}
+
+/** Project only the canonical identity returned after a completed provider save. */
+export function applySavedEmbeddingProviderReceipt(state, payload, selection) {
+  if (!isSavedEmbeddingProviderReceipt(payload, selection)) return;
+  const { id, type } = payload.savedProvider;
+  const receipt = { id, type };
+  const hasCredentialStatus =
+    typeof payload.savedProvider.credentialConfigured === "boolean";
+  if (hasCredentialStatus)
+    receipt.credentialConfigured = payload.savedProvider.credentialConfigured;
+  const existing = state.providers.find((provider) => provider.id === id);
+  const providers = state.providers.map((provider) =>
+    provider.id === id ? { ...provider, ...receipt } : provider,
+  );
+  if (!existing) providers.push(receipt);
+  state.providers = providers;
+  state.provider = id;
+}

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

@@ -0,0 +1,57 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function field(
+  field,
+  label,
+  value = "",
+  type = "text",
+  help = "",
+  placeholder = "",
+) {
+  return `<label class="runtime-setup-field"><span>${label}</span><input data-runtime-setup-field="${field}" type="${type}" value="${escapeAttribute(value)}" placeholder="${escapeAttribute(placeholder)}" autocomplete="${type === "password" ? "new-password" : "off"}" spellcheck="false" ${field === "embedding-model" ? 'list="runtimeEmbeddingModels"' : ""} />${help ? `<small>${help}</small>` : ""}</label>`;
+}
+
+function renderEmbeddingCredential(provider) {
+  const credentialConfigured = provider?.credentialConfigured === true;
+  return field(
+    "embedding-key",
+    "API key (optional if already saved)",
+    "",
+    "password",
+    credentialConfigured
+      ? "API key already saved. Leave blank to use it."
+      : "Saved privately on the ABot server. Leave blank to keep a configured key.",
+    credentialConfigured ? "••••••••" : "",
+  );
+}
+
+export function renderEmbeddingSetup(state, providerType, configuredProvider) {
+  if (!state.loaded)
+    return `<p class="runtime-setup-feedback" role="${state.error ? "alert" : "status"}">${escapeHtml(state.error || "Loading embedding options…")}</p>${state.error ? '<button type="button" class="runtime-setup-inline-action" data-runtime-setup-action="embedding-reload">Try again</button>' : ""}`;
+  const providers = [
+    ...state.providers.map((provider) => ({
+      id: provider.id,
+      label: `${provider.id} · ${provider.type}`,
+    })),
+    ...["openai", "ollama"]
+      .filter(
+        (type) => !state.providers.some((provider) => provider.type === type),
+      )
+      .map((type) => ({
+        id: `new:${type}`,
+        label: `${type === "openai" ? "OpenAI" : "Ollama"} · new connection`,
+      })),
+  ];
+  return `<div class="runtime-embedding-fields">
+    ${state.status?.enabled ? '<p class="runtime-setup-feedback">Memory is already configured. You can keep it or test and save changes.</p>' : ""}
+    <label class="runtime-setup-field"><span>Embedding provider</span><select data-runtime-setup-field="embedding-provider">${providers.map((provider) => `<option value="${escapeAttribute(provider.id)}" ${state.provider === provider.id ? "selected" : ""}>${escapeHtml(provider.label)}</option>`).join("")}</select></label>
+    ${field("embedding-model", "Embedding model ID", state.model, "text", "Choose a model that supports embeddings. ABot will not install or select one for you.")}
+    <datalist id="runtimeEmbeddingModels">${state.models.map((model) => `<option value="${escapeAttribute(model)}"></option>`).join("")}</datalist>
+    ${providerType === "openai" ? renderEmbeddingCredential(configuredProvider) : ""}
+    ${providerType === "ollama" && !configuredProvider ? field("embedding-url", "Ollama address", state.baseUrl, "url", "Use the address reachable from the computer running ABot.") : ""}
+    ${configuredProvider ? '<button type="button" class="runtime-setup-inline-action" data-runtime-setup-action="embedding-discover"><svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><span>Discover models</span></button>' : ""}
+    <p class="runtime-setup-feedback">Test and save sends one embedding request to your provider. You can also configure this later in Settings.</p>
+    ${state.error ? `<p class="runtime-setup-feedback error" role="alert">${escapeHtml(state.error)}</p>` : state.message ? `<p class="runtime-setup-feedback" role="status">${escapeHtml(state.message)}</p>` : ""}
+    ${state.busy ? '<p class="runtime-setup-feedback" role="status">Checking embedding settings…</p>' : ""}
+  </div>`;
+}