@abot-ai/runtime 1.3.1 → 1.5.0

package/dist/src/web-ui/app/controllers/runtime-selection-controller.js

@@ -1,4 +1,8 @@
 import { escapeAttribute, escapeHtml, textOf } from "../lib/text-format.js";
+import { normalizeToolPermissionMode } from "../lib/tool-permission-mode.js";
+import { createToolPermissionModeController } from "./tool-permission-mode-controller.js";
+
+export { normalizeToolPermissionMode } from "../lib/tool-permission-mode.js";
 
 export function normalizeAgentMode(mode) {
   const normalized = textOf(mode).trim().toLowerCase();
@@ -7,11 +11,6 @@ export function normalizeAgentMode(mode) {
     : "reasoning";
 }
 
-export function normalizeToolPermissionMode(value) {
-  const mode = textOf(value).trim().toLowerCase();
-  return mode === "ask" || mode === "approval_required" ? "ask" : "full_access";
-}
-
 function agentModeMeta(mode) {
   const modes = {
     auto: { label: "Auto", description: "Lets the agent choose", icon: "*" },
@@ -30,20 +29,6 @@ function agentModeMeta(mode) {
   return modes[normalizeAgentMode(mode)] || modes.reasoning;
 }
 
-function permissionMeta(mode) {
-  return normalizeToolPermissionMode(mode) === "ask"
-    ? {
-        label: "Ask",
-        description: "Require approval",
-        title: "Ask before running tools",
-      }
-    : {
-        label: "Full",
-        description: "Run tools directly",
-        title: "Run tools without approval prompts",
-      };
-}
-
 export function createRuntimeSelectionController({
   state,
   dom,
@@ -115,10 +100,8 @@ export function createRuntimeSelectionController({
     const selectedOption =
       options.find((option) => option.value === selected) || options[0];
     const label = selectedOption?.label || selected || "Environment";
-    const glyph = label.slice(0, 3).toLocaleUpperCase();
     dom.agentPickerButton.hidden = false;
     dom.agentPickerButton.innerHTML = `
-      <span class="rail-environment-glyph" aria-hidden="true">${escapeHtml(glyph)}</span>
       <span class="rail-button-label">${escapeHtml(label)}</span>
     `;
     dom.agentPickerButton.title = `Environment: ${label}`;
@@ -207,82 +190,12 @@ export function createRuntimeSelectionController({
     saveModelPreferences();
   }
 
-  const sessionModeFor = (sessionId) => {
-    const mode = state.sessionModes[sessionId];
-    return mode && typeof mode === "object" && !Array.isArray(mode) ? mode : {};
-  };
-  const currentToolPermissionMode = () =>
-    normalizeToolPermissionMode(
-      getComposerSessionId()
-        ? sessionModeFor(getComposerSessionId()).toolPermissionMode
-        : undefined,
-    );
-
-  function clearSessionMode(sessionId) {
-    if (!sessionId) return;
-    delete state.sessionModes[sessionId];
-    preferences.saveSessionModes(state.sessionModes);
-  }
-
-  function setToolPermissionMode(mode) {
-    if (!getComposerSessionId()) return;
-    const normalized = normalizeToolPermissionMode(mode);
-    if (normalized === "full_access")
-      delete state.sessionModes[getComposerSessionId()];
-    else {
-      state.sessionModes[getComposerSessionId()] = {
-        ...sessionModeFor(getComposerSessionId()),
-        toolPermissionMode: normalized,
-        savedAt: Date.now(),
-      };
-    }
-    preferences.saveSessionModes(state.sessionModes);
-    state.permissionModeMenuOpen = false;
-    renderPermissionMode();
-    dom.permissionModeButton.focus();
-  }
-
-  function renderPermissionMode() {
-    const mode = currentToolPermissionMode();
-    const meta = permissionMeta(mode);
-    dom.permissionModeButton.innerHTML = `<span class="permission-mode-label">${escapeHtml(meta.label)}</span>`;
-    dom.permissionModeButton.title = meta.title;
-    dom.permissionModeButton.disabled = !getComposerSessionId();
-    dom.permissionModeButton.classList.toggle("full", mode === "full_access");
-    dom.permissionModeButton.classList.toggle(
-      "open",
-      state.permissionModeMenuOpen,
-    );
-    dom.permissionModeButton.setAttribute(
-      "aria-expanded",
-      state.permissionModeMenuOpen ? "true" : "false",
-    );
-    dom.permissionModeMenu.classList.toggle(
-      "open",
-      state.permissionModeMenuOpen,
-    );
-    dom.permissionModeMenu.hidden = !state.permissionModeMenuOpen;
-    dom.permissionModeMenu.setAttribute("role", "menu");
-    dom.permissionModeMenu.innerHTML = ["full_access", "ask"]
-      .map((itemMode) => {
-        const item = permissionMeta(itemMode);
-        const selected = normalizeToolPermissionMode(itemMode) === mode;
-        return `
-          <button class="permission-mode-option ${selected ? "selected" : ""}" type="button"
-            role="menuitemradio" aria-checked="${selected ? "true" : "false"}"
-            tabindex="${selected ? "0" : "-1"}" data-mode="${escapeAttribute(itemMode)}">
-            <strong>${escapeHtml(item.label)}</strong><small>${escapeHtml(item.description)}</small>
-          </button>`;
-      })
-      .join("");
-    dom.permissionModeMenu
-      .querySelectorAll(".permission-mode-option")
-      .forEach((button) => {
-        button.addEventListener("click", () =>
-          setToolPermissionMode(button.dataset.mode),
-        );
-      });
-  }
+  const {
+    clearSessionMode, currentToolPermissionMode, initializeSessionMode,
+    renderPermissionMode, setToolPermissionMode,
+  } = createToolPermissionModeController({
+    state, dom, preferences, recordControlEvent, getComposerSessionId,
+  });
 
   function renderAgentMode() {
     const meta = agentModeMeta(state.agentMode);
@@ -469,6 +382,7 @@ export function createRuntimeSelectionController({
     clearSessionMode,
     configuredEnvironmentOptions,
     currentToolPermissionMode,
+    initializeSessionMode,
     environmentOptions,
     loadAgentMode,
     loadModels,

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

@@ -1,16 +1,23 @@
+import { createEventRefresh } from "../lib/event-refresh.js";
 import {
   canManageSchedule,
   matchesScheduleFilter,
   scheduleErrorMessage,
 } from "../lib/schedule-presentation.js";
 
+function scheduleEntryFilter(jobId = "") {
+  return jobId ? "all" : "active";
+}
+
 export function createSchedulesController({
   client,
   getEnvironmentId,
   render,
   openConversation,
+  onRouteSelectionChange = () => {},
   setTimer = setTimeout,
   clearTimer = clearTimeout,
+  isVisible = () => globalThis.document?.visibilityState !== "hidden",
 }) {
   const state = {
     environmentId: "",
@@ -24,7 +31,7 @@ export function createSchedulesController({
     runsNextCursor: null,
     runsPreviousCursors: [],
     query: "",
-    filter: "current",
+    filter: scheduleEntryFilter(),
     loading: false,
     loadingRuns: false,
     mutation: "",
@@ -37,7 +44,19 @@ export function createSchedulesController({
   let detailRevision = 0;
   let selectionRevision = 0;
   let pendingDetailRead = null;
-  let pollTimer;
+  let historySettled = false;
+  let nextRefreshOptions = null;
+  let refreshDeferred = false;
+  const eventRefresh = createEventRefresh({
+    canRefresh: canRefreshVisibleSchedules,
+    refresh: () => {
+      const options = nextRefreshOptions || { background: true };
+      nextRefreshOptions = null;
+      return load({ ...options, waitForHistory: true });
+    },
+    setTimer,
+    clearTimer,
+  });
   const publish = () => render({ ...state });
   const isCurrentEnvironment = (environmentId) =>
     environmentId === getEnvironmentId();
@@ -49,17 +68,21 @@ export function createSchedulesController({
     state.selectedId === jobId;
 
   function resetRunPages() {
+    historySettled = false;
     Object.assign(state, {
       runs: [],
+      detailError: "",
       runsCursor: null,
       runsNextCursor: null,
       runsPreviousCursors: [],
     });
   }
 
-  function selectJobIdentity(jobId) {
-    if (state.selectedId !== jobId) resetRunPages();
+  function selectJobIdentity(jobId, { routeNavigation = false } = {}) {
+    if (state.selectedId === jobId) return;
+    resetRunPages();
     state.selectedId = jobId;
+    if (routeNavigation) onRouteSelectionChange();
   }
 
   function isVisibleJob(job) {
@@ -94,7 +117,7 @@ export function createSchedulesController({
 
   function shouldShowHistoryLoading(background) {
     if (!background) return true;
-    return state.runs.length === 0;
+    return !historySettled;
   }
 
   function shouldOpenEntryEditor(
@@ -149,23 +172,56 @@ export function createSchedulesController({
     selectJobIdentity(firstVisibleJob()?.id || "");
   }
 
+  function canRefreshVisibleSchedules() {
+    if (!active) return false;
+    if (state.mutation) return false;
+    return isVisible();
+  }
+
+  function refresh(options = { background: true }) {
+    if (!nextRefreshOptions) nextRefreshOptions = options;
+    if (state.mutation) {
+      refreshDeferred = true;
+      return Promise.resolve();
+    }
+    return eventRefresh.run();
+  }
+
   function scheduleRefresh() {
-    clearTimer(pollTimer);
-    if (!active) return;
-    pollTimer = setTimer(() => {
-      if (state.mutation) {
-        scheduleRefresh();
-        return;
-      }
-      void load({ background: true });
-    }, 5000);
+    if (state.mutation) {
+      refreshDeferred = true;
+      return;
+    }
+    eventRefresh.schedule();
+  }
+
+  function finishMutation() {
+    state.mutation = "";
+    publish();
+    if (!refreshDeferred) return;
+    refreshDeferred = false;
+    if (canRefreshVisibleSchedules()) void refresh();
+  }
+
+  function visibilityChanged() {
+    eventRefresh.cancel();
+    nextRefreshOptions = null;
+    void refresh();
+  }
+
+  function environmentChanged() {
+    eventRefresh.cancel();
+    nextRefreshOptions = null;
+    void refresh({ background: false });
   }
 
   async function load({
     background = false,
     openFirstEditor = false,
     targetJobId = "",
+    waitForHistory = false,
   } = {}) {
+    let historyRead;
     const environmentId = getEnvironmentId();
     const revision = ++loadRevision;
     const readSelectionRevision = selectionRevision;
@@ -178,7 +234,7 @@ export function createSchedulesController({
         models: [],
         selectedId: "",
         query: "",
-        filter: targetJobId ? "all" : "current",
+        filter: scheduleEntryFilter(targetJobId),
         runs: [],
         editor: null,
         error: "",
@@ -212,7 +268,7 @@ export function createSchedulesController({
         readSelectionRevision,
       );
       if (state.selectedId)
-        void select(state.selectedId, {
+        historyRead = select(state.selectedId, {
           background: true,
           reusePendingRead: background,
         });
@@ -223,9 +279,9 @@ export function createSchedulesController({
       if (hasCurrentListRead(revision, environmentId)) {
         state.loading = false;
         publish();
-        scheduleRefresh();
       }
     }
+    if (waitForHistory) await historyRead;
   }
 
   async function select(
@@ -233,19 +289,31 @@ export function createSchedulesController({
     { background = false, reusePendingRead = background } = {},
   ) {
     const environmentId = getEnvironmentId();
-    if (reusePendingRead && hasPendingDetailRead(jobId, environmentId)) return;
+    if (reusePendingRead && hasPendingDetailRead(jobId, environmentId))
+      return pendingDetailRead.settled;
     if (!background) selectionRevision += 1;
     const revision = ++detailRevision;
-    selectJobIdentity(jobId);
+    const selectionChanged = state.selectedId !== jobId;
+    selectJobIdentity(jobId, { routeNavigation: !background });
     state.loadingRuns = shouldShowHistoryLoading(background);
-    state.detailError = "";
+    if (selectionChanged) state.detailError = "";
     if (!hasLoadedJob(jobId)) {
       resetRunPages();
       state.loadingRuns = false;
       publish();
       return;
     }
-    const read = { revision, environmentId, jobId, cursor: state.runsCursor };
+    let finishRead;
+    const settled = new Promise((resolve) => {
+      finishRead = resolve;
+    });
+    const read = {
+      revision,
+      environmentId,
+      jobId,
+      cursor: state.runsCursor,
+      settled,
+    };
     pendingDetailRead = read;
     if (!background) publish();
     try {
@@ -254,13 +322,16 @@ export function createSchedulesController({
       });
       if (!hasCurrentDetailRead(revision, environmentId, jobId)) return;
       state.runs = result.runs || [];
+      state.detailError = "";
       state.runsNextCursor = result.nextCursor ?? null;
     } catch (error) {
       if (!hasCurrentDetailRead(revision, environmentId, jobId)) return;
       state.detailError = scheduleErrorMessage(error);
     } finally {
+      finishRead();
       if (pendingDetailRead === read) pendingDetailRead = null;
       if (hasCurrentDetailRead(revision, environmentId, jobId)) {
+        historySettled = true;
         state.loadingRuns = false;
         publish();
       }
@@ -268,6 +339,7 @@ export function createSchedulesController({
   }
 
   async function moveRunPage(cursor, previousCursors) {
+    historySettled = false;
     state.runsCursor = cursor;
     state.runsPreviousCursors = previousCursors;
     state.runsNextCursor = null;
@@ -308,7 +380,6 @@ export function createSchedulesController({
     selectionRevision += 1;
     state.editor = null;
     publish();
-    scheduleRefresh();
   }
 
   async function save(input) {
@@ -326,11 +397,10 @@ export function createSchedulesController({
         : await client.createSchedule(input, editor.environmentId);
       if (!isCurrentEnvironment(editor.environmentId)) return;
       state.editor = null;
-      selectJobIdentity(result.job.id);
+      selectJobIdentity(result.job.id, { routeNavigation: true });
       await load();
     } finally {
-      state.mutation = "";
-      publish();
+      finishMutation();
     }
   }
 
@@ -347,15 +417,14 @@ export function createSchedulesController({
       if (isCurrentEnvironment(environmentId))
         state.error = scheduleErrorMessage(error);
     } finally {
-      state.mutation = "";
-      publish();
+      finishMutation();
     }
   }
 
   async function openJob(jobId) {
     selectionRevision += 1;
-    Object.assign(state, { query: "", filter: "all", editor: null });
-    selectJobIdentity(jobId);
+    Object.assign(state, { query: "", filter: scheduleEntryFilter(jobId), editor: null });
+    selectJobIdentity(jobId, { routeNavigation: true });
     await load({ targetJobId: jobId });
   }
 
@@ -368,7 +437,8 @@ export function createSchedulesController({
     if (state.error) return;
     beginEdit("", {
       ...initialValues,
-      modelProfileId: initialValues.modelProfileId || state.defaultModelProfileId,
+      modelProfileId:
+        initialValues.modelProfileId || state.defaultModelProfileId,
     });
   }
 
@@ -401,19 +471,25 @@ export function createSchedulesController({
     openJob,
     openCreate,
     snapshot: () => ({ ...state }),
+    visibilityChanged,
+    environmentChanged,
+    refresh,
+    scheduleRefresh,
     filter,
     setActive(value) {
       const entering = value && !active;
       active = value;
+      refreshDeferred = false;
+      eventRefresh.cancel();
+      nextRefreshOptions = null;
       if (active) {
-        void load({ openFirstEditor: entering });
+        void refresh({ background: !entering, openFirstEditor: entering });
         return;
       }
       loadRevision += 1;
       detailRevision += 1;
       state.loading = false;
       state.loadingRuns = false;
-      clearTimer(pollTimer);
     },
     openConversation: (sessionId, requestId) =>
       openConversation(sessionId, requestId),

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

@@ -6,11 +6,13 @@ import {
 import { matchesSessionQuery } from "../ui-behavior.js";
 import { escapeAttribute, escapeHtml, textOf } from "../lib/text-format.js";
 import { getNumber } from "../lib/event-presentation.js";
+import { createSessionSidebarController } from "./session-sidebar-controller.js";
 
 export function createSessionController({
   state,
   dom,
   sessionActionsMenu,
+  renderGroups = () => false,
   shell,
   preferences,
   client,
@@ -21,6 +23,7 @@ export function createSessionController({
   onSaveModelPreferences,
   onReload,
   onControlEvent,
+  onSidebarChange,
   confirmAction = window.confirm.bind(window),
   copyText = (value) => navigator.clipboard.writeText(value),
 }) {
@@ -29,24 +32,13 @@ export function createSessionController({
   const byId = (sessionId) =>
     state.sessions.find((session) => textOf(session.id) === sessionId);
   const isPinned = (sessionId) => state.pinnedSessionIds.includes(sessionId);
-
-  function ordered() {
-    const pinnedOrder = new Map(
-      state.pinnedSessionIds.map((sessionId, index) => [sessionId, index]),
-    );
-    return [...state.sessions].sort((left, right) => {
-      const leftPinned = pinnedOrder.has(left.id);
-      const rightPinned = pinnedOrder.has(right.id);
-      if (leftPinned !== rightPinned) return leftPinned ? -1 : 1;
-      if (leftPinned && rightPinned) {
-        return pinnedOrder.get(left.id) - pinnedOrder.get(right.id);
-      }
-      return 0;
-    });
-  }
+  const sidebar = createSessionSidebarController({
+    state, preferences, selectedEnvironmentId, showToast: shell?.showToast,
+    render: onSidebarChange ?? render, getFilteredSessions: filtered,
+  });
 
   function filtered() {
-    return ordered().filter((session) =>
+    return sidebar.visibleSessions().filter((session) =>
       matchesSessionQuery(
         [
           titleOf(session),
@@ -63,83 +55,71 @@ export function createSessionController({
     dom.sessionsList.innerHTML = "";
     const sessions = filtered();
     dom.sessionsCount.textContent = String(sessions.length);
-    if (state.sessions.length === 0) {
-      dom.sessionsList.innerHTML = `
-        <div class="empty-state sidebar-empty-state">
-          <strong>No conversations yet</strong>
-          <span>Start a new conversation to keep its history here.</span>
-        </div>
-      `;
-      return;
-    }
-    if (sessions.length === 0) {
-      dom.sessionsList.innerHTML = `
-        <div class="empty-state sidebar-empty-state compact">
-          <strong>No matches</strong>
-          <span>Try a different conversation name or message.</span>
+    sidebar.renderSections({ root: dom.sessionsList, sessions, createSessionItem, renderGroups });
+  }
+
+  function createSessionItem(session, sessionIndex) {
+    const sessionId = textOf(session.id);
+    const pinned = isPinned(sessionId);
+    const busy = state.busySessionIds.has(sessionId);
+    const unreadCount = getNumber(session.unreadCount, 0);
+    const unreadUnavailable = isSessionReadStateUnavailable(session);
+    const hasUnread = unreadUnavailable
+      ? false
+      : session.hasUnread === true || unreadCount > 0;
+    const item = document.createElement("div");
+    item.className = `session-item ${
+      session.id === state.currentSessionId ? "active" : ""
+    } ${pinned ? "pinned" : ""} ${busy ? "busy" : ""} ${
+      hasUnread ? "unread" : ""
+    }`;
+    item.innerHTML = `
+      <button id="session-open-${escapeAttribute(encodeURIComponent(sessionId))}" class="session-open-button" type="button" title="${escapeAttribute(titleOf(session))}">
+        <div class="session-title-row">
+          <div class="session-title" dir="auto">${escapeHtml(titleOf(session))}</div>
+          ${unreadUnavailable ? '<span class="session-unread-badge" title="Unread status unavailable" aria-label="Unread status unavailable">?</span>' : ""}
+          ${
+            hasUnread
+              ? `<span class="session-unread-badge" title="${escapeAttribute(
+                  `${unreadCount || 1} unread`,
+                )}">${unreadCount > 99 ? "99+" : unreadCount || 1} unread</span>`
+              : ""
+          }
         </div>
-      `;
-      return;
-    }
-    for (const [sessionIndex, session] of sessions.entries()) {
-      const sessionId = textOf(session.id);
-      const pinned = isPinned(sessionId);
-      const busy = state.busySessionIds.has(sessionId);
-      const unreadCount = getNumber(session.unreadCount, 0);
-      const unreadUnavailable = isSessionReadStateUnavailable(session);
-      const hasUnread = unreadUnavailable
-        ? false
-        : session.hasUnread === true || unreadCount > 0;
-      const item = document.createElement("div");
-      item.className = `session-item ${
-        session.id === state.currentSessionId ? "active" : ""
-      } ${pinned ? "pinned" : ""} ${busy ? "busy" : ""} ${
-        hasUnread ? "unread" : ""
-      }`;
-      item.innerHTML = `
-        <button class="session-open-button" type="button" title="${escapeAttribute(titleOf(session))}">
-          <div class="session-title-row">
-            <div class="session-title" dir="auto">${escapeHtml(titleOf(session))}</div>
-            ${unreadUnavailable ? '<span class="session-unread-badge" title="Unread status unavailable" aria-label="Unread status unavailable">?</span>' : ""}
-            ${
-              hasUnread
-                ? `<span class="session-unread-badge" title="${escapeAttribute(
-                    `${unreadCount || 1} unread`,
-                  )}">${unreadCount > 99 ? "99+" : unreadCount || 1}</span>`
-                : ""
-            }
-          </div>
-        </button>
-        <div class="session-actions" aria-label="Session actions">
-          <button class="session-menu-button" type="button" title="Session actions" aria-label="Session actions" aria-haspopup="menu" aria-expanded="false" aria-controls="session-menu-${sessionIndex}">•••</button>
-          <div id="session-menu-${sessionIndex}" class="session-menu" role="menu" hidden>
-            <button class="session-action pin-action" type="button" role="menuitem" tabindex="-1" title="${pinned ? "Unpin session" : "Pin session"}">${pinned ? "Unpin" : "Pin"}</button>
-            <button class="session-action copy-filename-action" type="button" role="menuitem" tabindex="-1" title="Copy session filename">Copy filename</button>
-            <button class="session-action clear-action" type="button" role="menuitem" tabindex="-1" title="Reset messages">Reset</button>
-            <button class="session-action delete-action" type="button" role="menuitem" tabindex="-1" title="Delete session">Delete</button>
-          </div>
+      </button>
+      <div class="session-actions" aria-label="Session actions">
+        <button class="session-menu-button" type="button" title="Session actions" aria-label="Session actions" aria-haspopup="menu" aria-expanded="false" aria-controls="session-menu-${sessionIndex}">•••</button>
+        <div id="session-menu-${sessionIndex}" class="session-menu" role="menu" hidden>
+          <button class="session-action pin-action" type="button" role="menuitem" tabindex="-1" title="${pinned ? "Unpin session" : "Pin session"}">${pinned ? "Unpin" : "Pin"}</button>
+          <button class="session-action move-up-action" type="button" role="menuitem" tabindex="-1">Move up</button>
+          <button class="session-action move-down-action" type="button" role="menuitem" tabindex="-1">Move down</button>
+          <button class="session-action archive-action" type="button" role="menuitem" tabindex="-1" title="Hide or restore this conversation in this browser and environment">${sidebar.isArchiveView() ? "Restore" : "Archive"}</button>
+          <button class="session-action copy-filename-action" type="button" role="menuitem" tabindex="-1" title="Copy session filename">Copy filename</button>
+          <button class="session-action clear-action" type="button" role="menuitem" tabindex="-1" title="Reset messages">Reset</button>
+          <button class="session-action delete-action" type="button" role="menuitem" tabindex="-1" title="Delete session">Delete</button>
         </div>
-      `;
-      item
-        .querySelector(".session-open-button")
-        ?.addEventListener("click", () => {
-          shell.setSessionsDrawerOpen(false);
-          void onOpen(session.id);
-        });
-      item
-        .querySelector(".pin-action")
-        ?.addEventListener("click", () => togglePinned(sessionId));
-      item
-        .querySelector(".copy-filename-action")
-        ?.addEventListener("click", () => void copyFilename(sessionId));
-      item
-        .querySelector(".clear-action")
-        ?.addEventListener("click", () => void clearMessages(sessionId));
-      item
-        .querySelector(".delete-action")
-        ?.addEventListener("click", () => void deleteSession(sessionId));
-      dom.sessionsList.appendChild(item);
-    }
+      </div>
+    `;
+    item
+      .querySelector(".session-open-button")
+      ?.addEventListener("click", () => {
+        shell.setSessionsDrawerOpen(false);
+        void onOpen(session.id);
+      });
+    item
+      .querySelector(".pin-action")
+      ?.addEventListener("click", () => togglePinned(sessionId));
+    item
+      .querySelector(".copy-filename-action")
+      ?.addEventListener("click", () => void copyFilename(sessionId));
+    item
+      .querySelector(".clear-action")
+      ?.addEventListener("click", () => void clearMessages(sessionId));
+    item
+      .querySelector(".delete-action")
+      ?.addEventListener("click", () => void deleteSession(sessionId));
+    sidebar.bindItem(item, session);
+    return item;
   }
 
   function setCurrentTitle(title) {
@@ -232,7 +212,7 @@ export function createSessionController({
           session.latestAssistantMessageId,
       };
     });
-    if (changed) render();
+    if (changed) (onSidebarChange ?? render)();
     return changed;
   }
 
@@ -330,6 +310,7 @@ export function createSessionController({
   }
 
   return {
+    archiveSession: (sessionId) => sidebar.archiveSession(sessionId),
     applyReadState,
     applyTitle,
     byId,