@abot-ai/runtime 1.8.0 → 1.8.1

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/operations-summary.js

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../lib/reasoning-controls.js";
 import { formatTime, textOf } from "../lib/text-format.js";
 import { getNumber } from "../lib/event-presentation.js";
 
@@ -91,7 +92,7 @@ function healthSummary(read) {
     label: "System health · all environments",
     items: [
       { label: "Health · all environments", value: unavailable || healthValue(payload.ok), status: true },
-      { label: "Runtime mode", value: unavailable || textOf(payload.agentMode, "-") || "-" },
+      { label: "Runtime mode", value: unavailable || textOf(displayReasoningMode(payload.agentMode), "-") || "-" },
       { label: "Active streams", value: unavailable || activeStreamCount(payload) },
       { label: "Latest event", value: unavailable || textOf(latest?.lastEventName || latest?.lastEventType, "-") || "-" },
     ],

package/dist/src/web-ui/app/components/passive-learning/home-widget-preview.js

@@ -0,0 +1,32 @@
+import { coWorkerActivityStates, coWorkerActivityTones } from "./agent-state.js";
+
+const indicators = {
+  off: { icon: "paused", tone: "neutral" },
+  waiting: { icon: "active", tone: "neutral" },
+  ready: { icon: "success", tone: "success" },
+  active: { icon: "active", tone: "active" },
+  attention: { icon: "failed", tone: "attention" },
+};
+
+/** Read-only projection of the same activity states used by the expanded owner. */
+export function learningWidgetPreview(status) {
+  if (!status?.preferences) return null;
+  const states = coWorkerActivityStates(status);
+  const tones = coWorkerActivityTones(status);
+  return {
+    kind: "metrics",
+    items: [
+      ["collection", "Collection"],
+      ["processing", "Learning"],
+      ["proactive", "Proactive"],
+    ].map(([key, label]) => {
+      const indicator = { ...(indicators[tones[key]] || indicators.off) };
+      indicator.label = [label, ...states[key]].filter(Boolean).join(": ");
+      if (key === "collection" && tones[key] === "active") indicator.icon = "collecting";
+      if (key === "processing" && ["ready", "waiting"].includes(tones[key])
+        && Number.isFinite(status.pendingObservations) && status.pendingObservations > 0)
+        indicator.value = status.pendingObservations;
+      return { label, indicator };
+    }),
+  };
+}

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

@@ -37,8 +37,10 @@ export function createPassiveLearningHome({
   let root = null;
   let renderedSnapshot = {};
   let motion;
+  let onRendered = () => {};
 
-  function mount(nextRoot) {
+  function mount(nextRoot, notify = () => {}) {
+    onRendered = notify;
     if (root === nextRoot) return;
     motion?.dispose();
     root?.removeEventListener("click", handleClick);
@@ -88,6 +90,7 @@ export function createPassiveLearningHome({
     const error = root.querySelector("[data-learning-status]");
     error.textContent = snapshot.statusError || "";
     error.hidden = !snapshot.statusError;
+    onRendered();
   }
 
   return Object.freeze({ mount, render });

package/dist/src/web-ui/app/components/schedules/details.js

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../../lib/reasoning-controls.js";
 import { toolPermissionModeMeta } from "../../lib/tool-permission-mode.js";
 import { updateLiveRegion } from "../../lib/live-region.js";
 import { escapeHtml } from "../../lib/text-format.js";
@@ -33,7 +34,7 @@ function runMarkup(run) {
   return `<article class="schedule-run" data-run-id="${escapeHtml(run.id)}">
     <div class="schedule-run-heading"><strong>${scheduleTimeLabel(run.scheduledAt, timeZone)}</strong><span class="schedule-badge" data-state="${escapeHtml(run.status)}">${escapeHtml(run.status)}</span></div>
     <div class="schedule-run-meta">${run.trigger === "manual" ? "Manual run" : "Scheduled run"}${run.startedAt ? ` · Started ${scheduleTimeLabel(run.startedAt, timeZone)}` : ""}${run.finishedAt ? ` · Finished ${scheduleTimeLabel(run.finishedAt, timeZone)}` : ""}</div>
-    <dl class="schedule-run-settings">${fact("Model", run.modelProfileId)}${fact("Mode", run.agentMode)}${fact("Tool access", toolPermissionModeMeta(run.toolPermissionMode).label)}${fact("Time zone", run.timeZone)}${fact("Job revision", String(run.jobRevision ?? "—"))}</dl>
+    <dl class="schedule-run-settings">${fact("Model", run.modelProfileId)}${fact("Mode", displayReasoningMode(run.agentMode))}${fact("Tool access", toolPermissionModeMeta(run.toolPermissionMode).label)}${fact("Time zone", run.timeZone)}${fact("Job revision", String(run.jobRevision ?? "—"))}</dl>
     ${run.error ? `<p class="schedule-error" dir="auto">${escapeHtml(run.error)}</p>` : ""}
     ${run.resultText ? `<details class="schedule-result" data-disclosure-id="result:${escapeHtml(run.id)}"><summary>View result</summary><pre dir="auto">${escapeHtml(run.resultText)}</pre></details>` : ""}
     <details class="schedule-prompt-disclosure" data-disclosure-id="run:${escapeHtml(run.id)}"><summary>View invocation prompt</summary><pre dir="auto">${escapeHtml(run.prompt)}</pre></details>
@@ -67,7 +68,7 @@ export function renderScheduleDetails({ root, snapshot, actions }) {
   const conversationLabel = scheduleConversationLabel(job.sessionId, snapshot.sessions);
   const markup = `<div class="schedule-detail-heading"><span class="schedule-eyebrow">Scheduled task</span><h3 dir="auto">${escapeHtml(job.title)}</h3><span class="schedule-badge" data-state="${job.state}">${job.state}</span></div>
     <div class="schedule-action-row">${actionsMarkup(job, snapshot.mutation)}</div>
-    <dl class="schedule-facts">${fact("Schedule", scheduleDescription(job))}${fact("Next run", scheduleTimeLabel(job.nextRunAt, job.timeZone))}${fact("Time zone", job.timeZone)}${fact("Model", job.modelProfileId)}${fact("Mode", job.agentMode)}${fact("Tool access", toolPermissionModeMeta(job.toolPermissionMode).label)}${fact("Created", scheduleTimeLabel(job.createdAt, job.timeZone))}${fact("Updated", scheduleTimeLabel(job.updatedAt, job.timeZone))}</dl>
+    <dl class="schedule-facts">${fact("Schedule", scheduleDescription(job))}${fact("Next run", scheduleTimeLabel(job.nextRunAt, job.timeZone))}${fact("Time zone", job.timeZone)}${fact("Model", job.modelProfileId)}${fact("Mode", displayReasoningMode(job.agentMode))}${fact("Tool access", toolPermissionModeMeta(job.toolPermissionMode).label)}${fact("Created", scheduleTimeLabel(job.createdAt, job.timeZone))}${fact("Updated", scheduleTimeLabel(job.updatedAt, job.timeZone))}</dl>
     <button type="button" class="schedule-conversation-link" data-open-conversation>↗ <span dir="auto">${escapeHtml(conversationLabel)}</span></button>
     <details class="schedule-prompt-disclosure" data-disclosure-id="job:${escapeHtml(job.id)}"><summary>View task prompt</summary><pre dir="auto">${escapeHtml(job.prompt)}</pre></details>
     <small class="schedule-id">Job ${escapeHtml(job.id)} · Revision ${job.revision}</small>

package/dist/src/web-ui/app/components/spark-chat/panel.js

@@ -66,7 +66,7 @@ export function createSparkChatPanel({ documentRoot = document, launcherAnchor }
     placement.refresh();
     onToggle(value);
     if (!focus) return;
-    if (value) dom.messagesList.focus({ preventScroll: true });
+    if (value) dom.composerInput.focus({ preventScroll: true });
     else (previousFocus?.isConnected ? previousFocus : dom.launcherButton)?.focus({ preventScroll: true });
   }
 

package/dist/src/web-ui/app/components/spark-chat/settings.js

@@ -14,7 +14,7 @@ export function createSparkChatSettings({ root, onSave, onClear, onOpen, onReset
     </form>
     <div class="spark-settings-row">
       <label for="spark-agent-mode"><strong>Thinking mode</strong><span>Choose how deeply SPARK thinks before replying.</span></label>
-      <select id="spark-agent-mode" data-spark-agent-mode aria-label="SPARK thinking mode"><option value="fast">Fast</option><option value="reasoning" selected>Reasoning</option><option value="deep">Deep</option></select>
+      <select id="spark-agent-mode" data-spark-agent-mode aria-label="SPARK thinking mode"><option value="fast">Low</option><option value="reasoning" selected>Reasoning</option><option value="deep">Deep</option></select>
     </div>
     <div class="spark-settings-row"><div><strong>Chat shortcut</strong><p>Drag SPARK wherever feels right. Use Alt + arrow keys to move it.</p></div>
       <button type="button" data-spark-reset-position>Return to sidebar</button></div>

package/dist/src/web-ui/app/components/system-host/home-widget-permission-preview.js

@@ -0,0 +1,75 @@
+import { hostSetupIsReady } from "./rendering.js";
+import { hasNativePermissionSurface, permissionSummary } from "./macos-permission-rendering.js";
+import { canCheckMacPermissions, canCheckNativePermissions, permissionsMatchConnection, permissionsMatchNativeOwner } from "./macos-permission-scopes.js";
+
+function currentPermissionScopes(state) {
+  const snapshot = state.snapshot;
+  const scopes = [];
+  if (snapshot.identity?.os === "macos") {
+    scopes.push({
+      available: canCheckMacPermissions(snapshot),
+      current: permissionsMatchConnection(state.macPermissions, snapshot),
+      receipt: state.macPermissions,
+    });
+  }
+  if (hasNativePermissionSurface(snapshot)) {
+    const environmentId = snapshot.nativePermissions?.environmentId;
+    scopes.push({
+      available: canCheckNativePermissions(snapshot, environmentId),
+      current: permissionsMatchNativeOwner(state.nativeMacPermissions, snapshot, environmentId),
+      receipt: state.nativeMacPermissions,
+    });
+  }
+  return scopes;
+}
+
+function scopeRequiresPermission(scope) {
+  if (!scope.current) return false;
+  return permissionSummary(scope.receipt) === "action needed";
+}
+
+function scopeHasGrantedPermissions(scope) {
+  if (!scope.current) return false;
+  return permissionSummary(scope.receipt) === "granted";
+}
+
+function scopeCannotCheckPermissions(scope) {
+  return !scope.available;
+}
+
+function computerPermissionIndicator(state) {
+  const scopes = currentPermissionScopes(state);
+  if (scopes.some(scopeRequiresPermission))
+    return { icon: "failed", label: "Required", tone: "attention" };
+  if (!scopes.length)
+    return { icon: "neutral", label: "Unavailable", tone: "neutral" };
+  if (scopes.some(scopeCannotCheckPermissions))
+    return { icon: "paused", label: "Unavailable", tone: "neutral" };
+  if (scopes.every(scopeHasGrantedPermissions))
+    return { icon: "success", label: "Granted", tone: "success" };
+  return { icon: "unknown", label: "Not checked", tone: "neutral" };
+}
+
+function canPreviewConnectedComputer(state) {
+  if (state.snapshot?.connected !== true) return false;
+  if (!hostSetupIsReady(state.snapshot)) return false;
+  if (state.busy) return false;
+  if (state.downloaded) return false;
+  if (state.manualMac) return false;
+  return true;
+}
+
+/** Project current receipts without requesting permissions or changing connection state. */
+export function computerWidgetPreview(state, title, status) {
+  if (!canPreviewConnectedComputer(state)) return null;
+  const os = state.snapshot.identity?.os;
+  return {
+    kind: "computer",
+    title,
+    detail: { macos: "macOS", windows: "Windows", linux: "Linux" }[os] || os || "Unknown OS",
+    items: [
+      { label: "Connection", indicator: { icon: "success", label: status, tone: "success" } },
+      { label: "Permissions", indicator: computerPermissionIndicator(state) },
+    ],
+  };
+}

package/dist/src/web-ui/app/components/system-host/home-widget-summary.js

@@ -0,0 +1,93 @@
+import { connectionDescription, connectionStatus, connectionTitle, hostSetupIsReady } from "./rendering.js";
+import { isNativeWindowsLocalAccess, nativeWindowsAccessPresentation } from "./native-windows-access.js";
+import { computerWidgetPreview } from "./home-widget-permission-preview.js";
+import { macPermissionSummary, permissionSummary } from "./macos-permission-rendering.js";
+import { permissionsMatchConnection, permissionsMatchNativeOwner } from "./macos-permission-scopes.js";
+import { storeConnectionStage, storeConnectionDisplayContent, windowsStorePanelIsAvailable } from "./windows-store-setup.js";
+
+function currentMacPermissionStates(state) {
+  const snapshot = state.snapshot;
+  const states = [];
+  if (permissionsMatchConnection(state.macPermissions, snapshot))
+    states.push(permissionSummary(state.macPermissions));
+  if (permissionsMatchNativeOwner(state.nativeMacPermissions, snapshot, snapshot?.nativePermissions?.environmentId))
+    states.push(permissionSummary(state.nativeMacPermissions));
+  return states;
+}
+
+function hasComputerActionFailure(state) {
+  return Boolean(state.error || state.actionError || state.macPermissionError || state.nativeMacPermissionError);
+}
+
+function computerPermissionTone(state, permissionText) {
+  if (hasComputerActionFailure(state)) return "attention";
+  const status = connectionStatus(state.snapshot, state.statusUnavailable, state.busy);
+  if (["Paired · offline", "Update needed", "Computer access unavailable"].includes(status)) return "attention";
+  const states = currentMacPermissionStates(state);
+  if (states.includes("action needed")) return "attention";
+  // A connected Mac with unmeasured or unavailable permissions is not all-clear.
+  if (permissionText) return "neutral";
+  if (hostSetupIsReady(state.snapshot)) return "success";
+  return "neutral";
+}
+
+function windowsStoreTone(state, stage) {
+  if (hasComputerActionFailure(state)) return "attention";
+  if (state.busy) return "neutral";
+  const tones = { ready: "success", reconnect: "attention", expired: "attention", "confirm-repair": "attention", preparing: "active", repairing: "active", waiting: "active", open: "active" };
+  return tones[stage] || "neutral";
+}
+
+function nativeWindowsTone(state, status) {
+  if (hasComputerActionFailure(state)) return "attention";
+  if (status === "Check needed") return "attention";
+  return "neutral";
+}
+
+function windowsStoreSummary(state) {
+  const snapshot = state.snapshot;
+  const invitation = state.windowsStoreInvitation;
+  const stage = storeConnectionStage(snapshot, invitation, state.windowsStoreAttempt);
+  const content = storeConnectionDisplayContent(stage, snapshot, invitation, state.busy, state.statusUnavailable);
+  return {
+    title: snapshot.identity?.name || content.step,
+    detail: state.error || state.actionError || state.message || content.copy,
+    status: content.status,
+    tone: windowsStoreTone(state, stage),
+  };
+}
+
+/** Connection and process-bound permission receipts stay separate facts. */
+export function computerAccessWidgetSummary(state = {}, supported = true) {
+  const input = { ...state, supported };
+  if (!supported)
+    return { title: "Computer connection unavailable", detail: "Computer access setup requires the local Runtime backend.", status: "Unavailable", tone: "neutral" };
+  if (state.statusUnavailable)
+    return { title: "Check your computer connection", detail: "The current connection status could not be checked.", status: "Status unavailable", tone: "attention" };
+  if (!state.snapshot)
+    return { title: "Checking this computer…", detail: "", status: "Checking", tone: "neutral" };
+  if (isNativeWindowsLocalAccess(state.snapshot)) {
+    const presentation = nativeWindowsAccessPresentation(input);
+    return {
+      title: presentation.title,
+      detail: state.error || state.actionError || state.message || presentation.description,
+      status: presentation.status,
+      tone: nativeWindowsTone(state, presentation.status),
+    };
+  }
+  if (windowsStorePanelIsAvailable(state.snapshot)) return windowsStoreSummary(state);
+  const permissionText = macPermissionSummary(state.snapshot, state.macPermissions, state.nativeMacPermissions);
+  const title = state.snapshot.identity?.name || connectionTitle(input);
+  if (state.busy)
+    return { title, detail: "Waiting for the current connection status…", status: "Checking", tone: "neutral" };
+  const feedback = state.error || state.actionError || state.macPermissionError || state.nativeMacPermissionError || state.message;
+  const status = connectionStatus(state.snapshot, state.statusUnavailable, state.busy);
+  const preview = feedback ? null : computerWidgetPreview(state, title, status);
+  return {
+    title,
+    detail: feedback || permissionText || connectionDescription(input),
+    status,
+    tone: computerPermissionTone(state, permissionText),
+    ...(preview ? { preview } : {}),
+  };
+}

package/dist/src/web-ui/app/components/system-host/macos-permission-rendering.js

@@ -1,12 +1,12 @@
 import { escapeHtml } from "../../lib/text-format.js";
 import { canCheckMacPermissions, canCheckNativePermissions, permissionsMatchConnection, permissionsMatchNativeOwner } from "./macos-permission-scopes.js";
 
-function hasNativePermissionSurface(snapshot) {
+export function hasNativePermissionSurface(snapshot) {
   if (snapshot?.identity?.os === "macos") return true;
   if (!snapshot?.nativePermissions) return false;
   return snapshot.nativePermissions.reason !== "native_macos_unavailable";
 }
-function permissionSummary(receipt) {
+export function permissionSummary(receipt) {
   if (!receipt) return "not checked";
   if (receipt.permissions.screenRecording !== "granted") return "action needed";
   if (receipt.permissions.accessibility !== "granted") return "action needed";

package/dist/src/web-ui/app/components/system-host/native-windows-access.js

@@ -11,7 +11,7 @@ export function shouldRenderNativeWindowsAccess(input) {
   return isNativeWindowsLocalAccess(input.snapshot);
 }
 
-function nativeWindowsAccessPresentation(input) {
+export function nativeWindowsAccessPresentation(input) {
   if (input.statusUnavailable) return {
     title: "Check Windows access", status: "Status unavailable",
     description: "The current local access status could not be checked. Refresh to try again.",

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

@@ -23,7 +23,7 @@ function pairedCompanionIsOffline(snapshot) {
 function hasDirectAccess(snapshot) {
   return ["native", "wsl_interop"].includes(snapshot?.readiness?.route);
 }
-function connectionStatus(snapshot, statusUnavailable, busy) {
+export function connectionStatus(snapshot, statusUnavailable, busy) {
   if (statusUnavailable) return "Status unavailable";
   if (busy || !snapshot) return "Checking";
   if (hostSetupIsReady(snapshot)) return snapshot.identity?.os === "macos" ? "Connected" : "Ready";
@@ -42,7 +42,7 @@ function readyDescription(snapshot) {
     return "Direct commands are available. No extra installation is needed for direct commands.";
   return "You can use computer tools from your ABot chat. Permissions and Spark collection are managed separately.";
 }
-function connectionTitle({ snapshot, supported, statusUnavailable, busy }) {
+export function connectionTitle({ snapshot, supported, statusUnavailable, busy }) {
   if (!supported) return "Computer connection unavailable";
   if (statusUnavailable) return "Check your computer connection";
   if (busy || !snapshot) return "Checking this computer…";
@@ -55,7 +55,7 @@ function connectionTitle({ snapshot, supported, statusUnavailable, busy }) {
   if (platforms.length === 1 && platforms[0] === "linux") return "Connect your Linux computer";
   return "Connect your computer";
 }
-function connectionDescription({ snapshot, supported, statusUnavailable, busy }) {
+export function connectionDescription({ snapshot, supported, statusUnavailable, busy }) {
   if (!supported) return "Computer access setup requires the local Runtime backend.";
   if (statusUnavailable) return "The current connection status could not be checked. Refresh to try again.";
   if (busy || !snapshot) return "Waiting for the current connection status…";

package/dist/src/web-ui/app/components/system-host/windows-store-setup.js

@@ -41,7 +41,7 @@ function storeRepairConfirmationIsCurrent(snapshot, attempt) {
   return attempt?.phase === "confirm-repair";
 }
 
-function storeConnectionStage(snapshot, invitation, attempt) {
+export function storeConnectionStage(snapshot, invitation, attempt) {
   if (snapshot?.readiness?.ready === true) return "ready";
   if (attempt?.phase === "repairing") return "repairing";
   if (storeRepairConfirmationIsCurrent(snapshot, attempt)) return "confirm-repair";
@@ -111,7 +111,7 @@ function connectionStageContent(stage, snapshot, invitation, disabled) {
   };
 }
 
-function storeConnectionDisplayContent(stage, snapshot, invitation, disabled, statusUnavailable) {
+export function storeConnectionDisplayContent(stage, snapshot, invitation, disabled, statusUnavailable) {
   if (statusUnavailable) return {
     status: "Status unavailable", step: "Check your computer connection",
     copy: "The current connection status could not be checked. Refresh to try again.",

package/dist/src/web-ui/app/computer-access-feature.js

@@ -1,5 +1,6 @@
 import { createSystemHostConnectionManager } from "./components/system-host/manager.js";
 import { createSystemHostSetupNotice } from "./components/system-host/setup-notice.js";
+import { computerAccessWidgetSummary } from "./components/system-host/home-widget-summary.js";
 
 /** One connection owner for configured Home and its shared chat notice. */
 export function createComputerAccessFeature({
@@ -7,11 +8,13 @@ export function createComputerAccessFeature({
   runtimeClient,
   getEnvironmentId = () => "",
   isComputerAccessAvailable = () => true,
+  compactHomeWidgets,
   onChange = () => {},
 }) {
   const documentRoot = dom.homeDashboardRoot?.ownerDocument;
   const root = documentRoot?.createElement("section");
   let notice;
+  let unregisterWidget = () => {};
   const connection = createSystemHostConnectionManager({
     documentRoot,
     compact: true,
@@ -27,6 +30,7 @@ export function createComputerAccessFeature({
     supportsConnection: () => runtimeClient.supportsSystemHostConnection(),
     onChange: () => {
       notice?.render();
+      compactHomeWidgets?.refresh();
       onChange();
     },
   });
@@ -35,7 +39,7 @@ export function createComputerAccessFeature({
     if (!isComputerAccessAvailable()) return false;
     dom.homeWorkspaceButton?.click();
     if (dom.homeWorkspacePanel?.hidden !== false || !root) return false;
-    connection.openManagement();
+    if (!compactHomeWidgets?.open("computer")) connection.openManagement();
     root.scrollIntoView?.({ block: "start", behavior: "smooth" });
     root.focus({ preventScroll: true });
     return true;
@@ -45,6 +49,7 @@ export function createComputerAccessFeature({
     const ready = isComputerAccessAvailable();
     if (root) root.hidden = !ready;
     connection.setActive(ready);
+    compactHomeWidgets?.refresh();
     notice?.render();
   }
 
@@ -71,6 +76,12 @@ export function createComputerAccessFeature({
       dom.homeDashboardRoot,
     );
     connection.mount(root);
+    unregisterWidget = compactHomeWidgets?.register({
+      id: "computer", label: "Computer access", icon: "computer", element: root,
+      isAvailable: isComputerAccessAvailable,
+      getSummary: () => computerAccessWidgetSummary(connection.state, runtimeClient.supportsSystemHostConnection()),
+      onOpen: connection.openManagement,
+    }) || unregisterWidget;
     runtimeAvailabilityChanged();
   }
   dom.environmentSelect?.addEventListener("change", connection.environmentChanged);
@@ -80,6 +91,7 @@ export function createComputerAccessFeature({
     open,
     runtimeAvailabilityChanged,
     dispose() {
+      unregisterWidget();
       dom.environmentSelect?.removeEventListener("change", connection.environmentChanged);
       notice.dispose();
       connection.dispose();

package/dist/src/web-ui/app/configuration-feature.js

@@ -22,6 +22,7 @@ export function createConfigurationFeature({
   getLearningSnapshot = () => null,
   isRuntimeReady = () => true,
   isComputerAccessAvailable = () => true,
+  compactHomeWidgets,
 }) {
   let configWorkspace;
   let activation;
@@ -107,6 +108,7 @@ export function createConfigurationFeature({
   let homeSetupSuggestion;
   const computerAccess = createComputerAccessFeature({
     dom,
+    compactHomeWidgets,
     runtimeClient,
     getEnvironmentId: selectedEnvironmentId,
     isComputerAccessAvailable,

package/dist/src/web-ui/app/controllers/operations-controller.js

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../lib/reasoning-controls.js";
 import { escapeHtml, formatTime, shortId, textOf } from "../lib/text-format.js";
 import { formatDurationMs, latestHealthEvent, projectOperationsSummary } from "../components/operations-summary.js";
 
@@ -112,7 +113,7 @@ export function createOperationsController({ dom, client, getEnvironmentId = ()
         const latest = latestHealthEvent(details);
         const rows = [
           ["Status", payload.ok ? "Healthy" : "Unhealthy"],
-          ["Runtime mode", payload.agentMode || "-"],
+          ["Runtime mode", displayReasoningMode(payload.agentMode) || "-"],
           ["Active streams", payload.activeStreamingRequests ?? details.length],
           [
             "Latest event",

package/dist/src/web-ui/app/controllers/reasoning-mode-controller.js

@@ -12,7 +12,7 @@ export function normalizeAgentMode(mode) {
 function agentModeMeta(mode) {
   const modes = {
     auto: { label: "Auto", description: "Lets the agent choose", icon: "*" },
-    fast: { label: "Fast", description: "Shorter and quicker", icon: "!" },
+    fast: { label: "Low", description: "Shorter and quicker", icon: "!" },
     deep: {
       label: "Deep analysis",
       description: "More careful responses",

package/dist/src/web-ui/app/dashboard-feature.js

@@ -75,6 +75,15 @@ export function createDashboardFeature({
   document.addEventListener("visibilitychange", controller.visibilityChanged);
   return {
     ...controller,
+    compactWidgets: view.compactWidgets,
+    setActive(value) {
+      view.compactWidgets.setWorkspace(value ? "home" : "other");
+      controller.setActive(value);
+    },
+    environmentChanged() {
+      view.compactWidgets.close({ restoreFocus: false });
+      controller.environmentChanged();
+    },
     composerHost: view.composerHost,
     setupHost: view.setupHost,
   };

package/dist/src/web-ui/app/lib/reasoning-controls.js

@@ -1,5 +1,10 @@
 import { escapeHtml } from "./text-format.js";
 
+export function displayReasoningMode(mode) {
+  if (mode === "fast") return "Low";
+  return mode;
+}
+
 export function canChooseReasoning(profile) {
   return profile?.supportsThinking === true;
 }
@@ -7,7 +12,7 @@ export function canChooseReasoning(profile) {
 /** Keep the stored mode for compatibility while showing the effective provider default. */
 export function reasoningModeOptions(mode, enabled, modes = ["fast", "reasoning", "deep"]) {
   if (!enabled) return `<option value="${escapeHtml(mode || "reasoning")}">Provider default</option>`;
-  const labels = { fast: "Fast", reasoning: "Reasoning", deep: "Deep", auto: "Auto" };
+  const labels = { fast: "Low", reasoning: "Reasoning", deep: "Deep", auto: "Auto" };
   return modes.map((value) => `<option value="${escapeHtml(value)}"${value === mode ? " selected" : ""}>${escapeHtml(labels[value] || value)}</option>`).join("");
 }
 

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

@@ -77,8 +77,8 @@ export function createPassiveLearningFeature({
       macConsent.cancel();
       controller.environmentChanged();
     },
-    mountHome: (root) => {
-      home.mount(root);
+    mountHome: (root, onRendered) => {
+      home.mount(root, onRendered);
       home.render(controller.snapshot());
     },
   });