dsh-oc-tui 0.2.0-pre.13 → 0.2.0

package/lib/mermaid-ascii.js

@@ -43,6 +43,14 @@ export function loadMermaidEngine() {
   return enginePromise
 }
 
+// One entry per (engine, source). The layout depends on the source alone, but
+// the transcript's per-block line cache is keyed by revision and width — so a
+// resize, or any edit above the fence, re-paints every diagram in the
+// transcript. Without this cache each of those repaints re-runs the layout for
+// every fence on screen.
+const ART_CACHE = new WeakMap()
+const ART_CACHE_MAX = 64
+
 /**
  * Lay one mermaid source out as box-drawing art.
  * @param {{render: Function}|null} engine - from {@link loadMermaidEngine}.
@@ -52,7 +60,18 @@ export function loadMermaidEngine() {
  */
 export function renderMermaidArt(engine, src) {
   if (!engine || typeof src !== 'string' || src.trim() === '') return null
-  return engine.render(emojiWideSource(engine, src))
+  let bySource = ART_CACHE.get(engine)
+  if (!bySource) {
+    bySource = new Map()
+    ART_CACHE.set(engine, bySource)
+  }
+  if (bySource.has(src)) return bySource.get(src)
+  // A null answer is cached too: a grammar the engine cannot draw would
+  // otherwise be re-parsed on every repaint, only to fail the same way.
+  const art = engine.render(emojiWideSource(engine, src))
+  if (bySource.size >= ART_CACHE_MAX) bySource.delete(bySource.keys().next().value)
+  bySource.set(src, art)
+  return art
 }
 
 // The engine sizes a label from the `unicode-width` crate, which follows

package/lib/mermaid.js

@@ -12,7 +12,7 @@
 // 'local' never touches the network, 'off' renders nothing.
 import { spawn } from 'node:child_process'
 import { createHash } from 'node:crypto'
-import { readFile, mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { mkdir, readFile, mkdtemp, rm, writeFile } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 
@@ -24,8 +24,14 @@ const sha1 = (s) => createHash('sha1').update(s).digest('hex')
 
 // Deterministic cache file name for a diagram (encoded diagrams are long and
 // URL-unsafe; a content hash keeps the cache dir tidy and stable).
-export function mermaidCachePath(code) {
-  return sha1('mermaid:' + code).slice(0, 24) + '.png'
+//
+// The requested pixel width is part of the key: the same diagram rendered for a
+// narrow terminal is a different raster from the one a wide terminal asks for,
+// and serving the narrow file to the wide terminal would draw a diagram at half
+// the width of the space reserved for it.
+export function mermaidCachePath(code, pxWidth) {
+  const width = pxWidth ? ':' + Math.round(pxWidth) : ''
+  return sha1('mermaid:' + code + width).slice(0, 24) + '.png'
 }
 
 function spawnWithTimeout(cmd, args, timeoutMs) {
@@ -89,10 +95,13 @@ export function createMermaidRenderer({ fetch: fetchImpl = globalThis.fetch, mod
     }
   }
 
-  async function renderViaInk(code) {
+  async function renderViaInk(code, { pxWidth }) {
     if (typeof fetchImpl !== 'function') return null
     const encoded = Buffer.from(code, 'utf8').toString('base64url')
-    const url = 'https://mermaid.ink/img/' + encoded + '?type=png'
+    // `width` is the ink service's own pixel hint; without it the diagram comes
+    // back at the service's default and is downscaled here for no reason.
+    const width = Math.min(2000, Math.max(64, Math.round(pxWidth ?? 800)))
+    const url = 'https://mermaid.ink/img/' + encoded + '?type=png&width=' + width
     const res = await fetchImpl(url, { signal: AbortSignal.timeout(INK_TIMEOUT_MS) })
     if (!res.ok) return null
     const buf = Buffer.from(await res.arrayBuffer())
@@ -105,31 +114,41 @@ export function createMermaidRenderer({ fetch: fetchImpl = globalThis.fetch, mod
     if (effectiveMode === 'off') return null
     code = String(code ?? '')
     if (code.trim() === '') return null
-    const cached = memory.get(code)
+    // Width is part of the memory key for the same reason it is part of the
+    // file name: a resize asks for a different raster.
+    const memoKey = code + '\u0000' + (pxWidth ?? 0)
+    const cached = memory.get(memoKey)
     if (cached) return cached
 
     let result = null
-    if (effectiveMode === 'auto' || effectiveMode === 'local') {
+    const cacheFile = cacheDir ? join(cacheDir, mermaidCachePath(code, pxWidth)) : null
+    // Disk before any provider. A diagram this machine already rendered is a
+    // file read; going to the network first made every session pay for a fresh
+    // render of diagrams that were sitting on disk, and sent the diagram text
+    // to a public service for nothing.
+    if (cacheFile) {
+      try {
+        const bytes = await readFile(cacheFile)
+        if (bytes.length > 0) result = { bytes, mediaType: 'image/png' }
+      } catch { /* no cached file */ }
+    }
+    if (!result && (effectiveMode === 'auto' || effectiveMode === 'local')) {
       result = await renderViaMmdc(code, { pxWidth })
     }
     if (!result && (effectiveMode === 'auto' || effectiveMode === 'network')) {
       try {
-        result = await renderViaInk(code)
+        result = await renderViaInk(code, { pxWidth })
       } catch { /* offline or blocked; fall through */ }
     }
-    if (!result && cacheDir) {
-      // A previous session may have rendered this exact diagram to disk.
-      try {
-        const path = join(cacheDir, mermaidCachePath(code))
-        const bytes = await readFile(path)
-        if (bytes.length > 0) result = { bytes, mediaType: 'image/png' }
-      } catch { /* no cached file */ }
-    }
     if (result) {
-      memory.set(code, result)
-      if (cacheDir) {
-        const path = join(cacheDir, mermaidCachePath(code))
-        void writeFile(path, result.bytes).catch(() => { /* best-effort disk cache */ })
+      memory.set(memoKey, result)
+      if (cacheFile) {
+        // The cache directory is created on first write: it does not exist on a
+        // fresh install, and a write into a missing directory fails silently —
+        // which is how the disk cache went unused on every run.
+        void mkdir(cacheDir, { recursive: true })
+          .then(() => writeFile(cacheFile, result.bytes))
+          .catch(() => { /* best-effort disk cache */ })
       }
     }
     return result