@oar-sh/oar 0.9.24 → 0.9.26

package/server/public/app/remote-relays-settings.js

@@ -23,6 +23,8 @@ import {
   upsertRemoteRelay,
 } from './remote-relays-store.mjs';
 import { REMOTE_RELAY_PERMISSIONS, normalizeRemoteRelayPermission } from './remote-relay-shared.mjs';
+import { currentPwaAppName, isPwaAppNameSaveInFlight, syncPwaAppNameInput } from './pwa-install.js';
+import { SETTINGS_TAB_SHOWN_EVENT } from './settings-tabs.js';
 
 export const REMOTE_RELAY_PERMISSION_LABELS = Object.freeze({
   read: 'Read only',
@@ -54,6 +56,9 @@ let listLoadFailed = false;
 const rowBusy = new Map();
 let listRenderDeferred = false;
 let listFocusBound = false;
+// The relay's name as the last snapshot had it: a change made elsewhere is
+// read into the Relay name field.
+let lastSelfName = null;
 
 function el(id) {
   return document.getElementById(id);
@@ -164,12 +169,10 @@ function setStatusLine(id, state, text) {
 }
 
 function renderSelfSection() {
-  const snapshot = getRemoteRelaysSnapshot();
-  const nameEl = el('remote-relays-self-name');
-  if (nameEl) {
-    const name = String(snapshot?.self?.name || '').trim();
-    nameEl.textContent = name || '—';
-  }
+  // Empty, the field shows the name the relay goes by then (its host name).
+  const nameInput = el('pwa-app-name-input');
+  const defaultName = String(getRemoteRelaysSnapshot()?.self?.defaultName || '').trim();
+  if (nameInput && defaultName) nameInput.placeholder = defaultName;
   const input = el('remote-relays-public-url-input');
   if (input) {
     input.placeholder = browserSelfUrl() || 'https://…';
@@ -590,9 +593,27 @@ export function resetRemoteRelaysSettingsForTests() {
   addInFlight = false;
   listLoadFailed = false;
   listRenderDeferred = false;
+  lastSelfName = null;
   rowBusy.clear();
 }
 
+// A rename on another device (the relay announces it with the list) or the
+// Relays tab coming into view reads the name again; the field keeps what is
+// being typed in it (pwa-install.js).
+function refreshRelayNameOnChange(snapshot) {
+  const name = typeof snapshot?.self?.name === 'string' ? snapshot.self.name : null;
+  if (name === null) return;
+  const changed = lastSelfName !== null && name !== lastSelfName;
+  lastSelfName = name;
+  if (!changed) return;
+  // This page's own rename: its answer paints the field.
+  if (isPwaAppNameSaveInFlight()) return;
+  // A name this page already has (an empty one goes by the default).
+  const known = currentPwaAppName() || String(snapshot.self.defaultName || '');
+  if (name === known) return;
+  syncPwaAppNameInput();
+}
+
 // The relay's own settings ride along in the list payload's `self` (GET and
 // remote_relays_updated alike), so a change made on another device shows here
 // too — except while this page is saving the same field.
@@ -608,6 +629,7 @@ function applySelfSettingsFromSnapshot(snapshot) {
 // Live: a remote_relays_updated event (or any other store change) repaints.
 subscribeRemoteRelays((snapshot) => {
   applySelfSettingsFromSnapshot(snapshot);
+  refreshRelayNameOnChange(snapshot);
   renderRemoteRelaysSection();
 });
 
@@ -615,4 +637,9 @@ if (typeof window !== 'undefined' && typeof window.addEventListener === 'functio
   window.addEventListener(RELAY_NAME_CHANGED_EVENT, () => {
     void refreshRemoteRelays();
   });
+  window.addEventListener(SETTINGS_TAB_SHOWN_EVENT, (event) => {
+    if (event?.detail?.tab !== 'relays') return;
+    syncPwaAppNameInput();
+    void refreshRemoteRelays();
+  });
 }

package/server/public/app/router.js

@@ -7,7 +7,7 @@ import {
   WORKSPACE_FILE_EXTENSIONS,
   serverPlatform,
 } from './store.js';
-import { scanInlineDollars, splitAtLiteralDollars } from './math-dollars.mjs';
+import { mathAppliesTo, setMathEnabled, texForKatex } from './markdown-math.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;
@@ -261,6 +261,9 @@ function isAllowedPreviewAttribute(tagName, name, value) {
     return (tagName === 'video' || tagName === 'audio') && isSafePreviewUrl(value, false);
   }
   if (name === 'alt') return tagName === 'img';
+  // The formula placeholders of markdown-math.mjs, filled in by renderMathInHtml.
+  if (name === 'data-math') return tagName === 'span' && (value === 'inline' || value === 'display');
+  if (name === 'data-tex') return tagName === 'span';
   if (name === 'controls' || name === 'muted' || name === 'loop') {
     return (tagName === 'video' || tagName === 'audio') && value === '';
   }
@@ -372,262 +375,71 @@ export function sanitizePreviewHtml(html) {
   return template.innerHTML;
 }
 
-const COMPATIBILITY_DISPLAY_MATH_COMMAND = /\\(?:frac|sqrt|sum|prod|int|iint|iiint|lim|log|ln|sin|cos|tan|theta|alpha|beta|gamma|delta|lambda|mu|pi|sigma|phi|omega|vec|hat|bar|overline|underline|left|right|begin|end|text|mathrm|mathbf|mathbb|mathcal|ce)\b/i;
-const INLINE_MATH_COMMAND = /\\(?:frac|sqrt|sum|prod|int|iint|iiint|lim|log|ln|sin|cos|tan|cot|sec|csc|arcsin|arccos|theta|alpha|beta|gamma|delta|lambda|mu|pi|rho|sigma|phi|omega|Omega|Gamma|Delta|Lambda|Pi|Sigma|Phi|Psi|Omega|vec|hat|bar|overline|underline|left|right|text|mathrm|mathbf|mathbb|mathcal|operatorname|circ|degree|times|cdot|pm|mp|leq|geq|neq|approx|equiv|infty|partial|nabla|forall|exists|rightarrow|longmapsto|to|mapsto|ce)\b/;
-const STRICT_INLINE_SCRIPT = /(?:\^[{]|\^[-+]?\d|_[{]|_[-+]?\d)/;
-const URL_LIKE_TEXT = /\b(?:https?|ftp):\/\/|www\./i;
-const MARKDOWN_ESCAPABLE_TEX_CHARACTERS = new Set(Array.from('!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'));
+// Rendered formulas by mode and TeX; null for one KaTeX refused. A streaming
+// reply is rendered again with every delta, and its earlier formulas come
+// from here.
+const MATH_HTML_CACHE_MAX = 500;
+const mathHtmlCache = new Map();
 
-function isStrictInlineMathCandidate(value) {
-  const text = String(value || '').trim();
-  if (!text || text.length > 240 || URL_LIKE_TEXT.test(text)) return false;
-  return INLINE_MATH_COMMAND.test(text) || STRICT_INLINE_SCRIPT.test(text);
-}
-
-function findClosingParenthesis(source, openingIndex) {
-  let depth = 0;
-  for (let index = openingIndex; index < source.length; index += 1) {
-    if (source[index] === '\\') {
-      index += 1;
-      continue;
-    }
-    if (source[index] === '(') depth += 1;
-    if (source[index] === ')') {
-      depth -= 1;
-      if (depth === 0) return index;
-    }
-  }
-  return -1;
-}
-
-function normalizeInlineMathDelimiters(line) {
-  let output = '';
-  let index = 0;
-  let inCode = 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];
-    if (char === '`') {
-      inCode = !inCode;
-      output += char;
-      index += 1;
-      continue;
-    }
-    if (inCode) {
-      output += char;
-      index += 1;
-      continue;
-    }
-    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] === '(') {
-      const closeIndex = line.indexOf('\\)', index + 2);
-      if (closeIndex >= 0) {
-        output += `$${line.slice(index + 2, closeIndex).trim()}$`;
-        index = closeIndex + 2;
-        continue;
-      }
-    }
-    if (char !== '(' || line[index - 1] === '\\') {
-      output += char;
-      index += 1;
-      continue;
-    }
-    const closeIndex = findClosingParenthesis(line, index);
-    if (closeIndex < 0) {
-      output += char;
-      index += 1;
-      continue;
-    }
-    const candidate = line.slice(index + 1, closeIndex);
-    if (!isStrictInlineMathCandidate(candidate)) {
-      output += char;
-      index += 1;
-      continue;
-    }
-    output += `$${candidate.trim()}$`;
-    index = closeIndex + 1;
-  }
-
-  return output;
-}
-
-function protectMarkdownEscapesInMath(source) {
-  const lines = String(source ?? '').split('\n');
-  let inFence = false;
-
-  return lines.map((line) => {
-    if (/^\s*(?:`{3,}|~{3,})/.test(line)) {
-      inFence = !inFence;
-      return line;
-    }
-    if (inFence) return line;
-
-    let output = '';
-    let index = 0;
-    let inCode = false;
-    const dollarMathEnds = new Map(scanInlineDollars(line).spans);
-    while (index < line.length) {
-      if (line[index] === '`') {
-        inCode = !inCode;
-        output += line[index];
-        index += 1;
-        continue;
-      }
-      if (inCode || line[index] !== '$' || line[index - 1] === '\\') {
-        output += line[index];
-        index += 1;
-        continue;
-      }
-      const delimiter = line[index + 1] === '$' ? '$$' : '$';
-      // 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;
-        continue;
-      }
-      const formula = line.slice(index + delimiter.length, closeIndex);
-      const protectedFormula = formula.replace(/\\(.)/g, (match, character) => (
-        MARKDOWN_ESCAPABLE_TEX_CHARACTERS.has(character) ? `\\\\${character}` : match
-      ));
-      output += `${delimiter}${protectedFormula}${delimiter}`;
-      index = closeIndex + delimiter.length;
-    }
-    return output;
-  }).join('\n');
-}
-
-export function normalizeMathDelimiters(source) {
-  const lines = String(source ?? '').split('\n');
-  const normalized = [];
-  let inFence = false;
-
-  for (let index = 0; index < lines.length; index += 1) {
-    let line = lines[index];
-    if (/^\s*(?:`{3,}|~{3,})/.test(line)) {
-      inFence = !inFence;
-      normalized.push(line);
-      continue;
-    }
-    if (inFence || /^(?: {4}|\t)/.test(line)) {
-      normalized.push(line);
-      continue;
-    }
-
-    line = normalizeInlineMathDelimiters(line)
-      .replace(/\\\[([^\n]+?)\\\]/g, (_match, formula) => `$$${formula.trim()}$$`);
-    const delimiter = line.trim();
-    const closingDelimiter = delimiter === '$$'
-      ? '$$'
-      : delimiter === '\\['
-        ? '\\]'
-        : delimiter === '['
-          ? ']'
-          : '';
-    if (!closingDelimiter) {
-      normalized.push(line);
-      continue;
-    }
-
-    let closingIndex = index + 1;
-    while (closingIndex < lines.length && lines[closingIndex].trim() !== closingDelimiter) closingIndex += 1;
-    if (closingIndex >= lines.length) {
-      normalized.push(line);
-      continue;
-    }
-
-    const formula = lines.slice(index + 1, closingIndex).join('\n');
-    if (delimiter === '[' && !COMPATIBILITY_DISPLAY_MATH_COMMAND.test(formula)) {
-      normalized.push(line);
-      continue;
-    }
-    normalized.push(`$$${formula.trim().replace(/[ \t]*\n[ \t]*/g, ' ')}$$`);
-    index = closingIndex;
+function katexHtml(tex, display) {
+  const key = `${display ? 'd' : 'i'}${tex}`;
+  if (mathHtmlCache.has(key)) return mathHtmlCache.get(key);
+  let html = null;
+  try {
+    html = globalThis.katex.renderToString(texForKatex(tex), {
+      displayMode: display,
+      throwOnError: true,
+      // Set, not left to KaTeX's default ('warn'): input LaTeX would not
+      // take, and a character KaTeX has no metrics for (an emoji), is set
+      // as well as it can be, without a console warning per render.
+      strict: 'ignore',
+      trust: false,
+      // A command KaTeX does not trust (\href, \url, \includegraphics) is
+      // set as its own name, in this colour: the text's, not red.
+      errorColor: 'inherit',
+    });
+  } catch {
+    // Nothing KaTeX can set (an unknown command, a syntax error): the source
+    // stays as it was written. Prose that got past the delimiter rules ends
+    // here too, so it never shows as a broken formula.
   }
-
-  return protectMarkdownEscapesInMath(normalized.join('\n'));
+  if (mathHtmlCache.size >= MATH_HTML_CACHE_MAX) mathHtmlCache.clear();
+  mathHtmlCache.set(key, html);
+  return html;
 }
 
-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.
+ * Fills the formula placeholders of markdown-math.mjs with KaTeX's rendering.
+ * It runs after the sanitiser: KaTeX generates its own layout styles, which
+ * are necessary for fractions, scripts and matrices and which that pass would
+ * strip. Without KaTeX the placeholders stay, and read as the source.
  */
-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;
+  if (!html.includes('data-math=')) return html;
+  if (typeof globalThis.katex?.renderToString !== 'function' || !globalThis.document?.createElement) return html;
 
   const container = document.createElement('div');
   container.innerHTML = html;
-  try {
-    isolateLiteralDollars(container);
-    renderMathInElement(container, {
-      delimiters: [
-        { left: '$$', right: '$$', display: true },
-        { left: '\\[', right: '\\]', display: true },
-        { left: '\\(', right: '\\)', display: false },
-        { left: '$', right: '$', display: false },
-      ],
-      ignoredTags: MATH_IGNORED_TAGS,
-      ignoredClasses: [LITERAL_DOLLAR_CLASS],
-      throwOnError: false,
-      strict: 'ignore',
-      trust: false,
-    });
-  } catch (error) {
-    console.warn('[markdown] could not render mathematical notation', error);
-    return html;
+  for (const placeholder of container.querySelectorAll('span[data-math]')) {
+    const display = placeholder.getAttribute('data-math') === 'display';
+    const rendered = katexHtml(placeholder.getAttribute('data-tex') || '', display);
+    placeholder.removeAttribute('data-tex');
+    if (rendered === null) placeholder.classList.add('math-source');
+    else placeholder.innerHTML = rendered;
   }
-  // The original Markdown was sanitized before this pass. KaTeX generates its own
-  // layout styles, which are necessary for fractions, scripts, and matrices.
   return container.innerHTML;
 }
 
 export function renderMarkdownPreview(source, allowEmbeddedHtml) {
-  const sourceText = normalizeMathDelimiters(source);
+  const sourceText = String(source ?? '');
   const fallbackEscaped = `<p>${escHtml(sourceText).replace(/\n/g, '<br>')}</p>`;
   const markdown = globalThis.marked;
   if (!markdown || typeof markdown.parse !== 'function' || typeof markdown.Renderer !== 'function') {
     return fallbackEscaped;
   }
+  // A message without a maths delimiter, or a very long one, is parsed
+  // without the maths rules.
+  setMathEnabled(mathAppliesTo(sourceText));
   if (allowEmbeddedHtml) {
     const parsed = markdown.parse(sourceText);
     if (typeof parsed !== 'string') return fallbackEscaped;

package/server/public/app/session-history-ui.js

@@ -77,6 +77,8 @@ function overlayDescriptors(closers) {
     { name: 'inbox', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('inbox-view-active'), close: backToSession(closers.closeInboxView) },
     // Status the same way.
     { name: 'status', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('status-view-active'), close: backToSession(closers.closeStatusView) },
+    // And the global Media view.
+    { name: 'media', find: () => document.body, isOpen: (el) => !!el?.classList?.contains('media-view-active'), close: backToSession(closers.closeMediaView) },
     { name: 'composer-settings', find: byId('composer-settings'), isOpen: isShown, close: closers.closeComposerSettings },
     { name: 'chat-actions-menu', find: byId('chat-actions-menu'), isOpen: isShown, close: closers.closeChatActionsMenu },
     { name: 'summary-modal', find: byId('summary-modal'), isOpen: isVisible, close: closers.closeSummaryModal },

package/server/public/app/settings-modal.js

@@ -65,6 +65,7 @@ import { refreshClaudeAuthSection } from './claude-auth-ui.js';
 import { refreshGrokAuthSection } from './grok-auth-ui.js';
 import { syncDeepSeekSettingsInputs } from './deepseek-settings-ui.js';
 import { syncClaudeApiSettingsInputs } from './claude-api-settings-ui.js';
+import { applyOpenAIImageSpendSettings, syncOpenAIImageSpendSettings } from './openai-image-cost-ui.js';
 
 export {
   applyDeepSeekSettingsState,
@@ -642,6 +643,8 @@ function setOpenAISettingsControlsDisabled(disabled) {
 
 export function applyOpenAISettingsState(settings = {}, { resetInputs = false } = {}) {
   ensureOpenAISettingsInputTracking();
+  // The daily image cap, when the answer names it (openai-image-cost-ui.js).
+  if (typeof document !== 'undefined') applyOpenAIImageSpendSettings(settings || {});
   openAISettingsState = {
     configured: settings?.configured === true,
     enabled: settings?.configured === true && settings?.enabled === true,
@@ -2120,6 +2123,7 @@ export function openSettingsModal(tab, providerTab) {
   openAISettingsInputsDirty = false;
   ensureOpenAISettingsInputTracking();
   void syncOpenAISettingsInputs();
+  void syncOpenAIImageSpendSettings();
   claudeSettingsInputsDirty = false;
   ensureClaudeSettingsInputTracking();
   void syncClaudeSettingsInputs();

package/server/public/app/settings-tabs.js

@@ -1,9 +1,13 @@
 import { revealSelectedTabs, watchTabStripFades } from './tab-strip-fade.mjs';
 
 const SETTINGS_TAB_STORAGE_KEY = 'copilot_settings_tab';
+export const SETTINGS_TAB_SHOWN_EVENT = 'oar:settings-tab-shown';
 const SETTINGS_PROVIDER_TAB_STORAGE_KEY = 'copilot_settings_provider_tab';
 
-const SETTINGS_TABS = ['general', 'providers', 'relays', 'previews', 'shares', 'notifications', 'features'];
+// General leads: `SETTINGS_TABS[0]` is the tab a first-time visitor lands on.
+// A remembered tab or a deep link to General still lands there after its
+// Appearance block got a tab of its own.
+const SETTINGS_TABS = ['general', 'appearance', 'providers', 'relays', 'previews', 'shares', 'notifications', 'features'];
 // Copilot leads: it is the default provider, and `SETTINGS_PROVIDER_TABS[0]`
 // is also the sub-tab a first-time visitor lands on.
 const SETTINGS_PROVIDER_TABS = ['copilot', 'openai', 'claude', 'claude-api', 'claude-cloud', 'grok', 'cursor', 'deepseek'];
@@ -122,8 +126,13 @@ export function selectSettingsTab(tab, providerTab) {
   ensureSettingsTabsBound();
   const nextTab = normalizeTab(tab, SETTINGS_TABS) || storedSettingsTab();
   const nextProviderTab = normalizeTab(providerTab, SETTINGS_PROVIDER_TABS) || storedProviderTab();
+  const previousTab = document.querySelector('#settings-modal [data-settings-tab][aria-selected="true"]')?.dataset.settingsTab;
   if (applyTabState('data-settings-tab', 'data-settings-panel', nextTab)) {
     writeLocalStorage(SETTINGS_TAB_STORAGE_KEY, nextTab);
+    // A tab switched to re-reads what it shows (Relays: the relay name).
+    if (nextTab !== previousTab && typeof window !== 'undefined' && window.CustomEvent) {
+      window.dispatchEvent(new window.CustomEvent(SETTINGS_TAB_SHOWN_EVENT, { detail: { tab: nextTab } }));
+    }
   }
   if (applyTabState('data-settings-provider-tab', 'data-settings-provider-panel', nextProviderTab)) {
     writeLocalStorage(SETTINGS_PROVIDER_TAB_STORAGE_KEY, nextProviderTab);

package/server/public/app/socket-handlers.js

@@ -72,6 +72,8 @@ import { applyAgentSdkState } from './agent-sdk-ui.js';
 import { renderUpdateSection } from './update-ui.js';
 import { applyHostSuspendState, applyRelayShutdownState } from './host-suspend-ui.js';
 import { applyClaudeUsageLimit, applyConversationBilling, applyUsageLimitPause } from './usage-limit-ui.js';
+import { applyOpenAIImagePresets, applyOpenAIImageSpendState } from './openai-image-cost-ui.js';
+import { OPENAI_IMAGE_PRESETS_EVENT, OPENAI_IMAGE_USAGE_EVENT } from './openai-image-spend.mjs';
 import {
   showThinking,
   removeThinking,
@@ -111,6 +113,12 @@ import { mergeRelayThoughts } from './relay-thoughts.mjs';
 import { conversationPayloadCache } from './conversation-payload-cache.mjs';
 import { planOnlyAfterBroadcast } from './plan-board-shared.mjs';
 import { noteConversationGone } from './session-history-ui.js';
+import { handleImagePreview, handleImagePreviewReset, handleImageStarted } from './image-turn-placeholder.mjs';
+import {
+  OPENAI_IMAGE_PREVIEW_EVENT,
+  OPENAI_IMAGE_PREVIEW_RESET_EVENT,
+  OPENAI_IMAGE_STARTED_EVENT,
+} from './openai-image-composer.mjs';
 
 // A live row of the conversation on screen joins its kept window, so a
 // switch away and back still shows it. Rows of other conversations do not:
@@ -370,6 +378,9 @@ export async function connectSocket(overrideDeps) {
     setCliOnline(true);
     renderConvList();
     resyncAfterConnect();
+    // For views that load from the relay on their own (the media gallery's
+    // tiles): what failed while the relay was away can be asked for again.
+    window.dispatchEvent(new CustomEvent('oar:relay-connected'));
     // Every loaded page again, not page one only: events missed while the
     // socket was down touched rows anywhere in the list.
     scheduleLoadedConversationsRefresh();
@@ -442,6 +453,15 @@ export async function connectSocket(overrideDeps) {
         .catch(() => {});
     }
   });
+  // Today's OpenAI image spend after every booking and every change of the
+  // cap or the override (the banner, Settings, Check Usage), and the image
+  // presets after every change (the composer's select, Settings).
+  socket.on(OPENAI_IMAGE_USAGE_EVENT, (payload) => {
+    applyOpenAIImageSpendState(payload);
+  });
+  socket.on(OPENAI_IMAGE_PRESETS_EVENT, (payload) => {
+    applyOpenAIImagePresets(payload);
+  });
   // No view refresh here: the engine switch rebinds nothing — it only changes
   // which worker the NEXT Copilot conversation spawns.
   socket.on('copilot_settings_updated', (payload) => {
@@ -654,6 +674,12 @@ export async function connectSocket(overrideDeps) {
     if (sourceMessageId) clearRelayStreamStateForMessage(sourceMessageId);
     refreshSessionWorkerStatus().catch(() => {});
   });
+  // A running image turn of the open conversation: its placeholder in the
+  // live bubble (timer, size, the newest partials). Other conversations'
+  // events are ignored there.
+  socket.on(OPENAI_IMAGE_STARTED_EVENT, (payload) => handleImageStarted(payload));
+  socket.on(OPENAI_IMAGE_PREVIEW_EVENT, (payload) => handleImagePreview(payload));
+  socket.on(OPENAI_IMAGE_PREVIEW_RESET_EVENT, (payload) => handleImagePreviewReset(payload));
   // A folder's commit attribution changed (any client): an open context modal
   // re-reads it so its row and effect text match.
   socket.on('workspace_root_attribution_updated', () => {

package/server/public/app/store.js

@@ -5,6 +5,7 @@ import { resolveRelayDotState } from './relay-dot-state.mjs';
 import { readRepoBrowserPreferences } from './repo-browser-preferences.mjs';
 import { isChatInteractionHeld } from './selection-guard.mjs';
 import { nextSubagentStatus } from './subagent-fold.mjs';
+import { useMathMarkdown } from './markdown-math.mjs';
 import { useStrictStrikethrough } from './markdown-strikethrough.mjs';
 import { parseGroupFoldChoices, pruneGroupFoldChoices } from './conversation-group-state.mjs';
 import { isPhoneLandscapeLayout, shouldCollapseListAfterPick, syncPhoneLandscapeAttribute } from './phone-landscape.mjs';
@@ -205,6 +206,7 @@ const CONVERSATION_SCROLL_STORAGE_PREFIX = 'copilot_message_scroll_';
 if (globalThis.marked && typeof globalThis.marked.setOptions === 'function') {
   globalThis.marked.setOptions({ breaks: true });
   useStrictStrikethrough(globalThis.marked);
+  useMathMarkdown(globalThis.marked);
 } else {
   console.warn('[store] marked unavailable; markdown rendering will use plain-text fallback.');
 }

package/server/public/app/stream-view-preference.mjs

@@ -1,4 +1,4 @@
-// "Stream view" (Settings › General › Appearance, and its mirror in the 🧠
+// "Stream view" (Settings › Appearance, and its mirror in the 🧠
 // modal): an agent turn's thoughts, tool calls and reply as one list in the
 // order they happened, live and in the finished message. A setting of this
 // browser, kept in localStorage like the thoughts one; off unless switched

package/server/public/app/tab-strip-fade.mjs

@@ -6,7 +6,7 @@
 
 import { FONT_SCALE_CHANGE_EVENT } from './font-scaling.js';
 
-export const TAB_STRIP_SELECTOR = '.settings-tab-strip, .plan-usage-tab-strip';
+export const TAB_STRIP_SELECTOR = '.settings-tab-strip, .plan-usage-tab-strip, .context-tab-strip, .media-gallery-tabs, .media-gallery-chips';
 
 // Sub-pixel scroll ends (a zoomed page) count as the end.
 const EDGE_SLACK_PX = 1;

package/server/public/app/thoughts-preference.mjs

@@ -1,4 +1,4 @@
-// "Expand thoughts while an agent works" (Settings › General, and its mirror
+// "Expand thoughts while an agent works" (Settings › Appearance, and its mirror
 // in the 🧠 modal). A setting of this browser, kept in localStorage like the
 // scroll-on-send one. On unless switched off: it decides whether a thought
 // starts open in the live turn, in a live sub-agent bubble and in the