dsh-git-ui 0.0.2 → 0.1.0

package/src/client/file-tree.ts

@@ -0,0 +1,101 @@
+/**
+ * 变更文件路径 → 可折叠目录树（IDEA 右栏文件树形态）。
+ * 输入为 show 查询的 name-status 行（路径 + 变更状态），输出嵌套节点：
+ * 目录在前、文件在后，同层按名称字母序；文件节点携带状态（右栏按状态着色）。
+ * 不依赖 React，可纯单元测试。
+ */
+
+/** 一个变更行（与宿主 GitFileStat 同构）。 */
+export interface FileStatLike {
+  readonly path: string
+  readonly status: string
+}
+
+/** 目录树节点。 */
+export interface FileTreeNode {
+  /** 当前段名称（目录名或文件名）。 */
+  readonly name: string
+  /** 完整路径（目录 = 前缀路径，文件 = 文件路径）。 */
+  readonly path: string
+  readonly dir: boolean
+  /** 目录节点的后代；文件节点恒为空。 */
+  readonly children: readonly FileTreeNode[]
+  /** 文件节点的变更状态；目录节点为 undefined。 */
+  readonly status?: string
+}
+
+interface MutableNode {
+  name: string
+  path: string
+  dir: boolean
+  children: Map<string, MutableNode>
+  status?: string
+}
+
+function newDirNode(name: string, path: string): MutableNode {
+  return { name, path, dir: true, children: new Map() }
+}
+
+/**
+ * 变更路径 → 展示段拆分。目录条目以 `dir/`（尾斜杠）出现：目录必须剥掉尾
+ * 斜杠后取末段为名、前缀为空，否则会把目录误当文件（`.agent/` 用裸
+ * lastIndexOf('/') 会得到空名 + `.agent` 目录段）。
+ * `isDir` 透传 host 解析的权威目录标记（GitChange.isDirectory）；缺省时
+ * 回退字符串派生态（diff 面包屑等仅有 path 的场景）。
+ */
+export function splitChangePath(path: string, isDir?: boolean): { name: string; dir: string; isDir: boolean } {
+  const dirEntry = isDir ?? path.endsWith('/')
+  // 统一剥掉尾部斜杠：目录条目去掉以示目录名；非目录（权威 isDir=false）
+  // 残留的规范化尾斜杠也一并清理，避免末段拆出空名。
+  const display = path.replace(/\/+$/, '')
+  const slash = display.lastIndexOf('/')
+  return slash === -1
+    ? { name: display, dir: '', isDir: dirEntry }
+    : { name: display.slice(slash + 1), dir: display.slice(0, slash), isDir: dirEntry }
+}
+
+/** 由变更行列表构建目录树根节点集合。 */
+export function buildFileTree(stats: readonly FileStatLike[]): readonly FileTreeNode[] {
+  const root: MutableNode = newDirNode('', '')
+  for (const stat of stats) {
+    // 尾斜杠 = 目录条目（git status 未跟踪目录形态）：末段按目录节点处理。
+    const isDir = stat.path.endsWith('/')
+    const segments = stat.path.split('/').filter((s) => s !== '')
+    if (segments.length === 0) continue
+    let cursor = root
+    let prefix = ''
+    for (let i = 0; i < segments.length; i += 1) {
+      const segment = segments[i]!
+      prefix = prefix === '' ? segment : `${prefix}/${segment}`
+      const isLast = i === segments.length - 1
+      let next = cursor.children.get(segment)
+      if (next === undefined) {
+        next = isLast
+          ? { name: segment, path: prefix, dir: isDir, children: new Map(), ...(isDir ? {} : { status: stat.status }) }
+          : newDirNode(segment, prefix)
+        cursor.children.set(segment, next)
+      }
+      cursor = next
+    }
+  }
+  return freeze(root.children)
+}
+
+/** 递归转换并排序：目录在前、文件在后，同层字母序。 */
+function freeze(level: Map<string, MutableNode>): readonly FileTreeNode[] {
+  const nodes: FileTreeNode[] = []
+  for (const node of level.values()) {
+    nodes.push({
+      name: node.name,
+      path: node.path,
+      dir: node.dir,
+      children: node.dir ? freeze(node.children) : [],
+      ...(node.status === undefined ? {} : { status: node.status }),
+    })
+  }
+  nodes.sort((a, b) => {
+    if (a.dir !== b.dir) return a.dir ? -1 : 1
+    return a.name.localeCompare(b.name)
+  })
+  return nodes
+}

package/src/client/git-graph.ts

@@ -0,0 +1,188 @@
+/**
+ * Git 分支图数据模型与车道生命周期列分配算法。
+ *
+ * 输入为 `git log --all` 拓扑序（新→旧）的 `GraphCommit[]`。本模块维护一组
+ * “车道”（lane）：每条车道等待下一个应出现的提交（waiting-for）。提交到达时：
+ *   - 等待该提交的所有车道中，首个承载节点，其余（`joins`）在本行经水平连接线
+ *     汇入节点——**多子汇向同一父的汇聚锚定在父节点行**（IDEA 式分叉/汇聚，
+ *     不再提前回归，修复原「return 曲线在父节点上方一行拐弯」的视觉偏移）；
+ *   - 首父继承当前车道（直线延续）；
+ *   - 第二及更多父提交复用已等待它的车道，否则开辟新车道，均产生分裂曲线；
+ *   - 释放的车道按索引回收，列数贴近历史真实并发度，永不单调增长。
+ *
+ * 一个哈希可同时被多条车道等待（分叉的多个子提交各占一条）；该提交出现时
+ * 全部收敛：节点落在首条车道，其余车道画「竖线→水平连接→节点」。
+ *
+ * 渲染契约（与行样式共用单一事实来源）：行高固定、条带占满整行，
+ * 竖线在行间自然衔接；分裂用贝塞尔曲线，汇聚用水平连接线。
+ *
+ * 不依赖 React，可纯单元测试。
+ */
+import type { GraphCommit } from '../host/types.ts'
+
+/** 渲染一行所需的全部几何信息（对应一个提交）。 */
+export interface GraphRow {
+  readonly commit: GraphCommit
+  /** 节点所在的 0 基列号。 */
+  readonly column: number
+  /** 贯穿整行（0→行高）的竖线车道：处理本行前后均活跃的车道。 */
+  readonly verticals: readonly number[]
+  /** 自上方来、本行汇入节点后关闭的车道：画竖线到节点高度 + 水平连接线入节点。 */
+  readonly joins: readonly number[]
+  /** 节点车道在本行之前已存在：自行顶到节点画半段竖线。 */
+  readonly nodeFromTop: boolean
+  /** 节点车道在本行之后延续：自节点到行底画半段竖线。 */
+  readonly nodeContinues: boolean
+  /** 自节点向下的分裂曲线（merge 的第二父 fan-out），终点在行底的目标车道。 */
+  readonly edges: readonly GraphEdge[]
+}
+
+/** 一条分裂曲线（merge 节点 → 第二父车道，着目标车道色）。 */
+export interface GraphEdge {
+  readonly from: number
+  readonly to: number
+}
+
+/**
+ * 车道列的语义调色板（明暗主题下均有足够对比度），16 色循环。
+ * 分支身份色与主题解耦是有意为之（与 IDEA 一致的固定车道配色）。
+ */
+export const GRAPH_COLORS: readonly string[] = [
+  '#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899',
+  '#06B6D4', '#84CC16', '#F97316', '#6366F1', '#14B8A6', '#E11D48',
+  '#0EA5E9', '#A855F7', '#22C55E', '#F43F5E',
+]
+
+/** 回收第一个空闲车道索引；无空闲则扩容。 */
+function freeLane(lanes: (string | null)[], opened: Set<number>): number {
+  const index = lanes.indexOf(null)
+  const lane = index === -1 ? (lanes.push(null), lanes.length - 1) : index
+  opened.add(lane)
+  return lane
+}
+
+/** 处理单个提交：更新车道并产出该行几何（buildGraph 与增量 builder 共用同一循环体）。 */
+function processCommit(commit: GraphCommit, lanes: (string | null)[]): GraphRow {
+  const opened = new Set<number>()
+  // 1. 节点列：等待该提交的所有车道（分叉多子各占一条）中首个；否则新开车道（分支尖端）。
+  //    其余等待车道记入 `joins`——本行经「竖线→水平连接线→节点」汇入（锚定父节点行）。
+  const waiting: number[] = []
+  lanes.forEach((waitingHash, index) => {
+    if (waitingHash === commit.hash) waiting.push(index)
+  })
+  const column = waiting.length > 0 ? waiting[0]! : freeLane(lanes, opened)
+  const nodeFromTop = waiting.length > 0
+  const joins = waiting.slice(1)
+  for (const index of waiting) lanes[index] = null
+
+  // 2. 首父：本车道直线延续（新模型不提前回归——汇聚由父节点行的 joins 表达）。
+  const edges: GraphEdge[] = []
+  const firstParent = commit.parents[0]
+  let nodeContinues = false
+  if (firstParent !== undefined) {
+    lanes[column] = firstParent
+    nodeContinues = true
+  }
+
+  // 3. 第二及更多父提交：复用已等待它的车道，否则开辟新车道；均记分裂曲线。
+  for (let p = 1; p < commit.parents.length; p += 1) {
+    const parentHash = commit.parents[p]!
+    let target = lanes.indexOf(parentHash)
+    if (target === -1) {
+      target = freeLane(lanes, opened)
+      lanes[target] = parentHash
+    }
+    edges.push({ from: column, to: target })
+  }
+
+  // 4. 贯穿竖线：处理后仍在等待的车道；节点列、本行新开、本行汇入(joins)的车道除外。
+  const excluded = new Set<number>(joins)
+  excluded.add(column)
+  const verticals: number[] = []
+  lanes.forEach((waitingHash, index) => {
+    if (waitingHash === null || excluded.has(index) || opened.has(index)) return
+    verticals.push(index)
+  })
+
+  return { commit, column, verticals, joins, nodeFromTop, nodeContinues, edges }
+}
+
+/**
+ * 增量图构建器：持有车道末态，`append` 只处理新增提交并返回新增行。
+ * 既有行对象保持同一引用——配合 CommitRow 的 React.memo，避免逐批追加时全表重渲染，
+ * 也免除每次滚动对全部已加载提交的 O(n·车道) 全量重算。
+ * 集合被整体替换（过滤切换/缓存恢复）时请新建 builder 并从零 `append`。
+ */
+export interface GraphBuilder {
+  /** 已处理提交总数。 */
+  readonly count: number
+  /** 追加一批新提交（不得重复传入已处理过的提交），返回这批新增的行。 */
+  append(commits: readonly GraphCommit[]): readonly GraphRow[]
+}
+
+export function createGraphBuilder(): GraphBuilder {
+  const lanes: (string | null)[] = []
+  let count = 0
+  return {
+    get count() {
+      return count
+    },
+    append(commits) {
+      const rows: GraphRow[] = []
+      for (const commit of commits) {
+        rows.push(processCommit(commit, lanes))
+        count += 1
+      }
+      return rows
+    },
+  }
+}
+
+/** 一次性图构建：等价于 `createGraphBuilder().append(commits)`。 */
+export function buildGraph(commits: readonly GraphCommit[]): readonly GraphRow[] {
+  return createGraphBuilder().append(commits)
+}
+
+/** 图宽度（车道数）：所有行涉及的最大列号 + 1；空图为 0。循环求值，避免大数组展开。 */
+export function graphWidth(rows: readonly GraphRow[]): number {
+  let width = 0
+  const consider = (col: number): void => {
+    if (col + 1 > width) width = col + 1
+  }
+  for (const row of rows) {
+    consider(row.column)
+    for (const col of row.verticals) consider(col)
+    for (const join of row.joins) consider(join)
+    for (const edge of row.edges) consider(edge.to)
+  }
+  return width
+}
+
+/** 带悬垂标记的行：`endOpen` 表示延续线指向的父提交不在已加载集合（图上会悬垂）。 */
+export interface GraphRowMarker extends GraphRow {
+  readonly endOpen?: boolean
+}
+
+/**
+ * 标记「延续线指向的父提交不在已加载集合」的行——图上的悬垂竖线。
+ *
+ * 过滤（搜索/作者/日期）下结果集不含某些提交的父节点，`buildGraph` 的车道
+ * 永远等不到父，`nodeContinues` 的延续线会永久悬垂；分页边界同理但随下页
+ * 加载消散。`filtered` 为 false 时不标记，让边界悬垂随下页自愈。
+ * 纯函数，可单测。
+ */
+export function markFilterEnds(
+  rows: readonly GraphRow[],
+  loadedHashes: ReadonlySet<string>,
+  filtered: boolean,
+): readonly GraphRowMarker[] {
+  if (!filtered) return rows as readonly GraphRowMarker[]
+  return rows.map((row): GraphRowMarker => {
+    if (!row.nodeContinues) return row
+    const parent = row.commit.parents[0]
+    if (parent !== undefined && !loadedHashes.has(parent)) {
+      return { ...row, endOpen: true }
+    }
+    return row
+  })
+}

package/src/client/icons.tsx

@@ -0,0 +1,292 @@
+/**
+ * 通用内联 SVG 图标（纯组件，currentColor 着色，明暗主题自适应）。
+ * 取代文本符号/emoji（☁  ▸ 等），保证跨平台渲染一致且跟随语义令牌。
+ */
+import type { JSX } from 'react'
+
+/** 折叠/展开箭头：open 时旋转 90°，带平台快速过渡。 */
+export function ChevronIcon({ open }: { readonly open: boolean }): JSX.Element {
+  return (
+    <svg
+      width={10}
+      height={10}
+      viewBox="0 0 10 10"
+      style={{
+        display: 'block',
+        flex: 'none',
+        transform: open ? 'rotate(90deg)' : 'none',
+        transition: 'transform var(--ds-transition-duration-fast) var(--ds-ease-in-out)',
+      }}
+      aria-hidden="true"
+    >
+      <path
+        d="M3 1.5 L7 5 L3 8.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/** 目录图标（实心文件夹）。 */
+export function FolderIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path
+        d="M1 3 a1 1 0 0 1 1-1 h2.6 l1.2 1.4 H10 a1 1 0 0 1 1 1 V9 a1 1 0 0 1-1 1 H2 a1 1 0 0 1-1-1 Z"
+        fill="currentColor"
+        opacity={0.75}
+      />
+    </svg>
+  )
+}
+
+/** 文件图标（折角文档轮廓）。 */
+export function FileIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path
+        d="M3 1 h4 l2.5 2.5 V11 h-6.5 Z M7 1 v2.5 h2.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+// ── 文件类型分类图标（同一折角轮廓 + 内部符号区分）──────────────────────
+
+/** 代码文件图标（{ } 括号符号）。 */
+export function CodeFileIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M3 1 h4 l2.5 2.5 V11 h-6.5 Z M7 1 v2.5 h2.5" fill="none" stroke="currentColor" strokeWidth={1.2} strokeLinejoin="round" />
+      <path d="M5 5.5 L4.2 7 L5 8.5 M7 5.5 L7.8 7 L7 8.5" fill="none" stroke="currentColor" strokeWidth={1} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/** 配置文件图标（齿轮符号）。 */
+export function ConfigFileIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M3 1 h4 l2.5 2.5 V11 h-6.5 Z M7 1 v2.5 h2.5" fill="none" stroke="currentColor" strokeWidth={1.2} strokeLinejoin="round" />
+      <circle cx={6} cy={7} r={1.4} fill="none" stroke="currentColor" strokeWidth={1} />
+      <path d="M6 5 V5.6 M6 8.4 V9 M4.6 7 H5.2 M6.8 7 H7.4" fill="none" stroke="currentColor" strokeWidth={1} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** 文档文件图标（文本行符号）。 */
+export function DocFileIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M3 1 h4 l2.5 2.5 V11 h-6.5 Z M7 1 v2.5 h2.5" fill="none" stroke="currentColor" strokeWidth={1.2} strokeLinejoin="round" />
+      <path d="M4.5 5 H7.5 M4.5 6.5 H7.5 M4.5 8 H6.5" fill="none" stroke="currentColor" strokeWidth={1} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** 图片文件图标（山峰符号）。 */
+export function ImageFileIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M3 1 h4 l2.5 2.5 V11 h-6.5 Z M7 1 v2.5 h2.5" fill="none" stroke="currentColor" strokeWidth={1.2} strokeLinejoin="round" />
+      <path d="M4 8.5 L5.5 6.5 L7 8.5 M6.5 8.5 L7.5 7 L8.5 8.5" fill="none" stroke="currentColor" strokeWidth={1} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+// ── 按扩展名/基名选择文件类型图标 ──────────────────────────────────────
+
+const CODE_EXTS = new Set([
+  'ts', 'tsx', 'js', 'jsx', 'mjs', 'cjs', 'py', 'go', 'rs', 'rb', 'java', 'kt', 'kts',
+  'swift', 'c', 'h', 'cpp', 'cc', 'cxx', 'hpp', 'hxx', 'cs', 'vb', 'php', 'vue', 'svelte',
+  'sh', 'bash', 'zsh', 'fish', 'ps1', 'bat', 'cmd', 'lua', 'r', 'scala', 'clj', 'ex', 'exs',
+  'erl', 'elm', 'dart', 'groovy', 'gradle', 'ml', 'fs', 'fsx', 'pl', 'pm', 'tcl',
+])
+const CONFIG_EXTS = new Set([
+  'json', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf', 'env', 'lock', 'properties',
+  'editorconfig', 'gitignore', 'gitattributes', 'dockerignore', 'npmrc', 'prettierrc',
+  'eslintrc', 'babelrc', 'node-version', 'nvmrc',
+])
+const DOC_EXTS = new Set([
+  'md', 'mdx', 'txt', 'rst', 'pdf', 'doc', 'docx', 'rtf', 'adoc', 'org',
+])
+const IMAGE_EXTS = new Set([
+  'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp', 'tiff', 'tif', 'avif',
+])
+const STYLESHEET_EXTS = new Set([
+  'css', 'scss', 'sass', 'less', 'styl',
+])
+
+/** 按文件路径选择类型图标（扩展名/基名分类），不匹配时回退通用文件图标。
+ * 目录条目（尾斜杠，如 `.agent/`）先剥尾斜杠再分类。纯点文件（`.agent` 的
+ * 点即首字符）无扩展名语义：不把 `agent` 当后缀匹配代码/文档/图片等集合，
+ * 仅白名单配置类 dotfile（`.gitignore`/`.npmrc` 等）给配置图标，其余通用文件图标。 */
+export function fileIconForPath(path: string): JSX.Element {
+  const clean = path.endsWith('/') ? path.slice(0, -1) : path
+  const baseName = clean.slice(clean.lastIndexOf('/') + 1).toUpperCase()
+  if (baseName === 'LICENSE' || baseName === 'README' || baseName === 'CHANGELOG' || baseName === 'AUTHORS') return <DocFileIcon />
+  if (baseName === 'MAKEFILE' || baseName === 'DOCKERFILE' || baseName === 'CMAKECACHE') return <CodeFileIcon />
+  const dot = clean.lastIndexOf('.')
+  if (dot === -1) return <FileIcon />
+  const ext = clean.slice(dot + 1).toLowerCase()
+  // 纯点文件：点即首字符（如 `.agent`）——不把首段当扩展名参与类型分类。
+  if (dot === 0) return CONFIG_EXTS.has(ext) ? <ConfigFileIcon /> : <FileIcon />
+  if (CODE_EXTS.has(ext)) return <CodeFileIcon />
+  if (CONFIG_EXTS.has(ext)) return <ConfigFileIcon />
+  if (DOC_EXTS.has(ext)) return <DocFileIcon />
+  if (IMAGE_EXTS.has(ext)) return <ImageFileIcon />
+  if (STYLESHEET_EXTS.has(ext)) return <CodeFileIcon />
+  return <FileIcon />
+}
+
+/** 分支图标（git branch）。 */
+export function BranchIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <circle cx={3.5} cy={2.5} r={1.5} fill="currentColor" />
+      <circle cx={3.5} cy={9.5} r={1.5} fill="currentColor" />
+      <circle cx={8.5} cy={2.5} r={1.5} fill="currentColor" />
+      <path d="M3.5 4 v4 M8.5 4 c0 2.5-2.5 2.5-4.5 3" fill="none" stroke="currentColor" strokeWidth={1.2} />
+    </svg>
+  )
+}
+
+
+/** 星形图标（默认/main 分支标识，IDEA 式）。 */
+export function StarIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path
+        d="M6 0.8 l1.5 3.1 3.4 0.45 -2.5 2.35 0.65 3.35 L6 8.45 l-3.05 1.6 0.65-3.35 -2.5-2.35 3.4-0.45 Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+/** 全部展开（双箭头下）。 */
+export function ExpandAllIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block' }} aria-hidden="true">
+      <path d="M2 1.5 L6 5 L10 1.5 M2 6 L6 9.5 L10 6" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/** 全部收起（双箭头上）。 */
+export function CollapseAllIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block' }} aria-hidden="true">
+      <path d="M2 4.5 L6 1 L10 4.5 M2 9 L6 5.5 L10 9" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/** 标签图标。 */
+export function TagIcon(): JSX.Element {
+  return (
+    <svg width={12} height={12} viewBox="0 0 12 12" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path
+        d="M1.5 1.5 h4 l5 5 l-4 4 l-5-5 Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+      <circle cx={3.8} cy={3.8} r={0.9} fill="currentColor" />
+    </svg>
+  )
+}
+
+// ── Changes 行悬停操作图标（IDEA 式：对照/暂存/取消暂存/回滚）────────────
+
+/** 对照查看图标：并排双栏窗格。 */
+export function DiffIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <rect x={1.5} y={2.5} width={11} height={9} rx={1.2} fill="none" stroke="currentColor" strokeWidth={1.2} />
+      <path d="M7 2.5 v9" stroke="currentColor" strokeWidth={1.2} />
+    </svg>
+  )
+}
+
+/** 暂存图标（加号：加入暂存区）。 */
+export function StageIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M7 3 v8 M3 7 h8" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** 取消暂存图标（减号：移出暂存区）。 */
+export function UnstageIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M3 7 h8" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** 回滚（丢弃）图标：撤销箭头。 */
+export function RollbackIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path
+        d="M5.5 3 L3 5.5 L5.5 8 M3.4 5.5 h5.1 a3 3 0 0 1 0 6 h-2"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/** 上一个（左箭头）。 */
+export function PrevIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M8.5 3 L4.5 7 L8.5 11" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/** 下一个（右箭头）。 */
+export function NextIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M5.5 3 L9.5 7 L5.5 11" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+/** 关闭（叉号）。 */
+export function CloseIcon(): JSX.Element {
+  return (
+    <svg width={14} height={14} viewBox="0 0 14 14" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M3.5 3.5 L10.5 10.5 M10.5 3.5 L3.5 10.5" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** 告警三角（圆角填充 + 感叹号），用于告警横幅语义图标。 */
+export function AlertIcon(): JSX.Element {
+  return (
+    <svg width={16} height={16} viewBox="0 0 16 16" style={{ display: 'block', flex: 'none' }} aria-hidden="true">
+      <path d="M8 1.5 L14.5 13 L1.5 13 Z" fill="currentColor" opacity={0.15} stroke="currentColor" strokeWidth={1.2} strokeLinejoin="round" />
+      <path d="M8 6 V9.5" fill="none" stroke="currentColor" strokeWidth={1.4} strokeLinecap="round" />
+      <circle cx={8} cy={11.3} r={0.8} fill="currentColor" />
+    </svg>
+  )
+}
+

package/src/client/index.ts

@@ -19,7 +19,7 @@
  * standalone plugin mounts its own.)
  */
 import type { TypertRemoteContribution } from '@deepseek-ai/dsh-typert-protocol'
-import { GitController, type GitView, type GitObservable, type GitRemoteLike } from './controller.ts'
+import { GitController, type GitRemoteLike } from './controller.ts'
 import { gitInfoRemote } from './remote.ts'
 import { GitPill, type GitInjected } from './GitPill.tsx'
 import { en, zh } from './locales.ts'
@@ -125,6 +125,7 @@ export async function apply(ctx: ClientContext): Promise<void> {
                 hooks: { git: controller as GitInjected['hooks']['git'] },
                 refresh: () => controller.refresh(),
                 run: (action) => controller.run(action),
+                query: (query) => controller.query(query),
               }
               faces.set(sessionId, face)
             }