@abot-ai/runtime 1.0.0 → 1.2.0

package/dist/src/web-ui/app/components/config-workspace/field-rendering.js

@@ -0,0 +1,278 @@
+import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
+import {
+  isConfigObject,
+  MODEL_EXECUTION_ROUTES,
+  resolveModelExecutionRoute,
+} from "./config-model.js";
+
+export function createConfigFieldRendering({
+  state,
+  configFileKey,
+  getConfigPathValue,
+  hasPendingFileChanges,
+  hasRawDraftChanges,
+  isFileDirty,
+}) {
+  function renderConfigInput(file, path, options = {}) {
+    const value = getConfigPathValue(file.config, path);
+    const type = options.type || "string";
+    const pathValue = escapeAttribute(JSON.stringify(path));
+    const common = `data-config-action="field" data-kind="${escapeAttribute(
+      file.kind,
+    )}" data-id="${escapeAttribute(file.id)}" data-path="${pathValue}" data-value-type="${escapeAttribute(
+      type,
+    )}"`;
+    if (type === "boolean") {
+      return `<label class="config-toggle"><input type="checkbox" ${common} ${
+        value === true ? "checked" : ""
+      } /><span>${escapeHtml(options.label || path.at(-1) || "")}</span></label>`;
+    }
+    if (type === "select") {
+      const values = options.values || [];
+      return `<select ${common}>${values
+        .map((item) => {
+          const selected = textOf(value) === item ? "selected" : "";
+          return `<option value="${escapeAttribute(item)}" ${selected}>${escapeHtml(
+            item || "default",
+          )}</option>`;
+        })
+        .join("")}</select>`;
+    }
+    return `<input ${common} type="${type === "number" ? "number" : "text"}" value="${escapeAttribute(
+      value ?? "",
+    )}" ${options.min !== undefined ? `min="${escapeAttribute(options.min)}"` : ""} ${
+      options.step !== undefined
+        ? `step="${escapeAttribute(options.step)}"`
+        : ""
+    } />`;
+  }
+
+  function renderConfigTextarea(file, path, options = {}) {
+    const value = getConfigPathValue(file.config, path);
+    const pathValue = escapeAttribute(JSON.stringify(path));
+    const rows = Number.isFinite(Number(options.rows))
+      ? Number(options.rows)
+      : 2;
+    return `<textarea
+      data-config-action="field"
+      data-kind="${escapeAttribute(file.kind)}"
+      data-id="${escapeAttribute(file.id)}"
+      data-path="${pathValue}"
+      data-value-type="string"
+      rows="${escapeAttribute(String(rows))}"
+      spellcheck="false"
+    >${escapeHtml(value ?? "")}</textarea>`;
+  }
+
+  function renderExecutionRoute(file) {
+    const path = ["execution", "policy"];
+    const configuredPolicy = getConfigPathValue(file.config, path);
+    const route = resolveModelExecutionRoute(configuredPolicy);
+    const unsupportedOption = route.supported
+      ? ""
+      : `<option value="${escapeAttribute(route.policy)}" selected disabled>Unsupported · ${escapeHtml(
+          route.policy,
+        )}</option>`;
+    const options = Object.entries(MODEL_EXECUTION_ROUTES)
+      .map(
+        ([policy, presentation]) => `
+          <option value="${escapeAttribute(policy)}" ${
+            route.policy === policy ? "selected" : ""
+          }>${escapeHtml(presentation.label)}</option>
+        `,
+      )
+      .join("");
+    return `
+      <div class="config-execution-route" data-config-execution-route>
+        <label>
+          <span>Execution route</span>
+          <select
+            aria-describedby="configExecutionRouteDescription"
+            data-config-action="field"
+            data-kind="${escapeAttribute(file.kind)}"
+            data-id="${escapeAttribute(file.id)}"
+            data-path="${escapeAttribute(JSON.stringify(path))}"
+            data-value-type="execution-policy"
+          >${unsupportedOption}${options}</select>
+        </label>
+        <div
+          id="configExecutionRouteDescription"
+          class="config-execution-route-copy"
+          data-config-execution-route-description
+          aria-live="polite"
+        >
+          <strong data-config-execution-route-label>${escapeHtml(
+            route.label,
+          )}</strong>
+          <p data-config-execution-route-copy>${escapeHtml(
+            route.description,
+          )}</p>
+        </div>
+      </div>
+    `;
+  }
+
+  function countObjectKeys(value) {
+    return isConfigObject(value) ? Object.keys(value).length : 0;
+  }
+
+  function uniqueSorted(values) {
+    return [
+      ...new Set(
+        values
+          .map(textOf)
+          .map((item) => item.trim())
+          .filter(Boolean),
+      ),
+    ].sort((left, right) => left.localeCompare(right));
+  }
+
+  function configProviderOptions() {
+    const providers =
+      state.configDashboard?.files?.runtime?.config?.models?.providers;
+    return uniqueSorted(
+      isConfigObject(providers) ? Object.keys(providers) : [],
+    );
+  }
+
+  function configStepOptions() {
+    const files = state.configDashboard?.files;
+    const runnerSteps = files?.requestRunner?.config?.models?.defaults?.steps;
+    const registeredSteps = Array.isArray(state.configDashboard?.modelSteps)
+      ? state.configDashboard.modelSteps
+      : [];
+    return uniqueSorted([
+      ...registeredSteps,
+      ...(isConfigObject(runnerSteps) ? Object.keys(runnerSteps) : []),
+    ]);
+  }
+
+  function configStepTargetOptions() {
+    const files = state.configDashboard?.files;
+    const runtimeModels = files?.runtime?.config?.models;
+    const fromModelProfiles = isConfigObject(runtimeModels?.profiles)
+      ? Object.keys(runtimeModels.profiles)
+      : [];
+    const fromInvocationProfiles = isConfigObject(
+      runtimeModels?.invocationProfiles,
+    )
+      ? Object.keys(runtimeModels.invocationProfiles)
+      : [];
+    const runnerSteps = files?.requestRunner?.config?.models?.defaults?.steps;
+    const fromRunnerSteps = isConfigObject(runnerSteps)
+      ? Object.values(runnerSteps)
+      : [];
+    const fromCalibration = (files?.models || []).flatMap((model) => {
+      const calibration = model.config?.calibration;
+      return isConfigObject(calibration) ? Object.keys(calibration) : [];
+    });
+    return uniqueSorted([
+      ...fromRunnerSteps,
+      ...fromModelProfiles,
+      ...fromInvocationProfiles,
+      ...fromCalibration,
+    ]);
+  }
+
+  function calibrationProfileMetadataFrom(file, profileId) {
+    const metadata = file?.config?.calibration;
+    const entry = isConfigObject(metadata) ? metadata[profileId] : null;
+    return isConfigObject(entry) ? entry : {};
+  }
+
+  function calibrationProfileMetadata(profileId) {
+    const models = state.configDashboard?.files?.models || [];
+    const selectedModel = models.find(
+      (model) => model.id === state.selectedConfigModelId,
+    );
+    const candidates = [
+      selectedModel,
+      ...models.filter((model) => model !== selectedModel),
+    ].filter(Boolean);
+    for (const file of candidates) {
+      const entry = calibrationProfileMetadataFrom(file, profileId);
+      if (entry.name || entry.description) return entry;
+    }
+    return {};
+  }
+
+  function calibrationProfileLabel(profileId) {
+    return (
+      textOf(calibrationProfileMetadata(profileId).name).trim() || profileId
+    );
+  }
+
+  function calibrationProfileDescription(profileId) {
+    return textOf(calibrationProfileMetadata(profileId).description).trim();
+  }
+
+  function renderSelectOptions(values, selectedValue = "", options = {}) {
+    const selected = textOf(selectedValue);
+    return uniqueSorted([selected, ...values])
+      .map((value) => {
+        const label = options.labelFor ? options.labelFor(value) : value;
+        return `<option value="${escapeAttribute(value)}" ${
+          value === selected ? "selected" : ""
+        }>${escapeHtml(label || value)}</option>`;
+      })
+      .join("");
+  }
+
+  function fileStatusText(file) {
+    const key = configFileKey(file);
+    if (state.savingKeys.has(key)) return "Saving…";
+    if (hasRawDraftChanges(file)) return "Raw draft not applied";
+    if (isFileDirty(file)) return "Unsaved changes";
+    if (state.savedKeys.has(key)) return "Saved";
+    return "Clean";
+  }
+
+  function renderFileActions(file) {
+    const key = configFileKey(file);
+    const pending = hasPendingFileChanges(file);
+    const dirty = isFileDirty(file);
+    const saving = state.savingKeys.has(key);
+    const label = textOf(file.label || file.id || file.kind);
+    return `
+      <div class="config-file-actions">
+        <span
+          class="config-file-status ${pending ? "dirty" : ""}"
+          data-config-file-status="${escapeAttribute(key)}"
+          role="status"
+          aria-live="polite"
+        >${escapeHtml(fileStatusText(file))}</span>
+        <button
+          type="button"
+          data-config-action="reset-file"
+          data-kind="${escapeAttribute(file.kind)}"
+          data-id="${escapeAttribute(file.id)}"
+          aria-label="Reset ${escapeAttribute(label)}"
+          ${pending && !saving ? "" : "disabled"}
+        >Reset</button>
+        <button
+          type="button"
+          data-config-action="save-file"
+          data-kind="${escapeAttribute(file.kind)}"
+          data-id="${escapeAttribute(file.id)}"
+          aria-label="Save ${escapeAttribute(label)}"
+          ${dirty && !saving ? "" : "disabled"}
+        >Save</button>
+      </div>
+    `;
+  }
+
+  return {
+    calibrationProfileDescription,
+    calibrationProfileLabel,
+    configStepTargetOptions,
+    configProviderOptions,
+    configStepOptions,
+    countObjectKeys,
+    fileStatusText,
+    renderConfigInput,
+    renderConfigTextarea,
+    renderExecutionRoute,
+    renderFileActions,
+    renderSelectOptions,
+  };
+}

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

@@ -0,0 +1,251 @@
+import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
+import { isConfigObject } from "./config-model.js";
+
+export function createConfigModelRendering({
+  state,
+  calibrationProfileLabel,
+  configFileKey,
+  configProviderOptions,
+  configStepOptions,
+  getConfigPathValue,
+  renderConfigInput,
+  renderConfigTextarea,
+  renderExecutionRoute,
+  renderFileActions,
+  renderSelectOptions,
+}) {
+  function renderModelList(models) {
+    return `
+      <div class="config-model-list" aria-label="Model profiles">
+        <div class="config-model-list-title">
+          <span>Model profiles</span>
+          <small>${escapeHtml(String(models.length))}</small>
+        </div>
+        ${models
+          .map((model) => {
+            const active = model.id === state.selectedConfigModelId;
+            const capabilities = model.config?.capabilities?.inputModalities;
+            const hasImage =
+              Array.isArray(capabilities) && capabilities.includes("image");
+            return `
+              <button
+                class="config-model-button ${active ? "active" : ""}"
+                type="button"
+                data-config-action="select-model"
+                data-model-id="${escapeAttribute(model.id)}"
+                aria-pressed="${active ? "true" : "false"}"
+                ${active ? 'aria-current="true"' : ""}
+              >
+                <span>${escapeHtml(model.config?.label || model.id)}</span>
+                <small>
+                  <span>${escapeHtml(model.config?.provider || "-")}</span>
+                  <span>${escapeHtml(hasImage ? "image input" : "text input")}</span>
+                </small>
+              </button>
+            `;
+          })
+          .join("")}
+      </div>
+    `;
+  }
+
+  function renderCalibrationFormat(file, path) {
+    const value = getConfigPathValue(file.config, path);
+    if (isConfigObject(value)) {
+      return `
+        <div class="config-readonly-field" data-config-custom-format>
+          <strong>Custom JSON schema</strong>
+          <small>Edit in Raw JSON.</small>
+        </div>
+      `;
+    }
+    return renderConfigInput(file, path, {
+      type: "select",
+      values: ["", "json"],
+    });
+  }
+
+  function renderCalibrationCard(file, stepId, profile) {
+    const basePath = ["calibration", stepId];
+    const displayName =
+      textOf(profile?.name).trim() || calibrationProfileLabel(stepId);
+    const description = textOf(profile?.description).trim();
+    const calibrationKey = `${configFileKey(file)}:${stepId}`;
+    const expanded = state.expandedCalibrationKeys.has(calibrationKey);
+    return `
+      <details
+        class="config-calibration-card"
+        data-calibration-key="${escapeAttribute(calibrationKey)}"
+        ${expanded ? "open" : ""}
+      >
+        <summary class="config-calibration-title">
+          <span>
+            <strong>${escapeHtml(displayName)}</strong>
+            <small>${escapeHtml(description || "No description")}</small>
+          </span>
+          <code>${escapeHtml(stepId)}</code>
+        </summary>
+        <div class="config-calibration-body">
+          <div class="config-calibration-meta">
+            <label class="config-calibration-name-field">
+              <span>Name</span>
+              ${renderConfigInput(file, [...basePath, "name"])}
+            </label>
+            <label class="config-calibration-description-field">
+              <span>Description</span>
+              ${renderConfigTextarea(file, [...basePath, "description"], {
+                rows: 2,
+              })}
+            </label>
+          </div>
+          <div class="config-field-grid">
+            <label><span>Format</span>${renderCalibrationFormat(file, [
+              ...basePath,
+              "format",
+            ])}</label>
+            <label><span>Temperature</span>${renderConfigInput(
+              file,
+              [...basePath, "generation", "temperature"],
+              { type: "number", step: "0.01" },
+            )}</label>
+            <label><span>Top P</span>${renderConfigInput(
+              file,
+              [...basePath, "generation", "topP"],
+              { type: "number", step: "0.01" },
+            )}</label>
+            <label><span>Reasoning</span>${renderConfigInput(
+              file,
+              [...basePath, "generation", "reasoningEffort"],
+              {
+                type: "select",
+                values: [
+                  "",
+                  "none",
+                  "minimal",
+                  "low",
+                  "medium",
+                  "high",
+                  "xhigh",
+                ],
+              },
+            )}</label>
+          </div>
+          <button
+            class="config-icon-button config-calibration-remove"
+            type="button"
+            aria-label="Remove ${escapeAttribute(displayName)} calibration"
+            data-config-action="delete-path"
+            data-kind="${escapeAttribute(file.kind)}"
+            data-id="${escapeAttribute(file.id)}"
+            data-path="${escapeAttribute(JSON.stringify(basePath))}"
+          >Remove profile</button>
+        </div>
+      </details>
+    `;
+  }
+
+  function renderSelectedModelEditor(models) {
+    const model =
+      models.find((item) => item.id === state.selectedConfigModelId) ||
+      models[0];
+    if (!model) {
+      return '<div class="empty-state compact">No model configs found</div>';
+    }
+    state.selectedConfigModelId = model.id;
+    const calibration = isConfigObject(model.config?.calibration)
+      ? model.config.calibration
+      : {};
+    const calibrationCards = Object.entries(calibration)
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([stepId, profile]) => renderCalibrationCard(model, stepId, profile))
+      .join("");
+    const availableCalibrationProfiles = configStepOptions().filter(
+      (step) => !Object.prototype.hasOwnProperty.call(calibration, step),
+    );
+    return `
+      <section class="config-section config-model-editor">
+        <div class="config-section-header">
+          <div class="config-file-meta">
+            <h3>${escapeHtml(model.config?.label || model.id)}</h3>
+            <p>${escapeHtml(
+              `${model.config?.provider || "provider"} · ${
+                model.config?.model || model.id
+              }`,
+            )}</p>
+            <code>${escapeHtml(model.path)}</code>
+          </div>
+          ${renderFileActions(model)}
+        </div>
+        <div class="config-form-panel">
+          <div class="config-form-panel-title">
+            <strong>Model defaults</strong>
+            <span>Provider, generation, and base context limits.</span>
+          </div>
+          <div class="config-field-grid model-basics">
+            <label><span>Label</span>${renderConfigInput(model, ["label"])}</label>
+            <label><span>Provider</span>${renderConfigInput(
+              model,
+              ["provider"],
+              { type: "select", values: configProviderOptions() },
+            )}</label>
+            <label><span>Model</span>${renderConfigInput(model, ["model"])}</label>
+            ${renderConfigInput(model, ["supportsThinking"], {
+              type: "boolean",
+              label: "Thinking",
+            })}
+            <label><span>Temperature</span>${renderConfigInput(
+              model,
+              ["generation", "temperature"],
+              { type: "number", step: "0.01" },
+            )}</label>
+            <label><span>Top P</span>${renderConfigInput(
+              model,
+              ["generation", "topP"],
+              { type: "number", step: "0.01" },
+            )}</label>
+            <label><span>Context window</span>${renderConfigInput(
+              model,
+              ["contextWindowTokens"],
+              { type: "number", min: "1", step: "1" },
+            )}</label>
+          </div>
+          ${renderExecutionRoute(model)}
+        </div>
+        <div class="config-subheader">
+          <div>
+            <span>Invocation calibration</span>
+            <small>${escapeHtml(
+              Object.keys(calibration).length === 1
+                ? "1 profile"
+                : `${Object.keys(calibration).length} profiles`,
+            )}</small>
+          </div>
+          <div class="config-add-row compact">
+            <label>
+              <span>Add profile</span>
+              <select data-new-calibration-key>
+                <option value="">Choose invocation profile</option>
+                ${renderSelectOptions(availableCalibrationProfiles)}
+              </select>
+            </label>
+            <button
+              type="button"
+              data-config-action="add-calibration"
+              data-kind="model"
+              data-id="${escapeAttribute(model.id)}"
+              ${availableCalibrationProfiles.length ? "" : "disabled"}
+            >Add</button>
+          </div>
+        </div>
+        <div class="config-calibration-grid">
+          ${
+            calibrationCards ||
+            '<div class="empty-state compact">No calibration entries</div>'
+          }
+        </div>
+      </section>
+    `;
+  }
+
+  return { renderModelList, renderSelectedModelEditor };
+}

package/dist/src/web-ui/app/components/config-workspace/step-rendering.js

@@ -0,0 +1,145 @@
+import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
+import { isConfigObject } from "./config-model.js";
+
+export function createConfigStepRendering({
+  calibrationProfileDescription,
+  calibrationProfileLabel,
+  configStepTargetOptions,
+  configStepOptions,
+  getConfigPathValue,
+  renderFileActions,
+  renderSelectOptions,
+}) {
+  function stepsObject(file, path) {
+    const value = getConfigPathValue(file.config, path);
+    return isConfigObject(value) ? value : {};
+  }
+
+  function stepTargetCountLabel(count, sparseOverrides) {
+    const noun = sparseOverrides ? "override" : "mapping";
+    return `${count} ${count === 1 ? noun : `${noun}s`}`;
+  }
+
+  function renderStepsEditor(file, title, path, options = {}) {
+    const sparseOverrides = options.sparseOverrides === true;
+    const steps = stepsObject(file, path);
+    const stepOptions = configStepOptions();
+    const availableStepOptions = stepOptions.filter(
+      (step) => !Object.prototype.hasOwnProperty.call(steps, step),
+    );
+    const targetOptions = configStepTargetOptions();
+    const count = Object.keys(steps).length;
+    const sectionTitle = sparseOverrides ? "Routing overrides" : title;
+    const countLabel = stepTargetCountLabel(count, sparseOverrides);
+    const targetColumnLabel = sparseOverrides
+      ? "Override target"
+      : "Mapping target";
+    const targetControlLabel = sparseOverrides
+      ? "Override target"
+      : "Mapping target";
+    const rows = Object.entries(steps)
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([step, target]) => {
+        const targetId = textOf(target);
+        const description = calibrationProfileDescription(targetId);
+        return `
+          <div class="config-step-row">
+            <div class="config-step-key"><span>${escapeHtml(step)}</span></div>
+            <div class="config-profile-select-cell">
+              <select
+                aria-label="${targetControlLabel} for ${escapeAttribute(step)}"
+                data-config-action="step-value"
+                data-kind="${escapeAttribute(file.kind)}"
+                data-id="${escapeAttribute(file.id)}"
+                data-path="${escapeAttribute(JSON.stringify([...path, step]))}"
+              >
+                ${renderSelectOptions(targetOptions, targetId, {
+                  labelFor: calibrationProfileLabel,
+                })}
+              </select>
+              <small>${escapeHtml(
+                description || calibrationProfileLabel(targetId) || targetId,
+              )}</small>
+            </div>
+            ${
+              sparseOverrides
+                ? `<button
+                    class="config-icon-button"
+                    type="button"
+                    aria-label="Remove ${escapeAttribute(step)} override"
+                    data-config-action="delete-path"
+                    data-kind="${escapeAttribute(file.kind)}"
+                    data-id="${escapeAttribute(file.id)}"
+                    data-path="${escapeAttribute(JSON.stringify([...path, step]))}"
+                  >Remove</button>`
+                : "<span></span>"
+            }
+          </div>
+        `;
+      })
+      .join("");
+    return `
+      <section class="config-section config-steps-section">
+        <div class="config-section-header">
+          <div class="config-file-meta">
+            <h3>${escapeHtml(sectionTitle)}</h3>
+            <p>${escapeHtml(countLabel)}${
+              sparseOverrides
+                ? " · Unmapped steps use their own model step id."
+                : ""
+            }</p>
+            <code>${escapeHtml(file.path)}</code>
+          </div>
+          ${renderFileActions(file)}
+        </div>
+        <div class="config-step-list">
+            ${
+              rows
+                ? `<div class="config-step-header"><span>Model step</span><span>${targetColumnLabel}</span><span></span></div>${rows}`
+                : `<div class="empty-state compact">${
+                    sparseOverrides
+                      ? "No routing overrides. Registered steps use their own model step ids."
+                      : "No steps configured"
+                  }</div>`
+            }
+          </div>
+          <div class="config-add-row">
+            <div class="config-add-copy">
+              <strong>${sparseOverrides ? "Add override" : "Add mapping"}</strong>
+              <span>${
+                sparseOverrides
+                  ? "Override the identity target for a registered model step."
+                  : "Route a model step to a mapping target."
+              }</span>
+            </div>
+          <label>
+            <span>Model step</span>
+            <select data-new-step-key>
+              <option value="">Choose step</option>
+              ${renderSelectOptions(availableStepOptions)}
+            </select>
+          </label>
+          <label>
+            <span>${sparseOverrides ? "Target" : "Mapping target"}</span>
+            <select data-new-step-value>
+              <option value="">Choose target</option>
+              ${renderSelectOptions(targetOptions, "", {
+                labelFor: calibrationProfileLabel,
+              })}
+            </select>
+          </label>
+          <button
+            type="button"
+            data-config-action="add-step"
+            data-kind="${escapeAttribute(file.kind)}"
+            data-id="${escapeAttribute(file.id)}"
+            data-path="${escapeAttribute(JSON.stringify(path))}"
+            ${availableStepOptions.length ? "" : "disabled"}
+          >Add</button>
+        </div>
+      </section>
+    `;
+  }
+
+  return { renderStepsEditor };
+}