@oar-sh/oar 0.9.4 → 0.9.6

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

@@ -91,6 +91,7 @@ import {
 } 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 { resolveSubagentFold, subagentFoldSummary, toggledSubagentFoldChoice } from './subagent-fold.mjs';
 import { deriveComposerControlState, hasComposerDraft, hasUploadingAttachments } from './composer-control-state.mjs';
 import { buildLiveMessageFingerprint } from './live-message-dedupe.mjs';
 import { createInfiniteLoader } from './infinite-loader.js';
@@ -494,7 +495,7 @@ function cancellableSteerIdsForConversation(conversationId) {
 // 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).
+// see (compaction, post-compaction adoption, a running tool call).
 function steeringHoldForConversation(conversationId) {
   const conversationKey = String(conversationId || '').trim();
   if (!conversationKey || !conversationSupportsSteering(conversationKey)) {
@@ -1277,6 +1278,8 @@ function createMessageNode(msg, msgId = null, force = false) {
   // 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.
+  // Also the marker of a message answered on a continuation row, which only
+  // shares the look.
   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';
@@ -1764,6 +1767,8 @@ export function showThinking(messageId = null, autoScroll = true) {
   anchorThinkingBubble(div, nextMessageId);
   renderThinkingThoughts();
   renderThinkingStream();
+  // A board the turn has posted already lives in its live bubble.
+  renderRelayBoards();
   observeThinkingBubble(div);
   if (getThinkingFollowMode()) applyThinkingFollow();
   else if (autoScroll) scrollBottom();
@@ -1883,6 +1888,7 @@ function renderSubagentStream(subagentRunId, text) {
   }
   box.hidden = false;
   patchRenderedMarkdown(box, renderMarkdownPreview(value, false));
+  refreshSubagentSummary(bubble);
 }
 
 function patchActivityList(box, expectedTexts, className) {
@@ -1930,6 +1936,7 @@ export function renderThinkingActivities() {
     const runBox = bubble?.querySelector('.subagent-activity');
     if (runBox && !selectionIntersectsNode(runBox)) {
       patchActivityList(runBox, expected, 'subagent-activity-item');
+      refreshSubagentSummary(bubble);
     }
   }
 }
@@ -2044,6 +2051,7 @@ export function appendThinkingActivity(item, subagentRunId = null, autoScroll =
           row.className = 'subagent-activity-item';
           row.textContent = decorated;
           activityBox.appendChild(row);
+          refreshSubagentSummary(subagentBubble);
         }
       }
       if (autoScroll) scrollBottom();
@@ -2123,6 +2131,7 @@ function ensureSubagentBubble(subagentRunId, depth = 0) {
     const status = getSubagentStatus(id);
     updateSubagentBubbleStatus(bubble, status);
     updateSubagentStopButton(id, isSubagentCancelInFlight(id), status);
+    applySubagentFold(id);
     return bubble;
   }
 
@@ -2134,8 +2143,19 @@ function ensureSubagentBubble(subagentRunId, depth = 0) {
   bubble.className = 'subagent-bubble';
   bubble.dataset.subagentRunId = id;
 
+  // The whole header folds and unfolds the bubble (a phone needs the large
+  // target); the Stop button inside it keeps its own click.
   const header = document.createElement('div');
   header.className = 'subagent-bubble-header';
+  header.dataset.action = 'toggle-subagent';
+  header.dataset.subagentRunId = id;
+  header.setAttribute('role', 'button');
+  header.tabIndex = 0;
+
+  const foldMark = document.createElement('span');
+  foldMark.className = 'subagent-bubble-fold';
+  foldMark.setAttribute('aria-hidden', 'true');
+  header.appendChild(foldMark);
 
   const nameSpan = document.createElement('span');
   nameSpan.className = 'subagent-bubble-name';
@@ -2149,6 +2169,10 @@ function ensureSubagentBubble(subagentRunId, depth = 0) {
     ? '● Running'
     : normalizeSubagentBubbleStatus(status).charAt(0).toUpperCase() + normalizeSubagentBubbleStatus(status).slice(1);
 
+  // What the run is doing, in one line, for the header of a folded bubble.
+  const summarySpan = document.createElement('span');
+  summarySpan.className = 'subagent-bubble-summary';
+
   const controls = document.createElement('div');
   controls.className = 'subagent-bubble-controls';
   controls.appendChild(statusSpan);
@@ -2161,6 +2185,7 @@ function ensureSubagentBubble(subagentRunId, depth = 0) {
   controls.appendChild(stopBtn);
 
   header.appendChild(nameSpan);
+  header.appendChild(summarySpan);
   header.appendChild(controls);
 
   const activityBox = document.createElement('div');
@@ -2174,6 +2199,7 @@ function ensureSubagentBubble(subagentRunId, depth = 0) {
   bubble.appendChild(activityBox);
   container.appendChild(bubble);
   updateSubagentStopButton(id, isSubagentCancelInFlight(id), status);
+  applySubagentFold(id);
 
   const entry = getSubagentRun(id);
   if (entry?.thoughts?.length) {
@@ -2203,10 +2229,22 @@ function ensureSubagentBubble(subagentRunId, depth = 0) {
   if (entry?.streamText) {
     renderSubagentStream(id, entry.streamText);
   }
+  refreshSubagentSummary(bubble);
 
   return bubble;
 }
 
+/** Bring the folded header's line up to date with what the bubble holds. */
+function refreshSubagentSummary(bubble) {
+  const summary = bubble?.querySelector(':scope > .subagent-bubble-header > .subagent-bubble-summary');
+  if (!summary) return;
+  const text = subagentFoldSummary({
+    activities: Array.from(bubble.querySelectorAll(':scope > .subagent-activity > .subagent-activity-item'), (row) => row.textContent || ''),
+    streamText: bubble.querySelector(':scope > .subagent-stream')?.textContent || '',
+  });
+  if (summary.textContent !== text) summary.textContent = text;
+}
+
 function updateSubagentBubbleStatus(bubble, status) {
   if (!bubble) return;
   const statusSpan = bubble.querySelector('.subagent-bubble-status');
@@ -2216,6 +2254,38 @@ function updateSubagentBubbleStatus(bubble, status) {
   statusSpan.textContent = normalized === 'running' ? '● Running' : normalized.charAt(0).toUpperCase() + normalized.slice(1);
 }
 
+// What the user chose by hand for a live subagent bubble ('open' | 'folded'),
+// by run id. Kept outside the DOM: the live bubble is rebuilt on a
+// conversation switch and on reload-restore, and the choice must survive it.
+const subagentFoldChoices = new Map();
+const MAX_SUBAGENT_FOLD_CHOICES = 500;
+
+/** Show a live subagent bubble folded or open (see subagent-fold.mjs). */
+function applySubagentFold(subagentRunId) {
+  const id = String(subagentRunId || '').trim();
+  if (!id) return;
+  const bubble = document.querySelector(`.subagent-bubble[data-subagent-run-id="${CSS.escape(id)}"]`);
+  if (!bubble) return;
+  const folded = resolveSubagentFold({ choice: subagentFoldChoices.get(id) || null });
+  bubble.classList.toggle('folded', folded);
+  const header = bubble.querySelector(':scope > .subagent-bubble-header');
+  if (header) {
+    header.setAttribute('aria-expanded', folded ? 'false' : 'true');
+    header.title = folded ? 'Show what this subagent did' : 'Fold this subagent';
+  }
+}
+
+function toggleSubagentFold(subagentRunId) {
+  const id = String(subagentRunId || '').trim();
+  const bubble = id ? document.querySelector(`.subagent-bubble[data-subagent-run-id="${CSS.escape(id)}"]`) : null;
+  if (!bubble) return;
+  while (subagentFoldChoices.size >= MAX_SUBAGENT_FOLD_CHOICES) {
+    subagentFoldChoices.delete(subagentFoldChoices.keys().next().value);
+  }
+  subagentFoldChoices.set(id, toggledSubagentFoldChoice(bubble.classList.contains('folded')));
+  applySubagentFold(id);
+}
+
 const subagentStopUnsupported = new Set();
 
 /** The provider answered "not supported": the control must not re-arm. */
@@ -2236,6 +2306,11 @@ function updateSubagentStopButton(subagentRunId, isStopping = false, statusOverr
     btn.disabled = true;
     return;
   }
+  const status = normalizeSubagentBubbleStatus(statusOverride || getSubagentStatus(id));
+  const terminal = isSubagentTerminalStatus(status);
+  // Nothing is left to stop once the run has ended; a disabled button there
+  // only took the room the name needs.
+  btn.hidden = terminal;
   if (subagentStopUnsupported.has(id)) {
     btn.disabled = true;
     btn.textContent = 'Stop unavailable';
@@ -2243,8 +2318,6 @@ function updateSubagentStopButton(subagentRunId, isStopping = false, statusOverr
     btn.classList.remove('stopping');
     return;
   }
-  const status = normalizeSubagentBubbleStatus(statusOverride || getSubagentStatus(id));
-  const terminal = isSubagentTerminalStatus(status);
   const stopping = !!isStopping;
   btn.disabled = terminal || stopping;
   btn.textContent = stopping ? 'Stopping…' : 'Stop';
@@ -2263,6 +2336,7 @@ export function updateSubagentBubbleFromStatus(subagentRunId, status) {
     clearSubagentCancelInFlight(id);
   }
   updateSubagentStopButton(id, isSubagentCancelInFlight(id), status);
+  applySubagentFold(id);
 }
 
 function renderSubagentBubbleRecursive(entry) {
@@ -2990,7 +3064,7 @@ function runRelayErrorCta(cta) {
 }
 
 function handleBubbleActionClick(event) {
-  const btn = event.target.closest('.bubble-action-btn, .msg-share-visibility-btn, .thinking-follow-btn');
+  const btn = event.target.closest('.bubble-action-btn, .msg-share-visibility-btn, .thinking-follow-btn, .subagent-bubble-header');
   if (!btn) return;
   const action = btn.dataset.action;
   const messageId = btn.dataset.messageId;
@@ -3043,6 +3117,22 @@ function handleBubbleActionClick(event) {
     event.stopPropagation();
     void cancelSubagentByRunId(currentConvId, subagentRunId);
   }
+
+  if (action === 'toggle-subagent' && subagentRunId) {
+    // A tap that ends a text selection inside the header is not a toggle.
+    if (String(window.getSelection?.() || '').trim()) return;
+    event.preventDefault();
+    toggleSubagentFold(subagentRunId);
+  }
+}
+
+// Enter and Space on a focused subagent header, like the click.
+function handleBubbleActionKeydown(event) {
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  const header = event.target.closest?.('.subagent-bubble-header');
+  if (!header || event.target !== header) return;
+  event.preventDefault();
+  toggleSubagentFold(header.dataset.subagentRunId);
 }
 
 // Clicking an inline-embedded image in a message bubble opens it in the file
@@ -3075,6 +3165,7 @@ export function initBubbleActionHandlers() {
   const messagesEl = document.getElementById('messages');
   if (!messagesEl) return;
   messagesEl.addEventListener('click', handleBubbleActionClick);
+  messagesEl.addEventListener('keydown', handleBubbleActionKeydown);
   messagesEl.addEventListener('click', handleEmbeddedImageClick);
   initThinkingFollow({ getCurrentConversationId: () => currentConvId });
 }
@@ -3112,6 +3203,8 @@ export function appendMessage(msg, scroll = true, msgId = null, force = false, i
     }
   }
   if (isNewNode && insertedNode) {
+    // A reply takes over the board its turn posted (relay-board-view).
+    if (msg?.role === 'assistant') renderRelayBoards();
     syncSeparatorsNow();
     if (scroll) scrollBottom();
   }

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

@@ -38,6 +38,7 @@ import {
 } from './api-client.js';
 import { renderMessages, restoreInFlightThinking, focusConversationMessageById, flushConversationDraft, hydrateConversationDraft, beginConversationDraftSwitch } from './conversation-view.js';
 import { setBackgroundTasksConversation, setConversationBackgroundTasks } from './background-tasks-view.mjs';
+import { setUsageLimitConversation } from './usage-limit-ui.js';
 import { mergeConversationPreviews } from './preview-cards.mjs';
 import { loadRelayQuestions, getPendingQuestionCountsByConversation } from './ask-user-view.js';
 import { loadRelayBoards } from './relay-board-view.js';
@@ -434,6 +435,11 @@ export function applyLoadedConversationState(id, response, {
   restoreInFlightThinking(response.inFlight || null, followLiveUpdates);
   setBackgroundTasksConversation(id);
   setConversationBackgroundTasks(id, response.backgroundTasks || []);
+  setUsageLimitConversation(id, {
+    // Absent from an older relay's payload: keep what the socket said.
+    pause: 'usageLimitPause' in response ? response.usageLimitPause : undefined,
+    providerType: response.runtimeSession?.providerType,
+  });
   // Merge, not replace: this payload only carries one conversation's previews.
   mergeConversationPreviews(id, response.previews || []);
   updateSessionPill(conversations[id], response.runtimeSession || null);

package/server/public/app/markdown-strikethrough.mjs

@@ -0,0 +1,31 @@
+// Strikethrough needs two tildes.
+//
+// The Markdown library also strikes text between two SINGLE tildes. In prose
+// a single tilde means "about" ("~35 s … ~7 min"), and two of them in one
+// paragraph struck out everything in between. Only `~~text~~` strikes now;
+// a single tilde is the character it is.
+
+const DOUBLE_TILDE = /^~~(?=\S)([\s\S]*?\S)~~(?!~)/;
+
+/**
+ * The `del` tokenizer for `marked.use({ tokenizer: … })`. Returns the token
+ * for `~~text~~`, and undefined for anything else: "no strikethrough here".
+ * (`false` would hand the text back to the library's own rule.)
+ */
+export function strictStrikethroughTokenizer(src) {
+  const match = DOUBLE_TILDE.exec(String(src || ''));
+  if (!match) return undefined;
+  return {
+    type: 'del',
+    raw: match[0],
+    text: match[1],
+    tokens: this.lexer.inlineTokens(match[1]),
+  };
+}
+
+/** Installs the rule on a Markdown library; false when it cannot take one. */
+export function useStrictStrikethrough(markdown) {
+  if (!markdown || typeof markdown.use !== 'function') return false;
+  markdown.use({ tokenizer: { del: strictStrikethroughTokenizer } });
+  return true;
+}

package/server/public/app/relay-board-inline.mjs

@@ -0,0 +1,70 @@
+// A plan board inside the reply it belongs to.
+//
+// A board used to be a card of its own at the end of the transcript, below
+// whatever was said after it, and it vanished once an action was chosen. It
+// belongs to one turn: its content reads as part of that turn's reply, and its
+// buttons are what the reply asks for. So it is shown inside the reply's
+// bubble (inside the live bubble while the turn still runs), it stays there
+// after the choice, and it says what was chosen.
+//
+// The reply often IS the plan: the worker posts the reply's own text as the
+// board when the agent wrote its plan as the answer. Then the text is shown
+// once, as the reply, and the board adds only its buttons.
+
+function plain(text) {
+  return String(text || '').replace(/\s+/g, ' ').trim().toLowerCase();
+}
+
+/**
+ * Whether the reply already says what the board says. Both are compared as
+ * the text a reader sees (rendered, whitespace collapsed), so markdown that
+ * renders the same counts as the same.
+ */
+export function boardBodyShownInReply(bodyText, replyText) {
+  const body = plain(bodyText);
+  if (!body) return true;
+  return plain(replyText).includes(body);
+}
+
+/** The label of the action that was chosen, as the button said it. */
+export function chosenActionLabel(board) {
+  const chosen = String(board?.selectedAction || '').trim().toLowerCase();
+  if (!chosen) return '';
+  const actions = Array.isArray(board?.actions) ? board.actions : [];
+  const action = actions.find((item) => String(item?.id || '').trim().toLowerCase() === chosen);
+  return String(action?.label || '').trim() || chosen.replace(/[_-]+/g, ' ');
+}
+
+/** The line that replaces the buttons once the board is settled; '' while it is pending. */
+export function boardOutcomeLine(board) {
+  const status = String(board?.status || 'pending').trim().toLowerCase();
+  if (status === 'pending') return '';
+  const label = chosenActionLabel(board);
+  if (label) return `Chosen: ${label}`;
+  return status === 'dismissed' ? 'Dismissed' : 'Closed';
+}
+
+/** The boards of one conversation, oldest first, each id once. */
+export function boardsOfConversation(boards, conversationId) {
+  const id = String(conversationId || '').trim();
+  if (!id) return [];
+  const seen = new Set();
+  return Array.from(boards || [])
+    .filter((board) => board && board.id && board.conversationId === id)
+    .filter((board) => (seen.has(board.id) ? false : seen.add(board.id)))
+    .sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
+}
+
+/** What a rendered board depends on: a change in any of it redraws the board. */
+export function boardRenderKey(board, { duplicate = false } = {}) {
+  return JSON.stringify([
+    board?.id || '',
+    board?.status || '',
+    board?.selectedAction || '',
+    board?.title || '',
+    board?.body || '',
+    (Array.isArray(board?.actions) ? board.actions : []).map((action) => `${action?.id || ''}:${action?.label || ''}`),
+    board?.recommendedAction || '',
+    duplicate,
+  ]);
+}

package/server/public/app/relay-board-view.js

@@ -1,9 +1,15 @@
 import {
+  IS_SHARED_VIEW,
   currentConvId,
   escHtml,
-  fmtDate,
   relayBoards,
 } from './store.js';
+import {
+  boardBodyShownInReply,
+  boardOutcomeLine,
+  boardRenderKey,
+  boardsOfConversation,
+} from './relay-board-inline.mjs';
 import {
   loadRelayBoards as loadRelayBoardsApi,
   submitRelayBoardAction as submitRelayBoardActionApi,
@@ -11,7 +17,10 @@ import {
 import { renderMarkdownPreview } from './router.js';
 import { attachCodeCopyButtons } from './code-copy.mjs';
 
-let relayBoardRenderHash = '';
+// The conversation whose settled boards (acted on, dismissed) are loaded. They
+// are asked for per conversation: only the pending ones matter everywhere.
+let boardHistoryLoadedFor = '';
+let boardHistoryLoading = '';
 
 export function upsertRelayBoard(board) {
   if (!board || !board.id) return;
@@ -24,91 +33,178 @@ export async function loadRelayBoards() {
   const pendingRes = await loadRelayBoardsApi('pending');
   if (!pendingRes) return;
   const pending = Array.isArray(pendingRes?.boards) ? pendingRes.boards.filter((board) => board && board.id) : [];
-  relayBoards.clear();
+  // The settled boards of the conversation on screen stay: they are part of
+  // its transcript, and this list does not carry them.
+  for (const [id, board] of relayBoards.entries()) {
+    if (board?.status === 'pending' || board?.conversationId !== currentConvId) relayBoards.delete(id);
+  }
   for (const board of pending) relayBoards.set(board.id, board);
   window.renderConvList?.();
   renderRelayBoards();
 }
 
+async function loadBoardHistory(conversationId) {
+  if (IS_SHARED_VIEW || !conversationId || boardHistoryLoading === conversationId) return;
+  boardHistoryLoading = conversationId;
+  try {
+    const res = await loadRelayBoardsApi('all', conversationId);
+    if (!res || currentConvId !== conversationId) return;
+    for (const board of Array.isArray(res.boards) ? res.boards : []) {
+      if (board && board.id) relayBoards.set(board.id, board);
+    }
+    boardHistoryLoadedFor = conversationId;
+    renderRelayBoards();
+  } finally {
+    if (boardHistoryLoading === conversationId) boardHistoryLoading = '';
+  }
+}
+
+/** Where a board is shown: its turn's reply, the live bubble of its turn, or nowhere yet. */
+function findBoardHost(el, board) {
+  const source = String(board?.messageId || board?.queueId || '').trim();
+  if (!source) return null;
+  const replies = el.querySelectorAll(`.msg.assistant[data-source-message-id="${CSS.escape(source)}"]`);
+  // The turn's own reply is the last row that answers the message; a steer's
+  // marker above it is not a reply.
+  for (let index = replies.length - 1; index >= 0; index -= 1) {
+    const bubble = replies[index].querySelector(':scope > .msg-bubble');
+    if (bubble && !replies[index].classList.contains('relay-board-container')) return { bubble, live: false };
+  }
+  const live = document.getElementById('thinking-indicator');
+  if (live && String(live.dataset.messageId || '') === source) {
+    const bubble = live.querySelector(':scope > .thinking-bubble');
+    if (bubble) return { bubble, live: true };
+  }
+  return null;
+}
+
+function renderedText(html) {
+  const probe = document.createElement('div');
+  probe.innerHTML = html;
+  return probe.textContent || '';
+}
+
+/** What the bubble says without the board in it. */
+function bubbleTextWithoutBoards(bubble) {
+  const copy = bubble.cloneNode(true);
+  copy.querySelectorAll('.relay-board-inline').forEach((node) => node.remove());
+  return copy.textContent || '';
+}
+
+function buildBoardSection(board, { duplicate, standalone = false }) {
+  const section = document.createElement('div');
+  section.className = `relay-board-inline${standalone ? ' relay-board-card' : ''}`;
+  section.dataset.boardId = board.id;
+  section.dataset.boardKey = boardRenderKey(board, { duplicate });
+
+  const title = String(board.title || 'Plan ready for review').trim();
+  const parts = [];
+  if (!duplicate) {
+    parts.push(`<div class="relay-board-head">${escHtml(title)}</div>`);
+    parts.push(`<div class="relay-board-body">${renderMarkdownPreview(board.body || '', false)}</div>`);
+  }
+  const actions = Array.isArray(board.actions) ? board.actions : [];
+  const outcome = boardOutcomeLine(board);
+  if (outcome) {
+    parts.push(`<div class="relay-board-outcome">${escHtml(outcome)}</div>`);
+  } else if (actions.length && !IS_SHARED_VIEW) {
+    const recommendedAction = String(board.recommendedAction || '').trim().toLowerCase();
+    parts.push(`<div class="relay-board-actions">${
+      actions.map((action) => {
+        const actionId = String(action?.id || '').trim().toLowerCase();
+        if (!actionId) return '';
+        const actionLabel = String(action?.label || actionId).trim();
+        const isRecommended = recommendedAction && actionId === recommendedAction;
+        return `<button type="button" class="relay-board-action${isRecommended ? ' relay-board-action-recommended' : ''}" data-action-id="${escHtml(actionId)}" onclick="submitRelayBoardAction('${escHtml(board.id)}', this.dataset.actionId)">${escHtml(actionLabel)}</button>`;
+      }).join('')
+    }</div>`);
+  }
+  section.innerHTML = parts.join('');
+  section.querySelectorAll('pre code').forEach((node) => hljs.highlightElement(node));
+  attachCodeCopyButtons(section);
+  return section;
+}
+
+/** Below what the reply says, above its attachments, tool lines and subagents. */
+function placeBoardSection(bubble, section, { live }) {
+  const before = live
+    ? bubble.querySelector(':scope > .dots, :scope > #thinking-activity, :scope > .subagent-bubbles-container')
+    : bubble.querySelector(':scope > .msg-attachments, :scope > .msg-activity, :scope > .msg-workflow-runs, :scope > .msg-preview-cards, :scope > .msg-bubble-actions');
+  if (before) bubble.insertBefore(section, before);
+  else bubble.appendChild(section);
+}
+
+/**
+ * Put every board of the conversation on screen where it belongs. Runs after
+ * every render of the transcript, which rebuilds the bubbles: a board that is
+ * in place and unchanged is left alone, so a selection inside it survives.
+ */
 export function renderRelayBoards() {
   const el = document.getElementById('messages');
   if (!el) return;
-  const boards = Array.from(relayBoards.values())
-    .filter((board) => board && board.conversationId === currentConvId && board.status === 'pending')
-    .sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
-
-  const nextHash = JSON.stringify(
-    boards.map((board) => ({
-      id: board.id,
-      status: board.status,
-      title: board.title || '',
-      body: board.body || '',
-      createdAt: board.createdAt || '',
-      actions: Array.isArray(board.actions) ? board.actions.map((action) => action?.id || '') : [],
-      recommendedAction: board.recommendedAction || '',
-    })),
-  );
-  const existingCards = el.querySelectorAll('.relay-board-container');
-  if (relayBoardRenderHash === nextHash && existingCards.length === boards.length) return;
-  relayBoardRenderHash = nextHash;
-
-  existingCards.forEach((node) => node.remove());
-  if (!boards.length) return;
+  if (currentConvId && boardHistoryLoadedFor !== currentConvId) void loadBoardHistory(currentConvId).catch(() => {});
+  const boards = boardsOfConversation(relayBoards.values(), currentConvId);
+  const placed = new Set();
+  let added = false;
 
   for (const board of boards) {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'msg relay-board-container';
-    wrapper.dataset.boardId = board.id;
-
-    const modeTag = board.mode ? ` <span class="msg-mode">${escHtml(board.mode)}</span>` : '';
-    const boardType = String(board.boardType || 'board').trim().replace(/[_-]+/g, ' ');
-    const title = String(board.title || 'Plan ready for review').trim();
-    const bodyHtml = renderMarkdownPreview(board.body || '', false);
-    const actions = Array.isArray(board.actions) ? board.actions : [];
-    const recommendedAction = String(board.recommendedAction || '').trim().toLowerCase();
-    const actionHtml = actions.length
-      ? `<div class="relay-board-actions">${
-          actions.map((action) => {
-            const actionId = String(action?.id || '').trim().toLowerCase();
-            if (!actionId) return '';
-            const actionLabel = String(action?.label || actionId).trim();
-            const isRecommended = recommendedAction && actionId === recommendedAction;
-            return `<button class="relay-board-action${isRecommended ? ' relay-board-action-recommended' : ''}" data-action-id="${escHtml(actionId)}" onclick="submitRelayBoardAction('${board.id}', this.dataset.actionId)">${escHtml(actionLabel)}</button>`;
-          }).join('')
-        }</div>`
-      : '';
-
-    wrapper.innerHTML = `
-      <div class="relay-board-card">
-        <div class="relay-board-head">${escHtml(title)}${modeTag} · ${escHtml(boardType)} · ${fmtDate(board.createdAt)}</div>
-        <div class="relay-board-body">${bodyHtml}</div>
-        ${actionHtml}
-      </div>`;
-    wrapper.querySelectorAll('pre code').forEach((node) => hljs.highlightElement(node));
-    attachCodeCopyButtons(wrapper);
-    el.appendChild(wrapper);
+    const host = findBoardHost(el, board);
+    const pending = board.status === 'pending';
+    let target = host?.bubble || null;
+    let standalone = false;
+    if (!target) {
+      // No bubble to live in (its turn is further up than the page has
+      // loaded): a pending board still has to be answerable.
+      if (!pending) continue;
+      let wrapper = el.querySelector(`.relay-board-container[data-board-id="${CSS.escape(board.id)}"]`);
+      if (!wrapper) {
+        wrapper = document.createElement('div');
+        wrapper.className = 'msg relay-board-container';
+        wrapper.dataset.boardId = board.id;
+        el.appendChild(wrapper);
+      }
+      target = wrapper;
+      standalone = true;
+    }
+    const duplicate = !standalone && boardBodyShownInReply(
+      renderedText(renderMarkdownPreview(board.body || '', false)),
+      bubbleTextWithoutBoards(target),
+    );
+    const key = boardRenderKey(board, { duplicate });
+    const existing = target.querySelector(`:scope > .relay-board-inline[data-board-id="${CSS.escape(board.id)}"]`);
+    placed.add(existing && existing.dataset.boardKey === key ? existing : null);
+    if (existing && existing.dataset.boardKey === key) continue;
+    const section = buildBoardSection(board, { duplicate, standalone });
+    if (existing) existing.replaceWith(section);
+    else if (standalone) target.appendChild(section);
+    else placeBoardSection(target, section, { live: host.live });
+    placed.add(section);
+    added = added || pending;
   }
-  window.scrollBottom?.();
+
+  // What is on screen and no longer belongs there: a board that moved from
+  // the live bubble into the reply, or one of another conversation.
+  el.querySelectorAll('.relay-board-inline').forEach((node) => { if (!placed.has(node)) node.remove(); });
+  el.querySelectorAll('.relay-board-container').forEach((node) => { if (!node.querySelector('.relay-board-inline')) node.remove(); });
+  if (added) window.scrollBottom?.();
 }
 
 export async function submitRelayBoardAction(boardId, actionId) {
   const id = String(boardId || '').trim();
   const nextActionId = String(actionId || '').trim();
   if (!id || !nextActionId) return;
-  const card = document.querySelector(`.relay-board-container[data-board-id="${id}"]`);
+  const card = document.querySelector(`.relay-board-inline[data-board-id="${CSS.escape(id)}"]`);
   const controls = card ? card.querySelectorAll('button') : [];
   controls.forEach((control) => { control.disabled = true; });
 
   try {
     const r = await submitRelayBoardActionApi(id, nextActionId);
     if (!r?.board) throw new Error('Failed to submit board action');
+    // Kept once it is settled: the reply goes on showing the plan and says
+    // what was chosen.
     relayBoards.set(id, r.board);
-    if (String(r.board.status || '').toLowerCase() !== 'pending') {
-      relayBoards.delete(id);
-    }
     window.renderConvList?.();
     renderRelayBoards();
-    window.showTransientRelayNotice?.(`✅ Action selected: ${nextActionId}`);
   } catch (error) {
     controls.forEach((control) => { control.disabled = false; });
     alert(error.message || 'Failed to submit board action');

package/server/public/app/relay-error-ctas.mjs

@@ -13,6 +13,10 @@
 // Codes are matched post-normalisation: normalizeTerminalErrorCode() lowercases
 // and rewrites every non-alphanumeric run to a dash, so `grok.cli_missing`
 // reaches the transcript as `relay.grok-cli-missing`.
+const CLAUDE_SETTINGS_CTA = Object.freeze([
+  Object.freeze({ action: 'open-claude-settings', label: 'Claude settings' }),
+]);
+
 const RELAY_ERROR_CTAS = Object.freeze({
   'grok-cli-missing': Object.freeze([
     Object.freeze({ action: 'install-grok-cli', label: 'Install Grok CLI' }),
@@ -24,9 +28,14 @@ const RELAY_ERROR_CTAS = Object.freeze({
   ]),
   // Shipped with the Claude relogin plan (§4.3 there) as the deep link its
   // reworded message points at.
-  'claude-authentication-failed': Object.freeze([
-    Object.freeze({ action: 'open-claude-settings', label: 'Claude settings' }),
-  ]),
+  'claude-authentication-failed': CLAUDE_SETTINGS_CTA,
+  // A turn the Claude account refused (claude-turn-failure.mjs): the panel
+  // shows the account and signs in to another one.
+  'claude-billing-error': CLAUDE_SETTINGS_CTA,
+  'claude-oauth-org-not-allowed': CLAUDE_SETTINGS_CTA,
+  'claude-account-on-hold': CLAUDE_SETTINGS_CTA,
+  'claude-verification-required': CLAUDE_SETTINGS_CTA,
+  'claude-account-access': CLAUDE_SETTINGS_CTA,
 });
 
 const STABLE_CODE_PATTERN = /error code:\s*relay\.([a-z0-9-]+)/i;