LaTeX math via lazily-loaded KaTeX ($x$ inline, $$...$$ display), agent-proposable; Enter sends a comment, Shift+Enter adds a line

client/app.css

@@ -334,7 +334,10 @@ textarea { resize: vertical; }
 .chip.done::before { background: var(--accent); }
 .chip.failed { background: var(--chip-bg); color: var(--text); text-decoration: line-through; }
 .reply-row { display: flex; gap: 6px; margin-top: 10px; }
-.reply-row input { font-size: 13px; }
+.reply-row textarea {
+  font-size: 13px; resize: none; overflow-y: auto; min-height: 32px;
+  line-height: 1.45; /* one line at rest, grows to ~4 with Shift+Enter */
+}
 .card .actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; align-items: center; }
 
 /* card header actions (accept / reject — visible even collapsed) */
@@ -400,6 +403,37 @@ textarea { resize: vertical; }
 /* suggesting mode: the document is read-only, so the text cursor would lie */
 body.suggesting .tiptap { caret-color: transparent; cursor: default; }
 
+/* --- math (KaTeX) ----------------------------------------------------------
+   Formulas are atoms: one click opens the LaTeX source in an input, because the
+   source is what round-trips to markdown and what agents propose. */
+.math-inline { display: inline; border-radius: 3px; }
+.math-block {
+  display: block; margin: 0.75em 0; text-align: center;
+  padding: 4px 0; overflow-x: auto; overflow-y: hidden;
+}
+/* only the formula itself is clickable — a display block is as wide as the
+   text column, and clicking empty space beside it must still move the caret */
+.math-view { cursor: pointer; border-radius: 3px; padding: 0 2px; }
+.math-block .math-view { display: inline-block; }
+.math-view:hover { background: var(--hl-weak); }
+.math-inline.selected .math-view, .math-block.selected .math-view { background: var(--hl); outline: 1px solid var(--hl-edge); }
+/* before KaTeX lands (and if it never does) the source stays readable */
+.math-view.math-raw { font-family: var(--mono); font-size: 0.92em; color: var(--text-2); }
+.math-view.math-empty { font-family: var(--ui); font-size: 0.85em; color: var(--text-3); }
+/* the source editor: shown in place of the rendering, never both */
+.math-src { display: none; }
+.math-inline.editing .math-view, .math-block.editing .math-view { display: none; }
+.math-inline.editing .math-src, .math-block.editing .math-src {
+  display: inline-block; font-family: var(--mono); font-size: 0.92em;
+  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px;
+  background: var(--input-bg); color: var(--text); outline: none; min-width: 60px;
+}
+.math-block.editing .math-src { display: block; margin: 0 auto; width: min(100%, 46em); text-align: center; }
+.math-tool-label { font-family: var(--doc); font-size: 15px; line-height: 1; }
+/* KaTeX renders its own colours; only the surroundings are ours */
+.katex { font-size: 1.06em; }
+.katex-display { margin: 0; }
+
 /* --- loading skeletons -----------------------------------------------------
    Shown from the first paint (they are in the HTML, not built by JS) so a slow
    load looks like it is working rather than finished-and-empty. */
@@ -982,7 +1016,7 @@ body.suggesting .tiptap { caret-color: transparent; cursor: default; }
   .card { padding: 12px 14px; }
 
   /* 16px+ inputs: anything smaller makes iOS Safari zoom in on focus */
-  input, textarea, .composer-box textarea, .composer-box input, .reply-row input { font-size: 16px; }
+  input, textarea, .composer-box textarea, .composer-box input, .reply-row textarea { font-size: 16px; }
   #suggest-text { min-height: 30vh; }
 
   /* --- selection menu: thumb-sized --- */

client/doc.html

@@ -127,7 +127,7 @@
       <div id="margin-items">
         <div id="composer" class="composer-box hidden">
           <blockquote id="composer-quote"></blockquote>
-          <textarea id="composer-text" rows="3" placeholder="Comment — mention an agent with @handle"></textarea>
+          <textarea id="composer-text" rows="3" placeholder="Comment — @handle to hand it to an agent. Enter sends, Shift+Enter for a new line."></textarea>
           <div id="composer-mentions" class="mention-menu hidden"></div>
           <div class="row">
             <button class="btn small ghost" id="composer-cancel">Cancel</button>

client/src/diff.js

@@ -6,6 +6,7 @@
 export function flattenMarkdown(md) {
   return String(md || '')
     .replace(/```\w*\n?([\s\S]*?)```/g, '$1')
+    .replace(/^\$\$\n?([\s\S]*?)\n?\$\$$/gm, '$1') // display math -> its source
     .replace(/!\[[^\]]*\]\([^)]*\)/g, '[figure]')
     .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
     .replace(/\*\*([^*]+)\*\*/g, '$1')
@@ -20,8 +21,13 @@ export function flattenMarkdown(md) {
     .trim()
 }
 
+// A `$...$` formula is ONE token: its source contains spaces (`\|`, `x + y`), so
+// splitting on whitespace let the diff align *inside* a formula and render half
+// of its LaTeX as inserted text.
+const TOKEN_RE = /(?<!\$)\$(?![\s$])[^$\n]*[^\s$]\$(?!\$)|\S+|\s+/g
+
 function tokenize(s) {
-  return s.match(/\S+|\s+/g) || []
+  return s.match(TOKEN_RE) || []
 }
 
 // Word diff over *styled* segments: [{ text, markKey }], where markKey encodes

client/src/doc.js

@@ -7,6 +7,7 @@ import CollaborationCaret from '@tiptap/extension-collaboration-caret'
 import Image from '@tiptap/extension-image'
 import { TaskList, TaskItem } from '@tiptap/extension-list'
 import { InputRule } from '@tiptap/core'
+import { MathInline, MathBlock, mathPreviewEl, renderMath, loadKatex } from './math.js'
 
 // Typing "[ ] " / "[x] " at the start of a paragraph inside a bullet list item
 // (i.e. the natural "- [ ] ") lifts that item out and turns the list into a
@@ -1145,6 +1146,7 @@ async function openProposalPreview(pid) {
   bar.appendChild(actions)
   const content = el('div', { class: 'proposal-content tiptap' })
   content.innerHTML = markdownToBlocks(p.content_markdown).map(blockToHtml).join('')
+  typesetMathIn(content)
   view.replaceChildren(bar, content)
 }
 
@@ -1218,6 +1220,8 @@ function buildEditor(provider) {
       StarterKit.configure({ undoRedo: false, link: { openOnClick: false } }),
       LayoutImage,
       HtmlBlock,
+      MathInline,
+      MathBlock,
       CheckboxInList,
       TaskItem.configure({ nested: false }),
       Table.configure({ resizable: false }),
@@ -1459,7 +1463,12 @@ function sliceSegments(segments, from, to) {
     const end = pos + seg.text.length
     const s = Math.max(from, pos)
     const e = Math.min(to, end)
-    if (e > s) out.push({ text: seg.text.slice(s - pos, e - pos), attrs: seg.attrs })
+    // a formula slice keeps its latex only when the WHOLE formula is inside the
+    // range: half a formula is not a formula, and renders as its source
+    if (e > s) {
+      const whole = s === pos && e === end
+      out.push({ text: seg.text.slice(s - pos, e - pos), attrs: seg.attrs, ...(seg.math != null && whole ? { math: seg.math } : {}) })
+    }
     pos = end
     if (pos >= to) break
   }
@@ -1484,10 +1493,12 @@ function insWidget(suggId, segments, A, listType = null) {
       const piece = document.createElement('span')
       piece.className = i === 0 ? 'sugg-ins-seg' : 'sugg-ins-li' + (listType === 'orderedList' ? ' ordered' : '')
       piece.innerHTML = inlineHtml(line)
+      typesetMathIn(piece)
       span.appendChild(piece)
     })
   } else {
     span.innerHTML = inlineHtml(segments)
+    typesetMathIn(span)
   }
   wirePreviewLinks(span, suggId)
   return span
@@ -1588,6 +1599,7 @@ function blockInsWidget(suggId, blocks, A) {
   div.className = 'sugg-ins-block' + A
   div.dataset.sugg = suggId
   div.innerHTML = blocks.map(blockToHtml).join('')
+  typesetMathIn(div)
   div.addEventListener('click', () => setActive(suggId))
   wirePreviewLinks(div, suggId)
   return div
@@ -1613,12 +1625,20 @@ function blockCharMap(node, pos) {
     push('[figure]', '', () => pos)
     return { text, map, segs }
   }
+  // a display formula's text is its source, every char anchored to the node
+  if (node.type.name === 'mathBlock') {
+    push(node.attrs.latex || '', '', () => pos)
+    return { text, map, segs }
+  }
   node.descendants((child, childPos) => {
     const base = pos + 1 + childPos
     if (child.isText) {
       push(child.text, pmMarkKey(child.marks), c => base + c)
     } else if (child.type.name === 'image') {
       push('[figure]', '', () => base)
+    } else if (child.type.name === 'mathInline') {
+      // matches the markdown side's `$latex$`, so an edited formula diffs as text
+      push('$' + (child.attrs.latex || '') + '$', '', () => base)
     } else if (child.isBlock && text && !text.endsWith('\n')) {
       push('\n', '', () => base)
     }
@@ -1661,6 +1681,8 @@ function blockDescSegments(b) {
     case 'codeBlock':
     case 'htmlBlock':
       return [plain(b.text || '')]
+    case 'mathBlock':
+      return [plain(b.attrs?.latex || '')]
     case 'image':
       return [plain('[figure]')]
     case 'horizontalRule':
@@ -1710,6 +1732,8 @@ function withMarkKeys(segments) {
 function inlineHtml(segments) {
   return (segments || [])
     .map(s => {
+      // typeset after the string is in the DOM — see typesetMathIn()
+      if (s.math != null) return `<span class="math-inline" data-latex="${esc(s.math)}"><span class="math-view"></span></span>`
       let h = esc(s.text)
       const a = s.attrs || {}
       if (a.code) h = `<code>${h}</code>`
@@ -1722,6 +1746,15 @@ function inlineHtml(segments) {
     .join('')
 }
 
+// Preview HTML is built as a string, so formulas arrive as placeholders that
+// carry their source. This turns them into real typeset math once mounted.
+function typesetMathIn(root) {
+  for (const node of root.querySelectorAll('[data-latex] > .math-view')) {
+    const host = node.parentElement
+    renderMath(node, host.dataset.latex, { display: host.classList.contains('math-block') })
+  }
+}
+
 function blockToHtml(b) {
   switch (b.type) {
     case 'heading':
@@ -1744,6 +1777,8 @@ function blockToHtml(b) {
       return `<iframe class="html-embed" sandbox="allow-scripts allow-popups" referrerpolicy="no-referrer" loading="lazy" srcdoc="${esc(buildEmbedSrcdoc(b.text || ''))}"></iframe>`
     case 'blockquote':
       return `<blockquote><p>${inlineHtml(b.inline)}</p></blockquote>`
+    case 'mathBlock':
+      return `<div class="math-block" data-latex="${esc(b.attrs?.latex || '')}"><span class="math-view"></span></div>`
     case 'horizontalRule':
       return '<hr>'
     case 'image':
@@ -1850,6 +1885,33 @@ function jumpTo(editor, range) {
 
 // --- header toolbar -----------------------------------------------------------
 
+// The toolbar label is the one bit of the UI that has to look like maths
+// without KaTeX being loaded yet.
+function mathToolLabel() {
+  const span = el('span', { class: 'math-tool-label' })
+  span.textContent = '\u2211'
+  return span
+}
+
+// An empty selection opens a display formula on its own line — that is what the
+// button is for. With text selected, the selection is treated as the source, so
+// pasted LaTeX can be promoted in place.
+function insertMath(editor) {
+  const { from, to, empty } = editor.state.selection
+  if (empty) {
+    editor.chain().focus().insertMathBlock('').run()
+    return
+  }
+  const latex = editor.state.doc.textBetween(from, to, ' ').trim().replace(/^\$+|\$+$/g, '')
+  const block = /\n/.test(latex) || latex.length > 60
+  editor
+    .chain()
+    .focus()
+    .deleteSelection()
+    .insertContent(block ? { type: 'mathBlock', attrs: { latex } } : { type: 'mathInline', attrs: { latex } })
+    .run()
+}
+
 function buildHeaderTools(editor) {
   const bar = document.getElementById('header-tools')
   bar.replaceChildren() // rebuilt per page switch
@@ -1891,6 +1953,9 @@ function buildHeaderTools(editor) {
     btn(icon('todo'), 'Checklist', () => editor.chain().focus().toggleTaskList().run(), () => editor.isActive('taskList')),
     btn(icon('table'), 'Insert table', () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()),
     btn('—', 'Divider', () => editor.chain().focus().setHorizontalRule().run()),
+    btn(mathToolLabel(), 'Math — inline $x^2$, or a display formula on its own line', () => insertMath(editor), () =>
+      editor.isActive('mathInline') || editor.isActive('mathBlock')
+    ),
     btn('HTML', 'Embed live HTML (sandboxed)', () =>
       editHtmlOverlay('', html => {
         if (html.trim()) editor.chain().focus().insertContent({ type: 'htmlBlock', attrs: { html } }).run()
@@ -2161,6 +2226,15 @@ function wireComposer() {
     state.autoComposer = null
     renderMargin(window.__editor)
   })
+  // Enter sends, Shift+Enter breaks the line — the messaging convention, and
+  // Enter did nothing here before. The mention menu owns Enter while it is open
+  // (it is picking an agent), and it is wired below, i.e. after this handler.
+  text.addEventListener('keydown', e => {
+    if (e.key !== 'Enter' || e.shiftKey) return
+    if (!document.getElementById('composer-mentions').classList.contains('hidden')) return
+    e.preventDefault()
+    document.getElementById('composer-send').click()
+  })
   document.getElementById('composer-send').addEventListener('click', () => {
     const value = text.value.trim()
     // the box comes pre-mentioned, so a bare "@handle" counts as empty
@@ -2555,17 +2629,28 @@ function messageEl(msg) {
 
 function replyRow(placeholder, onSend) {
   const row = el('div', { class: 'reply-row' })
-  const input = el('input', { placeholder })
+  // a textarea, not an input: replies need Shift+Enter to add a line too, and
+  // it grows with the text instead of scrolling a one-line box
+  const input = el('textarea', { placeholder, rows: '1' })
   const menu = el('div', { class: 'mention-menu hidden' })
   const send = el('button', { class: 'iconbtn', title: 'Send' })
   send.appendChild(icon('send'))
+  const autoGrow = () => {
+    input.style.height = 'auto'
+    input.style.height = `${Math.min(input.scrollHeight, 140)}px`
+  }
   send.addEventListener('click', () => {
     if (!input.value.trim()) return
     onSend(input.value.trim())
     input.value = ''
+    autoGrow()
   })
+  input.addEventListener('input', autoGrow)
   input.addEventListener('keydown', e => {
-    if (e.key === 'Enter' && menu.classList.contains('hidden')) send.click()
+    if (e.key !== 'Enter' || e.shiftKey) return
+    if (!menu.classList.contains('hidden')) return // the mention menu is picking
+    e.preventDefault()
+    send.click()
   })
   row.append(input, send)
   wireMentionMenu(input, menu)
@@ -2735,15 +2820,22 @@ function wireUndoReopens(editor) {
 function inlineToPmContent(segments) {
   return (segments || [])
     .filter(seg => seg.text)
-    .map(seg => ({
-      type: 'text',
-      text: seg.text,
-      marks: Object.entries(seg.attrs || {}).map(([type, attrs]) => ({ type, attrs })),
-    }))
+    .map(seg =>
+      // math is an atom carrying its source, not marked-up text
+      seg.math != null
+        ? { type: 'mathInline', attrs: { latex: seg.math } }
+        : {
+            type: 'text',
+            text: seg.text,
+            marks: Object.entries(seg.attrs || {}).map(([type, attrs]) => ({ type, attrs })),
+          }
+    )
 }
 
 function blockToPmJSON(block) {
   switch (block.type) {
+    case 'mathBlock':
+      return { type: 'mathBlock', attrs: { latex: block.attrs?.latex || '' } }
     case 'heading':
       return { type: 'heading', attrs: { level: block.attrs?.level || 1 }, content: inlineToPmContent(block.inline) }
     case 'codeBlock':

client/src/math.js

@@ -0,0 +1,295 @@
+// LaTeX math: an inline atom (`$x^2$`) and a display block (`$$...$$`), both
+// holding their source in a `latex` attribute and typeset with KaTeX.
+//
+// KaTeX is ~270KB and most documents have no math, so it is NOT in the main
+// bundle: the first math node on the page pulls it in, and every node renders
+// its source as a placeholder until it lands.
+import { Node, InputRule } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
+import { el } from './common.js'
+
+// --- the lazy KaTeX loader ---------------------------------------------------
+
+let katexPromise = null
+
+function assetVersion() {
+  return window.__BOOT?.build_id ? `?v=${window.__BOOT.build_id}` : ''
+}
+
+export function loadKatex() {
+  if (window.katex) return Promise.resolve(window.katex)
+  if (katexPromise) return katexPromise
+  katexPromise = new Promise((resolve, reject) => {
+    const v = assetVersion()
+    if (!document.getElementById('katex-css')) {
+      const css = el('link', { id: 'katex-css', rel: 'stylesheet', href: `/katex.css${v}` })
+      document.head.appendChild(css)
+    }
+    const script = document.createElement('script')
+    script.src = `/katex.js${v}`
+    script.onload = () => (window.katex ? resolve(window.katex) : reject(new Error('katex did not load')))
+    script.onerror = () => reject(new Error('katex failed to load'))
+    document.head.appendChild(script)
+  })
+  // a failed fetch must not poison every later attempt — the nodes stay
+  // readable as source, and the next one retries
+  katexPromise.catch(() => {
+    katexPromise = null
+  })
+  return katexPromise
+}
+
+// Typeset `latex` into `target`. Renders the source as a placeholder first, so
+// the formula is always readable — including when KaTeX never arrives.
+export function renderMath(target, latex, { display = false } = {}) {
+  const src = latex || ''
+  target.textContent = display ? `$$${src}$$` : `$${src}$`
+  target.classList.add('math-raw')
+  if (!src.trim()) {
+    target.classList.remove('math-raw')
+    target.textContent = display ? '$$ $$' : 'empty formula'
+    target.classList.add('math-empty')
+    return
+  }
+  loadKatex()
+    .then(katex => {
+      // throwOnError:false makes KaTeX render bad input in red rather than
+      // blowing up the editor; the message goes in the tooltip
+      katex.render(src, target, { displayMode: display, throwOnError: false, errorColor: 'var(--danger)', output: 'html' })
+      target.classList.remove('math-raw')
+    })
+    .catch(() => {}) // placeholder text stands
+}
+
+// --- shared node behaviour --------------------------------------------------
+
+// A formula inserted by the user (toolbar, `$$`, `$…$`) should open its source
+// editor immediately — an empty formula is useless until it has one. But a
+// NodeView is also created whenever ProseMirror re-renders a node: after an
+// undo, an accepted suggestion, a remote edit. Auto-opening on those would yank
+// the caret out of whatever the user was typing, so the intent is recorded at
+// the insertion site instead of guessed at render time.
+let insertedAt = 0
+
+function markUserInsert() {
+  insertedAt = Date.now()
+}
+
+function isUserInsert() {
+  return Date.now() - insertedAt < 400
+}
+
+// Clicking a formula opens its source in a plain input; Enter or blur commits,
+// Escape reverts. Editing the source beats a WYSIWYG formula editor here: the
+// source is what round-trips to markdown and what agents propose.
+function mathNodeView({ display }) {
+  return ({ node, getPos, editor }) => {
+    let current = node
+    let editing = false
+    const wrap = el(display ? 'div' : 'span', {
+      class: display ? 'math-block' : 'math-inline',
+      contenteditable: 'false',
+    })
+    const view = el('span', { class: 'math-view' })
+    const input = el('input', { class: 'math-src', spellcheck: 'false' })
+    input.type = 'text'
+    wrap.append(view, input)
+
+    const paint = () => renderMath(view, current.attrs.latex, { display })
+
+    // Leaving the source editor must land the caret just AFTER the formula.
+    // Without this the selection stays on the atom itself, and the next Enter
+    // splits the paragraph at the formula instead of starting a new line.
+    const caretAfter = tr => {
+      const pos = typeof getPos === 'function' ? getPos() : null
+      if (pos == null) return tr
+      const size = tr.doc.nodeAt(pos)?.nodeSize ?? 1
+      try {
+        return tr.setSelection(TextSelection.near(tr.doc.resolve(Math.min(pos + size, tr.doc.content.size))))
+      } catch {
+        return tr
+      }
+    }
+
+    const stopEditing = ({ save }) => {
+      if (!editing) return
+      editing = false
+      wrap.classList.remove('editing')
+      const latex = input.value.trim()
+      const pos = typeof getPos === 'function' ? getPos() : null
+      let tr = editor.view.state.tr
+      if (save && pos != null && latex !== current.attrs.latex) {
+        tr = tr.setNodeMarkup(pos, undefined, { ...current.attrs, latex })
+      }
+      editor.view.dispatch(caretAfter(tr))
+      paint()
+    }
+
+    const startEditing = () => {
+      if (editing || !editor.isEditable) return
+      editing = true
+      wrap.classList.add('editing')
+      input.value = current.attrs.latex || ''
+      // width follows the source so the line does not jump around while typing
+      const size = () => (input.size = Math.max(6, Math.min(input.value.length + 2, 60)))
+      size()
+      input.oninput = size
+      input.focus()
+      input.select()
+    }
+
+    // The hit target is the rendered formula, NOT the wrapper: a display block
+    // spans the full text column, and making that clickable meant a click
+    // anywhere on the line — or in the empty space beside a short formula —
+    // opened the source editor instead of placing the caret.
+    view.addEventListener('click', e => {
+      if (editing) return
+      e.preventDefault()
+      startEditing()
+    })
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        stopEditing({ save: true })
+        editor.view.focus()
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        stopEditing({ save: false })
+        editor.view.focus()
+      }
+      e.stopPropagation() // the document's own shortcuts must not fire here
+    })
+    input.addEventListener('blur', () => stopEditing({ save: true }))
+
+    paint()
+    if (!current.attrs.latex && editor.isEditable && isUserInsert()) {
+      setTimeout(() => {
+        if (!current.attrs.latex && isUserInsert()) startEditing()
+      }, 0)
+    }
+    return {
+      dom: wrap,
+      // the input is not part of the document — ProseMirror must keep out
+      ignoreMutation: () => true,
+      stopEvent: () => editing,
+      selectNode() {
+        wrap.classList.add('selected')
+      },
+      deselectNode() {
+        wrap.classList.remove('selected')
+      },
+      update(updated) {
+        if (updated.type.name !== current.type.name) return false
+        const changed = updated.attrs.latex !== current.attrs.latex
+        current = updated
+        if (changed && !editing) paint()
+        return true
+      },
+      destroy() {
+        input.oninput = null
+      },
+    }
+  }
+}
+
+// --- the nodes --------------------------------------------------------------
+
+export const MathInline = Node.create({
+  name: 'mathInline',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return { latex: { default: '' } }
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-math]', getAttrs: n => ({ latex: n.getAttribute('data-latex') || '' }) }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['span', { 'data-math': 'inline', 'data-latex': HTMLAttributes.latex || '' }]
+  },
+  addNodeView() {
+    return mathNodeView({ display: false })
+  },
+  addCommands() {
+    return {
+      insertMathInline:
+        (latex = '') =>
+        ({ chain }) => {
+          if (!latex) markUserInsert()
+          return chain().insertContent({ type: 'mathInline', attrs: { latex } }).run()
+        },
+    }
+  },
+  addInputRules() {
+    return [
+      // typing `$x^2$` turns into a formula as soon as the closing $ lands.
+      // Same strictness as the markdown tokenizer, so money is left alone.
+      new InputRule({
+        find: /(?<!\$)\$(?![\s$])([^$\n]*[^\s$])\$$/,
+        handler: ({ state, range, match, chain }) => {
+          const latex = match[1]
+          if (!latex.trim()) return
+          chain()
+            .deleteRange(range)
+            .insertContent({ type: 'mathInline', attrs: { latex } })
+            .run()
+          void state
+        },
+      }),
+    ]
+  },
+})
+
+export const MathBlock = Node.create({
+  name: 'mathBlock',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addAttributes() {
+    return { latex: { default: '' } }
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-math-block]', getAttrs: n => ({ latex: n.getAttribute('data-latex') || '' }) }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['div', { 'data-math-block': '', 'data-latex': HTMLAttributes.latex || '' }]
+  },
+  addNodeView() {
+    return mathNodeView({ display: true })
+  },
+  addCommands() {
+    return {
+      insertMathBlock:
+        (latex = '') =>
+        ({ chain }) => {
+          if (!latex) markUserInsert()
+          return chain().insertContent({ type: 'mathBlock', attrs: { latex } }).run()
+        },
+    }
+  },
+  addInputRules() {
+    return [
+      // `$$` on an empty line opens a display formula ready to type into
+      new InputRule({
+        find: /^\$\$$/,
+        handler: ({ range, chain }) => {
+          markUserInsert()
+          chain().deleteRange(range).insertContent({ type: 'mathBlock', attrs: { latex: '' } }).run()
+        },
+      }),
+    ]
+  },
+})
+
+// Preview/insertion panels build plain HTML rather than a live editor, so they
+// need a detached element that typesets itself once KaTeX is around.
+export function mathPreviewEl(latex, { display = false } = {}) {
+  const wrap = el(display ? 'div' : 'span', { class: display ? 'math-block' : 'math-inline' })
+  const view = el('span', { class: 'math-view' })
+  wrap.appendChild(view)
+  renderMath(view, latex, { display })
+  return wrap
+}

package-lock.json

@@ -20,6 +20,7 @@
         "@tiptap/y-tiptap": "latest",
         "express": "latest",
         "express-ws": "latest",
+        "katex": "latest",
         "ws": "latest",
         "y-prosemirror": "latest",
         "y-protocols": "latest",
@@ -1066,6 +1067,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -1529,6 +1539,22 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
+    "node_modules/katex": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.18.1.tgz",
+      "integrity": "sha512-Td8GCYSxDAoMhHOlKmCFMJ/hz5qlAAb71n66Dryw9nfCVfumLo7nhuotbvKom/XPADmrYC3O5QR71EPq4DarJQ==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",

package.json

@@ -24,7 +24,8 @@
     "ws": "latest",
     "@tiptap/extension-image": "latest",
     "@tiptap/y-tiptap": "latest",
-    "@tiptap/extension-table": "latest"
+    "@tiptap/extension-table": "latest",
+    "katex": "latest"
   },
   "devDependencies": {
     "esbuild": "latest",

scripts/build.js

@@ -42,6 +42,18 @@ for (const f of fs.readdirSync(path.join(root, 'client/fonts'))) {
   fs.copyFileSync(path.join(root, 'client/fonts', f), path.join(pub, 'fonts', f))
 }
 
+// KaTeX, kept OUT of the main bundle: it is only fetched by a page that
+// actually has math on it. The prebuilt UMD file already assigns window.katex,
+// so there is nothing to re-bundle. Its stylesheet points at fonts/KaTeX_*,
+// which resolves against /fonts — the same directory, already immutable-cached.
+// Only woff2 is copied; every browser that runs this app prefers it.
+const katexDist = path.join(root, 'node_modules/katex/dist')
+fs.copyFileSync(path.join(katexDist, 'katex.min.js'), path.join(pub, 'katex.js'))
+fs.copyFileSync(path.join(katexDist, 'katex.min.css'), path.join(pub, 'katex.css'))
+for (const f of fs.readdirSync(path.join(katexDist, 'fonts'))) {
+  if (f.endsWith('.woff2')) fs.copyFileSync(path.join(katexDist, 'fonts', f), path.join(pub, 'fonts', f))
+}
+
 fs.writeFileSync(path.join(pub, 'build-id'), buildId)
 
 // Pre-compress the bundles. The editor bundle is ~640KB raw and ~160KB brotli,

server/api.js

@@ -491,6 +491,7 @@ Work loop — repeat until the user tells you to stop:
    itself (replaces the addressed block(s); markdown supports
    paragraphs, # headings, - lists, - [ ]/- [x] task lists, GFM tables (| a | b |
    with a | --- | --- | separator row), \`\`\`code\`\`\`, **bold**, *italic*, [links](url),
+   LaTeX math (inline \$x^2\$, or \$\$...\$\$ on its own line for a display formula),
    and live HTML embeds — see below):
    curl -s $AUTH -X POST "${HOST}/api/docs/<doc_id>/suggestions" \\
      -H 'content-type: application/json' \\

server/collab.js

@@ -791,9 +791,35 @@ function yInlineText(segments) {
   return t
 }
 
+// Inline content is usually one XmlText run, but a formula is an element, so a
+// paragraph containing math becomes an alternating list of text runs and math
+// elements. Each text run is built on its own — formatting must not leak across
+// a formula, and the offsets above are per-run.
+function yInlineChildren(segments) {
+  const out = []
+  let run = []
+  const flush = () => {
+    if (run.length) out.push(yInlineText(run))
+    run = []
+  }
+  for (const seg of segments || []) {
+    if (seg.math != null) {
+      flush()
+      const m = new Y.XmlElement('mathInline')
+      m.setAttribute('latex', seg.math)
+      out.push(m)
+    } else if (seg.text) {
+      run.push(seg)
+    }
+  }
+  flush()
+  // an empty paragraph still needs its text node, or the editor sees no content
+  return out.length ? out : [yInlineText([])]
+}
+
 function paragraphOf(segments) {
   const p = new Y.XmlElement('paragraph')
-  p.insert(0, [yInlineText(segments)])
+  p.insert(0, yInlineChildren(segments))
   return p
 }
 
@@ -802,7 +828,12 @@ export function buildYBlock(block) {
     case 'heading': {
       const el = new Y.XmlElement('heading')
       el.setAttribute('level', block.attrs?.level || 1)
-      el.insert(0, [yInlineText(block.inline)])
+      el.insert(0, yInlineChildren(block.inline))
+      return el
+    }
+    case 'mathBlock': {
+      const el = new Y.XmlElement('mathBlock')
+      el.setAttribute('latex', block.attrs?.latex || '')
       return el
     }
     case 'codeBlock': {

server/md.js

@@ -1,6 +1,6 @@
 // Markdown <-> ProseMirror JSON helpers. Deliberately minimal: paragraphs,
 // headings 1-3, bullet/ordered lists (flat), code blocks, blockquotes,
-// horizontal rules; inline bold/italic/code/strike/links.
+// horizontal rules, $-delimited math; inline bold/italic/code/strike/links.
 
 // --- ProseMirror JSON -> markdown ---
 
@@ -28,6 +28,9 @@ export function blockToMarkdown(node) {
       return '```html-embed\n' + (node.attrs?.html || '') + '\n```'
     case 'blockquote':
       return (node.content || []).map(blockToMarkdown).join('\n\n').split('\n').map(l => '> ' + l).join('\n')
+    case 'mathBlock':
+      // canonical fenced form; the single-line `$$x$$` spelling also parses
+      return '$$\n' + (node.attrs?.latex || '').trim() + '\n$$'
     case 'horizontalRule':
       return '---'
     case 'image':
@@ -74,6 +77,8 @@ function inlineToMarkdown(content) {
   if (!content) return ''
   return content.map(n => {
     if (n.type === 'hardBreak') return '  \n'
+    // an inline atom: its markdown IS its source, and it carries no marks
+    if (n.type === 'mathInline') return '$' + (n.attrs?.latex || '') + '$'
     let text = n.text || ''
     for (const mark of n.marks || []) {
       if (mark.type === 'bold') text = `**${text}**`
@@ -110,6 +115,27 @@ export function markdownToBlocks(md) {
     }
     if (/^(---|\*\*\*)\s*$/.test(line.trim())) { blocks.push({ type: 'horizontalRule' }); i++; continue }
 
+    // display math: `$$ ... $$` on one line, or fenced over several
+    if (line.trim().startsWith('$$')) {
+      const oneLine = line.trim().match(/^\$\$(.+)\$\$$/)
+      if (oneLine) {
+        blocks.push({ type: 'mathBlock', attrs: { latex: oneLine[1].trim() } })
+        i++
+        continue
+      }
+      const body = []
+      i++
+      while (i < lines.length && !lines[i].trim().endsWith('$$')) { body.push(lines[i]); i++ }
+      if (i < lines.length) {
+        // the closing line may carry the last of the formula: `... \end{aligned}$$`
+        const tail = lines[i].trim().replace(/\$\$$/, '')
+        if (tail) body.push(tail)
+        i++
+      }
+      blocks.push({ type: 'mathBlock', attrs: { latex: body.join('\n').trim() } })
+      continue
+    }
+
     const image = line.match(/^!\[([^\]]*)\]\(([^)\s]+)\)\s*$/)
     if (image) {
       blocks.push({ type: 'image', attrs: { alt: image[1] || null, src: image[2] } })
@@ -186,7 +212,7 @@ export function markdownToBlocks(md) {
 
     // paragraph: consume until blank line or block marker
     const body = []
-    while (i < lines.length && lines[i].trim() && !/^(#{1,6}\s|```|\s*[-*]\s|\s*\d+[.)]\s|>\s?|---\s*$)/.test(lines[i])) {
+    while (i < lines.length && lines[i].trim() && !/^(#{1,6}\s|```|\$\$|\s*[-*]\s|\s*\d+[.)]\s|>\s?|---\s*$)/.test(lines[i])) {
       body.push(lines[i])
       i++
     }
@@ -205,11 +231,37 @@ export function markdownToBlocks(md) {
 // containing a filename underscore never matched and rendered as plain text.
 const INLINE_RE = /(\*\*([^*]+)\*\*)|(\*([^*]+)\*)|(~~([^~]+)~~)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)\s]+)\))|((?<![A-Za-z0-9])__(?=\S)(.+?)(?<=\S)__(?![A-Za-z0-9]))|((?<![A-Za-z0-9])_(?=\S)(?!_)(.+?)(?<=\S)_(?![A-Za-z0-9]))/
 
+// Inline math, `$...$`. Matched BEFORE any emphasis so a formula's `*`, `_`,
+// backticks and brackets cannot be eaten as markdown — `$\{x\}_{i}$ and
+// $\{y\}_{j}$` used to turn into italics spanning both formulas.
+//
+// The delimiters are deliberately strict, because `$` is also money: no space
+// just inside either delimiter (so "costs $5 and $10 more" is left alone), no
+// newline, and never adjacent to a second `$` (so a `$$...$$` display block is
+// not chewed into inline math from its second character).
+const MATH_RE = /(?<!\$)\$(?![\s$])([^$\n]*[^\s$])\$(?!\$)/
+
+// A math segment carries BOTH its source text and its latex: every consumer
+// that only reads `.text` (diffing, signatures, plain-text descriptions) then
+// sees `$x^2$` and behaves correctly, and only the few places that build real
+// nodes — ProseMirror JSON, Yjs XML, preview HTML — look at `.math`.
+function mathSegment(latex) {
+  return { text: '$' + latex + '$', attrs: {}, math: latex }
+}
+
 export function tokenizeInline(text) {
   const segments = []
   let rest = text
   while (rest) {
+    const math = rest.match(MATH_RE)
     const m = rest.match(INLINE_RE)
+    // whichever opens first wins; math breaks ties so `$a * b$` stays math
+    if (math && (!m || math.index <= m.index)) {
+      if (math.index > 0) segments.push({ text: rest.slice(0, math.index), attrs: {} })
+      segments.push(mathSegment(math[1]))
+      rest = rest.slice(math.index + math[0].length)
+      continue
+    }
     if (!m) { segments.push({ text: rest, attrs: {} }); break }
     if (m.index > 0) segments.push({ text: rest.slice(0, m.index), attrs: {} })
     if (m[1]) segments.push({ text: m[2], attrs: { bold: {} } })

test/browser.js

@@ -24,6 +24,25 @@ const server = spawn('node', ['server/index.js'], {
 })
 server.stderr.on('data', d => process.stderr.write('[server] ' + d))
 
+// Put the caret at the end of the document without depending on where things
+// happen to sit: Playwright clicks an element's centre, and if an atom node (a
+// formula, an image) is there, the click opens THAT instead of placing a caret.
+async function focusDocEnd(page) {
+  // Put the caret at the end of the document, reliably. Two traps here:
+  //  - typing before the document has synced loses those keystrokes, because
+  //    the remote state then replaces them (the skeleton lifting is the signal);
+  //  - editor.commands.focus() sets the selection but does NOT take DOM focus
+  //    in headless Chromium, so the keystrokes go to the body instead.
+  // Hence a real click, at a point that is always text: the title line. Clicking
+  // the element's centre would be a gamble — an atom (a formula, an image)
+  // sitting there swallows the click and every keystroke after it.
+  await page.waitForFunction(() => document.getElementById('doc-skeleton')?.classList.contains('hidden'), null, { timeout: 20000 })
+  await page.waitForFunction(() => window.__editor && !window.__editor.isDestroyed)
+  await page.click('.tiptap', { position: { x: 24, y: 10 } })
+  await page.waitForFunction(() => window.__editor?.isFocused, null, { timeout: 5000 })
+  await page.keyboard.press('Control+End')
+}
+
 const consoleErrors = []
 
 async function main() {
@@ -131,6 +150,48 @@ async function main() {
   await page.click('#share-btn') // close
   console.log('✓ share panel: add collaborator')
 
+  // --- LaTeX math: typed, typeset by KaTeX, source editable ---
+  await focusDocEnd(page)
+  await page.keyboard.press('Enter')
+  await page.keyboard.type('Einstein said $E = mc^2$ and meant it.')
+  await page.waitForSelector('.tiptap .math-inline', { timeout: 5000 })
+  // KaTeX is lazy: it must NOT be in the main bundle, and must arrive on demand
+  await waitFor(async () => await page.evaluate(() => !!window.katex), 'katex loads on demand')
+  const katexFetches = await page.evaluate(() =>
+    performance.getEntriesByType('resource').filter(r => /katex\.(js|css)/.test(r.name)).map(r => r.name.split('/').pop())
+  )
+  assert.equal(katexFetches.length, 2, 'katex js + css fetched separately from the main bundle: ' + katexFetches)
+  await page.waitForSelector('.tiptap .math-inline .katex', { timeout: 5000 })
+  const rendered = await page.textContent('.tiptap .math-inline .katex')
+  assert.ok(rendered.includes('E') && rendered.includes('mc'), 'formula is typeset, not raw source: ' + rendered)
+  assert.ok(!(await page.textContent('.tiptap')).includes('$E = mc^2$'), 'the $ delimiters are gone from the text')
+
+  // clicking a formula opens its LaTeX source; Enter commits the edit
+  await page.click('.tiptap .math-inline .math-view')
+  await page.waitForSelector('.tiptap .math-inline.editing .math-src', { timeout: 5000 })
+  assert.equal(await page.inputValue('.math-inline.editing .math-src'), 'E = mc^2', 'the source is what you edit')
+  await page.fill('.math-inline.editing .math-src', 'E = mc^3')
+  await page.keyboard.press('Enter')
+  await waitFor(async () => (await page.textContent('.tiptap .math-inline .katex')).includes('mc'), 'edited formula re-renders')
+  assert.ok(!(await page.$('.math-inline.editing')), 'Enter closes the source editor')
+
+  // a display formula from $$ on its own line
+  await focusDocEnd(page) // the caret was in the previous formula's source input
+  await page.keyboard.press('Enter')
+  await page.keyboard.type('$$')
+  await page.waitForSelector('.tiptap .math-block', { timeout: 5000 })
+  await page.waitForSelector('.tiptap .math-block.editing .math-src', { timeout: 5000 })
+  await page.fill('.math-block.editing .math-src', '\\int_0^1 x^2 dx')
+  await page.keyboard.press('Enter')
+  await page.waitForSelector('.tiptap .math-block .katex-display', { timeout: 5000 })
+  console.log('✓ math: $x$ typesets via lazily-loaded KaTeX, source click-to-edit, $$ display block')
+
+  // it must survive a reload — i.e. it is really in the shared document
+  await page.reload()
+  await page.waitForSelector('.tiptap .math-inline .katex', { timeout: 15000 })
+  await page.waitForSelector('.tiptap .math-block .katex-display', { timeout: 15000 })
+  console.log('✓ math persists across a reload (stored in the collaborative doc)')
+
   // --- loading skeleton ---
   const docHtml = await (await page.request.get(page.url())).text()
   assert.ok(docHtml.includes('id="doc-skeleton"') && (docHtml.match(/sk-line/g) || []).length > 3,
@@ -148,8 +209,7 @@ async function main() {
   console.log('✓ loading: skeleton sheet ships in the shell and lifts after sync')
 
   // --- type into the editor ---
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.type('The quick brown fox jumps over the lazy dog.')
   await waitFor(async () => (await page.textContent('.tiptap')).includes('quick brown fox'), 'typed text')
   console.log('✓ typing works')
@@ -174,6 +234,44 @@ async function main() {
   await page.waitForSelector('.tiptap .comment-hl', { timeout: 5000 })
   console.log('✓ comment card created: chip + text highlight visible')
 
+  // --- Enter sends a comment, Shift+Enter adds a line ---
+  await selectText(page, 'brown fox jumps')
+  await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
+  await page.click('#composer-text')
+  await page.fill('#composer-text', '')
+  await page.keyboard.type('first line')
+  await page.keyboard.down('Shift')
+  await page.keyboard.press('Enter')
+  await page.keyboard.up('Shift')
+  await page.keyboard.type('second line')
+  const twoLines = await page.inputValue('#composer-text')
+  assert.ok(twoLines.includes('\n'), 'Shift+Enter adds a newline: ' + JSON.stringify(twoLines))
+  assert.ok(await page.isVisible('#composer'), 'Shift+Enter does not send')
+  await page.keyboard.press('Enter')
+  await waitFor(async () => await page.isHidden('#composer'), 'Enter sends the comment')
+  await waitFor(async () => (await page.textContent('#margin-items')).includes('second line'), 'both lines posted')
+  console.log('✓ comment composer: Enter sends, Shift+Enter adds a line')
+
+  // the reply box behaves the same way
+  await page.click('.card.thread')
+  await page.waitForSelector('.card.thread.expanded .reply-row textarea', { timeout: 5000 })
+  const replyBox = '.card.thread.expanded .reply-row textarea'
+  await page.click(replyBox)
+  await page.keyboard.type('reply one')
+  await page.keyboard.down('Shift')
+  await page.keyboard.press('Enter')
+  await page.keyboard.up('Shift')
+  await page.keyboard.type('reply two')
+  assert.ok((await page.inputValue(replyBox)).includes('\n'), 'Shift+Enter adds a line in a reply')
+  await page.keyboard.press('Enter')
+  await waitFor(async () => (await page.textContent('.card.thread')).includes('reply two'), 'Enter sends the reply')
+  assert.equal(await page.inputValue(replyBox), '', 'the reply box clears after sending')
+  // resolve it again: later assertions count the open threads, and this test's
+  // own thread would otherwise look like a second discussion
+  await page.click('.card.thread.expanded .resolve-btn')
+  await waitFor(async () => (await page.$$('.card.thread')).length === 1, 'this test cleans up its thread')
+  console.log('✓ reply box: Enter sends, Shift+Enter adds a line')
+
   // --- @ menu: arrows pick an agent, no mouse needed ---
   await selectText(page, 'over the lazy')
   await page.waitForSelector('#composer:not(.hidden)', { timeout: 5000 })
@@ -239,17 +337,23 @@ async function main() {
 
   // inline track-changes rendering in the document
   await page.waitForSelector('.tiptap .sugg-ins', { timeout: 5000 })
-  const insText = await page.textContent('.tiptap .sugg-ins')
-  assert.ok(insText.includes('energetic'), 'inserted words shown inline: ' + insText)
-  const delText = await page.textContent('.tiptap .sugg-del')
-  assert.ok(delText.includes('lazy'), 'deleted words struck through inline: ' + delText)
+  // wait for the decoration set to settle: the widgets appear as it is rebuilt,
+  // so reading the first paint was always a race
+  await waitFor(
+    async () => (await page.evaluate(() => [...document.querySelectorAll('.tiptap .sugg-ins')].map(n => n.textContent).join(' '))).includes('energetic'),
+    'inserted words shown inline'
+  )
+  await waitFor(
+    async () => (await page.evaluate(() => [...document.querySelectorAll('.tiptap .sugg-del')].map(n => n.textContent).join(' '))).includes('lazy'),
+    'deleted words struck through inline'
+  )
   // slim card: accept/reject in the header, no diff repetition
   assert.ok(await page.$('.card.suggestion .accept-btn'), 'accept button in card header')
   assert.ok(!(await page.$('.card.suggestion .udiff')), 'card does not repeat the diff')
   console.log('✓ suggestion rendered inline (strikethrough + insertion); card is slim')
 
   // --- discuss the suggestion (guide the agent) ---
-  await page.fill('.card.suggestion .reply-row input', '@ui-agent could you keep the dog lazy though?')
+  await page.fill('.card.suggestion .reply-row textarea', '@ui-agent could you keep the dog lazy though?')
   await page.click('.card.suggestion .reply-row button')
   await waitFor(async () => (await page.textContent('.card.suggestion')).includes('keep the dog lazy'), 'discussion message')
   // the discussion thread must NOT appear as a separate card
@@ -340,8 +444,8 @@ async function main() {
   fs.writeFileSync(`${SHOT}/test.png`, png)
   const [chooser] = await Promise.all([page.waitForEvent('filechooser'), page.click('#image-btn')])
   await chooser.setFiles(`${SHOT}/test.png`)
-  await page.waitForSelector('.tiptap img', { timeout: 10000 })
-  const src = await page.getAttribute('.tiptap img', 'src')
+  await page.waitForSelector('.tiptap img:not(.ProseMirror-separator)', { timeout: 10000 })
+  const src = await page.getAttribute('.tiptap img:not(.ProseMirror-separator)', 'src')
   assert.ok(src.startsWith('/files/'), 'image served from /files: ' + src)
   const imgRes = await page.evaluate(async u => (await fetch(u)).status, src)
   assert.equal(imgRes, 200, 'image fetchable')
@@ -350,14 +454,13 @@ async function main() {
   // --- reply + resolve on the standalone thread ---
   await page.click('.card.thread')
   await page.waitForSelector('.card.thread.expanded', { timeout: 5000 })
-  await page.fill('.card.thread .reply-row input', 'looks good, thanks!')
+  await page.fill('.card.thread .reply-row textarea', 'looks good, thanks!')
   await page.click('.card.thread .reply-row button')
   await waitFor(async () => (await page.textContent('.card.thread')).includes('looks good'), 'reply visible')
   console.log('✓ reply works')
 
   // --- list scenario: agent adds one item, only that item shows as inserted ---
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.press('Enter')
   await page.keyboard.type('- alpha')
   await page.keyboard.press('Enter')
@@ -383,8 +486,7 @@ async function main() {
   const delSpans = await page.$$eval('.tiptap .sugg-del', els => els.map(e => e.textContent).filter(t => ['alpha', 'beta', 'gamma'].some(w => t.includes(w))))
   assert.equal(delSpans.length, 0, 'unchanged list items are NOT struck through: ' + JSON.stringify(delSpans))
   // typing a new block right after the suggested range must not get highlighted
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.press('Enter')
   await page.keyboard.press('Enter') // second Enter exits the list into a fresh paragraph
   await page.keyboard.type('untouched trailing line')
@@ -436,8 +538,7 @@ async function main() {
   ]
   // its own paragraph, verified to be a standalone block: the point of these
   // cases is that ONLY the formatting differs from the replacement markdown
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.press('Enter')
   await page.keyboard.type('A paragraph to link up here.')
   await waitFor(async () => (await page.textContent('.tiptap')).includes('A paragraph to link up here.'), 'mark-case paragraph typed')
@@ -532,8 +633,7 @@ async function main() {
   console.log('✓ dissimilar rewrites: whole-block strike + formatted panel (no raw blob)')
 
   // --- typing at a suggestion boundary pushes the insertion panel down ---
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.press('Enter')
   await page.keyboard.type('ordering base line')
   await page.waitForTimeout(400)
@@ -585,8 +685,7 @@ async function main() {
   console.log('✓ zoom controls')
 
   // --- undo / redo ---
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.waitForTimeout(600)
   await page.keyboard.type(' UNDOME')
   await waitFor(async () => (await page.textContent('.tiptap')).includes('UNDOME'), 'typed marker')
@@ -601,8 +700,7 @@ async function main() {
 
   // "- [ ] " markdown shortcut converts to a real task list (done last so it
   // doesn't perturb the earlier suggestion tests on this doc)
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.press('Enter')
   await page.keyboard.type('- [ ] shortcut task')
   await waitFor(async () => !!(await page.$('.tiptap ul[data-type="taskList"] input')), '"- [ ] " creates a task list')
@@ -694,7 +792,7 @@ async function main() {
   console.log('✓ comment resolve without opening')
 
   // image bubble: width + alignment
-  const img = await page.$('.tiptap img')
+  const img = await page.$('.tiptap img:not(.ProseMirror-separator)')
   await img.scrollIntoViewIfNeeded()
   await img.click()
   await page.waitForTimeout(400)
@@ -706,7 +804,7 @@ async function main() {
     await page.waitForTimeout(300)
   }
   const imgAttrs = await page.evaluate(() => {
-    const i = document.querySelector('.tiptap img')
+    const i = document.querySelector('.tiptap img:not(.ProseMirror-separator)')
     return { style: i.getAttribute('style') || '', align: i.getAttribute('data-align') }
   })
   assert.ok(imgAttrs.style.includes('50%') && imgAttrs.align === 'center', 'image resized + centered: ' + JSON.stringify(imgAttrs))
@@ -720,8 +818,7 @@ async function main() {
   assert.deepEqual(stLink, { text: 'Structure', hasIcon: true }, 'structure link polished: ' + JSON.stringify(stLink))
 
   // [[ cross-reference: autocomplete inserts a page link
-  await page.click('.tiptap')
-  await page.keyboard.press('Control+End')
+  await focusDocEnd(page)
   await page.keyboard.press('Enter')
   await page.keyboard.type('See also [[not')
   await waitFor(async () => !(await page.evaluate(() => document.getElementById('pagelink-menu').classList.contains('hidden'))), 'pagelink menu appears')

test/smoke.js

@@ -596,6 +596,42 @@ async function main() {
   await api('dev:alice', `/api/docs/${ttProj.id}`, { method: 'DELETE' })
   console.log('✓ task lists + GFM tables: agent suggestion, accept, markdown round-trip')
 
+  // 11g-math. LaTeX survives the whole agent path: markdown -> Yjs -> markdown
+  const mProj = await api('dev:alice', '/api/docs', { method: 'POST', body: { title: 'Math Smoke' } })
+  await api('dev:alice', `/api/docs/${mProj.id}/share`, { method: 'POST', body: { username: 'bob' } })
+  const mSnap = await api(AGENT, `/api/docs/${mProj.id}`)
+  assert.ok(mSnap.blocks, 'agent can read the math project: ' + JSON.stringify(mSnap))
+  const mathMd = [
+    'The bound $\\|Ax - b\\|_2^2$ is tight when $a * b$ and $c * d$ agree.',
+    '',
+    '$$',
+    '\\int_0^\\infty e^{-x} dx = 1',
+    '$$',
+    '',
+    '| term | value |',
+    '| --- | --- |',
+    '| $e^{i\\pi}$ | $-1$ |',
+    '',
+    'It costs $5 and $10 more.',
+  ].join('\n')
+  const mSug = await api(AGENT, `/api/docs/${mProj.id}/suggestions`, {
+    method: 'POST',
+    body: { block_index: mSnap.blocks.length - 1, replacement_markdown: mathMd },
+  })
+  assert.ok(mSug.ok, 'math suggestion accepted by the API: ' + JSON.stringify(mSug))
+  const mAcc = await api('dev:alice', `/api/docs/${mProj.id}/suggestions/${mSug.suggestion_id}/accept`, { method: 'POST' })
+  assert.equal(mAcc.ok, true, 'accept math: ' + JSON.stringify(mAcc))
+  await waitFor(async () => (await api('dev:alice', `/api/docs/${mProj.id}`)).markdown.includes('e^{i\\pi}'), 'math applied')
+  const mOut = (await api('dev:alice', `/api/docs/${mProj.id}`)).markdown
+  assert.ok(mOut.includes('$\\|Ax - b\\|_2^2$'), 'inline math round-trips: ' + mOut)
+  // the two formulas that markdown emphasis used to swallow
+  assert.ok(mOut.includes('$a * b$') && mOut.includes('$c * d$'), 'stars inside math survive: ' + mOut)
+  assert.ok(/\$\$\n\\int_0\^\\infty e\^\{-x\} dx = 1\n\$\$/.test(mOut), 'display math round-trips fenced: ' + mOut)
+  assert.ok(mOut.includes('| $e^{i\\pi}$ | $-1$ |'), 'math inside a table cell round-trips: ' + mOut)
+  assert.ok(mOut.includes('costs $5 and $10 more'), 'currency is not treated as math: ' + mOut)
+  await api('dev:alice', `/api/docs/${mProj.id}`, { method: 'DELETE' })
+  console.log('✓ LaTeX math: agent suggestion, accept, markdown round-trip (inline, display, table, currency)')
+
   // 11h. new-page suggestions: agent npProposes a whole page, human accepts/rejects
   const npjProj = await api('dev:alice', '/api/docs', { method: 'POST', body: { title: 'NP Wiki' } })
   await api('dev:alice', `/api/docs/${npjProj.id}/share`, { method: 'POST', body: { username: 'bob' } })