@abot-ai/runtime 1.4.0 → 1.6.0

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

@@ -71,8 +71,11 @@ export interface RuntimeSetupGuideDependencies {
   }) => Promise<Record<string, unknown>>;
   readonly getEnvironmentId?: () => string;
   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",
+    platform: "windows" | "macos" | "linux",
   ) => Promise<Record<string, unknown>>;
   readonly revokeHostConnection?: () => Promise<Record<string, unknown>>;
   readonly openConfiguration?: () => void;
@@ -92,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

@@ -46,6 +46,9 @@ export function createRuntimeSetupGuide({
   loadPlugins,
   setPlugin,
   loadHostConnection,
+  connectLocalHost,
+  createHostPairing,
+  requestHostPermissions,
   downloadHostSetup,
   revokeHostConnection,
   getEnvironmentId = () => "",
@@ -74,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, downloadHostSetup, revokeHostConnection,
+    setPlugin, loadHostConnection, connectLocalHost, createHostPairing, requestHostPermissions, downloadHostSetup, revokeHostConnection,
     onChange: paint, goToStep,
   });
   const { embedding, plugins, readyStep } = optionalSteps;
@@ -275,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;
@@ -426,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

@@ -1,6 +1,9 @@
+import { toolPermissionModeMeta } from "../../lib/tool-permission-mode.js";
+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,
@@ -30,7 +33,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("Time zone", run.timeZone)}${fact("Job revision", String(run.jobRevision ?? "—"))}</dl>
+    <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>
     ${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>
@@ -54,15 +57,18 @@ export function renderScheduleDetails({ root, snapshot, actions }) {
   const job = snapshot.jobs.find((item) => item.id === snapshot.selectedId);
   if (!job) {
     root.classList.add("schedule-details-placeholder");
-    root.innerHTML = `<div class="schedule-detail-empty"><span aria-hidden="true">◷</span><h3>${snapshot.selectedId ? "Schedule unavailable" : "Select a schedule"}</h3><p>${snapshot.selectedId ? "This schedule may have been removed with its conversation." : "See when it runs, manage its settings and follow its results here."}</p></div>`;
+    updateLiveRegion(
+      root,
+      `<div class="schedule-detail-empty"><span aria-hidden="true">◷</span><h3>${snapshot.selectedId ? "Schedule unavailable" : "Select a schedule"}</h3><p>${snapshot.selectedId ? "This schedule may have been removed with its conversation." : "See when it runs, manage its settings and follow its results here."}</p></div>`,
+    );
     return;
   }
   root.classList.remove("schedule-details-placeholder");
-  const session = snapshot.sessions.find((item) => item.id === job.sessionId);
-  root.innerHTML = `<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>
+  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", "Full")}${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>
+    <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(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>
@@ -70,6 +76,7 @@ export function renderScheduleDetails({ root, snapshot, actions }) {
       ${snapshot.loadingRuns ? '<p role="status">Loading runs…</p>' : ""}
       ${snapshot.detailError ? `<p role="alert" class="schedule-error">${escapeHtml(scheduleErrorMessage(snapshot.detailError))}</p>` : ""}
       ${snapshot.runs.map((run) => runMarkup(run)).join("") || (!snapshot.loadingRuns && !snapshot.detailError ? '<p class="schedule-muted">No recorded runs yet.</p>' : "")}</section>`;
+  if (!updateLiveRegion(root, markup)) return;
   for (const button of root.querySelectorAll("[data-job-action]")) {
     button.addEventListener("click", () => {
       if (button.dataset.jobAction === "edit") {

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,
@@ -94,7 +94,14 @@ export function createScheduleForm({
         .map((mode) => ({ value: mode, label: mode })),
       values.agentMode || "reasoning",
     )}</select></label></div>
-    <p class="schedule-permission-note"><strong>Full tool access</strong> · This task runs in its conversation using the saved model and mode.</p>
+    <label>Tool access<select name="toolPermissionMode">${options(
+      [
+        { value: "full_access", label: "Full" },
+        { value: "full_plus", label: "FULL+" },
+      ],
+      values.toolPermissionMode || "full_access",
+    )}</select><small>FULL+ includes system actions without approval prompts. OS permissions still apply.</small></label>
+    <p class="schedule-permission-note">This task runs in its conversation using the saved model, mode and tool access.</p>
     <p class="schedule-form-feedback" role="alert" hidden></p>
     <div class="schedule-action-row"><button type="submit" class="primary-button">${job ? "Save changes" : "Create schedule"}</button><button type="button" data-cancel>Cancel</button></div>`;
   const fields = form.elements;
@@ -180,6 +187,7 @@ export function scheduleFormInput(data, originalSchedule) {
     prompt: value("prompt"),
     modelProfileId: value("modelProfileId"),
     agentMode: value("agentMode"),
+    toolPermissionMode: value("toolPermissionMode") || "full_access",
     timeZone: value("timeZone"),
     schedule,
   };

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

@@ -1,3 +1,4 @@
+import { updateLiveRegion } from "../../lib/live-region.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { scheduleErrorMessage } from "../../lib/schedule-errors.js";
 
@@ -50,9 +51,10 @@ export function renderScheduleWorkspaceState({ root, state, actions }) {
   if (!state) return;
   root.dataset.state = state.kind;
   root.setAttribute("role", state.kind === "error" ? "alert" : "status");
-  root.innerHTML = `<div class="schedule-state-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="8.5"/><path d="M12 6.5V12l3.5 2"/></svg></div>
+  const markup = `<div class="schedule-state-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="8.5"/><path d="M12 6.5V12l3.5 2"/></svg></div>
     <div class="schedule-state-copy"><h3>${escapeHtml(state.title)}</h3><p>${escapeHtml(state.description)}</p>
     ${state.action ? `<button type="button" class="${state.action === "create" ? "primary-button" : ""}" data-state-action>${escapeHtml(state.actionLabel)}</button>` : ""}</div>`;
+  if (!updateLiveRegion(root, markup)) return;
   root
     .querySelector("[data-state-action]")
     ?.addEventListener("click", () => actions[state.action]());

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

@@ -1,8 +1,9 @@
+import { updateLiveRegion } from "../../lib/live-region.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { scheduleTimeLabel } from "../../lib/schedule-message.js";
 import {
   emptyScheduleListMessage,
-  matchesScheduleFilter,
+  scheduleListJobs,
   scheduleDescription,
 } from "../../lib/schedule-presentation.js";
 import { createScheduleForm } from "./form.js";
@@ -22,12 +23,12 @@ export function createSchedulesWorkspace({
   confirmDiscard = (message) => window.confirm(message),
 }) {
   let editorIdentity = null;
-  root.innerHTML = `<div class="schedules-toolbar"><label class="schedule-search"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><input type="search" placeholder="Search schedules…" aria-label="Search schedules"></label>
+  root.innerHTML = `<div class="schedules-content"><div class="schedules-toolbar"><label class="schedule-search"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/></svg><input type="search" placeholder="Search schedules…" aria-label="Search schedules"></label>
     <select aria-label="Filter schedule status"><option value="current">Active &amp; paused</option><option value="active">Active</option><option value="paused">Paused</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option><option value="all">All statuses</option></select>
     <button type="button" data-refresh>Refresh</button><button type="button" class="primary-button" data-create>New schedule</button></div>
     <p class="schedules-feedback" role="status" aria-live="polite"></p>
     <section class="schedule-workspace-state" aria-live="polite" hidden></section>
-    <div class="schedules-layout"><div class="schedules-list" aria-label="Schedules"></div><section class="schedule-details" aria-label="Schedule details"></section></div>`;
+    <div class="schedules-layout"><div class="schedules-list" aria-label="Schedules"></div><section class="schedule-details" aria-label="Schedule details"></section></div></div>`;
   const list = root.querySelector(".schedules-list");
   const details = root.querySelector(".schedule-details");
   const search = root.querySelector('[type="search"]');
@@ -71,16 +72,23 @@ export function createSchedulesWorkspace({
     void actions.filter(query, status);
   }
 
+  function bindListActions() {
+    for (const button of list.querySelectorAll("[data-job-id]")) {
+      button.addEventListener("click", () => {
+        if (button.dataset.jobId === actions.snapshot().selectedId) return;
+        if (prepareLeave()) void actions.select(button.dataset.jobId);
+      });
+    }
+  }
+
   function render(snapshot) {
     search.value = snapshot.query;
     filter.value = snapshot.filter;
-    const visible = snapshot.jobs.filter((job) =>
-      matchesScheduleFilter(
-        job,
-        snapshot.query,
-        snapshot.filter,
-        snapshot.sessions,
-      ),
+    const visible = scheduleListJobs(
+      snapshot.jobs,
+      snapshot.query,
+      snapshot.filter,
+      snapshot.sessions,
     );
     const pageState = scheduleWorkspaceState(snapshot);
     const firstScheduleEditor =
@@ -97,11 +105,13 @@ export function createSchedulesWorkspace({
         chat: () => actions.openConversation(getCurrentSessionId()),
       },
     });
-    feedback.textContent =
+    const feedbackText =
       (snapshot.error ? scheduleErrorMessage(snapshot.error) : "") ||
       (snapshot.loading
         ? "Loading schedules…"
         : `${visible.length} shown · ${snapshot.jobs.length} schedules`);
+    if (feedback.textContent !== feedbackText)
+      feedback.textContent = feedbackText;
     feedback.classList.toggle("schedule-error", Boolean(snapshot.error));
     root.setAttribute("aria-busy", String(snapshot.loading));
     createButton.disabled = snapshot.loading || snapshot.sessions.length === 0;
@@ -111,7 +121,7 @@ export function createSchedulesWorkspace({
     if (pageState) return;
     layout.classList.toggle("schedule-editor-only", snapshot.jobs.length === 0);
     list.hidden = snapshot.jobs.length === 0;
-    list.innerHTML =
+    const listMarkup =
       visible
         .map(
           (
@@ -122,12 +132,7 @@ export function createSchedulesWorkspace({
         )
         .join("") ||
       `<div class="schedule-list-empty">${escapeHtml(emptyScheduleListMessage(snapshot))}</div>`;
-    for (const button of list.querySelectorAll("[data-job-id]")) {
-      button.addEventListener("click", () => {
-        if (button.dataset.jobId === actions.snapshot().selectedId) return;
-        if (prepareLeave()) void actions.select(button.dataset.jobId);
-      });
-    }
+    if (updateLiveRegion(list, listMarkup)) bindListActions();
     if (snapshot.editor) {
       details.classList.remove("schedule-details-placeholder");
       if (editorIdentity === snapshot.editor) return;
@@ -149,17 +154,7 @@ export function createSchedulesWorkspace({
       return;
     }
     editorIdentity = null;
-    const openDetails = new Set(
-      [...details.querySelectorAll("details[data-disclosure-id]")]
-        .filter((node) => node.open)
-        .map((node) => node.dataset.disclosureId),
-    );
     renderScheduleDetails({ root: details, snapshot, actions });
-    for (const node of details.querySelectorAll(
-      "details[data-disclosure-id]",
-    )) {
-      node.open = openDetails.has(node.dataset.disclosureId);
-    }
   }
   return { render, prepareLeave };
 }

package/dist/src/web-ui/app/components/session-sidebar-drag.js

@@ -0,0 +1,58 @@
+export function createSessionSidebarDrag({ canMove, onMove }) {
+  let sourceId = "";
+  let draggedItem = null;
+  let targetItem = null;
+
+  function clearTarget() {
+    targetItem?.classList.remove("session-drop-before", "session-drop-after");
+    targetItem = null;
+  }
+
+  function reset() {
+    clearTarget();
+    draggedItem?.classList.remove("session-dragging");
+    draggedItem = null;
+    sourceId = "";
+  }
+
+  function placementAt(item, event) {
+    const bounds = item.getBoundingClientRect();
+    return event.clientY >= bounds.top + bounds.height / 2 ? "after" : "before";
+  }
+
+  function bind(item, sessionId) {
+    const handle = item.querySelector(".session-open-button");
+    handle.draggable = true;
+    handle.addEventListener("dragstart", (event) => {
+      reset();
+      sourceId = sessionId;
+      draggedItem = item;
+      item.classList.add("session-dragging");
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", sessionId);
+    });
+    handle.addEventListener("dragend", reset);
+    item.addEventListener("dragover", (event) => {
+      clearTarget();
+      if (!canMove(sourceId, sessionId)) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      targetItem = item;
+      item.classList.add(`session-drop-${placementAt(item, event)}`);
+    });
+    item.addEventListener("dragleave", (event) => {
+      if (item.contains(event.relatedTarget)) return;
+      clearTarget();
+    });
+    item.addEventListener("drop", (event) => {
+      if (!canMove(sourceId, sessionId)) return;
+      event.preventDefault();
+      const movedSessionId = sourceId;
+      const placement = placementAt(item, event);
+      reset();
+      onMove(movedSessionId, sessionId, placement);
+    });
+  }
+
+  return { bind, reset };
+}

package/dist/src/web-ui/app/components/session-sidebar-sections.js

@@ -0,0 +1,43 @@
+export function renderSessionSidebarSections({
+  root, sessions, archivedCount, showingArchived, onToggleArchived,
+  isPinned, createSessionItem, renderGroups, hasConversations,
+}) {
+  let itemIndex = 0;
+  const createItem = (session) => createSessionItem(session, itemIndex++);
+  if (showingArchived) {
+    const notice = document.createElement("p");
+    notice.className = "session-archive-notice";
+    notice.textContent = "Archived in this browser and environment. Restore a conversation from its menu.";
+    root.appendChild(notice);
+  }
+  const pinned = sessions.filter((session) => isPinned(session.id));
+  const regular = sessions.filter((session) => !isPinned(session.id));
+  if (pinned.length) {
+    const heading = document.createElement("div");
+    heading.className = "project-section-heading pinned-conversations-heading";
+    heading.textContent = "Pinned";
+    root.appendChild(heading);
+    for (const session of pinned) root.appendChild(createItem(session));
+  }
+  const grouped = renderGroups({ root, sessions: regular, createSessionItem: createItem });
+  if (!grouped) {
+    for (const session of regular) root.appendChild(createItem(session));
+    if (sessions.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "empty-state sidebar-empty-state compact";
+      empty.innerHTML = hasConversations
+        ? "<strong>No matches</strong><span>Try a different conversation name or message.</span>"
+        : "<strong>No conversations yet</strong><span>Start a new conversation to keep its history here.</span>";
+      root.appendChild(empty);
+    }
+  }
+  if (!archivedCount && !showingArchived) return;
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "session-archive-toggle";
+  toggle.title = "Conversations archived in this browser and environment";
+  toggle.textContent = showingArchived ? "Back to conversations" : `Archived (${archivedCount})`;
+  toggle.setAttribute("aria-pressed", String(showingArchived));
+  toggle.addEventListener("click", onToggleArchived);
+  root.appendChild(toggle);
+}

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