@abot-ai/runtime 1.4.0 → 1.6.0

package/dist/src/web-ui/app/components/passive-learning/settings.js

@@ -0,0 +1,178 @@
+import { learningModelLabel } from "./presentation.js";
+import { hasActivityModel, readActivityPermissions } from "./activity-controls.js";
+
+const timeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+const checkboxFields = new Set(["collectionEnabled", "processingEnabled", "proactiveEnabled", "collectionHours", "processingHours", "proactiveHours"]);
+const integerLimits = { analysisIntervalMinutes: [1, 1440], analysisObservationCount: [1, 256], proactiveIntervalMinutes: [1, 1440],
+  proactiveMessagesPerDay: [1, 100], maxConcurrentBatches: [1, 8], modelCallsPerDay: [1, Number.MAX_SAFE_INTEGER],
+  embeddingCallsPerDay: [1, Number.MAX_SAFE_INTEGER], embeddingCharactersPerDay: [1, Number.MAX_SAFE_INTEGER],
+  promotionScore: [0, 100], retentionDays: [1, 365], maxCandidates: [1, 5000] };
+
+function savedSettings(preferences = {}) {
+  const limits = preferences.resourceLimits || {}, maturation = preferences.maturation || {};
+  const permissions = readActivityPermissions(preferences);
+  const values = { collectionEnabled: permissions.collection, processingEnabled: permissions.learning,
+    proactiveEnabled: permissions.proactive, modelProfileId: preferences.modelProfileId || "",
+    proactiveModelProfileId: preferences.proactiveModelProfileId || "",
+    analysisTrigger: preferences.analysisTrigger ?? "interval", analysisObservationCount: preferences.analysisObservationCount ?? 100,
+    analysisIntervalMinutes: preferences.analysisIntervalMinutes ?? 15, proactiveIntervalMinutes: preferences.proactiveIntervalMinutes ?? 60,
+    proactiveMessagesPerDay: preferences.proactiveMessagesPerDay ?? 2, maxConcurrentBatches: preferences.maxConcurrentBatches ?? limits.maxConcurrentCalls ?? 1,
+    modelCallsPerDay: limits.modelCallsPerDay ?? 24, embeddingCallsPerDay: limits.embeddingCallsPerDay ?? 96,
+    embeddingCharactersPerDay: limits.embeddingCharactersPerDay ?? 1048576, budgetTimeZone: limits.timeZone || "UTC",
+    promotionScore: maturation.promotionScore ?? 90, retentionDays: maturation.retentionDays ?? 30,
+    maxCandidates: maturation.maxCandidates ?? 500, candidateMiB: (maturation.maxBytes ?? 2097152) / 1048576 };
+  for (const [axis, window] of [["collection", preferences.collectionWindow], ["processing", preferences.analysisWindow], ["proactive", preferences.proactiveWindow]]) {
+    Object.assign(values, { [`${axis}Hours`]: Boolean(window), [`${axis}Start`]: window?.start || "09:00",
+      [`${axis}End`]: window?.end || "17:00", [`${axis}TimeZone`]: window?.timeZone || timeZone() });
+  }
+  return Object.fromEntries(Object.entries(values).map(([key, value]) => [key, checkboxFields.has(key) ? value : String(value)]));
+}
+
+function preferencesFrom(values) {
+  const window = (axis) => values[`${axis}Hours`] ? { start: values[`${axis}Start`], end: values[`${axis}End`], timeZone: values[`${axis}TimeZone`].trim() } : null;
+  return { activityPermissions: { collection: values.collectionEnabled, learning: values.processingEnabled, proactive: values.proactiveEnabled },
+    ...(values.modelProfileId ? { modelProfileId: values.modelProfileId } : {}),
+    proactiveModelProfileId: values.proactiveModelProfileId || null,
+    analysisTrigger: values.analysisTrigger,
+    ...(values.analysisTrigger === "observations" ? { analysisObservationCount: Number(values.analysisObservationCount) }
+      : { analysisIntervalMinutes: Number(values.analysisIntervalMinutes) }),
+    analysisWindow: window("processing"), collectionWindow: window("collection"),
+    proactiveIntervalMinutes: Number(values.proactiveIntervalMinutes), proactiveWindow: window("proactive"),
+    proactiveMessagesPerDay: Number(values.proactiveMessagesPerDay), maxConcurrentBatches: Number(values.maxConcurrentBatches),
+    resourceLimits: { modelCallsPerDay: Number(values.modelCallsPerDay), embeddingCallsPerDay: Number(values.embeddingCallsPerDay),
+      embeddingCharactersPerDay: Number(values.embeddingCharactersPerDay), maxConcurrentCalls: Number(values.maxConcurrentBatches), timeZone: values.budgetTimeZone.trim() },
+    maturation: { promotionScore: Number(values.promotionScore), retentionDays: Number(values.retentionDays),
+      maxCandidates: Number(values.maxCandidates), maxBytes: Number(values.candidateMiB) * 1048576 } };
+}
+
+function isInactiveLearningSetting(key, values) {
+  if (key === "analysisObservationCount") return values.analysisTrigger !== "observations";
+  if (key === "analysisIntervalMinutes") return values.analysisTrigger === "observations";
+  return false;
+}
+
+export function createLearningSettings({ root, actions, openSettings = () => {} }) {
+  let environment;
+  let committed = savedSettings();
+  let values = { ...committed };
+  let modelOptionsKey = "";
+  let feedback = "";
+  const form = root.querySelector("[data-learning-settings]");
+  const input = (key) => root.querySelector(`[data-learning-setting="${key}"]`);
+  const changed = () => Object.keys(values).some((key) => values[key] !== committed[key]);
+
+  function models(profiles = []) {
+    const key = JSON.stringify(profiles.map((profile) => [profile.id, profile.label, profile.providerId, profile.provider]));
+    if (key === modelOptionsKey) return;
+    modelOptionsKey = key;
+    for (const name of ["modelProfileId", "proactiveModelProfileId"]) {
+      const select = input(name); select.replaceChildren();
+      const append = (label, id) => { const option = root.ownerDocument.createElement("option"); option.textContent = label; option.value = id; select.append(option); };
+      append(name === "proactiveModelProfileId" ? "Same as learning" : "Choose a model", "");
+      for (const profile of profiles) if (typeof profile.id === "string") append(learningModelLabel(profile), profile.id);
+    }
+  }
+
+  function render(snapshot) {
+    const next = savedSettings(snapshot.status?.preferences);
+    if (snapshot.environmentId !== environment) {
+      environment = snapshot.environmentId; values = { ...next }; committed = next; feedback = ""; modelOptionsKey = "";
+    } else if (snapshot.status) {
+      for (const key of Object.keys(next)) if (values[key] === committed[key]) values[key] = next[key];
+      committed = next;
+    }
+    models(snapshot.models || []);
+    for (const [key, value] of Object.entries(values)) {
+      const element = input(key);
+      if (!element) continue;
+      if (checkboxFields.has(key)) element.checked = value;
+      else {
+        if (element.tagName === "SELECT" && value && ![...element.querySelectorAll("option")].some((option) => option.value === value)) {
+          const option = root.ownerDocument.createElement("option"); option.value = value; option.textContent = `${value} · unavailable`; element.append(option);
+        }
+        if (element.value !== value) element.value = value;
+      }
+      element.disabled = snapshot.saving || !snapshot.status || isInactiveLearningSetting(key, values);
+    }
+    for (const mode of ["interval", "observations"])
+      root.querySelector(`[data-learning-trigger-for="${mode}"]`).hidden = values.analysisTrigger !== mode;
+    for (const axis of ["collection", "processing", "proactive"]) {
+      const window = root.querySelector(`[data-learning-window-for="${axis}"]`);
+      window.hidden = !values[`${axis}Hours`];
+      for (const element of window.querySelectorAll("input")) element.disabled ||= window.hidden;
+      root.querySelector(`[data-learning-settings-axis="${axis}"]`).dataset.enabled = String(values[`${axis}Enabled`]);
+    }
+    for (const save of root.querySelectorAll("[data-learning-save]")) {
+      save.textContent = snapshot.saving ? "Saving…" : "Save settings";
+      save.disabled = snapshot.saving || !snapshot.status || !changed();
+    }
+    root.querySelector("[data-learning-settings-feedback]").textContent = feedback || (changed() ? "Unsaved changes" : "");
+  }
+
+  function handleChange(event) {
+    if (!form?.contains(event.target)) return false;
+    const key = event.target.dataset.learningSetting;
+    if (!Object.hasOwn(values, key)) return false;
+    values[key] = checkboxFields.has(key) ? event.target.checked : event.target.value;
+    feedback = "";
+    render(actions.snapshot());
+    return true;
+  }
+
+  function invalid(key, message) {
+    feedback = message; openSettings(); input(key)?.focus(); render(actions.snapshot()); return false;
+  }
+  function validate() {
+    const profiles = actions.snapshot().models || [];
+    if ((values.collectionEnabled || values.processingEnabled) && !hasActivityModel("learning", values, profiles))
+      return invalid("modelProfileId", "Choose an available learning model first.");
+    if (values.proactiveEnabled && !hasActivityModel("proactive", values, profiles))
+      return invalid("proactiveModelProfileId", "Choose an available model for proactive mode.");
+    for (const key of Object.keys(integerLimits)) {
+      if (isInactiveLearningSetting(key, values)) continue;
+      const number = Number(values[key]), [minimum, maximum] = integerLimits[key];
+      if (!Number.isSafeInteger(number) || number < minimum || number > maximum)
+        return invalid(key, `Enter a whole number between ${minimum} and ${maximum}.`);
+    }
+    const bytes = Number(values.candidateMiB) * 1048576;
+    if (!Number.isSafeInteger(bytes) || bytes < 1024 || bytes > 20971520)
+      return invalid("candidateMiB", "Set a candidate limit between 1 KiB and 20 MiB, in whole bytes.");
+    const zones = ["budgetTimeZone"];
+    for (const axis of ["collection", "processing", "proactive"]) {
+      if (!values[`${axis}Hours`]) continue;
+      for (const suffix of ["Start", "End"]) if (!/^(?:[01]\d|2[0-3]):[0-5]\d$/u.test(values[`${axis}${suffix}`]))
+        return invalid(`${axis}${suffix}`, "Choose a valid start and end time.");
+      zones.push(`${axis}TimeZone`);
+    }
+    for (const key of zones) {
+      try { new Intl.DateTimeFormat("en-US", { timeZone: values[key].trim() }).format(0); }
+      catch { return invalid(key, "Enter a valid time zone, such as Asia/Jerusalem."); }
+    }
+    if (form.checkValidity?.() === false) { openSettings(); form.reportValidity?.(); return false; }
+    return true;
+  }
+
+  async function saveSettings() {
+    const draft = values, submitted = { ...values };
+    const status = await actions.configure(preferencesFrom(submitted));
+    if (!status?.preferences || values !== draft) return;
+    const saved = savedSettings(status.preferences);
+    for (const key of Object.keys(submitted)) {
+      if (!isInactiveLearningSetting(key, submitted)) continue;
+      if (values[key] === submitted[key]) values[key] = saved[key];
+    }
+    render(actions.snapshot());
+  }
+
+  function handleSubmit(event) {
+    if (event.target !== form) return false;
+    event.preventDefault();
+    const snapshot = actions.snapshot();
+    if (snapshot.saving || !snapshot.status) return true;
+    render(snapshot);
+    if (validate()) void saveSettings();
+    return true;
+  }
+
+  return Object.freeze({ render, handleChange, handleSubmit, draft: () => preferencesFrom(values) });
+}

package/dist/src/web-ui/app/components/passive-learning/usage-view.js

@@ -0,0 +1,60 @@
+function quota(key, title, note) {
+  return `<div class="co-worker-usage-row"><div class="co-worker-usage-heading"><div><span>${title}</span><small>${note}</small></div><span class="co-worker-usage-value" data-learning-usage-value="${key}">—</span></div>
+    <div class="co-worker-usage-meter" data-learning-usage-meter="${key}" role="progressbar" aria-label="${title}" aria-valuemin="0" hidden><span></span></div></div>`;
+}
+
+export function learningUsageMarkup() {
+  return `<section class="co-worker-usage" data-learning-usage aria-label="ABot Spark resource use">
+    <div class="co-worker-usage-header"><div><h4>Today's resource use</h4><p data-learning-usage-reset>Waiting for usage…</p></div><button type="button" data-learning-open-settings>Edit limits</button></div>
+    ${quota("model", "Model calls", "Learning and proactive reviews. Failed attempts count too.")}
+    ${quota("messages", "Proactive messages", "New conversations started by ABot Spark.")}
+    ${quota("active", "Concurrent model calls", "Local models run one call at a time.")}
+    ${quota("embedding", "Embedding calls", "Separate from the model-call budget.")}
+    ${quota("characters", "Embedding input characters", "The shared daily input allowance.")}
+    ${quota("candidates", "Candidates", "Provisional knowledge, before it becomes memory.")}
+    <div class="co-worker-usage-row"><div class="co-worker-usage-heading"><div><span>Candidate storage limit</span><small>Maximum space available for candidates.</small></div><span class="co-worker-usage-value" data-learning-usage-storage>—</span></div></div>
+    <div class="co-worker-usage-row"><div class="co-worker-usage-heading"><div><span>Pending observations</span><small data-learning-usage-retention>Kept within their retention limit.</small></div><span class="co-worker-usage-value" data-learning-usage-pending>—</span></div></div>
+    <p class="co-worker-setting-note">Usage is reported by the runtime. No model calls are made to display these counters.</p>
+  </section>`;
+}
+
+const count = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+const format = (value) => new Intl.NumberFormat().format(value);
+function bytes(value) {
+  return value >= 1048576 ? `${format(value / 1048576)} MiB` : `${format(value / 1024)} KiB`;
+}
+
+export function renderResourceUsage(root, snapshot) {
+  const container = root.matches?.("[data-learning-usage]") ? root : root.querySelector("[data-learning-usage]");
+  if (!container) return;
+  const status = snapshot.status, preferences = status?.preferences || {};
+  const usage = status?.resourceUsage, limits = preferences.resourceLimits || {}, maturation = preferences.maturation || {};
+  const text = (selector, value) => { const element = container.querySelector(selector); if (element.textContent !== value) element.textContent = value; };
+  function showQuota(key, used, maximum) {
+    const current = count(used), cap = count(maximum);
+    text(`[data-learning-usage-value="${key}"]`, current === null ? `Count unavailable · limit ${format(cap ?? 0)}` : `${format(current)} / ${format(cap ?? 0)}`);
+    const meter = container.querySelector(`[data-learning-usage-meter="${key}"]`);
+    meter.hidden = current === null || !cap;
+    if (meter.hidden) { meter.removeAttribute("aria-valuenow"); return; }
+    meter.setAttribute("aria-valuemax", String(cap)); meter.setAttribute("aria-valuenow", String(Math.min(current, cap)));
+    meter.setAttribute("aria-valuetext", `${format(current)} of ${format(cap)}`);
+    meter.setAttribute("style", `--co-worker-usage: ${Math.min(1, current / cap)}`);
+  }
+  showQuota("model", usage?.modelCalls, limits.modelCallsPerDay ?? 24);
+  showQuota("messages", status?.proactive?.deliveredToday, preferences.proactiveMessagesPerDay ?? 2);
+  showQuota("active", usage?.activeCalls, preferences.maxConcurrentBatches ?? limits.maxConcurrentCalls ?? 1);
+  showQuota("embedding", usage?.embeddingCalls, limits.embeddingCallsPerDay ?? 96);
+  showQuota("characters", usage?.embeddingCharacters, limits.embeddingCharactersPerDay ?? 1048576);
+  const candidates = snapshot.loadingCandidates || snapshot.candidateError || !Array.isArray(snapshot.candidates) ? undefined : snapshot.candidates.length;
+  showQuota("candidates", candidates, maturation.maxCandidates ?? 500);
+  text("[data-learning-usage-storage]", `Up to ${bytes(maturation.maxBytes ?? 2097152)}`);
+  text("[data-learning-usage-pending]", count(status?.pendingObservations) === null ? "—" : format(status.pendingObservations));
+  text("[data-learning-usage-retention]", `Kept for up to ${format(status?.retentionHours ?? 24)} hours from collection.`);
+  let reset = "Current usage is unavailable.";
+  if (usage && Number.isFinite(usage.resetsAt)) {
+    const zone = usage.timeZone || limits.timeZone || "UTC";
+    try { reset = `Next reset ${new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", timeZone: zone }).format(usage.resetsAt)} · ${zone}`; }
+    catch { reset = `Next reset ${new Date(usage.resetsAt).toISOString()}`; }
+  }
+  text("[data-learning-usage-reset]", reset);
+}

package/dist/src/web-ui/app/components/passive-learning/workspace-view.js

@@ -0,0 +1,67 @@
+import { agentMarkup } from "./agent-view.js";
+import { learningSettingsMarkup } from "./settings-view.js";
+import { learningKnowledgeMarkup } from "./knowledge-view.js";
+import { learningUsageMarkup } from "./usage-view.js";
+import { learningApplicationsMarkup } from "./applications-view.js";
+import { computerUpdateNoticeMarkup } from "./computer-update-notice.js";
+import { macCollectionRestartNoticeMarkup } from "./macos-collection-restart-notice.js";
+
+const sections = ["insights", "activity", "applications", "chat", "settings", "usage"];
+const labels = { insights: "Knowledge", activity: "Activity", applications: "Applications", chat: "Chat", settings: "Settings", usage: "Resources" };
+
+export function learningWorkspaceMarkup(timeZone) {
+  const tabs = sections.map((key, index) => `<button type="button" role="tab" id="learning-${key}-tab" data-learning-tab="${key}" aria-controls="learning-${key}-panel" aria-selected="${index === 0}" tabindex="${index === 0 ? "0" : "-1"}">${labels[key]}</button>`).join("");
+  return `<section class="passive-learning-card co-worker-workspace" aria-label="ABot Spark">
+    ${computerUpdateNoticeMarkup()}
+    ${macCollectionRestartNoticeMarkup()}
+    ${agentMarkup()}
+    <div class="co-worker-quick-controls">
+      <p class="passive-learning-schedule-summary" data-learning-schedule-summary></p>
+      <div class="passive-learning-control-actions"><button type="button" data-learning-toggle disabled>Start collection</button><button type="button" data-learning-processing-toggle disabled>Pause processing</button><button type="button" data-learning-proactive-toggle disabled>Enable proactive mode</button></div>
+    </div>
+    <div class="passive-learning-attention" data-learning-attention role="status" hidden><p data-learning-attention-text></p><button type="button" data-learning-open-setup hidden>Connect computer</button></div>
+    <p class="passive-learning-feedback" data-learning-feedback role="status" aria-live="polite"></p>
+    <div class="passive-learning-tabs" role="tablist" aria-label="ABot Spark views">${tabs}</div>
+    <section class="passive-learning-panel" id="learning-insights-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-insights-tab" data-learning-panel="insights">${learningKnowledgeMarkup()}</section>
+    <section class="passive-learning-panel" id="learning-activity-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-activity-tab" data-learning-panel="activity" hidden>
+      <div class="passive-learning-section-heading"><div><h4>Activity</h4><p>What was collected and how each review turned out.</p></div><button type="button" data-learning-refresh>Refresh</button></div>
+      <div class="co-worker-activity-overview"><p data-learning-processing-status></p>
+        <dl class="passive-learning-facts"><div><dt>Last collected</dt><dd data-learning-observation>—</dd></div><div data-learning-pending-fact><dt>Pending observations</dt><dd><span data-learning-pending>—</span><span class="co-worker-processing-badge" data-learning-processing-badge role="status" hidden>Processing now</span></dd></div><div><dt>Analysis</dt><dd data-learning-analysis>—</dd></div></dl>
+        <div class="passive-learning-pending-controls"><p class="passive-learning-hint" data-learning-retention></p><button type="button" data-learning-clear-pending disabled>Delete pending…</button></div>
+        <details class="passive-learning-diagnostics" data-learning-diagnostics hidden><summary>Technical details</summary><dl class="passive-learning-diagnostic-list" data-learning-reason></dl></details>
+      </div>
+      <div class="passive-learning-review-layout"><div class="passive-learning-detail" data-learning-detail hidden></div><section class="passive-learning-review-list" aria-label="Recent reviews"><h5>Recent reviews</h5><div class="passive-learning-batches" data-learning-batches></div></section></div>
+    </section>
+    <section class="passive-learning-panel" id="learning-applications-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-applications-tab" data-learning-panel="applications" hidden>${learningApplicationsMarkup()}</section>
+    <section class="passive-learning-panel" id="learning-chat-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-chat-tab" data-learning-panel="chat" hidden></section>
+    <section class="passive-learning-panel" id="learning-settings-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-settings-tab" data-learning-panel="settings" hidden>
+      ${learningSettingsMarkup(timeZone)}
+      <details class="passive-learning-setup" data-learning-setup><summary>Computer connection</summary>
+        <dl class="passive-learning-facts co-worker-connection-facts"><div><dt>Computer</dt><dd data-learning-device>—</dd></div><div><dt>Collection access</dt><dd><span data-learning-coverage>—</span><small data-learning-coverage-detail></small></dd></div></dl>
+        <p data-learning-companion-version></p><p>Collection uses the shared Computer access connection. Computer tools have their own controls.</p><button type="button" data-learning-computer-access>Manage Computer access</button></details>
+    </section>
+    <section class="passive-learning-panel" id="learning-usage-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-usage-tab" data-learning-panel="usage" hidden>${learningUsageMarkup()}</section>
+  </section>`;
+}
+
+export function selectLearningView(root, view, focus = false) {
+  if (!sections.includes(view)) return;
+  for (const section of sections) {
+    const selected = section === view;
+    const tab = root.querySelector(`[data-learning-tab="${section}"]`);
+    tab.setAttribute("aria-selected", String(selected));
+    tab.setAttribute("tabindex", selected ? "0" : "-1");
+    root.querySelector(`[data-learning-panel="${section}"]`).hidden = !selected;
+    if (selected && focus) tab.focus();
+  }
+}
+
+export function navigateLearningTabs(root, event) {
+  const tab = event.target.closest("[data-learning-tab]");
+  if (!tab) return;
+  const index = sections.indexOf(tab.dataset.learningTab);
+  const destinations = { ArrowRight: (index + 1) % sections.length, ArrowLeft: (index + sections.length - 1) % sections.length, Home: 0, End: sections.length - 1 };
+  if (!(event.key in destinations)) return;
+  event.preventDefault();
+  selectLearningView(root, sections[destinations[event.key]], true);
+}

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

@@ -89,10 +89,10 @@ function renderPluginCard(plugin, busy, openPluginIds) {
 
 function globalPolicyMessage(selection) {
   if (selection?.enabled === false) {
-    return "Plugins are disabled globally. Turn on plugins.enabled in Advanced settings before enabling individual plugins.";
+    return "Plugins are disabled globally. Turn on plugins.enabled in the runtime configuration file 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 "The global deny rule blocks every plugin. Review plugins.deny in the runtime configuration file before enabling individual plugins.";
   }
   return "";
 }

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

@@ -1,5 +1,55 @@
-import { escapeHtml, escapeAttribute } from "../lib/text-format.js";
+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,
@@ -12,6 +62,10 @@ export function renderProjectSessionGroups({
   busyProjectId,
   onNewConversation,
   onRetry,
+  collapsedProjectIds = new Set(),
+  expandedProjectSessionIds = new Set(),
+  onToggleGroup = () => {},
+  onToggleProjectSessions = () => {},
   documentRoot = document,
 }) {
   const groups = new Map(
@@ -44,21 +98,23 @@ export function renderProjectSessionGroups({
       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++));
+    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";
-      section.appendChild(empty);
+      content.appendChild(empty);
     }
     root.appendChild(section);
   }

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

@@ -10,20 +10,22 @@ export function createRuntimeConfigActivation({
   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.setAttribute("aria-label", "Restart runtime with 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>';
+    '<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.prepend(panel);
+  root.append(panel);
   let busy = false;
 
   function markPending() {
-    status.textContent = "Changes saved. Apply them to update your agent.";
+    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() {
@@ -34,14 +36,14 @@ export function createRuntimeConfigActivation({
     let activated = false;
     busy = true;
     button.disabled = true;
-    status.textContent = "Applying saved changes…";
+    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 ||
-          "Saved changes are waiting to be applied.";
+          "The runtime could not restart yet. Try again when it is idle.";
         return;
       }
       activated = true;
@@ -49,33 +51,35 @@ export function createRuntimeConfigActivation({
       if (environment !== getEnvironmentId()) return;
       status.textContent =
         refreshed === false
-          ? "Changes applied. Refresh configuration to update this view."
-          : "Saved changes are now active.";
+          ? "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 =
-          "Changes applied. Refresh configuration to update this view.";
+          "Runtime restarted. Refresh configuration to update this view.";
       } else {
         status.textContent =
           error instanceof Error
             ? error.message
-            : "Changes could not be applied. Try again.";
+            : "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. Apply saved changes when your agent is idle.";
+          "Environment changed. Restart with saved settings when idle.";
+        button.textContent = "Restart runtime";
       }
     }
     if (!activated) return;
     if (environment !== getEnvironmentId()) return;
     if (onAppliedSettled() === false)
       status.textContent =
-        "Changes applied. Finish your current edits, then refresh configuration to update environments.";
+        "Runtime restarted. Finish your current edits, then refresh configuration to update environments.";
   }
 
   button.addEventListener("click", applySavedConfiguration);

package/dist/src/web-ui/app/components/runtime-setup/configuration-recovery.js

@@ -17,9 +17,9 @@ export function renderConfigurationRecovery(availability) {
   return `<section class="runtime-setup-panel" aria-labelledby="runtimeSetupRecoveryTitle">
     <header class="runtime-setup-heading"><h3 id="runtimeSetupRecoveryTitle" tabindex="-1" data-runtime-setup-title>Review your existing configuration</h3>
     <p>Your model profiles are saved, but need attention before ABot can start.</p></header>
-    <div class="runtime-setup-content"><p role="status">${escapeHtml(availability.message || "Open Configuration to repair the existing model and provider settings.")}</p>
-    <p>Open Configuration to review your model profiles and provider connections. Your existing settings will be preserved.</p></div>
+    <div class="runtime-setup-content"><p role="status">${escapeHtml(availability.message || "Open Models to repair the existing model and provider settings.")}</p>
+    <p>Open Models to review your model profiles and provider connections. Your existing settings will be preserved.</p></div>
     <footer class="runtime-setup-footer"><button type="button" class="runtime-setup-secondary" data-runtime-setup-action="check" ${checking ? "disabled" : ""}>${checking ? "Checking…" : "Check again"}</button>
-    <button type="button" class="runtime-setup-action" data-runtime-setup-action="configuration" ${checking ? "disabled" : ""}>Open Configuration</button></footer>
+    <button type="button" class="runtime-setup-action" data-runtime-setup-action="configuration" ${checking ? "disabled" : ""}>Open Models</button></footer>
   </section>`;
 }

package/dist/src/web-ui/app/components/runtime-setup/connection-form.js

@@ -63,7 +63,7 @@ export function renderConnectionFields(state) {
       min: "1",
       step: "1",
       readonly: !canEditSetupConnection(state),
-      help: "Use a value supported by your model. Larger windows need more memory with Ollama. You can change this later in Configuration.",
+      help: "Use a value supported by your model. Larger windows need more memory with Ollama. You can change this later in Models.",
     });
   if (providerType === "ollama") {
     if (state.existingProvider) return model;

package/dist/src/web-ui/app/components/runtime-setup/optional-steps.js

@@ -14,6 +14,9 @@ export function createSetupOptionalSteps({
   loadPlugins,
   setPlugin,
   loadHostConnection,
+  connectLocalHost,
+  createHostPairing,
+  requestHostPermissions,
   downloadHostSetup,
   revokeHostConnection,
   onChange,
@@ -27,7 +30,10 @@ export function createSetupOptionalSteps({
     discoverModels: discoverEmbeddingModels,
     saveEmbedding,
     onChange,
-    onComplete: () => goToStep(3),
+    onComplete: () => {
+      plugins.reset();
+      goToStep(3);
+    },
   });
   const plugins = createSetupPluginStep({
     container,
@@ -38,7 +44,11 @@ export function createSetupOptionalSteps({
   });
   const computer = loadHostConnection
     ? createSystemHostConnectionManager({
+        getEnvironmentId,
         loadConnection: loadHostConnection,
+        connectLocal: connectLocalHost,
+        createPairing: createHostPairing,
+        requestPermissions: requestHostPermissions,
         downloadSetup: downloadHostSetup,
         revokeConnection: revokeHostConnection,
         onChange,