@abot-ai/runtime 1.5.0 → 1.6.0

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

@@ -0,0 +1,217 @@
+import { createAppState } from "./app-state.js";
+import { createConversationViewFeature } from "./controllers/conversation-view-feature.js";
+import { createConversationSessionController } from "./controllers/conversation-session-controller.js";
+import { createChatRequestController } from "./controllers/chat-request-controller.js";
+import { createComposerQueueController } from "./controllers/composer-queue-controller.js";
+import { createComposerSubmitController } from "./controllers/composer-submit-controller.js";
+import { createComposerAttachmentsController } from "./controllers/composer-attachments-controller.js";
+import { createRealtimeEventController } from "./controllers/realtime-event-controller.js";
+import { createSteerController } from "./controllers/steer-controller.js";
+import { createToolApprovalController } from "./controllers/tool-approval-controller.js";
+import { createToolApprovalCard } from "./components/tool-approval-card.js";
+import { createComposerActions } from "./components/composer-actions.js";
+import { createSessionComposerQueue } from "./lib/session-composer-queue.js";
+import { normalizeRealtimeMessage } from "./lib/realtime-message.js";
+import { createSparkChatResults } from "./components/spark-chat/results.js";
+import { sparkMessageStatus, sparkWorkingStatus } from "./lib/spark-chat-presentation.js";
+import { createSparkChatEmptyState } from "./components/spark-chat/empty-state.js";
+import { createSparkHandoffActions } from "./components/spark-chat/handoff-actions.js";
+import { createSparkMascotActivity } from "./components/spark-chat/mascot-activity.js";
+
+/** Separate view state, ordinary Runtime conversation mechanisms. */
+export function createSparkChatConversation({
+  dom, client, shell, getEnvironmentId, getConfiguration, isOpen, isConnected,
+  getSubmissionBlock, scrollBehavior, refresh, onReadState, onRender,
+  onOpenSchedule = () => {}, onOpenModelSettings = () => {},
+  sendRealtime, onComposerStateChange = () => {}, storage = localStorage,
+  captureHandoffNavigation, onHandoffOpened,
+}) {
+  const state = createAppState();
+  const sessionQueue = createSessionComposerQueue({ storage });
+  const mascotActivity = createSparkMascotActivity({ state, dom, isConnected });
+  let session;
+  let view;
+  let realtime;
+  let queue;
+  let submit;
+  const status = (text, busy = false) => {
+    dom.messagesList.setAttribute("aria-busy", String(busy));
+    dom.messageStatusRegion.textContent = sparkMessageStatus(text);
+  };
+  const render = () => { view?.render(); mascotActivity.render(); onRender?.(); };
+  const renderActivityStatus = () => { view?.renderActivityStatus(); mascotActivity.render(); };
+  const updateSendState = () => { submit?.updateSendState(); mascotActivity.render(); onComposerStateChange(state.composerSending); };
+  const recordControlEvent = (event) => realtime?.recordControlEvent(event);
+  const getToolPermissionMode = () => getConfiguration()?.toolPermissionMode || "ask";
+  const getModelPreference = () => {
+    const profileId = getConfiguration()?.modelProfileId;
+    return profileId ? { profileId } : undefined;
+  };
+  const scope = () => ({ environmentId: getEnvironmentId(), sessionId: state.currentSessionId });
+  const isScopeCurrent = (candidate) => candidate.environmentId === getEnvironmentId() && candidate.sessionId === state.currentSessionId;
+  const steer = createSteerController({
+    sendRealtime,
+    getScope: () => ({ ...scope(), requestId: state.activeRequestId }),
+    getPendingAttachmentCount: () => state.pendingAttachments.length,
+    onAccepted: (message) => session.insertSteerMessage(message),
+  });
+  const actions = createComposerActions({ dom, onSendNext: () => submit.dispatch("send_next") });
+  const attachments = createComposerAttachmentsController({
+    state, dom, shell, client, selectedEnvironmentId: getEnvironmentId,
+    selectedModelSupportsImageInput: () => getConfiguration()?.supportsImageInput === true,
+    ensureSession: () => session.ensureSession(), onSendStateChange: updateSendState,
+    onControlEvent: recordControlEvent,
+    isComposerAvailable: () => !getSubmissionBlock(), isComposerVisible: isOpen,
+  });
+  const approvals = createToolApprovalController({
+    state, selectedEnvironmentId: getEnvironmentId, sendRealtime,
+    renderMessages: render, recordControlEvent, createCard: createToolApprovalCard,
+  });
+  view = createConversationViewFeature({
+    dom, filePreviewClient: client, getFileEnvironmentId: getEnvironmentId,
+    getFileSessionId: () => state.currentSessionId,
+    preserveMessageHistory: true,
+    createActivityView: createSparkChatResults,
+    statusPresentation: sparkWorkingStatus,
+    statusPlacement: "outside",
+    emptyState: createSparkChatEmptyState({ getConfiguration, onOpenModelSettings }),
+    showReasoning: false,
+    showContextWindow: false,
+    getMessages: () => state.messages,
+    getActiveRequestId: () => state.activeRequestId,
+    isConnected,
+    getActivityForMessage: (message) => ({
+      events: state.events,
+      taskProgress: state.taskProgressByRequest.get(message.requestId) || null,
+      contextWindow: state.contextWindowByRequest.get(message.requestId) || null,
+    }),
+    getPendingApproval: approvals.pendingEvent, getPendingApprovals: approvals.pendingEvents,
+    createApprovalCard: approvals.createCard,
+    copyText: (text) => navigator.clipboard.writeText(text),
+    notify: shell.showToast, resolveAttachmentUrl: attachments.previewUrl,
+    onOpenSchedule, canOpenSchedule: () => client.supportsSchedules?.() === true,
+    scrollBehavior,
+    sparkActions: createSparkHandoffActions({
+      getScope: () => ({ ...scope(), viewVersion: state.sessionViewVersion }), getMessages: () => state.messages,
+      client, captureNavigation: captureHandoffNavigation, onOpened: onHandoffOpened,
+      onChange: render, notify: shell.showToast,
+    }),
+  });
+  // The popup never mutates ordinary conversation selection or browser preferences.
+  const sessionClient = {
+    ...client,
+    async listSessions() { void refresh(); return { sessions: [] }; },
+  };
+  session = createConversationSessionController({
+    state, dom: { ...dom, sessionTitle: document.createElement("span") },
+    client: sessionClient,
+    preferences: { saveSessionIdForEnvironment() {}, sessionIdForEnvironment: () => state.currentSessionId },
+    sessions: {
+      byId: () => ({ title: "ABot SPARK" }), titleOf: (value) => value.title,
+      setCurrentTitle() {}, applyTitle() {}, applyReadState: (_id, readState) => onReadState(readState),
+    },
+    sessionQueue, conversationView: view, selectedEnvironmentId: getEnvironmentId,
+    // Reading belongs to actual visible rows in the popup, never to session activation.
+    isConversationVisible: () => false,
+    clearPendingAttachments() {}, applyConversationChrome() {}, applyModelSelection() {}, renderSessions() {},
+    renderMessages: render, updateComposerSendState: updateSendState, setMessageStatus: status,
+    sendRealtime, handleRealtimeMessage: (message) => realtime.handle(message),
+    recordEvent: (message) => realtime.recordEvent(message), recordControlEvent,
+    reportQueueFailure: (...args) => queue.reportFailure(...args),
+    drainQueuedMessage: (...args) => queue.drain(...args),
+    suspendQueueRecovery: () => queue.suspendRecoveryForNavigation(),
+    recoverBlockedQueue: (...args) => queue.recoverForManualSend(...args),
+    isCurrentComposerScope: isScopeCurrent,
+    createSessionId() { throw new Error("SPARK conversation is not ready yet."); },
+  });
+  const requests = createChatRequestController({
+    state, client, sessionQueue, conversationView: view, conversationSession: session,
+    attachments, currentComposerScope: scope, isCurrentComposerScope: isScopeCurrent,
+    rememberModelSelection() {}, applyConversationChrome() {}, renderSessions() {},
+    renderAttachments: attachments.render, getToolPermissionMode, getModelPreference,
+    clearQueueRecovery: (...args) => queue.clearRecovery(...args),
+    reportQueueFailure: (...args) => queue.reportFailure(...args),
+  });
+  queue = createComposerQueueController({
+    state, dom, queue: sessionQueue, selectedEnvironmentId: getEnvironmentId,
+    getToolPermissionMode, getModelPreference, rememberModelSelection() {}, attachments,
+    updateSendState, postChatMessage: requests.postChatMessage,
+    appendLocalUserMessage: session.appendLocalUserMessage,
+    activateRequestForScope: session.activateRequestForScope,
+    renderMessages: render, setMessageStatus: status, recordControlEvent,
+    resizeComposer: () => submit.resize(),
+  });
+  submit = createComposerSubmitController({
+    state, dom, composerActions: actions, attachments, queue, steer: steer.steer,
+    chatRequests: requests, conversationSession: session,
+    selectedEnvironmentId: getEnvironmentId, setMessageStatus: status,
+    getSubmissionBlock, onSubmissionBlocked: (block) => shell.showToast(block.message || "SPARK is not ready.", "failed"),
+    isComposerVisible: isOpen,
+  });
+  realtime = createRealtimeEventController({
+    state, shell, selectedEnvironmentId: getEnvironmentId,
+    handleSteerAcknowledgement: steer.handleAcknowledgement,
+    shouldAcceptMessage: session.shouldAcceptRealtimeMessage,
+    applySessionReadState: session.applySessionReadState,
+    activeAssistantForRequest: session.activeAssistantForRequest,
+    addOrMergeMessage: session.addOrMergeMessage, normalizeChatMessage: session.normalizeMessage,
+    renderMessages: render, renderContextWindow: view.renderContextWindow,
+    renderActivityStatus,
+    scheduleMessageRender: view.scheduleMessageRender, scheduleThinkingRender: view.scheduleThinkingRender,
+    cancelScheduledMessageRender: view.cancelScheduledMessageRender,
+    cancelScheduledThinkingRender: view.cancelScheduledThinkingRender,
+    markCurrentSessionReadSoon: () => scrollBehavior.scheduleRead(),
+    applySessionTitleUpdate() {}, setMessageActivityStatus: status, updateComposerSendState: updateSendState,
+    drainQueuedComposerMessage: queue.drain, loadSessions: refresh,
+  });
+
+  function handleRealtime(raw) {
+    const message = normalizeRealtimeMessage(raw);
+    const environment = message.environmentId || message.environment;
+    if (environment && environment !== getEnvironmentId()) return;
+    if (message.type === "steer_ack") { steer.handleAcknowledgement(message); return; }
+    if (message.sessionId && message.sessionId !== state.currentSessionId) return;
+    if (!state.currentSessionId) return;
+    if (!message.sessionId && message.requestId && !session.requestBelongsToCurrentView(message.requestId)) return;
+    state.connected = isConnected();
+    realtime.handle(message);
+  }
+  function bind() {
+    view.bind(); actions.bind();
+    dom.composerForm.addEventListener("submit", (event) => { event.preventDefault(); submit.dispatch(); });
+    dom.composerInput.addEventListener("input", () => { submit.resize(); updateSendState(); });
+    dom.composerInput.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+      event.preventDefault(); submit.dispatch();
+    });
+    dom.attachmentButton.addEventListener("click", () => dom.attachmentInput.click());
+    dom.attachmentInput.addEventListener("change", () => {
+      const files = [...dom.attachmentInput.files]; dom.attachmentInput.value = "";
+      void Promise.allSettled(files.map((file) => attachments.upload(file))).then((results) => {
+        for (const result of results) if (result.status === "rejected") shell.showToast(result.reason.message, "failed");
+      });
+    });
+    dom.composerInput.addEventListener("paste", (event) => {
+      const files = [...(event.clipboardData?.files || [])];
+      if (!files.length) return;
+      event.preventDefault();
+      for (const file of files) void attachments.upload(file).catch((error) => shell.showToast(error.message, "failed"));
+    });
+  }
+  return {
+    state, session, view, attachments, render, handleRealtime, bind, queue,
+    prepareEnvironmentChange: () => queue.prepareRecoveryForNavigation(),
+    setAgentMode(mode) { state.agentMode = mode; },
+    update() {
+      state.connected = isConnected();
+      attachments.render(); updateSendState(); renderActivityStatus();
+      if (!state.messages.length) render();
+    },
+    reset() {
+      steer.rejectAll("SPARK environment changed.");
+      attachments.clear(); session.invalidateEnvironmentLoads(); session.clearCurrentSessionView();
+      dom.composerInput.value = "";
+    },
+    status,
+  };
+}

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

@@ -0,0 +1,187 @@
+import { createSparkChatPanel } from "./components/spark-chat/panel.js";
+import { isSparkModelUnavailable } from "./components/spark-chat/empty-state.js";
+import { createSparkChatSettings } from "./components/spark-chat/settings.js";
+import { createSparkChatReading } from "./controllers/spark-chat-reading.js";
+import { createSparkChatNotices } from "./controllers/spark-chat-notices.js";
+import { createSparkChatSync } from "./controllers/spark-chat-sync.js";
+import { createSparkChatConversation } from "./spark-chat-conversation.js";
+import { selectLearningView } from "./components/passive-learning/workspace-view.js";
+import { isWorkspaceChange } from "./lib/workspace-change.js";
+import { reconcileSparkReadState } from "./lib/spark-chat-read-state.js";
+import { resolveSparkMessageTarget } from "./lib/spark-chat-address.js";
+
+export function createSparkChatFeature({ dom, state: appState, client, shell, realtime, getEnvironmentId, onOpenSchedule = () => {}, captureHandoffNavigation }) {
+  const panel = createSparkChatPanel({ launcherAnchor: dom.environmentSelect.closest(".rail-runtime") });
+  let configuration;
+  let readState;
+  let environmentId = "";
+  let sync;
+  let settings;
+  let conversation;
+  let awaitingOpening = false;
+  const isAvailable = () => client.supportsSparkChat?.() === true;
+  const getSubmissionBlock = () => {
+    if (!configuration?.sessionId) return { message: "SPARK conversation is loading." };
+    if (isSparkModelUnavailable(configuration)) return { message: "Choose a model under Proactive mode in SPARK settings." };
+    if (!sync?.isReady()) return { message: "SPARK is restoring this conversation." };
+    if (appState.runtimeAvailability?.status !== "ready") return { message: "The Runtime is not ready. Check System settings." };
+    return null;
+  };
+  const reading = createSparkChatReading({
+    dom: panel.dom, client, getEnvironmentId, isOpen: panel.isOpen,
+    getMessages: () => conversation?.state.messages || [],
+    onReadState: applyReadState,
+    onError: (error) => {
+      if (["read_generation_changed", "visible_message_receipt_stale"].includes(error.code)) { void sync.refresh(); return; }
+      conversation.status(`Read status unavailable: ${error.message}`);
+    },
+  });
+  const notices = createSparkChatNotices({ showNotice: panel.showNotice, setUnread: panel.setUnread });
+  function applyReadState(next, receipt) {
+    if (!next) return;
+    readState = reconcileSparkReadState(readState, next, receipt);
+    reading.setReadState(readState);
+    if (awaitingOpening && panel.isOpen()) { reading.open(); awaitingOpening = false; }
+    if (Number.isFinite(readState.unreadCount)) panel.setUnread(readState.unreadCount);
+    if (readState.readStateStatus === "unavailable") conversation.status("Read status is temporarily unavailable.");
+  }
+  function openSettings() {
+    if (!shell.activateWorkspace("learning")) return;
+    selectLearningView(dom.learningRoot, "chat", true);
+    panel.setOpen(false, { focus: false });
+  }
+  function openModelSettings() {
+    if (!shell.activateWorkspace("learning")) return;
+    selectLearningView(dom.learningRoot, "settings", true);
+    dom.learningRoot.querySelector('[data-learning-setting="proactiveModelProfileId"]')?.focus();
+    panel.setOpen(false, { focus: false });
+  }
+  conversation = createSparkChatConversation({
+    dom: panel.dom, client, shell, getEnvironmentId,
+    getConfiguration: () => configuration, isOpen: panel.isOpen,
+    isConnected: () => appState.connected,
+    getSubmissionBlock, scrollBehavior: reading,
+    onOpenSchedule, onOpenModelSettings: openModelSettings,
+    captureHandoffNavigation, onHandoffOpened: () => panel.setOpen(false),
+    refresh: () => sync?.refresh(), onReadState: applyReadState,
+    sendRealtime: realtime.send,
+    onComposerStateChange: (sending) => sync?.composerChanged(sending),
+  });
+  sync = createSparkChatSync({
+    client, getEnvironmentId, conversation, isAvailable,
+    onConfiguration: (next) => {
+      const changedModel = configuration?.modelProfileId !== next.modelProfileId;
+      configuration = next; settings?.render(next, getEnvironmentId());
+      if (changedModel) conversation.attachments.removeUnsupportedImages();
+    },
+    onReadState: applyReadState,
+    onSnapshot: (snapshot, _readState, options) => notices.reconcile(snapshot, readState, options),
+    onHistoryReset() {
+      conversation.reset(); reading.reset(); notices.reset(); readState = undefined;
+      panel.hideNotice(); awaitingOpening = panel.isOpen();
+    },
+    onError: (error) => conversation.status(`SPARK unavailable: ${error.message}`),
+  });
+  settings = createSparkChatSettings({
+    root: dom.learningRoot, getWebConfig: () => appState.config,
+    getAgentMode: () => conversation.state.agentMode,
+    onAgentModeChange: (mode) => conversation.setAgentMode(mode),
+    onSave: async (toolPermissionMode) => {
+      const scope = getEnvironmentId();
+      const result = await client.configureSparkChat({ toolPermissionMode }, scope);
+      if (scope !== getEnvironmentId()) return;
+      configuration = { ...configuration, ...result }; settings.render(configuration, scope); conversation.update();
+    },
+    onClear: async () => {
+      if (!configuration?.sessionId) return;
+      const scope = getEnvironmentId();
+      await client.clearSessionMessages(configuration.sessionId, scope);
+      if (scope !== getEnvironmentId()) return;
+      conversation.reset(); reading.reset(); notices.reset(); readState = undefined;
+      sync.reset(); panel.hideNotice();
+      await sync.refresh({ wait: true });
+    },
+    onOpen: () => void open(),
+    onResetPosition: () => panel.resetPosition(),
+    onOpenModelSettings: openModelSettings,
+  });
+  panel.dom.settingsButton.addEventListener("click", openSettings);
+  panel.onToggle((opened) => {
+    if (!opened) { conversation.view.closeFilePreview(); return; }
+    if (!configuration) { awaitingOpening = true; void sync.refresh(); return; }
+    reading.open(); conversation.render(); conversation.update();
+    void sync.refresh();
+  });
+
+  async function open(messageId, reference) {
+    if (!isAvailable()) return false;
+    const scope = getEnvironmentId();
+    try { if (!configuration || reference !== undefined) await sync.refresh({ wait: true }); }
+    catch (error) { shell.showToast(`SPARK could not be opened: ${error.message}`, "failed"); return false; }
+    if (scope !== getEnvironmentId()) return false;
+    if (!configuration) return false;
+    panel.setOpen(true);
+    const target = resolveSparkMessageTarget(configuration.snapshot?.messages, messageId, reference);
+    reading.open(target); conversation.render(); conversation.update();
+    return true;
+  }
+  function environmentChanged() {
+    const next = getEnvironmentId();
+    panel.setAvailable(isAvailable());
+    if (environmentId === next) return;
+    environmentId = next;
+    configuration = undefined; readState = undefined;
+    awaitingOpening = panel.isOpen();
+    sync.reset(); reading.reset(); notices.reset(); conversation.reset(); panel.hideNotice();
+    settings.render(undefined, next);
+    if (isAvailable()) void sync.refresh({ consolidated: true });
+  }
+  function handleRealtime(message) {
+    environmentChanged();
+    if (!isAvailable()) return;
+    const environment = message.environmentId || message.environment;
+    if (environment && environment !== getEnvironmentId()) return;
+    if (message.type === "learning.changed") { sync.modelChanged(); return; }
+    if (isWorkspaceChange(message)) {
+      const sessionId = message.sessionId || message.change?.sessionId;
+      if (!sessionId || sessionId === configuration?.sessionId) void sync.refresh();
+      return;
+    }
+    if (message.sessionId !== configuration?.sessionId) {
+      if (message.sessionId) return;
+      if (!message.requestId && message.type !== "steer_ack" && message.type !== "tool_approval_ack") return;
+    }
+    const unknownRequest = message.requestId && !conversation.session.requestBelongsToCurrentView(message.requestId);
+    if (unknownRequest && message.sessionId === configuration?.sessionId) { void sync.refresh(); return; }
+    conversation.handleRealtime(message);
+    if (["chat_message", "completed", "failed", "chat_read_state"].includes(message.type)) void sync.refresh();
+  }
+  return {
+    open, environmentChanged,
+    prepareEnvironmentChange: conversation.prepareEnvironmentChange,
+    async openSession(sessionId, messageId, reference) {
+      if (!isAvailable() || !sessionId) return false;
+      const scope = getEnvironmentId();
+      try { if (!configuration) await sync.refresh({ wait: true }); }
+      catch (error) {
+        shell.showToast(`SPARK could not be opened: ${error.message}`, "failed");
+        return true;
+      }
+      if (scope !== getEnvironmentId()) return true;
+      if (sessionId !== configuration?.sessionId) return false;
+      return open(messageId, reference);
+    },
+    bind() {
+      conversation.bind();
+      realtime.subscribeMessages(handleRealtime);
+      realtime.subscribeConnectionChanged?.(() => conversation.update());
+      realtime.subscribeConnected(() => { environmentChanged(); void sync.refresh({ consolidated: true, rehydrate: true }); });
+      dom.environmentSelect.addEventListener("change", () => queueMicrotask(environmentChanged));
+      shell.subscribeWorkspaceChange(() => { environmentChanged(); if (panel.isOpen()) reading.scheduleRead(); });
+      document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "visible") void sync.refresh({ consolidated: true });
+      });
+      window.addEventListener("focus", () => { conversation.update(); reading.scheduleRead(); });
+    },
+  };
+}

package/dist/src/web-ui/app/spark-mascot.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="150 150 954 954" fill="none">
+  <defs>
+    <linearGradient id="mint" x1="380" y1="250" x2="850" y2="980" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9bf5e2"/><stop offset="1" stop-color="#91efde"/>
+    </linearGradient>
+  </defs>
+  <path d="M509 185C568 185 634 260 694 355C737 423 774 489 816 538C860 589 914 616 957 645C990 667 1009 679 1009 698C1009 725 988 742 953 760C895 789 848 812 806 849C759 890 731 942 702 994C678 1038 655 1069 624 1069C590 1069 565 1033 543 985C516 926 493 887 446 850C401 814 354 790 302 762C268 744 244 725 244 697C244 671 270 649 308 623C365 584 415 549 445 494C475 440 479 391 469 316C464 281 450 244 460 219C469 195 487 185 509 185Z" fill="url(#mint)"/>
+  <circle cx="540.5" cy="622.5" r="44.5" fill="#00242b"/>
+  <circle cx="713" cy="622.5" r="44.5" fill="#00242b"/>
+  <circle cx="541.5" cy="599.5" r="11.5" fill="#a5fae9"/>
+  <circle cx="711.5" cy="599.5" r="11.5" fill="#a5fae9"/>
+</svg>

package/dist/src/web-ui/app/styles/11-workspace-header-width.css

@@ -22,22 +22,36 @@
   margin-inline: auto;
 }
 
-/* A shared desktop baseline joins the brand, navigation and workspace. */
-@media (min-width: 761px) {
-  .app-shell {
-    --workspace-header-height: 94px;
-  }
+/* Primary headers share one height and title style on every page. */
+.app-shell {
+  --workspace-header-height: 64px;
+}
 
-  .home-workspace-header,
-  .workspace-page-header,
-  .config-workspace-panel .config-workspace-header,
-  .chat-header {
-    height: var(--workspace-header-height);
-    min-height: var(--workspace-header-height);
-    flex-shrink: 0;
-    align-items: center;
-  }
+.home-workspace-header,
+.workspace-page-header,
+.config-workspace-panel .config-workspace-header,
+.chat-header {
+  height: var(--workspace-header-height);
+  min-height: var(--workspace-header-height);
+  flex-shrink: 0;
+  align-items: center;
+  align-content: center;
+  padding-block: 6px;
+}
 
+.home-workspace-header h1,
+.workspace-page-header h2,
+.chat-header h2 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: var(--font-size-4xl);
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+}
+
+/* Join the brand, navigation and workspace at the shared baseline. */
+@media (min-width: 761px) {
   .workspace-rail {
     padding-top: 0;
   }
@@ -97,3 +111,23 @@
     border-bottom: 1px solid var(--line);
   }
 }
+
+@media (max-width: 760px) {
+  .app-shell {
+    --workspace-header-height: 56px;
+  }
+}
+
+/* Keep narrow-screen header actions clear of the shared title. */
+@media (max-width: 400px) {
+  .workspace-page-header .toolbar-actions {
+    max-width: calc(100vw - 2 * var(--workspace-page-gutter) - 100px);
+  }
+
+  .workspace-page-header .toolbar-actions button {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/dist/src/web-ui/app/styles/11-workspace-rail.css

@@ -142,6 +142,12 @@
   background: color-mix(in srgb, var(--accent) 8%, var(--panel));
 }
 
+.workspace-rail .rail-icon-studio {
+  border-radius: 11px;
+  color: #a6b9ed;
+  background: color-mix(in srgb, #a6b9ed 8%, var(--panel));
+}
+
 .workspace-rail .rail-actions .rail-button:is(.active, [aria-current="page"]),
 .workspace-rail .rail-history-button[aria-expanded="true"] {
   background: color-mix(in srgb, var(--accent) 7%, var(--panel));

package/dist/src/web-ui/app/styles/19-dashboard-automations.css

@@ -0,0 +1,32 @@
+.home-automation-status {
+  display: grid;
+  gap: 9px;
+  min-width: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--line-strong);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.home-automation-status[hidden] { display: none; }
+.home-automation-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
+.home-automation-heading span { color: var(--accent-strong); font-size: var(--font-size-xs); }
+.home-automation-heading strong { color: var(--text-strong); font-size: var(--font-size-sm); font-weight: 600; }
+.home-automation-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.home-automation-run {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  padding: 7px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  color: var(--text);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+}
+.home-automation-run:hover, .home-automation-run:focus-visible { border-color: var(--accent); background: var(--panel-soft); }
+.home-automation-run strong { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.home-automation-run > span:last-child { color: var(--muted); font-size: var(--font-size-xs); }
+.home-automation-pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.home-automation-more { color: var(--muted); font-size: var(--font-size-xs); }
+.home-automation-retry { padding: 7px 10px; font-size: var(--font-size-xs); }

package/dist/src/web-ui/app/styles/41-co-worker-agent.css

@@ -8,7 +8,7 @@
 .co-worker-agent-copy p { margin: 0; max-width: 620px; color: var(--muted); line-height: 1.7; font-size: var(--font-size-sm); }
 .co-worker-art { width: 108px; height: 108px; position: relative; display: grid; place-items: center; color: var(--accent); }
 .co-worker-core { position: relative; width: 61px; height: 61px; display: grid; place-items: center; border-radius: 22px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); transform: rotate(-8deg); }
-.co-worker-core svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transform: rotate(8deg); }
+.co-worker-core img { width: 38px; height: 38px; transform: rotate(8deg); }
 .co-worker-orbit { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; }
 .co-worker-agent :is([data-agent-phase="collection"], [data-orbit-phase="collection"]) { --phase-accent: #8ebcff; --phase-radius: 50%; --phase-rotation: 0deg; }
 .co-worker-agent :is([data-agent-phase="processing"], [data-orbit-phase="processing"]) { --phase-accent: var(--accent); --phase-radius: 1px; --phase-rotation: 0deg; }
@@ -27,15 +27,13 @@
 .co-worker-spark { position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); opacity: 0; pointer-events: none; }
 .co-worker-agent[data-agent-mode="quiet"] .co-worker-core { opacity: .6; color: var(--muted); }
 .co-worker-agent[data-agent-mode="attention"] .co-worker-agent-label { color: var(--warn, #e2ba79); }
-.co-worker-agent:is([data-agent-mode="collecting"],[data-agent-mode="reviewing"],[data-agent-mode="suggestion"]) .co-worker-agent-label { color: var(--accent); }
+.co-worker-agent:is([data-agent-mode="collecting"],[data-agent-mode="reviewing"]) .co-worker-agent-label { color: var(--accent); }
 .co-worker-agent:is([data-agent-mode="collecting"],[data-agent-mode="reviewing"]) .co-worker-orbit { animation: co-worker-orbit 48s linear infinite; }
 .co-worker-agent[data-agent-mode="reviewing"] .co-worker-orbit { animation-duration: 24s; }
 .co-worker-agent[data-agent-mode="reviewing"] .co-worker-core { animation: co-worker-think 2.4s ease-in-out 4; }
 .co-worker-agent[data-agent-mode="reviewing"] .co-worker-spark { animation: co-worker-glimmer 2.4s ease-in-out 4; }
-.co-worker-agent:is([data-agent-mode="collecting"],[data-agent-mode="reviewing"]) .co-worker-core svg { animation: co-worker-self-turn 28s linear infinite; }
-.co-worker-agent[data-agent-mode="reviewing"] .co-worker-core svg { animation-duration: 14s; }
-.co-worker-agent[data-agent-mode="suggestion"] .co-worker-core { animation: co-worker-arrival 850ms cubic-bezier(.2,.7,.3,1) 1; }
-.co-worker-agent[data-agent-mode="suggestion"] .co-worker-wave { animation: co-worker-wave-a 1.7s ease-out 2; }
+.co-worker-agent:is([data-agent-mode="collecting"],[data-agent-mode="reviewing"]) .co-worker-core img { animation: co-worker-self-turn 28s linear infinite; }
+.co-worker-agent[data-agent-mode="reviewing"] .co-worker-core img { animation-duration: 14s; }
 .co-worker-agent[data-observation-pulse="a"][data-agent-mode="collecting"] .co-worker-wave { animation: co-worker-wave-a 1.3s ease-out 1; }
 .co-worker-agent[data-observation-pulse="b"][data-agent-mode="collecting"] .co-worker-wave { animation: co-worker-wave-b 1.3s ease-out 1; }
 .co-worker-agent[data-motion="off"] *, .co-worker-agent[data-motion="off"] *::before { animation-play-state: paused !important; }
@@ -64,26 +62,12 @@
 .co-worker-agent-compact .co-worker-agent-main { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 18px; gap: 14px; }
 .co-worker-agent-compact .co-worker-art { width: 72px; height: 72px; }
 .co-worker-agent-compact .co-worker-core { width: 46px; height: 46px; border-radius: 17px; }
-.co-worker-agent-compact .co-worker-core svg { width: 25px; height: 25px; }
+.co-worker-agent-compact .co-worker-core img { width: 32px; height: 32px; }
 .co-worker-agent-compact .co-worker-agent-copy h3 { margin: 5px 0; font-size: 19px; }
 .co-worker-agent-compact .co-worker-agent-copy p { font-size: var(--font-size-xs); }
 .co-worker-agent-compact .co-worker-phase { padding: 8px 18px; }
 .co-worker-agent-compact .co-worker-phase small { display: none; }
 .co-worker-agent-compact .co-worker-phase[data-processing-active="true"] small { display: block; margin-top: 7px; }
-.co-worker-proposals:empty { display: none; }
-.co-worker-proposal { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; margin: 0 0 22px; padding: 20px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
-.co-worker-proposal-icon { color: var(--accent); font-size: 23px; }
-.co-worker-eyebrow { color: var(--accent); font-size: 11px; }
-.co-worker-proposal h4 { font-weight: 400; margin: 5px 0 8px; font-size: var(--font-size-md); }
-.co-worker-proposal p { color: var(--muted); font-size: var(--font-size-sm); line-height: 1.65; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
-.co-worker-proposal-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
-.home-learning-panel .co-worker-proposal { margin: 16px 18px; }
-.home-learning-panel .co-worker-proposal-actions button { border: 0; background: transparent; padding: 5px 8px; font-size: var(--font-size-xs); font-weight: 400; }
-.home-learning-panel [data-learning-proposal-open] { color: var(--accent); }
-.passive-learning-card [data-learning-proposal-open] { color: var(--accent); background: var(--accent-soft); }
-.co-worker-proposal-toast { position: fixed; z-index: 1000; inset: auto 24px 24px auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: min(390px, calc(100vw - 32px)); padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 10px 35px #0004; animation: co-worker-toast-in 300ms ease-out 1; }
-.co-worker-proposal-toast-copy { flex: 1 1 220px; font-size: var(--font-size-sm); line-height: 1.6; }
-.co-worker-proposal-toast button { font-size: var(--font-size-xs); font-weight: 400; padding: 5px 9px; border-radius: 6px; }
 @keyframes co-worker-phase-pulse { 50% { transform: scale(1.3); opacity: .65; } }
 @keyframes co-worker-orbit { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
 @keyframes co-worker-self-turn { from { transform: rotate(8deg); } to { transform: rotate(368deg); } }
@@ -91,8 +75,6 @@
 @keyframes co-worker-glimmer { 50% { opacity: 1; transform: scale(1.08); } }
 @keyframes co-worker-wave-a { 0% { opacity: .5; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.65); } }
 @keyframes co-worker-wave-b { 0% { opacity: .5; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.65); } }
-@keyframes co-worker-arrival { 0%,100% { transform: rotate(-8deg); } 40% { transform: rotate(6deg) scale(1.06); } 70% { transform: rotate(-12deg); } }
-@keyframes co-worker-toast-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
 @media (max-width: 700px) {
   .co-worker-agent-compact .co-worker-agent-main { grid-template-columns: 72px minmax(0, 1fr); }
   .co-worker-agent-compact [data-learning-open] { grid-column: 2; justify-self: start; }
@@ -106,8 +88,7 @@
   .co-worker-phase p { margin: 0; text-align: end; }
   .co-worker-phase [data-phase-state] { justify-self: end; }
   .co-worker-phase small { grid-column: 2; text-align: end; }
-  .co-worker-proposal-toast { inset-inline-end: 16px; bottom: 16px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .co-worker-agent *, .co-worker-agent *::before, .co-worker-proposal-toast { animation: none !important; transition: none !important; }
+  .co-worker-agent *, .co-worker-agent *::before { animation: none !important; transition: none !important; }
 }

package/dist/src/web-ui/app/styles/46-system-host.css

@@ -30,6 +30,7 @@
   white-space: nowrap;
 }
 .system-host-summary-action { margin-left: auto; color: var(--accent); white-space: nowrap; }
+.system-host-summary-permissions { color: var(--muted); font-size: var(--font-size-xs); }
 .system-host-summary-action > span { display: inline-block; transition: transform 150ms ease; }
 .system-host-compact[open] .system-host-summary-action > span { transform: rotate(180deg); }
 .system-host-summary:hover { background: var(--control-bg); }
@@ -61,6 +62,22 @@
   gap: 16px;
 }
 
+.system-host-permissions { margin-block: 20px; border-block: 1px solid var(--line); padding-block: 16px; }
+.system-host-permission-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.system-host-permission-heading h3 { margin: 0; font-size: var(--font-size-base); font-weight: 500; }
+.system-host-permission-heading h4 { margin: 0; font-size: var(--font-size-sm); font-weight: 500; }
+.system-host-permission-route { margin-block: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
+.system-host-permission-row > strong { flex: 1 1 160px; font-weight: 400; }
+.system-host-permission-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 12px; border-top: 1px solid var(--line); }
+.system-host-permission-row > div { flex: 1 1 240px; }
+.system-host-permission-row p { margin: 2px 0 0; color: var(--muted); }
+.system-host-permission-row button { flex-shrink: 0; }
+.system-host-permission-state { color: var(--muted); }
+.system-host-permission-state[data-granted="true"] { color: var(--success, #79d7a7); }
+.system-host-permission-path { display: block; padding: 10px; border-radius: 6px; background: var(--control-bg); overflow-wrap: anywhere; user-select: text; }
+.system-host-native-permissions { margin-top: 16px; }
+.system-host-native-permissions pre { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
+
 .system-host-heading h2 {
   margin: 0 0 6px;
   font-size: var(--font-size-2xl);