@leo-alvarenga/pi-zen-frame 0.15.0 → 0.16.1

package/README.md

@@ -6,8 +6,8 @@ A [`pi-coding-agent`](https://github.com/earendil-works/pi) extension that gives
 
 ## Features
 
-- **Clean Frame**: Clean editor frame with segments placed above and below it to easily see relevant info
-- **Header Box**: Optional Claude-style welcome panel displaying a logo, model/provider info, current working directory, and Git status
+- **Clean Frame**: Clean editor frame with status segments rendered below the editor
+- **Header Box**: Optional welcome panel with a logo and "Welcome back!" heading, model name, current working directory, Git status, and a random tip
 - **Working Messages**: Randomized loading status messages during response generation, updated on a configurable timer
 - **Native Theme Support**: Uses pi `ThemeColor` tokens to automatically align with your active theme
 
@@ -18,7 +18,7 @@ A [`pi-coding-agent`](https://github.com/earendil-works/pi) extension that gives
 Run the following command:
 
 ```bash
-pi install @leo-alvarenga/pi-zen-frame
+pi install npm:@leo-alvarenga/pi-zen-frame
 ```
 
 Or add `pi-zen-frame` to your pi packages list in `~/.pi/agent/settings.json`:
@@ -42,14 +42,15 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
   // Fallback accent color for frame border and active segments
   "accentColor": "accent",
 
-  // Master mute: renders all segments in muted tones except agent-mode
-  "zenMode": true,
+  // Master mute: renders all segments in muted tones except agent-mode (default: false)
+  "zenMode": false,
 
   // Editor-frame renderer by registered name (built-in: "blocky")
   "editorFrame": "blocky",
 
   "header": {
-    "enable": true,
+    // Welcome panel is opt-in (default: false)
+    "enable": false,
     // Header renderer by registered name (built-in: "basic")
     "type": "basic",
   },
@@ -73,6 +74,7 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
   "workingMessage": {
     "enable": true,
     "intervalMs": 3000,
+    // Omit to use the built-in message pool
     "messages": [
       "Exploring the seas",
       "Tinkering with strange objects",
@@ -86,16 +88,16 @@ Configuration is loaded from `~/.pi/agent/pi-zen-frame.json`. All properties are
 
 ## Structure & Status Segments
 
-The editor window features status indicators embedded along the frame borders:
+The editor frame shows status indicators in two rows below the editor:
 
-| Location         | Segment        | Description                                                           |
-| ---------------- | -------------- | --------------------------------------------------------------------- |
-| **Top Left**     | **model**      | Active model name and provider                                        |
-|                  | **reasoning**  | Current reasoning effort level, tinted with pi thinking tokens        |
-|                  | **spinner**    | Active phase indicator (`thinking`, `outputting`, `toolcall`, `exec`) |
-| **Top Right**    | **ctx**        | Context usage percentage and token counts with color alerts           |
-| **Bottom Left**  | **agent mode** | Active agent indicator pill from `pi-agent-manager`                   |
-| **Bottom Right** | **cwd**        | Shortened path, active Git branch, and uncommitted file counts        |
+| Location           | Segment        | Description                                                           |
+| ------------------ | -------------- | --------------------------------------------------------------------- |
+| Editor band (left) | **agent mode** | Active agent indicator pill from `pi-agent-manager`                   |
+|                    | **model**      | Active model name and provider                                        |
+|                    | **reasoning**  | Current reasoning effort level, tinted with pi thinking tokens        |
+|                    | **spinner**    | Active phase indicator (`thinking`, `outputting`, `toolcall`, `exec`); replaces the row while streaming when `showSpinner` is enabled (default off) |
+| Footer (left)      | **cwd**        | Shortened path, active Git branch, and uncommitted file counts        |
+| Footer (right)     | **ctx**        | Context usage percentage and token counts with color alerts           |
 
 ---
 
@@ -122,9 +124,9 @@ Run `/reload` after modifying your keybindings.
 extensions/
 ├── index.ts            # Extension entry point: config initialization and events
 ├── config/             # Types, defaults, and settings normalization
-├── components/         # Header (BasicHeader), frame border, and status segment modules
+├── components/         # Status segments, header, and frame layout helpers
 ├── editor/             # BlockyEditor editor-frame renderer
 ├── renderers/          # Renderer registry + swap-in API (blocky / basic)
-└── utils/              # Helpers for Git status, paths, and agent modes
+└── utils/              # Helpers for Git status, paths, agent modes, and token usage
 
 ```

package/extensions/components/cwd.ts

@@ -13,7 +13,9 @@ export const cwdSegment: SegmentDef = {
 
     if (d.gitBranch) {
       let git = ` ${icons.gitBranch} ${d.gitBranch}`;
-      text += theme.fg(d.zenMode ? "muted" : d.accentColor, git);
+      text +=
+        theme.fg("dim", " ·") +
+        theme.fg(d.zenMode ? "muted" : d.accentColor, git);
 
       if (d.gitDirty > 0) {
         text += theme.fg(

package/extensions/components/model.ts

@@ -5,9 +5,9 @@ export const modelSegment: SegmentDef = {
   id: "model",
   slot: "topLeft",
   enabled: (_d, cfg) => cfg.showModel !== false,
-  render: (d, { theme }) => {
+  render: (d, { icons, theme }) => {
     if (!d.modelName) return "";
 
-    return ` ${theme.fg("text", d.modelName)} ${theme.fg("muted", `(${d.modelProvider})`)} `;
+    return ` ${theme.fg(d.accentColor, `${icons.model} ${d.modelName}`)} ${theme.fg("muted", `(${d.modelProvider})`)} `;
   },
 };

package/extensions/components/token-count.ts

@@ -4,12 +4,13 @@ import type { SegmentDef } from "./types";
 
 function trimFixed1(n: number): string {
   const t = n.toFixed(1);
+
   return t.endsWith(".0") ? t.slice(0, -2) : t;
 }
 
 function formatTokens(n: number): string {
   if (n >= 1_000_000) return `${trimFixed1(n / 1_000_000)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
 
   return `${n}`;
 }
@@ -28,13 +29,15 @@ export const tokenCountSegment: SegmentDef = {
     const c = d.context;
     if (!c) return "";
 
-    const pct = c.percent === null ? "?" : `${Math.round(c.percent)}%`;
+    const { input, output, percent, tokens, window } = c;
+
+    const pct = percent === null ? "?" : `${Math.round(percent)}%`;
     let color: ThemeColor = "muted";
 
-    if (c.percent !== null) {
-      if (c.percent >= 80) {
+    if (percent !== null) {
+      if (percent >= 80) {
         color = "error";
-      } else if (c.percent >= 50) {
+      } else if (percent >= 50) {
         color = "warning";
       } else {
         color = "success";
@@ -42,12 +45,17 @@ export const tokenCountSegment: SegmentDef = {
     }
 
     const color2 = d.zenMode ? "muted" : color;
-    const used = c.tokens === null ? "?" : formatTokens(c.tokens);
+    const used = tokens === null ? "?" : formatTokens(tokens);
 
     return (
       theme.fg(color2, ` ${icons.context} ctx ${pct} `) +
       theme.fg("dim", "·") +
-      theme.fg(color2, ` ${used}/${formatWindow(c.window)} `)
+      theme.fg(color2, ` ${used}/${formatWindow(window)} `) +
+      theme.fg("dim", "·") +
+      theme.fg(
+        "dim",
+        ` ${icons.tokenIn} ${formatTokens(input)} ${icons.tokenOut} ${formatTokens(output)} `,
+      )
     );
   },
 };

package/extensions/components/types.ts

@@ -11,6 +11,7 @@
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 
 import type { FrameIcons, FrameSettings, SpinnerPhase } from "../config/types";
+import { TokenUsage } from "../utils/token";
 
 /** Where a segment renders. "top*" → the box-bottom row inside the band,
  *  "bottom*" → the pseudo-footer row below it (names kept from the old
@@ -54,11 +55,7 @@ export interface FrameData {
   /** To render the agent mode (from @leo-alvarenga/pi-agent-manager) segment, if any */
   agentMode: AgentMode;
 
-  context: {
-    window: number;
-    tokens: number | null;
-    percent: number | null;
-  } | null;
+  context: TokenUsage | null;
 }
 
 /** Data + rendering helpers handed to every segment. */

package/extensions/config/constants/visuals.ts

@@ -15,7 +15,9 @@ export const SPINNER_FRAMES: Record<SpinnerPhase, string[]> = {
 export const DEFAULT_ICONS: FrameIcons = {
   model: "󰣖",
   folder: " ",
+  tokenIn: "",
   context: "",
+  tokenOut: "",
   gitDirty: "",
   thinking: "󰌶",
   gitBranch: "",
@@ -32,7 +34,6 @@ export const THINKING_TOKEN: Record<string, string> = {
   max: "thinkingMax",
 };
 
-
 export const THEME_COLORS: Record<ThemeColor, true> = {
   accent: true,
   border: true,

package/extensions/config/types.ts

@@ -14,6 +14,8 @@ export interface FrameIcons {
   folder: string;
   model: string;
   context: string;
+  tokenIn: string;
+  tokenOut: string;
   thinking: string;
   gitDirty: string;
   gitBranch: string;

package/extensions/index.ts

@@ -37,6 +37,7 @@ import {
   type GitInfo,
 } from "./utils";
 import { type HeaderEnv } from "./components/header";
+import { getUsage } from "./utils/token";
 
 let editor: EditorFrameRenderer | null = null;
 let currentCtx: ExtensionContext | null = null;
@@ -84,7 +85,6 @@ function getHeaderEnv(pi: ExtensionAPI): HeaderEnv {
 
 function provideExternal(pi: ExtensionAPI): ExternalData {
   const ctx = currentCtx;
-  const usage = ctx?.getContextUsage?.();
   const model = ctx?.model;
 
   return {
@@ -95,16 +95,10 @@ function provideExternal(pi: ExtensionAPI): ExternalData {
     gitDirty: git.dirty,
     gitBranch: git.branch,
     theme: ctx?.ui.theme,
+    context: getUsage(ctx ?? undefined),
     thinkingLevel: pi.getThinkingLevel(),
     modelName: model?.name ?? model?.id ?? "Unknown",
     modelProvider: capitalize(model?.provider ?? "unknown"),
-    context: usage
-      ? {
-          tokens: usage.tokens,
-          window: usage.contextWindow,
-          percent: usage.percent,
-        }
-      : null,
   };
 }
 
@@ -232,9 +226,7 @@ export default async function (pi: ExtensionAPI) {
         {
           frame: settings.frame ?? DEFAULT_SETTINGS.frame!,
           accentColor:
-            settings.accentColor ??
-            DEFAULT_SETTINGS.accentColor ??
-            "accent",
+            settings.accentColor ?? DEFAULT_SETTINGS.accentColor ?? "accent",
         },
         ...args,
       );

package/extensions/utils/token.ts

@@ -0,0 +1,49 @@
+import { ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+export type TokenUsage = TokenThroughput & {
+  tokens: number;
+  window: number;
+  percent: number;
+};
+
+export type TokenThroughput = {
+  input: number;
+  output: number;
+};
+
+type EntryUsage = {
+  usage?: TokenThroughput;
+};
+
+function getUsageFromEntries(ctx: ExtensionContext): TokenThroughput {
+  let input = 0,
+    output = 0;
+
+  for (const entry of ctx.sessionManager.getEntries()) {
+    const usage =
+      entry.type === "compaction" || entry.type === "branch_summary"
+        ? (entry as EntryUsage).usage
+        : (entry as { message?: EntryUsage }).message?.usage;
+
+    if (!usage) continue;
+
+    input += usage.input ?? 0;
+    output += usage.output ?? 0;
+  }
+
+  return { input, output };
+}
+
+export function getUsage(ctx?: ExtensionContext): TokenUsage | null {
+  if (!ctx) return null;
+
+  const usage = ctx.getContextUsage();
+  if (!usage) return null;
+
+  return {
+    ...getUsageFromEntries(ctx),
+    tokens: usage?.tokens ?? 0,
+    percent: usage?.percent ?? 0,
+    window: usage?.contextWindow ?? 0,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@leo-alvarenga/pi-zen-frame",
   "description": "A pi-coding-agent extension that gives the TUI editor a simple yet polished look and feel",
   "author": "Leonardo A. Alvarenga",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "license": "MIT",
   "repository": "github.com/leo-alvarenga/pi-mono",
   "publishConfig": {