@abot-ai/runtime 1.0.0 → 1.2.0

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

@@ -1,875 +1,188 @@
-import { escapeAttribute, escapeHtml, textOf } from "../lib/text-format.js";
+import { createConfigDashboardRendering } from "./config-workspace/dashboard-rendering.js";
+import { createConfigFieldRendering } from "./config-workspace/field-rendering.js";
+import { createConfigWorkspaceModel } from "./config-workspace/config-model.js";
+import { createConfigModelRendering } from "./config-workspace/model-rendering.js";
+import { createConfigStepRendering } from "./config-workspace/step-rendering.js";
+import { createConfigWorkspaceEvents } from "./config-workspace/workspace-events.js";
+import { createConfigWorkspaceMutations } from "./config-workspace/workspace-mutations.js";
+import { createConfigWorkspacePersistence } from "./config-workspace/workspace-persistence.js";
+import { createConfigWorkspaceView } from "./config-workspace/workspace-view.js";
+
+export {
+  configValuesEqual,
+  executionPolicyValueForConfig,
+  modelContextWindowValidationError,
+  rawConfigDraftHasChanges,
+  resolveModelExecutionRoute,
+  runtimeConfigGraphChanged,
+} from "./config-workspace/config-model.js";
 
 export function createConfigWorkspace({
   dom,
   loadDashboard,
   saveFile,
+  memorySetup,
+  memoryManagement,
   recordControlEvent,
+  confirmDiscard = (message) => window.confirm(message),
+  eventTarget = window,
 }) {
-  const state = {
-    configDashboard: null,
-    selectedConfigModelId: "",
-    selectedRawConfigKey: "",
-    bound: false,
+  const workspaceModel = createConfigWorkspaceModel();
+  const { state } = workspaceModel;
+
+  const fieldRendering = createConfigFieldRendering({
+    state,
+    configFileKey: workspaceModel.configFileKey,
+    getConfigPathValue: workspaceModel.getConfigPathValue,
+    hasPendingFileChanges: workspaceModel.hasPendingFileChanges,
+    hasRawDraftChanges: workspaceModel.hasRawDraftChanges,
+    isFileDirty: workspaceModel.isFileDirty,
+  });
+
+  const stepRendering = createConfigStepRendering({
+    calibrationProfileDescription: fieldRendering.calibrationProfileDescription,
+    calibrationProfileLabel: fieldRendering.calibrationProfileLabel,
+    configStepTargetOptions: fieldRendering.configStepTargetOptions,
+    configStepOptions: fieldRendering.configStepOptions,
+    getConfigPathValue: workspaceModel.getConfigPathValue,
+    renderFileActions: fieldRendering.renderFileActions,
+    renderSelectOptions: fieldRendering.renderSelectOptions,
+  });
+
+  const modelRendering = createConfigModelRendering({
+    state,
+    calibrationProfileLabel: fieldRendering.calibrationProfileLabel,
+    configFileKey: workspaceModel.configFileKey,
+    configProviderOptions: fieldRendering.configProviderOptions,
+    configStepOptions: fieldRendering.configStepOptions,
+    getConfigPathValue: workspaceModel.getConfigPathValue,
+    renderConfigInput: fieldRendering.renderConfigInput,
+    renderConfigTextarea: fieldRendering.renderConfigTextarea,
+    renderExecutionRoute: fieldRendering.renderExecutionRoute,
+    renderFileActions: fieldRendering.renderFileActions,
+    renderSelectOptions: fieldRendering.renderSelectOptions,
+  });
+
+  const dashboardRendering = createConfigDashboardRendering({
+    state,
+    configFileEntries: workspaceModel.configFileEntries,
+    configFileKey: workspaceModel.configFileKey,
+    ensureRawSelection: workspaceModel.ensureRawSelection,
+    fileStatusText: fieldRendering.fileStatusText,
+    hasRawDraftChanges: workspaceModel.hasRawDraftChanges,
+    isFileDirty: workspaceModel.isFileDirty,
+    rawDraftFor: workspaceModel.rawDraftFor,
+    selectedRawConfigFile: workspaceModel.selectedRawConfigFile,
+  });
+
+  const workspaceView = createConfigWorkspaceView({
+    state,
+    dom,
+    eventTarget,
+    memorySetup,
+    memoryManagement,
+    configFileEntries: workspaceModel.configFileEntries,
+    configFileKey: workspaceModel.configFileKey,
+    countObjectKeys: fieldRendering.countObjectKeys,
+    dashboardIsBusy: workspaceModel.dashboardIsBusy,
+    dirtyFiles: workspaceModel.dirtyFiles,
+    ensureRawSelection: workspaceModel.ensureRawSelection,
+    fileStatusText: fieldRendering.fileStatusText,
+    hasPendingFileChanges: workspaceModel.hasPendingFileChanges,
+    hasRawDraftChanges: workspaceModel.hasRawDraftChanges,
+    isFileDirty: workspaceModel.isFileDirty,
+    rawDraftFor: workspaceModel.rawDraftFor,
+    renderCategoryPanel: dashboardRendering.renderCategoryPanel,
+    renderCategoryTab: dashboardRendering.renderCategoryTab,
+    renderConfigMap: dashboardRendering.renderConfigMap,
+    renderModelList: modelRendering.renderModelList,
+    renderSelectedModelEditor: modelRendering.renderSelectedModelEditor,
+    renderStepsEditor: stepRendering.renderStepsEditor,
+    selectedRawConfigFile: workspaceModel.selectedRawConfigFile,
+  });
+
+  const workspaceMutations = createConfigWorkspaceMutations({
+    state,
+    dom,
+    confirmDiscard,
+    recordControlEvent,
+    captureBaselines: workspaceModel.captureBaselines,
+    configFileEntries: workspaceModel.configFileEntries,
+    configFileKey: workspaceModel.configFileKey,
+    dirtyFiles: workspaceModel.dirtyFiles,
+    ensureRawSelection: workspaceModel.ensureRawSelection,
+    findConfigFile: workspaceModel.findConfigFile,
+    hasRawDraftChanges: workspaceModel.hasRawDraftChanges,
+    rawDraftFor: workspaceModel.rawDraftFor,
+    renderConfigDashboard: workspaceView.renderConfigDashboard,
+    selectedRawConfigFile: workspaceModel.selectedRawConfigFile,
+    setWorkspaceStatus: workspaceView.setWorkspaceStatus,
+    syncDirtyPresentation: workspaceView.syncDirtyPresentation,
+  });
+
+  const workspacePersistence = createConfigWorkspacePersistence({
+    state,
+    dom,
+    loadDashboard,
+    saveFile,
+    memorySetup,
+    memoryManagement,
+    recordControlEvent,
+    applyRawDraft: workspaceMutations.applyRawDraft,
+    baselineFor: workspaceModel.baselineFor,
+    clearDashboardSnapshot: workspaceMutations.clearDashboardSnapshot,
+    configFileKey: workspaceModel.configFileKey,
+    confirmDiscardChanges: workspaceMutations.confirmDiscardChanges,
+    dashboardIsBusy: workspaceModel.dashboardIsBusy,
+    dirtyFiles: workspaceModel.dirtyFiles,
+    findConfigFile: workspaceModel.findConfigFile,
+    hasRawDraftChanges: workspaceModel.hasRawDraftChanges,
+    hasUnsavedChanges: workspaceModel.hasUnsavedChanges,
+    isFileDirty: workspaceModel.isFileDirty,
+    replaceDashboard: workspaceMutations.replaceDashboard,
+    setWorkspaceStatus: workspaceView.setWorkspaceStatus,
+    syncDashboardInteractivity: workspaceView.syncDashboardInteractivity,
+    syncDirtyPresentation: workspaceView.syncDirtyPresentation,
+  });
+
+  const workspaceEvents = createConfigWorkspaceEvents({
+    state,
+    dom,
+    eventTarget,
+    activateCategory: workspaceView.activateCategory,
+    applyRawDraft: workspaceMutations.applyRawDraft,
+    changeRawFile: workspaceMutations.changeRawFile,
+    configFileKey: workspaceModel.configFileKey,
+    confirmDiscardChanges: workspaceMutations.confirmDiscardChanges,
+    dashboardIsBusy: workspaceModel.dashboardIsBusy,
+    deleteConfigPathValue: workspaceModel.deleteConfigPathValue,
+    findConfigFile: workspaceModel.findConfigFile,
+    hasUnsavedChanges: workspaceModel.hasUnsavedChanges,
+    loadRuntimeConfig: workspacePersistence.loadRuntimeConfig,
+    mutateConfigFile: workspaceMutations.mutateConfigFile,
+    parseConfigInputValue: workspaceModel.parseConfigInputValue,
+    parseConfigPath: workspaceModel.parseConfigPath,
+    pruneEmptyExecutionConfig: workspaceModel.pruneEmptyExecutionConfig,
+    renderConfigDashboard: workspaceView.renderConfigDashboard,
+    resetConfigFile: workspaceMutations.resetConfigFile,
+    saveConfigFile: workspacePersistence.saveConfigFile,
+    saveRawDraft: workspacePersistence.saveRawDraft,
+    selectedRawConfigFile: workspaceModel.selectedRawConfigFile,
+    setConfigPathValue: workspaceModel.setConfigPathValue,
+    setWorkspaceStatus: workspaceView.setWorkspaceStatus,
+    syncDirtyPresentation: workspaceView.syncDirtyPresentation,
+  });
+
+  return {
+    beginExternalRuntimeMutation:
+      workspacePersistence.beginExternalRuntimeMutation,
+    bind: workspaceEvents.bind,
+    confirmDiscardChanges: workspaceMutations.confirmDiscardChanges,
+    endExternalRuntimeMutation: workspacePersistence.endExternalRuntimeMutation,
+    hasUnsavedChanges: workspaceModel.hasUnsavedChanges,
+    load: workspacePersistence.loadRuntimeConfig,
+    prepareDiscardChanges: workspaceMutations.prepareDiscardChanges,
+    refreshAfterExternalRuntimeMutation:
+      workspacePersistence.refreshAfterExternalRuntimeMutation,
   };
-
-  async function loadRuntimeConfig() {
-    dom.configStatus.textContent = "Loading...";
-    dom.configDashboard.innerHTML = "";
-    dom.configRawEditor.value = "";
-    try {
-      const payload = await loadDashboard();
-      state.configDashboard = payload.dashboard || null;
-      const dashboard = state.configDashboard;
-      const files = configFileEntries();
-      if (!state.selectedConfigModelId && dashboard?.files?.models?.length) {
-        state.selectedConfigModelId = dashboard.files.models[0].id;
-      }
-      if (!state.selectedRawConfigKey && files.length) {
-        state.selectedRawConfigKey = configFileKey(files[0]);
-      }
-      dom.configStatus.innerHTML = "";
-      renderConfigDashboard();
-      renderRawConfigSelector();
-    } catch (error) {
-      dom.configStatus.innerHTML = `<span class="error-text">${escapeHtml(
-        error instanceof Error ? error.message : String(error),
-      )}</span>`;
-      dom.configDashboard.innerHTML = "";
-      dom.configRawEditor.value = "";
-    }
-  }
-
-  function configFileKey(file) {
-    return `${textOf(file?.kind)}:${textOf(file?.id)}`;
-  }
-
-  function configFileEntries() {
-    const files = state.configDashboard?.files;
-    if (!files) return [];
-    return [
-      files.runtime,
-      files.requestRunner,
-      ...(Array.isArray(files.models) ? files.models : []),
-    ].filter(Boolean);
-  }
-
-  function findConfigFile(kind, id = "") {
-    return configFileEntries().find(
-      (file) => file.kind === kind && (!id || file.id === id),
-    );
-  }
-
-  function getConfigPathValue(config, path) {
-    let current = config;
-    for (const key of path) {
-      if (!current || typeof current !== "object") return undefined;
-      current = current[key];
-    }
-    return current;
-  }
-
-  function setConfigPathValue(config, path, value) {
-    let current = config;
-    for (let index = 0; index < path.length - 1; index += 1) {
-      const key = path[index];
-      if (!current[key] || typeof current[key] !== "object") {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-    current[path[path.length - 1]] = value;
-  }
-
-  function deleteConfigPathValue(config, path) {
-    let current = config;
-    for (let index = 0; index < path.length - 1; index += 1) {
-      const key = path[index];
-      if (!current?.[key] || typeof current[key] !== "object") return;
-      current = current[key];
-    }
-    delete current[path[path.length - 1]];
-  }
-
-  function parseConfigPath(value) {
-    try {
-      const parsed = JSON.parse(textOf(value));
-      return Array.isArray(parsed) ? parsed.map(textOf) : [];
-    } catch {
-      return [];
-    }
-  }
-
-  function parseConfigInputValue(input) {
-    const type = input.dataset.valueType || "string";
-    if (type === "boolean") return input.checked;
-    if (type === "number") {
-      if (input.value.trim() === "") return undefined;
-      const value = Number(input.value);
-      return Number.isFinite(value) ? value : undefined;
-    }
-    return input.value;
-  }
-
-  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.step ? `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 renderConfigMetric(label, value) {
-    return `
-      <div class="config-metric">
-        <span>${escapeHtml(label)}</span>
-        <strong>${escapeHtml(value)}</strong>
-      </div>
-    `;
-  }
-
-  function countObjectKeys(value) {
-    return value && typeof value === "object" && !Array.isArray(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 runtime = state.configDashboard?.files?.runtime;
-    const providers = runtime?.config?.models?.providers;
-    return uniqueSorted(
-      providers && typeof providers === "object" && !Array.isArray(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,
-      ...(runnerSteps && typeof runnerSteps === "object"
-        ? Object.keys(runnerSteps)
-        : []),
-    ]);
-  }
-
-  function configInvocationProfileOptions() {
-    const files = state.configDashboard?.files;
-    const fromRunnerSteps = Object.values(
-      files?.requestRunner?.config?.models?.defaults?.steps || {},
-    );
-    const fromCalibration = (files?.models || []).flatMap((model) => {
-      const calibration = model.config?.calibration;
-      return calibration && typeof calibration === "object"
-        ? Object.keys(calibration)
-        : [];
-    });
-    return uniqueSorted([...fromRunnerSteps, ...fromCalibration]);
-  }
-
-  function calibrationProfileMetadataFrom(file, profileId) {
-    const metadata = file?.config?.calibration;
-    const entry =
-      metadata && typeof metadata === "object" && !Array.isArray(metadata)
-        ? metadata[profileId]
-        : null;
-    return entry && typeof entry === "object" && !Array.isArray(entry)
-      ? entry
-      : {};
-  }
-
-  function calibrationProfileMetadata(profileId) {
-    const files = state.configDashboard?.files;
-    const models = 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) {
-    const metadata = calibrationProfileMetadata(profileId);
-    return textOf(metadata.name).trim() || profileId;
-  }
-
-  function calibrationProfileDescription(profileId) {
-    return textOf(calibrationProfileMetadata(profileId).description).trim();
-  }
-
-  function renderSelectOptions(values, selectedValue = "", options = {}) {
-    const selected = textOf(selectedValue);
-    const allValues = uniqueSorted([selected, ...values]);
-    return allValues
-      .map((value) => {
-        const isSelected = value === selected;
-        const label = options.labelFor ? options.labelFor(value) : value;
-        return `<option value="${escapeAttribute(value)}" ${
-          isSelected ? "selected" : ""
-        }>${escapeHtml(label || value)}</option>`;
-      })
-      .join("");
-  }
-
-  function stepsObject(file, path) {
-    const value = getConfigPathValue(file.config, path);
-    return value && typeof value === "object" && !Array.isArray(value)
-      ? value
-      : {};
-  }
-
-  function renderStepsEditor(file, title, path) {
-    const steps = stepsObject(file, path);
-    const stepOptions = configStepOptions();
-    const profileOptions = configInvocationProfileOptions();
-    const count = Object.keys(steps).length;
-    const rows = Object.entries(steps)
-      .sort(([left], [right]) => left.localeCompare(right))
-      .map(([step, profile]) => {
-        const profileId = textOf(profile);
-        const description = calibrationProfileDescription(profileId);
-        const profileLabel = calibrationProfileLabel(profileId);
-        return `
-          <div class="config-step-row">
-            <div class="config-step-key">
-              <span>${escapeHtml(step)}</span>
-            </div>
-            <div class="config-profile-select-cell">
-              <select
-                data-config-action="step-value"
-                data-kind="${escapeAttribute(file.kind)}"
-                data-id="${escapeAttribute(file.id)}"
-                data-path="${escapeAttribute(JSON.stringify([...path, step]))}"
-              >
-                ${renderSelectOptions(profileOptions, profileId, {
-                  labelFor: calibrationProfileLabel,
-                })}
-              </select>
-              ${
-                description
-                  ? `<small>${escapeHtml(description)}</small>`
-                  : `<small>${escapeHtml(profileLabel || profileId)}</small>`
-              }
-            </div>
-            <button
-              class="config-icon-button"
-              type="button"
-              title="Remove step"
-              data-config-action="delete-path"
-              data-kind="${escapeAttribute(file.kind)}"
-              data-id="${escapeAttribute(file.id)}"
-              data-path="${escapeAttribute(JSON.stringify([...path, step]))}"
-            >×</button>
-          </div>
-        `;
-      })
-      .join("");
-    return `
-      <section class="config-section config-steps-section">
-        <div class="config-section-header">
-          <div>
-            <h4>${escapeHtml(title)}</h4>
-            <p>${escapeHtml(count === 1 ? "1 mapping" : `${count} mappings`)}</p>
-          </div>
-          <code>${escapeHtml(file.path)}</code>
-          <button type="button" data-config-action="save-file" data-kind="${escapeAttribute(
-            file.kind,
-          )}" data-id="${escapeAttribute(file.id)}">Save</button>
-        </div>
-        <div class="config-step-list">
-          ${
-            rows
-              ? `<div class="config-step-header"><span>Model step</span><span>Invocation profile</span><span></span></div>${rows}`
-              : '<div class="empty-state compact">No steps configured</div>'
-          }
-        </div>
-        <div class="config-add-row">
-          <div class="config-add-copy">
-            <strong>Add mapping</strong>
-            <span>Route a model step to an invocation profile.</span>
-          </div>
-          <label>
-            <span>Model step</span>
-            <select data-new-step-key>
-              <option value="">Choose step</option>
-              ${renderSelectOptions(stepOptions)}
-            </select>
-          </label>
-          <label>
-            <span>Invocation profile</span>
-            <select data-new-step-value>
-              <option value="">Choose profile</option>
-              ${renderSelectOptions(profileOptions, "", {
-                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))}"
-          >Add</button>
-        </div>
-      </section>
-    `;
-  }
-
-  function renderModelList(models) {
-    return `
-      <div class="config-model-list">
-        <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)}"
-              >
-                <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 renderCalibrationCard(file, stepId, profile) {
-    const basePath = ["calibration", stepId];
-    const displayName =
-      textOf(profile?.name).trim() || calibrationProfileLabel(stepId);
-    const description = textOf(profile?.description).trim();
-    return `
-      <article class="config-calibration-card">
-        <div class="config-calibration-title">
-          <div>
-            <strong>${escapeHtml(displayName)}</strong>
-            <span>${escapeHtml(description || "No description yet")}</span>
-          </div>
-          <code>${escapeHtml(stepId)}</code>
-          <button
-            class="config-icon-button"
-            type="button"
-            title="Remove calibration"
-            data-config-action="delete-path"
-            data-kind="${escapeAttribute(file.kind)}"
-            data-id="${escapeAttribute(file.id)}"
-            data-path="${escapeAttribute(JSON.stringify(basePath))}"
-          >×</button>
-        </div>
-        <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>${renderConfigInput(
-            file,
-            [...basePath, "format"],
-            {
-              type: "select",
-              values: ["", "json"],
-            },
-          )}</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>
-      </article>
-    `;
-  }
-
-  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 =
-      model.config?.calibration &&
-      typeof model.config.calibration === "object" &&
-      !Array.isArray(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("");
-    return `
-      <section class="config-section config-model-editor">
-        <div class="config-section-header">
-          <div>
-            <h4>${escapeHtml(model.config?.label || model.id)}</h4>
-            <p>${escapeHtml(model.path)}</p>
-          </div>
-          <div class="config-section-actions">
-            <span>${escapeHtml(model.config?.provider || "provider")} · ${escapeHtml(
-              model.config?.model || model.id,
-            )}</span>
-          <button type="button" data-config-action="save-file" data-kind="model" data-id="${escapeAttribute(
-            model.id,
-          )}">Save</button>
-          </div>
-        </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",
-              },
-            )}</label>
-          </div>
-        </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(configStepOptions())}
-              </select>
-            </label>
-            <button
-              type="button"
-              data-config-action="add-calibration"
-              data-kind="model"
-              data-id="${escapeAttribute(model.id)}"
-            >Add</button>
-          </div>
-        </div>
-        <div class="config-calibration-grid">
-          ${calibrationCards || '<div class="empty-state compact">No calibration entries</div>'}
-        </div>
-      </section>
-    `;
-  }
-
-  function renderConfigDashboard() {
-    const dashboard = state.configDashboard;
-    if (!dashboard?.files) {
-      dom.configDashboard.innerHTML =
-        '<div class="empty-state">No config dashboard data</div>';
-      return;
-    }
-    const runtime = dashboard.files.runtime;
-    const requestRunner = dashboard.files.requestRunner;
-    const models = Array.isArray(dashboard.files.models)
-      ? dashboard.files.models
-      : [];
-    const runnerSteps = requestRunner
-      ? countObjectKeys(requestRunner.config?.models?.defaults?.steps)
-      : 0;
-    dom.configDashboard.innerHTML = `
-      <div class="config-dashboard-header">
-        <div>
-          <p class="eyebrow">configuration workspace</p>
-          <h3>Runtime configuration</h3>
-          <span>Manage request routing and per-model calibration from one workspace.</span>
-        </div>
-        <div class="config-dashboard-context">
-          <code>${escapeHtml(dashboard.configDir || ".")}</code>
-        </div>
-      </div>
-      <div class="config-hero">
-        ${renderConfigMetric("Runtime", runtime?.exists ? "ready" : "missing")}
-        ${renderConfigMetric("Runner steps", String(runnerSteps))}
-        ${renderConfigMetric("Orchestration", "Supervisor")}
-        ${renderConfigMetric("Models", String(models.length))}
-      </div>
-      <div class="config-dashboard-grid">
-        <div class="config-loop-grid">
-          ${
-            requestRunner
-              ? renderStepsEditor(requestRunner, "Request pipeline", [
-                  "models",
-                  "defaults",
-                  "steps",
-                ])
-              : ""
-          }
-        </div>
-        <section class="config-section models-section">
-          <div class="config-section-header">
-            <div>
-              <h4>Models</h4>
-              <p>Model files and per-step calibration</p>
-            </div>
-            <span class="config-section-kicker">calibration workspace</span>
-          </div>
-          <div class="config-model-layout">
-            ${renderModelList(models)}
-            ${renderSelectedModelEditor(models)}
-          </div>
-        </section>
-        <section class="config-section config-files-section">
-          <div class="config-section-header">
-            <div>
-              <h4>Config map</h4>
-              <p>Linked files loaded by this runtime config</p>
-            </div>
-            <button type="button" data-config-action="save-file" data-kind="runtime" data-id="runtime">Save</button>
-          </div>
-          <div class="config-file-list">
-            ${configFileEntries()
-              .map(
-                (file) => `
-                  <div class="config-file-row">
-                    <span>${escapeHtml(file.label)}</span>
-                    <code>${escapeHtml(file.path)}</code>
-                  </div>
-                `,
-              )
-              .join("")}
-          </div>
-        </section>
-      </div>
-    `;
-    bindConfigDashboardControls();
-  }
-
-  function renderRawConfigSelector() {
-    const files = configFileEntries();
-    dom.configRawFileSelect.innerHTML = files
-      .map(
-        (file) =>
-          `<option value="${escapeAttribute(configFileKey(file))}">${escapeHtml(
-            file.label,
-          )}</option>`,
-      )
-      .join("");
-    if (
-      !files.some((file) => configFileKey(file) === state.selectedRawConfigKey)
-    ) {
-      state.selectedRawConfigKey = files[0] ? configFileKey(files[0]) : "";
-    }
-    dom.configRawFileSelect.value = state.selectedRawConfigKey;
-    syncRawConfigEditor();
-  }
-
-  function selectedRawConfigFile() {
-    return configFileEntries().find(
-      (file) => configFileKey(file) === state.selectedRawConfigKey,
-    );
-  }
-
-  function syncRawConfigEditor() {
-    const file = selectedRawConfigFile();
-    dom.configRawEditor.value = file
-      ? JSON.stringify(file.config || {}, null, 2)
-      : "";
-  }
-
-  function mutateConfigFile(kind, id, mutator) {
-    const file = findConfigFile(kind, id);
-    if (!file) return;
-    mutator(file.config);
-    renderConfigDashboard();
-    renderRawConfigSelector();
-  }
-
-  async function saveConfigFile(kind, id) {
-    const file = findConfigFile(kind, id);
-    if (!file) return;
-    const result = await saveFile({ kind, id, config: file.config });
-    recordControlEvent({
-      type: "control",
-      name: "Config saved",
-      tone: "done",
-      summary: result.backupPath
-        ? `backup: ${result.backupPath}`
-        : "restart required",
-    });
-    await loadRuntimeConfig();
-  }
-
-  function bindConfigDashboardControls() {
-    dom.configDashboard
-      .querySelectorAll("[data-config-action]")
-      .forEach((element) => {
-        const action = element.dataset.configAction;
-        if (action === "field" || action === "step-value") {
-          element.addEventListener("change", () => {
-            const path = parseConfigPath(element.dataset.path);
-            const value =
-              action === "step-value"
-                ? element.value
-                : parseConfigInputValue(element);
-            mutateConfigFile(
-              element.dataset.kind,
-              element.dataset.id,
-              (config) => {
-                if (value === undefined || value === "") {
-                  deleteConfigPathValue(config, path);
-                } else {
-                  setConfigPathValue(config, path, value);
-                }
-              },
-            );
-          });
-          return;
-        }
-        element.addEventListener("click", () => {
-          const kind = element.dataset.kind;
-          const id = element.dataset.id;
-          if (action === "select-model") {
-            state.selectedConfigModelId = element.dataset.modelId || "";
-            renderConfigDashboard();
-            return;
-          }
-          if (action === "save-file") {
-            void saveConfigFile(kind, id).catch((error) => {
-              recordControlEvent({
-                type: "control",
-                name: "Config save failed",
-                tone: "failed",
-                summary: error instanceof Error ? error.message : String(error),
-              });
-            });
-            return;
-          }
-          if (action === "delete-path") {
-            const path = parseConfigPath(element.dataset.path);
-            mutateConfigFile(kind, id, (config) =>
-              deleteConfigPathValue(config, path),
-            );
-            return;
-          }
-          if (action === "add-step") {
-            const row = element.closest(".config-add-row");
-            const step = textOf(
-              row?.querySelector("[data-new-step-key]")?.value,
-            ).trim();
-            const profile = textOf(
-              row?.querySelector("[data-new-step-value]")?.value,
-            ).trim();
-            if (!step || !profile) return;
-            const path = parseConfigPath(element.dataset.path);
-            mutateConfigFile(kind, id, (config) =>
-              setConfigPathValue(config, [...path, step], profile),
-            );
-            return;
-          }
-          if (action === "add-calibration") {
-            const row = element.closest(".config-add-row");
-            const step = textOf(
-              row?.querySelector("[data-new-calibration-key]")?.value,
-            ).trim();
-            if (!step) return;
-            mutateConfigFile(kind, id, (config) =>
-              setConfigPathValue(config, ["calibration", step], {
-                generation: {},
-                context: {},
-              }),
-            );
-          }
-        });
-      });
-  }
-
-  function bind() {
-    if (state.bound) return;
-    state.bound = true;
-    dom.refreshConfigButton.addEventListener("click", () => {
-      void loadRuntimeConfig();
-    });
-    dom.configRawFileSelect.addEventListener("change", () => {
-      state.selectedRawConfigKey = dom.configRawFileSelect.value;
-      syncRawConfigEditor();
-    });
-    dom.configApplyRawButton.addEventListener("click", () => {
-      const file = selectedRawConfigFile();
-      if (!file) return;
-      try {
-        const parsed = JSON.parse(dom.configRawEditor.value);
-        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-          throw new Error("Raw config must be a JSON object");
-        }
-        file.config = parsed;
-        renderConfigDashboard();
-        renderRawConfigSelector();
-      } catch (error) {
-        recordControlEvent({
-          type: "control",
-          name: "Raw config invalid",
-          tone: "failed",
-          summary: error instanceof Error ? error.message : String(error),
-        });
-      }
-    });
-    dom.configSaveRawButton.addEventListener("click", () => {
-      const file = selectedRawConfigFile();
-      if (!file) return;
-      try {
-        const parsed = JSON.parse(dom.configRawEditor.value);
-        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-          throw new Error("Raw config must be a JSON object");
-        }
-        file.config = parsed;
-        void saveConfigFile(file.kind, file.id).catch((error) => {
-          recordControlEvent({
-            type: "control",
-            name: "Config save failed",
-            tone: "failed",
-            summary: error instanceof Error ? error.message : String(error),
-          });
-        });
-      } catch (error) {
-        recordControlEvent({
-          type: "control",
-          name: "Raw config invalid",
-          tone: "failed",
-          summary: error instanceof Error ? error.message : String(error),
-        });
-      }
-    });
-  }
-
-  return { bind, load: loadRuntimeConfig };
 }