@oar-sh/oar 0.9.2 → 0.9.4

package/server/public/app/conversation-view.js

@@ -10,6 +10,7 @@ import {
   hasPendingUserMessageDuplicate,
   clearPendingUserMessage,
   pendingUserMessageIds,
+  pendingUserMessageEntries,
   trackPendingUserMessage,
   seenMessageIds,
   relayActivities,
@@ -43,15 +44,22 @@ import {
   SHARED_CONVERSATION_TOKEN,
   imageEditTarget,
   setImageEditTarget as setStoredImageEditTarget,
+  getSessionWorkerState,
+  openSummaryModal,
+  closeSummaryModal,
 } from './store.js';
+import { getPendingQuestionCountsByConversation } from './ask-user-view.js';
 import { sendMessage as sendMessageApi, cancelConversationTurn, cancelQueuedConversationTurn, cancelSubagentRun, compactConversation as compactConversationApi, scheduleContextUsageRefresh, loadConversation as loadConversationApi, loadSharedConversation, updateConversationDraft as updateConversationDraftApi, updateMessageShareVisibility } from './api-client.js';
 import { enqueueOutboxRequest, registerOutboxSync } from './sync-outbox.mjs';
 import { linkifyWorkspaceMentionsInNode, parseAppFileHref, renderMarkdownPreview, rewriteLocalAssetUrlsInNode } from './router.js';
-import { renderAttachmentMarkup, clearAttachments, uploadAttachments, setComposerAttachments, setRepoBrowserSessionInfo, openDriveFilePreview, openWorkspaceFilePreview, openUploadedAttachmentViewer } from './attachments-view.js';
+import { renderAttachmentMarkup, removeComposerAttachments, uploadAttachments, setComposerAttachments, setRepoBrowserSessionInfo, openDriveFilePreview, openWorkspaceFilePreview, openUploadedAttachmentViewer } from './attachments-view.js';
 import { buildWorkflowRunCard } from './background-tasks-view.mjs';
 import { parsePreviewCommand, runPreviewCommand } from './preview-command.mjs';
 import { buildTranscriptPreviewCard } from './preview-cards.mjs';
 import { closeSlashAutocomplete, handleSlashAutocompleteKey, updateSlashAutocomplete } from './slash-autocomplete.mjs';
+import { closeMentionAutocomplete, handleMentionAutocompleteKey, updateMentionAutocomplete } from './mention-autocomplete.mjs';
+import { renderRemoteOriginBadgeHtml } from './remote-relay-origin-view.mjs';
+import { stripRemoteRelayDisplayArtifacts } from './relay-prompt-sanitizer.mjs';
 import { evaluateUnknownCommandGuard } from './slash-commands.mjs';
 import { attachCodeCopyButtons } from './code-copy.mjs';
 import { relayErrorCtaActions } from './relay-error-ctas.mjs';
@@ -61,7 +69,6 @@ import { openSettingsModal } from './settings-modal.js';
 import {
   serializeDraftAttachments,
   hydrateDraftAttachments,
-  mergeDraftAttachmentUpdate,
   draftAttachmentsEqual,
 } from './composer-attachment-cache.mjs';
 import { renderRelayQuestions } from './ask-user-view.js';
@@ -83,13 +90,36 @@ import {
   relayActivityEntryText,
 } from './activity-replay-state.mjs';
 import { SEPARATOR_CLASS, syncSeparatorRail, syncTranscriptSeparators } from './transcript-separators.mjs';
+import { ABSORBED_MSG_CLASS, STEER_MARKER_CLASS_BY_KIND, syncSteeredTurnMerge } from './steered-turn-merge.mjs';
 import { deriveComposerControlState, hasComposerDraft, hasUploadingAttachments } from './composer-control-state.mjs';
 import { buildLiveMessageFingerprint } from './live-message-dedupe.mjs';
 import { createInfiniteLoader } from './infinite-loader.js';
 import { normalizeDraftTimestampMs, isIncomingDraftTimestampStale } from './conversation-draft-timestamp-utils.mjs';
+import {
+  DRAFT_SYNC_PROTOCOL_VERSION,
+  MAX_DRAFT_TEXT_LENGTH,
+  draftTextForSync,
+  draftAttachmentsKey,
+  getSyncedDraft,
+  isDraftSaveNoop,
+  recordSyncedDraft,
+  resolveDraftConflict,
+  shouldApplyIncomingDraftToComposer,
+} from './conversation-draft-sync.mjs';
 import { isChatInteractionHeld, selectionIntersectsNode } from './selection-guard.mjs';
+import {
+  applyThinkingFollow,
+  getThinkingFollowMode,
+  initThinkingFollow,
+  observeThinkingBubble,
+  renderThinkingFollowButtonsHtml,
+  syncThinkingFollowButtons,
+  toggleThinkingFollowMode,
+  unobserveThinkingBubble,
+} from './thinking-follow.js';
 import { buildInFlightSnapshotKey } from './in-flight-snapshot.mjs';
 import { computeStablePrefixLength, planListPatch } from './streaming-dom-patch.mjs';
+import { prefixToolActivityEmoji } from './tool-activity-emoji.mjs';
 
 const CONVERSATION_HISTORY_PAGE_SIZE = 20;
 const HISTORY_LOAD_MORE_ID = 'history-load-more';
@@ -110,6 +140,7 @@ function syncSeparatorsNow() {
   const el = getMessagesElement();
   if (!el) return;
   syncTranscriptSeparators(el);
+  syncSteeredTurnMerge(el);
   observeTranscriptResize(el);
 }
 
@@ -145,6 +176,12 @@ const relayStreamStateByMessageId = new Map();
 const relayStreamTextByMessageId = new Map();
 const completedMessageIds = new Set();
 const bubbleCancelInFlight = new Set();
+// Un-steer requests the relay acknowledged with 'cancel-requested': the worker
+// answers asynchronously (message_status 'cancelled', or the row is answered
+// after all). Until then the bubble reads "Cancelling…"; the timer restores
+// the control if neither arrives.
+const UNSTEER_ACK_FALLBACK_MS = 20_000;
+const unsteerFallbackTimers = new Map();
 const shareVisibilityInFlight = new Set();
 const SUBAGENT_TERMINAL_STATUSES = new Set(['completed', 'failed', 'cancelled', 'dropped', 'done']);
 let lastRenderedMessageSnapshotKey = '';
@@ -306,6 +343,9 @@ const conversationHistoryLoader = createInfiniteLoader({
     // separator rows, and the height delta the restore measures has to include
     // them or the viewport jumps.
     syncTranscriptSeparators(el);
+    // A steering pair split across the page boundary heals here (the absorbed
+    // reply just arrived above its already-rendered steered user row).
+    syncSteeredTurnMerge(el);
     requestAnimationFrame(() => {
       if (!el || String(currentConvId || '').trim() !== currentId) return;
       const nextScrollHeight = el.scrollHeight;
@@ -408,13 +448,93 @@ function getActiveTurnForConversation(conversationId) {
   return activeTurnsByConversation.get(conversationKey) || null;
 }
 
+// The session worker id a conversation is bound to. Same hydration shapes
+// validateSelectedConversationBeforeSend handles: camelCase, snake_case, or
+// only the runtime session binding.
+function sdkSessionIdForConversation(conversationId) {
+  const conversation = conversations[String(conversationId || '').trim()] || null;
+  return String(
+    conversation?.sdkSessionId
+    || conversation?.sdk_session_id
+    || conversation?.runtimeSession?.sdkSessionId
+    || conversation?.runtimeSession?.sdk_session_id
+    || '',
+  ).trim();
+}
+
+// The worker-reported steering snapshot for a conversation's session worker
+// (rides the status payload from the worker's heartbeat), or null.
+function workerSteeringForConversation(conversationId) {
+  const sdkSessionId = sdkSessionIdForConversation(conversationId);
+  return sdkSessionId ? (getSessionWorkerState(sdkSessionId)?.steering || null) : null;
+}
+
+// Which conversations deliver a message typed mid-turn INTO the running turn
+// (steering) rather than queueing it behind: exactly those whose session
+// worker advertises it on its heartbeat steering snapshot (`supported` — the
+// Claude and Copilot SDK workers both do). One rule for every provider; the
+// provider name is not consulted (the name-based Claude rule was retired
+// 2026-09-26 once every live Claude worker advertised the flag). Workers that
+// do not advertise (the extension path, Cursor, Grok) stay strictly serial,
+// so their composer keeps saying "Queue".
+function conversationSupportsSteering(conversationId) {
+  const conversationKey = String(conversationId || '').trim();
+  if (!conversationKey) return false;
+  return workerSteeringForConversation(conversationKey)?.supported === true;
+}
+
+// Pushed rows the conversation's worker reports it can still pull back out of
+// its runtime (Copilot's queued lane): their bubbles keep Cancel.
+function cancellableSteerIdsForConversation(conversationId) {
+  const ids = workerSteeringForConversation(conversationId)?.cancellableIds;
+  return new Set(Array.isArray(ids) ? ids : []);
+}
+
+// Whether steering into this conversation's live turn is momentarily held,
+// and why. Two sources, freshest first: the client's own knowledge of an open
+// question card (instant — the worker's heartbeat snapshot lags up to ~10s),
+// then the worker-reported steering snapshot for the slower holds only it can
+// see (compaction, post-compaction adoption).
+function steeringHoldForConversation(conversationId) {
+  const conversationKey = String(conversationId || '').trim();
+  if (!conversationKey || !conversationSupportsSteering(conversationKey)) {
+    return { held: false, reason: null };
+  }
+  try {
+    const pendingQuestions = Number(getPendingQuestionCountsByConversation()?.[conversationKey] || 0);
+    if (pendingQuestions > 0) return { held: true, reason: 'question' };
+  } catch {}
+  const steering = workerSteeringForConversation(conversationKey);
+  if (steering && steering.turnActive && !steering.canSteer) {
+    // The client's own question knowledge is authoritative both ways: it saw
+    // the card answered instantly, while the worker snapshot lags ~10s.
+    if (steering.holdReason === 'question') return { held: false, reason: null };
+    // The 'delivery' hold covers the seconds while a turn-opening delivery is
+    // still in flight — but a heartbeat-captured copy outlives that window by
+    // up to a poll cycle and names the SAME turn, so the client cannot tell
+    // stale from live. Ignore it: a steer sent into that window just queues
+    // and rides in moments later, which was always safe.
+    if (steering.holdReason === 'delivery') return { held: false, reason: null };
+    // A snapshot naming a different turn than the one the client is watching
+    // is a leftover from the previous turn — ignore it.
+    const clientTurnMessageId = String(getActiveTurnForConversation(conversationKey)?.messageId || '').trim();
+    if (steering.messageId && clientTurnMessageId && steering.messageId !== clientTurnMessageId) {
+      return { held: false, reason: null };
+    }
+    return { held: true, reason: steering.holdReason || null };
+  }
+  return { held: false, reason: null };
+}
+
 function syncSendButtonState() {
   const btn = document.getElementById('send-btn');
   if (!btn) return;
   const currentTurn = getActiveTurnForConversation(currentConvId);
+  const steeringHold = currentTurn
+    ? steeringHoldForConversation(currentConvId)
+    : { held: false, reason: null };
   const state = deriveComposerControlState({
     hasActiveTurn: !!currentTurn,
-    cancelRequested: currentTurn?.cancelRequested === true,
     hasDraft: hasComposerDraft({
       text: document.getElementById('msg-input')?.value || '',
       attachmentCount: selectedAttachments.length,
@@ -422,6 +542,9 @@ function syncSendButtonState() {
     sendInFlight,
     modelMetadataBlocked: window.isModelMetadataBlocked?.() === true,
     attachmentsUploading: hasUploadingAttachments(selectedAttachments),
+    steeringSupported: conversationSupportsSteering(currentConvId),
+    steeringHeld: steeringHold.held,
+    steeringHoldReason: steeringHold.reason,
   });
   btn.disabled = state.disabled;
   btn.dataset.action = state.action;
@@ -429,12 +552,45 @@ function syncSendButtonState() {
   btn.title = state.title;
 }
 
-export function syncComposerControlState() {
+// Button-only refresh for status, poll and question paths. It must never save
+// the draft: an idle client that saves on every poll tick writes its stale
+// composer text over another device's draft.
+export function syncComposerButtonState() {
   syncSendButtonState();
-  void scheduleConversationDraftSave({
-    conversationId: currentConvId,
-    draftText: document.getElementById('msg-input')?.value || '',
-  });
+}
+
+// The composer's input handler: the user edited the text, so the draft is
+// saved (debounced) as well as the button refreshed. While a send owns the
+// draft nothing is saved — the send transaction clears the draft
+// unconditionally after any such save — but the text is still cached, and
+// the send saves it when it settles, wherever the user is by then.
+export function syncComposerAfterUserEdit() {
+  syncSendButtonState();
+  const text = document.getElementById('msg-input')?.value || '';
+  warnOnceIfDraftTooLong(text);
+  if (isDraftOwnedByPendingSend(currentConvId)) {
+    upsertConversationDraftState(currentConvId, { draftText: draftTextForSync(text) });
+    return;
+  }
+  void scheduleConversationDraftSave({ conversationId: currentConvId, draftText: text });
+}
+
+/** Whether a send in flight holds this conversation's draft saves back. */
+export function isConversationDraftHeldBySend(conversationId) {
+  return isDraftOwnedByPendingSend(conversationId);
+}
+
+let draftLengthWarningShown = false;
+
+function warnOnceIfDraftTooLong(text) {
+  const tooLong = String(text || '').length > MAX_DRAFT_TEXT_LENGTH;
+  if (tooLong && !draftLengthWarningShown) {
+    showTransientRelayNotice(
+      `Drafts are saved up to ${MAX_DRAFT_TEXT_LENGTH.toLocaleString('en-US')} characters; the rest stays only in this tab until you send.`,
+      7000,
+    );
+  }
+  draftLengthWarningShown = tooLong;
 }
 
 export function isSendInFlight() {
@@ -454,11 +610,44 @@ function isDraftOwnedByPendingSend(conversationId) {
   return sendOwnedDraftConversations.has(String(conversationId || '').trim());
 }
 
+function isDraftSavePending(conversationId) {
+  const id = String(conversationId || '').trim();
+  return draftSaveTimerByConversation.has(id) || draftSavePromiseByConversation.has(id);
+}
+
+/**
+ * Called by openConversation once the composer belongs to the next
+ * conversation (after the previous draft was flushed): replaces the previous
+ * conversation's text with the next one's cached draft, so no blur, keystroke
+ * or flush can save the old text under the new conversation — and so a load
+ * that fails still leaves that conversation's known draft on screen rather
+ * than an empty composer a keystroke would save over it. The load's hydrate
+ * then reconciles against it like any other incoming draft.
+ */
+export function beginConversationDraftSwitch(nextConversationId) {
+  const id = String(nextConversationId || '').trim();
+  const cached = id ? conversations[id] : null;
+  const text = String(cached?.draftText || '');
+  const attachments = Array.isArray(cached?.draftAttachments) ? cached.draftAttachments : [];
+  if (cached && !getSyncedDraft(id)) {
+    recordSyncedDraft(id, { text: draftTextForSync(text), attachments, updatedAt: cached.draftUpdatedAt || null });
+  }
+  if (attachments.length) setComposerAttachments(hydrateDraftAttachments(attachments));
+  const input = document.getElementById('msg-input');
+  if (input && input.value !== text) {
+    input.value = text;
+    autoResize(input);
+  }
+  syncSendButtonState();
+}
+
+// Omitted version fields keep their current values: a local edit changes the
+// text only, never the server version it was based on.
 function upsertConversationDraftState(conversationId, {
   draftText = '',
   draftAttachments = undefined,
-  draftUpdatedAt = null,
-  draftUpdatedByClientId = null,
+  draftUpdatedAt = undefined,
+  draftUpdatedByClientId = undefined,
 } = {}) {
   const id = String(conversationId || '').trim();
   if (!id || !conversations[id]) return;
@@ -469,8 +658,10 @@ function upsertConversationDraftState(conversationId, {
     draftAttachments: draftAttachments === undefined
       ? (existing.draftAttachments || [])
       : (Array.isArray(draftAttachments) ? draftAttachments : []),
-    draftUpdatedAt: draftUpdatedAt || null,
-    draftUpdatedByClientId: draftUpdatedByClientId || null,
+    draftUpdatedAt: draftUpdatedAt === undefined ? (existing.draftUpdatedAt || null) : (draftUpdatedAt || null),
+    draftUpdatedByClientId: draftUpdatedByClientId === undefined
+      ? (existing.draftUpdatedByClientId || null)
+      : (draftUpdatedByClientId || null),
   };
 }
 
@@ -485,7 +676,8 @@ function upsertConversationDraftState(conversationId, {
  */
 export function persistComposerAttachments() {
   const id = String(currentConvId || '').trim();
-  if (!id) return null;
+  // A send owns the draft: its post-send save picks the attachments up.
+  if (!id || isDraftOwnedByPendingSend(id)) return null;
   return scheduleConversationDraftSave({
     conversationId: id,
     draftText: document.getElementById('msg-input')?.value || '',
@@ -494,37 +686,251 @@ export function persistComposerAttachments() {
   });
 }
 
-async function persistConversationDraft(conversationId, draftText, draftAttachments = undefined) {
+// Saves the conversation's composer text (or, off screen, its cached text)
+// when it differs from the synced draft.
+function saveComposerIfUnsynced(conversationId) {
+  const synced = getSyncedDraft(conversationId);
+  const viewing = isCurrentConversation(conversationId);
+  const text = draftTextForSync(viewing
+    ? (document.getElementById('msg-input')?.value || '')
+    : (conversations[conversationId]?.draftText || ''));
+  const attachments = viewing ? serializeDraftAttachments(selectedAttachments) : undefined;
+  const attachmentsKey = draftAttachmentsKey(attachments);
+  if (synced && synced.text === text && (attachmentsKey === null || synced.attachmentsKey === null || synced.attachmentsKey === attachmentsKey)) return;
+  void scheduleConversationDraftSave({ conversationId, draftText: text, draftAttachments: attachments });
+}
+
+// The server echoes a stored message to its sender (user_message with this
+// client's id), which drops it from pendingUserMessageIds; status events for
+// it do the same. Either means the send landed even if its response failed.
+function hasSendEchoArrived(clientMessageId) {
+  const id = String(clientMessageId || '').trim();
+  return !!id && !pendingUserMessageIds.has(id);
+}
+
+// A send that failed hands its text back to the composer. Text typed while it
+// was in flight is kept after it (blank line between) instead of being
+// replaced, so neither is lost; if the send never emptied the composer, the
+// composer still holds the message and is kept as it is. A send whose echo
+// already arrived did land (the failure was only the response): putting its
+// text back would invite a duplicate, so only the typing is kept.
+function restoreComposerAfterFailedSend(conversationId, originalText, { viewing, composerCleared, sendLanded = false }) {
+  const input = document.getElementById('msg-input');
+  const current = viewing
+    ? String(input?.value || '')
+    : String(conversations[conversationId]?.draftText || '');
+  let text = originalText;
+  if (sendLanded) text = current;
+  else if (!composerCleared) text = current || originalText;
+  else if (current.trim()) text = `${originalText}
+
+${current}`;
+  if (viewing && input) {
+    input.value = text;
+    autoResize(input);
+  }
+  void scheduleConversationDraftSave({ conversationId, draftText: text, immediate: true });
+}
+
+function isDraftVersionConflict(response) {
+  return response?.conflict === true || response?.code === 'draft-version-conflict';
+}
+
+function isCurrentConversation(conversationId) {
+  return String(currentConvId || '').trim() === String(conversationId || '').trim();
+}
+
+// The version a save is based on. Always sent — even when null, which tells
+// the server "I have seen no draft yet" and is conflict-checked like any other.
+function draftSaveBaseVersion(conversationId) {
+  const synced = getSyncedDraft(conversationId);
+  if (synced) return synced.updatedAt || null;
+  return conversations[conversationId]?.draftUpdatedAt || null;
+}
+
+function sendConversationDraft(conversationId, text, draftAttachments, baseDraftUpdatedAt) {
+  return updateConversationDraftApi(conversationId, {
+    draftText: text,
+    clientId: CLIENT_ID,
+    draftSyncVersion: DRAFT_SYNC_PROTOCOL_VERSION,
+    baseDraftUpdatedAt,
+    ...(draftAttachments === undefined ? {} : { draftAttachments }),
+  });
+}
+
+function acknowledgeSavedDraft(conversationId, response, sentText) {
+  const serverText = String(response?.draftText || '');
+  const updatedAt = response?.draftUpdatedAt || response?.updatedAt || null;
+  // The server stores whitespace-only text as "no draft"; remembering what was
+  // sent keeps that composer from looking modified against the empty echo.
+  const text = !serverText && !String(sentText || '').trim() ? String(sentText || '') : serverText;
+  recordSyncedDraft(conversationId, { text, attachments: response?.draftAttachments, updatedAt });
+  upsertConversationDraftState(conversationId, {
+    draftText: serverText,
+    draftAttachments: response?.draftAttachments,
+    draftUpdatedAt: updatedAt,
+    draftUpdatedByClientId: response?.draftUpdatedByClientId || response?.senderClientId || null,
+  });
+}
+
+function applyDraftToComposer(conversationId, text, draftAttachments = undefined) {
+  if (!isCurrentConversation(conversationId)) return;
+  if (Array.isArray(draftAttachments)) {
+    const hydrated = hydrateDraftAttachments(draftAttachments);
+    if (!draftAttachmentsEqual(selectedAttachments, hydrated)) setComposerAttachments(hydrated);
+  }
+  const input = document.getElementById('msg-input');
+  if (input && draftTextForSync(input.value) !== text) {
+    input.value = text;
+    autoResize(input);
+  }
+  syncSendButtonState();
+}
+
+function adoptServerDraft(conversationId, {
+  draftText = '',
+  draftAttachments = undefined,
+  draftUpdatedAt = null,
+  draftUpdatedByClientId = null,
+} = {}) {
+  const text = String(draftText || '');
+  clearDraftTimerForConversation(conversationId);
+  recordSyncedDraft(conversationId, { text, attachments: draftAttachments, updatedAt: draftUpdatedAt });
+  upsertConversationDraftState(conversationId, { draftText: text, draftAttachments, draftUpdatedAt, draftUpdatedByClientId });
+  applyDraftToComposer(conversationId, text, draftAttachments);
+}
+
+// The draft that lost the last conflict, per conversation, so it can be put
+// back. It lives outside the toast: a later notice may cover the toast, and
+// the action reads the slot when tapped. Cleared when the draft is sent.
+const restorableDraftByConversation = new Map();
+
+function draftHasContent({ text = '', attachments = undefined } = {}) {
+  return !!String(text || '').trim() || (Array.isArray(attachments) && attachments.length > 0);
+}
+
+function currentComposerDraft(conversationId) {
+  if (isCurrentConversation(conversationId)) {
+    return {
+      text: String(document.getElementById('msg-input')?.value || ''),
+      attachments: serializeDraftAttachments(selectedAttachments),
+    };
+  }
+  const conversation = conversations[conversationId] || {};
+  return {
+    text: String(conversation.draftText || ''),
+    attachments: Array.isArray(conversation.draftAttachments) ? conversation.draftAttachments : [],
+  };
+}
+
+function offerRestorableDraft(conversationId, message, actionLabel) {
+  showTransientRelayNotice(message, 20000, {
+    actionLabel,
+    onAction: () => swapRestorableDraft(conversationId),
+  });
+}
+
+function keepLosingDraft(conversationId, losingDraft) {
+  if (!draftHasContent(losingDraft)) return;
+  restorableDraftByConversation.set(String(conversationId || '').trim(), losingDraft);
+  offerRestorableDraft(conversationId, 'Your edit replaced a newer draft from another device.', 'Restore');
+}
+
+// Restore is a swap: the draft it replaces takes the slot, so the offer can
+// always be reversed.
+function swapRestorableDraft(conversationId) {
+  const id = String(conversationId || '').trim();
+  const restored = restorableDraftByConversation.get(id);
+  if (!restored) return;
+  restorableDraftByConversation.set(id, currentComposerDraft(id));
+  const text = String(restored.text || '');
+  applyDraftToComposer(id, text, restored.attachments);
+  void scheduleConversationDraftSave({
+    conversationId: id,
+    draftText: text,
+    draftAttachments: Array.isArray(restored.attachments) ? restored.attachments : undefined,
+    immediate: true,
+  });
+  offerRestorableDraft(id, 'Draft restored.', 'Undo');
+}
+
+// A 409 means another client saved since this one's base version. The local
+// composer is re-read here (not the text the save carried): it may have moved
+// on while the request was in flight, and the newest keystroke is what wins.
+async function resolveDraftSaveConflict(id, { text, draftAttachments, synced, conflict }) {
+  const serverText = String(conflict.draftText || '');
+  const serverAttachments = Array.isArray(conflict.draftAttachments) ? conflict.draftAttachments : undefined;
+  const viewing = isCurrentConversation(id);
+  const localText = viewing ? draftTextForSync(document.getElementById('msg-input')?.value ?? text) : text;
+  const localAttachments = draftAttachments === undefined
+    ? undefined
+    : (viewing ? serializeDraftAttachments(selectedAttachments) : draftAttachments);
+  let outcome = resolveDraftConflict({
+    localText,
+    localAttachmentsKey: draftAttachmentsKey(localAttachments),
+    baseText: synced ? synced.text : null,
+    baseAttachmentsKey: synced ? synced.attachmentsKey : null,
+    serverText,
+    serverAttachmentsKey: draftAttachmentsKey(serverAttachments),
+  });
+  // Uploads in flight are not in the fingerprint; adopting would replace the
+  // attachment list and drop them, so they count as a local edit.
+  if (outcome === 'adopt' && viewing && hasUploadingAttachments(selectedAttachments)) outcome = 'keep-local';
+  if (outcome === 'adopt') {
+    adoptServerDraft(id, conflict);
+    return conflict;
+  }
+  recordSyncedDraft(id, { text: serverText, attachments: serverAttachments, updatedAt: conflict.draftUpdatedAt || null });
+  if (outcome === 'converged') {
+    upsertConversationDraftState(id, {
+      draftText: serverText,
+      draftAttachments: serverAttachments,
+      draftUpdatedAt: conflict.draftUpdatedAt || null,
+      draftUpdatedByClientId: conflict.draftUpdatedByClientId || null,
+    });
+    return conflict;
+  }
+  const retry = await sendConversationDraft(id, localText, localAttachments, conflict.draftUpdatedAt || null);
+  if (retry?.ok) {
+    acknowledgeSavedDraft(id, retry, localText);
+    const localKey = draftAttachmentsKey(localAttachments);
+    const lostSomething = serverText !== localText
+      || (localKey !== null && localKey !== draftAttachmentsKey(serverAttachments));
+    if (lostSomething) keepLosingDraft(id, { text: serverText, attachments: serverAttachments });
+    return retry;
+  }
+  // Lost a second race. The base stays at the first conflict's version, so the
+  // retry scheduled here conflicts again and resolves (with its restore offer)
+  // through this same path instead of leaving the edit unsaved.
+  if (isDraftVersionConflict(retry)) {
+    void scheduleConversationDraftSave({ conversationId: id, draftText: localText, draftAttachments: localAttachments });
+  }
+  return retry || null;
+}
+
+async function persistConversationDraft(conversationId, draftText, draftAttachments = undefined, { force = false } = {}) {
   const id = String(conversationId || '').trim();
   if (!id) return null;
   const text = String(draftText || '');
   const runPersist = async () => {
-    const baseDraftUpdatedAt = conversations[id]?.draftUpdatedAt || null;
-    const response = await updateConversationDraftApi(id, {
-      draftText: text,
-      clientId: CLIENT_ID,
-      baseDraftUpdatedAt,
-      ...(draftAttachments === undefined ? {} : { draftAttachments }),
-    });
-    if (!response?.ok) {
-      if (response?.conflict === true || response?.code === 'draft-version-conflict') {
-        applyIncomingConversationDraftUpdate({
-          conversationId: id,
-          draftText: response.draftText || '',
-          draftAttachments: response.draftAttachments,
-          draftUpdatedAt: response.draftUpdatedAt || null,
-          draftUpdatedByClientId: response.draftUpdatedByClientId || null,
-        });
-      }
-      return response || null;
+    const synced = getSyncedDraft(id);
+    if (!force && isDraftSaveNoop({
+      synced,
+      text,
+      attachmentsKey: draftAttachmentsKey(draftAttachments),
+      knownUpdatedAt: conversations[id]?.draftUpdatedAt || null,
+    })) {
+      return { ok: true, skipped: true, conversationId: id, draftText: synced.text, draftUpdatedAt: synced.updatedAt };
     }
-    upsertConversationDraftState(id, {
-      draftText: response.draftText,
-      draftAttachments: response.draftAttachments,
-      draftUpdatedAt: response.draftUpdatedAt || response.updatedAt || null,
-      draftUpdatedByClientId: response.draftUpdatedByClientId || response.senderClientId || null,
-    });
-    return response;
+    const response = await sendConversationDraft(id, text, draftAttachments, draftSaveBaseVersion(id));
+    if (response?.ok) {
+      acknowledgeSavedDraft(id, response, text);
+      return response;
+    }
+    if (isDraftVersionConflict(response)) {
+      return resolveDraftSaveConflict(id, { text, draftAttachments, synced, conflict: response });
+    }
+    return response || null;
   };
   const previous = draftSavePromiseByConversation.get(id) || Promise.resolve();
   const next = previous
@@ -544,19 +950,20 @@ async function scheduleConversationDraftSave({
   draftText,
   draftAttachments = undefined,
   immediate = false,
+  force = false,
 } = {}) {
   const id = String(conversationId || '').trim();
   if (!id) return null;
-  const text = String(draftText || '');
+  const text = draftTextForSync(draftText);
   upsertConversationDraftState(id, { draftText: text, draftAttachments });
   clearDraftTimerForConversation(id);
   if (immediate) {
-    return persistConversationDraft(id, text, draftAttachments);
+    return persistConversationDraft(id, text, draftAttachments, { force });
   }
   return new Promise((resolve) => {
     const timer = setTimeout(() => {
       draftSaveTimerByConversation.delete(id);
-      persistConversationDraft(id, text, draftAttachments).then(resolve).catch(() => resolve(null));
+      persistConversationDraft(id, text, draftAttachments, { force }).then(resolve).catch(() => resolve(null));
     }, COMPOSER_DRAFT_DEBOUNCE_MS);
     draftSaveTimerByConversation.set(id, timer);
   });
@@ -567,6 +974,11 @@ export async function flushConversationDraft(conversationId = currentConvId) {
   if (!id) return null;
   const input = document.getElementById('msg-input');
   const draftText = String((id === String(currentConvId || '').trim() && input) ? input.value : (conversations[id]?.draftText || ''));
+  if (isDraftOwnedByPendingSend(id)) {
+    // Held: the send saves the cached text once it settles.
+    upsertConversationDraftState(id, { draftText: draftTextForSync(draftText) });
+    return null;
+  }
   return scheduleConversationDraftSave({
     conversationId: id,
     draftText,
@@ -574,6 +986,46 @@ export async function flushConversationDraft(conversationId = currentConvId) {
   });
 }
 
+// Shared tail of both incoming-draft paths (conversation load/poll and the
+// cross-client broadcast) for the conversation on screen. `incoming.attachments`
+// is undefined when the update did not carry attachments.
+function reconcileIncomingComposerDraft(id, incoming) {
+  const input = document.getElementById('msg-input');
+  if (!input) return;
+  const synced = getSyncedDraft(id);
+  const composerAttachments = serializeDraftAttachments(selectedAttachments);
+  if (!shouldApplyIncomingDraftToComposer({
+    inputText: input.value,
+    incomingText: incoming.text,
+    syncedText: synced ? synced.text : null,
+    inputAttachmentsKey: draftAttachmentsKey(composerAttachments),
+    incomingAttachmentsKey: draftAttachmentsKey(incoming.attachments),
+    syncedAttachmentsKey: synced ? synced.attachmentsKey : null,
+    attachmentsUploading: hasUploadingAttachments(selectedAttachments),
+  })) {
+    // An unsaved local edit (typing, an attachment change, or a flush that
+    // failed). Re-save it, attachments included, so the version check
+    // decides: the same version saves, a newer one conflicts.
+    if (!isDraftSavePending(id)) {
+      void scheduleConversationDraftSave({ conversationId: id, draftText: input.value, draftAttachments: composerAttachments });
+    }
+    syncSendButtonState();
+    return;
+  }
+  recordSyncedDraft(id, incoming);
+  if (Array.isArray(incoming.attachments)) {
+    const hydrated = hydrateDraftAttachments(incoming.attachments);
+    if (!draftAttachmentsEqual(selectedAttachments, hydrated)) setComposerAttachments(hydrated);
+  }
+  // A composer longer than the draft limit matches its truncated echo; it must
+  // not be cut down to it.
+  if (draftTextForSync(input.value) !== incoming.text) {
+    input.value = incoming.text;
+    autoResize(input);
+  }
+  syncSendButtonState();
+}
+
 export function hydrateConversationDraft(conversationId, {
   draftText = '',
   draftAttachments = [],
@@ -595,23 +1047,12 @@ export function hydrateConversationDraft(conversationId, {
     draftUpdatedAt,
     draftUpdatedByClientId,
   });
-  if (String(currentConvId || '').trim() !== id) return;
-  // Restore the composer's pending attachments for the conversation being opened.
-  if (!draftAttachmentsEqual(selectedAttachments, hydrateDraftAttachments(normalizedAttachments))) {
-    setComposerAttachments(hydrateDraftAttachments(normalizedAttachments));
-  }
-  const input = document.getElementById('msg-input');
-  if (!input) return;
-  const isFocused = document.activeElement === input;
-  if (isFocused && input.value !== normalizedDraftText) {
-    syncSendButtonState();
+  const syncedDraft = { text: normalizedDraftText, attachments: normalizedAttachments, updatedAt: draftUpdatedAt };
+  if (String(currentConvId || '').trim() !== id) {
+    if (!isDraftSavePending(id)) recordSyncedDraft(id, syncedDraft);
     return;
   }
-  if (input.value !== normalizedDraftText) {
-    input.value = normalizedDraftText;
-    autoResize(input);
-  }
-  syncSendButtonState();
+  reconcileIncomingComposerDraft(id, syncedDraft);
 }
 
 export function applyIncomingConversationDraftUpdate({
@@ -638,26 +1079,12 @@ export function applyIncomingConversationDraftUpdate({
     draftUpdatedAt,
     draftUpdatedByClientId: draftUpdatedByClientId || senderClientId || null,
   });
-  if (String(currentConvId || '').trim() !== id) return;
-  if (draftAttachments !== undefined) {
-    const merged = mergeDraftAttachmentUpdate({
-      existing: selectedAttachments,
-      incoming: hydrateDraftAttachments(Array.isArray(draftAttachments) ? draftAttachments : []),
-      existingUpdatedAt: conversations[id]?.draftUpdatedAt || null,
-      incomingUpdatedAt: draftUpdatedAt,
-      isLocalEcho: senderClientId === CLIENT_ID,
-    });
-    if (merged.changed) setComposerAttachments(merged.attachments);
-  }
-  const input = document.getElementById('msg-input');
-  if (!input) return;
-  const isFocused = document.activeElement === input;
-  if (isFocused && input.value !== incomingDraftText) return;
-  if (input.value !== incomingDraftText) {
-    input.value = incomingDraftText;
-    autoResize(input);
+  const syncedDraft = { text: incomingDraftText, attachments: draftAttachments, updatedAt: draftUpdatedAt };
+  if (String(currentConvId || '').trim() !== id) {
+    if (!isDraftSavePending(id)) recordSyncedDraft(id, syncedDraft);
+    return;
   }
-  syncSendButtonState();
+  reconcileIncomingComposerDraft(id, syncedDraft);
 }
 
 function setConversationTurnState(conversationId, state = null) {
@@ -800,8 +1227,18 @@ function createMessageNode(msg, msgId = null, force = false) {
     seenMessageIds.add(msgId);
   }
 
+  // A prompt another relay's agent sent carries `origin`: its header line is
+  // hidden (the badge below says the same), and a stray remote-relay mention
+  // hint never shows on any user bubble.
+  const remoteOrigin = (msg?.role === 'user' && msg?.origin && typeof msg.origin === 'object') ? msg.origin : null;
+  if (msg?.role === 'user') {
+    const displayText = stripRemoteRelayDisplayArtifacts(msg.text, { origin: remoteOrigin });
+    if (displayText !== String(msg.text ?? '')) msg = { ...msg, text: displayText };
+  }
+
   const div = document.createElement('div');
   div.className = `msg ${msg.role}`;
+  if (remoteOrigin) div.classList.add('msg-from-remote-relay');
   if (msgId) div.dataset.messageId = msgId;
   const fingerprint = buildLiveMessageFingerprint({
     ...(msg && typeof msg === 'object' ? msg : {}),
@@ -830,6 +1267,19 @@ function createMessageNode(msg, msgId = null, force = false) {
   const continuationTag = (msg.role === 'assistant' && String(msg?.kind || '').trim() === 'continuation')
     ? ' <span class="msg-continuation" title="The agent continued on its own after a background task finished.">background continuation</span>'
     : '';
+  // A steering absorption: this reply continues through the next (steered)
+  // user message. The class feeds syncSteeredTurnMerge, which joins the trio
+  // into one visual flow.
+  const messageKind = String(msg?.kind || '').trim();
+  if (msg.role === 'assistant' && messageKind === 'absorbed') {
+    div.classList.add(ABSORBED_MSG_CLASS);
+  }
+  // The settle marker of a steer the CLI consumed without a turn of its own:
+  // folded into (and answered by) the turn above, or cut off unanswered by a
+  // Stop. Compact, attached to its own user message, never merging forward.
+  const steerMarkerClass = msg.role === 'assistant' ? STEER_MARKER_CLASS_BY_KIND[messageKind] : null;
+  if (steerMarkerClass) div.classList.add(steerMarkerClass);
+  const isStoppedSteer = msg.role === 'assistant' && messageKind === 'stopped';
   // A turn answered by a different provider than the conversation is bound to
   // (e.g. the Copilot relay answering a Cursor conversation) must be visible,
   // not silent: it ran on another plan than the header indicates.
@@ -907,7 +1357,15 @@ function createMessageNode(msg, msgId = null, force = false) {
     : 'msg-bubble';
 
   const isQueuedUserMessage = msg.role === 'user' && msgId && pendingUserMessageIds.has(msgId);
-  const isCancelInFlight = isQueuedUserMessage && bubbleCancelInFlight.has(msgId);
+  // A row the worker pushed into its runtime but reports as still unconsumed
+  // (Copilot's queued lane, heartbeat `cancellableIds`) keeps Cancel too: the
+  // worker pulls it back out and the row ends cancelled, never answered.
+  const isCancellableSteer = !isQueuedUserMessage
+    && msg.role === 'user'
+    && !!msgId
+    && cancellableSteerIdsForConversation(currentConvId).has(msgId);
+  const showsCancelButton = isQueuedUserMessage || isCancellableSteer;
+  const isCancelInFlight = showsCancelButton && bubbleCancelInFlight.has(msgId);
   const hiddenFromShares = msg?.hiddenFromShares === true;
   const activeTurnMessageId = String(getActiveTurnForConversation(currentConvId)?.messageId || '').trim();
   const sourceMessageId = String(msg?.sourceMessageId || '').trim();
@@ -931,12 +1389,25 @@ function createMessageNode(msg, msgId = null, force = false) {
       .map((item) => `<button type="button" class="bubble-action-btn" data-action="relay-error-cta" data-cta="${escHtml(item.action)}">${escHtml(item.label)}</button>`)
       .join('')}</div>`
     : '';
-  const userBubbleActionsHtml = (!IS_SHARED_VIEW && isQueuedUserMessage)
-    ? `<div class="msg-bubble-actions"><button type="button" class="bubble-action-btn${isCancelInFlight ? ' stopping' : ''}" data-action="cancel-queued" data-message-id="${escHtml(msgId)}"${isCancelInFlight ? ' disabled' : ''}>${isCancelInFlight ? 'Cancelling…' : 'Cancel'}</button></div>`
+  const userBubbleActionsHtml = (!IS_SHARED_VIEW && showsCancelButton)
+    ? buildUserBubbleCancelActionsMarkup(msgId, isCancelInFlight)
+    : '';
+  // Resent per the relay (any device, survives reloads), or by this page.
+  const resendState = isStoppedSteer && msgId
+    ? (stoppedSteerResends.get(msgId) || (String(msg?.resentAs || '').trim() ? { status: 'sent' } : null))
+    : null;
+  const resendLabel = resendState?.status === 'sent' ? 'Resent' : (resendState ? 'Resending…' : 'Resend');
+  const stoppedSteerActionsHtml = (!IS_SHARED_VIEW && isStoppedSteer && msgId)
+    ? `<div class="msg-bubble-actions"><button type="button" class="bubble-action-btn" data-action="resend-stopped-steer" data-message-id="${escHtml(msgId)}" title="Send this message again as a new turn"${resendState ? ' disabled' : ''}>${resendLabel}</button></div>`
+    : '';
+
+  // Shared viewers get the badge without the link to the other relay.
+  const originBadgeHtml = remoteOrigin
+    ? renderRemoteOriginBadgeHtml(remoteOrigin, { linkable: !IS_SHARED_VIEW })
     : '';
 
   div.innerHTML = `
-    <div class="${bubbleClass}">${shareVisibilityActionHtml}${thoughtsHtml}${content}${relayErrorCtaHtml}${attachmentHtml}${activityHtml}${subagentHtml}${workflowRunsHtml}${previewCardsHtml}${userBubbleActionsHtml}</div>
+    <div class="${bubbleClass}">${shareVisibilityActionHtml}${thoughtsHtml}${originBadgeHtml}${content}${relayErrorCtaHtml}${attachmentHtml}${activityHtml}${subagentHtml}${workflowRunsHtml}${previewCardsHtml}${userBubbleActionsHtml}${stoppedSteerActionsHtml}</div>
     <div class="msg-label">${label}${modelTag}${reasoningTag}${modeTag}${autoTag}${continuationTag}${crossProviderTag}${usageTurnTag}${usageRemainingTag}${usageStaleTag} · ${fmtDate(msg.timestamp)}</div>`;
 
   const bubble = div.querySelector('.msg-bubble');
@@ -971,6 +1442,16 @@ function createMessageNode(msg, msgId = null, force = false) {
   }
   div.querySelectorAll('pre code').forEach((b) => hljs.highlightElement(b));
   attachCodeCopyButtons(div);
+  // What a Resend of this message would send, kept on the node itself so it
+  // lives exactly as long as the row is on screen.
+  if (msg.role === 'user') {
+    const { references, unavailable } = attachmentReferencesForResend(attachments);
+    div[RESEND_PAYLOAD_KEY] = {
+      text: String(msg.text || ''),
+      attachments: references,
+      unavailableAttachments: unavailable,
+    };
+  }
   return div;
 }
 
@@ -1032,34 +1513,7 @@ export function decorateActivityText(text) {
     return tokenMasked.replace(/([A-Za-z]:)?(?:[\\/~.]?[\\/])(?:[^\\/\s]+[\\/])+([^\\/\s]+)/g, (_m, _prefix, basename) => basename);
   };
   const sharedSafeValue = IS_SHARED_VIEW ? maskSharedPathSegments(value) : value;
-  if (/^[\u{1F300}-\u{1FAFF}\u2600-\u27BF]/u.test(sharedSafeValue)) return sharedSafeValue;
-  if (sharedSafeValue.startsWith('● ')) return `🔄 ${sharedSafeValue.slice(2).trim()}`;
-  if (/^Model selected:/i.test(sharedSafeValue)) return `🧠 ${sharedSafeValue}`;
-  if (/^Search \((glob|grep)\)/i.test(sharedSafeValue)) return `🔍 ${sharedSafeValue}`;
-  if (/^Tool \(ask_user\)/i.test(sharedSafeValue)) return `❓ ${sharedSafeValue}`;
-  if (/^Tool \(view\)/i.test(sharedSafeValue)) return `👀 ${sharedSafeValue}`;
-  if (/^Tool \(apply_patch\)/i.test(sharedSafeValue)) return `🪡 ${sharedSafeValue}`;
-  if (/^Tool \(powershell\)/i.test(sharedSafeValue)) return `🪓 ${sharedSafeValue}`;
-  if (/^Tool \(edit\)/i.test(sharedSafeValue)) return `📝 ${sharedSafeValue}`;
-  if (/^Tool \(read_file\)/i.test(sharedSafeValue)) return `📄 ${sharedSafeValue}`;
-  if (/^Tool \((grep_search|file_search)\)/i.test(sharedSafeValue)) return `🔎 ${sharedSafeValue}`;
-  if (/^Tool \(semantic_search\)/i.test(sharedSafeValue)) return `🧭 ${sharedSafeValue}`;
-  if (/^Tool \(vscode_listCodeUsages\)/i.test(sharedSafeValue)) return `🔗 ${sharedSafeValue}`;
-  if (/^Tool \(vscode_renameSymbol\)/i.test(sharedSafeValue)) return `✏️ ${sharedSafeValue}`;
-  if (/^Tool \(list_dir\)/i.test(sharedSafeValue)) return `📂 ${sharedSafeValue}`;
-  if (/^Tool \(create_directory\)/i.test(sharedSafeValue)) return `📁 ${sharedSafeValue}`;
-  if (/^Tool \((delete|remove)\)/i.test(sharedSafeValue)) return `🗑️ ${sharedSafeValue}`;
-  if (/^Tool \(execution_subagent\)/i.test(sharedSafeValue)) return `🚀 ${sharedSafeValue}`;
-  if (/^Tool \(get_errors\)/i.test(sharedSafeValue)) return `🚨 ${sharedSafeValue}`;
-  if (/^Tool \(debug_[^)]+\)/i.test(sharedSafeValue)) return `🐞 ${sharedSafeValue}`;
-  if (/^Tool \(fetch_webpage\)/i.test(sharedSafeValue)) return `🌐 ${sharedSafeValue}`;
-  if (/^Tool \(github_[^)]+\)/i.test(sharedSafeValue)) return `🐙 ${sharedSafeValue}`;
-  if (/^Tool \(run_in_terminal\)/i.test(sharedSafeValue)) return `🖥️ ${sharedSafeValue}`;
-  if (/^Tool \((create_file|write)\)/i.test(sharedSafeValue)) return `🆕 ${sharedSafeValue}`;
-  if (/^Tool \((bash|shell|terminal)\)/i.test(sharedSafeValue)) return `🔧 ${sharedSafeValue}`;
-  if (/^Tool \((sql|sqlite)\)/i.test(sharedSafeValue)) return `🗄️ ${sharedSafeValue}`;
-  if (/^Tool \(/i.test(sharedSafeValue)) return `🛠️ ${sharedSafeValue}`;
-  return `ℹ️ ${sharedSafeValue}`;
+  return prefixToolActivityEmoji(sharedSafeValue);
 }
 
 export function renderThoughtsMarkup(thoughts) {
@@ -1252,11 +1706,19 @@ function anchorThinkingBubble(div, messageId) {
   }
 }
 
+// Which conversation a live bubble belongs to. #messages is shared by every
+// conversation, so a bubble is only ever reused or preserved for its own.
+function thinkingConversationKey() {
+  return String(currentConvId || '').trim() || '__new__';
+}
+
 export function showThinking(messageId = null, autoScroll = true) {
   const nextMessageId = String(messageId || '').trim();
   if (nextMessageId) thinkingMessageId = nextMessageId;
   const existing = document.getElementById('thinking-indicator');
-  if (existing && (!nextMessageId || String(existing.dataset.messageId || '') === nextMessageId)) {
+  if (existing
+    && existing.dataset.conversationId === thinkingConversationKey()
+    && (!nextMessageId || String(existing.dataset.messageId || '') === nextMessageId)) {
     // Reuse the live bubble: rebuilding it every poll tick destroys any text
     // selection anchored inside and drops in-progress subagent bubbles.
     const stopBtn = existing.querySelector('[data-action="stop-turn"]');
@@ -1267,21 +1729,29 @@ export function showThinking(messageId = null, autoScroll = true) {
       stopBtn.classList.toggle('stopping', stopping);
     }
     anchorThinkingBubble(existing, nextMessageId || existing.dataset.messageId);
-    if (autoScroll) scrollBottom();
+    syncThinkingFollowButtons(existing, getThinkingFollowMode());
+    observeThinkingBubble(existing);
+    if (getThinkingFollowMode()) applyThinkingFollow();
+    else if (autoScroll) scrollBottom();
     return;
   }
   existing?.remove();
+  unobserveThinkingBubble();
   const div = document.createElement('div');
   div.className = 'msg assistant';
   div.id = 'thinking-indicator';
+  div.dataset.conversationId = thinkingConversationKey();
   if (nextMessageId) div.dataset.messageId = nextMessageId;
   const isCancelInFlight = nextMessageId && bubbleCancelInFlight.has(nextMessageId);
   const stopBtnHtml = (!IS_SHARED_VIEW && nextMessageId)
     ? `<button type="button" class="bubble-action-btn${isCancelInFlight ? ' stopping' : ''}" data-action="stop-turn" data-message-id="${escHtml(nextMessageId)}"${isCancelInFlight ? ' disabled' : ''}>${isCancelInFlight ? 'Stopping…' : 'Stop'}</button>`
     : '';
+  // Stop stays left; the follow buttons (💭 thoughts, 📃 answer, 🛠️ tools)
+  // sit on the right. See thinking-follow.js.
+  const followBtnsHtml = renderThinkingFollowButtonsHtml(getThinkingFollowMode());
   div.innerHTML = `
     <div class="thinking-bubble">
-      <div class="thinking-bubble-header">${stopBtnHtml}</div>
+      <div class="thinking-bubble-header">${stopBtnHtml}${followBtnsHtml}</div>
       <details id="thinking-thoughts" class="thinking-thoughts-panel" open>
         <summary>💭 Thoughts</summary>
         <div class="thinking-thoughts-list"></div>
@@ -1294,15 +1764,49 @@ export function showThinking(messageId = null, autoScroll = true) {
   anchorThinkingBubble(div, nextMessageId);
   renderThinkingThoughts();
   renderThinkingStream();
-  if (autoScroll) scrollBottom();
+  observeThinkingBubble(div);
+  if (getThinkingFollowMode()) applyThinkingFollow();
+  else if (autoScroll) scrollBottom();
 }
 
 export function removeThinking() {
   thinkingMessageId = null;
   lastInFlightSnapshotKey = '';
+  unobserveThinkingBubble();
   document.getElementById('thinking-indicator')?.remove();
 }
 
+// Stop is one tap away on a sticky header, so a stray touch must not kill a
+// long turn: confirm first, then run the existing stop path.
+function openStopTurnConfirmation(conversationId, messageId) {
+  const convId = String(conversationId || '').trim();
+  const id = String(messageId || '').trim();
+  if (!convId || !id) return;
+  if (bubbleCancelInFlight.has(id)) return;
+  openSummaryModal({
+    title: 'Stop this turn?',
+    subtitle: 'The agent stops after its current step',
+    kind: 'stop-turn',
+    bodyHtml: `
+      <p>Stop the running turn? Work already done stays; anything the agent was about to do is cut short.</p>
+      <div class="summary-modal-actions">
+        <button class="chat-title-action-btn danger-btn" type="button" data-stop-turn-confirm="1">⏹ Stop turn</button>
+        <button class="chat-title-action-btn" type="button" data-stop-turn-cancel="1">Keep running</button>
+      </div>
+    `,
+  });
+  const body = document.getElementById('summary-modal-body');
+  body?.querySelector('[data-stop-turn-confirm]')?.addEventListener('click', (event) => {
+    event.preventDefault();
+    closeSummaryModal();
+    void stopTurnByMessageId(convId, id);
+  }, { once: true });
+  body?.querySelector('[data-stop-turn-cancel]')?.addEventListener('click', (event) => {
+    event.preventDefault();
+    closeSummaryModal();
+  }, { once: true });
+}
+
 export function collapseThinkingThoughts() {
   const panel = document.getElementById('thinking-thoughts');
   if (!(panel instanceof HTMLDetailsElement)) return;
@@ -1947,6 +2451,7 @@ export function applyConversationTurnStatus({ conversationId, messageId, status
   const conversationKey = String(conversationId || '').trim();
   const messageKey = String(messageId || '').trim();
   const normalizedStatus = String(status || '').trim().toLowerCase();
+  if (['cancelled', 'failed'].includes(normalizedStatus)) releaseStoppedSteerResendsOf(messageKey);
   if (!conversationKey) {
     syncSendButtonState();
     return;
@@ -1970,58 +2475,9 @@ export function applyConversationTurnStatus({ conversationId, messageId, status
   syncSendButtonState();
 }
 
-async function stopCurrentConversationTurn(conversationId) {
-  const conversationKey = String(conversationId || '').trim();
-  const activeTurn = getActiveTurnForConversation(conversationKey);
-  if (!conversationKey || !activeTurn?.messageId) return;
-  if (activeTurn.cancelRequested) return;
-  if (isMobileComposerViewport() && !confirm('Stop the current turn?')) return;
-  setConversationTurnState(conversationKey, {
-    messageId: activeTurn.messageId,
-    status: activeTurn.status || 'processing',
-    cancelRequested: true,
-  });
-  const expectedMessageId = activeTurn.messageId;
-  const result = await cancelConversationTurn(conversationKey, {
-    clientId: CLIENT_ID,
-    messageId: expectedMessageId,
-  });
-  if (!result?.ok) {
-    setConversationTurnState(conversationKey, {
-      messageId: expectedMessageId,
-      status: activeTurn.status || 'processing',
-      cancelRequested: false,
-    });
-    showTransientRelayNotice('Could not stop the current turn.');
-    return;
-  }
-  if (
-    result.acknowledgement === 'already-finished'
-    || result.acknowledgement === 'no-active-turn'
-    || result.acknowledgement === 'message-mismatch'
-  ) {
-    const latestTurn = getActiveTurnForConversation(conversationKey);
-    if (latestTurn?.messageId === expectedMessageId) {
-      setConversationTurnState(conversationKey, null);
-    }
-    showTransientRelayNotice('That turn already finished.');
-    return;
-  }
-  if (result.acknowledgement === 'active-turn-unbound') {
-    const latestTurn = getActiveTurnForConversation(conversationKey);
-    if (latestTurn?.messageId === expectedMessageId) {
-      setConversationTurnState(conversationKey, {
-        messageId: expectedMessageId,
-        status: activeTurn.status || 'processing',
-        cancelRequested: false,
-      });
-    }
-    showTransientRelayNotice('The active turn is not bound to a live SDK session.');
-    return;
-  }
-  showTransientRelayNotice('Stopping the current turn…');
-}
-
+// Stopping a turn lives on the message bubbles only (the live turn's Stop and
+// pending rows' Cancel). The composer's send button never doubles as Stop —
+// the old stopCurrentConversationTurn composer path is gone with it.
 async function stopTurnByMessageId(conversationId, messageId) {
   const conversationKey = String(conversationId || '').trim();
   const targetMessageId = String(messageId || '').trim();
@@ -2099,6 +2555,12 @@ function updateBubbleStopButton(messageId, isStopping) {
   btn.classList.toggle('stopping', isStopping);
 }
 
+// The Cancel control of a user bubble: a pending row's, or a pushed row's the
+// worker can still pull back (both post cancel-queued-turn).
+function buildUserBubbleCancelActionsMarkup(messageId, isCancelling) {
+  return `<div class="msg-bubble-actions"><button type="button" class="bubble-action-btn${isCancelling ? ' stopping' : ''}" data-action="cancel-queued" data-message-id="${escHtml(messageId)}"${isCancelling ? ' disabled' : ''}>${isCancelling ? 'Cancelling…' : 'Cancel'}</button></div>`;
+}
+
 function updateUserBubbleCancelButton(messageId, isCancelling) {
   const btn = document.querySelector(`.bubble-action-btn[data-message-id="${messageId}"][data-action="cancel-queued"]`);
   if (!btn) return;
@@ -2114,10 +2576,239 @@ export function removeUserBubbleCancelButton(messageId) {
   if (actionsContainer) actionsContainer.remove();
 }
 
+function clearUnsteerFallbackTimer(messageId) {
+  const timer = unsteerFallbackTimers.get(messageId);
+  if (timer === undefined) return;
+  clearTimeout(timer);
+  unsteerFallbackTimers.delete(messageId);
+}
+
 export function clearBubbleCancelState(messageId) {
   const id = String(messageId || '').trim();
   if (!id) return;
   bubbleCancelInFlight.delete(id);
+  clearUnsteerFallbackTimer(id);
+}
+
+// Keeps the Cancel controls of the viewed conversation's pushed rows in step
+// with what its worker reports as still un-steerable. Bubbles are built once
+// (renderMessages skips unchanged payloads), and the worker's set changes on
+// its own clock (the heartbeat), so the status refresh calls this next to the
+// composer sync. Pending rows own their Cancel and are left alone; a row whose
+// un-steer is still being acknowledged keeps its "Cancelling…" until the
+// answer or the fallback arrives.
+export function syncCancellableSteerButtons() {
+  const el = getMessagesElement();
+  if (!el || IS_SHARED_VIEW) return;
+  const cancellableIds = cancellableSteerIdsForConversation(currentConvId);
+  for (const rowNode of el.querySelectorAll('.msg.user[data-message-id]')) {
+    const messageId = String(rowNode.dataset.messageId || '').trim();
+    if (!messageId || pendingUserMessageIds.has(messageId)) continue;
+    const button = rowNode.querySelector('.msg-bubble-actions [data-action="cancel-queued"]');
+    if (cancellableIds.has(messageId)) {
+      if (button) continue;
+      const bubble = rowNode.querySelector('.msg-bubble');
+      if (!bubble) continue;
+      bubble.insertAdjacentHTML('beforeend', buildUserBubbleCancelActionsMarkup(messageId, bubbleCancelInFlight.has(messageId)));
+      continue;
+    }
+    if (button && !bubbleCancelInFlight.has(messageId)) button.closest('.msg-bubble-actions')?.remove();
+  }
+}
+
+// The relay forwarded an un-steer to the worker ('cancel-requested'): the row
+// settles through the socket (message_status 'cancelled' removes the control;
+// an answer after all re-renders it away). If neither lands, hand the control
+// back — as "Cancel" when the worker still lists the row, gone otherwise.
+function armUnsteerFallback(messageId) {
+  clearUnsteerFallbackTimer(messageId);
+  const timer = setTimeout(() => {
+    unsteerFallbackTimers.delete(messageId);
+    bubbleCancelInFlight.delete(messageId);
+    if (cancellableSteerIdsForConversation(currentConvId).has(messageId)) {
+      updateUserBubbleCancelButton(messageId, false);
+    } else {
+      removeUserBubbleCancelButton(messageId);
+    }
+  }, UNSTEER_ACK_FALLBACK_MS);
+  timer?.unref?.();
+  unsteerFallbackTimers.set(messageId, timer);
+}
+
+// Resend of a steer the user's Stop cut off unanswered (kind='stopped').
+// Keyed by the marker row: one Resend per marker per page life — a second tap
+// while the first is in flight, or after it landed, does nothing. The relay's
+// duplicate guard backs this across reloads (a second Resend of the same text
+// collides with the first).
+const stoppedSteerResends = new Map();
+const RESEND_PAYLOAD_KEY = '__relayResendPayload';
+
+// Only uploads (by sha256) can be re-referenced; anything else — a legacy
+// inline image — is counted so the user is told it was left out.
+function attachmentReferencesForResend(attachments) {
+  const list = Array.isArray(attachments) ? attachments.filter(Boolean) : [];
+  const references = list
+    .map((attachment) => {
+      const sha256 = String(attachment?.sha256 || '').trim().toLowerCase();
+      if (!sha256) return null;
+      return {
+        sha256,
+        name: String(attachment?.name || '').trim() || undefined,
+        type: String(attachment?.type || '').trim() || undefined,
+      };
+    })
+    .filter(Boolean);
+  return { references, unavailable: list.length - references.length };
+}
+
+// The user message a stopped marker settles. By its source id whenever the
+// marker names one — if that row is not loaded (a page boundary) there is no
+// guessing, since the nearest user row above may be another stopped steer.
+// Only a marker without a source falls back to the user row right above it.
+function findStoppedSteerSource(markerNode) {
+  const el = getMessagesElement();
+  if (!el || !markerNode) return null;
+  const sourceId = String(markerNode.dataset.sourceMessageId || '').trim();
+  if (sourceId) {
+    return el.querySelector(`.msg.user[data-message-id="${CSS.escape(sourceId)}"]`) || null;
+  }
+  for (let prev = markerNode.previousElementSibling; prev; prev = prev.previousElementSibling) {
+    if (prev.classList?.contains(SEPARATOR_CLASS)) return null;
+    if (prev.classList?.contains('msg') && prev.classList.contains('user')) return prev;
+  }
+  return null;
+}
+
+function syncStoppedSteerResendButton(markerId) {
+  const btn = document.querySelector(`.bubble-action-btn[data-message-id="${CSS.escape(markerId)}"][data-action="resend-stopped-steer"]`);
+  if (!btn) return;
+  const state = stoppedSteerResends.get(markerId);
+  btn.disabled = !!state;
+  btn.textContent = state?.status === 'sent' ? 'Resent' : (state ? 'Resending…' : 'Resend');
+}
+
+// The Resend a marker's "Resent" rests on was cancelled or failed: the
+// original may be resent again, as the relay agrees.
+function releaseStoppedSteerResendsOf(messageId) {
+  const id = String(messageId || '').trim();
+  if (!id) return;
+  for (const [markerId, entry] of stoppedSteerResends) {
+    if (entry?.status !== 'sent' || entry.resentId !== id) continue;
+    stoppedSteerResends.delete(markerId);
+    syncStoppedSteerResendButton(markerId);
+  }
+}
+
+async function resendStoppedSteer(conversationId, markerId) {
+  const conversationKey = String(conversationId || '').trim();
+  const id = String(markerId || '').trim();
+  if (!conversationKey || !id || stoppedSteerResends.has(id)) return;
+  const markerNode = getMessagesElement()?.querySelector(`.msg.assistant[data-message-id="${CSS.escape(id)}"]`);
+  const sourceNode = findStoppedSteerSource(markerNode);
+  const payload = sourceNode?.[RESEND_PAYLOAD_KEY] || null;
+  const text = String(payload?.text || '').trim();
+  const attachments = Array.isArray(payload?.attachments) ? payload.attachments : [];
+  if (!payload) {
+    showTransientRelayNotice('The original message is not loaded — scroll up to it, then try Resend again.');
+    return;
+  }
+  if (!text && !attachments.length) {
+    showTransientRelayNotice('Nothing left to resend: the original message\'s attachments are no longer available.');
+    return;
+  }
+  // Claimed before the first await: this is what makes a double tap a no-op.
+  stoppedSteerResends.set(id, { status: 'sending' });
+  syncStoppedSteerResendButton(id);
+  const clientMessageId = generateId();
+  let sent = false;
+  // The message that now stands as this marker's Resend: a cancel or failure
+  // of it releases the page's "Resent" (releaseStoppedSteerResendsOf).
+  let resentId = clientMessageId;
+  let bubbleAppended = false;
+  const dropOptimisticBubble = () => {
+    clearPendingUserMessage(clientMessageId);
+    pendingUserMessageIds.delete(clientMessageId);
+    seenMessageIds.delete(clientMessageId);
+    if (bubbleAppended) document.querySelector(`.msg[data-message-id="${CSS.escape(clientMessageId)}"]`)?.remove();
+  };
+  try {
+    if (!(await validateSelectedConversationBeforeSend(conversationKey))) return;
+    const selectedModel = document.getElementById('model-select')?.value || '';
+    const selectedReasoningEffort = String(document.getElementById('reasoning-effort-select')?.value || '').trim().toLowerCase();
+    const selectedContextTier = String(document.getElementById('context-tier-select')?.value || 'default').trim();
+    const selectedMode = document.getElementById('mode-select')?.value || 'agent';
+    if (!selectedReasoningEffort) {
+      showTransientRelayNotice('Select a reasoning effort after refreshing model metadata.');
+      return;
+    }
+    trackPendingUserMessage(clientMessageId, conversationKey, text, { attachments });
+    pendingUserMessageIds.add(clientMessageId);
+    if (isCurrentConversation(conversationKey)) {
+      appendMessage({
+        role: 'user',
+        text,
+        model: selectedModel,
+        mode: selectedMode,
+        timestamp: new Date().toISOString(),
+        attachments,
+      }, true, clientMessageId, true);
+      bubbleAppended = true;
+    }
+    const r = await sendMessageApi({
+      messageId: clientMessageId,
+      clientId: CLIENT_ID,
+      text,
+      model: selectedModel,
+      reasoningEffort: selectedReasoningEffort,
+      contextTier: selectedContextTier,
+      relayMode: selectedMode,
+      conversationId: conversationKey,
+      attachments,
+      resendOfMessageId: String(sourceNode?.dataset?.messageId || '').trim() || undefined,
+    });
+    if (!r) {
+      if (!hasSendEchoArrived(clientMessageId)) {
+        dropOptimisticBubble();
+        showTransientRelayNotice('Could not resend the message. Please try again.');
+        return;
+      }
+      sent = true;
+      return;
+    }
+    if (r.duplicate) {
+      dropOptimisticBubble();
+      if (r.alreadyResent) {
+        // Resent before (another tab or device): nothing to retry.
+        sent = true;
+        resentId = String(r.duplicateOfMessageId || '').trim() || null;
+        showTransientRelayNotice('That message was already resent.');
+        return;
+      }
+      // Another recent message has the same text — not a Resend of this one,
+      // so the button stays available.
+      showTransientRelayNotice('A message with the same text was sent in the last few minutes, so this one was not resent. Try again later.');
+      return;
+    }
+    sent = true;
+    const dropped = Number(payload.unavailableAttachments || 0) + Math.max(0, Number(r.droppedAttachmentCount) || 0);
+    if (dropped > 0) {
+      showTransientRelayNotice(`Resent without ${dropped} attachment${dropped === 1 ? '' : 's'} that ${dropped === 1 ? 'is' : 'are'} no longer available.`, 7000);
+    }
+    if (cliOnline && isCurrentConversation(conversationKey) && !getActiveTurnForConversation(conversationKey)?.messageId) {
+      showThinking(r.messageId || null);
+    }
+  } catch (error) {
+    if (!hasSendEchoArrived(clientMessageId)) {
+      dropOptimisticBubble();
+      showTransientRelayNotice(error?.message || 'Could not resend the message.');
+    } else {
+      sent = true;
+    }
+  } finally {
+    if (sent) stoppedSteerResends.set(id, { status: 'sent', resentId });
+    else stoppedSteerResends.delete(id);
+    syncStoppedSteerResendButton(id);
+  }
 }
 
 async function cancelQueuedTurnByMessageId(conversationId, messageId) {
@@ -2148,6 +2839,14 @@ async function cancelQueuedTurnByMessageId(conversationId, messageId) {
     return;
   }
 
+  if (result.acknowledgement === 'cancel-requested') {
+    // The worker pulls the row out of its runtime and settles it through
+    // POST /api/queue-cancelled → message_status 'cancelled'. Keep the
+    // bubble in "Cancelling…" until then (or until the fallback hands it back).
+    armUnsteerFallback(targetMessageId);
+    return;
+  }
+
   if (result.acknowledgement === 'already-processing') {
     bubbleCancelInFlight.delete(targetMessageId);
     removeUserBubbleCancelButton(targetMessageId);
@@ -2291,7 +2990,7 @@ function runRelayErrorCta(cta) {
 }
 
 function handleBubbleActionClick(event) {
-  const btn = event.target.closest('.bubble-action-btn, .msg-share-visibility-btn');
+  const btn = event.target.closest('.bubble-action-btn, .msg-share-visibility-btn, .thinking-follow-btn');
   if (!btn) return;
   const action = btn.dataset.action;
   const messageId = btn.dataset.messageId;
@@ -2316,7 +3015,15 @@ function handleBubbleActionClick(event) {
   if (action === 'stop-turn' && messageId) {
     event.preventDefault();
     event.stopPropagation();
-    void stopTurnByMessageId(currentConvId, messageId);
+    openStopTurnConfirmation(currentConvId, messageId);
+  }
+
+  if (action === 'follow-thinking') {
+    event.preventDefault();
+    event.stopPropagation();
+    const mode = toggleThinkingFollowMode(currentConvId, btn.dataset.follow);
+    syncThinkingFollowButtons(document, mode);
+    if (mode) applyThinkingFollow({ force: true });
   }
 
   if (action === 'cancel-queued' && messageId) {
@@ -2325,6 +3032,12 @@ function handleBubbleActionClick(event) {
     void cancelQueuedTurnByMessageId(currentConvId, messageId);
   }
 
+  if (action === 'resend-stopped-steer' && messageId) {
+    event.preventDefault();
+    event.stopPropagation();
+    void resendStoppedSteer(currentConvId, messageId);
+  }
+
   if (action === 'stop-subagent' && subagentRunId) {
     event.preventDefault();
     event.stopPropagation();
@@ -2363,6 +3076,7 @@ export function initBubbleActionHandlers() {
   if (!messagesEl) return;
   messagesEl.addEventListener('click', handleBubbleActionClick);
   messagesEl.addEventListener('click', handleEmbeddedImageClick);
+  initThinkingFollow({ getCurrentConversationId: () => currentConvId });
 }
 
 export function appendMessage(msg, scroll = true, msgId = null, force = false, insertAfterId = null, trackHistory = true) {
@@ -2440,6 +3154,10 @@ function buildMessageSnapshotKey(messages = [], meta = {}) {
       mode: String(item?.mode || '').trim(),
       attachments: Array.isArray(item?.attachments) ? item.attachments.length : 0,
       hiddenFromShares: item?.hiddenFromShares === true,
+      // The continuation badge and the absorbed (steering) merge both hang
+      // off kind; a payload differing only in it must not short-circuit.
+      kind: String(item?.kind || '').trim(),
+      resentAs: String(item?.resentAs || '').trim(),
       // Without this, a payload that differs from the last render only by a
       // newly linked compaction activity short-circuits below and the break
       // row never appears until some unrelated field changes.
@@ -2491,7 +3209,62 @@ export function renderMessages(msgs, scroll = true, meta = {}) {
       .map((item) => [String(item?.id || '').trim(), item])
       .filter(([id]) => !!id),
   );
-  if (!ordered.length) {
+  // A payload that already carries this page's Resend but no resentAs on its
+  // marker is newer than the page's provisional "Resent": the Resend was
+  // cancelled or failed (possibly on another device), so the data wins.
+  for (const item of ordered) {
+    if (item?.role !== 'assistant' || String(item?.kind || '').trim() !== 'stopped') continue;
+    const markerId = String(item?.id || '').trim();
+    const entry = stoppedSteerResends.get(markerId);
+    if (entry?.status === 'sent' && entry.resentId && messageById.has(entry.resentId) && !String(item?.resentAs || '').trim()) {
+      stoppedSteerResends.delete(markerId);
+    }
+  }
+  // Preserve optimistic pending user bubbles the payload does not yet carry.
+  // A message is persisted the instant it is sent, but a poll whose response
+  // predates the send returns a payload without it; rebuilding from that stale
+  // payload would drop the just-sent bubble until the next poll catches up
+  // (it "vanishes then reappears"). Steering makes this visible because the
+  // absorbed-reply broadcast forces extra rebuilds during the send window.
+  // Capturing the live DOM nodes keeps their exact content and handlers; the
+  // wipe below orphans them but the references keep them alive to re-append.
+  // Matches store.js pendingConversationKey (trimmed id, or '__new__').
+  const renderConversationKey = String(meta.conversationId || currentConvId || '').trim() || '__new__';
+  const pageInfo = meta.pageInfo && typeof meta.pageInfo === 'object' ? meta.pageInfo : null;
+  const hasMoreNewer = typeof meta.hasMoreNewer === 'boolean'
+    ? meta.hasMoreNewer
+    : !!pageInfo?.hasMoreNewer;
+  const preservedPendingNodes = [];
+  // A kept pending bubble re-joins at the end of the loaded window, which is
+  // only the newest end when nothing newer is left unloaded (a search jump
+  // loads a window in the middle of the history).
+  for (const id of (hasMoreNewer ? [] : pendingUserMessageIds)) {
+    const pendingId = String(id || '').trim();
+    if (!pendingId || messageById.has(pendingId)) continue;
+    // Only this conversation's pending bubbles: a bubble still waiting in
+    // another conversation must never be carried into the one being rendered
+    // (a switch would otherwise drag it along).
+    const entry = pendingUserMessageEntries.get(pendingId);
+    if (String(entry?.conversationKey || '').trim() !== renderConversationKey) continue;
+    const node = el.querySelector(`[data-message-id="${CSS.escape(pendingId)}"]`);
+    if (node) preservedPendingNodes.push(node);
+  }
+  // Preserve the live thinking bubble across the wipe. It holds in-progress
+  // thoughts, streamed text and subagent bubbles that a full re-derive would
+  // lose (or briefly blank while restoreInFlightThinking rebuilds from the
+  // server's inFlight snapshot). Re-appending the same node lets that restore
+  // update it in place instead of rebuilding — the same reuse showThinking
+  // already relies on. removeThinking() still drops it when the turn ends.
+  const thinkingNode = document.getElementById('thinking-indicator');
+  // Only when it genuinely lives in the transcript being rebuilt and belongs
+  // to the conversation being rendered: a detached node must not be spliced
+  // in as an extra row, and another conversation's bubble must not leak into
+  // this one (it is dropped instead, so the next restore builds afresh).
+  const thinkingNodeInTranscript = !!thinkingNode && thinkingNode.parentNode === el;
+  const preservedThinkingNode = (thinkingNodeInTranscript
+    && thinkingNode.dataset.conversationId === renderConversationKey) ? thinkingNode : null;
+  if (thinkingNodeInTranscript && !preservedThinkingNode) removeThinking();
+  if (!ordered.length && !preservedPendingNodes.length && !preservedThinkingNode) {
     el.innerHTML = `<div class="empty-state">
       <div class="icon">${currentConvId ? '💬' : '🚀'}</div>
       <h3>${currentConvId ? 'No messages yet' : 'New Conversation'}</h3>
@@ -2504,13 +3277,9 @@ export function renderMessages(msgs, scroll = true, meta = {}) {
     return true;
   }
   const conversationId = String(meta.conversationId || currentConvId || '').trim();
-  const pageInfo = meta.pageInfo && typeof meta.pageInfo === 'object' ? meta.pageInfo : null;
   const hasMoreOlder = typeof meta.hasMoreOlder === 'boolean'
     ? meta.hasMoreOlder
     : (typeof meta.hasMoreHistory === 'boolean' ? meta.hasMoreHistory : !!pageInfo?.hasMoreOlder || !!pageInfo?.hasMore);
-  const hasMoreNewer = typeof meta.hasMoreNewer === 'boolean'
-    ? meta.hasMoreNewer
-    : !!pageInfo?.hasMoreNewer;
   const oldestMessageId = String(
     meta.historyCursor
     || pageInfo?.olderCursor?.beforeMessageId
@@ -2559,6 +3328,17 @@ export function renderMessages(msgs, scroll = true, meta = {}) {
   });
   withSuspendedSeparatorSync(() => {
     for (const m of ordered) appendMessage(m, false, m.id || null, true, getMessageThreadAnchor(m, messageById), false);
+    // A pending bubble the payload lacks is the newest message, so it re-joins
+    // at the end. Re-appending the original node (not a fresh one) keeps its
+    // cancel button and click handlers intact.
+    for (const node of preservedPendingNodes) el.appendChild(node);
+    // The live thinking bubble re-joins under its owning message right here:
+    // restoreInFlightThinking skips an unchanged snapshot, so waiting for it
+    // to re-anchor left the bubble at the end, below later (steered) rows.
+    if (preservedThinkingNode) {
+      el.appendChild(preservedThinkingNode);
+      anchorThinkingBubble(preservedThinkingNode, preservedThinkingNode.dataset.messageId);
+    }
   });
   syncSeparatorsNow();
   renderRelayQuestions();
@@ -2633,7 +3413,8 @@ export async function sendMessage() {
   const originalComposerText = String(input?.value || '');
   const text = originalComposerText.trim();
   const mobileSend = isMobileComposerViewport();
-  const activeTurn = getActiveTurnForConversation(currentConvId);
+  // A send while steering is held is allowed: the relay holds the message
+  // and it steers in once the hold clears (the button reads "Queue").
   const hasDraft = hasComposerDraft({ text, attachmentCount: selectedAttachments.length });
   if (sendInFlight) {
     showTransientRelayNotice('Please wait for the current message to finish sending.');
@@ -2641,6 +3422,7 @@ export async function sendMessage() {
   }
   if (!hasDraft) return;
   closeSlashAutocomplete();
+  closeMentionAutocomplete();
 
   // Warn-once typo guard: a message that looks like a command but matches none
   // would otherwise burn an agent turn as plain text.
@@ -2658,6 +3440,7 @@ export async function sendMessage() {
     input.value = '';
     autoResize(input);
     releaseComposerFocusAfterSend(input);
+    void flushConversationDraft(currentConvId);
     compactCurrentConversation();
     scrollBottomAfterSend();
     return;
@@ -2668,6 +3451,7 @@ export async function sendMessage() {
     input.value = '';
     autoResize(input);
     releaseComposerFocusAfterSend(input);
+    void flushConversationDraft(currentConvId);
     const result = await runPreviewCommand(previewCommand, { conversationId: currentConvId });
     showTransientRelayNotice(result.notice);
     return;
@@ -2711,6 +3495,7 @@ export async function sendMessage() {
   }
 
   setSendInFlight(true);
+  let composerClearedBySend = false;
   let attachments = [];
   let clientMessageId = null;
   try {
@@ -2724,8 +3509,12 @@ export async function sendMessage() {
     }
     const titleSeed = text || (attachments[0]?.name || 'Attachment');
     clientMessageId = generateId();
-    trackPendingUserMessage(clientMessageId, targetConversationId, text);
+    trackPendingUserMessage(clientMessageId, targetConversationId, text, { attachments });
     pendingUserMessageIds.add(clientMessageId);
+    // The message leaves the draft: from here the cached draft is only what is
+    // typed next, which the post-send save (or a failure restore) builds on.
+    if (targetConversationId) upsertConversationDraftState(targetConversationId, { draftText: '' });
+    composerClearedBySend = true;
     if (viewingSendConversation()) {
       input.value = '';
       autoResize(input);
@@ -2770,23 +3559,22 @@ export async function sendMessage() {
         if (queued) {
           void registerOutboxSync();
           showTransientRelayNotice('You are offline. Message queued — it will send when the connection returns.', 7000);
-          if (viewingSendConversation()) clearAttachments();
+          if (viewingSendConversation()) removeComposerAttachments(draftAttachments);
           return;
         }
       }
-      clearPendingUserMessage(clientMessageId);
-      const pendingNode = document.querySelector(`[data-message-id="${clientMessageId}"]`);
-      pendingNode?.remove();
-      pendingUserMessageIds.delete(clientMessageId);
-      seenMessageIds.delete(clientMessageId);
-      if (viewingSendConversation()) {
-        input.value = originalComposerText;
-        autoResize(input);
+      const sendLanded = hasSendEchoArrived(clientMessageId);
+      if (!sendLanded) {
+        clearPendingUserMessage(clientMessageId);
+        const pendingNode = document.querySelector(`[data-message-id="${clientMessageId}"]`);
+        pendingNode?.remove();
+        pendingUserMessageIds.delete(clientMessageId);
+        seenMessageIds.delete(clientMessageId);
       }
-      void scheduleConversationDraftSave({
-        conversationId: targetConversationId,
-        draftText: originalComposerText,
-        immediate: true,
+      restoreComposerAfterFailedSend(targetConversationId, originalComposerText, {
+        viewing: viewingSendConversation(),
+        composerCleared: composerClearedBySend,
+        sendLanded,
       });
       if (!mobileSend && viewingSendConversation()) input.focus();
       setModelBanner('⚠️ Message could not be sent. Please try again.');
@@ -2818,7 +3606,7 @@ export async function sendMessage() {
       // conversation that was compacted.
       if (viewingSendConversation()) {
         await window.openConversation?.(r.compactedConversationId);
-        clearAttachments();
+        removeComposerAttachments(draftAttachments);
         if (!mobileSend) input.focus();
         scrollBottomAfterSend();
       }
@@ -2847,6 +3635,12 @@ export async function sendMessage() {
         title: titleSeed.slice(0, 60),
         updatedAt: new Date().toISOString(),
         messageCount: 1,
+        // The session the relay routed this first message to: the id its
+        // worker is launched, registered and heartbeats under, so the
+        // composer reads that worker's steering snapshot before the list
+        // catches up. A binding that names another id (the placeholder
+        // rekey) replaces it via conversation_session_bound.
+        sdkSessionId: r.ownerSessionId || null,
         runtimeSessionId: r.runtimeSessionId || null,
         runtimeProviderType: r.runtimeProviderType || 'github',
         runtimeProviderModel: r.runtimeProviderModel || null,
@@ -2876,15 +3670,30 @@ export async function sendMessage() {
       };
       window.syncAutoModelAvailability?.();
     }
+    // Adopting the conversation can grow the composer (session-lock note,
+    // warning banner), which shrinks the transcript under a pane that was
+    // pinned to the newest message. Re-pin now rather than after the draft
+    // save's round trip below, or the new bubble sits under the composer
+    // for as long as that request takes.
+    if (viewingSendConversation()) scrollBottom();
     const persistedConversationId = String(r.conversationId || targetConversationId || '').trim();
     if (persistedConversationId) {
+      restorableDraftByConversation.delete(persistedConversationId);
+      // Forced: the send transaction already moved the server's version, and
+      // this round trip is how the client learns it (a 409 carries it). What
+      // is saved is the composer as it is now — the user may already have
+      // typed the next message while this one was sending.
+      const postSendText = viewingSendConversation()
+        ? String(input.value || '')
+        : String(conversations[persistedConversationId]?.draftText || '');
       const clearedDraft = await scheduleConversationDraftSave({
         conversationId: persistedConversationId,
-        draftText: '',
+        draftText: postSendText,
         immediate: true,
+        force: true,
       });
       upsertConversationDraftState(persistedConversationId, {
-        draftText: '',
+        draftText: postSendText,
         // Prefer the server's version pointer (a 409 carries the one the send
         // transaction wrote when it cleared the draft) over this client's
         // clock: once the send releases the draft, every later refresh is
@@ -2901,27 +3710,27 @@ export async function sendMessage() {
       if (!activeTurn?.messageId) showThinking(r.messageId || null);
     }
 
+    // Only what this message took leaves the composer: attachments added (or
+    // still uploading) since the send began stay, and the settle-time save
+    // below persists them.
     if (viewingSendConversation()) {
-      clearAttachments();
+      removeComposerAttachments(draftAttachments);
       if (!mobileSend) input.focus();
       scrollBottomAfterSend();
     }
   } catch (e) {
-    if (clientMessageId) {
+    const sendLanded = hasSendEchoArrived(clientMessageId);
+    if (clientMessageId && !sendLanded) {
       clearPendingUserMessage(clientMessageId);
       const pendingNode = document.querySelector(`[data-message-id="${clientMessageId}"]`);
       pendingNode?.remove();
       pendingUserMessageIds.delete(clientMessageId);
       seenMessageIds.delete(clientMessageId);
     }
-    if (viewingSendConversation()) {
-      input.value = originalComposerText;
-      autoResize(input);
-    }
-    void scheduleConversationDraftSave({
-      conversationId: targetConversationId,
-      draftText: originalComposerText,
-      immediate: true,
+    restoreComposerAfterFailedSend(targetConversationId, originalComposerText, {
+      viewing: viewingSendConversation(),
+      composerCleared: composerClearedBySend,
+      sendLanded,
     });
     alert(e.message || 'Failed to send message');
   } finally {
@@ -2929,6 +3738,9 @@ export async function sendMessage() {
     // Every exit path has settled the draft by now: cleared it (success),
     // restored the composer text (offline/failure), or never touched it.
     if (targetConversationId) sendOwnedDraftConversations.delete(targetConversationId);
+    // Edits made after the post-send save were held back while the send owned
+    // the draft; save them now, on screen or not.
+    if (targetConversationId) saveComposerIfUnsynced(targetConversationId);
   }
 }
 
@@ -2936,12 +3748,16 @@ export async function sendMessage() {
 // menu in sync with the caret. Cheap no-op for non-slash text.
 export function updateComposerSlashMenu(input) {
   updateSlashAutocomplete(input, { conversationId: currentConvId });
+  // Second, so it sees the slash menu's verdict: the @relay popup never opens
+  // over an open slash menu, and at most one of them ever handles keys.
+  updateMentionAutocomplete(input);
 }
 
 export function handleKey(e) {
   // The open menu owns navigation keys; Ctrl/Cmd+Enter still falls through to
-  // send because the menu never consumes it.
+  // send because neither menu consumes it.
   if (handleSlashAutocompleteKey(e, e.target)) return;
+  if (handleMentionAutocompleteKey(e, e.target)) return;
   if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
     e.preventDefault();
     sendMessage();