@oar-sh/oar 0.9.11 → 0.9.12

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

@@ -0,0 +1,234 @@
+// Browser copy of the parts of shared/task-output-text.mjs the task console
+// needs: the incremental line folder, the SGR colour segments (with the
+// control stripping they use) and the stall minutes. The browser cannot
+// import shared/ (only server/public is served), so these are hand-kept
+// copies; task-output-text.test.mjs pins them to the original. Scrubbing and
+// runner parsing stay on the relay: what reaches the page is already clean.
+
+export const TASK_OUTPUT_LINE_CHARS_MAX = 4000;
+
+function toMillis(value) {
+  if (value == null || value === '') return NaN;
+  const number = Number(value);
+  if (Number.isFinite(number)) return number;
+  return Date.parse(String(value));
+}
+
+/** Whole minutes since the last output, or null when unknown. */
+export function stallMinutes(lastOutputAt, now = Date.now()) {
+  const last = toMillis(lastOutputAt);
+  const current = toMillis(now);
+  if (!Number.isFinite(last) || !Number.isFinite(current) || last <= 0) return null;
+  return Math.max(0, Math.floor((current - last) / 60_000));
+}
+
+// SGR (colours and text style) is the only escape kept. Its parameters are
+// digits and semicolons; the colon form is rare and goes with the rest.
+const SGR_PATTERN = /\x1b\[([0-9;]*)m/g;
+// OSC (titles, hyperlinks, clipboard): ESC ] … BEL | ST, stripped whole. An
+// unterminated one at the end is stripped to the end.
+const OSC_PATTERN = /\x1b\][^\x07\x1b]*(?:\x07|\x1b\\|$)/g;
+// Every CSI (cursor moves, erases, modes) that is not SGR.
+const CSI_PATTERN = /\x1b\[[0-?]*[ -/]*[@-~]/g;
+// Character-set designations (ESC ( B) and the remaining two-byte escapes.
+const CHARSET_PATTERN = /\x1b[()*+\-./][0-~]/g;
+// The remaining two-byte escapes (ESC 7, ESC =, ESC M, a CSI cut short) and
+// a lone ESC; never the start of a kept SGR.
+const OTHER_ESCAPE_PATTERN = /\x1b(?!\[[0-9;]*m)[0-~]?/g;
+// C0 except \t \n \r, DEL, C1, and a lone ESC left over.
+const CONTROL_PATTERN = /[\x00-\x08\x0b\x0c\x0e-\x1a\x1c-\x1f\x7f-\x9f]/g;
+
+/**
+ * Drops OSC, every CSI but SGR, the other escapes, C1 and C0 controls except
+ * `\n`, `\r` and `\t`; keeps `ESC [ … m`.
+ */
+export function stripControlKeepSgr(text) {
+  const value = String(text ?? '');
+  if (!/[\x00-\x08\x0b-\x0c\x0e-\x1f\x7f-\x9f]/.test(value)) return value;
+  return value
+    .replace(OSC_PATTERN, '')
+    .replace(CSI_PATTERN, (match) => (/^\x1b\[[0-9;]*m$/.test(match) ? match : ''))
+    .replace(CHARSET_PATTERN, '')
+    .replace(OTHER_ESCAPE_PATTERN, '')
+    .replace(CONTROL_PATTERN, '');
+}
+
+// ─── Lines ───────────────────────────────────────────────────────────────────
+
+function cutLine(text) {
+  return text.length > TASK_OUTPUT_LINE_CHARS_MAX ? text.slice(0, TASK_OUTPUT_LINE_CHARS_MAX) : text;
+}
+
+// A line's final state: a `\r` not followed by `\n` discards what came before
+// it (a trailing one still waits for what follows).
+function finalLineState(raw) {
+  const body = raw.endsWith('\r') ? raw.slice(0, -1) : raw;
+  const at = body.lastIndexOf('\r');
+  return at === -1 ? body : body.slice(at + 1);
+}
+
+/**
+ * Lines from a stream fed in arbitrary pieces. `feed(text)` returns
+ * `{ lines, partial, changedFrom }`: every completed line so far as
+ * `{ text, count }` (adjacent identical lines folded, `count` unbounded), the
+ * open partial line in its current state ('' when there is none), and the
+ * index of the first line this feed added or changed (a folded repeat bumps
+ * the count of the line before). `end()` closes the partial line and returns
+ * the same shape. `lines` is the folder's own array: copy it to keep it.
+ */
+export function createLineFolder() {
+  const lines = [];
+  let partial = '';
+  let changedFrom = 0;
+
+  function push(text) {
+    const line = cutLine(text);
+    const last = lines[lines.length - 1];
+    if (last && last.text === line) {
+      last.count += 1;
+      changedFrom = Math.min(changedFrom, lines.length - 1);
+    } else {
+      changedFrom = Math.min(changedFrom, lines.length);
+      lines.push({ text: line, count: 1 });
+    }
+  }
+
+  function result() {
+    const out = { lines, partial: finalLineState(partial), changedFrom };
+    changedFrom = lines.length;
+    return out;
+  }
+
+  return {
+    feed(text) {
+      const chunk = String(text ?? '');
+      if (chunk) {
+        const parts = (partial + chunk).split('\n');
+        partial = parts.pop();
+        for (const raw of parts) push(finalLineState(raw));
+        // The open line stays small: a progress bar redraws itself
+        // thousands of times on one line.
+        const keepCr = partial.endsWith('\r');
+        partial = cutLine(finalLineState(partial)) + (keepCr ? '\r' : '');
+      }
+      return result();
+    },
+    end() {
+      const last = finalLineState(partial);
+      partial = '';
+      if (last) push(last);
+      return result();
+    },
+    get lines() {
+      return lines;
+    },
+  };
+}
+
+// ─── Colours ─────────────────────────────────────────────────────────────────
+
+// The 16-colour palette (xterm defaults), for mapping 256 and truecolor.
+const PALETTE_16 = [
+  [0, 0, 0], [205, 0, 0], [0, 205, 0], [205, 205, 0], [0, 0, 238], [205, 0, 205], [0, 205, 205], [229, 229, 229],
+  [127, 127, 127], [255, 0, 0], [0, 255, 0], [255, 255, 0], [92, 92, 255], [255, 0, 255], [0, 255, 255], [255, 255, 255],
+];
+
+function nearest16([r, g, b]) {
+  let best = 0;
+  let bestDistance = Infinity;
+  PALETTE_16.forEach(([pr, pg, pb], index) => {
+    const distance = (r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2;
+    if (distance < bestDistance) {
+      best = index;
+      bestDistance = distance;
+    }
+  });
+  return best;
+}
+
+function rgbOf256(n) {
+  if (n < 16) return PALETTE_16[n];
+  if (n >= 232) {
+    const level = 8 + (n - 232) * 10;
+    return [level, level, level];
+  }
+  const index = n - 16;
+  const steps = [0, 95, 135, 175, 215, 255];
+  return [steps[Math.floor(index / 36)], steps[Math.floor(index / 6) % 6], steps[index % 6]];
+}
+
+function clampByte(value) {
+  const number = Number(value);
+  return Number.isFinite(number) ? Math.min(255, Math.max(0, number)) : 0;
+}
+
+function plainStyle() {
+  return { fg: null, bg: null, bold: false, dim: false, italic: false, underline: false };
+}
+
+function applySgr(state, params) {
+  const codes = params === '' ? [0] : params.split(';').map((part) => (part === '' ? 0 : Number(part)));
+  for (let i = 0; i < codes.length; i += 1) {
+    const code = codes[i];
+    if (code === 0) Object.assign(state, plainStyle());
+    else if (code === 1) state.bold = true;
+    else if (code === 2) state.dim = true;
+    else if (code === 3) state.italic = true;
+    else if (code === 4) state.underline = 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 >= 30 && code <= 37) state.fg = code - 30;
+    else if (code === 39) state.fg = null;
+    else if (code >= 40 && code <= 47) state.bg = code - 40;
+    else if (code === 49) state.bg = null;
+    else if (code >= 90 && code <= 97) state.fg = code - 90 + 8;
+    else if (code >= 100 && code <= 107) state.bg = code - 100 + 8;
+    else if (code === 38 || code === 48) {
+      const key = code === 38 ? 'fg' : 'bg';
+      if (codes[i + 1] === 5 && i + 2 < codes.length) {
+        state[key] = nearest16(rgbOf256(Math.min(255, Math.max(0, codes[i + 2] || 0))));
+        i += 2;
+      } else if (codes[i + 1] === 2 && i + 4 < codes.length) {
+        state[key] = nearest16([clampByte(codes[i + 2]), clampByte(codes[i + 3]), clampByte(codes[i + 4])]);
+        i += 4;
+      } else {
+        break;
+      }
+    }
+  }
+}
+
+/**
+ * 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.
+ */
+export function ansiToSegments(lineText) {
+  const text = String(lineText ?? '');
+  const state = plainStyle();
+  const segments = [];
+  const pushText = (value) => {
+    const clean = stripControlKeepSgr(value).replace(/\x1b/g, '');
+    if (!clean) return;
+    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) {
+      last.text += clean;
+      return;
+    }
+    segments.push({ text: clean, ...state });
+  };
+  let at = 0;
+  const pattern = new RegExp(SGR_PATTERN.source, 'g');
+  for (let match = pattern.exec(text); match; match = pattern.exec(text)) {
+    pushText(text.slice(at, match.index));
+    applySgr(state, match[1]);
+    at = match.index + match[0].length;
+  }
+  pushText(text.slice(at));
+  return segments;
+}

package/server/public/app/transcript-island.mjs

@@ -0,0 +1,73 @@
+// Live rows for a window that ends above the conversation's end, without the
+// DOM. Such a window (an "island": a jump to a pin or a search result, a
+// reload around the place read, a kept window more was written below than one
+// page holds) has rows between its newest row and the end that are not on the
+// page. A live row put under it would hide that gap: the newer pages load
+// from the window's newest row, and nothing would load what lies between. So
+// the row is held back: the window keeps saying "newer rows exist", the
+// jump-to-bottom button counts the row, and the newer pages bring it in their
+// turn. Once the window meets the end, live rows are put on the page again.
+//
+// conversation-view.js keeps one of these for the window on the page and
+// applies what it decides; transcript-jump-bottom.mjs draws the count.
+
+/**
+ * The rows held back for the window on the page. `follow` is told of every
+ * change of that window: one that meets the end, or another conversation's,
+ * holds none.
+ */
+export function createHeldBackLiveRows() {
+  let conversationId = '';
+  let ids = [];
+  let unnamed = 0;
+  return {
+    /** A live row for `conversation` that was not put on the page. */
+    note(conversation, messageId) {
+      const id = String(conversation || '').trim();
+      if (!id) return 0;
+      if (id !== conversationId) {
+        conversationId = id;
+        ids = [];
+        unnamed = 0;
+      }
+      const rowId = String(messageId || '').trim();
+      if (!rowId) unnamed += 1;
+      else if (!ids.includes(rowId)) ids.push(rowId);
+      return ids.length + unnamed;
+    },
+    /** How many rows wait for `conversation`'s window. */
+    count(conversation) {
+      return String(conversation || '').trim() === conversationId ? ids.length + unnamed : 0;
+    },
+    /** The ids of the rows that wait, oldest first. */
+    ids(conversation) {
+      return String(conversation || '').trim() === conversationId ? ids.slice() : [];
+    },
+    /** The window on the page now. True when rows were let go. */
+    follow({ conversationId: conversation = '', atTail = true } = {}) {
+      const id = String(conversation || '').trim();
+      if (!atTail && id === conversationId) return false;
+      const had = ids.length + unnamed > 0;
+      conversationId = atTail ? '' : id;
+      ids = [];
+      unnamed = 0;
+      return had;
+    },
+  };
+}
+
+/**
+ * Whether a newer page that says it is the last one really brings the window
+ * to the end. It can have been fetched before a held-back row was written
+ * (a page waiting in the prefetch buffer, a request answered while the row's
+ * event was on its way): then a row the page lacks, and the page does not
+ * show either, is still to come, and one more page is asked for. An empty
+ * page ends it: a row that is still missing was deleted since.
+ */
+export function newerPageReachesEnd({ pageHasMore = false, pageMessageIds = [], heldBackIds = [], renderedIds = [] } = {}) {
+  if (pageHasMore) return false;
+  const page = (pageMessageIds || []).map((id) => String(id || '').trim()).filter(Boolean);
+  if (!page.length) return true;
+  const known = new Set([...page, ...(renderedIds || []).map((id) => String(id || '').trim())]);
+  return (heldBackIds || []).every((id) => known.has(String(id || '').trim()));
+}

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

@@ -15,10 +15,12 @@
 // (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.
+// stops following. The ResizeObserver here puts them back before paint, and
+// an update that lands before its round still follows (a reply streaming in
+// right after the panel grew).
 
 import { currentConvId, isMessagesNearBottom, scrollBottom } from './store.js';
-import { isConversationWindowAtTail } from './conversation-view.js';
+import { getHeldBackLiveRowCount, isConversationWindowAtTail, releaseReadingAnchorHold } from './conversation-view.js';
 import { disarmThinkingFollow, getThinkingFollowMode, syncThinkingFollowButtons } from './thinking-follow.js';
 import { resolveNearBottomThresholdPx } from './transcript-viewport-anchor.mjs';
 import {
@@ -28,6 +30,7 @@ import {
 } from './composer-keyboard.mjs';
 import {
   isScrollOnSendEnabled,
+  followsEndThroughResize,
   isNearBottom,
   jumpButtonPresentation,
   jumpScrollBehavior,
@@ -156,6 +159,8 @@ function update() {
     nearBottomPx,
     rowKeys: away ? rowKeys(el) : [],
     question: away && questionWaitingBelow(el),
+    windowAtTail: isConversationWindowAtTail(),
+    waiting: getHeldBackLiveRowCount(),
   });
   render(state);
 }
@@ -187,7 +192,18 @@ export function onTranscriptEndLeft(listener) {
  * so itself (a row is counted, anything else calls noteTranscriptNews()).
  */
 export function followsTranscriptEnd() {
-  return isMessagesNearBottom();
+  // The bottom of a window that ends above the conversation's end is not the
+  // end: nothing live is drawn there, and nothing scrolls to it.
+  if (!isConversationWindowAtTail()) return false;
+  const el = scroller();
+  const height = jump ? null : observedClientHeight;
+  return 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,
+  });
 }
 
 /**
@@ -257,7 +273,13 @@ export function ownSendFollows(send) {
  * shrinking back): each step asks again.
  */
 export function scrollAfterOwnSend(send) {
-  const step = () => { if (ownSendFollows(send)) scrollBottom(); };
+  const step = () => {
+    if (!ownSendFollows(send)) return;
+    // A place held while images load would take this scroll for the reader's
+    // and let go only then; the send moves the reader, so it lets go first.
+    releaseReadingAnchorHold();
+    scrollBottom();
+  };
   step();
   requestAnimationFrame(step);
   setTimeout(step, 120);
@@ -331,10 +353,18 @@ function prefersReducedMotion() {
   try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; }
 }
 
+/**
+ * Takes the reader to the end. From a window that ends above the
+ * conversation's end, the end is loaded first: the promise settles once it
+ * is on the page (or the load failed), which an own send from such a window
+ * waits for.
+ */
 export function jumpTranscriptToBottom() {
   const el = scroller();
-  if (!el) return;
-  // The end wins over a followed section of the live bubble.
+  if (!el) return Promise.resolve();
+  // The end wins over a place held while images load, as over a followed
+  // section of the live bubble.
+  releaseReadingAnchorHold();
   if (getThinkingFollowMode()) {
     disarmThinkingFollow();
     syncThinkingFollowButtons(document, null);
@@ -346,11 +376,10 @@ export function jumpTranscriptToBottom() {
   if (loadConversationEnd && !isConversationWindowAtTail()) {
     endJump();
     jump = { cleanup() {} };
-    void Promise.resolve()
+    return Promise.resolve()
       .then(() => loadConversationEnd())
       .catch(() => {})
       .finally(finishJump);
-    return;
   }
   const behavior = jumpScrollBehavior({
     distance: distanceFromBottom(el),
@@ -359,6 +388,7 @@ export function jumpTranscriptToBottom() {
   });
   if (behavior === 'smooth') startSmoothJump(el);
   else finishJump();
+  return Promise.resolve();
 }
 
 function handleScroll() {

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

@@ -75,21 +75,31 @@ export function nextJumpButtonState(previous, {
   rowKeys = [],
   unseen = false,
   question = false,
+  windowAtTail = true,
+  waiting = 0,
 } = {}) {
-  if (isNearBottom(distance, nearBottomPx)) {
-    return { visible: false, baseline: null, count: 0, unseen: false, question: false };
+  // Live rows held back for a window that ends above the conversation's end
+  // (transcript-island.mjs): the bottom of the page is not the end, so the
+  // button stays while they wait.
+  const waitingNow = windowAtTail ? 0 : Math.max(0, Math.trunc(Number(waiting) || 0));
+  if (isNearBottom(distance, nearBottomPx) && !waitingNow) {
+    return { visible: false, baseline: null, count: 0, unseen: false, question: false, waiting: 0 };
   }
-  const baseline = Array.isArray(previous?.baseline) ? previous.baseline : rowKeys.slice();
+  // Below such a window the rows put on the page are the newer pages, older
+  // than anything live: they are not counted, and the baseline is taken once
+  // the window meets the end.
+  const baseline = !windowAtTail ? null : (Array.isArray(previous?.baseline) ? previous.baseline : rowKeys.slice());
   const screens = Number(clientHeight) > 0 ? Number(distance) / Number(clientHeight) : 0;
-  const count = countNewRows(baseline, rowKeys);
+  const count = windowAtTail ? countNewRows(baseline, rowKeys) : 0;
   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,
+    visible: previous?.visible === true || screens >= JUMP_BUTTON_SHOW_SCREENS || count > 0 || waitingNow > 0 || unseenNow || questionNow,
     baseline,
     count,
     unseen: unseenNow,
     question: questionNow,
+    waiting: waitingNow,
   };
 }
 
@@ -97,14 +107,22 @@ 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 the rows held back for a window above the end show on the badge:
+ * 'count' adds them to the count, 'dot' draws the dot of news without a row.
+ */
+export const HELD_BACK_ROWS_BADGE = 'count';
+
 /**
  * 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.
+ * to count). `waiting` rows are held back below the page
+ * (HELD_BACK_ROWS_BADGE). `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 } = {}) {
+export function jumpButtonPresentation({ visible = false, count = 0, unseen = false, question = false, waiting = 0 } = {}, { heldBackRowsBadge = HELD_BACK_ROWS_BADGE } = {}) {
   if (!visible) return { state: 'plain', label: JUMP_BUTTON_LABEL, badge: '', dot: false, announcement: '' };
   if (question) {
     return {
@@ -115,17 +133,19 @@ export function jumpButtonPresentation({ visible = false, count = 0, unseen = fa
       announcement: 'A question is waiting for your answer below.',
     };
   }
-  const badge = jumpBadgeText(count);
+  const held = Math.max(0, Math.trunc(Number(waiting) || 0));
+  const counted = Math.max(0, Math.trunc(Number(count) || 0)) + (heldBackRowsBadge === 'count' ? held : 0);
+  const badge = jumpBadgeText(counted);
   if (badge) {
     return {
       state: 'new',
-      label: `${JUMP_BUTTON_LABEL} (${Math.trunc(Number(count))} new)`,
+      label: `${JUMP_BUTTON_LABEL} (${counted} new)`,
       badge,
       dot: false,
       announcement: 'New messages below.',
     };
   }
-  if (unseen) {
+  if (unseen || held > 0) {
     return {
       state: 'new',
       label: `${JUMP_BUTTON_LABEL} (new below)`,
@@ -167,6 +187,23 @@ export function shouldRepinOnResize({ pinned, pinnedScrollTop, scrollTop, nearBo
   return nearBottomNow === true;
 }
 
+/**
+ * Whether a live update follows the end. A reader at the end now is
+ * followed. So is one the re-pin above is on its way to: the transcript
+ * shrank from below (`clientHeight` under the height the last
+ * ResizeObserver round saw) and at that height the reader is at the end.
+ * An update that lands between the shrink and that round would otherwise
+ * find them the panel's height above the end, stay put, and leave them
+ * there. The geometry decides, not the last note of the position: a scroll
+ * to the end (the update before) is noted only by its scroll event a frame
+ * later, and the shrink and this update can both land before it.
+ */
+export function followsEndThroughResize({ nearBottomNow, clientHeight, observedClientHeight, distanceAtObservedHeight, nearBottomPxAtObservedHeight }) {
+  if (nearBottomNow === true) return true;
+  if (!(Number(clientHeight) < Number(observedClientHeight))) return false;
+  return isNearBottom(distanceAtObservedHeight, nearBottomPxAtObservedHeight);
+}
+
 // "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