@leo-alvarenga/pi-zen-frame 0.14.0 → 0.16.0

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/frame.ts

@@ -43,21 +43,13 @@ export function composeBand(
   autocomplete: string[],
   opts: BandOptions,
 ): string[] {
-  const {
-    padX,
-    paint,
-    width,
-    prefix,
-    marginX,
-    boxBottom,
-    paddingTop,
-    paddingBottom,
-  } = opts;
+  const { padX, paint, width, prefix, boxBottom, paddingTop, paddingBottom } =
+    opts;
 
   const lead = Math.max(0, padX - visibleWidth(prefix));
 
   const inset = (row: string) =>
-    paint(prefix + " ".repeat(lead) + row + " ".repeat(padX));
+    prefix + paint(" ".repeat(lead) + row + " ".repeat(padX));
 
   const fill = () => inset(paint(" ".repeat(Math.max(0, width - 2 * padX))));
 

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/editor/blocky-editor.ts

@@ -103,7 +103,8 @@ export class BlockyEditor extends CustomEditor {
     let prefix = "┃";
 
     if (ext.theme?.fg) {
-      const prefixColor: ThemeColor = ext.agentMode?.color ?? "text";
+      const prefixColor: ThemeColor =
+        ext.agentMode?.color ?? this.opts.accentColor ?? "text";
       prefix = ext.theme.fg(prefixColor, prefix);
     }
 

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.14.0",
+  "version": "0.16.0",
   "license": "MIT",
   "repository": "github.com/leo-alvarenga/pi-mono",
   "publishConfig": {