@abot-ai/runtime 1.3.0 → 1.4.0

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

@@ -0,0 +1,200 @@
+import { renderPluginManager } from "./rendering.js";
+import { createPluginViewState } from "./view-state.js";
+
+export function createPluginManager({
+  loadPlugins,
+  getEnvironmentId = () => "",
+  setPlugin,
+  beginRuntimeMutation = () => true,
+  refreshRuntimeConfig = async () => true,
+  endRuntimeMutation = () => {},
+  recordControlEvent = () => {},
+  onConfigurationSaved = () => {},
+}) {
+  const viewState = createPluginViewState();
+  const state = {
+    root: null,
+    snapshot: null,
+    busy: false,
+    message: "",
+    error: "",
+    loadGeneration: 0,
+    mutationGeneration: 0,
+    environmentId: getEnvironmentId(),
+  };
+
+  function render({ capture = true } = {}) {
+    if (!state.root) return;
+    if (capture) viewState.capture(state.root);
+    state.root.innerHTML = renderPluginManager({
+      ...state,
+      openPluginIds: viewState.openPluginIds,
+    });
+    viewState.bind(state.root, () => render({ capture: false }));
+    state.root
+      .querySelector("[data-plugin-refresh]")
+      ?.addEventListener("click", load);
+    for (const button of state.root.querySelectorAll("[data-plugin-toggle]")) {
+      button.addEventListener("click", () =>
+        toggle(
+          button.dataset.pluginToggle,
+          button.dataset.pluginEnabled === "true",
+        ),
+      );
+    }
+    for (const input of state.root.querySelectorAll(
+      "[data-plugin-capability-toggle]",
+    )) {
+      input.addEventListener("change", () =>
+        toggle(
+          input.dataset.pluginParent,
+          input.checked,
+          input.dataset.pluginCapabilityToggle,
+        ),
+      );
+    }
+    viewState.restore(state.root, state.busy);
+  }
+
+  function mount(root) {
+    viewState.capture(state.root);
+    state.root = root;
+    render();
+  }
+
+  function isLatestPluginLoad(generation) {
+    if (generation !== state.loadGeneration) return false;
+    return state.environmentId === getEnvironmentId();
+  }
+
+  async function load() {
+    const environmentId = getEnvironmentId();
+    if (state.environmentId !== environmentId) {
+      state.environmentId = environmentId;
+      viewState.reset();
+      state.mutationGeneration += 1;
+      state.snapshot = null;
+      state.message = "";
+    }
+    const generation = ++state.loadGeneration;
+    state.busy = true;
+    state.error = "";
+    render();
+    try {
+      const snapshot = await loadPlugins();
+      if (!isLatestPluginLoad(generation)) return false;
+      state.snapshot = snapshot;
+      return true;
+    } catch (error) {
+      if (!isLatestPluginLoad(generation)) return false;
+      state.snapshot = null;
+      state.error = error instanceof Error ? error.message : String(error);
+      return false;
+    } finally {
+      if (isLatestPluginLoad(generation)) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  function isCurrentPluginMutation(generation, environmentId) {
+    if (generation !== state.mutationGeneration) return false;
+    return environmentId === getEnvironmentId();
+  }
+
+  function markApplied() {
+    state.message = "Plugin selection applied to this environment.";
+    state.error = "";
+    render();
+  }
+
+  function canChangePluginSelection(pluginId, capabilityId) {
+    const plugin = state.snapshot?.plugins?.find(
+      (entry) => entry.id === pluginId,
+    );
+    if (!plugin || plugin.blockedByGlobalPolicy) return false;
+    if (!capabilityId) return true;
+    if (plugin.pluginEnabled === false) return false;
+    const capability = plugin.capabilities?.find(
+      (entry) => entry.id === capabilityId,
+    );
+    if (!capability) return false;
+    return capability.blockedByPolicy !== true;
+  }
+
+  async function toggle(pluginId, enabled, capabilityId) {
+    if (state.busy) return false;
+    if (!canChangePluginSelection(pluginId, capabilityId)) return false;
+    if (!beginRuntimeMutation("plugin settings")) {
+      render();
+      return false;
+    }
+    ++state.loadGeneration;
+    const generation = ++state.mutationGeneration;
+    const environmentId = getEnvironmentId();
+    state.busy = true;
+    state.error = "";
+    state.message = "";
+    let saved = false;
+    render();
+    try {
+      const snapshot = await setPlugin({
+        pluginId,
+        enabled,
+        ...(capabilityId ? { capabilityId } : {}),
+      });
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      state.snapshot = snapshot;
+      saved = true;
+      onConfigurationSaved();
+      state.message =
+        "Plugin selection saved. Apply changes or restart Runtime to use it.";
+      recordControlEvent({
+        type: "control",
+        name: "Plugin selection saved",
+        tone: "done",
+        summary: `${capabilityId ? `${pluginId}:${capabilityId}` : pluginId}: saved; Runtime application required`,
+      });
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin selection saved; refresh required",
+      );
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      if (!refreshed) {
+        state.message =
+          "Plugin selection saved. Refresh configuration before making more changes. Runtime application is still required.";
+      }
+      return true;
+    } catch (error) {
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      const message = error instanceof Error ? error.message : String(error);
+      state.error = saved
+        ? `Plugin selection saved; configuration refresh failed: ${message}`
+        : message;
+      recordControlEvent({
+        type: "control",
+        name: saved
+          ? "Plugin selection refresh failed"
+          : "Plugin selection failed",
+        tone: "failed",
+        summary: state.error,
+      });
+      return false;
+    } finally {
+      endRuntimeMutation();
+      if (generation === state.mutationGeneration) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  return {
+    load,
+    markApplied,
+    mount,
+    toggle,
+    toggleCapability: (pluginId, capabilityId, enabled) =>
+      toggle(pluginId, enabled, capabilityId),
+  };
+}

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

@@ -0,0 +1,124 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function pluginMasterIsEnabled(plugin) {
+  if (typeof plugin.pluginEnabled === "boolean") return plugin.pluginEnabled;
+  return plugin.selectedCapabilityCount > 0;
+}
+
+function configuredPluginLabel(plugin) {
+  if (!pluginMasterIsEnabled(plugin)) return "Configured off";
+  if (plugin.selectedCapabilityCount === 0) return "No tools selected";
+  if (plugin.state === "partial") return "Partially selected";
+  return "Configured on";
+}
+
+function capabilityBlockReason(plugin, capability) {
+  if (capability.blockedReason) return capability.blockedReason;
+  if (plugin.blockedByGlobalPolicy)
+    return "Blocked by the global plugin policy.";
+  if (!pluginMasterIsEnabled(plugin))
+    return "Enable this plugin before changing individual tools.";
+  if (capability.blockedByPolicy)
+    return "Blocked by an existing plugin policy rule.";
+  return "";
+}
+
+function renderCapabilityRow(plugin, capability, busy) {
+  const reason = capabilityBlockReason(plugin, capability);
+  const blocked = Boolean(reason);
+  const reasonId = `plugin-tool-policy-${encodeURIComponent(plugin.id)}-${encodeURIComponent(capability.id)}`;
+  const enabled = capability.enabled === true && !blocked;
+  return `<li class="plugin-capability-row">
+    <div class="plugin-capability-copy"><code>${escapeHtml(capability.id)}</code>
+      <p class="plugin-capability-description" title="${escapeAttribute(capability.description || "No description provided.")}">${escapeHtml(capability.description || "No description provided.")}</p>
+      ${reason ? `<p class="plugin-capability-policy" id="${escapeAttribute(reasonId)}">${escapeHtml(reason)}</p>` : ""}
+    </div>
+    <label class="plugin-capability-switch">
+      <input type="checkbox" role="switch" data-plugin-capability-toggle="${escapeAttribute(capability.id)}" data-plugin-parent="${escapeAttribute(plugin.id)}"
+        aria-label="${escapeAttribute(`${capability.id} in ${plugin.id}`)}" ${reason ? `aria-describedby="${escapeAttribute(reasonId)}"` : ""}
+        ${enabled ? "checked" : ""} ${busy || blocked ? "disabled" : ""} />
+      <span aria-hidden="true"></span>
+    </label>
+  </li>`;
+}
+
+function renderCapabilities(plugin, busy, open) {
+  const capabilities = plugin.capabilities || [];
+  const panelId = `plugin-tools-${encodeURIComponent(plugin.id)}`;
+  return `<section class="plugin-tools-panel" id="${escapeAttribute(panelId)}" data-plugin-tools-panel="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Tools in ${plugin.id}`)}" ${open ? "" : "hidden"}>
+    <header class="plugin-tools-heading">
+      <button type="button" data-plugin-tools-back="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Back to ${plugin.id}`)}">Back</button>
+      <div><h4 title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</h4><span>Tools (${capabilities.length})</span></div>
+    </header>
+    <ul class="plugin-capability-list" data-plugin-tools-scroll="${escapeAttribute(plugin.id)}">
+      ${capabilities.length ? capabilities.map((capability) => renderCapabilityRow(plugin, capability, busy)).join("") : '<li class="plugin-capability-empty">This plugin does not expose any tools.</li>'}
+    </ul>
+  </section>`;
+}
+
+function renderPluginCard(plugin, busy, openPluginIds) {
+  const toolsOpen = openPluginIds.has(plugin.id);
+  const selected = pluginMasterIsEnabled(plugin);
+  const disabled = busy || plugin.blockedByGlobalPolicy;
+  const action = selected ? "Disable" : "Enable";
+  return `
+    <article class="plugin-card" data-plugin-id="${escapeAttribute(plugin.id)}">
+      <div class="plugin-card-front" data-plugin-card-front="${escapeAttribute(plugin.id)}" ${toolsOpen ? 'inert aria-hidden="true"' : ""}>
+      <div class="plugin-card-heading">
+        <div>
+          <h3 title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</h3>
+          ${plugin.version ? `<span class="plugin-version">v${escapeHtml(plugin.version)}</span>` : ""}
+        </div>
+        <span class="plugin-selection-state" data-plugin-state="${escapeAttribute(plugin.state)}">${configuredPluginLabel(plugin)}</span>
+      </div>
+      <p class="plugin-description" title="${escapeAttribute(plugin.description || "Installed Runtime plugin.")}">${escapeHtml(plugin.description || "Installed Runtime plugin.")}</p>
+      <div class="plugin-card-footer">
+        <span>${plugin.selectedCapabilityCount} of ${plugin.capabilityCount} capabilities selected</span>
+        <button type="button" data-plugin-toggle="${escapeAttribute(plugin.id)}" data-plugin-enabled="${selected ? "false" : "true"}"
+          aria-label="${escapeAttribute(`${action} ${plugin.id}`)}" ${disabled ? "disabled" : ""}>${action}</button>
+      </div>
+      <button type="button" class="plugin-tools-open" data-plugin-tools-open="${escapeAttribute(plugin.id)}" aria-controls="${escapeAttribute(`plugin-tools-${encodeURIComponent(plugin.id)}`)}" aria-expanded="${toolsOpen}" aria-label="${escapeAttribute(`Manage tools in ${plugin.id}`)}">
+        <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 7h9m4 0h3M4 17h3m4 0h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>
+        <span>Manage tools</span>
+        <span class="plugin-tools-count" aria-hidden="true">${plugin.capabilityCount}</span>
+      </button>
+      </div>
+      ${renderCapabilities(plugin, busy, toolsOpen)}
+    </article>`;
+}
+
+function globalPolicyMessage(selection) {
+  if (selection?.enabled === false) {
+    return "Plugins are disabled globally. Turn on plugins.enabled in Advanced settings before enabling individual plugins.";
+  }
+  if (selection?.deny?.includes("*")) {
+    return "The global deny rule blocks every plugin. Review plugins.deny in Advanced settings before enabling individual plugins.";
+  }
+  return "";
+}
+
+export function renderPluginManager({
+  snapshot,
+  busy,
+  message,
+  error,
+  openPluginIds = new Set(),
+}) {
+  const plugins = snapshot?.plugins || [];
+  const globalMessage = globalPolicyMessage(snapshot?.selection);
+  const status = error || message;
+  return `
+    <section class="plugin-manager" aria-label="Installed plugins" aria-busy="${busy ? "true" : "false"}">
+      <div class="plugin-manager-heading">
+        <div>
+          <h2>Installed plugins</h2>
+          <p>Choose the tools available to your agent. Open Tools to control individual tools within each plugin.</p>
+        </div>
+        <button type="button" data-plugin-refresh ${busy ? "disabled" : ""}>Refresh plugins</button>
+      </div>
+      <p class="plugin-application-note">This list shows saved configuration. Apply changes or restart Runtime to use a new selection.</p>
+      ${globalMessage ? `<p class="plugin-policy-note">${escapeHtml(globalMessage)}</p>` : ""}
+      <div class="plugin-manager-status ${error ? "error-text" : ""}" role="${error ? "alert" : "status"}" aria-live="polite">${escapeHtml(status)}</div>
+      ${plugins.length ? `<div class="plugin-grid">${plugins.map((plugin) => renderPluginCard(plugin, busy, openPluginIds)).join("")}</div>` : `<div class="empty-state compact">${busy ? "Loading installed plugins..." : "No installed plugins found."}</div>`}
+    </section>`;
+}

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);
+  }
+}