@oar-sh/oar 0.9.9 → 0.9.11

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

@@ -0,0 +1,464 @@
+// The transcript's jump-to-bottom button, and the re-pin that keeps a reader
+// who follows the end at the end when the transcript resizes under them.
+// Decisions live in transcript-jump-bottom.mjs; this module reads the
+// scroller and the rows and applies them.
+//
+// The transcript moves by itself in two cases only: the reader is at the
+// end, or the reader has just sent something. Both are asked here, before
+// the row is put on the page: followsTranscriptEnd() by every live update,
+// ownSendFollows() by the reader's own sends. "At the end" is one margin
+// everywhere (resolveNearBottomThresholdPx). An update that is not followed
+// leaves the transcript where it is; what it added marks the button.
+//
+// Following the end has no state of its own: every live update asks
+// followsTranscriptEnd() before it appends and scrolls. When the composer grows
+// (the background-task panel appears or opens, a banner, a taller draft) the
+// transcript shrinks from below, scrollTop stays and no scroll event fires,
+// so the reader is left that many pixels above the end and the next update
+// stops following. The ResizeObserver here puts them back before paint.
+
+import { currentConvId, isMessagesNearBottom, scrollBottom } from './store.js';
+import { isConversationWindowAtTail } from './conversation-view.js';
+import { disarmThinkingFollow, getThinkingFollowMode, syncThinkingFollowButtons } from './thinking-follow.js';
+import { resolveNearBottomThresholdPx } from './transcript-viewport-anchor.mjs';
+import {
+  createViewportBaseline,
+  isOnScreenKeyboardOpen,
+  shouldHoldFocusOnJump,
+} from './composer-keyboard.mjs';
+import {
+  isScrollOnSendEnabled,
+  isNearBottom,
+  jumpButtonPresentation,
+  jumpScrollBehavior,
+  nextJumpButtonState,
+  shouldRepinOnResize,
+  transcriptRowKey,
+} from './transcript-jump-bottom.mjs';
+
+// The final snap of a smooth jump where the browser has no scrollend event.
+const SMOOTH_JUMP_FALLBACK_MS = 900;
+// A card that waits for the reader: a question or an approval, or a board
+// whose actions are still open.
+const WAITING_CARD_SELECTOR = '.relay-question-container, .relay-board-inline .relay-board-actions';
+const STATUS_ID = 'jump-to-bottom-status';
+
+let initialized = false;
+let state = null;
+let stateConversationId = '';
+// The reader followed the end as of the last scroll event, at this scrollTop.
+let pinned = true;
+let pinnedScrollTop = 0;
+// The transcript's height as of the last ResizeObserver round.
+let observedClientHeight = null;
+let jump = null;
+let updateScheduled = false;
+let loadConversationEnd = null;
+// Counts the times the reader left the end: a scroll that took the position
+// up and away from it, whatever caused it (a wheel, a drag, a key with the
+// focus anywhere, the scrollbar). An input that moves nothing is none: a
+// wheel notch at the end, a key typed into a card. What scrolls to the end on
+// the reader's behalf after their own send checks that this has not happened
+// since.
+let readerMoveEpoch = 0;
+let lastScrollTop = 0;
+const endLeftListeners = new Set();
+
+function scroller() {
+  return document.getElementById('messages');
+}
+
+function distanceFromBottom(el) {
+  return Math.max(0, el.scrollHeight - el.clientHeight - el.scrollTop);
+}
+
+function rowKeys(el) {
+  const keys = [];
+  for (const node of el.children) {
+    if (!node.classList?.contains('msg')) continue;
+    const key = transcriptRowKey({
+      messageId: node.dataset.messageId,
+      live: node.id === 'thinking-indicator',
+    });
+    if (key) keys.push(key);
+  }
+  return keys;
+}
+
+// Whether a waiting card lies wholly below what the reader sees.
+function questionWaitingBelow(el) {
+  const bottom = el.getBoundingClientRect().bottom;
+  for (const card of el.querySelectorAll(WAITING_CARD_SELECTOR)) {
+    if (card.getBoundingClientRect().top >= bottom) return true;
+  }
+  return false;
+}
+
+// What a screen reader hears when the button changes its state: the button's
+// own label is only read once it has the focus.
+function statusRegion(button) {
+  let region = document.getElementById(STATUS_ID);
+  if (region || !button?.parentNode) return region;
+  region = document.createElement('div');
+  region.id = STATUS_ID;
+  region.setAttribute('role', 'status');
+  region.setAttribute('aria-live', 'polite');
+  region.style.cssText = 'position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;';
+  button.parentNode.insertBefore(region, button.nextSibling);
+  return region;
+}
+
+function render(next) {
+  const button = document.getElementById('jump-to-bottom-btn');
+  if (!button) return;
+  const shown = jumpButtonPresentation(next || {});
+  button.classList.toggle('visible', next?.visible === true);
+  if (button.dataset.state !== shown.state) button.dataset.state = shown.state;
+  const badge = button.querySelector('.jump-to-bottom-badge');
+  if (badge) {
+    if (badge.textContent !== shown.badge) badge.textContent = shown.badge;
+    badge.classList.toggle('jump-to-bottom-badge-dot', shown.dot);
+    badge.hidden = !shown.badge && !shown.dot;
+  }
+  if (button.getAttribute('aria-label') !== shown.label) {
+    button.setAttribute('aria-label', shown.label);
+    button.title = shown.label;
+  }
+  const region = statusRegion(button);
+  if (region && region.textContent !== shown.announcement) region.textContent = shown.announcement;
+}
+
+function syncStateConversation() {
+  const conversationId = String(currentConvId || '').trim();
+  if (conversationId !== stateConversationId) {
+    state = null;
+    stateConversationId = conversationId;
+  }
+  return conversationId;
+}
+
+function update() {
+  updateScheduled = false;
+  const el = scroller();
+  if (!el) return;
+  const conversationId = syncStateConversation();
+  if (!conversationId || jump) {
+    render(null);
+    return;
+  }
+  notePositionAfterContentChange(el);
+  const distance = distanceFromBottom(el);
+  const nearBottomPx = resolveNearBottomThresholdPx(el.clientHeight);
+  const away = !isNearBottom(distance, nearBottomPx);
+  state = nextJumpButtonState(state, {
+    distance,
+    clientHeight: el.clientHeight,
+    nearBottomPx,
+    rowKeys: away ? rowKeys(el) : [],
+    question: away && questionWaitingBelow(el),
+  });
+  render(state);
+}
+
+function scheduleUpdate() {
+  if (updateScheduled) return;
+  updateScheduled = true;
+  requestAnimationFrame(update);
+}
+
+/** A card or a board was put on the page, or taken off it. */
+export function refreshJumpButton() {
+  scheduleUpdate();
+}
+
+/**
+ * `listener` runs when a reader who followed the end is found away from it
+ * without having scrolled: content landed that was not followed. Whoever
+ * keeps "at the end" from the last scroll event lets go of it then.
+ */
+export function onTranscriptEndLeft(listener) {
+  if (typeof listener === 'function') endLeftListeners.add(listener);
+}
+
+/**
+ * Asked by every live update before it changes the transcript: true when
+ * the reader is at the end and the update scrolls with it. Otherwise the
+ * transcript stays where it is. Only a question: what was really added says
+ * so itself (a row is counted, anything else calls noteTranscriptNews()).
+ */
+export function followsTranscriptEnd() {
+  return isMessagesNearBottom();
+}
+
+/**
+ * Something landed below a reader who is not at the end and added no row to
+ * count (a reply growing in its bubble, a thought, a tool line): the button
+ * says that there is news until the reader is at the end again.
+ */
+export function noteTranscriptNews() {
+  const el = scroller();
+  if (!el || !syncStateConversation()) return;
+  state = {
+    visible: state?.visible === true,
+    baseline: Array.isArray(state?.baseline) ? state.baseline : rowKeys(el),
+    count: state?.count || 0,
+    unseen: true,
+    question: state?.question === true,
+  };
+  scheduleUpdate();
+}
+
+/**
+ * The reader sends something themselves (the composer, a steer, Resend, an
+ * answer on a card, a board's action): taken at that moment, before anything
+ * is awaited. Nothing a relay or an agent puts into the conversation comes
+ * here.
+ */
+export function beginOwnSend() {
+  return { conversationId: String(currentConvId || '').trim(), epoch: readerMoveEpoch, follows: false };
+}
+
+/**
+ * A send from the new-chat screen has no conversation; the relay's answer
+ * creates it. Named here once it is on screen, so the send goes on in it and
+ * in no other.
+ */
+export function nameOwnSendConversation(send, conversationId) {
+  if (send && !send.conversationId) send.conversationId = String(conversationId || '').trim();
+}
+
+// The send is still the last thing the reader did to this conversation's
+// position: it is on screen, and they have not scrolled away since.
+function ownSendHolds(send) {
+  return !!send
+    && send.conversationId === String(currentConvId || '').trim()
+    && send.epoch === readerMoveEpoch;
+}
+
+/**
+ * Whether what the send puts on the page is followed to the end; asked
+ * before each row and each step. A reader who is at the end is followed like
+ * with anything else, whatever became of the send. The send adds one right
+ * to that: while it holds, it takes the reader to the end from wherever they
+ * are (unless that is switched off in the settings) and keeps them there
+ * through the layout that follows it. Once the reader has scrolled away, or
+ * another conversation is on screen, that right is gone.
+ */
+export function ownSendFollows(send) {
+  const atEnd = isMessagesNearBottom();
+  if (!ownSendHolds(send)) return atEnd;
+  send.follows = send.follows || atEnd || isScrollOnSendEnabled();
+  return send.follows;
+}
+
+/**
+ * To the end after the reader's own send, and again through the layout that
+ * follows it (the bubble's separator, a picture that loads, the composer
+ * shrinking back): each step asks again.
+ */
+export function scrollAfterOwnSend(send) {
+  const step = () => { if (ownSendFollows(send)) scrollBottom(); };
+  step();
+  requestAnimationFrame(step);
+  setTimeout(step, 120);
+}
+
+// A scroll event is dispatched a frame after the scroll, before that frame's
+// ResizeObserver round: when the composer grew in between, the transcript
+// has already shrunk, and the reader would read as having left the end. So
+// the position is judged at the height the observer last saw; a resize it
+// has not handled yet is its own to judge.
+function notePosition(el) {
+  const height = observedClientHeight ?? el.clientHeight;
+  const distance = Math.max(0, el.scrollHeight - height - el.scrollTop);
+  pinned = isNearBottom(distance, resolveNearBottomThresholdPx(height));
+  pinnedScrollTop = el.scrollTop;
+}
+
+// The content changed without a scroll event. A reader who followed the end
+// and is away from it now was not followed (rows landed while they held a
+// selection, a card grew): a later resize must not take them to the end.
+function notePositionAfterContentChange(el) {
+  const followed = pinned;
+  notePosition(el);
+  if (!followed || pinned) return;
+  for (const listener of endLeftListeners) {
+    try { listener(); } catch {}
+  }
+}
+
+function endJump() {
+  if (!jump) return;
+  jump.cleanup();
+  jump = null;
+}
+
+// Rows that landed during the animation were not followed (the reader was
+// not at the end yet): the end is wherever it is now.
+function finishJump() {
+  endJump();
+  const el = scroller();
+  scrollBottom();
+  if (el) notePosition(el);
+  state = null;
+  scheduleUpdate();
+}
+
+function startSmoothJump(el) {
+  endJump();
+  // A wheel or a touch during the animation is the reader taking over.
+  const takeOver = () => {
+    endJump();
+    notePosition(el);
+    scheduleUpdate();
+  };
+  const timer = setTimeout(finishJump, SMOOTH_JUMP_FALLBACK_MS);
+  el.addEventListener('scrollend', finishJump);
+  el.addEventListener('wheel', takeOver, { passive: true });
+  el.addEventListener('touchstart', takeOver, { passive: true });
+  jump = {
+    cleanup() {
+      clearTimeout(timer);
+      el.removeEventListener('scrollend', finishJump);
+      el.removeEventListener('wheel', takeOver);
+      el.removeEventListener('touchstart', takeOver);
+    },
+  };
+  el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+}
+
+function prefersReducedMotion() {
+  try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; }
+}
+
+export function jumpTranscriptToBottom() {
+  const el = scroller();
+  if (!el) return;
+  // The end wins over a followed section of the live bubble.
+  if (getThinkingFollowMode()) {
+    disarmThinkingFollow();
+    syncThinkingFollowButtons(document, null);
+  }
+  state = null;
+  render(null);
+  // A window in the middle of the history (a search result, a pin) ends
+  // above the conversation's end: the end is loaded instead.
+  if (loadConversationEnd && !isConversationWindowAtTail()) {
+    endJump();
+    jump = { cleanup() {} };
+    void Promise.resolve()
+      .then(() => loadConversationEnd())
+      .catch(() => {})
+      .finally(finishJump);
+    return;
+  }
+  const behavior = jumpScrollBehavior({
+    distance: distanceFromBottom(el),
+    clientHeight: el.clientHeight,
+    reducedMotion: prefersReducedMotion(),
+  });
+  if (behavior === 'smooth') startSmoothJump(el);
+  else finishJump();
+}
+
+function handleScroll() {
+  const el = scroller();
+  if (!el) return;
+  const movedUp = el.scrollTop < lastScrollTop - 1;
+  lastScrollTop = el.scrollTop;
+  if (jump) {
+    if (distanceFromBottom(el) <= 1) finishJump();
+    return;
+  }
+  notePosition(el);
+  // `pinned` is "at the end" as of this scroll. A clamp (the page got
+  // shorter) also takes scrollTop down, and ends at the end.
+  if (movedUp && !pinned) readerMoveEpoch += 1;
+  scheduleUpdate();
+}
+
+function handleResize() {
+  const el = scroller();
+  if (!el) return;
+  // A followed section of the live bubble pins itself (thinking-follow.js).
+  if (!jump && !getThinkingFollowMode() && distanceFromBottom(el) > 0 && shouldRepinOnResize({
+    pinned,
+    pinnedScrollTop,
+    scrollTop: el.scrollTop,
+    nearBottomNow: isMessagesNearBottom(),
+  })) {
+    scrollBottom();
+  }
+  observedClientHeight = el.clientHeight;
+  notePosition(el);
+  scheduleUpdate();
+}
+
+const viewportBaseline = createViewportBaseline();
+
+function noteViewport() {
+  const height = window.visualViewport?.height || window.innerHeight || 0;
+  return { height, tallest: viewportBaseline.note(window.innerWidth || 0, height) };
+}
+
+function isEditableElement(node) {
+  return !!node && (node.tagName === 'TEXTAREA' || node.tagName === 'INPUT' || node.isContentEditable === true);
+}
+
+// A tap that keeps a focused field focused raises the phone's keyboard even
+// when none was showing (the composer can be focused with the keyboard
+// down). So the button holds the focus for a mouse, or while the keyboard is
+// open; otherwise the field lets it go.
+function handleButtonPointerDown(event) {
+  const active = document.activeElement;
+  const { height, tallest } = noteViewport();
+  const keyboardOpen = isOnScreenKeyboardOpen({
+    editableFocused: isEditableElement(active),
+    visibleHeight: height,
+    tallestHeight: tallest,
+  });
+  if (shouldHoldFocusOnJump({ pointerType: event.pointerType, keyboardOpen })) {
+    event.preventDefault();
+    return;
+  }
+  if (isEditableElement(active)) {
+    try { active.blur(); } catch {}
+  }
+}
+
+/**
+ * `loadEnd` loads the conversation's end in place of a history window; the
+ * button calls it when the page holds a window in the middle of the history.
+ */
+export function initTranscriptJumpToBottom({ loadEnd } = {}) {
+  if (typeof loadEnd === 'function') loadConversationEnd = loadEnd;
+  if (initialized) return;
+  const el = scroller();
+  const button = document.getElementById('jump-to-bottom-btn');
+  if (!el || !button) return;
+  initialized = true;
+  lastScrollTop = el.scrollTop;
+  pinnedScrollTop = el.scrollTop;
+  observedClientHeight = el.clientHeight;
+  button.addEventListener('click', (event) => {
+    event.preventDefault();
+    jumpTranscriptToBottom();
+  });
+  // With the keyboard open, a tap must not take the composer's focus (and
+  // with it the keyboard) away; with it closed, it must not raise it.
+  button.addEventListener('pointerdown', handleButtonPointerDown);
+  noteViewport();
+  window.visualViewport?.addEventListener?.('resize', noteViewport, { passive: true });
+  window.addEventListener('resize', noteViewport, { passive: true });
+  el.addEventListener('scroll', handleScroll, { passive: true });
+  // The whole subtree: the button shows at any distance once something new
+  // is below, so it also has to go when the end comes back to the reader
+  // without a scroll (the live bubble folding its thoughts, a row shrinking).
+  if (typeof MutationObserver === 'function') {
+    new MutationObserver(scheduleUpdate).observe(el, { childList: true, subtree: true, characterData: true });
+  }
+  if (typeof ResizeObserver === 'function') {
+    new ResizeObserver(handleResize).observe(el);
+  }
+  scheduleUpdate();
+}

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

@@ -0,0 +1,210 @@
+// The transcript's jump-to-bottom button, without the DOM: when it shows,
+// which of its three states it is in (plain, something new below, a question
+// waits below), what its badge counts, how far a click scrolls smoothly, and
+// whether a resize of the transcript re-pins a reader who was following the
+// end.
+// transcript-jump-bottom-view.mjs reads the scroller and the rows and applies
+// what this module decides.
+//
+// "At the bottom" is the composer's near-bottom rule (isMessagesNearBottom,
+// resolveNearBottomThresholdPx); the caller passes its threshold in.
+//
+// Also here: the setting that decides whether the reader's own send jumps to
+// the end.
+
+/** The button fades in once the reader is this many screens above the end. */
+export const JUMP_BUTTON_SHOW_SCREENS = 1;
+/** Further than this many screens a click jumps at once instead of scrolling. */
+export const JUMP_SMOOTH_MAX_SCREENS = 3;
+export const JUMP_BADGE_MAX = 99;
+
+/**
+ * One key per row the reader sees. The live bubble of a turn has the
+ * prompt's id as its message id, so it gets a key of its own. A folded agent
+ * prompt is a row like any other: its reply shows below it and counts too.
+ */
+export function transcriptRowKey({ messageId = '', live = false } = {}) {
+  const id = String(messageId || '').trim();
+  if (!id) return '';
+  return live ? `live:${id}` : `msg:${id}`;
+}
+
+/**
+ * Rows that arrived below the reader since `baselineKeys` was taken: keys
+ * after the last row the baseline knows, not in the baseline, each once.
+ * Older history paged in above, or a row re-rendered under a new node, is not
+ * news. A transcript sharing no row with the baseline is another window (a
+ * reload, a jump into the history): nothing is counted there.
+ */
+export function countNewRows(baselineKeys, currentKeys) {
+  const baseline = new Set((baselineKeys || []).filter(Boolean));
+  const current = (currentKeys || []).filter(Boolean);
+  let lastKnown = -1;
+  current.forEach((key, index) => {
+    if (baseline.has(key)) lastKnown = index;
+  });
+  if (lastKnown < 0 && baseline.size) return 0;
+  const fresh = new Set();
+  for (const key of current.slice(lastKnown + 1)) {
+    if (!baseline.has(key)) fresh.add(key);
+  }
+  return fresh.size;
+}
+
+export function isNearBottom(distance, nearBottomPx) {
+  return Math.max(0, Number(distance) || 0) <= Math.max(0, Number(nearBottomPx) || 0);
+}
+
+/**
+ * The button's next state from the scroller's geometry. At the bottom it
+ * hides and forgets the baseline. Away from it, the rows on the page when the
+ * reader left are the baseline the badge counts from; the plain button shows
+ * from one screen above the end and, once shown, stays until the bottom.
+ *
+ * The transcript does not move under a reader who is away from the end, so
+ * the button is how they learn of what landed there, at any distance:
+ * `unseen` is a live update that was not followed (it holds until the
+ * bottom: a reply growing in its bubble adds no row to count), `question` a
+ * card waiting for an answer below the viewport (as it is now: answered
+ * elsewhere, it is gone).
+ */
+export function nextJumpButtonState(previous, {
+  distance,
+  clientHeight,
+  nearBottomPx,
+  rowKeys = [],
+  unseen = false,
+  question = false,
+} = {}) {
+  if (isNearBottom(distance, nearBottomPx)) {
+    return { visible: false, baseline: null, count: 0, unseen: false, question: false };
+  }
+  const baseline = Array.isArray(previous?.baseline) ? previous.baseline : rowKeys.slice();
+  const screens = Number(clientHeight) > 0 ? Number(distance) / Number(clientHeight) : 0;
+  const count = countNewRows(baseline, rowKeys);
+  const unseenNow = previous?.unseen === true || unseen === true;
+  const questionNow = question === true;
+  return {
+    visible: previous?.visible === true || screens >= JUMP_BUTTON_SHOW_SCREENS || count > 0 || unseenNow || questionNow,
+    baseline,
+    count,
+    unseen: unseenNow,
+    question: questionNow,
+  };
+}
+
+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 = '?';
+
+/**
+ * How a state looks and reads. `state` is 'plain', 'new' or 'question'; a
+ * waiting question wins over news. `badge` is the count, '?' for a question,
+ * or empty: with `dot`, an empty badge is drawn as a dot (news without a row
+ * to count). `announcement` is what a screen reader is told when the state is
+ * entered; the label alone is only read when the button is focused.
+ */
+export function jumpButtonPresentation({ visible = false, count = 0, unseen = false, question = false } = {}) {
+  if (!visible) return { state: 'plain', label: JUMP_BUTTON_LABEL, badge: '', dot: false, announcement: '' };
+  if (question) {
+    return {
+      state: 'question',
+      label: JUMP_BUTTON_QUESTION_LABEL,
+      badge: JUMP_QUESTION_BADGE,
+      dot: false,
+      announcement: 'A question is waiting for your answer below.',
+    };
+  }
+  const badge = jumpBadgeText(count);
+  if (badge) {
+    return {
+      state: 'new',
+      label: `${JUMP_BUTTON_LABEL} (${Math.trunc(Number(count))} new)`,
+      badge,
+      dot: false,
+      announcement: 'New messages below.',
+    };
+  }
+  if (unseen) {
+    return {
+      state: 'new',
+      label: `${JUMP_BUTTON_LABEL} (new below)`,
+      badge: '',
+      dot: true,
+      announcement: 'New messages below.',
+    };
+  }
+  return { state: 'plain', label: JUMP_BUTTON_LABEL, badge: '', dot: false, announcement: '' };
+}
+
+/** 'smooth' up to JUMP_SMOOTH_MAX_SCREENS above the end, else 'instant'. */
+export function jumpScrollBehavior({ distance, clientHeight, reducedMotion = false } = {}) {
+  if (reducedMotion) return 'instant';
+  const height = Number(clientHeight);
+  if (!(height > 0)) return 'instant';
+  return Number(distance) / height <= JUMP_SMOOTH_MAX_SCREENS ? 'smooth' : 'instant';
+}
+
+export function jumpBadgeText(count) {
+  const value = Math.max(0, Math.trunc(Number(count) || 0));
+  if (!value) return '';
+  return value > JUMP_BADGE_MAX ? `${JUMP_BADGE_MAX}+` : String(value);
+}
+
+/**
+ * Whether a resize of the transcript (the composer or the background-task
+ * panel growing under it) re-pins it to the end. The scroller shrinking from
+ * below keeps scrollTop and fires no scroll event, so the reader is still
+ * described by the last note of their position: `pinned` (they followed the
+ * end, by a scroll event or when the content last changed) and the scrollTop
+ * it was taken at. While scrollTop is that one, the note alone decides: a
+ * reader who was not at the end is never taken there by a resize. Once
+ * scrollTop has moved since (a restore, a clamp, the browser's anchoring),
+ * the note is stale and the geometry as it is now decides.
+ */
+export function shouldRepinOnResize({ pinned, pinnedScrollTop, scrollTop, nearBottomNow }) {
+  if (Number(scrollTop) === Number(pinnedScrollTop)) return pinned === true;
+  return nearBottomNow === true;
+}
+
+// "Jump to the end when I send a message" (Settings › General). A setting of
+// this browser, kept in localStorage like the theme. On unless switched off:
+// with it off, the reader's own send follows the same rule as everything
+// else and only scrolls a transcript that is at its end already. The
+// document and the storage are passed in by the tests.
+
+export const SCROLL_ON_SEND_STORAGE_KEY = 'copilot_scroll_on_send';
+export const SCROLL_ON_SEND_TOGGLE_ID = 'scroll-on-send-toggle';
+
+/** Anything but an explicit off is on: a missing or damaged value included. */
+export function parseScrollOnSendSetting(stored) {
+  const value = String(stored ?? '').trim().toLowerCase();
+  if (!value) return true;
+  return value !== '0' && value !== 'false';
+}
+
+export function serializeScrollOnSendSetting(enabled) {
+  return enabled ? '1' : '0';
+}
+
+function storage() {
+  try { return globalThis.localStorage || null; } catch { return null; }
+}
+
+export function isScrollOnSendEnabled(store = storage()) {
+  try {
+    return parseScrollOnSendSetting(store?.getItem(SCROLL_ON_SEND_STORAGE_KEY));
+  } catch {
+    return true;
+  }
+}
+
+export function syncScrollOnSendToggle(doc = globalThis.document, store = storage()) {
+  const checkbox = doc?.getElementById?.(SCROLL_ON_SEND_TOGGLE_ID);
+  if (checkbox) checkbox.checked = isScrollOnSendEnabled(store);
+}
+
+export function updateScrollOnSendSetting(enabled, { doc = globalThis.document, store = storage() } = {}) {
+  try { store?.setItem(SCROLL_ON_SEND_STORAGE_KEY, serializeScrollOnSendSetting(!!enabled)); } catch {}
+  syncScrollOnSendToggle(doc, store);
+}

package/server/public/app/transcript-reload-freshness.mjs

@@ -0,0 +1,25 @@
+// A reload of the transcript rebuilds it from what its request returned. A
+// row the socket put on the page while that request was on its way can be
+// missing from the answer (the relay stored it after the request read the
+// conversation), and the rebuild would take it off the page again until the
+// next reload. The socket's rows are counted (getTranscriptLiveRowEpoch in
+// conversation-view.js); when the count moved during the request, the
+// request is made again, now that the row is stored.
+
+/** Requests before a reload gives up on an answer that keeps going stale. */
+export const LIVE_ROW_RELOAD_ATTEMPTS = 3;
+
+/**
+ * `stale` is true when rows still arrived during the last attempt: the page
+ * holds rows the answer lacks, so the caller leaves the transcript alone and
+ * the next reload asks again.
+ */
+export async function loadKeepingLiveRows(load, getLiveRowEpoch, { attempts = LIVE_ROW_RELOAD_ATTEMPTS } = {}) {
+  let response = null;
+  for (let attempt = 1; attempt <= Math.max(1, attempts); attempt += 1) {
+    const epoch = getLiveRowEpoch();
+    response = await load();
+    if (!response || getLiveRowEpoch() === epoch) return { response, stale: false };
+  }
+  return { response, stale: true };
+}