@abot-ai/runtime 1.0.0

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

@@ -0,0 +1,58 @@
+import { formatToolName } from "../lib/event-presentation.js";
+import { textOf } from "../lib/text-format.js";
+
+export function createToolApprovalCard({
+  event,
+  submitted = false,
+  onDecision,
+  documentRoot = document,
+}) {
+  const approvalId = textOf(event?.approvalId);
+  const row = documentRoot.createElement("article");
+  row.className = "message-row assistant approval-message-row";
+
+  const bubble = documentRoot.createElement("div");
+  bubble.className = "message-bubble approval-message-bubble";
+
+  const toolLabel =
+    formatToolName(event?.tool) || textOf(event?.name) || "Tool";
+  row.setAttribute("aria-label", `${toolLabel} permission request`);
+
+  const header = documentRoot.createElement("div");
+  header.className = "approval-message-header";
+  const label = documentRoot.createElement("span");
+  label.className = "approval-message-label";
+  label.textContent = "Approval required";
+  const title = documentRoot.createElement("strong");
+  title.className = "approval-message-title";
+  title.textContent = `Allow ${toolLabel} to run?`;
+  header.append(label, title);
+
+  const detail = documentRoot.createElement("p");
+  detail.className = "approval-message-detail";
+  detail.dir = "auto";
+  detail.textContent =
+    textOf(event?.summary) || "The runtime is waiting for your decision.";
+  bubble.append(header, detail);
+
+  const actions = documentRoot.createElement("div");
+  actions.className = "tool-approval-actions";
+  actions.setAttribute("aria-label", "Permission request actions");
+  const approveButton = documentRoot.createElement("button");
+  approveButton.className = "tool-approval-button approve";
+  approveButton.type = "button";
+  approveButton.textContent = "Approve";
+  approveButton.disabled = submitted;
+  approveButton.addEventListener("click", () => onDecision(approvalId, true));
+  const rejectButton = documentRoot.createElement("button");
+  rejectButton.className = "tool-approval-button reject";
+  rejectButton.type = "button";
+  rejectButton.textContent = "Reject";
+  rejectButton.disabled = submitted;
+  rejectButton.addEventListener("click", () => onDecision(approvalId, false));
+  actions.append(approveButton, rejectButton);
+  bubble.appendChild(actions);
+
+  row.appendChild(bubble);
+  return row;
+}

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

@@ -0,0 +1,236 @@
+import {
+  createInitialWorkspaceShellState,
+  normalizeWorkspaceDestination,
+  toggleWorkspaceSheet,
+  wrappedIndex,
+} from "../ui-behavior.js";
+import { textOf } from "../lib/text-format.js";
+
+export function createWorkspaceShell({
+  dom,
+  viewport = window,
+  documentRoot = document,
+}) {
+  const shellState = {
+    ...createInitialWorkspaceShellState(),
+    activeOperationsTab: "runtime",
+    toastTimer: 0,
+    bound: false,
+  };
+
+  function setCurrentPage(button, active) {
+    if (active) {
+      button.setAttribute("aria-current", "page");
+    } else {
+      button.removeAttribute("aria-current");
+    }
+  }
+
+  function syncShell() {
+    const chatWorkspace = shellState.workspace === "chat";
+    const operationsWorkspace = shellState.workspace === "operations";
+    const configWorkspace = shellState.workspace === "config";
+    const sessionsOpen = chatWorkspace && shellState.activeSheet === "sessions";
+
+    dom.app.classList.toggle("operations-workspace", operationsWorkspace);
+    dom.app.classList.toggle("config-workspace", configWorkspace);
+    dom.app.classList.toggle("sessions-open", sessionsOpen);
+
+    dom.chatPanel.hidden = !chatWorkspace;
+    dom.chatPanel.inert = !chatWorkspace || sessionsOpen;
+    dom.operationsWorkspacePanel.hidden = !operationsWorkspace;
+    dom.operationsWorkspacePanel.inert = !operationsWorkspace;
+    dom.operationsWorkspacePanel.setAttribute(
+      "aria-hidden",
+      operationsWorkspace ? "false" : "true",
+    );
+    dom.configWorkspacePanel.hidden = !configWorkspace;
+    dom.configWorkspacePanel.inert = !configWorkspace;
+    dom.configWorkspacePanel.setAttribute(
+      "aria-hidden",
+      configWorkspace ? "false" : "true",
+    );
+
+    dom.sessionsPanel.hidden = !sessionsOpen;
+    dom.sessionsPanel.inert = !sessionsOpen;
+    dom.sessionsPanel.setAttribute(
+      "aria-hidden",
+      sessionsOpen ? "false" : "true",
+    );
+    dom.sessionsToggleButton.setAttribute(
+      "aria-expanded",
+      sessionsOpen ? "true" : "false",
+    );
+    dom.sessionsToggleButton.setAttribute(
+      "aria-label",
+      sessionsOpen ? "Close conversations" : "Open conversations",
+    );
+
+    setCurrentPage(dom.chatWorkspaceButton, chatWorkspace);
+    setCurrentPage(dom.operationsWorkspaceButton, operationsWorkspace);
+    setCurrentPage(dom.configWorkspaceButton, configWorkspace);
+
+    dom.panelBackdrop.classList.toggle("visible", sessionsOpen);
+    dom.panelBackdrop.tabIndex = sessionsOpen ? 0 : -1;
+    dom.panelBackdrop.setAttribute(
+      "aria-hidden",
+      sessionsOpen ? "false" : "true",
+    );
+  }
+
+  function workspaceBackButton(destination) {
+    return destination === "operations"
+      ? dom.closeOperationsWorkspaceButton
+      : dom.closeConfigWorkspaceButton;
+  }
+
+  function activateWorkspace(destination, options = {}) {
+    const nextWorkspace = normalizeWorkspaceDestination(destination);
+    const previousWorkspace = shellState.workspace;
+    const previousSheet = shellState.activeSheet;
+    shellState.workspace = nextWorkspace;
+    shellState.activeSheet = "";
+    syncShell();
+
+    if (options.focus === false) return;
+    if (nextWorkspace !== "chat") {
+      viewport.requestAnimationFrame(() =>
+        workspaceBackButton(nextWorkspace)?.focus(),
+      );
+      return;
+    }
+    if (previousWorkspace !== "chat" || previousSheet) {
+      dom.chatWorkspaceButton.focus();
+    }
+  }
+
+  function setSessionsDrawerOpen(open, options = {}) {
+    const wasOpen = shellState.activeSheet === "sessions";
+    shellState.workspace = "chat";
+    shellState.activeSheet = open ? "sessions" : "";
+    syncShell();
+
+    if (options.focus === false) return;
+    if (open) {
+      viewport.requestAnimationFrame(() => dom.closeSessionsButton?.focus());
+      return;
+    }
+    if (
+      wasOpen &&
+      (options.restoreFocus === true ||
+        documentRoot.activeElement?.closest?.(".sessions-panel"))
+    ) {
+      dom.sessionsToggleButton.focus();
+    }
+  }
+
+  function toggleSessionsDrawer() {
+    const next = toggleWorkspaceSheet(shellState.activeSheet, "sessions");
+    setSessionsDrawerOpen(next === "sessions", {
+      restoreFocus: next !== "sessions",
+    });
+  }
+
+  function activateOperationsTab(tabName) {
+    const availableTabs = new Set(
+      dom.operationsTabButtons.map((button) => textOf(button.dataset.tab)),
+    );
+    const normalized = textOf(tabName, "runtime") || "runtime";
+    const nextTab = availableTabs.has(normalized) ? normalized : "runtime";
+    shellState.activeOperationsTab = nextTab;
+    for (const button of dom.operationsTabButtons) {
+      const active = button.dataset.tab === nextTab;
+      button.classList.toggle("active", active);
+      button.setAttribute("aria-selected", active ? "true" : "false");
+      button.tabIndex = active ? 0 : -1;
+    }
+    for (const page of dom.operationsTabPages) {
+      const active = page.id === `${nextTab}Tab`;
+      page.classList.toggle("active", active);
+      page.hidden = !active;
+    }
+  }
+
+  function showToast(message, tone = "") {
+    viewport.clearTimeout(shellState.toastTimer);
+    dom.toastRegion.textContent = textOf(message);
+    dom.toastRegion.className = `toast-region visible ${tone}`.trim();
+    shellState.toastTimer = viewport.setTimeout(() => {
+      dom.toastRegion.className = "toast-region";
+    }, 3200);
+  }
+
+  function closeOverlaysOnEscape() {
+    if (shellState.activeSheet === "sessions") {
+      setSessionsDrawerOpen(false, { restoreFocus: true });
+      return true;
+    }
+    if (shellState.workspace !== "chat") {
+      activateWorkspace("chat");
+      return true;
+    }
+    return false;
+  }
+
+  function bind() {
+    if (shellState.bound) return;
+    shellState.bound = true;
+    dom.chatWorkspaceButton.addEventListener("click", () => {
+      activateWorkspace("chat");
+    });
+    dom.operationsWorkspaceButton.addEventListener("click", () => {
+      activateWorkspace("operations");
+    });
+    dom.configWorkspaceButton.addEventListener("click", () => {
+      activateWorkspace("config");
+    });
+    dom.closeOperationsWorkspaceButton.addEventListener("click", () => {
+      activateWorkspace("chat");
+    });
+    dom.closeConfigWorkspaceButton.addEventListener("click", () => {
+      activateWorkspace("chat");
+    });
+    dom.sessionsToggleButton.addEventListener("click", toggleSessionsDrawer);
+    dom.closeSessionsButton.addEventListener("click", () => {
+      setSessionsDrawerOpen(false, { restoreFocus: true });
+    });
+    dom.panelBackdrop.addEventListener("click", () => {
+      if (shellState.activeSheet === "sessions") {
+        setSessionsDrawerOpen(false, { restoreFocus: true });
+      }
+    });
+    for (const button of dom.operationsTabButtons) {
+      button.addEventListener("click", () => {
+        activateOperationsTab(button.dataset.tab);
+      });
+      button.addEventListener("keydown", (event) => {
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+        event.preventDefault();
+        const currentIndex = dom.operationsTabButtons.indexOf(button);
+        const delta = event.key === "ArrowRight" ? 1 : -1;
+        const next =
+          dom.operationsTabButtons[
+            wrappedIndex(currentIndex, delta, dom.operationsTabButtons.length)
+          ];
+        next?.focus();
+        activateOperationsTab(next?.dataset.tab);
+      });
+    }
+  }
+
+  function load() {
+    Object.assign(shellState, createInitialWorkspaceShellState());
+    activateOperationsTab("runtime");
+    syncShell();
+  }
+
+  return {
+    activateOperationsTab,
+    activateWorkspace,
+    bind,
+    closeOverlaysOnEscape,
+    load,
+    setSessionsDrawerOpen,
+    showToast,
+  };
+}

package/dist/src/web-ui/app/controllers/app-event-bindings.js

@@ -0,0 +1,280 @@
+import {
+  focusSelectedMenuItem,
+  handleMenuNavigation,
+} from "../components/menu-navigation.js";
+import { createWebSessionId, textOf } from "../lib/text-format.js";
+
+export function createAppEventBindings({
+  state,
+  dom,
+  shell,
+  modelSelector,
+  composerActions,
+  actions,
+  documentRoot = document,
+}) {
+  function bind() {
+    dom.sessionSearchInput.addEventListener("input", () => {
+      state.sessionQuery = dom.sessionSearchInput.value;
+      actions.renderSessions();
+    });
+    dom.refreshSessionsButton.addEventListener(
+      "click",
+      () => void actions.loadSessions(),
+    );
+    dom.newSessionButton.addEventListener("click", () => {
+      if (!actions.suspendQueueRecovery()) return;
+      shell.activateWorkspace("chat", { focus: false });
+      state.currentSessionId = createWebSessionId();
+      actions.saveSessionId(
+        actions.selectedEnvironmentId(),
+        state.currentSessionId,
+      );
+      actions.rememberModelSelection();
+      state.messages = [];
+      actions.clearAttachments();
+      actions.resetLiveRequestView();
+      actions.setCurrentSessionTitle(state.currentSessionId);
+      actions.applyConversationChrome();
+      actions.subscribeSession(state.currentSessionId);
+      actions.renderSessions();
+      actions.renderMessages();
+      shell.setSessionsDrawerOpen(false);
+      dom.composerInput.focus();
+    });
+    dom.environmentSelect.addEventListener("change", () => {
+      const recoveryEnvironmentId =
+        state.activeComposerQueueRecovery?.scope.environmentId ?? "";
+      if (!actions.suspendQueueRecovery()) {
+        if (recoveryEnvironmentId)
+          dom.environmentSelect.value = recoveryEnvironmentId;
+        return;
+      }
+      state.agentPickerOpen = false;
+      actions.renderAgentPicker();
+      actions.saveEnvironmentId(dom.environmentSelect.value);
+      state.currentSessionId = "";
+      state.messages = [];
+      actions.clearAttachments();
+      actions.resetLiveRequestView();
+      dom.sessionTitle.textContent = "New conversation";
+      actions.applyConversationChrome();
+      actions.renderMessages();
+      void (async () => {
+        await actions.loadModels();
+        await Promise.allSettled([
+          actions.loadAgentMode(),
+          actions.loadRuntimeConfig(),
+        ]);
+        await actions.restoreLastSession();
+      })();
+    });
+    dom.agentPickerButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      state.agentPickerOpen = !state.agentPickerOpen;
+      actions.renderAgentPicker();
+      if (state.agentPickerOpen) focusSelectedMenuItem(dom.agentPickerMenu);
+    });
+    dom.agentPickerButton.addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      state.agentPickerOpen = true;
+      actions.renderAgentPicker();
+      focusSelectedMenuItem(
+        dom.agentPickerMenu,
+        event.key === "ArrowUp" ? "last" : "first",
+      );
+    });
+    dom.agentPickerMenu.addEventListener("click", (event) => {
+      event.stopPropagation();
+      if (!(event.target instanceof Element)) return;
+      const button = event.target.closest("[data-environment-id]");
+      if (!(button instanceof HTMLButtonElement)) return;
+      const nextEnvironmentId =
+        button.dataset.environmentId ||
+        textOf(state.config?.defaultEnvironmentId).trim() ||
+        actions.configuredEnvironmentOptions()[0]?.value ||
+        "";
+      if (!nextEnvironmentId) return;
+      if (dom.environmentSelect.value === nextEnvironmentId) {
+        state.agentPickerOpen = false;
+        actions.renderAgentPicker();
+        return;
+      }
+      dom.environmentSelect.value = nextEnvironmentId;
+      dom.environmentSelect.dispatchEvent(new Event("change"));
+    });
+    dom.agentPickerMenu.addEventListener("keydown", (event) => {
+      handleMenuNavigation(event, dom.agentPickerMenu);
+    });
+    dom.modelSelect.addEventListener("change", () => {
+      actions.rememberModelSelection();
+      actions.removeUnsupportedImages();
+      actions.renderAttachments();
+    });
+    dom.attachmentButton.addEventListener("click", () => {
+      if (!dom.attachmentButton.disabled) dom.attachmentInput.click();
+    });
+    dom.attachmentInput.addEventListener("change", () => {
+      const file = dom.attachmentInput.files?.[0];
+      dom.attachmentInput.value = "";
+      if (!file) return;
+      void actions.uploadAttachment(file).catch((error) => {
+        state.messages.push({
+          id: `error-${Date.now()}`,
+          role: "assistant",
+          text: error instanceof Error ? error.message : String(error),
+          createdAt: Date.now(),
+          requestId: "",
+          streaming: false,
+        });
+        actions.renderMessages();
+      });
+    });
+    dom.permissionModeButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      modelSelector.close();
+      state.permissionModeMenuOpen = !state.permissionModeMenuOpen;
+      if (state.permissionModeMenuOpen) {
+        state.agentModeMenuOpen = false;
+        actions.renderAgentMode();
+      }
+      actions.renderPermissionMode();
+      if (state.permissionModeMenuOpen)
+        focusSelectedMenuItem(dom.permissionModeMenu);
+    });
+    dom.permissionModeButton.addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      modelSelector.close();
+      state.permissionModeMenuOpen = true;
+      state.agentModeMenuOpen = false;
+      actions.renderAgentMode();
+      actions.renderPermissionMode();
+      focusSelectedMenuItem(
+        dom.permissionModeMenu,
+        event.key === "ArrowUp" ? "last" : "first",
+      );
+    });
+    dom.permissionModeMenu.addEventListener("click", (event) =>
+      event.stopPropagation(),
+    );
+    dom.permissionModeMenu.addEventListener("keydown", (event) => {
+      handleMenuNavigation(event, dom.permissionModeMenu);
+    });
+    dom.agentModeButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      modelSelector.close();
+      state.agentModeMenuOpen = !state.agentModeMenuOpen;
+      if (state.agentModeMenuOpen) {
+        state.permissionModeMenuOpen = false;
+        actions.renderPermissionMode();
+      }
+      actions.renderAgentMode();
+      if (state.agentModeMenuOpen) focusSelectedMenuItem(dom.agentModeMenu);
+    });
+    dom.agentModeButton.addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      modelSelector.close();
+      state.agentModeMenuOpen = true;
+      state.permissionModeMenuOpen = false;
+      actions.renderPermissionMode();
+      actions.renderAgentMode();
+      focusSelectedMenuItem(
+        dom.agentModeMenu,
+        event.key === "ArrowUp" ? "last" : "first",
+      );
+    });
+    dom.agentModeMenu.addEventListener("click", (event) =>
+      event.stopPropagation(),
+    );
+    dom.agentModeMenu.addEventListener("keydown", (event) => {
+      handleMenuNavigation(event, dom.agentModeMenu);
+    });
+    documentRoot.addEventListener("click", (event) => {
+      if (
+        !state.agentModeMenuOpen ||
+        event.target === dom.agentModeButton ||
+        dom.agentModeButton.contains(event.target) ||
+        dom.agentModeMenu.contains(event.target)
+      )
+        return;
+      state.agentModeMenuOpen = false;
+      actions.renderAgentMode();
+    });
+    documentRoot.addEventListener("click", (event) => {
+      if (
+        !state.permissionModeMenuOpen ||
+        event.target === dom.permissionModeButton ||
+        dom.permissionModeButton.contains(event.target) ||
+        dom.permissionModeMenu.contains(event.target)
+      )
+        return;
+      state.permissionModeMenuOpen = false;
+      actions.renderPermissionMode();
+    });
+    documentRoot.addEventListener("click", (event) => {
+      if (
+        !state.agentPickerOpen ||
+        event.target === dom.agentPickerButton ||
+        dom.agentPickerButton.contains(event.target) ||
+        dom.agentPickerMenu.contains(event.target)
+      )
+        return;
+      state.agentPickerOpen = false;
+      actions.renderAgentPicker();
+    });
+    documentRoot.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      let handled = composerActions.closeMenu({ restoreFocus: true });
+      if (state.agentModeMenuOpen) {
+        state.agentModeMenuOpen = false;
+        actions.renderAgentMode();
+        dom.agentModeButton.focus();
+        handled = true;
+      }
+      if (state.permissionModeMenuOpen) {
+        state.permissionModeMenuOpen = false;
+        actions.renderPermissionMode();
+        dom.permissionModeButton.focus();
+        handled = true;
+      }
+      if (state.agentPickerOpen) {
+        state.agentPickerOpen = false;
+        actions.renderAgentPicker();
+        dom.agentPickerButton.focus();
+        handled = true;
+      }
+      if (!handled && shell.closeOverlaysOnEscape()) handled = true;
+      if (handled) event.preventDefault();
+    });
+    dom.composerForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+      actions.dispatchComposerMessage(composerActions.primaryAction());
+    });
+    dom.composerInput.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+      event.preventDefault();
+      actions.dispatchComposerMessage(composerActions.primaryAction());
+    });
+    dom.composerInput.addEventListener("input", () => {
+      actions.resizeComposer();
+      actions.updateComposerSendState();
+    });
+    dom.refreshRuntimeButton.addEventListener(
+      "click",
+      () => void actions.loadRuntimeStatus(),
+    );
+    dom.refreshLogsButton.addEventListener(
+      "click",
+      () => void actions.loadRuntimeLogs(),
+    );
+    dom.refreshHealthButton.addEventListener(
+      "click",
+      () => void actions.loadSystemHealth(),
+    );
+  }
+
+  return { bind };
+}

package/dist/src/web-ui/app/controllers/chat-request-controller.js

@@ -0,0 +1,79 @@
+export function createChatRequestController({
+  state,
+  client,
+  sessionQueue,
+  conversationView,
+  conversationSession,
+  attachments,
+  currentComposerScope,
+  isCurrentComposerScope,
+  rememberModelSelection,
+  applyConversationChrome,
+  renderSessions,
+  renderAttachments,
+  getToolPermissionMode,
+  getModelPreference,
+  clearQueueRecovery,
+  reportQueueFailure,
+}) {
+  function postChatMessage(request) {
+    return client.postChatMessage(request);
+  }
+
+  async function sendMessage(text) {
+    conversationSession.ensureSession();
+    const scope = currentComposerScope();
+    conversationView.reset();
+    rememberModelSelection();
+    applyConversationChrome();
+    renderSessions();
+
+    const submittedAttachments = [...state.pendingAttachments];
+    attachments.invalidateCompletions();
+    state.pendingAttachments = [];
+    renderAttachments();
+
+    conversationSession.appendLocalUserMessage({
+      text,
+      attachments: submittedAttachments,
+    });
+
+    let requestId;
+    try {
+      requestId = await postChatMessage({
+        text,
+        attachments: submittedAttachments,
+        environmentId: scope.environmentId,
+        sessionId: scope.sessionId,
+        agentMode: state.agentMode,
+        toolPermissionMode: getToolPermissionMode(),
+        modelPreference: getModelPreference(),
+      });
+    } catch (error) {
+      if (isCurrentComposerScope(scope)) {
+        state.pendingAttachments = [
+          ...submittedAttachments,
+          ...state.pendingAttachments,
+        ];
+        renderAttachments();
+      }
+      throw error;
+    }
+
+    try {
+      const rebound = sessionQueue.rebindBlocked(scope, requestId);
+      if (rebound) clearQueueRecovery(scope);
+    } catch (error) {
+      reportQueueFailure(
+        scope,
+        `The request started, but the remaining Send next queue is paused: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      );
+    }
+
+    conversationSession.activateRequestForScope(scope, requestId);
+  }
+
+  return { postChatMessage, sendMessage };
+}