@abot-ai/runtime 1.4.0 → 1.6.0

package/dist/src/web-ui/app/app.js

@@ -1,3 +1,4 @@
+import { isWorkspaceChange } from "./lib/workspace-change.js";
 import { createAppState } from "./app-state.js";
 import { createProjectsFeature } from "./projects-feature.js";
 import {
@@ -5,10 +6,13 @@ import {
   isCurrentComposerSubmissionScope,
 } from "./lib/composer-submission-scope.js";
 import { createComposerSurfaceController } from "./controllers/composer-surface-controller.js";
-import { bootstrapWebApp } from "./app-bootstrap.js";
-import { bindRuntimeSetupPageLifecycle } from "./runtime-setup-page-lifecycle.js";
+import { startWebApp } from "./app-bootstrap.js";
+import { createNotificationsFeature } from "./notifications-feature.js";
+import { bindWebAppWorkspaceLifecycle } from "./app-page-bindings.js";
 import { createConfigurationFeature } from "./configuration-environment-refresh.js";
+import { isConfigurationWorkspace } from "./lib/configuration-pages.js";
 import { createDashboardFeature } from "./dashboard-feature.js";
+import { createPassiveLearningFeature } from "./passive-learning-feature.js";
 import { createComposerWorkspaceController } from "./controllers/composer-workspace-controller.js";
 import { createHomeComposerFeature } from "./controllers/home-composer-feature.js";
 import { createHomeConversationActivation } from "./controllers/home-conversation-activation.js";
@@ -26,7 +30,7 @@ import { createSessionComposerQueue } from "./lib/session-composer-queue.js";
 import { createRuntimeWebClient } from "./services/runtime-web-client.js";
 import { createClientPreferences } from "./services/client-preferences.js";
 import { createOperationsController } from "./controllers/operations-controller.js";
-import { createRealtimeTransport } from "./services/realtime-transport.js";
+import { createAppRealtimeTransport } from "./app-realtime-transport.js";
 import { createSteerController } from "./controllers/steer-controller.js";
 import { createSessionController } from "./controllers/session-controller.js";
 import { createComposerAttachmentsController } from "./controllers/composer-attachments-controller.js";
@@ -57,42 +61,31 @@ let conversationView;
 let configWorkspace;
 let schedulesFeature;
 let dashboardFeature;
+let passiveLearning;
 let homeComposer;
 let runtimeSelection;
 let projectsFeature;
+let workspaceRoutes;
+let notifications;
 const operationsController = createOperationsController({
   dom,
   client: runtimeClient,
+  getEnvironmentId: selectedEnvironmentId,
 });
-const realtimeTransport = createRealtimeTransport({
+const realtimeTransport = createAppRealtimeTransport({
+  state,
   getConfig: () => state.config,
   onMessage: handleRealtimeMessage,
-  onOpen: () => {
-    state.connected = true;
-    setConnectionLabel("Connected");
+  setConnectionLabel,
+  rejectPendingSteers,
+  recordControlEvent,
+  onConnected: () => {
+    void dashboardFeature?.refresh();
+    schedulesFeature?.reconnect();
+    passiveLearning?.reconnect();
+    notifications?.reconnect();
     if (state.currentSessionId) subscribeSession(state.currentSessionId);
   },
-  onClose: () => {
-    state.connected = false;
-    rejectPendingSteers(
-      "Realtime connection closed before steer was accepted.",
-    );
-    setConnectionLabel("Reconnecting", true);
-  },
-  onError: () => {
-    state.connected = false;
-    setConnectionLabel("Connection issue", true);
-  },
-  onParseError: (error, preview) => {
-    recordControlEvent({
-      type: "control",
-      name: "Realtime parse error",
-      tone: "failed",
-      summary: `${error instanceof Error ? error.message : String(error)}${
-        preview ? `: ${preview}` : ""
-      }`,
-    });
-  },
 });
 const steerController = createSteerController({
   sendRealtime,
@@ -107,8 +100,11 @@ const steerController = createSteerController({
 
 const shell = createWorkspaceShell({
   dom,
-  isWorkspaceAvailable: (destination) =>
-    schedulesFeature?.isWorkspaceAvailable(destination) ?? false,
+  onNavigationChange: () => workspaceRoutes?.sync(),
+  isWorkspaceAvailable: (destination) => {
+    if (!notifications?.isWorkspaceAvailable(destination)) return false;
+    return schedulesFeature?.isWorkspaceAvailable(destination) ?? false;
+  },
   onWorkspaceChange: (workspace) => {
     runtimeSelection?.rememberModelSelection();
     homeComposer?.setWorkspace(workspace);
@@ -117,6 +113,9 @@ const shell = createWorkspaceShell({
     runtimeSetupGuide.clearSecret();
     schedulesFeature?.setActive(workspace === "schedules");
     dashboardFeature?.setActive(workspace === "home");
+    passiveLearning?.setWorkspace(workspace);
+    notifications?.workspaceChanged(workspace);
+    configWorkspace?.setWorkspace(workspace);
     runtimeSelection?.applyModelSelection();
     runtimeSelection?.renderPermissionMode();
     renderAttachmentComposer();
@@ -126,14 +125,17 @@ const shell = createWorkspaceShell({
   beforeWorkspaceChange: ({ from, to }) => {
     if (from === "schedules" && to !== "schedules")
       return schedulesFeature?.prepareLeave() ?? true;
-    if (from !== "config" || to === "config") return true;
+    if (!isConfigurationWorkspace(from) || from === to) return true;
     if (!configWorkspace) return true;
     return configWorkspace.prepareDiscardChanges("leave configuration");
   },
 });
+notifications = createNotificationsFeature({
+  dom, state, client: runtimeClient, shell, getEnvironmentId: selectedEnvironmentId, send: sendRealtime,
+});
 const { guide: runtimeSetupGuide, controller: runtimeOnboarding } =
   createRuntimeOnboardingFeature({
-    dom,
+    dom, shell,
     runtimeClient,
     selectedEnvironmentId,
     state,
@@ -144,6 +146,10 @@ const { guide: runtimeSetupGuide, controller: runtimeOnboarding } =
       updateComposerSendState();
       renderAttachmentComposer();
       dashboardFeature?.runtimeAvailabilityChanged();
+      schedulesFeature?.runtimeAvailabilityChanged();
+      projectsFeature?.runtimeAvailabilityChanged();
+      passiveLearning?.runtimeAvailabilityChanged();
+      configWorkspace?.renderHomeGuidance();
     },
   });
 
@@ -153,16 +159,32 @@ const composerActions = createComposerActions({
 });
 schedulesFeature = createSchedulesFeature({
   dom,
+  onNavigationChange: () => workspaceRoutes?.sync(),
   client: runtimeClient,
   shell,
   selectedEnvironmentId,
   getCurrentSessionId: () => state.currentSessionId,
   getAgentModes: () => state.supportedAgentModes,
+  isRuntimeReady: runtimeOnboarding.isReady,
   openSession: (sessionId) => conversationSession.openSession(sessionId),
 });
+passiveLearning = createPassiveLearningFeature({
+  isRuntimeReady: runtimeOnboarding.isReady,
+  onChange: () => configWorkspace?.renderHomeGuidance(),
+  client: runtimeClient,
+  getEnvironmentId: selectedEnvironmentId,
+  learningRoot: dom.learningRoot,
+  openLearning: () => shell.activateWorkspace("learning"),
+  openComputerAccess: () => configWorkspace?.openComputerSetup(),
+  showActivityMemories: () => {
+    if (shell.activateWorkspace("memory"))
+      configWorkspace?.showActivityMemories();
+  },
+});
 dashboardFeature = createDashboardFeature({
   dom,
   state,
+  preferences,
   client: runtimeClient,
   shell,
   schedules: schedulesFeature,
@@ -170,9 +192,11 @@ dashboardFeature = createDashboardFeature({
   loadSessions,
   openSession: (sessionId) => conversationSession.openSession(sessionId),
   isComposerAvailable: runtimeOnboarding.isReady,
+  passiveLearning,
 });
 const composerWorkspace = createComposerWorkspaceController({
-  onSessionCreated: (sessionId) => runtimeSelection.initializeSessionMode(sessionId),
+  onSessionCreated: (sessionId) =>
+    runtimeSelection.initializeSessionMode(sessionId),
   state,
   dom,
   homeComposerHost: dashboardFeature.composerHost,
@@ -203,6 +227,7 @@ const sessionActionsMenu = createSessionActionsMenu({
 const sessionController = createSessionController({
   state,
   dom,
+  onSidebarChange: renderSessions,
   sessionActionsMenu,
   renderGroups: (input) => projectsFeature?.renderSessionGroups(input) ?? false,
   shell,
@@ -265,6 +290,7 @@ conversationView = createConversationView({
       state.contextWindowByRequest.get(textOf(message.requestId)) || null,
   }),
   getPendingApproval: toolApprovalController.pendingEvent,
+  getPendingApprovals: toolApprovalController.pendingEvents,
   createApprovalCard: toolApprovalController.createCard,
   copyText: (text) => navigator.clipboard.writeText(text),
   notify: (message, tone) => shell.showToast(message, tone),
@@ -273,7 +299,8 @@ conversationView = createConversationView({
   canOpenSchedule: runtimeClient.supportsSchedules,
 });
 conversationSession = createConversationSessionController({
-  onSessionCreated: (sessionId) => runtimeSelection.initializeSessionMode(sessionId),
+  onSessionCreated: (sessionId) =>
+    runtimeSelection.initializeSessionMode(sessionId),
   state,
   dom,
   client: runtimeClient,
@@ -309,7 +336,9 @@ conversationSession = createConversationSessionController({
     composerQueueController.isCurrentScope(scope),
 });
 projectsFeature = createProjectsFeature({
-  onSessionCreated: (sessionId) => runtimeSelection.initializeSessionMode(sessionId),
+  isRuntimeReady: runtimeOnboarding.isReady,
+  onSessionCreated: (sessionId) =>
+    runtimeSelection.initializeSessionMode(sessionId),
   dom,
   state,
   client: runtimeClient,
@@ -395,13 +424,11 @@ realtimeEvents = createRealtimeEventController({
   scheduleThinkingRender,
   cancelScheduledMessageRender,
   cancelScheduledThinkingRender,
-  forgetThinkingDisclosure: (messageId) =>
-    conversationView.forgetThinkingDisclosure(messageId),
   markCurrentSessionReadSoon: conversationSession.markCurrentSessionReadSoon,
   applySessionTitleUpdate: conversationSession.applySessionTitleUpdate,
   setMessageActivityStatus,
   updateComposerSendState,
-  drainQueuedComposerMessage,
+  drainQueuedComposerMessage: (scope) => composerQueueController.drain(scope),
   loadSessions: conversationSession.loadSessions,
 });
 
@@ -487,7 +514,9 @@ homeComposer = createHomeComposerFeature({
   },
 });
 const appEventBindings = createAppEventBindings({
-  onSessionCreated: (sessionId) => runtimeSelection.initializeSessionMode(sessionId),
+  onNavigationChange: () => workspaceRoutes?.sync(),
+  onSessionCreated: (sessionId) =>
+    runtimeSelection.initializeSessionMode(sessionId),
   state,
   dom,
   shell,
@@ -496,7 +525,7 @@ const appEventBindings = createAppEventBindings({
   actions: {
     renderSessions,
     loadSessions,
-    suspendQueueRecovery: suspendRecoveredComposerReleaseForNavigation,
+    prepareQueueRecovery: () => composerQueueController.prepareRecoveryForNavigation(),
     saveSessionId: saveSessionIdForEnvironment,
     selectedEnvironmentId,
     rememberModelSelection: rememberCurrentModelSelection,
@@ -534,6 +563,9 @@ const appEventBindings = createAppEventBindings({
 });
 
 configWorkspace = createConfigurationFeature({
+  getLearningSnapshot: () => passiveLearning?.snapshot(),
+  isRuntimeReady: runtimeOnboarding.isReady,
+  onNavigationChange: () => workspaceRoutes?.sync(),
   state,
   selection: runtimeSelection,
   onConfigurationApplied: loadModels,
@@ -627,7 +659,9 @@ function renderSessions() {
 }
 
 function renderMessages() {
+  notifications?.presenceChanged();
   conversationView.render();
+  workspaceRoutes?.sync();
 }
 
 function scheduleThinkingRender() {
@@ -679,7 +713,11 @@ function rejectPendingSteers(reason) {
 }
 
 function handleRealtimeMessage(message) {
-  realtimeEvents.handle(message);
+  dashboardFeature?.handleRealtime(message);
+  schedulesFeature?.handleRealtime(message);
+  passiveLearning?.handleRealtime(message);
+  notifications?.handleRealtime(message);
+  if (!isWorkspaceChange(message)) realtimeEvents.handle(message);
 }
 
 function sendRealtime(payload) {
@@ -702,18 +740,6 @@ async function restoreLastSession() {
   return conversationSession.restoreLastSession();
 }
 
-async function drainQueuedComposerMessage({
-  environmentId,
-  sessionId,
-  terminalRequestId,
-}) {
-  await composerQueueController.drain({
-    environmentId,
-    sessionId,
-    terminalRequestId,
-  });
-}
-
 async function loadRuntimeStatus() {
   await operationsController.loadRuntimeStatus();
 }
@@ -726,39 +752,21 @@ async function loadSystemHealth() {
   await operationsController.loadSystemHealth();
 }
 
-function bindEvents() {
-  appEventBindings.bind();
-  bindRuntimeSetupPageLifecycle({
-    page: window,
-    dispose: runtimeSetupGuide.dispose,
-    reloadModels: loadModels,
-  });
-  document.addEventListener(
-    "visibilitychange",
-    conversationSession.markCurrentSessionReadSoon,
-  );
-  dom.environmentSelect.addEventListener("change", () => {
-    homeComposer.environmentChanged();
-    dashboardFeature.environmentChanged();
-  });
-}
-
-function suspendRecoveredComposerReleaseForNavigation() {
-  return composerQueueController.suspendRecoveryForNavigation();
-}
-
-void bootstrapWebApp({
+void startWebApp({
   state,
   dom,
   preferences,
   shell,
   homeComposer,
   dashboard: dashboardFeature,
+  learning: passiveLearning,
+  notifications,
   schedules: schedulesFeature,
   projects: projectsFeature,
   selection: runtimeSelection,
   client: runtimeClient,
   bindables: [
+    notifications,
     sessionActionsMenu,
     projectsFeature,
     conversationView,
@@ -767,7 +775,11 @@ void bootstrapWebApp({
     modelSelector,
     runtimeOnboarding,
   ],
-  bindEvents,
+  bindEvents: () => bindWebAppWorkspaceLifecycle({
+    appEventBindings, dom, runtimeSetupGuide, reloadModels: loadModels,
+    conversationSession, homeComposer, dashboardFeature, passiveLearning, notifications,
+    operations: operationsController,
+  }),
   renderComposer: () => {
     resizeComposerInput();
     updateComposerSendState();
@@ -777,9 +789,6 @@ void bootstrapWebApp({
   configuration: configWorkspace,
   realtime: realtimeTransport,
   restoreLastSession,
-}).catch((error) => {
-  setConnectionLabel(
-    error instanceof Error ? error.message : String(error),
-    true,
-  );
+  navigation: { bindings: appEventBindings, conversation: conversationSession },
+  onNavigationReady: (routes) => (workspaceRoutes = routes),
 });

package/dist/src/web-ui/app/automations-feature.js

@@ -0,0 +1,103 @@
+import { createAutomationsController } from "./controllers/automations-controller.js";
+import { createAutomationsWorkspace } from "./components/automations/workspace.js";
+import { createAutomationChatRunProjection } from "./components/automations/chat-run-projection.js";
+import { openAutomationAuthoringChat } from "./components/automations/authoring-entry.js";
+
+export function createAutomationsFeature({
+  dom, client, shell, realtime, getEnvironmentId, onNavigationChange,
+  documentRoot = document,
+}) {
+  if (!dom.automationsRoot || !dom.automationsWorkspaceButton || !dom.automationChatRunPanel) {
+    return {
+      refreshAvailability() {},
+      isWorkspaceAvailable: (destination) => destination !== "automations",
+      selectedAutomationId: () => "", selectedRunId: () => "",
+      navigationRevision: () => 0, openRoute: async () => false,
+      prepareRouteChange: () => true,
+      chatRunId: () => "", openChatRun: async () => false,
+    };
+  }
+  let view;
+  const controller = createAutomationsController({
+    client, getEnvironmentId, onNavigationChange,
+    isEditingDirty: () => view?.isDirty() || false,
+    render: (snapshot) => view?.render(snapshot),
+  });
+  const chatRun = createAutomationChatRunProjection({
+    dom, client, getEnvironmentId, onNavigationChange,
+    returnToStudio: (run) => {
+      chatRun.clear();
+      if (!shell.activateWorkspace("automations")) return;
+      void controller.openRoute(run?.automationId || "", run?.id || "");
+    },
+  });
+  view = createAutomationsWorkspace({
+    root: dom.automationsRoot,
+    actions: {
+      ...controller,
+      openAuthoringChat(automationId, revision) {
+        return openAutomationAuthoringChat({ dom, shell, automationId, revision });
+      },
+      showChatRun(runId) {
+        if (!shell.activateWorkspace("chat")) return false;
+        return chatRun.open(runId);
+      },
+    },
+    documentRoot,
+  });
+  shell.addWorkspaceGuard(({ from, to }) => {
+    if (from !== "automations" || to === "automations") return true;
+    return view.prepareLeave();
+  });
+  dom.chatWorkspaceButton.addEventListener("click", () => chatRun.clear());
+  shell.subscribeWorkspaceChange((workspace) => {
+    controller.setWorkspaceActive(workspace === "automations");
+    chatRun.workspaceChanged(workspace);
+  });
+  dom.environmentSelect.addEventListener("change", () => queueMicrotask(() => {
+    controller.environmentChanged();
+    chatRun.clear();
+  }));
+  documentRoot.addEventListener("visibilitychange", () => {
+    controller.visibilityChanged();
+    chatRun.visibilityChanged();
+  });
+  realtime.subscribeMessages?.((message) => {
+    controller.handleRealtime(message);
+    chatRun.handleRealtime(message);
+  });
+  realtime.subscribeConnected?.(() => {
+    controller.reconnect();
+    chatRun.reconnect();
+  });
+  return {
+    refreshAvailability() {
+      const available = client.supportsAutomations();
+      dom.automationsWorkspaceButton.hidden = !available;
+      dom.automationsWorkspaceButton.disabled = !available || dom.automationsWorkspaceButton.dataset.onboardingBlocked === "true";
+      if (!available) controller.setWorkspaceActive(false);
+      if (!available) chatRun.clear();
+    },
+    isWorkspaceAvailable(destination) {
+      return destination !== "automations" || client.supportsAutomations();
+    },
+    selectedAutomationId: controller.selectedAutomationId,
+    selectedRunId: controller.selectedRunId,
+    chatRunId: chatRun.runId,
+    navigationRevision: controller.navigationRevision,
+    openRoute: controller.openRoute,
+    async openChatRun(runId) {
+      if (runId) shell.setSessionsDrawerOpen(false, { focus: false });
+      await chatRun.open(runId);
+      return true;
+    },
+    prepareRouteChange(route) {
+      if (shell.activeWorkspace() !== "automations") return true;
+      const changesIdentity = route.workspace !== "automations" ||
+        route.automation !== controller.selectedAutomationId() ||
+        route.run !== controller.selectedRunId() ||
+        route.environment !== getEnvironmentId();
+      return !changesIdentity || view.prepareLeave();
+    },
+  };
+}

package/dist/src/web-ui/app/components/automations/archive-actions.js

@@ -0,0 +1,20 @@
+export function createAutomationArchiveCommands({ actions, getCurrent, requireSavedGraph,
+  confirmDiscard, onFilterChange }) {
+  return {
+    archive: async () => {
+      if (!requireSavedGraph()) return;
+      const current = getCurrent();
+      const selected = current.automations.find((item) => item.id === current.selectedAutomationId);
+      if (!selected?.publishedRevision || selected.status === "archived") return;
+      if (!confirmDiscard("Archive this automation? Its schedule will pause, and its runs and reports will remain available.")) return;
+      if (await actions.archive()) onFilterChange(true);
+    },
+    restore: async () => {
+      if (!requireSavedGraph()) return;
+      const current = getCurrent();
+      const selected = current.automations.find((item) => item.id === current.selectedAutomationId);
+      if (selected?.status !== "archived") return;
+      if (await actions.restore()) onFilterChange(false);
+    },
+  };
+}

package/dist/src/web-ui/app/components/automations/authoring-entry.js

@@ -0,0 +1,25 @@
+export function automationAuthoringStarter(automationId = "", revision = 0) {
+  const draftOnlyScope = "Design the future workflow; do not carry out its steps now. Leave permission grants, publication and execution to me.";
+  const hasExactDraftRevision = automationId && Number.isInteger(revision) && revision > 0;
+  if (hasExactDraftRevision)
+    return `Help me refine ABot Studio automation ${automationId} (draft revision ${revision}). ${draftOnlyScope} Read this exact draft first, then save the related changes together, including the connections between steps. I want to change: `;
+  return `Help me build an automation in ABot Studio. ${draftOnlyScope} Save the complete draft with its steps connected. I want it to: `;
+}
+
+/** Opens a normal editable chat; the visible message is the only draft association. */
+export function openAutomationAuthoringChat({
+  dom, shell, automationId = "", revision = 0,
+  confirmReplace = (message) => globalThis.confirm(message),
+}) {
+  const composer = dom.composerInput;
+  if (!composer || !dom.newSessionButton) return false;
+  if (composer.value.trim() && !confirmReplace("Replace your unsent chat message with an automation starter?"))
+    return false;
+  dom.newSessionButton.click();
+  if (shell.activeWorkspace() !== "chat") return false;
+  composer.value = automationAuthoringStarter(automationId, revision);
+  const EventType = composer.ownerDocument?.defaultView?.Event || globalThis.Event;
+  composer.dispatchEvent(new EventType("input", { bubbles: true }));
+  composer.focus();
+  return true;
+}

package/dist/src/web-ui/app/components/automations/binding-editor.js

@@ -0,0 +1,101 @@
+import { renderBindingRow } from "./binding-fields.js";
+import { captureSchemaLiteralDraft, handleSchemaLiteralClick, readBindingSchema } from "./schema-literal-inputs.js";
+
+export function refreshAutomationInputNotice(form) {
+  const notice = form?.querySelector("[data-input-connection]");
+  if (!notice) return;
+  const connected = [...form.querySelectorAll('[data-binding-fields="inputs"] [data-binding-row]')]
+    .some((row) => {
+      const kind = row.querySelector("[data-binding-kind]")?.value;
+      if (kind !== "node_result" && kind !== "branch_results") return false;
+      return Boolean(row.querySelector("[data-binding-value]")?.value.trim() &&
+        row.querySelector("[data-binding-key]")?.value.trim());
+    });
+  notice.hidden = connected;
+  notice.dataset.inputConnection = connected ? "connected" : "none";
+}
+
+function appendInputRow(fields, key, binding, producers, documentRoot) {
+  const wrapper = documentRoot.createElement("div");
+  wrapper.innerHTML = renderBindingRow(key, binding, { removable: true, producers });
+  const row = wrapper.firstElementChild;
+  fields.insertBefore(row, fields.querySelector("[data-binding-actions]"));
+  row.querySelector("[data-binding-key]")?.focus();
+  refreshAutomationInputNotice(fields.closest("form"));
+}
+
+function nextInputName(fields) {
+  const names = new Set([...fields.querySelectorAll("[data-binding-key]")]
+    .map((input) => input.value.trim()));
+  if (!names.has("source")) return "source";
+  let index = 2;
+  while (names.has(`source_${index}`)) index += 1;
+  return `source_${index}`;
+}
+
+export function handleAutomationBindingClick(element, producers, documentRoot) {
+  if (handleSchemaLiteralClick(element)) return true;
+  if (element.dataset.removeBinding !== undefined) {
+    const form = element.closest("form");
+    element.closest("[data-binding-row]")?.remove();
+    refreshAutomationInputNotice(form);
+    return true;
+  }
+  const fields = element.closest("[data-binding-fields]");
+  if (!fields) return false;
+  if (element.dataset.addResultBinding !== undefined) {
+    const source = fields.querySelector("[data-connect-result-source]");
+    const producer = producers.find((candidate) => candidate.id === source?.value);
+    if (!producer) {
+      source?.focus();
+      return false;
+    }
+    const binding = producer.kind === "parallel"
+      ? { kind: "branch_results", parallelNodeId: producer.id }
+      : { kind: "node_result", nodeId: producer.id, select: "text" };
+    appendInputRow(fields, nextInputName(fields), binding, producers, documentRoot);
+    return true;
+  }
+  if (element.dataset.addBinding === undefined) return false;
+  appendInputRow(fields, "", { kind: "literal", value: "" }, producers, documentRoot);
+  return true;
+}
+
+export function changeAutomationBindingKind(selector, producers, documentRoot) {
+  const row = selector.closest("[data-binding-row]");
+  const previousKind = row.dataset.bindingCurrentKind;
+  const drafts = JSON.parse(row.dataset.bindingDrafts || "{}");
+  drafts[previousKind] = {
+    value: row.querySelector("[data-binding-value]")?.value || "",
+    literalType: row.querySelector("[data-binding-literal-type]").value,
+    select: row.querySelector("[data-binding-output]")?.value,
+    pointer: row.querySelector("[data-binding-pointer]")?.value,
+    fileField: row.querySelector("[data-binding-file-field]")?.value,
+    schemaLiteral: captureSchemaLiteralDraft(row),
+  };
+  const selected = drafts[selector.value] || {};
+  const value = selected.value;
+  const replacement = documentRoot.createElement("div");
+  replacement.innerHTML = renderBindingRow(row.querySelector("[data-binding-key]").value, {
+    kind: selector.value, value, nodeId: value, input: value,
+    fileName: value,
+    index: Number(value) || 0, parallelNodeId: value,
+    select: selected.select,
+    pointer: selected.pointer,
+    field: selected.fileField,
+  }, {
+    removable: Boolean(row.querySelector("[data-remove-binding]")),
+    required: row.dataset.bindingRequired === "true",
+    optional: row.dataset.bindingOptional === "true",
+    toolInput: row.dataset.bindingToolInput === "true",
+    property: readBindingSchema(row),
+    multiline: row.dataset.bindingMultiline === "true",
+    literalDraft: selected.schemaLiteral,
+    literalType: selected.literalType || row.querySelector("[data-binding-literal-type]").value,
+    drafts,
+    producers,
+  });
+  const nextRow = replacement.firstElementChild;
+  row.replaceWith(nextRow);
+  refreshAutomationInputNotice(nextRow.closest("form"));
+}