@pi-unipi/footer 2.11.0 → 2.12.1

package/README.md

@@ -4,6 +4,22 @@ Persistent status bar at the bottom of the terminal. Shows live stats from all U
 
 Subscribes to events from every package and renders segments using Pi's `setFooter` + `setWidget` APIs. Responsive layout adjusts to terminal width, with a secondary row for narrow terminals.
 
+## Glance Footer (new in 2.12)
+
+An experimental input surface, on by default and toggleable in `/unipi:footer-settings` → Appearance → **Glance Footer**:
+
+```
+╭─ 󰚩 UNIPI │  feat/footer-default-v2 │ ───────────────────────────╮
+│ Type your prompt here...                                        │
+╰─ 󰉋 unipi ────────────────────── 42%/1.0M │ GLM-5.3 │ thinking:high ─╯
+              2 turn · 20 steps | 00:12:14 · tool 00:02 | 20ms avg ttft · 120 tok/s | 90% cache hit
+```
+
+- **Top border:** animated lolcat-gradient UNIPI brand + git branch (turns rainbow-frame animated while thinking is max/xhigh)
+- **Bottom border:** workspace · context %/window · model · thinking level
+- **Session strip:** turns/steps, wall + tool wall time, average TTFT, tok/s, cache hit % — colored per stat, honest across restarts (derived from persisted session timestamps when live hooks are unavailable; provider-reported `usage.output` anchors token counts whenever present)
+- The classic segment status line is suppressed while glance mode is on; toggle it back for the classic footer
+
 ## Commands
 
 | Command | Description |
@@ -36,11 +52,11 @@ Footer works even if packages load after it — late-arriving events update the
 
 | Preset | Description |
 |--------|-------------|
-| `default` | Balanced: model, thinking, path, git, context, cost + compactor + memory + ralph |
+| `default` | Glance-era: UNIPI brand, model, thinking, directory, git \| context/tokens, tps, cost, clock |
+| `classic` | The pre-2.12 balanced layout: model, api, tools, git \| tps, context, cost + compactor + memory + ralph |
 | `minimal` | Essentials only: path, git, context |
-| `compact` | Core + key stats: model, git, cost, context + compactor + memory |
+| `compact` | Core + key stats: model, git, cost, context |
 | `full` | Everything from all groups |
-| `nerd` | Full + hostname + time + session + extensions |
 | `ascii` | Core segments with ASCII icons |
 
 ## Segment Groups
@@ -67,6 +83,7 @@ Settings in `~/.pi/agent/settings.json` under `unipi.footer`:
     "footer": {
       "enabled": true,
       "preset": "default",
+      "glanceMode": true,
       "separator": "powerline-thin",
       "iconStyle": "nerd",
       "colorMode": "auto",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-unipi/footer",
-  "version": "2.11.0",
+  "version": "2.12.1",
   "description": "Persistent status bar for Unipi — subscribes to UNIPI_EVENTS and renders key stats from all unipi packages",
   "type": "module",
   "main": "index.ts",
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@pi-unipi/core": "2.11.0"
+    "@pi-unipi/core": "2.12.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "^0.84.0",

package/src/commands.ts

@@ -11,20 +11,7 @@ import { loadFooterSettings, saveFooterSettings } from "./config.js";
 import { showFooterSettings } from "./tui/settings-tui.js";
 import { showFooterHelp } from "./help.js";
 import type { FooterGroup, FooterSegment } from "./types.js";
-
-/** Extension state interface */
-interface FooterState {
-  enabled: boolean;
-  renderer: {
-    setPreset(name: string): void;
-    setActive(active: boolean): void;
-    getPresetName(): string;
-    resetLayoutCache(): void;
-  };
-  segmentLookup: Map<string, FooterSegment>;
-  piContext: unknown;
-  setupUI: ((pi: ExtensionAPI, ctx: ExtensionContext) => void) | null;
-}
+import { applyGlanceMode, type FooterState } from "./index.js";
 
 /**
  * Register footer commands.
@@ -91,10 +78,17 @@ export function registerCommands(
 
       if (groups && groups.length > 0) {
         showFooterSettings(ctx, groups, () => {
-          // Re-read settings and update renderer
+          // Instant, focus-safe updates: mode flag + renderer reset. Widget
+          // renders read state.glanceMode every frame, so the strip/classic
+          // row swap is live immediately. The EDITOR component swap is
+          // deferred to overlay close — see .finally below.
           const updated = loadFooterSettings();
           state.renderer.setPreset(updated.preset);
+          state.glanceMode = updated.glanceMode !== false;
           state.renderer.resetLayoutCache();
+        }).finally(() => {
+          // Overlay closed → focus back on the editor; safe to swap it now.
+          applyGlanceMode(state, ctx as unknown as Parameters<typeof applyGlanceMode>[1]);
         });
       } else {
         // Fallback: show text summary

package/src/config.ts

@@ -15,6 +15,7 @@ import { UNIPI_SETTINGS_KEY } from "@pi-unipi/core";
 export const DEFAULT_FOOTER_SETTINGS: FooterSettings = {
   enabled: true,
   preset: "default",
+  glanceMode: true,
   separator: "powerline-thin",
   iconStyle: "nerd",
   zoneSeparator: "\u2502", // │
@@ -93,6 +94,7 @@ export function loadFooterSettings(): FooterSettings {
     return {
       enabled: typeof footer.enabled === "boolean" ? footer.enabled : DEFAULT_FOOTER_SETTINGS.enabled,
       preset: typeof footer.preset === "string" ? footer.preset : DEFAULT_FOOTER_SETTINGS.preset,
+      glanceMode: typeof footer.glanceMode === "boolean" ? footer.glanceMode : DEFAULT_FOOTER_SETTINGS.glanceMode,
       separator: isValidSeparator(footer.separator) ? footer.separator as SeparatorStyle : DEFAULT_FOOTER_SETTINGS.separator,
       iconStyle: isValidIconStyle(footer.iconStyle) ? footer.iconStyle as IconStyle : DEFAULT_FOOTER_SETTINGS.iconStyle,
       zoneSeparator: typeof footer.zoneSeparator === "string" ? footer.zoneSeparator : DEFAULT_FOOTER_SETTINGS.zoneSeparator,

package/src/glance-editor.ts

@@ -0,0 +1,285 @@
+/**
+ * @pi-unipi/footer — Glance-style input surface
+ *
+ * Faithful to @zhcsyncer/pi-glance's frame architecture (MIT, © 2026 linys77):
+ * subclass CustomEditor, use super.render() ONLY to obtain editor content
+ * lines, then compose our own rounded frame. Layout per the v3 design:
+ *
+ *   ╭─UNIPI │ feat/footer-default-v2 │ ─────────────────────╮
+ *   │ Type your prompt here...                              │
+ *   ╰─ unipi ────────── 42%/1.0M │ Claude Opus 4.5 │ thinking:high ╯
+ *
+ * Top border carries the UNIPI brand + git branch. Bottom border right side
+ * carries workspace · context%/window · model · thinking level; left filler.
+ * All keybindings/autocomplete/history/paste behavior inherited.
+ */
+
+import { CustomEditor } from "@earendil-works/pi-coding-agent";
+import type { EditorOptions, EditorTheme, TUI } from "@earendil-works/pi-tui";
+import type { KeybindingsManager } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { getIcon } from "./rendering/icons.js";
+
+/** Live status injected by the footer extension. */
+export interface GlanceStatus {
+	/** Workspace/project directory name (bottom-left). */
+	workspace: string;
+	/** Git branch for the top title (null → omitted). */
+	branch: string | null;
+	/** Context usage percent (null when unknown). */
+	contextPct: number | null;
+	/** Context window size in tokens (for "42%/1.0M"). */
+	contextWindow: number;
+	/** Model display name (short). */
+	modelName: string;
+	/** Current thinking level (already "off"-filtered by the provider). */
+	thinkingLevel: string | null;
+}
+
+const BORDER = {
+	topLeft: "╭",
+	topRight: "╮",
+	bottomLeft: "╰",
+	bottomRight: "╯",
+	vertical: "│",
+	horizontal: "─",
+} as const;
+
+const SEP = " \u2502 "; // │
+
+/**
+ * Every invisible sequence pi-tui embeds in editor lines: CSI SGR, OSC 133
+ * prompt-zone markers (`\x1b]133;A\x07`), and CURSOR_MARKER (`\x1b_pi:c\x07`,
+ * an APC sequence for IME cursor placement). All are zero-width — they must
+ * be skipped by BOTH painting and width math or the ledger drifts.
+ */
+const ANSI_RE = /\x1B(?:\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1b\\)|_[^\x07]*(?:\x07|\x1b\\))/g;
+
+function stripControls(text: string): string {
+	return text.replace(ANSI_RE, "").replace(/[\r\n\t]/g, " ");
+}
+
+function repeat(s: string, n: number): string {
+	return s.repeat(Math.max(0, n));
+}
+
+function padLine(line: string, width: number): string {
+	const w = visibleWidth(line);
+	if (w === width) return line;
+	if (w < width) return line + " ".repeat(width - w);
+	return truncateToWidth(line, width, "");
+}
+
+function fmtTokens(n: number): string {
+	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	if (n >= 1_000) return `${Math.round(n / 1000)}k`;
+	return String(n);
+}
+
+// ─── Lolcat rainbow gradient (classic sine algorithm, animated) ─────────
+//
+// red   = sin(freq·i + phase)       · 127 + 128
+// green = sin(freq·i + 2π/3 + phase) · 127 + 128
+// blue  = sin(freq·i + 4π/3 + phase) · 127 + 128
+// i = character position; phase advances with wall time so the gradient
+// drifts across the word (lolcat -a behavior). Rendered as truecolor SGR.
+
+const LOLCAT_FREQ = 0.9; // radians per char — short word → tight sweep
+
+function lolcatRainbow(text: string, phase: number): string {
+	return text
+		.split("")
+		.map((ch, i) => {
+			const t = LOLCAT_FREQ * i + phase;
+			const r = Math.round(Math.sin(t) * 127 + 128);
+			const g = Math.round(Math.sin(t + (2 * Math.PI) / 3) * 127 + 128);
+			const b = Math.round(Math.sin(t + (4 * Math.PI) / 3) * 127 + 128);
+			return `\x1b[38;2;${r};${g};${b}m${ch}`;
+		})
+		.join("") + "\x1b[39m";
+}
+
+export class GlanceEditor extends CustomEditor {
+	private glance: () => GlanceStatus;
+
+	constructor(
+		tui: TUI,
+		theme: EditorTheme,
+		keybindings: KeybindingsManager,
+		getStatus: () => GlanceStatus,
+		options?: EditorOptions,
+	) {
+		super(tui, theme, keybindings, options);
+		this.glance = getStatus;
+	}
+
+	/**
+	 * Apply a flowing lolcat gradient to an already-composed frame line.
+	 * Printable characters get per-position truecolor from the sine palette;
+	 * existing SGR sequences pass through untouched (they mostly come from
+		 * the brand itself, which already carries its own colors).
+	 */
+	protected paintLolcatLine(line: string, phaseBase: number): string {
+		let out = "";
+		let pos = 0;
+		let i = 0;
+		while (i < line.length) {
+			const ch = line[i];
+			if (ch === "\x1b") {
+				const rest = line.slice(i);
+				// Copy the whole escape sequence verbatim.
+				const m = /^\x1b\[[0-?]*[ -/]*[@-~]/.exec(line.slice(i));
+				if (m) {
+					out += m[0];
+					i += m[0].length;
+					continue;
+				}
+				// Zero-width string sequences: OSC 133 zone markers (\x1b]133;A
+				// BEL) and the APC CURSOR_MARKER (\x1b_pi:c BEL). Painting their
+				// bytes is what produced the "_pi:c" garbage in rainbow mode.
+				const strSeq = /^\x1b[\]_][^\x07]*(?:\x07|\x1b\\)/.exec(rest);
+				if (strSeq) {
+					out += strSeq[0];
+					i += strSeq[0].length;
+					continue;
+				}
+			}
+			const t = LOLCAT_FREQ * 0.35 * pos + phaseBase;
+			const r = Math.round(Math.sin(t) * 127 + 128);
+			const g = Math.round(Math.sin(t + (2 * Math.PI) / 3) * 127 + 128);
+			const b = Math.round(Math.sin(t + (4 * Math.PI) / 3) * 127 + 128);
+			out += `\u001b[38;2;${r};${g};${b}m${ch}`;
+			pos++;
+			i++;
+		}
+		return out + "\u001b[39m";
+	}
+
+	private static isThinkingHot(level: string | null | undefined): boolean {
+		return level === "max" || level === "xhigh";
+	}
+
+	override render(width: number): string[] {
+		const safe = Math.max(8, width);
+		const inner = Math.max(0, safe - 2);
+
+		// Base render at inner width: harvest content rows only (rules dropped).
+		const base = super.render(inner);
+		if (base.length < 2) return base;
+
+		const isRule = (line: string): boolean => {
+			const plain = stripControls(line).trim();
+			return plain.length > 0 && /^─+$/.test(plain);
+		};
+
+		let bottomIdx = -1;
+		for (let i = base.length - 1; i >= 0; i--) {
+			const plain = stripControls(base[i]).trim();
+			if (/^─*(↑|↓)?/.test(plain) && (isRule(base[i]) || /^[^─]*─+[^─]*$/.test(plain))) {
+				bottomIdx = i;
+				break;
+			}
+		}
+		if (bottomIdx < 1) return base;
+
+		const contentLines = base.slice(0, bottomIdx).filter(l => !isRule(l));
+		const autocomplete = base.slice(bottomIdx + 1);
+
+		const st = this.glance();
+		const border = this.borderColor.bind(this);
+
+		// ── Top frame: ╭─ 󰚩 UNIPI │  feat/... │ ───────────────╮ ──
+		// Brand rendered as an animated lolcat gradient (phase from wall time;
+		// the footer's 1s refresh timer re-renders, so it shimmers each tick).
+		const brand = lolcatRainbow("UNIPI", Date.now() / 1000);
+		const brandIcon = getIcon("model");
+		const titleParts = [
+			`${brandIcon ? brandIcon + " " : ""}${brand}`,
+		];
+		if (st.branch) {
+			const gitIcon = getIcon("git");
+			titleParts.push(`${gitIcon ? gitIcon + " " : ""}${st.branch}`);
+		}
+		const title = titleParts.join(SEP);
+		const leadRule = `${BORDER.horizontal} `;
+		const titleText = ` ${title}${SEP}`;
+		// Width ledger counts PLAIN text — strip SGR (rainbow codes) first.
+		const topFiller = Math.max(
+			2,
+			safe - 2 - visibleWidth(stripControls(leadRule + titleText)),
+		);
+		const top =
+			border(BORDER.topLeft) +
+			border(leadRule + titleText) +
+			border(repeat(BORDER.horizontal, topFiller)) +
+			border(BORDER.topRight);
+
+		// ── Body rows: │ content │ ──
+		const bodyRows = contentLines.map(row =>
+			border(BORDER.vertical) + padLine(row, inner) + border(BORDER.vertical),
+		);
+
+		// ── Bottom frame: ╰─ unipi ─────── [RIGHT CLUSTER] ─╯ ──
+		// Right cluster: workspace · pct%/window │ model │ thinking:level
+		const rightParts: string[] = [];
+		const ctxPct = st.contextPct !== null ? Math.max(0, Math.min(100, st.contextPct)) : null;
+		const pctLabel = ctxPct !== null ? `${Math.round(ctxPct)}%` : "?%";
+		const winLabel = st.contextWindow > 0 ? `/${fmtTokens(st.contextWindow)}` : "";
+		rightParts.push(`${pctLabel}${winLabel}`);
+		if (st.modelName) rightParts.push(st.modelName);
+		if (st.thinkingLevel && st.thinkingLevel !== "off") {
+			rightParts.push(`thinking:${st.thinkingLevel}`);
+		}
+		// Workspace gets the folder nerd icon.
+		const dirIcon = getIcon("directory");
+		const leftTitle = ` ${dirIcon ? dirIcon + " " : ""}${st.workspace} `;
+		let cluster = rightParts.join(SEP);
+
+		// Shrink policy for narrow terminals: thinking first, then model tail.
+		const maxCluster = inner - visibleWidth(leftTitle) - 8;
+		while (visibleWidth(cluster) > Math.max(10, maxCluster)) {
+			const parts = cluster.split("│");
+			if (parts.length <= 1) break;
+			parts.pop();
+			cluster = parts.join("\u2502").trimEnd();
+		}
+		// ╰─ 󰉋 unipi ────...──── ─ cluster ─╯ : leading space separates the rule
+		// from the right cluster. Ledger (all plain-width):
+		// corner(1)+rule(1)+leftTitle+dashes+space(1)+cluster+space(1)+rule(1)+corner(1)=safe
+		const bottomDashes = Math.max(
+			2,
+			safe - 6 - visibleWidth(stripControls(leftTitle)) - visibleWidth(stripControls(cluster)),
+		);
+
+		const bottom =
+			border(BORDER.bottomLeft) +
+			border(BORDER.horizontal) +
+			border(leftTitle) +
+			border(repeat(BORDER.horizontal, bottomDashes)) +
+			" " + cluster + " " +
+			border(BORDER.horizontal) +
+			border(BORDER.bottomRight);
+
+		const lines = [
+			truncateToWidth(top, safe),
+			...bodyRows,
+			truncateToWidth(bottom, safe),
+		];
+
+		// Thinking max/xhigh: the whole frame flows with an animated lolcat
+		// gradient (phase from wall time; 1s refresh ticks drive the motion;
+		// row offset makes the rainbow flow diagonally like full-screen lolcat).
+		if (GlanceEditor.isThinkingHot(st.thinkingLevel)) {
+			const phase = Date.now() / 700;
+			for (let i = 0; i < lines.length; i++) {
+				lines[i] = truncateToWidth(this.paintLolcatLine(lines[i], phase + i * 0.5), safe);
+			}
+		}
+
+		// Autocomplete list indents by 1 col and sits below the frame (like base).
+		for (const line of autocomplete) {
+			lines.push(padLine(` ${line}`, safe));
+		}
+		return lines;
+	}
+}

package/src/help.ts

@@ -73,7 +73,7 @@ function buildHelpLines(
 
 /** Simple group lookup for help */
 export function getGroupForSegment(segId: string): string {
-  const coreIds = ["model", "api_state", "tool_count", "git", "context_pct", "cost", "tokens_total", "tokens_in", "tokens_out", "session", "hostname", "time", "tps", "clock", "duration", "thinking_level"];
+  const coreIds = ["model", "api_state", "tool_count", "git", "context_pct", "cost", "tokens_total", "tokens_in", "tokens_out", "session", "hostname", "time", "tps", "clock", "duration", "thinking_level", "uni", "directory"];
   if (coreIds.includes(segId)) return "core";
   const compactorIds = ["session_events", "compactions", "tokens_saved", "compression_ratio", "sandbox_runs", "search_queries"];
   if (compactorIds.includes(segId)) return "compactor";