@abot-ai/runtime 1.7.0 → 1.8.1

package/dist/src/web-ui/app/components/dashboard/compact-layout.js

@@ -0,0 +1,137 @@
+import { createHomeWidgetCard } from "./widget-card.js";
+import { createHomeWidgetDialog } from "./widget-dialog.js";
+
+export const HOME_WIDGET_MEDIA_QUERY = "(max-width: 1440px)";
+const widgetOrder = ["learning", "conversations", "approvals", "activity", "automations", "computer"];
+
+/** Home-only presentation; component owners keep their data, DOM and actions. */
+export function createCompactHomeLayout({
+  root, content, homeRegion = root.parentElement,
+  viewport = root.ownerDocument.defaultView,
+}) {
+  const media = viewport?.matchMedia?.(HOME_WIDGET_MEDIA_QUERY);
+  const entries = new Map();
+  let enabled = false;
+  let workspace = "home";
+  let compact = false;
+  let grid;
+  let dialog;
+
+  function canShowCompactHome() {
+    if (!enabled) return false;
+    return media?.matches === true;
+  }
+
+  function canOpenWidget(entry) {
+    if (!compact || workspace !== "home") return false;
+    return Boolean(entry?.isAvailable());
+  }
+
+  function ensureSurface() {
+    if (grid || !media) return;
+    grid = root.ownerDocument.createElement("div");
+    grid.className = "home-widget-grid";
+    grid.setAttribute("aria-label", "Home overview");
+    grid.hidden = true;
+    content.appendChild(grid);
+    dialog = createHomeWidgetDialog({
+      root,
+      onClosed(entry, restoreFocus) {
+        if (restoreFocus && canOpenWidget(entry)) entry.button.focus({ preventScroll: true });
+      },
+    });
+  }
+
+  function open(id) {
+    const entry = entries.get(id);
+    if (!canOpenWidget(entry)) return false;
+    dialog.open(entry);
+    entry.onOpen?.();
+    dialog.refresh();
+    return true;
+  }
+
+  function refresh() {
+    for (const entry of entries.values()) {
+      const available = entry.isAvailable();
+      entry.button.hidden = !available;
+      if (!available && dialog.isExpanded(entry.element)) dialog.close({ restoreFocus: false });
+      const summary = entry.getSummary();
+      entry.render(summary);
+    }
+    dialog?.refresh();
+  }
+
+  function reconcileViewport() {
+    const next = canShowCompactHome();
+    if (next === compact) return;
+    const focused = root.ownerDocument.activeElement;
+    const focusedEntry = [...entries.values()].find((entry) => entry.element.contains(focused) || entry.button === focused);
+    const expandedEntry = [...entries.values()].find((entry) => dialog?.isExpanded(entry.element));
+    dialog?.close({ restoreFocus: false });
+    compact = next;
+    homeRegion?.classList.toggle("home-widgets-compact", compact);
+    if (grid) grid.hidden = !compact;
+    refresh();
+    if (!enabled || workspace !== "home") return;
+    if (compact && focusedEntry?.isAvailable()) {
+      focusedEntry.button.focus({ preventScroll: true });
+      return;
+    }
+    if (compact) return;
+    if (focusedEntry?.element.contains(focused) && !focusedEntry.element.hidden) {
+      focused.focus({ preventScroll: true });
+      return;
+    }
+    const returnEntry = focusedEntry || expandedEntry;
+    if (returnEntry) focusDesktopContent(returnEntry);
+  }
+
+  function focusDesktopContent(entry) {
+    const controls = [...entry.element.querySelectorAll("button, summary, input, textarea")];
+    const control = controls.find((node) => !node.disabled && !node.closest("[hidden]"));
+    const target = control || root.querySelector("textarea");
+    target?.focus({ preventScroll: true });
+  }
+
+  function register({ id, label, icon = "neutral", element, getSummary,
+    isAvailable = () => true, emptyMessage, onOpen, getReturnParent }) {
+    if (!media || !element) return () => {};
+    ensureSurface();
+    const { button, render } = createHomeWidgetCard({ documentRoot: root.ownerDocument, id, label, icon });
+    const entry = { id, label, element, getSummary, isAvailable, emptyMessage, onOpen, getReturnParent, button, render };
+    entries.set(id, entry);
+    element.classList.add("home-widget-source");
+    const position = widgetOrder.indexOf(id);
+    const following = [...entries.values()].find((candidate) => widgetOrder.indexOf(candidate.id) > position);
+    grid.insertBefore(button, following?.button || null);
+    button.addEventListener("click", () => open(id));
+    refresh();
+    return () => {
+      if (dialog.isExpanded(element)) dialog.close({ restoreFocus: false });
+      element.classList.remove("home-widget-source");
+      button.remove();
+      entries.delete(id);
+    };
+  }
+
+  media?.addEventListener("change", reconcileViewport);
+  return {
+    register, refresh, open,
+    isExpanded: (element) => dialog?.isExpanded(element) === true,
+    close: (options) => dialog?.close(options),
+    setEnabled(value) { enabled = value; reconcileViewport(); },
+    setWorkspace(value) {
+      workspace = value;
+      if (value !== "home") dialog?.close({ restoreFocus: false });
+    },
+    dispose() {
+      dialog?.dispose();
+      for (const entry of entries.values()) entry.element.classList.remove("home-widget-source");
+      entries.clear();
+      grid?.remove();
+      homeRegion?.classList.remove("home-widgets-compact");
+      media?.removeEventListener("change", reconcileViewport);
+    },
+  };
+}

package/dist/src/web-ui/app/components/dashboard/icons.js

@@ -1,4 +1,9 @@
 const paths = {
+  unread: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 6 9 7 9-7"/>',
+  collecting: '<path d="M2 12h5l3-8 4 16 3-8h5"/>',
+  paused: '<path d="M9 5v14M15 5v14"/>',
+  unknown: '<circle cx="12" cy="12" r="9"/><path d="M9 9a3 3 0 0 1 6 0c0 2-3 2-3 4m0 4h.01"/>',
+  computer: '<rect x="5" y="3" width="14" height="13" rx="2"/><path d="M5 16 2 21h20l-3-5"/>',
   upload: '<path d="M12 16V4m-4 4 4-4 4 4"/><path d="M4 16v4h16v-4"/>',
   job: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18m-9 3v4m-2-2h4"/>',
   conversations:

package/dist/src/web-ui/app/components/dashboard/widget-card.js

@@ -0,0 +1,85 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { dashboardIcon } from "./icons.js";
+
+const compactLabels = { conversations: "Conversations", approvals: "Approvals" };
+
+function symbolMarkup(indicator) {
+  if (!indicator) return "";
+  const label = escapeHtml(indicator.label || "");
+  const value = indicator.value === undefined ? "" : `<span aria-hidden="true">${escapeHtml(String(indicator.value))}</span>`;
+  const glyph = indicator.icon ? dashboardIcon(indicator.icon) : "";
+  return `<span class="home-widget-symbol" data-tone="${escapeHtml(indicator.tone || "neutral")}" role="img" aria-label="${label}" title="${label}">${glyph}${value}</span>`;
+}
+
+function copyMarkup(title, detail = "") {
+  return `<span class="home-widget-copy"><span class="home-widget-item-title" dir="auto" title="${escapeHtml(title)}">${escapeHtml(title)}</span><span class="home-widget-meta" dir="auto" title="${escapeHtml(detail)}">${escapeHtml(detail)}</span></span>`;
+}
+
+function rowsMarkup(preview) {
+  return preview.items.map((item) => `<span class="home-widget-row">${copyMarkup(item.title, item.detail)}${symbolMarkup(item.indicator)}</span>`).join("");
+}
+
+function metricsMarkup(preview) {
+  return `<span class="home-widget-metrics">${preview.items.map((item) => `<span class="home-widget-metric">${symbolMarkup(item.indicator)}<span>${escapeHtml(item.label)}</span></span>`).join("")}</span>`;
+}
+
+function computerMarkup(preview) {
+  const checks = preview.items.map((item) => `<span class="home-widget-check"><span>${escapeHtml(item.label)}</span>${symbolMarkup(item.indicator)}</span>`).join("");
+  return `<span class="home-widget-computer"><span class="home-widget-device"><span class="home-widget-item-title" dir="auto">${escapeHtml(preview.title)}</span><span class="home-widget-meta">${escapeHtml(preview.detail || "")}</span></span><span class="home-widget-checks">${checks}</span></span>`;
+}
+
+function previewMarkup(summary) {
+  const preview = summary.preview;
+  if (preview?.kind === "rows") return rowsMarkup(preview);
+  if (preview?.kind === "metrics") return metricsMarkup(preview);
+  if (preview?.kind === "computer") return computerMarkup(preview);
+  if (preview?.kind === "automation")
+    return `<span class="home-widget-automation">${symbolMarkup(preview.indicator)}${copyMarkup(preview.title, preview.detail)}</span>`;
+  return `<span class="home-widget-fallback"><span class="home-widget-title" dir="auto">${escapeHtml(summary.title || "")}</span><span class="home-widget-detail" dir="auto">${escapeHtml(summary.detail || "")}</span><span class="home-widget-status" dir="auto">${escapeHtml(summary.status || "")}</span></span>`;
+}
+
+function previewDescriptions(summary) {
+  const preview = summary.preview;
+  if (!preview) return [];
+  const descriptions = [preview.title, preview.detail];
+  descriptions.push(...(preview.items || []).map((item) =>
+    [item.title, item.label, item.detail, item.indicator?.label].filter(Boolean).join(": "),
+  ));
+  if (preview.indicator) descriptions.push(preview.indicator.label);
+  return descriptions.filter(Boolean);
+}
+
+/** A stable button; only the read-only preview changes, never the live component. */
+export function createHomeWidgetCard({ documentRoot, id, label, icon }) {
+  const button = documentRoot.createElement("button");
+  button.type = "button";
+  button.className = "home-widget";
+  button.dataset.homeWidget = id;
+  button.setAttribute("aria-haspopup", "dialog");
+  const glyph = id === "learning" ? '<img src="/spark-mascot.svg" alt="" />' : dashboardIcon(icon);
+  button.innerHTML = `<span class="home-widget-heading"><span class="home-widget-heading-icon">${glyph}</span><span data-widget-label></span><span class="home-widget-badge" hidden></span><span class="home-widget-arrow" aria-hidden="true">›</span></span><span class="home-widget-preview"></span>`;
+  button.querySelector("[data-widget-label]").textContent = compactLabels[id] || label;
+  const body = button.querySelector(".home-widget-preview");
+  const badge = button.querySelector(".home-widget-badge");
+  let previousMarkup;
+  let previousBadge;
+  function render(summary) {
+    const markup = previewMarkup(summary);
+    if (markup !== previousMarkup) {
+      body.innerHTML = markup;
+      previousMarkup = markup;
+    }
+    const badgeMarkup = symbolMarkup(summary.preview?.badge);
+    if (badgeMarkup !== previousBadge) {
+      badge.innerHTML = badgeMarkup;
+      previousBadge = badgeMarkup;
+    }
+    badge.hidden = !badgeMarkup;
+    button.dataset.tone = summary.tone || "neutral";
+    button.setAttribute("aria-label", `${label} — open details`);
+    const description = [...new Set([summary.title, summary.detail, summary.status, ...previewDescriptions(summary)].filter(Boolean))].join(". ");
+    button.setAttribute("aria-description", description);
+    button.setAttribute("title", description);
+  }
+  return { button, render };
+}

package/dist/src/web-ui/app/components/dashboard/widget-dialog.js

@@ -0,0 +1,83 @@
+/** The original live panel is borrowed temporarily, never rendered a second time. */
+export function createHomeWidgetDialog({ root, onClosed }) {
+  const documentRoot = root.ownerDocument;
+  const dialog = documentRoot.createElement("dialog");
+  dialog.className = "home-widget-dialog";
+  dialog.setAttribute("aria-labelledby", "home-widget-detail-title");
+  dialog.innerHTML = `<header class="home-widget-dialog-header">
+    <h2 id="home-widget-detail-title"></h2>
+    <button type="button" class="home-text-button" data-home-widget-close aria-label="Close details">Close</button>
+  </header><div class="home-widget-dialog-body"></div>`;
+  root.appendChild(dialog);
+  const title = dialog.querySelector("h2");
+  const body = dialog.querySelector(".home-widget-dialog-body");
+  const closeButton = dialog.querySelector("[data-home-widget-close]");
+  const empty = documentRoot.createElement("p");
+  empty.className = "home-panel-state";
+  empty.setAttribute("role", "status");
+  let borrowed = null;
+
+  function restorePanel() {
+    if (!borrowed) return null;
+    const previous = borrowed;
+    borrowed = null;
+    previous.entry.element.classList.remove("home-widget-expanded");
+    const parent = previous.entry.getReturnParent?.() || previous.parent;
+    const next = previous.nextSibling;
+    const anchor = next?.parentNode === parent ? next : null;
+    parent.insertBefore(previous.entry.element, anchor);
+    empty.remove();
+    return previous.entry;
+  }
+
+  function close({ restoreFocus = true } = {}) {
+    const entry = restorePanel();
+    if (dialog.open) dialog.close();
+    if (entry) onClosed(entry, restoreFocus);
+  }
+
+  function refresh() {
+    if (!borrowed) return;
+    const summary = borrowed.entry.getSummary();
+    empty.textContent = borrowed.entry.emptyMessage || [summary.title, summary.detail].filter(Boolean).join(" · ");
+    empty.hidden = !borrowed.entry.element.hidden;
+  }
+
+  function open(entry) {
+    if (borrowed?.entry === entry) return;
+    close({ restoreFocus: false });
+    const element = entry.element;
+    borrowed = { entry, parent: element.parentNode, nextSibling: element.nextSibling };
+    title.textContent = entry.label;
+    element.classList.add("home-widget-expanded");
+    body.appendChild(element);
+    body.appendChild(empty);
+    refresh();
+    body.scrollTop = 0;
+    dialog.showModal();
+    closeButton.focus({ preventScroll: true });
+  }
+
+  closeButton.addEventListener("click", () => close());
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    close();
+  });
+  dialog.addEventListener("close", () => {
+    if (dialog.open) return;
+    const entry = restorePanel();
+    if (entry) onClosed(entry, true);
+  });
+  dialog.addEventListener("click", (event) => {
+    if (event.target !== dialog) return;
+    const bounds = dialog.getBoundingClientRect();
+    const inside = event.clientX >= bounds.left && event.clientX <= bounds.right &&
+      event.clientY >= bounds.top && event.clientY <= bounds.bottom;
+    if (!inside) close();
+  });
+  return {
+    open, close, refresh,
+    isExpanded: (element) => borrowed?.entry.element === element,
+    dispose() { close({ restoreFocus: false }); dialog.remove(); },
+  };
+}

package/dist/src/web-ui/app/components/dashboard/widget-summaries.js

@@ -0,0 +1,155 @@
+import {
+  dashboardTimePresentation,
+  projectDashboardActivity,
+  projectDashboardConversations,
+} from "../../lib/dashboard-presentation.js";
+import { coWorkerAgentState } from "../passive-learning/agent-state.js";
+import { learningWidgetPreview } from "../passive-learning/home-widget-preview.js";
+import { formatToolName } from "../../lib/event-presentation.js";
+import { projectToolActivityEvent } from "../../lib/tool-activity-event.js";
+import { textOf } from "../../lib/text-format.js";
+
+function learningSnapshotMatchesEnvironment(snapshot, learning) {
+  if (!snapshot.environmentId || !learning?.environmentId) return true;
+  return snapshot.environmentId === learning.environmentId;
+}
+
+function learningSummary(snapshot, learning) {
+  const current = learningSnapshotMatchesEnvironment(snapshot, learning) ? learning : null;
+  if (current?.statusError)
+    return { title: "Connection interrupted", detail: "Open Spark to check its current activity.", status: "Status unavailable", tone: "attention" };
+  const presentation = coWorkerAgentState(current || {});
+  const tones = { attention: "attention", collecting: "active", reviewing: "active" };
+  return {
+    title: presentation.title,
+    detail: presentation.description,
+    status: presentation.label,
+    tone: tones[presentation.mode] || "neutral",
+    preview: learningWidgetPreview(current?.status),
+  };
+}
+
+function conversationsSummary(snapshot) {
+  const overview = snapshot.sessionOverview;
+  const projection = projectDashboardConversations(overview?.sessions ?? snapshot.sessions ?? [], 2);
+  const latest = projection.recentConversations[0];
+  const title = latest?.title || "A fresh start.";
+  if (snapshot.sessionsError)
+    return { title: latest?.title || "Conversations unavailable", detail: "Recent conversations could not be refreshed.", status: "Status unavailable", tone: "attention" };
+  if (snapshot.loadingSessions)
+    return { title: latest?.title || "Loading conversations…", detail: "", status: "Loading", tone: "neutral" };
+  const unavailable = overview?.hasUnavailableReadState ?? projection.hasUnavailableReadState;
+  if (unavailable)
+    return { title, detail: "Unread status unavailable", status: "Open chats", tone: "attention" };
+  const unread = overview?.unreadCount ?? projection.unreadCount;
+  const preview = conversationsPreview(projection, unread);
+  if (unread > 0)
+    return { title, detail: latest ? "Latest conversation" : "Open chats to read replies.", status: `${unread} unread ${unread === 1 ? "message" : "messages"}`, tone: "active", preview };
+  return { title, detail: latest ? "Latest conversation" : "Your conversations will appear here.", status: latest ? "No unread messages" : "No conversations yet", tone: "neutral", preview };
+}
+
+function activitySummary(snapshot) {
+  if (snapshot.supportsSchedules === false)
+    return { title: "Jobs unavailable", detail: "Choose a Runtime environment to use scheduled jobs.", status: "Unavailable", tone: "neutral" };
+  const latest = projectDashboardActivity(snapshot.runs ?? [], 1)[0];
+  if (snapshot.activityError)
+    return { title: latest?.title || "Activity unavailable", detail: "Recent activity could not be refreshed.", status: "Status unavailable", tone: "attention" };
+  if (snapshot.loadingActivity)
+    return { title: latest?.title || "Loading activity…", detail: "", status: "Loading", tone: "neutral" };
+  if (!latest)
+    return { title: "No activity yet", detail: "Try a ready-to-use job.", status: "View jobs", tone: "neutral" };
+  return { title: latest.title, detail: "Latest scheduled run", status: latest.statusLabel, tone: latest.tone, preview: activityPreview(snapshot.runs) };
+}
+
+function automationsSummary(snapshot) {
+  const active = snapshot.activeAutomations ?? [];
+  if (snapshot.automationStatusUnavailable)
+    return { title: "Automation status unavailable", detail: active[0]?.title || "Open ABot Studio to check runs.", status: active.length ? `${active.length} last seen in progress` : "Status unavailable", tone: "attention" };
+  if (!active.length)
+    return { title: "No automations in progress", detail: "ABot Studio", status: "No active runs", tone: "neutral" };
+  return {
+    title: `${active.length} ${active.length === 1 ? "automation" : "automations"} in progress`,
+    detail: active[0].title || "ABot Automation",
+    status: "View live timeline",
+    tone: "active",
+    preview: {
+      kind: "automation", title: active[0].title || "ABot Automation", detail: "ABot Studio",
+      indicator: { icon: "active", label: `${active.length} ${active.length === 1 ? "automation" : "automations"} in progress`, value: active.length, tone: "active" },
+    },
+  };
+}
+
+function approvalsSummary(snapshot) {
+  if (snapshot.supportsToolApprovals === false)
+    return { title: "Home approvals unavailable", detail: "Open the conversation to review pending actions.", status: "Unavailable", tone: "neutral" };
+  const count = snapshot.approvals?.length || 0;
+  const pendingTitle = `${count} ${count === 1 ? "action" : "actions"} waiting`;
+  if (snapshot.approvalDecisionError)
+    return { title: count ? pendingTitle : "Approval decision failed", detail: "Open approvals to review the failed decision.", status: "Needs attention", tone: "attention" };
+  if (snapshot.approvalsError)
+    return { title: count ? pendingTitle : "Approvals unavailable", detail: "Pending actions could not be refreshed.", status: "Status unavailable", tone: "attention" };
+  if (snapshot.loadingApprovals)
+    return { title: count ? pendingTitle : "Checking approvals…", detail: "", status: "Loading", tone: "neutral" };
+  if (count)
+    return { title: pendingTitle, detail: "Review the action before allowing it.", status: "Needs review", tone: "attention", preview: approvalsPreview(snapshot) };
+  return { title: "No pending approvals", detail: "Actions waiting for your decision appear here.", status: "Nothing waiting", tone: "neutral" };
+}
+
+function conversationIndicator(session) {
+  if (session.readStateUnavailable)
+    return { icon: "unknown", label: "Unread status unavailable", tone: "attention" };
+  if (!session.unreadCount) return null;
+  return { icon: "unread", label: `${session.unreadCount} unread ${session.unreadCount === 1 ? "message" : "messages"}`, value: session.unreadCount, tone: "active" };
+}
+
+function conversationsPreview(projection, unread) {
+  if (!projection.recentConversations.length) return undefined;
+  return {
+    kind: "rows",
+    badge: unread > 0 ? { icon: "unread", label: `${unread} unread ${unread === 1 ? "message" : "messages"} in all conversations`, value: unread, tone: "active" } : undefined,
+    items: projection.recentConversations.map((session) => ({
+      title: session.title,
+      detail: dashboardTimePresentation(session.updatedAt)?.label || "",
+      indicator: conversationIndicator(session),
+    })),
+  };
+}
+
+function activityPreview(runs) {
+  return {
+    kind: "rows",
+    items: projectDashboardActivity(runs, 2).map((run) => ({
+      title: run.title,
+      detail: dashboardTimePresentation(run.timestamp)?.label || "",
+      indicator: { icon: run.tone, label: run.statusLabel, tone: run.tone },
+    })),
+  };
+}
+
+function approvalsPreview(snapshot) {
+  return {
+    kind: "rows",
+    badge: { value: snapshot.approvals.length, label: `${snapshot.approvals.length} pending ${snapshot.approvals.length === 1 ? "approval" : "approvals"}`, tone: "attention" },
+    items: snapshot.approvals.slice(0, 2).map((approval) => {
+      const event = approval.event || {};
+      const activity = projectToolActivityEvent(event);
+      const conversation = (snapshot.sessions || []).find((session) => session.id === approval.sessionId);
+      return {
+        title: formatToolName(event.tool) || "Tool",
+        detail: activity?.target || textOf(conversation?.displayName || conversation?.title),
+        indicator: { icon: "active", label: "Awaiting approval", tone: "attention" },
+      };
+    }),
+  };
+}
+
+/** Read-only presentation of the existing Home owners; no new reads or state. */
+export function dashboardWidgetSummaries(snapshot = {}, learningSnapshot) {
+  return {
+    learning: learningSummary(snapshot, learningSnapshot),
+    conversations: conversationsSummary(snapshot),
+    activity: activitySummary(snapshot),
+    automations: automationsSummary(snapshot),
+    approvals: approvalsSummary(snapshot),
+  };
+}

package/dist/src/web-ui/app/components/dashboard/workspace.js

@@ -3,6 +3,8 @@ import { getDashboardJobTemplates } from "../../lib/dashboard-job-templates.js";
 import { renderDashboardActivity } from "./activity.js";
 import { renderDashboardConversations } from "./recent-conversations.js";
 import { renderDashboardAutomations } from "./automations.js";
+import { createCompactHomeLayout } from "./compact-layout.js";
+import { dashboardWidgetSummaries } from "./widget-summaries.js";
 import {
   hasPendingDashboardApprovals,
   renderDashboardApprovals,
@@ -37,7 +39,26 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   const setupHost = root.querySelector("[data-dashboard-setup]");
   const learningPanel = root.querySelector("[data-dashboard-learning]");
   const automationPanel = root.querySelector("[data-dashboard-automations]");
-  passiveLearning?.mountHome(root.querySelector("[data-dashboard-learning-content]"));
+  let currentSnapshot = {};
+  function approvalHome() {
+    if (hasPendingDashboardApprovals(currentSnapshot)) return approvalDock;
+    return content;
+  }
+  const returnParents = { approvals: approvalHome };
+  const compactWidgets = createCompactHomeLayout({ root, content });
+  for (const [id, label, icon, element] of [
+    ["learning", "ABot Spark", "learning", learningPanel],
+    ["conversations", "Recent conversations", "conversations", conversations],
+    ["activity", "Recent activity", "active", activity],
+    ["automations", "Automations", "job", automationPanel],
+    ["approvals", "Pending approvals", "success", approvals],
+  ]) compactWidgets.register({
+    id, label, icon, element,
+    getReturnParent: returnParents[id],
+    isAvailable: () => id !== "learning" || Boolean(passiveLearning),
+    getSummary: () => dashboardWidgetSummaries(currentSnapshot, passiveLearning?.snapshot?.())[id],
+  });
+  passiveLearning?.mountHome(root.querySelector("[data-dashboard-learning-content]"), compactWidgets.refresh);
   const composerNote = root.querySelector(".home-composer-note");
   const handlers = {
     template: (button) => actions.createJob(button.dataset.templateId),
@@ -57,12 +78,14 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   });
 
   function render(snapshot) {
+    currentSnapshot = snapshot;
     const setupRequired = snapshot.composerAvailable === false;
+    compactWidgets.setEnabled(!setupRequired);
     const pendingApprovals = hasPendingDashboardApprovals(snapshot);
     approvalDock.hidden = setupRequired || !pendingApprovals;
     // Keep pending actions beside the composer; refresh errors stay in content.
-    const approvalParent = pendingApprovals ? approvalDock : content;
-    if (approvals.parentElement !== approvalParent)
+    const approvalParent = approvalHome();
+    if (!compactWidgets.isExpanded(approvals) && approvals.parentElement !== approvalParent)
       approvalParent.appendChild(approvals);
     root.classList.toggle("home-setup-active", setupRequired);
     learningPanel.hidden = setupRequired || !passiveLearning;
@@ -118,7 +141,8 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
       "aria-busy",
       String(Boolean(snapshot.loadingSessions)),
     );
+    compactWidgets.refresh();
   }
 
-  return { render, composerHost, setupHost };
+  return { render, composerHost, setupHost, compactWidgets };
 }

package/dist/src/web-ui/app/components/home-guidance/daily-review.js

@@ -14,7 +14,7 @@ export function createDailyReviewDialog({ container, onDecision, onDismiss }) {
     <p class="daily-review-error" role="alert" data-review-error hidden></p>
     <div class="daily-review-actions"><button type="button" data-review-delete>Delete memory</button>
       <button type="button" data-review-keep>Keep memory</button></div>
-    <p class="daily-review-note">These memories are already saved. Keep marks them as reviewed in this browser.</p>
+    <p class="daily-review-note">These memories are already saved. Keep marks them as reviewed in this ABot installation.</p>
     <button type="button" class="daily-review-later" data-review-later>Not now</button>`;
   container.append(dialog);
   let returnFocus;
@@ -53,7 +53,7 @@ export function createDailyReviewDialog({ container, onDecision, onDismiss }) {
     dialog.querySelector("[data-review-error]").hidden = !error;
     dialog.querySelector(".daily-review-actions").hidden = !record;
     for (const button of dialog.querySelectorAll(".daily-review-actions button")) button.disabled = busy;
-    dialog.querySelector("[data-review-delete]").textContent = busy ? "Deleting…" : "Delete memory";
+    dialog.querySelector("[data-review-delete]").textContent = busy ? "Saving…" : "Delete memory";
     const later = dialog.querySelector("[data-review-later]");
     later.textContent = record ? "Not now" : "Done";
     if (hasReviewLoadError) later.textContent = "Close";

package/dist/src/web-ui/app/components/home-guidance/home-guidance.js

@@ -5,14 +5,14 @@ import { createHomeGuidancePreferences } from "../../services/home-guidance-pref
 import { createDailyMemoryReview } from "../../controllers/daily-memory-review.js";
 import { createDailyReviewDialog } from "./daily-review.js";
 import { createDailyReviewEntry } from "./daily-review-entry.js";
+import { workspaceStorage } from "../../services/workspace-state.js";
 
 export function createHomeGuidance({ container, homeRegion, client, getEnvironmentId,
   getLearningSnapshot, getConnectionState, supportsConnection, refreshConnection,
   onOpen, isRuntimeReady = () => true, storage }) {
   const documentRoot = container?.ownerDocument;
   if (!documentRoot) return { render() {}, dispose() {} };
-  let preferenceStorage = storage;
-  try { preferenceStorage ??= documentRoot.defaultView?.localStorage; } catch { /* Session-only preferences. */ }
+  const preferenceStorage = storage ?? workspaceStorage();
   const preferences = createHomeGuidancePreferences(preferenceStorage);
   const root = documentRoot.createElement("aside");
   root.className = "home-guidance";
@@ -42,16 +42,19 @@ export function createHomeGuidance({ container, homeRegion, client, getEnvironme
   });
   review = createDailyMemoryReview({ client, getEnvironmentId, preferences, render: (snapshot) => {
     dialog.render(snapshot);
-    if (canOfferDailyReview(snapshot) && dialog.canOpen() && review.markOffered()) dialog.open();
+    if (canOfferDailyReview(snapshot) && dialog.canOpen()) void offerReview();
     renderSuggestion();
   } });
   root.querySelector("[data-guidance-open]").addEventListener("click", () => {
     if (root.hidden || !selected) return;
     onOpen(selected.id);
   });
-  root.querySelector("[data-guidance-dismiss]").addEventListener("click", () => {
+  root.querySelector("[data-guidance-dismiss]").addEventListener("click", async () => {
     if (!selected) return;
-    preferences.dismiss(environment, selected.id);
+    const target = environment;
+    try { await preferences.dismiss(environment, selected.id); }
+    catch { return; }
+    if (target !== environment || disposed) return;
     hiddenThisVisit = true;
     renderSuggestion();
   });
@@ -105,6 +108,14 @@ export function createHomeGuidance({ container, homeRegion, client, getEnvironme
     if (!visible || reviewDismissed || !snapshot.remaining) return false;
     return hasCurrentLearningActivity();
   }
+  async function offerReview() {
+    const target = environment;
+    try {
+      if (!await review.markOffered()) return;
+      if (target !== getEnvironmentId() || !canOfferDailyReview(review.snapshot())) return;
+      if (dialog.canOpen()) dialog.open();
+    } catch { /* The shared storage failure remains visible; no success is claimed. */ }
+  }
   async function openMemoryReview() {
     if (openingReview || !canReviewSavedMemories() || !dialog.canOpen()) return;
     const operation = revision;
@@ -115,7 +126,10 @@ export function createHomeGuidance({ container, homeRegion, client, getEnvironme
     if (disposed || operation !== revision || target !== getEnvironmentId()) return;
     openingReview = false;
     if (loadedReview && canReviewSavedMemories() && dialog.canOpen()) {
-      review.markOffered();
+      try { await review.markOffered(); }
+      catch { return; }
+      if (disposed || operation !== revision || target !== getEnvironmentId()) return;
+      if (!canReviewSavedMemories() || !dialog.canOpen()) return;
       dialog.open();
     }
     renderSuggestion();