@oar-sh/oar 0.9.5 → 0.9.7

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/math-dollars.mjs

@@ -0,0 +1,89 @@
+// Which `$` in a run of text delimit inline maths, and which are plain dollar
+// signs. Prices are the common case of the second kind: without a rule,
+// "$5 for one and $9 for two" reads as one formula running from the first
+// sign to the second.
+//
+// The rule is the one pandoc uses for dollar maths: the opening `$` has a
+// non-space character directly after it, the closing `$` is the next dollar
+// sign, has a non-space character directly before it and no digit directly
+// after it. A `$$` pair is
+// display maths and is left alone, and a `$` behind a backslash is escaped.
+
+const TEX_LOOKING = /[\\^_{}=]/;
+
+function isEscaped(text, index) {
+  let backslashes = 0;
+  for (let i = index - 1; i >= 0 && text[i] === '\\'; i -= 1) backslashes += 1;
+  return backslashes % 2 === 1;
+}
+
+function isSpace(char) {
+  return char === undefined || /\s/.test(char);
+}
+
+// A formula holds no dollar sign of its own, so only the next one can close
+// it. When that one does not qualify ("$5, and $x^2$": it follows a space),
+// the opening sign is a plain dollar and the next one gets its own turn.
+function findClosingDollar(text, openIndex) {
+  let i = openIndex + 1;
+  while (i < text.length && (text[i] !== '$' || isEscaped(text, i))) i += 1;
+  if (i >= text.length) return -1;
+  // Part of a `$$`: not the end of an inline formula.
+  if (text[i + 1] === '$') return -1;
+  if (isSpace(text[i - 1])) return -1;
+  const content = text.slice(openIndex + 1, i);
+  // "$5/$10": a digit right behind the sign means the sign starts a number.
+  // Real maths directly followed by a digit ("$x^2$3") is told apart by
+  // looking like TeX.
+  if (/\d/.test(text[i + 1] || '') && !TEX_LOOKING.test(content)) return -1;
+  return i;
+}
+
+/**
+ * Scan `text` for single-dollar maths.
+ * @returns {{ spans: Array<[number, number]>, literals: number[] }} `spans`
+ *   are [open, close] index pairs of formulas, `literals` the indexes of `$`
+ *   that are plain dollar signs.
+ */
+export function scanInlineDollars(text) {
+  const source = String(text ?? '');
+  const spans = [];
+  const literals = [];
+  let index = 0;
+  while (index < source.length) {
+    if (source[index] !== '$' || isEscaped(source, index)) {
+      index += 1;
+      continue;
+    }
+    if (source[index + 1] === '$') {
+      const close = source.indexOf('$$', index + 2);
+      index = close < 0 ? index + 2 : close + 2;
+      continue;
+    }
+    const close = isSpace(source[index + 1]) ? -1 : findClosingDollar(source, index);
+    if (close < 0) {
+      literals.push(index);
+      index += 1;
+      continue;
+    }
+    spans.push([index, close]);
+    index = close + 1;
+  }
+  return { spans, literals };
+}
+
+/** `text` cut at its plain dollar signs: `[{ text, literal }]`, in order. */
+export function splitAtLiteralDollars(text) {
+  const source = String(text ?? '');
+  const { literals } = scanInlineDollars(source);
+  if (!literals.length) return [{ text: source, literal: false }];
+  const parts = [];
+  let from = 0;
+  for (const index of literals) {
+    if (index > from) parts.push({ text: source.slice(from, index), literal: false });
+    parts.push({ text: '$', literal: true });
+    from = index + 1;
+  }
+  if (from < source.length) parts.push({ text: source.slice(from), literal: false });
+  return parts;
+}

package/server/public/app/model-selector-options.mjs

@@ -12,7 +12,7 @@ export function composerPlaceholderFor({ modelId = '', providerType = '' } = {})
   const provider = String(providerType || '').trim().toLowerCase();
   const id = String(modelId || '').trim().toLowerCase().replace(/\[[^\]]*\]$/, '');
   const providerFallback = () => {
-    if (provider === 'claude') return 'Message Claude…';
+    if (provider === 'claude' || provider === 'claude-cloud') return 'Message Claude…';
     if (provider === 'grok') return 'Message Grok…';
     if (provider === 'openai' || provider === 'openai-byok') return 'Message OpenAI…';
     if (provider === 'cursor') return 'Message Cursor…';

package/server/public/app/plan-usage-view.mjs

@@ -32,6 +32,7 @@ const SOURCE_LABELS = Object.freeze(Object.assign(Object.create(null), {
 const TAB_LABELS = Object.freeze(Object.assign(Object.create(null), {
   github: 'Copilot',
   claude: 'Claude',
+  'claude-cloud': 'Claude Cloud',
   cursor: 'Cursor',
   grok: 'Grok',
 }));
@@ -96,26 +97,32 @@ export function formatAmount(value, unit) {
   return String(Math.round(n * 100) / 100);
 }
 
-export function formatResetCountdown(resetAt, now = new Date()) {
+/**
+ * @param {object} [options]
+ * @param {boolean} [options.expiry] the date is when the allowance ends for
+ *   good (a credit), so it reads "expires …" instead of "resets …"
+ */
+export function formatResetCountdown(resetAt, now = new Date(), { expiry = false } = {}) {
   if (!resetAt) return null;
   const target = new Date(resetAt);
   if (Number.isNaN(target.getTime())) return null;
   const reference = now instanceof Date && !Number.isNaN(now.getTime()) ? now : new Date();
+  const verb = expiry ? 'expires' : 'resets';
   const diffMs = target.getTime() - reference.getTime();
-  if (diffMs <= 0) return 'resets now';
+  if (diffMs <= 0) return expiry ? 'expired' : 'resets now';
   const minutes = Math.floor(diffMs / 60000);
-  if (minutes < 60) return `resets in ${Math.max(1, minutes)} min`;
+  if (minutes < 60) return `${verb} in ${Math.max(1, minutes)} min`;
   const hours = Math.floor(minutes / 60);
   if (hours < 24) {
     const remainderMinutes = minutes % 60;
-    return remainderMinutes ? `resets in ${hours} h ${remainderMinutes} min` : `resets in ${hours} h`;
+    return remainderMinutes ? `${verb} in ${hours} h ${remainderMinutes} min` : `${verb} in ${hours} h`;
   }
   const days = Math.floor(hours / 24);
   if (days <= 14) {
     const remainderHours = hours % 24;
-    return remainderHours ? `resets in ${days} d ${remainderHours} h` : `resets in ${days} d`;
+    return remainderHours ? `${verb} in ${days} d ${remainderHours} h` : `${verb} in ${days} d`;
   }
-  return `resets ${target.toISOString().slice(0, 10)}`;
+  return `${verb} ${target.toISOString().slice(0, 10)}`;
 }
 
 /**
@@ -153,12 +160,17 @@ function renderMeter(meter, now) {
   const width = meter.unlimited ? 100 : Math.max(0, Math.min(100, utilization ?? 0));
   const color = meter.unlimited ? '#3fb950' : utilizationColor(utilization);
   const summary = meterSummaryText(meter);
-  const countdown = formatResetCountdown(meter.resetAt, now);
+  const countdown = formatResetCountdown(meter.resetAt, now, { expiry: meter.resetKind === 'expiry' });
   const percentLabel = meter.unlimited
     ? '∞'
     : (utilization === null ? '—' : `${Math.round(utilization)}%`);
+  // The provider's own severity word; "normal" is the absence of a warning.
+  const severity = String(meter.severity ?? '').trim().toLowerCase();
   const flags = [
     meter.estimated ? '<span class="plan-usage-flag">estimated</span>' : '',
+    severity && severity !== 'normal'
+      ? `<span class="plan-usage-flag plan-usage-flag-severity" data-severity="${escapeHtml(severity)}">${escapeHtml(severity.replace(/[_-]+/g, ' '))}</span>`
+      : '',
   ].filter(Boolean).join('');
   const meta = [summary, countdown].filter(Boolean).join(' · ');
 
@@ -193,6 +205,19 @@ function renderDetailSection(section) {
   `;
 }
 
+/** A line of text on the card itself, with an optional link behind it. */
+function renderNote(note) {
+  const text = String(note?.text ?? '').trim();
+  if (!text) return '';
+  const url = String(note?.link?.url ?? '').trim();
+  const label = String(note?.link?.label ?? '').trim();
+  // Same rule as the server's: only an absolute https link becomes an href.
+  const link = label && /^https:\/\//i.test(url)
+    ? ` <a class="plan-usage-link" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    : '';
+  return `<div class="plan-usage-detail-note plan-usage-note" data-note-id="${escapeHtml(note?.id ?? '')}">${escapeHtml(text)}${link}</div>`;
+}
+
 /**
  * The signed-in account under the card title. Three distinct states, because
  * "we could not ask" must not be drawn as "you are logged out": no `account`
@@ -218,6 +243,7 @@ function renderAccountLine(account) {
 function renderCard(card, now, { active = true } = {}) {
   const meters = Array.isArray(card.meters) ? card.meters : [];
   const details = Array.isArray(card.details) ? card.details : [];
+  const notes = Array.isArray(card.notes) ? card.notes.filter(Boolean) : [];
   const links = Array.isArray(card.links) ? card.links : [];
 
   const statusBadge = STATUS_BADGES[card.status];
@@ -255,6 +281,7 @@ function renderCard(card, now, { active = true } = {}) {
       </header>
       ${card.message ? `<div class="plan-usage-message">${escapeHtml(card.message)}</div>` : ''}
       ${metersHtml}
+      ${notes.map(renderNote).join('')}
       ${details.map(renderDetailSection).join('')}
       <div class="plan-usage-card-foot">
         ${capturedLabel ? `<span class="plan-usage-captured">${capturedLabel}</span>` : ''}
@@ -296,8 +323,9 @@ export function planUsageSubtitle(report) {
   if (!providers.length) return 'No usage data available';
   const available = providers.filter((card) => Array.isArray(card.meters) && card.meters.length);
   if (!available.length) return 'No plan limits reported yet';
+  // A credit's expiry is not a reset: nothing refills on that date.
   const soonest = available
-    .flatMap((card) => card.meters.map((meter) => meter.resetAt))
+    .flatMap((card) => card.meters.map((meter) => (meter?.resetKind === 'expiry' ? null : meter?.resetAt)))
     .filter(Boolean)
     .sort()[0];
   const countdown = formatResetCountdown(soonest);

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,16 +28,35 @@ 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;
+// The shape of a failure note, mirrored from shared/failure-note-text.mjs
+// (the browser cannot import it; failure-note-text.test.mjs keeps the two in
+// step): one paragraph of at most this length leading up to the code, not a
+// quotation, a code span, a table cell, a list item or a heading. A reply
+// that talks about a code gets no button.
+const FAILURE_NOTE_LEAD_MAX = 600;
+const QUOTED_LEAD = /["“”'`|>]\s*$/;
+const MARKUP_LEAD = /^\s*(?:#+|[>|*-]|\d+\.)\s/;
 
+/** The code of a text that is a failure note of the relay, else ''. */
 export function relayErrorCodeFromText(text) {
-  const match = String(text || '').match(STABLE_CODE_PATTERN);
-  return match ? match[1].toLowerCase() : '';
+  const raw = String(text || '').trim();
+  const match = raw.match(STABLE_CODE_PATTERN);
+  if (!match) return '';
+  const lead = raw.slice(0, match.index);
+  if (lead.length > FAILURE_NOTE_LEAD_MAX || /[\r\n]/.test(lead)) return '';
+  if (QUOTED_LEAD.test(lead) || MARKUP_LEAD.test(lead)) return '';
+  return match[1].toLowerCase();
 }
 
 /**