pi-ui-extension 1.1.0

package/extensions/ctx/panel.test.ts

@@ -0,0 +1,103 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { visibleWidth, ScrollView } from "@earendil-works/pi-tui";
+import { renderLayoutFrame } from "@earendil-works/pi-tui/dist/layout.js";
+import { ContextPanel } from "./panel.ts";
+import { estimateContext } from "./data.ts";
+
+for (const width of [18, 30, 50]) test(`composition is always visible below a separator at width ${width}`, () => {
+ const panel = new ContextPanel({fg:(_c:string,s:string)=>s} as any, {
+  getDesiredWidth:()=>width, getUsage:()=>({percent:25,contextWindow:100000} as any),
+  getCacheHitRate:()=>42,
+  getModel:()=>"model", getThinkingLevel:()=>"off",
+  getEstimate:()=>estimateContext([{role:"toolResult",toolName:"read",toolCallId:"1",content:[{type:"text",text:"x".repeat(400000)}]}]),
+ });
+ const lines=panel.render(width);
+ assert.ok(lines.every(line=>visibleWidth(line)<=width));
+ assert.ok(lines[2].includes("25%/100K"));
+ if (width >= 30) assert.ok(lines[2].includes("Catch:42%"));
+ const separator=lines.findIndex(line=>line===`│ ${"─".repeat(width-4)} │`);
+ if (width >= 30) assert.ok(separator>0);
+ for(const label of ["System", "Tools", "Messages", "Tool Results", "Summary", "Other", "Images"])
+  assert.ok(lines.findIndex(line=>line.includes(label))>separator,label);
+ assert.ok(lines.some(line=>line.includes("~100K")));
+ assert.doesNotMatch(lines.join("\n"), /Composition|▸|▾|Top 3/);
+ assert.deepEqual(panel.render(width),lines);
+ for(const narrow of [1,2,4,12])assert.ok(panel.render(narrow).every(line=>visibleWidth(line)<=narrow));
+ const scroll=new ScrollView(panel,{follow:"none"});
+ const frame=renderLayoutFrame(scroll,width,7,()=>{});
+ assert.equal(frame.lines.length,7);
+ assert.ok(lines.length>frame.lines.length);
+});
+
+test("run delta renders on the bar and after the window value", () => {
+ const theme={fg:(_c:string,s:string)=>s} as any;
+ const build=(delta:number|undefined)=>new ContextPanel(theme,{
+  getDesiredWidth:()=>50,getUsage:()=>({percent:25,contextWindow:200000} as any),
+  getCacheHitRate:()=>42,getModel:()=>"model",getThinkingLevel:()=>"off",
+  getDelta:()=>delta,
+  getEstimate:()=>estimateContext([{role:"user",content:"abcd"}]),
+ });
+ const lines=build(12000).render(50);
+ assert.ok(lines[2].includes("25%/200K +12K"));
+ assert.ok(lines[2].includes("Catch:42%"));
+ // The accent segment is the last slice of the already-filled bar, so the bar length never grows.
+ assert.equal(lines[3],`│ ${"█".repeat(12)}${"░".repeat(34)} │`);
+ assert.equal(build(undefined).render(50)[3],lines[3]);
+ assert.ok(build(-210000).render(50)[2].includes("25%/200K −210K"));
+ assert.equal(build(-210000).render(50)[3],lines[3]);
+ const colored=new ContextPanel({fg:(c:string,s:string)=>`[${c}]${s}`} as any,{
+  getDesiredWidth:()=>50,getUsage:()=>({percent:25,contextWindow:200000} as any),
+  getDelta:()=>12000,getModel:()=>"model",getThinkingLevel:()=>"off",
+ });
+ const coloredLines=colored.render(50);
+ assert.ok(coloredLines[3].includes("[accent]███"));
+ assert.ok(coloredLines[3].includes("[success]█████████"));
+ assert.ok(coloredLines[2].includes("[accent] +12K"));
+ assert.ok(!build(undefined).render(50)[2].includes("+"));
+ const narrow=build(12000).render(18);
+ assert.ok(narrow[2].includes("+12K"));
+ assert.ok(narrow.every(line=>visibleWidth(line)<=18));
+});
+test("missing snapshot is visible without interaction",()=>{
+ const panel=new ContextPanel({fg:(_c:string,s:string)=>s} as any,{
+  getDesiredWidth:()=>50,getUsage:()=>undefined,getModel:()=>"",getThinkingLevel:()=>"",
+ });
+ assert.match(panel.render(50).join("\n"),/No snapshot available/);
+ assert.match(panel.render(50).join("\n"),/not observed/);
+});
+
+test("activity rows render below the composition and bar", () => {
+ const activity={phase:"running",startedAt:1000,averagePerformance:{ttftMs:1000,tokensPerSecond:40},
+  turns:[{number:1,startedAt:1000,durationMs:2000,performance:{ttftMs:1200,tokensPerSecond:30},tools:[]},
+         {number:2,startedAt:3000,tools:[]}],
+  activeTools:[],recentTools:[],completedCount:0,failedCount:0} as any;
+ const panel=new ContextPanel({fg:(_c:string,s:string)=>s} as any,{
+  getDesiredWidth:()=>50,getUsage:()=>({percent:25,contextWindow:200000} as any),getCacheHitRate:()=>42,
+  getModel:()=>"model",getThinkingLevel:()=>"off",getActivity:()=>activity,now:()=>4000,
+  getEstimate:()=>estimateContext([{role:"user",content:"abcd"}]),
+ });
+ const lines=panel.render(50);
+ const output=lines.join("\n");
+ assert.doesNotMatch(output,/ACTIVITY/);
+ assert.match(output,/2 turns · 3s · AVG TTFT 1\.0s · AVG TPS 40\.0/);
+ assert.match(output,/TTFT 1\.2s\[fast\]/);
+ const activityTop=lines.findIndex(line=>line.includes("2 turns"));
+ assert.ok(lines.findIndex(line=>line.includes("Images"))<activityTop);
+ assert.ok(activityTop>lines.findIndex(line=>line.includes("25%/200K")));
+ assert.ok(lines.every(line=>visibleWidth(line)<=50));
+ const settled=new ContextPanel({fg:(_c:string,s:string)=>s} as any,{
+  getDesiredWidth:()=>18,getUsage:()=>({percent:25,contextWindow:200000} as any),
+  getModel:()=>"model",getThinkingLevel:()=>"off",now:()=>4000,
+  getActivity:()=>({...activity,phase:"settled",durationMs:3000} as any),
+ });
+ const narrow=settled.render(18);
+ assert.match(narrow.join("\n"),/done 3s/);
+ assert.ok(narrow.every(line=>visibleWidth(line)<=18));
+ const idle=new ContextPanel({fg:(_c:string,s:string)=>s} as any,{
+  getDesiredWidth:()=>50,getUsage:()=>({percent:25,contextWindow:200000} as any),
+  getModel:()=>"model",getThinkingLevel:()=>"off",now:()=>4000,
+  getActivity:()=>({...activity,phase:"idle",turns:[],startedAt:undefined} as any),
+ });
+ assert.match(idle.render(50).join("\n"),/Ready/);
+});

package/extensions/ctx/panel.ts

@@ -0,0 +1,185 @@
+import type { ContextUsage, Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
+import { panelBottom, panelContent, panelTop, type PanelColor } from "../sidebar/panel.ts";
+
+import type { ContextEstimate } from "./data.ts";
+import {
+  formatDuration,
+  formatTps,
+  formatTtft,
+  type RunActivitySnapshot,
+} from "./activity.ts";
+
+export type ContextPanelOptions = {
+  readonly getEstimate?: () => ContextEstimate;
+  readonly getDelta?: () => number | undefined;
+  readonly getActivity?: () => RunActivitySnapshot | undefined;
+  readonly now?: () => number;
+  readonly getCacheHitRate?: () => number | undefined;
+  readonly getUsage: () => ContextUsage | undefined;
+  readonly getModel: () => string;
+  readonly getThinkingLevel: () => string;
+  readonly getDesiredWidth: () => number;
+};
+
+function gradientText(text: string): string {
+  if (text.length === 0) return "";
+  const start = [80, 200, 255];
+  const end = [255, 80, 180];
+  const last = Math.max(1, text.length - 1);
+  return [...text].map((character, index) => {
+    const ratio = index / last;
+    const red = Math.round(start[0] + (end[0] - start[0]) * ratio);
+    const green = Math.round(start[1] + (end[1] - start[1]) * ratio);
+    const blue = Math.round(start[2] + (end[2] - start[2]) * ratio);
+    return `\x1b[38;2;${red};${green};${blue}m${character}`;
+  }).join("") + "\x1b[39m";
+}
+
+function formatContextWindow(contextWindow: number | undefined): string {
+  if (!contextWindow) return "?";
+
+  const scale = contextWindow >= 1_000_000 ? 1_000_000 : contextWindow >= 1_000 ? 1_000 : 1;
+  const suffix = scale === 1_000_000 ? "M" : scale === 1_000 ? "K" : "";
+  const value = contextWindow / scale;
+  const amount = value.toFixed(value >= 10 ? 0 : 1).replace(/\.0$/, "");
+  return `${amount}${suffix}`;
+}
+
+/** Activity rows moved into CTX: status/duration, AVERAGE TPS, latest TTFT. */
+function activityRows(
+  theme: Theme,
+  getActivity: () => RunActivitySnapshot | undefined,
+  now: () => number,
+  contentWidth: number,
+): string[] {
+  const activity = getActivity();
+  if (!activity) return [];
+  const at = now();
+  const duration = activity.phase === "settled"
+    ? formatDuration(activity.durationMs ?? 0)
+    : formatDuration(Math.max(0, at - (activity.startedAt ?? at)));
+  const status = activity.phase === "idle"
+    ? "Ready"
+    : `${activity.turns.length} turn${activity.turns.length === 1 ? "" : "s"} · ${activity.phase === "running" ? duration : `done ${duration}`}`;
+  const plain = (value: string): string => value.replace(/\[[^\]]+\]/g, "");
+  const average = `AVG TTFT ${plain(formatTtft(activity.averagePerformance?.ttftMs))} · AVG TPS ${plain(formatTps(activity.averagePerformance?.tokensPerSecond))}`;
+  const compact = `${activity.turns.length}T ${activity.phase === "settled" ? "done " : ""}${duration}`;
+  const header = [`${status} · ${average}`, status, compact, average]
+    .find((candidate) => visibleWidth(candidate) <= contentWidth) ?? compact;
+  const statusColor: PanelColor = activity.phase === "running"
+    ? "warning"
+    : activity.failedCount > 0 ? "error" : "success";
+  const performances = activity.turns.map((turn) => turn.durationMs === undefined ? activity.performance : turn.performance);
+  let ttft: number | undefined;
+  for (let index = performances.length - 1; index >= 0; index--) {
+    const value = performances[index]?.ttftMs;
+    if (value !== undefined && Number.isFinite(value)) { ttft = value; break; }
+  }
+  const pending = activity.phase === "running" && activity.turns.length > 0 && ttft === undefined;
+  return [
+    panelContent(theme, "─".repeat(contentWidth), "dim", contentWidth),
+    panelContent(theme, header, statusColor, contentWidth),
+    // Latest observed TTFT, not the run average: AVG TTFT stays in the header.
+    panelContent(theme, `TTFT ${formatTtft(ttft)}${pending ? " · pending" : ""}`, "accent", contentWidth),
+  ];
+}
+
+export class ContextPanel implements Component {
+  constructor(
+    private readonly theme: Theme,
+    private readonly options: ContextPanelOptions,
+  ) {}
+
+  render(width: number): string[] {
+    const renderWidth = Math.max(1, Math.min(width, this.options.getDesiredWidth()));
+    const contentWidth = Math.max(1, renderWidth - 4);
+    const usage = this.options.getUsage();
+    const percent = usage?.percent;
+    const normalizedPercent = percent === null || percent === undefined
+      ? undefined
+      : Math.max(0, Math.min(100, percent));
+    const color: PanelColor = normalizedPercent === undefined
+      ? "dim"
+      : normalizedPercent >= 85
+        ? "error"
+        : normalizedPercent >= 60
+          ? "warning"
+          : "success";
+    const filledWidth = normalizedPercent === undefined
+      ? 0
+      : Math.round(contentWidth * normalizedPercent / 100);
+    const contextWindow = formatContextWindow(usage?.contextWindow);
+    const windowTokens = usage?.contextWindow;
+    const rawDelta = this.options.getDelta?.();
+    const delta = typeof rawDelta === "number" && Number.isFinite(rawDelta) && rawDelta !== 0 ? rawDelta : undefined;
+    const baseSummary = `${normalizedPercent === undefined ? "?" : `${Math.round(normalizedPercent)}%`}/${contextWindow}`;
+    const deltaSuffix = delta === undefined ? "" : ` ${delta > 0 ? "+" : "−"}${formatContextWindow(Math.abs(delta))}`;
+    const deltaColor: PanelColor = delta !== undefined && delta < 0 ? "warning" : "accent";
+    const summary = `${baseSummary}${deltaSuffix}`;
+    const cacheHitRate = this.options.getCacheHitRate?.();
+    const cacheSummary = cacheHitRate === undefined
+      ? "Catch:?"
+      : `Catch:${Math.round(Math.max(0, Math.min(100, cacheHitRate)))}%`;
+    const summaryText = `${this.theme.fg(color, baseSummary)}${deltaSuffix ? this.theme.fg(deltaColor, deltaSuffix) : ""}`;
+    const summaryRow = visibleWidth(summary) + visibleWidth(cacheSummary) + 1 <= contentWidth
+      ? `${summaryText}${" ".repeat(contentWidth - visibleWidth(summary) - visibleWidth(cacheSummary))}${this.theme.fg(color, cacheSummary)}`
+      : summaryText;
+    const deltaWidth = delta === undefined || delta <= 0 || filledWidth === 0 ||
+      typeof windowTokens !== "number" || !Number.isFinite(windowTokens) || windowTokens <= 0
+      ? 0
+      : Math.min(filledWidth, Math.max(1, Math.round(contentWidth * delta / windowTokens)));
+    const model = this.options.getModel() || "no-model";
+    const thinking = this.options.getThinkingLevel() || "off";
+    const modelLabel = `${this.theme.fg("accent", model)}${this.theme.fg("dim", "｜")}${gradientText(thinking)}`;
+
+    const rows: string[] = [];
+    const row = (text: string): void => { rows.push(panelContent(this.theme, text, "dim", contentWidth)); };
+    const estimate = this.options.getEstimate?.();
+    const amount = (tokens: number | undefined, percent: number | undefined): string =>
+      tokens === undefined ? "unknown" : `~${tokens === 0 ? "0" : formatContextWindow(tokens)} ${percent === undefined ? "?" : percent.toFixed(1)}%`;
+    const alignedRow = (label: string, value: string, labelColor: PanelColor = "dim", valueColor: PanelColor = "dim"): void => {
+      const gap = contentWidth - visibleWidth(label) - visibleWidth(value) - 1;
+      if (gap >= 1) {
+        row(`${this.theme.fg(labelColor, label)}${" ".repeat(gap)}${this.theme.fg(valueColor, value)}`);
+      } else {
+        row(this.theme.fg(labelColor, truncateToWidth(label, contentWidth, "…")));
+        row(this.theme.fg(valueColor, value));
+      }
+    };
+    const estimateRow = (label: string, tokens: number | undefined, percent: number | undefined): void => {
+      alignedRow(`${label}:`, amount(tokens, percent));
+    };
+    const imagesWire = estimate?.imagesWire ?? { images: 0, source: "unavailable" as const };
+    const imageLabel = imagesWire.source === "unavailable" ? "⚠ Images" : "Images";
+    const imageValue = imagesWire.source === "unavailable"
+      ? "not observed"
+      : `${imagesWire.images} ${imagesWire.images === 1 ? "image" : "images"}`;
+    row("─".repeat(contentWidth));
+    for (const category of estimate?.categories ?? []) estimateRow(category.name, category.tokens, category.percent);
+    if (!estimate) row("No snapshot available");
+    alignedRow(imageLabel, imageValue, imagesWire.source === "unavailable" ? "warning" : "dim", "dim");
+    return [
+      panelTop(this.theme, "CTX", renderWidth),
+      panelContent(this.theme, modelLabel, "accent", contentWidth),
+      panelContent(this.theme, summaryRow, color, contentWidth),
+      panelContent(
+        this.theme,
+        `${this.theme.fg(color, "█".repeat(filledWidth - deltaWidth))}${deltaWidth > 0 ? this.theme.fg("accent", "█".repeat(deltaWidth)) : ""}${this.theme.fg(color, "░".repeat(contentWidth - filledWidth))}`,
+        color,
+        contentWidth,
+      ),
+      ...rows,
+      ...activityRows(
+        this.theme,
+        this.options.getActivity ?? (() => undefined),
+        this.options.now ?? Date.now,
+        contentWidth,
+      ),
+      panelBottom(this.theme, renderWidth),
+    ].map((line) => truncateToWidth(line, renderWidth, ""));
+  }
+
+  invalidate(): void {}
+
+}

package/extensions/ctx/tools.test.ts

@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createReadTool } from "@earendil-works/pi-coding-agent";
+import { estimateContext, estimateProviderToolsTokens, installContextEstimates } from "./data.ts";
+
+const tool = { name: "fabric_exec", description: "Execute TypeScript", parameters: createReadTool(process.cwd()).parameters };
+const expected = Math.ceil(JSON.stringify(tool).length / 4);
+const toolsCategory = (snapshot: ReturnType<typeof estimateContext>) => snapshot.categories.find(c => c.name === "Tools")!;
+
+test("Tools counts schema JSON only and contributes to totals and percentages", () => {
+ const decorated = { ...tool, sourceInfo: {path:"ignored".repeat(1000)}, promptGuidelines:["ignored".repeat(1000)] };
+ const snapshot = estimateContext([{role:"user",content:"abcd"}], "abcd", "context hook", [decorated]);
+ assert.equal(toolsCategory(snapshot).tokens, expected);
+ assert.equal(snapshot.total, expected + 2);
+ assert.equal(toolsCategory(snapshot).percent, expected / (expected + 2) * 100);
+ assert.ok(Math.abs(snapshot.categories.reduce((sum,c)=>sum+(c.percent??0),0)-100)<1e-9);
+ assert.equal(toolsCategory(estimateContext([], "", "active branch", [])).tokens, 0);
+ assert.equal(toolsCategory(estimateContext([])).tokens, undefined);
+ assert.equal(estimateProviderToolsTokens({ tools: [tool] }), Math.ceil(JSON.stringify([tool]).length / 4));
+ assert.equal(estimateProviderToolsTokens({}), 0);
+ assert.equal(estimateProviderToolsTokens(undefined), undefined);
+ const cyclic: any = {type:"object"}; cyclic.self = cyclic;
+ assert.equal(toolsCategory(estimateContext([], "", "active branch", [tool, {...tool,parameters:cyclic}])).tokens, undefined);
+});
+
+test("tracker filters active tools, refreshes dynamic schemas, caches reads and resets", () => {
+ const handlers = new Map<string, Function>();
+ let active = ["fabric_exec", "fabric_exec"];
+ let all = [tool, {...tool,name:"captured_read",description:"not exposed".repeat(100)}];
+ let reads = 0;
+ let fail = false;
+ const tracker = installContextEstimates({
+  on:(name:string,fn:Function)=>handlers.set(name,fn),
+  getActiveTools:()=>{if(fail) throw new Error("unavailable");return active;},
+  getAllTools:()=>{reads++;return all;},
+ } as any, ()=>{});
+ const ctx = {sessionManager:{buildContextEntries:()=>[]},getSystemPrompt:()=>""};
+ handlers.get("session_start")!({},ctx);
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens, expected);
+ const cached = tracker.getSnapshot(); const priorReads = reads;
+ assert.strictEqual(tracker.getSnapshot(),cached); assert.equal(reads,priorReads);
+ active = ["captured_read"];
+ handlers.get("context")!({messages:[]},ctx);
+ assert.ok(toolsCategory(tracker.getSnapshot()).tokens! > expected);
+ handlers.get("before_provider_request")!({payload:{tools:[tool]}},ctx);
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens, Math.ceil(JSON.stringify([tool]).length/4));
+ all = [{...tool,description:"changed"}]; active = ["fabric_exec"];
+ handlers.get("turn_end")!({},ctx);
+ // The last provider payload remains authoritative through active-branch refresh.
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens, Math.ceil(JSON.stringify([tool]).length/4));
+ active = [];
+ handlers.get("agent_settled")!({},ctx);
+ // The observed request remains the best provider-level measurement until the next context reset.
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens, Math.ceil(JSON.stringify([tool]).length/4));
+ active = ["missing"];
+ handlers.get("session_tree")!({},ctx);
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens,undefined);
+ fail = true;
+ handlers.get("session_compact")!({},ctx);
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens,undefined);
+ handlers.get("session_shutdown")!();
+ assert.equal(tracker.getSnapshot().source,"unavailable");
+ assert.equal(toolsCategory(tracker.getSnapshot()).tokens,undefined);
+});

package/extensions/fabric-detection.test.ts

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { isFabricFullCodeMode } from "./fabric-detection.ts";
+
+test("detects Fabric full code mode from the active tool set", () => {
+  assert.equal(isFabricFullCodeMode(["fabric_exec", "ask_user_question"]), true);
+});
+
+test("does not treat Fabric orchestration-only mode as full code mode", () => {
+  assert.equal(isFabricFullCodeMode(["fabric_exec", "read", "bash"]), false);
+});
+
+test("does not treat native Pi tools as Fabric full code mode", () => {
+  assert.equal(isFabricFullCodeMode(["read", "bash", "edit"]), false);
+});

package/extensions/fabric-detection.ts

@@ -0,0 +1,7 @@
+const FABRIC_EXEC_TOOL = "fabric_exec";
+const PI_CORE_TOOLS = new Set(["read", "bash", "edit", "write", "grep", "find", "ls"]);
+
+export function isFabricFullCodeMode(activeToolNames: readonly string[]): boolean {
+  return activeToolNames.includes(FABRIC_EXEC_TOOL) &&
+    !activeToolNames.some((name) => PI_CORE_TOOLS.has(name));
+}

package/extensions/footer/index.ts

@@ -0,0 +1,62 @@
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { Component, TUI } from "@earendil-works/pi-tui";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { resolve, relative, sep, isAbsolute } from "node:path";
+
+/** Render cwd with home directory collapsed to `~`, mirroring the built-in footer. */
+function formatCwdForFooter(cwd: string, home: string | undefined): string {
+  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}`;
+}
+
+export type FooterController = {
+  refresh(): void;
+  dispose(): void;
+};
+
+export function installFooter(
+  ctx: ExtensionContext,
+  onMount?: (tui: TUI, theme: Theme) => void,
+  onUnmount?: () => void,
+): FooterController {
+  let tui: TUI | undefined;
+
+  ctx.ui.setFooter((footerTui, theme, footerData): Component & { dispose(): void } => {
+    tui = footerTui;
+    onMount?.(footerTui, theme);
+    const unsubscribeBranch = footerData.onBranchChange(() => footerTui.requestRender());
+    // cwd may change across session reloads; re-render to keep the path fresh.
+    const cwd = ctx.cwd;
+
+    return {
+      dispose(): void {
+        unsubscribeBranch();
+        onUnmount?.();
+        if (tui === footerTui) tui = undefined;
+      },
+      invalidate(): void {},
+      render(width: number): string[] {
+        const branch = footerData.getGitBranch();
+        const cwdLabel = formatCwdForFooter(cwd, process.env.HOME ?? process.env.USERPROFILE);
+        const cwdSegment = theme.fg("dim", `📁 ${cwdLabel}`);
+        const branchSegment = branch ? theme.fg("dim", ` ⎇ ${branch}`) : "";
+        return [truncateToWidth(`${cwdSegment}${branchSegment}`, Math.max(0, width), "")];
+      },
+    };
+  });
+
+  return {
+    refresh: () => tui?.requestRender(),
+    dispose: () => {
+      ctx.ui.setFooter(undefined);
+      tui = undefined;
+    },
+  };
+}