pi-session-peek 0.5.1 → 0.5.2

package/src/peek-component.ts

@@ -1,7 +1,6 @@
 import {
   Input,
   Key,
-  Markdown,
   matchesKey,
   truncateToWidth,
   visibleWidth,
@@ -12,17 +11,21 @@ import {
   type TuiMouseEventResult,
 } from "@earendil-works/pi-tui";
 import { msg } from "./i18n.ts";
-import { anyMatch, highlight, lineHasMatch, matchesSession, parseQuery, roleTerms, snippet, type ParsedQuery, type RoleTerms } from "./query.ts";
-import { bounds, highlightColumns, rowColumns, selectionText, type Cell, type Pane, type Selection } from "./selection.ts";
-import type { PeekMsg, PeekSession } from "./sessions.ts";
+import { DragSelect } from "./drag-select.ts";
+import { BODY_TOP, bodyRows, paneWidths } from "./layout.ts";
+import { buildList, followSelection, listRows, visibleItems } from "./list.ts";
+import { buildPreview, initialOffset, nextMatchTarget, type RenderCache } from "./preview.ts";
+import { matchesSession, parseQuery, roleTerms, type ParsedQuery, type RoleTerms } from "./query.ts";
+import { bounds, highlightColumns, rowColumns, selectionText, type Selection } from "./selection.ts";
+import type { PeekSession } from "./sessions.ts";
 import { fmtTime, normPath, padEndVisible } from "./text.ts";
+import type { PeekTheme } from "./theme.ts";
 
-// 双栏选择器。文件操作（删除 / 重命名 / 分叉）不在这里做，由 index.ts 通过回调注入
+// 双栏选择器。文件操作（删除 / 重命名 / 分叉）不在这里做，由 index.ts 通过回调注入。
+// 几何常量在 layout.ts，左栏在 list.ts，右栏在 preview.ts，拖选状态机在 drag-select.ts
 
-const BODY_TOP = 3; // 头部、搜索框、分隔线之后才是双栏主体
-const SEP = 3; // 两栏之间 " │ " 占的列数
 const WHEEL_LINES = 3; // 滚轮每格滚几行预览，和 Shift+↑↓ 一样
-const AUTO_SCROLL_MS = 50; // 拖选拖出预览上下边时自动滚动的节奏，和 pi-tui 一样
+const WHEEL_ITEMS = 1; // 滚轮每格滚几个列表项（每项两行）。只滚视图，不换选中项，像浏览器的滚动条
 const HINT_MS = 1500; // 底部"已复制"提示停留时间
 
 export class PeekComponent implements Component, Focusable {
@@ -31,26 +34,31 @@ export class PeekComponent implements Component, Focusable {
   private filtered: PeekSession[] = [];
   private selected = 0;
   private listOffset = 0;
+  private followSel = true; // 下次 render 把选中项带回视野：换选中项、重新过滤、删除后置真，滚轮滚列表不置
   private previewOffset = 0;
   private previewKey = ""; // 预览缓存的键（会话 + 关键词 + 宽度 + 工具开关），置空强制重建
   private showTools = false; // Ctrl+T：预览里显示每次工具调用的一行摘要
   private previewLines: string[] = [];
   private matchLines: number[] = []; // 预览里含关键词的行（升序），Ctrl+N / Ctrl+P 用
-  private rendered = new WeakMap<PeekMsg, { w: number; lines: string[] }>(); // 每条消息渲染好的行，按宽度缓存
-  private confirmingDelete = false; // Ctrl+D 之后等待确认
-  private renaming = false; // Ctrl+R 之后正在输入名字
+  private rendered: RenderCache = new WeakMap(); // 每条消息渲染好的行，按宽度缓存
+  // 三个互斥的输入状态：搜索（默认）、Ctrl+R 之后在输入新名字、Ctrl+D 之后等待确认。改名和确认只从搜索进入、退回搜索
+  private mode: "search" | "rename" | "confirmDelete" = "search";
   private busy = false; // 删除 / 重命名的异步回调还没回来：期间不能再删、改名、进入或分叉，免得对同一个文件动两次
   private renameInput: Input;
   private cachedWidth = -1;
   private cachedLines: string[] = [];
   private layout = { lw: 0, rw: 0, H: 0 }; // 最近一次 render 的分栏尺寸，鼠标定位用
   private scopeSpan: [number, number] = [0, 0]; // 头部"范围"字样占的列区间，点击切换范围
-  private sel?: Selection; // 鼠标拖出来的选区，只在一栏里
-  private dragging = false; // 左键还按着
-  private selMoved = false; // 按下之后拖过没有；没拖过的选区不显示也不算数（那是单击）
-  private dragX = 0; // 最近一次拖动的列，自动滚动时焦点跟着它
-  private autoScrollDir = 0; // 拖出预览上下边：-1 往上 1 往下
-  private autoScrollTimer?: ReturnType<typeof setInterval>;
+  // 拖选状态机。分栏尺寸和滚动位置惰性从组件读，自动滚动时把新的预览偏移写回来
+  private drag = new DragSelect({
+    geometry: () => ({ ...this.layout, listOffset: this.listOffset, previewOffset: this.previewOffset }),
+    previewLength: () => this.previewLines.length,
+    setPreviewOffset: (n) => void (this.previewOffset = n),
+    changed: () => {
+      this.invalidate();
+      this.requestRender?.();
+    },
+  });
   private hint?: { text: string; ok: boolean }; // 底部一闪而过的复制结果
   private hintTimer?: ReturnType<typeof setTimeout>;
   private _focused = false;
@@ -69,7 +77,7 @@ export class PeekComponent implements Component, Focusable {
   constructor(
     private all: PeekSession[],
     private currentCwd: string,
-    private theme: any,
+    private theme: PeekTheme,
     private mdTheme: MarkdownTheme,
     private termRows: number,
     initialQuery: string,
@@ -88,8 +96,8 @@ export class PeekComponent implements Component, Focusable {
   }
   set focused(v: boolean) {
     this._focused = v;
-    this.input.focused = v && !this.renaming;
-    this.renameInput.focused = v && this.renaming;
+    this.input.focused = v && this.mode !== "rename";
+    this.renameInput.focused = v && this.mode === "rename";
   }
 
   getQuery(): string {
@@ -119,48 +127,37 @@ export class PeekComponent implements Component, Focusable {
     const idx = prev ? out.indexOf(prev) : -1;
     this.selected = idx >= 0 ? idx : keepSelection ? Math.min(this.selected, Math.max(0, out.length - 1)) : 0;
     if (!keepSelection) this.listOffset = 0;
+    this.followSel = true;
     this.previewKey = "";
-    this.clearSelection();
+    this.drag.clear();
   }
 
-  // 换选中的会话：预览重建，拖选的选区作废
+  // 换选中的会话：预览重建，拖选的选区作废，视野跟过去
   private select(idx: number): void {
     this.selected = idx;
+    this.followSel = true;
     this.previewKey = "";
-    this.clearSelection();
-  }
-
-  private clearSelection(): void {
-    this.sel = undefined;
-    this.dragging = false;
-    this.selMoved = false;
-    this.stopAutoScroll();
-  }
-
-  // 拖过的才算选区，只按下没拖的是单击
-  private activeSel(): Selection | undefined {
-    return this.sel && this.selMoved ? this.sel : undefined;
+    this.drag.clear();
   }
 
   dispose(): void {
-    this.stopAutoScroll();
+    this.drag.dispose();
     if (this.hintTimer) clearTimeout(this.hintTimer);
     this.hintTimer = undefined;
     this.onDispose?.();
   }
 
   private bodyHeight(): number {
-    const rows = process.stdout.rows || this.termRows || 24; // 每次都读，终端拉伸后布局跟着变
-    return Math.max(8, Math.min(rows - 12, 30));
+    return bodyRows(this.termRows);
   }
 
   handleInput(data: string): void {
     // 重命名输入中：Enter 提交，Esc / Ctrl+C 取消，其他键交给输入框
-    if (this.renaming) {
+    if (this.mode === "rename") {
       if (matchesKey(data, Key.enter)) {
         const s = this.filtered[this.selected];
         const name = this.renameInput.getValue().trim();
-        this.renaming = false;
+        this.mode = "search";
         this.focused = this._focused;
         this.invalidate();
         if (s && name && this.onRename && !this.busy) {
@@ -183,7 +180,7 @@ export class PeekComponent implements Component, Focusable {
         return;
       }
       if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
-        this.renaming = false;
+        this.mode = "search";
         this.focused = this._focused;
         this.invalidate();
         return;
@@ -193,8 +190,8 @@ export class PeekComponent implements Component, Focusable {
       return;
     }
     // 删除确认中：y / Enter 执行，其他任何键取消
-    if (this.confirmingDelete) {
-      this.confirmingDelete = false;
+    if (this.mode === "confirmDelete") {
+      this.mode = "search";
       this.invalidate();
       if (data === "y" || data === "Y" || matchesKey(data, Key.enter)) {
         const s = this.filtered[this.selected];
@@ -208,8 +205,9 @@ export class PeekComponent implements Component, Focusable {
               if (i >= 0) this.filtered.splice(i, 1);
               // 选中位置留在原地
               this.selected = Math.min(this.selected, Math.max(0, this.filtered.length - 1));
+              this.followSel = true;
               this.previewKey = "";
-              this.clearSelection();
+              this.drag.clear();
             }
           }).catch(() => {
           }).finally(() => {
@@ -223,7 +221,7 @@ export class PeekComponent implements Component, Focusable {
     }
     if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
       // 有拖选的选区时 Ctrl+C 是复制，和终端里的习惯一样；没有才是关闭
-      if (matchesKey(data, Key.ctrl("c")) && this.activeSel()) {
+      if (matchesKey(data, Key.ctrl("c")) && this.drag.active()) {
         this.copySelection();
         return;
       }
@@ -232,7 +230,7 @@ export class PeekComponent implements Component, Focusable {
     }
     if (matchesKey(data, Key.ctrl("d"))) {
       if (this.filtered.length && this.onDelete && !this.busy) {
-        this.confirmingDelete = true;
+        this.mode = "confirmDelete";
         this.invalidate();
       }
       return;
@@ -240,7 +238,7 @@ export class PeekComponent implements Component, Focusable {
     if (matchesKey(data, Key.ctrl("r"))) {
       const s = this.filtered[this.selected];
       if (s && this.onRename && !this.busy) {
-        this.renaming = true;
+        this.mode = "rename";
         this.renameInput.setValue(s.name || "");
         this.focused = this._focused;
         this.invalidate();
@@ -292,7 +290,7 @@ export class PeekComponent implements Component, Focusable {
     if (matchesKey(data, Key.ctrl("t"))) {
       this.showTools = !this.showTools;
       this.previewKey = "";
-      this.clearSelection();
+      this.drag.clear();
       this.invalidate();
       return;
     }
@@ -324,7 +322,7 @@ export class PeekComponent implements Component, Focusable {
   // 硬件光标在组件内的行号：搜索框在第 1 行，改名时在最后一行。常规模式的鼠标桥接靠它算组件顶行
   cursorRow(): number | undefined {
     if (!this._focused || !this.layout.H) return undefined;
-    return this.renaming ? BODY_TOP + this.layout.H + 1 : 1;
+    return this.mode === "rename" ? BODY_TOP + this.layout.H + 1 : 1;
   }
 
   // 鼠标：左栏按下选中、双击进入、滚轮换选中项；右栏滚轮滚预览；点头部"范围"切换；点输入框移光标；
@@ -341,16 +339,15 @@ export class PeekComponent implements Component, Focusable {
     if (ev.type === "wheel") {
       const delta = ev.wheelDelta ?? 0;
       if (!delta) return undefined;
-      let changed = this.confirmingDelete; // 和按键一样，滚一下就算取消确认，免得删错换过去的那条
-      this.confirmingDelete = false;
+      // 和按键一样，滚一下就算取消确认。只退出确认，改名中滚轮不退出改名
+      let changed = this.cancelConfirm();
       if (inList) {
-        if (!this.renaming) {
-          // 改名中换了会话就改错对象了
-          const next = Math.max(0, Math.min(this.filtered.length - 1, this.selected + delta));
-          if (next !== this.selected) {
-            this.select(next);
-            changed = true;
-          }
+        // 只滚视图，选中项不动；↑↓、点击、重新过滤会把选中项带回视野
+        const maxOff = Math.max(0, this.filtered.length - visibleItems(H));
+        const next = Math.max(0, Math.min(maxOff, this.listOffset + delta * WHEEL_ITEMS));
+        if (next !== this.listOffset) {
+          this.listOffset = next;
+          changed = true;
         }
       } else {
         const maxOff = Math.max(0, this.previewLines.length - H);
@@ -364,38 +361,34 @@ export class PeekComponent implements Component, Focusable {
       return { handled: true, render: changed };
     }
     if (ev.type === "drag") {
-      if (!this.dragging || !this.sel || ev.button !== "left") return undefined;
-      this.dragX = ev.x;
-      const changed = this.dragTo(ev.x, ev.y);
-      if (changed) this.selMoved = true;
-      // 右栏拖出上下边就自动滚；左栏不滚，列表是跟着选中项走的
-      if (this.sel.pane === "preview") this.setAutoScroll(bodyRow < 0 ? -1 : bodyRow >= H ? 1 : 0);
+      const d = this.drag;
+      if (!d.dragging || !d.sel || ev.button !== "left") return undefined;
+      const pane = d.sel.pane;
+      const changed = d.move(ev.x, bodyRow);
+      // 右栏拖出上下边就自动滚；左栏不滚
+      if (pane === "preview") d.autoScroll(bodyRow < 0 ? -1 : bodyRow >= H ? 1 : 0);
       if (changed) this.invalidate();
       return { handled: true, render: changed };
     }
     if (ev.button !== "left") return undefined;
     if (ev.type === "release") {
-      if (!this.dragging) return undefined;
-      this.dragging = false;
-      this.stopAutoScroll();
-      if (!this.selMoved) this.sel = undefined; // 没拖过就是单击
+      if (!this.drag.release()) return undefined;
       return { handled: true, render: false };
     }
     if (ev.type === "click") {
       // 单击在 press 里已经选中了，双击才进入
       const s = this.filtered[itemAt()];
       if (!s) return undefined;
-      if (!this.renaming && !this.busy && (ev.clickCount ?? 1) >= 2) this.onResume?.(s);
+      if (this.mode !== "rename" && !this.busy && (ev.clickCount ?? 1) >= 2) this.onResume?.(s);
       return { handled: true, render: false };
     }
     if (ev.type !== "press") return undefined;
 
     // 删除确认和已有的选区：点一下就没了，和按键一样
-    let changed = this.confirmingDelete || this.activeSel() !== undefined;
-    this.confirmingDelete = false;
-    this.clearSelection();
+    let changed = this.cancelConfirm() || this.drag.active() !== undefined;
+    this.drag.clear();
     let handled = changed;
-    if (this.renaming) {
+    if (this.mode === "rename") {
       if (ev.y === BODY_TOP + H + 1) {
         // 改名行：点哪里光标就去哪里
         this.renameInput.handleMouse({ ...ev, x: ev.x - visibleWidth(msg("renamePrefix")), y: 0 });
@@ -419,11 +412,7 @@ export class PeekComponent implements Component, Focusable {
     }
     if (inBody) {
       // 两栏里按下都可能是拖选的起点，拖起来才算数；接管后面的拖动和松开
-      const pane: Pane = inList ? "list" : "preview";
-      const cell = this.cellAt(pane, ev.x, bodyRow);
-      this.sel = { pane, anchor: cell, focus: { ...cell } };
-      this.dragging = true;
-      this.dragX = ev.x;
+      this.drag.begin(inList ? "list" : "preview", ev.x, bodyRow);
       handled = true;
     }
     if (!handled) return undefined;
@@ -431,55 +420,13 @@ export class PeekComponent implements Component, Focusable {
     return inBody ? { handled: true, capture: true, render: changed } : { handled: true, render: changed };
   }
 
-  // 屏幕位置换成某一栏的内容坐标：行是内容的绝对行号，列夹在这一栏里，拖到栏外也只选栏内的字
-  private cellAt(pane: Pane, x: number, bodyRow: number): Cell {
-    const { lw, rw, H } = this.layout;
-    const row = Math.max(0, Math.min(H - 1, bodyRow));
-    if (pane === "list") return { row: this.listOffset * 2 + row, col: Math.max(0, Math.min(lw - 1, x)) };
-    return { row: this.previewOffset + row, col: Math.max(0, Math.min(rw - 1, x - lw - SEP)) };
-  }
-
-  // 拖到某个位置：焦点跟过去。返回有没有变
-  private dragTo(x: number, y: number): boolean {
-    if (!this.sel) return false;
-    const cell = this.cellAt(this.sel.pane, x, y - BODY_TOP);
-    if (cell.row === this.sel.focus.row && cell.col === this.sel.focus.col) return false;
-    this.sel.focus = cell;
+  // 鼠标滚轮 / 按下时退出删除确认（只退出确认，改名状态不动）。返回有没有退出
+  private cancelConfirm(): boolean {
+    if (this.mode !== "confirmDelete") return false;
+    this.mode = "search";
     return true;
   }
 
-  private setAutoScroll(dir: number): void {
-    this.autoScrollDir = dir;
-    if (!dir) {
-      this.stopAutoScroll();
-      return;
-    }
-    if (this.autoScrollTimer) return;
-    this.autoScrollTimer = setInterval(() => this.autoScrollTick(), AUTO_SCROLL_MS);
-    this.autoScrollTimer.unref?.();
-  }
-
-  // 每次滚一行，焦点跟着指针：指针在上边就是视口第一行，在下边就是最后一行
-  private autoScrollTick(): void {
-    const { H } = this.layout;
-    const maxOff = Math.max(0, this.previewLines.length - H);
-    const next = Math.max(0, Math.min(maxOff, this.previewOffset + this.autoScrollDir));
-    if (!this.sel || !this.dragging || next === this.previewOffset) {
-      this.stopAutoScroll();
-      return;
-    }
-    this.previewOffset = next;
-    if (this.dragTo(this.dragX, this.autoScrollDir < 0 ? BODY_TOP - 1 : BODY_TOP + H)) this.selMoved = true;
-    this.invalidate();
-    this.requestRender?.();
-  }
-
-  private stopAutoScroll(): void {
-    if (this.autoScrollTimer) clearInterval(this.autoScrollTimer);
-    this.autoScrollTimer = undefined;
-    this.autoScrollDir = 0;
-  }
-
   // 选区里的纯文本
   private selectionToText(sel: Selection): string {
     const { lw, rw } = this.layout;
@@ -487,17 +434,17 @@ export class PeekComponent implements Component, Focusable {
     const { rt, hasBody } = this.listTerms();
     return selectionText(sel, lw, (row) => {
       const s = this.filtered[row >> 1];
-      return s && this.listRows(s, (row >> 1) === this.selected, lw, rt, hasBody)[row & 1];
+      return s && listRows(s, (row >> 1) === this.selected, lw, rt, hasBody, this.theme)[row & 1];
     });
   }
 
   // Ctrl+C：复制选区，清掉高亮，底部闪一下结果
   private copySelection(): void {
-    const sel = this.activeSel();
+    const sel = this.drag.active();
     if (!sel) return;
     const text = this.selectionToText(sel);
     const n = text.split("\n").length;
-    this.clearSelection();
+    this.drag.clear();
     this.invalidate();
     if (!text.trim() || !this.onCopy) return;
     void this.onCopy(text).then((ok) => this.showHint(ok ? msg("copied", { n }) : msg("copyFailed"), ok));
@@ -517,19 +464,12 @@ export class PeekComponent implements Component, Focusable {
     this.requestRender?.();
   }
 
-  // 预览里跳到当前视口之外的下一个 / 上一个命中行，到头了回绕。同一屏里的多个命中算一处，
-  // 否则一段里连着几行都命中要按好几次才过得去
+  // 预览里跳到当前视口之外的下一个 / 上一个命中行，到头了回绕
   private jumpMatch(dir: 1 | -1): void {
-    if (!this.matchLines.length) return;
     const H = this.bodyHeight();
     const top = this.previewOffset;
     const bottom = Math.min(top + H, this.previewLines.length) - 1;
-    let target: number | undefined;
-    if (dir === 1) {
-      target = this.matchLines.find((l) => l > bottom) ?? this.matchLines[0];
-    } else {
-      target = [...this.matchLines].reverse().find((l) => l < top) ?? this.matchLines[this.matchLines.length - 1];
-    }
+    const target = nextMatchTarget(this.matchLines, top, bottom, dir);
     if (target !== undefined) {
       this.previewOffset = Math.max(0, target - 2);
       this.invalidate();
@@ -542,168 +482,16 @@ export class PeekComponent implements Component, Focusable {
     return { rt, hasBody: rt.user.length > 0 || rt.assistant.length > 0 };
   }
 
-  // 左栏一个会话的两行：时间 + 目录（有正文关键词时加命中数），首条消息或命中片段
-  private listRows(s: PeekSession, sel: boolean, lw: number, rt: RoleTerms, hasBody: boolean): [string, string] {
-    const t = this.theme;
-    const time = fmtTime(s.time);
-    const cwdTail = s.cwd.replace(/\\/g, "/").split("/").slice(-2).join("/");
-    const hitBadge = hasBody
-      ? ` ·${s.msgs.reduce((n, m) => n + (anyMatch(m.text, rt[m.role]) ? 1 : 0), 0)}`
-      : "";
-    const l1 = `${sel ? "›" : " "} ${time} ${cwdTail}${hitBadge}`;
-    const snip = hasBody ? snippet(s.msgs, rt, lw) : undefined;
-    const l2 = snip !== undefined
-      ? `  ${highlight(snip.text, rt[snip.role], t)}`
-      : `  ${s.first}${s.name ? `  [${s.name}]` : ""}`;
-    if (sel) {
-      return [
-        t.bg("selectedBg", padEndVisible(t.fg("accent", truncateToWidth(l1, lw)), lw)),
-        t.bg("selectedBg", padEndVisible(truncateToWidth(l2, lw), lw)),
-      ];
-    }
-    return [padEndVisible(l1, lw), padEndVisible(t.fg("dim", truncateToWidth(l2, lw)), lw)];
-  }
-
-  // 左栏，每个会话两行
-  private buildList(height: number, lw: number): string[] {
-    const { rt, hasBody } = this.listTerms();
-    const visible = Math.max(1, Math.floor(height / 2));
-    if (this.selected < this.listOffset) this.listOffset = this.selected;
-    if (this.selected >= this.listOffset + visible) {
-      this.listOffset = this.selected - visible + 1;
-    }
-
-    const rows: string[] = [];
-    for (let i = 0; i < visible; i++) {
-      const idx = this.listOffset + i;
-      const s = this.filtered[idx];
-      if (!s) {
-        rows.push(" ".repeat(lw), " ".repeat(lw));
-        continue;
-      }
-      rows.push(...this.listRows(s, idx === this.selected, lw, rt, hasBody));
-    }
-    // 每项两行，height 是奇数时会少一行，补空行，否则最后一行右栏会顶到左边
-    while (rows.length < height) rows.push(" ".repeat(lw));
-    return rows.slice(0, height);
-  }
-
-  // 用 pi 自己的 Markdown 组件渲染一条消息，和主界面里的对话长得一样；参数照抄 pi 的
-  // user-message / assistant-message 组件。渲染比较贵，按消息和宽度缓存，换关键词时不用重来
-  private renderMsg(m: PeekMsg, rw: number): string[] {
-    const hit = this.rendered.get(m);
-    if (hit && hit.w === rw) return hit.lines;
-    const t = this.theme;
-    const md =
-      m.role === "user"
-        ? new Markdown(
-            m.text,
-            1,
-            0,
-            this.mdTheme,
-            { color: (s) => t.fg("userMessageText", s), bgColor: (s) => t.bg("userMessageBg", s) },
-            { preserveOrderedListMarkers: true, preserveBackslashEscapes: true },
-          )
-        : new Markdown(m.text, 1, 0, this.mdTheme);
-    const lines = md.render(rw);
-    this.rendered.set(m, { w: rw, lines });
-    return lines;
-  }
-
-  // 右栏。有关键词时滚到第一个命中处，没有时滚到底部看最新消息
-  private buildPreview(rw: number): void {
-    const t = this.theme;
+  // 右栏。预览键（会话 + 关键词 + 宽度 + 工具开关）没变就复用；变了重建，滚动位置放到首个命中处或底部
+  private rebuildPreview(rw: number, rt: RoleTerms): void {
     const s = this.filtered[this.selected];
     const key = s ? `${s.path}|${this.getQuery()}|${rw}|${this.showTools ? "t" : ""}` : "none";
     if (key === this.previewKey) return;
     this.previewKey = key;
-    this.matchLines = [];
-
-    if (!s) {
-      this.previewLines = [t.fg("dim", msg("noMatch"))];
-      this.previewOffset = 0;
-      return;
-    }
-
-    const lines: string[] = [];
-    // 消息数只算有文字的，纯工具轮次不计
-    const textCount = s.msgs.reduce((n, m) => n + (m.text ? 1 : 0), 0);
-    lines.push(
-      truncateToWidth(
-        t.fg("dim", `${s.cwd} • ${msg("msgCount", { n: textCount })}${s.name ? " • " + s.name : ""}`),
-        rw,
-      ),
-    );
-    lines.push("");
-
-    const rt = roleTerms(this.query().terms);
-    const hasBody = rt.user.length > 0 || rt.assistant.length > 0;
-    const MAX_MSGS = 500;
-    const truncated = s.msgs.length > MAX_MSGS;
-    const msgs = truncated ? s.msgs.slice(-MAX_MSGS) : s.msgs;
-    if (truncated) {
-      lines.push(t.fg("dim", msg("truncated", { n: MAX_MSGS })));
-      lines.push("");
-    }
-    if (hasBody && !msgs.some((m) => anyMatch(m.text, rt[m.role]))) {
-      const inTruncated = truncated && s.msgs.some((m) => anyMatch(m.text, rt[m.role]));
-      lines.push(
-        t.fg(
-          "warning",
-          inTruncated ? msg("hitInTruncated") : msg("hitOnlyMeta"),
-        ),
-      );
-      lines.push("");
-    }
-
-    // 用户消息整块背景色，AI 消息只有一条细线标签
-    const fillLabel = (label: string): string => {
-      const w = visibleWidth(label);
-      return truncateToWidth(label + " " + "─".repeat(Math.max(2, rw - w - 1)), rw);
-    };
-
-    let prevRole: PeekMsg["role"] | undefined; // 上一条画出来的消息的角色
-    for (const m of msgs) {
-      const tools = this.showTools ? (m.tools ?? []) : [];
-      if (!m.text && !tools.length) continue; // 工具隐藏时，只有工具调用的 AI 轮次整条跳过
-      const terms = rt[m.role]; // user: 的词只在用户消息里高亮，ai: 的只在 AI 回复里
-      const isMatch = terms.length > 0 && anyMatch(m.text, terms);
-      // 紧跟在 AI 文字后面、只有工具调用的轮次不重复画标签，接在上一条正文下面，看起来是同一轮
-      const continues = m.role === "assistant" && prevRole === "assistant" && !m.text;
-      if (continues) {
-        lines.pop();
-      } else if (m.role === "user") {
-        lines.push(
-          t.bg("userMessageBg", padEndVisible(t.bold(t.fg("accent", fillLabel(msg("you")))), rw)),
-        );
-      } else {
-        lines.push(t.fg("muted", fillLabel(msg("ai"))));
-      }
-      const head = lines.length - 1;
-      // 先渲染再高亮：往 markdown 源码里插转义码会把链接、代码块的语法弄坏
-      const before = this.matchLines.length;
-      if (m.text) {
-        for (const l of this.renderMsg(m, rw)) {
-          if (isMatch && lineHasMatch(l, terms)) this.matchLines.push(lines.length);
-          lines.push(isMatch ? highlight(l, terms, t) : l);
-        }
-      }
-      // 关键词被折行拆开时哪一行都找不到，退回到消息标题行，别把这条消息漏掉
-      if (isMatch && this.matchLines.length === before) this.matchLines.push(head);
-      for (const tool of tools) {
-        lines.push(t.fg("dim", truncateToWidth(` ⚙ ${tool.name}${tool.summary ? "  " + tool.summary : ""}`, rw)));
-      }
-      lines.push("");
-      prevRole = m.role;
-    }
-
-    this.previewLines = lines;
-
-    if (this.matchLines.length) {
-      this.previewOffset = Math.max(0, this.matchLines[0] - 2);
-    } else {
-      this.previewOffset = Math.max(0, lines.length - this.bodyHeight());
-    }
+    const p = buildPreview(s, rt, rw, this.showTools, this.theme, this.mdTheme, this.rendered);
+    this.previewLines = p.lines;
+    this.matchLines = p.matchLines;
+    this.previewOffset = initialOffset(p, this.bodyHeight());
   }
 
   render(width: number): string[] {
@@ -715,8 +503,7 @@ export class PeekComponent implements Component, Focusable {
       return this.cachedLines;
     }
     const t = this.theme;
-    const lw = Math.max(26, Math.min(56, Math.floor(width * 0.4)));
-    const rw = Math.max(20, width - lw - 3);
+    const { lw, rw } = paneWidths(width);
     this.layout = { lw, rw, H };
 
     const out: string[] = [];
@@ -738,8 +525,16 @@ export class PeekComponent implements Component, Focusable {
     out.push(t.fg("borderMuted", "─".repeat(width)));
 
     // 双栏
-    this.buildPreview(rw);
-    const leftRows = this.buildList(H, lw);
+    const { rt, hasBody } = this.listTerms();
+    this.rebuildPreview(rw, rt);
+    // 选中项变了才把视野挪过去；滚轮滚出去的视野留着。列表变短、终端变高后别在底下留空白
+    const visible = visibleItems(H);
+    if (this.followSel) {
+      this.listOffset = followSelection(this.selected, this.listOffset, visible);
+      this.followSel = false;
+    }
+    this.listOffset = Math.min(this.listOffset, Math.max(0, this.filtered.length - visible));
+    const leftRows = buildList(this.filtered, this.selected, this.listOffset, H, lw, rt, hasBody, t);
 
     const maxOff = Math.max(0, this.previewLines.length - H);
     if (this.previewOffset > maxOff) this.previewOffset = maxOff;
@@ -754,7 +549,7 @@ export class PeekComponent implements Component, Focusable {
     if (this.previewLines.length > H) info += ` (${this.previewOffset + 1}-${end}/${this.previewLines.length})`;
     const scrollInfo = info ? t.fg("dim", info) : "";
 
-    const sel = this.activeSel();
+    const sel = this.drag.active();
     for (let i = 0; i < H; i++) {
       let l = leftRows[i] ?? " ".repeat(lw);
       let r = rightRows[i] ?? "";
@@ -775,11 +570,11 @@ export class PeekComponent implements Component, Focusable {
 
     // 底部：重命名和删除确认时换成对应的操作行，复制结果和选区提示也在这里
     out.push(t.fg("borderMuted", "─".repeat(width)));
-    if (this.renaming) {
+    if (this.mode === "rename") {
       const prefix = msg("renamePrefix");
       const inputLine = this.renameInput.render(Math.max(10, width - visibleWidth(prefix)))[0] ?? "";
       out.push(truncateToWidth(t.fg("warning", prefix) + inputLine, width));
-    } else if (this.confirmingDelete) {
+    } else if (this.mode === "confirmDelete") {
       const s = this.filtered[this.selected];
       const desc = s ? `${fmtTime(s.time, true)} ${s.first.slice(0, 30)}` : "";
       out.push(