@oar-sh/oar 0.9.12 → 0.9.14

package/server/public/app/task-console-render.mjs

@@ -1,7 +1,9 @@
 // Pure pieces of the task console and the task rows: the pass/fail chip, the
-// stall hint, the ✓/✘ of an ended task, the console's line rows and the
-// search for the first failure. DOM nodes are built with createElement and
-// textContent only: every string here comes from a worker's output.
+// stall hint, the ✓/✘ of an ended task, the console's line rows, the search
+// for the first failure, the "output stops here" marker of a command piped
+// into tail, and the texts for a task without output (the relay's answer
+// uses them too). DOM nodes are built with createElement and textContent
+// only: every string here comes from a worker's output.
 
 import { ansiToSegments, stallMinutes } from './task-output-text.mjs';
 
@@ -58,19 +60,26 @@ export function stallHint(lastOutputAt, thresholdMinutes, now = Date.now()) {
   };
 }
 
-/** ✓ or ✘ for an ended task, from its status and exit code. */
+/**
+ * ✓, ✘, ■ or ? for an ended task, from its status and exit code. `unknown`
+ * (a task whose worker did not come back after a relay restart) is neither a
+ * success nor a failure: a neutral ?, not a green ✓.
+ */
 export function endedOutcome(task) {
   const status = String(task?.status || '').trim().toLowerCase();
   const exitCode = task?.exitCode;
   const hasExit = exitCode !== null && exitCode !== undefined && exitCode !== '' && Number.isFinite(Number(exitCode));
   const failed = status === 'failed' || (hasExit && Number(exitCode) !== 0);
   const stopped = status === 'stopped' || status === 'killed' || status === 'cancelled';
+  const unknown = !failed && !stopped && !hasExit && status === 'unknown';
   const label = failed
     ? (hasExit ? `failed, exit code ${Number(exitCode)}` : 'failed')
-    : stopped ? 'stopped' : status === 'completed' || (hasExit && Number(exitCode) === 0) ? 'completed' : 'ended';
+    : stopped ? 'stopped'
+      : unknown ? 'ended, result unknown'
+        : status === 'completed' || (hasExit && Number(exitCode) === 0) ? 'completed' : 'ended';
   return {
-    icon: failed ? '✘' : stopped ? '■' : '✓',
-    ok: !failed && !stopped,
+    icon: failed ? '✘' : stopped ? '■' : unknown ? '?' : '✓',
+    ok: !failed && !stopped && !unknown,
     failed,
     label,
   };
@@ -98,12 +107,165 @@ export function taskOutputUnavailable(task) {
   return String(task?.outputKind || '').trim() === 'none';
 }
 
+/**
+ * Why a task has no output to show: the console's `none` answer (the relay's
+ * output route imports these) and the row's hover title, in one wording.
+ */
+export const TASK_OUTPUT_NONE_MESSAGES = Object.freeze({
+  provider: 'Output is not available for this provider.',
+  subagent: 'Sub-agents have no shell output; open the sub-agent view.',
+  noOutputFile: 'This session did not report an output file for this task. Sessions started before the task console need a restart to show output.',
+  noPath: 'Output is not available for this task.',
+});
+
+// ─── Commands piped into tail ────────────────────────────────────────────────
+
+// A command line as its pipeline stages: `{ words, piped }` per simple
+// command, `piped` when a `|` (or `|&`) feeds it. Quotes and backslashes are
+// honoured, `||`, `&&`, `;`, `&` and newlines end a stage without a pipe;
+// `2>&1` and `&>` are redirections, not separators, and a `#` that starts a
+// word comments out the rest of its line. Not a shell: enough to tell where
+// a `| tail` sits.
+function pipelineStages(command) {
+  const text = String(command ?? '');
+  const stages = [];
+  let words = [];
+  let word = '';
+  let inWord = false;
+  let quote = '';
+  let piped = false;
+  const endWord = () => {
+    if (inWord) words.push(word);
+    word = '';
+    inWord = false;
+  };
+  const endStage = (nextPiped) => {
+    endWord();
+    if (words.length) stages.push({ words, piped });
+    words = [];
+    piped = nextPiped;
+  };
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (quote) {
+      if (char === quote) quote = '';
+      else if (char === '\\' && quote === '"' && index + 1 < text.length) word += text[++index];
+      else word += char;
+      continue;
+    }
+    if (char === '\\') {
+      word += text[index + 1] ?? '';
+      inWord = true;
+      index += 1;
+      continue;
+    }
+    if (char === '#' && !inWord) {
+      while (index + 1 < text.length && text[index + 1] !== '\n') index += 1;
+      continue;
+    }
+    if (char === "'" || char === '"') {
+      quote = char;
+      inWord = true;
+      continue;
+    }
+    if (char === '|') {
+      if (text[index + 1] === '|') {
+        index += 1;
+        endStage(false);
+        continue;
+      }
+      if (text[index + 1] === '&') index += 1;
+      endStage(true);
+      continue;
+    }
+    if (char === '&') {
+      const redirect = text[index - 1] === '>' || text[index - 1] === '<' || text[index + 1] === '>';
+      if (!redirect) {
+        if (text[index + 1] === '&') index += 1;
+        endStage(false);
+        continue;
+      }
+    }
+    if (char === ';' || char === '\n' || char === '(' || char === ')') {
+      endStage(false);
+      continue;
+    }
+    if (/\s/.test(char)) {
+      endWord();
+      continue;
+    }
+    word += char;
+    inWord = true;
+  }
+  endStage(false);
+  return stages;
+}
+
+// tail -f / -F / --follow streams; so does tail from a line (`-n +2`, `+2`).
+function tailStreams(args) {
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (/^--follow\b/.test(arg) || /^-[A-Za-z0-9]*[fF]/.test(arg)) return true;
+    if (/^\+\d/.test(arg) || /^-[nc]\+\d/.test(arg) || /^--(?:lines|bytes)=\+/.test(arg)) return true;
+    if ((arg === '-n' || arg === '-c' || arg === '--lines' || arg === '--bytes') && /^\+\d/.test(args[index + 1] || '')) return true;
+  }
+  return false;
+}
+
+/**
+ * 'tail' when the command line pipes into a tail that holds the output back
+ * until the command ends (`npm test 2>&1 | tail -40`), else ''. `tail -f`
+ * and `tail -n +N` stream and do not count; neither does a `|` inside quotes
+ * or a comment. `head` passes its lines on as they come (and ends the
+ * command early), so it holds nothing back.
+ */
+export function pipeHoldProgram(command) {
+  for (const { words, piped } of pipelineStages(command)) {
+    if (!piped) continue;
+    let at = 0;
+    while (at < words.length && /^[A-Za-z_][A-Za-z0-9_]*=/.test(words[at])) at += 1;
+    const program = String(words[at] || '').split('/').pop();
+    if (program === 'tail' && !tailStreams(words.slice(at + 1))) return 'tail';
+  }
+  return '';
+}
+
+/** 'tail' when a task's command line (its `command`, else its description) pipes into a holding tail. */
+export function taskPipeHold(task) {
+  return pipeHoldProgram(task?.command) || pipeHoldProgram(task?.description);
+}
+
+/** What the console and the quiet row say about a command piped into `program`. */
+export function pipeHoldNotice(program) {
+  if (!program) return null;
+  const hint = 'Logging to a file instead (> run.log 2>&1) and following that file shows it live.';
+  return {
+    text: `Output stops here: this command pipes into ${program}, so the rest arrives when it ends.`,
+    hint,
+    title: `This command pipes into ${program}, so its output arrives when it ends. ${hint}`,
+  };
+}
+
+/**
+ * Whether the console shows the "output stops here" marker: a live task
+ * whose command pipes into tail, as long as nothing came in since
+ * the console opened (`openedAt` the end offset of the first read).
+ */
+export function showPipeHoldMarker({ program, ended, kind, openedAt, nextOffset }) {
+  if (!program || ended || kind === 'none' || !kind) return false;
+  return !Number.isFinite(Number(openedAt)) || Number(nextOffset) <= Number(openedAt);
+}
+
 // ─── Line rows ───────────────────────────────────────────────────────────────
 
+// Inverse text arrives with its colours swapped (task-output-text.mjs); a
+// side left unset takes the console's own colour of the other side.
 function segmentClass(segment) {
   const classes = [];
   if (Number.isInteger(segment.fg)) classes.push(`tc-fg-${segment.fg}`);
+  else if (segment.inverse) classes.push('tc-fg-inverse');
   if (Number.isInteger(segment.bg)) classes.push(`tc-bg-${segment.bg}`);
+  else if (segment.inverse) classes.push('tc-bg-inverse');
   if (segment.bold) classes.push('tc-bold');
   if (segment.dim) classes.push('tc-dim');
   if (segment.italic) classes.push('tc-italic');
@@ -188,6 +350,8 @@ export function consoleMetaParts({ task, elapsed, ended, status, exitCode, kind
   parts.push(type === 'monitor' ? 'Monitor' : type === 'local_bash' ? 'Shell' : (type || 'Task'));
   if (elapsed) parts.push(elapsed);
   if (ended) parts.push(endedOutcome({ status, exitCode }).label);
+  // Held since a relay restart until its worker reports.
+  else if (status === 'held') parts.push('waiting for its worker after the relay restart');
   else parts.push('running');
   if (kind === 'snapshot') parts.push('last 8 KB, read again every 3 s');
   if (kind === 'spool' && task?.mirrored) parts.push("output mirrored from the runtime's recent window");

package/server/public/app/task-console.mjs

@@ -4,9 +4,13 @@
 // as `task_output_chunk`, which the relay sends only to pages watching the
 // task (task-console-watch.mjs). A chunk that does not continue where the
 // view stands (a dropped chunk, a rewritten file) reads the tail again.
-// "Load earlier" pages back up to 5 MB. A provider that can only give a
-// snapshot is read again every 3 s instead. Full-screen on phones; Escape,
-// ×, a click outside and the system back close it.
+// "Load earlier" pages back up to 5 MB (from the top of the output, or the
+// header while following the end). A provider that can only give a snapshot
+// is read again every 3 s instead. A command piped into tail gets a
+// marker where its output stops until it ends. On wider screens the console
+// ends above the task's row in the composer panel, so the row's chip stays
+// in view; full-screen on phones. Escape, ×, a click outside and the system
+// back close it.
 
 import { apiFetchOrThrow } from './api-client.js';
 import { currentConvId } from './store.js';
@@ -19,22 +23,32 @@ import {
   getBackgroundTaskHealth,
   getTaskStallMinutes,
   isBackgroundTaskStopping,
+  onBackgroundTasksPanelRendered,
   stopBackgroundTask,
   subscribeBackgroundTasks,
 } from './background-tasks-view.mjs';
 import {
+  TASK_OUTPUT_NONE_MESSAGES,
   buildLineNode,
   chunkAction,
   chunkEndOffset,
   consoleMetaParts,
   findFirstFailureIndex,
   loadEarlierState,
+  pipeHoldNotice,
   runnerChip,
+  showPipeHoldMarker,
   stallHint,
+  taskPipeHold,
 } from './task-console-render.mjs';
 
 const TAIL_LINES = 2000;
 const SNAPSHOT_POLL_MS = 3000;
+// Wider than a phone, the console stops above the task's row when the row's
+// top is at least this far down the window (the console keeps about 320 px
+// of it); otherwise it covers the page as before.
+const PHONE_MAX_WIDTH = 680;
+const ABOVE_ROW_MIN_TOP = 360;
 
 const tc = {
   open: false,
@@ -56,6 +70,8 @@ const tc = {
   partialNode: null,
   startOffset: 0,
   nextOffset: 0,
+  // Where the output stood at the first read: past it, output came in.
+  openedAt: null,
   size: 0,
   hasMoreBefore: false,
   loadedBytes: 0,
@@ -86,7 +102,9 @@ function elements() {
     stop: document.getElementById('task-console-stop'),
     scroll: document.getElementById('task-console-scroll'),
     earlier: document.getElementById('task-console-earlier'),
+    earlierTop: document.getElementById('task-console-earlier-top'),
     body: document.getElementById('task-console-body'),
+    hold: document.getElementById('task-console-hold'),
     status: document.getElementById('task-console-status'),
     jump: document.getElementById('task-console-jump'),
   };
@@ -139,11 +157,13 @@ function renderHeader() {
     }).join(' · ');
   }
   const health = getBackgroundTaskHealth(tc.conversationId, tc.taskId) || tc.health;
+  const holdNotice = pipeHoldNotice(taskPipeHold(task));
   if (stall) {
     const hint = ended ? null : stallHint(health?.lastOutputAt, getTaskStallMinutes(tc.conversationId));
     stall.hidden = !hint;
     stall.textContent = hint ? hint.text : '';
     stall.className = hint?.warn ? 'tc-stall tc-stall-warn' : 'tc-stall';
+    stall.title = holdNotice ? holdNotice.title : '';
   }
   const chipInfo = runnerChip(health);
   if (chip) {
@@ -160,6 +180,56 @@ function renderHeader() {
     stop.disabled = stopping;
     stop.textContent = stopping ? 'Stopping…' : 'Stop';
   }
+  renderHold();
+  syncLayout();
+}
+
+/** The "output stops here" marker under the last line, while nothing new came. */
+function renderHold() {
+  const { hold } = elements();
+  if (!hold) return;
+  const found = currentTask();
+  const program = taskPipeHold(found?.task || tc.answerTask);
+  const notice = pipeHoldNotice(program);
+  const show = !!notice && !tc.loading && showPipeHoldMarker({
+    program,
+    ended: tc.ended || !!found?.ended,
+    kind: tc.kind,
+    openedAt: tc.openedAt,
+    nextOffset: tc.nextOffset,
+  });
+  hold.hidden = !show;
+  if (!show) return;
+  hold.querySelector('.tc-hold-text').textContent = notice.text;
+  hold.querySelector('.tc-hold-hint').textContent = notice.hint;
+}
+
+/**
+ * Wider than a phone, the modal ends above the task's row in the composer
+ * panel, so the row (its ✓/✘ chip, clock and Stop) stays in view and live.
+ * Without the row on screen, or with too little room above it, the console
+ * covers the page as before.
+ */
+function syncLayout() {
+  const { modal } = elements();
+  if (!modal) return;
+  let bottom = 0;
+  if (tc.open && window.innerWidth > PHONE_MAX_WIDTH) {
+    const panel = document.getElementById('background-tasks-panel');
+    const row = panel && !panel.hidden && panel.hasAttribute('open')
+      ? panel.querySelector(`.bg-task-row[data-task-id="${CSS.escape(tc.taskId)}"]`)
+      : null;
+    const rect = row?.getBoundingClientRect?.();
+    if (rect && rect.height > 0 && rect.top >= ABOVE_ROW_MIN_TOP && rect.top < window.innerHeight) {
+      bottom = Math.ceil(window.innerHeight - rect.top + 6);
+    }
+  }
+  modal.classList.toggle('tc-above-panel', bottom > 0);
+  modal.style.bottom = bottom > 0 ? `${bottom}px` : '';
+  // Above the panel the page below stays usable: the console is no modal then.
+  const dialog = modal.querySelector('[role="dialog"]');
+  if (bottom > 0) dialog?.removeAttribute('aria-modal');
+  else dialog?.setAttribute('aria-modal', 'true');
 }
 
 function renderStatus() {
@@ -168,7 +238,7 @@ function renderStatus() {
   const hasLines = tc.earlierLines.length || tc.folded.lines.length || tc.folded.partial;
   let text = '';
   if (tc.error) text = tc.error;
-  else if (tc.kind === 'none') text = tc.message || 'output not available for this provider';
+  else if (tc.kind === 'none') text = tc.message || TASK_OUTPUT_NONE_MESSAGES.provider;
   else if (tc.loading && !hasLines) text = 'Loading…';
   else if (!hasLines && !tc.note) text = tc.ended ? 'This task wrote no output.' : 'No output yet. Lines appear as the task writes them.';
   if (tc.note) text = text ? `${text} ${tc.note}` : tc.note;
@@ -176,13 +246,17 @@ function renderStatus() {
   status.hidden = !text;
 }
 
+// Both "Load earlier" buttons: the one above the first line, and the
+// header's, which is in reach while following the end.
 function renderEarlierButton() {
-  const { earlier } = elements();
-  if (!earlier) return;
+  const { earlier, earlierTop } = elements();
   const state = loadEarlierState({ hasMoreBefore: tc.hasMoreBefore, loadedBytes: tc.loadedBytes, loading: tc.loadingEarlier });
-  earlier.hidden = state.hidden;
-  earlier.disabled = state.disabled;
-  earlier.textContent = state.text;
+  for (const button of [earlier, earlierTop]) {
+    if (!button) continue;
+    button.hidden = state.hidden;
+    button.disabled = state.disabled;
+    button.textContent = state.text;
+  }
 }
 
 // ─── Lines ───────────────────────────────────────────────────────────────────
@@ -202,6 +276,7 @@ function clearLines() {
 function afterContentChange(appended) {
   const { scroll, jump } = elements();
   renderStatus();
+  renderHold();
   if (!scroll) return;
   if (tc.following) {
     scroll.scrollTop = scroll.scrollHeight;
@@ -340,6 +415,7 @@ async function fetchTail({ before = null } = {}) {
   tc.nextOffset = Number.isFinite(Number(data.endOffset)) ? Number(data.endOffset) : Number(data.size) || 0;
   tc.size = Number(data.size) || tc.nextOffset;
   tc.hasMoreBefore = data.hasMoreBefore === true;
+  if (tc.openedAt === null) tc.openedAt = tc.nextOffset;
   if (typeof data.text === 'string') {
     feed(data.text);
     tc.loadedBytes = Math.max(0, tc.nextOffset - tc.startOffset) || data.text.length;
@@ -357,7 +433,11 @@ async function fetchTail({ before = null } = {}) {
   for (const chunk of pending) applyChunk(chunk);
 }
 
-async function loadEarlier() {
+/**
+ * Pages back. `reveal` (the header's button): the view goes to the lines
+ * just loaded, at the top, instead of staying where the reader was.
+ */
+async function loadEarlier({ reveal = false } = {}) {
   if (!tc.open || tc.loadingEarlier || !tc.hasMoreBefore) return;
   if (loadEarlierState({ hasMoreBefore: true, loadedBytes: tc.loadedBytes }).disabled) return;
   const token = tc.fetchToken;
@@ -372,6 +452,11 @@ async function loadEarlier() {
     if (Number.isFinite(start)) tc.startOffset = start;
     tc.hasMoreBefore = data.hasMoreBefore === true;
     prependEarlier(lines);
+    const { scroll } = elements();
+    if (reveal && scroll && lines.length) {
+      tc.following = false;
+      scroll.scrollTop = 0;
+    }
   } catch (error) {
     if (token === tc.fetchToken) {
       tc.note = errorText(error);
@@ -452,6 +537,7 @@ function resetState() {
   tc.loadingEarlier = false;
   tc.startOffset = 0;
   tc.nextOffset = 0;
+  tc.openedAt = null;
   tc.size = 0;
   tc.hasMoreBefore = false;
   tc.loadedBytes = 0;
@@ -505,6 +591,8 @@ export function closeTaskConsole({ fromHistory = false } = {}) {
   consoleWatch.unwatch();
   clearLines();
   resetState();
+  syncLayout();
+  renderHold();
   syncSnapshotPoll();
   syncTicker();
   if (!fromHistory) consoleHistory?.closed();
@@ -604,13 +692,17 @@ export function initTaskConsole() {
     renderHeader();
   });
 
-  const { modal, stop, scroll, jump, earlier, failure, chip } = elements();
+  const { modal, stop, scroll, jump, earlier, earlierTop, failure, chip } = elements();
   modal?.addEventListener('click', (event) => {
     if (event.target === modal) closeTaskConsole();
   });
   modal?.querySelector('.task-console-close')?.addEventListener('click', () => closeTaskConsole());
   stop?.addEventListener('click', () => void stopTask());
   earlier?.addEventListener('click', () => void loadEarlier());
+  earlierTop?.addEventListener('click', () => void loadEarlier({ reveal: true }));
+  window.addEventListener('resize', () => {
+    if (tc.open) syncLayout();
+  });
   failure?.addEventListener('click', () => jumpToFirstFailure());
   chip?.addEventListener('click', () => jumpToFirstFailure());
   jump?.addEventListener('click', () => {
@@ -624,7 +716,15 @@ export function initTaskConsole() {
   }, { passive: true });
   document.addEventListener('keydown', (event) => {
     if (event.key !== 'Escape' || !tc.open) return;
+    // Above the panel, Escape in the composer (or any field outside the
+    // console) is that field's own.
+    if (modal?.classList.contains('tc-above-panel') && !modal.contains(event.target)
+      && event.target?.closest?.('input, textarea, select, [contenteditable="true"], [contenteditable=""]')) return;
     event.preventDefault();
     closeTaskConsole();
   });
+  // The panel drew its rows again (a fold, a task set): the row may have moved.
+  onBackgroundTasksPanelRendered(() => {
+    if (tc.open) syncLayout();
+  });
 }

package/server/public/app/task-output-text.mjs

@@ -163,7 +163,7 @@ function clampByte(value) {
 }
 
 function plainStyle() {
-  return { fg: null, bg: null, bold: false, dim: false, italic: false, underline: false };
+  return { fg: null, bg: null, bold: false, dim: false, italic: false, underline: false, inverse: false };
 }
 
 function applySgr(state, params) {
@@ -175,11 +175,13 @@ function applySgr(state, params) {
     else if (code === 2) state.dim = true;
     else if (code === 3) state.italic = true;
     else if (code === 4) state.underline = true;
+    else if (code === 7) state.inverse = true;
     else if (code === 22) {
       state.bold = false;
       state.dim = false;
     } else if (code === 23) state.italic = false;
     else if (code === 24) state.underline = false;
+    else if (code === 27) state.inverse = false;
     else if (code >= 30 && code <= 37) state.fg = code - 30;
     else if (code === 39) state.fg = null;
     else if (code >= 40 && code <= 47) state.bg = code - 40;
@@ -204,8 +206,11 @@ function applySgr(state, params) {
 /**
  * One line as styled segments `{ text, fg, bg, bold, dim, italic, underline }`,
  * colours 0–15 or null (256 and truecolor mapped to the nearest of the 16).
- * Adjacent segments never share a style. Any escape that is not SGR is
- * dropped from the text.
+ * Inverse text (SGR 7, until 27 or 0) comes with its colours already swapped
+ * and `inverse: true`: a null `fg` then means the default background as the
+ * text colour, a null `bg` the default text colour as the background (the
+ * filled RUN / PASS / FAIL badges of vitest). Adjacent segments never share a
+ * style. Any escape that is not SGR is dropped from the text.
  */
 export function ansiToSegments(lineText) {
   const text = String(lineText ?? '');
@@ -214,13 +219,17 @@ export function ansiToSegments(lineText) {
   const pushText = (value) => {
     const clean = stripControlKeepSgr(value).replace(/\x1b/g, '');
     if (!clean) return;
+    const fg = state.inverse ? state.bg : state.fg;
+    const bg = state.inverse ? state.fg : state.bg;
     const last = segments[segments.length - 1];
-    if (last && last.fg === state.fg && last.bg === state.bg && last.bold === state.bold
-      && last.dim === state.dim && last.italic === state.italic && last.underline === state.underline) {
+    if (last && last.fg === fg && last.bg === bg && last.bold === state.bold && last.dim === state.dim
+      && last.italic === state.italic && last.underline === state.underline && !!last.inverse === state.inverse) {
       last.text += clean;
       return;
     }
-    segments.push({ text: clean, ...state });
+    const segment = { text: clean, fg, bg, bold: state.bold, dim: state.dim, italic: state.italic, underline: state.underline };
+    if (state.inverse) segment.inverse = true;
+    segments.push(segment);
   };
   let at = 0;
   const pattern = new RegExp(SGR_PATTERN.source, 'g');

package/server/public/app/transcript-jump-bottom-view.mjs

@@ -29,6 +29,7 @@ import {
   shouldHoldFocusOnJump,
 } from './composer-keyboard.mjs';
 import {
+  baselineBeforeUpdate,
   isScrollOnSendEnabled,
   followsEndThroughResize,
   isNearBottom,
@@ -197,13 +198,16 @@ export function followsTranscriptEnd() {
   if (!isConversationWindowAtTail()) return false;
   const el = scroller();
   const height = jump ? null : observedClientHeight;
-  return followsEndThroughResize({
+  const follows = followsEndThroughResize({
     nearBottomNow: isMessagesNearBottom(),
     clientHeight: el?.clientHeight,
     observedClientHeight: height,
     distanceAtObservedHeight: el && height !== null ? Math.max(0, el.scrollHeight - height - el.scrollTop) : null,
     nearBottomPxAtObservedHeight: height !== null ? resolveNearBottomThresholdPx(height) : 0,
   });
+  // What the update adds is counted against the rows on the page before it.
+  if (!follows && el && !jump && syncStateConversation()) state = baselineBeforeUpdate(state, rowKeys(el));
+  return follows;
 }
 
 /**

package/server/public/app/transcript-jump-bottom.mjs

@@ -103,6 +103,26 @@ export function nextJumpButtonState(previous, {
   };
 }
 
+/**
+ * The state before a live update that does not follow the end changes the
+ * transcript: the baseline is taken now, from the rows before it, if there
+ * is none yet. Otherwise it is taken by the next frame's nextJumpButtonState,
+ * by then with the update's row in it, and a row that lands between the
+ * reader's scroll away and that frame (one frame, or a tenth of a second on
+ * a busy page) is not counted.
+ */
+export function baselineBeforeUpdate(previous, rowKeys = []) {
+  if (Array.isArray(previous?.baseline)) return previous;
+  return {
+    visible: previous?.visible === true,
+    baseline: rowKeys.slice(),
+    count: 0,
+    unseen: previous?.unseen === true,
+    question: previous?.question === true,
+    waiting: 0,
+  };
+}
+
 export const JUMP_BUTTON_LABEL = 'Jump to the latest message';
 export const JUMP_BUTTON_QUESTION_LABEL = 'A question is waiting for your answer. Jump to it';
 export const JUMP_QUESTION_BADGE = '?';