@oar-sh/oar 0.9.2 → 0.9.4

package/server/public/app/remote-relays-store.mjs

@@ -0,0 +1,126 @@
+// The browser's copy of this relay's remote-relay list (Settings → Relays and
+// the composer's @mention popup read it). Filled lazily from
+// GET /api/remote-relays and replaced wholesale by the relay's
+// `remote_relays_updated` socket event; never carries tokens.
+
+import { IS_SHARED_VIEW } from './store.js';
+import { loadRemoteRelays } from './api-client.js';
+
+// A relay without the feature answers 404; do not ask again on every "@".
+const FAILED_LOAD_RETRY_MS = 60_000;
+const KNOWN_STATUSES = new Set(['online', 'offline', 'unauthorized', 'error', 'unknown']);
+
+/** A remote's health for its dot: online, offline, unauthorized, error or unknown. */
+export function remoteRelayStatus(relay) {
+  const status = String(relay?.lastStatus || '').trim().toLowerCase();
+  return KNOWN_STATUSES.has(status) ? status : 'unknown';
+}
+
+let snapshot = null; // { relays: [], self: {} | null } once known
+let loadPromise = null;
+let lastFailedLoadAt = 0;
+const listeners = new Set();
+
+function normalizeRelay(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  const id = String(raw.id || '').trim();
+  if (!id) return null;
+  return { ...raw, id };
+}
+
+function normalizeSnapshot(payload) {
+  const relays = Array.isArray(payload?.relays)
+    ? payload.relays.map(normalizeRelay).filter(Boolean)
+    : [];
+  const self = payload?.self && typeof payload.self === 'object' ? { ...payload.self } : null;
+  return { relays, self };
+}
+
+function notify() {
+  for (const listener of listeners) {
+    try {
+      listener(snapshot);
+    } catch (error) {
+      console.warn('[remote-relays] listener failed', error?.message || error);
+    }
+  }
+}
+
+/** The last known `{ relays, self }`, or null before the first load. */
+export function getRemoteRelaysSnapshot() {
+  return snapshot;
+}
+
+export function getRemoteRelays() {
+  return snapshot?.relays || [];
+}
+
+/**
+ * Replaces the list (socket event, GET response). A payload without a
+ * `relays` array is ignored rather than wiping what is known; `self` survives
+ * a payload that omits it.
+ */
+export function setRemoteRelaysSnapshot(payload) {
+  if (!payload || typeof payload !== 'object' || !Array.isArray(payload.relays)) return snapshot;
+  const next = normalizeSnapshot(payload);
+  if (!next.self && snapshot?.self) next.self = snapshot.self;
+  snapshot = next;
+  lastFailedLoadAt = 0;
+  notify();
+  return snapshot;
+}
+
+/** Applies one relay a PATCH/check answered with, without a full reload. */
+export function upsertRemoteRelay(relay) {
+  const normalized = normalizeRelay(relay);
+  if (!normalized || !snapshot) return snapshot;
+  const relays = snapshot.relays.slice();
+  const index = relays.findIndex((entry) => entry.id === normalized.id);
+  if (index === -1) relays.push(normalized);
+  else relays[index] = normalized;
+  snapshot = { ...snapshot, relays };
+  notify();
+  return snapshot;
+}
+
+export function removeRemoteRelayFromSnapshot(id) {
+  const key = String(id || '').trim();
+  if (!snapshot || !key) return snapshot;
+  snapshot = { ...snapshot, relays: snapshot.relays.filter((entry) => entry.id !== key) };
+  notify();
+  return snapshot;
+}
+
+/** Fetches the list now. Resolves to the snapshot (null when unavailable). */
+export async function refreshRemoteRelays() {
+  if (IS_SHARED_VIEW) return snapshot;
+  const payload = await loadRemoteRelays();
+  if (payload && Array.isArray(payload.relays)) return setRemoteRelaysSnapshot(payload);
+  lastFailedLoadAt = Date.now();
+  return snapshot;
+}
+
+/** Loads once, lazily (first "@" in the composer); later calls reuse the cache. */
+export function ensureRemoteRelaysLoaded() {
+  if (snapshot) return Promise.resolve(snapshot);
+  if (IS_SHARED_VIEW) return Promise.resolve(null);
+  if (loadPromise) return loadPromise;
+  if (lastFailedLoadAt && Date.now() - lastFailedLoadAt < FAILED_LOAD_RETRY_MS) return Promise.resolve(null);
+  loadPromise = refreshRemoteRelays().finally(() => {
+    loadPromise = null;
+  });
+  return loadPromise;
+}
+
+export function subscribeRemoteRelays(listener) {
+  if (typeof listener !== 'function') return () => {};
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/** Test hook: forget everything. */
+export function resetRemoteRelaysStoreForTests() {
+  snapshot = null;
+  loadPromise = null;
+  lastFailedLoadAt = 0;
+}

package/server/public/app/settings-modal.js

@@ -33,6 +33,7 @@ import {
   updateFeatureFlagSetting as requestFeatureFlagSetting,
   requestRelayRestart,
 } from './api-client.js';
+import { DEFAULT_BACKGROUND_TASK_TIMEOUT_MINUTES } from './background-task-timeout-options.mjs';
 import { syncFontScaleSelect } from './font-scaling.js';
 import { syncPwaAppNameInput } from './pwa-install.js';
 import { normalizeKnownCwdPath } from './cwd-picker.js';
@@ -42,6 +43,7 @@ import { refreshClaudeAuthSection } from './claude-auth-ui.js';
 import { refreshGrokAuthSection } from './grok-auth-ui.js';
 import { refreshCliInstallSections } from './cli-install-ui.js';
 import { refreshUpdateSection } from './update-ui.js';
+import { refreshRemoteRelaysSection } from './remote-relays-settings.js';
 import {
   getPreviews,
   renderPreviewRowsInto,
@@ -152,9 +154,10 @@ export async function updateTurnCeilingSetting(value) {
   }
 }
 
-// Mirrors shared/background-task-timeout.mjs (the browser cannot import it).
-// Bounds come from the API response; these are just pre-response defaults.
-let backgroundTaskTimeoutMinutes = 0;
+// Starts at the default the relay enforces, so the slider tells the truth while
+// the settings request is in flight or after it failed. Bounds come from the
+// API response.
+let backgroundTaskTimeoutMinutes = DEFAULT_BACKGROUND_TASK_TIMEOUT_MINUTES;
 let backgroundTaskTimeoutUpdateInFlight = false;
 
 function syncBackgroundTaskTimeoutSlider() {
@@ -353,8 +356,8 @@ export function applyCopilotSettingsState(settings = {}, { error = '' } = {}) {
       status.dataset.state = 'error';
     } else {
       status.textContent = copilotSettingsState.engine === 'sdk'
-        ? 'New Copilot conversations run on the experimental headless SDK worker. No tmux inspector for these sessions.'
-        : 'New Copilot conversations run on the Copilot CLI with the web-relay extension (current default).';
+        ? 'New Copilot conversations run on the headless SDK worker. No tmux inspector for these sessions.'
+        : 'New Copilot conversations run on the Copilot CLI with the web-relay extension.';
       status.dataset.state = copilotSettingsState.engine === 'sdk' ? 'active' : 'unconfigured';
     }
   }
@@ -396,7 +399,7 @@ export async function saveCopilotSettings() {
     settled = result;
     showTransientRelayNotice(
       String(result.engine) === 'sdk'
-        ? 'Copilot engine set to SDK (experimental). New conversations use the headless worker; running sessions keep the extension until they restart.'
+        ? 'Copilot engine set to SDK. New conversations use the headless worker; running sessions keep their engine until they restart.'
         : 'Copilot engine set to Extension. New conversations use the Copilot CLI.',
       6000,
     );
@@ -1630,8 +1633,8 @@ subscribePreviews(() => {
   renderPreviewsSection();
 });
 
-// `tab` / `providerTab` are optional deep links (e.g. openSettingsModal('providers', 'claude'));
-// omitting them restores the last tab the user was on.
+// `tab` / `providerTab` are optional deep links (e.g. openSettingsModal('providers', 'claude')
+// or openSettingsModal('relays')); omitting them restores the last tab the user was on.
 export function openSettingsModal(tab, providerTab) {
   closeChatActionsMenu();
   const modal = document.getElementById('settings-modal');
@@ -1674,6 +1677,7 @@ export function openSettingsModal(tab, providerTab) {
   void refreshBackgroundTaskTimeoutSetting();
   void refreshPushSettingsSection();
   void refreshPreviewsSection();
+  void refreshRemoteRelaysSection();
   void refreshFeatureFlagsSection();
   void refreshUpdateSection();
   modal?.classList.add('visible');

package/server/public/app/settings-tabs.js

@@ -1,7 +1,7 @@
 const SETTINGS_TAB_STORAGE_KEY = 'copilot_settings_tab';
 const SETTINGS_PROVIDER_TAB_STORAGE_KEY = 'copilot_settings_provider_tab';
 
-const SETTINGS_TABS = ['general', 'providers', 'previews', 'notifications', 'features'];
+const SETTINGS_TABS = ['general', 'providers', 'relays', 'previews', 'notifications', 'features'];
 // Copilot leads: it is the default provider, and `SETTINGS_PROVIDER_TABS[0]`
 // is also the sub-tab a first-time visitor lands on.
 const SETTINGS_PROVIDER_TABS = ['copilot', 'openai', 'claude', 'grok', 'cursor'];

package/server/public/app/socket-handlers.js

@@ -29,6 +29,7 @@ import {
   clearSubagentCancelInFlight,
   setConversationWatcherCount,
   setUpdateState,
+  applySessionWorkerSteering,
 } from './store.js';
 import { scheduleContextUsageRefresh } from './api-client.js';
 import { publishStatusEvent, recordStatusEvent } from './status-store.mjs';
@@ -41,10 +42,13 @@ import {
 import { upsertRelayBoard, loadRelayBoards, renderRelayBoards } from './relay-board-view.js';
 import { setConversationBackgroundTasks } from './background-tasks-view.mjs';
 import { setPreviews } from './preview-cards.mjs';
+import { setRemoteRelaysSnapshot } from './remote-relays-store.mjs';
+import { REMOTE_RELAY_SOCKET_EVENT } from './remote-relay-shared.mjs';
 import { applyClaudeAuthState } from './claude-auth-ui.js';
 import { applyGrokAuthState } from './grok-auth-ui.js';
 import { applyCliInstallState } from './cli-install-ui.js';
 import { renderUpdateSection } from './update-ui.js';
+import { applyHostSuspendState, applyRelayShutdownState } from './host-suspend-ui.js';
 import {
   showThinking,
   removeThinking,
@@ -66,6 +70,8 @@ import {
   removeUserBubbleCancelButton,
   updateSubagentBubbleFromStatus,
   markSubagentStopUnsupported,
+  syncComposerButtonState,
+  syncCancellableSteerButtons,
 } from './conversation-view.js';
 import { loadRepoBrowserTree, refreshRepoBrowserIfWorkspaceOpen } from './attachments-view.js';
 import { clearMessageSearchRuntimeState } from './message-search-view.js';
@@ -385,6 +391,14 @@ export async function connectSocket(overrideDeps) {
     setUpdateState(payload || null);
     renderUpdateSection();
   });
+  // Pending host suspend / relay restart: banner + menu labels on every
+  // device. Also sent on connect, so a reconnecting client catches up.
+  socket.on('host_suspend_state', (payload) => {
+    applyHostSuspendState(payload || null);
+  });
+  socket.on('relay_shutdown_state', (payload) => {
+    applyRelayShutdownState(payload || null);
+  });
   socket.on('grok_settings_updated', (payload) => {
     deps?.applyGrokSettingsState?.(payload || {});
     if (Number(payload?.reconciliation?.updatedUnstartedConversations || 0) > 0) {
@@ -419,7 +433,8 @@ export async function connectSocket(overrideDeps) {
   socket.on('user_message', ({ conversationId, messageId, senderClientId, message }) => {
     const normalizedMessage = {
       ...(message && typeof message === 'object' ? message : {}),
-      text: stripRelayPromptContext(message?.text, message?.mode),
+      // `origin`: a prompt another relay's agent sent; its header line hides.
+      text: stripRelayPromptContext(message?.text, message?.mode, { origin: message?.origin }),
     };
     if (senderClientId && senderClientId === CLIENT_ID) {
       pendingUserMessageIds.delete(messageId);
@@ -492,6 +507,11 @@ export async function connectSocket(overrideDeps) {
   socket.on('previews', ({ previews }) => {
     setPreviews(previews);
   });
+  // REPLACE semantics too: the relay ships the whole remote-relay list (no
+  // tokens) whenever a remote is added, removed, renamed or changes status.
+  socket.on(REMOTE_RELAY_SOCKET_EVENT, (payload) => {
+    setRemoteRelaysSnapshot(payload || null);
+  });
   socket.on('relay_activity', ({ conversationId, messageId, text, subagentRunId, metadata }) => {
     if (!messageId || !text) return;
     const entry = {
@@ -627,11 +647,27 @@ export async function connectSocket(overrideDeps) {
         runtimeSessionId: String(runtimeSessionId || conversations[id].runtimeSessionId || '').trim() || null,
       };
     }
+    // The composer reads the worker's steering snapshot under the session id
+    // just bound; fetch it now rather than on the next status poll.
+    refreshSessionWorkerStatus().catch(() => {});
     await refreshConversations();
     if (currentConvId === id) {
       await openConversation(id);
     }
   });
+  // A worker's steering snapshot changed (its heartbeat): the composer's
+  // Steer/Queue label and the pushed rows' Cancel follow it at once instead of
+  // on the next status poll.
+  socket.on('session_worker_steering', ({ sdkSessionId, steering } = {}) => {
+    const changed = applySessionWorkerSteering(sdkSessionId, steering);
+    if (changed === null) {
+      refreshSessionWorkerStatus().catch(() => {});
+      return;
+    }
+    if (!changed) return;
+    syncComposerButtonState();
+    syncCancellableSteerButtons();
+  });
   socket.on('message_status', ({ messageId, conversationId, status }) => {
     const normalizedStatus = String(status || '').trim().toLowerCase();
     const clearsProcessingStatus = ['done', 'failed', 'dropped', 'pending', 'parked', 'cancelled'].includes(normalizedStatus);

package/server/public/app/steered-turn-merge.mjs

@@ -0,0 +1,100 @@
+// Mid-turn steering: a message sent while a Claude turn was running is pushed
+// into the live turn. Three settle shapes reach the transcript:
+// - handoff: the interrupted reply settles with kind='absorbed', and the rest
+//   of the turn (with the final reply) lands on the steered message's own row.
+//   Those rows render as ONE flow — absorbed reply, steered user bubble,
+//   continuing reply.
+// - fold: the CLI answered the steer inside the running turn; its row settles
+//   with a kind='folded' stub, a compact marker under its own user message.
+//   It never merges forward — the next message is an ordinary turn.
+// - stopped: the steer was pushed into a turn the user then stopped, so it
+//   went unanswered (kind='stopped', a marker with Resend).
+// The steered user message of a fold or stop is still classed as steered.
+//
+// One idempotent DOM pass, same contract as syncTranscriptSeparators: every
+// insertion path (full render, live append, prepended history page) re-runs it,
+// so classes heal when the pair arrives across two loads and un-apply when a
+// re-render drops the absorbed marker. Kept DOM-only and import-light so it is
+// jsdom-testable (conversation-view.js touches window at module scope).
+import { SEPARATOR_CLASS } from './transcript-separators.mjs';
+
+export const ABSORBED_MSG_CLASS = 'msg-absorbed';
+export const STEERED_MSG_CLASS = 'msg-steered';
+export const STEERED_CONTINUATION_CLASS = 'msg-steered-continuation';
+export const FOLDED_MSG_CLASS = 'msg-folded';
+export const STEER_STOPPED_MSG_CLASS = 'msg-steer-stopped';
+
+/** The assistant row kinds that are settle markers of a steer, not replies. */
+export const STEER_MARKER_CLASS_BY_KIND = Object.freeze({
+  folded: FOLDED_MSG_CLASS,
+  stopped: STEER_STOPPED_MSG_CLASS,
+});
+
+function isSteerMarker(node) {
+  return !!node?.classList
+    && node.classList.contains('assistant')
+    && (node.classList.contains(FOLDED_MSG_CLASS) || node.classList.contains(STEER_STOPPED_MSG_CLASS));
+}
+
+/**
+ * The `.msg` row above, refusing to cross a separator row: a steering pair is
+ * seconds apart, so a day or compaction break between two rows proves they are
+ * NOT that pair, and pulling them together across it would look broken.
+ */
+function previousMessageNode(node) {
+  for (let prev = node?.previousElementSibling; prev; prev = prev.previousElementSibling) {
+    if (prev.classList?.contains(SEPARATOR_CLASS)) return null;
+    if (prev.classList?.contains('msg')) return prev;
+  }
+  return null;
+}
+
+/** The `.msg` row below, refusing to cross a separator row. */
+function nextMessageNode(node) {
+  for (let next = node?.nextElementSibling; next; next = next.nextElementSibling) {
+    if (next.classList?.contains(SEPARATOR_CLASS)) return null;
+    if (next.classList?.contains('msg')) return next;
+  }
+  return null;
+}
+
+function setClass(node, className, on) {
+  if (!node?.classList) return 0;
+  if (node.classList.contains(className) === on) return 0;
+  node.classList.toggle(className, on);
+  return 1;
+}
+
+/**
+ * Sync the merge classes over the container's rows. Returns the number of
+ * class changes (0 = the pass was a no-op), which the tests assert on.
+ */
+export function syncSteeredTurnMerge(container) {
+  if (!container || !container.children) return 0;
+  let changes = 0;
+  for (const node of container.children) {
+    if (!node.classList?.contains('msg')) continue;
+    if (node.classList.contains('user')) {
+      // A user row is steered iff the row above it is an absorbed reply, or
+      // its own settle marker (fold/stop) sits right below it.
+      const previous = previousMessageNode(node);
+      const steered = (!!previous
+        && previous.classList.contains('assistant')
+        && previous.classList.contains(ABSORBED_MSG_CLASS))
+        || isSteerMarker(nextMessageNode(node));
+      changes += setClass(node, STEERED_MSG_CLASS, steered);
+      continue;
+    }
+    if (node.classList.contains('assistant')) {
+      // The reply continuing a steered message keeps the group together. A
+      // settle marker is not a reply: it keeps its own compact styling.
+      const previous = previousMessageNode(node);
+      const continues = !isSteerMarker(node)
+        && !!previous
+        && previous.classList.contains('user')
+        && previous.classList.contains(STEERED_MSG_CLASS);
+      changes += setClass(node, STEERED_CONTINUATION_CLASS, continues);
+    }
+  }
+  return changes;
+}

package/server/public/app/store.js

@@ -1,3 +1,4 @@
+import { resolveNearBottomThresholdPx } from './transcript-viewport-anchor.mjs';
 import { recordCliLifecycleEvent, recordRelayLifecycleEvent } from './status-store.mjs';
 import { resolveRelayDotState } from './relay-dot-state.mjs';
 import { readRepoBrowserPreferences } from './repo-browser-preferences.mjs';
@@ -309,10 +310,23 @@ function cleanupStalePendingUserMessages(maxAgeMs = 15 * 60 * 1000) {
   }
 }
 
-export function trackPendingUserMessage(messageId, conversationId, text) {
+// An attachment-only send has no text to fingerprint; its attachments stand
+// in, so a screenshot send is tracked (and its bubble kept across rebuilds)
+// like any other.
+function pendingAttachmentFingerprint(attachments) {
+  const list = Array.isArray(attachments) ? attachments.filter(Boolean) : [];
+  if (!list.length) return '';
+  const firstSha = String(list[0]?.sha256 || list[0]?.uploaded?.sha256 || '').trim().toLowerCase();
+  return `attachments:${list.length}:${firstSha}`;
+}
+
+// Always records the entry — the conversation key is what scopes a kept
+// pending bubble to its own conversation — even when there is nothing to
+// fingerprint for the duplicate check.
+export function trackPendingUserMessage(messageId, conversationId, text, { attachments = [] } = {}) {
   const id = String(messageId || '').trim();
-  const fingerprint = normalizePendingMessageText(text);
-  if (!id || !fingerprint) return false;
+  if (!id) return false;
+  const fingerprint = normalizePendingMessageText(text) || pendingAttachmentFingerprint(attachments);
   cleanupStalePendingUserMessages();
   pendingUserMessageEntries.set(id, {
     conversationKey: pendingConversationKey(conversationId),
@@ -597,10 +611,7 @@ function resolveMessagesNearBottomThreshold(el, thresholdPx = null) {
   if (Number.isFinite(Number(thresholdPx)) && Number(thresholdPx) >= 0) {
     return Math.trunc(Number(thresholdPx));
   }
-  const viewportHeight = Number(el?.clientHeight || 0);
-  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) return 0;
-  const relativeThreshold = Math.floor(viewportHeight * 0.08);
-  return Math.min(48, Math.max(12, relativeThreshold));
+  return resolveNearBottomThresholdPx(el?.clientHeight);
 }
 
 export function isMessagesNearBottom(thresholdPx = null) {
@@ -876,6 +887,28 @@ export function resolveConversationUiState({ conversation = null, workerState =
   return fallbackUiState || 'offline';
 }
 
+// Composer steering snapshot from the worker's heartbeat: whether a typed
+// message would steer into the live turn, and why not when it wouldn't.
+function normalizeWorkerSteering(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  return {
+    turnActive: raw.turnActive === true,
+    canSteer: raw.canSteer === true,
+    holdReason: String(raw.holdReason || '').trim() || null,
+    // The turn the snapshot describes — lets the composer drop a hold that
+    // belongs to a previous turn (the heartbeat lags ~10s).
+    messageId: String(raw.messageId || '').trim() || null,
+    // The worker's own opt-in to mid-turn steering (both SDK workers send
+    // it); the composer's only steering gate — no provider rule backs it up.
+    supported: raw.supported === true,
+    // Pushed-but-unconsumed rows the worker can still pull back out of its
+    // runtime: their bubbles keep Cancel while listed here.
+    cancellableIds: Array.isArray(raw.cancellableIds)
+      ? raw.cancellableIds.map((id) => String(id || '').trim()).filter(Boolean)
+      : [],
+  };
+}
+
 function normalizeWorkerStateEntry(worker) {
   const sdkSessionId = normalizeWorkerSessionId(worker?.sdkSessionId);
   if (!sdkSessionId) return null;
@@ -889,13 +922,17 @@ function normalizeWorkerStateEntry(worker) {
     workerId: String(worker?.workerId || '').trim() || null,
     pid: Number.isInteger(Number(worker?.pid)) ? Number(worker.pid) : null,
     updatedAt: String(worker?.updatedAt || '').trim() || null,
+    steering: normalizeWorkerSteering(worker?.steering),
   };
 }
 
 function buildSessionWorkerStateHash(map) {
   const parts = [];
   for (const [sid, state] of map.entries()) {
-    parts.push(`${sid}:${state.status}:${state.uiState || ''}:${state.derivedUiState || ''}:${state.workerId || ''}:${state.pid || ''}:${state.updatedAt || ''}`);
+    const steering = state.steering
+      ? `${state.steering.turnActive ? 1 : 0}${state.steering.canSteer ? 1 : 0}${state.steering.supported ? 1 : 0}${state.steering.holdReason || ''}:${state.steering.messageId || ''}:${state.steering.cancellableIds.join(',')}`
+      : '';
+    parts.push(`${sid}:${state.status}:${state.uiState || ''}:${state.derivedUiState || ''}:${state.workerId || ''}:${state.pid || ''}:${state.updatedAt || ''}:${steering}`);
   }
   return parts.sort().join('|');
 }
@@ -917,6 +954,26 @@ export function setSessionWorkerStatesFromStatusPayload(payload) {
   return true;
 }
 
+/**
+ * Apply one worker's steering snapshot as the relay broadcasts it
+ * (`session_worker_steering`), ahead of the next status poll. Only an entry
+ * the client already knows is patched — the snapshot alone carries none of
+ * the entry's other fields. Returns null for an unknown session (the caller
+ * refreshes the whole status instead), otherwise whether anything changed.
+ */
+export function applySessionWorkerSteering(sdkSessionId, steering) {
+  const sid = normalizeWorkerSessionId(sdkSessionId);
+  const existing = sid ? sessionWorkerStates.get(sid) : null;
+  if (!existing) return null;
+  const next = new Map(sessionWorkerStates);
+  next.set(sid, { ...existing, steering: normalizeWorkerSteering(steering) });
+  const nextHash = buildSessionWorkerStateHash(next);
+  if (nextHash === sessionWorkerStateHash) return false;
+  sessionWorkerStateHash = nextHash;
+  sessionWorkerStates = next;
+  return true;
+}
+
 export function getSessionWorkerState(sdkSessionId) {
   const sid = normalizeWorkerSessionId(sdkSessionId);
   if (!sid) return null;
@@ -1194,7 +1251,19 @@ export function setModelBanner(message) {
   el.classList.add('visible');
 }
 
-export function showTransientRelayNotice(message, ms = 4000) {
+let transientNoticeSeq = 0;
+// The action notice on screen (or covered by a plain one), so a plain notice
+// that covers it hands the toast back afterwards instead of dropping the
+// action for good.
+let activeActionNotice = null;
+
+/**
+ * `action` ({ actionLabel, onAction }) adds one button to the toast; the
+ * toast then takes pointer input and hides as soon as the button is used.
+ * A plain notice shown over an action notice hands the toast back to it when
+ * it hides, for whatever time the action notice had left.
+ */
+export function showTransientRelayNotice(message, ms = 4000, action = null) {
   const text = String(message || '').trim();
   if (!text) return;
   // Transient notices render in the fixed #relay-toast, not #model-banner:
@@ -1209,17 +1278,59 @@ export function showTransientRelayNotice(message, ms = 4000) {
     }, Math.max(1500, Number(ms) || 4000));
     return;
   }
+  const durationMs = Math.max(1500, Number(ms) || 4000);
+  const noticeId = String(++transientNoticeSeq);
+  const actionLabel = String(action?.actionLabel || '').trim();
+  const hasAction = !!actionLabel && typeof action?.onAction === 'function';
+  const covered = !hasAction && activeActionNotice && activeActionNotice.expiresAt > Date.now()
+    ? activeActionNotice
+    : null;
+  if (hasAction) {
+    activeActionNotice = { noticeId, message: text, action, expiresAt: Date.now() + durationMs };
+  }
+  const hide = () => {
+    if (toast.dataset.noticeId !== noticeId) return;
+    toast.textContent = '';
+    toast.classList.remove('visible', 'has-action');
+    if (hasAction) {
+      if (activeActionNotice?.noticeId === noticeId) activeActionNotice = null;
+      return;
+    }
+    if (covered && activeActionNotice === covered) {
+      const remainingMs = covered.expiresAt - Date.now();
+      if (remainingMs > 0) showTransientRelayNotice(covered.message, Math.max(4000, remainingMs), covered.action);
+    }
+  };
+  toast.dataset.noticeId = noticeId;
   toast.textContent = text;
+  if (hasAction) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'relay-toast-action';
+    button.textContent = actionLabel;
+    button.addEventListener('click', () => {
+      hide();
+      action.onAction();
+    });
+    toast.appendChild(button);
+  }
+  toast.classList.toggle('has-action', hasAction);
   toast.classList.add('visible');
-  setTimeout(() => {
-    if (String(toast.textContent || '').trim() === text) {
-      toast.textContent = '';
-      toast.classList.remove('visible');
-    }
-  }, Math.max(1500, Number(ms) || 4000));
+  setTimeout(hide, durationMs);
+}
+
+// The screen's short side sizes phone-landscape text (index.html); unlike
+// the viewport, the on-screen keyboard never changes it. Refreshed here for
+// foldables, whose screen changes when they unfold.
+function syncScreenShortSide() {
+  const shortSide = Math.min(Number(window.screen?.width) || 0, Number(window.screen?.height) || 0);
+  if (!shortSide) return;
+  document.documentElement.style.setProperty('--screen-short-side', `${shortSide}px`);
+  document.documentElement.toggleAttribute('data-phone-screen', shortSide <= 500);
 }
 
 export function syncViewportMetrics() {
+  syncScreenShortSide();
   const layoutHeight = window.innerHeight || document.documentElement.clientHeight || 0;
   const layoutWidth = window.innerWidth || document.documentElement.clientWidth || 0;
   const vv = window.visualViewport;

package/server/public/app/sync-outbox.mjs

@@ -1,4 +1,5 @@
 import { BASE, CLIENT_ID, authHeaders, conversations } from './store.js';
+import { draftFlushRequestBody, getSyncedDraft, isStaleDraftFlushEntry } from './conversation-draft-sync.mjs';
 
 // Durable outbox for Background Sync: message sends, ask_user answers, and
 // draft flushes that failed (or might die mid-flight on pagehide) are queued
@@ -129,6 +130,10 @@ export async function replayOutboxFromPage() {
     db = await openOutboxDb();
     const entries = await readOutboxEntries(db);
     for (const { key, value } of entries) {
+      if (isStaleDraftFlushEntry(value)) {
+        await deleteOutboxEntry(db, key);
+        continue;
+      }
       let response = null;
       try {
         response = await fetch(`${BASE}${value.path}`, {
@@ -185,23 +190,26 @@ export async function initOutboxFallbackReplay() {
  * replay treats as final. Only queues when the draft differs from the last
  * persisted state.
  */
-export async function enqueueDraftFlushForBackgroundSync(conversationId) {
+export async function enqueueDraftFlushForBackgroundSync(conversationId, { afterPendingSend = false } = {}) {
   const id = String(conversationId || '').trim();
   if (!id) return false;
   const conversation = conversations[id];
   if (!conversation) return false;
   const input = document.getElementById('msg-input');
-  const draftText = String(input ? input.value : (conversation.draftText || ''));
-  if (draftText === String(conversation.draftText || '')) return false;
+  const body = draftFlushRequestBody({
+    inputText: input ? input.value : (conversation.draftText || ''),
+    synced: getSyncedDraft(id),
+    fallbackText: conversation.draftText,
+    fallbackUpdatedAt: conversation.draftUpdatedAt,
+    clientId: CLIENT_ID,
+    afterPendingSend,
+  });
+  if (!body) return false;
   const queued = await enqueueOutboxRequest({
     kind: 'draft-flush',
     path: `/api/conversation/${encodeURIComponent(id)}/draft`,
     method: 'PATCH',
-    body: JSON.stringify({
-      draftText,
-      clientId: CLIENT_ID,
-      baseDraftUpdatedAt: conversation.draftUpdatedAt || null,
-    }),
+    body: JSON.stringify(body),
   });
   if (queued) void registerOutboxSync();
   return queued;