@abot-ai/runtime 1.4.0 → 1.5.0

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

@@ -0,0 +1,82 @@
+import { escapeAttribute } from "../../lib/text-format.js";
+
+function field(key, label, { type = "number", value = "", min = 1, max, legacy = "", step = "1", options } = {}) {
+  const attrs = `data-learning-setting="${key}" ${legacy ? `data-learning-${legacy}` : ""}`;
+  const control = type === "select"
+    ? `<select ${attrs} aria-label="${label}">${options || '<option value="">Choose a model</option>'}</select>`
+    : `<input ${attrs} type="${type}" value="${escapeAttribute(value)}" ${type === "number" ? `min="${min}" step="${step}" ${max ? `max="${max}"` : ""}` : ""} ${type === "text" ? 'autocomplete="off" maxlength="100"' : ""} required />`;
+  return `<label class="co-worker-setting-field">${label}${control}</label>`;
+}
+
+function toggle(key, label, legacy = "", small = false) {
+  return `<label class="${small ? "co-worker-hours-toggle" : "co-worker-setting-switch"}"><input type="checkbox" data-learning-setting="${key}" ${legacy ? `data-learning-${legacy}` : ""} /><span>${label}</span></label>`;
+}
+
+function windowFields(axis, timeZone) {
+  const legacy = axis === "processing" ? "" : `${axis}-`;
+  return `${toggle(`${axis}Hours`, "Set activity hours", `${legacy}hours`, true)}
+    <div class="co-worker-window-fields" data-learning-window-for="${axis}" data-learning-${legacy}window hidden>
+      <div class="co-worker-setting-pair">${field(`${axis}Start`, "From", { type: "time", value: "09:00", legacy: `${legacy}start` })}
+      ${field(`${axis}End`, "Until", { type: "time", value: "17:00", legacy: `${legacy}end` })}</div>
+      ${field(`${axis}TimeZone`, "Time zone", { type: "text", value: timeZone, legacy: `${legacy}time-zone` })}
+    </div>`;
+}
+
+export function learningSettingsMarkup(timeZone = "UTC") {
+  return `<form class="passive-learning-settings co-worker-settings" data-learning-settings>
+    <div class="co-worker-settings-header">
+      <div class="co-worker-settings-intro"><h4>Activity permissions</h4><p>Choose what Spark may do. Saving permission does not start an activity; use its Start button when you are ready.</p></div>
+      <button type="submit" data-learning-save disabled>Save settings</button>
+    </div>
+    <div class="co-worker-settings-grid">
+      <section class="co-worker-settings-card" data-learning-settings-axis="collection">
+        <h4>Collection</h4><p>Notice changes in your active applications.</p>
+        ${toggle("collectionEnabled", "Allow collection", "collection-enabled")}
+        ${windowFields("collection", timeZone)}
+        <p class="co-worker-setting-note">Revoking permission stops collection. Pending observations keep their existing retention limit.</p>
+      </section>
+      <section class="co-worker-settings-card" data-learning-settings-axis="processing">
+        <h4>Learning</h4><p>Review activity and refine what ABot Spark knows.</p>
+        ${toggle("processingEnabled", "Allow learning", "processing-enabled")}
+        ${field("modelProfileId", "Learning model", { type: "select", legacy: "model" })}
+        ${field("analysisTrigger", "Start a review", { type: "select", options: '<option value="interval">By time</option><option value="observations">By observation count</option>' })}
+        <div data-learning-trigger-for="interval">${field("analysisIntervalMinutes", "Review interval (minutes)", { value: 15, max: 1440, legacy: "interval" })}</div>
+        <div data-learning-trigger-for="observations" hidden>${field("analysisObservationCount", "Eligible observations waiting", { value: 100, max: 256 })}
+          <p class="co-worker-setting-note">Reviews waiting observations in small batches. Starts earlier if eligible activity nears the storage limit. New observations wait for the next review; blocked apps do not count. Hours, budgets and retention still apply.</p></div>
+        ${windowFields("processing", timeZone)}
+        <p class="co-worker-setting-note">Runs only when there is eligible work. Pausing keeps pending observations within their retention limit.</p>
+      </section>
+      <section class="co-worker-settings-card" data-learning-settings-axis="proactive">
+        <h4>Proactive mode</h4><p>Start a conversation when there is something useful to offer.</p>
+        ${toggle("proactiveEnabled", "Allow proactive mode", "proactive-enabled")}
+        ${field("proactiveModelProfileId", "Proactive model", { type: "select", legacy: "proactive-model" })}
+        ${field("proactiveIntervalMinutes", "Check interval (minutes)", { value: 60, max: 1440, legacy: "proactive-interval" })}
+        ${windowFields("proactive", timeZone)}
+        <p class="co-worker-setting-note">Can use existing knowledge while collection is off. Messages only; actions need your approval.</p>
+      </section>
+    </div>
+    <section class="co-worker-settings-limits">
+      <div class="co-worker-settings-intro"><h4>Shared limits</h4><p>Learning and proactive reviews share this daily budget. Failed attempts count too.</p></div>
+      <div class="co-worker-limits-grid">
+        ${field("modelCallsPerDay", "Model calls per day", { value: 24 })}
+        ${field("proactiveMessagesPerDay", "Proactive messages per day", { value: 2, max: 100 })}
+        ${field("maxConcurrentBatches", "Concurrent cloud calls", { value: 1, max: 8, legacy: "concurrency" })}
+        ${field("embeddingCallsPerDay", "Embedding calls per day", { value: 96 })}
+        ${field("embeddingCharactersPerDay", "Embedding input characters per day", { value: 1048576 })}
+        ${field("budgetTimeZone", "Daily budget time zone", { type: "text", value: "UTC" })}
+      </div>
+      <p class="co-worker-setting-note">Local models run one call at a time. A time-zone change does not reset the current budget.</p>
+    </section>
+    <details class="co-worker-settings-limits co-worker-memory-policy">
+      <summary>When a candidate becomes memory</summary>
+      <p class="co-worker-setting-note">Applies to automatic learning from conversations and computer activity. Promotion needs your chosen score and two independent reinforcements. Scores express model judgment, not probability.</p>
+      <div class="co-worker-limits-grid">
+        ${field("promotionScore", "Promotion score (out of 100)", { value: 90, min: 0, max: 100 })}
+        ${field("retentionDays", "Days without reinforcement", { value: 30, max: 365 })}
+        ${field("maxCandidates", "Maximum candidates", { value: 500, max: 5000 })}
+        ${field("candidateMiB", "Candidate storage limit (MiB)", { value: 2, min: 0.0009765625, max: 20, step: "any" })}
+      </div>
+    </details>
+    <div class="co-worker-settings-footer"><span data-learning-settings-feedback role="status" aria-live="polite"></span><button type="submit" data-learning-save disabled>Save settings</button></div>
+  </form>`;
+}

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", "settings", "usage"];
+const labels = { insights: "Knowledge", activity: "Activity", applications: "Applications", 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="co-worker-proposals" data-learning-proposals></div>
+    <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-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);
+}