@yusukeshib/pi-colored-model-status 0.1.1 → 0.1.2

package/README.md

@@ -4,7 +4,7 @@ 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
+pi's footer with independently background-colored model and thinking badges. Everything else the default
 footer shows (cwd, git branch, token stats, context %, and other extensions'
 status line) is faithfully reproduced.
 
@@ -17,15 +17,27 @@ strongly distinct hues:
 
 | Family                    | Color            |
 | ------------------------- | ---------------- |
-| `opus`                    | deep purple      |
-| `sonnet`                  | bright cyan-blue |
-| `fable`                   | vivid orange     |
+| `opus`, `terra`           | deep purple      |
+| `sonnet`, `luna`          | bright cyan-blue |
+| `fable`, `sol`            | vivid orange     |
 | `haiku`                   | green            |
 | `gpt`, `o1`, `o3`, `o4`   | OpenAI teal      |
 | `gemini`                  | Google blue      |
 | `grok`                    | slate            |
 | anything else             | gray (fallback)  |
 
+Thinking effort has its own independent color scale:
+
+| Level     | Color     |
+| --------- | --------- |
+| `off`     | gray      |
+| `minimal` | blue-gray |
+| `low`     | green     |
+| `medium`  | amber     |
+| `high`    | orange    |
+| `xhigh`   | red       |
+| `max`     | magenta   |
+
 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`.
@@ -50,18 +62,24 @@ pi -e npm:@yusukeshib/pi-colored-model-status
 
 ## Customize
 
-Edit the `BADGES` array at the top of
+Edit the `MODEL_BADGES` and `THINKING_BADGES` arrays 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] },
+const MODEL_BADGES = [
+  { match: ["opus", "terra"], bg: [147, 51, 234] },
+  { match: ["sonnet", "luna"], bg: [14, 165, 233] },
+  { match: ["fable", "sol"], bg: [234, 88, 12] },
   // …add your own, e.g.:
   { match: ["deepseek"], bg: [30, 90, 200] },
 ];
+
+const THINKING_BADGES = [
+  { match: ["low"], bg: [22, 163, 74] },
+  { match: ["high"], bg: [234, 88, 12] },
+  // …
+];
 ```
 
 Matching is a case-insensitive substring test against the model id, so `gpt`

package/extensions/colored-model-status.ts

@@ -26,22 +26,33 @@ interface Badge {
 	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
+// Model families and thinking levels are colored independently.
+// Each list is matched top-to-bottom; first hit wins.
+const MODEL_BADGES: readonly Badge[] = [
+	{ match: ["opus", "terra"], bg: [147, 51, 234] }, // deep purple
+	{ match: ["sonnet", "luna"], bg: [14, 165, 233] }, // bright cyan-blue
+	{ match: ["fable", "sol"], 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 THINKING_BADGES: readonly Badge[] = [
+	{ match: ["off"], bg: [82, 82, 91] }, // gray
+	{ match: ["minimal"], bg: [71, 85, 105] }, // blue-gray
+	{ match: ["low"], bg: [22, 163, 74] }, // green
+	{ match: ["medium"], bg: [202, 138, 4] }, // amber
+	{ match: ["xhigh"], bg: [220, 38, 38] }, // red
+	{ match: ["high"], bg: [234, 88, 12] }, // orange
+	{ match: ["max"], bg: [219, 39, 119] }, // magenta
+];
+
 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;
+function pickBadge(value: string, badges: readonly Badge[]): Badge {
+	const lower = value.toLowerCase();
+	return badges.find((badge) => badge.match.some((keyword) => lower.includes(keyword))) ?? FALLBACK;
 }
 
 /** Pick a contrasting foreground (black/white) from the background luminance. */
@@ -159,38 +170,44 @@ export default function (pi: ExtensionAPI) {
 						statsLeftWidth = visibleWidth(statsLeft);
 					}
 
-					// --- Right side: model + thinking as a colored badge ---
+					// --- Right side: independently colored model and thinking badges ---
 					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
+					let modelText = modelName;
 					if (footerData.getAvailableProviderCount() > 1 && model) {
-						rightText = `(${model.provider}) ${rightText}`;
+						modelText = `(${model.provider}) ${modelText}`;
 					}
-
-					const badge = pickBadge(modelName);
-					// Badge adds a leading/trailing space, so width = text width + 2
-					const rightWidth = visibleWidth(rightText) + 2;
+					const thinkingLevel = model?.reasoning ? pi.getThinkingLevel() || "off" : undefined;
+					const thinkingText = thinkingLevel === "off" ? "thinking off" : thinkingLevel;
+					const modelBadge = pickBadge(modelName, MODEL_BADGES);
+					const thinkingBadge = thinkingLevel
+						? pickBadge(thinkingLevel, THINKING_BADGES)
+						: undefined;
+					const thinkingWidth = thinkingText && thinkingBadge ? visibleWidth(thinkingText) + 2 : 0;
+					const rightWidth = visibleWidth(modelText) + 2 + thinkingWidth;
 
 					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);
+						const thinking =
+							thinkingText && thinkingBadge ? paintBadge(thinkingText, thinkingBadge) : "";
+						statsLine =
+							dimStatsLeft + theme.fg("dim", pad) + paintBadge(modelText, modelBadge) + thinking;
 					} 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;
+						// Preserve the thinking badge when possible and truncate only the model badge.
+						const modelAvail = width - statsLeftWidth - minPadding - thinkingWidth - 2;
+						if (modelAvail > 0) {
+							const truncatedModel = truncateToWidth(modelText, modelAvail, "");
+							const thinking =
+								thinkingText && thinkingBadge ? paintBadge(thinkingText, thinkingBadge) : "";
+							const paintedWidth = visibleWidth(truncatedModel) + 2 + thinkingWidth;
+							const pad = " ".repeat(Math.max(0, width - statsLeftWidth - paintedWidth));
+							statsLine =
+								dimStatsLeft +
+								theme.fg("dim", pad) +
+								paintBadge(truncatedModel, modelBadge) +
+								thinking;
 						} else {
 							statsLine = dimStatsLeft;
 						}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@yusukeshib/pi-colored-model-status",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"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",