pi-cc-extensions 0.8.0 → 0.8.2

package/README.md

@@ -18,6 +18,13 @@
 ## 界面预览
 
 <table>
+  <tr>
+    <td colspan="2" align="center">
+      <img src="./assets/readme/welcome.webp" width="100%" alt="Pi 启动后的欢迎界面">
+      <br>
+      <sub><b>欢迎界面</b><br> @ <code>npm:pi-startup-header</code> 与 <code>npm:pi-zentui</code></sub>
+    </td>
+  </tr>
   <tr>
     <td width="50%" align="center">
       <img src="./assets/readme/fixed-editor-navigation.webp" width="100%" alt="Pi fixed-editor 中的工具结果、回到底部按钮与 Ctrl+End 快捷键">

package/extensions/claude-code-style.ts

@@ -1,7 +1,7 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import {
+	DynamicBorder,
 	keyHint,
-	getSettingsListTheme,
 	ToolExecutionComponent,
 } from "@earendil-works/pi-coding-agent";
 import {
@@ -10,7 +10,7 @@ import {
 	type CompactStyleMode,
 } from "./compact-style.ts";
 import { sanitizeToolResultText } from "./tool-result-sanitize.ts";
-import { Container, SettingsList, Text, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { Container, SelectList, Text, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
@@ -254,7 +254,7 @@ export class ExpandedToolResultText {
 }
 
 function renderCollapsedToolResult(body: string, collapsedHint = ""): string {
-	return `  ⎿ ${body}${collapsedHint}`;
+	return `\n    ⎿ ${body}${collapsedHint}`;
 }
 
 function renderExpandedToolResult(
@@ -958,37 +958,38 @@ async function showCcstylePanel(ctx: any, compactStyle: CompactStyleHooks): Prom
 		return;
 	}
 
-	await ctx.ui.custom((tui: any, theme: any, _keybindings: any, done: (value?: void) => void) => {
+	const modes: Array<{ value: CompactStyleMode; label: string; description: string }> = [
+		{ value: "on", label: "on", description: "Claude Code style" },
+		{ value: "off", label: "off", description: "Pi native output" },
+		{ value: "compact", label: "compact", description: "Compact transcript" },
+	];
+	const selectedMode = await (ctx.ui.custom((tui: any, theme: any, _keybindings: any, done: (value?: CompactStyleMode) => void) => {
 		const container = new Container();
-		container.addChild(new Text(theme.fg("accent", theme.bold("Claude Code Style")), 1, 1));
-		const settingsList = new SettingsList(
-			[{
-				id: "mode",
-				label: "Output style",
-				description: "Claude Code, Pi native, or compact transcript rendering",
-				currentValue: config.mode,
-				values: ["on", "off", "compact"],
-			}],
-			3,
-			getSettingsListTheme(),
-			(id: string, newValue: string) => {
-				if (id !== "mode" || (newValue !== "on" && newValue !== "off" && newValue !== "compact")) return;
-				applyStyleMode(newValue, ctx, compactStyle);
-				settingsList.updateValue(id, newValue);
-				tui.requestRender();
-			},
-			() => done(),
-		);
-		container.addChild(settingsList);
+		container.addChild(new DynamicBorder((text: string) => theme.fg("accent", text)));
+		container.addChild(new Text(theme.fg("accent", theme.bold("Claude Code Style")), 1, 0));
+		const selectList = new SelectList(modes, modes.length, {
+			selectedPrefix: (text: string) => theme.fg("accent", text),
+			selectedText: (text: string) => theme.fg("accent", text),
+			description: (text: string) => theme.fg("muted", text),
+			scrollInfo: (text: string) => theme.fg("dim", text),
+			noMatch: (text: string) => theme.fg("warning", text),
+		});
+		selectList.setSelectedIndex(modes.findIndex((item) => item.value === config.mode));
+		selectList.onSelect = (item: { value: string }) => done(item.value as CompactStyleMode);
+		selectList.onCancel = () => done();
+		container.addChild(selectList);
+		container.addChild(new Text(theme.fg("dim", "↑↓ navigate · enter select · esc cancel"), 1, 0));
+		container.addChild(new DynamicBorder((text: string) => theme.fg("accent", text)));
 		return {
 			render: (width: number) => container.render(width),
 			invalidate: () => container.invalidate(),
 			handleInput(data: string) {
-				settingsList.handleInput?.(data);
+				selectList.handleInput(data);
 				tui.requestRender();
 			},
 		};
-	});
+	}) as Promise<CompactStyleMode | undefined>);
+	if (selectedMode) applyStyleMode(selectedMode, ctx, compactStyle);
 }
 
 function renderDefault(tool: any, slot: "renderCall" | "renderResult", args: any[], fallback = "") {
@@ -1171,7 +1172,7 @@ function shouldUseSelfShell(component: any, patch: GlobalToolRenderPatch): boole
 	const definition = component.toolDefinition ?? component.builtInToolDefinition;
 	const toolName = String(component.toolName || definition?.name || "");
 	const useSelfShell =
-		patch.enabled() &&
+		patch.mode() !== "off" &&
 		SUBAGENT_TOOL_NAMES.has(toolName) &&
 		definition != null &&
 		definition.renderShell === undefined;

package/extensions/compact-style.ts

@@ -104,7 +104,6 @@ type RuntimeState = {
 	hiddenToolIds: Set<string>;
 	runningToolIds: Set<string>;
 	agentActive: boolean;
-	blinkOn: boolean;
 	blinkTimer?: ReturnType<typeof setInterval>;
 	runStats: RunStats;
 	toolComponents: Set<any>;
@@ -123,8 +122,11 @@ const MIN_PREVIEW_WIDTH = 20;
 const MAX_PREVIEW_WIDTH = 104;
 // Leave room for pi's row gutter/padding so compact lines never wrap.
 const PREVIEW_MARGIN = 6;
-const BLINK_INTERVAL_MS = 400;
-// Status marker is two cells wide ("◆ ").
+// Keep the running marker in sync with Claude mode's braille loader.
+const BLINK_INTERVAL_MS = 80;
+const CLAUDE_LOADING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const CLAUDE_LOADING_TOOLS = new Set(["read", "bash", "edit", "write", "find", "grep", "ls"]);
+// Status marker is two cells wide ("✓ ", "✗ ", or the Claude-style running frame).
 const MARKER_WIDTH = 2;
 const STATE_KEY = Symbol.for("pi.ccstyle.compact-style.state");
 const TOOL_PATCH_KEY = Symbol.for("pi.ccstyle.compact-style.tool-patch");
@@ -153,7 +155,6 @@ function getState(): RuntimeState {
 		hiddenToolIds: new Set(),
 		runningToolIds: new Set(),
 		agentActive: false,
-		blinkOn: true,
 		runStats: newRunStats(),
 		toolComponents: new Set(),
 		assistantComponents: new Set(),
@@ -378,7 +379,6 @@ function ensureBlinkTimer() {
 			stopBlinkTimer();
 			return;
 		}
-		state.blinkOn = !state.blinkOn;
 		for (const id of state.runningToolIds) state.toolsById.get(id)?.invalidate?.();
 	}, BLINK_INTERVAL_MS);
 	state.blinkTimer.unref?.();
@@ -387,14 +387,21 @@ function ensureBlinkTimer() {
 function stopBlinkTimer() {
 	if (state.blinkTimer) clearInterval(state.blinkTimer);
 	state.blinkTimer = undefined;
-	state.blinkOn = true;
 }
 
-function statusMarker(theme: Theme, opts: { running?: boolean; isError?: boolean; hasResult?: boolean }): string {
-	if (opts.isError) return theme.fg("error", "◆ ");
-	if (opts.running) return theme.fg("dim", state.blinkOn ? "◆ " : "◇ ");
-	if (opts.hasResult) return theme.fg("success", "◆ ");
-	return theme.fg("dim", "◆ ");
+function statusMarker(
+	theme: Theme,
+	name: string,
+	opts: { running?: boolean; isError?: boolean; hasResult?: boolean },
+): string {
+	if (opts.isError) return theme.fg("error", "✗ ");
+	if (opts.running) {
+		if (!CLAUDE_LOADING_TOOLS.has(name)) return theme.fg("accent", "● ");
+		const frame = CLAUDE_LOADING_FRAMES[Math.floor(Date.now() / BLINK_INTERVAL_MS) % CLAUDE_LOADING_FRAMES.length] ?? "⠋";
+		return theme.fg("accent", `${frame} `);
+	}
+	if (opts.hasResult) return theme.fg("success", "✓ ");
+	return theme.fg("dim", "● ");
 }
 
 function textSignalHasVisibleContent(assistantMessageEvent: any): boolean {
@@ -611,7 +618,7 @@ function compactToolLine(
 	const inner = [info.result ? oneLine(info.result) : "", durationText].filter(Boolean).join(" · ");
 	const status = inner ? ` {${inner}}` : info.running ? " {running}" : "";
 	const details = `${info.preview}${status}`;
-	const marker = statusMarker(theme, {
+	const marker = statusMarker(theme, name, {
 		running: info.running,
 		isError: info.isError,
 		hasResult: result != null || !!info.result,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-cc-extensions",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "A Pi productivity suite with Claude Code-style UI, context inspection, and agent/session references",
   "type": "module",
   "keywords": [
@@ -27,9 +27,10 @@
       "./extensions/claude-code-style.ts",
       "./extensions/context.ts",
       "./extensions/session-reference.ts",
-      "./extensions/agent-autocomplete.ts"
+      "./extensions/agent-autocomplete.ts",
+      "./extensions/compact-style.ts"
     ],
-    "image": "https://raw.githubusercontent.com/minuque/pi-cc-extensions/main/assets/readme/fixed-editor-navigation.webp"
+    "image": "https://raw.githubusercontent.com/minuque/pi-cc-extensions/main/assets/readme/welcome.webp"
   },
   "scripts": {
     "test": "node --test tests/**/*.test.ts",