@abot-ai/runtime 1.3.1 → 1.5.0

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,151 @@
+import { escapeHtml } from "../lib/text-format.js";
+import { matchesSessionQuery } from "../ui-behavior.js";
+import { renderProjectSessionPreview } from "./project-session-preview.js";
+
+function shouldExpandProjectGroup(projectId, query, collapsedProjectIds) {
+  if (String(query ?? "").trim()) return true;
+  return !collapsedProjectIds.has(projectId);
+}
+
+function createProjectGroup({
+  group, query, collapsedProjectIds, busyProjectId,
+  onToggleGroup, onNewConversation, documentRoot,
+}) {
+  const section = documentRoot.createElement("section");
+  section.className = "project-session-group";
+  const header = documentRoot.createElement("header");
+  header.title = group.directory;
+  const content = documentRoot.createElement("div");
+  content.className = "project-group-content";
+  content.id = "project-sessions-" + encodeURIComponent(group.id);
+  content.hidden = !shouldExpandProjectGroup(group.id, query, collapsedProjectIds);
+  const toggle = documentRoot.createElement("button");
+  toggle.type = "button";
+  toggle.className = "project-group-toggle";
+  toggle.setAttribute("aria-expanded", String(!content.hidden));
+  toggle.setAttribute("aria-controls", content.id);
+  const title = documentRoot.createElement("span");
+  title.className = "project-group-title";
+  title.dir = "auto";
+  title.textContent = group.name;
+  toggle.appendChild(title);
+  const chevron = documentRoot.createElement("span");
+  chevron.className = "project-group-chevron";
+  chevron.setAttribute("aria-hidden", "true");
+  toggle.appendChild(chevron);
+  toggle.addEventListener("click", () => {
+    content.hidden = !content.hidden;
+    toggle.setAttribute("aria-expanded", String(!content.hidden));
+    onToggleGroup(group.id, content.hidden);
+  });
+  const create = documentRoot.createElement("button");
+  create.type = "button";
+  create.className = "project-group-new";
+  create.title = "New conversation in " + group.name;
+  create.setAttribute("aria-label", create.title);
+  create.disabled = Boolean(busyProjectId);
+  create.textContent = busyProjectId === group.id ? "…" : "+";
+  create.addEventListener("click", () => void onNewConversation(group.id));
+  header.append(toggle, create);
+  section.append(header, content);
+  return { section, content };
+}
+
+export function renderProjectSessionGroups({
+  root,
+  projects,
+  sessions,
+  createSessionItem,
+  query,
+  loading,
+  error,
+  busyProjectId,
+  onNewConversation,
+  onRetry,
+  collapsedProjectIds = new Set(),
+  expandedProjectSessionIds = new Set(),
+  onToggleGroup = () => {},
+  onToggleProjectSessions = () => {},
+  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, content } = createProjectGroup({
+      group, query, collapsedProjectIds, busyProjectId,
+      onToggleGroup, onNewConversation, documentRoot,
+    });
+    renderProjectSessionPreview({
+      content, group, query, documentRoot,
+      expanded: expandedProjectSessionIds.has(group.id),
+      createSessionItem: (session) => createSessionItem(session, index++),
+      onToggleExpanded: onToggleProjectSessions,
+    });
+    if (group.sessions.length === 0) {
+      const empty = documentRoot.createElement("p");
+      empty.className = "project-empty-copy";
+      empty.textContent = query
+        ? "No matching conversations"
+        : "No conversations yet";
+      content.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/project-session-preview.js

@@ -0,0 +1,52 @@
+const previewSessionLimit = 5;
+
+function isSearchingProjectSessions(query) {
+  return Boolean(String(query ?? "").trim());
+}
+
+function canExpandProjectSessions(sessions, query) {
+  if (isSearchingProjectSessions(query)) return false;
+  return sessions.length > previewSessionLimit;
+}
+
+export function renderProjectSessionPreview({
+  content, group, query, expanded, createSessionItem, onToggleExpanded,
+  documentRoot,
+}) {
+  const rows = documentRoot.createElement("div");
+  rows.className = "project-session-rows";
+  rows.id = content.id + "-rows";
+  const items = group.sessions.map((session) => createSessionItem(session));
+  for (const item of items) rows.appendChild(item);
+  content.appendChild(rows);
+
+  function setOverflowVisible(showAll) {
+    for (const [index, item] of items.entries()) {
+      item.hidden = !showAll && index >= previewSessionLimit;
+    }
+  }
+
+  setOverflowVisible(expanded || isSearchingProjectSessions(query));
+  if (!canExpandProjectSessions(group.sessions, query)) return;
+  const toggle = documentRoot.createElement("button");
+  toggle.type = "button";
+  toggle.className = "project-session-more";
+  toggle.setAttribute("aria-controls", rows.id);
+
+  function updateToggle() {
+    toggle.textContent = expanded
+      ? "Show less"
+      : `Show more (${items.length - previewSessionLimit})`;
+    toggle.setAttribute("aria-expanded", String(expanded));
+    toggle.setAttribute("aria-label", `${toggle.textContent} conversations in ${group.name}`);
+  }
+
+  updateToggle();
+  toggle.addEventListener("click", () => {
+    expanded = !expanded;
+    setOverflowVisible(expanded);
+    updateToggle();
+    onToggleExpanded(group.id, expanded);
+  });
+  content.appendChild(toggle);
+}

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

@@ -0,0 +1,87 @@
+/** 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", "Restart runtime with saved configuration");
+  panel.innerHTML =
+    '<p role="status" aria-live="polite">Restart with saved settings across environments when idle.</p><button type="button">Restart runtime</button>';
+  const status = panel.querySelector("p");
+  const button = panel.querySelector("button");
+  root.append(panel);
+  let busy = false;
+
+  function markPending() {
+    status.textContent = "Changes saved. Restart to apply them.";
+    button.textContent = "Apply & restart";
+  }
+
+  function markApplied() {
+    status.textContent = "Saved changes are now active.";
+    button.textContent = "Restart runtime";
+  }
+
+  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 = "Restarting with saved settings…";
+    try {
+      const result = await apply();
+      if (environment !== getEnvironmentId()) return;
+      if (result?.activation?.status !== "ready") {
+        status.textContent =
+          result?.activation?.message ||
+          "The runtime could not restart yet. Try again when it is idle.";
+        return;
+      }
+      activated = true;
+      const refreshed = await refresh();
+      if (environment !== getEnvironmentId()) return;
+      status.textContent =
+        refreshed === false
+          ? "Runtime restarted. Refresh configuration to update this view."
+          : "Runtime restarted. Saved settings are now active.";
+    } catch (error) {
+      if (environment !== getEnvironmentId()) return;
+      if (activated) {
+        status.textContent =
+          "Runtime restarted. Refresh configuration to update this view.";
+      } else {
+        status.textContent =
+          error instanceof Error
+            ? error.message
+            : "The runtime could not restart. Try again.";
+      }
+    } finally {
+      busy = false;
+      button.disabled = false;
+      if (activated) button.textContent = "Restart runtime";
+      workspace.endExternalRuntimeMutation();
+      if (environment !== getEnvironmentId()) {
+        status.textContent =
+          "Environment changed. Restart with saved settings when idle.";
+        button.textContent = "Restart runtime";
+      }
+    }
+    if (!activated) return;
+    if (environment !== getEnvironmentId()) return;
+    if (onAppliedSettled() === false)
+      status.textContent =
+        "Runtime restarted. 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?.(),
+  };
+}