@oar-sh/oar 0.9.6 → 0.9.8

package/server/public/app/math-dollars.mjs

@@ -0,0 +1,89 @@
+// Which `$` in a run of text delimit inline maths, and which are plain dollar
+// signs. Prices are the common case of the second kind: without a rule,
+// "$5 for one and $9 for two" reads as one formula running from the first
+// sign to the second.
+//
+// The rule is the one pandoc uses for dollar maths: the opening `$` has a
+// non-space character directly after it, the closing `$` is the next dollar
+// sign, has a non-space character directly before it and no digit directly
+// after it. A `$$` pair is
+// display maths and is left alone, and a `$` behind a backslash is escaped.
+
+const TEX_LOOKING = /[\\^_{}=]/;
+
+function isEscaped(text, index) {
+  let backslashes = 0;
+  for (let i = index - 1; i >= 0 && text[i] === '\\'; i -= 1) backslashes += 1;
+  return backslashes % 2 === 1;
+}
+
+function isSpace(char) {
+  return char === undefined || /\s/.test(char);
+}
+
+// A formula holds no dollar sign of its own, so only the next one can close
+// it. When that one does not qualify ("$5, and $x^2$": it follows a space),
+// the opening sign is a plain dollar and the next one gets its own turn.
+function findClosingDollar(text, openIndex) {
+  let i = openIndex + 1;
+  while (i < text.length && (text[i] !== '$' || isEscaped(text, i))) i += 1;
+  if (i >= text.length) return -1;
+  // Part of a `$$`: not the end of an inline formula.
+  if (text[i + 1] === '$') return -1;
+  if (isSpace(text[i - 1])) return -1;
+  const content = text.slice(openIndex + 1, i);
+  // "$5/$10": a digit right behind the sign means the sign starts a number.
+  // Real maths directly followed by a digit ("$x^2$3") is told apart by
+  // looking like TeX.
+  if (/\d/.test(text[i + 1] || '') && !TEX_LOOKING.test(content)) return -1;
+  return i;
+}
+
+/**
+ * Scan `text` for single-dollar maths.
+ * @returns {{ spans: Array<[number, number]>, literals: number[] }} `spans`
+ *   are [open, close] index pairs of formulas, `literals` the indexes of `$`
+ *   that are plain dollar signs.
+ */
+export function scanInlineDollars(text) {
+  const source = String(text ?? '');
+  const spans = [];
+  const literals = [];
+  let index = 0;
+  while (index < source.length) {
+    if (source[index] !== '$' || isEscaped(source, index)) {
+      index += 1;
+      continue;
+    }
+    if (source[index + 1] === '$') {
+      const close = source.indexOf('$$', index + 2);
+      index = close < 0 ? index + 2 : close + 2;
+      continue;
+    }
+    const close = isSpace(source[index + 1]) ? -1 : findClosingDollar(source, index);
+    if (close < 0) {
+      literals.push(index);
+      index += 1;
+      continue;
+    }
+    spans.push([index, close]);
+    index = close + 1;
+  }
+  return { spans, literals };
+}
+
+/** `text` cut at its plain dollar signs: `[{ text, literal }]`, in order. */
+export function splitAtLiteralDollars(text) {
+  const source = String(text ?? '');
+  const { literals } = scanInlineDollars(source);
+  if (!literals.length) return [{ text: source, literal: false }];
+  const parts = [];
+  let from = 0;
+  for (const index of literals) {
+    if (index > from) parts.push({ text: source.slice(from, index), literal: false });
+    parts.push({ text: '$', literal: true });
+    from = index + 1;
+  }
+  if (from < source.length) parts.push({ text: source.slice(from), literal: false });
+  return parts;
+}

package/server/public/app/model-selector-options.mjs

@@ -12,7 +12,7 @@ export function composerPlaceholderFor({ modelId = '', providerType = '' } = {})
   const provider = String(providerType || '').trim().toLowerCase();
   const id = String(modelId || '').trim().toLowerCase().replace(/\[[^\]]*\]$/, '');
   const providerFallback = () => {
-    if (provider === 'claude') return 'Message Claude…';
+    if (provider === 'claude' || provider === 'claude-cloud') return 'Message Claude…';
     if (provider === 'grok') return 'Message Grok…';
     if (provider === 'openai' || provider === 'openai-byok') return 'Message OpenAI…';
     if (provider === 'cursor') return 'Message Cursor…';

package/server/public/app/plan-usage-view.mjs

@@ -32,6 +32,7 @@ const SOURCE_LABELS = Object.freeze(Object.assign(Object.create(null), {
 const TAB_LABELS = Object.freeze(Object.assign(Object.create(null), {
   github: 'Copilot',
   claude: 'Claude',
+  'claude-cloud': 'Claude Cloud',
   cursor: 'Cursor',
   grok: 'Grok',
 }));
@@ -96,26 +97,32 @@ export function formatAmount(value, unit) {
   return String(Math.round(n * 100) / 100);
 }
 
-export function formatResetCountdown(resetAt, now = new Date()) {
+/**
+ * @param {object} [options]
+ * @param {boolean} [options.expiry] the date is when the allowance ends for
+ *   good (a credit), so it reads "expires …" instead of "resets …"
+ */
+export function formatResetCountdown(resetAt, now = new Date(), { expiry = false } = {}) {
   if (!resetAt) return null;
   const target = new Date(resetAt);
   if (Number.isNaN(target.getTime())) return null;
   const reference = now instanceof Date && !Number.isNaN(now.getTime()) ? now : new Date();
+  const verb = expiry ? 'expires' : 'resets';
   const diffMs = target.getTime() - reference.getTime();
-  if (diffMs <= 0) return 'resets now';
+  if (diffMs <= 0) return expiry ? 'expired' : 'resets now';
   const minutes = Math.floor(diffMs / 60000);
-  if (minutes < 60) return `resets in ${Math.max(1, minutes)} min`;
+  if (minutes < 60) return `${verb} in ${Math.max(1, minutes)} min`;
   const hours = Math.floor(minutes / 60);
   if (hours < 24) {
     const remainderMinutes = minutes % 60;
-    return remainderMinutes ? `resets in ${hours} h ${remainderMinutes} min` : `resets in ${hours} h`;
+    return remainderMinutes ? `${verb} in ${hours} h ${remainderMinutes} min` : `${verb} in ${hours} h`;
   }
   const days = Math.floor(hours / 24);
   if (days <= 14) {
     const remainderHours = hours % 24;
-    return remainderHours ? `resets in ${days} d ${remainderHours} h` : `resets in ${days} d`;
+    return remainderHours ? `${verb} in ${days} d ${remainderHours} h` : `${verb} in ${days} d`;
   }
-  return `resets ${target.toISOString().slice(0, 10)}`;
+  return `${verb} ${target.toISOString().slice(0, 10)}`;
 }
 
 /**
@@ -153,12 +160,17 @@ function renderMeter(meter, now) {
   const width = meter.unlimited ? 100 : Math.max(0, Math.min(100, utilization ?? 0));
   const color = meter.unlimited ? '#3fb950' : utilizationColor(utilization);
   const summary = meterSummaryText(meter);
-  const countdown = formatResetCountdown(meter.resetAt, now);
+  const countdown = formatResetCountdown(meter.resetAt, now, { expiry: meter.resetKind === 'expiry' });
   const percentLabel = meter.unlimited
     ? '∞'
     : (utilization === null ? '—' : `${Math.round(utilization)}%`);
+  // The provider's own severity word; "normal" is the absence of a warning.
+  const severity = String(meter.severity ?? '').trim().toLowerCase();
   const flags = [
     meter.estimated ? '<span class="plan-usage-flag">estimated</span>' : '',
+    severity && severity !== 'normal'
+      ? `<span class="plan-usage-flag plan-usage-flag-severity" data-severity="${escapeHtml(severity)}">${escapeHtml(severity.replace(/[_-]+/g, ' '))}</span>`
+      : '',
   ].filter(Boolean).join('');
   const meta = [summary, countdown].filter(Boolean).join(' · ');
 
@@ -193,6 +205,19 @@ function renderDetailSection(section) {
   `;
 }
 
+/** A line of text on the card itself, with an optional link behind it. */
+function renderNote(note) {
+  const text = String(note?.text ?? '').trim();
+  if (!text) return '';
+  const url = String(note?.link?.url ?? '').trim();
+  const label = String(note?.link?.label ?? '').trim();
+  // Same rule as the server's: only an absolute https link becomes an href.
+  const link = label && /^https:\/\//i.test(url)
+    ? ` <a class="plan-usage-link" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    : '';
+  return `<div class="plan-usage-detail-note plan-usage-note" data-note-id="${escapeHtml(note?.id ?? '')}">${escapeHtml(text)}${link}</div>`;
+}
+
 /**
  * The signed-in account under the card title. Three distinct states, because
  * "we could not ask" must not be drawn as "you are logged out": no `account`
@@ -218,6 +243,7 @@ function renderAccountLine(account) {
 function renderCard(card, now, { active = true } = {}) {
   const meters = Array.isArray(card.meters) ? card.meters : [];
   const details = Array.isArray(card.details) ? card.details : [];
+  const notes = Array.isArray(card.notes) ? card.notes.filter(Boolean) : [];
   const links = Array.isArray(card.links) ? card.links : [];
 
   const statusBadge = STATUS_BADGES[card.status];
@@ -255,6 +281,7 @@ function renderCard(card, now, { active = true } = {}) {
       </header>
       ${card.message ? `<div class="plan-usage-message">${escapeHtml(card.message)}</div>` : ''}
       ${metersHtml}
+      ${notes.map(renderNote).join('')}
       ${details.map(renderDetailSection).join('')}
       <div class="plan-usage-card-foot">
         ${capturedLabel ? `<span class="plan-usage-captured">${capturedLabel}</span>` : ''}
@@ -296,8 +323,9 @@ export function planUsageSubtitle(report) {
   if (!providers.length) return 'No usage data available';
   const available = providers.filter((card) => Array.isArray(card.meters) && card.meters.length);
   if (!available.length) return 'No plan limits reported yet';
+  // A credit's expiry is not a reset: nothing refills on that date.
   const soonest = available
-    .flatMap((card) => card.meters.map((meter) => meter.resetAt))
+    .flatMap((card) => card.meters.map((meter) => (meter?.resetKind === 'expiry' ? null : meter?.resetAt)))
     .filter(Boolean)
     .sort()[0];
   const countdown = formatResetCountdown(soonest);

package/server/public/app/pwa-install.js

@@ -52,6 +52,11 @@ function shouldUseImmersiveTopLayout() {
 function syncThemeColor(immersive) {
   const meta = document.querySelector('meta[name="theme-color"]');
   if (!meta) return;
+  // Day mode keeps the white the head script (and a Theme change) set.
+  if (document.documentElement.getAttribute('data-theme') === 'light') {
+    meta.setAttribute('content', '#ffffff');
+    return;
+  }
   meta.setAttribute('content', immersive ? THEME_COLOR_IMMERSIVE : THEME_COLOR_BASE);
 }
 

package/server/public/app/relay-error-ctas.mjs

@@ -39,10 +39,24 @@ const RELAY_ERROR_CTAS = Object.freeze({
 });
 
 const STABLE_CODE_PATTERN = /error code:\s*relay\.([a-z0-9-]+)/i;
+// The shape of a failure note, mirrored from shared/failure-note-text.mjs
+// (the browser cannot import it; failure-note-text.test.mjs keeps the two in
+// step): one paragraph of at most this length leading up to the code, not a
+// quotation, a code span, a table cell, a list item or a heading. A reply
+// that talks about a code gets no button.
+const FAILURE_NOTE_LEAD_MAX = 600;
+const QUOTED_LEAD = /["“”'`|>]\s*$/;
+const MARKUP_LEAD = /^\s*(?:#+|[>|*-]|\d+\.)\s/;
 
+/** The code of a text that is a failure note of the relay, else ''. */
 export function relayErrorCodeFromText(text) {
-  const match = String(text || '').match(STABLE_CODE_PATTERN);
-  return match ? match[1].toLowerCase() : '';
+  const raw = String(text || '').trim();
+  const match = raw.match(STABLE_CODE_PATTERN);
+  if (!match) return '';
+  const lead = raw.slice(0, match.index);
+  if (lead.length > FAILURE_NOTE_LEAD_MAX || /[\r\n]/.test(lead)) return '';
+  if (QUOTED_LEAD.test(lead) || MARKUP_LEAD.test(lead)) return '';
+  return match[1].toLowerCase();
 }
 
 /**

package/server/public/app/remote-relay-origin-view.mjs

@@ -3,6 +3,12 @@
 // to the source session) and the "↗ win-test" marker on the sidebar row of a
 // conversation such an agent created. Both read the `origin` the relay stores
 // with the message or conversation (docs/plans/2026-09-27-remote-relays.md §4).
+//
+// An agent on THIS relay can start sessions too. Such an origin carries
+// `local: true` and names the conversation the agent runs in: the marker then
+// reads "via agent · “title”" and opens that conversation inside the app
+// (window.openOriginConversation, journal-view.js) instead of linking to
+// another relay. An origin without `local` renders exactly as before.
 
 import { remoteConversationUrl } from './remote-relay-shared.mjs';
 
@@ -19,6 +25,76 @@ function oneLine(value) {
   return String(value ?? '').replace(/\s+/g, ' ').trim();
 }
 
+// How much of the other conversation's title a marker carries; CSS ellipsis
+// takes over where the row is narrower than that.
+export const ORIGIN_TITLE_MAX_SIDEBAR = 28;
+export const ORIGIN_TITLE_MAX = 60;
+
+/** "a long conversation tit…": at most `max` characters, one line. */
+export function truncateOriginTitle(value, max = ORIGIN_TITLE_MAX) {
+  const text = oneLine(value);
+  const limit = Math.max(2, Math.floor(Number(max)) || ORIGIN_TITLE_MAX);
+  // By code point, so an emoji is never cut in half.
+  const chars = Array.from(text);
+  if (chars.length <= limit) return text;
+  return `${chars.slice(0, limit - 1).join('').trimEnd()}…`;
+}
+
+/** True for the origin of work an agent on this relay started. */
+export function isLocalAgentOrigin(raw) {
+  return !!raw && typeof raw === 'object' && !Array.isArray(raw) && raw.local === true;
+}
+
+function knownConversation(conversations, id) {
+  if (!id || !conversations || typeof conversations !== 'object') return null;
+  const found = Object.prototype.hasOwnProperty.call(conversations, id) ? conversations[id] : null;
+  return found && typeof found === 'object' ? found : null;
+}
+
+/**
+ * What a local origin shows, or null when the origin is not a local one.
+ * `conversations` is the browser's list by id: the marker is a link only while
+ * the orchestrating conversation is in it, and shows that conversation's
+ * current title (the origin stores the one it had at creation). `ownId` is the
+ * conversation the marker sits on, which never links to itself.
+ */
+export function localAgentOriginModel(origin, {
+  conversations = null,
+  ownId = '',
+  linkable = true,
+  maxTitleLength = ORIGIN_TITLE_MAX,
+} = {}) {
+  if (!isLocalAgentOrigin(origin)) return null;
+  const conversationId = oneLine(origin.conversationId);
+  const known = conversationId !== oneLine(ownId) ? knownConversation(conversations, conversationId) : null;
+  const fullTitle = oneLine(known?.title) || oneLine(origin.conversationTitle);
+  const title = truncateOriginTitle(fullTitle, maxTitleLength);
+  return {
+    conversationId,
+    fullTitle,
+    title,
+    model: oneLine(origin.model),
+    text: title ? `via agent · “${title}”` : 'via agent',
+    linkable: linkable !== false && !!known,
+  };
+}
+
+// A button while the orchestrating conversation can be opened, plain text
+// otherwise. `tooltip` is a full sentence.
+function localAgentElementHtml(model, { className, text = model.text, tooltip }) {
+  const label = escapeHtml(text);
+  if (model.linkable) {
+    return `<button type="button" class="${className}" data-origin-conversation-id="${escapeHtml(model.conversationId)}" title="${escapeHtml(`${tooltip} Opens that conversation.`)}" onclick="openOriginConversation(event, this)">${label}</button>`;
+  }
+  return `<span class="${className}" title="${escapeHtml(tooltip)}">${label}</span>`;
+}
+
+function startedByTooltip(model) {
+  return model.fullTitle
+    ? `Started by an agent in “${model.fullTitle}”.`
+    : 'Started by an agent in another conversation on this relay.';
+}
+
 /** The display fields of an `origin`, or null when it names no relay. */
 export function normalizeRemoteOrigin(raw) {
   if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null;
@@ -35,7 +111,9 @@ export function normalizeRemoteOrigin(raw) {
   };
 }
 
-export function remoteOriginBadgeText(origin) {
+export function remoteOriginBadgeText(origin, options = {}) {
+  const local = localAgentOriginModel(origin, options);
+  if (local) return local.model ? `${local.text} · ${local.model}` : local.text;
   const normalized = normalizeRemoteOrigin(origin);
   if (!normalized) return '';
   const parts = [`↗ from ${normalized.relayName}`];
@@ -54,8 +132,21 @@ export function remoteOriginLink(origin) {
 /**
  * The badge row that sits above a user bubble's text. `linkable: false` (the
  * shared read-only view) renders it without the link to the other relay.
+ * `conversations` (the browser's list by id) lets a local agent's badge open
+ * the conversation that agent runs in.
  */
-export function renderRemoteOriginBadgeHtml(origin, { linkable = true } = {}) {
+export function renderRemoteOriginBadgeHtml(origin, { linkable = true, conversations = null } = {}) {
+  const local = localAgentOriginModel(origin, { conversations, linkable });
+  if (local) {
+    const badge = localAgentElementHtml(local, {
+      className: 'msg-origin-badge msg-origin-agent',
+      text: remoteOriginBadgeText(origin, { conversations }),
+      tooltip: local.fullTitle
+        ? `Sent by an agent in “${local.fullTitle}”.`
+        : 'Sent by an agent in another conversation on this relay.',
+    });
+    return `<div class="msg-origin">${badge}</div>`;
+  }
   const normalized = normalizeRemoteOrigin(origin);
   if (!normalized) return '';
   const label = escapeHtml(remoteOriginBadgeText(normalized));
@@ -67,10 +158,35 @@ export function renderRemoteOriginBadgeHtml(origin, { linkable = true } = {}) {
   return `<div class="msg-origin"><span class="msg-origin-badge" title="Sent by an agent on relay ${name}.">${label}</span></div>`;
 }
 
-/** The sidebar marker for a conversation another relay's agent created. */
-export function renderConversationOriginMarkerHtml(conversation) {
+/**
+ * The sidebar marker for a conversation an agent created: "↗ win-test" for
+ * another relay's agent, "via agent · “title”" for one on this relay.
+ */
+export function renderConversationOriginMarkerHtml(conversation, { conversations = null, linkable = true } = {}) {
+  const local = localAgentOriginModel(conversation?.origin, {
+    conversations,
+    linkable,
+    ownId: conversation?.id,
+    maxTitleLength: ORIGIN_TITLE_MAX_SIDEBAR,
+  });
+  if (local) {
+    return localAgentElementHtml(local, {
+      className: 'conv-origin-marker conv-origin-agent',
+      tooltip: startedByTooltip(local),
+    });
+  }
   const normalized = normalizeRemoteOrigin(conversation?.origin);
   if (!normalized) return '';
   const name = escapeHtml(normalized.relayName);
   return `<span class="conv-origin-marker" title="Started by an agent on relay ${name}">↗ ${name}</span>`;
 }
+
+/**
+ * The same marker for the conversation header, with room for more of the
+ * title. Only a local origin has one; '' for everything else.
+ */
+export function renderConversationHeaderOriginHtml(conversation, { conversations = null, linkable = true } = {}) {
+  const local = localAgentOriginModel(conversation?.origin, { conversations, linkable, ownId: conversation?.id });
+  if (!local) return '';
+  return localAgentElementHtml(local, { className: 'conv-origin-agent', tooltip: startedByTooltip(local) });
+}

package/server/public/app/router.js

@@ -6,6 +6,7 @@ import {
   WORKSPACE_FILE_EXTENSIONS,
   serverPlatform,
 } from './store.js';
+import { scanInlineDollars, splitAtLiteralDollars } from './math-dollars.mjs';
 
 export function workspaceMentionRegex() {
   return /(?:[A-Za-z]:[\\/])?(?:\.{1,2}[\\/])?(?:[A-Za-z0-9._-]+[\\/])*[A-Za-z0-9._-]+\.[A-Za-z0-9]{1,16}/g;
@@ -397,7 +398,8 @@ function normalizeInlineMathDelimiters(line) {
   let output = '';
   let index = 0;
   let inCode = false;
-  let inDollarMath = false;
+  // Only real dollar maths is skipped over; a price's `$` opens nothing.
+  const dollarMathEnds = new Map(scanInlineDollars(line).spans);
 
   while (index < line.length) {
     const char = line[index];
@@ -412,15 +414,10 @@ function normalizeInlineMathDelimiters(line) {
       index += 1;
       continue;
     }
-    if (char === '$' && line[index - 1] !== '\\') {
-      inDollarMath = !inDollarMath;
-      output += char;
-      index += 1;
-      continue;
-    }
-    if (inDollarMath) {
-      output += char;
-      index += 1;
+    if (char === '$' && dollarMathEnds.has(index)) {
+      const closeIndex = dollarMathEnds.get(index);
+      output += line.slice(index, closeIndex + 1);
+      index = closeIndex + 1;
       continue;
     }
     if (char === '\\' && line[index + 1] === '(') {
@@ -469,6 +466,7 @@ function protectMarkdownEscapesInMath(source) {
     let output = '';
     let index = 0;
     let inCode = false;
+    const dollarMathEnds = new Map(scanInlineDollars(line).spans);
     while (index < line.length) {
       if (line[index] === '`') {
         inCode = !inCode;
@@ -482,7 +480,10 @@ function protectMarkdownEscapesInMath(source) {
         continue;
       }
       const delimiter = line[index + 1] === '$' ? '$$' : '$';
-      const closeIndex = line.indexOf(delimiter, index + delimiter.length);
+      // A single `$` that is a plain dollar sign (a price) opens no formula.
+      const closeIndex = delimiter === '$'
+        ? (dollarMathEnds.has(index) ? dollarMathEnds.get(index) : -1)
+        : line.indexOf(delimiter, index + delimiter.length);
       if (closeIndex < 0) {
         output += line[index];
         index += 1;
@@ -550,6 +551,40 @@ export function normalizeMathDelimiters(source) {
   return protectMarkdownEscapesInMath(normalized.join('\n'));
 }
 
+const MATH_IGNORED_TAGS = ['pre', 'code', 'script', 'style', 'textarea', 'option', 'a'];
+const LITERAL_DOLLAR_CLASS = 'literal-dollar';
+
+/**
+ * KaTeX's auto-render pairs any two `$` in a block, so "$5 … $9" would become
+ * one formula. Each plain dollar sign (see math-dollars.mjs) is moved into a
+ * span of its own that auto-render skips; with no partner in its text node,
+ * it stays a dollar sign.
+ */
+function isolateLiteralDollars(container) {
+  const ignored = MATH_IGNORED_TAGS.join(',');
+  const walker = document.createTreeWalker(container, 4 /* NodeFilter.SHOW_TEXT */);
+  const textNodes = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (node.nodeValue.includes('$') && !node.parentElement?.closest(ignored)) textNodes.push(node);
+  }
+  for (const node of textNodes) {
+    const parts = splitAtLiteralDollars(node.nodeValue);
+    if (!parts.some((part) => part.literal)) continue;
+    const fragment = document.createDocumentFragment();
+    for (const part of parts) {
+      if (!part.literal) {
+        fragment.appendChild(document.createTextNode(part.text));
+        continue;
+      }
+      const span = document.createElement('span');
+      span.className = LITERAL_DOLLAR_CLASS;
+      span.textContent = part.text;
+      fragment.appendChild(span);
+    }
+    node.parentNode.replaceChild(fragment, node);
+  }
+}
+
 function renderMathInHtml(html) {
   const renderMathInElement = globalThis.renderMathInElement;
   if (typeof renderMathInElement !== 'function' || !globalThis.document?.createElement) return html;
@@ -557,6 +592,7 @@ function renderMathInHtml(html) {
   const container = document.createElement('div');
   container.innerHTML = html;
   try {
+    isolateLiteralDollars(container);
     renderMathInElement(container, {
       delimiters: [
         { left: '$$', right: '$$', display: true },
@@ -564,7 +600,8 @@ function renderMathInHtml(html) {
         { left: '\\(', right: '\\)', display: false },
         { left: '$', right: '$', display: false },
       ],
-      ignoredTags: ['pre', 'code', 'script', 'style', 'textarea', 'option', 'a'],
+      ignoredTags: MATH_IGNORED_TAGS,
+      ignoredClasses: [LITERAL_DOLLAR_CLASS],
       throwOnError: false,
       strict: 'ignore',
       trust: false,

package/server/public/app/scrollbar-hover.mjs

@@ -0,0 +1,78 @@
+// Desktop scrollbars are thin and hard to grab. With a mouse, the scrollbar of
+// the scroll area under the pointer widens to twice its width while the
+// pointer is on it, and goes back 2.5 s after the pointer left it. The track
+// always has the wide width (index.html), so nothing in the page moves when
+// the thumb grows.
+
+export const SCROLLBAR_WIDE_CLASS = 'scrollbar-wide';
+export const SCROLLBAR_LINGER_MS = 2500;
+// How far left of the scrollbar the pointer already counts as on it.
+const REACH_PX = 4;
+
+/**
+ * Whether a pointer at `clientX` is on the vertical scrollbar of a scroll
+ * area: `rect` is its border box, `barWidth` the room its scrollbar takes
+ * (offsetWidth - clientWidth, borders included, which errs on the wide side).
+ */
+export function pointerOnScrollbar({ clientX, rect, barWidth, reach = REACH_PX } = {}) {
+  if (!rect || !(barWidth > 0)) return false;
+  return clientX >= rect.right - barWidth - reach && clientX <= rect.right;
+}
+
+function scrollAreaUnderPointer(target, clientX) {
+  for (let node = target; node && node.nodeType === 1; node = node.parentElement) {
+    if (node.scrollHeight <= node.clientHeight) continue;
+    const barWidth = node.offsetWidth - node.clientWidth;
+    if (pointerOnScrollbar({ clientX, rect: node.getBoundingClientRect(), barWidth })) return node;
+  }
+  return null;
+}
+
+export function initScrollbarHover({ doc = document, win = window, lingerMs = SCROLLBAR_LINGER_MS } = {}) {
+  let canHover = false;
+  try { canHover = win.matchMedia('(hover: hover) and (pointer: fine)').matches; } catch {}
+  if (!canHover) return () => {};
+  const timers = new Map();
+  const widen = (node) => {
+    clearTimeout(timers.get(node));
+    timers.delete(node);
+    node.classList.add(SCROLLBAR_WIDE_CLASS);
+  };
+  const release = (node) => {
+    if (timers.has(node)) return;
+    timers.set(node, setTimeout(() => {
+      timers.delete(node);
+      node.classList.remove(SCROLLBAR_WIDE_CLASS);
+    }, lingerMs));
+  };
+  const onMove = (event) => {
+    const hovered = scrollAreaUnderPointer(event.target, event.clientX);
+    if (hovered) widen(hovered);
+    for (const node of doc.querySelectorAll(`.${SCROLLBAR_WIDE_CLASS}`)) {
+      if (node !== hovered) release(node);
+    }
+  };
+  // Dragging the thumb sends no pointer moves to the page; the scrolling it
+  // causes keeps the scrollbar wide for as long as it lasts.
+  const onScroll = (event) => {
+    const node = event.target;
+    if (node?.classList?.contains(SCROLLBAR_WIDE_CLASS) && timers.has(node)) {
+      clearTimeout(timers.get(node));
+      timers.delete(node);
+      release(node);
+    }
+  };
+  const onLeave = () => {
+    for (const node of doc.querySelectorAll(`.${SCROLLBAR_WIDE_CLASS}`)) release(node);
+  };
+  doc.addEventListener('mousemove', onMove, { passive: true });
+  doc.addEventListener('scroll', onScroll, { passive: true, capture: true });
+  doc.documentElement.addEventListener('mouseleave', onLeave, { passive: true });
+  return () => {
+    doc.removeEventListener('mousemove', onMove);
+    doc.removeEventListener('scroll', onScroll, { capture: true });
+    doc.documentElement.removeEventListener('mouseleave', onLeave);
+    for (const timer of timers.values()) clearTimeout(timer);
+    timers.clear();
+  };
+}