@abot-ai/runtime 1.3.1 → 1.4.0

package/dist/src/web-ui/app/components/plugins/view-state.js

@@ -0,0 +1,123 @@
+/** Card view, keyboard position and list scroll survive configuration refreshes. */
+export function createPluginViewState() {
+  const openPluginIds = new Set();
+  const toolScrollPositions = new Map();
+  let focusedControl = null;
+  let scrollPosition = null;
+
+  function controlIdentity(element) {
+    if (!element?.dataset) return null;
+    if (element.dataset.pluginCapabilityToggle) {
+      return { kind: "capability", pluginId: element.dataset.pluginParent, capabilityId: element.dataset.pluginCapabilityToggle };
+    }
+    if (element.dataset.pluginToggle) return { kind: "plugin", pluginId: element.dataset.pluginToggle };
+    if (element.dataset.pluginToolsOpen) return { kind: "open", pluginId: element.dataset.pluginToolsOpen };
+    if (element.dataset.pluginToolsBack) return { kind: "back", pluginId: element.dataset.pluginToolsBack };
+    if (Object.hasOwn(element.dataset, "pluginRefresh")) return { kind: "refresh" };
+    return null;
+  }
+
+  function rememberScroll(root) {
+    if (scrollPosition) return;
+    const viewport = root.closest?.(".config-workspace-body");
+    if (viewport) scrollPosition = { viewport, top: viewport.scrollTop };
+  }
+
+  function captureToolScroll(root) {
+    for (const list of root.querySelectorAll("[data-plugin-tools-scroll]")) {
+      const pluginId = list.dataset.pluginToolsScroll;
+      if (!openPluginIds.has(pluginId)) continue;
+      toolScrollPositions.set(pluginId, list.scrollTop);
+    }
+  }
+
+  function capture(root) {
+    if (!root || root.isConnected === false) return;
+    captureToolScroll(root);
+    const active = root.ownerDocument?.activeElement;
+    if (root.contains?.(active)) {
+      focusedControl = controlIdentity(active);
+      if (focusedControl) rememberScroll(root);
+      return;
+    }
+    if (!active || active === root.ownerDocument?.body) return;
+    focusedControl = null;
+    scrollPosition = null;
+  }
+
+  function matchesIdentity(element, identity) {
+    const candidate = controlIdentity(element);
+    if (candidate?.kind !== identity.kind) return false;
+    if (candidate.pluginId !== identity.pluginId) return false;
+    return candidate.capabilityId === identity.capabilityId;
+  }
+
+  function restoreScrollPosition() {
+    if (!scrollPosition) return;
+    if (scrollPosition.viewport.isConnected === false) return;
+    scrollPosition.viewport.scrollTop = scrollPosition.top;
+  }
+
+  function restoreToolScroll(root) {
+    for (const list of root.querySelectorAll("[data-plugin-tools-scroll]")) {
+      list.scrollTop = toolScrollPositions.get(list.dataset.pluginToolsScroll) || 0;
+    }
+  }
+
+  function isCardNavigationFocus() {
+    return ["open", "back"].includes(focusedControl?.kind);
+  }
+
+  function restore(root, busy) {
+    restoreToolScroll(root);
+    if (!focusedControl) return;
+    if (busy && !isCardNavigationFocus()) return;
+    const controls = root.querySelectorAll("[data-plugin-toggle], [data-plugin-capability-toggle], [data-plugin-tools-open], [data-plugin-tools-back], [data-plugin-refresh]");
+    let target = [...controls].find((element) => matchesIdentity(element, focusedControl));
+    if (target?.disabled) {
+      target = [...controls].find((element) => element.dataset.pluginToolsBack === focusedControl.pluginId);
+    }
+    if (!target || target.closest?.("[inert]")) return;
+    if (target.closest?.("[hidden]")) return;
+    target.focus?.({ preventScroll: true });
+    restoreScrollPosition();
+    if (root.ownerDocument?.activeElement !== target) return;
+    focusedControl = null;
+    scrollPosition = null;
+  }
+
+  function changeCardView(root, pluginId, open, onViewChange) {
+    capture(root);
+    rememberScroll(root);
+    if (open) openPluginIds.add(pluginId);
+    else openPluginIds.delete(pluginId);
+    focusedControl = { kind: open ? "back" : "open", pluginId };
+    onViewChange();
+  }
+
+  function bind(root, onViewChange) {
+    for (const button of root.querySelectorAll("[data-plugin-tools-open]")) {
+      button.addEventListener("click", () => changeCardView(root, button.dataset.pluginToolsOpen, true, onViewChange));
+    }
+    for (const button of root.querySelectorAll("[data-plugin-tools-back]")) {
+      button.addEventListener("click", () => changeCardView(root, button.dataset.pluginToolsBack, false, onViewChange));
+    }
+    for (const panel of root.querySelectorAll("[data-plugin-tools-panel]")) {
+      panel.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        changeCardView(root, panel.dataset.pluginToolsPanel, false, onViewChange);
+      });
+    }
+  }
+
+  function reset() {
+    openPluginIds.clear();
+    toolScrollPositions.clear();
+    focusedControl = null;
+    scrollPosition = null;
+  }
+
+  return { bind, capture, openPluginIds, reset, restore };
+}

package/dist/src/web-ui/app/components/project-creation.js

@@ -0,0 +1,119 @@
+import { escapeHtml, escapeAttribute } from "../lib/text-format.js";
+
+function renderFolderPicker(draft) {
+  if (!draft.pickerOpen) return "";
+  const listing = draft.listing;
+  const entries = listing?.entries ?? [];
+  const selectionDisabled = draft.loading || !listing || draft.error;
+  return `
+    <section id="project-folder-picker" class="project-folder-browser" role="region" aria-labelledby="project-folder-heading" aria-busy="${draft.loading}" tabindex="-1">
+      <div class="project-folder-heading"><span id="project-folder-heading">Choose a folder</span>${listing?.parent ? '<button type="button" data-parent>Up one folder</button>' : ""}</div>
+      <p class="project-folder-location" dir="ltr">${escapeHtml(listing?.directory || draft.directory)}</p>
+      <div class="project-folder-roots">${(listing?.roots ?? []).map((entry, index) => `<button type="button" data-root="${index}" title="${escapeAttribute(entry.path)}">${escapeHtml(entry.label)}</button>`).join("")}</div>
+      <div class="project-folder-entries">${entries.map((entry, index) => `<button type="button" data-folder="${index}" title="${escapeAttribute(entry.path)}"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7V5h6l2 2h10v13H3Z"/></svg><span dir="auto">${escapeHtml(entry.name)}</span><span aria-hidden="true">›</span></button>`).join("")}</div>
+      ${draft.loading ? '<p role="status">Loading folders…</p>' : ""}
+      ${!draft.loading && listing && entries.length === 0 ? "<p>This folder has no subfolders.</p>" : ""}
+      ${listing?.nextCursor ? '<button type="button" data-more>Load more folders</button>' : ""}
+      <div class="project-folder-actions"><button type="button" data-cancel-picker>Cancel</button><button type="button" data-select-folder ${selectionDisabled ? "disabled" : ""}>Use this folder</button></div>
+    </section>`;
+}
+
+export function createProjectCreation({ root, actions }) {
+  let wasPickerOpen = false;
+  function render(draft) {
+    root.hidden = !draft;
+    if (!draft) {
+      wasPickerOpen = false;
+      root.replaceChildren();
+      return;
+    }
+    const activeInput = root.ownerDocument?.activeElement;
+    const activeField =
+      activeInput && root.contains(activeInput) ? activeInput?.name : "";
+    const hadPickerFocus = Boolean(activeInput?.closest?.(".project-folder-browser"));
+    const pickerOpened = draft.pickerOpen && !wasPickerOpen;
+    const pickerClosed = !draft.pickerOpen && wasPickerOpen;
+    wasPickerOpen = draft.pickerOpen;
+    const selectionStart = activeInput?.selectionStart;
+    const selectionEnd = activeInput?.selectionEnd;
+    const disabled = draft.saving ? "disabled" : "";
+    const listing = draft.listing;
+    const entries = listing?.entries ?? [];
+    root.innerHTML = `
+      <form class="project-create-form">
+        <header><h2>Create a project</h2><p>Choose a folder for this project's conversations.</p></header>
+        <label>Project name <input name="name" maxlength="120" autocomplete="off" value="${escapeAttribute(draft.name)}" placeholder="Folder name" ${disabled}></label>
+        <label>Working folder <span class="project-path-input"><input name="directory" required autocomplete="off" spellcheck="false" value="${escapeAttribute(draft.directory)}" placeholder="Absolute folder path" ${disabled}><button type="button" data-browse aria-expanded="${draft.pickerOpen}" aria-controls="project-folder-picker" ${disabled}>Browse</button></span></label>
+        ${renderFolderPicker(draft)}
+        ${draft.error ? `<p class="error-text" role="alert">${escapeHtml(draft.error)}</p>` : ""}
+        <footer><button type="button" data-cancel ${disabled}>Cancel</button><button type="submit" class="project-create-submit" ${draft.saving || draft.loading || draft.pickerOpen ? "disabled" : ""}>${draft.saving ? "Creating…" : "Create project"}</button></footer>
+      </form>`;
+    root.querySelector("form").addEventListener("submit", (event) => {
+      event.preventDefault();
+      void actions.create();
+    });
+    root.querySelector("form").addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      if (!draft.pickerOpen) return;
+      event.preventDefault();
+      event.stopPropagation();
+      actions.cancelFolderPicker();
+    });
+    for (const field of ["name", "directory"]) {
+      root
+        .querySelector(`[name="${field}"]`)
+        .addEventListener("input", (event) =>
+          actions.updateDraft(field, event.target.value),
+        );
+    }
+    root
+      .querySelector("[data-browse]")
+      .addEventListener("click", () => void actions.openFolderPicker());
+    root
+      .querySelector("[data-cancel]")
+      .addEventListener("click", actions.closeCreate);
+    root.querySelector("[data-cancel-picker]")
+      ?.addEventListener("click", actions.cancelFolderPicker);
+    root.querySelector("[data-select-folder]")
+      ?.addEventListener("click", actions.selectFolder);
+    root
+      .querySelector("[data-parent]")
+      ?.addEventListener("click", () => void actions.browse(listing.parent));
+    root
+      .querySelector("[data-more]")
+      ?.addEventListener(
+        "click",
+        () => void actions.browse(listing.directory, listing.nextCursor),
+      );
+    for (const button of root.querySelectorAll("[data-root]")) {
+      button.addEventListener(
+        "click",
+        () =>
+          void actions.browse(listing.roots[Number(button.dataset.root)].path),
+      );
+    }
+    for (const button of root.querySelectorAll("[data-folder]")) {
+      button.addEventListener(
+        "click",
+        () => void actions.browse(entries[Number(button.dataset.folder)].path),
+      );
+    }
+    for (const button of root.querySelectorAll(
+      "[data-parent], [data-more], [data-root], [data-folder]",
+    ))
+      button.disabled = draft.saving || draft.loading;
+    if (["name", "directory"].includes(activeField)) {
+      const input = root.querySelector(`[name="${activeField}"]`);
+      input?.focus();
+      input?.setSelectionRange(selectionStart, selectionEnd);
+      return;
+    }
+    if (pickerClosed) {
+      root.querySelector("[data-browse]")?.focus();
+      return;
+    }
+    if (pickerOpened || hadPickerFocus)
+      root.querySelector(".project-folder-browser")?.focus();
+  }
+  return { render };
+}

package/dist/src/web-ui/app/components/project-session-groups.js

@@ -0,0 +1,95 @@
+import { escapeHtml, escapeAttribute } from "../lib/text-format.js";
+import { matchesSessionQuery } from "../ui-behavior.js";
+
+export function renderProjectSessionGroups({
+  root,
+  projects,
+  sessions,
+  createSessionItem,
+  query,
+  loading,
+  error,
+  busyProjectId,
+  onNewConversation,
+  onRetry,
+  documentRoot = document,
+}) {
+  const groups = new Map(
+    projects.map((project) => [project.id, { ...project, sessions: [] }]),
+  );
+  const ordinary = [];
+  for (const session of sessions) {
+    const projectId = session.projectId || session.project?.id;
+    if (!projectId) {
+      ordinary.push(session);
+      continue;
+    }
+    const group = groups.get(projectId) ?? {
+      id: projectId,
+      name: session.project?.name || "Project",
+      directory: session.project?.directory || "",
+      sessions: [],
+    };
+    group.sessions.push(session);
+    groups.set(projectId, group);
+  }
+  let index = 0;
+  const heading = documentRoot.createElement("div");
+  heading.className = "project-section-heading";
+  heading.textContent = "Projects";
+  root.appendChild(heading);
+  for (const group of groups.values()) {
+    const matchesProject = matchesSessionQuery(
+      [group.name, group.directory],
+      query,
+    );
+    if (!matchesProject && group.sessions.length === 0) continue;
+    const section = documentRoot.createElement("section");
+    section.className = "project-session-group";
+    section.innerHTML = `<header title="${escapeAttribute(group.directory)}"><span class="project-group-title" dir="auto">${escapeHtml(group.name)}</span><button type="button" title="New conversation in ${escapeAttribute(group.name)}" aria-label="New conversation in ${escapeAttribute(group.name)}" ${busyProjectId ? "disabled" : ""}>${busyProjectId === group.id ? "…" : "+"}</button></header>`;
+    section
+      .querySelector("button")
+      .addEventListener("click", () => void onNewConversation(group.id));
+    for (const session of group.sessions)
+      section.appendChild(createSessionItem(session, index++));
+    if (group.sessions.length === 0) {
+      const empty = documentRoot.createElement("p");
+      empty.className = "project-empty-copy";
+      empty.textContent = query
+        ? "No matching conversations"
+        : "No conversations yet";
+      section.appendChild(empty);
+    }
+    root.appendChild(section);
+  }
+  if (loading) {
+    const status = documentRoot.createElement("p");
+    status.className = "project-empty-copy";
+    status.textContent = "Loading projects…";
+    status.setAttribute("role", "status");
+    root.appendChild(status);
+  }
+  if (error) {
+    const status = documentRoot.createElement("div");
+    status.className = "project-load-error";
+    status.setAttribute("role", "alert");
+    status.innerHTML = `<span>${escapeHtml(error)}</span><button type="button">Retry</button>`;
+    status.querySelector("button").addEventListener("click", onRetry);
+    root.appendChild(status);
+  }
+  const regularHeading = documentRoot.createElement("div");
+  regularHeading.className =
+    "project-section-heading ordinary-conversations-heading";
+  regularHeading.textContent = "Conversations";
+  root.appendChild(regularHeading);
+  for (const session of ordinary)
+    root.appendChild(createSessionItem(session, index++));
+  if (ordinary.length === 0) {
+    const empty = documentRoot.createElement("p");
+    empty.className = "project-empty-copy";
+    empty.textContent = query
+      ? "No matching conversations"
+      : "No ordinary conversations yet";
+    root.appendChild(empty);
+  }
+}

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

@@ -0,0 +1,83 @@
+/** Explicit application of saved files; presentation never stops an owner itself. */
+export function createRuntimeConfigActivation({
+  root,
+  getWorkspace,
+  apply,
+  refresh,
+  getEnvironmentId,
+  onAppliedSettled = () => true,
+}) {
+  if (!root?.ownerDocument) return { markPending() {}, markApplied() {} };
+  const panel = root.ownerDocument.createElement("section");
+  panel.className = "runtime-config-activation";
+  panel.setAttribute("aria-label", "Apply saved configuration");
+  panel.innerHTML =
+    '<p role="status" aria-live="polite">Apply saved changes when your agent is idle.</p><button type="button">Apply changes</button>';
+  const status = panel.querySelector("p");
+  const button = panel.querySelector("button");
+  root.prepend(panel);
+  let busy = false;
+
+  function markPending() {
+    status.textContent = "Changes saved. Apply them to update your agent.";
+  }
+
+  function markApplied() {
+    status.textContent = "Saved changes are now active.";
+  }
+
+  async function applySavedConfiguration() {
+    if (busy) return;
+    const workspace = getWorkspace();
+    if (!workspace?.beginExternalRuntimeMutation("saved configuration")) return;
+    const environment = getEnvironmentId();
+    let activated = false;
+    busy = true;
+    button.disabled = true;
+    status.textContent = "Applying saved changes…";
+    try {
+      const result = await apply();
+      if (environment !== getEnvironmentId()) return;
+      if (result?.activation?.status !== "ready") {
+        status.textContent =
+          result?.activation?.message ||
+          "Saved changes are waiting to be applied.";
+        return;
+      }
+      activated = true;
+      const refreshed = await refresh();
+      if (environment !== getEnvironmentId()) return;
+      status.textContent =
+        refreshed === false
+          ? "Changes applied. Refresh configuration to update this view."
+          : "Saved changes are now active.";
+    } catch (error) {
+      if (environment !== getEnvironmentId()) return;
+      if (activated) {
+        status.textContent =
+          "Changes applied. Refresh configuration to update this view.";
+      } else {
+        status.textContent =
+          error instanceof Error
+            ? error.message
+            : "Changes could not be applied. Try again.";
+      }
+    } finally {
+      busy = false;
+      button.disabled = false;
+      workspace.endExternalRuntimeMutation();
+      if (environment !== getEnvironmentId()) {
+        status.textContent =
+          "Environment changed. Apply saved changes when your agent is idle.";
+      }
+    }
+    if (!activated) return;
+    if (environment !== getEnvironmentId()) return;
+    if (onAppliedSettled() === false)
+      status.textContent =
+        "Changes applied. Finish your current edits, then refresh configuration to update environments.";
+  }
+
+  button.addEventListener("click", applySavedConfiguration);
+  return { markPending, markApplied };
+}

package/dist/src/web-ui/app/components/runtime-setup/bridge-guide.d.ts

@@ -0,0 +1,9 @@
+import type { createRuntimeSetupGuide } from "../runtime-setup-guide.js";
+
+export declare function createBridgeSetupGuide(options: {
+  container: HTMLElement;
+  conversationRegion: HTMLElement;
+  getEnvironmentId?(): string;
+  getSetupCommandMode?(): "source" | "package" | undefined;
+  copyText?(value: string): Promise<void>;
+}): ReturnType<typeof createRuntimeSetupGuide>;

package/dist/src/web-ui/app/components/runtime-setup/bridge-guide.js

@@ -0,0 +1,198 @@
+import { textOf } from "../../lib/text-format.js";
+import { renderBridgeSetup } from "./bridge-rendering.js";
+import { buildBridgeSetupCommands } from "./commands.js";
+import { createSetupViewState } from "./view-state.js";
+import { showConnectionFieldError } from "./connection-form.js";
+import { selectSetupProvider } from "./connection-state.js";
+import {
+  DEFAULT_OLLAMA_BASE_URL,
+  validateRuntimeSetupBaseUrl,
+  validateRuntimeSetupModelId,
+} from "./validation.js";
+
+export function createBridgeSetupGuide({
+  container,
+  conversationRegion,
+  getEnvironmentId = () => "",
+  getSetupCommandMode = () => "source",
+  copyText = (value) => navigator.clipboard.writeText(value),
+}) {
+  const state = {
+    provider: "",
+    modelId: "",
+    baseUrl: DEFAULT_OLLAMA_BASE_URL,
+    step: 0,
+    error: "",
+  };
+  const viewState = createSetupViewState(container);
+  let availability = { status: "loading" };
+  let environmentId = getEnvironmentId();
+  let revision = 0;
+  let bound = false;
+  let onCheckAgain = () => {};
+
+  function reset() {
+    revision += 1;
+    Object.assign(state, {
+      provider: "",
+      modelId: "",
+      baseUrl: DEFAULT_OLLAMA_BASE_URL,
+      step: 0,
+      error: "",
+    });
+    viewState.reset();
+  }
+
+  function paint(focus = false) {
+    viewState.capture();
+    container.innerHTML = renderBridgeSetup(
+      state,
+      availability,
+      getSetupCommandMode(),
+    );
+    viewState.restore({ focus, busy: availability.status === "checking" });
+  }
+
+  function showFieldError(field, message) {
+    state.error = message;
+    paint();
+    showConnectionFieldError(container, field);
+    return false;
+  }
+
+  function validateBridgeConnection() {
+    if (!state.provider)
+      return showFieldError("provider", "Choose a provider.");
+    const model = validateRuntimeSetupModelId(state.modelId);
+    if (!model.valid) return showFieldError("model-id", model.message);
+    if (state.provider !== "ollama") return true;
+    const address = validateRuntimeSetupBaseUrl(state.baseUrl);
+    if (!address.valid)
+      return showFieldError("ollama-base-url", address.message);
+    return true;
+  }
+
+  async function copyCommand(commandId) {
+    if (
+      !["ollama-pull", "setup", "model-gateway", "web-ui"].includes(commandId)
+    )
+      return;
+    if (!validateBridgeConnection()) return;
+    const commands = buildBridgeSetupCommands(
+      state.provider,
+      state.modelId,
+      state.baseUrl,
+      getSetupCommandMode(),
+    );
+    if (!commands[commandId]) return;
+    const operationRevision = revision;
+    const operationEnvironment = getEnvironmentId();
+    let message = "Copied";
+    try {
+      await copyText(commands[commandId]);
+    } catch {
+      message = "Could not copy";
+    }
+    const copyIsCurrent =
+      operationRevision === revision &&
+      operationEnvironment === getEnvironmentId();
+    if (!copyIsCurrent) return;
+    const status = container.querySelector(
+      `[data-runtime-copy-status="${commandId}"]`,
+    );
+    if (status) status.textContent = message;
+  }
+
+  function submit(event) {
+    event.preventDefault();
+    if (availability.status === "checking" || state.step !== 0) return;
+    if (!validateBridgeConnection()) return;
+    state.step = 1;
+    state.error = "";
+    revision += 1;
+    paint(true);
+  }
+
+  function click(event) {
+    if (availability.status === "checking") return;
+    const target = event.target.closest?.("[data-runtime-setup-action]");
+    const action = target?.dataset.runtimeSetupAction;
+    if (action === "check") void onCheckAgain();
+    if (action === "copy" && state.step === 1)
+      void copyCommand(target.dataset.runtimeCommand);
+    if (action !== "back") return;
+    state.step = 0;
+    state.error = "";
+    revision += 1;
+    paint(true);
+  }
+
+  function change(event) {
+    if (availability.status === "checking" || state.step !== 0) return;
+    const field = event.target.closest?.("[data-runtime-setup-field]");
+    if (field?.dataset.runtimeSetupField !== "provider") return;
+    selectSetupProvider(state, field.value);
+    state.error = "";
+    revision += 1;
+    paint();
+    container
+      .querySelector(
+        `[data-runtime-setup-field="provider"][value="${state.provider}"]`,
+      )
+      ?.focus?.({ preventScroll: true });
+  }
+
+  function input(event) {
+    if (availability.status === "checking" || state.step !== 0) return;
+    const field = event.target.closest?.("[data-runtime-setup-field]");
+    if (!field) return;
+    if (field.dataset.runtimeSetupField === "model-id")
+      state.modelId = textOf(field.value);
+    if (field.dataset.runtimeSetupField === "ollama-base-url")
+      state.baseUrl = textOf(field.value);
+    field.removeAttribute?.("aria-invalid");
+    revision += 1;
+  }
+
+  function bind({ onCheckAgain: checkAgain = () => {} } = {}) {
+    onCheckAgain = checkAgain;
+    if (bound) return;
+    bound = true;
+    container.addEventListener("submit", submit);
+    container.addEventListener("click", click);
+    container.addEventListener("change", change);
+    container.addEventListener("input", input);
+  }
+
+  function render(setup) {
+    availability = setup || { status: "loading" };
+    if (environmentId !== getEnvironmentId()) {
+      reset();
+      environmentId = getEnvironmentId();
+    }
+    const visible =
+      availability.showGuide !== false &&
+      ["checking", "error", "setup_required"].includes(availability.status);
+    container.hidden = !visible;
+    conversationRegion.hidden = visible;
+    if (!visible) {
+      dispose();
+      return;
+    }
+    paint();
+  }
+
+  function dispose() {
+    reset();
+    container.replaceChildren();
+  }
+
+  return {
+    bind,
+    render,
+    dispose,
+    clearSecret() {},
+    focusAction: () =>
+      container.querySelector('[data-runtime-setup-action="check"]')?.focus?.(),
+  };
+}