@caozeal/dsh-next-git 0.1.4 → 0.1.5

package/README.md

@@ -4,6 +4,12 @@
 >
 > 原名 `dsh-plugin-git-manager`，2026-10 起包名改为 `@caozeal/dsh-next-git`（目录仍为 `dsh-next-git/`，功能不变）。
 
+## 38 秒介绍片
+
+https://github.com/user-attachments/assets/c57169b4-df00-450d-b4f0-7a2c64db03b6
+
+*全片界面为渲染示意，不含真实会话；[完整播放页](https://dsh-next-git.1017835747.workers.dev/) 另有下载版。*
+
 在 DSH Web GUI **会话的右侧边栏**加一个 Git tab（2026-10-22 从左侧全局面板迁移而来）：
 会话头部点 **Git 图标**直接打开（会自动展开右栏），或在右栏的「+ → 开始」指南页里
 选「Git 管理」。面板内容：
@@ -17,9 +23,14 @@
 - **AI 提交信息**：读取已暂存 diff + 最近提交风格，调用当前默认模型生成一行
   Conventional Commits 提交信息，填入输入框供编辑；模型不可用时降级为
   `chore: 更新 N 个文件`。
-- **提交图（graph）**：`git log --graph --all` 的图形化渲染，可点击任意提交
-  查看该 commit 的 diff。
-- **Diff 查看**：hunk 逐行渲染，带旧/新行号、增删配色、文件头与统计。
+- **彩色提交图（graph）**：`git log --graph --all` 的图形化渲染。每条分支线一种颜色，
+  跨行保持同色；分支名徽章与它自己的线条严格同色，滚到哪都认得出。同一屏出现过的
+  分支保证互不撞色（按首次出现顺序分配，不是对名字取哈希——8 色槽下取模约 1/8 会撞）。
+  可点击任意提交查看该 commit 的 diff。
+- **词级高亮 Diff**：hunk 逐行渲染，带旧/新行号、文件头与统计。真正变化的**词**
+  才有深色底，其余行内文字只是浅底——「改了什么」不用再靠眼力逐字比对。
+  增删配色直接复用平台自己的 `--dsw-alias-file-diff-*` token，深浅主题自动跟随，
+  和 GUI 里的代码块看起来是同一套东西。
 
 面板跟随当前会话的工作目录：切换会话即切换仓库；非 Git 仓库 / 无会话 / 目录被删
 时显示对应空态。右侧栏可以全屏（自带的「全屏」控件），窄列下是单列 tab 布局：
@@ -85,10 +96,12 @@ npm test          # = node --test test/*.test.mjs
 ```
 
 - `test/parsers.test.mjs`：porcelain / 分支头 / for-each-ref / graph / unified diff 解析，
-  以及 `cleanGitEnv` 的 undefined 墓碑（删除继承自父进程的坏 `GIT_CONFIG_*`）。
+  `cleanGitEnv` 的 undefined 墓碑（删除继承自父进程的坏 `GIT_CONFIG_*`），以及
+  `diffInline`（词级切分 + CJK 逐字 + 超长退化）与 `assignGraphColors`
+  （跨行同色、同屏分支不撞色的回归用例）。
 - `test/operations.test.mjs`：12 个 op 的假 exec 单测（含超时、非法参数、非仓库、降级）。
 - `test/ai-commit.test.mjs`：AI 提交信息清理、截断/半句话回退、模型流错误转 `ai-unavailable`、
-  中文仓库的降级文案（单测合计 32 条，全绿）。
+  中文仓库的降级文案（单测合计 39 条，全绿）。
 - `test/integration.test.mjs`：临时真实仓库跑 snapshot → diff → stage → commit →
   graph → 建/切/删分支 → AI 降级；不依赖 dsh 运行时。
 - `test/live/`：真实 Web GUI 的验证清单、smoke 脚本、截图证据与验证报告
@@ -137,6 +150,12 @@ op 一览：`snapshot` `graph` `diff` `stage` `unstage` `switchBranch` `deleteBr
   SVG lane 渲染（20px 行高、最多 10 lane），长历史/多分支下不会挤掉文字。
 - **失败可见**：git 非 0 退出把 stderr 摘要带回 UI，在底部状态条展示；
   只读操作（snapshot/graph/diff）不会阻断面板。
+- **配色跟随宿主**：diff 增删底色与 gutter 用 `--dsw-alias-file-diff-*`，词级高亮
+  用它算出的 34% 透明叠加；两张主题各自的值由平台提供，插件不写死颜色。
+  提交图的 8 色 lane 调色板是本插件自己的 `--gm-lane-*`（平台没有这个 token）。
+- **词级算法在 Host 算、Client 只渲染**：`diffInline` 是纯函数（token LCS），
+  跟解析器一起单测；Client 拿到的 `inline` 片段拼接后必须精确等于原行文本，
+  所以渲染层不需要任何对齐逻辑。
 - **AI 是可选能力**：缺少 `llm` / `agentDefaultModel` 时 `aiCommit` 自动降级，
   不影响提交本身。
 

package/lib/client.js

@@ -277,6 +277,16 @@ window.__ModuleLoader__.load({
         --gm-blue-18: color-mix(in srgb, var(--gm-blue) 18%, transparent);
         --gm-blue-28: color-mix(in srgb, var(--gm-blue) 28%, transparent);
         --gm-blue-40: color-mix(in srgb, var(--gm-blue) 40%, transparent);
+        /* 提交图 lane 调色板：8 色，相邻不撞色；每条分支线跨行保持同色。
+           色相刻意错开（蓝/紫/青/绿/橙/粉/黄/灰），深浅色主题下都够辨识。 */
+        --gm-lane-0: #4d6bfe;
+        --gm-lane-1: #8b5cf6;
+        --gm-lane-2: #06b6d4;
+        --gm-lane-3: #22c55e;
+        --gm-lane-4: #f59e0b;
+        --gm-lane-5: #ec4899;
+        --gm-lane-6: #14b8a6;
+        --gm-lane-7: #a855f7;
         --gm-ok: var(--dsw-alias-state-success-primary);
         --gm-err: var(--dsw-alias-state-error-primary);
         --gm-warn: var(--dsw-alias-state-warn-primary);
@@ -414,10 +424,10 @@ window.__ModuleLoader__.load({
       .gm-glane { flex:none; overflow:hidden;
         -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
         mask-image:linear-gradient(90deg, #000 88%, transparent 100%); }
-      .gm-glane line { stroke:var(--gm-blue); stroke-width:1.6; stroke-linecap:round; opacity:.65; }
-      .gm-glane circle { fill:var(--gm-blue); stroke:var(--gm-bg); stroke-width:1.4; }
-      .gm-grow.active .gm-glane line, .gm-grow:hover .gm-glane line { opacity:.95; }
-      .gm-grow.active .gm-glane circle, .gm-grow:hover .gm-glane circle { fill:var(--gm-deep); }
+      .gm-glane line { stroke:var(--gm-blue); stroke-width:1.7; stroke-linecap:round; opacity:.78; }
+      .gm-glane circle { fill:var(--gm-blue); stroke:var(--gm-card); stroke-width:1.5; }
+      .gm-grow.active .gm-glane line, .gm-grow:hover .gm-glane line { opacity:1; }
+      .gm-grow.active .gm-glane circle { stroke:var(--gm-base); stroke-width:2; }
       .gm-hash { flex:none; font-size:10.5px; color:var(--gm-blue); opacity:.75; }
       .gm-subject { flex:1 1 auto; min-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; }
       .gm-meta { flex:none; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
@@ -445,15 +455,23 @@ window.__ModuleLoader__.load({
         border:1px solid var(--gm-blue-18); display:inline-block; max-width:calc(100% - 24px);
         font-family:${mono}; font-size:10.5px; color:var(--gm-blue); white-space:pre-wrap; }
       .gm-dlines { font-family:${mono}; font-size:11.5px; line-height:1.62; margin:0 6px 6px; }
-      .gm-dline { display:flex; align-items:baseline; white-space:pre-wrap; word-break:break-all; border-radius:4px; }
-      .gm-dline.add { background:color-mix(in srgb, var(--gm-ok) 10%, transparent); }
-      .gm-dline.del { background:color-mix(in srgb, var(--gm-err) 10%, transparent); }
+      .gm-dline { display:flex; align-items:baseline; white-space:pre-wrap; word-break:break-word; border-radius:4px; }
+      /* 增删底色优先用平台自己的 diff 配色（--dsw-alias-file-diff-*），深浅色主题自动跟随；
+         主题未注入时退回原来的 color-mix 兜底。 */
+      .gm-dline.add { background:var(--dsw-alias-file-diff-added-bg, color-mix(in srgb, var(--gm-ok) 10%, transparent)); }
+      .gm-dline.del { background:var(--dsw-alias-file-diff-deleted-bg, color-mix(in srgb, var(--gm-err) 10%, transparent)); }
       .gm-ln { width:38px; flex:none; text-align:right; padding-right:8px; color:var(--gm-dim);
-        opacity:.6; user-select:none; font-variant-numeric:tabular-nums; }
+        opacity:.6; user-select:none; font-variant-numeric:tabular-nums; border-radius:3px; }
+      .gm-dline.add .gm-ln { background:var(--dsw-alias-file-diff-added-gutter, transparent); }
+      .gm-dline.del .gm-ln { background:var(--dsw-alias-file-diff-deleted-gutter, transparent); }
       .gm-sign { width:14px; flex:none; text-align:center; font-weight:700; }
-      .gm-dline.add .gm-sign { color:var(--gm-ok); }
-      .gm-dline.del .gm-sign { color:var(--gm-err); }
+      .gm-dline.add .gm-sign { color:var(--dsw-alias-file-diff-added-marker, var(--gm-ok)); }
+      .gm-dline.del .gm-sign { color:var(--dsw-alias-file-diff-deleted-marker, var(--gm-err)); }
       .gm-dtext { flex:1 1 auto; min-width:0; padding-right:10px; }
+      /* 词级高亮：只有真正变化的 token 才加深底色，一眼看出「改了哪个词」。 */
+      .gm-dword { border-radius:3px; padding:0 1px; }
+      .gm-dword.add { background:color-mix(in srgb, var(--dsw-alias-file-diff-added-marker, var(--gm-ok)) 34%, transparent); }
+      .gm-dword.del { background:color-mix(in srgb, var(--dsw-alias-file-diff-deleted-marker, var(--gm-err)) 34%, transparent); }
       .gm-meta-line { padding:2px 12px; color:var(--gm-dim); font-style:italic; }
 
       /* ---- commit card --------------------------------------------------- */
@@ -1360,6 +1378,7 @@ window.__ModuleLoader__.load({
                   prev: index > 0 ? (lines[index - 1].graph || '') : '',
                   next: index + 1 < lines.length ? (lines[index + 1].graph || '') : '',
                   cols: graphCols,
+                  colors: line.colors || [],
                 }))
             }
             var selected = state.selected && state.selected.kind === 'commit' && state.selected.hash === line.full
@@ -1374,13 +1393,21 @@ window.__ModuleLoader__.load({
                 prev: index > 0 ? (lines[index - 1].graph || '') : '',
                 next: index + 1 < lines.length ? (lines[index + 1].graph || '') : '',
                 cols: graphCols,
+                colors: line.colors || [],
               }),
               h('span', { className: 'gm-hash' }, line.hash),
               line.refs && line.refs.length > 0
                 ? h('span', { className: 'gm-row', style: { gap: '4px', flex: 'none' } }, line.refs.map(function (ref, refIndex) {
+                  var isHead = ref.indexOf('HEAD') === 0
+                  // HEAD 用渐变主色强调；其余 ref 用分支自己的 lane 色，和左侧线条同色。
                   return h('span', {
                     key: 'r:' + refIndex,
-                    className: 'gm-badge gm-ref' + (ref.indexOf('HEAD') === 0 ? ' brand' : ''),
+                    className: 'gm-badge gm-ref' + (isHead ? ' brand' : ''),
+                    style: isHead ? undefined : {
+                      color: 'var(--gm-lane-' + (line.refColor !== undefined ? line.refColor : 0) + ')',
+                      borderColor: 'color-mix(in srgb, var(--gm-lane-' + (line.refColor !== undefined ? line.refColor : 0) + ') 42%, transparent)',
+                      background: 'color-mix(in srgb, var(--gm-lane-' + (line.refColor !== undefined ? line.refColor : 0) + ') 12%, transparent)',
+                    },
                   }, ref)
                 }))
                 : null,
@@ -1418,6 +1445,12 @@ window.__ModuleLoader__.load({
      * Draws one row of the commit graph as vector lanes, so vertical lines stay
      * continuous across rows (ASCII glyphs leave gaps at 20px row heights).
      */
+    /** lane 色号 → CSS 变量名；-1（该格无连接）返回 undefined 让样式回退。 */
+    function laneVar(color) {
+      if (color === undefined || color === null || color < 0) return undefined
+      return 'var(--gm-lane-' + color + ')'
+    }
+
     function GraphLane(props) {
       var graph = props.graph || ''
       var prev = props.prev || ''
@@ -1425,22 +1458,26 @@ window.__ModuleLoader__.load({
       var cols = props.cols
       var cell = GRAPH_CELL
       var row = GRAPH_ROW
+      var colors = props.colors || []
       var parts = []
       for (var i = 0; i < cols; i += 1) {
         var ch = laneChar(graph, i)
         var cx = (i + 0.5) * cell
+        // 同一条分支线跨行保持同色：颜色由 Host 端 assignGraphColors 沿线段流动算出。
+        var stroke = { stroke: laneVar(colors[i]) }
         if (ch === '|') {
-          parts.push(h('line', { key: 'v' + i, x1: cx, y1: 0, x2: cx, y2: row }))
+          parts.push(h('line', { key: 'v' + i, x1: cx, y1: 0, x2: cx, y2: row, style: stroke }))
         } else if (ch === '/') {
-          parts.push(h('line', { key: 's' + i, x1: cx, y1: 0, x2: cx - cell, y2: row }))
+          parts.push(h('line', { key: 's' + i, x1: cx, y1: 0, x2: cx - cell, y2: row, style: stroke }))
         } else if (ch === '\\') {
-          parts.push(h('line', { key: 'b' + i, x1: cx - cell, y1: 0, x2: cx, y2: row }))
+          parts.push(h('line', { key: 'b' + i, x1: cx - cell, y1: 0, x2: cx, y2: row, style: stroke }))
         } else if (ch === '_') {
-          parts.push(h('line', { key: 'h' + i, x1: cx, y1: row - 1, x2: cx + cell, y2: row - 1 }))
+          parts.push(h('line', { key: 'h' + i, x1: cx, y1: row - 1, x2: cx + cell, y2: row - 1, style: stroke }))
         } else if (ch === '*') {
-          if (laneFromAbove(prev, i)) parts.push(h('line', { key: 'u' + i, x1: cx, y1: 0, x2: cx, y2: row / 2 }))
-          if (laneToBelow(next, i)) parts.push(h('line', { key: 'd' + i, x1: cx, y1: row / 2, x2: cx, y2: row }))
-          parts.push(h('circle', { key: 'c' + i, cx: cx, cy: row / 2, r: 3.2 }))
+          if (laneFromAbove(prev, i)) parts.push(h('line', { key: 'u' + i, x1: cx, y1: 0, x2: cx, y2: row / 2, style: stroke }))
+          if (laneToBelow(next, i)) parts.push(h('line', { key: 'd' + i, x1: cx, y1: row / 2, x2: cx, y2: row, style: stroke }))
+          parts.push(h('circle', { key: 'c' + i, cx: cx, cy: row / 2, r: 3.4,
+            style: { fill: laneVar(colors[i]) } }))
         }
       }
       return h('svg', {
@@ -1449,6 +1486,18 @@ window.__ModuleLoader__.load({
       }, parts)
     }
 
+    /**
+     * 渲染一行的文本部分；Host 在解析 diff 时已算好词级片段（line.inline），
+     * 有就只把变化的片段包成 span，没有就退回整段纯文本。
+     */
+    function inlineSpans(line) {
+      if (!line.inline || line.inline.length === 0) return line.text
+      return line.inline.map(function (part, index) {
+        if (!part.changed) return part.text
+        return h('span', { key: 'i:' + index, className: 'gm-dword' + (line.kind === 'del' ? ' del' : ' add') }, part.text)
+      })
+    }
+
     function DiffView(props) {
       var state = props.state
       var diff = state.diff
@@ -1480,7 +1529,7 @@ window.__ModuleLoader__.load({
                       h('span', { className: 'gm-ln' }, line.old === undefined ? '' : String(line.old)),
                       h('span', { className: 'gm-ln' }, line.new === undefined ? '' : String(line.new)),
                       h('span', { className: 'gm-sign' }, sign),
-                      h('span', { className: 'gm-dtext' }, line.text))
+                      h('span', { className: 'gm-dtext' }, inlineSpans(line)))
                   })))
               })))
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caozeal/dsh-next-git",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "DSH Git 管理插件：分支切换、变更暂存、提交/推送/拉取、AI 提交信息、提交图与 diff 查看",
   "type": "module",
   "main": "index.js",

package/src/git.js

@@ -290,7 +290,7 @@ export function parseStashes(raw) {
  * @param {string} raw
  * @returns {Array<{graph: string, hash: string|null, full: string|null, refs: string[], author: string, date: string, subject: string}>}
  */
-export function parseGraph(raw) {
+export function parseGraph(raw, options = {}) {
   /** @type {Array<object>} */
   const lines = []
   for (const line of String(raw ?? '').split('\n')) {
@@ -319,6 +319,19 @@ export function parseGraph(raw) {
       subject: fields.slice(5).join('\x1f'),
     })
   }
+  // 逐行算 lane 色号，Client 直接用；ref 色号与线条色号来自同一次分配，
+  // 保证「分支徽章」和「分支线」严格同色。
+  const colors = assignGraphColors(lines, options.width)
+  const assignments = assignRefColors(lines)
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index]
+    line.colors = colors[index]
+    if (line.refs && line.refs.length > 0) {
+      const head = line.refs.find((ref) => String(ref).indexOf('HEAD') === 0)
+      const color = assignments.get(canonicalRef(head || line.refs[0]))
+      if (color !== undefined) line.refColor = color
+    }
+  }
   return lines
 }
 
@@ -334,6 +347,309 @@ export function parseLines(raw) {
     .filter((line) => line !== '')
 }
 
+
+/**
+ * 把一对「删除行 / 新增行」切成词级片段，供 diff 渲染高亮真正变化的词。
+ *
+ * 算法：先按「词 / 空白 / 标点」粗切成 token，再对两组 token 做 LCS，
+ * 未匹配的 token 才是变化部分。纯函数、无依赖、可单测。
+ *
+ * 注意：中文等无空格语言按字符切，否则整行会变成一个 token（等于没高亮）。
+ *
+ * @param {string} before 删除行的文本（不含前缀符号）
+ * @param {string} after 新增行的文本（不含前缀符号）
+ * @returns {{before: Array<{text: string, changed: boolean}>, after: Array<{text: string, changed: boolean}>}}
+ */
+export function diffInline(before, after) {
+  const left = tokenizeInline(String(before ?? ''))
+  const right = tokenizeInline(String(after ?? ''))
+  // 任一侧为空（纯增/纯删）或任一侧过长（高亮收益低、LCS 变慢）时整体标记为变化。
+  if (left.length === 0 || right.length === 0 || left.length + right.length > MAX_INLINE_TOKENS) {
+    return {
+      before: [{ text: left.join(''), changed: left.length > 0 }],
+      after: [{ text: right.join(''), changed: right.length > 0 }],
+    }
+  }
+  const matched = lcsMatches(left, right)
+  return {
+    before: groupInline(left, matched.left),
+    after: groupInline(right, matched.right),
+  }
+}
+
+/** 单行词级比较的 token 上限，超过就退化成整行高亮。 */
+const MAX_INLINE_TOKENS = 400
+
+/** 是否把该 codepoint 当作可独立成词的表意字符（CJK、假名、全角标点等）。 */
+function isIdeographic(code) {
+  return (
+    (code >= 0x3040 && code <= 0x30ff) || // 平假名 / 片假名
+    (code >= 0x3400 && code <= 0x4dbf) || // CJK 扩展 A
+    (code >= 0x4e00 && code <= 0x9fff) || // CJK 基本区
+    (code >= 0xf900 && code <= 0xfaff) || // CJK 兼容表意
+    (code >= 0xff00 && code <= 0xffef) || // 全角字符
+    (code >= 0xac00 && code <= 0xd7af) // 谚文
+  )
+}
+
+/** 把一行切成分隔 token：连续标识符、连续空白、单个标点/表意字符。 */
+function tokenizeInline(text) {
+  /** @type {string[]} */
+  const out = []
+  let buffer = ''
+  let mode = ''
+  for (const char of text) {
+    const code = char.codePointAt(0) ?? 0
+    const next = /\s/.test(char) ? 'space' : isIdeographic(code) ? 'ideograph' : /[A-Za-z0-9_$]/.test(char) ? 'word' : 'punct'
+    if (next === 'ideograph') {
+      if (buffer) { out.push(buffer); buffer = '' }
+      out.push(char)
+      mode = ''
+      continue
+    }
+    if (next === mode) {
+      buffer += char
+      continue
+    }
+    if (buffer) out.push(buffer)
+    buffer = char
+    mode = next
+  }
+  if (buffer) out.push(buffer)
+  return out
+}
+
+/**
+ * 对左右 token 序列求最长公共子序列，返回两侧各自「被匹配上」的下标集合。
+ * 经典 DP；因为 MAX_INLINE_TOKENS 限制了规模，内存可以接受。
+ * @param {string[]} left
+ * @param {string[]} right
+ * @returns {{left: Set<number>, right: Set<number>}}
+ */
+function lcsMatches(left, right) {
+  const n = left.length
+  const m = right.length
+  /** @type {Uint16Array[]} */
+  const table = []
+  for (let i = 0; i <= n; i += 1) table.push(new Uint16Array(m + 1))
+  for (let i = n - 1; i >= 0; i -= 1) {
+    for (let j = m - 1; j >= 0; j -= 1) {
+      table[i][j] = left[i] === right[j]
+        ? table[i + 1][j + 1] + 1
+        : Math.max(table[i + 1][j], table[i][j + 1])
+    }
+  }
+  const matchedLeft = new Set()
+  const matchedRight = new Set()
+  let i = 0
+  let j = 0
+  while (i < n && j < m) {
+    if (left[i] === right[j]) {
+      matchedLeft.add(i)
+      matchedRight.add(j)
+      i += 1
+      j += 1
+    } else if (table[i + 1][j] >= table[i][j + 1]) {
+      i += 1
+    } else {
+      j += 1
+    }
+  }
+  return { left: matchedLeft, right: matchedRight }
+}
+
+/**
+ * 把 token 按下标是否命中合并成连续片段，减少 DOM 节点数。
+ * @param {string[]} tokens
+ * @param {Set<number>} matched
+ * @returns {Array<{text: string, changed: boolean}>}
+ */
+function groupInline(tokens, matched) {
+  /** @type {Array<{text: string, changed: boolean}>} */
+  const out = []
+  for (let index = 0; index < tokens.length; index += 1) {
+    const changed = !matched.has(index)
+    const last = out[out.length - 1]
+    if (last && last.changed === changed) last.text += tokens[index]
+    else out.push({ text: tokens[index], changed })
+  }
+  return out
+}
+
+/**
+ * 在一个 hunk 的行序列上就地附加词级高亮片段。
+ *
+ * 配对策略：同一 hunk 内相邻的连续删除块与连续新增块「按下标逐行配对」——
+ * 这是 unified diff 的常见形态，也是用户直觉上认为「这一行改成了那一行」的对应关系。
+ * 多余的删除行或新增行保持整行高亮。
+ *
+ * @param {Array<{kind: string, text: string}>} lines
+ * @returns {Array<{kind: string, text: string, old?: number, new?: number, inline?: Array<{text: string, changed: boolean}>}>}
+ */
+export function attachInlineHunks(lines) {
+  const output = lines.map((line) => ({ ...line }))
+  let index = 0
+  while (index < output.length) {
+    if (output[index].kind !== 'del') {
+      index += 1
+      continue
+    }
+    let delEnd = index
+    while (delEnd < output.length && output[delEnd].kind === 'del') delEnd += 1
+    let addEnd = delEnd
+    while (addEnd < output.length && output[addEnd].kind === 'add') addEnd += 1
+    const delCount = delEnd - index
+    const addCount = addEnd - delEnd
+    const pairs = Math.min(delCount, addCount)
+    for (let offset = 0; offset < pairs; offset += 1) {
+      const delLine = output[index + offset]
+      const addLine = output[delEnd + offset]
+      const inline = diffInline(delLine.text, addLine.text)
+      // 只在真的存在可见差异时才挂片段，纯「整行替换」不额外包 span。
+      if (inline.before.length > 1 || inline.after.length > 1 ||
+          (inline.before[0] && inline.before[0].changed) || (inline.after[0] && inline.after[0].changed)) {
+        delLine.inline = inline.before
+        addLine.inline = inline.after
+      }
+    }
+    index = addEnd
+  }
+  return output
+}
+
+/** 提交图配色槽位数；Client 侧 CSS 提供 --gm-lane-0 .. --gm-lane-{N-1}。 */
+export const GRAPH_PALETTE_SIZE = 8
+
+/** 图表单格的连接语义：'|' 竖直、'/' 从 lane i 顶到 lane i-1 底、'\\' 从 lane i-1 顶到 lane i 底。 */
+function cellLink(char, lane) {
+  if (char === '|') return { top: lane, bottom: lane }
+  if (char === '/') return { top: lane, bottom: lane - 1 }
+  if (char === '\\') return { top: lane - 1, bottom: lane }
+  if (char === '*') return { top: lane, bottom: lane }
+  if (char === '_') return { top: lane, bottom: lane }
+  return null
+}
+
+/** 取图行第 lane 个字符；越界返回空格。 */
+function graphChar(text, lane) {
+  return lane >= 0 && lane < text.length ? text[lane] : ' '
+}
+
+/** 由分支名/远程名算出稳定色号：同名分支在任何仓库、任何一次打开都是同一种颜色。 */
+export function refColorIndex(ref) {
+  const name = String(ref ?? '')
+    .replace(/^HEAD -> /, '')
+    .replace(/^tag: /, '')
+    .replace(/^origin\//, '')
+  let hash = 0
+  for (let index = 0; index < name.length; index += 1) {
+    hash = (hash * 31 + name.charCodeAt(index)) % 100003
+  }
+  return hash % GRAPH_PALETTE_SIZE
+}
+
+/**
+ * 给提交图每一行算出 lane 的颜色号。
+ *
+ * 做法是模拟一条「颜色随线段流动」的轨道：每个格子有入口 lane 和出口 lane
+ * （见 {@link cellLink}），入口颜色沿线段流到出口，于是同一条分支线在跨行时
+ * 保持同色；分支点处新出现的线段取当前未被占用的色号，避免相邻两条线撞色。
+ *
+ * 有 ref（分支/tag）的提交点会强制使用该 ref 的稳定色，这样「分支自己的颜色」
+ * 和「分支名徽章的颜色」一致，滚到哪都能认出来。
+ *
+ * @param {Array<{graph: string, refs?: string[]}>} lines
+ * @param {number} [width] 参与绘制的 lane 数；省略时按实际最长图前缀推断
+ * @returns {Array<Array<number>>} 每行每个 lane 的色号
+ */
+export function assignGraphColors(lines, width) {
+  const rows = Array.isArray(lines) ? lines : []
+  let maxWidth = 0
+  for (const line of rows) {
+    const text = line && line.graph ? line.graph : ''
+    if (text.length > maxWidth) maxWidth = text.length
+  }
+  const cols = Number.isFinite(width) && width > 0 ? Math.min(width, maxWidth) : maxWidth
+  // 先给所有出现过的 ref 分配互不相同的色号（按首次出现顺序），而不是对名字取模。
+  // 取模在 8 色槽下约 1/8 概率撞色，两条分支同色会让整张图失去辨识度
+  // （实测 feat/streaming 与 fix/empty-input 就撞在同一个色号上）。
+  const refColors = assignRefColors(rows)
+  /** @type {Map<number, number>} */
+  let entering = new Map()
+  /** @type {Array<Array<number>>} */
+  const output = []
+  for (let row = 0; row < rows.length; row += 1) {
+    const text = rows[row] && rows[row].graph ? rows[row].graph : ''
+    const refs = rows[row] && Array.isArray(rows[row].refs) ? rows[row].refs : []
+    /** @type {Array<number>} */
+    const colors = new Array(cols).fill(-1)
+    /** @type {Map<number, number>} */
+    const next = new Map()
+    /** @type {Set<number>} */
+    const used = new Set()
+    for (let lane = 0; lane < cols; lane += 1) {
+      const link = cellLink(graphChar(text, lane), lane)
+      if (!link) continue
+      let color = entering.get(link.top)
+      if (color === undefined) {
+        // 新线段：挑一个这一行还没用过的色号，相邻线不会同色。
+        color = 0
+        for (let candidate = 0; candidate < GRAPH_PALETTE_SIZE; candidate += 1) {
+          if (!used.has(candidate)) { color = candidate; break }
+        }
+      }
+      used.add(color)
+      colors[lane] = color
+      if (!next.has(link.bottom)) next.set(link.bottom, color)
+    }
+    // 提交点：有 ref 时用该分支分配到的色号，并让它继续往下流。
+    if (refs.length > 0) {
+      const dot = text.indexOf('*')
+      if (dot >= 0 && dot < cols) {
+        const head = refs.find((ref) => String(ref).indexOf('HEAD') === 0)
+        const color = refColors.get(canonicalRef(head || refs[0]))
+        if (color !== undefined) {
+          colors[dot] = color
+          next.set(dot, color)
+        }
+      }
+    }
+    output.push(colors)
+    entering = next
+  }
+  return output
+}
+
+/**
+ * 给一组图行里出现过的每个 ref 分配色号（按首次出现顺序取模）。
+ * 顺序分配保证「同一屏里出现的分支一定不同色」，比按名字哈希取模更可靠。
+ * @param {Array<{refs?: string[]}>} rows
+ * @returns {Map<string, number>} 归一化分支名 → 色号
+ */
+function assignRefColors(rows) {
+  const out = new Map()
+  let cursor = 0
+  for (const row of rows) {
+    const refs = row && Array.isArray(row.refs) ? row.refs : []
+    for (const ref of refs) {
+      const name = canonicalRef(ref)
+      if (!name || out.has(name)) continue
+      out.set(name, cursor % GRAPH_PALETTE_SIZE)
+      cursor += 1
+    }
+  }
+  return out
+}
+
+/** 把 `HEAD -> main`、`tag: v1`、`origin/main` 归一成用于配色的分支名。 */
+function canonicalRef(ref) {
+  return String(ref ?? '')
+    .replace(/^HEAD -> /, '')
+    .replace(/^tag: /, '')
+    .replace(/^origin\//, '')
+    .trim()
+}
+
 const HUNK_HEADER = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/
 
 /**
@@ -395,5 +711,7 @@ export function parseUnifiedDiff(raw) {
       // 例如 `index abc..def 100644`、`--- a/x`、`+++ b/x` 等文件头：忽略。
     }
   }
+  // 每个 hunk 的行上附加词级高亮片段（纯展示数据，UI 可忽略）。
+  for (const hunk of hunks) hunk.lines = attachInlineHunks(hunk.lines)
   return { binary, additions, deletions, hunks }
-}
+}