@hheei/pi-status 0.1.2 → 0.2.0

package/README.md

@@ -1,3 +1,34 @@
 # @hheei/pi-status
 
-Pi response telemetry extension. Requires Pi `>=0.87.0`.
+High-density response telemetry and compact two-line footer extension for Pi. Compatible with Pi `>=0.99.0` and `1.0.0`.
+
+```bash
+pi install npm:@hheei/pi-status
+```
+
+The package mounts an ext-core response status tracker and replaces Pi's default TUI footer with an informative, compact two-line layout.
+
+## Features
+
+- **Compact Two-Line Footer**: Maximizes vertical editor space while presenting critical session context at a glance.
+- **Top Row (Session & Worktree)**:
+  - Current working directory with `~` home abbreviation and path fitting.
+  - Active Git branch name and dirty status indicators (`*`).
+  - Active session stats and timing.
+- **Bottom Row (Model & Telemetry)**:
+  - Full model identifier with provider prefix (e.g. `anthropic/claude-3.5-sonnet`, `cx/gpt-6.1-sol`).
+  - Thinking level indicator when active (e.g. `(high)`, `(low)`).
+  - Routing indicator when a virtual model resolves to a distinct physical model (`virtual -> physical`).
+  - Context window visualization gauge with percentage and token counts (e.g. `[████░░░░░░] 42% (84k/200k)`), colored dynamically as limits approach.
+  - Session token usage and cumulative cost tracking.
+- **Lifecycle Cleanliness**: Gracefully unmounts and restores original UI footers on session disposal or reload.
+
+## Installation
+
+Add to your Pi configuration or install directly via npm:
+
+```bash
+pi install npm:@hheei/pi-status
+```
+
+The extension entrypoint is declared under `dist/extension.js` and automatically activates in TUI mode.

package/dist/extension.d.ts

@@ -1,3 +1,3 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-/** Mounts ext-core response telemetry for this independently installable feature. */
+/** Mounts ext-core response telemetry and compact two-line footer. */
 export default function piStatusExtension(pi: ExtensionAPI): void;

package/dist/extension.js

@@ -1,5 +1,6 @@
 import { createResponseStatusFeature, registerExtensionLifecycle } from "@hheei/pi-ext-core";
-/** Mounts ext-core response telemetry for this independently installable feature. */
+import { CompactFooterComponent } from "./footer.js";
+/** Mounts ext-core response telemetry and compact two-line footer. */
 export default function piStatusExtension(pi) {
     const status = createResponseStatusFeature(pi);
     registerExtensionLifecycle(pi, {
@@ -8,6 +9,12 @@ export default function piStatusExtension(pi) {
             status.start(extension);
             const sessionId = extension.sessionManager.getSessionId();
             resources.add("response-status", () => status.dispose(sessionId));
+            if (extension.mode === "tui") {
+                extension.ui.setFooter((tui, theme, footerData) => new CompactFooterComponent(extension, tui, theme, footerData));
+                resources.add("footer", () => {
+                    extension.ui.setFooter(undefined);
+                });
+            }
         },
     });
 }

package/dist/footer.d.ts

@@ -0,0 +1,63 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { type Component } from "@earendil-works/pi-tui";
+import { type ThemeLike } from "@hheei/pi-ext-core";
+type FooterFactory = NonNullable<Parameters<ExtensionContext["ui"]["setFooter"]>[0]>;
+export type ReadonlyFooterDataProvider = Parameters<FooterFactory>[2];
+export type FooterTheme = Parameters<FooterFactory>[1];
+/** Formats cwd replacing HOME with ~ */
+export declare function formatCwdForFooter(cwd: string, home: string | undefined): string;
+export interface RoutedModelInfo {
+    readonly model: {
+        readonly id: string;
+        readonly provider?: string;
+    };
+    readonly thinkingLevel?: string;
+}
+/**
+ * Formats model identifier with provider prefix and thinking level:
+ * - When theme is provided:
+ *   [provider/ (dim)][modelId (text)][(thinking) ((dim) + (accent) + (dim))]
+ * - When theme is omitted:
+ *   gm/gemini-3.8-flash(high) or gm/gemini-3.8-flash
+ * - When routedModel is provided and resolves to a distinct model:
+ *   [virtual-model] -> [physical-model]
+ */
+export declare function formatFooterModel(model: {
+    readonly id: string;
+    readonly provider?: string;
+} | undefined, thinkingLevel: string | undefined, theme?: ThemeLike, routedModel?: RoutedModelInfo | undefined): string;
+/**
+ * Formats context usage ratio: N%/100K with warning/error colors:
+ * - <= 70%: [N% (muted)][/100K (dim)]
+ * - 70% ~ 90%: warning
+ * - > 90%: error
+ */
+export declare function formatFooterContext(contextUsage: {
+    readonly percent?: number | null;
+    readonly contextWindow?: number;
+} | undefined, defaultWindow: number | undefined, theme: ThemeLike): string;
+/**
+ * Formats cwd and optional git branch for footer display:
+ * [path (muted)] [( (dim)][branch (accent)][) (dim)]
+ */
+export declare function formatFooterPath(cwd: string, branch: string | null | undefined, theme: ThemeLike, home?: string): string;
+/**
+ * Arranges a two-column row with left content aligned left and right content aligned right.
+ * When constrained, shrinks/truncates or drops the right column to prioritize the left column.
+ */
+export declare function layoutTwoColumnRow(left: string, right: string | undefined, width: number, minGap?: number): string;
+/**
+ * Custom 2-line compact footer:
+ * Line 1: path (git)                                            title
+ * Line 2: provider/model(level) · N%/100K                 todo status
+ */
+export declare class CompactFooterComponent implements Component {
+    #private;
+    constructor(extension: ExtensionContext, tui: {
+        requestRender(): void;
+    }, theme: FooterTheme, footerData: ReadonlyFooterDataProvider);
+    invalidate(): void;
+    dispose(): void;
+    render(width: number): string[];
+}
+export {};

package/dist/footer.js

@@ -0,0 +1,185 @@
+import { homedir } from "node:os";
+import { isAbsolute, relative, resolve, sep } from "node:path";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { fitRow, formatCompactNumber } from "@hheei/pi-ext-core";
+/** Formats cwd replacing HOME with ~ */
+export function formatCwdForFooter(cwd, home) {
+    if (!home)
+        return cwd;
+    const resolvedCwd = resolve(cwd);
+    const resolvedHome = resolve(home);
+    const relativeToHome = relative(resolvedHome, resolvedCwd);
+    const isInsideHome = relativeToHome === "" ||
+        (relativeToHome !== ".." &&
+            !relativeToHome.startsWith(`..${sep}`) &&
+            !isAbsolute(relativeToHome));
+    if (!isInsideHome)
+        return cwd;
+    return relativeToHome === "" ? "~" : `~${sep}${relativeToHome}`;
+}
+/**
+ * Formats model identifier with provider prefix and thinking level:
+ * - When theme is provided:
+ *   [provider/ (dim)][modelId (text)][(thinking) ((dim) + (accent) + (dim))]
+ * - When theme is omitted:
+ *   gm/gemini-3.8-flash(high) or gm/gemini-3.8-flash
+ * - When routedModel is provided and resolves to a distinct model:
+ *   [virtual-model] -> [physical-model]
+ */
+export function formatFooterModel(model, thinkingLevel, theme, routedModel) {
+    if (model === undefined)
+        return theme !== undefined ? theme.fg("dim", "no-model") : "no-model";
+    const hasProvider = model.provider !== undefined && model.provider.trim() !== "";
+    const providerText = hasProvider ? `${model.provider}/` : "";
+    const hasThinking = thinkingLevel !== undefined && thinkingLevel !== "off" && thinkingLevel.trim() !== "";
+    const baseText = (() => {
+        if (theme === undefined) {
+            const levelSuffix = hasThinking ? `(${thinkingLevel})` : "";
+            return `${providerText}${model.id}${levelSuffix}`;
+        }
+        const providerPart = hasProvider ? theme.fg("dim", providerText) : "";
+        const modelPart = theme.fg("text", model.id);
+        const thinkingPart = hasThinking
+            ? `${theme.fg("dim", "(")}${theme.fg("accent", thinkingLevel)}${theme.fg("dim", ")")}`
+            : "";
+        return `${providerPart}${modelPart}${thinkingPart}`;
+    })();
+    if (!routedModel ||
+        (routedModel.model.id === model.id && routedModel.model.provider === model.provider)) {
+        return baseText;
+    }
+    const routedHasProvider = routedModel.model.provider !== undefined &&
+        routedModel.model.provider.trim() !== "" &&
+        routedModel.model.provider !== model.provider;
+    const routedProviderText = routedHasProvider ? `${routedModel.model.provider}/` : "";
+    const routedThinkingLevel = routedModel.thinkingLevel;
+    const routedHasThinking = routedThinkingLevel !== undefined &&
+        routedThinkingLevel !== "off" &&
+        routedThinkingLevel.trim() !== "";
+    if (theme === undefined) {
+        const routedLevelSuffix = routedHasThinking ? `(${routedThinkingLevel})` : "";
+        return `${baseText} → ${routedProviderText}${routedModel.model.id}${routedLevelSuffix}`;
+    }
+    const arrowPart = theme.fg("dim", "→");
+    const routedProviderPart = routedHasProvider ? theme.fg("dim", routedProviderText) : "";
+    const routedModelPart = theme.fg("text", routedModel.model.id);
+    const routedThinkingPart = routedHasThinking
+        ? `${theme.fg("dim", "(")}${theme.fg("accent", routedThinkingLevel)}${theme.fg("dim", ")")}`
+        : "";
+    return `${baseText} ${arrowPart} ${routedProviderPart}${routedModelPart}${routedThinkingPart}`;
+}
+/**
+ * Formats context usage ratio: N%/100K with warning/error colors:
+ * - <= 70%: [N% (muted)][/100K (dim)]
+ * - 70% ~ 90%: warning
+ * - > 90%: error
+ */
+export function formatFooterContext(contextUsage, defaultWindow, theme) {
+    const window = contextUsage?.contextWindow ?? defaultWindow ?? 0;
+    const windowStr = window > 0 ? formatCompactNumber(window) : "0";
+    const percentValue = contextUsage?.percent;
+    const percentStr = percentValue !== null && percentValue !== undefined ? `${Math.round(percentValue)}%` : "?%";
+    if (percentValue !== null && percentValue !== undefined) {
+        if (percentValue > 90)
+            return theme.fg("error", `${percentStr}/${windowStr}`);
+        if (percentValue > 70)
+            return theme.fg("warning", `${percentStr}/${windowStr}`);
+    }
+    return `${theme.fg("muted", percentStr)}${theme.fg("dim", `/${windowStr}`)}`;
+}
+/**
+ * Formats cwd and optional git branch for footer display:
+ * [path (muted)] [( (dim)][branch (accent)][) (dim)]
+ */
+export function formatFooterPath(cwd, branch, theme, home) {
+    const formattedCwd = formatCwdForFooter(cwd, home);
+    const cwdPart = theme.fg("muted", formattedCwd);
+    if (branch === null || branch === undefined || branch.trim() === "") {
+        return cwdPart;
+    }
+    const branchPart = `${theme.fg("dim", "(")}${theme.fg("accent", branch)}${theme.fg("dim", ")")}`;
+    return `${cwdPart} ${branchPart}`;
+}
+/**
+ * Arranges a two-column row with left content aligned left and right content aligned right.
+ * When constrained, shrinks/truncates or drops the right column to prioritize the left column.
+ */
+export function layoutTwoColumnRow(left, right, width, minGap = 2) {
+    const leftWidth = visibleWidth(left);
+    if (leftWidth >= width) {
+        return fitRow(left, width, "");
+    }
+    if (right === undefined || right.trim() === "") {
+        return left;
+    }
+    const rightWidth = visibleWidth(right);
+    const totalNeeded = leftWidth + minGap + rightWidth;
+    if (totalNeeded <= width) {
+        const spaces = " ".repeat(width - leftWidth - rightWidth);
+        return `${left}${spaces}${right}`;
+    }
+    // Insufficient space: truncate right side with ellipsis if at least 4 cols available
+    const availableForRight = width - leftWidth - minGap;
+    if (availableForRight >= 4) {
+        const truncatedRight = fitRow(right, availableForRight, "…");
+        const truncatedWidth = visibleWidth(truncatedRight);
+        const spaces = " ".repeat(Math.max(minGap, width - leftWidth - truncatedWidth));
+        return `${left}${spaces}${truncatedRight}`;
+    }
+    // Extremely narrow: drop right side entirely to preserve full left side
+    return left;
+}
+/**
+ * Custom 2-line compact footer:
+ * Line 1: path (git)                                            title
+ * Line 2: provider/model(level) · N%/100K                 todo status
+ */
+export class CompactFooterComponent {
+    #extension;
+    #footerData;
+    #theme;
+    #unsubscribeBranch;
+    constructor(extension, tui, theme, footerData) {
+        this.#extension = extension;
+        this.#footerData = footerData;
+        this.#theme = theme;
+        this.#unsubscribeBranch = footerData.onBranchChange(() => {
+            tui.requestRender();
+        });
+    }
+    invalidate() { }
+    dispose() {
+        this.#unsubscribeBranch?.();
+    }
+    render(width) {
+        const cwd = this.#extension.sessionManager.getCwd();
+        const branch = this.#footerData.getGitBranch();
+        const line1Left = formatFooterPath(cwd, branch, this.#theme, homedir());
+        const extensionStatuses = this.#footerData.getExtensionStatuses();
+        const autoTitleStatus = extensionStatuses.get("auto-title");
+        const sessionName = this.#extension.sessionManager.getSessionName();
+        const line1Right = autoTitleStatus !== undefined && autoTitleStatus.trim() !== ""
+            ? autoTitleStatus
+            : sessionName !== undefined && sessionName.trim() !== ""
+                ? this.#theme.fg("muted", sessionName)
+                : undefined;
+        const line1 = layoutTwoColumnRow(line1Left, line1Right, width);
+        // Line 2 left: model + thinking level · context%
+        const routed = this.#extension.routedModel;
+        const modelPart = formatFooterModel(this.#extension.model, this.#extension.thinkingLevel, this.#theme, routed);
+        const contextPart = formatFooterContext(this.#extension.getContextUsage(), this.#extension.model?.contextWindow, this.#theme);
+        const line2Left = `${modelPart} ${this.#theme.fg("dim", "·")} ${contextPart}`;
+        // Line 2 right: todo status or extension statuses (excluding auto-title which belongs to line 1)
+        let todoStatus = extensionStatuses.get("pi-ext-tools:todo");
+        if (todoStatus === undefined && extensionStatuses.size > 0) {
+            for (const [key, value] of extensionStatuses) {
+                if (key !== "auto-title" && value.trim() !== "") {
+                    todoStatus = value;
+                    break;
+                }
+            }
+        }
+        const line2 = layoutTwoColumnRow(line2Left, todoStatus, width);
+        return [line1, line2];
+    }
+}

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./extension.js";
+export { CompactFooterComponent, type FooterTheme, formatCwdForFooter, formatFooterContext, formatFooterModel, formatFooterPath, layoutTwoColumnRow, type ReadonlyFooterDataProvider, type RoutedModelInfo, } from "./footer.js";

package/dist/index.js

@@ -1 +1,2 @@
 export { default } from "./extension.js";
+export { CompactFooterComponent, formatCwdForFooter, formatFooterContext, formatFooterModel, formatFooterPath, layoutTwoColumnRow, } from "./footer.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hheei/pi-status",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Response telemetry for Pi sessions.",
   "type": "module",
   "main": "dist/index.js",
@@ -35,13 +35,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@hheei/pi-ext-core": "^0.1.2"
+    "@hheei/pi-ext-core": "^0.2.1"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": ">=0.87.0"
+    "@earendil-works/pi-coding-agent": ">=1.0.0",
+    "@earendil-works/pi-tui": ">=1.0.0"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.87.0"
+    "@earendil-works/pi-coding-agent": "1.0.0",
+    "@earendil-works/pi-tui": "1.0.0"
   },
   "scripts": {
     "build": "node -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.build.json"