@oar-sh/oar 0.9.11 → 0.9.12

package/server/public/app/transcript-reading-anchor.mjs

@@ -0,0 +1,256 @@
+// Where a reader is in a conversation, kept across a switch to another one
+// and across a page reload, and the window of loaded messages kept with it.
+// No DOM here: the caller measures the rows and applies what is decided.
+//
+// A pixel scrollTop does not survive either trip. The rows on the page after
+// a switch back are another set (the oldest dropped by the page-size cap,
+// new ones written meanwhile at the end, a window centred on the place read
+// after a reload), so the same pixel count lands on another message. The
+// position is therefore a message and how far its top sits from the pane's
+// top, or "at the end".
+//
+// Finer than the reading block of transcript-viewport-anchor.mjs, coarser
+// than it too: that one is for rows rebuilt under the reader with other
+// heights, and holds the text read. This one goes to localStorage, so it
+// holds an id and an offset only.
+
+import { sortConversationMessages } from './thread-order.mjs';
+
+function messageIdOf(message) {
+  return String(message?.id || '').trim();
+}
+
+/**
+ * The index of the first row whose bottom edge is below the pane's top (the
+ * row being read), or -1. `bottomAt(i)` is the row's bottom in the pane's
+ * coordinates; rows are in page order, so their bottoms only grow and a
+ * binary search reads a handful of them on a long transcript.
+ */
+export function findReadingRowIndex(rowCount, bottomAt, paneTop) {
+  const count = Math.max(0, Math.trunc(Number(rowCount) || 0));
+  let low = 0;
+  let high = count;
+  const edge = Number(paneTop) + 1;
+  while (low < high) {
+    const mid = (low + high) >> 1;
+    if (Number(bottomAt(mid)) > edge) high = mid;
+    else low = mid + 1;
+  }
+  return low < count ? low : -1;
+}
+
+/**
+ * The reader's position from the pane and its rows. `rowAt(i)` gives
+ * `{ messageId, top, bottom }`; `atTail` is true when the reader is at the
+ * end of a window that is the end of the conversation (they follow live
+ * rows). Null when no row is on the page.
+ */
+export function captureReadingAnchor({ rowCount, rowAt, paneTop, atTail = false }) {
+  const index = findReadingRowIndex(rowCount, (i) => rowAt(i)?.bottom, paneTop);
+  if (index < 0) return null;
+  const row = rowAt(index);
+  const messageId = String(row?.messageId || '').trim();
+  if (!messageId) return null;
+  return {
+    messageId,
+    offsetPx: Math.round(Number(row.top) - Number(paneTop)),
+    atTail: atTail === true,
+  };
+}
+
+/** How far to scroll so the anchored row's top is at its saved offset again. */
+export function readingAnchorScrollDelta({ rowTop, paneTop, offsetPx }) {
+  return Number(rowTop) - Number(paneTop) - Number(offsetPx || 0);
+}
+
+/**
+ * Where a row's top sits in the content, whatever the scroll: its distance
+ * from the pane's top plus how far the pane is scrolled. It changes only when
+ * something above the row changes height.
+ */
+export function readingAnchorContentTop({ rowTop, paneTop, scrollTop }) {
+  return Number(rowTop) - Number(paneTop) + Number(scrollTop);
+}
+
+/**
+ * One look at the anchored row while the images above it are still loading
+ * (they grow from nothing to their height after the restore, and a browser
+ * without scroll anchoring lets that push the row down). `seen` is the row's
+ * content position and the pane's scrollTop as of the last look.
+ *
+ * The total height is no guide: growth below the row (a reply streaming in
+ * at the end) changes it too, and a scroll in the same frame (a jump to the
+ * end, a key, a drag of the scrollbar) would be taken back. So only the
+ * row's own content position counts, and a scroll is told apart from it:
+ * - 'stay': nothing above the row changed, or the browser's own scroll
+ *   anchoring already scrolled by exactly what grew above it.
+ * - 'correct': something above the row grew by `delta` and nothing else
+ *   scrolled: scroll by `delta`.
+ * - 'release': scrollTop changed for any other reason. That is the reader
+ *   (or a jump, a send) and the place is theirs from now on, even when
+ *   something above grew in the same frame.
+ * `rowContentTop` is the position to remember for the next look.
+ */
+export function readingAnchorHoldStep({ rowTop, paneTop, scrollTop, seen, tolerancePx = 1 }) {
+  const rowContentTop = readingAnchorContentTop({ rowTop, paneTop, scrollTop });
+  const grewAbove = rowContentTop - Number(seen?.rowContentTop);
+  const scrolled = Number(scrollTop) - Number(seen?.scrollTop);
+  if (!Number.isFinite(grewAbove) || !Number.isFinite(scrolled)) return { action: 'release', delta: 0, rowContentTop };
+  const grew = Math.abs(grewAbove) > tolerancePx;
+  if (Math.abs(scrolled) > tolerancePx) {
+    if (grew && Math.abs(scrolled - grewAbove) <= tolerancePx) return { action: 'stay', delta: 0, rowContentTop };
+    return { action: 'release', delta: 0, rowContentTop };
+  }
+  if (grew) return { action: 'correct', delta: grewAbove, rowContentTop };
+  return { action: 'stay', delta: 0, rowContentTop };
+}
+
+/** An anchor read back from storage, or null when it is not one. */
+export function normalizeReadingAnchor(value) {
+  if (!value || typeof value !== 'object') return null;
+  const messageId = String(value.messageId || '').trim();
+  const atTail = value.atTail === true;
+  if (!messageId && !atTail) return null;
+  const offset = Number(value.offsetPx);
+  return {
+    messageId: messageId || null,
+    offsetPx: Number.isFinite(offset) ? Math.round(offset) : 0,
+    atTail,
+  };
+}
+
+/**
+ * The part of a loaded window kept for a switch back: at most `cap` messages
+ * (no cap when it is not a positive finite number). A reader at the end keeps
+ * the newest; anyone else keeps the messages around the one they read, half
+ * above and half below, so either direction can be read on without a fetch.
+ * Rows cut off on a side mean there is more on that side to load.
+ */
+export function trimMessageWindow(messages, {
+  cap = Infinity,
+  anchorMessageId = '',
+  atTail = false,
+  hasMoreOlder = false,
+  hasMoreNewer = false,
+} = {}) {
+  const list = Array.isArray(messages) ? messages : [];
+  const limit = Number(cap);
+  if (!(limit > 0) || !Number.isFinite(limit) || list.length <= limit) {
+    return { messages: list, hasMoreOlder: !!hasMoreOlder, hasMoreNewer: !!hasMoreNewer, trimmed: false };
+  }
+  const keep = Math.trunc(limit);
+  const ordered = sortConversationMessages(list);
+  const anchorId = String(anchorMessageId || '').trim();
+  const anchorIndex = !atTail && anchorId ? ordered.findIndex((message) => messageIdOf(message) === anchorId) : -1;
+  let start;
+  if (anchorIndex < 0) {
+    start = ordered.length - keep;
+  } else {
+    start = Math.max(0, anchorIndex - Math.floor(keep / 2));
+    start = Math.min(start, ordered.length - keep);
+  }
+  const end = start + keep;
+  return {
+    messages: ordered.slice(start, end),
+    hasMoreOlder: !!hasMoreOlder || start > 0,
+    hasMoreNewer: !!hasMoreNewer || end < ordered.length,
+    trimmed: true,
+  };
+}
+
+function timestampMsOf(message) {
+  const ms = Date.parse(message?.timestamp || 0);
+  return Number.isFinite(ms) ? ms : 0;
+}
+
+/**
+ * The relay's history order: timestamp in ms, then id by localeCompare (as
+ * conversation-history-page.mjs pages it). The page's range is measured in
+ * this order, not in the thread order the transcript is drawn in: the relay
+ * cuts its pages by it, so a row inside the page's range in this order is a
+ * row the relay would have put on the page.
+ */
+export function compareHistoryOrder(a, b) {
+  const aMs = timestampMsOf(a);
+  const bMs = timestampMsOf(b);
+  if (aMs !== bMs) return aMs - bMs;
+  return messageIdOf(a).localeCompare(messageIdOf(b));
+}
+
+/**
+ * The newest page of a conversation merged into a kept window that reaches
+ * the end. A message of the page replaces the one with its id (its text may
+ * have changed since: a reply that was still streaming), the others join in
+ * conversation order. Null when the page does not meet the window: more rows
+ * were written than the page holds, and the rows between are unknown.
+ * `changed` and `added` are the ids the page brought that differ from, or
+ * are missing in, the window (`sameMessage` decides what differs).
+ * The page is the truth for its own range, from its oldest row to its
+ * newest in the relay's order: a window row inside it that the page lacks
+ * was deleted while the reader was away and is dropped (`removed`). Rows
+ * older than the page are kept, the page says nothing about them; so are
+ * rows newer than it, which the socket may have brought after the page was
+ * read. With `windowPredatesPage` every window row was there before the page
+ * was asked for (the caller merged a window read before the request, or no
+ * live row arrived while it was on its way): the page, which ends at the
+ * conversation's end, then is the truth up to that end, and a newer window
+ * row it lacks was deleted too (the relay's own follow-up dropped by a
+ * Cancel, say: the newest row of the conversation).
+ */
+export function mergeTailPage(windowMessages, pageMessages, {
+  pageHasMoreOlder = false,
+  windowPredatesPage = false,
+  sameMessage = (a, b) => JSON.stringify(a) === JSON.stringify(b),
+} = {}) {
+  const kept = Array.isArray(windowMessages) ? windowMessages : [];
+  const page = Array.isArray(pageMessages) ? pageMessages : [];
+  const keptById = new Map();
+  for (const message of kept) {
+    const id = messageIdOf(message);
+    if (id) keptById.set(id, message);
+  }
+  const meets = !pageHasMoreOlder || page.some((message) => keptById.has(messageIdOf(message)));
+  if (!meets) return null;
+  const changed = [];
+  const added = [];
+  const pageById = new Map();
+  for (const message of page) {
+    const id = messageIdOf(message);
+    if (!id) continue;
+    pageById.set(id, message);
+    if (!keptById.has(id)) added.push(id);
+    else if (!sameMessage(keptById.get(id), message)) changed.push(id);
+  }
+  let oldest = null;
+  let newest = null;
+  for (const message of pageById.values()) {
+    if (!oldest || compareHistoryOrder(message, oldest) < 0) oldest = message;
+    if (!newest || compareHistoryOrder(message, newest) > 0) newest = message;
+  }
+  // An empty page that is the whole conversation (meets without a shared
+  // row) holds nothing: every window row is gone, when the window predates it.
+  const insidePage = (message) => {
+    if (!oldest) return windowPredatesPage && !pageHasMoreOlder;
+    if (compareHistoryOrder(message, oldest) < 0) return false;
+    return windowPredatesPage || compareHistoryOrder(message, newest) <= 0;
+  };
+  const removed = [];
+  const merged = [];
+  for (const message of kept) {
+    const id = messageIdOf(message);
+    if (pageById.has(id)) {
+      merged.push(pageById.get(id));
+    } else if (id && insidePage(message)) {
+      removed.push(id);
+    } else {
+      merged.push(message);
+    }
+  }
+  for (const id of added) merged.push(pageById.get(id));
+  return {
+    messages: added.length ? sortConversationMessages(merged) : merged,
+    changed,
+    added,
+    removed,
+  };
+}

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

@@ -12,7 +12,8 @@ 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.
+ * the next reload asks again (unless the page holds an older copy, see
+ * shouldKeepTranscriptOnReload).
  */
 export async function loadKeepingLiveRows(load, getLiveRowEpoch, { attempts = LIVE_ROW_RELOAD_ATTEMPTS } = {}) {
   let response = null;
@@ -23,3 +24,18 @@ export async function loadKeepingLiveRows(load, getLiveRowEpoch, { attempts = LI
   }
   return { response, stale: true };
 }
+
+/**
+ * Whether a reload leaves the transcript as it is. A jump into the history
+ * (`jumped`) always wins. A `stale` answer is kept off the page only when
+ * the page shows the live transcript (the live poll): it then holds every
+ * row the answer has and the socket's newer ones. After a kept copy was
+ * drawn on a switch (`showsLiveTranscript` false) the page holds an old
+ * copy instead, and the rows stored while the reader was away exist only
+ * in the answer: the answer is the closer one, and the next reload brings
+ * whatever socket row it still lacks.
+ */
+export function shouldKeepTranscriptOnReload({ stale = false, jumped = false, showsLiveTranscript = true } = {}) {
+  if (jumped) return true;
+  return !!stale && !!showsLiveTranscript;
+}

package/server/public/app/transcript-viewport-anchor.mjs

@@ -127,6 +127,24 @@ function isReadable(block, rect) {
   return typeof block.closest !== 'function' || !block.closest('details:not([open]) > :not(summary)');
 }
 
+// Where restoreReadingBlock last put a block, per scroller. scrollTop takes
+// whole pixels, so the block lands up to half a pixel off the offset it was
+// asked for. Rows are rebuilt twice in a row when a turn ends (the reply
+// takes the live bubble's place, then the reload after the turn), and each
+// capture would take the last landing as the truth: the halves added up to
+// more than a pixel.
+const lastRestored = new WeakMap();
+
+// The offset the block was put at, while the reader is still there: the
+// same block, scrollTop as it was left, and the block no further off than
+// the rounding.
+function intendedOffset(el, tag, text, measured) {
+  const restored = lastRestored.get(el);
+  if (!restored || restored.tag !== tag || restored.text !== text) return measured;
+  if (Number(el.scrollTop || 0) !== restored.scrollTop) return measured;
+  return Math.abs(measured - restored.offset) <= 0.5 ? restored.offset : measured;
+}
+
 /**
  * The block of text the reader is at: the first one that starts inside the
  * viewport, else the one that reaches into it from above (a code block
@@ -167,7 +185,7 @@ export function captureReadingBlock(el, { scope = null } = {}) {
   const tag = String(block.tagName || '').toLowerCase();
   const text = blockText(block);
   const height = Math.max(0, rect.bottom - rect.top);
-  const offset = rect.top - view.top;
+  const offset = intendedOffset(el, tag, text, rect.top - view.top);
   return {
     messageId: String(foundScope?.dataset?.messageId || '').trim() || null,
     // Read in the live bubble: the reply that replaces it is another row.
@@ -220,6 +238,7 @@ export function restoreReadingBlock(el, anchor, { scope = null } = {}) {
     : Number(anchor.offsetFraction) * Math.max(0, rect.bottom - rect.top);
   const delta = rect.top - view.top - target;
   if (Math.abs(delta) > 0.5) el.scrollTop = Number(el.scrollTop || 0) + delta;
+  lastRestored.set(el, { tag: anchor.tag, text: anchor.text, offset: target, scrollTop: Number(el.scrollTop || 0) });
   return true;
 }
 

package/server/public/index.html

@@ -280,6 +280,7 @@
     --warn:      #d29922;
     --conversation-title-offline: #f0f6fc;
     --conversation-title-ready: #3fb950;
+    --conversation-title-idle: #238636;
     --conversation-title-question: #f85149;
     --conversation-title-error: #d29922;
     /* Relay reachability tones, shared by the sidebar dot and the mobile
@@ -347,6 +348,8 @@
     --warn:      #9a6700;
     --conversation-title-offline: #1F2328;
     --conversation-title-ready: #1a7f37;
+    /* Muted, not darker: a darker green would stand out more on white. */
+    --conversation-title-idle: #4c8b5c;
     --conversation-title-question: #cf222e;
     --conversation-title-error: #9a6700;
     --provider-github: #0969da;
@@ -842,17 +845,17 @@
   .conv-provider-indicator[data-provider="claude-cloud"] { color: var(--provider-claude-cloud); }
   .conv-item.worker-ui-offline .conv-title,
   #chat-title[data-ui-state="offline"] { color: var(--conversation-title-offline); }
+  /* Ready and idle: the darker green. Ready and working (a turn or
+     background work): the bright one. :where() keeps the working rule as
+     specific as the others, so an archived row stays muted. */
   .conv-item.worker-ui-ready .conv-title,
-  #chat-title[data-ui-state="ready"] { color: var(--conversation-title-ready); }
+  #chat-title[data-ui-state="ready"] { color: var(--conversation-title-idle); }
+  .conv-item.worker-ui-ready:where(.conv-working) .conv-title,
+  #chat-title[data-ui-state="ready"][data-working] { color: var(--conversation-title-ready); }
   .conv-item.worker-ui-question .conv-title,
   #chat-title[data-ui-state="question"] { color: var(--conversation-title-question); }
   .conv-item.worker-ui-error .conv-title,
   #chat-title[data-ui-state="error"] { color: var(--conversation-title-error); }
-  .conv-processing-dots {
-    display: inline-block;
-    min-width: 1.8ch;
-    letter-spacing: 0.02em;
-  }
   .conv-delete {
     position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
     background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-ui-icon);
@@ -3379,6 +3382,166 @@
     .subagent-viewer-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
     #subagent-viewer-body { padding: 8px 10px 28px; }
   }
+  /* The task console: a shell or Monitor task's output (task-console.mjs).
+     Same shell as the sub-agent viewer; the 16 terminal colours follow the
+     theme so red and green stay readable on Day and Night. */
+  :root {
+    --tc-ansi-0: #484f58;
+    --tc-ansi-1: #ff7b72;
+    --tc-ansi-2: #3fb950;
+    --tc-ansi-3: #d29922;
+    --tc-ansi-4: #58a6ff;
+    --tc-ansi-5: #bc8cff;
+    --tc-ansi-6: #39c5cf;
+    --tc-ansi-7: #b1bac4;
+    --tc-ansi-8: #6e7681;
+    --tc-ansi-9: #ffa198;
+    --tc-ansi-10: #56d364;
+    --tc-ansi-11: #e3b341;
+    --tc-ansi-12: #79c0ff;
+    --tc-ansi-13: #d2a8ff;
+    --tc-ansi-14: #56d4dd;
+    --tc-ansi-15: #f0f6fc;
+  }
+  :root[data-theme="light"] {
+    --tc-ansi-0: #24292f;
+    --tc-ansi-1: #cf222e;
+    --tc-ansi-2: #116329;
+    --tc-ansi-3: #4d2d00;
+    --tc-ansi-4: #0969da;
+    --tc-ansi-5: #8250df;
+    --tc-ansi-6: #1b7c83;
+    --tc-ansi-7: #6e7781;
+    --tc-ansi-8: #57606a;
+    --tc-ansi-9: #a40e26;
+    --tc-ansi-10: #1a7f37;
+    --tc-ansi-11: #633c01;
+    --tc-ansi-12: #218bff;
+    --tc-ansi-13: #a475f9;
+    --tc-ansi-14: #3192aa;
+    --tc-ansi-15: #8c959f;
+  }
+  #task-console-modal {
+    position: fixed; inset: 0; z-index: 10900; display: none;
+    align-items: center; justify-content: center;
+    background: rgba(0, 0, 0, 0.68); padding: 18px;
+  }
+  #task-console-modal.visible { display: flex; }
+  #task-console-title { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
+  .task-console-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-meta-sm); }
+  #task-console-meta { overflow-wrap: anywhere; }
+  .tc-stall { color: var(--muted); }
+  .tc-stall-warn { color: var(--warn); font-weight: 600; }
+  #task-console-chip { cursor: pointer; font: inherit; }
+  #task-console-failure {
+    background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
+    font-size: var(--fs-meta-sm); text-decoration: underline; text-underline-offset: 3px;
+  }
+  #task-console-stop:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
+  #task-console-scroll {
+    flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 14px 28px;
+    background: var(--bg);
+  }
+  #task-console-earlier {
+    display: block; margin: 0 auto 8px; border: 1px solid var(--border); background: var(--bg2);
+    color: var(--text); border-radius: 999px; padding: 3px 14px; font-size: var(--fs-meta-sm); cursor: pointer;
+  }
+  #task-console-earlier:disabled { opacity: 0.6; cursor: default; }
+  #task-console-earlier[hidden] { display: none; }
+  #task-console-body {
+    margin: 0; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: var(--fs-meta-sm); line-height: 1.45; color: var(--text);
+    white-space: pre-wrap; overflow-wrap: anywhere;
+  }
+  .tc-line { min-height: 1.45em; }
+  .tc-line-partial { opacity: 0.85; }
+  .tc-line-target { background: rgba(248, 81, 73, 0.16); border-radius: 3px; }
+  .tc-line-count {
+    display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 999px;
+    border: 1px solid var(--border); color: var(--muted); font-size: 0.85em; user-select: none;
+  }
+  .tc-bold { font-weight: 700; }
+  .tc-dim { opacity: 0.65; }
+  .tc-italic { font-style: italic; }
+  .tc-underline { text-decoration: underline; }
+  .tc-fg-0 { color: var(--tc-ansi-0); }
+  .tc-fg-1 { color: var(--tc-ansi-1); }
+  .tc-fg-2 { color: var(--tc-ansi-2); }
+  .tc-fg-3 { color: var(--tc-ansi-3); }
+  .tc-fg-4 { color: var(--tc-ansi-4); }
+  .tc-fg-5 { color: var(--tc-ansi-5); }
+  .tc-fg-6 { color: var(--tc-ansi-6); }
+  .tc-fg-7 { color: var(--tc-ansi-7); }
+  .tc-fg-8 { color: var(--tc-ansi-8); }
+  .tc-fg-9 { color: var(--tc-ansi-9); }
+  .tc-fg-10 { color: var(--tc-ansi-10); }
+  .tc-fg-11 { color: var(--tc-ansi-11); }
+  .tc-fg-12 { color: var(--tc-ansi-12); }
+  .tc-fg-13 { color: var(--tc-ansi-13); }
+  .tc-fg-14 { color: var(--tc-ansi-14); }
+  .tc-fg-15 { color: var(--tc-ansi-15); }
+  .tc-bg-0 { background: var(--tc-ansi-0); }
+  .tc-bg-1 { background: var(--tc-ansi-1); }
+  .tc-bg-2 { background: var(--tc-ansi-2); }
+  .tc-bg-3 { background: var(--tc-ansi-3); }
+  .tc-bg-4 { background: var(--tc-ansi-4); }
+  .tc-bg-5 { background: var(--tc-ansi-5); }
+  .tc-bg-6 { background: var(--tc-ansi-6); }
+  .tc-bg-7 { background: var(--tc-ansi-7); }
+  .tc-bg-8 { background: var(--tc-ansi-8); }
+  .tc-bg-9 { background: var(--tc-ansi-9); }
+  .tc-bg-10 { background: var(--tc-ansi-10); }
+  .tc-bg-11 { background: var(--tc-ansi-11); }
+  .tc-bg-12 { background: var(--tc-ansi-12); }
+  .tc-bg-13 { background: var(--tc-ansi-13); }
+  .tc-bg-14 { background: var(--tc-ansi-14); }
+  .tc-bg-15 { background: var(--tc-ansi-15); }
+  #task-console-status { color: var(--muted); padding: 10px 0; font-size: var(--fs-meta-sm); }
+  #task-console-status[hidden] { display: none; }
+  #task-console-jump {
+    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
+    border: 1px solid var(--accent); background: var(--bg3); color: var(--accent);
+    border-radius: 999px; padding: 5px 14px; font-size: var(--fs-meta-sm); cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+  }
+  #task-console-jump[hidden] { display: none; }
+  /* Rows in the composer panel: the console opener, the health hints, the
+     ended rows. */
+  .bg-task-desc.task-console-open {
+    display: block; -webkit-line-clamp: unset; background: none; border: 0; padding: 0; margin: 0;
+    font: inherit; color: var(--text); text-align: left; cursor: pointer;
+    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
+  }
+  .bg-task-desc.task-console-open:hover, .bg-task-desc.task-console-open:focus-visible {
+    color: var(--accent); text-decoration-color: currentColor; outline: none;
+  }
+  .bg-task-desc-no-output { cursor: help; }
+  .bg-task-steps { color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .bg-task-stall { color: var(--muted); flex-shrink: 0; white-space: nowrap; }
+  .bg-task-stall[hidden] { display: none; }
+  .bg-task-stall-warn { color: var(--warn); font-weight: 600; }
+  .bg-task-chip {
+    flex-shrink: 0; border: 1px solid var(--success); color: var(--success); background: transparent;
+    border-radius: 999px; padding: 0 7px; font-size: var(--fs-meta-sm); white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  .bg-task-chip[hidden] { display: none; }
+  .bg-task-chip-fail { border-color: var(--danger); color: var(--danger); }
+  .bg-task-row-ended { opacity: 0.62; }
+  .bg-task-row-ended:hover, .bg-task-row-ended:focus-within { opacity: 0.9; }
+  .bg-task-outcome { flex-shrink: 0; font-weight: 700; }
+  .bg-task-outcome-ok { color: var(--success); }
+  .bg-task-outcome-fail { color: var(--danger); }
+  .bg-task-dismiss {
+    flex-shrink: 0; background: transparent; border: 1px solid var(--border); color: var(--muted);
+    border-radius: 8px; width: 26px; height: 24px; line-height: 1; cursor: pointer; font-size: 1rem;
+  }
+  .bg-task-dismiss:hover { color: var(--text); border-color: var(--text); }
+  @media (max-width: 680px) {
+    #task-console-modal { padding: 0; }
+    #task-console-modal .subagent-viewer-dialog { width: 100%; height: 100%; border: 0; border-radius: 0; }
+    #task-console-scroll { padding: 8px 10px 28px; }
+  }
   /* Preview cards: same row grammar as a background task, with a link-shaped
      primary action. Shared by the composer panel and the settings list. */
   .preview-row {
@@ -7005,6 +7168,22 @@
           >
         </div>
         <div class="settings-help" style="margin-top: 6px;">A conversation only scrolls by itself while you are at its end. Anywhere else it stays where you are reading, and the round button above the composer shows that something new or a question is waiting below. Your own message is the exception: sending one takes you to the end. Switch this off to stay put then too. Saved in this browser.</div>
+        <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="conversation-window-retention-slider">Messages kept per conversation for switching back <span id="conversation-window-retention-value">200 messages</span></label>
+          <input
+            id="conversation-window-retention-slider"
+            type="range"
+            min="100"
+            max="1100"
+            step="100"
+            value="200"
+            aria-label="Messages kept per conversation for switching back"
+            aria-valuetext="200 messages"
+            oninput="previewConversationWindowRetention(this.value)"
+            onchange="updateConversationWindowRetention(this.value)"
+          >
+        </div>
+        <div class="settings-help" style="margin-top: 6px;">A conversation you switch away from and back to opens where you were reading, with the older messages you had loaded. This many are kept around that place for each of the last eight conversations; No limit keeps them all, at the cost of memory. Saved in this browser.</div>
         <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
           <label for="turn-ceiling-slider">Max turn duration <span id="turn-ceiling-value">No limit</span></label>
           <input
@@ -7035,6 +7214,21 @@
           >
         </div>
         <div class="settings-help" style="margin-top: 6px;">How long background tasks may keep a session alive after its turn ends: backgrounded commands, subagents and monitors on Claude; background agents and detached shells on Copilot's SDK engine. When the limit is reached the tasks are stopped. Set to 0 for no limit — tasks then run until they finish or you stop them from the composer panel.</div>
+        <div class="settings-row settings-row-column" style="margin-top: 12px; margin-bottom: 0;">
+          <label for="task-stall-minutes-slider">Mark a background task as quiet after <span id="task-stall-minutes-value">10 min</span></label>
+          <input
+            id="task-stall-minutes-slider"
+            type="range"
+            min="1"
+            max="120"
+            step="1"
+            value="10"
+            aria-label="Minutes without output before a background task is marked as quiet"
+            oninput="previewTaskStallMinutesSetting(this.value)"
+            onchange="updateTaskStallMinutesSetting(this.value)"
+          >
+        </div>
+        <div class="settings-help" style="margin-top: 6px;">A shell or Monitor task that has written no output for this long gets an amber "no output for N min" note in the composer panel and its console.</div>
         <div class="settings-row" style="margin-top: 12px; margin-bottom: 0;">
           <label for="subagent-record-retention-select">Keep sub-agent tool output</label>
           <select id="subagent-record-retention-select" onchange="updateSubagentRecordRetentionSetting(this.value)" aria-label="Keep sub-agent tool output">
@@ -7372,6 +7566,18 @@
               <option value="off">Off — no attribution</option>
             </select>
             <div id="claude-attribution-example" class="settings-help"></div>
+            <label for="claude-background-command-limit-slider" style="margin-top: 8px;">Claude background command limit <span id="claude-background-command-limit-value">2 h</span></label>
+            <input
+              id="claude-background-command-limit-slider"
+              type="range"
+              min="30"
+              max="480"
+              step="30"
+              value="120"
+              aria-label="Claude background command limit in minutes"
+              oninput="window.previewClaudeBackgroundCommandLimit?.(this.value)"
+            >
+            <div class="settings-help">How long a command Claude runs in the background may take before Claude Code stops it, unless Claude gives it its own timeout (up to 8 h). Commands in the foreground move to the background after 2 min. Applies to Claude sessions started after you save; a running session keeps its limit until it restarts.</div>
             <div id="claude-settings-status" class="settings-help settings-provider-status">Loading Claude settings…</div>
             <div style="display: flex; gap: 8px; margin-top: 8px;">
               <button id="claude-save-btn" type="button" class="summary-btn" onclick="saveClaudeSettings()">Save Claude settings</button>
@@ -8029,6 +8235,33 @@
   </div>
 </div>
 
+<!-- Task console: a shell or Monitor task's output, live while it runs
+     (task-console.mjs). -->
+<div id="task-console-modal" aria-hidden="true">
+  <div class="subagent-viewer-dialog task-console-dialog" role="dialog" aria-modal="true" aria-labelledby="task-console-title">
+    <div class="subagent-viewer-header">
+      <div class="subagent-viewer-title-row">
+        <span aria-hidden="true">⌨️</span>
+        <h2 id="task-console-title">Task</h2>
+        <button id="task-console-stop" class="subagent-viewer-btn" type="button" hidden>Stop</button>
+        <button class="subagent-viewer-btn task-console-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div class="task-console-meta-row">
+        <span id="task-console-meta"></span>
+        <span id="task-console-stall" class="tc-stall" hidden></span>
+        <button id="task-console-chip" class="bg-task-chip" type="button" hidden></button>
+        <button id="task-console-failure" type="button" hidden>first failure</button>
+      </div>
+    </div>
+    <div id="task-console-scroll">
+      <button id="task-console-earlier" type="button" hidden>Load earlier</button>
+      <pre id="task-console-body"></pre>
+      <div id="task-console-status" hidden></div>
+    </div>
+    <button id="task-console-jump" type="button" hidden>Jump to end ↓</button>
+  </div>
+</div>
+
 <!-- Fullscreen file viewer. The content fills the screen; the chrome bars
      float over it and a tap on the content shows or hides them. -->
 <div id="file-preview-modal" aria-hidden="true">

package/server/relay-tools.md

@@ -42,5 +42,6 @@ This relay itself is listed with "self": true when its owner switched agent sess
 - A new session knows nothing of this conversation: write a self-contained prompt. A Claude Cloud session works on a fresh clone in a sandbox at Anthropic, so name the branch it should work on and push.
 - Follow each session with `wait` (the message id comes back from `create_session` and `send`) and `read_session`; "wait_seconds" is limited to the maximum set on the relay (default 600).
 - Sessions run on the relay owner's accounts and cost their usage: start only what the task needs.
+- `read_task_output` ("session", "task_id" from `read_session`'s tasks, optional "lines") reads the end of a background shell or Monitor task's output, also for an hour after it ended: the last lines, minutes since its last output, and pass/fail counts for a test run. Credentials are scrubbed out.
 
 Write actions may first wait for the user's approval. If a result lists `pendingQuestions`, the other agent is waiting for an answer: ask the user (unless they told you to decide), then pass it on with `answer_question`. Always tell the user which relay and session you worked on.

package/server/repositories/message-repository.mjs

@@ -2,6 +2,7 @@
 
 import { createShareVisibilityStatements } from './share-visibility-statements.mjs';
 import { createMessagePinStatements } from './message-pin-statements.mjs';
+import { createConversationHistoryPageStatements } from '../services/conversation-history-page.mjs';
 import { sessionWorkerProviderSqlList } from '../../shared/provider-routing.mjs';
 
 export function createMessageRepository(db) {
@@ -27,6 +28,8 @@ export function createMessageRepository(db) {
         // messages
         getMessages:    db.prepare(`SELECT * FROM messages WHERE conversation_id = ? ORDER BY timestamp ASC`),
         getSharedMessages: shareVisibility.getSharedMessages,
+        // One history page in SQL (conversation-history-page.mjs).
+        conversationHistoryPage: createConversationHistoryPageStatements(db),
         getMessageByConversation: db.prepare(`SELECT * FROM messages WHERE id = ? AND conversation_id = ? LIMIT 1`),
         setMessageShareVisibility: shareVisibility.setMessageShareVisibility,
         listHiddenMessages: shareVisibility.listHiddenMessages,
@@ -116,6 +119,11 @@ export function createMessageRepository(db) {
           ORDER BY captured_at DESC
           LIMIT 1
         `),
+        getMessageUsageSnapshotByResponse: db.prepare(`
+          SELECT *
+          FROM message_usage_snapshots
+          WHERE response_message_id = ? AND conversation_id = ?
+        `),
         listMessageUsageSnapshotsByConversation: db.prepare(`
           SELECT *
           FROM message_usage_snapshots