@abot-ai/runtime 1.5.0 → 1.6.0

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",
 });
 

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

@@ -3,10 +3,6 @@ import { isObservationReviewActive, observationReviewSummary } from "./processin
 
 const failures = new Set(["failed", "unavailable", "disconnected", "permission_required"]);
 
-export function latestVisibleProposal(status) {
-  return [...(status?.proactive?.proposals ?? [])].reverse().find((item) => item.status === "delivered");
-}
-
 function isReviewing(status) {
   if (isObservationReviewActive(status)) return true;
   if (status.reassessment?.state === "reviewing") return true;
@@ -42,7 +38,6 @@ export function coWorkerAgentState(snapshot) {
   if (!status) return { mode: "quiet", label: "Connecting", title: "ABot Spark", description: "Checking the current activity…" };
   if (snapshot.statusError) return { mode: "attention", label: "Connection interrupted", title: "Waiting to reconnect.", description: "The last known activity is shown below. Refresh to check the connection." };
   if (isReviewing(status)) return { mode: "reviewing", label: "Working now", title: "Finding what matters.", description: status.proactive?.state === "reviewing" ? "Considering whether there’s something useful to offer you." : "Reviewing activity and refining what’s worth remembering." };
-  if (latestVisibleProposal(status)) return { mode: "suggestion", label: "Something to share", title: "A thought for your next step.", description: "A conversation is ready. Read it when it suits you." };
   if (hasActivityFailure(status)) return { mode: "attention", label: "Needs attention",
     title: (status.processingReason || status.reason) === "learning_model_request_failed" ? "Let’s check the learning model." : "One activity needs attention.",
     description: hasLearningProcessingFailure(status) ? "Learning could not finish its review. Check learning settings; saved knowledge is still here." : "Your saved knowledge is still here. Check the activity details below." };

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

@@ -1,7 +1,7 @@
 import { coWorkerActivityStates, coWorkerActivityTones, coWorkerAgentState } from "./agent-state.js";
 import { isObservationReviewActive } from "./processing-state.js";
 
-const glyph = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c0 6-3 9-9 9 6 0 9 3 9 9 0-6 3-9 9-9-6 0-9-3-9-9Z"/><path d="M18 3v4m-2-2h4"/></svg>`;
+const glyph = '<img src="/spark-mascot.svg" alt="" width="38" height="38" />';
 
 export function agentMarkup({ compact = false, actionMarkup = "" } = {}) {
   return `<section class="co-worker-agent${compact ? " co-worker-agent-compact" : ""}" data-coworker-agent data-agent-mode="quiet" data-motion="off" aria-label="ABot Spark activity">

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

@@ -1,7 +1,6 @@
 import { hostSetupIsReady } from "../system-host/rendering.js";
 import { agentMarkup, renderAgent } from "./agent-view.js";
 import { createAgentMotion } from "./agent-motion.js";
-import { renderLearningProposals, handleProposalClick } from "./proposal-view.js";
 import { learningFailurePresentation } from "./presentation.js";
 import { homeActivityStartPatch, readActivityPermissions } from "./activity-controls.js";
 import { computerUpdateNoticeMarkup, renderComputerUpdateNotice } from "./computer-update-notice.js";
@@ -51,7 +50,6 @@ export function createPassiveLearningHome({
       compact: true,
       actionMarkup: '<button type="button" class="home-text-button" data-learning-open>Open ABot Spark</button>',
     })}</div>
-    <div class="co-worker-proposals" data-learning-proposals></div>
     <p class="home-learning-status" data-learning-status hidden></p>`;
     root.addEventListener("click", handleClick);
     motion = createAgentMotion(root);
@@ -64,7 +62,6 @@ export function createPassiveLearningHome({
       openComputerAccess();
       return;
     }
-    if (handleProposalClick(root, event, actions)) return;
     const button = event.target.closest("[data-learning-open]");
     if (!button || !root.contains(button) || button.disabled) return;
     const snapshot = actions?.snapshot?.() ?? renderedSnapshot;
@@ -86,7 +83,6 @@ export function createPassiveLearningHome({
     renderComputerUpdateNotice(root, snapshot);
     renderMacCollectionRestartNotice(root, snapshot);
     renderAgent(root, snapshot);
-    renderLearningProposals(root, snapshot, { limit: 1 });
     motion?.update(snapshot);
     root.hidden = false;
     const action = root.querySelector("[data-learning-open]");

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

@@ -10,7 +10,6 @@ import { handleActivityControlClick, renderActivityControls } from "./activity-c
 import { createLearningApplications } from "./applications-view.js";
 import { renderResourceUsage } from "./usage-view.js";
 import { renderLearningKnowledge, handleKnowledgeClick } from "./knowledge-view.js";
-import { renderLearningProposals, handleProposalClick } from "./proposal-view.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 import { learningBatchStatusLabel, renderLearningBatchDetail } from "./batch-detail.js";
 import { learningWorkspaceMarkup, navigateLearningTabs, selectLearningView } from "./workspace-view.js";
@@ -78,7 +77,6 @@ export function createPassiveLearningMemory({
     if (handleActivityControlClick(root, event, actions, () => selectLearningView(root, "settings"))) return;
     if (handleMacCollectionRestartClick(root, event, actions)) return;
     if (handleKnowledgeClick(root, event)) return;
-    if (handleProposalClick(root, event, actions)) return;
     if (event.target.closest("[data-learning-open-settings]")) {
       selectLearningView(root, "settings", true);
       return;
@@ -222,7 +220,6 @@ export function createPassiveLearningMemory({
     renderBatches(snapshot);
     renderBatchDetail(snapshot);
     renderLearningKnowledge(root, snapshot);
-    renderLearningProposals(root, snapshot);
     renderResourceUsage(root, snapshot);
   }
 

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

@@ -47,9 +47,9 @@ export function learningSettingsMarkup(timeZone = "UTC") {
         <p class="co-worker-setting-note">Runs only when there is eligible work. Pausing keeps pending observations within their retention limit.</p>
       </section>
       <section class="co-worker-settings-card" data-learning-settings-axis="proactive">
-        <h4>Proactive mode</h4><p>Start a conversation when there is something useful to offer.</p>
+        <h4>Proactive mode</h4><p>Send a message in SPARK chat when there is something useful to offer.</p>
         ${toggle("proactiveEnabled", "Allow proactive mode", "proactive-enabled")}
-        ${field("proactiveModelProfileId", "Proactive model", { type: "select", legacy: "proactive-model" })}
+        ${field("proactiveModelProfileId", "Chat and proactive model", { type: "select", legacy: "proactive-model" })}
         ${field("proactiveIntervalMinutes", "Check interval (minutes)", { value: 60, max: 1440, legacy: "proactive-interval" })}
         ${windowFields("proactive", timeZone)}
         <p class="co-worker-setting-note">Can use existing knowledge while collection is off. Messages only; actions need your approval.</p>

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

@@ -6,8 +6,8 @@ import { learningApplicationsMarkup } from "./applications-view.js";
 import { computerUpdateNoticeMarkup } from "./computer-update-notice.js";
 import { macCollectionRestartNoticeMarkup } from "./macos-collection-restart-notice.js";
 
-const sections = ["insights", "activity", "applications", "settings", "usage"];
-const labels = { insights: "Knowledge", activity: "Activity", applications: "Applications", settings: "Settings", usage: "Resources" };
+const sections = ["insights", "activity", "applications", "chat", "settings", "usage"];
+const labels = { insights: "Knowledge", activity: "Activity", applications: "Applications", chat: "Chat", settings: "Settings", usage: "Resources" };
 
 export function learningWorkspaceMarkup(timeZone) {
   const tabs = sections.map((key, index) => `<button type="button" role="tab" id="learning-${key}-tab" data-learning-tab="${key}" aria-controls="learning-${key}-panel" aria-selected="${index === 0}" tabindex="${index === 0 ? "0" : "-1"}">${labels[key]}</button>`).join("");
@@ -21,7 +21,6 @@ export function learningWorkspaceMarkup(timeZone) {
     </div>
     <div class="passive-learning-attention" data-learning-attention role="status" hidden><p data-learning-attention-text></p><button type="button" data-learning-open-setup hidden>Connect computer</button></div>
     <p class="passive-learning-feedback" data-learning-feedback role="status" aria-live="polite"></p>
-    <div class="co-worker-proposals" data-learning-proposals></div>
     <div class="passive-learning-tabs" role="tablist" aria-label="ABot Spark views">${tabs}</div>
     <section class="passive-learning-panel" id="learning-insights-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-insights-tab" data-learning-panel="insights">${learningKnowledgeMarkup()}</section>
     <section class="passive-learning-panel" id="learning-activity-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-activity-tab" data-learning-panel="activity" hidden>
@@ -34,6 +33,7 @@ export function learningWorkspaceMarkup(timeZone) {
       <div class="passive-learning-review-layout"><div class="passive-learning-detail" data-learning-detail hidden></div><section class="passive-learning-review-list" aria-label="Recent reviews"><h5>Recent reviews</h5><div class="passive-learning-batches" data-learning-batches></div></section></div>
     </section>
     <section class="passive-learning-panel" id="learning-applications-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-applications-tab" data-learning-panel="applications" hidden>${learningApplicationsMarkup()}</section>
+    <section class="passive-learning-panel" id="learning-chat-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-chat-tab" data-learning-panel="chat" hidden></section>
     <section class="passive-learning-panel" id="learning-settings-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-settings-tab" data-learning-panel="settings" hidden>
       ${learningSettingsMarkup(timeZone)}
       <details class="passive-learning-setup" data-learning-setup><summary>Computer connection</summary>

package/dist/src/web-ui/app/components/runtime-setup/optional-steps.js

@@ -16,6 +16,7 @@ export function createSetupOptionalSteps({
   loadHostConnection,
   connectLocalHost,
   createHostPairing,
+  requestHostPermissions,
   downloadHostSetup,
   revokeHostConnection,
   onChange,
@@ -29,7 +30,10 @@ export function createSetupOptionalSteps({
     discoverModels: discoverEmbeddingModels,
     saveEmbedding,
     onChange,
-    onComplete: () => goToStep(3),
+    onComplete: () => {
+      plugins.reset();
+      goToStep(3);
+    },
   });
   const plugins = createSetupPluginStep({
     container,
@@ -40,9 +44,11 @@ export function createSetupOptionalSteps({
   });
   const computer = loadHostConnection
     ? createSystemHostConnectionManager({
+        getEnvironmentId,
         loadConnection: loadHostConnection,
         connectLocal: connectLocalHost,
         createPairing: createHostPairing,
+        requestPermissions: requestHostPermissions,
         downloadSetup: downloadHostSetup,
         revokeConnection: revokeHostConnection,
         onChange,

package/dist/src/web-ui/app/components/runtime-setup-guide.d.ts

@@ -73,6 +73,7 @@ export interface RuntimeSetupGuideDependencies {
   readonly loadHostConnection?: () => Promise<Record<string, unknown>>;
   readonly connectLocalHost?: () => Promise<Record<string, unknown>>;
   readonly createHostPairing?: () => Promise<Record<string, unknown>>;
+  readonly requestHostPermissions?: (input: Record<string, unknown>) => Promise<Record<string, unknown>>;
   readonly downloadHostSetup?: (
     platform: "windows" | "macos" | "linux",
   ) => Promise<Record<string, unknown>>;
@@ -94,7 +95,10 @@ export declare function buildRuntimeSetupCommands(
 export declare function createRuntimeSetupGuide(
   options: RuntimeSetupGuideDependencies,
 ): {
-  bind(options?: { onCheckAgain?: () => void | Promise<void> }): void;
+  bind(options?: {
+    onCheckAgain?: () => void | Promise<void>;
+    onApplied?: () => void | Promise<void>;
+  }): void;
   clearSecret(): void;
   dispose(): void;
   focusAction(): void;

package/dist/src/web-ui/app/components/runtime-setup-guide.js

@@ -48,6 +48,7 @@ export function createRuntimeSetupGuide({
   loadHostConnection,
   connectLocalHost,
   createHostPairing,
+  requestHostPermissions,
   downloadHostSetup,
   revokeHostConnection,
   getEnvironmentId = () => "",
@@ -76,11 +77,12 @@ export function createRuntimeSetupGuide({
   let revision = 0;
   let bound = false;
   let onCheckAgain = () => {};
+  let onApplied = () => {};
   const viewState = createSetupViewState(container);
   const optionalSteps = createSetupOptionalSteps({
     container, getEnvironmentId, getPreferredProvider: () => state.provider,
     loadEmbeddingStatus, discoverEmbeddingModels, saveEmbedding, loadPlugins,
-    setPlugin, loadHostConnection, connectLocalHost, createHostPairing, downloadHostSetup, revokeHostConnection,
+    setPlugin, loadHostConnection, connectLocalHost, createHostPairing, requestHostPermissions, downloadHostSetup, revokeHostConnection,
     onChange: paint, goToStep,
   });
   const { embedding, plugins, readyStep } = optionalSteps;
@@ -277,7 +279,7 @@ export function createRuntimeSetupGuide({
       state.step = readyStep;
       if (state.activation.status === "ready") {
         activated = true;
-        await onCheckAgain();
+        await onApplied();
       }
     } catch {
       if (!operationIsCurrent(operationRevision, operationEnvironment)) return;
@@ -428,8 +430,9 @@ export function createRuntimeSetupGuide({
       ?.focus?.({ preventScroll: true });
   }
 
-  function bind({ onCheckAgain: checkAgain = () => {} } = {}) {
+  function bind({ onCheckAgain: checkAgain = () => {}, onApplied: applied = checkAgain } = {}) {
     onCheckAgain = checkAgain;
+    onApplied = applied;
     if (bound) return;
     bound = true;
     container.addEventListener("submit", submit);

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

@@ -3,6 +3,7 @@ import { updateLiveRegion } from "../../lib/live-region.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { scheduleTimeLabel } from "../../lib/schedule-message.js";
 import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
+import { scheduleConversationLabel } from "../../lib/schedule-conversation-presentation.js";
 import {
   canManageSchedule,
   canRunScheduleNow,
@@ -63,11 +64,11 @@ export function renderScheduleDetails({ root, snapshot, actions }) {
     return;
   }
   root.classList.remove("schedule-details-placeholder");
-  const session = snapshot.sessions.find((item) => item.id === job.sessionId);
+  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>
-    <button type="button" class="schedule-conversation-link" data-open-conversation>↗ <span dir="auto">${escapeHtml(session?.title || job.sessionId)}</span></button>
+    <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>
     <section class="schedule-history"><div class="schedule-section-heading"><h3>Run history</h3><span>${snapshot.runs.length} runs on this page</span></div>

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

@@ -1,6 +1,7 @@
 import { escapeHtml } from "../../lib/text-format.js";
 import { SCHEDULE_WEEKDAYS } from "../../lib/schedule-presentation.js";
 import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
+import { scheduleConversationOptions } from "../../lib/schedule-conversation-presentation.js";
 
 function deviceDateTime(instant) {
   if (!instant) return "";
@@ -61,10 +62,9 @@ export function createScheduleForm({
   form.className = "schedule-editor";
   const values = job || initialValues || {};
   const createsConversation = !job && values.newConversation === true;
-  const sessionOptions = sessions.map((session) => ({
-    value: session.id,
-    label: session.title || session.id,
-  }));
+  const sessionOptions = scheduleConversationOptions(
+    sessions, createsConversation ? null : values.sessionId || currentSessionId,
+  );
   const modelOptions = models.map((model) => ({
     value: model.id,
     label: model.label || model.name || model.id,

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

@@ -0,0 +1,45 @@
+export function isSparkModelUnavailable(configuration) {
+  if (!configuration?.sessionId) return false;
+  if (!configuration.modelProfileId) return true;
+  return configuration.modelAvailable === false;
+}
+
+function presentation(configuration) {
+  if (!configuration?.sessionId) return { title: "SPARK", copy: "Loading your conversation…" };
+  if (isSparkModelUnavailable(configuration)) return {
+    title: "Choose a model for SPARK",
+    copy: configuration.modelProfileId
+      ? "The model selected for SPARK is no longer available. Choose a model under Proactive mode in SPARK settings."
+      : "Before we can chat, choose a model under Proactive mode in SPARK settings.",
+    needsModel: true,
+  };
+  return { title: "Hey, I’m SPARK 👋", copy: "What’s on your mind?" };
+}
+
+/** Keep setup guidance local to the companion's otherwise ordinary empty view. */
+export function createSparkChatEmptyState({ getConfiguration, onOpenModelSettings }) {
+  return {
+    render(container) {
+      const documentRoot = container.ownerDocument;
+      const model = presentation(getConfiguration());
+      const empty = documentRoot.createElement("div");
+      empty.className = "empty-state chat-empty-state";
+      const title = documentRoot.createElement("div");
+      title.className = "mode-empty-title";
+      title.textContent = model.title;
+      const copy = documentRoot.createElement("div");
+      copy.className = "mode-empty-copy";
+      copy.textContent = model.copy;
+      empty.append(title);
+      empty.append(copy);
+      if (model.needsModel) {
+        const action = documentRoot.createElement("button");
+        action.setAttribute("type", "button");
+        action.textContent = "Choose model";
+        action.addEventListener("click", onOpenModelSettings);
+        empty.append(action);
+      }
+      container.append(empty);
+    },
+  };
+}

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

@@ -0,0 +1,59 @@
+function isPersistedInitiative(message) {
+  if (message.role !== "assistant" || message.streaming) return false;
+  if (message.persistedMessageId == null) return false;
+  return Boolean(message.sparkProposalId);
+}
+
+function sameSourceMessage(current, source) {
+  if (current.persistedMessageId !== source.persistedMessageId) return false;
+  if (current.createdAt !== source.createdAt) return false;
+  return current.requestId === source.requestId;
+}
+
+export function createSparkHandoffActions({
+  getScope, getMessages, client, captureNavigation, onOpened, onChange = () => {},
+  notify, documentRoot = document,
+}) {
+  const pending = new Set();
+  function createNode(message) {
+    if (!isPersistedInitiative(message)) return null;
+    const scope = getScope();
+    const identity = JSON.stringify([scope, message.persistedMessageId, message.createdAt, message.requestId]);
+    const row = documentRoot.createElement("div");
+    row.className = "spark-handoff-actions";
+    const button = documentRoot.createElement("button");
+    button.type = "button";
+    button.className = "spark-handoff-button";
+    button.textContent = "Open a session about this";
+    button.disabled = !message.sparkHandoffAvailable || pending.has(identity);
+    row.appendChild(button);
+    if (!message.sparkHandoffAvailable) {
+      const explanation = documentRoot.createElement("p");
+      explanation.textContent = "The context for this older suggestion wasn’t saved.";
+      row.appendChild(explanation);
+    }
+    function sourceIsCurrent() {
+      const current = getScope();
+      if (current.environmentId !== scope.environmentId) return false;
+      if (current.sessionId !== scope.sessionId || current.viewVersion !== scope.viewVersion) return false;
+      return getMessages().some((candidate) => sameSourceMessage(candidate, message));
+    }
+    async function open() {
+      if (button.disabled || pending.has(identity) || !sourceIsCurrent()) return;
+      const navigate = captureNavigation();
+      pending.add(identity); button.disabled = true;
+      try {
+        const result = await client.createSparkHandoffSession({ message: {
+          id: message.persistedMessageId, createdAt: message.createdAt, requestId: message.requestId || null,
+        } }, scope.environmentId);
+        if (!sourceIsCurrent()) return;
+        if (await navigate(result.sessionId)) onOpened();
+      } catch (error) {
+        if (sourceIsCurrent()) notify(error.message || "Could not open a session for this suggestion.", "failed");
+      } finally { pending.delete(identity); if (sourceIsCurrent()) onChange(); }
+    }
+    button.addEventListener("click", () => void open());
+    return row;
+  }
+  return { createNode };
+}

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

@@ -0,0 +1,27 @@
+import { buildConversationStatus } from "../../lib/conversation-status-model.js";
+
+function isStreamingSparkAssistant(message, requestId) {
+  if (message.role !== "assistant") return false;
+  if (message.requestId !== requestId) return false;
+  return message.streaming === true;
+}
+
+/** Both mascot locations project the conversation's existing activity state. */
+export function createSparkMascotActivity({ state, dom, isConnected }) {
+  function render() {
+    const requestId = state.activeRequestId;
+    const model = buildConversationStatus({
+      requestId,
+      streaming: state.messages.some((message) => isStreamingSparkAssistant(message, requestId)),
+      connected: isConnected(),
+      events: state.events,
+      contextWindow: state.contextWindowByRequest.get(requestId),
+    });
+    const working = model?.animate === true;
+    for (const mascot of [dom.launcherButton, dom.mascotButton]) {
+      mascot.classList.toggle("spark-is-working", working);
+      mascot.setAttribute("aria-description", working ? "SPARK is working." : "");
+    }
+  }
+  return { render };
+}

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

@@ -0,0 +1,52 @@
+const settleDuration = 180;
+const maximumSettleDistance = 8;
+
+function readLayoutPosition(node) {
+  return { left: Number.parseFloat(node.style.left), top: Number.parseFloat(node.style.top) };
+}
+
+function canAnimateSettlement(node, before, after) {
+  if (node.hidden || typeof node.animate !== "function") return false;
+  const distanceX = Math.abs(after.left - before.left);
+  const distanceY = Math.abs(after.top - before.top);
+  if (!Number.isFinite(distanceX) || !Number.isFinite(distanceY)) return false;
+  if (distanceX > maximumSettleDistance || distanceY > maximumSettleDistance) return false;
+  return distanceX > 0 || distanceY > 0;
+}
+
+/** Decorative release motion never owns the final layout or saved coordinates. */
+export function createSparkPlacementMotion(windowRoot) {
+  const reducedMotion = windowRoot.matchMedia?.("(prefers-reduced-motion: reduce)");
+  const animations = new Set();
+
+  function cancel() {
+    for (const animation of animations) animation.cancel();
+    animations.clear();
+  }
+
+  function animateNode(node, before) {
+    const after = readLayoutPosition(node);
+    if (!canAnimateSettlement(node, before, after)) return;
+    const animation = node.animate([
+      { left: `${before.left}px`, top: `${before.top}px` },
+      { left: `${after.left}px`, top: `${after.top}px` },
+    ], { duration: settleDuration, easing: "cubic-bezier(.2,.8,.2,1)" });
+    animations.add(animation);
+    animation.onfinish = () => { animations.delete(animation); animation.cancel(); };
+  }
+
+  function settle(captured) {
+    cancel();
+    if (reducedMotion?.matches) return;
+    for (const { node, position } of captured) animateNode(node, position);
+  }
+
+  function onPreferenceChange() { if (reducedMotion?.matches) cancel(); }
+  reducedMotion?.addEventListener?.("change", onPreferenceChange);
+
+  return {
+    capture: (nodes) => nodes.filter((node) => !node.hidden).map((node) => ({ node, position: readLayoutPosition(node) })),
+    settle, cancel,
+    destroy() { cancel(); reducedMotion?.removeEventListener?.("change", onPreferenceChange); },
+  };
+}