pi-lazy-panel 0.1.0

package/src/ui/panes/sessions-pane.ts

@@ -0,0 +1,161 @@
+/**
+ * Sessions pane (left, top).
+ *
+ * Lists `SessionRow[]`. Each row uses two lines:
+ *
+ *   › FilmRecall                       09-20 22:18
+ *     opus-4 · ~/code/myself/FilmRecall · 128 msgs
+ *
+ * The cursor row is highlighted; sessions picked with space have no marker glyph
+ * — their title is tinted accent so selected rows stand out in a long list — and
+ * the header starts with "3 selected". While a `/` search is active in the pane the
+ * matching rows get their hits painted (see ../search-highlight.ts) and the
+ * header counts them ("2/7 matches"); the list itself is never filtered.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { t } from "../../i18n/index.ts";
+import type { ListScope, SearchView, SessionRow, SessionSortMode } from "../../types.ts";
+import { formatShortDate, shortenPath } from "../../utils/format.ts";
+import { fit, frame, metaBudget } from "../frame.ts";
+import { highlightLine, matchStyle, searchMeta } from "../search-highlight.ts";
+
+export interface SessionsPaneProps {
+	rows: SessionRow[];
+	cursor: number;
+	/** First visible row; defaults to a cursor-centered window when omitted (keyboard). */
+	first?: number;
+	focused: boolean;
+	scope: ListScope;
+	sort: SessionSortMode;
+	selected: Set<string>;
+	/** Active `/` search of this pane: matching rows are highlighted, the header shows the count. */
+	search?: SearchView;
+	/** Frame title; the panel passes "[1] SESSIONS" so the jump key is visible. */
+	title?: string;
+	theme: Theme;
+}
+
+/** Each session takes two lines; the tree / mouse hit-test share this constant. */
+export const SESSIONS_ROW_HEIGHT = 2;
+
+export function renderSessionsPane(p: SessionsPaneProps, width: number, height: number): string[] {
+	const { theme } = p;
+	const inner = width - 2;
+	const visibleRows = Math.max(1, Math.floor((height - 2) / SESSIONS_ROW_HEIGHT));
+	const body: string[] = [];
+
+	if (p.rows.length === 0) {
+		body.push(theme.fg("muted", ` ${t("pane.sessionsEmpty")}`));
+	} else {
+		// 滚轮滚动时用给定的 first（不动光标）；否则按光标居中。
+		const first = clampFirst(p.first ?? scrollOffset(p.cursor, p.rows.length, visibleRows), p.rows.length, visibleRows);
+		for (let i = first; i < Math.min(p.rows.length, first + visibleRows); i++) {
+			const row = p.rows[i]!;
+			const isCursor = i === p.cursor;
+			const lines = renderRow(row, inner, isCursor, p);
+			// 搜索命中的行：两行里出现的关键词都加高亮，光标所在的当前匹配再加强调。
+			const search = p.search;
+			if (search?.matches.has(i)) {
+				const style = matchStyle(theme, i === search.current);
+				body.push(...lines.map((l) => highlightLine(l, search.terms, style)));
+			} else {
+				body.push(...lines);
+			}
+		}
+	}
+
+	const title = p.title ?? "SESSIONS";
+	const budget = metaBudget(width, title);
+	const selected = selectedMeta(p.selected.size);
+	const rest = Math.max(0, budget - (selected ? visibleWidth(selected) + 3 : 0));
+	const base = p.search ? searchMeta(p.search.position, p.search.total, rest) : sessionsMeta(p.rows.length, p.cursor, p.scope, p.sort, rest);
+	// 有多选时标题右侧先显示 "3 selected"，剩下的空间再放位置 / 搜索计数。
+	const meta = selected && visibleWidth(selected) <= budget ? (base && rest > 0 ? `${selected} · ${base}` : selected) : base;
+	return frame(body, {
+		width,
+		height,
+		title,
+		meta,
+		border: (s) => theme.fg(p.focused ? "borderAccent" : "border", s),
+		titleStyle: (s) => (p.focused ? theme.bold(theme.fg("accent", s)) : theme.fg("muted", s)),
+		metaStyle: (s) => theme.fg("dim", s),
+	});
+}
+
+function renderRow(row: SessionRow, inner: number, isCursor: boolean, p: SessionsPaneProps): string[] {
+	const { theme } = p;
+	const indent = "  ".repeat(row.threadDepth ?? 0);
+	// 光标标记 ›（占第一列，第二列留空对齐）；多选不再画图标，只靠标题着色区分。
+	const isSelected = p.selected.has(row.file);
+	const marker = `${isCursor ? "›" : " "} `;
+	const date = formatShortDate(row.updatedAt);
+	const emptyTitle = t("pane.emptySession");
+	const title = row.name ?? row.preview ?? emptyTitle;
+
+	// line 1: marker + indent + title ....... date
+	const rightW = visibleWidth(date) + 1;
+	const titleW = Math.max(1, inner - visibleWidth(marker) - visibleWidth(indent) - rightW);
+	const titleText = truncateToWidth(title || emptyTitle, titleW, "…", true);
+
+	// line 2: model · cwd · N msgs
+	const details = [row.model ?? "", shortenPath(row.cwd), t("pane.msgs", { count: row.messageCount })].filter(Boolean).join(" · ");
+	const line2Raw = `  ${indent}${truncateToWidth(details, Math.max(1, inner - 2 - visibleWidth(indent)), "…", false)}`;
+
+	if (isCursor) {
+		const hl = (s: string) => theme.bg("selectedBg", fit(s, inner));
+		// 光标行整行反白；被选中时标题额外着 accent 色。
+		const titleSpan = isSelected ? theme.bold(theme.fg("accent", titleText)) : theme.bold(titleText);
+		return [
+			hl(theme.bold(theme.fg("accent", marker[0]!)) + marker.slice(1) + indent + titleSpan + " " + theme.fg("dim", date)),
+			hl(theme.fg("muted", line2Raw)),
+		];
+	}
+	// 选中行：标题用 accent 色，一眼能从列表里扫出来；未选中用普通 text 色。
+	const titleStyle = isSelected ? (s: string) => theme.fg("accent", s) : (s: string) => theme.fg("text", s);
+	return [
+		fit(marker + indent + titleStyle(titleText) + " " + theme.fg("dim", date), inner),
+		fit(theme.fg("muted", line2Raw), inner),
+	];
+}
+
+/** Header labels of the list scope (localised), long form and the short form used when space is tight. */
+export function scopeLabels(scope: ListScope): { long: string; short: string } {
+	return scope === "all"
+		? { long: t("scope.allLong"), short: t("scope.allShort") }
+		: { long: t("scope.currentLong"), short: t("scope.currentShort") };
+}
+
+/**
+ * Header meta for the sessions pane: "1/15 · Current · recent".
+ *
+ * 宽度不够时按顺序降级（去掉排序 → 缩短 scope → 只留位置），保证任何宽度下
+ * 用户都能看到当前 scope 和会话数量，而不是整段消失。
+ */
+export function sessionsMeta(total: number, cursor: number, scope: ListScope, sort: SessionSortMode, budget: number): string {
+	const label = scopeLabels(scope);
+	const sortName = t(`sort.${sort}`);
+	const pos = `${Math.min(cursor + 1, total)}/${total}`;
+	const candidates = total
+		? [`${pos} · ${label.long} · ${sortName}`, `${pos} · ${label.long}`, `${pos} · ${label.short}`, pos]
+		: [label.long, label.short];
+	return candidates.find((c) => visibleWidth(c) <= budget) ?? candidates[candidates.length - 1]!;
+}
+
+/** "3 selected" while sessions are multi-selected with space, "" otherwise. */
+export function selectedMeta(count: number): string {
+	return count > 0 ? t("pane.selected", { count }) : "";
+}
+
+/** First visible index so that `cursor` stays inside a window of `visible` rows. */
+export function scrollOffset(cursor: number, total: number, visible: number): number {
+	if (total <= visible) return 0;
+	const half = Math.floor(visible / 2);
+	return Math.min(Math.max(0, cursor - half), total - visible);
+}
+
+/** Clamp a first-visible index to a valid window start (0 .. last possible window). */
+export function clampFirst(first: number, total: number, visible: number): number {
+	return Math.max(0, Math.min(first, Math.max(0, total - visible)));
+}

package/src/ui/panes/tree-pane.ts

@@ -0,0 +1,152 @@
+/**
+ * Tree pane (left, bottom).
+ *
+ * Lists the `TreeRow[]` of the session highlighted in the sessions pane as a
+ * folded outline (prefixes from ../tree-outline.ts, fold rules in
+ * ../../data/tree-fold.ts):
+ *
+ *   ›  • 22:18 [system]
+ *      • 22:18 user: hi
+ *      • 22:19 assistant: Hi! I'm ready to help with ...
+ *      ▸ 22:20 user: try again
+ *      ▾ • 22:21 [system]
+ *          • 22:21 user: hi
+ *          • 22:21 assistant: …
+ *
+ * A `▸` row is a folded side branch (its rows are hidden; `z` unfolds it), `▾`
+ * an open one, `─` a dead-end alternative; rows inside a branch are indented
+ * two columns per level, at most four levels (`… ` beyond). Side branches start
+ * folded, the active branch open. The pane renders whatever rows it is given —
+ * the panel hides the folded descendants and passes the outline prefixes; the
+ * full tree with pi-style guide lines lives in the tree dialog (`a`,
+ * ../widgets/tree-dialog.ts). The cursor is highlighted, nodes off the active
+ * branch are dimmed. While a `/` search is active in the pane the matching
+ * rows get their hits painted (see ../search-highlight.ts) and the header
+ * counts them; folded matches are unfolded by the panel when jumped to.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { t } from "../../i18n/index.ts";
+import type { SearchView, TreeFilter, TreeRow } from "../../types.ts";
+import { formatTime } from "../../utils/format.ts";
+import { fit, frame, metaBudget } from "../frame.ts";
+import { highlightLine, matchStyle, type RowHighlight, searchMeta } from "../search-highlight.ts";
+import { type OutlinePrefix, treeOutline } from "../tree-outline.ts";
+import { clampFirst, scrollOffset } from "./sessions-pane.ts";
+
+export interface TreePaneProps {
+	/** Rows to list (folded branches already hidden). */
+	rows: TreeRow[];
+	/** Outline prefix per entry id (see ../tree-outline.ts); derived from `rows` alone when omitted. */
+	outline?: ReadonlyMap<string, OutlinePrefix>;
+	cursor: number;
+	/** First visible row; defaults to a cursor-centered window when omitted (keyboard). */
+	first?: number;
+	focused: boolean;
+	/** Active tree filter (set in the tree dialog); shown in the header when it is not the default. */
+	filter?: TreeFilter;
+	/** Active `/` search of this pane (indices into `rows`): matching rows are highlighted, the header shows the count. */
+	search?: SearchView;
+	/** Shown when no session is selected / loading. */
+	emptyMessage?: string;
+	/** Frame title; the panel passes "[2] TREE" so the jump key is visible. */
+	title?: string;
+	theme: Theme;
+}
+
+const NO_PREFIX: OutlinePrefix = { indent: "", marker: "" };
+
+export function renderTreePane(p: TreePaneProps, width: number, height: number): string[] {
+	const { theme } = p;
+	const inner = width - 2;
+	const visible = Math.max(1, height - 2);
+	const body: string[] = [];
+
+	if (p.rows.length === 0) {
+		body.push(theme.fg("muted", ` ${p.emptyMessage ?? t("pane.treeEmpty")}`));
+	} else {
+		const outline = p.outline ?? treeOutline(p.rows, new Set());
+		// 滚轮滚动时用给定的 first（不动光标）；否则按光标居中。
+		const first = clampFirst(p.first ?? scrollOffset(p.cursor, p.rows.length, visible), p.rows.length, visible);
+		for (let i = first; i < Math.min(p.rows.length, first + visible); i++) {
+			const row = p.rows[i]!;
+			const search = p.search;
+			const highlight = search?.matches.has(i) ? { terms: search.terms, current: i === search.current } : undefined;
+			body.push(renderTreeRow(row, styleOutline(outline.get(row.entryId) ?? NO_PREFIX, theme), inner, i === p.cursor, theme, highlight));
+		}
+	}
+
+	const title = p.title ?? "TREE";
+	const budget = metaBudget(width, title);
+	const meta = p.search ? searchMeta(p.search.position, p.search.total, budget) : treeMeta(p.rows.length, p.cursor, p.filter ?? "default", budget);
+	return frame(body, {
+		width,
+		height,
+		title,
+		...(meta ? { meta } : {}),
+		border: (s) => theme.fg(p.focused ? "borderAccent" : "border", s),
+		titleStyle: (s) => (p.focused ? theme.bold(theme.fg("accent", s)) : theme.fg("muted", s)),
+		metaStyle: (s) => theme.fg("dim", s),
+	});
+}
+
+/**
+ * Header meta of the tree pane: "2/12", or "2/12 · user-only" while a filter
+ * other than the default is active (the filter is chosen in the tree dialog,
+ * so the pane says why rows are missing). Degrades to the position alone when
+ * the header is too narrow; an empty tree only names the filter.
+ */
+export function treeMeta(total: number, cursor: number, filter: TreeFilter, budget: number): string {
+	const pos = total ? `${Math.min(cursor + 1, total)}/${total}` : "";
+	const name = t(`filter.${filter}`);
+	const candidates = filter === "default" ? [pos] : total ? [`${pos} · ${name}`, pos] : [name, ""];
+	return candidates.find((c) => visibleWidth(c) <= budget) ?? "";
+}
+
+/** Indent as dim as guide lines; the fold marker a notch brighter so a folded branch still shows on a dimmed row. */
+function styleOutline(prefix: OutlinePrefix, theme: Theme): string {
+	return theme.fg("dim", prefix.indent) + theme.fg("muted", prefix.marker);
+}
+
+/**
+ * One tree line, laid out like pi's /tree: `› ` cursor marker, the (already
+ * styled) outline or guide-line prefix, `• ` on the active path, `[label]`,
+ * time, `role: ` (omitted for system rows whose text already is a
+ * `[system]`-style tag) and the text truncated to what is left. Shared with
+ * the tree dialog. With `highlight` (a row matching the pane's search) the
+ * terms are painted on top of the finished line.
+ */
+export function renderTreeRow(row: TreeRow, prefix: string, inner: number, isCursor: boolean, theme: Theme, highlight?: RowHighlight): string {
+	const marker = isCursor ? "› " : "  ";
+	// 和 pi 一样，活动路径上的节点在文字前加 `• `。
+	const path = row.onActiveBranch ? "• " : "";
+	const label = row.label ? `[${row.label}] ` : "";
+	const time = `${formatTime(row.timestamp)} `;
+	const role = row.role === "system" ? "" : `${t(`role.${row.role}`)}: `;
+	const prefixW =
+		visibleWidth(marker) + visibleWidth(prefix) + visibleWidth(path) + visibleWidth(label) + visibleWidth(time) + visibleWidth(role);
+	const text = truncateToWidth(row.text, Math.max(1, inner - prefixW), "…", false);
+
+	const roleStyle = (s: string) =>
+		row.role === "user"
+			? theme.fg("userMessageText", s)
+			: row.role === "assistant"
+				? theme.fg("accent", s)
+				: theme.fg("muted", s);
+	const branchStyle = (s: string) => (row.onActiveBranch ? s : theme.fg("dim", s));
+	// system 行（[system] / [branch summary]: …）整行用 muted，和 pi 的 dim 标签一致。
+	const textStyle = (s: string) => (row.role === "system" ? theme.fg("muted", s) : branchStyle(s));
+
+	const line =
+		theme.fg("accent", marker) +
+		prefix +
+		theme.fg("accent", path) +
+		theme.fg("warning", label) +
+		theme.fg("dim", time) +
+		branchStyle(roleStyle(role)) +
+		textStyle(text);
+	const out = isCursor ? theme.bg("selectedBg", fit(line, inner)) : fit(line, inner);
+	// 搜索命中：整行画完后再按列把关键词加上高亮，前后的颜色和光标背景都保留。
+	return highlight ? highlightLine(out, highlight.terms, matchStyle(theme, highlight.current)) : out;
+}

package/src/ui/search-highlight.ts

@@ -0,0 +1,108 @@
+/**
+ * Search-match highlighting shared by the three panes (pure functions).
+ *
+ * A pane renders its row / line exactly as before — colours, cursor background,
+ * truncation — and then paints the matches on top by visible column, the way
+ * pi's own transcript search does: the line is cut into before / match / after
+ * with pi-tui's ANSI-aware `sliceByColumn`, only the plain text runs of the
+ * match get the match style, and the "after" slice starts with the styles that
+ * were active there, so a colour or cursor background the match interrupted
+ * carries on afterwards. Matches use the theme's search colours; the current
+ * match (the one the cursor is on) is additionally bold + inverse so it stands
+ * out from the other matches, like in lazygit / pi.
+ *
+ * 高亮不改变面板原来的画法：先按原样画好整行，再按可见列把命中的片段切出来加样式
+ * （pi 自己的全屏搜索就是这么做的），所以命中前后的颜色和光标行的背景都不会断掉。
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { sliceByColumn, stripTerminalSequences, visibleWidth } from "@earendil-works/pi-tui";
+import { findMatchRanges } from "../data/search.ts";
+import { t } from "../i18n/index.ts";
+
+/** How one rendered row is highlighted: the terms to mark, and whether it is the current match. */
+export interface RowHighlight {
+	terms: string[];
+	current: boolean;
+}
+
+/** SGR / CSI / OSC sequences, so the styling can skip them and wrap only the text between. */
+const ANSI_RE = /\x1b\[[0-9;?:<=>]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g;
+
+/**
+ * Style of a match: the theme's search colours, underlined for the other
+ * matches, bold + inverse for the current one (pi's own choice; the inverse
+ * shows even on a theme whose search background equals the cursor background).
+ */
+export function matchStyle(theme: Theme, current: boolean): (text: string) => string {
+	const colours = (s: string) => theme.bg("searchMatchBg", theme.fg("searchMatchText", s));
+	return current ? (s) => theme.bold(theme.inverse(colours(s))) : (s) => theme.underline(colours(s));
+}
+
+/**
+ * Paint every occurrence of `terms` in the already-rendered `line` with
+ * `style`, keeping its visible width and the styles around the matches.
+ */
+export function highlightLine(line: string, terms: string[], style: (text: string) => string): string {
+	const plain = stripTerminalSequences(line);
+	const ranges = findMatchRanges(plain, terms);
+	if (ranges.length === 0) return line;
+	const width = visibleWidth(plain);
+	let out = line;
+	// 从右往左处理，前面片段的列号不受已经改过的部分影响。
+	for (let i = ranges.length - 1; i >= 0; i--) {
+		const r = ranges[i]!;
+		const startCol = visibleWidth(plain.slice(0, r.start));
+		const endCol = Math.min(width, startCol + visibleWidth(plain.slice(r.start, r.end)));
+		if (endCol <= startCol) continue;
+		// sliceByColumn 会丢掉最后一个可见字符之后的转义序列（光标行末尾的背景色复位、上一轮画在行尾的高亮结束码），
+		// 每一轮都先剥下来、切完再接回去。
+		const [body, tail] = splitTail(out);
+		const before = sliceByColumn(body, 0, startCol, true);
+		const match = sliceByColumn(body, startCol, endCol - startCol, true);
+		const after = sliceByColumn(body, endCol, Math.max(0, width - endCol), true);
+		out = `${before}${styleText(match, style)}${after}${tail}`;
+	}
+	return out;
+}
+
+/** Split off the escape sequences after the last visible character of `line`. */
+function splitTail(line: string): [body: string, tail: string] {
+	let end = line.length;
+	for (;;) {
+		const m = TRAILING_ANSI_RE.exec(line.slice(0, end));
+		if (!m) break;
+		end -= m[0].length;
+	}
+	return [line.slice(0, end), line.slice(end)];
+}
+
+/** One escape sequence at the very end of a string. */
+const TRAILING_ANSI_RE = /(?:\x1b\[[0-9;?:<=>]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\))$/;
+
+/** Apply `style` to the plain text runs of `text`, leaving its escape sequences in place. */
+function styleText(text: string, style: (text: string) => string): string {
+	let out = "";
+	let last = 0;
+	for (const m of text.matchAll(ANSI_RE)) {
+		if (m.index > last) out += style(text.slice(last, m.index));
+		out += m[0];
+		last = m.index + m[0].length;
+	}
+	if (last < text.length) out += style(text.slice(last));
+	return out;
+}
+
+/**
+ * Header meta while a search is active: "2/7 matches", "7 matches" when the
+ * cursor is not on a match, "no matches" for none; shortened to fit `budget`.
+ */
+export function searchMeta(position: number, total: number, budget: number): string {
+	const candidates =
+		total === 0
+			? [t("search.none"), "0/0"]
+			: position > 0
+				? [t("search.matches", { position, total }), `${position}/${total}`]
+				: [t("search.total", { total }), `${total}`];
+	return candidates.find((c) => visibleWidth(c) <= budget) ?? candidates[candidates.length - 1]!;
+}

package/src/ui/tree-lines.ts

@@ -0,0 +1,111 @@
+/**
+ * Tree guide lines, drawn the way pi's own `/tree` selector draws them:
+ *
+ *    [system]
+ *   ├⊟ [hello] user: hi
+ *   │     assistant: Hello!
+ *   ├⊞ user: hi                      (folded: its descendants are not listed)
+ *   └─ [branch summary]: …
+ *
+ * Pure functions over `TreeRow[]` (pre-order, linked by `parentId`); used by
+ * the full tree dialog (the small pane draws the lighter outline of
+ * ./tree-outline.ts instead). Rules copied from pi (`tree-selector.js`
+ * flattenTree):
+ *   - a node whose parent has several children gets a connector (├ / └)
+ *   - the indent grows by one level at a branch point and once more for the
+ *     first generation after it; a single-child chain stays at the same level
+ *   - descendants of a connector row carry a `│` gutter in that column while
+ *     later siblings follow, a blank column once the last sibling started
+ *   - `⊟` on the connector marks a node that has children, `─` a leaf and `⊞`
+ *     a folded node (see ../data/tree-fold.ts); a folded root without a
+ *     connector gets a `⊞ ` marker after its prefix, as in pi
+ * Every level is 3 columns wide.
+ *
+ * 树线的计算和 pi 的 /tree 一致；这里只产出前缀字符串，配色由调用方决定。
+ */
+
+import { treeChildren } from "../data/tree-fold.ts";
+import type { TreeRow } from "../types.ts";
+
+/** One `│` (or blank) column carried by descendants of a connector row. */
+interface Gutter {
+	position: number;
+	show: boolean;
+}
+
+/**
+ * Guide-line prefix of every row, aligned with `rows`. Rows whose `parentId`
+ * does not name a row are treated as roots. `folded` rows are drawn with `⊞`
+ * (their descendants are expected to be missing from `rows` already).
+ */
+export function treePrefixes(rows: TreeRow[], folded: ReadonlySet<string> = new Set()): string[] {
+	const children = treeChildren(rows);
+	const roots = children.get(undefined) ?? [];
+	const multipleRoots = roots.length > 1;
+	const out = new Map<string, string>();
+
+	// 和 pi 一样用显式栈做先序遍历，避免深树递归爆栈。
+	interface Frame {
+		row: TreeRow;
+		indent: number;
+		justBranched: boolean;
+		showConnector: boolean;
+		isLast: boolean;
+		gutters: Gutter[];
+		isVirtualRootChild: boolean;
+	}
+	const stack: Frame[] = [];
+	for (let i = roots.length - 1; i >= 0; i--) {
+		stack.push({
+			row: roots[i]!,
+			indent: multipleRoots ? 1 : 0,
+			justBranched: multipleRoots,
+			showConnector: multipleRoots,
+			isLast: i === roots.length - 1,
+			gutters: [],
+			isVirtualRootChild: multipleRoots,
+		});
+	}
+	while (stack.length) {
+		const f = stack.pop()!;
+		const kids = children.get(f.row.entryId) ?? [];
+		const displayIndent = multipleRoots ? Math.max(0, f.indent - 1) : f.indent;
+		const connector = f.showConnector && !f.isVirtualRootChild;
+		// 只有分支段的起点（showConnector）才可能被折叠；多根时的根没有连接符，折叠标记跟在前缀后面。
+		const isFolded = f.showConnector && folded.has(f.row.entryId);
+		const prefix = buildPrefix(displayIndent, connector ? displayIndent - 1 : -1, f.isLast, kids.length > 0, isFolded, f.gutters);
+		out.set(f.row.entryId, isFolded && !connector ? `${prefix}⊞ ` : prefix);
+
+		const multipleChildren = kids.length > 1;
+		// 分叉处子节点缩进 +1；分叉后的第一代再 +1 做视觉分组；单链不缩进。
+		const childIndent = multipleChildren || (f.justBranched && f.indent > 0) ? f.indent + 1 : f.indent;
+		const childGutters = connector ? [...f.gutters, { position: Math.max(0, displayIndent - 1), show: !f.isLast }] : f.gutters;
+		for (let i = kids.length - 1; i >= 0; i--) {
+			stack.push({
+				row: kids[i]!,
+				indent: childIndent,
+				justBranched: multipleChildren,
+				showConnector: multipleChildren,
+				isLast: i === kids.length - 1,
+				gutters: childGutters,
+				isVirtualRootChild: false,
+			});
+		}
+	}
+	return rows.map((r) => out.get(r.entryId) ?? "");
+}
+
+function buildPrefix(levels: number, connectorLevel: number, isLast: boolean, hasChildren: boolean, isFolded: boolean, gutters: Gutter[]): string {
+	const chars: string[] = [];
+	for (let level = 0; level < levels; level++) {
+		const gutter = gutters.find((g) => g.position === level);
+		if (gutter) {
+			chars.push(gutter.show ? "│" : " ", " ", " ");
+		} else if (level === connectorLevel) {
+			chars.push(isLast ? "└" : "├", isFolded ? "⊞" : hasChildren ? "⊟" : "─", " ");
+		} else {
+			chars.push(" ", " ", " ");
+		}
+	}
+	return chars.join("");
+}

package/src/ui/tree-outline.ts

@@ -0,0 +1,80 @@
+/**
+ * Outline prefixes of the tree pane: a triangle on the rows that can fold and
+ * plain indentation below them — the lightweight cousin of the guide lines in
+ * ./tree-lines.ts, which the tree dialog keeps. Drawn like lazygit's file
+ * tree: the marker of a branch sits where its siblings' text starts and the
+ * rows inside the branch line up under the branch's own text.
+ *
+ *   › • 22:18 [system]              depth 0: a lone root is not a branch, nothing in front of it
+ *     • 22:18 user: hi
+ *     • 22:19 assistant: …          (branch point)
+ *     ▸ 22:20 user: try again       folded side branch, its rows are hidden
+ *     ▾ • 22:21 [system]            open branch on the active path
+ *       • 22:21 user: hi            rows inside it sit one level (2 columns) deeper, under the branch's text
+ *       ─ 22:22 [branch summary]    dead-end sibling: no children, nothing to fold
+ *       ▾ • 22:22 user: hi
+ *         • 22:22 assistant: …
+ *
+ * Rules (pure functions over pre-order `TreeRow[]`; which rows fold is decided
+ * in ../data/tree-fold.ts):
+ *   - depth grows by one below every foldable row; a chain and a dead end stay
+ *     at their parent's depth, so a linear conversation is completely flat
+ *   - every level is 2 columns of indent; only a segment start carries a
+ *     marker (`▾ ` open, `▸ ` folded, `─ ` no children), which pushes its own
+ *     text 2 columns right — exactly where the rows inside it start
+ *   - past MAX_DEPTH the outer levels are replaced by `… `, so the prefix never
+ *     grows beyond four levels
+ *
+ * 面板用三角 + 缩进代替树线；只在段头下面多缩进一层，线性对话完全不缩进。
+ */
+
+import { foldableIds, forkChildIds, treeChildren } from "../data/tree-fold.ts";
+import type { TreeRow } from "../types.ts";
+
+/** Columns per depth level. */
+export const INDENT = "  ";
+
+/** Depths 0..MAX_DEPTH are drawn as they are (four levels); deeper rows are capped with `… `. */
+export const MAX_DEPTH = 3;
+
+/** Replaces the outer levels of a row deeper than MAX_DEPTH. */
+export const ELLIPSIS = "… ";
+
+export const MARK_OPEN = "▾ ";
+export const MARK_FOLDED = "▸ ";
+/** A segment start without children: an alternative that was never continued. */
+export const MARK_LEAF = "─ ";
+
+export interface OutlinePrefix {
+	/** Indentation: `INDENT` per level, `… ` standing in for the outer levels past MAX_DEPTH. */
+	indent: string;
+	/** Fold marker of a segment start, "" on every other row. */
+	marker: string;
+}
+
+/**
+ * Outline prefix of every row keyed by entry id, computed over the whole tree
+ * (not just the rows left after folding) so nothing shifts when a branch
+ * folds; `folded` picks `▸ ` over `▾ `.
+ */
+export function treeOutline(rows: TreeRow[], folded: ReadonlySet<string>, maxDepth = MAX_DEPTH): Map<string, OutlinePrefix> {
+	const children = treeChildren(rows);
+	const forkChildren = forkChildIds(rows, children);
+	const foldable = foldableIds(rows);
+	const depths = new Map<string, number>();
+	const out = new Map<string, OutlinePrefix>();
+	// 先序：父节点的深度已经算好；父节点可折叠时子节点深一层，否则同层。
+	for (const r of rows) {
+		const parentDepth = r.parentId !== undefined ? depths.get(r.parentId) : undefined;
+		const depth = parentDepth === undefined ? 0 : parentDepth + (foldable.has(r.parentId!) ? 1 : 0);
+		depths.set(r.entryId, depth);
+		const capped = depth > maxDepth;
+		const indent = (capped ? ELLIPSIS : "") + INDENT.repeat(capped ? Math.max(0, maxDepth - 1) : depth);
+		let marker = "";
+		if (forkChildren.has(r.entryId)) {
+			marker = !children.get(r.entryId)?.length ? MARK_LEAF : folded.has(r.entryId) ? MARK_FOLDED : MARK_OPEN;
+		}
+		out.set(r.entryId, { indent, marker });
+	}
+	return out;
+}