@pi-archimedes/ui 2.9.3 → 2.10.0

package/README.md

@@ -48,6 +48,7 @@ TUI enhancements for the Pi Archimedes monorepo.
 | `labelText` | string | `"Thinking..."` | Text shown before thinking blocks |
 | `labelColor` | string | `"255,215,0"` | RGB color for the thinking label (e.g. `255,215,0`) |
 | `animationStyle` | "diagonal" \| "top-right" \| "bottom-left" \| "bottom-right" \| "center-out" \| "wave" \| "horizontal" \| "vertical" \| "vertical-up" | `"vertical-up"` | Startup logo animation |
+| `colorfulLogo` | boolean | `false` | Use pi's brand colors for the splash logo |
 | `editorSpinBorder` | boolean | `true` | Animated spinner border on editor |
 | `editorSpinSpeed` | "slow" \| "normal" \| "fast" | `"normal"` | Editor border spinner speed |
 | `editorSpinStyle` | "typing" \| "pulse" \| "rain" \| "cascade" \| "columns" \| "wave-rows" \| "diagonal-swipe" \| "sparkle" \| "pendulum" \| "marquee" | `"pendulum"` | Editor spinner style |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-archimedes/ui",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "description": "Terminal UI enhancements, styled bash tool rendering, and visual presentation components for Pi",
   "type": "module",
   "main": "./src/index.ts",
@@ -28,7 +28,7 @@
     "./config": "./src/config.ts"
   },
   "dependencies": {
-    "@pi-archimedes/core": "2.9.3"
+    "@pi-archimedes/core": "2.10.0"
   },
   "devDependencies": {
     "@earendil-works/pi-ai": "^0.87.0",

package/src/config.test.ts

@@ -44,6 +44,7 @@ describe("loadUIConfig", () => {
       labelText: "Thinking...",
       labelColor: "255,215,0",
       animationStyle: "vertical-up",
+      colorfulLogo: false,
       editorSpinBorder: true,
       editorSpinSpeed: "normal",
       editorSpinLabel: "Working",
@@ -89,6 +90,7 @@ describe("DEFAULT_UI_CONFIG", () => {
       labelText: "Thinking...",
       labelColor: "255,215,0",
       animationStyle: "vertical-up",
+      colorfulLogo: false,
       editorSpinBorder: true,
       editorSpinSpeed: "normal",
       editorSpinLabel: "Working",

package/src/config.ts

@@ -87,6 +87,7 @@ export interface UIConfig {
   labelText: string;
   labelColor: string;
   animationStyle: AnimationStyle;
+  colorfulLogo: boolean;
   editorSpinBorder: boolean;
   editorSpinSpeed: "slow" | "normal" | "fast";
   editorSpinLabel: string;
@@ -106,6 +107,7 @@ export const DEFAULT_UI_CONFIG: UIConfig = {
   labelText: "Thinking...",
   labelColor: "255,215,0",
   animationStyle: "vertical-up",
+  colorfulLogo: false,
   editorSpinBorder: true,
   editorSpinSpeed: "normal",
   editorSpinLabel: "Working",

package/src/settings.test.ts

@@ -3,9 +3,9 @@ import { getUISettingsItems } from "./settings.js";
 import { DEFAULT_UI_CONFIG, ANIMATION_STYLES, type UIConfig } from "./config.js";
 
 describe("getUISettingsItems", () => {
-  it("exposes all 14 UI setting items with correct defaults", () => {
+  it("exposes all 15 UI setting items with correct defaults", () => {
     const items = getUISettingsItems(DEFAULT_UI_CONFIG);
-    expect(items).toHaveLength(14);
+    expect(items).toHaveLength(15);
 
     const ids = items.map((i) => i.id);
     expect(ids).toEqual([
@@ -19,6 +19,7 @@ describe("getUISettingsItems", () => {
       "labelText",
       "labelColor",
       "animationStyle",
+      "colorfulLogo",
       "editorSpinBorder",
       "editorSpinSpeed",
       "editorSpinStyle",

package/src/settings.ts

@@ -76,6 +76,13 @@ export function getUISettingsItems(config: UIConfig): SettingItem[] {
       currentValue: config.animationStyle,
       values: [...ANIMATION_STYLES],
     },
+    {
+      id: "colorfulLogo",
+      label: "Colorful Logo",
+      description: "Use pi's brand colors for the splash logo",
+      currentValue: config.colorfulLogo ? "On" : "Off",
+      values: ["On", "Off"],
+    },
     {
       id: "editorSpinBorder",
       label: "Editor Spin Border",

package/src/startup/index.ts

@@ -42,7 +42,8 @@ export interface ListingRef {
 export function renderHeader(theme: Theme, ref: ListingRef, width: number, height: number): string[] {
   const dim = (t: string) => theme.fg("dim", t);
   const accent = (t: string) => theme.fg("accent", t);
-  const logoLines = getShinedLogo(ref.frame, loadUIConfig().animationStyle);
+  const cfg = loadUIConfig();
+  const logoLines = getShinedLogo(ref.frame, cfg.animationStyle, cfg.colorfulLogo);
 
   // Use cached text lines if settled (no more animations)
   let listingLines: string[];

package/src/startup/logo.test.ts

@@ -180,6 +180,26 @@ describe("getShinedLogo (truecolor)", () => {
 		const result2 = mod.getShinedLogo(50, "wave");
 		expect(result1).toEqual(result2);
 	});
+
+	it("colorful logo paints every pixel with its pi brand color", () => {
+		const C = "228;138;122", B = "79;142;179", Y = "234;182;93", W = "255;255;255";
+		const pixels = [
+			[C, C, C, null],
+			[B, null, C, null],
+			[B, B, null, Y],
+			[B, null, null, Y],
+		];
+		const cellColors = (row: string) =>
+			[...row.matchAll(/\x1b\[38;2;(\d+;\d+;\d+)m.\x1b\[0m| /g)].map((m) => m[1] ?? null);
+
+		const colorful = mod.getShinedLogo(500, "wave", true);
+		const plain = mod.getShinedLogo(500, "wave", false);
+		for (let y = 0; y < 8; y++) {
+			const expected = Array.from({ length: 16 }, (_, x) => pixels[Math.floor(y / 2)]![Math.floor(x / 4)]);
+			expect(cellColors(colorful[y]!)).toEqual(expected);
+			expect(cellColors(plain[y]!)).toEqual(expected.map((c) => (c ? W : null)));
+		}
+	});
 });
 
 // ── All animation styles ─────────────────────────────────────────────────────

package/src/startup/logo.ts

@@ -23,6 +23,17 @@ export const LOGO = [
   "████        ████",
 ];
 
+// Pi brand colors per logo pixel (4x4). Copied from pi-coding-agent's pi-logo.js, which is not exported.
+const CORAL: [number, number, number] = [228, 138, 122];
+const BLUE: [number, number, number] = [79, 142, 179];
+const YELLOW: [number, number, number] = [234, 182, 93];
+const PI_COLORS: ([number, number, number] | null)[][] = [
+  [CORAL, CORAL, CORAL, null],
+  [BLUE, null, CORAL, null],
+  [BLUE, BLUE, null, YELLOW],
+  [BLUE, null, null, YELLOW],
+];
+
 export const CHAR_FADE_FRAMES = 22;
 export const LOGO_SETTLE_FRAME = 90;
 export const LOGO_PAD = 0;
@@ -61,7 +72,7 @@ function computeRevealAt(x: number, y: number, style: AnimationStyle): number {
   }
 }
 
-export function getShinedLogo(frame: number, style: AnimationStyle = "wave"): string[] {
+export function getShinedLogo(frame: number, style: AnimationStyle = "wave", colorful = false): string[] {
   if (!TRUECOLOR) return LOGO;
 
   return LOGO.map((line, y) => {
@@ -77,6 +88,12 @@ export function getShinedLogo(frame: number, style: AnimationStyle = "wave"): st
 
       const t = Math.min(1, age / CHAR_FADE_FRAMES);
       const eased = 1 - (1 - t) * (1 - t);
+      const pi = colorful ? PI_COLORS[Math.floor(y / 2)]![Math.floor(x / 4)] : null;
+      if (pi) {
+        result += rgb(lerp(50, pi[0], eased), lerp(50, pi[1], eased), lerp(50, pi[2], eased), char);
+        continue;
+      }
+
       const brightness = Math.floor(lerp(50, 255, eased));
       result += gray(brightness, char);
     }