@muzi3/pi-ui 0.1.1 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @muzi3/pi-ui
 
-Pi 扩展：把页脚换成双行上下文仪表盘，并在编辑器边框上常驻显示模型名与耗时，主题跟着当前主题走。
+Pi 扩展：把页脚换成双行上下文仪表盘，在编辑器边框上常驻显示模型名与耗时，并给折叠的 thinking 标签加 spinner 动画，主题跟着当前主题走。
 
 替代 `pi-catppuccin-tui` 的自实现版本，修掉了原实现的两处问题：指示器颜色和多处 token 写死了 Macchiato
 的十六进制色（换主题后错色），以及自定义 footer 整体替换内置 footer 后、其他扩展的 `setStatus` 状态
@@ -11,8 +11,9 @@ Pi 扩展：把页脚换成双行上下文仪表盘，并在编辑器边框上
 | 能力 | 说明 |
 |------|------|
 | `footer` | 双行仪表盘页脚，两条进度条置顶，替换内置 footer |
-| `indicator` | 闪烁帧 `· • ● ● • ·` @120ms，颜色取自主题 token；关掉后不显示呼吸灯（内置指示器回退为 pi 默认） |
-| `working` | 编辑器边框上常驻显示模型名与耗时，是否在生成只由呼吸灯表达 |
+| `indicator` | 盲文 spinner `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` @80ms（与 pi 自带 Loader 逐帧相同、`accent` 单色）；关掉后不显示（内置指示器回退为 pi 默认） |
+| `working` | 编辑器边框上常驻显示模型名与耗时，是否在生成只由盲文 spinner 表达 |
+| `thinking` | 折叠的 thinking 块标签前加同款盲文 spinner `⠋ Thinking...` @80ms（复用 `indicator` 的帧），只在流式期间转 |
 
 ### footer 布局
 
@@ -22,11 +23,12 @@ Context ██░░░░░░░░░░░░  1.7% / 272k  ↑74.7k ↓3.8
 ```
 
 色：标签 `muted`｜进度条 按占用率 绿/黄/红｜占比 跟条同色｜`/ 窗口`、`/ ¥` 与未知占位 `dim`｜
-`↑` `mdLink` 蓝、`↓` `syntaxNumber` 桃、`$` `syntaxOperator` 青｜分支 `accent` + `text`
+`↑` `mdLink` 蓝、`↓` `syntaxNumber` 桃、`$` `syntaxOperator` 青｜分支 `accent`（图标与分支名同色）
 
 - 第 1 行：其他扩展通过 `setStatus` 设置的文本（如 `@muzi3/comate-quota` 的额度条）+ git 分支。
   分支前是 Nerd Font 的 git 图标 `U+E0A0`（nf-pl-branch，与 starship 默认提示符同一字形，
-  `accent` 色），**需要 Nerd Font 字体**，否则显示为豆腐块；分支名用 `text`（内容用正文色）
+  `accent` 色），**需要 Nerd Font 字体**，否则显示为豆腐块；分支名同色 `accent`（图标与名字
+  合成一整块，在行尾立成一个锚点）
 - 第 2 行：上下文进度条（14 格）+ `百分比 / 窗口` + 累计用量（`↑in ↓out $cost`）。
   进度条配色按占用率分级：`<70%` 绿（`success`）、`70~90%` 黄（`warning`）、`>90%` 红（`error`）；
   刚压缩完占用未知时显示为暗色 `?`
@@ -48,7 +50,7 @@ Context ██░░░░░░░░░░░░  1.7% / 272k  ↑74.7k ↓3.8
 
 ```
 ── claude-sonnet-4-5  ⏱ 12s ────────────────────────────────  空闲
-── ● claude-sonnet-4-5  ⏱ 12s ──────────────────────────────  流式
+── ⠼ claude-sonnet-4-5  ⏱ 12s ──────────────────────────────  流式
  > 
 ────────────────────────────────────────────────────────────────────────
 ```
@@ -58,11 +60,21 @@ Context ██░░░░░░░░░░░░  1.7% / 272k  ↑74.7k ↓3.8
   承载不了“常驻”；所以子类覆写 `setWorkingStatusIndicator`，忽略 pi 的挂/清，恒挂自己的标题。
   边框拼接、截断、`↑ N more` 滚动提示全部沿用 `CustomEditor.renderTopBorder`，没有重写排版
 - 输入被滚动时不用取舍：`↑ N more` 会与标题并列出现在同一行边框上
-  （`── ● model ⏱ 12s ──── ↑ 5 more ────`），这是继承来的行为，不是额外实现
-- 呼吸灯：流式为 `· • ● ● • ·` @120ms（颜色按主题 token 递进）。不闪的时候完全不显示——空闲、
-  或关掉 `indicator` 时都不留静止的点（静止的点反而更难看出在不在生成）；代价是模型名会左右
-  移 2 列，在以 `─` 为主的边框上几乎看不出来
-- 耗时口径与旧版 footer 一致，只是位置变了：流式为已进行秒数（随呼吸灯帧重绘跳秒），
+  （`── ⠼ model ⏱ 12s ──── ↑ 5 more ────`），这是继承来的行为，不是额外实现
+- 指示器：流式为 `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` @80ms，帧序列与间隔都对齐 pi 自带 Loader（`@earendil-works/pi-tui`
+  的 `DEFAULT_FRAMES` / `DEFAULT_INTERVAL_MS`），颜色跟内置 working 指示器一样用 `accent` 单色。
+  用盲文而不是 `▘▝▗▖`/`◰◳◲◱` 这类整格块：后者在等宽字体下几乎占满整格，在边框上比正文还抢眼；
+  盲文墨水轻、不挑字体。10 帧在 `visibleWidth` 下都是 1 列，边框标题不抖。
+  早先试过 4 帧矩形（`⠁⠈⠠⠄` 绕四角 + `dim→muted→accent→borderAccent` 明暗递进）：帧数翻到 10 帧后
+  逐帧换色会变成“亮度在扫”，反而不像 spinner，所以回到单色。
+  不转的时候完全不显示——空闲、或关掉 `indicator` 时都不留静止帧（静止的帧反而
+  更难看出在不在生成）；代价只是模型名左右移 1 列，在以 `─` 为主的边框上几乎看不出来
+- 配色：模型名直接取编辑器**当前**的 `borderColor`（`this.borderColor`），边框是什么色它就是
+  什么色。pi 会按 thinking level 换这个函数（`getThinkingBorderColor`：off `overlay0`、low `blue`、
+  medium `sapphire`、high `mauve`……），bash 模式另有 `getBashModeBorderColor`，所以写死任何 token
+  都会在切换后与边框脱色（例如 medium 下边框是青色而模型名还是灰的）；
+  `⏱ 耗时` 为 `dim`
+- 耗时口径与旧版 footer 一致，只是位置变了：流式为已进行秒数（随 spinner 帧重绘跳秒），
   空闲为上一轮总耗时；宽度不足时先丢掉 `⏱ 耗时`，再逐字截断模型名
 - 退出/关闭 `working` 会换回内置编辑器，还原 pi 默认：仅流式期间在边框显示模型名
 - 需要 pi `>= 0.85`（`CustomEditor` 的 `embedWorkingStatus` 与 `setWorkingStatusIndicator` 从该版本才有）；
@@ -89,15 +101,44 @@ pi.events.emit("pi-ui:model-override", undefined); // 恢复会话模型
 2. 第 2 行：完整（进度条 + 计数 + 累计用量）→ 丢累计用量 → 丢 `Context ` 标签 → 丢百分比/窗口
    → 只剩进度条；进度条不接受被截断
 
+## thinking spinner 动画
+
+折叠 thinking 块的标签（`hideThinkingBlock` 或 Ctrl+T 收起时显示的那行）前面加盲文 spinner：
+
+```
+⠋ Thinking...       ← 流式中，⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ @80ms（复用边框指示器的帧）
+⋯ Thinking...        ← 空闲/结束后回落的静态帧
+```
+
+帧表不在这里另写一份，直接复用 `indicator.ts` 的 `buildSpinnerFrames`：两处观感要一致，两份列表
+迟早漂移。频率也用同一个 `SPINNER_INTERVAL_MS`，所以标签和边框 spinner 同速。
+
+- pi 只提供静态的 `setHiddenThinkingLabel`，动画靠定时器反复改写标签实现。每次改写都会重绘
+  整条 transcript，所以定时器**只在 assistant 消息流式期间**开表（`message_start` 开、
+  `message_end` 停，`agent_settled` 兜住用户中断）；流式期间 pi 本来就在逐 token 重绘，这点
+  额外开销看不出来，空闲时零成本
+- 一轮里可能有多条 assistant 消息、中间夹着工具调用，动画跟**消息**粒度走而不是跟轮次走：
+  工具执行期间标签保持静态，不会被误看成还在思考
+- 配色：帧沿用 `accent`（同边框指示器），尾部文本 `thinkingText`。尾部要单独套一次
+  `thinkingText`，因为 pi 把整串包进 `fg("thinkingText", label)`，内层 fg 的 reset 会让
+  后面的行内文本不再跟随 `thinkingText`，颜色塌成终端默认色
+- 帧宽一致（盲文各占 1 列），标签不会左右抖；帧是每帧现取主题色（换主题后立刻跟上），不像边框
+  spinner 那样需要按主题名重建缓存
+- 只在 thinking 块**折叠**时可见；Ctrl+T 展开思考原文时这个标签不显示，动画照旧开着（不额外
+  探测 pi 内部的 `hideThinkingBlock`，它没有对外读接口）
+
+关闭 `thinking` 会调 `setHiddenThinkingLabel(undefined)` 还原 pi 默认的 `Thinking...`。
+
 ## 命令
 
 ```
-/pi-ui                                  # 查看三块能力的开关状态
-/pi-ui footer|indicator|working on|off  # 单独开关
+/pi-ui                                        # 查看四块能力的开关状态
+/pi-ui footer|indicator|working|thinking on|off  # 单独开关
 ```
 
 关闭 `footer` 会恢复 pi 内置 footer；关闭 `working` 会换回内置编辑器（流式期间才显示模型名）；关闭
-`indicator` 会让呼吸灯不再显示。开关只在本次会话内有效，不写盘。
+`indicator` 会让 spinner 不再显示；关闭 `thinking` 会把折叠 thinking 标签还原成 pi 默认文案。
+开关只在本次会话内有效，不写盘。
 
 ## 主题
 
@@ -116,6 +157,8 @@ pi.events.emit("pi-ui:model-override", undefined); // 恢复会话模型
 | `mdQuoteBorder` | `surface2` | `surface1` | 同上，引用属于次要结构 |
 | `mdHeading` | `mauve` | `lavender` | `mauve` 同时是 `accent`/`mdListBullet`/`syntaxKeyword`/`thinkingHigh`，标题再占用就分不出主次 |
 | `mdListBullet` | `mauve` | `overlay2` | 列表符号属于次要装饰，降为灰色 |
+| `thinkingOff` | `surface1` | `overlay0` | 1.80:1 时编辑框边框（thinking off 档）几乎看不见，模型名也一致地暗；换成 `overlay0` 后 3.36:1 |
+| `thinkingMinimal` | `surface2` | `overlay1` | 随 `thinkingOff` 上移，否则 off（3.36）会比 minimal（2.46）还亮，暗端递进反转 |
 | `thinkingXhigh` | `red` | `maroon` | 给 `thinkingMax` 让出 `red`，形成 `mauve → maroon → red` 的递进 |
 | `thinkingMax` | 未定义 | `red` | 补上最高档，取代回落的默认色 |
 

package/extensions/border-editor.ts

@@ -1,7 +1,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { CustomEditor } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, type TUI } from "@earendil-works/pi-tui";
-import { buildPulseFrames, PULSE_INTERVAL_MS } from "./indicator.ts";
+import { buildSpinnerFrames, SPINNER_INTERVAL_MS } from "./indicator.ts";
 
 export function formatDuration(seconds: number): string {
 	const total = Math.max(0, Math.floor(seconds));
@@ -16,8 +16,8 @@ export type EditorTitleInputs = {
 	/** 流式中为已进行秒数，空闲时为上一轮耗时秒数，无数据为 undefined。 */
 	getTimerSeconds(): number | undefined;
 	isStreaming(): boolean;
-	/** 关掉后不显示呼吸灯（而不是停在静止帧）。 */
-	isPulseEnabled(): boolean;
+	/** 关掉后不显示 spinner（而不是停在静止帧）。 */
+	isSpinnerEnabled(): boolean;
 	/** 编辑器主题（getEditorTheme）只有 borderColor/selectList，配色要另取实时主题。 */
 	getTheme(): Theme;
 };
@@ -32,27 +32,29 @@ type BorderTitle = {
 };
 
 /**
- * 编辑器边框上的常驻标题：`<呼吸灯> <模型名>  ⏱ 耗时`，空闲时也在（呼吸灯不闪则不显示）。
+ * 编辑器边框上的常驻标题：`<盲文 spinner> <模型名>  ⏱ 耗时`，空闲时也在（不转则不显示）。
  *
  * 帧由自己按时间算，流式时用定时器驱动重绘（pi 的 WorkingStatusIndicator 靠 Loader 同理）。
  */
 class PiUiBorderTitle implements BorderTitle {
 	private readonly tui: TUI;
 	private readonly inputs: EditorTitleInputs;
+	private readonly getBorderColor: (text: string) => string;
 	private ticker: ReturnType<typeof setInterval> | undefined;
 	private framesKey: string | undefined;
 	private frames: string[] = [];
 
-	constructor(tui: TUI, inputs: EditorTitleInputs) {
+	constructor(tui: TUI, inputs: EditorTitleInputs, getBorderColor: (text: string) => string) {
 		this.tui = tui;
 		this.inputs = inputs;
+		this.getBorderColor = getBorderColor;
 	}
 
-	/** 状态或模型变化后调用：立即重绘，并按是否流式启停呼吸灯。 */
+	/** 状态或模型变化后调用：立即重绘，并按是否流式启停 spinner。 */
 	sync(): void {
 		if (this.inputs.isStreaming()) {
 			if (!this.ticker) {
-				this.ticker = setInterval(() => this.tui.requestRender(), PULSE_INTERVAL_MS);
+				this.ticker = setInterval(() => this.tui.requestRender(), SPINNER_INTERVAL_MS);
 			}
 		} else {
 			this.stop();
@@ -68,12 +70,14 @@ class PiUiBorderTitle implements BorderTitle {
 	renderInBorder(width: number): string {
 		const theme = this.inputs.getTheme();
 		const model = this.inputs.getModelId();
-		const pulse = this.renderPulse(theme);
+		const spinner = this.renderSpinner(theme);
 
-		// 不闪的时候不占位：留一个静止的点比没有更难看出在不在生成。
+		// 不转的时候不占位：留一个静止的帧比没有更难看出在不在生成。
 		const parts: string[] = [];
-		if (pulse !== undefined) parts.push(pulse);
-		if (model !== undefined) parts.push(theme.fg("text", model));
+		if (spinner !== undefined) parts.push(spinner);
+		// 与编辑框边框同色：直接用编辑器当前的 borderColor，边框换成什么色（thinking
+		// level、bash 模式、换主题）标题就跟着变，不需要自己维护 token 映射。
+		if (model !== undefined) parts.push(this.getBorderColor(model));
 		const head = parts.join(" ");
 
 		const seconds = this.inputs.getTimerSeconds();
@@ -86,10 +90,10 @@ class PiUiBorderTitle implements BorderTitle {
 		return truncateToWidth(head, width, "");
 	}
 
-	/** 边框窄到放不下标题时只留呼吸灯；不闪时交给外层画普通边框。 */
+	/** 边框窄到放不下标题时只留 spinner；不转时交给外层画普通边框。 */
 	renderSpinnerInBorder(width: number): string {
-		const pulse = this.renderPulse(this.inputs.getTheme());
-		return pulse === undefined ? "" : truncateToWidth(pulse, width, "");
+		const spinner = this.renderSpinner(this.inputs.getTheme());
+		return spinner === undefined ? "" : truncateToWidth(spinner, width, "");
 	}
 
 	private stop(): void {
@@ -103,16 +107,16 @@ class PiUiBorderTitle implements BorderTitle {
 	private currentFrames(theme: Theme): string[] {
 		if (theme.name !== this.framesKey) {
 			this.framesKey = theme.name;
-			this.frames = buildPulseFrames(theme);
+			this.frames = buildSpinnerFrames(theme);
 		}
 		return this.frames;
 	}
 
-	/** 流式时按时间取帧（与定时器同频，无需自增索引）；不闪时返回 undefined，即完全不显示。 */
-	private renderPulse(theme: Theme): string | undefined {
-		if (!this.inputs.isPulseEnabled() || !this.inputs.isStreaming()) return undefined;
+	/** 流式时按时间取帧（与定时器同频，无需自增索引）；不转时返回 undefined，即完全不显示。 */
+	private renderSpinner(theme: Theme): string | undefined {
+		if (!this.inputs.isSpinnerEnabled() || !this.inputs.isStreaming()) return undefined;
 		const frames = this.currentFrames(theme);
-		return frames[Math.floor(Date.now() / PULSE_INTERVAL_MS) % frames.length];
+		return frames[Math.floor(Date.now() / SPINNER_INTERVAL_MS) % frames.length];
 	}
 }
 
@@ -132,7 +136,8 @@ export class PiUiBorderEditor extends CustomEditor {
 
 	constructor(tui: EditorArgs[0], theme: EditorArgs[1], keybindings: EditorArgs[2], inputs: EditorTitleInputs) {
 		super(tui, theme, keybindings, { embedWorkingStatus: true });
-		this.title = new PiUiBorderTitle(tui, inputs);
+		// 延迟取：pi 会用 getThinkingBorderColor / getBashModeBorderColor 整体替换 borderColor。
+		this.title = new PiUiBorderTitle(tui, inputs, (text) => this.borderColor(text));
 		this.attachTitle();
 	}
 
@@ -146,7 +151,7 @@ export class PiUiBorderEditor extends CustomEditor {
 		this.title.sync();
 	}
 
-	/** 停掉呼吸灯定时器；pi 切换编辑器时不会调用，入口在 shutdown/关闭特性时调用。 */
+	/** 停掉 spinner 定时器；pi 切换编辑器时不会调用，入口在 shutdown/关闭特性时调用。 */
 	dispose(): void {
 		this.title.dispose();
 	}

package/extensions/footer.ts

@@ -110,9 +110,9 @@ export class PiUiFooter implements Component {
 	private renderBranch(): string {
 		const branch = this.data.getGitBranch();
 		if (!branch) return "";
-		// 图标用 accent（该主题下为 mauve）做标识；分支名是内容，用 text——压到 muted/dim
-		// 会跟标签、次要数字混成一片灰。
-		return `${this.theme.fg("accent", GIT_ICON)} ${this.theme.fg("text", branch)}`;
+		// 图标与分支名同色：整块 accent 让分支在行尾立成一个锚点。名字单独压成灰色会
+		// 读成"图标是装饰、名字是正文"，两种颜色反而把这一块拆散。
+		return this.theme.fg("accent", `${GIT_ICON} ${branch}`);
 	}
 
 	/** 第 2 行：上下文进度条 + 累计用量，标签补齐到 LABEL_COLUMN 与上一行左对齐。 */

package/extensions/index.ts

@@ -1,10 +1,11 @@
 import type { ExtensionAPI, ExtensionContext, SessionEntry } from "@earendil-works/pi-coding-agent";
 import { PiUiBorderEditor } from "./border-editor.ts";
 import { createUsageTotals, PiUiFooter, type UsageTotals } from "./footer.ts";
-import { buildPulseFrames, PULSE_INTERVAL_MS } from "./indicator.ts";
+import { buildSpinnerFrames, SPINNER_INTERVAL_MS } from "./indicator.ts";
+import { ThinkingDotsAnimator } from "./thinking-label.ts";
 
-/** 可单独开关的三块能力，值即为 /pi-ui 的子命令名。 */
-const FEATURES = ["footer", "indicator", "working"] as const;
+/** 可单独开关的四块能力，值即为 /pi-ui 的子命令名。 */
+const FEATURES = ["footer", "indicator", "working", "thinking"] as const;
 
 type Feature = (typeof FEATURES)[number];
 
@@ -47,7 +48,7 @@ function totalsFromEntries(entries: SessionEntry[]): UsageTotals {
 }
 
 export default function (pi: ExtensionAPI) {
-	const enabled: Record<Feature, boolean> = { footer: true, indicator: true, working: true };
+	const enabled: Record<Feature, boolean> = { footer: true, indicator: true, working: true, thinking: true };
 
 	/** 事件里的 ctx 会被新会话替换，footer 通过它读取实时数据，所以每收到事件就刷新引用。 */
 	let current: ExtensionContext | undefined;
@@ -58,6 +59,9 @@ export default function (pi: ExtensionAPI) {
 	/** 其他扩展临时替换的边框模型名；undefined 表示用当前会话模型。 */
 	let modelOverride: string | undefined;
 
+	/** 折叠 thinking 块标签的 spinner 动画；只在 assistant 流式期间开表。 */
+	const thinkingDots = new ThinkingDotsAnimator(() => current);
+
 	// agent_start → agent_settled 覆盖整轮（含工具调用与重试），空闲时保留上一轮耗时。
 	let turnStartedAt: number | undefined;
 	let lastTurnSeconds: number | undefined;
@@ -81,7 +85,7 @@ export default function (pi: ExtensionAPI) {
 	};
 
 	/**
-	 * 闪烁帧是构建期快照，换主题后不会自动更新；这里按主题名做一次惰性重建。
+	 * spinner 帧是构建期快照，换主题后不会自动更新；这里按主题名做一次惰性重建。
 	 * 边框标题自己按主题名缓存帧（见 PiUiBorderTitle.currentFrames），不需要这步；
 	 * 这里只为内置指示器重新配置，即 working 关闭时的回退路径。
 	 */
@@ -90,7 +94,7 @@ export default function (pi: ExtensionAPI) {
 		if (name === syncedTheme) return;
 		syncedTheme = name;
 		if (!enabled.indicator) return;
-		ctx.ui.setWorkingIndicator({ frames: buildPulseFrames(ctx.ui.theme), intervalMs: PULSE_INTERVAL_MS });
+		ctx.ui.setWorkingIndicator({ frames: buildSpinnerFrames(ctx.ui.theme), intervalMs: SPINNER_INTERVAL_MS });
 	};
 
 	/** 用自己的编辑器子类接管边框标题，让模型名与耗时在空闲时也留在边框上。 */
@@ -100,7 +104,7 @@ export default function (pi: ExtensionAPI) {
 				getModelId: () => modelOverride ?? current?.model?.id,
 				getTimerSeconds: timerSeconds,
 				isStreaming: () => turnStartedAt !== undefined,
-				isPulseEnabled: () => enabled.indicator,
+				isSpinnerEnabled: () => enabled.indicator,
 				getTheme: () => ctx.ui.theme,
 			});
 			return borderEditor;
@@ -121,6 +125,13 @@ export default function (pi: ExtensionAPI) {
 	const apply = (ctx: ExtensionContext, feature: Feature, on: boolean): void => {
 		enabled[feature] = on;
 		switch (feature) {
+			case "thinking":
+				if (on) thinkingDots.pause();
+				else {
+					thinkingDots.dispose();
+					ctx.ui.setHiddenThinkingLabel(undefined);
+				}
+				return;
 			case "footer":
 				if (on) installFooter(ctx);
 				else removeFooter(ctx);
@@ -156,6 +167,20 @@ export default function (pi: ExtensionAPI) {
 		if (enabled.working) installBorderEditor(ctx);
 		else removeBorderEditor(ctx);
 		if (enabled.footer) installFooter(ctx);
+		if (enabled.thinking) thinkingDots.pause();
+	});
+
+	// spinner 动画跟消息粒度走：一轮里可能有多条 assistant 消息，中间夹着工具调用。
+	pi.on("message_start", (event, ctx) => {
+		current = ctx;
+		if (!enabled.thinking || event.message.role !== "assistant") return;
+		thinkingDots.animate();
+	});
+
+	pi.on("message_end", (event, ctx) => {
+		current = ctx;
+		if (!enabled.thinking || event.message.role !== "assistant") return;
+		thinkingDots.pause();
 	});
 
 	pi.on("model_select", (_event, ctx) => {
@@ -177,11 +202,14 @@ export default function (pi: ExtensionAPI) {
 			lastTurnSeconds = (Date.now() - turnStartedAt) / 1000;
 			turnStartedAt = undefined;
 		}
-		// 停下呼吸灯，并重绘一次让耗时定格为上一轮结果。
+		// 停下 spinner，并重绘一次让耗时定格为上一轮结果。
 		borderEditor?.sync();
+		// 用户中断时不会走到 message_end，这里兜住 spinner 动画。
+		if (enabled.thinking) thinkingDots.pause();
 	});
 
 	pi.on("session_shutdown", () => {
+		thinkingDots.dispose();
 		borderEditor?.dispose();
 		borderEditor = undefined;
 		footer = undefined;
@@ -190,7 +218,7 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.registerCommand(COMMAND, {
-		description: "查看或开关 pi-ui 的 footer、呼吸灯与编辑器边框标题",
+		description: "查看或开关 pi-ui 的 footer、盲文 spinner、编辑器边框标题与 thinking spinner 动画",
 		handler: async (args, ctx) => {
 			current = ctx;
 			const [feature, value] = args.trim().toLowerCase().split(/\s+/);

package/extensions/indicator.ts

@@ -1,27 +1,33 @@
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 
-/** 帧间隔，与原版 pi-catppuccin-tui 保持一致。 */
-export const PULSE_INTERVAL_MS = 120;
+/**
+ * 帧间隔，与 pi 自带 Loader 的 `DEFAULT_INTERVAL_MS` 一致（80ms）。
+ *
+ * 帧数从 4 变成 10 后，沿用 120ms 会让一圈拖到 1.2s、显得发滞；对齐 pi 的 80ms 才是
+ * “原生 spinner” 的手感。
+ */
+export const SPINNER_INTERVAL_MS = 80;
 
 /**
- * 闪烁序列 `· • ● ● • ·`，帧形沿用原版。
+ * 盲文 spinner 帧，与 pi 自带 Loader 的 `DEFAULT_FRAMES` 逐帧相同
+ * （`@earendil-works/pi-tui` 的 components/loader.js）。
  *
- * 原实现把 Macchiato 的十六进制色写死在帧字符串里，换主题后指示器颜色不会跟着变；
- * 这里保留帧形，颜色改为当前主题的 token（dim → accent → borderAccent）。
+ * 用 pi 原生那套而不是 `▘▝▗▖` / `◰◳◲◱` 这类整格块：后者在等宽字体下几乎占满整格，
+ * 在边框上比正文还抢眼。10 帧都是 1 列宽（pi-tui 的 `visibleWidth`），边框标题不抖。
+ */
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+/**
+ * 单色。早先是 `dim → muted → accent → borderAccent` 的明暗递进，那是 4 帧矩形方案
+ * 才成立的观感；帧数到 10 后逐帧换色会变成“亮度在扫”，反而不像 pi 自带的 spinner，
+ * 所以这里跟 pi 内置 working 指示器一样统一用 `accent`。
  */
-const PULSE: ReadonlyArray<readonly [ThemeColor, string]> = [
-	["dim", "·"],
-	["dim", "•"],
-	["accent", "●"],
-	["borderAccent", "●"],
-	["muted", "•"],
-	["dim", "·"],
-];
+const SPINNER_COLOR: ThemeColor = "accent";
 
 /**
- * 构建闪烁帧。帧是构建期快照（`theme.fg()` 在此刻求值），
+ * 构建 spinner 帧。帧是构建期快照（`theme.fg()` 在此刻求值），
  * 主题切换后需要重新调用本函数才会生效。
  */
-export function buildPulseFrames(theme: Theme): string[] {
-	return PULSE.map(([color, glyph]) => theme.fg(color, glyph));
+export function buildSpinnerFrames(theme: Theme): string[] {
+	return SPINNER_FRAMES.map((glyph) => theme.fg(SPINNER_COLOR, glyph));
 }

package/extensions/thinking-label.ts

@@ -0,0 +1,84 @@
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+
+import { buildSpinnerFrames, SPINNER_INTERVAL_MS } from "./indicator.ts";
+
+/** 流式结束后回落的静态标记：横向省略号，明确“已经想完”。 */
+const PAUSED_MARK = "⋯";
+
+const LABEL_TEXT = "Thinking...";
+
+/**
+ * 生成一帧 thinking 标签。`frame` 为 undefined 即空闲帧。
+ *
+ * 帧直接复用边框指示器那套盲文 spinner（`buildSpinnerFrames`），不在这里再写一份帧表：
+ * 两处观感要一致，两份帧列表迟早会漂移。
+ *
+ * 折叠 thinking 块的标签会被 pi 整串包进 `italic(fg("thinkingText", label))`，
+ * 内层再出现 fg 就会把自己的 reset 带进来，之后的行内文本不再跟随 `thinkingText`；
+ * 所以尾部文本这里主动再套一次 `thinkingText`，颜色不塌。
+ */
+function buildLabel(theme: Theme, frame: string | undefined): string {
+	const head = frame ?? theme.fg("dim", PAUSED_MARK);
+	return `${head} ${theme.fg("thinkingText", LABEL_TEXT)}`;
+}
+
+/**
+ * 折叠 thinking 块标签的 spinner 动画。
+ *
+ * pi 只提供静态的 `setHiddenThinkingLabel`，动画靠定时器反复改写标签实现；每次改写会
+ * 重绘整条 transcript，所以只在 assistant 消息流式期间开表，消息结束立刻停表并回落到
+ * 静态帧——流式期间 pi 本来就在逐 token 重绘，这点额外开销看不出来。
+ * 频率跟边框指示器一致（`SPINNER_INTERVAL_MS`），两处 spinner 因此同速。
+ *
+ * 会话对象会在切换/重载时被替换，所以上下文用取值函数传入而不是构造期捕获。
+ */
+export class ThinkingDotsAnimator {
+	private readonly getContext: () => ExtensionContext | undefined;
+	private timer: ReturnType<typeof setInterval> | undefined;
+	private step = 0;
+
+	constructor(getContext: () => ExtensionContext | undefined) {
+		this.getContext = getContext;
+	}
+
+	/** 回落静态帧。每次进空闲都重新取色，主题在两轮之间被换掉也不会留下旧颜色。 */
+	pause(): void {
+		this.stopTimer();
+		this.paint(undefined);
+	}
+
+	/** 开始流式动画。已在动就不重启，避免每个 `message_start` 都重置相位。 */
+	animate(): void {
+		if (this.timer) return;
+		this.step = 0;
+		this.paint(this.frameAt(0));
+		this.timer = setInterval(() => {
+			this.step += 1;
+			this.paint(this.frameAt(this.step));
+		}, SPINNER_INTERVAL_MS);
+	}
+
+	dispose(): void {
+		this.stopTimer();
+	}
+
+	/** 帧是构建期快照（`theme.fg()` 当场求值），所以每帧按当前主题重取一次。 */
+	private frameAt(step: number): string | undefined {
+		const context = this.getContext();
+		if (!context?.hasUI) return undefined;
+		const frames = buildSpinnerFrames(context.ui.theme);
+		return frames[step % frames.length];
+	}
+
+	private paint(frame: string | undefined): void {
+		const context = this.getContext();
+		if (!context?.hasUI) return;
+		context.ui.setHiddenThinkingLabel(buildLabel(context.ui.theme, frame));
+	}
+
+	private stopTimer(): void {
+		if (!this.timer) return;
+		clearInterval(this.timer);
+		this.timer = undefined;
+	}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@muzi3/pi-ui",
-  "version": "0.1.1",
-  "description": "Pi extension: 双行仪表盘 footer + 主题化工作指示器 + Catppuccin Mocha 层次增强主题",
+  "version": "0.2.0",
+  "description": "Pi extension: 双行仪表盘 footer + 主题化工作指示器 + 折叠 thinking 标签三点动画 + Catppuccin Mocha 层次增强主题",
   "keywords": [
     "pi-package",
     "pi-extension",

package/themes/pi-ui-catppuccin.json

@@ -79,8 +79,8 @@
     "syntaxType": "yellow",
     "syntaxOperator": "sky",
     "syntaxPunctuation": "overlay2",
-    "thinkingOff": "surface1",
-    "thinkingMinimal": "surface2",
+    "thinkingOff": "overlay0",
+    "thinkingMinimal": "overlay1",
     "thinkingLow": "blue",
     "thinkingMedium": "sapphire",
     "thinkingHigh": "mauve",