@herbertgao/pi-extensions 2026.8.2 → 2026.8.4

package/node_modules/pi-footer/src/widgets/session/assistant-messages.ts

@@ -0,0 +1,17 @@
+import { defineWidget } from "../types.js";
+
+export const AssistantMessagesWidget = defineWidget({
+  type: "assistant-messages",
+  label: "Assistant Messages",
+  category: "Session",
+  description: "Assistant message count",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon", "text"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "🤖", nerd: "󰚩", text: "assistant" },
+  defaultStyle: { fg: "white", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(`${ctx.metrics.assistantMessages}`);
+  },
+});

package/node_modules/pi-footer/src/widgets/session/compactions.ts

@@ -0,0 +1,17 @@
+import { defineWidget } from "../types.js";
+
+export const CompactionsWidget = defineWidget({
+  type: "compactions",
+  label: "Compactions",
+  category: "Session",
+  description: "Compaction summary count",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "🗜️", nerd: "󰁨", text: "compactions" },
+  defaultStyle: { fg: "yellow", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(`${ctx.metrics.compactions}`);
+  },
+});

package/node_modules/pi-footer/src/widgets/session/elapsed.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatElapsed } from "../utils/session.js";
+
+export const ElapsedWidget = defineWidget({
+  type: "elapsed",
+  label: "Transcript Span",
+  category: "Session",
+  description: "Time between first and last recorded session entry",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "⏱️", nerd: "󱎫", text: "span" },
+  defaultStyle: { fg: "yellow", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(formatElapsed(ctx.metrics.firstTimestampMs, ctx.metrics.lastTimestampMs));
+  },
+});

package/node_modules/pi-footer/src/widgets/session/last-activity.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatTime } from "../utils/session.js";
+
+export const LastActivityWidget = defineWidget({
+  type: "last-activity",
+  label: "Last Activity",
+  category: "Session",
+  description: "Most recent session entry time",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenEmpty", "icon", "text"],
+  baseOptionDefaults: { text: "" },
+  properties: [],
+  icons: { emoji: "🕘", nerd: "󱑃", text: "last" },
+  defaultStyle: { fg: "yellow", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(formatTime(ctx.metrics.lastTimestampMs));
+  },
+});

package/node_modules/pi-footer/src/widgets/session/messages.ts

@@ -0,0 +1,19 @@
+import { defineWidget } from "../types.js";
+
+export const MessagesWidget = defineWidget({
+  type: "messages",
+  label: "Message Counts",
+  category: "Session",
+  description: "User/assistant/tool message counts",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "💬", nerd: "󰭻", text: "msg" },
+  defaultStyle: { fg: "cyan", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(
+      `${ctx.metrics.userMessages}u/${ctx.metrics.assistantMessages}a/${ctx.metrics.toolResults}t`,
+    );
+  },
+});

package/node_modules/pi-footer/src/widgets/session/session-id.ts

@@ -0,0 +1,17 @@
+import { defineWidget } from "../types.js";
+
+export const SessionIdWidget = defineWidget({
+  type: "session-id",
+  label: "Session ID",
+  category: "Session",
+  description: "Current pi session id",
+  dependencies: ["sessionId"],
+  baseOptions: ["raw", "hideWhenEmpty", "icon", "text"],
+  baseOptionDefaults: { text: "" },
+  properties: [],
+  icons: { emoji: "🆔", nerd: "󰈙", text: "session id" },
+  defaultStyle: { fg: "cyan", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(ctx.sessionId);
+  },
+});

package/node_modules/pi-footer/src/widgets/session/session-start.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatTime } from "../utils/session.js";
+
+export const SessionStartWidget = defineWidget({
+  type: "session-start",
+  label: "Session Start",
+  category: "Session",
+  description: "First session entry time",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenEmpty", "icon", "text"],
+  baseOptionDefaults: { text: "" },
+  properties: [],
+  icons: { emoji: "🚀", nerd: "󱑂", text: "started" },
+  defaultStyle: { fg: "yellow", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(formatTime(ctx.metrics.firstTimestampMs));
+  },
+});

package/node_modules/pi-footer/src/widgets/session/tool-results.ts

@@ -0,0 +1,17 @@
+import { defineWidget } from "../types.js";
+
+export const ToolResultsWidget = defineWidget({
+  type: "tool-results",
+  label: "Tool Results",
+  category: "Session",
+  description: "Tool result count",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon", "text"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "🛠️", nerd: "󰒓", text: "tools" },
+  defaultStyle: { fg: "green", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(`${ctx.metrics.toolResults}`);
+  },
+});

package/node_modules/pi-footer/src/widgets/session/total-messages.ts

@@ -0,0 +1,19 @@
+import { defineWidget } from "../types.js";
+
+export const TotalMessagesWidget = defineWidget({
+  type: "total-messages",
+  label: "Total Messages",
+  category: "Session",
+  description: "Total message count",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon", "text"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "💬", nerd: "󰭻", text: "messages" },
+  defaultStyle: { fg: "cyan", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(
+      `${ctx.metrics.userMessages + ctx.metrics.assistantMessages + ctx.metrics.toolResults}`,
+    );
+  },
+});

package/node_modules/pi-footer/src/widgets/session/total-time.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatElapsed } from "../utils/session.js";
+
+export const TotalTimeWidget = defineWidget({
+  type: "total-time",
+  label: "Session Total Time",
+  category: "Session",
+  description: "Live wall-clock time since first session entry",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "⏳", nerd: "󱎫", text: "total" },
+  defaultStyle: { fg: "yellow", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(formatElapsed(ctx.metrics.firstTimestampMs, Date.now()));
+  },
+});

package/node_modules/pi-footer/src/widgets/session/user-messages.ts

@@ -0,0 +1,17 @@
+import { defineWidget } from "../types.js";
+
+export const UserMessagesWidget = defineWidget({
+  type: "user-messages",
+  label: "User Messages",
+  category: "Session",
+  description: "User message count",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon", "text"],
+  baseOptionDefaults: {},
+  properties: [],
+  icons: { emoji: "👤", nerd: "", text: "user" },
+  defaultStyle: { fg: "blue", bg: "default", bold: false },
+  render({ ctx, renderWidget }) {
+    return renderWidget(`${ctx.metrics.userMessages}`);
+  },
+});

package/node_modules/pi-footer/src/widgets/store.ts

@@ -0,0 +1,26 @@
+import { cloneSettings } from "../config.js";
+import type { StatuslineConfig, StatuslineSettings } from "../types.js";
+import { registry } from "./registry.js";
+import type { Widget } from "./types.js";
+
+export class WidgetStore {
+  constructor(
+    public settings: StatuslineSettings,
+    public lines: Widget[][],
+  ) {}
+
+  static fromConfig(config: StatuslineConfig): WidgetStore {
+    const { lines, ...settings } = config;
+    return new WidgetStore(
+      cloneSettings(settings),
+      lines.map((line) => line.map((entry) => registry.hydrateWidget(entry))),
+    );
+  }
+
+  toConfig(): StatuslineConfig {
+    return {
+      ...cloneSettings(this.settings),
+      lines: this.lines.map((line) => line.map((widget) => widget.toEntry())),
+    };
+  }
+}

package/node_modules/pi-footer/src/widgets/tokens/cache-hit-rate.ts

@@ -0,0 +1,55 @@
+import { defineWidget } from "../types.js";
+
+export const CacheHitRateWidget = defineWidget({
+  type: "cache-hit-rate",
+  label: "Cache Hit Rate",
+  category: "Tokens",
+  description: "Session or latest turn cache hit percentage",
+  dependencies: ["metrics", "turnMetrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [
+    {
+      id: "cacheHitSource",
+      label: "Source",
+      kind: "choice",
+      description: "Cache hit rate source",
+      default: "session",
+      options: {
+        choices: [
+          { id: "session", label: "Session", list: "Session" },
+          { id: "turn", label: "Last Turn", list: "Turn" },
+        ],
+        showInWidgets: true,
+        showInColors: true,
+        listProperty: "source",
+      },
+    },
+    {
+      id: "style",
+      label: "Style",
+      kind: "choice",
+      description: "Display style",
+      default: "default",
+      options: {
+        choices: [
+          { id: "default", label: "Default", list: "default" },
+          { id: "compact", label: "Compact", list: "compact" },
+        ],
+        showInWidgets: true,
+        showInColors: false,
+        listProperty: "style",
+      },
+    },
+  ],
+  icons: { emoji: "🎯", nerd: "󰓎", text: "cache hit" },
+  defaultStyle: { fg: "cyan", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    const source = options.cacheHitSource === "turn" ? ctx.turnMetrics : ctx.metrics;
+    const { inputTokens, cacheReadTokens, cacheWriteTokens } = source;
+    const promptTokens = inputTokens + cacheReadTokens + cacheWriteTokens;
+    const hitRate = promptTokens > 0 ? (cacheReadTokens / promptTokens) * 100 : 0;
+    if (hitRate === 0 && options.hideWhenZero) return undefined;
+    return renderWidget(`${hitRate.toFixed(options.style === "compact" ? 0 : 1)}%`);
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/cache-read.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatTokenCount, tokenFormatStyleProperty } from "../utils/token-format.js";
+
+export const CacheReadWidget = defineWidget({
+  type: "cache-read",
+  label: "Cache Read",
+  category: "Tokens",
+  description: "Cache read token total",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [tokenFormatStyleProperty()],
+  icons: { emoji: "📖", nerd: "󰆼", text: "cache read" },
+  defaultStyle: { fg: "cyan", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(formatTokenCount(ctx.metrics.cacheReadTokens, options.tokenFormatStyle));
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/cache-write.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatTokenCount, tokenFormatStyleProperty } from "../utils/token-format.js";
+
+export const CacheWriteWidget = defineWidget({
+  type: "cache-write",
+  label: "Cache Write",
+  category: "Tokens",
+  description: "Cache write token total",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [tokenFormatStyleProperty()],
+  icons: { emoji: "✍️", nerd: "󰆼", text: "cache write" },
+  defaultStyle: { fg: "cyan", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(formatTokenCount(ctx.metrics.cacheWriteTokens, options.tokenFormatStyle));
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/context-bar.ts

@@ -0,0 +1,108 @@
+import { defineWidget } from "../types.js";
+import { contextColorProperties, contextColors, contextPercent } from "../utils/context.js";
+import {
+  formatTokenCount,
+  tokenFormatStyleProperty,
+  type TokenFormatStyle,
+} from "../utils/token-format.js";
+
+const CONTEXT_BAR_MODES = {
+  default: {
+    label: "Default bar",
+    list: "Default bar",
+    width: 32,
+    filled: "█",
+    empty: "░",
+    bracketed: true,
+    showUsage: true,
+  },
+  short: {
+    label: "Short bar",
+    list: "Short bar",
+    width: 10,
+    filled: "▓",
+    empty: "░",
+    bracketed: false,
+    showUsage: true,
+  },
+  "short-only": {
+    label: "Short bar only",
+    list: "Short bar only",
+    width: 10,
+    filled: "▓",
+    empty: "░",
+    bracketed: false,
+    showUsage: false,
+  },
+  medium: {
+    label: "Medium bar",
+    list: "Medium bar",
+    width: 16,
+    filled: "█",
+    empty: "░",
+    bracketed: true,
+    showUsage: true,
+  },
+} as const;
+
+type ContextBarMode = keyof typeof CONTEXT_BAR_MODES;
+
+const CONTEXT_BAR_MODE_VALUES = Object.keys(CONTEXT_BAR_MODES) as ContextBarMode[];
+
+const contextBarModeProperty = {
+  id: "contextBarMode",
+  label: "Display",
+  kind: "choice",
+  description: "Context bar display mode",
+  default: "default",
+  options: {
+    choices: CONTEXT_BAR_MODE_VALUES.map((mode) => ({
+      id: mode,
+      label: CONTEXT_BAR_MODES[mode].label,
+      list: CONTEXT_BAR_MODES[mode].list,
+    })),
+    showInWidgets: true,
+    showInColors: false,
+    listProperty: "display",
+  },
+} as const;
+
+export const ContextBarWidget = defineWidget({
+  type: "context-bar",
+  label: "Context Bar",
+  category: "Tokens",
+  description: "Progress bar for context usage",
+  dependencies: ["contextTokens", "contextMaxTokens"],
+  baseOptions: ["raw", "hideWhenEmpty", "icon", "text"],
+  baseOptionDefaults: { text: "" },
+  properties: [tokenFormatStyleProperty(), contextBarModeProperty, ...contextColorProperties()],
+  icons: { emoji: "📊", nerd: "󰍛", text: "Context:" },
+  defaultStyle: { fg: "blue", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    const { contextBarMode, tokenFormatStyle } = options;
+    return renderWidget(
+      contextBar(ctx.contextTokens, ctx.contextMaxTokens, contextBarMode, tokenFormatStyle),
+      {
+        ...contextColors(options, ctx.contextTokens, ctx.contextMaxTokens),
+      },
+    );
+  },
+});
+
+function contextBar(
+  tokens: number | undefined,
+  maxTokens: number | undefined,
+  contextBarMode: ContextBarMode,
+  tokenFormatStyle: TokenFormatStyle,
+) {
+  const percent = contextPercent(tokens, maxTokens);
+  if (tokens === undefined || maxTokens === undefined || percent === undefined) return "?";
+
+  const usage = `${formatTokenCount(tokens, tokenFormatStyle)}/${formatTokenCount(maxTokens, tokenFormatStyle)} (${Math.round(percent)}%)`;
+  const mode = CONTEXT_BAR_MODES[contextBarMode];
+  const filledWidth = Math.round((percent / 100) * mode.width);
+  const meter = `${mode.filled.repeat(filledWidth)}${mode.empty.repeat(Math.max(0, mode.width - filledWidth))}`;
+  const bar = mode.bracketed ? `[${meter}]` : meter;
+
+  return mode.showUsage ? `${bar} ${usage}` : bar;
+}

package/node_modules/pi-footer/src/widgets/tokens/context-length.ts

@@ -0,0 +1,26 @@
+import { defineWidget } from "../types.js";
+import { contextColorProperties, contextColors } from "../utils/context.js";
+import { formatTokenCount, tokenFormatStyleProperty } from "../utils/token-format.js";
+
+export const ContextLengthWidget = defineWidget({
+  type: "context-length",
+  label: "Context Length",
+  category: "Tokens",
+  description: "Current context token count",
+  dependencies: ["contextTokens", "contextMaxTokens"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [tokenFormatStyleProperty(), ...contextColorProperties()],
+  icons: { emoji: "📏", nerd: "󰍛", text: "ctx len" },
+  defaultStyle: { fg: "brightBlack", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(
+      ctx.contextTokens === undefined
+        ? "?"
+        : formatTokenCount(ctx.contextTokens, options.tokenFormatStyle),
+      {
+        ...contextColors(options, ctx.contextTokens, ctx.contextMaxTokens),
+      },
+    );
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/context-remaining.ts

@@ -0,0 +1,29 @@
+import { defineWidget } from "../types.js";
+import { contextColors, contextColorProperties, contextPercent } from "../utils/context.js";
+import { formatCount } from "../utils/token-format.js";
+
+export const ContextRemainingWidget = defineWidget({
+  type: "context-remaining",
+  label: "Context Remaining",
+  category: "Tokens",
+  description: "Remaining context percentage",
+  dependencies: ["contextTokens", "contextMaxTokens"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: contextColorProperties(),
+  icons: { emoji: "🧩", nerd: "󰍛", text: "ctx left" },
+  defaultStyle: { fg: "green", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(contextRemaining(ctx.contextTokens, ctx.contextMaxTokens), {
+      ...contextColors(options, ctx.contextTokens, ctx.contextMaxTokens),
+    });
+  },
+});
+
+function contextRemaining(tokens: number | undefined, maxTokens: number | undefined) {
+  if (tokens === undefined) return "?";
+  if (maxTokens === undefined || maxTokens <= 0) return `${formatCount(tokens)} ctx`;
+
+  const percent = 100 - (contextPercent(tokens, maxTokens) ?? 0);
+  return `${percent.toFixed(1).replace(/\.0$/, "")}%`;
+}

package/node_modules/pi-footer/src/widgets/tokens/context.ts

@@ -0,0 +1,29 @@
+import { defineWidget } from "../types.js";
+import { contextColors, contextColorProperties, contextPercent } from "../utils/context.js";
+import { formatCount } from "../utils/token-format.js";
+
+export const ContextWidget = defineWidget({
+  type: "context",
+  label: "Context %",
+  category: "Tokens",
+  description: "Current context usage percentage",
+  dependencies: ["contextTokens", "contextMaxTokens"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: contextColorProperties(),
+  icons: { emoji: "🧩", nerd: "󰍛", text: "ctx" },
+  defaultStyle: { fg: "blue", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(contextUsage(ctx.contextTokens, ctx.contextMaxTokens), {
+      ...contextColors(options, ctx.contextTokens, ctx.contextMaxTokens),
+    });
+  },
+});
+
+function contextUsage(tokens: number | undefined, maxTokens: number | undefined) {
+  if (tokens === undefined) return "?";
+  if (maxTokens === undefined || maxTokens <= 0) return `${formatCount(tokens)} ctx`;
+
+  const percent = contextPercent(tokens, maxTokens) ?? 0;
+  return `${percent.toFixed(1).replace(/\.0$/, "")}%`;
+}

package/node_modules/pi-footer/src/widgets/tokens/cost.ts

@@ -0,0 +1,51 @@
+import { defineWidget } from "../types.js";
+
+export const CostWidget = defineWidget({
+  type: "cost",
+  label: "Session Cost",
+  category: "Tokens",
+  description: "Estimated session cost",
+  dependencies: ["metrics", "usingSubscription"],
+  baseOptions: ["raw", "icon"],
+  baseOptionDefaults: {},
+  properties: [
+    {
+      id: "costFormatStyle",
+      label: "Cost format",
+      kind: "choice",
+      description: "Session cost display format",
+      default: "default",
+      options: {
+        choices: [
+          { id: "default", label: "Default", list: "Default" },
+          { id: "compact", label: "Compact", list: "Compact" },
+        ],
+        showInWidgets: true,
+        showInColors: false,
+        listProperty: "format",
+      },
+    },
+    {
+      id: "showSubscription",
+      label: "Show subscription",
+      kind: "boolean",
+      description: "Append subscription marker when subscription usage is active",
+      default: false,
+      options: {
+        label: "show-sub",
+        showInWidgets: true,
+        showInColors: false,
+      },
+    },
+  ],
+  icons: { emoji: "💸", nerd: "󱐋", text: "cost" },
+  defaultStyle: { fg: "green", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    const cost =
+      options.costFormatStyle === "compact"
+        ? `$${ctx.metrics.costUsd.toFixed(3)}`
+        : `$${ctx.metrics.costUsd.toFixed(ctx.metrics.costUsd < 1 ? 4 : 2)}`;
+    const suffix = options.showSubscription && ctx.usingSubscription ? " (sub)" : "";
+    return renderWidget(`${cost}${suffix}`);
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/input-speed.ts

@@ -0,0 +1,25 @@
+import { defineWidget } from "../types.js";
+import { formatTokenSpeed, tokenFormatStyleProperty } from "../utils/token-format.js";
+
+export const InputSpeedWidget = defineWidget({
+  type: "input-speed",
+  label: "Input Speed",
+  category: "Tokens",
+  description: "Average input tokens per minute",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [tokenFormatStyleProperty()],
+  icons: { emoji: "⏫", nerd: "", text: "in/min" },
+  defaultStyle: { fg: "brightMagenta", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(
+      formatTokenSpeed(
+        ctx.metrics.inputTokens,
+        ctx.metrics.firstTimestampMs,
+        ctx.metrics.lastTimestampMs,
+        options.tokenFormatStyle,
+      ),
+    );
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/input-tokens.ts

@@ -0,0 +1,18 @@
+import { defineWidget } from "../types.js";
+import { formatTokenCount, tokenFormatStyleProperty } from "../utils/token-format.js";
+
+export const InputTokensWidget = defineWidget({
+  type: "input-tokens",
+  label: "Input Tokens",
+  category: "Tokens",
+  description: "Input token total",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [tokenFormatStyleProperty()],
+  icons: { emoji: "⬆️", nerd: "󰌌", text: "in" },
+  defaultStyle: { fg: "blue", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(formatTokenCount(ctx.metrics.inputTokens, options.tokenFormatStyle));
+  },
+});

package/node_modules/pi-footer/src/widgets/tokens/output-speed.ts

@@ -0,0 +1,25 @@
+import { defineWidget } from "../types.js";
+import { formatTokenSpeed, tokenFormatStyleProperty } from "../utils/token-format.js";
+
+export const OutputSpeedWidget = defineWidget({
+  type: "output-speed",
+  label: "Output Speed",
+  category: "Tokens",
+  description: "Average output tokens per minute",
+  dependencies: ["metrics"],
+  baseOptions: ["raw", "hideWhenZero", "icon"],
+  baseOptionDefaults: {},
+  properties: [tokenFormatStyleProperty()],
+  icons: { emoji: "⏬", nerd: "", text: "out/min" },
+  defaultStyle: { fg: "brightCyan", bg: "default", bold: false },
+  render({ ctx, options, renderWidget }) {
+    return renderWidget(
+      formatTokenSpeed(
+        ctx.metrics.outputTokens,
+        ctx.metrics.firstTimestampMs,
+        ctx.metrics.lastTimestampMs,
+        options.tokenFormatStyle,
+      ),
+    );
+  },
+});