@abot-ai/runtime 1.8.0 → 1.9.0

package/dist/src/web-ui/app/components/automations/run-history-controls.js

@@ -0,0 +1,77 @@
+import { revealSelectedAutomationRun } from "./run-history.js";
+
+function readFilterFields(form) {
+  return Object.fromEntries(["status", "from", "to"].map((name) =>
+    [name, form.querySelector(`[name="${name}"]`)?.value || ""]));
+}
+
+function canScrollForMore(snapshot, list) {
+  if (!snapshot.runsNextCursor || snapshot.runsLoading || snapshot.runsError) return false;
+  if (list.clientHeight <= 0) return false;
+  return list.scrollHeight - list.scrollTop - list.clientHeight <= 80;
+}
+
+export function createAutomationRunHistoryControls({ root, actions }) {
+  let current = {};
+  let appliedKey = "";
+  let filterDraft = null;
+  let pendingLoad = null;
+  let resetScroll = false;
+
+  async function loadMore() {
+    if (pendingLoad || current.runsLoading) return;
+    const pending = {};
+    pendingLoad = pending;
+    try {
+      if (current.runsError) await actions.retryRunHistory();
+      else await actions.loadMoreRuns();
+    } finally { if (pendingLoad === pending) pendingLoad = null; }
+  }
+
+  function captureFilters(event) {
+    const form = event.target.closest("[data-run-history-filters]");
+    if (form) filterDraft = readFilterFields(form);
+  }
+  root.addEventListener("input", captureFilters);
+  root.addEventListener("change", captureFilters);
+  root.addEventListener("submit", (event) => {
+    const form = event.target.closest("[data-run-history-filters]");
+    if (!form) return;
+    event.preventDefault();
+    filterDraft = readFilterFields(form);
+    resetScroll = true;
+    void actions.setRunFilters(filterDraft);
+  });
+  root.addEventListener("click", (event) => {
+    if (event.target.closest("[data-load-more-runs]")) void loadMore();
+    if (event.target.closest("[data-reset-run-history]")) {
+      filterDraft = null;
+      resetScroll = true;
+      void actions.resetRunHistory();
+    }
+  });
+  root.addEventListener("scroll", (event) => {
+    const list = root.querySelector("#automation-run-history-list");
+    if (event.target !== list || !list) return;
+    if (canScrollForMore(current, list)) void loadMore();
+  }, true);
+
+  function sync(snapshot, { viewChanged = false, focus = false } = {}) {
+    current = snapshot;
+    const nextKey = JSON.stringify([snapshot.selectedAutomationId, snapshot.runsFilters || {}]);
+    const filtersChanged = nextKey !== appliedKey;
+    if (filtersChanged) { filterDraft = null; pendingLoad = null; appliedKey = nextKey; }
+    const form = root.querySelector("[data-run-history-filters]");
+    if (form && filterDraft) {
+      for (const [name, value] of Object.entries(filterDraft)) {
+        const input = form.querySelector(`[name="${name}"]`);
+        if (input) input.value = value;
+      }
+    }
+    const list = root.querySelector("#automation-run-history-list");
+    if (list && (filtersChanged || resetScroll)) list.scrollTop = 0;
+    resetScroll = false;
+    if (viewChanged) revealSelectedAutomationRun(root, { focus });
+  }
+  return { sync };
+}

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

@@ -0,0 +1,55 @@
+import { escapeHtml, formatTime } from "../../lib/text-format.js";
+
+const RUN_STATUSES = ["pending", "running", "stopping", "succeeded", "completed_with_skips", "failed", "cancelled", "interrupted", "missed"];
+
+function renderHistoryFilters(snapshot) {
+  const filters = snapshot.runsFilters || {};
+  return `<form class="automation-run-filters" data-run-history-filters id="automation-run-history-filters">
+    <label>Status<select name="status" id="automation-run-status-filter"><option value="">All statuses</option>${RUN_STATUSES.map((status) => `<option value="${status}"${filters.status === status ? " selected" : ""}>${escapeHtml(status.replaceAll("_", " "))}</option>`).join("")}</select></label>
+    <label>Scheduled from<input type="date" name="from" id="automation-run-date-from" value="${escapeHtml(filters.from || "")}" aria-describedby="automation-run-date-help"></label>
+    <label>Through<input type="date" name="to" id="automation-run-date-to" value="${escapeHtml(filters.to || "")}" aria-describedby="automation-run-date-help"></label>
+    <button type="submit"${snapshot.runsLoading ? " disabled" : ""}>Apply</button>
+    <button type="button" data-reset-run-history${snapshot.runsLoading ? " disabled" : ""}>Newest</button>
+    <small id="automation-run-date-help">Scheduled dates in your local time.</small>
+  </form>`;
+}
+
+function renderHistoryRow(run, selectedRunId) {
+  const status = run.status || "unknown";
+  return `<button type="button" data-select-run="${escapeHtml(run.id)}" data-run-id="${escapeHtml(run.id)}" aria-current="${run.id === selectedRunId}">
+    <span class="automation-run-time">${escapeHtml(formatTime(run.scheduledAt || run.startedAt || run.createdAt) || "Run")}</span>
+    <span class="automation-run-status" data-status="${escapeHtml(status)}">${escapeHtml(status.replaceAll("_", " "))}</span>
+  </button>`;
+}
+
+export function renderAutomationRunHistory(snapshot) {
+  const runs = Array.isArray(snapshot.runs) ? snapshot.runs : [];
+  const filtered = Object.values(snapshot.runsFilters || {}).some(Boolean);
+  const empty = snapshot.runsLoading ? "Loading runs…" : filtered ? "No runs match these filters." : "No runs yet.";
+  const canLoadMore = snapshot.runsNextCursor || snapshot.runsError;
+  return `<section class="automation-run-history" aria-labelledby="automation-run-history-heading">
+    <h4 id="automation-run-history-heading">Run history <span>${runs.length} loaded</span></h4>
+    ${renderHistoryFilters(snapshot)}
+    ${snapshot.runsFilterError ? `<p class="automation-run-history-error" role="alert">${escapeHtml(snapshot.runsFilterError)}</p>` : ""}
+    <div class="automation-run-choices" id="automation-run-history-list" aria-busy="${Boolean(snapshot.runsLoading)}">${runs.map((run) => renderHistoryRow(run, snapshot.selectedRunId)).join("") || `<p class="automation-muted">${empty}</p>`}</div>
+    ${snapshot.selectedRunId && !runs.some((run) => run.id === snapshot.selectedRunId) ? `<p class="automation-muted">The selected report is outside these results and remains open below.</p>` : ""}
+    <div class="automation-run-history-footer">
+      <span role="status">${snapshot.runsLoading ? "Loading…" : snapshot.runsNextCursor ? "Scroll for older runs" : runs.length ? "All matching runs loaded" : ""}</span>
+      ${canLoadMore ? `<button type="button" data-load-more-runs${snapshot.runsLoading ? " disabled" : ""}>${snapshot.runsError ? "Retry" : "Load more"}</button>` : ""}
+    </div>
+    ${snapshot.runsError ? `<p class="automation-run-history-error" role="alert">${escapeHtml(snapshot.runsError)}</p>` : ""}
+  </section>`;
+}
+
+export function revealSelectedAutomationRun(root, { focus = false } = {}) {
+  const list = root.querySelector("#automation-run-history-list");
+  const selected = list?.querySelector('[aria-current="true"]');
+  if (!selected) return;
+  if (focus) selected.focus({ preventScroll: true });
+  const viewport = list.getBoundingClientRect();
+  const row = selected.getBoundingClientRect();
+  const top = viewport.top + list.clientTop;
+  const bottom = top + list.clientHeight;
+  if (row.top < top) list.scrollTop += row.top - top;
+  else if (row.bottom > bottom) list.scrollTop += row.bottom - bottom;
+}

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

@@ -1,18 +1,13 @@
-import { escapeHtml, formatTime } from "../../lib/text-format.js";
+import { escapeHtml } from "../../lib/text-format.js";
 import { findAutomationNode, renderAutomationNodeDetails, renderAutomationTimeline } from "./timeline.js";
 import { renderAutomationReport, renderAutomationStepEvidence } from "./run-report-view.js";
 import { renderAutomationRunSteps } from "./run-steps-view.js";
+import { renderAutomationRunHistory } from "./run-history.js";
 
 function runIsActive(run) {
   return ["running", "stopping", "pending"].includes(run?.status);
 }
 
-function renderRunChoices(snapshot) {
-  const runs = Array.isArray(snapshot.runs) ? snapshot.runs : [];
-  if (!runs.length) return `<p class="automation-muted">No runs yet.</p>`;
-  return `<div class="automation-run-choices" aria-label="Recent runs">${runs.map((run) => `<button type="button" data-select-run="${escapeHtml(run.id)}" aria-current="${run.id === snapshot.selectedRunId}">${escapeHtml(formatTime(run.startedAt || run.createdAt) || "Run")} · ${escapeHtml(run.status || "Unknown")}</button>`).join("")}</div>`;
-}
-
 export function renderAutomationRun(snapshot, { locked = false } = {}) {
   const run = snapshot.run;
   const current = snapshot.automations.find((item) => item.id === snapshot.selectedAutomationId);
@@ -26,7 +21,7 @@ export function renderAutomationRun(snapshot, { locked = false } = {}) {
     <div class="automation-heading"><div><button type="button" class="automation-text-button" data-action="${locked ? "return-studio" : "editor"}">← ${locked ? "ABot Studio" : "Editor"}</button><h3 dir="auto">${escapeHtml(title)}</h3><p>${run ? `Read-only run${definitionRevision ? ` · Revision ${escapeHtml(definitionRevision)}` : ""}` : "Select a saved run"}</p></div>
       <div class="automation-actions">${!locked && run ? `<button type="button" data-action="open-chat-run">Open read-only view</button>` : ""}${runIsActive(run) && run?.status !== "stopping" ? `<button type="button" class="automation-stop" data-action="stop">Stop run</button>` : ""}${!locked && run && !runIsActive(run) && current?.status !== "archived" ? `<button type="button" data-action="rerun"${rerunDisabled ? " disabled" : ""}${runPending ? ' aria-busy="true"' : ""}>${runPending ? "Starting…" : "Run again"}</button>` : ""}</div></div>
     <p class="automation-feedback" role="status" aria-live="polite" data-tone="${snapshot.error ? "error" : ""}">${escapeHtml(snapshot.error || snapshot.feedback || (run ? "Run details loaded." : "Open a run to see its timeline and report."))}</p>
-    ${locked ? "" : `<div class="automation-tabs" role="tablist"><button type="button" role="tab" aria-selected="false" data-action="editor">Editor</button><button type="button" role="tab" aria-selected="true">Runs</button></div>${renderRunChoices(snapshot)}`}
+    ${locked ? "" : `<div class="automation-tabs" role="tablist"><button type="button" role="tab" aria-selected="false" data-action="editor">Editor</button><button type="button" role="tab" aria-selected="true">Runs</button></div>${renderAutomationRunHistory(snapshot)}`}
     ${run ? `${renderAutomationReport(run)}
       <div class="automation-run-explorer">${renderAutomationRunSteps(run, snapshot.selectedNodeId, detailId)}
       ${selectedNode ? `<section class="automation-run-detail" id="${escapeHtml(detailId)}" data-selected-step-result tabindex="-1" aria-label="Selected step result">

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

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../../lib/reasoning-controls.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { renderAutomationToolIdentity } from "./tool-identity.js";
 import { renderAutomationFailure } from "./failure-presentation.js";
@@ -45,7 +46,7 @@ function nodeIsRunning(node, run) {
 
 function nodeMetadata(node) {
   if (node.kind === "agent") {
-    return [node.modelProfileId || "Model not selected", node.agentMode || ""].filter(Boolean).join(" · ");
+    return [node.modelProfileId || "Model not selected", displayReasoningMode(node.agentMode) || ""].filter(Boolean).join(" · ");
   }
   return [node.operation?.toolName, node.operation?.operationId].filter(Boolean).join(" · ") || "Operation not selected";
 }
@@ -127,7 +128,7 @@ export function renderAutomationNodeDetails(node, run = null) {
   const record = nodeRunState(run, node.id);
   const operation = node.kind === "tool"
     ? `<dt>Operation</dt><dd>${escapeHtml(nodeMetadata(node))}</dd>`
-    : `<dt>Model</dt><dd>${escapeHtml(node.modelProfileId || "Not selected")}</dd><dt>Role</dt><dd>${escapeHtml(node.agentMode || "Not selected")}</dd>`;
+    : `<dt>Model</dt><dd>${escapeHtml(node.modelProfileId || "Not selected")}</dd><dt>Role</dt><dd>${escapeHtml(displayReasoningMode(node.agentMode) || "Not selected")}</dd>`;
   const prompt = node.kind === "agent" && node.prompt
     ? `<div class="automation-inspector-prompt"><strong>Prompt</strong><p dir="auto">${escapeHtml(node.prompt)}</p></div>`
     : "";

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

@@ -7,6 +7,7 @@ import { readAutomationDefinitionPatch, renderAutomationEditor, renderAutomation
 import { createAutomationStepEditorDialog } from "./step-editor-dialog.js";
 import { focusSelectedAutomationStep } from "./run-steps-view.js";
 import { renderAutomationRun } from "./run.js";
+import { createAutomationRunHistoryControls } from "./run-history-controls.js";
 import { findAutomationPosition } from "../../lib/automation-graph-position.js";
 import { canWrapAutomationSequence } from "../../lib/automation-parallel-depth.js";
 import { createAutomationTimelineCamera } from "./timeline-camera.js";
@@ -70,6 +71,7 @@ export function createAutomationsWorkspace({
     isEditing: () => Boolean(current.selectedNodeId) || stepEditor.isOpen(),
   });
   const liveView = createAutomationLiveView(root);
+  const runHistory = createAutomationRunHistoryControls({ root, actions });
 
   function isDirty() { return definitionDirty || stepEditor.isDirty(); }
 
@@ -132,7 +134,9 @@ export function createAutomationsWorkspace({
     const previousNodeId = renderedNodeId;
     const viewIdentity = `${snapshot.selectedAutomationId}/${snapshot.selectedRunId || "editor"}`;
     const sameEditor = snapshot.selectedAutomationId === current.selectedAutomationId && !snapshot.selectedRunId;
-    if (!liveView.isCurrent(viewIdentity)) { paletteQuery = ""; paletteSelectedTool = ""; insertion = null; detailsCollapsed = false; camera.resetState(); }
+    const viewChanged = !liveView.isCurrent(viewIdentity);
+    const historyHadFocus = documentRoot.activeElement?.matches?.("[data-select-run]");
+    if (viewChanged) { paletteQuery = ""; paletteSelectedTool = ""; insertion = null; detailsCollapsed = false; camera.resetState(); }
     else camera.capture();
     const retainedDefinition = definitionDirty && sameEditor
       ? root.querySelector("[data-automation-definition-form]") : null;
@@ -144,6 +148,7 @@ export function createAutomationsWorkspace({
         : renderAutomationEditor(snapshot, { query: paletteQuery, selectedToolName: paletteSelectedTool });
     const changed = liveView.update(viewIdentity, renderAutomationLibraryTabs(snapshot, markup, activeLibraryTab));
     if (changed && retainedDefinition) root.querySelector("[data-automation-definition-form]")?.replaceWith(retainedDefinition);
+    runHistory.sync(snapshot, { viewChanged, focus: historyHadFocus });
     markInsertion();
     updateDetailsVisibility();
     camera.restore();
@@ -314,7 +319,11 @@ export function createAutomationsWorkspace({
     run: () => { if (requireSavedGraph()) return actions.startRun(); },
     "toggle-active": () => current.automations.find((item) => item.id === current.selectedAutomationId)?.status === "active"
       ? actions.setActive(false) : openPermissionDialog("activate"),
-    "show-runs": () => { if (prepareLeave()) return current.runs[0] ? actions.openRun(current.runs[0].id) : notify("No runs yet."); },
+    "show-runs": () => {
+      if (!prepareLeave()) return;
+      const runId = current.runs[0]?.id || current.lastViewedRunId;
+      return runId ? actions.openRun(runId) : notify("No runs yet.");
+    },
     editor: () => { if (prepareLeave()) return actions.openRoute(current.selectedAutomationId, ""); },
     stop: () => actions.stopRun(),
     rerun: () => current.run &&

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

@@ -1,4 +1,6 @@
 import { createConversationTools } from "./conversation-tools.js";
+import { createConversationRoleDelegations } from "./conversation-role-delegations.js";
+import { createConversationRoleReturns } from "./conversation-role-returns.js";
 
 const ROLE_INITIALS = {
   supervisor: "S",
@@ -16,6 +18,8 @@ export function createConversationRoleCards({
   const timelineRequests = new Set();
   const timelineToggles = new Map();
   const toolsByRequest = new Map();
+  const delegations = createConversationRoleDelegations({ documentRoot });
+  const returns = createConversationRoleReturns({ documentRoot });
   let panelSequence = 0;
 
   function element(tag, className, text = "") {
@@ -97,6 +101,25 @@ export function createConversationRoleCards({
     }
     content.appendChild(header);
     const message = element("div", "conversation-role-message");
+    for (const activity of card.skillActivities || []) {
+      const skill = textElement(
+        "p",
+        "conversation-role-summary conversation-role-skill-activity",
+        activity.summary,
+      );
+      skill.dataset.tone = activity.tone;
+      message.appendChild(skill);
+    }
+    if (card.role === "supervisor") {
+      const history = delegations.createNode({
+        requestId, delegations: card.delegations || [],
+      });
+      if (history) message.appendChild(history);
+    }
+    if (card.role === "planner") {
+      const history = returns.createNode({ requestId, returns: card.returns || [] });
+      if (history) message.appendChild(history);
+    }
     if (card.summary) {
       const summary = element("p", "conversation-role-summary");
       summary.append(
@@ -187,6 +210,8 @@ export function createConversationRoleCards({
   }
 
   function forget(requestId) {
+    delegations.forget(requestId);
+    returns.forget(requestId);
     timelineRequests.delete(requestId);
     timelineToggles.delete(requestId);
     const tools = toolsByRequest.get(requestId);
@@ -195,6 +220,8 @@ export function createConversationRoleCards({
   }
 
   function reset() {
+    delegations.reset();
+    returns.reset();
     timelineRequests.clear();
     timelineToggles.clear();
     for (const tools of toolsByRequest.values()) {

package/dist/src/web-ui/app/components/conversation-role-delegations.d.ts

@@ -0,0 +1,12 @@
+import type { RoleDelegation } from "../lib/role-delegation-event.js";
+
+export declare function createConversationRoleDelegations(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(input: {
+    requestId: string;
+    delegations?: RoleDelegation[];
+  }): HTMLElement | null;
+  forget(requestId: string): void;
+  reset(): void;
+};

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

@@ -0,0 +1,24 @@
+import { titleCaseEventValue } from "../lib/event-presentation.js";
+import { createConversationRoleHistory } from "./conversation-role-history.js";
+
+export function createConversationRoleDelegations({ documentRoot = document } = {}) {
+  const history = createConversationRoleHistory({
+    documentRoot,
+    kind: "delegation",
+    textClassName: "conversation-role-delegation-objective",
+    ariaLabel: "Delegated work",
+  });
+
+  function createNode({ requestId, delegations = [] }) {
+    return history.createNode({
+      requestId,
+      items: delegations.map((delegation) => ({
+        id: delegation.id,
+        label: `Delegated to ${titleCaseEventValue(delegation.childRole)}`,
+        text: delegation.objective,
+      })),
+    });
+  }
+
+  return { createNode, forget: history.forget, reset: history.reset };
+}

package/dist/src/web-ui/app/components/conversation-role-history.d.ts

@@ -0,0 +1,13 @@
+export declare function createConversationRoleHistory(options: {
+  documentRoot?: Document;
+  kind: "delegation" | "return";
+  textClassName: string;
+  ariaLabel: string;
+}): {
+  createNode(input: {
+    requestId: string;
+    items?: { id: string; label: string; text: string }[];
+  }): HTMLElement | null;
+  forget(requestId: string): void;
+  reset(): void;
+};

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

@@ -0,0 +1,81 @@
+export function createConversationRoleHistory({
+  documentRoot = document,
+  kind,
+  textClassName,
+  ariaLabel,
+}) {
+  const requests = new Map();
+  const prefix = `conversation-role-${kind}`;
+
+  function element(tag, className, text = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = text;
+    return node;
+  }
+
+  function requestState(requestId) {
+    const existing = requests.get(requestId);
+    if (existing) return existing;
+    const state = { expanded: new Set(), nodes: new Map() };
+    requests.set(requestId, state);
+    return state;
+  }
+
+  function isCurrentDisclosure(requestId, state, id, node) {
+    if (requests.get(requestId) !== state) return false;
+    return state.nodes.get(id) === node;
+  }
+
+  function historyRow(requestId, state, item) {
+    const row = element("li", `${prefix}-row`);
+    const details = element("details", `conversation-role-history-item ${prefix}`);
+    details.dataset[`${kind}Id`] = item.id;
+    details.open = state.expanded.has(item.id);
+    state.nodes.set(item.id, details);
+    const summary = element("summary", `conversation-role-history-toggle ${prefix}-toggle`);
+    const label = element("span", `conversation-role-history-label ${prefix}-label`, item.label);
+    const chevron = element("span", `conversation-role-history-chevron ${prefix}-chevron`, "⌄");
+    chevron.setAttribute("aria-hidden", "true");
+    const text = element("span", `conversation-role-history-text ${textClassName}`, item.text);
+    text.setAttribute("dir", "auto");
+    summary.append(label, chevron, text);
+    details.appendChild(summary);
+    details.addEventListener("toggle", () => {
+      if (!isCurrentDisclosure(requestId, state, item.id, details)) return;
+      if (details.open) {
+        state.expanded.add(item.id);
+        return;
+      }
+      state.expanded.delete(item.id);
+    });
+    row.appendChild(details);
+    return row;
+  }
+
+  function createNode({ requestId, items = [] }) {
+    requests.get(requestId)?.nodes.clear();
+    if (items.length === 0) return null;
+    const state = requestState(requestId);
+    const identities = new Set(items.map((item) => item.id));
+    for (const id of state.expanded) {
+      if (!identities.has(id)) state.expanded.delete(id);
+    }
+    const list = element("ol", `conversation-role-history ${prefix}s`);
+    list.setAttribute("aria-label", ariaLabel);
+    for (const item of items) {
+      list.appendChild(historyRow(requestId, state, item));
+    }
+    return list;
+  }
+
+  function forget(requestId) {
+    requests.delete(requestId);
+  }
+
+  function reset() {
+    requests.clear();
+  }
+
+  return { createNode, forget, reset };
+}

package/dist/src/web-ui/app/components/conversation-role-returns.d.ts

@@ -0,0 +1,12 @@
+import type { RoleReturn } from "../lib/role-return-event.js";
+
+export declare function createConversationRoleReturns(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(input: {
+    requestId: string;
+    returns?: RoleReturn[];
+  }): HTMLElement | null;
+  forget(requestId: string): void;
+  reset(): void;
+};

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

@@ -0,0 +1,23 @@
+import { createConversationRoleHistory } from "./conversation-role-history.js";
+
+export function createConversationRoleReturns({ documentRoot = document } = {}) {
+  const history = createConversationRoleHistory({
+    documentRoot,
+    kind: "return",
+    textClassName: "conversation-role-return-summary",
+    ariaLabel: "Planner results",
+  });
+
+  function createNode({ requestId, returns = [] }) {
+    return history.createNode({
+      requestId,
+      items: returns.map((receipt) => ({
+        id: receipt.id,
+        label: receipt.outcome === "failed" ? "Planner failed" : "Returned result",
+        text: receipt.summary,
+      })),
+    });
+  }
+
+  return { createNode, forget: history.forget, reset: history.reset };
+}

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: