dsh-git-changes 0.0.0-stage → 0.1.0

package/src/client/20-monaco.js

@@ -0,0 +1,1404 @@
+/* dsh-git-changes client half — Monaco AMD loader, inline diff renderer, editor host. */
+
+/** Singleton Monaco promise; reset on failure so a later mount can retry. */
+let monacoPromise = null
+
+/**
+ * Load the vendored Monaco AMD build from the authenticated vendor route.
+ * Adapted from the MIT `dsh-vscode-mode` loader (global `module`/`exports`
+ * pollution guard included: other plugins may define them, which makes the
+ * AMD loader believe it runs under Node).
+ * @returns {Promise<any>} the `monaco` namespace
+ */
+function loadMonaco() {
+  if (monacoPromise) return monacoPromise
+  monacoPromise = new Promise((resolve, reject) => {
+    const base = appUrl(VENDOR_BASE)
+    const root = typeof globalThis !== 'undefined' ? globalThis : {}
+    const hasModule = Object.prototype.hasOwnProperty.call(root, 'module')
+    const hasExports = Object.prototype.hasOwnProperty.call(root, 'exports')
+    const savedModule = root.module
+    const savedExports = root.exports
+    const hideNodeGlobals = () => {
+      try { delete root.module } catch (error) { /* read-only global */ }
+      try { delete root.exports } catch (error) { /* read-only global */ }
+    }
+    const restoreNodeGlobals = () => {
+      if (hasModule) root.module = savedModule
+      else { try { delete root.module } catch (error) { /* ignore */ } }
+      if (hasExports) root.exports = savedExports
+      else { try { delete root.exports } catch (error) { /* ignore */ } }
+    }
+    const loaderTagSelector = 'script[data-drp-monaco-loader]'
+    const removeLoaderTag = () => {
+      const existing = document.querySelector(loaderTagSelector)
+      if (existing && existing.parentNode) existing.parentNode.removeChild(existing)
+    }
+    const fail = (error) => {
+      monacoPromise = null
+      removeLoaderTag()
+      restoreNodeGlobals()
+      reject(error instanceof Error ? error : new Error(String(error)))
+    }
+    const boot = () => {
+      restoreNodeGlobals()
+      try {
+        if (typeof window.require !== 'function' || typeof window.require.config !== 'function') {
+          fail(new Error('Monaco AMD loader did not expose window.require'))
+          return
+        }
+        window.require.config({ paths: { vs: base } })
+        window.require(['vs/editor/editor.main'], () => {
+          const monaco = window.monaco
+          if (!monaco || !monaco.editor) {
+            fail(new Error('Monaco editor namespace missing'))
+            return
+          }
+          registerMonacoThemes(monaco)
+          resolve(monaco)
+        }, (error) => fail(new Error('Monaco module load failed: ' + String(error))))
+      } catch (error) {
+        fail(error)
+      }
+    }
+    try {
+      const existing = document.querySelector(loaderTagSelector)
+      if (existing && typeof window.require === 'function' && typeof window.require.config === 'function') {
+        boot()
+        return
+      }
+      if (existing) removeLoaderTag()
+      const script = document.createElement('script')
+      script.src = base + '/loader.js'
+      script.dataset.didMonacoLoader = '1'
+      script.onload = boot
+      script.onerror = () => fail(new Error('Monaco loader script failed to load'))
+      hideNodeGlobals()
+      document.head.appendChild(script)
+    } catch (error) {
+      fail(error)
+    }
+  })
+  return monacoPromise
+}
+
+/**
+ * Compute git-changes regions from a comparison against the current file text.
+ *
+ * A region is one contiguous change group. `start`/`end` are 1-based new-file
+ * line numbers (`end` exclusive); `oldStart`/`oldLines` describe the deleted
+ * original lines shown as an inline block above `start`.
+ *
+ * @param {any} comparison WorkspaceFileDiff text comparison
+ * @param {string} text current file text
+ * @returns {{regions: Array<object>, total: number, added: number, deleted: number}}
+ */
+function buildRegions(comparison, text) {
+  const lines = splitLines(text)
+  const lineCount = lines.length
+  const empty = { regions: [], total: 0, added: 0, deleted: 0 }
+  if (!comparison || comparison.kind !== 'text' || !Array.isArray(comparison.hunks)) return empty
+  if (comparison.coarse) {
+    if (lineCount === 0) return empty
+    const region = { start: 1, end: Math.min(lineCount, MAX_RENDER_LINES) + 1, oldStart: 1, oldLines: [], addedLines: Math.min(lineCount, MAX_RENDER_LINES) }
+    return { regions: [region], total: 1, added: lineCount, deleted: 0 }
+  }
+  const regions = []
+  let added = 0
+  let deleted = 0
+  for (const hunk of comparison.hunks) {
+    if (!hunk || !Array.isArray(hunk.lines)) continue
+    let newLine = Math.max(1, Number(hunk.newStart) || 1)
+    let oldLine = Math.max(1, Number(hunk.oldStart) || 1)
+    let index = 0
+    while (index < hunk.lines.length) {
+      const raw = String(hunk.lines[index])
+      const prefix = raw.charAt(0)
+      if (prefix === ' ') {
+        newLine += 1
+        oldLine += 1
+        index += 1
+        continue
+      }
+      const start = newLine
+      const oldStart = oldLine
+      const oldLines = []
+      let addedCount = 0
+      while (index < hunk.lines.length) {
+        const line = String(hunk.lines[index])
+        const kind = line.charAt(0)
+        if (kind === ' ') break
+        if (kind === '-') {
+          oldLines.push(line.slice(1))
+          oldLine += 1
+          deleted += 1
+        } else if (kind === '+') {
+          addedCount += 1
+          added += 1
+        }
+        index += 1
+      }
+      if (addedCount === 0 && oldLines.length === 0) continue
+      const clampedStart = Math.min(start, Math.max(1, lineCount + 1))
+      const clampedAdded = Math.min(addedCount, Math.max(0, lineCount - clampedStart + 1))
+      regions.push({
+        start: clampedStart,
+        end: clampedStart + clampedAdded,
+        oldStart,
+        oldLines,
+        addedLines: clampedAdded,
+      })
+      newLine += addedCount
+    }
+  }
+  regions.sort((a, b) => a.start - b.start || a.oldStart - b.oldStart)
+  return { regions, total: regions.length, added, deleted }
+}
+
+/**
+ * Per-editor inline diff renderer: whole-line decorations for added lines and
+ * Monaco view zones for deleted lines (with their original line numbers).
+ * Browser-only; owns its decorations/zones and releases them on dispose.
+ * @param {any} monaco Monaco namespace
+ * @param {any} editor Monaco editor
+ * @returns {{render:Function, refresh:Function, reflow:Function, dispose:Function}}
+ */
+function createDiffRenderer(monaco, editor) {
+  let zones = []
+  let listeners = []
+  let lastRegions = null
+  let generation = 0
+  let disposed = false
+
+  const colorVars = () => diffCssVarsOf(themeRuntime.scheme || detectScheme())
+
+  /**
+   * Apply the diff color variables to the editor DOM.
+   * @param {HTMLElement} node target node
+   */
+  const setColors = (node) => {
+    if (!node || !node.style) return
+    const vars = colorVars()
+    node.style.setProperty('--drp-diff-add', vars.add)
+    node.style.setProperty('--drp-diff-del', vars.del)
+    node.style.setProperty('--drp-diff-fg', vars.fg)
+    node.style.setProperty('--drp-diff-number', vars.number)
+  }
+
+  /** Remove every decoration and view zone this renderer owns. */
+  const clear = () => {
+    generation += 1
+    lastRegions = null
+    try {
+      if (decorations.length > 0) decorations = editor.deltaDecorations(decorations, [])
+    } catch (error) {
+      decorations = []
+    }
+    try {
+      if (zones.length > 0) {
+        editor.changeViewZones((accessor) => {
+          for (const zone of zones) {
+            try { accessor.removeZone(zone.id) } catch (error) { /* already gone */ }
+          }
+        })
+      }
+    } catch (error) { /* editor may be disposed */ }
+    zones = []
+  }
+
+  /**
+   * Map a pointer position onto a caret inside a deleted-line zone. Coordinates
+   * outside the zone are clamped to its first/last row so a drag that starts in
+   * the zone can never create a page-wide native selection.
+   * @param {object} zone zone record
+   * @param {number} x client X
+   * @param {number} y client Y
+   * @returns {{node:Node, offset:number} | null}
+   */
+  const zoneCaretPoint = (zone, x, y) => {
+    const rows = zone.domNode.querySelectorAll('.drp-del-row')
+    if (!rows.length) return null
+    const first = rows[0]
+    const last = rows[rows.length - 1]
+    const firstRect = first.getBoundingClientRect()
+    const lastRect = last.getBoundingClientRect()
+    const firstText = zone.rows[0] && zone.rows[0].firstChild
+    const lastText = zone.rows[zone.rows.length - 1] && zone.rows[zone.rows.length - 1].firstChild
+    if (y <= firstRect.top) return firstText ? { node: firstText, offset: 0 } : null
+    if (y >= lastRect.bottom) return lastText ? { node: lastText, offset: lastText.textContent.length } : null
+    let caret = null
+    try { caret = document.caretRangeFromPoint(x, y) } catch (error) { caret = null }
+    if (caret && zone.domNode.contains(caret.startContainer)) {
+      return { node: caret.startContainer, offset: caret.startOffset }
+    }
+    const rowCount = Math.max(1, rows.length)
+    const step = rowCount > 1 ? (lastRect.top - firstRect.top) / (rowCount - 1) : 20
+    const index = Math.max(0, Math.min(rowCount - 1, Math.floor((y - firstRect.top) / Math.max(1, step))))
+    const text = zone.rows[index] && zone.rows[index].firstChild
+    if (!text) return null
+    const right = rows[index].getBoundingClientRect().right
+    return { node: text, offset: x >= right ? text.textContent.length : 0 }
+  }
+
+  /** Zone DOM node → zone record (mouse selection needs the text rows). */
+  const zoneByNode = new WeakMap()
+  let zoneMouseInstalled = false
+
+  /** Apply one restricted Range selection inside a deleted-line zone. */
+  const applyZoneRange = (anchor, focus) => {
+    try {
+      const anchorFirst = anchor.node === focus.node
+        ? anchor.offset <= focus.offset
+        : Boolean(anchor.node.compareDocumentPosition(focus.node) & 4)
+      const start = anchorFirst ? anchor : focus
+      const end = anchorFirst ? focus : anchor
+      const range = document.createRange()
+      range.setStart(start.node, start.offset)
+      range.setEnd(end.node, end.offset)
+      const selection = window.getSelection()
+      if (!selection) return
+      selection.removeAllRanges()
+      selection.addRange(range)
+    } catch (error) { /* ignore */ }
+  }
+
+  /**
+   * Install one document-level capture handler for deleted-line zones. Capture is
+   * required: Monaco's own mousedown handling would otherwise clear the native
+   * Range we create for the zone (the editor normally keeps native selection off).
+   */
+  const installZoneMouse = () => {
+    if (zoneMouseInstalled) return
+    zoneMouseInstalled = true
+    document.addEventListener('mousedown', (event) => {
+      if (event.button !== 0) return
+      const target = event.target
+      if (!(target instanceof Element) || !target.closest) return
+      const zoneEl = target.closest('.drp-del-zone')
+      if (!zoneEl) return
+      if (target.closest('.drp-del-copy')) return
+      const zone = zoneByNode.get(zoneEl)
+      if (!zone) return
+      const anchor = zoneCaretPoint(zone, event.clientX, event.clientY)
+      if (!anchor) return
+      try {
+        event.preventDefault()
+        event.stopPropagation()
+      } catch (error) { /* ignore */ }
+      applyZoneRange(anchor, anchor)
+      const onMove = (moveEvent) => {
+        if (moveEvent.buttons === 0) return
+        const focus = zoneCaretPoint(zone, moveEvent.clientX, moveEvent.clientY)
+        if (focus) applyZoneRange(anchor, focus)
+        try { moveEvent.preventDefault(); moveEvent.stopPropagation() } catch (error) { /* ignore */ }
+      }
+      const onUp = (upEvent) => {
+        document.removeEventListener('mousemove', onMove, true)
+        document.removeEventListener('mouseup', onUp, true)
+        try { upEvent.stopPropagation() } catch (error) { /* ignore */ }
+      }
+      document.addEventListener('mousemove', onMove, true)
+      document.addEventListener('mouseup', onUp, true)
+    }, true)
+  }
+
+  /**
+   * Build one deleted-line view zone (body + gutter twin).
+   * @param {object} region change group
+   * @returns {object} zone record
+   */
+  const makeZone = (region) => {
+    const domNode = document.createElement('div')
+    domNode.className = 'drp-del-zone'
+    const marginDomNode = document.createElement('div')
+    marginDomNode.className = 'drp-del-margin'
+    const rows = []
+    for (let index = 0; index < region.oldLines.length; index += 1) {
+      const row = document.createElement('div')
+      row.className = 'drp-del-row'
+      const code = document.createElement('span')
+      code.className = 'drp-del-text'
+      code.textContent = region.oldLines[index]
+      row.appendChild(code)
+      domNode.appendChild(row)
+      rows.push(code)
+      const marginRow = document.createElement('div')
+      marginRow.className = 'drp-del-margin-row'
+      const number = document.createElement('span')
+      number.className = 'drp-del-number'
+      number.textContent = String((region.oldStart || 1) + index)
+      const marker = document.createElement('span')
+      marker.className = 'drp-del-marker'
+      marker.textContent = '−'
+      marginRow.appendChild(number)
+      marginRow.appendChild(marker)
+      marginDomNode.appendChild(marginRow)
+    }
+    const zone = {
+      domNode,
+      marginDomNode,
+      rows,
+      lines: region.oldLines,
+      after: Math.max(0, (Number(region.start) || 1) - 1),
+    }
+    // One-click copy for the whole deleted block, placed in the gutter so it
+    // never covers the deleted code text itself.
+    const copyBtn = document.createElement('button')
+    copyBtn.type = 'button'
+    copyBtn.className = 'drp-del-copy'
+    copyBtn.title = '复制删除的行'
+    copyBtn.textContent = '\u29C9'
+    copyBtn.addEventListener('mousedown', (event) => {
+      try { event.preventDefault(); event.stopPropagation() } catch (error) { /* ignore */ }
+    })
+    copyBtn.addEventListener('click', (event) => {
+      try { event.preventDefault(); event.stopPropagation() } catch (error) { /* ignore */ }
+      const text = zone.lines.join('\n')
+      Promise.resolve(typeof copyText === 'function' ? copyText(text) : false)
+        .then((ok) => {
+          copyBtn.textContent = ok ? '\u2713' : '!'
+          setTimeout(() => { copyBtn.textContent = '\u29C9' }, 1300)
+        })
+        .catch(() => { copyBtn.textContent = '!' })
+    })
+    marginDomNode.appendChild(copyBtn)
+    zoneByNode.set(domNode, zone)
+    installZoneMouse()
+    return zone
+  }
+
+  /**
+   * Align a zone with the editor's font, gutter geometry and theme.
+   * @param {object} zone zone record
+   * @returns {number} minimum width in px for horizontal scrolling
+   */
+  const layoutZone = (zone) => {
+    const vars = colorVars()
+    try { editor.applyFontInfo?.(zone.domNode) } catch (error) { /* optional */ }
+    try { editor.applyFontInfo?.(zone.marginDomNode) } catch (error) { /* optional */ }
+    setColors(zone.domNode)
+    setColors(zone.marginDomNode)
+    let lineHeight = 20
+    let layout = { lineNumbersLeft: 0, lineNumbersWidth: 0, decorationsLeft: 0, decorationsWidth: 0 }
+    let fontInfo = null
+    try {
+      lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight) || 20
+      layout = editor.getLayoutInfo() || layout
+      fontInfo = editor.getOption(monaco.editor.EditorOption.fontInfo)
+    } catch (error) { /* defaults */ }
+    const tabSize = (zone.domNode && zone.domNode.style && Number(zone.domNode.style.tabSize)) || 2
+    for (const node of [zone.domNode, zone.marginDomNode]) {
+      node.style.setProperty('--drp-line-height', lineHeight + 'px')
+    }
+    zone.domNode.style.tabSize = String(tabSize || 2)
+    zone.marginDomNode.style.setProperty('--drp-number-left', layout.lineNumbersLeft + 'px')
+    zone.marginDomNode.style.setProperty('--drp-number-width', layout.lineNumbersWidth + 'px')
+    zone.marginDomNode.style.setProperty('--drp-marker-left', layout.decorationsLeft + 'px')
+    zone.marginDomNode.style.setProperty('--drp-marker-width', layout.decorationsWidth + 'px')
+    zone.marginDomNode.style.setProperty('--drp-diff-number', vars.number)
+    let width = 0
+    for (const line of zone.lines) width = Math.max(width, String(line).replace(/\t/g, ' '.repeat(4)).length)
+    const charWidth = Math.max(
+      (fontInfo && fontInfo.typicalHalfwidthCharacterWidth) || 8,
+      (fontInfo && fontInfo.typicalFullwidthCharacterWidth) || 0,
+    )
+    return width * charWidth + 24
+  }
+
+  /**
+   * Asynchronously syntax-color deleted lines with Monaco's own tokenizer.
+   * @param {object} zone zone record
+   * @param {number} epoch render generation
+   */
+  const colorizeZone = async (zone, epoch) => {
+    try {
+      if (typeof monaco.editor.colorize !== 'function') return
+      const model = editor.getModel()
+      if (!model) return
+      const language = model.getLanguageId()
+      const tabSize = (model.getOptions && model.getOptions().tabSize) || 2
+      const html = await monaco.editor.colorize(zone.lines.join('\n'), language, { tabSize })
+      if (disposed || epoch !== generation || editor.getModel() !== model) return
+      const rows = String(html).split(/<br\s*\/?\s*>/i)
+      if (rows.length === zone.rows.length + 1 && rows[rows.length - 1] === '') rows.pop()
+      if (rows.length !== zone.rows.length) return
+      for (let index = 0; index < rows.length; index += 1) zone.rows[index].innerHTML = rows[index]
+    } catch (error) {
+      /* keep the plain-text fallback visible */
+    }
+  }
+
+  /**
+   * Paint regions onto the current model.
+   * @param {Array<object>} regions change groups (see buildRegions)
+   */
+  const paint = (regions) => {
+    lastRegions = regions
+    clear()
+    lastRegions = regions
+    if (!editor || disposed) return
+    const model = editor.getModel()
+    if (!model) return
+    setColors(editor.getDomNode())
+    const decorationsSpec = []
+    const zoneSpecs = []
+    for (const region of regions) {
+      if (region.addedLines > 0 && region.start >= 1) {
+        decorationsSpec.push({
+          range: new monaco.Range(region.start, 1, Math.max(region.start, region.end - 1), 1),
+          options: {
+            isWholeLine: true,
+            className: 'drp-add-line',
+            marginClassName: 'drp-add-line',
+            linesDecorationsClassName: 'drp-add-gutter',
+          },
+        })
+      }
+      if (region.oldLines.length > 0) zoneSpecs.push(makeZone(region))
+    }
+    try {
+      decorations = editor.deltaDecorations([], decorationsSpec)
+    } catch (error) {
+      decorations = []
+    }
+    if (zoneSpecs.length > 0) {
+      try {
+        editor.changeViewZones((accessor) => {
+          for (const zone of zoneSpecs) {
+            const minWidthInPx = layoutZone(zone)
+            zone.id = accessor.addZone({
+              afterLineNumber: zone.after,
+              heightInLines: Math.max(1, zone.lines.length),
+              domNode: zone.domNode,
+              marginDomNode: zone.marginDomNode,
+              minWidthInPx,
+              // Deleted lines are plain DOM (they are not part of the Monaco
+              // text model). Suppressing the mouse would make the whole block
+              // unselectable and uncopyable, so let the browser handle drag
+              // selection inside the zone like normal text.
+              suppressMouseDown: false,
+            })
+            zones.push(zone)
+            void colorizeZone(zone, generation)
+          }
+        })
+      } catch (error) {
+        zones = []
+      }
+    }
+  }
+
+  /**
+   * Re-layout zones after a theme or geometry change.
+   * @returns {void}
+   */
+  const reflow = () => {
+    if (disposed) return
+    setColors(editor.getDomNode())
+    for (const zone of zones) {
+      try { layoutZone(zone) } catch (error) { /* ignore */ }
+    }
+    for (const zone of zones) void colorizeZone(zone, generation)
+  }
+
+  // Layout changes fire on every splitter frame. Only the geometry of the
+  // existing zones needs to follow (gutter offsets, line height); re-tokenizing
+  // the deleted lines on every frame is what made the DSH divider drag stutter.
+  let layoutFrame = 0
+  const onLayout = () => {
+    if (disposed || layoutFrame) return
+    layoutFrame = requestAnimationFrame(() => {
+      layoutFrame = 0
+      if (disposed) return
+      try {
+        setColors(editor.getDomNode())
+        for (const zone of zones) layoutZone(zone)
+      } catch (error) { /* ignore */ }
+    })
+  }
+  try { listeners.push(editor.onDidLayoutChange(onLayout)) } catch (error) { /* ignore */ }
+  try { listeners.push(editor.onDidChangeModel(() => clear())) } catch (error) { /* ignore */ }
+
+  return {
+    render(regions) {
+      paint(Array.isArray(regions) ? regions : [])
+    },
+    refresh() {
+      paint(lastRegions || [])
+    },
+    reflow,
+    dispose() {
+      disposed = true
+      if (layoutFrame) {
+        try { cancelAnimationFrame(layoutFrame) } catch (error) { /* ignore */ }
+        layoutFrame = 0
+      }
+      clear()
+      for (const listener of listeners) {
+        try { listener.dispose() } catch (error) { /* ignore */ }
+      }
+      listeners = []
+    },
+  }
+}
+
+/**
+ * Read-only Monaco editor host: one editor instance, one model per reviewed file,
+ * per-file view state, inline diff decorations refreshed from `regions`.
+ * @param {object} props component props
+ * @returns {any} React element
+ */
+/** Minimum editor width that still reads well side by side (VS Code default). */
+const DIFF_SIDE_MIN_WIDTH = 900
+
+/**
+ * Resolve the effective diff layout for the current viewport.
+ * @param {string} preference stored preference ('auto' | 'inline' | 'side')
+ * @param {number} width available editor width in CSS pixels
+ * @returns {'inline' | 'side'}
+ */
+function resolveDiffLayout(preference, width) {
+  if (preference === 'side') return 'side'
+  if (preference === 'inline') return 'inline'
+  return Number(width) >= DIFF_SIDE_MIN_WIDTH ? 'side' : 'inline'
+}
+
+/**
+ * Rebuild the "before" side of a diff from the current text and the built regions.
+ *
+ * `buildRegions` already carries each changed block's old lines, so the original
+ * document can be reconstructed without another Host round trip.
+ * @param {string} text current ("after") document text
+ * @param {Array<object>} regions built diff regions
+ * @returns {string} original ("before") document text
+ */
+function originalTextFromRegions(text, regions) {
+  const current = text === '' ? [] : String(text || '').split('\n')
+  const list = Array.isArray(regions) ? regions.slice() : []
+  list.sort((a, b) => (Number(a.start) || 0) - (Number(b.start) || 0) || (Number(a.oldStart) || 0) - (Number(b.oldStart) || 0))
+  const out = []
+  let cursor = 0
+  for (const region of list) {
+    const start = Math.max(1, Number(region.start) || 1) - 1
+    const added = Math.max(0, Number(region.addedLines) || 0)
+    const target = Math.min(current.length, start)
+    for (let index = cursor; index < target; index += 1) out.push(current[index])
+    for (const line of (Array.isArray(region.oldLines) ? region.oldLines : [])) out.push(String(line))
+    cursor = Math.min(current.length, target + added)
+  }
+  for (let index = cursor; index < current.length; index += 1) out.push(current[index])
+  return out.join('\n')
+}
+
+/**
+ * Read-only side-by-side diff host backed by `monaco.editor.createDiffEditor`.
+ *
+ * Kept separate from `MonacoHost` on purpose: the inline renderer owns the
+ * single-editor path (decorations, LSP announcements, view-state caching), while
+ * this host only exists to show Cursor-style two-column diffs. Switching layouts
+ * therefore disposes one host and creates the other, which matches the design
+ * decision to rebuild the editor instead of mutating it in place.
+ * @param {object} props component props
+ * @returns {any} React element
+ */
+function MonacoDiffHost(props) {
+  const { monaco, file, regions, sessionId, scheme, fontSize, reveal, blame, documentEpoch, onCursor, onReady, onError, onModelReady, t } = props
+  const hostRef = React.useRef(null)
+  const editorRef = React.useRef(null)
+  const modelsRef = React.useRef([])
+  const blameDwellRef = React.useRef(null)
+  const blameRef = React.useRef(blame)
+  blameRef.current = blame
+  const fileRef = React.useRef(file)
+  fileRef.current = file
+  const tRef = React.useRef(t)
+  tRef.current = t
+  const callbacksRef = React.useRef({ onCursor, onReady, onError, onModelReady })
+  callbacksRef.current = { onCursor, onReady, onError, onModelReady }
+  // The custom themes carry the git diff colours (inserted/removed line and
+  // word backgrounds); the built-in vs/vs-dark themes do not, which made the
+  // side-by-side view look like plain code with no highlights.
+  const themeOf = () => themeRuntime.scheme === 'light' ? MONACO_THEME.light : MONACO_THEME.dark
+
+  /**
+   * Paint the diff tints through CSS variables on the host node. The custom
+   * Monaco theme carries the same colors, but pinning them here guarantees the
+   * green/red backgrounds survive even when the theme falls back to a base
+   * palette (or an older Monaco build ignores the diff color keys).
+   * @param {HTMLElement | null} node host node
+   */
+  const setDiffColors = (node) => {
+    if (!node || !node.style) return
+    const vars = diffCssVarsOf(themeRuntime.scheme === 'light' ? 'light' : 'dark')
+    node.style.setProperty('--drp-diff-add', vars.add)
+    node.style.setProperty('--drp-diff-del', vars.del)
+    node.style.setProperty('--drp-diff-add-word', vars.addWord)
+    node.style.setProperty('--drp-diff-del-word', vars.delWord)
+    node.style.setProperty('--vscode-diffEditor-insertedLineBackground', vars.add)
+    node.style.setProperty('--vscode-diffEditor-removedLineBackground', vars.del)
+    node.style.setProperty('--vscode-diffEditor-insertedTextBackground', vars.addWord)
+    node.style.setProperty('--vscode-diffEditor-removedTextBackground', vars.delWord)
+  }
+
+  /** Create the diff editor once the host node and Monaco both exist. */
+  const attach = React.useCallback((node) => {
+    hostRef.current = node
+    if (!node || editorRef.current || !monaco) return
+    try {
+      // Register/apply the plugin themes before the diff editor is built so the
+      // inserted/removed backgrounds are present from the first paint.
+      try { applyMonacoTheme(monaco) } catch (error) { /* keep whatever theme is active */ }
+      setDiffColors(node)
+      const editor = monaco.editor.createDiffEditor(node, {
+        theme: themeOf(),
+        readOnly: true,
+        originalEditable: false,
+        renderSideBySide: true,
+        enableSplitViewResizing: true,
+        renderIndicators: true,
+        ignoreTrimWhitespace: false,
+        diffAlgorithm: 'advanced',
+        renderOverviewRuler: false,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        minimap: { enabled: false },
+        glyphMargin: false,
+        lineNumbers: 'on',
+        folding: true,
+        matchBrackets: 'always',
+        renderLineHighlight: 'none',
+        smoothScrolling: false,
+        mouseWheelZoom: true,
+        fixedOverflowWidgets: true,
+        fontSize: Math.min(28, Math.max(9, Math.round(Number(fontSize) || 13))),
+        lineHeight: 20,
+        fontFamily: 'var(--ds-font-family-code, var(--dsh-code-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace))',
+        tabSize: 2,
+        padding: { top: 8, bottom: 24 },
+        scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10, useShadows: false },
+      })
+      editorRef.current = editor
+      const modified = editor.getModifiedEditor()
+      try {
+        modified.onDidChangeCursorPosition((event) => {
+          callbacksRef.current.onCursor?.({ line: event.position.lineNumber, column: event.position.column })
+        })
+      } catch (error) { /* optional */ }
+      const dwells = []
+      const blameOptions = () => ({ getBlame: () => blameRef.current, sessionId, getPath: () => (fileRef.current && fileRef.current.path) || '', t: tRef.current })
+      try {
+        const original = typeof editor.getOriginalEditor === 'function' ? editor.getOriginalEditor() : null
+        if (original) dwells.push(attachBlameDwell(original, monaco, blameOptions(), (typeof original.getDomNode === 'function' ? original.getDomNode() : null) || hostRef.current))
+      } catch (error) { /* optional */ }
+      try { dwells.push(attachBlameDwell(modified, monaco, blameOptions(), hostRef.current)) } catch (error) { /* optional */ }
+      blameDwellRef.current = { dispose: () => { for (const dwell of dwells) { try { dwell.dispose?.() } catch (error) { /* ignore */ } } } }
+      callbacksRef.current.onReady?.({
+        revealLine: (line) => {
+          try {
+            const target = Math.max(1, Number(line) || 1)
+            modified.revealLineInCenter?.(target)
+            modified.setPosition({ lineNumber: target, column: 1 })
+          } catch (error) { /* ignore */ }
+        },
+        focus: () => { try { modified.focus() } catch (error) { /* ignore */ } },
+        layout: () => { try { editor.layout() } catch (error) { /* ignore */ } },
+        getEditor: () => editor,
+        setFontSize: (size) => {
+          try { editor.updateOptions({ fontSize: Math.min(28, Math.max(9, Math.round(Number(size) || 13))) }) } catch (error) { /* ignore */ }
+        },
+      })
+    } catch (error) {
+      log('error', 'monaco diff editor creation failed', error)
+      callbacksRef.current.onError?.(error)
+    }
+  }, [monaco])
+
+  // Disposal.
+  React.useEffect(() => () => {
+    try { blameDwellRef.current?.dispose?.() } catch (error) { /* ignore */ }
+    blameDwellRef.current = null
+    const editor = editorRef.current
+    editorRef.current = null
+    if (editor) { try { editor.dispose() } catch (error) { /* ignore */ } }
+    for (const model of modelsRef.current) { try { model.dispose() } catch (error) { /* ignore */ } }
+    modelsRef.current = []
+  }, [])
+
+  // (Re)build both models whenever the file, its text or the regions change.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || !monaco || !file || file.kind !== 'text' || typeof file.text !== 'string') return
+    try {
+      for (const model of modelsRef.current) { try { model.dispose() } catch (error) { /* ignore */ } }
+      modelsRef.current = []
+      const path = file.path || ''
+      const base = 'did:///' + encodeURIComponent(sessionId || 'workspace') + '/' + path.replace(/^\/+/, '').split('/').map(encodeURIComponent).join('/')
+      const language = file.language || 'plaintext'
+      const original = monaco.editor.createModel(originalTextFromRegions(file.text, regions), language, monaco.Uri.parse(base + '?original'))
+      const modified = monaco.editor.createModel(file.text, language, monaco.Uri.parse(base + '?modified'))
+      modelsRef.current = [original, modified]
+      editor.setModel({ original, modified })
+      try { editor.layout() } catch (error) { /* ignore */ }
+      callbacksRef.current.onModelReady?.({ path, text: file.text, language, monaco, model: modified })
+    } catch (error) {
+      log('error', 'monaco diff model switch failed', error)
+    }
+  }, [monaco, sessionId, file && file.path, file && file.text, file && file.language, file && file.kind, regions])
+
+  // Theme + font size are prop-driven like the inline host.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || !monaco) return
+    try {
+      applyMonacoTheme(monaco)
+      editor.updateOptions({ theme: themeOf() })
+      setDiffColors(hostRef.current)
+    } catch (error) { /* ignore */ }
+  }, [monaco, scheme])
+
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor) return
+    try { editor.updateOptions({ fontSize: Math.min(28, Math.max(9, Math.round(Number(fontSize) || 13))) }) } catch (error) { /* ignore */ }
+  }, [fontSize, file && file.path])
+
+  // Reveal requests: both panes follow the modified line number.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || !reveal || !reveal.line) return
+    try {
+      const target = Math.max(1, Number(reveal.line) || 1)
+      const modified = editor.getModifiedEditor()
+      modified.revealLineInCenter(target)
+      modified.setPosition({ lineNumber: target, column: 1 })
+      modified.focus()
+    } catch (error) { /* ignore */ }
+  }, [reveal && reveal.line, reveal && reveal.nonce])
+
+  return h('div', { className: 'drp-monaco-host drp-monaco-diff', ref: attach })
+}
+
+/** How long the cursor must rest on a line before its inline blame appears. */
+const BLAME_DWELL_MS = 900
+/** Grace period before the commit popover opens on the annotation. */
+const BLAME_POPOVER_DELAY_MS = 120
+
+/** Human-readable age of a commit (falls back to a plain date). */
+function blameAge(time, t) {
+  if (!Number.isFinite(time)) return ''
+  const delta = Date.now() - time
+  if (delta < 60 * 1000) return t ? t('blame.justNow') : '刚刚'
+  if (delta < 60 * 60 * 1000) return t ? t('blame.minutesAgo', { count: String(Math.floor(delta / 60000)) }) : Math.floor(delta / 60000) + ' 分钟前'
+  if (delta < 24 * 60 * 60 * 1000) return t ? t('blame.hoursAgo', { count: String(Math.floor(delta / 3600000)) }) : Math.floor(delta / 3600000) + ' 小时前'
+  if (delta < 30 * 24 * 60 * 60 * 1000) return t ? t('blame.daysAgo', { count: String(Math.floor(delta / 86400000)) }) : Math.floor(delta / 86400000) + ' 天前'
+  try { return new Date(time).toLocaleDateString() } catch (error) { return '' }
+}
+
+/** One-line annotation shown at the end of the dwelled line. */
+function blameAnnotationText(row, t) {
+  if (!row) return ''
+  if (row.uncommitted) return t ? t('blame.uncommitted') : '未提交'
+  const who = row.author || 'unknown'
+  const age = blameAge(row.authorTime, t)
+  const summary = row.summary || ''
+  return who + (age ? ', ' + age : '') + (summary ? ' · ' + summary : '')
+}
+
+/**
+ * Build the floating commit popover shown when the annotation is hovered.
+ * @param {HTMLElement} node editor root node used for positioning
+ * @param {object} t translator
+ * @returns {object} popover controller
+ */
+function createBlamePopover(node, t) {
+  const dom = node.ownerDocument.createElement('div')
+  dom.className = 'drp-blame-popover'
+  dom.style.display = 'none'
+  const head = node.ownerDocument.createElement('div')
+  head.className = 'drp-blame-popover-head'
+  const author = node.ownerDocument.createElement('span')
+  author.className = 'drp-blame-popover-author'
+  const when = node.ownerDocument.createElement('span')
+  when.className = 'drp-blame-popover-when'
+  head.appendChild(author)
+  head.appendChild(when)
+  const subject = node.ownerDocument.createElement('div')
+  subject.className = 'drp-blame-popover-subject'
+  const body = node.ownerDocument.createElement('pre')
+  body.className = 'drp-blame-popover-body'
+  const foot = node.ownerDocument.createElement('div')
+  foot.className = 'drp-blame-popover-foot'
+  const sha = node.ownerDocument.createElement('code')
+  sha.className = 'drp-blame-popover-sha'
+  const copy = node.ownerDocument.createElement('button')
+  copy.type = 'button'
+  copy.className = 'drp-btn drp-blame-popover-copy'
+  copy.textContent = t ? t('blame.copySha') : '复制提交号'
+  foot.appendChild(sha)
+  foot.appendChild(copy)
+  dom.appendChild(head)
+  dom.appendChild(subject)
+  dom.appendChild(body)
+  dom.appendChild(foot)
+  node.appendChild(dom)
+  let current = null
+  return {
+    dom,
+    show(row, rect, commit) {
+      current = row
+      author.textContent = commit && commit.author ? commit.author : (row.author || 'unknown')
+      const age = blameAge(row.authorTime, t)
+      const absolute = row.authorTime ? new Date(row.authorTime).toLocaleString() : ''
+      when.textContent = age + (absolute ? '  (' + absolute + ')' : '')
+      subject.textContent = commit && commit.summary ? commit.summary : (row.summary || '')
+      body.textContent = commit && commit.body && commit.body !== subject.textContent ? commit.body : ''
+      body.style.display = body.textContent ? '' : 'none'
+      sha.textContent = row.short || String(row.sha || '').slice(0, 7)
+      dom.style.display = ''
+      const nodeRect = node.getBoundingClientRect()
+      const width = Math.min(420, Math.max(240, nodeRect.width - 24))
+      dom.style.width = width + 'px'
+      const left = Math.max(6, Math.min(rect.left - nodeRect.left, nodeRect.width - width - 6))
+      dom.style.left = left + 'px'
+      const height = dom.offsetHeight || 120
+      let top = rect.top - nodeRect.top - height - 6
+      if (top < 4) top = rect.bottom - nodeRect.top + 4
+      dom.style.top = top + 'px'
+    },
+    hide() {
+      current = null
+      dom.style.display = 'none'
+    },
+    isShowing() {
+      return dom.style.display !== 'none'
+    },
+    getRow() {
+      return current
+    },
+    contains(target) {
+      return dom.contains(target)
+    },
+    dispose() {
+      try { dom.remove() } catch (error) { /* optional */ }
+    },
+  }
+}
+
+/**
+ * Show the line's blame inline after the cursor rests on that line, and a
+ * commit popover when the annotation is hovered.
+ * @param {object} editor active Monaco editor
+ * @param {object} monaco monaco namespace
+ * @param {{ getBlame: () => Array, sessionId: string, t?: Function }} options data access
+ */
+function attachBlameDwell(editor, monaco, options, fallbackNode) {
+  const opts = options || {}
+  const getBlame = typeof opts.getBlame === 'function' ? opts.getBlame : () => []
+  const t = opts.t
+  const sessionId = opts.sessionId
+  const getPath = typeof opts.getPath === 'function' ? opts.getPath : () => opts.path || ''
+  const path = getPath()
+  const node = (typeof editor.getContainerDomNode === 'function' && editor.getContainerDomNode())
+    || (typeof editor.getDomNode === 'function' && editor.getDomNode())
+    || fallbackNode
+  if (!node || typeof node.addEventListener !== 'function') {
+    return { cancel() {}, dispose() {} }
+  }
+  const popover = createBlamePopover(node, t)
+  const annotation = node.ownerDocument.createElement('span')
+  annotation.className = 'drp-blame-inline'
+  annotation.style.display = 'none'
+  node.appendChild(annotation)
+  let timer = 0
+  let hoverTimer = 0
+  let popoverHideTimer = 0
+  let decorations = []
+  let currentRow = null
+  let interacted = false
+  let fetchedRows = null
+  const infoCache = new Map()
+
+  const clearInline = () => {
+    if (timer) { clearTimeout(timer); timer = 0 }
+    if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = 0 }
+    if (popoverHideTimer) { clearTimeout(popoverHideTimer); popoverHideTimer = 0 }
+    popover.hide()
+    currentRow = null
+    annotation.style.display = 'none'
+  }
+
+  const showInline = (row) => {
+    if (!row) return
+    currentRow = row
+    const text = blameAnnotationText(row, t)
+    if (!text) return
+    annotation.textContent = text
+    annotation.title = text
+    annotation.style.display = ''
+    try {
+      const model = typeof editor.getModel === 'function' ? editor.getModel() : null
+      const maxColumn = model && typeof model.getLineMaxColumn === 'function' ? model.getLineMaxColumn(row.line) : 1
+      const atEnd = typeof editor.getScrolledVisiblePosition === 'function'
+        ? editor.getScrolledVisiblePosition({ lineNumber: row.line, column: maxColumn })
+        : null
+      const atStart = typeof editor.getScrolledVisiblePosition === 'function'
+        ? editor.getScrolledVisiblePosition({ lineNumber: row.line, column: 1 })
+        : null
+      const nodeWidth = Number(node.clientWidth) || 0
+      const width = Number(annotation.offsetWidth) || 0
+      const rightLimit = nodeWidth > 0 ? Math.max(12, nodeWidth - width - 10) : 0
+      let left = atEnd && Number.isFinite(atEnd.left) ? atEnd.left + 18 : rightLimit
+      if (rightLimit > 0) left = Math.min(left, rightLimit)
+      annotation.style.left = Math.max(12, left) + 'px'
+      annotation.style.top = Math.max(0, atStart && Number.isFinite(atStart.top) ? atStart.top : 0) + 'px'
+      annotation.style.height = ((atStart && atStart.height) || 20) + 'px'
+    } catch (error) { /* optional */ }
+  }
+
+  const rowsOf = () => {
+    const rows = getBlame()
+    if (Array.isArray(rows) && rows.length) return rows
+    return Array.isArray(fetchedRows) ? fetchedRows : []
+  }
+
+  const fetchRows = () => {
+    const wanted = getPath()
+    if (!sessionId || !wanted) return Promise.resolve([])
+    if (fetchedRows) return Promise.resolve(fetchedRows)
+    return apiGet('blame', { sessionId, path: wanted })
+      .then((value) => {
+        fetchedRows = value && value.available === true && Array.isArray(value.lines) ? value.lines : []
+        return fetchedRows
+      })
+      .catch((error) => {
+        fetchedRows = []
+        return []
+      })
+  }
+
+  const loadInfo = (row) => {
+    if (!row || row.uncommitted || !sessionId) return Promise.resolve(null)
+    const key = row.sha
+    if (infoCache.has(key)) return infoCache.get(key)
+    const pending = apiGet('commitInfo', { sessionId, revision: key })
+      .then((value) => (value && value.available === true ? value.commit : null))
+      .catch(() => null)
+    infoCache.set(key, pending)
+    return pending
+  }
+
+  const openPopover = (row, rect) => {
+    if (!row || row.uncommitted) return
+    void loadInfo(row).then((commit) => {
+      if (!currentRow || currentRow !== row) return
+      const span = node.querySelector('.drp-blame-inline')
+      popover.show(row, span ? span.getBoundingClientRect() : rect, commit)
+    })
+  }
+
+  const onPointerOver = (event) => {
+    const target = event.target
+    if (!target || typeof target.closest !== 'function') return
+    if (popover.contains(target)) {
+      if (popoverHideTimer) { clearTimeout(popoverHideTimer); popoverHideTimer = 0 }
+      return
+    }
+    const span = target.closest('.drp-blame-inline')
+    if (!span || !currentRow) {
+      if (!popover.contains(target)) {
+        if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = 0 }
+        schedulePopoverHide()
+      }
+      return
+    }
+    if (popoverHideTimer) { clearTimeout(popoverHideTimer); popoverHideTimer = 0 }
+    if (hoverTimer) clearTimeout(hoverTimer)
+    hoverTimer = setTimeout(() => {
+      hoverTimer = 0
+      openPopover(currentRow, span.getBoundingClientRect())
+    }, BLAME_POPOVER_DELAY_MS)
+  }
+
+  let selecting = false
+  const schedulePopoverHide = () => {
+    if (selecting) return
+    if (popoverHideTimer) clearTimeout(popoverHideTimer)
+    popoverHideTimer = setTimeout(() => {
+      popoverHideTimer = 0
+      popover.hide()
+    }, 450)
+  }
+
+  const onPointerLeave = (event) => {
+    const related = event.relatedTarget
+    if (related && (popover.contains(related) || related.closest?.('.drp-blame-inline'))) return
+    if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = 0 }
+    schedulePopoverHide()
+  }
+
+  const copyButton = popover.dom.querySelector('.drp-blame-popover-copy')
+  const writeClipboard = (text) => {
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+        return Promise.resolve(navigator.clipboard.writeText(text))
+      }
+    } catch (error) { /* fall through */ }
+    return new Promise((resolve, reject) => {
+      try {
+        const area = node.ownerDocument.createElement('textarea')
+        area.value = text
+        area.setAttribute('readonly', '')
+        area.style.position = 'fixed'
+        area.style.top = '-1000px'
+        area.style.opacity = '0'
+        node.ownerDocument.body.appendChild(area)
+        area.select()
+        const ok = typeof node.ownerDocument.execCommand === 'function' && node.ownerDocument.execCommand('copy')
+        area.remove()
+        if (ok) resolve()
+        else reject(new Error('copy-command-failed'))
+      } catch (error) { reject(error) }
+    })
+  }
+  const flashCopy = (text) => {
+    if (!copyButton) return
+    copyButton.textContent = text
+    setTimeout(() => { if (copyButton) copyButton.textContent = t ? t('blame.copySha') : '复制提交号' }, 1200)
+  }
+  const onCopy = () => {
+    const row = popover.getRow()
+    if (!row || !row.sha) return
+    writeClipboard(String(row.sha)).then(
+      () => flashCopy(t ? t('blame.copied') : '已复制'),
+      () => flashCopy(t ? t('blame.copyFailed') : '复制失败'),
+    )
+  }
+  if (copyButton) copyButton.addEventListener('click', onCopy)
+
+  const markInteracted = () => { interacted = true }
+  node.addEventListener('mousedown', markInteracted)
+  node.addEventListener('keydown', markInteracted)
+
+  const positionSubscription = editor.onDidChangeCursorPosition((event) => {
+    clearInline()
+    const focused = typeof editor.hasTextFocus === 'function' ? editor.hasTextFocus() : true
+    if (!interacted && !focused) return
+    const line = event.position.lineNumber
+    timer = setTimeout(() => {
+      timer = 0
+      const rowsNow = rowsOf()
+      let row = rowsNow.find((entry) => entry && entry.line === line)
+      if (row) {
+        showInline(row)
+        return
+      }
+      // The prefetched rows may still be in flight (or failed): fetch once here.
+      void fetchRows().then((rows) => {
+        row = rows.find((entry) => entry && entry.line === line)
+        if (row) showInline(row)
+      })
+    }, BLAME_DWELL_MS)
+  })
+  const scrollSubscription = typeof editor.onDidScrollChange === 'function'
+    ? editor.onDidScrollChange(() => clearInline())
+    : null
+  const blurSubscription = null
+
+  const onDocumentMouseDown = (event) => {
+    const target = event.target
+    if (!target || typeof target.closest !== 'function') return
+    if (target.closest('.drp-blame-popover')) { selecting = true; return }
+    if (target.closest('.drp-blame-inline')) return
+    clearInline()
+  }
+  const onDocumentMouseUp = () => { selecting = false }
+  const doc = node.ownerDocument
+  if (doc && typeof doc.addEventListener === 'function') {
+    doc.addEventListener('mousedown', onDocumentMouseDown, true)
+    doc.addEventListener('mouseup', onDocumentMouseUp, true)
+  }
+
+  node.addEventListener('mouseover', onPointerOver)
+  node.addEventListener('mouseout', onPointerLeave)
+
+  return {
+    cancel: clearInline,
+    dispose() {
+      clearInline()
+      try { positionSubscription.dispose() } catch (error) { /* optional */ }
+      try { scrollSubscription?.dispose?.() } catch (error) { /* optional */ }
+      try { blurSubscription?.dispose?.() } catch (error) { /* optional */ }
+      node.removeEventListener('mouseover', onPointerOver)
+      node.removeEventListener('mouseout', onPointerLeave)
+      try {
+        doc?.removeEventListener('mousedown', onDocumentMouseDown, true)
+        doc?.removeEventListener('mouseup', onDocumentMouseUp, true)
+      } catch (error) { /* optional */ }
+      node.removeEventListener('mousedown', markInteracted)
+      node.removeEventListener('keydown', markInteracted)
+      if (copyButton) copyButton.removeEventListener('click', onCopy)
+      try { annotation.remove() } catch (error) { /* optional */ }
+      popover.dispose()
+    },
+  }
+}
+
+function MonacoHost(props) {
+  const { monaco, file, sessionId, regions, blame, wrap, minimap, reveal, scheme, fontSize, documentEpoch, onCursor, onReady, onError, onRequestLine, onRequestOutline, onModelReady, onLsp, t } = props
+  const hostRef = React.useRef(null)
+  const editorRef = React.useRef(null)
+  const rendererRef = React.useRef(null)
+  const modelsRef = React.useRef(new Map())
+  const viewStatesRef = React.useRef(new Map())
+  const fontSizeRef = React.useRef(13)
+  const callbacksRef = React.useRef({ onCursor, onReady, onError, onRequestLine, onRequestOutline, onModelReady, onLsp })
+  const blameDwellRef = React.useRef(null)
+  const blameRef = React.useRef(blame)
+  blameRef.current = blame
+  const fileRef = React.useRef(file)
+  fileRef.current = file
+  const tRef = React.useRef(t)
+  tRef.current = t
+  callbacksRef.current = { onCursor, onReady, onError, onRequestLine, onRequestOutline, onModelReady, onLsp }
+
+  /**
+   * Create the editor once the host node and Monaco both exist.
+   * @param {HTMLDivElement | null} node host node
+   */
+  const attach = React.useCallback((node) => {
+    hostRef.current = node
+    if (!node || editorRef.current || !monaco) return
+    try {
+      const editor = monaco.editor.create(node, {
+        value: '',
+        language: 'plaintext',
+        theme: themeRuntime.scheme === 'light' ? MONACO_THEME.light : MONACO_THEME.dark,
+        readOnly: true,
+        domReadOnly: true,
+        renderValidationDecorations: 'on',
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        wordWrap: 'off',
+        minimap: { enabled: false },
+        glyphMargin: false,
+        lineNumbers: 'on',
+        lineDecorationsWidth: 14,
+        folding: true,
+        bracketPairColorization: { enabled: true },
+        matchBrackets: 'always',
+        renderLineHighlight: 'none',
+        renderWhitespace: 'selection',
+        smoothScrolling: false,
+        cursorBlinking: 'smooth',
+        mouseWheelZoom: true,
+        contextmenu: true,
+        // Let hovers / suggest widgets escape the editor's clipped box: inside the
+        // narrow right sidebar a clipped hover hides its first lines behind the
+        // toolbar (user report). Fixed overflow widgets are positioned in the
+        // viewport, so the tooltip stays readable.
+        fixedOverflowWidgets: true,
+        hover: { above: false, sticky: true, delay: 120 },
+        fontSize: fontSizeRef.current,
+        lineHeight: 20,
+        fontFamily: 'var(--ds-font-family-code, var(--dsh-code-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace))',
+        tabSize: 2,
+        padding: { top: 8, bottom: 24 },
+        scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10, useShadows: false },
+      })
+      rendererRef.current = createDiffRenderer(monaco, editor)
+      editorRef.current = editor
+      try {
+        editor.onDidChangeCursorPosition((event) => {
+          callbacksRef.current.onCursor?.({ line: event.position.lineNumber, column: event.position.column })
+        })
+      } catch (error) { /* optional */ }
+      try { blameDwellRef.current = attachBlameDwell(editor, monaco, { getBlame: () => blameRef.current, sessionId, getPath: () => (fileRef.current && fileRef.current.path) || '', t: tRef.current }, hostRef.current) } catch (error) { /* optional */ }
+      try {
+        const key = monaco.KeyMod
+        const code = monaco.KeyCode
+        const bump = (delta) => {
+          fontSizeRef.current = Math.min(28, Math.max(9, fontSizeRef.current + delta))
+          editor.updateOptions({ fontSize: fontSizeRef.current })
+          rendererRef.current?.reflow()
+        }
+        editor.addCommand(key.CtrlCmd | code.Equal, () => bump(1))
+        editor.addCommand(key.CtrlCmd | code.Minus, () => bump(-1))
+        editor.addCommand(key.CtrlCmd | code.Digit0, () => { fontSizeRef.current = 13; editor.updateOptions({ fontSize: 13 }) })
+        // VS Code go-to-line parity inside the editor (the page-level command
+        // covers the non-editor region with the same overlay).
+        editor.addCommand(key.CtrlCmd | code.KeyG, () => {
+          try {
+            const action = editor.getAction('editor.action.gotoLine')
+            if (action) action.run()
+            else callbacksRef.current.onRequestLine?.()
+          } catch (error) { /* ignore */ }
+        })
+        editor.addCommand(key.CtrlCmd | key.Shift | code.KeyO, () => callbacksRef.current.onRequestOutline?.())
+        // Language-server navigation: F12 definition / Shift+F12 references.
+        editor.addCommand(code.F12, () => {
+          try {
+            const position = lspPosition(editor)
+            if (position) callbacksRef.current.onLsp?.('definition', position.lineNumber, position.column)
+          } catch (error) { /* ignore */ }
+        })
+        editor.addCommand(key.Shift | code.F12, () => {
+          try {
+            const position = lspPosition(editor)
+            if (position) callbacksRef.current.onLsp?.('references', position.lineNumber, position.column)
+          } catch (error) { /* ignore */ }
+        })
+        editor.onMouseUp((event) => {
+          if (!(event.event.ctrlKey || event.event.metaKey) || !event.event.leftButton || !event.target.position) return
+          const position = event.target.position
+          callbacksRef.current.onLsp?.('definition', position.lineNumber, position.column)
+        })
+      } catch (error) { /* keybindings are best-effort */ }
+      callbacksRef.current.onReady?.({
+        revealLine: (line) => {
+          try {
+            const target = Math.max(1, Number(line) || 1)
+            editor.revealLineInCenterIfOutsideViewport?.(target)
+            editor.revealLineInCenter(target)
+            editor.setPosition({ lineNumber: target, column: 1 })
+          } catch (error) { /* ignore */ }
+        },
+        focus: () => { try { editor.focus() } catch (error) { /* ignore */ } },
+        layout: () => { try { editor.layout() } catch (error) { /* ignore */ } },
+        getEditor: () => editor,
+        setFontSize: (size) => { fontSizeRef.current = Math.min(28, Math.max(9, Number(size) || 13)); editor.updateOptions({ fontSize: fontSizeRef.current }) },
+      })
+    } catch (error) {
+      log('error', 'monaco editor creation failed', error)
+      callbacksRef.current.onError?.(error)
+    }
+  }, [monaco])
+
+  // Disposal.
+  React.useEffect(() => () => {
+    try { blameDwellRef.current?.dispose?.() } catch (error) { /* ignore */ }
+    blameDwellRef.current = null
+    try { rendererRef.current?.dispose() } catch (error) { /* ignore */ }
+    rendererRef.current = null
+    const editor = editorRef.current
+    lspClearDocument(editor?.getModel?.())
+    editorRef.current = null
+    if (editor) {
+      try { editor.dispose() } catch (error) { /* ignore */ }
+    }
+    for (const model of modelsRef.current.values()) {
+      try { model.dispose() } catch (error) { /* ignore */ }
+    }
+    modelsRef.current.clear()
+  }, [])
+
+  // Model switching with per-file view state. The host stays mounted while a
+  // file loads, so `file` may be null or still loading: the previous model then
+  // stays visible (the page paints a loading veil on top) and the scroll
+  // position of each file survives a switch because the editor is never
+  // destroyed and each model's Monaco view state is restored synchronously.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || !monaco || !file || file.kind !== 'text') return
+    const path = file.path
+    if (!path || typeof file.text !== 'string') return
+    let model = modelsRef.current.get(path)
+    try {
+      if (!model) {
+        const uri = monaco.Uri.parse('did:///' + encodeURIComponent(sessionId || 'workspace') + '/' + path.replace(/^\/+/, '').split('/').map(encodeURIComponent).join('/'))
+        model = monaco.editor.getModel(uri) || monaco.editor.createModel(file.text, file.language || 'plaintext', uri)
+        modelsRef.current.set(path, model)
+      } else if (model.getValue() !== file.text) {
+        // Content changed underneath (refresh): keep the user's scroll position.
+        const saved = editor.getModel() === model ? editor.saveViewState() : viewStatesRef.current.get(model.uri.toString())
+        model.setValue(file.text)
+        if (saved) {
+          try { editor.restoreViewState(saved) } catch (error) { /* ignore */ }
+        }
+      }
+      if (model.getLanguageId() !== (file.language || 'plaintext')) monaco.editor.setModelLanguage(model, file.language || 'plaintext')
+      if (editor.getModel() !== model) {
+        try {
+          const previous = editor.getModel()
+          if (previous) viewStatesRef.current.set(previous.uri.toString(), editor.saveViewState())
+        } catch (error) { /* ignore */ }
+        editor.setModel(model)
+        try {
+          const saved = viewStatesRef.current.get(model.uri.toString())
+          if (saved) editor.restoreViewState(saved)
+        } catch (error) { /* ignore */ }
+        try { editor.layout() } catch (error) { /* ignore */ }
+      }
+      callbacksRef.current.onModelReady?.({
+        path,
+        text: model.getValue(),
+        language: model.getLanguageId(),
+        monaco,
+        model,
+      })
+    } catch (error) {
+      log('error', 'monaco model switch failed', error)
+    }
+  }, [monaco, sessionId, file && file.path, file && file.text, file && file.language, file && file.kind, file && file.missing, documentEpoch])
+
+  // Inline diff decorations.
+  React.useEffect(() => {
+    const renderer = rendererRef.current
+    if (!renderer) return
+    renderer.render(regions || [])
+  }, [regions])
+
+  // Editor options.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor) return
+    try {
+      editor.updateOptions({ wordWrap: wrap ? 'on' : 'off', minimap: { enabled: minimap === true } })
+      rendererRef.current?.reflow()
+    } catch (error) { /* ignore */ }
+  }, [wrap, minimap])
+
+  // Font size is prop-driven so menu commands always reach the live editor
+  // (the imperative controls object is only a convenience path).
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor) return
+    const next = Math.min(28, Math.max(9, Math.round(Number(fontSize) || 13)))
+    fontSizeRef.current = next
+    try {
+      editor.updateOptions({ fontSize: next })
+      rendererRef.current?.reflow()
+    } catch (error) { /* ignore */ }
+  }, [fontSize, file && file.path])
+
+  // Theme switching: re-apply the plugin theme and repaint zone decorations.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || !monaco) return
+    try {
+      applyMonacoTheme(monaco)
+      rendererRef.current?.reflow()
+    } catch (error) { /* ignore */ }
+  }, [monaco, scheme])
+
+  // Reveal requests from hunk navigation / file open.
+  React.useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || !reveal || !reveal.line) return
+    try {
+      const target = Math.max(1, Number(reveal.line) || 1)
+      editor.revealLineInCenter(target)
+      const column = Math.max(1, Number(reveal.column) || 1)
+      if (reveal.endLine && reveal.endColumn) {
+        const range = { startLineNumber: target, startColumn: column, endLineNumber: reveal.endLine, endColumn: reveal.endColumn }
+        editor.setSelection(range)
+        editor.revealRangeInCenter(range)
+      } else {
+        editor.setPosition({ lineNumber: target, column })
+        editor.revealPositionInCenter({ lineNumber: target, column })
+      }
+      editor.focus()
+    } catch (error) { /* ignore */ }
+  }, [reveal && reveal.line, reveal && reveal.nonce])
+
+  return h('div', { className: 'drp-monaco-host', ref: attach })
+}