pi-pretty-tui 0.1.7 → 0.1.8

package/README.md

@@ -8,7 +8,7 @@ A beautiful, polished TUI for the [Pi coding agent](https://pi.dev/).
 
 - **Collapsible tool activity:** instead of filling the conversation with individual tool calls, supported tools are collected into a single `Running(...)` row while work is in progress and a quiet `Done(...)` row when it finishes. Click the group to reveal its compact child calls, click any child for full details, and click the parent again to collapse everything.
 - **Useful details on demand:** tool-aware summaries keep paths, commands, results, diffs, file previews, and live shell output concise without removing access to the original content.
-- **A cohesive visual finish:** rounded user messages and prompt input, theme-aware colors, cleaner Markdown lists, and rounded syntax-highlighted code blocks make the entire TUI feel intentional. In fullscreen, each fenced code block also includes a native-feeling `[Copy]` control.
+- **A cohesive visual finish:** rounded user messages and prompt input, theme-aware colors, a clear Markdown heading hierarchy, cleaner lists, and rounded syntax-highlighted code blocks make the entire TUI feel intentional. In fullscreen, each fenced code block also includes a native-feeling `[Copy]` control.
 
 Collapsible grouping covers Pi's built-in `read`, `bash`, `edit`, `write`, `grep`, `find`, and `ls` tools. Third-party tools keep their own rendering, and Pi's cursor, IME, autocomplete, mouse interaction, and tool execution behavior remain intact.
 

package/README.zh-CN.md

@@ -8,7 +8,7 @@
 
 - **可折叠的工具活动：** 不再让大量独立工具调用填满对话。工作进行时，受支持的工具会集中显示为一行 `Running(...)`；工作结束后，则变为低调的 `Done(...)`。点击分组可展开紧凑的子工具列表，点击任一子工具可查看完整详情，再次点击父级即可全部折叠。
 - **按需查看有效信息：** 针对不同工具设计的摘要，会简洁呈现路径、命令、结果、diff、文件预览和实时 shell 输出，同时保留查看原始完整内容的能力。
-- **统一、精致的视觉体验：** 圆角用户消息与输入框、主题感知配色、更清爽的 Markdown 列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。
+- **统一、精致的视觉体验：** 圆角用户消息与输入框、主题感知配色、层级清晰的 Markdown 标题、更清爽的列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。
 
 可折叠分组覆盖 Pi 内置的 `read`、`bash`、`edit`、`write`、`grep`、`find` 和 `ls` 工具。第三方工具保留自己的渲染方式，同时不会影响 Pi 原有的光标、输入法、自动补全、鼠标交互和工具执行行为。
 

package/extensions/index.ts

@@ -604,6 +604,96 @@ export default function prettyTui(pi: ExtensionAPI) {
       nextTokenType?: string,
       styleContext?: any,
     ): string[] {
+      if (token?.type === "heading") {
+        const level = Math.max(1, Math.min(6, Number(token.depth) || 1));
+        const maxWidth = Math.max(1, width);
+        const addHeadingSpacing = (lines: string[]) => {
+          if (nextTokenType && nextTokenType !== "space") lines.push("");
+          return lines;
+        };
+        const headingStyle = (text: string) => this.theme.heading(text);
+        const foregroundLuminance = (styled: string): number | undefined => {
+          const trueColor = /\x1b\[38;2;(\d+);(\d+);(\d+)m/.exec(styled);
+          if (!trueColor) return undefined;
+          const [, red, green, blue] = trueColor.map(Number);
+          return red * 0.2126 + green * 0.7152 + blue * 0.0722;
+        };
+        const defaultLuminance = foregroundLuminance(this.applyDefaultStyle("M"));
+        const headingLuminance = foregroundLuminance(headingStyle("M"));
+        const darkTheme =
+          defaultLuminance !== undefined
+            ? defaultLuminance >= 128
+            : (headingLuminance ?? 255) >= 160;
+        const whiteStyle = (text: string) => `\x1b[97m${text}\x1b[39m`;
+        const titleStyle =
+          level === 1 || level === 3
+            ? (text: string) => headingStyle(this.theme.bold(this.theme.underline(text)))
+            : level === 2
+              ? (text: string) =>
+                  (darkTheme ? whiteStyle : headingStyle)(
+                    this.theme.bold(this.theme.underline(text)),
+                  )
+              : level === 4
+                ? (text: string) => headingStyle(this.theme.bold(text))
+                : level === 5
+                  ? headingStyle
+                  : (text: string) => this.theme.quote(this.theme.italic(text));
+        const titleContext = {
+          applyText: titleStyle,
+          stylePrefix: this.getStylePrefix(titleStyle),
+        };
+        const title = this.renderInlineTokens(token.tokens || [], titleContext);
+
+        if (level === 1 && maxWidth >= 6) {
+          const maximumInnerWidth = maxWidth - 4;
+          const titleLines = wrapTextWithAnsi(title, Math.max(1, maximumInnerWidth));
+          const innerWidth = Math.max(
+            1,
+            ...titleLines.map((line: string) => visibleWidth(line)),
+          );
+          const frameWidth = Math.min(maxWidth, innerWidth + 4);
+          const frameStyle = (text: string) => headingStyle(this.theme.bold(text));
+          const lines = [
+            frameStyle(`╔${"═".repeat(frameWidth - 2)}╗`),
+            ...titleLines.map((line: string) => {
+              const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(line)));
+              return frameStyle("║ ") + line + frameStyle(`${padding} ║`);
+            }),
+            frameStyle(`╚${"═".repeat(frameWidth - 2)}╝`),
+          ];
+          return addHeadingSpacing(lines);
+        }
+
+        if (level === 2) {
+          // Reverse only the rendered title cells: the theme's heading color
+          // becomes a compact, content-width background label with no frame.
+          const lines = wrapTextWithAnsi(title, maxWidth).map((line: string) =>
+            darkTheme
+              ? `\x1b[48;5;94m${line}\x1b[49m`
+              : `\x1b[107m\x1b[7m${line}\x1b[27m\x1b[49m`
+          );
+          return addHeadingSpacing(lines);
+        }
+
+        if (level === 5 && maxWidth >= 8) {
+          const prefix = "┄┄ ";
+          const suffix = " ┄┄";
+          const contentWidth = Math.max(
+            1,
+            maxWidth - visibleWidth(prefix) - visibleWidth(suffix),
+          );
+          const wrapped = wrapTextWithAnsi(title, contentWidth);
+          const lines = wrapped.map((line: string, index: number) => {
+            const left = index === 0 ? this.theme.heading(prefix) : " ".repeat(visibleWidth(prefix));
+            const right = index === wrapped.length - 1 ? this.theme.heading(suffix) : "";
+            return left + line + right;
+          });
+          return addHeadingSpacing(lines);
+        }
+
+        return addHeadingSpacing(wrapTextWithAnsi(title, maxWidth));
+      }
+
       if (token?.type !== "code") {
         return originalRenderToken.call(this, token, width, nextTokenType, styleContext);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A beautiful, polished TUI for the Pi coding agent",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",
@@ -52,6 +52,6 @@
     "extensions": [
       "./extensions/index.ts"
     ],
-    "image": "https://unpkg.com/pi-pretty-tui@0.1.7/assets/screenshot.png"
+    "image": "https://unpkg.com/pi-pretty-tui@0.1.8/assets/screenshot.png"
   }
 }