@oar-sh/oar 0.9.8 → 0.9.10

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

@@ -0,0 +1,290 @@
+// 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.
+//
+// Following the end has no state of its own: every live update asks
+// isMessagesAtBottom() 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 {
+  isNearBottom,
+  jumpBadgeText,
+  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;
+const BUTTON_LABEL = 'Jump to the latest message';
+
+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;
+
+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,
+      exchangePromptId: node.dataset.agentExchangePromptId,
+      live: node.id === 'thinking-indicator',
+    });
+    if (key) keys.push(key);
+  }
+  return keys;
+}
+
+function render(visible, count) {
+  const button = document.getElementById('jump-to-bottom-btn');
+  if (!button) return;
+  button.classList.toggle('visible', visible);
+  const badge = button.querySelector('.jump-to-bottom-badge');
+  const text = visible ? jumpBadgeText(count) : '';
+  if (badge) {
+    badge.textContent = text;
+    badge.hidden = !text;
+  }
+  const label = text ? `${BUTTON_LABEL} (${count} new)` : BUTTON_LABEL;
+  if (button.getAttribute('aria-label') !== label) button.setAttribute('aria-label', label);
+}
+
+function update() {
+  updateScheduled = false;
+  const el = scroller();
+  if (!el) return;
+  const conversationId = String(currentConvId || '').trim();
+  if (conversationId !== stateConversationId) {
+    state = null;
+    stateConversationId = conversationId;
+  }
+  if (!conversationId || jump) {
+    render(false, 0);
+    return;
+  }
+  const distance = distanceFromBottom(el);
+  const nearBottomPx = resolveNearBottomThresholdPx(el.clientHeight);
+  state = nextJumpButtonState(state, {
+    distance,
+    clientHeight: el.clientHeight,
+    nearBottomPx,
+    rowKeys: isNearBottom(distance, nearBottomPx) ? [] : rowKeys(el),
+  });
+  render(state.visible, state.count);
+}
+
+function scheduleUpdate() {
+  if (updateScheduled) return;
+  updateScheduled = true;
+  requestAnimationFrame(update);
+}
+
+// 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;
+}
+
+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(false, 0);
+  // 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;
+  if (jump) {
+    if (distanceFromBottom(el) <= 1) finishJump();
+    return;
+  }
+  notePosition(el);
+  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;
+  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 });
+  if (typeof MutationObserver === 'function') {
+    new MutationObserver(scheduleUpdate).observe(el, { childList: true });
+  }
+  if (typeof ResizeObserver === 'function') {
+    new ResizeObserver(handleResize).observe(el);
+  }
+  scheduleUpdate();
+}

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

@@ -0,0 +1,99 @@
+// The transcript's jump-to-bottom button, without the DOM: when it shows,
+// 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.
+
+/** 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. Every row of a folded agent exchange
+ * (its prompt, its replies, its live bubble) carries the prompt's id, so the
+ * fold counts once however many of its rows are on the page. The live
+ * bubble of a turn outside a fold has the prompt's id as its message id, so
+ * it gets a key of its own.
+ */
+export function transcriptRowKey({ messageId = '', exchangePromptId = '', live = false } = {}) {
+  const fold = String(exchangePromptId || '').trim();
+  if (fold) return `fold:${fold}`;
+  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 button shows from
+ * one screen above the end and, once shown, stays until the bottom.
+ */
+export function nextJumpButtonState(previous, { distance, clientHeight, nearBottomPx, rowKeys = [] } = {}) {
+  if (isNearBottom(distance, nearBottomPx)) return { visible: false, baseline: null, count: 0 };
+  const baseline = Array.isArray(previous?.baseline) ? previous.baseline : rowKeys.slice();
+  const screens = Number(clientHeight) > 0 ? Number(distance) / Number(clientHeight) : 0;
+  return {
+    visible: previous?.visible === true || screens >= JUMP_BUTTON_SHOW_SCREENS,
+    baseline,
+    count: countNewRows(baseline, rowKeys),
+  };
+}
+
+/** '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 a reader who was
+ * following is still described by the last scroll: `pinned` and the
+ * scrollTop it was taken at. Once scrollTop has moved since (a restore, a
+ * clamp, the browser's anchoring), the geometry as it is now decides.
+ */
+export function shouldRepinOnResize({ pinned, pinnedScrollTop, scrollTop, nearBottomNow }) {
+  if (pinned && Number(scrollTop) === Number(pinnedScrollTop)) return true;
+  return nearBottomNow === true;
+}

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 };
+}

package/server/public/app/update-ui.js

@@ -100,7 +100,7 @@ export function renderUpdateSection() {
       status.textContent = install.state === 'running'
         ? `Updating to ${install.targetVersion}…`
         : install.state === 'success'
-          ? 'npm finished — the relay restarts when the queue is idle.'
+          ? 'npm finished — the relay restarts once the running turns finish.'
           : `Update failed: ${install.error || 'unknown error'}`;
     }
     const logPre = byId('update-install-log-pre');

package/server/public/app/viewer-chat-gallery.mjs

@@ -0,0 +1,59 @@
+// The media of a conversation as a gallery: every image, video and audio
+// attachment and every picture embedded in a bubble, in the order they
+// stand in the conversation, open at the one that was tapped.
+//
+// It is read from the rendered messages rather than from message records:
+// an embedded picture only becomes an address the viewer can open once the
+// bubble is rendered (local paths are rewritten then), and the rendered
+// order is the conversation's order.
+
+export const CHAT_MEDIA_SELECTOR = '.msg-attachment[data-media-url], .msg-bubble img';
+
+function baseName(filePath) {
+  return String(filePath || '').split(/[\\/]/).filter(Boolean).pop() || 'image';
+}
+
+/** The viewer item behind a media node, or null for a node that is none. */
+export function chatMediaItemFromNode(node, { parseAppFileHref } = {}) {
+  if (!node) return null;
+  const attachment = node.closest?.('.msg-attachment[data-media-url]');
+  if (attachment) {
+    return {
+      source: 'upload',
+      href: String(attachment.dataset.mediaUrl || ''),
+      name: String(attachment.dataset.mediaName || 'attachment'),
+      mime: String(attachment.dataset.mediaType || ''),
+    };
+  }
+  if (String(node.tagName || '').toUpperCase() !== 'IMG') return null;
+  const src = String(node.getAttribute('src') || '').trim();
+  if (!src) return null;
+  const target = parseAppFileHref?.(src) || null;
+  if (target?.kind === 'drive') return { source: 'drives', path: target.path, name: baseName(target.path) };
+  if (target?.kind === 'workspace') return { source: 'workspace', path: target.path, name: baseName(target.path) };
+  // A data: thumbnail or a picture from the web: shown as it is.
+  const dataMime = /^data:(image\/[a-z0-9.+-]+)/i.exec(src)?.[1] || '';
+  return { source: 'upload', href: src, name: String(node.getAttribute('alt') || 'image'), mime: dataMime || 'image/*' };
+}
+
+/**
+ * The gallery of `root`'s media open at `clickedNode`, or null when there
+ * is nothing else to move to (the viewer then shows the one file).
+ * Embedded pictures can be left out (the shared view cannot fetch them).
+ */
+export function chatMediaGallery(root, clickedNode, { includeEmbedded = true, parseAppFileHref } = {}) {
+  if (!root || !clickedNode) return null;
+  const clicked = clickedNode.closest?.('.msg-attachment[data-media-url]') || clickedNode;
+  const items = [];
+  let index = -1;
+  for (const node of root.querySelectorAll(CHAT_MEDIA_SELECTOR)) {
+    const isAttachment = node.matches('.msg-attachment');
+    if (!isAttachment && (node.closest('.msg-attachment') || !includeEmbedded)) continue;
+    const item = chatMediaItemFromNode(node, { parseAppFileHref });
+    if (!item) continue;
+    if (node === clicked) index = items.length;
+    items.push(item);
+  }
+  if (index === -1 || items.length < 2) return null;
+  return { source: 'chat', items, index };
+}

package/server/public/app/viewer-controls-state.mjs

@@ -0,0 +1,59 @@
+// When the fullscreen viewer's hovering controls are shown.
+//
+// A single tap on the content toggles them. While a video or audio file
+// plays they also fade out on their own after a moment, as players do; any
+// interaction brings them back and starts that clock again. Pausing shows
+// them and stops the clock, so a paused player is never left bare. Images
+// and text have no clock: their controls stay until the next tap.
+
+export const CONTROLS_AUTO_HIDE_MS = 3000;
+
+export function createControlsState({
+  autoHideMs = CONTROLS_AUTO_HIDE_MS,
+  onChange = () => {},
+  setTimeoutImpl = setTimeout,
+  clearTimeoutImpl = clearTimeout,
+} = {}) {
+  const state = { visible: true, playing: false, timer: null };
+
+  const stopClock = () => {
+    if (state.timer === null) return;
+    clearTimeoutImpl(state.timer);
+    state.timer = null;
+  };
+
+  const set = (visible) => {
+    if (state.visible === visible) return;
+    state.visible = visible;
+    onChange(visible);
+  };
+
+  // The clock runs only while the controls are up and media plays.
+  const armClock = () => {
+    stopClock();
+    if (!state.playing || !state.visible) return;
+    state.timer = setTimeoutImpl(() => {
+      state.timer = null;
+      set(false);
+    }, autoHideMs);
+  };
+
+  return {
+    get visible() { return state.visible; },
+    get playing() { return state.playing; },
+    show() { set(true); armClock(); },
+    hide() { stopClock(); set(false); },
+    toggle() { if (state.visible) this.hide(); else this.show(); },
+    /** The user touched a control or moved the mouse: keep the controls a while longer. */
+    interaction() { if (state.visible) armClock(); else this.show(); },
+    setPlaying(playing) {
+      const next = playing === true;
+      if (state.playing === next) return;
+      state.playing = next;
+      if (next) armClock();
+      else { stopClock(); set(true); }
+    },
+    reset() { stopClock(); state.playing = false; set(true); },
+    dispose() { stopClock(); },
+  };
+}

package/server/public/app/viewer-gallery.mjs

@@ -0,0 +1,46 @@
+// The files a viewer can move between without being closed: the files of
+// the folder a file was opened from, in the order the browser shows them.
+// An index into that list is the open file; neighbours are the files on
+// either side, and the list never wraps.
+
+/**
+ * A gallery over a folder listing (`children` as the repo browser holds
+ * them; directories are skipped). `null` when the opened file is not in the
+ * list or has no neighbours — a viewer without a gallery shows one file.
+ */
+export function galleryFromFolder(children, openedPath, { source = 'workspace' } = {}) {
+  const items = (Array.isArray(children) ? children : [])
+    .filter((child) => child && child.type !== 'dir' && String(child.path || ''))
+    .map((child) => ({ path: String(child.path), name: String(child.name || '') }));
+  const index = items.findIndex((item) => item.path === String(openedPath || ''));
+  if (index === -1 || items.length < 2) return null;
+  return { source: String(source || 'workspace'), items, index };
+}
+
+/** The index `delta` steps away, or -1 past either end. */
+export function galleryNeighborIndex(gallery, delta) {
+  if (!gallery || !Array.isArray(gallery.items)) return -1;
+  const next = Number(gallery.index) + Number(delta);
+  return Number.isInteger(next) && next >= 0 && next < gallery.items.length ? next : -1;
+}
+
+/** The same gallery, open at another index. */
+export function galleryAt(gallery, index) {
+  if (!gallery || index < 0 || index >= gallery.items.length) return null;
+  return { ...gallery, index };
+}
+
+export function galleryPositionLabel(gallery) {
+  if (!gallery || !Array.isArray(gallery.items) || !gallery.items.length) return '';
+  return `${gallery.index + 1} / ${gallery.items.length}`;
+}
+
+/** The items on either side of the open one, nearest first. */
+export function galleryNeighbors(gallery) {
+  const out = [];
+  for (const delta of [1, -1]) {
+    const index = galleryNeighborIndex(gallery, delta);
+    if (index !== -1) out.push(gallery.items[index]);
+  }
+  return out;
+}