pi-cc-extensions 0.8.14 → 0.8.16

package/README.en.md

@@ -81,7 +81,6 @@ The `ask_user_question` tool is registered automatically.
 | Structured questionnaires | Single choice, multiple choice, custom answers, Markdown previews, and RPC / ACP fallback        | `ask_user_question` |
 | Context inspection        | Usage breakdown and previews for the system prompt, tools, skills, and messages                  | `/context`          |
 | Session references        | Search and inject effective context from previous Sessions or existing SubAgents                 | `@session:`         |
-| Agent completion          | Complete and delegate custom Agents from`~/.pi/agent/agents/*.md`                                | `@agent-name`       |
 | Theme                     | Includes the GitHub Dark Default theme                                                           | `/theme`            |
 
 ### Output modes
@@ -165,10 +164,11 @@ Run `/reload` after changing extensions. Changes under `extensions/ask-user-ques
 | `npm:pi-theme-picker`         | Theme search and live preview                                |
 | `npm:@ayulab/pi-rewind`       | Checkpoint-based code or conversation rollback               |
 | `npm:pi-compact-thinking`     | Compact rendering for hidden thinking blocks                 |
-| `npm:pi-startup-header`       | Theme-aware startup header                                   |
 
 ## Credits
 
 - Compact transcript behavior is based on [`avhagedorn/pi-compact-transcript`](https://github.com/avhagedorn/pi-compact-transcript) v0.6.2 (MIT).
 - Structured questionnaires are based on [`@juicesharp/rpiv-ask-user-question`](https://github.com/juicesharp/rpiv-mono/tree/main/packages/rpiv-ask-user-question) v2.1.0 (MIT).
 - Rich diffs are adapted from [`MasuRii/pi-tool-display`](https://github.com/MasuRii/pi-tool-display) (MIT). See [`extensions/tool-diff/ATTRIBUTION.md`](./extensions/tool-diff/ATTRIBUTION.md).
+- Startup header based on [`EnderLiquid/pi-startup-header`](https://github.com/EnderLiquid/pi-startup-header) (MIT).
+- Command aliases based on [`xRyul/pi-aliases`](https://github.com/xRyul/pi-aliases) (MIT).

package/README.md

@@ -59,17 +59,12 @@
 
 ```bash
 pi install npm:pi-cc-extensions
-```
-
-安装后执行 `/reload`，然后可以使用：
 
-```text
-/ccstyle       # 配置输出与 fixed editor 交互
-/context       # 查看上下文占用
-@              # 补全 Agent、Session 与文件
+# GitHub
+pi install git:github.com/minuque/pi-cc-extensions
 ```
 
-`ask_user_question` 会自动注册为模型工具。
+安装后执行 `/reload`
 
 ## 功能
 
@@ -81,62 +76,7 @@ pi install npm:pi-cc-extensions
 | Ask User Question 结构化问卷 | 单选、多选、自定义回答、Markdown 预览及 RPC / ACP 降级                          | `ask_user_question` |
 | 上下文检查                   | 查看上下文占用，并预览 System prompt、Tools、Skills 和消息内容                  | `/context`          |
 | Session 引用                 | 搜索并注入历史 Session 或现有 SubAgent 的有效上下文                             | `@session:`         |
-| Agent 补全                   | 从`~/.pi/agent/agents/*.md` 补全并委托自定义 Agent                              | `@agent-name`       |
-| 主题                         | 随包提供 GitHub Dark Default 主题                                               | `/theme`            |
-
-### 输出模式
-
-
-| 模式      | 行为                                                      |
-| ----------- | ----------------------------------------------------------- |
-| `on`      | Claude Code 风格工具输出；`edit` / `write` 使用 rich diff |
-| `off`     | 使用 Pi 原生 renderer                                     |
-| `compact` | 单行工具预览、同名调用合并、运行耗时与总结                |
-
-```text
-/ccstyle on
-/ccstyle off
-/ccstyle compact
-/ccstyle status
-```
-
-配置保存在 `~/.pi/agent/claude-code-style.json`：
-
-```json
-{
-  "mode": "on",
-  "excludeRenderers": [],
-  "fixedEditorFeatures": true
-}
-```
-
-- `excludeRenderers` 使用精确工具名；`Agent` 始终保留专用 renderer。
-- `fixedEditorFeatures: true` 启用 fixed editor 鼠标滚动、点击、viewport 映射和回到底部提示。
-- 设为 `false` 会关闭终端鼠标上报，恢复终端原生滚轮；`Ctrl+End` 仍可用。
-- 手动修改配置后执行 `/reload`。
-
-### 结构化问卷
-
-支持 1–4 个问题、每题 2–4 个选项、单选、多选、自定义回答和可选 Markdown 预览。TUI 会保留部分 transcript 空间；RPC / ACP 环境自动降级为原生对话框。
-
-问卷配置位于 `~/.config/rpiv-ask-user-question/config.json`。快捷键与完整行为见 [`extensions/ask-user-question/README.md`](./extensions/ask-user-question/README.md)。
-
-### `@` 引用
-
-- 输入 `@session:` 引用历史 Session。
-- 输入 `@agent-name` 委托自定义 Agent。
-- 可与 `@bacnh85/pi-fff` 和 `@tintinweb/pi-subagents` 共存。
-- Session 内容会去重并限制注入规模。
-
-## 其他安装方式
-
-```bash
-# GitHub
-pi install git:github.com/minuque/pi-cc-extensions
-
-# 本地仓库
-pi install /absolute/path/to/pi-cc-extensions
-```
+| 主题                         | 随包提供内置 GitHub Dark Default 主题                                           | `/theme`            |
 
 ## 本地开发
 
@@ -165,10 +105,11 @@ pi -e .
 | `npm:pi-theme-picker`         | 主题搜索和实时预览                  |
 | `npm:@ayulab/pi-rewind`       | 基于 checkpoint 回退代码或对话      |
 | `npm:pi-compact-thinking`     | 紧凑显示隐藏的 thinking 块          |
-| `npm:pi-startup-header`       | 主题自适应启动标题                  |
 
 ## 致谢
 
 - Compact transcript 基于 [`avhagedorn/pi-compact-transcript`](https://github.com/avhagedorn/pi-compact-transcript) v0.6.2（MIT）。
 - 结构化问卷基于 [`@juicesharp/rpiv-ask-user-question`](https://github.com/juicesharp/rpiv-mono/tree/main/packages/rpiv-ask-user-question) v2.1.0（MIT）。
 - Rich diff 改编自 [`MasuRii/pi-tool-display`](https://github.com/MasuRii/pi-tool-display)（MIT）；详见 [`extensions/tool-diff/ATTRIBUTION.md`](./extensions/tool-diff/ATTRIBUTION.md)。
+- 启动头基于 [`EnderLiquid/pi-startup-header`](https://github.com/EnderLiquid/pi-startup-header)（MIT）。
+- 命令别名基于 [`xRyul/pi-aliases`](https://github.com/xRyul/pi-aliases)（MIT）。

package/extensions/claude-code-style.ts

@@ -2138,6 +2138,8 @@ function createCcstyleTool(
 			setToolVisualState(context, isError ? "error" : "success");
 			const expanded = isToolExpanded(options, context);
 			if (shouldRenderRichDiff(config.mode, toolName, Boolean(isError))) {
+				// Pass getter so Diff indicator / wrap / limits update on the next paint
+				// without recreating the tool result component.
 				const richResult = renderRichToolResult(
 					toolName,
 					result,
@@ -2145,7 +2147,7 @@ function createCcstyleTool(
 					theme,
 					context,
 					writeExecutionMetadata,
-					getToolDisplayConfig(),
+					getToolDisplayConfig,
 				);
 				if (richResult) return richResult;
 			}

package/extensions/pi-aliases.ts

@@ -0,0 +1,31 @@
+/**
+ * Pi Aliases Extension
+ *
+ * Registers command aliases that show in autocomplete:
+ *   /clear → /new  (start a new session)
+ *   /exit  → /quit (exit pi)
+ *
+ * Install:
+ *   pi install npm:pi-aliases
+ *   pi install git:github.com/xRyul/pi-aliases
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+
+export default function (pi: ExtensionAPI) {
+	// /clear → /new
+	pi.registerCommand("clear", {
+		description: "→ /new · Start a new session",
+		handler: async (_args, ctx) => {
+			await ctx.newSession();
+		},
+	});
+
+	// /exit → /quit
+	pi.registerCommand("exit", {
+		description: "→ /quit · Exit pi",
+		handler: async (_args, ctx) => {
+			ctx.shutdown();
+		},
+	});
+}

package/extensions/pi-startup-header.ts

@@ -0,0 +1,288 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+
+type Rgb = [number, number, number];
+type StyledPart = {
+	raw: string;
+	styled: string;
+};
+
+const ANSI_RESET = "\x1b[0m";
+const ANSI_PATTERN =
+	/[\u001B\u009B][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[a-zA-Z\d]*)*)?\u0007)|(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g;
+
+const LOGO_LINES = [
+	"████████████╗",
+	"████████████║",
+	"████╔═══████║",
+	"████║   ████║",
+	"████████╬═══████╗",
+	"████████║   ████║ ",
+	"████╔═══╝   ████║",
+	"████║       ████║",
+	"╚═══╝       ╚═══╝",
+];
+
+const TAGLINE_LINE_1 = "There are many agent harnesses,";
+const TAGLINE_LINE_2_PREFIX = "but this one is ";
+const TAGLINE_LINE_2_HIGHLIGHT = "yours";
+const TAGLINE_LINE_2_SUFFIX = ".";
+
+const FALLBACK_ACCENT_RGB: Rgb = [80, 160, 255];
+const LOGO_BLOCK_WIDTH = Math.max(...LOGO_LINES.map((line) => [...line].length));
+
+const PALETTE_STEPS = 24;
+const PALETTE_MAX_DARKEN = 0.18;
+const PALETTE_MAX_LIGHTEN = 0.18;
+const LOGO_ROW_PHASE_STEP = 0.12;
+
+const ANSI_16_RGB_TABLE: Rgb[] = [
+	[0, 0, 0],
+	[128, 0, 0],
+	[0, 128, 0],
+	[128, 128, 0],
+	[0, 0, 128],
+	[128, 0, 128],
+	[0, 128, 128],
+	[192, 192, 192],
+	[128, 128, 128],
+	[255, 0, 0],
+	[0, 255, 0],
+	[255, 255, 0],
+	[0, 0, 255],
+	[255, 0, 255],
+	[0, 255, 255],
+	[255, 255, 255],
+];
+
+function stripAnsi(text: string): string {
+	return text.replace(ANSI_PATTERN, "");
+}
+
+function getVisibleLength(text: string): number {
+	return [...stripAnsi(text)].length;
+}
+
+function clampByte(value: number): number {
+	return Math.max(0, Math.min(255, Math.round(value)));
+}
+
+function interpolateChannel(start: number, end: number, factor: number): number {
+	return Math.round(start + (end - start) * factor);
+}
+
+function interpolateRgb(start: Rgb, end: Rgb, factor: number): Rgb {
+	return [
+		interpolateChannel(start[0], end[0], factor),
+		interpolateChannel(start[1], end[1], factor),
+		interpolateChannel(start[2], end[2], factor),
+	];
+}
+
+function darkenRgb(rgb: Rgb, amount: number): Rgb {
+	return [
+		clampByte(rgb[0] * (1 - amount)),
+		clampByte(rgb[1] * (1 - amount)),
+		clampByte(rgb[2] * (1 - amount)),
+	];
+}
+
+function lightenRgb(rgb: Rgb, amount: number): Rgb {
+	return [
+		clampByte(rgb[0] + (255 - rgb[0]) * amount),
+		clampByte(rgb[1] + (255 - rgb[1]) * amount),
+		clampByte(rgb[2] + (255 - rgb[2]) * amount),
+	];
+}
+
+function applyTruecolor(rgb: Rgb, text: string): string {
+	const [red, green, blue] = rgb;
+	return `\x1b[38;2;${red};${green};${blue}m${text}${ANSI_RESET}`;
+}
+
+function ansi16ToRgb(index: number): Rgb {
+	return ANSI_16_RGB_TABLE[index] ?? [255, 255, 255];
+}
+
+function ansi256ToRgb(index: number): Rgb {
+	if (index < 16) return ansi16ToRgb(index);
+
+	if (index >= 232) {
+		const gray = 8 + (index - 232) * 10;
+		return [gray, gray, gray];
+	}
+
+	const cubeIndex = index - 16;
+	const redIndex = Math.floor(cubeIndex / 36);
+	const greenIndex = Math.floor((cubeIndex % 36) / 6);
+	const blueIndex = cubeIndex % 6;
+	const values = [0, 95, 135, 175, 215, 255];
+
+	return [values[redIndex]!, values[greenIndex]!, values[blueIndex]!];
+}
+
+function parseTruecolorAnsi(ansi: string): Rgb | undefined {
+	const match = ansi.match(/38;2;(\d+);(\d+);(\d+)/);
+	if (!match) return undefined;
+
+	return [Number(match[1]), Number(match[2]), Number(match[3])];
+}
+
+function parseAnsi256Foreground(ansi: string): Rgb | undefined {
+	const match = ansi.match(/38;5;(\d+)/);
+	if (!match) return undefined;
+
+	return ansi256ToRgb(Number(match[1]));
+}
+
+function parseAnsi16Foreground(ansi: string): Rgb | undefined {
+	const normalMatch = ansi.match(/(?:\[|;)(3[0-7])(?:;|m)/);
+	if (normalMatch) {
+		return ansi16ToRgb(Number(normalMatch[1]) - 30);
+	}
+
+	const brightMatch = ansi.match(/(?:\[|;)(9[0-7])(?:;|m)/);
+	if (brightMatch) {
+		return ansi16ToRgb(Number(brightMatch[1]) - 90 + 8);
+	}
+
+	return undefined;
+}
+
+function parseForegroundRgbFromAnsi(ansi: string): Rgb | undefined {
+	return parseTruecolorAnsi(ansi) ?? parseAnsi256Foreground(ansi) ?? parseAnsi16Foreground(ansi);
+}
+
+function resolveAccentRgb(theme: { getFgAnsi(name: string): string }): Rgb {
+	return parseForegroundRgbFromAnsi(theme.getFgAnsi("accent")) ?? FALLBACK_ACCENT_RGB;
+}
+
+function buildAccentPalette(accent: Rgb): Rgb[] {
+	return Array.from({ length: PALETTE_STEPS }, (_, index) => {
+		const progress = index / PALETTE_STEPS;
+		const wave = -Math.cos(progress * Math.PI * 2);
+
+		if (wave < 0) {
+			return darkenRgb(accent, PALETTE_MAX_DARKEN * -wave);
+		}
+
+		return lightenRgb(accent, PALETTE_MAX_LIGHTEN * wave);
+	});
+}
+
+function sampleGradientColor(palette: Rgb[], position: number): Rgb {
+	const wrappedPosition = ((position % 1) + 1) % 1;
+	const scaledPosition = wrappedPosition * palette.length;
+	const baseIndex = Math.floor(scaledPosition) % palette.length;
+	const nextIndex = (baseIndex + 1) % palette.length;
+	const factor = scaledPosition - Math.floor(scaledPosition);
+
+	return interpolateRgb(palette[baseIndex]!, palette[nextIndex]!, factor);
+}
+
+function renderGradientText(text: string, palette: Rgb[], phase: number): string {
+	const characters = [...text];
+	const span = Math.max(characters.length - 1, 1);
+
+	return characters
+		.map((character, index) => {
+			if (character === " ") return character;
+			const color = sampleGradientColor(palette, index / span + phase);
+			return applyTruecolor(color, character);
+		})
+		.join("");
+}
+
+function createCenteredBlockLine(text: string, width: number, blockWidth: number): string {
+	const leftPadding = Math.max(0, Math.floor((width - blockWidth) / 2));
+	return `${" ".repeat(leftPadding)}${text}`;
+}
+
+function createCenteredStyledLine(parts: StyledPart[], width: number): string {
+	const rawText = parts.map((part) => part.raw).join("");
+	const leftPadding = Math.max(0, Math.floor((width - [...rawText].length) / 2));
+	const styledText = parts.map((part) => part.styled).join("");
+	return `${" ".repeat(leftPadding)}${styledText}`;
+}
+
+function fitLineToWidth(line: string, width: number): string {
+	if (getVisibleLength(line) <= width) {
+		return line;
+	}
+
+	return stripAnsi(line).slice(0, width);
+}
+
+function renderLogoLines(width: number, palette: Rgb[]): string[] {
+	return LOGO_LINES.map((line, rowIndex) => {
+		const phasedLine = renderGradientText(line, palette, rowIndex * LOGO_ROW_PHASE_STEP);
+		return createCenteredBlockLine(phasedLine, width, LOGO_BLOCK_WIDTH);
+	});
+}
+
+function renderTaglineLines(
+	width: number,
+	theme: {
+		fg(name: string, text: string): string;
+		bold(text: string): string;
+	},
+): string[] {
+	const line1 = createCenteredStyledLine(
+		[{ raw: TAGLINE_LINE_1, styled: theme.fg("accent", TAGLINE_LINE_1) }],
+		width,
+	);
+
+	const line2 = createCenteredStyledLine(
+		[
+			{
+				raw: TAGLINE_LINE_2_PREFIX,
+				styled: theme.fg("accent", TAGLINE_LINE_2_PREFIX),
+			},
+			{
+				raw: TAGLINE_LINE_2_HIGHLIGHT,
+				styled: theme.bold(theme.fg("mdLink", TAGLINE_LINE_2_HIGHLIGHT)),
+			},
+			{
+				raw: TAGLINE_LINE_2_SUFFIX,
+				styled: theme.fg("accent", TAGLINE_LINE_2_SUFFIX),
+			},
+		],
+		width,
+	);
+
+	return [line1, line2];
+}
+
+function renderHeaderLines(
+	width: number,
+	theme: {
+		getFgAnsi(name: string): string;
+		fg(name: string, text: string): string;
+		bold(text: string): string;
+	},
+): string[] {
+	const accentRgb = resolveAccentRgb(theme);
+	const palette = buildAccentPalette(accentRgb);
+	const logoLines = renderLogoLines(width, palette);
+	const taglineLines = renderTaglineLines(width, theme);
+
+	return ["", ...logoLines, "", ...taglineLines, ""].map((line) => fitLineToWidth(line, width));
+}
+
+export default function piStartupHeader(pi: ExtensionAPI) {
+	pi.on("session_start", async (_event, ctx) => {
+		if (!ctx.hasUI) return;
+
+		ctx.ui.setHeader((_tui, theme) => ({
+			render(width: number): string[] {
+				return renderHeaderLines(width, theme);
+			},
+			invalidate() {},
+		}));
+	});
+
+	pi.on("session_shutdown", async (_event, ctx) => {
+		if (!ctx.hasUI) return;
+
+		ctx.ui.setHeader(undefined);
+	});
+}

package/extensions/tool-diff/diff-renderer.ts

@@ -1312,6 +1312,25 @@ function resolveDiffIndicatorMode(
 	return config.diffIndicatorMode ?? DEFAULT_TOOL_DISPLAY_CONFIG.diffIndicatorMode;
 }
 
+/** Snapshot or live getter — panel changes must apply on the next paint. */
+export type DisplayConfigInput = ToolDisplayConfig | (() => ToolDisplayConfig);
+
+function resolveLiveDisplayConfig(input: DisplayConfigInput): ToolDisplayConfig {
+	return typeof input === "function" ? input() : input;
+}
+
+/** Cache key fragment so indicator/wrap/limits invalidate without host recreate. */
+function displayConfigCacheKey(config: ToolDisplayConfig): string {
+	return [
+		config.diffViewMode,
+		config.diffIndicatorMode,
+		String(config.diffSplitMinWidth),
+		String(config.diffCollapsedLines),
+		config.diffWordWrap ? "1" : "0",
+		String(config.expandedPreviewMaxLines),
+	].join(":");
+}
+
 function resolveIndicatorGlyph(
 	kind: DiffLineKind,
 	indicatorMode: DiffIndicatorMode,
@@ -2350,24 +2369,38 @@ function createDiffRenderCache() {
 	let cachedWidth: number | undefined;
 	let cachedExpanded: boolean | undefined;
 	let cachedMode: DiffPresentationMode | undefined;
+	let cachedConfigKey: string | undefined;
 	let cachedLines: string[] | undefined;
 
 	return {
-		get(width: number, expanded: boolean, mode: DiffPresentationMode): string[] | undefined {
+		get(
+			width: number,
+			expanded: boolean,
+			mode: DiffPresentationMode,
+			configKey: string,
+		): string[] | undefined {
 			if (
 				cachedLines &&
 				cachedWidth === width &&
 				cachedExpanded === expanded &&
-				cachedMode === mode
+				cachedMode === mode &&
+				cachedConfigKey === configKey
 			) {
 				return cachedLines;
 			}
 			return undefined;
 		},
-		set(width: number, expanded: boolean, mode: DiffPresentationMode, lines: string[]): string[] {
+		set(
+			width: number,
+			expanded: boolean,
+			mode: DiffPresentationMode,
+			configKey: string,
+			lines: string[],
+		): string[] {
 			cachedWidth = width;
 			cachedExpanded = expanded;
 			cachedMode = mode;
+			cachedConfigKey = configKey;
 			cachedLines = lines;
 			return lines;
 		},
@@ -2375,6 +2408,7 @@ function createDiffRenderCache() {
 			cachedWidth = undefined;
 			cachedExpanded = undefined;
 			cachedMode = undefined;
+			cachedConfigKey = undefined;
 			cachedLines = undefined;
 		},
 	};
@@ -2383,7 +2417,7 @@ function createDiffRenderCache() {
 export function renderEditDiffResult(
 	details: unknown,
 	options: DiffRenderOptions,
-	config: ToolDisplayConfig,
+	config: DisplayConfigInput,
 	theme: DiffTheme,
 	fallbackText: string,
 ): Component {
@@ -2418,16 +2452,19 @@ export function renderEditDiffResult(
 	const containerBgAnsi = undefined;
 	const language = resolveLanguageFromPath(options.filePath);
 	const highlightLine = createCodeLineHighlighter(language);
-	const wordWrap = config.diffWordWrap;
-	const indicatorMode = resolveDiffIndicatorMode(config);
 
 	const cache = createDiffRenderCache();
 
 	return {
 		render(width: number): string[] {
+			// Live config: panel can change indicator/wrap/limits after this component is created.
+			const live = resolveLiveDisplayConfig(config);
+			const wordWrap = live.diffWordWrap;
+			const indicatorMode = resolveDiffIndicatorMode(live);
+			const configKey = displayConfigCacheKey(live);
 			const safeWidth = normalizeDiffRenderWidth(width);
-			const mode = resolveDiffPresentationMode(config, safeWidth, canRenderSplitLayout(safeWidth));
-			const cached = cache.get(safeWidth, options.expanded, mode);
+			const mode = resolveDiffPresentationMode(live, safeWidth, canRenderSplitLayout(safeWidth));
+			const cached = cache.get(safeWidth, options.expanded, mode, configKey);
 			if (cached) {
 				return cached;
 			}
@@ -2437,6 +2474,7 @@ export function renderEditDiffResult(
 					safeWidth,
 					options.expanded,
 					mode,
+					configKey,
 					clampDiffLinesToWidth(
 						renderSingleDiffRow(
 							buildDiffSummaryText(parsed.stats, safeWidth),
@@ -2452,8 +2490,8 @@ export function renderEditDiffResult(
 			const headerRows = renderHeaderRows(parsed.stats, mode, safeWidth, theme);
 			const displayLimit = resolveDiffDisplayLimit(
 				options.expanded,
-				config.diffCollapsedLines,
-				config.expandedPreviewMaxLines,
+				live.diffCollapsedLines,
+				live.expandedPreviewMaxLines,
 			);
 			const processBudget = resolveDiffProcessBudget(displayLimit, wordWrap);
 			// Only highlight/render a prefix that can fill the display limit; full-diff
@@ -2486,8 +2524,8 @@ export function renderEditDiffResult(
 				bodyRows,
 				safeWidth,
 				options.expanded,
-				config.diffCollapsedLines,
-				config.expandedPreviewMaxLines,
+				live.diffCollapsedLines,
+				live.expandedPreviewMaxLines,
 				parsed.stats.hunks,
 				theme,
 				unprocessedLogicalRows,
@@ -2499,7 +2537,7 @@ export function renderEditDiffResult(
 					: [...headerRows.map((row) => row.text), ...bodyWithLimit];
 
 			const clampedLines = clampDiffLinesToWidth(renderedLines, safeWidth);
-			return cache.set(safeWidth, options.expanded, mode, clampedLines);
+			return cache.set(safeWidth, options.expanded, mode, configKey, clampedLines);
 		},
 		invalidate: cache.invalidate,
 	};
@@ -2753,7 +2791,7 @@ function renderWriteOverwriteGuardRows(
 export function renderWriteDiffResult(
 	content: string | undefined,
 	options: DiffRenderOptions,
-	config: ToolDisplayConfig,
+	config: DisplayConfigInput,
 	theme: DiffTheme,
 	fallbackText: string,
 ): Component {
@@ -2782,8 +2820,6 @@ export function renderWriteDiffResult(
 	const containerBgAnsi = undefined;
 	const language = resolveLanguageFromPath(filePath);
 	const highlightLine = createCodeLineHighlighter(language);
-	const wordWrap = config.diffWordWrap;
-	const indicatorMode = resolveDiffIndicatorMode(config);
 
 	let detailedData: WriteDiffData | undefined;
 	const cache = createDiffRenderCache();
@@ -2801,9 +2837,14 @@ export function renderWriteDiffResult(
 
 	return {
 		render(width: number): string[] {
+			// Live config: panel can change indicator/wrap/limits after this component is created.
+			const live = resolveLiveDisplayConfig(config);
+			const wordWrap = live.diffWordWrap;
+			const indicatorMode = resolveDiffIndicatorMode(live);
+			const configKey = displayConfigCacheKey(live);
 			const safeWidth = normalizeDiffRenderWidth(width);
 			const resolvedMode = resolveDiffPresentationMode(
-				config,
+				live,
 				safeWidth,
 				canRenderSplitLayout(safeWidth),
 			);
@@ -2812,7 +2853,7 @@ export function renderWriteDiffResult(
 				: resolvedMode === "split"
 					? "unified"
 					: resolvedMode;
-			const cached = cache.get(safeWidth, options.expanded, mode);
+			const cached = cache.get(safeWidth, options.expanded, mode, configKey);
 			if (cached) {
 				return cached;
 			}
@@ -2832,6 +2873,7 @@ export function renderWriteDiffResult(
 					safeWidth,
 					options.expanded,
 					mode,
+					configKey,
 					clampDiffLinesToWidth(
 						[header, ...renderWriteOverwriteGuardRows(overwriteGuard, safeWidth, theme)],
 						safeWidth,
@@ -2856,6 +2898,7 @@ export function renderWriteDiffResult(
 					safeWidth,
 					options.expanded,
 					mode,
+					configKey,
 					clampDiffLinesToWidth(summaryRows, safeWidth),
 				);
 			}
@@ -2863,8 +2906,8 @@ export function renderWriteDiffResult(
 			const data = getDetailedData();
 			const displayLimit = resolveDiffDisplayLimit(
 				options.expanded,
-				config.diffCollapsedLines,
-				config.expandedPreviewMaxLines,
+				live.diffCollapsedLines,
+				live.expandedPreviewMaxLines,
 			);
 			const processBudget = resolveDiffProcessBudget(displayLimit, wordWrap);
 			const entryBudget = takeEntriesForLineBudget(data.entries, processBudget);
@@ -2901,8 +2944,8 @@ export function renderWriteDiffResult(
 				bodyRows,
 				safeWidth,
 				options.expanded,
-				config.diffCollapsedLines,
-				config.expandedPreviewMaxLines,
+				live.diffCollapsedLines,
+				live.expandedPreviewMaxLines,
 				data.hunkCount,
 				theme,
 				unprocessedLogicalRows,
@@ -2911,7 +2954,7 @@ export function renderWriteDiffResult(
 			const renderedLines =
 				mode === "unified" ? [header, frame, ...bodyWithLimit, frame] : [header, ...bodyWithLimit];
 			const finalLines = clampDiffLinesToWidth(renderedLines, safeWidth);
-			return cache.set(safeWidth, options.expanded, mode, finalLines);
+			return cache.set(safeWidth, options.expanded, mode, configKey, finalLines);
 		},
 		invalidate: cache.invalidate,
 	};

package/extensions/tool-diff/index.ts

@@ -1,7 +1,11 @@
 import { createWriteToolDefinition, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth } from "@earendil-works/pi-tui";
-import { renderEditDiffResult, renderWriteDiffResult } from "./diff-renderer.ts";
-import { DEFAULT_TOOL_DISPLAY_CONFIG, type ToolDisplayConfig } from "./types.ts";
+import {
+	renderEditDiffResult,
+	renderWriteDiffResult,
+	type DisplayConfigInput,
+} from "./diff-renderer.ts";
+import { DEFAULT_TOOL_DISPLAY_CONFIG } from "./types.ts";
 import { executeWriteWithMetadata, WriteExecutionMetadataStore } from "./write-execution.ts";
 
 function resultText(result: any): string {
@@ -34,7 +38,8 @@ export function renderRichToolResult(
 	theme: any,
 	context: any,
 	writeMetadata: WriteExecutionMetadataStore,
-	displayConfig: ToolDisplayConfig = DEFAULT_TOOL_DISPLAY_CONFIG,
+	/** Plain snapshot or live getter — getter lets /ccstyle panel changes repaint existing diffs. */
+	displayConfig: DisplayConfigInput = DEFAULT_TOOL_DISPLAY_CONFIG,
 ): any | undefined {
 	if (options?.isPartial || options?.isError || context?.isError) return undefined;
 	const expanded = options?.expanded === true || context?.expanded === true;
@@ -110,4 +115,5 @@ export {
 	type DiffViewMode,
 	type DiffIndicatorMode,
 } from "./types.ts";
+export type { DisplayConfigInput } from "./diff-renderer.ts";
 export { WriteExecutionMetadataStore } from "./write-execution.ts";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-cc-extensions",
-	"version": "0.8.14",
+	"version": "0.8.16",
 	"description": "A Pi productivity suite with Claude Code-style UI, structured questionnaires, context inspection, and agent/session references",
 	"type": "module",
 	"keywords": [
@@ -27,6 +27,8 @@
 	],
 	"pi": {
 		"extensions": [
+			"./extensions/pi-aliases.ts",
+			"./extensions/pi-startup-header.ts",
 			"./extensions/claude-code-style.ts",
 			"./extensions/context.ts",
 			"./extensions/session-reference.ts",