tavern-harness 0.1.0

package/src/core/linkedScroll.ts

@@ -0,0 +1,236 @@
+// ============================================================
+// 群聊「对话 ⇄ 发言队列」双向联动滚动 + 点击定位（平滑版）
+// 两个滚动容器（chat-scroll / turn-queue-body）通过本模块互相驱动：
+// - 滚动对话 → 队列平滑滚动到对应循环
+// - 滚动队列 → 对话平滑滚动到对应循环
+// - 点击队列中的某次发言 → 对话平滑滚动到该循环中对应发言者的消息
+// 依赖消息行上的 data-loop（0 起始循环号）与 data-speaker；队列循环组 data-loop 同语义。
+//
+// 平滑实现要点：
+// - 程序化滚动统一走 rAF 线性插值（lerp），不依赖 CSS scroll-behavior，
+//   避免「浏览器动画反复重启」造成的跳变/闪动
+// - 以「时间窗」抑制自身滚动产生的事件，防止双向驱动死循环
+// ============================================================
+
+let chatEl: HTMLElement | null = null;
+let queueEl: HTMLElement | null = null;
+
+// 程序化写入产生的滚动事件在窗口内被忽略（防死循环）
+let chatSuppressUntil = 0;
+let queueSuppressUntil = 0;
+let queueUserControlUntil = 0;
+
+export function registerChatEl(el: HTMLElement | null): void {
+  chatEl = el;
+  chatSuppressUntil = 0;
+}
+export function registerQueueEl(el: HTMLElement | null): void {
+  queueEl = el;
+  queueSuppressUntil = 0;
+  queueUserControlUntil = 0;
+}
+
+function clamp01(v: number): number {
+  return Math.max(0, Math.min(1, v));
+}
+
+function clampScroll(el: HTMLElement, top: number): number {
+  return Math.max(0, Math.min(top, Math.max(0, el.scrollHeight - el.clientHeight)));
+}
+
+/** 行内容在容器内的绝对位置（不受 scrollTop / 内边距影响） */
+function contentOffsetOf(container: HTMLElement, row: HTMLElement): number {
+  const cr = container.getBoundingClientRect();
+  return row.getBoundingClientRect().top - cr.top + container.scrollTop;
+}
+
+interface ScanRow {
+  el: HTMLElement;
+  off: number;
+  h: number;
+  loop: number;
+}
+
+/** 扫描容器内全部带 data-loop 的行（DOM 顺序） */
+function scanRows(container: HTMLElement): ScanRow[] {
+  const rows: ScanRow[] = [];
+  const cr = container.getBoundingClientRect();
+  container.querySelectorAll<HTMLElement>('[data-loop]').forEach((r) => {
+    const rr = r.getBoundingClientRect();
+    rows.push({ el: r, off: rr.top - cr.top + container.scrollTop, h: rr.height, loop: Number(r.dataset.loop) });
+  });
+  return rows;
+}
+
+function rowsOf(container: HTMLElement, loop: number): ScanRow[] {
+  return scanRows(container).filter((r) => r.loop === loop);
+}
+
+/** 某循环的内容跨度（首行顶 → 末行底），用于把滚动位置映射为 0..1 进度 */
+function spanOf(container: HTMLElement, loop: number): { firstTop: number; height: number } | null {
+  const rows = rowsOf(container, loop);
+  if (rows.length === 0) return null;
+  const firstTop = rows[0].off;
+  const lastBottom = rows[rows.length - 1].off + rows[rows.length - 1].h;
+  return { firstTop, height: Math.max(1, lastBottom - firstTop) };
+}
+
+/** 光标（容器内绝对位置）所在循环 + 该循环内进度（0=顶，1=底） */
+function cursorLoopOf(container: HTMLElement, cursor: number): { loop: number; progress: number } {
+  let loop = 0;
+  for (const r of scanRows(container)) {
+    if (cursor < r.off) break;
+    loop = r.loop;
+    if (cursor <= r.off + r.h) break;
+  }
+  const span = spanOf(container, loop);
+  const progress = span ? clamp01((cursor - span.firstTop) / span.height) : 0;
+  return { loop, progress };
+}
+
+/** 把某循环滚动到窗口内指定进度：循环内 progress 处的内容对齐到视口中心。
+ * 双向（对话→队列 / 队列→对话）用同一映射，保证来回一致；循环短于视口时
+ * 目标可能为负 → 钳制到 0..max，不会反向跳顶。 */
+function targetForLoop(container: HTMLElement, loop: number, progress: number): number {
+  const span = spanOf(container, loop);
+  if (!span) return container.scrollTop;
+  const cursor = span.firstTop + progress * span.height;
+  return clampScroll(container, cursor - container.clientHeight / 2);
+}
+
+// ---------- 平滑滚动核心 ----------
+// 两种动画机制：
+// 1) chaseScroll：连续跟随（拖动/原生平滑滚动产生的连续事件）。
+//    用指数平滑每帧逼近目标，事件持续到来时自然衔接，不会因为“每次重启动画”而脉冲抖动。
+// 2) animateTo：单次导航（点击队列发言定位、新循环加入）。时长缓动 + 干净收尾。
+
+const clampSet = new Set<HTMLElement>(); // 正在持续跟随的容器
+const chaseWanted = new Map<HTMLElement, number>();
+let chaseRaf = 0;
+
+function writeScrollTop(el: HTMLElement, v: number): void {
+  const clamped = clampScroll(el, v);
+  if (Math.abs(clamped - el.scrollTop) < 0.5) return;
+  // 标记「程序化写入」时间窗：本次写入触发的滚动事件要忽略，防反馈死循环
+  if (el === chatEl) chatSuppressUntil = performance.now() + 90;
+  else if (el === queueEl) queueSuppressUntil = performance.now() + 90;
+  el.scrollTop = clamped;
+}
+
+function chaseTick(now: number): void {
+  chaseRaf = 0;
+  for (const el of clampSet) {
+    const wanted = chaseWanted.get(el) ?? el.scrollTop;
+    const diff = wanted - el.scrollTop;
+    if (Math.abs(diff) < 0.5) {
+      clampSet.delete(el);
+      chaseWanted.delete(el);
+      continue;
+    }
+    // 指数趋近：距目标越近越慢，避免过冲；步长上限防止太快导致“跳”
+    const step = Math.min(Math.abs(diff), Math.max(8, Math.abs(diff) * 0.16));
+    writeScrollTop(el, el.scrollTop + Math.sign(diff) * step);
+  }
+  if (clampSet.size > 0) chaseRaf = requestAnimationFrame(chaseTick);
+  void now;
+}
+
+/** 连续跟随：目标可被后续调用持续更新，内部每帧指数趋近 */
+function chaseScroll(el: HTMLElement, target: number): void {
+  chaseWanted.set(el, clampScroll(el, target));
+  if (!clampSet.has(el)) {
+    clampSet.add(el);
+    if (!chaseRaf) chaseRaf = requestAnimationFrame(chaseTick);
+  }
+}
+
+interface Anim {
+  el: HTMLElement;
+  from: number;
+  to: number;
+  start: number;
+  dur: number;
+}
+let anim: Anim | null = null;
+let rafId = 0;
+
+function tick(now: number): void {
+  rafId = 0;
+  if (!anim) return;
+  const t = Math.min(1, (now - anim.start) / anim.dur);
+  const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
+  writeScrollTop(anim.el, anim.from + (anim.to - anim.from) * eased);
+  if (t < 1) rafId = requestAnimationFrame(tick);
+  else anim = null;
+}
+
+function animateTo(el: HTMLElement, target: number, dur = 240): void {
+  const to = clampScroll(el, target);
+  const from = el.scrollTop;
+  if (Math.abs(to - from) < 1) return;
+  // 与持续跟随互斥：单次导航时停掉 chase
+  clampSet.delete(el);
+  chaseWanted.delete(el);
+  anim = { el, from, to, start: performance.now(), dur };
+  if (!rafId) rafId = requestAnimationFrame(tick);
+}
+
+function cancelProgrammaticScroll(el: HTMLElement): void {
+  clampSet.delete(el);
+  chaseWanted.delete(el);
+  if (anim?.el === el) anim = null;
+}
+
+function isChatSuppressed(): boolean {
+  return performance.now() < chatSuppressUntil;
+}
+function isQueueSuppressed(): boolean {
+  return performance.now() < queueSuppressUntil;
+}
+
+// ---------- 对外接口 ----------
+
+/** 对话区滚动 → 联动队列（连续跟随，平滑） */
+export function onChatScroll(): void {
+  if (!chatEl || !queueEl) return;
+  if (isChatSuppressed() || performance.now() < queueUserControlUntil) return;
+  const cursor = chatEl.scrollTop + chatEl.clientHeight / 2;
+  const { loop, progress } = cursorLoopOf(chatEl, cursor);
+  chaseScroll(queueEl, targetForLoop(queueEl, loop, progress));
+}
+
+/** 用户开始操作队列时，立即停止可能把队列拉回原位的程序化滚动。 */
+export function onQueueScrollIntent(): void {
+  if (!queueEl) return;
+  cancelProgrammaticScroll(queueEl);
+  queueSuppressUntil = 0;
+  queueUserControlUntil = performance.now() + 600;
+}
+
+/** 队列滚动 → 联动对话（连续跟随，平滑） */
+export function onQueueScroll(): void {
+  if (!chatEl || !queueEl) return;
+  if (isQueueSuppressed()) return;
+  queueUserControlUntil = performance.now() + 600;
+  const cursor = queueEl.scrollTop + queueEl.clientHeight / 2;
+  const { loop, progress } = cursorLoopOf(queueEl, cursor);
+  chaseScroll(chatEl, targetForLoop(chatEl, loop, progress));
+}
+
+/**
+ * 点击队列中的某次发言 → 对话平滑滚动到该循环中对应发言者的消息。
+ * speakerKey：玩家消息为 'player'，NPC 为 participantId 字符串；null 时滚到该循环第一条。
+ */
+export function scrollChatTo(loop: number, speakerKey: string | null): void {
+  if (!chatEl) return;
+  const rows = rowsOf(chatEl, loop);
+  const target = rows.find((r) => r.el.dataset.speaker === speakerKey) ?? rows[0] ?? null;
+  if (!target) return;
+  animateTo(chatEl, contentOffsetOf(chatEl, target.el) - chatEl.clientHeight * 0.2, 320);
+}
+
+/** 队列面板：新循环加入时平滑滚动到当前循环（底部对齐，整组可见） */
+export function scrollQueueToLoop(loop: number): void {
+  if (!queueEl) return;
+  animateTo(queueEl, targetForLoop(queueEl, loop, 1), 280);
+}

package/src/core/markdown.ts

@@ -0,0 +1,170 @@
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+import { marked } from 'marked';
+
+// ============================================================
+// Markdown 渲染（marked + katex + 代码高亮）
+// ============================================================
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
+const CODE_KEYWORDS = new Set([
+  'function','const','let','var','return','if','else','for','while','do','switch','case','break',
+  'continue','new','class','extends','super','import','export','from','default','async','await',
+  'try','catch','finally','throw','typeof','instanceof','in','of','this','null','undefined','true',
+  'false','void','delete','yield','static','get','set','public','private','protected','readonly',
+  'interface','type','enum','namespace','declare','abstract','implements','package','def','lambda',
+  'then','when','where','data','typeclass','module','pub','fn','use','let','mut','impl','struct',
+  'enum','trait','fn','match','println','int','float','double','char','boolean','String','int64',
+  'print','range','if','elif','else','for','while','in','not','and','or','None','True','False',
+]);
+
+/** 单块代码语法高亮（轻量级，与 App highlightCode 一致） */
+export function highlightCode(code: string, lang?: string): string {
+  const esc = (s: string) =>
+    s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+  const tokenRe = /(\/\/[^\n]*)|("[^"\n]*"|'[^'\n]*')|(\b\d+(?:\.\d+)?\b)|([A-Z]\w*)|(\b[A-Za-z_]\w*\b)|(\s+)/g;
+
+  let out = '';
+  let last = 0;
+  const text = code;
+  let m: RegExpExecArray | null;
+  while ((m = tokenRe.exec(text)) !== null) {
+    const [full, comment, str, num, type, kw] = m;
+    if (m.index > last) out += esc(text.slice(last, m.index));
+    if (comment) out += `<span class="tok tok-comment">${esc(comment)}</span>`;
+    else if (str) out += `<span class="tok tok-str">${esc(str)}</span>`;
+    else if (num) out += `<span class="tok tok-num">${esc(num)}</span>`;
+    else if (type) out += `<span class="tok tok-type">${esc(type)}</span>`;
+    else if (kw && CODE_KEYWORDS.has(kw)) out += `<span class="tok tok-kw">${esc(kw)}</span>`;
+    else if (kw) out += esc(kw);
+    else out += esc(full);
+    last = m.index + full.length;
+  }
+  if (last < text.length) out += esc(text.slice(last));
+  void lang;
+  return out;
+}
+
+/** 数学公式：内联 $...$ / \(...\) 与块级 $$...$$ / \[...\] */
+function renderMath(content: string, displayMode: boolean): string {
+  try {
+    return katex.renderToString(content, {
+      displayMode,
+      throwOnError: false,
+      output: 'html',
+    });
+  } catch {
+    return content;
+  }
+}
+
+interface BlockMathMatch {
+  raw: string;
+  content: string;
+  index: number;
+}
+
+/** 解析块级数学公式（$$ 或 \[ \]） */
+function extractBlockMath(source: string): { text: string; matches: BlockMathMatch[] } {
+  const matches: BlockMathMatch[] = [];
+  // $$...$$ (支持多行)
+  const re1 = /\$\$([\s\S]+?)\$\$/g;
+  const cleaned = source
+    .replace(re1, (raw, content, index) => {
+      matches.push({ raw, content: content.trim(), index });
+      return `BLOCKMATH${matches.length - 1}`;
+    })
+    .replace(/\\\[([\s\S]+?)\\\]/g, (raw, content, index) => {
+      matches.push({ raw, content: content.trim(), index });
+      return `BLOCKMATH${matches.length - 1}`;
+    });
+  return { text: cleaned, matches };
+}
+
+/** 内联数学 $...$ */
+function renderInlineMath(html: string): string {
+  // 先保护代码块里的 $（marked 已转义为 &dollar;，避免冲突）
+  const inlineRe = /(?<!\\)\$(?!\$)(.+?)(?<!\\)\$/g;
+  let attempts = 0;
+  let result = html;
+  while (inlineRe.test(result) && attempts < 20) {
+    attempts++;
+    result = result.replace(
+      inlineRe,
+      (raw, content: string) => {
+        try {
+          const rendered = katex.renderToString(content.trim(), { throwOnError: false, displayMode: false });
+          return rendered;
+        } catch {
+          return raw;
+        }
+      }
+    );
+  }
+  return result;
+}
+
+/** 主流程：源文本 → 分段（含数学与代码高亮） */
+export function renderMarkdown(source: string, opts?: { mathEnabled?: boolean }): string {
+  const mathEnabled = opts?.mathEnabled ?? true;
+  // 1. 提取块级数学
+  const { text, matches } = extractBlockMath(source);
+
+  // 2. 保护代码块（防止 marked 解析数学占位符）
+  const codeBlocks: string[] = [];
+  const withoutCode = text.replace(/```[\s\S]*?```/g, (raw) => {
+    codeBlocks.push(raw);
+    return `CODE${codeBlocks.length - 1}`;
+  });
+
+  // 3. marked 渲染
+  let html = marked.parse(withoutCode, { async: false }) as string;
+
+  // 4. 还原代码块并高亮
+  html = html.replace(/CODE(\d+)/g, (_, i) => {
+    const raw = codeBlocks[Number(i)];
+    const langMatch = raw.match(/^```(\w*)\s*\n([\s\S]*?)\n*```$/);
+    const lang = langMatch?.[1] ?? '';
+    const code = langMatch?.[2] ?? raw.replace(/^```\w*\s*\n?/, '').replace(/```$/, '');
+    return `<pre class="code-block"><code class="lang-${lang}">${highlightCode(code, lang)}</code></pre>`;
+  });
+
+  // 5. 还原块级数学
+  html = html.replace(/BLOCKMATH(\d+)/g, (_, i) => {
+    const m = matches[Number(i)];
+    if (mathEnabled && m) return `<div class="math-block">${renderMath(m.content, true)}</div>`;
+    return `<div class="math-block mono math-fallback">$$${m?.content ?? ''}$$</div>`;
+  });
+
+  // 6. 行内数学（保留 <code> 内部）
+  if (mathEnabled) {
+    const htmlNoCode = html.replace(/<code[^>]*>[\s\S]*?<\/code>/g, (raw) => {
+      const token = `CODEHTML${codeBlocks.length}`;
+      codeBlocks.push(raw);
+      return token;
+    });
+    let processed = renderInlineMath(htmlNoCode);
+    processed = processed.replace(/CODEHTML(\d+)/g, (_, i) => codeBlocks[i]);
+    html = processed;
+  }
+
+  return html;
+}
+
+/** @mention 高亮（发言者名字最长优先；斜体加粗 + 特殊字体颜色，作为特殊文本内指令） */
+export function highlightMentions(html: string, names: string[]): string {
+  const sorted = [...names].sort((a, b) => b.length - a.length);
+  let result = html;
+  for (const name of sorted) {
+    // 仅在非 code 区域高亮（简化处理：直接替换 @名字）
+    // Markdown conversion normally leaves a closing HTML tag after a terminal mention (for example @用户</p>).
+    const re = new RegExp(`(@${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})(?=\\s|[，。！？,.!?]|<|$)`, 'g');
+    result = result.replace(re, '<span class="mention" title="点名该角色">$1</span>');
+  }
+  return result;
+}