pi-one-ui 0.3.0 → 0.4.0

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/services/project-refresh.ts

@@ -3,10 +3,10 @@ import { dirname, join, resolve } from "node:path";
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { SessionLifecycle } from "../app/runtime/session-lifecycle.ts";
 import { readGitStatus } from "./git-data.ts";
-import type { FooterState } from "./session-state.ts";
-import { applyProjectRefreshToState } from "./project-state.ts";
 import { readPackageVersionResult } from "./package-data.ts";
+import { applyProjectRefreshToState } from "./project-state.ts";
 import { readRuntimeInfo } from "./runtime-data.ts";
+import type { FooterState } from "./session-state.ts";
 
 export type StopProjectRefreshInterval = () => void;
 

package/extensions/services/session-state.ts

@@ -10,8 +10,8 @@ import {
   getUsageTotals,
   invalidateUsageTotalsCache,
 } from "../shared/format.ts";
-import { emptyGitStatus } from "./git-data.ts";
 import type { GitStatusSummary } from "./git-data.ts";
+import { emptyGitStatus } from "./git-data.ts";
 import type { PackageVersionResult } from "./package-data.ts";
 import type { RuntimeInfo } from "./runtime-data.ts";
 import type { FooterTelemetry } from "./telemetry.ts";

package/extensions/shared/format.ts

@@ -10,14 +10,14 @@ import type {
   PathDisplayMode,
 } from "../app/config/shell.ts";
 import type { GitCommitInfo, GitMetricsInfo } from "../services/git-data.ts";
+import type { PackageVersionResult } from "../services/package-data.ts";
+import type { RuntimeInfo } from "../services/runtime-data.ts";
 import type { IconMode } from "./icons.ts";
 import {
   resolveOsIcon,
   resolvePackageIcon,
   resolveRuntimeSymbol,
 } from "./icons.ts";
-import type { PackageVersionResult } from "../services/package-data.ts";
-import type { RuntimeInfo } from "../services/runtime-data.ts";
 import { renderStyleForSource } from "./style.ts";
 
 /**

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-one-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A single, customizable Pi UI package with layout-oriented Context and Shell rendering for Pi.",
   "type": "module",
   "license": "MIT",
@@ -28,17 +28,15 @@
     "LICENSE"
   ],
   "scripts": {
-    "typecheck": "tsc --noEmit",
-    "test": "npm run test:node && npm run test:vitest",
-    "test:node": "node --test tests/config.test.ts tests/config-store.test.ts tests/header-*.test.ts tests/one-ui-integration.test.ts tests/overlay-infrastructure.test.ts tests/runtime-infrastructure.test.ts tests/context-*.test.ts",
-    "format": "biome format --write extensions tests package.json tsconfig.json biome.json",
-    "format:check": "biome format extensions tests package.json tsconfig.json biome.json",
-    "lint": "biome check extensions/index.ts extensions/app/panel.ts extensions/app/presets.ts package.json tsconfig.json biome.json",
-    "test:vitest": "vitest run tests/shell-*.test.ts tests/working-line-*.test.ts tests/editor-*.test.ts tests/footer-*.test.ts tests/services-*.test.ts",
-    "verify": "npm run format:check && npm run lint && npm run typecheck && npm test",
+    "format": "biome format --write extensions tests package.json tsconfig.json vitest.config.ts biome.json",
+    "check": "biome check extensions tests package.json tsconfig.json vitest.config.ts biome.json",
+    "fix": "biome check --write extensions tests package.json tsconfig.json vitest.config.ts biome.json",
     "pack:check": "npm pack --dry-run",
     "pi:dev": "${PI_BIN:-pi} --no-extensions -e ./extensions/index.ts",
-    "pi:install-local": "${PI_BIN:-pi} install ./ -l"
+    "pi:install-local": "${PI_BIN:-pi} install ./ -l",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "verify": "npm run check && npm run typecheck && npm test"
   },
   "dependencies": {
     "@shikijs/cli": "^4.0.2",
@@ -60,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/extensions/features/legacy/working-message.ts

@@ -1,226 +0,0 @@
-import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { formatDuration } from "../../tools/format.ts";
-
-const REFRESH_INTERVAL_MS = 1_000;
-/** Elapsed time is only shown once the turn has run this long. */
-const SHOW_TIMER_AFTER_MS = 3_000;
-
-function formatCount(value: number): string {
-  return new Intl.NumberFormat("en-US").format(value);
-}
-
-type ContentBlock = {
-  type?: unknown;
-  text?: unknown;
-  thinkingSignature?: { body?: unknown };
-};
-
-type StreamMessage = {
-  content?: unknown;
-  usage?: { output?: unknown };
-};
-
-/** 每个 content index 的可见文本/思考长度；无对应块的 index 保持稀疏洞。 */
-function textBlockLengths(message: StreamMessage): number[] {
-  const content = message.content;
-  if (!Array.isArray(content)) return [];
-  const lengths: number[] = [];
-  for (let index = 0; index < content.length; index++) {
-    const block = content[index] as ContentBlock;
-    if (block?.type === "text" && typeof block.text === "string") {
-      lengths[index] = block.text.length;
-    } else if (block?.type === "thinking" && block.thinkingSignature?.body) {
-      lengths[index] = (block.thinkingSignature.body as string).length;
-    }
-  }
-  return lengths;
-}
-
-function outputUsage(message: StreamMessage): number {
-  const value = Number(message?.usage?.output);
-  return Number.isFinite(value) && value > 0 ? Math.round(value) : 0;
-}
-
-type WorkingUi = {
-  setWorkingMessage(message?: string): void;
-};
-
-/**
- * Extend Pi's footer working row while preserving its spinner and "Working...":
- * `⠋ Working... (↓ 1,234 tokens · 12s)`
- *
- * Live tokens use the same chars/4 estimate as pi-claude-code-ui, then switch to
- * provider `usage.output` whenever the stream exposes an actual count.
- */
-export default function (pi: ExtensionAPI): void {
-  let turnActive = false;
-  let agentStartTime = 0;
-  let turnStartTime = 0;
-  let responseLength = 0;
-  let responseTextBlockLengths: number[] = [];
-  let providerOutputTokens = 0;
-  let refreshTimer: ReturnType<typeof setTimeout> | null = null;
-  let lastMessage: string | null = null;
-  let activeCtx: { ui: WorkingUi | undefined; hasUI: boolean } | null = null;
-
-  function tokenCount(): number {
-    return providerOutputTokens || Math.max(0, Math.round(responseLength / 4));
-  }
-
-  function setTextBlockLength(index: number, length: number): void {
-    const previous = responseTextBlockLengths[index] ?? 0;
-    responseTextBlockLengths[index] = Math.max(0, length);
-    responseLength = Math.max(
-      0,
-      responseLength + responseTextBlockLengths[index] - previous,
-    );
-  }
-
-  function resetResponseTracking(message?: StreamMessage): void {
-    responseTextBlockLengths = message ? textBlockLengths(message) : [];
-    responseLength = responseTextBlockLengths.reduce(
-      (sum, length) => sum + length,
-      0,
-    );
-    providerOutputTokens = message ? outputUsage(message) : 0;
-  }
-
-  function updateProviderUsage(message: StreamMessage): void {
-    const output = outputUsage(message);
-    if (output > 0) providerOutputTokens = output;
-  }
-
-  function buildWorkingMessage(): string {
-    const elapsed = Date.now() - (agentStartTime || turnStartTime);
-    const tokens = tokenCount();
-    const parts: string[] = [];
-    if (tokens > 0) parts.push(`↓ ${formatCount(tokens)} tokens`);
-    if (elapsed >= SHOW_TIMER_AFTER_MS || tokens > 0) {
-      // formatDuration 低于 1 秒返回 ""，此处回退 "0s" 保持计时器连续跳动。
-      parts.push(formatDuration(elapsed) || "0s");
-    }
-    return parts.length ? `Working... (${parts.join(" · ")})` : "";
-  }
-
-  function restoreDefaultWorkingMessage(): void {
-    lastMessage = null;
-    if (!activeCtx?.hasUI) return;
-    try {
-      activeCtx.ui?.setWorkingMessage();
-    } catch {
-      // Noop when the TUI is unavailable.
-    }
-  }
-
-  function syncWorkingMessage(force = false): void {
-    if (!activeCtx?.hasUI) return;
-    const next = buildWorkingMessage();
-    if (!next) {
-      if (force) restoreDefaultWorkingMessage();
-      return;
-    }
-    if (!force && next === lastMessage) return;
-    lastMessage = next;
-    try {
-      activeCtx.ui?.setWorkingMessage(next);
-    } catch {
-      // Noop when the TUI is unavailable.
-    }
-  }
-
-  function scheduleRefreshTick(): void {
-    if (!turnActive || refreshTimer) return;
-    refreshTimer = setTimeout(() => {
-      refreshTimer = null;
-      try {
-        syncWorkingMessage();
-      } finally {
-        scheduleRefreshTick();
-      }
-    }, REFRESH_INTERVAL_MS);
-    refreshTimer.unref?.();
-  }
-
-  function stopRefreshLoop(): void {
-    if (!refreshTimer) return;
-    clearTimeout(refreshTimer);
-    refreshTimer = null;
-  }
-
-  function clearDisplay(): void {
-    stopRefreshLoop();
-    agentStartTime = 0;
-    turnStartTime = 0;
-    resetResponseTracking();
-    restoreDefaultWorkingMessage();
-  }
-
-  pi.on("before_agent_start", async () => {
-    if (!agentStartTime) agentStartTime = Date.now();
-  });
-
-  pi.on("turn_start", async (_event, ctx) => {
-    turnActive = true;
-    activeCtx = ctx;
-    turnStartTime = Date.now();
-    if (!agentStartTime) agentStartTime = turnStartTime;
-    resetResponseTracking();
-    syncWorkingMessage(true);
-    scheduleRefreshTick();
-  });
-
-  pi.on("message_update", async (event, ctx) => {
-    activeCtx = ctx;
-    const evt = event?.assistantMessageEvent;
-    if (!evt) return;
-
-    if (evt.type === "start") {
-      resetResponseTracking(evt.partial);
-    } else if (evt.type === "thinking_start" || evt.type === "text_start") {
-      setTextBlockLength(evt.contentIndex, 0);
-      updateProviderUsage(evt.partial);
-    } else if (evt.type === "thinking_delta" || evt.type === "text_delta") {
-      const add = typeof evt.delta === "string" ? evt.delta.length : 0;
-      setTextBlockLength(
-        evt.contentIndex,
-        (responseTextBlockLengths[evt.contentIndex] ?? 0) + add,
-      );
-      updateProviderUsage(evt.partial);
-    } else if (evt.type === "text_end") {
-      setTextBlockLength(
-        evt.contentIndex,
-        typeof evt.content === "string" ? evt.content.length : 0,
-      );
-      updateProviderUsage(evt.partial);
-    } else if (evt.type === "done") {
-      resetResponseTracking(evt.message);
-    } else if (evt.type === "error") {
-      resetResponseTracking(evt.error);
-    } else {
-      updateProviderUsage(evt.partial);
-    }
-
-    syncWorkingMessage();
-    scheduleRefreshTick();
-  });
-
-  pi.on("turn_end", async (_event, ctx) => {
-    turnActive = false;
-    activeCtx = ctx;
-    stopRefreshLoop();
-    resetResponseTracking();
-    // No completion message: return immediately to Pi's default idle state.
-    restoreDefaultWorkingMessage();
-  });
-
-  pi.on("agent_end", async () => {
-    turnActive = false;
-    clearDisplay();
-  });
-
-  pi.on("session_shutdown", async () => {
-    turnActive = false;
-    clearDisplay();
-    activeCtx = null;
-  });
-}

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 {
-  applyOwnedLayoutBackground,
-  fillTerminalLine,
-  renderCompletionRows,
-} from "./completion-menu.ts";
-import type { ZentuiConfig } from "../../app/config/shell.ts";
-import { sanitizeEditorMetadataText } from "./editor-metadata-format.ts";
-import {
-  renderStyleForSourceOrFallback,
-  type SourceStyleFallback,
-} from "../../shared/style.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);
-}