@abot-ai/runtime 1.5.0 → 1.7.0

package/dist/src/web-ui/app/components/conversation-view.js

@@ -31,6 +31,14 @@ export function createConversationView({
   canOpenSchedule = () => true,
   filePreview = { reset() {}, syncScope() {}, setWorkspace() {} },
   sparkActions = { createNode: () => null },
+  scrollBehavior = null,
+  preserveMessageHistory = false,
+  createActivityView = createConversationActivity,
+  statusPresentation = (model) => model,
+  statusPlacement = "bubble",
+  emptyState = { title: "What would you like to work on?", copy: "Ask a question, inspect a project, or start a task." },
+  showReasoning = true,
+  showContextWindow = true,
   documentRoot = document,
   viewport = window,
 }) {
@@ -39,7 +47,7 @@ export function createConversationView({
     onOpenJob: onOpenSchedule,
     canOpenJob: canOpenSchedule,
   });
-  const conversationActivity = createConversationActivity({
+  const conversationActivity = createActivityView({
     documentRoot,
     onOpenFile: filePreview.open,
     canOpenFile: filePreview.canOpen,
@@ -49,12 +57,13 @@ export function createConversationView({
     getActiveRequestId,
     getActivityForMessage,
     isConnected,
+    present: statusPresentation,
     documentRoot,
   });
-  const composerContextWindow = createComposerContextWindow({
+  const composerContextWindow = showContextWindow ? createComposerContextWindow({
     container: dom.composerContextWindow,
     documentRoot,
-  });
+  }) : { render() {}, reset() {} };
   const composerPlan = createComposerPlan({
     container: dom.composerPlan,
     documentRoot,
@@ -68,9 +77,12 @@ export function createConversationView({
     viewport,
     scrollRoot: dom.messagesList,
     onLayoutChange: () => {
+      if (scrollBehavior) { scrollBehavior.onLayoutChange?.(); return; }
       if (viewState.followMessages) scrollToEnd();
     },
   });
+  let historyPager;
+  let holdingPosition = false;
   const viewState = {
     followMessages: true,
     messageRenderTimer: 0,
@@ -82,10 +94,11 @@ export function createConversationView({
   function updateJumpToLatest() {
     const hasOverflow =
       dom.messagesList.scrollHeight > dom.messagesList.clientHeight + 24;
-    dom.jumpToLatestButton.hidden = viewState.followMessages || !hasOverflow;
+    dom.jumpToLatestButton.hidden = !historyPager?.hasNewer() && (viewState.followMessages || !hasOverflow);
   }
 
   function scrollToEnd() {
+    if (scrollBehavior) return scrollBehavior.toEnd();
     viewState.followMessages = true;
     pinScrollToEnd(dom.messagesList);
     updateJumpToLatest();
@@ -112,18 +125,22 @@ export function createConversationView({
   }
 
   function renderEmptyState() {
+    if (emptyState.render) return emptyState.render(dom.messagesList);
     dom.messagesList.innerHTML = `
       <div class="empty-state chat-empty-state">
-        <div class="mode-empty-title">What would you like to work on?</div>
-        <div class="mode-empty-copy">Ask a question, inspect a project, or start a task.</div>
+        <div class="mode-empty-title"></div>
+        <div class="mode-empty-copy"></div>
       </div>
     `;
+    dom.messagesList.querySelector(".mode-empty-title").textContent = emptyState.title;
+    dom.messagesList.querySelector(".mode-empty-copy").textContent = emptyState.copy;
   }
 
   function createMessageNode(message) {
     const scheduleNode = conversationSchedule.createNode(message);
     if (scheduleNode) return scheduleNode;
     const row = documentRoot.createElement("article");
+    row.dataset.messageId = String(message.id);
     row.dataset.requestId = message.requestId || "";
     row.className = `message-row ${message.role === "user" ? "user" : "assistant"}`;
     row.setAttribute(
@@ -162,22 +179,23 @@ export function createConversationView({
     const attachments = messageAttachments.createNode(message.attachments);
     if (attachments) bubble.appendChild(attachments);
 
+    let activity = null;
     if (message.role !== "user" && message.requestId) {
       const activityInput = {
         requestId: message.requestId,
         streaming: Boolean(message.streaming),
         ...getActivityForMessage(message),
       };
-      const activity = conversationActivity.createNode(activityInput);
+      activity = conversationActivity.createNode(activityInput);
       if (activity) bubble.appendChild(activity);
     }
 
-    const thinking = conversationReasoning.createNode(message);
+    const thinking = showReasoning ? conversationReasoning.createNode(message) : null;
     if (thinking) bubble.appendChild(thinking);
 
     bubble.appendChild(body);
     const status = conversationStatus.createNode(message);
-    if (status) bubble.appendChild(status);
+    if (status && statusPlacement === "bubble") bubble.appendChild(status);
     const linkPreviews = messageLinkPreviews.createNode(message);
     if (linkPreviews) bubble.appendChild(linkPreviews);
     if (message.role !== "user" && message.text && !message.streaming) {
@@ -196,12 +214,15 @@ export function createConversationView({
       actions.appendChild(copyButton);
       bubble.appendChild(actions);
     }
-    const sparkChoices = sparkActions.createNode(message, { onKept: () => row.focus({ preventScroll: true }) });
-    if (sparkChoices) {
-      row.tabIndex = -1;
-      bubble.appendChild(sparkChoices);
-    }
+    const initiativeAction = sparkActions.createNode(message);
+    if (initiativeAction) bubble.appendChild(initiativeAction);
     row.appendChild(bubble);
+    if (status && statusPlacement === "outside") {
+      const hasVisibleContent = Boolean(message.text || attachments || activity || thinking || linkPreviews || initiativeAction);
+      bubble.hidden = !hasVisibleContent;
+      row.classList.add("message-status-outside");
+      row.appendChild(status);
+    }
     return row;
   }
 
@@ -227,8 +248,8 @@ export function createConversationView({
     );
     const previousScrollTop = dom.messagesList.scrollTop;
     const shouldFollow =
-      viewState.followMessages || isNearScrollEnd(dom.messagesList);
-    const messages = projectApprovalContinuations(getMessages());
+      !holdingPosition && !historyPager?.hasNewer() && (viewState.followMessages || isNearScrollEnd(dom.messagesList));
+    const messages = preserveMessageHistory ? getMessages() : projectApprovalContinuations(getMessages());
     conversationReasoning.beginRender(messages);
     messageLinkPreviews.reset();
     conversationStatus.reset();
@@ -237,6 +258,7 @@ export function createConversationView({
       renderEmptyState();
       viewState.followMessages = true;
       updateJumpToLatest();
+      scrollBehavior?.afterRender();
       return;
     }
     for (const message of messages) {
@@ -245,6 +267,12 @@ export function createConversationView({
     for (const pendingApproval of getPendingApprovals()) {
       dom.messagesList.appendChild(createApprovalCard(pendingApproval));
     }
+    historyPager?.renderControls(dom.messagesList);
+    if (scrollBehavior) {
+      scrollBehavior.afterRender();
+      if (historyPager?.hasNewer()) dom.jumpToLatestButton.hidden = false;
+      return;
+    }
     if (shouldFollow) {
       scrollToEnd();
     } else {
@@ -282,7 +310,23 @@ export function createConversationView({
     viewState.thinkingRenderTimer = 0;
   }
 
+  function preserveScroll(change) {
+    const root = dom.messagesList;
+    const bounds = root.getBoundingClientRect();
+    const anchor = [...root.querySelectorAll("[data-message-id]")].find((node) => node.getBoundingClientRect().bottom > bounds.top);
+    const id = anchor?.dataset.messageId;
+    const offset = anchor?.getBoundingClientRect().top ?? 0;
+    const previousTop = root.scrollTop;
+    holdingPosition = true; viewState.followMessages = false; viewState.scrollSettleVersion += 1;
+    change();
+    const restored = [...root.querySelectorAll("[data-message-id]")].find((node) => node.dataset.messageId === id);
+    root.scrollTop = restored ? root.scrollTop + restored.getBoundingClientRect().top - offset : previousTop;
+    scrollBehavior?.preservePosition?.();
+    updateJumpToLatest();
+  }
+
   function reset() {
+    holdingPosition = false;
     filePreview.reset();
     viewState.followMessages = true;
     viewState.scrollSettleVersion += 1;
@@ -297,18 +341,27 @@ export function createConversationView({
     messageLinkPreviews.reset();
   }
 
+  function jumpToLatest() {
+    if (!historyPager?.hasNewer()) { scrollToEnd(); return; }
+    void historyPager.latest().then(scrollToEnd).catch(() => notify("Could not load latest messages", "failed"));
+  }
+
   function bind() {
     if (viewState.bound) return;
     viewState.bound = true;
-    dom.jumpToLatestButton.addEventListener("click", scrollToEnd);
+    dom.jumpToLatestButton.addEventListener("click", jumpToLatest);
     dom.messagesList.addEventListener("scroll", () => {
-      viewState.followMessages = isNearScrollEnd(dom.messagesList);
+      holdingPosition = false;
+      if (scrollBehavior) return;
+      viewState.followMessages = !historyPager?.hasNewer() && isNearScrollEnd(dom.messagesList);
       if (!viewState.followMessages) viewState.scrollSettleVersion += 1;
       updateJumpToLatest();
     });
   }
 
   return {
+    preserveScroll,
+    setHistoryPager: (pager) => { historyPager = pager; },
     setWorkspace: filePreview.setWorkspace,
     closeFilePreview: filePreview.reset,
     bind,

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

@@ -0,0 +1,28 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+function runLink(automation, environmentId) {
+  const query = new URLSearchParams({
+    environment: environmentId,
+    automation: automation.id,
+    run: automation.latestRunId,
+  });
+  return `/automations?${query}`;
+}
+
+function runStatusLabel(status) {
+  return { pending: "Queued", stopping: "Stopping" }[status] || "Running";
+}
+
+export function renderDashboardAutomations(automations = [], environmentId = "", unavailable = false) {
+  if (!automations.length && !unavailable) return "";
+  const visible = automations.slice(0, 3);
+  const remaining = automations.length - visible.length;
+  const heading = unavailable ? "Automation status unavailable" :
+    `${automations.length} ${automations.length === 1 ? "automation" : "automations"} in progress`;
+  return `<div class="home-automation-heading"><span>ABot Studio</span><strong>${heading}</strong></div>
+    <div class="home-automation-runs">${visible.map((automation) => `<a class="home-automation-run" href="${escapeHtml(runLink(automation, environmentId))}">
+      ${unavailable ? "" : '<span class="home-automation-pulse" aria-hidden="true"></span>'}
+      <strong dir="auto">${escapeHtml(automation.title || "ABot Automation")}</strong>
+      <span>${unavailable ? "Last seen " : ""}${runStatusLabel(automation.latestRunStatus)} · ${unavailable ? "Open run" : "View live timeline"}</span>
+    </a>`).join("")}${remaining ? `<span class="home-automation-more">+${remaining} more in ABot Studio</span>` : ""}${unavailable ? '<button type="button" class="home-automation-retry" data-dashboard-action="refresh">Retry</button>' : ""}</div>`;
+}

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

@@ -35,6 +35,7 @@ function unreadAvailabilityNotice({ conversations, hasUnavailableReadState }) {
 
 export function renderDashboardConversations({
   sessions = [],
+  overview,
   loading = false,
   error = "",
 }) {
@@ -43,7 +44,7 @@ export function renderDashboardConversations({
     recentConversations: conversations,
     unreadCount,
     hasUnavailableReadState,
-  } = projection;
+  } = { ...projection, ...(overview ? { unreadCount: overview.unreadCount, hasUnavailableReadState: overview.hasUnavailableReadState } : {}) };
   const badge =
     unreadCount > 0 && !hasUnavailableReadState
       ? `<span class="home-unread-count" aria-label="${unreadCount} unread messages">${unreadCount}</span>`

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

@@ -2,6 +2,7 @@ import { updateLiveRegion } from "../../lib/live-region.js";
 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 {
   hasPendingDashboardApprovals,
   renderDashboardApprovals,
@@ -12,6 +13,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   root.innerHTML = `<div class="home-workspace-body">
     <div class="home-workspace-content">
       <section class="home-panel home-learning-panel" data-dashboard-learning hidden><div data-dashboard-learning-content></div></section>
+      <section class="home-automation-status" aria-label="Automations in progress" aria-live="polite" data-dashboard-automations hidden></section>
       <div class="home-overview">
         <section class="home-panel home-activity-panel" aria-label="Recent activity" data-dashboard-activity></section>
         <section class="home-panel home-recent-panel" aria-label="Recent conversations" data-dashboard-conversations></section>
@@ -34,6 +36,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   const composerHost = root.querySelector("[data-dashboard-composer]");
   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]"));
   const composerNote = root.querySelector(".home-composer-note");
   const handlers = {
@@ -63,6 +66,10 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
       approvalParent.appendChild(approvals);
     root.classList.toggle("home-setup-active", setupRequired);
     learningPanel.hidden = setupRequired || !passiveLearning;
+    const automationMarkup = renderDashboardAutomations(
+      snapshot.activeAutomations, snapshot.environmentId, snapshot.automationStatusUnavailable,
+    );
+    automationPanel.hidden = setupRequired || !automationMarkup;
     overview.hidden = setupRequired;
     approvals.hidden = setupRequired;
     composerHost.hidden = snapshot.composerAvailable === false;
@@ -70,6 +77,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
     composerNote.hidden = snapshot.composerAvailable === false;
     if (setupRequired) {
       activity.innerHTML = "";
+      automationPanel.innerHTML = "";
       conversations.innerHTML = "";
       approvals.innerHTML = "";
       return;
@@ -81,6 +89,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
       onDecision: actions.decideApproval,
       documentRoot: root.ownerDocument,
     });
+    updateLiveRegion(automationPanel, automationMarkup);
 
     updateLiveRegion(
       activity,
@@ -95,7 +104,8 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
     updateLiveRegion(
       conversations,
       renderDashboardConversations({
-        sessions: snapshot.sessions,
+        sessions: snapshot.sessionOverview?.sessions ?? snapshot.sessions,
+        overview: snapshot.sessionOverview,
         loading: snapshot.loadingSessions,
         error: snapshot.sessionsError,
       }),

package/dist/src/web-ui/app/components/notifications/dom.js

@@ -19,7 +19,7 @@ export function mountNotificationsDom(dom, documentRoot = document) {
   panel.setAttribute("aria-labelledby", "notificationsWorkspaceTitle");
   panel.setAttribute("aria-hidden", "true");
   panel.innerHTML = `<header class="workspace-page-header">
-    <div class="workspace-page-heading"><h2 id="notificationsWorkspaceTitle">Notifications</h2><p>Updates from your assistant, in one place.</p></div>
+    <div class="workspace-page-heading"><h2 id="notificationsWorkspaceTitle">Notifications</h2></div>
     <button type="button" class="workspace-page-back notification-close">Back to chat</button>
     </header><div class="workspace-page-body" data-notifications-root></div>`;
   dom.app.append(panel);

package/dist/src/web-ui/app/components/notifications/feedback.js

@@ -0,0 +1,34 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { hasOlderUnreadNotifications } from "./pagination.js";
+
+function notificationFeedbackState(snapshot, items) {
+  if (snapshot.error) return { message: snapshot.error };
+  if (!snapshot.supported) return { message: "Notifications are unavailable with this backend." };
+  if (items.length) return { message: "" };
+  if (snapshot.loading) return { message: "Loading notifications…" };
+  if (hasOlderUnreadNotifications(snapshot))
+    return { message: "Unread notifications are in older history. Load older notifications to view them." };
+  if (snapshot.filter === "unread") return {
+    message: "You're all caught up.",
+    detail: "No unread notifications. Switch to All to revisit earlier updates.",
+    icon: '<circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" />',
+  };
+  return {
+    message: "No notifications yet.",
+    detail: "Updates from your chats and automations will appear here.",
+    icon: '<path d="M5 17h14l-2-3V9a5 5 0 0 0-10 0v5l-2 3Z" /><path d="M10 20h4" />',
+  };
+}
+
+export function notificationFeedback(snapshot, items) {
+  return notificationFeedbackState(snapshot, items).message;
+}
+
+export function renderNotificationFeedback(snapshot, items) {
+  const state = notificationFeedbackState(snapshot, items);
+  if (!state.detail) return escapeHtml(state.message);
+  return `<div class="notification-empty-state">
+    <span class="notification-empty-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${state.icon}</svg></span>
+    <h3>${escapeHtml(state.message)}</h3><p>${escapeHtml(state.detail)}</p>
+  </div>`;
+}

package/dist/src/web-ui/app/components/notifications/pagination.js

@@ -0,0 +1,13 @@
+export function canLoadOlderNotifications(snapshot) {
+  if (!snapshot.nextCursor) return false;
+  if (snapshot.filter !== "unread") return true;
+  return hasOlderUnreadNotifications(snapshot);
+}
+
+export function hasOlderUnreadNotifications(snapshot) {
+  if (!snapshot.nextCursor) return false;
+  if (snapshot.filter !== "unread") return false;
+  const loadedUnreadCount = (snapshot.items || [])
+    .filter((item) => item.readAt == null).length;
+  return snapshot.unreadCount > loadedUnreadCount;
+}

package/dist/src/web-ui/app/components/notifications/presentation.js

@@ -4,7 +4,8 @@ export const NOTIFICATION_KIND_LABELS = Object.freeze({
   reply: "Assistant replies",
   failure: "Failures",
   approval: "Approval requests",
-  proposal: "Co-worker suggestions",
+  proposal: "SPARK suggestions",
+  automation: "Automation runs",
 });
 
 const DELIVERY_LABELS = Object.freeze({
@@ -21,6 +22,7 @@ const NOTIFICATION_KIND_ICONS = Object.freeze({
   failure: '<path d="m12 3 10 18H2L12 3Z" /><path d="M12 9v5M12 17h.01" />',
   approval: '<path d="M12 3 4 6v6c0 5 8 9 8 9s8-4 8-9V6l-8-3Z" /><path d="m8 12 3 3 5-6" />',
   proposal: '<path d="m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z" />',
+  automation: '<rect x="3" y="4" width="18" height="16" rx="2" /><path d="M7 8h10M8 12l3 2 4-4" />',
 });
 
 function renderNotificationTimestamp(createdAt) {
@@ -36,6 +38,24 @@ function notificationBodyRepeatsTitle(item) {
   return item.body.trim() === item.title.trim();
 }
 
+function hasBoundAutomationSource(item, url) {
+  if (!item.sourceUrl.startsWith("/automations?")) return false;
+  if (url.pathname !== "/automations" || url.hash) return false;
+  if (typeof item.automationId !== "string" || !item.automationId) return false;
+  if (typeof item.runId !== "string" || !item.runId) return false;
+  if (item.sessionId !== undefined || item.requestId !== undefined) return false;
+  const expected = {
+    environment: item.environmentId,
+    automation: item.automationId,
+    run: item.runId,
+  };
+  for (const [key, value] of Object.entries(expected)) {
+    if (url.searchParams.getAll(key).length !== 1) return false;
+    if (url.searchParams.get(key) !== value) return false;
+  }
+  return [...url.searchParams.keys()].every((key) => Object.hasOwn(expected, key));
+}
+
 export function notificationSourceUrl(item) {
   if (typeof item?.sourceUrl !== "string") return "";
   if (!item.sourceUrl.startsWith("/")) return "";
@@ -46,6 +66,8 @@ export function notificationSourceUrl(item) {
     return "";
   }
   if (url.origin !== "https://abot.invalid") return "";
+  if (item.kind === "automation")
+    return hasBoundAutomationSource(item, url) ? `${url.pathname}${url.search}` : "";
   if (!["/chat", "/learning", "/home", "/notifications"].includes(url.pathname)) return "";
   if (url.searchParams.get("environment") !== item.environmentId) return "";
   return `${url.pathname}${url.search}${url.hash}`;
@@ -107,8 +129,7 @@ export function renderNotificationSettings(snapshot) {
   const status = desktop.message || (desktop.available
     ? "Computer access is connected. Alerts can arrive while your browser is closed."
     : "Connect Computer access to receive desktop alerts.");
-  return `<details class="notification-settings"><summary>Notification settings</summary>
-    <div class="notification-settings-body">
+  return `<div class="notification-settings-body">
       <label class="notification-setting"><span><strong>Desktop notifications</strong>
         <small>Show ABot alerts on this computer.</small></span>
         <input type="checkbox" data-notification-preference="desktopEnabled" ${preferences.desktopEnabled ? "checked" : ""} ${disabled}></label>
@@ -119,5 +140,5 @@ export function renderNotificationSettings(snapshot) {
         ).join("")}
       </div></div>
       <p class="notification-settings-note">History is always saved. Replies in the active conversation stay silent. System notification settings apply.</p>
-    </div></details>`;
+    </div>`;
 }

package/dist/src/web-ui/app/components/notifications/tabs.js

@@ -0,0 +1,49 @@
+function notificationTabIndexForKey(key, index, count) {
+  if (key === "Home") return 0;
+  if (key === "End") return count - 1;
+  if (key === "ArrowRight") return (index + 1) % count;
+  if (key === "ArrowLeft") return (index + count - 1) % count;
+  return -1;
+}
+
+export function createNotificationTabs(root) {
+  const tabs = ["notifications", "settings"].map((name) => ({
+    name,
+    button: root.querySelector(`[data-notification-tab="${name}"]`),
+    panel: root.querySelector(`[data-notification-panel="${name}"]`),
+  }));
+
+  function hasNotificationTabSurface(tab) {
+    if (!tab?.button) return false;
+    return Boolean(tab.panel);
+  }
+
+  function activate(name, { focus = false } = {}) {
+    const selected = tabs.find((tab) => tab.name === name);
+    if (!hasNotificationTabSurface(selected)) return false;
+    for (const tab of tabs) {
+      if (!hasNotificationTabSurface(tab)) continue;
+      const active = tab === selected;
+      tab.panel.hidden = !active;
+      tab.panel.inert = !active;
+      tab.button.setAttribute("aria-selected", String(active));
+      tab.button.tabIndex = active ? 0 : -1;
+      tab.button.classList.toggle("active", active);
+    }
+    if (focus) selected.button.focus();
+    return true;
+  }
+
+  tabs.forEach((tab, index) => {
+    if (!hasNotificationTabSurface(tab)) return;
+    tab.button.addEventListener("click", () => activate(tab.name));
+    tab.button.addEventListener("keydown", (event) => {
+      const nextIndex = notificationTabIndexForKey(event.key, index, tabs.length);
+      if (nextIndex < 0) return;
+      event.preventDefault();
+      activate(tabs[nextIndex].name, { focus: true });
+    });
+  });
+  activate("notifications");
+  return { activate };
+}

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

@@ -1,4 +1,8 @@
 import { createNotificationFocus } from "./focus.js";
+import { createNotificationTabs } from "./tabs.js";
+import { canLoadOlderNotifications } from "./pagination.js";
+import { renderNotificationFeedback } from "./feedback.js";
+export { notificationFeedback } from "./feedback.js";
 import {
   renderNotificationItem,
   renderNotificationSettings,
@@ -8,21 +12,30 @@ export function createNotificationsWorkspace({ root, button, badge, actions }) {
   let snapshot;
   const focus = createNotificationFocus(root);
   root.innerHTML = `<div class="notifications-content">
+    <nav class="config-category-nav notifications-nav" role="tablist" aria-label="Notification views">
+      <button id="notificationsInboxTab" class="config-category-tab active" type="button" role="tab" data-notification-tab="notifications" aria-controls="notificationsInboxPanel" aria-selected="true">Notifications</button>
+      <button id="notificationsSettingsTab" class="config-category-tab" type="button" role="tab" data-notification-tab="settings" aria-controls="notificationsSettingsPanel" aria-selected="false" tabindex="-1">Settings</button>
+    </nav>
+    <div class="config-category-panels">
+    <div id="notificationsInboxPanel" class="config-category-panel" role="tabpanel" aria-labelledby="notificationsInboxTab" tabindex="0" data-notification-panel="notifications">
     <div class="notifications-toolbar">
       <div class="notification-filters" role="group" aria-label="Filter notifications">
-        <button type="button" data-notification-filter="all" aria-pressed="true">All</button>
-        <button type="button" data-notification-filter="unread" aria-pressed="false">Unread</button>
+        <button type="button" data-notification-filter="all" aria-pressed="false">All</button>
+        <button type="button" data-notification-filter="unread" aria-pressed="true">Unread</button>
       </div>
       <div class="notification-toolbar-actions">
         <button type="button" data-notification-action="refresh">Refresh</button>
         <button type="button" data-notification-action="read-all">Mark all read</button>
       </div>
     </div>
-    <p class="notification-feedback" role="status" aria-live="polite"></p>
+    <div class="notification-feedback" role="status" aria-live="polite"></div>
     <ul class="notification-list" aria-label="Notification history"></ul>
     <button type="button" class="notification-load-more" data-notification-action="more" hidden>Load older notifications</button>
-    <div class="notification-settings-root"></div>
+    </div>
+    <div id="notificationsSettingsPanel" class="config-category-panel notification-settings-root" role="tabpanel" aria-labelledby="notificationsSettingsTab" tabindex="0" data-notification-panel="settings" hidden inert></div>
+    </div>
   </div>`;
+  createNotificationTabs(root);
   const list = root.querySelector(".notification-list");
   const feedback = root.querySelector(".notification-feedback");
   const settings = root.querySelector(".notification-settings-root");
@@ -85,31 +98,11 @@ export function createNotificationsWorkspace({ root, button, badge, actions }) {
     for (const details of list.querySelectorAll("details"))
       details.open = expandedItems.has(details.dataset.notificationId);
     list.setAttribute("aria-busy", String(next.loading));
-    feedback.textContent = notificationFeedback(next, items);
+    feedback.innerHTML = renderNotificationFeedback(next, items);
     feedback.classList.toggle("is-error", Boolean(next.error));
-    more.hidden = !next.nextCursor;
-    const expanded = settings.querySelector("details")?.open;
+    more.hidden = !canLoadOlderNotifications(next);
     settings.innerHTML = renderNotificationSettings(next);
-    const disclosure = settings.querySelector("details");
-    if (disclosure) disclosure.open = Boolean(expanded);
     focus.restore(next.busy || next.loading);
   }
   return { render };
 }
-
-export function notificationFeedback(snapshot, items) {
-  if (snapshot.error) return snapshot.error;
-  if (!snapshot.supported) return "Notifications are unavailable with this backend.";
-  if (items.length) return "";
-  if (snapshot.loading) return "Loading notifications…";
-  if (hasOlderUnreadNotifications(snapshot))
-    return "Unread notifications are in older history. Load older notifications to view them.";
-  if (snapshot.filter === "unread") return "You're all caught up.";
-  return "No notifications yet.";
-}
-
-function hasOlderUnreadNotifications(snapshot) {
-  if (snapshot.filter !== "unread") return false;
-  if (snapshot.unreadCount <= 0) return false;
-  return Boolean(snapshot.nextCursor);
-}

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

@@ -1,6 +1,6 @@
 const navigation = Object.freeze({
   home: "homeWorkspaceButton", chat: "chatWorkspaceButton", learning: "learningWorkspaceButton",
-  memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", models: "modelsWorkspaceButton",
+  memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", automations: "automationsWorkspaceButton", models: "modelsWorkspaceButton",
   plugins: "pluginsWorkspaceButton", notifications: "notificationsWorkspaceButton", config: "configWorkspaceButton",
 });