@ogulcancelik/pi-minimal-footer 0.1.3 → 0.1.5

package/README.md

@@ -11,7 +11,7 @@ Minimal footer for [pi](https://github.com/badlogic/pi-mono) that replaces the d
 - **Context gauge** — working directory, git branch, model, thinking level, and context window usage with token counts
 - **Subscription usage bars** — rolling window quotas with reset timers for supported providers
 - **Auto-refresh** — fetches usage on startup and model switch, then every 5 minutes
-- **Git integration** — branch name, dirty state, ahead/behind counts (supports jj)
+- **Git integration** — branch name, dirty state, ahead/behind counts
 
 ## Supported providers
 
@@ -39,6 +39,11 @@ Usage is fetched:
 - Immediately on model switch (Ctrl+P)
 - Every 5 minutes after that
 
+Git state is refreshed:
+- Once on startup
+- When pi reports a branch change
+- At the end of each turn
+
 The footer adapts to narrow terminals by stacking lines vertically instead of the single-line wide layout.
 
 ## Known issues

package/index.ts

@@ -35,7 +35,6 @@ interface GitCache {
   dirty: boolean;
   ahead: number;
   behind: number;
-  isJj: boolean;
 }
 
 // ============ Usage Cache ============
@@ -51,63 +50,58 @@ let codexEmailPrefix: string | null | undefined; // undefined = not yet resolved
 
 let gitCache: GitCache | null = null;
 
-function refreshGitCache(): void {
-  gitCache = null;
+function parseGitStatus(output: string): GitCache {
+  let branch: string | null = null;
+  let dirty = false;
+  let ahead = 0;
+  let behind = 0;
 
-  try {
-    const gitRoot = execSync("git rev-parse --show-toplevel 2>/dev/null", {
-      encoding: "utf8",
-      timeout: 500,
-    }).trim();
-
-    if (!gitRoot) return;
-
-    const isJj = existsSync(`${gitRoot}/.jj`);
-    let branch: string | null = null;
-
-    if (isJj) {
-      try {
-        const jjBranch = execSync(
-          `jj log -r 'heads(ancestors(@) & bookmarks())' --no-graph -T 'bookmarks.map(|b| b.name()).join(" ")' --limit 1 2>/dev/null`,
-          { encoding: "utf8", timeout: 1000 }
-        ).trim();
-        branch = jjBranch ? jjBranch.split(" ")[0] : null;
-      } catch {}
-    } else {
-      try {
-        const gitBranch = execSync("git rev-parse --abbrev-ref HEAD 2>/dev/null", {
-          encoding: "utf8",
-          timeout: 500,
-        }).trim();
-        branch = gitBranch && gitBranch !== "HEAD" ? gitBranch : null;
-      } catch {}
-    }
-
-    let dirty = false;
-    try {
-      const status = execSync("git status --porcelain 2>/dev/null", {
-        encoding: "utf8",
-        timeout: 500,
-      });
-      dirty = status.trim().length > 0;
-    } catch {}
+  for (const line of output.split("\n")) {
+    if (!line) continue;
 
-    let ahead = 0;
-    let behind = 0;
-    try {
-      const counts = execSync("git rev-list --left-right --count HEAD...@{upstream} 2>/dev/null", {
-        encoding: "utf8",
-        timeout: 500,
-      }).trim();
-      const [a, b] = counts.split(/\s+/);
-      ahead = parseInt(a, 10) || 0;
-      behind = parseInt(b, 10) || 0;
-    } catch {}
+    if (line.startsWith("# branch.head ")) {
+      const head = line.slice("# branch.head ".length).trim();
+      branch = head && head !== "(detached)" ? head : null;
+      continue;
+    }
+
+    if (line.startsWith("# branch.ab ")) {
+      const match = line.match(/^# branch\.ab \+(\d+) -(\d+)$/);
+      if (match) {
+        ahead = parseInt(match[1], 10) || 0;
+        behind = parseInt(match[2], 10) || 0;
+      }
+      continue;
+    }
+
+    if (!line.startsWith("# ")) dirty = true;
+  }
+
+  return { branch, dirty, ahead, behind };
+}
 
-    gitCache = { branch, dirty, ahead, behind, isJj };
+function sameGitCache(a: GitCache | null, b: GitCache | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.branch === b.branch && a.dirty === b.dirty && a.ahead === b.ahead && a.behind === b.behind;
+}
+
+function refreshGitCache(): boolean {
+  let next: GitCache | null = null;
+
+  try {
+    const status = execSync("git status --porcelain=v2 --branch 2>/dev/null", {
+      encoding: "utf8",
+      timeout: 1000,
+    });
+    next = parseGitStatus(status.trimEnd());
   } catch {
-    gitCache = null;
+    next = null;
   }
+
+  const changed = !sameGitCache(gitCache, next);
+  gitCache = next;
+  return changed;
 }
 
 // ============ JWT Helpers ============
@@ -675,10 +669,54 @@ export default function (pi: ExtensionAPI) {
     return `${tokens}`;
   }
 
-  function renderContextGauge(percentage: number, theme: any, used?: number, total?: number): string {
+  function fitFooterSegment(width: number, variants: string[]): string {
+    const safeWidth = Math.max(1, width);
+
+    for (const variant of variants) {
+      if (visibleWidth(variant) <= safeWidth) return variant;
+    }
+
+    return truncateToWidth(variants[variants.length - 1] || "", safeWidth);
+  }
+
+  function wrapFooterSegments(segments: string[], width: number, sep: string): string[] {
+    const safeWidth = Math.max(1, width);
+    const lines: string[] = [];
+    let current = "";
+
+    for (const segment of segments.filter(Boolean)) {
+      const fitted = truncateToWidth(segment, safeWidth);
+
+      if (!current) {
+        current = fitted;
+        continue;
+      }
+
+      const candidate = current + sep + fitted;
+      if (visibleWidth(candidate) <= safeWidth) {
+        current = candidate;
+        continue;
+      }
+
+      lines.push(truncateToWidth(current, safeWidth));
+      current = fitted;
+    }
+
+    if (current) lines.push(truncateToWidth(current, safeWidth));
+    return lines;
+  }
+
+  function renderContextGauge(
+    percentage: number,
+    theme: any,
+    used?: number,
+    total?: number,
+    options?: { barWidth?: number; includeCounts?: boolean }
+  ): string {
+    const barWidth = Math.max(4, options?.barWidth ?? CTX_GAUGE_WIDTH);
     const clamped = Math.max(0, Math.min(100, percentage));
-    const filled = Math.round((clamped / 100) * CTX_GAUGE_WIDTH);
-    const empty = CTX_GAUGE_WIDTH - filled;
+    const filled = Math.round((clamped / 100) * barWidth);
+    const empty = barWidth - filled;
 
     let color: string;
     if (clamped >= 90) color = "error";
@@ -688,7 +726,10 @@ export default function (pi: ExtensionAPI) {
 
     const bar = theme.fg(color, BAR_FILLED.repeat(filled)) + theme.fg("dim", BAR_EMPTY.repeat(empty));
     const pct = `${Math.round(clamped)}%`;
-    const counts = used !== undefined && total ? ` ${formatTokenCount(used)}/${formatTokenCount(total)}` : "";
+    const counts =
+      options?.includeCounts === false || used === undefined || !total
+        ? ""
+        : ` ${formatTokenCount(used)}/${formatTokenCount(total)}`;
 
     return theme.fg("dim", "ctx ") + bar + " " + theme.fg("dim", pct + counts);
   }
@@ -706,38 +747,38 @@ export default function (pi: ExtensionAPI) {
     return theme.fg(color, BAR_FILLED.repeat(filled)) + theme.fg("dim", BAR_EMPTY.repeat(empty));
   }
 
+  function renderUsageWindow(
+    window: RateWindow,
+    theme: any,
+    options?: { barWidth?: number; includeReset?: boolean }
+  ): string {
+    const dim = (s: string) => theme.fg("dim", s);
+    const bar = renderUsageBar(window.usedPercent, Math.max(4, options?.barWidth ?? 10), theme);
+    const pct = dim(`${Math.round(window.usedPercent)}%`);
+    const timeStr = options?.includeReset === false || !window.resetsIn ? "" : " " + dim(window.resetsIn);
+    return `${dim(window.label)} ${bar} ${pct}${timeStr}`;
+  }
+
   function renderUsageLine(usage: UsageSnapshot, width: number, theme: any): string[] {
     if (!usage.windows.length) return [];
 
     const dim = (s: string) => theme.fg("dim", s);
     const sep = " " + dim(">") + " ";
-    const USAGE_BAR_WIDTH = 10;
-    const NARROW_THRESHOLD = 60;
-
-    if (width < NARROW_THRESHOLD) {
-      // Narrow: one line per window
-      const lines: string[] = [];
-      for (const w of usage.windows) {
-        const bar = renderUsageBar(w.usedPercent, USAGE_BAR_WIDTH, theme);
-        const pct = dim(`${Math.round(w.usedPercent)}%`);
-        const timeStr = w.resetsIn ? " " + dim(w.resetsIn) : "";
-        lines.push(`${dim(w.label)} ${bar} ${pct}${timeStr}`);
-      }
-      return lines;
-    }
-
-    // Wide: single line with > separators, fixed-width bars
-    // Format: "Codex > 5h ━━━━━━━━━━ 46% 2h38m > 7d ━━━━━━━━━━ 46% 2d1h"
-    const parts: string[] = [theme.fg("accent", usage.provider)];
+    const segments: string[] = [theme.fg("accent", usage.provider)];
 
     for (const w of usage.windows) {
-      const bar = renderUsageBar(w.usedPercent, USAGE_BAR_WIDTH, theme);
-      const pct = dim(`${Math.round(w.usedPercent)}%`);
-      const timeStr = w.resetsIn ? " " + dim(w.resetsIn) : "";
-      parts.push(`${dim(w.label)} ${bar} ${pct}${timeStr}`);
+      segments.push(
+        fitFooterSegment(width, [
+          renderUsageWindow(w, theme, { barWidth: 10, includeReset: true }),
+          renderUsageWindow(w, theme, { barWidth: 8, includeReset: true }),
+          renderUsageWindow(w, theme, { barWidth: 8, includeReset: false }),
+          renderUsageWindow(w, theme, { barWidth: 6, includeReset: false }),
+          renderUsageWindow(w, theme, { barWidth: 4, includeReset: false }),
+        ])
+      );
     }
 
-    return [parts.join(sep)];
+    return wrapFooterSegments(segments, width, sep);
   }
 
   function getThinkingLevel(ctx: any): string {
@@ -760,11 +801,10 @@ export default function (pi: ExtensionAPI) {
     const lastAssistant = messages
       .slice()
       .reverse()
-      .find((m: any) => m.role === "assistant" && m.stopReason !== "aborted");
+      .find((m: any) => m.role === "assistant" && m.stopReason !== "aborted") as any;
 
-    if (!lastAssistant?.usage) return { percentage: 0, used: 0, total: contextWindow };
-
-    const usage = lastAssistant.usage;
+    const usage = lastAssistant?.usage;
+    if (!usage) return { percentage: 0, used: 0, total: contextWindow };
     const contextTokens = (usage.input ?? 0) + (usage.output ?? 0) + (usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0);
 
     return { percentage: (contextTokens / contextWindow) * 100, used: contextTokens, total: contextWindow };
@@ -778,6 +818,10 @@ export default function (pi: ExtensionAPI) {
   // Store tui reference for triggering re-renders from event handlers
   let tuiRef: { requestRender: () => void } | null = null;
 
+  function refreshGitFooter(): void {
+    if (refreshGitCache()) tuiRef?.requestRender();
+  }
+
   /** Fetch usage for the active provider. Shows cached data immediately,
    *  then fetches fresh in the background. Discards results if provider
    *  changed while the fetch was in flight. */
@@ -848,8 +892,7 @@ export default function (pi: ExtensionAPI) {
       tuiRef = tui;
       
       const unsub = footerData.onBranchChange(() => {
-        refreshGitCache();
-        tui.requestRender();
+        refreshGitFooter();
       });
 
       // Initial fetch inside factory — tui is guaranteed available here,
@@ -887,7 +930,8 @@ export default function (pi: ExtensionAPI) {
 
           // Model + thinking
           const modelName = ctx.model?.id?.split("/").pop() || "no-model";
-          let modelStr = theme.fg("muted", modelName);
+          const plainModelStr = theme.fg("muted", modelName);
+          let modelStr = plainModelStr;
           if (ctx.model?.reasoning) {
             const thinkingLevel = getThinkingLevel(ctx);
             if (thinkingLevel !== "off") {
@@ -895,47 +939,53 @@ export default function (pi: ExtensionAPI) {
             }
           }
 
-          // Context gauge
-          const gauge = renderContextGauge(percentage, theme, ctxUsed, ctxTotal);
-
           const sep = " " + theme.fg("dim", ">") + " ";
-          const NARROW_THRESHOLD = 60;
-
           const lines: string[] = [];
-
-          if (width < NARROW_THRESHOLD) {
-            // Narrow: stack vertically
-            const pwdColored = theme.fg("accent", pwd);
-            if (branchStr) {
-              lines.push(truncateToWidth(pwdColored + sep + branchStr, width));
-            } else {
-              lines.push(truncateToWidth(pwdColored, width));
-            }
-            lines.push(truncateToWidth(modelStr, width));
-            lines.push(truncateToWidth(gauge, width));
-          } else {
-            // Wide: single line
-            const pwdColored = theme.fg("accent", pwd);
-            const branchPart = branchStr ? sep + branchStr : "";
-            const modelPart = sep + modelStr;
-            const gaugePart = sep + gauge;
-            lines.push(truncateToWidth(pwdColored + branchPart + modelPart + gaugePart, width));
-          }
+          const pwdStr = theme.fg("accent", pwd);
+          const statusBlocks = [
+            fitFooterSegment(width, branchStr ? [pwdStr + sep + branchStr, pwdStr] : [pwdStr]),
+            fitFooterSegment(width, modelStr === plainModelStr ? [plainModelStr] : [modelStr, plainModelStr]),
+            fitFooterSegment(width, [
+              renderContextGauge(percentage, theme, ctxUsed, ctxTotal, {
+                barWidth: CTX_GAUGE_WIDTH,
+                includeCounts: true,
+              }),
+              renderContextGauge(percentage, theme, ctxUsed, ctxTotal, {
+                barWidth: 10,
+                includeCounts: false,
+              }),
+              renderContextGauge(percentage, theme, ctxUsed, ctxTotal, {
+                barWidth: 8,
+                includeCounts: false,
+              }),
+              renderContextGauge(percentage, theme, ctxUsed, ctxTotal, {
+                barWidth: 6,
+                includeCounts: false,
+              }),
+              renderContextGauge(percentage, theme, ctxUsed, ctxTotal, {
+                barWidth: 4,
+                includeCounts: false,
+              }),
+            ]),
+          ];
+
+          lines.push(...wrapFooterSegments(statusBlocks, width, sep));
 
           if (latestUsage && latestUsage.windows.length > 0) {
-            const usageLines = renderUsageLine(latestUsage, width, theme);
-            for (const line of usageLines) {
-              lines.push(truncateToWidth(line, width));
-            }
+            lines.push(...renderUsageLine(latestUsage, width, theme));
           }
 
-          return lines;
+          return lines.map((line) => truncateToWidth(line, width));
         },
       };
     });
 
   });
 
+  pi.on("turn_end", async () => {
+    refreshGitFooter();
+  });
+
   // Refresh when model changes — fetch immediately, restart timer
   pi.on("model_select", (event, _ctx) => {
     if (!event.model?.provider) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogulcancelik/pi-minimal-footer",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Minimal footer for pi with context gauge and subscription usage bars",
   "type": "module",
   "keywords": [