cc-viewer 1.6.348 → 1.7.1

package/src/utils/identityHeal.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { formatTeammateLabel } from './requestType';
+
+/**
+ * Late-identity healing helpers for ChatView.buildAllItems.
+ *
+ * Background: on a cold load the first build can run before identity data is
+ * complete — the producer turn may be in-flight (excluded from the filtered
+ * requests array) or split into the live tail, and the teammate-name registry
+ * may not have scanned the lead's Agent tool_use yet. The resulting fallbacks
+ * ("MainAgent" model identity, "Teammate: X" labels) get baked into cached
+ * elements / scan entries and were previously frozen until a new MainAgent
+ * turn replaced the session object. These helpers heal them on the next
+ * buildAllItems tick instead.
+ */
+
+/**
+ * Patch cached ChatMessage elements whose modelInfo was baked as null once the
+ * request scan can resolve it. Mirrors refreshCachedItemProp: clones ONLY rows
+ * that transition to a different resolved value, returns the SAME array
+ * reference when nothing changed (React reconciler then skips everything).
+ *
+ * Strict-null marker: rows that display model identity always receive
+ * `modelInfo` explicitly (null when unresolved); rows that never get the prop
+ * have `undefined` and are skipped. Permanently-unresolvable rows stay null
+ * and are re-checked cheaply each pass without cloning.
+ *
+ * Session-fallback rows: rows baked with the session-level model fallback
+ * carry a `_fromSession: true` marker ON the modelInfo object (a per-session
+ * wrapper around getModelInfo's cached ref) and stay heal-eligible so they
+ * upgrade to the precise per-message model once the producer becomes
+ * resolvable. The resolver passed here MUST be the precise one (NOT the
+ * session-fallback wrapped one), or marked rows would "heal" back to the same
+ * fallback. Precise resolutions come from getModelInfo's cache and never carry
+ * the marker, so an upgraded row drops out of heal eligibility — the upgrade
+ * clones each fallback row exactly once (same cost as today's null→resolved
+ * heal), never churns.
+ *
+ * @param {Array} items - cached ChatMessage element array
+ * @param {Function} resolveModelInfo - (ts, role) => modelInfo|null, closing
+ *   over the CURRENT request-scan caches (precise resolver, no fallback)
+ * @returns {Array} same array if clean, else a new array with healed clones
+ */
+export function refreshResolvedModelInfo(items, resolveModelInfo) {
+  let dirty = false;
+  const out = items.map((m) => {
+    if (!m || !m.props || !m.props.timestamp) return m;
+    const mi = m.props.modelInfo;
+    if (mi !== null && !(mi && mi._fromSession)) return m;
+    // Non-assistant rows (plan-prompt/teammate/task-notification) were
+    // originally computed with msg.role 'user' — preserve that mapping.
+    const role = m.props.role === 'assistant' ? 'assistant' : 'user';
+    const next = resolveModelInfo(m.props.timestamp, role);
+    // Defense-in-depth: a marked value here means a caller passed the session-fallback WRAPPED
+    // resolver by mistake — treating it as a heal would clone marked rows forever (the clone
+    // keeps the marker → eligible again next pass). Never "heal" to a fallback value.
+    if (!next || next._fromSession) return m;
+    dirty = true;
+    return React.cloneElement(m, { modelInfo: next });
+  });
+  return dirty ? out : items;
+}
+
+/**
+ * Heal teammate labels baked into _reqScanCache.subAgentEntries before
+ * resolveTeammateNames had injected req.teammate. Entries carry the request
+ * OBJECT reference (entry.req) — object identity survives filtered-array
+ * rebuilds and mid-array insertions, unlike positional indices, which shift
+ * exactly in the late-completing-spawn scenario this fix targets.
+ *
+ * Mutates entries in place (they live inside the scan cache). Also covers
+ * id → real-name upgrades: heals whenever the freshly formatted label differs.
+ *
+ * @param {Array} entries - subAgentEntries ({ unresolved, req, label, ... })
+ */
+export function healUnresolvedTeammateEntries(entries) {
+  for (const entry of entries) {
+    if (!entry || !entry.unresolved || !entry.req || !entry.req.teammate) continue;
+    const label = formatTeammateLabel(entry.req.teammate, entry.req.body?.model);
+    if (label !== entry.label) entry.label = label;
+    entry.unresolved = false;
+  }
+}
+
+/**
+ * Detects that the requests array changed IDENTITY under an incremental scan
+ * cursor (mid-array insertion — e.g. an in-flight producer turn completing and
+ * entering the filtered array before the cursor). Append-only growth keeps
+ * requests[processedCount-1] identical, so this stays false on the hot path.
+ * Accepted residual: a mid-array REPLACEMENT below the cursor with an
+ * unchanged element at processedCount-1 does not fire — that can only leave a
+ * stale token badge, not the identity bug.
+ *
+ * @returns {boolean} true when the caller must do a full scan-cache reset
+ */
+export function needsFullReqRescan(requests, processedCount, lastScannedReq) {
+  if (!processedCount) return false;
+  return requests[processedCount - 1] !== lastScannedReq;
+}

package/src/utils/imConnState.js

@@ -0,0 +1,59 @@
+// Shared derivation of the IM bridge connection status for the UI. The server reports
+// `connection: { running, connected, connectionState?, lastError? }` where `connectionState`
+// ('connected' | 'reconnecting' | 'disconnected') is the authoritative tri-state added alongside
+// the legacy `connected` boolean; old workers (pre-tri-state builds) omit it, so both functions
+// must reproduce the legacy behavior exactly when it is absent.
+// Pure and dependency-free so node:test can import it directly.
+
+/**
+ * Chip-level state: 'connected' | 'reconnecting' | 'running' | 'error' | 'stopped'.
+ * `reconnecting` outranks `lastError` — the server keeps the disconnect cause in lastError while
+ * the SDK retries, so error-first ordering would permanently mask the retry state.
+ */
+export function deriveImConnState(connection) {
+  if (!connection) return 'stopped';
+  if (connection.connectionState) {
+    if (connection.running && connection.connectionState === 'reconnecting') return 'reconnecting';
+    if (connection.lastError) return 'error';
+    if (connection.running && connection.connectionState === 'connected') return 'connected';
+    if (connection.running) return 'running'; // disconnected-while-running without error (legacy parity)
+    return 'stopped';
+  }
+  // Legacy payload (old worker): error → connected → running → stopped.
+  if (connection.lastError) return 'error';
+  if (connection.running && connection.connected) return 'connected';
+  if (connection.running) return 'running';
+  return 'stopped';
+}
+
+/**
+ * Proc-state-aware badge decision shared by ImPlatformSettings.renderBadge and
+ * ImConversationModal.renderStatus. Returns null when there is nothing to render, else
+ * `{ key, fallback, color, withPort, error }` — the caller supplies its own translation call and
+ * appends the port suffix when `withPort`. `color` is the antd Tag color (null = default grey).
+ */
+export function imBadgeModel({ procState, connection }) {
+  // Reconnecting is only meaningful while the worker itself is alive (ready, or remote/no proc info).
+  if (connection?.running && connection?.connectionState === 'reconnecting'
+    && (!procState || procState === 'ready')) {
+    return { key: 'ui.im.statusReconnecting', fallback: 'Reconnecting…', color: 'warning', withPort: procState === 'ready', error: null };
+  }
+  if (connection?.lastError) {
+    return { key: 'ui.im.statusError', fallback: 'Error', color: 'error', withPort: false, error: connection.lastError };
+  }
+  if (procState) {
+    if (procState === 'ready') {
+      return connection?.connected
+        ? { key: 'ui.im.statusConnected', fallback: 'Connected', color: 'success', withPort: true, error: null }
+        : { key: 'ui.im.statusRunning', fallback: 'Running, connecting…', color: 'processing', withPort: true, error: null };
+    }
+    if (procState === 'booting') return { key: 'ui.im.statusBooting', fallback: 'Starting…', color: 'processing', withPort: false, error: null };
+    if (procState === 'hung') return { key: 'ui.im.statusHung', fallback: 'Not responding', color: 'warning', withPort: false, error: null };
+    return { key: 'ui.im.statusDisconnected', fallback: 'Disconnected', color: null, withPort: false, error: null }; // dead
+  }
+  // Remote fallback (no process info in the trimmed LAN response).
+  if (!connection) return null;
+  if (connection.connected) return { key: 'ui.im.statusConnected', fallback: 'Connected', color: 'success', withPort: false, error: null };
+  if (connection.running) return { key: 'ui.im.statusRunning', fallback: 'Running, connecting…', color: 'processing', withPort: false, error: null };
+  return { key: 'ui.im.statusDisconnected', fallback: 'Disconnected', color: null, withPort: false, error: null };
+}

package/src/utils/imOrigin.js

@@ -0,0 +1,24 @@
+// IM-origin marker: messages injected by an IM bridge carry a leading sentinel so the
+// conversation view can show which IM a message came from and (optionally) which sender.
+//   ⟦im:<id>⟧            — platform only (legacy / when sender unknown)
+//   ⟦im:<id>:<senderId>⟧ — platform + opaque sender id (used to look up name/avatar)
+//
+// KEEP IN SYNC with markOrigin() in server/lib/im-bridge-core.js. The senderId group is
+// OPTIONAL so old markers (no sender) still parse → senderId:null → callers fall back to the
+// global user profile (no regression). The bridge only embeds a senderId matching /^[^\s:⟧]+$/,
+// so the `:` separator and the `⟧` terminator are never ambiguous.
+// U+27E6 / U+27E7 (⟦ ⟧) are virtually never typed by a human, so false positives are nil.
+export const IM_ORIGIN_RE = /^⟦im:([a-z0-9_-]+)(?::([^⟧]+))?⟧[ ]?/;
+
+/**
+ * Strip a leading IM-origin marker from a message's text.
+ * @param {string} text raw message text
+ * @returns {{ text: string, imSource: string|null, senderId: string|null }}
+ *   stripped text + the IM id (null if no marker) + the sender id (null if absent)
+ */
+export function parseImOrigin(text) {
+  if (typeof text !== 'string') return { text, imSource: null, senderId: null };
+  const m = text.match(IM_ORIGIN_RE);
+  if (!m) return { text, imSource: null, senderId: null };
+  return { text: text.slice(m[0].length), imSource: m[1], senderId: m[2] || null };
+}

package/src/utils/imTr.js

@@ -0,0 +1,7 @@
+import { t } from '../i18n';
+
+// Safe translate-with-fallback used across the IM settings components: returns the translation
+// when present, otherwise the provided English fallback (never the raw key).
+export const imTr = (key, params, fallback) => {
+  try { const r = t(key, params); return (r && r !== key) ? r : fallback; } catch { return fallback; }
+};

package/src/utils/imageCompress.js

@@ -0,0 +1,83 @@
+// 浏览器端图片压缩 → base64 dataURL
+// 用于 MDXEditor 的 imageUploadHandler：粘贴/拖入图片时本地压缩后内联到 markdown，
+// 零后端依赖、保证 .md 文件可移植。
+
+const DEFAULT_MAX_EDGE = 2000;
+const DEFAULT_QUALITY = 0.85;
+// 输入硬上限：原图 > 10MB 时直接拒绝（即使压缩后能控制在 5MB 内，原图占内存也太大）。
+// 5MB 是后端 writeFileContent 的上限；原图按经验 base64 后 +33%，压缩后通常 100-300KB，
+// 给 30x 余量已足。
+const MAX_INPUT_BYTES = 10 * 1024 * 1024;
+// 这里的 KEEP 集合 = 「不走 canvas resize、保留原始数据 base64」的 MIME。
+//   - PNG / WEBP：透明区在 canvas 转 JPEG 时会变黑底，且压缩收益取决于内容；保留原图最稳。
+//   - GIF：canvas drawImage 只能取首帧，会丢失全部动画——必须直通。
+const PASSTHROUGH_TYPES = new Set(['image/png', 'image/gif', 'image/webp', 'image/svg+xml']);
+
+function readAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(new Error('FileReader failed'));
+    reader.readAsDataURL(file);
+  });
+}
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error('Image decode failed'));
+    img.src = src;
+  });
+}
+
+export async function compressImageToDataURL(file, opts = {}) {
+  if (!(file instanceof Blob)) {
+    throw new Error('compressImageToDataURL: input must be a File or Blob');
+  }
+  if (!file.type || !file.type.startsWith('image/')) {
+    throw new Error(`Unsupported file type: ${file.type || 'unknown'}`);
+  }
+  if (file.size > MAX_INPUT_BYTES) {
+    throw new Error(`Image too large: ${(file.size / 1024 / 1024).toFixed(1)}MB > ${MAX_INPUT_BYTES / 1024 / 1024}MB limit`);
+  }
+
+  const maxEdge = opts.maxEdge ?? DEFAULT_MAX_EDGE;
+  const quality = opts.quality ?? DEFAULT_QUALITY;
+
+  // PNG / GIF / WEBP / SVG 直通 base64（GIF 保留动画，PNG/WEBP 保留透明，SVG 保留矢量）
+  if (PASSTHROUGH_TYPES.has(file.type)) {
+    return await readAsDataURL(file);
+  }
+
+  const originalDataURL = await readAsDataURL(file);
+  const img = await loadImage(originalDataURL);
+
+  const longestEdge = Math.max(img.naturalWidth, img.naturalHeight);
+  const scale = longestEdge > maxEdge ? maxEdge / longestEdge : 1;
+  const targetW = Math.max(1, Math.round(img.naturalWidth * scale));
+  const targetH = Math.max(1, Math.round(img.naturalHeight * scale));
+
+  const canvas = document.createElement('canvas');
+  canvas.width = targetW;
+  canvas.height = targetH;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return originalDataURL;
+  }
+  ctx.drawImage(img, 0, 0, targetW, targetH);
+
+  // JPEG 透明区会变黑——在 PASSTHROUGH 已涵盖 PNG/WEBP/GIF 的前提下，能进到这里的
+  // 都是 image/jpeg / image/bmp / image/heic 等非透明类型，统一压成 JPEG。
+  let compressed;
+  try {
+    compressed = canvas.toDataURL('image/jpeg', quality);
+  } catch {
+    return originalDataURL;
+  }
+
+  if (!compressed || compressed === 'data:,' || compressed.length >= originalDataURL.length) {
+    return originalDataURL;
+  }
+  return compressed;
+}

package/src/utils/imageDownscale.js

@@ -0,0 +1,28 @@
+// Retina 屏幕截图为 2x 分辨率，上传前按 devicePixelRatio 缩小到 1x，减少文件体积。
+// 非 Retina 屏幕、Canvas 不可用、或 img.onerror 时，静默返回原始文件（graceful fallback）。
+export function downscaleForRetina(file) {
+  const dpr = window.devicePixelRatio || 1;
+  if (dpr <= 1) return Promise.resolve(file);
+
+  return new Promise((resolve) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const w = Math.round(img.width / dpr);
+      const h = Math.round(img.height / dpr);
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) { resolve(file); return; }
+      ctx.drawImage(img, 0, 0, w, h);
+      canvas.toBlob((blob) => {
+        if (!blob) { resolve(file); return; }
+        resolve(new File([blob], file.name || 'clipboard.png', { type: file.type }));
+      }, file.type);
+    };
+    img.onerror = () => { URL.revokeObjectURL(url); resolve(file); };
+    img.src = url;
+  });
+}

package/src/utils/imageResize.js

@@ -0,0 +1,112 @@
+// 图片上传前尺寸压缩：任意一边超过 maxDim 时，按比例缩放至 maxDim 以内。
+// 非图片 / 解码失败时原样返回；HEIC/AVIF/GIF/BMP 等只要浏览器能解码就会处理。
+
+// 输出格式：原 PNG/WebP 保留以避免不必要的有损再编码，其余一律转 JPEG。
+const KEEP_FORMAT = new Set(['image/png', 'image/webp']);
+
+export function pickOutputType(inputType) {
+  return KEEP_FORMAT.has(inputType) ? inputType : 'image/jpeg';
+}
+
+function loadImageBitmap(file) {
+  if (typeof createImageBitmap === 'function') {
+    return createImageBitmap(file).catch(() => loadViaImgElement(file));
+  }
+  return loadViaImgElement(file);
+}
+
+function loadViaImgElement(file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
+    img.onerror = (e) => { URL.revokeObjectURL(url); reject(e); };
+    img.src = url;
+  });
+}
+
+function canvasToBlob(canvas, type, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error('toBlob returned null'))),
+      type,
+      quality,
+    );
+  });
+}
+
+export async function resizeImageIfNeeded(file, maxDim = 2000) {
+  if (!file || typeof file !== 'object') return file;
+  const type = (file.type || '').toLowerCase();
+  if (!type.startsWith('image/')) return file;
+  // GIF 走 canvas 会只保留第一帧 + 转 JPEG，动图彻底丢。
+  // 直接放行原文件（Claude API 对 GIF 有自己的降采样，即便 >2000px 也由后端处理）。
+  if (type === 'image/gif') return file;
+
+  let source;
+  try {
+    source = await loadImageBitmap(file);
+  } catch {
+    return file;
+  }
+
+  const srcW = source.width || source.naturalWidth;
+  const srcH = source.height || source.naturalHeight;
+  if (!srcW || !srcH) {
+    try { source.close?.(); } catch {}
+    return file;
+  }
+
+  const maxSide = Math.max(srcW, srcH);
+  if (maxSide <= maxDim) {
+    try { source.close?.(); } catch {}
+    return file;
+  }
+
+  const scale = maxDim / maxSide;
+  const dstW = Math.max(1, Math.round(srcW * scale));
+  const dstH = Math.max(1, Math.round(srcH * scale));
+
+  const canvas = document.createElement('canvas');
+  canvas.width = dstW;
+  canvas.height = dstH;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    try { source.close?.(); } catch {}
+    return file;
+  }
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  try {
+    ctx.drawImage(source, 0, 0, dstW, dstH);
+  } catch {
+    try { source.close?.(); } catch {}
+    return file;
+  }
+  try { source.close?.(); } catch {}
+
+  const outType = pickOutputType(type);
+  const quality = outType === 'image/png' ? undefined : 0.92;
+
+  let blob;
+  try {
+    blob = await canvasToBlob(canvas, outType, quality);
+  } catch {
+    return file;
+  }
+
+  // 走到这里说明 maxSide > maxDim，必须返回缩放版本以满足 API 尺寸限制
+  // （即使重编码后字节反而更大 —— 如低色 PNG 转 JPEG —— 也不能回退原图）
+  const nameOut = renameForType(file.name || 'image', outType);
+  return new File([blob], nameOut, { type: outType, lastModified: Date.now() });
+}
+
+export function renameForType(originalName, outType) {
+  const ext = outType === 'image/jpeg' ? 'jpg'
+    : outType === 'image/png' ? 'png'
+    : outType === 'image/webp' ? 'webp'
+    : 'img';
+  const dot = originalName.lastIndexOf('.');
+  const stem = dot > 0 ? originalName.slice(0, dot) : originalName;
+  return `${stem}.${ext}`;
+}

package/src/utils/ingestPipeline.js

@@ -0,0 +1,47 @@
+// 冷启动摄取分帧管线基础设施 — 把 load_end 的同步 O(n×m) 处理切成批次,批间让出主线程。
+// 背景:`ccv -c` 大会话的全量 checkpoint(单条数十 MB、数千 messages)让 reconstruct/slim/
+// process 在一个任务里跑数十秒,Windows 上页面全面卡死。分帧不改变任何一步的执行顺序与
+// 语义(同一循环插入 await 让步),只把长任务拆成 <16ms 批次。
+// 纯函数 + 依赖注入,React-free,node:test 可直测。
+
+export const INGEST_BATCH_SIZE = 250;
+
+/**
+ * 让出主线程。优先 scheduler.yield()(Chrome/Edge 129+/Electron:带优先级续行,
+ * 不会排在无关任务之后);回退 setTimeout(0)(通用;await 链非嵌套,4ms clamp 不生效)。
+ * 不用 requestIdleCallback(交互期可被无限饿死,must-complete 管线会卡住)、
+ * 不用 rAF(后台标签页完全暂停 —— Windows 用户加载期 alt-tab 是常态)。
+ */
+export const yieldToMain = (typeof scheduler !== 'undefined' && typeof scheduler.yield === 'function')
+  ? () => scheduler.yield()
+  : () => new Promise(resolve => setTimeout(resolve, 0));
+
+/**
+ * 分帧驱动一个严格有序的 per-index pass:对 i=0..total-1 顺序调用 step(i),
+ * 每 batchSize 个让步一次,让步后检查 shouldAbort。
+ *
+ * 调用序列与同步 for 循环完全一致 —— 仅插入 await,不重排、不切片、不并行,
+ * 保证有状态消费者(createEntrySlimmer / mergeMainAgentSessions 链)语义零变化。
+ *
+ * @param {number} total
+ * @param {(i: number) => void} step
+ * @param {object} [ctl]
+ * @param {() => boolean} [ctl.shouldAbort] - 每次让步后检查;true 则立即终止(不补跑剩余 step)
+ * @param {(done: number) => void} [ctl.onProgress] - 每批让步前 + 结束时回报已处理条数(单调递增)
+ * @param {() => Promise<void>} [ctl.yieldFn] - 让步原语(测试可注入)
+ * @param {number} [ctl.batchSize]
+ * @returns {Promise<{aborted: boolean}>}
+ */
+export async function runChunkedPass(total, step, ctl = {}) {
+  const { shouldAbort, onProgress, yieldFn = yieldToMain, batchSize = INGEST_BATCH_SIZE } = ctl;
+  for (let i = 0; i < total; i++) {
+    step(i);
+    if ((i + 1) % batchSize === 0 && i + 1 < total) {
+      if (onProgress) onProgress(i + 1);
+      await yieldFn();
+      if (shouldAbort && shouldAbort()) return { aborted: true };
+    }
+  }
+  if (onProgress && total > 0) onProgress(total);
+  return { aborted: false };
+}

package/src/utils/lazyWithReload.js

@@ -0,0 +1,53 @@
+// 共享：动态 chunk 加载失败时的自愈逻辑。
+//
+// 触发场景：服务端升级后，dist/ 里 chunk 哈希变了；浏览器旧标签页 / 缓存的入口 JS
+// 还在请求被替换的旧文件名 → server.js 给 /assets/ 不存在的请求返回 404 →
+// import() 抛 TypeError "Failed to fetch dynamically imported module"。
+//
+// 自愈策略：每个 chunk name 单独维护一个 sessionStorage timestamp，5 分钟外允许
+// reload 一次；窗口内的二次失败抛出原 error 让上游处理（避免连续两次升级死循环）。
+// sessionStorage 在 Safari Private / quota 满 / sandboxed iframe / 严格 CSP 下访问会抛
+// SecurityError 或 QuotaExceededError，全部用 try/catch 静默吞掉 —— 拿不到上次时间戳
+// 时优先 reload（次数过多比"永不刷"更可恢复）。
+//
+// 三个导出：
+//   - shouldReloadStaleChunk(name) → boolean。仅判断 + 写时间戳，不做 reload。
+//     用作底层 primitive，便于把"是否要刷"和"何时真刷"解耦。
+//   - reloadOnStaleChunk(name) → boolean。立即 reload。给 main.jsx 这种没 UI 的地方用。
+//   - handleStaleChunk(name, err, { onReload }) → Promise / throw。给 React.lazy 的 .catch
+//     用：onReload 先跑（toast 之类），200ms 后才真 reload，让 UI 有机会画出来。
+//     返回永不 resolve 的 Promise 把 React 卡在 Suspense fallback 里等 reload 接管。
+
+const RELOAD_WINDOW_MS = 5 * 60 * 1000;
+const RELOAD_GRACE_MS = 200; // 留给 toast / message 渲染一帧的时间
+
+function safeStorage(key, value) {
+  try {
+    if (value === undefined) return Number(sessionStorage.getItem(key) || 0);
+    sessionStorage.setItem(key, value);
+  } catch {
+    /* private mode / quota / sandbox — 读返回 0（→ 触发一次 reload，比卡死好），写忽略 */
+  }
+  return 0;
+}
+
+export function shouldReloadStaleChunk(name) {
+  const key = `_chunkReloadedAt:${name}`;
+  const last = safeStorage(key);
+  if (Date.now() - last <= RELOAD_WINDOW_MS) return false;
+  safeStorage(key, String(Date.now()));
+  return true;
+}
+
+export function reloadOnStaleChunk(name) {
+  if (!shouldReloadStaleChunk(name)) return false;
+  window.location.reload();
+  return true;
+}
+
+export function handleStaleChunk(name, err, { onReload } = {}) {
+  if (!shouldReloadStaleChunk(name)) throw err;
+  try { onReload?.(); } catch { /* toast 抛错不能阻止 reload */ }
+  setTimeout(() => window.location.reload(), RELOAD_GRACE_MS);
+  return new Promise(() => {}); // 让 Suspense fallback 一直显示直到 reload 接管
+}

package/src/utils/markdown.js

@@ -0,0 +1,30 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { escapeHtml } from './helpers';
+import { setupMermaidAutoRender } from '../hooks/useMermaidRender';
+import { measureParse } from './markdownProfiler';
+
+setupMermaidAutoRender();
+
+const _mdCache = new Map();
+const _MD_CACHE_MAX = 1024;
+
+export function renderMarkdown(text) {
+  if (!text) return '';
+  const hit = _mdCache.get(text);
+  if (hit !== undefined) return hit;
+
+  let html;
+  try {
+    html = measureParse(() => DOMPurify.sanitize(marked.parse(text, { breaks: true })));
+  } catch (e) {
+    html = escapeHtml(text);
+  }
+
+  if (_mdCache.size >= _MD_CACHE_MAX) {
+    // evict oldest (Map preserves insertion order)
+    _mdCache.delete(_mdCache.keys().next().value);
+  }
+  _mdCache.set(text, html);
+  return html;
+}

package/src/utils/markdownIncremental.js

@@ -0,0 +1,39 @@
+import { renderMarkdown } from './markdown';
+
+// 在"不在未闭合 fence 里"的最后一处 \n\n 切开：前半段是已稳定的完成块，
+// 后半段是正在增长的尾巴。流式渲染时只有 tail 每个 chunk 重新解析，
+// frozen 段走 renderMarkdown 的 _mdCache（几乎必中），解析时间下降 30-50%。
+export function splitFrozenTail(text) {
+  if (!text) return ['', ''];
+
+  // 仍在未闭合 fence 内 —— 不能切，否则会把 ``` 切散
+  const fenceCount = (text.match(/^```/gm) || []).length;
+  if (fenceCount % 2 === 1) return ['', text];
+
+  // 存在引用式链接定义时保守回退 —— `[x]: url` 和 `[text][x]` 可能跨越分界
+  // 点，一旦定义落到 frozen 而使用落到 tail（或反过来），链接就不解析。
+  // LLM 回答里较少见，回退到全量解析是可接受的成本。
+  if (/^\[[^\]]+\]:\s/m.test(text)) return ['', text];
+
+  const idx = text.lastIndexOf('\n\n');
+  if (idx < 0) return ['', text];
+
+  // 分界点紧邻表格行（| 开头）时不切 —— 表头 + 分隔行和数据行要在同一次解析
+  // 里才能识别成 <table>，切开会渲染成两段残缺片段。
+  const prevLineStart = text.lastIndexOf('\n', idx - 1) + 1;
+  const lineBefore = text.slice(prevLineStart, idx);
+  const nextLineEnd = text.indexOf('\n', idx + 2);
+  const lineAfter = text.slice(idx + 2, nextLineEnd < 0 ? text.length : nextLineEnd);
+  if (lineBefore.trimStart().startsWith('|') || lineAfter.trimStart().startsWith('|')) {
+    return ['', text];
+  }
+
+  return [text.slice(0, idx + 2), text.slice(idx + 2)];
+}
+
+// 仅用于 trailingCursor=true（流式中）的渲染路径；
+// 非流式或完成消息仍走 renderMarkdown 的单次全量解析 + 缓存。
+export function renderIncremental(text) {
+  const [frozen, tail] = splitFrozenTail(text);
+  return renderMarkdown(frozen) + (tail ? renderMarkdown(tail) : '');
+}