@abot-ai/runtime 1.9.0 → 2.0.0

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

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../confirmation-dialog.js";
 import { updateLiveRegion } from "../../lib/live-region.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { scheduleTimeLabel } from "../../lib/schedule-message.js";
@@ -18,11 +19,13 @@ export function createSchedulesWorkspace({
   root,
   actions,
   getCurrentSessionId,
+  getEnvironmentId = () => "",
   getAgentModes,
   documentRoot = document,
-  confirmDiscard = (message) => window.confirm(message),
+  confirmDiscard = (message) => confirmDialog(message, { title: "Unsaved schedule", confirmLabel: "Discard changes", tone: "danger" }),
 }) {
   let editorIdentity = null;
+  let leaveRevision = 0;
   root.innerHTML = `<div class="schedules-content"><div class="schedules-toolbar"><label class="schedule-search"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><input type="search" placeholder="Search schedules…" aria-label="Search schedules"></label>
     <select aria-label="Filter schedule status"><option value="current">Active &amp; paused</option><option value="active">Active</option><option value="paused">Paused</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option><option value="all">All statuses</option></select>
     <button type="button" data-refresh>Refresh</button><button type="button" class="primary-button" data-create>New schedule</button></div>
@@ -40,49 +43,58 @@ export function createSchedulesWorkspace({
   const workspaceState = root.querySelector(".schedule-workspace-state");
   search.addEventListener("input", applyFilter);
   filter.addEventListener("change", applyFilter);
-  root.querySelector("[data-refresh]").addEventListener("click", () => {
-    if (prepareLeave()) void actions.load();
+  root.querySelector("[data-refresh]").addEventListener("click", async () => {
+    if (await prepareLeave()) void actions.load();
   });
-  createButton.addEventListener("click", () => {
-    if (prepareLeave()) actions.beginEdit();
+  createButton.addEventListener("click", async () => {
+    if (await prepareLeave()) actions.beginEdit();
   });
 
-  function prepareLeave() {
-    const prepared = prepareEnvironmentChange();
-    if (!prepared) return false;
+  async function prepareLeave() {
+    const prepared = await prepareEnvironmentChange();
+    if (!prepared || prepared.canCommit() === false) return false;
     prepared();
     return true;
   }
 
-  function prepareEnvironmentChange() {
+  async function prepareEnvironmentChange() {
+    const request = ++leaveRevision;
+    const environmentId = getEnvironmentId();
     const editor = actions.snapshot().editor;
-    if (editor && !canDiscardScheduleDraft()) return null;
     const form = details.querySelector(".schedule-editor");
     const fingerprint = scheduleDraftFingerprint(form);
-    const commit = () => { if (editor) actions.cancelEdit(); };
+    const commit = () => {
+      if (!commit.canCommit()) return false;
+      if (editor) actions.cancelEdit();
+      return true;
+    };
     commit.canCommit = () => {
+      if (request !== leaveRevision) return false;
+      if (environmentId !== getEnvironmentId()) return false;
       if (actions.snapshot().mutation) return false;
       if (actions.snapshot().editor !== editor) return false;
       if (details.querySelector(".schedule-editor") !== form) return false;
       return scheduleDraftFingerprint(form) === fingerprint;
     };
-    return commit;
+    if (editor && !await canDiscardScheduleDraft()) return null;
+    return commit.canCommit() ? commit : null;
   }
 
   function scheduleDraftFingerprint(form) {
     return form ? JSON.stringify([...new FormData(form)]) : "";
   }
 
-  function canDiscardScheduleDraft() {
+  async function canDiscardScheduleDraft() {
     const form = details.querySelector(".schedule-editor");
     if (form?.dataset.dirty !== "true") return true;
-    return confirmDiscard("Discard this unsaved schedule?");
+    return await confirmDiscard("Discard this unsaved schedule?");
   }
 
-  function applyFilter() {
+  async function applyFilter() {
     const query = search.value;
     const status = filter.value;
-    if (!prepareLeave()) {
+    if (!await prepareLeave()) {
+      if (search.value !== query || filter.value !== status) return;
       const snapshot = actions.snapshot();
       search.value = snapshot.query;
       filter.value = snapshot.filter;
@@ -93,9 +105,9 @@ export function createSchedulesWorkspace({
 
   function bindListActions() {
     for (const button of list.querySelectorAll("[data-job-id]")) {
-      button.addEventListener("click", () => {
+      button.addEventListener("click", async () => {
         if (button.dataset.jobId === actions.snapshot().selectedId) return;
-        if (prepareLeave()) void actions.select(button.dataset.jobId);
+        if (await prepareLeave()) void actions.select(button.dataset.jobId);
       });
     }
   }

package/dist/src/web-ui/app/components/session-list-viewport.js

@@ -0,0 +1,49 @@
+const positions = new WeakMap();
+
+function isSessionListVisible(root) {
+  if (!root) return false;
+  return root.getClientRects?.().length !== 0;
+}
+
+function captureSessionListFocus(root) {
+  const focusedElement = root.ownerDocument?.activeElement;
+  if (!root.contains?.(focusedElement)) return null;
+  return focusedElement;
+}
+
+function canRestoreSessionListFocus(root, focusedElement) {
+  if (!focusedElement) return false;
+  if (!root.contains?.(focusedElement)) return false;
+  if (focusedElement.getClientRects?.().length === 0) return false;
+  const activeElement = root.ownerDocument?.activeElement;
+  if (activeElement === focusedElement) return false;
+  if (!activeElement) return true;
+  return activeElement === root.ownerDocument?.body;
+}
+
+export function captureSessionListViewport(root, scope) {
+  if (!root) return;
+  const previous = positions.get(root);
+  if (scope !== undefined && previous?.scope !== scope) {
+    positions.set(root, { scope, scrollTop: 0 });
+    return;
+  }
+  if (!isSessionListVisible(root)) return;
+  positions.set(root, {
+    scope: previous?.scope,
+    scrollTop: Number(root.scrollTop) || 0,
+    focusedElement: captureSessionListFocus(root),
+  });
+}
+
+export function restoreSessionListViewport(root) {
+  const position = positions.get(root);
+  if (!position) return;
+  const focusedElement = position.focusedElement;
+  delete position.focusedElement;
+  if (!isSessionListVisible(root)) return;
+  if (canRestoreSessionListFocus(root, focusedElement)) {
+    focusedElement.focus({ preventScroll: true });
+  }
+  root.scrollTop = position.scrollTop;
+}

package/dist/src/web-ui/app/components/session-search-disclosure.js

@@ -0,0 +1,27 @@
+export function bindSessionSearchDisclosure({ toggle, field, input }) {
+  function closeSearch() {
+    field.hidden = true;
+    toggle.setAttribute("aria-expanded", "false");
+    if (input.value) {
+      input.value = "";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    toggle.focus();
+  }
+
+  toggle.addEventListener("click", () => {
+    if (!field.hidden) {
+      closeSearch();
+      return;
+    }
+    field.hidden = false;
+    toggle.setAttribute("aria-expanded", "true");
+    input.focus();
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    closeSearch();
+  });
+}

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

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../confirmation-dialog.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 
 /** Mounts the existing shell's navigation/panel contract without growing index.html. */
@@ -30,7 +31,7 @@ export function renderSkillRows(snapshot) {
   return items.map((item) => `<button type="button" class="config-model-button skills-list-item" data-skill-id="${escapeAttribute(item.skillId)}" aria-pressed="${item.skillId === snapshot.skill?.skillId}"><strong dir="auto">${escapeHtml(item.name)}</strong><span dir="auto">${escapeHtml(item.description)}</span></button>`).join("");
 }
 
-export function createSkillsWorkspace({ root, actions, confirmArchive = (message) => window.confirm(message) }) {
+export function createSkillsWorkspace({ root, actions, confirmArchive = (message) => confirmDialog(message, { title: "Archive Skill", confirmLabel: "Archive", tone: "danger" }) }) {
   root.innerHTML = `<div class="config-dashboard skills-workspace-content"><div class="skills-toolbar"><div class="skills-filters" role="group" aria-label="Skill status"><button type="button" class="config-category-tab" data-skills-filter="active" aria-pressed="true">Active</button><button type="button" class="config-category-tab" data-skills-filter="archived" aria-pressed="false">Archived</button></div><div class="skills-toolbar-actions"><button type="button" data-skills-refresh>Refresh</button><button type="button" class="primary-button" data-skills-new>New Skill</button></div></div><p class="skills-intro">Personal Skills guide how ABot works. Built-in Skills are maintained by ABot.</p><p class="skills-feedback" role="alert" data-skills-error hidden></p><p class="skills-feedback" role="status" data-skills-message hidden></p><div class="skills-layout"><div class="skills-list" data-skills-list></div><section class="skills-detail" data-skills-detail><p class="skills-empty" data-skills-placeholder>Select a Skill to read or edit it.</p><form data-skills-form hidden><div data-skills-creation-fields hidden><h3>New Skill</h3><label class="skills-creation-label">Name<input type="text" data-skills-new-name maxlength="160" dir="auto" required disabled></label><label class="skills-creation-label">Description<textarea data-skills-new-description rows="3" maxlength="512" dir="auto" required disabled></textarea></label></div><div data-skills-saved-metadata><h3 dir="auto" data-skills-name></h3><p dir="auto" class="skills-description" data-skills-description></p><p class="skills-id">ID: <span dir="ltr" data-skills-id></span></p></div><label class="skills-content-label">Content<textarea data-skills-content rows="16" dir="auto" maxlength="65536" required></textarea></label><p class="skills-archived-note" data-skills-archived-note hidden>Archived Skills are unavailable to models. Restore this Skill to use or edit it.</p><div class="skills-editor-actions"><button class="primary-button" type="submit" data-skills-save>Save changes</button><button type="button" data-skills-cancel hidden>Cancel</button><button type="button" data-skills-reload>Reload saved</button><button type="button" data-skills-archive>Archive</button><button type="button" data-skills-restore hidden>Restore</button></div></form></section></div></div>`;
   const find = (selector) => root.querySelector(selector);
   const list = find("[data-skills-list]");
@@ -40,7 +41,7 @@ export function createSkillsWorkspace({ root, actions, confirmArchive = (message
   const descriptionInput = find("[data-skills-new-description]");
   let current;
   let listMarkup = "";
-  root.addEventListener("click", (event) => {
+  root.addEventListener("click", async (event) => {
     const selected = event.target.closest?.("[data-skill-id]");
     if (selected) void actions.select(selected.dataset.skillId);
     const filter = event.target.closest?.("[data-skills-filter]");
@@ -51,8 +52,11 @@ export function createSkillsWorkspace({ root, actions, confirmArchive = (message
     if (event.target.closest?.("[data-skills-reload]")) void actions.reloadSelected();
     if (event.target.closest?.("[data-skills-restore]")) void actions.restore();
     if (event.target.closest?.("[data-skills-archive]")) {
+      const original = current;
       const warning = current?.dirty ? " Unsaved edits will be discarded." : "";
-      if (confirmArchive(`Archive this Skill? Models will no longer discover or read it.${warning}`)) void actions.archive();
+      if (!await confirmArchive(`Archive this Skill? Models will no longer discover or read it.${warning}`)) return;
+      if (current.skill !== original.skill || current.draft !== original.draft) return;
+      void actions.archive();
     }
   });
   nameInput.addEventListener("input", () => actions.setCreationField("name", nameInput.value));

package/dist/src/web-ui/app/components/spark-chat/panel.js

@@ -6,9 +6,13 @@ export function createSparkChatPanel({ documentRoot = document, launcherAnchor }
   root.hidden = true;
   root.innerHTML = `
     <section class="spark-chat-panel" role="dialog" aria-label="ABot SPARK chat" hidden>
-      <header class="spark-chat-header"><button type="button" class="spark-header-mascot" data-spark="mascotButton" aria-label="Minimize SPARK chat" title="Minimize SPARK chat">${mascot}</button><strong>ABot SPARK</strong>
-        <button type="button" data-spark="settingsButton" aria-label="SPARK settings" title="SPARK settings">⚙</button>
-        <button type="button" data-spark="closeButton" aria-label="Minimize SPARK chat" title="Minimize">−</button>
+      <header class="spark-chat-header">
+        <button type="button" class="spark-header-mascot" data-spark="mascotButton" aria-label="Minimize SPARK chat" title="Minimize SPARK chat">${mascot}</button>
+        <div class="spark-chat-identity"><strong>ABot SPARK</strong></div>
+        <div class="spark-header-actions">
+          <button type="button" data-spark="settingsButton" aria-label="SPARK settings" title="SPARK settings"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 17h16" /><circle cx="9" cy="7" r="3" /><circle cx="15" cy="17" r="3" /></svg></button>
+          <button type="button" data-spark="closeButton" aria-label="Minimize SPARK chat" title="Minimize"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12" /></svg></button>
+        </div>
       </header>
       <div class="spark-chat-content">
         <div class="messages-list spark-messages" data-spark="messagesList" role="log" aria-label="SPARK messages" tabindex="0"></div>

package/dist/src/web-ui/app/components/spark-chat/settings.js

@@ -1,7 +1,9 @@
+import { confirmDialog } from "../confirmation-dialog.js";
+import { canChooseReasoningBudget, readReasoningPreferenceField, renderReasoningPreferenceField, syncReasoningPreferenceField } from "../../lib/reasoning-preference.js";
 import { canChooseReasoning, reasoningModeOptions } from "../../lib/reasoning-controls.js";
 import { supportsFullPlus } from "../../lib/tool-permission-mode.js";
 
-export function createSparkChatSettings({ root, onSave, onClear, onOpen, onResetPosition, onOpenModelSettings, getAgentMode, onAgentModeChange, getWebConfig, documentRoot = document }) {
+export function createSparkChatSettings({ root, onSave, onClear, onOpen, onResetPosition, onOpenModelSettings, getAgentMode, onAgentModeChange, getReasoningPreference = () => undefined, onReasoningPreferenceChange, getWebConfig, confirmClear = (message) => confirmDialog(message, { title: "Clear SPARK conversation", confirmLabel: "Clear messages", tone: "danger" }), documentRoot = document }) {
   const card = documentRoot.createElement("section");
   card.className = "spark-chat-settings";
   card.setAttribute("aria-label", "SPARK conversation settings");
@@ -12,10 +14,11 @@ export function createSparkChatSettings({ root, onSave, onClear, onOpen, onReset
       <div class="spark-settings-actions"><select id="spark-chat-permissions" data-spark-permissions aria-label="SPARK conversation permissions"><option value="ask">Ask</option><option value="full_access">Full</option><option value="full_plus">FULL+</option></select>
       <button type="submit" data-spark-save disabled>Save</button></div>
     </form>
-    <div class="spark-settings-row">
-      <label for="spark-agent-mode"><strong>Thinking mode</strong><span>Choose how deeply SPARK thinks before replying.</span></label>
+    <div class="spark-settings-row" data-spark-legacy-reasoning>
+      <label for="spark-agent-mode"><strong>Thinking mode</strong><span>Sets the default depth; model profile and calibration settings may override it. Token budgets are separate. Changing the mode turns Thinking Off back on.</span></label>
       <select id="spark-agent-mode" data-spark-agent-mode aria-label="SPARK thinking mode"><option value="fast">Low</option><option value="reasoning" selected>Reasoning</option><option value="deep">Deep</option></select>
     </div>
+    <div data-spark-thinking-budget></div>
     <div class="spark-settings-row"><div><strong>Chat shortcut</strong><p>Drag SPARK wherever feels right. Use Alt + arrow keys to move it.</p></div>
       <button type="button" data-spark-reset-position>Return to sidebar</button></div>
     <div class="spark-settings-row"><div><strong>Conversation history</strong><p>Clear messages while keeping SPARK’s memory and permissions.</p></div>
@@ -33,49 +36,88 @@ export function createSparkChatSettings({ root, onSave, onClear, onOpen, onReset
   let reasoningEnabled = false;
   let busy = false;
   let environmentId;
+  let thinkingProfile;
+  let thinkingScope;
+  let thinkingSaved;
+  let latestConfiguration;
+  let operationRevision = 0;
+  const budgetRoot = card.querySelector("[data-spark-thinking-budget]");
+  budgetRoot.addEventListener("change", () => syncReasoningPreferenceField(budgetRoot, thinkingProfile));
+  budgetRoot.addEventListener("click", (event) => {
+    if (busy || !event.target.matches("[data-spark-save-thinking]")) return;
+    void perform(() => onReasoningPreferenceChange(readReasoningPreferenceField(budgetRoot)), "Thinking preference saved for the next message.");
+  });
   function controls() {
     select.disabled = busy || !ready;
-    agentModeSelect.disabled = !ready || !reasoningEnabled;
+    agentModeSelect.disabled = busy || !ready || !reasoningEnabled;
     save.disabled = busy || !ready || select.value === saved;
     clear.disabled = busy || !ready;
+    for (const selector of ["select", "button"])
+      for (const field of budgetRoot.querySelectorAll(selector)) field.disabled = busy || !ready;
+    const input = budgetRoot.querySelector("[data-reasoning-budget]");
+    if (input) input.disabled = busy || !ready || budgetRoot.querySelector("[data-reasoning-preference-mode]")?.value !== "budget";
   }
   async function perform(action, successMessage = "") {
     const environment = environmentId;
+    const revision = ++operationRevision;
     busy = true; feedback.textContent = ""; controls();
     try {
       await action();
-      if (environment === environmentId) feedback.textContent = successMessage;
+      if (environment !== environmentId || revision !== operationRevision) return;
+      feedback.textContent = successMessage;
+      render(latestConfiguration, environmentId);
     }
     catch (error) {
-      if (environment === environmentId) feedback.textContent = error.code === "spark_chat_busy"
+      if (environment !== environmentId || revision !== operationRevision) return;
+      render(latestConfiguration, environmentId);
+      feedback.textContent = error.code === "spark_chat_busy"
         ? "Stop the active request or resolve its approval before clearing SPARK chat."
         : error.message;
     }
-    finally { if (environment === environmentId) { busy = false; controls(); } }
+    finally { if (environment === environmentId && revision === operationRevision) { busy = false; controls(); } }
   }
   select.addEventListener("change", controls);
-  agentModeSelect.addEventListener("change", () => { if (reasoningEnabled) onAgentModeChange(agentModeSelect.value); });
+  agentModeSelect.addEventListener("change", () => {
+    if (busy || !reasoningEnabled || !agentModeSelect.value) return;
+    void perform(() => onAgentModeChange(agentModeSelect.value), "Reasoning mode selected.");
+  });
   card.querySelector("form").addEventListener("submit", (event) => {
     event.preventDefault();
     if (save.disabled) return;
     const mode = select.value;
     void perform(() => onSave(mode), "Permissions saved.");
   });
-  clear.addEventListener("click", () => {
+  clear.addEventListener("click", async () => {
     if (clear.disabled) return;
-    if (!window.confirm("Clear all messages in the SPARK conversation? Long-term memory and permissions will be kept.")) return;
-    void perform(onClear);
+    const environment = environmentId;
+    const sessionId = latestConfiguration?.sessionId;
+    const revision = operationRevision;
+    if (!await confirmClear("Clear all messages in the SPARK conversation? Long-term memory and permissions will be kept.")) return;
+    if (environment !== environmentId || sessionId !== latestConfiguration?.sessionId) return;
+    if (revision !== operationRevision || clear.disabled) return;
+    await perform(onClear);
   });
   card.querySelector("[data-spark-open]").addEventListener("click", onOpen);
   card.querySelector("[data-spark-reset-position]").addEventListener("click", () => onResetPosition?.());
   card.querySelector("[data-spark-model-settings]").addEventListener("click", () => onOpenModelSettings?.());
-  return {
-    render(configuration, nextEnvironmentId) {
+  function render(configuration, nextEnvironmentId) {
+      latestConfiguration = configuration;
       if (environmentId !== nextEnvironmentId) {
         environmentId = nextEnvironmentId; busy = false; ready = false; feedback.textContent = "";
         select.value = configuration?.toolPermissionMode || "ask";
       }
       reasoningEnabled = canChooseReasoning(configuration);
+      thinkingProfile = { ...configuration, id: configuration?.modelProfileId };
+      const preference = getReasoningPreference();
+      const budgetAvailable = canChooseReasoningBudget(thinkingProfile);
+      const nextThinkingScope = JSON.stringify([nextEnvironmentId, configuration?.sessionId, configuration?.modelProfileId, budgetAvailable]);
+      const nextThinkingSaved = JSON.stringify(preference);
+      if (thinkingScope !== nextThinkingScope) { operationRevision += 1; busy = false; }
+      if (thinkingScope !== nextThinkingScope || thinkingSaved !== nextThinkingSaved) {
+        budgetRoot.innerHTML = budgetAvailable || preference
+          ? `${renderReasoningPreferenceField(thinkingProfile, preference)}<button type="button" data-spark-save-thinking>Apply to next message</button>` : "";
+        thinkingScope = nextThinkingScope; thinkingSaved = nextThinkingSaved;
+      }
       agentModeSelect.innerHTML = reasoningModeOptions(getAgentMode(), reasoningEnabled);
       agentModeSelect.title = reasoningEnabled ? "Reasoning depth" : "Enable reasoning controls for this model in Models.";
       const next = configuration?.toolPermissionMode || "ask";
@@ -83,6 +125,6 @@ export function createSparkChatSettings({ root, onSave, onClear, onOpen, onReset
       saved = next; ready = Boolean(configuration?.sessionId);
       select.querySelector('[value="full_plus"]').disabled = !supportsFullPlus(getWebConfig());
       controls();
-    },
-  };
+  }
+  return { render };
 }

package/dist/src/web-ui/app/components/tool-approval-card.d.ts

@@ -13,7 +13,8 @@ export type ToolApprovalEvent = Record<string, unknown> & {
 export interface ToolApprovalCardOptions {
   event?: ToolApprovalEvent;
   submitted?: boolean;
-  onDecision: (approvalId: string, approved: boolean) => void;
+  rejectionDraft?: { text: string; expanded: boolean };
+  onDecision: (approvalId: string, approved: boolean, reason?: string) => void;
   documentRoot?: Document;
 }
 

package/dist/src/web-ui/app/components/tool-approval-card.js

@@ -1,10 +1,12 @@
 import { formatToolName } from "../lib/event-presentation.js";
 import { textOf } from "../lib/text-format.js";
 import { createConversationToolEvidence } from "./conversation-tool-evidence.js";
+import { createToolApprovalRejectionInput } from "./tool-approval-rejection-input.js";
 
 export function createToolApprovalCard({
   event,
   submitted = false,
+  rejectionDraft = { text: "", expanded: false },
   onDecision,
   documentRoot = document,
 }) {
@@ -67,8 +69,14 @@ export function createToolApprovalCard({
   rejectButton.textContent = "Reject";
   rejectButton.disabled = submitted;
   rejectButton.addEventListener("click", () => onDecision(approvalId, false));
-  actions.append(approveButton, rejectButton);
-  bubble.appendChild(actions);
+  const rejection = createToolApprovalRejectionInput({
+    draft: rejectionDraft,
+    submitted,
+    onReject: (reason) => onDecision(approvalId, false, reason),
+    documentRoot,
+  });
+  actions.append(approveButton, rejectButton, rejection.open);
+  bubble.append(actions, rejection.editor);
 
   row.appendChild(bubble);
   return row;

package/dist/src/web-ui/app/components/tool-approval-rejection-input.js

@@ -0,0 +1,116 @@
+const rejectionControls = new WeakMap();
+
+function canSendRejection(draft, submitted) {
+  if (submitted) return false;
+  return Boolean(draft.text.trim());
+}
+
+/** Frame only text authored through this action; existing rejection reasons stay intact. */
+function userRejectionReason(text) {
+  return "The user rejected this action. User explanation:\n" + text.trim();
+}
+
+export function createToolApprovalRejectionInput({
+  draft,
+  submitted,
+  onReject,
+  documentRoot,
+}) {
+  const open = documentRoot.createElement("button");
+  open.type = "button";
+  open.className = "tool-approval-button reject";
+  open.textContent = "Reject with message";
+  open.disabled = submitted;
+  open.setAttribute("aria-expanded", String(draft.expanded));
+
+  const editor = documentRoot.createElement("div");
+  editor.className = "tool-approval-rejection-editor";
+  editor.hidden = !draft.expanded;
+  const label = documentRoot.createElement("label");
+  label.className = "tool-approval-rejection-label";
+  const title = documentRoot.createElement("span");
+  title.textContent = "Why are you rejecting this action?";
+  const input = documentRoot.createElement("textarea");
+  input.className = "tool-approval-rejection-text";
+  input.dir = "auto";
+  input.rows = 3;
+  input.value = draft.text;
+  input.disabled = submitted;
+  label.append(title, input);
+
+  const controls = documentRoot.createElement("div");
+  controls.className = "tool-approval-rejection-controls";
+  const send = documentRoot.createElement("button");
+  send.type = "button";
+  send.className = "tool-approval-button reject";
+  send.textContent = "Reject and send message";
+  send.disabled = !canSendRejection(draft, submitted);
+  const cancel = documentRoot.createElement("button");
+  cancel.type = "button";
+  cancel.className = "tool-approval-button";
+  cancel.textContent = "Cancel";
+  cancel.disabled = submitted;
+  controls.append(send, cancel);
+  editor.append(label, controls);
+  for (const [kind, control] of Object.entries({ open, input, send, cancel })) {
+    rejectionControls.set(control, { draft, kind });
+  }
+
+  open.addEventListener("click", () => {
+    if (submitted) return;
+    draft.expanded = true;
+    editor.hidden = false;
+    open.setAttribute("aria-expanded", "true");
+    input.focus();
+  });
+  cancel.addEventListener("click", () => {
+    if (submitted) return;
+    draft.expanded = false;
+    editor.hidden = true;
+    open.setAttribute("aria-expanded", "false");
+    open.focus();
+  });
+  input.addEventListener("input", () => {
+    if (submitted) return;
+    draft.text = input.value;
+    send.disabled = !canSendRejection(draft, submitted);
+  });
+  send.addEventListener("click", () => {
+    if (!canSendRejection(draft, submitted)) return;
+    onReject(userRejectionReason(draft.text));
+  });
+
+  return { open, editor };
+}
+
+function canRestoreRejectionControl(control, kind, draft) {
+  if (!control || control.disabled) return false;
+  if (kind === "open") return true;
+  return draft.expanded;
+}
+
+/** Capture this editor's focus before its owning view rebuilds the DOM. */
+export function captureApprovalRejectionFocus(root, documentRoot) {
+  const active = documentRoot?.activeElement;
+  const focused = rejectionControls.get(active);
+  if (!focused || !root.contains(active)) return () => {};
+  const { draft, kind } = focused;
+  const start = active.selectionStart;
+  const end = active.selectionEnd;
+  const direction = active.selectionDirection;
+  const scrollTop = active.scrollTop;
+  return () => {
+    const control = [...root.querySelectorAll("button, textarea")].find(
+      (candidate) => {
+        const entry = rejectionControls.get(candidate);
+        return entry?.draft === draft && entry.kind === kind;
+      },
+    );
+    if (!canRestoreRejectionControl(control, kind, draft)) return;
+    if (control === documentRoot.activeElement) return;
+    control.focus({ preventScroll: true });
+    if (kind !== "input") return;
+    control.setSelectionRange(start, end, direction);
+    control.scrollTop = scrollTop;
+  };
+}