@zigai/pi-footer 0.1.1

package/README.md

@@ -0,0 +1,11 @@
+# Pi Footer
+
+Pi package for a custom footer and worked-for token speed widget.
+
+## Install
+
+Local subpackage path:
+
+```sh
+pi install @zigai/pi-footer
+```

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@zigai/pi-footer",
+  "version": "0.1.1",
+  "description": "Pi package for a custom footer and worked-for token speed widget.",
+  "keywords": [
+    "footer",
+    "pi-extension",
+    "pi-package",
+    "pi-ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zigai/pi-ui-tweaks.git",
+    "directory": "packages/pi-footer"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "*.json"
+  ],
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
+  },
+  "pi": {
+    "extensions": [
+      "./src/index.ts"
+    ]
+  }
+}

package/src/constants.ts

@@ -0,0 +1,29 @@
+export const WIDGET_KEY = "worked-for-widget";
+
+export const ACTIVE_FOOTER_VARIANT = "plain" as const;
+export const BRANCH_ICON = "";
+
+export const FOOTER_LAYOUT = {
+    left: ["path", "branch", "provider", "model", "thinking"],
+    right: ["mcp", "context"],
+} as const;
+
+export const BLOCK_COLORS = {
+    path: { bg: "#222222", fg: "#cccccc" },
+    branch: { bg: "#95ffa4", fg: "#222222" },
+    provider: { bg: "#24292f", fg: "#ffffff" },
+    model: { bg: "#007acc", fg: "#ffffff" },
+    thinking: { bg: "#8b5cf6", fg: "#ffffff" },
+    mcp: { bg: "#7c3aed", fg: "#ffffff" },
+    context: { bg: "#06b6d4", fg: "#062b33" },
+} as const;
+
+export const PLAIN_COLORS = {
+    bg: "#000000",
+    fg: "#9ca3af",
+} as const;
+
+export const PLAIN_SEPARATOR_COLORS = {
+    bg: "#000000",
+    fg: "#6b7280",
+} as const;

package/src/footer-rendering.ts

@@ -0,0 +1,357 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { pathToFileURL } from "node:url";
+
+import {
+    ACTIVE_FOOTER_VARIANT,
+    BLOCK_COLORS,
+    BRANCH_ICON,
+    FOOTER_LAYOUT,
+    PLAIN_COLORS,
+    PLAIN_SEPARATOR_COLORS,
+} from "./constants.ts";
+import type {
+    ContextUsage,
+    FooterData,
+    FooterItem,
+    FooterKey,
+    FooterSide,
+    FooterVariant,
+    Rgb,
+    SegmentColors,
+} from "./types.ts";
+
+function sanitizeStatusText(text: string): string {
+    return text
+        .replace(/[\r\n\t]/g, " ")
+        .replace(/ +/g, " ")
+        .trim();
+}
+
+function formatTokens(count: number): string {
+    if (count < 1000) return count.toString();
+    if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
+    if (count < 1000000) return `${Math.round(count / 1000)}k`;
+    if (count < 10000000) return `${(count / 1000000).toFixed(1)}M`;
+    return `${Math.round(count / 1000000)}M`;
+}
+
+function collapseHome(path: string): string {
+    const home = process.env.HOME ?? process.env.USERPROFILE;
+    if (home !== undefined && home.length > 0 && path.startsWith(home)) {
+        return `~${path.slice(home.length)}`;
+    }
+    return path;
+}
+
+function hexToRgb(hex: string): Rgb {
+    const value = hex.replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(value)) {
+        throw new Error(`Invalid hex color: ${hex}`);
+    }
+    return [
+        parseInt(value.slice(0, 2), 16),
+        parseInt(value.slice(2, 4), 16),
+        parseInt(value.slice(4, 6), 16),
+    ];
+}
+
+function ansiColor(text: string, options: { fg?: string; bg?: string; bold?: boolean }): string {
+    const codes: string[] = [];
+
+    if (options.bold === true) codes.push("1");
+    if (options.fg !== undefined && options.fg.length > 0) {
+        const [r, g, b] = hexToRgb(options.fg);
+        codes.push(`38;2;${r};${g};${b}`);
+    }
+    if (options.bg !== undefined && options.bg.length > 0) {
+        const [r, g, b] = hexToRgb(options.bg);
+        codes.push(`48;2;${r};${g};${b}`);
+    }
+
+    if (codes.length === 0) return text;
+    return `\x1b[${codes.join(";")}m${text}\x1b[0m`;
+}
+
+function hyperlink(text: string, url: string): string {
+    if (!process.stdout.isTTY) {
+        return url;
+    }
+    return `\x1b]8;;${url}\x1b\\${text}\x1b]8;;\x1b\\`;
+}
+
+function renderColoredText(text: string, colors: SegmentColors): string {
+    return ansiColor(text, { fg: colors.fg, bg: colors.bg });
+}
+
+function renderBlockItem(item: FooterItem): string {
+    let linked = ` ${item.text} `;
+    if (item.url !== undefined && item.url.length > 0) {
+        linked = hyperlink(` ${item.text} `, item.url);
+    }
+    return renderColoredText(linked, item.colors);
+}
+
+function renderPlainItem(item: FooterItem): string {
+    let linked = item.text;
+    if (item.url !== undefined && item.url.length > 0) {
+        linked = hyperlink(item.text, item.url);
+    }
+    return renderColoredText(linked, PLAIN_COLORS);
+}
+
+function getProviderDisplayName(provider: string): string {
+    switch (provider) {
+        case "github-copilot":
+            return "copilot";
+        default:
+            return provider;
+    }
+}
+
+function getThinkingColors(level: string): SegmentColors {
+    switch (level) {
+        case "minimal":
+            return { bg: "#4338ca", fg: "#ffffff" };
+        case "low":
+            return { bg: "#0369a1", fg: "#ffffff" };
+        case "medium":
+            return { bg: "#0891b2", fg: "#062b33" };
+        case "high":
+            return { bg: "#8b5cf6", fg: "#ffffff" };
+        case "xhigh":
+            return { bg: "#dc2626", fg: "#ffffff" };
+        case "off":
+        default:
+            return { bg: "#374151", fg: "#e5e7eb" };
+    }
+}
+
+function getContextColors(percent: number | null | undefined): SegmentColors {
+    if (percent !== null && percent !== undefined) {
+        if (percent > 90) return { bg: "#dc2626", fg: "#ffffff" };
+        if (percent > 70) return { bg: "#f59e0b", fg: "#1f1300" };
+    }
+    return { bg: "#06b6d4", fg: "#062b33" };
+}
+
+function getContextText(usage: ContextUsage, fallbackWindow?: number): string {
+    const contextWindow = usage?.contextWindow ?? fallbackWindow ?? 0;
+    const contextPercent = usage?.percent;
+    if (contextPercent === null || contextPercent === undefined) {
+        return `?/${formatTokens(contextWindow)}`;
+    }
+    return `${contextPercent.toFixed(1)}%/${formatTokens(contextWindow)}`;
+}
+
+function getMcpText(ctx: ExtensionContext, footerData: FooterData): string | null {
+    const statuses = Array.from(footerData.getExtensionStatuses().values())
+        .map(sanitizeStatusText)
+        .filter((status) => status.length > 0);
+
+    const mcpStatus = statuses.find((status) => /^MCP:/i.test(status));
+    if (mcpStatus !== undefined && mcpStatus.length > 0) return mcpStatus;
+
+    const serverCount = (ctx as ExtensionContext & { mcpServers?: unknown[] }).mcpServers?.length;
+    if (typeof serverCount === "number") {
+        return `MCP: ${serverCount} servers`;
+    }
+
+    return null;
+}
+
+function getSeparator(variant: FooterVariant, side: FooterSide): string {
+    if (variant === "blocks") return "";
+    if (side === "left") return renderColoredText(" | ", PLAIN_SEPARATOR_COLORS);
+    return renderColoredText("  ", PLAIN_SEPARATOR_COLORS);
+}
+
+function renderItem(item: FooterItem, variant: FooterVariant): string {
+    if (variant === "blocks") {
+        return renderBlockItem(item);
+    }
+    return renderPlainItem(item);
+}
+
+function joinRenderedItems(rendered: string[], variant: FooterVariant, side: FooterSide): string {
+    return rendered.join(getSeparator(variant, side));
+}
+
+function buildSideVariants(
+    itemsByKey: Partial<Record<FooterKey, FooterItem>>,
+    keys: readonly FooterKey[],
+    variant: FooterVariant,
+    side: FooterSide,
+): string[] {
+    const items = keys
+        .map((key) => itemsByKey[key])
+        .filter((item): item is FooterItem => item !== undefined);
+    if (items.length === 0) {
+        return [""];
+    }
+
+    const variants: string[] = [];
+    const seen = new Set<string>();
+
+    if (side === "left") {
+        for (let count = items.length; count >= 1; count--) {
+            const rendered = joinRenderedItems(
+                items.slice(0, count).map((item) => renderItem(item, variant)),
+                variant,
+                side,
+            );
+            if (!seen.has(rendered)) {
+                seen.add(rendered);
+                variants.push(rendered);
+            }
+        }
+    } else {
+        for (let start = 0; start < items.length; start++) {
+            const rendered = joinRenderedItems(
+                items.slice(start).map((item) => renderItem(item, variant)),
+                variant,
+                side,
+            );
+            if (!seen.has(rendered)) {
+                seen.add(rendered);
+                variants.push(rendered);
+            }
+        }
+        variants.push("");
+    }
+
+    return variants;
+}
+
+function renderPadding(width: number, variant: FooterVariant): string {
+    if (width <= 0) return "";
+    const padding = " ".repeat(width);
+    if (variant === "plain") {
+        return renderColoredText(padding, PLAIN_COLORS);
+    }
+    return padding;
+}
+
+function buildFooterItems(
+    ctx: ExtensionContext,
+    footerData: FooterData,
+    thinkingLevel: string,
+): Partial<Record<FooterKey, FooterItem>> {
+    const branch = footerData.getGitBranch();
+    const pathText = collapseHome(ctx.cwd);
+    const pathUrl = pathToFileURL(ctx.cwd).href;
+    const providerId = ctx.model?.provider ?? "no-provider";
+    const providerLabel = getProviderDisplayName(providerId);
+    const modelLabel = ctx.model?.id ?? "no-model";
+    const usage = ctx.getContextUsage();
+    const contextText = getContextText(usage, ctx.model?.contextWindow);
+    const mcpText = getMcpText(ctx, footerData);
+
+    const items: Partial<Record<FooterKey, FooterItem>> = {
+        path: {
+            key: "path",
+            text: pathText,
+            url: pathUrl,
+            colors: BLOCK_COLORS.path,
+        },
+        provider: {
+            key: "provider",
+            text: providerLabel,
+            colors: BLOCK_COLORS.provider,
+        },
+        model: {
+            key: "model",
+            text: modelLabel,
+            colors: BLOCK_COLORS.model,
+        },
+        thinking: {
+            key: "thinking",
+            text: thinkingLevel,
+            colors: getThinkingColors(thinkingLevel),
+        },
+        context: {
+            key: "context",
+            text: contextText,
+            colors: getContextColors(usage?.percent),
+        },
+    };
+
+    if (branch !== null && branch.length > 0) {
+        items.branch = {
+            key: "branch",
+            text: `${BRANCH_ICON} ${branch}`,
+            colors: BLOCK_COLORS.branch,
+        };
+    }
+
+    if (mcpText !== null && mcpText.length > 0) {
+        items.mcp = {
+            key: "mcp",
+            text: mcpText,
+            colors: BLOCK_COLORS.mcp,
+        };
+    }
+
+    return items;
+}
+
+export function createFooterComponent(
+    ctx: ExtensionContext,
+    footerData: FooterData,
+    getThinkingLevel: () => string,
+    requestRender: () => void,
+) {
+    const unsubscribe = footerData.onBranchChange(() => requestRender());
+
+    return {
+        dispose: unsubscribe,
+        invalidate() {},
+        render(width: number): string[] {
+            // Keep one terminal cell unused as a guard against ambiguous-width glyphs
+            // (notably Nerd Font icons like the branch icon) and OSC/ANSI width
+            // edge-cases. If the terminal renders one of those glyphs wider than
+            // pi-tui's visibleWidth() calculation, a full-width footer can soft-wrap
+            // into an apparent blank line and make the bottom chrome jump.
+            const renderWidth = Math.max(1, width - 1);
+            const variant: FooterVariant = ACTIVE_FOOTER_VARIANT;
+            const itemsByKey = buildFooterItems(ctx, footerData, getThinkingLevel());
+            const leftVariants = buildSideVariants(itemsByKey, FOOTER_LAYOUT.left, variant, "left");
+            const rightVariants = buildSideVariants(
+                itemsByKey,
+                FOOTER_LAYOUT.right,
+                variant,
+                "right",
+            );
+
+            for (const left of leftVariants) {
+                for (const right of rightVariants) {
+                    const rightWidth = visibleWidth(right);
+                    let gap = 0;
+                    if (right.length > 0) {
+                        gap = 1;
+                    }
+                    const leftWidth = visibleWidth(left);
+
+                    if (leftWidth + gap + rightWidth > renderWidth) {
+                        continue;
+                    }
+
+                    const paddingWidth = Math.max(0, renderWidth - leftWidth - rightWidth - 2);
+                    const padding = renderPadding(paddingWidth, variant);
+                    if (right.length > 0) {
+                        return [` ${left}${padding}${right} `];
+                    }
+                    return [` ${left}${padding} `];
+                }
+            }
+
+            const fallbackRight = rightVariants.find((value) => value.length > 0) ?? "";
+            if (fallbackRight.length > 0) {
+                return [truncateToWidth(fallbackRight, renderWidth, "")];
+            }
+
+            const fallbackLeft = leftVariants.find((value) => value.length > 0) ?? "";
+            return [truncateToWidth(fallbackLeft, renderWidth, "")];
+        },
+    };
+}

package/src/index.ts

@@ -0,0 +1,103 @@
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+import { createFooterComponent } from "./footer-rendering.ts";
+import { formatDuration, setWorkedForWidget } from "./worked-for-widget.ts";
+
+export default function uiEnhancements(pi: ExtensionAPI) {
+    let agentStartedAt: number | undefined;
+    let messageStart: number | undefined;
+    let streamStart: number | undefined;
+    let estimatedStreamedTokens = 0;
+    let totalOutputTokens = 0;
+    let totalStreamMs = 0;
+
+    const installFooter = (ctx: ExtensionContext) => {
+        ctx.ui.setFooter((tui, _theme, footerData) =>
+            createFooterComponent(
+                ctx,
+                footerData,
+                () => pi.getThinkingLevel(),
+                () => tui.requestRender(),
+            ),
+        );
+    };
+
+    pi.on("session_start", async (_event, ctx) => {
+        installFooter(ctx);
+        setWorkedForWidget(ctx, undefined);
+    });
+
+    pi.on("agent_start", async (_event, ctx) => {
+        agentStartedAt = Date.now();
+        messageStart = undefined;
+        streamStart = undefined;
+        estimatedStreamedTokens = 0;
+        totalOutputTokens = 0;
+        totalStreamMs = 0;
+        setWorkedForWidget(ctx, undefined);
+    });
+
+    pi.on("message_start", async (event) => {
+        if (event.message.role !== "assistant") return;
+        messageStart = Date.now();
+        streamStart = undefined;
+        estimatedStreamedTokens = 0;
+    });
+
+    pi.on("message_update", async (event) => {
+        if (event.message.role !== "assistant") return;
+
+        const streamEvent = event.assistantMessageEvent;
+        const isOutputDelta =
+            streamEvent.type === "text_delta" ||
+            streamEvent.type === "thinking_delta" ||
+            streamEvent.type === "toolcall_delta";
+        if (!isOutputDelta) return;
+
+        streamStart ??= Date.now();
+        estimatedStreamedTokens += Math.max(0, streamEvent.delta.length / 4);
+    });
+
+    pi.on("message_end", async (event) => {
+        if (event.message.role !== "assistant") return;
+
+        const outputTokens = event.message.usage.output;
+        const timingStart = streamStart ?? messageStart;
+        if (timingStart === undefined || outputTokens <= 0) {
+            messageStart = undefined;
+            streamStart = undefined;
+            estimatedStreamedTokens = 0;
+            return;
+        }
+
+        totalOutputTokens += outputTokens;
+        totalStreamMs += Math.max(0, Date.now() - timingStart);
+
+        messageStart = undefined;
+        streamStart = undefined;
+        estimatedStreamedTokens = 0;
+    });
+
+    pi.on("agent_end", async (_event, ctx) => {
+        if (agentStartedAt === undefined) return;
+        const duration = Date.now() - agentStartedAt;
+        const elapsedSeconds = totalStreamMs / 1000;
+        let tokensPerSecond: number | undefined;
+        if (totalOutputTokens > 0 && elapsedSeconds > 0) {
+            tokensPerSecond = Math.round(totalOutputTokens / elapsedSeconds);
+        }
+        agentStartedAt = undefined;
+        setWorkedForWidget(ctx, formatDuration(duration), tokensPerSecond);
+    });
+
+    pi.on("session_shutdown", async (_event, ctx) => {
+        agentStartedAt = undefined;
+        messageStart = undefined;
+        streamStart = undefined;
+        estimatedStreamedTokens = 0;
+        totalOutputTokens = 0;
+        totalStreamMs = 0;
+        ctx.ui.setFooter(undefined);
+        setWorkedForWidget(ctx, undefined);
+    });
+}

package/src/types.ts

@@ -0,0 +1,47 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+
+export type PauseInterval = {
+    start: number;
+    end?: number;
+};
+
+export type LoaderPauseApi = {
+    pause(): void;
+    resume(): void;
+    isPaused(): boolean;
+};
+
+export type LoaderPauseGlobal = typeof globalThis & {
+    __piLoaderPauseIntervals__?: PauseInterval[];
+    __piLoaderPauseDepth__?: number;
+};
+
+export type PatchedLoader = {
+    message?: string;
+    currentFrame?: number;
+    dotsIntervalId?: ReturnType<typeof setInterval> | null;
+    timeIntervalId?: ReturnType<typeof setInterval> | null;
+    ui?: { requestRender(): void } | null;
+    messageColorFn?: (text: string) => string;
+    setText(text: string): void;
+};
+
+export type FooterVariant = "blocks" | "plain";
+export type FooterSide = "left" | "right";
+export type FooterKey = "path" | "branch" | "provider" | "model" | "thinking" | "mcp" | "context";
+export type Rgb = [number, number, number];
+export type SegmentColors = { bg: string; fg: string };
+export type ContextUsage = ReturnType<ExtensionContext["getContextUsage"]>;
+
+export type FooterData = {
+    getGitBranch(): string | null;
+    getExtensionStatuses(): ReadonlyMap<string, string>;
+    onBranchChange(callback: () => void): () => void;
+};
+
+export type FooterItem = {
+    key: FooterKey;
+    text: string;
+    url?: string;
+    colors: SegmentColors;
+};

package/src/worked-for-widget.ts

@@ -0,0 +1,43 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+
+import { WIDGET_KEY } from "./constants.ts";
+
+export function formatDuration(ms: number): string {
+    const wholeSeconds = Math.max(0, Math.round(ms / 1000));
+    if (wholeSeconds < 60) return `${wholeSeconds}s`;
+
+    const minutes = Math.floor(wholeSeconds / 60);
+    const remainingSeconds = wholeSeconds % 60;
+    if (minutes < 60) return `${minutes}m ${remainingSeconds.toString().padStart(2, "0")}s`;
+
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    return `${hours}h ${remainingMinutes.toString().padStart(2, "0")}m`;
+}
+
+export function setWorkedForWidget(
+    ctx: ExtensionContext,
+    workedForText?: string,
+    tokensPerSecond?: number,
+): void {
+    if (ctx.hasUI !== true) return;
+
+    if (workedForText === undefined || workedForText.length === 0) {
+        ctx.ui.setWidget(WIDGET_KEY, undefined);
+        return;
+    }
+
+    ctx.ui.setWidget(WIDGET_KEY, (_tui, theme) => ({
+        render(width: number): string[] {
+            if (width <= 0) return [""];
+            let text = `Worked for ${workedForText}.`;
+            if (tokensPerSecond !== undefined && tokensPerSecond > 0) {
+                text = `${text} [${tokensPerSecond} tok/s]`;
+            }
+            const truncated = truncateToWidth(text, Math.max(0, width - 1), "");
+            return [theme.fg("dim", ` ${truncated}`)];
+        },
+        invalidate() {},
+    }));
+}