@oar-sh/oar 0.9.2 → 0.9.4

package/server/public/app/thinking-follow.js

@@ -0,0 +1,260 @@
+// Follow modes for the live thinking bubble: 💭 thoughts, 📃 streamed answer,
+// 🛠️ tool list. While a mode is armed the message pane keeps the tracked
+// section's bottom edge pinned just above the composer as it grows, so the
+// user can read a long reasoning stream without the answer/tool rows below
+// pushing it away. Manual scrolling (wheel, touch, scroll keys, scrollbar)
+// disarms the mode; typing in the composer does not. The mode is remembered
+// per conversation for the life of the page.
+
+import { isChatInteractionHeld } from './selection-guard.mjs';
+
+export const THINKING_FOLLOW_MODES = Object.freeze(['thoughts', 'stream', 'tools']);
+export const THINKING_FOLLOW_BOTTOM_GAP_PX = 16;
+
+const FOLLOW_BUTTONS = Object.freeze([
+  { mode: 'thoughts', icon: '💭', title: 'Follow the thoughts' },
+  { mode: 'stream', icon: '📃', title: 'Follow the streamed answer' },
+  { mode: 'tools', icon: '🛠️', title: 'Follow the tool list' },
+]);
+
+const TARGET_SELECTORS = Object.freeze({
+  thoughts: '#thinking-thoughts > .thinking-thoughts-list',
+  stream: '#thinking-stream',
+  tools: '#thinking-activity',
+});
+
+// Keys a user presses to scroll the pane. Editable targets are excluded by the
+// guard, so these only count when the pane itself (or nothing) has focus.
+const SCROLL_KEYS = new Set(['PageUp', 'PageDown', 'Home', 'End', 'ArrowUp', 'ArrowDown', ' ', 'Spacebar']);
+// A scroll event this close after our own scrollTop write is ours.
+const PROGRAMMATIC_SCROLL_WINDOW_MS = 150;
+const SCROLL_DRIFT_TOLERANCE_PX = 2;
+
+const followModeByConversation = new Map();
+let currentConversationIdResolver = () => '';
+let onModeChanged = () => {};
+let programmaticScrollTop = null;
+let programmaticScrollAt = 0;
+let applyScheduled = false;
+let resizeObserver = null;
+let mutationObserver = null;
+let observedBubble = null;
+let guardsInstalledOn = null;
+
+function normalizeMode(mode) {
+  const value = String(mode || '').trim();
+  return THINKING_FOLLOW_MODES.includes(value) ? value : null;
+}
+
+function conversationKey(conversationId) {
+  const explicit = String(conversationId || '').trim();
+  if (explicit) return explicit;
+  try { return String(currentConversationIdResolver() || '').trim(); } catch { return ''; }
+}
+
+export function getThinkingFollowMode(conversationId = null) {
+  const key = conversationKey(conversationId);
+  return key ? followModeByConversation.get(key) || null : null;
+}
+
+export function setThinkingFollowMode(conversationId, mode) {
+  const key = conversationKey(conversationId);
+  if (!key) return null;
+  const next = normalizeMode(mode);
+  const previous = followModeByConversation.get(key) || null;
+  if (next) followModeByConversation.set(key, next);
+  else followModeByConversation.delete(key);
+  if (next !== previous) {
+    try { onModeChanged({ conversationId: key, mode: next, previous }); } catch {}
+  }
+  return next;
+}
+
+/** Pressing the armed button disarms; pressing another switches. */
+export function toggleThinkingFollowMode(conversationId, mode) {
+  const current = getThinkingFollowMode(conversationId);
+  const next = normalizeMode(mode);
+  return setThinkingFollowMode(conversationId, current === next ? null : next);
+}
+
+export function disarmThinkingFollow(conversationId = null) {
+  return setThinkingFollowMode(conversationId, null);
+}
+
+/** Markup for the three buttons; `mode` marks the armed one. */
+export function renderThinkingFollowButtonsHtml(mode = null) {
+  const active = normalizeMode(mode);
+  const buttons = FOLLOW_BUTTONS.map(({ mode: value, icon, title }) => {
+    const pressed = active === value;
+    return `<button type="button" class="thinking-follow-btn${pressed ? ' active' : ''}" data-action="follow-thinking" data-follow="${value}" aria-pressed="${pressed ? 'true' : 'false'}" title="${title}" aria-label="${title}">${icon}</button>`;
+  }).join('');
+  return `<div class="thinking-follow-group" role="group" aria-label="Follow the live reply">${buttons}</div>`;
+}
+
+/** Update aria-pressed/active on an existing group without rebuilding it. */
+export function syncThinkingFollowButtons(root = document, mode = getThinkingFollowMode()) {
+  const active = normalizeMode(mode);
+  const buttons = root?.querySelectorAll?.('.thinking-follow-btn[data-follow]') || [];
+  for (const btn of buttons) {
+    const pressed = btn.dataset.follow === active;
+    btn.classList.toggle('active', pressed);
+    btn.setAttribute('aria-pressed', pressed ? 'true' : 'false');
+  }
+}
+
+function resolveTarget(mode) {
+  const selector = TARGET_SELECTORS[normalizeMode(mode)];
+  if (!selector) return null;
+  const el = document.querySelector(selector);
+  if (!el) return null;
+  if (el.hidden || el.closest?.('[hidden]')) return null;
+  // A collapsed <details> or an empty list has nothing to follow yet.
+  const details = el.closest?.('details');
+  if (details && !details.open) return null;
+  if (!el.childElementCount && !String(el.textContent || '').trim()) return null;
+  return el;
+}
+
+/**
+ * scrollTop that puts `target`'s bottom edge `gapPx` above the scroller's
+ * bottom edge. Pure for tests: takes rects/metrics rather than elements.
+ */
+export function computeFollowScrollTop({
+  scrollTop,
+  clientHeight,
+  scrollHeight,
+  scrollerTop,
+  targetBottom,
+  gapPx = THINKING_FOLLOW_BOTTOM_GAP_PX,
+}) {
+  const desiredBottomInScroller = clientHeight - gapPx;
+  const targetBottomInScroller = targetBottom - scrollerTop;
+  const next = scrollTop + (targetBottomInScroller - desiredBottomInScroller);
+  const max = Math.max(0, scrollHeight - clientHeight);
+  return Math.max(0, Math.min(max, Math.round(next)));
+}
+
+export function applyThinkingFollow({ force = false } = {}) {
+  const mode = getThinkingFollowMode();
+  if (!mode) return false;
+  const scroller = document.getElementById('messages');
+  const target = resolveTarget(mode);
+  if (!scroller || !target) return false;
+  if (!force && isChatInteractionHeld()) return false;
+  const scrollerRect = scroller.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  const next = computeFollowScrollTop({
+    scrollTop: scroller.scrollTop,
+    clientHeight: scroller.clientHeight,
+    scrollHeight: scroller.scrollHeight,
+    scrollerTop: scrollerRect.top,
+    targetBottom: targetRect.bottom,
+  });
+  if (Math.abs(next - scroller.scrollTop) <= SCROLL_DRIFT_TOLERANCE_PX) {
+    programmaticScrollTop = scroller.scrollTop;
+    programmaticScrollAt = Date.now();
+    return true;
+  }
+  programmaticScrollTop = next;
+  programmaticScrollAt = Date.now();
+  scroller.scrollTop = next;
+  return true;
+}
+
+export function scheduleThinkingFollow() {
+  if (!getThinkingFollowMode()) return;
+  if (applyScheduled) return;
+  applyScheduled = true;
+  const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => setTimeout(fn, 16);
+  raf(() => {
+    applyScheduled = false;
+    applyThinkingFollow();
+  });
+}
+
+/** Watch the live bubble so any growth re-pins the tracked section. */
+export function observeThinkingBubble(bubbleEl) {
+  if (!bubbleEl || bubbleEl === observedBubble) return;
+  unobserveThinkingBubble();
+  observedBubble = bubbleEl;
+  // Guards go on lazily with the first live bubble, after the pane's own
+  // scroll listeners (history paging) are in place.
+  installThinkingFollowScrollGuards();
+  if (typeof MutationObserver === 'function') {
+    mutationObserver = new MutationObserver(() => scheduleThinkingFollow());
+    mutationObserver.observe(bubbleEl, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['open', 'hidden', 'class'] });
+  }
+  if (typeof ResizeObserver === 'function') {
+    resizeObserver = new ResizeObserver(() => scheduleThinkingFollow());
+    resizeObserver.observe(bubbleEl);
+    const scroller = document.getElementById('messages');
+    if (scroller) resizeObserver.observe(scroller);
+  }
+}
+
+export function unobserveThinkingBubble() {
+  try { mutationObserver?.disconnect(); } catch {}
+  try { resizeObserver?.disconnect(); } catch {}
+  mutationObserver = null;
+  resizeObserver = null;
+  observedBubble = null;
+}
+
+function isEditableTarget(target) {
+  const el = target instanceof Element ? target : null;
+  if (!el) return false;
+  if (el.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) return true;
+  return false;
+}
+
+function disarmFromUserScroll() {
+  if (!getThinkingFollowMode()) return;
+  disarmThinkingFollow();
+  syncThinkingFollowButtons(document, null);
+}
+
+/**
+ * Manual scrolling in the pane disarms the mode. Installed once per scroller;
+ * the composer is outside the pane so typing never trips it.
+ */
+export function installThinkingFollowScrollGuards(scroller = document.getElementById('messages')) {
+  if (!scroller || guardsInstalledOn === scroller) return;
+  guardsInstalledOn = scroller;
+  scroller.addEventListener('wheel', () => disarmFromUserScroll(), { passive: true });
+  scroller.addEventListener('touchmove', () => disarmFromUserScroll(), { passive: true });
+  // A pointer press on the scrollbar gutter (outside the content box).
+  scroller.addEventListener('pointerdown', (event) => {
+    if (event.pointerType && event.pointerType !== 'mouse') return;
+    if (event.offsetX > scroller.clientWidth) disarmFromUserScroll();
+  });
+  scroller.addEventListener('scroll', () => {
+    if (!getThinkingFollowMode()) return;
+    const recent = Date.now() - programmaticScrollAt <= PROGRAMMATIC_SCROLL_WINDOW_MS;
+    if (recent && programmaticScrollTop !== null && Math.abs(scroller.scrollTop - programmaticScrollTop) <= SCROLL_DRIFT_TOLERANCE_PX) return;
+    if (recent) return;
+    // Layout shifts move scrollTop too; only a move away from the pinned
+    // position counts as the user taking over.
+    if (programmaticScrollTop !== null && Math.abs(scroller.scrollTop - programmaticScrollTop) <= SCROLL_DRIFT_TOLERANCE_PX) return;
+    disarmFromUserScroll();
+  }, { passive: true });
+  document.addEventListener('keydown', (event) => {
+    if (!getThinkingFollowMode()) return;
+    if (!SCROLL_KEYS.has(event.key)) return;
+    if (isEditableTarget(event.target)) return;
+    disarmFromUserScroll();
+  });
+}
+
+export function initThinkingFollow({ getCurrentConversationId, onChange } = {}) {
+  if (typeof getCurrentConversationId === 'function') currentConversationIdResolver = getCurrentConversationId;
+  if (typeof onChange === 'function') onModeChanged = onChange;
+}
+
+export function __resetThinkingFollowForTests() {
+  followModeByConversation.clear();
+  programmaticScrollTop = null;
+  programmaticScrollAt = 0;
+  applyScheduled = false;
+  unobserveThinkingBubble();
+  guardsInstalledOn = null;
+}

package/server/public/app/tool-activity-emoji.mjs

@@ -0,0 +1,40 @@
+// Leading emoji for a tool-activity line ("Tool (PowerShell): …" → "🪓 Tool
+// (PowerShell): …"), shared by the transcript's activity rows and the
+// composer's background-tasks panel so a tool reads the same everywhere.
+// Text that already starts with an emoji is returned unchanged.
+export function prefixToolActivityEmoji(text) {
+  const value = String(text || '').trim();
+  if (!value) return '';
+  if (/^[\u{1F300}-\u{1FAFF}☀-➿]/u.test(value)) return value;
+  if (value.startsWith('● ')) return `🔄 ${value.slice(2).trim()}`;
+  if (/^Model selected:/i.test(value)) return `🧠 ${value}`;
+  if (/^Search \((glob|grep)\)/i.test(value)) return `🔍 ${value}`;
+  if (/^Tool \(ask_user\)/i.test(value)) return `❓ ${value}`;
+  if (/^Tool \(view\)/i.test(value)) return `👀 ${value}`;
+  if (/^Tool \(apply_patch\)/i.test(value)) return `🪡 ${value}`;
+  if (/^Tool \(powershell\)/i.test(value)) return `🪓 ${value}`;
+  if (/^Tool \(edit\)/i.test(value)) return `📝 ${value}`;
+  if (/^Tool \(read_file\)/i.test(value)) return `📄 ${value}`;
+  if (/^Tool \((grep_search|file_search)\)/i.test(value)) return `🔎 ${value}`;
+  if (/^Tool \(semantic_search\)/i.test(value)) return `🧭 ${value}`;
+  if (/^Tool \(vscode_listCodeUsages\)/i.test(value)) return `🔗 ${value}`;
+  if (/^Tool \(vscode_renameSymbol\)/i.test(value)) return `✏️ ${value}`;
+  if (/^Tool \(list_dir\)/i.test(value)) return `📂 ${value}`;
+  if (/^Tool \(create_directory\)/i.test(value)) return `📁 ${value}`;
+  if (/^Tool \((delete|remove)\)/i.test(value)) return `🗑️ ${value}`;
+  if (/^Tool \(execution_subagent\)/i.test(value)) return `🚀 ${value}`;
+  if (/^Tool \(get_errors\)/i.test(value)) return `🚨 ${value}`;
+  if (/^Tool \(debug_[^)]+\)/i.test(value)) return `🐞 ${value}`;
+  if (/^Tool \(fetch_webpage\)/i.test(value)) return `🌐 ${value}`;
+  if (/^Tool \(github_[^)]+\)/i.test(value)) return `🐙 ${value}`;
+  if (/^Tool \(run_in_terminal\)/i.test(value)) return `🖥️ ${value}`;
+  if (/^Tool \((create_file|write)\)/i.test(value)) return `🆕 ${value}`;
+  if (/^Tool \((bash|shell|terminal)\)/i.test(value)) return `🔧 ${value}`;
+  if (/^Tool \((sql|sqlite)\)/i.test(value)) return `🗄️ ${value}`;
+  // Work on another OAR relay. Claude's raw name is mcp__relay__remote_relay and
+  // the Copilot CLI names MCP tools <server>-<tool> (oar-remote_relay); the
+  // activity normalisers strip both, but a line that kept one matches too.
+  if (/^Tool \((?:mcp__[a-z0-9_-]+__|[a-z0-9_]+-)?remote_relay\)/i.test(value)) return `🛰️ ${value}`;
+  if (/^Tool \(/i.test(value)) return `🛠️ ${value}`;
+  return `ℹ️ ${value}`;
+}

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

@@ -0,0 +1,210 @@
+// Keeps the transcript's reading position through layout changes that
+// reflow the rows: phone rotation, the on-screen keyboard, a desktop window
+// resize, a font-scale change. The browser only preserves scrollTop as a
+// pixel count (and its own scroll anchoring pins the top-most row), so a
+// reader sitting at the end of a portrait transcript lands screens above
+// the end once the wider landscape rows shrink the content. A position is
+// therefore described by content, not pixels: "at the bottom", or "this
+// message is the top-most visible one, with this fraction of it scrolled
+// past" — a fraction, because the rows themselves change height when the
+// width changes, and a pixel offset would hide a whole shrunken row.
+
+const BOTTOM_EPSILON_PX = 1;
+
+/** Same rule the composer's follow-live logic uses: 8% of the viewport,
+ *  clamped to 12–48 px. */
+export function resolveNearBottomThresholdPx(clientHeight) {
+  const viewportHeight = Number(clientHeight || 0);
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) return 0;
+  return Math.min(48, Math.max(12, Math.floor(viewportHeight * 0.08)));
+}
+
+function distanceFromBottom(el) {
+  return Math.max(0, Number(el.scrollHeight || 0) - Number(el.clientHeight || 0) - Number(el.scrollTop || 0));
+}
+
+function transcriptRows(el) {
+  return Array.from(el.querySelectorAll('.msg[data-message-id]'));
+}
+
+/**
+ * Describes where the reader is. `atBottom` uses the near-bottom threshold
+ * rather than an exact pixel match: a reader a few pixels short of the end
+ * still means "the end", and a rotation must not strand them above it.
+ * Returns null for an empty transcript.
+ */
+export function captureTranscriptAnchor(el, { nearBottomThresholdPx = null } = {}) {
+  if (!el) return null;
+  const rows = transcriptRows(el);
+  if (!rows.length) return null;
+  const threshold = nearBottomThresholdPx !== null && Number.isFinite(Number(nearBottomThresholdPx))
+    ? Math.max(0, Number(nearBottomThresholdPx))
+    : Math.max(BOTTOM_EPSILON_PX, resolveNearBottomThresholdPx(el.clientHeight));
+  const atBottom = distanceFromBottom(el) <= threshold;
+  const containerRect = el.getBoundingClientRect();
+  let anchorRow = null;
+  let offsetTop = 0;
+  let rowHeight = 0;
+  for (const row of rows) {
+    const rect = row.getBoundingClientRect();
+    if (rect.bottom <= containerRect.top + 1) continue;
+    if (rect.top >= containerRect.bottom) break;
+    anchorRow = row;
+    offsetTop = rect.top - containerRect.top;
+    rowHeight = Math.max(0, rect.bottom - rect.top);
+    break;
+  }
+  const maxScroll = Math.max(1, Number(el.scrollHeight || 0) - Number(el.clientHeight || 0));
+  return {
+    atBottom,
+    messageId: String(anchorRow?.dataset?.messageId || '').trim() || null,
+    // Negative while the row's top is scrolled past the edge; scaled to the
+    // row's height so the same share of it stays hidden after a reflow.
+    offsetFraction: rowHeight > 0 ? offsetTop / rowHeight : 0,
+    ratio: Math.min(1, Math.max(0, Number(el.scrollTop || 0) / maxScroll)),
+  };
+}
+
+/**
+ * Moves the scroller so the captured position holds in the current layout.
+ * Bottom wins over the row anchor; a row that is no longer rendered falls
+ * back to the proportional position. Returns true when scrollTop changed.
+ */
+export function restoreTranscriptAnchor(el, anchor) {
+  if (!el || !anchor) return false;
+  const before = Number(el.scrollTop || 0);
+  if (anchor.atBottom) {
+    el.scrollTop = Number(el.scrollHeight || 0);
+    return Number(el.scrollTop || 0) !== before;
+  }
+  const messageId = String(anchor.messageId || '').trim();
+  const row = messageId
+    ? transcriptRows(el).find((node) => String(node.dataset?.messageId || '').trim() === messageId)
+    : null;
+  if (row) {
+    const containerRect = el.getBoundingClientRect();
+    const rect = row.getBoundingClientRect();
+    const targetOffset = Number(anchor.offsetFraction || 0) * Math.max(0, rect.bottom - rect.top);
+    const delta = rect.top - containerRect.top - targetOffset;
+    if (Math.abs(delta) > 0.5) el.scrollTop = before + delta;
+    return Number(el.scrollTop || 0) !== before;
+  }
+  const maxScroll = Math.max(0, Number(el.scrollHeight || 0) - Number(el.clientHeight || 0));
+  el.scrollTop = Math.round(maxScroll * Number(anchor.ratio || 0));
+  return Number(el.scrollTop || 0) !== before;
+}
+
+const KEYBOARD_INPUT_TYPES = new Set(['', 'text', 'search', 'email', 'url', 'tel', 'number', 'password']);
+
+/**
+ * The focused field inside the transcript that has the on-screen keyboard
+ * open (a question card's reply box or form input), or null.
+ */
+export function focusedTranscriptTextField(el, active = globalThis.document?.activeElement) {
+  if (!el || !active || active === el) return null;
+  if (typeof el.contains !== 'function' || !el.contains(active)) return null;
+  const tag = String(active.tagName || '').toUpperCase();
+  if (tag === 'TEXTAREA') return active;
+  if (tag === 'INPUT') {
+    return KEYBOARD_INPUT_TYPES.has(String(active.type ?? '').toLowerCase()) ? active : null;
+  }
+  return active.isContentEditable === true ? active : null;
+}
+
+/**
+ * Scrolls the transcript just enough to show the field whole, top-aligned
+ * when it is taller than the viewport. Arithmetic on scrollTop rather than
+ * scrollIntoView, which would scroll the page root too. Returns true when
+ * scrollTop changed.
+ */
+export function revealFieldInTranscript(el, field, { marginPx = 8 } = {}) {
+  if (!el || typeof field?.getBoundingClientRect !== 'function') return false;
+  const before = Number(el.scrollTop || 0);
+  const container = el.getBoundingClientRect();
+  const rect = field.getBoundingClientRect();
+  const viewTop = container.top + marginPx;
+  const viewBottom = container.bottom - marginPx;
+  let delta = 0;
+  if (rect.top < viewTop || rect.bottom - rect.top > viewBottom - viewTop) {
+    delta = rect.top - viewTop;
+  } else if (rect.bottom > viewBottom) {
+    delta = rect.bottom - viewBottom;
+  }
+  if (Math.abs(delta) <= 0.5) return false;
+  el.scrollTop = before + delta;
+  return Number(el.scrollTop || 0) !== before;
+}
+
+/**
+ * Tracks the position across resize storms. Scroll events commit the
+ * reader's position; a resize re-applies the last committed position and
+ * opens a settle window during which scroll events are ignored — they are
+ * the browser's own anchoring and our re-pins, not the reader. Rotation on
+ * a phone resizes in several steps (browser chrome animates), so the window
+ * extends with every step and the position is re-applied once more when it
+ * closes.
+ *
+ * The browser's reveal of a focused field when the keyboard shrinks the
+ * viewport is one of those ignored scrolls, so every re-apply reveals the
+ * focused transcript field again itself.
+ */
+export function createTranscriptResizeKeeper({
+  getElement,
+  settleMs = 500,
+  setTimer = (fn, ms) => setTimeout(fn, ms),
+  clearTimer = (id) => clearTimeout(id),
+  capture = captureTranscriptAnchor,
+  restore = restoreTranscriptAnchor,
+  getFocusedField = focusedTranscriptTextField,
+  reveal = revealFieldInTranscript,
+} = {}) {
+  let committed = null;
+  let settleTimer = null;
+
+  function element() {
+    try { return typeof getElement === 'function' ? getElement() : null; } catch { return null; }
+  }
+
+  function recordScroll() {
+    if (settleTimer !== null) return false;
+    const el = element();
+    if (!el) return false;
+    const next = capture(el);
+    if (next) committed = next;
+    return Boolean(next);
+  }
+
+  function apply(el) {
+    const restored = committed ? restore(el, committed) : false;
+    let field = null;
+    try { field = getFocusedField(el); } catch { field = null; }
+    const revealed = field ? reveal(el, field) : false;
+    return restored || revealed;
+  }
+
+  function endSettle() {
+    settleTimer = null;
+    const el = element();
+    if (el) apply(el);
+  }
+
+  function handleResize() {
+    const el = element();
+    if (!el) return false;
+    if (!committed) {
+      // Nothing committed yet (no scroll since load): the current position
+      // is the best description we have.
+      committed = capture(el);
+    }
+    if (settleTimer !== null) clearTimer(settleTimer);
+    settleTimer = setTimer(endSettle, settleMs);
+    return apply(el);
+  }
+
+  return {
+    recordScroll,
+    handleResize,
+    isSettling: () => settleTimer !== null,
+    committedAnchor: () => committed,
+  };
+}