pi-pretty-tui 0.2.3 → 0.2.4

package/README.md

@@ -7,6 +7,7 @@ A beautiful, polished TUI for the [Pi coding agent](https://pi.dev/).
 ## Features
 
 - **Collapsible activity timeline:** instead of filling the conversation with individual calls, thoughts, tools, and ordinary `info` notifications share one chronological activity stream. Work appears beneath a single `Running(...)` row and settles into a quiet `Done(...)` row. Parent rows count only tool calls and thoughts; expanding one reveals every ordered member with summaries retained above nested details. Thoughts and tools are peers: a turn that calls no tool still gets its own `Running(1 thought)` / `Done(1 thought)` parent row with the Thought as its child, so thinking is never dropped.
+- **Live working duration:** in clean mode, elapsed time appears beside `Working` in the prompt editor's top border, using the border's own color. It shares the agent-run clock and duration format with the completion footer, includes automatic retries, and disappears when the run settles. Narrow editors omit the timer when it cannot fit. Expanded `Done` titles and markers use the theme's `success` color; collapsed summaries remain quiet gray.
 - **Transient UI status:** one line above the editor shows direct Pi UI feedback such as Thinking/tool-output visibility changes. A newer UI status replaces it, and it disappears automatically after ten seconds without entering the transcript or session.
 - **Durable response footers:** once the complete agent run settles—including tools, retries, and compaction—the final answer ends with one quiet gray divider containing the elapsed-work time and, in fullscreen, a `[Copy]` control. It copies only the final visible answer, excluding thoughts, tools, statuses, and the footer itself; the footer survives reloads and session-tree navigation.
 - **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.

package/README.zh-CN.md

@@ -8,6 +8,7 @@
 
 - **可折叠的活动时间线：** 不再让大量独立调用填满对话。思考、工具和普通 `info` 通知会进入同一条按真实时间排序的活动流；工作进行时显示为 `Running(...)`，结束后变为低调的 `Done(...)`。父级只统计工具调用和思考数量；展开后可查看所有有序成员，成员摘要在展开嵌套详情后仍然保留。思考与工具地位相同：没有调用任何工具的那一轮同样会有自己的 `Running(1 thought)` / `Done(1 thought)` 父行，思考作为其子级，内容不会被丢弃。
 - **可持久化的回答 footer：** 整轮 Agent 工作真正 settled 后（包括工具、自动重试和 compaction），最终回答底部会显示一条低调的灰色分隔线，工作时长与 fullscreen 模式下的 `[Copy]` 控件都嵌在线中。`[Copy]` 只复制最终可见回答，不包含 thought、工具、状态或 footer；reload 和 session tree 切换后仍会保留。
+- **实时工作计时：** clean 模式下，耗时显示在输入框顶部边框的 `Working` 右侧，颜色与边框一致。它与完成 footer 共用 Agent 整轮工作的计时起点和时长格式，包含自动重试，工作真正结束后消失；窄输入框放不下时会隐藏计时。展开后的 `Done` 标题和圆点使用主题的 `success` 色，折叠摘要仍保持低调的灰色。
 - **临时 UI 状态：** 编辑器上方的一行只显示 Pi 直接产生的 UI 操作反馈，例如 Thinking 或工具输出可见性变化。新状态会替换旧状态，并在十秒后自动消失，不进入 transcript 或 session。
 - **按需查看有效信息：** 针对不同工具设计的摘要，会简洁呈现路径、命令、结果、diff、文件预览和实时 shell 输出，同时保留查看原始完整内容的能力。
 - **统一、精致的视觉体验：** 透明、右对齐的用户聊天气泡会根据短消息自适应宽度，长消息则在终端宽度的 75% 处换行；气泡使用 accent 浅蓝色圆角边框，并移除了多余的 `User` 标注。配合圆角输入框、主题感知配色、层级清晰的 Markdown 标题、更清爽的列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。

package/extensions/index.ts

@@ -192,6 +192,16 @@ export default function prettyTui(pi: ExtensionAPI) {
   };
   const responseAnswerTexts = new Map<string, string>();
   let responseRunStartedAt: number | undefined;
+  let workingElapsedTimer: ReturnType<typeof setInterval> | undefined;
+  const stopWorkingElapsedTimer = () => {
+    if (workingElapsedTimer) clearInterval(workingElapsedTimer);
+    workingElapsedTimer = undefined;
+  };
+  const startWorkingElapsedTimer = () => {
+    if (workingElapsedTimer) return;
+    workingElapsedTimer = setInterval(() => currentTui?.requestRender?.(), 1000);
+    workingElapsedTimer.unref?.();
+  };
   let responseHasAssistantMessage = false;
   const assistantAnswerText = (message: any): string => {
     if (typeof message?.content === "string") return message.content.trim();
@@ -203,7 +213,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       .trim();
   };
   const formatResponseDuration = (durationMs: number): string => {
-    const totalSeconds = Math.max(1, Math.round(Math.max(0, durationMs) / 1000));
+    const totalSeconds = Math.floor(Math.max(0, durationMs) / 1000);
     if (totalSeconds < 60) return `${totalSeconds}s`;
     const totalMinutes = Math.floor(totalSeconds / 60);
     const seconds = totalSeconds % 60;
@@ -663,8 +673,13 @@ export default function prettyTui(pi: ExtensionAPI) {
       collapsedActivityGroups.clear();
       expandedThinkingMembers.clear();
       renderMode = requested;
-      if (renderMode === "clean") refreshLatestActivityWidget();
-      else clearLatestActivityStatus();
+      if (renderMode === "clean") {
+        if (cleanRun.active && !cleanRun.settled) startWorkingElapsedTimer();
+        refreshLatestActivityWidget();
+      } else {
+        stopWorkingElapsedTimer();
+        clearLatestActivityStatus();
+      }
       for (const component of cleanToolComponents.values()) component.updateDisplay?.();
       for (const component of thinkingComponents.values()) component.invalidate?.();
       try {
@@ -680,6 +695,7 @@ export default function prettyTui(pi: ExtensionAPI) {
   // Keep the settings command available while disabled, but do not install
   // render patches or override built-in tools until the next enabled reload.
   if (!activeForSession) return;
+  pi.on("session_shutdown", stopWorkingElapsedTimer);
 
   // Give Pi's main prompt editor a complete rounded frame. Render the native
   // editor at a two-column narrower width so cursor layout, wrapping, IME, and
@@ -690,7 +706,30 @@ export default function prettyTui(pi: ExtensionAPI) {
     const hadOwnRender = Object.prototype.hasOwnProperty.call(customEditorPrototype, "render");
     const hadOwnHandleMouse = Object.prototype.hasOwnProperty.call(customEditorPrototype, "handleMouse");
     const originalEditorRender = customEditorPrototype.render;
+    const originalEditorTopBorder = customEditorPrototype.renderTopBorder;
     const originalEditorHandleMouse = customEditorPrototype.handleMouse;
+    const patchedEditorTopBorder = function (this: any, width: number, hiddenLineCount: number): string {
+      if (this.tui) currentTui = this.tui;
+      const indicator = this.workingStatusIndicator;
+      if (renderMode !== "clean" || indicator?.kind !== "working" || responseRunStartedAt === undefined) {
+        return originalEditorTopBorder.call(this, width, hiddenLineCount);
+      }
+      const elapsed = formatResponseDuration(Date.now() - responseRunStartedAt);
+      const indicatorColor = (text: string) => this.borderColor(text);
+      const originalRenderInBorder = indicator.renderInBorder;
+      indicator.renderInBorder = function (availableWidth: number): string {
+        const status = originalRenderInBorder.call(this, availableWidth);
+        const suffix = ` ${elapsed}`;
+        return visibleWidth(status) + visibleWidth(suffix) <= availableWidth
+          ? status + indicatorColor(suffix)
+          : status;
+      };
+      try {
+        return originalEditorTopBorder.call(this, width, hiddenLineCount);
+      } finally {
+        indicator.renderInBorder = originalRenderInBorder;
+      }
+    };
     const patchedEditorRender = function (this: any, width: number): string[] {
       if (width < 3) return originalEditorRender.call(this, width);
 
@@ -724,11 +763,14 @@ export default function prettyTui(pi: ExtensionAPI) {
       hadOwnRender,
       hadOwnHandleMouse,
       originalRender: originalEditorRender,
+      originalTopBorder: originalEditorTopBorder,
       originalHandleMouse: originalEditorHandleMouse,
       patchedRender: patchedEditorRender,
+      patchedTopBorder: patchedEditorTopBorder,
       patchedHandleMouse: patchedEditorHandleMouse,
     };
     customEditorPrototype.render = patchedEditorRender;
+    customEditorPrototype.renderTopBorder = patchedEditorTopBorder;
     customEditorPrototype.handleMouse = patchedEditorHandleMouse;
 
     pi.on("session_shutdown", () => {
@@ -738,12 +780,16 @@ export default function prettyTui(pi: ExtensionAPI) {
         if (patch.hadOwnRender) customEditorPrototype.render = patch.originalRender;
         else delete customEditorPrototype.render;
       }
+      if (patch.patchedTopBorder === customEditorPrototype.renderTopBorder) {
+        customEditorPrototype.renderTopBorder = patch.originalTopBorder;
+      }
       if (patch.patchedHandleMouse === customEditorPrototype.handleMouse) {
         if (patch.hadOwnHandleMouse) customEditorPrototype.handleMouse = patch.originalHandleMouse;
         else delete customEditorPrototype.handleMouse;
       }
       if (
         customEditorPrototype.render === patch.originalRender &&
+        customEditorPrototype.renderTopBorder === patch.originalTopBorder &&
         customEditorPrototype.handleMouse === patch.originalHandleMouse
       ) {
         delete customEditorPrototype[editorFramePatchKey];
@@ -2798,7 +2844,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     prefix: () => {
       const currentActivity = typeof activity === "function" ? activity() : activity;
       const color = currentActivity === "done"
-        ? collapsedDone ? "thinkingText" : successMarkerColor(theme)
+        ? collapsedDone ? "thinkingText" : "success"
         : "accent";
       return theme.fg(color, "● ");
     },
@@ -2807,7 +2853,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       const currentActivity = typeof activity === "function" ? activity() : activity;
       const label = currentActivity === "done" ? "Done" : "Running";
       const color = label === "Done"
-        ? collapsedDone ? "thinkingText" : successMarkerColor(theme)
+        ? collapsedDone ? "thinkingText" : "success"
         : "accent";
       const detailColor = label === "Done" && collapsedDone ? "thinkingText" : "text";
       return theme.fg(color, theme.bold(label)) +
@@ -3095,6 +3141,7 @@ export default function prettyTui(pi: ExtensionAPI) {
         );
 
   const restoreCleanSession = (ctx: any) => {
+    stopWorkingElapsedTimer();
     currentExtensionUi = ctx.ui;
     clearLatestActivityStatus();
     cleanToolsExpanded = ctx.ui.getToolsExpanded();
@@ -3519,6 +3566,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
     cleanRun.activity = "thinking";
+    if (renderMode === "clean") startWorkingElapsedTimer();
   });
   pi.on("tool_execution_start", (event) => {
     activityTimeline.addTool(event.toolCallId, event.toolName);
@@ -3568,6 +3616,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.activity = "thinking";
   });
   pi.on("agent_settled", (_event, ctx) => {
+    stopWorkingElapsedTimer();
     if (cleanRun.settled) return;
 
     clearPendingToolActivities();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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.2.0/assets/screenshot.png"
+    "image": "https://raw.githubusercontent.com/ykn0309/pi-pretty-tui/main/assets/screenshot.png"
   }
 }