@yusukeshib/pi-colored-model-status 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yusuke Shibata
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# @yusukeshib/pi-colored-model-status
+
+A [pi](https://pi.dev) extension that color-codes the active model in the
+footer, so you can tell at a glance which model family is in use.
+
+It replaces the plain `claude-opus-4-8 • medium` text in the bottom-right of
+pi's footer with a background-colored badge. Everything else the default
+footer shows (cwd, git branch, token stats, context %, and other extensions'
+status line) is faithfully reproduced.
+
+## Colors
+
+Model families are matched by substring against the model id and painted with
+strongly distinct hues:
+
+| Family                    | Color            |
+| ------------------------- | ---------------- |
+| `opus`                    | deep purple      |
+| `sonnet`                  | bright cyan-blue |
+| `fable`                   | vivid orange     |
+| `haiku`                   | green            |
+| `gpt`, `o1`, `o3`, `o4`   | OpenAI teal      |
+| `gemini`                  | Google blue      |
+| `grok`                    | slate            |
+| anything else             | gray (fallback)  |
+
+The foreground color (black or white) is chosen automatically from the
+background's luminance for readability. The badge follows model changes made
+via `/model` or `Ctrl+P`.
+
+## Install
+
+```bash
+pi install npm:@yusukeshib/pi-colored-model-status
+```
+
+Then reload (or restart pi):
+
+```
+/reload
+```
+
+To try it for a single run without installing:
+
+```bash
+pi -e npm:@yusukeshib/pi-colored-model-status
+```
+
+## Customize
+
+Edit the `BADGES` array at the top of
+[`extensions/colored-model-status.ts`](extensions/colored-model-status.ts).
+Each entry maps substring keywords to an RGB background (and an optional `fg`):
+
+```ts
+const BADGES = [
+  { match: ["opus"], bg: [147, 51, 234] },
+  { match: ["sonnet"], bg: [14, 165, 233] },
+  { match: ["fable"], bg: [234, 88, 12] },
+  // …add your own, e.g.:
+  { match: ["deepseek"], bg: [30, 90, 200] },
+];
+```
+
+Matching is a case-insensitive substring test against the model id, so `gpt`
+matches `gpt-4o`, `o3` matches `o3-mini`, and so on. The first matching entry
+wins.
+
+## How it works
+
+`theme.bg()` only accepts theme tokens, so to render arbitrary,
+model-specific colors the extension emits raw SGR truecolor escapes
+(`48;2;R;G;B`) directly. It uses `ctx.ui.setFooter()` to take over the footer
+and re-implements pi's default footer layout, coloring only the model +
+thinking-level segment.
+
+Because it re-creates the footer, it mirrors pi's default footer rendering as
+of the pinned `@earendil-works/pi-coding-agent` version. If pi's footer layout
+changes upstream, this extension may need updating to match.
+
+### Note on the `(auto)` context indicator
+
+pi's default footer appends `(auto)` to the context-usage figure when
+auto-compaction is enabled. That state is not exposed to extensions, so this
+reimplementation leaves it blank. If you rely on that indicator, adjust
+`autoInd` in the source.
+
+## Requirements
+
+Requires a truecolor-capable terminal (most modern terminals: iTerm2, Kitty,
+WezTerm, Ghostty, Windows Terminal, VS Code). Check with:
+
+```bash
+echo $COLORTERM   # "truecolor" or "24bit"
+```
+
+## License
+
+MIT © Yusuke Shibata

package/extensions/colored-model-status.ts

@@ -0,0 +1,216 @@
+/**
+ * colored-model-status — color-code the active model in pi's footer.
+ *
+ * Replaces the plain `claude-opus-4-8 • medium` text in the bottom-right of
+ * pi's footer with a background-colored badge, so you can tell at a glance
+ * which model family is active. The footer is fully re-created via
+ * `setFooter`, faithfully reproducing the default footer (cwd, git branch,
+ * token stats, context %, extension statuses) while painting only the
+ * model + thinking segment.
+ *
+ * `theme.bg()` only accepts theme tokens, so to get arbitrary, model-specific
+ * colors we emit raw SGR truecolor escapes (48;2;R;G;B) directly.
+ */
+
+import { isAbsolute, relative, resolve, sep } from "node:path";
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+type Rgb = readonly [number, number, number];
+
+interface Badge {
+	/** Substring keywords matched against the lower-cased model id. */
+	match: readonly string[];
+	bg: Rgb;
+	/** Foreground color. Defaults to black/white chosen from background luminance. */
+	fg?: Rgb;
+}
+
+// Matched top-to-bottom; first hit wins. Hues are spread far apart per family.
+const BADGES: readonly Badge[] = [
+	{ match: ["opus"], bg: [147, 51, 234] }, // deep purple
+	{ match: ["sonnet"], bg: [14, 165, 233] }, // bright cyan-blue
+	{ match: ["fable"], bg: [234, 88, 12] }, // vivid orange
+	{ match: ["haiku"], bg: [22, 163, 74] }, // green
+	{ match: ["gpt", "o1", "o3", "o4"], bg: [16, 163, 127] }, // OpenAI teal
+	{ match: ["gemini"], bg: [66, 133, 244] }, // Google blue
+	{ match: ["grok"], bg: [30, 41, 59] }, // slate
+];
+
+const FALLBACK: Badge = { match: [], bg: [82, 82, 91] }; // gray
+
+function pickBadge(id: string): Badge {
+	const lower = id.toLowerCase();
+	return BADGES.find((b) => b.match.some((k) => lower.includes(k))) ?? FALLBACK;
+}
+
+/** Pick a contrasting foreground (black/white) from the background luminance. */
+function autoFg([r, g, b]: Rgb): Rgb {
+	const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+	return luminance > 0.6 ? [0, 0, 0] : [255, 255, 255];
+}
+
+/** Paint text as a background-colored badge (padded with spaces for a clear block). */
+function paintBadge(text: string, badge: Badge): string {
+	const [br, bg, bb] = badge.bg;
+	const [fr, fg, fb] = badge.fg ?? autoFg(badge.bg);
+	const bgSeq = `\x1b[48;2;${br};${bg};${bb}m`;
+	const fgSeq = `\x1b[38;2;${fr};${fg};${fb}m`;
+	return `${bgSeq}${fgSeq} ${text} \x1b[0m`;
+}
+
+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 formatCwd(cwd: string, home: string | undefined): string {
+	if (!home) return cwd;
+	const rc = resolve(cwd);
+	const rh = resolve(home);
+	const rel = relative(rh, rc);
+	const inside = rel === "" || (rel !== ".." && !rel.startsWith(`..${sep}`) && !isAbsolute(rel));
+	if (!inside) return cwd;
+	return rel === "" ? "~" : `~${sep}${rel}`;
+}
+
+function sanitizeStatus(text: string): string {
+	return text
+		.replace(/[\r\n\t]/g, " ")
+		.replace(/ +/g, " ")
+		.trim();
+}
+
+export default function (pi: ExtensionAPI) {
+	pi.on("session_start", (_event, ctx) => {
+		ctx.ui.setFooter((tui, theme, footerData) => {
+			const unsub = footerData.onBranchChange(() => tui.requestRender());
+
+			return {
+				dispose: unsub,
+				invalidate() {},
+				render(width: number): string[] {
+					const sm = ctx.sessionManager;
+					const model = ctx.model;
+
+					// --- Aggregate token stats across all entries ---
+					let input = 0;
+					let output = 0;
+					let cacheRead = 0;
+					let cacheWrite = 0;
+					let cost = 0;
+					let latestCacheHitRate: number | undefined;
+					for (const e of sm.getEntries()) {
+						if (e.type === "message" && e.message.role === "assistant") {
+							const u = e.message.usage;
+							input += u.input;
+							output += u.output;
+							cacheRead += u.cacheRead;
+							cacheWrite += u.cacheWrite;
+							cost += u.cost.total;
+							const prompt = u.input + u.cacheRead + u.cacheWrite;
+							latestCacheHitRate = prompt > 0 ? (u.cacheRead / prompt) * 100 : undefined;
+						}
+					}
+
+					// --- Context usage ---
+					const usage = ctx.getContextUsage();
+					const contextWindow = usage?.contextWindow ?? model?.contextWindow ?? 0;
+					const pctValue = usage?.percent ?? 0;
+					const pct = usage?.percent != null ? pctValue.toFixed(1) : "?";
+
+					// --- pwd line (+ git branch + session name) ---
+					let pwd = formatCwd(sm.getCwd(), process.env.HOME || process.env.USERPROFILE);
+					const branch = footerData.getGitBranch();
+					if (branch) pwd = `${pwd} (${branch})`;
+					const sessionName = sm.getSessionName();
+					if (sessionName) pwd = `${pwd} • ${sessionName}`;
+
+					// --- stats (left side) ---
+					const parts: string[] = [];
+					if (input) parts.push(`↑${formatTokens(input)}`);
+					if (output) parts.push(`↓${formatTokens(output)}`);
+					if (cacheRead) parts.push(`R${formatTokens(cacheRead)}`);
+					if (cacheWrite) parts.push(`W${formatTokens(cacheWrite)}`);
+					if ((cacheRead > 0 || cacheWrite > 0) && latestCacheHitRate !== undefined) {
+						parts.push(`CH${latestCacheHitRate.toFixed(1)}%`);
+					}
+					const usingSub = model ? ctx.modelRegistry.isUsingOAuth(model) : false;
+					if (cost || usingSub) parts.push(`$${cost.toFixed(3)}${usingSub ? " (sub)" : ""}`);
+
+					const autoInd = ""; // auto-compact indicator (kept blank; see note in README)
+					const pctDisplay =
+						pct === "?"
+							? `?/${formatTokens(contextWindow)}${autoInd}`
+							: `${pct}%/${formatTokens(contextWindow)}${autoInd}`;
+					let pctStr: string;
+					if (pctValue > 90) pctStr = theme.fg("error", pctDisplay);
+					else if (pctValue > 70) pctStr = theme.fg("warning", pctDisplay);
+					else pctStr = pctDisplay;
+					parts.push(pctStr);
+
+					let statsLeft = parts.join(" ");
+					let statsLeftWidth = visibleWidth(statsLeft);
+					if (statsLeftWidth > width) {
+						statsLeft = truncateToWidth(statsLeft, width, "...");
+						statsLeftWidth = visibleWidth(statsLeft);
+					}
+
+					// --- Right side: model + thinking as a colored badge ---
+					const modelName = model?.id || "no-model";
+					let rightText = modelName;
+					if (model?.reasoning) {
+						const level = pi.getThinkingLevel() || "off";
+						rightText = level === "off" ? `${modelName} • thinking off` : `${modelName} • ${level}`;
+					}
+					// Prefix (provider) when more than one provider is available
+					if (footerData.getAvailableProviderCount() > 1 && model) {
+						rightText = `(${model.provider}) ${rightText}`;
+					}
+
+					const badge = pickBadge(modelName);
+					// Badge adds a leading/trailing space, so width = text width + 2
+					const rightWidth = visibleWidth(rightText) + 2;
+
+					const minPadding = 2;
+					const dimStatsLeft = theme.fg("dim", statsLeft);
+					let statsLine: string;
+					if (statsLeftWidth + minPadding + rightWidth <= width) {
+						const pad = " ".repeat(width - statsLeftWidth - rightWidth);
+						statsLine = dimStatsLeft + theme.fg("dim", pad) + paintBadge(rightText, badge);
+					} else {
+						// Right side does not fit: truncate text, then paint
+						const avail = width - statsLeftWidth - minPadding - 2; // -2 for the badge's padding spaces
+						if (avail > 0) {
+							const truncated = truncateToWidth(rightText, avail, "");
+							const painted = paintBadge(truncated, badge);
+							const pad = " ".repeat(
+								Math.max(0, width - statsLeftWidth - (visibleWidth(truncated) + 2)),
+							);
+							statsLine = dimStatsLeft + theme.fg("dim", pad) + painted;
+						} else {
+							statsLine = dimStatsLeft;
+						}
+					}
+
+					const pwdLine = truncateToWidth(theme.fg("dim", pwd), width, theme.fg("dim", "..."));
+					const lines = [pwdLine, statsLine];
+
+					// --- Extension status line (token-counter / working-status, etc.) ---
+					const statuses = footerData.getExtensionStatuses();
+					if (statuses.size > 0) {
+						const sorted = Array.from(statuses.entries())
+							.sort(([a], [b]) => a.localeCompare(b))
+							.map(([, t]) => sanitizeStatus(t));
+						lines.push(truncateToWidth(sorted.join(" "), width, theme.fg("dim", "...")));
+					}
+
+					return lines;
+				},
+			};
+		});
+	});
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@yusukeshib/pi-colored-model-status",
+	"version": "0.1.0",
+	"description": "Color-code the active model in pi's footer so you can tell at a glance which model family (opus, sonnet, fable, gpt, gemini, …) is in use.",
+	"keywords": [
+		"pi-package",
+		"pi-extension",
+		"footer",
+		"model",
+		"status"
+	],
+	"type": "module",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"author": "Yusuke Shibata <yusukeshib@gmail.com>",
+	"homepage": "https://github.com/yusukeshib/pi-colored-model-status#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/yusukeshib/pi-colored-model-status.git"
+	},
+	"bugs": {
+		"url": "https://github.com/yusukeshib/pi-colored-model-status/issues"
+	},
+	"files": [
+		"extensions/",
+		"README.md",
+		"LICENSE"
+	],
+	"scripts": {
+		"typecheck": "tsc --noEmit",
+		"check": "bun run typecheck && bun run biome:check",
+		"release": "bun publish --access public",
+		"lint": "biome lint .",
+		"format": "biome format --write .",
+		"format:check": "biome format .",
+		"biome:check": "biome check ."
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.4.14",
+		"@earendil-works/pi-coding-agent": "^0.80.0",
+		"@earendil-works/pi-tui": "*",
+		"@types/bun": "^1.3.0",
+		"typescript": "^5.7.0"
+	},
+	"peerDependencies": {
+		"@earendil-works/pi-coding-agent": "*",
+		"@earendil-works/pi-tui": "*"
+	},
+	"pi": {
+		"extensions": [
+			"./extensions"
+		]
+	}
+}