@zigai/pi-footer 0.1.6 → 0.1.8

package/README.md

@@ -1,10 +1,14 @@
 # Pi Footer
 
+[![npm version](https://img.shields.io/npm/v/@zigai/pi-footer.svg?color=blue)](https://www.npmjs.com/package/@zigai/pi-footer)
+[![npm downloads](https://img.shields.io/npm/dm/@zigai/pi-footer.svg)](https://www.npmjs.com/package/@zigai/pi-footer)
+[![license](https://img.shields.io/npm/l/@zigai/pi-footer.svg)](../../LICENSE)
+
 This Pi extension replaces Pi's footer with a single compact plain-text status line.
 
 ![Pi Footer screenshot](assets/footer.png)
 
-The footer keeps key session information visible without taking much space:
+Footer contents:
 
 - current working directory
 - git branch
@@ -12,10 +16,13 @@ The footer keeps key session information visible without taking much space:
 - thinking level
 - MCP status
 - context usage
-- a short post-run summary with total agent time and output token speed
 
 ## Install
 
 ```sh
 pi install npm:@zigai/pi-footer
 ```
+
+## License
+
+MIT

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zigai/pi-footer",
-  "version": "0.1.6",
-  "description": "Pi package for a custom footer and worked-for token speed widget.",
+  "version": "0.1.8",
+  "description": "Pi package that replaces Pi's footer with a compact status line.",
   "keywords": [
     "footer",
     "pi",

package/src/constants.ts

@@ -1,5 +1,3 @@
-export const WIDGET_KEY = "worked-for-widget";
-
 export const ACTIVE_FOOTER_VARIANT = "plain" as const;
 export const BRANCH_ICON = "";
 

package/src/footer-component.ts

@@ -0,0 +1,41 @@
+export const FOOTER_COMPONENT_MARKER = Symbol.for("zigai.pi-footer.component");
+export const FOOTER_COMPONENT_KIND = Symbol.for("zigai.pi-footer.component-kind");
+
+export type FooterComponentKind = "live" | "bridge";
+
+export type MarkedFooterComponent = {
+    [FOOTER_COMPONENT_MARKER]: true;
+    [FOOTER_COMPONENT_KIND]: FooterComponentKind;
+};
+
+function isObject(value: unknown): value is object {
+    return typeof value === "object" && value !== null;
+}
+
+export function markFooterComponent<T extends object>(
+    component: T,
+    kind: FooterComponentKind,
+): T & MarkedFooterComponent {
+    Object.defineProperty(component, FOOTER_COMPONENT_MARKER, {
+        configurable: false,
+        enumerable: false,
+        value: true,
+    });
+    Object.defineProperty(component, FOOTER_COMPONENT_KIND, {
+        configurable: true,
+        enumerable: false,
+        value: kind,
+    });
+    return component as T & MarkedFooterComponent;
+}
+
+export function getFooterComponentKind(value: unknown): FooterComponentKind | undefined {
+    if (!isObject(value)) return undefined;
+
+    const candidate = value as Partial<MarkedFooterComponent>;
+    if (candidate[FOOTER_COMPONENT_MARKER] !== true) return undefined;
+
+    const kind = candidate[FOOTER_COMPONENT_KIND];
+    if (kind === "live" || kind === "bridge") return kind;
+    return undefined;
+}

package/src/footer-rendering.ts

@@ -1,4 +1,3 @@
-import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 
 import {
@@ -11,6 +10,7 @@ import {
 } from "./constants.ts";
 import type {
     ContextUsage,
+    FooterContext,
     FooterData,
     FooterItem,
     FooterKey,
@@ -128,7 +128,7 @@ function getContextText(usage: ContextUsage, fallbackWindow?: number): string {
     return `${contextPercent.toFixed(1)}%/${formatTokens(contextWindow)}`;
 }
 
-function getMcpText(ctx: ExtensionContext, footerData: FooterData): string | null {
+function getMcpText(ctx: FooterContext, footerData: FooterData): string | null {
     const statuses = Array.from(footerData.getExtensionStatuses().values())
         .map(sanitizeStatusText)
         .filter((status) => status.length > 0);
@@ -136,7 +136,7 @@ function getMcpText(ctx: ExtensionContext, footerData: FooterData): string | nul
     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;
+    const serverCount = ctx.mcpServers?.length;
     if (typeof serverCount === "number") {
         return `MCP: ${serverCount} servers`;
     }
@@ -217,7 +217,7 @@ function renderPadding(width: number, variant: FooterVariant): string {
 }
 
 function buildFooterItems(
-    ctx: ExtensionContext,
+    ctx: FooterContext,
     footerData: FooterData,
     thinkingLevel: string,
 ): Partial<Record<FooterKey, FooterItem>> {
@@ -278,7 +278,7 @@ function buildFooterItems(
 }
 
 export function createFooterComponent(
-    ctx: ExtensionContext,
+    ctx: FooterContext,
     footerData: FooterData,
     getThinkingLevel: () => string,
     requestRender: () => void,

package/src/footer-transition.ts

@@ -0,0 +1,189 @@
+import {
+    InteractiveMode,
+    type ExtensionContext,
+    type SessionShutdownEvent,
+} from "@earendil-works/pi-coding-agent";
+
+import { markFooterComponent, getFooterComponentKind } from "./footer-component.ts";
+import { createFooterComponent } from "./footer-rendering.ts";
+import type { ContextUsage, FooterContext, FooterData, FooterModel } from "./types.ts";
+
+const RESET_PATCH_MARKER = Symbol.for("zigai.pi-footer.reset-extension-ui-patch");
+const TRANSITION_STATE_KEY = "__zigaiPiFooterTransitionState__";
+const BRIDGE_FOOTER_TTL_MS = 15_000;
+
+type FooterComponent = ReturnType<typeof createFooterComponent>;
+type FooterFactory = (
+    tui: { requestRender(): void },
+    theme: unknown,
+    footerData: FooterData,
+) => FooterComponent;
+
+type FooterResetHost = {
+    customFooter?: unknown;
+    resetExtensionUI(): void;
+    setExtensionFooter(factory: FooterFactory | undefined): void;
+};
+
+type PatchableInteractiveModePrototype = {
+    customFooter?: unknown;
+    resetExtensionUI?: (this: FooterResetHost) => void;
+    setExtensionFooter?: (this: FooterResetHost, factory: FooterFactory | undefined) => void;
+    [RESET_PATCH_MARKER]?: true;
+};
+
+type FooterSnapshot = {
+    context: FooterContext;
+    thinkingLevel: string;
+};
+
+type MaybeMcpContext = ExtensionContext & {
+    mcpServers?: unknown[];
+};
+
+type FooterTransitionState = {
+    latestSnapshot?: FooterSnapshot;
+    pendingShutdownReason?: SessionShutdownEvent["reason"];
+    liveInstallGeneration: number;
+};
+
+type FooterTransitionGlobal = typeof globalThis & {
+    [TRANSITION_STATE_KEY]?: FooterTransitionState;
+};
+
+function getTransitionState(): FooterTransitionState {
+    const globalState = globalThis as FooterTransitionGlobal;
+    let state = globalState[TRANSITION_STATE_KEY];
+    if (state === undefined) {
+        state = { liveInstallGeneration: 0 };
+        globalState[TRANSITION_STATE_KEY] = state;
+    }
+    return state;
+}
+
+function cloneContextUsage(usage: ContextUsage): ContextUsage {
+    if (usage === undefined) return undefined;
+    return { ...usage };
+}
+
+function cloneModel(model: ExtensionContext["model"]): FooterModel | undefined {
+    if (model === undefined) return undefined;
+
+    return {
+        provider: model.provider,
+        id: model.id,
+        contextWindow: model.contextWindow,
+    };
+}
+
+function cloneMcpServers(ctx: ExtensionContext): unknown[] | undefined {
+    const servers = (ctx as MaybeMcpContext).mcpServers;
+    if (!Array.isArray(servers)) return undefined;
+
+    return Array.from<unknown>({ length: servers.length });
+}
+
+function createFooterSnapshot(ctx: ExtensionContext, thinkingLevel: string): FooterSnapshot {
+    const usage = cloneContextUsage(ctx.getContextUsage());
+
+    return {
+        context: {
+            cwd: ctx.cwd,
+            model: cloneModel(ctx.model),
+            mcpServers: cloneMcpServers(ctx),
+            getContextUsage() {
+                return usage;
+            },
+        },
+        thinkingLevel,
+    };
+}
+
+function shouldBridgeFooter(kind: string | undefined, state: FooterTransitionState): boolean {
+    if (kind !== "live" && kind !== "bridge") return false;
+    if (state.latestSnapshot === undefined) return false;
+    if (state.pendingShutdownReason === undefined) return false;
+    if (state.pendingShutdownReason === "quit") return false;
+    return true;
+}
+
+function installBridgeFooter(host: FooterResetHost, snapshot: FooterSnapshot): void {
+    const generationAtInstall = getTransitionState().liveInstallGeneration;
+
+    host.setExtensionFooter((tui, _theme, footerData) => {
+        const component = createFooterComponent(
+            snapshot.context,
+            footerData,
+            () => snapshot.thinkingLevel,
+            () => tui.requestRender(),
+        );
+        return markFooterComponent(component, "bridge");
+    });
+
+    const timeout = setTimeout(() => {
+        const state = getTransitionState();
+        if (state.liveInstallGeneration !== generationAtInstall) return;
+        if (getFooterComponentKind(host.customFooter) !== "bridge") return;
+        host.setExtensionFooter(undefined);
+    }, BRIDGE_FOOTER_TTL_MS);
+    timeout.unref?.();
+}
+
+export function patchFooterReset(): void {
+    // Pi resets extension-owned UI between session replacements before the
+    // replacement session has emitted session_start. Reinstall a snapshot-backed
+    // bridge footer in that same reset call so the built-in footer never paints
+    // during the handoff.
+    const prototype = InteractiveMode.prototype as unknown as PatchableInteractiveModePrototype;
+    if (prototype[RESET_PATCH_MARKER] === true) return;
+
+    const originalReset = prototype.resetExtensionUI;
+    const setExtensionFooter = prototype.setExtensionFooter;
+    if (typeof originalReset !== "function") return;
+    if (typeof setExtensionFooter !== "function") return;
+
+    prototype.resetExtensionUI = function patchedFooterReset(this: FooterResetHost): void {
+        const footerKind = getFooterComponentKind(this.customFooter);
+        const state = getTransitionState();
+        const snapshot = state.latestSnapshot;
+        const bridgeFooter = shouldBridgeFooter(footerKind, state);
+
+        originalReset.call(this);
+        state.pendingShutdownReason = undefined;
+
+        if (!bridgeFooter || snapshot === undefined) return;
+        installBridgeFooter(this, snapshot);
+    };
+
+    prototype[RESET_PATCH_MARKER] = true;
+}
+
+export function installLiveFooter(ctx: ExtensionContext, getThinkingLevel: () => string): void {
+    ctx.ui.setFooter((tui, _theme, footerData) => {
+        const component = createFooterComponent(ctx, footerData, getThinkingLevel, () =>
+            tui.requestRender(),
+        );
+        return markFooterComponent(component, "live");
+    });
+
+    const state = getTransitionState();
+    state.latestSnapshot = createFooterSnapshot(ctx, getThinkingLevel());
+    state.pendingShutdownReason = undefined;
+    state.liveInstallGeneration += 1;
+}
+
+export function rememberFooterForTransition(
+    ctx: ExtensionContext,
+    reason: SessionShutdownEvent["reason"],
+    thinkingLevel: string,
+): void {
+    const state = getTransitionState();
+    state.pendingShutdownReason = reason;
+
+    if (reason === "quit") {
+        state.latestSnapshot = undefined;
+        return;
+    }
+
+    state.latestSnapshot = createFooterSnapshot(ctx, thinkingLevel);
+}

package/src/index.ts

@@ -1,103 +1,25 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 
-import { createFooterComponent } from "./footer-rendering.ts";
-import { formatDuration, setWorkedForWidget } from "./worked-for-widget.ts";
+import {
+    installLiveFooter,
+    patchFooterReset,
+    rememberFooterForTransition,
+} from "./footer-transition.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;
+    patchFooterReset();
+
+    const getThinkingLevel = () => pi.getThinkingLevel();
 
     const installFooter = (ctx: ExtensionContext) => {
-        ctx.ui.setFooter((tui, _theme, footerData) =>
-            createFooterComponent(
-                ctx,
-                footerData,
-                () => pi.getThinkingLevel(),
-                () => tui.requestRender(),
-            ),
-        );
+        installLiveFooter(ctx, getThinkingLevel);
     };
 
     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);
+    pi.on("session_shutdown", async (event, ctx) => {
+        rememberFooterForTransition(ctx, event.reason, getThinkingLevel());
     });
 }

package/src/types.ts

@@ -32,6 +32,17 @@ export type FooterKey = "path" | "branch" | "provider" | "model" | "thinking" |
 export type Rgb = [number, number, number];
 export type SegmentColors = { bg: string; fg: string };
 export type ContextUsage = ReturnType<ExtensionContext["getContextUsage"]>;
+export type FooterModel = {
+    provider: string;
+    id: string;
+    contextWindow?: number;
+};
+export type FooterContext = {
+    cwd: string;
+    model?: FooterModel;
+    mcpServers?: unknown[];
+    getContextUsage(): ContextUsage;
+};
 
 export type FooterData = {
     getGitBranch(): string | null;

package/src/worked-for-widget.ts

@@ -1,43 +0,0 @@
-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() {},
-    }));
-}