pi-one-ui 0.3.1 → 0.5.0

package/extensions/layouts/footer/footer.ts

@@ -22,7 +22,7 @@ import {
   formatUsernameHostLabel,
 } from "../../shared/format.ts";
 import { resolveRuntimeSymbol } from "../../shared/icons.ts";
-import { renderStyleForSource } from "../../shared/style.ts";
+import { renderSourceColor, renderStyleForSource } from "../../shared/style.ts";
 import { sanitizeEditorMetadataText } from "../editor/editor-metadata-format.ts";
 import {
   collectExtensionStatusSegments,
@@ -322,10 +322,12 @@ export function installFooter(
           separatorText[config.components.footer.styles.starship.separator],
         );
         const innerWidth = Math.max(1, width - 2);
-        const cwdLabel = renderStyleForSource(
+        const cwdLabel = renderSourceColor(
           theme,
           colorSource,
           config.colors.cwd,
+          "cwd",
+          "bold cyan",
           formattedCwd,
         );
         const needsSessionName =
@@ -932,10 +934,12 @@ export function installFooter(
 
         const chunkBudget = compactChunkBudget(innerWidth);
         const compactCwdLabel = truncateToWidth(
-          renderStyleForSource(
+          renderSourceColor(
             theme,
             colorSource,
             config.colors.cwd,
+            "cwd",
+            "bold cyan",
             sanitizeEditorMetadataText(
               formatCwdLabel(ctx.cwd, config.icons.cwd, {
                 mode: "basename",

package/extensions/layouts/working-line/interaction-summary.ts

@@ -10,6 +10,7 @@ import { isSafeSgrStylePrefix } from "../../shared/style.ts";
 import { renderWorkingLineHigh } from "./working-line.ts";
 
 export const TURN_SUMMARY_ENTRY_TYPE = "zentui-turn-summary";
+export const MIN_OUTPUT_RATE_WINDOW_MS = 500;
 const TURN_SUMMARY_VERSION = 3;
 const SGR_RESET = "\x1b[0m";
 
@@ -18,6 +19,7 @@ export type LiveTokenDisplay = Readonly<{
   input: number;
   output: number;
   outputApproximate: boolean;
+  outputTokensPerSecond?: number;
 }>;
 export type ThoughtSnapshot = Readonly<{ durationMs: number; active: boolean }>;
 
@@ -70,6 +72,8 @@ type ResponseState = {
   outputAnchor: number;
   outputAnchorCodePoints: number;
   liveOutputFloor: number;
+  startedAt: number;
+  outputTokensPerSecond?: number;
   lastDisplay?: LiveTokenDisplay;
   estimateIncomplete: boolean;
   estimateEnabled: boolean;
@@ -515,7 +519,7 @@ export class InteractionMetricsTracker {
       this.commitSnapshot(run, run.response);
       this.closeResponse(run, run.response, now);
     }
-    this.openResponse(run);
+    this.openResponse(run, now);
   }
 
   messageUpdate(
@@ -549,7 +553,7 @@ export class InteractionMetricsTracker {
         contentChanged = this.applyContentEvent(response, validated);
     }
     const usageChanged = tokens ? this.applyLiveUsage(response, tokens) : false;
-    const display = this.liveDisplay(response);
+    const display = this.liveDisplay(response, now);
     const displayChanged = !this.sameDisplay(response.lastDisplay, display);
     response.lastDisplay = display;
     return {
@@ -570,20 +574,31 @@ export class InteractionMetricsTracker {
     if (response.responseIdKey && key && response.responseIdKey !== key)
       return { status: "rejected" };
     if (!response.responseIdKey && key) response.responseIdKey = key;
-    const preCloseDisplay = this.liveDisplay(response);
     let source: "final" | "last-snapshot" | "no-snapshot";
     if (tokens) {
       response.snapshot = tokens;
       response.hasSnapshot = true;
+      this.updateOutputRate(response, tokens.output, now);
       source = "final";
     } else source = response.hasSnapshot ? "last-snapshot" : "no-snapshot";
+    const preCloseDisplay = this.liveDisplay(
+      response,
+      tokens ? undefined : now,
+    );
     this.commitSnapshot(run, response);
     const committed = this.totalTokens();
     const preserveEstimate =
       source !== "final" && response.lastDisplay?.outputApproximate === true;
+    const outputRate = preCloseDisplay.outputTokensPerSecond;
     const displayTokens = preserveEstimate
       ? { ...preCloseDisplay, outputApproximate: true }
-      : { ...committed, outputApproximate: false };
+      : {
+          ...committed,
+          outputApproximate: false,
+          ...(outputRate === undefined
+            ? {}
+            : { outputTokensPerSecond: outputRate }),
+        };
     run.lastClosedDisplay = preserveEstimate ? displayTokens : undefined;
     this.closeResponse(run, response, now);
     return { status: "accepted", tokens: committed, displayTokens, source };
@@ -770,7 +785,11 @@ export class InteractionMetricsTracker {
     );
   }
 
-  private openResponse(run: RunState, key?: string): ResponseState {
+  private openResponse(
+    run: RunState,
+    now: number,
+    key?: string,
+  ): ResponseState {
     run.responseOrdinal = safeAdd(run.responseOrdinal, 1);
     run.lastClosedDisplay = undefined;
     const estimateEnabled =
@@ -787,6 +806,7 @@ export class InteractionMetricsTracker {
       outputAnchor: 0,
       outputAnchorCodePoints: 0,
       liveOutputFloor: 0,
+      startedAt: safeTime(now),
       estimateIncomplete: !estimateEnabled,
       estimateEnabled,
     };
@@ -996,7 +1016,7 @@ export class InteractionMetricsTracker {
     return true;
   }
 
-  private liveDisplay(response: ResponseState): LiveTokenDisplay {
+  private liveDisplay(response: ResponseState, now?: number): LiveTokenDisplay {
     const committed = this.committedTokens();
     const postAnchorCodePoints = Math.max(
       0,
@@ -1013,6 +1033,8 @@ export class InteractionMetricsTracker {
       responseOutput === response.outputAnchor &&
       !response.estimateIncomplete;
     response.liveOutputFloor = responseOutput;
+    if (now !== undefined) this.updateOutputRate(response, responseOutput, now);
+    const outputRate = response.outputTokensPerSecond;
     return {
       input: safeAdd(
         committed.input,
@@ -1020,9 +1042,26 @@ export class InteractionMetricsTracker {
       ),
       output: safeAdd(committed.output, responseOutput),
       outputApproximate: !exactCoverage,
+      ...(outputRate === undefined
+        ? {}
+        : { outputTokensPerSecond: outputRate }),
     };
   }
 
+  private updateOutputRate(
+    response: ResponseState,
+    responseOutput: number,
+    now: number,
+  ): void {
+    const elapsedMs = durationMs(response.startedAt, now);
+    const rate =
+      elapsedMs >= MIN_OUTPUT_RATE_WINDOW_MS && responseOutput > 0
+        ? Math.min(Number.MAX_SAFE_INTEGER, (responseOutput * 1000) / elapsedMs)
+        : undefined;
+    response.outputTokensPerSecond =
+      rate !== undefined && rate >= 0.1 ? rate : undefined;
+  }
+
   private runTokens(run: RunState): InteractionTokens {
     return run.response?.hasSnapshot
       ? addTokens(run.committed, run.response.snapshot)
@@ -1104,7 +1143,8 @@ export class InteractionMetricsTracker {
     return (
       left?.input === right?.input &&
       left?.output === right?.output &&
-      left?.outputApproximate === right?.outputApproximate
+      left?.outputApproximate === right?.outputApproximate &&
+      left?.outputTokensPerSecond === right?.outputTokensPerSecond
     );
   }
 }

package/extensions/layouts/working-line/working-line.ts

@@ -550,7 +550,12 @@ export type WorkingLineRuntimeSegments = {
   tool?: string;
   elapsedMs?: number;
   thought?: { durationMs: number; active: boolean };
-  tokens?: { input: number; output: number; outputApproximate?: boolean };
+  tokens?: {
+    input: number;
+    output: number;
+    outputApproximate?: boolean;
+    outputTokensPerSecond?: number;
+  };
 };
 
 export type WorkingLineFrameState = {
@@ -617,11 +622,18 @@ export function formatWorkingLineTokens(
     tokens.input < 0 ||
     tokens.output < 0 ||
     (tokens.outputApproximate !== undefined &&
-      typeof tokens.outputApproximate !== "boolean")
+      typeof tokens.outputApproximate !== "boolean") ||
+    (tokens.outputTokensPerSecond !== undefined &&
+      (!Number.isFinite(tokens.outputTokensPerSecond) ||
+        tokens.outputTokensPerSecond < 0))
   ) {
     return undefined;
   }
-  return `↑${formatCount(tokens.input)} ↓${formatCount(tokens.output)}`;
+  const outputRate =
+    tokens.outputTokensPerSecond && tokens.outputTokensPerSecond > 0
+      ? ` ⚡${formatCount(Math.round(tokens.outputTokensPerSecond * 10) / 10)} tok/s`
+      : "";
+  return `↑${formatCount(tokens.input)} ↓${formatCount(tokens.output)}${outputRate}`;
 }
 
 function truncateWithEllipsis(value: string, capacity: number): string {
@@ -1174,6 +1186,15 @@ export class WorkingLineController {
   startTurn(ctx: WorkingLineContext): WorkingLineReconcileResult {
     const config = this.getConfig().components.workingLine;
     this.activeTools.clear();
+    if (this.tokens?.outputTokensPerSecond !== undefined) {
+      this.tokens = {
+        input: this.tokens.input,
+        output: this.tokens.output,
+        ...(this.tokens.outputApproximate === undefined
+          ? {}
+          : { outputApproximate: this.tokens.outputApproximate }),
+      };
+    }
     const selectedMessage = selectWorkingLineMessage(config, this.random);
     if (!config.enabled) {
       this.selectedMessage = selectedMessage;

package/extensions/shared/icons.ts

@@ -23,7 +23,6 @@ export type IconGlyphs = {
   deleted: string;
   typechanged: string;
   cacheHit: string;
-  editorPrompt: string;
   rail: string;
   username: string;
   time: string;
@@ -48,7 +47,6 @@ export const ICON_GLYPH_KEYS = [
   "deleted",
   "typechanged",
   "cacheHit",
-  "editorPrompt",
   "rail",
   "username",
   "time",
@@ -79,7 +77,6 @@ export const NERD_DEFAULT_ICONS: IconGlyphs = {
   deleted: "✘",
   typechanged: "T",
   cacheHit: "󰆼",
-  editorPrompt: "",
   rail: "│",
   username: "",
   time: "",
@@ -103,7 +100,6 @@ export const ASCII_DEFAULT_ICONS: IconGlyphs = {
   deleted: "x",
   typechanged: "T",
   cacheHit: "c",
-  editorPrompt: "",
   rail: "|",
   username: "@",
   time: "t",

package/extensions/shared/style.ts

@@ -427,6 +427,54 @@ export function renderStyleForSourceOrFallback(
   return renderStyleForSource(theme, source, style ?? fallbackStyle, text);
 }
 
+/**
+ * 主题画板存在性探测：pi Theme 暴露 fgColors Map；测试或其他实现可
+ * 提供 hasThemeToken 回调，缺失时保守按“无该 token”处理。
+ */
+function themeHasToken(theme: ThemeLike, token: string): boolean {
+  if (
+    typeof (theme as { hasThemeToken?: (t: string) => boolean })
+      .hasThemeToken === "function"
+  ) {
+    return (
+      theme as unknown as { hasThemeToken(t: string): boolean }
+    ).hasThemeToken(token);
+  }
+  const fgColors = (theme as unknown as { fgColors?: Map<string, string> })
+    .fgColors;
+  return fgColors instanceof Map && fgColors.has(token);
+}
+
+/**
+ * 颜色统一渲染入口（配置优先，其次主题 token，最后原生默认）：
+ * - 配置了 spec：按 colorSource 现有语义解释（theme=token/hex，terminal=终端色）；
+ * - 未配置且 theme 源：主题定义了 themeToken 时用主题色（可指向 vars 变量），
+ *   否则回落原生默认 themeDefault；
+ * - 未配置且 terminal 源：使用固定终端默认 terminalDefault。
+ */
+export function renderSourceColor(
+  theme: ThemeLike,
+  source: ColorSource,
+  spec: ColorSpec | undefined,
+  themeToken: string,
+  themeDefault: ColorSpec,
+  text: string,
+): string {
+  if (typeof spec === "string" && spec.trim() !== "") {
+    return renderStyleForSource(theme, source, spec, text);
+  }
+  // 未配置时:theme 源优先主题专有 token,terminal 源与主题缺 token 时
+  // 都回落 Pi 原生默认(主题语义色),保证两种 colorSource 默认观感一致。
+  if (source !== "terminal" && themeHasToken(theme, themeToken)) {
+    try {
+      return theme.fg(themeToken, text);
+    } catch {
+      // 主题色解析失败时继续回退原生默认。
+    }
+  }
+  return renderThemeStyle(theme, themeDefault, text);
+}
+
 export function renderStyleForSourceOrFallbackStrict(
   theme: ThemeLike,
   source: ColorSource,

package/extensions/tools/patch-keys.ts

@@ -52,6 +52,11 @@ export const TOOL_EXPANDED_BACKGROUND_PATCH = Symbol.for(
   "pi.ccstyle.tool-expanded-background-patch",
 );
 
+// ── 工具 updateDisplay 跨 toggle 重建缓存 ──
+export const TOGGLE_RENDER_CACHE_PATCH = Symbol.for(
+  "pi.ccstyle.toggle-render-cache-patch",
+);
+
 // ── 消息组件补丁 ──
 export const MESSAGE_DISPLAY_PATCH = Symbol.for(
   "pi.ccstyle.message-display-patch",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-one-ui",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "A single, customizable Pi UI package with layout-oriented Context and Shell rendering for Pi.",
   "type": "module",
   "license": "MIT",
@@ -58,8 +58,7 @@
     "themes": [
       "./themes/cc-dark.json",
       "./themes/cc-light.json"
-    ],
-    "image": "https://raw.githubusercontent.com/minuque/pi-cc-extensions/main/assets/readme/preview.png"
+    ]
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.5",

package/themes/cc-dark.json

@@ -81,7 +81,10 @@
 		"thinkingHigh": "accentBright",
 		"thinkingXhigh": "#4db9cd",
 		"thinkingMax": "cyan",
-		"bashMode": "green"
+		"bashMode": "green",
+		"cwd": "blue",
+		"editorModel": "blue",
+		"editorBorder": "blue"
 	},
 	"export": {
 		"pageBg": "bg",

package/themes/cc-light.json

@@ -81,7 +81,10 @@
 		"thinkingHigh": "accentBright",
 		"thinkingXhigh": "#4a8fa3",
 		"thinkingMax": "cyan",
-		"bashMode": "green"
+		"bashMode": "green",
+		"cwd": "blue",
+		"editorModel": "blue",
+		"editorBorder": "blue"
 	},
 	"export": {
 		"pageBg": "bg",

package/extensions/layouts/editor/accent-rail-editor.ts

@@ -1,112 +0,0 @@
-import type { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import type { ZentuiConfig } from "../../app/config/shell.ts";
-import {
-  renderStyleForSourceOrFallback,
-  type SourceStyleFallback,
-} from "../../shared/style.ts";
-import {
-  applyOwnedLayoutBackground,
-  fillTerminalLine,
-  renderCompletionRows,
-} from "./completion-menu.ts";
-import { sanitizeEditorMetadataText } from "./editor-metadata-format.ts";
-
-export const ACCENT_RAIL_CHROME_WIDTH = 2;
-
-const ACCENT_RAIL_FALLBACK: SourceStyleFallback = {
-  theme: "syntaxNumber",
-  terminal: "fg:215",
-};
-
-export type AccentRailViewport = {
-  above?: string;
-  below?: string;
-};
-
-export type AccentRailEditorFrameOptions = {
-  width: number;
-  editorLines: string[];
-  autocompleteLines?: string[];
-  viewport?: AccentRailViewport;
-  uiTheme: Theme;
-  config: ZentuiConfig;
-};
-
-function clampLines(lines: string[], width: number): string[] {
-  const maxWidth = Math.max(0, width);
-  return lines.map((line) => truncateToWidth(line, maxWidth, ""));
-}
-
-function selectedRail(config: ZentuiConfig): string {
-  const style = config.components.editor.styles["accent-rail"];
-  const fallback = config.icons.mode === "ascii" ? "|" : "▎";
-  const configured =
-    config.icons.mode === "ascii" ? style.asciiRail : style.rail;
-  const sanitized = sanitizeEditorMetadataText(configured);
-  const glyph = truncateToWidth(sanitized, 1, "");
-  return visibleWidth(glyph) === 1 ? glyph : fallback;
-}
-
-function viewportLabel(
-  direction: "above" | "below",
-  count: string | undefined,
-): string | undefined {
-  if (!count || !/^[1-9]\d*$/.test(count)) return undefined;
-  return `${direction === "above" ? "↑" : "↓"} ${count} more`;
-}
-
-/** Pure compact accent-rail composition shared by live rendering and settings previews. */
-export function renderAccentRailEditorFrame({
-  width,
-  editorLines,
-  autocompleteLines = [],
-  viewport = {},
-  uiTheme,
-  config,
-}: AccentRailEditorFrameOptions): string[] {
-  if (width < ACCENT_RAIL_CHROME_WIDTH + 1) {
-    return clampLines([...editorLines, ...autocompleteLines], width);
-  }
-
-  const contentWidth = width - ACCENT_RAIL_CHROME_WIDTH;
-  const rail = renderStyleForSourceOrFallback(
-    uiTheme,
-    config.components.editor.colorSource,
-    config.colors.editorRail,
-    ACCENT_RAIL_FALLBACK,
-    selectedRail(config),
-  );
-  const above = config.components.editor.viewportIndicators
-    ? viewportLabel("above", viewport.above)
-    : undefined;
-  const below = config.components.editor.viewportIndicators
-    ? viewportLabel("below", viewport.below)
-    : undefined;
-  const rows = [
-    ...(above ? [above] : []),
-    ...editorLines,
-    ...(below ? [below] : []),
-  ];
-  const transparent =
-    config.components.editor.styles["accent-rail"].transparent;
-  const layout = rows.map((line) => {
-    const railCell = transparent
-      ? rail
-      : applyOwnedLayoutBackground(uiTheme, rail);
-    const bodyText = ` ${fillTerminalLine(line, contentWidth)}`;
-    const body = transparent
-      ? bodyText
-      : applyOwnedLayoutBackground(uiTheme, bodyText);
-    return `${railCell}${body}`;
-  });
-  const autocompleteLayout = renderCompletionRows({
-    lines: autocompleteLines,
-    width,
-    theme: uiTheme,
-    selectedPrefix: `${rail} `,
-    ownedBackground: !transparent,
-  });
-
-  return clampLines([...layout, ...autocompleteLayout], width);
-}