@abot-ai/runtime 1.3.1 → 1.4.0

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

@@ -48,6 +48,8 @@ export function createDashboardWorkspace({ root, actions }) {
       <p class="home-composer-note">Starts a new conversation</p>
     </section>
   </div>`;
+  const overview = root.querySelector(".home-overview");
+  const shortcutRegion = root.querySelector(".home-shortcuts");
   const activity = root.querySelector("[data-dashboard-activity]");
   const conversations = root.querySelector("[data-dashboard-conversations]");
   const composerHost = root.querySelector("[data-dashboard-composer]");
@@ -74,6 +76,23 @@ export function createDashboardWorkspace({ root, actions }) {
   });
 
   function render(snapshot) {
+    const setupRequired = snapshot.composerAvailable === false;
+    root.classList.toggle("home-setup-active", setupRequired);
+    overview.hidden = setupRequired;
+    shortcutRegion.hidden = setupRequired;
+    root.querySelector('[data-dashboard-action="attach"]').disabled =
+      snapshot.composerAvailable === false;
+    root.querySelector('[data-dashboard-action="create-job"]').disabled =
+      snapshot.supportsSchedules === false;
+    composerHost.hidden = snapshot.composerAvailable === false;
+    setupHost.hidden = snapshot.composerAvailable !== false;
+    composerNote.hidden = snapshot.composerAvailable === false;
+    if (setupRequired) {
+      activity.innerHTML = "";
+      conversations.innerHTML = "";
+      return;
+    }
+
     activity.innerHTML = renderDashboardActivity({
       runs: snapshot.runs,
       loading: snapshot.loadingActivity,
@@ -94,13 +113,6 @@ export function createDashboardWorkspace({ root, actions }) {
       "aria-busy",
       String(Boolean(snapshot.loadingSessions)),
     );
-    root.querySelector('[data-dashboard-action="attach"]').disabled =
-      snapshot.composerAvailable === false;
-    root.querySelector('[data-dashboard-action="create-job"]').disabled =
-      snapshot.supportsSchedules === false;
-    composerHost.hidden = snapshot.composerAvailable === false;
-    setupHost.hidden = snapshot.composerAvailable !== false;
-    composerNote.hidden = snapshot.composerAvailable === false;
   }
 
   return { render, composerHost, setupHost };

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

@@ -0,0 +1,99 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { formatContextWindowTokens } from "../runtime-setup/context-window.js";
+import {
+  renderConnectionField,
+  renderConnectionFields,
+  renderProviderChoices,
+} from "../runtime-setup/connection-form.js";
+import { renderWizardShell } from "../runtime-setup/wizard-shell.js";
+import {
+  modelProviderType,
+  selectedModelProvider,
+  requiresModelCredential,
+} from "./validation.js";
+
+export const MODEL_SETUP_STEPS = ["Provider", "Model", "Ready"];
+export const MODEL_SETUP_ID = "addModelSetup";
+
+export function modelSetupTitles(state) {
+  return [
+    "Choose a provider",
+    "Add your model",
+    state.applied
+      ? "Model applied"
+      : state.saved
+        ? "Model saved"
+        : "Review your model",
+  ];
+}
+
+export function renderModelProviderChoices(state) {
+  const providers = state.providers.map((provider) => ({
+    id: `existing:${provider.id}`,
+    label: provider.label || provider.id,
+    description: `${provider.id} · ${provider.type} · existing connection`,
+  }));
+  providers.push(
+    {
+      id: "new:openai",
+      label: "New OpenAI connection",
+      description: "A separate connection using your API key",
+    },
+    {
+      id: "new:ollama",
+      label: "New Ollama connection",
+      description: "A model on your computer or server",
+    },
+  );
+  return renderProviderChoices({ providers, provider: state.choice });
+}
+
+export function renderModelFields(state) {
+  const provider = selectedModelProvider(state);
+  const credentialConfigured = !requiresModelCredential(state);
+  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 })}
+    ${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." })}`;
+}
+
+export function renderModelReview(state) {
+  const provider = selectedModelProvider(state);
+  return `<div class="runtime-setup-result"><dl><div><dt>Connection</dt><dd>${escapeHtml(provider?.id || state.newProviderId)}</dd></div><div><dt>Model</dt><dd>${escapeHtml(state.model)}</dd></div><div><dt>Context window</dt><dd>${escapeHtml(formatContextWindowTokens(state.contextWindowTokens))}</dd></div><div><dt>Profile</dt><dd>${escapeHtml(state.profileId)}</dd></div></dl><p>${state.applied ? "Your model is applied. Refresh the model list to continue." : state.saved ? "Your model is saved. Apply it when your agent is idle." : "Save this model and apply the configuration. This does not send a model request."}</p></div>`;
+}
+
+export function modelSetupFooter(state) {
+  const disabled = state.busy ? "disabled" : "";
+  const back =
+    state.step > 0 && !state.saved
+      ? `<button type="button" class="runtime-setup-secondary" data-model-action="back" data-runtime-setup-action="model-back" ${disabled}>Back</button>`
+      : "";
+  const label = state.busy
+    ? state.busy === "saving"
+      ? "Saving…"
+      : state.busy === "applying"
+        ? "Applying…"
+        : "Loading…"
+    : state.step < 2
+      ? "Continue"
+      : state.applied
+        ? "Refresh model list"
+        : state.saved
+          ? "Apply model"
+          : "Save and apply";
+  const action = state.step === 2 ? "finish" : "next";
+  return `<div class="model-setup-back-actions"><button type="button" class="runtime-setup-secondary" data-model-action="cancel" data-runtime-setup-action="model-cancel" ${disabled}>Cancel</button>${back}</div><button type="button" class="runtime-setup-action" data-model-action="${action}" data-runtime-setup-action="model-${action}" ${state.busy || !state.loaded || !state.choice ? "disabled" : ""}>${label}</button>`;
+}
+
+export function modelSetupMarkup(state) {
+  return renderWizardShell({
+    steps: MODEL_SETUP_STEPS,
+    step: state.step,
+    title: modelSetupTitles(state)[state.step],
+    form: false,
+    idPrefix: MODEL_SETUP_ID,
+    panelClass: "model-setup-panel",
+    content:
+      '<div data-model-providers></div><form data-model-form novalidate></form><div data-model-review hidden></div><p class="runtime-setup-feedback" data-model-feedback id="addModelSetupError" role="status"></p><button type="button" class="runtime-setup-inline-action" data-model-action="reload" data-runtime-setup-action="model-reload" hidden>Try again</button>',
+    footer: modelSetupFooter(state),
+  });
+}

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

@@ -0,0 +1,111 @@
+import { selectedModelProvider } from "./validation.js";
+import {
+  isDefinitiveModelSaveRejection,
+  modelSaveFailureMessage,
+} from "./save-outcome.js";
+
+export function createModelSaveFlow({
+  state,
+  beginOperation,
+  isCurrent,
+  settleStaleOperation,
+  readRequest,
+  clearSecret,
+  render,
+  closeCompleted,
+  saveModel,
+  applySetup,
+  beginRuntimeMutation,
+  endRuntimeMutation,
+  onSaved,
+  onComplete,
+}) {
+  async function refreshModelList(operation) {
+    state.busy = "refreshing";
+    render();
+    const refreshed = await onComplete(state.saved);
+    if (!isCurrent(operation)) return false;
+    if (refreshed === false) {
+      state.error = "Model applied. Refresh the model list to continue.";
+      return false;
+    }
+    return true;
+  }
+
+  async function finish() {
+    if (state.busy) return false;
+    if (!beginRuntimeMutation("model settings")) {
+      state.error =
+        "Save or reset configuration changes before adding a model.";
+      render();
+      return false;
+    }
+    const operation = beginOperation();
+    let completed = false;
+    try {
+      state.error = "";
+      if (!state.saved) {
+        const input = readRequest();
+        if (!input) return false;
+        clearSecret();
+        state.busy = "saving";
+        render();
+        let payload;
+        try {
+          payload = await saveModel(input);
+        } finally {
+          delete input.apiKey;
+        }
+        if (!isCurrent(operation)) return false;
+        if (
+          !payload?.model?.profileId ||
+          !payload.model.providerId ||
+          !payload.model.model
+        )
+          throw new Error("Saved model identity unavailable");
+        state.saveOutcomeUncertain = false;
+        state.saved = payload.model;
+        onSaved(state.saved);
+      }
+      if (!state.applied) {
+        state.busy = "applying";
+        render();
+        const payload = await applySetup();
+        if (!isCurrent(operation)) return false;
+        if (payload?.activation?.status === "restart_required") {
+          state.error =
+            payload.activation.message ||
+            "Model saved. Apply it when your agent is idle.";
+          return false;
+        }
+        if (payload?.activation?.status !== "ready")
+          throw new Error("Model application unavailable");
+        state.applied = true;
+      }
+      completed = await refreshModelList(operation);
+    } catch (error) {
+      if (!isCurrent(operation)) return false;
+      if (state.busy === "saving")
+        state.saveOutcomeUncertain = !isDefinitiveModelSaveRejection(error);
+      const credentialSaved = error?.payload?.credentialSaved === true;
+      if (credentialSaved)
+        state.credentialSavedFor =
+          selectedModelProvider(state)?.id || state.newProviderId;
+      const fallback = modelSaveFailureMessage(state);
+      state.error = error?.payload?.message || fallback;
+      if (credentialSaved)
+        state.error +=
+          " Your API key was saved privately and will be reused on retry.";
+    } finally {
+      endRuntimeMutation();
+      if (isCurrent(operation)) {
+        state.busy = "";
+        if (completed) closeCompleted();
+        else render();
+      } else settleStaleOperation(operation);
+    }
+    return completed;
+  }
+
+  return { finish };
+}

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

@@ -0,0 +1,16 @@
+/** Only a canonical client-error response proves that this save was rejected. */
+export function isDefinitiveModelSaveRejection(error) {
+  if (!Number.isInteger(error?.status)) return false;
+  if (error.status < 400) return false;
+  if (error.status >= 500) return false;
+  return typeof error.payload?.error === "string";
+}
+
+export function modelSaveFailureMessage(state) {
+  if (state.applied) return "Model applied. Could not refresh the model list.";
+  if (state.saved)
+    return "Model saved. Could not apply the configuration. Try again when your agent is idle.";
+  if (state.saveOutcomeUncertain)
+    return "The model save could not be confirmed. Try again to check the saved model and apply it.";
+  return "Could not save this model. Check the connection details and try again.";
+}

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;
+};