@abot-ai/runtime 1.3.0 → 1.4.0

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

@@ -0,0 +1,125 @@
+import { validateConnectionFields } from "../runtime-setup/connection-form.js";
+
+export function selectedModelProvider(state) {
+  return (
+    state.providers.find(
+      (provider) => `existing:${provider.id}` === state.choice,
+    ) || null
+  );
+}
+
+export function modelProviderType(state) {
+  return selectedModelProvider(state)?.type || state.choice.replace("new:", "");
+}
+
+export function suggestIdentifier(value, existing, fallback = "model") {
+  const clean =
+    value
+      .replace(/[^A-Za-z0-9._-]+/g, "-")
+      .replace(/^[^A-Za-z0-9]+/, "")
+      .slice(0, 110) || fallback;
+  const base = ["__proto__", "prototype", "constructor"].includes(clean)
+    ? `${fallback}-${clean}`
+    : clean;
+  let candidate = base;
+  let suffix = 2;
+  while (existing.includes(candidate)) candidate = `${base}-${suffix++}`;
+  return candidate;
+}
+
+function validIdentifier(value, provider) {
+  const pattern = provider
+    ? /^[A-Za-z][A-Za-z0-9._-]*$/
+    : /^[A-Za-z0-9][A-Za-z0-9._-]*$/;
+  return (
+    value.length <= 128 &&
+    pattern.test(value) &&
+    !["__proto__", "prototype", "constructor"].includes(value)
+  );
+}
+
+export function validateModelDraft(state) {
+  const provider = selectedModelProvider(state);
+  if (!provider && !["new:openai", "new:ollama"].includes(state.choice))
+    return { valid: false, field: "provider", message: "Choose a provider." };
+  if (!provider && !validIdentifier(state.newProviderId, true))
+    return {
+      valid: false,
+      field: "connection-id",
+      message:
+        "Start the connection ID with a letter and use up to 128 letters, numbers, dots, underscores or hyphens.",
+    };
+  if (
+    !provider &&
+    state.providers.some((entry) => entry.id === state.newProviderId)
+  )
+    return {
+      valid: false,
+      field: "connection-id",
+      message:
+        "That connection ID already exists. Choose another or use its existing provider.",
+    };
+  if (state.model.length > 256)
+    return {
+      valid: false,
+      field: "model-id",
+      message: "Use a model ID of up to 256 characters.",
+    };
+  const connection = validateConnectionFields({
+    modelId: state.model,
+    contextWindowTokens: state.contextWindowTokens,
+    providerType: modelProviderType(state),
+    baseUrl: state.baseUrl,
+    existingProvider: Boolean(provider),
+  });
+  if (!connection.valid) return connection;
+  if (!validIdentifier(state.profileId, false))
+    return {
+      valid: false,
+      field: "profile-id",
+      message:
+        "Use up to 128 letters, numbers, dots, underscores or hyphens for the model profile ID.",
+    };
+  if (state.profileIds.includes(state.profileId))
+    return {
+      valid: false,
+      field: "profile-id",
+      message: "That model profile ID already exists. Choose another.",
+    };
+  return connection;
+}
+
+export function requiresModelCredential(state) {
+  const provider = selectedModelProvider(state);
+  const configured =
+    provider?.credentialConfigured === true ||
+    state.credentialSavedFor === (provider?.id || state.newProviderId);
+  return modelProviderType(state) === "openai" && !configured;
+}
+
+export function requiresModelSaveCredential(state) {
+  if (state.saveOutcomeUncertain) return false;
+  return requiresModelCredential(state);
+}
+
+export function modelSetupInput(state, validated, apiKey) {
+  const provider = selectedModelProvider(state);
+  const connection = provider
+    ? { providerId: provider.id }
+    : {
+        newProvider: {
+          id: state.newProviderId,
+          type: modelProviderType(state),
+          ...(validated.input.baseUrl
+            ? { baseUrl: validated.input.baseUrl }
+            : {}),
+        },
+      };
+  return {
+    profileId: state.profileId,
+    model: validated.input.model,
+    contextWindowTokens: validated.input.contextWindowTokens,
+    ...connection,
+    ...(apiKey ? { apiKey } : {}),
+  };
+}

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

@@ -0,0 +1,44 @@
+import type { ModelSetupInput } from "../../../local-runtime/model-setup-input.js";
+
+export type AddedModelIdentity = Readonly<{
+  profileId: string;
+  providerId: string;
+  provider: string;
+  model: string;
+}>;
+export type ModelSetupProvider = Readonly<{
+  id: string;
+  type: string;
+  label: string;
+  requiresApiKey: boolean;
+  credentialConfigured: boolean;
+}>;
+export interface ModelSetupWizardDependencies {
+  root: HTMLElement;
+  getEnvironmentId?: () => string;
+  loadSetup: () => Promise<{
+    providers: readonly ModelSetupProvider[];
+    profileIds: readonly string[];
+    defaultContextWindowTokens: number;
+  }>;
+  saveModel: (
+    input: ModelSetupInput,
+  ) => Promise<{ model: AddedModelIdentity; restartRequired: boolean }>;
+  applySetup: () => Promise<{
+    activation: { status: "ready" | "restart_required"; message?: string };
+  }>;
+  beginRuntimeMutation?: (subject?: string) => boolean;
+  endRuntimeMutation?: () => void;
+  onSaved?: (model: AddedModelIdentity) => void;
+  onComplete?: (model: AddedModelIdentity) => Promise<boolean>;
+  onClosed?: (result: { completed: boolean }) => void;
+}
+export declare function createModelSetupWizard(
+  dependencies: ModelSetupWizardDependencies,
+): {
+  open(options?: { providerId?: string }): Promise<boolean>;
+  close(): boolean;
+  isOpen(): boolean;
+  isBusy(): boolean;
+  dispose(): void;
+};

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

@@ -0,0 +1,370 @@
+import { textOf } from "../../lib/text-format.js";
+import {
+  clearConnectionSecret,
+  readConnectionSecret,
+  showConnectionFieldError,
+} from "../runtime-setup/connection-form.js";
+import { renderWizardProgress } from "../runtime-setup/wizard-shell.js";
+import { DEFAULT_OLLAMA_BASE_URL } from "../runtime-setup/validation.js";
+import { createSetupViewState } from "../runtime-setup/view-state.js";
+import { createModelSaveFlow } from "./save-flow.js";
+import {
+  MODEL_SETUP_ID,
+  MODEL_SETUP_STEPS,
+  modelSetupFooter,
+  modelSetupMarkup,
+  modelSetupTitles,
+  renderModelFields,
+  renderModelProviderChoices,
+  renderModelReview,
+} from "./rendering.js";
+import {
+  modelSetupInput,
+  requiresModelSaveCredential,
+  selectedModelProvider,
+  suggestIdentifier,
+  validateModelDraft,
+} from "./validation.js";
+
+export function createModelSetupWizard({
+  root,
+  getEnvironmentId = () => "",
+  loadSetup,
+  saveModel,
+  applySetup,
+  beginRuntimeMutation = () => true,
+  endRuntimeMutation = () => {},
+  onSaved = () => {},
+  onComplete = async () => true,
+  onClosed = () => {},
+}) {
+  const dialog = root.ownerDocument.createElement("dialog");
+  dialog.className = "model-setup-dialog";
+  dialog.setAttribute("aria-labelledby", `${MODEL_SETUP_ID}Title`);
+  root.append(dialog);
+  const state = {};
+  const viewState = createSetupViewState(dialog);
+  let generation = 0;
+  let modelForm = null;
+  let formChoice = "";
+  let requestedProviderId = "";
+  const beginOperation = () => ({
+    generation: ++generation,
+    environment: getEnvironmentId(),
+  });
+  const isCurrent = (operation) =>
+    operation.generation === generation &&
+    operation.environment === getEnvironmentId() &&
+    dialog.open;
+  const clearSecret = () => {
+    if (modelForm) clearConnectionSecret(modelForm);
+  };
+
+  function reset() {
+    clearSecret();
+    viewState.reset();
+    Object.assign(state, {
+      providers: [],
+      profileIds: [],
+      choice: "",
+      model: "",
+      contextWindowTokens: "",
+      profileId: "",
+      profileEdited: false,
+      newProviderId: "",
+      baseUrl: DEFAULT_OLLAMA_BASE_URL,
+      step: 0,
+      loaded: false,
+      busy: "",
+      error: "",
+      saved: null,
+      applied: false,
+      credentialSavedFor: "",
+      saveOutcomeUncertain: false,
+    });
+    modelForm = null;
+    formChoice = "";
+  }
+
+  function close(completed = false) {
+    if (state.busy) return false;
+    const wasOpen = dialog.open;
+    generation += 1;
+    clearSecret();
+    state.saveOutcomeUncertain = false;
+    dialog.close();
+    dialog.replaceChildren();
+    modelForm = null;
+    if (wasOpen) onClosed({ completed });
+    return true;
+  }
+
+  function showFieldError(result) {
+    state.step = 1;
+    state.error = result.message;
+    render();
+    showConnectionFieldError(
+      modelForm,
+      result.field,
+      `${MODEL_SETUP_ID}Error`,
+      MODEL_SETUP_ID,
+    );
+  }
+
+  function readRequest() {
+    const result = validateModelDraft(state);
+    if (!result.valid) {
+      clearSecret();
+      showFieldError(result);
+      return null;
+    }
+    const apiKey = readConnectionSecret(modelForm);
+    if (requiresModelSaveCredential(state) && !apiKey) {
+      showFieldError({
+        field: "api-key",
+        message: "Enter an API key for this connection.",
+      });
+      return null;
+    }
+    return modelSetupInput(state, result, apiKey);
+  }
+
+  const settleStaleOperation = (operation) => {
+    if (
+      operation.generation === generation &&
+      operation.environment !== getEnvironmentId()
+    ) {
+      state.busy = "";
+      close();
+    }
+  };
+
+  const flow = createModelSaveFlow({
+    state,
+    beginOperation,
+    isCurrent,
+    settleStaleOperation,
+    readRequest,
+    clearSecret,
+    render,
+    closeCompleted: () => close(true),
+    saveModel,
+    applySetup,
+    beginRuntimeMutation,
+    endRuntimeMutation,
+    onSaved,
+    onComplete,
+  });
+
+  function render({ focus = false } = {}) {
+    if (!dialog.open) return;
+    viewState.capture();
+    const title = dialog.querySelector("[data-runtime-setup-title]");
+    title.textContent = modelSetupTitles(state)[state.step];
+    dialog.querySelector("[data-wizard-progress]").innerHTML =
+      renderWizardProgress(MODEL_SETUP_STEPS, state.step);
+    dialog.querySelector("[data-wizard-mobile-progress]").textContent =
+      `Step ${state.step + 1} of 3 · ${MODEL_SETUP_STEPS[state.step]}`;
+    const providers = dialog.querySelector("[data-model-providers]");
+    providers.hidden = state.step !== 0;
+    providers.inert = Boolean(state.busy);
+    if (state.step === 0)
+      providers.innerHTML = renderModelProviderChoices(state);
+    if (state.choice && formChoice !== state.choice) {
+      clearSecret();
+      modelForm.innerHTML = renderModelFields(state);
+      formChoice = state.choice;
+    }
+    modelForm.hidden = state.step !== 1;
+    modelForm.inert = state.step !== 1 || Boolean(state.busy);
+    const key = modelForm.querySelector('[data-runtime-setup-field="api-key"]');
+    if (key) key.required = requiresModelSaveCredential(state);
+    const review = dialog.querySelector("[data-model-review]");
+    review.hidden = state.step !== 2;
+    if (state.step === 2) review.innerHTML = renderModelReview(state);
+    const feedback = dialog.querySelector("[data-model-feedback]");
+    feedback.textContent =
+      state.error ||
+      (state.busy
+        ? `${state.busy === "saving" ? "Saving model" : state.busy === "applying" ? "Applying model" : state.busy === "refreshing" ? "Refreshing model list" : "Loading providers"}…`
+        : "");
+    feedback.setAttribute("role", state.error ? "alert" : "status");
+    dialog.querySelector('[data-model-action="reload"]').hidden =
+      state.loaded || !state.error;
+    dialog.querySelector("[data-wizard-footer]").innerHTML =
+      modelSetupFooter(state);
+    dialog
+      .querySelector(".runtime-setup-panel")
+      .setAttribute("aria-busy", Boolean(state.busy).toString());
+    viewState.restore({ focus, busy: Boolean(state.busy) });
+  }
+
+  async function load() {
+    const operation = beginOperation();
+    state.busy = "loading";
+    state.error = "";
+    render();
+    try {
+      const payload = await loadSetup();
+      if (!isCurrent(operation)) return false;
+      state.providers = Array.isArray(payload.providers)
+        ? payload.providers
+        : [];
+      state.contextWindowTokens = textOf(payload.defaultContextWindowTokens);
+      state.profileIds = Array.isArray(payload.profileIds)
+        ? payload.profileIds
+        : [];
+      if (requestedProviderId) {
+        const provider = state.providers.find(
+          (entry) => entry.id === requestedProviderId,
+        );
+        if (provider) {
+          state.choice = `existing:${provider.id}`;
+          state.step = 1;
+        } else
+          state.error =
+            "That provider is unavailable. Choose another connection.";
+      }
+      state.loaded = true;
+      return true;
+    } catch {
+      if (isCurrent(operation))
+        state.error = "Could not load provider connections. Try again.";
+      return false;
+    } finally {
+      if (isCurrent(operation)) {
+        state.busy = "";
+        render({ focus: true });
+      } else settleStaleOperation(operation);
+    }
+  }
+
+  async function open({ providerId } = {}) {
+    if (dialog.open) return false;
+    reset();
+    requestedProviderId = providerId || "";
+    dialog.innerHTML = modelSetupMarkup(state);
+    modelForm = dialog.querySelector("[data-model-form]");
+    dialog.showModal();
+    return load();
+  }
+
+  function next() {
+    if (state.busy || !state.loaded) return;
+    if (state.step === 0 && state.choice) {
+      state.step = 1;
+      state.error = "";
+      render({ focus: true });
+      return;
+    }
+    if (state.step !== 1) return;
+    const result = validateModelDraft(state);
+    if (!result.valid) {
+      showFieldError(result);
+      return;
+    }
+    if (!modelForm.reportValidity()) return;
+    state.step = 2;
+    state.error = "";
+    render({ focus: true });
+  }
+
+  function input(event) {
+    if (state.busy || state.saved || state.step !== 1) return;
+    const field = event.target.dataset.runtimeSetupField;
+    if (field === "api-key") {
+      event.target.removeAttribute("aria-invalid");
+      return;
+    }
+    state.saveOutcomeUncertain = false;
+    const value = textOf(event.target.value);
+    if (field === "model-id") {
+      state.model = value;
+      if (!state.profileEdited) {
+        state.profileId = value
+          ? suggestIdentifier(value, state.profileIds)
+          : "";
+        modelForm.querySelector(
+          '[data-runtime-setup-field="profile-id"]',
+        ).value = state.profileId;
+      }
+    }
+    if (field === "context-window") state.contextWindowTokens = value;
+    if (field === "profile-id") {
+      state.profileId = value;
+      state.profileEdited = true;
+    }
+    if (field === "connection-id") state.newProviderId = value;
+    if (field === "ollama-base-url") state.baseUrl = value;
+    const key = modelForm.querySelector('[data-runtime-setup-field="api-key"]');
+    if (key) key.required = requiresModelSaveCredential(state);
+    event.target.removeAttribute("aria-invalid");
+  }
+
+  dialog.addEventListener("input", input);
+  dialog.addEventListener("change", (event) => {
+    if (
+      state.busy ||
+      state.saved ||
+      state.step !== 0 ||
+      event.target.dataset.runtimeSetupField !== "provider"
+    )
+      return;
+    clearSecret();
+    state.saveOutcomeUncertain = false;
+    const providerChanged = state.choice !== event.target.value;
+    if (providerChanged) state.model = "";
+    const resetSuggestedProfile = providerChanged && !state.profileEdited;
+    if (resetSuggestedProfile) state.profileId = "";
+    state.choice = event.target.value;
+    state.newProviderId = selectedModelProvider(state)
+      ? ""
+      : suggestIdentifier(
+          state.choice.replace("new:", ""),
+          state.providers.map((entry) => entry.id),
+          "provider",
+        );
+    state.error = "";
+    render();
+    Array.from(dialog.querySelectorAll('[data-runtime-setup-field="provider"]'))
+      .find((entry) => entry.value === state.choice)
+      ?.focus({ preventScroll: true });
+  });
+  dialog.addEventListener("submit", (event) => {
+    event.preventDefault();
+    next();
+  });
+  dialog.addEventListener("click", (event) => {
+    const action = event.target.closest?.("[data-model-action]")?.dataset
+      .modelAction;
+    if (!action || state.busy) return;
+    if (action === "cancel") close();
+    if (action === "reload") void load();
+    if (action === "next") next();
+    if (action === "finish" && state.step === 2) void flow.finish();
+    if (action === "back" && !state.saved) {
+      if (state.step === 1) clearSecret();
+      state.step = Math.max(0, state.step - 1);
+      state.error = "";
+      render({ focus: true });
+    }
+  });
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    if (!state.busy) close();
+  });
+
+  return {
+    open,
+    close: () => close(),
+    isOpen: () => dialog.open,
+    isBusy: () => Boolean(state.busy),
+    dispose: () => {
+      generation += 1;
+      clearSecret();
+      state.saveOutcomeUncertain = false;
+      dialog.close();
+      dialog.remove();
+    },
+  };
+}