bothouse-dsh 0.1.48 → 0.1.49

package/collab/memory-sources.mjs

@@ -0,0 +1,159 @@
+// #1020 回复的记忆来源：which pushed memory entries a reply used, shown as a badge under it.
+// The gate pushes entries tagged [#编号] before each turn (bridge/contrib/gate/ctxsvc.py exp_tag) and the
+// agent reports the ones it used with memvote.py (+编号), which appends a by="self" line to votes.jsonl
+// ({t, voter: CC_PROJECT, id: "页#指纹", vote, by, key: CC_SESSION_KEY, agent}). This module tails that file
+// and hands each new reply of a member the entries it cited in that room since its previous reply.
+// Nothing is guessed: no citation, no badge (a member that never runs memvote gets none).
+//
+// Where the file is: MEMVOTE_DIR (memvote.py's own override), else <gate data dir>/gate, where bothouse
+// installs the gate (bridge/core/gate_proc.go). The data dir is found the way the gate itself finds it
+// (bridge/contrib/gate/datadir.py data_dir, Go brand.go dataDir): BOTHOUSE_DATA_DIR, GATE_SETUP_DIR,
+// CC_DATA_DIR, else ~/.bothouse (~/.cc-connect only while that legacy layout is the one that exists).
+// It must not depend on BOTHOUSE_DATA_DIR alone: a `dsh web` started by a script that reuses an old
+// environment has only CC_DATA_DIR, and the badge used to vanish there silently.
+// Page paths are relative to GATE_WIKI (~/wiki) or start with ~/ for a role wiki (memvote.full_id).
+import { closeSync, existsSync, openSync, readSync, readFileSync, statSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+const MAX_ITEMS = 12; // a badge lists at most this many entries
+const TITLE_CHARS = 120;
+
+/** `~/x` in a config value, as expanduser does for the gate (datadir.guard). */
+const expand = (value, home) => String(value ?? '').trim().replace(/^~(?=\/|$)/, home);
+
+/**
+ * The bothouse data dirs this machine may have, in the order the gate itself picks one
+ * (bridge/contrib/gate/datadir.py data_dir; Go brand.go dataDir for the last one).
+ * @param {NodeJS.ProcessEnv} env
+ * @param {string} home
+ * @returns {string[]}
+ */
+export function dataDirCandidates(env = process.env, home = homedir()) {
+  const dirs = [];
+  for (const key of ['BOTHOUSE_DATA_DIR', 'GATE_SETUP_DIR', 'CC_DATA_DIR']) {
+    const dir = expand(env[key], home);
+    if (dir !== '') dirs.push(dir);
+  }
+  // ~/.cc-connect is the legacy layout, used only while ~/.bothouse does not exist and it does.
+  const preferred = join(home, '.bothouse');
+  const legacy = join(home, '.cc-connect');
+  dirs.push(!existsSync(preferred) && existsSync(legacy) ? legacy : preferred);
+  return dirs;
+}
+
+/**
+ * memvote.py's votes.jsonl: MEMVOTE_DIR when set (memvote's own override names the one file it writes),
+ * else <the gate's data dir>/gate. Same precedence as the gate reading its own directory, so a `dsh web`
+ * that inherited only CC_DATA_DIR reads the file the running gate actually appends to.
+ * @param {NodeJS.ProcessEnv} env
+ * @param {string} home
+ * @returns {string}
+ */
+export function defaultVotesFile(env = process.env, home = homedir()) {
+  const dir = expand(env.MEMVOTE_DIR, home);
+  if (dir !== '') return join(dir, 'votes.jsonl');
+  return join(dataDirCandidates(env, home)[0], 'gate', 'votes.jsonl');
+}
+
+/** Room id a cite's session key names: bridge cloud-web "…room-<id>…", or the DSH gate key "dsh:<member>:<room>". */
+export function keyRoom(key) {
+  const s = String(key ?? '');
+  const m = /(?:^|:)room-(\d+)(?::|$)/.exec(s) ?? /^dsh:[^:]+:(\d+)$/.exec(s);
+  return m ? Number(m[1]) : undefined;
+}
+
+export class MemorySources {
+  /** @param options - { file?: votes.jsonl path, wiki?, home?, logger? } */
+  constructor({ file = defaultVotesFile(), wiki = process.env.GATE_WIKI || join(homedir(), 'wiki'), home = homedir(), logger } = {}) {
+    this.file = file;
+    this.wiki = String(wiki).replace(/^~(?=\/|$)/, home);
+    this.home = home;
+    this.logger = logger;
+    // Say which file the badge reads, so a silent one is explained in the log instead of vanishing.
+    if (!this.file) this.logger?.warn?.('collab: memory sources: no votes.jsonl path (set BOTHOUSE_DATA_DIR, GATE_SETUP_DIR or CC_DATA_DIR, or MEMVOTE_DIR); replies carry no memory sources');
+    else if (existsSync(this.file)) this.logger?.info?.('collab: memory sources: reading %s', this.file);
+    else this.logger?.warn?.('collab: memory sources: %s does not exist yet (wrong data dir, or the gate has not recorded a cite); replies carry no memory sources until it appears', this.file);
+    // Only citations made after this process started belong to its replies.
+    this.offset = this.size();
+    this.rest = '';
+    /** `${voter}\0${room}` -> ordered unique entry ids cited and not yet shown. */
+    this.pending = new Map();
+    this.titles = new Map();
+  }
+
+  size() {
+    if (!this.file) return 0;
+    try { return statSync(this.file).size; } catch { return 0; }
+  }
+
+  /** Read the lines appended since the last call. */
+  poll() {
+    if (!this.file) return;
+    const size = this.size();
+    if (size < this.offset) { this.offset = 0; this.rest = ''; } // rotated or truncated
+    if (size === this.offset) return;
+    let fd;
+    try {
+      fd = openSync(this.file, 'r');
+      const buf = Buffer.alloc(size - this.offset);
+      readSync(fd, buf, 0, buf.length, this.offset);
+      this.offset = size;
+      const lines = (this.rest + buf.toString('utf8')).split('\n');
+      this.rest = lines.pop() ?? '';
+      for (const line of lines) this.take1(line);
+    } catch (error) {
+      this.logger?.warn?.('collab: memory sources: %s', error?.message ?? error);
+    } finally {
+      if (fd !== undefined) closeSync(fd);
+    }
+  }
+
+  take1(line) {
+    let r;
+    try { r = JSON.parse(line); } catch { return; }
+    // by="self" vote=1: the agent says it used this entry (memvote.py "+编号"); "-" (entry wrong) and "x" are not sources.
+    if (r?.by !== 'self' || r.vote !== 1 || typeof r.id !== 'string' || !r.id.includes('#')) return;
+    const room = keyRoom(r.key);
+    if (room === undefined || !r.voter) return;
+    const k = `${r.voter}\u0000${room}`;
+    const list = this.pending.get(k) ?? [];
+    if (!list.includes(r.id)) list.push(r.id);
+    this.pending.set(k, list);
+  }
+
+  /**
+   * The entries `voter` cited in `room` since its previous reply there, as [{ id, ref, page, title }]
+   * (ref = the short 编号 shown in the push), and forget them. [] when it cited none.
+   */
+  take(voter, room) {
+    this.poll();
+    const k = `${voter}\u0000${room}`;
+    const ids = this.pending.get(k);
+    if (!ids?.length) return [];
+    this.pending.delete(k);
+    return ids.slice(0, MAX_ITEMS).map(id => {
+      const [page, ref] = [id.slice(0, id.lastIndexOf('#')), id.slice(id.lastIndexOf('#') + 1)];
+      return { id, ref, page, title: this.title(page, ref) };
+    });
+  }
+
+  /** The wiki line an entry id points at (memvote.full_id: sha1 of the stripped line, first 10 hex), trimmed. */
+  title(page, ref) {
+    const key = `${page}#${ref}`;
+    if (this.titles.has(key)) return this.titles.get(key);
+    let out = '';
+    const path = page.startsWith('~/') ? join(this.home, page.slice(2)) : join(this.wiki, page);
+    try {
+      for (const raw of readFileSync(path, 'utf8').split('\n')) {
+        if (createHash('sha1').update(raw.trim()).digest('hex').slice(0, 10) !== ref) continue;
+        out = raw.trim().replace(/^[-*]\s+/, '').replace(/\s+/g, ' ');
+        break;
+      }
+    } catch { /* page moved or gone: the badge still shows its path */ }
+    if (out.length > TITLE_CHARS) out = out.slice(0, TITLE_CHARS - 1) + '…';
+    this.titles.set(key, out);
+    return out;
+  }
+}

package/collab/page.html

@@ -243,7 +243,9 @@
   }
   .msg:hover { background: var(--hover-soft); }
   .msg.cont { padding-top: 2px; }
-  .msg.cont .avatar,
+  /* 续行只隐藏头像，不从网格里移除：头像一旦 display:none，正文会顶到第一列，
+     被 40px 的头像列宽挤成一字一行（#112）。 */
+  .msg.cont .avatar { visibility: hidden; }
   .msg.cont .head { display: none; }
   .msg .stamp {
     display: none;
@@ -493,6 +495,110 @@
     .composer { padding-bottom: var(--sp-2); }
     #log { padding-top: var(--sp-2); }
   }
+
+  /* ---- 消息正文 Markdown（#114 渲染）：间距用现有 --sp-*，颜色全用令牌，亮暗两套自动跟随 ---- */
+  .body.md { white-space: normal; }
+  .md > :first-child { margin-top: 0; }
+  .md > :last-child { margin-bottom: 0; }
+  .md-p { margin: 0 0 var(--sp-2); }
+  .md-h { margin: var(--sp-3) 0 var(--sp-1); font-weight: 650; color: var(--text-strong); line-height: 1.35; }
+  .md-h1, .md-h2 { font-size: 1.15em; }
+  .md-h3 { font-size: 1.05em; }
+  .md-list { margin: 0 0 var(--sp-2); padding-left: 1.5em; }
+  .md-list li { margin: 2px 0; }
+  .md-list li::marker { color: var(--faint); }
+  .md-sub { padding-left: 1em; position: relative; }
+  .md-sub::before { content: "◦"; position: absolute; left: 0; color: var(--faint); }
+  .md-quote { margin: 0 0 var(--sp-2); padding: 2px 0 2px var(--sp-3); border-left: 3px solid var(--line); color: var(--muted); }
+  .md-hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-3) 0; }
+  .md-link { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
+  .md-link:hover { text-decoration: underline; text-underline-offset: 2px; }
+  .md-code {
+    font: .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    background: var(--surface-2); color: var(--text-strong);
+    padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere;
+  }
+  /* 代码块和表格自带横向滚动：长行只滚自己，不把整页撑出横向滚动条 */
+  .md-pre { margin: 0 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; max-width: 100%; }
+  .md-pre-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 4px 6px 4px var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--faint); }
+  .md-lang { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
+  .md-copy { font: inherit; color: var(--muted); background: transparent; border: 0; border-radius: var(--r-sm); padding: 2px 8px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
+  .md-copy:hover { background: var(--hover); color: var(--text-strong); }
+  /* 代码 13px/1.55 沿用 design-spec-channels 正文 14/22 降一档 */
+  .md-pre pre { margin: 0; padding: var(--sp-3); overflow-x: auto; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-strong); tab-size: 2; }
+  .md-pre pre:focus-visible, .md-table:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .md-table { margin: 0 0 var(--sp-2); overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); }
+  .md-table table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
+  .md-table th, .md-table td { padding: 6px var(--sp-3); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
+  .md-table th { background: var(--surface); color: var(--text-strong); font-weight: 600; }
+  .md-table tr:last-child td { border-bottom: 0; }
+  .card .md-pre, .card .md-table { background: var(--bg); }
+
+  /* 回复引用：消息头下方一行，点一下跳到原消息 */
+  .reply-quote {
+    display: flex; align-items: baseline; gap: 6px; max-width: min(100%, 640px); /* 640 沿用 design-spec-channels 气泡 max-width */ margin: 2px 0 4px;
+    padding: 2px var(--sp-2); border: 0; border-left: 2px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0;
+    background: var(--hover-soft); color: var(--muted); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; min-width: 0;
+  }
+  .reply-quote:disabled { cursor: default; font-style: italic; }
+  .reply-quote:not(:disabled):hover { color: var(--text); }
+  .rq-who { font-weight: 600; color: var(--text); flex: none; }
+  .rq-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  .msg.flash { animation: msg-flash 1.2s var(--ease); }
+  @keyframes msg-flash { 0%, 30% { background: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background: transparent; } }
+
+  /* 附件：图片按原比例缩到消息宽度内，文件是一张小卡。
+     图片上限 320×240 沿用频道 React 页 ChannelsPage.module.css .attachmentImage；
+     64px 占位只在加载前撑住一块，加载后取消，避免空白图塌成 0 高再弹开。 */
+  .atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
+  .att-img { display: block; max-width: min(100%, 320px); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); line-height: 0; min-height: 64px; min-width: 64px; }
+  .att-img.loaded { min-height: 0; min-width: 0; }
+  .att-img img { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; object-fit: contain; }
+  .att-img.broken { line-height: 1.4; padding: var(--sp-2) var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
+  .att-file { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); max-width: min(100%, 320px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; transition: background var(--dur) var(--ease); }
+  .att-file:hover { background: var(--hover); }
+  .att-ext { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
+  .att-info { display: grid; min-width: 0; }
+  .att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); color: var(--text-strong); }
+  .att-size { font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
+
+  /* 系统通知：居中一行灰字，不当成一条对话 */
+  .msg.notice { display: block; padding-top: 2px; padding-bottom: 2px; }
+  .msg.notice:hover { background: transparent; }
+  .notice-line { display: flex; justify-content: center; align-items: baseline; gap: var(--sp-2); color: var(--faint); font-size: var(--fs-xs); text-align: center; }
+  .notice-text { font-style: normal; color: var(--muted); }
+  .notice-text .md-p { margin: 0; }
+
+  /* 思考过程：收成一行灰字，点开才看推理。不占头像列、不改对话节奏。 */
+  .msg.think-row, .msg.tool-row { display: block; }
+  .think { margin: 2px 0 var(--sp-2); }
+  .think-toggle {
+    all: unset; display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
+    color: var(--faint); font-size: var(--fs-sm); line-height: 1.5; border-radius: var(--r-sm);
+  }
+  .think-toggle:hover { color: var(--muted); }
+  .think-toggle .chev { font-size: 11px; transition: transform var(--dur) var(--ease); }
+  .think-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
+  .think-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease); }
+  .think[data-open="true"] .think-body { grid-template-rows: 1fr; }
+  .think-body > div { overflow: hidden; color: var(--muted); font-size: var(--fs-sm); border-left: 2px solid var(--line); padding-left: var(--sp-3); margin: 4px 0 2px; }
+  .think-text .md-p { margin: 0 0 var(--sp-1); }
+
+  /* 工具事件：居中一行灰字，像分隔提示，不当成一条对话，也不打断阅读。 */
+  .msg.tool-row { padding-top: 1px; padding-bottom: 1px; }
+  .tool-line { display: flex; justify-content: center; align-items: baseline; gap: 6px; color: var(--faint); font-size: var(--fs-xs); line-height: 1.6; }
+  .tool-line .tl-dot { flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
+  .tool-line .tl-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
+  .tool-line .tl-sum { max-width: min(70%, 520px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tool-line.failed .tl-name, .tool-line.failed .tl-sum { color: var(--danger); }
+  .progress-body .progress-meta { color: var(--muted); font-size: var(--fs-xs); margin-bottom: 2px; }
+  .progress-body .tool-line { justify-content: flex-start; }
+  .progress-body .tool-line .tl-sum { max-width: 100%; }
+  @media (prefers-reduced-motion: reduce) { .think-body { transition: none; } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .msg.flash { animation: none; outline: 2px solid var(--accent); outline-offset: -2px; }
+  }
 </style>
 </head>
 <body>
@@ -628,13 +734,270 @@ function renderMembers() {
   $('thinking').textContent = names.length ? `${names.join('、')} 正在处理…` : '';
 }
 
+// ---- 消息正文渲染 ----
+// Markdown 只认常用子集（段落、标题、列表、引用、代码块、表格、分隔线、行内代码/粗斜体/删除线/链接）。
+// 全部用 DOM 节点拼，不走 innerHTML：原文里的 HTML 一律按文字显示，链接只放行 http(s)/mailto。
+const SAFE_HREF = /^(https?:|mailto:)/i;
+const INLINE = /`([^`\n]+)`|\*\*([^*\n]+?)\*\*|(?<!\w)__([^_\n]+?)__(?!\w)|~~([^~\n]+?)~~|(?<![\w*])\*([^*\s][^*\n]*?)\*(?![\w*])|\[([^\]\n]+)\]\(([^)\s]+)\)|(https?:\/\/[^\s<>"'（）「」，。；！？]+[^\s<>"'（）「」，。；！？.,;:!?)])/g;
+function mdInline(text, parent) {
+  let last = 0;
+  for (const m of text.matchAll(INLINE)) {
+    if (m.index > last) parent.append(text.slice(last, m.index));
+    if (m[1] != null) parent.append(el('code', 'md-code', m[1]));
+    else if (m[2] != null || m[3] != null) mdInline(m[2] ?? m[3], parent.appendChild(el('strong')));
+    else if (m[4] != null) mdInline(m[4], parent.appendChild(el('del')));
+    else if (m[5] != null) mdInline(m[5], parent.appendChild(el('em')));
+    else {
+      const href = m[7] ?? m[8];
+      if (SAFE_HREF.test(href)) {
+        const a = el('a', 'md-link'); a.href = href; a.target = '_blank'; a.rel = 'noopener noreferrer';
+        if (m[6] != null) mdInline(m[6], a); else a.textContent = href;
+        parent.append(a);
+      } else parent.append(m[0]);
+    }
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) parent.append(text.slice(last));
+}
+// 段内单个换行照原样换行（聊天里大家按回车分行，和频道 React 页 softBreaksToHard 一致）。
+function mdLines(lines, parent) {
+  lines.forEach((line, i) => { if (i) parent.append(el('br')); mdInline(line, parent); });
+  return parent;
+}
+const FENCE = /^\s*(`{3,}|~{3,})\s*([\w#+.-]*)/;
+const HEADING = /^\s{0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^\s{0,3}([-*_])(\s*\1){2,}\s*$/;
+const QUOTE = /^\s{0,3}>\s?(.*)$/;
+const ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+const TABLE_SEP = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
+const cells = line => line.trim().replace(/^\|/, '').replace(/\|$/, '').split(/(?<!\\)\|/).map(c => c.trim().replace(/\\\|/g, '|'));
+function codeBlock(lang, code) {
+  const box = el('div', 'md-pre');
+  const bar = el('div', 'md-pre-bar');
+  bar.append(el('span', 'md-lang', lang || '代码'));
+  const copy = el('button', 'md-copy', '复制'); copy.type = 'button';
+  copy.onclick = async () => {
+    // 流式更新只换 <code> 里的字（patchBody），复制要取当前内容，不能用建块时的旧字符串。
+    try { await navigator.clipboard.writeText(pre.querySelector('code').textContent); copy.textContent = '已复制'; }
+    catch { copy.textContent = '复制失败'; }
+    setTimeout(() => { copy.textContent = '复制'; }, 1500);
+  };
+  bar.append(copy);
+  const pre = el('pre'); pre.append(el('code', null, code)); pre.tabIndex = 0;
+  box.append(bar, pre);
+  return box;
+}
+function mdBlocks(lines, parent) {
+  let i = 0;
+  const isSpecial = (l, next) => FENCE.test(l) || HEADING.test(l) || RULE.test(l) || QUOTE.test(l) || ITEM.test(l) || (l.includes('|') && next !== undefined && TABLE_SEP.test(next));
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) { i++; continue; }
+    let m;
+    if ((m = FENCE.exec(line))) {
+      const close = new RegExp('^\\s*' + m[1][0] + '{' + m[1].length + ',}\\s*$');
+      const body = [];
+      for (i++; i < lines.length && !close.test(lines[i]); i++) body.push(lines[i]);
+      i++;
+      parent.append(codeBlock(m[2], body.join('\n')));
+    } else if ((m = HEADING.exec(line))) {
+      mdInline(m[2], parent.appendChild(el('p', 'md-h md-h' + m[1].length))); i++;
+    } else if (RULE.test(line)) {
+      parent.append(el('hr', 'md-hr')); i++;
+    } else if (QUOTE.test(line)) {
+      const body = [];
+      for (; i < lines.length && (m = QUOTE.exec(lines[i])); i++) body.push(m[1]);
+      mdBlocks(body, parent.appendChild(el('blockquote', 'md-quote')));
+    } else if (line.includes('|') && TABLE_SEP.test(lines[i + 1] ?? '')) {
+      const wrap = el('div', 'md-table'); wrap.tabIndex = 0;
+      const table = wrap.appendChild(el('table'));
+      const head = table.appendChild(el('thead')).appendChild(el('tr'));
+      for (const c of cells(line)) mdInline(c, head.appendChild(el('th')));
+      const body = table.appendChild(el('tbody'));
+      for (i += 2; i < lines.length && lines[i].includes('|') && lines[i].trim(); i++) {
+        const tr = body.appendChild(el('tr'));
+        for (const c of cells(lines[i])) mdInline(c, tr.appendChild(el('td')));
+      }
+      parent.append(wrap);
+    } else if ((m = ITEM.exec(line))) {
+      const ordered = /\d/.test(m[2]);
+      const list = el(ordered ? 'ol' : 'ul', 'md-list');
+      if (ordered && parseInt(m[2], 10) !== 1) list.start = parseInt(m[2], 10);
+      const base = m[1].length;
+      let li = null, extra = [];
+      const flush = () => { if (li && extra.length) { li.append(el('br')); mdLines(extra, li); } extra = []; };
+      for (; i < lines.length; i++) {
+        const l = lines[i];
+        const it = ITEM.exec(l);
+        if (it && /\d/.test(it[2]) === ordered && it[1].length <= base + 1) { flush(); li = list.appendChild(el('li')); mdInline(it[3], li); continue; }
+        if (it && it[1].length > base + 1) { flush(); mdInline(it[3], li.appendChild(el('div', 'md-sub'))); continue; }
+        if (l.trim() && /^\s+/.test(l) && !isSpecial(l.trim(), lines[i + 1])) { extra.push(l.trim()); continue; }
+        break;
+      }
+      flush();
+      parent.append(list);
+    } else {
+      const para = [];
+      for (; i < lines.length && lines[i].trim() && !(para.length && isSpecial(lines[i], lines[i + 1])); i++) para.push(lines[i]);
+      parent.append(mdLines(para, el('p', 'md-p')));
+    }
+  }
+  return parent;
+}
+function renderBody(text, cls) {
+  const body = el('div', (cls ? cls + ' ' : '') + 'md');
+  mdBlocks(String(text ?? '').replace(/\r\n?/g, '\n').split('\n'), body);
+  return body;
+}
+
+const IMAGE_MIME = /^image\/(png|jpeg|gif|webp)$/; // 与 attachments.mjs INLINE_IMAGE 同一组可内联图片
+const fmtSize = n => n < 1024 ? n + ' B' : n < 1048576 ? (n / 1024).toFixed(1) + ' KB' : (n / 1048576).toFixed(1) + ' MB';
+function attachmentList(list) {
+  const box = el('div', 'atts');
+  for (const a of list) {
+    const url = `${ROOT}/collab/api/attachments/${encodeURIComponent(a.id)}`;
+    if (IMAGE_MIME.test(a.mime)) {
+      const link = el('a', 'att-img'); link.href = url; link.target = '_blank'; link.rel = 'noopener'; link.title = a.name;
+      const img = el('img'); img.alt = a.name; img.decoding = 'async'; img.src = url;
+      // 图片晚到会撑高消息流：贴底时跟着回到底部，不让读者看到内容被往下顶。
+      img.addEventListener('load', () => { link.classList.add('loaded'); keepBottom(); }, { once: true });
+      img.addEventListener('error', () => { link.classList.add('broken'); link.replaceChildren(el('span', 'att-broken', '图片加载失败：' + a.name)); }, { once: true });
+      link.append(img);
+      box.append(link);
+    } else {
+      const file = el('a', 'att-file'); file.href = url; file.download = a.name;
+      file.append(el('span', 'att-ext', (a.name.split('.').pop() || '文件').slice(0, 4).toUpperCase()));
+      const info = el('span', 'att-info');
+      info.append(el('span', 'att-name', a.name), el('span', 'att-size', fmtSize(Number(a.size) || 0)));
+      file.append(info);
+      box.append(file);
+    }
+  }
+  return box;
+}
+function replyQuote(q) {
+  const box = el('button', 'reply-quote'); box.type = 'button';
+  if (q.deleted) { box.append(el('span', 'rq-text', '原消息已撤回')); box.disabled = true; return box; }
+  box.append(el('span', 'rq-who', q.name), el('span', 'rq-text', q.text));
+  box.onclick = () => {
+    const target = $('log').querySelector(`.msg[data-id="${q.id}"]`);
+    if (!target) return;
+    target.scrollIntoView({ block: 'center', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+    target.classList.remove('flash'); void target.offsetWidth; target.classList.add('flash');
+  };
+  return box;
+}
+// 贴底跟随：滚动时记住读者是否在底部；之后任何内容变高（图片、卡片更新）都只在贴底时跟随。
+const STICK_PX = 40; // 沿用原 upsert 的贴底判定阈值
+let stuck = true;
+function keepBottom() { const log = $('log'); if (stuck) log.scrollTop = log.scrollHeight; }
+$('log').addEventListener('scroll', () => { const log = $('log'); stuck = log.scrollTop + log.clientHeight >= log.scrollHeight - STICK_PX; }, { passive: true });
+// 刚插进去的这一帧，字体与换行还没算成最终高度：贴底时再跟一帧，底部不留缝（流式输出最常见）。
+function followBottom(log, stick) {
+  if (!stick) return;
+  log.scrollTop = log.scrollHeight;
+  requestAnimationFrame(() => { if (stuck) log.scrollTop = log.scrollHeight; });
+}
+if ('ResizeObserver' in window) new ResizeObserver(keepBottom).observe($('log'));
+const messageSig = m => JSON.stringify([m.text, m.card, m.edited_at, m.attachments, m.reply_to]);
+// 外框签名：附件、引用、作者这些决定「整行长相」的东西。只有正文在变时（流式输出）原地换文字，
+// 不重建整行 —— 图片不重载、引用条不闪、代码块的横向滚动位置不丢。
+const frameSig = m => JSON.stringify([m.attachments, m.reply_to, m.author_kind, m.author]);
+
+// 思考块：一行灰字按钮，点开看内容。思考消息和进度卡里的思考行共用。
+function thinkBox(label, content) {
+  const box = el('div', 'think');
+  const btn = el('button', 'think-toggle');
+  btn.type = 'button';
+  btn.setAttribute('aria-expanded', 'false');
+  btn.append(el('span', 'think-label', label), el('span', 'chev', '›'));
+  const body = el('div', 'think-body');
+  const inner = el('div');
+  inner.append(content);
+  body.append(inner);
+  btn.onclick = () => {
+    const open = box.dataset.open === 'true';
+    box.dataset.open = String(!open);
+    btn.setAttribute('aria-expanded', String(!open));
+  };
+  box.append(btn, body);
+  return box;
+}
+function toolLine(name, sum, failed) {
+  const line = el('div', 'tool-line' + (failed ? ' failed' : ''));
+  line.append(el('span', 'tl-dot'), el('span', 'tl-name', name || '工具'));
+  if (sum) line.append(el('span', 'tl-sum', sum));
+  return line;
+}
+// 进度卡正文（cloudweb.mjs progressCardOf 的 text：首行「第 N 步 · 秒」，其后每行
+// 「• 思考/说明」「🔧 工具 — 摘要」「❌ 出错」）。连续的「•」行收成一个思考块，工具行各占一行。
+// 只读现有 text，不改协议；认不出的行照普通正文显示。
+const isProgressMeta = meta => !meta.kind && Number.isInteger(meta.steps) && typeof meta.brief === 'string';
+function progressBody(text, state) {
+  const out = el('div', 'body progress-body');
+  const lines = String(text || '').split('\n');
+  out.append(el('div', 'progress-meta', lines.shift() || ''));
+  let thoughts = [];
+  const flush = () => {
+    if (!thoughts.length) return;
+    out.append(thinkBox(state === 'running' ? '思考中…' : '思考过程', renderBody(thoughts.join('\n\n'), 'think-text')));
+    thoughts = [];
+  };
+  for (const line of lines) {
+    let mm;
+    if ((mm = /^• (.*)$/.exec(line))) { thoughts.push(mm[1]); continue; }
+    flush();
+    if ((mm = /^(🔧|❌) (.*)$/u.exec(line))) {
+      const [name, ...rest] = mm[2].split(' — ');
+      const failed = mm[1] === '❌';
+      out.append(rest.length ? toolLine(name, rest.join(' — '), failed) : toolLine(failed ? '出错' : '工具', name, failed));
+    } else if (line.trim()) out.append(renderBody(line, 'progress-other'));
+  }
+  flush();
+  return out;
+}
+
+// 思考过程：默认一行灰字，点一下展开；运行中显示「思考中…」。
+function thinkingNode(m, meta) {
+  const row = el('div', 'msg think-row');
+  row.dataset.id = m.id;
+  row.dataset.sig = messageSig(m);
+  row.dataset.frame = frameSig(m);
+  const secs = Number(meta.seconds);
+  row.append(thinkBox(meta.state === 'running' ? '思考中…' : (secs > 0 ? `思考了 ${secs} 秒` : '思考过程'), renderBody(meta.detail || m.text || '', 'think-text')));
+  return row;
+}
+// 工具事件：居中一行灰字；失败时整行标红，仍然只有一行。
+function toolNode(m, meta) {
+  const row = el('div', 'msg tool-row');
+  row.dataset.id = m.id;
+  row.dataset.sig = messageSig(m);
+  row.dataset.frame = frameSig(m);
+  row.append(toolLine(meta.title, meta.summary || String(m.text || '').split('\n')[0], meta.state === 'failed'));
+  return row;
+}
+
 function messageNode(m) {
+  let meta = {}; try { meta = JSON.parse(m.card || '{}'); } catch {}
+  // 思考与工具事件不是对话：收成一行，不占头像和昵称。
+  if (meta.kind === 'thinking') return thinkingNode(m, meta);
+  if (meta.kind === 'tool') return toolNode(m, meta);
   const system = m.author_kind === 'system';
   const row = el('div', 'msg' + (system ? ' system' : ''));
   row.dataset.id = m.id;
   row.dataset.author = m.author;
   row.dataset.ts = m.created_at;
   row.dataset.system = system ? '1' : '0';
+  row.dataset.sig = messageSig(m);
+  row.dataset.frame = frameSig(m);
+  // 系统通知（交接、派活记录等）不是对话：收成居中一行灰字，不占头像和昵称。
+  if (system && !m.card) {
+    row.classList.add('notice');
+    const line = el('div', 'notice-line');
+    line.append(renderBody(m.text, 'notice-text'), el('span', 'when', fmtTime(m.created_at)));
+    row.append(line);
+    return row;
+  }
   const member = state.members.find(x => x.id === m.author);
   row.append(avatar(m.author, m.name));
   const col = el('div');
@@ -643,6 +1006,7 @@ function messageNode(m) {
   if (member && kindLabel[member.kind]) who.append(el('span', 'tag', kindLabel[member.kind]));
   head.append(who, el('span', 'when', fmtTime(m.created_at)));
   col.append(head);
+  if (m.reply_to) col.append(replyQuote(m.reply_to));
   if (m.card) {
     let meta = {}; try { meta = JSON.parse(m.card); } catch {}
     const card = el('div', 'card');
@@ -651,7 +1015,7 @@ function messageNode(m) {
     titleRow.append(el('span', 'title', meta.title || ''));
     const label = cardStateLabel[meta.state];
     if (label) titleRow.append(el('span', 'chip', label));
-    card.append(titleRow, el('div', 'body', m.text));
+    card.append(titleRow, isProgressMeta(meta) ? progressBody(m.text, meta.state) : renderBody(m.text, 'body'));
     // Pending permission card: one button per action, posting the decision (same route as a text reply).
     if (meta.kind === 'permission' && meta.state === 'pending' && Array.isArray(meta.actions)) {
       const bar = el('div', 'actions');
@@ -663,7 +1027,8 @@ function messageNode(m) {
       card.append(bar);
     }
     col.append(card);
-  } else col.append(el('div', 'body', m.text));
+  } else if (m.text) col.append(renderBody(m.text, 'body'));
+  if (Array.isArray(m.attachments) && m.attachments.length) col.append(attachmentList(m.attachments));
   row.append(col);
   // 自己发的普通消息：悬停出现「撤回」。撤回后后端广播 deleted，这一行随之消失；
   // 这条消息触发的回答也会一起停下（后端 recall 会取消对应 turn）。
@@ -703,18 +1068,71 @@ function regroup() {
   }
 }
 
+// 正文按块对比：同一段文字算同一块，直接留用原来的节点。代码块只比语言和代码本身，
+// 不比「复制」按钮的字，否则点过复制的代码块会被当成新块重建，横向滚动位置跟着丢。
+const isCodeBlock = n => n.classList.contains('md-pre');
+const codeLang = n => n.querySelector('.md-lang')?.textContent || '';
+const blockSig = n => isCodeBlock(n)
+  ? 'pre|' + codeLang(n) + '|' + (n.querySelector('pre code')?.textContent ?? '')
+  : n.outerHTML; // 结构和属性都比：同字不同链接、粗体改普通字都要换块
+
+// 正文原地更新：内容没变的块复用，代码块长高时只换里面的字并保住横向滚动位置，其余块才替换。
+function patchBody(body, fresh) {
+  const oldNodes = [...body.children];
+  const newNodes = [...fresh.children];
+  let i = 0;
+  for (; i < oldNodes.length && i < newNodes.length; i++) {
+    const old = oldNodes[i], next = newNodes[i];
+    if (blockSig(old) === blockSig(next)) continue;
+    if (isCodeBlock(old) && isCodeBlock(next) && codeLang(old) === codeLang(next)) {
+      const pre = old.querySelector('pre');
+      const left = pre.scrollLeft;
+      pre.querySelector('code').textContent = next.querySelector('pre code').textContent;
+      pre.scrollLeft = left;
+      continue;
+    }
+    old.replaceWith(next);
+  }
+  for (; i < newNodes.length; i++) body.append(newNodes[i]);
+  for (; i < oldNodes.length; i++) oldNodes[i].remove();
+}
+
 function upsert(m) {
   if (m.room_id !== state.room) return;
   const log = $('log');
-  const stick = log.scrollTop + log.clientHeight >= log.scrollHeight - 40;
+  // 消息一到，空态/加载态就不再成立；否则第一条实时消息会顶着“还没有消息”显示（#112）。
+  log.querySelector('.state')?.remove();
+  const stick = log.scrollTop + log.clientHeight >= log.scrollHeight - STICK_PX;
   const existing = log.querySelector(`[data-id="${m.id}"]`);
-  if (existing) existing.replaceWith(messageNode(m));
+  // 重复推送（重连补拉、同一条事件到两次）内容没变就不重建，避免闪一下、丢掉代码块的横向滚动位置。
+  if (existing && existing.dataset.sig === messageSig(m)) return;
+  // 流式输出：同一条消息只涨正文、外框没变时按块原地更新，不重建整行（图片不重载、代码块不回到最左、不闪、不跳）。
+  if (existing && !m.card && existing.dataset.frame === frameSig(m)) {
+    const body = existing.querySelector(':scope > div > .body');
+    if (body) {
+      patchBody(body, renderBody(m.text, 'body'));
+      existing.dataset.sig = messageSig(m);
+      followBottom(log, stick);
+      return;
+    }
+  }
+  if (existing) {
+    // 进度卡每步整行重建：已展开的思考块保持展开，不因新的一步收回去。
+    const opened = [...existing.querySelectorAll('.think')].map(t => t.dataset.open === 'true');
+    const node = messageNode(m);
+    node.querySelectorAll('.think').forEach((t, i) => {
+      if (!opened[i]) return;
+      t.dataset.open = 'true';
+      t.querySelector('.think-toggle')?.setAttribute('aria-expanded', 'true');
+    });
+    existing.replaceWith(node);
+  }
   else {
     const after = [...log.children].find(n => n.dataset.id != null && Number(n.dataset.id) > m.id);
     log.insertBefore(messageNode(m), after || null);
   }
   regroup();
-  if (stick) log.scrollTop = log.scrollHeight;
+  followBottom(log, stick);
 }
 
 async function api(path, init) {
@@ -752,6 +1170,7 @@ async function openRoom(id) {
     if (!log.querySelector('.msg')) log.append(showState('empty', '还没有消息', ''));
     $('log').setAttribute('aria-busy', 'false');
     $('input').disabled = false;
+    stuck = true;
     $('log').scrollTop = $('log').scrollHeight;
   } catch (err) {
     if (state.room !== id) return;